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

package/dist/collection/components/helper-text/helper-text.css

@@ -0,0 +1,34 @@
+/*
+ * 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: block;
+}
+:host .bottom-text {
+  display: flex;
+  position: relative;
+  align-items: flex-start;
+  justify-content: flex-start;
+  gap: 0.25rem;
+  margin-right: 0.25rem;
+}
+:host .text-icon {
+  margin: 0.125rem;
+}
+:host .text-icon.invalid {
+  color: var(--theme-helper-icon--color--invalid);
+}
+:host .text-icon.info {
+  color: var(--theme-helper-icon--color--info);
+}
+:host .text-icon.warning {
+  color: var(--theme-helper-icon--color--warning);
+}
+:host .text-icon.valid {
+  color: var(--theme-helper-icon--color--valid);
+}

package/dist/collection/components/helper-text/helper-text.js

@@ -0,0 +1,179 @@
+import { Host, h } from "@stencil/core";
+import { checkFieldClasses, createClassMutationObserver, } from "../utils/field";
+import { renderHelperText } from "../field-wrapper/helper-text-util";
+export class HelperText {
+    constructor() {
+        this.observer = new MutationObserver(() => this.checkForRequired());
+        this.htmlFor = undefined;
+        this.helperText = undefined;
+        this.invalidText = undefined;
+        this.validText = undefined;
+        this.infoText = undefined;
+        this.warningText = undefined;
+        this.validationResults = {
+            isInfo: false,
+            isInvalid: false,
+            isValid: false,
+            isWarning: false,
+            isInvalidByRequired: false,
+        };
+    }
+    connectedCallback() {
+        this.observer.observe(window.document, {
+            childList: true,
+            subtree: true,
+        });
+    }
+    disconnectedCallback() {
+        if (this.observer) {
+            this.observer.disconnect();
+        }
+    }
+    componentWillRender() {
+        this.checkForRequired();
+    }
+    async checkForRequired() {
+        if (!this.htmlFor) {
+            return;
+        }
+        const forElement = document.getElementById(this.htmlFor);
+        if (!forElement) {
+            return;
+        }
+        if (this.classObserver) {
+            this.classObserver.destroy();
+        }
+        this.classObserver = createClassMutationObserver(forElement, () => {
+            this.validationResults = checkFieldClasses(forElement);
+        });
+        this.validationResults = checkFieldClasses(forElement);
+    }
+    render() {
+        return (h(Host, { key: '3db11c77053d58bea53cb0be437354ebfda9f004' }, renderHelperText(Object.assign({ helperText: this.helperText, invalidText: this.invalidText, validText: this.validText, infoText: this.infoText, warningText: this.warningText }, this.validationResults))));
+    }
+    static get is() { return "ix-helper-text"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["helper-text.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["helper-text.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "htmlFor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The id of the form element that the label is associated with"
+                },
+                "attribute": "html-for",
+                "reflect": false
+            },
+            "helperText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Show text below the field component"
+                },
+                "attribute": "helper-text",
+                "reflect": false
+            },
+            "invalidText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Error text for the field component"
+                },
+                "attribute": "invalid-text",
+                "reflect": false
+            },
+            "validText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Valid text for the field component"
+                },
+                "attribute": "valid-text",
+                "reflect": false
+            },
+            "infoText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Info text for the field component"
+                },
+                "attribute": "info-text",
+                "reflect": false
+            },
+            "warningText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Warning text for the field component"
+                },
+                "attribute": "warning-text",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "validationResults": {}
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+}
+//# sourceMappingURL=helper-text.js.map

package/dist/collection/components/helper-text/helper-text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helper-text.js","sourceRoot":"","sources":["../../../src/components/helper-text/helper-text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,EAIL,iBAAiB,EACjB,2BAA2B,GAC5B,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAQrE,MAAM,OAAO,UAAU;;QAwCb,aAAQ,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC;;;;;;;iCARvB;YAC9C,MAAM,EAAE,KAAK;YACb,SAAS,EAAE,KAAK;YAChB,OAAO,EAAE,KAAK;YACd,SAAS,EAAE,KAAK;YAChB,mBAAmB,EAAE,KAAK;SAC3B;;IAKD,iBAAiB;QACf,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,QAAQ,EAAE;YACrC,SAAS,EAAE,IAAI;YACf,OAAO,EAAE,IAAI;SACd,CAAC,CAAC;IACL,CAAC;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;QAC7B,CAAC;IACH,CAAC;IAED,mBAAmB;QACjB,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAEO,KAAK,CAAC,gBAAgB;QAC5B,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YAClB,OAAO;QACT,CAAC;QACD,MAAM,UAAU,GAAG,QAAQ,CAAC,cAAc,CACxC,IAAI,CAAC,OAAO,CAC0B,CAAC;QACzC,IAAI,CAAC,UAAU,EAAE,CAAC;YAChB,OAAO;QACT,CAAC;QAED,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YACvB,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC;QAC/B,CAAC;QACD,IAAI,CAAC,aAAa,GAAG,2BAA2B,CAAC,UAAU,EAAE,GAAG,EAAE;YAChE,IAAI,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,UAAU,CAAC,CAAC;QACzD,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,UAAU,CAAC,CAAC;IACzD,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,uDACF,gBAAgB,iBACf,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,WAAW,EAAE,IAAI,CAAC,WAAW,IAC1B,IAAI,CAAC,iBAAiB,EACzB,CACG,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, State, h, Element } from '@stencil/core';\nimport {\n  ClassMutationObserver,\n  HTMLIxFormComponentElement,\n  ValidationResults,\n  checkFieldClasses,\n  createClassMutationObserver,\n} from '../utils/field';\nimport { renderHelperText } from '../field-wrapper/helper-text-util';\nimport { IxComponent } from '../utils/internal';\n\n@Component({\n  tag: 'ix-helper-text',\n  styleUrl: 'helper-text.scss',\n  shadow: true,\n})\nexport class HelperText implements IxComponent {\n  @Element() hostElement!: HTMLIxHelperTextElement;\n  /**\n   * The id of the form element that the label is associated with\n   */\n  @Prop() htmlFor?: string;\n\n  /**\n   * Show text below the field component\n   */\n  @Prop() helperText?: string;\n\n  /**\n   * Error text for the field component\n   */\n  @Prop() invalidText?: string;\n\n  /**\n   * Valid text for the field component\n   */\n  @Prop() validText?: string;\n\n  /**\n   * Info text for the field component\n   */\n  @Prop() infoText?: string;\n\n  /**\n   * Warning text for the field component\n   */\n  @Prop() warningText?: string;\n\n  @State() validationResults: ValidationResults = {\n    isInfo: false,\n    isInvalid: false,\n    isValid: false,\n    isWarning: false,\n    isInvalidByRequired: false,\n  };\n\n  private observer = new MutationObserver(() => this.checkForRequired());\n  private classObserver?: ClassMutationObserver;\n\n  connectedCallback() {\n    this.observer.observe(window.document, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  disconnectedCallback(): void {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  componentWillRender() {\n    this.checkForRequired();\n  }\n\n  private async checkForRequired() {\n    if (!this.htmlFor) {\n      return;\n    }\n    const forElement = document.getElementById(\n      this.htmlFor\n    ) as HTMLIxFormComponentElement<unknown>;\n    if (!forElement) {\n      return;\n    }\n\n    if (this.classObserver) {\n      this.classObserver.destroy();\n    }\n    this.classObserver = createClassMutationObserver(forElement, () => {\n      this.validationResults = checkFieldClasses(forElement);\n    });\n    this.validationResults = checkFieldClasses(forElement);\n  }\n\n  render() {\n    return (\n      <Host>\n        {renderHelperText({\n          helperText: this.helperText,\n          invalidText: this.invalidText,\n          validText: this.validText,\n          infoText: this.infoText,\n          warningText: this.warningText,\n          ...this.validationResults,\n        })}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/icon-button/icon-button.css

@@ -119,6 +119,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;
@@ -187,6 +193,12 @@
   display: none;
 }
 
+@-moz-document url-prefix() {
+  * {
+    scrollbar-color: var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);
+    scrollbar-width: thin;
+  }
+}
 /* width */
 ::-webkit-scrollbar {
   width: 0.5rem;

package/dist/collection/components/icon-button/icon-button.js

@@ -69,7 +69,7 @@ export class IconButton {
             type: this.type,
             extraClasses: this.getIconSizeClass(),
         };
-        return (h(Host, { key: '0de06c10c66ae48a19a61794482353383007175d', class: Object.assign(Object.assign({}, this.getIconSizeClass()), { disabled: this.disabled || this.loading }) }, h(BaseIconButton, Object.assign({ key: '151dac878b35e83b8cca149e8b68c28f1198d5db' }, baseButtonProps))));
+        return (h(Host, { key: 'd2bca41de69eb885e73f4d574450349d393b1568', class: Object.assign(Object.assign({}, this.getIconSizeClass()), { disabled: this.disabled || this.loading }) }, h(BaseIconButton, Object.assign({ key: '7594bd574939c6c9ccf636fbfb3a8f2887b9e242' }, baseButtonProps))));
     }
     static get is() { return "ix-icon-button"; }
     static get encapsulation() { return "shadow"; }
@@ -114,7 +114,7 @@ export class IconButton {
                     "references": {
                         "IconButtonVariant": {
                             "location": "local",
-                            "path": "/Users/daniel/dev/oss/ix/packages/core/src/components/icon-button/icon-button.tsx",
+                            "path": "/home/runner/work/ix/ix/packages/core/src/components/icon-button/icon-button.tsx",
                             "id": "src/components/icon-button/icon-button.tsx::IconButtonVariant"
                         }
                     }

package/dist/collection/components/icon-toggle-button/icon-toggle-button.css

@@ -119,6 +119,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;
@@ -187,6 +193,12 @@
   display: none;
 }
 
+@-moz-document url-prefix() {
+  * {
+    scrollbar-color: var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);
+    scrollbar-width: thin;
+  }
+}
 /* width */
 ::-webkit-scrollbar {
   width: 0.5rem;

package/dist/collection/components/icon-toggle-button/icon-toggle-button.js

@@ -73,7 +73,7 @@ export class IconToggleButton {
             extraClasses: Object.assign({ 'icon-button': true }, this.getIconSizeClass()),
         };
         console.log(baseButtonProps, this.disabled, this.loading);
-        return (h(Host, { key: '90281a49cd680bd8cf611726bf0c6370452432d1', class: Object.assign(Object.assign({}, this.getIconSizeClass()), { disabled: this.disabled || this.loading }) }, h(BaseIconButton, Object.assign({ key: '12a0e3c4c9654c522dbf65bb43744143b842c44c' }, baseButtonProps))));
+        return (h(Host, { key: '84086b39d1bf2588fe5a84a95df930a0c03e4061', class: Object.assign(Object.assign({}, this.getIconSizeClass()), { disabled: this.disabled || this.loading }) }, h(BaseIconButton, Object.assign({ key: 'ddb97c7c3cbda0ee5d2971a0d6b2e49bc4cd4f06' }, baseButtonProps))));
     }
     static get is() { return "ix-icon-toggle-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -49,6 +49,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/input-group/input-group.js

@@ -124,7 +124,7 @@ export class InputGroup {
         return width;
     }
     render() {
-        return (h(Host, { key: '32aef634c699370147d06d110ecf4bfee619f657', class: { disabled: this.disabled } }, h("div", { key: '285517df8b9cb66cc63de951bd9146ca4dd0d098', class: "group group-start" }, h("slot", { key: '79af98dc6dd8352c768d5eb14346f39f88978bac', name: "input-start" })), h("slot", { key: '070682be2e58879ec9b1d2adeac9031b75d52a14' }), h("div", { key: 'f9d0fdbdafe8a23d23e4ce11e2b0c07dfbeda159', class: "group group-end" }, h("slot", { key: '02c882edae38c3fd655ab1abe82abd9f016bb09c', name: "input-end" }))));
+        return (h(Host, { key: 'a632148f49a5084f9734bb7df674bb34f1e29726', class: { disabled: this.disabled } }, h("div", { key: '9c6ea56818e6226a88bbd555a9f975804246c549', class: "group group-start" }, h("slot", { key: '302da4742e1122fff59d5e2d13d062f3abeaea19', name: "input-start" })), h("slot", { key: 'd0125d9c48d61188e83866b9cd8d628a3c0bfd8f' }), h("div", { key: 'fbf242a8b2fb3febc195066bc3c2064506ff7788', class: "group group-end" }, h("slot", { key: 'dedfedc593c7c6425a32cd6f9448c7147495eb55', name: "input-end" }))));
     }
     static get is() { return "ix-input-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/key-value/key-value.js

@@ -20,7 +20,7 @@ export class KeyValue {
         this.value = undefined;
     }
     render() {
-        return (h(Host, { key: '227f052645f548c6e1c19a925734bbd6066358e4', class: `keyValue keyValue--${this.labelPosition === 'top' ? 'column' : 'row'}` }, this.icon && (h("ix-icon", { name: this.icon, size: "24", class: "keyValue__icon" })), h("div", { key: 'ffe1c46cf33671aeb701559b6da2ec5133099c94', class: "keyValue__content" }, h("div", { key: '700543226c808d81d11c9d9bf69cf25c73825688', class: "content__label" }, this.label), h("div", { key: '7e5b12f25fb6d9503947d6a7b200c7a3f962aee2', class: {
+        return (h(Host, { key: '565b342bbcbd103c153df79ba4407c5be58e372a', class: `keyValue keyValue--${this.labelPosition === 'top' ? 'column' : 'row'}` }, this.icon && (h("ix-icon", { key: '884b129ce9171233352573ec412843f0d945bfaf', name: this.icon, size: "24", class: "keyValue__icon" })), h("div", { key: '76430d26876e5d3aca532df43e2b078a7a1f0e57', class: "keyValue__content" }, h("div", { key: '79e43f1cf842c51619f83b802fe6358d64a0f16c', class: "content__label" }, this.label), h("div", { key: '29a1b892cc777d7e16642e17fedd2b48ee307998', class: {
                 content__value: true,
                 'has-customValue': this.value === undefined,
             } }, this.value !== undefined ? (this.value) : (h("slot", { name: "custom-value" }))))));
@@ -82,7 +82,7 @@ export class KeyValue {
                     "references": {
                         "KeyValueLabelPosition": {
                             "location": "local",
-                            "path": "/Users/daniel/dev/oss/ix/packages/core/src/components/key-value/key-value.tsx",
+                            "path": "/home/runner/work/ix/ix/packages/core/src/components/key-value/key-value.tsx",
                             "id": "src/components/key-value/key-value.tsx::KeyValueLabelPosition"
                         }
                     }

package/dist/collection/components/key-value/key-value.js.map

@@ -1 +1 @@
-{"version":3,"file":"key-value.js","sourceRoot":"","sources":["../../../src/components/key-value/key-value.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAIzD;;;;GAIG;AAMH,MAAM,OAAO,QAAQ;;;;6BAc4B,KAAK;;;IAOpD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE,sBACL,IAAI,CAAC,aAAa,KAAK,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAC5C,EAAE;YAED,IAAI,CAAC,IAAI,IAAI,CACZ,eAAS,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,gBAAgB,GAAW,CACtE;YACD,4DAAK,KAAK,EAAC,mBAAmB;gBAC5B,4DAAK,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,KAAK,CAAO;gBAC9C,4DACE,KAAK,EAAE;wBACL,cAAc,EAAE,IAAI;wBACpB,iBAAiB,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;qBAC5C,IAEA,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,CAC1B,IAAI,CAAC,KAAK,CACX,CAAC,CAAC,CAAC,CACF,YAAM,IAAI,EAAC,cAAc,GAAQ,CAClC,CACG,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 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 { Component, h, Host, Prop } from '@stencil/core';\n\nexport type KeyValueLabelPosition = 'top' | 'left';\n\n/**\n * @slot custom-value - Optional custom value at key value instead of text value\n *\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-key-value',\n  styleUrl: 'key-value.scss',\n  shadow: true,\n})\nexport class KeyValue {\n  /**\n   * Optional key value icon\n   */\n  @Prop() icon: string;\n\n  /**\n   * Key value label\n   */\n  @Prop() label!: string;\n\n  /**\n   * Optional key value label position - 'top' or 'left'\n   */\n  @Prop() labelPosition: KeyValueLabelPosition = 'top';\n\n  /**\n   * Optional key value text value\n   */\n  @Prop() value: string;\n\n  render() {\n    return (\n      <Host\n        class={`keyValue keyValue--${\n          this.labelPosition === 'top' ? 'column' : 'row'\n        }`}\n      >\n        {this.icon && (\n          <ix-icon name={this.icon} size=\"24\" class=\"keyValue__icon\"></ix-icon>\n        )}\n        <div class=\"keyValue__content\">\n          <div class=\"content__label\">{this.label}</div>\n          <div\n            class={{\n              content__value: true,\n              'has-customValue': this.value === undefined,\n            }}\n          >\n            {this.value !== undefined ? (\n              this.value\n            ) : (\n              <slot name=\"custom-value\"></slot>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"key-value.js","sourceRoot":"","sources":["../../../src/components/key-value/key-value.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAIzD;;;;GAIG;AAMH,MAAM,OAAO,QAAQ;;;;6BAc4B,KAAK;;;IAOpD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE,sBACL,IAAI,CAAC,aAAa,KAAK,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAC5C,EAAE;YAED,IAAI,CAAC,IAAI,IAAI,CACZ,gEAAS,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,gBAAgB,GAAW,CACtE;YACD,4DAAK,KAAK,EAAC,mBAAmB;gBAC5B,4DAAK,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,KAAK,CAAO;gBAC9C,4DACE,KAAK,EAAE;wBACL,cAAc,EAAE,IAAI;wBACpB,iBAAiB,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;qBAC5C,IAEA,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,CAC1B,IAAI,CAAC,KAAK,CACX,CAAC,CAAC,CAAC,CACF,YAAM,IAAI,EAAC,cAAc,GAAQ,CAClC,CACG,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 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 { Component, h, Host, Prop } from '@stencil/core';\n\nexport type KeyValueLabelPosition = 'top' | 'left';\n\n/**\n * @slot custom-value - Optional custom value at key value instead of text value\n *\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-key-value',\n  styleUrl: 'key-value.scss',\n  shadow: true,\n})\nexport class KeyValue {\n  /**\n   * Optional key value icon\n   */\n  @Prop() icon: string;\n\n  /**\n   * Key value label\n   */\n  @Prop() label!: string;\n\n  /**\n   * Optional key value label position - 'top' or 'left'\n   */\n  @Prop() labelPosition: KeyValueLabelPosition = 'top';\n\n  /**\n   * Optional key value text value\n   */\n  @Prop() value: string;\n\n  render() {\n    return (\n      <Host\n        class={`keyValue keyValue--${\n          this.labelPosition === 'top' ? 'column' : 'row'\n        }`}\n      >\n        {this.icon && (\n          <ix-icon name={this.icon} size=\"24\" class=\"keyValue__icon\"></ix-icon>\n        )}\n        <div class=\"keyValue__content\">\n          <div class=\"content__label\">{this.label}</div>\n          <div\n            class={{\n              content__value: true,\n              'has-customValue': this.value === undefined,\n            }}\n          >\n            {this.value !== undefined ? (\n              this.value\n            ) : (\n              <slot name=\"custom-value\"></slot>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/key-value-list/key-value-list.js

@@ -15,7 +15,7 @@ export class KeyValueList {
         this.striped = undefined;
     }
     render() {
-        return (h(Host, { key: '754310ec87f8ab82d3cddc18beea932d72136d73', class: { keyValueList: true, 'keyValueList--striped': this.striped } }, h("slot", { key: '2dc0039fc53a720330b1e9b175ff668b72dd80f6' })));
+        return (h(Host, { key: 'a6bfe9662c156c88f601640f9a52ba1859eb271e', class: { keyValueList: true, 'keyValueList--striped': this.striped } }, h("slot", { key: 'e028a1377bdffc7d1cab8614fba854c0e34b1fa0' })));
     }
     static get is() { return "ix-key-value-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/kpi/kpi.css

@@ -78,6 +78,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/kpi/kpi.js

@@ -33,13 +33,13 @@ export class Kpi {
         return tooltip;
     }
     render() {
-        return (h(Host, { key: 'd6ad8fb6abdd54276ed4d6e99602abc765b7224d', title: this.getTooltipText(), tabindex: "1", class: {
+        return (h(Host, { key: '7f1d8bcbc35516dcde7fda85571fd79082049bfc', title: this.getTooltipText(), tabindex: "1", class: {
                 stacked: this.orientation === 'vertical',
-            } }, h("div", { key: 'c42c84ed0f27a7b1bd083bb4fb7b424a54e2f892', class: {
+            } }, h("div", { key: 'e68bde8404bfc305862eb6e5b05d9d091aceaf0a', class: {
                 'kpi-container': true,
                 alarm: this.state === 'alarm',
                 warning: this.state === 'warning',
-            } }, h("span", { key: 'fdd055e5a2b67ef84a77c6cef50f728506793f3f', class: "kpi-label" }, this.getStateIcon(), h("span", { key: '9fb3820732fdc053135215cf3e39df0fb7ec90cc', class: "kpi-label-text" }, this.label)), h("span", { key: 'e4856bfd98c838a15fc28e28754899d36007e778', class: "kpi-value-container" }, h("span", { key: 'e8757664f1480828a940d17be00822bbfa7e4c39', class: "kpi-value" }, this.value), this.unit ? h("span", { class: "kpi-unit" }, this.unit) : ''))));
+            } }, h("span", { key: 'c967f529b0810e87818e6b243df6e8e108247a93', class: "kpi-label" }, this.getStateIcon(), h("span", { key: '07e375c681b3f784bb4b83b47018557746957bc2', class: "kpi-label-text" }, this.label)), h("span", { key: 'afa38edb472781931448bb7be0345861766cf5d4', class: "kpi-value-container" }, h("span", { key: '93d25eb40e95165ef9a38b79765bea26f850f84b', class: "kpi-value" }, this.value), this.unit ? h("span", { class: "kpi-unit" }, this.unit) : ''))));
     }
     static get is() { return "ix-kpi"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/layout-form/layout-form.css

@@ -0,0 +1,15 @@
+:host {
+  display: block;
+  position: relative;
+  margin: 0 0.5rem;
+}
+:host .container {
+  display: flex;
+  align-items: stretch;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+:host ::slotted(*) {
+  flex-grow: 0;
+  flex-shrink: 0;
+}

package/dist/collection/components/layout-form/layout-form.js

@@ -0,0 +1,126 @@
+import { Host, h } from "@stencil/core";
+export class LayoutForm {
+    constructor() {
+        this.mediaQueryList = [];
+        this.observer = new MutationObserver(() => this.calculateGridTemplateColumns());
+        this.resizeObserver = new ResizeObserver(() => {
+            this.calculateGridTemplateColumns();
+        });
+        this.layout = [
+            { minWidth: '0', columns: 1 },
+            { minWidth: '35rem', columns: 2 },
+        ];
+        this.gridTemplateColumns = undefined;
+    }
+    connectedCallback() {
+        this.observer.observe(this.hostElement, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['data-colspan'],
+        });
+        this.resizeObserver.observe(this.hostElement);
+        this.updateMediaQueryList();
+    }
+    componentWillLoad() {
+        this.calculateGridTemplateColumns();
+    }
+    disconnectedCallback() {
+        if (this.observer) {
+            this.observer.disconnect();
+        }
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
+    }
+    updateMediaQueryList() {
+        this.mediaQueryList = [];
+        this.layout.forEach((layout) => {
+            const mediaQuery = window.matchMedia(`(min-width: ${layout.minWidth})`);
+            this.mediaQueryList.push({
+                mediaQuery,
+                layout,
+            });
+        });
+    }
+    parseNumber(number) {
+        if (!number) {
+            return 1;
+        }
+        const result = parseInt(number);
+        if (isNaN(result)) {
+            return 1;
+        }
+        return result;
+    }
+    calculateGridTemplateColumns() {
+        let layoutColumns = 1;
+        let columnSpacing = '0.5rem';
+        this.mediaQueryList.forEach((mediaQuery) => {
+            if (mediaQuery.mediaQuery.matches) {
+                layoutColumns = mediaQuery.layout.columns;
+            }
+        });
+        let column = 0;
+        Array.from(this.hostElement.children).forEach((child) => {
+            let colspan = this.parseNumber(child.getAttribute('data-colspan'));
+            colspan = Math.min(colspan, layoutColumns);
+            const childRatio = colspan / layoutColumns;
+            child.style.width = `calc(${childRatio * 99.9}% - ${1 - childRatio} * ${columnSpacing})`;
+            if (column + colspan > layoutColumns) {
+                column = 0;
+            }
+            column = (column + colspan) % layoutColumns;
+        });
+    }
+    render() {
+        return (h(Host, { key: 'd2fa4c6a9f79d88482f665cd46bc96dfe8536535' }, h("div", { key: '32c2e2f039e5545b039d073200f1575aafe2b625', class: "container", style: {
+                gridTemplateColumns: this.gridTemplateColumns,
+            } }, h("slot", { key: '59930603690b5d72f584817f0e0e3a44e423ca6e' }))));
+    }
+    static get is() { return "ix-layout-form"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["layout-form.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["layout-form.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "layout": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "{\n    minWidth: string;\n    columns: number;\n  }[]",
+                    "resolved": "{ minWidth: string; columns: number; }[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the layout of the form."
+                },
+                "defaultValue": "[\n    { minWidth: '0', columns: 1 },\n    { minWidth: '35rem', columns: 2 },\n  ]"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "gridTemplateColumns": {}
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "layout",
+                "methodName": "updateMediaQueryList"
+            }];
+    }
+}
+//# sourceMappingURL=layout-form.js.map

package/dist/collection/components/layout-form/layout-form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout-form.js","sourceRoot":"","sources":["../../../src/components/layout-form/layout-form.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { IxComponent } from '../utils/internal';\n\n@Component({\n  tag: 'ix-layout-form',\n  styleUrl: 'layout-form.scss',\n  shadow: true,\n})\nexport class LayoutForm implements IxComponent {\n  @Element() hostElement!: HTMLIxLayoutFormElement;\n\n  /**\n   * Defines the layout of the form.\n   */\n  @Prop() layout: {\n    minWidth: string;\n    columns: number;\n  }[] = [\n    { minWidth: '0', columns: 1 },\n    { minWidth: '35rem', columns: 2 },\n  ];\n\n  @State() gridTemplateColumns?: string;\n\n  private mediaQueryList: {\n    mediaQuery: MediaQueryList;\n    layout: {\n      minWidth: string;\n      columns: number;\n    };\n  }[] = [];\n\n  private observer = new MutationObserver(() =>\n    this.calculateGridTemplateColumns()\n  );\n\n  private resizeObserver = new ResizeObserver(() => {\n    this.calculateGridTemplateColumns();\n  });\n\n  connectedCallback(): void {\n    this.observer.observe(this.hostElement, {\n      childList: true,\n      subtree: true,\n      attributes: true,\n      attributeFilter: ['data-colspan'],\n    });\n    this.resizeObserver.observe(this.hostElement);\n\n    this.updateMediaQueryList();\n  }\n\n  componentWillLoad(): void | Promise<void> {\n    this.calculateGridTemplateColumns();\n  }\n\n  disconnectedCallback(): void {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  @Watch('layout')\n  updateMediaQueryList() {\n    this.mediaQueryList = [];\n    this.layout.forEach((layout) => {\n      const mediaQuery = window.matchMedia(`(min-width: ${layout.minWidth})`);\n      this.mediaQueryList.push({\n        mediaQuery,\n        layout,\n      });\n    });\n  }\n\n  private parseNumber(number: string | null) {\n    if (!number) {\n      return 1;\n    }\n\n    const result = parseInt(number);\n    if (isNaN(result)) {\n      return 1;\n    }\n\n    return result;\n  }\n\n  private calculateGridTemplateColumns() {\n    let layoutColumns = 1;\n    let columnSpacing = '0.5rem';\n\n    this.mediaQueryList.forEach((mediaQuery) => {\n      if (mediaQuery.mediaQuery.matches) {\n        layoutColumns = mediaQuery.layout.columns;\n      }\n    });\n\n    let column = 0;\n    Array.from(this.hostElement.children).forEach((child: HTMLElement) => {\n      let colspan = this.parseNumber(child.getAttribute('data-colspan'));\n      colspan = Math.min(colspan, layoutColumns);\n      const childRatio = colspan / layoutColumns;\n\n      child.style.width = `calc(${childRatio * 99.9}% - ${\n        1 - childRatio\n      } * ${columnSpacing})`;\n\n      if (column + colspan > layoutColumns) {\n        column = 0;\n      }\n\n      column = (column + colspan) % layoutColumns;\n    });\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class=\"container\"\n          style={{\n            gridTemplateColumns: this.gridTemplateColumns,\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/link-button/link-button.js

@@ -17,13 +17,13 @@ export class LinkButton {
         this.target = '_self';
     }
     render() {
-        return (h(Host, { key: '0308562a5da54b5dbc6e5fff61ff5c40458220a4' }, h("a", { key: '31312e87d8ec1a6876d0f9f0d119ec5a99e3d7df', title: this.url, tabindex: "0", class: {
+        return (h(Host, { key: '389f113b4cc2287e9967a4dfab74f08cde025b55' }, h("a", { key: '4f50ef3e1e331ffdebb8d4b7c79f18d32f682490', title: this.url, tabindex: "0", class: {
                 'link-button': true,
                 disabled: this.disabled,
-            }, href: this.disabled ? undefined : this.url, target: this.target }, h("ix-icon", { key: 'f2f046c1695abcb7ab6c5aae112c78cd9ef4163d', class: "icon", name: 'chevron-right-small', size: "16" }), h("div", { key: '04a4a97aa51211e18a585c74aff33b9cd5ed6bc1', class: {
+            }, href: this.disabled ? undefined : this.url, target: this.target }, h("ix-icon", { key: '10e9351e9f4fe2afc048d5ea6aed2127bb8c509e', class: "icon", name: 'chevron-right-small', size: "16" }), h("div", { key: '38a14f8d696ddf2d3bf438d9b14d997f320a444d', class: {
                 link: true,
                 disabled: this.disabled,
-            } }, h("slot", { key: 'a1d09c078e9a4a63ca06a4bbc65c8b8d3e8e1e89' })))));
+            } }, h("slot", { key: '7241dc0ba6e2d8a990e6269f998cc15f98e5101b' })))));
     }
     static get is() { return "ix-link-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/map-navigation/map-navigation.css

@@ -68,6 +68,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/map-navigation/map-navigation.js

@@ -155,11 +155,11 @@ export class MapNavigation {
         this.hasContentHeader = (nodes === null || nodes === void 0 ? void 0 : nodes.length) !== 0;
     }
     render() {
-        return (h(Host, { key: '2946dcb874fe6142c5e46fc0e631528f9c252acd' }, h("slot", { key: '1dade6736fb8ca41922269af3613069109e0f7e1', name: "menu" }), h("div", { key: 'ebf94a90f8d8bc250f50e3b6b81ab9529403ced4', class: "map-nav" }, h("div", { key: 'ca6e3fb3f7222e415a2c3b0a0485852e0d24eb27', class: "map-nav-sidebar" }, h("div", { key: 'eedd75c6ed28651eb0dacc304c2a6bb74a3acb48', class: "map-nav-header" }, h("ix-application-header", { key: '29c589f85db676ffd91bb12488e70de7e2e4dbe1', name: this.applicationName, class: "map-nav-header-brand" }, h("slot", { key: 'c19497c92151dffa74f57177b67b4ba4e0927598', slot: "logo", name: "logo" }))), h("div", { key: '4b3f49c7a748481ba6644748cf81b97346a93e86', class: "map-nav-sidebar-content" }, h("div", { key: '2f3ae2b3b2b82259c9d50f84446b3c3b9187595e', class: "map-nav-sidebar-static-content" }, h("div", { key: '55256b8072af12003597c805c5b79e5996326199', class: "map-nav-title" }, this.navigationTitle), this.hideContextMenu ? ('') : (h("ix-icon-button", { icon: 'context-menu', ghost: true, size: "24", variant: "secondary", onClick: (_) => this.contextMenuClick.emit() }))), h("div", { key: 'fb536c51269368ac94db2464fa040992c1bfb272', class: "map-nav-sidebar-user-content" }, h("slot", { key: '46a3481ffdb3b1fd94dbcb3e4100d36abd3ec800', name: "sidebar-content" })))), h("div", { key: '68e57564835c8813e97a6a5ca27bb6560744b635', class: "content" }, h("div", { key: '51fe8de82f713940d867a5d369a4e9c520f8a13b', class: {
+        return (h(Host, { key: 'd4732f320cef195fd71fcbd9cac4efa9d47d62b7' }, h("slot", { key: 'd89d067a69a0dc395473a37a350fde3373fd0ad8', name: "menu" }), h("div", { key: '0d82e970de98c5ed5cee50dd1e5c12254c1d1ec8', class: "map-nav" }, h("div", { key: '651974e052b845a105dc0c2da24d2aeb32f19153', class: "map-nav-sidebar" }, h("div", { key: 'ddd61f170fc617eb7f6ebc7d15bd7302afe2f499', class: "map-nav-header" }, h("ix-application-header", { key: '1a7a9dc0086e3154d1d9f47f53333de2b72f0cb2', name: this.applicationName, class: "map-nav-header-brand" }, h("slot", { key: 'c0298ae4799751bcca1f576409fa8804018fa01f', slot: "logo", name: "logo" }))), h("div", { key: 'a74e511549005ebf76418632a66704fb3f0ac53b', class: "map-nav-sidebar-content" }, h("div", { key: '6ab0f9f636be4b5341ee60228f942c9f188edf0f', class: "map-nav-sidebar-static-content" }, h("div", { key: 'd31102ac7b3e338a3d0d5eb8c2056093ea35f3c1', class: "map-nav-title" }, this.navigationTitle), this.hideContextMenu ? ('') : (h("ix-icon-button", { icon: 'context-menu', ghost: true, size: "24", variant: "secondary", onClick: (_) => this.contextMenuClick.emit() }))), h("div", { key: '1e3e148d42813f499abed125afe8f87f83e15f07', class: "map-nav-sidebar-user-content" }, h("slot", { key: '77c8448972889f71ea084ff3eb4ab511f3ce4e61', name: "sidebar-content" })))), h("div", { key: '7b91060048aa1c326b4c45dbc919c7576f41133a', class: "content" }, h("div", { key: '07b4cd1aadb0e24cc4fbb97ca3ea4763cce102bd', class: {
                 'map-nav-header-content': true,
                 'bg-2': true,
                 empty: !this.hasContentHeader,
-            } }, h("slot", { key: 'bb2fd5b5bb1577353c85780fa3f285702f1d224e', name: "content-header", onSlotchange: (e) => this.checkHasContentHeader(e) })), h("main", { key: '2735c1d81e97f98b9a9e5652ee7d281e233a21a6' }, h("slot", { key: '830e9656af5d9e46e0d39202abd82ad9fe1ce7fa' }), h("slot", { key: '7bf4f8bce525e3572acdeb08a852e029e7f5cd09', name: "overlay" }))))));
+            } }, h("slot", { key: 'fec68f39d08a4509be7611c2a62b1b9daff93980', name: "content-header", onSlotchange: (e) => this.checkHasContentHeader(e) })), h("main", { key: 'e5f4c7145bce662d0f9d4c1ca33663b7eacd138e' }, h("slot", { key: 'ba1298d913a0b0395ce7ecb9c309d21d3057a1f2' }), h("slot", { key: '31f07289d03e8408e4f197869a8cba4d50ac3129', name: "overlay" }))))));
     }
     static get is() { return "ix-map-navigation"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/map-navigation-overlay/map-navigation-overlay.css

@@ -223,6 +223,12 @@ a {
 :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;