@siemens/ix 4.4.0 → 5.1.0

package/dist/collection/components/blind/blind.css

@@ -247,6 +247,9 @@
 :host(.blind-alarm) .blind-header-title-sublabel {
   color: var(--theme-color-alarm--contrast);
 }
+:host(.blind-alarm) .header-actions {
+  --ix-icon-button-color: var(--theme-color-alarm--contrast);
+}
 :host(.blind-alarm) {
   background-color: var(--theme-blind-base--background);
 }
@@ -270,6 +273,9 @@
 :host(.blind-critical) .blind-header-title-sublabel {
   color: var(--theme-color-critical--contrast);
 }
+:host(.blind-critical) .header-actions {
+  --ix-icon-button-color: var(--theme-color-critical--contrast);
+}
 :host(.blind-critical) {
   background-color: var(--theme-blind-base--background);
 }
@@ -293,6 +299,9 @@
 :host(.blind-info) .blind-header-title-sublabel {
   color: var(--theme-color-info--contrast);
 }
+:host(.blind-info) .header-actions {
+  --ix-icon-button-color: var(--theme-color-info--contrast);
+}
 :host(.blind-info) {
   background-color: var(--theme-blind-base--background);
 }
@@ -316,6 +325,9 @@
 :host(.blind-neutral) .blind-header-title-sublabel {
   color: var(--theme-color-neutral--contrast);
 }
+:host(.blind-neutral) .header-actions {
+  --ix-icon-button-color: var(--theme-color-neutral--contrast);
+}
 :host(.blind-neutral) {
   background-color: var(--theme-blind-base--background);
 }
@@ -335,6 +347,9 @@
 :host(.blind-filled) .blind-header-title-sublabel {
   color: var(--theme-color-soft-text);
 }
+:host(.blind-filled) .header-actions {
+  --ix-icon-button-color: var(--theme-color-primary);
+}
 :host(.blind-filled) {
   background-color: var(--theme-blind-base--background);
 }
@@ -358,6 +373,9 @@
 :host(.blind-success) .blind-header-title-sublabel {
   color: var(--theme-color-success--contrast);
 }
+:host(.blind-success) .header-actions {
+  --ix-icon-button-color: var(--theme-color-success--contrast);
+}
 :host(.blind-success) {
   background-color: var(--theme-blind-base--background);
 }
@@ -381,6 +399,9 @@
 :host(.blind-warning) .blind-header-title-sublabel {
   color: var(--theme-color-warning--contrast);
 }
+:host(.blind-warning) .header-actions {
+  --ix-icon-button-color: var(--theme-color-warning--contrast);
+}
 :host(.blind-warning) {
   background-color: var(--theme-blind-base--background);
 }
@@ -404,6 +425,9 @@
 :host(.blind-primary) .blind-header-title-sublabel {
   color: var(--theme-color-primary--contrast);
 }
+:host(.blind-primary) .header-actions {
+  --ix-icon-button-color: var(--theme-color-primary--contrast);
+}
 :host(.blind-primary) {
   background-color: var(--theme-blind-base--background);
 }
@@ -426,6 +450,9 @@
 :host(.blind-outline) .blind-header-title-sublabel {
   color: var(--theme-color-soft-text);
 }
+:host(.blind-outline) .header-actions {
+  --ix-icon-button-color: var(--theme-color-primary);
+}
 :host(.blind-outline) {
   border-color: var(--theme-color-soft-bdr);
 }

package/dist/collection/components/blind/blind.js

@@ -13,17 +13,34 @@ import { iconChevronDownSmall } from "@siemens/ix-icons/icons";
 import Animation from "../utils/animation";
 let sequentialInstanceId = 0;
 export class Blind {
-    constructor() {
-        /**
-         * Collapsed state
-         */
-        this.collapsed = false;
-        /**
-         * Blind variant
-         */
-        this.variant = 'filled';
-        this.blindId = ++sequentialInstanceId;
-    }
+    /**
+     * Collapsed state
+     */
+    collapsed = false;
+    /**
+     * Label of blind
+     */
+    label;
+    /**
+     * Secondary label inside blind header
+     */
+    sublabel;
+    /**
+     * Optional icon to be displayed next to the header label
+     */
+    icon;
+    /**
+     * Blind variant
+     */
+    variant = 'filled';
+    /**
+     * Collapsed state changed
+     */
+    collapsedChange;
+    hostElement;
+    chevronRef;
+    blindId = ++sequentialInstanceId;
+    constructor() { }
     onHeaderClick() {
         this.collapsed = !this.collapsed;
         this.collapsedChange.emit(this.collapsed);
@@ -70,17 +87,17 @@ export class Blind {
         });
     }
     render() {
-        return (h(Host, { key: '671ad2c0686ea67b8dd5a3b6259edd8cd2667b19', class: {
+        return (h(Host, { key: '013b57ee3c249c67c3ec35bc94924b08a0828723', class: {
                 [`blind-${this.variant}`]: true,
-            } }, h("div", { key: '40fa7a9d37b674e2979022aadc84a4496ea9a9f5', class: 'blind-header-wrapper' }, h("button", { key: '29c3e84c41ec924f2b3c5a373778130afa943626', class: {
+            } }, h("div", { key: 'a03bf76f5ff8628de0958f3f12ae69bfadf68010', class: 'blind-header-wrapper' }, h("button", { key: '48e9d20e1bce06e2b305b856e3c7ec52d882c197', class: {
                 'blind-header': true,
                 [`blind-${this.variant}`]: true,
                 closed: this.collapsed,
-            }, type: "button", "aria-labelledby": `ix-blind-header-title-${this.blindId}`, "aria-controls": `ix-blind-content-section-${this.blindId}`, "aria-expanded": a11yBoolean(!this.collapsed), onClick: () => this.onHeaderClick() }, h("slot", { key: 'b252b735380d02d028f14e7d9fbe4c5eba8c6602', name: "custom-header" })), h("div", { key: '6bf0d3c1465c63a94c8f022734ed826c4028855a', class: 'blind-header-content' }, h("ix-icon", { key: 'd21dd7db4cb813e4becce868c4dbe340a12b1e65', class: "collapse-icon", name: iconChevronDownSmall, color: this.variant === 'filled' || this.variant === 'outline'
+            }, type: "button", "aria-labelledby": `ix-blind-header-title-${this.blindId}`, "aria-controls": `ix-blind-content-section-${this.blindId}`, "aria-expanded": a11yBoolean(!this.collapsed), onClick: () => this.onHeaderClick() }, h("slot", { key: '127096b27d461351848650ce43de9016585f8ba2', name: "custom-header" })), h("div", { key: '30976417c051c06aebd99af776d06d8d12289e3a', class: 'blind-header-content' }, h("ix-icon", { key: '4ad41bafea4f5c85625897dd5ac53e8199c0c824', class: "collapse-icon", name: iconChevronDownSmall, color: this.variant === 'filled' || this.variant === 'outline'
                 ? 'color-std-text'
-                : `color-${this.variant}--contrast`, ref: (ref) => (this.chevronRef = ref) }), h("div", { key: 'da2e1435ca1070eed1794226ca721e7e3fb22390', class: "blind-header-title", id: `ix-blind-header-title-${this.blindId}` }, this.label !== undefined ? (h(Fragment, null, this.icon && (h("ix-icon", { class: "blind-header-title-icon", name: this.icon, color: this.variant === 'filled' || this.variant === 'outline'
+                : `color-${this.variant}--contrast`, ref: (ref) => (this.chevronRef = ref) }), h("div", { key: '5aaa92535b30579eecaf2d5af312fe03b7acd6bd', class: "blind-header-title", id: `ix-blind-header-title-${this.blindId}` }, this.label !== undefined ? (h(Fragment, null, this.icon && (h("ix-icon", { class: "blind-header-title-icon", name: this.icon, color: this.variant === 'filled' || this.variant === 'outline'
                 ? 'color-std-text'
-                : `color-${this.variant}--contrast` })), h("div", { class: 'blind-header-title-row' }, h("div", { class: "blind-header-title-col" }, h("ix-typography", { title: this.label, format: "label-lg", bold: true }, h("div", { class: "blind-header-title-label", title: this.label }, this.label))), this.sublabel && (h("div", { class: "blind-header-title-col" }, h("ix-typography", { title: this.sublabel }, h("div", { class: "blind-header-title-sublabel" }, this.sublabel))))), h("div", { class: "header-actions" }, h("slot", { name: "header-actions" })))) : null))), h("section", { key: '854dd19e82a63ccb31f090dadfbcfa46d7346d21', id: `ix-blind-content-section-${this.blindId}`, "aria-labelledby": `ix-blind-header-title-${this.blindId}` }, h("div", { key: '12f77fdbb29c89d5ab26877e9db8ad9ec79f1e6f', class: {
+                : `color-${this.variant}--contrast` })), h("div", { class: 'blind-header-title-row' }, h("div", { class: "blind-header-title-col" }, h("ix-typography", { title: this.label, format: "label-lg", bold: true }, h("div", { class: "blind-header-title-label", title: this.label }, this.label))), this.sublabel && (h("div", { class: "blind-header-title-col" }, h("ix-typography", { title: this.sublabel }, h("div", { class: "blind-header-title-sublabel" }, this.sublabel))))), h("div", { class: "header-actions" }, h("slot", { name: "header-actions" })))) : null))), h("section", { key: '10d8459ac5f41b8a09848e3182f68d641d369541', id: `ix-blind-content-section-${this.blindId}`, "aria-labelledby": `ix-blind-header-title-${this.blindId}` }, h("div", { key: 'f39a05f57e022918dd7cbce8454f9f0aa60d2a79', class: {
                 'blind-content': true,
                 hide: this.collapsed,
             } }, !this.collapsed ? h("slot", null) : null))));

package/dist/collection/components/breadcrumb/breadcrumb.css

@@ -55,7 +55,6 @@
   height: 2.5rem;
   align-items: center;
   background-color: transparent;
-  overflow: hidden;
 }
 :host *,
 :host *::after,
@@ -105,8 +104,9 @@
   display: none;
 }
 :host .previous-button {
-  width: 3rem;
+  width: auto;
   min-width: 0px;
+  margin-right: 0.25rem;
 }
 :host .crumb-dropdown {
   overflow: visible;
@@ -129,4 +129,9 @@
 :host ol,
 :host .crumb-items {
   display: contents;
+}
+:host .chevron {
+  margin-left: 0.5rem;
+  margin-right: 0rem;
+  color: var(--theme-color-soft-text);
 }

package/dist/collection/components/breadcrumb/breadcrumb.js

@@ -6,50 +6,62 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { forceUpdate, h, Host, } from "@stencil/core";
-import { a11yBoolean, a11yHostAttributes } from "../utils/a11y";
-import { makeRef } from "../utils/make-ref";
+import { iconChevronRightSmall } from "@siemens/ix-icons/icons";
+import { h, Host, Mixin, } from "@stencil/core";
+import { a11yHostAttributes } from "../utils/a11y";
+import { DefaultMixins } from "../utils/internal/component";
 import { createMutationObserver } from "../utils/mutation-observer";
-let sequenceId = 0;
-const createId = (prefix = 'breadcrumb-') => {
-    return `${prefix}-${sequenceId++}`;
-};
-export class Breadcrumb {
+export class Breadcrumb extends Mixin(...DefaultMixins) {
     constructor() {
-        /**
-         * Excess items will get hidden inside of dropdown
-         */
-        this.visibleItemCount = 9;
-        /**
-         * Items will be accessible through a dropdown
-         */
-        this.nextItems = [];
-        /**
-         * Ghost breadcrumbs will not show solid backgrounds on individual crumbs unless there is a mouse event (e.g. hover)
-         */
-        this.subtle = false;
-        /**
-         * Accessibility label for the dropdown button (ellipsis icon) used to access the dropdown list
-         * with conditionally hidden previous items
-         */
-        this.ariaLabelPreviousButton = 'previous';
-        /**
-         * Enable Popover API rendering for dropdown.
-         *
-         * @default false
-         * @since 4.3.0
-         */
-        this.enableTopLayer = false;
-        this.previousButtonRef = makeRef();
-        this.nextButtonRef = makeRef();
-        this.items = [];
-        this.isPreviousDropdownExpanded = false;
-        this.previousButtonId = createId();
-        this.previousDropdownId = createId();
+        super();
     }
+    hostElement;
+    /**
+     * Excess items will get hidden inside of dropdown
+     */
+    visibleItemCount = 9;
+    /**
+     * Items will be accessible through a dropdown
+     *
+     * @since 5.0.0
+     */
+    nextItems = [];
     onNextItemsChange() {
         this.onChildMutation();
     }
+    /**
+     * Ghost breadcrumbs will not show solid backgrounds on individual crumbs unless there is a mouse event (e.g. hover)
+     */
+    subtle = false;
+    /**
+     * Accessibility label for the dropdown button (ellipsis icon) used to access the dropdown list
+     * with conditionally hidden previous items
+     */
+    ariaLabelPreviousButton = 'Show previous breadcrumb items';
+    /**
+     * Enable Popover API rendering for dropdown.
+     *
+     * @default false
+     * @since 4.3.0
+     */
+    enableTopLayer = false;
+    /**
+     * Crumb item clicked event
+     *
+     * @since 5.0.0
+     */
+    itemClick;
+    /**
+     * Next item clicked event
+     *
+     * @since 5.0.0
+     */
+    nextClick;
+    items = [];
+    isNextDropdownExpanded = false;
+    shouldRenderNextDropdown = false;
+    mutationObserver;
+    inheritAriaAttributes = {};
     onItemClick(item) {
         this.itemClick.emit(item);
     }
@@ -61,61 +73,62 @@ export class Breadcrumb {
         });
     }
     componentWillLoad() {
+        this.inheritAriaAttributes = a11yHostAttributes(this.hostElement);
         this.onChildMutation();
     }
     disconnectedCallback() {
-        var _a;
-        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.mutationObserver?.disconnect();
     }
     async onChildMutation() {
         const updatedItems = this.getItems();
-        updatedItems.forEach((bc, index) => {
-            const shouldShowDropdown = this.nextItems.length !== 0 && updatedItems.length - 1 === index;
-            bc.subtle = this.subtle;
-            bc.hideChevron = updatedItems.length - 1 === index && !shouldShowDropdown;
-            bc.isDropdownTrigger = shouldShowDropdown;
+        updatedItems.forEach((breadcrumbItem, index) => {
+            const isLastItem = updatedItems.length - 1 === index;
+            const shouldShowDropdown = this.nextItems.length !== 0 && isLastItem;
+            breadcrumbItem.subtle = this.subtle;
+            breadcrumbItem.hideChevron = isLastItem && !shouldShowDropdown;
+            breadcrumbItem.isDropdownTrigger = shouldShowDropdown;
+            breadcrumbItem.isCurrentPage = isLastItem;
             if (shouldShowDropdown) {
-                this.nextButtonRef(bc);
+                breadcrumbItem.invisible = true;
             }
-            if (updatedItems.length < this.visibleItemCount) {
-                return;
+            else {
+                breadcrumbItem.invisible =
+                    index < updatedItems.length - this.visibleItemCount;
             }
-            bc.invisible = index < updatedItems.length - this.visibleItemCount;
         });
+        this.shouldRenderNextDropdown = this.nextItems.length !== 0;
         this.items = updatedItems;
     }
     getItems() {
         return Array.from(this.hostElement.querySelectorAll('ix-breadcrumb-item'));
     }
+    onNextDropdownExpandedChange() {
+        this.onChildMutation();
+    }
     render() {
-        var _a, _b, _c, _d;
-        const a11y = a11yHostAttributes(this.hostElement);
-        return (h(Host, { key: '6c7e20e30924d04854ca78ead9fd98d5ebe346bf' }, h("ix-dropdown", { key: '822c078f94f89e66db61e65f77d5e7bc6fb40aa2', id: this.previousDropdownId, "aria-label": this.ariaLabelPreviousButton, trigger: ((_a = this.items) === null || _a === void 0 ? void 0 : _a.length) > this.visibleItemCount
-                ? this.previousButtonRef.waitForCurrent()
-                : undefined, enableTopLayer: this.enableTopLayer, onShowChanged: ({ detail }) => {
-                this.isPreviousDropdownExpanded = detail;
-                const previousButton = this.hostElement.shadowRoot.getElementById(this.previousButtonId);
-                // Need to force update previous button to change `aria-expanded`
-                if (previousButton) {
-                    forceUpdate(previousButton);
-                }
-            } }, this.items
+        const labelLastItem = this.items?.[this.items.length - 1];
+        this.inheritAriaAttributes['aria-label'] =
+            this.inheritAriaAttributes['aria-label'] ?? 'Breadcrumbs';
+        return (h(Host, { key: 'c8cfb22b370122dea413928ceed2fb8630b53075', ...this.inheritAriaAttributes, role: "navigation" }, this.items?.length > this.visibleItemCount && (h("ix-dropdown-button", { key: 'c2a90ef26e2969d1e755e6acf328263f4bfbb0b5', "aria-label": this.ariaLabelPreviousButton, label: "...", variant: "tertiary", class: "previous-button", enableTopLayer: this.enableTopLayer }, h("ix-icon", { key: 'f0b32d17e31d0023a413a2e16787c2f81091020f', slot: "button-label", name: iconChevronRightSmall, size: "16", class: 'chevron' }), this.items
             .slice(0, this.items.length - this.visibleItemCount)
             .map((item) => {
-            var _a;
-            const label = (_a = item.label) !== null && _a !== void 0 ? _a : item.innerText;
+            const label = item.label ?? item.innerText;
             return (h("ix-dropdown-item", { label: label, onClick: () => {
-                    this.onItemClick(label);
+                    this.onItemClick({
+                        breadcrumbKey: item.breadcrumbKey,
+                        label,
+                    });
                 }, onItemClick: (event) => event.stopPropagation() }));
-        })), ((_b = this.items) === null || _b === void 0 ? void 0 : _b.length) > this.visibleItemCount ? (h("ix-breadcrumb-item", { id: this.previousButtonId, ref: this.previousButtonRef, label: "...", tabIndex: 1, onItemClick: (event) => event.stopPropagation(), "aria-describedby": this.previousDropdownId, "aria-controls": this.previousDropdownId, "aria-expanded": a11yBoolean(this.isPreviousDropdownExpanded), class: 'previous-button' })) : null, h("nav", { key: 'e9f69c0666458f34d930bc5e19663fc9a8e69d90', class: "crumb-items", "aria-label": (_c = a11y['aria-label']) !== null && _c !== void 0 ? _c : 'breadcrumbs' }, h("ol", { key: '2ad3f37c9baffbd9eb8789dc8304dceb6772e0d4' }, h("slot", { key: '2bd136c9714401ddf2ea8bc5e3cb783b128ce795' }))), h("ix-dropdown", { key: 'ce382ec6bd3590e678a03517b31ec15bb7f2528f', trigger: this.nextButtonRef.waitForCurrent(), enableTopLayer: this.enableTopLayer }, (_d = this.nextItems) === null || _d === void 0 ? void 0 : _d.map((item) => (h("ix-dropdown-item", { label: item, onClick: (e) => {
+        }))), h("div", { key: 'a52404709581c50965d8ede10819f213eb8b9a91', class: "crumb-items" }, h("slot", { key: '92b3de8dc3ca5c2b2a089d5cca602f3c0c8b540a' })), this.shouldRenderNextDropdown && (h("ix-dropdown-button", { key: '1fe42187695d0d4e4e77eae43a92b4821e85e4d5', label: labelLastItem.label ?? labelLastItem.innerText, class: "next-button", variant: "tertiary", enableTopLayer: this.enableTopLayer, "aria-current": "page" }, h("ix-icon", { key: '843588a9497997a6de921b8a6c775d9fa2f02aa5', slot: "button-label", name: iconChevronRightSmall, size: "16", class: 'chevron' }), this.nextItems?.map((item) => (h("ix-dropdown-item", { label: item.label, onClick: (e) => {
                 this.nextClick.emit({
                     event: e,
                     item,
                 });
-            }, onItemClick: (event) => event.stopPropagation() }))))));
+            }, onItemClick: (event) => event.stopPropagation() })))))));
     }
     static get is() { return "ix-breadcrumb"; }
     static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
     static get originalStyleUrls() {
         return {
             "$": ["breadcrumb.scss"]
@@ -152,14 +165,24 @@ export class Breadcrumb {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "string[]",
-                    "resolved": "string[]",
-                    "references": {}
+                    "original": "BreadcrumbClick[]",
+                    "resolved": "BreadcrumbClick[]",
+                    "references": {
+                        "BreadcrumbClick": {
+                            "location": "import",
+                            "path": "./breadcrumb.types",
+                            "id": "src/components/breadcrumb/breadcrumb.types.ts::BreadcrumbClick",
+                            "referenceLocation": "BreadcrumbClick"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "since",
+                            "text": "5.0.0"
+                        }],
                     "text": "Items will be accessible through a dropdown"
                 },
                 "getter": false,
@@ -204,7 +227,7 @@ export class Breadcrumb {
                 "setter": false,
                 "reflect": false,
                 "attribute": "aria-label-previous-button",
-                "defaultValue": "'previous'"
+                "defaultValue": "'Show previous breadcrumb items'"
             },
             "enableTopLayer": {
                 "type": "boolean",
@@ -237,7 +260,8 @@ export class Breadcrumb {
     static get states() {
         return {
             "items": {},
-            "isPreviousDropdownExpanded": {}
+            "isNextDropdownExpanded": {},
+            "shouldRenderNextDropdown": {}
         };
     }
     static get events() {
@@ -248,13 +272,23 @@ export class Breadcrumb {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "since",
+                            "text": "5.0.0"
+                        }],
                     "text": "Crumb item clicked event"
                 },
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
+                    "original": "BreadcrumbClick",
+                    "resolved": "{ breadcrumbKey: string; label?: string | undefined; }",
+                    "references": {
+                        "BreadcrumbClick": {
+                            "location": "import",
+                            "path": "./breadcrumb.types",
+                            "id": "src/components/breadcrumb/breadcrumb.types.ts::BreadcrumbClick",
+                            "referenceLocation": "BreadcrumbClick"
+                        }
+                    }
                 }
             }, {
                 "method": "nextClick",
@@ -263,16 +297,25 @@ export class Breadcrumb {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "since",
+                            "text": "5.0.0"
+                        }],
                     "text": "Next item clicked event"
                 },
                 "complexType": {
-                    "original": "{ event: UIEvent; item: string }",
-                    "resolved": "{ event: UIEvent; item: string; }",
+                    "original": "{\n    event: UIEvent;\n    item: BreadcrumbClick;\n  }",
+                    "resolved": "{ event: UIEvent; item: BreadcrumbClick; }",
                     "references": {
                         "UIEvent": {
                             "location": "global",
                             "id": "global::UIEvent"
+                        },
+                        "BreadcrumbClick": {
+                            "location": "import",
+                            "path": "./breadcrumb.types",
+                            "id": "src/components/breadcrumb/breadcrumb.types.ts::BreadcrumbClick",
+                            "referenceLocation": "BreadcrumbClick"
                         }
                     }
                 }
@@ -283,6 +326,9 @@ export class Breadcrumb {
         return [{
                 "propName": "nextItems",
                 "methodName": "onNextItemsChange"
+            }, {
+                "propName": "isNextDropdownExpanded",
+                "methodName": "onNextDropdownExpandedChange"
             }];
     }
 }

package/dist/collection/components/breadcrumb/breadcrumb.types.js

@@ -0,0 +1 @@
+export {};