@synergy-design-system/mcp 2.2.0 → 2.3.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## 2.3.0
+
+### Minor Changes
+
+- [#1164](https://github.com/synergy-design-system/synergy-design-system/pull/1164) [`c9fb440`](https://github.com/synergy-design-system/synergy-design-system/commit/c9fb4405c0a1eb3499e4753447ac643ae632ff56) Thanks [@kirchsuSICKAG](https://github.com/kirchsuSICKAG)! - Released on: 2026-02-05
+
+  feat: ✨ syn-combobox multiple (#627)
+
+  Adds multiple selection functionality to the `syn-combobox` component, enabling users to select multiple options simultaneously.
+
+  **Properties Added:**
+  - `multiple`: Enables multiple selection mode
+  - `delimiter`: Customizable value separator (default: ` ` (space))
+  - `max-options-visible`: Controls visible tag limit with overflow handling
+  - `getTag`: Custom tag rendering function
+
 ## 2.2.0
 
 ### Minor Changes

package/metadata/checksum.txt

@@ -1 +1 @@
-3007b6dfa99e8c9fc41b50602aa8e10e
+1a29dc1518c723ce97428da6e384beb8

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

@@ -27,12 +27,15 @@ import type { SynErrorEvent } from '@synergy-design-system/components';
 import '@synergy-design-system/components/components/combobox/combobox.js';
 
 /**
- * @summary Comboboxes allow you to choose items from a menu of predefined options.
+ * @summary A combobox component that combines the functionality of a text input with a dropdown listbox,
+ * allowing users to either select from predefined options or enter custom values (when not restricted).
+ *
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-combobox--docs
  * @status stable
  *
  * @dependency syn-icon
  * @dependency syn-popup
+ * @dependency syn-tag
  *
  * @slot - The listbox options. Must be `<syn-option>` elements.
  *    You can use `<syn-optgroup>`'s to group items visually.
@@ -62,7 +65,7 @@ import '@synergy-design-system/components/components/combobox/combobox.js';
  * @csspart form-control-label - The label's wrapper.
  * @csspart form-control-input - The combobox's wrapper.
  * @csspart form-control-help-text - The help text's wrapper.
- * @csspart combobox - The container the wraps the prefix, combobox, clear icon, and expand button.
+ * @csspart combobox - The container that wraps the prefix, combobox, clear icon, and expand button.
  * @csspart prefix - The container that wraps the prefix slot.
  * @csspart suffix - The container that wraps the suffix slot.
  * @csspart display-input - The element that displays the selected option's label,
@@ -75,6 +78,12 @@ import '@synergy-design-system/components/components/combobox/combobox.js';
  * @csspart popup - The popup's exported `popup` part.
  * Use this to target the tooltip's popup container.
  * @csspart no-results - The container that wraps the "no results" message.
+ * @csspart tags - The container that houses option tags when `multiple` is used.
+ * @csspart tag - The individual tags that represent each selected option in `multiple`.
+ * @csspart tag__base - The tag's base part.
+ * @csspart tag__content - The tag's content part.
+ * @csspart tag__remove-button - The tag's remove button.
+ * @csspart tag__remove-button__base - The tag's remove button base part.
  *
  * @animation combobox.show - The animation to use when showing the combobox.
  * @animation combobox.hide - The animation to use when hiding the combobox.
@@ -168,17 +177,6 @@ export class SynComboboxComponent {
     return this.nativeElement.name;
   }
 
-  /**
-   * The current value of the combobox, submitted as a name/value pair with form data.
-   */
-  @Input()
-  set value(v: SynCombobox['value']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.value = v));
-  }
-  get value(): SynCombobox['value'] {
-    return this.nativeElement.value;
-  }
-
   /**
    * The combobox's size.
    */
@@ -308,6 +306,7 @@ The form must be in the same document or shadow root for this to work.
   /**
 * When set to `true`, restricts the combobox to only allow selection from the available options.
 Users will not be able to enter custom values that are not present in the list.
+This will always be true, if `multiple` is active.
  */
   @Input()
   set restricted(v: '' | SynCombobox['restricted']) {
@@ -319,6 +318,20 @@ Users will not be able to enter custom values that are not present in the list.
     return this.nativeElement.restricted;
   }
 
+  /**
+* Allows more than one option to be selected.
+If `multiple` is set, the combobox will always be `restricted` to the available options
+ */
+  @Input()
+  set multiple(v: '' | SynCombobox['multiple']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.multiple = v === '' || v),
+    );
+  }
+  get multiple(): SynCombobox['multiple'] {
+    return this.nativeElement.multiple;
+  }
+
   /**
 * A function that customizes the rendered option.
 * The first argument is the option, the second
@@ -347,6 +360,64 @@ The default filter method is a case- and diacritic-insensitive string comparison
     return this.nativeElement.filter;
   }
 
+  /**
+* The delimiter to use when setting the value when `multiple` is enabled.
+The default is a space ' ', but you can set it to a comma or other character(s).
+ */
+  @Input()
+  set delimiter(v: SynCombobox['delimiter']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.delimiter = v));
+  }
+  get delimiter(): SynCombobox['delimiter'] {
+    return this.nativeElement.delimiter;
+  }
+
+  /**
+* The maximum number of selected options to show when `multiple` is true.
+* After the maximum, "+n" will be shown to
+indicate the number of additional items that are selected.
+* Set to 0 to remove the limit.
+ */
+  @Input()
+  set maxOptionsVisible(v: SynCombobox['maxOptionsVisible']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.maxOptionsVisible = v),
+    );
+  }
+  get maxOptionsVisible(): SynCombobox['maxOptionsVisible'] {
+    return this.nativeElement.maxOptionsVisible;
+  }
+
+  /**
+* A function that customizes the tags to be rendered when `multiple` is true.
+* The first argument is the option, the second
+is the current tag's index.
+* The function should return either a Lit TemplateResult or a string containing trusted HTML of the symbol to render at
+the specified value.
+ */
+  @Input()
+  set getTag(v: SynCombobox['getTag']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.getTag = v));
+  }
+  get getTag(): SynCombobox['getTag'] {
+    return this.nativeElement.getTag;
+  }
+
+  /**
+* The current value of the combobox, submitted as a name/value pair with form data.
+* When `multiple` is enabled, the
+value attribute will be a list of values  separated by the delimiter, based on the options selected, and the value property will
+be an array.
+* **For this reason, values must not contain the delimiter character.**
+ */
+  @Input()
+  set value(v: SynCombobox['value']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.value = v));
+  }
+  get value(): SynCombobox['value'] {
+    return this.nativeElement.value;
+  }
+
   /**
    * Emitted when the control's value changes.
    */

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

@@ -2,6 +2,13 @@ import { css } from 'lit';
 import sharedOptionSize from '../option/option-size.styles.js';
 
 export default css`
+
+  .combobox__display-input {
+    flex: 1;
+    min-width: var(--syn-spacing-2x-large);
+    width: unset;
+  }
+
   .combobox:not(.combobox--disabled) .combobox__display-input {
     cursor: text;
   }
@@ -31,5 +38,85 @@ export default css`
     padding: 0 var(--syn-spacing-large) 0 68px;
   }
 
+  /* Multi Select */
+  .combobox__tags {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    margin-inline-start: var(--syn-spacing-2x-small);
+  }
+
+  .combobox__tags::slotted(syn-tag) {
+    cursor: pointer !important;
+  }
+
+  .combobox--disabled .combobox__tags,
+  .combobox--disabled .combobox__tags::slotted(syn-tag) {
+    cursor: not-allowed !important;
+  }
+
+  .combobox--small .combobox__tags {
+    gap: var(--syn-spacing-2x-small);
+  }
+
+  .combobox--medium .combobox__tags {
+    gap: var(--syn-spacing-x-small);
+  }
+
+  .combobox--large .combobox__tags {
+    gap: var(--syn-spacing-small);
+  }
+
+  .combobox--tags-visible.combobox--small .combobox__tags {
+    margin-inline-end: var(--syn-spacing-x-small);
+  }
+
+  .combobox--tags-visible.combobox--medium .combobox__tags {
+    margin-inline-end: var(--syn-input-spacing-small);
+  }
+
+  .combobox--tags-visible.combobox--large .combobox__tags {
+    margin-inline-end: var(--syn-input-spacing-medium);
+  }
+
+  /**
+   * #850: Allow to measure the size of the combobox.
+   * This is needed so we can automatically size and truncate the tags in the <syn-combobox multiple> component.
+   * Scoped to multiple to not break the single select per accident.
+   * Scoped to when placeholder is not visible to not break the placeholder visualization
+   */
+  :host([multiple]) :not(.combobox--placeholder-visible).combobox--tags-visible > .combobox__inputs > .combobox__tags {
+    min-width: 85px;
+    overflow: hidden;
+  }
+
+  :host([multiple]) .combobox__tags > div {
+    display: contents;
+  }
+
+  :host([multiple]) .combobox__tags > div > syn-tag {
+    --syn-tag-position-adjustment: var(--syn-spacing-3x-small);
+
+    max-width: var(--syn-select-tag-max-width);
+  }
+
+  :host([multiple]) .combobox__tags > div > syn-tag::part(content) {
+    display: initial;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* 
+  This class is needed to be able to hide the options as long as the popup close animation is running.
+  As otherwise the listbox would flicker because the options are shown again when the value is reset to empty string.
+  */
+  .options__hide {
+    /* We need to set the slot to something different than display: contents to be able to hide it. Also it should not take any space so we remove the height */
+    display: block;
+    height: 0;
+    opacity: 0;
+  }
+
   ${sharedOptionSize}
 `;

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

@@ -24,12 +24,15 @@ const tagName = 'syn-combobox';
 Component.define('syn-combobox');
 
 /**
- * @summary Comboboxes allow you to choose items from a menu of predefined options.
+ * @summary A combobox component that combines the functionality of a text input with a dropdown listbox,
+ * allowing users to either select from predefined options or enter custom values (when not restricted).
+ *
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-combobox--docs
  * @status stable
  *
  * @dependency syn-icon
  * @dependency syn-popup
+ * @dependency syn-tag
  *
  * @slot - The listbox options. Must be `<syn-option>` elements.
  *    You can use `<syn-optgroup>`'s to group items visually.
@@ -59,7 +62,7 @@ Component.define('syn-combobox');
  * @csspart form-control-label - The label's wrapper.
  * @csspart form-control-input - The combobox's wrapper.
  * @csspart form-control-help-text - The help text's wrapper.
- * @csspart combobox - The container the wraps the prefix, combobox, clear icon, and expand button.
+ * @csspart combobox - The container that wraps the prefix, combobox, clear icon, and expand button.
  * @csspart prefix - The container that wraps the prefix slot.
  * @csspart suffix - The container that wraps the suffix slot.
  * @csspart display-input - The element that displays the selected option's label,
@@ -72,6 +75,12 @@ Component.define('syn-combobox');
  * @csspart popup - The popup's exported `popup` part.
  * Use this to target the tooltip's popup container.
  * @csspart no-results - The container that wraps the "no results" message.
+ * @csspart tags - The container that houses option tags when `multiple` is used.
+ * @csspart tag - The individual tags that represent each selected option in `multiple`.
+ * @csspart tag__base - The tag's base part.
+ * @csspart tag__content - The tag's content part.
+ * @csspart tag__remove-button - The tag's remove button.
+ * @csspart tag__remove-button__base - The tag's remove button base part.
  *
  * @animation combobox.show - The animation to use when showing the combobox.
  * @animation combobox.hide - The animation to use when hiding the combobox.

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

@@ -367,32 +367,4 @@ export default css`
   .combobox__listbox ::slotted(syn-optgroup:first-of-type) {
     --display-divider: none;
   }
-
-  /**
-   * #850: Allow to measure the size of the combobox.
-   * This is needed so we can automatically size and truncate the tags in the <syn-combobox multiple> component.
-   * Scoped to multiple to not break the single combobox per accident.
-   * Scoped to when placeholder is not visible to not break the placeholder visualization
-   */
-  :host([multiple]) :not(.combobox--placeholder-visible) > .combobox__inputs > .combobox__tags {
-    min-width: 100px;
-    overflow: hidden;
-  }
-
-  :host([multiple]) .combobox__tags > div {
-    display: contents;
-  }
-
-  :host([multiple]) .combobox__tags > div > syn-tag {
-    --syn-tag-position-adjustment: var(--syn-spacing-3x-small);
-
-    max-width: var(--syn-combobox-tag-max-width);
-  }
-
-  :host([multiple]) .combobox__tags > div > syn-tag::part(content) {
-    display: initial;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
 `;