@synergy-design-system/mcp 2.14.1 → 3.0.0

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

@@ -1,208 +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 { SynDropdown } from '@synergy-design-system/components';
-import type { SynShowEvent } from '@synergy-design-system/components';
-import type { SynAfterShowEvent } from '@synergy-design-system/components';
-import type { SynHideEvent } from '@synergy-design-system/components';
-import type { SynAfterHideEvent } from '@synergy-design-system/components';
-import '@synergy-design-system/components/components/dropdown/dropdown.js';
-
-/**
- * @summary Dropdowns expose additional content that "drops down" in a panel.
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-dropdown--docs
- * @status stable
- * @since 2.0
- *
- * @dependency syn-popup
- *
- * @slot - The dropdown's main content.
- * @slot trigger - The dropdown's trigger, usually a `<syn-button>` element.
- *
- * @event syn-show - Emitted when the dropdown opens.
- * @event syn-after-show - Emitted after the dropdown opens and all animations are complete.
- * @event syn-hide - Emitted when the dropdown closes.
- * @event syn-after-hide - Emitted after the dropdown closes and all animations are complete.
- *
- * @csspart base - The component's base wrapper, an `<syn-popup>` element.
- * @csspart base__popup - The popup's exported `popup` part. Use this to target the tooltip's popup container.
- * @csspart trigger - The container that wraps the trigger.
- * @csspart panel - The panel that gets shown when the dropdown is open.
- *
- * @animation dropdown.show - The animation to use when showing the dropdown.
- * @animation dropdown.hide - The animation to use when hiding the dropdown.
- */
-@Component({
-  selector: 'syn-dropdown',
-  standalone: true,
-  template: '<ng-content></ng-content>',
-})
-export class SynDropdownComponent {
-  public nativeElement: SynDropdown;
-  private _ngZone: NgZone;
-
-  constructor(e: ElementRef, ngZone: NgZone) {
-    this.nativeElement = e.nativeElement;
-    this._ngZone = ngZone;
-    this.nativeElement.addEventListener('syn-show', (e: SynShowEvent) => {
-      this.synShowEvent.emit(e);
-    });
-    this.nativeElement.addEventListener(
-      'syn-after-show',
-      (e: SynAfterShowEvent) => {
-        this.synAfterShowEvent.emit(e);
-      },
-    );
-    this.nativeElement.addEventListener('syn-hide', (e: SynHideEvent) => {
-      this.synHideEvent.emit(e);
-    });
-    this.nativeElement.addEventListener(
-      'syn-after-hide',
-      (e: SynAfterHideEvent) => {
-        this.synAfterHideEvent.emit(e);
-      },
-    );
-  }
-
-  /**
-* Indicates whether or not the dropdown is open.
-* You can toggle this attribute to show and hide the dropdown, or you
-can use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state.
- */
-  @Input()
-  set open(v: '' | SynDropdown['open']) {
-    this._ngZone.runOutsideAngular(
-      () => (this.nativeElement.open = v === '' || v),
-    );
-  }
-  get open(): SynDropdown['open'] {
-    return this.nativeElement.open;
-  }
-
-  /**
-* The preferred placement of the dropdown panel.
-* Note that the actual placement may vary as needed to keep the panel
-inside of the viewport.
- */
-  @Input()
-  set placement(v: SynDropdown['placement']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.placement = v));
-  }
-  get placement(): SynDropdown['placement'] {
-    return this.nativeElement.placement;
-  }
-
-  /**
-   * Disables the dropdown so the panel will not open.
-   */
-  @Input()
-  set disabled(v: '' | SynDropdown['disabled']) {
-    this._ngZone.runOutsideAngular(
-      () => (this.nativeElement.disabled = v === '' || v),
-    );
-  }
-  get disabled(): SynDropdown['disabled'] {
-    return this.nativeElement.disabled;
-  }
-
-  /**
-* By default, the dropdown is closed when an item is selected.
-* This attribute will keep it open instead.
-* Useful for
-dropdowns that allow for multiple interactions.
- */
-  @Input()
-  set stayOpenOnSelect(v: '' | SynDropdown['stayOpenOnSelect']) {
-    this._ngZone.runOutsideAngular(
-      () => (this.nativeElement.stayOpenOnSelect = v === '' || v),
-    );
-  }
-  get stayOpenOnSelect(): SynDropdown['stayOpenOnSelect'] {
-    return this.nativeElement.stayOpenOnSelect;
-  }
-
-  /**
-   * The distance in pixels from which to offset the panel away from its trigger.
-   */
-  @Input()
-  set distance(v: SynDropdown['distance']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.distance = v));
-  }
-  get distance(): SynDropdown['distance'] {
-    return this.nativeElement.distance;
-  }
-
-  /**
-   * The distance in pixels from which to offset the panel along its trigger.
-   */
-  @Input()
-  set skidding(v: SynDropdown['skidding']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.skidding = v));
-  }
-  get skidding(): SynDropdown['skidding'] {
-    return this.nativeElement.skidding;
-  }
-
-  /**
-   * Syncs the popup width or height to that of the trigger element.
-   */
-  @Input()
-  set sync(v: SynDropdown['sync']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.sync = v));
-  }
-  get sync(): SynDropdown['sync'] {
-    return this.nativeElement.sync;
-  }
-
-  /**
-* The dropdown will close when the user interacts outside of this element (e.g.
-* clicking).
-* Useful for composing other
-components that use a dropdown internally.
- */
-  @Input()
-  set containingElement(v: SynDropdown['containingElement']) {
-    this._ngZone.runOutsideAngular(
-      () => (this.nativeElement.containingElement = v),
-    );
-  }
-  get containingElement(): SynDropdown['containingElement'] {
-    return this.nativeElement.containingElement;
-  }
-
-  /**
-   * Emitted when the dropdown opens.
-   */
-  @Output() synShowEvent = new EventEmitter<SynShowEvent>();
-
-  /**
-   * Emitted after the dropdown opens and all animations are complete.
-   */
-  @Output() synAfterShowEvent = new EventEmitter<SynAfterShowEvent>();
-
-  /**
-   * Emitted when the dropdown closes.
-   */
-  @Output() synHideEvent = new EventEmitter<SynHideEvent>();
-
-  /**
-   * Emitted after the dropdown closes and all animations are complete.
-   */
-  @Output() synAfterHideEvent = new EventEmitter<SynAfterHideEvent>();
-}
-
-export type { SynShowEvent } from '@synergy-design-system/components';
-export type { SynAfterShowEvent } from '@synergy-design-system/components';
-export type { SynHideEvent } from '@synergy-design-system/components';
-export type { SynAfterHideEvent } from '@synergy-design-system/components';

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

@@ -1,59 +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/dropdown/dropdown.component.js';
-
-import { type EventName } from '@lit/react';
-import type { SynShowEvent } from '@synergy-design-system/components';
-import type { SynAfterShowEvent } from '@synergy-design-system/components';
-import type { SynHideEvent } from '@synergy-design-system/components';
-import type { SynAfterHideEvent } from '@synergy-design-system/components';
-
-const tagName = 'syn-dropdown';
-Component.define('syn-dropdown');
-
-/**
- * @summary Dropdowns expose additional content that "drops down" in a panel.
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-dropdown--docs
- * @status stable
- * @since 2.0
- *
- * @dependency syn-popup
- *
- * @slot - The dropdown's main content.
- * @slot trigger - The dropdown's trigger, usually a `<syn-button>` element.
- *
- * @event syn-show - Emitted when the dropdown opens.
- * @event syn-after-show - Emitted after the dropdown opens and all animations are complete.
- * @event syn-hide - Emitted when the dropdown closes.
- * @event syn-after-hide - Emitted after the dropdown closes and all animations are complete.
- *
- * @csspart base - The component's base wrapper, an `<syn-popup>` element.
- * @csspart base__popup - The popup's exported `popup` part. Use this to target the tooltip's popup container.
- * @csspart trigger - The container that wraps the trigger.
- * @csspart panel - The panel that gets shown when the dropdown is open.
- *
- * @animation dropdown.show - The animation to use when showing the dropdown.
- * @animation dropdown.hide - The animation to use when hiding the dropdown.
- */
-export const SynDropdown = createComponent({
-  displayName: 'SynDropdown',
-  elementClass: Component,
-  events: {
-    onSynShow: 'syn-show' as EventName<SynShowEvent>,
-    onSynAfterShow: 'syn-after-show' as EventName<SynAfterShowEvent>,
-    onSynHide: 'syn-hide' as EventName<SynHideEvent>,
-    onSynAfterHide: 'syn-after-hide' as EventName<SynAfterHideEvent>,
-  },
-  react: React,
-  tagName,
-});
-
-export type { SynShowEvent } from '@synergy-design-system/components';
-export type { SynAfterShowEvent } from '@synergy-design-system/components';
-export type { SynHideEvent } from '@synergy-design-system/components';
-export type { SynAfterHideEvent } from '@synergy-design-system/components';

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

@@ -1,51 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  :host {
-    display: inline-block;
-  }
-
-  .dropdown::part(popup) {
-    z-index: var(--syn-z-index-dropdown);
-  }
-
-  .dropdown[data-current-placement^='top']::part(popup) {
-    transform-origin: bottom;
-  }
-
-  .dropdown[data-current-placement^='bottom']::part(popup) {
-    transform-origin: top;
-  }
-
-  .dropdown[data-current-placement^='left']::part(popup) {
-    transform-origin: right;
-  }
-
-  .dropdown[data-current-placement^='right']::part(popup) {
-    transform-origin: left;
-  }
-
-  .dropdown__trigger {
-    display: block;
-  }
-
-  .dropdown__panel {
-    border-radius: var(--syn-border-radius-medium);
-    box-shadow: var(--syn-shadow-large);
-    font-family: var(--syn-font-sans);
-    font-size: var(--syn-font-size-medium);
-    font-weight: var(--syn-font-weight-normal);
-    pointer-events: none;
-  }
-
-  .dropdown--open .dropdown__panel {
-    display: block;
-    pointer-events: all;
-  }
-
-  /* When users slot a menu, make sure it conforms to the popup's auto-size */
-  ::slotted(syn-menu) {
-    max-height: var(--auto-size-available-height) !important;
-    max-width: var(--auto-size-available-width) !important;
-  }
-`;