@mozaic-ds/web-components 1.0.0-beta.4 → 1.0.0-beta.6

package/dist/components/toaster/Toaster.svelte

@@ -0,0 +1,640 @@
+<svelte:options customElement={{ tag: 'm-toaster' }} />
+
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+  import InfoCircleFilled32 from '@mozaic-ds/icons-svelte/svelte/InfoCircleFilled32/InfoCircleFilled32.svelte';
+  import WarningCircleFilled32 from '@mozaic-ds/icons-svelte/svelte/WarningCircleFilled32/WarningCircleFilled32.svelte';
+  import CrossCircleFilled32 from '@mozaic-ds/icons-svelte/svelte/CrossCircleFilled32/CrossCircleFilled32.svelte';
+  import CheckCircleFilled32 from '@mozaic-ds/icons-svelte/svelte/CheckCircleFilled32/CheckCircleFilled32.svelte';
+  import Cross20 from '@mozaic-ds/icons-svelte/svelte/Cross20/Cross20.svelte';
+  /**
+   * A toaster is a temporary notification that appears briefly on the screen to provide feedback or updates without interrupting the user’s workflow. It is commonly used for success messages, warnings, errors, or informational updates. Toasters can disappear automatically after a few seconds, be dismissed manually via a close button, or be removed when the user performs a relevant action. They typically include an icon, a short message, and an optional close button for better usability.
+   */
+  interface Props {
+    /**
+     * If `true`, display the Toaster.
+     */
+    open?: boolean;
+    /**
+     * Position of the toaster.
+     */
+    position?: 'top' | 'bottom' | 'top-center' | 'bottom-center';
+    /**
+     * Description of the toaster.
+     */
+    description: string;
+    /**
+     * Allows to define the toaster style.
+     */
+    status?: 'info' | 'success' | 'warning' | 'error';
+    /**
+     * If `true`, display the close button.
+     */
+    closable?: boolean;
+    /**
+     * If `true`, display the progress bar of the duration.
+     */
+    progress?: boolean;
+    /**
+     * Duration of the toaster
+     */
+    timeout?: number;
+  }
+
+  let {
+    open,
+    position = 'top',
+    description,
+    status = 'info',
+    closable = true,
+    progress,
+    timeout,
+  }: Props = $props();
+
+  const iconMap = [
+    { status: 'info', component: InfoCircleFilled32 },
+    { status: 'success', component: CheckCircleFilled32 },
+    { status: 'warning', component: WarningCircleFilled32 },
+    { status: 'error', component: CrossCircleFilled32 },
+  ];
+
+  function getSelected(status: string) {
+    return iconMap.find((icon) => icon.status === status) || iconMap[0];
+  }
+
+  let selected = $state(getSelected(status));
+
+  let progressValue = $state(0);
+  let intervalId: ReturnType<typeof setInterval> | null = null;
+  let timeoutId: ReturnType<typeof setTimeout> | null = null;
+
+  const onClose = () => {
+    open = false;
+
+    const event = new CustomEvent('update:open', {
+      detail: open,
+      bubbles: true,
+      composed: true,
+    });
+    // @ts-ignore: `this` is the custom element instance
+    this.dispatchEvent(event);
+  };
+
+  onMount(() => {
+    if (timeout) {
+      if (progress) {
+        const intervalDuration = 100;
+        const steps = timeout / intervalDuration;
+        const increment = 100 / steps;
+
+        intervalId = setInterval(() => {
+          progressValue += increment;
+          if (progressValue >= 100) {
+            progressValue = 100;
+            clearInterval(intervalId!);
+            onClose();
+          }
+        }, intervalDuration);
+      } else {
+        timeoutId = setTimeout(() => {
+          onClose();
+        }, timeout);
+      }
+    }
+  });
+
+  onDestroy(() => {
+    if (intervalId) clearInterval(intervalId);
+    if (timeoutId) clearTimeout(timeoutId);
+  });
+</script>
+
+<section 
+  class={["mc-toaster", open && 'is-open', `mc-toaster--${status}`, `mc-toaster--${position}`]} 
+  role="status"
+  tabindex="-1"
+  aria-hidden={!open}
+>
+  <span class="mc-toaster__icon" aria-hidden="true">
+    <selected.component/>
+  </span>
+
+  <div class="mc-toaster__content">
+    <p class="mc-toaster__message">{description}</p>
+
+    <div class="mc-toaster__action">
+      <slot name="action" />
+    </div>
+  </div>
+
+  {#if closable}
+    <button class="mc-toaster__close mc-button mc-button--icon-button mc-button--inverse mc-button--s mc-button--ghost" 
+      type="button" 
+      aria-label="Close"
+      onclick={onClose}
+    >
+      <Cross20 class="mc-button__icon" slot="icon" aria-hidden="true" />
+    </button>
+  {/if}
+
+  {#if progress}
+    <div
+      class="mc-toaster__indicator mc-linear-progressbar-buffer mc-linear-progressbar-buffer--m"
+    >
+      <div
+        class="mc-linear-progressbar-buffer__indicator"
+        role="progressbar"
+        style={`--progress-value: ${progressValue};`}
+        aria-valuenow={progressValue}
+        aria-valuemin="0"
+        aria-valuemax="100"
+      ></div>
+    </div>
+  {/if}
+</section>
+
+<style>/**
+ * Do not edit directly, this file was auto-generated.
+ */
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.mc-button {
+  color: #ffffff;
+  background-color: #464e63;
+  font-weight: 600;
+  padding: 0 calc(1rem - 0.125rem);
+  min-height: 3rem;
+  min-width: 3rem;
+  display: inline-flex;
+  justify-content: center;
+  vertical-align: middle;
+  text-align: center;
+  border: 2px solid transparent;
+  border-radius: 0.25rem;
+  transition: all ease 200ms;
+  transition: box-shadow 200ms ease;
+  align-items: center;
+  box-sizing: border-box;
+  font-family: inherit;
+  fill: currentcolor;
+  gap: 0.25rem;
+  cursor: pointer;
+}
+.mc-button:hover {
+  background-color: #343b4c;
+}
+.mc-button:active {
+  background-color: #242938;
+}
+.mc-button:disabled {
+  background-color: #d9d9d9;
+  border-color: transparent;
+  color: #737373;
+  cursor: not-allowed;
+}
+.mc-button .mc-button__label {
+  font-size: 1rem;
+}
+.mc-button__label {
+  font-size: 1rem;
+}
+.mc-button__icon {
+  flex-shrink: 0;
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.mc-button:disabled {
+  background-color: #d9d9d9;
+  border-color: transparent;
+  color: #737373;
+  cursor: not-allowed;
+}
+.mc-button:focus-visible {
+  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, #ffffff), 0 0 0 0.25rem var(--focus-color-outer, #000000);
+  outline: 0.125rem solid transparent;
+  outline-offset: 0.125rem;
+}
+.mc-button--s {
+  padding: 0 calc(0.75rem - 0.125rem);
+  min-height: 2rem;
+  min-width: 2rem;
+}
+.mc-button--s .mc-button__label {
+  font-size: 0.875rem;
+}
+.mc-button--s .mc-button__icon {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+.mc-button--s .mc-button__icon:only-child {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+.mc-button--m {
+  padding: 0 calc(1rem - 0.125rem);
+  min-height: 3rem;
+  min-width: 3rem;
+}
+.mc-button--m .mc-button__label {
+  font-size: 1rem;
+}
+.mc-button--m .mc-button__icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.mc-button--m .mc-button__icon:only-child {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.mc-button--l {
+  padding: 0 calc(1.25rem - 0.125rem);
+  min-height: 4rem;
+  min-width: 4rem;
+}
+.mc-button--l .mc-button__label {
+  font-size: 1.125rem;
+}
+.mc-button--l .mc-button__icon {
+  width: 2rem;
+  height: 2rem;
+}
+.mc-button--l .mc-button__icon:only-child {
+  width: 2rem;
+  height: 2rem;
+}
+.mc-button--icon-only {
+  padding: 0.25rem;
+}
+.mc-button--outlined {
+  color: #242938;
+  border-color: #8891aa;
+  background-color: #ffffff;
+}
+.mc-button--outlined:hover {
+  background-color: #eff1f6;
+}
+.mc-button--outlined:active {
+  background-color: #c9d0de;
+}
+.mc-button--outlined:disabled {
+  background-color: #d9d9d9;
+  border-color: transparent;
+  color: #737373;
+  cursor: not-allowed;
+}
+.mc-button--ghost {
+  color: #242938;
+  background-color: rgba(255, 255, 255, 0.01);
+}
+.mc-button--ghost:hover {
+  background-color: rgba(70, 78, 99, 0.1);
+}
+.mc-button--ghost:active {
+  background-color: rgba(70, 78, 99, 0.2);
+}
+.mc-button--ghost:disabled {
+  background-color: #d9d9d9;
+  border-color: transparent;
+  color: #737373;
+  cursor: not-allowed;
+}
+.mc-button--accent {
+  color: #ffffff;
+  background-color: #117f03;
+}
+.mc-button--accent:hover {
+  background-color: #006902;
+}
+.mc-button--accent:active {
+  background-color: #035010;
+}
+.mc-button--accent:disabled {
+  background-color: #d9d9d9;
+  border-color: transparent;
+  color: #737373;
+  cursor: not-allowed;
+}
+.mc-button--danger {
+  color: #ffffff;
+  background-color: #c61112;
+}
+.mc-button--danger:hover {
+  background-color: #8c0003;
+}
+.mc-button--danger:active {
+  background-color: #530000;
+}
+.mc-button--danger:disabled {
+  background-color: #d9d9d9;
+  border-color: transparent;
+  color: #737373;
+  cursor: not-allowed;
+}
+.mc-button--inverse {
+  --focus-color-mid: #000000;
+  --focus-color-outer: #ffffff;
+  color: #242938;
+  background-color: #ffffff;
+}
+.mc-button--inverse:hover {
+  background-color: #e6e6e6;
+}
+.mc-button--inverse:active {
+  background-color: #cccccc;
+}
+.mc-button--inverse:disabled {
+  background-color: #d9d9d9;
+  border-color: transparent;
+  color: #737373;
+  cursor: not-allowed;
+}
+.mc-button--icon-button {
+  border-radius: 100%;
+  padding: 0;
+}
+.mc-button--loading .mc-button__loader {
+  position: absolute;
+  color: currentcolor;
+}
+.mc-button--loading .mc-button__label,
+.mc-button--loading .mc-button__icon {
+  visibility: hidden;
+}
+.mc-button--outlined.mc-button--standard {
+  color: #242938;
+  border-color: #8891aa;
+  background-color: #ffffff;
+}
+.mc-button--outlined.mc-button--standard:hover {
+  background-color: #eff1f6;
+}
+.mc-button--outlined.mc-button--standard:active {
+  background-color: #c9d0de;
+}
+.mc-button--outlined.mc-button--standard:disabled {
+  background-color: #d9d9d9;
+  border-color: transparent;
+  color: #737373;
+  cursor: not-allowed;
+}
+.mc-button--outlined.mc-button--accent {
+  color: #117f03;
+  border-color: #78be20;
+  background-color: #ffffff;
+}
+.mc-button--outlined.mc-button--accent:hover {
+  background-color: #ebf5de;
+}
+.mc-button--outlined.mc-button--accent:active {
+  background-color: #c5e39e;
+}
+.mc-button--outlined.mc-button--accent:disabled {
+  background-color: #d9d9d9;
+  border-color: transparent;
+  color: #737373;
+  cursor: not-allowed;
+}
+.mc-button--outlined.mc-button--danger {
+  color: #c61112;
+  border-color: #ef5f5c;
+  background-color: #ffffff;
+}
+.mc-button--outlined.mc-button--danger:hover {
+  background-color: #fdeaea;
+}
+.mc-button--outlined.mc-button--danger:active {
+  background-color: #f8bcbb;
+}
+.mc-button--outlined.mc-button--danger:disabled {
+  background-color: #d9d9d9;
+  border-color: transparent;
+  color: #737373;
+  cursor: not-allowed;
+}
+.mc-button--outlined.mc-button--inverse {
+  color: #ffffff;
+  border-color: #ffffff;
+  background-color: rgba(255, 255, 255, 0.01);
+}
+.mc-button--outlined.mc-button--inverse:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+.mc-button--outlined.mc-button--inverse:active {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+.mc-button--outlined.mc-button--inverse:disabled {
+  background-color: #d9d9d9;
+  border-color: transparent;
+  color: #737373;
+  cursor: not-allowed;
+}
+.mc-button--ghost.mc-button--standard {
+  color: #242938;
+  background-color: rgba(255, 255, 255, 0.01);
+}
+.mc-button--ghost.mc-button--standard:hover {
+  background-color: rgba(70, 78, 99, 0.1);
+}
+.mc-button--ghost.mc-button--standard:active {
+  background-color: rgba(70, 78, 99, 0.2);
+}
+.mc-button--ghost.mc-button--standard:disabled {
+  background-color: #d9d9d9;
+  border-color: transparent;
+  color: #737373;
+  cursor: not-allowed;
+}
+.mc-button--ghost.mc-button--accent {
+  color: #117f03;
+  background-color: rgba(255, 255, 255, 0.01);
+}
+.mc-button--ghost.mc-button--accent:hover {
+  background-color: rgba(17, 127, 3, 0.1);
+}
+.mc-button--ghost.mc-button--accent:active {
+  background-color: rgba(17, 127, 3, 0.2);
+}
+.mc-button--ghost.mc-button--accent:disabled {
+  background-color: #d9d9d9;
+  border-color: transparent;
+  color: #737373;
+  cursor: not-allowed;
+}
+.mc-button--ghost.mc-button--danger {
+  color: #c61112;
+  background-color: rgba(255, 255, 255, 0.01);
+}
+.mc-button--ghost.mc-button--danger:hover {
+  background-color: rgba(198, 17, 18, 0.1);
+}
+.mc-button--ghost.mc-button--danger:active {
+  background-color: rgba(198, 17, 18, 0.2);
+}
+.mc-button--ghost.mc-button--danger:disabled {
+  background-color: #d9d9d9;
+  border-color: transparent;
+  color: #737373;
+  cursor: not-allowed;
+}
+.mc-button--ghost.mc-button--inverse {
+  color: #ffffff;
+  background-color: rgba(255, 255, 255, 0.01);
+}
+.mc-button--ghost.mc-button--inverse:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+.mc-button--ghost.mc-button--inverse:active {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+.mc-button--ghost.mc-button--inverse:disabled {
+  background-color: #d9d9d9;
+  border-color: transparent;
+  color: #737373;
+  cursor: not-allowed;
+}
+
+.mc-linear-progressbar-buffer {
+  --progress-value: 40;
+  background-color: #c9d0de;
+  height: 0.25rem;
+  position: relative;
+  min-width: 6rem;
+  border-radius: 1rem;
+}
+.mc-linear-progressbar-buffer__indicator {
+  background-color: #464e63;
+  height: 100%;
+  transition: width 0.4s ease;
+  overflow: hidden;
+  border-radius: 1rem;
+  box-sizing: border-box;
+  width: calc(var(--progress-value) * 1%);
+}
+.mc-linear-progressbar-buffer--s {
+  height: 0.125rem;
+}
+.mc-linear-progressbar-buffer--l {
+  height: 0.5rem;
+}
+
+/* create columns */
+/* create columns */
+/* create custom named columns with custom content */
+.mc-toaster {
+  border-radius: 0.5rem;
+  display: flex;
+  flex-flow: row wrap;
+  align-items: flex-start;
+  background: #002a41;
+  min-height: 3.5rem;
+  min-width: 18rem;
+  position: absolute;
+  top: 1.5rem;
+  right: 1.5rem;
+  margin-left: 1.5rem;
+  box-sizing: border-box;
+  color: #ffffff;
+  z-index: var(--toaster-z-index, 4);
+  opacity: 0;
+  visibility: hidden;
+  transform: translateX(25%);
+  transition: visibility 0s linear 0.4s, transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
+}
+.mc-toaster.is-open {
+  opacity: 1;
+  visibility: visible;
+  transform: translateX(0);
+}
+.mc-toaster__icon {
+  width: 2rem;
+  height: 2rem;
+  margin: 0.75rem;
+  fill: #3facd7;
+}
+.mc-toaster__content {
+  flex: 1 1 0;
+  flex-direction: column;
+  align-self: stretch;
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+  padding: 0.75rem 1rem 0.75rem 0;
+}
+@media (width >= 680px) {
+  .mc-toaster__content {
+    flex-direction: row;
+    align-items: center;
+  }
+}
+.mc-toaster__message {
+  flex: 1 1 0;
+  margin: 0;
+  font-size: 1rem;
+  line-height: 1.3;
+}
+.mc-toaster--information {
+  background: #002a41;
+}
+.mc-toaster--information .mc-toaster__icon {
+  fill: #3facd7;
+}
+.mc-toaster--information .mc-toaster__indicator {
+  --progressbar-color-indicator: #3facd7;
+}
+.mc-toaster--success {
+  background: #023618;
+}
+.mc-toaster--success .mc-toaster__icon {
+  fill: #78be20;
+}
+.mc-toaster--success .mc-toaster__indicator {
+  --progressbar-color-indicator: #78be20;
+}
+.mc-toaster--warning {
+  background: #360e00;
+}
+.mc-toaster--warning .mc-toaster__icon {
+  fill: #ef934a;
+}
+.mc-toaster--warning .mc-toaster__indicator {
+  --progressbar-color-indicator: #ef934a;
+}
+.mc-toaster--error {
+  background: #2d0000;
+}
+.mc-toaster--error .mc-toaster__icon {
+  fill: #ef5f5c;
+}
+.mc-toaster--error .mc-toaster__indicator {
+  --progressbar-color-indicator: #ef5f5c;
+}
+.mc-toaster--bottom {
+  top: inherit;
+  bottom: 1.5rem;
+  right: 1.5rem;
+}
+.mc-toaster--top-center {
+  top: 1.5rem;
+  right: 50%;
+  transform: translateX(50%) !important;
+}
+.mc-toaster--bottom-center {
+  top: inherit;
+  bottom: 1.5rem;
+  right: 50%;
+  transform: translateX(50%) !important;
+}
+.mc-toaster__indicator {
+  width: 100%;
+  margin: 0.5rem;
+  --progressbar-color-indicator: #3facd7;
+  --progressbar-color-background: #ffffff;
+}
+.mc-toaster__close {
+  margin: 0.25rem;
+}
+
+.mc-toaster__action:empty {
+  display: none;
+}</style>

package/dist/components/toaster/Toaster.svelte.d.ts

@@ -0,0 +1,54 @@
+/**
+ * A toaster is a temporary notification that appears briefly on the screen to provide feedback or updates without interrupting the user’s workflow. It is commonly used for success messages, warnings, errors, or informational updates. Toasters can disappear automatically after a few seconds, be dismissed manually via a close button, or be removed when the user performs a relevant action. They typically include an icon, a short message, and an optional close button for better usability.
+ */
+interface Props {
+    /**
+     * If `true`, display the Toaster.
+     */
+    open?: boolean;
+    /**
+     * Position of the toaster.
+     */
+    position?: 'top' | 'bottom' | 'top-center' | 'bottom-center';
+    /**
+     * Description of the toaster.
+     */
+    description: string;
+    /**
+     * Allows to define the toaster style.
+     */
+    status?: 'info' | 'success' | 'warning' | 'error';
+    /**
+     * If `true`, display the close button.
+     */
+    closable?: boolean;
+    /**
+     * If `true`, display the progress bar of the duration.
+     */
+    progress?: boolean;
+    /**
+     * Duration of the toaster
+     */
+    timeout?: number;
+}
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Toaster: $$__sveltets_2_IsomorphicComponent<Props, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    action: {};
+}, {}, "">;
+type Toaster = InstanceType<typeof Toaster>;
+export default Toaster;
+//# sourceMappingURL=Toaster.svelte.d.ts.map

package/dist/components/toaster/Toaster.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toaster.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/toaster/Toaster.svelte.ts"],"names":[],"mappings":"AAUE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,YAAY,GAAG,eAAe,CAAC;IAC7D;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAClD;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AA8GH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAUD,QAAA,MAAM,OAAO;;;;UAAqF,CAAC;AACjF,KAAK,OAAO,GAAG,YAAY,CAAC,OAAO,OAAO,CAAC,CAAC;AAC9C,eAAe,OAAO,CAAC"}