@siemens/ix 4.4.0 → 5.1.0

package/dist/collection/components/field-wrapper/field-wrapper.js

@@ -6,37 +6,135 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { Host, h } from "@stencil/core";
+import { Host, Mixin, h, } from "@stencil/core";
 import { makeRef } from "../utils/make-ref";
-import { hasAnyText, HelperText } from "./helper-text-util";
+import { hasAnyText, HelperText, resolveTextFromValidationState, } from "./helper-text-util";
+import { DefaultMixins } from "../utils/internal/component";
+import { ComponentIdMixin, } from "../utils/internal/mixins/id.mixin";
 /** @internal */
-export class FieldWrapper {
+export class FieldWrapper extends Mixin(...DefaultMixins, ComponentIdMixin) {
     constructor() {
-        /**
-         * Is the field component invalid
-         */
-        this.isInvalid = false;
-        /**
-         * Is the field component valid
-         */
-        this.isValid = false;
-        /**
-         * Is the field component info
-         */
-        this.isInfo = false;
-        /**
-         * Is the field component warning
-         */
-        this.isWarning = false;
-        /**
-         * Show helper, error, info, warning text as tooltip
-         */
-        this.showTextAsTooltip = false;
-        /**
-         * Show label as required
-         */
-        this.required = false;
-        this.slotRef = makeRef();
+        super();
+    }
+    hostElement;
+    /**
+     * Show text below the field component
+     */
+    helperText;
+    /**
+     * Label for the field component
+     */
+    label;
+    /**
+     * Error text for the field component
+     */
+    invalidText;
+    /**
+     * Valid text for the field component
+     */
+    validText;
+    /**
+     * Info text for the field component
+     */
+    infoText;
+    /**
+     * Warning text for the field component
+     */
+    warningText;
+    /**
+     * Is the field component invalid
+     */
+    isInvalid = false;
+    /**
+     * Is the field component valid
+     */
+    isValid = false;
+    /**
+     * Is the field component info
+     */
+    isInfo = false;
+    /**
+     * Is the field component warning
+     */
+    isWarning = false;
+    /**
+     * Show helper, error, info, warning text as tooltip
+     */
+    showTextAsTooltip = false;
+    /**
+     * Show label as required
+     */
+    required = false;
+    /**
+     * The control element that the label is associated with
+     */
+    controlRef;
+    slotRef = makeRef();
+    hasExplicitAriaLabel = false;
+    componentDidLoad() {
+        this.syncAriaLabel(true);
+    }
+    syncAriaLabel(initialSync = false) {
+        if (!this.controlRef || this.hasExplicitAriaLabel) {
+            return;
+        }
+        this.controlRef.waitForCurrent().then((el) => {
+            if (initialSync &&
+                (el.hasAttribute('aria-label') || el.hasAttribute('aria-labelledby'))) {
+                this.hasExplicitAriaLabel = true;
+                return;
+            }
+            if (this.label) {
+                el.setAttribute('aria-label', this.label);
+            }
+            else {
+                el.removeAttribute('aria-label');
+            }
+        });
+    }
+    componentWillLoad() {
+        if (!this.hostElement.querySelector('.error-message-container')) {
+            const errorMessageContainer = document.createElement('span');
+            errorMessageContainer.classList.add('error-message-container');
+            errorMessageContainer.id = `${this.getHostElementId()}-errormessage`;
+            errorMessageContainer.hidden = true;
+            this.hostElement.appendChild(errorMessageContainer);
+        }
+        if (!this.hostElement.querySelector('.helper-message-container')) {
+            const helperMessageContainer = document.createElement('span');
+            helperMessageContainer.classList.add('helper-message-container');
+            helperMessageContainer.id = `${this.getHostElementId()}-helpermessage`;
+            helperMessageContainer.hidden = true;
+            this.hostElement.appendChild(helperMessageContainer);
+        }
+    }
+    componentWillRender() {
+        const errorMessageElement = this.hostElement.querySelector(`#${this.getHostElementId()}-errormessage`);
+        const helperMessageElement = this.hostElement.querySelector(`#${this.getHostElementId()}-helpermessage`);
+        if (this.isInvalid && this.invalidText && errorMessageElement) {
+            errorMessageElement.textContent = this.invalidText;
+        }
+        if (helperMessageElement) {
+            helperMessageElement.textContent = resolveTextFromValidationState({
+                isInvalid: this.isInvalid,
+                invalidText: this.invalidText,
+                isWarning: this.isWarning,
+                warningText: this.warningText,
+                isInfo: this.isInfo,
+                infoText: this.infoText,
+                isValid: this.isValid,
+                validText: this.validText,
+                helperText: this.helperText,
+            });
+        }
+    }
+    /** @internal */
+    getAriaErrorMessageElement() {
+        return Promise.resolve(this.hostElement.querySelector(`#${this.getHostElementId()}-errormessage`));
+    }
+    /** @internal */
+    getAriaHelperMessageElement() {
+        return Promise.resolve(this.hostElement.querySelector(`#${this.getHostElementId()}-helpermessage`));
     }
     render() {
         const textOptions = {
@@ -50,9 +148,16 @@ export class FieldWrapper {
             infoText: this.infoText,
             helperText: this.helperText,
         };
-        return (h(Host, { key: '531b08942bf31c36043fb3d7cd3af489f2fe83b0' }, this.label && (h("div", { key: '49b9ef124fc2d69fb2528585d7b232b2e3d6d4b6', class: "field-top" }, h("ix-field-label", { key: '20a089a72de7ee3045c048c19d868ff3b4be2706', required: this.required, htmlFor: this.htmlForLabel, controlRef: this.controlRef, isInvalid: this.isInvalid }, this.label))), h("div", { key: '80c8ce58eb73379755757b2cef6b318cdc279b6b', class: {
+        let additionalAriaAttributes = {};
+        if (this.isInvalid && this.invalidText) {
+            additionalAriaAttributes = {
+                role: 'alert',
+                'aria-live': 'polite',
+            };
+        }
+        return (h(Host, { key: '25255aed5f9b7fb77fdeb61473bf2b75a262ffba', ...additionalAriaAttributes }, this.label && (h("div", { key: 'bb885771ecfcf509a62bbe6f7ba1a7d518f17c78', class: "field-top" }, h("ix-field-label", { key: '916a96ca521dd4e9dd7f55e9f3bd19cc947ba123', required: this.required, controlRef: this.controlRef, isInvalid: this.isInvalid, ariaHidden: true }, this.label))), h("div", { key: 'ce2d746aea87f49611ef413f49fbb52c59ab468a', class: {
                 'slot-wrapper': true,
-            }, ref: this.slotRef }, h("slot", { key: 'f41f0681742e9f783092bad7484c851e2b987c99' })), h("div", { key: '9db46e23621d508e08fe87cae69a3698491347dc', class: 'field-bottom' }, !this.showTextAsTooltip && h(HelperText, Object.assign({ key: '29802c92675a34cd215740a5df6fae77ed36368f' }, textOptions)), h("div", { key: 'b94a1cc2acd5f8379e768fda9f222af6cb85f2b7', class: "bottom-right" }, h("slot", { key: '3c5ba2d9a6d4671b6fadba6e06455ae229894f94', name: "bottom-right" }))), this.showTextAsTooltip === true && hasAnyText(textOptions) && (h("ix-tooltip", { key: '890c4a39781fbb14b96660691fd6f6fe96a30e0b', for: this.slotRef.waitForCurrent(), showDelay: 500, placement: "bottom" }, h(HelperText, Object.assign({ key: '638410fd78282cf38065635a79cceeb064a2a10e' }, textOptions))))));
+            }, ref: this.slotRef }, h("slot", { key: '2bb54f35cc1ff930918dc211e2018875ce105d7b' })), h("div", { key: 'c427f40269dd19c40c413d0794cbf0096a7f8cd1', class: 'field-bottom' }, !this.showTextAsTooltip && h(HelperText, { key: '76100d6cd0e6c22eeca8de06b7aa7ae59ab9ea33', ...textOptions }), h("div", { key: 'b9d5688b85687792c491d8cecd9411dbb5bddb0e', class: "bottom-right" }, h("slot", { key: '95102f11d6b5c82d67be1c7c104eadf56bcb8112', name: "bottom-right" }))), this.showTextAsTooltip === true && hasAnyText(textOptions) && (h("ix-tooltip", { key: 'c484b0edcd735b2d9155819ad9eb8d98c45e2633', for: this.slotRef.waitForCurrent(), showDelay: 500, placement: "bottom" }, h(HelperText, { key: '7d0ea7c1cd80af012492984d7ad2b5399ee50c4d', ...textOptions })))));
     }
     static get is() { return "ix-field-wrapper"; }
     static get encapsulation() { return "shadow"; }
@@ -302,25 +407,6 @@ export class FieldWrapper {
                 "attribute": "required",
                 "defaultValue": "false"
             },
-            "htmlForLabel": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The id of the form element that the label is associated with"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "html-for-label"
-            },
             "controlRef": {
                 "type": "unknown",
                 "mutable": false,
@@ -359,5 +445,63 @@ export class FieldWrapper {
             }
         };
     }
+    static get methods() {
+        return {
+            "getAriaErrorMessageElement": {
+                "complexType": {
+                    "signature": "() => Promise<HTMLElement | null>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    },
+                    "return": "Promise<HTMLElement | null>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }]
+                }
+            },
+            "getAriaHelperMessageElement": {
+                "complexType": {
+                    "signature": "() => Promise<HTMLElement | null>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    },
+                    "return": "Promise<HTMLElement | null>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }]
+                }
+            }
+        };
+    }
     static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "label",
+                "methodName": "syncAriaLabel"
+            }];
+    }
 }

package/dist/collection/components/field-wrapper/helper-text-util.js

@@ -10,11 +10,28 @@ import { h } from "@stencil/core";
 import { iconError, iconInfo, iconSuccess, iconWarning, } from "@siemens/ix-icons/icons";
 import { a11yBoolean } from "../utils/a11y";
 export function hasAnyText({ invalidText, isInvalid, warningText, isWarning, infoText, isInfo, validText, isValid, helperText, }) {
-    return !!((isInvalid && (invalidText === null || invalidText === void 0 ? void 0 : invalidText.trim())) ||
-        (isWarning && (warningText === null || warningText === void 0 ? void 0 : warningText.trim())) ||
-        (isInfo && (infoText === null || infoText === void 0 ? void 0 : infoText.trim())) ||
-        (isValid && (validText === null || validText === void 0 ? void 0 : validText.trim())) ||
-        (helperText === null || helperText === void 0 ? void 0 : helperText.trim()));
+    return !!((isInvalid && invalidText?.trim()) ||
+        (isWarning && warningText?.trim()) ||
+        (isInfo && infoText?.trim()) ||
+        (isValid && validText?.trim()) ||
+        helperText?.trim());
+}
+export function resolveTextFromValidationState(props) {
+    if (!hasAnyText(props))
+        return '';
+    if (props.isInvalid && props.invalidText && props.invalidText.trim() !== '') {
+        return props.invalidText;
+    }
+    if (props.isWarning && props.warningText && props.warningText.trim() !== '') {
+        return props.warningText;
+    }
+    if (props.isInfo && props.infoText && props.infoText.trim() !== '') {
+        return props.infoText;
+    }
+    if (props.isValid && props.validText && props.validText.trim() !== '') {
+        return props.validText;
+    }
+    return props.helperText || '';
 }
 export function HelperText(props) {
     if (!hasAnyText(props))

package/dist/collection/components/filter-chip/filter-chip.css

@@ -112,6 +112,7 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   line-height: 1.5rem;
+  min-width: 0;
 }
 :host .slot-container :host-context(.disabled) {
   background-color: var(--theme-color-ghost);
@@ -133,7 +134,8 @@
   cursor: default;
 }
 
-:host(.readonly) {
+:host(.readonly),
+:host(.hide-close-button) {
   padding-right: 0.5rem;
 }
 
@@ -155,9 +157,4 @@
   background-color: var(--theme-color-ghost-primary--active);
   border-color: var(--theme-chip-primary-outline--border-color--active);
   color: var(--theme-chip-primary-outline--color--active);
-}
-
-:host(:focus-visible:not(.disabled):not(:disabled)) {
-  outline: var(--theme-color-focus-bdr) solid var(--theme-focus--border-thickness);
-  outline-offset: -0.125rem;
 }

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

@@ -9,23 +9,55 @@
 import { iconCloseSmall } from "@siemens/ix-icons/icons";
 import { h, Host, } from "@stencil/core";
 export class FilterChip {
-    constructor() {
-        /**
-         * If true the filter chip will be in disabled state
-         */
-        this.disabled = false;
-        /**
-         * If true the filter chip will be in readonly mode
-         */
-        this.readonly = false;
-    }
+    hostElement;
+    /**
+     * If true the filter chip will be in disabled state
+     */
+    disabled = false;
+    /**
+     * If true the filter chip will be in readonly mode
+     */
+    readonly = false;
+    /**
+     * If true the close button will not be rendered.
+     * Primarily used for overflow chip.
+     *
+     */
+    hideCloseButton = false;
+    /**
+     * ARIA label for the close icon button
+     * Will be set as aria-label on the nested HTML button element
+     */
+    ariaLabelCloseIconButton;
+    /**
+     * Close clicked
+     */
+    closeClick;
     onCloseClick(event) {
         event.preventDefault();
         event.stopPropagation();
         this.closeClick.emit();
     }
     render() {
-        return (h(Host, { key: 'e583d14307f98b55f1ff4be4b9c3897776eaae75', class: { disabled: this.disabled, readonly: this.readonly }, title: this.hostElement.textContent }, h("div", { key: '998751b62b8266368176fe1186a6dd2f311199be', class: "slot-container" }, h("slot", { key: '2861044a08d5b237444cda5bb5fafe0bc0c97790' })), !this.disabled && !this.readonly ? (h("ix-icon-button", { variant: "tertiary", oval: true, icon: iconCloseSmall, size: "16", tabindex: this.disabled ? -1 : 0, disabled: this.disabled, onClick: (e) => this.onCloseClick(e), "aria-label": this.ariaLabelCloseIconButton })) : null));
+        return (h(Host, { key: '886715c810d5084905082b8eba5d0e62dabe8b32', class: {
+                disabled: this.disabled,
+                readonly: this.readonly,
+                'hide-close-button': this.hideCloseButton,
+            }, title: this.hostElement.textContent }, h("div", { key: '531598188ad4a407b9b8c153dcfa9fd7260218c9', class: "slot-container" }, h("slot", { key: '530355ee81b106b9182a62fc8e3432420c0a6fd1' })), !this.disabled && !this.readonly && !this.hideCloseButton ? (h("ix-icon-button", { variant: "tertiary", oval: true, icon: iconCloseSmall, size: "16", disabled: this.disabled, onClick: (event) => {
+                this.onCloseClick(event);
+            }, onKeyDown: (event) => {
+                switch (event.key) {
+                    case 'Enter':
+                    case ' ':
+                        this.onCloseClick(event);
+                        break;
+                    case 'Tab':
+                        break;
+                    default:
+                        event.preventDefault();
+                        event.stopPropagation();
+                }
+            }, "aria-label": this.ariaLabelCloseIconButton })) : null));
     }
     static get is() { return "ix-filter-chip"; }
     static get encapsulation() { return "shadow"; }
@@ -81,6 +113,26 @@ export class FilterChip {
                 "attribute": "readonly",
                 "defaultValue": "false"
             },
+            "hideCloseButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true the close button will not be rendered.\nPrimarily used for overflow chip."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-close-button",
+                "defaultValue": "false"
+            },
             "ariaLabelCloseIconButton": {
                 "type": "string",
                 "mutable": false,

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

@@ -13,30 +13,42 @@ import Animation from "../utils/animation";
 import { createMutationObserver } from "../utils/mutation-observer";
 import { hasSlottedElements } from "../utils/shadow-dom";
 export class FlipTile {
-    constructor() {
-        /**
-         * Variation of the Flip
-         *
-         * @since 4.0.0
-         */
-        this.variant = 'filled';
-        /**
-         * Height interpreted as REM
-         */
-        this.height = 15.125;
-        /**
-         * Width interpreted as REM
-         */
-        this.width = 16;
-        /**
-         * Index of the currently visible content
-         * @since 3.0.0
-         */
-        this.index = 0;
-        this.isFlipAnimationActive = false;
-        this.hasFooterSlot = false;
-        this.contentItems = [];
-    }
+    hostElement;
+    /**
+     * Variation of the Flip
+     *
+     * @since 4.0.0
+     */
+    variant = 'filled';
+    /**
+     * Height interpreted as REM
+     */
+    height = 15.125;
+    /**
+     * Width interpreted as REM
+     */
+    width = 16;
+    /**
+     * Index of the currently visible content
+     * @since 3.0.0
+     */
+    index = 0;
+    /**
+     * ARIA label for the eye icon button
+     * Will be set as aria-label on the nested HTML button element
+     *
+     * @since 3.2.0
+     */
+    ariaLabelEyeIconButton;
+    /**
+     * Event emitted when the index changes
+     * @since 3.0.0
+     */
+    toggle;
+    isFlipAnimationActive = false;
+    hasFooterSlot = false;
+    contentItems = [];
+    observer;
     watchIndex(newIndex, oldIndex) {
         if (newIndex === oldIndex) {
             return;
@@ -117,7 +129,7 @@ export class FlipTile {
         }, 2 * Animation.defaultTime);
     }
     render() {
-        return (h(Host, { key: 'a54038f2dbaeffac796822404e2d186c742a5357', class: {
+        return (h(Host, { key: '98de348c3952a6ae9cf13fb4fe1dc515ad6b0504', class: {
                 [`flip-tile-variant-${this.variant}`]: true,
             }, style: {
                 height: `${this.height}${this.height === 'auto' ? '' : 'rem'}`,
@@ -126,10 +138,10 @@ export class FlipTile {
                 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: '0bf12231b1cdeb0afe41d9d45c06fdef4cdedaf4', class: "flip-tile-container" }, h("div", { key: '3e9da89ed0b9cf7595e4c1d317d21ed1b55aa9d7', class: "flip-tile-header" }, h("div", { key: 'd4e7cc2a8162254ea3c7c4a0a031346b7a35e3d9', class: "header-slot-container text-l-title" }, h("slot", { key: 'dd9e2244a75179ceb4ac9647b403a5e2b01fd2ae', name: "header" })), h("ix-icon-button", { key: '74a5abdba3bf0c90222fc7bf7064742c0ea85b80', icon: iconEye, variant: "tertiary", onClick: () => this.toggleIndex(), "aria-label": this.ariaLabelEyeIconButton })), h("div", { key: '636884dbf0b0143e4f30061cd6e0472c83fe698a', class: "content-container" }, h("slot", { key: 'b94b3a488e7a137b06505290ab351724c5f01fca' })), h("div", { key: 'a15153c86848df2dd14b1423c686b9655d6fcdc1', class: {
+            } }, h("div", { key: '7ae391851db6469b7821137851ac0c49056779bf', class: "flip-tile-container" }, h("div", { key: '573dd82522af32eb4775a7f4d0cdec162f03d14b', class: "flip-tile-header" }, h("div", { key: 'd5cc22f464ec436bdfb52861d05035759f91c37c', class: "header-slot-container text-l-title" }, h("slot", { key: '54037b21d669285e02b5a7b0d2e112fb6bf84f3e', name: "header" })), h("ix-icon-button", { key: '9360ba83ed398c0409b04a5e9777d6d83f2f0655', icon: iconEye, variant: "tertiary", onClick: () => this.toggleIndex(), "aria-label": this.ariaLabelEyeIconButton })), h("div", { key: '4a2b1fcb2849622f91b4d29132c62160975be619', class: "content-container" }, h("slot", { key: 'c239f64f477e7fe17e1f9747031185b073481697' })), h("div", { key: '6ef464693fc873180707a93d886f34710624e32f', class: {
                 footer: true,
                 'show-footer': this.hasFooterSlot,
-            } }, h("slot", { key: '68d0585ff19d8a29fc8ccfdb2ec6302f767e3a94', name: "footer", onSlotchange: (event) => this.handleFooterSlotChange(event) })))));
+            } }, h("slot", { key: '501d0bf61543a291236d9e7983f541aeb980a8ae', name: "footer", onSlotchange: (event) => this.handleFooterSlotChange(event) })))));
     }
     static get is() { return "ix-flip-tile"; }
     static get encapsulation() { return "shadow"; }

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

@@ -8,16 +8,14 @@
  */
 import { h, Host } from "@stencil/core";
 export class FlipTileContent {
-    constructor() {
-        /**
-         * Controls the visibility of the content
-         *
-         * @internal
-         */
-        this.contentVisible = false;
-    }
+    /**
+     * Controls the visibility of the content
+     *
+     * @internal
+     */
+    contentVisible = false;
     render() {
-        return h(Host, { key: '002fbfde1a46839d622af7fb2be6dff5ca99aa87' }, this.contentVisible ? h("slot", null) : null);
+        return h(Host, { key: 'c080d25f839e6f4af482ff701ce74df53ac66b7a' }, this.contentVisible ? h("slot", null) : null);
     }
     static get is() { return "ix-flip-tile-content"; }
     static get encapsulation() { return "shadow"; }

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

@@ -10,9 +10,8 @@ import { h, Host } from "@stencil/core";
 import { getSlottedElements } from "../utils/shadow-dom";
 import { iconContextMenu } from "@siemens/ix-icons/icons";
 export class GroupContextMenu {
-    constructor() {
-        this.showContextMenu = false;
-    }
+    hostElement;
+    showContextMenu = false;
     getTrigger() {
         return this.hostElement;
     }
@@ -38,7 +37,7 @@ export class GroupContextMenu {
         this.configureDropdown(dropdownElement, triggerElement);
     }
     render() {
-        return (h(Host, { key: 'd3b00dddd05f3ac944f61b8a4098883dffe2acc2' }, h("ix-icon-button", { key: '0d427b8b754020e83b4aa03686a9fea1d8fbffc0', class: { hide: !this.showContextMenu }, size: "24", variant: "subtle-tertiary", icon: iconContextMenu }), h("slot", { key: 'baef7854222010ff76fc784c50804e4f343eafc3', onSlotchange: () => this.onSlotChange() })));
+        return (h(Host, { key: '989f86b83f27514bcb555c8d022b092a1a632505' }, h("ix-icon-button", { key: '55876dc92e513d29676529ea431d3ae9768e72fc', class: { hide: !this.showContextMenu }, size: "24", variant: "subtle-tertiary", icon: iconContextMenu }), h("slot", { key: '57613b3108ad01c134ae929fe00f432ffd2c8324', onSlotchange: () => this.onSlotChange() })));
     }
     static get is() { return "ix-group-context-menu"; }
     static get encapsulation() { return "shadow"; }