@siemens/ix 1.6.3 → 2.0.0-beta.1

package/dist/cjs/ix-filter-chip.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"ix-filter-chip.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,0rDAA0rD;;MCwBnsD,UAAU;;;;oBAMF,KAAK;;EAOhB,YAAY,CAAC,KAAY;IAC/B,KAAK,CAAC,cAAc,EAAE,CAAC;IACvB,KAAK,CAAC,eAAe,EAAE,CAAC;IACxB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;GACxB;EAED,MAAM;IACJ,QACEA,QAACC,UAAI,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,WAAW,IAClED,iBAAK,KAAK,EAAC,gBAAgB,IACzBA,qBAAa,CACT,EACNA,oBACE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAC,oCAAoC,EAC1C,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAEpCA,qBAAS,IAAI,EAAC,aAAa,EAAC,IAAI,EAAC,IAAI,GAAW,CACzC,CACJ,EACP;GACH;;;;;;;","names":["h","Host"],"sources":["./src/components/filter-chip/filter-chip.scss?tag=ix-filter-chip&encapsulation=scoped","./src/components/filter-chip/filter-chip.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@import 'mixins/text-truncation';\n\n:host {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  height: $large-space;\n  padding-left: $small-space;\n  border: var(--theme-focus--border-thickness) solid var(--theme-chip-primary-outline--border-color);\n  border-radius: $x-large-space;\n  background-color: var(--theme-color-ghost);\n  color: var(--theme-chip-primary-outline--color);\n\n  @include hover {\n    background-color: var(--theme-color-ghost-primary--hover);\n    border-color: var(--theme-chip-primary-outline--border-color--hover);\n    color: var(--theme-chip-primary-outline--color--hover);\n  }\n\n  @include active {\n    background-color: var(--theme-color-ghost-primary--active);\n    border-color: var(--theme-chip-primary-outline--border-color--active);\n    color: var(--theme-chip-primary-outline--color--active);\n  }\n\n  @include focus-visible {\n    outline: var(--theme-color-focus-bdr) solid var(--theme-focus--border-thickness);\n    outline-offset: -0.125rem;\n  }\n\n  .slot-container {\n    @include ellipsis;\n\n    :host-context(.disabled) {\n      background-color: var(--theme-color-ghost);\n      border-color: var(--theme-color-component-4);\n      color: var(--theme-color-weak-text);\n    }\n  }\n\n  .btn-oval {\n    height: $large-space;\n    width: $large-space;\n    min-width: $large-space;\n    margin-left: $tiny-space;\n    padding: 0;\n    vertical-align: top;\n\n    @include focus-visible {\n      outline: none;\n      border-color: #199fff;\n    }\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-filter-chip',\n  styleUrl: 'filter-chip.scss',\n  scoped: true,\n})\nexport class FilterChip {\n  @Element() el: HTMLIxFilterChipElement;\n\n  /**\n   * If true the filter chip will be in disabled state\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Close clicked\n   */\n  @Event() closeClick: EventEmitter<void>;\n\n  private onCloseClick(event: Event) {\n    event.preventDefault();\n    event.stopPropagation();\n    this.closeClick.emit();\n  }\n\n  render() {\n    return (\n      <Host class={{ disabled: this.disabled }} title={this.el.textContent}>\n        <div class=\"slot-container\">\n          <slot></slot>\n        </div>\n        <button\n          disabled={this.disabled}\n          class=\"btn btn-invisible-primary btn-oval\"\n          onClick={(e) => this.onCloseClick(e)}\n        >\n          <ix-icon name=\"close-small\" size=\"16\"></ix-icon>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-filter-chip.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,8qEAA8qE;;MCwBvrE,UAAU;;;;oBAMF,KAAK;oBAML,KAAK;;EAOhB,YAAY,CAAC,KAAY;IAC/B,KAAK,CAAC,cAAc,EAAE,CAAC;IACvB,KAAK,CAAC,eAAe,EAAE,CAAC;IACxB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;GACxB;EAED,MAAM;IACJ,QACEA,QAACC,UAAI,IACH,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,EAC3D,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,WAAW,IAE1BD,iBAAK,KAAK,EAAC,gBAAgB,IACzBA,qBAAa,CACT,EACL,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,IAC/BA,4BACE,KAAK,QACL,IAAI,QACJ,IAAI,EAAC,aAAa,EAClB,IAAI,EAAC,IAAI,EACT,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC,EAChC,OAAO,EAAC,SAAS,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GACpB,IAChB,IAAI,CACH,EACP;GACH;;;;;;;","names":["h","Host"],"sources":["./src/components/filter-chip/filter-chip.scss?tag=ix-filter-chip&encapsulation=shadow","./src/components/filter-chip/filter-chip.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@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: space-between;\n  height: $large-space;\n  padding-left: $small-space;\n  border: var(--theme-focus--border-thickness) solid\n    var(--theme-chip-primary-outline--border-color);\n  border-radius: $x-large-space;\n  background-color: var(--theme-color-ghost);\n  color: var(--theme-chip-primary-outline--color);\n\n  .slot-container {\n    @include ellipsis;\n\n    :host-context(.disabled) {\n      background-color: var(--theme-color-ghost);\n      border-color: var(--theme-color-component-4);\n      color: var(--theme-color-weak-text);\n    }\n  }\n\n  ix-icon-button {\n    height: $large-space;\n    margin-left: 0.25rem;\n\n    @include focus-visible {\n      outline: none;\n    }\n  }\n}\n\n:host(.disabled) {\n  border: var(--theme-focus--border-thickness) solid\n    var(--theme-color-component-4);\n  color: var(--theme-color-weak-text);\n  padding-right: $small-space;\n\n  cursor: default;\n}\n\n:host(.readonly) {\n  padding-right: $small-space;\n}\n\n@include host-hover {\n  background-color: var(--theme-color-ghost-primary--hover);\n  border-color: var(--theme-chip-primary-outline--border-color--hover);\n  color: var(--theme-chip-primary-outline--color--hover);\n}\n\n@include host-active {\n  background-color: var(--theme-color-ghost-primary--active);\n  border-color: var(--theme-chip-primary-outline--border-color--active);\n  color: var(--theme-chip-primary-outline--color--active);\n}\n\n@include host-focus-visible {\n  outline: var(--theme-color-focus-bdr) solid\n    var(--theme-focus--border-thickness);\n  outline-offset: -0.125rem;\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';\n\n@Component({\n  tag: 'ix-filter-chip',\n  styleUrl: 'filter-chip.scss',\n  shadow: true,\n})\nexport class FilterChip {\n  @Element() el: HTMLIxFilterChipElement;\n\n  /**\n   * If true the filter chip will be in disabled state\n   */\n  @Prop() disabled = false;\n\n  /**\n   * If true the filter chip will be in readonly mode\n   * @since 2.0.0\n   */\n  @Prop() readonly = false;\n\n  /**\n   * Close clicked\n   */\n  @Event() closeClick: EventEmitter<void>;\n\n  private onCloseClick(event: Event) {\n    event.preventDefault();\n    event.stopPropagation();\n    this.closeClick.emit();\n  }\n\n  render() {\n    return (\n      <Host\n        class={{ disabled: this.disabled, readonly: this.readonly }}\n        title={this.el.textContent}\n      >\n        <div class=\"slot-container\">\n          <slot></slot>\n        </div>\n        {!this.disabled && !this.readonly ? (\n          <ix-icon-button\n            ghost\n            oval\n            icon=\"close-small\"\n            size=\"16\"\n            tabindex={this.disabled ? -1 : 0}\n            variant=\"primary\"\n            disabled={this.disabled}\n            onClick={(e) => this.onCloseClick(e)}\n          ></ix-icon-button>\n        ) : null}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ix-flip-tile_2.cjs.entry.js

@@ -2,48 +2,57 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c978628a.js');
-const flipTileState = require('./flip-tile-state-b5ff5ea0.js');
+const index = require('./index-be499a74.js');
+const mutationObserver = require('./mutation-observer-eaaa5399.js');
+const flipTileState = require('./flip-tile-state-183236a1.js');
 
-const flipTileCss = "@keyframes flip-animation{0%{transform:rotateY(0)}50%{transform:rotateY(90deg)}51%{transform:rotateY(270deg)}100%{transform:rotateY(360deg)}}.sc-ix-flip-tile-h{display:flex;flex-direction:column;perspective:1000px}.sc-ix-flip-tile-h .flip-tile-header.sc-ix-flip-tile{display:flex;align-items:center;height:2.5rem;padding:0 0.5rem 0 1rem}.sc-ix-flip-tile-h .flip-tile-header.sc-ix-flip-tile .header-slot-container.sc-ix-flip-tile{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-grow:1;min-width:0}.sc-ix-flip-tile-h .content-container.sc-ix-flip-tile{flex-grow:1;margin:1rem}.sc-ix-flip-tile-h .flip-tile-container.sc-ix-flip-tile{display:flex;flex-direction:column;height:100%;background-color:var(--theme-blind-base--background);border:solid 1px var(--theme-blind-base--border-color);border-radius:var(--theme-flip-tile--border-radius) var(--theme-flip-tile--border-radius) 0 0;transform-style:preserve-3d}.sc-ix-flip-tile-h .flip-tile-container.flip-animation-active.sc-ix-flip-tile{animation:flip-animation 300ms, ease-in-out}.sc-ix-flip-tile-h .flip-tile-container.sc-ix-flip-tile .footer.sc-ix-flip-tile{display:flex;height:3rem;align-items:center;justify-content:center;padding:0 0.5rem;color:var(--theme-flip-footer--color);background-color:var(--theme-blind-base--background)}.sc-ix-flip-tile-h .flip-tile-container.sc-ix-flip-tile .footer.sc-ix-flip-tile .sc-ix-flip-tile:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;height:100%}.sc-ix-flip-tile-h .flip-tile-container .sc-ix-flip-tile-s>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;flex-direction:column;align-items:center;min-width:0}.sc-ix-flip-tile-h .flip-tile-container.primary.sc-ix-flip-tile{border-color:var(--theme-color-primary)}.sc-ix-flip-tile-h .flip-tile-container.primary.sc-ix-flip-tile .footer.sc-ix-flip-tile{background-color:var(--theme-color-primary);color:var(--theme-color-primary--contrast)}.sc-ix-flip-tile-h .flip-tile-container.info.sc-ix-flip-tile{border-color:var(--theme-color-info)}.sc-ix-flip-tile-h .flip-tile-container.info.sc-ix-flip-tile .footer.sc-ix-flip-tile{background-color:var(--theme-color-info);color:var(--theme-color-info--contrast)}.sc-ix-flip-tile-h .flip-tile-container.warning.sc-ix-flip-tile{border-color:var(--theme-color-warning)}.sc-ix-flip-tile-h .flip-tile-container.warning.sc-ix-flip-tile .footer.sc-ix-flip-tile{background-color:var(--theme-color-warning);color:var(--theme-color-warning--contrast)}.sc-ix-flip-tile-h .flip-tile-container.alarm.sc-ix-flip-tile{border-color:var(--theme-color-alarm)}.sc-ix-flip-tile-h .flip-tile-container.alarm.sc-ix-flip-tile .footer.sc-ix-flip-tile{background-color:var(--theme-color-alarm);color:var(--theme-color-alarm--contrast)}.sc-ix-flip-tile-h:hover .flip-tile-container.sc-ix-flip-tile .footer.sc-ix-flip-tile ix-icon.sc-ix-flip-tile{color:var(--theme-color-std-text)}";
+const flipTileCss = ".text-xs{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.625rem;font-weight:400;line-height:1.4em;color:var(--theme-color-std-text)}.text-s{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text)}.text-caption{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}.text-caption-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1em;color:var(--theme-color-std-text)}.text-default{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text)}.text-default-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.143em;color:var(--theme-color-std-text)}.text-default-title{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text)}.text-default-title-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.143em;color:var(--theme-color-std-text)}.text-l{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text)}.text-l-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.25em;color:var(--theme-color-std-text)}.text-l-title{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}.text-l-title-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.25em;color:var(--theme-color-std-text)}.text-h2{-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)}.text-xl{-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)}a{color:var(--theme-color-primary)}@keyframes flip-animation{0%{transform:rotateY(0)}50%{transform:rotateY(90deg)}51%{transform:rotateY(270deg)}100%{transform:rotateY(360deg)}}:host{display:flex;flex-direction:column;perspective:1000px}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .flip-tile-header{display:flex;align-items:center;height:2.5rem;padding:0 0.5rem 0 1rem}:host .flip-tile-header .header-slot-container{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-grow:1;min-width:0}:host .content-container{flex-grow:1;margin:1rem}:host .flip-tile-container{display:flex;flex-direction:column;height:100%;background-color:var(--theme-blind-base--background);border:solid 1px var(--theme-blind-base--border-color);border-radius:var(--theme-flip-tile--border-radius) var(--theme-flip-tile--border-radius) 0 0;transform-style:preserve-3d}:host .flip-tile-container.flip-animation-active{animation:flip-animation 300ms, ease-in-out}:host .flip-tile-container .footer{display:flex;height:3rem;align-items:center;justify-content:center;padding:0 0.5rem;color:var(--theme-flip-footer--color);background-color:var(--theme-blind-base--background)}:host .flip-tile-container .footer :first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;height:100%}:host .flip-tile-container ::slotted(*){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;flex-direction:column;align-items:center;min-width:0}:host .flip-tile-container.primary{border-color:var(--theme-color-primary)}:host .flip-tile-container.primary .footer{background-color:var(--theme-color-primary);color:var(--theme-color-primary--contrast)}:host .flip-tile-container.info{border-color:var(--theme-color-info)}:host .flip-tile-container.info .footer{background-color:var(--theme-color-info);color:var(--theme-color-info--contrast)}:host .flip-tile-container.warning{border-color:var(--theme-color-warning)}:host .flip-tile-container.warning .footer{background-color:var(--theme-color-warning);color:var(--theme-color-warning--contrast)}:host .flip-tile-container.alarm{border-color:var(--theme-color-alarm)}:host .flip-tile-container.alarm .footer{background-color:var(--theme-color-alarm);color:var(--theme-color-alarm--contrast)}:host:hover .flip-tile-container .footer ix-icon{color:var(--theme-color-std-text)}";
 
 const FlipTile = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.ANIMATION_DURATION = 150;
-    this.index = 0;
-    this.isFlipAnimationActive = undefined;
     this.state = undefined;
-    this.footer = undefined;
     this.height = 15.125;
     this.width = 16;
+    this.index = 0;
+    this.isFlipAnimationActive = undefined;
   }
   componentDidLoad() {
-    this.contentItems = this.contentContainerElement.querySelectorAll('ix-flip-tile-content');
-    this.contentItems.forEach((_, index) => {
-      if (index !== this.index) {
-        this.toggleContentItem(index);
-      }
+    this.observer = mutationObserver.createMutationObserver(() => this.updateContentItems());
+    this.observer.observe(this.hostElement, {
+      childList: true,
     });
   }
+  componentWillLoad() {
+    this.updateContentItems();
+    this.updateContentVisibility(this.index);
+  }
+  disconnectedCallback() {
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+  }
+  updateContentItems() {
+    this.contentItems = Array.from(this.hostElement.querySelectorAll('ix-flip-tile-content'));
+  }
+  updateContentVisibility(indexVisible) {
+    this.contentItems.forEach((content, index) => (content.contentVisible = index === indexVisible));
+  }
   toggleIndex() {
     this.doFlipAnimation();
   }
-  toggleContentItem(index) {
-    const item = this.contentItems[index];
-    item.classList.toggle('d-none');
-  }
   doFlipAnimation() {
     this.isFlipAnimationActive = true;
     setTimeout(() => {
-      this.toggleContentItem(this.index);
+      this.updateContentVisibility(this.index);
       if (this.index >= this.contentItems.length - 1) {
         this.index = 0;
       }
       else {
         this.index++;
       }
-      this.toggleContentItem(this.index);
+      this.updateContentVisibility(this.index);
     }, this.ANIMATION_DURATION);
     setTimeout(() => {
       this.isFlipAnimationActive = false;
@@ -64,7 +73,7 @@ const FlipTile = class {
         alarm: this.state === flipTileState.FlipTileState.Alarm,
         primary: this.state === flipTileState.FlipTileState.Primary,
         'flip-animation-active': this.isFlipAnimationActive,
-      } }, index.h("div", { class: "flip-tile-header" }, index.h("div", { class: "header-slot-container text-l-title" }, index.h("slot", { name: "header" })), index.h("ix-icon-button", { icon: "eye", variant: "Primary", ghost: true, onClick: () => this.toggleIndex() })), index.h("div", { class: "content-container", ref: (el) => (this.contentContainerElement = el) }, index.h("slot", null)), index.h("div", { class: {
+      } }, index.h("div", { class: "flip-tile-header" }, index.h("div", { class: "header-slot-container text-l-title" }, index.h("slot", { name: "header" })), index.h("ix-icon-button", { icon: "eye", variant: "primary", ghost: true, onClick: () => this.toggleIndex() })), index.h("div", { class: "content-container" }, index.h("slot", null)), index.h("div", { class: {
         footer: true,
         'contrast-light': this.state === flipTileState.FlipTileState.Warning,
         'contrast-dark': this.state === flipTileState.FlipTileState.Info ||
@@ -80,9 +89,10 @@ const flipTileContentCss = ":host{display:block}";
 const FlipTileContent = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    this.contentVisible = false;
   }
   render() {
-    return (index.h(index.Host, null, index.h("slot", null)));
+    return index.h(index.Host, null, this.contentVisible ? index.h("slot", null) : null);
   }
 };
 FlipTileContent.style = flipTileContentCss;

package/dist/cjs/ix-flip-tile_2.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"ix-flip-tile.ix-flip-tile-content.entry.cjs.js","mappings":"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","names":["h","Host","FlipTileState"],"sources":["./src/components/flip-tile/flip-tile.scss?tag=ix-flip-tile&encapsulation=scoped","./src/components/flip-tile/flip-tile.tsx","./src/components/flip-tile-content/flip-tile-content.css?tag=ix-flip-tile-content&encapsulation=shadow","./src/components/flip-tile-content/flip-tile-content.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/animations';\n@import 'mixins/text-truncation';\n\n@include keyframes(flip-animation) {\n  0% {\n    transform: rotateY(0);\n  }\n  50% {\n    transform: rotateY(90deg);\n  }\n  51% {\n    transform: rotateY(270deg);\n  }\n  100% {\n    transform: rotateY(360deg);\n  }\n}\n\n:host {\n  display: flex;\n  flex-direction: column;\n  perspective: 1000px;\n\n  .flip-tile-header {\n    display: flex;\n    align-items: center;\n    height: $large-control-height;\n    padding: 0 $small-space 0 $default-space;\n\n    .header-slot-container {\n      @include ellipsis;\n      flex-grow: 1;\n      min-width: 0;\n    }\n  }\n\n  .content-container {\n    flex-grow: 1;\n    margin: $default-space;\n  }\n\n  .flip-tile-container {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    background-color: var(--theme-blind-base--background);\n    border: solid 1px var(--theme-blind-base--border-color);\n    border-radius: var(--theme-flip-tile--border-radius)\n      var(--theme-flip-tile--border-radius) 0 0;\n    transform-style: preserve-3d;\n\n    &.flip-animation-active {\n      @include animation(flip-animation, 2 * $default-time, ease-in-out);\n    }\n\n    .footer {\n      display: flex;\n      height: 3rem;\n      align-items: center;\n      justify-content: center;\n      padding: 0 $small-space;\n      color: var(--theme-flip-footer--color);\n      background-color: var(--theme-blind-base--background);\n\n      :first-child {\n        @include ellipsis;\n        height: 100%;\n      }\n    }\n\n    ::slotted(*) {\n      @include ellipsis;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      min-width: 0;\n    }\n\n    &.primary {\n      border-color: var(--theme-color-primary);\n\n      .footer {\n        background-color: var(--theme-color-primary);\n        color: var(--theme-color-primary--contrast);\n      }\n    }\n\n    &.info {\n      border-color: var(--theme-color-info);\n\n      .footer {\n        background-color: var(--theme-color-info);\n        color: var(--theme-color-info--contrast);\n      }\n    }\n\n    &.warning {\n      border-color: var(--theme-color-warning);\n\n      .footer {\n        background-color: var(--theme-color-warning);\n        color: var(--theme-color-warning--contrast);\n      }\n    }\n\n    &.alarm {\n      border-color: var(--theme-color-alarm);\n\n      .footer {\n        background-color: var(--theme-color-alarm);\n        color: var(--theme-color-alarm--contrast);\n      }\n    }\n  }\n\n  &:hover .flip-tile-container .footer ix-icon {\n    color: var(--theme-color-std-text);\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport { FlipTileState } from './flip-tile-state';\n\n@Component({\n  tag: 'ix-flip-tile',\n  styleUrl: 'flip-tile.scss',\n  scoped: true,\n})\nexport class FlipTile {\n  private readonly ANIMATION_DURATION = 150;\n  private contentContainerElement: HTMLDivElement;\n  private contentItems: NodeList;\n\n  @Element() hostElement: HTMLIxFlipTileElement;\n\n  @State() index = 0;\n\n  @State() isFlipAnimationActive: boolean;\n\n  /**\n   * Variation of the Flip\n   */\n  @Prop() state: FlipTileState;\n\n  /**\n   * Tmp property name\n   * @deprecated Will be removed in 2.0.0. Setting this property has no effect\n   */\n  @Prop() footer: string;\n\n  /**\n   * Height interpreted as REM\n   * @since 1.5.0\n   */\n  @Prop() height: number | 'auto' = 15.125;\n\n  /**\n   * Width interpreted as REM\n   * @since 1.5.0\n   */\n  @Prop() width: number | 'auto' = 16;\n\n  componentDidLoad() {\n    this.contentItems = this.contentContainerElement.querySelectorAll(\n      'ix-flip-tile-content'\n    );\n    this.contentItems.forEach((_, index) => {\n      if (index !== this.index) {\n        this.toggleContentItem(index);\n      }\n    });\n  }\n\n  private toggleIndex() {\n    this.doFlipAnimation();\n  }\n\n  private toggleContentItem(index: number) {\n    const item = this.contentItems[index] as HTMLElement;\n    item.classList.toggle('d-none');\n  }\n\n  private doFlipAnimation() {\n    this.isFlipAnimationActive = true;\n\n    setTimeout(() => {\n      this.toggleContentItem(this.index);\n\n      if (this.index >= this.contentItems.length - 1) {\n        this.index = 0;\n      } else {\n        this.index++;\n      }\n\n      this.toggleContentItem(this.index);\n    }, this.ANIMATION_DURATION);\n\n    setTimeout(() => {\n      this.isFlipAnimationActive = false;\n    }, 2 * this.ANIMATION_DURATION);\n  }\n\n  render() {\n    return (\n      <Host\n        style={{\n          height: `${this.height}${this.height === 'auto' ? '' : 'rem'}`,\n          'min-height': `${this.height}${this.height === 'auto' ? '' : 'rem'}`,\n          'max-height': `${this.height}${this.height === 'auto' ? '' : 'rem'}`,\n          width: `${this.width}${this.width === 'auto' ? '' : 'rem'}`,\n          'min-width': `${this.width}${this.width === 'auto' ? '' : 'rem'}`,\n          'max-width': `${this.width}${this.width === 'auto' ? '' : 'rem'}`,\n        }}\n      >\n        <div\n          class={{\n            'flip-tile-container': true,\n            info: this.state === FlipTileState.Info,\n            warning: this.state === FlipTileState.Warning,\n            alarm: this.state === FlipTileState.Alarm,\n            primary: this.state === FlipTileState.Primary,\n            'flip-animation-active': this.isFlipAnimationActive,\n          }}\n        >\n          <div class=\"flip-tile-header\">\n            <div class=\"header-slot-container text-l-title\">\n              <slot name=\"header\"></slot>\n            </div>\n            <ix-icon-button\n              icon=\"eye\"\n              variant=\"Primary\"\n              ghost\n              onClick={() => this.toggleIndex()}\n            ></ix-icon-button>\n          </div>\n\n          <div\n            class=\"content-container\"\n            ref={(el) => (this.contentContainerElement = el)}\n          >\n            <slot></slot>\n          </div>\n          <div\n            class={{\n              footer: true,\n              'contrast-light': this.state === FlipTileState.Warning,\n              'contrast-dark':\n                this.state === FlipTileState.Info ||\n                this.state === FlipTileState.Alarm,\n            }}\n          >\n            <slot name=\"footer\"></slot>\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\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 } from '@stencil/core';\n\n@Component({\n  tag: 'ix-flip-tile-content',\n  styleUrl: 'flip-tile-content.css',\n  shadow: true,\n})\nexport class FlipTileContent {\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-flip-tile.ix-flip-tile-content.entry.cjs.js","mappings":"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","names":["createMutationObserver","h","Host","FlipTileState"],"sources":["./src/components/flip-tile/flip-tile.scss?tag=ix-flip-tile&encapsulation=shadow","./src/components/flip-tile/flip-tile.tsx","./src/components/flip-tile-content/flip-tile-content.css?tag=ix-flip-tile-content&encapsulation=shadow","./src/components/flip-tile-content/flip-tile-content.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/animations';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n@import 'legacy/fonts';\n\n@include keyframes(flip-animation) {\n  0% {\n    transform: rotateY(0);\n  }\n  50% {\n    transform: rotateY(90deg);\n  }\n  51% {\n    transform: rotateY(270deg);\n  }\n  100% {\n    transform: rotateY(360deg);\n  }\n}\n\n:host {\n  @include ix-component;\n  display: flex;\n  flex-direction: column;\n  perspective: 1000px;\n\n  .flip-tile-header {\n    display: flex;\n    align-items: center;\n    height: $large-control-height;\n    padding: 0 $small-space 0 $default-space;\n\n    .header-slot-container {\n      @include ellipsis;\n      flex-grow: 1;\n      min-width: 0;\n    }\n  }\n\n  .content-container {\n    flex-grow: 1;\n    margin: $default-space;\n  }\n\n  .flip-tile-container {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    background-color: var(--theme-blind-base--background);\n    border: solid 1px var(--theme-blind-base--border-color);\n    border-radius: var(--theme-flip-tile--border-radius)\n      var(--theme-flip-tile--border-radius) 0 0;\n    transform-style: preserve-3d;\n\n    &.flip-animation-active {\n      @include animation(flip-animation, 2 * $default-time, ease-in-out);\n    }\n\n    .footer {\n      display: flex;\n      height: 3rem;\n      align-items: center;\n      justify-content: center;\n      padding: 0 $small-space;\n      color: var(--theme-flip-footer--color);\n      background-color: var(--theme-blind-base--background);\n\n      :first-child {\n        @include ellipsis;\n        height: 100%;\n      }\n    }\n\n    ::slotted(*) {\n      @include ellipsis;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      min-width: 0;\n    }\n\n    &.primary {\n      border-color: var(--theme-color-primary);\n\n      .footer {\n        background-color: var(--theme-color-primary);\n        color: var(--theme-color-primary--contrast);\n      }\n    }\n\n    &.info {\n      border-color: var(--theme-color-info);\n\n      .footer {\n        background-color: var(--theme-color-info);\n        color: var(--theme-color-info--contrast);\n      }\n    }\n\n    &.warning {\n      border-color: var(--theme-color-warning);\n\n      .footer {\n        background-color: var(--theme-color-warning);\n        color: var(--theme-color-warning--contrast);\n      }\n    }\n\n    &.alarm {\n      border-color: var(--theme-color-alarm);\n\n      .footer {\n        background-color: var(--theme-color-alarm);\n        color: var(--theme-color-alarm--contrast);\n      }\n    }\n  }\n\n  &:hover .flip-tile-container .footer ix-icon {\n    color: var(--theme-color-std-text);\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { FlipTileState } from './flip-tile-state';\n\n@Component({\n  tag: 'ix-flip-tile',\n  styleUrl: 'flip-tile.scss',\n  shadow: true,\n})\nexport class FlipTile {\n  @Element() hostElement!: HTMLIxFlipTileElement;\n\n  /**\n   * Variation of the Flip\n   */\n  @Prop() state: FlipTileState;\n\n  /**\n   * Height interpreted as REM\n   * @since 1.5.0\n   */\n  @Prop() height: number | 'auto' = 15.125;\n\n  /**\n   * Width interpreted as REM\n   * @since 1.5.0\n   */\n  @Prop() width: number | 'auto' = 16;\n\n  @State() index = 0;\n  @State() isFlipAnimationActive: boolean;\n\n  private readonly ANIMATION_DURATION = 150;\n  private contentItems: Array<HTMLIxFlipTileContentElement>;\n\n  private observer: MutationObserver;\n\n  componentDidLoad() {\n    this.observer = createMutationObserver(() => this.updateContentItems());\n    this.observer.observe(this.hostElement, {\n      childList: true,\n    });\n  }\n\n  componentWillLoad() {\n    this.updateContentItems();\n    this.updateContentVisibility(this.index);\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  private updateContentItems() {\n    this.contentItems = Array.from(\n      this.hostElement.querySelectorAll('ix-flip-tile-content')\n    );\n  }\n\n  private updateContentVisibility(indexVisible: number) {\n    this.contentItems.forEach(\n      (content, index) => (content.contentVisible = index === indexVisible)\n    );\n  }\n\n  private toggleIndex() {\n    this.doFlipAnimation();\n  }\n\n  private doFlipAnimation() {\n    this.isFlipAnimationActive = true;\n\n    setTimeout(() => {\n      this.updateContentVisibility(this.index);\n\n      if (this.index >= this.contentItems.length - 1) {\n        this.index = 0;\n      } else {\n        this.index++;\n      }\n\n      this.updateContentVisibility(this.index);\n    }, this.ANIMATION_DURATION);\n\n    setTimeout(() => {\n      this.isFlipAnimationActive = false;\n    }, 2 * this.ANIMATION_DURATION);\n  }\n\n  render() {\n    return (\n      <Host\n        style={{\n          height: `${this.height}${this.height === 'auto' ? '' : 'rem'}`,\n          'min-height': `${this.height}${this.height === 'auto' ? '' : 'rem'}`,\n          'max-height': `${this.height}${this.height === 'auto' ? '' : 'rem'}`,\n          width: `${this.width}${this.width === 'auto' ? '' : 'rem'}`,\n          'min-width': `${this.width}${this.width === 'auto' ? '' : 'rem'}`,\n          'max-width': `${this.width}${this.width === 'auto' ? '' : 'rem'}`,\n        }}\n      >\n        <div\n          class={{\n            'flip-tile-container': true,\n            info: this.state === FlipTileState.Info,\n            warning: this.state === FlipTileState.Warning,\n            alarm: this.state === FlipTileState.Alarm,\n            primary: this.state === FlipTileState.Primary,\n            'flip-animation-active': this.isFlipAnimationActive,\n          }}\n        >\n          <div class=\"flip-tile-header\">\n            <div class=\"header-slot-container text-l-title\">\n              <slot name=\"header\"></slot>\n            </div>\n            <ix-icon-button\n              icon=\"eye\"\n              variant=\"primary\"\n              ghost\n              onClick={() => this.toggleIndex()}\n            ></ix-icon-button>\n          </div>\n\n          <div class=\"content-container\">\n            <slot></slot>\n          </div>\n          <div\n            class={{\n              footer: true,\n              'contrast-light': this.state === FlipTileState.Warning,\n              'contrast-dark':\n                this.state === FlipTileState.Info ||\n                this.state === FlipTileState.Alarm,\n            }}\n          >\n            <slot name=\"footer\"></slot>\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\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 */\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ix-flip-tile-content',\n  styleUrl: 'flip-tile-content.css',\n  shadow: true,\n})\nexport class FlipTileContent {\n  /**\n   * Controls the visibility of the content\n   *\n   * @internal\n   */\n  @Prop() contentVisible = false;\n\n  render() {\n    return <Host>{this.contentVisible ? <slot></slot> : null}</Host>;\n  }\n}\n"],"version":3}

package/dist/cjs/ix-form-field.cjs.entry.js

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-be499a74.js');
+
+const formFieldCss = "label{color:var(--theme-color-soft-text)}input,input:-webkit-autofill{font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;min-height:2rem;width:100%;padding:0.25rem 0.5rem;background-color:var(--theme-input--background);color:var(--theme-input--color);border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);box-shadow:var(--theme-input--box-shadow)}input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-input--background) inset !important;-webkit-text-fill-color:var(--theme-input--color) !important;border-color:var(--theme-input--border-color) !important}input::-moz-placeholder{color:var(--theme-input-hint--color)}input::placeholder{color:var(--theme-input-hint--color)}input.hover,input:hover{border-color:var(--theme-input--border-color--hover);background-color:var(--theme-input--background--hover)}input.focus,input:focus{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus)}input:-moz-read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}input.read-only,input:read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}input:disabled{box-shadow:none;background-color:transparent;outline:none;border:none;color:var(--theme-input--color--disabled);border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled)}input[type=number]{text-align:right}input[type=number]::-webkit-inner-spin-button{margin-right:-2px;margin-left:2px;display:none}textarea{height:3.25rem;padding:0.375rem 1.25rem 0.375rem 0.5rem}textarea,textarea:-webkit-autofill{font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;min-height:2rem;width:100%;padding:0.25rem 0.5rem;background-color:var(--theme-input--background);color:var(--theme-input--color);border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);box-shadow:var(--theme-input--box-shadow)}textarea:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-input--background) inset !important;-webkit-text-fill-color:var(--theme-input--color) !important;border-color:var(--theme-input--border-color) !important}textarea::-moz-placeholder{color:var(--theme-input-hint--color)}textarea::placeholder{color:var(--theme-input-hint--color)}textarea.hover,textarea:hover{border-color:var(--theme-input--border-color--hover);background-color:var(--theme-input--background--hover)}textarea.focus,textarea:focus{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus)}textarea:-moz-read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}textarea.read-only,textarea:read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}textarea:disabled{box-shadow:none;background-color:transparent;outline:none;border:none;color:var(--theme-input--color--disabled);border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled)}textarea~.valid-feedback,textarea~.invalid-feedback,input~.valid-feedback,input~.invalid-feedback{display:none;font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}form textarea~.valid-feedback,form input~.valid-feedback{color:var(--theme-color-success)}form textarea~.invalid-feedback,form input~.invalid-feedback{color:var(--theme-color-alarm-text)}form:not([novalidate]) :invalid,form:not([novalidate]) .is-invalid,form.was-validated :invalid,form.was-validated .is-invalid{background-color:var(--theme-input-error--background);border-color:var(--theme-input-error--border-color);background-image:url(\"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 62 (101010) - https://sketch.com --%3E%3Ctitle%3Eerror%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.75'%3E%3Cg id='error' fill='%23ff2640'%3E%3Cg id='error/error'%3E%3Cpath d='M256,42.6666667 C373.626371,42.6666667 469.333333,138.373627 469.333333,256 C469.333333,373.626371 373.626371,469.333333 256,469.333333 C138.373627,469.333333 42.6666667,373.626371 42.6666667,256 C42.6666667,138.373627 138.373627,42.6666667 256,42.6666667 Z M256,85.3333333 C161.559631,85.3333333 85.3333333,161.559631 85.3333333,256 C85.3333333,350.44037 161.559631,426.666667 256,426.666667 C350.44037,426.666667 426.666667,350.44037 426.666667,256 C426.666667,161.559631 350.44037,85.3333333 256,85.3333333 Z M326.248389,155.581722 L356.418278,185.751611 L286.168667,255.999667 L356.418278,326.248389 L326.248389,356.418278 L255.999667,286.168667 L185.751611,356.418278 L155.581722,326.248389 L225.829667,255.999667 L155.581722,185.751611 L185.751611,155.581722 L255.999667,225.829667 L326.248389,155.581722 Z' id='Combined-Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E\") !important;background-position:left calc(0.375em + 0.1875rem) center;padding-right:0.75rem;padding-left:calc(1.5em + 0.75rem);background-size:18px;background-repeat:no-repeat}form:not([novalidate]) :invalid~.invalid-feedback,form:not([novalidate]) .is-invalid~.invalid-feedback,form.was-validated :invalid~.invalid-feedback,form.was-validated .is-invalid~.invalid-feedback{display:block}form:not([novalidate]) :valid~.valid-feedback,form:not([novalidate]) .is-valid~.valid-feedback,form.was-validated :valid~.valid-feedback,form.was-validated .is-valid~.valid-feedback{display:block}:host{display:contents}";
+
+const FormField = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.label = undefined;
+  }
+  get inputElement() {
+    return this.hostElement.querySelector('input');
+  }
+  componentWillLoad() { }
+  render() {
+    return (index.h(index.Host, null, this.label ? (index.h("label", { htmlFor: this.inputElement.id }, this.label)) : null, index.h("slot", null)));
+  }
+  get hostElement() { return index.getElement(this); }
+};
+FormField.style = formFieldCss;
+
+exports.ix_form_field = FormField;
+
+//# sourceMappingURL=ix-form-field.cjs.entry.js.map

package/dist/cjs/ix-form-field.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ix-form-field.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,YAAY,GAAG,snOAAsnO;;MCe9nO,SAAS;;;;;EAQpB,IAAY,YAAY;IACtB,OAAO,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;GAChD;EAED,iBAAiB,MAAK;EAEtB,MAAM;IACJ,QACEA,QAACC,UAAI,QACF,IAAI,CAAC,KAAK,IACTD,mBAAO,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,EAAE,IAAG,IAAI,CAAC,KAAK,CAAS,IACxD,IAAI,EACRA,qBAAa,CACR,EACP;GACH;;;;;;;","names":["h","Host"],"sources":["./src/components/form-field/form-field.scss?tag=ix-form-field&encapsulation=shadow","./src/components/form-field/form-field.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'components/form/input';\n\n:host {\n  display: contents;\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 */\nimport { Component, Element, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ix-form-field',\n  styleUrl: 'form-field.scss',\n  shadow: true,\n})\nexport class FormField {\n  @Element() hostElement!: HTMLIxFormFieldElement;\n\n  /**\n   * Label\n   */\n  @Prop() label: string;\n\n  private get inputElement() {\n    return this.hostElement.querySelector('input');\n  }\n\n  componentWillLoad() {}\n\n  render() {\n    return (\n      <Host>\n        {this.label ? (\n          <label htmlFor={this.inputElement.id}>{this.label}</label>\n        ) : null}\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ix-grid.cjs.entry.js

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-be499a74.js');
+
+const gridCss = ":host{--ix-grid-gutter:1.5rem;display:block;flex:1;width:100%;padding-left:calc(var(--ix-grid-gutter) * 0.5);padding-right:calc(var(--ix-grid-gutter) * 0.5);--ix-grid-row-margin:1rem}:host(.no-padding){padding-left:0;padding-right:0}:host(.no-row-gap){--ix-grid-row-margin:0rem}";
+
+const Grid = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.noPadding = false;
+    this.noRowGap = false;
+    this.columns = 12;
+  }
+  render() {
+    return (index.h(index.Host, { class: {
+        'no-padding': this.noPadding,
+        'no-row-gap': this.noRowGap,
+      }, style: {
+        '--ix-grid-columns': `${this.columns}`,
+      } }, index.h("slot", null)));
+  }
+};
+Grid.style = gridCss;
+
+exports.ix_grid = Grid;
+
+//# sourceMappingURL=ix-grid.cjs.entry.js.map

package/dist/cjs/ix-grid.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ix-grid.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,OAAO,GAAG,wRAAwR;;MCmB3R,IAAI;;;qBAIK,KAAK;oBAKN,KAAK;mBAKN,EAAE;;EAEpB,MAAM;IACJ,QACEA,QAACC,UAAI,IACH,KAAK,EAAE;QACL,YAAY,EAAE,IAAI,CAAC,SAAS;QAC5B,YAAY,EAAE,IAAI,CAAC,QAAQ;OAC5B,EACD,KAAK,EAAE;QACL,mBAAmB,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE;OACvC,IAEDD,qBAAa,CACR,EACP;GACH;;;;;;","names":["h","Host"],"sources":["./src/components/grid/grid.scss?tag=ix-grid&encapsulation=shadow","./src/components/grid/grid.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  --ix-grid-gutter: 1.5rem;\n\n  display: block;\n  flex: 1;\n  width: 100%;\n\n  padding-left: calc(var(--ix-grid-gutter) * 0.5);\n  padding-right: calc(var(--ix-grid-gutter) * 0.5);\n\n  --ix-grid-row-margin: 1rem;\n}\n\n:host(.no-padding) {\n  padding-left: 0;\n  padding-right: 0;\n}\n\n:host(.no-row-gap) {\n  --ix-grid-row-margin: 0rem;\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/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-grid',\n  styleUrl: 'grid.scss',\n  shadow: true,\n})\nexport class Grid {\n  /**\n   * The grid will not have any horizontal padding\n   */\n  @Prop() noPadding = false;\n\n  /**\n   * Remove the gap between rows\n   */\n  @Prop() noRowGap = false;\n\n  /**\n   * Overwrite the default number of columns. Choose between 2 and 12 columns.\n   */\n  @Prop() columns = 12;\n\n  render() {\n    return (\n      <Host\n        class={{\n          'no-padding': this.noPadding,\n          'no-row-gap': this.noRowGap,\n        }}\n        style={{\n          '--ix-grid-columns': `${this.columns}`,\n        }}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ix-group-context-menu.cjs.entry.js

@@ -2,32 +2,44 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c978628a.js');
+const index = require('./index-be499a74.js');
+const shadowDom = require('./shadow-dom-9b10f758.js');
 
-const groupContextMenuCss = ".sc-ix-group-context-menu-h{display:block;position:relative;-webkit-margin-before:0.3125rem;margin-block-start:0.3125rem;-webkit-margin-end:0.3125rem;margin-inline-end:0.3125rem;-webkit-margin-start:auto;margin-inline-start:auto}.sc-ix-group-context-menu-h ix-icon-button.sc-ix-group-context-menu::after{display:none}.sc-ix-group-context-menu-h .hide.sc-ix-group-context-menu{visibility:collapse}";
+const groupContextMenuCss = ":host{display:block;position:relative;height:2rem;width:2rem;-webkit-margin-before:0.3125rem;margin-block-start:0.3125rem;-webkit-margin-end:0.3125rem;margin-inline-end:0.3125rem;-webkit-margin-start:auto;margin-inline-start:auto}:host .hide{visibility:collapse}";
 
 const GroupContextMenu = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.showContextMenu = false;
   }
-  get dropdownElement() {
-    return this.host.querySelector('ix-dropdown');
+  getTrigger() {
+    return this.hostElement;
   }
-  get groupDropdownItem() {
-    return this.host.querySelectorAll('ix-group-dropdown-item');
+  configureDropdown(dropdownElement, triggerElement) {
+    dropdownElement.positioningStrategy = 'fixed';
+    dropdownElement.trigger = triggerElement;
   }
-  configureDropdown(triggerElement) {
-    this.dropdownElement.positioningStrategy = 'fixed';
-    this.dropdownElement.trigger = triggerElement;
-  }
-  componentWillRender() {
-    this.showContextMenu = !!this.dropdownElement;
+  onSlotChange() {
+    const slot = this.hostElement.shadowRoot.querySelector('slot');
+    if (!slot) {
+      return;
+    }
+    const elements = shadowDom.getSlottedElements(slot);
+    this.showContextMenu = elements.length !== 0;
+    const dropdownElement = elements.find((elm) => elm.tagName === 'IX-DROPDOWN');
+    const triggerElement = this.getTrigger();
+    if (!triggerElement) {
+      return;
+    }
+    if (!dropdownElement) {
+      return;
+    }
+    this.configureDropdown(dropdownElement, triggerElement);
   }
   render() {
-    return (index.h(index.Host, null, index.h("ix-icon-button", { class: { hide: !this.showContextMenu }, ref: (ref) => this.dropdownElement ? this.configureDropdown(ref) : null, size: "24", ghost: true, icon: "context-menu" }), index.h("slot", null)));
+    return (index.h(index.Host, null, index.h("ix-icon-button", { class: { hide: !this.showContextMenu }, size: "24", ghost: true, icon: "context-menu" }), index.h("slot", { onSlotchange: () => this.onSlotChange() })));
   }
-  get host() { return index.getElement(this); }
+  get hostElement() { return index.getElement(this); }
 };
 GroupContextMenu.style = groupContextMenuCss;
 

package/dist/cjs/ix-group-context-menu.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"ix-group-context-menu.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,mBAAmB,GAAG,8YAA8Y;;MCgB7Z,gBAAgB;;;2BAGA,KAAK;;EAEhC,IAAI,eAAe;IACjB,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;GAC/C;EAED,IAAI,iBAAiB;IACnB,OAAO,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CAAC;GAC7D;EAEO,iBAAiB,CAAC,cAA2B;IACnD,IAAI,CAAC,eAAe,CAAC,mBAAmB,GAAG,OAAO,CAAC;IACnD,IAAI,CAAC,eAAe,CAAC,OAAO,GAAG,cAAc,CAAC;GAC/C;EAED,mBAAmB;IACjB,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC;GAC/C;EAED,MAAM;IACJ,QACEA,QAACC,UAAI,QACHD,4BACE,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE,EACtC,GAAG,EAAE,CAAC,GAAG,KACP,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,GAAG,IAAI,EAE3D,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,IAAI,EACX,IAAI,EAAC,cAAc,GACH,EAClBA,qBAAa,CACR,EACP;GACH;;;;;;;","names":["h","Host"],"sources":["./src/components/group/group-context-menu.scss?tag=ix-group-context-menu&encapsulation=scoped","./src/components/group/group-context-menu.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  display: block;\n  position: relative;\n  margin-block-start: 0.3125rem;\n  margin-inline-end: 0.3125rem;\n  margin-inline-start: auto;\n\n  ix-icon-button {\n    &::after {\n      display: none;\n    }\n  }\n\n  .hide {\n    visibility: collapse;\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, State } from '@stencil/core';\n\n@Component({\n  tag: 'ix-group-context-menu',\n  styleUrl: './group-context-menu.scss',\n  scoped: true,\n})\nexport class GroupContextMenu {\n  @Element() host!: HTMLIxGroupContextMenuElement;\n\n  @State() showContextMenu = false;\n\n  get dropdownElement() {\n    return this.host.querySelector('ix-dropdown');\n  }\n\n  get groupDropdownItem() {\n    return this.host.querySelectorAll('ix-group-dropdown-item');\n  }\n\n  private configureDropdown(triggerElement: HTMLElement) {\n    this.dropdownElement.positioningStrategy = 'fixed';\n    this.dropdownElement.trigger = triggerElement;\n  }\n\n  componentWillRender() {\n    this.showContextMenu = !!this.dropdownElement;\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-icon-button\n          class={{ hide: !this.showContextMenu }}\n          ref={(ref) =>\n            this.dropdownElement ? this.configureDropdown(ref) : null\n          }\n          size=\"24\"\n          ghost={true}\n          icon=\"context-menu\"\n        ></ix-icon-button>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-group-context-menu.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,mBAAmB,GAAG,wQAAwQ;;MCiBvR,gBAAgB;;;2BAGA,KAAK;;EAExB,UAAU;IAChB,OAAO,IAAI,CAAC,WAAW,CAAC;GACzB;EAEO,iBAAiB,CACvB,eAAsC,EACtC,cAA2B;IAE3B,eAAe,CAAC,mBAAmB,GAAG,OAAO,CAAC;IAC9C,eAAe,CAAC,OAAO,GAAG,cAAc,CAAC;GAC1C;EAEO,YAAY;IAClB,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC/D,IAAI,CAAC,IAAI,EAAE;MACT,OAAO;KACR;IACD,MAAM,QAAQ,GAAGA,4BAAkB,CAAC,IAAI,CAAC,CAAC;IAC1C,IAAI,CAAC,eAAe,GAAG,QAAQ,CAAC,MAAM,KAAK,CAAC,CAAC;IAE7C,MAAM,eAAe,GAAG,QAAQ,CAAC,IAAI,CACnC,CAAC,GAAY,KAAK,GAAG,CAAC,OAAO,KAAK,aAAa,CAChD,CAAC;IAEF,MAAM,cAAc,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;IAEzC,IAAI,CAAC,cAAc,EAAE;MACnB,OAAO;KACR;IAED,IAAI,CAAC,eAAe,EAAE;MACpB,OAAO;KACR;IAED,IAAI,CAAC,iBAAiB,CAAC,eAAe,EAAE,cAAc,CAAC,CAAC;GACzD;EAED,MAAM;IACJ,QACEC,QAACC,UAAI,QACHD,4BACE,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE,EACtC,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,IAAI,EACX,IAAI,EAAC,cAAc,GACH,EAClBA,kBAAM,YAAY,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,GAAS,CACjD,EACP;GACH;;;;;;;","names":["getSlottedElements","h","Host"],"sources":["./src/components/group/group-context-menu.scss?tag=ix-group-context-menu&encapsulation=shadow","./src/components/group/group-context-menu.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  display: block;\n  position: relative;\n\n  height: 2rem;\n  width: 2rem;\n\n  margin-block-start: 0.3125rem;\n  margin-inline-end: 0.3125rem;\n  margin-inline-start: auto;\n\n  .hide {\n    visibility: collapse;\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, State } from '@stencil/core';\nimport { getSlottedElements } from '../utils/shadow-dom';\n\n@Component({\n  tag: 'ix-group-context-menu',\n  styleUrl: './group-context-menu.scss',\n  shadow: true,\n})\nexport class GroupContextMenu {\n  @Element() hostElement!: HTMLIxGroupContextMenuElement;\n\n  @State() showContextMenu = false;\n\n  private getTrigger() {\n    return this.hostElement;\n  }\n\n  private configureDropdown(\n    dropdownElement: HTMLIxDropdownElement,\n    triggerElement: HTMLElement\n  ) {\n    dropdownElement.positioningStrategy = 'fixed';\n    dropdownElement.trigger = triggerElement;\n  }\n\n  private onSlotChange() {\n    const slot = this.hostElement.shadowRoot.querySelector('slot');\n    if (!slot) {\n      return;\n    }\n    const elements = getSlottedElements(slot);\n    this.showContextMenu = elements.length !== 0;\n\n    const dropdownElement = elements.find(\n      (elm: Element) => elm.tagName === 'IX-DROPDOWN'\n    );\n\n    const triggerElement = this.getTrigger();\n\n    if (!triggerElement) {\n      return;\n    }\n\n    if (!dropdownElement) {\n      return;\n    }\n\n    this.configureDropdown(dropdownElement, triggerElement);\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-icon-button\n          class={{ hide: !this.showContextMenu }}\n          size=\"24\"\n          ghost={true}\n          icon=\"context-menu\"\n        ></ix-icon-button>\n        <slot onSlotchange={() => this.onSlotChange()}></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ix-group_2.cjs.entry.js

@@ -0,0 +1,159 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-be499a74.js');
+const mutationObserver = require('./mutation-observer-eaaa5399.js');
+const shadowDom = require('./shadow-dom-9b10f758.js');
+
+const groupCss = ":host{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;flex-direction:column;position:relative;max-width:19.75rem;border-color:var(--theme-group-item--border-color)}:host .group-header{height:4rem;min-height:4rem;max-height:4rem;border-radius:var(--theme-group--border-radius) var(--theme-group--border-radius) 0 0;display:flex;background-color:var(--theme-group-item--background);color:var(--theme-group-header--color);cursor:pointer}:host .group-header:not(.disabled):not(:disabled){cursor:pointer}:host .group-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-group-item--background--hover)}:host .group-header:not(.disabled):not(:disabled):hover.selected{background-color:var(--theme-group-item--background--selected)}:host .group-header:not(.disabled):not(:disabled){cursor:pointer}:host .group-header:not(.disabled):not(:disabled):active,:host .group-header:not(.disabled):not(:disabled).active{background-color:var(--theme-group-item--background--active)}:host .group-header:not(.disabled):not(:disabled):active.selected,:host .group-header:not(.disabled):not(:disabled).active.selected{background-color:var(--theme-group-item--background--selected)}:host .group-header:not(.disabled):not(:disabled):focus-visible{border:1px solid var(--theme-color-focus-bdr);border-radius:var(--theme-default-border-radius) var(--theme-default-border-radius) 0px 0px;outline:none}:host .group-header.selected{background-color:var(--theme-group-item--background--selected)}:host .group-header.selected .group-header-selection-indicator{background-color:var(--theme-group-item-indicator--background--selected)}:host .group-header .group-header-selection-indicator{background-color:var(--theme-color-input--focus)}:host .group-header .group-header-selection-indicator.group-header-selection-indicator-item-selected{background-color:var(--theme-group-item-indicator--background--selected)}:host .group-header-clickable{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;width:100%;min-width:0}:host .group-header-selection-indicator{width:0.25rem;border-top-left-radius:var(--theme-group--border-radius)}:host .group-header-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;flex-direction:row;justify-content:space-between;min-width:0;flex-grow:1;padding:0.5rem;padding-left:0}:host .group-header-content .group-header-props-container{width:100%}:host .group-header-content .group-header-title{display:flex;align-items:center;font-size:1rem;font-weight:700;height:1.5rem}:host .group-header-content .group-header-title>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}:host .group-header-content .group-subheader{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;height:1.25rem;font-size:0.875rem;color:var(--theme-group-subheader--color)}:host .expand-icon{padding:0.125rem 0.437rem;color:var(--theme-color-std-text)}:host .btn-expand-header{margin:0.5rem;-webkit-margin-end:0.25rem;margin-inline-end:0.25rem;min-width:1.5rem}:host .group-content{display:flex;flex-direction:column;gap:1px;margin-top:1px}:host .footer{visibility:collapse;height:auto;min-height:0}:host .footer-visible{visibility:visible}:host .hidden{display:none}";
+
+const Group = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.selectGroup = index.createEvent(this, "selectGroup", 7);
+    this.selectItem = index.createEvent(this, "selectItem", 7);
+    this.collapsedChanged = index.createEvent(this, "collapsedChanged", 7);
+    this.suppressHeaderSelection = false;
+    this.header = undefined;
+    this.subHeader = undefined;
+    this.collapsed = true;
+    this.selected = undefined;
+    this.index = undefined;
+    this.expandOnHeaderClick = false;
+    this.itemSelected = false;
+    this.dropdownTriggerRef = undefined;
+    this.slotSize = this.groupItems.length;
+    this.footerVisible = false;
+  }
+  get dropdownItems() {
+    return Array.from(this.hostElement.querySelectorAll('ix-group-dropdown-item'));
+  }
+  get groupItems() {
+    return Array.from(this.hostElement.querySelectorAll('ix-group-item:not(.footer)'));
+  }
+  get groupContent() {
+    return this.hostElement.shadowRoot.querySelector('.group-content');
+  }
+  onExpandClick(event) {
+    this.collapsed = !this.collapsed;
+    this.collapsedChanged.emit(this.collapsed);
+    event.stopPropagation();
+  }
+  onHeaderClick(event) {
+    this.setGroupSelection(!this.selected);
+    if (this.suppressHeaderSelection) {
+      this.onExpandClick(event);
+    }
+  }
+  onItemClick(index) {
+    if (index === this.index) {
+      this.index = undefined;
+      this.selectItem.emit(undefined);
+    }
+    else {
+      this.index = index;
+      this.selectItem.emit(index);
+    }
+    if (this.index >= 0) {
+      this.itemSelected = true;
+    }
+    else
+      this.itemSelected = false;
+    this.setGroupSelection(false);
+  }
+  setGroupSelection(selection) {
+    if (!this.suppressHeaderSelection) {
+      this.selected = selection;
+      this.selectGroup.emit(this.selected);
+    }
+  }
+  onSlotChange() {
+    const slot = this.hostElement.shadowRoot.querySelector('slot[name="footer"]');
+    if (slot) {
+      this.footerVisible = shadowDom.hasSlottedElements(slot);
+    }
+  }
+  componentWillRender() {
+    this.groupItems.forEach((item, index) => {
+      if (this.selected === true) {
+        item.selected = false;
+        this.index = undefined;
+        this.itemSelected = false;
+        return;
+      }
+      item.selected = index === this.index;
+      item.index = index;
+    });
+  }
+  componentDidLoad() {
+    this.observer = mutationObserver.createMutationObserver(() => {
+      this.slotSize = this.groupItems.length;
+    });
+    this.observer.observe(this.groupContent, {
+      childList: true,
+    });
+    this.groupContent.addEventListener('selectedChanged', (evt) => {
+      this.onItemClick(evt.detail.index);
+    });
+  }
+  disconnectedCallback() {
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: {
+        'group-header': true,
+        expand: !this.collapsed,
+        selected: this.selected,
+      }, tabindex: "0" }, index.h("div", { class: "group-header-clickable", onClick: (e) => this.onHeaderClick(e) }, index.h("div", { class: {
+        'group-header-selection-indicator': true,
+        'group-header-selection-indicator-item-selected': this.itemSelected,
+      } }), index.h("div", { class: "btn-expand-header" }, index.h("ix-icon", { class: {
+        hidden: this.slotSize === 0,
+      }, name: `chevron-${this.collapsed ? 'right' : 'down'}-small`, onClick: (e) => this.onExpandClick(e) })), index.h("div", { class: "group-header-content" }, this.header ? (index.h("div", { class: "group-header-props-container" }, index.h("div", { class: "group-header-title" }, index.h("span", { title: this.header }, this.header)), index.h("div", { class: "group-subheader", title: this.subHeader }, this.subHeader))) : null, index.h("slot", { name: "header" }))), index.h("ix-group-context-menu", null, index.h("slot", { name: "dropdown" }))), index.h("div", { class: {
+        'group-content': true,
+      } }, !this.collapsed ? (index.h(index.Fragment, null, index.h("slot", null), index.h("ix-group-item", { suppressSelection: true, focusable: false, class: {
+        footer: true,
+        'footer-visible': this.footerVisible,
+      } }, index.h("slot", { name: "footer", onSlotchange: () => this.onSlotChange() })))) : null)));
+  }
+  get hostElement() { return index.getElement(this); }
+};
+Group.style = groupCss;
+
+const groupItemCss = ":host{display:flex;min-height:2.25rem;height:2.25rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host>button{display:flex;height:100%;width:100%;align-items:center;justify-content:flex-start;position:relative;outline:none;background-color:var(--theme-group-item--background);border:1px solid transparent;color:var(--theme-color-std-text);padding-left:2.5rem}:host>button:focus-visible{border:1px solid var(--theme-color-focus-bdr)}:host ix-icon{margin-right:0.25rem;margin-top:-0.125rem}:host .group-entry-selection-indicator{position:absolute;left:-1px;height:calc(100% + 2px);width:0.25rem}:host .group-entry-text{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .group-entry-text-secondary{display:flex;justify-content:flex-end;flex-grow:1;white-space:nowrap;color:var(--theme-color-soft-text)}:host .group-entry-text-secondary,:host .group-entry-text-secondary span{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.selected){border-top-width:0.062rem !important;background-color:var(--theme-color-ghost--selected)}:host(.selected) .group-entry-selection-indicator{background-color:var(--theme-group-item-indicator--background--selected)}:host(:not(.suppress-selection):hover){background-color:var(--theme-color-ghost--selected-hover);border-color:var(--theme-group-item--border-color--hover)}:host(:not(.suppress-selection).selected:hover){background-color:var(--theme-color-ghost--selected-hover)}:host(:not(.suppress-selection):active){background-color:var(--theme-color-ghost--selected-active);border-color:var(--theme-group-item--border-color--active)}:host(:not(.suppress-selection).selected:active){background-color:var(--theme-color-ghost--selected-active)}";
+
+const GroupItem = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.selectedChanged = index.createEvent(this, "selectedChanged", 7);
+    this.icon = undefined;
+    this.text = undefined;
+    this.secondaryText = undefined;
+    this.suppressSelection = false;
+    this.selected = undefined;
+    this.focusable = true;
+    this.index = undefined;
+  }
+  clickListen() {
+    if (this.suppressSelection) {
+      return;
+    }
+    this.selectedChanged.emit(this.hostElement);
+  }
+  render() {
+    return (index.h(index.Host, { class: {
+        selected: this.selected && !this.suppressSelection,
+        'suppress-selection': this.suppressSelection,
+      } }, index.h("button", { tabindex: this.focusable ? 0 : -1 }, index.h("div", { class: "group-entry-selection-indicator" }), this.icon ? index.h("ix-icon", { size: "16", name: this.icon }) : null, this.text ? (index.h("span", { class: "group-entry-text" }, index.h("span", { title: this.text }, this.text))) : null, this.secondaryText ? (index.h("span", { class: "group-entry-text-secondary" }, index.h("span", { title: this.secondaryText }, this.secondaryText))) : null, index.h("slot", null))));
+  }
+  get hostElement() { return index.getElement(this); }
+};
+GroupItem.style = groupItemCss;
+
+exports.ix_group = Group;
+exports.ix_group_item = GroupItem;
+
+//# sourceMappingURL=ix-group_2.cjs.entry.js.map

package/dist/cjs/ix-group_2.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ix-group.ix-group-item.entry.cjs.js","mappings":"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","names":["hasSlottedElements","createMutationObserver","h","Host","Fragment"],"sources":["./src/components/group/group.scss?tag=ix-group&encapsulation=shadow","./src/components/group/group.tsx","./src/components/group-item/group-item.scss?tag=ix-group-item&encapsulation=shadow","./src/components/group-item/group-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 'legacy/mixins/fonts';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n\n:host {\n  @include ellipsis;\n\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  max-width: 19.75rem;\n  border-color: var(--theme-group-item--border-color);\n\n  .group-header {\n    height: 4rem;\n    min-height: 4rem;\n    max-height: 4rem;\n    border-radius: var(--theme-group--border-radius)\n      var(--theme-group--border-radius) 0 0;\n    display: flex;\n    background-color: var(--theme-group-item--background);\n    color: var(--theme-group-header--color);\n\n    cursor: pointer;\n\n    @include hover {\n      background-color: var(--theme-group-item--background--hover);\n\n      &.selected {\n        background-color: var(--theme-group-item--background--selected);\n      }\n    }\n\n    @include active {\n      background-color: var(--theme-group-item--background--active);\n\n      &.selected {\n        background-color: var(--theme-group-item--background--selected);\n      }\n    }\n\n    @include focus-visible {\n      border: 1px solid var(--theme-color-focus-bdr);\n      border-radius: var(--theme-default-border-radius)\n        var(--theme-default-border-radius) 0px 0px;\n      outline: none;\n    }\n\n    &.selected {\n      background-color: var(--theme-group-item--background--selected);\n\n      .group-header-selection-indicator {\n        background-color: var(\n          --theme-group-item-indicator--background--selected\n        );\n      }\n    }\n\n    .group-header-selection-indicator {\n      background-color: var(--theme-color-input--focus);\n\n      &.group-header-selection-indicator-item-selected {\n        background-color: var(\n          --theme-group-item-indicator--background--selected\n        );\n      }\n    }\n  }\n\n  .group-header-clickable {\n    @include ellipsis;\n\n    display: flex;\n    width: 100%;\n    min-width: 0;\n  }\n\n  .group-header-selection-indicator {\n    width: $tiny-space;\n    border-top-left-radius: var(--theme-group--border-radius);\n  }\n\n  .group-header-content {\n    @include ellipsis;\n\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    min-width: 0;\n    flex-grow: 1;\n    padding: 0.5rem;\n    padding-left: 0;\n\n    .group-header-props-container {\n      width: 100%;\n    }\n\n    .group-header-title {\n      display: flex;\n      align-items: center;\n      font-size: 1rem;\n      font-weight: $font-weight-bold;\n      height: 1.5rem;\n\n      & > * {\n        @include ellipsis;\n\n        min-width: 0;\n      }\n    }\n\n    .group-subheader {\n      @include ellipsis();\n\n      height: 1.25rem;\n      font-size: 0.875rem;\n      color: var(--theme-group-subheader--color);\n    }\n  }\n\n  .expand-icon {\n    padding: 0.125rem 0.437rem;\n    color: var(--theme-color-std-text);\n  }\n\n  .btn-expand-header {\n    margin: $small-space;\n    margin-inline-end: $tiny-space;\n    min-width: 1.5rem;\n  }\n\n  .group-content {\n    display: flex;\n    flex-direction: column;\n    gap: 1px;\n    margin-top: 1px;\n  }\n\n  .footer {\n    visibility: collapse;\n    height: auto;\n    min-height: 0;\n  }\n\n  .footer-visible {\n    visibility: visible;\n  }\n\n  .hidden {\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  Fragment,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { hasSlottedElements } from '../utils/shadow-dom';\n\n@Component({\n  tag: 'ix-group',\n  styleUrl: 'group.scss',\n  shadow: true,\n})\nexport class Group {\n  @Element() hostElement!: HTMLIxGroupElement;\n\n  /**\n   * Prevent header from being selectable\n   */\n  @Prop() suppressHeaderSelection = false;\n\n  /**\n   * Group header\n   */\n  @Prop() header: string;\n\n  /**\n   * Group header subtitle\n   */\n  @Prop() subHeader: string;\n\n  /**\n   * Whether the group is collapsed or expanded. Defaults to true.\n   */\n  @Prop({ mutable: true, reflect: true }) collapsed = true;\n\n  /**\n   * Whether the group is selected.\n   */\n  @Prop({ mutable: true, reflect: true }) selected: boolean;\n\n  /**\n   * The index of the selected group entry.\n   * If undefined no group item is selected.\n   */\n  @Prop({ mutable: true, reflect: true }) index: number;\n\n  /**\n   * Expand the group if the header is clicked\n   */\n  @Prop() expandOnHeaderClick = false;\n\n  /**\n   * Emits when whole group gets selected.\n   */\n  @Event() selectGroup: EventEmitter<boolean>;\n\n  /**\n   * Emits when group item gets selected.\n   */\n  @Event() selectItem: EventEmitter<number>;\n\n  /**\n   * Group collapsed\n   */\n  @Event() collapsedChanged: EventEmitter<boolean>;\n\n  @State() itemSelected = false;\n  @State() dropdownTriggerRef: HTMLElement;\n  @State() slotSize = this.groupItems.length;\n  @State() footerVisible = false;\n\n  private observer: MutationObserver;\n\n  get dropdownItems() {\n    return Array.from(\n      this.hostElement.querySelectorAll('ix-group-dropdown-item')\n    );\n  }\n\n  get groupItems(): Array<HTMLIxGroupItemElement> {\n    return Array.from(\n      this.hostElement.querySelectorAll('ix-group-item:not(.footer)')\n    );\n  }\n\n  get groupContent() {\n    return this.hostElement.shadowRoot.querySelector('.group-content');\n  }\n\n  private onExpandClick(event: Event) {\n    this.collapsed = !this.collapsed;\n\n    this.collapsedChanged.emit(this.collapsed);\n    event.stopPropagation();\n  }\n\n  private onHeaderClick(event: Event) {\n    this.setGroupSelection(!this.selected);\n\n    if (this.suppressHeaderSelection) {\n      this.onExpandClick(event);\n    }\n  }\n\n  private onItemClick(index: number) {\n    if (index === this.index) {\n      this.index = undefined;\n      this.selectItem.emit(undefined);\n    } else {\n      this.index = index;\n      this.selectItem.emit(index);\n    }\n\n    if (this.index >= 0) {\n      this.itemSelected = true;\n    } else this.itemSelected = false;\n\n    this.setGroupSelection(false);\n  }\n\n  private setGroupSelection(selection: boolean) {\n    if (!this.suppressHeaderSelection) {\n      this.selected = selection;\n      this.selectGroup.emit(this.selected);\n    }\n  }\n\n  private onSlotChange() {\n    const slot = this.hostElement.shadowRoot.querySelector(\n      'slot[name=\"footer\"]'\n    );\n\n    if (slot) {\n      this.footerVisible = hasSlottedElements(slot);\n    }\n  }\n\n  componentWillRender() {\n    this.groupItems.forEach((item, index) => {\n      if (this.selected === true) {\n        item.selected = false;\n        this.index = undefined;\n        this.itemSelected = false;\n        return;\n      }\n      item.selected = index === this.index;\n      item.index = index;\n    });\n  }\n\n  componentDidLoad() {\n    this.observer = createMutationObserver(() => {\n      this.slotSize = this.groupItems.length;\n    });\n\n    this.observer.observe(this.groupContent, {\n      childList: true,\n    });\n\n    this.groupContent.addEventListener(\n      'selectedChanged',\n      (evt: CustomEvent<HTMLIxGroupItemElement>) => {\n        this.onItemClick(evt.detail.index);\n      }\n    );\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            'group-header': true,\n            expand: !this.collapsed,\n            selected: this.selected,\n          }}\n          tabindex=\"0\"\n        >\n          <div\n            class=\"group-header-clickable\"\n            onClick={(e) => this.onHeaderClick(e)}\n          >\n            <div\n              class={{\n                'group-header-selection-indicator': true,\n                'group-header-selection-indicator-item-selected':\n                  this.itemSelected,\n              }}\n            ></div>\n            <div class=\"btn-expand-header\">\n              <ix-icon\n                class={{\n                  hidden: this.slotSize === 0,\n                }}\n                name={`chevron-${this.collapsed ? 'right' : 'down'}-small`}\n                onClick={(e) => this.onExpandClick(e)}\n              ></ix-icon>\n            </div>\n\n            <div class=\"group-header-content\">\n              {this.header ? (\n                <div class=\"group-header-props-container\">\n                  <div class=\"group-header-title\">\n                    <span title={this.header}>{this.header}</span>\n                  </div>\n                  <div class=\"group-subheader\" title={this.subHeader}>\n                    {this.subHeader}\n                  </div>\n                </div>\n              ) : null}\n              <slot name=\"header\"></slot>\n            </div>\n          </div>\n          <ix-group-context-menu>\n            <slot name=\"dropdown\"></slot>\n          </ix-group-context-menu>\n        </div>\n        <div\n          class={{\n            'group-content': true,\n          }}\n        >\n          {!this.collapsed ? (\n            <Fragment>\n              <slot></slot>\n              <ix-group-item\n                suppressSelection={true}\n                focusable={false}\n                class={{\n                  footer: true,\n                  'footer-visible': this.footerVisible,\n                }}\n              >\n                <slot\n                  name=\"footer\"\n                  onSlotchange={() => this.onSlotChange()}\n                ></slot>\n              </ix-group-item>\n            </Fragment>\n          ) : null}\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@import 'common-variables';\n@import 'legacy/mixins/fonts';\n@import 'mixins/shadow-dom/hover';\n@import 'mixins/shadow-dom/component';\n@import 'mixins/text-truncation';\n\n$focusBorderWidth: 1px;\n\n:host {\n  @include ix-component;\n  display: flex;\n  min-height: 2.25rem;\n  height: 2.25rem;\n\n  > button {\n    display: flex;\n    height: 100%;\n    width: 100%;\n    align-items: center;\n    justify-content: flex-start;\n    position: relative;\n    outline: none;\n    background-color: var(--theme-group-item--background);\n    border: 1px solid transparent;\n    color: var(--theme-color-std-text);\n\n    padding-left: 2.5rem;\n\n    &:focus-visible {\n      border: $focusBorderWidth solid var(--theme-color-focus-bdr);\n    }\n  }\n\n  ix-icon {\n    margin-right: $tiny-space;\n    margin-top: -0.125rem;\n  }\n\n  .group-entry-selection-indicator {\n    position: absolute;\n    left: -#{$focusBorderWidth};\n    height: calc(100% + #{$focusBorderWidth * 2});\n    width: $tiny-space;\n  }\n\n  .group-entry-text {\n    @include text-default;\n    @include ellipsis();\n  }\n\n  .group-entry-text-secondary {\n    &,\n    span {\n      @include text-default;\n      @include ellipsis;\n    }\n\n    display: flex;\n    justify-content: flex-end;\n    flex-grow: 1;\n    white-space: nowrap;\n    color: var(--theme-color-soft-text);\n  }\n}\n\n:host(.selected) {\n  border-top-width: 0.062rem !important;\n  background-color: var(--theme-color-ghost--selected);\n\n  .group-entry-selection-indicator {\n    background-color: var(--theme-group-item-indicator--background--selected);\n  }\n}\n\n:host(:not(.suppress-selection):hover) {\n  background-color: var(--theme-color-ghost--selected-hover);\n  border-color: var(--theme-group-item--border-color--hover);\n}\n\n:host(:not(.suppress-selection).selected:hover) {\n  background-color: var(--theme-color-ghost--selected-hover);\n}\n\n:host(:not(.suppress-selection):active) {\n  background-color: var(--theme-color-ghost--selected-active);\n  border-color: var(--theme-group-item--border-color--active);\n}\n\n:host(:not(.suppress-selection).selected:active) {\n  background-color: var(--theme-color-ghost--selected-active);\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  Prop,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-group-item',\n  styleUrl: 'group-item.scss',\n  shadow: true,\n})\nexport class GroupItem {\n  @Element() hostElement!: HTMLIxGroupItemElement;\n\n  /**\n   * Group item icon\n   */\n  @Prop() icon: string;\n\n  /**\n   * Group item text\n   */\n  @Prop() text: string;\n\n  /**\n   * Group item secondary text\n   */\n  @Prop() secondaryText: string;\n\n  /**\n   * Supress the selection of the group\n   */\n  @Prop() suppressSelection = false;\n\n  /**\n   * Show selected state\n   */\n  @Prop() selected: boolean;\n\n  /**\n   * The elements tabindex attribute will get set accordingly.\n   * If true tabindex will be 0, -1 otherwise.\n   */\n  @Prop() focusable = true;\n\n  /**\n   * Selection changed\n   */\n  @Event() selectedChanged: EventEmitter<HTMLIxGroupItemElement>;\n\n  /**\n   * Index\n   */\n  @Prop() index: number;\n\n  @Listen('click', { passive: true })\n  clickListen() {\n    if (this.suppressSelection) {\n      return;\n    }\n    this.selectedChanged.emit(this.hostElement);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          selected: this.selected && !this.suppressSelection,\n          'suppress-selection': this.suppressSelection,\n        }}\n      >\n        <button tabindex={this.focusable ? 0 : -1}>\n          <div class=\"group-entry-selection-indicator\"></div>\n          {this.icon ? <ix-icon size=\"16\" name={this.icon}></ix-icon> : null}\n          {this.text ? (\n            <span class=\"group-entry-text\">\n              <span title={this.text}>{this.text}</span>\n            </span>\n          ) : null}\n          {this.secondaryText ? (\n            <span class=\"group-entry-text-secondary\">\n              <span title={this.secondaryText}>{this.secondaryText}</span>\n            </span>\n          ) : null}\n          <slot></slot>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}