@siemens/ix 2.0.0-beta.1 → 2.0.1

package/dist/components/ix-chip.js

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

@@ -1 +0,0 @@
-{"file":"ix-chip.js","mappings":";;;;;AAAA,MAAM,OAAO,GAAG,qlWAAqlW;;MCwBxlW,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-col.d.ts

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

@@ -1,96 +0,0 @@
-import { proxyCustomElement, HTMLElement, forceUpdate, h, Host } from '@stencil/core/internal/client';
-import { m as matchBreakpoint } from './breakpoints.js';
-
-const colCss = ":host{box-sizing:border-box;position:relative;flex-basis:0;flex-grow:1;width:100%;max-width:100%;min-height:1px;padding-left:calc(var(--ix-grid-gutter) * 0.5);padding-right:calc(var(--ix-grid-gutter) * 0.5)}";
-
-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-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/dist/components/ix-col.js.map

@@ -1 +0,0 @@
-{"file":"ix-col.js","mappings":";;;AAAA,MAAM,MAAM,GAAG,iNAAiN;;MCqCnN,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,oCAAoC,CAAC;IAEtE,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\n:host {\n  box-sizing: border-box;\n\n  position: relative;\n\n  flex-basis: 0;\n  flex-grow: 1;\n\n  width: 100%;\n  max-width: 100%;\n  min-height: 1px;\n\n  padding-left: calc(var(--ix-grid-gutter) * 0.5);\n  padding-right: calc(var(--ix-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-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/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-content.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../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/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.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-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-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-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,155 +0,0 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$a } from './button.js';
-import { d as defineCustomElement$9 } from './date-picker.js';
-import { d as defineCustomElement$8 } from './date-time-card.js';
-import { d as defineCustomElement$7 } from './dropdown.js';
-import { d as defineCustomElement$6 } from './icon.js';
-import { d as defineCustomElement$5 } from './icon-button.js';
-import { d as defineCustomElement$4 } from './spinner.js';
-import { d as defineCustomElement$3 } from './time-picker.js';
-import { d as defineCustomElement$2 } from './typography.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 ::-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 .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", "ix-typography"];
-  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$a();
-      }
-      break;
-    case "ix-date-picker":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$9();
-      }
-      break;
-    case "ix-date-time-card":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$8();
-      }
-      break;
-    case "ix-dropdown":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$7();
-      }
-      break;
-    case "ix-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$6();
-      }
-      break;
-    case "ix-icon-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "ix-spinner":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "ix-time-picker":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "ix-typography":
-      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":"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","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-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;