@synergy-design-system/metadata 1.0.0 → 3.0.0

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

@@ -0,0 +1,393 @@
+import { css } from 'lit';
+import sharedOptionSize from '../option/option-size.styles.js';
+
+export default css`
+  /* stylelint-disable property-no-vendor-prefix */
+  /* stylelint-disable no-descending-specificity */
+  :host {
+    /* Size-dependent CSS custom properties - defaults to medium */
+    --syn-combobox-input-border-radius: var(--syn-input-border-radius-medium);
+    --syn-combobox-input-font-size: var(--syn-input-font-size-medium);
+    --syn-combobox-input-height: var(--syn-input-height-medium);
+    --syn-combobox-input-spacing: var(--syn-input-spacing-medium);
+    --syn-combobox-clear-font-size: var(--syn-spacing-large);
+    --syn-combobox-clear-margin: var(--syn-spacing-small);
+    --syn-combobox-prefix-suffix-margin: var(--syn-input-spacing-small);
+    --syn-combobox-icon-font-size: var(--syn-font-size-x-large);
+    --syn-combobox-expand-icon-font-size: var(--syn-spacing-large);
+    --syn-combobox-tags-gap: var(--syn-spacing-x-small);
+    --syn-combobox-tags-margin: var(--syn-input-spacing-small);
+    --syn-combobox-no-results-font-size: var(--syn-input-font-size-medium);
+    --syn-combobox-no-results-height: var(--syn-input-height-medium);
+    --syn-combobox-no-results-padding: var(--syn-spacing-small) var(--syn-spacing-medium) var(--syn-spacing-small) 52px;
+
+    display: block;   
+  }
+
+  /** The popup */
+  .combobox {
+    display: inline-flex;
+    flex: 1 1 auto;
+    position: relative;
+    vertical-align: middle;
+    width: 100%;
+  }
+
+  .combobox::part(popup) {
+    z-index: var(--syn-z-index-dropdown);
+  }
+
+  .combobox[data-current-placement^='top']::part(popup) {
+    transform-origin: bottom;
+  }
+
+  .combobox[data-current-placement^='bottom']::part(popup) {
+    transform-origin: top;
+  }
+
+  /* Combobox */
+  .combobox__inputs {
+    align-items: center;
+    border-radius: var(--syn-combobox-input-border-radius);
+    cursor: pointer;
+    display: flex;
+    flex: 1;
+    font-family: var(--syn-input-font-family);
+    font-size: var(--syn-combobox-input-font-size);
+    font-weight: var(--syn-input-font-weight);
+    justify-content: start;
+    letter-spacing: var(--syn-input-letter-spacing);
+    min-height: var(--syn-combobox-input-height);
+    min-width: 0;
+    overflow: hidden;
+    padding-block: 0;
+    padding-inline: var(--syn-combobox-input-spacing);
+    position: relative;
+    transition:
+      var(--syn-transition-fast) color,
+      var(--syn-transition-fast) border,
+      var(--syn-transition-fast) box-shadow,
+      var(--syn-transition-fast) background-color;
+    vertical-align: middle;
+    width: 100%;
+  }
+
+  .combobox__display-input {
+    -webkit-appearance: none;
+    appearance: none;
+    background: none;
+    border: none;
+    color: var(--syn-input-color);
+    cursor: inherit;
+    flex: 1;
+    font: inherit;
+    margin: 0;
+    min-width: var(--syn-spacing-2x-large);
+    overflow: hidden;
+    padding: 0;
+    position: relative;
+    width: unset;
+  }
+
+  .combobox__display-input::placeholder {
+    color: var(--syn-input-placeholder-color);
+  }
+
+  .combobox__display-input:focus {
+    outline: none;
+  }
+
+  .combobox:not(.combobox--disabled):not(.combobox--readonly) .combobox__display-input {
+    cursor: text;
+  }
+
+  .combobox:not(.combobox--disabled):hover:not(.combobox--readonly) .combobox__display-input {
+    color: var(--syn-input-color-hover);
+  }
+
+  .combobox__value-input {
+    height: 100%;
+    left: 0;
+    margin: 0;
+    opacity: 0;
+    padding: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    z-index: -1;
+  }
+
+  /* Standard combobox */
+  .combobox--standard .combobox__inputs {
+    background-color: var(--syn-input-background-color);
+    border: solid var(--syn-input-border-width) var(--syn-input-border-color);
+  }
+
+  .combobox--standard.combobox--disabled .combobox__inputs {
+    background-color: var(--syn-input-background-color-disabled);
+    border-color: var(--syn-input-border-color-disabled);
+    color: var(--syn-input-color-disabled);
+    cursor: not-allowed;
+    opacity: var(--syn-input-disabled-opacity); /** #429: Use token for opacity */
+    outline: none;
+  }
+
+  /* Change combobox border on hover */
+  .combobox:not(.combobox--disabled):not(.combobox--readonly):hover .combobox__inputs {
+    border-color: var(--syn-input-border-color-hover);
+  }
+
+  /* Size variants */
+  .combobox--small {
+    --syn-combobox-input-border-radius: var(--syn-input-border-radius-small);
+    --syn-combobox-input-font-size: var(--syn-input-font-size-small);
+    --syn-combobox-input-height: var(--syn-input-height-small);
+    --syn-combobox-input-spacing: var(--syn-input-spacing-small);
+    --syn-combobox-clear-font-size: var(--syn-spacing-medium);
+    --syn-combobox-clear-margin: var(--syn-input-spacing-small);
+    --syn-combobox-prefix-suffix-margin: var(--syn-spacing-x-small);
+    --syn-combobox-icon-font-size: var(--syn-font-size-medium);
+    --syn-combobox-expand-icon-font-size: var(--syn-spacing-medium);
+    --syn-combobox-tags-gap: var(--syn-spacing-2x-small);
+    --syn-combobox-tags-margin: var(--syn-spacing-x-small);
+    --syn-combobox-no-results-font-size: var(--syn-input-font-size-small);
+    --syn-combobox-no-results-height: var(--syn-input-height-small);
+    --syn-combobox-no-results-padding: 0 var(--syn-spacing-small) 0 40px;
+  }
+
+  .combobox--large {
+    --syn-combobox-input-border-radius: var(--syn-input-border-radius-large);
+    --syn-combobox-input-font-size: var(--syn-input-font-size-large);
+    --syn-combobox-input-height: var(--syn-input-height-large);
+    --syn-combobox-input-spacing: var(--syn-input-spacing-large);
+    --syn-combobox-clear-font-size: var(--syn-spacing-x-large);
+    --syn-combobox-clear-margin: var(--syn-input-spacing-large);
+    --syn-combobox-prefix-suffix-margin: var(--syn-input-spacing-medium);
+    --syn-combobox-icon-font-size: var(--syn-font-size-2x-large);
+    --syn-combobox-expand-icon-font-size: var(--syn-spacing-x-large);
+    --syn-combobox-tags-gap: var(--syn-spacing-small);
+    --syn-combobox-tags-margin: var(--syn-input-spacing-medium);
+    --syn-combobox-no-results-font-size: var(--syn-input-font-size-large);
+    --syn-combobox-no-results-height: var(--syn-input-height-large);
+    --syn-combobox-no-results-padding: 0 var(--syn-spacing-large) 0 68px;
+  }
+
+  /* Prefix and Suffix */
+  .combobox__prefix,
+  .combobox__suffix {
+    align-items: center;
+    color: var(--syn-input-icon-color);
+    display: inline-flex;
+    flex: 0;
+  }
+
+  .combobox__prefix::slotted(*) {
+    margin-inline-end: var(--syn-combobox-prefix-suffix-margin);
+  }
+
+  .combobox__suffix::slotted(*) {
+    margin-inline-start: var(--syn-combobox-prefix-suffix-margin);
+  }
+
+  .combobox__suffix::slotted(syn-icon),
+  .combobox__prefix::slotted(syn-icon) {
+    font-size: var(--syn-combobox-icon-font-size);
+  }
+
+  /* Clear button */
+  .combobox__clear {
+    align-items: center;
+    background: none;
+    border: none;
+    color: var(--syn-input-icon-icon-clearable-color);
+    cursor: pointer;
+    display: inline-flex;
+    font-size: var(--syn-combobox-clear-font-size);
+    justify-content: center;
+    margin-inline-start: var(--syn-combobox-clear-margin);
+    padding: 0;
+    transition: var(--syn-transition-fast) color;
+  }
+
+  .combobox__clear:hover {
+    color: var(--syn-input-icon-color-hover);
+  }
+
+  .combobox__clear:focus {
+    outline: none;
+  }
+
+  /* Expand icon */
+  .combobox__expand-icon {
+    align-items: center;
+    color: var(--syn-color-neutral-950);
+    display: flex;
+    flex: 0 0 auto;
+    font-size: var(--syn-combobox-expand-icon-font-size);
+    margin-inline-start: var(--syn-spacing-small);
+    rotate: 0deg;
+    transition: var(--syn-transition-medium) rotate ease;
+  }
+
+  .combobox--open .combobox__expand-icon {
+    rotate: -180deg;
+  }
+
+  /* Listbox */
+  .combobox__listbox {
+    background: var(--syn-panel-background-color);
+    border: solid var(--syn-panel-border-width) var(--syn-panel-border-color);
+    border-radius: var(--syn-input-border-radius-medium);
+    box-shadow: var(--syn-shadow-medium);
+    display: block;
+    font-family: var(--syn-font-sans);
+    font-size: var(--syn-font-size-medium);
+    font-weight: var(--syn-font-weight-normal);
+    max-height: var(--auto-size-available-height); /* Make sure it adheres to the popup's auto size */
+    max-width: var(--auto-size-available-width);
+    overflow: auto;
+    overscroll-behavior: none;
+    padding-block: var(--syn-spacing-x-small);
+    padding-inline: 0;
+    position: relative;   
+  }
+
+  .combobox__listbox ::slotted(syn-divider) {
+    --spacing: var(--syn-spacing-x-small);
+  }
+
+  .combobox__listbox ::slotted(small) {
+    color: var(--syn-color-neutral-500);
+    display: block;
+    font-size: var(--syn-font-size-small);
+    font-weight: var(--syn-font-weight-semibold);
+    padding-block: var(--syn-spacing-2x-small);
+    padding-inline: var(--syn-spacing-x-large);
+  }
+
+  /* Multi Select */
+  .combobox__tags {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--syn-combobox-tags-gap);
+    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--tags-visible .combobox__tags {
+    margin-inline-end: var(--syn-combobox-tags-margin);
+  }
+
+  .listbox__options ::slotted(syn-option[hidden]), 
+  .listbox__options ::slotted(syn-optgroup[hidden]) {
+    display: none;
+  }
+
+  .listbox__no-results {
+    align-items: center;
+    color: var(--syn-color-neutral-950);
+    display: flex;
+    font-size: var(--syn-combobox-no-results-font-size);
+    font-weight: var(--syn-font-weight-normal);
+    min-height: var(--syn-combobox-no-results-height);
+    padding: var(--syn-combobox-no-results-padding);
+  }
+
+  /**
+   * #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;
+  }
+
+  /**
+   * Invalid user data
+   */
+  :host([data-user-invalid]) .combobox__inputs {
+    border-color: var(--syn-input-border-color-focus-error);
+  }
+
+  :host([data-user-invalid]) .combobox--standard:not(.combobox--disabled).combobox--open .combobox__inputs,
+  :host([data-user-invalid]) .combobox--standard:not(.combobox--disabled).combobox--focused .combobox__inputs {
+    border-color: var(--syn-input-border-color-focus-error);
+    box-shadow: 0 0 0 var(--syn-focus-ring-width) var(--syn-input-focus-ring-error);
+  }
+
+  .combobox--standard:not(.combobox--disabled).combobox--open .combobox__inputs,
+  .combobox--standard:not(.combobox--disabled).combobox--focused .combobox__inputs {
+    background-color: var(--syn-input-background-color-focus);
+    border-color: var(--syn-input-border-color-focus);
+    box-shadow: 0 0 0 var(--syn-focus-ring-width) var(--syn-input-focus-ring-color);
+  }
+
+  .combobox--standard.combobox--readonly.combobox--focused .combobox__inputs {
+    background: var(--syn-readonly-background-color);
+    border-color: var(--syn-input-border-color-focus);
+    box-shadow: 0 0 0 var(--syn-focus-ring-width) var(--syn-input-focus-ring-color);
+  }
+
+  /**
+   * Make sure to hide the syn-divider for the first syn-optgroup
+   * Note! ::slotted does currently not work with ::part, so we
+   * opted for using a css variable here.
+   */
+  .combobox__listbox ::slotted(syn-optgroup:first-of-type) {
+    --display-divider: none;
+  }
+
+  /**
+   * #1172: Add support for readonly
+   */
+  .combobox--readonly .combobox__inputs {
+    background: var(--syn-readonly-background-color);
+    border-color: var(--syn-readonly-background-color);
+    cursor: default;
+  }
+
+  .combobox--readonly .combobox__expand-icon {
+    color: var(--syn-readonly-icon-color-expand);
+  }
+
+  ${sharedOptionSize}
+`;

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

@@ -0,0 +1,12 @@
+import SynCombobox from './combobox.component.js';
+
+export * from './combobox.component.js';
+export default SynCombobox;
+
+SynCombobox.define('syn-combobox');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'syn-combobox': SynCombobox;
+  }
+}

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

@@ -0,0 +1,47 @@
+import { type TemplateResult } from 'lit';
+import type SynOption from '../option/option.component.js';
+
+/**
+ * A type definition for a function that renders an option.
+ *
+ * @param option - The option to be rendered.
+ * @param query - The current query string used for filtering options.
+ * @returns - The changed option to render
+ */
+export type OptionRenderer = (
+  option: SynOption,
+  query?: string,
+) => TemplateResult | string | HTMLElement;
+
+/**
+ * The default option renderer, which does not change the option.
+ */
+export const defaultOptionRenderer: OptionRenderer = (option: SynOption) => option;
+
+/**
+ * A function that highlights the query string with a mark element in the option.
+ */
+export const highlightOptionRenderer: OptionRenderer = (option: SynOption, query: string) => {
+  if (!query) {
+    return option;
+  }
+
+  const clonedOption = option.cloneNode(true) as SynOption;
+  const optionLabel = clonedOption.getTextLabel();
+  // copy the "selected" property value, as it is not copied by cloneNode
+  clonedOption.selected = option.selected;
+
+  const queryIndex = optionLabel.toLowerCase().indexOf(query.toLowerCase());
+  const indexLabel = clonedOption.innerHTML.indexOf(optionLabel);
+
+  const mark = document.createElement('mark');
+  mark.textContent = optionLabel.slice(queryIndex, queryIndex + query.length);
+  mark.classList.add('syn-highlight-style');
+
+  const exchangedText = optionLabel.replace(new RegExp(query, 'i'), mark.outerHTML);
+  const previousContent = clonedOption.innerHTML.slice(0, indexLabel);
+  const followingContent = clonedOption.innerHTML.slice(indexLabel + optionLabel.length);
+
+  clonedOption.innerHTML = previousContent.concat(exchangedText, followingContent);
+  return clonedOption;
+};

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

@@ -0,0 +1,134 @@
+import { type TemplateResult, html, render } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import type SynOptGroup from '../optgroup/optgroup.js';
+import type SynOption from '../option/option.component.js';
+
+/**
+ * Get a list of all assigned elements for a given slot
+ * @param slot The slot to query
+ * @returns Flattened list of assigned elements
+ */
+export const getAssignedElementsForSlot = (slot: HTMLSlotElement) => Array.from(
+  slot.assignedElements({ flatten: true }),
+) as HTMLElement[];
+
+/**
+ * Retrieves the option or nested options from the provided HTMLElement.
+ *
+ * @param item - The HTMLElement representing the option or containing nested options.
+ * @returns The found syn-option(s)
+ */
+export const getOptionOrNestedOptions = (item: HTMLElement): SynOption | SynOption[] => (
+  item.tagName.toLocaleLowerCase() === 'syn-option' ? item as SynOption : Array.from(item.querySelectorAll<SynOption>(':scope > syn-option'))
+);
+
+/**
+ * Check if an item is a syn-optgroup
+ * @param item The item to check for
+ * @returns True if the item is a SynOptgroup, false otherwise
+ */
+export const isOptgroup = (item: HTMLElement): item is SynOptGroup => (
+  item.tagName.toLocaleLowerCase() === 'syn-optgroup'
+);
+
+/**
+ * Get a list of only Option elements
+ * @param items List of items to check for
+ * @returns New array of all found syn-nav-items
+ */
+export const getAllOptions = (items: HTMLElement[]) => items.map(getOptionOrNestedOptions);
+
+/**
+ * Get a list of only Optgroup elements
+ * @param items List of items to check for
+ * @returns New array of all found syn-optgroup's
+ */
+export const filterOnlyOptgroups = (items: HTMLElement[]) => items.filter(isOptgroup);
+
+/**
+ * Normalize a string by removing accents and converting to lowercase
+ * @param str The string to normalize
+ * @returns The normalized string
+ */
+export const normalizeString = (str: string) => str.normalize('NFD').replace(/[\u0300-\u036f]/g, '').toLowerCase();
+
+/**
+ * Creates a `SynOption` element from a given `TemplateResult`.
+ * We assume that the given `TemplateResult` is a <syn-option>.
+ *
+ * @param template - The `TemplateResult` to be rendered into a `SynOption`.
+ * @returns The created SynOption element
+ */
+export const createElementFromTemplateResult = (template: TemplateResult) => {
+  const container = document.createElement('div');
+  render(template, container);
+  return container.firstElementChild as HTMLElement;
+};
+
+const getOptionOrUndefined = (element: HTMLElement) => (element.tagName.toLocaleLowerCase() === 'syn-option' ? element as SynOption : undefined);
+
+/**
+ * This function takes an input of type `TemplateResult`, `string`, or `HTMLElement`
+ * and creates an SynOption from it.
+ *
+ * @param option - The option which can be of type `TemplateResult`, `string` or `HTMLElement`.
+ * @returns The created SynOption or undefined if the option was not a valid type.
+ */
+export const createOptionFromDifferentTypes = (option: TemplateResult | string | HTMLElement) => {
+  if (!option) return undefined;
+
+  if (option instanceof HTMLElement) {
+    return getOptionOrUndefined(option);
+  }
+
+  if (typeof option === 'string') {
+    const template = html`${unsafeHTML(option)}`;
+    const element = createElementFromTemplateResult(template);
+    return getOptionOrUndefined(element);
+  }
+
+  if (Object.prototype.hasOwnProperty.call(option, '_$litType$')) {
+    const element = createElementFromTemplateResult(option);
+    return getOptionOrUndefined(element);
+  }
+
+  return undefined;
+};
+
+/**
+ * Gets the value from an option. If an option has no value, it will use the text label.
+ * @param option The syn-option to get the value from
+ * @returns The value of the option
+ */
+export const getValueFromOption = (option: SynOption) => {
+  const { value } = option;
+  if (value === undefined || value === null || value === '') {
+    // If the option has no value, use the text label
+    return option.getTextLabel();
+  }
+  return value;
+};
+
+/**
+ * Get the values for options. If an option has no value, it will use the text label.
+ *
+ * @param options List of syn-options to get the values from
+ * @returns The values of the options
+ */
+export const getValuesFromOptions = (options: SynOption[]) => options.map(getValueFromOption);
+
+/**
+ * Check if a value belongs to the value or text label of an option.
+ * @param value The value to check
+ * @param option The option to check against
+ * @returns True if the value belongs to the option, false otherwise
+ */
+export const checkValueBelongsToOption = (value: string | number, option: SynOption | undefined) => {
+  if (!option || value === undefined || value === null || value === '') {
+    return false;
+  }
+
+  const optionValue = option.value;
+  const optionText = option.getTextLabel();
+  return String(value) === String(optionValue) || String(value) === optionText;
+};

package/data/layers/full/component/component:syn-combobox/react/SynComboboxJSXElement.ts

@@ -0,0 +1,16 @@
+export type SynComboboxJSXElement = SynCustomElement<
+  SynCombobox,
+  [
+    ['syn-change', SynChangeEvent],
+    ['syn-clear', SynClearEvent],
+    ['syn-input', SynInputEvent],
+    ['syn-focus', SynFocusEvent],
+    ['syn-blur', SynBlurEvent],
+    ['syn-show', SynShowEvent],
+    ['syn-after-show', SynAfterShowEvent],
+    ['syn-hide', SynHideEvent],
+    ['syn-after-hide', SynAfterHideEvent],
+    ['syn-invalid', SynInvalidEvent],
+    ['syn-error', SynErrorEvent],
+  ]
+>;