@siemens/ix 1.4.0 → 1.5.0-beta.0

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

@@ -0,0 +1 @@
+{"file":"ix-icon-button.entry.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,kIAAkI;;MCoB3I,UAAU;;;mBAIgB,WAAW;;;;;;gBAgCN,IAAI;;oBAU3B,KAAK;oBAKL,KAAK;gBAKY,QAAQ;;EAEpC,oBAAoB;IAC1B,uCACK,gBAAgB,CACjB,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,SAAS,EAC5B,IAAI,EACJ,IAAI,CAAC,IAAI,EACT,IAAI,CAAC,QAAQ,EACb,IAAI,CAAC,QAAQ,CACd,KACD,aAAa,EAAE,IAAI,EACnB,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI,EACjC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI,EACjC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,IACrE;GACH;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IACtC,cAAQ,KAAK,EAAE,IAAI,CAAC,oBAAoB,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,IACzD,eAAS,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI,EAChE,WAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,IAC7B,eAAa,CACT,CACC,CACJ,EACP;GACH;;;;;;","names":[],"sources":["./src/components/icon-button/icon-button.scss?tag=ix-icon-button&encapsulation=scoped","./src/components/icon-button/icon-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:host {\n  &.disabled {\n    pointer-events: none;\n  }\n\n  .icon-button {\n    padding: 0;\n    overflow: hidden;\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 '../button/base-button';\nimport { Button, ButtonVariant } from '../button/button';\n\nexport type IconButtonVariant = ButtonVariant;\n\n@Component({\n  tag: 'ix-icon-button',\n  styleUrl: 'icon-button.scss',\n  scoped: true,\n})\nexport class IconButton implements Button {\n  /**\n   * Variant of button\n   */\n  @Prop() variant: IconButtonVariant = 'Secondary';\n\n  /**\n   * Button outline\n   */\n  @Prop() outline: boolean;\n\n  /**\n   * Button invisible\n   *\n   * @deprecated Use ghost property\n   */\n  @Prop() invisible: boolean;\n\n  /**\n   * Button invisible\n   */\n  @Prop() ghost: boolean;\n\n  /**\n   * Button in oval shape\n   */\n  @Prop() oval: boolean;\n\n  /**\n   * Button icon\n   */\n  @Prop() icon: string;\n\n  /**\n   * Size of icon in button\n   */\n  @Prop() size: '32' | '24' | '16' | '12' = '24';\n\n  /**\n   * Color of icon in  button\n   */\n  @Prop() color: string;\n\n  /**\n   * Selected state only working with outline or invisible\n   */\n  @Prop() selected = false;\n\n  /**\n   * Disabled\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Type of the button\n   */\n  @Prop() type: 'button' | 'submit' = 'button';\n\n  private getIconButtonClasses() {\n    return {\n      ...getButtonClasses(\n        this.variant,\n        this.outline,\n        this.ghost || this.invisible,\n        true,\n        this.oval,\n        this.selected,\n        this.disabled\n      ),\n      'icon-button': true,\n      'btn-icon-12': this.size === '12',\n      'btn-icon-16': this.size === '16',\n      'btn-icon-32': this.size === '32' || this.size === '24' || !this.size,\n    };\n  }\n\n  render() {\n    return (\n      <Host class={{ disabled: this.disabled }}>\n        <button class={this.getIconButtonClasses()} type={this.type}>\n          <ix-icon size={this.size} name={this.icon} color={this.color} />\n          <div style={{ display: 'none' }}>\n            <slot></slot>\n          </div>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-6b660a23.js';
+import { r as registerInstance, h, H as Host } from './index-3d163acd.js';
 
 const iconCss = ".sc-ix-icon-h{display:inline-flex;height:1.5rem;width:1.5rem;color:var(--theme-color-std-text)}.sc-ix-icon-h i.sc-ix-icon{color:inherit;transition:color 150ms}.size-12.sc-ix-icon-h{height:0.75rem;width:0.75rem}.size-16.sc-ix-icon-h{height:1rem;width:1rem}.size-32.sc-ix-icon-h{height:2rem;width:2rem}";
 
@@ -30,3 +30,5 @@ const Icon = class {
 Icon.style = iconCss;
 
 export { Icon as ix_icon };
+
+//# sourceMappingURL=ix-icon.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"ix-icon.entry.js","mappings":";;AAAA,MAAM,OAAO,GAAG,8SAA8S;;MCgBjT,IAAI;;;;;;;EAgBf,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,KAAK,EAAE,IAAI,CAAC,KAAK,GAAG,eAAe,IAAI,CAAC,KAAK,GAAG,GAAG,SAAS;OAC7D,EACD,KAAK,EAAE;QACL,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,KAAK,IAAI;QAC/B,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,KAAK,IAAI;QAC/B,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,KAAK,IAAI;QAC/B,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,KAAK,IAAI;OAChC,IAED,SACE,KAAK,EAAE;QACL,KAAK,EAAE,IAAI;QACX,CAAC,SAAS,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI;QAC5B,UAAU,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;QAC9B,UAAU,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;QAC9B,UAAU,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;QAC9B,UAAU,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;OAC/B,IAED,eAAa,CACX,CACC,EACP;GACH;;;;;;","names":[],"sources":["./src/components/icon/icon.scss?tag=ix-icon&encapsulation=scoped","./src/components/icon/icon.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\n:host {\n  display: inline-flex;\n  height: $large-space;\n  width: $large-space;\n\n  color: var(--theme-color-std-text);\n\n  i {\n    color: inherit;\n    transition: color $default-time;\n  }\n}\n\n:host(.size-12) {\n  height: $medium-space;\n  width: $medium-space;\n}\n\n:host(.size-16) {\n  height: $default-space;\n  width: $default-space;\n}\n\n:host(.size-32) {\n  height: $x-large-space;\n  width: $x-large-space;\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';\n\n@Component({\n  tag: 'ix-icon',\n  styleUrl: 'icon.scss',\n  scoped: true,\n})\nexport class Icon {\n  /**\n   * Size of the icon\n   */\n  @Prop() size: '12' | '16' | '24' | '32';\n\n  /**\n   * Color of the icon\n   */\n  @Prop() color: string;\n\n  /**\n   * Use one of our defined icon names e.g. `copy`.\n   */\n  @Prop({ reflect: true }) name: string;\n\n  render() {\n    return (\n      <Host\n        style={{\n          color: this.color ? `var(--theme-${this.color})` : 'inherit',\n        }}\n        class={{\n          ['size-12']: this.size === '12',\n          ['size-16']: this.size === '16',\n          ['size-24']: this.size === '24',\n          ['size-32']: this.size === '32',\n        }}\n      >\n        <i\n          class={{\n            glyph: true,\n            [`glyph-${this.name}`]: true,\n            'glyph-12': this.size === '12',\n            'glyph-16': this.size === '16',\n            'glyph-24': this.size === '24',\n            'glyph-32': this.size === '32',\n          }}\n        >\n          <slot></slot>\n        </i>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/ix-input-group.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-6b660a23.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-3d163acd.js';
 
 const inputGroupCss = ".sc-ix-input-group-h{position:relative;display:flex;flex-wrap:wrap;align-items:stretch;width:100%}.sc-ix-input-group-h .group.sc-ix-input-group{display:flex;position:absolute;align-items:center;height:100%}.sc-ix-input-group-h .group-start.sc-ix-input-group{left:0px}.sc-ix-input-group-h .group-end.sc-ix-input-group{right:0px}";
 
@@ -34,3 +34,5 @@ const InputGroup = class {
 InputGroup.style = inputGroupCss;
 
 export { InputGroup as ix_input_group };
+
+//# sourceMappingURL=ix-input-group.entry.js.map

package/dist/esm/ix-input-group.entry.js.map

@@ -0,0 +1 @@
+{"file":"ix-input-group.entry.js","mappings":";;AAAA,MAAM,aAAa,GAAG,yUAAyU;;MCgBlV,UAAU;;;;EAGrB,kBAAkB;IAChB,IAAI,YAAY,GAAG,EAAE,CAAC;IACtB,IAAI,WAAW,GAAG,EAAE,CAAC;IACrB,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI;MAC5D,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;MACxC,YAAY,IAAI,IAAI,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;KACpD,CAAC,CAAC;IAEH,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,sBAAsB,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI;MAC9D,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;MACxC,WAAW,IAAI,IAAI,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;KACnD,CAAC,CAAC;IAEH,MAAM,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAC1C,oBAAoB,CACD,CAAC;IAEtB,IAAI,YAAY,EAAE;MAChB,YAAY,CAAC,KAAK,CAAC,YAAY,GAAG,YAAY,GAAG,IAAI,CAAC;MACtD,YAAY,CAAC,KAAK,CAAC,WAAW,GAAG,WAAW,GAAG,IAAI,CAAC;KACrD;SAAM;MACL,OAAO,CAAC,IAAI,CACV,uFAAuF,CACxF,CAAC;KACH;GACF;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAC,mBAAmB,IAC5B,YAAM,IAAI,EAAC,aAAa,GAAQ,CAC5B,EACN,eAAa,EACb,WAAK,KAAK,EAAC,iBAAiB,IAC1B,YAAM,IAAI,EAAC,WAAW,GAAQ,CAC1B,CACD,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/input-group/input-group.scss?tag=ix-input-group&encapsulation=scoped","./src/components/input-group/input-group.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  position: relative;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: stretch;\n  width: 100%;\n\n  .group {\n    display: flex;\n    position: absolute;\n    align-items: center;\n    height: 100%;\n  }\n\n  .group-start {\n    left: 0px;\n  }\n\n  .group-end {\n    right: 0px;\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 } from '@stencil/core';\n\n@Component({\n  tag: 'ix-input-group',\n  styleUrl: 'input-group.scss',\n  scoped: true,\n})\nexport class InputGroup {\n  @Element() host!: HTMLIxInputGroupElement;\n\n  componentDidRender() {\n    let paddingRight = 15;\n    let paddingLeft = 15;\n    this.host.querySelectorAll('[slot=\"input-end\"]').forEach((item) => {\n      item.classList.add('input-group-label');\n      paddingRight += item.getBoundingClientRect().width;\n    });\n\n    this.host.querySelectorAll('[slot=\"input-start\"]').forEach((item) => {\n      item.classList.add('input-group-label');\n      paddingLeft += item.getBoundingClientRect().width;\n    });\n\n    const inputElement = this.host.querySelector(\n      'input.form-control'\n    ) as HTMLInputElement;\n\n    if (inputElement) {\n      inputElement.style.paddingRight = paddingRight + 'px';\n      inputElement.style.paddingLeft = paddingLeft + 'px';\n    } else {\n      console.warn(\n        'You used the ix-input-group without an input-tag, e.g. <input class=\"form-control\" />'\n      );\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"group group-start\">\n          <slot name=\"input-start\"></slot>\n        </div>\n        <slot></slot>\n        <div class=\"group group-end\">\n          <slot name=\"input-end\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-6b660a23.js';
+import { r as registerInstance, h, H as Host } from './index-3d163acd.js';
 
 const kpiCss = ".sc-ix-kpi-h{display:flex;flex-grow:1;height:2.5rem;border-radius:var(--theme-kpi--border-radius);padding:0.375rem 0.25rem;min-width:0}.sc-ix-kpi-h span.sc-ix-kpi{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-ix-kpi-h .kpi-container.sc-ix-kpi{display:flex;height:100%;width:100%;-webkit-border-after:2px solid grey;border-block-end:2px solid grey}.sc-ix-kpi-h .kpi-container.alarm.sc-ix-kpi{border-block-end-color:var(--theme-color-alarm)}.sc-ix-kpi-h .kpi-container.warning.sc-ix-kpi{border-block-end-color:var(--theme-color-warning)}.sc-ix-kpi-h .kpi-container.sc-ix-kpi .kpi-label.sc-ix-kpi{display:flex;align-items:center;color:var(--theme-kpi-display-label--color);flex-grow:1;flex-shrink:9999}.sc-ix-kpi-h .kpi-container.sc-ix-kpi .kpi-label.sc-ix-kpi ix-icon.sc-ix-kpi{-webkit-margin-end:0.25rem;margin-inline-end:0.25rem}.sc-ix-kpi-h .kpi-container.sc-ix-kpi .kpi-value-container.sc-ix-kpi{display:flex;align-items:flex-end}.sc-ix-kpi-h .kpi-container.sc-ix-kpi .kpi-value.sc-ix-kpi{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:400;line-height:1.091em;color:var(--theme-color-std-text);color:var(--theme-kpi-display-value--color)}.sc-ix-kpi-h .kpi-container.sc-ix-kpi .kpi-unit.sc-ix-kpi{-webkit-margin-start:0.5rem;margin-inline-start:0.5rem;color:var(--theme-kpi-display-units--color)}.sc-ix-kpi-h .kpi-container.sc-ix-kpi .kpi-label.sc-ix-kpi,.sc-ix-kpi-h .kpi-container.sc-ix-kpi .kpi-unit.sc-ix-kpi{-webkit-margin-before:0.125rem;margin-block-start:0.125rem}.stacked.sc-ix-kpi-h{height:3.75rem}.stacked.sc-ix-kpi-h .kpi-container.sc-ix-kpi{justify-content:center;flex-wrap:wrap}.stacked.sc-ix-kpi-h .kpi-container.sc-ix-kpi .kpi-label.sc-ix-kpi{width:100%;justify-content:center}.sc-ix-kpi-h:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-kpi-h:not(.disabled):not(:disabled):hover{background-color:var(--theme-kpi-display--background--hover)}.sc-ix-kpi-h:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-kpi-h:not(.disabled):not(:disabled):active{background-color:var(--theme-kpi-display--background--active)}.sc-ix-kpi-h:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--focus--border-color)}";
 
@@ -41,3 +41,5 @@ const Kpi = class {
 Kpi.style = kpiCss;
 
 export { Kpi as ix_kpi };
+
+//# sourceMappingURL=ix-kpi.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"ix-kpi.entry.js","mappings":";;AAAA,MAAM,MAAM,GAAG,isEAAisE;;MCgBnsE,GAAG;;;;;;iBAmBmC,SAAS;uBAKT,YAAY;;EAErD,YAAY;IAClB,QAAQ,IAAI,CAAC,KAAK;MAChB,KAAK,OAAO;QACV,QACE,eACE,KAAK,EAAC,yBAAyB,EAC/B,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,IAAI,GACA,EACX;MAEJ,KAAK,SAAS;QACZ,QACE,eACE,KAAK,EAAC,yBAAyB,EAC/B,IAAI,EAAC,SAAS,EACd,IAAI,EAAC,IAAI,GACA,EACX;MAEJ;QACE,OAAO,EAAE,CAAC;KACb;GACF;EAEO,cAAc;IACpB,IAAI,OAAO,GAAG,GAAG,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,EAAE,CAAC;IAE7C,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,OAAO,GAAG,OAAO,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;KAC3C;IAED,OAAO,OAAO,CAAC;GAChB;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,EAC5B,QAAQ,EAAC,GAAG,EACZ,KAAK,EAAE;QACL,OAAO,EAAE,IAAI,CAAC,WAAW,KAAK,UAAU;OACzC,IAED,WACE,KAAK,EAAE;QACL,eAAe,EAAE,IAAI;QACrB,KAAK,EAAE,IAAI,CAAC,KAAK,KAAK,OAAO;QAC7B,OAAO,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;OAClC,IAED,YAAM,KAAK,EAAC,WAAW,IACpB,IAAI,CAAC,YAAY,EAAE,EACpB,YAAM,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC3C,EACP,YAAM,KAAK,EAAC,qBAAqB,IAC/B,YAAM,KAAK,EAAC,WAAW,IAAE,IAAI,CAAC,KAAK,CAAQ,EAC1C,IAAI,CAAC,IAAI,GAAG,YAAM,KAAK,EAAC,UAAU,IAAE,IAAI,CAAC,IAAI,CAAQ,GAAG,EAAE,CACtD,CACH,CACD,EACP;GACH;;;;;;","names":[],"sources":["./src/components/kpi/kpi.scss?tag=ix-kpi&encapsulation=scoped","./src/components/kpi/kpi.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/fonts';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n\n:host {\n  display: flex;\n  flex-grow: 1;\n  height: $large-control-height;\n  border-radius: var(--theme-kpi--border-radius);\n  padding: 0.375rem $tiny-space;\n  min-width: 0;\n\n  span {\n    @include ellipsis;\n  }\n\n  .kpi-container {\n    display: flex;\n    height: 100%;\n    width: 100%;\n    border-block-end: 2px solid grey;\n\n    &.alarm {\n      border-block-end-color: var(--theme-color-alarm);\n    }\n\n    &.warning {\n      border-block-end-color: var(--theme-color-warning);\n    }\n\n    .kpi-label {\n      display: flex;\n      align-items: center;\n      color: var(--theme-kpi-display-label--color);\n      flex-grow: 1;\n      flex-shrink: 9999;\n\n      ix-icon {\n        margin-inline-end: $tiny-space;\n      }\n    }\n\n    .kpi-value-container {\n      display: flex;\n      align-items: flex-end;\n    }\n\n    .kpi-value {\n      @include text-xl;\n\n      color: var(--theme-kpi-display-value--color);\n    }\n\n    .kpi-unit {\n      margin-inline-start: $small-space;\n      color: var(--theme-kpi-display-units--color);\n    }\n\n    .kpi-label,\n    .kpi-unit {\n      margin-block-start: 0.125rem;\n    }\n  }\n\n  &.stacked {\n    height: 3.75rem;\n\n    .kpi-container {\n      justify-content: center;\n      flex-wrap: wrap;\n\n      .kpi-label {\n        width: 100%;\n        justify-content: center;\n      }\n    }\n  }\n\n  @include hover {\n    background-color: var(--theme-kpi-display--background--hover);\n  }\n\n  @include active {\n    background-color: var(--theme-kpi-display--background--active);\n  }\n\n  @include focus-visible {\n    outline: 1px solid var(--focus--border-color);\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';\n\n@Component({\n  tag: 'ix-kpi',\n  styleUrl: 'kpi.scss',\n  scoped: true,\n})\nexport class Kpi {\n  /**\n   *\n   */\n  @Prop() label: string;\n\n  /**\n   *\n   */\n  @Prop() value: string | number;\n\n  /**\n   *\n   */\n  @Prop() unit: string;\n\n  /**\n   *\n   */\n  @Prop() state: 'neutral' | 'warning' | 'alarm' = 'neutral';\n\n  /**\n   *\n   */\n  @Prop() orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  private getStateIcon() {\n    switch (this.state) {\n      case 'alarm':\n        return (\n          <ix-icon\n            color=\"kpi-display-icon--color\"\n            name=\"alarm\"\n            size=\"16\"\n          ></ix-icon>\n        );\n\n      case 'warning':\n        return (\n          <ix-icon\n            color=\"kpi-display-icon--color\"\n            name=\"warning\"\n            size=\"16\"\n          ></ix-icon>\n        );\n\n      default:\n        return '';\n    }\n  }\n\n  private getTooltipText() {\n    let tooltip = `${this.label}: ${this.value}`;\n\n    if (this.unit) {\n      tooltip = tooltip.concat(` ${this.unit}`);\n    }\n\n    return tooltip;\n  }\n\n  render() {\n    return (\n      <Host\n        title={this.getTooltipText()}\n        tabindex=\"1\"\n        class={{\n          stacked: this.orientation === 'vertical',\n        }}\n      >\n        <div\n          class={{\n            'kpi-container': true,\n            alarm: this.state === 'alarm',\n            warning: this.state === 'warning',\n          }}\n        >\n          <span class=\"kpi-label\">\n            {this.getStateIcon()}\n            <span class=\"kpi-label-text\">{this.label}</span>\n          </span>\n          <span class=\"kpi-value-container\">\n            <span class=\"kpi-value\">{this.value}</span>\n            {this.unit ? <span class=\"kpi-unit\">{this.unit}</span> : ''}\n          </span>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-6b660a23.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-3d163acd.js';
 import { a as anime } from './anime.es-185e9087.js';
 
 const mapNavigationCss = ".sc-ix-map-navigation-h{display:flex;position:relative;width:100%;height:100%}.sc-ix-map-navigation-h .map-nav.sc-ix-map-navigation{display:flex;margin-left:4rem;position:relative;height:100%;flex-grow:1;overflow:hidden}.sc-ix-map-navigation-h .map-nav-sidebar.sc-ix-map-navigation{display:flex;flex-direction:column;align-items:center;width:29.75rem;max-width:29.75rem;min-width:29.75rem;height:100%;left:4rem;background-color:var(--theme-map-navigation--background);-webkit-border-end:0.125rem solid var(--theme-map-navigation-separator--background);border-inline-end:0.125rem solid var(--theme-map-navigation-separator--background);z-index:99}.sc-ix-map-navigation-h .map-nav-sidebar-content.sc-ix-map-navigation{align-items:center;position:relative;overflow:auto;height:100%;width:100%}.sc-ix-map-navigation-h .map-nav-sidebar-content.sc-ix-map-navigation .map-nav-sidebar-static-content.sc-ix-map-navigation{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:700;line-height:1.455em;color:var(--theme-color-std-text);display:flex;justify-content:space-between;margin-top:0.437rem;margin-bottom:0.812rem;margin-left:1rem;margin-right:1rem}.sc-ix-map-navigation-h .map-nav-header.sc-ix-map-navigation{display:flex;position:relative;align-items:center;height:3.5rem;min-height:3.5rem;width:100%}.sc-ix-map-navigation-h .map-nav-header.sc-ix-map-navigation .map-nav-header-brand.sc-ix-map-navigation{background-color:var(--theme-map-navigation-background);display:flex;align-items:center;height:100%;width:100%;padding:0 1rem;--theme-app-header--color:var(--theme-map-navigation-header--color);--theme-app-header-logo--color:var(--theme-map-navigation-logo--color)}.sc-ix-map-navigation-h .map-nav-header.sc-ix-map-navigation .map-nav-header-brand.sc-ix-map-navigation button.sc-ix-map-navigation{margin-left:1rem}.sc-ix-map-navigation-h .map-nav-header-content.sc-ix-map-navigation{display:flex;height:3.5rem;align-items:center;overflow:hidden;padding:0 1rem}.sc-ix-map-navigation-h .map-nav-header-content.sc-ix-map-navigation:empty{height:0}.sc-ix-map-navigation-h .map-nav-title.sc-ix-map-navigation{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:700;line-height:1.455em;color:var(--theme-color-std-text);display:flex;align-items:center;flex-grow:1}.sc-ix-map-navigation-h .content.sc-ix-map-navigation{display:block;flex-grow:1;position:relative;height:100%;overflow:hidden;z-index:calc(var(--theme-z-index-sticky) - 1)}";
@@ -194,3 +194,5 @@ MapNavigationOverlay.slowTime = 500;
 MapNavigationOverlay.style = mapNavigationOverlayCss;
 
 export { MapNavigation as ix_map_navigation, MapNavigationOverlay as ix_map_navigation_overlay };
+
+//# sourceMappingURL=ix-map-navigation_2.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"ix-map-navigation.ix-map-navigation-overlay.entry.js","mappings":"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","names":[],"sources":["./src/components/map-navigation/map-navigation.scss?tag=ix-map-navigation&encapsulation=scoped","./src/components/map-navigation/map-navigation.tsx","./src/components/map-navigation-overlay/map-navigation-overlay.scss?tag=ix-map-navigation-overlay&encapsulation=scoped","./src/components/map-navigation-overlay/map-navigation-overlay.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/fonts';\n@import 'mixins/text-truncation';\n\n:host {\n  $appHeaderHeight: 3.5rem;\n  $appHeaderGradientHeight: 4rem;\n  $navHeaderHeight: 11.5rem;\n  $sidebarWidth: 29.75rem;\n\n  display: flex;\n  position: relative;\n  width: 100%;\n  height: 100%;\n\n  .map-nav {\n    display: flex;\n    margin-left: 4rem;\n    position: relative;\n    height: 100%;\n    flex-grow: 1;\n    overflow: hidden;\n  }\n\n  .map-nav-sidebar {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    width: $sidebarWidth;\n    max-width: $sidebarWidth;\n    min-width: $sidebarWidth;\n    height: 100%;\n    left: 4rem;\n    background-color: var(--theme-map-navigation--background);\n    border-inline-end: 0.125rem solid\n      var(--theme-map-navigation-separator--background);\n    z-index: 99;\n  }\n\n  .map-nav-sidebar-content {\n    align-items: center;\n    position: relative;\n    overflow: auto;\n    height: 100%;\n    width: 100%;\n\n    .map-nav-sidebar-static-content {\n      @include text-h2;\n      display: flex;\n      justify-content: space-between;\n      margin-top: 0.437rem;\n      margin-bottom: 0.812rem;\n      margin-left: $default-space;\n      margin-right: $default-space;\n    }\n  }\n\n  .map-nav-header {\n    display: flex;\n    position: relative;\n    align-items: center;\n    height: $appHeaderHeight;\n    min-height: $appHeaderHeight;\n    width: 100%;\n\n    .map-nav-header-brand {\n      background-color: var(--theme-map-navigation-background);\n      display: flex;\n      align-items: center;\n      height: 100%;\n      width: 100%;\n      padding: 0 $default-space;\n\n      --theme-app-header--color: var(--theme-map-navigation-header--color);\n      --theme-app-header-logo--color: var(--theme-map-navigation-logo--color);\n\n      button {\n        margin-left: $default-space;\n      }\n    }\n  }\n\n  .map-nav-header-content {\n    display: flex;\n    height: $appHeaderHeight;\n    align-items: center;\n    overflow: hidden;\n    padding: 0 $default-space;\n\n    &:empty {\n      height: 0;\n    }\n  }\n\n  .map-nav-title {\n    @include text-h2();\n\n    display: flex;\n    align-items: center;\n    flex-grow: 1;\n  }\n\n  .content {\n    display: block;\n    flex-grow: 1;\n    position: relative;\n    height: 100%;\n    overflow: hidden;\n    z-index: calc(var(--theme-z-index-sticky) - 1);\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  Method,\n  Prop,\n  State,\n} from '@stencil/core';\nimport anime from 'animejs';\n\n@Component({\n  tag: 'ix-map-navigation',\n  styleUrl: 'map-navigation.scss',\n  scoped: true,\n})\nexport class MapNavigation {\n  private static readonly defaultTime = 150;\n  private static readonly slowTime = 500;\n\n  @Element() hostElement: HTMLIxMapNavigationElement;\n\n  /**\n   * Application name\n   */\n  @Prop() applicationName: string;\n\n  /**\n   * Navigation title\n   */\n  @Prop() navigationTitle: string;\n\n  /**\n   * Hide the sidebar context menu button when set to true\n   */\n  @Prop() hideContextMenu = true;\n\n  @State() isSidebarOpen = true;\n\n  /**\n   * Navigation toggled\n   */\n  @Event() navigationToggled: EventEmitter<boolean>;\n\n  /**\n   * Context menu clicked\n   */\n  @Event() contextMenuClick: EventEmitter<void>;\n\n  get menu() {\n    return this.hostElement.querySelector('ix-menu');\n  }\n\n  get menuOverlay() {\n    return this.hostElement.querySelector('ix-menu-overlay');\n  }\n\n  get mapNavMenu() {\n    return this.hostElement.querySelector('.map-nav-menu');\n  }\n\n  get sidebar() {\n    return this.hostElement.querySelector('.map-nav-sidebar');\n  }\n\n  get overlay() {\n    return this.hostElement.querySelector('#overlay');\n  }\n\n  componentDidRender() {\n    this.appendMenu();\n    this.closeOverlay();\n  }\n\n  private appendMenu() {\n    this.hostElement.querySelector('#menu-placeholder').appendChild(this.menu);\n    this.menu.addEventListener(\n      'mapExpandChange',\n      (event: CustomEvent<boolean>) => {\n        const state = !event.detail;\n        this.toggleSidebar(state);\n        this.menu.toggleMapExpand(state);\n      }\n    );\n    this.menu.enableMapExpand = true;\n  }\n\n  private toggleSidebar(show: boolean) {\n    if (show !== undefined) {\n      this.isSidebarOpen = show;\n    } else {\n      this.isSidebarOpen = !this.isSidebarOpen;\n    }\n\n    if (show) {\n      this.openSidebar();\n    } else {\n      this.closeSidebar();\n    }\n\n    this.navigationToggled.emit(this.isSidebarOpen);\n  }\n\n  private closeSidebar() {\n    anime({\n      targets: this.sidebar,\n      duration: MapNavigation.defaultTime,\n      marginLeft: [0, '-29.75rem'],\n      opacity: [1, 0],\n      easing: 'easeInSine',\n      complete: () => {\n        this.sidebar.classList.add('d-none');\n      },\n    });\n  }\n\n  private openSidebar() {\n    anime({\n      targets: this.sidebar,\n      duration: MapNavigation.defaultTime,\n      marginLeft: ['-29.75rem', 0],\n      opacity: [0, 1],\n      easing: 'easeOutSine',\n      begin: () => {\n        this.sidebar.classList.remove('d-none');\n      },\n    });\n  }\n\n  /**\n   * Open a overlay inside content area\n   * @deprecated Will be removed in 2.0.0. Use slot based approach\n   *\n   * @param name\n   * @param component\n   * @param icon\n   * @param color\n   */\n  @Method()\n  async openOverlay(\n    name: string,\n    component: HTMLElement,\n    icon?: string,\n    color?: string\n  ) {\n    anime({\n      targets: this.overlay,\n      duration: MapNavigation.slowTime,\n      backdropFilter: [0, 'blur(1rem)'],\n      translateX: ['-4rem', 0],\n      opacity: [0, 1],\n      easing: 'easeOutSine',\n      begin: () => {\n        this.overlay.classList.remove('d-none');\n      },\n    });\n\n    const overlayInstance = document.createElement('ix-map-navigation-overlay');\n    overlayInstance.setAttribute('color', color);\n    overlayInstance.setAttribute('name', name);\n    overlayInstance.setAttribute('icon', icon);\n    overlayInstance.setAttribute('slot', 'overlay');\n    overlayInstance.addEventListener('closeClick', () => this.closeOverlay());\n    overlayInstance.appendChild(component);\n    this.hostElement.appendChild(overlayInstance);\n  }\n\n  /**\n   * Close current shown overlay\n   * @deprecated Will be removed in 2.0.0. Use slot based approach\n   */\n  @Method()\n  async closeOverlay() {\n    anime({\n      targets: this.overlay,\n      duration: MapNavigation.slowTime,\n      backdropFilter: ['blur(1rem)', 0],\n      translateX: [0, '-4rem'],\n      opacity: [1, 0],\n      easing: 'easeInSine',\n      complete: () => {\n        if (!this.overlay) {\n          return;\n        }\n        this.overlay.firstChild?.remove();\n        this.overlay.classList.add('d-none');\n      },\n    });\n  }\n\n  render() {\n    return (\n      <Host>\n        <div id=\"menu-placeholder\"></div>\n        <div class=\"map-nav\">\n          <div class=\"map-nav-sidebar\">\n            <div class=\"map-nav-header\">\n              <ix-application-header\n                name={this.applicationName}\n                class=\"map-nav-header-brand\"\n              >\n                <slot name=\"logo\"></slot>\n              </ix-application-header>\n            </div>\n            <div class=\"map-nav-sidebar-content\">\n              <div class=\"map-nav-sidebar-static-content\">\n                <div class=\"map-nav-title\">{this.navigationTitle}</div>\n                {this.hideContextMenu ? (\n                  ''\n                ) : (\n                  <ix-icon-button\n                    icon=\"context-menu\"\n                    ghost\n                    size=\"24\"\n                    variant=\"Secondary\"\n                    onClick={(_) => this.contextMenuClick.emit()}\n                  ></ix-icon-button>\n                )}\n              </div>\n              <div class=\"map-nav-sidebar-user-content\">\n                <slot name=\"sidebar-content\"></slot>\n              </div>\n            </div>\n          </div>\n          <div class=\"content\">\n            <div class=\"map-nav-header-content bg-2\">\n              <slot name=\"content-header\"></slot>\n            </div>\n            <main>\n              <slot></slot>\n              <slot name=\"overlay\"></slot>\n            </main>\n          </div>\n        </div>\n      </Host>\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@import 'common-variables';\n@import 'fonts';\n@import 'mixins/text-truncation';\n\n:host {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  z-index: 2;\n  top: 0;\n  left: 0;\n\n  background-color: var(--theme-overlay--background);\n\n  .overlay-header {\n    display: flex;\n    position: relative;\n    justify-content: flex-start;\n    align-items: center;\n    height: 3.5rem;\n\n    background-color: var(--theme-overlay-header--background);\n  }\n\n  .overlay-header-content {\n    display: flex;\n    align-items: center;\n    min-width: 0;\n\n    ix-icon {\n      margin-inline-start: $default-space;\n      color: var(--theme-overlay-header--color);\n    }\n\n    .overlay-header-title {\n      @include text-h2;\n      @include ellipsis;\n      color: var(--theme-overlay-header--color);\n      margin-inline-start: $default-space;\n    }\n  }\n\n  .color-indicator {\n    display: inline-block;\n    position: relative;\n    width: $small-space;\n    height: 100%;\n    background-color: var(--theme-color-neutral);\n  }\n\n  .overlay-close {\n    margin-inline-start: auto;\n    margin-inline-end: $default-space;\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} from '@stencil/core';\nimport anime from 'animejs';\n\n@Component({\n  tag: 'ix-map-navigation-overlay',\n  styleUrl: 'map-navigation-overlay.scss',\n  scoped: true,\n})\nexport class MapNavigationOverlay {\n  private static readonly slowTime = 500;\n\n  @Element() hostElement: HTMLIxMapNavigationOverlayElement;\n\n  /**\n   * Title of overlay\n   */\n  @Prop() name: string;\n\n  /**\n   * Icon of overlay\n   */\n  @Prop() icon: string;\n\n  /**\n   * Color of icon\n   */\n  @Prop() color: string;\n\n  /**\n   * Event closed\n   */\n  @Event() closeClick: EventEmitter;\n\n  componentWillLoad() {\n    anime({\n      targets: this.hostElement,\n      duration: MapNavigationOverlay.slowTime,\n      backdropFilter: [0, 'blur(1rem)'],\n      translateX: ['-4rem', 0],\n      opacity: [0, 1],\n      easing: 'easeOutSine',\n      begin: () => {\n        this.hostElement.classList.remove('d-none');\n      },\n    });\n  }\n\n  private closeOverlay() {\n    anime({\n      targets: this.hostElement,\n      duration: MapNavigationOverlay.slowTime,\n      backdropFilter: ['blur(1rem)', 0],\n      translateX: [0, '-4rem'],\n      opacity: [1, 0],\n      easing: 'easeInSine',\n      complete: () => {\n        this.closeClick.emit();\n        this.hostElement.classList.add('d-none');\n      },\n    });\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"overlay-header\">\n          <div\n            class={{\n              'color-indicator': true,\n              'd-none': this.color === 'undefined' || this.color === undefined,\n            }}\n            style={{\n              'background-color': this.color\n                ? `var(--theme-${this.color})`\n                : '',\n            }}\n          ></div>\n          <div class=\"overlay-header-content\">\n            <ix-icon size=\"32\" name={this.icon}></ix-icon>\n            <span class=\"overlay-header-title\" title={this.name}>\n              {this.name}\n            </span>\n          </div>\n          <ix-icon-button\n            class=\"overlay-close\"\n            ghost\n            icon=\"close\"\n            size=\"24\"\n            onClick={() => this.closeOverlay()}\n          ></ix-icon-button>\n        </div>\n\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,8 +1,8 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement, f as forceUpdate } from './index-6b660a23.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement, f as forceUpdate } from './index-3d163acd.js';
 import { m as menuController, h as hostContext, i as isBasicNavigationLayout } from './context-f6a2b727.js';
 import { a as convertToRemString } from './rwd.util-cfc2ea72.js';
 import { s as screenMode } from './service-fc436c5b.js';
-import { t as themeSwitcher } from './theme-switcher-4b9e5cc2.js';
+import { t as themeSwitcher } from './theme-switcher-7498e4f2.js';
 import './typed-event-a230184a.js';
 
 const menuCss = "ix-menu{display:flex;flex-direction:row;position:absolute;height:100%;min-height:22.75rem;z-index:var(--theme-z-index-sticky);width:auto}ix-menu .menu{display:flex;flex-direction:column;position:relative;width:4rem;height:100%;-webkit-padding-after:1rem;padding-block-end:1rem;overflow:hidden;background-color:var(--theme-nav--background);transition:width var(--animate-duration)}ix-menu .menu.expanded{box-shadow:var(--theme-navigation--box-shadow)}ix-menu .menu .burger-menu{margin:0.75rem 0 1rem 0.75rem}ix-menu .menu-overlay{display:block;position:absolute;width:calc(100vw - 4rem);height:100%;left:4rem;z-index:-1;-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem);background-color:var(--theme-sidebar-overlay-blur);transition:all 300ms ease-out}ix-menu .menu-overlay-invisible{display:none}ix-menu .menu.expanded{width:16rem}ix-menu .menu-overlay.expanded{width:calc(100vw - 16rem);left:16rem}ix-menu #avatar-tab-placeholder{max-height:3rem}ix-menu .avatar{margin-bottom:2rem}ix-menu #cui-imprint .cui-imprint-product-name{margin-bottom:1rem}ix-menu #cui-imprint .cui-imprint-product-description{margin-bottom:2rem}ix-menu #cui-imprint .cui-imprint-link-container{display:flex;align-items:center}ix-menu .bottom-tab-divider{margin-top:auto}ix-menu.mode-mobile .menu:not(.expanded){width:0}ix-menu.mode-mobile .menu{padding-top:2rem}ix-menu.mode-mobile .menu .burger-menu{display:none}ix-menu.mode-mobile .menu-overlay{left:0px;width:100vw}a[href]:has(>ix-menu-item){text-decoration:none}";
@@ -768,3 +768,5 @@ const MenuSettingsItem = class {
 MenuSettingsItem.style = menuSettingsItemCss;
 
 export { Menu as ix_menu, MenuAbout$1 as ix_menu_about, MenuAboutItem as ix_menu_about_item, MenuAboutNews as ix_menu_about_news, MenuAvatar as ix_menu_avatar, MenuAvatarItem as ix_menu_avatar_item, MenuItem as ix_menu_item, MenuAbout as ix_menu_settings, MenuSettingsItem as ix_menu_settings_item };
+
+//# sourceMappingURL=ix-menu_9.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"ix-menu.ix-menu-about.ix-menu-about-item.ix-menu-about-news.ix-menu-avatar.ix-menu-avatar-item.ix-menu-item.ix-menu-settings.ix-menu-settings-item.entry.js","mappings":";;;;;;;AAAA,MAAM,OAAO,GAAG,k+CAAk+C;;MCiCr+C,IAAI;;;;;IA0FE,gBAAW,GAAG,IAAI,gBAAgB,CACjD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAC5B,CAAC;;IAiCe,cAAS,GAAG,CAAC,GAAgB;;MAC5C,QACE,GAAG,CAAC,KAAK,CAAC,OAAO,KAAK,MAAM;QAC5B,CAAA,MAAA,MAAA,GAAG,CAAC,aAAa,0CAAE,aAAa,0CAAE,KAAK,CAAC,OAAO,MAAK,MAAM,EAC1D;KACH,CAAC;wBA5HsC,KAAK;qBAKR,KAAK;6BAKd,KAAK;0BAKR,IAAI;2BAKH,KAAK;;kCAUE,EAAE;+BAML,CAAC;qBAIX,2BAA2B;wBAIxB,UAAU;2BAIP,cAAc;sBAInB,SAAS;wBAIP,UAAU;oBAId,OAAO;kBAKuB,KAAK;yBAW7B,KAAK;4BACF,CAAC;kCACK,CAAC;qBACd,IAAI;;0BAEC,KAAK;gBACT,SAAS;;EAO/B,cAAc;IACZ,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;GAC/C;EAEO,kBAAkB,CAAC,IAAU;IACnC,IAAI,EAAE,IAAI,YAAY,WAAW,CAAC,EAAE;MAClC,OAAO;KACR;IAED,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;MACxB,IAAI,CAAC,cAAc,EAAE,CAAC;KACvB;IAED,IAAI,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;MAC7D,IAAI,CAAC,WAAW,EAAE,CAAC;KACpB;IAED,IAAI,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;MAChE,IAAI,CAAC,cAAc,EAAE,CAAC;KACvB;GACF;EAEO,WAAW,CAAC,SAA2B;IAC7C,SAAS,CAAC,OAAO,CAAC,CAAC,cAAc;MAC/B,cAAc,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;MACtE,cAAc,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;KACzE,CAAC,CAAC;GACJ;EAUD,IAAI,WAAW;IACb,OAAO,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;GACxD;EAED,IAAI,gBAAgB;IAClB,OAAO,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;GACxD;EAED,IAAI,kBAAkB;IACpB,OAAO,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,yBAAyB,CAAC,CAAC;GAClE;EAED,IAAI,IAAI;IACN,OAAO,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;GAChD;EAED,IAAI,SAAS;IACX,OAAO,KAAK,CAAC,IAAI,CACf,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAC/B,sFAAsF,CACvF,CACF,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;GAC1B;EAED,IAAI,eAAe;IACjB,OAAO,KAAK,CAAC,IAAI,CACf,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAC/B,2DAA2D,CAC5D,CACF,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;GAC1B;EAED,IAAI,OAAO;IACT,OAAO,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;GAChE;EAED,IAAI,iBAAiB;IACnB,OAAO,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,2BAA2B,CAAC,CAAC;GACpE;EAED,IAAI,wBAAwB;IAC1B,QACE,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,qCAAqC,CAAC;OACrE,MAAM,KAAK,CAAC,EACf;GACH;EAED,IAAI,sBAAsB;IACxB,OAAO,IAAI,CAAC,WAAW,CAAC,gBAAgB,CACtC,wCAAwC,CACzC,CAAC;GACH;EAED,IAAI,sBAAsB;IACxB,OAAO,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;GAC3D;EAED,IAAI,aAAa;IACf,OAAO,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,+BAA+B,CAAC,CAAC;GACxE;EAED,IAAI,qBAAqB;IACvB,OAAO,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;GACtD;EAED,IAAI,YAAY;IACd,OAAO,QAAQ,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;GACrD;EAED,IAAI,QAAQ;IACV,OAAO,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;GACzD;EAED,IAAI,KAAK;IACP,OAAO,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;GACxD;EAED,IAAI,QAAQ;IACV,OAAO,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;GAC3D;EAED,IAAI,eAAe;IACjB,QACE,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,uBAAuB,CAAC,CAAC;OACnE,MAAM,KAAK,CAAC,EACf;GACH;EAED,IAAI,UAAU;IACZ,OAAO,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;GACzD;EAED,IAAI,aAAa;IACf,OAAO,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;GACrD;EAEO,OAAO,CAAC,KAAa;IAC3B,OAAO,KAAK,GAAG,CAAC,IAAI,IAAI,CAAC,gBAAgB,CAAC;GAC3C;EAED,gBAAgB;;IACd,MAAA,IAAI,CAAC,QAAQ,0CAAE,gBAAgB,CAAC,OAAO,EAAE;MACvC,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;MAC1B,IAAI,CAAC,QAAQ,CAAC,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC;KACxC,CAAC,CAAC;IAEH,MAAA,IAAI,CAAC,QAAQ,0CAAE,gBAAgB,CAAC,cAAc,EAAE;MAC9C,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;QACtB,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QACtC,IAAI,CAAC,gBAAgB,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;OAC/C;KACF,CAAC,CAAC;IAEH,MAAA,IAAI,CAAC,KAAK,0CAAE,gBAAgB,CAAC,OAAO,EAAE;MACpC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;MACvB,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC;KAClC,CAAC,CAAC;IAEH,MAAA,IAAI,CAAC,KAAK,0CAAE,gBAAgB,CAAC,cAAc,EAAE;MAC3C,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;QACnB,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QACnC,IAAI,CAAC,gBAAgB,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;OAC/C;KACF,CAAC,CAAC;IAEH,IAAI,CAAC,gBAAgB,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IAE9C,IAAI,CAAC,cAAc,EAAE,CAAC;IAEtB,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE;MACzC,UAAU,EAAE,KAAK;MACjB,SAAS,EAAE,IAAI;MACf,OAAO,EAAE,IAAI;KACd,CAAC,CAAC;GACJ;EAED,iBAAiB;IACf,cAAc,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAC1C,MAAM,MAAM,GAAG,WAAW,CAAC,qBAAqB,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;IACpE,IAAI,uBAAuB,CAAC,MAAM,CAAC,IAAI,MAAM,CAAC,UAAU,KAAK,KAAK,EAAE;MAClE,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,IAAI,MAAM,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC;MACrD,IAAI,CAAC,IAAI,GAAG,UAAU,CAAC,IAAI,CAAC;KAC7B;GACF;EAED,mBAAmB;IACjB,IAAI,CAAC,UAAU,EAAE,CAAC;GACnB;EAED,kBAAkB;IAChB,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;IAC9C,IAAI,CAAC,eAAe,EAAE,CAAC;GACxB;EAEO,eAAe;IACrB,IAAI,CAAC,YAAY,EAAE,CAAC;IACpB,IAAI,CAAC,WAAW,EAAE,CAAC;IACnB,IAAI,CAAC,cAAc,EAAE,CAAC;IACtB,IAAI,CAAC,sBAAsB,EAAE,CAAC;;IAG9B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,wBAAwB,CAAC;IAEpD,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,yBAAyB,EAAE,CAAC;GAChE;EAEO,cAAc;IACpB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;GACvB;EAEO,gBAAgB,CAAC,IAA2B;IAClD,OAAO,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;GACzD;EAEO,UAAU;IAChB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IAEtB,IAAI,IAAI,CAAC,OAAO,EAAE;MAChB,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;MACtE,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;KACtE;IAED,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,IAA2B,EAAE,KAAK;;MACxD,IAAI,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;QACvB,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;OACjC;WAAM;QACL,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QAE7B,IAAI,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE;UAC/B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;SACvB;OACF;;MAGD,MAAA,IAAI,CAAC,OAAO,0CAAE,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;MAEzC,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;KAC9D,CAAC,CAAC;GACJ;EAEO,YAAY;;IAClB,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,CAAC;IAC/B,IAAI,MAAM,EAAE;MACV,MAAM,CAAC,KAAK,CAAC,YAAY,GAAG,MAAM,CAAC;MACnC,MAAA,IAAI,CAAC,WAAW;SACb,aAAa,CAAC,yBAAyB,CAAC,0CACvC,WAAW,CAAC,MAAM,CAAC,CAAC;KACzB;GACF;EAEO,+BAA+B;IACrC,MAAM,WAAW,GAAG,EAAE,CAAC;IACvB,MAAM,WAAW,GAAG,CAAC,CAAC;IACtB,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC,qBAAqB,EAAE,CAAC;IACxD,MAAM,MAAM,GACV,MAAM,CAAC,WAAW;OACjB,SAAS,CAAC,MAAM,GAAG,SAAS,CAAC,MAAM,GAAG,CAAC,GAAG,WAAW,GAAG,CAAC,GAAG,WAAW,CAAC,CAAC;IAC5E,OAAO,kBAAkB,CAAC,MAAM,CAAC,CAAC;GACnC;EAEO,sBAAsB;;IAC5B,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MACtB,OAAO;KACR;IAED,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,+BAA+B,EAAE,CAAC;IAExE,IAAI,EAAC,MAAA,IAAI,CAAC,WAAW,0CAAE,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,CAAA,EAAE;MAClD,MAAM,QAAQ,GAAG;;QACf,IAAI,MAAA,IAAI,CAAC,YAAY,0CAAE,cAAc,EAAE;UACrC,IAAI,CAAC,KAAK,CAAC,cAAc,GAAG,IAAI,CAAC,YAAY,CAAC,cAAc,CAAC;UAC7D,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;SACxB;OACF,CAAC;MAEF,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,UAAU,EAAE,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;MACpE,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;KAC9C;GACF;EAEO,cAAc;IACpB,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KAClD;GACF;EAEO,WAAW;IACjB,IAAI,IAAI,CAAC,KAAK,EAAE;MACd,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC/C;GACF;EAEO,yBAAyB;;IAC/B,MAAM,QAAQ,GAAG,MAAA,IAAI,CAAC,iBAAiB,0CAAE,gBAAgB,CAAC,WAAW,CAAC,CAAC;IACvE,IAAI,KAAK,GAAG,CAAC,CAAC;IACd,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,OAAO,CAAC,CAAC,GAAG;MACpB,IAAI,GAAG,CAAC,eAAe,CAAC,EAAE;QACxB,KAAK,IAAI,GAAG,CAAC,eAAe,CAAC,CAAC;OAC/B;KACF,CAAC,CAAC;IAEH,OAAO,KAAK,CAAC;GACd;EAEO,kBAAkB;IACxB,MAAM,gBAAgB,GAAG,EAAE,CAAC;IAC5B,MAAM,UAAU,GAAG,EAAE,CAAC;IACtB,MAAM,YAAY,GAAG,EAAE,CAAC;IACxB,MAAM,eAAe,GAAG,EAAE,CAAC;IAE3B,IAAI,eAAe,GAAG,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC;IAEpD,eAAe,IAAI,gBAAgB,CAAC;IAEpC,IAAI,IAAI,CAAC,UAAU,EAAE;MACnB,eAAe,IAAI,YAAY,CAAC;KACjC;IAED,IAAI,IAAI,CAAC,OAAO,EAAE;MAChB,eAAe,IAAI,UAAU,CAAC;KAC/B;IAED,IAAI,IAAI,CAAC,SAAS,EAAE;MAClB,eAAe,IAAI,eAAe,CAAC;KACpC;IAED,IAAI,IAAI,CAAC,YAAY,EAAE;MACrB,eAAe,IAAI,eAAe,CAAC;KACpC;IAED,IAAI,IAAI,CAAC,eAAe,CAAC,MAAM,EAAE;MAC/B,eAAe,IAAI,IAAI,CAAC,eAAe,CAAC,MAAM,GAAG,eAAe,CAAC;KAClE;IAED,IAAI,IAAI,CAAC,eAAe,EAAE;MACxB,eAAe,IAAI,eAAe,CAAC;KACpC;;IAGD,eAAe,IAAI,CAAC,GAAG,eAAe,CAAC;;IAGvC,eAAe,IAAI,EAAE,CAAC;IAEtB,OAAO,eAAe,CAAC;GACxB;EAEO,cAAc;IACpB,MAAM,SAAS,GAAG,EAAE,CAAC;IACrB,MAAM,eAAe,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAClD,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,eAAe,GAAG,SAAS,CAAC,CAAC;IAC7D,MAAM,aAAa,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC;IAE5C,IAAI,aAAa,KAAK,CAAC,EAAE;MACvB,OAAO,CAAC,CAAC;KACV;IAED,IAAI,aAAa,GAAG,IAAI,CAAC,mBAAmB,EAAE;MAC5C,IAAI,YAAY,GAAG,aAAa,EAAE;QAChC,OAAO,aAAa,CAAC;OACtB;MAED,OAAO,IAAI,CAAC,GAAG,CAAC,YAAY,GAAG,CAAC,EAAE,aAAa,CAAC,CAAC;KAClD;IAED,IAAI,aAAa,KAAK,IAAI,CAAC,mBAAmB,EAAE;MAC9C,IAAI,YAAY,GAAG,IAAI,CAAC,mBAAmB,EAAE;QAC3C,OAAO,YAAY,GAAG,CAAC,CAAC;OACzB;MAED,IAAI,YAAY,KAAK,IAAI,CAAC,mBAAmB,EAAE;QAC7C,OAAO,IAAI,CAAC,mBAAmB,GAAG,CAAC,CAAC;OACrC;MAED,OAAO,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;KACzD;IAED,IAAI,YAAY,KAAK,IAAI,CAAC,mBAAmB,EAAE;MAC7C,OAAO,IAAI,CAAC,mBAAmB,GAAG,CAAC,CAAC;KACrC;IACD,IAAI,YAAY,IAAI,IAAI,CAAC,mBAAmB,EAAE;MAC5C,OAAO,IAAI,CAAC,mBAAmB,GAAG,CAAC,CAAC;KACrC;IAED,OAAO,IAAI,CAAC,GAAG,CAAC,YAAY,GAAG,CAAC,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;GAC7D;;;;;EAOD,MAAM,eAAe,CAAC,IAAc;IAClC,IAAI,CAAC,wBAAwB,EAAE,CAAC;IAEhC,IAAI,IAAI,KAAK,SAAS,EAAE;MACtB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;KACvB;SAAM;MACL,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;KAClC;GACF;EAEO,wBAAwB;IAC9B,IAAI,IAAI,CAAC,KAAK,EAAE;MACd,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC1C;IACD,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KAC7C;GACF;EAEO,uBAAuB,CAAC,OAAoB;IAClD,MAAM,YAAY,GAAG,mBAAmB,CAAC;IAEzC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;IAExC,UAAU,CAAC;MACT,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;KACtC,EAAE,GAAG,CAAC,CAAC;GACT;;;;;EAOD,MAAM,UAAU,CAAC,IAAc;IAC7B,IAAI,CAAC,wBAAwB,EAAE,CAAC;IAEhC,IAAI,IAAI,KAAK,SAAS,EAAE;MACtB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;KACpB;SAAM;MACL,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;KAC5B;IAED,IAAI,IAAI,CAAC,YAAY,EAAE;MACrB,IAAI,CAAC,YAAY,CAAC,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC;KAC1C;IAED,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;GACrC;;;;;EAOD,MAAM,cAAc,CAAC,IAAa;;IAChC,IAAI,IAAI,CAAC,SAAS,EAAE;MAClB,IAAI,CAAC,wBAAwB,EAAE,CAAC;KACjC;SAAM;MACL,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC1C;IAED,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IAEpC,IAAI,CAAC,YAAY,EAAE,CAAC;IACpB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;IACzB,IAAI,CAAC,QAAQ,CAAC,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC;IACvC,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IACzC,IAAI,CAAC,gBAAgB,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;GAClD;;;;;EAOD,MAAM,WAAW,CAAC,IAAa;;IAC7B,IAAI,IAAI,CAAC,YAAY,EAAE;MACrB,IAAI,CAAC,wBAAwB,EAAE,CAAC;KACjC;SAAM;MACL,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KAC7C;IAED,MAAA,IAAI,CAAC,QAAQ,0CAAE,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IAEvC,IAAI,CAAC,YAAY,EAAE,CAAC;IACpB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IACtB,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC;IACjC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IACtC,IAAI,CAAC,gBAAgB,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;GAClD;EAEO,YAAY;IAClB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;IAC1B,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;IAEvB,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,IAAI,CAAC,QAAQ,CAAC,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC;KACxC;IAED,IAAI,IAAI,CAAC,KAAK,EAAE;MACd,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC;KAClC;IAED,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;GACxB;EAEO,cAAc;IACpB,MAAM,aAAa,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC;IAE5C,IAAI,aAAa,KAAK,CAAC,EAAE;MACvB,OAAO,KAAK,CAAC;KACd;IAED,IAAI,aAAa,GAAG,IAAI,CAAC,mBAAmB,EAAE;MAC5C,OAAO,IAAI,CAAC,gBAAgB,GAAG,aAAa,CAAC;KAC9C;IAED,IAAI,aAAa,GAAG,IAAI,CAAC,mBAAmB,EAAE;MAC5C,OAAO,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,mBAAmB,CAAC;KACzD;IAED,OAAO,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,mBAAmB,GAAG,CAAC,CAAC;GAC9D;EAEO,eAAe;IACrB,OAAO,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,UAAU,CAAC;GAC7D;EAEO,eAAe;IACrB,OAAO,IAAI,CAAC,SAAS,GAAG,qBAAqB,GAAG,sBAAsB,CAAC;GACxE;EAEO,iBAAiB,CAAC,KAAiB;IACzC,MAAM,IAAI,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC;IAClC,MAAM,SAAS,GAAI,IAAsB;OACtC,MAAM,CAAC,CAAC,OAAO,KAAK,OAAO,CAAC,EAAE,KAAK,kBAAkB,CAAC;OACtD,MAAM,CAAC,CAAC,OAAO;MACd,OAAO,OAAO,CAAC,OAAO,KAAK,cAAc,CAAC;KAC3C,CAAC,CAAC;IAEL,OAAO,SAAS,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC;GACpE;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,MAAM;QACrB,CAAC,QAAQ,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI;OAC5B,IAED,WACE,KAAK,EAAE;QACL,IAAI,EAAE,IAAI;QACV,QAAQ,EAAE,IAAI,CAAC,MAAM;OACtB,EACD,OAAO,EAAE;QACP,IAAI,CAAC,cAAc,EAAE,CAAC;OACvB,IAED,sBACE,OAAO,EAAE,YAAY,IAAI,CAAC,UAAU,EAAE,EACtC,QAAQ,EAAE,IAAI,CAAC,MAAM,EACrB,KAAK,EAAE;QACL,aAAa,EAAE,IAAI;OACpB,GACe,EAClB,WAAK,EAAE,EAAC,wBAAwB,GAAO,EACvC,WACE,EAAE,EAAC,WAAW,EACd,KAAK,EAAE;QACL,OAAO,EAAE,UAAU;OACpB,EACD,OAAO,EAAE,CAAC,KAAK;QACb,IAAI,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE;UACjC,IAAI,CAAC,YAAY,EAAE,CAAC;SACrB;OACF,IAED,WAAK,KAAK,EAAC,UAAU,GAAO,EAC5B,eAAa,EACb,WAAK,KAAK,EAAC,iBAAiB,IACzB,IAAI,CAAC,SAAS,IACb,oBACE,KAAK,EAAC,cAAc,EACpB,MAAM,EAAE,IAAI,EACZ,OAAO,EAAE,IAAI,CAAC,SAAS,CAAC,OAAO,IAE9B,IAAI,CAAC,SAAS,CAAC,SAAS,CACZ,IACb,IAAI,CACJ,EACN,oBACE,EAAE,EAAC,kBAAkB,EACrB,OAAO,EAAC,WAAW,EACnB,KAAK,EAAE;QACL,cAAc,EAAE,IAAI;OACrB,EACD,KAAK,EAAE;QACL,OAAO,EAAE,IAAI,CAAC,cAAc,EAAE,GAAG,OAAO,GAAG,MAAM;OAClD,EACD,KAAK,EAAC,WAAW,EACjB,aAAa,EAAE,IAAI,CAAC,sBAAsB,IAEzC,IAAI,CAAC,QAAQ,EACd,mBACE,OAAO,EAAE,kBAAkB,EAC3B,mBAAmB,EAAE,OAAO,EAC5B,SAAS,EAAE,aAAa,IAEvB,IAAI,CAAC,SAAS;OACZ,MAAM,CACL,CAAC,GAA0B,EAAE,KAAK,KAChC,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;MACpB,CAAC,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC;MAC3B,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CACtB;OACA,GAAG,CAAC,CAAC,CAAwB;MAC5B,QACE,oBACE,OAAO,EAAE,CAAC,CAAC,OAAO,EAClB,MAAM,EAAE,CAAC,CAAC,MAAM,EAChB,KAAK,EAAC,uBAAuB,EAC7B,OAAO,EAAE;UACP,IAAI,CAAC,YAAY,EAAE,CAAC;UACpB,CAAC,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC;SAC3C,IAEA,CAAC,CAAC,SAAS,CACC,EACf;KACH,CAAC,CACQ,CACD,CACX,EACN,WAAK,KAAK,EAAC,oBAAoB,GAAO,EACrC,IAAI,CAAC,cAAc,IAAI,CAAC,IAAI,CAAC,eAAe,IAC3C,oBACE,EAAE,EAAC,UAAU,EACb,KAAK,EAAE;QACL,cAAc,EAAE,IAAI;QACpB,YAAY,EAAE,IAAI;QAClB,MAAM,EAAE,IAAI,CAAC,YAAY;OAC1B,EACD,OAAO,EAAC,UAAU,EAClB,OAAO,EAAE,YAAY,IAAI,CAAC,cAAc,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,IAE3D,IAAI,CAAC,YAAY,CACL,IACb,IAAI,EACR,YAAM,IAAI,EAAC,QAAQ,GAAQ,EAC3B,WAAK,EAAE,EAAC,cAAc,GAAO,EAC5B,IAAI,CAAC,KAAK,IACT,oBACE,EAAE,EAAC,eAAe,EAClB,KAAK,EAAE;QACL,cAAc,EAAE,IAAI;QACpB,YAAY,EAAE,IAAI;QAClB,MAAM,EAAE,IAAI,CAAC,SAAS;OACvB,EACD,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,YAAY,IAAI,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,IAErD,IAAI,CAAC,SAAS,CACF,IACb,IAAI,EACP,IAAI,CAAC,iBAAiB,IACrB,oBACE,EAAE,EAAC,aAAa,EAChB,OAAO,EAAE,MAAM,aAAa,CAAC,UAAU,EAAE,EACzC,KAAK,EAAC,yBAAyB,EAC/B,OAAO,EAAC,MAAM,IAEb,IAAI,CAAC,eAAe,CACR,IACb,IAAI,EACP,IAAI,CAAC,eAAe,IACnB,oBACE,EAAE,EAAC,eAAe,EAClB,OAAO,EAAE,MAAM,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,EACxD,KAAK,EAAC,yBAAyB,EAC/B,OAAO,EAAE,GAAG,IAAI,CAAC,eAAe,EAAE,EAAE,IAEnC,IAAI,CAAC,eAAe,EAAE,CACV,IACb,IAAI,CACJ,EACN,WACE,KAAK,EAAE;QACL,cAAc,EAAE,IAAI;QACpB,QAAQ,EAAE,IAAI,CAAC,MAAM;QACrB,SAAS,EAAE,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,YAAY;OAC/C,EACD,KAAK,EAAE;QACL,OAAO,EAAE,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,YAAY,GAAG,GAAG,GAAG,GAAG;OACzD,GACI,EACP,WAAK,KAAK,EAAC,wBAAwB,GAAO,CACrC,EACP;GACH;;;;;AClzBH,MAAM,YAAY,GAAG,+sHAA+sH;;MC2BvtHA,WAAS;;;;;iBASJ,2BAA2B;gBAK5B,KAAK;kBASQ,EAAE;;EAE9B,IAAI,UAAU;IACZ,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC,CAAC;GACnE;EAEO,MAAM,CAAC,KAAa;IAC1B,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;IAC5B,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC;MACxB,CAAC,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;MACzB,IAAI,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,cAAc,EAAE;QACnC,CAAC,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;OAC3B;KACF,CAAC,CAAC;GACJ;EAED,iBAAiB;IACf,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE;MAC1B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;KAC9D;GACF;EAED,gBAAgB;IACd,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;GACtB;EAED,mBAAmB;IACjB,IAAI,CAAC,YAAY,EAAE,CAAC;GACrB;EAEO,YAAY;IAClB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC;GACnD;EAGD,mBAAmB,CAAC,KAAa;;IAE/B,UAAU,CAAC,MAAM,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;GACtC;EAEO,mBAAmB,CAAC,KAAa;IACvC,MAAM,YAAY,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;IAC1E,OAAO,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;GAC9C;EAEO,WAAW;IACjB,OAAO,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE;MACnC,QACE,mBACE,KAAK,EAAE;UACL,MAAM,EAAE,KAAK,KAAK,IAAI,CAAC,cAAc;SACtC,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAEhC,KAAK,CACM,EACd;KACH,CAAC,CAAC;GACJ;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,iBAAiB,EAAE,IAAI;QACvB,mBAAmB,EAAE,IAAI,CAAC,IAAI;QAC9B,oBAAoB,EAAE,CAAC,IAAI,CAAC,IAAI;OACjC,IAED,WAAK,KAAK,EAAC,cAAc,IACvB,UAAI,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,KAAK,CAAM,EACrC,sBACE,KAAK,QACL,IAAI,EAAC,IAAI,EACT,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,GAClB,CACd,EACN,eACE,QAAQ,EAAE,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,cAAc,CAAC,EACvD,KAAK,EAAC,YAAY,IAEjB,IAAI,CAAC,WAAW,EAAE,CACX,EACV,WAAK,KAAK,EAAC,aAAa,IACtB,eAAa,CACT,CACD,EACP;GACH;;;;;;;;AC3IH,MAAM,gBAAgB,GAAG,yCAAyC;;MCgBrD,aAAa;;;;;EAMxB,MAAM;IACJ,QACE,EAAC,IAAI,QACH,eAAa,CACR,EACP;GACH;;;;AC5BH,MAAM,gBAAgB,GAAG,irDAAirD;;MCgB7rD,aAAa;;;;;gBAIuB,KAAK;;wBAU7B,WAAW;;wBAUX,CAAC;oBAeL,KAAK;;EAExB,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,IAAI,EAAE,CAAC,IAAI,CAAC,IAAI;OACjB,IAED,WAAK,KAAK,EAAC,kBAAkB,IAC3B,eACE,KAAK,EAAC,yBAAyB,EAC/B,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,IAAI,GACA,EACX,WAAK,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,IACzD,eAAS,MAAM,EAAC,2BAA2B,GAAG,CAC1C,CACF,EAEN,WAAK,KAAK,EAAC,yBAAyB,IAClC,YAAM,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC1C,EAEN,sBACE,IAAI,EAAC,IAAI,EACT,IAAI,EAAC,aAAa,EAClB,KAAK,QACL,OAAO,EAAE;QACP,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;OAC1B,GACe,EAClB,eAAa,EACZ,IAAI,CAAC,cAAc,IAClB,WAAK,KAAK,EAAC,yBAAyB,IAClC,cACE,KAAK,EAAC,iBAAiB,EACvB,OAAO,EAAE,CAAC,CAAC;QACT,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;OACvB,IAEA,IAAI,CAAC,YAAY,CACX,CACL,IACJ,IAAI,EACR,WAAK,EAAE,EAAC,OAAO,GAAO,CACjB,EACP;GACH;;;;AC1GH,MAAM,aAAa,GAAG,+zDAA+zD;;ACAr1D;;;;;;;;AASA,SAAS,aAAa,CAAC,KAA4B;EACjD,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;EAE3B,IAAI,QAAQ,EAAE;IACZ,OAAO,WAAK,KAAK,EAAE,iBAAiB,IAAG,QAAQ,CAAO,CAAC;GACxD;EAED,QACE,WACE,KAAK,EAAE,cAAc,EACrB,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,IAEnB,SAAG,IAAI,EAAC,MAAM,eAAW,SAAS,IAChC,YACE,EAAE,EAAC,wBAAwB,EAC3B,CAAC,EAAC,kIACiE,GACnE,EACF,YACE,EAAE,EAAC,oBAAoB,EACvB,CAAC,EAAC,2TAGgE,GAClE,CACA,CACA,EACN;AACJ,CAAC;MAiBY,UAAU;;;;IAqCb,oBAAe,GAAG,mBAAmB,CAAC;;;;;sBAPzB,QAAQ;;EAS7B,MAAM;IACJ,QACE,EAAC,IAAI,QACH,UACE,KAAK,EAAC,mCAAmC,EACzC,KAAK,EAAE,IAAI,CAAC,GAAG,EACf,EAAE,EAAE,IAAI,CAAC,eAAe,IAEvB,IAAI,CAAC,KAAK,IACT,WAAK,GAAG,EAAE,IAAI,CAAC,KAAK,EAAE,KAAK,EAAC,cAAc,GAAO,KAEjD,EAAC,aAAa,IAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI,CAC3C,EACD,WAAK,KAAK,EAAC,aAAa,IACtB,YAAM,KAAK,EAAC,qBAAqB,EAAC,KAAK,EAAE,IAAI,CAAC,GAAG,IAC9C,IAAI,CAAC,GAAG,CACJ,EACP,YAAM,KAAK,EAAC,qBAAqB,EAAC,KAAK,EAAE,IAAI,CAAC,MAAM,IACjD,IAAI,CAAC,MAAM,CACP,CACH,CACH,EACL,mBACE,OAAO,EAAE,IAAI,CAAC,eAAe,EAC7B,SAAS,EAAE,aAAa,EACxB,MAAM,EAAE;QACN,QAAQ,EAAE,EAAE;OACb,IAED,eAAa,EACb,2BACE,KAAK,EAAE,IAAI,CAAC,UAAU,EACtB,IAAI,EAAC,SAAS,EACd,OAAO,EAAE,CAAC,CAAC;QACT,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;OAC1B,GACoB,CACX,CACT,EACP;GACH;;;;;ACxIH,MAAM,iBAAiB,GAAG,0CAA0C;;MCuBvD,cAAc;;;;;;;EAkBzB,MAAM;IACJ,QACE,wBACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,GACpB,EACpB;GACH;;;;;ACjDH,MAAM,WAAW,GAAG,wzGAAwzG;;MCgB/zG,QAAQ;;;gBAIJ,KAAK;kBASH,KAAK;mBAKJ,UAAU;;;;;;EAqB5B,IAAI,QAAQ;IACV,OAAO,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;GACpD;EAED,kBAAkB;IAChB,MAAM,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC;IAClC,MAAM,QAAQ,GAAG,WAAW,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;IAC7D,IAAI,IAAI,CAAC,KAAK,KAAK,QAAQ,EAAE;MAC3B,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;KACvB;GACF;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,UAAU,EAAE,IAAI,CAAC,IAAI;QACrB,YAAY,EAAE,IAAI,CAAC,MAAM;QACzB,MAAM,EAAE,IAAI,CAAC,MAAM;OACpB,IAED,UAAI,KAAK,EAAC,KAAK,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,IAC/B,SAAG,KAAK,EAAE,eAAe,IAAI,CAAC,OAAO,EAAE,IACrC,WAAK,KAAK,EAAC,cAAc,IACtB,IAAI,CAAC,aAAa,IACjB,WAAK,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,aAAa,CAAO,IAC1C,IAAI,CACJ,CACJ,EACJ,YAAM,KAAK,EAAC,uBAAuB,IACjC,eAAa,CACR,CACJ,CACA,EACP;GACH;;;;;AC3FH,MAAM,eAAe,GAAG,wtHAAwtH;;MC0BnuH,SAAS;;;;;iBASJ,UAAU;gBAKX,KAAK;;EASpB,IAAI,aAAa;IACf,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,uBAAuB,CAAC,CAAC,CAAC;GACtE;EAEO,MAAM,CAAC,KAAa;IAC1B,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;IAC5B,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC;MAC3B,CAAC,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;MAEzB,IAAI,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,cAAc,EAAE;QACnC,CAAC,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;OAC3B;KACF,CAAC,CAAC;GACJ;EAED,iBAAiB;IACf,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,EAAE;MAC7B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;KACjE;GACF;EAED,gBAAgB;IACd,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;GACtB;EAGD,mBAAmB,CAAC,KAAa;IAC/B,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;GACpB;EAEO,WAAW;IACjB,OAAO,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE;MACtC,QACE,mBACE,KAAK,EAAE;UACL,MAAM,EAAE,KAAK,KAAK,IAAI,CAAC,cAAc;SACtC,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAEhC,KAAK,CACM,EACd;KACH,CAAC,CAAC;GACJ;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,iBAAiB,EAAE,IAAI;QACvB,mBAAmB,EAAE,IAAI,CAAC,IAAI;QAC9B,oBAAoB,EAAE,CAAC,IAAI,CAAC,IAAI;OACjC,IAED,WAAK,KAAK,EAAC,iBAAiB,IAC1B,UAAI,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,KAAK,CAAM,EACrC,sBACE,KAAK,QACL,IAAI,EAAC,IAAI,EACT,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,GAClB,CACd,EACN,mBAAU,IAAI,CAAC,WAAW,EAAE,CAAW,EACvC,eAAa,CACR,EACP;GACH;;;;;;;;ACpHH,MAAM,mBAAmB,GAAG,4CAA4C;;MCgB3D,gBAAgB;;;;;EAM3B,MAAM;IACJ,QACE,EAAC,IAAI,QACH,eAAa,CACR,EACP;GACH;;;;;;","names":["MenuAbout"],"sources":["./src/components/menu/menu.scss?tag=ix-menu","./src/components/menu/menu.tsx","./src/components/menu-about/menu-about.scss?tag=ix-menu-about&encapsulation=scoped","./src/components/menu-about/menu-about.tsx","./src/components/menu-about-item/menu-about-item.css?tag=ix-menu-about-item&encapsulation=scoped","./src/components/menu-about-item/menu-about-item.tsx","./src/components/menu-about-news/menu-about-news.scss?tag=ix-menu-about-news&encapsulation=scoped","./src/components/menu-about-news/menu-about-news.tsx","./src/components/menu-avatar/menu-avatar.scss?tag=ix-menu-avatar&encapsulation=scoped","./src/components/menu-avatar/menu-avatar.tsx","./src/components/menu-avatar-item/menu-avatar-item.css?tag=ix-menu-avatar-item&encapsulation=scoped","./src/components/menu-avatar-item/menu-avatar-item.tsx","./src/components/menu-item/menu-item.scss?tag=ix-menu-item&encapsulation=scoped","./src/components/menu-item/menu-item.tsx","./src/components/menu-settings/menu-settings.scss?tag=ix-menu-settings&encapsulation=scoped","./src/components/menu-settings/menu-settings.tsx","./src/components/menu-settings-item/menu-settings-item.css?tag=ix-menu-settings-item&encapsulation=scoped","./src/components/menu-settings-item/menu-settings-item.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/hover';\n\nix-menu {\n  display: flex;\n  flex-direction: row;\n  position: absolute;\n  height: 100%;\n  min-height: 22.75rem;\n  z-index: var(--theme-z-index-sticky);\n  width: auto;\n\n  .menu {\n    display: flex;\n    flex-direction: column;\n    position: relative;\n    width: 4rem;\n    height: 100%;\n    padding-block-end: 1rem;\n    overflow: hidden;\n\n    &.expanded {\n      box-shadow: var(--theme-navigation--box-shadow);\n    }\n\n    background-color: var(--theme-nav--background);\n    transition: width var(--animate-duration);\n\n    .burger-menu {\n      margin: 0.75rem 0 1rem 0.75rem;\n    }\n  }\n\n  .menu-overlay {\n    display: block;\n    position: absolute;\n    width: calc(100vw - 4rem);\n    height: 100%;\n    left: 4rem;\n    z-index: -1;\n    backdrop-filter: blur(1rem);\n    background-color: var(--theme-sidebar-overlay-blur);\n    transition: all $medium-time ease-out;\n  }\n\n  .menu-overlay-invisible {\n    display: none;\n  }\n\n  .menu.expanded {\n    width: 16rem;\n  }\n\n  .menu-overlay.expanded {\n    width: calc(100vw - 16rem);\n    left: 16rem;\n  }\n\n  #avatar-tab-placeholder {\n    max-height: 3rem;\n  }\n\n  .avatar {\n    margin-bottom: 2rem;\n  }\n\n  #cui-imprint {\n    .cui-imprint-product-name {\n      margin-bottom: $default-space;\n    }\n\n    .cui-imprint-product-description {\n      margin-bottom: $x-large-space;\n    }\n\n    .cui-imprint-link-container {\n      display: flex;\n      align-items: center;\n    }\n  }\n\n  .bottom-tab-divider {\n    margin-top: auto;\n  }\n}\n\nix-menu.mode-mobile {\n  .menu:not(.expanded) {\n    width: 0;\n  }\n\n  .menu {\n    padding-top: 2rem;\n  }\n\n  .menu .burger-menu {\n    display: none;\n  }\n\n  .menu-overlay {\n    left: 0px;\n    width: calc(100vw);\n  }\n}\n\n// Remove text-decoration if a tag is used inside ix-menu\na[href]:has(> ix-menu-item) {\n  text-decoration: none;\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  Listen,\n  Method,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { menuController } from '../utils/menu-service/menu-service';\nimport { convertToRemString } from '../utils/rwd.util';\nimport { hostContext, isBasicNavigationLayout } from '../utils/screen/context';\nimport { Mode } from '../utils/screen/mode';\nimport { screenMode } from '../utils/screen/service';\nimport { themeSwitcher } from '../utils/theme-switcher';\n\n@Component({\n  tag: 'ix-menu',\n  styleUrl: 'menu.scss',\n  scoped: false,\n})\nexport class Menu {\n  @Element() hostElement!: HTMLIxMenuElement;\n\n  /**\n   * Is settings tab visible\n   */\n  @Prop({ mutable: true }) showSettings = false;\n\n  /**\n   * Is about tab visible\n   */\n  @Prop({ mutable: true }) showAbout = false;\n\n  /**\n   * Show toggle between light and dark variant. Only if the provided theme have implemented both!\n   */\n  @Prop() enableToggleTheme = false;\n\n  /**\n   * Is settings tab is visible\n   */\n  @Prop() enableSettings = true;\n\n  /**\n   * Internal\n   */\n  @Prop() enableMapExpand = false;\n\n  /**\n   * Should only be set if you use ix-menu standalone\n   */\n  @Prop() applicationName: string;\n\n  /**\n   * Should only be set if you use ix-menu standalone\n   */\n  @Prop() applicationDescription = '';\n\n  /**\n   * Maximum number of menu items to show in case enough vertical space is available.\n   * Extra menu items will be collapsed to 'show more' menu item.\n   */\n  @Prop() maxVisibleMenuItems = 9;\n\n  /**\n   */\n  @Prop() i18nLegal = 'About & legal information';\n\n  /**\n   */\n  @Prop() i18nSettings = 'Settings';\n\n  /**\n   */\n  @Prop() i18nToggleTheme = 'Toggle theme';\n\n  /**\n   */\n  @Prop() i18nExpand = ' Expand';\n\n  /**\n   */\n  @Prop() i18nCollapse = 'Collapse';\n\n  /**\n   */\n  @Prop() i18nMore = 'More…';\n\n  /**\n   * Expand menu\n   */\n  @Prop({ mutable: true, reflect: true }) expand = false;\n\n  /**\n   * Menu expanded\n   */\n  @Event() expandChange: EventEmitter<boolean>;\n\n  /**\n   * Map Sidebar expanded\n   */\n  @Event() mapExpandChange: EventEmitter<boolean>;\n  @State() showMoreItems = false;\n  @State() visibleMenuItems = 0;\n  @State() countMoreNotifications = 0;\n  @State() mapExpand = true;\n  @State() activeTab: HTMLIxMenuItemElement;\n  @State() isMoreTabEmpty = false;\n  @State() mode: Mode = 'desktop';\n\n  private readonly domObserver = new MutationObserver(\n    this.onDomChange.bind(this)\n  );\n\n  @Listen('resize', { target: 'window' })\n  onWindowResize() {\n    this.visibleMenuItems = this.getMaxTabCount();\n  }\n\n  private handleNodeMutation(node: Node) {\n    if (!(node instanceof HTMLElement)) {\n      return;\n    }\n\n    if (node.matches('.tab')) {\n      this.onWindowResize();\n    }\n\n    if (node.matches('ix-menu-about') && this.menu.contains(node)) {\n      this.appendAbout();\n    }\n\n    if (node.matches('ix-menu-settings') && this.menu.contains(node)) {\n      this.appendSettings();\n    }\n  }\n\n  private onDomChange(mutations: MutationRecord[]) {\n    mutations.forEach((mutationRecord) => {\n      mutationRecord.addedNodes.forEach(this.handleNodeMutation.bind(this));\n      mutationRecord.removedNodes.forEach(this.handleNodeMutation.bind(this));\n    });\n  }\n\n  // FBC IAM workaround #488\n  private readonly isVisible = (elm: HTMLElement) => {\n    return (\n      elm.style.display !== 'none' &&\n      elm.parentElement?.parentElement?.style.display !== 'none'\n    );\n  };\n\n  get popoverArea() {\n    return this.hostElement.querySelector('#popover-area');\n  }\n\n  get overlayContainer() {\n    return this.hostElement.querySelector('.menu-overlay');\n  }\n\n  get invisibleContainer() {\n    return this.hostElement.querySelector('.menu-overlay-invisible');\n  }\n\n  get menu() {\n    return this.hostElement.querySelector('.menu');\n  }\n\n  get menuItems() {\n    return Array.from(\n      this.hostElement.querySelectorAll(\n        'ix-menu-item:not(.internal-tab):not(.home-tab):not(.bottom-tab):not([slot=\"bottom\"])'\n      )\n    ).filter(this.isVisible);\n  }\n\n  get menuBottomItems() {\n    return Array.from(\n      this.hostElement.querySelectorAll(\n        'ix-menu-item.bottom-tab:not(.internal-tab):not(.home-tab)'\n      )\n    ).filter(this.isVisible);\n  }\n\n  get homeTab() {\n    return this.hostElement.querySelector('ix-menu-item.home-tab');\n  }\n\n  get moreItemsDropdown(): HTMLElement {\n    return this.hostElement.querySelector('.internal-tab ix-dropdown');\n  }\n\n  get isMoreItemsDropdownEmpty(): boolean {\n    return (\n      this.hostElement.querySelectorAll('.internal-tab ix-dropdown .appended')\n        .length === 0\n    );\n  }\n\n  get moreItemsDropdownItems() {\n    return this.hostElement.querySelectorAll(\n      '.internal-tab ix-dropdown ix-menu-item'\n    );\n  }\n\n  get activeMoreTabContainer() {\n    return this.hostElement.querySelector('.active-more-tab');\n  }\n\n  get activeMoreTab() {\n    return this.hostElement.querySelector('.active-more-tab ix-menu-item');\n  }\n\n  get aboutPopoverContainer(): HTMLElement {\n    return this.hostElement.querySelector('.about-news');\n  }\n\n  get aboutPopover(): HTMLIxMenuAboutNewsElement {\n    return document.querySelector('ix-menu-about-news');\n  }\n\n  get aboutTab(): HTMLElement {\n    return this.hostElement.querySelector('#aboutAndLegal');\n  }\n\n  get about(): HTMLIxMenuAboutElement {\n    return this.hostElement.querySelector('ix-menu-about');\n  }\n\n  get settings(): HTMLIxMenuSettingsElement {\n    return this.hostElement.querySelector('ix-menu-settings');\n  }\n\n  get isSettingsEmpty(): boolean {\n    return (\n      Array.from(this.hostElement.querySelectorAll('ix-menu-settings-item'))\n        .length === 0\n    );\n  }\n\n  get avatarItem(): HTMLIxMenuAvatarElement {\n    return this.hostElement.querySelector('ix-menu-avatar');\n  }\n\n  get tabsContainer(): HTMLDivElement {\n    return this.hostElement.querySelector('#menu-tabs');\n  }\n\n  private showTab(index: number) {\n    return index + 1 <= this.visibleMenuItems;\n  }\n\n  componentDidLoad() {\n    this.settings?.addEventListener('close', () => {\n      this.showSettings = false;\n      this.settings.show = this.showSettings;\n    });\n\n    this.settings?.addEventListener('animationend', () => {\n      if (!this.showSettings) {\n        this.settings.classList.add('d-none');\n        this.overlayContainer.classList.add('d-none');\n      }\n    });\n\n    this.about?.addEventListener('close', () => {\n      this.showAbout = false;\n      this.about.show = this.showAbout;\n    });\n\n    this.about?.addEventListener('animationend', () => {\n      if (!this.showAbout) {\n        this.about.classList.add('d-none');\n        this.overlayContainer.classList.add('d-none');\n      }\n    });\n\n    this.overlayContainer.classList.add('d-none');\n\n    this.onWindowResize();\n\n    this.domObserver.observe(this.hostElement, {\n      attributes: false,\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  componentWillLoad() {\n    menuController.register(this.hostElement);\n    const layout = hostContext('ix-basic-navigation', this.hostElement);\n    if (isBasicNavigationLayout(layout) && layout.hideHeader === false) {\n      screenMode.onChange.on((mode) => (this.mode = mode));\n      this.mode = screenMode.mode;\n    }\n  }\n\n  componentWillRender() {\n    this.appendTabs();\n  }\n\n  componentDidRender() {\n    this.visibleMenuItems = this.getMaxTabCount();\n    this.appendFragments();\n  }\n\n  private appendFragments() {\n    this.appendAvatar();\n    this.appendAbout();\n    this.appendSettings();\n    this.appendAboutNewsPopover();\n\n    // This lead to none infinite-loops and other bugs.\n    this.isMoreTabEmpty = this.isMoreItemsDropdownEmpty;\n\n    this.countMoreNotifications = this.getMoreNotificationsCount();\n  }\n\n  private resetActiveTab() {\n    this.activeTab = null;\n  }\n\n  private isMenuItemActive(item: HTMLIxMenuItemElement) {\n    return item.active || item.classList.contains('active');\n  }\n\n  private appendTabs() {\n    this.activeTab = null;\n\n    if (this.homeTab) {\n      this.hostElement.querySelector('.tabs-top').appendChild(this.homeTab);\n      this.homeTab.addEventListener('click', this.resetOverlay.bind(this));\n    }\n\n    this.menuItems.forEach((item: HTMLIxMenuItemElement, index) => {\n      if (this.showTab(index)) {\n        item.classList.remove('d-none');\n      } else {\n        item.classList.add('d-none');\n\n        if (this.isMenuItemActive(item)) {\n          this.activeTab = item;\n        }\n      }\n\n      // TODO: Find better solution to handle home tab\n      this.homeTab?.classList.remove('d-none');\n\n      item.addEventListener('click', this.resetOverlay.bind(this));\n    });\n  }\n\n  private appendAvatar() {\n    const avatar = this.avatarItem;\n    if (avatar) {\n      avatar.style.marginBottom = '1rem';\n      this.hostElement\n        .querySelector('#avatar-tab-placeholder')\n        ?.appendChild(avatar);\n    }\n  }\n\n  private getAboutPopoverVerticalPosition() {\n    const heightArrow = 12;\n    const offsetArrow = 6;\n    const rectAbout = this.aboutTab.getBoundingClientRect();\n    const offset =\n      window.innerHeight -\n      (rectAbout.bottom - rectAbout.height / 2 + heightArrow / 2 + offsetArrow);\n    return convertToRemString(offset);\n  }\n\n  private appendAboutNewsPopover() {\n    if (!this.aboutPopover) {\n      return;\n    }\n\n    this.aboutPopover.style.bottom = this.getAboutPopoverVerticalPosition();\n\n    if (!this.popoverArea?.contains(this.aboutPopover)) {\n      const showMore = () => {\n        if (this.aboutPopover?.aboutItemLabel) {\n          this.about.activeTabLabel = this.aboutPopover.aboutItemLabel;\n          this.toggleAbout(true);\n        }\n      };\n\n      this.aboutPopover.addEventListener('showMore', showMore.bind(this));\n      document.body.appendChild(this.aboutPopover);\n    }\n  }\n\n  private appendSettings() {\n    if (this.settings) {\n      this.overlayContainer.appendChild(this.settings);\n    }\n  }\n\n  private appendAbout() {\n    if (this.about) {\n      this.overlayContainer.appendChild(this.about);\n    }\n  }\n\n  private getMoreNotificationsCount(): number {\n    const moreTabs = this.moreItemsDropdown?.querySelectorAll('.appended');\n    let count = 0;\n    moreTabs?.forEach((tab) => {\n      if (tab['notifications']) {\n        count += tab['notifications'];\n      }\n    });\n\n    return count;\n  }\n\n  private getAvailableHeight() {\n    const heightBurgerMenu = 60;\n    const heightHome = 72;\n    const heightAvatar = 56;\n    const heightBottomTab = 36;\n\n    let availableHeight = this.hostElement.clientHeight;\n\n    availableHeight -= heightBurgerMenu;\n\n    if (this.avatarItem) {\n      availableHeight -= heightAvatar;\n    }\n\n    if (this.homeTab) {\n      availableHeight -= heightHome;\n    }\n\n    if (this.showAbout) {\n      availableHeight -= heightBottomTab;\n    }\n\n    if (this.showSettings) {\n      availableHeight -= heightBottomTab;\n    }\n\n    if (this.menuBottomItems.length) {\n      availableHeight -= this.menuBottomItems.length * heightBottomTab;\n    }\n\n    if (this.enableMapExpand) {\n      availableHeight -= heightBottomTab;\n    }\n\n    // Subtract height of imprint and theme toggle tabs\n    availableHeight -= 2 * heightBottomTab;\n\n    // Subtract bottom margin of bottom tabs\n    availableHeight -= 16;\n\n    return availableHeight;\n  }\n\n  private getMaxTabCount() {\n    const heightTab = 48;\n    const availableHeight = this.getAvailableHeight();\n    const visibleCount = Math.floor(availableHeight / heightTab);\n    const menuItemCount = this.menuItems.length;\n\n    if (menuItemCount === 1) {\n      return 1;\n    }\n\n    if (menuItemCount < this.maxVisibleMenuItems) {\n      if (visibleCount > menuItemCount) {\n        return menuItemCount;\n      }\n\n      return Math.min(visibleCount - 2, menuItemCount);\n    }\n\n    if (menuItemCount === this.maxVisibleMenuItems) {\n      if (visibleCount < this.maxVisibleMenuItems) {\n        return visibleCount - 2;\n      }\n\n      if (visibleCount === this.maxVisibleMenuItems) {\n        return this.maxVisibleMenuItems - 2;\n      }\n\n      return Math.min(visibleCount, this.maxVisibleMenuItems);\n    }\n\n    if (visibleCount === this.maxVisibleMenuItems) {\n      return this.maxVisibleMenuItems - 2;\n    }\n    if (visibleCount >= this.maxVisibleMenuItems) {\n      return this.maxVisibleMenuItems - 1;\n    }\n\n    return Math.min(visibleCount - 2, this.maxVisibleMenuItems);\n  }\n\n  /**\n   * Toggle map sidebar expand\n   * @param show\n   */\n  @Method()\n  async toggleMapExpand(show?: boolean) {\n    this.skipAllOverlayAnimations();\n\n    if (show !== undefined) {\n      this.mapExpand = show;\n    } else {\n      this.mapExpand = !this.mapExpand;\n    }\n  }\n\n  private skipAllOverlayAnimations() {\n    if (this.about) {\n      this.skipOverlayAnimationFor(this.about);\n    }\n    if (this.settings) {\n      this.skipOverlayAnimationFor(this.settings);\n    }\n  }\n\n  private skipOverlayAnimationFor(element: HTMLElement) {\n    const animateClass = 'animate__animated';\n\n    element?.classList.remove(animateClass);\n\n    setTimeout(() => {\n      element?.classList.add(animateClass);\n    }, 300);\n  }\n\n  /**\n   * Toggle menu\n   * @param show\n   */\n  @Method()\n  async toggleMenu(show?: boolean) {\n    this.skipAllOverlayAnimations();\n\n    if (show !== undefined) {\n      this.expand = show;\n    } else {\n      this.expand = !this.expand;\n    }\n\n    if (this.aboutPopover) {\n      this.aboutPopover.expanded = this.expand;\n    }\n\n    this.expandChange.emit(this.expand);\n  }\n\n  /**\n   * Toggle Settings tabs\n   * @param show\n   */\n  @Method()\n  async toggleSettings(show: boolean) {\n    if (this.showAbout) {\n      this.skipAllOverlayAnimations();\n    } else {\n      this.skipOverlayAnimationFor(this.about);\n    }\n\n    this.about?.classList.add('d-none');\n\n    this.resetOverlay();\n    this.showSettings = show;\n    this.settings.show = this.showSettings;\n    this.settings.classList.remove('d-none');\n    this.overlayContainer.classList.remove('d-none');\n  }\n\n  /**\n   * Toggle About tabs\n   * @param show\n   */\n  @Method()\n  async toggleAbout(show: boolean) {\n    if (this.showSettings) {\n      this.skipAllOverlayAnimations();\n    } else {\n      this.skipOverlayAnimationFor(this.settings);\n    }\n\n    this.settings?.classList.add('d-none');\n\n    this.resetOverlay();\n    this.showAbout = show;\n    this.about.show = this.showAbout;\n    this.about.classList.remove('d-none');\n    this.overlayContainer.classList.remove('d-none');\n  }\n\n  private resetOverlay() {\n    this.showSettings = false;\n    this.showAbout = false;\n\n    if (this.settings) {\n      this.settings.show = this.showSettings;\n    }\n\n    if (this.about) {\n      this.about.show = this.showAbout;\n    }\n\n    this.toggleMenu(false);\n  }\n\n  private showMoreButton() {\n    const menuItemCount = this.menuItems.length;\n\n    if (menuItemCount === 1) {\n      return false;\n    }\n\n    if (menuItemCount < this.maxVisibleMenuItems) {\n      return this.visibleMenuItems < menuItemCount;\n    }\n\n    if (menuItemCount > this.maxVisibleMenuItems) {\n      return this.visibleMenuItems < this.maxVisibleMenuItems;\n    }\n\n    return this.visibleMenuItems <= this.maxVisibleMenuItems - 2;\n  }\n\n  private getCollapseText() {\n    return this.mapExpand ? this.i18nCollapse : this.i18nExpand;\n  }\n\n  private getCollapseIcon() {\n    return this.mapExpand ? 'double-chevron-left' : 'double-chevron-right';\n  }\n\n  private isMenuItemClicked(event: MouseEvent) {\n    const path = event.composedPath();\n    const menuItems = (path as HTMLElement[])\n      .filter((element) => element.id !== 'ix-menu-more-tab')\n      .filter((element) => {\n        return element.tagName === 'IX-MENU-ITEM';\n      });\n\n    return menuItems.some((menu) => this.tabsContainer.contains(menu));\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          expanded: this.expand,\n          [`mode-${this.mode}`]: true,\n        }}\n      >\n        <div\n          class={{\n            menu: true,\n            expanded: this.expand,\n          }}\n          onClick={() => {\n            this.resetActiveTab();\n          }}\n        >\n          <ix-burger-menu\n            onClick={async () => this.toggleMenu()}\n            expanded={this.expand}\n            class={{\n              'burger-menu': true,\n            }}\n          ></ix-burger-menu>\n          <div id=\"avatar-tab-placeholder\"></div>\n          <div\n            id=\"menu-tabs\"\n            style={{\n              display: 'contents',\n            }}\n            onClick={(event) => {\n              if (this.isMenuItemClicked(event)) {\n                this.resetOverlay();\n              }\n            }}\n          >\n            <div class=\"tabs-top\"></div>\n            <slot></slot>\n            <div class=\"active-more-tab\">\n              {this.activeTab ? (\n                <ix-menu-item\n                  class=\"internal-tab\"\n                  active={true}\n                  tabIcon={this.activeTab.tabIcon}\n                >\n                  {this.activeTab.innerText}\n                </ix-menu-item>\n              ) : null}\n            </div>\n            <ix-menu-item\n              id=\"ix-menu-more-tab\"\n              tabIcon=\"more-menu\"\n              class={{\n                'internal-tab': true,\n              }}\n              style={{\n                display: this.showMoreButton() ? 'block' : 'none',\n              }}\n              title=\"Show more\"\n              notifications={this.countMoreNotifications}\n            >\n              {this.i18nMore}\n              <ix-dropdown\n                trigger={'ix-menu-more-tab'}\n                positioningStrategy={'fixed'}\n                placement={'right-start'}\n              >\n                {this.menuItems\n                  .filter(\n                    (elm: HTMLIxMenuItemElement, index) =>\n                      !this.showTab(index) &&\n                      !this.isMenuItemActive(elm) &&\n                      this.isVisible(elm)\n                  )\n                  .map((e: HTMLIxMenuItemElement) => {\n                    return (\n                      <ix-menu-item\n                        tabIcon={e.tabIcon}\n                        active={e.active}\n                        class=\"internal-tab appended\"\n                        onClick={() => {\n                          this.resetOverlay();\n                          e.dispatchEvent(new CustomEvent('click'));\n                        }}\n                      >\n                        {e.innerText}\n                      </ix-menu-item>\n                    );\n                  })}\n              </ix-dropdown>\n            </ix-menu-item>\n          </div>\n          <div class=\"bottom-tab-divider\"></div>\n          {this.enableSettings && !this.isSettingsEmpty ? (\n            <ix-menu-item\n              id=\"settings\"\n              class={{\n                'internal-tab': true,\n                'bottom-tab': true,\n                active: this.showSettings,\n              }}\n              tabIcon=\"cogwheel\"\n              onClick={async () => this.toggleSettings(!this.showSettings)}\n            >\n              {this.i18nSettings}\n            </ix-menu-item>\n          ) : null}\n          <slot name=\"bottom\"></slot>\n          <div id=\"popover-area\"></div>\n          {this.about ? (\n            <ix-menu-item\n              id=\"aboutAndLegal\"\n              class={{\n                'internal-tab': true,\n                'bottom-tab': true,\n                active: this.showAbout,\n              }}\n              tabIcon=\"info\"\n              onClick={async () => this.toggleAbout(!this.showAbout)}\n            >\n              {this.i18nLegal}\n            </ix-menu-item>\n          ) : null}\n          {this.enableToggleTheme ? (\n            <ix-menu-item\n              id=\"toggleTheme\"\n              onClick={() => themeSwitcher.toggleMode()}\n              class=\"internal-tab bottom-tab\"\n              tabIcon=\"bulb\"\n            >\n              {this.i18nToggleTheme}\n            </ix-menu-item>\n          ) : null}\n          {this.enableMapExpand ? (\n            <ix-menu-item\n              id=\"menu-collapse\"\n              onClick={() => this.mapExpandChange.emit(this.mapExpand)}\n              class=\"internal-tab bottom-tab\"\n              tabIcon={`${this.getCollapseIcon()}`}\n            >\n              {this.getCollapseText()}\n            </ix-menu-item>\n          ) : null}\n        </div>\n        <div\n          class={{\n            'menu-overlay': true,\n            expanded: this.expand,\n            'd-block': this.showAbout || this.showSettings,\n          }}\n          style={{\n            opacity: this.showAbout || this.showSettings ? '1' : '0',\n          }}\n        ></div>\n        <div class=\"menu-overlay-invisible\"></div>\n      </Host>\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\n@import 'common-variables';\n@import 'fonts';\n\n:host {\n  display: block;\n  background-color: var(--theme-nav-overlay--background);\n  padding: $medium-space $default-space $default-space $x-large-space;\n  flex-grow: 1;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n\n  .about-header {\n    display: flex;\n    justify-content: space-between;\n    flex-direction: row;\n    align-items: center;\n    height: $x-large-space;\n    margin-bottom: $small-space;\n\n    h2 {\n      color: var(--theme-nav-overlay-header--color);\n      margin-bottom: 0;\n    }\n  }\n\n  .about-tabs {\n    margin-bottom: $large-space;\n  }\n\n  ix-menu-about-item {\n    display: none;\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  forceUpdate,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-menu-about',\n  styleUrl: 'menu-about.scss',\n  scoped: true,\n})\nexport class MenuAbout {\n  /**\n   * Active tab\n   */\n  @Prop({ mutable: true }) activeTabLabel: string;\n\n  /**\n   * Label of first tab\n   */\n  @Prop() label = 'About & legal information';\n\n  /**\n   * Internal\n   */\n  @Prop() show = false;\n\n  @Element() el!: HTMLIxMenuAboutElement;\n\n  /**\n   * About and Legal closed\n   */\n  @Event() close: EventEmitter<MouseEvent>;\n\n  @State() labels: string[] = [];\n\n  get aboutItems(): HTMLIxMenuAboutItemElement[] {\n    return Array.from(this.el.querySelectorAll('ix-menu-about-item'));\n  }\n\n  private setTab(label: string) {\n    this.activeTabLabel = label;\n    this.aboutItems.forEach((i) => {\n      i.style.display = 'none';\n      if (i.label === this.activeTabLabel) {\n        i.style.display = 'block';\n      }\n    });\n  }\n\n  componentWillLoad() {\n    if (this.aboutItems.length) {\n      this.setTab(this.activeTabLabel || this.aboutItems[0].label);\n    }\n  }\n\n  componentDidLoad() {\n    forceUpdate(this.el);\n  }\n\n  componentWillRender() {\n    this.updateLabels();\n  }\n\n  private updateLabels() {\n    this.labels = this.aboutItems.map((i) => i.label);\n  }\n\n  @Watch('activeTabLabel')\n  watchActiveTabLabel(value: string) {\n    // Wait a DOM render cycle to get changed labels\n    setTimeout(() => this.setTab(value));\n  }\n\n  private getSelectedTabIndex(label: string) {\n    const selectedItem = this.aboutItems.find((item) => item.label === label);\n    return this.aboutItems.indexOf(selectedItem);\n  }\n\n  private getTabItems() {\n    return this.aboutItems.map(({ label }) => {\n      return (\n        <ix-tab-item\n          class={{\n            active: label === this.activeTabLabel,\n          }}\n          onClick={() => this.setTab(label)}\n        >\n          {label}\n        </ix-tab-item>\n      );\n    });\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          animate__animated: true,\n          animate__fadeInLeft: this.show,\n          animate__fadeOutLeft: !this.show,\n        }}\n      >\n        <div class=\"about-header\">\n          <h2 class=\"text-h2\">{this.label}</h2>\n          <ix-icon-button\n            ghost\n            size=\"24\"\n            icon=\"close\"\n            onClick={(e) => this.close.emit(e)}\n          ></ix-icon-button>\n        </div>\n        <ix-tabs\n          selected={this.getSelectedTabIndex(this.activeTabLabel)}\n          class=\"about-tabs\"\n        >\n          {this.getTabItems()}\n        </ix-tabs>\n        <div class=\"about-items\">\n          <slot></slot>\n        </div>\n      </Host>\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\n:host {\n  display: block;\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';\n\n@Component({\n  tag: 'ix-menu-about-item',\n  styleUrl: 'menu-about-item.css',\n  scoped: true,\n})\nexport class MenuAboutItem {\n  /**\n   * About Item label\n   */\n  @Prop({ reflect: true }) label: string;\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\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\n@import 'common-variables';\n@import 'mixins/shadows';\n\n:host {\n  --margin: 0.5rem;\n\n  $left: 4rem;\n  display: block;\n  position: fixed;\n  width: 20rem;\n  height: auto;\n  background-color: var(--theme-color-1);\n  border: var(--theme-weak-bdr-1);\n  border-radius: $default-border-radius;\n  padding: 1rem;\n  left: $left;\n  z-index: 10000;\n  transition: left var(--animate-duration);\n\n  margin-left: var(--margin) !important;\n\n  @include box-shadow(4);\n\n  &.expanded {\n    left: calc(#{$left} + 12rem);\n  }\n\n  &.show {\n    display: none;\n  }\n\n  .banner-container {\n    position: absolute;\n    top: 0.0625rem;\n    left: $default-space;\n\n    svg {\n      position: absolute;\n      height: 3.625rem;\n      width: 3rem;\n\n      polygon {\n        fill: var(--theme-color-primary);\n      }\n    }\n\n    ix-icon {\n      margin: $small-space;\n      position: absolute;\n      z-index: 1;\n    }\n  }\n\n  .cui-popover-news-header {\n    margin-bottom: 2rem;\n    margin-left: 4rem;\n    margin-top: -$tiny-space;\n  }\n\n  .popover-body {\n    color: var(--theme-color-std-text);\n  }\n\n  .cui-popover-news-footer {\n    display: flex;\n    justify-content: flex-end;\n    margin-top: 1rem;\n  }\n\n  ix-icon-button {\n    top: $small-space;\n    right: $small-space;\n    position: absolute;\n  }\n\n  #arrow {\n    position: absolute;\n    width: 0.5rem;\n    height: 0.5rem;\n    background-color: var(--theme-color-1);\n    border-left: var(--theme-weak-bdr-1);\n    border-bottom: var(--theme-weak-bdr-1);\n    transform: translateX(calc(var(--margin) * -1 - 0.8rem)) rotateZ(45deg);\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ix-menu-about-news',\n  styleUrl: 'menu-about-news.scss',\n  scoped: true,\n})\nexport class MenuAboutNews {\n  /**\n   * Show about news\n   */\n  @Prop({ mutable: true, reflect: true }) show = false;\n\n  /**\n   * Title of the about news\n   */\n  @Prop() label: string;\n\n  /**\n   *\n   */\n  @Prop() i18nShowMore = 'Show more';\n\n  /**\n   * Subtitle of the about news\n   */\n  @Prop() aboutItemLabel: string;\n\n  /**\n   * Bottom offset\n   */\n  @Prop() offsetBottom = 0;\n\n  /**\n   * Show More button is pressed\n   */\n  @Event() showMore: EventEmitter<MouseEvent>;\n\n  /**\n   * Popover closed\n   */\n  @Event() closePopover: EventEmitter<void>;\n\n  /**\n   * Internal\n   */\n  @Prop() expanded = false;\n\n  render() {\n    return (\n      <Host\n        class={{\n          expanded: this.expanded,\n          show: !this.show,\n        }}\n      >\n        <div class=\"banner-container\">\n          <ix-icon\n            color=\"color-inv-contrast-text\"\n            name=\"shout\"\n            size=\"32\"\n          ></ix-icon>\n          <svg viewBox=\"0 0 48 56\" xmlns=\"http://www.w3.org/2000/svg\">\n            <polygon points=\"0 0 48 0 48 56 24 48 0 56\" />\n          </svg>\n        </div>\n\n        <div class=\"cui-popover-news-header\">\n          <span class=\"text-l-title\">{this.label}</span>\n        </div>\n\n        <ix-icon-button\n          size=\"24\"\n          icon=\"close-small\"\n          ghost\n          onClick={() => {\n            this.show = false;\n            this.closePopover.emit();\n          }}\n        ></ix-icon-button>\n        <slot></slot>\n        {this.aboutItemLabel ? (\n          <div class=\"cui-popover-news-footer\">\n            <button\n              class=\"btn btn-primary\"\n              onClick={(e) => {\n                this.show = false;\n                this.showMore.emit(e);\n              }}\n            >\n              {this.i18nShowMore}\n            </button>\n          </div>\n        ) : null}\n        <div id=\"arrow\"></div>\n      </Host>\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\n@import 'common-variables';\n@import 'mixins/text-truncation';\n@import 'mixins/hover';\n\n:host {\n  display: block;\n  position: relative;\n  margin-bottom: 0.5rem;\n\n  .avatar {\n    display: flex;\n    align-items: center;\n    height: 2.5rem;\n    max-height: 2.5rem;\n    padding-left: 0.25rem;\n    margin-left: 0.75rem;\n    margin-right: 0.75rem;\n    transition: 0.15s;\n\n    > .avatar-image {\n      height: 2rem;\n      width: 2rem;\n      min-height: 2rem;\n      min-width: 2rem;\n      border-radius: 100px;\n    }\n\n    > .avatar-initials {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      height: 2rem;\n      width: 2rem;\n      min-height: 2rem;\n      min-width: 2rem;\n      border-radius: 100px;\n      background-color: var(--theme-color-component-3);\n    }\n\n    #avatar-path-background {\n      fill: var(--theme-avatar--background);\n    }\n\n    #avatar-path-person {\n      fill: var(--theme-color-4);\n    }\n\n    .avatar-name {\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n      white-space: nowrap;\n      margin-left: $default-space;\n      line-height: 1.14;\n\n      .text-default-single {\n        @include ellipsis;\n      }\n    }\n\n    border-radius: 1.25rem;\n\n    @include hover {\n      background-color: var(--theme-avatar-btn--background--hover);\n      color: var(--theme-avatar-btn--color--hover);\n    }\n\n    @include active {\n      background-color: var(--theme-avatar-btn--background--active);\n      color: var(--theme-avatar-btn--color--active);\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\nfunction DefaultAvatar(props: { initials?: string }) {\n  const { initials } = props;\n\n  if (initials) {\n    return <div class={'avatar-initials'}>{initials}</div>;\n  }\n\n  return (\n    <svg\n      class={'avatar-image'}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n      viewBox=\"0 0 32 32\"\n    >\n      <g fill=\"none\" fill-rule=\"evenodd\">\n        <path\n          id=\"avatar-path-background\"\n          d=\"M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163\n          16-16c0-4.243-1.686-8.313-4.686-11.314C24.314 1.686 20.244 0 16 0z\"\n        />\n        <path\n          id=\"avatar-path-person\"\n          d=\"M17.897 17.91c3.8-.018 7.358 1.875 9.485 5.046-2.417 3.999-6.734 6.434-11.382\n        6.42-4.648.014-8.965-2.421-11.382-6.42 2.127-3.171 5.685-5.064\n        9.485-5.045h3.794zM15.821 2.129c3.682 0 6.667 2.984 6.667 6.666 0 3.682-2.985\n        6.667-6.667 6.667s-6.667-2.985-6.667-6.667 2.985-6.666 6.667-6.666z\"\n        />\n      </g>\n    </svg>\n  );\n}\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-menu-avatar',\n  styleUrl: 'menu-avatar.scss',\n  scoped: true,\n})\nexport class MenuAvatar {\n  @Element() hostElement: HTMLIxMenuAvatarElement;\n\n  /**\n   * First line of text\n   */\n  @Prop() top: string;\n\n  /**\n   * Second line of text\n   */\n  @Prop() bottom: string;\n\n  /**\n   * Display a avatar image\n   *\n   * @since 1.4.0\n   */\n  @Prop() image: string;\n\n  /**\n   * Display the initials of the user. Will be overwritten by image\n   *\n   * @since 1.4.0\n   */\n  @Prop() initials: string;\n\n  /**\n   * Use for translation\n   */\n  @Prop() i18nLogout = 'Logout';\n\n  /**\n   * Logout click\n   */\n  @Event() logoutClick: EventEmitter;\n\n  private avatarElementId = 'ix-menu-avatar-id';\n\n  render() {\n    return (\n      <Host>\n        <li\n          class=\"nav-item top-item avatar no-hover\"\n          title={this.top}\n          id={this.avatarElementId}\n        >\n          {this.image ? (\n            <img src={this.image} class=\"avatar-image\"></img>\n          ) : (\n            <DefaultAvatar initials={this.initials} />\n          )}\n          <div class=\"avatar-name\">\n            <span class=\"text-default-single\" title={this.top}>\n              {this.top}\n            </span>\n            <span class=\"text-default-single\" title={this.bottom}>\n              {this.bottom}\n            </span>\n          </div>\n        </li>\n        <ix-dropdown\n          trigger={this.avatarElementId}\n          placement={'right-start'}\n          offset={{\n            mainAxis: 12,\n          }}\n        >\n          <slot></slot>\n          <ix-menu-avatar-item\n            label={this.i18nLogout}\n            icon=\"log-out\"\n            onClick={(e) => {\n              this.logoutClick.emit(e);\n            }}\n          ></ix-menu-avatar-item>\n        </ix-dropdown>\n      </Host>\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\n:host {\n  display: block;\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  Prop,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-menu-avatar-item',\n  styleUrl: 'menu-avatar-item.css',\n  scoped: true,\n})\nexport class MenuAvatarItem {\n  /**\n   * Avatar dropdown icon\n   */\n  @Prop() icon: string;\n\n  /**\n   * Avatar dropdown label\n   */\n  @Prop() label: string;\n\n  /**\n   * Avatar dropdown item clicked\n   */\n  @Event() itemClick: EventEmitter<MouseEvent>;\n\n  @Element() hostElement: HTMLIxMenuAvatarItemElement;\n\n  render() {\n    return (\n      <ix-dropdown-item\n        icon={this.icon}\n        label={this.label}\n        onClick={(e) => this.itemClick.emit(e)}\n      ></ix-dropdown-item>\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\n@import 'common-variables';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n\n:host {\n  position: relative;\n  display: block;\n\n  .tab {\n    display: flex;\n    position: relative;\n    align-items: center;\n    height: 3rem;\n    z-index: 500;\n    padding-left: 1.25rem;\n\n    &:not(.selected) {\n      cursor: pointer;\n\n      @include ghost-hover-pressed;\n    }\n  }\n\n  i.glyph {\n    color: var(--theme-nav-item-primary-icon--color);\n    position: relative;\n  }\n\n  .tab:focus-visible {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: none;\n  }\n\n  .tab:not(:last-child) {\n    margin-bottom: $small-space;\n  }\n\n  .notification {\n    display: inline-flex;\n    position: absolute;\n    top: -$small-space;\n    right: -50%;\n\n    .pill {\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 1rem;\n      min-width: 1rem;\n      position: relative;\n      border-radius: 6.25rem;\n      background-color: var(--theme-color-primary);\n      border-radius: 6.25rem;\n      font-size: 0.75rem;\n      font-weight: bold;\n      line-height: 1;\n      font-family: Siemens Sans, Arial, sans-serif;\n      color: var(--theme-color-primary--contrast);\n      padding: $tiny-space;\n    }\n  }\n\n  .tab-text {\n    @include ellipsis;\n    color: var(--theme-nav-item-primary--color);\n    margin: 0 1.25rem;\n    user-select: none;\n  }\n\n  &.active,\n  &.selected {\n    .tab {\n      background-color: var(--theme-nav-item-primary--background--selected);\n    }\n\n    .tab::before {\n      content: '';\n      background-color: var(--theme-nav-item-primary--border-color--selected);\n      height: 3rem;\n      width: 0.25rem;\n      left: 0;\n      position: absolute;\n    }\n\n    .tab > .glyph {\n      color: var(--theme-nav-item-primary-icon--color--selected);\n    }\n  }\n\n  &.disabled {\n    color: var(--theme-color-weak-text);\n    pointer-events: none;\n    cursor: default;\n\n    .tab > .glyph {\n      color: var(--theme-color-weak-text);\n    }\n\n    .tab-text {\n      color: var(--theme-color-weak-text);\n    }\n  }\n\n  &.home-tab,\n  &[slot='home'] {\n    margin-bottom: 1.5rem;\n  }\n\n  &.bottom-tab,\n  &[slot='bottom'] {\n    $bottom-height: 2.25rem;\n\n    height: $bottom-height;\n\n    .tab {\n      height: $bottom-height;\n    }\n\n    .tab::before {\n      height: $bottom-height;\n    }\n\n    &.active,\n    &.selected {\n      .tab {\n        background-color: var(--theme-color-1);\n      }\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 { Component, Element, h, Host, Prop, State } from '@stencil/core';\n\n@Component({\n  tag: 'ix-menu-item',\n  styleUrl: 'menu-item.scss',\n  scoped: true,\n})\nexport class MenuItem {\n  /**\n   * Move the Tab to a top position.\n   */\n  @Prop() home = false;\n\n  /**\n   * Caution: this is no longer working. Please use slot=\"bottom\" instead.\n   *\n   * Place tab on bottom\n   *\n   * @deprecated Will be removed in 2.0.0. Replaced by slot based implementation\n   */\n  @Prop() bottom = false;\n\n  /**\n   * Icon name from @siemens/ix-icons\n   */\n  @Prop() tabIcon = 'document';\n\n  /**\n   * Show notification cound on tab\n   */\n  @Prop() notifications: number;\n\n  /**\n   * State to display active\n   */\n  @Prop() active: boolean;\n\n  /**\n   * Disable tab and remove event handlers\n   */\n  @Prop() disabled: boolean;\n\n  @Element() hostElement: HTMLIxMenuItemElement;\n\n  @State() title: string;\n\n  get tabLabel() {\n    return this.hostElement.querySelector('.tab-text');\n  }\n\n  componentDidRender() {\n    const spanElement = this.tabLabel;\n    const newTitle = spanElement.innerHTML.replace('&amp;', '&');\n    if (this.title !== newTitle) {\n      this.title = newTitle;\n    }\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n          'home-tab': this.home,\n          'bottom-tab': this.bottom,\n          active: this.active,\n        }}\n      >\n        <li class=\"tab\" title={this.title}>\n          <i class={`glyph glyph-${this.tabIcon}`}>\n            <div class=\"notification\">\n              {this.notifications ? (\n                <div class=\"pill\">{this.notifications}</div>\n              ) : null}\n            </div>\n          </i>\n          <span class=\"tab-text text-default\">\n            <slot></slot>\n          </span>\n        </li>\n      </Host>\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\n@import 'common-variables';\n@import 'fonts';\n\n:host {\n  display: block;\n  background-color: var(--theme-nav-overlay--background);\n  padding: $medium-space $default-space $default-space $x-large-space;\n  flex-grow: 1;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n\n  .settings-header {\n    display: flex;\n    justify-content: space-between;\n    flex-direction: row;\n    align-items: center;\n    height: $x-large-space;\n    margin-bottom: $small-space;\n\n    h2 {\n      color: var(--theme-nav-overlay-header--color);\n      margin-bottom: 0;\n    }\n  }\n\n  .settings-tabs {\n    margin-bottom: $large-space;\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  forceUpdate,\n  h,\n  Host,\n  Prop,\n  Watch,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-menu-settings',\n  styleUrl: 'menu-settings.scss',\n  scoped: true,\n})\nexport class MenuAbout {\n  /**\n   * active tab\n   */\n  @Prop({ mutable: true }) activeTabLabel: string;\n\n  /**\n   * Label\n   */\n  @Prop() label = 'Settings';\n\n  /**\n   * Internal\n   */\n  @Prop() show = false;\n\n  @Element() el!: HTMLIxMenuSettingsElement;\n\n  /**\n   * Popover closed\n   */\n  @Event() close: EventEmitter<MouseEvent>;\n\n  get settingsItems(): HTMLIxMenuSettingsItemElement[] {\n    return Array.from(this.el.querySelectorAll('ix-menu-settings-item'));\n  }\n\n  private setTab(label: string) {\n    this.activeTabLabel = label;\n    this.settingsItems.forEach((i) => {\n      i.style.display = 'none';\n\n      if (i.label === this.activeTabLabel) {\n        i.style.display = 'block';\n      }\n    });\n  }\n\n  componentWillLoad() {\n    if (this.settingsItems.length) {\n      this.setTab(this.activeTabLabel || this.settingsItems[0].label);\n    }\n  }\n\n  componentDidLoad() {\n    forceUpdate(this.el);\n  }\n\n  @Watch('activeTabLabel')\n  watchActiveTabLabel(value: string) {\n    this.setTab(value);\n  }\n\n  private getTabItems() {\n    return this.settingsItems.map(({ label }) => {\n      return (\n        <ix-tab-item\n          class={{\n            active: label === this.activeTabLabel,\n          }}\n          onClick={() => this.setTab(label)}\n        >\n          {label}\n        </ix-tab-item>\n      );\n    });\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          animate__animated: true,\n          animate__fadeInLeft: this.show,\n          animate__fadeOutLeft: !this.show,\n        }}\n      >\n        <div class=\"settings-header\">\n          <h2 class=\"text-h2\">{this.label}</h2>\n          <ix-icon-button\n            ghost\n            size=\"24\"\n            icon=\"close\"\n            onClick={(e) => this.close.emit(e)}\n          ></ix-icon-button>\n        </div>\n        <ix-tabs>{this.getTabItems()}</ix-tabs>\n        <slot></slot>\n      </Host>\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\n:host {\n  display: block;\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';\n\n@Component({\n  tag: 'ix-menu-settings-item',\n  styleUrl: 'menu-settings-item.css',\n  scoped: true,\n})\nexport class MenuSettingsItem {\n  /**\n   * Label\n   */\n  @Prop() label: string;\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/ix-message-bar.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-6b660a23.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-3d163acd.js';
 import { a as anime } from './anime.es-185e9087.js';
 
 const messageBarCss = ".message-container.sc-ix-message-bar{display:flex;flex-direction:row;align-items:flex-start;flex-wrap:nowrap;justify-content:space-between;min-height:3.375rem;margin:0.5rem 0.5rem 0rem 0.5rem;padding:calc(0.75rem - var(--theme-message-bar--border-thickness)) 0.75rem calc(0.75rem - var(--theme-message-bar--border-thickness)) 1rem;border-radius:var(--theme-message-bar--border-radius);background-color:var(--theme-messagebar--background)}.danger.sc-ix-message-bar{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-alarm)}.warning.sc-ix-message-bar{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-warning)}.info.sc-ix-message-bar{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-info)}.message-content.sc-ix-message-bar{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-grow:1;align-self:center;min-height:1.25rem;padding:0 1rem;font-weight:bold;white-space:normal}ix-icon.sc-ix-message-bar{margin-top:0.25rem}";
@@ -48,3 +48,5 @@ MessageBar.duration = 300;
 MessageBar.style = messageBarCss;
 
 export { MessageBar as ix_message_bar };
+
+//# sourceMappingURL=ix-message-bar.entry.js.map

package/dist/esm/ix-message-bar.entry.js.map

@@ -0,0 +1 @@
+{"file":"ix-message-bar.entry.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,u+BAAu+B;;MC0Bh/B,UAAU;;;;gBAIyB,MAAM;uBAK9B,IAAI;;;;EAe1B,mBAAmB;IACjB,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;MAC1B,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC;MACpB,IAAI,CAAC,KAAK,GAAG,aAAa,CAAC;KAC5B;IAED,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE;MACxB,IAAI,CAAC,IAAI,GAAG,MAAM,CAAC;MACnB,IAAI,CAAC,KAAK,GAAG,YAAY,CAAC;KAC3B;IAED,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE;MAC3B,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC;MACtB,IAAI,CAAC,KAAK,GAAG,eAAe,CAAC;KAC9B;GACF;EAEO,UAAU,CAAC,EAAe;IAChC,KAAK,CAAC;MACJ,OAAO,EAAE,EAAE;MACX,QAAQ,EAAE,UAAU,CAAC,QAAQ;MAC7B,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;MACf,MAAM,EAAE,aAAa;MACrB,QAAQ,EAAE;QACR,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;OAC5B;KACF,CAAC,CAAC;IACH,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;GAC1B;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WACE,KAAK,EAAE,EAAE,mBAAmB,EAAE,IAAI,EAAE,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,EAAE,EACvD,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,UAAU,GAAG,EAAiB,CAAC,IAElD,eAAS,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAY,EACvD,WAAK,KAAK,EAAC,iBAAiB,IAC1B,eAAa,CACT,EACL,IAAI,CAAC,WAAW,IACf,sBACE,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,IAAI,EACX,OAAO,EAAE;QACP,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;OAClC,iBACW,WAAW,GACP,KAElB,EAAE,CACH,CACG,CACD,EACP;GACH;;AA9DuB,mBAAQ,GAAG,GAAG,CAAC;;;;;","names":[],"sources":["./src/components/message-bar/message-bar.scss?tag=ix-message-bar&encapsulation=scoped","./src/components/message-bar/message-bar.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/text-truncation';\n\n.message-container {\n  display: flex;\n  flex-direction: row;\n  align-items: flex-start;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  min-height: 3.375rem;\n  margin: $small-space $small-space 0rem $small-space;\n  padding: calc(#{$medium-space} - var(--theme-message-bar--border-thickness))\n    $medium-space\n    calc(#{$medium-space} - var(--theme-message-bar--border-thickness))\n    $default-space;\n  border-radius: var(--theme-message-bar--border-radius);\n  background-color: var(--theme-messagebar--background);\n}\n\n.danger {\n  border: solid var(--theme-message-bar--border-thickness)\n    var(--theme-color-alarm);\n}\n\n.warning {\n  border: solid var(--theme-message-bar--border-thickness)\n    var(--theme-color-warning);\n}\n\n.info {\n  border: solid var(--theme-message-bar--border-thickness)\n    var(--theme-color-info);\n}\n\n.message-content {\n  @include ellipsis;\n  flex-grow: 1;\n  align-self: center;\n  min-height: 1.25rem;\n  padding: 0 $default-space;\n  font-weight: bold;\n  white-space: normal;\n}\n\nix-icon {\n  margin-top: $tiny-space;\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  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { NotificationColor } from '../utils/notification-color';\n\n@Component({\n  tag: 'ix-message-bar',\n  styleUrl: 'message-bar.scss',\n  scoped: true,\n})\nexport class MessageBar {\n  /**\n   * Specifies the type of the alert.\n   */\n  @Prop() type: 'danger' | 'warning' | 'info' = 'info';\n\n  /**\n   * If true, close button is enabled and alert can be dismissed by the user\n   */\n  @Prop() dismissible = true;\n\n  /**\n   * An event emitted when the close button is clicked\n   */\n  @Event() closedChange: EventEmitter;\n\n  @State() icon: 'error' | 'warning' | 'info';\n\n  @State() color: NotificationColor;\n\n  private static readonly duration = 300;\n\n  private divElement?: HTMLElement;\n\n  componentWillRender() {\n    if (this.type === 'danger') {\n      this.icon = 'error';\n      this.color = 'color-alarm';\n    }\n\n    if (this.type === 'info') {\n      this.icon = 'info';\n      this.color = 'color-info';\n    }\n\n    if (this.type === 'warning') {\n      this.icon = 'warning';\n      this.color = 'color-warning';\n    }\n  }\n\n  private closeAlert(el: HTMLElement) {\n    anime({\n      targets: el,\n      duration: MessageBar.duration,\n      opacity: [1, 0],\n      easing: 'easeOutSine',\n      complete: () => {\n        el.classList.add('d-none');\n      },\n    });\n    this.closedChange.emit();\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{ 'message-container': true, [this.type]: true }}\n          role=\"alert\"\n          ref={(el) => (this.divElement = el as HTMLElement)}\n        >\n          <ix-icon color={this.color} name={this.icon}></ix-icon>\n          <div class=\"message-content\">\n            <slot></slot>\n          </div>\n          {this.dismissible ? (\n            <ix-icon-button\n              icon=\"close\"\n              size=\"24\"\n              ghost={true}\n              onClick={() => {\n                this.closeAlert(this.divElement);\n              }}\n              data-testid=\"close-btn\"\n            ></ix-icon-button>\n          ) : (\n            ''\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/ix-modal-example.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-6b660a23.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-3d163acd.js';
 import { d as dismissModal, c as closeModal } from './modal-utils-aecbcba5.js';
 
 const ModalExample = class {
@@ -18,3 +18,5 @@ const ModalExample = class {
 };
 
 export { ModalExample as ix_modal_example };
+
+//# sourceMappingURL=ix-modal-example.entry.js.map

package/dist/esm/ix-modal-example.entry.js.map

@@ -0,0 +1 @@
+{"file":"ix-modal-example.entry.js","mappings":";;;MAea,YAAY;;;;EAGf,OAAO;IACb,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GACzB;EAEO,KAAK;IACX,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;GAChC;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,eACE,WAAK,KAAK,EAAC,cAAc,wBAEvB,iDAEE,KAAK,QACL,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,MAAM,IAAI,CAAC,OAAO,EAAE,GACb,CACd,EACN,WAAK,KAAK,EAAC,YAAY,+BAA+B,EACtD,WAAK,KAAK,EAAC,cAAc,IACvB,iBAAW,OAAO,QAAC,OAAO,EAAE,MAAM,IAAI,CAAC,OAAO,EAAE,aAEpC,EACZ,iBAAW,OAAO,EAAE,MAAM,IAAI,CAAC,KAAK,EAAE,SAAgB,CAClD,CACF,CACD,EACP;GACH;;;;;;","names":[],"sources":["./src/components/my-component/example-modal.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\nimport { Component, Element, h, Host } from '@stencil/core';\nimport { closeModal, dismissModal } from '../modal/modal-utils';\n\n@Component({\n  tag: 'ix-modal-example',\n})\nexport class ModalExample {\n  @Element() host!: HTMLIxModalExampleElement;\n\n  private dismiss() {\n    dismissModal(this.host);\n  }\n\n  private close() {\n    closeModal(this.host, 'Done!');\n  }\n\n  render() {\n    return (\n      <Host>\n        <div>\n          <div class=\"modal-header\">\n            Message headline\n            <ix-icon-button\n              data-close-button\n              ghost\n              icon=\"close\"\n              onClick={() => this.dismiss()}\n            ></ix-icon-button>\n          </div>\n          <div class=\"modal-body\">Message text lorem ipsum</div>\n          <div class=\"modal-footer\">\n            <ix-button outline onClick={() => this.dismiss()}>\n              Cancel\n            </ix-button>\n            <ix-button onClick={() => this.close()}>OK</ix-button>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}