@synergy-design-system/mcp 0.1.0 → 1.0.0

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

@@ -0,0 +1,223 @@
+// ---------------------------------------------------------------------
+// 🔒 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;
+  }
+
+  /**
+* Enable this option to prevent the panel from being clipped when the component is placed inside a container with
+`overflow: auto|scroll`.
+* Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.
+ */
+  @Input()
+  set hoist(v: '' | SynDropdown['hoist']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.hoist = v === '' || v),
+    );
+  }
+  get hoist(): SynDropdown['hoist'] {
+    return this.nativeElement.hoist;
+  }
+
+  /**
+   * 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.custom.styles.ts

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

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

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

@@ -0,0 +1,60 @@
+/**
+ * ---------------------------------------------------------------------
+ * 🔒 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;
+  }
+
+  .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 {
+    font-family: var(--syn-font-sans);
+    font-size: var(--syn-font-size-medium);
+    font-weight: var(--syn-font-weight-normal);
+    box-shadow: var(--syn-shadow-large);
+    border-radius: var(--syn-border-radius-medium);
+    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-width: var(--auto-size-available-width) !important;
+    max-height: var(--auto-size-available-height) !important;
+  }
+`;