@siemens/ix 3.0.0-alpha.0 → 3.0.0-alpha.1

package/components/ix-pill.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface IxPill extends Components.IxPill, HTMLElement {}
+export const IxPill: {
+    prototype: IxPill;
+    new (): IxPill;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/ix-pill.js

@@ -0,0 +1,128 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-CtTl3_AV.js';
+import { m as makeRef } from './p-bcj7UEIC.js';
+import { d as defineCustomElement$3 } from './p-vcRya6fE.js';
+import { d as defineCustomElement$2 } from './p-C1wxjy2C.js';
+
+const pillCss = ":host{display:inline-block;position:relative;height:1.25rem;max-height:1.25rem;margin-left:0.25rem}: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}.container{display:inline-flex;width:inherit;box-sizing:border-box;position:relative;align-items:center;border-radius:100px;padding:0.5rem;height:2rem;max-height:2rem;cursor:default}.container .with-icon{margin-right:0.25rem}.container .hidden{display:none;width:0;margin-right:0}.container .close-button-container{display:inline-flex;margin-left:auto;padding-left:0.5rem}.container .slot-container{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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}.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);color:var(--theme-chip-primary--color)}.container.primary .close-button{color:var(--theme-chip-primary--color);--ix-icon-button-color:var(--theme-chip-primary--color);pointer-events:auto}.container.primary.outline{color:var(--theme-chip-primary-outline--color);background-color:transparent;border:solid 1px var(--theme-chip-primary-outline--border-color)}.container.primary.outline .close-button{color:var(--theme-chip-primary-outline--color);--ix-icon-button-color:var(--theme-chip-primary-outline--color)}.container.outline{border-width:1px;border-style:solid}.container.alarm{color:var(--theme-color-alarm--contrast)}.container.alarm:not(.outline){background-color:var(--theme-color-alarm)}.container.alarm:not(.outline) .close-button{color:var(--theme-color-alarm--contrast);--ix-icon-button-color:var(--theme-color-alarm--contrast)}.container.alarm.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-alarm)}.container.critical{color:var(--theme-color-critical--contrast)}.container.critical:not(.outline){background-color:var(--theme-color-critical)}.container.critical:not(.outline) .close-button{color:var(--theme-color-critical--contrast);--ix-icon-button-color:var(--theme-color-critical--contrast)}.container.critical.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-critical)}.container.warning{color:var(--theme-color-warning--contrast)}.container.warning:not(.outline){background-color:var(--theme-color-warning)}.container.warning:not(.outline) .close-button{color:var(--theme-color-warning--contrast);--ix-icon-button-color:var(--theme-color-warning--contrast)}.container.warning.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-warning)}.container.info{color:var(--theme-color-info--contrast)}.container.info:not(.outline){background-color:var(--theme-color-info)}.container.info:not(.outline) .close-button{color:var(--theme-color-info--contrast);--ix-icon-button-color:var(--theme-color-info--contrast)}.container.info.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-info)}.container.neutral{color:var(--theme-color-neutral--contrast)}.container.neutral:not(.outline){background-color:var(--theme-color-neutral)}.container.neutral:not(.outline) .close-button{color:var(--theme-color-neutral--contrast);--ix-icon-button-color:var(--theme-color-neutral--contrast)}.container.neutral.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-neutral)}.container.success{color:var(--theme-color-success--contrast)}.container.success:not(.outline){background-color:var(--theme-color-success)}.container.success:not(.outline) .close-button{color:var(--theme-color-success--contrast);--ix-icon-button-color:var(--theme-color-success--contrast)}.container.success.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-success)}:host .container{height:100%;justify-content:center}:host .container .with-icon{margin-right:0}:host .container.outline.icon{padding-left:0.4375rem;padding-right:0.4375rem}:host .container:not(.outline).icon{padding-left:0.5rem;padding-right:0.5rem}:host .with-gap{gap:0.25rem}:host(.align-left) .container{justify-content:flex-start}";
+
+const Pill = /*@__PURE__*/ proxyCustomElement(class Pill extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /**
+         * Pill variant
+         */
+        this.variant = 'primary';
+        /**
+         * Show pill as outline
+         */
+        this.outline = false;
+        /**
+         * Align pill content left
+         */
+        this.alignLeft = false;
+        /**
+         * Display a tooltip. By default, no tooltip will be displayed.
+         * Add the attribute to display the text content of the component as a tooltip or use a string to display a custom text.
+         * @since 3.0.0
+         */
+        this.tooltipText = false;
+        this.iconOnly = false;
+        this.containerElementRef = makeRef();
+    }
+    componentWillLoad() {
+        this.checkIfContentAvailable();
+    }
+    checkIfContentAvailable() {
+        const hasChildren = this.hostElement.children.length > 0;
+        const hasTextContent = !!this.hostElement.textContent;
+        this.iconOnly = !hasChildren && !hasTextContent;
+    }
+    getTooltip() {
+        var _a;
+        if (!this.tooltipText && !this.hostElement.hasAttribute('tooltip-text')) {
+            return null;
+        }
+        const text = typeof this.tooltipText === 'string' && this.tooltipText.trim()
+            ? this.tooltipText
+            : (_a = this.hostElement.textContent) === null || _a === void 0 ? void 0 : _a.trim();
+        return (h("ix-tooltip", { for: this.containerElementRef.waitForCurrent() }, text));
+    }
+    render() {
+        let customStyle = {};
+        if (this.variant === 'custom') {
+            customStyle = {
+                color: this.pillColor,
+                [this.outline ? 'borderColor' : 'backgroundColor']: this.background,
+            };
+        }
+        return (h(Host, { key: '0b4354fb510044836e07dfcfd5b206cb31425f7c', style: this.variant === 'custom'
+                ? {
+                    '--ix-icon-button-color': this.pillColor,
+                }
+                : {}, class: {
+                'align-left': this.alignLeft,
+            } }, h("div", { key: '2fe5df5091ad2b8c80e122c3b875f4b273db3c93', ref: this.containerElementRef, style: Object.assign({}, customStyle), class: {
+                container: true,
+                outline: this.outline,
+                inactive: false,
+                alarm: this.variant === 'alarm',
+                critical: this.variant === 'critical',
+                info: this.variant === 'info',
+                neutral: this.variant === 'neutral',
+                primary: this.variant === 'primary',
+                success: this.variant === 'success',
+                warning: this.variant === 'warning',
+                custom: this.variant === 'custom',
+                closable: false,
+                icon: !!this.icon,
+                'with-gap': !this.iconOnly,
+            } }, h("ix-icon", { key: '63479b45b4f2b6a77dd815bd2f4eca2584fbca30', class: {
+                'with-icon': true,
+                hidden: this.icon === undefined || this.icon === '',
+            }, name: this.icon, size: '16' }), h("span", { key: '6c73cf4bd3361f1e9621f90d39f6327d5e38df8a', class: "slot-container" }, h("slot", { key: '9c80aeddc144c1485605f761577c6e05c7eb39c4', onSlotchange: () => this.checkIfContentAvailable() }))), this.getTooltip()));
+    }
+    get hostElement() { return this; }
+    static get style() { return pillCss; }
+}, [1, "ix-pill", {
+        "variant": [513],
+        "outline": [4],
+        "icon": [1],
+        "background": [1],
+        "pillColor": [1, "pill-color"],
+        "alignLeft": [4, "align-left"],
+        "tooltipText": [8, "tooltip-text"],
+        "iconOnly": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ix-pill", "ix-tooltip", "ix-typography"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ix-pill":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Pill);
+            }
+            break;
+        case "ix-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ix-typography":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const IxPill = Pill;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxPill, defineCustomElement };
+//# sourceMappingURL=ix-pill.js.map
+
+//# sourceMappingURL=ix-pill.js.map

package/components/ix-pill.js.map

@@ -0,0 +1 @@
+{"file":"ix-pill.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/pill/pill.scss?tag=ix-pill&encapsulation=shadow","src/components/pill/pill.tsx"],"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@import 'mixins/shadow-dom/component';\n\n@import './../chip/chip-mixin';\n@import 'common-variables';\n@import 'mixins/text-truncation';\n\n:host {\n  @include ix-component;\n  display: inline-block;\n  position: relative;\n  height: 1.25rem;\n  max-height: 1.25rem;\n  margin-left: 0.25rem;\n}\n\n@include chip-container(false);\n\n:host {\n  .container {\n    height: 100%;\n    justify-content: center;\n\n    .with-icon {\n      margin-right: 0;\n    }\n\n    &.outline {\n      &.icon {\n        padding-left: 0.4375rem;\n        padding-right: 0.4375rem;\n      }\n    }\n\n    &:not(.outline) {\n      &.icon {\n        padding-left: 0.5rem;\n        padding-right: 0.5rem;\n      }\n    }\n  }\n\n  .with-gap {\n    gap: 0.25rem;\n  }\n}\n\n:host(.align-left) {\n  .container {\n    justify-content: flex-start;\n  }\n}\n","/*\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, Element, h, Host, Prop, State } from '@stencil/core';\nimport { IxComponent } from '../utils/internal';\nimport { makeRef } from '../utils/make-ref';\n\n@Component({\n  tag: 'ix-pill',\n  styleUrl: 'pill.scss',\n  shadow: true,\n})\nexport class Pill implements IxComponent {\n  @Element() hostElement!: HTMLIxPillElement;\n\n  /**\n   * Pill variant\n   */\n  @Prop({ reflect: true }) variant:\n    | 'primary'\n    | 'alarm'\n    | 'critical'\n    | 'warning'\n    | 'info'\n    | 'neutral'\n    | 'success'\n    | 'custom' = 'primary';\n\n  /**\n   * Show pill as outline\n   */\n  @Prop() outline = false;\n\n  /**\n   * Show icon\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Custom color for pill. Only working for `variant='custom'`\n   */\n  @Prop() background: string | undefined;\n\n  /**\n   * Custom font color for pill. Only working for `variant='custom'`\n   */\n  @Prop() pillColor: string | undefined;\n\n  /**\n   * Align pill content left\n   */\n  @Prop() alignLeft = false;\n\n  /**\n   * Display a tooltip. By default, no tooltip will be displayed.\n   * Add the attribute to display the text content of the component as a tooltip or use a string to display a custom text.\n   * @since 3.0.0\n   */\n  @Prop() tooltipText: string | boolean = false;\n\n  @State() iconOnly = false;\n\n  private readonly containerElementRef = makeRef<HTMLElement>();\n\n  componentWillLoad() {\n    this.checkIfContentAvailable();\n  }\n\n  private checkIfContentAvailable() {\n    const hasChildren = this.hostElement.children.length > 0;\n    const hasTextContent = !!this.hostElement.textContent;\n\n    this.iconOnly = !hasChildren && !hasTextContent;\n  }\n\n  private getTooltip() {\n    if (!this.tooltipText && !this.hostElement.hasAttribute('tooltip-text')) {\n      return null;\n    }\n\n    const text =\n      typeof this.tooltipText === 'string' && this.tooltipText.trim()\n        ? this.tooltipText\n        : this.hostElement.textContent?.trim();\n\n    return (\n      <ix-tooltip for={this.containerElementRef.waitForCurrent()}>\n        {text}\n      </ix-tooltip>\n    );\n  }\n\n  render() {\n    let customStyle = {};\n\n    if (this.variant === 'custom') {\n      customStyle = {\n        color: this.pillColor,\n        [this.outline ? 'borderColor' : 'backgroundColor']: this.background,\n      };\n    }\n    return (\n      <Host\n        style={\n          this.variant === 'custom'\n            ? {\n                '--ix-icon-button-color': this.pillColor,\n              }\n            : {}\n        }\n        class={{\n          'align-left': this.alignLeft,\n        }}\n      >\n        <div\n          ref={this.containerElementRef}\n          style={{ ...customStyle }}\n          class={{\n            container: true,\n            outline: this.outline,\n            inactive: false,\n            alarm: this.variant === 'alarm',\n            critical: this.variant === 'critical',\n            info: this.variant === 'info',\n            neutral: this.variant === 'neutral',\n            primary: this.variant === 'primary',\n            success: this.variant === 'success',\n            warning: this.variant === 'warning',\n            custom: this.variant === 'custom',\n            closable: false,\n            icon: !!this.icon,\n            'with-gap': !this.iconOnly,\n          }}\n        >\n          <ix-icon\n            class={{\n              'with-icon': true,\n              hidden: this.icon === undefined || this.icon === '',\n            }}\n            name={this.icon}\n            size={'16'}\n          />\n          <span class=\"slot-container\">\n            <slot onSlotchange={() => this.checkIfContentAvailable()}></slot>\n          </span>\n        </div>\n        {this.getTooltip()}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ix-push-card.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface IxPushCard extends Components.IxPushCard, HTMLElement {}
+export const IxPushCard: {
+    prototype: IxPushCard;
+    new (): IxPushCard;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/ix-push-card.js

@@ -0,0 +1,83 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-CtTl3_AV.js';
+import { d as defineCustomElement$6 } from './p-CAtsUR4G.js';
+import { d as defineCustomElement$5 } from './p-DcNP8_7d.js';
+import { d as defineCustomElement$4 } from './p-CIrU33UT.js';
+import { d as defineCustomElement$3 } from './p-BAPgZLqz.js';
+import { d as defineCustomElement$2 } from './p-C1wxjy2C.js';
+
+const pushCardCss = ":host{display:block;position:relative}:host ix-card{cursor:default}:host ix-card-accordion{cursor:pointer}:host .icon{height:2.5rem;width:2.5rem}:host .notification{font-size:40px}:host ix-card-content{height:11rem}";
+
+const PushCard = /*@__PURE__*/ proxyCustomElement(class PushCard extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /**
+         * Card variant
+         */
+        this.variant = 'outline';
+        /**
+         * Collapse the card
+         * @since 2.1.0
+         */
+        this.collapse = true;
+    }
+    render() {
+        var _a;
+        return (h(Host, { key: '729eb7aa95e11b35f41a8fbb3257f2d430022e43' }, h("ix-card", { key: '0ba1030c9440bb5e90190f532bb303ae6e6598b1', variant: this.variant }, h("ix-card-content", { key: '30425a6f9279103ea821f031ad6f41bbc9942185' }, h("ix-card-title", { key: '7aa2d8165b766d32cb4b8ecdf232502c91300a4a' }, this.icon ? (h("ix-icon", { class: 'icon', name: this.icon, size: "32" })) : null, h("span", { key: 'b73e8e8ead6c6a54bfbab5f8a71338a2b9e278a6', class: 'notification' }, (_a = this.notification) !== null && _a !== void 0 ? _a : 0), h("slot", { key: '848b45aac86c3a48e673300ff377b595caf7e678', name: "title-action" })), h("ix-typography", { key: '69f3127aa6fb433d503b302ea8ecccde980dc23b', format: "h4" }, this.heading), h("ix-typography", { key: '19518c77b67d53fd71f060627ae6c49527639bfb' }, this.subheading)), h("ix-card-accordion", { key: '54d7cdf97845183ef112afdc83089f2cdc8e82bf', collapse: this.collapse }, h("slot", { key: '648f716ecf8be35f43746d453780a5a2a0e12ae7' })))));
+    }
+    static get style() { return pushCardCss; }
+}, [1, "ix-push-card", {
+        "icon": [1],
+        "notification": [1],
+        "heading": [1],
+        "subheading": [1],
+        "variant": [1],
+        "collapse": [4]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ix-push-card", "ix-card", "ix-card-accordion", "ix-card-content", "ix-card-title", "ix-typography"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ix-push-card":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PushCard);
+            }
+            break;
+        case "ix-card":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "ix-card-accordion":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "ix-card-content":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "ix-card-title":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ix-typography":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const IxPushCard = PushCard;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxPushCard, defineCustomElement };
+//# sourceMappingURL=ix-push-card.js.map
+
+//# sourceMappingURL=ix-push-card.js.map

package/components/ix-push-card.js.map

@@ -0,0 +1 @@
+{"file":"ix-push-card.js","mappings":";;;;;;;AAAA,MAAM,WAAW,GAAG,yNAAyN;;MCsBhO,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;AALrB,IAAA,WAAA,GAAA;;;;AA0BE;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAoB,SAAS;AAE5C;;;AAGG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,IAAI;AAwBjC;IAtBC,MAAM,GAAA;;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,OAAO,EAAE,IAAI,CAAC,OAAO,EAAA,EAC5B,CAAA,CAAA,iBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAA,CAAA,eAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACG,IAAI,CAAC,IAAI,IACR,CAAS,CAAA,SAAA,EAAA,EAAA,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,IAAI,EAAA,CAAW,IAC3D,IAAI,EACR,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,cAAc,EAAG,EAAA,CAAA,EAAA,GAAA,IAAI,CAAC,YAAY,MAAI,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAA,CAAC,CAAQ,EAC5D,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,cAAc,EAAA,CAAQ,CACnB,EAChB,CAAA,CAAA,eAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAe,MAAM,EAAC,IAAI,IAAE,IAAI,CAAC,OAAO,CAAiB,EACzD,CAAA,CAAA,eAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAgB,IAAI,CAAC,UAAU,CAAiB,CAChC,EAClB,CAAA,CAAA,mBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAmB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,EACxC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACK,CACZ,CACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/push-card/push-card.scss?tag=ix-push-card&encapsulation=shadow","src/components/push-card/push-card.tsx"],"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\n:host {\n  display: block;\n  position: relative;\n\n  ix-card {\n    cursor: default;\n  }\n\n  ix-card-accordion {\n    cursor: pointer;\n  }\n\n  .icon {\n    height: 2.5rem;\n    width: 2.5rem;\n  }\n\n  .notification {\n    font-size: 40px;\n  }\n\n  ix-card-content {\n    height: 11rem;\n  }\n}\n","/*\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';\nimport { CardVariant } from '../card/card';\n\nexport type PushCardVariant = CardVariant;\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-push-card',\n  styleUrl: 'push-card.scss',\n  shadow: true,\n})\nexport class PushCard {\n  /**\n   * Card icon\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Card KPI value\n   */\n  @Prop() notification?: string;\n\n  /**\n   * Card heading\n   */\n  @Prop() heading?: string;\n\n  /**\n   * Card subheading\n   */\n  @Prop() subheading?: string;\n\n  /**\n   * Card variant\n   */\n  @Prop() variant: PushCardVariant = 'outline';\n\n  /**\n   * Collapse the card\n   * @since 2.1.0\n   */\n  @Prop() collapse: boolean = true;\n\n  render() {\n    return (\n      <Host>\n        <ix-card variant={this.variant}>\n          <ix-card-content>\n            <ix-card-title>\n              {this.icon ? (\n                <ix-icon class={'icon'} name={this.icon} size=\"32\"></ix-icon>\n              ) : null}\n              <span class={'notification'}>{this.notification ?? 0}</span>\n              <slot name=\"title-action\"></slot>\n            </ix-card-title>\n            <ix-typography format=\"h4\">{this.heading}</ix-typography>\n            <ix-typography>{this.subheading}</ix-typography>\n          </ix-card-content>\n          <ix-card-accordion collapse={this.collapse}>\n            <slot></slot>\n          </ix-card-accordion>\n        </ix-card>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ix-radio-group.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface IxRadioGroup extends Components.IxRadioGroup, HTMLElement {}
+export const IxRadioGroup: {
+    prototype: IxRadioGroup;
+    new (): IxRadioGroup;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/ix-radio-group.js

@@ -0,0 +1,169 @@
+import { p as proxyCustomElement, H, e as createEvent, h, d as Host } from './p-CtTl3_AV.js';
+import { H as HookValidationLifecycle } from './p-DWZGOVME.js';
+import { d as defineCustomElement$5 } from './p-BcWYFLel.js';
+import { d as defineCustomElement$4 } from './p-CAVJJh8O.js';
+import { d as defineCustomElement$3 } from './p-vcRya6fE.js';
+import { d as defineCustomElement$2 } from './p-C1wxjy2C.js';
+
+const radioGroupCss = ":host{display:inline-block;position:relative}:host .checkbox-container{display:flex;flex-direction:column;gap:1rem;margin:0.375rem 0;flex-wrap:wrap}:host .checkbox-container.row-layout{flex-direction:row}";
+
+var __decorate = (undefined && undefined.__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;
+};
+const RadiobuttonGroup = /*@__PURE__*/ proxyCustomElement(class RadiobuttonGroup extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.valueChange = createEvent(this, "valueChange", 7);
+        /**
+         * Alignment of the radio buttons in the group
+         */
+        this.direction = 'column';
+        this.isInvalid = false;
+        this.isValid = false;
+        this.isInfo = false;
+        this.isWarning = false;
+        this.observer = new MutationObserver(() => {
+            this.ensureOnlyLastRadioChecked();
+        });
+    }
+    get radiobuttonElements() {
+        return Array.from(this.hostElement.querySelectorAll('ix-radio'));
+    }
+    connectedCallback() {
+        this.observer.observe(this.hostElement, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['checked'],
+        });
+    }
+    componentWillLoad() {
+        this.selectInitialValue();
+        this.ensureOnlyLastRadioChecked();
+    }
+    disconnectedCallback() {
+        if (this.observer) {
+            this.observer.disconnect();
+        }
+    }
+    selectInitialValue() {
+        if (!this.value) {
+            return;
+        }
+        this.radiobuttonElements.forEach((radiobutton) => {
+            radiobutton.checked = radiobutton.value === this.value;
+        });
+    }
+    ensureOnlyLastRadioChecked() {
+        const checkedRadios = this.radiobuttonElements.filter((radio) => radio.checked);
+        checkedRadios.forEach((radio, index) => {
+            if (index === checkedRadios.length - 1) {
+                return;
+            }
+            radio.checked = false;
+        });
+    }
+    onValueChangeHandler(newValue) {
+        this.radiobuttonElements.forEach((radiobutton) => {
+            radiobutton.checked = radiobutton.value === newValue;
+        });
+    }
+    onCheckedChangeHandler(event) {
+        this.radiobuttonElements.forEach((radiobutton) => {
+            if (radiobutton !== event.target) {
+                radiobutton.checked = false;
+                return;
+            }
+            radiobutton.checked = true;
+            this.valueChange.emit(radiobutton.value);
+        });
+    }
+    onClassField({ isInvalid, isInfo, isValid, isWarning }) {
+        this.isInvalid = isInvalid;
+        this.isInfo = isInfo;
+        this.isValid = isValid;
+        this.isWarning = isWarning;
+    }
+    render() {
+        return (h(Host, { key: 'cd598d36a86107d79eccf16bd0b4ca4f69c301f4' }, h("ix-field-wrapper", { key: '90d159cb14dc5d4329421ed75ae06569230aa704', label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, isInvalid: this.isInvalid }, h("div", { key: '1729d3d1a216b3d96c4422f5e5098226c04aa902', class: {
+                'checkbox-container': true,
+                'row-layout': this.direction === 'row',
+            } }, h("slot", { key: 'd416793b6d3b0369a10b3e0797090f7c0bd35c32' })))));
+    }
+    get hostElement() { return this; }
+    static get watchers() { return {
+        "value": ["onValueChangeHandler"]
+    }; }
+    static get style() { return radioGroupCss; }
+}, [1, "ix-radio-group", {
+        "helperText": [1, "helper-text"],
+        "label": [1],
+        "value": [1],
+        "invalidText": [1, "invalid-text"],
+        "infoText": [1, "info-text"],
+        "warningText": [1, "warning-text"],
+        "validText": [1, "valid-text"],
+        "showTextAsTooltip": [4, "show-text-as-tooltip"],
+        "direction": [1],
+        "isInvalid": [32],
+        "isValid": [32],
+        "isInfo": [32],
+        "isWarning": [32]
+    }, [[0, "checkedChange", "onCheckedChangeHandler"]], {
+        "value": ["onValueChangeHandler"]
+    }]);
+__decorate([
+    HookValidationLifecycle({
+        includeChildren: true,
+    })
+], RadiobuttonGroup.prototype, "onClassField", null);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ix-radio-group", "ix-field-label", "ix-field-wrapper", "ix-tooltip", "ix-typography"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ix-radio-group":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RadiobuttonGroup);
+            }
+            break;
+        case "ix-field-label":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "ix-field-wrapper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "ix-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ix-typography":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const IxRadioGroup = RadiobuttonGroup;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxRadioGroup, defineCustomElement };
+//# sourceMappingURL=ix-radio-group.js.map
+
+//# sourceMappingURL=ix-radio-group.js.map

package/components/ix-radio-group.js.map

@@ -0,0 +1 @@
+{"file":"ix-radio-group.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/radio-group/radio-group.scss?tag=ix-radio-group&encapsulation=shadow","src/components/radio-group/radio-group.tsx"],"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@import 'mixins/shadow-dom/component';\n\n:host {\n  display: inline-block;\n  position: relative;\n\n  .checkbox-container {\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n    margin: 0.375rem 0;\n    flex-wrap: wrap;\n\n    &.row-layout {\n      flex-direction: row;\n    }\n  }\n}\n","/*\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 {\n  Component,\n  Element,\n  EventEmitter,\n  Host,\n  Event,\n  Listen,\n  Prop,\n  State,\n  h,\n  Watch,\n} from '@stencil/core';\nimport {\n  ValidationResults,\n  HookValidationLifecycle,\n  FieldWrapperInterface,\n  IxFormValidationState,\n} from '../utils/input';\n\n/**\n * @since 2.6.0\n * @form-ready 2.6.0\n */\n@Component({\n  tag: 'ix-radio-group',\n  styleUrl: 'radio-group.scss',\n  shadow: true,\n})\nexport class RadiobuttonGroup\n  implements FieldWrapperInterface, IxFormValidationState\n{\n  @Element() hostElement!: HTMLIxRadioGroupElement;\n  /**\n   * Show text below the field component\n   */\n  @Prop() helperText?: string;\n\n  /**\n   * Label for the field component\n   */\n  @Prop() label?: string;\n\n  /**\n   * Value of the radiobutton group component\n   */\n  @Prop() value?: string;\n\n  /**\n   * Error text for the field component\n   */\n  @Prop() invalidText?: 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   * 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  /**\n   * Alignment of the radio buttons in the group\n   */\n  @Prop() direction: 'column' | 'row' = 'column';\n\n  /**\n   * Event emitted when the value of the radiobutton group changes\n   */\n  @Event() valueChange!: EventEmitter<string>;\n\n  @State() isInvalid = false;\n  @State() isValid = false;\n  @State() isInfo = false;\n  @State() isWarning = false;\n\n  private readonly observer = new MutationObserver(() => {\n    this.ensureOnlyLastRadioChecked();\n  });\n\n  private get radiobuttonElements() {\n    return Array.from(this.hostElement.querySelectorAll('ix-radio'));\n  }\n\n  connectedCallback(): void {\n    this.observer.observe(this.hostElement, {\n      childList: true,\n      subtree: true,\n      attributes: true,\n      attributeFilter: ['checked'],\n    });\n  }\n\n  componentWillLoad(): void | Promise<void> {\n    this.selectInitialValue();\n    this.ensureOnlyLastRadioChecked();\n  }\n\n  disconnectedCallback(): void {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  private selectInitialValue() {\n    if (!this.value) {\n      return;\n    }\n    this.radiobuttonElements.forEach((radiobutton) => {\n      radiobutton.checked = radiobutton.value === this.value;\n    });\n  }\n\n  private ensureOnlyLastRadioChecked() {\n    const checkedRadios = this.radiobuttonElements.filter(\n      (radio) => radio.checked\n    );\n    checkedRadios.forEach((radio, index) => {\n      if (index === checkedRadios.length - 1) {\n        return;\n      }\n      radio.checked = false;\n    });\n  }\n\n  @Watch('value')\n  onValueChangeHandler(newValue: string) {\n    this.radiobuttonElements.forEach((radiobutton) => {\n      radiobutton.checked = radiobutton.value === newValue;\n    });\n  }\n\n  @Listen('checkedChange')\n  onCheckedChangeHandler(event: CustomEvent<boolean>) {\n    this.radiobuttonElements.forEach((radiobutton) => {\n      if (radiobutton !== event.target) {\n        radiobutton.checked = false;\n        return;\n      }\n      radiobutton.checked = true;\n      this.valueChange.emit(radiobutton.value);\n    });\n  }\n\n  @HookValidationLifecycle({\n    includeChildren: true,\n  })\n  onClassField({ isInvalid, isInfo, isValid, isWarning }: ValidationResults) {\n    this.isInvalid = isInvalid;\n    this.isInfo = isInfo;\n    this.isValid = isValid;\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          invalidText={this.invalidText}\n          infoText={this.infoText}\n          warningText={this.warningText}\n          validText={this.validText}\n          showTextAsTooltip={this.showTextAsTooltip}\n          isValid={this.isValid}\n          isInfo={this.isInfo}\n          isWarning={this.isWarning}\n          isInvalid={this.isInvalid}\n        >\n          <div\n            class={{\n              'checkbox-container': true,\n              'row-layout': this.direction === 'row',\n            }}\n          >\n            <slot></slot>\n          </div>\n        </ix-field-wrapper>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ix-radio.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface IxRadio extends Components.IxRadio, HTMLElement {}
+export const IxRadio: {
+    prototype: IxRadio;
+    new (): IxRadio;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;