@synergy-design-system/mcp 2.14.1 → 3.0.0

package/metadata/packages/components/components/syn-popup/component.vue

@@ -1,233 +0,0 @@
-<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'];
-
-  /**
-   * 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

@@ -1,67 +0,0 @@
-// ---------------------------------------------------------------------
-// 🔒 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

@@ -1,54 +0,0 @@
-// ---------------------------------------------------------------------
-// 🔒 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

@@ -1,48 +0,0 @@
-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

@@ -1,288 +0,0 @@
-/* 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;
-    // #1195 - If there are more than 1 item but only 1 is visible, we also want to hide that one item and show it in the priority menu. If there is only 1 item total, we just show that one item and hide the priority menu
-    const hasOnlyOneItem = (visibleItems === 1 && navItems.length > 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 */
-  }
-}