@synergy-design-system/metadata 1.0.0 → 3.0.0

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

@@ -0,0 +1,95 @@
+// ---------------------------------------------------------------------
+// 🔒 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/side-nav/side-nav.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-side-nav';
+Component.define('syn-side-nav');
+
+/**
+ * @summary The <syn-side-nav /> element contains secondary navigation and fits below the header.
+ * It can be used to group multiple navigation items (<syn-nav-item />s) together.
+ *
+ * @example
+ * <syn-side-nav open>
+ *  <syn-nav-item >Item 1</syn-nav-item>
+ *  <syn-nav-item divider>Item 2</syn-nav-item>
+ * </syn-side-nav>
+ *
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-side-nav--docs
+ * @status stable
+ * @since 1.14.0
+ *
+ * @dependency syn-divider
+ * @dependency syn-drawer
+ * @dependency syn-icon
+ * @dependency syn-nav-item
+ *
+ * @slot - The main content of the side-nav. Used for <syn-nav-item /> elements.
+ * @slot footer - The footer content of the side-nav. Used for <syn-nav-item /> elements.
+ *    Please avoid having to many nav-items as it can massively influence the user experience.
+ * @slot toggle-label - The label of the toggle nav-item for variant="sticky".
+ * @slot toggle-icon - An icon to use in lieu of the default icon for the toggle nav-item
+ * for variant="sticky".
+ *
+ * @event syn-show - Emitted when the side-nav opens.
+ * @event syn-after-show - Emitted after the side-nav opens and all animations are complete.
+ * @event syn-hide - Emitted when the side-nav closes.
+ * @event syn-after-hide - Emitted after the side-nav closes and all animations are complete.
+ *
+ * @csspart base - The components base wrapper
+ * @csspart drawer - The drawer that is used under the hood for creating the side-nav
+ * @csspart content-container - The components main content container
+ * @csspart content - The components main content
+ * @csspart footer-container - The components footer content container
+  (where the footer slot content is rendered)
+ * @csspart footer-divider - The components footer divider
+ * @csspart footer - The components footer content
+ * @csspart overlay - The overlay that covers the screen behind the side-nav.
+ * @csspart panel - The side-nav's panel (where the whole content is rendered).
+ * @csspart body - The side-nav's body (where the default slot content is rendered)
+ * @csspart drawer__base - The drawer's base wrapper
+ * @csspart toggle-nav-item - The nav-item to toggle open state for variant="sticky"
+ * @csspart toggle-icon - The icon of the toggle nav-item for variant="sticky"
+ * @csspart toggle-label - The label of the toggle nav-item for variant="sticky".
+
+ * @cssproperty  --side-nav-open-width - The width of the side-nav if in open state
+ *
+ * @animation sideNav.showNonRail - The animation to use when showing the side-nav
+ *  in variant="default".
+ * @animation sideNav.showRail - The animation to use when showing the side-nav in variant="rail"
+ *  and variant="sticky".
+ * @animation sideNav.hideNonRail - The animation to use when hiding the side-nav
+ *  in variant="default".
+ * @animation sideNav.hideRail - The animation to use when hiding the side-nav in variant="rail"
+ *  and variant="sticky".
+ * @animation sideNav.overlay.show - The animation to use when showing the side-nav's overlay.
+ * @animation sideNav.overlay.hide - The animation to use when hiding the side-nav's overlay.
+ */
+export const SynSideNav = createComponent({
+  displayName: 'SynSideNav',
+  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/data/layers/full/component/component:syn-side-nav/vue/SynVueSideNav.vue

@@ -0,0 +1,188 @@
+<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-side-nav /> element contains secondary navigation and fits below the header.
+ * It can be used to group multiple navigation items (<syn-nav-item />s) together.
+ *
+ * @example
+ * <syn-side-nav open>
+ *  <syn-nav-item >Item 1</syn-nav-item>
+ *  <syn-nav-item divider>Item 2</syn-nav-item>
+ * </syn-side-nav>
+ *
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-side-nav--docs
+ * @status stable
+ * @since 1.14.0
+ *
+ * @dependency syn-divider
+ * @dependency syn-drawer
+ * @dependency syn-icon
+ * @dependency syn-nav-item
+ *
+ * @slot - The main content of the side-nav. Used for <syn-nav-item /> elements.
+ * @slot footer - The footer content of the side-nav. Used for <syn-nav-item /> elements.
+ *    Please avoid having to many nav-items as it can massively influence the user experience.
+ * @slot toggle-label - The label of the toggle nav-item for variant="sticky".
+ * @slot toggle-icon - An icon to use in lieu of the default icon for the toggle nav-item
+ * for variant="sticky".
+ *
+ * @event syn-show - Emitted when the side-nav opens.
+ * @event syn-after-show - Emitted after the side-nav opens and all animations are complete.
+ * @event syn-hide - Emitted when the side-nav closes.
+ * @event syn-after-hide - Emitted after the side-nav closes and all animations are complete.
+ *
+ * @csspart base - The components base wrapper
+ * @csspart drawer - The drawer that is used under the hood for creating the side-nav
+ * @csspart content-container - The components main content container
+ * @csspart content - The components main content
+ * @csspart footer-container - The components footer content container
+  (where the footer slot content is rendered)
+ * @csspart footer-divider - The components footer divider
+ * @csspart footer - The components footer content
+ * @csspart overlay - The overlay that covers the screen behind the side-nav.
+ * @csspart panel - The side-nav's panel (where the whole content is rendered).
+ * @csspart body - The side-nav's body (where the default slot content is rendered)
+ * @csspart drawer__base - The drawer's base wrapper
+ * @csspart toggle-nav-item - The nav-item to toggle open state for variant="sticky"
+ * @csspart toggle-icon - The icon of the toggle nav-item for variant="sticky"
+ * @csspart toggle-label - The label of the toggle nav-item for variant="sticky".
+
+ * @cssproperty  --side-nav-open-width - The width of the side-nav if in open state
+ *
+ * @animation sideNav.showNonRail - The animation to use when showing the side-nav
+ *  in variant="default".
+ * @animation sideNav.showRail - The animation to use when showing the side-nav in variant="rail"
+ *  and variant="sticky".
+ * @animation sideNav.hideNonRail - The animation to use when hiding the side-nav
+ *  in variant="default".
+ * @animation sideNav.hideRail - The animation to use when hiding the side-nav in variant="rail"
+ *  and variant="sticky".
+ * @animation sideNav.overlay.show - The animation to use when showing the side-nav's overlay.
+ * @animation sideNav.overlay.hide - The animation to use when hiding the side-nav's overlay.
+ */
+import { computed, ref } from 'vue';
+import '@synergy-design-system/components/components/side-nav/side-nav.js';
+
+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 type { SynSideNav } from '@synergy-design-system/components';
+
+// DOM Reference to the element
+const nativeElement = ref<SynSideNav>();
+
+defineExpose({
+  nativeElement,
+});
+
+// Map attributes
+const props = defineProps<{
+  /**
+* Indicates whether or not the side-nav is open.
+You can toggle this attribute to show and hide the side-nav, or you can use the `show()` and
+`hide()` methods and this attribute will reflect the side-nav's open state.
+
+Depending on the "variant" attribute, the behavior will differ.
+
+__Default__:
+With `open` will show the side-nav with an overlay.
+Without `open`, the side-nav will be hidden.
+
+__Rail__:
+With `open` will show the whole side-nav with an overlay for touch devices
+or without an overlay for non-touch devices.
+Without `open`, the side-nav will only show the prefix of nav-item's.
+
+__Sticky__:
+With `open` will show the whole side-nav with an overlay for touch devices
+or without an overlay for non-touch devices.
+Without `open`, the side-nav will only show the prefix of nav-item's.
+ */
+  open?: SynSideNav['open'];
+
+  /**
+* The variant that should be used to show the side navigation.
+
+The following variants are supported:
+- **default** (default): Always shows the whole content and additionally an overlay.
+This makes especially sense for applications, where you navigate to a place and stay
+there for a longer time.
+- **rail**: Only show the prefix of navigation items in closed state.
+This will open on hover on the rail navigation.
+On touch devices the navigation opens on click and shows an overlay.
+Note: The rail variant is only an option if all Navigation Items on the first level
+have an Icon.
+If this is not the case you should use a burger navigation.
+- **sticky**: The side-nav has a pin button to show the side-nav in small (icon only)
+and full width.
+* This variant is only possible for non-nested navigation items.
+Note: The sticky variant is only an option if all Navigation Items on the first level
+have an Icon and if there are only "first level" items.
+ */
+  variant?: SynSideNav['variant'];
+
+  /**
+* By default, the side-nav traps the focus if in variant="default" and open.
+To disable the focus trapping, set this attribute.
+ */
+  noFocusTrapping?: SynSideNav['noFocusTrapping'];
+}>();
+
+// 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 side-nav opens.
+   */
+  'syn-show': [e: SynShowEvent];
+
+  /**
+   * Emitted after the side-nav opens and all animations are complete.
+   */
+  'syn-after-show': [e: SynAfterShowEvent];
+
+  /**
+   * Emitted when the side-nav closes.
+   */
+  'syn-hide': [e: SynHideEvent];
+
+  /**
+   * Emitted after the side-nav closes and all animations are complete.
+   */
+  'syn-after-hide': [e: SynAfterHideEvent];
+}>();
+</script>
+
+<script lang="ts">
+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';
+</script>
+
+<template>
+  <syn-side-nav
+    @syn-show="$emit('syn-show', $event)"
+    @syn-after-show="$emit('syn-after-show', $event)"
+    @syn-hide="$emit('syn-hide', $event)"
+    @syn-after-hide="$emit('syn-after-hide', $event)"
+    v-bind="visibleProps"
+    ref="nativeElement">
+    <slot></slot>
+  </syn-side-nav>
+</template>

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

@@ -0,0 +1,44 @@
+// ---------------------------------------------------------------------
+// 🔒 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 { SynSpinner } from '@synergy-design-system/components';
+
+import '@synergy-design-system/components/components/spinner/spinner.js';
+
+/**
+ * @summary Spinners are used to show the progress of an indeterminate operation.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-spinner--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @csspart base - The component's base wrapper.
+ *
+ * @cssproperty --track-width - The width of the track.
+ * @cssproperty --indicator-color - The color of the spinner's indicator.
+ * @cssproperty --speed - The time it takes for the spinner to complete one animation cycle.
+ */
+@Component({
+  selector: 'syn-spinner',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+})
+export class SynSpinnerComponent {
+  public nativeElement: SynSpinner;
+  private _ngZone: NgZone;
+
+  constructor(e: ElementRef, ngZone: NgZone) {
+    this.nativeElement = e.nativeElement;
+    this._ngZone = ngZone;
+  }
+}

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

@@ -0,0 +1,35 @@
+/* eslint-disable */
+import { html } from 'lit';
+import { LocalizeController } from '../../utilities/localize.js';
+import componentStyles from '../../styles/component.styles.js';
+import SynergyElement from '../../internal/synergy-element.js';
+import styles from './spinner.styles.js';
+import customStyles from './spinner.custom.styles.js';
+import type { CSSResultGroup } from 'lit';
+
+/**
+ * @summary Spinners are used to show the progress of an indeterminate operation.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-spinner--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @csspart base - The component's base wrapper.
+ *
+ * @cssproperty --track-width - The width of the track.
+ * @cssproperty --indicator-color - The color of the spinner's indicator.
+ * @cssproperty --speed - The time it takes for the spinner to complete one animation cycle.
+ */
+export default class SynSpinner extends SynergyElement {
+  static styles: CSSResultGroup = [componentStyles, styles, customStyles];
+
+  private readonly localize = new LocalizeController(this);
+
+  render() {
+    return html`
+      <svg part="base" class="spinner" role="progressbar" aria-label=${this.localize.term('loading')}>
+        <circle class="spinner__track"></circle>
+        <circle class="spinner__indicator"></circle>
+      </svg>
+    `;
+  }
+}

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

@@ -0,0 +1,32 @@
+import { css } from 'lit';
+
+export default css`
+  :host {
+    --speed: var(--syn-transition-x-slow);
+    --indicator-color: var(--syn-interactive-emphasis-color);
+  }
+
+  .spinner__indicator {
+    stroke-dasharray: 75% 360%;
+    stroke-linecap: initial;
+  }
+
+  /**
+   * Make sure the spinner track is using the correct color.
+   */
+  .spinner__track {
+    filter: saturate(0);
+    opacity: var(--syn-spinner-opacity);
+    stroke: var(--indicator-color);
+  }
+
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+`;

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

@@ -0,0 +1,48 @@
+/* eslint-disable */
+import { css } from 'lit';
+
+// Resizing a spinner element using anything but font-size will break the animation because the animation uses em units.
+// Therefore, if a spinner is used in a flex container without `flex: none` applied, the spinner can grow/shrink and
+// break the animation. The use of `flex: none` on the host element prevents this by always having the spinner sized
+// according to its actual dimensions.
+
+export default css`
+	/* stylelint-disable */
+  :host {
+    --track-width: 2px;
+    --indicator-color: var(--syn-color-primary-600);
+    --speed: 2s;
+
+    display: inline-flex;
+    width: 1em;
+    height: 1em;
+    flex: none;
+  }
+
+  .spinner {
+    flex: 1 1 auto;
+    height: 100%;
+    width: 100%;
+  }
+
+  .spinner__track,
+  .spinner__indicator {
+    fill: none;
+    stroke-width: var(--track-width);
+    r: calc(0.5em - var(--track-width) / 2);
+    cx: 0.5em;
+    cy: 0.5em;
+    transform-origin: 50% 50%;
+  }
+
+  .spinner__track {
+    transform-origin: 0% 0%;
+  }
+
+  .spinner__indicator {
+    stroke: var(--indicator-color);
+    stroke-linecap: round;
+    stroke-dasharray: 150% 75%;
+    animation: spin var(--speed) linear infinite;
+  }
+`;

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

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

package/data/layers/full/component/component:syn-spinner/react/SynSpinnerJSXElement.ts

@@ -0,0 +1 @@
+export type SynSpinnerJSXElement = SynCustomElement<SynSpinner, []>;

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

@@ -0,0 +1,31 @@
+// ---------------------------------------------------------------------
+// 🔒 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/spinner/spinner.component.js';
+
+const tagName = 'syn-spinner';
+Component.define('syn-spinner');
+
+/**
+ * @summary Spinners are used to show the progress of an indeterminate operation.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-spinner--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @csspart base - The component's base wrapper.
+ *
+ * @cssproperty --track-width - The width of the track.
+ * @cssproperty --indicator-color - The color of the spinner's indicator.
+ * @cssproperty --speed - The time it takes for the spinner to complete one animation cycle.
+ */
+export const SynSpinner = createComponent({
+  displayName: 'SynSpinner',
+  elementClass: Component,
+  events: {},
+  react: React,
+  tagName,
+});

package/data/layers/full/component/component:syn-spinner/vue/SynVueSpinner.vue

@@ -0,0 +1,35 @@
+<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 Spinners are used to show the progress of an indeterminate operation.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-spinner--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @csspart base - The component's base wrapper.
+ *
+ * @cssproperty --track-width - The width of the track.
+ * @cssproperty --indicator-color - The color of the spinner's indicator.
+ * @cssproperty --speed - The time it takes for the spinner to complete one animation cycle.
+ */
+import { computed, ref } from 'vue';
+import '@synergy-design-system/components/components/spinner/spinner.js';
+
+import type { SynSpinner } from '@synergy-design-system/components';
+
+// DOM Reference to the element
+const nativeElement = ref<SynSpinner>();
+
+defineExpose({
+  nativeElement,
+});
+</script>
+
+<template>
+  <syn-spinner ref="nativeElement"> </syn-spinner>
+</template>