@siemens/ix 0.0.0-pr-1373-20240705054533 → 0.0.0-pr-1522-20241022123832

package/components/card.js

@@ -1,6 +1,6 @@
 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}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}: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}:host(.card-insight:hover){--ix-card-background:var(--theme-color-ghost--hover)}:host(.card-notification:hover){--ix-card-background:var(--theme-color-component-1--hover)}:host(.card-alarm:hover){--ix-card-background:var(--theme-color-alarm--hover)}:host(.card-critical:hover){--ix-card-background:var(--theme-color-critical--hover)}:host(.card-warning:hover){--ix-card-background:var(--theme-color-warning--hover)}:host(.card-success:hover){--ix-card-background:var(--theme-color-success--hover)}:host(.card-info:hover){--ix-card-background:var(--theme-color-info--hover)}:host(.card-neutral:hover){--ix-card-background:var(--theme-color-neutral--hover)}:host(.card-primary:hover){--ix-card-background:var(--theme-color-primary--hover)}:host(.card-insight:active){--ix-card-background:var(--theme-color-ghost--active)}:host(.card-notification:active){--ix-card-background:var(--theme-color-component-1--active)}:host(.card-alarm:active){--ix-card-background:var(--theme-color-alarm--active)}:host(.card-critical:active){--ix-card-background:var(--theme-color-critical--active)}:host(.card-warning:active){--ix-card-background:var(--theme-color-warning--active)}:host(.card-success:active){--ix-card-background:var(--theme-color-success--active)}:host(.card-info:active){--ix-card-background:var(--theme-color-info--active)}:host(.card-neutral:active){--ix-card-background:var(--theme-color-neutral--active)}:host(.card-primary:active){--ix-card-background:var(--theme-color-primary--active)}:host(.selected){--ix-card-border-color:var(--theme-color-dynamic)}:host(.selected.card-insight){--ix-card-background:var(--theme-color-ghost--selected)}:host(.selected.card-notification){--ix-card-background:var(--theme-color-ghost--selected)}:host(.selected.card-alarm){--ix-card-background:var(--theme-color-alarm--active)}:host(.selected.card-critical){--ix-card-background:var(--theme-color-critical--active)}:host(.selected.card-warning){--ix-card-background:var(--theme-color-warning--active)}:host(.selected.card-success){--ix-card-background:var(--theme-color-success--active)}:host(.selected.card-info){--ix-card-background:var(--theme-color-info--active)}:host(.selected.card-neutral){--ix-card-background:var(--theme-color-neutral--active)}:host(.selected.card-primary){--ix-card-background:var(--theme-color-primary--active)}";
+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}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}: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),:host(.card-outline){--ix-card-background:transparent;--ix-card-border-color:var(--theme-color-soft-bdr)}:host(.card-notification),:host(.card-filled){--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}:host(.card-insight:hover){--ix-card-background:var(--theme-color-ghost--hover)}:host(.card-notification:hover){--ix-card-background:var(--theme-color-component-1--hover)}:host(.card-alarm:hover){--ix-card-background:var(--theme-color-alarm--hover)}:host(.card-critical:hover){--ix-card-background:var(--theme-color-critical--hover)}:host(.card-warning:hover){--ix-card-background:var(--theme-color-warning--hover)}:host(.card-success:hover){--ix-card-background:var(--theme-color-success--hover)}:host(.card-info:hover){--ix-card-background:var(--theme-color-info--hover)}:host(.card-neutral:hover){--ix-card-background:var(--theme-color-neutral--hover)}:host(.card-primary:hover){--ix-card-background:var(--theme-color-primary--hover)}:host(.card-insight:active){--ix-card-background:var(--theme-color-ghost--active)}:host(.card-notification:active){--ix-card-background:var(--theme-color-component-1--active)}:host(.card-alarm:active){--ix-card-background:var(--theme-color-alarm--active)}:host(.card-critical:active){--ix-card-background:var(--theme-color-critical--active)}:host(.card-warning:active){--ix-card-background:var(--theme-color-warning--active)}:host(.card-success:active){--ix-card-background:var(--theme-color-success--active)}:host(.card-info:active){--ix-card-background:var(--theme-color-info--active)}:host(.card-neutral:active){--ix-card-background:var(--theme-color-neutral--active)}:host(.card-primary:active){--ix-card-background:var(--theme-color-primary--active)}:host(.selected){--ix-card-border-color:var(--theme-color-dynamic)}:host(.selected.card-insight){--ix-card-background:var(--theme-color-ghost--selected)}:host(.selected.card-notification){--ix-card-background:var(--theme-color-ghost--selected)}:host(.selected.card-alarm){--ix-card-background:var(--theme-color-alarm--active)}:host(.selected.card-critical){--ix-card-background:var(--theme-color-critical--active)}:host(.selected.card-warning){--ix-card-background:var(--theme-color-warning--active)}:host(.selected.card-success){--ix-card-background:var(--theme-color-success--active)}:host(.selected.card-info){--ix-card-background:var(--theme-color-info--active)}:host(.selected.card-neutral){--ix-card-background:var(--theme-color-neutral--active)}:host(.selected.card-primary){--ix-card-background:var(--theme-color-primary--active)}";
 const IxCardStyle0 = cardCss;
 
 const Card = /*@__PURE__*/ proxyCustomElement(class Card extends HTMLElement {
@@ -9,13 +9,13 @@ const Card = /*@__PURE__*/ proxyCustomElement(class Card extends HTMLElement {
         this.__registerHost();
         this.__attachShadow();
         this.variant = 'insight';
-        this.selected = undefined;
+        this.selected = false;
     }
     render() {
-        return (h(Host, { key: 'f91df8c114ec01e95ae0eba29c8acf3cacbdec25', class: {
+        return (h(Host, { key: '47a06ae7be967b6077ec9851b22724f39f08bdb5', class: {
                 selected: this.selected,
                 [`card-${this.variant}`]: true,
-            } }, h("div", { key: '24c775b7ae7b2940df9e101b702b91a17a0f6749', class: "card-content" }, h("slot", { key: '57bfc8eb49985aae6aff8ea277475b2012ac8ba2' })), h("div", { key: '8eac7eefd8020827e0ebf38be231de2c7b934797', class: "card-footer" }, h("slot", { key: '207dc0b0ce6279ecb9dfda76e3d03a145a5ff168', name: "card-accordion" }))));
+            } }, h("div", { key: '3bd791183108512f4f150e4223c6b3487104d9f6', class: "card-content" }, h("slot", { key: '7b500f330a7c751385deadaabf9f0a4fbaff7444' })), h("div", { key: '700082bfb35c5ecb56d70502500112e1232f2afb', class: "card-footer" }, h("slot", { key: 'bd156f9ac6728f9cf5a92bb8a454083a50a40cce', name: "card-accordion" }))));
     }
     get hostElement() { return this; }
     static get style() { return IxCardStyle0; }

package/components/card.js.map

@@ -1 +1 @@
-{"file":"card.js","mappings":";;AAAA,MAAM,OAAO,GAAG,wmJAAwmJ,CAAC;AACznJ,qBAAe,OAAO;;MCoBT,IAAI;;;;;uBAMgB,SAAS;;;IAOxC,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,CAAC,QAAQ,IAAI,CAAC,OAAO,EAAE,GAAG,IAAI;aAC/B,IAED,4DAAK,KAAK,EAAC,cAAc,IACvB,8DAAa,CACT,EACN,4DAAK,KAAK,EAAC,aAAa,IACtB,6DAAM,IAAI,EAAC,gBAAgB,GAAQ,CAC/B,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;","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\n// ### Hover ###\n\n:host(.card-insight:hover) {\n  --ix-card-background: var(--theme-color-ghost--hover);\n}\n\n:host(.card-notification:hover) {\n  --ix-card-background: var(--theme-color-component-1--hover);\n}\n\n:host(.card-alarm:hover) {\n  --ix-card-background: var(--theme-color-alarm--hover);\n}\n\n:host(.card-critical:hover) {\n  --ix-card-background: var(--theme-color-critical--hover);\n}\n\n:host(.card-warning:hover) {\n  --ix-card-background: var(--theme-color-warning--hover);\n}\n\n:host(.card-success:hover) {\n  --ix-card-background: var(--theme-color-success--hover);\n}\n\n:host(.card-info:hover) {\n  --ix-card-background: var(--theme-color-info--hover);\n}\n\n:host(.card-neutral:hover) {\n  --ix-card-background: var(--theme-color-neutral--hover);\n}\n\n:host(.card-primary:hover) {\n  --ix-card-background: var(--theme-color-primary--hover);\n}\n\n// ### Active ###\n\n:host(.card-insight:active) {\n  --ix-card-background: var(--theme-color-ghost--active);\n}\n\n:host(.card-notification:active) {\n  --ix-card-background: var(--theme-color-component-1--active);\n}\n\n:host(.card-alarm:active) {\n  --ix-card-background: var(--theme-color-alarm--active);\n}\n\n:host(.card-critical:active) {\n  --ix-card-background: var(--theme-color-critical--active);\n}\n\n:host(.card-warning:active) {\n  --ix-card-background: var(--theme-color-warning--active);\n}\n\n:host(.card-success:active) {\n  --ix-card-background: var(--theme-color-success--active);\n}\n\n:host(.card-info:active) {\n  --ix-card-background: var(--theme-color-info--active);\n}\n\n:host(.card-neutral:active) {\n  --ix-card-background: var(--theme-color-neutral--active);\n}\n\n:host(.card-primary:active) {\n  --ix-card-background: var(--theme-color-primary--active);\n}\n\n// ### Selected ###\n\n:host(.selected) {\n  --ix-card-border-color: var(--theme-color-dynamic);\n}\n\n:host(.selected.card-insight) {\n  --ix-card-background: var(--theme-color-ghost--selected);\n}\n\n:host(.selected.card-notification) {\n  --ix-card-background: var(--theme-color-ghost--selected);\n}\n\n:host(.selected.card-alarm) {\n  --ix-card-background: var(--theme-color-alarm--active);\n}\n\n:host(.selected.card-critical) {\n  --ix-card-background: var(--theme-color-critical--active);\n}\n\n:host(.selected.card-warning) {\n  --ix-card-background: var(--theme-color-warning--active);\n}\n\n:host(.selected.card-success) {\n  --ix-card-background: var(--theme-color-success--active);\n}\n\n:host(.selected.card-info) {\n  --ix-card-background: var(--theme-color-info--active);\n}\n\n:host(.selected.card-neutral) {\n  --ix-card-background: var(--theme-color-neutral--active);\n}\n\n:host(.selected.card-primary) {\n  --ix-card-background: var(--theme-color-primary--active);\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  /**\n   * @since 2.1.0\n   */\n  @Prop() selected: boolean;\n\n  render() {\n    return (\n      <Host\n        class={{\n          selected: this.selected,\n          [`card-${this.variant}`]: true,\n        }}\n      >\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}
+{"file":"card.js","mappings":";;AAAA,MAAM,OAAO,GAAG,ipJAAipJ,CAAC;AAClqJ,qBAAe,OAAO;;MCuBT,IAAI;;;;;uBAOgB,SAAS;wBAKZ,KAAK;;IAEjC,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,CAAC,QAAQ,IAAI,CAAC,OAAO,EAAE,GAAG,IAAI;aAC/B,IAED,4DAAK,KAAK,EAAC,cAAc,IACvB,8DAAa,CACT,EACN,4DAAK,KAAK,EAAC,aAAa,IACtB,6DAAM,IAAI,EAAC,gBAAgB,GAAQ,CAC/B,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/card/card.scss?tag=ix-card&encapsulation=shadow","src/components/card/card.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @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), :host(.card-outline) {\n  --ix-card-background: transparent;\n  --ix-card-border-color: var(--theme-color-soft-bdr);\n}\n\n:host(.card-notification), :host(.card-filled) {\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\n// ### Hover ###\n\n:host(.card-insight:hover) {\n  --ix-card-background: var(--theme-color-ghost--hover);\n}\n\n:host(.card-notification:hover) {\n  --ix-card-background: var(--theme-color-component-1--hover);\n}\n\n:host(.card-alarm:hover) {\n  --ix-card-background: var(--theme-color-alarm--hover);\n}\n\n:host(.card-critical:hover) {\n  --ix-card-background: var(--theme-color-critical--hover);\n}\n\n:host(.card-warning:hover) {\n  --ix-card-background: var(--theme-color-warning--hover);\n}\n\n:host(.card-success:hover) {\n  --ix-card-background: var(--theme-color-success--hover);\n}\n\n:host(.card-info:hover) {\n  --ix-card-background: var(--theme-color-info--hover);\n}\n\n:host(.card-neutral:hover) {\n  --ix-card-background: var(--theme-color-neutral--hover);\n}\n\n:host(.card-primary:hover) {\n  --ix-card-background: var(--theme-color-primary--hover);\n}\n\n// ### Active ###\n\n:host(.card-insight:active) {\n  --ix-card-background: var(--theme-color-ghost--active);\n}\n\n:host(.card-notification:active) {\n  --ix-card-background: var(--theme-color-component-1--active);\n}\n\n:host(.card-alarm:active) {\n  --ix-card-background: var(--theme-color-alarm--active);\n}\n\n:host(.card-critical:active) {\n  --ix-card-background: var(--theme-color-critical--active);\n}\n\n:host(.card-warning:active) {\n  --ix-card-background: var(--theme-color-warning--active);\n}\n\n:host(.card-success:active) {\n  --ix-card-background: var(--theme-color-success--active);\n}\n\n:host(.card-info:active) {\n  --ix-card-background: var(--theme-color-info--active);\n}\n\n:host(.card-neutral:active) {\n  --ix-card-background: var(--theme-color-neutral--active);\n}\n\n:host(.card-primary:active) {\n  --ix-card-background: var(--theme-color-primary--active);\n}\n\n// ### Selected ###\n\n:host(.selected) {\n  --ix-card-border-color: var(--theme-color-dynamic);\n}\n\n:host(.selected.card-insight) {\n  --ix-card-background: var(--theme-color-ghost--selected);\n}\n\n:host(.selected.card-notification) {\n  --ix-card-background: var(--theme-color-ghost--selected);\n}\n\n:host(.selected.card-alarm) {\n  --ix-card-background: var(--theme-color-alarm--active);\n}\n\n:host(.selected.card-critical) {\n  --ix-card-background: var(--theme-color-critical--active);\n}\n\n:host(.selected.card-warning) {\n  --ix-card-background: var(--theme-color-warning--active);\n}\n\n:host(.selected.card-success) {\n  --ix-card-background: var(--theme-color-success--active);\n}\n\n:host(.selected.card-info) {\n  --ix-card-background: var(--theme-color-info--active);\n}\n\n:host(.selected.card-neutral) {\n  --ix-card-background: var(--theme-color-neutral--active);\n}\n\n:host(.selected.card-primary) {\n  --ix-card-background: var(--theme-color-primary--active);\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\n//TODO(IX-1601): Remove insight, notification in 3.0\nexport type CardVariant =\n  | 'insight'\n  | 'notification'\n  | 'alarm'\n  | 'critical'\n  | 'warning'\n  | 'info'\n  | 'neutral'\n  | 'success'\n  | 'primary'\n  | 'outline'\n  | 'filled';\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   * @deprecated variant insight and notification will be removed in 3.0. Use 'outline' or 'filled' instead.\n   */\n  @Prop() variant: CardVariant = 'insight';\n\n  /**\n   * @since 2.1.0\n   */\n  @Prop() selected: boolean = false;\n\n  render() {\n    return (\n      <Host\n        class={{\n          selected: this.selected,\n          [`card-${this.variant}`]: true,\n        }}\n      >\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/col.js

@@ -65,7 +65,7 @@ const Col = /*@__PURE__*/ proxyCustomElement(class Col extends HTMLElement {
         };
     }
     render() {
-        return (h(Host, { key: '7cbf750f0768a0a1db65aa2651605c89f82ce604', style: Object.assign({}, this.getColumnSizeStyling()) }, h("slot", { key: 'd83749089de332574097a8299c265d45b1fd8da7' })));
+        return (h(Host, { key: 'b1d777df4ddbe04b4c49206dedead245bcdd307a', style: Object.assign({}, this.getColumnSizeStyling()) }, h("slot", { key: '80c027d13d22c89b42ce2f117ef5946934fc398e' })));
     }
     static get style() { return IxColStyle0; }
 }, [1, "ix-col", {

package/components/col.js.map

@@ -1 +1 @@
-{"file":"col.js","mappings":";;;AAAA,MAAM,MAAM,GAAG,q4BAAq4B,CAAC;AACr5B,oBAAe,MAAM;;MCoCR,GAAG;;;;;;;;;;IAwBd,QAAQ;QACN,WAAW,CAAC,IAAI,CAAC,CAAC;KACnB;IAEO,OAAO,CAAC,UAA0B;QACxC,IAAI,UAAU,KAAK,EAAE,EAAE;YACrB,OAAO,IAAI,CAAC,IAAI,CAAC;SAClB;QAED,IAAI,UAAU,KAAK,IAAI,EAAE;YACvB,OAAO,IAAI,CAAC,MAAM,CAAC;SACpB;QAED,IAAI,UAAU,KAAK,IAAI,EAAE;YACvB,OAAO,IAAI,CAAC,MAAM,CAAC;SACpB;QAED,IAAI,UAAU,KAAK,IAAI,EAAE;YACvB,OAAO,IAAI,CAAC,MAAM,CAAC;SACpB;KACF;IAEO,aAAa;QACnB,IAAI,IAAgB,CAAC;QACrB,GAAG,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,UAAU;YACjC,MAAM,kBAAkB,GACtB,UAAU,KAAK,EAAE,GAAG,eAAe,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC;YAEzD,IAAI,CAAC,kBAAkB,EAAE;gBACvB,OAAO;aACR;YAED,MAAM,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;YAE7C,IAAI,WAAW,EAAE;gBACf,IAAI,GAAG,WAAW,CAAC;aACpB;SACF,CAAC,CAAC;QAEH,OAAO,IAAI,CAAC;KACb;IAEO,oBAAoB;QAC1B,MAAM,IAAI,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;QAElC,IAAI,CAAC,IAAI,EAAE;YACT,OAAO;SACR;QAED,IAAI,IAAI,KAAK,MAAM,EAAE;YACnB,OAAO;gBACL,IAAI,EAAE,UAAU;gBAChB,KAAK,EAAE,MAAM;gBACb,WAAW,EAAE,MAAM;aACpB,CAAC;SACH;QAED,MAAM,OAAO,GAAG,aAAa,IAAI,2CAA2C,CAAC;QAE7E,OAAO;YACL,IAAI,EAAE,OAAO,OAAO,EAAE;YACtB,KAAK,EAAE,GAAG,OAAO,EAAE;YACnB,WAAW,EAAE,GAAG,OAAO,EAAE;SAC1B,CAAC;KACH;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,oBACA,IAAI,CAAC,oBAAoB,EAAE,KAGhC,8DAAa,CACR,EACP;KACH;;;;;;;;AAnGM,eAAW,GAAqB,CAAC,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAA1C,CAA4C;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/col/col.scss?tag=ix-col&encapsulation=shadow","src/components/col/col.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  position: relative;\n  flex-basis: 0;\n  flex-grow: 1;\n  width: 100%;\n  max-width: 100%;\n  min-height: 1px;\n\n  padding: calc(var(--ix-layout-grid-gutter) * 0.5);\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, forceUpdate, h, Host, Listen, Prop } from '@stencil/core';\nimport { Breakpoint, matchBreakpoint } from '../utils/breakpoints';\n\ntype GridBreakpoint = Breakpoint | '';\n\nexport type ColumnSize =\n  | '1'\n  | '2'\n  | '3'\n  | '4'\n  | '5'\n  | '6'\n  | '7'\n  | '8'\n  | '9'\n  | '10'\n  | '11'\n  | '12'\n  | 'auto';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-col',\n  styleUrl: 'col.scss',\n  shadow: true,\n})\nexport class Col {\n  static Breakpoints: GridBreakpoint[] = ['', 'sm', 'md', 'lg'];\n\n  /**\n   * Size of the column\n   */\n  @Prop() size?: ColumnSize;\n\n  /**\n   * Size of the column for sm screens\n   */\n  @Prop() sizeSm?: ColumnSize;\n\n  /**\n   * Size of the column for md screens\n   */\n  @Prop() sizeMd?: ColumnSize;\n\n  /**\n   * Size of the column for lg screens\n   */\n  @Prop() sizeLg?: ColumnSize;\n\n  @Listen('resize', { target: 'window' })\n  onResize() {\n    forceUpdate(this);\n  }\n\n  private getSize(breakpoint: GridBreakpoint) {\n    if (breakpoint === '') {\n      return this.size;\n    }\n\n    if (breakpoint === 'sm') {\n      return this.sizeSm;\n    }\n\n    if (breakpoint === 'md') {\n      return this.sizeMd;\n    }\n\n    if (breakpoint === 'lg') {\n      return this.sizeLg;\n    }\n  }\n\n  private getColumnSize() {\n    let size: ColumnSize;\n    Col.Breakpoints.forEach((breakpoint) => {\n      const isMediaQueryActive =\n        breakpoint !== '' ? matchBreakpoint(breakpoint) : true;\n\n      if (!isMediaQueryActive) {\n        return;\n      }\n\n      const currentSize = this.getSize(breakpoint);\n\n      if (currentSize) {\n        size = currentSize;\n      }\n    });\n\n    return size;\n  }\n\n  private getColumnSizeStyling() {\n    const size = this.getColumnSize();\n\n    if (!size) {\n      return;\n    }\n\n    if (size === 'auto') {\n      return {\n        flex: '0 0 auto',\n        width: 'auto',\n        'max-width': 'auto',\n      };\n    }\n\n    const colSize = `calc(calc(${size} / var(--ix-layout-grid-columns)) * 100%)`;\n\n    return {\n      flex: `0 0 ${colSize}`,\n      width: `${colSize}`,\n      'max-width': `${colSize}`,\n    };\n  }\n\n  render() {\n    return (\n      <Host\n        style={{\n          ...this.getColumnSizeStyling(),\n        }}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"col.js","mappings":";;;AAAA,MAAM,MAAM,GAAG,q4BAAq4B,CAAC;AACr5B,oBAAe,MAAM;;MCoCR,GAAG;;;;;;;;;;IAwBd,QAAQ;QACN,WAAW,CAAC,IAAI,CAAC,CAAC;KACnB;IAEO,OAAO,CAAC,UAA0B;QACxC,IAAI,UAAU,KAAK,EAAE,EAAE;YACrB,OAAO,IAAI,CAAC,IAAI,CAAC;SAClB;QAED,IAAI,UAAU,KAAK,IAAI,EAAE;YACvB,OAAO,IAAI,CAAC,MAAM,CAAC;SACpB;QAED,IAAI,UAAU,KAAK,IAAI,EAAE;YACvB,OAAO,IAAI,CAAC,MAAM,CAAC;SACpB;QAED,IAAI,UAAU,KAAK,IAAI,EAAE;YACvB,OAAO,IAAI,CAAC,MAAM,CAAC;SACpB;KACF;IAEO,aAAa;QACnB,IAAI,IAA4B,CAAC;QACjC,GAAG,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,UAAU;YACjC,MAAM,kBAAkB,GACtB,UAAU,KAAK,EAAE,GAAG,eAAe,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC;YAEzD,IAAI,CAAC,kBAAkB,EAAE;gBACvB,OAAO;aACR;YAED,MAAM,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;YAE7C,IAAI,WAAW,EAAE;gBACf,IAAI,GAAG,WAAW,CAAC;aACpB;SACF,CAAC,CAAC;QAEH,OAAO,IAAI,CAAC;KACb;IAEO,oBAAoB;QAC1B,MAAM,IAAI,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;QAElC,IAAI,CAAC,IAAI,EAAE;YACT,OAAO;SACR;QAED,IAAI,IAAI,KAAK,MAAM,EAAE;YACnB,OAAO;gBACL,IAAI,EAAE,UAAU;gBAChB,KAAK,EAAE,MAAM;gBACb,WAAW,EAAE,MAAM;aACpB,CAAC;SACH;QAED,MAAM,OAAO,GAAG,aAAa,IAAI,2CAA2C,CAAC;QAE7E,OAAO;YACL,IAAI,EAAE,OAAO,OAAO,EAAE;YACtB,KAAK,EAAE,GAAG,OAAO,EAAE;YACnB,WAAW,EAAE,GAAG,OAAO,EAAE;SAC1B,CAAC;KACH;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,oBACA,IAAI,CAAC,oBAAoB,EAAE,KAGhC,8DAAa,CACR,EACP;KACH;;;;;;;;AAnGM,eAAW,GAAqB,CAAC,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAA1C,CAA4C;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/col/col.scss?tag=ix-col&encapsulation=shadow","src/components/col/col.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  position: relative;\n  flex-basis: 0;\n  flex-grow: 1;\n  width: 100%;\n  max-width: 100%;\n  min-height: 1px;\n\n  padding: calc(var(--ix-layout-grid-gutter) * 0.5);\n}\n","/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, 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(): ColumnSize | undefined {\n    let size: ColumnSize | undefined;\n    Col.Breakpoints.forEach((breakpoint) => {\n      const isMediaQueryActive =\n        breakpoint !== '' ? matchBreakpoint(breakpoint) : true;\n\n      if (!isMediaQueryActive) {\n        return;\n      }\n\n      const currentSize = this.getSize(breakpoint);\n\n      if (currentSize) {\n        size = currentSize;\n      }\n    });\n\n    return size;\n  }\n\n  private getColumnSizeStyling() {\n    const size = this.getColumnSize();\n\n    if (!size) {\n      return;\n    }\n\n    if (size === 'auto') {\n      return {\n        flex: '0 0 auto',\n        width: 'auto',\n        'max-width': 'auto',\n      };\n    }\n\n    const colSize = `calc(calc(${size} / var(--ix-layout-grid-columns)) * 100%)`;\n\n    return {\n      flex: `0 0 ${colSize}`,\n      width: `${colSize}`,\n      'max-width': `${colSize}`,\n    };\n  }\n\n  render() {\n    return (\n      <Host\n        style={{\n          ...this.getColumnSizeStyling(),\n        }}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/context.js

@@ -1,7 +1,7 @@
 import { T as TypedEvent } from './typed-event.js';
 
 /*
- * SPDX-FileCopyrightText: 2023 Siemens AG
+ * SPDX-FileCopyrightText: 2024 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -43,7 +43,9 @@ function useContextConsumer(hostElement, context, onContextReceived, subscribe)
     }, subscribe));
     return {
         unsubscribe: () => {
-            _unsubscribe();
+            if (_unsubscribe) {
+                _unsubscribe();
+            }
         },
     };
 }
@@ -51,7 +53,8 @@ function useContextProvider(hostElement, context, contextPayload) {
     const requestContext = new TypedEvent();
     const updateContext = new TypedEvent();
     const requests = new Set();
-    hostElement.addEventListener('context-request', (requestContextEvent) => {
+    hostElement.addEventListener('context-request', (event) => {
+        const requestContextEvent = event;
         if ((requestContextEvent === null || requestContextEvent === void 0 ? void 0 : requestContextEvent.context.name) !== context.name) {
             return;
         }

package/components/context.js.map

@@ -1 +1 @@
-{"file":"context.js","mappings":";;AAAA;;;;;;;;AA+BA;;;SAGgB,aAAa,CAC3B,IAAY,EACZ,YAAgB;IAEhB,OAAO;QACL,IAAI;QACJ,YAAY;KACb,CAAC;AACJ,CAAC;AAWD;;;;;;;;;;MAUa,YAAuC,SAAQ,KAAK;IAC/D,YACkB,OAAU,EACV,QAAyC,EACzC,SAAmB;QAEnC,KAAK,CAAC,iBAAiB,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;QAJ5C,YAAO,GAAP,OAAO,CAAG;QACV,aAAQ,GAAR,QAAQ,CAAiC;QACzC,cAAS,GAAT,SAAS,CAAU;KAGpC;CACF;SAgBe,kBAAkB,CAIhC,WAAc,EACd,OAAU,EACV,iBAGS,EACT,SAAmB;IAEnB,IAAI,YAAwB,CAAC;IAC7B,WAAW,CAAC,aAAa,CACvB,IAAI,YAAY,CACd,OAAO,EACP,CAAC,GAAG,EAAE,KAAK;QACT,iBAAiB,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;QAC9B,YAAY,GAAG,KAAK,CAAC;KACtB,EACD,SAAS,CACV,CACF,CAAC;IAEF,OAAO;QACL,WAAW,EAAE;YACX,YAAY,EAAE,CAAC;SAChB;KACF,CAAC;AACJ,CAAC;SAKe,kBAAkB,CAKhC,WAAc,EACd,OAAU,EACV,cAA+B;IAE/B,MAAM,cAAc,GAAG,IAAI,UAAU,EAAmB,CAAC;IACzD,MAAM,aAAa,GAAG,IAAI,UAAU,EAAkB,CAAC;IAEvD,MAAM,QAAQ,GAAG,IAAI,GAAG,EAAgC,CAAC;IAEzD,WAAW,CAAC,gBAAgB,CAC1B,iBAAiB,EACjB,CAAC,mBAAoC;QACnC,IAAI,CAAA,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,OAAO,CAAC,IAAI,MAAK,OAAO,CAAC,IAAI,EAAE;YACtD,OAAO;SACR;QAED,mBAAmB,CAAC,eAAe,EAAE,CAAC;QAEtC,IAAI,mBAAmB,CAAC,SAAS,EAAE;YACjC,QAAQ,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;SACnC;QACD,cAAc,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;QAEzC,IAAI,cAAc,EAAE;YAClB,mBAAmB,CAAC,QAAQ,CAAC,cAAc,EAAE;gBAC3C,QAAQ,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC;aACtC,CAAC,CAAC;SACJ;KACF,CACF,CAAC;IAEF,aAAa,CAAC,EAAE,CAAC,CAAC,OAAuB;QACvC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,KACjB,CAAC,CAAC,QAAQ,CAAC,OAAO,EAAE;YAClB,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;SACpB,CAAC,CACH,CAAC;KACH,CAAC,CAAC;IAEH,OAAO;QACL,IAAI,EAAE,CAAC,OAAuB;YAC5B,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;SAC7B;KACF,CAAC;AACJ;;AC1KA;;;;;;;;MAWa,aAAa,GAAG,CAAC,OAAgB;IAC5C,MAAM,WAAW,GAAG,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;IAC/C,OAAO,WAAW,CAAC;AACrB,EAAE;MAuBW,wBAAwB,GAAG,aAAa,CAKlD,4BAA4B,EAAE;IAC/B,UAAU,EAAE,KAAK;IACjB,IAAI,EAAE,IAAI;IACV,OAAO,EAAE,KAAK;CACf;;;;","names":[],"sources":["src/components/utils/context.ts","src/components/utils/application-layout/context.ts"],"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\nimport { TypedEvent } from './typed-event';\n\n/**\n * A Context object defines an optional initial value for a Context, as well as a name identifier for debugging purposes.\n */\nexport type Context<T> = {\n  name: string;\n  initialValue?: T;\n};\n\n/**\n * An unknown context type\n */\nexport type UnknownContext = Context<unknown>;\n\n/**\n * A helper type which can extract a Context value type from a Context type\n */\nexport type ContextType<T extends UnknownContext> = T extends Context<infer Y>\n  ? Y\n  : never;\n\n/**\n * A function which creates a Context value object\n */\nexport function createContext<T>(\n  name: string,\n  initialValue?: T\n): Readonly<Context<T>> {\n  return {\n    name,\n    initialValue,\n  };\n}\n\n/**\n * A callback which is provided by a context requester and is called with the value satisfying the request.\n * This callback can be called multiple times by context providers as the requested value is changed.\n */\nexport type ContextCallback<ValueType> = (\n  value: ValueType,\n  unsubscribe?: () => void\n) => void;\n\n/**\n * An event fired by a context requester to signal it desires a named context.\n *\n * A provider should inspect the `context` property of the event to determine if it has a value that can\n * satisfy the request, calling the `callback` with the requested value if so.\n *\n * If the requested context event contains a truthy `subscribe` value, then a provider can call the callback\n * multiple times if the value is changed, if this is the case the provider should pass an `unsubscribe`\n * function to the callback which requesters can invoke to indicate they no longer wish to receive these updates.\n */\nexport class ContextEvent<T extends UnknownContext> extends Event {\n  public constructor(\n    public readonly context: T,\n    public readonly callback: ContextCallback<ContextType<T>>,\n    public readonly subscribe?: boolean\n  ) {\n    super('context-request', { bubbles: true, composed: true });\n  }\n}\n\ndeclare global {\n  interface HTMLElementEventMap {\n    /**\n     * A 'context-request' event can be emitted by any element which desires\n     * a context value to be injected by an external provider.\n     */\n    'context-request': ContextEvent<UnknownContext>;\n  }\n}\n\nexport type ContextConsumerSubscription = {\n  unsubscribe: () => void;\n};\n\nexport function useContextConsumer<\n  T extends HTMLElement,\n  C extends UnknownContext,\n>(\n  hostElement: T,\n  context: C,\n  onContextReceived: (\n    context: ContextType<C>,\n    unsubscribe?: () => void\n  ) => void,\n  subscribe?: boolean\n): ContextConsumerSubscription {\n  let _unsubscribe: () => void;\n  hostElement.dispatchEvent(\n    new ContextEvent(\n      context,\n      (ctx, unSub) => {\n        onContextReceived(ctx, unSub);\n        _unsubscribe = unSub;\n      },\n      subscribe\n    )\n  );\n\n  return {\n    unsubscribe: () => {\n      _unsubscribe();\n    },\n  };\n}\nexport type ContextProvider<C extends Context<{}> = Context<any>> = {\n  emit: (context: ContextType<C>) => void;\n};\n\nexport function useContextProvider<\n  X extends {},\n  C extends Context<X>,\n  T extends HTMLElement = HTMLElement,\n>(\n  hostElement: T,\n  context: C,\n  contextPayload?: ContextType<C>\n): ContextProvider<C> {\n  const requestContext = new TypedEvent<ContextEvent<C>>();\n  const updateContext = new TypedEvent<ContextType<C>>();\n\n  const requests = new Set<ContextEvent<UnknownContext>>();\n\n  hostElement.addEventListener(\n    'context-request',\n    (requestContextEvent: ContextEvent<C>) => {\n      if (requestContextEvent?.context.name !== context.name) {\n        return;\n      }\n\n      requestContextEvent.stopPropagation();\n\n      if (requestContextEvent.subscribe) {\n        requests.add(requestContextEvent);\n      }\n      requestContext.emit(requestContextEvent);\n\n      if (contextPayload) {\n        requestContextEvent.callback(contextPayload, () => {\n          requests.delete(requestContextEvent);\n        });\n      }\n    }\n  );\n\n  updateContext.on((context: ContextType<C>) => {\n    requests.forEach((r) =>\n      r.callback(context, () => {\n        requests.delete(r);\n      })\n    );\n  });\n\n  return {\n    emit: (context: ContextType<C>) => {\n      updateContext.emit(context);\n    },\n  };\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { createContext } from '../context';\n\nexport const closestIxMenu = (element: Element) => {\n  const menuElement = element.closest('ix-menu');\n  return menuElement;\n};\n\nexport type AppSwitchConfigurationTarget =\n  | '_self'\n  | '_blank'\n  | '_parent'\n  | '_top'\n  | (string & {});\n\nexport type AppSwitchConfiguration = {\n  currentAppId: string;\n  apps: {\n    id: string;\n    name: string;\n    description: string;\n    url: string;\n    target: AppSwitchConfigurationTarget;\n    iconSrc: string;\n  }[];\n  i18nAppSwitch?: string;\n  i18nLoadingApps?: string;\n};\n\nexport const ApplicationLayoutContext = createContext<{\n  hideHeader: boolean;\n  host: 'basic-navigation' | 'map-navigation' | null;\n  appSwitchConfig?: AppSwitchConfiguration;\n  sidebar?: boolean;\n}>('application-layout-context', {\n  hideHeader: false,\n  host: null,\n  sidebar: false,\n});\n"],"version":3}
+{"file":"context.js","mappings":";;AAAA;;;;;;;;AA+BA;;;SAGgB,aAAa,CAC3B,IAAY,EACZ,YAAgB;IAEhB,OAAO;QACL,IAAI;QACJ,YAAY;KACb,CAAC;AACJ,CAAC;AAWD;;;;;;;;;;MAUa,YAAuC,SAAQ,KAAK;IAC/D,YACkB,OAAU,EACV,QAAyC,EACzC,SAAmB;QAEnC,KAAK,CAAC,iBAAiB,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;QAJ5C,YAAO,GAAP,OAAO,CAAG;QACV,aAAQ,GAAR,QAAQ,CAAiC;QACzC,cAAS,GAAT,SAAS,CAAU;KAGpC;CACF;SAgBe,kBAAkB,CAIhC,WAAc,EACd,OAAU,EACV,iBAGS,EACT,SAAmB;IAEnB,IAAI,YAAsC,CAAC;IAC3C,WAAW,CAAC,aAAa,CACvB,IAAI,YAAY,CACd,OAAO,EACP,CAAC,GAAG,EAAE,KAAK;QACT,iBAAiB,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;QAC9B,YAAY,GAAG,KAAK,CAAC;KACtB,EACD,SAAS,CACV,CACF,CAAC;IAEF,OAAO;QACL,WAAW,EAAE;YACX,IAAI,YAAY,EAAE;gBAChB,YAAY,EAAE,CAAC;aAChB;SACF;KACF,CAAC;AACJ,CAAC;SAKe,kBAAkB,CAKhC,WAAc,EACd,OAAU,EACV,cAA+B;IAE/B,MAAM,cAAc,GAAG,IAAI,UAAU,EAAmB,CAAC;IACzD,MAAM,aAAa,GAAG,IAAI,UAAU,EAAkB,CAAC;IAEvD,MAAM,QAAQ,GAAG,IAAI,GAAG,EAAgC,CAAC;IAEzD,WAAW,CAAC,gBAAgB,CAAC,iBAAiB,EAAE,CAAC,KAAY;QAC3D,MAAM,mBAAmB,GAAG,KAAwB,CAAC;QACrD,IAAI,CAAA,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,OAAO,CAAC,IAAI,MAAK,OAAO,CAAC,IAAI,EAAE;YACtD,OAAO;SACR;QAED,mBAAmB,CAAC,eAAe,EAAE,CAAC;QAEtC,IAAI,mBAAmB,CAAC,SAAS,EAAE;YACjC,QAAQ,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;SACnC;QACD,cAAc,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;QAEzC,IAAI,cAAc,EAAE;YAClB,mBAAmB,CAAC,QAAQ,CAAC,cAAc,EAAE;gBAC3C,QAAQ,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC;aACtC,CAAC,CAAC;SACJ;KACF,CAAC,CAAC;IAEH,aAAa,CAAC,EAAE,CAAC,CAAC,OAAuB;QACvC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,KACjB,CAAC,CAAC,QAAQ,CAAC,OAAO,EAAE;YAClB,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;SACpB,CAAC,CACH,CAAC;KACH,CAAC,CAAC;IAEH,OAAO;QACL,IAAI,EAAE,CAAC,OAAuB;YAC5B,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;SAC7B;KACF,CAAC;AACJ;;AC1KA;;;;;;;;MAWa,aAAa,GAAG,CAAC,OAAgB;IAC5C,MAAM,WAAW,GAAG,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;IAC/C,OAAO,WAAW,CAAC;AACrB,EAAE;MAuBW,wBAAwB,GAAG,aAAa,CAKlD,4BAA4B,EAAE;IAC/B,UAAU,EAAE,KAAK;IACjB,IAAI,EAAE,IAAI;IACV,OAAO,EAAE,KAAK;CACf;;;;","names":[],"sources":["src/components/utils/context.ts","src/components/utils/application-layout/context.ts"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { TypedEvent } from './typed-event';\n\n/**\n * A Context object defines an optional initial value for a Context, as well as a name identifier for debugging purposes.\n */\nexport type Context<T> = {\n  name: string;\n  initialValue?: T;\n};\n\n/**\n * An unknown context type\n */\nexport type UnknownContext = Context<unknown>;\n\n/**\n * A helper type which can extract a Context value type from a Context type\n */\nexport type ContextType<T extends UnknownContext> = T extends Context<infer Y>\n  ? Y\n  : never;\n\n/**\n * A function which creates a Context value object\n */\nexport function createContext<T>(\n  name: string,\n  initialValue?: T\n): Readonly<Context<T>> {\n  return {\n    name,\n    initialValue,\n  };\n}\n\n/**\n * A callback which is provided by a context requester and is called with the value satisfying the request.\n * This callback can be called multiple times by context providers as the requested value is changed.\n */\nexport type ContextCallback<ValueType> = (\n  value: ValueType,\n  unsubscribe?: () => void\n) => void;\n\n/**\n * An event fired by a context requester to signal it desires a named context.\n *\n * A provider should inspect the `context` property of the event to determine if it has a value that can\n * satisfy the request, calling the `callback` with the requested value if so.\n *\n * If the requested context event contains a truthy `subscribe` value, then a provider can call the callback\n * multiple times if the value is changed, if this is the case the provider should pass an `unsubscribe`\n * function to the callback which requesters can invoke to indicate they no longer wish to receive these updates.\n */\nexport class ContextEvent<T extends UnknownContext> extends Event {\n  public constructor(\n    public readonly context: T,\n    public readonly callback: ContextCallback<ContextType<T>>,\n    public readonly subscribe?: boolean\n  ) {\n    super('context-request', { bubbles: true, composed: true });\n  }\n}\n\ndeclare global {\n  interface HTMLElementEventMap {\n    /**\n     * A 'context-request' event can be emitted by any element which desires\n     * a context value to be injected by an external provider.\n     */\n    'context-request': ContextEvent<UnknownContext>;\n  }\n}\n\nexport type ContextConsumerSubscription = {\n  unsubscribe: () => void;\n};\n\nexport function useContextConsumer<\n  T extends HTMLElement,\n  C extends UnknownContext,\n>(\n  hostElement: T,\n  context: C,\n  onContextReceived: (\n    context: ContextType<C>,\n    unsubscribe?: () => void\n  ) => void,\n  subscribe?: boolean\n): ContextConsumerSubscription {\n  let _unsubscribe: (() => void) | undefined;\n  hostElement.dispatchEvent(\n    new ContextEvent(\n      context,\n      (ctx, unSub) => {\n        onContextReceived(ctx, unSub);\n        _unsubscribe = unSub;\n      },\n      subscribe\n    )\n  );\n\n  return {\n    unsubscribe: () => {\n      if (_unsubscribe) {\n        _unsubscribe();\n      }\n    },\n  };\n}\nexport type ContextProvider<C extends Context<{}> = Context<any>> = {\n  emit: (context: ContextType<C>) => void;\n};\n\nexport function useContextProvider<\n  X extends {},\n  C extends Context<X>,\n  T extends HTMLElement = HTMLElement,\n>(\n  hostElement: T,\n  context: C,\n  contextPayload?: ContextType<C>\n): ContextProvider<C> {\n  const requestContext = new TypedEvent<ContextEvent<C>>();\n  const updateContext = new TypedEvent<ContextType<C>>();\n\n  const requests = new Set<ContextEvent<UnknownContext>>();\n\n  hostElement.addEventListener('context-request', (event: Event) => {\n    const requestContextEvent = event as ContextEvent<C>;\n    if (requestContextEvent?.context.name !== context.name) {\n      return;\n    }\n\n    requestContextEvent.stopPropagation();\n\n    if (requestContextEvent.subscribe) {\n      requests.add(requestContextEvent);\n    }\n    requestContext.emit(requestContextEvent);\n\n    if (contextPayload) {\n      requestContextEvent.callback(contextPayload, () => {\n        requests.delete(requestContextEvent);\n      });\n    }\n  });\n\n  updateContext.on((context: ContextType<C>) => {\n    requests.forEach((r) =>\n      r.callback(context, () => {\n        requests.delete(r);\n      })\n    );\n  });\n\n  return {\n    emit: (context: ContextType<C>) => {\n      updateContext.emit(context);\n    },\n  };\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { createContext } from '../context';\n\nexport const closestIxMenu = (element: Element) => {\n  const menuElement = element.closest('ix-menu');\n  return menuElement;\n};\n\nexport type AppSwitchConfigurationTarget =\n  | '_self'\n  | '_blank'\n  | '_parent'\n  | '_top'\n  | (string & {});\n\nexport type AppSwitchConfiguration = {\n  currentAppId: string;\n  apps: {\n    id: string;\n    name: string;\n    description: string;\n    url: string;\n    target: AppSwitchConfigurationTarget;\n    iconSrc: string;\n  }[];\n  i18nAppSwitch?: string;\n  i18nLoadingApps?: string;\n};\n\nexport const ApplicationLayoutContext = createContext<{\n  hideHeader: boolean;\n  host: 'basic-navigation' | 'map-navigation' | null;\n  appSwitchConfig?: AppSwitchConfiguration;\n  sidebar?: boolean;\n}>('application-layout-context', {\n  hideHeader: false,\n  host: null,\n  sidebar: false,\n});\n"],"version":3}

package/components/date-picker.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
 import { D as DateTime_1, I as Info_1 } from './luxon.js';
 import { O as OnListener } from './listener.js';
+import { m as makeRef } from './make-ref.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';
@@ -37,15 +38,21 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
         this.dateRangeChange = createEvent(this, "dateRangeChange", 7);
         this.dateSelect = createEvent(this, "dateSelect", 7);
         this.done = createEvent(this, "done", 7);
+        this.dropdownButtonRef = makeRef();
+        this.yearContainerRef = makeRef();
+        this.firstMonthRef = makeRef();
+        this.isDayFocus = false;
+        this.monthChangedFromFocus = false;
         this.DAYS_IN_WEEK = 7;
+        this.calendar = [];
         this.format = 'yyyy/LL/dd';
         this.range = true;
         this.corners = 'rounded';
         this.from = undefined;
         this.to = undefined;
-        this.minDate = undefined;
-        this.maxDate = undefined;
-        this.textSelectDate = undefined;
+        this.minDate = '';
+        this.maxDate = '';
+        this.textSelectDate = '';
         this.i18nDone = 'Done';
         this.weekStartIndex = 0;
         this.locale = undefined;
@@ -55,19 +62,15 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
         this.today = DateTime_1.now().toISO();
         this.currFromDate = undefined;
         this.currToDate = undefined;
-        this.selectedYear = undefined;
-        this.tempYear = undefined;
-        this.startYear = undefined;
-        this.endYear = undefined;
-        this.selectedMonth = undefined;
-        this.tempMonth = undefined;
-        this.dropdownButtonRef = undefined;
-        this.yearContainerRef = undefined;
+        this.selectedYear = 0;
+        this.tempYear = 0;
+        this.startYear = 0;
+        this.endYear = 0;
+        this.selectedMonth = 0;
+        this.tempMonth = 0;
         this.dayNames = undefined;
         this.monthNames = undefined;
-        this.firstMonthRef = undefined;
         this.focusedDay = 1;
-        this.focusedDayElem = undefined;
     }
     watchFromPropHandler(newValue) {
         var _a;
@@ -148,7 +151,7 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
         this.focusedDay = _focusedDay;
     }
     getDaysInCurrentMonth() {
-        return DateTime_1.utc(this.selectedYear, this.selectedMonth + 1).daysInMonth;
+        return (DateTime_1.utc(this.selectedYear, this.selectedMonth + 1).daysInMonth || 0);
     }
     getDateTimeNow() {
         return DateTime_1.fromISO(this.today);
@@ -181,10 +184,11 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
         this.calculateCalendar();
     }
     componentDidRender() {
+        var _a;
         if (!this.monthChangedFromFocus && !this.isDayFocus) {
             return;
         }
-        const dayElem = this.hostElement.shadowRoot.querySelector(`[id=day-cell-${this.focusedDay}]`);
+        const dayElem = (_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`[id=day-cell-${this.focusedDay}]`);
         dayElem.focus();
     }
     setTranslations() {
@@ -211,6 +215,7 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
     }
     async onDone() {
         const date = await this.getCurrentDate();
+        // TODO (IX-1870): refactor event signatures to match internal logic with undefined values
         this.dateSelect.emit(date);
     }
     calculateCalendar() {
@@ -287,33 +292,42 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
         this.tempYear = year;
     }
     focusMonth() {
-        this.firstMonthRef.focus();
+        var _a;
+        (_a = this.firstMonthRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }
     infiniteScrollYears() {
-        const scroll = this.yearContainerRef.scrollTop;
-        const maxScroll = this.yearContainerRef.scrollHeight;
+        const yearContainer = this.yearContainerRef.current;
+        if (!yearContainer) {
+            return;
+        }
+        const scroll = yearContainer.scrollTop;
+        const maxScroll = yearContainer.scrollHeight;
         const atTop = scroll === 0;
-        const atBottom = Math.round(scroll + this.yearContainerRef.offsetHeight) >= maxScroll;
+        const atBottom = Math.round(scroll + yearContainer.offsetHeight) >= maxScroll;
         const limit = 200;
         if (this.endYear - this.startYear > limit)
             return;
         if (atTop) {
-            const first = this.yearContainerRef.firstElementChild;
+            const first = yearContainer.firstElementChild;
             this.startYear -= 5;
-            this.yearContainerRef.scrollTo(0, first.offsetTop);
+            yearContainer.scrollTo(0, first.offsetTop);
             return;
         }
         if (atBottom) {
-            const last = this.yearContainerRef.lastElementChild;
+            const last = yearContainer.lastElementChild;
             this.endYear += 5;
-            this.yearContainerRef.scrollTo(0, last.offsetTop);
+            yearContainer.scrollTo(0, last.offsetTop);
         }
     }
     selectMonth(month) {
+        var _a;
         this.selectedMonth = month;
         this.selectedYear = this.tempYear;
         this.tempMonth = month;
-        this.hostElement.shadowRoot.querySelector('ix-dropdown').show = false;
+        const dropdown = (_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('ix-dropdown');
+        if (dropdown) {
+            dropdown.show = false;
+        }
     }
     changeToAdjacentMonth(number) {
         if (this.selectedMonth + number < 0) {
@@ -355,17 +369,16 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
     }
     onDateChange() {
         this.getCurrentDate().then((date) => {
+            // TODO (IX-1870): refactor event signatures to match internal logic with undefined values
             this.dateChange.emit(date);
             if (this.range) {
+                // TODO (IX-1870): refactor event signatures to match internal logic with undefined values
                 this.dateRangeChange.emit(date);
             }
         });
     }
     getDayClasses(day) {
-        var _a, _b, _c, _d;
-        if (!day) {
-            return;
-        }
+        var _a, _b, _c;
         const todayObj = this.getDateTimeNow();
         const selectedDayObj = DateTime_1.fromJSDate(new Date(this.selectedYear, this.selectedMonth, day));
         return {
@@ -374,9 +387,10 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
             today: todayObj.hasSame(selectedDayObj, 'day'),
             selected: ((_a = this.currFromDate) === null || _a === void 0 ? void 0 : _a.hasSame(selectedDayObj, 'day')) ||
                 ((_b = this.currToDate) === null || _b === void 0 ? void 0 : _b.hasSame(selectedDayObj, 'day')),
-            range: selectedDayObj.startOf('day') > ((_c = this.currFromDate) === null || _c === void 0 ? void 0 : _c.startOf('day')) &&
+            range: this.currFromDate &&
+                selectedDayObj.startOf('day') > this.currFromDate.startOf('day') &&
                 this.currToDate !== undefined &&
-                selectedDayObj.startOf('day') < ((_d = this.currToDate) === null || _d === void 0 ? void 0 : _d.startOf('day')),
+                selectedDayObj.startOf('day') < ((_c = this.currToDate) === null || _c === void 0 ? void 0 : _c.startOf('day')),
             disabled: !this.isWithinMinMaxDate(selectedDayObj),
         };
     }
@@ -432,7 +446,7 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
                     'disabled-item': !this.isWithinMinMaxYear(year),
                 }, onClick: (event) => this.selectTempYear(event, year), onKeyUp: (event) => {
                     if (event.key === 'Enter') {
-                        this.selectTempYear(null, year);
+                        this.tempYear = year;
                         this.focusMonth();
                     }
                 }, tabIndex: 0 }, h("ix-icon", { class: {
@@ -443,9 +457,9 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
         return rows;
     }
     render() {
-        return (h(Host, { key: '559881c8673da97e842398f4bcfe67ef5ff27794' }, h("ix-date-time-card", { key: '4550d5f5a242be0ff07110cc400ef12795475c5c', corners: this.corners, standaloneAppearance: this.standaloneAppearance }, h("div", { key: 'f10ccab02142ae7461ac4b4ba4e8a8eb57123438', class: "header", slot: "header" }, h("ix-icon-button", { key: '52b171c5e04a5bbcb0832f0e6033947735521601', onClick: () => this.changeToAdjacentMonth(-1), ghost: true, icon: "chevron-left", variant: "primary", class: "arrows" }), h("div", { key: 'c48d51b3f22c9862c8006520530559ed44d16372', class: "selector" }, h("ix-button", { key: '8c155fcbafb7c3f32dab3c9ebc912153813ce207', ghost: true, ref: (ref) => (this.dropdownButtonRef = ref), "data-testid": "year-month-button" }, h("span", { key: '74c9634e13886d26238b4ee2262314914b1e8cf8', class: "fontSize capitalize" }, this.monthNames[this.selectedMonth], " ", this.selectedYear)), h("ix-dropdown", { key: 'ba249019d78a59e65f3a479a3ea8315b5990bcac', "data-testid": "year-month-dropdown", class: "dropdown", trigger: this.dropdownButtonRef, ignoreRelatedSubmenu: true, placement: "bottom-start" }, h("div", { key: '39365087bbb4c4dd4e0329828f61a90a1247b744', class: "wrapper" }, h("div", { key: '017d16a032a473b0e791c8dc342b5e62481212e3', "data-testid": "year-container", class: "overflow", onScroll: () => this.infiniteScrollYears(), ref: (ref) => (this.yearContainerRef = ref) }, this.renderYears()), h("div", { key: '1bef58292da8545924f53fdbeddbc864936a56ef', class: "overflow", "data-testid": "month-container" }, this.monthNames.map((month, index) => (h("div", { key: month, ref: (ref) => {
+        return (h(Host, { key: 'c6692b714ec4409dc07eab105ca37e854e8b0673' }, h("ix-date-time-card", { key: 'c57cdaaf97fcfabefdf42e8b60d0b86f1fdf3c8b', corners: this.corners, standaloneAppearance: this.standaloneAppearance }, h("div", { key: '56cb3fd90bbe2ce4a422e66e08974472cf11099f', class: "header", slot: "header" }, h("ix-icon-button", { key: '5f894b9875538f2a47ca7f666e792ab6c8a6f8e2', onClick: () => this.changeToAdjacentMonth(-1), ghost: true, icon: "chevron-left", variant: "primary", class: "arrows" }), h("div", { key: 'baf227e74085b6b167b35419a2f95724bdd7d677', class: "selector" }, h("ix-button", { key: 'db48cf3dbab1051da38cee86876b9d4f5c5c3268', ghost: true, ref: this.dropdownButtonRef, "data-testid": "year-month-button" }, h("span", { key: '878a8758ae13d6e087e050e6bda8b3e562f07fc8', class: "fontSize capitalize" }, this.monthNames[this.selectedMonth], " ", this.selectedYear)), h("ix-dropdown", { key: 'dba60aac06fc23cff73bc81b91da2d487e456b8d', "data-testid": "year-month-dropdown", class: "dropdown", trigger: this.dropdownButtonRef.waitForCurrent(), ignoreRelatedSubmenu: true, placement: "bottom-start" }, h("div", { key: 'dd15b12c8b95efe14dbd086ec7be666feea59ecd', class: "wrapper" }, h("div", { key: '21f24e002741a5f921f908438c52a16109a7a13a', "data-testid": "year-container", class: "overflow", onScroll: () => this.infiniteScrollYears(), ref: this.yearContainerRef }, this.renderYears()), h("div", { key: '948796dc6b28255156b41861f27aa8c1cf7b6067', class: "overflow", "data-testid": "month-container" }, this.monthNames.map((month, index) => (h("div", { key: month, ref: (ref) => {
                 if (month === this.monthNames[0]) {
-                    this.firstMonthRef = ref;
+                    this.firstMonthRef(ref);
                 }
             }, class: {
                 arrowYear: true,
@@ -457,12 +471,14 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
                 hidden: this.tempYear !== this.selectedYear ||
                     this.tempMonth !== index,
                 checkPosition: true,
-            }, name: "single-check", size: "16" }), h("div", null, h("span", { class: "capitalize monthMargin" }, `${month} ${this.tempYear}`))))))))), h("ix-icon-button", { key: 'f414faea937a05dd2690e82d01daf1f444fbce25', onClick: () => this.changeToAdjacentMonth(1), ghost: true, icon: "chevron-right", variant: "primary", class: "arrows" })), h("div", { key: 'b79a961fbfc8c8dd821a83ab172dd7146acc5ade', class: "grid" }, h("div", { key: '7651643c6320b8598b52ffaa45dc70498854d1ad', 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.weekNumber), week.dayNumbers.map((day) => (h("div", { key: day, id: `day-cell-${day}`, "date-calender-day": true, class: this.getDayClasses(day), onClick: () => this.selectDay(day), onKeyUp: (e) => e.key === 'Enter' && this.selectDay(day), tabIndex: day === this.focusedDay ? 0 : -1, onFocus: () => this.onDayFocus(), onBlur: () => this.onDayBlur() }, day)))));
-        })), h("div", { key: '0e6b9845bfdb760777cbd0f2f8419aeb5b667799', class: {
+            }, name: "single-check", size: "16" }), h("div", null, h("span", { class: "capitalize monthMargin" }, `${month} ${this.tempYear}`))))))))), h("ix-icon-button", { key: 'b7cc8388233b5ddf163dc2688ac07beac0d7ab3a', onClick: () => this.changeToAdjacentMonth(1), ghost: true, icon: "chevron-right", variant: "primary", class: "arrows" })), h("div", { key: '5cf633dfe85ed27d4cce43ad6df7613b9fa0f98b', class: "grid" }, h("div", { key: '52344da095eda5967f03675542d469a5edae1da1', 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.weekNumber), week.dayNumbers.map((day) => {
+                return day ? (h("div", { key: day, id: `day-cell-${day}`, "date-calender-day": true, class: this.getDayClasses(day), onClick: () => this.selectDay(day), onKeyUp: (e) => e.key === 'Enter' && this.selectDay(day), tabIndex: day === this.focusedDay ? 0 : -1, onFocus: () => this.onDayFocus(), onBlur: () => this.onDayBlur() }, day)) : (h("div", null));
+            })));
+        })), h("div", { key: '0187f43686db496d7628478d325bae900b0ae796', class: {
                 button: true,
                 hidden: !this.range || !this.standaloneAppearance,
-            } }, h("ix-button", { key: 'bb02236b3e41f3168aa2d5aad2c8e4aa9af90a49', onClick: () => this.onDone() }, this.textSelectDate || this.i18nDone)))));
+            } }, h("ix-button", { key: 'c7b246a1ddc362612d9abfe086f77f9cb5b90f2c', onClick: () => this.onDone() }, this.textSelectDate || this.i18nDone)))));
     }
     get hostElement() { return this; }
     static get watchers() { return {
@@ -495,13 +511,9 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
         "endYear": [32],
         "selectedMonth": [32],
         "tempMonth": [32],
-        "dropdownButtonRef": [32],
-        "yearContainerRef": [32],
         "dayNames": [32],
         "monthNames": [32],
-        "firstMonthRef": [32],
         "focusedDay": [32],
-        "focusedDayElem": [32],
         "getCurrentDate": [64]
     }, undefined, {
         "from": ["watchFromPropHandler"],