npm - @siemens/ix - Versions diffs - 0.0.0-pr-1318-20240627080522 → 0.0.0-pr-1522-20241021144048 - Mend

@siemens/ix 0.0.0-pr-1318-20240627080522 → 0.0.0-pr-1522-20241021144048

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1498) hide show

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

@@ -1,93 +0,0 @@
-/*
- * 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 DELETED Viewed

@@ -1 +0,0 @@

- {"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 DELETED Viewed

@@ -1,550 +0,0 @@
-/*
- * 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;
-}