@synergy-design-system/mcp 0.1.0 → 1.0.0

package/metadata/packages/components/components/syn-popup/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 Popup is a utility that lets you declaratively anchor "popup" containers to another element.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-popup--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @event syn-reposition - Emitted when the popup is repositioned. This event can fire a lot, so avoid putting expensive
+ *  operations in your listener or consider debouncing it.
+ *
+ * @slot - The popup's content.
+ * @slot anchor - The element the popup will be anchored to. If the anchor lives outside of the popup, you can use the
+ *  `anchor` attribute or property instead.
+ *
+ * @csspart arrow - The arrow's container. Avoid setting `top|bottom|left|right` properties, as these values are
+ *  assigned dynamically as the popup moves. This is most useful for applying a background color to match the popup, and
+ *  maybe a border or box shadow.
+ * @csspart popup - The popup's container. Useful for setting a background color, box shadow, etc.
+ * @csspart hover-bridge - The hover bridge element. Only available when the `hover-bridge` option is enabled.
+ *
+ * @cssproperty [--arrow-size=6px] - The size of the arrow. Note that an arrow won't be shown unless the `arrow`
+ *  attribute is used.
+ * @cssproperty [--arrow-color=var(--syn-color-neutral-0)] - The color of the arrow.
+ * @cssproperty [--auto-size-available-width] - A read-only custom property that determines the amount of width the
+ *  popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only
+ *  available when using `auto-size`.
+ * @cssproperty [--auto-size-available-height] - A read-only custom property that determines the amount of height the
+ *  popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only
+ *  available when using `auto-size`.
+ */
+import { computed, ref } from 'vue';
+import '@synergy-design-system/components/components/popup/popup.js';
+
+import type { SynRepositionEvent } from '@synergy-design-system/components';
+import type { SynPopup } from '@synergy-design-system/components';
+
+// DOM Reference to the element
+const nativeElement = ref<SynPopup>();
+
+defineExpose({
+  nativeElement,
+});
+
+// Map attributes
+const props = defineProps<{
+  /**
+* The element the popup will be anchored to.
+* If the anchor lives outside of the popup, you can provide the anchor
+element `id`, a DOM element reference, or a `VirtualElement`.
+* If the anchor lives inside the popup, use the
+`anchor` slot instead.
+ */
+  anchor?: SynPopup['anchor'];
+
+  /**
+* Activates the positioning logic and shows the popup.
+* When this attribute is removed, the positioning logic is torn
+down and the popup will be hidden.
+ */
+  active?: SynPopup['active'];
+
+  /**
+* The preferred placement of the popup.
+* Note that the actual placement will vary as configured to keep the
+panel inside of the viewport.
+ */
+  placement?: SynPopup['placement'];
+
+  /**
+* Determines how the popup is positioned.
+* The `absolute` strategy works well in most cases, but if overflow is
+clipped, using a `fixed` position strategy can often workaround it.
+ */
+  strategy?: SynPopup['strategy'];
+
+  /**
+   * The distance in pixels from which to offset the panel away from its anchor.
+   */
+  distance?: SynPopup['distance'];
+
+  /**
+   * The distance in pixels from which to offset the panel along its anchor.
+   */
+  skidding?: SynPopup['skidding'];
+
+  /**
+* Attaches an arrow to the popup.
+* The arrow's size and color can be customized using the `--arrow-size` and
+`--arrow-color` custom properties.
+* For additional customizations, you can also target the arrow using
+`::part(arrow)` in your stylesheet.
+ */
+  arrow?: SynPopup['arrow'];
+
+  /**
+* The placement of the arrow.
+* The default is `anchor`, which will align the arrow as close to the center of the
+anchor as possible, considering available space and `arrow-padding`.
+* A value of `start`, `end`, or `center` will
+align the arrow to the start, end, or center of the popover instead.
+ */
+  arrowPlacement?: SynPopup['arrowPlacement'];
+
+  /**
+* The amount of padding between the arrow and the edges of the popup.
+* If the popup has a border-radius, for example,
+this will prevent it from overflowing the corners.
+ */
+  arrowPadding?: SynPopup['arrowPadding'];
+
+  /**
+* When set, placement of the popup will flip to the opposite site to keep it in view.
+* You can use
+`flipFallbackPlacements` to further configure how the fallback placement is determined.
+ */
+  flip?: SynPopup['flip'];
+
+  /**
+* If the preferred placement doesn't fit, popup will be tested in these fallback placements until one fits.
+* Must be a
+string of any number of placements separated by a space, e.g.
+* "top bottom left".
+* If no placement fits, the flip
+fallback strategy will be used instead.
+ */
+  flipFallbackPlacements?: SynPopup['flipFallbackPlacements'];
+
+  /**
+* When neither the preferred placement nor the fallback placements fit, this value will be used to determine whether
+the popup should be positioned using the best available fit based on available space or as it was initially
+preferred.
+ */
+  flipFallbackStrategy?: SynPopup['flipFallbackStrategy'];
+
+  /**
+* The flip boundary describes clipping element(s) that overflow will be checked relative to when flipping.
+* By
+default, the boundary includes overflow ancestors that will cause the element to be clipped.
+* If needed, you can
+change the boundary by passing a reference to one or more elements to this property.
+ */
+  flipBoundary?: SynPopup['flipBoundary'];
+
+  /**
+   * The amount of padding, in pixels, to exceed before the flip behavior will occur.
+   */
+  flipPadding?: SynPopup['flipPadding'];
+
+  /**
+   * Moves the popup along the axis to keep it in view when clipped.
+   */
+  shift?: SynPopup['shift'];
+
+  /**
+* The shift boundary describes clipping element(s) that overflow will be checked relative to when shifting.
+* By
+default, the boundary includes overflow ancestors that will cause the element to be clipped.
+* If needed, you can
+change the boundary by passing a reference to one or more elements to this property.
+ */
+  shiftBoundary?: SynPopup['shiftBoundary'];
+
+  /**
+   * The amount of padding, in pixels, to exceed before the shift behavior will occur.
+   */
+  shiftPadding?: SynPopup['shiftPadding'];
+
+  /**
+   * When set, this will cause the popup to automatically resize itself to prevent it from overflowing.
+   */
+  autoSize?: SynPopup['autoSize'];
+
+  /**
+   * Syncs the popup's width or height to that of the anchor element.
+   */
+  sync?: SynPopup['sync'];
+
+  /**
+* The auto-size boundary describes clipping element(s) that overflow will be checked relative to when resizing.
+* By
+default, the boundary includes overflow ancestors that will cause the element to be clipped.
+* If needed, you can
+change the boundary by passing a reference to one or more elements to this property.
+ */
+  autoSizeBoundary?: SynPopup['autoSizeBoundary'];
+
+  /**
+   * The amount of padding, in pixels, to exceed before the auto-size behavior will occur.
+   */
+  autoSizePadding?: SynPopup['autoSizePadding'];
+
+  /**
+* When a gap exists between the anchor and the popup element, this option will add a "hover bridge" that fills the
+gap using an invisible element.
+* This makes listening for events such as `mouseenter` and `mouseleave` more sane
+because the pointer never technically leaves the element.
+* The hover bridge will only be drawn when the popover is
+active.
+ */
+  hoverBridge?: SynPopup['hoverBridge'];
+}>();
+
+// 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 popup is repositioned.
+   * This event can fire a lot, so avoid putting expensive operations in your listener or consider debouncing it.
+   */
+  'syn-reposition': [e: SynRepositionEvent];
+}>();
+</script>
+
+<script lang="ts">
+export type { SynRepositionEvent } from '@synergy-design-system/components';
+</script>
+
+<template>
+  <syn-popup
+    @syn-reposition="$emit('syn-reposition', $event)"
+    v-bind="visibleProps"
+    ref="nativeElement">
+    <slot></slot>
+  </syn-popup>
+</template>

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

@@ -0,0 +1,67 @@
+// ---------------------------------------------------------------------
+// 🔒 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 { SynPrioNav } from '@synergy-design-system/components';
+
+import '@synergy-design-system/components/components/prio-nav/prio-nav.js';
+
+/**
+ * @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.
+ *
+ */
+@Component({
+  selector: 'syn-prio-nav',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+})
+export class SynPrioNavComponent {
+  public nativeElement: SynPrioNav;
+  private _ngZone: NgZone;
+
+  constructor(e: ElementRef, ngZone: NgZone) {
+    this.nativeElement = e.nativeElement;
+    this._ngZone = ngZone;
+  }
+}

package/metadata/packages/components/components/syn-prio-nav/component.react.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/metadata/packages/components/components/syn-prio-nav/component.styles.ts

@@ -0,0 +1,48 @@
+import { css } from 'lit';
+
+export default css`
+  :host {
+    display: block;
+
+    /**
+     * Needed because the positioning of the priority menu is absolute
+     */
+    position: relative !important;
+  }
+
+  .horizontal-nav {
+    display: flex;
+    flex: 1;
+    gap: var(--syn-spacing-large);
+  }
+
+  /**
+   * Priority Menu adjustments
+   */
+  .priority-menu--hidden {
+    visibility: hidden;
+  }
+
+  .priority-menu__label {
+    display: none;
+  }
+
+  .priority-menu__label--visible {
+    display: block;
+  }
+
+  /**
+   * Make the available small click area accessible by adding paddings
+   */
+  .priority-menu--has-visible-items .priority-menu__icon {
+    padding-left: var(--syn-spacing-small);
+    padding-right: var(--syn-spacing-small);
+  }
+
+  /**
+   * Remove the margin from the content container if it is not visible
+   */
+  .priority-menu--has-visible-items .priority-menu__nav-item::part(content-container) {
+    margin-inline-start: 0;
+  }
+`;

package/metadata/packages/components/components/syn-prio-nav/component.ts

@@ -0,0 +1,287 @@
+/* eslint-disable no-param-reassign */
+import type { CSSResultGroup } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { html } from 'lit/static-html.js';
+import { query, state } from 'lit/decorators.js';
+import componentStyles from '../../styles/component.styles.js';
+import SynergyElement from '../../internal/synergy-element.js';
+import styles from './prio-nav.styles.js';
+import SynDropdown from '../dropdown/dropdown.component.js';
+import SynIcon from '../icon/icon.component.js';
+import SynMenu from '../menu/menu.component.js';
+import SynNavItem from '../nav-item/nav-item.component.js';
+import { LocalizeController } from '../../utilities/localize.js';
+import {
+  filterOnlyNavItems,
+  getAssignedElementsForSlot,
+  hideNavigationItem,
+  showNavigationItem,
+} from './utils.js';
+
+/**
+ * @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 default class SynPrioNav extends SynergyElement {
+  static styles: CSSResultGroup = [componentStyles, styles];
+
+  static dependencies = {
+    'syn-dropdown': SynDropdown,
+    'syn-icon': SynIcon,
+    'syn-menu': SynMenu,
+    'syn-nav-item': SynNavItem,
+  };
+
+  /**
+   * Internal resize observer
+   */
+  private resizeObserver: ResizeObserver;
+
+  private readonly localize = new LocalizeController(this);
+
+  /**
+   * Reference to the rendered children slot
+   */
+  @query('slot:not([name])') private defaultSlot: HTMLSlotElement;
+
+  /**
+   * Reference to the slot where priority menu items are placed
+   */
+  @query('slot[name=menu]') private menuSlot: HTMLSlotElement;
+
+  /**
+   * The wrapper that holds the horizontal navigation items
+   */
+  @query('.horizontal-nav') private horizontalNav: HTMLDivElement;
+
+  /**
+   * The priority menu dropdown
+   */
+  @query('.priority-menu') private priorityMenu: SynDropdown;
+
+  /**
+   * Internal state reflecting if the item positions have been cached
+   */
+  @state() private itemPositionsCached = false;
+
+  /**
+   * The amount of nav items that are currently slotted
+   */
+  @state() private amountOfNavItems = 0;
+
+  /**
+   * The amount of items that are currently visible
+   */
+  @state() private amountOfVisibleItems = 0;
+
+  /**
+   * Internal state reflecting if there are items in the priority menu
+   */
+  @state() private hasItemsInDropdown = false;
+
+  /**
+   * Get a list of all slotted `<syn-nav-item />` elements
+   * that are either in the main slot or the priority menu slot
+   */
+  private getSlottedNavItems() {
+    const navItemsInDefaultSlot = filterOnlyNavItems(getAssignedElementsForSlot(this.defaultSlot));
+    const navItemsInMenuSlot = filterOnlyNavItems(getAssignedElementsForSlot(this.menuSlot));
+    return navItemsInDefaultSlot.concat(navItemsInMenuSlot);
+  }
+
+  /**
+   * Cache the items right offset position to make faster checks placement into priority menu
+   * @param items The items to cache the position for
+   */
+  private cacheItemPositions(items: SynNavItem[]) {
+    const { left } = this.horizontalNav.getBoundingClientRect();
+    items.forEach(item => {
+      // We have to measure while the items are in the primary slot,
+      // else we will just get the placement in the priority menu
+      item.removeAttribute('slot');
+      const { right } = item.getBoundingClientRect();
+      // We also need to consider the location of the parent
+      item.dataset.right = (right - left).toString();
+    });
+
+    this.itemPositionsCached = true;
+  }
+
+  /**
+   * Determines which items should be shown or hidden, depending on the current width
+   */
+  private handlePriorityMenu() {
+    const navItems = this.getSlottedNavItems();
+
+    if (!this.itemPositionsCached) {
+      this.cacheItemPositions(navItems);
+    }
+
+    // Get the widths of the horizontal nav and the priority menu
+    // We subtract the width of the priority menu to get the final width
+    const { width } = this.horizontalNav.getBoundingClientRect();
+
+    // #651: Do not take the size of the priority menu
+    // into account when it is hidden
+    const reservedPrioMenuSize = this.priorityMenu.classList.contains('priority-menu--hidden')
+      ? 0
+      : this.priorityMenu.clientWidth;
+
+    const finalWidth = width - reservedPrioMenuSize;
+
+    // Cache the first item that should be hidden
+    let firstHiddenItemRightPos: number | undefined;
+
+    // Cache the last item so we can decide to use the finalWidth or just the width
+    // later on. This is needed as otherwise the last item will be hidden when using finalWidth
+    const lastNavItem = navItems.at(-1);
+
+    const itemVisibilities = navItems.map(item => {
+      const measureWidth = item === lastNavItem ? width : finalWidth;
+      const isHidden = !!(
+        firstHiddenItemRightPos
+        || parseFloat(item.dataset.right!) > measureWidth
+      );
+
+      // Get the position of the first item
+      // Will get used to position the priority menu
+      if (isHidden && !firstHiddenItemRightPos) {
+        firstHiddenItemRightPos = parseFloat(item.dataset.right!);
+      }
+
+      return {
+        isHidden,
+        item,
+      };
+    });
+
+    const visibleItems = itemVisibilities.filter(({ isHidden }) => !isHidden).length;
+    const hasOnlyOneItem = visibleItems === 1;
+
+    // Finally, hide or show the items based on the visibility
+    // As requested in #410, we hide all items if there is only one item
+    itemVisibilities.forEach(({ item, isHidden }) => {
+      if (isHidden || hasOnlyOneItem) {
+        hideNavigationItem(item);
+      } else {
+        showNavigationItem(item);
+      }
+    });
+
+    // Tell the render call that we have items in the priority menu
+    // and toggle the visibility of the priority menu label
+    this.hasItemsInDropdown = visibleItems !== navItems.length;
+    this.amountOfVisibleItems = hasOnlyOneItem ? 0 : visibleItems;
+  }
+
+  private renderPriorityMenu() {
+    return html`
+      <syn-dropdown
+        class=${classMap({
+          'priority-menu': true,
+          'priority-menu--has-visible-items': this.amountOfVisibleItems !== 0,
+          'priority-menu--hidden': !this.hasItemsInDropdown,
+        })}
+        part="priority-menu"
+        placement="bottom-end"
+      >
+        <syn-nav-item class="priority-menu__nav-item" slot="trigger" horizontal part="priority-menu-nav-item">
+          <syn-icon 
+            class="priority-menu__icon"
+            label="More"
+            library="system"
+            name="more"
+            part="priority-menu-icon"
+            slot="prefix"
+          >
+          </syn-icon>
+          <span
+            class=${classMap({
+              'priority-menu__label': true,
+              'priority-menu__label--visible': this.amountOfVisibleItems === 0,
+            })}
+            part="priority-menu-label"
+          >
+            ${this.localize.term('menu')}
+          </span>
+        </syn-nav-item>
+
+        <syn-menu part="priority-menu-container">
+          <slot name="menu"></slot>
+        </syn-menu>
+
+      </syn-dropdown>
+    `;
+  }
+
+  private slotChange() {
+    const slottedItems = this.getSlottedNavItems();
+
+    // Make sure to trigger a recalculation of the item positions if we a new list of slotted items
+    if (slottedItems.length !== this.amountOfNavItems) {
+      this.cacheItemPositions(slottedItems);
+      this.handlePriorityMenu();
+      this.amountOfNavItems = slottedItems.length;
+    }
+  }
+
+  protected firstUpdated() {
+    // Cache the original role of the items so we can reset it if needed.
+    this.getSlottedNavItems().forEach(item => {
+      item.dataset.originalRole = item.getAttribute('role') ?? '';
+    });
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.resizeObserver = new ResizeObserver(() => this.handlePriorityMenu());
+    this.resizeObserver.observe(this);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.resizeObserver.unobserve(this);
+  }
+
+  render() {
+    /* eslint-disable @typescript-eslint/unbound-method */
+    return html`
+      <nav class="horizontal-nav" part="base">
+        <slot @slotchange=${this.slotChange}></slot>
+        ${this.renderPriorityMenu()}
+      </nav>
+    `;
+    /* eslint-enable @typescript-eslint/unbound-method */
+  }
+}