@synergy-design-system/metadata 1.0.0 → 3.0.1

package/data/layers/full/component/component:syn-optgroup/components/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/data/layers/full/component/component:syn-optgroup/components/optgroup.styles.ts

@@ -0,0 +1,61 @@
+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;
+    border: solid transparent;
+    border-width: 0 var(--option-inset-border-vertical);
+    box-sizing: border-box;
+    color: var(--syn-input-color);
+    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: 0 calc(var(--option-padding) - var(--option-inset-border-vertical));
+  }
+
+  /**
+   * 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-option-icon-color);
+    font-size: var(--syn-spacing-large);
+  }
+
+  .optgroup__options ::slotted(syn-option[hidden]) {
+    display: none;
+  }
+`;

package/data/layers/full/component/component:syn-optgroup/components/optgroup.ts

@@ -0,0 +1,13 @@
+/* eslint-disable */
+import SynOptGroup from './optgroup.component.js';
+
+export * from './optgroup.component.js';
+export default SynOptGroup;
+
+SynOptGroup.define('syn-optgroup');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'syn-optgroup': SynOptGroup;
+  }
+}

package/data/layers/full/component/component:syn-optgroup/react/SynOptgroupJSXElement.ts

@@ -0,0 +1 @@
+export type SynOptgroupJSXElement = SynCustomElement<SynOptgroup, []>;

package/data/layers/full/component/component:syn-optgroup/react/optgroup.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/data/layers/full/component/component:syn-optgroup/vue/SynVueOptgroup.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/data/layers/full/component/component:syn-option/angular/option.component.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/data/layers/full/component/component:syn-option/components/option-size.styles.ts

@@ -0,0 +1,37 @@
+import { css } from 'lit';
+
+export default css`
+  /**
+   * Size adjustments for syn-select and other widgets that use syn-option
+   * This allows to share the common settings between all components that
+   * should be able to set the size of a syn-option tag.
+   *
+   * Also note that we have to adjust the padding to take the border size into account.
+   */
+  :host([size="small"]) {
+    --option-inset-border-horizontal: var(--syn-spacing-2x-small);
+    --option-inset-border-vertical: calc(var(--syn-spacing-x-small) - 1px);
+    --option-min-height: var(--syn-input-height-small);
+    --option-padding: var(--syn-input-spacing-small);
+    --option-font-size: var(--syn-input-font-size-small);
+    --option-icon-size: var(--syn-spacing-medium);
+  }
+
+  :host([size="medium"]) {
+    --option-inset-border-horizontal: var(--syn-spacing-2x-small);
+    --option-inset-border-vertical: calc(var(--syn-spacing-x-small) - 1px);
+    --option-min-height: var(--syn-input-height-medium);
+    --option-padding: var(--syn-input-spacing-medium);
+    --option-font-size: var(--syn-input-font-size-medium);
+    --option-icon-size: var(--syn-spacing-large);
+  }
+
+  :host([size="large"]) {
+    --option-inset-border-horizontal: var(--syn-spacing-2x-small);
+    --option-inset-border-vertical: calc(var(--syn-spacing-x-small) - 1px);
+    --option-min-height: var(--syn-input-height-large);
+    --option-padding: var(--syn-input-spacing-large);
+    --option-font-size: var(--syn-input-font-size-large);
+    --option-icon-size: var(--syn-spacing-x-large);
+  }
+`;

package/data/layers/full/component/component:syn-option/components/option.component.ts

@@ -0,0 +1,191 @@
+/* eslint-disable */
+import { classMap } from 'lit/directives/class-map.js';
+import { html } from 'lit';
+import { LocalizeController } from '../../utilities/localize.js';
+import { property, query, state } from 'lit/decorators.js';
+import { watch } from '../../internal/watch.js';
+import componentStyles from '../../styles/component.styles.js';
+import SynergyElement from '../../internal/synergy-element.js';
+import SynIcon from '../icon/icon.component.js';
+import styles from './option.styles.js';
+import { delimiterToWhiteSpace } from './utility.js';
+import type { CSSResultGroup } from 'lit';
+import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.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.
+ */
+@enableDefaultSettings('SynOption')
+export default class SynOption extends SynergyElement {
+  static styles: CSSResultGroup = [componentStyles, styles];
+  static dependencies = { 'syn-icon': SynIcon };
+
+  // @ts-expect-error - Controller is currently unused
+  private readonly localize = new LocalizeController(this);
+
+  // #1036: Needed to store the original value before any delimiter processing
+  private originalValue: string | number = '';
+  private isInitialized = false;
+
+  @query('.option__label') defaultSlot: HTMLSlotElement;
+
+  // the delimiter used to separate multiple values in a select
+  // This is provided by the wrapping syn-select
+  @state() delimiter = ' ';
+
+  @state() current = false; // the user has keyed into the option, but hasn't selected it yet (shows a highlight)
+  @state() selected = false; // the option is selected and has aria-selected="true"
+  @state() hasHover = false; // we need this because Safari doesn't honor :hover styles while dragging
+
+  /**
+   * 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.
+   */
+  @property({ reflect: true }) value: string | number = '';
+
+  /** Draws the option in a disabled state, preventing selection. */
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute('role', 'option');
+    this.setAttribute('aria-selected', 'false');
+  }
+
+  private handleDefaultSlotChange() {
+    if (this.isInitialized) {
+      // When the label changes, tell the controller to update
+      this.triggerParentDefaultSlotChange();
+    } else {
+      this.isInitialized = true;
+    }
+  }
+
+  private handleMouseEnter() {
+    this.hasHover = true;
+  }
+
+  private handleMouseLeave() {
+    this.hasHover = false;
+  }
+
+  @watch('disabled')
+  handleDisabledChange() {
+    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
+  }
+
+  @watch('selected')
+  handleSelectedChange() {
+    this.setAttribute('aria-selected', this.selected ? 'true' : 'false');
+  }
+
+  @watch('delimiter')
+  handleDelimiterChange() {
+    this.sanitizeValueForDelimiter();
+  }
+
+  @watch('value')
+  handleValueChange() {
+    this.originalValue = this.value;
+    this.sanitizeValueForDelimiter();
+  }
+
+  /**
+   * Replaces any occurrences of the delimiter in the option's original value with underscores.
+   */
+  sanitizeValueForDelimiter() {
+    let value = this.originalValue;
+    if (typeof value === 'number') {
+      return;
+    }
+
+    // Ensure the value is a string. This ensures the next line doesn't error and allows framework users to pass numbers
+    // instead of requiring them to cast the value to a string.
+    if (typeof value !== 'string') {
+      value = String(value);
+    }
+
+    const { delimiter } = this;
+
+    if (value.includes(delimiter)) {
+      console.error(`Option values cannot include "${delimiter}". All occurrences of "${delimiter}" have been replaced with "_".`, this);
+      value = delimiterToWhiteSpace(value, this.delimiter);
+    }
+    this.value = value;
+    // #1056 We need to trigger the parent component's default slot change, so it can update its value selection
+    this.triggerParentDefaultSlotChange();
+  }
+
+  /** Returns a plain text label based on the option's content. */
+  getTextLabel() {
+    const nodes = this.childNodes;
+    let label = '';
+
+    [...nodes].forEach(node => {
+      if (node.nodeType === Node.ELEMENT_NODE) {
+        if (!(node as HTMLElement).hasAttribute('slot')) {
+          label += (node as HTMLElement).textContent;
+        }
+      }
+
+      if (node.nodeType === Node.TEXT_NODE) {
+        label += node.textContent;
+      }
+    });
+
+    return label.trim();
+  }
+
+  private triggerParentDefaultSlotChange() {
+    customElements.whenDefined('syn-combobox').then(() => {
+      const controller = this.closest('syn-combobox');
+      if (controller) {
+        controller.handleDefaultSlotChange();
+      }
+    });
+    customElements.whenDefined('syn-select').then(() => {
+      const controller = this.closest('syn-select');
+      if (controller) {
+        controller.handleDefaultSlotChange();
+      }
+    });
+  }
+
+  render() {
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+          option: true,
+          'option--current': this.current,
+          'option--disabled': this.disabled,
+          'option--selected': this.selected,
+          'option--hover': this.hasHover
+        })}
+        @mouseenter=${this.handleMouseEnter}
+        @mouseleave=${this.handleMouseLeave}
+      >
+        <syn-icon part="checked-icon" class="option__check" name="check" library="system" aria-hidden="true"></syn-icon>
+        <slot part="prefix" name="prefix" class="option__prefix"></slot>
+        <slot part="label" class="option__label" @slotchange=${this.handleDefaultSlotChange}></slot>
+        <slot part="suffix" name="suffix" class="option__suffix"></slot>
+      </div>
+    `;
+  }
+}