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

package/dist/collection/components/chip/chip.css

@@ -50,8 +50,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-:host {
-  /* width */
+:host { /* width */
   /* Track */
   /* Handle */
   /* Handle on hover */
@@ -69,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;
@@ -112,8 +117,8 @@
 }
 .container .hidden {
   display: none;
-  width: 0px;
-  margin-right: 0px;
+  width: 0;
+  margin-right: 0;
 }
 .container .close-button-container {
   display: inline-flex;
@@ -126,14 +131,39 @@
   white-space: nowrap;
 }
 
-.container.icon {
+.container.outline.icon {
+  padding-left: calc(0.75rem - 1px);
+}
+.container.outline:not(.icon) {
+  padding-left: calc(0.5rem - 1px);
+}
+.container.outline.closable:not(.inactive) {
+  padding-right: calc(0.25rem - 1px);
+}
+.container.outline.closable.inactive, .container.outline:not(.closable) {
+  padding-right: calc(0.5rem - 1px);
+}
+.container.outline.icon:not(.closable) {
+  padding-right: calc(0.75rem - 1px);
+}
+.container:not(.outline).icon {
   padding-left: 0.75rem;
-  padding-right: 0.75rem;
 }
-
-.container.closable {
+.container:not(.outline):not(.icon) {
+  padding-left: 0.5rem;
+}
+.container:not(.outline).closable:not(.inactive) {
   padding-right: 0.25rem;
 }
+.container:not(.outline).closable.inactive {
+  padding-right: 0.5rem;
+}
+.container:not(.outline):not(.closable).icon {
+  padding-right: 0.75rem;
+}
+.container:not(.outline):not(.closable):not(.icon) {
+  padding-right: 0.5rem;
+}
 
 .container.primary {
   background-color: var(--theme-color-primary);

package/dist/collection/components/chip/chip.js

@@ -37,11 +37,11 @@ export class Chip {
                 [this.outline ? 'borderColor' : 'backgroundColor']: this.background,
             };
         }
-        return (h(Host, { key: 'bc9150f9d71eb0d048c778e21ea5afb39a1dc3f9', tabIndex: "-1", title: this.el.textContent, style: this.variant === 'custom'
+        return (h(Host, { key: '1e6668db5698108671872240cae019c50e8903ea', tabIndex: "-1", title: this.el.textContent, style: this.variant === 'custom'
                 ? {
                     '--ix-icon-button-color': (_b = this.chipColor) !== null && _b !== void 0 ? _b : this.color,
                 }
-                : {} }, h("div", { key: '82c39bab0cff12de6c830360ad06281993e4dac6', style: Object.assign({}, customStyle), class: {
+                : {} }, h("div", { key: '7d1533fb6dfdaf15733897e9742c02022505896a', style: Object.assign({}, customStyle), class: {
                 container: true,
                 outline: this.outline,
                 inactive: isInactive,
@@ -55,10 +55,10 @@ export class Chip {
                 custom: this.variant === 'custom',
                 closable: this.closable,
                 icon: !!this.icon,
-            } }, h("ix-icon", { key: '359b67a50b9c3b438fc7884b7b6dab7027a284c4', class: {
+            } }, h("ix-icon", { key: '012939f0b16b4c0ff00590cb6e503c6a42d79771', class: {
                 'with-icon': true,
                 hidden: !this.icon,
-            }, name: this.icon, size: '24' }), h("span", { key: '800965a9f8c4013009ab1345eed7fea6cb6ae1f2', class: "slot-container" }, h("slot", { key: 'a03c010efbb304e6e70ddb990fb1e91ffa667e0b' })), isInactive === false && this.closable ? this.getCloseButton() : null)));
+            }, name: this.icon, size: '24' }), h("span", { key: 'fa5866074c8ce5bfbceb8afca799a2a7953c2bf6', class: "slot-container" }, h("slot", { key: '848661158f74d1479437d905fb1e6f2a742b70b6' })), isInactive === false && this.closable ? this.getCloseButton() : null)));
     }
     static get is() { return "ix-chip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/chip/test/chip.ct.js

@@ -0,0 +1,32 @@
+/*
+ * 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.
+ */
+import { test } from "../../../tests/utils/test/index";
+import { expect } from "@playwright/test";
+test('renders', async ({ mount, page }) => {
+    await mount(`<ix-chip></ix-chip>`);
+    const datePicker = page.locator('ix-chip');
+    await expect(datePicker).toHaveClass(/hydrated/);
+});
+test.describe('chip test', () => {
+    test.beforeEach(async ({ mount }) => {
+        await mount(`
+      <ix-chip>Label</ix-chip>
+      <ix-chip outline>Label</ix-chip>
+      `);
+    });
+    test('outline and normal variant should have the same width', async ({ page, }) => {
+        await page.waitForSelector('ix-chip');
+        const normalChipElement = page.locator('ix-chip').first();
+        const outlineChipElement = page.locator('ix-chip').last();
+        const normalChipSize = await normalChipElement.boundingBox();
+        const outlineChipSize = await outlineChipElement.boundingBox();
+        expect(normalChipSize.width).toEqual(outlineChipSize.width);
+    });
+});
+//# sourceMappingURL=chip.ct.js.map

package/dist/collection/components/chip/test/chip.ct.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.ct.js","sourceRoot":"","sources":["../../../../src/components/chip/test/chip.ct.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IACxC,MAAM,KAAK,CAAC,qBAAqB,CAAC,CAAC;IACnC,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;IAC3C,MAAM,MAAM,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;AACnD,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;IAC9B,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE;QAClC,MAAM,KAAK,CACT;;;OAGC,CACF,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,uDAAuD,EAAE,KAAK,EAAE,EACnE,IAAI,GACL,EAAE,EAAE;QACH,MAAM,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC;QAEtC,MAAM,iBAAiB,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,KAAK,EAAE,CAAC;QAC1D,MAAM,kBAAkB,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,CAAC;QAE1D,MAAM,cAAc,GAAG,MAAM,iBAAiB,CAAC,WAAW,EAAE,CAAC;QAC7D,MAAM,eAAe,GAAG,MAAM,kBAAkB,CAAC,WAAW,EAAE,CAAC;QAE/D,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;IAC9D,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","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 */\nimport { test } from '@utils/test';\nimport { expect } from '@playwright/test';\n\ntest('renders', async ({ mount, page }) => {\n  await mount(`<ix-chip></ix-chip>`);\n  const datePicker = page.locator('ix-chip');\n  await expect(datePicker).toHaveClass(/hydrated/);\n});\n\ntest.describe('chip test', () => {\n  test.beforeEach(async ({ mount }) => {\n    await mount(\n      `\n      <ix-chip>Label</ix-chip>\n      <ix-chip outline>Label</ix-chip>\n      `\n    );\n  });\n\n  test('outline and normal variant should have the same width', async ({\n    page,\n  }) => {\n    await page.waitForSelector('ix-chip');\n\n    const normalChipElement = page.locator('ix-chip').first();\n    const outlineChipElement = page.locator('ix-chip').last();\n\n    const normalChipSize = await normalChipElement.boundingBox();\n    const outlineChipSize = await outlineChipElement.boundingBox();\n\n    expect(normalChipSize.width).toEqual(outlineChipSize.width);\n  });\n});\n"]}

package/dist/collection/components/col/col.css

@@ -22,8 +22,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-:host {
-  /* width */
+:host { /* width */
   /* Track */
   /* Handle */
   /* Handle on hover */
@@ -43,6 +42,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/col/col.js

@@ -94,7 +94,7 @@ export class Col {
                     "references": {
                         "ColumnSize": {
                             "location": "local",
-                            "path": "/Users/daniel/dev/oss/ix/packages/core/src/components/col/col.tsx",
+                            "path": "/home/runner/work/ix/ix/packages/core/src/components/col/col.tsx",
                             "id": "src/components/col/col.tsx::ColumnSize"
                         }
                     }
@@ -117,7 +117,7 @@ export class Col {
                     "references": {
                         "ColumnSize": {
                             "location": "local",
-                            "path": "/Users/daniel/dev/oss/ix/packages/core/src/components/col/col.tsx",
+                            "path": "/home/runner/work/ix/ix/packages/core/src/components/col/col.tsx",
                             "id": "src/components/col/col.tsx::ColumnSize"
                         }
                     }
@@ -140,7 +140,7 @@ export class Col {
                     "references": {
                         "ColumnSize": {
                             "location": "local",
-                            "path": "/Users/daniel/dev/oss/ix/packages/core/src/components/col/col.tsx",
+                            "path": "/home/runner/work/ix/ix/packages/core/src/components/col/col.tsx",
                             "id": "src/components/col/col.tsx::ColumnSize"
                         }
                     }
@@ -163,7 +163,7 @@ export class Col {
                     "references": {
                         "ColumnSize": {
                             "location": "local",
-                            "path": "/Users/daniel/dev/oss/ix/packages/core/src/components/col/col.tsx",
+                            "path": "/home/runner/work/ix/ix/packages/core/src/components/col/col.tsx",
                             "id": "src/components/col/col.tsx::ColumnSize"
                         }
                     }

package/dist/collection/components/content/content.css

@@ -43,6 +43,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/content/content.js

@@ -20,12 +20,12 @@ export class Content {
         return this.hostElement.shadowRoot.querySelector('.content-header slot');
     }
     render() {
-        return (h(Host, { key: '7298c4abd09355a3ee73d4a236e7025a72720cf7' }, h("div", { key: 'd7ba3fbc44d66ba0ae4e747a5cc5d77c7388b138', class: {
+        return (h(Host, { key: '4dab1c37e7e25e92aae59819e21cdca4f303b917' }, h("div", { key: 'e1d4436222fbede16fe740f1f8b712c4227b9f26', class: {
                 'content-header': true,
                 slotted: this.isContentHeaderSlotted,
-            } }, h("slot", { key: '233200870318a9276d3e0d5c5d5d03980fbe1793', name: "header", onSlotchange: () => {
+            } }, h("slot", { key: '0df5783d73aac22f87b644942b02ac2c1c9a4a66', name: "header", onSlotchange: () => {
                 this.isContentHeaderSlotted = hasSlottedElements(this.contentHeaderSlot);
-            } })), h("div", { key: 'ee7f8ceb237b4c33d578262c74d4eca9bdf36070', class: "content" }, h("slot", { key: 'fbbf86e9c454f04dbe33a9b0456f1cd02ec72c02' }))));
+            } })), h("div", { key: '94713592851aa18c3b0b030c4a80e278cabbec35', class: "content" }, h("slot", { key: 'f78d233860cf1a36132a5b725791292524385a84' }))));
     }
     static get is() { return "ix-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/content-header/content-header.js

@@ -40,7 +40,7 @@ export class ContentHeader {
                     "references": {
                         "ContentHeaderVariant": {
                             "location": "local",
-                            "path": "/Users/daniel/dev/oss/ix/packages/core/src/components/content-header/content-header.tsx",
+                            "path": "/home/runner/work/ix/ix/packages/core/src/components/content-header/content-header.tsx",
                             "id": "src/components/content-header/content-header.tsx::ContentHeaderVariant"
                         }
                     }

package/dist/collection/components/css-grid/css-grid-item.js

@@ -17,7 +17,7 @@ export class CssGridItem {
     render() {
         const style = {};
         style['grid-area'] = this.itemName;
-        return (h(Host, { key: '7eb12cf19328a03e78db24d81bc88158b37e7e4c', style: style }, h("slot", { key: '123dfc3d9459ae11ed038f5c20db4597f6fb6c42' })));
+        return (h(Host, { key: '27bd6e8926336757d4cb993ab8ff978a1a85479e', style: style }, h("slot", { key: '3be8052533266ea875e2f0009720f07a4dbdd16b' })));
     }
     static get is() { return "ix-css-grid-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/css-grid/css-grid.js

@@ -103,7 +103,7 @@ export class CssGrid {
                         },
                         "CssGridTemplateType": {
                             "location": "local",
-                            "path": "/Users/daniel/dev/oss/ix/packages/core/src/components/css-grid/css-grid.tsx",
+                            "path": "/home/runner/work/ix/ix/packages/core/src/components/css-grid/css-grid.tsx",
                             "id": "src/components/css-grid/css-grid.tsx::CssGridTemplateType"
                         }
                     }

package/dist/collection/components/custom-field/custom-field.css

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

package/dist/collection/components/custom-field/custom-field.js

@@ -0,0 +1,216 @@
+/*
+ * 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.
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Host, h } from "@stencil/core";
+import { HookValidationLifecycle, } from "../utils/field";
+/**
+ * @since 2.4.0
+ */
+export class CustomField {
+    constructor() {
+        this.required = false;
+        this.label = undefined;
+        this.helperText = undefined;
+        this.infoText = undefined;
+        this.warningText = undefined;
+        this.invalidText = undefined;
+        this.validText = undefined;
+        this.showTextAsTooltip = undefined;
+        this.isInvalid = false;
+        this.isValid = false;
+        this.isInfo = false;
+        this.isWarning = false;
+    }
+    updateValidationState({ isInvalid, isValid, isInfo, isWarning, }) {
+        this.isInvalid = isInvalid;
+        this.isValid = isValid;
+        this.isInfo = isInfo;
+        this.isWarning = isWarning;
+    }
+    render() {
+        return (h(Host, { key: '8cd88436071cb1e86ffd0ae60b2a8e4d887e0ced' }, h("ix-field-wrapper", { key: 'c8af2e041a46a796294cc0dab48fc28431eeea09', label: this.label, helperText: this.helperText, infoText: this.infoText, warningText: this.warningText, invalidText: this.invalidText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, required: this.required }, h("slot", { key: '13677ef3d54cc08f52e99671d3e368bd7291d73a', name: "label", slot: "label" }), h("slot", { key: 'a930518f66ff298d4b9595316bb41135e6261fd4' }))));
+    }
+    static get is() { return "ix-custom-field"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["custom-field.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["custom-field.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A value is required or must be checked for the form to be submittable"
+                },
+                "attribute": "required",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for the field component"
+                },
+                "attribute": "label",
+                "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 which show additional information"
+                },
+                "attribute": "helper-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
+            },
+            "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
+            },
+            "showTextAsTooltip": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Show helper, info, warning, error and valid text as tooltip"
+                },
+                "attribute": "show-text-as-tooltip",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isInvalid": {},
+            "isValid": {},
+            "isInfo": {},
+            "isWarning": {}
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+}
+__decorate([
+    HookValidationLifecycle({
+        includeChildren: true,
+    })
+], CustomField.prototype, "updateValidationState", null);
+//# sourceMappingURL=custom-field.js.map

package/dist/collection/components/custom-field/custom-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"custom-field.js","sourceRoot":"","sources":["../../../src/components/custom-field/custom-field.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;;;;;;;AAEH,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,EAEL,uBAAuB,GAGxB,MAAM,gBAAgB,CAAC;AAGxB;;GAEG;AAMH,MAAM,OAAO,WAAW;;wBAOM,KAAK;;;;;;;;yBAqCZ,KAAK;uBACP,KAAK;sBACN,KAAK;yBACF,KAAK;;IAK1B,qBAAqB,CAAC,EACpB,SAAS,EACT,OAAO,EACP,MAAM,EACN,SAAS,GACS;QAClB,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;QAC3B,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;QACvB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;IAC7B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,yEACE,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EACzC,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBAEvB,6DAAM,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,GAAQ;gBAEvC,8DAAa,CACI,CACd,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF;AApCC;IAHC,uBAAuB,CAAC;QACvB,eAAe,EAAE,IAAI;KACtB,CAAC;wDAWD","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Host, Prop, State, h, Element } from '@stencil/core';\nimport {\n  FieldWrapperInterface,\n  HookValidationLifecycle,\n  IxFormValidationState,\n  ValidationResults,\n} from '../utils/field';\nimport { IxComponent } from '../utils/internal';\n\n/**\n * @since 2.4.0\n */\n@Component({\n  tag: 'ix-custom-field',\n  styleUrl: 'custom-field.scss',\n  shadow: true,\n})\nexport class CustomField\n  implements FieldWrapperInterface, IxFormValidationState, IxComponent\n{\n  @Element() hostElement!: HTMLIxCustomFieldElement;\n  /**\n   * A value is required or must be checked for the form to be submittable\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * Label for the field component\n   */\n  @Prop() label?: string;\n\n  /**\n   * Show text below the field component which show additional information\n   */\n  @Prop() helperText?: 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  /**\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   * Show helper, info, warning, error and valid text as tooltip\n   */\n  @Prop() showTextAsTooltip?: boolean;\n\n  @State() isInvalid = false;\n  @State() isValid = false;\n  @State() isInfo = false;\n  @State() isWarning = false;\n\n  @HookValidationLifecycle({\n    includeChildren: true,\n  })\n  updateValidationState({\n    isInvalid,\n    isValid,\n    isInfo,\n    isWarning,\n  }: ValidationResults) {\n    this.isInvalid = isInvalid;\n    this.isValid = isValid;\n    this.isInfo = isInfo;\n    this.isWarning = isWarning;\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-field-wrapper\n          label={this.label}\n          helperText={this.helperText}\n          infoText={this.infoText}\n          warningText={this.warningText}\n          invalidText={this.invalidText}\n          validText={this.validText}\n          showTextAsTooltip={this.showTextAsTooltip}\n          isInvalid={this.isInvalid}\n          isValid={this.isValid}\n          isInfo={this.isInfo}\n          isWarning={this.isWarning}\n          required={this.required}\n        >\n          <slot name=\"label\" slot=\"label\"></slot>\n\n          <slot></slot>\n        </ix-field-wrapper>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/custom-field/tests/custom-field.ct.js

@@ -0,0 +1,68 @@
+/*
+ * 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 { expect } from "@playwright/test";
+import { test } from "../../../tests/utils/test/index";
+test('renders', async ({ mount, page }) => {
+    await mount(`<ix-custom-field></ix-custom-field>`);
+    const customFieldElement = page.locator('ix-custom-field');
+    await expect(customFieldElement).toHaveClass(/hydrated/);
+});
+test('renders with label', async ({ mount, page }) => {
+    await mount(`<ix-custom-field label="Label"><input /></ix-custom-field>`);
+    const customFieldElement = page.locator('ix-custom-field');
+    const fieldLabel = customFieldElement.locator('ix-field-label');
+    const typography = fieldLabel.locator('label').locator('ix-typography');
+    await expect(customFieldElement).toHaveClass(/hydrated/);
+    await expect(fieldLabel).toHaveClass(/hydrated/);
+    await expect(typography).toHaveClass(/typography-label/);
+    await expect(fieldLabel.filter({ hasText: 'Label' })).toHaveText('Label');
+});
+test('renders with helper-text', async ({ mount, page }) => {
+    await mount(`<ix-custom-field helper-text="Some helper text" invalid-text="Error"></ix-custom-field>`);
+    const customFieldElement = page.locator('ix-custom-field');
+    const fieldWrapper = customFieldElement.locator('ix-field-wrapper');
+    await expect(customFieldElement).toHaveClass(/hydrated/);
+    await expect(fieldWrapper).toHaveClass(/hydrated/);
+    await expect(fieldWrapper.filter({ hasText: 'Some helper text' })).toHaveText('Some helper text');
+});
+test('renders with invalid-text', async ({ mount, page }) => {
+    await mount(`<ix-custom-field helper-text="Some helper text" invalid-text="Error">
+      <input class="ix-invalid" />
+    </ix-custom-field>`);
+    const customFieldElement = page.locator('ix-custom-field');
+    const fieldWrapper = customFieldElement.locator('ix-field-wrapper');
+    await expect(customFieldElement).toHaveClass(/hydrated/);
+    await expect(fieldWrapper).toHaveClass(/hydrated/);
+    await expect(fieldWrapper.filter({ hasText: 'Error' })).toHaveText('Error');
+});
+test('renders with invalid-text if on child is invalid', async ({ mount, page, }) => {
+    await mount(`<ix-custom-field helper-text="Some helper text" invalid-text="Error">
+      <input />
+      <div data-testid="custom">Some custom</div>
+    </ix-custom-field>`);
+    const customFieldElement = page.locator('ix-custom-field');
+    const fieldWrapper = customFieldElement.locator('ix-field-wrapper');
+    await expect(customFieldElement).toHaveClass(/hydrated/);
+    await expect(fieldWrapper).toHaveClass(/hydrated/);
+    await expect(fieldWrapper.filter({ hasText: 'Some helper text' })).toHaveText('Some helper text');
+    const custom = customFieldElement.getByTestId('custom');
+    custom.evaluate((node) => node.classList.add('ix-invalid'));
+    await expect(fieldWrapper.filter({ hasText: 'Error' })).toHaveText('Error');
+});
+test('renders with required label', async ({ mount, page }) => {
+    await mount(`<ix-custom-field label="Label" required><input/></ix-custom-field>`);
+    const customFieldElement = page.locator('ix-custom-field');
+    const fieldLabel = customFieldElement.locator('ix-field-label');
+    const typography = fieldLabel.locator('label').locator('ix-typography');
+    await expect(customFieldElement).toHaveClass(/hydrated/);
+    await expect(fieldLabel).toHaveClass(/hydrated/);
+    await expect(typography).toHaveClass(/typography-label/);
+    await expect(fieldLabel.filter({ hasText: 'Label *' })).toHaveText('Label *');
+});
+//# sourceMappingURL=custom-field.ct.js.map

package/dist/collection/components/custom-field/tests/custom-field.ct.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"custom-field.ct.js","sourceRoot":"","sources":["../../../../src/components/custom-field/tests/custom-field.ct.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { expect } from '@playwright/test';\nimport { test } from '@utils/test';\n\ntest('renders', async ({ mount, page }) => {\n  await mount(`<ix-custom-field></ix-custom-field>`);\n  const customFieldElement = page.locator('ix-custom-field');\n  await expect(customFieldElement).toHaveClass(/hydrated/);\n});\n\ntest('renders with label', async ({ mount, page }) => {\n  await mount(`<ix-custom-field label=\"Label\"><input /></ix-custom-field>`);\n  const customFieldElement = page.locator('ix-custom-field');\n  const fieldLabel = customFieldElement.locator('ix-field-label');\n  const typography = fieldLabel.locator('label').locator('ix-typography');\n  await expect(customFieldElement).toHaveClass(/hydrated/);\n  await expect(fieldLabel).toHaveClass(/hydrated/);\n  await expect(typography).toHaveClass(/typography-label/);\n  await expect(fieldLabel.filter({ hasText: 'Label' })).toHaveText('Label');\n});\n\ntest('renders with helper-text', async ({ mount, page }) => {\n  await mount(\n    `<ix-custom-field helper-text=\"Some helper text\" invalid-text=\"Error\"></ix-custom-field>`\n  );\n  const customFieldElement = page.locator('ix-custom-field');\n  const fieldWrapper = customFieldElement.locator('ix-field-wrapper');\n  await expect(customFieldElement).toHaveClass(/hydrated/);\n  await expect(fieldWrapper).toHaveClass(/hydrated/);\n  await expect(fieldWrapper.filter({ hasText: 'Some helper text' })).toHaveText(\n    'Some helper text'\n  );\n});\n\ntest('renders with invalid-text', async ({ mount, page }) => {\n  await mount(\n    `<ix-custom-field helper-text=\"Some helper text\" invalid-text=\"Error\">\n      <input class=\"ix-invalid\" />\n    </ix-custom-field>`\n  );\n  const customFieldElement = page.locator('ix-custom-field');\n  const fieldWrapper = customFieldElement.locator('ix-field-wrapper');\n  await expect(customFieldElement).toHaveClass(/hydrated/);\n  await expect(fieldWrapper).toHaveClass(/hydrated/);\n  await expect(fieldWrapper.filter({ hasText: 'Error' })).toHaveText('Error');\n});\n\ntest('renders with invalid-text if on child is invalid', async ({\n  mount,\n  page,\n}) => {\n  await mount(\n    `<ix-custom-field helper-text=\"Some helper text\" invalid-text=\"Error\">\n      <input />\n      <div data-testid=\"custom\">Some custom</div>\n    </ix-custom-field>`\n  );\n  const customFieldElement = page.locator('ix-custom-field');\n  const fieldWrapper = customFieldElement.locator('ix-field-wrapper');\n  await expect(customFieldElement).toHaveClass(/hydrated/);\n  await expect(fieldWrapper).toHaveClass(/hydrated/);\n  await expect(fieldWrapper.filter({ hasText: 'Some helper text' })).toHaveText(\n    'Some helper text'\n  );\n\n  const custom = customFieldElement.getByTestId('custom');\n  custom.evaluate((node) => node.classList.add('ix-invalid'));\n\n  await expect(fieldWrapper.filter({ hasText: 'Error' })).toHaveText('Error');\n});\n\ntest('renders with required label', async ({ mount, page }) => {\n  await mount(\n    `<ix-custom-field label=\"Label\" required><input/></ix-custom-field>`\n  );\n  const customFieldElement = page.locator('ix-custom-field');\n  const fieldLabel = customFieldElement.locator('ix-field-label');\n  const typography = fieldLabel.locator('label').locator('ix-typography');\n  await expect(customFieldElement).toHaveClass(/hydrated/);\n  await expect(fieldLabel).toHaveClass(/hydrated/);\n  await expect(typography).toHaveClass(/typography-label/);\n  await expect(fieldLabel.filter({ hasText: 'Label *' })).toHaveText('Label *');\n});\n"]}

package/dist/collection/components/date-dropdown/date-dropdown.css

@@ -50,6 +50,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;