@synergy-design-system/mcp 2.14.1 → 3.0.0

package/metadata/packages/components/components/syn-alert/component.styles.ts

@@ -1,203 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  /* stylelint-disable no-descending-specificity */
-  :host {
-    display: contents;
-
-    /* For better DX, we'll reset the margin here so the base part can inherit it */
-    margin: 0;
-  }
-
-  .alert {
-    /* Defines the used border and icon color for variants */
-    --variant-color-border: var(--syn-alert-informative-color-border);
-    --variant-color-background: var(--syn-alert-informative-color-background);
-    --variant-color-icon: var(--syn-alert-informative-color-icon);
-    --variant-color-indicator: var(--syn-alert-informative-color-indicator);
-
-    /* Defines special settings for sizes */
-    --size-font-size: var(--syn-font-size-medium);
-    --size-icon-size: var(--syn-font-size-x-large);
-    --size-min-height: 54px;
-    --size-message-padding: var(--syn-spacing-medium) var(--syn-spacing-large) var(--syn-spacing-medium) var(--syn-spacing-medium);
-    --size-icon-padding-block: var(--syn-spacing-medium);
-    --size-icon-padding-inline: var(--syn-spacing-medium);
-
-    align-items: stretch;
-    background-color: var(--variant-color-background);
-    border: var(--syn-panel-border-width) solid var(--variant-color-border);
-    border-left: 0;
-    border-radius: var(--syn-border-radius-none);
-    box-sizing: content-box;
-    color: var(--syn-typography-color-text);
-    display: flex;
-    font-family: var(--syn-font-sans);
-    font-size: var(--size-font-size);
-    font-weight: var(--syn-font-weight-normal);
-    line-height: var(--syn-line-height-normal);
-    margin: inherit;
-    min-height: var(--size-min-height);
-    position: relative;
-  }
-
-  /**
-   * Add back the items left borders
-   * This is done to prevent border clipping with the large border-left needed on .alert
-   * Note we also need to adjust our paddings to add the border width here
-   */
-  .alert::before {
-    background: var(--variant-color-indicator);
-    bottom: -1px;
-    content: "";
-    left: 0;
-    position: absolute;
-    top: -1px;
-    width: var(--syn-spacing-2x-small);
-  }
-
-  .alert :first-child {
-    margin-inline-start: var(--syn-spacing-2x-small);
-  }
-
-  .alert:not(.alert--has-icon) .alert__icon,
-  .alert:not(.alert--closable) .alert__close-button {
-    display: none;
-  }
-
-  /**
-   * Make sure everything is aligned to top
-   */
-  .alert__icon {
-    align-items: flex-start;
-    color: var(--variant-color-icon);
-    display: flex;
-    flex: 0 0 auto;
-    font-size: var(--size-icon-size);
-    padding-block-start: var(--size-icon-padding-block);
-    padding-inline-start: var(--size-icon-padding-inline);
-  }
-
-  .alert--has-countdown {
-    border-bottom: none;
-  }
-
-  .alert__message {
-    align-self: center;
-    display: block;
-    flex: 1 1 auto;
-    padding: var(--size-message-padding);
-  }
-
-  /**
-   * Close Icon
-   */
-  .alert__close-button {
-    align-items: flex-start;
-    align-self: start; /* #1135: Fix alignment for the close icon */
-    color: var(--syn-typography-color-text);
-    display: flex;
-    flex: 0 0 auto;
-    font-size: var(--size-icon-size);
-    margin-block: calc(var(--syn-spacing-x-small) - var(--syn-panel-border-width));
-    margin-inline-end: var(--syn-spacing-x-small);
-  }
-
-  .alert__countdown {
-    background-color: var(--syn-panel-border-color);
-    bottom: 0;
-    display: flex;
-    height: calc(var(--syn-panel-border-width) * 3);
-    left: 0;
-    position: absolute;
-    width: 100%;
-  }
-
-  .alert__countdown--ltr {
-    justify-content: flex-end;
-  }
-
-  .alert__countdown .alert__countdown-elapsed {
-    height: 100%;
-    width: 0;
-  }
-
-  .alert--primary .alert__countdown-elapsed {
-    background-color: var(--syn-color-primary-600);
-  }
-
-  .alert--success .alert__countdown-elapsed {
-    background-color: var(--syn-color-success-600);
-  }
-
-  .alert--neutral .alert__countdown-elapsed {
-    background-color: var(--syn-color-neutral-600);
-  }
-
-  .alert--warning .alert__countdown-elapsed {
-    background-color: var(--syn-color-warning-600);
-  }
-
-  .alert--danger .alert__countdown-elapsed {
-    background-color: var(--syn-color-danger-600);
-  }
-
-  /**
-   * Variant colors
-   */
-  .alert--success {
-    --variant-color-border: var(--syn-alert-success-color-border);
-    --variant-color-background: var(--syn-alert-success-color-background);
-    --variant-color-icon: var(--syn-alert-success-color-icon);
-    --variant-color-indicator: var(--syn-alert-success-color-indicator);
-  }
-
-  .alert--neutral {
-    --variant-color-border: var(--syn-alert-neutral-color-border);
-    --variant-color-background: var(--syn-alert-neutral-color-background);
-    --variant-color-icon: var(--syn-alert-neutral-color-icon);
-    --variant-color-indicator: var(--syn-alert-neutral-color-indicator);
-  }
-
-  .alert--warning {
-    --variant-color-border: var(--syn-alert-warning-color-border);
-    --variant-color-background: var(--syn-alert-warning-color-background);
-    --variant-color-icon: var(--syn-alert-warning-color-icon);
-    --variant-color-indicator: var(--syn-alert-warning-color-indicator);
-  }
-
-  .alert--danger {
-    --variant-color-border: var(--syn-alert-error-color-border);
-    --variant-color-background: var(--syn-alert-error-color-background);
-    --variant-color-icon: var(--syn-alert-error-color-icon);
-    --variant-color-indicator: var(--syn-alert-error-color-indicator);
-  }
-
-  /* #1119: Alert Sizes */
-  .alert--small {
-    --size-font-size: var(--syn-font-size-small);
-    --size-icon-size: var(--syn-font-size-large);
-    --size-min-height: 44px;
-    --size-message-padding: var(--syn-spacing-small) var(--syn-spacing-large) var(--syn-spacing-small) var(--syn-spacing-small);
-    --size-icon-padding-block: var(--syn-spacing-small);
-    --size-icon-padding-inline: var(--syn-spacing-small);
-  }
-
-  /* Adjust close button size for small alerts */
-  .alert--small .alert__close-button {
-    font-size: var(--syn-font-size-medium);
-  }
-
-  .alert--large {
-    --size-font-size: var(--syn-font-size-large);
-    --size-icon-size: var(--syn-font-size-2x-large);
-    --size-min-height: 68px;
-    --size-message-padding: var(--syn-spacing-medium-large) var(--syn-spacing-large) var(--syn-spacing-medium-large) var(--syn-spacing-medium-large);
-    --size-icon-padding-block: var(--syn-spacing-medium-large);
-    --size-icon-padding-inline: var(--syn-spacing-medium-large);
-  }
-
-  .alert__timer {
-    display: none;
-  }
-`;

package/metadata/packages/components/components/syn-alert/component.ts

@@ -1,322 +0,0 @@
-/* eslint-disable */
-import { animateTo, stopAnimations } from '../../internal/animate.js';
-import { blurActiveElement } from '../../internal/closeActiveElement.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { getAnimation, setDefaultAnimation } from '../../utilities/animation-registry.js';
-import { HasSlotController } from '../../internal/slot.js';
-import { html } from 'lit';
-import { LocalizeController } from '../../utilities/localize.js';
-import { property, query, state } from 'lit/decorators.js';
-import { waitForEvent } from '../../internal/event.js';
-import { watch } from '../../internal/watch.js';
-import componentStyles from '../../styles/component.styles.js';
-import SynergyElement from '../../internal/synergy-element.js';
-import SynIconButton from '../icon-button/icon-button.component.js';
-import styles from './alert.styles.js';
-import type { CSSResultGroup } from 'lit';
-import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';
-
-/**
- * @summary Alerts are used to display important messages inline or as toast notifications.
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-alert--docs
- * @status stable
- * @since 2.0
- *
- * @dependency syn-icon-button
- *
- * @slot - The alert's main content.
- * @slot icon - An icon to show in the alert. Works best with `<syn-icon>`.
- *
- * @event syn-show - Emitted when the alert opens.
- * @event syn-after-show - Emitted after the alert opens and all animations are complete.
- * @event syn-hide - Emitted when the alert closes.
- * @event syn-after-hide - Emitted after the alert closes and all animations are complete.
- *
- * @csspart base - The component's base wrapper.
- * @csspart icon - The container that wraps the optional icon.
- * @csspart message - The container that wraps the alert's main content.
- * @csspart close-button - The close button, an `<syn-icon-button>`.
- * @csspart close-button__base - The close button's exported `base` part.
- *
- * @animation alert.show - The animation to use when showing the alert.
- * @animation alert.hide - The animation to use when hiding the alert.
- */
-@enableDefaultSettings('SynAlert')
-export default class SynAlert extends SynergyElement {
-  static styles: CSSResultGroup = [componentStyles, styles];
-  static dependencies = { 'syn-icon-button': SynIconButton };
-
-  private autoHideTimeout: number;
-  private remainingTimeInterval: number;
-  private countdownAnimation?: Animation;
-  private readonly hasSlotController = new HasSlotController(this, 'icon', 'suffix');
-  private readonly localize = new LocalizeController(this);
-
-  private static currentToastStack: HTMLDivElement;
-
-  private static get toastStack() {
-    if (!this.currentToastStack) {
-      this.currentToastStack = Object.assign(document.createElement('div'), {
-        className: 'syn-toast-stack'
-      });
-    }
-    return this.currentToastStack;
-  }
-
-  @query('[part~="base"]') base: HTMLElement;
-
-  @query('.alert__countdown-elapsed') countdownElement: HTMLElement;
-
-  /**
-   * Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can
-   * use the `show()` and `hide()` methods and this attribute will reflect the alert's open state.
-   */
-  @property({ type: Boolean, reflect: true }) open = false;
-
-  /** Enables a close button that allows the user to dismiss the alert. */
-  @property({ type: Boolean, reflect: true }) closable = false;
-
-  /** The alert's theme variant. */
-  @property({ reflect: true }) variant: 'primary' | 'success' | 'neutral' | 'warning' | 'danger' = 'primary';
-
-  /**
-   * The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with
-   * the alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`, meaning
-   * the alert will not close on its own.
-   */
-  @property({ type: Number }) duration = Infinity;
-
-  /** The alert's size. */
-  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
-
-  /**
-   * Enables a countdown that indicates the remaining time the alert will be displayed.
-   * Typically used to indicate the remaining time before a whole app refresh.
-   */
-  private countdown? : 'rtl' | 'ltr';
-
-  @state() private remainingTime = this.duration;
-
-  firstUpdated() {
-    this.base.hidden = !this.open;
-  }
-
-  private restartAutoHide() {
-    this.handleCountdownChange();
-    clearTimeout(this.autoHideTimeout);
-    clearInterval(this.remainingTimeInterval);
-    if (this.open && this.duration < Infinity) {
-      this.autoHideTimeout = window.setTimeout(() => this.hide(), this.duration);
-      this.remainingTime = this.duration;
-      this.remainingTimeInterval = window.setInterval(() => {
-        this.remainingTime -= 100;
-      }, 100);
-    }
-  }
-
-  private pauseAutoHide() {
-    this.countdownAnimation?.pause();
-    clearTimeout(this.autoHideTimeout);
-    clearInterval(this.remainingTimeInterval);
-  }
-
-  private resumeAutoHide() {
-    if (this.duration < Infinity) {
-      this.autoHideTimeout = window.setTimeout(() => this.hide(), this.remainingTime);
-      this.remainingTimeInterval = window.setInterval(() => {
-        this.remainingTime -= 100;
-      }, 100);
-      this.countdownAnimation?.play();
-    }
-  }
-
-  private handleCountdownChange() {
-    if (this.open && this.duration < Infinity && this.countdown) {
-      const { countdownElement } = this;
-      const start = '100%';
-      const end = '0';
-      this.countdownAnimation = countdownElement.animate([{ width: start }, { width: end }], {
-        duration: this.duration,
-        easing: 'linear'
-      });
-    }
-  }
-
-  private handleCloseClick() {
-    this.hide();
-  }
-
-  @watch('open', { waitUntilFirstUpdate: true })
-  async handleOpenChange() {
-    if (this.open) {
-      // Show
-      this.emit('syn-show');
-
-      if (this.duration < Infinity) {
-        this.restartAutoHide();
-      }
-
-      await stopAnimations(this.base);
-      this.base.hidden = false;
-      const { keyframes, options } = getAnimation(this, 'alert.show', { dir: this.localize.dir() });
-      await animateTo(this.base, keyframes, options);
-
-      this.emit('syn-after-show');
-    } else {
-      // Hide
-      blurActiveElement(this);
-      this.emit('syn-hide');
-
-      clearTimeout(this.autoHideTimeout);
-      clearInterval(this.remainingTimeInterval);
-
-      await stopAnimations(this.base);
-      const { keyframes, options } = getAnimation(this, 'alert.hide', { dir: this.localize.dir() });
-      await animateTo(this.base, keyframes, options);
-      this.base.hidden = true;
-
-      this.emit('syn-after-hide');
-    }
-  }
-
-  @watch('duration')
-  handleDurationChange() {
-    this.restartAutoHide();
-  }
-
-  /** Shows the alert. */
-  async show() {
-    if (this.open) {
-      return undefined;
-    }
-
-    this.open = true;
-    return waitForEvent(this, 'syn-after-show');
-  }
-
-  /** Hides the alert */
-  async hide() {
-    if (!this.open) {
-      return undefined;
-    }
-
-    this.open = false;
-    return waitForEvent(this, 'syn-after-hide');
-  }
-
-  /**
-   * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when
-   * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by
-   * calling this method again. The returned promise will resolve after the alert is hidden.
-   */
-  async toast() {
-    return new Promise<void>(resolve => {
-      this.handleCountdownChange();
-      if (SynAlert.toastStack.parentElement === null) {
-        document.body.append(SynAlert.toastStack);
-      }
-
-      SynAlert.toastStack.appendChild(this);
-
-      // Wait for the toast stack to render
-      requestAnimationFrame(() => {
-        // eslint-disable-next-line @typescript-eslint/no-unused-expressions -- force a reflow for the initial transition
-        this.clientWidth;
-        this.show();
-      });
-
-      this.addEventListener(
-        'syn-after-hide',
-        () => {
-          SynAlert.toastStack.removeChild(this);
-          resolve();
-
-          // Remove the toast stack from the DOM when there are no more alerts
-          if (SynAlert.toastStack.querySelector('syn-alert') === null) {
-            SynAlert.toastStack.remove();
-          }
-        },
-        { once: true }
-      );
-    });
-  }
-
-  render() {
-    return html`
-      <div
-        part="base"
-        class=${classMap({
-          alert: true,
-          'alert--open': this.open,
-          'alert--small': this.size === 'small',
-          'alert--medium': this.size === 'medium',
-          'alert--large': this.size === 'large',
-          'alert--closable': this.closable,
-          'alert--has-icon': this.hasSlotController.test('icon'),
-          'alert--primary': this.variant === 'primary',
-          'alert--success': this.variant === 'success',
-          'alert--neutral': this.variant === 'neutral',
-          'alert--warning': this.variant === 'warning',
-          'alert--danger': this.variant === 'danger'
-        })}
-        role="alert"
-        aria-hidden=${this.open ? 'false' : 'true'}
-        @mouseenter=${this.pauseAutoHide}
-        @mouseleave=${this.resumeAutoHide}
-      >
-        <div part="icon" class="alert__icon">
-          <slot name="icon"></slot>
-        </div>
-
-        <div part="message" class="alert__message" aria-live="polite">
-          <slot></slot>
-        </div>
-
-        ${this.closable
-          ? html`
-              <syn-icon-button
-                part="close-button"
-                exportparts="base:close-button__base"
-                class="alert__close-button"
-                name="x-lg"
-                library="system"
-                label=${this.localize.term('close')}
-                @click=${this.handleCloseClick}
-              ></syn-icon-button>
-            `
-          : ''}
-
-        <div role="timer" class="alert__timer">${this.remainingTime}</div>
-
-        ${this.countdown
-          ? html`
-              <div
-                class=${classMap({
-                  alert__countdown: true,
-                  'alert__countdown--ltr': this.countdown === 'ltr'
-                })}
-              >
-                <div class="alert__countdown-elapsed"></div>
-              </div>
-            `
-          : ''}
-      </div>
-    `;
-  }
-}
-
-setDefaultAnimation('alert.show', {
-  keyframes: [
-    { opacity: 0, scale: 0.8 },
-    { opacity: 1, scale: 1 }
-  ],
-  options: { duration: 250, easing: 'ease' }
-});
-
-setDefaultAnimation('alert.hide', {
-  keyframes: [
-    { opacity: 1, scale: 1 },
-    { opacity: 0, scale: 0.8 }
-  ],
-  options: { duration: 250, easing: 'ease' }
-});

package/metadata/packages/components/components/syn-alert/component.vue

@@ -1,135 +0,0 @@
-<script setup lang="ts">
-// ---------------------------------------------------------------------
-// 🔒 AUTOGENERATED @synergy-design-system/vue wrappers for @synergy-design-system/components
-// Please do not edit this file directly!
-// It will get recreated when running pnpm build.
-// ---------------------------------------------------------------------
-
-/**
- * @summary Alerts are used to display important messages inline or as toast notifications.
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-alert--docs
- * @status stable
- * @since 2.0
- *
- * @dependency syn-icon-button
- *
- * @slot - The alert's main content.
- * @slot icon - An icon to show in the alert. Works best with `<syn-icon>`.
- *
- * @event syn-show - Emitted when the alert opens.
- * @event syn-after-show - Emitted after the alert opens and all animations are complete.
- * @event syn-hide - Emitted when the alert closes.
- * @event syn-after-hide - Emitted after the alert closes and all animations are complete.
- *
- * @csspart base - The component's base wrapper.
- * @csspart icon - The container that wraps the optional icon.
- * @csspart message - The container that wraps the alert's main content.
- * @csspart close-button - The close button, an `<syn-icon-button>`.
- * @csspart close-button__base - The close button's exported `base` part.
- *
- * @animation alert.show - The animation to use when showing the alert.
- * @animation alert.hide - The animation to use when hiding the alert.
- */
-import { computed, ref } from 'vue';
-import '@synergy-design-system/components/components/alert/alert.js';
-
-import type { SynShowEvent } from '@synergy-design-system/components';
-import type { SynAfterShowEvent } from '@synergy-design-system/components';
-import type { SynHideEvent } from '@synergy-design-system/components';
-import type { SynAfterHideEvent } from '@synergy-design-system/components';
-import type { SynAlert } from '@synergy-design-system/components';
-
-// DOM Reference to the element
-const nativeElement = ref<SynAlert>();
-
-defineExpose({
-  nativeElement,
-});
-
-// Map attributes
-const props = defineProps<{
-  /**
-* Indicates whether or not the alert is open.
-* You can toggle this attribute to show and hide the alert, or you can
-use the `show()` and `hide()` methods and this attribute will reflect the alert's open state.
- */
-  open?: SynAlert['open'];
-
-  /**
-   * Enables a close button that allows the user to dismiss the alert.
-   */
-  closable?: SynAlert['closable'];
-
-  /**
-   * The alert's theme variant.
-   */
-  variant?: SynAlert['variant'];
-
-  /**
-* The length of time, in milliseconds, the alert will show before closing itself.
-* If the user interacts with
-the alert before it closes (e.g.
-* moves the mouse over it), the timer will restart.
-* Defaults to `Infinity`, meaning
-the alert will not close on its own.
- */
-  duration?: SynAlert['duration'];
-
-  /**
-   * The alert's size.
-   */
-  size?: SynAlert['size'];
-}>();
-
-// Make sure prop binding only forwards the props that are actually there.
-// This is needed because :param="param" also adds an empty attribute
-// when using web-components, which breaks optional arguments like size in SynInput
-// @see https://github.com/vuejs/core/issues/5190#issuecomment-1003112498
-const visibleProps = computed(() =>
-  Object.fromEntries(
-    Object.entries(props).filter(([, value]) => typeof value !== 'undefined'),
-  ),
-);
-
-// Map events
-defineEmits<{
-  /**
-   * Emitted when the alert opens.
-   */
-  'syn-show': [e: SynShowEvent];
-
-  /**
-   * Emitted after the alert opens and all animations are complete.
-   */
-  'syn-after-show': [e: SynAfterShowEvent];
-
-  /**
-   * Emitted when the alert closes.
-   */
-  'syn-hide': [e: SynHideEvent];
-
-  /**
-   * Emitted after the alert closes and all animations are complete.
-   */
-  'syn-after-hide': [e: SynAfterHideEvent];
-}>();
-</script>
-
-<script lang="ts">
-export type { SynShowEvent } from '@synergy-design-system/components';
-export type { SynAfterShowEvent } from '@synergy-design-system/components';
-export type { SynHideEvent } from '@synergy-design-system/components';
-export type { SynAfterHideEvent } from '@synergy-design-system/components';
-</script>
-
-<template>
-  <syn-alert
-    @syn-show="$emit('syn-show', $event)"
-    @syn-after-show="$emit('syn-after-show', $event)"
-    @syn-hide="$emit('syn-hide', $event)"
-    @syn-after-hide="$emit('syn-after-hide', $event)"
-    v-bind="visibleProps"
-    ref="nativeElement">
-    <slot></slot>
-  </syn-alert>
-</template>