@synergy-design-system/mcp 2.14.1 → 3.0.0

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

@@ -1,196 +0,0 @@
-// ---------------------------------------------------------------------
-// 🔒 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 { SynTooltip } from '@synergy-design-system/components';
-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 '@synergy-design-system/components/components/tooltip/tooltip.js';
-
-/**
- * @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.
- */
-@Component({
-  selector: 'syn-tooltip',
-  standalone: true,
-  template: '<ng-content></ng-content>',
-})
-export class SynTooltipComponent {
-  public nativeElement: SynTooltip;
-  private _ngZone: NgZone;
-
-  constructor(e: ElementRef, ngZone: NgZone) {
-    this.nativeElement = e.nativeElement;
-    this._ngZone = ngZone;
-    this.nativeElement.addEventListener('syn-show', (e: SynShowEvent) => {
-      this.synShowEvent.emit(e);
-    });
-    this.nativeElement.addEventListener(
-      'syn-after-show',
-      (e: SynAfterShowEvent) => {
-        this.synAfterShowEvent.emit(e);
-      },
-    );
-    this.nativeElement.addEventListener('syn-hide', (e: SynHideEvent) => {
-      this.synHideEvent.emit(e);
-    });
-    this.nativeElement.addEventListener(
-      'syn-after-hide',
-      (e: SynAfterHideEvent) => {
-        this.synAfterHideEvent.emit(e);
-      },
-    );
-  }
-
-  /**
-   * The tooltip's content.
-   * If you need to display HTML, use the `content` slot instead.
-   */
-  @Input()
-  set content(v: SynTooltip['content']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.content = v));
-  }
-  get content(): SynTooltip['content'] {
-    return this.nativeElement.content;
-  }
-
-  /**
-* The preferred placement of the tooltip.
-* Note that the actual placement may vary as needed to keep the tooltip
-inside of the viewport.
- */
-  @Input()
-  set placement(v: SynTooltip['placement']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.placement = v));
-  }
-  get placement(): SynTooltip['placement'] {
-    return this.nativeElement.placement;
-  }
-
-  /**
-   * Disables the tooltip so it won't show when triggered.
-   */
-  @Input()
-  set disabled(v: '' | SynTooltip['disabled']) {
-    this._ngZone.runOutsideAngular(
-      () => (this.nativeElement.disabled = v === '' || v),
-    );
-  }
-  get disabled(): SynTooltip['disabled'] {
-    return this.nativeElement.disabled;
-  }
-
-  /**
-   * The distance in pixels from which to offset the tooltip away from its target.
-   */
-  @Input()
-  set distance(v: SynTooltip['distance']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.distance = v));
-  }
-  get distance(): SynTooltip['distance'] {
-    return this.nativeElement.distance;
-  }
-
-  /**
-   * Indicates whether or not the tooltip is open.
-   * You can use this in lieu of the show/hide methods.
-   */
-  @Input()
-  set open(v: '' | SynTooltip['open']) {
-    this._ngZone.runOutsideAngular(
-      () => (this.nativeElement.open = v === '' || v),
-    );
-  }
-  get open(): SynTooltip['open'] {
-    return this.nativeElement.open;
-  }
-
-  /**
-   * The distance in pixels from which to offset the tooltip along its target.
-   */
-  @Input()
-  set skidding(v: SynTooltip['skidding']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.skidding = v));
-  }
-  get skidding(): SynTooltip['skidding'] {
-    return this.nativeElement.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.
- */
-  @Input()
-  set trigger(v: SynTooltip['trigger']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.trigger = v));
-  }
-  get trigger(): SynTooltip['trigger'] {
-    return this.nativeElement.trigger;
-  }
-
-  /**
-   * Emitted when the tooltip begins to show.
-   */
-  @Output() synShowEvent = new EventEmitter<SynShowEvent>();
-
-  /**
-   * Emitted after the tooltip has shown and all animations are complete.
-   */
-  @Output() synAfterShowEvent = new EventEmitter<SynAfterShowEvent>();
-
-  /**
-   * Emitted when the tooltip begins to hide.
-   */
-  @Output() synHideEvent = new EventEmitter<SynHideEvent>();
-
-  /**
-   * Emitted after the tooltip has hidden and all animations are complete.
-   */
-  @Output() synAfterHideEvent = new EventEmitter<SynAfterHideEvent>();
-}
-
-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';

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

@@ -1,63 +0,0 @@
-// ---------------------------------------------------------------------
-// 🔒 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/tooltip/tooltip.component.js';
-
-import { type EventName } from '@lit/react';
-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';
-
-const tagName = 'syn-tooltip';
-Component.define('syn-tooltip');
-
-/**
- * @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 const SynTooltip = createComponent({
-  displayName: 'SynTooltip',
-  elementClass: Component,
-  events: {
-    onSynShow: 'syn-show' as EventName<SynShowEvent>,
-    onSynAfterShow: 'syn-after-show' as EventName<SynAfterShowEvent>,
-    onSynHide: 'syn-hide' as EventName<SynHideEvent>,
-    onSynAfterHide: 'syn-after-hide' as EventName<SynAfterHideEvent>,
-  },
-  react: React,
-  tagName,
-});
-
-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';

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

@@ -1,62 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  /* stylelint-disable property-no-vendor-prefix */
-  :host {
-    --max-width: 20rem;
-    --hide-delay: 0ms;
-    --show-delay: 150ms;
-
-    display: contents;
-  }
-
-  /** #640: Adjust the zIndex of the arrow to make sure the box-shadow above does not bleed out */
-  :host ::part(arrow) {
-    z-index: 0 !important;
-  }
-
-  .tooltip {
-    --arrow-size: var(--syn-tooltip-arrow-size);
-    --arrow-color: var(--syn-tooltip-background-color);
-  }
-
-  .tooltip::part(popup) {
-    z-index: var(--syn-z-index-tooltip);
-  }
-
-  .tooltip[placement^='top']::part(popup) {
-    transform-origin: bottom;
-  }
-
-  .tooltip[placement^='bottom']::part(popup) {
-    transform-origin: top;
-  }
-
-  .tooltip[placement^='left']::part(popup) {
-    transform-origin: right;
-  }
-
-  .tooltip[placement^='right']::part(popup) {
-    transform-origin: left;
-  }
-
-  .tooltip__body {
-    background-color: var(--syn-tooltip-background-color);
-    border-radius: var(--syn-tooltip-border-radius);
-    box-shadow: var(--syn-shadow-large);
-    color: var(--syn-tooltip-color);
-    display: block;
-    font-family: var(--syn-tooltip-font-family);
-    font-size: var(--syn-tooltip-font-size);
-    font-weight: var(--syn-tooltip-font-weight);
-    line-height: var(--syn-tooltip-line-height);
-    max-width: var(--max-width);
-    padding: var(--syn-tooltip-padding);
-    pointer-events: none;
-    text-align: start;
-    -webkit-user-select: none;
-    user-select: none;
-    white-space: normal;
-    width: max-content;
-  }
-`;

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

@@ -1,312 +0,0 @@
-/* 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, state, 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 type { CSSResultGroup } from 'lit';
-import type { VirtualElement } from '../popup/popup.component.js';
-
-/**
- * @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];
-  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 element the tooltip will be anchored to. If the anchor lives outside of the tooltip, you can provide the anchor
-   * element `id`, a DOM element reference, or a `VirtualElement`. If the anchor lives inside the tooltip, use the
-   * `anchor` slot instead.
-   */
-  @state() private anchor: Element | string | VirtualElement | undefined = undefined;
-
-  /** 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';
-
-  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(['anchor', 'content', 'distance','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
-        .anchor=${this.anchor}
-        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}
-        flip
-        shift
-        arrow
-        hover-bridge
-      >
-        ${'' /* Always render slotted content in anchor position - it's always visible */}
-        <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' }
-});