@siemens/ix 1.6.3 → 2.0.0-beta.1

package/dist/components/ix-action-card.js

@@ -4,7 +4,7 @@ import { d as defineCustomElement$4 } from './card-content.js';
 import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './typography.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 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 ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host 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$1 = /*@__PURE__*/ proxyCustomElement(class IxActionCard extends HTMLElement {
   constructor() {
@@ -20,7 +20,7 @@ const IxActionCard$1 = /*@__PURE__*/ proxyCustomElement(class IxActionCard exten
   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)))));
+      } }, 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" })) : null, h("div", null, this.heading ? (h("ix-typography", { format: "h4" }, this.heading)) : null, this.subheading ? (h("ix-typography", { format: "h5", color: this.variant === 'insight' ? 'soft' : undefined }, this.subheading)) : null, h("slot", null))))));
   }
   static get style() { return actionCardCss; }
 }, [1, "ix-action-card", {

package/dist/components/ix-action-card.js.map

@@ -1 +1 @@
-{"file":"ix-action-card.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,08HAA08H;;MCsBn9HA,cAAY;;;;;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":["IxActionCard"],"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}
+{"file":"ix-action-card.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,y+IAAy+I;;MCsBl/IA,cAAY;;;;;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,IAC3D,IAAI,EACR,eACG,IAAI,CAAC,OAAO,IACX,qBAAe,MAAM,EAAC,IAAI,IAAE,IAAI,CAAC,OAAO,CAAiB,IACvD,IAAI,EACP,IAAI,CAAC,UAAU,IACd,qBACE,MAAM,EAAC,IAAI,EACX,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS,GAAG,MAAM,GAAG,SAAS,IAErD,IAAI,CAAC,UAAU,CACF,IACd,IAAI,EACR,eAAa,CACT,CACU,CACV,CACL,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["IxActionCard"],"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            ) : null}\n            <div>\n              {this.heading ? (\n                <ix-typography format=\"h4\">{this.heading}</ix-typography>\n              ) : null}\n              {this.subheading ? (\n                <ix-typography\n                  format=\"h5\"\n                  color={this.variant === 'insight' ? 'soft' : undefined}\n                >\n                  {this.subheading}\n                </ix-typography>\n              ) : null}\n              <slot></slot>\n            </div>\n          </ix-card-content>\n        </ix-card>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/ix-application-sidebar.d.ts

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

package/dist/components/ix-application-sidebar.js

@@ -0,0 +1,63 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { a as anime } from './anime.es.js';
+import { A as Animation } from './animation.js';
+
+const applicationSidebarCss = ":host{display:block;position:relative;width:22rem;height:100%;padding:0}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host(.visible){border-right:2px solid var(--theme-color-soft-bdr);padding:1.5rem 0.5rem 0}";
+
+const ApplicationSidebar = /*@__PURE__*/ proxyCustomElement(class ApplicationSidebar extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.visible = true;
+  }
+  listenToggleEvent() {
+    const visibility = !this.visible;
+    const animation = {
+      targets: this.hostElement,
+      width: visibility ? ['0', '22rem'] : ['22rem', '0'],
+      opacity: visibility ? [0, 1] : [1, 0],
+      easing: 'easeInSine',
+      duration: Animation.defaultTime,
+    };
+    const changeVisibility = () => {
+      this.visible = visibility;
+    };
+    if (visibility) {
+      animation.begin = changeVisibility.bind(this);
+    }
+    else {
+      animation.complete = changeVisibility.bind(this);
+    }
+    anime(animation);
+  }
+  render() {
+    return (h(Host, { slot: "application-sidebar", class: {
+        visible: this.visible,
+      } }, this.visible ? h("slot", null) : null));
+  }
+  get hostElement() { return this; }
+  static get style() { return applicationSidebarCss; }
+}, [1, "ix-application-sidebar", {
+    "visible": [32]
+  }, [[8, "application-sidebar-toggle", "listenToggleEvent"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-application-sidebar"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-application-sidebar":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ApplicationSidebar);
+      }
+      break;
+  } });
+}
+
+const IxApplicationSidebar = ApplicationSidebar;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxApplicationSidebar, defineCustomElement };
+
+//# sourceMappingURL=ix-application-sidebar.js.map

package/dist/components/ix-application-sidebar.js.map

@@ -0,0 +1 @@
+{"file":"ix-application-sidebar.js","mappings":";;;;AAAA,MAAM,qBAAqB,GAAG,iwBAAiwB;;MCmBlxB,kBAAkB;;;;;mBAGV,IAAI;;EAKvB,iBAAiB;IACf,MAAM,UAAU,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;IACjC,MAAM,SAAS,GAAsB;MACnC,OAAO,EAAE,IAAI,CAAC,WAAW;MACzB,KAAK,EAAE,UAAU,GAAG,CAAC,GAAG,EAAE,OAAO,CAAC,GAAG,CAAC,OAAO,EAAE,GAAG,CAAC;MACnD,OAAO,EAAE,UAAU,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC;MACrC,MAAM,EAAE,YAAY;MACpB,QAAQ,EAAE,SAAS,CAAC,WAAW;KAChC,CAAC;IAEF,MAAM,gBAAgB,GAAG;MACvB,IAAI,CAAC,OAAO,GAAG,UAAU,CAAC;KAC3B,CAAC;IAEF,IAAI,UAAU,EAAE;MACd,SAAS,CAAC,KAAK,GAAG,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC/C;SAAM;MACL,SAAS,CAAC,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAClD;IAED,KAAK,CAAC,SAAS,CAAC,CAAC;GAClB;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IACH,IAAI,EAAC,qBAAqB,EAC1B,KAAK,EAAE;QACL,OAAO,EAAE,IAAI,CAAC,OAAO;OACtB,IAEA,IAAI,CAAC,OAAO,GAAG,eAAa,GAAG,IAAI,CAC/B,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/application-sidebar/application-sidebar.scss?tag=ix-application-sidebar&encapsulation=shadow","./src/components/application-sidebar/application-sidebar.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: block;\n  position: relative;\n\n  width: 22rem;\n  height: 100%;\n\n  padding: 0;\n}\n\n:host(.visible) {\n  border-right: 2px solid var(--theme-color-soft-bdr);\n  padding: 1.5rem 0.5rem 0;\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, Listen, State } from '@stencil/core';\nimport anime from 'animejs';\nimport Animation from '../utils/animation';\n\n/** @internal */\n@Component({\n  tag: 'ix-application-sidebar',\n  styleUrl: 'application-sidebar.scss',\n  shadow: true,\n})\nexport class ApplicationSidebar {\n  @Element() hostElement!: HTMLIxApplicationSidebarElement;\n\n  @State() visible = true;\n\n  @Listen('application-sidebar-toggle', {\n    target: 'window',\n  })\n  listenToggleEvent() {\n    const visibility = !this.visible;\n    const animation: anime.AnimeParams = {\n      targets: this.hostElement,\n      width: visibility ? ['0', '22rem'] : ['22rem', '0'],\n      opacity: visibility ? [0, 1] : [1, 0],\n      easing: 'easeInSine',\n      duration: Animation.defaultTime,\n    };\n\n    const changeVisibility = () => {\n      this.visible = visibility;\n    };\n\n    if (visibility) {\n      animation.begin = changeVisibility.bind(this);\n    } else {\n      animation.complete = changeVisibility.bind(this);\n    }\n\n    anime(animation);\n  }\n\n  render() {\n    return (\n      <Host\n        slot=\"application-sidebar\"\n        class={{\n          visible: this.visible,\n        }}\n      >\n        {this.visible ? <slot></slot> : null}\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

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

package/dist/components/ix-application.js

@@ -0,0 +1,128 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { u as useContextProvider, A as ApplicationLayoutContext } from './context.js';
+import { a as applicationLayoutService, m as menuController } from './menu-service.js';
+import { h as hasSlottedElements } from './shadow-dom.js';
+import { t as themeSwitcher } from './theme-switcher.js';
+
+const applicationCss = ":host{display:flex;position:relative;width:100%;height:100%;flex-direction:column}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host ix-application-header{z-index:calc(var(--theme-z-index-sticky) + 1)}:host .logo-wrapper{display:contents}:host .application{display:flex;position:relative;flex-direction:row;height:100%;width:100%;overflow:hidden}:host main{display:block;position:relative;height:100%;width:100%;overflow:hidden}:host(.breakpoint-md){--ix-application-menu-margin-left:3.25rem}:host(.breakpoint-md) aside.slotted{margin-left:var(--ix-application-menu-margin-left)}:host(.breakpoint-md) aside.slotted+main{margin-left:0}:host(.breakpoint-md) aside:not(.slotted)+main{margin-left:var(--ix-application-menu-margin-left)}:host(.breakpoint-lg){--ix-application-menu-margin-left:0}:host(.breakpoint-sm){--ix-application-menu-margin-left:0}";
+
+const Application = /*@__PURE__*/ proxyCustomElement(class Application extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.theme = undefined;
+    this.themeSystemAppearance = false;
+    this.forceBreakpoint = undefined;
+    this.breakpoints = ['sm', 'md', 'lg'];
+    this.breakpoint = 'lg';
+    this.applicationSidebarSlotted = false;
+  }
+  forceLayoutChange(newMode) {
+    if (!newMode) {
+      applicationLayoutService.enableBreakpointDetection();
+      return;
+    }
+    applicationLayoutService.disableBreakpointDetection();
+    applicationLayoutService.setBreakpoint(newMode);
+  }
+  onBreakpointsChange(breakpoints) {
+    applicationLayoutService.setBreakpoints(breakpoints);
+  }
+  get menu() {
+    return this.hostElement.querySelector('ix-menu');
+  }
+  get applicationSidebarSlot() {
+    return this.hostElement.shadowRoot.querySelector('.application-sidebar slot');
+  }
+  onContentClick() {
+    var _a;
+    if (menuController.isPinned) {
+      return;
+    }
+    (_a = this.menu) === null || _a === void 0 ? void 0 : _a.toggleMenu(false);
+  }
+  componentWillLoad() {
+    applicationLayoutService.setBreakpoints(this.breakpoints);
+    this.contextProvider = useContextProvider(this.hostElement, ApplicationLayoutContext, {
+      hideHeader: false,
+      host: 'basic-navigation',
+      sidebar: this.applicationSidebarSlotted,
+    });
+    this.modeDisposable = applicationLayoutService.onChange.on((mode) => {
+      this.breakpoint = mode;
+    });
+    this.breakpoint = applicationLayoutService.breakpoint;
+    if (this.forceBreakpoint) {
+      this.forceLayoutChange(this.forceBreakpoint);
+    }
+    this.changeTheme();
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.modeDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
+  }
+  changeTheme() {
+    if (!this.theme) {
+      if (this.themeSystemAppearance) {
+        themeSwitcher.setVariant();
+      }
+      return;
+    }
+    if (themeSwitcher.hasVariantSuffix(this.theme)) {
+      themeSwitcher.setTheme(`theme-${this.theme}`);
+      return;
+    }
+    themeSwitcher.setTheme(`theme-${this.theme}-dark`, this.themeSystemAppearance);
+  }
+  onApplicationSidebarChange() {
+    this.contextProvider.emit({
+      hideHeader: false,
+      host: 'basic-navigation',
+      sidebar: this.applicationSidebarSlotted,
+    });
+  }
+  render() {
+    return (h(Host, { "data-role": "", class: {
+        [`breakpoint-${this.breakpoint}`]: true,
+      } }, h("slot", { name: "application-header" }), h("div", { class: "application" }, h("slot", { name: "menu" }), h("aside", { class: {
+        'application-sidebar': true,
+        slotted: this.applicationSidebarSlotted,
+      }, onClick: () => this.onContentClick() }, h("slot", { name: "application-sidebar", onSlotchange: () => (this.applicationSidebarSlotted = hasSlottedElements(this.applicationSidebarSlot)) })), h("main", { class: "content", onClick: () => this.onContentClick() }, h("slot", null)))));
+  }
+  get hostElement() { return this; }
+  static get watchers() { return {
+    "breakpoints": ["onBreakpointsChange"],
+    "theme": ["changeTheme"],
+    "themeSystemAppearance": ["changeTheme"],
+    "applicationSidebarSlotted": ["onApplicationSidebarChange"]
+  }; }
+  static get style() { return applicationCss; }
+}, [1, "ix-application", {
+    "theme": [1],
+    "themeSystemAppearance": [4, "theme-system-appearance"],
+    "forceBreakpoint": [1, "force-breakpoint"],
+    "breakpoints": [16],
+    "breakpoint": [32],
+    "applicationSidebarSlotted": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-application"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-application":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Application);
+      }
+      break;
+  } });
+}
+
+const IxApplication = Application;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxApplication, defineCustomElement };
+
+//# sourceMappingURL=ix-application.js.map

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

@@ -0,0 +1 @@
+{"file":"ix-application.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,i4CAAi4C;;MCyB34C,WAAW;;;;;;iCAWU,KAAK;;uBAmBD,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;sBAMpB,IAAI;qCACD,KAAK;;EApB1C,iBAAiB,CAAC,OAA+B;IAC/C,IAAI,CAAC,OAAO,EAAE;MACZ,wBAAwB,CAAC,yBAAyB,EAAE,CAAC;MACrD,OAAO;KACR;IAED,wBAAwB,CAAC,0BAA0B,EAAE,CAAC;IACtD,wBAAwB,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;GACjD;EAOD,mBAAmB,CAAC,WAAyB;IAC3C,wBAAwB,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;GACtD;EAOD,IAAI,IAAI;IACN,OAAO,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;GAClD;EAED,IAAI,sBAAsB;IACxB,OAAO,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAC9C,2BAA2B,CACT,CAAC;GACtB;EAIO,cAAc;;IACpB,IAAI,cAAc,CAAC,QAAQ,EAAE;MAC3B,OAAO;KACR;IACD,MAAA,IAAI,CAAC,IAAI,0CAAE,UAAU,CAAC,KAAK,CAAC,CAAC;GAC9B;EAED,iBAAiB;IACf,wBAAwB,CAAC,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAE1D,IAAI,CAAC,eAAe,GAAG,kBAAkB,CACvC,IAAI,CAAC,WAAW,EAChB,wBAAwB,EACxB;MACE,UAAU,EAAE,KAAK;MACjB,IAAI,EAAE,kBAAkB;MACxB,OAAO,EAAE,IAAI,CAAC,yBAAyB;KACxC,CACF,CAAC;IAEF,IAAI,CAAC,cAAc,GAAG,wBAAwB,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,IAAI;MAC9D,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;KACxB,CAAC,CAAC;IACH,IAAI,CAAC,UAAU,GAAG,wBAAwB,CAAC,UAAU,CAAC;IAEtD,IAAI,IAAI,CAAC,eAAe,EAAE;MACxB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;KAC9C;IAED,IAAI,CAAC,WAAW,EAAE,CAAC;GACpB;EAED,oBAAoB;;IAClB,MAAA,IAAI,CAAC,cAAc,0CAAE,OAAO,EAAE,CAAC;GAChC;EAIO,WAAW;IACjB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MACf,IAAI,IAAI,CAAC,qBAAqB,EAAE;QAC9B,aAAa,CAAC,UAAU,EAAE,CAAC;OAC5B;MAED,OAAO;KACR;IAED,IAAI,aAAa,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;MAC9C,aAAa,CAAC,QAAQ,CAAC,SAAS,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;MAC9C,OAAO;KACR;IAED,aAAa,CAAC,QAAQ,CACpB,SAAS,IAAI,CAAC,KAAK,OAAO,EAC1B,IAAI,CAAC,qBAAqB,CAC3B,CAAC;GACH;EAGD,0BAA0B;IACxB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;MACxB,UAAU,EAAE,KAAK;MACjB,IAAI,EAAE,kBAAkB;MACxB,OAAO,EAAE,IAAI,CAAC,yBAAyB;KACxC,CAAC,CAAC;GACJ;EAED,MAAM;IACJ,QACE,EAAC,IAAI,iBACO,EAAE,EACZ,KAAK,EAAE;QACL,CAAC,cAAc,IAAI,CAAC,UAAU,EAAE,GAAG,IAAI;OACxC,IAED,YAAM,IAAI,EAAC,oBAAoB,GAAQ,EACvC,WAAK,KAAK,EAAC,aAAa,IACtB,YAAM,IAAI,EAAC,MAAM,GAAQ,EACzB,aACE,KAAK,EAAE;QACL,qBAAqB,EAAE,IAAI;QAC3B,OAAO,EAAE,IAAI,CAAC,yBAAyB;OACxC,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,IAEpC,YACE,IAAI,EAAC,qBAAqB,EAC1B,YAAY,EAAE,OACX,IAAI,CAAC,yBAAyB,GAAG,kBAAkB,CAClD,IAAI,CAAC,sBAAsB,CAC5B,CAAC,GAEE,CACF,EACR,YAAM,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,IACxD,eAAa,CACR,CACH,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/application/application.scss?tag=ix-application&encapsulation=shadow","./src/components/application/application.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 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\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  .logo-wrapper {\n    display: contents;\n  }\n\n  .application {\n    display: flex;\n    position: relative;\n    flex-direction: row;\n    height: 100%;\n    width: 100%;\n    overflow: hidden;\n  }\n\n  main {\n    display: block;\n    position: relative;\n    height: 100%;\n    width: 100%;\n    overflow: hidden;\n  }\n}\n\n:host(.breakpoint-md) {\n  --ix-application-menu-margin-left: 3.25rem;\n\n  aside.slotted {\n    margin-left: var(--ix-application-menu-margin-left);\n  }\n\n  aside.slotted + main {\n    margin-left: 0;\n  }\n\n  aside:not(.slotted) + main {\n    margin-left: var(--ix-application-menu-margin-left);\n  }\n}\n\n:host(.breakpoint-lg) {\n  --ix-application-menu-margin-left: 0;\n}\n\n:host(.breakpoint-sm) {\n  --ix-application-menu-margin-left: 0;\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, Watch } from '@stencil/core';\nimport { ApplicationLayoutContext } from '../utils/application-layout/context';\nimport { applicationLayoutService } from '../utils/application-layout/service';\nimport { Breakpoint } from '../utils/breakpoints';\nimport { ContextProvider, useContextProvider } from '../utils/context';\nimport { menuController } from '../utils/menu-service/menu-service';\nimport { hasSlottedElements } from '../utils/shadow-dom';\nimport { IxTheme, themeSwitcher } from '../utils/theme-switcher';\nimport { Disposable } from '../utils/typed-event';\n\n/** @internal */\n@Component({\n  tag: 'ix-application',\n  styleUrl: 'application.scss',\n  shadow: true,\n})\nexport class Application {\n  @Element() hostElement: HTMLIxApplicationElement;\n\n  /**\n   * Application theme\n   */\n  @Prop() theme: IxTheme;\n\n  /**\n   * Use the system appearance dark or light\n   */\n  @Prop() themeSystemAppearance = false;\n\n  /**\n   * Change the responsive layout of the menu structure\n   */\n  @Prop() forceBreakpoint: Breakpoint | undefined;\n  forceLayoutChange(newMode: Breakpoint | undefined) {\n    if (!newMode) {\n      applicationLayoutService.enableBreakpointDetection();\n      return;\n    }\n\n    applicationLayoutService.disableBreakpointDetection();\n    applicationLayoutService.setBreakpoint(newMode);\n  }\n\n  /**\n   * Supported layouts\n   */\n  @Prop() breakpoints: Breakpoint[] = ['sm', 'md', 'lg'];\n  @Watch('breakpoints')\n  onBreakpointsChange(breakpoints: Breakpoint[]) {\n    applicationLayoutService.setBreakpoints(breakpoints);\n  }\n\n  @State() breakpoint: Breakpoint = 'lg';\n  @State() applicationSidebarSlotted = false;\n\n  private contextProvider: ContextProvider<typeof ApplicationLayoutContext>;\n\n  get menu(): HTMLIxMenuElement | null {\n    return this.hostElement.querySelector('ix-menu');\n  }\n\n  get applicationSidebarSlot() {\n    return this.hostElement.shadowRoot.querySelector(\n      '.application-sidebar slot'\n    ) as HTMLSlotElement;\n  }\n\n  private modeDisposable: Disposable;\n\n  private onContentClick() {\n    if (menuController.isPinned) {\n      return;\n    }\n    this.menu?.toggleMenu(false);\n  }\n\n  componentWillLoad() {\n    applicationLayoutService.setBreakpoints(this.breakpoints);\n\n    this.contextProvider = useContextProvider(\n      this.hostElement,\n      ApplicationLayoutContext,\n      {\n        hideHeader: false,\n        host: 'basic-navigation',\n        sidebar: this.applicationSidebarSlotted,\n      }\n    );\n\n    this.modeDisposable = applicationLayoutService.onChange.on((mode) => {\n      this.breakpoint = mode;\n    });\n    this.breakpoint = applicationLayoutService.breakpoint;\n\n    if (this.forceBreakpoint) {\n      this.forceLayoutChange(this.forceBreakpoint);\n    }\n\n    this.changeTheme();\n  }\n\n  disconnectedCallback() {\n    this.modeDisposable?.dispose();\n  }\n\n  @Watch('theme')\n  @Watch('themeSystemAppearance')\n  private changeTheme() {\n    if (!this.theme) {\n      if (this.themeSystemAppearance) {\n        themeSwitcher.setVariant();\n      }\n\n      return;\n    }\n\n    if (themeSwitcher.hasVariantSuffix(this.theme)) {\n      themeSwitcher.setTheme(`theme-${this.theme}`);\n      return;\n    }\n\n    themeSwitcher.setTheme(\n      `theme-${this.theme}-dark`,\n      this.themeSystemAppearance\n    );\n  }\n\n  @Watch('applicationSidebarSlotted')\n  onApplicationSidebarChange() {\n    this.contextProvider.emit({\n      hideHeader: false,\n      host: 'basic-navigation',\n      sidebar: this.applicationSidebarSlotted,\n    });\n  }\n\n  render() {\n    return (\n      <Host\n        data-role=\"\"\n        class={{\n          [`breakpoint-${this.breakpoint}`]: true,\n        }}\n      >\n        <slot name=\"application-header\"></slot>\n        <div class=\"application\">\n          <slot name=\"menu\"></slot>\n          <aside\n            class={{\n              'application-sidebar': true,\n              slotted: this.applicationSidebarSlotted,\n            }}\n            onClick={() => this.onContentClick()}\n          >\n            <slot\n              name=\"application-sidebar\"\n              onSlotchange={() =>\n                (this.applicationSidebarSlotted = hasSlottedElements(\n                  this.applicationSidebarSlot\n                ))\n              }\n            ></slot>\n          </aside>\n          <main class=\"content\" onClick={() => this.onContentClick()}>\n            <slot></slot>\n          </main>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

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

package/dist/components/ix-avatar.js

@@ -0,0 +1,8 @@
+import { A as Avatar, d as defineCustomElement$1 } from './avatar.js';
+
+const IxAvatar = Avatar;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxAvatar, defineCustomElement };
+
+//# sourceMappingURL=ix-avatar.js.map

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

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

package/dist/components/ix-basic-navigation.js

@@ -1,31 +1,70 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { s as screenMode } from './service.js';
-import { d as defineCustomElement$3 } from './application-header.js';
-import { d as defineCustomElement$2 } from './burger-menu.js';
+import { u as useContextProvider, A as ApplicationLayoutContext } from './context.js';
+import { a as applicationLayoutService, m as menuController } from './menu-service.js';
+import { d as defineCustomElement$6 } from './application-header.js';
+import { d as defineCustomElement$5 } from './burger-menu.js';
+import { d as defineCustomElement$4 } from './icon.js';
+import { d as defineCustomElement$3 } from './icon-button.js';
+import { d as defineCustomElement$2 } from './spinner.js';
 
-const 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% - 3.25rem);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 basicNavigationCss = ":host{display:flex;position:relative;width:100%;height:100%;flex-direction:column}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host ix-application-header{z-index:calc(var(--theme-z-index-sticky) + 1)}:host .logo-wrapper{display:contents}:host .content{display:flex;height:100%;width:100%;position:relative;margin-left:3.25rem;overflow:auto}:host .navigation-content{display:flex;position:relative;flex-direction:row;height:calc(100% - 2.75rem);width:100%}:host(.hide-header) .navigation-content,:host(.hide-header) .content{height:100%}:host(.breakpoint-lg) .content{margin-left:0rem}:host(.breakpoint-sm) .content{margin-left:0px;width:100%}";
 
 const BasicNavigation = /*@__PURE__*/ proxyCustomElement(class BasicNavigation extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    this.__attachShadow();
     this.applicationName = undefined;
     this.hideHeader = false;
-    this.mode = 'desktop';
+    this.forceBreakpoint = undefined;
+    this.breakpoints = ['sm', 'md', 'lg'];
+    this.breakpoint = 'lg';
+  }
+  onHideHeaderChange() {
+    var _a;
+    (_a = this.contextProvider) === null || _a === void 0 ? void 0 : _a.emit({
+      hideHeader: this.hideHeader,
+      host: 'basic-navigation',
+    });
+    this.breakpoint = applicationLayoutService.breakpoint;
+  }
+  forceLayoutChange(newMode) {
+    if (!newMode) {
+      applicationLayoutService.enableBreakpointDetection();
+      return;
+    }
+    applicationLayoutService.disableBreakpointDetection();
+    applicationLayoutService.setBreakpoint(newMode);
+  }
+  onBreakpointsChange(breakpoints) {
+    applicationLayoutService.setBreakpoints(breakpoints);
   }
   get menu() {
     return this.hostElement.querySelector('ix-menu');
   }
+  onContentClick() {
+    var _a;
+    if (menuController.isPinned) {
+      return;
+    }
+    (_a = this.menu) === null || _a === void 0 ? void 0 : _a.toggleMenu(false);
+  }
   componentWillLoad() {
-    if (this.hideHeader === false) {
-      this.modeDisposable = screenMode.onChange.on((mode) => (this.mode = mode));
-      this.mode = screenMode.mode;
+    applicationLayoutService.setBreakpoints(this.breakpoints);
+    this.contextProvider = useContextProvider(this.hostElement, ApplicationLayoutContext, {
+      hideHeader: this.hideHeader,
+      host: 'basic-navigation',
+    });
+    this.modeDisposable = applicationLayoutService.onChange.on((mode) => {
+      this.breakpoint = mode;
+    });
+    this.breakpoint = applicationLayoutService.breakpoint;
+    if (this.forceBreakpoint) {
+      this.forceLayoutChange(this.forceBreakpoint);
     }
   }
   componentDidRender() {
     if (this.menu) {
-      this.appendMenu();
-      this.adjustMenuHeight();
       this.menu.applicationName = this.applicationName;
     }
   }
@@ -33,32 +72,30 @@ const BasicNavigation = /*@__PURE__*/ proxyCustomElement(class BasicNavigation e
     var _a;
     (_a = this.modeDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
   }
-  appendMenu() {
-    this.hostElement.querySelector('#menu-placeholder').appendChild(this.menu);
-  }
-  adjustMenuHeight() {
-    if (!this.hideHeader) {
-      this.menu.style.height = 'calc(100% - 2.75rem)';
-    }
-  }
   render() {
     return (h(Host, { "data-role": "", class: {
         'hide-header': this.hideHeader,
-        [`mode-${this.mode}`]: true,
-      } }, !this.hideHeader ? (h("ix-application-header", { name: this.applicationName }, h("slot", { name: "logo" }))) : null, h("div", { id: "menu-placeholder" }), h("div", { class: "content", onClick: () => this.menu.toggleMenu(false) }, h("slot", null))));
+        [`breakpoint-${this.breakpoint}`]: true,
+      } }, !this.hideHeader ? (h("ix-application-header", { name: this.applicationName }, h("slot", { name: "logo", slot: "logo" }))) : null, h("div", { class: "navigation-content" }, h("slot", { name: "menu" }), h("div", { class: "content", onClick: () => this.onContentClick() }, h("slot", null)))));
   }
   get hostElement() { return this; }
+  static get watchers() { return {
+    "hideHeader": ["onHideHeaderChange"],
+    "breakpoints": ["onBreakpointsChange"]
+  }; }
   static get style() { return basicNavigationCss; }
-}, [6, "ix-basic-navigation", {
+}, [1, "ix-basic-navigation", {
     "applicationName": [1, "application-name"],
     "hideHeader": [4, "hide-header"],
-    "mode": [32]
+    "forceBreakpoint": [1, "force-breakpoint"],
+    "breakpoints": [16],
+    "breakpoint": [32]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["ix-basic-navigation", "ix-application-header", "ix-burger-menu"];
+  const components = ["ix-basic-navigation", "ix-application-header", "ix-burger-menu", "ix-icon", "ix-icon-button", "ix-spinner"];
   components.forEach(tagName => { switch (tagName) {
     case "ix-basic-navigation":
       if (!customElements.get(tagName)) {
@@ -67,10 +104,25 @@ function defineCustomElement$1() {
       break;
     case "ix-application-header":
       if (!customElements.get(tagName)) {
-        defineCustomElement$3();
+        defineCustomElement$6();
       }
       break;
     case "ix-burger-menu":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "ix-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "ix-icon-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "ix-spinner":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();
       }

package/dist/components/ix-basic-navigation.js.map

@@ -1 +1 @@
-{"file":"ix-basic-navigation.js","mappings":";;;;;AAAA,MAAM,kBAAkB,GAAG,kkBAAkkB;;MCmBhlB,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% - 3.25rem);\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}
+{"file":"ix-basic-navigation.js","mappings":";;;;;;;;;AAAA,MAAM,kBAAkB,GAAG,orCAAorC;;MCsBlsC,eAAe;;;;;;sBAWL,KAAK;;uBA4BU,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;sBAMpB,IAAI;;EAhCtC,kBAAkB;;IAChB,MAAA,IAAI,CAAC,eAAe,0CAAE,IAAI,CAAC;MACzB,UAAU,EAAE,IAAI,CAAC,UAAU;MAC3B,IAAI,EAAE,kBAAkB;KACzB,CAAC,CAAC;IAEH,IAAI,CAAC,UAAU,GAAG,wBAAwB,CAAC,UAAU,CAAC;GACvD;EAMD,iBAAiB,CAAC,OAA+B;IAC/C,IAAI,CAAC,OAAO,EAAE;MACZ,wBAAwB,CAAC,yBAAyB,EAAE,CAAC;MACrD,OAAO;KACR;IAED,wBAAwB,CAAC,0BAA0B,EAAE,CAAC;IACtD,wBAAwB,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;GACjD;EAOD,mBAAmB,CAAC,WAAyB;IAC3C,wBAAwB,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;GACtD;EAID,IAAI,IAAI;IACN,OAAO,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;GAClD;EAKO,cAAc;;IACpB,IAAI,cAAc,CAAC,QAAQ,EAAE;MAC3B,OAAO;KACR;IACD,MAAA,IAAI,CAAC,IAAI,0CAAE,UAAU,CAAC,KAAK,CAAC,CAAC;GAC9B;EAED,iBAAiB;IACf,wBAAwB,CAAC,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAE1D,IAAI,CAAC,eAAe,GAAG,kBAAkB,CACvC,IAAI,CAAC,WAAW,EAChB,wBAAwB,EACxB;MACE,UAAU,EAAE,IAAI,CAAC,UAAU;MAC3B,IAAI,EAAE,kBAAkB;KACzB,CACF,CAAC;IAEF,IAAI,CAAC,cAAc,GAAG,wBAAwB,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,IAAI;MAC9D,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;KACxB,CAAC,CAAC;IACH,IAAI,CAAC,UAAU,GAAG,wBAAwB,CAAC,UAAU,CAAC;IAEtD,IAAI,IAAI,CAAC,eAAe,EAAE;MACxB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;KAC9C;GACF;EAED,kBAAkB;IAChB,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,IAAI,CAAC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC;KAClD;GACF;EAED,oBAAoB;;IAClB,MAAA,IAAI,CAAC,cAAc,0CAAE,OAAO,EAAE,CAAC;GAChC;EAED,MAAM;IACJ,QACE,EAAC,IAAI,iBACO,EAAE,EACZ,KAAK,EAAE;QACL,aAAa,EAAE,IAAI,CAAC,UAAU;QAC9B,CAAC,cAAc,IAAI,CAAC,UAAU,EAAE,GAAG,IAAI;OACxC,IAEA,CAAC,IAAI,CAAC,UAAU,IACf,6BAAuB,IAAI,EAAE,IAAI,CAAC,eAAe,IAC/C,YAAM,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,GAAQ,CACf,IACtB,IAAI,EACR,WAAK,KAAK,EAAC,oBAAoB,IAC7B,YAAM,IAAI,EAAC,MAAM,GAAQ,EACzB,WAAK,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,IACvD,eAAa,CACT,CACF,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/basic-navigation/basic-navigation.scss?tag=ix-basic-navigation&encapsulation=shadow","./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@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\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  .logo-wrapper {\n    display: contents;\n  }\n\n  .content {\n    display: flex;\n    height: 100%;\n    width: 100%;\n    position: relative;\n    margin-left: 3.25rem;\n    overflow: auto;\n  }\n\n  .navigation-content {\n    display: flex;\n    position: relative;\n\n    flex-direction: row;\n\n    height: calc(100% - 2.75rem);\n    width: 100%;\n  }\n}\n\n:host(.hide-header) {\n  .navigation-content,\n  .content {\n    height: 100%;\n  }\n}\n\n:host(.breakpoint-lg) {\n  .content {\n    margin-left: 0rem;\n  }\n}\n\n:host(.breakpoint-sm) {\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, Watch } from '@stencil/core';\nimport { ApplicationLayoutContext } from '../utils/application-layout/context';\nimport { applicationLayoutService } from '../utils/application-layout/service';\nimport { Breakpoint } from '../utils/breakpoints';\nimport { ContextProvider, useContextProvider } from '../utils/context';\nimport { menuController } from '../utils/menu-service/menu-service';\nimport { Disposable } from '../utils/typed-event';\n\n@Component({\n  tag: 'ix-basic-navigation',\n  styleUrl: 'basic-navigation.scss',\n  shadow: 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  @Watch('hideHeader')\n  onHideHeaderChange() {\n    this.contextProvider?.emit({\n      hideHeader: this.hideHeader,\n      host: 'basic-navigation',\n    });\n\n    this.breakpoint = applicationLayoutService.breakpoint;\n  }\n\n  /**\n   * Change the responsive layout of the menu structure\n   */\n  @Prop() forceBreakpoint: Breakpoint | undefined;\n  forceLayoutChange(newMode: Breakpoint | undefined) {\n    if (!newMode) {\n      applicationLayoutService.enableBreakpointDetection();\n      return;\n    }\n\n    applicationLayoutService.disableBreakpointDetection();\n    applicationLayoutService.setBreakpoint(newMode);\n  }\n\n  /**\n   * Supported layouts\n   */\n  @Prop() breakpoints: Breakpoint[] = ['sm', 'md', 'lg'];\n  @Watch('breakpoints')\n  onBreakpointsChange(breakpoints: Breakpoint[]) {\n    applicationLayoutService.setBreakpoints(breakpoints);\n  }\n\n  @State() breakpoint: Breakpoint = 'lg';\n\n  get menu(): HTMLIxMenuElement | null {\n    return this.hostElement.querySelector('ix-menu');\n  }\n\n  private modeDisposable: Disposable;\n  private contextProvider: ContextProvider<typeof ApplicationLayoutContext>;\n\n  private onContentClick() {\n    if (menuController.isPinned) {\n      return;\n    }\n    this.menu?.toggleMenu(false);\n  }\n\n  componentWillLoad() {\n    applicationLayoutService.setBreakpoints(this.breakpoints);\n\n    this.contextProvider = useContextProvider(\n      this.hostElement,\n      ApplicationLayoutContext,\n      {\n        hideHeader: this.hideHeader,\n        host: 'basic-navigation',\n      }\n    );\n\n    this.modeDisposable = applicationLayoutService.onChange.on((mode) => {\n      this.breakpoint = mode;\n    });\n    this.breakpoint = applicationLayoutService.breakpoint;\n\n    if (this.forceBreakpoint) {\n      this.forceLayoutChange(this.forceBreakpoint);\n    }\n  }\n\n  componentDidRender() {\n    if (this.menu) {\n      this.menu.applicationName = this.applicationName;\n    }\n  }\n\n  disconnectedCallback() {\n    this.modeDisposable?.dispose();\n  }\n\n  render() {\n    return (\n      <Host\n        data-role=\"\"\n        class={{\n          'hide-header': this.hideHeader,\n          [`breakpoint-${this.breakpoint}`]: true,\n        }}\n      >\n        {!this.hideHeader ? (\n          <ix-application-header name={this.applicationName}>\n            <slot name=\"logo\" slot=\"logo\"></slot>\n          </ix-application-header>\n        ) : null}\n        <div class=\"navigation-content\">\n          <slot name=\"menu\"></slot>\n          <div class=\"content\" onClick={() => this.onContentClick()}>\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}