@siemens/ix 2.0.0-beta.1 → 2.0.0

package/dist/components/ix-expanding-search.js.map

@@ -1 +0,0 @@
-{"file":"ix-expanding-search.js","mappings":"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","names":[],"sources":["./src/components/expanding-search/expanding-search.scss?tag=ix-expanding-search&encapsulation=shadow","./src/components/expanding-search/expanding-search.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 'common-variables';\n@import 'legacy/components/forms';\n@import 'mixins/shadow-dom/component';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n\n$container-width: 11.5625rem;\n\n:host {\n  @include ix-component;\n\n  display: inline-flex;\n  width: auto;\n  height: $x-large-space;\n  align-items: center;\n  justify-content: space-between;\n  position: relative;\n\n  .input-container {\n    transition: all 0.3s ease-in-out;\n  }\n\n  input {\n    box-shadow: var(--theme-input--box-shadow);\n    cursor: auto !important;\n    width: 100%;\n  }\n\n  .expanded {\n    width: $container-width;\n\n    &.fullWidth {\n      width: 100%;\n    }\n  }\n\n  .collapsed {\n    width: $large-space;\n    border: none;\n  }\n\n  /*collapsed view*/\n  .btn-search-icon {\n    align-self: center;\n    margin: auto;\n    position: relative;\n  }\n\n  .btn-search {\n    display: flex;\n    max-width: $x-large-space;\n    max-height: $x-large-space;\n    border-radius: var(--theme-input--border-radius);\n    transition: all 0.15s ease-in-out;\n    z-index: 1;\n    align-items: center;\n    position: relative;\n    border: none;\n\n    @include hover {\n      border-color: transparent;\n    }\n\n    @include active {\n      border-color: transparent;\n    }\n\n    @include focus {\n      outline: none;\n    }\n\n    @include focus-visible {\n      outline: var(--focus--border-color);\n      outline-width: 1px;\n      outline-style: solid;\n    }\n  }\n\n  .btn-search.btn-search--expanded {\n    margin-left: 0.25rem;\n    pointer-events: none;\n  }\n\n  .btn-search:active {\n    width: $x-large-space;\n    height: $x-large-space;\n    border-radius: var(--theme-input--border-radius);\n    border: var(--theme-std-bdr-1) !important;\n  }\n\n  /*expanded view*/\n  .input-container {\n    display: flex;\n    position: absolute;\n    align-items: center;\n    flex-wrap: nowrap;\n  }\n\n  .btn-clear {\n    position: absolute;\n    border-radius: var(--theme-input--border-radius);\n    right: 0px;\n    margin-right: 0.25rem;\n  }\n\n  .input {\n    padding-left: $x-large-space !important;\n    padding-right: 2.5rem !important;\n  }\n\n  .opacity-before {\n    opacity: 0;\n  }\n\n  .opacity-after {\n    opacity: 1;\n  }\n}\n\n:host(.right-position) {\n  width: $container-width !important;\n}\n\n:host(.right-position.fullWidth) {\n  width: 100% !important;\n\n  .fullWidth {\n    width: 100% !important;\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  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-expanding-search',\n  styleUrl: 'expanding-search.scss',\n  shadow: true,\n})\nexport class ExpandingSearch {\n  /**\n   * Search icon\n   */\n  @Prop() icon = 'search';\n\n  /**\n   * Placeholder text\n   */\n  @Prop() placeholder = 'Enter text here';\n\n  /**\n   * Default value\n   */\n  @Prop({ mutable: true }) value = '';\n\n  /**\n   * If true the search field will fill all available horizontal space of it's parent container when expanded.\n   * @since 1.6.0\n   */\n  @Prop() fullWidth = false;\n\n  @State() isFieldChanged = false;\n  @State() expanded = false;\n  @State() hasFocus = false;\n\n  /**\n   * Value changed\n   */\n  @Event() valueChange: EventEmitter<string>;\n\n  private expandInput() {\n    setTimeout(this.focusTextInput, 300);\n    this.expanded = true;\n  }\n\n  private collapseInput() {\n    if (!this.isFieldChanged && this.expanded) {\n      this.expanded = false;\n    }\n  }\n\n  private clearInput() {\n    this.value = '';\n    this.isFieldChanged = false;\n  }\n\n  private onChange(e: InputEvent) {\n    this.value = (e.target as HTMLInputElement).value;\n    if (this.isFieldChanged && this.value === '') {\n      this.isFieldChanged = false;\n    } else {\n      this.isFieldChanged = true;\n    }\n\n    this.valueChange.emit(this.value);\n  }\n\n  private textInput?: HTMLInputElement;\n\n  constructor() {\n    this.focusTextInput = this.focusTextInput.bind(this);\n  }\n\n  private focusTextInput() {\n    this.textInput?.focus();\n  }\n\n  private clearClicked() {\n    this.clearInput();\n    this.textInput?.focus();\n    this.valueChange.emit(this.value);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          expanded: this.expanded,\n          'right-position': this.expanded,\n          fullWidth: this.fullWidth,\n        }}\n      >\n        <ix-icon-button\n          size={this.expanded ? '16' : '24'}\n          icon={this.icon}\n          ghost\n          variant=\"primary\"\n          data-testid=\"button\"\n          onClick={() => this.expandInput()}\n          tabindex={this.expanded ? -1 : 0}\n          color={this.hasFocus ? 'input-search-icon--color--focus' : undefined}\n          class={{\n            'btn-search': true,\n            'btn-search--expanded': this.expanded,\n          }}\n        ></ix-icon-button>\n\n        <div\n          class={{\n            expanded: this.expanded,\n            fullWidth: this.fullWidth,\n            collapsed: !this.expanded,\n            'disable-pointer': !this.expanded,\n            'input-container': true,\n          }}\n          data-testid=\"input-wrapper\"\n        >\n          <input\n            class={{\n              'form-control': true,\n              input: this.expanded,\n              'disable-pointer': !this.expanded,\n              'opacity-before': !this.expanded,\n              'opacity-after': this.expanded,\n            }}\n            ref={(el) => (this.textInput = el)}\n            data-testid=\"input\"\n            placeholder={this.placeholder}\n            type=\"text\"\n            value={this.value}\n            onBlur={() => {\n              this.collapseInput();\n              this.hasFocus = false;\n            }}\n            onFocus={() => (this.hasFocus = true)}\n            onInput={(e: InputEvent) => this.onChange(e)}\n            tabindex={this.expanded ? 0 : -1}\n          />\n\n          {this.isFieldChanged ? (\n            <ix-icon-button\n              class=\"btn-clear\"\n              icon=\"clear\"\n              ghost={true}\n              size=\"16\"\n              data-testid=\"clear-button\"\n              onClick={() => this.clearClicked()}\n            />\n          ) : null}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/ix-filter-chip.d.ts

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

package/dist/components/ix-filter-chip.js

@@ -1,8 +0,0 @@
-import { F as FilterChip, d as defineCustomElement$1 } from './filter-chip.js';
-
-const IxFilterChip = FilterChip;
-const defineCustomElement = defineCustomElement$1;
-
-export { IxFilterChip, defineCustomElement };
-
-//# sourceMappingURL=ix-filter-chip.js.map

package/dist/components/ix-filter-chip.js.map

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

package/dist/components/ix-flip-tile-content.d.ts

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

package/dist/components/ix-flip-tile-content.js

@@ -1,38 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-
-const flipTileContentCss = ":host{display:block}";
-
-const FlipTileContent = /*@__PURE__*/ proxyCustomElement(class FlipTileContent extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.contentVisible = false;
-  }
-  render() {
-    return h(Host, null, this.contentVisible ? h("slot", null) : null);
-  }
-  static get style() { return flipTileContentCss; }
-}, [1, "ix-flip-tile-content", {
-    "contentVisible": [4, "content-visible"]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["ix-flip-tile-content"];
-  components.forEach(tagName => { switch (tagName) {
-    case "ix-flip-tile-content":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, FlipTileContent);
-      }
-      break;
-  } });
-}
-
-const IxFlipTileContent = FlipTileContent;
-const defineCustomElement = defineCustomElement$1;
-
-export { IxFlipTileContent, defineCustomElement };
-
-//# sourceMappingURL=ix-flip-tile-content.js.map

package/dist/components/ix-flip-tile-content.js.map

@@ -1 +0,0 @@
-{"file":"ix-flip-tile-content.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,sBAAsB;;MCepC,eAAe;;;;;0BAMD,KAAK;;EAE9B,MAAM;IACJ,OAAO,EAAC,IAAI,QAAE,IAAI,CAAC,cAAc,GAAG,eAAa,GAAG,IAAI,CAAQ,CAAC;GAClE;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./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: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/components/ix-flip-tile.d.ts

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

package/dist/components/ix-flip-tile.js

@@ -1,127 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as createMutationObserver } from './mutation-observer.js';
-import { F as FlipTileState } from './flip-tile-state.js';
-import { d as defineCustomElement$4 } from './icon.js';
-import { d as defineCustomElement$3 } from './icon-button.js';
-import { d as defineCustomElement$2 } from './spinner.js';
-
-const 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 = /*@__PURE__*/ proxyCustomElement(class FlipTile extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.ANIMATION_DURATION = 150;
-    this.state = undefined;
-    this.height = 15.125;
-    this.width = 16;
-    this.index = 0;
-    this.isFlipAnimationActive = undefined;
-  }
-  componentDidLoad() {
-    this.observer = 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();
-  }
-  doFlipAnimation() {
-    this.isFlipAnimationActive = true;
-    setTimeout(() => {
-      this.updateContentVisibility(this.index);
-      if (this.index >= this.contentItems.length - 1) {
-        this.index = 0;
-      }
-      else {
-        this.index++;
-      }
-      this.updateContentVisibility(this.index);
-    }, this.ANIMATION_DURATION);
-    setTimeout(() => {
-      this.isFlipAnimationActive = false;
-    }, 2 * this.ANIMATION_DURATION);
-  }
-  render() {
-    return (h(Host, { style: {
-        height: `${this.height}${this.height === 'auto' ? '' : 'rem'}`,
-        'min-height': `${this.height}${this.height === 'auto' ? '' : 'rem'}`,
-        'max-height': `${this.height}${this.height === 'auto' ? '' : 'rem'}`,
-        width: `${this.width}${this.width === 'auto' ? '' : 'rem'}`,
-        'min-width': `${this.width}${this.width === 'auto' ? '' : 'rem'}`,
-        'max-width': `${this.width}${this.width === 'auto' ? '' : 'rem'}`,
-      } }, h("div", { class: {
-        'flip-tile-container': true,
-        info: this.state === FlipTileState.Info,
-        warning: this.state === FlipTileState.Warning,
-        alarm: this.state === FlipTileState.Alarm,
-        primary: this.state === FlipTileState.Primary,
-        'flip-animation-active': this.isFlipAnimationActive,
-      } }, h("div", { class: "flip-tile-header" }, h("div", { class: "header-slot-container text-l-title" }, h("slot", { name: "header" })), h("ix-icon-button", { icon: "eye", variant: "primary", ghost: true, onClick: () => this.toggleIndex() })), h("div", { class: "content-container" }, h("slot", null)), h("div", { class: {
-        footer: true,
-        'contrast-light': this.state === FlipTileState.Warning,
-        'contrast-dark': this.state === FlipTileState.Info ||
-          this.state === FlipTileState.Alarm,
-      } }, h("slot", { name: "footer" })))));
-  }
-  get hostElement() { return this; }
-  static get style() { return flipTileCss; }
-}, [1, "ix-flip-tile", {
-    "state": [1],
-    "height": [8],
-    "width": [8],
-    "index": [32],
-    "isFlipAnimationActive": [32]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["ix-flip-tile", "ix-icon", "ix-icon-button", "ix-spinner"];
-  components.forEach(tagName => { switch (tagName) {
-    case "ix-flip-tile":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, FlipTile);
-      }
-      break;
-    case "ix-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "ix-icon-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "ix-spinner":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
-
-const IxFlipTile = FlipTile;
-const defineCustomElement = defineCustomElement$1;
-
-export { IxFlipTile, defineCustomElement };
-
-//# sourceMappingURL=ix-flip-tile.js.map

package/dist/components/ix-flip-tile.js.map

@@ -1 +0,0 @@
-{"file":"ix-flip-tile.js","mappings":"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","names":[],"sources":["./src/components/flip-tile/flip-tile.scss?tag=ix-flip-tile&encapsulation=shadow","./src/components/flip-tile/flip-tile.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"],"version":3}

package/dist/components/ix-form-field.d.ts

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

package/dist/components/ix-form-field.js

@@ -1,43 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-
-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 = /*@__PURE__*/ proxyCustomElement(class FormField extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.label = undefined;
-  }
-  get inputElement() {
-    return this.hostElement.querySelector('input');
-  }
-  componentWillLoad() { }
-  render() {
-    return (h(Host, null, this.label ? (h("label", { htmlFor: this.inputElement.id }, this.label)) : null, h("slot", null)));
-  }
-  get hostElement() { return this; }
-  static get style() { return formFieldCss; }
-}, [1, "ix-form-field", {
-    "label": [1]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["ix-form-field"];
-  components.forEach(tagName => { switch (tagName) {
-    case "ix-form-field":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, FormField);
-      }
-      break;
-  } });
-}
-
-const IxFormField = FormField;
-const defineCustomElement = defineCustomElement$1;
-
-export { IxFormField, defineCustomElement };
-
-//# sourceMappingURL=ix-form-field.js.map

package/dist/components/ix-form-field.js.map

@@ -1 +0,0 @@
-{"file":"ix-form-field.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,QACE,EAAC,IAAI,QACF,IAAI,CAAC,KAAK,IACT,aAAO,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,EAAE,IAAG,IAAI,CAAC,KAAK,CAAS,IACxD,IAAI,EACR,eAAa,CACR,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"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/components/ix-grid.d.ts

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

package/dist/components/ix-grid.js

@@ -1,47 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-
-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 = /*@__PURE__*/ proxyCustomElement(class Grid extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.noPadding = false;
-    this.noRowGap = false;
-    this.columns = 12;
-  }
-  render() {
-    return (h(Host, { class: {
-        'no-padding': this.noPadding,
-        'no-row-gap': this.noRowGap,
-      }, style: {
-        '--ix-grid-columns': `${this.columns}`,
-      } }, h("slot", null)));
-  }
-  static get style() { return gridCss; }
-}, [1, "ix-grid", {
-    "noPadding": [4, "no-padding"],
-    "noRowGap": [4, "no-row-gap"],
-    "columns": [2]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["ix-grid"];
-  components.forEach(tagName => { switch (tagName) {
-    case "ix-grid":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, Grid);
-      }
-      break;
-  } });
-}
-
-const IxGrid = Grid;
-const defineCustomElement = defineCustomElement$1;
-
-export { IxGrid, defineCustomElement };
-
-//# sourceMappingURL=ix-grid.js.map

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

@@ -1 +0,0 @@
-{"file":"ix-grid.js","mappings":";;AAAA,MAAM,OAAO,GAAG,wRAAwR;;MCmB3R,IAAI;;;;;qBAIK,KAAK;oBAKN,KAAK;mBAKN,EAAE;;EAEpB,MAAM;IACJ,QACE,EAAC,IAAI,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,IAED,eAAa,CACR,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"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/components/ix-group-context-menu.d.ts

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

package/dist/components/ix-group-context-menu.js

@@ -1,8 +0,0 @@
-import { G as GroupContextMenu, d as defineCustomElement$1 } from './group-context-menu.js';
-
-const IxGroupContextMenu = GroupContextMenu;
-const defineCustomElement = defineCustomElement$1;
-
-export { IxGroupContextMenu, defineCustomElement };
-
-//# sourceMappingURL=ix-group-context-menu.js.map

package/dist/components/ix-group-context-menu.js.map

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

package/dist/components/ix-group-item.d.ts

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

package/dist/components/ix-group-item.js

@@ -1,8 +0,0 @@
-import { G as GroupItem, d as defineCustomElement$1 } from './group-item.js';
-
-const IxGroupItem = GroupItem;
-const defineCustomElement = defineCustomElement$1;
-
-export { IxGroupItem, defineCustomElement };
-
-//# sourceMappingURL=ix-group-item.js.map

package/dist/components/ix-group-item.js.map

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

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

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