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

package/dist/collection/components/tabs/tabs.css

@@ -60,6 +60,12 @@
 :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;

package/dist/collection/components/tabs/tabs.js

@@ -197,13 +197,13 @@ export class Tabs {
         });
     }
     render() {
-        return (h(Host, { key: 'd78a0e8848762853905f0a00ad0e29eb8010f058' }, h("div", { key: '81f8018608a4ead1b07a2c8dbc275f3e6b1a4f9f', class: "arrow", "data-arrow-left": true, onClick: () => this.move(this.scrollAmount, true) }, h("ix-icon", { key: '74ac11767dded217d438e58f3d9af659b5f7913c', name: 'chevron-left-small' })), h("div", { key: '22172b312ee82c63c590780030766262d5655be3', class: {
+        return (h(Host, { key: 'a9c383f30565690984150c5bb5e144a50a08e422' }, h("div", { key: 'e505fbd880ce2eef0faf325c12a1352304f62345', class: "arrow", "data-arrow-left": true, onClick: () => this.move(this.scrollAmount, true) }, h("ix-icon", { key: '390e636793050dec280c0af33f3f7f55a7955dbf', name: 'chevron-left-small' })), h("div", { key: '190636a8f3eb4eedef2f9971285a807e94e84798', class: {
                 'tab-items': true,
                 'overflow-shadow': true,
                 'shadow-left': this.showPreviousArrow(),
                 'shadow-right': this.showNextArrow(),
                 'shadow-both': this.showNextArrow() && this.showPreviousArrow(),
-            } }, h("div", { key: '31a8df74124a12d6abc6e3af8c45e2f59c9e8e7f', class: "items-content" }, h("slot", { key: '0a37dea0573b5123c6de66831c028401d1da86b4' }))), h("div", { key: 'cd946069a8dbb2708bc90923c2bb8a897eeaf3b5', class: "arrow right", "data-arrow-right": true, onClick: () => this.move(-this.scrollAmount, true) }, h("ix-icon", { key: '3542fc3e7cba8477f2367492620dc16cdaecbad8', name: 'chevron-right-small' }))));
+            } }, h("div", { key: '3a93ba0ebc7bf708de196b86bfa640d941a67750', class: "items-content" }, h("slot", { key: '504236daba4c544bd0b574e0b50556deaba8c9c8' }))), h("div", { key: '40dd25a8e3fac3840bdb6b8f2b76abccd090aaaa', class: "arrow right", "data-arrow-right": true, onClick: () => this.move(-this.scrollAmount, true) }, h("ix-icon", { key: 'c163d47af17bf1b9b85890d70ad2d90a1b842b9c', name: 'chevron-right-small' }))));
     }
     static get is() { return "ix-tabs"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/text-field/input.fc.js

@@ -0,0 +1,38 @@
+/*
+ * 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 { h } from "@stencil/core";
+export function TextareaElement(props) {
+    return (h("textarea", Object.assign({ readOnly: props.readonly, disabled: props.disabled, maxLength: props.maxLength, minLength: props.minLength, cols: Number(props.textareaCols), rows: Number(props.textareaRows), ref: props.textAreaRef, class: {
+            'is-invalid': props.isInvalid,
+        }, required: props.required, value: props.value, placeholder: props.placeholder, onChange: (changeEvent) => {
+            const target = changeEvent.target;
+            props.valueChange(target.value);
+        }, onInput: (inputEvent) => {
+            const target = inputEvent.target;
+            props.updateFormInternalValue(target.value);
+        }, onBlur: () => props.onBlur(), style: { height: props.textareaHeight, width: props.textareaWidth } }, props.ariaAttributes)));
+}
+export function InputElement(props) {
+    return (h("input", Object.assign({ id: props.id, autoComplete: "off", readOnly: props.readonly, disabled: props.disabled, min: props.min, max: props.max, maxLength: props.maxLength ? Number(props.maxLength) : undefined, minLength: props.maxLength ? Number(props.minLength) : undefined, ref: props.inputRef, pattern: props.pattern, type: props.type, class: {
+            'is-invalid': props.isInvalid,
+        }, required: props.required, value: props.value, placeholder: props.placeholder, onKeyPress: (event) => props.onKeyPress(event), onChange: (changeEvent) => {
+            const target = changeEvent.target;
+            props.valueChange(target.value);
+        }, onInput: (inputEvent) => {
+            const target = inputEvent.target;
+            props.updateFormInternalValue(target.value);
+        }, onBlur: () => props.onBlur() }, props.ariaAttributes)));
+}
+export function PostfixSlot(props, children) {
+    return (h("div", { class: "postfix-container", ref: props.postfixRef }, h("slot", { name: "postfix", onSlotchange: props.onSlotChange }), children));
+}
+export function PrefixSlot(props) {
+    return (h("div", { class: "prefix-container", ref: props.prefixRef }, h("slot", { name: "prefix", onSlotchange: props.onSlotChange })));
+}
+//# sourceMappingURL=input.fc.js.map

package/dist/collection/components/text-field/input.fc.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.fc.js","sourceRoot":"","sources":["../../../src/components/text-field/input.fc.tsx"],"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 */\nimport { h } from '@stencil/core';\nimport { MakeRef } from '../utils/make-ref';\nimport { A11yAttributes } from '../utils/a11y';\n\nexport function TextareaElement(props: {\n  textareaHeight?: string;\n  textareaWidth?: string;\n  textareaRows?: string;\n  textareaCols?: string;\n  disabled: boolean;\n  readonly: boolean;\n  maxLength?: number;\n  minLength?: number;\n  isInvalid: boolean;\n  required: boolean;\n  value: string;\n  placeholder?: string;\n  textAreaRef: (el: HTMLTextAreaElement) => void;\n  valueChange: (value: string) => void;\n  updateFormInternalValue: (value: string) => void;\n  onBlur: () => void;\n  ariaAttributes?: A11yAttributes;\n}) {\n  return (\n    <textarea\n      readOnly={props.readonly}\n      disabled={props.disabled}\n      maxLength={props.maxLength}\n      minLength={props.minLength}\n      cols={Number(props.textareaCols)}\n      rows={Number(props.textareaRows)}\n      ref={props.textAreaRef}\n      class={{\n        'is-invalid': props.isInvalid,\n      }}\n      required={props.required}\n      value={props.value}\n      placeholder={props.placeholder}\n      onChange={(changeEvent) => {\n        const target = changeEvent.target as HTMLInputElement;\n        props.valueChange(target.value);\n      }}\n      onInput={(inputEvent) => {\n        const target = inputEvent.target as HTMLInputElement;\n        props.updateFormInternalValue(target.value);\n      }}\n      onBlur={() => props.onBlur()}\n      style={{ height: props.textareaHeight, width: props.textareaWidth }}\n      {...props.ariaAttributes}\n    ></textarea>\n  );\n}\n\nexport function InputElement(props: {\n  id: string;\n  disabled: boolean;\n  readonly: boolean;\n  maxLength?: string | number;\n  minLength?: string | number;\n  max?: string | number;\n  min?: string | number;\n  pattern?: string;\n  type: string;\n  isInvalid: boolean;\n  required: boolean;\n  value: string | number;\n  placeholder?: string;\n  inputRef: (el: HTMLInputElement) => void;\n  onKeyPress: (event: KeyboardEvent) => void;\n  valueChange: (value: string) => void;\n  updateFormInternalValue: (value: string) => void;\n  onBlur: () => void;\n  ariaAttributes?: A11yAttributes;\n}) {\n  return (\n    <input\n      id={props.id}\n      autoComplete=\"off\"\n      readOnly={props.readonly}\n      disabled={props.disabled}\n      min={props.min}\n      max={props.max}\n      maxLength={props.maxLength ? Number(props.maxLength) : undefined}\n      minLength={props.maxLength ? Number(props.minLength) : undefined}\n      ref={props.inputRef}\n      pattern={props.pattern}\n      type={props.type}\n      class={{\n        'is-invalid': props.isInvalid,\n      }}\n      required={props.required}\n      value={props.value}\n      placeholder={props.placeholder}\n      onKeyPress={(event) => props.onKeyPress(event)}\n      onChange={(changeEvent) => {\n        const target = changeEvent.target as HTMLInputElement;\n        props.valueChange(target.value);\n      }}\n      onInput={(inputEvent) => {\n        const target = inputEvent.target as HTMLInputElement;\n        props.updateFormInternalValue(target.value);\n      }}\n      onBlur={() => props.onBlur()}\n      {...props.ariaAttributes}\n    ></input>\n  );\n}\n\nexport function PostfixSlot(\n  props: {\n    postfixRef: MakeRef<HTMLDivElement>;\n    onSlotChange?: (e: Event) => void;\n  },\n  children\n) {\n  return (\n    <div class=\"postfix-container\" ref={props.postfixRef}>\n      <slot name=\"postfix\" onSlotchange={props.onSlotChange}></slot>\n      {children}\n    </div>\n  );\n}\n\nexport function PrefixSlot(props: {\n  prefixRef: MakeRef<HTMLDivElement>;\n  onSlotChange?: (e: Event) => void;\n}) {\n  return (\n    <div class=\"prefix-container\" ref={props.prefixRef}>\n      <slot name=\"prefix\" onSlotchange={props.onSlotChange}></slot>\n    </div>\n  );\n}\n"]}

package/dist/collection/components/{form-field/form-field.css → text-field/number-field.css}

@@ -1,5 +1,13 @@
 /*
- * SPDX-FileCopyrightText: 2023 Siemens AG
+ * 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
  *
@@ -26,6 +34,14 @@
 /* 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
  *
@@ -59,6 +75,9 @@ input {
   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);
@@ -84,11 +103,20 @@ input::-moz-placeholder {
 input::placeholder {
   color: var(--theme-input-hint--color);
 }
-input.hover, input:hover {
+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.focus, input:focus {
+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;
@@ -141,7 +169,6 @@ input[type=number]::-webkit-inner-spin-button {
 }
 
 textarea {
-  height: 3.25rem;
   padding: 0.375rem 1.25rem 0.375rem 0.5rem;
 }
 textarea {
@@ -160,6 +187,9 @@ textarea {
   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);
@@ -185,11 +215,20 @@ textarea::-moz-placeholder {
 textarea::placeholder {
   color: var(--theme-input-hint--color);
 }
-textarea.hover, textarea:hover {
+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.focus, textarea:focus {
+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;
@@ -289,6 +328,196 @@ 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 {
-  display: contents;
+  /* 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 .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-left: 0.5rem;
 }