@siemens/ix 2.0.0 → 2.0.2

package/components/ix-chip.js

@@ -0,0 +1,98 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$3 } from './icon-button.js';
+import { d as defineCustomElement$2 } from './spinner.js';
+
+const chipCss = ":host{display:inline-block;position:relative;height:2rem;max-height:2rem;margin-left:0.25rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host(.inactive){pointer-events: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:pointer}.container .with-icon{margin-right:0.25rem}.container .hidden{display:none;width:0px;margin-right:0px}.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.icon{padding-left:0.75rem;padding-right:0.75rem}.container.closable{padding-right:0.25rem}.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:hover{background-color:var(--theme-chip-primary--background--hover)}.container.primary:active{background-color:var(--theme-chip-primary--background--active)}.container.primary:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}.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.primary.outline:hover{background-color:var(--theme-chip-primary-outline--background--hover)}.container.primary.outline:active{background-color:var(--theme-chip-primary-outline--background--active)}.container.alarm{color:var(--theme-color-alarm--contrast)}.container.alarm:hover::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.05);left:0;border-radius:100px;pointer-events:none}.container.alarm.active::after,.container.alarm:active::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.1);left:0;border-radius:100px;pointer-events:none}.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:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}.container.alarm:not(.outline).active::after,.container.alarm:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}.container.alarm.outline{color:var(--theme-chip-outline--color);border:solid 1px var(--theme-color-alarm)}.container.alarm.outline:hover::after{display:none}.container.alarm.outline:hover{background-color:var(--theme-chip-outline--background--hover)}.container.alarm.outline.active::after,.container.alarm.outline:active::after{display:none}.container.alarm.outline.active,.container.alarm.outline:active{background-color:var(--theme-chip-outline--background--active)}.container.alarm:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}.container.critical{color:var(--theme-color-critical--contrast)}.container.critical:hover::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.05);left:0;border-radius:100px;pointer-events:none}.container.critical.active::after,.container.critical:active::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.1);left:0;border-radius:100px;pointer-events:none}.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:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}.container.critical:not(.outline).active::after,.container.critical:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}.container.critical.outline{color:var(--theme-chip-outline--color);border:solid 1px var(--theme-color-critical)}.container.critical.outline:hover::after{display:none}.container.critical.outline:hover{background-color:var(--theme-chip-outline--background--hover)}.container.critical.outline.active::after,.container.critical.outline:active::after{display:none}.container.critical.outline.active,.container.critical.outline:active{background-color:var(--theme-chip-outline--background--active)}.container.critical:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}.container.warning{color:var(--theme-color-warning--contrast)}.container.warning:hover::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.05);left:0;border-radius:100px;pointer-events:none}.container.warning.active::after,.container.warning:active::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.1);left:0;border-radius:100px;pointer-events:none}.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:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}.container.warning:not(.outline).active::after,.container.warning:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}.container.warning.outline{color:var(--theme-chip-outline--color);border:solid 1px var(--theme-color-warning)}.container.warning.outline:hover::after{display:none}.container.warning.outline:hover{background-color:var(--theme-chip-outline--background--hover)}.container.warning.outline.active::after,.container.warning.outline:active::after{display:none}.container.warning.outline.active,.container.warning.outline:active{background-color:var(--theme-chip-outline--background--active)}.container.warning:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}.container.info{color:var(--theme-color-info--contrast)}.container.info:hover::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.05);left:0;border-radius:100px;pointer-events:none}.container.info.active::after,.container.info:active::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.1);left:0;border-radius:100px;pointer-events:none}.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:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}.container.info:not(.outline).active::after,.container.info:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}.container.info.outline{color:var(--theme-chip-outline--color);border:solid 1px var(--theme-color-info)}.container.info.outline:hover::after{display:none}.container.info.outline:hover{background-color:var(--theme-chip-outline--background--hover)}.container.info.outline.active::after,.container.info.outline:active::after{display:none}.container.info.outline.active,.container.info.outline:active{background-color:var(--theme-chip-outline--background--active)}.container.info:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}.container.neutral{color:var(--theme-color-neutral--contrast)}.container.neutral:hover::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.05);left:0;border-radius:100px;pointer-events:none}.container.neutral.active::after,.container.neutral:active::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.1);left:0;border-radius:100px;pointer-events:none}.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:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}.container.neutral:not(.outline).active::after,.container.neutral:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}.container.neutral.outline{color:var(--theme-chip-outline--color);border:solid 1px var(--theme-color-neutral)}.container.neutral.outline:hover::after{display:none}.container.neutral.outline:hover{background-color:var(--theme-chip-outline--background--hover)}.container.neutral.outline.active::after,.container.neutral.outline:active::after{display:none}.container.neutral.outline.active,.container.neutral.outline:active{background-color:var(--theme-chip-outline--background--active)}.container.neutral:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}.container.success{color:var(--theme-color-success--contrast)}.container.success:hover::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.05);left:0;border-radius:100px;pointer-events:none}.container.success.active::after,.container.success:active::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.1);left:0;border-radius:100px;pointer-events:none}.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:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}.container.success:not(.outline).active::after,.container.success:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}.container.success.outline{color:var(--theme-chip-outline--color);border:solid 1px var(--theme-color-success)}.container.success.outline:hover::after{display:none}.container.success.outline:hover{background-color:var(--theme-chip-outline--background--hover)}.container.success.outline.active::after,.container.success.outline:active::after{display:none}.container.success.outline.active,.container.success.outline:active{background-color:var(--theme-chip-outline--background--active)}.container.success:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}";
+
+const Chip = /*@__PURE__*/ proxyCustomElement(class Chip extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.closeChip = createEvent(this, "closeChip", 7);
+    this.variant = 'primary';
+    this.active = true;
+    this.closable = false;
+    this.icon = undefined;
+    this.background = undefined;
+    this.color = undefined;
+    this.outline = false;
+  }
+  getCloseButton() {
+    return (h("div", { class: "close-button-container" }, h("ix-icon-button", { type: "button", variant: "secondary", icon: 'close-small', class: "close-button", oval: true, size: "16", style: this.variant === 'custom' ? { color: this.color } : {}, ghost: true, onClick: (event) => {
+        this.closeChip.emit(event);
+        event.stopPropagation();
+      } })));
+  }
+  render() {
+    const isInactive = this.active === false;
+    let customStyle = {};
+    if (this.variant === 'custom') {
+      customStyle = {
+        color: this.color,
+        [this.outline ? 'borderColor' : 'backgroundColor']: this.background,
+      };
+    }
+    return (h(Host, { tabIndex: "-1", title: this.el.textContent, style: this.variant === 'custom'
+        ? {
+          '--ix-icon-button-color': this.color,
+        }
+        : {} }, h("div", { style: Object.assign({}, customStyle), class: {
+        container: true,
+        outline: this.outline,
+        inactive: isInactive,
+        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',
+        closable: this.closable,
+        icon: !!this.icon,
+      } }, h("ix-icon", { class: {
+        'with-icon': true,
+        hidden: !this.icon,
+      }, name: this.icon, size: '24' }), h("span", { class: "slot-container" }, h("slot", null)), isInactive === false && this.closable ? this.getCloseButton() : null)));
+  }
+  get el() { return this; }
+  static get style() { return chipCss; }
+}, [1, "ix-chip", {
+    "variant": [513],
+    "active": [4],
+    "closable": [4],
+    "icon": [1],
+    "background": [1],
+    "color": [1],
+    "outline": [4]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-chip", "ix-icon-button", "ix-spinner"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-chip":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Chip);
+      }
+      break;
+    case "ix-icon-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "ix-spinner":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const IxChip = Chip;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxChip, defineCustomElement };
+
+//# sourceMappingURL=ix-chip.js.map

package/components/ix-chip.js.map

@@ -0,0 +1 @@
+{"file":"ix-chip.js","mappings":";;;;AAAA,MAAM,OAAO,GAAG,kmWAAkmW;;MCwBrmW,IAAI;;;;;;mBAcA,SAAS;kBAMP,IAAI;oBAKF,KAAK;;;;mBAoBN,KAAK;;EASf,cAAc;IACpB,QACE,WAAK,KAAK,EAAC,wBAAwB,IACjC,sBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,WAAW,EACnB,IAAI,EAAE,aAAa,EACnB,KAAK,EAAC,cAAc,EACpB,IAAI,QACJ,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,EAC7D,KAAK,QACL,OAAO,EAAE,CAAC,KAAK;QACb,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC3B,KAAK,CAAC,eAAe,EAAE,CAAC;OACzB,GACe,CACd,EACN;GACH;EAED,MAAM;IACJ,MAAM,UAAU,GAAG,IAAI,CAAC,MAAM,KAAK,KAAK,CAAC;IAEzC,IAAI,WAAW,GAAG,EAAE,CAAC;IAErB,IAAI,IAAI,CAAC,OAAO,KAAK,QAAQ,EAAE;MAC7B,WAAW,GAAG;QACZ,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,CAAC,IAAI,CAAC,OAAO,GAAG,aAAa,GAAG,iBAAiB,GAAG,IAAI,CAAC,UAAU;OACpE,CAAC;KACH;IAED,QACE,EAAC,IAAI,IACH,QAAQ,EAAC,IAAI,EACb,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,WAAW,EAC1B,KAAK,EACH,IAAI,CAAC,OAAO,KAAK,QAAQ;UACrB;UACE,wBAAwB,EAAE,IAAI,CAAC,KAAK;SACrC;UACD,EAAE,IAGR,WACE,KAAK,oBAAO,WAAW,GACvB,KAAK,EAAE;QACL,SAAS,EAAE,IAAI;QACf,OAAO,EAAE,IAAI,CAAC,OAAO;QACrB,QAAQ,EAAE,UAAU;QACpB,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;QAC/B,QAAQ,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU;QACrC,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;QAC7B,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;QACnC,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;QACnC,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;QACnC,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;QACnC,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI;OAClB,IAED,eACE,KAAK,EAAE;QACL,WAAW,EAAE,IAAI;QACjB,MAAM,EAAE,CAAC,IAAI,CAAC,IAAI;OACnB,EACD,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,GACV,EACF,YAAM,KAAK,EAAC,gBAAgB,IAC1B,eAAa,CACR,EACN,UAAU,KAAK,KAAK,IAAI,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,cAAc,EAAE,GAAG,IAAI,CACjE,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/chip/chip.scss?tag=ix-chip&encapsulation=shadow","./src/components/chip/chip.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@import 'mixins/shadow-dom/component';\n@import 'common-variables';\n@import 'mixins/text-truncation';\n@import './chip-mixin';\n\n:host {\n  @include ix-component;\n  display: inline-block;\n  position: relative;\n  height: 2rem;\n  max-height: 2rem;\n  margin-left: $tiny-space;\n}\n\n:host(.inactive) {\n  pointer-events: none;\n}\n\n@include chip-container;\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 {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-chip',\n  styleUrl: 'chip.scss',\n  shadow: true,\n})\nexport class Chip {\n  @Element() el: HTMLIxChipElement;\n\n  /**\n   * Chip 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   * Determines if the chip is interactive. If false no user input (e.g. mouse states, keyboard navigation)\n   * will be possible and also the close button will not be present.\n   */\n  @Prop() active = true;\n\n  /**\n   * Show close icon\n   */\n  @Prop() closable = 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() color: string | undefined;\n\n  /**\n   * Show chip with outline style\n   */\n  @Prop() outline = false;\n\n  /**\n   * Fire event if close button is clicked\n   *\n   * @since 1.5.0\n   */\n  @Event() closeChip: EventEmitter;\n\n  private getCloseButton() {\n    return (\n      <div class=\"close-button-container\">\n        <ix-icon-button\n          type=\"button\"\n          variant=\"secondary\"\n          icon={'close-small'}\n          class=\"close-button\"\n          oval\n          size=\"16\"\n          style={this.variant === 'custom' ? { color: this.color } : {}}\n          ghost\n          onClick={(event) => {\n            this.closeChip.emit(event);\n            event.stopPropagation();\n          }}\n        ></ix-icon-button>\n      </div>\n    );\n  }\n\n  render() {\n    const isInactive = this.active === false;\n\n    let customStyle = {};\n\n    if (this.variant === 'custom') {\n      customStyle = {\n        color: this.color,\n        [this.outline ? 'borderColor' : 'backgroundColor']: this.background,\n      };\n    }\n\n    return (\n      <Host\n        tabIndex=\"-1\"\n        title={this.el.textContent}\n        style={\n          this.variant === 'custom'\n            ? {\n                '--ix-icon-button-color': this.color,\n              }\n            : {}\n        }\n      >\n        <div\n          style={{ ...customStyle }}\n          class={{\n            container: true,\n            outline: this.outline,\n            inactive: isInactive,\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            closable: this.closable,\n            icon: !!this.icon,\n          }}\n        >\n          <ix-icon\n            class={{\n              'with-icon': true,\n              hidden: !this.icon,\n            }}\n            name={this.icon}\n            size={'24'}\n          />\n          <span class=\"slot-container\">\n            <slot></slot>\n          </span>\n          {isInactive === false && this.closable ? this.getCloseButton() : null}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ix-col.d.ts

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

package/components/ix-col.js

@@ -0,0 +1,96 @@
+import { proxyCustomElement, HTMLElement, forceUpdate, h, Host } from '@stencil/core/internal/client';
+import { m as matchBreakpoint } from './breakpoints.js';
+
+const colCss = ":host{position:relative;flex-basis:0;flex-grow:1;width:100%;max-width:100%;min-height:1px;padding:calc(var(--ix-layout-grid-gutter) * 0.5)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}: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}";
+
+const Col = /*@__PURE__*/ proxyCustomElement(class Col extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.size = undefined;
+    this.sizeSm = undefined;
+    this.sizeMd = undefined;
+    this.sizeLg = undefined;
+  }
+  onResize() {
+    forceUpdate(this);
+  }
+  getSize(breakpoint) {
+    if (breakpoint === '') {
+      return this.size;
+    }
+    if (breakpoint === 'sm') {
+      return this.sizeSm;
+    }
+    if (breakpoint === 'md') {
+      return this.sizeMd;
+    }
+    if (breakpoint === 'lg') {
+      return this.sizeLg;
+    }
+  }
+  getColumnSize() {
+    let size;
+    Col.Breakpoints.forEach((breakpoint) => {
+      const isMediaQueryActive = breakpoint !== '' ? matchBreakpoint(breakpoint) : true;
+      if (!isMediaQueryActive) {
+        return;
+      }
+      const currentSize = this.getSize(breakpoint);
+      if (currentSize) {
+        size = currentSize;
+      }
+    });
+    return size;
+  }
+  getColumnSizeStyling() {
+    const size = this.getColumnSize();
+    if (!size) {
+      return;
+    }
+    if (size === 'auto') {
+      return {
+        flex: '0 0 auto',
+        width: 'auto',
+        'max-width': 'auto',
+      };
+    }
+    const colSize = `calc(calc(${size} / var(--ix-layout-grid-columns)) * 100%)`;
+    return {
+      flex: `0 0 ${colSize}`,
+      width: `${colSize}`,
+      'max-width': `${colSize}`,
+    };
+  }
+  render() {
+    return (h(Host, { style: Object.assign({}, this.getColumnSizeStyling()) }, h("slot", null)));
+  }
+  static get style() { return colCss; }
+}, [1, "ix-col", {
+    "size": [1],
+    "sizeSm": [1, "size-sm"],
+    "sizeMd": [1, "size-md"],
+    "sizeLg": [1, "size-lg"]
+  }, [[9, "resize", "onResize"]]]);
+Col.Breakpoints = ['', 'sm', 'md', 'lg'];
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-col"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-col":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Col);
+      }
+      break;
+  } });
+}
+
+const IxCol = Col;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxCol, defineCustomElement };
+
+//# sourceMappingURL=ix-col.js.map

package/components/ix-col.js.map

@@ -0,0 +1 @@
+{"file":"ix-col.js","mappings":";;;AAAA,MAAM,MAAM,GAAG,yuBAAyuB;;MCqC3uB,GAAG;;;;;;;;;;EAwBd,QAAQ;IACN,WAAW,CAAC,IAAI,CAAC,CAAC;GACnB;EAEO,OAAO,CAAC,UAA0B;IACxC,IAAI,UAAU,KAAK,EAAE,EAAE;MACrB,OAAO,IAAI,CAAC,IAAI,CAAC;KAClB;IAED,IAAI,UAAU,KAAK,IAAI,EAAE;MACvB,OAAO,IAAI,CAAC,MAAM,CAAC;KACpB;IAED,IAAI,UAAU,KAAK,IAAI,EAAE;MACvB,OAAO,IAAI,CAAC,MAAM,CAAC;KACpB;IAED,IAAI,UAAU,KAAK,IAAI,EAAE;MACvB,OAAO,IAAI,CAAC,MAAM,CAAC;KACpB;GACF;EAEO,aAAa;IACnB,IAAI,IAAgB,CAAC;IACrB,GAAG,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,UAAU;MACjC,MAAM,kBAAkB,GACtB,UAAU,KAAK,EAAE,GAAG,eAAe,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC;MAEzD,IAAI,CAAC,kBAAkB,EAAE;QACvB,OAAO;OACR;MAED,MAAM,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;MAE7C,IAAI,WAAW,EAAE;QACf,IAAI,GAAG,WAAW,CAAC;OACpB;KACF,CAAC,CAAC;IAEH,OAAO,IAAI,CAAC;GACb;EAEO,oBAAoB;IAC1B,MAAM,IAAI,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;IAElC,IAAI,CAAC,IAAI,EAAE;MACT,OAAO;KACR;IAED,IAAI,IAAI,KAAK,MAAM,EAAE;MACnB,OAAO;QACL,IAAI,EAAE,UAAU;QAChB,KAAK,EAAE,MAAM;QACb,WAAW,EAAE,MAAM;OACpB,CAAC;KACH;IAED,MAAM,OAAO,GAAG,aAAa,IAAI,2CAA2C,CAAC;IAE7E,OAAO;MACL,IAAI,EAAE,OAAO,OAAO,EAAE;MACtB,KAAK,EAAE,GAAG,OAAO,EAAE;MACnB,WAAW,EAAE,GAAG,OAAO,EAAE;KAC1B,CAAC;GACH;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,oBACA,IAAI,CAAC,oBAAoB,EAAE,KAGhC,eAAa,CACR,EACP;GACH;;;;;;;;AAnGM,eAAW,GAAqB,CAAC,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/col/col.scss?tag=ix-col&encapsulation=shadow","./src/components/col/col.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@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  position: relative;\n  flex-basis: 0;\n  flex-grow: 1;\n  width: 100%;\n  max-width: 100%;\n  min-height: 1px;\n\n  padding: calc(var(--ix-layout-grid-gutter) * 0.5);\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, forceUpdate, h, Host, Listen, Prop } from '@stencil/core';\nimport { Breakpoint, matchBreakpoint } from '../utils/breakpoints';\n\ntype GridBreakpoint = Breakpoint | '';\n\nexport type ColumnSize =\n  | '1'\n  | '2'\n  | '3'\n  | '4'\n  | '5'\n  | '6'\n  | '7'\n  | '8'\n  | '9'\n  | '10'\n  | '11'\n  | '12'\n  | 'auto';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-col',\n  styleUrl: 'col.scss',\n  shadow: true,\n})\nexport class Col {\n  static Breakpoints: GridBreakpoint[] = ['', 'sm', 'md', 'lg'];\n\n  /**\n   * Size of the column\n   */\n  @Prop() size?: ColumnSize;\n\n  /**\n   * Size of the column for sm screens\n   */\n  @Prop() sizeSm?: ColumnSize;\n\n  /**\n   * Size of the column for md screens\n   */\n  @Prop() sizeMd?: ColumnSize;\n\n  /**\n   * Size of the column for lg screens\n   */\n  @Prop() sizeLg?: ColumnSize;\n\n  @Listen('resize', { target: 'window' })\n  onResize() {\n    forceUpdate(this);\n  }\n\n  private getSize(breakpoint: GridBreakpoint) {\n    if (breakpoint === '') {\n      return this.size;\n    }\n\n    if (breakpoint === 'sm') {\n      return this.sizeSm;\n    }\n\n    if (breakpoint === 'md') {\n      return this.sizeMd;\n    }\n\n    if (breakpoint === 'lg') {\n      return this.sizeLg;\n    }\n  }\n\n  private getColumnSize() {\n    let size: ColumnSize;\n    Col.Breakpoints.forEach((breakpoint) => {\n      const isMediaQueryActive =\n        breakpoint !== '' ? matchBreakpoint(breakpoint) : true;\n\n      if (!isMediaQueryActive) {\n        return;\n      }\n\n      const currentSize = this.getSize(breakpoint);\n\n      if (currentSize) {\n        size = currentSize;\n      }\n    });\n\n    return size;\n  }\n\n  private getColumnSizeStyling() {\n    const size = this.getColumnSize();\n\n    if (!size) {\n      return;\n    }\n\n    if (size === 'auto') {\n      return {\n        flex: '0 0 auto',\n        width: 'auto',\n        'max-width': 'auto',\n      };\n    }\n\n    const colSize = `calc(calc(${size} / var(--ix-layout-grid-columns)) * 100%)`;\n\n    return {\n      flex: `0 0 ${colSize}`,\n      width: `${colSize}`,\n      'max-width': `${colSize}`,\n    };\n  }\n\n  render() {\n    return (\n      <Host\n        style={{\n          ...this.getColumnSizeStyling(),\n        }}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ix-content-header.d.ts

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

package/components/ix-content-header.js

@@ -0,0 +1,63 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$4 } from './icon-button.js';
+import { d as defineCustomElement$3 } from './spinner.js';
+import { d as defineCustomElement$2 } from './typography.js';
+
+const contentHeaderCss = ":host{display:flex;flex-direction:row;align-items:flex-start;padding:0px}:host .titleGroup{display:flex;flex-direction:column;flex:1 1 0%}:host .subtitle{margin-top:0.5rem}:host .backButton{margin-right:0.5rem}:host .buttons{flex:0 0 auto}";
+
+const ContentHeader = /*@__PURE__*/ proxyCustomElement(class ContentHeader extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.backButtonClick = createEvent(this, "backButtonClick", 7);
+    this.variant = 'primary';
+    this.headerTitle = undefined;
+    this.headerSubtitle = undefined;
+    this.hasBackButton = false;
+  }
+  render() {
+    return (h(Host, null, this.hasBackButton ? (h("ix-icon-button", { class: 'backButton', variant: "primary", icon: 'arrow-left', ghost: true, onClick: () => this.backButtonClick.emit() })) : null, h("div", { class: "titleGroup" }, h("ix-typography", { variant: this.variant === 'secondary' ? 'large-single' : 'h2' }, this.headerTitle), this.headerSubtitle !== undefined ? (h("ix-typography", { variant: 'caption', color: 'soft', class: "subtitle" }, this.headerSubtitle)) : null), h("div", { class: "buttons" }, h("slot", null))));
+  }
+  static get style() { return contentHeaderCss; }
+}, [1, "ix-content-header", {
+    "variant": [1],
+    "headerTitle": [1, "header-title"],
+    "headerSubtitle": [1, "header-subtitle"],
+    "hasBackButton": [4, "has-back-button"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-content-header", "ix-icon-button", "ix-spinner", "ix-typography"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-content-header":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ContentHeader);
+      }
+      break;
+    case "ix-icon-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "ix-spinner":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "ix-typography":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const IxContentHeader = ContentHeader;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxContentHeader, defineCustomElement };
+
+//# sourceMappingURL=ix-content-header.js.map

package/components/ix-content-header.js.map

@@ -0,0 +1 @@
+{"file":"ix-content-header.js","mappings":";;;;;AAAA,MAAM,gBAAgB,GAAG,iPAAiP;;MCkB7P,aAAa;;;;;;mBAIgB,SAAS;;0BAUJ,SAAS;yBAKrB,KAAK;;EAOtC,MAAM;IACJ,QACE,EAAC,IAAI,QACF,IAAI,CAAC,aAAa,IACjB,sBACE,KAAK,EAAE,YAAY,EACnB,OAAO,EAAC,SAAS,EACjB,IAAI,EAAE,YAAY,EAClB,KAAK,EAAE,IAAI,EACX,OAAO,EAAE,MAAM,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,GAC1B,IAChB,IAAI,EAER,WAAK,KAAK,EAAC,YAAY,IACrB,qBACE,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW,GAAG,cAAc,GAAG,IAAI,IAE5D,IAAI,CAAC,WAAW,CACH,EACf,IAAI,CAAC,cAAc,KAAK,SAAS,IAChC,qBAAe,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAC,UAAU,IAC/D,IAAI,CAAC,cAAc,CACN,IACd,IAAI,CACJ,EACN,WAAK,KAAK,EAAC,SAAS,IAClB,eAAQ,CACJ,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/content-header/content-header.scss?tag=ix-content-header&encapsulation=shadow","./src/components/content-header/content-header.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: flex;\n  flex-direction: row;\n  align-items: flex-start;\n  padding: 0px;\n\n  .titleGroup {\n    display: flex;\n    flex-direction: column;\n    flex: 1 1 0%;\n  }\n\n  .subtitle {\n    margin-top: 0.5rem;\n  }\n\n  .backButton {\n    margin-right: 0.5rem;\n  }\n\n  .buttons {\n    flex: 0 0 auto;\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, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\nexport type ContentHeaderVariant = 'primary' | 'secondary';\n\n@Component({\n  tag: 'ix-content-header',\n  styleUrl: 'content-header.scss',\n  shadow: true,\n})\nexport class ContentHeader {\n  /**\n   * Variant of content header\n   */\n  @Prop() variant: ContentHeaderVariant = 'primary';\n\n  /**\n   * Title of Header\n   */\n  @Prop() headerTitle: string;\n\n  /**\n   * Subtitle of Header\n   */\n  @Prop() headerSubtitle: string | undefined = undefined;\n\n  /**\n   * Display a back button\n   */\n  @Prop() hasBackButton: boolean = false;\n\n  /**\n   * Triggered when back button is clicked\n   */\n  @Event() backButtonClick: EventEmitter<void>;\n\n  render() {\n    return (\n      <Host>\n        {this.hasBackButton ? (\n          <ix-icon-button\n            class={'backButton'}\n            variant=\"primary\"\n            icon={'arrow-left'}\n            ghost={true}\n            onClick={() => this.backButtonClick.emit()}\n          ></ix-icon-button>\n        ) : null}\n\n        <div class=\"titleGroup\">\n          <ix-typography\n            variant={this.variant === 'secondary' ? 'large-single' : 'h2'}\n          >\n            {this.headerTitle}\n          </ix-typography>\n          {this.headerSubtitle !== undefined ? (\n            <ix-typography variant={'caption'} color={'soft'} class=\"subtitle\">\n              {this.headerSubtitle}\n            </ix-typography>\n          ) : null}\n        </div>\n        <div class=\"buttons\">\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ix-content.d.ts

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

package/components/ix-content.js

@@ -0,0 +1,48 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { h as hasSlottedElements } from './shadow-dom.js';
+
+const contentCss = ":host{display:flex;flex-direction:column;position:relative;padding:1.5rem 0rem 0.25rem 2rem;width:100%;height:100%;overflow:hidden}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .content{flex-grow:1;overflow:auto;padding-right:1.5rem}:host .content-header.slotted{margin-bottom:1rem;padding-right:1.5rem}";
+
+const Content = /*@__PURE__*/ proxyCustomElement(class Content extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.isContentHeaderSlotted = false;
+  }
+  get contentHeaderSlot() {
+    return this.hostElement.shadowRoot.querySelector('.content-header slot');
+  }
+  render() {
+    return (h(Host, null, h("div", { class: {
+        'content-header': true,
+        slotted: this.isContentHeaderSlotted,
+      } }, h("slot", { name: "header", onSlotchange: () => {
+        this.isContentHeaderSlotted = hasSlottedElements(this.contentHeaderSlot);
+      } })), h("div", { class: "content" }, h("slot", null))));
+  }
+  get hostElement() { return this; }
+  static get style() { return contentCss; }
+}, [1, "ix-content", {
+    "isContentHeaderSlotted": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-content"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-content":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Content);
+      }
+      break;
+  } });
+}
+
+const IxContent = Content;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxContent, defineCustomElement };
+
+//# sourceMappingURL=ix-content.js.map

package/components/ix-content.js.map

@@ -0,0 +1 @@
+{"file":"ix-content.js","mappings":";;;AAAA,MAAM,UAAU,GAAG,q2BAAq2B;;MCkB32B,OAAO;;;;;kCAGgB,KAAK;;EAEvC,IAAI,iBAAiB;IACnB,OAAO,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAC9C,sBAAsB,CACJ,CAAC;GACtB;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WACE,KAAK,EAAE;QACL,gBAAgB,EAAE,IAAI;QACtB,OAAO,EAAE,IAAI,CAAC,sBAAsB;OACrC,IAED,YACE,IAAI,EAAC,QAAQ,EACb,YAAY,EAAE;QACZ,IAAI,CAAC,sBAAsB,GAAG,kBAAkB,CAC9C,IAAI,CAAC,iBAAiB,CACvB,CAAC;OACH,GACK,CACJ,EACN,WAAK,KAAK,EAAC,SAAS,IAClB,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/content/content.scss?tag=ix-content&encapsulation=shadow","./src/components/content/content.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@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  padding: 1.5rem 0rem 0.25rem 2rem;\n\n  width: 100%;\n  height: 100%;\n\n  overflow: hidden;\n\n  .content {\n    flex-grow: 1;\n    overflow: auto;\n    padding-right: 1.5rem;\n  }\n\n  .content-header.slotted {\n    margin-bottom: 1rem;\n    padding-right: 1.5rem;\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, Element, h, Host, State } from '@stencil/core';\nimport { hasSlottedElements } from '../utils/shadow-dom';\n\n/** @internal */\n@Component({\n  tag: 'ix-content',\n  styleUrl: 'content.scss',\n  shadow: true,\n})\nexport class Content {\n  @Element() hostElement!: HTMLIxContentElement;\n\n  @State() isContentHeaderSlotted = false;\n\n  get contentHeaderSlot() {\n    return this.hostElement.shadowRoot.querySelector(\n      '.content-header slot'\n    ) as HTMLSlotElement;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            'content-header': true,\n            slotted: this.isContentHeaderSlotted,\n          }}\n        >\n          <slot\n            name=\"header\"\n            onSlotchange={() => {\n              this.isContentHeaderSlotted = hasSlottedElements(\n                this.contentHeaderSlot\n              );\n            }}\n          ></slot>\n        </div>\n        <div class=\"content\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ix-css-grid-item.d.ts

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

package/components/ix-css-grid-item.js

@@ -0,0 +1,40 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const cssGridItemCss = ":host{display:block;position:relative}:host ::slotted(*){height:100%;width:100%}";
+
+const CssGridItem = /*@__PURE__*/ proxyCustomElement(class CssGridItem extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.itemName = undefined;
+  }
+  render() {
+    const style = {};
+    style['grid-area'] = this.itemName;
+    return (h(Host, { style: style }, h("slot", null)));
+  }
+  static get style() { return cssGridItemCss; }
+}, [1, "ix-css-grid-item", {
+    "itemName": [1, "item-name"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-css-grid-item"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-css-grid-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CssGridItem);
+      }
+      break;
+  } });
+}
+
+const IxCssGridItem = CssGridItem;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxCssGridItem, defineCustomElement };
+
+//# sourceMappingURL=ix-css-grid-item.js.map

package/components/ix-css-grid-item.js.map

@@ -0,0 +1 @@
+{"file":"ix-css-grid-item.js","mappings":";;AAAA,MAAM,cAAc,GAAG,kFAAkF;;MCmB5F,WAAW;;;;;;;EAMtB,MAAM;IACJ,MAAM,KAAK,GAAG,EAAE,CAAC;IACjB,KAAK,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC;IAEnC,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,KAAK,IAChB,eAAa,CACR,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/css-grid/css-grid-item.scss?tag=ix-css-grid-item&encapsulation=shadow","./src/components/css-grid/css-grid-item.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:host {\n  display: block;\n  position: relative;\n\n  ::slotted(*) {\n    height: 100%;\n    width: 100%;\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';\n\n/**\n * @internal\n */\n@Component({\n  tag: 'ix-css-grid-item',\n  styleUrl: 'css-grid-item.scss',\n  shadow: true,\n})\nexport class CssGridItem {\n  /**\n   * Grid item name\n   */\n  @Prop() itemName: string;\n\n  render() {\n    const style = {};\n    style['grid-area'] = this.itemName;\n\n    return (\n      <Host style={style}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ix-css-grid.d.ts

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

package/components/ix-css-grid.js

@@ -0,0 +1,113 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+/*
+ * 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.
+ */
+function templateBuilder(inputTemplate) {
+  let templateString = '';
+  inputTemplate.forEach((row) => {
+    templateString += '"';
+    templateString = row.reduce((pV, cV) => {
+      return `${pV} ${cV}`;
+    }, templateString);
+    templateString += '"\n';
+  });
+  return templateString;
+}
+
+const cssGridCss = ":host{display:grid;position:relative;row-gap:1.5rem;-moz-column-gap:1.5rem;column-gap:1.5rem}";
+
+const smQuery = 'only screen and (max-width: 576px)';
+const mdQuery = 'only screen and (max-width: 768px)';
+const lgQuery = 'only screen and (max-width: 992px)';
+const mediaQueryCollection = [
+  { name: 'sm', query: smQuery },
+  { name: 'md', query: mdQuery },
+  { name: 'lg', query: lgQuery },
+];
+const CssGrid = /*@__PURE__*/ proxyCustomElement(class CssGrid extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.disposeMediaQueryListener = [];
+    this.mediaQueries = [];
+    this.templates = undefined;
+    this.currentTemplate = undefined;
+  }
+  componentWillRender() {
+    this.mediaQueries = mediaQueryCollection.map((query) => {
+      const mediaQuery = window.matchMedia(query.query);
+      const callback = () => {
+        this.applyTemplate();
+      };
+      this.disposeMediaQueryListener.push(callback);
+      mediaQuery.addEventListener('change', callback);
+      return Object.assign(Object.assign({}, query), { mediaQuery });
+    });
+    this.applyTemplate();
+  }
+  disconnectedCallback() {
+    this.mediaQueries.forEach((mq, index) => {
+      mq.mediaQuery.removeEventListener('change', this.disposeMediaQueryListener[index]);
+    });
+  }
+  findNextTemplate(type) {
+    const typeIndex = this.mediaQueries.findIndex((mq) => mq.name === type);
+    const nextTemplate = this.templates[this.mediaQueries[typeIndex + 1].name];
+    if (!nextTemplate) {
+      return this.findNextTemplate(this.mediaQueries[typeIndex + 1].name);
+    }
+    return nextTemplate;
+  }
+  applyTemplate() {
+    let active = this.mediaQueries.find((mq) => mq.mediaQuery.matches);
+    if (!active) {
+      active = this.mediaQueries[this.mediaQueries.length - 1];
+    }
+    const template = this.templates[active.name];
+    if (template) {
+      this.currentTemplate = template;
+    }
+    else {
+      this.currentTemplate = this.findNextTemplate(active.name);
+    }
+  }
+  render() {
+    var _a;
+    const style = {};
+    if (((_a = this.currentTemplate) === null || _a === void 0 ? void 0 : _a.length) !== 0) {
+      style['grid-template-areas'] = templateBuilder(this.currentTemplate);
+    }
+    return (h(Host, { style: style }, h("slot", null)));
+  }
+  static get style() { return cssGridCss; }
+}, [1, "ix-css-grid", {
+    "templates": [16],
+    "currentTemplate": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-css-grid"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-css-grid":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CssGrid);
+      }
+      break;
+  } });
+}
+
+const IxCssGrid = CssGrid;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxCssGrid, defineCustomElement };
+
+//# sourceMappingURL=ix-css-grid.js.map

package/components/ix-css-grid.js.map

@@ -0,0 +1 @@
+{"file":"ix-css-grid.js","mappings":"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","names":[],"sources":["./src/components/css-grid/builder.ts","./src/components/css-grid/css-grid.scss?tag=ix-css-grid&encapsulation=shadow","./src/components/css-grid/css-grid.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 */\nexport function templateBuilder(inputTemplate: string[][]) {\n  let templateString = '';\n\n  inputTemplate.forEach((row) => {\n    templateString += '\"';\n    templateString = row.reduce((pV, cV) => {\n      return `${pV} ${cV}`;\n    }, templateString);\n    templateString += '\"\\n';\n  });\n\n  return templateString;\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\n@import 'common-variables';\n\n:host {\n  display: grid;\n  position: relative;\n  row-gap: $large-space;\n  column-gap: $large-space;\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, State } from '@stencil/core';\nimport { templateBuilder } from './builder';\n\nconst smQuery = 'only screen and (max-width: 576px)';\nconst mdQuery = 'only screen and (max-width: 768px)';\nconst lgQuery = 'only screen and (max-width: 992px)';\n\nexport type CssGridTemplateType = 'sm' | 'md' | 'lg';\n\nconst mediaQueryCollection: Array<{\n  name: CssGridTemplateType;\n  query: string;\n}> = [\n  { name: 'sm', query: smQuery },\n  { name: 'md', query: mdQuery },\n  { name: 'lg', query: lgQuery },\n];\n\n/**\n * @internal\n */\n@Component({\n  tag: 'ix-css-grid',\n  styleUrl: 'css-grid.scss',\n  shadow: true,\n})\nexport class CssGrid {\n  /**\n   * Define css grid template\n   */\n  @Prop() templates: Partial<Record<CssGridTemplateType, string[][]>>;\n\n  @State() currentTemplate: string[][];\n\n  private disposeMediaQueryListener: ((event: MediaQueryListEvent) => void)[] =\n    [];\n  private mediaQueries: {\n    mediaQuery: MediaQueryList;\n    name: CssGridTemplateType;\n    query: string;\n  }[] = [];\n\n  componentWillRender() {\n    this.mediaQueries = mediaQueryCollection.map((query) => {\n      const mediaQuery = window.matchMedia(query.query);\n\n      const callback = () => {\n        this.applyTemplate();\n      };\n      this.disposeMediaQueryListener.push(callback);\n      mediaQuery.addEventListener('change', callback);\n\n      return {\n        ...query,\n        mediaQuery,\n      };\n    });\n\n    this.applyTemplate();\n  }\n\n  disconnectedCallback() {\n    this.mediaQueries.forEach((mq, index) => {\n      mq.mediaQuery.removeEventListener(\n        'change',\n        this.disposeMediaQueryListener[index]\n      );\n    });\n  }\n\n  private findNextTemplate(type: CssGridTemplateType) {\n    const typeIndex = this.mediaQueries.findIndex((mq) => mq.name === type);\n    const nextTemplate = this.templates[this.mediaQueries[typeIndex + 1].name];\n    if (!nextTemplate) {\n      return this.findNextTemplate(this.mediaQueries[typeIndex + 1].name);\n    }\n    return nextTemplate;\n  }\n\n  private applyTemplate() {\n    let active = this.mediaQueries.find((mq) => mq.mediaQuery.matches);\n\n    if (!active) {\n      active = this.mediaQueries[this.mediaQueries.length - 1];\n    }\n\n    const template = this.templates[active.name];\n\n    if (template) {\n      this.currentTemplate = template;\n    } else {\n      this.currentTemplate = this.findNextTemplate(active.name);\n    }\n  }\n\n  render() {\n    const style = {};\n    if (this.currentTemplate?.length !== 0) {\n      style['grid-template-areas'] = templateBuilder(this.currentTemplate);\n    }\n    return (\n      <Host style={style}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ix-date-picker.d.ts

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

package/components/ix-date-picker.js

@@ -0,0 +1,8 @@
+import { D as DatePicker, d as defineCustomElement$1 } from './date-picker.js';
+
+const IxDatePicker = DatePicker;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxDatePicker, defineCustomElement };
+
+//# sourceMappingURL=ix-date-picker.js.map

package/components/ix-date-picker.js.map

@@ -0,0 +1 @@
+{"file":"ix-date-picker.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}