@synergy-design-system/mcp 2.6.1 → 2.8.0

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

@@ -13,13 +13,11 @@ import { waitForEvent } from '../../internal/event.js';
 import { watch } from '../../internal/watch.js';
 import componentStyles from '../../styles/component.styles.js';
 import formControlStyles from '../../styles/form-control.styles.js';
-import formControlCustomStyles from '../../styles/form-control.custom.styles.js';
 import SynergyElement from '../../internal/synergy-element.js';
 import SynIcon from '../icon/icon.component.js';
 import SynPopup from '../popup/popup.component.js';
 import SynTag from '../tag/tag.component.js';
 import styles from './select.styles.js';
-import customStyles from './select.custom.styles.js';
 import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 import type { SynergyFormControl } from '../../internal/synergy-element.js';
 import type { SynRemoveEvent } from '../../events/syn-remove.js';
@@ -77,7 +75,7 @@ import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator
  */
 @enableDefaultSettings('SynSelect')
 export default class SynSelect extends SynergyElement implements SynergyFormControl {
-  static styles: CSSResultGroup = [componentStyles, formControlStyles, styles, formControlCustomStyles, customStyles];
+  static styles: CSSResultGroup = [componentStyles, formControlStyles, styles];
   static dependencies = {
     'syn-icon': SynIcon,
     'syn-popup': SynPopup,
@@ -168,6 +166,9 @@ export default class SynSelect extends SynergyElement implements SynergyFormCont
   /** Disables the select control. */
   @property({ type: Boolean, reflect: true }) disabled = false;
 
+  /** Sets the select to a readonly state. */
+  @property({ reflect: true, type: Boolean }) readonly = false;
+
   /** Adds a clear button when the select is not empty. */
   @property({ type: Boolean }) clearable = false;
 
@@ -458,6 +459,12 @@ export default class SynSelect extends SynergyElement implements SynergyFormCont
     }
   };
 
+  private handleFormControlClick() {
+    if (this.readonly) {
+      this.displayInput.focus();
+    }
+  }
+
   private handleLabelClick() {
     this.displayInput.focus();
   }
@@ -467,7 +474,7 @@ export default class SynSelect extends SynergyElement implements SynergyFormCont
     const isIconButton = path.some(el => el instanceof Element && el.tagName.toLowerCase() === 'syn-icon-button');
 
     // Ignore disabled controls and clicks on tags (remove buttons)
-    if (this.disabled || isIconButton) {
+    if (this.disabled || this.readonly || isIconButton) {
       return;
     }
 
@@ -571,7 +578,7 @@ export default class SynSelect extends SynergyElement implements SynergyFormCont
 
     this.valueHasChanged = true;
 
-    if (!this.disabled) {
+    if (!this.disabled && !this.readonly) {
       this.toggleOptionSelection(option, false);
 
       // Emit after updating
@@ -654,7 +661,12 @@ export default class SynSelect extends SynergyElement implements SynergyFormCont
     if (this.multiple) {
       this.value = this.selectedOptions.map(el => el.value);
 
-      if (this.placeholder && this.value.length === 0) {
+      // #1177: When using a readonly field with multiple set,
+      // set the display label to the list of selected options instead of the count, since the user can't open the listbox to see which options are selected.
+      // This makes it possible to copy the values from the readonly select.
+      if (this.readonly) {
+        this.displayLabel = this.selectedOptions.map(opt => opt.getTextLabel()).join(', ');
+      } else if (this.placeholder && this.value.length === 0) {
         // When no items are selected, keep the value empty so the placeholder shows
         this.displayLabel = '';
       } else {
@@ -702,10 +714,10 @@ export default class SynSelect extends SynergyElement implements SynergyFormCont
     });
   }
 
-  @watch('disabled', { waitUntilFirstUpdate: true })
+  @watch(['disabled', 'readonly'], { waitUntilFirstUpdate: true })
   handleDisabledChange() {
-    // Close the listbox when the control is disabled
-    if (this.disabled) {
+    // Close the listbox when the control is disabled or readonly
+    if (this.disabled || this.readonly) {
       this.open = false;
       this.handleOpenChange();
     }
@@ -774,7 +786,7 @@ protected override willUpdate(changedProperties: PropertyValues) {
 
   @watch('open', { waitUntilFirstUpdate: true })
   async handleOpenChange() {
-    if (this.open && !this.disabled) {
+    if (this.open && (!this.disabled && !this.readonly)) {
       // Reset the current option
       this.setCurrentOption(this.selectedOptions[0] || this.getFirstOption());
 
@@ -817,7 +829,7 @@ protected override willUpdate(changedProperties: PropertyValues) {
 
   /** Shows the listbox. */
   async show() {
-    if (this.open || this.disabled) {
+    if (this.open || this.disabled || this.readonly) {
       this.open = false;
       return undefined;
     }
@@ -828,7 +840,7 @@ protected override willUpdate(changedProperties: PropertyValues) {
 
   /** Hides the listbox. */
   async hide() {
-    if (!this.open || this.disabled) {
+    if (!this.open || this.disabled || this.readonly) {
       this.open = false;
       return undefined;
     }
@@ -874,7 +886,7 @@ protected override willUpdate(changedProperties: PropertyValues) {
     const hasHelpTextSlot = this.hasSlotController.test('help-text');
     const hasLabel = this.label ? true : !!hasLabelSlot;
     const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
-    const hasClearIcon = this.clearable && !this.disabled && hasValue;
+    const hasClearIcon = this.clearable && (!this.disabled && !this.readonly) && hasValue;
     const isPlaceholderVisible = this.placeholder && this.value && !hasValue;
 
     return html`
@@ -886,8 +898,9 @@ protected override willUpdate(changedProperties: PropertyValues) {
           'form-control--medium': this.size === 'medium',
           'form-control--large': this.size === 'large',
           'form-control--has-label': hasLabel,
-          'form-control--has-help-text': hasHelpText
+          'form-control--has-help-text': hasHelpText,
         })}
+        @click=${this.handleFormControlClick}
       >
         <label
           id="label"
@@ -906,6 +919,7 @@ protected override willUpdate(changedProperties: PropertyValues) {
               'select--standard': true,
               'select--open': this.open,
               'select--disabled': this.disabled,
+              'select--readonly': this.readonly,
               'select--multiple': this.multiple,
               'select--focused': this.hasFocus,
               'select--placeholder-visible': isPlaceholderVisible,
@@ -955,12 +969,13 @@ protected override willUpdate(changedProperties: PropertyValues) {
                 @blur=${this.handleBlur}
               />
 
-              ${this.multiple ? html`<div part="tags" class="select__tags">${this.tags}</div>` : ''}
+              ${this.multiple && !this.readonly ? html`<div part="tags" class="select__tags">${this.tags}</div>` : ''}
 
               <input
                 class="select__value-input"
                 type="text"
                 ?disabled=${this.disabled}
+                ?readonly=${this.readonly}
                 ?required=${this.required}
                 .value=${Array.isArray(this.value) ? this.value.join(', ') : this.value?.toString()}
                 tabindex="-1"

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

@@ -116,6 +116,11 @@ indicate the number of additional items that are selected.
    */
   disabled?: SynSelect['disabled'];
 
+  /**
+   * Sets the select to a readonly state.
+   */
+  readonly?: SynSelect['readonly'];
+
   /**
    * Adds a clear button when the select is not empty.
    */

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

@@ -153,6 +153,19 @@ export class SynSwitchComponent {
     return this.nativeElement.disabled;
   }
 
+  /**
+   * Sets the switch to a readonly state.
+   */
+  @Input()
+  set readonly(v: '' | SynSwitch['readonly']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.readonly = v === '' || v),
+    );
+  }
+  get readonly(): SynSwitch['readonly'] {
+    return this.nativeElement.readonly;
+  }
+
   /**
    * Draws the switch in a checked state.
    */

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

@@ -2,165 +2,247 @@
 import { css } from 'lit';
 
 export default css`
-	/* stylelint-disable */
+  /* stylelint-disable no-descending-specificity */
   :host {
     display: inline-block;
   }
 
   :host([size='small']) {
-    --height: var(--syn-toggle-size-small);
-    --thumb-size: calc(var(--syn-toggle-size-small) + 4px);
-    --width: calc(var(--height) * 2);
+    --height: var(--syn-switch-height-small);
+    --thumb-size: var(--syn-toggle-size-small);
+    --width: var(--syn-switch-width-small);
 
     font-size: var(--syn-input-font-size-small);
   }
 
   :host([size='medium']) {
-    --height: var(--syn-toggle-size-medium);
-    --thumb-size: calc(var(--syn-toggle-size-medium) + 4px);
-    --width: calc(var(--height) * 2);
+    --height: var(--syn-switch-height-medium);
+    --thumb-size: var(--syn-toggle-size-medium);
+    --width: var(--syn-switch-width-medium);
 
     font-size: var(--syn-input-font-size-medium);
   }
 
   :host([size='large']) {
-    --height: var(--syn-toggle-size-large);
-    --thumb-size: calc(var(--syn-toggle-size-large) + 4px);
-    --width: calc(var(--height) * 2);
+    --height: var(--syn-switch-height-large);
+    --thumb-size: var(--syn-toggle-size-large);
+    --width: var(--syn-switch-width-large);
 
     font-size: var(--syn-input-font-size-large);
   }
 
   .switch {
-    position: relative;
-    display: inline-flex;
     align-items: center;
+    color: var(--syn-input-label-color);
+    cursor: pointer;
+    display: inline-flex;
     font-family: var(--syn-input-font-family);
     font-size: inherit;
     font-weight: var(--syn-input-font-weight);
-    color: var(--syn-input-label-color);
+    position: relative;
     vertical-align: middle;
-    cursor: pointer;
+  }
+
+  .switch.switch--small {
+    padding: var(--syn-spacing-2x-small) 0;
+  }
+
+  .switch.switch--medium {
+    padding: var(--syn-spacing-2x-small) 0;
+  }
+
+  .switch.switch--large {
+    padding: var(--syn-spacing-3x-small) 0;
+  }
+
+  /* Hint: can be removed, if the padding stylings for sizes from above are removed */
+  .form-control--has-help-text .switch {
+    padding-bottom: 0;
   }
 
   .switch__control {
-    flex: 0 0 auto;
-    position: relative;
-    display: inline-flex;
     align-items: center;
-    justify-content: center;
-    width: var(--width);
-    height: var(--height);
-    background-color: var(--syn-color-neutral-400);
-    border: solid var(--syn-input-border-width) var(--syn-color-neutral-400);
+    background-color: var(--syn-input-icon-icon-clearable-color);
+    border: solid var(--syn-border-width-medium) var(--syn-input-icon-icon-clearable-color);
     border-radius: var(--height);
+    display: inline-flex;
+    flex: 0 0 auto;
+    height: var(--height);
+    justify-content: center;
+    position: relative;
     transition:
       var(--syn-transition-fast) border-color,
       var(--syn-transition-fast) background-color;
+    width: var(--width);
   }
 
   .switch__control .switch__thumb {
-    width: var(--thumb-size);
-    height: var(--thumb-size);
     background-color: var(--syn-color-neutral-0);
+    border: none;
     border-radius: 50%;
-    border: solid var(--syn-input-border-width) var(--syn-color-neutral-400);
-    translate: calc((var(--width) - var(--height)) / -2);
+    height: var(--thumb-size);
     transition:
       var(--syn-transition-fast) translate ease,
       var(--syn-transition-fast) background-color,
       var(--syn-transition-fast) border-color,
       var(--syn-transition-fast) box-shadow;
+    translate: calc((var(--width) - var(--height)) / -2);
+    width: var(--thumb-size);
   }
 
   .switch__input {
-    position: absolute;
+    margin: 0;
     opacity: 0;
     padding: 0;
-    margin: 0;
     pointer-events: none;
+    position: absolute;
   }
 
   /* Hover */
-  .switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover {
-    background-color: var(--syn-color-neutral-400);
-    border-color: var(--syn-color-neutral-400);
-  }
-
-  .switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover .switch__thumb {
-    background-color: var(--syn-color-neutral-0);
-    border-color: var(--syn-color-neutral-400);
+  .switch:not(.switch--checked):not(.switch--disabled):not(.switch--readonly):hover .switch__control {
+    background-color: var(--syn-input-icon-icon-clearable-color-hover);
+    border-color: var(--syn-input-icon-icon-clearable-color-hover);
   }
 
   /* Focus */
-  .switch:not(.switch--checked):not(.switch--disabled) .switch__input:focus-visible ~ .switch__control {
-    background-color: var(--syn-color-neutral-400);
-    border-color: var(--syn-color-neutral-400);
+  .switch:not(.switch--checked):not(.switch--disabled):not(.switch--readonly) .switch__input:focus-visible ~ .switch__control {
+    background-color: var(--syn-input-icon-icon-clearable-color);
+    border-color: var(--syn-input-icon-icon-clearable-color);
+    outline: var(--syn-focus-ring);
+    outline-offset: var(--syn-focus-ring-offset);
   }
 
-  .switch:not(.switch--checked):not(.switch--disabled) .switch__input:focus-visible ~ .switch__control .switch__thumb {
+  .switch:not(.switch--checked):not(.switch--disabled):not(.switch--readonly) .switch__input:focus-visible ~ .switch__control .switch__thumb {
     background-color: var(--syn-color-neutral-0);
-    border-color: var(--syn-color-primary-600);
-    outline: var(--syn-focus-ring);
-    outline-offset: var(--syn-focus-ring-offset);
+    outline: none;
   }
 
   /* Checked */
   .switch--checked .switch__control {
-    background-color: var(--syn-color-primary-600);
-    border-color: var(--syn-color-primary-600);
+    background-color: var(--syn-interactive-emphasis-color);
+    border-color: var(--syn-interactive-emphasis-color);
   }
 
   .switch--checked .switch__control .switch__thumb {
     background-color: var(--syn-color-neutral-0);
-    border-color: var(--syn-color-primary-600);
     translate: calc((var(--width) - var(--height)) / 2);
   }
 
   /* Checked + hover */
-  .switch.switch--checked:not(.switch--disabled) .switch__control:hover {
-    background-color: var(--syn-color-primary-600);
-    border-color: var(--syn-color-primary-600);
+  .switch.switch--checked:not(.switch--disabled):not(.switch--readonly):hover .switch__control {
+    background-color: var(--syn-interactive-emphasis-color-hover);
+    border-color: var(--syn-interactive-emphasis-color-hover);
   }
 
-  .switch.switch--checked:not(.switch--disabled) .switch__control:hover .switch__thumb {
+  .switch.switch--checked:not(.switch--disabled):not(.switch--readonly):hover .switch__control .switch__thumb {
     background-color: var(--syn-color-neutral-0);
-    border-color: var(--syn-color-primary-600);
   }
 
   /* Checked + focus */
-  .switch.switch--checked:not(.switch--disabled) .switch__input:focus-visible ~ .switch__control {
-    background-color: var(--syn-color-primary-600);
-    border-color: var(--syn-color-primary-600);
+  .switch.switch--checked:not(.switch--disabled):not(.switch--readonly) .switch__input:focus-visible ~ .switch__control {
+    background-color: var(--syn-interactive-emphasis-color);
+    border-color: var(--syn-interactive-emphasis-color);
+    outline: var(--syn-focus-ring);
+    outline-offset: var(--syn-focus-ring-offset);
   }
 
-  .switch.switch--checked:not(.switch--disabled) .switch__input:focus-visible ~ .switch__control .switch__thumb {
+  .switch.switch--checked:not(.switch--disabled):not(.switch--readonly) .switch__input:focus-visible ~ .switch__control .switch__thumb {
     background-color: var(--syn-color-neutral-0);
-    border-color: var(--syn-color-primary-600);
-    outline: var(--syn-focus-ring);
-    outline-offset: var(--syn-focus-ring-offset);
+    outline: none;
+  }
+
+  /*
+   * #443: Add active styles
+   * The checked and unchecked states have different active colors
+   * Note the fallback is defined to match the hover color.
+   * This is done to make sure no active state is shown at all if no active color is defined.
+   * Still better than showing one for the unchecked state but not for the checked state.
+   */
+  .switch:not(.switch--checked):not(.switch--disabled):not(.switch--readonly):active .switch__control {
+    background: var(--syn-input-icon-icon-clearable-color-active);
+    border-color: var(--syn-input-icon-icon-clearable-color-active);
+  }
+
+  .switch.switch--checked:not(.switch--disabled):not(.switch--readonly):active .switch__control {
+    background: var(--syn-interactive-emphasis-color-active);
+    border-color: var(--syn-interactive-emphasis-color-active);
   }
 
-  /* Disabled */
+  /** #429: Use token for opacity */
   .switch--disabled {
-    opacity: 0.5;
     cursor: not-allowed;
+    opacity: var(--syn-input-disabled-opacity);
   }
 
   .switch__label {
     display: inline-block;
     line-height: var(--height);
-    margin-inline-start: 0.5em;
+    margin-inline-start: var(--syn-spacing-x-small);
     user-select: none;
-    -webkit-user-select: none;
   }
 
   :host([required]) .switch__label::after {
-    content: var(--syn-input-required-content);
     color: var(--syn-input-required-content-color);
+    content: var(--syn-input-required-content);
     margin-inline-start: var(--syn-input-required-content-offset);
   }
 
+  :host([data-user-invalid]) .switch:not(.switch--checked):not(.switch--disabled):not(.switch--readonly) .switch__control {
+    background-color: var(--syn-input-border-color-focus-error);
+    border-color: var(--syn-input-border-color-focus-error);
+  }
+
+  :host([data-user-invalid]) .switch:not(.switch--checked):not(.switch--disabled):not(.switch--readonly):hover .switch__control {
+    background-color: var(--syn-input-border-color-hover);
+    border-color: var(--syn-input-border-color-hover);
+  }
+
+  /**
+   * #1178: Readonly state
+   */
+  .switch.switch--readonly {
+    cursor: default;
+  }
+
+  .switch.switch--readonly .switch__label {
+    user-select: auto;
+  }
+
+  .switch.switch--readonly .switch__control {
+    background: var(--syn-readonly-background-color);
+    border-color: var(--syn-readonly-background-color);
+    cursor: default;
+  }
+
+  .switch.switch--readonly:hover .switch__control {
+    background: var(--syn-input-readonly-background-color-hover);
+    border-color: var(--syn-input-readonly-background-color-hover);
+  }
+
+  .switch.switch--readonly .switch__input:focus ~ .switch__control {
+    outline: var(--syn-focus-ring);
+    outline-offset: var(--syn-focus-ring-offset);
+  }
+
+  .switch.switch--readonly .switch__control .switch__thumb {
+    background: var(--syn-readonly-indicator-color);
+  }
+
+  /* Override base styles to remove outline from thumb for readonly switches */
+  .switch.switch--readonly .switch__input:focus-visible ~ .switch__control .switch__thumb {
+    outline: none;
+  }
+
+  .switch.switch--readonly.switch--checked .switch__input:focus-visible ~ .switch__control .switch__thumb {
+    outline: none !important;
+  }
+
+  /* Focus override */
+  .switch.switch--readonly .switch__input:focus-visible ~ .switch__control {
+    background-color: var(--syn-readonly-background-color);
+    border-color: var(--syn-readonly-background-color);
+  }
+
   @media (forced-colors: active) {
     .switch.switch--checked:not(.switch--disabled) .switch__control:hover .switch__thumb,
     .switch--checked .switch__control .switch__thumb {

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

@@ -10,10 +10,8 @@ import { property, query, state } from 'lit/decorators.js';
 import { watch } from '../../internal/watch.js';
 import componentStyles from '../../styles/component.styles.js';
 import formControlStyles from '../../styles/form-control.styles.js';
-import formControlCustomStyles from '../../styles/form-control.custom.styles.js';
 import SynergyElement from '../../internal/synergy-element.js';
 import styles from './switch.styles.js';
-import customStyles from './switch.custom.styles.js';
 import type { CSSResultGroup } from 'lit';
 import type { SynergyFormControl } from '../../internal/synergy-element.js';
 import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';
@@ -45,7 +43,7 @@ import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator
  */
 @enableDefaultSettings('SynSwitch')
 export default class SynSwitch extends SynergyElement implements SynergyFormControl {
-  static styles: CSSResultGroup = [componentStyles, formControlStyles, styles, formControlCustomStyles, customStyles];
+  static styles: CSSResultGroup = [componentStyles, formControlStyles, styles];
 
   private readonly formControlController = new FormControlController(this, {
     value: (control: SynSwitch) => (control.checked ? control.value || 'on' : undefined),
@@ -71,6 +69,9 @@ export default class SynSwitch extends SynergyElement implements SynergyFormCont
   /** Disables the switch. */
   @property({ type: Boolean, reflect: true }) disabled = false;
 
+  /** Sets the switch to a readonly state. */
+  @property({ type: Boolean, reflect: true }) readonly = false;
+
   /** Draws the switch in a checked state. */
   @property({ type: Boolean, reflect: true }) checked = false;
 
@@ -118,7 +119,12 @@ export default class SynSwitch extends SynergyElement implements SynergyFormCont
     this.formControlController.emitInvalidEvent(event);
   }
 
-  private handleClick() {
+  private handleClick(e: MouseEvent) {
+    if (this.readonly) {
+      e.preventDefault();
+      return;
+    }
+
     this.checked = !this.checked;
     this.emit('syn-change');
   }
@@ -129,6 +135,10 @@ export default class SynSwitch extends SynergyElement implements SynergyFormCont
   }
 
   private handleKeyDown(event: KeyboardEvent) {
+    if (this.readonly) {
+      return;
+    }
+
     if (event.key === 'ArrowLeft') {
       event.preventDefault();
       this.checked = false;
@@ -212,6 +222,7 @@ export default class SynSwitch extends SynergyElement implements SynergyFormCont
             switch: true,
             'switch--checked': this.checked,
             'switch--disabled': this.disabled,
+            'switch--readonly': this.readonly,
             'switch--focused': this.hasFocus,
             'switch--small': this.size === 'small',
             'switch--medium': this.size === 'medium',
@@ -226,6 +237,7 @@ export default class SynSwitch extends SynergyElement implements SynergyFormCont
             value=${ifDefined(this.value)}
             .checked=${live(this.checked)}
             .disabled=${this.disabled}
+            .readOnly=${this.readonly}
             .required=${this.required}
             role="switch"
             aria-checked=${this.checked ? 'true' : 'false'}

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

@@ -71,6 +71,11 @@ const props = defineProps<{
    */
   disabled?: SynSwitch['disabled'];
 
+  /**
+   * Sets the switch to a readonly state.
+   */
+  readonly?: SynSwitch['readonly'];
+
   /**
    * Draws the switch in a checked state.
    */