npm - @siemens/ix - Versions diffs - 0.0.0-pr-2155-20250924075220 → 0.0.0-pr-2166-20251001083917 - Mend

@siemens/ix 0.0.0-pr-2155-20250924075220 → 0.0.0-pr-2166-20251001083917

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 (786) hide show

package/dist/collection/components/avatar/avatar.js CHANGED Viewed

@@ -98,7 +98,7 @@ export class Avatar {
                 "docs": {
                     "tags": [{
                             "name": "deprecated",
-                            "text": "Set the native `aria-label` on the ix-avatar host element"
+                            "text": "Set the native `aria-label` on the ix-avatar host element. Will be removed in 5.0.0"
                         }],
                     "text": "Accessibility label for the image\nWill be set as aria-label on the nested HTML img element"
                 },

package/dist/collection/components/avatar/avatar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../../src/components/avatar/avatar.tsx"],"names":[],"mappings":"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","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\nimport {\n Component,\n Element,\n Fragment,\n h,\n Host,\n Prop,\n readTask,\n State,\n} from '@stencil/core';\nimport { BaseButton } from '../button/base-button';\nimport { a11yBoolean, a11yHostAttributes } from '../utils/a11y';\nimport { makeRef } from '../utils/make-ref';\nimport { closestElement, hasSlottedElements } from '../utils/shadow-dom';\n\nfunction DefaultAvatar(\n props: Readonly<{ initials?: string; a11yLabel?: string }>\n) {\n const { initials } = props;\n\n if (initials) {\n return (\n <div class={'avatar-initials'}>\n <ix-typography format=\"label-lg\">{initials}</ix-typography>\n </div>\n );\n }\n\n return (\n <svg\n class={'avatar-image'}\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"32\"\n height=\"32\"\n viewBox=\"0 0 32 32\"\n aria-label={props.a11yLabel}\n >\n <g fill=\"none\" fill-rule=\"evenodd\">\n <path\n id=\"avatar-path-background\"\n d=\"M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163\n 16-16c0-4.243-1.686-8.313-4.686-11.314C24.314 1.686 20.244 0 16 0z\"\n />\n <path\n id=\"avatar-path-person\"\n d=\"M17.897 17.91c3.8-.018 7.358 1.875 9.485 5.046-2.417 3.999-6.734 6.434-11.382\n 6.42-4.648.014-8.965-2.421-11.382-6.42 2.127-3.171 5.685-5.064\n 9.485-5.045h3.794zM15.821 2.129c3.682 0 6.667 2.984 6.667 6.666 0 3.682-2.985\n 6.667-6.667 6.667s-6.667-2.985-6.667-6.667 2.985-6.666 6.667-6.666z\"\n />\n </g>\n </svg>\n );\n}\n\nfunction AvatarImage(\n props: Readonly<{\n image?: string;\n initials?: string;\n a11yLabel?: string;\n }>\n) {\n return (\n <div class=\"avatar\">\n {props.image ? (\n <img\n src={props.image}\n class=\"avatar-image\"\n aria-label={props.a11yLabel}\n ></img>\n ) : (\n <DefaultAvatar initials={props.initials} a11yLabel={props.a11yLabel} />\n )}\n </div>\n );\n}\n\nfunction UserInfo(\n props: Readonly<{\n image?: string;\n initials?: string;\n userName: string;\n extra?: string;\n a11yLabel?: string;\n }>\n) {\n return (\n <Fragment>\n <div class=\"user-info\" onClick={(event) => event.preventDefault()}>\n <AvatarImage\n image={props.image}\n initials={props.initials}\n a11yLabel={props.a11yLabel}\n />\n <div class=\"user\">\n <div class=\"username\">{props.userName}</div>\n {props.extra && (\n <ix-typography class=\"extra\" text-color={'soft'}>\n {props.extra}\n </ix-typography>\n )}\n </div>\n </div>\n </Fragment>\n );\n}\n\n@Component({\n tag: 'ix-avatar',\n styleUrl: 'avatar.scss',\n shadow: true,\n})\nexport class Avatar {\n @Element() hostElement!: HTMLIxAvatarElement;\n\n /\n Accessibility label for the image\n * Will be set as aria-label on the nested HTML img element\n \n @deprecated Set the native `aria-label` on the ix-avatar host element\n /\n @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;\n\n /\n Display an avatar image\n \n /\n @Prop() image?: string;\n\n /*\n Display the initials of the user. Will be overwritten by image\n \n /\n @Prop() initials?: string;\n\n /*\n If set an info card displaying the username will be placed inside the dropdown.\n * Note: Only working if avatar is part of the ix-application-header\n /\n @Prop() username?: string;\n\n /\n Optional description text that will be displayed underneath the username.\n * Note: Only working if avatar is part of the ix-application-header\n /\n @Prop() extra?: string;\n\n /\n Text to display in a tooltip when hovering over the avatar\n \n @since 4.0.0\n /\n @Prop() tooltipText?: string;\n\n /\n aria-label for the tooltip\n \n @since 4.0.0\n */\n @Prop() ariaLabelTooltip?: string;\n\n @State() isClosestApplicationHeader = false;\n @State() hasSlottedElements = false;\n\n private slotElement?: HTMLSlotElement;\n private dropdownElement?: HTMLIxDropdownElement;\n\n private readonly tooltipRef = makeRef<HTMLIxTooltipElement>();\n\n componentWillLoad() {\n const closest = closestElement('ix-application-header', this.hostElement);\n this.isClosestApplicationHeader = closest !== null;\n }\n\n private async slottedChanged() {\n this.hasSlottedElements = hasSlottedElements(this.slotElement);\n }\n\n private resolveAvatarTrigger() {\n return new Promise<HTMLElement>((resolve, reject) => {\n readTask(() => {\n const button = this.hostElement.shadowRoot!.querySelector('button');\n if (button) {\n resolve(button);\n } else {\n reject(new Error('ix-avatar - trigger element not found'));\n }\n });\n });\n }\n\n private onDropdownClick(event: MouseEvent) {\n if (event.target === this.dropdownElement) {\n event.preventDefault();\n }\n }\n\n render() {\n const a11y = a11yHostAttributes(this.hostElement);\n const a11yLabel = a11y['aria-label'];\n\n const tooltipText = this.tooltipText \|\| this.username;\n const ariaHidden = tooltipText === this.username;\n\n const Avatar = (\n <Fragment>\n <AvatarImage\n image={this.image}\n initials={this.initials}\n a11yLabel={a11yLabel ?? this.a11yLabel}\n />\n {!!tooltipText && (\n <ix-tooltip\n ref={this.tooltipRef}\n for={this.hostElement}\n aria-hidden={a11yBoolean(ariaHidden)}\n aria-label={this.ariaLabelTooltip}\n >\n {tooltipText}\n </ix-tooltip>\n )}\n </Fragment>\n );\n\n if (this.isClosestApplicationHeader) {\n return (\n <Host slot=\"ix-application-header-avatar\" class={'avatar-button'}>\n <BaseButton\n disabled={false}\n iconOval={false}\n icon={undefined}\n iconOnly={false}\n loading={false}\n selected={false}\n type=\"button\"\n variant=\"tertiary\"\n >\n {Avatar}\n </BaseButton>\n <ix-dropdown\n ref={(ref) => (this.dropdownElement = ref as HTMLIxDropdownElement)}\n trigger={this.resolveAvatarTrigger()}\n class=\"avatar-dropdown\"\n onClick={(e) => this.onDropdownClick(e)}\n onShowChanged={(event) => {\n if (event.detail && this.tooltipRef.current) {\n this.tooltipRef.current.hideTooltip(0);\n }\n }}\n >\n {this.username && (\n <Fragment>\n <UserInfo\n extra={this.extra}\n image={this.image}\n initials={this.initials}\n userName={this.username}\n a11yLabel={a11yLabel ?? this.a11yLabel}\n />\n {this.hasSlottedElements && (\n <ix-divider onClick={(e) => e.preventDefault()}></ix-divider>\n )}\n </Fragment>\n )}\n <slot\n onSlotchange={() => this.slottedChanged()}\n ref={(ref) => (this.slotElement = ref as HTMLSlotElement)}\n ></slot>\n </ix-dropdown>\n </Host>\n );\n }\n\n return <Host>{Avatar}</Host>;\n }\n}\n"]}
1	+ {"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../../src/components/avatar/avatar.tsx"],"names":[],"mappings":"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","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\nimport {\n Component,\n Element,\n Fragment,\n h,\n Host,\n Prop,\n readTask,\n State,\n} from '@stencil/core';\nimport { BaseButton } from '../button/base-button';\nimport { a11yBoolean, a11yHostAttributes } from '../utils/a11y';\nimport { makeRef } from '../utils/make-ref';\nimport { closestElement, hasSlottedElements } from '../utils/shadow-dom';\n\nfunction DefaultAvatar(\n props: Readonly<{ initials?: string; a11yLabel?: string }>\n) {\n const { initials } = props;\n\n if (initials) {\n return (\n <div class={'avatar-initials'}>\n <ix-typography format=\"label-lg\">{initials}</ix-typography>\n </div>\n );\n }\n\n return (\n <svg\n class={'avatar-image'}\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"32\"\n height=\"32\"\n viewBox=\"0 0 32 32\"\n aria-label={props.a11yLabel}\n >\n <g fill=\"none\" fill-rule=\"evenodd\">\n <path\n id=\"avatar-path-background\"\n d=\"M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163\n 16-16c0-4.243-1.686-8.313-4.686-11.314C24.314 1.686 20.244 0 16 0z\"\n />\n <path\n id=\"avatar-path-person\"\n d=\"M17.897 17.91c3.8-.018 7.358 1.875 9.485 5.046-2.417 3.999-6.734 6.434-11.382\n 6.42-4.648.014-8.965-2.421-11.382-6.42 2.127-3.171 5.685-5.064\n 9.485-5.045h3.794zM15.821 2.129c3.682 0 6.667 2.984 6.667 6.666 0 3.682-2.985\n 6.667-6.667 6.667s-6.667-2.985-6.667-6.667 2.985-6.666 6.667-6.666z\"\n />\n </g>\n </svg>\n );\n}\n\nfunction AvatarImage(\n props: Readonly<{\n image?: string;\n initials?: string;\n a11yLabel?: string;\n }>\n) {\n return (\n <div class=\"avatar\">\n {props.image ? (\n <img\n src={props.image}\n class=\"avatar-image\"\n aria-label={props.a11yLabel}\n ></img>\n ) : (\n <DefaultAvatar initials={props.initials} a11yLabel={props.a11yLabel} />\n )}\n </div>\n );\n}\n\nfunction UserInfo(\n props: Readonly<{\n image?: string;\n initials?: string;\n userName: string;\n extra?: string;\n a11yLabel?: string;\n }>\n) {\n return (\n <Fragment>\n <div class=\"user-info\" onClick={(event) => event.preventDefault()}>\n <AvatarImage\n image={props.image}\n initials={props.initials}\n a11yLabel={props.a11yLabel}\n />\n <div class=\"user\">\n <div class=\"username\">{props.userName}</div>\n {props.extra && (\n <ix-typography class=\"extra\" text-color={'soft'}>\n {props.extra}\n </ix-typography>\n )}\n </div>\n </div>\n </Fragment>\n );\n}\n\n@Component({\n tag: 'ix-avatar',\n styleUrl: 'avatar.scss',\n shadow: true,\n})\nexport class Avatar {\n @Element() hostElement!: HTMLIxAvatarElement;\n\n /\n Accessibility label for the image\n * Will be set as aria-label on the nested HTML img element\n \n @deprecated Set the native `aria-label` on the ix-avatar host element. Will be removed in 5.0.0\n /\n @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;\n\n /\n Display an avatar image\n \n /\n @Prop() image?: string;\n\n /*\n Display the initials of the user. Will be overwritten by image\n \n /\n @Prop() initials?: string;\n\n /*\n If set an info card displaying the username will be placed inside the dropdown.\n * Note: Only working if avatar is part of the ix-application-header\n /\n @Prop() username?: string;\n\n /\n Optional description text that will be displayed underneath the username.\n * Note: Only working if avatar is part of the ix-application-header\n /\n @Prop() extra?: string;\n\n /\n Text to display in a tooltip when hovering over the avatar\n \n @since 4.0.0\n /\n @Prop() tooltipText?: string;\n\n /\n aria-label for the tooltip\n \n @since 4.0.0\n */\n @Prop() ariaLabelTooltip?: string;\n\n @State() isClosestApplicationHeader = false;\n @State() hasSlottedElements = false;\n\n private slotElement?: HTMLSlotElement;\n private dropdownElement?: HTMLIxDropdownElement;\n\n private readonly tooltipRef = makeRef<HTMLIxTooltipElement>();\n\n componentWillLoad() {\n const closest = closestElement('ix-application-header', this.hostElement);\n this.isClosestApplicationHeader = closest !== null;\n }\n\n private async slottedChanged() {\n this.hasSlottedElements = hasSlottedElements(this.slotElement);\n }\n\n private resolveAvatarTrigger() {\n return new Promise<HTMLElement>((resolve, reject) => {\n readTask(() => {\n const button = this.hostElement.shadowRoot!.querySelector('button');\n if (button) {\n resolve(button);\n } else {\n reject(new Error('ix-avatar - trigger element not found'));\n }\n });\n });\n }\n\n private onDropdownClick(event: MouseEvent) {\n if (event.target === this.dropdownElement) {\n event.preventDefault();\n }\n }\n\n render() {\n const a11y = a11yHostAttributes(this.hostElement);\n const a11yLabel = a11y['aria-label'];\n\n const tooltipText = this.tooltipText \|\| this.username;\n const ariaHidden = tooltipText === this.username;\n\n const Avatar = (\n <Fragment>\n <AvatarImage\n image={this.image}\n initials={this.initials}\n a11yLabel={a11yLabel ?? this.a11yLabel}\n />\n {!!tooltipText && (\n <ix-tooltip\n ref={this.tooltipRef}\n for={this.hostElement}\n aria-hidden={a11yBoolean(ariaHidden)}\n aria-label={this.ariaLabelTooltip}\n >\n {tooltipText}\n </ix-tooltip>\n )}\n </Fragment>\n );\n\n if (this.isClosestApplicationHeader) {\n return (\n <Host slot=\"ix-application-header-avatar\" class={'avatar-button'}>\n <BaseButton\n disabled={false}\n iconOval={false}\n icon={undefined}\n iconOnly={false}\n loading={false}\n selected={false}\n type=\"button\"\n variant=\"tertiary\"\n >\n {Avatar}\n </BaseButton>\n <ix-dropdown\n ref={(ref) => (this.dropdownElement = ref as HTMLIxDropdownElement)}\n trigger={this.resolveAvatarTrigger()}\n class=\"avatar-dropdown\"\n onClick={(e) => this.onDropdownClick(e)}\n onShowChanged={(event) => {\n if (event.detail && this.tooltipRef.current) {\n this.tooltipRef.current.hideTooltip(0);\n }\n }}\n >\n {this.username && (\n <Fragment>\n <UserInfo\n extra={this.extra}\n image={this.image}\n initials={this.initials}\n userName={this.username}\n a11yLabel={a11yLabel ?? this.a11yLabel}\n />\n {this.hasSlottedElements && (\n <ix-divider onClick={(e) => e.preventDefault()}></ix-divider>\n )}\n </Fragment>\n )}\n <slot\n onSlotchange={() => this.slottedChanged()}\n ref={(ref) => (this.slotElement = ref as HTMLSlotElement)}\n ></slot>\n </ix-dropdown>\n </Host>\n );\n }\n\n return <Host>{Avatar}</Host>;\n }\n}\n"]}

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

@@ -27,7 +27,7 @@ export class Breadcrumb {
         /**
          * Ghost breadcrumbs will not show solid backgrounds on individual crumbs unless there is a mouse event (e.g. hover)
          */
-        this.ghost = true;
+        this.subtle = false;
         /**
          * Accessibility label for the dropdown button (ellipsis icon) used to access the dropdown list
          * with conditionally hidden previous items
@@ -64,8 +64,8 @@ export class Breadcrumb {
         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.subtle = this.subtle;
+            bc.hideChevron = updatedItems.length - 1 !== index || !shouldShowDropdown;
             bc.isDropdownTrigger = shouldShowDropdown;
             if (shouldShowDropdown) {
                 this.nextButtonRef(bc);
@@ -73,7 +73,7 @@ export class Breadcrumb {
             if (updatedItems.length < this.visibleItemCount) {
                 return;
             }
-            bc.visible = index >= updatedItems.length - this.visibleItemCount;
+            bc.invisible = index < updatedItems.length - this.visibleItemCount;
         });
         this.items = updatedItems;
     }
@@ -83,7 +83,7 @@ export class Breadcrumb {
     render() {
         var _a, _b, _c, _d;
         const a11y = a11yHostAttributes(this.hostElement);
-        return (h(Host, { key: 'cd3fb633db6e273763b650dee6cf699190f9c66c' }, h("ix-dropdown", { key: '4bb90841a1e65c3c43a5897cd3b7baffa304df6e', id: this.previousDropdownId, "aria-label": this.ariaLabelPreviousButton, trigger: ((_a = this.items) === null || _a === void 0 ? void 0 : _a.length) > this.visibleItemCount
+        return (h(Host, { key: '12f8783a3a970031434ab062dba6ced47c167570' }, h("ix-dropdown", { key: 'c3d871fa0f8cdc9cb49f5449de13f599452ba323', 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, onShowChanged: ({ detail }) => {
                 this.isPreviousDropdownExpanded = detail;
@@ -100,7 +100,7 @@ export class Breadcrumb {
             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: 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: '153d49ef29065bcc78cb3b06a1bcc6341b028cca', class: "crumb-items", "aria-label": (_c = a11y['aria-label']) !== null && _c !== void 0 ? _c : 'breadcrumbs' }, h("ol", { key: '1d7dcd947a111b74dcee6779968b52f63e36c984' }, h("slot", { key: 'c9d8ac0c01834d40d2ca1d3acfbb323d04954669' }))), h("ix-dropdown", { key: 'ba8cb0f0ffd45556b76be3e65d45c742ab2312ed', trigger: this.nextButtonRef.waitForCurrent() }, (_d = this.nextItems) === null || _d === void 0 ? void 0 : _d.map((item) => (h("ix-dropdown-item", { label: item, onClick: (e) => {
+        })), ((_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: '076d1d44094bbd01bce51daf92bc8ad28f93f224', class: "crumb-items", "aria-label": (_c = a11y['aria-label']) !== null && _c !== void 0 ? _c : 'breadcrumbs' }, h("ol", { key: 'edd1719a74b337e52d6f2e30d7ea7040ef2c1640' }, h("slot", { key: '8ec35c7e353630c9d9ba4839c6d33b7e68a25e74' }))), h("ix-dropdown", { key: '8750f9d8b51762d5a2fc4303e4c34f048383f8fd', trigger: this.nextButtonRef.waitForCurrent() }, (_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,
@@ -160,9 +160,9 @@ export class Breadcrumb {
                 "setter": false,
                 "defaultValue": "[]"
             },
-            "ghost": {
+            "subtle": {
                 "type": "boolean",
-                "attribute": "ghost",
+                "attribute": "subtle",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -178,7 +178,7 @@ export class Breadcrumb {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "defaultValue": "true"
+                "defaultValue": "false"
             },
             "ariaLabelPreviousButton": {
                 "type": "string",

package/dist/collection/components/breadcrumb/breadcrumb.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"breadcrumb.js","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb.tsx"],"names":[],"mappings":"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","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\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';\nimport { makeRef } from '../utils/make-ref';\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 @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 private readonly previousButtonRef = makeRef<HTMLIxBreadcrumbItemElement>();\n private readonly nextButtonRef = makeRef<HTMLElement>();\n\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.waitForCurrent()\n : undefined\n }\n onShowChanged={({ detail }) => {\n this.isPreviousDropdownExpanded = detail;\n\n const previousButton = this.hostElement.shadowRoot!.getElementById(\n this.previousButtonId\n );\n\n // Need to force update previous button to change `aria-expanded`\n if (previousButton) {\n forceUpdate(previousButton);\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={this.previousButtonRef}\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.waitForCurrent()}>\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"]}
1	+ {"version":3,"file":"breadcrumb.js","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb.tsx"],"names":[],"mappings":"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","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\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';\nimport { makeRef } from '../utils/make-ref';\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() subtle = false;\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 @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 private readonly previousButtonRef = makeRef<HTMLIxBreadcrumbItemElement>();\n private readonly nextButtonRef = makeRef<HTMLElement>();\n\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.subtle = this.subtle;\n bc.hideChevron = 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.invisible = 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.waitForCurrent()\n : undefined\n }\n onShowChanged={({ detail }) => {\n this.isPreviousDropdownExpanded = detail;\n\n const previousButton = this.hostElement.shadowRoot!.getElementById(\n this.previousButtonId\n );\n\n // Need to force update previous button to change `aria-expanded`\n if (previousButton) {\n forceUpdate(previousButton);\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={this.previousButtonRef}\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.waitForCurrent()}>\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"]}

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

@@ -21,11 +21,11 @@ export class BreadcrumbItem {
          */
         this.target = '_self';
         /**@internal */
-        this.ghost = true;
+        this.subtle = false;
         /**@internal */
-        this.visible = true;
+        this.invisible = false;
         /**@internal */
-        this.showChevron = true;
+        this.hideChevron = false;
         /** @internal */
         this.isDropdownTrigger = false;
     }
@@ -49,7 +49,7 @@ export class BreadcrumbItem {
     }
     render() {
         const props = {
-            variant: this.ghost ? 'tertiary' : 'subtle-primary',
+            variant: this.subtle ? 'subtle-primary' : 'tertiary',
             iconOnly: false,
             iconOval: false,
             disabled: false,
@@ -67,12 +67,12 @@ export class BreadcrumbItem {
             target: this.target,
             rel: this.rel,
         };
-        if (!this.visible) {
+        if (this.invisible) {
             return h(Host, { class: 'invisible' });
         }
         return (h(Host, { class: {
-                'hide-chevron': !this.showChevron,
-            }, onClick: () => this.itemClick.emit(this.label) }, h("li", null, h(BaseButton, Object.assign({}, props, { afterContent: h(Fragment, null, this.showChevron ? (h("ix-icon", { name: iconChevronRightSmall, size: "16", class: 'chevron' })) : null) }), this.label, h("slot", null)))));
+                'hide-chevron': this.hideChevron,
+            }, onClick: () => this.itemClick.emit(this.label) }, h("li", null, h(BaseButton, Object.assign({}, props, { afterContent: h(Fragment, null, !this.hideChevron && (h("ix-icon", { name: iconChevronRightSmall, size: "16", class: 'chevron' }))) }), this.label, h("slot", null)))));
     }
     static get is() { return "ix-breadcrumb-item"; }
     static get encapsulation() { return "shadow"; }
@@ -221,9 +221,9 @@ export class BreadcrumbItem {
                 "setter": false,
                 "reflect": false
             },
-            "ghost": {
+            "subtle": {
                 "type": "boolean",
-                "attribute": "ghost",
+                "attribute": "subtle",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -242,11 +242,11 @@ export class BreadcrumbItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "defaultValue": "true"
+                "defaultValue": "false"
             },
-            "visible": {
+            "invisible": {
                 "type": "boolean",
-                "attribute": "visible",
+                "attribute": "invisible",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -265,11 +265,11 @@ export class BreadcrumbItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "defaultValue": "true"
+                "defaultValue": "false"
             },
-            "showChevron": {
+            "hideChevron": {
                 "type": "boolean",
-                "attribute": "show-chevron",
+                "attribute": "hide-chevron",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -288,7 +288,7 @@ export class BreadcrumbItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "defaultValue": "true"
+                "defaultValue": "false"
             },
             "isDropdownTrigger": {
                 "type": "boolean",

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

	@@ -1 +1 @@
1	- {"version":3,"file":"breadcrumb-item.js","sourceRoot":"","sources":["../../../src/components/breadcrumb-item/breadcrumb-item.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,QAAQ,EACR,CAAC,EACD,IAAI,EACJ,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClC,OAAO,EAAE,UAAU,EAAmB,MAAM,uBAAuB,CAAC;AACpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,SAAS,MAAM,oBAAoB,CAAC;AAQ3C,MAAM,OAAO,cAAc;IAL3B;QAiCE;;;;WAIG;QACK,WAAM,GAAkB,OAAO,CAAC;QASxC,eAAe;QACP,~~UAAK~~,GAAY,~~IAAI~~,CAAC;~~QAE9B~~,eAAe;QACP,~~YAAO~~,GAAG,~~IAAI~~,CAAC;~~QAEvB~~,eAAe;QACP,gBAAW,GAAG,~~IAAI~~,CAAC;~~QAE3B~~,gBAAgB;QACR,sBAAiB,GAAG,KAAK,CAAC;KAmFnC;IA5EC,gBAAgB;QACd,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,IAAI,GAAG,kBAAkB,CAAC,IAAI,CAAC,WAAW,EAAE;YAC/C,kBAAkB;YAClB,eAAe;YACf,eAAe;SAChB,CAAC,CAAC;IACL,CAAC;IAED,eAAe;QACb,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE;YACxB,QAAQ,EAAE,SAAS,CAAC,WAAW;YAC/B,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;YACf,UAAU,EAAE,CAAC,OAAO,EAAE,IAAI,CAAC;YAC3B,MAAM,EAAE,QAAQ;SACjB,CAAC,CAAC;IACL,CAAC;IAED,MAAM;QACJ,MAAM,KAAK,GAAoB;YAC7B,OAAO,EAAE,IAAI,CAAC,~~KAAK~~,CAAC,CAAC,CAAC,~~UAAU~~,CAAC,CAAC,CAAC,~~gBAAgB~~;~~YACnD~~,QAAQ,EAAE,KAAK;YACf,QAAQ,EAAE,KAAK;YACf,QAAQ,EAAE,KAAK;YACf,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,QAAQ,EAAE,IAAI;YACd,OAAO,EAAE,KAAK;YACd,QAAQ,EAAE,KAAK;YACf,IAAI,EAAE,QAAQ;YACd,QAAQ,EACN,IAAI,CAAC,WAAW,CAAC,QAAQ,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;YAClE,YAAY,EAAE;gBACZ,kBAAkB,EAAE,IAAI,CAAC,iBAAiB;aAC3C;YACD,cAAc,kCAAO,IAAI,CAAC,IAAI,KAAE,YAAY,EAAE,IAAI,CAAC,eAAe,GAAE;YACpE,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,GAAG,EAAE,IAAI,CAAC,GAAG;SACd,CAAC;QAEF,IAAI,~~CAAC,~~IAAI,CAAC,~~OAAO~~,EAAE,CAAC;~~YAClB~~,OAAO,EAAC,IAAI,IAAC,KAAK,EAAE,WAAW,GAAS,CAAC;QAC3C,CAAC;QAED,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;gBACL,cAAc,EAAE,~~CAAC,~~IAAI,CAAC,WAAW;~~aAClC~~,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;YAE9C;gBACE,EAAC,UAAU,oBACL,KAAK,IACT,YAAY,EACV,EAAC,QAAQ,QACN,IAAI,CAAC,WAAW,~~CAAC~~,~~CAAC~~,~~CAAC,CAClB,~~eACE,IAAI,EAAE,qBAAqB,EAC3B,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,SAAS,GACP,CACZ,~~CAAC,CAAC,CAAC,IAAI,CACC~~;oBAGZ,IAAI,CAAC,KAAK;oBACX,eAAa,CACF,CACV,CACA,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n Fragment,\n h,\n Host,\n Prop,\n State,\n} from '@stencil/core';\nimport { animate } from 'animejs';\nimport { BaseButton, BaseButtonProps } from '../button/base-button';\nimport { a11yHostAttributes } from '../utils/a11y';\nimport { iconChevronRightSmall } from '@siemens/ix-icons/icons';\nimport Animation from '../utils/animation';\nimport { AnchorInterface, AnchorTarget } from '../button/button.interface';\n\n@Component({\n tag: 'ix-breadcrumb-item',\n styleUrl: 'breadcrumb-item.scss',\n shadow: true,\n})\nexport class BreadcrumbItem implements AnchorInterface {\n @Element() hostElement!: HTMLIxBreadcrumbItemElement;\n\n /\n ARIA label for the button\n * Will be set as aria-label for the nested HTML button element\n \n @since 3.2.0\n /\n @Prop() ariaLabelButton?: string;\n\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 /\n URL for the button link. When provided, the button will render as an anchor tag.\n \n @since 4.0.0\n /\n @Prop() href?: string;\n\n /\n Specifies where to open the linked document when href is provided.\n \n @since 4.0.0\n /\n @Prop() target?: AnchorTarget = '_self';\n\n /\n Specifies the relationship between the current document and the linked document when href is provided.\n \n @since 4.0.0\n /\n @Prop() rel?: string;\n\n /@internal /\n @Prop() ~~ghost~~: boolean = ~~true~~;\n\n /*@internal /\n @Prop() ~~visible~~ = ~~true~~;\n\n /*@internal /\n @Prop() ~~showChevron~~ = ~~true~~;\n\n /** @internal /\n @Prop() isDropdownTrigger = false;\n\n /@internal /\n @Event() itemClick!: EventEmitter<string>;\n\n @State() a11y: any;\n\n componentDidLoad() {\n this.animationFadeIn();\n }\n\n componentWillLoad() {\n this.a11y = a11yHostAttributes(this.hostElement, [\n 'aria-describedby',\n 'aria-controls',\n 'aria-expanded',\n ]);\n }\n\n animationFadeIn() {\n animate(this.hostElement, {\n duration: Animation.defaultTime,\n opacity: [0, 1],\n translateX: ['-100%', '0%'],\n easing: 'linear',\n });\n }\n\n render() {\n const props: BaseButtonProps = {\n variant: this.~~ghost~~ ? '~~tertiary~~' : '~~subtle-primary~~',\n iconOnly: false,\n iconOval: false,\n disabled: false,\n icon: this.icon,\n iconSize: '16',\n loading: false,\n selected: false,\n type: 'button',\n tabIndex:\n this.hostElement.tabIndex !== -1 ? this.hostElement.tabIndex : 0,\n extraClasses: {\n 'dropdown-trigger': this.isDropdownTrigger,\n },\n ariaAttributes: { ...this.a11y, 'aria-label': this.ariaLabelButton },\n href: this.href,\n target: this.target,\n rel: this.rel,\n };\n\n if (!this.~~visible~~) {\n return <Host class={'invisible'}></Host>;\n }\n\n return (\n <Host\n class={{\n 'hide-chevron': !this.~~showChevron~~,\n }}\n onClick={() => this.itemClick.emit(this.label)}\n >\n <li>\n <BaseButton\n {...props}\n afterContent={\n <Fragment>\n {this.~~showChevron~~ ? (\n <ix-icon\n name={iconChevronRightSmall}\n size=\"16\"\n class={'chevron'}\n ></ix-icon>\n ) ~~: null~~}\n </Fragment>\n }\n >\n {this.label}\n <slot></slot>\n </BaseButton>\n </li>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"breadcrumb-item.js","sourceRoot":"","sources":["../../../src/components/breadcrumb-item/breadcrumb-item.tsx"],"names":[],"mappings":"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","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\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n Fragment,\n h,\n Host,\n Prop,\n State,\n} from '@stencil/core';\nimport { animate } from 'animejs';\nimport { BaseButton, BaseButtonProps } from '../button/base-button';\nimport { a11yHostAttributes } from '../utils/a11y';\nimport { iconChevronRightSmall } from '@siemens/ix-icons/icons';\nimport Animation from '../utils/animation';\nimport { AnchorInterface, AnchorTarget } from '../button/button.interface';\n\n@Component({\n tag: 'ix-breadcrumb-item',\n styleUrl: 'breadcrumb-item.scss',\n shadow: true,\n})\nexport class BreadcrumbItem implements AnchorInterface {\n @Element() hostElement!: HTMLIxBreadcrumbItemElement;\n\n /\n ARIA label for the button\n * Will be set as aria-label for the nested HTML button element\n \n @since 3.2.0\n /\n @Prop() ariaLabelButton?: string;\n\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 /\n URL for the button link. When provided, the button will render as an anchor tag.\n \n @since 4.0.0\n /\n @Prop() href?: string;\n\n /\n Specifies where to open the linked document when href is provided.\n \n @since 4.0.0\n /\n @Prop() target?: AnchorTarget = '_self';\n\n /\n Specifies the relationship between the current document and the linked document when href is provided.\n \n @since 4.0.0\n /\n @Prop() rel?: string;\n\n /@internal /\n @Prop() subtle: boolean = false;\n\n /*@internal /\n @Prop() invisible = false;\n\n /*@internal /\n @Prop() hideChevron = false;\n\n /** @internal /\n @Prop() isDropdownTrigger = false;\n\n /@internal /\n @Event() itemClick!: EventEmitter<string>;\n\n @State() a11y: any;\n\n componentDidLoad() {\n this.animationFadeIn();\n }\n\n componentWillLoad() {\n this.a11y = a11yHostAttributes(this.hostElement, [\n 'aria-describedby',\n 'aria-controls',\n 'aria-expanded',\n ]);\n }\n\n animationFadeIn() {\n animate(this.hostElement, {\n duration: Animation.defaultTime,\n opacity: [0, 1],\n translateX: ['-100%', '0%'],\n easing: 'linear',\n });\n }\n\n render() {\n const props: BaseButtonProps = {\n variant: this.subtle ? 'subtle-primary' : 'tertiary',\n iconOnly: false,\n iconOval: false,\n disabled: false,\n icon: this.icon,\n iconSize: '16',\n loading: false,\n selected: false,\n type: 'button',\n tabIndex:\n this.hostElement.tabIndex !== -1 ? this.hostElement.tabIndex : 0,\n extraClasses: {\n 'dropdown-trigger': this.isDropdownTrigger,\n },\n ariaAttributes: { ...this.a11y, 'aria-label': this.ariaLabelButton },\n href: this.href,\n target: this.target,\n rel: this.rel,\n };\n\n if (this.invisible) {\n return <Host class={'invisible'}></Host>;\n }\n\n return (\n <Host\n class={{\n 'hide-chevron': this.hideChevron,\n }}\n onClick={() => this.itemClick.emit(this.label)}\n >\n <li>\n <BaseButton\n {...props}\n afterContent={\n <Fragment>\n {!this.hideChevron && (\n <ix-icon\n name={iconChevronRightSmall}\n size=\"16\"\n class={'chevron'}\n ></ix-icon>\n )}\n </Fragment>\n }\n >\n {this.label}\n <slot></slot>\n </BaseButton>\n </li>\n </Host>\n );\n }\n}\n"]}

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

@@ -155,16 +155,16 @@ export class CardList {
         }
     }
     render() {
-        return (h(Host, { key: '24928c2456c3823567af36ee4cee653e83701f44' }, h(CardListTitle, { key: '958a9dbb219eda7df70c3049ada48281de096e26', isCollapsed: this.collapse, label: this.label, showAllLabel: this.i18nShowAll, showAllCounter: this.showAllCount === undefined
+        return (h(Host, { key: '0ea1452be92d5b2de585b7fbcb1b872fd4d58974' }, h(CardListTitle, { key: '56f8e679e46885b2019dd1c2acb09270a820ccae', isCollapsed: this.collapse, label: this.label, showAllLabel: this.i18nShowAll, showAllCounter: this.showAllCount === undefined
                 ? this.numberOfAllChildElements
-                : this.showAllCount, onClick: () => this.onCardListVisibilityToggle(), onShowAllClick: (e) => this.onShowAllClick(e), hideShowAll: this.hideShowAll }), h("div", { key: '7a543496658701aceadf21c4b48a307788193eb4', class: {
+                : this.showAllCount, onClick: () => this.onCardListVisibilityToggle(), onShowAllClick: (e) => this.onShowAllClick(e), hideShowAll: this.hideShowAll }), h("div", { key: '19948560fdc32722316db928f265889b3ccd1db8', class: {
                 CardList__Overflow: true,
-            }, style: this.computeMaskLayer() }, h("div", { key: 'b46cebc7ddbb173d63d06f81147b612c2e2a140e', class: {
+            }, style: this.computeMaskLayer() }, h("div", { key: '8064717801d3389a5293c3a00a5bf87702096109', class: {
                 CardList__Content: true,
                 CardList__Content__Collapsed: this.collapse,
                 CardList__Style__Flexbox__Scroll: this.listStyle === 'stack',
                 CardList__Style__Infinite__Scroll: this.listStyle === 'scroll',
-            }, onScroll: () => this.onCardListScroll() }, h("slot", { key: '137e6930ffe0094140771ce69bfefc05367c9d79', onSlotchange: () => this.changeVisibilityOfSlotChildren() }), this.isShowMoreCardVisible() ? (h("ix-card", { class: {
+            }, onScroll: () => this.onCardListScroll() }, h("slot", { key: 'ac6d044003c53fcbee03dc945e7e9c926f0fef07', onSlotchange: () => this.changeVisibilityOfSlotChildren() }), this.isShowMoreCardVisible() ? (h("ix-card", { class: {
                 Show__All__Card: true,
             }, onClick: (event) => this.showMoreCardClick.emit({
                 nativeEvent: event,
@@ -349,7 +349,7 @@ export class CardList {
             },
             "i18nShowAll": {
                 "type": "string",
-                "attribute": "i-1-8n-show-all",
+                "attribute": "i18n-show-all",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -369,7 +369,7 @@ export class CardList {
             },
             "i18nMoreCards": {
                 "type": "string",
-                "attribute": "i-1-8n-more-cards",
+                "attribute": "i18n-more-cards",
                 "mutable": false,
                 "complexType": {
                     "original": "string",

package/dist/collection/components/card-list/card-list.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"card-list.js","sourceRoot":"","sources":["../../../src/components/card-list/card-list.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Prop,\n State,\n} from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { iconChevronDown, iconMoreMenu } from '@siemens/ix-icons/icons';\n\nfunction CardListTitle(props: {\n label?: string;\n ariaLabelExpandButton?: string;\n isCollapsed: boolean;\n onClick: (e: MouseEvent) => void;\n onShowAllClick: (e: MouseEvent) => void;\n showAllLabel: string;\n showAllCounter: number;\n hideShowAll: boolean;\n}) {\n if (!props.label) {\n return null;\n }\n\n return (\n <div class=\"CardList_Title\">\n <ix-icon-button\n variant=\"tertiary\"\n icon={iconChevronDown}\n onClick={props.onClick}\n iconColor=\"color-primary\"\n class={{\n CardList__Title__Button: true,\n CardList__Title__Button__Collapsed: props.isCollapsed,\n }}\n aria-label={props.ariaLabelExpandButton}\n ></ix-icon-button>\n <ix-typography class=\"CardList_Title__Label\" format=\"body-lg\">\n {props.label}\n </ix-typography>\n {!props.hideShowAll && (\n <ix-button\n class=\"CardList__Title__Show__All\"\n variant=\"tertiary\"\n onClick={props.onShowAllClick}\n >\n <span>{props.showAllLabel}</span>\n <span>\n {!isNaN(props.showAllCounter) ? ` (${props.showAllCounter})` : null}\n </span>\n </ix-button>\n )}\n </div>\n );\n}\n\n@Component({\n tag: 'ix-card-list',\n styleUrl: 'card-list.scss',\n shadow: true,\n})\nexport class CardList {\n /*\n ARIA label for the card's expand button.\n * Will be set as aria-label on the nested HTML button element\n \n @since 3.2.0\n /\n @Prop() ariaLabelExpandButton?: string;\n\n /\n Name the card list\n /\n @Prop() label?: string;\n\n /\n Collapse the list\n /\n @Prop({ mutable: true }) collapse = false;\n\n /\n List style\n /\n @Prop() listStyle: 'stack' \| 'scroll' = 'stack';\n\n /\n Maximal visible cards\n \n @internal\n /\n @Prop() maxVisibleCards = 12;\n\n /\n Overwrite the default show all count.\n * /\n @Prop() showAllCount?: number;\n\n /\n Suppress the overflow handling of child elements\n /\n @Prop() suppressOverflowHandling = false;\n\n /\n Hide the show all button\n /\n @Prop() hideShowAll = false;\n\n /\n i18n Show all button\n /\n @Prop() i18nShowAll = 'Show all';\n\n /\n i18n More cards available\n /\n @Prop() i18nMoreCards = 'There are more cards available';\n\n /\n Fire event when the collapse state is changed by the user\n /\n @Event() collapseChanged!: EventEmitter<boolean>;\n\n /\n Fire event when the collapse state is changed by the user\n /\n @Event() showAllClick!: EventEmitter<{\n nativeEvent: MouseEvent;\n }>;\n\n /\n Fire event when the show more card is clicked.\n /\n @Event() showMoreCardClick!: EventEmitter<{\n nativeEvent: MouseEvent;\n }>;\n\n @Element() hostElement!: HTMLIxCardListElement;\n\n @State() private hasOverflowingElements = false;\n @State() private numberOfOverflowingElements = 0;\n @State() private numberOfAllChildElements = 0;\n @State() private leftScrollDistance = 0;\n @State() private rightScrollDistance = 0;\n\n private observer?: MutationObserver;\n\n private onCardListVisibilityToggle() {\n this.collapse = !this.collapse;\n this.collapseChanged.emit(this.collapse);\n }\n\n private onShowAllClick(event: MouseEvent) {\n this.showAllClick.emit({\n nativeEvent: event,\n });\n }\n\n private getListChildren() {\n const slot = this.hostElement.shadowRoot!.querySelector(\n '.CardList__Content > slot'\n ) as HTMLSlotElement;\n return slot.assignedElements({ flatten: true });\n }\n\n private changeVisibilityOfSlotChildren() {\n const childElements = this.getListChildren();\n childElements.forEach((element, index) => {\n if (element instanceof HTMLElement) {\n if (index > this.maxVisibleCards - 1) {\n element.classList.add('display-none');\n return;\n }\n element.classList.remove('display-none');\n }\n });\n this.hasOverflowingElements = childElements.length > this.maxVisibleCards;\n this.numberOfOverflowingElements =\n childElements.length - this.maxVisibleCards;\n\n this.numberOfAllChildElements = childElements.length;\n this.detectOverflow();\n }\n\n private registerOverflowHandler() {\n this.observer = createMutationObserver(() => {\n this.changeVisibilityOfSlotChildren();\n });\n\n this.observer.observe(\n this.hostElement.shadowRoot!.querySelector('.CardList__Content')!,\n {\n childList: true,\n subtree: true,\n }\n );\n\n requestAnimationFrame(() => {\n this.changeVisibilityOfSlotChildren();\n });\n }\n\n private shouldHandleOverflow() {\n if (this.suppressOverflowHandling) {\n return false;\n }\n if (this.listStyle === 'stack' \|\| this.listStyle === 'scroll') {\n return true;\n }\n }\n\n private get listElement() {\n return this.hostElement.shadowRoot!.querySelector('.CardList__Content');\n }\n\n private onCardListScroll() {\n this.detectOverflow();\n }\n\n private isShowMoreCardVisible() {\n return (\n this.suppressOverflowHandling === false && this.hasOverflowingElements\n );\n }\n\n private getOpacityFromScrollDistance(distance: number) {\n if (!this.listElement) {\n return 0;\n }\n\n if (distance === 0) {\n return 0;\n }\n\n if (distance > 100) {\n return 1;\n }\n\n return distance / 100;\n }\n\n private computeMaskLayer() {\n const maxOverflowWidth = 80;\n const maskLayer = `linear-gradient(\n 90deg,\n transparent 0px,\n black ${\n maxOverflowWidth \n (this.getOpacityFromScrollDistance(this.leftScrollDistance) > 0 ? 1 : 0)\n }px,\n black calc(100% - ${\n maxOverflowWidth *\n (this.getOpacityFromScrollDistance(this.rightScrollDistance) > 0\n ? 1\n : 0)\n }px),\n transparent 100%\n )`;\n return {\n '--ix-card-list-overflow': maskLayer,\n };\n }\n\n @Listen('resize', { target: 'window' })\n private detectOverflow() {\n if (!this.listElement) {\n return;\n }\n const { clientWidth, scrollWidth, scrollLeft } = this.listElement;\n\n this.leftScrollDistance = scrollLeft;\n this.rightScrollDistance = scrollWidth - scrollLeft - clientWidth;\n }\n\n componentDidLoad() {\n if (this.shouldHandleOverflow()) {\n this.registerOverflowHandler();\n }\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n }\n\n render() {\n return (\n <Host>\n <CardListTitle\n isCollapsed={this.collapse}\n label={this.label}\n showAllLabel={this.i18nShowAll}\n showAllCounter={\n this.showAllCount === undefined\n ? this.numberOfAllChildElements\n : this.showAllCount\n }\n onClick={() => this.onCardListVisibilityToggle()}\n onShowAllClick={(e) => this.onShowAllClick(e)}\n hideShowAll={this.hideShowAll}\n ></CardListTitle>\n <div\n class={{\n CardList__Overflow: true,\n }}\n style={this.computeMaskLayer()}\n >\n <div\n class={{\n CardList__Content: true,\n CardList__Content__Collapsed: this.collapse,\n CardList__Style__Flexbox__Scroll: this.listStyle === 'stack',\n CardList__Style__Infinite__Scroll: this.listStyle === 'scroll',\n }}\n onScroll={() => this.onCardListScroll()}\n >\n <slot\n onSlotchange={() => this.changeVisibilityOfSlotChildren()}\n ></slot>\n {this.isShowMoreCardVisible() ? (\n <ix-card\n class={{\n Show__All__Card: true,\n }}\n onClick={(event) =>\n this.showMoreCardClick.emit({\n nativeEvent: event,\n })\n }\n >\n <ix-card-content>\n <div class=\"Show__All__Card__Content\">\n <ix-icon\n name={iconMoreMenu}\n size={'32'}\n class={'Show__All__Card__Icon'}\n ></ix-icon>\n <span class=\"Show__All__Card__Text\">\n {this.i18nMoreCards} ({this.numberOfOverflowingElements})\n </span>\n </div>\n </ix-card-content>\n </ix-card>\n ) : null}\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"card-list.js","sourceRoot":"","sources":["../../../src/components/card-list/card-list.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Prop,\n State,\n} from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { iconChevronDown, iconMoreMenu } from '@siemens/ix-icons/icons';\n\nfunction CardListTitle(props: {\n label?: string;\n ariaLabelExpandButton?: string;\n isCollapsed: boolean;\n onClick: (e: MouseEvent) => void;\n onShowAllClick: (e: MouseEvent) => void;\n showAllLabel: string;\n showAllCounter: number;\n hideShowAll: boolean;\n}) {\n if (!props.label) {\n return null;\n }\n\n return (\n <div class=\"CardList_Title\">\n <ix-icon-button\n variant=\"tertiary\"\n icon={iconChevronDown}\n onClick={props.onClick}\n iconColor=\"color-primary\"\n class={{\n CardList__Title__Button: true,\n CardList__Title__Button__Collapsed: props.isCollapsed,\n }}\n aria-label={props.ariaLabelExpandButton}\n ></ix-icon-button>\n <ix-typography class=\"CardList_Title__Label\" format=\"body-lg\">\n {props.label}\n </ix-typography>\n {!props.hideShowAll && (\n <ix-button\n class=\"CardList__Title__Show__All\"\n variant=\"tertiary\"\n onClick={props.onShowAllClick}\n >\n <span>{props.showAllLabel}</span>\n <span>\n {!isNaN(props.showAllCounter) ? ` (${props.showAllCounter})` : null}\n </span>\n </ix-button>\n )}\n </div>\n );\n}\n\n@Component({\n tag: 'ix-card-list',\n styleUrl: 'card-list.scss',\n shadow: true,\n})\nexport class CardList {\n /*\n ARIA label for the card's expand button.\n * Will be set as aria-label on the nested HTML button element\n \n @since 3.2.0\n /\n @Prop() ariaLabelExpandButton?: string;\n\n /\n Name the card list\n /\n @Prop() label?: string;\n\n /\n Collapse the list\n /\n @Prop({ mutable: true }) collapse = false;\n\n /\n List style\n /\n @Prop() listStyle: 'stack' \| 'scroll' = 'stack';\n\n /\n Maximal visible cards\n \n @internal\n /\n @Prop() maxVisibleCards = 12;\n\n /\n Overwrite the default show all count.\n * /\n @Prop() showAllCount?: number;\n\n /\n Suppress the overflow handling of child elements\n /\n @Prop() suppressOverflowHandling = false;\n\n /\n Hide the show all button\n /\n @Prop() hideShowAll = false;\n\n /\n i18n Show all button\n /\n @Prop({ attribute: 'i18n-show-all' }) i18nShowAll = 'Show all';\n\n /\n i18n More cards available\n /\n @Prop({ attribute: 'i18n-more-cards' }) i18nMoreCards =\n 'There are more cards available';\n\n /\n Fire event when the collapse state is changed by the user\n /\n @Event() collapseChanged!: EventEmitter<boolean>;\n\n /\n Fire event when the collapse state is changed by the user\n /\n @Event() showAllClick!: EventEmitter<{\n nativeEvent: MouseEvent;\n }>;\n\n /\n Fire event when the show more card is clicked.\n /\n @Event() showMoreCardClick!: EventEmitter<{\n nativeEvent: MouseEvent;\n }>;\n\n @Element() hostElement!: HTMLIxCardListElement;\n\n @State() private hasOverflowingElements = false;\n @State() private numberOfOverflowingElements = 0;\n @State() private numberOfAllChildElements = 0;\n @State() private leftScrollDistance = 0;\n @State() private rightScrollDistance = 0;\n\n private observer?: MutationObserver;\n\n private onCardListVisibilityToggle() {\n this.collapse = !this.collapse;\n this.collapseChanged.emit(this.collapse);\n }\n\n private onShowAllClick(event: MouseEvent) {\n this.showAllClick.emit({\n nativeEvent: event,\n });\n }\n\n private getListChildren() {\n const slot = this.hostElement.shadowRoot!.querySelector(\n '.CardList__Content > slot'\n ) as HTMLSlotElement;\n return slot.assignedElements({ flatten: true });\n }\n\n private changeVisibilityOfSlotChildren() {\n const childElements = this.getListChildren();\n childElements.forEach((element, index) => {\n if (element instanceof HTMLElement) {\n if (index > this.maxVisibleCards - 1) {\n element.classList.add('display-none');\n return;\n }\n element.classList.remove('display-none');\n }\n });\n this.hasOverflowingElements = childElements.length > this.maxVisibleCards;\n this.numberOfOverflowingElements =\n childElements.length - this.maxVisibleCards;\n\n this.numberOfAllChildElements = childElements.length;\n this.detectOverflow();\n }\n\n private registerOverflowHandler() {\n this.observer = createMutationObserver(() => {\n this.changeVisibilityOfSlotChildren();\n });\n\n this.observer.observe(\n this.hostElement.shadowRoot!.querySelector('.CardList__Content')!,\n {\n childList: true,\n subtree: true,\n }\n );\n\n requestAnimationFrame(() => {\n this.changeVisibilityOfSlotChildren();\n });\n }\n\n private shouldHandleOverflow() {\n if (this.suppressOverflowHandling) {\n return false;\n }\n if (this.listStyle === 'stack' \|\| this.listStyle === 'scroll') {\n return true;\n }\n }\n\n private get listElement() {\n return this.hostElement.shadowRoot!.querySelector('.CardList__Content');\n }\n\n private onCardListScroll() {\n this.detectOverflow();\n }\n\n private isShowMoreCardVisible() {\n return (\n this.suppressOverflowHandling === false && this.hasOverflowingElements\n );\n }\n\n private getOpacityFromScrollDistance(distance: number) {\n if (!this.listElement) {\n return 0;\n }\n\n if (distance === 0) {\n return 0;\n }\n\n if (distance > 100) {\n return 1;\n }\n\n return distance / 100;\n }\n\n private computeMaskLayer() {\n const maxOverflowWidth = 80;\n const maskLayer = `linear-gradient(\n 90deg,\n transparent 0px,\n black ${\n maxOverflowWidth \n (this.getOpacityFromScrollDistance(this.leftScrollDistance) > 0 ? 1 : 0)\n }px,\n black calc(100% - ${\n maxOverflowWidth *\n (this.getOpacityFromScrollDistance(this.rightScrollDistance) > 0\n ? 1\n : 0)\n }px),\n transparent 100%\n )`;\n return {\n '--ix-card-list-overflow': maskLayer,\n };\n }\n\n @Listen('resize', { target: 'window' })\n private detectOverflow() {\n if (!this.listElement) {\n return;\n }\n const { clientWidth, scrollWidth, scrollLeft } = this.listElement;\n\n this.leftScrollDistance = scrollLeft;\n this.rightScrollDistance = scrollWidth - scrollLeft - clientWidth;\n }\n\n componentDidLoad() {\n if (this.shouldHandleOverflow()) {\n this.registerOverflowHandler();\n }\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n }\n\n render() {\n return (\n <Host>\n <CardListTitle\n isCollapsed={this.collapse}\n label={this.label}\n showAllLabel={this.i18nShowAll}\n showAllCounter={\n this.showAllCount === undefined\n ? this.numberOfAllChildElements\n : this.showAllCount\n }\n onClick={() => this.onCardListVisibilityToggle()}\n onShowAllClick={(e) => this.onShowAllClick(e)}\n hideShowAll={this.hideShowAll}\n ></CardListTitle>\n <div\n class={{\n CardList__Overflow: true,\n }}\n style={this.computeMaskLayer()}\n >\n <div\n class={{\n CardList__Content: true,\n CardList__Content__Collapsed: this.collapse,\n CardList__Style__Flexbox__Scroll: this.listStyle === 'stack',\n CardList__Style__Infinite__Scroll: this.listStyle === 'scroll',\n }}\n onScroll={() => this.onCardListScroll()}\n >\n <slot\n onSlotchange={() => this.changeVisibilityOfSlotChildren()}\n ></slot>\n {this.isShowMoreCardVisible() ? (\n <ix-card\n class={{\n Show__All__Card: true,\n }}\n onClick={(event) =>\n this.showMoreCardClick.emit({\n nativeEvent: event,\n })\n }\n >\n <ix-card-content>\n <div class=\"Show__All__Card__Content\">\n <ix-icon\n name={iconMoreMenu}\n size={'32'}\n class={'Show__All__Card__Icon'}\n ></ix-icon>\n <span class=\"Show__All__Card__Text\">\n {this.i18nMoreCards} ({this.numberOfOverflowingElements})\n </span>\n </div>\n </ix-card-content>\n </ix-card>\n ) : null}\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/category-filter/category-filter.js CHANGED Viewed

@@ -46,22 +46,16 @@ export class CategoryFilter {
          */
         this.hideIcon = false;
         /**
-         * If set to true, allows that a single category can be set more than once.
-         * An already set category will not appear in the category dropdown if set to false.
-         *
-         * Defaults to true
-         */
-        this.repeatCategories = true;
-        /**
-         * @internal For debugging purposes only!
+         * If set to true, prevents that a single category can be set more than once.
+         * An already set category will not appear in the category dropdown if set to true.
          */
-        this.tmpDisableScrollIntoView = true;
+        this.uniqueCategories = false;
         /**
          * i18n
          */
         this.labelCategories = 'Categories';
         /**
-         * i18n
+         * i18n label for 'Filter by text'
          */
         this.i18nPlainText = 'Filter by text';
     }
@@ -315,7 +309,7 @@ export class CategoryFilter {
         this.emitFilterEvent();
     }
     filterMultiples(value) {
-        if (this.repeatCategories) {
+        if (!this.uniqueCategories) {
             return true;
         }
         const isCategoryAlreadySet = this.filterTokens.find((token) => token.id === value);
@@ -461,9 +455,7 @@ export class CategoryFilter {
     componentDidRender() {
         var _a, _b;
         if (this.isScrollStateDirty) {
-            if (!this.tmpDisableScrollIntoView) {
-                (_b = (_a = this.textInput) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.scrollIntoView();
-            }
+            (_b = (_a = this.textInput) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.scrollIntoView();
             this.isScrollStateDirty = false;
         }
     }
@@ -505,19 +497,19 @@ export class CategoryFilter {
     }
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: 'f9440f389259e19514ffa98a88ccb27131dbb7d1' }, h("form", { key: 'c4613c63f246a88feda56778a8d02c154d5d4947', ref: (el) => (this.formElement = el) }, h("div", { key: '1f3710d4b10c45f88c16708485171740f95ad7b2', "read-only": this.readonly, class: {
+        return (h(Host, { key: 'c067de370164a717112829f8be82ac8d786d7622' }, h("form", { key: '2cd185f59a209029a1184790488eb472a8456cbb', ref: (el) => (this.formElement = el) }, h("div", { key: '5d0eed2dacde6318ebe516becdc41b785908c864', "read-only": this.readonly, class: {
                 'input-container': true,
                 disabled: this.disabled,
                 focus: this.hasFocus,
                 readonly: this.readonly,
                 'no-icon': this.hideIcon,
-            } }, h("ix-icon", { key: 'b9325f36c0524729b7f03f782692e8dafe1b4496', color: this.getIconColor(), class: { 'display-none': this.hideIcon }, name: (_a = this.icon) !== null && _a !== void 0 ? _a : iconSearch, size: "16" }), h("div", { key: 'b4dc6e8254acf84678cc6a9eab591f5af3f67bf6', class: "token-container" }, h("div", { key: '4c2670b652f23533275d4fe011d313f63e23e047', class: "list-unstyled" }, this.filterTokens.map((value, index) => (h("span", { key: value.toString(), class: {
+            } }, h("ix-icon", { key: 'ec27370c08d6882c85f29dafb7c9cbf2655cbacf', color: this.getIconColor(), class: { 'display-none': this.hideIcon }, name: (_a = this.icon) !== null && _a !== void 0 ? _a : iconSearch, size: "16" }), h("div", { key: '277a47c6cc91d6b631c01ae4b3f8f21cca29943e', class: "token-container" }, h("div", { key: 'c086102952499cbd43ae910d745be5ef0aa44e40', class: "list-unstyled" }, this.filterTokens.map((value, index) => (h("span", { key: value.toString(), class: {
                 animate__animated: true,
                 animate__fadein: true,
             } }, h("ix-filter-chip", { disabled: this.disabled, readonly: this.readonly, onClick: (e) => e.stopPropagation(), onCloseClick: () => this.removeToken(index) }, this.getFilterChipLabel(value))))), this.categories === undefined ? ('') : (h("span", { class: {
                 'category-preview': true,
                 'display-none': this.category === '',
-            } }, (_b = this.categories[this.category]) === null || _b === void 0 ? void 0 : _b.label)), h("input", Object.assign({ key: 'b25e2a1f6bb30f4bae27a11abe6fa2dd1206fb2c', class: {
+            } }, (_b = this.categories[this.category]) === null || _b === void 0 ? void 0 : _b.label)), h("input", Object.assign({ key: '7f2bdc80da327d2c40f7031259618131a391bd7c', class: {
                 'text-input': true,
                 'hide-placeholder': this.readonly || this.disabled || this.category !== '',
             }, autocomplete: "off", name: "category-filter-input", disabled: this.disabled, readonly: this.readonly, ref: this.textInput, type: "text", placeholder: this.placeholder }, this.a11yAttributes, { "aria-label": this.ariaLabelFilterInput })))), !this.readonly && !this.disabled && this.getResetButton())), this.disabled || this.readonly ? ('') : (h("ix-dropdown", { show: this.showDropdown, closeBehavior: "outside", offset: { mainAxis: 2 }, anchor: (_c = this.textInput) === null || _c === void 0 ? void 0 : _c.waitForCurrent(), trigger: this.hostElement, header: this.getDropdownHeader() }, this.renderDropdownContent()))));
@@ -738,9 +730,9 @@ export class CategoryFilter {
                 "setter": false,
                 "reflect": false
             },
-            "repeatCategories": {
+            "uniqueCategories": {
                 "type": "boolean",
-                "attribute": "repeat-categories",
+                "attribute": "unique-categories",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -751,35 +743,12 @@ export class CategoryFilter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If set to true, allows that a single category can be set more than once.\nAn already set category will not appear in the category dropdown if set to false.\n\nDefaults to true"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "true"
-            },
-            "tmpDisableScrollIntoView": {
-                "type": "boolean",
-                "attribute": "tmp-disable-scroll-into-view",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "internal",
-                            "text": "For debugging purposes only!"
-                        }],
-                    "text": ""
+                    "text": "If set to true, prevents that a single category can be set more than once.\nAn already set category will not appear in the category dropdown if set to true."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "defaultValue": "true"
+                "defaultValue": "false"
             },
             "labelCategories": {
                 "type": "string",
@@ -803,7 +772,7 @@ export class CategoryFilter {
             },
             "i18nPlainText": {
                 "type": "string",
-                "attribute": "i-1-8n-plain-text",
+                "attribute": "i18n-plain-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -814,7 +783,7 @@ export class CategoryFilter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "i18n"
+                    "text": "i18n label for 'Filter by text'"
                 },
                 "getter": false,
                 "setter": false,