@siemens/ix 4.0.0 → 4.2.0

package/dist/{esm/validation-D_dk-JqT.js.map → cjs/validation-DTmSqO2d.js.map}

@@ -1 +1 @@
-{"version":3,"file":"validation-D_dk-JqT.js","sources":["src/components/utils/input/validation.ts"],"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 */\nimport { getElement } from '@stencil/core';\nimport { HTMLIxFormComponentElement, IxFormComponent } from '.';\nimport { IxComponent } from '../internal';\n\nexport type ClassMutationObserver = {\n  destroy: () => void;\n};\n\nexport async function isTouched<T>(host: IxFormComponent<T>) {\n  if (typeof host.isTouched === 'function') {\n    return host.isTouched();\n  }\n}\n\nexport async function shouldSuppressInternalValidation<T>(\n  host: IxFormComponent<T>\n) {\n  if (\n    host.getAssociatedFormElement &&\n    typeof host.getAssociatedFormElement === 'function'\n  ) {\n    const form = await host.getAssociatedFormElement();\n\n    if (!form) {\n      return false;\n    }\n\n    return form.noValidate;\n  }\n\n  return false;\n}\n\nexport function createClassMutationObserver(\n  element: HTMLElement,\n  callback: () => void,\n  options?: {\n    includeChildren?: boolean;\n  }\n): ClassMutationObserver {\n  const observer = new MutationObserver(callback);\n  observer.observe(element, {\n    subtree: options?.includeChildren,\n    childList: options?.includeChildren,\n    attributes: true,\n    attributeFilter: ['class'],\n  });\n\n  return {\n    destroy() {\n      observer.disconnect();\n    },\n  };\n}\n\nexport type ValidationResultProperty =\n  | 'isInvalid'\n  | 'isInvalidByRequired'\n  | 'isValid'\n  | 'isInfo'\n  | 'isWarning';\nexport type ValidationResults = Record<ValidationResultProperty, boolean>;\n\nfunction classListContains(\n  hostElement: HTMLIxFormComponentElement<unknown>,\n  className: string,\n  includeChildren: boolean\n) {\n  return (\n    hostElement.classList.contains(`${className}`) ||\n    (includeChildren ? !!hostElement.querySelector(`.${className}`) : false)\n  );\n}\n\nexport function checkFieldClasses(\n  hostElement: HTMLIxFormComponentElement<unknown>,\n  includeChildren = false\n): ValidationResults {\n  return {\n    isInvalid:\n      classListContains(hostElement, 'ix-invalid', includeChildren) ||\n      classListContains(\n        hostElement,\n        'ix-invalid--validity-invalid',\n        includeChildren\n      ),\n    isInvalidByRequired: classListContains(\n      hostElement,\n      'ix-invalid--required',\n      includeChildren\n    ),\n    isValid: classListContains(hostElement, 'ix-valid', includeChildren),\n    isInfo: classListContains(hostElement, 'ix-info', includeChildren),\n    isWarning: classListContains(hostElement, 'ix-warning', includeChildren),\n  };\n}\n\nexport function HookValidationLifecycle(options?: {\n  includeChildren?: boolean;\n}) {\n  return (proto: IxComponent, methodName: string) => {\n    let checkIfRequiredFunction: (() => Promise<void>) | null;\n    let classMutationObserver: ClassMutationObserver | null;\n    const { componentWillLoad, disconnectedCallback, connectedCallback } =\n      proto;\n\n    proto.connectedCallback = function () {\n      const host = getElement(\n        this\n      ) as unknown as HTMLIxFormComponentElement<unknown>;\n\n      checkIfRequiredFunction = async () => {\n        const skipValidation = await shouldSuppressInternalValidation(host);\n        if (skipValidation) {\n          return;\n        }\n\n        if (host.hasValidValue && typeof host.hasValidValue === 'function') {\n          const hasValue = await host.hasValidValue();\n          const touched = await isTouched(host);\n\n          if (host.required) {\n            host.classList.toggle('ix-invalid--required', !hasValue && touched);\n          } else {\n            host.classList.remove('ix-invalid--required');\n          }\n        }\n\n        if (\n          host.getValidityState &&\n          typeof host.getValidityState === 'function'\n        ) {\n          const validityState = await host.getValidityState();\n\n          host.classList.toggle(\n            `ix-invalid--validity-patternMismatch`,\n            validityState.patternMismatch\n          );\n        }\n      };\n\n      host.addEventListener('checkedChange', checkIfRequiredFunction);\n      host.addEventListener('valueChange', checkIfRequiredFunction);\n      host.addEventListener('ixBlur', checkIfRequiredFunction);\n      setTimeout(checkIfRequiredFunction);\n      return connectedCallback?.call(this);\n    };\n\n    proto.componentWillLoad = function () {\n      const host = getElement(\n        this\n      ) as unknown as HTMLIxFormComponentElement<unknown>;\n      classMutationObserver = createClassMutationObserver(\n        host,\n        () => {\n          const result = checkFieldClasses(host, options?.includeChildren);\n          proto[methodName].call(this, result);\n        },\n        options\n      );\n      const result = checkFieldClasses(host, options?.includeChildren);\n      proto[methodName].call(this, result);\n      return componentWillLoad?.call(this);\n    };\n\n    proto.disconnectedCallback = function () {\n      const host = getElement(this);\n\n      if (host && classMutationObserver) {\n        classMutationObserver.destroy();\n        classMutationObserver = null;\n      }\n\n      if (host && checkIfRequiredFunction) {\n        host.removeEventListener('checkedChange', checkIfRequiredFunction);\n        host.removeEventListener('valueChange', checkIfRequiredFunction);\n        host.removeEventListener('ixBlur', checkIfRequiredFunction);\n        checkIfRequiredFunction = null;\n      }\n\n      return disconnectedCallback?.call(this);\n    };\n  };\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"validation-DTmSqO2d.js","sources":["src/components/utils/input/validation.ts"],"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 */\nimport { getElement } from '@stencil/core';\nimport { HTMLIxFormComponentElement, IxFormComponent } from '.';\nimport { IxComponent } from '../internal';\n\nexport type ClassMutationObserver = {\n  destroy: () => void;\n};\n\nexport async function isTouched<T>(host: IxFormComponent<T>) {\n  if (typeof host.isTouched === 'function') {\n    return host.isTouched();\n  }\n}\n\nexport async function shouldSuppressInternalValidation<T>(\n  host: IxFormComponent<T>\n) {\n  if (\n    host.getAssociatedFormElement &&\n    typeof host.getAssociatedFormElement === 'function'\n  ) {\n    const form = await host.getAssociatedFormElement();\n\n    if (!form) {\n      return false;\n    }\n\n    return form.noValidate;\n  }\n\n  return false;\n}\n\nexport function createClassMutationObserver(\n  element: HTMLElement,\n  callback: () => void,\n  options?: {\n    includeChildren?: boolean;\n  }\n): ClassMutationObserver {\n  const observer = new MutationObserver(callback);\n  observer.observe(element, {\n    subtree: options?.includeChildren,\n    childList: options?.includeChildren,\n    attributes: true,\n    attributeFilter: ['class'],\n  });\n\n  return {\n    destroy() {\n      observer.disconnect();\n    },\n  };\n}\n\nexport type ValidationResultProperty =\n  | 'isInvalid'\n  | 'isInvalidByRequired'\n  | 'isValid'\n  | 'isInfo'\n  | 'isWarning';\nexport type ValidationResults = Record<ValidationResultProperty, boolean>;\n\nfunction classListContains(\n  hostElement: HTMLIxFormComponentElement<unknown>,\n  className: string,\n  includeChildren: boolean\n) {\n  return (\n    hostElement.classList.contains(`${className}`) ||\n    (includeChildren ? !!hostElement.querySelector(`.${className}`) : false)\n  );\n}\n\nexport function checkFieldClasses(\n  hostElement: HTMLIxFormComponentElement<unknown>,\n  includeChildren = false\n): ValidationResults {\n  return {\n    isInvalid:\n      classListContains(hostElement, 'ix-invalid', includeChildren) ||\n      classListContains(\n        hostElement,\n        'ix-invalid--validity-invalid',\n        includeChildren\n      ),\n    isInvalidByRequired: classListContains(\n      hostElement,\n      'ix-invalid--required',\n      includeChildren\n    ),\n    isValid: classListContains(hostElement, 'ix-valid', includeChildren),\n    isInfo: classListContains(hostElement, 'ix-info', includeChildren),\n    isWarning: classListContains(hostElement, 'ix-warning', includeChildren),\n  };\n}\n\nexport function HookValidationLifecycle(options?: {\n  includeChildren?: boolean;\n}) {\n  return (proto: IxComponent, methodName: string) => {\n    let checkIfRequiredFunction: (() => Promise<void>) | null;\n    let classMutationObserver: ClassMutationObserver | null;\n    const { componentWillLoad, disconnectedCallback, connectedCallback } =\n      proto;\n\n    proto.connectedCallback = function () {\n      const host = getElement(\n        this\n      ) as unknown as HTMLIxFormComponentElement<unknown>;\n\n      checkIfRequiredFunction = async () => {\n        const skipValidation = await shouldSuppressInternalValidation(host);\n        if (skipValidation) {\n          return;\n        }\n\n        if (host.hasValidValue && typeof host.hasValidValue === 'function') {\n          const hasValue = await host.hasValidValue();\n          const touched = await isTouched(host);\n\n          if (host.required) {\n            host.classList.toggle('ix-invalid--required', !hasValue && touched);\n          } else {\n            host.classList.remove('ix-invalid--required');\n          }\n        }\n\n        if (\n          host.getValidityState &&\n          typeof host.getValidityState === 'function'\n        ) {\n          const validityState = await host.getValidityState();\n\n          host.classList.toggle(\n            `ix-invalid--validity-patternMismatch`,\n            validityState.patternMismatch\n          );\n        }\n      };\n\n      host.addEventListener('checkedChange', checkIfRequiredFunction);\n      host.addEventListener('valueChange', checkIfRequiredFunction);\n      host.addEventListener('ixBlur', checkIfRequiredFunction);\n      setTimeout(checkIfRequiredFunction);\n      return connectedCallback?.call(this);\n    };\n\n    proto.componentWillLoad = function () {\n      const host = getElement(\n        this\n      ) as unknown as HTMLIxFormComponentElement<unknown>;\n      classMutationObserver = createClassMutationObserver(\n        host,\n        () => {\n          const result = checkFieldClasses(host, options?.includeChildren);\n          proto[methodName].call(this, result);\n        },\n        options\n      );\n      const result = checkFieldClasses(host, options?.includeChildren);\n      proto[methodName].call(this, result);\n      return componentWillLoad?.call(this);\n    };\n\n    proto.disconnectedCallback = function () {\n      const host = getElement(this);\n\n      if (host && classMutationObserver) {\n        classMutationObserver.destroy();\n        classMutationObserver = null;\n      }\n\n      if (host && checkIfRequiredFunction) {\n        host.removeEventListener('checkedChange', checkIfRequiredFunction);\n        host.removeEventListener('valueChange', checkIfRequiredFunction);\n        host.removeEventListener('ixBlur', checkIfRequiredFunction);\n        checkIfRequiredFunction = null;\n      }\n\n      return disconnectedCallback?.call(this);\n    };\n  };\n}\n\nexport function getValidationText(\n  isInputInvalid: boolean,\n  customInvalidText: string | undefined,\n  i18nFallbackText: string\n): string | undefined {\n  if (isInputInvalid) {\n    return customInvalidText ?? i18nFallbackText;\n  }\n  return customInvalidText;\n}\n"],"names":["getElement"],"mappings":"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"}

package/dist/collection/components/category-filter/category-filter.css

@@ -1157,10 +1157,10 @@ button.dropdown-toggle::after {
 :host .reset-button.hide-reset-button {
   display: none;
 }
-:host .input-container:not(.readonly):not(.disabled) {
+:host .input-container:not(.readonly):not(.no-icon) {
   min-height: 2rem;
   width: auto;
-  padding: 0.25rem 0.5rem;
+  padding: 1px 1.5rem 1px 1.75rem;
   background-color: var(--theme-input--background);
   color: var(--theme-input--color);
   -webkit-appearance: textfield;
@@ -1181,40 +1181,40 @@ button.dropdown-toggle::after {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smooting: grayscale;
 }
-:host .input-container:not(.readonly):not(.disabled)[type=number] {
+:host .input-container:not(.readonly):not(.no-icon)[type=number] {
   text-align: right;
 }
-:host .input-container:not(.readonly):not(.disabled)[type=number]::-webkit-inner-spin-button {
+:host .input-container:not(.readonly):not(.no-icon)[type=number]::-webkit-inner-spin-button {
   margin-right: -2px;
   margin-left: 2px;
   display: none;
 }
-:host .input-container:not(.readonly):not(.disabled):-webkit-autofill {
+:host .input-container:not(.readonly):not(.no-icon):-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;
 }
-:host .input-container:not(.readonly):not(.disabled):-webkit-autofill, :host .input-container:not(.readonly):not(.disabled):autofill {
+:host .input-container:not(.readonly):not(.no-icon):-webkit-autofill, :host .input-container:not(.readonly):not(.no-icon):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;
 }
-:host .input-container:not(.readonly):not(.disabled)::-moz-placeholder {
+:host .input-container:not(.readonly):not(.no-icon)::-moz-placeholder {
   color: var(--theme-input-hint--color);
 }
-:host .input-container:not(.readonly):not(.disabled)::placeholder {
+:host .input-container:not(.readonly):not(.no-icon)::placeholder {
   color: var(--theme-input-hint--color);
 }
-:host .input-container:not(.readonly):not(.disabled).hover:not(.readonly,
+:host .input-container:not(.readonly):not(.no-icon).hover:not(.readonly,
 .read-only,
 .disabled,
 [readonly],
 [disabled],
-:-moz-read-only), :host .input-container:not(.readonly):not(.disabled):hover:not(.readonly,
+:-moz-read-only), :host .input-container:not(.readonly):not(.no-icon):hover:not(.readonly,
 .read-only,
 .disabled,
 [readonly],
@@ -1223,12 +1223,12 @@ button.dropdown-toggle::after {
   border-color: var(--theme-input--border-color--hover) !important;
   background-color: var(--theme-input--background--hover);
 }
-:host .input-container:not(.readonly):not(.disabled).hover:not(.readonly,
+:host .input-container:not(.readonly):not(.no-icon).hover:not(.readonly,
 .read-only,
 .disabled,
 [readonly],
 [disabled],
-:read-only), :host .input-container:not(.readonly):not(.disabled):hover:not(.readonly,
+:read-only), :host .input-container:not(.readonly):not(.no-icon):hover:not(.readonly,
 .read-only,
 .disabled,
 [readonly],
@@ -1237,12 +1237,12 @@ button.dropdown-toggle::after {
   border-color: var(--theme-input--border-color--hover) !important;
   background-color: var(--theme-input--background--hover);
 }
-:host .input-container:not(.readonly):not(.disabled).focus:not(.readonly,
+:host .input-container:not(.readonly):not(.no-icon).focus:not(.readonly,
 .read-only,
 .disabled,
 [readonly],
 [disabled],
-:-moz-read-only), :host .input-container:not(.readonly):not(.disabled):focus:not(.readonly,
+:-moz-read-only), :host .input-container:not(.readonly):not(.no-icon):focus:not(.readonly,
 .read-only,
 .disabled,
 [readonly],
@@ -1252,12 +1252,12 @@ button.dropdown-toggle::after {
   outline-offset: var(--theme-input--focus--outline-offset);
   border-color: var(--theme-input--border-color--focus) !important;
 }
-:host .input-container:not(.readonly):not(.disabled).focus:not(.readonly,
+:host .input-container:not(.readonly):not(.no-icon).focus:not(.readonly,
 .read-only,
 .disabled,
 [readonly],
 [disabled],
-:read-only), :host .input-container:not(.readonly):not(.disabled):focus:not(.readonly,
+:read-only), :host .input-container:not(.readonly):not(.no-icon):focus:not(.readonly,
 .read-only,
 .disabled,
 [readonly],
@@ -1267,7 +1267,7 @@ button.dropdown-toggle::after {
   outline-offset: var(--theme-input--focus--outline-offset);
   border-color: var(--theme-input--border-color--focus) !important;
 }
-:host .input-container:not(.readonly):not(.disabled):disabled, :host .input-container:not(.readonly):not(.disabled).disabled {
+:host .input-container:not(.readonly):not(.no-icon):disabled, :host .input-container:not(.readonly):not(.no-icon).disabled {
   box-shadow: none;
   background-color: transparent;
   outline: none;
@@ -1276,29 +1276,141 @@ button.dropdown-toggle::after {
   color: var(--theme-input--color--disabled);
   border-bottom: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled);
 }
-:host .input-container:not(.readonly):not(.disabled):disabled::-moz-placeholder, :host .input-container:not(.readonly):not(.disabled).disabled::-moz-placeholder {
+:host .input-container:not(.readonly):not(.no-icon):disabled::-moz-placeholder, :host .input-container:not(.readonly):not(.no-icon).disabled::-moz-placeholder {
   color: transparent;
 }
-:host .input-container:not(.readonly):not(.disabled):disabled::placeholder, :host .input-container:not(.readonly):not(.disabled).disabled::placeholder {
+:host .input-container:not(.readonly):not(.no-icon):disabled::placeholder, :host .input-container:not(.readonly):not(.no-icon).disabled::placeholder {
   color: transparent;
 }
-:host .input-container:not(.readonly):not(.disabled):hover {
+:host .input-container:not(.readonly).no-icon {
+  min-height: 2rem;
+  width: auto;
+  padding: 1px 1.5rem 1px 0.25rem;
+  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);
+  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;
+}
+:host .input-container:not(.readonly).no-icon[type=number] {
+  text-align: right;
+}
+:host .input-container:not(.readonly).no-icon[type=number]::-webkit-inner-spin-button {
+  margin-right: -2px;
+  margin-left: 2px;
+  display: none;
+}
+:host .input-container:not(.readonly).no-icon:-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;
+}
+:host .input-container:not(.readonly).no-icon:-webkit-autofill, :host .input-container:not(.readonly).no-icon: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;
+}
+:host .input-container:not(.readonly).no-icon::-moz-placeholder {
+  color: var(--theme-input-hint--color);
+}
+:host .input-container:not(.readonly).no-icon::placeholder {
+  color: var(--theme-input-hint--color);
+}
+:host .input-container:not(.readonly).no-icon.hover:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:-moz-read-only), :host .input-container:not(.readonly).no-icon:hover:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:-moz-read-only) {
   border-color: var(--theme-input--border-color--hover) !important;
   background-color: var(--theme-input--background--hover);
 }
-:host .input-container:not(.readonly):not(.disabled).focus {
+:host .input-container:not(.readonly).no-icon.hover:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:read-only), :host .input-container:not(.readonly).no-icon:hover:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:read-only) {
+  border-color: var(--theme-input--border-color--hover) !important;
+  background-color: var(--theme-input--background--hover);
+}
+:host .input-container:not(.readonly).no-icon.focus:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:-moz-read-only), :host .input-container:not(.readonly).no-icon:focus:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:-moz-read-only) {
   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;
 }
-:host .input-container.disabled {
+:host .input-container:not(.readonly).no-icon.focus:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:read-only), :host .input-container:not(.readonly).no-icon:focus:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:read-only) {
+  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;
+}
+:host .input-container:not(.readonly).no-icon:disabled, :host .input-container:not(.readonly).no-icon.disabled {
+  box-shadow: none;
+  background-color: transparent;
+  outline: none;
+  border: none;
+  border-radius: 0;
   color: var(--theme-input--color--disabled);
   border-bottom: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled);
 }
-:host .input-container.readonly {
+:host .input-container:not(.readonly).no-icon:disabled::-moz-placeholder, :host .input-container:not(.readonly).no-icon.disabled::-moz-placeholder {
+  color: transparent;
+}
+:host .input-container:not(.readonly).no-icon:disabled::placeholder, :host .input-container:not(.readonly).no-icon.disabled::placeholder {
+  color: transparent;
+}
+:host .input-container.readonly:not(.no-icon) {
   min-height: 2rem;
   width: auto;
-  padding: 0.25rem 0.5rem;
+  padding: 1px 1.5rem 1px 1.75rem;
   background-color: var(--theme-input--background);
   color: var(--theme-input--color);
   -webkit-appearance: textfield;
@@ -1319,40 +1431,40 @@ button.dropdown-toggle::after {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smooting: grayscale;
 }
-:host .input-container.readonly[type=number] {
+:host .input-container.readonly:not(.no-icon)[type=number] {
   text-align: right;
 }
-:host .input-container.readonly[type=number]::-webkit-inner-spin-button {
+:host .input-container.readonly:not(.no-icon)[type=number]::-webkit-inner-spin-button {
   margin-right: -2px;
   margin-left: 2px;
   display: none;
 }
-:host .input-container.readonly:-webkit-autofill {
+:host .input-container.readonly:not(.no-icon):-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;
 }
-:host .input-container.readonly:-webkit-autofill, :host .input-container.readonly:autofill {
+:host .input-container.readonly:not(.no-icon):-webkit-autofill, :host .input-container.readonly:not(.no-icon):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;
 }
-:host .input-container.readonly::-moz-placeholder {
+:host .input-container.readonly:not(.no-icon)::-moz-placeholder {
   color: var(--theme-input-hint--color);
 }
-:host .input-container.readonly::placeholder {
+:host .input-container.readonly:not(.no-icon)::placeholder {
   color: var(--theme-input-hint--color);
 }
-:host .input-container.readonly.hover:not(.readonly,
+:host .input-container.readonly:not(.no-icon).hover:not(.readonly,
 .read-only,
 .disabled,
 [readonly],
 [disabled],
-:-moz-read-only), :host .input-container.readonly:hover:not(.readonly,
+:-moz-read-only), :host .input-container.readonly:not(.no-icon):hover:not(.readonly,
 .read-only,
 .disabled,
 [readonly],
@@ -1361,12 +1473,12 @@ button.dropdown-toggle::after {
   border-color: var(--theme-input--border-color--hover) !important;
   background-color: var(--theme-input--background--hover);
 }
-:host .input-container.readonly.hover:not(.readonly,
+:host .input-container.readonly:not(.no-icon).hover:not(.readonly,
 .read-only,
 .disabled,
 [readonly],
 [disabled],
-:read-only), :host .input-container.readonly:hover:not(.readonly,
+:read-only), :host .input-container.readonly:not(.no-icon):hover:not(.readonly,
 .read-only,
 .disabled,
 [readonly],
@@ -1375,12 +1487,12 @@ button.dropdown-toggle::after {
   border-color: var(--theme-input--border-color--hover) !important;
   background-color: var(--theme-input--background--hover);
 }
-:host .input-container.readonly.focus:not(.readonly,
+:host .input-container.readonly:not(.no-icon).focus:not(.readonly,
 .read-only,
 .disabled,
 [readonly],
 [disabled],
-:-moz-read-only), :host .input-container.readonly:focus:not(.readonly,
+:-moz-read-only), :host .input-container.readonly:not(.no-icon):focus:not(.readonly,
 .read-only,
 .disabled,
 [readonly],
@@ -1390,12 +1502,12 @@ button.dropdown-toggle::after {
   outline-offset: var(--theme-input--focus--outline-offset);
   border-color: var(--theme-input--border-color--focus) !important;
 }
-:host .input-container.readonly.focus:not(.readonly,
+:host .input-container.readonly:not(.no-icon).focus:not(.readonly,
 .read-only,
 .disabled,
 [readonly],
 [disabled],
-:read-only), :host .input-container.readonly:focus:not(.readonly,
+:read-only), :host .input-container.readonly:not(.no-icon):focus:not(.readonly,
 .read-only,
 .disabled,
 [readonly],
@@ -1405,7 +1517,7 @@ button.dropdown-toggle::after {
   outline-offset: var(--theme-input--focus--outline-offset);
   border-color: var(--theme-input--border-color--focus) !important;
 }
-:host .input-container.readonly:-moz-read-only {
+:host .input-container.readonly:not(.no-icon):-moz-read-only {
   box-shadow: none;
   background-color: transparent;
   outline: none;
@@ -1413,7 +1525,7 @@ button.dropdown-toggle::after {
   border-radius: 0;
   border-bottom: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly);
 }
-:host .input-container.readonly.read-only, :host .input-container.readonly:read-only {
+:host .input-container.readonly:not(.no-icon).read-only, :host .input-container.readonly:not(.no-icon):read-only {
   box-shadow: none;
   background-color: transparent;
   outline: none;
@@ -1421,16 +1533,16 @@ button.dropdown-toggle::after {
   border-radius: 0;
   border-bottom: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly);
 }
-:host .input-container.readonly.read-only::-moz-placeholder, :host .input-container.readonly:read-only::-moz-placeholder {
+:host .input-container.readonly:not(.no-icon).read-only::-moz-placeholder, :host .input-container.readonly:not(.no-icon):read-only::-moz-placeholder {
   color: transparent;
 }
-:host .input-container.readonly:-moz-read-only::placeholder {
+:host .input-container.readonly:not(.no-icon):-moz-read-only::placeholder {
   color: transparent;
 }
-:host .input-container.readonly.read-only::placeholder, :host .input-container.readonly:read-only::placeholder {
+:host .input-container.readonly:not(.no-icon).read-only::placeholder, :host .input-container.readonly:not(.no-icon):read-only::placeholder {
   color: transparent;
 }
-:host .input-container.readonly:disabled, :host .input-container.readonly.disabled {
+:host .input-container.readonly:not(.no-icon):disabled, :host .input-container.readonly:not(.no-icon).disabled {
   box-shadow: none;
   background-color: transparent;
   outline: none;
@@ -1439,20 +1551,179 @@ button.dropdown-toggle::after {
   color: var(--theme-input--color--disabled);
   border-bottom: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled);
 }
-:host .input-container.readonly:disabled::-moz-placeholder, :host .input-container.readonly.disabled::-moz-placeholder {
+:host .input-container.readonly:not(.no-icon):disabled::-moz-placeholder, :host .input-container.readonly:not(.no-icon).disabled::-moz-placeholder {
   color: transparent;
 }
-:host .input-container.readonly:disabled::placeholder, :host .input-container.readonly.disabled::placeholder {
+:host .input-container.readonly:not(.no-icon):disabled::placeholder, :host .input-container.readonly:not(.no-icon).disabled::placeholder {
   color: transparent;
 }
+:host .input-container.readonly.no-icon {
+  min-height: 2rem;
+  width: auto;
+  padding: 1px 1.5rem 1px 0.25rem;
+  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);
+  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;
+}
+:host .input-container.readonly.no-icon[type=number] {
+  text-align: right;
+}
+:host .input-container.readonly.no-icon[type=number]::-webkit-inner-spin-button {
+  margin-right: -2px;
+  margin-left: 2px;
+  display: none;
+}
+:host .input-container.readonly.no-icon:-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;
+}
+:host .input-container.readonly.no-icon:-webkit-autofill, :host .input-container.readonly.no-icon: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;
+}
+:host .input-container.readonly.no-icon::-moz-placeholder {
+  color: var(--theme-input-hint--color);
+}
+:host .input-container.readonly.no-icon::placeholder {
+  color: var(--theme-input-hint--color);
+}
+:host .input-container.readonly.no-icon.hover:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:-moz-read-only), :host .input-container.readonly.no-icon:hover:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:-moz-read-only) {
+  border-color: var(--theme-input--border-color--hover) !important;
+  background-color: var(--theme-input--background--hover);
+}
+:host .input-container.readonly.no-icon.hover:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:read-only), :host .input-container.readonly.no-icon:hover:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:read-only) {
+  border-color: var(--theme-input--border-color--hover) !important;
+  background-color: var(--theme-input--background--hover);
+}
+:host .input-container.readonly.no-icon.focus:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:-moz-read-only), :host .input-container.readonly.no-icon:focus:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:-moz-read-only) {
+  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;
+}
+:host .input-container.readonly.no-icon.focus:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:read-only), :host .input-container.readonly.no-icon:focus:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:read-only) {
+  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;
+}
+:host .input-container.readonly.no-icon:-moz-read-only {
+  box-shadow: none;
+  background-color: transparent;
+  outline: none;
+  border: none;
+  border-radius: 0;
+  border-bottom: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly);
+}
+:host .input-container.readonly.no-icon.read-only, :host .input-container.readonly.no-icon:read-only {
+  box-shadow: none;
+  background-color: transparent;
+  outline: none;
+  border: none;
+  border-radius: 0;
+  border-bottom: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly);
+}
+:host .input-container.readonly.no-icon.read-only::-moz-placeholder, :host .input-container.readonly.no-icon:read-only::-moz-placeholder {
+  color: transparent;
+}
+:host .input-container.readonly.no-icon:-moz-read-only::placeholder {
+  color: transparent;
+}
+:host .input-container.readonly.no-icon.read-only::placeholder, :host .input-container.readonly.no-icon:read-only::placeholder {
+  color: transparent;
+}
+:host .input-container.readonly.no-icon:disabled, :host .input-container.readonly.no-icon.disabled {
+  box-shadow: none;
+  background-color: transparent;
+  outline: none;
+  border: none;
+  border-radius: 0;
+  color: var(--theme-input--color--disabled);
+  border-bottom: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled);
+}
+:host .input-container.readonly.no-icon:disabled::-moz-placeholder, :host .input-container.readonly.no-icon.disabled::-moz-placeholder {
+  color: transparent;
+}
+:host .input-container.readonly.no-icon:disabled::placeholder, :host .input-container.readonly.no-icon.disabled::placeholder {
+  color: transparent;
+}
+:host .input-container:not(.readonly):not(.disabled):hover {
+  border-color: var(--theme-input--border-color--hover) !important;
+  background-color: var(--theme-input--background--hover);
+}
+:host .input-container:not(.readonly):not(.disabled).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;
+}
+:host .input-container.disabled {
+  color: var(--theme-input--color--disabled);
+  border-bottom: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled);
+}
 :host .input-container {
   display: flex;
   height: auto;
   max-height: 3.75rem;
-  padding: 1px 1.5rem 1px 1.75rem !important;
-}
-:host .input-container.no-icon {
-  padding-left: 0.25rem;
 }
 :host .token-container {
   flex-grow: 1;