@synergy-design-system/mcp 0.1.0 → 1.1.0

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

@@ -0,0 +1,110 @@
+/**
+ * ---------------------------------------------------------------------
+ * 🔒 AUTOGENERATED BY VENDORISM
+ * Removing this comment will prevent it from being managed by it.
+ * ---------------------------------------------------------------------
+ */
+
+/* eslint-disable */
+import { css } from 'lit';
+
+export default css`
+	/* stylelint-disable */
+  :host {
+    display: contents;
+
+    /* For better DX, we'll reset the margin here so the base part can inherit it */
+    margin: 0;
+  }
+
+  .alert {
+    position: relative;
+    display: flex;
+    align-items: stretch;
+    background-color: var(--syn-panel-background-color);
+    border: solid var(--syn-panel-border-width) var(--syn-panel-border-color);
+    border-top-width: calc(var(--syn-panel-border-width) * 3);
+    border-radius: var(--syn-border-radius-medium);
+    font-family: var(--syn-font-sans);
+    font-size: var(--syn-font-size-small);
+    font-weight: var(--syn-font-weight-normal);
+    line-height: 1.6;
+    color: var(--syn-color-neutral-700);
+    margin: inherit;
+  }
+
+  .alert:not(.alert--has-icon) .alert__icon,
+  .alert:not(.alert--closable) .alert__close-button {
+    display: none;
+  }
+
+  .alert__icon {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    font-size: var(--syn-font-size-large);
+    padding-inline-start: var(--syn-spacing-large);
+  }
+
+  .alert--has-countdown {
+    border-bottom: none;
+  }
+
+  .alert__message {
+    flex: 1 1 auto;
+    display: block;
+    padding: var(--syn-spacing-large);
+  }
+
+  .alert__close-button {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    font-size: var(--syn-font-size-medium);
+    margin-inline-end: var(--syn-spacing-medium);
+    align-self: center;
+  }
+
+  .alert__countdown {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: calc(var(--syn-panel-border-width) * 3);
+    background-color: var(--syn-panel-border-color);
+    display: flex;
+  }
+
+  .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);
+  }
+
+  .alert__timer {
+    display: none;
+  }
+`;

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

@@ -0,0 +1,324 @@
+/**
+ * ---------------------------------------------------------------------
+ * 🔒 AUTOGENERATED BY VENDORISM
+ * Removing this comment will prevent it from being managed by it.
+ * ---------------------------------------------------------------------
+ */
+
+/* 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 customStyles from './alert.custom.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, customStyles];
+  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;
+
+  /**
+   * 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--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

@@ -0,0 +1,130 @@
+<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'];
+}>();
+
+// 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>

package/metadata/packages/components/components/syn-badge/component.angular.ts

@@ -0,0 +1,53 @@
+// ---------------------------------------------------------------------
+// 🔒 AUTOGENERATED @synergy-design-system/angular wrappers for @synergy-design-system/components
+// Please do not edit this file directly!
+// It will get recreated when running pnpm build.
+// ---------------------------------------------------------------------
+import {
+  Component,
+  ElementRef,
+  NgZone,
+  Input,
+  Output,
+  EventEmitter,
+  AfterContentInit,
+} from '@angular/core';
+import type { SynBadge } from '@synergy-design-system/components';
+
+import '@synergy-design-system/components/components/badge/badge.js';
+
+/**
+ * @summary Badges are used to draw attention and display statuses or counts.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-badge--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @slot - The badge's content.
+ *
+ * @csspart base - The component's base wrapper.
+ */
+@Component({
+  selector: 'syn-badge',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+})
+export class SynBadgeComponent {
+  public nativeElement: SynBadge;
+  private _ngZone: NgZone;
+
+  constructor(e: ElementRef, ngZone: NgZone) {
+    this.nativeElement = e.nativeElement;
+    this._ngZone = ngZone;
+  }
+
+  /**
+   * The badge's theme variant.
+   */
+  @Input()
+  set variant(v: SynBadge['variant']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.variant = v));
+  }
+  get variant(): SynBadge['variant'] {
+    return this.nativeElement.variant;
+  }
+}

package/metadata/packages/components/components/syn-badge/component.custom.styles.ts

@@ -0,0 +1,61 @@
+import { css } from 'lit';
+
+export default css`
+  .badge {
+    border: none;
+    border-radius: var(--syn-border-radius-pill);
+    font: var(--syn-body-medium-bold);
+    height: var(--syn-spacing-large);
+    line-height: var(--syn-spacing-large);
+    min-width: var(--syn-spacing-large);
+    padding: 0 var(--syn-spacing-x-small);
+  }
+
+  /* Variant modifiers */
+  .badge--primary {
+    background-color: var(--syn-color-primary-600);
+    color: var(--syn-typography-color-text-inverted);
+  }
+
+  .badge--success {
+    background-color: var(--syn-color-success-500);
+    color: var(--syn-typography-color-text);
+  }
+
+  .badge--neutral {
+    background-color: var(--syn-color-neutral-800);
+    color: var(--syn-typography-color-text-inverted);
+  }
+
+  .badge--warning {
+    background-color: var(--syn-color-warning-400);
+    color: var(--syn-typography-color-text);
+  }
+
+  .badge--danger {
+    background-color: var(--syn-color-error-600);
+    color: var(--syn-typography-color-text-inverted);
+  }
+
+  /**
+   * Special treatment: If the badge is empty, show it as a dot only
+   */
+  :host(:empty) .badge {
+    height: var(--syn-spacing-x-small);
+    min-width: initial;
+    padding: 0;
+    width: var(--syn-spacing-x-small);
+  }
+
+  .visually-hidden {
+    border: 0;
+    clip: rect(0, 0, 0, 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
+`;