@siemens/ix 2.0.0-beta.0 → 2.0.0

package/dist/components/ix-chip.js.map

@@ -1 +0,0 @@
-{"file":"ix-chip.js","mappings":";;;;;AAAA,MAAM,OAAO,GAAG,sjVAAsjV;;MCwBzjV,IAAI;;;;;;;mBAcA,SAAS;kBAMP,IAAI;oBAKF,KAAK;;;;mBAoBN,KAAK;;EAgBf,cAAc;IACpB,QACE,WAAK,KAAK,EAAC,wBAAwB,IAE/B,sBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,aAAa,EAClB,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,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACvB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC3B,KAAK,CAAC,eAAe,EAAE,CAAC;OACzB,GACe,CAEhB,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,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,EAAE;OACpD,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 | undefined;\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   *  @deprecated Will be removed in 2.0.0. Use `closeChip`\n   */\n  @Event() close: EventEmitter;\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        {\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.close.emit(event);\n              this.closeChip.emit(event);\n              event.stopPropagation();\n            }}\n          ></ix-icon-button>\n        }\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 === undefined || 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/dist/components/ix-content-header.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../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/dist/components/ix-content-header.js

@@ -1,69 +0,0 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$5 } from './icon.js';
-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", "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":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      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/dist/components/ix-content-header.js.map

@@ -1 +0,0 @@
-{"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,EAAC,YAAY,EACjB,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/dist/components/ix-css-grid-item.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../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/dist/components/ix-css-grid-item.js

@@ -1,40 +0,0 @@
-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/dist/components/ix-css-grid-item.js.map

@@ -1 +0,0 @@
-{"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/layout/css-grid/css-grid-item.scss?tag=ix-css-grid-item&encapsulation=shadow","./src/components/layout/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/dist/components/ix-css-grid.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../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/dist/components/ix-css-grid.js

@@ -1,113 +0,0 @@
-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/dist/components/ix-css-grid.js.map

@@ -1 +0,0 @@
-{"file":"ix-css-grid.js","mappings":"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","names":[],"sources":["./src/components/layout/css-grid/builder.ts","./src/components/layout/css-grid/css-grid.scss?tag=ix-css-grid&encapsulation=shadow","./src/components/layout/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/dist/components/ix-date-picker.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../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/dist/components/ix-date-picker.js

@@ -1,8 +0,0 @@
-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/dist/components/ix-date-picker.js.map

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

package/dist/components/ix-date-time-card.d.ts

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

package/dist/components/ix-date-time-card.js

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

package/dist/components/ix-date-time-card.js.map

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

package/dist/components/ix-datetime-picker.d.ts

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

package/dist/components/ix-datetime-picker.js

@@ -1,149 +0,0 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$9 } from './button.js';
-import { d as defineCustomElement$8 } from './date-picker.js';
-import { d as defineCustomElement$7 } from './date-time-card.js';
-import { d as defineCustomElement$6 } from './dropdown.js';
-import { d as defineCustomElement$5 } from './icon.js';
-import { d as defineCustomElement$4 } from './icon-button.js';
-import { d as defineCustomElement$3 } from './spinner.js';
-import { d as defineCustomElement$2 } from './time-picker.js';
-
-const datetimePickerCss = ":host{display:block;background-color:var(--theme-menu--background);border-radius:4px;position:relative;width:32.6875rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host .flex{display:flex;justify-content:center}:host .btn-select-date{position:absolute;bottom:1rem;right:1rem}:host .separator{border:1px solid var(--theme-datepicker-separator--background);width:100%;margin-top:72px;height:1px}";
-
-const DateTimePicker = /*@__PURE__*/ proxyCustomElement(class DateTimePicker extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.done = createEvent(this, "done", 7);
-    this.timeChange = createEvent(this, "timeChange", 7);
-    this.dateChange = createEvent(this, "dateChange", 7);
-    this.dateSelect = createEvent(this, "dateSelect", 7);
-    this.range = true;
-    this.showHour = false;
-    this.showMinutes = false;
-    this.showSeconds = false;
-    this.minDate = undefined;
-    this.maxDate = undefined;
-    this.dateFormat = 'yyyy/LL/dd';
-    this.timeFormat = 'TT';
-    this.from = undefined;
-    this.to = null;
-    this.time = undefined;
-    this.showTimeReference = undefined;
-    this.eventDelimiter = ' - ';
-    this.timeReference = undefined;
-    this.textSelectDate = 'Done';
-  }
-  onDone() {
-    var _a;
-    this.done.emit([this._from, (_a = this._to) !== null && _a !== void 0 ? _a : '', this._time].join(this.eventDelimiter));
-    this.dateSelect.emit({
-      from: this._from,
-      to: this._to,
-      time: this._time,
-    });
-  }
-  async onDateChange(event) {
-    event.preventDefault();
-    event.stopPropagation();
-    const { detail: date } = event;
-    this.dateChange.emit(date);
-    const currentDateTime = await this.datePickerElement.getCurrentDate();
-    this._from = currentDateTime.start;
-    this._to = currentDateTime.end;
-  }
-  async onTimeChange(event) {
-    event.preventDefault();
-    event.stopPropagation();
-    const { detail: time } = event;
-    this.timeChange.emit(time);
-    const currentDateTime = await this.timePickerElement.getCurrentTime();
-    this._time = currentDateTime;
-  }
-  componentDidLoad() {
-    this._from = this.from;
-    this._to = this.to;
-    this._time = this.time;
-  }
-  render() {
-    return (h(Host, null, h("div", { class: "flex" }, h("div", { class: "separator" }), h("ix-date-picker", { ref: (ref) => (this.datePickerElement = ref), corners: "left", individual: false, range: this.range, onDateChange: (event) => this.onDateChange(event), from: this.from, to: this.to, format: this.dateFormat, minDate: this.minDate, maxDate: this.maxDate, eventDelimiter: this.eventDelimiter }), h("ix-time-picker", { ref: (ref) => (this.timePickerElement = ref), corners: "right", individual: false, showHour: this.showHour, showMinutes: this.showMinutes, showSeconds: this.showSeconds, showTimeReference: this.showTimeReference, onTimeChange: (event) => this.onTimeChange(event), time: this.time, format: this.timeFormat, timeReference: this.timeReference }), h("div", { class: "separator" })), h("ix-button", { class: "btn-select-date", onClick: () => this.onDone() }, this.textSelectDate)));
-  }
-  static get style() { return datetimePickerCss; }
-}, [1, "ix-datetime-picker", {
-    "range": [4],
-    "showHour": [4, "show-hour"],
-    "showMinutes": [4, "show-minutes"],
-    "showSeconds": [4, "show-seconds"],
-    "minDate": [1, "min-date"],
-    "maxDate": [1, "max-date"],
-    "dateFormat": [1, "date-format"],
-    "timeFormat": [1, "time-format"],
-    "from": [1],
-    "to": [1],
-    "time": [1],
-    "showTimeReference": [8, "show-time-reference"],
-    "eventDelimiter": [1, "event-delimiter"],
-    "timeReference": [1, "time-reference"],
-    "textSelectDate": [1, "text-select-date"]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["ix-datetime-picker", "ix-button", "ix-date-picker", "ix-date-time-card", "ix-dropdown", "ix-icon", "ix-icon-button", "ix-spinner", "ix-time-picker"];
-  components.forEach(tagName => { switch (tagName) {
-    case "ix-datetime-picker":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, DateTimePicker);
-      }
-      break;
-    case "ix-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$9();
-      }
-      break;
-    case "ix-date-picker":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$8();
-      }
-      break;
-    case "ix-date-time-card":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$7();
-      }
-      break;
-    case "ix-dropdown":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$6();
-      }
-      break;
-    case "ix-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "ix-icon-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "ix-spinner":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "ix-time-picker":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
-
-const IxDatetimePicker = DateTimePicker;
-const defineCustomElement = defineCustomElement$1;
-
-export { IxDatetimePicker, defineCustomElement };
-
-//# sourceMappingURL=ix-datetime-picker.js.map

package/dist/components/ix-datetime-picker.js.map

@@ -1 +0,0 @@
-{"file":"ix-datetime-picker.js","mappings":";;;;;;;;;;AAAA,MAAM,iBAAiB,GAAG,6ZAA6Z;;MC2B1a,cAAc;;;;;;;;;iBAIT,IAAI;oBAKD,KAAK;uBAKF,KAAK;uBAKL,KAAK;;;sBAwBE,YAAY;sBAQZ,IAAI;;cAmBL,IAAI;;6BAeJ,SAAS;0BAQZ,KAAK;;0BAYL,MAAM;;EAqCvB,MAAM;;IACZ,IAAI,CAAC,IAAI,CAAC,IAAI,CACZ,CAAC,IAAI,CAAC,KAAK,EAAE,MAAA,IAAI,CAAC,GAAG,mCAAI,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CACnE,CAAC;IAEF,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;MACnB,IAAI,EAAE,IAAI,CAAC,KAAK;MAChB,EAAE,EAAE,IAAI,CAAC,GAAG;MACZ,IAAI,EAAE,IAAI,CAAC,KAAK;KACjB,CAAC,CAAC;GACJ;EAEO,MAAM,YAAY,CAAC,KAA4C;IACrE,KAAK,CAAC,cAAc,EAAE,CAAC;IACvB,KAAK,CAAC,eAAe,EAAE,CAAC;IACxB,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IAC/B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAE3B,MAAM,eAAe,GAAG,MAAM,IAAI,CAAC,iBAAiB,CAAC,cAAc,EAAE,CAAC;IACtE,IAAI,CAAC,KAAK,GAAG,eAAe,CAAC,KAAK,CAAC;IACnC,IAAI,CAAC,GAAG,GAAG,eAAe,CAAC,GAAG,CAAC;GAChC;EAEO,MAAM,YAAY,CAAC,KAA0B;IACnD,KAAK,CAAC,cAAc,EAAE,CAAC;IACvB,KAAK,CAAC,eAAe,EAAE,CAAC;IACxB,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IAC/B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAE3B,MAAM,eAAe,GAAG,MAAM,IAAI,CAAC,iBAAiB,CAAC,cAAc,EAAE,CAAC;IACtE,IAAI,CAAC,KAAK,GAAG,eAAe,CAAC;GAC9B;EAED,gBAAgB;IACd,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC;IACvB,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,EAAE,CAAC;IACnB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC;GACxB;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAC,MAAM,IACf,WAAK,KAAK,EAAC,WAAW,GAAO,EAC7B,sBACE,GAAG,EAAE,CAAC,GAAG,MAAM,IAAI,CAAC,iBAAiB,GAAG,GAAG,CAAC,EAC5C,OAAO,EAAC,MAAM,EACd,UAAU,EAAE,KAAK,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,YAAY,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EACjD,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,cAAc,EAAE,IAAI,CAAC,cAAc,GACnB,EAElB,sBACE,GAAG,EAAE,CAAC,GAAG,MAAM,IAAI,CAAC,iBAAiB,GAAG,GAAG,CAAC,EAC5C,OAAO,EAAC,OAAO,EACf,UAAU,EAAE,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EACzC,YAAY,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EACjD,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,aAAa,EAAE,IAAI,CAAC,aAAa,GACjB,EAClB,WAAK,KAAK,EAAC,WAAW,GAAO,CACzB,EAEN,iBAAW,KAAK,EAAC,iBAAiB,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,MAAM,EAAE,IAC5D,IAAI,CAAC,cAAc,CACV,CACP,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/datetime-picker/datetime-picker.scss?tag=ix-datetime-picker&encapsulation=shadow","./src/components/datetime-picker/datetime-picker.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@import 'common-variables';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: block;\n  background-color: var(--theme-menu--background);\n  border-radius: 4px;\n  position: relative;\n  width: 32.6875rem;\n\n  .flex {\n    display: flex;\n    justify-content: center;\n  }\n\n  .btn-select-date {\n    position: absolute;\n    bottom: $default-space;\n    right: $default-space;\n  }\n\n  .separator {\n    border: 1px solid var(--theme-datepicker-separator--background);\n    width: 100%;\n    margin-top: 72px;\n    height: 1px;\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';\nimport type { DateChangeEvent } from '../date-picker/date-picker';\n\nexport type DateTimeSelectEvent = {\n  from: string;\n  to: string;\n  time: string;\n};\n\nexport type DateTimeDateChangeEvent =\n  | string\n  | Omit<DateTimeSelectEvent, 'time'>;\n\n@Component({\n  tag: 'ix-datetime-picker',\n  styleUrl: 'datetime-picker.scss',\n  shadow: true,\n})\nexport class DateTimePicker {\n  /**\n   * Set range size\n   */\n  @Prop() range = true;\n\n  /**\n   * Show hour input\n   */\n  @Prop() showHour = false;\n\n  /**\n   * Show minutes input\n   */\n  @Prop() showMinutes = false;\n\n  /**\n   * Show seconds input\n   */\n  @Prop() showSeconds = false;\n\n  /**\n   * The earliest date that can be selected by the date picker.\n   * If not set there will be no restriction.\n   *\n   * @since 1.1.0\n   */\n  @Prop() minDate: string;\n\n  /**\n   * The latest date that can be selected by the date picker.\n   * If not set there will be no restriction.\n   *\n   * @since 1.1.0\n   */\n  @Prop() maxDate: string;\n\n  /**\n   * Date format string.\n   * See @link https://moment.github.io/luxon/#/formatting?id=table-of-tokens for all available tokens.\n   *\n   * @since 1.1.0\n   */\n  @Prop() dateFormat: string = 'yyyy/LL/dd';\n\n  /**\n   * Time format string.\n   * See @link https://moment.github.io/luxon/#/formatting?id=table-of-tokens for all available tokens.\n   *\n   * @since 1.1.0\n   */\n  @Prop() timeFormat: string = 'TT';\n\n  /**\n   * Picker date. If the picker is in range mode this property is the start date.\n   *\n   * Format is based on `format`\n   *\n   * @since 1.1.0\n   */\n  @Prop() from: string;\n\n  /**\n   * Picker date. If the picker is in range mode this property is the end date.\n   * If the picker is not in range mode leave this value `null`\n   *\n   * Format is based on `format`\n   *\n   * @since 1.1.0\n   */\n  @Prop() to: string | null = null;\n\n  /**\n   * Select time with format string\n   *\n   * @since 1.1.0\n   */\n  @Prop() time: string;\n\n  /**\n   * Show time reference input\n   * Time reference is default aligned with @see {this.timeFormat}\n   *\n   * @since 1.1.0\n   */\n  @Prop() showTimeReference = undefined;\n\n  /**\n   * Default behavior of the done event is to join the two events (date and time) into one combined string output.\n   * This combination can be configured over the delimiter\n   *\n   * @since 1.1.0\n   */\n  @Prop() eventDelimiter = ' - ';\n\n  /**\n   * Set time reference\n   */\n  @Prop() timeReference: 'AM' | 'PM';\n\n  /**\n   * Text of date select button\n   *\n   * @since 1.1.0\n   */\n  @Prop() textSelectDate = 'Done';\n\n  /**\n   * Done event\n   *\n   * Set `doneEventDelimiter` to null or undefine to get the typed event\n   */\n  @Event() done: EventEmitter<string>;\n\n  /**\n   * Time change\n   *\n   * @since 1.1.0\n   */\n  @Event() timeChange: EventEmitter<string>;\n\n  /**\n   * Date change\n   *\n   * @since 1.1.0\n   */\n  @Event() dateChange: EventEmitter<DateTimeDateChangeEvent>;\n\n  /**\n   * Date selection event is fired after confirm button is pressend\n   *\n   * @since 1.1.0\n   */\n  @Event() dateSelect: EventEmitter<DateTimeSelectEvent>;\n\n  private datePickerElement: HTMLIxDatePickerElement;\n  private timePickerElement: HTMLIxTimePickerElement;\n\n  private _from: string;\n  private _to: string;\n  private _time: string;\n\n  private onDone() {\n    this.done.emit(\n      [this._from, this._to ?? '', this._time].join(this.eventDelimiter)\n    );\n\n    this.dateSelect.emit({\n      from: this._from,\n      to: this._to,\n      time: this._time,\n    });\n  }\n\n  private async onDateChange(event: CustomEvent<string | DateChangeEvent>) {\n    event.preventDefault();\n    event.stopPropagation();\n    const { detail: date } = event;\n    this.dateChange.emit(date);\n\n    const currentDateTime = await this.datePickerElement.getCurrentDate();\n    this._from = currentDateTime.start;\n    this._to = currentDateTime.end;\n  }\n\n  private async onTimeChange(event: CustomEvent<string>) {\n    event.preventDefault();\n    event.stopPropagation();\n    const { detail: time } = event;\n    this.timeChange.emit(time);\n\n    const currentDateTime = await this.timePickerElement.getCurrentTime();\n    this._time = currentDateTime;\n  }\n\n  componentDidLoad() {\n    this._from = this.from;\n    this._to = this.to;\n    this._time = this.time;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"flex\">\n          <div class=\"separator\"></div>\n          <ix-date-picker\n            ref={(ref) => (this.datePickerElement = ref)}\n            corners=\"left\"\n            individual={false}\n            range={this.range}\n            onDateChange={(event) => this.onDateChange(event)}\n            from={this.from}\n            to={this.to}\n            format={this.dateFormat}\n            minDate={this.minDate}\n            maxDate={this.maxDate}\n            eventDelimiter={this.eventDelimiter}\n          ></ix-date-picker>\n\n          <ix-time-picker\n            ref={(ref) => (this.timePickerElement = ref)}\n            corners=\"right\"\n            individual={false}\n            showHour={this.showHour}\n            showMinutes={this.showMinutes}\n            showSeconds={this.showSeconds}\n            showTimeReference={this.showTimeReference}\n            onTimeChange={(event) => this.onTimeChange(event)}\n            time={this.time}\n            format={this.timeFormat}\n            timeReference={this.timeReference}\n          ></ix-time-picker>\n          <div class=\"separator\"></div>\n        </div>\n\n        <ix-button class=\"btn-select-date\" onClick={() => this.onDone()}>\n          {this.textSelectDate}\n        </ix-button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/ix-divider.d.ts

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

package/dist/components/ix-divider.js

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

package/dist/components/ix-divider.js.map

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

package/dist/components/ix-drawer.d.ts

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