@synergy-design-system/mcp 0.1.0 → 1.1.0

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

@@ -0,0 +1,260 @@
+/* eslint-disable @typescript-eslint/unbound-method */
+import { classMap } from 'lit/directives/class-map.js';
+import { html } from 'lit/static-html.js';
+import { property, 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';
+
+/**
+ * @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
+ */
+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;
+
+  /**
+   * 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';
+
+  /**
+   * 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';
+      }
+    }
+  }
+
+  @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() {
+    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 name="meta-navigation"></slot>
+          </div>
+        </div>
+        <!-- /.header__content -->
+
+        <div part="navigation" class="header__navigation">
+          <slot name="navigation"></slot>
+        </div>
+      </header>
+    `;
+  }
+}

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

@@ -0,0 +1,117 @@
+<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
+ */
+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'];
+}>();
+
+// 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

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

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

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

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

@@ -0,0 +1,25 @@
+/**
+ * ---------------------------------------------------------------------
+ * 🔒 AUTOGENERATED BY VENDORISM
+ * Removing this comment will prevent it from being managed by it.
+ * ---------------------------------------------------------------------
+ */
+
+/* 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%;
+  }
+`;