npm - @siemens/ix - Versions diffs - 1.6.3 → 2.0.0-beta.1 - Mend

@siemens/ix 1.6.3 → 2.0.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1549) hide show

package/dist/components/ix-blind.js CHANGED Viewed

@@ -1,18 +1,10 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { a as anime } from './anime.es.js';
-import { d as defineCustomElement$2 } from './icon.js';
+import { a as a11yBoolean } from './a11y.js';
+import { d as defineCustomElement$3 } from './icon.js';
+import { d as defineCustomElement$2 } from './typography.js';
-/*
- * SPDX-FileCopyrightText: 2023 Siemens AG
- *
- * SPDX-License-Identifier: MIT
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-const a11yBoolean = (value) => (value ? 'true' : 'false');
-const blindCss = ":host{display:flex;flex-direction:column;background-color:var(--theme-blind-base--background);border:solid var(--theme-blind--border-thickness) var(--theme-blind-base--border-color);border-radius:var(--theme-blind--border-radius);overflow:hidden}:host .blind-header{all:unset;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;min-height:3rem;height:3rem;border:solid var(--theme-blind--border-thickness) transparent;border-radius:var(--theme-blind--border-radius) var(--theme-blind--border-radius) 0 0;padding-right:0.5rem;transition:border-radius 150ms;cursor:pointer;z-index:1;color:var(--theme-blind-header-closed--color);background-color:var(--theme-blind-header-closed--background)}:host .blind-header .collapse-icon{color:var(--theme-blind-header-icon-closed--color);padding:0.25rem 0.5rem}:host .blind-header .blind-header-title,:host .blind-header .blind-header-title-basic{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;flex-grow:1;height:100%}:host .blind-header .blind-header-title .blind-header-title-default,:host .blind-header .blind-header-title-basic .blind-header-title-default{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-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);-webkit-margin-end:0.5rem;margin-inline-end:0.5rem;flex-grow:1}:host .blind-header .blind-header-title-basic ix-icon{-webkit-margin-end:0.5rem;margin-inline-end:0.5rem}:host .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-blind-header-open--background--hover)}:host .blind-header:not(.disabled):not(:disabled):hover .collapse-icon{color:var(--theme-blind-header-icon-open--color--hover)}:host .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host .blind-header:not(.disabled):not(:disabled):active{background-color:var(--theme-blind-header-open--background--active)}:host .blind-header:not(.disabled):not(:disabled):active .collapse-icon{color:var(--theme-blind-header-icon-open--color--active)}:host .blind-header:not(.disabled):not(:disabled):focus-visible{border-color:var(--theme-color-focus-bdr);outline:none}:host .blind-header.closed{border-radius:var(--theme-blind--border-radius)}:host .blind-header.closed:not(.disabled):not(:disabled){cursor:pointer}:host .blind-header.closed:not(.disabled):not(:disabled):hover{background-color:var(--theme-blind-header-open--background--hover)}:host .blind-header.closed:not(.disabled):not(:disabled):hover .collapse-icon{color:var(--theme-blind-header-icon-closed--color--hover)}:host .blind-header.closed:not(.disabled):not(:disabled){cursor:pointer}:host .blind-header.closed:not(.disabled):not(:disabled):active{background-color:var(--theme-blind-header-open--background--active)}:host .blind-header.closed:not(.disabled):not(:disabled):active .collapse-icon{color:var(--theme-blind-header-icon-closed--color--active)}:host .blind-content{display:block;padding:1rem;transition-property:padding;transition-duration:150ms;transition-timing-function:ease-in}:host .blind-content.hide{max-height:0;padding-top:0px;padding-bottom:0px}";
+const blindCss = ":host{display:flex;flex-direction:column;background-color:var(--theme-blind-base--background);border:solid var(--theme-blind--border-thickness) var(--theme-blind-base--border-color);border-radius:var(--theme-blind--border-radius);overflow:hidden}:host .blind-header{all:unset;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;min-height:3rem;height:3rem;border:solid var(--theme-blind--border-thickness) transparent;border-radius:var(--theme-blind--border-radius) var(--theme-blind--border-radius) 0 0;padding-right:0.5rem;transition:border-radius 150ms;cursor:pointer;z-index:1;color:var(--theme-blind-header-closed--color);background-color:var(--theme-blind-header-closed--background)}:host .blind-header .collapse-icon{color:var(--theme-blind-header-icon-closed--color);padding:0.25rem 0.5rem}:host .blind-header ix-typography,:host .blind-header .blind-header-title-label,:host .blind-header .blind-header-title-sublabel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-grow:1}:host .blind-header .blind-header-title-label{-webkit-padding-end:0.5rem;padding-inline-end:0.5rem}:host .blind-header .blind-header-title-sublabel{padding-inline:0.5rem}:host .blind-header .blind-header-title,:host .blind-header .blind-header-title-basic{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;flex-grow:1;height:100%}:host .blind-header .blind-header-title .blind-header-title-default,:host .blind-header .blind-header-title-basic .blind-header-title-default{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-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);-webkit-margin-end:0.5rem;margin-inline-end:0.5rem;flex-grow:1}:host .blind-header .blind-header-title-basic ix-icon{-webkit-margin-end:0.5rem;margin-inline-end:0.5rem}:host .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-blind-header-open--background--hover)}:host .blind-header:not(.disabled):not(:disabled):hover .collapse-icon{color:var(--theme-blind-header-icon-open--color--hover)}:host .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host .blind-header:not(.disabled):not(:disabled):active,:host .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-blind-header-open--background--active)}:host .blind-header:not(.disabled):not(:disabled):active .collapse-icon,:host .blind-header:not(.disabled):not(:disabled).active .collapse-icon{color:var(--theme-blind-header-icon-open--color--active)}:host .blind-header:not(.disabled):not(:disabled):focus-visible{border-color:var(--theme-color-focus-bdr);outline:none}:host .blind-header.closed{border-radius:var(--theme-blind--border-radius)}:host .blind-header.closed:not(.disabled):not(:disabled){cursor:pointer}:host .blind-header.closed:not(.disabled):not(:disabled):hover{background-color:var(--theme-blind-header-open--background--hover)}:host .blind-header.closed:not(.disabled):not(:disabled):hover .collapse-icon{color:var(--theme-blind-header-icon-closed--color--hover)}:host .blind-header.closed:not(.disabled):not(:disabled){cursor:pointer}:host .blind-header.closed:not(.disabled):not(:disabled):active,:host .blind-header.closed:not(.disabled):not(:disabled).active{background-color:var(--theme-blind-header-open--background--active)}:host .blind-header.closed:not(.disabled):not(:disabled):active .collapse-icon,:host .blind-header.closed:not(.disabled):not(:disabled).active .collapse-icon{color:var(--theme-blind-header-icon-closed--color--active)}:host .blind-content{display:block;padding:1rem;transition-property:padding;transition-duration:150ms;transition-timing-function:ease-in}:host .blind-content.hide{max-height:0;padding-top:0px;padding-bottom:0px}";
 let sequentialInstanceId = 0;
 const Blind = /*@__PURE__*/ proxyCustomElement(class Blind extends HTMLElement {
@@ -24,6 +16,7 @@ const Blind = /*@__PURE__*/ proxyCustomElement(class Blind extends HTMLElement {
     this.id = ++sequentialInstanceId;
     this.collapsed = false;
     this.label = undefined;
+    this.sublabel = undefined;
     this.icon = undefined;
   }
   onHeaderClick(e) {
@@ -84,10 +77,10 @@ const Blind = /*@__PURE__*/ proxyCustomElement(class Blind extends HTMLElement {
     return (h(Host, null, h("button", { class: {
         'blind-header': true,
         closed: this.collapsed,
-      }, type: "button", "aria-labelledby": `ix-blind-header-title-${this.id}`, "aria-controls": `ix-blind-content-section-${this.id}`, "aria-expanded": a11yBoolean(!this.collapsed), onClick: (e) => this.onHeaderClick(e) }, h("ix-icon", { class: 'collapse-icon', name: "chevron-right-small", ref: (ref) => (this.chevronRef = ref) }), h("div", { class: "blind-header-title", id: `ix-blind-header-title-${this.id}` }, this.label !== undefined ? (h("span", { class: "blind-header-title-basic" }, this.icon !== undefined ? (h("ix-icon", { name: this.icon })) : (''), h("span", { class: "blind-header-title-default" }, this.label), h("span", { class: "header-actions", onClick: (e) => e.stopImmediatePropagation() }, h("slot", { name: "header-actions" })))) : (h("slot", { name: "custom-header" })))), h("section", { id: `ix-blind-content-section-${this.id}`, "aria-labelledby": `ix-blind-header-title-${this.id}` }, h("div", { class: {
+      }, type: "button", "aria-labelledby": `ix-blind-header-title-${this.id}`, "aria-controls": `ix-blind-content-section-${this.id}`, "aria-expanded": a11yBoolean(!this.collapsed), onClick: (e) => this.onHeaderClick(e) }, h("ix-icon", { class: 'collapse-icon', name: "chevron-right-small", ref: (ref) => (this.chevronRef = ref) }), h("div", { class: "blind-header-title", id: `ix-blind-header-title-${this.id}` }, this.label !== undefined ? (h("span", { class: "blind-header-title-basic" }, this.icon !== undefined ? (h("ix-icon", { name: this.icon })) : (''), h("ix-typography", { format: "label-lg", bold: true }, h("div", { class: "blind-header-title-label", title: this.label }, this.label)), this.sublabel !== undefined ? (h("ix-typography", { color: "soft" }, h("div", { class: "blind-header-title-sublabel", title: this.sublabel }, this.sublabel))) : (''), h("span", { class: "header-actions", onClick: (e) => e.stopImmediatePropagation() }, h("slot", { name: "header-actions" })))) : (h("slot", { name: "custom-header" })))), h("section", { id: `ix-blind-content-section-${this.id}`, "aria-labelledby": `ix-blind-header-title-${this.id}` }, h("div", { class: {
         'blind-content': true,
         hide: this.collapsed,
-      } }, h("slot", null)))));
+      } }, !this.collapsed ? h("slot", null) : null))));
   }
   get hostElement() { return this; }
   static get watchers() { return {
@@ -97,13 +90,14 @@ const Blind = /*@__PURE__*/ proxyCustomElement(class Blind extends HTMLElement {
 }, [1, "ix-blind", {
     "collapsed": [1540],
     "label": [1],
+    "sublabel": [1],
     "icon": [1]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["ix-blind", "ix-icon"];
+  const components = ["ix-blind", "ix-icon", "ix-typography"];
   components.forEach(tagName => { switch (tagName) {
     case "ix-blind":
       if (!customElements.get(tagName)) {
@@ -111,6 +105,11 @@ function defineCustomElement$1() {
       }
       break;
     case "ix-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "ix-typography":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();
       }

package/dist/components/ix-blind.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ix-blind.js","mappings":"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","names":[],"sources":["./src/components/utils/a11y.ts","./src/components/blind/blind.scss?tag=ix-blind&encapsulation=shadow","./src/components/blind/blind.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 /\nexport const a11yBoolean = (value: boolean) => (value ? 'true' : 'false');\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'common-variables';\n@import 'mixins/fonts';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n\n:host {\n display: flex;\n flex-direction: column;\n background-color: var(--theme-blind-base--background);\n border: solid var(--theme-blind--border-thickness)\n var(--theme-blind-base--border-color);\n border-radius: var(--theme-blind--border-radius);\n overflow: hidden;\n\n .blind-header {\n all: unset;\n @include ellipsis;\n\n display: flex;\n align-items: center;\n min-height: 3rem;\n height: 3rem;\n border: solid var(--theme-blind--border-thickness) transparent;\n border-radius: var(--theme-blind--border-radius)\n var(--theme-blind--border-radius) 0 0;\n padding-right: $small-space;\n transition: border-radius $default-time;\n cursor: pointer;\n\n z-index: 1;\n\n color: var(--theme-blind-header-closed--color);\n background-color: var(--theme-blind-header-closed--background);\n\n .collapse-icon {\n color: var(--theme-blind-header-icon-closed--color);\n padding: $tiny-space $small-space;\n }\n\n .blind-header-title,\n .blind-header-title-basic {\n @include ellipsis;\n display: flex;\n align-items: center;\n flex-grow: 1;\n height: 100%;\n\n .blind-header-title-default {\n @include ellipsis;\n @include text-l-title;\n margin-inline-end: $small-space;\n flex-grow: 1;\n }\n }\n\n .blind-header-title-basic ix-icon {\n margin-inline-end: $small-space;\n }\n\n @include hover {\n background-color: var(--theme-blind-header-open--background--hover);\n\n .collapse-icon {\n color: var(--theme-blind-header-icon-open--color--hover);\n }\n }\n\n @include active {\n background-color: var(--theme-blind-header-open--background--active);\n\n .collapse-icon {\n color: var(--theme-blind-header-icon-open--color--active);\n }\n }\n\n @include focus-visible {\n border-color: var(--theme-color-focus-bdr);\n outline: none;\n }\n\n &.closed {\n border-radius: var(--theme-blind--border-radius);\n\n @include hover {\n background-color: var(--theme-blind-header-open--background--hover);\n\n .collapse-icon {\n color: var(--theme-blind-header-icon-closed--color--hover);\n }\n }\n\n @include active {\n background-color: var(--theme-blind-header-open--background--active);\n\n .collapse-icon {\n color: var(--theme-blind-header-icon-closed--color--active);\n }\n }\n }\n }\n\n .blind-content {\n display: block;\n padding: 1rem;\n transition-property: padding;\n transition-duration: $default-time;\n transition-timing-function: ease-in;\n\n &.hide {\n max-height: 0;\n padding-top: 0px;\n padding-bottom: 0px;\n }\n }\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n Watch,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { a11yBoolean } from '../utils/a11y';\n\nlet sequentialInstanceId = 0;\n@Component({\n tag: 'ix-blind',\n styleUrl: 'blind.scss',\n shadow: true,\n})\nexport class Blind {\n /\n Collapsed state\n /\n @Prop({ mutable: true, reflect: true }) collapsed = false;\n\n /\n Label of blind\n /\n @Prop() label: string;\n\n /\n Optional icon to be displayed next to the header label\n * @since 1.5.0\n /\n @Prop() icon: string;\n\n /\n Collapsed state changed\n */\n @Event() collapsedChange: EventEmitter<boolean>;\n\n @Element() hostElement!: HTMLIxBlindElement;\n\n private chevronRef: HTMLElement;\n private id = ++sequentialInstanceId;\n\n constructor() {}\n\n private onHeaderClick(e: Event) {\n if ((e.target as Element).closest('.header-actions')) {\n return;\n }\n\n e.preventDefault();\n e.stopImmediatePropagation();\n\n this.collapsed = !this.collapsed;\n this.collapsedChange.emit(this.collapsed);\n }\n\n componentDidLoad() {\n this.animateCollapse(this.collapsed);\n }\n\n get content() {\n return this.hostElement.shadowRoot.querySelector('.blind-content');\n }\n\n @Watch('collapsed')\n animation(isCollapsed: boolean) {\n this.animateCollapse(isCollapsed);\n }\n\n private animateCollapse(isCollapsed: boolean) {\n if (isCollapsed) {\n this.rotateChevronRight();\n } else {\n this.rotateChevronDown();\n }\n }\n\n private rotateChevronDown() {\n anime({\n targets: this.chevronRef,\n duration: 150,\n easing: 'easeInOutSine',\n rotateZ: 90,\n });\n anime({\n targets: this.content,\n duration: 150,\n easing: 'easeInOutSine',\n opacity: 1,\n });\n }\n\n private rotateChevronRight() {\n anime({\n targets: this.chevronRef,\n duration: 150,\n easing: 'easeInOutSine',\n rotateZ: 0,\n });\n anime({\n targets: this.content,\n duration: 150,\n easing: 'easeInOutSine',\n opacity: 0,\n });\n }\n\n render() {\n return (\n <Host>\n <button\n class={{\n 'blind-header': true,\n closed: this.collapsed,\n }}\n type=\"button\"\n aria-labelledby={`ix-blind-header-title-${this.id}`}\n aria-controls={`ix-blind-content-section-${this.id}`}\n aria-expanded={a11yBoolean(!this.collapsed)}\n onClick={(e) => this.onHeaderClick(e)}\n >\n <ix-icon\n class={'collapse-icon'}\n name=\"chevron-right-small\"\n ref={(ref) => (this.chevronRef = ref)}\n ></ix-icon>\n <div\n class=\"blind-header-title\"\n id={`ix-blind-header-title-${this.id}`}\n >\n {this.label !== undefined ? (\n <span class=\"blind-header-title-basic\">\n {this.icon !== undefined ? (\n <ix-icon name={this.icon}></ix-icon>\n ) : (\n ''\n )}\n <span class=\"blind-header-title-default\">{this.label}</span>\n <span\n class=\"header-actions\"\n onClick={(e) => e.stopImmediatePropagation()}\n >\n <slot name=\"header-actions\"></slot>\n </span>\n </span>\n ) : (\n <slot name=\"custom-header\"></slot>\n )}\n </div>\n </button>\n <section\n id={`ix-blind-content-section-${this.id}`}\n aria-labelledby={`ix-blind-header-title-${this.id}`}\n >\n <div\n class={{\n 'blind-content': true,\n hide: this.collapsed,\n }}\n >\n <slot></slot>\n </div>\n </section>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-blind.js","mappings":"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","names":[],"sources":["./src/components/blind/blind.scss?tag=ix-blind&encapsulation=shadow","./src/components/blind/blind.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'common-variables';\n@import 'legacy/mixins/fonts';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n\n:host {\n display: flex;\n flex-direction: column;\n background-color: var(--theme-blind-base--background);\n border: solid var(--theme-blind--border-thickness)\n var(--theme-blind-base--border-color);\n border-radius: var(--theme-blind--border-radius);\n overflow: hidden;\n\n .blind-header {\n all: unset;\n @include ellipsis;\n\n display: flex;\n align-items: center;\n min-height: 3rem;\n height: 3rem;\n border: solid var(--theme-blind--border-thickness) transparent;\n border-radius: var(--theme-blind--border-radius)\n var(--theme-blind--border-radius) 0 0;\n padding-right: $small-space;\n transition: border-radius $default-time;\n cursor: pointer;\n\n z-index: 1;\n\n color: var(--theme-blind-header-closed--color);\n background-color: var(--theme-blind-header-closed--background);\n\n .collapse-icon {\n color: var(--theme-blind-header-icon-closed--color);\n padding: $tiny-space $small-space;\n }\n\n ix-typography,\n .blind-header-title-label,\n .blind-header-title-sublabel {\n @include ellipsis;\n flex-grow: 1;\n }\n\n .blind-header-title-label {\n padding-inline-end: 0.5rem;\n }\n\n .blind-header-title-sublabel {\n padding-inline: 0.5rem;\n }\n\n .blind-header-title,\n .blind-header-title-basic {\n @include ellipsis;\n display: flex;\n align-items: center;\n flex-grow: 1;\n height: 100%;\n\n .blind-header-title-default {\n @include ellipsis;\n @include text-l-title;\n margin-inline-end: $small-space;\n flex-grow: 1;\n }\n }\n\n .blind-header-title-basic ix-icon {\n margin-inline-end: $small-space;\n }\n\n @include hover {\n background-color: var(--theme-blind-header-open--background--hover);\n\n .collapse-icon {\n color: var(--theme-blind-header-icon-open--color--hover);\n }\n }\n\n @include active {\n background-color: var(--theme-blind-header-open--background--active);\n\n .collapse-icon {\n color: var(--theme-blind-header-icon-open--color--active);\n }\n }\n\n @include focus-visible {\n border-color: var(--theme-color-focus-bdr);\n outline: none;\n }\n\n &.closed {\n border-radius: var(--theme-blind--border-radius);\n\n @include hover {\n background-color: var(--theme-blind-header-open--background--hover);\n\n .collapse-icon {\n color: var(--theme-blind-header-icon-closed--color--hover);\n }\n }\n\n @include active {\n background-color: var(--theme-blind-header-open--background--active);\n\n .collapse-icon {\n color: var(--theme-blind-header-icon-closed--color--active);\n }\n }\n }\n }\n\n .blind-content {\n display: block;\n padding: 1rem;\n transition-property: padding;\n transition-duration: $default-time;\n transition-timing-function: ease-in;\n\n &.hide {\n max-height: 0;\n padding-top: 0px;\n padding-bottom: 0px;\n }\n }\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n Watch,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { a11yBoolean } from '../utils/a11y';\n\nlet sequentialInstanceId = 0;\n@Component({\n tag: 'ix-blind',\n styleUrl: 'blind.scss',\n shadow: true,\n})\nexport class Blind {\n /\n Collapsed state\n /\n @Prop({ mutable: true, reflect: true }) collapsed = false;\n\n /\n Label of blind\n /\n @Prop() label: string;\n\n /\n Secondary label inside blind header\n * @since 2.0.0\n /\n @Prop() sublabel: string;\n\n /\n Optional icon to be displayed next to the header label\n * @since 1.5.0\n /\n @Prop() icon: string;\n\n /\n Collapsed state changed\n */\n @Event() collapsedChange: EventEmitter<boolean>;\n\n @Element() hostElement!: HTMLIxBlindElement;\n\n private chevronRef: HTMLElement;\n private id = ++sequentialInstanceId;\n\n constructor() {}\n\n private onHeaderClick(e: Event) {\n if ((e.target as Element).closest('.header-actions')) {\n return;\n }\n\n e.preventDefault();\n e.stopImmediatePropagation();\n\n this.collapsed = !this.collapsed;\n this.collapsedChange.emit(this.collapsed);\n }\n\n componentDidLoad() {\n this.animateCollapse(this.collapsed);\n }\n\n get content() {\n return this.hostElement.shadowRoot.querySelector('.blind-content');\n }\n\n @Watch('collapsed')\n animation(isCollapsed: boolean) {\n this.animateCollapse(isCollapsed);\n }\n\n private animateCollapse(isCollapsed: boolean) {\n if (isCollapsed) {\n this.rotateChevronRight();\n } else {\n this.rotateChevronDown();\n }\n }\n\n private rotateChevronDown() {\n anime({\n targets: this.chevronRef,\n duration: 150,\n easing: 'easeInOutSine',\n rotateZ: 90,\n });\n anime({\n targets: this.content,\n duration: 150,\n easing: 'easeInOutSine',\n opacity: 1,\n });\n }\n\n private rotateChevronRight() {\n anime({\n targets: this.chevronRef,\n duration: 150,\n easing: 'easeInOutSine',\n rotateZ: 0,\n });\n anime({\n targets: this.content,\n duration: 150,\n easing: 'easeInOutSine',\n opacity: 0,\n });\n }\n\n render() {\n return (\n <Host>\n <button\n class={{\n 'blind-header': true,\n closed: this.collapsed,\n }}\n type=\"button\"\n aria-labelledby={`ix-blind-header-title-${this.id}`}\n aria-controls={`ix-blind-content-section-${this.id}`}\n aria-expanded={a11yBoolean(!this.collapsed)}\n onClick={(e) => this.onHeaderClick(e)}\n >\n <ix-icon\n class={'collapse-icon'}\n name=\"chevron-right-small\"\n ref={(ref) => (this.chevronRef = ref)}\n ></ix-icon>\n <div\n class=\"blind-header-title\"\n id={`ix-blind-header-title-${this.id}`}\n >\n {this.label !== undefined ? (\n <span class=\"blind-header-title-basic\">\n {this.icon !== undefined ? (\n <ix-icon name={this.icon}></ix-icon>\n ) : (\n ''\n )}\n <ix-typography format=\"label-lg\" bold>\n <div class=\"blind-header-title-label\" title={this.label}>\n {this.label}\n </div>\n </ix-typography>\n {this.sublabel !== undefined ? (\n <ix-typography color=\"soft\">\n <div\n class=\"blind-header-title-sublabel\"\n title={this.sublabel}\n >\n {this.sublabel}\n </div>\n </ix-typography>\n ) : (\n ''\n )}\n <span\n class=\"header-actions\"\n onClick={(e) => e.stopImmediatePropagation()}\n >\n <slot name=\"header-actions\"></slot>\n </span>\n </span>\n ) : (\n <slot name=\"custom-header\"></slot>\n )}\n </div>\n </button>\n <section\n id={`ix-blind-content-section-${this.id}`}\n aria-labelledby={`ix-blind-header-title-${this.id}`}\n >\n <div\n class={{\n 'blind-content': true,\n hide: this.collapsed,\n }}\n >\n {!this.collapsed ? <slot></slot> : null}\n </div>\n </section>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/ix-breadcrumb-item.js CHANGED Viewed

@@ -1,35 +1,4 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-const breadcrumbItemCss = ".sc-ix-breadcrumb-item-h{display:block}";
-const BreadcrumbItem = /*@__PURE__*/ proxyCustomElement(class BreadcrumbItem extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.label = undefined;
-    this.icon = undefined;
-  }
-  render() {
-    return (h(Host, null, h("slot", null)));
-  }
-  static get style() { return breadcrumbItemCss; }
-}, [6, "ix-breadcrumb-item", {
-    "label": [1],
-    "icon": [1]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["ix-breadcrumb-item"];
-  components.forEach(tagName => { switch (tagName) {
-    case "ix-breadcrumb-item":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, BreadcrumbItem);
-      }
-      break;
-  } });
-}
+import { B as BreadcrumbItem, d as defineCustomElement$1 } from './breadcrumb-item.js';
 const IxBreadcrumbItem = BreadcrumbItem;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ix-breadcrumb-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ix-breadcrumb-item.js","mappings":"~~;;AAAA,MAAM,iBAAiB,GAAG,yCAAyC;;MCgBtD,cAAc~~;;;;;;;~~EAWzB,MAAM;IACJ,QACE,EAAC,IAAI,QACH,eAAa,CACR,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":[],"sources":[~~"./src/components/breadcrumb-item/breadcrumb-item.scss?tag=ix-breadcrumb-item&encapsulation=scoped","./src/components/breadcrumb-item/breadcrumb-item.tsx"~~],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n:host {\n display: block;\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'ix-breadcrumb-item',\n styleUrl: 'breadcrumb-item.scss',\n scoped: true,\n})\nexport class BreadcrumbItem {\n /\n Breadcrumb label\n /\n @Prop() label: string;\n\n /\n Icon to be displayed next ot the label\n */\n @Prop() icon: string;\n\n render() {\n return (\n <Host>\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-breadcrumb-item.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/ix-breadcrumb.js CHANGED Viewed

@@ -1,169 +1,147 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { a as anime } from './anime.es.js';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host, forceUpdate } from '@stencil/core/internal/client';
+import { b as a11yHostAttributes, a as a11yBoolean } from './a11y.js';
 import { c as createMutationObserver } from './mutation-observer.js';
-import { d as defineCustomElement$4 } from './dropdown.js';
-import { d as defineCustomElement$3 } from './dropdown-item.js';
-import { d as defineCustomElement$2 } from './icon.js';
+import { d as defineCustomElement$6 } from './breadcrumb-item.js';
+import { d as defineCustomElement$5 } from './dropdown.js';
+import { d as defineCustomElement$4 } from './dropdown-item.js';
+import { d as defineCustomElement$3 } from './icon.js';
+import { d as defineCustomElement$2 } from './spinner.js';
-const breadcrumbCss = ".sc-ix-breadcrumb-h{display:flex;height:2.5rem;justify-content:flex-start;align-items:center;background-color:transparent;overflow:hidden}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb{position:relative;display:flex;justify-content:flex-start;align-items:center;white-space:nowrap;border-radius:var(--theme-breadcrumb--border-radius);height:2rem;max-height:2rem;min-width:0;-webkit-margin-end:0.25rem;margin-inline-end:0.25rem;padding:0.5rem 0 0.5rem 0.25rem;outline:none;cursor:pointer}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):hover{background-color:var(--theme-breadcrumb-btn--background--hover)}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):hover .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):hover .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn--color--hover)}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):hover .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn-arrow--color--hover)}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):active{background-color:var(--theme-breadcrumb-btn--background--active)}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):active .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):active .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn--color--active)}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):active .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn-arrow--color--active)}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;min-width:0;font-weight:700}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb ix-icon.sc-ix-breadcrumb{-webkit-margin-end:0.25rem;margin-inline-end:0.25rem}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{-webkit-margin-start:0.25rem;margin-inline-start:0.25rem;-webkit-margin-end:0;margin-inline-end:0}.sc-ix-breadcrumb-h .crumb.last.sc-ix-breadcrumb{background-color:transparent !important;cursor:default;-webkit-padding-end:0.25rem;padding-inline-end:0.25rem}.sc-ix-breadcrumb-h .crumb.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):focus-visible{border-color:var(--theme-focus--border-color)}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(:last-of-type){flex-shrink:0;max-width:14rem}.sc-ix-breadcrumb-h .crumb-dropdown.sc-ix-breadcrumb{overflow:visible}.sc-ix-breadcrumb-h .crumb-dropdown.sc-ix-breadcrumb .glyph.sc-ix-breadcrumb::after{display:none}.sc-ix-breadcrumb-h .remove-anchor.sc-ix-breadcrumb::after{display:none}.sc-ix-breadcrumb-h .more-text.sc-ix-breadcrumb{display:flex}.sc-ix-breadcrumb-h .more-text.sc-ix-breadcrumb .more-text-ellipsis.sc-ix-breadcrumb{width:1rem;display:inline-block;font-weight:700}.sc-ix-breadcrumb-h .more-text.sc-ix-breadcrumb .glyph.sc-ix-breadcrumb{line-height:unset}.sc-ix-breadcrumb-h .crumb-items.sc-ix-breadcrumb{display:contents}.sc-ix-breadcrumb-h .crumb.btn.sc-ix-breadcrumb{background-color:var(--theme-breadcrumb-btn--background);border:var(--theme-btn--btn-thickness) solid transparent;transition:150ms}.sc-ix-breadcrumb-h .crumb.btn.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.btn.sc-ix-breadcrumb .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn--color)}.sc-ix-breadcrumb-h .crumb.btn.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn-arrow--color)}.sc-ix-breadcrumb-h .crumb.btn.last.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn-last--color)}.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled){cursor:pointer}.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):hover{background-color:var(--theme-breadcrumb-btn--background--hover)}.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):hover .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):hover .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn--color--hover)}.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):hover .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn-arrow--color--hover)}.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled){cursor:pointer}.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):active{background-color:var(--theme-breadcrumb-btn--background--active)}.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):active .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):active .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn--color--active)}.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):active .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn-arrow--color--active)}.sc-ix-breadcrumb-h .crumb.ghost.sc-ix-breadcrumb{background-color:var(--theme-breadcrumb-ghost--background);border:var(--theme-btn--ghost-thickness) solid transparent;transition:150ms}.sc-ix-breadcrumb-h .crumb.ghost.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.ghost.sc-ix-breadcrumb .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-ghost--color)}.sc-ix-breadcrumb-h .crumb.ghost.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-ghost-arrow--color)}.sc-ix-breadcrumb-h .crumb.ghost.last.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb{color:var(--theme-breadcrumb-ghost-last--color)}.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled){cursor:pointer}.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):hover{background-color:var(--theme-breadcrumb-ghost--background--hover)}.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):hover .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):hover .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-ghost--color--hover)}.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):hover .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-ghost-arrow--color--hover)}.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled){cursor:pointer}.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):active{background-color:var(--theme-breadcrumb-ghost--background--active)}.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):active .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):active .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-ghost--color--active)}.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):active .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-ghost-arrow--color--active)}";
+const breadcrumbCss = ":host{display:flex;justify-content:flex-start;height:2.5rem;align-items:center;background-color:transparent;overflow:hidden}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .previous-button{width:3rem;min-width:0px}:host .crumb-dropdown{overflow:visible}:host .remove-anchor::after{display:none}:host .more-text{display:flex}:host .more-text .more-text-ellipsis{width:1rem;display:inline-block;font-weight:700}:host .more-text ix-icon{padding-top:2px}:host nav,:host ol,:host .crumb-items{display:contents}";
+let sequenceId = 0;
+const createId = (prefix = 'breadcrumb-') => {
+  return `${prefix}-${sequenceId++}`;
+};
 const Breadcrumb = /*@__PURE__*/ proxyCustomElement(class Breadcrumb extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    this.__attachShadow();
     this.itemClick = createEvent(this, "itemClick", 7);
     this.nextClick = createEvent(this, "nextClick", 7);
+    this.previousButtonId = createId();
+    this.previousDropdownId = createId();
     this.visibleItemCount = 9;
     this.nextItems = [];
-    this.ghost = false;
+    this.ghost = true;
+    this.ariaLabelPreviousButton = 'previous';
     this.previousButtonRef = undefined;
     this.nextButtonRef = undefined;
     this.items = [];
+    this.isPreviousDropdownExpanded = false;
   }
-  get breadcrumbItems() {
-    return Array.from(this.hostElement.querySelectorAll('ix-breadcrumb-item'));
-  }
-  get crumbItems() {
-    return Array.from(this.hostElement.querySelectorAll('.crumb-items .crumb'));
+  onNextItemsChange() {
+    this.onChildMutation();
   }
   onItemClick(item) {
     this.itemClick.emit(item);
   }
   componentDidLoad() {
-    this.mutationObserver = createMutationObserver(() => {
-      const updatedItems = this.getItems();
-      const update = () => {
-        this.items = updatedItems;
-      };
-      if (updatedItems.length >= this.items.length) {
-        update();
-      }
-      else if (updatedItems.length < this.items.length) {
-        const last = this.crumbItems[this.crumbItems.length - 1];
-        this.animationFadeOut(last, () => update());
-      }
-    });
-    this.mutationObserver.observe(this.hostElement.querySelector('.crumb-items'), {
+    this.mutationObserver = createMutationObserver(() => this.onChildMutation());
+    this.mutationObserver.observe(this.hostElement, {
       subtree: true,
       childList: true,
     });
   }
   componentWillLoad() {
-    this.items = this.getItems();
-  }
-  getItems() {
-    return this.breadcrumbItems.map((item) => {
-      return { label: item.label, icon: item.icon };
-    });
+    this.onChildMutation();
   }
   disconnectedCallback() {
     var _a;
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
   }
-  animationFadeOut(ref, complete) {
-    anime({
-      targets: ref,
-      translateX: '-100%',
-      duration: 150,
-      opacity: [1, 0],
-      easing: 'linear',
-      complete: () => complete(),
-    });
-  }
-  animationFadeIn(ref) {
-    anime({
-      targets: ref,
-      duration: 150,
-      opacity: [0, 1],
-      translateX: ['-100%', '0%'],
-      easing: 'linear',
+  async onChildMutation() {
+    const updatedItems = this.getItems();
+    updatedItems.forEach((bc, index) => {
+      const shouldShowDropdown = this.nextItems.length !== 0 && updatedItems.length - 1 === index;
+      bc.ghost = this.ghost;
+      bc.showChevron = updatedItems.length - 1 !== index || shouldShowDropdown;
+      bc.isDropdownTrigger = shouldShowDropdown;
+      if (shouldShowDropdown) {
+        this.nextButtonRef = bc;
+      }
+      if (updatedItems.length < this.visibleItemCount) {
+        return;
+      }
+      bc.visible = index >= updatedItems.length - this.visibleItemCount;
     });
+    this.items = updatedItems;
   }
-  handleLastButtonRef(ref, last) {
-    var _a;
-    if (last) {
-      this.animationFadeIn(ref);
-    }
-    if (last && ((_a = this.nextItems) === null || _a === void 0 ? void 0 : _a.length)) {
-      this.nextButtonRef = ref;
-    }
-  }
-  sliceHiddenItems() {
-    let sliceIndex = 0;
-    if (this.items.length > this.visibleItemCount) {
-      sliceIndex = this.items.length - this.visibleItemCount;
-    }
-    return this.items.slice(sliceIndex);
-  }
-  clickItem(item, last) {
-    if (!last) {
-      this.onItemClick(item);
-    }
-  }
-  renderBreadcrumbItems() {
-    return this.sliceHiddenItems().map((item, index, array) => {
-      var _a;
-      const last = index === array.length - 1;
-      const isLastItem = last && !((_a = this.nextItems) === null || _a === void 0 ? void 0 : _a.length);
-      return (h("div", { ref: (ref) => this.handleLastButtonRef(ref, last), "data-breadcrumb": index, class: {
-          crumb: true,
-          clickable: true,
-          ghost: this.ghost,
-          btn: !this.ghost,
-          last: isLastItem,
-          'remove-hover': isLastItem,
-        }, onClick: () => this.clickItem(item.label, last), "data-testid": "item" }, h("span", { class: "crumb-text remove-anchor" }, item.icon ? h("ix-icon", { name: item.icon, size: "16" }) : '', h("span", { style: {
-          whiteSpace: 'nowrap',
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
-        } }, item.label)), !isLastItem ? (h("span", { class: "glyph glyph-18 glyph-chevron-right-small text-default-text" })) : null));
-    });
+  getItems() {
+    return Array.from(this.hostElement.querySelectorAll('ix-breadcrumb-item'));
   }
   render() {
-    var _a, _b, _c;
-    return (h(Host, null, h("ix-dropdown", { trigger: ((_a = this.items) === null || _a === void 0 ? void 0 : _a.length) > this.visibleItemCount
+    var _a, _b, _c, _d;
+    const a11y = a11yHostAttributes(this.hostElement);
+    return (h(Host, null, h("ix-dropdown", { id: this.previousDropdownId, "aria-label": this.ariaLabelPreviousButton, trigger: ((_a = this.items) === null || _a === void 0 ? void 0 : _a.length) > this.visibleItemCount
         ? this.previousButtonRef
-        : null }, this.items
+        : null, onShowChanged: ({ detail }) => {
+        this.isPreviousDropdownExpanded = detail;
+        // Need to force update previous button to change `aria-expanded`
+        forceUpdate(this.hostElement.shadowRoot.getElementById(this.previousButtonId));
+      } }, this.items
       .slice(0, this.items.length - this.visibleItemCount)
-      .map((item) => (h("ix-dropdown-item", { label: item.label, onClick: () => this.onItemClick(item.label) })))), ((_b = this.items) === null || _b === void 0 ? void 0 : _b.length) > this.visibleItemCount ? (h("div", { class: "crumb crumb-dropdown", ref: (ref) => (this.previousButtonRef = ref) }, h("span", { class: "remove-anchor more-text" }, h("span", { class: "more-text-ellipsis" }, "..."), h("span", { class: "glyph glyph-16 glyph-chevron-right" })))) : null, h("div", { class: "crumb-items" }, this.renderBreadcrumbItems(), h("slot", null)), h("ix-dropdown", { trigger: this.nextButtonRef }, (_c = this.nextItems) === null || _c === void 0 ? void 0 : _c.map((item) => (h("ix-dropdown-item", { label: item, onClick: (e) => {
+      .map((item) => {
+      var _a;
+      const label = (_a = item.label) !== null && _a !== void 0 ? _a : item.innerText;
+      return (h("ix-dropdown-item", { label: label, onClick: () => {
+          this.onItemClick(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: (ref) => (this.previousButtonRef = ref), 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", { class: "crumb-items", "aria-label": (_c = a11y['aria-label']) !== null && _c !== void 0 ? _c : 'breadcrumbs' }, h("ol", null, h("slot", null))), h("ix-dropdown", { trigger: this.nextButtonRef }, (_d = this.nextItems) === null || _d === void 0 ? void 0 : _d.map((item) => (h("ix-dropdown-item", { label: item, onClick: (e) => {
         this.nextClick.emit({
           event: e,
           item,
         });
-      } }))))));
+      }, onItemClick: (event) => event.stopPropagation() }))))));
   }
   get hostElement() { return this; }
+  static get watchers() { return {
+    "nextItems": ["onNextItemsChange"]
+  }; }
   static get style() { return breadcrumbCss; }
-}, [6, "ix-breadcrumb", {
+}, [1, "ix-breadcrumb", {
     "visibleItemCount": [2, "visible-item-count"],
     "nextItems": [16],
     "ghost": [4],
+    "ariaLabelPreviousButton": [1, "aria-label-previous-button"],
     "previousButtonRef": [32],
     "nextButtonRef": [32],
-    "items": [32]
+    "items": [32],
+    "isPreviousDropdownExpanded": [32]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["ix-breadcrumb", "ix-dropdown", "ix-dropdown-item", "ix-icon"];
+  const components = ["ix-breadcrumb", "ix-breadcrumb-item", "ix-dropdown", "ix-dropdown-item", "ix-icon", "ix-spinner"];
   components.forEach(tagName => { switch (tagName) {
     case "ix-breadcrumb":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, Breadcrumb);
       }
       break;
+    case "ix-breadcrumb-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
     case "ix-dropdown":
       if (!customElements.get(tagName)) {
-        defineCustomElement$4();
+        defineCustomElement$5();
       }
       break;
     case "ix-dropdown-item":
       if (!customElements.get(tagName)) {
-        defineCustomElement$3();
+        defineCustomElement$4();
       }
       break;
     case "ix-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "ix-spinner":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();
       }

package/dist/components/ix-breadcrumb.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ix-breadcrumb.js","mappings":"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","names":["animejs"],"sources":["./src/components/breadcrumb/breadcrumb.scss?tag=ix-breadcrumb&encapsulation=scoped","./src/components/breadcrumb/breadcrumb.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'common-variables';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n\n@mixin crumb-hover($variant) {\n @include hover {\n background-color: var(--theme-breadcrumb-#{$variant}--background--hover);\n\n .crumb-text,\n .glyph {\n color: var(--theme-breadcrumb-#{$variant}--color--hover);\n }\n\n .crumb-text + .glyph-chevron-right-small {\n color: var(--theme-breadcrumb-#{$variant}-arrow--color--hover);\n }\n }\n\n @include active {\n background-color: var(--theme-breadcrumb-#{$variant}--background--active);\n\n .crumb-text,\n .glyph {\n color: var(--theme-breadcrumb-#{$variant}--color--active);\n }\n\n .crumb-text + .glyph-chevron-right-small {\n color: var(--theme-breadcrumb-#{$variant}-arrow--color--active);\n }\n }\n}\n\n@mixin breadcrumb($variant) {\n .crumb.#{$variant} {\n background-color: var(--theme-breadcrumb-#{$variant}--background);\n border: var(--theme-btn--#{$variant}-thickness) solid transparent;\n transition: $default-time;\n\n .crumb-text,\n .glyph {\n color: var(--theme-breadcrumb-#{$variant}--color);\n }\n\n .crumb-text + .glyph-chevron-right-small {\n color: var(--theme-breadcrumb-#{$variant}-arrow--color);\n }\n\n &.last .crumb-text {\n color: var(--theme-breadcrumb-#{$variant}-last--color);\n }\n\n &.clickable:not(.remove-hover) {\n @include hover {\n background-color: var(\n --theme-breadcrumb-#{$variant}--background--hover\n );\n\n .crumb-text,\n .glyph {\n color: var(--theme-breadcrumb-#{$variant}--color--hover);\n }\n\n .crumb-text + .glyph-chevron-right-small {\n color: var(--theme-breadcrumb-#{$variant}-arrow--color--hover);\n }\n }\n\n @include active {\n background-color: var(\n --theme-breadcrumb-#{$variant}--background--active\n );\n\n .crumb-text,\n .glyph {\n color: var(--theme-breadcrumb-#{$variant}--color--active);\n }\n\n .crumb-text + .glyph-chevron-right-small {\n color: var(--theme-breadcrumb-#{$variant}-arrow--color--active);\n }\n }\n }\n }\n}\n\n:host {\n display: flex;\n height: $large-control-height;\n justify-content: flex-start;\n align-items: center;\n background-color: transparent;\n overflow: hidden;\n\n .crumb {\n position: relative;\n display: flex;\n justify-content: flex-start;\n align-items: center;\n white-space: nowrap;\n border-radius: var(--theme-breadcrumb--border-radius);\n height: $default-control-height;\n max-height: $default-control-height;\n min-width: 0;\n margin-inline-end: $tiny-space;\n padding: $small-space 0 $small-space $tiny-space;\n outline: none;\n cursor: pointer;\n\n @include crumb-hover('btn');\n\n .crumb-text {\n @include ellipsis;\n display: flex;\n align-items: center;\n min-width: 0;\n font-weight: $font-weight-bold;\n\n ix-icon {\n margin-inline-end: $tiny-space;\n }\n }\n\n .crumb-text + .glyph-chevron-right-small {\n margin-inline-start: $tiny-space;\n margin-inline-end: 0; // Overwrite global selector: .btn .glyph\n }\n\n &.last {\n background-color: transparent !important;\n cursor: default;\n padding-inline-end: $tiny-space;\n }\n\n &.clickable:not(.remove-hover) {\n @include focus-visible {\n border-color: var(--theme-focus--border-color);\n }\n }\n\n &:not(:last-of-type) {\n flex-shrink: 0;\n max-width: 14rem;\n }\n }\n\n .crumb-dropdown {\n overflow: visible;\n\n .glyph::after {\n display: none;\n }\n }\n\n .remove-anchor::after {\n display: none;\n }\n\n .more-text {\n display: flex;\n\n .more-text-ellipsis {\n width: 1rem;\n display: inline-block;\n font-weight: $font-weight-bold;\n }\n\n .glyph {\n line-height: unset;\n }\n }\n\n .crumb-items {\n display: contents;\n }\n\n @include breadcrumb('btn');\n @include breadcrumb('ghost');\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} from '@stencil/core';\nimport animejs from 'animejs';\nimport { createMutationObserver } from '../utils/mutation-observer';\n\n@Component({\n tag: 'ix-breadcrumb',\n styleUrl: 'breadcrumb.scss',\n scoped: true,\n})\nexport class Breadcrumb {\n /\n Excess items will get hidden inside of dropdown\n /\n @Prop() visibleItemCount = 9;\n\n /\n Items will be accessible through a dropdown\n /\n @Prop() nextItems: string[] = [];\n\n /\n Ghost breadcrumbs will not show solid backgrounds on individual crumbs unless there is a mouse event (e.g. hover)\n /\n @Prop() ghost = false;\n\n /\n Crumb item clicked event\n /\n @Event() itemClick: EventEmitter<string>;\n\n /\n Next item clicked event\n */\n @Event() nextClick: EventEmitter<{ event: UIEvent; item: string }>;\n\n @State() previousButtonRef: HTMLElement;\n\n @State() nextButtonRef: HTMLElement;\n\n @Element() hostElement: HTMLIxBreadcrumbElement;\n\n get breadcrumbItems() {\n return Array.from(this.hostElement.querySelectorAll('ix-breadcrumb-item'));\n }\n\n get crumbItems() {\n return Array.from(this.hostElement.querySelectorAll('.crumb-items .crumb'));\n }\n\n @State() items: { label: string; icon?: string }[] = [];\n\n private mutationObserver: MutationObserver;\n\n private onItemClick(item: string) {\n this.itemClick.emit(item);\n }\n\n componentDidLoad() {\n this.mutationObserver = createMutationObserver(() => {\n const updatedItems = this.getItems();\n const update = () => {\n this.items = updatedItems;\n };\n\n if (updatedItems.length >= this.items.length) {\n update();\n } else if (updatedItems.length < this.items.length) {\n const last = this.crumbItems[this.crumbItems.length - 1] as HTMLElement;\n this.animationFadeOut(last, () => update());\n }\n });\n\n this.mutationObserver.observe(\n this.hostElement.querySelector('.crumb-items'),\n {\n subtree: true,\n childList: true,\n }\n );\n }\n\n componentWillLoad() {\n this.items = this.getItems();\n }\n\n private getItems() {\n return this.breadcrumbItems.map((item) => {\n return { label: item.label, icon: item.icon };\n });\n }\n\n disconnectedCallback() {\n this.mutationObserver?.disconnect();\n }\n\n private animationFadeOut(ref: HTMLElement, complete: () => void) {\n animejs({\n targets: ref,\n translateX: '-100%',\n duration: 150,\n opacity: [1, 0],\n easing: 'linear',\n complete: () => complete(),\n });\n }\n\n private animationFadeIn(ref: HTMLElement) {\n animejs({\n targets: ref,\n duration: 150,\n opacity: [0, 1],\n translateX: ['-100%', '0%'],\n easing: 'linear',\n });\n }\n\n private handleLastButtonRef(ref: HTMLDivElement, last: boolean) {\n if (last) {\n this.animationFadeIn(ref);\n }\n if (last && this.nextItems?.length) {\n this.nextButtonRef = ref;\n }\n }\n\n private sliceHiddenItems() {\n let sliceIndex = 0;\n\n if (this.items.length > this.visibleItemCount) {\n sliceIndex = this.items.length - this.visibleItemCount;\n }\n\n return this.items.slice(sliceIndex);\n }\n\n private clickItem(item: string, last: boolean) {\n if (!last) {\n this.onItemClick(item);\n }\n }\n\n private renderBreadcrumbItems() {\n return this.sliceHiddenItems().map((item, index, array) => {\n const last = index === array.length - 1;\n\n const isLastItem = last && !this.nextItems?.length;\n return (\n <div\n ref={(ref) => this.handleLastButtonRef(ref, last)}\n data-breadcrumb={index}\n class={{\n crumb: true,\n clickable: true,\n ghost: this.ghost,\n btn: !this.ghost,\n last: isLastItem,\n 'remove-hover': isLastItem,\n }}\n onClick={() => this.clickItem(item.label, last)}\n data-testid=\"item\"\n >\n <span class=\"crumb-text remove-anchor\">\n {item.icon ? <ix-icon name={item.icon} size=\"16\"></ix-icon> : ''}\n <span\n style={{\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n }}\n >\n {item.label}\n </span>\n </span>\n {!isLastItem ? (\n <span class=\"glyph glyph-18 glyph-chevron-right-small text-default-text\"></span>\n ) : null}\n </div>\n );\n });\n }\n\n render() {\n return (\n <Host>\n <ix-dropdown\n trigger={\n this.items?.length > this.visibleItemCount\n ? this.previousButtonRef\n : null\n }\n >\n {this.items\n .slice(0, this.items.length - this.visibleItemCount)\n .map((item) => (\n <ix-dropdown-item\n label={item.label}\n onClick={() => this.onItemClick(item.label)}\n ></ix-dropdown-item>\n ))}\n </ix-dropdown>\n {this.items?.length > this.visibleItemCount ? (\n <div\n class=\"crumb crumb-dropdown\"\n ref={(ref) => (this.previousButtonRef = ref)}\n >\n <span class=\"remove-anchor more-text\">\n <span class=\"more-text-ellipsis\">...</span>\n <span class=\"glyph glyph-16 glyph-chevron-right\"></span>\n </span>\n </div>\n ) : null}\n <div class=\"crumb-items\">\n {this.renderBreadcrumbItems()}\n <slot></slot>\n </div>\n <ix-dropdown trigger={this.nextButtonRef}>\n {this.nextItems?.map((item) => (\n <ix-dropdown-item\n label={item}\n onClick={(e) => {\n this.nextClick.emit({\n event: e,\n item,\n });\n }}\n ></ix-dropdown-item>\n ))}\n </ix-dropdown>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-breadcrumb.js","mappings":"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","names":[],"sources":["./src/components/breadcrumb/breadcrumb.scss?tag=ix-breadcrumb&encapsulation=shadow","./src/components/breadcrumb/breadcrumb.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'common-variables';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n\n display: flex;\n justify-content: flex-start;\n height: 2.5rem;\n align-items: center;\n background-color: transparent;\n overflow: hidden;\n\n .previous-button {\n width: 3rem;\n min-width: 0px;\n }\n\n .crumb-dropdown {\n overflow: visible;\n }\n\n .remove-anchor::after {\n display: none;\n }\n\n .more-text {\n display: flex;\n\n .more-text-ellipsis {\n width: 1rem;\n display: inline-block;\n font-weight: $font-weight-bold;\n }\n\n ix-icon {\n // line-height: unset; --> Note: 'line-height' can't be applied due to shadow DOM encapsulation at ix-icon\n // using padding-top to achieve same position as before\n padding-top: 2px;\n }\n }\n\n nav,\n ol,\n .crumb-items {\n display: contents;\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 forceUpdate,\n h,\n Host,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { a11yBoolean, a11yHostAttributes } from '../utils/a11y';\nimport { createMutationObserver } from '../utils/mutation-observer';\n\nlet sequenceId = 0;\nconst createId = (prefix: string = 'breadcrumb-') => {\n return `${prefix}-${sequenceId++}`;\n};\n\n@Component({\n tag: 'ix-breadcrumb',\n styleUrl: 'breadcrumb.scss',\n shadow: true,\n})\nexport class Breadcrumb {\n @Element() hostElement!: HTMLIxBreadcrumbElement;\n\n /\n Excess items will get hidden inside of dropdown\n /\n @Prop() visibleItemCount = 9;\n\n /\n Items will be accessible through a dropdown\n /\n @Prop() nextItems: string[] = [];\n @Watch('nextItems')\n onNextItemsChange() {\n this.onChildMutation();\n }\n\n /\n Ghost breadcrumbs will not show solid backgrounds on individual crumbs unless there is a mouse event (e.g. hover)\n /\n @Prop() ghost = true;\n\n /\n Accessibility label for the dropdown button (ellipsis icon) used to access the dropdown list\n * with conditionally hidden previous items\n \n @since 2.0.0\n /\n @Prop() ariaLabelPreviousButton = 'previous';\n\n /\n Crumb item clicked event\n /\n @Event() itemClick: EventEmitter<string>;\n\n /\n Next item clicked event\n */\n @Event() nextClick: EventEmitter<{ event: UIEvent; item: string }>;\n\n @State() previousButtonRef: HTMLElement;\n @State() nextButtonRef: HTMLElement;\n @State() items: HTMLIxBreadcrumbItemElement[] = [];\n @State() isPreviousDropdownExpanded = false;\n\n private mutationObserver: MutationObserver;\n\n private previousButtonId = createId();\n private previousDropdownId = createId();\n\n private onItemClick(item: string) {\n this.itemClick.emit(item);\n }\n\n componentDidLoad() {\n this.mutationObserver = createMutationObserver(() =>\n this.onChildMutation()\n );\n\n this.mutationObserver.observe(this.hostElement, {\n subtree: true,\n childList: true,\n });\n }\n\n componentWillLoad() {\n this.onChildMutation();\n }\n\n disconnectedCallback() {\n this.mutationObserver?.disconnect();\n }\n\n private async onChildMutation() {\n const updatedItems = this.getItems();\n\n updatedItems.forEach((bc, index) => {\n const shouldShowDropdown =\n this.nextItems.length !== 0 && updatedItems.length - 1 === index;\n\n bc.ghost = this.ghost;\n bc.showChevron = updatedItems.length - 1 !== index \|\| shouldShowDropdown;\n bc.isDropdownTrigger = shouldShowDropdown;\n\n if (shouldShowDropdown) {\n this.nextButtonRef = bc;\n }\n\n if (updatedItems.length < this.visibleItemCount) {\n return;\n }\n\n bc.visible = index >= updatedItems.length - this.visibleItemCount;\n });\n\n this.items = updatedItems;\n }\n\n private getItems() {\n return Array.from(this.hostElement.querySelectorAll('ix-breadcrumb-item'));\n }\n\n render() {\n const a11y = a11yHostAttributes(this.hostElement);\n return (\n <Host>\n <ix-dropdown\n id={this.previousDropdownId}\n aria-label={this.ariaLabelPreviousButton}\n trigger={\n this.items?.length > this.visibleItemCount\n ? this.previousButtonRef\n : null\n }\n onShowChanged={({ detail }) => {\n this.isPreviousDropdownExpanded = detail;\n\n // Need to force update previous button to change `aria-expanded`\n forceUpdate(\n this.hostElement.shadowRoot.getElementById(this.previousButtonId)\n );\n }}\n >\n {this.items\n .slice(0, this.items.length - this.visibleItemCount)\n .map((item) => {\n const label = item.label ?? item.innerText;\n\n return (\n <ix-dropdown-item\n label={label}\n onClick={() => {\n this.onItemClick(label);\n }}\n onItemClick={(event) => event.stopPropagation()}\n ></ix-dropdown-item>\n );\n })}\n </ix-dropdown>\n {this.items?.length > this.visibleItemCount ? (\n <ix-breadcrumb-item\n id={this.previousButtonId}\n ref={(ref) => (this.previousButtonRef = ref)}\n label=\"...\"\n tabIndex={1}\n onItemClick={(event) => event.stopPropagation()}\n aria-describedby={this.previousDropdownId}\n aria-controls={this.previousDropdownId}\n aria-expanded={a11yBoolean(this.isPreviousDropdownExpanded)}\n class={'previous-button'}\n ></ix-breadcrumb-item>\n ) : null}\n <nav\n class=\"crumb-items\"\n aria-label={a11y['aria-label'] ?? 'breadcrumbs'}\n >\n <ol>\n <slot></slot>\n </ol>\n </nav>\n <ix-dropdown trigger={this.nextButtonRef}>\n {this.nextItems?.map((item) => (\n <ix-dropdown-item\n label={item}\n onClick={(e) => {\n this.nextClick.emit({\n event: e,\n item,\n });\n }}\n onItemClick={(event) => event.stopPropagation()}\n ></ix-dropdown-item>\n ))}\n </ix-dropdown>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/ix-card-list.js CHANGED Viewed

@@ -1,13 +1,14 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as createMutationObserver } from './mutation-observer.js';
-import { d as defineCustomElement$7 } from './button.js';
-import { d as defineCustomElement$6 } from './card.js';
-import { d as defineCustomElement$5 } from './card-content.js';
-import { d as defineCustomElement$4 } from './icon.js';
-import { d as defineCustomElement$3 } from './icon-button.js';
+import { d as defineCustomElement$8 } from './button.js';
+import { d as defineCustomElement$7 } from './card.js';
+import { d as defineCustomElement$6 } from './card-content.js';
+import { d as defineCustomElement$5 } from './icon.js';
+import { d as defineCustomElement$4 } from './icon-button.js';
+import { d as defineCustomElement$3 } from './spinner.js';
 import { d as defineCustomElement$2 } from './typography.js';
-const cardListCss = ":host{display:flex;position:relative;flex-direction:column;align-items:flex-start;margin:0.5rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host .CardList_Title{display:flex;position:relative;height:1.5rem;align-items:center;width:100%;margin-bottom:0.5rem}:host .CardList__Title__Button{margin-right:1rem;transition:var(--theme-default-time) transform ease-in-out}:host .CardList__Title__Button__Collapsed{transform:rotate(-90deg)}:host .CardList__Title__Show__All{align-self:center;margin-left:auto;margin-right:0px}:host .CardList__Content{display:flex;position:relative;height:calc(100% - 1.5rem);width:100%;gap:1.5rem;transition:var(--theme-default-time) ease-in-out;overflow:auto}:host .CardList__Content__Collapsed{min-height:0px;max-height:0px;overflow:hidden;opacity:0}:host .CardList__Style__Flexbox__Scroll{flex-wrap:wrap}:host .CardList__Style__Infinite__Scroll{flex-wrap:nowrap;-ms-overflow-style:none;scrollbar-width:none}:host .CardList__Style__Infinite__Scroll::-webkit-scrollbar{display:none}:host .CardList__Overflow{display:block;position:relative;height:100%;width:100%;pointer-events:all;-webkit-mask-image:var(--ix-card-list-overflow, none);mask-image:var(--ix-card-list-overflow, none)}:host .Show__All__Card{display:flex;position:relative;align-self:flex-start;justify-self:center;max-width:11.25rem;min-width:11.25rem;width:11.25rem;min-height:11.25rem;max-height:11.25rem;height:11.25rem;--ix-card-border-color:var(--theme-color-primary);color:var(--theme-color-primary)}:host .CardList__Style__Infinite__Scroll .Show__All__Card{margin-top:2.375rem}:host .CardList__Style__Flexbox__Scroll .Show__All__Card{margin-bottom:2.375rem}:host .Show__All__Card:hover{background-color:var(--theme-color-ghost--hover)}:host .Show__All__Card:active{background-color:var(--theme-color-ghost--active)}:host .Show__All__Card__Content{display:flex;justify-content:center;align-items:center}:host .Show__All__Card__Icon{display:flex;position:absolute;height:4rem;width:4rem;justify-content:center;align-items:center;transform:scale(2)}:host .Show__All__Card__Text{margin-bottom:0px;margin-top:auto}";
+const cardListCss = ":host{display:flex;position:relative;flex-direction:column;align-items:flex-start;margin:0.5rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .CardList_Title{display:flex;position:relative;height:1.5rem;align-items:center;width:100%;margin-bottom:0.5rem}:host .CardList__Title__Button{margin-right:1rem;transition:var(--theme-default-time) transform ease-in-out}:host .CardList__Title__Button__Collapsed{transform:rotate(-90deg)}:host .CardList__Title__Show__All{align-self:center;margin-left:auto;margin-right:0px}:host .CardList__Content{display:flex;position:relative;height:calc(100% - 1.5rem);width:100%;gap:1.5rem;transition:var(--theme-default-time) ease-in-out;overflow:auto}:host .CardList__Content__Collapsed{min-height:0px;max-height:0px;overflow:hidden;opacity:0}:host .CardList__Style__Flexbox__Scroll{flex-wrap:wrap}:host .CardList__Style__Infinite__Scroll{flex-wrap:nowrap;-ms-overflow-style:none;scrollbar-width:none}:host .CardList__Style__Infinite__Scroll::-webkit-scrollbar{display:none}:host .CardList__Overflow{display:block;position:relative;height:100%;width:100%;pointer-events:all;-webkit-mask-image:var(--ix-card-list-overflow, none);mask-image:var(--ix-card-list-overflow, none)}:host .Show__All__Card{display:flex;position:relative;align-self:flex-start;justify-self:center;max-width:11.25rem;min-width:11.25rem;width:11.25rem;min-height:11.25rem;max-height:11.25rem;height:11.25rem;--ix-card-border-color:var(--theme-color-primary);color:var(--theme-color-primary)}:host .CardList__Style__Infinite__Scroll .Show__All__Card{margin-top:2.375rem}:host .CardList__Style__Flexbox__Scroll .Show__All__Card{margin-bottom:2.375rem}:host .Show__All__Card:hover{background-color:var(--theme-color-ghost--hover)}:host .Show__All__Card:active{background-color:var(--theme-color-ghost--active)}:host .Show__All__Card__Content{display:flex;justify-content:center;align-items:center}:host .Show__All__Card__Icon{display:flex;position:absolute;height:4rem;width:4rem;justify-content:center;align-items:center;transform:scale(2)}:host .Show__All__Card__Text{margin-bottom:0px;margin-top:auto}";
 function CardListTitle(props) {
   if (props.label === '') {
@@ -180,7 +181,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["ix-card-list", "ix-button", "ix-card", "ix-card-content", "ix-icon", "ix-icon-button", "ix-typography"];
+  const components = ["ix-card-list", "ix-button", "ix-card", "ix-card-content", "ix-icon", "ix-icon-button", "ix-spinner", "ix-typography"];
   components.forEach(tagName => { switch (tagName) {
     case "ix-card-list":
       if (!customElements.get(tagName)) {
@@ -189,25 +190,30 @@ function defineCustomElement$1() {
       break;
     case "ix-button":
       if (!customElements.get(tagName)) {
-        defineCustomElement$7();
+        defineCustomElement$8();
       }
       break;
     case "ix-card":
       if (!customElements.get(tagName)) {
-        defineCustomElement$6();
+        defineCustomElement$7();
       }
       break;
     case "ix-card-content":
       if (!customElements.get(tagName)) {
-        defineCustomElement$5();
+        defineCustomElement$6();
       }
       break;
     case "ix-icon":
       if (!customElements.get(tagName)) {
-        defineCustomElement$4();
+        defineCustomElement$5();
       }
       break;
     case "ix-icon-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "ix-spinner":
       if (!customElements.get(tagName)) {
         defineCustomElement$3();
       }