@synergy-design-system/metadata 1.0.0 → 3.0.1

package/data/layers/full/component/component:syn-prio-nav/components/prio-nav.ts

@@ -0,0 +1,12 @@
+import SynPrioNav from './prio-nav.component.js';
+
+export * from './prio-nav.component.js';
+export default SynPrioNav;
+
+SynPrioNav.define('syn-prio-nav');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'syn-prio-nav': SynPrioNav;
+  }
+}

package/data/layers/full/component/component:syn-prio-nav/components/utils.ts

@@ -0,0 +1,57 @@
+import type SynNavItem from '../nav-item/nav-item.component.js';
+
+/**
+ * Get a list of all assigned elements for a given slot
+ * @param slot The slot to query
+ * @returns Flattened list of assigned elements
+ */
+export const getAssignedElementsForSlot = (slot: HTMLSlotElement) => Array.from(
+  slot.assignedElements({ flatten: true }),
+) as HTMLElement[];
+
+/**
+ * Check if an item is a SynNavItem or otherwise an item that has a role of menuitem.
+ * Note we always treat all items as SynNavItems here
+ * @param item The item to check for
+ * @returns True if the item is a SynNavItem, false otherwise
+ */
+export const isNavItem = (item: HTMLElement): item is SynNavItem => (
+  item.tagName.toLocaleLowerCase() === 'syn-nav-item'
+  || (item.getAttribute('role') ?? '') === 'menuitem'
+);
+
+/**
+ * Get a list of only SynNavItem elements
+ * @param items List of items to check for
+ * @returns New array of all found syn-nav-items
+ */
+export const filterOnlyNavItems = (items: HTMLElement[]) => items.filter(isNavItem);
+
+/**
+ * Show a navigation item
+ * @param item The item to show
+ */
+export const showNavigationItem = (item: SynNavItem) => {
+  item.setAttribute('horizontal', 'true');
+  item.removeAttribute('slot');
+  item.removeAttribute('tabindex');
+
+  // Reset the role to the original value
+  if (item.dataset.originalRole) {
+    item.setAttribute('role', item.dataset.originalRole);
+  } else {
+    item.removeAttribute('role');
+  }
+};
+
+/**
+ * Hide a navigation item
+ * @param item The item to hide
+ */
+export const hideNavigationItem = (item: SynNavItem) => {
+  item.removeAttribute('horizontal');
+  item.setAttribute('slot', 'menu');
+
+  // Makes sure the item is focusable in a syn-dropdown
+  item.setAttribute('role', 'menuitem');
+};

package/data/layers/full/component/component:syn-prio-nav/react/SynPrioNavJSXElement.ts

@@ -0,0 +1 @@
+export type SynPrioNavJSXElement = SynCustomElement<SynPrioNav, []>;

package/data/layers/full/component/component:syn-prio-nav/react/prio-nav.ts

@@ -0,0 +1,54 @@
+// ---------------------------------------------------------------------
+// 🔒 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/prio-nav/prio-nav.component.js';
+
+const tagName = 'syn-prio-nav';
+Component.define('syn-prio-nav');
+
+/**
+ * @summary The `<syn-prio-nav />` element provides a generic navigation bar
+ * that can be used to group multiple navigation items  (usually horizontal `<syn-nav-item />`s)
+ * together. It will automatically group all items not visible in the viewport into a custom
+ * priority menu.
+ *
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-prio-nav--docs
+ * @example
+ * <syn-prio-nav>
+ *  <syn-nav-item current horizontal>Item 1</syn-nav-item>
+ *  <button role="menuitem">Item 2 (custom)</button>
+ *  <syn-nav-item horizontal>Item 3</syn-nav-item>
+ * </syn-prio-nav>
+ *
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-prio-nav--docs
+ * @status stable
+ * @since 1.14.0
+ *
+ * @dependency syn-dropdown
+ * @dependency syn-icon
+ * @dependency syn-menu
+ * @dependency syn-nav-item
+ *
+ * @slot - The given navigation items. Must be horizontal `<syn-nav-item>`s
+ *    or have a role of "menuitem"
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart priority-menu - The wrapper around the priority menu
+ * @csspart priority-menu-nav-item - The navigation item for the priority menu
+ * @csspart priority-menu-label - The label for the priority menu
+ * @csspart priority-menu-icon - The icon for the priority menu
+ * @csspart priority-menu-container - The container for the shifted navigation items,
+ *    if there is not enough space.
+ *
+ */
+export const SynPrioNav = createComponent({
+  displayName: 'SynPrioNav',
+  elementClass: Component,
+  events: {},
+  react: React,
+  tagName,
+});

package/data/layers/full/component/component:syn-prio-nav/vue/SynVuePrioNav.vue

@@ -0,0 +1,60 @@
+<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 The `<syn-prio-nav />` element provides a generic navigation bar
+ * that can be used to group multiple navigation items  (usually horizontal `<syn-nav-item />`s)
+ * together. It will automatically group all items not visible in the viewport into a custom
+ * priority menu.
+ *
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-prio-nav--docs
+ * @example
+ * <syn-prio-nav>
+ *  <syn-nav-item current horizontal>Item 1</syn-nav-item>
+ *  <button role="menuitem">Item 2 (custom)</button>
+ *  <syn-nav-item horizontal>Item 3</syn-nav-item>
+ * </syn-prio-nav>
+ *
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-prio-nav--docs
+ * @status stable
+ * @since 1.14.0
+ *
+ * @dependency syn-dropdown
+ * @dependency syn-icon
+ * @dependency syn-menu
+ * @dependency syn-nav-item
+ *
+ * @slot - The given navigation items. Must be horizontal `<syn-nav-item>`s
+ *    or have a role of "menuitem"
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart priority-menu - The wrapper around the priority menu
+ * @csspart priority-menu-nav-item - The navigation item for the priority menu
+ * @csspart priority-menu-label - The label for the priority menu
+ * @csspart priority-menu-icon - The icon for the priority menu
+ * @csspart priority-menu-container - The container for the shifted navigation items,
+ *    if there is not enough space.
+ *
+ */
+import { computed, ref } from 'vue';
+import '@synergy-design-system/components/components/prio-nav/prio-nav.js';
+
+import type { SynPrioNav } from '@synergy-design-system/components';
+
+// DOM Reference to the element
+const nativeElement = ref<SynPrioNav>();
+
+defineExpose({
+  nativeElement,
+});
+</script>
+
+<template>
+  <syn-prio-nav ref="nativeElement">
+    <slot></slot>
+  </syn-prio-nav>
+</template>

package/data/layers/full/component/component:syn-progress-bar/angular/progress-bar.component.ts

@@ -0,0 +1,85 @@
+// ---------------------------------------------------------------------
+// 🔒 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 { SynProgressBar } from '@synergy-design-system/components';
+
+import '@synergy-design-system/components/components/progress-bar/progress-bar.js';
+
+/**
+ * @summary Progress bars are used to show the status of an ongoing operation.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-progress-bar--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @slot - A label to show inside the progress indicator.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart indicator - The progress bar's indicator.
+ * @csspart label - The progress bar's label.
+ *
+ * @cssproperty --height - The progress bar's height.
+ * @cssproperty --track-color - The color of the track.
+ * @cssproperty --indicator-color - The color of the indicator.
+ * @cssproperty --label-color - The color of the label.
+ * @cssproperty --speed - The speed of the progress bar when in indeterminate state.
+ */
+@Component({
+  selector: 'syn-progress-bar',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+})
+export class SynProgressBarComponent {
+  public nativeElement: SynProgressBar;
+  private _ngZone: NgZone;
+
+  constructor(e: ElementRef, ngZone: NgZone) {
+    this.nativeElement = e.nativeElement;
+    this._ngZone = ngZone;
+  }
+
+  /**
+   * The current progress as a percentage, 0 to 100.
+   */
+  @Input()
+  set value(v: SynProgressBar['value']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.value = v));
+  }
+  get value(): SynProgressBar['value'] {
+    return this.nativeElement.value;
+  }
+
+  /**
+   * When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state.
+   */
+  @Input()
+  set indeterminate(v: '' | SynProgressBar['indeterminate']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.indeterminate = v === '' || v),
+    );
+  }
+  get indeterminate(): SynProgressBar['indeterminate'] {
+    return this.nativeElement.indeterminate;
+  }
+
+  /**
+   * A custom label for assistive devices.
+   */
+  @Input()
+  set label(v: SynProgressBar['label']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.label = v));
+  }
+  get label(): SynProgressBar['label'] {
+    return this.nativeElement.label;
+  }
+}

package/data/layers/full/component/component:syn-progress-bar/components/progress-bar.component.ts

@@ -0,0 +1,67 @@
+/* eslint-disable */
+import { classMap } from 'lit/directives/class-map.js';
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { LocalizeController } from '../../utilities/localize.js';
+import { property } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import componentStyles from '../../styles/component.styles.js';
+import SynergyElement from '../../internal/synergy-element.js';
+import styles from './progress-bar.styles.js';
+import customStyles from './progress-bar.custom.styles.js';
+import type { CSSResultGroup } from 'lit';
+
+/**
+ * @summary Progress bars are used to show the status of an ongoing operation.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-progress-bar--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @slot - A label to show inside the progress indicator.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart indicator - The progress bar's indicator.
+ * @csspart label - The progress bar's label.
+ *
+ * @cssproperty --height - The progress bar's height.
+ * @cssproperty --track-color - The color of the track.
+ * @cssproperty --indicator-color - The color of the indicator.
+ * @cssproperty --label-color - The color of the label.
+ * @cssproperty --speed - The speed of the progress bar when in indeterminate state.
+ */
+export default class SynProgressBar extends SynergyElement {
+  static styles: CSSResultGroup = [componentStyles, styles, customStyles];
+  private readonly localize = new LocalizeController(this);
+
+  /** The current progress as a percentage, 0 to 100. */
+  @property({ type: Number, reflect: true }) value = 0;
+
+  /** When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. */
+  @property({ type: Boolean, reflect: true }) indeterminate = false;
+
+  /** A custom label for assistive devices. */
+  @property() label = '';
+
+  render() {
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+          'progress-bar': true,
+          'progress-bar--indeterminate': this.indeterminate,
+          'progress-bar--rtl': this.localize.dir() === 'rtl'
+        })}
+        role="progressbar"
+        title=${ifDefined(this.title)}
+        aria-label=${this.label.length > 0 ? this.label : this.localize.term('progress')}
+        aria-valuemin="0"
+        aria-valuemax="100"
+        aria-valuenow=${this.indeterminate ? 0 : this.value}
+      >
+        <div part="indicator" class="progress-bar__indicator" style=${styleMap({ width: `${this.value}%` })}>
+          ${!this.indeterminate ? html` <slot part="label" class="progress-bar__label"></slot> ` : ''}
+        </div>
+      </div>
+    `;
+  }
+}

package/data/layers/full/component/component:syn-progress-bar/components/progress-bar.custom.styles.ts

@@ -0,0 +1,24 @@
+import { css } from 'lit';
+
+export default css`
+  :host {
+    --height: var(--syn-font-size-medium);
+    --speed: 2.5s;
+    --indicator-color: var(--syn-progress-indicator-color);
+    --track-color: var(--syn-progress-track-color);
+  }
+
+  .progress-bar {
+    border-radius: var(--syn-border-radius-none);
+    box-shadow: none;
+  }
+
+  .progress-bar__indicator {
+    font: var(--syn-body-x-small-bold);
+  }
+
+  /* Indeterminate */
+  .progress-bar--indeterminate .progress-bar__indicator {
+    animation-duration: var(--speed);
+  }
+`;

package/data/layers/full/component/component:syn-progress-bar/components/progress-bar.styles.ts

@@ -0,0 +1,87 @@
+/* eslint-disable */
+import { css } from 'lit';
+
+export default css`
+	/* stylelint-disable */
+  :host {
+    --height: 1rem;
+    --track-color: var(--syn-color-neutral-200);
+    --indicator-color: var(--syn-color-primary-600);
+    --label-color: var(--syn-color-neutral-0);
+
+    display: block;
+  }
+
+  .progress-bar {
+    position: relative;
+    background-color: var(--track-color);
+    height: var(--height);
+    border-radius: var(--syn-border-radius-pill);
+    box-shadow: inset var(--syn-shadow-small);
+    overflow: hidden;
+  }
+
+  .progress-bar__indicator {
+    height: 100%;
+    font-family: var(--syn-font-sans);
+    font-size: 12px;
+    font-weight: var(--syn-font-weight-normal);
+    background-color: var(--indicator-color);
+    color: var(--label-color);
+    text-align: center;
+    line-height: var(--height);
+    white-space: nowrap;
+    overflow: hidden;
+    transition:
+      400ms width,
+      400ms background-color;
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  /* Indeterminate */
+  .progress-bar--indeterminate .progress-bar__indicator {
+    position: absolute;
+    animation: indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1);
+  }
+
+  .progress-bar--indeterminate.progress-bar--rtl .progress-bar__indicator {
+    animation-name: indeterminate-rtl;
+  }
+
+  @media (forced-colors: active) {
+    .progress-bar {
+      outline: solid 1px SelectedItem;
+      background-color: var(--syn-color-neutral-0);
+    }
+
+    .progress-bar__indicator {
+      outline: solid 1px SelectedItem;
+      background-color: SelectedItem;
+    }
+  }
+
+  @keyframes indeterminate {
+    0% {
+      left: -50%;
+      width: 50%;
+    }
+    75%,
+    100% {
+      left: 100%;
+      width: 50%;
+    }
+  }
+
+  @keyframes indeterminate-rtl {
+    0% {
+      right: -50%;
+      width: 50%;
+    }
+    75%,
+    100% {
+      right: 100%;
+      width: 50%;
+    }
+  }
+`;

package/data/layers/full/component/component:syn-progress-bar/components/progress-bar.ts

@@ -0,0 +1,13 @@
+/* eslint-disable */
+import SynProgressBar from './progress-bar.component.js';
+
+export * from './progress-bar.component.js';
+export default SynProgressBar;
+
+SynProgressBar.define('syn-progress-bar');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'syn-progress-bar': SynProgressBar;
+  }
+}

package/data/layers/full/component/component:syn-progress-bar/react/SynProgressBarJSXElement.ts

@@ -0,0 +1 @@
+export type SynProgressBarJSXElement = SynCustomElement<SynProgressBar, []>;

package/data/layers/full/component/component:syn-progress-bar/react/progress-bar.ts

@@ -0,0 +1,37 @@
+// ---------------------------------------------------------------------
+// 🔒 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/progress-bar/progress-bar.component.js';
+
+const tagName = 'syn-progress-bar';
+Component.define('syn-progress-bar');
+
+/**
+ * @summary Progress bars are used to show the status of an ongoing operation.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-progress-bar--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @slot - A label to show inside the progress indicator.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart indicator - The progress bar's indicator.
+ * @csspart label - The progress bar's label.
+ *
+ * @cssproperty --height - The progress bar's height.
+ * @cssproperty --track-color - The color of the track.
+ * @cssproperty --indicator-color - The color of the indicator.
+ * @cssproperty --label-color - The color of the label.
+ * @cssproperty --speed - The speed of the progress bar when in indeterminate state.
+ */
+export const SynProgressBar = createComponent({
+  displayName: 'SynProgressBar',
+  elementClass: Component,
+  events: {},
+  react: React,
+  tagName,
+});

package/data/layers/full/component/component:syn-progress-bar/vue/SynVueProgressBar.vue

@@ -0,0 +1,71 @@
+<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 Progress bars are used to show the status of an ongoing operation.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-progress-bar--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @slot - A label to show inside the progress indicator.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart indicator - The progress bar's indicator.
+ * @csspart label - The progress bar's label.
+ *
+ * @cssproperty --height - The progress bar's height.
+ * @cssproperty --track-color - The color of the track.
+ * @cssproperty --indicator-color - The color of the indicator.
+ * @cssproperty --label-color - The color of the label.
+ * @cssproperty --speed - The speed of the progress bar when in indeterminate state.
+ */
+import { computed, ref } from 'vue';
+import '@synergy-design-system/components/components/progress-bar/progress-bar.js';
+
+import type { SynProgressBar } from '@synergy-design-system/components';
+
+// DOM Reference to the element
+const nativeElement = ref<SynProgressBar>();
+
+defineExpose({
+  nativeElement,
+});
+
+// Map attributes
+const props = defineProps<{
+  /**
+   * The current progress as a percentage, 0 to 100.
+   */
+  value?: SynProgressBar['value'];
+
+  /**
+   * When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state.
+   */
+  indeterminate?: SynProgressBar['indeterminate'];
+
+  /**
+   * A custom label for assistive devices.
+   */
+  label?: SynProgressBar['label'];
+}>();
+
+// 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-progress-bar v-bind="visibleProps" ref="nativeElement">
+    <slot></slot>
+  </syn-progress-bar>
+</template>

package/data/layers/full/component/component:syn-progress-ring/angular/progress-ring.component.ts

@@ -0,0 +1,72 @@
+// ---------------------------------------------------------------------
+// 🔒 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 { SynProgressRing } from '@synergy-design-system/components';
+
+import '@synergy-design-system/components/components/progress-ring/progress-ring.js';
+
+/**
+ * @summary Progress rings are used to show the progress of a determinate operation in a circular fashion.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-progress-ring--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @slot - A label to show inside the ring.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart label - The progress ring label.
+ *
+ * @cssproperty --size - The diameter of the progress ring (cannot be a percentage).
+ * @cssproperty --track-width - The width of the track.
+ * @cssproperty --track-color - The color of the track.
+ * @cssproperty --indicator-width - The width of the indicator. Defaults to the track width.
+ * @cssproperty --indicator-color - The color of the indicator.
+ * @cssproperty --indicator-transition-duration - The duration of the indicator's transition when the value changes.
+ */
+@Component({
+  selector: 'syn-progress-ring',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+})
+export class SynProgressRingComponent {
+  public nativeElement: SynProgressRing;
+  private _ngZone: NgZone;
+
+  constructor(e: ElementRef, ngZone: NgZone) {
+    this.nativeElement = e.nativeElement;
+    this._ngZone = ngZone;
+  }
+
+  /**
+   * The current progress as a percentage, 0 to 100.
+   */
+  @Input()
+  set value(v: SynProgressRing['value']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.value = v));
+  }
+  get value(): SynProgressRing['value'] {
+    return this.nativeElement.value;
+  }
+
+  /**
+   * A custom label for assistive devices.
+   */
+  @Input()
+  set label(v: SynProgressRing['label']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.label = v));
+  }
+  get label(): SynProgressRing['label'] {
+    return this.nativeElement.label;
+  }
+}