@siemens/ix 2.4.1 → 2.6.0

package/dist/collection/components/input/number-input.css

@@ -0,0 +1,629 @@
+/*
+ * 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.hover:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:-moz-read-only), input: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);
+}
+input.hover:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:read-only), input: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);
+}
+input.focus:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:-moz-read-only), input: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;
+}
+input.focus:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:read-only), input: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;
+}
+input:-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);
+}
+input.read-only, input: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);
+}
+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, input.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);
+}
+input:disabled::-moz-placeholder, input.disabled::-moz-placeholder {
+  color: transparent;
+}
+input:disabled::placeholder, 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.hover:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:-moz-read-only), textarea: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);
+}
+textarea.hover:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:read-only), textarea: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);
+}
+textarea.focus:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:-moz-read-only), textarea: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;
+}
+textarea.focus:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:read-only), textarea: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;
+}
+textarea:-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);
+}
+textarea.read-only, textarea: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);
+}
+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, textarea.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);
+}
+textarea:disabled::-moz-placeholder, textarea.disabled::-moz-placeholder {
+  color: transparent;
+}
+textarea:disabled::placeholder, 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) !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 .start-container,
+:host .end-container {
+  display: flex;
+  position: absolute;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+}
+:host .start-container {
+  left: 0;
+}
+:host .end-container {
+  right: 0;
+}
+:host .start-container ::slotted(*) {
+  margin-left: 0.5rem;
+}
+:host .start-container ::slotted(ix-icon.size-24),
+:host .start-container ::slotted(ix-icon-button.btn-icon-16) {
+  margin-left: 0.25rem;
+}
+:host .start-container ::slotted(ix-icon-button.btn-icon-32) {
+  margin-left: 0;
+}
+:host .end-container ::slotted(*) {
+  margin-right: 0.5rem;
+}
+:host .end-container ::slotted(ix-icon.size-24),
+:host .end-container ::slotted(ix-icon-button.btn-icon-16) {
+  margin-right: 0.25rem;
+}
+:host .end-container ::slotted(ix-icon-button.btn-icon-32) {
+  margin-right: 0;
+}
+:host .bottom-text {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+: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) !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 .input-wrapper.show-stepper-buttons input[type=number] {
+  min-width: 6rem;
+}
+:host .number-stepper-container {
+  display: flex;
+  position: relative;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  margin-right: 0.25rem;
+}
+:host .number-stepper-container.container-hidden {
+  display: none;
+}