@synergy-design-system/mcp 0.1.0 → 1.0.0

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

@@ -0,0 +1,234 @@
+/**
+ * ---------------------------------------------------------------------
+ * 🔒 AUTOGENERATED BY VENDORISM
+ * Removing this comment will prevent it from being managed by it.
+ * ---------------------------------------------------------------------
+ */
+
+/* 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

@@ -0,0 +1,100 @@
+<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

@@ -0,0 +1,185 @@
+// ---------------------------------------------------------------------
+// 🔒 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

@@ -0,0 +1,68 @@
+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-border-radius-none);
+  }
+
+  /* Colors */
+  :host([color="currentColor"]) {
+    color: currentColor;
+  }
+
+  :host([color="primary"]),
+  :host([color="primary"]) .icon-button:focus-visible:not(.icon-button--disabled) {
+    color: var(--syn-color-primary-600);
+  }
+
+  :host([color="primary"]) .icon-button:hover:not(.icon-button--disabled) {
+    color: var(--syn-color-primary-900);
+  }
+
+  :host([color="primary"]) .icon-button:active:not(.icon-button--disabled) {
+    color: var(--syn-color-primary-950);
+  }
+
+  :host([color="neutral"]),
+  :host([color="neutral"]) .icon-button:focus-visible:not(.icon-button--disabled):not(:hover) {
+    color: var(--syn-color-neutral-950);
+  }
+
+  /* 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

@@ -0,0 +1,42 @@
+// ---------------------------------------------------------------------
+// 🔒 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

@@ -0,0 +1,59 @@
+/**
+ * ---------------------------------------------------------------------
+ * 🔒 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: 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;
+  }
+`;