@synergy-design-system/mcp 0.1.0 → 1.0.0

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

@@ -0,0 +1,79 @@
+// ---------------------------------------------------------------------
+// 🔒 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 { SynOptgroup } from '@synergy-design-system/components';
+
+import '@synergy-design-system/components/components/optgroup/optgroup.js';
+
+/**
+ * @summary The <syn-optgroup> element creates a grouping for <syn-option>s within a <syn-select>.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-optgroup--docs
+ * @status stable
+ * @since 1.3.0
+ *
+ * @dependency syn-divider
+ *
+ * @slot - The given options. Must be `<syn-option>` elements.
+ * @slot prefix - A presentational prefix icon or similar element.
+ * @slot label - The label for the optgroup
+ * @slot suffix - A presentational suffix icon or similar element.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart label-container - The container that wraps prefix, label and base
+ * @csspart divider - The divider that is displayed above the content
+ * @csspart prefix - The container that wraps the prefix.
+ * @csspart suffix - The container that wraps the suffix.
+ * @csspart options - The container that wraps the <syn-option> elements.
+ *
+ * @cssproperty --display-divider - Display property of the divider. Defaults to "block"
+ */
+@Component({
+  selector: 'syn-optgroup',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+})
+export class SynOptgroupComponent {
+  public nativeElement: SynOptgroup;
+  private _ngZone: NgZone;
+
+  constructor(e: ElementRef, ngZone: NgZone) {
+    this.nativeElement = e.nativeElement;
+    this._ngZone = ngZone;
+  }
+
+  /**
+   * Disables all options in the optgroup.
+   */
+  @Input()
+  set disabled(v: '' | SynOptgroup['disabled']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.disabled = v === '' || v),
+    );
+  }
+  get disabled(): SynOptgroup['disabled'] {
+    return this.nativeElement.disabled;
+  }
+
+  /**
+   * The optgroups label.
+   * If you need to display HTML, use the `label` slot instead.
+   */
+  @Input()
+  set label(v: SynOptgroup['label']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.label = v));
+  }
+  get label(): SynOptgroup['label'] {
+    return this.nativeElement.label;
+  }
+}

package/metadata/packages/components/components/syn-optgroup/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/optgroup/optgroup.component.js';
+
+const tagName = 'syn-optgroup';
+Component.define('syn-optgroup');
+
+/**
+ * @summary The <syn-optgroup> element creates a grouping for <syn-option>s within a <syn-select>.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-optgroup--docs
+ * @status stable
+ * @since 1.3.0
+ *
+ * @dependency syn-divider
+ *
+ * @slot - The given options. Must be `<syn-option>` elements.
+ * @slot prefix - A presentational prefix icon or similar element.
+ * @slot label - The label for the optgroup
+ * @slot suffix - A presentational suffix icon or similar element.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart label-container - The container that wraps prefix, label and base
+ * @csspart divider - The divider that is displayed above the content
+ * @csspart prefix - The container that wraps the prefix.
+ * @csspart suffix - The container that wraps the suffix.
+ * @csspart options - The container that wraps the <syn-option> elements.
+ *
+ * @cssproperty --display-divider - Display property of the divider. Defaults to "block"
+ */
+export const SynOptgroup = createComponent({
+  displayName: 'SynOptgroup',
+  elementClass: Component,
+  events: {},
+  react: React,
+  tagName,
+});

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

@@ -0,0 +1,59 @@
+import { css } from 'lit';
+
+export default css`
+  :host {
+    --display-divider: block;
+  }
+
+  .optgroup__divider {
+    --spacing: var(--syn-spacing-x-small);
+
+    display: var(--display-divider);
+  }
+
+  .optgroup__label-container {
+    align-items: center;
+    box-sizing: border-box;
+    color: var(--syn-color-neutral-950);
+    display: flex;
+    gap: var(--syn-spacing-small);
+    min-height: var(--option-min-height, var(--syn-input-height-medium));
+  }
+
+  /**
+   * Only show the label container when there is a label at all
+   */
+  .optgroup--has-prefix .optgroup__label-container,
+  .optgroup--has-label .optgroup__label-container,
+  .optgroup--has-suffix .optgroup__label-container {
+    padding: var(--option-padding, var(--syn-spacing-small) var(--syn-spacing-medium));
+  }
+
+  /**
+   * Format main label.
+   * Make sure this works for props and slotted content
+   */
+  .optgroup__label-content,
+  .optgroup__label::slotted(*) {
+    flex: 1;
+    font-family: var(--syn-font-sans);
+    font-size: var(--option-font-size, var(--syn-font-size-medium));
+    font-weight: var(--syn-font-weight-semibold);
+    line-height: var(--syn-line-height-normal);
+  }
+
+  /* Disabled Label */
+  .optgroup--is-disabled .optgroup__label-container {
+    opacity: var(--syn-input-disabled-opacity);
+  }
+
+  .optgroup__prefix,
+  .optgroup__suffix {
+    color: var(--syn-color-neutral-800);
+    font-size: var(--syn-spacing-large);
+  }
+
+  .optgroup__options ::slotted(syn-option[hidden]) {
+    display: none;
+  }
+`;

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

@@ -0,0 +1,176 @@
+/* eslint-disable @typescript-eslint/unbound-method */
+import { classMap } from 'lit/directives/class-map.js';
+import { html } from 'lit/static-html.js';
+import { property, queryAssignedElements } from 'lit/decorators.js';
+import type { CSSResultGroup } from 'lit';
+import SynergyElement from '../../internal/synergy-element.js';
+import { HasSlotController } from '../../internal/slot.js';
+import SynDivider from '../divider/divider.component.js';
+import type SynOption from '../option/option.component.js';
+import styles from './optgroup.styles.js';
+
+/**
+ * Handle the dataset value of the option when the disabled state changes.
+ * @param option The option to set the value for
+ * @param isDisabled The original disabled, usually from the parent optgroup
+ */
+const handleInitialDisabledForOption = (option: SynOption, isDisabled: boolean) => {
+  /* eslint-disable no-param-reassign */
+  if (option.disabled) {
+    option.dataset.originallyDisabled = 'true';
+  } else {
+    delete option.dataset.originallyDisabled;
+  }
+
+  if (isDisabled) {
+    option.disabled = true;
+  }
+  /* eslint-enable no-param-reassign */
+};
+
+/**
+ * @summary The <syn-optgroup> element creates a grouping for <syn-option>s within a <syn-select>.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-optgroup--docs
+ * @status stable
+ * @since 1.3.0
+ *
+ * @dependency syn-divider
+ *
+ * @slot - The given options. Must be `<syn-option>` elements.
+ * @slot prefix - A presentational prefix icon or similar element.
+ * @slot label - The label for the optgroup
+ * @slot suffix - A presentational suffix icon or similar element.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart label-container - The container that wraps prefix, label and base
+ * @csspart divider - The divider that is displayed above the content
+ * @csspart prefix - The container that wraps the prefix.
+ * @csspart suffix - The container that wraps the suffix.
+ * @csspart options - The container that wraps the <syn-option> elements.
+ *
+ * @cssproperty --display-divider - Display property of the divider. Defaults to "block"
+ */
+export default class SynOptgroup extends SynergyElement {
+  static styles: CSSResultGroup = styles;
+
+  static dependencies = {
+    'syn-divider': SynDivider,
+  };
+
+  private readonly hasSlotController = new HasSlotController(this, '[default]', 'prefix', 'suffix', 'label');
+
+  private mutationObserver: MutationObserver;
+
+  private enableObserver() {
+    this.mutationObserver.observe(this, {
+      attributeFilter: ['disabled'],
+      childList: true,
+      subtree: true,
+    });
+  }
+
+  @queryAssignedElements({ selector: 'syn-option' }) assignedOptions: SynOption[];
+
+  /**
+   * Disables all options in the optgroup.
+   */
+  @property({ reflect: true, type: Boolean }) disabled = false;
+
+  /**
+   * The optgroups label. If you need to display HTML, use the `label` slot instead.
+   */
+  @property() label = '';
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    /* eslint-disable no-param-reassign */
+    // eslint-disable-next-line complexity
+    this.mutationObserver = new MutationObserver(entries => {
+      // Check if the mutation is for this optgroup
+      const optgroupChanges = entries.filter(entry => entry.target === this);
+      const optionChanges = entries.filter(entry => (entry.target as HTMLElement).matches('syn-option'));
+
+      const stopObserver = optgroupChanges.length > 0 || optionChanges.length > 0;
+
+      if (stopObserver) {
+        this.mutationObserver.disconnect();
+      }
+
+      // If options disabled state are changed dynamically,
+      // we need to store the new "originallyDisabled" state
+      if (optionChanges.length > 0) {
+        optionChanges.forEach(optionMutation => {
+          handleInitialDisabledForOption(optionMutation.target as SynOption, this.disabled);
+        });
+      }
+
+      // If the optgroup is disabled, disable all options
+      // If the optgroup is enabled, reenable all options that were enabled before
+      if (optgroupChanges.length > 0) {
+        optgroupChanges.forEach(optgroupMutation => {
+          if (optgroupMutation.type === 'attributes') {
+            this.assignedOptions.forEach(option => {
+              option.disabled = this.disabled
+                ? true
+                : !!option.dataset?.originallyDisabled;
+            });
+          }
+
+          if (optgroupMutation.type === 'childList') {
+            optgroupMutation.addedNodes.forEach((node) => {
+              if (node instanceof HTMLElement && node.matches('syn-option')) {
+                handleInitialDisabledForOption(node as SynOption, this.disabled);
+              }
+            });
+          }
+        });
+      }
+
+      // Reenable the mutation observer when it was stopped.
+      // This is needed to make sure that we get future changes again
+      if (stopObserver) {
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+        this.updateComplete.then(() => {
+          this.enableObserver();
+        });
+      }
+    });
+    /* eslint-enable no-param-reassign */
+
+    this.enableObserver();
+  }
+
+  render() {
+    const { disabled } = this;
+    const hasLabelSlot = this.hasSlotController.test('label');
+    const hasLabel = this.label ? true : !!hasLabelSlot;
+    return html`
+      <div
+        class=${classMap({
+          optgroup: true,
+          'optgroup--has-label': hasLabel,
+          'optgroup--has-prefix': this.hasSlotController.test('prefix'),
+          'optgroup--has-suffix': this.hasSlotController.test('suffix'),
+          'optgroup--is-disabled': this.disabled,
+        })}
+        role="${disabled ? 'presentation' : 'group'}"
+        part="base"
+      >
+        <syn-divider class="optgroup__divider" part="divider"></syn-divider>
+        <div class="optgroup__label-container" part="label-container">
+          <slot name="prefix" part="prefix" class="optgroup__prefix"></slot>
+          <slot name="label" part="label" class="optgroup__label">
+            <span class="optgroup__label-content">
+              ${this.label}
+            </span>
+          </slot>
+          <slot name="suffix" part="suffix" class="optgroup__suffix"></slot>
+        </div>
+        <div class="optgroup__options" role="group" part="options">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+}

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

@@ -0,0 +1,71 @@
+<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-optgroup> element creates a grouping for <syn-option>s within a <syn-select>.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-optgroup--docs
+ * @status stable
+ * @since 1.3.0
+ *
+ * @dependency syn-divider
+ *
+ * @slot - The given options. Must be `<syn-option>` elements.
+ * @slot prefix - A presentational prefix icon or similar element.
+ * @slot label - The label for the optgroup
+ * @slot suffix - A presentational suffix icon or similar element.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart label-container - The container that wraps prefix, label and base
+ * @csspart divider - The divider that is displayed above the content
+ * @csspart prefix - The container that wraps the prefix.
+ * @csspart suffix - The container that wraps the suffix.
+ * @csspart options - The container that wraps the <syn-option> elements.
+ *
+ * @cssproperty --display-divider - Display property of the divider. Defaults to "block"
+ */
+import { computed, ref } from 'vue';
+import '@synergy-design-system/components/components/optgroup/optgroup.js';
+
+import type { SynOptgroup } from '@synergy-design-system/components';
+
+// DOM Reference to the element
+const nativeElement = ref<SynOptgroup>();
+
+defineExpose({
+  nativeElement,
+});
+
+// Map attributes
+const props = defineProps<{
+  /**
+   * Disables all options in the optgroup.
+   */
+  disabled?: SynOptgroup['disabled'];
+
+  /**
+   * The optgroups label.
+   * If you need to display HTML, use the `label` slot instead.
+   */
+  label?: SynOptgroup['label'];
+}>();
+
+// 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'),
+  ),
+);
+</script>
+
+<template>
+  <syn-optgroup v-bind="visibleProps" ref="nativeElement">
+    <slot></slot>
+  </syn-optgroup>
+</template>

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

@@ -0,0 +1,79 @@
+// ---------------------------------------------------------------------
+// 🔒 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 { SynOption } from '@synergy-design-system/components';
+
+import '@synergy-design-system/components/components/option/option.js';
+
+/**
+ * @summary Options define the selectable items within various form controls such as [select](/components/select).
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-option--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency syn-icon
+ *
+ * @slot - The option's label.
+ * @slot prefix - Used to prepend an icon or similar element to the menu item.
+ * @slot suffix - Used to append an icon or similar element to the menu item.
+ *
+ * @csspart checked-icon - The checked icon, an `<syn-icon>` element.
+ * @csspart base - The component's base wrapper.
+ * @csspart label - The option's label.
+ * @csspart prefix - The container that wraps the prefix.
+ * @csspart suffix - The container that wraps the suffix.
+ */
+@Component({
+  selector: 'syn-option',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+})
+export class SynOptionComponent {
+  public nativeElement: SynOption;
+  private _ngZone: NgZone;
+
+  constructor(e: ElementRef, ngZone: NgZone) {
+    this.nativeElement = e.nativeElement;
+    this._ngZone = ngZone;
+  }
+
+  /**
+* The option's value.
+* When selected, the containing form control will receive this value.
+* The value must be unique
+from other options in the same group.
+* Values may not contain spaces, as spaces are used as delimiters when listing
+multiple values.
+ */
+  @Input()
+  set value(v: SynOption['value']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.value = v));
+  }
+  get value(): SynOption['value'] {
+    return this.nativeElement.value;
+  }
+
+  /**
+   * Draws the option in a disabled state, preventing selection.
+   */
+  @Input()
+  set disabled(v: '' | SynOption['disabled']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.disabled = v === '' || v),
+    );
+  }
+  get disabled(): SynOption['disabled'] {
+    return this.nativeElement.disabled;
+  }
+}

package/metadata/packages/components/components/syn-option/component.custom.styles.ts

@@ -0,0 +1,81 @@
+import { css } from 'lit';
+
+export default css`
+  /**
+   * The syn-option is now able to adjust its height from a parent item
+   * This is done by exposing multiple css variables to the outside:
+   *
+   * --option-min-height (defaults to 48px) The minimal height of an element
+   * --option-padding (defaults to var(--syn-spacing-small) var(--syn-spacing-medium)) The padding to use
+   * --option-font-size (defaults to var(--syn-font-size-medium)) The font size to use
+   * --option-icon-size (defaults to var(--syn-spacing-large)) The size of the checkmark
+   * 
+   * See below for usage of these variables
+   */
+  .option {
+    font-size: var(--option-font-size, var(--syn-font-size-medium));
+    
+    /* Height is dependent on line-height of .option__label, which does not fit completely to layout */
+    min-height: var(--option-min-height, var(--syn-input-height-medium));
+    padding: var(--option-padding, var(--syn-spacing-small) var(--syn-spacing-medium));
+  }
+
+  .option:not(.option--current) {
+    color: var(--syn-color-neutral-950);
+  }
+
+  /** #429: Use token for opacity */
+  .option--disabled { 
+    opacity: var(--syn-input-disabled-opacity);
+  }
+
+  .option__label {
+    line-height: var(--syn-line-height-normal);
+  }
+
+  .option__check {
+    color: var(--syn-color-primary-600);
+    font-size: var(--option-icon-size, var(--syn-spacing-large));
+  }
+
+  .option .option__check {
+    padding-inline-end: var(--syn-spacing-small);
+  }
+
+  /* Invert the check mark when keyboard navigation is used */
+  .option--current .option__check {
+    color: var(--syn-color-neutral-0);
+  }
+
+  /* Use larger spacing between icons and content */
+  .option__prefix::slotted(*) {
+    margin-inline-end: var(--syn-spacing-small);
+  }
+
+  .option__suffix::slotted(*) {
+    margin-inline-start: var(--syn-spacing-small);
+  }
+
+  /* Set correct icon size when someone uses syn-icon in the slots */
+  .option__prefix::slotted(syn-icon),
+  .option__suffix::slotted(syn-icon) {
+    color: var(--syn-color-neutral-800);
+    font-size: var(--option-icon-size, var(--syn-spacing-large));
+  }
+
+  .option--current .option__prefix::slotted(syn-icon),
+  .option--current .option__suffix::slotted(syn-icon) {
+    color: var(--syn-color-neutral-0);
+  }
+
+  /* This is needed for the highlight styling of the options in syn-combobox */
+  .option__label::slotted(.syn-highlight-style) {
+    background-color: transparent;
+    color: var(--syn-color-neutral-950);
+    font: var(--syn-body-medium-bold);
+  }
+
+  :host([aria-selected='true']) .option__label::slotted(.syn-highlight-style) {
+    color: var(--syn-color-neutral-0);
+  }
+`;

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

@@ -0,0 +1,37 @@
+// ---------------------------------------------------------------------
+// 🔒 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/option/option.component.js';
+
+const tagName = 'syn-option';
+Component.define('syn-option');
+
+/**
+ * @summary Options define the selectable items within various form controls such as [select](/components/select).
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-option--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency syn-icon
+ *
+ * @slot - The option's label.
+ * @slot prefix - Used to prepend an icon or similar element to the menu item.
+ * @slot suffix - Used to append an icon or similar element to the menu item.
+ *
+ * @csspart checked-icon - The checked icon, an `<syn-icon>` element.
+ * @csspart base - The component's base wrapper.
+ * @csspart label - The option's label.
+ * @csspart prefix - The container that wraps the prefix.
+ * @csspart suffix - The container that wraps the suffix.
+ */
+export const SynOption = createComponent({
+  displayName: 'SynOption',
+  elementClass: Component,
+  events: {},
+  react: React,
+  tagName,
+});