@siemens/ix 3.0.0-alpha.0 → 3.0.0-alpha.1

package/components/ix-expanding-search.js

@@ -0,0 +1,146 @@
+import { p as proxyCustomElement, H, e as createEvent, h, d as Host } from './p-CtTl3_AV.js';
+import { e as iconClear, f as iconSearch } from './p-Dn_WjwtW.js';
+import { d as defineCustomElement$3 } from './p-CA8lgT01.js';
+import { d as defineCustomElement$2 } from './p-DcqQbhTb.js';
+
+const expandingSearchCss = ".ix-form-control,.ix-form-control-plaintext{-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);color:var(--theme-input--color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--theme-input--border-radius);height:2rem;min-height:2rem;min-width:2rem;background-color:var(--theme-input--background);border:solid 1px var(--theme-input--border-color);box-shadow:var(--theme-input--box-shadow);padding-inline-start:0.5rem;padding-inline-end:0.5rem}.ix-form-control::-moz-placeholder,.ix-form-control-plaintext::-moz-placeholder{color:var(--theme-input-hint--color)}.ix-form-control::placeholder,.ix-form-control-plaintext::placeholder{color:var(--theme-input-hint--color)}.ix-form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled),.ix-form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled){cursor:pointer}.ix-form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled),.ix-form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled){cursor:pointer}.ix-form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover,.ix-form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover{background-color:var(--theme-input--background--hover);border-color:var(--theme-input--border-color--hover);cursor:auto}.ix-form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover,.ix-form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover{background-color:var(--theme-input--background--hover);border-color:var(--theme-input--border-color--hover);cursor:auto}.ix-form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible,.ix-form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible{background-color:var(--theme-input--background--focus);border-color:var(--theme-input--border-color--focus);outline-offset:var(--theme-input--focus--outline-offset);box-shadow:var(--theme-input--box-shadow);outline:1px solid var(--theme-color-focus-bdr)}.ix-form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible,.ix-form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible{background-color:var(--theme-input--background--focus);border-color:var(--theme-input--border-color--focus);outline-offset:var(--theme-input--focus--outline-offset);box-shadow:var(--theme-input--box-shadow);outline:1px solid var(--theme-color-focus-bdr)}.ix-form-control:focus-visible{color:var(--theme-input--color)}.ix-form-control[type=number]{text-align:right}.ix-form-control[type=number]::-webkit-inner-spin-button{margin-right:-2px;margin-left:2px;display:none}.ix-form-control.readonly,.ix-form-control[readonly]{background:transparent !important;border-block-start:none !important;border-inline-start:none !important;border-inline-end:none !important;border-radius:0rem}.ix-form-control:-moz-read-only{box-shadow:none !important;outline:none !important;border-color:var(--theme-input--border-color);cursor:default !important}.ix-form-control:read-only,.ix-form-control[readonly],.ix-form-control[readOnly],.ix-form-control.readonly{box-shadow:none !important;outline:none !important;border-color:var(--theme-input--border-color);cursor:default !important}.ix-form-control:read-only::-moz-placeholder,.ix-form-control[readonly]::-moz-placeholder,.ix-form-control[readOnly]::-moz-placeholder,.ix-form-control.readonly::-moz-placeholder{color:transparent}.ix-form-control:-moz-read-only::placeholder{color:transparent}.ix-form-control:read-only::placeholder,.ix-form-control[readonly]::placeholder,.ix-form-control[readOnly]::placeholder,.ix-form-control.readonly::placeholder{color:transparent}.ix-form-control:disabled,.ix-form-control.disabled{background:transparent !important;border-block-start:none !important;border-inline-start:none !important;border-inline-end:none !important;border-radius:0rem;color:var(--theme-color-weak-text);border-color:var(--theme-input--border-color-bottom--disabled)}.ix-form-control:disabled::-moz-placeholder,.ix-form-control.disabled::-moz-placeholder{color:transparent}.ix-form-control:disabled::placeholder,.ix-form-control.disabled::placeholder{color:transparent}.ix-form-control-plaintext{outline:0}.form-group{position:relative}.input-wrapper{display:flex;position:relative;align-items:center;flex-wrap:nowrap}.input-wrapper>.glyph{display:block;position:absolute;margin-inline-start:0.312rem;color:var(--theme-color-std-text)}.input-wrapper>input{padding-inline-start:2.2rem}select.ix-form-control{padding:0 0.312rem}textarea.ix-form-control{padding:0.375rem 0.5rem}input.ix-form-control.disabled,input.ix-form-control:disabled{color:var(--theme-input--color--disabled)}input.ix-form-control:-moz-read-only{cursor:default}input.ix-form-control:read-only,input.ix-form-control.readonly{cursor:default}:host{display:inline-flex;width:auto;height:2rem;align-items:center;justify-content:space-between;position:relative;}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}: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 .input-container{transition:all var(--theme-medium-time) ease-in-out}:host input{box-shadow:var(--theme-input--box-shadow);cursor:auto !important;width:100%}:host .expanded{width:11.5625rem}:host .expanded.fullWidth{width:100%}:host .collapsed{width:1.5rem;border:none}:host .btn-search-icon{align-self:center;margin:auto;position:relative}:host .btn-search{display:flex;max-width:2rem;max-height:2rem;border-radius:var(--theme-input--border-radius);transition:all var(--theme-default-time) ease-in-out;z-index:1;align-items:center;position:relative;border:none}:host .btn-search:not(.disabled):not(:disabled){cursor:pointer}:host .btn-search:not(.disabled):not(:disabled):hover{border-color:transparent}:host .btn-search:not(.disabled):not(:disabled){cursor:pointer}:host .btn-search:not(.disabled):not(:disabled):active,:host .btn-search:not(.disabled):not(:disabled).active{border-color:transparent}:host .btn-search:not(.disabled):not(:disabled):focus-visible{outline:none}:host .btn-search:not(.disabled):not(:disabled):focus-visible{outline:var(--focus--border-color);outline-width:1px;outline-style:solid}:host .btn-search.btn-search--expanded{margin-left:0.25rem;pointer-events:none}:host .btn-search:active{width:2rem;height:2rem;border-radius:var(--theme-input--border-radius);border:var(--theme-std-bdr-1) !important}:host .input-container{display:flex;position:absolute;align-items:center;flex-wrap:nowrap}:host .btn-clear{position:absolute;border-radius:var(--theme-input--border-radius);right:0px;margin-right:0.25rem}:host .input{padding-left:2rem !important;padding-right:2.5rem !important}:host .opacity-before{opacity:0}:host .opacity-after{opacity:1}:host(.right-position){width:11.5625rem !important}:host(.right-position.fullWidth){width:100% !important}:host(.right-position.fullWidth) .fullWidth{width:100% !important}";
+
+const ExpandingSearch = /*@__PURE__*/ proxyCustomElement(class ExpandingSearch extends H {
+    expandInput() {
+        setTimeout(this.focusTextInput, 300);
+        this.expanded = true;
+    }
+    collapseInput() {
+        if (!this.isFieldChanged && this.expanded) {
+            this.expanded = false;
+        }
+    }
+    clearInput() {
+        this.value = '';
+        this.isFieldChanged = false;
+    }
+    onChange(e) {
+        this.value = e.target.value;
+        if (this.isFieldChanged && this.value === '') {
+            this.isFieldChanged = false;
+        }
+        else {
+            this.isFieldChanged = true;
+        }
+        this.valueChange.emit(this.value);
+    }
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.valueChange = createEvent(this, "valueChange", 7);
+        /**
+         * Placeholder text
+         */
+        this.placeholder = 'Enter text here';
+        /**
+         * Default value
+         */
+        this.value = '';
+        /**
+         * If true the search field will fill all available horizontal space of it's parent container when expanded.
+         * @since 1.6.0
+         */
+        this.fullWidth = false;
+        /**
+         * button variant
+         */
+        this.variant = 'primary';
+        /**
+         * Outline button
+         */
+        this.outline = false;
+        /**
+         * Button with no background or outline
+         */
+        this.ghost = true;
+        this.isFieldChanged = false;
+        this.expanded = false;
+        this.hasFocus = false;
+        this.focusTextInput = this.focusTextInput.bind(this);
+    }
+    focusTextInput() {
+        var _a;
+        (_a = this.textInput) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    clearClicked() {
+        var _a;
+        this.clearInput();
+        (_a = this.textInput) === null || _a === void 0 ? void 0 : _a.focus();
+        this.valueChange.emit(this.value);
+    }
+    render() {
+        var _a;
+        return (h(Host, { key: '778a3f4cd73be2af611d384a6b47a0173e84aff5', class: {
+                expanded: this.expanded,
+                'right-position': this.expanded,
+                fullWidth: this.fullWidth,
+            } }, h("ix-icon-button", { key: '26ef39a4840c4b6eea417d42996de418b74a23f0', size: this.expanded ? '16' : '24', icon: (_a = this.icon) !== null && _a !== void 0 ? _a : iconSearch, variant: this.expanded ? 'primary' : this.variant, ghost: this.ghost || this.expanded, outline: this.outline && !this.expanded, "data-testid": "button", onClick: () => this.expandInput(), tabindex: this.expanded ? -1 : 0, color: this.hasFocus ? 'input-search-icon--color--focus' : undefined, class: {
+                'btn-search': true,
+                'btn-search--expanded': this.expanded,
+            } }), h("div", { key: '1d078e39c14d7bb5dd8db0a1f8f14eb60895068d', class: {
+                expanded: this.expanded,
+                fullWidth: this.fullWidth,
+                collapsed: !this.expanded,
+                'disable-pointer': !this.expanded,
+                'input-container': true,
+            }, "data-testid": "input-wrapper" }, h("input", { key: '0c4e3efbc2ef3c4b0682c58ec52fa3bc4c861589', class: {
+                'ix-form-control': true,
+                input: this.expanded,
+                'disable-pointer': !this.expanded,
+                'opacity-before': !this.expanded,
+                'opacity-after': this.expanded,
+            }, ref: (el) => (this.textInput = el), "data-testid": "input", placeholder: this.placeholder, type: "text", value: this.value, onBlur: () => {
+                this.collapseInput();
+                this.hasFocus = false;
+            }, onFocus: () => (this.hasFocus = true), onInput: (e) => this.onChange(e), tabindex: this.expanded ? 0 : -1 }), this.isFieldChanged ? (h("ix-icon-button", { class: "btn-clear", icon: iconClear, ghost: true, size: "16", "data-testid": "clear-button", onClick: () => this.clearClicked() })) : null)));
+    }
+    static get style() { return expandingSearchCss; }
+}, [1, "ix-expanding-search", {
+        "icon": [1],
+        "placeholder": [1],
+        "value": [1025],
+        "fullWidth": [4, "full-width"],
+        "variant": [1],
+        "outline": [4],
+        "ghost": [4],
+        "isFieldChanged": [32],
+        "expanded": [32],
+        "hasFocus": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ix-expanding-search", "ix-icon-button", "ix-spinner"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ix-expanding-search":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ExpandingSearch);
+            }
+            break;
+        case "ix-icon-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ix-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const IxExpandingSearch = ExpandingSearch;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxExpandingSearch, defineCustomElement };
+//# sourceMappingURL=ix-expanding-search.js.map
+
+//# sourceMappingURL=ix-expanding-search.js.map

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

@@ -0,0 +1 @@
+{"file":"ix-expanding-search.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"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 var(--theme-medium-time) 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 var(--theme-default-time) 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 { iconClear, iconSearch } from '@siemens/ix-icons/icons';\nimport {\n  Component,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { ButtonVariant } from '../button/button';\nimport { IxButtonComponent } from '../button/button-component';\n\n@Component({\n  tag: 'ix-expanding-search',\n  styleUrl: 'expanding-search.scss',\n  shadow: true,\n})\nexport class ExpandingSearch\n  implements Omit<IxButtonComponent, 'type' | 'icon' | 'disabled' | 'loading'>\n{\n  /**\n   * Search icon\n   */\n  @Prop() icon?: string;\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  /**\n   * button variant\n   */\n  @Prop() variant: ButtonVariant = 'primary';\n\n  /**\n   * Outline button\n   */\n  @Prop() outline = false;\n\n  /**\n   * Button with no background or outline\n   */\n  @Prop() ghost = true;\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 ?? iconSearch}\n          variant={this.expanded ? 'primary' : this.variant}\n          ghost={this.ghost || this.expanded}\n          outline={this.outline && !this.expanded}\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              'ix-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={iconClear}\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/components/ix-field-label.d.ts

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

package/components/ix-field-label.js

@@ -0,0 +1,9 @@
+import { F as FormFieldLabel, d as defineCustomElement$1 } from './p-BcWYFLel.js';
+
+const IxFieldLabel = FormFieldLabel;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxFieldLabel, defineCustomElement };
+//# sourceMappingURL=ix-field-label.js.map
+
+//# sourceMappingURL=ix-field-label.js.map

package/components/ix-field-label.js.map

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

package/components/ix-field-wrapper.d.ts

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

package/components/ix-field-wrapper.js

@@ -0,0 +1,9 @@
+import { F as FieldWrapper, d as defineCustomElement$1 } from './p-CAVJJh8O.js';
+
+const IxFieldWrapper = FieldWrapper;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxFieldWrapper, defineCustomElement };
+//# sourceMappingURL=ix-field-wrapper.js.map
+
+//# sourceMappingURL=ix-field-wrapper.js.map

package/components/ix-field-wrapper.js.map

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

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

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/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/components/ix-filter-chip.js

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

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

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

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

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/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/components/ix-flip-tile-content.js

@@ -0,0 +1,44 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-CtTl3_AV.js';
+
+const flipTileContentCss = ":host{display:block}";
+
+const FlipTileContent = /*@__PURE__*/ proxyCustomElement(class FlipTileContent extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /**
+         * Controls the visibility of the content
+         *
+         * @internal
+         */
+        this.contentVisible = false;
+    }
+    render() {
+        return h(Host, { key: '33ad76bf60ec2b3072cc6e0e89365e02071f1d9e' }, 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
+
+//# sourceMappingURL=ix-flip-tile-content.js.map

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

@@ -0,0 +1 @@
+{"file":"ix-flip-tile-content.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,sBAAsB;;MCepC,eAAe,iBAAAA,kBAAA,CAAA,MAAA,eAAA,SAAAC,CAAA,CAAA;AAL5B,IAAA,WAAA,GAAA;;;;AAME;;;;AAIG;AACK,QAAA,IAAc,CAAA,cAAA,GAAG,KAAK;AAK/B;IAHC,MAAM,GAAA;QACJ,OAAO,CAAC,CAAA,IAAI,EAAE,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,IAAI,CAAC,cAAc,GAAG,eAAa,GAAG,IAAI,CAAQ;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"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/components/ix-flip-tile.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/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/components/ix-flip-tile.js

@@ -0,0 +1,155 @@
+import { p as proxyCustomElement, H, e as createEvent, h, d as Host } from './p-CtTl3_AV.js';
+import { c as createMutationObserver } from './p-CX81WQtk.js';
+import { F as FlipTileState } from './p-BQ6999e5.js';
+import { y as iconEye } from './p-Dn_WjwtW.js';
+import { d as defineCustomElement$3 } from './p-CA8lgT01.js';
+import { d as defineCustomElement$2 } from './p-DcqQbhTb.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}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}: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 H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.toggle = createEvent(this, "toggle", 7);
+        /**
+         * Height interpreted as REM
+         * @since 1.5.0
+         */
+        this.height = 15.125;
+        /**
+         * Width interpreted as REM
+         * @since 1.5.0
+         */
+        this.width = 16;
+        /**
+         * Index of the currently visible content
+         * @since 3.0.0
+         */
+        this.index = 0;
+        this.isFlipAnimationActive = false;
+        this.ANIMATION_DURATION = 150;
+        this.contentItems = [];
+    }
+    watchIndex(newIndex, oldIndex) {
+        if (newIndex === oldIndex) {
+            return;
+        }
+        this.doFlipAnimation(newIndex);
+    }
+    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() {
+        let newIndex;
+        if (this.index >= this.contentItems.length - 1) {
+            newIndex = 0;
+        }
+        else {
+            newIndex = this.index + 1;
+        }
+        const { defaultPrevented } = this.toggle.emit(newIndex);
+        if (defaultPrevented) {
+            return;
+        }
+        this.doFlipAnimation(newIndex);
+    }
+    doFlipAnimation(index) {
+        if (this.isFlipAnimationActive) {
+            return;
+        }
+        this.isFlipAnimationActive = true;
+        setTimeout(() => {
+            this.index = index;
+            this.updateContentVisibility(this.index);
+        }, this.ANIMATION_DURATION);
+        setTimeout(() => {
+            this.isFlipAnimationActive = false;
+        }, 2 * this.ANIMATION_DURATION);
+    }
+    render() {
+        return (h(Host, { key: '56ac52c0846a09ebbabe445a7b472d8163249d0f', 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", { key: '63bd41182f32389d24f06a65934fa1fdf613814e', 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", { key: 'b14e594b79d762dc1e1861f053fca55527205099', class: "flip-tile-header" }, h("div", { key: '71294a8041516ded7a7e22be40b779d242958db8', class: "header-slot-container text-l-title" }, h("slot", { key: '015f97f7f35ed25d0c808457a8d1a5b1055d0f3e', name: "header" })), h("ix-icon-button", { key: '4ada116aa7ad0ae8b1499b7a3c142eaee3f8320e', icon: iconEye, variant: "primary", ghost: true, onClick: () => this.toggleIndex() })), h("div", { key: '0c30a20df8eff93c9433fad1a157311d185e342f', class: "content-container" }, h("slot", { key: '471ebb3a8619bdb35d4db4c7c6f63065d446116a' })), h("div", { key: '4c4a45e81c365670d4b7f1d7cbb4838778dd96c3', class: {
+                footer: true,
+                'contrast-light': this.state === FlipTileState.Warning,
+                'contrast-dark': this.state === FlipTileState.Info ||
+                    this.state === FlipTileState.Alarm,
+            } }, h("slot", { key: '39be6dc2a46af588318fe63beceae81dfafc0eec', name: "footer" })))));
+    }
+    get hostElement() { return this; }
+    static get watchers() { return {
+        "index": ["watchIndex"]
+    }; }
+    static get style() { return flipTileCss; }
+}, [1, "ix-flip-tile", {
+        "state": [1],
+        "height": [8],
+        "width": [8],
+        "index": [2],
+        "isFlipAnimationActive": [32]
+    }, undefined, {
+        "index": ["watchIndex"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ix-flip-tile", "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-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
+
+//# sourceMappingURL=ix-flip-tile.js.map

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

@@ -0,0 +1 @@
+{"file":"ix-flip-tile.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"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 {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { FlipTileState } from './flip-tile-state';\nimport { iconEye } from '@siemens/ix-icons/icons';\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  /**\n   * Index of the currently visible content\n   * @since 3.0.0\n   */\n  @Prop() index = 0;\n\n  /**\n   * Event emitted when the index changes\n   * @since 3.0.0\n   */\n  @Event() toggle!: EventEmitter<number>;\n\n  @State() isFlipAnimationActive: boolean = false;\n\n  private readonly ANIMATION_DURATION = 150;\n  private contentItems: Array<HTMLIxFlipTileContentElement> = [];\n  private observer?: MutationObserver;\n\n  @Watch('index')\n  watchIndex(newIndex: number, oldIndex: number) {\n    if (newIndex === oldIndex) {\n      return;\n    }\n\n    this.doFlipAnimation(newIndex);\n  }\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    let newIndex;\n\n    if (this.index >= this.contentItems.length - 1) {\n      newIndex = 0;\n    } else {\n      newIndex = this.index + 1;\n    }\n\n    const { defaultPrevented } = this.toggle.emit(newIndex);\n\n    if (defaultPrevented) {\n      return;\n    }\n\n    this.doFlipAnimation(newIndex);\n  }\n\n  private doFlipAnimation(index: number) {\n    if (this.isFlipAnimationActive) {\n      return;\n    }\n\n    this.isFlipAnimationActive = true;\n\n    setTimeout(() => {\n      this.index = index;\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={iconEye}\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/components/ix-group-context-menu.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/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/components/ix-group-context-menu.js

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

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

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

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

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/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/components/ix-group-item.js

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

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

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

package/components/ix-group.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/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;