@synergy-design-system/metadata 1.0.0 → 3.0.1

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

@@ -0,0 +1,333 @@
+import { css } from 'lit';
+
+export default css`
+  /**
+   * Default alignment is inline block when we are in horizontal mode
+   */
+  :host {
+    /**
+     * The indentation property defines the current "level" the component is on
+     * It may be set per hand, but is normally set during the render phase
+     * of a <syn-nav-item /> for slotted children
+     */
+    --indentation: 0;
+
+    /**
+     * Defines the amount of pixels each indentation level will shift the content to the left
+     */
+    --indentation-stepping: var(--syn-spacing-x-large);
+
+    /**
+     * Display property of the children. Defaults to "contents"
+     */
+    --display-children: contents;
+
+    display: block;
+  }
+
+  /**
+   * Switch alignment to inline-block when we are in horizontal mode
+   */
+  :host([horizontal]) {
+    display: inline-block;
+  }
+
+  /**
+   * Core nav item wrapper
+   */
+  .nav-item {
+    align-items: center;
+    background: transparent;
+    border: none;
+    box-shadow: inset 0 -1px 0 0 transparent;
+    box-sizing: border-box;
+    color: var(--syn-typography-color-text);
+    cursor: pointer;
+    display: inline-flex;
+    font: var(--syn-font-sans);
+    font-size: var(--syn-font-size-small);
+    min-height: var(--syn-spacing-2x-large);
+    padding: var(--syn-spacing-small) var(--syn-spacing-large);
+    position: relative;
+    text-align: left;
+    text-decoration: none;
+    transition: background-color var(--syn-transition-fast) ease-in-out, box-shadow var(--syn-transition-fast) ease-in-out;
+    width: 100%;
+    z-index: 0;
+  }
+
+  .nav-item:focus-visible {
+    outline: none;
+  }
+
+  .nav-item:focus-visible::after {
+    content: '';
+    display: block;
+    height: 100%;
+    left: calc(var(--syn-spacing-x-small) * -1);
+    outline: var(--syn-focus-ring);
+    outline-offset: -2px;
+    position: absolute;
+    top: 0;
+    width: calc(100% + 2 * var(--syn-spacing-x-small));
+  }
+
+  .nav-item--vertical:focus-visible::after {
+    left: 0;
+    width: 100%;
+  }
+
+  /**
+   * Horizontal nav items use narrower paddings
+   */
+  .nav-item--horizontal {
+    padding: var(--syn-spacing-small) 0;
+  }
+
+  /**
+   * Nav Items acting as accordion use a slightly narrower padding on the right side
+   */
+  .nav-item.nav-item-is-accordion {
+    padding-right: var(--syn-spacing-medium);
+  }
+
+  .nav-item--disabled {
+    cursor: not-allowed;
+  }
+
+  .nav-item--current {
+    font-weight: var(--syn-font-weight-bold);
+  }
+
+  /**
+   * Basic set up for the nav item prefix.
+   */
+  .nav-item:not(.nav-item--disabled)::before {
+    background: var(--syn-interactive-background-color-hover);
+    content: '';
+    display: block;
+    height: 100%;
+    left: 0;
+    opacity: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    z-index: -1;
+  }
+
+  /**
+   * Hover effect for the nav item.
+   * We use opacity to make sure the border-bottom is visible if used in the prio-nav in header
+   */
+  .nav-item:not(.nav-item--disabled):hover::before {
+    opacity: 1;
+  }
+
+  /**
+   * #443: Add support for active state
+   */
+  .nav-item:not(.nav-item--disabled):active::before {
+    background: var(--syn-interactive-background-color-active);
+    opacity: 1;
+  }
+
+  /**
+   * When using horizontal, the background should extend the element
+   * on the left and right so the animation for the indicator can be seen
+   */
+  .nav-item--horizontal:not(.nav-item--disabled)::before {
+    left: calc(var(--syn-spacing-x-small) * -1);
+    width: calc(100% + 2 * var(--syn-spacing-x-small));
+  }
+
+  /**
+   * The content wrapper is needed to get the disabled state right
+   * and also sets the left padding, according to the given indentation level.
+   *
+   * Normally, we would just use opacity directly on the button.
+   * However, when using the divider prop, this leads to problems
+   * as the divider itself will also get opaque.
+   */
+  .nav-item__content {
+    align-items: center;
+    display: flex;
+    padding-inline-start: calc(var(--indentation) * var(--indentation-stepping));
+    width: 100%;
+  }
+
+  .nav-item--disabled .nav-item__content {
+    opacity: var(--syn-opacity-50);
+  }
+
+  /**
+   * Slotted icons should use a default font size of large
+   */
+  .nav-item--has-prefix ::slotted(syn-icon),
+  .nav-item--has-suffix ::slotted(syn-icon) {
+    font-size: var(--syn-font-size-x-large);
+    min-width: var(--syn-font-size-x-large);
+  }
+
+  /**
+   * The chevron indicates the use as a <details /> element OR a link
+   */
+  .nav-item__chevron {
+    color: var(--syn-interactive-quiet-color);
+    font-size: var(--syn-font-size-x-large);
+    margin-inline-start: var(--syn-spacing-x-small);
+    rotate: 0deg;
+    transition: var(--syn-transition-medium) rotate ease;
+  }
+
+  .nav-item__chevron-open {
+    rotate: -180deg;
+  }
+
+  /**
+   * Items that have the chevron attribute set and are NOT accordions should always show a chevron pointing to the right
+   */
+  .nav-item:not(.nav-item-is-accordion) .nav-item__chevron {
+    rotate: -90deg;
+  }
+
+  /**
+   * Make the primary content container fill all available space
+   */
+  .nav-item__content-container {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  /**
+   * Horizontal navigation items should not break words
+   */
+  .nav-item--horizontal .nav-item__content-container {
+    font-weight: var(--syn-font-weight-bold);
+    white-space: nowrap;
+  }
+
+  /**
+   * Show prefix only
+   */
+  /* stylelint-disable no-descending-specificity */
+  .nav-item--show-prefix-only .nav-item__content-container,
+  .nav-item--show-prefix-only .nav-item__suffix,
+  .nav-item--show-prefix-only .nav-item__chevron {
+    height: var(--syn-spacing-large);
+  }
+  /* stylelint-enable no-descending-specificity */
+
+  /**
+   * Adjust the paddings for the label, depending if there is a pre- and/or suffix available.
+   * But only if the there is a main content or additionally a prefix / suffix
+   */
+  .nav-item--has-prefix.nav-item--has-content .nav-item__content-container,
+  .nav-item--has-prefix.nav-item--has-suffix .nav-item__content-container {
+    margin-inline-start: var(--syn-spacing-x-small);
+  }
+
+  .nav-item--has-suffix.nav-item--has-content .nav-item__content-container,
+  .nav-item--has-suffix.nav-item--has-prefix .nav-item__content-container {
+    margin-inline-end: var(--syn-spacing-x-small);
+  }
+
+  /**
+   * Multi line content
+   */
+  /* stylelint-disable no-descending-specificity */
+  .nav-item--multi-line .nav-item__suffix,
+  .nav-item--multi-line .nav-item__prefix,
+  .nav-item--multi-line .nav-item__chevron {
+    align-self: flex-start;
+  }
+  /* stylelint-enable no-descending-specificity */
+
+  /* stylelint-disable no-descending-specificity */
+  .nav-item--multi-line .nav-item__suffix::slotted(syn-icon),
+  :not(.nav-item--show-prefix-only).nav-item--multi-line .nav-item__prefix::slotted(syn-icon),
+  .nav-item--multi-line .nav-item__chevron {
+    align-self: flex-start;
+  }
+  /* stylelint-enable no-descending-specificity */
+
+  /**
+   * The current indicator tells the user that the nav-item is the active one
+   */
+  .current-indicator {
+    background: transparent;
+    border: none;
+    margin: 0;
+    position: absolute;
+    transition: var(--syn-transition-medium) top ease,
+      var(--syn-transition-medium) right ease,
+      var(--syn-transition-medium) bottom ease,
+      var(--syn-transition-medium) left ease;
+    z-index: 1;
+  }
+
+  .current-indicator--visible {
+    background: var(--syn-interactive-emphasis-color);
+  }
+
+  .nav-item--horizontal .current-indicator {
+    bottom: 0;
+    height: var(--syn-spacing-2x-small);
+    left: 0;
+    right: 0;
+  }
+
+  .nav-item--horizontal:hover .current-indicator--visible,
+  .nav-item--horizontal:focus-visible .current-indicator--visible {
+    left: calc(var(--syn-spacing-x-small) * -1);
+    right: calc(var(--syn-spacing-x-small) * -1);
+  }
+
+  .nav-item--vertical .current-indicator {
+    bottom: var(--syn-spacing-x-small);
+    left: 0;
+    top: var(--syn-spacing-x-small);
+    width: var(--syn-spacing-2x-small);
+  }
+
+  .nav-item--vertical:hover .current-indicator--visible,
+  .nav-item--vertical:focus-visible .current-indicator--visible {
+    bottom: 0;
+    top: 0;
+  }
+
+  /**
+   * Dividers are optionally displayed in horizontal nav items
+   */
+  .divider {
+    left: var(--syn-spacing-medium);
+    margin: 0;
+    position: absolute;
+    right: var(--syn-spacing-medium);
+    top: 0;
+  }
+
+  /**
+   * Make sure the divider blends into the background on hover
+   * for items that are NOT disabled.
+   */
+  .nav-item--vertical:not(.nav-item--disabled):hover .divider {
+    --color: var(--syn-interactive-background-color-hover);
+  }
+
+  /**
+   * Sub menu styling
+   */
+  summary.nav-item {
+    box-sizing: border-box;
+    display: flex;
+  }
+
+  details summary::-webkit-details-marker {
+    visibility: hidden;
+  }
+
+  .children {
+    display: var(--display-children)
+  }
+`;

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

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

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

@@ -0,0 +1,9 @@
+export type SynNavItemJSXElement = SynCustomElement<
+  SynNavItem,
+  [
+    ['syn-show', SynShowEvent],
+    ['syn-hide', SynHideEvent],
+    ['syn-blur', SynBlurEvent],
+    ['syn-focus', SynFocusEvent],
+  ]
+>;

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

@@ -0,0 +1,82 @@
+// ---------------------------------------------------------------------
+// 🔒 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/nav-item/nav-item.component.js';
+
+import { type EventName } from '@lit/react';
+import type { SynShowEvent } from '@synergy-design-system/components';
+import type { SynHideEvent } from '@synergy-design-system/components';
+import type { SynBlurEvent } from '@synergy-design-system/components';
+import type { SynFocusEvent } from '@synergy-design-system/components';
+
+const tagName = 'syn-nav-item';
+Component.define('syn-nav-item');
+
+/**
+ * @summary Flexible button / link component that can be used to quickly build navigations.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-nav-item--docs
+ * Takes one of 3 forms:
+ * - button (default),
+ * - link (overrides button if a 'href' is provided),
+ * - or accordion (overrides all other if 'children' slot is defined).
+ *
+ * @status stable
+ * @since 1.14.0
+ *
+ * @dependency syn-divider
+ * @dependency syn-icon
+ *
+ * @event syn-show - Emitted when the navigation item:
+ * - has children,
+ * - and is clicked while HTML details are hidden.
+ *
+ * @event syn-hide - Emitted when the navigation item:
+ * - has children,
+ * - and is clicked while HTML details are shown.
+ *
+ * @event syn-blur - Emitted when the button loses focus.
+ * @event syn-focus - Emitted when the button gains focus.
+ *
+ * @slot - The navigation item's label.
+ * @slot prefix - A presentational prefix icon or similar element.
+ * @slot suffix - A presentational suffix icon or similar element.
+ * @slot children - Slot used to provide nested child navigation elements.
+ * If provided, details and summary elements will be used.
+ * A chevron will be shown on the right side regardless of the chevron property.
+ *
+ * @csspart base - The component's base wrapper including children.
+ * @csspart children - The wrapper that holds the children
+ * @csspart content-wrapper - The component's content wrapper.
+ * @csspart content - The component's content excluding children.
+ * @csspart current-indicator - The indicator used when current is set to true
+ * @csspart chevron - The container that wraps the chevron.
+ * @csspart details - The details element rendered when there are children available
+ * @csspart divider - The components optional top divider.
+ * @csspart prefix - The container that wraps the prefix.
+ * @csspart suffix - The container that wraps the suffix.
+ *
+ * @cssproperty --indentation - Numeric value, indicating the level the item is placed at.
+ * @cssproperty --indentation-stepping - The amount of pixels each level will indent.
+ * @cssproperty --display-children - Display property of the children. Defaults to "contents"
+ */
+export const SynNavItem = createComponent({
+  displayName: 'SynNavItem',
+  elementClass: Component,
+  events: {
+    onSynShow: 'syn-show' as EventName<SynShowEvent>,
+    onSynHide: 'syn-hide' as EventName<SynHideEvent>,
+    onSynBlur: 'syn-blur' as EventName<SynBlurEvent>,
+    onSynFocus: 'syn-focus' as EventName<SynFocusEvent>,
+  },
+  react: React,
+  tagName,
+});
+
+export type { SynShowEvent } from '@synergy-design-system/components';
+export type { SynHideEvent } from '@synergy-design-system/components';
+export type { SynBlurEvent } from '@synergy-design-system/components';
+export type { SynFocusEvent } from '@synergy-design-system/components';

package/data/layers/full/component/component:syn-nav-item/vue/SynVueNavItem.vue

@@ -0,0 +1,182 @@
+<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 Flexible button / link component that can be used to quickly build navigations.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-nav-item--docs
+ * Takes one of 3 forms:
+ * - button (default),
+ * - link (overrides button if a 'href' is provided),
+ * - or accordion (overrides all other if 'children' slot is defined).
+ *
+ * @status stable
+ * @since 1.14.0
+ *
+ * @dependency syn-divider
+ * @dependency syn-icon
+ *
+ * @event syn-show - Emitted when the navigation item:
+ * - has children,
+ * - and is clicked while HTML details are hidden.
+ *
+ * @event syn-hide - Emitted when the navigation item:
+ * - has children,
+ * - and is clicked while HTML details are shown.
+ *
+ * @event syn-blur - Emitted when the button loses focus.
+ * @event syn-focus - Emitted when the button gains focus.
+ *
+ * @slot - The navigation item's label.
+ * @slot prefix - A presentational prefix icon or similar element.
+ * @slot suffix - A presentational suffix icon or similar element.
+ * @slot children - Slot used to provide nested child navigation elements.
+ * If provided, details and summary elements will be used.
+ * A chevron will be shown on the right side regardless of the chevron property.
+ *
+ * @csspart base - The component's base wrapper including children.
+ * @csspart children - The wrapper that holds the children
+ * @csspart content-wrapper - The component's content wrapper.
+ * @csspart content - The component's content excluding children.
+ * @csspart current-indicator - The indicator used when current is set to true
+ * @csspart chevron - The container that wraps the chevron.
+ * @csspart details - The details element rendered when there are children available
+ * @csspart divider - The components optional top divider.
+ * @csspart prefix - The container that wraps the prefix.
+ * @csspart suffix - The container that wraps the suffix.
+ *
+ * @cssproperty --indentation - Numeric value, indicating the level the item is placed at.
+ * @cssproperty --indentation-stepping - The amount of pixels each level will indent.
+ * @cssproperty --display-children - Display property of the children. Defaults to "contents"
+ */
+import { computed, ref } from 'vue';
+import '@synergy-design-system/components/components/nav-item/nav-item.js';
+
+import type { SynShowEvent } from '@synergy-design-system/components';
+import type { SynHideEvent } from '@synergy-design-system/components';
+import type { SynBlurEvent } from '@synergy-design-system/components';
+import type { SynFocusEvent } from '@synergy-design-system/components';
+import type { SynNavItem } from '@synergy-design-system/components';
+
+// DOM Reference to the element
+const nativeElement = ref<SynNavItem>();
+
+defineExpose({
+  nativeElement,
+});
+
+// Map attributes
+const props = defineProps<{
+  /**
+* The navigation item's href target.
+If provided, the navigation item will use an anchor tag otherwise it will use a button tag.
+
+If the 'children' slot is provided, the navigation item will ignore the 'href' and use
+accordion behavior.
+ */
+  href?: SynNavItem['href'];
+
+  /**
+   * Tells the browser where to open the link.
+   * Only used when `href` is present.
+   */
+  target?: SynNavItem['target'];
+
+  /**
+* When using `href`, this attribute will map to the underlying link's `rel` attribute.
+Unlike regular links, the default is `noreferrer noopener` to prevent security exploits.
+
+However, if you're using `target` to point to a specific tab/window,
+this will prevent that from working correctly.
+
+You can remove or change the default value by setting the attribute
+to an empty string or a value of your choice, respectively.
+ */
+  rel?: SynNavItem['rel'];
+
+  current?: SynNavItem['current'];
+
+  /**
+   * Disables the navigation item.
+   */
+  disabled?: SynNavItem['disabled'];
+
+  /**
+   * The navigation item's orientation.
+   */
+  horizontal?: SynNavItem['horizontal'];
+
+  /**
+* Appends a chevron to the right side of a navigation item.
+Only used if `horizontal` is false.
+ */
+  chevron?: SynNavItem['chevron'];
+
+  /**
+* Reflects HTML details element state and allows control from parent.
+Only used if `horizontal` is false and `children` is defined.
+ */
+  open?: SynNavItem['open'];
+
+  /**
+* Toggle to true to show a divider above the element.
+Only available when horizontal is false.
+ */
+  divider?: SynNavItem['divider'];
+}>();
+
+// 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 navigation item: - has children, - and is clicked while HTML details are hidden.
+   */
+  'syn-show': [e: SynShowEvent];
+
+  /**
+   * Emitted when the navigation item: - has children, - and is clicked while HTML details are shown.
+   */
+  'syn-hide': [e: SynHideEvent];
+
+  /**
+   * Emitted when the button loses focus.
+   */
+  'syn-blur': [e: SynBlurEvent];
+
+  /**
+   * Emitted when the button gains focus.
+   */
+  'syn-focus': [e: SynFocusEvent];
+}>();
+</script>
+
+<script lang="ts">
+export type { SynShowEvent } from '@synergy-design-system/components';
+export type { SynHideEvent } from '@synergy-design-system/components';
+export type { SynBlurEvent } from '@synergy-design-system/components';
+export type { SynFocusEvent } from '@synergy-design-system/components';
+</script>
+
+<template>
+  <syn-nav-item
+    @syn-show="$emit('syn-show', $event)"
+    @syn-hide="$emit('syn-hide', $event)"
+    @syn-blur="$emit('syn-blur', $event)"
+    @syn-focus="$emit('syn-focus', $event)"
+    v-bind="visibleProps"
+    ref="nativeElement">
+    <slot></slot>
+  </syn-nav-item>
+</template>

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

@@ -0,0 +1,79 @@
+// ---------------------------------------------------------------------
+// 🔒 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 { SynOptgroup } from '@synergy-design-system/components';
+
+import '@synergy-design-system/components/components/optgroup/optgroup.js';
+
+/**
+ * @summary The <syn-optgroup> element creates a grouping for <syn-option>s within a <syn-select>.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-optgroup--docs
+ * @status stable
+ * @since 1.3.0
+ *
+ * @dependency syn-divider
+ *
+ * @slot - The given options. Must be `<syn-option>` elements.
+ * @slot prefix - A presentational prefix icon or similar element.
+ * @slot label - The label for the optgroup
+ * @slot suffix - A presentational suffix icon or similar element.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart label-container - The container that wraps prefix, label and base
+ * @csspart divider - The divider that is displayed above the content
+ * @csspart prefix - The container that wraps the prefix.
+ * @csspart suffix - The container that wraps the suffix.
+ * @csspart options - The container that wraps the <syn-option> elements.
+ *
+ * @cssproperty --display-divider - Display property of the divider. Defaults to "block"
+ */
+@Component({
+  selector: 'syn-optgroup',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+})
+export class SynOptgroupComponent {
+  public nativeElement: SynOptgroup;
+  private _ngZone: NgZone;
+
+  constructor(e: ElementRef, ngZone: NgZone) {
+    this.nativeElement = e.nativeElement;
+    this._ngZone = ngZone;
+  }
+
+  /**
+   * Disables all options in the optgroup.
+   */
+  @Input()
+  set disabled(v: '' | SynOptgroup['disabled']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.disabled = v === '' || v),
+    );
+  }
+  get disabled(): SynOptgroup['disabled'] {
+    return this.nativeElement.disabled;
+  }
+
+  /**
+   * The optgroups label.
+   * If you need to display HTML, use the `label` slot instead.
+   */
+  @Input()
+  set label(v: SynOptgroup['label']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.label = v));
+  }
+  get label(): SynOptgroup['label'] {
+    return this.nativeElement.label;
+  }
+}