@siemens/ix 2.0.0-beta.1 → 2.0.1

package/components/button.js.map

@@ -0,0 +1 @@
+{"file":"button.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,uvdAAuvd;;MCmB5vd,MAAM;;;;;mBAIgB,SAAS;mBAKxB,KAAK;iBAKP,KAAK;oBAKe,KAAK;gBAKL,QAAQ;mBAOjB,KAAK;;qBAQQ,QAAQ;oBAGT,IAAI;;EAS3C,gBAAgB;IACd,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;MAC1B,MAAM,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;MACtD,YAAY,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;MACpC,YAAY,CAAC,IAAI,GAAG,QAAQ,CAAC;MAC7B,YAAY,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;MAC3B,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;MAE3C,IAAI,CAAC,mBAAmB,GAAG,YAAY,CAAC;KACzC;GACF;EAED,kBAAkB;IAChB,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,IAAI,CAAC,mBAAmB,EAAE;MACtD,IAAI,CAAC,mBAAmB,CAAC,KAAK,EAAE,CAAC;KAClC;GACF;EAED,MAAM;IACJ,MAAM,eAAe,GAAoB;MACvC,OAAO,EAAE,IAAI,CAAC,OAAO;MACrB,OAAO,EAAE,IAAI,CAAC,OAAO;MACrB,KAAK,EAAE,IAAI,CAAC,KAAK;MACjB,QAAQ,EAAE,KAAK;MACf,QAAQ,EAAE,KAAK;MACf,QAAQ,EAAE,KAAK;MACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;MACvC,IAAI,EAAE,IAAI,CAAC,IAAI;MACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;MACvB,OAAO,EAAE,IAAI,CAAC,OAAO;MACrB,OAAO,EAAE,MAAM,IAAI,CAAC,kBAAkB,EAAE;MACxC,IAAI,EAAE,IAAI,CAAC,IAAI;MACf,SAAS,EAAE,IAAI,CAAC,SAAS;KAC1B,CAAC;IAEF,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;OACxC,IAED,EAAC,UAAU,oBAAK,eAAe,GAC7B,eAAa,CACF,CACR,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/button/button.scss?tag=ix-button&encapsulation=shadow","./src/components/button/button.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 './button-mixin';\n\n@include btn;\n$button-categories: (primary, secondary);\n@each $category in $button-categories {\n  @include btn-variant($category);\n  @include btn-variant('outline-#{$category}');\n  @include btn-variant('invisible-#{$category}', false);\n}\n\n:host {\n  min-width: 5rem;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, Prop } from '@stencil/core';\nimport { BaseButton, BaseButtonProps } from './base-button';\n\nexport type ButtonVariant = 'primary' | 'secondary';\n\n@Component({\n  tag: 'ix-button',\n  shadow: true,\n  styleUrl: './button.scss',\n})\nexport class Button {\n  /**\n   * Button variant\n   */\n  @Prop() variant: ButtonVariant = 'primary';\n\n  /**\n   * Outline button\n   */\n  @Prop() outline = false;\n\n  /**\n   * Button with no background or outline\n   */\n  @Prop() ghost = false;\n\n  /**\n   * Disable the button\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * Type of the button\n   */\n  @Prop() type: 'button' | 'submit' = 'button';\n\n  /**\n   * Loading button\n   *\n   * @since 2.0.0\n   */\n  @Prop() loading: boolean = false;\n\n  /**\n   * Icon name\n   */\n  @Prop() icon: string;\n\n  /** @internal */\n  @Prop() alignment: 'center' | 'start' = 'center';\n\n  /** @internal */\n  @Prop() iconSize: '12' | '16' | '24' = '24';\n\n  @Element() hostElement: HTMLIxButtonElement;\n\n  /**\n   * Temp. workaround until stencil issue is fixed (https://github.com/ionic-team/stencil/issues/2284)\n   */\n  submitButtonElement: HTMLButtonElement;\n\n  componentDidLoad() {\n    if (this.type === 'submit') {\n      const submitButton = document.createElement('button');\n      submitButton.style.display = 'none';\n      submitButton.type = 'submit';\n      submitButton.tabIndex = -1;\n      this.hostElement.appendChild(submitButton);\n\n      this.submitButtonElement = submitButton;\n    }\n  }\n\n  dispatchFormEvents() {\n    if (this.type === 'submit' && this.submitButtonElement) {\n      this.submitButtonElement.click();\n    }\n  }\n\n  render() {\n    const baseButtonProps: BaseButtonProps = {\n      variant: this.variant,\n      outline: this.outline,\n      ghost: this.ghost,\n      iconOnly: false,\n      iconOval: false,\n      selected: false,\n      disabled: this.disabled || this.loading,\n      icon: this.icon,\n      iconSize: this.iconSize,\n      loading: this.loading,\n      onClick: () => this.dispatchFormEvents(),\n      type: this.type,\n      alignment: this.alignment,\n    };\n\n    return (\n      <Host\n        class={{\n          disabled: this.disabled || this.loading,\n        }}\n      >\n        <BaseButton {...baseButtonProps}>\n          <slot></slot>\n        </BaseButton>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/card-accordion.js

@@ -0,0 +1,72 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+
+const cardAccordionCss = ":host{display:flex;position:relative;flex-direction:column;width:100%;transition:var(--theme-default-time) ease-in-out}: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 .expand-action{all:unset;display:flex;position:relative;-webkit-appearance:button;-moz-appearance:button;appearance:button;height:2.5rem;width:100%;background-color:var(--theme-color-component-1);align-items:center;justify-content:flex-start}:host .expand-action:not(.disabled):not(:disabled).hover,:host .expand-action:not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}:host .expand-action:not(.disabled):not(:disabled).active,:host .expand-action:not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}:host .expand-action:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .expand-action::before{content:\"\";position:absolute;width:100%;height:100%;background-color:var(--ix-card-background);z-index:-1}:host .expand-action:not(.show),:host .expand-action:not(.show)::before{border-bottom-left-radius:var(--theme-default-border-radius);border-bottom-right-radius:var(--theme-default-border-radius)}:host .expand-icon{margin-left:0.5rem;transition:var(--theme-default-time) transform ease-in-out}:host .expand-icon.show{transform:rotate(90deg)}:host .expand-content{display:grid;position:relative;grid-template-rows:0fr;transition:var(--theme-default-time) ease-in-out;width:100%;max-height:14.75rem;opacity:0;background-color:var(--theme-color-component-1)}:host .expand-content.show{grid-template-rows:14.75rem;opacity:1}:host .expand-content-inner{position:relative;height:100%;overflow:hidden}:host .expand-content.show .expand-content-body{display:none;overflow:hidden;color:var(--theme-color-std-text)}:host .expand-content.show .expand-content-body{display:block;overflow:auto;height:calc(100% - 1rem)}:host .expand-content-footer{display:block;position:relative;width:100%;height:1rem;margin-top:auto;margin-bottom:0px;background-color:var(--theme-color-component-1);border-bottom-left-radius:var(--theme-default-border-radius);border-bottom-right-radius:var(--theme-default-border-radius)}";
+
+let accordionControlId = 0;
+const getAriaControlsId = (prefix = 'expand-content') => {
+  return [prefix, accordionControlId++].join('-');
+};
+const CardAccordion = /*@__PURE__*/ proxyCustomElement(class CardAccordion extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.accordionExpand = createEvent(this, "accordionExpand", 7);
+    this.expandContent = false;
+  }
+  get expandedContent() {
+    return this.hostElement.shadowRoot.querySelector('.expand-content');
+  }
+  onExpandActionClick(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    this.expandContent = !this.expandContent;
+    this.accordionExpand.emit({
+      expand: this.expandContent,
+      nativeEvent: event,
+    });
+    if (this.expandContent) {
+      this.scrollExpandedContentIntoView();
+    }
+  }
+  scrollExpandedContentIntoView() {
+    setTimeout(() => {
+      const rect = this.expandedContent.getBoundingClientRect();
+      if (rect.bottom > window.innerHeight) {
+        this.hostElement.shadowRoot
+          .querySelector('.expand-content')
+          .scrollIntoView(false);
+      }
+    }, 150);
+  }
+  render() {
+    return (h(Host, { slot: "card-accordion" }, h("button", { tabIndex: 0, class: { 'expand-action': true, show: this.expandContent }, onClick: (event) => this.onExpandActionClick(event), role: "button", type: "button", "aria-expanded": this.expandContent, "aria-controls": getAriaControlsId() }, h("ix-icon", { name: 'chevron-right-small', class: {
+        'expand-icon': true,
+        show: this.expandContent,
+      } })), h("div", { class: {
+        'expand-content': true,
+        show: this.expandContent,
+      } }, h("div", { class: "expand-content-inner" }, h("div", { class: "expand-content-body" }, h("slot", null)), h("div", { class: "expand-content-footer" })))));
+  }
+  get hostElement() { return this; }
+  static get style() { return cardAccordionCss; }
+}, [1, "ix-card-accordion", {
+    "expandContent": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-card-accordion"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-card-accordion":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CardAccordion);
+      }
+      break;
+  } });
+}
+
+export { CardAccordion as C, defineCustomElement as d };
+
+//# sourceMappingURL=card-accordion.js.map

package/components/card-accordion.js.map

@@ -0,0 +1 @@
+{"file":"card-accordion.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,4vFAA4vF;;ACUrxF,IAAI,kBAAkB,GAAG,CAAC,CAAC;AAC3B,MAAM,iBAAiB,GAAG,CAAC,SAAiB,gBAAgB;EAC1D,OAAO,CAAC,MAAM,EAAE,kBAAkB,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAClD,CAAC,CAAC;MAeW,aAAa;;;;;;yBAQC,KAAK;;EAE9B,IAAI,eAAe;IACjB,OAAO,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;GACrE;EAED,mBAAmB,CAAC,KAAY;IAC9B,KAAK,CAAC,cAAc,EAAE,CAAC;IACvB,KAAK,CAAC,eAAe,EAAE,CAAC;IACxB,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC;IACzC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;MACxB,MAAM,EAAE,IAAI,CAAC,aAAa;MAC1B,WAAW,EAAE,KAAK;KACnB,CAAC,CAAC;IAEH,IAAI,IAAI,CAAC,aAAa,EAAE;MACtB,IAAI,CAAC,6BAA6B,EAAE,CAAC;KACtC;GACF;EAEO,6BAA6B;IACnC,UAAU,CAAC;MACT,MAAM,IAAI,GAAG,IAAI,CAAC,eAAe,CAAC,qBAAqB,EAAE,CAAC;MAC1D,IAAI,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,WAAW,EAAE;QACpC,IAAI,CAAC,WAAW,CAAC,UAAU;WACxB,aAAa,CAAC,iBAAiB,CAAC;WAChC,cAAc,CAAC,KAAK,CAAC,CAAC;OAC1B;KACF,EAAE,GAAG,CAAC,CAAC;GACT;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,IAAI,EAAC,gBAAgB,IACzB,cACE,QAAQ,EAAE,CAAC,EACX,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,aAAa,EAAE,EAC1D,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,EACnD,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,mBACE,IAAI,CAAC,aAAa,mBAClB,iBAAiB,EAAE,IAElC,eACE,IAAI,EAAE,qBAAqB,EAC3B,KAAK,EAAE;QACL,aAAa,EAAE,IAAI;QACnB,IAAI,EAAE,IAAI,CAAC,aAAa;OACzB,GACQ,CACJ,EACT,WACE,KAAK,EAAE;QACL,gBAAgB,EAAE,IAAI;QACtB,IAAI,EAAE,IAAI,CAAC,aAAa;OACzB,IAED,WAAK,KAAK,EAAC,sBAAsB,IAC/B,WAAK,KAAK,EAAC,qBAAqB,IAC9B,eAAa,CACT,EACN,WAAK,KAAK,EAAC,uBAAuB,GAAO,CACrC,CACF,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/card-accordion/card-accordion.scss?tag=ix-card-accordion&encapsulation=shadow","./src/components/card-accordion/card-accordion.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/hover';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  width: 100%;\n  transition: var(--theme-default-time) ease-in-out;\n\n  .expand-action {\n    all: unset;\n    display: flex;\n    position: relative;\n\n    appearance: button;\n\n    height: 2.5rem;\n    width: 100%;\n\n    background-color: var(--theme-color-component-1);\n    align-items: center;\n    justify-content: flex-start;\n    @include ghost-hover-pressed();\n\n    @include focus-visible {\n      outline: 1px solid var(--theme-color-focus-bdr);\n      outline-offset: var(--theme-btn--focus--outline-offset);\n    }\n  }\n\n  .expand-action::before {\n    content: '';\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    background-color: var(--ix-card-background);\n    z-index: -1;\n  }\n\n  .expand-action:not(.show),\n  .expand-action:not(.show)::before {\n    border-bottom-left-radius: var(--theme-default-border-radius);\n    border-bottom-right-radius: var(--theme-default-border-radius);\n  }\n\n  .expand-icon {\n    margin-left: 0.5rem;\n    transition: var(--theme-default-time) transform ease-in-out;\n  }\n\n  .expand-icon.show {\n    transform: rotate(90deg);\n  }\n\n  .expand-content {\n    display: grid;\n    position: relative;\n    grid-template-rows: 0fr;\n    transition: var(--theme-default-time) ease-in-out;\n    width: 100%;\n    max-height: 14.75rem;\n    opacity: 0;\n    background-color: var(--theme-color-component-1);\n  }\n\n  .expand-content.show {\n    grid-template-rows: 14.75rem;\n    opacity: 1;\n  }\n\n  .expand-content-inner {\n    position: relative;\n    height: 100%;\n    overflow: hidden;\n  }\n\n  .expand-content.show .expand-content-body {\n    display: none;\n    overflow: hidden;\n    color: var(--theme-color-std-text);\n  }\n\n  .expand-content.show .expand-content-body {\n    display: block;\n    overflow: auto;\n    height: calc(100% - 1rem);\n  }\n\n  .expand-content-footer {\n    display: block;\n    position: relative;\n    width: 100%;\n    height: 1rem;\n\n    margin-top: auto;\n    margin-bottom: 0px;\n\n    background-color: var(--theme-color-component-1);\n    border-bottom-left-radius: var(--theme-default-border-radius);\n    border-bottom-right-radius: var(--theme-default-border-radius);\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  State,\n} from '@stencil/core';\n\nlet accordionControlId = 0;\nconst getAriaControlsId = (prefix: string = 'expand-content') => {\n  return [prefix, accordionControlId++].join('-');\n};\n\nexport type CardAccordionExpandChangeEvent = {\n  expand: boolean;\n  nativeEvent: Event;\n};\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-card-accordion',\n  styleUrl: 'card-accordion.scss',\n  shadow: true,\n})\nexport class CardAccordion {\n  @Element() hostElement: HTMLIxCardAccordionElement;\n\n  /**\n   * @internal\n   */\n  @Event() accordionExpand: EventEmitter<CardAccordionExpandChangeEvent>;\n\n  @State() expandContent = false;\n\n  get expandedContent() {\n    return this.hostElement.shadowRoot.querySelector('.expand-content');\n  }\n\n  onExpandActionClick(event: Event) {\n    event.preventDefault();\n    event.stopPropagation();\n    this.expandContent = !this.expandContent;\n    this.accordionExpand.emit({\n      expand: this.expandContent,\n      nativeEvent: event,\n    });\n\n    if (this.expandContent) {\n      this.scrollExpandedContentIntoView();\n    }\n  }\n\n  private scrollExpandedContentIntoView() {\n    setTimeout(() => {\n      const rect = this.expandedContent.getBoundingClientRect();\n      if (rect.bottom > window.innerHeight) {\n        this.hostElement.shadowRoot\n          .querySelector('.expand-content')\n          .scrollIntoView(false);\n      }\n    }, 150);\n  }\n\n  render() {\n    return (\n      <Host slot=\"card-accordion\">\n        <button\n          tabIndex={0}\n          class={{ 'expand-action': true, show: this.expandContent }}\n          onClick={(event) => this.onExpandActionClick(event)}\n          role=\"button\"\n          type=\"button\"\n          aria-expanded={this.expandContent}\n          aria-controls={getAriaControlsId()}\n        >\n          <ix-icon\n            name={'chevron-right-small'}\n            class={{\n              'expand-icon': true,\n              show: this.expandContent,\n            }}\n          ></ix-icon>\n        </button>\n        <div\n          class={{\n            'expand-content': true,\n            show: this.expandContent,\n          }}\n        >\n          <div class=\"expand-content-inner\">\n            <div class=\"expand-content-body\">\n              <slot></slot>\n            </div>\n            <div class=\"expand-content-footer\"></div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/card-content.js

@@ -0,0 +1,32 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const cardContentCss = ":host{display:flex;position:relative;flex-direction:column;align-items:flex-start;gap:0.5rem;padding:1rem;height:100%}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}";
+
+const CardContent = /*@__PURE__*/ proxyCustomElement(class CardContent extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    return (h(Host, null, h("slot", null)));
+  }
+  static get style() { return cardContentCss; }
+}, [1, "ix-card-content"]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-card-content"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-card-content":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CardContent);
+      }
+      break;
+  } });
+}
+
+export { CardContent as C, defineCustomElement as d };
+
+//# sourceMappingURL=card-content.js.map

package/components/card-content.js.map

@@ -0,0 +1 @@
+{"file":"card-content.js","mappings":";;AAAA,MAAM,cAAc,GAAG,otBAAotB;;MCU9tB,WAAW;;;;;;EACtB,MAAM;IACJ,QACE,EAAC,IAAI,QACH,eAAa,CACR,EACP;GACH;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/card-content/card-content.scss?tag=ix-card-content&encapsulation=shadow","./src/components/card-content/card-content.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 0.5rem;\n  padding: 1rem;\n  height: 100%;\n}\n","import { Component, h, Host } from '@stencil/core';\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-card-content',\n  styleUrl: 'card-content.scss',\n  shadow: true,\n})\nexport class CardContent {\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/card-title.js

@@ -0,0 +1,32 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const cardTitleCss = ":host{display:flex;position:relative;flex-direction:row;align-items:center;margin-top:0.25rem;margin-bottom:0.5rem;gap:1rem;width:100%}:host .title-actions{display:flex;position:relative;flex-direction:row;gap:0.25rem;margin-left:auto;margin-right:0px}";
+
+const CardHeader = /*@__PURE__*/ proxyCustomElement(class CardHeader extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    return (h(Host, null, h("slot", null), h("div", { class: "title-actions" }, h("slot", { name: "title-actions" }))));
+  }
+  static get style() { return cardTitleCss; }
+}, [1, "ix-card-title"]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-card-title"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-card-title":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CardHeader);
+      }
+      break;
+  } });
+}
+
+export { CardHeader as C, defineCustomElement as d };
+
+//# sourceMappingURL=card-title.js.map

package/components/card-title.js.map

@@ -0,0 +1 @@
+{"file":"card-title.js","mappings":";;AAAA,MAAM,YAAY,GAAG,8PAA8P;;MCYtQ,UAAU;;;;;;EACrB,MAAM;IACJ,QACE,EAAC,IAAI,QACH,eAAa,EACb,WAAK,KAAK,EAAC,eAAe,IACxB,YAAM,IAAI,EAAC,eAAe,GAAQ,CAC9B,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/card-title/card-title.scss?tag=ix-card-title&encapsulation=shadow","./src/components/card-title/card-title.tsx"],"sourcesContent":["@import 'common-variables';\n\n:host {\n  display: flex;\n  position: relative;\n  flex-direction: row;\n  align-items: center;\n  margin-top: 0.25rem;\n  margin-bottom: $small-space;\n  gap: $default-space;\n\n  width: 100%;\n\n  .title-actions {\n    display: flex;\n    position: relative;\n    flex-direction: row;\n    gap: 0.25rem;\n    margin-left: auto;\n    margin-right: 0px;\n  }\n}\n","import { Component, h, Host } from '@stencil/core';\n\n/**\n * @slot title-actions - Place additional actions inside title\n *\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-card-title',\n  styleUrl: 'card-title.scss',\n  shadow: true,\n})\nexport class CardHeader {\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n        <div class=\"title-actions\">\n          <slot name=\"title-actions\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/card.js

@@ -0,0 +1,36 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const cardCss = ":host{display:flex;position:relative;flex-direction:column;align-items:flex-start;align-self:flex-start;overflow:hidden;width:20rem;border:1px solid var(--ix-card-border-color, var(--theme-color-soft-bdr));border-radius:var(--theme-default-border-radius)}: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 .card-content{display:block;position:relative;flex-shrink:0;flex-grow:1;width:100%;height:calc(100% - 2rem);background-color:var(--ix-card-background, transparent);border-top-left-radius:var(--theme-default-border-radius);border-top-right-radius:var(--theme-default-border-radius)}:host .card-footer{display:flex;position:relative;width:100%}:host(.card-insight){--ix-card-background:transparent;--ix-card-border-color:var(--theme-color-soft-bdr)}:host(.card-notification){--ix-card-background:var(--theme-color-component-1)}:host(.card-alarm){--ix-card-background:var(--theme-color-alarm);color:var(--theme-color-alarm--contrast)}:host(.card-critical){--ix-card-background:var(--theme-color-critical);color:var(--theme-color-critical--contrast)}:host(.card-warning){--ix-card-background:var(--theme-color-warning);color:var(--theme-color-warning--contrast)}:host(.card-success){--ix-card-background:var(--theme-color-success);color:var(--theme-color-success--contrast)}:host(.card-info){--ix-card-background:var(--theme-color-info);color:var(--theme-color-info--contrast)}:host(.card-neutral){--ix-card-background:var(--theme-color-neutral);color:var(--theme-color-neutral--contrast)}:host(.card-primary){--ix-card-background:var(--theme-color-primary);color:var(--theme-color-neutral--contrast)}:host(:not(.card-insight)){--ix-card-border-color:transparent}";
+
+const Card = /*@__PURE__*/ proxyCustomElement(class Card extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.variant = 'insight';
+  }
+  render() {
+    return (h(Host, { class: `card-${this.variant}` }, h("div", { class: "card-content" }, h("slot", null)), h("div", { class: "card-footer" }, h("slot", { name: "card-accordion" }))));
+  }
+  get hostElement() { return this; }
+  static get style() { return cardCss; }
+}, [1, "ix-card", {
+    "variant": [1]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-card"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-card":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Card);
+      }
+      break;
+  } });
+}
+
+export { Card as C, defineCustomElement as d };
+
+//# sourceMappingURL=card.js.map

package/components/card.js.map

@@ -0,0 +1 @@
+{"file":"card.js","mappings":";;AAAA,MAAM,OAAO,GAAG,krEAAkrE;;MCqBrrE,IAAI;;;;;mBAMgB,SAAS;;EAExC,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,QAAQ,IAAI,CAAC,OAAO,EAAE,IACjC,WAAK,KAAK,EAAC,cAAc,IACvB,eAAa,CACT,EACN,WAAK,KAAK,EAAC,aAAa,IACtB,YAAM,IAAI,EAAC,gBAAgB,GAAQ,CAC/B,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/card/card.scss?tag=ix-card&encapsulation=shadow","./src/components/card/card.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  align-items: flex-start;\n  align-self: flex-start;\n  overflow: hidden;\n\n  width: 20rem;\n\n  border: 1px solid var(--ix-card-border-color, var(--theme-color-soft-bdr));\n  border-radius: var(--theme-default-border-radius);\n\n  .card-content {\n    display: block;\n    position: relative;\n    flex-shrink: 0;\n    flex-grow: 1;\n    width: 100%;\n    height: calc(100% - 2rem);\n    background-color: var(--ix-card-background, transparent);\n    border-top-left-radius: var(--theme-default-border-radius);\n    border-top-right-radius: var(--theme-default-border-radius);\n  }\n\n  .card-footer {\n    display: flex;\n    position: relative;\n    width: 100%;\n  }\n}\n\n:host(.card-insight) {\n  --ix-card-background: transparent;\n  --ix-card-border-color: var(--theme-color-soft-bdr);\n}\n\n:host(.card-notification) {\n  --ix-card-background: var(--theme-color-component-1);\n}\n\n:host(.card-alarm) {\n  --ix-card-background: var(--theme-color-alarm);\n  color: var(--theme-color-alarm--contrast);\n}\n\n:host(.card-critical) {\n  --ix-card-background: var(--theme-color-critical);\n  color: var(--theme-color-critical--contrast);\n}\n\n:host(.card-warning) {\n  --ix-card-background: var(--theme-color-warning);\n  color: var(--theme-color-warning--contrast);\n}\n\n:host(.card-success) {\n  --ix-card-background: var(--theme-color-success);\n  color: var(--theme-color-success--contrast);\n}\n\n:host(.card-info) {\n  --ix-card-background: var(--theme-color-info);\n  color: var(--theme-color-info--contrast);\n}\n\n:host(.card-neutral) {\n  --ix-card-background: var(--theme-color-neutral);\n  color: var(--theme-color-neutral--contrast);\n}\n\n:host(.card-primary) {\n  --ix-card-background: var(--theme-color-primary);\n  color: var(--theme-color-neutral--contrast);\n}\n\n:host(:not(.card-insight)) {\n  --ix-card-border-color: transparent;\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\nexport type CardVariant =\n  | 'insight'\n  | 'notification'\n  | 'alarm'\n  | 'critical'\n  | 'warning'\n  | 'info'\n  | 'neutral'\n  | 'success'\n  | 'primary';\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-card',\n  styleUrl: 'card.scss',\n  shadow: true,\n})\nexport class Card {\n  @Element() hostElement: HTMLIxCardElement;\n\n  /**\n   * Card variant\n   */\n  @Prop() variant: CardVariant = 'insight';\n\n  render() {\n    return (\n      <Host class={`card-${this.variant}`}>\n        <div class=\"card-content\">\n          <slot></slot>\n        </div>\n        <div class=\"card-footer\">\n          <slot name=\"card-accordion\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/custom-elements.d.ts

@@ -0,0 +1,10 @@
+/*
+ * 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.
+ */
+export * from '../dist/types/index';
+export * from './index';

package/components/date-picker.js

@@ -0,0 +1,372 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
+import { l as luxon } from './luxon.js';
+import { d as defineCustomElement$5 } from './button.js';
+import { d as defineCustomElement$4 } from './date-time-card.js';
+import { d as defineCustomElement$3 } from './dropdown.js';
+import { d as defineCustomElement$2 } from './icon-button.js';
+import { d as defineCustomElement$1 } from './spinner.js';
+
+const datePickerCss = ":host{display:block;position:relative;width:22rem}: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 .header{display:flex;align-items:center;justify-content:space-between}:host .selector{flex-basis:100%;display:flex;align-items:center;justify-content:center;padding:0.25rem 1rem}:host .selector .dropdown{color:var(--theme-menu-item--color);font-size:14px;line-height:20px}:host .selector .fontSize{font-size:16px}:host .selector .capitalize{text-transform:capitalize}:host .selector .arrowYear{display:flex;position:relative;padding:0.75rem 2rem;align-items:center;cursor:pointer}:host .selector .arrowYear:hover{background-color:var(--theme-select-list-item--background--hover)}:host .selector .arrowYear.selected{background-color:var(--theme-select-list-item--background--selected)}:host .selector .arrowYear .arrowPosition{position:absolute;left:calc(1rem - 6px);top:calc(50% - 6px)}:host .selector .arrowYear .checkPosition{position:absolute;left:calc(1rem - 6px);top:calc(50% - 8px)}:host .selector .arrowYear .monthMargin{margin-left:10px}:host .wrapper{display:flex}:host .wrapper .overflow{overflow-y:scroll;max-height:250px}:host .grid{display:grid;grid-template-columns:repeat(8, 40px);grid-template-rows:repeat(7, 40px);align-items:center;justify-items:center;justify-content:center;color:var(--theme-datepicker-today--color)}:host .grid .calendar-item{position:relative;display:flex;justify-content:center;align-items:center;background-color:var(--theme-datepicker-day--background);border:1px solid var(--theme-datepicker-day--background);width:40px;height:40px;cursor:pointer}:host .grid .calendar-item.today{border:1px solid var(--theme-datepicker-today--border-color)}:host .grid .calendar-item.today:hover{background-color:var(--theme-datepicker-day--background--hover)}:host .grid .calendar-item.today:active{background-color:var(--theme-datepicker-day--background--active)}:host .grid .calendar-item.today.selected{box-shadow:inset 0 0 0 1px white}:host .grid .calendar-item.today.selected:hover{background-color:var(--theme-datepicker-day--background--selected-hover)}:host .grid .calendar-item.today.selected:active{background-color:var(--theme-datepicker-day--background--selected-active)}:host .grid .calendar-item.today.selected.disabled{pointer-events:none;background-color:var(--theme-datepicker-day--background--selected-disabled);border:1px solid var(--theme-datepicker-day--background--selected-disabled);color:var(--theme-datepicker-day--color--selected-disabled)}:host .grid .calendar-item.today.range{background-color:var(--theme-datepicker-day--background--range);color:var(--theme-datepicker-day--color--range);border:1px solid var(--theme-datepicker-today--border-color--range);box-shadow:inset 0 0 0 1px white}:host .grid .calendar-item.today.range:hover{background-color:var(--theme-datepicker-day--background--range-hover);border:1px solid var(--theme-datepicker-today--border-color--range-hover)}:host .grid .calendar-item.today.range:active{background-color:var(--theme-datepicker-day--background--range-active);border:1px solid var(--theme-datepicker-today--border-color--range-active)}:host .grid .calendar-item.today.range.disabled{background-color:var(--theme-datepicker-day--background--range-disabled);color:var(--theme-datepicker-day--color--range-disabled);border:1px solid var(--theme-datepicker-today--border-color--range-disabled)}:host .grid .calendar-item.today.disabled{pointer-events:none;background-color:var(--theme-datepicker-day--background--disabled);color:var(--theme-datepicker-day--color--disabled);cursor:default;pointer-events:none}:host .grid .calendar-item:hover{background-color:var(--theme-datepicker-day--background--hover)}:host .grid .calendar-item:active{background-color:var(--theme-datepicker-day--background--active)}:host .grid .calendar-item.selected{background-color:var(--theme-datepicker-day--background--selected);color:var(--theme-datepicker-day--color--selected);border:1px solid var(--theme-datepicker-day--background--selected)}:host .grid .calendar-item.selected:hover{background-color:var(--theme-datepicker-day--background--selected-hover)}:host .grid .calendar-item.selected:active{background-color:var(--theme-datepicker-day--background--selected-active)}:host .grid .calendar-item.selected.disabled{pointer-events:none;background-color:var(--theme-datepicker-day--background--selected-disabled);color:var(--theme-datepicker-day--color--selected-disabled)}:host .grid .calendar-item.range{background-color:var(--theme-datepicker-day--background--range);color:var(--theme-datepicker-day--color--range)}:host .grid .calendar-item.range:hover{background-color:var(--theme-datepicker-day--background--range-hover)}:host .grid .calendar-item.range:active{background-color:var(--theme-datepicker-day--background--range-active)}:host .grid .calendar-item.range.disabled{pointer-events:none;background-color:var(--theme-datepicker-day--background--range-disabled);color:var(--theme-datepicker-day--color--range-disabled)}:host .grid .calendar-item.disabled{pointer-events:none;background-color:var(--theme-datepicker-day--background--disabled);color:var(--theme-datepicker-day--color--disabled)}:host .grid .calendar-item.week-day{color:var(--theme-datepicker-weekday--color);font-size:12px;line-height:20px;border:none;background:none;cursor:initial}:host .grid .calendar-item.empty-day{border:none;background:none;cursor:initial}:host .grid .calendar-item.week-number{font-size:10px;line-height:14px;color:var(--theme-datepicker-ix--color);border:none;background:none;cursor:initial}:host .grid .calendar-item:focus-visible{background-color:var(--theme-datepicker-day--background--selected);border:inset 1px solid var(--theme-datepicker-day--border-color--selected);color:var(--theme-datepicker-day--color--selected);font-size:14px;line-height:20px;letter-spacing:0}:host .button{display:flex;justify-content:flex-end}:host .hidden{display:none}";
+
+const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.dateChange = createEvent(this, "dateChange", 7);
+    this.dateRangeChange = createEvent(this, "dateRangeChange", 7);
+    this.done = createEvent(this, "done", 7);
+    this.dateSelect = createEvent(this, "dateSelect", 7);
+    this.daysInWeek = 7;
+    this.dayNames = luxon.Info.weekdays();
+    this.monthNames = luxon.Info.months();
+    this.format = 'yyyy/LL/dd';
+    this.range = true;
+    this.individual = true;
+    this.corners = 'rounded';
+    this.from = luxon.DateTime.now().toFormat(this.format);
+    this.to = null;
+    this.minDate = undefined;
+    this.maxDate = undefined;
+    this.eventDelimiter = ' - ';
+    this.textSelectDate = 'Done';
+    this.yearValue = this.year;
+    this.today = luxon.DateTime.now();
+    this.monthValue = this.month;
+    this.calendar = [];
+    this.years = [...Array(10).keys()].map((year) => year + this.year - 5);
+    this.tempYear = this.yearValue;
+    this.tempMonth = this.monthValue;
+    this.start = luxon.DateTime.fromObject({
+      year: this.year,
+      month: this.month,
+      day: this.day,
+    });
+    this.end = this.to
+      ? luxon.DateTime.fromFormat(this.to, this.format)
+      : null;
+    this.dropdownButtonRef = undefined;
+    this.yearContainerRef = undefined;
+  }
+  get year() {
+    if (this.from !== null) {
+      return luxon.DateTime.fromFormat(this.from, this.format).year;
+    }
+    return luxon.DateTime.now().year;
+  }
+  get day() {
+    if (this.from !== null) {
+      return luxon.DateTime.fromFormat(this.from, this.format).day;
+    }
+    return null;
+  }
+  get month() {
+    if (this.from !== null) {
+      return luxon.DateTime.fromFormat(this.from, this.format).month;
+    }
+    return luxon.DateTime.now().month;
+  }
+  onDone() {
+    var _a, _b;
+    this.done.emit(this.getOutputFormat());
+    this.dateSelect.emit({
+      from: (_a = this.start) === null || _a === void 0 ? void 0 : _a.toFormat(this.format),
+      to: (_b = this.end) === null || _b === void 0 ? void 0 : _b.toFormat(this.format),
+    });
+  }
+  onDateChange() {
+    var _a, _b;
+    const from = (_a = this.start) === null || _a === void 0 ? void 0 : _a.toFormat(this.format);
+    const to = (_b = this.end) === null || _b === void 0 ? void 0 : _b.toFormat(this.format);
+    this.from = from;
+    this.to = to;
+    if (this.eventDelimiter) {
+      this.dateChange.emit(this.getOutputFormat());
+    }
+    else {
+      this.dateChange.emit({
+        from,
+        to,
+      });
+    }
+    if (this.range) {
+      this.dateRangeChange.emit({
+        from,
+        to,
+      });
+    }
+  }
+  getStartOfMonth(year = luxon.DateTime.local().get('year'), month = luxon.DateTime.local().get('month')) {
+    return luxon.DateTime.local(year, month).startOf('month');
+  }
+  getEndOfMonth(year = luxon.DateTime.local().get('year'), month = luxon.DateTime.local().get('month')) {
+    return luxon.DateTime.local(year, month).endOf('month');
+  }
+  getDaysInMonth(start = this.getStartOfMonth(), end = this.getEndOfMonth()) {
+    return Math.ceil(end.diff(start, 'days').days);
+  }
+  calculateCalendar() {
+    const start = this.getStartOfMonth(this.yearValue, this.monthValue);
+    const end = this.getEndOfMonth(this.yearValue, this.monthValue);
+    const totalDays = this.getDaysInMonth(start, end);
+    const totalWeeks = 6;
+    const totalDaysInWeeks = totalWeeks * this.daysInWeek;
+    const startWeekDay = start.weekday;
+    const prependDays = startWeekDay - 1;
+    const appendDays = totalDaysInWeeks - totalDays - prependDays;
+    let weekdays = [];
+    const calendar = [];
+    // create list of days
+    let days = [...new Array(totalDaysInWeeks).keys()].map((day) => day + 1);
+    // add start empty days
+    days.unshift(...new Array(prependDays));
+    // remove & add end days
+    days = days.slice(0, days.length - prependDays - appendDays);
+    days.push(...new Array(appendDays));
+    // make weeks
+    weekdays = days.reduce((result, item, index) => {
+      const weekIndex = Math.floor(index / this.daysInWeek);
+      if (!result[weekIndex])
+        result[weekIndex] = [];
+      result[weekIndex].push(item);
+      return result;
+    }, []);
+    for (let index = 1; index <= totalWeeks; index++) {
+      const week = weekdays[index - 1];
+      const firstWeekDay = week.find((day) => day !== undefined);
+      const weekNumber = firstWeekDay
+        ? luxon.DateTime.local(this.yearValue, this.monthValue, weekdays[index - 1][0]).weekNumber
+        : undefined;
+      calendar.push([weekNumber, week]);
+    }
+    this.calendar = calendar;
+  }
+  changeMonth(number) {
+    if (this.monthValue + number < 1) {
+      this.yearValue--;
+      this.monthValue = 12;
+    }
+    else if (this.monthValue + number > 12) {
+      this.yearValue++;
+      this.monthValue = 1;
+    }
+    else {
+      this.monthValue += number;
+    }
+    this.calculateCalendar();
+  }
+  selectMonth(month) {
+    this.monthValue = month;
+    this.yearValue = this.tempYear;
+    this.tempMonth = month;
+  }
+  infiniteScrollYears() {
+    const scroll = this.yearContainerRef.scrollTop;
+    const maxScroll = this.yearContainerRef.scrollHeight;
+    const atTop = scroll === 0;
+    const atBottom = scroll + this.yearContainerRef.getBoundingClientRect().height ===
+      maxScroll;
+    const limit = 200;
+    if (this.years.length > limit)
+      return;
+    if (atTop) {
+      this.years = [
+        ...[...Array(5).keys()].map((year) => year + this.years[0] - 5),
+        ...this.years,
+      ];
+      this.yearContainerRef.scroll({ behavior: 'smooth', top: scroll + 100 });
+    }
+    if (atBottom) {
+      this.years = [
+        ...this.years,
+        ...[...Array(5).keys()].map((year) => year + this.years[this.years.length - 1]),
+      ];
+      this.yearContainerRef.scroll({ behavior: 'smooth', top: scroll - 50 });
+    }
+  }
+  selectTempYear(event, year) {
+    event.stopPropagation();
+    this.tempYear = year;
+  }
+  getDayClasses(day) {
+    var _a, _b;
+    if (!day) {
+      return;
+    }
+    const todayLocal = luxon.DateTime.local();
+    const dayLocal = luxon.DateTime.local(this.yearValue, this.monthValue, day);
+    const dayIso = dayLocal.toISO();
+    const startIso = (_a = this.start) === null || _a === void 0 ? void 0 : _a.toISO();
+    const endIso = (_b = this.end) === null || _b === void 0 ? void 0 : _b.toISO();
+    const isToday = Math.ceil(dayLocal.diff(todayLocal, 'days').days) === 0;
+    return {
+      'calendar-item': true,
+      'empty-day': day === undefined,
+      today: isToday,
+      selected: (this.start && dayIso === startIso) || (this.end && dayIso === endIso),
+      range: this.start && this.end && dayIso > startIso && dayIso < endIso,
+      disabled: !this.isWithinMinMax(dayLocal),
+    };
+  }
+  selectDay(day) {
+    const date = luxon.DateTime.local(this.yearValue, this.monthValue, day);
+    const isStartBeforeEnd = this.start && this.start.toISO() < date.toISO();
+    const isSameDay = this.start && !this.end && this.start.toISO() === date.toISO();
+    if (day === undefined)
+      return;
+    if (isSameDay) {
+      this.start = null;
+      this.onDateChange();
+      return;
+    }
+    if (this.range) {
+      if (this.start === null) {
+        this.start = date;
+      }
+      else if (this.end === null) {
+        if (isStartBeforeEnd) {
+          this.end = date;
+        }
+        else {
+          this.end = this.start;
+          this.start = date;
+        }
+      }
+      else {
+        this.start = date;
+        this.end = null;
+      }
+    }
+    else {
+      this.start = date;
+    }
+    this.onDateChange();
+  }
+  getOutputFormat() {
+    if (!this.start) {
+      return null;
+    }
+    if (!this.end) {
+      return this.start.toFormat(this.format);
+    }
+    return [
+      this.start.toFormat(this.format),
+      this.end.toFormat(this.format),
+    ].join(this.eventDelimiter);
+  }
+  isWithinMinMax(date) {
+    const dateIso = date.toISO();
+    const _minDate = this.minDate
+      ? luxon.DateTime.fromFormat(this.minDate, this.format)
+      : null;
+    const _maxDate = this.maxDate
+      ? luxon.DateTime.fromFormat(this.maxDate, this.format)
+      : null;
+    return ((!_minDate || _minDate.toISO() <= dateIso) &&
+      (!_maxDate || _maxDate.toISO() >= dateIso));
+  }
+  componentWillLoad() {
+    if (this.from === null) {
+      this.start = null;
+    }
+    if (this.year !== null) {
+      this.yearValue = this.year;
+    }
+    if (this.month) {
+      this.monthValue = this.month;
+    }
+  }
+  componentWillRender() {
+    this.calculateCalendar();
+  }
+  /**
+   * Get the current DateTime
+   */
+  async getCurrentDate() {
+    var _a, _b;
+    return {
+      start: (_a = this.start) === null || _a === void 0 ? void 0 : _a.toFormat(this.format),
+      end: (_b = this.end) === null || _b === void 0 ? void 0 : _b.toFormat(this.format),
+    };
+  }
+  render() {
+    return (h(Host, null, h("ix-date-time-card", { individual: this.individual, corners: this.corners }, h("div", { class: "header", slot: "header" }, h("ix-icon-button", { onClick: () => this.changeMonth(-1), ghost: true, icon: 'chevron-left', variant: "primary", class: "arrows" }), h("div", { class: "selector" }, h("ix-button", { ghost: true, ref: (ref) => (this.dropdownButtonRef = ref) }, h("span", { class: "fontSize capitalize" }, this.monthNames[this.monthValue - 1], " ", this.yearValue)), h("ix-dropdown", { class: "dropdown", trigger: this.dropdownButtonRef, placement: "bottom-start" }, h("div", { class: "wrapper" }, h("div", { class: "overflow", onScroll: () => this.infiniteScrollYears(), ref: (ref) => (this.yearContainerRef = ref) }, this.years.map((year) => (h("div", { key: year, class: { arrowYear: true }, onClick: (event) => this.selectTempYear(event, year) }, h("ix-icon", { class: {
+        hidden: this.tempYear !== year,
+        arrowPosition: true,
+      }, name: 'chevron-right', size: "12" }), h("div", { style: { 'min-width': 'max-content' } }, `${year}`))))), h("div", { class: "overflow" }, this.monthNames.map((month, index) => (h("div", { key: month, class: {
+        arrowYear: true,
+        selected: this.tempMonth - 1 === index,
+      }, onClick: () => this.selectMonth((index + 1)) }, h("ix-icon", { class: {
+        hidden: this.tempMonth - 1 !== index,
+        checkPosition: true,
+      }, name: 'single-check', size: "16" }), h("div", null, h("span", { class: { capitalize: true, monthMargin: true } }, `${month} ${this.tempYear}`))))))))), h("ix-icon-button", { onClick: () => this.changeMonth(1), ghost: true, icon: 'chevron-right', variant: "primary", class: "arrows" })), h("div", { class: "grid" }, h("div", { class: "calendar-item week-day" }), this.dayNames.map((name) => (h("div", { key: name, class: "calendar-item week-day" }, name.slice(0, 3)))), this.calendar.map((week) => {
+      return (h(Fragment, null, h("div", { class: "calendar-item week-number" }, week[0]), week[1].map((day) => (h("div", { key: day, class: this.getDayClasses(day), onClick: () => this.selectDay(day) }, day)))));
+    })), h("div", { class: { button: true, hidden: !this.individual || !this.range } }, h("ix-button", { onClick: () => this.onDone() }, this.textSelectDate)))));
+  }
+  static get style() { return datePickerCss; }
+}, [1, "ix-date-picker", {
+    "format": [1],
+    "range": [4],
+    "individual": [4],
+    "corners": [1],
+    "from": [1],
+    "to": [1],
+    "minDate": [1, "min-date"],
+    "maxDate": [1, "max-date"],
+    "eventDelimiter": [1, "event-delimiter"],
+    "textSelectDate": [1, "text-select-date"],
+    "yearValue": [32],
+    "today": [32],
+    "monthValue": [32],
+    "calendar": [32],
+    "years": [32],
+    "tempYear": [32],
+    "tempMonth": [32],
+    "start": [32],
+    "end": [32],
+    "dropdownButtonRef": [32],
+    "yearContainerRef": [32],
+    "getCurrentDate": [64]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-date-picker", "ix-button", "ix-date-time-card", "ix-dropdown", "ix-icon-button", "ix-spinner"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-date-picker":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DatePicker);
+      }
+      break;
+    case "ix-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "ix-date-time-card":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "ix-dropdown":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "ix-icon-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "ix-spinner":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { DatePicker as D, defineCustomElement as d };
+
+//# sourceMappingURL=date-picker.js.map