@synergy-design-system/mcp 2.14.1 → 3.0.0

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

@@ -1,227 +0,0 @@
-/* eslint-disable */
-import { getIconLibrary, type IconLibrary, unwatchIcon, watchIcon } from './library.js';
-import { html } from 'lit';
-import { isTemplateResult } from 'lit/directive-helpers.js';
-import { property, state } from 'lit/decorators.js';
-import { watch } from '../../internal/watch.js';
-import componentStyles from '../../styles/component.styles.js';
-import SynergyElement from '../../internal/synergy-element.js';
-import styles from './icon.styles.js';
-import customStyles from './icon.custom.styles.js';
-import type { CSSResultGroup, HTMLTemplateResult } from 'lit';
-
-const CACHEABLE_ERROR = Symbol();
-const RETRYABLE_ERROR = Symbol();
-type SVGResult = HTMLTemplateResult | SVGSVGElement | typeof RETRYABLE_ERROR | typeof CACHEABLE_ERROR;
-
-let parser: DOMParser;
-const iconCache = new Map<string, Promise<SVGResult>>();
-
-interface IconSource {
-  url?: string;
-  fromLibrary: boolean;
-}
-
-/**
- * @summary Icons are symbols that can be used to represent various options within an application.
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-icon--docs
- * @status stable
- * @since 2.0
- *
- * @event syn-load - Emitted when the icon has loaded. When using `spriteSheet: true` this will not emit.
- * @event syn-error - Emitted when the icon fails to load due to an error. When using `spriteSheet: true` this will not emit.
- *
- * @csspart svg - The internal SVG element.
- * @csspart use - The <use> element generated when using `spriteSheet: true`
- */
-export default class SynIcon extends SynergyElement {
-  static styles: CSSResultGroup = [componentStyles, styles, customStyles];
-
-  private initialRender = false;
-
-  /** Given a URL, this function returns the resulting SVG element or an appropriate error symbol. */
-  private async resolveIcon(url: string, library?: IconLibrary): Promise<SVGResult> {
-    let fileData: Response;
-
-    if (library?.spriteSheet) {
-      this.svg = html`<svg part="svg">
-        <use part="use" href="${url}" width="100%" height="100%"></use>
-      </svg>`;
-
-      return this.svg;
-    }
-
-    // #806: Make sure to not fetch system icons
-    // as they are part of the bundle anyways.
-    // This speeds up the loading of the icon.
-    if (this.library === 'system') {
-      // Skip the icon if the URL is empty
-      if (!url) {
-        return CACHEABLE_ERROR;
-      }
-
-      // If the URL is a system icon, we can just return it
-      fileData = new Response(url, {
-        status: 200,
-      });
-    } else {
-      try {
-        fileData = await fetch(url, { mode: 'cors' });
-        if (!fileData.ok) return fileData.status === 410 ? CACHEABLE_ERROR : RETRYABLE_ERROR;
-      } catch {
-        return RETRYABLE_ERROR;
-      }
-    }
-
-    try {
-      const div = document.createElement('div');
-      div.innerHTML = await fileData.text();
-
-      const svg = div.firstElementChild;
-      if (svg?.tagName?.toLowerCase() !== 'svg') return CACHEABLE_ERROR;
-
-      if (!parser) parser = new DOMParser();
-      const doc = parser.parseFromString(svg.outerHTML, 'text/html');
-
-      const svgEl = doc.body.querySelector('svg');
-      if (!svgEl) return CACHEABLE_ERROR;
-
-      svgEl.part.add('svg');
-      return document.adoptNode(svgEl);
-    } catch {
-      return CACHEABLE_ERROR;
-    }
-  }
-
-  @state() private svg: SVGElement | HTMLTemplateResult | null = null;
-
-  /** The name of the icon to draw. Available names depend on the icon library being used. */
-  @property({ reflect: true }) name?: string;
-
-  /**
-   * An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and
-   * can result in XSS attacks.
-   */
-  @property() src?: string;
-
-  /**
-   * An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and
-   * ignored by assistive devices.
-   */
-  @property() label = '';
-
-  /** The name of a registered custom icon library. */
-  @property({ reflect: true }) library = 'default';
-
-  connectedCallback() {
-    super.connectedCallback();
-    watchIcon(this);
-  }
-
-  firstUpdated() {
-    this.initialRender = true;
-    this.setIcon();
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    unwatchIcon(this);
-  }
-
-  private getIconSource(): IconSource {
-    const library = getIconLibrary(this.library);
-    if (this.name && library) {
-      return {
-        url: library.resolver(this.name),
-        fromLibrary: true
-      };
-    }
-
-    return {
-      url: this.src,
-      fromLibrary: false
-    };
-  }
-
-  @watch('label')
-  handleLabelChange() {
-    const hasLabel = typeof this.label === 'string' && this.label.length > 0;
-
-    if (hasLabel) {
-      this.setAttribute('role', 'img');
-      this.setAttribute('aria-label', this.label);
-      this.removeAttribute('aria-hidden');
-    } else {
-      this.removeAttribute('role');
-      this.removeAttribute('aria-label');
-      this.setAttribute('aria-hidden', 'true');
-    }
-  }
-
-  @watch(['name', 'src', 'library'])
-  async setIcon() {
-    const { url, fromLibrary } = this.getIconSource();
-    const library = fromLibrary ? getIconLibrary(this.library) : undefined;
-
-    if (!url) {
-      this.svg = null;
-      return;
-    }
-
-    let iconResolver = iconCache.get(url);
-    if (!iconResolver) {
-      iconResolver = this.resolveIcon(url, library);
-      iconCache.set(url, iconResolver);
-    }
-
-    // If we haven't rendered yet, exit early. This avoids unnecessary work due to watching multiple props.
-    if (!this.initialRender) {
-      return;
-    }
-
-    const svg = await iconResolver;
-
-    if (svg === RETRYABLE_ERROR) {
-      iconCache.delete(url);
-    }
-
-    if (url !== this.getIconSource().url) {
-      // If the url has changed while fetching the icon, ignore this request
-      return;
-    }
-
-    if (isTemplateResult(svg)) {
-      this.svg = svg;
-
-      if (library) {
-        // Using a templateResult requires the SVG to be written to the DOM first before we can grab the SVGElement
-        // to be passed to the library's mutator function.
-        await this.updateComplete;
-
-        const shadowSVG = this.shadowRoot!.querySelector("[part='svg']")!;
-
-        if (typeof library.mutator === 'function' && shadowSVG) {
-          library.mutator(shadowSVG as SVGElement);
-        }
-      }
-
-      return;
-    }
-
-    switch (svg) {
-      case RETRYABLE_ERROR:
-      case CACHEABLE_ERROR:
-        this.svg = null;
-        this.emit('syn-error');
-        break;
-      default:
-        this.svg = svg.cloneNode(true) as SVGElement;
-        library?.mutator?.(this.svg);
-        this.emit('syn-load');
-    }
-  }
-
-  render() {
-    return this.svg;
-  }
-}

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

@@ -1,100 +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 Icons are symbols that can be used to represent various options within an application.
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-icon--docs
- * @status stable
- * @since 2.0
- *
- * @event syn-load - Emitted when the icon has loaded. When using `spriteSheet: true` this will not emit.
- * @event syn-error - Emitted when the icon fails to load due to an error. When using `spriteSheet: true` this will not emit.
- *
- * @csspart svg - The internal SVG element.
- * @csspart use - The <use> element generated when using `spriteSheet: true`
- */
-import { computed, ref } from 'vue';
-import '@synergy-design-system/components/components/icon/icon.js';
-
-import type { SynLoadEvent } from '@synergy-design-system/components';
-import type { SynErrorEvent } from '@synergy-design-system/components';
-import type { SynIcon } from '@synergy-design-system/components';
-
-// DOM Reference to the element
-const nativeElement = ref<SynIcon>();
-
-defineExpose({
-  nativeElement,
-});
-
-// Map attributes
-const props = defineProps<{
-  /**
-   * The name of the icon to draw.
-   * Available names depend on the icon library being used.
-   */
-  name?: SynIcon['name'];
-
-  /**
-* An external URL of an SVG file.
-* Be sure you trust the content you are including, as it will be executed as code and
-can result in XSS attacks.
- */
-  src?: SynIcon['src'];
-
-  /**
-* An alternate description to use for assistive devices.
-* If omitted, the icon will be considered presentational and
-ignored by assistive devices.
- */
-  label?: SynIcon['label'];
-
-  /**
-   * The name of a registered custom icon library.
-   */
-  library?: SynIcon['library'];
-}>();
-
-// 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 icon has loaded.
-   * When using `spriteSheet: true` this will not emit.
-   */
-  'syn-load': [e: SynLoadEvent];
-
-  /**
-   * Emitted when the icon fails to load due to an error.
-   * When using `spriteSheet: true` this will not emit.
-   */
-  'syn-error': [e: SynErrorEvent];
-}>();
-</script>
-
-<script lang="ts">
-export type { SynLoadEvent } from '@synergy-design-system/components';
-export type { SynErrorEvent } from '@synergy-design-system/components';
-</script>
-
-<template>
-  <syn-icon
-    @syn-load="$emit('syn-load', $event)"
-    @syn-error="$emit('syn-error', $event)"
-    v-bind="visibleProps"
-    ref="nativeElement">
-  </syn-icon>
-</template>

package/metadata/packages/components/components/syn-icon-button/component.angular.ts

@@ -1,185 +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 { SynIconButton } from '@synergy-design-system/components';
-import type { SynBlurEvent } from '@synergy-design-system/components';
-import type { SynFocusEvent } from '@synergy-design-system/components';
-import '@synergy-design-system/components/components/icon-button/icon-button.js';
-
-/**
- * @summary Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-icon-button--docs
- * @status stable
- * @since 2.0
- *
- * @dependency syn-icon
- *
- * @event syn-blur - Emitted when the icon button loses focus.
- * @event syn-focus - Emitted when the icon button gains focus.
- *
- * @csspart base - The component's base wrapper.
- */
-@Component({
-  selector: 'syn-icon-button',
-  standalone: true,
-  template: '<ng-content></ng-content>',
-})
-export class SynIconButtonComponent {
-  public nativeElement: SynIconButton;
-  private _ngZone: NgZone;
-
-  constructor(e: ElementRef, ngZone: NgZone) {
-    this.nativeElement = e.nativeElement;
-    this._ngZone = ngZone;
-    this.nativeElement.addEventListener('syn-blur', (e: SynBlurEvent) => {
-      this.synBlurEvent.emit(e);
-    });
-    this.nativeElement.addEventListener('syn-focus', (e: SynFocusEvent) => {
-      this.synFocusEvent.emit(e);
-    });
-  }
-
-  /**
-   * The name of the icon to draw.
-   * Available names depend on the icon library being used.
-   */
-  @Input()
-  set name(v: SynIconButton['name']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.name = v));
-  }
-  get name(): SynIconButton['name'] {
-    return this.nativeElement.name;
-  }
-
-  /**
-   * The name of a registered custom icon library.
-   */
-  @Input()
-  set library(v: SynIconButton['library']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.library = v));
-  }
-  get library(): SynIconButton['library'] {
-    return this.nativeElement.library;
-  }
-
-  /**
-* An external URL of an SVG file.
-* Be sure you trust the content you are including, as it will be executed as code and
-can result in XSS attacks.
- */
-  @Input()
-  set src(v: SynIconButton['src']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.src = v));
-  }
-  get src(): SynIconButton['src'] {
-    return this.nativeElement.src;
-  }
-
-  /**
-   * When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.
-   */
-  @Input()
-  set href(v: SynIconButton['href']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.href = v));
-  }
-  get href(): SynIconButton['href'] {
-    return this.nativeElement.href;
-  }
-
-  /**
-   * Tells the browser where to open the link.
-   * Only used when `href` is set.
-   */
-  @Input()
-  set target(v: SynIconButton['target']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.target = v));
-  }
-  get target(): SynIconButton['target'] {
-    return this.nativeElement.target;
-  }
-
-  /**
-   * Tells the browser to download the linked file as this filename.
-   * Only used when `href` is set.
-   */
-  @Input()
-  set download(v: SynIconButton['download']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.download = v));
-  }
-  get download(): SynIconButton['download'] {
-    return this.nativeElement.download;
-  }
-
-  /**
-* A description that gets read by assistive devices.
-* For optimal accessibility, you should always include a label
-that describes what the icon button does.
- */
-  @Input()
-  set label(v: SynIconButton['label']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.label = v));
-  }
-  get label(): SynIconButton['label'] {
-    return this.nativeElement.label;
-  }
-
-  /**
-   * The icon button's size.
-   */
-  @Input()
-  set size(v: SynIconButton['size']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.size = v));
-  }
-  get size(): SynIconButton['size'] {
-    return this.nativeElement.size;
-  }
-
-  /**
-* The color of the icon button.
-The default "currentColor" makes it possible to easily style the icon button from outside without any CSS variables.
- */
-  @Input()
-  set color(v: SynIconButton['color']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.color = v));
-  }
-  get color(): SynIconButton['color'] {
-    return this.nativeElement.color;
-  }
-
-  /**
-   * Disables the button.
-   */
-  @Input()
-  set disabled(v: '' | SynIconButton['disabled']) {
-    this._ngZone.runOutsideAngular(
-      () => (this.nativeElement.disabled = v === '' || v),
-    );
-  }
-  get disabled(): SynIconButton['disabled'] {
-    return this.nativeElement.disabled;
-  }
-
-  /**
-   * Emitted when the icon button loses focus.
-   */
-  @Output() synBlurEvent = new EventEmitter<SynBlurEvent>();
-
-  /**
-   * Emitted when the icon button gains focus.
-   */
-  @Output() synFocusEvent = new EventEmitter<SynFocusEvent>();
-}
-
-export type { SynBlurEvent } from '@synergy-design-system/components';
-export type { SynFocusEvent } from '@synergy-design-system/components';

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

@@ -1,79 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  .icon-button {
-    border-radius: 0;
-    color: currentColor;
-    font-size: inherit;
-  }
-
-  .icon-button--disabled {
-    color: var(--syn-color-neutral-400);
-
-    /** #429: Use token for opacity */
-    opacity: var(--syn-input-disabled-opacity);
-  }
-
-  /* Remove round borders */
-  .icon-button:focus-visible {
-    border-radius: var(--syn-icon-button-focus-ring-border-radius);
-  }
-
-  /* Colors */
-  :host([color="currentColor"]) {
-    color: currentColor;
-  }
-
-  :host([color="primary"]),
-  :host([color="primary"]) .icon-button:focus-visible:not(.icon-button--disabled) {
-    color: var(--syn-interactive-emphasis-color);
-  }
-
-  :host([color="primary"]) .icon-button:hover:not(.icon-button--disabled) {
-    color: var(--syn-interactive-emphasis-color-hover);
-  }
-
-  :host([color="primary"]) .icon-button:active:not(.icon-button--disabled) {
-    color: var(--syn-interactive-emphasis-color-active);
-  }
-
-  :host([color="neutral"]) {
-    color: var(--syn-interactive-quiet-color);
-  }
-
-  :host([color="neutral"]) .icon-button:hover:not(.icon-button--disabled) {
-    color: var(--syn-interactive-quiet-color-hover);
-  }
-
-  :host([color="neutral"]) .icon-button:active:not(.icon-button--disabled) {
-    color: var(--syn-interactive-quiet-color-active);
-  }
-
-  :host([color="neutral"]) .icon-button:focus-visible:not(.icon-button--disabled):not(:hover) {
-    color: var(--syn-interactive-quiet-color);
-  }
-
-  /* Sizes */
-  .icon-button--small {
-    font-size: var(--syn-font-size-medium);
-  }
-
-  .icon-button--medium {
-    font-size: var(--syn-font-size-x-large);
-  }
-
-  .icon-button--large {
-    font-size: var(--syn-font-size-2x-large);
-  }
-
-  /* Force user to set "label" prop */
-  .icon-button[aria-label=""] {
-    border: var(--syn-border-width-large) var(--syn-color-error-600) solid;
-  }
-
-  .icon-button[aria-label=""]::after {
-    content: "Set label prop for a11y to get rid of this text and border!";
-    font-size: var(--syn-font-size-2x-small);
-    margin-left: var(--syn-spacing-2x-small);
-  }
-`;

package/metadata/packages/components/components/syn-icon-button/component.react.ts

@@ -1,42 +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/icon-button/icon-button.component.js';
-
-import { type EventName } from '@lit/react';
-import type { SynBlurEvent } from '@synergy-design-system/components';
-import type { SynFocusEvent } from '@synergy-design-system/components';
-
-const tagName = 'syn-icon-button';
-Component.define('syn-icon-button');
-
-/**
- * @summary Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-icon-button--docs
- * @status stable
- * @since 2.0
- *
- * @dependency syn-icon
- *
- * @event syn-blur - Emitted when the icon button loses focus.
- * @event syn-focus - Emitted when the icon button gains focus.
- *
- * @csspart base - The component's base wrapper.
- */
-export const SynIconButton = createComponent({
-  displayName: 'SynIconButton',
-  elementClass: Component,
-  events: {
-    onSynBlur: 'syn-blur' as EventName<SynBlurEvent>,
-    onSynFocus: 'syn-focus' as EventName<SynFocusEvent>,
-  },
-  react: React,
-  tagName,
-});
-
-export type { SynBlurEvent } from '@synergy-design-system/components';
-export type { SynFocusEvent } from '@synergy-design-system/components';

package/metadata/packages/components/components/syn-icon-button/component.styles.ts

@@ -1,52 +0,0 @@
-/* eslint-disable */
-import { css } from 'lit';
-
-export default css`
-	/* stylelint-disable */
-  :host {
-    display: inline-block;
-    color: var(--syn-color-neutral-600);
-  }
-
-  .icon-button {
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-    background: none;
-    border: none;
-    border-radius: var(--syn-border-radius-medium);
-    font-size: inherit;
-    color: inherit;
-    padding: var(--syn-spacing-x-small);
-    cursor: pointer;
-    transition: var(--syn-transition-x-fast) color;
-    -webkit-appearance: none;
-  }
-
-  .icon-button:hover:not(.icon-button--disabled),
-  .icon-button:focus-visible:not(.icon-button--disabled) {
-    color: var(--syn-color-primary-600);
-  }
-
-  .icon-button:active:not(.icon-button--disabled) {
-    color: var(--syn-color-primary-700);
-  }
-
-  .icon-button:focus {
-    outline: none;
-  }
-
-  .icon-button--disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  .icon-button:focus-visible {
-    outline: var(--syn-focus-ring);
-    outline-offset: var(--syn-focus-ring-offset);
-  }
-
-  .icon-button__icon {
-    pointer-events: none;
-  }
-`;