@synergy-design-system/mcp 0.1.0 → 1.1.0

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

@@ -0,0 +1,240 @@
+<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 Ranges allow the user to select values within a given range using one or two thumbs.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-range--docs
+ * @status stable
+ *
+ * @dependency syn-tooltip
+ *
+ * @slot label - The range's label. Alternatively, you can use the `label` attribute.
+ * @slot prefix - Used to prepend a presentational icon or similar element to the range.
+ * @slot suffix - Used to append a presentational icon or similar element to the range.
+ * @slot help-text - Text that describes how to use the range.
+ * Alternatively, you can use the `help-text` attribute.
+ * @slot ticks - Used to display tick marks at specific intervals along the range.
+ *
+ * @event syn-blur - Emitted when the control loses focus.
+ * @event syn-change - Emitted when an alteration to the control's value is committed by the user.
+ * @event syn-focus - Emitted when the control gains focus.
+ * @event syn-input - Emitted when the control receives input.
+ * @event syn-invalid - Emitted when the form control has been checked for validity
+ * and its constraints aren't satisfied.
+ * @event syn-move - Emitted when the user moves a thumb, either via touch or keyboard.
+ * Use `Event.preventDefault()` to prevent movement.
+ *
+ * @csspart form-control - The form control that wraps the label, input, and help text.
+ * @csspart form-control-label - The label's wrapper.
+ * @csspart form-control-help-text - The help text's wrapper.
+ * @csspart base - The component's base wrapper.
+ * @csspart input-wrapper - The container that wraps the input track and ticks.
+ * @csspart track-wrapper - The wrapper for the track.
+ * @csspart track - The inactive track.
+ * @csspart active-track - The active track.
+ * @csspart prefix - The container that wraps the prefix.
+ * @csspart suffix - The container that wraps the suffix.
+ * @csspart ticks - The container that wraps the tick marks.
+ * @csspart thumb - The thumb(s) that the user can drag to change the range.
+ *
+ * @csspart tooltip__base - The base of the tooltip
+ * @csspart tooltip__arrow - The arrow of the tooltip
+ * @csspart tooltip__popup - The popup of the tooltip
+ * @csspart tooltip__body - The body of the tooltip
+ *
+ * @cssproperty --thumb-size - The size of a thumb.
+ * @cssproperty --thumb-hit-area-size - The clickable area around the thumb.
+ * Per default this is set to 140% of the thumb size. Must be a scale css value (defaults to 1.4).
+ * @cssproperty --track-hit-area-size - The clickable area around the track (top and left).
+ * @cssproperty --track-color-active - Color of the track representing the current value.
+ * @cssproperty --track-color-inactive - Color of the track that represents the remaining value.
+ * @cssproperty --track-height - The height of the track.
+ * @cssproperty --track-active-offset - The point of origin of the active track,
+ * starting at the left side of the range.
+ */
+import { computed, ref } from 'vue';
+import '@synergy-design-system/components/components/range/range.js';
+
+import type { SynBlurEvent } from '@synergy-design-system/components';
+import type { SynChangeEvent } from '@synergy-design-system/components';
+import type { SynFocusEvent } from '@synergy-design-system/components';
+import type { SynInputEvent } from '@synergy-design-system/components';
+import type { SynInvalidEvent } from '@synergy-design-system/components';
+import type { SynMoveEvent } from '@synergy-design-system/components';
+import type { SynRange } from '@synergy-design-system/components';
+
+// DOM Reference to the element
+const nativeElement = ref<SynRange>();
+
+defineExpose({
+  nativeElement,
+});
+
+// Map attributes
+const props = defineProps<{
+  /**
+   * The name of the range, submitted as a name/value pair with form data.
+   */
+  name?: SynRange['name'];
+
+  /**
+   * The range's label.
+   * If you need to display HTML, use the `label` slot instead.
+   */
+  label?: SynRange['label'];
+
+  /**
+   * The range's help text.
+   * If you need to display HTML, use the help-text slot instead.
+   */
+  helpText?: SynRange['helpText'];
+
+  /**
+   * Disables the range.
+   */
+  disabled?: SynRange['disabled'];
+
+  /**
+   * The minimum acceptable value of the range.
+   */
+  min?: SynRange['min'];
+
+  /**
+   * The maximum acceptable value of the range.
+   */
+  max?: SynRange['max'];
+
+  /**
+   * The interval at which the range will increase and decrease.
+   */
+  step?: SynRange['step'];
+
+  /**
+   * The range's size.
+   */
+  size?: SynRange['size'];
+
+  /**
+   * The preferred placement of the range's tooltip.
+   * Use "none" to disable the tooltip
+   */
+  tooltipPlacement?: SynRange['tooltipPlacement'];
+
+  /**
+   * The current values of the input (in ascending order) as a string of space separated values
+   */
+  value?: SynRange['value'];
+
+  /**
+* Set to true to restrict the movement of a thumb to its next and previous thumb.
+This only affects multi range components
+ */
+  restrictMovement?: SynRange['restrictMovement'];
+
+  /**
+* By default, form controls are associated with the nearest containing `<form>` element.
+This attribute allows you to place the form control outside of a form
+and associate it with the form that has this `id`.
+The form must be in the same document or shadow root for this to work.
+ */
+  form?: SynRange['form'];
+
+  /**
+* A function used to format the tooltip's value.
+The value of the thumb is passed as the only argument.
+The function should return a string to display in the tooltip.
+ */
+  tooltipFormatter?: SynRange['tooltipFormatter'];
+
+  /**
+   * Support for two way data binding
+   */
+  modelValue?: SynRange['value'];
+}>();
+
+// 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 control loses focus.
+   */
+  'syn-blur': [e: SynBlurEvent];
+
+  /**
+   * Emitted when an alteration to the control's value is committed by the user.
+   */
+  'syn-change': [e: SynChangeEvent];
+
+  /**
+   * Emitted when the control gains focus.
+   */
+  'syn-focus': [e: SynFocusEvent];
+
+  /**
+   * Emitted when the control receives input.
+   */
+  'syn-input': [e: SynInputEvent];
+
+  /**
+   * Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+   */
+  'syn-invalid': [e: SynInvalidEvent];
+
+  /**
+   * Emitted when the user moves a thumb, either via touch or keyboard.
+   * Use `Event.preventDefault()` to prevent movement.
+   */
+  'syn-move': [e: SynMoveEvent];
+
+  /**
+   * Support for two way data binding
+   */
+  'update:modelValue': [newValue: SynRange['value']];
+}>();
+</script>
+
+<script lang="ts">
+export type { SynBlurEvent } from '@synergy-design-system/components';
+export type { SynChangeEvent } from '@synergy-design-system/components';
+export type { SynFocusEvent } from '@synergy-design-system/components';
+export type { SynInputEvent } from '@synergy-design-system/components';
+export type { SynInvalidEvent } from '@synergy-design-system/components';
+export type { SynMoveEvent } from '@synergy-design-system/components';
+</script>
+
+<template>
+  <syn-range
+    @syn-blur="$emit('syn-blur', $event)"
+    @syn-change="
+      $emit('update:modelValue', ($event.target as SynRange).value);
+      $emit('syn-change', $event);
+    "
+    @syn-focus="$emit('syn-focus', $event)"
+    @syn-input="$emit('syn-input', $event)"
+    @syn-invalid="$emit('syn-invalid', $event)"
+    @syn-move="$emit('syn-move', $event)"
+    :value="
+      typeof props.modelValue !== 'undefined'
+        ? props.modelValue
+        : typeof props.value !== 'undefined'
+          ? props.value
+          : undefined
+    "
+    v-bind="visibleProps"
+    ref="nativeElement">
+    <slot></slot>
+  </syn-range>
+</template>

package/metadata/packages/components/components/syn-range-tick/component.angular.ts

@@ -0,0 +1,59 @@
+// ---------------------------------------------------------------------
+// 🔒 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 { SynRangeTick } from '@synergy-design-system/components';
+
+import '@synergy-design-system/components/components/range-tick/range-tick.js';
+
+/**
+ * @summary Ticks visually improve positioning on range sliders.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-range-tick--docs
+ * @status stable
+ *
+ * @slot - The tick's label
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart label - The component's label.
+ * @csspart line - The component's tick line.
+ *
+ * @cssproperty --tick-height - The height of the tick marker.
+ * @cssproperty --tick-label-top - The top offset of the tick label.
+ */
+@Component({
+  selector: 'syn-range-tick',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+})
+export class SynRangeTickComponent {
+  public nativeElement: SynRangeTick;
+  private _ngZone: NgZone;
+
+  constructor(e: ElementRef, ngZone: NgZone) {
+    this.nativeElement = e.nativeElement;
+    this._ngZone = ngZone;
+  }
+
+  /**
+   * Whether the tick should be shown as a subdivision.
+   */
+  @Input()
+  set subdivision(v: '' | SynRangeTick['subdivision']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.subdivision = v === '' || v),
+    );
+  }
+  get subdivision(): SynRangeTick['subdivision'] {
+    return this.nativeElement.subdivision;
+  }
+}

package/metadata/packages/components/components/syn-range-tick/component.react.ts

@@ -0,0 +1,33 @@
+// ---------------------------------------------------------------------
+// 🔒 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/range-tick/range-tick.component.js';
+
+const tagName = 'syn-range-tick';
+Component.define('syn-range-tick');
+
+/**
+ * @summary Ticks visually improve positioning on range sliders.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-range-tick--docs
+ * @status stable
+ *
+ * @slot - The tick's label
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart label - The component's label.
+ * @csspart line - The component's tick line.
+ *
+ * @cssproperty --tick-height - The height of the tick marker.
+ * @cssproperty --tick-label-top - The top offset of the tick label.
+ */
+export const SynRangeTick = createComponent({
+  displayName: 'SynRangeTick',
+  elementClass: Component,
+  events: {},
+  react: React,
+  tagName,
+});

package/metadata/packages/components/components/syn-range-tick/component.styles.ts

@@ -0,0 +1,34 @@
+import { css } from 'lit';
+
+export default css`
+  :host {
+    --tick-height: var(--syn-spacing-x-small);
+    --tick-label-top: 10px;
+  }
+
+  .tick {
+    color: var(--syn-input-icon-color);
+    font-family: var(--syn-font-family);
+    font-weight: var(--syn-font-weight-normal);
+    line-height: var(--syn-line-height-denser);
+    width: 1px;
+  }
+
+  .tick-line {
+    background: var(--syn-color-neutral-400);
+    height: var(--tick-height);
+  }
+
+  .tick--subdivision .tick-line{
+    height: calc(var(--tick-height) / 2);
+  }
+
+  .tick-label {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    margin-top: var(--tick-label-top);
+    text-align: center;
+    white-space: nowrap;
+  }
+`;

package/metadata/packages/components/components/syn-range-tick/component.ts

@@ -0,0 +1,50 @@
+import type { CSSResultGroup } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import componentStyles from '../../styles/component.styles.js';
+import SynergyElement from '../../internal/synergy-element.js';
+import styles from './range-tick.styles.js';
+
+/**
+ * @summary Ticks visually improve positioning on range sliders.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-range-tick--docs
+ * @status stable
+ *
+ * @slot - The tick's label
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart label - The component's label.
+ * @csspart line - The component's tick line.
+ *
+ * @cssproperty --tick-height - The height of the tick marker.
+ * @cssproperty --tick-label-top - The top offset of the tick label.
+ */
+export default class SynRangeTick extends SynergyElement {
+  static styles: CSSResultGroup = [
+    componentStyles,
+    styles,
+  ];
+
+  /**
+   * Whether the tick should be shown as a subdivision.
+   */
+  @property({ reflect: true, type: Boolean }) subdivision = false;
+
+  render() {
+    return html`
+      <div
+        class=${classMap({
+          tick: true,
+          'tick--subdivision': this.subdivision,
+        })}
+        part="base"
+      >
+        <div class="tick-line" part="line"></div>
+        <div class="tick-label" part="label">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+}

package/metadata/packages/components/components/syn-range-tick/component.vue

@@ -0,0 +1,57 @@
+<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 Ticks visually improve positioning on range sliders.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-range-tick--docs
+ * @status stable
+ *
+ * @slot - The tick's label
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart label - The component's label.
+ * @csspart line - The component's tick line.
+ *
+ * @cssproperty --tick-height - The height of the tick marker.
+ * @cssproperty --tick-label-top - The top offset of the tick label.
+ */
+import { computed, ref } from 'vue';
+import '@synergy-design-system/components/components/range-tick/range-tick.js';
+
+import type { SynRangeTick } from '@synergy-design-system/components';
+
+// DOM Reference to the element
+const nativeElement = ref<SynRangeTick>();
+
+defineExpose({
+  nativeElement,
+});
+
+// Map attributes
+const props = defineProps<{
+  /**
+   * Whether the tick should be shown as a subdivision.
+   */
+  subdivision?: SynRangeTick['subdivision'];
+}>();
+
+// 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'),
+  ),
+);
+</script>
+
+<template>
+  <syn-range-tick v-bind="visibleProps" ref="nativeElement">
+    <slot></slot>
+  </syn-range-tick>
+</template>

package/metadata/packages/components/components/syn-resize-observer/component.styles.ts

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

package/metadata/packages/components/components/syn-resize-observer/component.ts

@@ -0,0 +1,98 @@
+/**
+ * ---------------------------------------------------------------------
+ * 🔒 AUTOGENERATED BY VENDORISM
+ * Removing this comment will prevent it from being managed by it.
+ * ---------------------------------------------------------------------
+ */
+
+/* eslint-disable */
+import { html } from 'lit';
+import { property } 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 './resize-observer.styles.js';
+import type { CSSResultGroup } from 'lit';
+
+/**
+ * @summary The Resize Observer component offers a thin, declarative interface to the [`ResizeObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-resize-observer--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @slot - One or more elements to watch for resizing.
+ *
+ * @event {{ entries: ResizeObserverEntry[] }} syn-resize - Emitted when the element is resized.
+ */
+export default class SynResizeObserver extends SynergyElement {
+  static styles: CSSResultGroup = [componentStyles, styles];
+
+  private resizeObserver: ResizeObserver;
+  private observedElements: HTMLElement[] = [];
+
+  /** Disables the observer. */
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.resizeObserver = new ResizeObserver((entries: ResizeObserverEntry[]) => {
+      this.emit('syn-resize', { detail: { entries } });
+    });
+
+    if (!this.disabled) {
+      this.startObserver();
+    }
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.stopObserver();
+  }
+
+  private handleSlotChange() {
+    if (!this.disabled) {
+      this.startObserver();
+    }
+  }
+
+  private startObserver() {
+    const slot = this.shadowRoot!.querySelector('slot');
+
+    if (slot !== null) {
+      const elements = slot.assignedElements({ flatten: true }) as HTMLElement[];
+
+      // Unwatch previous elements
+      this.observedElements.forEach(el => this.resizeObserver.unobserve(el));
+      this.observedElements = [];
+
+      // Watch new elements
+      elements.forEach(el => {
+        this.resizeObserver.observe(el);
+        this.observedElements.push(el);
+      });
+    }
+  }
+
+  private stopObserver() {
+    this.resizeObserver.disconnect();
+  }
+
+  @watch('disabled', { waitUntilFirstUpdate: true })
+  handleDisabledChange() {
+    if (this.disabled) {
+      this.stopObserver();
+    } else {
+      this.startObserver();
+    }
+  }
+
+  render() {
+    return html` <slot @slotchange=${this.handleSlotChange}></slot> `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'syn-resize-observer': SynResizeObserver;
+  }
+}