@siemens/ix 1.5.0 → 1.6.0

package/dist/esm/ix-action-card.entry.js

@@ -0,0 +1,24 @@
+import { r as registerInstance, h, H as Host } from './index-8ddfb6d8.js';
+
+const actionCardCss = ":host{display:block;position:relative;min-width:13.375rem;width:13.375rem;height:7.5rem;min-height:7.5rem;cursor:pointer;margin:0.25rem 0}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ix-card{width:100%;height:100%}:host ix-card.card-insight:hover{--ix-card-background:var(--theme-color-ghost--hover)}:host ix-card.card-insight:active{--ix-card-background:var(--theme-color-ghost--active)}:host ix-card.card-notification:hover{--ix-card-background:var(--theme-color-component-1--hover)}:host ix-card.card-notification:active{--ix-card-background:var(--theme-color-component-1--active)}:host ix-card.card-alarm:hover{--ix-card-background:var(--theme-color-alarm--hover)}:host ix-card.card-alarm:active{--ix-card-background:var(--theme-color-alarm--active)}:host ix-card.card-critical:hover{--ix-card-background:var(--theme-color-critical--hover)}:host ix-card.card-critical:active{--ix-card-background:var(--theme-color-critical--active)}:host ix-card.card-warning:hover{--ix-card-background:var(--theme-color-warning--hover)}:host ix-card.card-warning:active{--ix-card-background:var(--theme-color-warning--active)}:host ix-card.card-success:hover{--ix-card-background:var(--theme-color-success--hover)}:host ix-card.card-success:active{--ix-card-background:var(--theme-color-success--active)}:host ix-card.card-info:hover{--ix-card-background:var(--theme-color-info--hover)}:host ix-card.card-info:active{--ix-card-background:var(--theme-color-info--active)}:host ix-card.card-neutral:hover{--ix-card-background:var(--theme-color-neutral--hover)}:host ix-card.card-neutral:active{--ix-card-background:var(--theme-color-neutral--active)}:host(:hover) ix-card.card-insight:hover{--ix-card-background:var(--theme-color-ghost--hover)}:host(:hover) ix-card.card-notification:hover{--ix-card-background:var(--theme-color-component-1--hover)}:host(:hover) ix-card.card-alarm:hover{--ix-card-background:var(--theme-color-alarm--hover)}:host(:hover) ix-card.card-critical:hover{--ix-card-background:var(--theme-color-critical--hover)}:host(:hover) ix-card.card-warning:hover{--ix-card-background:var(--theme-color-warning--hover)}:host(:hover) ix-card.card-success:hover{--ix-card-background:var(--theme-color-success--hover)}:host(:hover) ix-card.card-info:hover{--ix-card-background:var(--theme-color-info--hover)}:host(:hover) ix-card.card-neutral:hover{--ix-card-background:var(--theme-color-neutral--hover)}:host(:active) ix-card.card-insight:active{--ix-card-background:var(--theme-color-ghost--active)}:host(:active) ix-card.card-notification:active{--ix-card-background:var(--theme-color-component-1--active)}:host(:active) ix-card.card-alarm:active{--ix-card-background:var(--theme-color-alarm--active)}:host(:active) ix-card.card-critical:active{--ix-card-background:var(--theme-color-critical--active)}:host(:active) ix-card.card-warning:active{--ix-card-background:var(--theme-color-warning--active)}:host(:active) ix-card.card-success:active{--ix-card-background:var(--theme-color-success--active)}:host(:active) ix-card.card-info:active{--ix-card-background:var(--theme-color-info--active)}:host(:active) ix-card.card-neutral:active{--ix-card-background:var(--theme-color-neutral--active)}:host(.selected) ix-card{--ix-card-border-color:var(--theme-color-dynamic)}:host(.selected) ix-card.card-insight{--ix-card-background:var(--theme-color-ghost--selected)}:host(.selected) ix-card.card-notification{--ix-card-background:var(--theme-color-ghost--selected)}:host(.selected) ix-card.card-alarm{--ix-card-background:var(--theme-color-alarm--active)}:host(.selected) ix-card.card-critical{--ix-card-background:var(--theme-color-critical--active)}:host(.selected) ix-card.card-warning{--ix-card-background:var(--theme-color-warning--active)}:host(.selected) ix-card.card-success{--ix-card-background:var(--theme-color-success--active)}:host(.selected) ix-card.card-info{--ix-card-background:var(--theme-color-info--active)}:host(.selected) ix-card.card-neutral{--ix-card-background:var(--theme-color-neutral--active)}";
+
+const IxActionCard = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.variant = 'insight';
+    this.icon = undefined;
+    this.heading = undefined;
+    this.subheading = undefined;
+    this.selected = false;
+  }
+  render() {
+    return (h(Host, { class: {
+        selected: this.selected,
+      } }, h("ix-card", { variant: this.variant, class: 'pointer' }, h("ix-card-content", null, this.icon ? (h("ix-icon", { class: 'icon', name: this.icon, size: "24" })) : (''), this.heading ? (h("ix-typography", { variant: "large-title" }, this.heading)) : (''), this.subheading ? (h("ix-typography", { variant: "default-title-single", color: this.variant === 'insight' ? 'soft' : undefined }, this.subheading)) : null, h("slot", null)))));
+  }
+};
+IxActionCard.style = actionCardCss;
+
+export { IxActionCard as ix_action_card };
+
+//# sourceMappingURL=ix-action-card.entry.js.map

package/dist/esm/ix-action-card.entry.js.map

@@ -0,0 +1 @@
+{"file":"ix-action-card.entry.js","mappings":";;AAAA,MAAM,aAAa,GAAG,08HAA08H;;MCsBn9H,YAAY;;;mBAIc,SAAS;gBAKX,SAAS;;;oBAezB,KAAK;;EAExB,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,IAED,eAAS,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,SAAS,IAC9C,2BACG,IAAI,CAAC,IAAI,IACR,eAAS,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,IAAI,GAAW,KAE7D,EAAE,CACH,EACA,IAAI,CAAC,OAAO,IACX,qBAAe,OAAO,EAAC,aAAa,IACjC,IAAI,CAAC,OAAO,CACC,KAEhB,EAAE,CACH,EACA,IAAI,CAAC,UAAU,IACd,qBACE,OAAO,EAAC,sBAAsB,EAC9B,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS,GAAG,MAAM,GAAG,SAAS,IAErD,IAAI,CAAC,UAAU,CACF,IACd,IAAI,EACR,eAAa,CACG,CACV,CACL,EACP;GACH;;;;;;","names":[],"sources":["./src/components/action-card/action-card.scss?tag=ix-action-card&encapsulation=shadow","./src/components/action-card/action-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: block;\n  position: relative;\n  min-width: 13.375rem;\n  width: 13.375rem;\n  height: 7.5rem;\n  min-height: 7.5rem;\n  cursor: pointer;\n\n  margin: 0.25rem 0;\n\n  ix-card {\n    width: 100%;\n    height: 100%;\n  }\n\n  ix-card.card-insight:hover {\n    --ix-card-background: var(--theme-color-ghost--hover);\n  }\n\n  ix-card.card-insight:active {\n    --ix-card-background: var(--theme-color-ghost--active);\n  }\n\n  ix-card.card-notification:hover {\n    --ix-card-background: var(--theme-color-component-1--hover);\n  }\n\n  ix-card.card-notification:active {\n    --ix-card-background: var(--theme-color-component-1--active);\n  }\n\n  ix-card.card-alarm:hover {\n    --ix-card-background: var(--theme-color-alarm--hover);\n  }\n\n  ix-card.card-alarm:active {\n    --ix-card-background: var(--theme-color-alarm--active);\n  }\n\n  ix-card.card-critical:hover {\n    --ix-card-background: var(--theme-color-critical--hover);\n  }\n\n  ix-card.card-critical:active {\n    --ix-card-background: var(--theme-color-critical--active);\n  }\n\n  ix-card.card-warning:hover {\n    --ix-card-background: var(--theme-color-warning--hover);\n  }\n\n  ix-card.card-warning:active {\n    --ix-card-background: var(--theme-color-warning--active);\n  }\n\n  ix-card.card-success:hover {\n    --ix-card-background: var(--theme-color-success--hover);\n  }\n\n  ix-card.card-success:active {\n    --ix-card-background: var(--theme-color-success--active);\n  }\n\n  ix-card.card-info:hover {\n    --ix-card-background: var(--theme-color-info--hover);\n  }\n\n  ix-card.card-info:active {\n    --ix-card-background: var(--theme-color-info--active);\n  }\n\n  ix-card.card-neutral:hover {\n    --ix-card-background: var(--theme-color-neutral--hover);\n  }\n\n  ix-card.card-neutral:active {\n    --ix-card-background: var(--theme-color-neutral--active);\n  }\n}\n\n:host(:hover) {\n  ix-card.card-insight:hover {\n    --ix-card-background: var(--theme-color-ghost--hover);\n  }\n\n  ix-card.card-notification:hover {\n    --ix-card-background: var(--theme-color-component-1--hover);\n  }\n\n  ix-card.card-alarm:hover {\n    --ix-card-background: var(--theme-color-alarm--hover);\n  }\n\n  ix-card.card-critical:hover {\n    --ix-card-background: var(--theme-color-critical--hover);\n  }\n\n  ix-card.card-warning:hover {\n    --ix-card-background: var(--theme-color-warning--hover);\n  }\n\n  ix-card.card-success:hover {\n    --ix-card-background: var(--theme-color-success--hover);\n  }\n\n  ix-card.card-info:hover {\n    --ix-card-background: var(--theme-color-info--hover);\n  }\n\n  ix-card.card-neutral:hover {\n    --ix-card-background: var(--theme-color-neutral--hover);\n  }\n}\n\n:host(:active) {\n  ix-card.card-insight:active {\n    --ix-card-background: var(--theme-color-ghost--active);\n  }\n\n  ix-card.card-notification:active {\n    --ix-card-background: var(--theme-color-component-1--active);\n  }\n\n  ix-card.card-alarm:active {\n    --ix-card-background: var(--theme-color-alarm--active);\n  }\n\n  ix-card.card-critical:active {\n    --ix-card-background: var(--theme-color-critical--active);\n  }\n\n  ix-card.card-warning:active {\n    --ix-card-background: var(--theme-color-warning--active);\n  }\n\n  ix-card.card-success:active {\n    --ix-card-background: var(--theme-color-success--active);\n  }\n\n  ix-card.card-info:active {\n    --ix-card-background: var(--theme-color-info--active);\n  }\n\n  ix-card.card-neutral:active {\n    --ix-card-background: var(--theme-color-neutral--active);\n  }\n}\n\n:host(.selected) {\n  ix-card {\n    --ix-card-border-color: var(--theme-color-dynamic);\n  }\n\n  ix-card.card-insight {\n    --ix-card-background: var(--theme-color-ghost--selected);\n  }\n\n  ix-card.card-notification {\n    --ix-card-background: var(--theme-color-ghost--selected);\n  }\n\n  ix-card.card-alarm {\n    --ix-card-background: var(--theme-color-alarm--active);\n  }\n\n  ix-card.card-critical {\n    --ix-card-background: var(--theme-color-critical--active);\n  }\n\n  ix-card.card-warning {\n    --ix-card-background: var(--theme-color-warning--active);\n  }\n\n  ix-card.card-success {\n    --ix-card-background: var(--theme-color-success--active);\n  }\n\n  ix-card.card-info {\n    --ix-card-background: var(--theme-color-info--active);\n  }\n\n  ix-card.card-neutral {\n    --ix-card-background: var(--theme-color-neutral--active);\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\nimport { CardVariant } from '../card/card';\n\nexport type ActionCardVariant = CardVariant;\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-action-card',\n  styleUrl: 'action-card.scss',\n  shadow: true,\n})\nexport class IxActionCard {\n  /**\n   * Card variant\n   */\n  @Prop() variant: ActionCardVariant = 'insight';\n\n  /**\n   * Card icon\n   */\n  @Prop() icon: string | undefined = undefined;\n\n  /**\n   * Card heading\n   */\n  @Prop() heading: string;\n\n  /**\n   * Card subheading\n   */\n  @Prop() subheading: string;\n\n  /**\n   * Card selection\n   */\n  @Prop() selected = false;\n\n  render() {\n    return (\n      <Host\n        class={{\n          selected: this.selected,\n        }}\n      >\n        <ix-card variant={this.variant} class={'pointer'}>\n          <ix-card-content>\n            {this.icon ? (\n              <ix-icon class={'icon'} name={this.icon} size=\"24\"></ix-icon>\n            ) : (\n              ''\n            )}\n            {this.heading ? (\n              <ix-typography variant=\"large-title\">\n                {this.heading}\n              </ix-typography>\n            ) : (\n              ''\n            )}\n            {this.subheading ? (\n              <ix-typography\n                variant=\"default-title-single\"\n                color={this.variant === 'insight' ? 'soft' : undefined}\n              >\n                {this.subheading}\n              </ix-typography>\n            ) : null}\n            <slot></slot>\n          </ix-card-content>\n        </ix-card>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/ix-animated-tab_2.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, c as createEvent, g as getElement } from './index-57424926.js';
+import { r as registerInstance, h, H as Host, c as createEvent, g as getElement } from './index-8ddfb6d8.js';
 import { a as anime } from './anime.es-185e9087.js';
 import { A as Animation } from './animation-268dce50.js';
 import { c as convertToAbbreviationString } from './rwd.util-cfc2ea72.js';

package/dist/esm/ix-application-header.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-57424926.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-8ddfb6d8.js';
 import { h as hostContext, i as isBasicNavigationLayout, m as menuController } from './context-f6a2b727.js';
 import { s as screenMode } from './service-fc436c5b.js';
 import './typed-event-a230184a.js';

package/dist/esm/ix-basic-navigation.entry.js

@@ -1,8 +1,8 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-57424926.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-8ddfb6d8.js';
 import { s as screenMode } from './service-fc436c5b.js';
 import './typed-event-a230184a.js';
 
-const basicNavigationCss = ".sc-ix-basic-navigation-h{display:flex;position:relative;width:100%;height:100%;flex-direction:column}.sc-ix-basic-navigation-h ix-application-header.sc-ix-basic-navigation{z-index:calc(var(--theme-z-index-sticky) + 1)}.sc-ix-basic-navigation-h .content.sc-ix-basic-navigation{display:flex;height:calc(100% - 2.75rem);width:calc(100% - 4rem);position:relative;margin-left:4rem;overflow:auto}.hide-header.sc-ix-basic-navigation-h .content.sc-ix-basic-navigation{height:100%}.mode-mobile.sc-ix-basic-navigation-h .content.sc-ix-basic-navigation{margin-left:0px;width:100%}";
+const basicNavigationCss = ".sc-ix-basic-navigation-h{display:flex;position:relative;width:100%;height:100%;flex-direction:column}.sc-ix-basic-navigation-h ix-application-header.sc-ix-basic-navigation{z-index:calc(var(--theme-z-index-sticky) + 1)}.sc-ix-basic-navigation-h .content.sc-ix-basic-navigation{display:flex;height:calc(100% - 2.75rem);width:calc(100% - 4rem);position:relative;margin-left:3.25rem;overflow:auto}.hide-header.sc-ix-basic-navigation-h .content.sc-ix-basic-navigation{height:100%}.mode-mobile.sc-ix-basic-navigation-h .content.sc-ix-basic-navigation{margin-left:0px;width:100%}";
 
 const BasicNavigation = class {
   constructor(hostRef) {

package/dist/esm/ix-basic-navigation.entry.js.map

@@ -1 +1 @@
-{"file":"ix-basic-navigation.entry.js","mappings":";;;;AAAA,MAAM,kBAAkB,GAAG,4jBAA4jB;;MCmB1kB,eAAe;;;;sBAWL,KAAK;gBAEJ,SAAS;;EAE/B,IAAI,IAAI;IACN,OAAO,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;GAClD;EAID,iBAAiB;IACf,IAAI,IAAI,CAAC,UAAU,KAAK,KAAK,EAAE;MAC7B,IAAI,CAAC,cAAc,GAAG,UAAU,CAAC,QAAQ,CAAC,EAAE,CAC1C,CAAC,IAAI,MAAM,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,CAC7B,CAAC;MACF,IAAI,CAAC,IAAI,GAAG,UAAU,CAAC,IAAI,CAAC;KAC7B;GACF;EAED,kBAAkB;IAChB,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,IAAI,CAAC,UAAU,EAAE,CAAC;MAClB,IAAI,CAAC,gBAAgB,EAAE,CAAC;MACxB,IAAI,CAAC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC;KAClD;GACF;EAED,oBAAoB;;IAClB,MAAA,IAAI,CAAC,cAAc,0CAAE,OAAO,EAAE,CAAC;GAChC;EAEO,UAAU;IAChB,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GAC5E;EAEO,gBAAgB;IACtB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;MACpB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,sBAAsB,CAAC;KACjD;GACF;EAED,MAAM;IACJ,QACE,EAAC,IAAI,iBACO,EAAE,EACZ,KAAK,EAAE;QACL,aAAa,EAAE,IAAI,CAAC,UAAU;QAC9B,CAAC,QAAQ,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI;OAC5B,IAEA,CAAC,IAAI,CAAC,UAAU,IACf,6BAAuB,IAAI,EAAE,IAAI,CAAC,eAAe,IAC/C,YAAM,IAAI,EAAC,MAAM,GAAQ,CACH,IACtB,IAAI,EACR,WAAK,EAAE,EAAC,kBAAkB,GAAO,EACjC,WAAK,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,IAC7D,eAAa,CACT,CACD,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/basic-navigation/basic-navigation.scss?tag=ix-basic-navigation&encapsulation=scoped","./src/components/basic-navigation/basic-navigation.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n:host {\n  display: flex;\n  position: relative;\n  width: 100%;\n  height: 100%;\n\n  flex-direction: column;\n\n  ix-application-header {\n    z-index: calc(var(--theme-z-index-sticky) + 1);\n  }\n\n  .content {\n    display: flex;\n    height: calc(100% - 2.75rem);\n    width: calc(100% - 4rem);\n    position: relative;\n    margin-left: 4rem;\n    overflow: auto;\n  }\n\n  &.hide-header {\n    .content {\n      height: 100%;\n    }\n  }\n}\n\n:host(.mode-mobile) {\n  .content {\n    margin-left: 0px;\n    width: 100%;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport { Mode } from '../utils/screen/mode';\nimport { screenMode } from '../utils/screen/service';\nimport { Disposable } from '../utils/typed-event';\n\n@Component({\n  tag: 'ix-basic-navigation',\n  styleUrl: 'basic-navigation.scss',\n  scoped: true,\n})\nexport class BasicNavigation {\n  @Element() hostElement: HTMLIxBasicNavigationElement;\n\n  /**\n   * Application name\n   */\n  @Prop() applicationName: string;\n\n  /**\n   * Hide application header. Will disable responsive feature of basic navigation.\n   */\n  @Prop() hideHeader = false;\n\n  @State() mode: Mode = 'desktop';\n\n  get menu(): HTMLIxMenuElement {\n    return this.hostElement.querySelector('ix-menu');\n  }\n\n  private modeDisposable: Disposable;\n\n  componentWillLoad() {\n    if (this.hideHeader === false) {\n      this.modeDisposable = screenMode.onChange.on(\n        (mode) => (this.mode = mode)\n      );\n      this.mode = screenMode.mode;\n    }\n  }\n\n  componentDidRender() {\n    if (this.menu) {\n      this.appendMenu();\n      this.adjustMenuHeight();\n      this.menu.applicationName = this.applicationName;\n    }\n  }\n\n  disconnectedCallback() {\n    this.modeDisposable?.dispose();\n  }\n\n  private appendMenu() {\n    this.hostElement.querySelector('#menu-placeholder').appendChild(this.menu);\n  }\n\n  private adjustMenuHeight() {\n    if (!this.hideHeader) {\n      this.menu.style.height = 'calc(100% - 2.75rem)';\n    }\n  }\n\n  render() {\n    return (\n      <Host\n        data-role=\"\"\n        class={{\n          'hide-header': this.hideHeader,\n          [`mode-${this.mode}`]: true,\n        }}\n      >\n        {!this.hideHeader ? (\n          <ix-application-header name={this.applicationName}>\n            <slot name=\"logo\"></slot>\n          </ix-application-header>\n        ) : null}\n        <div id=\"menu-placeholder\"></div>\n        <div class=\"content\" onClick={() => this.menu.toggleMenu(false)}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-basic-navigation.entry.js","mappings":";;;;AAAA,MAAM,kBAAkB,GAAG,+jBAA+jB;;MCmB7kB,eAAe;;;;sBAWL,KAAK;gBAEJ,SAAS;;EAE/B,IAAI,IAAI;IACN,OAAO,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;GAClD;EAID,iBAAiB;IACf,IAAI,IAAI,CAAC,UAAU,KAAK,KAAK,EAAE;MAC7B,IAAI,CAAC,cAAc,GAAG,UAAU,CAAC,QAAQ,CAAC,EAAE,CAC1C,CAAC,IAAI,MAAM,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,CAC7B,CAAC;MACF,IAAI,CAAC,IAAI,GAAG,UAAU,CAAC,IAAI,CAAC;KAC7B;GACF;EAED,kBAAkB;IAChB,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,IAAI,CAAC,UAAU,EAAE,CAAC;MAClB,IAAI,CAAC,gBAAgB,EAAE,CAAC;MACxB,IAAI,CAAC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC;KAClD;GACF;EAED,oBAAoB;;IAClB,MAAA,IAAI,CAAC,cAAc,0CAAE,OAAO,EAAE,CAAC;GAChC;EAEO,UAAU;IAChB,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GAC5E;EAEO,gBAAgB;IACtB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;MACpB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,sBAAsB,CAAC;KACjD;GACF;EAED,MAAM;IACJ,QACE,EAAC,IAAI,iBACO,EAAE,EACZ,KAAK,EAAE;QACL,aAAa,EAAE,IAAI,CAAC,UAAU;QAC9B,CAAC,QAAQ,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI;OAC5B,IAEA,CAAC,IAAI,CAAC,UAAU,IACf,6BAAuB,IAAI,EAAE,IAAI,CAAC,eAAe,IAC/C,YAAM,IAAI,EAAC,MAAM,GAAQ,CACH,IACtB,IAAI,EACR,WAAK,EAAE,EAAC,kBAAkB,GAAO,EACjC,WAAK,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,IAC7D,eAAa,CACT,CACD,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/basic-navigation/basic-navigation.scss?tag=ix-basic-navigation&encapsulation=scoped","./src/components/basic-navigation/basic-navigation.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n:host {\n  display: flex;\n  position: relative;\n  width: 100%;\n  height: 100%;\n\n  flex-direction: column;\n\n  ix-application-header {\n    z-index: calc(var(--theme-z-index-sticky) + 1);\n  }\n\n  .content {\n    display: flex;\n    height: calc(100% - 2.75rem);\n    width: calc(100% - 4rem);\n    position: relative;\n    margin-left: 3.25rem;\n    overflow: auto;\n  }\n\n  &.hide-header {\n    .content {\n      height: 100%;\n    }\n  }\n}\n\n:host(.mode-mobile) {\n  .content {\n    margin-left: 0px;\n    width: 100%;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport { Mode } from '../utils/screen/mode';\nimport { screenMode } from '../utils/screen/service';\nimport { Disposable } from '../utils/typed-event';\n\n@Component({\n  tag: 'ix-basic-navigation',\n  styleUrl: 'basic-navigation.scss',\n  scoped: true,\n})\nexport class BasicNavigation {\n  @Element() hostElement: HTMLIxBasicNavigationElement;\n\n  /**\n   * Application name\n   */\n  @Prop() applicationName: string;\n\n  /**\n   * Hide application header. Will disable responsive feature of basic navigation.\n   */\n  @Prop() hideHeader = false;\n\n  @State() mode: Mode = 'desktop';\n\n  get menu(): HTMLIxMenuElement {\n    return this.hostElement.querySelector('ix-menu');\n  }\n\n  private modeDisposable: Disposable;\n\n  componentWillLoad() {\n    if (this.hideHeader === false) {\n      this.modeDisposable = screenMode.onChange.on(\n        (mode) => (this.mode = mode)\n      );\n      this.mode = screenMode.mode;\n    }\n  }\n\n  componentDidRender() {\n    if (this.menu) {\n      this.appendMenu();\n      this.adjustMenuHeight();\n      this.menu.applicationName = this.applicationName;\n    }\n  }\n\n  disconnectedCallback() {\n    this.modeDisposable?.dispose();\n  }\n\n  private appendMenu() {\n    this.hostElement.querySelector('#menu-placeholder').appendChild(this.menu);\n  }\n\n  private adjustMenuHeight() {\n    if (!this.hideHeader) {\n      this.menu.style.height = 'calc(100% - 2.75rem)';\n    }\n  }\n\n  render() {\n    return (\n      <Host\n        data-role=\"\"\n        class={{\n          'hide-header': this.hideHeader,\n          [`mode-${this.mode}`]: true,\n        }}\n      >\n        {!this.hideHeader ? (\n          <ix-application-header name={this.applicationName}>\n            <slot name=\"logo\"></slot>\n          </ix-application-header>\n        ) : null}\n        <div id=\"menu-placeholder\"></div>\n        <div class=\"content\" onClick={() => this.menu.toggleMenu(false)}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/ix-blind.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-57424926.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-8ddfb6d8.js';
 import { a as anime } from './anime.es-185e9087.js';
 
 /*
@@ -11,7 +11,7 @@ import { a as anime } from './anime.es-185e9087.js';
  */
 const a11yBoolean = (value) => (value ? 'true' : 'false');
 
-const blindCss = ".sc-ix-blind-h{display:flex;flex-direction:column;background-color:var(--theme-blind-base--background);border:solid var(--theme-blind--border-thickness) var(--theme-blind-base--border-color);border-radius:var(--theme-blind--border-radius);overflow:hidden}.sc-ix-blind-h .blind-header.sc-ix-blind{all:unset;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;min-height:3rem;height:3rem;border:solid var(--theme-blind--border-thickness) transparent;border-radius:var(--theme-blind--border-radius) var(--theme-blind--border-radius) 0 0;padding-right:0.5rem;transition:border-radius 150ms;cursor:pointer;z-index:1;color:var(--theme-blind-header-closed--color);background-color:var(--theme-blind-header-closed--background)}.sc-ix-blind-h .blind-header.sc-ix-blind .glyph.sc-ix-blind{color:var(--theme-blind-header-icon-closed--color);padding:0.25rem 0.5rem}.sc-ix-blind-h .blind-header.sc-ix-blind .blind-header-title.sc-ix-blind,.sc-ix-blind-h .blind-header.sc-ix-blind .blind-header-title-basic.sc-ix-blind{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;flex-grow:1;height:100%}.sc-ix-blind-h .blind-header.sc-ix-blind .blind-header-title.sc-ix-blind .blind-header-title-default.sc-ix-blind,.sc-ix-blind-h .blind-header.sc-ix-blind .blind-header-title-basic.sc-ix-blind .blind-header-title-default.sc-ix-blind{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text);-webkit-margin-end:0.5rem;margin-inline-end:0.5rem;flex-grow:1}.sc-ix-blind-h .blind-header.sc-ix-blind .blind-header-title-basic.sc-ix-blind ix-icon.sc-ix-blind{-webkit-margin-end:0.5rem;margin-inline-end:0.5rem}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled):hover{background-color:var(--theme-blind-header-open--background--hover)}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled):hover .glyph.sc-ix-blind{color:var(--theme-blind-header-icon-open--color--hover)}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled):active{background-color:var(--theme-blind-header-open--background--active)}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled):active .glyph.sc-ix-blind{color:var(--theme-blind-header-icon-open--color--active)}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled):focus-visible{border-color:var(--theme-color-focus-bdr);outline:none}.sc-ix-blind-h .blind-header.closed.sc-ix-blind{border-radius:var(--theme-blind--border-radius)}.sc-ix-blind-h .blind-header.closed.sc-ix-blind:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-blind-h .blind-header.closed.sc-ix-blind:not(.disabled):not(:disabled):hover{background-color:var(--theme-blind-header-open--background--hover)}.sc-ix-blind-h .blind-header.closed.sc-ix-blind:not(.disabled):not(:disabled):hover .glyph.sc-ix-blind{color:var(--theme-blind-header-icon-closed--color--hover)}.sc-ix-blind-h .blind-header.closed.sc-ix-blind:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-blind-h .blind-header.closed.sc-ix-blind:not(.disabled):not(:disabled):active{background-color:var(--theme-blind-header-open--background--active)}.sc-ix-blind-h .blind-header.closed.sc-ix-blind:not(.disabled):not(:disabled):active .glyph.sc-ix-blind{color:var(--theme-blind-header-icon-closed--color--active)}.sc-ix-blind-h .blind-content.sc-ix-blind{display:block;padding:1rem;transition-property:padding;transition-duration:150ms;transition-timing-function:ease-in}.sc-ix-blind-h .blind-content.hide.sc-ix-blind{max-height:0;padding-top:0px;padding-bottom:0px}";
+const blindCss = ":host{display:flex;flex-direction:column;background-color:var(--theme-blind-base--background);border:solid var(--theme-blind--border-thickness) var(--theme-blind-base--border-color);border-radius:var(--theme-blind--border-radius);overflow:hidden}:host .blind-header{all:unset;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;min-height:3rem;height:3rem;border:solid var(--theme-blind--border-thickness) transparent;border-radius:var(--theme-blind--border-radius) var(--theme-blind--border-radius) 0 0;padding-right:0.5rem;transition:border-radius 150ms;cursor:pointer;z-index:1;color:var(--theme-blind-header-closed--color);background-color:var(--theme-blind-header-closed--background)}:host .blind-header .collapse-icon{color:var(--theme-blind-header-icon-closed--color);padding:0.25rem 0.5rem}:host .blind-header .blind-header-title,:host .blind-header .blind-header-title-basic{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;flex-grow:1;height:100%}:host .blind-header .blind-header-title .blind-header-title-default,:host .blind-header .blind-header-title-basic .blind-header-title-default{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text);-webkit-margin-end:0.5rem;margin-inline-end:0.5rem;flex-grow:1}:host .blind-header .blind-header-title-basic ix-icon{-webkit-margin-end:0.5rem;margin-inline-end:0.5rem}:host .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-blind-header-open--background--hover)}:host .blind-header:not(.disabled):not(:disabled):hover .collapse-icon{color:var(--theme-blind-header-icon-open--color--hover)}:host .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host .blind-header:not(.disabled):not(:disabled):active{background-color:var(--theme-blind-header-open--background--active)}:host .blind-header:not(.disabled):not(:disabled):active .collapse-icon{color:var(--theme-blind-header-icon-open--color--active)}:host .blind-header:not(.disabled):not(:disabled):focus-visible{border-color:var(--theme-color-focus-bdr);outline:none}:host .blind-header.closed{border-radius:var(--theme-blind--border-radius)}:host .blind-header.closed:not(.disabled):not(:disabled){cursor:pointer}:host .blind-header.closed:not(.disabled):not(:disabled):hover{background-color:var(--theme-blind-header-open--background--hover)}:host .blind-header.closed:not(.disabled):not(:disabled):hover .collapse-icon{color:var(--theme-blind-header-icon-closed--color--hover)}:host .blind-header.closed:not(.disabled):not(:disabled){cursor:pointer}:host .blind-header.closed:not(.disabled):not(:disabled):active{background-color:var(--theme-blind-header-open--background--active)}:host .blind-header.closed:not(.disabled):not(:disabled):active .collapse-icon{color:var(--theme-blind-header-icon-closed--color--active)}:host .blind-content{display:block;padding:1rem;transition-property:padding;transition-duration:150ms;transition-timing-function:ease-in}:host .blind-content.hide{max-height:0;padding-top:0px;padding-bottom:0px}";
 
 let sequentialInstanceId = 0;
 const Blind = class {
@@ -36,7 +36,7 @@ const Blind = class {
     this.animateCollapse(this.collapsed);
   }
   get content() {
-    return this.hostElement.querySelector('.blind-content');
+    return this.hostElement.shadowRoot.querySelector('.blind-content');
   }
   animation(isCollapsed) {
     this.animateCollapse(isCollapsed);
@@ -81,10 +81,7 @@ const Blind = class {
     return (h(Host, null, h("button", { class: {
         'blind-header': true,
         closed: this.collapsed,
-      }, type: "button", "aria-labelledby": `ix-blind-header-title-${this.id}`, "aria-controls": `ix-blind-content-section-${this.id}`, "aria-expanded": a11yBoolean(!this.collapsed), onClick: (e) => this.onHeaderClick(e) }, h("span", { class: {
-        glyph: true,
-        'glyph-chevron-right-small': true,
-      }, ref: (ref) => (this.chevronRef = ref) }), h("div", { class: "blind-header-title", id: `ix-blind-header-title-${this.id}` }, this.label !== undefined ? (h("span", { class: "blind-header-title-basic" }, this.icon !== undefined ? (h("ix-icon", { name: this.icon })) : (''), h("span", { class: "blind-header-title-default" }, this.label), h("span", { class: "header-actions" }, h("slot", { name: "header-actions" })))) : (h("slot", { name: "custom-header" })))), h("section", { id: `ix-blind-content-section-${this.id}`, "aria-labelledby": `ix-blind-header-title-${this.id}` }, h("div", { class: {
+      }, type: "button", "aria-labelledby": `ix-blind-header-title-${this.id}`, "aria-controls": `ix-blind-content-section-${this.id}`, "aria-expanded": a11yBoolean(!this.collapsed), onClick: (e) => this.onHeaderClick(e) }, h("ix-icon", { class: 'collapse-icon', name: "chevron-right-small", ref: (ref) => (this.chevronRef = ref) }), h("div", { class: "blind-header-title", id: `ix-blind-header-title-${this.id}` }, this.label !== undefined ? (h("span", { class: "blind-header-title-basic" }, this.icon !== undefined ? (h("ix-icon", { name: this.icon })) : (''), h("span", { class: "blind-header-title-default" }, this.label), h("span", { class: "header-actions", onClick: (e) => e.stopImmediatePropagation() }, h("slot", { name: "header-actions" })))) : (h("slot", { name: "custom-header" })))), h("section", { id: `ix-blind-content-section-${this.id}`, "aria-labelledby": `ix-blind-header-title-${this.id}` }, h("div", { class: {
         'blind-content': true,
         hide: this.collapsed,
       } }, h("slot", null)))));

package/dist/esm/ix-blind.entry.js.map

@@ -1 +1 @@
-{"file":"ix-blind.entry.js","mappings":"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","names":[],"sources":["./src/components/utils/a11y.ts","./src/components/blind/blind.scss?tag=ix-blind&encapsulation=scoped","./src/components/blind/blind.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nexport const a11yBoolean = (value: boolean) => (value ? 'true' : 'false');\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/fonts';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n\n:host {\n  display: flex;\n  flex-direction: column;\n  background-color: var(--theme-blind-base--background);\n  border: solid var(--theme-blind--border-thickness)\n    var(--theme-blind-base--border-color);\n  border-radius: var(--theme-blind--border-radius);\n  overflow: hidden;\n\n  .blind-header {\n    all: unset;\n    @include ellipsis;\n\n    display: flex;\n    align-items: center;\n    min-height: 3rem;\n    height: 3rem;\n    border: solid var(--theme-blind--border-thickness) transparent;\n    border-radius: var(--theme-blind--border-radius)\n      var(--theme-blind--border-radius) 0 0;\n    padding-right: $small-space;\n    transition: border-radius $default-time;\n    cursor: pointer;\n\n    z-index: 1;\n\n    color: var(--theme-blind-header-closed--color);\n    background-color: var(--theme-blind-header-closed--background);\n\n    .glyph {\n      color: var(--theme-blind-header-icon-closed--color);\n      padding: $tiny-space $small-space;\n    }\n\n    .blind-header-title,\n    .blind-header-title-basic {\n      @include ellipsis;\n      display: flex;\n      align-items: center;\n      flex-grow: 1;\n      height: 100%;\n\n      .blind-header-title-default {\n        @include ellipsis;\n        @include text-l-title;\n        margin-inline-end: $small-space;\n        flex-grow: 1;\n      }\n    }\n\n    .blind-header-title-basic ix-icon {\n      margin-inline-end: $small-space;\n    }\n\n    @include hover {\n      background-color: var(--theme-blind-header-open--background--hover);\n\n      .glyph {\n        color: var(--theme-blind-header-icon-open--color--hover);\n      }\n    }\n\n    @include active {\n      background-color: var(--theme-blind-header-open--background--active);\n\n      .glyph {\n        color: var(--theme-blind-header-icon-open--color--active);\n      }\n    }\n\n    @include focus-visible {\n      border-color: var(--theme-color-focus-bdr);\n      outline: none;\n    }\n\n    &.closed {\n      border-radius: var(--theme-blind--border-radius);\n\n      @include hover {\n        background-color: var(--theme-blind-header-open--background--hover);\n\n        .glyph {\n          color: var(--theme-blind-header-icon-closed--color--hover);\n        }\n      }\n\n      @include active {\n        background-color: var(--theme-blind-header-open--background--active);\n\n        .glyph {\n          color: var(--theme-blind-header-icon-closed--color--active);\n        }\n      }\n    }\n  }\n\n  .blind-content {\n    display: block;\n    padding: 1rem;\n    transition-property: padding;\n    transition-duration: $default-time;\n    transition-timing-function: ease-in;\n\n    &.hide {\n      max-height: 0;\n      padding-top: 0px;\n      padding-bottom: 0px;\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 {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { a11yBoolean } from '../utils/a11y';\n\nlet sequentialInstanceId = 0;\n@Component({\n  tag: 'ix-blind',\n  styleUrl: 'blind.scss',\n  scoped: true,\n})\nexport class Blind {\n  /**\n   * Collapsed state\n   */\n  @Prop({ mutable: true, reflect: true }) collapsed = false;\n\n  /**\n   * Label of blind\n   */\n  @Prop() label: string;\n\n  /**\n   * Optional icon to be displayed next to the header label\n   * @since 1.5.0\n   */\n  @Prop() icon: string;\n\n  /**\n   * Collapsed state changed\n   */\n  @Event() collapsedChange: EventEmitter<boolean>;\n\n  @Element() hostElement!: HTMLIxBlindElement;\n\n  private chevronRef: HTMLElement;\n  private id = ++sequentialInstanceId;\n\n  constructor() {}\n\n  private onHeaderClick(e: Event) {\n    if ((e.target as Element).closest('.header-actions')) {\n      return;\n    }\n\n    e.preventDefault();\n    e.stopImmediatePropagation();\n\n    this.collapsed = !this.collapsed;\n    this.collapsedChange.emit(this.collapsed);\n  }\n\n  componentDidLoad() {\n    this.animateCollapse(this.collapsed);\n  }\n\n  get content() {\n    return this.hostElement.querySelector('.blind-content');\n  }\n\n  @Watch('collapsed')\n  animation(isCollapsed: boolean) {\n    this.animateCollapse(isCollapsed);\n  }\n\n  private animateCollapse(isCollapsed: boolean) {\n    if (isCollapsed) {\n      this.rotateChevronRight();\n    } else {\n      this.rotateChevronDown();\n    }\n  }\n\n  private rotateChevronDown() {\n    anime({\n      targets: this.chevronRef,\n      duration: 150,\n      easing: 'easeInOutSine',\n      rotateZ: 90,\n    });\n    anime({\n      targets: this.content,\n      duration: 150,\n      easing: 'easeInOutSine',\n      opacity: 1,\n    });\n  }\n\n  private rotateChevronRight() {\n    anime({\n      targets: this.chevronRef,\n      duration: 150,\n      easing: 'easeInOutSine',\n      rotateZ: 0,\n    });\n    anime({\n      targets: this.content,\n      duration: 150,\n      easing: 'easeInOutSine',\n      opacity: 0,\n    });\n  }\n\n  render() {\n    return (\n      <Host>\n        <button\n          class={{\n            'blind-header': true,\n            closed: this.collapsed,\n          }}\n          type=\"button\"\n          aria-labelledby={`ix-blind-header-title-${this.id}`}\n          aria-controls={`ix-blind-content-section-${this.id}`}\n          aria-expanded={a11yBoolean(!this.collapsed)}\n          onClick={(e) => this.onHeaderClick(e)}\n        >\n          <span\n            class={{\n              glyph: true,\n              'glyph-chevron-right-small': true,\n            }}\n            ref={(ref) => (this.chevronRef = ref)}\n          ></span>\n          <div\n            class=\"blind-header-title\"\n            id={`ix-blind-header-title-${this.id}`}\n          >\n            {this.label !== undefined ? (\n              <span class=\"blind-header-title-basic\">\n                {this.icon !== undefined ? (\n                  <ix-icon name={this.icon}></ix-icon>\n                ) : (\n                  ''\n                )}\n                <span class=\"blind-header-title-default\">{this.label}</span>\n                <span class=\"header-actions\">\n                  <slot name=\"header-actions\"></slot>\n                </span>\n              </span>\n            ) : (\n              <slot name=\"custom-header\"></slot>\n            )}\n          </div>\n        </button>\n        <section\n          id={`ix-blind-content-section-${this.id}`}\n          aria-labelledby={`ix-blind-header-title-${this.id}`}\n        >\n          <div\n            class={{\n              'blind-content': true,\n              hide: this.collapsed,\n            }}\n          >\n            <slot></slot>\n          </div>\n        </section>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-blind.entry.js","mappings":";;;AAAA;;;;;;;;AAQO,MAAM,WAAW,GAAG,CAAC,KAAc,MAAM,KAAK,GAAG,MAAM,GAAG,OAAO,CAAC;;ACRzE,MAAM,QAAQ,GAAG,ivGAAivG;;ACsBlwG,IAAI,oBAAoB,GAAG,CAAC,CAAC;MAMhB,KAAK;EA2BhB;;;IAFQ,OAAE,GAAG,EAAE,oBAAoB,CAAC;qBArBgB,KAAK;;;GAuBzC;EAER,aAAa,CAAC,CAAQ;IAC5B,IAAK,CAAC,CAAC,MAAkB,CAAC,OAAO,CAAC,iBAAiB,CAAC,EAAE;MACpD,OAAO;KACR;IAED,CAAC,CAAC,cAAc,EAAE,CAAC;IACnB,CAAC,CAAC,wBAAwB,EAAE,CAAC;IAE7B,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;IACjC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;GAC3C;EAED,gBAAgB;IACd,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;GACtC;EAED,IAAI,OAAO;IACT,OAAO,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;GACpE;EAGD,SAAS,CAAC,WAAoB;IAC5B,IAAI,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC;GACnC;EAEO,eAAe,CAAC,WAAoB;IAC1C,IAAI,WAAW,EAAE;MACf,IAAI,CAAC,kBAAkB,EAAE,CAAC;KAC3B;SAAM;MACL,IAAI,CAAC,iBAAiB,EAAE,CAAC;KAC1B;GACF;EAEO,iBAAiB;IACvB,KAAK,CAAC;MACJ,OAAO,EAAE,IAAI,CAAC,UAAU;MACxB,QAAQ,EAAE,GAAG;MACb,MAAM,EAAE,eAAe;MACvB,OAAO,EAAE,EAAE;KACZ,CAAC,CAAC;IACH,KAAK,CAAC;MACJ,OAAO,EAAE,IAAI,CAAC,OAAO;MACrB,QAAQ,EAAE,GAAG;MACb,MAAM,EAAE,eAAe;MACvB,OAAO,EAAE,CAAC;KACX,CAAC,CAAC;GACJ;EAEO,kBAAkB;IACxB,KAAK,CAAC;MACJ,OAAO,EAAE,IAAI,CAAC,UAAU;MACxB,QAAQ,EAAE,GAAG;MACb,MAAM,EAAE,eAAe;MACvB,OAAO,EAAE,CAAC;KACX,CAAC,CAAC;IACH,KAAK,CAAC;MACJ,OAAO,EAAE,IAAI,CAAC,OAAO;MACrB,QAAQ,EAAE,GAAG;MACb,MAAM,EAAE,eAAe;MACvB,OAAO,EAAE,CAAC;KACX,CAAC,CAAC;GACJ;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,cACE,KAAK,EAAE;QACL,cAAc,EAAE,IAAI;QACpB,MAAM,EAAE,IAAI,CAAC,SAAS;OACvB,EACD,IAAI,EAAC,QAAQ,qBACI,yBAAyB,IAAI,CAAC,EAAE,EAAE,mBACpC,4BAA4B,IAAI,CAAC,EAAE,EAAE,mBACrC,WAAW,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,EAC3C,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAErC,eACE,KAAK,EAAE,eAAe,EACtB,IAAI,EAAC,qBAAqB,EAC1B,GAAG,EAAE,CAAC,GAAG,MAAM,IAAI,CAAC,UAAU,GAAG,GAAG,CAAC,GAC5B,EACX,WACE,KAAK,EAAC,oBAAoB,EAC1B,EAAE,EAAE,yBAAyB,IAAI,CAAC,EAAE,EAAE,IAErC,IAAI,CAAC,KAAK,KAAK,SAAS,IACvB,YAAM,KAAK,EAAC,0BAA0B,IACnC,IAAI,CAAC,IAAI,KAAK,SAAS,IACtB,eAAS,IAAI,EAAE,IAAI,CAAC,IAAI,GAAY,KAEpC,EAAE,CACH,EACD,YAAM,KAAK,EAAC,4BAA4B,IAAE,IAAI,CAAC,KAAK,CAAQ,EAC5D,YACE,KAAK,EAAC,gBAAgB,EACtB,OAAO,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,wBAAwB,EAAE,IAE5C,YAAM,IAAI,EAAC,gBAAgB,GAAQ,CAC9B,CACF,KAEP,YAAM,IAAI,EAAC,eAAe,GAAQ,CACnC,CACG,CACC,EACT,eACE,EAAE,EAAE,4BAA4B,IAAI,CAAC,EAAE,EAAE,qBACxB,yBAAyB,IAAI,CAAC,EAAE,EAAE,IAEnD,WACE,KAAK,EAAE;QACL,eAAe,EAAE,IAAI;QACrB,IAAI,EAAE,IAAI,CAAC,SAAS;OACrB,IAED,eAAa,CACT,CACE,CACL,EACP;GACH;;;;;;;;;;","names":[],"sources":["./src/components/utils/a11y.ts","./src/components/blind/blind.scss?tag=ix-blind&encapsulation=shadow","./src/components/blind/blind.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nexport const a11yBoolean = (value: boolean) => (value ? 'true' : 'false');\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/fonts';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n\n:host {\n  display: flex;\n  flex-direction: column;\n  background-color: var(--theme-blind-base--background);\n  border: solid var(--theme-blind--border-thickness)\n    var(--theme-blind-base--border-color);\n  border-radius: var(--theme-blind--border-radius);\n  overflow: hidden;\n\n  .blind-header {\n    all: unset;\n    @include ellipsis;\n\n    display: flex;\n    align-items: center;\n    min-height: 3rem;\n    height: 3rem;\n    border: solid var(--theme-blind--border-thickness) transparent;\n    border-radius: var(--theme-blind--border-radius)\n      var(--theme-blind--border-radius) 0 0;\n    padding-right: $small-space;\n    transition: border-radius $default-time;\n    cursor: pointer;\n\n    z-index: 1;\n\n    color: var(--theme-blind-header-closed--color);\n    background-color: var(--theme-blind-header-closed--background);\n\n    .collapse-icon {\n      color: var(--theme-blind-header-icon-closed--color);\n      padding: $tiny-space $small-space;\n    }\n\n    .blind-header-title,\n    .blind-header-title-basic {\n      @include ellipsis;\n      display: flex;\n      align-items: center;\n      flex-grow: 1;\n      height: 100%;\n\n      .blind-header-title-default {\n        @include ellipsis;\n        @include text-l-title;\n        margin-inline-end: $small-space;\n        flex-grow: 1;\n      }\n    }\n\n    .blind-header-title-basic ix-icon {\n      margin-inline-end: $small-space;\n    }\n\n    @include hover {\n      background-color: var(--theme-blind-header-open--background--hover);\n\n      .collapse-icon {\n        color: var(--theme-blind-header-icon-open--color--hover);\n      }\n    }\n\n    @include active {\n      background-color: var(--theme-blind-header-open--background--active);\n\n      .collapse-icon {\n        color: var(--theme-blind-header-icon-open--color--active);\n      }\n    }\n\n    @include focus-visible {\n      border-color: var(--theme-color-focus-bdr);\n      outline: none;\n    }\n\n    &.closed {\n      border-radius: var(--theme-blind--border-radius);\n\n      @include hover {\n        background-color: var(--theme-blind-header-open--background--hover);\n\n        .collapse-icon {\n          color: var(--theme-blind-header-icon-closed--color--hover);\n        }\n      }\n\n      @include active {\n        background-color: var(--theme-blind-header-open--background--active);\n\n        .collapse-icon {\n          color: var(--theme-blind-header-icon-closed--color--active);\n        }\n      }\n    }\n  }\n\n  .blind-content {\n    display: block;\n    padding: 1rem;\n    transition-property: padding;\n    transition-duration: $default-time;\n    transition-timing-function: ease-in;\n\n    &.hide {\n      max-height: 0;\n      padding-top: 0px;\n      padding-bottom: 0px;\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 {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { a11yBoolean } from '../utils/a11y';\n\nlet sequentialInstanceId = 0;\n@Component({\n  tag: 'ix-blind',\n  styleUrl: 'blind.scss',\n  shadow: true,\n})\nexport class Blind {\n  /**\n   * Collapsed state\n   */\n  @Prop({ mutable: true, reflect: true }) collapsed = false;\n\n  /**\n   * Label of blind\n   */\n  @Prop() label: string;\n\n  /**\n   * Optional icon to be displayed next to the header label\n   * @since 1.5.0\n   */\n  @Prop() icon: string;\n\n  /**\n   * Collapsed state changed\n   */\n  @Event() collapsedChange: EventEmitter<boolean>;\n\n  @Element() hostElement!: HTMLIxBlindElement;\n\n  private chevronRef: HTMLElement;\n  private id = ++sequentialInstanceId;\n\n  constructor() {}\n\n  private onHeaderClick(e: Event) {\n    if ((e.target as Element).closest('.header-actions')) {\n      return;\n    }\n\n    e.preventDefault();\n    e.stopImmediatePropagation();\n\n    this.collapsed = !this.collapsed;\n    this.collapsedChange.emit(this.collapsed);\n  }\n\n  componentDidLoad() {\n    this.animateCollapse(this.collapsed);\n  }\n\n  get content() {\n    return this.hostElement.shadowRoot.querySelector('.blind-content');\n  }\n\n  @Watch('collapsed')\n  animation(isCollapsed: boolean) {\n    this.animateCollapse(isCollapsed);\n  }\n\n  private animateCollapse(isCollapsed: boolean) {\n    if (isCollapsed) {\n      this.rotateChevronRight();\n    } else {\n      this.rotateChevronDown();\n    }\n  }\n\n  private rotateChevronDown() {\n    anime({\n      targets: this.chevronRef,\n      duration: 150,\n      easing: 'easeInOutSine',\n      rotateZ: 90,\n    });\n    anime({\n      targets: this.content,\n      duration: 150,\n      easing: 'easeInOutSine',\n      opacity: 1,\n    });\n  }\n\n  private rotateChevronRight() {\n    anime({\n      targets: this.chevronRef,\n      duration: 150,\n      easing: 'easeInOutSine',\n      rotateZ: 0,\n    });\n    anime({\n      targets: this.content,\n      duration: 150,\n      easing: 'easeInOutSine',\n      opacity: 0,\n    });\n  }\n\n  render() {\n    return (\n      <Host>\n        <button\n          class={{\n            'blind-header': true,\n            closed: this.collapsed,\n          }}\n          type=\"button\"\n          aria-labelledby={`ix-blind-header-title-${this.id}`}\n          aria-controls={`ix-blind-content-section-${this.id}`}\n          aria-expanded={a11yBoolean(!this.collapsed)}\n          onClick={(e) => this.onHeaderClick(e)}\n        >\n          <ix-icon\n            class={'collapse-icon'}\n            name=\"chevron-right-small\"\n            ref={(ref) => (this.chevronRef = ref)}\n          ></ix-icon>\n          <div\n            class=\"blind-header-title\"\n            id={`ix-blind-header-title-${this.id}`}\n          >\n            {this.label !== undefined ? (\n              <span class=\"blind-header-title-basic\">\n                {this.icon !== undefined ? (\n                  <ix-icon name={this.icon}></ix-icon>\n                ) : (\n                  ''\n                )}\n                <span class=\"blind-header-title-default\">{this.label}</span>\n                <span\n                  class=\"header-actions\"\n                  onClick={(e) => e.stopImmediatePropagation()}\n                >\n                  <slot name=\"header-actions\"></slot>\n                </span>\n              </span>\n            ) : (\n              <slot name=\"custom-header\"></slot>\n            )}\n          </div>\n        </button>\n        <section\n          id={`ix-blind-content-section-${this.id}`}\n          aria-labelledby={`ix-blind-header-title-${this.id}`}\n        >\n          <div\n            class={{\n              'blind-content': true,\n              hide: this.collapsed,\n            }}\n          >\n            <slot></slot>\n          </div>\n        </section>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/ix-breadcrumb_2.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-57424926.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-8ddfb6d8.js';
 import { a as anime } from './anime.es-185e9087.js';
 import { c as createMutationObserver } from './mutation-observer-7d01bbea.js';
 

package/dist/esm/ix-burger-menu.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-57424926.js';
+import { r as registerInstance, h, H as Host } from './index-8ddfb6d8.js';
 
 const burgerMenuCss = ":host{display:flex;justify-content:center;align-items:center;height:2rem;width:2.5rem;border-radius:var(--theme-btn--border-radius)}:host svg{display:inline-block;position:relative}:host .line{fill:var(--theme-menu-btn--color);opacity:1;x:2px;transition:x 0.075s ease-in 0.15s, transform 0.075s ease-in-out 0.075s, y 0.075s ease-in-out, opacity 0.075s linear 0.075s;transform-origin:center}:host(:hover){background-color:var(--theme-menu-btn--background--hover);border-radius:var(--theme-btn--border-radius)}:host(:active){background-color:var(--theme-menu-btn--background--active);border-radius:var(--theme-btn--border-radius)}:host(.expanded) svg .line-1{opacity:1;transform:rotate(-45deg);y:11px}:host(.expanded) svg .line-2{opacity:0;x:9}:host(.expanded) svg .line-3{opacity:1;transform:rotate(45deg);y:11px}";
 

package/dist/esm/ix-button.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, h, H as Host } from './index-57424926.js';
+import { r as registerInstance, h, H as Host } from './index-8ddfb6d8.js';
 import { g as getButtonClasses } from './base-button-5bfeb71c.js';
 
-const buttonCss = ".sc-ix-button-h{display:inline-block;width:auto;height:2rem}.disabled.sc-ix-button-h{pointer-events:none}.sc-ix-button-h .btn.sc-ix-button{width:100%;height:100%}";
+const buttonCss = ".btn{display:inline-flex;align-items:center;justify-content:center;height:2rem;font-size:0.875rem;font-weight:700;transition:150ms;padding:0 0.5rem;min-width:5rem;gap:0.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.btn .glyph{margin-right:0.25rem;font-weight:400}.btn:focus-visible,.btn.focus{box-shadow:none}.btn-primary{border-radius:var(--theme-btn--border-radius)}.btn-primary,.btn-primary.focus,.btn-primary:focus-visible{background-color:var(--theme-btn-primary--background);color:var(--theme-btn-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-primary--border-color);border-style:solid}.btn-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-primary.selected{background-color:var(--theme-btn-primary--background--selected)}.btn-primary.hover,.btn-primary:hover{border-color:var(--theme-btn-primary--border-color--hover) !important;background-color:var(--theme-btn-primary--background--hover) !important;color:var(--theme-btn-primary--color--hover) !important}.btn-primary.selected.hover,.btn-primary.selected:hover{background-color:var(--theme-btn-primary--background--selected-hover);color:var(--theme-btn-primary--color--selected-hover)}.btn-primary:not(:disabled):not(.disabled):active,.btn-primary:not(:disabled):not(.disabled).active,.show>.btn-primary.dropdown-toggle{border-color:var(--theme-btn-primary--border-color--active) !important;background-color:var(--theme-btn-primary--background--active) !important;color:var(--theme-btn-primary--color--active) !important}.btn-primary.selected:not(:disabled):not(.disabled):active,.btn-primary.selected:not(:disabled):not(.disabled).active,.show>.btn-primary.selected.dropdown-toggle{background-color:var(--theme-btn-primary--background--selected-active);color:var(--theme-btn-primary--color--selected-active)}.btn-primary.disabled,.btn-primary:disabled{pointer-events:none;cursor:initial;border-color:var(--theme-btn-primary--border-color--disabled);background-color:var(--theme-btn-primary--background--disabled);color:var(--theme-btn-primary--color--disabled);opacity:1}.btn-outline-primary{border-radius:var(--theme-btn--border-radius)}.btn-outline-primary,.btn-outline-primary.focus,.btn-outline-primary:focus-visible{background-color:var(--theme-btn-outline-primary--background);color:var(--theme-btn-outline-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-primary--border-color);border-style:solid}.btn-outline-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-outline-primary.selected{background-color:var(--theme-btn-outline-primary--background--selected)}.btn-outline-primary.hover,.btn-outline-primary:hover{border-color:var(--theme-btn-outline-primary--border-color--hover) !important;background-color:var(--theme-btn-outline-primary--background--hover) !important;color:var(--theme-btn-outline-primary--color--hover) !important}.btn-outline-primary.selected.hover,.btn-outline-primary.selected:hover{background-color:var(--theme-btn-outline-primary--background--selected-hover);color:var(--theme-btn-outline-primary--color--selected-hover)}.btn-outline-primary:not(:disabled):not(.disabled):active,.btn-outline-primary:not(:disabled):not(.disabled).active,.show>.btn-outline-primary.dropdown-toggle{border-color:var(--theme-btn-outline-primary--border-color--active) !important;background-color:var(--theme-btn-outline-primary--background--active) !important;color:var(--theme-btn-outline-primary--color--active) !important}.btn-outline-primary.selected:not(:disabled):not(.disabled):active,.btn-outline-primary.selected:not(:disabled):not(.disabled).active,.show>.btn-outline-primary.selected.dropdown-toggle{background-color:var(--theme-btn-outline-primary--background--selected-active);color:var(--theme-btn-outline-primary--color--selected-active)}.btn-outline-primary.disabled,.btn-outline-primary:disabled{pointer-events:none;cursor:initial;border-color:var(--theme-btn-outline-primary--border-color--disabled);background-color:var(--theme-btn-outline-primary--background--disabled);color:var(--theme-btn-outline-primary--color--disabled);opacity:1}.btn-invisible-primary{border-radius:var(--theme-btn--border-radius);--bs-btn-border-width:0px;--bs-btn-active-border-color:none}.btn-invisible-primary,.btn-invisible-primary.focus,.btn-invisible-primary:focus-visible{background-color:var(--theme-btn-invisible-primary--background);color:var(--theme-btn-invisible-primary--color);border-color:transparent}.btn-invisible-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-invisible-primary.selected{background-color:var(--theme-btn-invisible-primary--background--selected)}.btn-invisible-primary.hover,.btn-invisible-primary:hover{background-color:var(--theme-btn-invisible-primary--background--hover) !important;color:var(--theme-btn-invisible-primary--color--hover) !important}.btn-invisible-primary.selected.hover,.btn-invisible-primary.selected:hover{background-color:var(--theme-btn-invisible-primary--background--selected-hover);color:var(--theme-btn-invisible-primary--color--selected-hover)}.btn-invisible-primary:not(:disabled):not(.disabled):active,.btn-invisible-primary:not(:disabled):not(.disabled).active,.show>.btn-invisible-primary.dropdown-toggle{background-color:var(--theme-btn-invisible-primary--background--active) !important;color:var(--theme-btn-invisible-primary--color--active) !important}.btn-invisible-primary.selected:not(:disabled):not(.disabled):active,.btn-invisible-primary.selected:not(:disabled):not(.disabled).active,.show>.btn-invisible-primary.selected.dropdown-toggle{background-color:var(--theme-btn-invisible-primary--background--selected-active);color:var(--theme-btn-invisible-primary--color--selected-active)}.btn-invisible-primary.disabled,.btn-invisible-primary:disabled{pointer-events:none;cursor:initial;background-color:var(--theme-btn-invisible-primary--background--disabled);color:var(--theme-btn-invisible-primary--color--disabled);opacity:1}.btn-secondary{border-radius:var(--theme-btn--border-radius)}.btn-secondary,.btn-secondary.focus,.btn-secondary:focus-visible{background-color:var(--theme-btn-secondary--background);color:var(--theme-btn-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-secondary--border-color);border-style:solid}.btn-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-secondary.selected{background-color:var(--theme-btn-secondary--background--selected)}.btn-secondary.hover,.btn-secondary:hover{border-color:var(--theme-btn-secondary--border-color--hover) !important;background-color:var(--theme-btn-secondary--background--hover) !important;color:var(--theme-btn-secondary--color--hover) !important}.btn-secondary.selected.hover,.btn-secondary.selected:hover{background-color:var(--theme-btn-secondary--background--selected-hover);color:var(--theme-btn-secondary--color--selected-hover)}.btn-secondary:not(:disabled):not(.disabled):active,.btn-secondary:not(:disabled):not(.disabled).active,.show>.btn-secondary.dropdown-toggle{border-color:var(--theme-btn-secondary--border-color--active) !important;background-color:var(--theme-btn-secondary--background--active) !important;color:var(--theme-btn-secondary--color--active) !important}.btn-secondary.selected:not(:disabled):not(.disabled):active,.btn-secondary.selected:not(:disabled):not(.disabled).active,.show>.btn-secondary.selected.dropdown-toggle{background-color:var(--theme-btn-secondary--background--selected-active);color:var(--theme-btn-secondary--color--selected-active)}.btn-secondary.disabled,.btn-secondary:disabled{pointer-events:none;cursor:initial;border-color:var(--theme-btn-secondary--border-color--disabled);background-color:var(--theme-btn-secondary--background--disabled);color:var(--theme-btn-secondary--color--disabled);opacity:1}.btn-outline-secondary{border-radius:var(--theme-btn--border-radius)}.btn-outline-secondary,.btn-outline-secondary.focus,.btn-outline-secondary:focus-visible{background-color:var(--theme-btn-outline-secondary--background);color:var(--theme-btn-outline-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-secondary--border-color);border-style:solid}.btn-outline-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-outline-secondary.selected{background-color:var(--theme-btn-outline-secondary--background--selected)}.btn-outline-secondary.hover,.btn-outline-secondary:hover{border-color:var(--theme-btn-outline-secondary--border-color--hover) !important;background-color:var(--theme-btn-outline-secondary--background--hover) !important;color:var(--theme-btn-outline-secondary--color--hover) !important}.btn-outline-secondary.selected.hover,.btn-outline-secondary.selected:hover{background-color:var(--theme-btn-outline-secondary--background--selected-hover);color:var(--theme-btn-outline-secondary--color--selected-hover)}.btn-outline-secondary:not(:disabled):not(.disabled):active,.btn-outline-secondary:not(:disabled):not(.disabled).active,.show>.btn-outline-secondary.dropdown-toggle{border-color:var(--theme-btn-outline-secondary--border-color--active) !important;background-color:var(--theme-btn-outline-secondary--background--active) !important;color:var(--theme-btn-outline-secondary--color--active) !important}.btn-outline-secondary.selected:not(:disabled):not(.disabled):active,.btn-outline-secondary.selected:not(:disabled):not(.disabled).active,.show>.btn-outline-secondary.selected.dropdown-toggle{background-color:var(--theme-btn-outline-secondary--background--selected-active);color:var(--theme-btn-outline-secondary--color--selected-active)}.btn-outline-secondary.disabled,.btn-outline-secondary:disabled{pointer-events:none;cursor:initial;border-color:var(--theme-btn-outline-secondary--border-color--disabled);background-color:var(--theme-btn-outline-secondary--background--disabled);color:var(--theme-btn-outline-secondary--color--disabled);opacity:1}.btn-invisible-secondary{border-radius:var(--theme-btn--border-radius);--bs-btn-border-width:0px;--bs-btn-active-border-color:none}.btn-invisible-secondary,.btn-invisible-secondary.focus,.btn-invisible-secondary:focus-visible{background-color:var(--theme-btn-invisible-secondary--background);color:var(--theme-btn-invisible-secondary--color);border-color:transparent}.btn-invisible-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-invisible-secondary.selected{background-color:var(--theme-btn-invisible-secondary--background--selected)}.btn-invisible-secondary.hover,.btn-invisible-secondary:hover{background-color:var(--theme-btn-invisible-secondary--background--hover) !important;color:var(--theme-btn-invisible-secondary--color--hover) !important}.btn-invisible-secondary.selected.hover,.btn-invisible-secondary.selected:hover{background-color:var(--theme-btn-invisible-secondary--background--selected-hover);color:var(--theme-btn-invisible-secondary--color--selected-hover)}.btn-invisible-secondary:not(:disabled):not(.disabled):active,.btn-invisible-secondary:not(:disabled):not(.disabled).active,.show>.btn-invisible-secondary.dropdown-toggle{background-color:var(--theme-btn-invisible-secondary--background--active) !important;color:var(--theme-btn-invisible-secondary--color--active) !important}.btn-invisible-secondary.selected:not(:disabled):not(.disabled):active,.btn-invisible-secondary.selected:not(:disabled):not(.disabled).active,.show>.btn-invisible-secondary.selected.dropdown-toggle{background-color:var(--theme-btn-invisible-secondary--background--selected-active);color:var(--theme-btn-invisible-secondary--color--selected-active)}.btn-invisible-secondary.disabled,.btn-invisible-secondary:disabled{pointer-events:none;cursor:initial;background-color:var(--theme-btn-invisible-secondary--background--disabled);color:var(--theme-btn-invisible-secondary--color--disabled);opacity:1}.btn-oval,.btn-icon{min-width:2rem;width:2rem}.btn-oval .glyph,.btn-icon .glyph{margin-right:0}.btn-oval{border-radius:6.25rem;width:2rem}.btn-icon-xs,.btn-icon-12{height:1rem;width:1rem;min-width:1rem;min-height:1rem}.btn-icon-s,.btn-icon-16{height:1.5rem;width:1.5rem;min-width:1.5rem;min-height:1.5rem}.btn-icon-32{height:2rem;width:2rem;min-width:2rem;min-height:2rem}:host{display:inline-block;width:auto;height:2rem;vertical-align:middle}:host.disabled{pointer-events:none}:host .btn{width:100%;height:100%}:host button:not(:disabled){cursor:pointer}";
 
 const Button = class {
   constructor(hostRef) {

package/dist/esm/ix-button.entry.js.map

@@ -1 +1 @@
-{"file":"ix-button.entry.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,oKAAoK;;MCmBzK,MAAM;;;mBAIgB,SAAS;mBAKxB,KAAK;qBAOH,KAAK;iBAKT,KAAK;oBAKF,KAAK;oBAKY,KAAK;gBAKL,QAAQ;;EAE5C,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,IAED,cACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,gBAAgB,CACrB,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,SAAS,EAC5B,KAAK,EACL,KAAK,EACL,IAAI,CAAC,QAAQ,EACb,IAAI,CAAC,QAAQ,CACd,IAED,eAAa,CACN,CACJ,EACP;GACH;;;;;;","names":[],"sources":["./src/components/button/button.scss?tag=ix-button&encapsulation=scoped","./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\n:host {\n  display: inline-block;\n  width: auto;\n  height: 2rem;\n\n  &.disabled {\n    pointer-events: none;\n  }\n\n  .btn {\n    width: 100%;\n    height: 100%;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\nimport { getButtonClasses } from './base-button';\n\nexport type ButtonVariant = 'Primary' | 'Secondary';\n\n@Component({\n  tag: 'ix-button',\n  scoped: true,\n  styleUrl: './button.scss',\n})\nexport class Button {\n  /**\n   * Button varaint\n   */\n  @Prop() variant: ButtonVariant = 'Primary';\n\n  /**\n   * Outline button\n   */\n  @Prop() outline = false;\n\n  /**\n   * Invisible button\n   *\n   * @deprecated use ghost property\n   */\n  @Prop() invisible = false;\n\n  /**\n   * Button with no background or outline\n   */\n  @Prop() ghost = false;\n\n  /**\n   * Show button as selected. Should be used with outline or ghost\n   */\n  @Prop() selected = 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  render() {\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n        }}\n      >\n        <button\n          type={this.type}\n          class={getButtonClasses(\n            this.variant,\n            this.outline,\n            this.ghost || this.invisible,\n            false,\n            false,\n            this.selected,\n            this.disabled\n          )}\n        >\n          <slot></slot>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-button.entry.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,gwZAAgwZ;;MCmBrwZ,MAAM;;;mBAIgB,SAAS;mBAKxB,KAAK;qBAOH,KAAK;iBAKT,KAAK;oBAKF,KAAK;oBAKY,KAAK;gBAKL,QAAQ;;EAE5C,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,IAED,cACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,gBAAgB,CACrB,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,SAAS,EAC5B,KAAK,EACL,KAAK,EACL,IAAI,CAAC,QAAQ,EACb,IAAI,CAAC,QAAQ,CACd,IAED,eAAa,CACN,CACJ,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\n@import 'common-variables';\n@import './components/buttons';\n\n:host {\n  display: inline-block;\n  width: auto;\n  height: 2rem;\n  vertical-align: middle;\n\n  &.disabled {\n    pointer-events: none;\n  }\n\n  .btn {\n    width: 100%;\n    height: 100%;\n  }\n\n  button:not(:disabled) {\n    cursor: pointer;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\nimport { getButtonClasses } 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   * Invisible button\n   *\n   * @deprecated use ghost property\n   */\n  @Prop() invisible = false;\n\n  /**\n   * Button with no background or outline\n   */\n  @Prop() ghost = false;\n\n  /**\n   * Show button as selected. Should be used with outline or ghost\n   */\n  @Prop() selected = 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  render() {\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n        }}\n      >\n        <button\n          type={this.type}\n          class={getButtonClasses(\n            this.variant,\n            this.outline,\n            this.ghost || this.invisible,\n            false,\n            false,\n            this.selected,\n            this.disabled\n          )}\n        >\n          <slot></slot>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/ix-card-accordion_2.entry.js

@@ -0,0 +1,69 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-8ddfb6d8.js';
+
+const cardAccordionCss = ":host{display:flex;position:relative;flex-direction:column;width:100%;height:2.5rem;max-height:2.5rem;transition:var(--theme-default-time) ease-in-out}:host *,:host *::after,:host *::before{box-sizing:border-box}: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:flex;flex-direction:column;opacity:0;position:absolute;top:2.5rem;transition:var(--theme-default-time) ease-in-out;width:100%;height:0;max-height:20rem;background-color:var(--theme-color-component-1)}:host .expand-content.show{height:15rem;opacity:1}:host .expand-content.show .expand-content-body{display:none;overflow:hidden}:host .expand-content.show .expand-content-body{display:block;overflow:auto}: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)}:host(.show){height:calc(15rem + 2.5rem);max-height:calc(15rem + 2.5rem)}";
+
+let accordionControlId = 0;
+const getAriaControlsId = (prefix = 'expand-content') => {
+  return [prefix, accordionControlId++].join('-');
+};
+const CardAccordion = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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", class: {
+        show: this.expandContent,
+      } }, 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-body' }, h("slot", null)), h("div", { class: 'expand-content-footer' }))));
+  }
+  get hostElement() { return getElement(this); }
+};
+CardAccordion.style = cardAccordionCss;
+
+const cardTitleCss = ":host{display:flex;position:relative;flex-direction:row;align-items:center;padding:0px;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 = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h(Host, null, h("slot", null), h("div", { class: "title-actions" }, h("slot", { name: "title-actions" }))));
+  }
+};
+CardHeader.style = cardTitleCss;
+
+export { CardAccordion as ix_card_accordion, CardHeader as ix_card_title };
+
+//# sourceMappingURL=ix-card-accordion_2.entry.js.map

package/dist/esm/ix-card-accordion_2.entry.js.map

@@ -0,0 +1 @@
+{"file":"ix-card-accordion.ix-card-title.entry.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,ksEAAksE;;ACU3tE,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,IACH,IAAI,EAAC,gBAAgB,EACrB,KAAK,EAAE;QACL,IAAI,EAAE,IAAI,CAAC,aAAa;OACzB,IAED,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,EAAC,qBAAqB,EAC1B,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,EAAE,qBAAqB,IAC/B,eAAa,CACT,EACN,WAAK,KAAK,EAAE,uBAAuB,GAAQ,CACvC,CACD,EACP;GACH;;;;;ACzGH,MAAM,YAAY,GAAG,uPAAuP;;MCY/P,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-accordion/card-accordion.scss?tag=ix-card-accordion&encapsulation=shadow","./src/components/card-accordion/card-accordion.tsx","./src/components/card-title/card-title.scss?tag=ix-card-title&encapsulation=shadow","./src/components/card-title/card-title.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$action-height: 2.5rem;\n$expand-content-height: 15rem;\n\n:host {\n  @include ix-component;\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  width: 100%;\n  height: $action-height;\n  max-height: $action-height;\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: $action-height;\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: flex;\n    flex-direction: column;\n    opacity: 0;\n    position: absolute;\n    top: $action-height;\n    transition: var(--theme-default-time) ease-in-out;\n    width: 100%;\n    height: 0;\n    max-height: 20rem;\n    background-color: var(--theme-color-component-1);\n  }\n\n  .expand-content.show {\n    height: $expand-content-height;\n    opacity: 1;\n  }\n\n  .expand-content.show .expand-content-body {\n    display: none;\n    overflow: hidden;\n  }\n\n  .expand-content.show .expand-content-body {\n    display: block;\n    overflow: auto;\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\n:host(.show) {\n  height: calc(#{$expand-content-height} + #{$action-height});\n  max-height: calc(#{$expand-content-height} + #{$action-height});\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\n        slot=\"card-accordion\"\n        class={{\n          show: this.expandContent,\n        }}\n      >\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-body'}>\n            <slot></slot>\n          </div>\n          <div class={'expand-content-footer'}></div>\n        </div>\n      </Host>\n    );\n  }\n}\n","@import 'common-variables';\n\n:host {\n  display: flex;\n  position: relative;\n  flex-direction: row;\n  align-items: center;\n  padding: 0px;\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/dist/esm/ix-card-list.entry.js

@@ -0,0 +1,160 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-8ddfb6d8.js';
+import { c as createMutationObserver } from './mutation-observer-7d01bbea.js';
+
+const cardListCss = ":host{display:flex;position:relative;flex-direction:column;align-items:flex-start;margin:0.5rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host .CardList_Title{display:flex;position:relative;height:1.5rem;align-items:center;width:100%;margin-bottom:0.5rem}:host .CardList__Title__Button{margin-right:1rem;transition:var(--theme-default-time) transform ease-in-out}:host .CardList__Title__Button__Collapsed{transform:rotate(-90deg)}:host .CardList__Title__Show__All{align-self:center;margin-left:auto;margin-right:0px}:host .CardList__Content{display:flex;position:relative;height:calc(100% - 1.5rem);width:100%;gap:1.5rem;transition:var(--theme-default-time) ease-in-out;overflow:auto}:host .CardList__Content__Collapsed{min-height:0px;max-height:0px;overflow:hidden;opacity:0}:host .CardList__Style__Flexbox__Scroll{flex-wrap:wrap}:host .CardList__Style__Infinite__Scroll{flex-wrap:nowrap;-ms-overflow-style:none;scrollbar-width:none}:host .CardList__Style__Infinite__Scroll::-webkit-scrollbar{display:none}:host .CardList__Overflow{display:block;position:relative;height:100%;width:100%;pointer-events:all;-webkit-mask-image:var(--ix-card-list-overflow, none);mask-image:var(--ix-card-list-overflow, none)}:host .Show__All__Card{display:flex;position:relative;align-self:flex-start;justify-self:center;max-width:11.25rem;min-width:11.25rem;width:11.25rem;min-height:11.25rem;max-height:11.25rem;height:11.25rem;--ix-card-border-color:var(--theme-color-primary);color:var(--theme-color-primary)}:host .CardList__Style__Infinite__Scroll .Show__All__Card{margin-top:2.375rem}:host .CardList__Style__Flexbox__Scroll .Show__All__Card{margin-bottom:2.375rem}:host .Show__All__Card:hover{background-color:var(--theme-color-ghost--hover)}:host .Show__All__Card:active{background-color:var(--theme-color-ghost--active)}:host .Show__All__Card__Content{display:flex;justify-content:center;align-items:center}:host .Show__All__Card__Icon{display:flex;position:absolute;height:4rem;width:4rem;justify-content:center;align-items:center;transform:scale(2)}:host .Show__All__Card__Text{margin-bottom:0px;margin-top:auto}";
+
+function CardListTitle(props) {
+  if (props.label === '') {
+    return null;
+  }
+  return (h("div", { class: "CardList_Title" }, h("ix-icon-button", { ghost: true, icon: "chevron-down", onClick: props.onClick, color: "color-primary", class: {
+      CardList__Title__Button: true,
+      CardList__Title__Button__Collapsed: props.isCollapsed,
+    } }), h("ix-typography", { variant: "large-single" }, props.label), h("ix-button", { class: "CardList__Title__Show__All", ghost: true, onClick: props.onShowAllClick }, h("span", null, props.showAllLabel), h("span", null, !isNaN(props.showAllCounter) ? ` (${props.showAllCounter})` : null))));
+}
+const CardList = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.collapseChanged = createEvent(this, "collapseChanged", 7);
+    this.showAllClick = createEvent(this, "showAllClick", 7);
+    this.showMoreCardClick = createEvent(this, "showMoreCardClick", 7);
+    this.label = undefined;
+    this.collapse = false;
+    this.listStyle = 'stack';
+    this.maxVisibleCards = 12;
+    this.showAllCount = undefined;
+    this.suppressOverflowHandling = false;
+    this.i18nShowAll = 'Show all';
+    this.i18nMoreCards = 'There are more cards available';
+    this.hasOverflowingElements = false;
+    this.numberOfOverflowingElements = 0;
+    this.numberOfAllChildElements = 0;
+    this.leftScrollDistance = 0;
+    this.rightScrollDistance = 0;
+  }
+  onCardListVisibilityToggle() {
+    this.collapse = !this.collapse;
+    this.collapseChanged.emit(this.collapse);
+  }
+  onShowAllClick(event) {
+    this.showAllClick.emit({
+      nativeEvent: event,
+    });
+  }
+  getListChildren() {
+    const slot = this.hostElement.shadowRoot.querySelector('.CardList__Content > slot');
+    return slot.assignedElements({ flatten: true });
+  }
+  changeVisibilityOfSlotChildren() {
+    const childElements = this.getListChildren();
+    childElements.forEach((element, index) => {
+      if (element instanceof HTMLElement) {
+        if (index > this.maxVisibleCards - 1) {
+          element.classList.add('d-none');
+          return;
+        }
+        element.classList.remove('d-none');
+      }
+    });
+    this.hasOverflowingElements = childElements.length > this.maxVisibleCards;
+    this.numberOfOverflowingElements =
+      childElements.length - this.maxVisibleCards;
+    this.numberOfAllChildElements = childElements.length;
+    this.detectOverflow();
+  }
+  registerOverflowHandler() {
+    this.observer = createMutationObserver(() => {
+      this.changeVisibilityOfSlotChildren();
+    });
+    this.observer.observe(this.hostElement.shadowRoot.querySelector('.CardList__Content'), {
+      childList: true,
+      subtree: true,
+    });
+    requestAnimationFrame(() => {
+      this.changeVisibilityOfSlotChildren();
+    });
+  }
+  shouldHandleOverflow() {
+    if (this.suppressOverflowHandling) {
+      return false;
+    }
+    if (this.listStyle === 'stack' || this.listStyle === 'scroll') {
+      return true;
+    }
+  }
+  get listElement() {
+    return this.hostElement.shadowRoot.querySelector('.CardList__Content');
+  }
+  onCardListScroll() {
+    this.detectOverflow();
+  }
+  isShowMoreCardVisible() {
+    return (this.suppressOverflowHandling === false && this.hasOverflowingElements);
+  }
+  getOpacityFromScrollDistance(distance) {
+    if (!this.listElement) {
+      return 0;
+    }
+    if (distance === 0) {
+      return 0;
+    }
+    if (distance > 100) {
+      return 1;
+    }
+    return distance / 100;
+  }
+  computeMaskLayer() {
+    const maxOverflowWidth = 80;
+    const maskLayer = `linear-gradient(
+      90deg,
+      transparent 0px,
+      black ${maxOverflowWidth *
+      (this.getOpacityFromScrollDistance(this.leftScrollDistance) > 0 ? 1 : 0)}px,
+      black calc(100% - ${maxOverflowWidth *
+      (this.getOpacityFromScrollDistance(this.rightScrollDistance) > 0
+        ? 1
+        : 0)}px),
+      transparent 100%
+    )`;
+    return {
+      '--ix-card-list-overflow': maskLayer,
+    };
+  }
+  detectOverflow() {
+    const { clientWidth, scrollWidth, scrollLeft } = this.listElement;
+    this.leftScrollDistance = scrollLeft;
+    this.rightScrollDistance = scrollWidth - scrollLeft - clientWidth;
+  }
+  componentDidLoad() {
+    if (this.shouldHandleOverflow()) {
+      this.registerOverflowHandler();
+    }
+  }
+  disconnectedCallback() {
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+  }
+  render() {
+    return (h(Host, null, h(CardListTitle, { isCollapsed: this.collapse, label: this.label, showAllLabel: this.i18nShowAll, showAllCounter: this.showAllCount === undefined
+        ? this.numberOfAllChildElements
+        : this.showAllCount, onClick: () => this.onCardListVisibilityToggle(), onShowAllClick: (e) => this.onShowAllClick(e) }), h("div", { class: {
+        CardList__Overflow: true,
+      }, style: this.computeMaskLayer() }, h("div", { class: {
+        CardList__Content: true,
+        CardList__Content__Collapsed: this.collapse,
+        CardList__Style__Flexbox__Scroll: this.listStyle === 'stack',
+        CardList__Style__Infinite__Scroll: this.listStyle === 'scroll',
+      }, onScroll: () => this.onCardListScroll() }, h("slot", { onSlotchange: () => this.changeVisibilityOfSlotChildren() }), this.isShowMoreCardVisible() ? (h("ix-card", { class: {
+        Show__All__Card: true,
+      }, onClick: (event) => this.showMoreCardClick.emit({
+        nativeEvent: event,
+      }) }, h("ix-card-content", { class: "Show__All__Card__Content" }, h("ix-icon", { name: "more-menu", size: '32', class: 'Show__All__Card__Icon' }), h("span", { class: "Show__All__Card__Text" }, this.i18nMoreCards, " (", this.numberOfOverflowingElements, ")")))) : null))));
+  }
+  get hostElement() { return getElement(this); }
+};
+CardList.style = cardListCss;
+
+export { CardList as ix_card_list };
+
+//# sourceMappingURL=ix-card-list.entry.js.map

package/dist/esm/ix-card-list.entry.js.map

@@ -0,0 +1 @@
+{"file":"ix-card-list.entry.js","mappings":"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","names":[],"sources":["./src/components/card-list/card-list.scss?tag=ix-card-list&encapsulation=shadow","./src/components/card-list/card-list.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$CardList__Title__Height: 1.5rem;\n\n:host {\n  @include ix-component;\n\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  align-items: flex-start;\n  margin: 0.5rem;\n\n  .CardList_Title {\n    display: flex;\n    position: relative;\n    height: $CardList__Title__Height;\n    align-items: center;\n    width: 100%;\n    margin-bottom: 0.5rem;\n  }\n\n  .CardList__Title__Button {\n    margin-right: 1rem;\n    transition: var(--theme-default-time) transform ease-in-out;\n  }\n\n  .CardList__Title__Button__Collapsed {\n    transform: rotate(-90deg);\n  }\n\n  .CardList__Title__Show__All {\n    align-self: center;\n    margin-left: auto;\n    margin-right: 0px;\n  }\n\n  .CardList__Content {\n    display: flex;\n    position: relative;\n    height: calc(100% - #{$CardList__Title__Height});\n    width: 100%;\n    gap: 1.5rem;\n    transition: var(--theme-default-time) ease-in-out;\n    overflow: auto;\n  }\n\n  .CardList__Content__Collapsed {\n    min-height: 0px;\n    max-height: 0px;\n    overflow: hidden;\n    opacity: 0;\n  }\n\n  .CardList__Style__Flexbox__Scroll {\n    flex-wrap: wrap;\n  }\n\n  .CardList__Style__Infinite__Scroll {\n    flex-wrap: nowrap;\n\n    -ms-overflow-style: none;\n    scrollbar-width: none;\n\n    &::-webkit-scrollbar {\n      display: none;\n    }\n  }\n\n  .CardList__Overflow {\n    display: block;\n    position: relative;\n    height: 100%;\n    width: 100%;\n    pointer-events: all;\n    mask-image: var(--ix-card-list-overflow, none);\n  }\n\n  .Show__All__Card {\n    display: flex;\n    position: relative;\n\n    align-self: flex-start;\n    justify-self: center;\n\n    max-width: 11.25rem;\n    min-width: 11.25rem;\n    width: 11.25rem;\n\n    min-height: 11.25rem;\n    max-height: 11.25rem;\n    height: 11.25rem;\n\n    --ix-card-border-color: var(--theme-color-primary);\n    color: var(--theme-color-primary);\n  }\n\n  .CardList__Style__Infinite__Scroll .Show__All__Card {\n    margin-top: 2.375rem;\n  }\n\n  .CardList__Style__Flexbox__Scroll .Show__All__Card {\n    margin-bottom: 2.375rem;\n  }\n\n  .Show__All__Card:hover {\n    background-color: var(--theme-color-ghost--hover);\n  }\n\n  .Show__All__Card:active {\n    background-color: var(--theme-color-ghost--active);\n  }\n\n  .Show__All__Card__Content {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .Show__All__Card__Icon {\n    display: flex;\n    position: absolute;\n    height: 4rem;\n    width: 4rem;\n    justify-content: center;\n    align-items: center;\n    transform: scale(2);\n  }\n\n  .Show__All__Card__Text {\n    margin-bottom: 0px;\n    margin-top: auto;\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\n\nfunction CardListTitle(props: {\n  label: string;\n  isCollapsed: boolean;\n  onClick: (e: MouseEvent) => void;\n  onShowAllClick: (e: MouseEvent) => void;\n  showAllLabel: string;\n  showAllCounter: number;\n}) {\n  if (props.label === '') {\n    return null;\n  }\n\n  return (\n    <div class=\"CardList_Title\">\n      <ix-icon-button\n        ghost\n        icon=\"chevron-down\"\n        onClick={props.onClick}\n        color=\"color-primary\"\n        class={{\n          CardList__Title__Button: true,\n          CardList__Title__Button__Collapsed: props.isCollapsed,\n        }}\n      ></ix-icon-button>\n      <ix-typography variant=\"large-single\">{props.label}</ix-typography>\n      <ix-button\n        class=\"CardList__Title__Show__All\"\n        ghost\n        onClick={props.onShowAllClick}\n      >\n        <span>{props.showAllLabel}</span>\n        <span>\n          {!isNaN(props.showAllCounter) ? ` (${props.showAllCounter})` : null}\n        </span>\n      </ix-button>\n    </div>\n  );\n}\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-card-list',\n  styleUrl: 'card-list.scss',\n  shadow: true,\n})\nexport class CardList {\n  /**\n   * Name the card list\n   */\n  @Prop() label: string;\n\n  /**\n   * Collapse the list\n   */\n  @Prop({ mutable: true }) collapse = false;\n\n  /**\n   * List style\n   */\n  @Prop() listStyle: 'stack' | 'scroll' = 'stack';\n\n  /**\n   * Maximal visible cards\n   *\n   * @internal\n   */\n  @Prop() maxVisibleCards = 12;\n\n  /**\n   * Overwrite the default show all count.\n   * */\n  @Prop() showAllCount: number | undefined;\n\n  /**\n   * Suppress the overflow handling of child elements\n   */\n  @Prop() suppressOverflowHandling = false;\n\n  /**\n   * i18n Show all button\n   */\n  @Prop() i18nShowAll = 'Show all';\n\n  /**\n   * i18n More cards available\n   */\n  @Prop() i18nMoreCards = 'There are more cards available';\n\n  /**\n   * Fire event when the collapse state is changed by the user\n   */\n  @Event() collapseChanged: EventEmitter<boolean>;\n\n  /**\n   * Fire event when the collapse state is changed by the user\n   */\n  @Event() showAllClick: EventEmitter<{\n    nativeEvent: MouseEvent;\n  }>;\n\n  /**\n   * Fire event when the show more card is clicked.\n   */\n  @Event() showMoreCardClick: EventEmitter<{\n    nativeEvent: MouseEvent;\n  }>;\n\n  @Element() hostElement: HTMLIxCardListElement;\n\n  @State() private hasOverflowingElements = false;\n  @State() private numberOfOverflowingElements = 0;\n  @State() private numberOfAllChildElements = 0;\n  @State() private leftScrollDistance = 0;\n  @State() private rightScrollDistance = 0;\n\n  private observer: MutationObserver;\n\n  private onCardListVisibilityToggle() {\n    this.collapse = !this.collapse;\n    this.collapseChanged.emit(this.collapse);\n  }\n\n  private onShowAllClick(event: MouseEvent) {\n    this.showAllClick.emit({\n      nativeEvent: event,\n    });\n  }\n\n  private getListChildren() {\n    const slot = this.hostElement.shadowRoot.querySelector(\n      '.CardList__Content > slot'\n    ) as HTMLSlotElement;\n    return slot.assignedElements({ flatten: true });\n  }\n\n  private changeVisibilityOfSlotChildren() {\n    const childElements = this.getListChildren();\n    childElements.forEach((element, index) => {\n      if (element instanceof HTMLElement) {\n        if (index > this.maxVisibleCards - 1) {\n          element.classList.add('d-none');\n          return;\n        }\n        element.classList.remove('d-none');\n      }\n    });\n    this.hasOverflowingElements = childElements.length > this.maxVisibleCards;\n    this.numberOfOverflowingElements =\n      childElements.length - this.maxVisibleCards;\n\n    this.numberOfAllChildElements = childElements.length;\n    this.detectOverflow();\n  }\n\n  private registerOverflowHandler() {\n    this.observer = createMutationObserver(() => {\n      this.changeVisibilityOfSlotChildren();\n    });\n\n    this.observer.observe(\n      this.hostElement.shadowRoot.querySelector('.CardList__Content'),\n      {\n        childList: true,\n        subtree: true,\n      }\n    );\n\n    requestAnimationFrame(() => {\n      this.changeVisibilityOfSlotChildren();\n    });\n  }\n\n  private shouldHandleOverflow() {\n    if (this.suppressOverflowHandling) {\n      return false;\n    }\n    if (this.listStyle === 'stack' || this.listStyle === 'scroll') {\n      return true;\n    }\n  }\n\n  private get listElement() {\n    return this.hostElement.shadowRoot.querySelector('.CardList__Content');\n  }\n\n  private onCardListScroll() {\n    this.detectOverflow();\n  }\n\n  private isShowMoreCardVisible() {\n    return (\n      this.suppressOverflowHandling === false && this.hasOverflowingElements\n    );\n  }\n\n  private getOpacityFromScrollDistance(distance: number) {\n    if (!this.listElement) {\n      return 0;\n    }\n\n    if (distance === 0) {\n      return 0;\n    }\n\n    if (distance > 100) {\n      return 1;\n    }\n\n    return distance / 100;\n  }\n\n  private computeMaskLayer() {\n    const maxOverflowWidth = 80;\n    const maskLayer = `linear-gradient(\n      90deg,\n      transparent 0px,\n      black ${\n        maxOverflowWidth *\n        (this.getOpacityFromScrollDistance(this.leftScrollDistance) > 0 ? 1 : 0)\n      }px,\n      black calc(100% - ${\n        maxOverflowWidth *\n        (this.getOpacityFromScrollDistance(this.rightScrollDistance) > 0\n          ? 1\n          : 0)\n      }px),\n      transparent 100%\n    )`;\n    return {\n      '--ix-card-list-overflow': maskLayer,\n    };\n  }\n\n  @Listen('resize', { target: 'window' })\n  private detectOverflow() {\n    const { clientWidth, scrollWidth, scrollLeft } = this.listElement;\n\n    this.leftScrollDistance = scrollLeft;\n    this.rightScrollDistance = scrollWidth - scrollLeft - clientWidth;\n  }\n\n  componentDidLoad() {\n    if (this.shouldHandleOverflow()) {\n      this.registerOverflowHandler();\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <CardListTitle\n          isCollapsed={this.collapse}\n          label={this.label}\n          showAllLabel={this.i18nShowAll}\n          showAllCounter={\n            this.showAllCount === undefined\n              ? this.numberOfAllChildElements\n              : this.showAllCount\n          }\n          onClick={() => this.onCardListVisibilityToggle()}\n          onShowAllClick={(e) => this.onShowAllClick(e)}\n        ></CardListTitle>\n        <div\n          class={{\n            CardList__Overflow: true,\n          }}\n          style={this.computeMaskLayer()}\n        >\n          <div\n            class={{\n              CardList__Content: true,\n              CardList__Content__Collapsed: this.collapse,\n              CardList__Style__Flexbox__Scroll: this.listStyle === 'stack',\n              CardList__Style__Infinite__Scroll: this.listStyle === 'scroll',\n            }}\n            onScroll={() => this.onCardListScroll()}\n          >\n            <slot\n              onSlotchange={() => this.changeVisibilityOfSlotChildren()}\n            ></slot>\n            {this.isShowMoreCardVisible() ? (\n              <ix-card\n                class={{\n                  Show__All__Card: true,\n                }}\n                onClick={(event) =>\n                  this.showMoreCardClick.emit({\n                    nativeEvent: event,\n                  })\n                }\n              >\n                <ix-card-content class=\"Show__All__Card__Content\">\n                  <ix-icon\n                    name=\"more-menu\"\n                    size={'32'}\n                    class={'Show__All__Card__Icon'}\n                  ></ix-icon>\n                  <span class=\"Show__All__Card__Text\">\n                    {this.i18nMoreCards} ({this.numberOfOverflowingElements})\n                  </span>\n                </ix-card-content>\n              </ix-card>\n            ) : null}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}