@synergy-design-system/metadata 1.0.0 → 3.0.0

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

@@ -0,0 +1,278 @@
+import { css } from 'lit';
+
+export default css`
+  /**
+  * Fixes overflowing of the syn-input in flex and grid containers with fix width (https://github.com/synergy-design-system/synergy-design-system/issues/761)
+  */
+  .input__control {
+    width: 100%;
+  }
+
+  /** #429: Use token for opacity */
+  .input--standard.input--disabled,
+  .input--readonly.input--disabled {
+    opacity: var(--syn-input-disabled-opacity);
+  }
+
+  /**
+  * Min-width size adjusted for each size so 2 full digits are shown for type number
+  */ 
+ 
+  :host([size="small"][type="number"]:not([no-spin-buttons])) {
+    min-width: calc(var(--syn-input-font-size-small)*8.3);
+  }
+
+  :host([size="medium"][type="number"]:not([no-spin-buttons])) {
+    min-width: calc(var(--syn-input-font-size-medium)*9.4);
+  }
+
+  :host([size="large"][type="number"]:not([no-spin-buttons])) {
+    min-width: calc(var(--syn-input-font-size-large)*10);
+  }
+
+   /**
+   * Clearable + Password Toggle
+   */
+   .input__clear {
+    color: var(--syn-input-icon-icon-clearable-color);
+  }
+
+  .input--small .input__clear,
+  .input--small .input__password-toggle {
+    font-size: var(--syn-font-size-medium);
+    padding-left: var(--syn-spacing-x-small);
+    padding-right: var(--syn-spacing-small);
+    width: auto;
+  }
+
+  .input--medium .input__clear,
+  .input--medium .input__password-toggle {
+    font-size: var(--syn-font-size-x-large);
+    padding-left: var(--syn-spacing-small);
+    padding-right: var(--syn-spacing-medium);
+    width: auto;
+  }
+
+  .input--large .input__clear,
+  .input--large .input__password-toggle {
+    font-size: var(--syn-font-size-2x-large);
+    padding-left: var(--syn-spacing-medium);
+    padding-right: var(--syn-spacing-large);
+    width: auto;
+  }
+
+  /* Prefix / Suffix color */
+  .input__prefix ::slotted(*),
+  .input__suffix ::slotted(*) {
+    color: var(--syn-input-icon-color);
+  }
+
+
+  /* PADDINGS */
+  .input--small .input__control {
+    padding: var(--syn-spacing-3x-small) var(--syn-input-spacing-small);
+  }
+
+  .input--medium .input__control {
+    padding: var(--syn-spacing-x-small) var(--syn-input-spacing-medium);
+  }
+
+  .input--large .input__control {
+    padding: var(--syn-input-spacing-small) var(--syn-input-spacing-large);
+  }
+
+  .input--small .input__prefix ::slotted(*) {
+    margin-inline: var(--syn-input-spacing-small) var(--syn-spacing-x-small);
+  }
+
+  .input--medium .input__prefix ::slotted(*) {
+    margin-inline: var(--syn-input-spacing-medium) var(--syn-input-spacing-small);
+  }
+
+  .input--large .input__prefix ::slotted(*) {
+    margin-inline: var(--syn-input-spacing-large) var(--syn-input-spacing-medium);
+  }
+
+  .input--small .input__suffix ::slotted(*) {
+    margin-inline: var(--syn-spacing-x-small) var(--syn-input-spacing-small);
+  }
+
+  .input--medium .input__suffix ::slotted(*) {
+    margin-inline: var(--syn-input-spacing-small) var(--syn-input-spacing-medium);
+  }
+
+  .input--large .input__suffix ::slotted(*) {
+    margin-inline: var(--syn-input-spacing-medium) var(--syn-input-spacing-large);
+  }
+
+  .input__clear + .input__suffix ::slotted(*),
+  .input__password-toggle + .input__suffix ::slotted(*) {
+    margin-inline-start: 0;  
+  }
+
+  .input--small .input__clear + .input__password-toggle {
+    padding-left: var(--syn-spacing-2x-small);
+  }
+
+  .input--medium .input__clear + .input__password-toggle {
+    padding-left: calc(var(--syn-spacing-2x-small) + var(--syn-spacing-3x-small));
+  }
+
+  .input--large .input__clear + .input__password-toggle {
+    padding-left: var(--syn-spacing-x-small);
+  }
+
+  .input--small .input__clear:has(+ .input__password-toggle) {
+    padding-right: var(--syn-spacing-2x-small);
+  }
+
+  .input--medium .input__clear:has(+ .input__password-toggle) {
+    padding-right: calc(var(--syn-spacing-2x-small) + var(--syn-spacing-3x-small));
+  }
+
+  .input--large .input__clear:has(+ .input__password-toggle) {
+    padding-right: var(--syn-spacing-x-small);
+  }
+
+  .form-control--has-suffix .input--large .input__clear:has(+ .input__suffix),
+  .form-control--has-suffix .input--large .input__password-toggle:has(+ .input__suffix) {
+    padding-right: var(--syn-spacing-medium);
+  }
+
+  .form-control--has-suffix .input--small .input__clear:has(+ .input__suffix),
+  .form-control--has-suffix .input--small .input__password-toggle:has(+ .input__suffix) {
+    padding-right: var(--syn-spacing-x-small);
+  }
+
+  .form-control--has-suffix .input--medium .input__clear:has(+ .input__suffix),
+  .form-control--has-suffix .input--medium .input__password-toggle:has(+ .input__suffix) {
+    padding-right: var(--syn-spacing-small);
+  }
+
+  /* Fixes wrong paddings on some suffix special cases: https://github.com/synergy-design-system/synergy-design-system/issues/817  */
+  .form-control--has-prefix .input__control {
+    padding-left: 0;
+  }
+
+  /* Fixes wrong paddings on some suffix special cases: https://github.com/synergy-design-system/synergy-design-system/issues/817  */
+  .form-control--has-suffix .input__control,
+  .input:has(.input__clear) .input__control,
+  .input:has(.input__password-toggle) .input__control {
+    padding-right: 0;
+  }
+
+  :host([type='number']) .input--large:not(.input--no-spin-buttons) .input__clear,
+  :host([type='number']) .input--large:not(.input--no-spin-buttons) .input__password-toggle {
+    padding-right: var(--syn-spacing-medium);
+  }
+
+  /* ICONS SIZE */
+   .input--small .input__prefix ::slotted(syn-icon),
+   .input--small .input__suffix ::slotted(syn-icon) {
+    font-size: var(--syn-font-size-medium);
+   }
+
+  .input--medium .input__prefix ::slotted(syn-icon),
+  .input--medium .input__suffix ::slotted(syn-icon) {
+    font-size: var(--syn-font-size-x-large);
+   }
+
+  .input--large .input__prefix ::slotted(syn-icon),
+  .input--large .input__suffix ::slotted(syn-icon) {
+    font-size: var(--syn-font-size-2x-large);
+   }
+
+  :host([data-user-invalid]) .input--standard {
+    border-color: var(--syn-input-border-color-focus-error);
+  }
+
+  :host([data-user-invalid]) .input--standard.input--focused:not(.input--disabled) {
+    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);
+  }
+
+  .input--standard.input--disabled .input__suffix, 
+  .input--standard.input--disabled .input__prefix {
+    cursor: not-allowed;
+  } 
+
+
+  /**
+  * Number stepper
+  */
+  .input__number-stepper {
+    align-items: center;
+    display: flex;
+  }
+
+  .input--small .input__number-stepper {
+    margin-left: var(--syn-spacing-2x-small);
+  }
+
+  .input--medium .input__number-stepper {
+    margin-right: var(--syn-spacing-2x-small);
+  }
+
+  .input--large .input__number-stepper {
+    margin-right: var(--syn-spacing-x-small);
+  }
+
+
+  /**
+  * Number stepper buttons
+  */
+  .input__number-stepper-button {
+    align-items: center;
+    background: none;
+    border: none;
+    color: var(--syn-interactive-emphasis-color);
+    cursor: pointer;
+    display: flex;
+    padding: var(--syn-spacing-x-small);
+    transition: var(--syn-transition-x-fast) color;
+  }
+
+  .input--small .input__number-stepper-button {
+    font-size: var(--syn-font-size-medium);
+  }
+
+  .input--medium .input__number-stepper-button {
+    font-size: var(--syn-font-size-x-large);
+  }
+
+  .input--large .input__number-stepper-button {
+    font-size: var(--syn-font-size-2x-large);
+  }
+
+  .input__number-stepper-button:hover:not([disabled]) {
+    color: var(--syn-interactive-emphasis-color-hover);
+  }
+
+  .input__number-stepper-button:active:not([disabled]) {
+    color: var(--syn-interactive-emphasis-color-active);
+  }
+
+  .input__number-stepper-button[disabled] {
+    color: var(--syn-color-neutral-400);
+    cursor: not-allowed;
+    opacity: var(--syn-input-disabled-opacity);
+  }
+
+  /**
+  * Number stepper divider
+  */
+  .input--small .input__number-divider {
+    height: var(--syn-font-size-medium);
+    margin: 0;
+  }
+
+  .input--medium .input__number-divider {
+    height: var(--syn-font-size-x-large);
+    margin: 0 var(--syn-spacing-2x-small);
+  }
+
+  .input--large .input__number-divider {
+    height: var(--syn-font-size-2x-large);
+    margin: 0 var(--syn-spacing-x-small);
+  }
+`;

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

@@ -0,0 +1,280 @@
+/* eslint-disable */
+import { css } from 'lit';
+
+export default css`
+	/* stylelint-disable */
+  :host {
+    display: block;
+
+    --syn-input-autofill-shadow: 0 0 0 var(--syn-input-height-large) var(--syn-input-background-color-hover) inset;
+    --syn-input-autofill-readonly-shadow: 0 0 0 var(--syn-input-height-large) var(--syn-input-readonly-background-color) inset;
+    --syn-input-autofill-text-fill-color: var(--syn-color-primary-500);
+    --syn-input-autofill-caret-color: var(--syn-input-color);
+  }
+
+  .input {
+    flex: 1 1 auto;
+    display: inline-flex;
+    align-items: stretch;
+    justify-content: start;
+    position: relative;
+    width: 100%;
+    font-family: var(--syn-input-font-family);
+    font-weight: var(--syn-input-font-weight);
+    letter-spacing: var(--syn-input-letter-spacing);
+    vertical-align: middle;
+    overflow: hidden;
+    cursor: text;
+    transition:
+      var(--syn-transition-fast) color,
+      var(--syn-transition-fast) border,
+      var(--syn-transition-fast) box-shadow,
+      var(--syn-transition-fast) background-color;
+  }
+
+  /* Standard inputs */
+  .input--standard {
+    background-color: var(--syn-input-background-color);
+    border: solid var(--syn-input-border-width) var(--syn-input-border-color);
+  }
+
+  .input--standard:hover:not(.input--disabled) {
+    background-color: var(--syn-input-background-color-hover);
+    border-color: var(--syn-input-border-color-hover);
+  }
+
+  .input--standard.input--focused:not(.input--disabled) {
+    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);
+  }
+
+  .input--standard.input--focused:not(.input--disabled) .input__control {
+    color: var(--syn-input-color-focus);
+  }
+
+  .input--standard.input--disabled {
+    background-color: var(--syn-input-background-color-disabled);
+    border-color: var(--syn-input-border-color-disabled);
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .input--standard.input--disabled .input__control {
+    color: var(--syn-input-color-disabled);
+  }
+
+  .input--standard.input--disabled .input__control::placeholder {
+    color: var(--syn-input-placeholder-color-disabled);
+  }
+
+  /* Readonly inputs */
+  .input--readonly {
+    border: none;
+    background-color: var(--syn-input-readonly-background-color);
+    color: var(--syn-input-color);
+  }
+
+  .input--readonly:hover:not(.input--disabled) {
+    background-color: var(--syn-input-readonly-background-color-hover);
+  }
+
+  .input--readonly.input--focused:not(.input--disabled) {
+    background-color: var(--syn-input-readonly-background-color-focus);
+    outline: var(--syn-focus-ring);
+    outline-offset: var(--syn-focus-ring-offset);
+  }
+
+  .input--readonly.input--disabled {
+    background-color: var(--syn-input-readonly-background-color-disabled);
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .input__control {
+    flex: 1 1 auto;
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+    min-width: 0;
+    height: 100%;
+    color: var(--syn-input-color);
+    border: none;
+    background: inherit;
+    box-shadow: none;
+    padding: 0;
+    margin: 0;
+    cursor: inherit;
+    -webkit-appearance: none;
+  }
+
+  .input__control::-webkit-search-decoration,
+  .input__control::-webkit-search-cancel-button,
+  .input__control::-webkit-search-results-button,
+  .input__control::-webkit-search-results-decoration {
+    -webkit-appearance: none;
+  }
+
+  .input__control:-webkit-autofill,
+  .input__control:-webkit-autofill:hover,
+  .input__control:-webkit-autofill:focus,
+  .input__control:-webkit-autofill:active {
+    box-shadow: var(--syn-input-autofill-shadow) !important;
+    -webkit-text-fill-color: var(--syn-input-autofill-text-fill-color);
+    caret-color: var(--syn-input-autofill-caret-color);
+  }
+
+  .input--readonly .input__control:-webkit-autofill,
+  .input--readonly .input__control:-webkit-autofill:hover,
+  .input--readonly .input__control:-webkit-autofill:focus,
+  .input--readonly .input__control:-webkit-autofill:active {
+    box-shadow: var(--syn-input-autofill-readonly-shadow) !important;
+  }
+
+  .input__control::placeholder {
+    color: var(--syn-input-placeholder-color);
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  .input:hover:not(.input--disabled) .input__control {
+    color: var(--syn-input-color-hover);
+  }
+
+  .input__control:focus {
+    outline: none;
+  }
+
+  .input__prefix,
+  .input__suffix {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    cursor: default;
+  }
+
+  .input__prefix ::slotted(syn-icon),
+  .input__suffix ::slotted(syn-icon) {
+    color: var(--syn-input-icon-color);
+  }
+
+  /*
+   * Size modifiers
+   */
+
+  .input--small {
+    border-radius: var(--syn-input-border-radius-small);
+    font-size: var(--syn-input-font-size-small);
+    height: var(--syn-input-height-small);
+  }
+
+  .input--small .input__control {
+    height: calc(var(--syn-input-height-small) - var(--syn-input-border-width) * 2);
+    padding: 0 var(--syn-input-spacing-small);
+  }
+
+  .input--small .input__clear,
+  .input--small .input__password-toggle {
+    width: calc(1em + var(--syn-input-spacing-small) * 2);
+  }
+
+  .input--small .input__prefix ::slotted(*) {
+    margin-inline-start: var(--syn-input-spacing-small);
+  }
+
+  .input--small .input__suffix ::slotted(*) {
+    margin-inline-end: var(--syn-input-spacing-small);
+  }
+
+  .input--medium {
+    border-radius: var(--syn-input-border-radius-medium);
+    font-size: var(--syn-input-font-size-medium);
+    height: var(--syn-input-height-medium);
+  }
+
+  .input--medium .input__control {
+    height: calc(var(--syn-input-height-medium) - var(--syn-input-border-width) * 2);
+    padding: 0 var(--syn-input-spacing-medium);
+  }
+
+  .input--medium .input__clear,
+  .input--medium .input__password-toggle {
+    width: calc(1em + var(--syn-input-spacing-medium) * 2);
+  }
+
+  .input--medium .input__prefix ::slotted(*) {
+    margin-inline-start: var(--syn-input-spacing-medium);
+  }
+
+  .input--medium .input__suffix ::slotted(*) {
+    margin-inline-end: var(--syn-input-spacing-medium);
+  }
+
+  .input--large {
+    border-radius: var(--syn-input-border-radius-large);
+    font-size: var(--syn-input-font-size-large);
+    height: var(--syn-input-height-large);
+  }
+
+  .input--large .input__control {
+    height: calc(var(--syn-input-height-large) - var(--syn-input-border-width) * 2);
+    padding: 0 var(--syn-input-spacing-large);
+  }
+
+  .input--large .input__clear,
+  .input--large .input__password-toggle {
+    width: calc(1em + var(--syn-input-spacing-large) * 2);
+  }
+
+  .input--large .input__prefix ::slotted(*) {
+    margin-inline-start: var(--syn-input-spacing-large);
+  }
+
+  .input--large .input__suffix ::slotted(*) {
+    margin-inline-end: var(--syn-input-spacing-large);
+  }
+
+  /*
+   * Clearable + Password Toggle
+   */
+
+  .input__clear,
+  .input__password-toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: inherit;
+    color: var(--syn-input-icon-color);
+    border: none;
+    background: none;
+    padding: 0;
+    transition: var(--syn-transition-fast) color;
+    cursor: pointer;
+  }
+
+  .input__clear:hover,
+  .input__password-toggle:hover {
+    color: var(--syn-input-icon-color-hover);
+  }
+
+  .input__clear:focus,
+  .input__password-toggle:focus {
+    outline: none;
+  }
+
+  /* Don't show the browser's password toggle in Edge */
+  ::-ms-reveal {
+    display: none;
+  }
+
+  /* Hide the built-in number spinner */
+  input[type='number']::-webkit-outer-spin-button,
+  input[type='number']::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    display: none;
+  }
+
+  input[type='number'] {
+    -moz-appearance: textfield;
+  }
+`;

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

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

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

@@ -0,0 +1,79 @@
+/**
+ * Defines the strategy that should be used for a numeric input.
+ */
+export type NumericStrategy = {
+  /**
+   * Clamp the inputs value to its min and max values when reaching it.
+   *
+   * When set to false, this will follow the HTML5 spec:
+   * - Allows overflow of min and max via user input, but not spinners
+   * - Will emit an invalid event
+   * - Will emit an input event
+   * - Will emit a change event
+   *
+   * When set to true, this will follow Synergy specs:
+   * - Do not allow overflow of min and max via user input or spinners
+   * - Will not emit an invalid event
+   * - Will emit an input event
+   * - Will emit a syn-clamp custom event
+   * - Will emit a change event
+   */
+  autoClamp: boolean;
+
+  /**
+   * Controls if the stepper should use the **current value** as base.
+   * This is useful when the -/+ step buttons are used to change a value.
+   * Also includes handling of keyboard interactions.
+   *
+   * This works in the following way:
+   * - **value**: 1.2
+   * - **min**: 1
+   * - **step**: 0.3
+   *
+   * 1. noStepAlign = true -> **1.5**
+   * 2. noStepAlign = false -> **1.6**
+   *
+   * Note that this does not alter validation of the input!
+   * A native html input will flag all values that are not aligned to the step as invalid!
+   * See noStepValidation for more information.
+   */
+  noStepAlign: boolean;
+
+  /**
+   * Determines if an invalid event should be emitted when the stepping is invalid.
+   * This is the default behavior of a native input.
+   * Set to true to disable this behavior.
+   */
+  noStepValidation: boolean;
+};
+
+/**
+ * Defines Synergies Version 2 default settings
+ * inherited from Shoelace, which mimics the HTML5 standard
+ */
+export const nativeNumericStrategy: NumericStrategy = {
+  autoClamp: false,
+  noStepAlign: false,
+  noStepValidation: false,
+};
+
+/**
+ * Defines Synergies Version 3 default settings,
+ * based on the feedback from the community.
+ */
+export const modernNumericStrategy: NumericStrategy = {
+  autoClamp: true,
+  noStepAlign: true,
+  noStepValidation: true,
+};
+
+/**
+ * Creates a new strategy object that can be used to override the default.
+ * Will merge the default strategy with the provided settings.
+ */
+export const createNumericStrategy = (
+  settings: Partial<NumericStrategy> = {},
+): NumericStrategy => ({
+  ...nativeNumericStrategy,
+  ...settings,
+});

package/data/layers/full/component/component:syn-input/react/SynInputJSXElement.ts

@@ -0,0 +1,12 @@
+export type SynInputJSXElement = SynCustomElement<
+  SynInput,
+  [
+    ['syn-blur', SynBlurEvent],
+    ['syn-change', SynChangeEvent],
+    ['syn-clear', SynClearEvent],
+    ['syn-focus', SynFocusEvent],
+    ['syn-input', SynInputEvent],
+    ['syn-invalid', SynInvalidEvent],
+    ['syn-clamp', SynClampEvent],
+  ]
+>;