@synergy-design-system/mcp 2.14.1 → 3.0.0

package/metadata/packages/components/components/syn-header/component.ts

@@ -1,310 +0,0 @@
-import { classMap } from 'lit/directives/class-map.js';
-import { html } from 'lit/static-html.js';
-import { property, query, state } from 'lit/decorators.js';
-import type { CSSResultGroup } from 'lit';
-import SynergyElement from '../../internal/synergy-element.js';
-import { HasSlotController } from '../../internal/slot.js';
-import componentStyles from '../../styles/component.styles.js';
-import styles from './header.styles.js';
-import SynIcon from '../icon/icon.js';
-import type SynSideNav from '../side-nav/side-nav.component.js';
-import { LocalizeController } from '../../utilities/localize.js';
-import { watch } from '../../internal/watch.js';
-import type SynDivider from '../divider/divider.component.js';
-
-/**
- * @summary The <syn-header /> element provides a generic application header
- * that can be used to add applications name, toolbar and primary navigation.
- *
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-header--docs
- * @status stable
- * @since 1.10.0
- *
- * @slot label - The label for the header
- * @slot logo - The logo that should be displayed. Will fall back to the SICK logo if not provided
- * @slot meta-navigation - The meta-navigation is used to add various application toolbar icons
- *                     Best used with `<syn-icon-button />` and `<syn-drop-down />`
- * @slot navigation - This slot can be used to add an optional horizontal navigation
- * @slot open-burger-menu-icon - An icon to use in lieu of the default burger-menu=open state.
- *                      The default close icon is a 'x'.
- * @slot closed-burger-menu-icon - An icon to use in lieu of the default burger-menu=closed state.
- *                      The default open icon is a burger menu.
- *
- * @event syn-burger-menu-closed - Emitted when the burger menu is toggled to closed
- * @event syn-burger-menu-hidden - Emitted when the burger menu is toggled to hidden
- * @event syn-burger-menu-open - Emitted when the burger menu is toggled to open
- *
- * @csspart base - The component's base wrapper
- * @csspart content - The wrapper most content items reside
- * @csspart logo - The wrapper the application logo resides in
- * @csspart label - The element wrapping the application name
- * @csspart meta-navigation - The Item wrapping the optional application menu
- * @csspart navigation - The wrapper that is holding the optional top navigation section
- * @csspart burger-menu-toggle-button - The button that toggles the burger menu
- *
- * @cssproperty --sticky-position - The position of the sticky header from the top of the viewport. Defaults to the top of the screen.
- * @cssproperty --metanavigation-item-size - The size of the items in the meta navigation. Also used for the height of dividers in the meta navigation. Defaults to var(--syn-font-size-x-large)
- */
-export default class SynHeader extends SynergyElement {
-  static styles: CSSResultGroup = [
-    componentStyles,
-    styles,
-  ];
-
-  static dependencies = {
-    'syn-icon': SynIcon,
-  };
-
-  private readonly hasSlotController = new HasSlotController(this, '[default]', 'logo', 'label', 'meta-navigation', 'navigation');
-
-  private readonly localize = new LocalizeController(this);
-
-  /**
-   * Internal mutation observer
-   */
-  private mutationObserver: MutationObserver;
-
-  /*
-   * #587: If the side nav is animating, we should not allow to trigger the burger menu
-   */
-  private isSideNavAnimating = false;
-
-  @query('slot[name="meta-navigation"]') private metaNavigationSlot: HTMLSlotElement;
-
-  /**
-   * The headers label. If you need to display HTML, use the `label` slot instead.
-   */
-  @property() label = '';
-
-  /**
-   * Defines the current visibility and icon of the burger-menu icon.
-   * The menu button is added automatically if the component finds a syn-side-nav in
-   * variant="default".
-   * The following values can be used:
-   * - hidden: The burger menu is not visible
-   * - open: The burger menu is visible and shows the close icon
-   * - closed: The burger menu is visible and shows the open icon
-   */
-  @property({ attribute: 'burger-menu', reflect: true }) burgerMenu: 'hidden' | 'open' | 'closed' = 'hidden';
-
-  /**
-   * Makes the header stick to the top of the viewport when scrolling.
-   * Also applies a shadow to the header when scrolling.
-   */
-  @property({ reflect: true, type: Boolean }) sticky = false;
-
-  /**
-   * The side nav
-   */
-  @state() private sideNav: SynSideNav | null;
-
-  private toggleBurgerMenu() {
-    switch (this.burgerMenu) {
-      case 'closed': this.burgerMenu = 'open'; break;
-      case 'open': this.burgerMenu = 'closed'; break;
-      default: break;
-    }
-  }
-
-  private handleBurgerMenuToggle() {
-    // If there is a side-nav in variant="default", toggle the open state!
-    if (this.sideNav && this.sideNav.variant === 'default' && !this.isSideNavAnimating) {
-      this.sideNav.open = !this.sideNav.open;
-    }
-    if (!this.isSideNavAnimating) {
-      this.toggleBurgerMenu();
-    }
-  }
-
-  /**
-   * Automatically update the burger menu icon based
-   * on the state of the side-nav, if one is connected.
-   */
-  private updateBurgerMenuBasedOnSideNav() {
-    if (this.sideNav) {
-      // Hide the burger menu icon if the side-nav is not variant="default"
-      if (this.sideNav.variant !== 'default') {
-        this.burgerMenu = 'hidden';
-      } else {
-        this.burgerMenu = this.sideNav.open ? 'open' : 'closed';
-      }
-    }
-  }
-
-  /**
-   * #1130: Automatically set the correct styles for vertical syn-dividers in the meta navigation.
-   * Dividers may be slotted directly in the meta navigation or be nested in another element, e.g. a wrapper for the meta navigation.
-   * Horizontal dividers are not supported in the meta navigation and we don't want to override any styles for them that might be set by the user.
-   */
-  private updateMetaNavigation() {
-    const foundDividers: SynDivider[] = [];
-    this.metaNavigationSlot
-      // Get all slotted children.
-      // Needed because we may also have dividers in a wrapper that is used for the meta navigation
-      .assignedElements({ flatten: true })
-      .forEach(el => {
-        if (el.tagName.toLowerCase() === 'syn-divider') {
-          foundDividers.push(el as SynDivider);
-        } else {
-          const directChildDividers = el.querySelectorAll<SynDivider>(':scope > syn-divider');
-          if (directChildDividers.length) {
-            foundDividers.push(...directChildDividers);
-          }
-        }
-      });
-
-    // Set the correct styles for the found dividers
-    // - --spacing: var(--syn-spacing-x-small) makes the spacing slightly narrower,
-    // - align-self: center makes sure the divider is centered in the meta navigation,
-    // - height: var(--metanavigation-item-size) makes sure the divider has the same height as the other items in the meta navigation.
-    // We use this approach as it is faster than 3 separate style changes and we can be sure to not override any other styles that might be set on the divider.
-    const cssText = '--spacing: var(--syn-spacing-x-small); align-self: center; display: flex; height: var(--metanavigation-item-size);';
-
-    foundDividers
-      .filter(divider => divider.hasAttribute('vertical'))
-      .forEach(divider => {
-        // eslint-disable-next-line no-param-reassign
-        divider.style.cssText += cssText;
-      });
-  }
-
-  @watch('burgerMenu', { waitUntilFirstUpdate: true })
-  handleBurgerMenu() {
-    const myEvt: keyof GlobalEventHandlersEventMap = `syn-burger-menu-${this.burgerMenu}`;
-    this.emit(myEvt);
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-
-    this.mutationObserver = new MutationObserver(() => this.updateBurgerMenuBasedOnSideNav());
-  }
-
-  firstUpdated() {
-    // Search for a side-nav and use the first found in case of the connectSideNavigation method
-    // is not used by the user.
-    // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    this.updateComplete.then(() => {
-      const sideNav = document.querySelector('syn-side-nav');
-      this.connectSideNavigation(sideNav);
-    });
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-
-    //  Remove observer
-    this.mutationObserver.disconnect();
-  }
-
-  /**
-   * Connect a `syn-side-nav` to add automatic interaction of the header with the side navigation
-   * like showing the burger menu icon and open / close handling.
-   *
-   * If no side navigation is connected, the header will use the first `syn-side-nav` element it
-   * finds.
-   *
-   * @param sideNav The side navigation to connect to the header
-   */
-  connectSideNavigation(sideNav: SynSideNav | null) {
-    this.mutationObserver.disconnect();
-
-    this.sideNav = sideNav || document.querySelector('syn-side-nav');
-    if (this.sideNav) {
-      // Need to call the method initially, if the side-nav is not open on connect time.
-      // Otherwise the mutation observer won`t trigger the method.
-      this.updateBurgerMenuBasedOnSideNav();
-      this.mutationObserver.observe(this.sideNav, { attributeFilter: ['open', 'variant'], attributes: true });
-
-      // #587: Make sure to not trigger the burger menu if the side nav is currently
-      // animating and the user clicks on the burger menu button.
-
-      // #921: Make sure to only trigger this if the source of the element is the side nav.
-      // This is because syn-nav-item also triggers show and hide events when opened or closed.
-      const isAnimating = (e: Event) => {
-        if (e.target !== this.sideNav) {
-          return;
-        }
-        this.isSideNavAnimating = true;
-      };
-
-      const isNotAnimating = (e: Event) => {
-        if (e.target !== this.sideNav) {
-          return;
-        }
-        this.isSideNavAnimating = false;
-      };
-
-      this.sideNav.addEventListener('syn-show', isAnimating);
-      this.sideNav.addEventListener('syn-hide', isAnimating);
-      this.sideNav.addEventListener('syn-after-show', isNotAnimating);
-      this.sideNav.addEventListener('syn-after-hide', isNotAnimating);
-    }
-  }
-
-  render() {
-    /* eslint-disable @typescript-eslint/unbound-method */
-    const hasNavigation = this.hasSlotController.test('navigation');
-    const showBurgerMenu = this.burgerMenu !== 'hidden';
-    return html`
-      <header
-        class=${classMap({
-          header: true,
-          'header--has-burger-menu': showBurgerMenu,
-          'header--has-navigation': hasNavigation,
-        })}
-        part="base"
-      >
-        <!-- .header__content -->
-        <div part="content" class="header__content">
-
-          ${showBurgerMenu
-              ? html`
-                  <button
-                    aria-label=${this.localize.term(this.burgerMenu === 'closed' ? 'openMenu' : 'closeMenu')}
-                    class="header__burger-menu-toggle"
-                    @click=${this.handleBurgerMenuToggle}
-                    part="burger-menu-toggle-button"
-                    type="button"
-                  >
-                    ${this.burgerMenu === 'open'
-                      ? html`
-                          <slot name="open-burger-menu-icon">
-                            <syn-icon name="x-lg" library="system"></syn-icon>
-                          </slot>
-                        `
-                      : html`
-                          <slot name="closed-burger-menu-icon">
-                            <syn-icon name="menu" library="system"></syn-icon>
-                          </slot>
-                        `}
-                  </button>
-                `
-              : ''}
-
-          <div part="logo" class="header__logo">
-            <slot name="logo">
-              <syn-icon name="logo-color" library="system" label="SICK Sensor Intelligence"></syn-icon>
-            </slot>
-          </div>
-
-          <div part="label" class="header__label">
-            <slot name="label">
-              ${this.label}
-            </slot>
-          </div>
-
-          <div part="meta-navigation" class="header__meta-navigation">
-            <slot @slotchange=${this.updateMetaNavigation} name="meta-navigation"></slot>
-          </div>
-        </div>
-        <!-- /.header__content -->
-
-        <div part="navigation" class="header__navigation">
-          <slot name="navigation"></slot>
-        </div>
-      </header>
-    `;
-    /* eslint-enable @typescript-eslint/unbound-method */
-  }
-}

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

@@ -1,126 +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 The <syn-header /> element provides a generic application header
- * that can be used to add applications name, toolbar and primary navigation.
- *
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-header--docs
- * @status stable
- * @since 1.10.0
- *
- * @slot label - The label for the header
- * @slot logo - The logo that should be displayed. Will fall back to the SICK logo if not provided
- * @slot meta-navigation - The meta-navigation is used to add various application toolbar icons
- *                     Best used with `<syn-icon-button />` and `<syn-drop-down />`
- * @slot navigation - This slot can be used to add an optional horizontal navigation
- * @slot open-burger-menu-icon - An icon to use in lieu of the default burger-menu=open state.
- *                      The default close icon is a 'x'.
- * @slot closed-burger-menu-icon - An icon to use in lieu of the default burger-menu=closed state.
- *                      The default open icon is a burger menu.
- *
- * @event syn-burger-menu-closed - Emitted when the burger menu is toggled to closed
- * @event syn-burger-menu-hidden - Emitted when the burger menu is toggled to hidden
- * @event syn-burger-menu-open - Emitted when the burger menu is toggled to open
- *
- * @csspart base - The component's base wrapper
- * @csspart content - The wrapper most content items reside
- * @csspart logo - The wrapper the application logo resides in
- * @csspart label - The element wrapping the application name
- * @csspart meta-navigation - The Item wrapping the optional application menu
- * @csspart navigation - The wrapper that is holding the optional top navigation section
- * @csspart burger-menu-toggle-button - The button that toggles the burger menu
- *
- * @cssproperty --sticky-position - The position of the sticky header from the top of the viewport. Defaults to the top of the screen.
- * @cssproperty --metanavigation-item-size - The size of the items in the meta navigation. Also used for the height of dividers in the meta navigation. Defaults to var(--syn-font-size-x-large)
- */
-import { computed, ref } from 'vue';
-import '@synergy-design-system/components/components/header/header.js';
-
-import type { SynBurgerMenuClosedEvent } from '@synergy-design-system/components';
-import type { SynBurgerMenuHiddenEvent } from '@synergy-design-system/components';
-import type { SynBurgerMenuOpenEvent } from '@synergy-design-system/components';
-import type { SynHeader } from '@synergy-design-system/components';
-
-// DOM Reference to the element
-const nativeElement = ref<SynHeader>();
-
-defineExpose({
-  nativeElement,
-});
-
-// Map attributes
-const props = defineProps<{
-  /**
-   * The headers label.
-   * If you need to display HTML, use the `label` slot instead.
-   */
-  label?: SynHeader['label'];
-
-  /**
-* Defines the current visibility and icon of the burger-menu icon.
-The menu button is added automatically if the component finds a syn-side-nav in
-variant="default".
-The following values can be used:
-- hidden: The burger menu is not visible
-- open: The burger menu is visible and shows the close icon
-- closed: The burger menu is visible and shows the open icon
- */
-  burgerMenu?: SynHeader['burgerMenu'];
-
-  /**
-* Makes the header stick to the top of the viewport when scrolling.
-Also applies a shadow to the header when scrolling.
- */
-  sticky?: SynHeader['sticky'];
-}>();
-
-// 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 burger menu is toggled to closed
-   */
-  'syn-burger-menu-closed': [e: SynBurgerMenuClosedEvent];
-
-  /**
-   * Emitted when the burger menu is toggled to hidden
-   */
-  'syn-burger-menu-hidden': [e: SynBurgerMenuHiddenEvent];
-
-  /**
-   * Emitted when the burger menu is toggled to open
-   */
-  'syn-burger-menu-open': [e: SynBurgerMenuOpenEvent];
-}>();
-</script>
-
-<script lang="ts">
-export type { SynBurgerMenuClosedEvent } from '@synergy-design-system/components';
-export type { SynBurgerMenuHiddenEvent } from '@synergy-design-system/components';
-export type { SynBurgerMenuOpenEvent } from '@synergy-design-system/components';
-</script>
-
-<template>
-  <syn-header
-    @syn-burger-menu-closed="$emit('syn-burger-menu-closed', $event)"
-    @syn-burger-menu-hidden="$emit('syn-burger-menu-hidden', $event)"
-    @syn-burger-menu-open="$emit('syn-burger-menu-open', $event)"
-    v-bind="visibleProps"
-    ref="nativeElement">
-    <slot></slot>
-  </syn-header>
-</template>

package/metadata/packages/components/components/syn-icon/component.angular.ts

@@ -1,115 +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 { SynIcon } from '@synergy-design-system/components';
-import type { SynLoadEvent } from '@synergy-design-system/components';
-import type { SynErrorEvent } from '@synergy-design-system/components';
-import '@synergy-design-system/components/components/icon/icon.js';
-
-/**
- * @summary Icons are symbols that can be used to represent various options within an application.
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-icon--docs
- * @status stable
- * @since 2.0
- *
- * @event syn-load - Emitted when the icon has loaded. When using `spriteSheet: true` this will not emit.
- * @event syn-error - Emitted when the icon fails to load due to an error. When using `spriteSheet: true` this will not emit.
- *
- * @csspart svg - The internal SVG element.
- * @csspart use - The <use> element generated when using `spriteSheet: true`
- */
-@Component({
-  selector: 'syn-icon',
-  standalone: true,
-  template: '<ng-content></ng-content>',
-})
-export class SynIconComponent {
-  public nativeElement: SynIcon;
-  private _ngZone: NgZone;
-
-  constructor(e: ElementRef, ngZone: NgZone) {
-    this.nativeElement = e.nativeElement;
-    this._ngZone = ngZone;
-    this.nativeElement.addEventListener('syn-load', (e: SynLoadEvent) => {
-      this.synLoadEvent.emit(e);
-    });
-    this.nativeElement.addEventListener('syn-error', (e: SynErrorEvent) => {
-      this.synErrorEvent.emit(e);
-    });
-  }
-
-  /**
-   * The name of the icon to draw.
-   * Available names depend on the icon library being used.
-   */
-  @Input()
-  set name(v: SynIcon['name']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.name = v));
-  }
-  get name(): SynIcon['name'] {
-    return this.nativeElement.name;
-  }
-
-  /**
-* An external URL of an SVG file.
-* Be sure you trust the content you are including, as it will be executed as code and
-can result in XSS attacks.
- */
-  @Input()
-  set src(v: SynIcon['src']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.src = v));
-  }
-  get src(): SynIcon['src'] {
-    return this.nativeElement.src;
-  }
-
-  /**
-* An alternate description to use for assistive devices.
-* If omitted, the icon will be considered presentational and
-ignored by assistive devices.
- */
-  @Input()
-  set label(v: SynIcon['label']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.label = v));
-  }
-  get label(): SynIcon['label'] {
-    return this.nativeElement.label;
-  }
-
-  /**
-   * The name of a registered custom icon library.
-   */
-  @Input()
-  set library(v: SynIcon['library']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.library = v));
-  }
-  get library(): SynIcon['library'] {
-    return this.nativeElement.library;
-  }
-
-  /**
-   * Emitted when the icon has loaded.
-   * When using `spriteSheet: true` this will not emit.
-   */
-  @Output() synLoadEvent = new EventEmitter<SynLoadEvent>();
-
-  /**
-   * Emitted when the icon fails to load due to an error.
-   * When using `spriteSheet: true` this will not emit.
-   */
-  @Output() synErrorEvent = new EventEmitter<SynErrorEvent>();
-}
-
-export type { SynLoadEvent } from '@synergy-design-system/components';
-export type { SynErrorEvent } from '@synergy-design-system/components';

package/metadata/packages/components/components/syn-icon/component.custom.styles.ts

@@ -1,5 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  /* Write custom CSS here */
-`;

package/metadata/packages/components/components/syn-icon/component.react.ts

@@ -1,41 +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/icon/icon.component.js';
-
-import { type EventName } from '@lit/react';
-import type { SynLoadEvent } from '@synergy-design-system/components';
-import type { SynErrorEvent } from '@synergy-design-system/components';
-
-const tagName = 'syn-icon';
-Component.define('syn-icon');
-
-/**
- * @summary Icons are symbols that can be used to represent various options within an application.
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-icon--docs
- * @status stable
- * @since 2.0
- *
- * @event syn-load - Emitted when the icon has loaded. When using `spriteSheet: true` this will not emit.
- * @event syn-error - Emitted when the icon fails to load due to an error. When using `spriteSheet: true` this will not emit.
- *
- * @csspart svg - The internal SVG element.
- * @csspart use - The <use> element generated when using `spriteSheet: true`
- */
-export const SynIcon = createComponent({
-  displayName: 'SynIcon',
-  elementClass: Component,
-  events: {
-    onSynLoad: 'syn-load' as EventName<SynLoadEvent>,
-    onSynError: 'syn-error' as EventName<SynErrorEvent>,
-  },
-  react: React,
-  tagName,
-});
-
-export type { SynLoadEvent } from '@synergy-design-system/components';
-export type { SynErrorEvent } from '@synergy-design-system/components';

package/metadata/packages/components/components/syn-icon/component.styles.ts

@@ -1,18 +0,0 @@
-/* eslint-disable */
-import { css } from 'lit';
-
-export default css`
-	/* stylelint-disable */
-  :host {
-    display: inline-block;
-    width: 1em;
-    height: 1em;
-    box-sizing: content-box !important;
-  }
-
-  svg {
-    display: block;
-    height: 100%;
-    width: 100%;
-  }
-`;