@synergy-design-system/mcp 2.14.1 → 3.0.0

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

@@ -1,372 +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 { SynFile } from '@synergy-design-system/components';
-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 '@synergy-design-system/components/components/file/file.js';
-
-/**
- * @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
- */
-@Component({
-  selector: 'syn-file',
-  standalone: true,
-  template: '<ng-content></ng-content>',
-})
-export class SynFileComponent {
-  public nativeElement: SynFile;
-  private _ngZone: NgZone;
-  private modelSignal = new AbortController();
-
-  constructor(e: ElementRef, ngZone: NgZone) {
-    this.nativeElement = e.nativeElement;
-    this._ngZone = ngZone;
-    this.nativeElement.addEventListener('syn-blur', (e: SynBlurEvent) => {
-      this.synBlurEvent.emit(e);
-    });
-    this.nativeElement.addEventListener('syn-change', (e: SynChangeEvent) => {
-      this.synChangeEvent.emit(e);
-    });
-    this.nativeElement.addEventListener('syn-error', (e: SynErrorEvent) => {
-      this.synErrorEvent.emit(e);
-    });
-    this.nativeElement.addEventListener('syn-focus', (e: SynFocusEvent) => {
-      this.synFocusEvent.emit(e);
-    });
-    this.nativeElement.addEventListener('syn-input', (e: SynInputEvent) => {
-      this.synInputEvent.emit(e);
-    });
-    this.ngModelUpdateOn = 'syn-input';
-  }
-
-  /**
-   * The event that will trigger the ngModel update.
-   * By default, this is set to "syn-input".
-   */
-  @Input()
-  set ngModelUpdateOn(v: keyof HTMLElementEventMap) {
-    this.modelSignal.abort();
-    this.modelSignal = new AbortController();
-    const option = v || 'syn-input';
-    this.nativeElement.addEventListener(
-      option,
-      () => {
-        this.filesChange.emit(this.files);
-      },
-      {
-        signal: this.modelSignal.signal,
-      },
-    );
-  }
-  get ngModelUpdateOn(): keyof HTMLElementEventMap {
-    return this.ngModelUpdateOn;
-  }
-
-  /**
-* 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)
- */
-  @Input()
-  set files(v: SynFile['files']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.files = v));
-  }
-  get files(): SynFile['files'] {
-    return this.nativeElement.files;
-  }
-
-  /**
-   * The name of the file control, submitted as a name/value pair with form data.
-   */
-  @Input()
-  set name(v: SynFile['name']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.name = v));
-  }
-  get name(): SynFile['name'] {
-    return this.nativeElement.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)
- */
-  @Input()
-  set value(v: SynFile['value']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.value = v));
-  }
-  get value(): SynFile['value'] {
-    return this.nativeElement.value;
-  }
-
-  /**
-   * The file control's size.
-   */
-  @Input()
-  set size(v: SynFile['size']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.size = v));
-  }
-  get size(): SynFile['size'] {
-    return this.nativeElement.size;
-  }
-
-  /**
-   * The file control's label.
-   * If you need to display HTML, use the `label` slot instead.
-   */
-  @Input()
-  set label(v: SynFile['label']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.label = v));
-  }
-  get label(): SynFile['label'] {
-    return this.nativeElement.label;
-  }
-
-  /**
-* The file control's help text.
-If you need to display HTML, use the `help-text` slot instead.
- */
-  @Input()
-  set helpText(v: SynFile['helpText']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.helpText = v));
-  }
-  get helpText(): SynFile['helpText'] {
-    return this.nativeElement.helpText;
-  }
-
-  /**
-   * Disables the file control.
-   */
-  @Input()
-  set disabled(v: '' | SynFile['disabled']) {
-    this._ngZone.runOutsideAngular(
-      () => (this.nativeElement.disabled = v === '' || v),
-    );
-  }
-  get disabled(): SynFile['disabled'] {
-    return this.nativeElement.disabled;
-  }
-
-  /**
-   * Sets the file control to a readonly state.
-   */
-  @Input()
-  set readonly(v: '' | SynFile['readonly']) {
-    this._ngZone.runOutsideAngular(
-      () => (this.nativeElement.readonly = v === '' || v),
-    );
-  }
-  get readonly(): SynFile['readonly'] {
-    return this.nativeElement.readonly;
-  }
-
-  /**
-   * Draw the file control as a drop area
-   */
-  @Input()
-  set droparea(v: '' | SynFile['droparea']) {
-    this._ngZone.runOutsideAngular(
-      () => (this.nativeElement.droparea = v === '' || v),
-    );
-  }
-  get droparea(): SynFile['droparea'] {
-    return this.nativeElement.droparea;
-  }
-
-  /**
-* Comma separated list of supported file types
-[see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept)
- */
-  @Input()
-  set accept(v: SynFile['accept']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.accept = v));
-  }
-  get accept(): SynFile['accept'] {
-    return this.nativeElement.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)
- */
-  @Input()
-  set capture(v: SynFile['capture']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.capture = v));
-  }
-  get capture(): SynFile['capture'] {
-    return this.nativeElement.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)
- */
-  @Input()
-  set multiple(v: '' | SynFile['multiple']) {
-    this._ngZone.runOutsideAngular(
-      () => (this.nativeElement.multiple = v === '' || v),
-    );
-  }
-  get multiple(): SynFile['multiple'] {
-    return this.nativeElement.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)
- */
-  @Input()
-  set webkitdirectory(v: '' | SynFile['webkitdirectory']) {
-    this._ngZone.runOutsideAngular(
-      () => (this.nativeElement.webkitdirectory = v === '' || v),
-    );
-  }
-  get webkitdirectory(): SynFile['webkitdirectory'] {
-    return this.nativeElement.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.
- */
-  @Input()
-  set form(v: SynFile['form']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.form = v));
-  }
-  get form(): SynFile['form'] {
-    return this.nativeElement.form;
-  }
-
-  /**
-   * Makes the input a required field.
-   */
-  @Input()
-  set required(v: '' | SynFile['required']) {
-    this._ngZone.runOutsideAngular(
-      () => (this.nativeElement.required = v === '' || v),
-    );
-  }
-  get required(): SynFile['required'] {
-    return this.nativeElement.required;
-  }
-
-  /**
-   * Suppress the value from being displayed in the file control
-   */
-  @Input()
-  set hideValue(v: '' | SynFile['hideValue']) {
-    this._ngZone.runOutsideAngular(
-      () => (this.nativeElement.hideValue = v === '' || v),
-    );
-  }
-  get hideValue(): SynFile['hideValue'] {
-    return this.nativeElement.hideValue;
-  }
-
-  /**
-   * Emitted when the control loses focus.
-   */
-  @Output() synBlurEvent = new EventEmitter<SynBlurEvent>();
-
-  /**
-   * Emitted when an alteration to the control's value is committed by the user.
-   */
-  @Output() synChangeEvent = new EventEmitter<SynChangeEvent>();
-
-  /**
-   * Emitted when multiple files are selected via drag and drop, without the `multiple` property being set.
-   */
-  @Output() synErrorEvent = new EventEmitter<SynErrorEvent>();
-
-  /**
-   * Emitted when the control gains focus.
-   */
-  @Output() synFocusEvent = new EventEmitter<SynFocusEvent>();
-
-  /**
-   * Emitted when the control receives input.
-   */
-  @Output() synInputEvent = new EventEmitter<SynInputEvent>();
-
-  /**
-   * Support for two way data binding
-   */
-  @Output() filesChange = new EventEmitter<SynFile['files']>();
-}
-
-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';

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

@@ -1,85 +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/file/file.component.js';
-
-import { type EventName } from '@lit/react';
-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';
-
-const tagName = 'syn-file';
-Component.define('syn-file');
-
-/**
- * @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
- */
-export const SynFile = createComponent({
-  displayName: 'SynFile',
-  elementClass: Component,
-  events: {
-    onSynBlur: 'syn-blur' as EventName<SynBlurEvent>,
-    onSynChange: 'syn-change' as EventName<SynChangeEvent>,
-    onSynError: 'syn-error' as EventName<SynErrorEvent>,
-    onSynFocus: 'syn-focus' as EventName<SynFocusEvent>,
-    onSynInput: 'syn-input' as EventName<SynInputEvent>,
-  },
-  react: React,
-  tagName,
-});
-
-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';

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

@@ -1,197 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  :host {
-    display: block;
-  }
-
-  .input__control {
-    /**
-     * Visually hide the input type=file without display:none
-     * This is necessary for accessibility reasons and so the native html input validation popup 
-     * is shown.
-     */
-    border: 0;
-    clip-path: inset(50%);
-    height: 1px;
-    margin: 0;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    white-space: nowrap;
-    width: 1px;
-  }
-
-  .form-control--droparea .input__control {
-    /* move the input into the center, so the native validation popup is centered to the droparea */
-    left: 50%;
-  }
-
-  .form-control-input {
-    /* needed, so the native validation popup is centered correctly */
-    position: relative;
-  }
-
-  /* Regular Input with button only */
-  .button__wrapper {
-    align-items: center;
-    display: flex;
-    gap: var(--syn-input-spacing-medium);
-  }
-
-  .form-control--small .button__wrapper {
-    gap: var(--syn-input-spacing-small);
-  }
-
-  :host([size="large"]) .button__wrapper {
-    gap: var(--syn-input-spacing-large);
-  }
-
-  /**
-   * The value of the chosen file(s) or the placeholder text
-   */
-  .input__value {
-    color: var(--syn-input-color);
-    font-size: var(--syn-input-label-font-size-medium);
-  }
-
-  .input__value.input__value--hidden {
-    display: none;
-  }
-
-  .input__value--placeholder {
-    color: var(--syn-input-help-text-color);
-  }
-
-  .form-control--small .input__value {
-    font-size: var(--syn-input-label-font-size-small);
-  }
-
-  .form-control--large .input__value {
-    font-size: var(--syn-input-label-font-size-large);
-  }
-
-  /**
-   * Special case for regular inputs:
-   * When the user uses drag and drop, highlight the button with the primary color
-   */
-  .form-control--user-dragging:not([disabled]) .button::part(base) {
-    background: none;
-    border-color: var(--syn-interactive-emphasis-color-hover);
-    color: var(--syn-interactive-emphasis-color-hover);
-  }
-
-  /* Drop Area */
-  .droparea {
-    --highlight-color: var(--syn-interactive-emphasis-color);
-
-    border: var(--syn-input-border-width) dashed var(--syn-input-border-color);
-    border-radius: var(--syn-input-border-radius-medium);
-    font: var(--syn-body-medium-regular);
-    padding: var(--syn-spacing-x-large) var(--syn-spacing-large);
-    transition: var(--syn-transition-medium) background;
-  }
-
-  .droparea:focus-visible {
-    border: var(--syn-input-border-width) dashed var(--syn-interactive-emphasis-color);
-    outline: var(--syn-focus-ring);
-    outline-offset: var(--syn-focus-ring-offset);
-  }
-
-  /* Adjust the highlight to match an inactive item */
-  :host([disabled]) .droparea {
-    --highlight-color: var(--syn-color-neutral-600);
-  }
-
-  :host([disabled]) .input__value {
-    display: none;
-  }
-
-  .droparea__background {
-    align-items: center;
-    display: flex;
-    gap: var(--syn-spacing-x-small);
-    padding: var(--syn-spacing-x-small) var(--syn-spacing-medium);
-  }
-
-  .droparea__icon {
-    align-items: center;
-    color: var(--highlight-color);
-    display: flex;
-    font-size: var(--syn-spacing-3x-large);
-  }
-
-  .droparea__text {
-    display: flex;
-    flex-direction: column;
-    gap: var(--syn-spacing-3x-small);
-    margin: 0;
-  }
-
-  .droparea__text strong {
-    color: var(--highlight-color);
-    font-weight: var(--syn-font-weight-bold);
-  }
-
-  /* Sizes */
-  /* stylelint-disable-next-line no-descending-specificity */
-  .form-control--small .droparea {
-    font: var(--syn-body-small-regular);
-  }
-
-  .form-control--small .droparea__icon {
-    font-size: var(--syn-spacing-2x-large)
-  }
-
-  /* stylelint-disable-next-line no-descending-specificity */
-  .form-control--large .droparea {
-    font: var(--syn-body-large-regular);
-  }
-
-  .form-control--large .droparea__icon {
-    font-size: var(--syn-spacing-4x-large)
-  }
-
-  /* #1173: Readonly Styles */
-  :host([readonly]) .button::part(base) {
-    background: var(--syn-readonly-background-color);
-    color: var(--syn-readonly-indicator-color);
-  }
-
-  :host([readonly]) .droparea__text strong {
-    color: var(--syn-readonly-color-text);
-  }
-
-  :host([readonly]) .droparea {
-    --highlight-color: var(--syn-readonly-icon-color);
-
-    background: var(--syn-readonly-background-color);
-    border: var(--syn-input-border-width) solid var(--syn-readonly-background-color);
-  }
-
-  /* Disabled Styles */
-  :host([disabled]) .droparea,
-  :host([disabled]) .input__value {
-    cursor: not-allowed;
-    opacity: var(--syn-input-disabled-opacity);
-  }
-
-  :host(:not([disabled]):not([readonly])) .form-control--user-dragging .droparea {
-    background: var(--syn-color-primary-50);
-    border: var(--syn-input-border-width) solid var(--syn-interactive-emphasis-color);
-    cursor: pointer;
-  }
-
-  :host(:not([disabled]):not([readonly])) .droparea:not(:focus-visible):hover {
-    --highlight-color: var(--syn-interactive-emphasis-color-hover);
-
-    border: var(--syn-input-border-width) dashed var(--syn-input-border-color-hover);
-    cursor: pointer;
-  }
-
-  /* Validation */
-  /* stylelint-disable-next-line no-descending-specificity */
-  :host([data-user-invalid]:not([disabled]):not([readonly])) .droparea {
-    border: var(--syn-input-border-width) dashed var(--syn-input-focus-ring-error);
-  }
-`;