@synergy-design-system/mcp 2.14.1 → 3.0.0

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

@@ -1,256 +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 File controls allow selecting an arbitrary number of files for uploading.
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-file--docs
- * @status stable
- *
- * @dependency syn-button
- * @dependency syn-icon
- *
- * @slot label - The file control's label. Alternatively, you can use the `label` attribute.
- * @slot help-text - Text that describes how to use the file control.
- *    Alternatively, you can use the `help-text` attribute.
- * @slot droparea-icon - Optional droparea icon to use instead of the default.
- *    Works best with `<syn-icon>`.
- * @slot trigger - Optional content to be used as trigger instead of the default content.
- *    Opening the file dialog on click and as well as drag and drop will work for this content.
- *    Following attributes will no longer work: *label*, *droparea*, *help-text*, *size*,
- *    *hide-value*. Also if using the disabled attribute, the disabled styling will not be
- *    applied and must be taken care of yourself.
- *
- * @event syn-blur - Emitted when the control loses focus.
- * @event syn-change - Emitted when an alteration to the control's value is committed by the user.
- * @event syn-error - Emitted when multiple files are selected via drag and drop, without
- * the `multiple` property being set.
- * @event syn-focus - Emitted when the control gains focus.
- * @event syn-input - Emitted when the control receives input.
- *
- * @csspart form-control - The form control that wraps the label, input, and help text.
- * @csspart form-control-label - The label's wrapper.
- * @csspart form-control-input - The input's wrapper.
- * @csspart form-control-help-text - The help text's wrapper.
- * @csspart button-wrapper - The wrapper around the button and text value.
- * @csspart button - The syn-button acting as a file input.
- * @csspart button__base - The syn-button's exported `base` part.
- * @csspart value - The chosen files or placeholder text for the file input.
- * @csspart droparea - The element wrapping the drop zone.
- * @csspart droparea-background - The background of the drop zone.
- * @csspart droparea-icon - The container that wraps the icon for the drop zone.
- * @csspart droparea-value - The text for the drop zone.
- * @csspart trigger - The container that wraps the trigger.
- *
- * @animation file.iconDrop - The animation to use for the file icon
- * when a file is dropped
- * @animation file.text.disappear - The disappear animation to use for the file placeholder text
- * when a file is dropped
- * @animation file.text.appear - The appear animation to use for the file placeholder text
- * when a file is dropped
- */
-import { computed, ref } from 'vue';
-import '@synergy-design-system/components/components/file/file.js';
-
-import type { SynBlurEvent } from '@synergy-design-system/components';
-import type { SynChangeEvent } from '@synergy-design-system/components';
-import type { SynErrorEvent } from '@synergy-design-system/components';
-import type { SynFocusEvent } from '@synergy-design-system/components';
-import type { SynInputEvent } from '@synergy-design-system/components';
-import type { SynFile } from '@synergy-design-system/components';
-
-// DOM Reference to the element
-const nativeElement = ref<SynFile>();
-
-defineExpose({
-  nativeElement,
-});
-
-// Map attributes
-const props = defineProps<{
-  /**
-* The selected files as a FileList object containing a list of File objects.
-The FileList behaves like an array, so you can get the number of selected files
-via its length property.
-[see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#getting_information_on_selected_files)
- */
-  files?: SynFile['files'];
-
-  /**
-   * The name of the file control, submitted as a name/value pair with form data.
-   */
-  name?: SynFile['name'];
-
-  /**
-* The value of the file control contains a string that represents the path of the selected file.
-If multiple files are selected, the value represents the first file in the list.
-If no file is selected, the value is an empty string.
-Beware that the only valid value when setting a file control is an empty string!
-[see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#value)
- */
-  value?: SynFile['value'];
-
-  /**
-   * The file control's size.
-   */
-  size?: SynFile['size'];
-
-  /**
-   * The file control's label.
-   * If you need to display HTML, use the `label` slot instead.
-   */
-  label?: SynFile['label'];
-
-  /**
-* The file control's help text.
-If you need to display HTML, use the `help-text` slot instead.
- */
-  helpText?: SynFile['helpText'];
-
-  /**
-   * Disables the file control.
-   */
-  disabled?: SynFile['disabled'];
-
-  /**
-   * Sets the file control to a readonly state.
-   */
-  readonly?: SynFile['readonly'];
-
-  /**
-   * Draw the file control as a drop area
-   */
-  droparea?: SynFile['droparea'];
-
-  /**
-* Comma separated list of supported file types
-[see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept)
- */
-  accept?: SynFile['accept'];
-
-  /**
-* Specifies the types of files that the server accepts.
-Can be set either to user or environment.
-Works only when not using a droparea!
-[see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture)
- */
-  capture?: SynFile['capture'];
-
-  /**
-* Indicates whether the user can select more than one file.
-Has no effect if webkitdirectory is set.
-[see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#multiple)
- */
-  multiple?: SynFile['multiple'];
-
-  /**
-* Indicates that the file control should let the user select directories instead of files.
-When a directory is selected, the directory and its entire hierarchy of contents are included
-in the set of selected items.
-Note: This is a non-standard attribute but is supported in the major browsers.
-[see MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory)
- */
-  webkitdirectory?: SynFile['webkitdirectory'];
-
-  /**
-* By default, form controls are associated with the nearest containing `<form>` element.
-This attribute allows you to place the form control outside of a form and associate it
-with the form that has this `id`.
-* The form must be in the same document
-or shadow root for this to work.
- */
-  form?: SynFile['form'];
-
-  /**
-   * Makes the input a required field.
-   */
-  required?: SynFile['required'];
-
-  /**
-   * Suppress the value from being displayed in the file control
-   */
-  hideValue?: SynFile['hideValue'];
-
-  /**
-   * Support for two way data binding
-   */
-  modelValue?: SynFile['files'];
-}>();
-
-// 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 control loses focus.
-   */
-  'syn-blur': [e: SynBlurEvent];
-
-  /**
-   * Emitted when an alteration to the control's value is committed by the user.
-   */
-  'syn-change': [e: SynChangeEvent];
-
-  /**
-   * Emitted when multiple files are selected via drag and drop, without the `multiple` property being set.
-   */
-  'syn-error': [e: SynErrorEvent];
-
-  /**
-   * Emitted when the control gains focus.
-   */
-  'syn-focus': [e: SynFocusEvent];
-
-  /**
-   * Emitted when the control receives input.
-   */
-  'syn-input': [e: SynInputEvent];
-
-  /**
-   * Support for two way data binding
-   */
-  'update:modelValue': [newValue: SynFile['files']];
-}>();
-</script>
-
-<script lang="ts">
-export type { SynBlurEvent } from '@synergy-design-system/components';
-export type { SynChangeEvent } from '@synergy-design-system/components';
-export type { SynErrorEvent } from '@synergy-design-system/components';
-export type { SynFocusEvent } from '@synergy-design-system/components';
-export type { SynInputEvent } from '@synergy-design-system/components';
-</script>
-
-<template>
-  <syn-file
-    @syn-blur="$emit('syn-blur', $event)"
-    @syn-change="$emit('syn-change', $event)"
-    @syn-error="$emit('syn-error', $event)"
-    @syn-focus="$emit('syn-focus', $event)"
-    @syn-input="
-      $emit('update:modelValue', ($event.target as SynFile).files);
-      $emit('syn-input', $event);
-    "
-    :files="
-      typeof props.modelValue !== 'undefined'
-        ? props.modelValue
-        : typeof props.files !== 'undefined'
-          ? props.files
-          : undefined
-    "
-    v-bind="visibleProps"
-    ref="nativeElement">
-    <slot></slot>
-  </syn-file>
-</template>

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

@@ -1,149 +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 { SynHeader } from '@synergy-design-system/components';
-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 '@synergy-design-system/components/components/header/header.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)
- */
-@Component({
-  selector: 'syn-header',
-  standalone: true,
-  template: '<ng-content></ng-content>',
-})
-export class SynHeaderComponent {
-  public nativeElement: SynHeader;
-  private _ngZone: NgZone;
-
-  constructor(e: ElementRef, ngZone: NgZone) {
-    this.nativeElement = e.nativeElement;
-    this._ngZone = ngZone;
-    this.nativeElement.addEventListener(
-      'syn-burger-menu-closed',
-      (e: SynBurgerMenuClosedEvent) => {
-        this.synBurgerMenuClosedEvent.emit(e);
-      },
-    );
-    this.nativeElement.addEventListener(
-      'syn-burger-menu-hidden',
-      (e: SynBurgerMenuHiddenEvent) => {
-        this.synBurgerMenuHiddenEvent.emit(e);
-      },
-    );
-    this.nativeElement.addEventListener(
-      'syn-burger-menu-open',
-      (e: SynBurgerMenuOpenEvent) => {
-        this.synBurgerMenuOpenEvent.emit(e);
-      },
-    );
-  }
-
-  /**
-   * The headers label.
-   * If you need to display HTML, use the `label` slot instead.
-   */
-  @Input()
-  set label(v: SynHeader['label']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.label = v));
-  }
-  get label(): SynHeader['label'] {
-    return this.nativeElement.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
- */
-  @Input()
-  set burgerMenu(v: SynHeader['burgerMenu']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.burgerMenu = v));
-  }
-  get burgerMenu(): SynHeader['burgerMenu'] {
-    return this.nativeElement.burgerMenu;
-  }
-
-  /**
-* Makes the header stick to the top of the viewport when scrolling.
-Also applies a shadow to the header when scrolling.
- */
-  @Input()
-  set sticky(v: '' | SynHeader['sticky']) {
-    this._ngZone.runOutsideAngular(
-      () => (this.nativeElement.sticky = v === '' || v),
-    );
-  }
-  get sticky(): SynHeader['sticky'] {
-    return this.nativeElement.sticky;
-  }
-
-  /**
-   * Emitted when the burger menu is toggled to closed
-   */
-  @Output() synBurgerMenuClosedEvent =
-    new EventEmitter<SynBurgerMenuClosedEvent>();
-
-  /**
-   * Emitted when the burger menu is toggled to hidden
-   */
-  @Output() synBurgerMenuHiddenEvent =
-    new EventEmitter<SynBurgerMenuHiddenEvent>();
-
-  /**
-   * Emitted when the burger menu is toggled to open
-   */
-  @Output() synBurgerMenuOpenEvent = new EventEmitter<SynBurgerMenuOpenEvent>();
-}
-
-export type { SynBurgerMenuClosedEvent } from '@synergy-design-system/components';
-export type { SynBurgerMenuHiddenEvent } from '@synergy-design-system/components';
-export type { SynBurgerMenuOpenEvent } from '@synergy-design-system/components';

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

@@ -1,68 +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/header/header.component.js';
-
-import { type EventName } from '@lit/react';
-import type { SynBurgerMenuClosedEvent } from '@synergy-design-system/components';
-import type { SynBurgerMenuHiddenEvent } from '@synergy-design-system/components';
-import type { SynBurgerMenuOpenEvent } from '@synergy-design-system/components';
-
-const tagName = 'syn-header';
-Component.define('syn-header');
-
-/**
- * @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 const SynHeader = createComponent({
-  displayName: 'SynHeader',
-  elementClass: Component,
-  events: {
-    onSynBurgerMenuClosed:
-      'syn-burger-menu-closed' as EventName<SynBurgerMenuClosedEvent>,
-    onSynBurgerMenuHidden:
-      'syn-burger-menu-hidden' as EventName<SynBurgerMenuHiddenEvent>,
-    onSynBurgerMenuOpen:
-      'syn-burger-menu-open' as EventName<SynBurgerMenuOpenEvent>,
-  },
-  react: React,
-  tagName,
-});
-
-export type { SynBurgerMenuClosedEvent } from '@synergy-design-system/components';
-export type { SynBurgerMenuHiddenEvent } from '@synergy-design-system/components';
-export type { SynBurgerMenuOpenEvent } from '@synergy-design-system/components';

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

@@ -1,143 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  :host {
-    --sticky-position: 0;
-    --metanavigation-item-size: var(--syn-font-size-x-large);
-
-    display: block;
-  }
-
-  .header {
-    background: var(--syn-panel-background-color);
-    box-shadow: inset 0 -1px 0 0 var(--syn-header-border-color);
-  }
-
-  /**
-   * The primary content area displays one to many slotted items
-   * and contains the following items:
-   * - side nav state icon (OPTIONAL)
-   * - company or application logo
-   * - application name
-   * - meta-navigation
-   */
-  .header__content {
-    align-items: center;
-    box-sizing: content-box;
-    display: flex;
-    min-height: 40px;
-    padding: var(--syn-spacing-small) var(--syn-spacing-large);
-  }
-
-  /**
-   * The logo slot includes the application or company logo
-   */
-  .header__logo ::slotted(*),
-  .header__logo syn-icon {
-    display: block;
-  }
-
-  /**
-   * Make sure to use the correct color and outline for links
-   */
-  .header__logo ::slotted(a),
-  .header__logo ::slotted(a:hover) {
-    color: var(--syn-logo-color);
-  }
-
-  .header__logo ::slotted(a:is(:focus-visible)) {
-    outline: var(--syn-focus-ring);
-    outline-offset: var(--syn-focus-ring-offset);
-  }
-
-  /**
-   * Styles for the default logo. This makes sure the default SICK logo has the correct size and color
-   */
-  .header__logo syn-icon,
-  .header__logo syn-icon::part(svg) {
-    color: var(--syn-logo-color);
-    height: 32px;
-    width: auto;
-  }
-
-  /**
-   * The label section hosts the application name
-   */
-  .header__label {
-    color: var(--syn-typography-color-text);
-    font: var(--syn-body-large-bold);
-    padding: 0 var(--syn-spacing-2x-large);
-    white-space: nowrap;
-  }
-
-  /**
-   * The options menu holds an arbitrary list of <syn-icon-button />
-   */
-  .header__meta-navigation {
-    display: flex;
-    flex: 1;
-    gap: var(--syn-spacing-x-small);
-    justify-content: end;
-  }
-
-  .header__meta-navigation ::slotted(*) {
-    color: var(--syn-interactive-quiet-color);
-    display: contents;
-    font-size: var(--metanavigation-item-size);
-  }
-
-  /**
-   * The horizontal top navigation section
-   */
-  .header__navigation {
-    padding: 0 var(--syn-spacing-large);
-  }
-
-  /**
-   * The burger menu icon styles
-   */
-  .header__burger-menu-toggle {
-    align-items: center;
-    background: none;
-    border: none;
-    color: var(--syn-interactive-quiet-color);
-    cursor: pointer;
-    display: flex;
-    font-size: var(--syn-font-size-x-large);
-    margin-right: calc(var(--syn-spacing-medium) + var(--syn-spacing-2x-small));
-    padding: var(--syn-spacing-x-small);
-    transition: var(--syn-transition-x-fast) color;
-  }
-
-  .header__burger-menu-toggle:hover {
-    color: var(--syn-interactive-quiet-color-hover);
-  }
-
-  .header__burger-menu-toggle:active {
-    color: var(--syn-interactive-quiet-color-active);
-  }
-
-  .header__burger-menu-toggle:focus-visible {
-    outline: var(--syn-focus-ring);
-    outline-offset: var(--syn-focus-ring-offset);
-  }
-
-  /**
-   * If the burger menu is provided, use a smaller spacing on the left side
-   */
-  .header--has-burger-menu .header__content {
-    padding-left: var(--syn-spacing-medium);
-  }
-
-  /**
-   * #529: Sticky header styles
-   */
-  :host([sticky]) {
-    box-shadow: var(--syn-shadow-sticky-down);
-    position: sticky;
-    top: var(--sticky-position);
-
-    /* Make sure the header is above all other content, but below any potential modals or overlays */
-    z-index: calc(infinity - 1);
-  }
-`;