@synergy-design-system/mcp 0.1.0 → 1.0.0

package/metadata/packages/components/components/syn-nav-item/component.angular.ts

@@ -0,0 +1,242 @@
+// ---------------------------------------------------------------------
+// 🔒 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 { SynNavItem } from '@synergy-design-system/components';
+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 '@synergy-design-system/components/components/nav-item/nav-item.js';
+
+/**
+ * @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"
+ */
+@Component({
+  selector: 'syn-nav-item',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+})
+export class SynNavItemComponent {
+  public nativeElement: SynNavItem;
+  private _ngZone: NgZone;
+
+  constructor(e: ElementRef, ngZone: NgZone) {
+    this.nativeElement = e.nativeElement;
+    this._ngZone = ngZone;
+    this.nativeElement.addEventListener('syn-show', (e: SynShowEvent) => {
+      this.synShowEvent.emit(e);
+    });
+    this.nativeElement.addEventListener('syn-hide', (e: SynHideEvent) => {
+      this.synHideEvent.emit(e);
+    });
+    this.nativeElement.addEventListener('syn-blur', (e: SynBlurEvent) => {
+      this.synBlurEvent.emit(e);
+    });
+    this.nativeElement.addEventListener('syn-focus', (e: SynFocusEvent) => {
+      this.synFocusEvent.emit(e);
+    });
+  }
+
+  /**
+* 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.
+ */
+  @Input()
+  set href(v: SynNavItem['href']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.href = v));
+  }
+  get href(): SynNavItem['href'] {
+    return this.nativeElement.href;
+  }
+
+  /**
+   * Tells the browser where to open the link.
+   * Only used when `href` is present.
+   */
+  @Input()
+  set target(v: SynNavItem['target']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.target = v));
+  }
+  get target(): SynNavItem['target'] {
+    return this.nativeElement.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.
+ */
+  @Input()
+  set rel(v: SynNavItem['rel']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.rel = v));
+  }
+  get rel(): SynNavItem['rel'] {
+    return this.nativeElement.rel;
+  }
+
+  @Input()
+  set current(v: '' | SynNavItem['current']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.current = v === '' || v),
+    );
+  }
+  get current(): SynNavItem['current'] {
+    return this.nativeElement.current;
+  }
+
+  /**
+   * Disables the navigation item.
+   */
+  @Input()
+  set disabled(v: '' | SynNavItem['disabled']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.disabled = v === '' || v),
+    );
+  }
+  get disabled(): SynNavItem['disabled'] {
+    return this.nativeElement.disabled;
+  }
+
+  /**
+   * The navigation item's orientation.
+   */
+  @Input()
+  set horizontal(v: '' | SynNavItem['horizontal']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.horizontal = v === '' || v),
+    );
+  }
+  get horizontal(): SynNavItem['horizontal'] {
+    return this.nativeElement.horizontal;
+  }
+
+  /**
+* Appends a chevron to the right side of a navigation item.
+Only used if `horizontal` is false.
+ */
+  @Input()
+  set chevron(v: '' | SynNavItem['chevron']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.chevron = v === '' || v),
+    );
+  }
+  get chevron(): SynNavItem['chevron'] {
+    return this.nativeElement.chevron;
+  }
+
+  /**
+* Reflects HTML details element state and allows control from parent.
+Only used if `horizontal` is false and `children` is defined.
+ */
+  @Input()
+  set open(v: '' | SynNavItem['open']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.open = v === '' || v),
+    );
+  }
+  get open(): SynNavItem['open'] {
+    return this.nativeElement.open;
+  }
+
+  /**
+* Toggle to true to show a divider above the element.
+Only available when horizontal is false.
+ */
+  @Input()
+  set divider(v: '' | SynNavItem['divider']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.divider = v === '' || v),
+    );
+  }
+  get divider(): SynNavItem['divider'] {
+    return this.nativeElement.divider;
+  }
+
+  /**
+   * Emitted when the navigation item: - has children, - and is clicked while HTML details are hidden.
+   */
+  @Output() synShowEvent = new EventEmitter<SynShowEvent>();
+
+  /**
+   * Emitted when the navigation item: - has children, - and is clicked while HTML details are shown.
+   */
+  @Output() synHideEvent = new EventEmitter<SynHideEvent>();
+
+  /**
+   * Emitted when the button loses focus.
+   */
+  @Output() synBlurEvent = new EventEmitter<SynBlurEvent>();
+
+  /**
+   * Emitted when the button gains focus.
+   */
+  @Output() synFocusEvent = new EventEmitter<SynFocusEvent>();
+}
+
+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/metadata/packages/components/components/syn-nav-item/component.react.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/metadata/packages/components/components/syn-nav-item/component.styles.ts

@@ -0,0 +1,337 @@
+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-color-neutral-950);
+    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-color-neutral-600);
+    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: 0.11;
+  }
+
+  /**
+   * 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 {
+    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.current-indicator--disabled {
+    background: var(--syn-color-neutral-500);
+  }
+
+  .current-indicator--visible {
+    background: var(--syn-color-primary-600);
+  }
+
+  .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 {
+    --color: var(--syn-color-neutral-200);
+
+    left: var(--syn-spacing-medium);
+    margin: 0;
+    position: absolute;
+    right: var(--syn-spacing-medium);
+    top: 0;
+    transition: border var(--syn-transition-fast) ease-in-out;
+  }
+
+  /**
+   * Hide the divider for active elements
+   */
+  .nav-item:focus-visible .divider {
+    --color: transparent;
+  }
+
+  /**
+   * Make sure the divider is not visible anymore when hovering
+   */
+  .nav-item:not(.nav-item--disabled):hover .divider {
+    --color: transparent;
+  }
+
+  /**
+   * Sub menu styling
+   */
+  summary.nav-item {
+    box-sizing: border-box;
+    display: flex;
+  }
+
+  details summary::-webkit-details-marker {
+    visibility: hidden;
+  }
+
+  .children {
+    display: var(--display-children)
+  }
+`;