@siemens/ix 0.0.0-20240522073858 → 0.0.0-pr-1318-20240627080522

package/dist/collection/components/text-field/text-field.util.js

@@ -0,0 +1,93 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { a11yBoolean } from "../utils/a11y";
+import { shouldSuppressInternalValidation, } from "../utils/field";
+import { generateUUID } from "../utils/uuid";
+import { shakeInput } from "./text-field.animation";
+export function createIdIfNotExists(element, idPrefix = 'field') {
+    return element.hasAttribute('id')
+        ? element.getAttribute('id')
+        : `${idPrefix}-${generateUUID()}`;
+}
+export function mapValidationResult(ref, result) {
+    ref.isInvalid = result.isInvalid || result.isInvalidByRequired;
+    ref.isValid = result.isValid;
+    ref.isInfo = result.isInfo;
+    ref.isWarning = result.isWarning;
+}
+export function checkAllowedKeys(comp, event) {
+    if (comp.allowedCharactersPattern) {
+        const regex = new RegExp(comp.allowedCharactersPattern);
+        if (!regex.test(event.key)) {
+            event.preventDefault();
+            shakeInput(comp.inputRef.current);
+        }
+    }
+}
+export async function checkInternalValidity(comp, input) {
+    const validityState = input.validity;
+    const eventResult = comp.validityStateChange.emit(validityState);
+    if (eventResult.defaultPrevented) {
+        return;
+    }
+    if (!comp.value) {
+        return;
+    }
+    const skipValidation = await shouldSuppressInternalValidation(comp);
+    if (skipValidation) {
+        return;
+    }
+    const { valid } = validityState;
+    comp.hostElement.classList.toggle('ix-invalid', !valid);
+}
+export function onInputBlur(comp, input) {
+    comp.ixBlur.emit();
+    checkInternalValidity(comp, input);
+}
+export function applyPostfixPadding(inputElement, width, options) {
+    var _a;
+    if (!inputElement) {
+        return;
+    }
+    if (width === 0) {
+        return;
+    }
+    const padding = `${(width + 12) / 16}rem`;
+    if (options.postfix) {
+        inputElement.style.paddingRight = `calc(${padding} + ${(_a = options.additionalPaddingRight) !== null && _a !== void 0 ? _a : '0rem'})`;
+    }
+    else {
+        inputElement.style.paddingLeft = padding;
+    }
+}
+export function adjustPaddingForPrefixAndPostfix(prefixElement, postfixElement, inputElement) {
+    const prefixBoundingRect = prefixElement.getBoundingClientRect();
+    const postfixBoundingRect = postfixElement.getBoundingClientRect();
+    if (prefixBoundingRect) {
+        applyPostfixPadding(inputElement, prefixBoundingRect.width, {
+            postfix: false,
+        });
+    }
+    if (postfixBoundingRect) {
+        applyPostfixPadding(inputElement, postfixBoundingRect.width, {
+            postfix: true,
+        });
+    }
+}
+export function getAriaAttributesForInput(component) {
+    const inputAria = {
+        'aria-invalid': `${a11yBoolean(component.isInvalid)}`,
+        'aria-required': `${a11yBoolean(component.required)}`,
+    };
+    if (component.isInvalid && component.invalidText) {
+        inputAria['aria-errormessage'] = component.invalidText;
+    }
+    return inputAria;
+}
+//# sourceMappingURL=text-field.util.js.map

package/dist/collection/components/text-field/text-field.util.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-field.util.js","sourceRoot":"","sources":["../../../src/components/text-field/text-field.util.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { A11yAttributes, a11yBoolean } from '../utils/a11y';\nimport {\n  IxFormComponent,\n  IxInputFieldComponent,\n  ValidationResults,\n  shouldSuppressInternalValidation,\n} from '../utils/field';\nimport { generateUUID } from '../utils/uuid';\nimport { shakeInput } from './text-field.animation';\n\nexport function createIdIfNotExists(\n  element: IxFormComponent,\n  idPrefix: string = 'field'\n) {\n  return element.hasAttribute('id')\n    ? element.getAttribute('id')\n    : `${idPrefix}-${generateUUID()}`;\n}\n\nexport function mapValidationResult(\n  ref: IxInputFieldComponent<unknown>,\n  result: ValidationResults\n) {\n  ref.isInvalid = result.isInvalid || result.isInvalidByRequired;\n  ref.isValid = result.isValid;\n  ref.isInfo = result.isInfo;\n  ref.isWarning = result.isWarning;\n}\n\nexport function checkAllowedKeys(\n  comp: IxInputFieldComponent<unknown>,\n  event: KeyboardEvent\n) {\n  if (comp.allowedCharactersPattern) {\n    const regex = new RegExp(comp.allowedCharactersPattern);\n    if (!regex.test(event.key)) {\n      event.preventDefault();\n      shakeInput(comp.inputRef.current);\n    }\n  }\n}\n\nexport async function checkInternalValidity(\n  comp: IxFormComponent<unknown>,\n  input: HTMLInputElement | HTMLTextAreaElement\n) {\n  const validityState = input.validity;\n\n  const eventResult = comp.validityStateChange.emit(validityState);\n\n  if (eventResult.defaultPrevented) {\n    return;\n  }\n\n  if (!comp.value) {\n    return;\n  }\n\n  const skipValidation = await shouldSuppressInternalValidation(comp);\n  if (skipValidation) {\n    return;\n  }\n\n  const { valid } = validityState;\n  comp.hostElement.classList.toggle('ix-invalid', !valid);\n}\n\nexport function onInputBlur(\n  comp: IxInputFieldComponent<unknown>,\n  input: HTMLInputElement | HTMLTextAreaElement\n) {\n  comp.ixBlur.emit();\n  checkInternalValidity(comp, input);\n}\n\nexport function applyPostfixPadding(\n  inputElement: HTMLElement,\n  width: number,\n  options: {\n    postfix: boolean;\n    additionalPaddingRight?: string;\n  }\n) {\n  if (!inputElement) {\n    return;\n  }\n\n  if (width === 0) {\n    return;\n  }\n\n  const padding = `${(width + 12) / 16}rem`;\n\n  if (options.postfix) {\n    inputElement.style.paddingRight = `calc(${padding} + ${\n      options.additionalPaddingRight ?? '0rem'\n    })`;\n  } else {\n    inputElement.style.paddingLeft = padding;\n  }\n}\n\nexport function adjustPaddingForPrefixAndPostfix(\n  prefixElement: HTMLElement,\n  postfixElement: HTMLElement,\n  inputElement: HTMLElement\n) {\n  const prefixBoundingRect = prefixElement.getBoundingClientRect();\n  const postfixBoundingRect = postfixElement.getBoundingClientRect();\n\n  if (prefixBoundingRect) {\n    applyPostfixPadding(inputElement, prefixBoundingRect.width, {\n      postfix: false,\n    });\n  }\n\n  if (postfixBoundingRect) {\n    applyPostfixPadding(inputElement, postfixBoundingRect.width, {\n      postfix: true,\n    });\n  }\n}\n\nexport function getAriaAttributesForInput(\n  component: IxInputFieldComponent\n): A11yAttributes {\n  const inputAria: A11yAttributes = {\n    'aria-invalid': `${a11yBoolean(component.isInvalid)}`,\n    'aria-required': `${a11yBoolean(component.required)}`,\n  };\n\n  if (component.isInvalid && component.invalidText) {\n    inputAria['aria-errormessage'] = component.invalidText;\n  }\n  return inputAria;\n}\n"]}

package/dist/collection/components/text-field/textarea-field.css

@@ -0,0 +1,550 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/* Dimensions */
+/* Font sizes */
+/* Line heights */
+/* Animation timings */
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+label {
+  color: var(--theme-color-soft-text);
+  padding: 2px 0px;
+}
+
+label.label-alignment-left {
+  padding: 6px 0px;
+}
+
+input {
+  font-feature-settings: "clig" off, "liga" off;
+  font-family: Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;
+  font-style: normal;
+  font-size: var(--theme-ms-0);
+  line-height: var(--theme-line-height-md);
+  font-weight: var(--theme-font-weight-normal);
+  letter-spacing: var(--theme-letter-spacing-xl);
+  text-decoration: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  min-height: 2rem;
+  width: 100%;
+  padding: 0.25rem 0.5rem;
+  background-color: var(--theme-input--background);
+  color: var(--theme-input--color);
+  -webkit-appearance: textfield;
+     -moz-appearance: textfield;
+          appearance: textfield;
+  text-overflow: ellipsis;
+  border: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);
+  border-radius: var(--theme-input--border-radius);
+  box-shadow: var(--theme-input--box-shadow);
+}
+input:-webkit-autofill {
+  -webkit-box-shadow: 0 0 0 1000px var(--theme-color-component-info) inset !important;
+  -webkit-text-fill-color: var(--theme-input--color--autofill) !important;
+  background-color: var(--theme-input--background--autofill) !important;
+  border: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;
+  color: var(--theme-input--color--autofill) !important;
+}
+input:-webkit-autofill, input:autofill {
+  -webkit-box-shadow: 0 0 0 1000px var(--theme-color-component-info) inset !important;
+  -webkit-text-fill-color: var(--theme-input--color--autofill) !important;
+  background-color: var(--theme-input--background--autofill) !important;
+  border: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;
+  color: var(--theme-input--color--autofill) !important;
+}
+input::-moz-placeholder {
+  color: var(--theme-input-hint--color);
+}
+input::placeholder {
+  color: var(--theme-input-hint--color);
+}
+input:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only).hover, input:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only):hover {
+  border-color: var(--theme-input--border-color--hover) !important;
+  background-color: var(--theme-input--background--hover);
+}
+input:not(.readonly):not([readonly]):not([readOnly]):not(:read-only).hover, input:not(.readonly):not([readonly]):not([readOnly]):not(:read-only):hover {
+  border-color: var(--theme-input--border-color--hover) !important;
+  background-color: var(--theme-input--background--hover);
+}
+input:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only).focus, input:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only):focus {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-input--focus--outline-offset);
+  border-color: var(--theme-input--border-color--focus) !important;
+}
+input:not(.readonly):not([readonly]):not([readOnly]):not(:read-only).focus, input:not(.readonly):not([readonly]):not([readOnly]):not(:read-only):focus {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-input--focus--outline-offset);
+  border-color: var(--theme-input--border-color--focus) !important;
+}
+input:-moz-read-only {
+  box-shadow: none;
+  background-color: transparent;
+  outline: none;
+  border: none;
+  border-bottom: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly);
+}
+input.read-only, input:read-only {
+  box-shadow: none;
+  background-color: transparent;
+  outline: none;
+  border: none;
+  border-bottom: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly);
+}
+input.read-only::-moz-placeholder, input:read-only::-moz-placeholder {
+  color: transparent;
+}
+input:-moz-read-only::placeholder {
+  color: transparent;
+}
+input.read-only::placeholder, input:read-only::placeholder {
+  color: transparent;
+}
+input:disabled {
+  box-shadow: none;
+  background-color: transparent;
+  outline: none;
+  border: none;
+  color: var(--theme-input--color--disabled);
+  border-bottom: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled);
+}
+input:disabled::-moz-placeholder {
+  color: transparent;
+}
+input:disabled::placeholder {
+  color: transparent;
+}
+
+input[type=number] {
+  text-align: right;
+}
+input[type=number]::-webkit-inner-spin-button {
+  margin-right: -2px;
+  margin-left: 2px;
+  display: none;
+}
+
+textarea {
+  padding: 0.375rem 1.25rem 0.375rem 0.5rem;
+}
+textarea {
+  font-feature-settings: "clig" off, "liga" off;
+  font-family: Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;
+  font-style: normal;
+  font-size: var(--theme-ms-0);
+  line-height: var(--theme-line-height-md);
+  font-weight: var(--theme-font-weight-normal);
+  letter-spacing: var(--theme-letter-spacing-xl);
+  text-decoration: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  min-height: 2rem;
+  width: 100%;
+  padding: 0.25rem 0.5rem;
+  background-color: var(--theme-input--background);
+  color: var(--theme-input--color);
+  -webkit-appearance: textfield;
+     -moz-appearance: textfield;
+          appearance: textfield;
+  text-overflow: ellipsis;
+  border: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);
+  border-radius: var(--theme-input--border-radius);
+  box-shadow: var(--theme-input--box-shadow);
+}
+textarea:-webkit-autofill {
+  -webkit-box-shadow: 0 0 0 1000px var(--theme-color-component-info) inset !important;
+  -webkit-text-fill-color: var(--theme-input--color--autofill) !important;
+  background-color: var(--theme-input--background--autofill) !important;
+  border: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;
+  color: var(--theme-input--color--autofill) !important;
+}
+textarea:-webkit-autofill, textarea:autofill {
+  -webkit-box-shadow: 0 0 0 1000px var(--theme-color-component-info) inset !important;
+  -webkit-text-fill-color: var(--theme-input--color--autofill) !important;
+  background-color: var(--theme-input--background--autofill) !important;
+  border: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;
+  color: var(--theme-input--color--autofill) !important;
+}
+textarea::-moz-placeholder {
+  color: var(--theme-input-hint--color);
+}
+textarea::placeholder {
+  color: var(--theme-input-hint--color);
+}
+textarea:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only).hover, textarea:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only):hover {
+  border-color: var(--theme-input--border-color--hover) !important;
+  background-color: var(--theme-input--background--hover);
+}
+textarea:not(.readonly):not([readonly]):not([readOnly]):not(:read-only).hover, textarea:not(.readonly):not([readonly]):not([readOnly]):not(:read-only):hover {
+  border-color: var(--theme-input--border-color--hover) !important;
+  background-color: var(--theme-input--background--hover);
+}
+textarea:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only).focus, textarea:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only):focus {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-input--focus--outline-offset);
+  border-color: var(--theme-input--border-color--focus) !important;
+}
+textarea:not(.readonly):not([readonly]):not([readOnly]):not(:read-only).focus, textarea:not(.readonly):not([readonly]):not([readOnly]):not(:read-only):focus {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-input--focus--outline-offset);
+  border-color: var(--theme-input--border-color--focus) !important;
+}
+textarea:-moz-read-only {
+  box-shadow: none;
+  background-color: transparent;
+  outline: none;
+  border: none;
+  border-bottom: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly);
+}
+textarea.read-only, textarea:read-only {
+  box-shadow: none;
+  background-color: transparent;
+  outline: none;
+  border: none;
+  border-bottom: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly);
+}
+textarea.read-only::-moz-placeholder, textarea:read-only::-moz-placeholder {
+  color: transparent;
+}
+textarea:-moz-read-only::placeholder {
+  color: transparent;
+}
+textarea.read-only::placeholder, textarea:read-only::placeholder {
+  color: transparent;
+}
+textarea:disabled {
+  box-shadow: none;
+  background-color: transparent;
+  outline: none;
+  border: none;
+  color: var(--theme-input--color--disabled);
+  border-bottom: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled);
+}
+textarea:disabled::-moz-placeholder {
+  color: transparent;
+}
+textarea:disabled::placeholder {
+  color: transparent;
+}
+
+textarea ~ .valid-feedback,
+textarea ~ .invalid-feedback,
+input ~ .valid-feedback,
+input ~ .invalid-feedback {
+  display: none;
+  font-feature-settings: "clig" off, "liga" off;
+  font-family: Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;
+  font-style: normal;
+  font-size: var(--theme-ms-0);
+  line-height: var(--theme-line-height-md);
+  font-weight: var(--theme-font-weight-normal);
+  letter-spacing: var(--theme-letter-spacing-xl);
+  text-decoration: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+}
+
+form textarea ~ .valid-feedback,
+form input ~ .valid-feedback {
+  color: var(--theme-color-success);
+}
+form textarea ~ .invalid-feedback,
+form input ~ .invalid-feedback {
+  color: var(--theme-color-alarm-text);
+}
+
+form:not([novalidate]) :invalid,
+form:not([novalidate]) .is-invalid,
+form.was-validated :invalid,
+form.was-validated .is-invalid {
+  background-color: var(--theme-input-error--background);
+  border-color: var(--theme-input-error--border-color);
+  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 62 (101010) - https://sketch.com --%3E%3Ctitle%3Eerror%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.75'%3E%3Cg id='error' fill='%23ff2640'%3E%3Cg id='error/error'%3E%3Cpath d='M256,42.6666667 C373.626371,42.6666667 469.333333,138.373627 469.333333,256 C469.333333,373.626371 373.626371,469.333333 256,469.333333 C138.373627,469.333333 42.6666667,373.626371 42.6666667,256 C42.6666667,138.373627 138.373627,42.6666667 256,42.6666667 Z M256,85.3333333 C161.559631,85.3333333 85.3333333,161.559631 85.3333333,256 C85.3333333,350.44037 161.559631,426.666667 256,426.666667 C350.44037,426.666667 426.666667,350.44037 426.666667,256 C426.666667,161.559631 350.44037,85.3333333 256,85.3333333 Z M326.248389,155.581722 L356.418278,185.751611 L286.168667,255.999667 L356.418278,326.248389 L326.248389,356.418278 L255.999667,286.168667 L185.751611,356.418278 L155.581722,326.248389 L225.829667,255.999667 L155.581722,185.751611 L185.751611,155.581722 L255.999667,225.829667 L326.248389,155.581722 Z' id='Combined-Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
+  background-position: left calc(0.375em + 0.1875rem) center;
+  padding-right: 0.75rem;
+  padding-left: calc(1.5em + 0.75rem);
+  background-size: 18px;
+  background-repeat: no-repeat;
+}
+form:not([novalidate]) :invalid ~ .invalid-feedback,
+form:not([novalidate]) .is-invalid ~ .invalid-feedback,
+form.was-validated :invalid ~ .invalid-feedback,
+form.was-validated .is-invalid ~ .invalid-feedback {
+  display: block;
+}
+form:not([novalidate]) :valid ~ .valid-feedback,
+form:not([novalidate]) .is-valid ~ .valid-feedback,
+form.was-validated :valid ~ .valid-feedback,
+form.was-validated .is-valid ~ .valid-feedback {
+  display: block;
+}
+
+form:not(.was-validated) .invalid-feedback,
+form:not(.was-validated) .valid-feedback {
+  display: none !important;
+}
+
+textarea.ix-info:not(.disabled):not(:disabled):not([disabled]),
+input.ix-info:not(.disabled):not(:disabled):not([disabled]) {
+  border-color: var(--theme-input--border-color--info);
+}
+textarea.ix-info:not(.disabled):not(:disabled):not([disabled]):hover,
+input.ix-info:not(.disabled):not(:disabled):not([disabled]):hover {
+  border-color: var(--theme-input--border-color--info--hover) !important;
+}
+textarea.ix-info:not(.disabled):not(:disabled):not([disabled]):active,
+input.ix-info:not(.disabled):not(:disabled):not([disabled]):active {
+  border-color: var(--theme-input--border-color--info--active) !important;
+}
+
+textarea.ix-warning:not(.disabled):not(:disabled):not([disabled]),
+input.ix-warning:not(.disabled):not(:disabled):not([disabled]) {
+  border-color: var(--theme-input--border-color--warning--active) !important;
+}
+textarea.ix-warning:not(.disabled):not(:disabled):not([disabled]):hover,
+input.ix-warning:not(.disabled):not(:disabled):not([disabled]):hover {
+  border-color: var(--theme-input--border-color--warning--active) !important;
+}
+textarea.ix-warning:not(.disabled):not(:disabled):not([disabled]):active,
+input.ix-warning:not(.disabled):not(:disabled):not([disabled]):active {
+  border-color: var(--theme-input--border-color--warning--active) !important;
+}
+
+textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]),
+input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]) {
+  background-color: var(--theme-input--background--invalid);
+  border-color: var(--theme-input--border-color--invalid);
+}
+textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]),
+input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]) {
+  border-color: var(--theme-input--border-color--invalid) !important;
+}
+textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):hover,
+input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):hover {
+  border-color: var(--theme-input--border-color--invalid--hover) !important;
+}
+textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):active,
+input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):active {
+  border-color: var(--theme-input--border-color--invalid--active) !important;
+}
+
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+:host {
+  /* width */
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
+  display: inline-block;
+  position: relative;
+  width: auto;
+}
+:host *,
+:host *::after,
+:host *::before {
+  box-sizing: border-box;
+}
+:host ::-webkit-scrollbar-button {
+  display: none;
+}
+@-moz-document url-prefix() {
+  :host * {
+    scrollbar-color: var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);
+    scrollbar-width: thin;
+  }
+}
+:host ::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+:host ::-webkit-scrollbar-track {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-track--background);
+}
+:host ::-webkit-scrollbar-track:hover {
+  background: var(--theme-scrollbar-track--background--hover);
+}
+:host ::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-thumb--background);
+}
+:host ::-webkit-scrollbar-thumb:hover {
+  background: var(--theme-scrollbar-thumb--background--hover);
+}
+:host ::-webkit-scrollbar-corner {
+  display: none;
+}
+:host .input-wrapper {
+  display: flex;
+  position: relative;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+:host input {
+  width: 100%;
+  height: 100%;
+}
+:host .prefix-container,
+:host .postfix-container {
+  display: flex;
+  position: absolute;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+}
+:host .prefix-container {
+  left: 0.5rem;
+}
+:host .postfix-container {
+  right: 0.5rem;
+}
+
+:host(.disabled) {
+  pointer-events: none;
+}
+:host(.disabled) input, :host(.disabled) textarea {
+  pointer-events: none;
+}
+
+:host(.ix-info:not(.disabled):not(:disabled):not([disabled])) input {
+  border-color: var(--theme-input--border-color--info);
+}
+:host(.ix-info:not(.disabled):not(:disabled):not([disabled])) input:hover {
+  border-color: var(--theme-input--border-color--info--hover) !important;
+}
+:host(.ix-info:not(.disabled):not(:disabled):not([disabled])) input:active {
+  border-color: var(--theme-input--border-color--info--active) !important;
+}
+
+:host(.ix-warning:not(.disabled):not(:disabled):not([disabled])) input {
+  border-color: var(--theme-input--border-color--warning--active) !important;
+}
+:host(.ix-warning:not(.disabled):not(:disabled):not([disabled])) input:hover {
+  border-color: var(--theme-input--border-color--warning--active) !important;
+}
+:host(.ix-warning:not(.disabled):not(:disabled):not([disabled])) input:active {
+  border-color: var(--theme-input--border-color--warning--active) !important;
+}
+
+:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled])) input,
+:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled])) input {
+  background-color: var(--theme-input--background--invalid);
+  border-color: var(--theme-input--border-color--invalid);
+}
+:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled])) input,
+:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled])) input {
+  border-color: var(--theme-input--border-color--invalid) !important;
+}
+:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled])) input:hover,
+:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled])) input:hover {
+  border-color: var(--theme-input--border-color--invalid--hover) !important;
+}
+:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled])) input:active,
+:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled])) input:active {
+  border-color: var(--theme-input--border-color--invalid--active) !important;
+}
+
+:host(.ix-info:not(.disabled):not(:disabled):not([disabled])) textarea {
+  border-color: var(--theme-input--border-color--info);
+}
+:host(.ix-info:not(.disabled):not(:disabled):not([disabled])) textarea:hover {
+  border-color: var(--theme-input--border-color--info--hover) !important;
+}
+:host(.ix-info:not(.disabled):not(:disabled):not([disabled])) textarea:active {
+  border-color: var(--theme-input--border-color--info--active) !important;
+}
+
+:host(.ix-warning:not(.disabled):not(:disabled):not([disabled])) textarea {
+  border-color: var(--theme-input--border-color--warning--active) !important;
+}
+:host(.ix-warning:not(.disabled):not(:disabled):not([disabled])) textarea:hover {
+  border-color: var(--theme-input--border-color--warning--active) !important;
+}
+:host(.ix-warning:not(.disabled):not(:disabled):not([disabled])) textarea:active {
+  border-color: var(--theme-input--border-color--warning--active) !important;
+}
+
+:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled])) textarea,
+:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled])) textarea {
+  background-color: var(--theme-input--background--invalid);
+  border-color: var(--theme-input--border-color--invalid);
+}
+:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled])) textarea,
+:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled])) textarea {
+  border-color: var(--theme-input--border-color--invalid) !important;
+}
+:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled])) textarea:hover,
+:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled])) textarea:hover {
+  border-color: var(--theme-input--border-color--invalid--hover) !important;
+}
+:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled])) textarea:active,
+:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled])) textarea:active {
+  border-color: var(--theme-input--border-color--invalid--active) !important;
+}