npm - @siemens/ix - Versions diffs - 3.0.0-alpha.4 → 3.0.0 - Mend

@siemens/ix 3.0.0-alpha.4 → 3.0.0

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

package/dist/cjs/validation-othAjI_Z.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"validation-othAjI_Z.js","sources":["src/components/utils/input/validation.ts"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { getElement } from '@stencil/core';\nimport { HTMLIxFormComponentElement, IxFormComponent } from '.';\nimport { IxComponent } from '../internal';\n\nexport type ClassMutationObserver = {\n destroy: () => void;\n};\n\nexport async function isTouched<T>(host: IxFormComponent<T>) {\n if (typeof host.isTouched === 'function') {\n return host.isTouched();\n }\n}\n\nexport async function shouldSuppressInternalValidation<T>(\n host: IxFormComponent<T>\n) {\n if (\n host.getAssociatedFormElement &&\n typeof host.getAssociatedFormElement === 'function'\n ) {\n const form = await host.getAssociatedFormElement();\n\n if (!form) {\n return false;\n }\n\n return form.noValidate;\n }\n\n return false;\n}\n\nexport function createClassMutationObserver(\n element: HTMLElement,\n callback: () => void,\n options?: {\n includeChildren?: boolean;\n }\n): ClassMutationObserver {\n const observer = new MutationObserver(callback);\n observer.observe(element, {\n subtree: options?.includeChildren,\n childList: options?.includeChildren,\n attributes: true,\n attributeFilter: ['class'],\n });\n\n return {\n destroy() {\n observer.disconnect();\n },\n };\n}\n\nexport type ValidationResultProperty =\n | 'isInvalid'\n | 'isInvalidByRequired'\n | 'isValid'\n | 'isInfo'\n | 'isWarning';\nexport type ValidationResults = Record<ValidationResultProperty, boolean>;\n\nfunction containsClass(\n hostElement: HTMLIxFormComponentElement<unknown>,\n className: string,\n includeChildren: boolean\n) {\n return (\n hostElement.classList.contains(`${className}`) ||\n (includeChildren ? !!hostElement.querySelector(`.${className}`) : false)\n );\n}\n\nexport function checkFieldClasses(\n hostElement: HTMLIxFormComponentElement<unknown>,\n includeChildren = false\n): ValidationResults {\n return {\n isInvalid: containsClass(hostElement, 'ix-invalid', includeChildren),\n isInvalidByRequired: containsClass(\n hostElement,\n 'ix-invalid--required',\n includeChildren\n ),\n isValid: containsClass(hostElement, 'ix-valid', includeChildren),\n isInfo: containsClass(hostElement, 'ix-info', includeChildren),\n isWarning: containsClass(hostElement, 'ix-warning', includeChildren),\n };\n}\n\nexport function HookValidationLifecycle(options?: {\n includeChildren?: boolean;\n}) {\n return (proto: IxComponent, methodName: string) => {\n let checkIfRequiredFunction: (() => Promise<void>) | null;\n let classMutationObserver: ClassMutationObserver | null;\n const { componentWillLoad, disconnectedCallback, connectedCallback } =\n proto;\n\n proto.connectedCallback = function () {\n const host = getElement(\n this\n ) as unknown as HTMLIxFormComponentElement<unknown>;\n\n checkIfRequiredFunction = async () => {\n const skipValidation = await shouldSuppressInternalValidation(host);\n if (skipValidation) {\n return;\n }\n\n if (host.hasValidValue && typeof host.hasValidValue === 'function') {\n const hasValue = await host.hasValidValue();\n const touched = await isTouched(host);\n\n if (host.required) {\n host.classList.toggle('ix-invalid--required', !hasValue && touched);\n } else {\n host.classList.remove('ix-invalid--required');\n }\n }\n\n if (\n host.getValidityState &&\n typeof host.getValidityState === 'function'\n ) {\n const validityState = await host.getValidityState();\n\n host.classList.toggle(\n `ix-invalid--validity-patternMismatch`,\n validityState.patternMismatch\n );\n }\n };\n\n host.addEventListener('checkedChange', checkIfRequiredFunction);\n host.addEventListener('valueChange', checkIfRequiredFunction);\n host.addEventListener('ixBlur', checkIfRequiredFunction);\n setTimeout(checkIfRequiredFunction);\n return connectedCallback?.call(this);\n };\n\n proto.componentWillLoad = function () {\n const host = getElement(\n this\n ) as unknown as HTMLIxFormComponentElement<unknown>;\n classMutationObserver = createClassMutationObserver(\n host,\n () => {\n const result = checkFieldClasses(host, options?.includeChildren);\n proto[methodName].call(this, result);\n },\n options\n );\n const result = checkFieldClasses(host, options?.includeChildren);\n proto[methodName].call(this, result);\n return componentWillLoad?.call(this);\n };\n\n proto.disconnectedCallback = function () {\n const host = getElement(this);\n\n if (host && classMutationObserver) {\n classMutationObserver.destroy();\n classMutationObserver = null;\n }\n\n if (host && checkIfRequiredFunction) {\n host.removeEventListener('checkedChange', checkIfRequiredFunction);\n host.removeEventListener('valueChange', checkIfRequiredFunction);\n host.removeEventListener('ixBlur', checkIfRequiredFunction);\n checkIfRequiredFunction = null;\n }\n\n return disconnectedCallback?.call(this);\n };\n };\n}\n"],"names":["getElement"],"mappings":"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"}

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

@@ -7,9 +7,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { h, Host } from "@stencil/core";
-/**
- * @since 1.6.0
- */
 export class IxActionCard {
     constructor() {
         /**
@@ -26,7 +23,7 @@ export class IxActionCard {
         this.selected = false;
     }
     render() {
-        return (h(Host, { key: '39a646f71db64b59ba53a54805663851a8f3e284' }, h("ix-card", { key: 'e5eb68de78c4773d001bbabfc99f7bfbad374fe0', selected: this.selected, variant: this.variant, class: 'pointer' }, h("ix-card-content", { key: '5da654e9f30859b19243fef30e5d60dc545a2463' }, this.icon ? (h("ix-icon", { class: 'icon', name: this.icon, size: "32" })) : null, h("div", { key: '8377281c7516efa2c0bd9dfce86b92aa01fb62f1' }, this.heading ? (h("ix-typography", { format: "h4" }, this.heading)) : null, this.subheading ? (h("ix-typography", { format: "h5" }, this.subheading)) : null, h("slot", { key: 'f56da3824a2f808dc547044ae87afce70e3673ef' }))))));
+        return (h(Host, { key: '611489a81be0dda6b92579bc5a8b6442f9c8ba14' }, h("ix-card", { key: '442340c0b4dcf3424187966ca06bf4b329cecda7', selected: this.selected, variant: this.variant, class: 'pointer' }, h("ix-card-content", { key: '755a4d6236f9e89e9c7207c6a16cf90696b0a6dc' }, this.icon ? (h("ix-icon", { class: 'icon', name: this.icon, size: "32" })) : null, h("div", { key: '9482063b3546639e35ae0b6ae88c359fa79587d5' }, this.heading ? (h("ix-typography", { format: "h4" }, this.heading)) : null, this.subheading ? (h("ix-typography", { format: "h5" }, this.subheading)) : null, h("slot", { key: '8b2f720026a55e8b40a829f2c93a003b40cc8f3a' }))))));
     }
     static get is() { return "ix-action-card"; }
     static get encapsulation() { return "shadow"; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"action-card.js","sourceRoot":"","sources":["../../../src/components/action-card/action-card.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;~~AAKzD;;GAEG;AAMH~~,MAAM,OAAO,YAAY;IALzB;QAME;;WAEG;QACK,YAAO,GAAsB,SAAS,CAAC;QAE/C;;WAEG;QACK,SAAI,GAAuB,SAAS,CAAC;QAY7C;;WAEG;QACK,aAAQ,GAAG,KAAK,CAAC;KA4B1B;IA1BC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,gEACE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,SAAS;gBAEhB;oBACG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CACX,eAAS,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,IAAI,GAAW,CAC9D,CAAC,CAAC,CAAC,IAAI;oBACR;wBACG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CACd,qBAAe,MAAM,EAAC,IAAI,IAAE,IAAI,CAAC,OAAO,CAAiB,CAC1D,CAAC,CAAC,CAAC,IAAI;wBACP,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CACjB,qBAAe,MAAM,EAAC,IAAI,IAAE,IAAI,CAAC,UAAU,CAAiB,CAC7D,CAAC,CAAC,CAAC,IAAI;wBACR,8DAAa,CACT,CACU,CACV,CACL,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 { Component, h, Host, Prop } from '@stencil/core';\nimport { CardVariant } from '../card/card';\n\nexport type ActionCardVariant = CardVariant;\n\n/\n @~~since 1.6.0\n /\n@~~Component({\n tag: 'ix-action-card',\n styleUrl: 'action-card.scss',\n shadow: true,\n})\nexport class IxActionCard {\n /\n Card variant\n /\n @Prop() variant: ActionCardVariant = 'outline';\n\n /\n Card icon\n /\n @Prop() icon: string \| undefined = undefined;\n\n /\n Card heading\n /\n @Prop() heading?: string;\n\n /\n Card subheading\n /\n @Prop() subheading?: string;\n\n /\n Card selection\n */\n @Prop() selected = false;\n\n render() {\n return (\n <Host>\n <ix-card\n selected={this.selected}\n variant={this.variant}\n class={'pointer'}\n >\n <ix-card-content>\n {this.icon ? (\n <ix-icon class={'icon'} name={this.icon} size=\"32\"></ix-icon>\n ) : null}\n <div>\n {this.heading ? (\n <ix-typography format=\"h4\">{this.heading}</ix-typography>\n ) : null}\n {this.subheading ? (\n <ix-typography format=\"h5\">{this.subheading}</ix-typography>\n ) : null}\n <slot></slot>\n </div>\n </ix-card-content>\n </ix-card>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"action-card.js","sourceRoot":"","sources":["../../../src/components/action-card/action-card.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAUzD,MAAM,OAAO,YAAY;IALzB;QAME;;WAEG;QACK,YAAO,GAAsB,SAAS,CAAC;QAE/C;;WAEG;QACK,SAAI,GAAuB,SAAS,CAAC;QAY7C;;WAEG;QACK,aAAQ,GAAG,KAAK,CAAC;KA4B1B;IA1BC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,gEACE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,SAAS;gBAEhB;oBACG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CACX,eAAS,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,IAAI,GAAW,CAC9D,CAAC,CAAC,CAAC,IAAI;oBACR;wBACG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CACd,qBAAe,MAAM,EAAC,IAAI,IAAE,IAAI,CAAC,OAAO,CAAiB,CAC1D,CAAC,CAAC,CAAC,IAAI;wBACP,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CACjB,qBAAe,MAAM,EAAC,IAAI,IAAE,IAAI,CAAC,UAAU,CAAiB,CAC7D,CAAC,CAAC,CAAC,IAAI;wBACR,8DAAa,CACT,CACU,CACV,CACL,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 { Component, h, Host, Prop } from '@stencil/core';\nimport { CardVariant } from '../card/card';\n\nexport type ActionCardVariant = CardVariant;\n\n@Component({\n tag: 'ix-action-card',\n styleUrl: 'action-card.scss',\n shadow: true,\n})\nexport class IxActionCard {\n /\n Card variant\n /\n @Prop() variant: ActionCardVariant = 'outline';\n\n /\n Card icon\n /\n @Prop() icon: string \| undefined = undefined;\n\n /\n Card heading\n /\n @Prop() heading?: string;\n\n /\n Card subheading\n /\n @Prop() subheading?: string;\n\n /\n Card selection\n */\n @Prop() selected = false;\n\n render() {\n return (\n <Host>\n <ix-card\n selected={this.selected}\n variant={this.variant}\n class={'pointer'}\n >\n <ix-card-content>\n {this.icon ? (\n <ix-icon class={'icon'} name={this.icon} size=\"32\"></ix-icon>\n ) : null}\n <div>\n {this.heading ? (\n <ix-typography format=\"h4\">{this.heading}</ix-typography>\n ) : null}\n {this.subheading ? (\n <ix-typography format=\"h5\">{this.subheading}</ix-typography>\n ) : null}\n <slot></slot>\n </div>\n </ix-card-content>\n </ix-card>\n </Host>\n );\n }\n}\n"]}

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

@@ -13,9 +13,6 @@ import { useContextProvider } from "../utils/context";
 import { menuController } from "../utils/menu-service/menu-service";
 import { hasSlottedElements } from "../utils/shadow-dom";
 import { themeSwitcher } from "../utils/theme-switcher";
-/**
- * @since 2.1.0
- */
 export class Application {
     constructor() {
         /**
@@ -100,12 +97,12 @@ export class Application {
         });
     }
     render() {
-        return (h(Host, { key: '50ca923e8983045fce768740d5ed1e939f87ab5d', "data-role": "", class: {
+        return (h(Host, { key: '12df5f0b5c589e0174dbf8459d92af4190a96c0f', "data-role": "", class: {
                 [`breakpoint-${this.breakpoint}`]: true,
-            } }, h("slot", { key: '25816ef9a2ca0755899f548d82422b36bdff0ea2', name: "application-header" }), h("div", { key: 'b6decbb58f86e676b0f38f74d1a0b1cf06a0a047', class: "application" }, h("slot", { key: 'ce9aa0dadca4c0fc457f46175accb2f2463b4f99', name: "menu" }), h("aside", { key: '5bbed7f3373138a202c4ac5c5e53db200ae6c497', class: {
+            } }, h("slot", { key: 'a3d1468fbc1193ef21107a230d7306f75f35925b', name: "application-header" }), h("div", { key: 'dc8ede839e213b5998a3ebd419ea2fded65da5eb', class: "application" }, h("slot", { key: 'cfe19639784db5f834c1f19358221694d8a4ae67', name: "menu" }), h("aside", { key: '014df49acba12b350b853084e5a20296d1d905c6', class: {
                 'application-sidebar': true,
                 slotted: this.applicationSidebarSlotted,
-            }, onClick: () => this.onContentClick() }, h("slot", { key: '0d7177030baeb9798a88b596a051e3189e0f48c7', name: "application-sidebar", onSlotchange: () => (this.applicationSidebarSlotted = hasSlottedElements(this.applicationSidebarSlot)) })), h("div", { key: 'fbadd8c31611153d09cb8923a45602ba87066f73', class: "content-area" }, h("main", { key: '1800db092639a1cbcbbc3506a4fe911c3ad8f2df', class: "content", onClick: () => this.onContentClick() }, h("slot", { key: 'b4f6e4327073f70991b6460a7b300721685e615f' })), h("footer", { key: '83534298e878b0ef312ea138e475057d7a81166f', class: "footer" }, h("slot", { key: 'bafee309d2384d9f358c6940f4e647ae267a866b', name: "bottom" }))))));
+            }, onClick: () => this.onContentClick() }, h("slot", { key: '522327d4f0e94b92d0437268e2a7126b153ebc92', name: "application-sidebar", onSlotchange: () => (this.applicationSidebarSlotted = hasSlottedElements(this.applicationSidebarSlot)) })), h("div", { key: '72193d09002c9e34539c3f2f7134b25ec23ebdc3', class: "content-area" }, h("main", { key: '1aa61d4160d06dccda6934f4093148d75530e973', class: "content", onClick: () => this.onContentClick() }, h("slot", { key: 'f893c9dd078ee90fdfc195a4a29677296c2e8856' })), h("footer", { key: 'a8a3e42fc670b3e998e6eb6875e8b76878957b41', class: "footer" }, h("slot", { key: 'cad5c975e5b9698197cdede76f0316264ca92dca', name: "bottom" }))))));
     }
     static get is() { return "ix-application"; }
     static get encapsulation() { return "shadow"; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"application.js","sourceRoot":"","sources":["../../../src/components/application/application.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAChF,OAAO,EACL,wBAAwB,GAEzB,MAAM,qCAAqC,CAAC;AAC7C,OAAO,EAAE,wBAAwB,EAAE,MAAM,qCAAqC,CAAC;AAE/E,OAAO,EAAmB,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AACvE,OAAO,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAC;AACpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,EAAW,aAAa,EAAE,MAAM,yBAAyB,CAAC;~~AAGjE;;GAEG;AAMH~~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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 { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport {\n ApplicationLayoutContext,\n AppSwitchConfiguration,\n} from '../utils/application-layout/context';\nimport { applicationLayoutService } from '../utils/application-layout/service';\nimport { Breakpoint } from '../utils/breakpoints';\nimport { ContextProvider, useContextProvider } from '../utils/context';\nimport { menuController } from '../utils/menu-service/menu-service';\nimport { hasSlottedElements } from '../utils/shadow-dom';\nimport { IxTheme, themeSwitcher } from '../utils/theme-switcher';\nimport { Disposable } from '../utils/typed-event';\n\n/\n @~~since 2.1.0\n /\n@~~Component({\n tag: 'ix-application',\n styleUrl: 'application.scss',\n shadow: true,\n})\nexport class Application {\n @Element() hostElement!: HTMLIxApplicationElement;\n\n /\n Application theme\n /\n @Prop() theme?: IxTheme;\n\n /\n Use the system appearance dark or light\n /\n @Prop() themeSystemAppearance = false;\n\n /\n Change the responsive layout of the menu structure\n /\n @Prop() forceBreakpoint: Breakpoint \| undefined;\n forceLayoutChange(newMode: Breakpoint \| undefined) {\n if (!newMode) {\n applicationLayoutService.enableBreakpointDetection();\n return;\n }\n\n applicationLayoutService.disableBreakpointDetection();\n applicationLayoutService.setBreakpoint(newMode);\n }\n\n /\n Supported layouts\n /\n @Prop() breakpoints: Breakpoint[] = ['sm', 'md', 'lg'];\n @Watch('breakpoints')\n onBreakpointsChange(breakpoints: Breakpoint[]) {\n applicationLayoutService.setBreakpoints(breakpoints);\n }\n\n /\n Define application switch configuration\n */\n @Prop() appSwitchConfig?: AppSwitchConfiguration;\n\n @State() breakpoint: Breakpoint = 'lg';\n @State() applicationSidebarSlotted = false;\n\n private contextProvider?: ContextProvider<typeof ApplicationLayoutContext>;\n\n get menu(): HTMLIxMenuElement \| null {\n return this.hostElement.querySelector('ix-menu');\n }\n\n get applicationSidebarSlot() {\n return this.hostElement.shadowRoot!.querySelector(\n '.application-sidebar slot'\n ) as HTMLSlotElement;\n }\n\n private modeDisposable?: Disposable;\n\n private onContentClick() {\n if (menuController.isPinned) {\n return;\n }\n this.menu?.toggleMenu(false);\n }\n\n componentWillLoad() {\n applicationLayoutService.setBreakpoints(this.breakpoints);\n\n this.contextProvider = useContextProvider(\n this.hostElement,\n ApplicationLayoutContext,\n {\n hideHeader: false,\n host: 'basic-navigation',\n sidebar: this.applicationSidebarSlotted,\n appSwitchConfig: this.appSwitchConfig,\n }\n );\n\n this.modeDisposable = applicationLayoutService.onChange.on((mode) => {\n this.breakpoint = mode;\n });\n this.breakpoint = applicationLayoutService.breakpoint;\n\n if (this.forceBreakpoint) {\n this.forceLayoutChange(this.forceBreakpoint);\n }\n\n this.changeTheme();\n }\n\n disconnectedCallback() {\n this.modeDisposable?.dispose();\n }\n\n @Watch('theme')\n @Watch('themeSystemAppearance')\n private changeTheme() {\n if (!this.theme) {\n if (this.themeSystemAppearance) {\n themeSwitcher.setVariant();\n }\n\n return;\n }\n\n if (themeSwitcher.hasVariantSuffix(this.theme)) {\n themeSwitcher.setTheme(`theme-${this.theme}`);\n return;\n }\n\n themeSwitcher.setTheme(\n `theme-${this.theme}-dark`,\n this.themeSystemAppearance\n );\n }\n\n @Watch('appSwitchConfig')\n @Watch('applicationSidebarSlotted')\n onApplicationSidebarChange() {\n if (!this.contextProvider) {\n console.error('Context provider not available');\n return;\n }\n this.contextProvider.emit({\n hideHeader: false,\n host: 'basic-navigation',\n sidebar: this.applicationSidebarSlotted,\n appSwitchConfig: this.appSwitchConfig,\n });\n }\n\n render() {\n return (\n <Host\n data-role=\"\"\n class={{\n [`breakpoint-${this.breakpoint}`]: true,\n }}\n >\n <slot name=\"application-header\"></slot>\n <div class=\"application\">\n <slot name=\"menu\"></slot>\n <aside\n class={{\n 'application-sidebar': true,\n slotted: this.applicationSidebarSlotted,\n }}\n onClick={() => this.onContentClick()}\n >\n <slot\n name=\"application-sidebar\"\n onSlotchange={() =>\n (this.applicationSidebarSlotted = hasSlottedElements(\n this.applicationSidebarSlot\n ))\n }\n ></slot>\n </aside>\n <div class=\"content-area\">\n <main class=\"content\" onClick={() => this.onContentClick()}>\n <slot></slot>\n </main>\n <footer class=\"footer\">\n <slot name=\"bottom\"></slot>\n </footer>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"application.js","sourceRoot":"","sources":["../../../src/components/application/application.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 { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport {\n ApplicationLayoutContext,\n AppSwitchConfiguration,\n} from '../utils/application-layout/context';\nimport { applicationLayoutService } from '../utils/application-layout/service';\nimport { Breakpoint } from '../utils/breakpoints';\nimport { ContextProvider, useContextProvider } from '../utils/context';\nimport { menuController } from '../utils/menu-service/menu-service';\nimport { hasSlottedElements } from '../utils/shadow-dom';\nimport { IxTheme, themeSwitcher } from '../utils/theme-switcher';\nimport { Disposable } from '../utils/typed-event';\n\n@Component({\n tag: 'ix-application',\n styleUrl: 'application.scss',\n shadow: true,\n})\nexport class Application {\n @Element() hostElement!: HTMLIxApplicationElement;\n\n /\n Application theme\n /\n @Prop() theme?: IxTheme;\n\n /\n Use the system appearance dark or light\n /\n @Prop() themeSystemAppearance = false;\n\n /\n Change the responsive layout of the menu structure\n /\n @Prop() forceBreakpoint: Breakpoint \| undefined;\n forceLayoutChange(newMode: Breakpoint \| undefined) {\n if (!newMode) {\n applicationLayoutService.enableBreakpointDetection();\n return;\n }\n\n applicationLayoutService.disableBreakpointDetection();\n applicationLayoutService.setBreakpoint(newMode);\n }\n\n /\n Supported layouts\n /\n @Prop() breakpoints: Breakpoint[] = ['sm', 'md', 'lg'];\n @Watch('breakpoints')\n onBreakpointsChange(breakpoints: Breakpoint[]) {\n applicationLayoutService.setBreakpoints(breakpoints);\n }\n\n /\n Define application switch configuration\n */\n @Prop() appSwitchConfig?: AppSwitchConfiguration;\n\n @State() breakpoint: Breakpoint = 'lg';\n @State() applicationSidebarSlotted = false;\n\n private contextProvider?: ContextProvider<typeof ApplicationLayoutContext>;\n\n get menu(): HTMLIxMenuElement \| null {\n return this.hostElement.querySelector('ix-menu');\n }\n\n get applicationSidebarSlot() {\n return this.hostElement.shadowRoot!.querySelector(\n '.application-sidebar slot'\n ) as HTMLSlotElement;\n }\n\n private modeDisposable?: Disposable;\n\n private onContentClick() {\n if (menuController.isPinned) {\n return;\n }\n this.menu?.toggleMenu(false);\n }\n\n componentWillLoad() {\n applicationLayoutService.setBreakpoints(this.breakpoints);\n\n this.contextProvider = useContextProvider(\n this.hostElement,\n ApplicationLayoutContext,\n {\n hideHeader: false,\n host: 'basic-navigation',\n sidebar: this.applicationSidebarSlotted,\n appSwitchConfig: this.appSwitchConfig,\n }\n );\n\n this.modeDisposable = applicationLayoutService.onChange.on((mode) => {\n this.breakpoint = mode;\n });\n this.breakpoint = applicationLayoutService.breakpoint;\n\n if (this.forceBreakpoint) {\n this.forceLayoutChange(this.forceBreakpoint);\n }\n\n this.changeTheme();\n }\n\n disconnectedCallback() {\n this.modeDisposable?.dispose();\n }\n\n @Watch('theme')\n @Watch('themeSystemAppearance')\n private changeTheme() {\n if (!this.theme) {\n if (this.themeSystemAppearance) {\n themeSwitcher.setVariant();\n }\n\n return;\n }\n\n if (themeSwitcher.hasVariantSuffix(this.theme)) {\n themeSwitcher.setTheme(`theme-${this.theme}`);\n return;\n }\n\n themeSwitcher.setTheme(\n `theme-${this.theme}-dark`,\n this.themeSystemAppearance\n );\n }\n\n @Watch('appSwitchConfig')\n @Watch('applicationSidebarSlotted')\n onApplicationSidebarChange() {\n if (!this.contextProvider) {\n console.error('Context provider not available');\n return;\n }\n this.contextProvider.emit({\n hideHeader: false,\n host: 'basic-navigation',\n sidebar: this.applicationSidebarSlotted,\n appSwitchConfig: this.appSwitchConfig,\n });\n }\n\n render() {\n return (\n <Host\n data-role=\"\"\n class={{\n [`breakpoint-${this.breakpoint}`]: true,\n }}\n >\n <slot name=\"application-header\"></slot>\n <div class=\"application\">\n <slot name=\"menu\"></slot>\n <aside\n class={{\n 'application-sidebar': true,\n slotted: this.applicationSidebarSlotted,\n }}\n onClick={() => this.onContentClick()}\n >\n <slot\n name=\"application-sidebar\"\n onSlotchange={() =>\n (this.applicationSidebarSlotted = hasSlottedElements(\n this.applicationSidebarSlot\n ))\n }\n ></slot>\n </aside>\n <div class=\"content-area\">\n <main class=\"content\" onClick={() => this.onContentClick()}>\n <slot></slot>\n </main>\n <footer class=\"footer\">\n <slot name=\"bottom\"></slot>\n </footer>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/application-header/application-header.js CHANGED Viewed

@@ -24,8 +24,6 @@ export class ApplicationHeader {
          *
          * When the application header is utilized outside the application frame, the menu toggle button is displayed.
          * Conversely, if the header is within the application frame, this property is ineffective.
-         *
-         * @since 2.5.0
          */
         this.showMenu = false;
         this.breakpoint = 'lg';
@@ -138,12 +136,12 @@ export class ApplicationHeader {
         const showApplicationSwitch = ((_a = this.applicationLayoutContext) === null || _a === void 0 ? void 0 : _a.appSwitchConfig) &&
             this.breakpoint !== 'sm' &&
             this.suppressResponsive === false;
-        return (h(Host, { key: 'fe720a3c6e78966c711e2cd9d213cb1550a534e0', class: {
+        return (h(Host, { key: '8554bbb8d79f1629ca042630e8efff26b39a9bda', class: {
                 [`breakpoint-${this.breakpoint}`]: true,
-            }, slot: "application-header" }, (this.showMenu || showMenuByApplicationFrame) && (h("ix-menu-expand-icon", { key: 'a5399f06220a5c96cc7466ddfb1f2a95736edc0d', onClick: () => this.onMenuClick(), expanded: this.menuExpanded })), showApplicationSwitch && (h("ix-icon-button", { key: '1779c902e0a76eca78fd9222432b2320045e7044', onClick: () => this.showAppSwitch(), icon: iconApps, ghost: true, class: "app-switch" })), h("div", { key: '21e4ad40bd8baf97b23d53075db6f04d66fcf6bc', class: { logo: true } }, h("slot", { key: '1743adfec4b7789fed498b3786e34391555c5e4f', name: "logo" })), h("ix-typography", { key: 'f0a8aa8b72907e205f90f6695bc747c8b9a391af', format: "body-lg", class: "name" }, this.name), h("div", { key: '951b9b3f6abdc2164fa500a92b5d726a71b668f7', class: "content" }, this.breakpoint === 'sm' ? (h(Fragment, null, h("ix-icon-button", { class: {
+            }, slot: "application-header" }, (this.showMenu || showMenuByApplicationFrame) && (h("ix-menu-expand-icon", { key: 'c1d2316429d73f1dd110b6dbbc71150af5a8d595', onClick: () => this.onMenuClick(), expanded: this.menuExpanded })), showApplicationSwitch && (h("ix-icon-button", { key: 'cf1e535834c69d538da3141cb63da2c875bb2ae7', onClick: () => this.showAppSwitch(), icon: iconApps, ghost: true, class: "app-switch" })), h("div", { key: '409d608089d9c10b49d7d7585e8800a917eb8a18', class: { logo: true } }, h("slot", { key: '3c5bcd07ef0aff570e74809fcb1c7663ee67f2a0', name: "logo" })), h("ix-typography", { key: 'cf226ff850f351c570839ff2c453e58ba7a3cd5e', format: "body-lg", class: "name" }, this.name), h("div", { key: '3491a96a4a591501c399fbc3d4cf275b17c43b13', class: "content" }, this.breakpoint === 'sm' ? (h(Fragment, null, h("ix-icon-button", { class: {
                 ['context-menu']: true,
                 ['context-menu-visible']: this.hasSlottedElements,
-            }, "data-context-menu": true, "data-testid": "show-more", icon: iconMoreMenu, ghost: true }), h("ix-dropdown", { "data-overflow-dropdown": true, class: "dropdown", discoverAllSubmenus: true, trigger: this.resolveContextMenuButton() }, h("div", { class: "dropdown-content", onClick: (e) => this.onContentBgClick(e) }, h("slot", { onSlotchange: () => this.updateIsSlottedContent() }))))) : (h("slot", { onSlotchange: () => this.updateIsSlottedContent() })), h("slot", { key: 'e6af4e7086bfb7d77e92e5f96148d03079c5fa82', name: "ix-application-header-avatar" }))));
+            }, "data-context-menu": true, "data-testid": "show-more", icon: iconMoreMenu, ghost: true }), h("ix-dropdown", { "data-overflow-dropdown": true, class: "dropdown", discoverAllSubmenus: true, trigger: this.resolveContextMenuButton() }, h("div", { class: "dropdown-content", onClick: (e) => this.onContentBgClick(e) }, h("slot", { onSlotchange: () => this.updateIsSlottedContent() }))))) : (h("slot", { onSlotchange: () => this.updateIsSlottedContent() })), h("slot", { key: 'b7f84dbc67bc6dacc82e3576b4cdb59a5fdc7f0c', name: "ix-application-header-avatar" }))));
     }
     static get is() { return "ix-application-header"; }
     static get encapsulation() { return "shadow"; }
@@ -190,10 +188,7 @@ export class ApplicationHeader {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [{
-                            "name": "since",
-                            "text": "2.5.0"
-                        }],
+                    "tags": [],
                     "text": "Controls the visibility of the menu toggle button based on the context of the application header.\n\nWhen the application header is utilized outside the application frame, the menu toggle button is displayed.\nConversely, if the header is within the application frame, this property is ineffective."
                 },
                 "getter": false,
@@ -220,10 +215,7 @@ export class ApplicationHeader {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [{
-                            "name": "since",
-                            "text": "2.5.0"
-                        }],
+                    "tags": [],
                     "text": "Event emitted when the menu toggle button is clicked"
                 },
                 "complexType": {

package/dist/collection/components/application-header/application-header.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"application-header.js","sourceRoot":"","sources":["../../../src/components/application-header/application-header.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 /\nimport { iconApps, iconMoreMenu } from '@siemens/ix-icons/icons';\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n Fragment,\n h,\n Host,\n Prop,\n readTask,\n State,\n Watch,\n} from '@stencil/core';\nimport { showAppSwitch } from '../utils/app-switch';\nimport { applicationLayoutService } from '../utils/application-layout';\nimport {\n ApplicationLayoutContext,\n AppSwitchConfiguration,\n} from '../utils/application-layout/context';\nimport { Breakpoint } from '../utils/breakpoints';\nimport { ContextType, useContextConsumer } from '../utils/context';\nimport { menuController } from '../utils/menu-service/menu-service';\nimport { hasSlottedElements } from '../utils/shadow-dom';\nimport { Disposable } from '../utils/typed-event';\n\n/\n @slot logo - Location of the logo\n /\n@Component({\n tag: 'ix-application-header',\n styleUrl: 'application-header.scss',\n shadow: true,\n})\nexport class ApplicationHeader {\n @Element() hostElement!: HTMLIxApplicationHeaderElement;\n\n /\n Application name\n /\n @Prop() name?: string;\n\n /\n Controls the visibility of the menu toggle button based on the context of the application header.\n \n When the application header is utilized outside the application frame, the menu toggle button is displayed.\n * Conversely, if the header is within the application frame, this property is ineffective.\n \n @since 2.5.0\n /\n @Prop({ mutable: true }) showMenu?: boolean = false;\n\n /\n Event emitted when the menu toggle button is clicked\n \n @since 2.5.0\n /\n @Event() menuToggle!: EventEmitter<boolean>;\n\n /\n Event emitted when the app switch button is clicked\n \n @since 3.0.0\n */\n @Event() openAppSwitch!: EventEmitter<void>;\n\n @State() breakpoint: Breakpoint = 'lg';\n @State() menuExpanded = false;\n @State() suppressResponsive = false;\n\n @State() hasSlottedElements = false;\n\n private menuDisposable?: Disposable;\n private modeDisposable?: Disposable;\n private callbackUpdateAppSwitchModal?: (\n config: AppSwitchConfiguration\n ) => void;\n\n @State() applicationLayoutContext?: ContextType<\n typeof ApplicationLayoutContext\n >;\n\n get contentBackground() {\n return this.hostElement.shadowRoot!.querySelector('.dropdown-content');\n }\n\n componentWillLoad() {\n useContextConsumer(\n this.hostElement,\n ApplicationLayoutContext,\n (ctx) => {\n if (ctx?.host === 'map-navigation') {\n this.suppressResponsive = true;\n this.breakpoint = 'md';\n return;\n }\n\n this.breakpoint = applicationLayoutService.breakpoint;\n this.applicationLayoutContext = ctx;\n\n this.tryUpdateAppSwitch();\n },\n true\n );\n\n this.menuDisposable = menuController.expandChange.on((show) => {\n this.menuExpanded = show;\n });\n\n this.modeDisposable = applicationLayoutService.onChange.on((mode) => {\n if (this.suppressResponsive) {\n return;\n }\n\n this.breakpoint = mode;\n });\n\n this.updateIsSlottedContent();\n }\n\n componentDidLoad() {\n this.attachSiemensLogoIfLoaded();\n }\n\n disconnectedCallback() {\n this.menuDisposable?.dispose();\n this.modeDisposable?.dispose();\n }\n\n @Watch('applicationLayoutContext')\n watchApplicationLayoutContext() {\n if (this.applicationLayoutContext) {\n this.showMenu = false;\n }\n }\n @Watch('suppressResponsive')\n watchSuppressResponsive() {\n this.breakpoint = 'md';\n }\n\n private isLogoSlotted() {\n const slotElement = this.hostElement.shadowRoot!.querySelector(\n 'slot[name=\"logo\"]'\n ) as HTMLSlotElement;\n const nodes = slotElement.assignedNodes({\n flatten: true,\n });\n\n return nodes.length !== 0;\n }\n\n private attachSiemensLogoIfLoaded() {\n const logoElement = document.createElement('ix-siemens-logo');\n if (!this.isLogoSlotted()) {\n this.hostElement\n .shadowRoot!.querySelector('.logo')\n ?.appendChild(logoElement);\n }\n }\n\n private async onMenuClick() {\n if (this.applicationLayoutContext) {\n menuController.toggle();\n } else {\n this.menuExpanded = !this.menuExpanded;\n }\n\n this.menuToggle.emit(this.menuExpanded);\n }\n\n private resolveContextMenuButton() {\n return new Promise<HTMLElement>((resolve) =>\n readTask(() =>\n resolve(\n this.hostElement.shadowRoot!.querySelector(\n '[data-context-menu]'\n ) as HTMLElement\n )\n )\n );\n }\n\n private tryUpdateAppSwitch() {\n if (\n !this.callbackUpdateAppSwitchModal \|\|\n !this.applicationLayoutContext?.appSwitchConfig\n ) {\n return;\n }\n\n this.callbackUpdateAppSwitchModal(\n this.applicationLayoutContext?.appSwitchConfig\n );\n }\n\n private async showAppSwitch() {\n const { defaultPrevented } = this.openAppSwitch.emit();\n\n if (defaultPrevented) {\n return;\n }\n\n if (!this.applicationLayoutContext?.appSwitchConfig) {\n return;\n }\n\n this.callbackUpdateAppSwitchModal = await showAppSwitch(\n this.applicationLayoutContext?.appSwitchConfig\n );\n }\n\n private updateIsSlottedContent() {\n const slotElement =\n this.hostElement.shadowRoot!.querySelector('.content slot');\n\n this.hasSlottedElements = hasSlottedElements(slotElement);\n }\n\n private onContentBgClick(e: MouseEvent) {\n if (e.target === this.contentBackground) {\n e.preventDefault();\n }\n }\n\n render() {\n const hasApplicationContextAvailable = !!this.applicationLayoutContext;\n\n const showMenuByApplicationFrame =\n this.breakpoint === 'sm' &&\n this.suppressResponsive === false &&\n hasApplicationContextAvailable;\n\n const showApplicationSwitch =\n this.applicationLayoutContext?.appSwitchConfig &&\n this.breakpoint !== 'sm' &&\n this.suppressResponsive === false;\n\n return (\n <Host\n class={{\n [`breakpoint-${this.breakpoint}`]: true,\n }}\n slot=\"application-header\"\n >\n {(this.showMenu \|\| showMenuByApplicationFrame) && (\n <ix-menu-expand-icon\n onClick={() => this.onMenuClick()}\n expanded={this.menuExpanded}\n ></ix-menu-expand-icon>\n )}\n {showApplicationSwitch && (\n <ix-icon-button\n onClick={() => this.showAppSwitch()}\n icon={iconApps}\n ghost\n class=\"app-switch\"\n ></ix-icon-button>\n )}\n <div class={{ logo: true }}>\n <slot name=\"logo\"></slot>\n </div>\n <ix-typography format=\"body-lg\" class=\"name\">\n {this.name}\n </ix-typography>\n <div class=\"content\">\n {this.breakpoint === 'sm' ? (\n <Fragment>\n <ix-icon-button\n class={{\n ['context-menu']: true,\n ['context-menu-visible']: this.hasSlottedElements,\n }}\n data-context-menu\n data-testid=\"show-more\"\n icon={iconMoreMenu}\n ghost\n ></ix-icon-button>\n <ix-dropdown\n data-overflow-dropdown\n class=\"dropdown\"\n discoverAllSubmenus\n trigger={this.resolveContextMenuButton()}\n >\n <div\n class=\"dropdown-content\"\n onClick={(e) => this.onContentBgClick(e)}\n >\n <slot\n onSlotchange={() => this.updateIsSlottedContent()}\n ></slot>\n </div>\n </ix-dropdown>\n </Fragment>\n ) : (\n <slot onSlotchange={() => this.updateIsSlottedContent()}></slot>\n )}\n <slot name=\"ix-application-header-avatar\"></slot>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"application-header.js","sourceRoot":"","sources":["../../../src/components/application-header/application-header.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACjE,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,QAAQ,EACR,CAAC,EACD,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,wBAAwB,EAAE,MAAM,6BAA6B,CAAC;AACvE,OAAO,EACL,wBAAwB,GAEzB,MAAM,qCAAqC,CAAC;AAE7C,OAAO,EAAe,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AACnE,OAAO,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAC;AACpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAGzD;;GAEG;AAMH,MAAM,OAAO,iBAAiB;IAL9B;QAaE;;;;;WAKG;QACsB,aAAQ,GAAa,KAAK,CAAC;QAc3C,eAAU,GAAe,IAAI,CAAC;QAC9B,iBAAY,GAAG,KAAK,CAAC;QACrB,uBAAkB,GAAG,KAAK,CAAC;QAE3B,uBAAkB,GAAG,KAAK,CAAC;KAuOrC;IA3NC,IAAI,iBAAiB;QACnB,OAAO,IAAI,CAAC,WAAW,CAAC,UAAW,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;IACzE,CAAC;IAED,iBAAiB;QACf,kBAAkB,CAChB,IAAI,CAAC,WAAW,EAChB,wBAAwB,EACxB,CAAC,GAAG,EAAE,EAAE;YACN,IAAI,CAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,IAAI,MAAK,gBAAgB,EAAE,CAAC;gBACnC,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC;gBAC/B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;gBACvB,OAAO;YACT,CAAC;YAED,IAAI,CAAC,UAAU,GAAG,wBAAwB,CAAC,UAAU,CAAC;YACtD,IAAI,CAAC,wBAAwB,GAAG,GAAG,CAAC;YAEpC,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC5B,CAAC,EACD,IAAI,CACL,CAAC;QAEF,IAAI,CAAC,cAAc,GAAG,cAAc,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,EAAE;YAC5D,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QAC3B,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,cAAc,GAAG,wBAAwB,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,EAAE;YAClE,IAAI,IAAI,CAAC,kBAAkB,EAAE,CAAC;gBAC5B,OAAO;YACT,CAAC;YAED,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QACzB,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,sBAAsB,EAAE,CAAC;IAChC,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,yBAAyB,EAAE,CAAC;IACnC,CAAC;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,cAAc,0CAAE,OAAO,EAAE,CAAC;QAC/B,MAAA,IAAI,CAAC,cAAc,0CAAE,OAAO,EAAE,CAAC;IACjC,CAAC;IAGD,6BAA6B;QAC3B,IAAI,IAAI,CAAC,wBAAwB,EAAE,CAAC;YAClC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;QACxB,CAAC;IACH,CAAC;IAED,uBAAuB;QACrB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;IACzB,CAAC;IAEO,aAAa;QACnB,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,UAAW,CAAC,aAAa,CAC5D,mBAAmB,CACD,CAAC;QACrB,MAAM,KAAK,GAAG,WAAW,CAAC,aAAa,CAAC;YACtC,OAAO,EAAE,IAAI;SACd,CAAC,CAAC;QAEH,OAAO,KAAK,CAAC,MAAM,KAAK,CAAC,CAAC;IAC5B,CAAC;IAEO,yBAAyB;;QAC/B,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;QAC9D,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,EAAE,CAAC;YAC1B,MAAA,IAAI,CAAC,WAAW;iBACb,UAAW,CAAC,aAAa,CAAC,OAAO,CAAC,0CACjC,WAAW,CAAC,WAAW,CAAC,CAAC;QAC/B,CAAC;IACH,CAAC;IAEO,KAAK,CAAC,WAAW;QACvB,IAAI,IAAI,CAAC,wBAAwB,EAAE,CAAC;YAClC,cAAc,CAAC,MAAM,EAAE,CAAC;QAC1B,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC;QACzC,CAAC;QAED,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAC1C,CAAC;IAEO,wBAAwB;QAC9B,OAAO,IAAI,OAAO,CAAc,CAAC,OAAO,EAAE,EAAE,CAC1C,QAAQ,CAAC,GAAG,EAAE,CACZ,OAAO,CACL,IAAI,CAAC,WAAW,CAAC,UAAW,CAAC,aAAa,CACxC,qBAAqB,CACP,CACjB,CACF,CACF,CAAC;IACJ,CAAC;IAEO,kBAAkB;;QACxB,IACE,CAAC,IAAI,CAAC,4BAA4B;YAClC,CAAC,CAAA,MAAA,IAAI,CAAC,wBAAwB,0CAAE,eAAe,CAAA,EAC/C,CAAC;YACD,OAAO;QACT,CAAC;QAED,IAAI,CAAC,4BAA4B,CAC/B,MAAA,IAAI,CAAC,wBAAwB,0CAAE,eAAe,CAC/C,CAAC;IACJ,CAAC;IAEO,KAAK,CAAC,aAAa;;QACzB,MAAM,EAAE,gBAAgB,EAAE,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;QAEvD,IAAI,gBAAgB,EAAE,CAAC;YACrB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,wBAAwB,0CAAE,eAAe,CAAA,EAAE,CAAC;YACpD,OAAO;QACT,CAAC;QAED,IAAI,CAAC,4BAA4B,GAAG,MAAM,aAAa,CACrD,MAAA,IAAI,CAAC,wBAAwB,0CAAE,eAAe,CAC/C,CAAC;IACJ,CAAC;IAEO,sBAAsB;QAC5B,MAAM,WAAW,GACf,IAAI,CAAC,WAAW,CAAC,UAAW,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;QAE9D,IAAI,CAAC,kBAAkB,GAAG,kBAAkB,CAAC,WAAW,CAAC,CAAC;IAC5D,CAAC;IAEO,gBAAgB,CAAC,CAAa;QACpC,IAAI,CAAC,CAAC,MAAM,KAAK,IAAI,CAAC,iBAAiB,EAAE,CAAC;YACxC,CAAC,CAAC,cAAc,EAAE,CAAC;QACrB,CAAC;IACH,CAAC;IAED,MAAM;;QACJ,MAAM,8BAA8B,GAAG,CAAC,CAAC,IAAI,CAAC,wBAAwB,CAAC;QAEvE,MAAM,0BAA0B,GAC9B,IAAI,CAAC,UAAU,KAAK,IAAI;YACxB,IAAI,CAAC,kBAAkB,KAAK,KAAK;YACjC,8BAA8B,CAAC;QAEjC,MAAM,qBAAqB,GACzB,CAAA,MAAA,IAAI,CAAC,wBAAwB,0CAAE,eAAe;YAC9C,IAAI,CAAC,UAAU,KAAK,IAAI;YACxB,IAAI,CAAC,kBAAkB,KAAK,KAAK,CAAC;QAEpC,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,CAAC,cAAc,IAAI,CAAC,UAAU,EAAE,CAAC,EAAE,IAAI;aACxC,EACD,IAAI,EAAC,oBAAoB;YAExB,CAAC,IAAI,CAAC,QAAQ,IAAI,0BAA0B,CAAC,IAAI,CAChD,4EACE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,EACjC,QAAQ,EAAE,IAAI,CAAC,YAAY,GACN,CACxB;YACA,qBAAqB,IAAI,CACxB,uEACE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,EACnC,IAAI,EAAE,QAAQ,EACd,KAAK,QACL,KAAK,EAAC,YAAY,GACF,CACnB;YACD,4DAAK,KAAK,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE;gBACxB,6DAAM,IAAI,EAAC,MAAM,GAAQ,CACrB;YACN,sEAAe,MAAM,EAAC,SAAS,EAAC,KAAK,EAAC,MAAM,IACzC,IAAI,CAAC,IAAI,CACI;YAChB,4DAAK,KAAK,EAAC,SAAS;gBACjB,IAAI,CAAC,UAAU,KAAK,IAAI,CAAC,CAAC,CAAC,CAC1B,EAAC,QAAQ;oBACP,sBACE,KAAK,EAAE;4BACL,CAAC,cAAc,CAAC,EAAE,IAAI;4BACtB,CAAC,sBAAsB,CAAC,EAAE,IAAI,CAAC,kBAAkB;yBAClD,4CAEW,WAAW,EACvB,IAAI,EAAE,YAAY,EAClB,KAAK,SACW;oBAClB,mDAEE,KAAK,EAAC,UAAU,EAChB,mBAAmB,QACnB,OAAO,EAAE,IAAI,CAAC,wBAAwB,EAAE;wBAExC,WACE,KAAK,EAAC,kBAAkB,EACxB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC;4BAExC,YACE,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,sBAAsB,EAAE,GAC3C,CACJ,CACM,CACL,CACZ,CAAC,CAAC,CAAC,CACF,YAAM,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,sBAAsB,EAAE,GAAS,CACjE;gBACD,6DAAM,IAAI,EAAC,8BAA8B,GAAQ,CAC7C,CACD,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 /\nimport { iconApps, iconMoreMenu } from '@siemens/ix-icons/icons';\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n Fragment,\n h,\n Host,\n Prop,\n readTask,\n State,\n Watch,\n} from '@stencil/core';\nimport { showAppSwitch } from '../utils/app-switch';\nimport { applicationLayoutService } from '../utils/application-layout';\nimport {\n ApplicationLayoutContext,\n AppSwitchConfiguration,\n} from '../utils/application-layout/context';\nimport { Breakpoint } from '../utils/breakpoints';\nimport { ContextType, useContextConsumer } from '../utils/context';\nimport { menuController } from '../utils/menu-service/menu-service';\nimport { hasSlottedElements } from '../utils/shadow-dom';\nimport { Disposable } from '../utils/typed-event';\n\n/\n @slot logo - Location of the logo\n /\n@Component({\n tag: 'ix-application-header',\n styleUrl: 'application-header.scss',\n shadow: true,\n})\nexport class ApplicationHeader {\n @Element() hostElement!: HTMLIxApplicationHeaderElement;\n\n /\n Application name\n /\n @Prop() name?: string;\n\n /\n Controls the visibility of the menu toggle button based on the context of the application header.\n \n When the application header is utilized outside the application frame, the menu toggle button is displayed.\n * Conversely, if the header is within the application frame, this property is ineffective.\n /\n @Prop({ mutable: true }) showMenu?: boolean = false;\n\n /\n Event emitted when the menu toggle button is clicked\n /\n @Event() menuToggle!: EventEmitter<boolean>;\n\n /\n Event emitted when the app switch button is clicked\n \n @since 3.0.0\n */\n @Event() openAppSwitch!: EventEmitter<void>;\n\n @State() breakpoint: Breakpoint = 'lg';\n @State() menuExpanded = false;\n @State() suppressResponsive = false;\n\n @State() hasSlottedElements = false;\n\n private menuDisposable?: Disposable;\n private modeDisposable?: Disposable;\n private callbackUpdateAppSwitchModal?: (\n config: AppSwitchConfiguration\n ) => void;\n\n @State() applicationLayoutContext?: ContextType<\n typeof ApplicationLayoutContext\n >;\n\n get contentBackground() {\n return this.hostElement.shadowRoot!.querySelector('.dropdown-content');\n }\n\n componentWillLoad() {\n useContextConsumer(\n this.hostElement,\n ApplicationLayoutContext,\n (ctx) => {\n if (ctx?.host === 'map-navigation') {\n this.suppressResponsive = true;\n this.breakpoint = 'md';\n return;\n }\n\n this.breakpoint = applicationLayoutService.breakpoint;\n this.applicationLayoutContext = ctx;\n\n this.tryUpdateAppSwitch();\n },\n true\n );\n\n this.menuDisposable = menuController.expandChange.on((show) => {\n this.menuExpanded = show;\n });\n\n this.modeDisposable = applicationLayoutService.onChange.on((mode) => {\n if (this.suppressResponsive) {\n return;\n }\n\n this.breakpoint = mode;\n });\n\n this.updateIsSlottedContent();\n }\n\n componentDidLoad() {\n this.attachSiemensLogoIfLoaded();\n }\n\n disconnectedCallback() {\n this.menuDisposable?.dispose();\n this.modeDisposable?.dispose();\n }\n\n @Watch('applicationLayoutContext')\n watchApplicationLayoutContext() {\n if (this.applicationLayoutContext) {\n this.showMenu = false;\n }\n }\n @Watch('suppressResponsive')\n watchSuppressResponsive() {\n this.breakpoint = 'md';\n }\n\n private isLogoSlotted() {\n const slotElement = this.hostElement.shadowRoot!.querySelector(\n 'slot[name=\"logo\"]'\n ) as HTMLSlotElement;\n const nodes = slotElement.assignedNodes({\n flatten: true,\n });\n\n return nodes.length !== 0;\n }\n\n private attachSiemensLogoIfLoaded() {\n const logoElement = document.createElement('ix-siemens-logo');\n if (!this.isLogoSlotted()) {\n this.hostElement\n .shadowRoot!.querySelector('.logo')\n ?.appendChild(logoElement);\n }\n }\n\n private async onMenuClick() {\n if (this.applicationLayoutContext) {\n menuController.toggle();\n } else {\n this.menuExpanded = !this.menuExpanded;\n }\n\n this.menuToggle.emit(this.menuExpanded);\n }\n\n private resolveContextMenuButton() {\n return new Promise<HTMLElement>((resolve) =>\n readTask(() =>\n resolve(\n this.hostElement.shadowRoot!.querySelector(\n '[data-context-menu]'\n ) as HTMLElement\n )\n )\n );\n }\n\n private tryUpdateAppSwitch() {\n if (\n !this.callbackUpdateAppSwitchModal \|\|\n !this.applicationLayoutContext?.appSwitchConfig\n ) {\n return;\n }\n\n this.callbackUpdateAppSwitchModal(\n this.applicationLayoutContext?.appSwitchConfig\n );\n }\n\n private async showAppSwitch() {\n const { defaultPrevented } = this.openAppSwitch.emit();\n\n if (defaultPrevented) {\n return;\n }\n\n if (!this.applicationLayoutContext?.appSwitchConfig) {\n return;\n }\n\n this.callbackUpdateAppSwitchModal = await showAppSwitch(\n this.applicationLayoutContext?.appSwitchConfig\n );\n }\n\n private updateIsSlottedContent() {\n const slotElement =\n this.hostElement.shadowRoot!.querySelector('.content slot');\n\n this.hasSlottedElements = hasSlottedElements(slotElement);\n }\n\n private onContentBgClick(e: MouseEvent) {\n if (e.target === this.contentBackground) {\n e.preventDefault();\n }\n }\n\n render() {\n const hasApplicationContextAvailable = !!this.applicationLayoutContext;\n\n const showMenuByApplicationFrame =\n this.breakpoint === 'sm' &&\n this.suppressResponsive === false &&\n hasApplicationContextAvailable;\n\n const showApplicationSwitch =\n this.applicationLayoutContext?.appSwitchConfig &&\n this.breakpoint !== 'sm' &&\n this.suppressResponsive === false;\n\n return (\n <Host\n class={{\n [`breakpoint-${this.breakpoint}`]: true,\n }}\n slot=\"application-header\"\n >\n {(this.showMenu \|\| showMenuByApplicationFrame) && (\n <ix-menu-expand-icon\n onClick={() => this.onMenuClick()}\n expanded={this.menuExpanded}\n ></ix-menu-expand-icon>\n )}\n {showApplicationSwitch && (\n <ix-icon-button\n onClick={() => this.showAppSwitch()}\n icon={iconApps}\n ghost\n class=\"app-switch\"\n ></ix-icon-button>\n )}\n <div class={{ logo: true }}>\n <slot name=\"logo\"></slot>\n </div>\n <ix-typography format=\"body-lg\" class=\"name\">\n {this.name}\n </ix-typography>\n <div class=\"content\">\n {this.breakpoint === 'sm' ? (\n <Fragment>\n <ix-icon-button\n class={{\n ['context-menu']: true,\n ['context-menu-visible']: this.hasSlottedElements,\n }}\n data-context-menu\n data-testid=\"show-more\"\n icon={iconMoreMenu}\n ghost\n ></ix-icon-button>\n <ix-dropdown\n data-overflow-dropdown\n class=\"dropdown\"\n discoverAllSubmenus\n trigger={this.resolveContextMenuButton()}\n >\n <div\n class=\"dropdown-content\"\n onClick={(e) => this.onContentBgClick(e)}\n >\n <slot\n onSlotchange={() => this.updateIsSlottedContent()}\n ></slot>\n </div>\n </ix-dropdown>\n </Fragment>\n ) : (\n <slot onSlotchange={() => this.updateIsSlottedContent()}></slot>\n )}\n <slot name=\"ix-application-header-avatar\"></slot>\n </div>\n </Host>\n );\n }\n}\n"]}

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

@@ -22,9 +22,6 @@ function AvatarImage(props) {
 function UserInfo(props) {
     return (h(Fragment, null, h("div", { class: "user-info", onClick: (event) => event.preventDefault() }, h(AvatarImage, { image: props.image, initials: props.initials }), h("div", { class: "user" }, h("div", { class: "username" }, props.userName), props.extra && (h("ix-typography", { class: "extra", "text-color": 'soft' }, props.extra))))));
 }
-/**
- * @since 2.0.0
- */
 export class Avatar {
     constructor() {
         this.isClosestApplicationHeader = false;
@@ -125,10 +122,7 @@ export class Avatar {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [{
-                            "name": "since",
-                            "text": "2.1.0"
-                        }],
+                    "tags": [],
                     "text": "If set an info card displaying the username will be placed inside the dropdown.\nNote: Only working if avatar is part of the ix-application-header"
                 },
                 "getter": false,
@@ -147,10 +141,7 @@ export class Avatar {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [{
-                            "name": "since",
-                            "text": "2.1.0"
-                        }],
+                    "tags": [],
                     "text": "Optional description text that will be displayed underneath the username.\nNote: Only working if avatar is part of the ix-application-header"
                 },
                 "getter": false,

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":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,OAAO,EACP,QAAQ,EACR,CAAC,EACD,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAEzE,SAAS,aAAa,CAAC,KAA4B;IACjD,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAE3B,IAAI,QAAQ,EAAE,CAAC;QACb,OAAO,WAAK,KAAK,EAAE,iBAAiB,IAAG,QAAQ,CAAO,CAAC;IACzD,CAAC;IAED,OAAO,CACL,WACE,KAAK,EAAE,cAAc,EACrB,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW;QAEnB,SAAG,IAAI,EAAC,MAAM,eAAW,SAAS;YAChC,YACE,EAAE,EAAC,wBAAwB,EAC3B,CAAC,EAAC,kIACiE,GACnE;YACF,YACE,EAAE,EAAC,oBAAoB,EACvB,CAAC,EAAC,2TAGgE,GAClE,CACA,CACA,CACP,CAAC;AACJ,CAAC;AAED,SAAS,WAAW,CAAC,KAA4C;IAC/D,OAAO,CACL,WAAK,KAAK,EAAC,QAAQ,IAChB,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CACb,WAAK,GAAG,EAAE,KAAK,CAAC,KAAK,EAAE,KAAK,EAAC,cAAc,GAAO,CACnD,CAAC,CAAC,CAAC,CACF,EAAC,aAAa,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,GAAI,CAC5C,CACG,CACP,CAAC;AACJ,CAAC;AAED,SAAS,QAAQ,CAAC,KAKjB;IACC,OAAO,CACL,EAAC,QAAQ;QACP,WAAK,KAAK,EAAC,WAAW,EAAC,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,cAAc,EAAE;YAC/D,EAAC,WAAW,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,GAAI;YAC7D,WAAK,KAAK,EAAC,MAAM;gBACf,WAAK,KAAK,EAAC,UAAU,IAAE,KAAK,CAAC,QAAQ,CAAO;gBAC3C,KAAK,CAAC,KAAK,IAAI,CACd,qBAAe,KAAK,EAAC,OAAO,gBAAa,MAAM,IAC5C,KAAK,CAAC,KAAK,CACE,CACjB,CACG,CACF,CACG,CACZ,CAAC;AACJ,CAAC;~~AAED;;GAEG;AAMH~~,MAAM,OAAO,MAAM;IALnB;~~QAoCW~~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~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~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 Fragment,\n h,\n Host,\n Prop,\n readTask,\n State,\n} from '@stencil/core';\nimport { BaseButton } from '../button/base-button';\nimport { closestElement, hasSlottedElements } from '../utils/shadow-dom';\n\nfunction DefaultAvatar(props: { initials?: string }) {\n const { initials } = props;\n\n if (initials) {\n return <div class={'avatar-initials'}>{initials}</div>;\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 >\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(props: { image?: string; initials?: string }) {\n return (\n <div class=\"avatar\">\n {props.image ? (\n <img src={props.image} class=\"avatar-image\"></img>\n ) : (\n <DefaultAvatar initials={props.initials} />\n )}\n </div>\n );\n}\n\nfunction UserInfo(props: {\n image?: string;\n initials?: string;\n userName: string;\n extra?: string;\n}) {\n return (\n <Fragment>\n <div class=\"user-info\" onClick={(event) => event.preventDefault()}>\n <AvatarImage image={props.image} initials={props.initials} />\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/\n @~~since 2.0.0\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 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 @since 2.1.0\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 @since 2.1.0\n */\n @Prop() extra?: string;\n\n @State() isClosestApplicationHeader = false;\n @State() hasSlottedElements = false;\n\n private slotElement?: HTMLSlotElement;\n private dropdownElement?: HTMLIxDropdownElement;\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 if (this.isClosestApplicationHeader) {\n return (\n <Host slot=\"ix-application-header-avatar\" class={'avatar-button'}>\n <BaseButton\n disabled={false}\n ghost={true}\n iconOval={false}\n icon={undefined}\n iconOnly={false}\n loading={false}\n outline={false}\n selected={false}\n type=\"button\"\n variant=\"primary\"\n >\n <AvatarImage image={this.image} initials={this.initials} />\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 >\n {this.username && (\n <Fragment>\n <UserInfo\n extra={this.extra}\n image={this.image}\n initials={this.initials}\n userName={this.username}\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 (\n <Host>\n <AvatarImage image={this.image} initials={this.initials} />\n </Host>\n );\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 { closestElement, hasSlottedElements } from '../utils/shadow-dom';\n\nfunction DefaultAvatar(props: { initials?: string }) {\n const { initials } = props;\n\n if (initials) {\n return <div class={'avatar-initials'}>{initials}</div>;\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 >\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(props: { image?: string; initials?: string }) {\n return (\n <div class=\"avatar\">\n {props.image ? (\n <img src={props.image} class=\"avatar-image\"></img>\n ) : (\n <DefaultAvatar initials={props.initials} />\n )}\n </div>\n );\n}\n\nfunction UserInfo(props: {\n image?: string;\n initials?: string;\n userName: string;\n extra?: string;\n}) {\n return (\n <Fragment>\n <div class=\"user-info\" onClick={(event) => event.preventDefault()}>\n <AvatarImage image={props.image} initials={props.initials} />\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 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 @State() isClosestApplicationHeader = false;\n @State() hasSlottedElements = false;\n\n private slotElement?: HTMLSlotElement;\n private dropdownElement?: HTMLIxDropdownElement;\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 if (this.isClosestApplicationHeader) {\n return (\n <Host slot=\"ix-application-header-avatar\" class={'avatar-button'}>\n <BaseButton\n disabled={false}\n ghost={true}\n iconOval={false}\n icon={undefined}\n iconOnly={false}\n loading={false}\n outline={false}\n selected={false}\n type=\"button\"\n variant=\"primary\"\n >\n <AvatarImage image={this.image} initials={this.initials} />\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 >\n {this.username && (\n <Fragment>\n <UserInfo\n extra={this.extra}\n image={this.image}\n initials={this.initials}\n userName={this.username}\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 (\n <Host>\n <AvatarImage image={this.image} initials={this.initials} />\n </Host>\n );\n }\n}\n"]}

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

@@ -19,7 +19,6 @@ export class Blind {
         this.collapsed = false;
         /**
          * Blind variant
-         * @since 2.0.0
          */
         this.variant = 'filled';
         this.blindId = ++sequentialInstanceId;
@@ -74,17 +73,17 @@ export class Blind {
         });
     }
     render() {
-        return (h(Host, { key: 'a0a59c1fc6d473ce61246ea0234c994480ac60d1', class: {
+        return (h(Host, { key: 'e8e3003bc174e573bee19e97f6f4bc3ff44f6d1b', class: {
                 [`blind-${this.variant}`]: true,
-            } }, h("div", { key: 'ad3050c9ae503aa55bae3ceca992d79bf5f337fd', class: 'blind-header-wrapper' }, h("button", { key: '81d27e4a4acaa79cc4dc362f10d58d89433641ff', class: {
+            } }, h("div", { key: '1034566a12454369ca3bb8dcbaa9c7e41d0cbc7c', class: 'blind-header-wrapper' }, h("button", { key: 'f93ac381f2ec7f063c731633e4229b5f7bac7513', class: {
                 'blind-header': true,
                 [`blind-${this.variant}`]: true,
                 closed: this.collapsed,
-            }, type: "button", "aria-labelledby": `ix-blind-header-title-${this.blindId}`, "aria-controls": `ix-blind-content-section-${this.blindId}`, "aria-expanded": a11yBoolean(!this.collapsed), onClick: () => this.onHeaderClick() }, h("slot", { key: '3881b273421c2f87bdfc5a40018146c76f1803ee', name: "custom-header" })), h("div", { key: 'f1f56f907d4bd04e39b3cddf080126f5c1bb5c0e', class: 'blind-header-content' }, h("ix-icon", { key: '8f9f0e2ae7d8b41bb0bc1279e4a2249b326b8a18', class: "collapse-icon", name: iconChevronRightSmall, color: this.variant === 'filled' || this.variant === 'outline'
+            }, type: "button", "aria-labelledby": `ix-blind-header-title-${this.blindId}`, "aria-controls": `ix-blind-content-section-${this.blindId}`, "aria-expanded": a11yBoolean(!this.collapsed), onClick: () => this.onHeaderClick() }, h("slot", { key: '0868ac1e3339ac2404b0da95e6745c1beb53eeed', name: "custom-header" })), h("div", { key: '7f9788cbf860557cf024742f4bc775df60d73eb4', class: 'blind-header-content' }, h("ix-icon", { key: '0003ec2962bbba971116895effeaf93d0aac5307', class: "collapse-icon", name: iconChevronRightSmall, color: this.variant === 'filled' || this.variant === 'outline'
                 ? 'color-primary'
-                : `color-${this.variant}--contrast`, ref: (ref) => (this.chevronRef = ref) }), h("div", { key: '8ee02b39bae7b5d67508c00c3256e7045f3bcd85', class: "blind-header-title", id: `ix-blind-header-title-${this.blindId}` }, this.label !== undefined ? (h(Fragment, null, this.icon && (h("ix-icon", { class: "blind-header-title-icon", name: this.icon, color: this.variant === 'filled' || this.variant === 'outline'
+                : `color-${this.variant}--contrast`, ref: (ref) => (this.chevronRef = ref) }), h("div", { key: 'cc6d991f8405799fca6110f33217b821598709b2', class: "blind-header-title", id: `ix-blind-header-title-${this.blindId}` }, this.label !== undefined ? (h(Fragment, null, this.icon && (h("ix-icon", { class: "blind-header-title-icon", name: this.icon, color: this.variant === 'filled' || this.variant === 'outline'
                 ? 'color-std-text'
-                : `color-${this.variant}--contrast` })), h("div", { class: 'blind-header-title-row' }, h("div", { class: "blind-header-title-col" }, h("ix-typography", { title: this.label, format: "label-lg", bold: true }, h("div", { class: "blind-header-title-label", title: this.label }, this.label))), this.sublabel && (h("div", { class: "blind-header-title-col" }, h("ix-typography", { title: this.sublabel }, h("div", { class: "blind-header-title-sublabel" }, this.sublabel))))), h("div", { class: "header-actions" }, h("slot", { name: "header-actions" })))) : null))), h("section", { key: 'ec9c4832154c5b31ef09849480b04cc39822ef95', id: `ix-blind-content-section-${this.blindId}`, "aria-labelledby": `ix-blind-header-title-${this.blindId}` }, h("div", { key: '29d542d3fa8e77949188d48cd733f918ac8377df', class: {
+                : `color-${this.variant}--contrast` })), h("div", { class: 'blind-header-title-row' }, h("div", { class: "blind-header-title-col" }, h("ix-typography", { title: this.label, format: "label-lg", bold: true }, h("div", { class: "blind-header-title-label", title: this.label }, this.label))), this.sublabel && (h("div", { class: "blind-header-title-col" }, h("ix-typography", { title: this.sublabel }, h("div", { class: "blind-header-title-sublabel" }, this.sublabel))))), h("div", { class: "header-actions" }, h("slot", { name: "header-actions" })))) : null))), h("section", { key: '82898718f59f80a28bef0ead436e957d5e729ae2', id: `ix-blind-content-section-${this.blindId}`, "aria-labelledby": `ix-blind-header-title-${this.blindId}` }, h("div", { key: '0847aa3c59174d278cef6f85eb7a8aa537192449', class: {
                 'blind-content': true,
                 hide: this.collapsed,
             } }, !this.collapsed ? h("slot", null) : null))));
@@ -154,10 +153,7 @@ export class Blind {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [{
-                            "name": "since",
-                            "text": "2.0.0"
-                        }],
+                    "tags": [],
                     "text": "Secondary label inside blind header"
                 },
                 "getter": false,
@@ -176,10 +172,7 @@ export class Blind {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [{
-                            "name": "since",
-                            "text": "1.5.0"
-                        }],
+                    "tags": [],
                     "text": "Optional icon to be displayed next to the header label"
                 },
                 "getter": false,
@@ -204,10 +197,7 @@ export class Blind {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [{
-                            "name": "since",
-                            "text": "2.0.0"
-                        }],
+                    "tags": [],
                     "text": "Blind variant"
                 },
                 "getter": false,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"blind.js","sourceRoot":"","sources":["../../../src/components/blind/blind.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,KAAK,MAAM,SAAS,CAAC;AAE5B,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAIhE,IAAI,oBAAoB,GAAG,CAAC,CAAC;AAO7B,MAAM,OAAO,KAAK;~~IAuChB~~;~~QAtCA~~;;WAEG;QACqC,cAAS,GAAG,KAAK,CAAC;~~QAmB1D;;;WAGG~~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~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["/\n SPDX-FileCopyrightText: 2024 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 Watch,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { CardVariant } from '../card/card';\nimport { a11yBoolean } from '../utils/a11y';\nimport { iconChevronRightSmall } from '@siemens/ix-icons/icons';\n\nexport type BlindVariant = CardVariant;\n\nlet sequentialInstanceId = 0;\n\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 Blind variant\n * @since 2.0.0\n /\n @Prop() variant: BlindVariant = 'filled';\n\n /\n Collapsed state changed\n */\n @Event() collapsedChange!: EventEmitter<boolean>;\n\n @Element() hostElement!: HTMLIxBlindElement;\n\n private chevronRef?: HTMLElement;\n private blindId = ++sequentialInstanceId;\n\n constructor() {}\n\n private onHeaderClick() {\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 class={{\n [`blind-${this.variant}`]: true,\n }}\n >\n <div class={'blind-header-wrapper'}>\n <button\n class={{\n 'blind-header': true,\n [`blind-${this.variant}`]: true,\n closed: this.collapsed,\n }}\n type=\"button\"\n aria-labelledby={`ix-blind-header-title-${this.blindId}`}\n aria-controls={`ix-blind-content-section-${this.blindId}`}\n aria-expanded={a11yBoolean(!this.collapsed)}\n onClick={() => this.onHeaderClick()}\n >\n <slot name=\"custom-header\"></slot>\n </button>\n\n <div class={'blind-header-content'}>\n <ix-icon\n class=\"collapse-icon\"\n name={iconChevronRightSmall}\n color={\n this.variant === 'filled' \|\| this.variant === 'outline'\n ? 'color-primary'\n : `color-${this.variant}--contrast`\n }\n ref={(ref: HTMLElement \| undefined) => (this.chevronRef = ref)}\n ></ix-icon>\n <div\n class=\"blind-header-title\"\n id={`ix-blind-header-title-${this.blindId}`}\n >\n {this.label !== undefined ? (\n <Fragment>\n {this.icon && (\n <ix-icon\n class=\"blind-header-title-icon\"\n name={this.icon}\n color={\n this.variant === 'filled' \|\| this.variant === 'outline'\n ? 'color-std-text'\n : `color-${this.variant}--contrast`\n }\n ></ix-icon>\n )}\n <div class={'blind-header-title-row'}>\n <div class=\"blind-header-title-col\">\n <ix-typography title={this.label} format=\"label-lg\" bold>\n <div\n class=\"blind-header-title-label\"\n title={this.label}\n >\n {this.label}\n </div>\n </ix-typography>\n </div>\n\n {this.sublabel && (\n <div class=\"blind-header-title-col\">\n <ix-typography title={this.sublabel}>\n <div class=\"blind-header-title-sublabel\">\n {this.sublabel}\n </div>\n </ix-typography>\n </div>\n )}\n </div>\n <div class=\"header-actions\">\n <slot name=\"header-actions\"></slot>\n </div>\n </Fragment>\n ) : null}\n </div>\n </div>\n </div>\n <section\n id={`ix-blind-content-section-${this.blindId}`}\n aria-labelledby={`ix-blind-header-title-${this.blindId}`}\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"]}
1	+ {"version":3,"file":"blind.js","sourceRoot":"","sources":["../../../src/components/blind/blind.tsx"],"names":[],"mappings":"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","sourcesContent":["/\n SPDX-FileCopyrightText: 2024 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 Watch,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { CardVariant } from '../card/card';\nimport { a11yBoolean } from '../utils/a11y';\nimport { iconChevronRightSmall } from '@siemens/ix-icons/icons';\n\nexport type BlindVariant = CardVariant;\n\nlet sequentialInstanceId = 0;\n\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 /\n @Prop() sublabel?: string;\n\n /\n Optional icon to be displayed next to the header label\n /\n @Prop() icon?: string;\n\n /\n Blind variant\n /\n @Prop() variant: BlindVariant = 'filled';\n\n /\n Collapsed state changed\n */\n @Event() collapsedChange!: EventEmitter<boolean>;\n\n @Element() hostElement!: HTMLIxBlindElement;\n\n private chevronRef?: HTMLElement;\n private blindId = ++sequentialInstanceId;\n\n constructor() {}\n\n private onHeaderClick() {\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 class={{\n [`blind-${this.variant}`]: true,\n }}\n >\n <div class={'blind-header-wrapper'}>\n <button\n class={{\n 'blind-header': true,\n [`blind-${this.variant}`]: true,\n closed: this.collapsed,\n }}\n type=\"button\"\n aria-labelledby={`ix-blind-header-title-${this.blindId}`}\n aria-controls={`ix-blind-content-section-${this.blindId}`}\n aria-expanded={a11yBoolean(!this.collapsed)}\n onClick={() => this.onHeaderClick()}\n >\n <slot name=\"custom-header\"></slot>\n </button>\n\n <div class={'blind-header-content'}>\n <ix-icon\n class=\"collapse-icon\"\n name={iconChevronRightSmall}\n color={\n this.variant === 'filled' \|\| this.variant === 'outline'\n ? 'color-primary'\n : `color-${this.variant}--contrast`\n }\n ref={(ref: HTMLElement \| undefined) => (this.chevronRef = ref)}\n ></ix-icon>\n <div\n class=\"blind-header-title\"\n id={`ix-blind-header-title-${this.blindId}`}\n >\n {this.label !== undefined ? (\n <Fragment>\n {this.icon && (\n <ix-icon\n class=\"blind-header-title-icon\"\n name={this.icon}\n color={\n this.variant === 'filled' \|\| this.variant === 'outline'\n ? 'color-std-text'\n : `color-${this.variant}--contrast`\n }\n ></ix-icon>\n )}\n <div class={'blind-header-title-row'}>\n <div class=\"blind-header-title-col\">\n <ix-typography title={this.label} format=\"label-lg\" bold>\n <div\n class=\"blind-header-title-label\"\n title={this.label}\n >\n {this.label}\n </div>\n </ix-typography>\n </div>\n\n {this.sublabel && (\n <div class=\"blind-header-title-col\">\n <ix-typography title={this.sublabel}>\n <div class=\"blind-header-title-sublabel\">\n {this.sublabel}\n </div>\n </ix-typography>\n </div>\n )}\n </div>\n <div class=\"header-actions\">\n <slot name=\"header-actions\"></slot>\n </div>\n </Fragment>\n ) : null}\n </div>\n </div>\n </div>\n <section\n id={`ix-blind-content-section-${this.blindId}`}\n aria-labelledby={`ix-blind-header-title-${this.blindId}`}\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"]}

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

@@ -31,8 +31,6 @@ export class Breadcrumb {
         /**
          * Accessibility label for the dropdown button (ellipsis icon) used to access the dropdown list
          * with conditionally hidden previous items
-         *
-         * @since 2.0.0
          */
         this.ariaLabelPreviousButton = 'previous';
         this.previousButtonRef = makeRef();
@@ -85,7 +83,7 @@ export class Breadcrumb {
     render() {
         var _a, _b, _c, _d;
         const a11y = a11yHostAttributes(this.hostElement);
-        return (h(Host, { key: 'ad4b8c147f3478a9cb8f01d5f46b99ff86ee323f' }, h("ix-dropdown", { key: 'b8fa759644e7252e3f25c5805e06196ad7acfeb3', 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: '02424da5fc550f77643ff397668f12c77882ed70' }, h("ix-dropdown", { key: '95004ed7d2dca7b77e19506fe4acd8c4c7c94ba7', 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;
@@ -102,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: '894aa6aba077c3154ff4e2f75ea90e044c9dd1b8', class: "crumb-items", "aria-label": (_c = a11y['aria-label']) !== null && _c !== void 0 ? _c : 'breadcrumbs' }, h("ol", { key: 'a1bba2fc77e17877306e996373dc6269c7530e48' }, h("slot", { key: '50dea282515e311e37ea48776793cc0aaa6746b2' }))), h("ix-dropdown", { key: '3ebe74020ea3edabcaff09c3840db5fdeef1581d', 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: 'f2c6cdaebfb4d416431367998b242412dc3fc31a', class: "crumb-items", "aria-label": (_c = a11y['aria-label']) !== null && _c !== void 0 ? _c : 'breadcrumbs' }, h("ol", { key: 'acbb000c8578df2ddd309a96e22cd68fa1371fc6' }, h("slot", { key: 'ee40496d4bd4af7dc01f6952469e691c5a471506' }))), h("ix-dropdown", { key: '9299ba6a3a9009e3dd68d63c89c47233b42b1f52', 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,
@@ -194,10 +192,7 @@ export class Breadcrumb {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [{
-                            "name": "since",
-                            "text": "2.0.0"
-                        }],
+                    "tags": [],
                     "text": "Accessibility label for the dropdown button (ellipsis icon) used to access the dropdown list\nwith conditionally hidden previous items"
                 },
                 "getter": false,

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 @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 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":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,WAAW,EACX,CAAC,EACD,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAChE,OAAO,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAE5C,IAAI,UAAU,GAAG,CAAC,CAAC;AACnB,MAAM,QAAQ,GAAG,CAAC,SAAiB,aAAa,EAAE,EAAE;IAClD,OAAO,GAAG,MAAM,IAAI,UAAU,EAAE,EAAE,CAAC;AACrC,CAAC,CAAC;AAOF,MAAM,OAAO,UAAU;IALvB;QAQE;;WAEG;QACK,qBAAgB,GAAG,CAAC,CAAC;QAE7B;;WAEG;QACK,cAAS,GAAa,EAAE,CAAC;QAMjC;;WAEG;QACK,UAAK,GAAG,IAAI,CAAC;QAErB;;;WAGG;QACK,4BAAuB,GAAG,UAAU,CAAC;QAY5B,sBAAiB,GAAG,OAAO,EAA+B,CAAC;QAC3D,kBAAa,GAAG,OAAO,EAAe,CAAC;QAE/C,UAAK,GAAkC,EAAE,CAAC;QAC1C,+BAA0B,GAAG,KAAK,CAAC;QAIpC,qBAAgB,GAAG,QAAQ,EAAE,CAAC;QAC9B,uBAAkB,GAAG,QAAQ,EAAE,CAAC;KAqIzC;IAvKC,iBAAiB;QACf,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAkCO,WAAW,CAAC,IAAY;QAC9B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC5B,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,gBAAgB,GAAG,sBAAsB,CAAC,GAAG,EAAE,CAClD,IAAI,CAAC,eAAe,EAAE,CACvB,CAAC;QAEF,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE;YAC9C,OAAO,EAAE,IAAI;YACb,SAAS,EAAE,IAAI;SAChB,CAAC,CAAC;IACL,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,gBAAgB,0CAAE,UAAU,EAAE,CAAC;IACtC,CAAC;IAEO,KAAK,CAAC,eAAe;QAC3B,MAAM,YAAY,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAErC,YAAY,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE;YACjC,MAAM,kBAAkB,GACtB,IAAI,CAAC,SAAS,CAAC,MAAM,KAAK,CAAC,IAAI,YAAY,CAAC,MAAM,GAAG,CAAC,KAAK,KAAK,CAAC;YAEnE,EAAE,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;YACtB,EAAE,CAAC,WAAW,GAAG,YAAY,CAAC,MAAM,GAAG,CAAC,KAAK,KAAK,IAAI,kBAAkB,CAAC;YACzE,EAAE,CAAC,iBAAiB,GAAG,kBAAkB,CAAC;YAE1C,IAAI,kBAAkB,EAAE,CAAC;gBACvB,IAAI,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC;YACzB,CAAC;YAED,IAAI,YAAY,CAAC,MAAM,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC;gBAChD,OAAO;YACT,CAAC;YAED,EAAE,CAAC,OAAO,GAAG,KAAK,IAAI,YAAY,CAAC,MAAM,GAAG,IAAI,CAAC,gBAAgB,CAAC;QACpE,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,KAAK,GAAG,YAAY,CAAC;IAC5B,CAAC;IAEO,QAAQ;QACd,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC,CAAC;IAC7E,CAAC;IAED,MAAM;;QACJ,MAAM,IAAI,GAAG,kBAAkB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAClD,OAAO,CACL,EAAC,IAAI;YACH,oEACE,EAAE,EAAE,IAAI,CAAC,kBAAkB,gBACf,IAAI,CAAC,uBAAuB,EACxC,OAAO,EACL,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,MAAM,IAAG,IAAI,CAAC,gBAAgB;oBACxC,CAAC,CAAC,IAAI,CAAC,iBAAiB,CAAC,cAAc,EAAE;oBACzC,CAAC,CAAC,SAAS,EAEf,aAAa,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE;oBAC5B,IAAI,CAAC,0BAA0B,GAAG,MAAM,CAAC;oBAEzC,MAAM,cAAc,GAAG,IAAI,CAAC,WAAW,CAAC,UAAW,CAAC,cAAc,CAChE,IAAI,CAAC,gBAAgB,CACtB,CAAC;oBAEF,iEAAiE;oBACjE,IAAI,cAAc,EAAE,CAAC;wBACnB,WAAW,CAAC,cAAc,CAAC,CAAC;oBAC9B,CAAC;gBACH,CAAC,IAEA,IAAI,CAAC,KAAK;iBACR,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,gBAAgB,CAAC;iBACnD,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;;gBACZ,MAAM,KAAK,GAAG,MAAA,IAAI,CAAC,KAAK,mCAAI,IAAI,CAAC,SAAS,CAAC;gBAE3C,OAAO,CACL,wBACE,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,GAAG,EAAE;wBACZ,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;oBAC1B,CAAC,EACD,WAAW,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,eAAe,EAAE,GAC7B,CACrB,CAAC;YACJ,CAAC,CAAC,CACQ;YACb,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,MAAM,IAAG,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAC5C,0BACE,EAAE,EAAE,IAAI,CAAC,gBAAgB,EACzB,GAAG,EAAE,IAAI,CAAC,iBAAiB,EAC3B,KAAK,EAAC,KAAK,EACX,QAAQ,EAAE,CAAC,EACX,WAAW,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,eAAe,EAAE,sBAC7B,IAAI,CAAC,kBAAkB,mBAC1B,IAAI,CAAC,kBAAkB,mBACvB,WAAW,CAAC,IAAI,CAAC,0BAA0B,CAAC,EAC3D,KAAK,EAAE,iBAAiB,GACJ,CACvB,CAAC,CAAC,CAAC,IAAI;YACR,4DACE,KAAK,EAAC,aAAa,gBACP,MAAA,IAAI,CAAC,YAAY,CAAC,mCAAI,aAAa;gBAE/C;oBACE,8DAAa,CACV,CACD;YACN,oEAAa,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,cAAc,EAAE,IACtD,MAAA,IAAI,CAAC,SAAS,0CAAE,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAC7B,wBACE,KAAK,EAAE,IAAI,EACX,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;oBACb,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;wBAClB,KAAK,EAAE,CAAC;wBACR,IAAI;qBACL,CAAC,CAAC;gBACL,CAAC,EACD,WAAW,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,eAAe,EAAE,GAC7B,CACrB,CAAC,CACU,CACT,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 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"]}