@synergy-design-system/mcp 0.1.0 → 1.1.0

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

@@ -0,0 +1,319 @@
+/**
+ * ---------------------------------------------------------------------
+ * 🔒 AUTOGENERATED BY VENDORISM
+ * Removing this comment will prevent it from being managed by it.
+ * ---------------------------------------------------------------------
+ */
+
+/* eslint-disable */
+import { animateTo, parseDuration, stopAnimations } from '../../internal/animate.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { getAnimation, setDefaultAnimation } from '../../utilities/animation-registry.js';
+import { html } from 'lit';
+import { LocalizeController } from '../../utilities/localize.js';
+import { property, query } 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 SynPopup from '../popup/popup.component.js';
+import styles from './tooltip.styles.js';
+import customStyles from './tooltip.custom.styles.js';
+import type { CSSResultGroup } from 'lit';
+
+/**
+ * @summary Tooltips display additional information based on a specific action.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tooltip--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency syn-popup
+ *
+ * @slot - The tooltip's target element. Avoid slotting in more than one element, as subsequent ones will be ignored.
+ * @slot content - The content to render in the tooltip. Alternatively, you can use the `content` attribute.
+ *
+ * @event syn-show - Emitted when the tooltip begins to show.
+ * @event syn-after-show - Emitted after the tooltip has shown and all animations are complete.
+ * @event syn-hide - Emitted when the tooltip begins to hide.
+ * @event syn-after-hide - Emitted after the tooltip has hidden and all animations are complete.
+ *
+ * @csspart base - The component's base wrapper, an `<syn-popup>` element.
+ * @csspart base__popup - The popup's exported `popup` part. Use this to target the tooltip's popup container.
+ * @csspart base__arrow - The popup's exported `arrow` part. Use this to target the tooltip's arrow.
+ * @csspart body - The tooltip's body where its content is rendered.
+ *
+ * @cssproperty --max-width - The maximum width of the tooltip before its content will wrap.
+ * @cssproperty --hide-delay - The amount of time to wait before hiding the tooltip when hovering.
+ * @cssproperty --show-delay - The amount of time to wait before showing the tooltip when hovering.
+ *
+ * @animation tooltip.show - The animation to use when showing the tooltip.
+ * @animation tooltip.hide - The animation to use when hiding the tooltip.
+ */
+export default class SynTooltip extends SynergyElement {
+  static styles: CSSResultGroup = [componentStyles, styles, customStyles];
+  static dependencies = { 'syn-popup': SynPopup };
+
+  private hoverTimeout: number;
+  private readonly localize = new LocalizeController(this);
+  private closeWatcher: CloseWatcher | null;
+
+  @query('slot:not([name])') defaultSlot: HTMLSlotElement;
+  @query('.tooltip__body') body: HTMLElement;
+  @query('syn-popup') popup: SynPopup;
+
+  /** The tooltip's content. If you need to display HTML, use the `content` slot instead. */
+  @property() content = '';
+
+  /**
+   * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip
+   * inside of the viewport.
+   */
+  @property() placement:
+    | 'top'
+    | 'top-start'
+    | 'top-end'
+    | 'right'
+    | 'right-start'
+    | 'right-end'
+    | 'bottom'
+    | 'bottom-start'
+    | 'bottom-end'
+    | 'left'
+    | 'left-start'
+    | 'left-end' = 'top';
+
+  /** Disables the tooltip so it won't show when triggered. */
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  /** The distance in pixels from which to offset the tooltip away from its target. */
+  @property({ type: Number }) distance = 13;
+
+  /** Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods. */
+  @property({ type: Boolean, reflect: true }) open = false;
+
+  /** The distance in pixels from which to offset the tooltip along its target. */
+  @property({ type: Number }) skidding = 0;
+
+  /**
+   * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple
+   * options can be passed by separating them with a space. When manual is used, the tooltip must be activated
+   * programmatically.
+   */
+  @property() trigger = 'hover focus';
+
+  /**
+   * Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with
+   * `overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,
+   * scenarios.
+   */
+  @property({ type: Boolean }) hoist = false;
+
+  constructor() {
+    super();
+    this.addEventListener('blur', this.handleBlur, true);
+    this.addEventListener('focus', this.handleFocus, true);
+    this.addEventListener('click', this.handleClick);
+    this.addEventListener('mouseover', this.handleMouseOver);
+    this.addEventListener('mouseout', this.handleMouseOut);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    // Cleanup this event in case the tooltip is removed while open
+    this.closeWatcher?.destroy();
+    document.removeEventListener('keydown', this.handleDocumentKeyDown);
+  }
+
+  firstUpdated() {
+    this.body.hidden = !this.open;
+
+    // If the tooltip is visible on init, update its position
+    if (this.open) {
+      this.popup.active = true;
+      this.popup.reposition();
+    }
+  }
+
+  private handleBlur = () => {
+    if (this.hasTrigger('focus')) {
+      this.hide();
+    }
+  };
+
+  private handleClick = () => {
+    if (this.hasTrigger('click')) {
+      if (this.open) {
+        this.hide();
+      } else {
+        this.show();
+      }
+    }
+  };
+
+  private handleFocus = () => {
+    if (this.hasTrigger('focus')) {
+      this.show();
+    }
+  };
+
+  private handleDocumentKeyDown = (event: KeyboardEvent) => {
+    // Pressing escape when a tooltip is open should dismiss it
+    if (event.key === 'Escape') {
+      event.stopPropagation();
+      this.hide();
+    }
+  };
+
+  private handleMouseOver = () => {
+    if (this.hasTrigger('hover')) {
+      const delay = parseDuration(getComputedStyle(this).getPropertyValue('--show-delay'));
+      clearTimeout(this.hoverTimeout);
+      this.hoverTimeout = window.setTimeout(() => this.show(), delay);
+    }
+  };
+
+  private handleMouseOut = () => {
+    if (this.hasTrigger('hover')) {
+      const delay = parseDuration(getComputedStyle(this).getPropertyValue('--hide-delay'));
+      clearTimeout(this.hoverTimeout);
+      this.hoverTimeout = window.setTimeout(() => this.hide(), delay);
+    }
+  };
+
+  private hasTrigger(triggerType: string) {
+    const triggers = this.trigger.split(' ');
+    return triggers.includes(triggerType);
+  }
+
+  @watch('open', { waitUntilFirstUpdate: true })
+  async handleOpenChange() {
+    if (this.open) {
+      if (this.disabled) {
+        return;
+      }
+
+      // Show
+      this.emit('syn-show');
+      if ('CloseWatcher' in window) {
+        this.closeWatcher?.destroy();
+        this.closeWatcher = new CloseWatcher();
+        this.closeWatcher.onclose = () => {
+          this.hide();
+        };
+      } else {
+        document.addEventListener('keydown', this.handleDocumentKeyDown);
+      }
+
+      await stopAnimations(this.body);
+      this.body.hidden = false;
+      this.popup.active = true;
+      const { keyframes, options } = getAnimation(this, 'tooltip.show', { dir: this.localize.dir() });
+      await animateTo(this.popup.popup, keyframes, options);
+      this.popup.reposition();
+
+      this.emit('syn-after-show');
+    } else {
+      // Hide
+      this.emit('syn-hide');
+      this.closeWatcher?.destroy();
+      document.removeEventListener('keydown', this.handleDocumentKeyDown);
+
+      await stopAnimations(this.body);
+      const { keyframes, options } = getAnimation(this, 'tooltip.hide', { dir: this.localize.dir() });
+      await animateTo(this.popup.popup, keyframes, options);
+      this.popup.active = false;
+      this.body.hidden = true;
+
+      this.emit('syn-after-hide');
+    }
+  }
+
+  @watch(['content', 'distance', 'hoist', 'placement', 'skidding'])
+  async handleOptionsChange() {
+    if (this.hasUpdated) {
+      await this.updateComplete;
+      this.popup.reposition();
+    }
+  }
+
+  @watch('disabled')
+  handleDisabledChange() {
+    if (this.disabled && this.open) {
+      this.hide();
+    }
+  }
+
+  /** Shows the tooltip. */
+  async show() {
+    if (this.open) {
+      return undefined;
+    }
+
+    this.open = true;
+    return waitForEvent(this, 'syn-after-show');
+  }
+
+  /** Hides the tooltip */
+  async hide() {
+    if (!this.open) {
+      return undefined;
+    }
+
+    this.open = false;
+    return waitForEvent(this, 'syn-after-hide');
+  }
+
+  //
+  // NOTE: Tooltip is a bit unique in that we're using aria-live instead of aria-labelledby to trick screen readers into
+  // announcing the content. It works really well, but it violates an accessibility rule. We're also adding the
+  // aria-describedby attribute to a slot, which is required by <syn-popup> to correctly locate the first assigned
+  // element, otherwise positioning is incorrect.
+  //
+  render() {
+    return html`
+      <syn-popup
+        part="base"
+        exportparts="
+          popup:base__popup,
+          arrow:base__arrow
+        "
+        class=${classMap({
+          tooltip: true,
+          'tooltip--open': this.open
+        })}
+        placement=${this.placement}
+        distance=${this.distance}
+        skidding=${this.skidding}
+        strategy=${this.hoist ? 'fixed' : 'absolute'}
+        flip
+        shift
+        arrow
+        hover-bridge
+      >
+        ${'' /* eslint-disable-next-line lit-a11y/no-aria-slot */}
+        <slot slot="anchor" aria-describedby="tooltip"></slot>
+
+        ${'' /* eslint-disable-next-line lit-a11y/accessible-name */}
+        <div part="body" id="tooltip" class="tooltip__body" role="tooltip" aria-live=${this.open ? 'polite' : 'off'}>
+          <slot name="content">${this.content}</slot>
+        </div>
+      </syn-popup>
+    `;
+  }
+}
+
+setDefaultAnimation('tooltip.show', {
+  keyframes: [
+    { opacity: 0, scale: 0.8 },
+    { opacity: 1, scale: 1 }
+  ],
+  options: { duration: 150, easing: 'ease' }
+});
+
+setDefaultAnimation('tooltip.hide', {
+  keyframes: [
+    { opacity: 1, scale: 1 },
+    { opacity: 0, scale: 0.8 }
+  ],
+  options: { duration: 150, easing: 'ease' }
+});

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

@@ -0,0 +1,158 @@
+<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 Tooltips display additional information based on a specific action.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tooltip--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency syn-popup
+ *
+ * @slot - The tooltip's target element. Avoid slotting in more than one element, as subsequent ones will be ignored.
+ * @slot content - The content to render in the tooltip. Alternatively, you can use the `content` attribute.
+ *
+ * @event syn-show - Emitted when the tooltip begins to show.
+ * @event syn-after-show - Emitted after the tooltip has shown and all animations are complete.
+ * @event syn-hide - Emitted when the tooltip begins to hide.
+ * @event syn-after-hide - Emitted after the tooltip has hidden and all animations are complete.
+ *
+ * @csspart base - The component's base wrapper, an `<syn-popup>` element.
+ * @csspart base__popup - The popup's exported `popup` part. Use this to target the tooltip's popup container.
+ * @csspart base__arrow - The popup's exported `arrow` part. Use this to target the tooltip's arrow.
+ * @csspart body - The tooltip's body where its content is rendered.
+ *
+ * @cssproperty --max-width - The maximum width of the tooltip before its content will wrap.
+ * @cssproperty --hide-delay - The amount of time to wait before hiding the tooltip when hovering.
+ * @cssproperty --show-delay - The amount of time to wait before showing the tooltip when hovering.
+ *
+ * @animation tooltip.show - The animation to use when showing the tooltip.
+ * @animation tooltip.hide - The animation to use when hiding the tooltip.
+ */
+import { computed, ref } from 'vue';
+import '@synergy-design-system/components/components/tooltip/tooltip.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 { SynTooltip } from '@synergy-design-system/components';
+
+// DOM Reference to the element
+const nativeElement = ref<SynTooltip>();
+
+defineExpose({
+  nativeElement,
+});
+
+// Map attributes
+const props = defineProps<{
+  /**
+   * The tooltip's content.
+   * If you need to display HTML, use the `content` slot instead.
+   */
+  content?: SynTooltip['content'];
+
+  /**
+* The preferred placement of the tooltip.
+* Note that the actual placement may vary as needed to keep the tooltip
+inside of the viewport.
+ */
+  placement?: SynTooltip['placement'];
+
+  /**
+   * Disables the tooltip so it won't show when triggered.
+   */
+  disabled?: SynTooltip['disabled'];
+
+  /**
+   * The distance in pixels from which to offset the tooltip away from its target.
+   */
+  distance?: SynTooltip['distance'];
+
+  /**
+   * Indicates whether or not the tooltip is open.
+   * You can use this in lieu of the show/hide methods.
+   */
+  open?: SynTooltip['open'];
+
+  /**
+   * The distance in pixels from which to offset the tooltip along its target.
+   */
+  skidding?: SynTooltip['skidding'];
+
+  /**
+* Controls how the tooltip is activated.
+* Possible options include `click`, `hover`, `focus`, and `manual`.
+* Multiple
+options can be passed by separating them with a space.
+* When manual is used, the tooltip must be activated
+programmatically.
+ */
+  trigger?: SynTooltip['trigger'];
+
+  /**
+* Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with
+`overflow: auto|hidden|scroll`.
+* Hoisting uses a fixed positioning strategy that works in many, but not all,
+scenarios.
+ */
+  hoist?: SynTooltip['hoist'];
+}>();
+
+// 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 tooltip begins to show.
+   */
+  'syn-show': [e: SynShowEvent];
+
+  /**
+   * Emitted after the tooltip has shown and all animations are complete.
+   */
+  'syn-after-show': [e: SynAfterShowEvent];
+
+  /**
+   * Emitted when the tooltip begins to hide.
+   */
+  'syn-hide': [e: SynHideEvent];
+
+  /**
+   * Emitted after the tooltip has hidden 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-tooltip
+    @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-tooltip>
+</template>

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

@@ -0,0 +1,128 @@
+// ---------------------------------------------------------------------
+// 🔒 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 { SynValidate } from '@synergy-design-system/components';
+
+import '@synergy-design-system/components/components/validate/validate.js';
+
+/**
+ * @summary Validate provides form field validation messages in a unified way.
+ * It does this by using [the native browser validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)
+ * and showing the validation message in a consistent, user defined way.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-validate--docs
+ * @dependency syn-alert
+ *
+ * @slot - The form field that should be validated.
+ * Avoid slotting in more than one element, as subsequent ones will be ignored.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart input-wrapper - The container that wraps the form field.
+ * @csspart alert - The syn-alert that is shown when the variant is set to "inline".
+ * @csspart alert__base - The container that wraps the alert.
+ * @csspart alert__message - The container that wraps the alert message.
+ * @csspart alert__icon - The container that wraps the alert icon.
+ */
+@Component({
+  selector: 'syn-validate',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+})
+export class SynValidateComponent {
+  public nativeElement: SynValidate;
+  private _ngZone: NgZone;
+
+  constructor(e: ElementRef, ngZone: NgZone) {
+    this.nativeElement = e.nativeElement;
+    this._ngZone = ngZone;
+  }
+
+  /**
+* The variant that should be used to show validation alerts.
+
+The following variants are supported:
+- **native** (default): Uses the native browser validation, usually a browser tooltip.
+- **inline**: Show the validation message underneath the element, using a `<syn-alert>`
+ */
+  @Input()
+  set variant(v: SynValidate['variant']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.variant = v));
+  }
+  get variant(): SynValidate['variant'] {
+    return this.nativeElement.variant;
+  }
+
+  /**
+   * Do not show the error icon when using the inline variant validation
+   */
+  @Input()
+  set hideIcon(v: '' | SynValidate['hideIcon']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.hideIcon = v === '' || v),
+    );
+  }
+  get hideIcon(): SynValidate['hideIcon'] {
+    return this.nativeElement.hideIcon;
+  }
+
+  /**
+* Defines the events that trigger the validation.
+`invalid` will always automatically be included.
+You may also use the `live` keyword to validate on every input change.
+`live` will make sure to listen to the `invalid`, `input` and `blur` events.
+
+Please have a look at the [documentation for native form validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)
+and [the use of form invalid events](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) for further information.
+ */
+  @Input()
+  set on(v: SynValidate['on']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.on = v));
+  }
+  get on(): SynValidate['on'] {
+    return this.nativeElement.on;
+  }
+
+  /**
+* Custom validation message to be displayed when the input is invalid.
+Will override the default browser validation message.
+Set to an empty string to reset the validation message.
+ */
+  @Input()
+  set customValidationMessage(v: SynValidate['customValidationMessage']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.customValidationMessage = v),
+    );
+  }
+  get customValidationMessage(): SynValidate['customValidationMessage'] {
+    return this.nativeElement.customValidationMessage;
+  }
+
+  /**
+* Set this to true to validate the input immediately when it is rendered.
+Best used with a `variant` of `inline`.
+When setting eager, the input will not be focused automatically.
+
+When using a `variant` of `native` the browser will focus
+the last eager field as it is using a tooltip.
+In this case it is better to just provide one eager field.
+ */
+  @Input()
+  set eager(v: '' | SynValidate['eager']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.eager = v === '' || v),
+    );
+  }
+  get eager(): SynValidate['eager'] {
+    return this.nativeElement.eager;
+  }
+}

package/metadata/packages/components/components/syn-validate/component.react.ts

@@ -0,0 +1,36 @@
+// ---------------------------------------------------------------------
+// 🔒 AUTOGENERATED @synergy-design-system/react wrappers for @synergy-design-system/components
+// Please do not edit this file directly!
+// It will get recreated when running pnpm build.
+// ---------------------------------------------------------------------
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '@synergy-design-system/components/components/validate/validate.component.js';
+
+const tagName = 'syn-validate';
+Component.define('syn-validate');
+
+/**
+ * @summary Validate provides form field validation messages in a unified way.
+ * It does this by using [the native browser validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)
+ * and showing the validation message in a consistent, user defined way.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-validate--docs
+ * @dependency syn-alert
+ *
+ * @slot - The form field that should be validated.
+ * Avoid slotting in more than one element, as subsequent ones will be ignored.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart input-wrapper - The container that wraps the form field.
+ * @csspart alert - The syn-alert that is shown when the variant is set to "inline".
+ * @csspart alert__base - The container that wraps the alert.
+ * @csspart alert__message - The container that wraps the alert message.
+ * @csspart alert__icon - The container that wraps the alert icon.
+ */
+export const SynValidate = createComponent({
+  displayName: 'SynValidate',
+  elementClass: Component,
+  events: {},
+  react: React,
+  tagName,
+});

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

@@ -0,0 +1,9 @@
+import { css } from 'lit';
+
+export default css`
+  .validate {
+    display: flex;
+    flex-direction: column;
+    gap: var(--syn-spacing-small);
+  }
+`;