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

@siemens/ix 1.6.3 → 2.0.0-beta.1

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

Files changed (1549) hide show

package/dist/esm/ix-dropdown_2.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ix-dropdown.ix-dropdown-item.entry.js","mappings":"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","names":[],"sources":["./src/components/dropdown/dropdown.scss?tag=ix-dropdown&encapsulation=shadow","./src/components/dropdown/dropdown.tsx","./src/components/dropdown-item/dropdown-item.scss?tag=ix-dropdown-item&encapsulation=scoped","./src/components/dropdown-item/dropdown-item.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import '~bootstrap/scss/functions';\n@import 'common-variables';\n@import '~bootstrap/scss/variables';\n@import '~bootstrap/scss/mixins';\n@import '~bootstrap/scss/dropdown';\n\n@import 'mixins/fonts';\n@import 'mixins/text-truncation';\n@import 'components/dropdown';\n\n:host {\n min-width: 0px;\n}\n\n:host(.overflow) {\n max-height: 50vh;\n overflow-y: auto;\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n autoUpdate,\n computePosition,\n ComputePositionConfig,\n flip,\n inline,\n offset,\n shift,\n} from '@floating-ui/dom';\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Method,\n Prop,\n Watch,\n} from '@stencil/core';\nimport { BasePlacement, Placement, PlacementWithAlignment } from './placement';\n\n/\n @internal\n /\nexport type DropdownTriggerEvent = 'click' \| 'hover' \| 'focus';\n\n@Component({\n tag: 'ix-dropdown',\n styleUrl: 'dropdown.scss',\n shadow: true,\n})\nexport class Dropdown {\n @Element() hostElement!: HTMLIxDropdownElement;\n\n /\n Show dropdown\n /\n @Prop({ mutable: true, reflect: true }) show = false;\n\n /\n Define an element that triggers the dropdown.\n * A trigger can either be a string that will be interpreted as id attribute or a DOM element.\n /\n @Prop() trigger: string \| HTMLElement;\n\n /\n Define an anchor element\n /\n @Prop() anchor: string \| HTMLElement;\n\n /\n Close behavior\n /\n @Prop() closeBehavior: 'inside' \| 'outside' \| 'both' \| boolean = 'both';\n\n /\n Placement of the dropdown\n /\n @Prop() placement: Placement = 'bottom-start';\n\n /\n Position strategy\n /\n @Prop() positioningStrategy: 'absolute' \| 'fixed' = 'fixed';\n\n /\n Adjust dropdown width to the parent width\n * @deprecated Will be removed in 2.0.0. Property has a typo use `adjustDropdownWidthToReferenceWidth` instead.\n /\n @Prop() adjustDropdownWidthToReferenceWith = false;\n\n /\n Adjust dropdown width to the parent width\n \n @deprecated Will be removed. Not used anymore\n /\n @Prop() adjustDropdownWidthToReferenceWidth = false;\n\n /\n An optional header shown at the top of the dropdown\n /\n @Prop() header?: string;\n\n /\n Move dropdown along main axis of alignment\n \n @internal\n /\n @Prop() offset: {\n mainAxis?: number;\n crossAxis?: number;\n alignmentAxis?: number;\n };\n\n /\n Define one or more events to open dropdown\n * @internal\n /\n @Prop() triggerEvent: DropdownTriggerEvent \| DropdownTriggerEvent[] = 'click';\n\n /\n @internal\n /\n @Prop() overwriteDropdownStyle: (delegate: {\n dropdownRef: HTMLElement;\n triggerRef?: HTMLElement;\n }) => Promise<Partial<CSSStyleDeclaration>>;\n\n /\n Fire event after visibility of dropdown has changed\n /\n @Event() showChanged: EventEmitter<boolean>;\n\n private autoUpdateCleanup: () => void = null;\n\n private triggerElement?: Element;\n private anchorElement?: Element;\n\n private dropdownRef: HTMLElement;\n\n private toggleBind: any;\n private openBind: any;\n\n constructor() {\n this.toggleBind = this.toggle.bind(this);\n this.openBind = this.open.bind(this);\n }\n\n get dropdownItems() {\n return Array.from(this.hostElement.querySelectorAll('ix-dropdown-item'));\n }\n\n private addEventListenersFor(triggerEvent: DropdownTriggerEvent) {\n switch (triggerEvent) {\n case 'click':\n if (this.closeBehavior === 'outside') {\n this.triggerElement.addEventListener('click', this.openBind);\n } else {\n this.triggerElement.addEventListener('click', this.toggleBind);\n }\n break;\n\n case 'hover':\n this.triggerElement.addEventListener('mouseenter', this.openBind);\n break;\n\n case 'focus':\n this.triggerElement.addEventListener('focusin', this.openBind);\n break;\n }\n }\n\n private removeEventListenersFor(\n triggerEvent: DropdownTriggerEvent,\n triggerElement: Element\n ) {\n switch (triggerEvent) {\n case 'click':\n if (this.closeBehavior === 'outside') {\n triggerElement.removeEventListener('click', this.openBind);\n } else {\n triggerElement.removeEventListener('click', this.toggleBind);\n }\n break;\n\n case 'hover':\n triggerElement.removeEventListener('mouseenter', this.openBind);\n break;\n\n case 'focus':\n triggerElement.removeEventListener('focusin', this.openBind);\n break;\n }\n }\n\n private async registerListener(element: string \| HTMLElement) {\n this.triggerElement = await this.resolveElement(element);\n if (this.triggerElement) {\n if (Array.isArray(this.triggerEvent)) {\n this.triggerEvent.forEach((triggerEvent) => {\n this.addEventListenersFor(triggerEvent);\n });\n } else {\n this.addEventListenersFor(this.triggerEvent);\n }\n }\n }\n\n private async unregisterListener(element: string \| HTMLElement) {\n const trigger = await this.resolveElement(element);\n if (Array.isArray(this.triggerEvent)) {\n this.triggerEvent.forEach((triggerEvent) => {\n this.removeEventListenersFor(triggerEvent, trigger);\n });\n } else {\n this.removeEventListenersFor(this.triggerEvent, trigger);\n }\n }\n\n private resolveElement(element: string \| HTMLElement): Promise<Element> {\n if (typeof element !== 'string') {\n return Promise.resolve(element);\n }\n\n const selector = `#${element}`;\n return new Promise((resolve) => {\n if (document.querySelector(selector)) {\n return resolve(document.querySelector(selector));\n }\n\n const observer = new MutationObserver(() => {\n if (document.querySelector(selector)) {\n resolve(document.querySelector(selector));\n observer.disconnect();\n }\n });\n\n observer.observe(document.body, {\n childList: true,\n subtree: true,\n });\n });\n }\n\n @Watch('show')\n async changedShow(newShow: boolean) {\n if (newShow) {\n this.anchorElement = await (this.anchor\n ? this.resolveElement(this.anchor)\n : this.resolveElement(this.trigger));\n\n if (this.anchorElement) {\n this.applyDropdownPosition();\n }\n }\n }\n\n @Watch('trigger')\n changedTrigger(\n newTriggerValue: string \| HTMLElement,\n oldTriggerValue: string \| HTMLElement\n ) {\n if (newTriggerValue) {\n this.registerListener(newTriggerValue);\n }\n\n if (oldTriggerValue) {\n this.unregisterListener(oldTriggerValue);\n }\n }\n\n @Listen('click', {\n target: 'window',\n })\n clickOutside(event: Event) {\n const target = event.target as HTMLElement;\n\n if (\n this.show === false \|\|\n this.closeBehavior === false \|\|\n this.anchorElement?.contains(target) \|\|\n this.triggerElement?.contains(target)\n ) {\n return;\n }\n\n switch (this.closeBehavior) {\n case 'outside':\n if (!this.dropdownRef.contains(target)) {\n this.close();\n }\n break;\n case 'inside':\n if (this.dropdownRef.contains(target) && this.hostElement !== target) {\n this.close();\n }\n break;\n case 'both':\n if (this.hostElement !== target) this.close();\n break;\n default:\n this.close();\n }\n }\n\n private isNestedDropdown(element: Element) {\n return element.closest('ix-dropdown');\n }\n\n private isAnchorSubmenu() {\n const anchor = this.anchorElement?.closest('ix-dropdown-item');\n if (!anchor) {\n return false;\n }\n\n return true;\n }\n\n private toggle(event?: Event) {\n event?.preventDefault();\n\n if (this.isNestedDropdown(event.target as HTMLElement)) {\n event?.stopPropagation();\n }\n\n this.show = !this.show;\n this.showChanged.emit(this.show);\n }\n\n private open(event?: Event) {\n event?.preventDefault();\n\n if (this.isNestedDropdown(event.target as HTMLElement)) {\n event?.stopPropagation();\n }\n\n this.show = true;\n this.showChanged.emit(true);\n }\n\n private close(event?: Event) {\n if (event?.defaultPrevented) {\n return;\n }\n\n this.show = false;\n this.showChanged.emit(false);\n }\n\n private async applyDropdownPosition() {\n if (!this.anchorElement) {\n return;\n }\n if (!this.dropdownRef) {\n return;\n }\n const isSubmenu = this.isAnchorSubmenu();\n\n let positionConfig: Partial<ComputePositionConfig> = {\n strategy: this.positioningStrategy,\n middleware: [],\n };\n\n if (isSubmenu) {\n positionConfig.placement = 'right-start';\n }\n\n if (this.placement.includes('auto') \|\| isSubmenu) {\n positionConfig.middleware.push(\n flip({ fallbackStrategy: 'initialPlacement' })\n );\n positionConfig.placement = 'bottom-start';\n } else {\n positionConfig.placement = this.placement as\n \| BasePlacement\n \| PlacementWithAlignment;\n }\n\n positionConfig.middleware = [\n ...positionConfig.middleware,\n inline(),\n shift(),\n ];\n\n if (this.offset) {\n positionConfig.middleware.push(offset(this.offset));\n }\n\n if (this.autoUpdateCleanup) {\n this.autoUpdateCleanup();\n this.autoUpdateCleanup = null;\n }\n this.autoUpdateCleanup = autoUpdate(\n this.anchorElement,\n this.dropdownRef,\n async () => {\n const computeResponse = await computePosition(\n this.anchorElement,\n this.dropdownRef,\n positionConfig\n );\n Object.assign(this.dropdownRef.style, {\n top: '0',\n left: '0',\n transform: `translate(${Math.round(computeResponse.x)}px,${Math.round(\n computeResponse.y\n )}px)`,\n });\n if (this.overwriteDropdownStyle) {\n const overwriteStyle = await this.overwriteDropdownStyle({\n dropdownRef: this.dropdownRef,\n triggerRef: this.triggerElement as HTMLElement,\n });\n\n Object.assign(this.dropdownRef.style, overwriteStyle);\n }\n },\n {\n ancestorResize: true,\n ancestorScroll: true,\n elementResize: true,\n }\n );\n }\n\n async componentDidLoad() {\n if (this.trigger) {\n this.registerListener(this.trigger);\n }\n }\n\n async componentDidRender() {\n await this.applyDropdownPosition();\n }\n\n disconnectedCallback() {\n if (this.autoUpdateCleanup) {\n this.autoUpdateCleanup();\n }\n }\n\n /\n Update position of dropdown\n /\n @Method()\n async updatePosition() {\n this.applyDropdownPosition();\n }\n\n render() {\n return (\n <Host\n ref={(ref) => (this.dropdownRef = ref)}\n class={{\n 'dropdown-menu': true,\n show: this.show,\n overflow: true,\n }}\n style={{\n margin: '0',\n minWidth: '0px',\n position: this.positioningStrategy,\n }}\n >\n <div style={{ display: 'contents' }}>\n {this.header ? <div class=\"dropdown-header\">{this.header}</div> : ''}\n\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'common-variables';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n\n:host {\n display: block;\n\n &.icon-only {\n min-width: 0;\n\n .dropdown-item > .glyph {\n margin-inline-end: 0;\n }\n\n .dropdown-item {\n padding: $tiny-space $small-space;\n\n @include focus-visible {\n border-color: #199fff;\n }\n }\n }\n\n :focus {\n background-color: transparent;\n color: var(--theme-menu-item--color);\n }\n\n .checkmark {\n position: absolute;\n left: $small-space;\n }\n\n &.checked {\n background-color: var(--theme-select-list-item--background--selected);\n }\n\n .label {\n @include ellipsis;\n }\n\n &.disabled {\n pointer-events: none;\n }\n}\n\n::slotted(ix-icon) {\n margin-inline-start: auto;\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n} from '@stencil/core';\n\n@Component({\n tag: 'ix-dropdown-item',\n styleUrl: 'dropdown-item.scss',\n scoped: true,\n})\nexport class DropdownItem {\n @Element() hostElement!: HTMLIxDropdownItemElement;\n\n /\n Label of dropdown item\n /\n @Prop() label: string;\n\n /\n Icon of dropdown item\n /\n @Prop() icon: string;\n\n /\n Display hover state\n /\n @Prop() hover = false;\n\n /\n Disable item and remove event listeners\n /\n @Prop() disabled = false;\n\n /\n Whether the item is checked or not. If true a checkmark will mark the item as checked.\n /\n @Prop() checked = false;\n\n /\n Click on item\n /\n @Event() itemClick: EventEmitter<HTMLIxDropdownItemElement>;\n\n /\n Internal usage only\n */\n @Method()\n async emitItemClick() {\n this.itemClick.emit(this.hostElement);\n }\n\n render() {\n return (\n <Host\n class={{\n checked: this.checked,\n 'icon-text': this.label !== undefined && this.icon !== undefined,\n 'icon-only': this.label === undefined && this.icon !== undefined,\n disabled: this.disabled,\n }}\n >\n <button\n type=\"button\"\n class={{\n 'dropdown-item': true,\n hover: this.hover,\n disabled: this.disabled,\n }}\n onClick={() => this.emitItemClick()}\n tabindex={0}\n >\n {this.checked ? (\n <ix-icon class=\"checkmark\" name=\"single-check\" size=\"16\"></ix-icon>\n ) : null}\n\n {this.icon ? (\n <span\n class={{\n glyph: true,\n [`glyph-${this.icon}`]: true,\n disabled: this.disabled,\n }}\n ></span>\n ) : null}\n\n {this.label ? <span class=\"label\">{this.label}</span> : null}\n <slot></slot>\n </button>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-dropdown.ix-dropdown-item.entry.js","mappings":";;;;AAAA,MAAM,WAAW,GAAG,++BAA++B;;ACsCngC,MAAM,gBAAgB,GAAG,IAAI,GAAG,EAA2B,CAAC;AAC5D,IAAI,UAAU,GAAG,CAAC,CAAC;MAON,QAAQ;EAwFnB;;;IAZQ,sBAAiB,GAAe,IAAI,CAAC;IAUrC,aAAQ,GAAG,YAAY,UAAU,EAAE,IAAI,IAAI,IAAI,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC;sCA9EjC,KAAK;gBAKK,KAAK;;;yBAgBa,MAAM;qBAKjC,cAAc;+BAKA,OAAO;;;wBAsBW,OAAO;;IA4B3E,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACzC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAErC,IAAI,gBAAgB,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE;MACvC,OAAO,CAAC,IAAI,CAAC,sCAAsC,CAAC,CAAC;KACtD;IAED,gBAAgB,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;GAC5D;EAED,IAAI,aAAa;IACf,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,CAAC;GAC1E;EAEO,oBAAoB,CAAC,YAAkC;IAC7D,QAAQ,YAAY;MAClB,KAAK,OAAO;QACV,IAAI,IAAI,CAAC,aAAa,KAAK,SAAS,EAAE;UACpC,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;SAC9D;aAAM;UACL,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;SAChE;QACD,MAAM;MAER,KAAK,OAAO;QACV,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;QAClE,MAAM;MAER,KAAK,OAAO;QACV,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC/D,MAAM;KACT;GACF;EAEO,uBAAuB,CAC7B,YAAkC,EAClC,cAAuB;IAEvB,QAAQ,YAAY;MAClB,KAAK,OAAO;QACV,IAAI,IAAI,CAAC,aAAa,KAAK,SAAS,EAAE;UACpC,cAAc,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;SAC5D;aAAM;UACL,cAAc,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;SAC9D;QACD,MAAM;MAER,KAAK,OAAO;QACV,cAAc,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;QAChE,MAAM;MAER,KAAK,OAAO;QACV,cAAc,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC7D,MAAM;KACT;GACF;EAEO,MAAM,gBAAgB,CAAC,OAA6B;IAC1D,IAAI,CAAC,cAAc,GAAG,MAAM,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;IACzD,IAAI,IAAI,CAAC,cAAc,EAAE;MACvB,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE;QACpC,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,YAAY;UACrC,IAAI,CAAC,oBAAoB,CAAC,YAAY,CAAC,CAAC;SACzC,CAAC,CAAC;OACJ;WAAM;QACL,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;OAC9C;KACF;GACF;EAEO,MAAM,kBAAkB,CAAC,OAA6B;IAC5D,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;IACnD,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE;MACpC,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,YAAY;QACrC,IAAI,CAAC,uBAAuB,CAAC,YAAY,EAAE,OAAO,CAAC,CAAC;OACrD,CAAC,CAAC;KACJ;SAAM;MACL,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,YAAY,EAAE,OAAO,CAAC,CAAC;KAC1D;GACF;EAEO,cAAc,CAAC,OAA6B;IAClD,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE;MAC/B,OAAO,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;KACjC;IAED,MAAM,QAAQ,GAAG,IAAI,OAAO,EAAE,CAAC;IAC/B,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO;MACzB,IAAI,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE;QACpC,OAAO,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC;OAClD;MAED,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC;QACpC,IAAI,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE;UACpC,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC;UAC1C,QAAQ,CAAC,UAAU,EAAE,CAAC;SACvB;OACF,CAAC,CAAC;MAEH,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,EAAE;QAC9B,SAAS,EAAE,IAAI;QACf,OAAO,EAAE,IAAI;OACd,CAAC,CAAC;KACJ,CAAC,CAAC;GACJ;EAGD,MAAM,WAAW,CAAC,OAAgB;IAChC,IAAI,OAAO,EAAE;MACX,IAAI,CAAC,aAAa,GAAG,OAAO,IAAI,CAAC,MAAM;UACnC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,CAAC;UAChC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;MAEvC,IAAI,IAAI,CAAC,aAAa,EAAE;QACtB,IAAI,CAAC,qBAAqB,EAAE,CAAC;OAC9B;KACF;IAED,IAAI,OAAO,EAAE;MACX,gBAAgB,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;QACnC,IAAI,EAAE,KAAK,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE,EAAE;UACnD,OAAO,EAAE,CAAC;SACX;OACF,CAAC,CAAC;KACJ;GACF;EAGD,cAAc,CACZ,eAAqC,EACrC,eAAqC;IAErC,IAAI,eAAe,EAAE;MACnB,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC;KACxC;IAED,IAAI,eAAe,EAAE;MACnB,IAAI,CAAC,kBAAkB,CAAC,eAAe,CAAC,CAAC;KAC1C;GACF;EAKD,YAAY,CAAC,KAAY;;IACvB,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAC;IAC3C,IACE,IAAI,CAAC,IAAI,KAAK,KAAK;MACnB,IAAI,CAAC,aAAa,KAAK,KAAK;OAC5B,MAAA,IAAI,CAAC,aAAa,0CAAE,QAAQ,CAAC,MAAM,CAAC,CAAA;OACpC,MAAA,IAAI,CAAC,cAAc,0CAAE,QAAQ,CAAC,MAAM,CAAC,CAAA,EACrC;MACA,OAAO;KACR;IACD,QAAQ,IAAI,CAAC,aAAa;MACxB,KAAK,SAAS;QACZ,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE;UACtC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;SACnB;QACD,MAAM;MACR,KAAK,QAAQ;QACX,IAAI,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,WAAW,KAAK,MAAM,EAAE;UACpE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;SACnB;QACD,MAAM;MACR,KAAK,MAAM;QACT,IAAI,IAAI,CAAC,WAAW,KAAK,MAAM,EAAE;UAC/B,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;SACnB;QACD,MAAM;MACR;QACE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;KACrB;GACF;EAKD,OAAO,CAAC,KAAoB;IAC1B,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,IAAI,KAAK,CAAC,IAAI,KAAK,QAAQ,EAAE;MACjD,IAAI,CAAC,KAAK,EAAE,CAAC;KACd;GACF;EAEO,gBAAgB,CAAC,OAAgB;IACvC,OAAO,OAAO,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;GACvC;EAEO,eAAe;;IACrB,MAAM,MAAM,GAAG,MAAA,IAAI,CAAC,aAAa,0CAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;IAC/D,IAAI,CAAC,MAAM,EAAE;MACX,OAAO,KAAK,CAAC;KACd;IAED,OAAO,IAAI,CAAC;GACb;EAEO,MAAM,CAAC,KAAa;IAC1B,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,cAAc,EAAE,CAAC;IAExB,IAAI,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,MAAqB,CAAC,EAAE;MACtD,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,eAAe,EAAE,CAAC;KAC1B;IAED,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;IACvB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GAClC;EAEO,IAAI,CAAC,KAAa;IACxB,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,cAAc,EAAE,CAAC;IAExB,IAAI,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,MAAqB,CAAC,EAAE;MACtD,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,eAAe,EAAE,CAAC;KAC1B;IAED,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IACjB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GAC7B;EAEO,KAAK,CAAC,KAAa;IACzB,IAAI,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,gBAAgB,EAAE;MAC3B,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAC;MAC3C,IACE,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,aAAa,CAAC;QACnC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,cAAc,CAAC;QACpC,MAAM,CAAC,UAAU,CAAC,QAAQ,CAAC,IAAI,CAAC,aAAa,CAAC;QAC9C,MAAM,CAAC,UAAU,CAAC,QAAQ,CAAC,IAAI,CAAC,cAAc,CAAC;QAE/C,OAAO;KACV;IAED,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IAClB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAC9B;EAEO,MAAM,qBAAqB;IACjC,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;MACvB,OAAO;KACR;IACD,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;MACrB,OAAO;KACR;IACD,MAAM,SAAS,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;IAEzC,IAAI,cAAc,GAAmC;MACnD,QAAQ,EAAE,IAAI,CAAC,mBAAmB;MAClC,UAAU,EAAE,EAAE;KACf,CAAC;IAEF,IAAI,CAAC,IAAI,CAAC,0BAA0B,EAAE;MACpC,cAAc,CAAC,UAAU,CAAC,IAAI,CAC5B,IAAI,CAAC,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,CAAC,CAC/C,CAAC;KACH;IAED,cAAc,CAAC,SAAS,GAAG,SAAS,GAAG,aAAa,GAAG,IAAI,CAAC,SAAS,CAAC;IAEtE,cAAc,CAAC,UAAU,GAAG;MAC1B,GAAG,cAAc,CAAC,UAAU;MAC5B,MAAM,EAAE;MACR,KAAK,EAAE;KACR,CAAC;IAEF,IAAI,IAAI,CAAC,MAAM,EAAE;MACf,cAAc,CAAC,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;KACrD;IAED,IAAI,IAAI,CAAC,iBAAiB,EAAE;MAC1B,IAAI,CAAC,iBAAiB,EAAE,CAAC;MACzB,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;KAC/B;IAED,IAAI,CAAC,iBAAiB,GAAG,UAAU,CACjC,IAAI,CAAC,aAAa,EAClB,IAAI,CAAC,WAAW,EAChB;MACE,MAAM,eAAe,GAAG,MAAM,eAAe,CAC3C,IAAI,CAAC,aAAa,EAClB,IAAI,CAAC,WAAW,EAChB,cAAc,CACf,CAAC;MAEF,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE;QACpC,GAAG,EAAE,GAAG;QACR,IAAI,EAAE,GAAG;QACT,SAAS,EAAE,aAAa,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,MAAM,IAAI,CAAC,KAAK,CACnE,eAAe,CAAC,CAAC,CAClB,KAAK;OACP,CAAC,CAAC;MACH,IAAI,IAAI,CAAC,sBAAsB,EAAE;QAC/B,MAAM,cAAc,GAAG,MAAM,IAAI,CAAC,sBAAsB,CAAC;UACvD,WAAW,EAAE,IAAI,CAAC,WAAW;UAC7B,UAAU,EAAE,IAAI,CAAC,cAA6B;SAC/C,CAAC,CAAC;QAEH,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,cAAc,CAAC,CAAC;OACvD;KACF,EACD;MACE,cAAc,EAAE,IAAI;MACpB,cAAc,EAAE,IAAI;MACpB,aAAa,EAAE,IAAI;KACpB,CACF,CAAC;GACH;EAED,MAAM,gBAAgB;IACpB,IAAI,IAAI,CAAC,OAAO,EAAE;MAChB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;KACzC;GACF;EAED,MAAM,kBAAkB;;IACtB,MAAM,IAAI,CAAC,qBAAqB,EAAE,CAAC;IACnC,IAAI,CAAC,aAAa,GAAG,OAAO,IAAI,CAAC,MAAM;QACnC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,CAAC;QAChC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;IAEvC,IACE,IAAI,CAAC,eAAe,EAAE;MACtB,CAAA,MAAA,IAAI,CAAC,aAAa,0CAAE,OAAO,MAAK,kBAAkB,EAClD;MACC,IAAI,CAAC,aAA2C,CAAC,SAAS,GAAG,IAAI,CAAC;KACpE;GACF;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,iBAAiB,EAAE;MAC1B,IAAI,CAAC,iBAAiB,EAAE,CAAC;KAC1B;IAED,IAAI,gBAAgB,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE;MACvC,gBAAgB,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACxC;GACF;;;;EAMD,MAAM,cAAc;IAClB,IAAI,CAAC,qBAAqB,EAAE,CAAC;GAC9B;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IACH,GAAG,EAAE,CAAC,GAAG,MAAM,IAAI,CAAC,WAAW,GAAG,GAAG,CAAC,EACtC,KAAK,EAAE;QACL,eAAe,EAAE,IAAI;QACrB,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,QAAQ,EAAE,IAAI;OACf,EACD,KAAK,EAAE;QACL,MAAM,EAAE,GAAG;QACX,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,IAAI,CAAC,mBAAmB;OACnC,EACD,IAAI,EAAC,MAAM,IAEX,WAAK,KAAK,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,IAChC,IAAI,CAAC,MAAM,GAAG,WAAK,KAAK,EAAC,iBAAiB,IAAE,IAAI,CAAC,MAAM,CAAO,GAAG,EAAE,EAEpE,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;ACtfH,MAAM,eAAe,GAAG,m+EAAm+E;;MCyB9+E,YAAY;;;;;;iBAgBP,KAAK;oBAKF,KAAK;mBAKN,KAAK;qBAKH,KAAK;2BAKC,KAAK;;;;;EAW/B,MAAM,aAAa;IACjB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;GACvC;EAEO,UAAU;IAChB,QACE,IAAI,CAAC,KAAK,KAAK,SAAS;MACxB,IAAI,CAAC,WAAW,CAAC,SAAS,KAAK,EAAE;MACjC,IAAI,CAAC,IAAI,KAAK,SAAS,EACvB;GACH;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,WAAW,EAAE,IAAI,CAAC,UAAU,EAAE;QAC9B,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,OAAO,EAAE,IAAI,CAAC,SAAS;OACxB,EACD,IAAI,EAAC,UAAU,IAEf,cACE,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,EACX,KAAK,EAAE;QACL,eAAe,EAAE,IAAI;QACrB,kBAAkB,EAAE,IAAI,CAAC,eAAe;OACzC,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,aAAa,EAAE,IAElC,CAAC,IAAI,CAAC,eAAe,IACpB,WAAK,KAAK,EAAC,uBAAuB,IAC/B,IAAI,CAAC,OAAO,IACX,eACE,KAAK,EAAC,WAAW,EACjB,IAAI,EAAC,cAAc,EACnB,IAAI,EAAC,IAAI,GACA,IACT,IAAI,CACJ,IACJ,IAAI,EACP,IAAI,CAAC,IAAI,IACR,eAAS,KAAK,EAAC,oBAAoB,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAY,IAC7D,IAAI,EACR,WAAK,KAAK,EAAC,oBAAoB,IAC5B,IAAI,CAAC,KAAK,EACX,eAAa,CACT,EACL,IAAI,CAAC,SAAS,IACb,eAAS,IAAI,EAAE,iBAAiB,EAAE,KAAK,EAAE,cAAc,GAAY,IACjE,IAAI,CACD,CACJ,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/dropdown/dropdown.scss?tag=ix-dropdown&encapsulation=shadow","./src/components/dropdown/dropdown.tsx","./src/components/dropdown-item/dropdown-item.scss?tag=ix-dropdown-item&encapsulation=shadow","./src/components/dropdown-item/dropdown-item.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'common-variables';\n\n@import 'legacy/mixins/fonts';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n:host {\n background-color: var(--theme-color-2);\n border-radius: var(--theme-default-border-radius);\n @include ix-component;\n min-width: 0px;\n z-index: var(--theme-z-index-dropdown);\n box-shadow: var(--theme-shadow-4);\n\n padding: 0.25rem 0px;\n\n .dropdown-header {\n display: flex;\n align-items: center;\n height: $large-control-height;\n color: var(--theme-menu-header--color);\n padding: 0 $default-space;\n }\n}\n\n:host(.overflow) {\n max-height: 50vh;\n overflow-y: auto;\n}\n\n:host(:not(.show)) {\n display: none;\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n autoUpdate,\n computePosition,\n ComputePositionConfig,\n flip,\n inline,\n offset,\n shift,\n} from '@floating-ui/dom';\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Method,\n Prop,\n Watch,\n} from '@stencil/core';\nimport { AlignedPlacement } from './placement';\n\n/\n @internal\n /\nexport type DropdownTriggerEvent = 'click' \| 'hover' \| 'focus';\n\ntype DisposeDropdown = () => void;\nconst dropdownDisposer = new Map<string, DisposeDropdown>();\nlet sequenceId = 0;\n\n@Component({\n tag: 'ix-dropdown',\n styleUrl: 'dropdown.scss',\n shadow: true,\n})\nexport class Dropdown {\n @Element() hostElement!: HTMLIxDropdownElement;\n\n /\n Suppress the automatic placement of the dropdown.\n \n @since 2.0.0\n /\n @Prop() suppressAutomaticPlacement = false;\n\n /\n Show dropdown\n /\n @Prop({ mutable: true, reflect: true }) show = false;\n\n /\n Define an element that triggers the dropdown.\n * A trigger can either be a string that will be interpreted as id attribute or a DOM element.\n /\n @Prop() trigger: string \| HTMLElement;\n\n /\n Define an anchor element\n /\n @Prop() anchor: string \| HTMLElement;\n\n /\n Close behavior\n /\n @Prop() closeBehavior: 'inside' \| 'outside' \| 'both' \| boolean = 'both';\n\n /\n Placement of the dropdown\n /\n @Prop() placement: AlignedPlacement = 'bottom-start';\n\n /\n Position strategy\n /\n @Prop() positioningStrategy: 'absolute' \| 'fixed' = 'fixed';\n\n /\n An optional header shown at the top of the dropdown\n /\n @Prop() header?: string;\n\n /\n Move dropdown along main axis of alignment\n \n @internal\n /\n @Prop() offset: {\n mainAxis?: number;\n crossAxis?: number;\n alignmentAxis?: number;\n };\n\n /\n Define one or more events to open dropdown\n * @internal\n /\n @Prop() triggerEvent: DropdownTriggerEvent \| DropdownTriggerEvent[] = 'click';\n\n /\n @internal\n /\n @Prop() overwriteDropdownStyle: (delegate: {\n dropdownRef: HTMLElement;\n triggerRef?: HTMLElement;\n }) => Promise<Partial<CSSStyleDeclaration>>;\n\n /\n Fire event after visibility of dropdown has changed\n /\n @Event() showChanged: EventEmitter<boolean>;\n\n private autoUpdateCleanup: () => void = null;\n\n private triggerElement?: Element;\n private anchorElement?: Element;\n\n private dropdownRef: HTMLElement;\n\n private toggleBind: any;\n private openBind: any;\n\n private localUId = `dropdown-${sequenceId++}-${new Date().valueOf()}`;\n\n constructor() {\n this.toggleBind = this.toggle.bind(this);\n this.openBind = this.open.bind(this);\n\n if (dropdownDisposer.has(this.localUId)) {\n console.warn('Dropdown with duplicated id detected');\n }\n\n dropdownDisposer.set(this.localUId, this.close.bind(this));\n }\n\n get dropdownItems() {\n return Array.from(this.hostElement.querySelectorAll('ix-dropdown-item'));\n }\n\n private addEventListenersFor(triggerEvent: DropdownTriggerEvent) {\n switch (triggerEvent) {\n case 'click':\n if (this.closeBehavior === 'outside') {\n this.triggerElement.addEventListener('click', this.openBind);\n } else {\n this.triggerElement.addEventListener('click', this.toggleBind);\n }\n break;\n\n case 'hover':\n this.triggerElement.addEventListener('mouseenter', this.openBind);\n break;\n\n case 'focus':\n this.triggerElement.addEventListener('focusin', this.openBind);\n break;\n }\n }\n\n private removeEventListenersFor(\n triggerEvent: DropdownTriggerEvent,\n triggerElement: Element\n ) {\n switch (triggerEvent) {\n case 'click':\n if (this.closeBehavior === 'outside') {\n triggerElement.removeEventListener('click', this.openBind);\n } else {\n triggerElement.removeEventListener('click', this.toggleBind);\n }\n break;\n\n case 'hover':\n triggerElement.removeEventListener('mouseenter', this.openBind);\n break;\n\n case 'focus':\n triggerElement.removeEventListener('focusin', this.openBind);\n break;\n }\n }\n\n private async registerListener(element: string \| HTMLElement) {\n this.triggerElement = await this.resolveElement(element);\n if (this.triggerElement) {\n if (Array.isArray(this.triggerEvent)) {\n this.triggerEvent.forEach((triggerEvent) => {\n this.addEventListenersFor(triggerEvent);\n });\n } else {\n this.addEventListenersFor(this.triggerEvent);\n }\n }\n }\n\n private async unregisterListener(element: string \| HTMLElement) {\n const trigger = await this.resolveElement(element);\n if (Array.isArray(this.triggerEvent)) {\n this.triggerEvent.forEach((triggerEvent) => {\n this.removeEventListenersFor(triggerEvent, trigger);\n });\n } else {\n this.removeEventListenersFor(this.triggerEvent, trigger);\n }\n }\n\n private resolveElement(element: string \| HTMLElement): Promise<Element> {\n if (typeof element !== 'string') {\n return Promise.resolve(element);\n }\n\n const selector = `#${element}`;\n return new Promise((resolve) => {\n if (document.querySelector(selector)) {\n return resolve(document.querySelector(selector));\n }\n\n const observer = new MutationObserver(() => {\n if (document.querySelector(selector)) {\n resolve(document.querySelector(selector));\n observer.disconnect();\n }\n });\n\n observer.observe(document.body, {\n childList: true,\n subtree: true,\n });\n });\n }\n\n @Watch('show')\n async changedShow(newShow: boolean) {\n if (newShow) {\n this.anchorElement = await (this.anchor\n ? this.resolveElement(this.anchor)\n : this.resolveElement(this.trigger));\n\n if (this.anchorElement) {\n this.applyDropdownPosition();\n }\n }\n\n if (newShow) {\n dropdownDisposer.forEach((dispose, id) => {\n if (id !== this.localUId && !this.isAnchorSubmenu()) {\n dispose();\n }\n });\n }\n }\n\n @Watch('trigger')\n changedTrigger(\n newTriggerValue: string \| HTMLElement,\n oldTriggerValue: string \| HTMLElement\n ) {\n if (newTriggerValue) {\n this.registerListener(newTriggerValue);\n }\n\n if (oldTriggerValue) {\n this.unregisterListener(oldTriggerValue);\n }\n }\n\n @Listen('click', {\n target: 'window',\n })\n clickOutside(event: Event) {\n const target = event.target as HTMLElement;\n if (\n this.show === false \|\|\n this.closeBehavior === false \|\|\n this.anchorElement?.contains(target) \|\|\n this.triggerElement?.contains(target)\n ) {\n return;\n }\n switch (this.closeBehavior) {\n case 'outside':\n if (!this.dropdownRef.contains(target)) {\n this.close(event);\n }\n break;\n case 'inside':\n if (this.dropdownRef.contains(target) && this.hostElement !== target) {\n this.close(event);\n }\n break;\n case 'both':\n if (this.hostElement !== target) {\n this.close(event);\n }\n break;\n default:\n this.close(event);\n }\n }\n\n @Listen('keydown', {\n target: 'window',\n })\n keydown(event: KeyboardEvent) {\n if (this.show === true && event.code === 'Escape') {\n this.close();\n }\n }\n\n private isNestedDropdown(element: Element) {\n return element.closest('ix-dropdown');\n }\n\n private isAnchorSubmenu() {\n const anchor = this.anchorElement?.closest('ix-dropdown-item');\n if (!anchor) {\n return false;\n }\n\n return true;\n }\n\n private toggle(event?: Event) {\n event?.preventDefault();\n\n if (this.isNestedDropdown(event.target as HTMLElement)) {\n event?.stopPropagation();\n }\n\n this.show = !this.show;\n this.showChanged.emit(this.show);\n }\n\n private open(event?: Event) {\n event?.preventDefault();\n\n if (this.isNestedDropdown(event.target as HTMLElement)) {\n event?.stopPropagation();\n }\n\n this.show = true;\n this.showChanged.emit(true);\n }\n\n private close(event?: Event) {\n if (event?.defaultPrevented) {\n const target = event.target as HTMLElement;\n if (\n target.contains(this.anchorElement) \|\|\n target.contains(this.triggerElement) \|\|\n target.shadowRoot.contains(this.anchorElement) \|\|\n target.shadowRoot.contains(this.triggerElement)\n )\n return;\n }\n\n this.show = false;\n this.showChanged.emit(false);\n }\n\n private async applyDropdownPosition() {\n if (!this.anchorElement) {\n return;\n }\n if (!this.dropdownRef) {\n return;\n }\n const isSubmenu = this.isAnchorSubmenu();\n\n let positionConfig: Partial<ComputePositionConfig> = {\n strategy: this.positioningStrategy,\n middleware: [],\n };\n\n if (!this.suppressAutomaticPlacement) {\n positionConfig.middleware.push(\n flip({ fallbackStrategy: 'initialPlacement' })\n );\n }\n\n positionConfig.placement = isSubmenu ? 'right-start' : this.placement;\n\n positionConfig.middleware = [\n ...positionConfig.middleware,\n inline(),\n shift(),\n ];\n\n if (this.offset) {\n positionConfig.middleware.push(offset(this.offset));\n }\n\n if (this.autoUpdateCleanup) {\n this.autoUpdateCleanup();\n this.autoUpdateCleanup = null;\n }\n\n this.autoUpdateCleanup = autoUpdate(\n this.anchorElement,\n this.dropdownRef,\n async () => {\n const computeResponse = await computePosition(\n this.anchorElement,\n this.dropdownRef,\n positionConfig\n );\n\n Object.assign(this.dropdownRef.style, {\n top: '0',\n left: '0',\n transform: `translate(${Math.round(computeResponse.x)}px,${Math.round(\n computeResponse.y\n )}px)`,\n });\n if (this.overwriteDropdownStyle) {\n const overwriteStyle = await this.overwriteDropdownStyle({\n dropdownRef: this.dropdownRef,\n triggerRef: this.triggerElement as HTMLElement,\n });\n\n Object.assign(this.dropdownRef.style, overwriteStyle);\n }\n },\n {\n ancestorResize: true,\n ancestorScroll: true,\n elementResize: true,\n }\n );\n }\n\n async componentDidLoad() {\n if (this.trigger) {\n this.changedTrigger(this.trigger, null);\n }\n }\n\n async componentDidRender() {\n await this.applyDropdownPosition();\n this.anchorElement = await (this.anchor\n ? this.resolveElement(this.anchor)\n : this.resolveElement(this.trigger));\n\n if (\n this.isAnchorSubmenu() &&\n this.anchorElement?.tagName === 'IX-DROPDOWN-ITEM'\n ) {\n (this.anchorElement as HTMLIxDropdownItemElement).isSubMenu = true;\n }\n }\n\n disconnectedCallback() {\n if (this.autoUpdateCleanup) {\n this.autoUpdateCleanup();\n }\n\n if (dropdownDisposer.has(this.localUId)) {\n dropdownDisposer.delete(this.localUId);\n }\n }\n\n /\n Update position of dropdown\n /\n @Method()\n async updatePosition() {\n this.applyDropdownPosition();\n }\n\n render() {\n return (\n <Host\n ref={(ref) => (this.dropdownRef = ref)}\n class={{\n 'dropdown-menu': true,\n show: this.show,\n overflow: true,\n }}\n style={{\n margin: '0',\n minWidth: '0px',\n position: this.positioningStrategy,\n }}\n role=\"list\"\n >\n <div style={{ display: 'contents' }}>\n {this.header ? <div class=\"dropdown-header\">{this.header}</div> : ''}\n\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'mixins/shadow-dom/component';\n@import 'mixins/shadow-dom/hover';\n\n$itemPadding: 0.5rem;\n$itemPaddingRight: 1.5rem;\n$focusBorder: 0.0625rem;\n\n@mixin applyItemWidth($padding, $paddingRight) {\n width: calc(100% - #{$padding} - #{$paddingRight} - #{2 $focusBorder});\n\n padding: 0 $padding;\n padding-right: $paddingRight;\n}\n\n:host {\n --ix-dropdown-item-checked-color: var(--theme-color-primary);\n @include ix-component;\n display: flex;\n flex-direction: row;\n\n position: relative;\n height: 2.5rem;\n width: auto;\n overflow: hidden;\n cursor: pointer;\n\n .dropdown-item {\n all: unset;\n display: flex;\n flex-direction: row;\n align-items: center;\n position: relative;\n height: calc(100% - 2px);\n @include applyItemWidth($itemPadding, $itemPaddingRight);\n border: $focusBorder solid transparent;\n white-space: nowrap;\n }\n\n .dropdown-item.no-checked-field {\n @include applyItemWidth(1rem, $itemPaddingRight);\n }\n\n .dropdown-item:focus-visible {\n border-color: var(--theme-color-focus-bdr);\n }\n\n .dropdown-item-checked {\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n height: 100%;\n width: 1rem;\n min-width: 1rem;\n margin-right: 0.25rem;\n\n color: var(--ix-dropdown-item-checked-color);\n }\n\n .dropdown-item-icon {\n margin-right: 0.25rem;\n color: var(--theme-color-soft-text);\n }\n\n .dropdown-item-text {\n display: block;\n position: relative;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .dropdown-item:focus-visible {\n outline: 1px solid yellow;\n }\n\n .submenu-icon {\n margin-left: auto;\n }\n}\n\n:host(.icon-only) {\n .dropdown-item-icon {\n margin-right: 0px;\n }\n\n .dropdown-item-checked {\n display: none;\n }\n\n .dropdown-item {\n @include applyItemWidth(0.5rem, 0.5rem);\n }\n}\n\n:host(.submenu) {\n .dropdown-item {\n @include applyItemWidth($itemPadding, 0.5rem);\n }\n}\n\n@include ghost-hover-pressed;\n\n:host(.disabled) {\n pointer-events: none;\n color: var(--theme-color-weak-text) !important;\n\n .dropdown-item-icon {\n color: var(--theme-color-weak-text) !important;\n }\n}\n","/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\nimport { chevronRightSmall } from '@siemens/ix-icons/icons';\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n} from '@stencil/core';\n\n@Component({\n tag: 'ix-dropdown-item',\n styleUrl: 'dropdown-item.scss',\n shadow: true,\n})\nexport class DropdownItem {\n @Element() hostElement!: HTMLIxDropdownItemElement;\n\n /\n Label of dropdown item\n /\n @Prop() label: string;\n\n /\n Icon of dropdown item\n /\n @Prop() icon: string;\n\n /\n Display hover state\n /\n @Prop() hover = false;\n\n /\n Disable item and remove event listeners\n /\n @Prop() disabled = false;\n\n /\n Whether the item is checked or not. If true a checkmark will mark the item as checked.\n /\n @Prop() checked = false;\n\n /\n @internal\n /\n @Prop() isSubMenu = false;\n\n /\n @internal\n /\n @Prop() suppressChecked = false;\n\n /\n Click on item\n /\n @Event() itemClick: EventEmitter<HTMLIxDropdownItemElement>;\n\n /\n Internal usage only\n */\n @Method()\n async emitItemClick() {\n this.itemClick.emit(this.hostElement);\n }\n\n private isIconOnly() {\n return (\n this.label === undefined &&\n this.hostElement.innerText === '' &&\n this.icon !== undefined\n );\n }\n\n render() {\n return (\n <Host\n class={{\n hover: this.hover,\n 'icon-only': this.isIconOnly(),\n disabled: this.disabled,\n submenu: this.isSubMenu,\n }}\n role=\"listitem\"\n >\n <button\n type=\"button\"\n tabIndex={0}\n class={{\n 'dropdown-item': true,\n 'no-checked-field': this.suppressChecked,\n }}\n onClick={() => this.emitItemClick()}\n >\n {!this.suppressChecked ? (\n <div class=\"dropdown-item-checked\">\n {this.checked ? (\n <ix-icon\n class=\"checkmark\"\n name=\"single-check\"\n size=\"16\"\n ></ix-icon>\n ) : null}\n </div>\n ) : null}\n {this.icon ? (\n <ix-icon class=\"dropdown-item-icon\" name={this.icon}></ix-icon>\n ) : null}\n <div class=\"dropdown-item-text\">\n {this.label}\n <slot></slot>\n </div>\n {this.isSubMenu ? (\n <ix-icon name={chevronRightSmall} class={'submenu-icon'}></ix-icon>\n ) : null}\n </button>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/ix-empty-state.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-8ddfb6d8.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-eb0be730.js';
-const emptyStateCss = ":host *,:host *::after,:host *::before{box-sizing:border-box}:host .label__subHeader{color:var(--theme-color-soft-text)}:host(.emptyState.emptyState--large){display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1rem}:host(.emptyState.emptyState--large) .emptyState__icon{width:3.5rem;height:3.5rem;display:flex;justify-content:center;align-items:center}:host(.emptyState.emptyState--large) .emptyState__icon ix-icon{transform:scale(1.75)}:host(.emptyState.emptyState--large) .emptyState__content{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1.5rem}:host(.emptyState.emptyState--large) .emptyState__content .content__label{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:0.5rem}:host(.emptyState.emptyState--compact){display:flex;flex-direction:row;justify-content:center;align-items:center;gap:1rem}:host(.emptyState.emptyState--compact) .emptyState__icon{display:flex;flex-direction:row;align-items:center;height:2.5rem}:host(.emptyState.emptyState--compact) .emptyState__content{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:1rem}:host(.emptyState.emptyState--compactBreak){display:flex;flex-direction:row;align-items:flex-start;gap:1rem}:host(.emptyState.emptyState--compactBreak) .emptyState__icon{display:flex;flex-direction:row;align-items:center;height:2.5rem}:host(.emptyState.emptyState--compactBreak) .emptyState__content{display:flex;flex-direction:column;align-items:flex-start;gap:0.5rem}";
+const emptyStateCss = ":host{}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .label__subHeader{color:var(--theme-color-soft-text)}:host(.emptyState.emptyState--large){display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1rem}:host(.emptyState.emptyState--large) .emptyState__icon{width:3.5rem;height:3.5rem;display:flex;justify-content:center;align-items:center}:host(.emptyState.emptyState--large) .emptyState__icon ix-icon{transform:scale(1.75)}:host(.emptyState.emptyState--large) .emptyState__content{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1.5rem}:host(.emptyState.emptyState--large) .emptyState__content .content__label{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:0.5rem}:host(.emptyState.emptyState--compact){display:flex;flex-direction:row;justify-content:center;align-items:center;gap:1rem}:host(.emptyState.emptyState--compact) .emptyState__icon{display:flex;flex-direction:row;align-items:center;height:2.5rem}:host(.emptyState.emptyState--compact) .emptyState__content{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:1rem}:host(.emptyState.emptyState--compactBreak){display:flex;flex-direction:row;align-items:flex-start;gap:1rem}:host(.emptyState.emptyState--compactBreak) .emptyState__icon{display:flex;flex-direction:row;align-items:center;height:2.5rem}:host(.emptyState.emptyState--compactBreak) .emptyState__content{display:flex;flex-direction:column;align-items:flex-start;gap:0.5rem}";
 const EmptyState = class {
   constructor(hostRef) {

package/dist/esm/ix-empty-state.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ix-empty-state.entry.js","mappings":";;AAAA,MAAM,aAAa,GAAG,~~2/CAA2/C~~;;~~MCqBpgD~~,UAAU;;;;kBAIc,OAAO;;;;;;EA2B1C,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,0BAA0B,IAAI,CAAC,MAAM,EAAE,IACjD,IAAI,CAAC,IAAI,KACR,WAAK,KAAK,EAAC,kBAAkB,IAE3B,eACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,MAAM,KAAK,OAAO,GAAG,IAAI,GAAG,IAAI,EAC3C,KAAK,EAAC,iBAAiB,GACvB,CACE,CACP,EAED,WAAK,KAAK,EAAC,qBAAqB,IAC9B,WAAK,KAAK,EAAC,gBAAgB,IACzB,qBACE,OAAO,EAAE,IAAI,CAAC,MAAM,KAAK,OAAO,GAAG,eAAe,GAAG,SAAS,IAE7D,IAAI,CAAC,MAAM,CACE,EAEf,IAAI,CAAC,SAAS,KACb,WAAK,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,SAAS,CAAO,CACrD,CACG,EAEL,IAAI,CAAC,MAAM,KACV,WAAK,KAAK,EAAC,iBAAiB,IAC1B,iBAAW,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,IAC9C,IAAI,CAAC,MAAM,CACF,CACR,CACP,CACG,CACD,EACP;GACH;;;;;;","names":[],"sources":["./src/components/empty-state/empty-state.scss?tag=ix-empty-state&encapsulation=shadow","./src/components/empty-state/empty-state.tsx"],"sourcesContent":["@import 'common-variables';\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n\n .label__subHeader {\n color: var(--theme-color-soft-text);\n }\n}\n\n:host(.emptyState.emptyState--large) {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: $default-space;\n\n .emptyState__icon {\n width: 3.5rem;\n height: 3.5rem;\n display: flex;\n justify-content: center;\n align-items: center;\n\n ix-icon {\n transform: scale(1.75);\n }\n }\n\n .emptyState__content {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: $large-space;\n\n .content__label {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: $small-space;\n }\n }\n}\n\n:host(.emptyState.emptyState--compact) {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n gap: $default-space;\n\n .emptyState__icon {\n display: flex;\n flex-direction: row;\n align-items: center;\n height: $large-control-height;\n }\n\n .emptyState__content {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n gap: $default-space;\n }\n}\n\n:host(.emptyState.emptyState--compactBreak) {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n gap: $default-space;\n\n .emptyState__icon {\n display: flex;\n flex-direction: row;\n align-items: center;\n height: $large-control-height;\n }\n\n .emptyState__content {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: $small-space;\n }\n}\n","/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\nexport type EmptyStateLayout = 'large' \| 'compact' \| 'compactBreak';\n\n/\n @since 1.6.0\n /\n@Component({\n tag: 'ix-empty-state',\n styleUrl: 'empty-state.scss',\n shadow: true,\n})\nexport class EmptyState {\n /\n Optional empty state layout - one of 'large', 'compact' or 'compactBreak'\n /\n @Prop() layout: EmptyStateLayout = 'large';\n\n /\n Optional empty state icon\n /\n @Prop() icon: string;\n\n /\n Empty state header\n /\n @Prop() header!: string;\n\n /\n Optional empty state sub header\n /\n @Prop() subHeader: string;\n\n /\n Optional empty state action\n /\n @Prop() action: string;\n\n /\n Empty state action click event\n /\n @Event() actionClick: EventEmitter<void>;\n\n render() {\n return (\n <Host class={`emptyState emptyState--${this.layout}`}>\n {this.icon && (\n <div class=\"emptyState__icon\">\n {/ TODO: replace size for large layout with '56' if available */}\n <ix-icon\n name={this.icon}\n size={this.layout === 'large' ? '32' : '32'}\n color=\"color-soft-text\"\n />\n </div>\n )}\n\n <div class=\"emptyState__content\">\n <div class=\"content__label\">\n <ix-typography\n variant={this.layout === 'large' ? 'display-large' : 'default'}\n >\n {this.header}\n </ix-typography>\n\n {this.subHeader && (\n <div class=\"label__subHeader\">{this.subHeader}</div>\n )}\n </div>\n\n {this.action && (\n <div class=\"content__action\">\n <ix-button onClick={() => this.actionClick.emit()}>\n {this.action}\n </ix-button>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-empty-state.entry.js","mappings":";;AAAA,MAAM,aAAa,GAAG,iiEAAiiE;;MCqB1iE,UAAU;;;;kBAIc,OAAO;;;;;;EA2B1C,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,0BAA0B,IAAI,CAAC,MAAM,EAAE,IACjD,IAAI,CAAC,IAAI,KACR,WAAK,KAAK,EAAC,kBAAkB,IAE3B,eACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,MAAM,KAAK,OAAO,GAAG,IAAI,GAAG,IAAI,EAC3C,KAAK,EAAC,iBAAiB,GACvB,CACE,CACP,EAED,WAAK,KAAK,EAAC,qBAAqB,IAC9B,WAAK,KAAK,EAAC,gBAAgB,IACzB,qBACE,OAAO,EAAE,IAAI,CAAC,MAAM,KAAK,OAAO,GAAG,eAAe,GAAG,SAAS,IAE7D,IAAI,CAAC,MAAM,CACE,EAEf,IAAI,CAAC,SAAS,KACb,WAAK,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,SAAS,CAAO,CACrD,CACG,EAEL,IAAI,CAAC,MAAM,KACV,WAAK,KAAK,EAAC,iBAAiB,IAC1B,iBAAW,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,IAC9C,IAAI,CAAC,MAAM,CACF,CACR,CACP,CACG,CACD,EACP;GACH;;;;;;","names":[],"sources":["./src/components/empty-state/empty-state.scss?tag=ix-empty-state&encapsulation=shadow","./src/components/empty-state/empty-state.tsx"],"sourcesContent":["@import 'common-variables';\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n\n .label__subHeader {\n color: var(--theme-color-soft-text);\n }\n}\n\n:host(.emptyState.emptyState--large) {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: $default-space;\n\n .emptyState__icon {\n width: 3.5rem;\n height: 3.5rem;\n display: flex;\n justify-content: center;\n align-items: center;\n\n ix-icon {\n transform: scale(1.75);\n }\n }\n\n .emptyState__content {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: $large-space;\n\n .content__label {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: $small-space;\n }\n }\n}\n\n:host(.emptyState.emptyState--compact) {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n gap: $default-space;\n\n .emptyState__icon {\n display: flex;\n flex-direction: row;\n align-items: center;\n height: $large-control-height;\n }\n\n .emptyState__content {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n gap: $default-space;\n }\n}\n\n:host(.emptyState.emptyState--compactBreak) {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n gap: $default-space;\n\n .emptyState__icon {\n display: flex;\n flex-direction: row;\n align-items: center;\n height: $large-control-height;\n }\n\n .emptyState__content {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: $small-space;\n }\n}\n","/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\nexport type EmptyStateLayout = 'large' \| 'compact' \| 'compactBreak';\n\n/\n @since 1.6.0\n /\n@Component({\n tag: 'ix-empty-state',\n styleUrl: 'empty-state.scss',\n shadow: true,\n})\nexport class EmptyState {\n /\n Optional empty state layout - one of 'large', 'compact' or 'compactBreak'\n /\n @Prop() layout: EmptyStateLayout = 'large';\n\n /\n Optional empty state icon\n /\n @Prop() icon: string;\n\n /\n Empty state header\n /\n @Prop() header!: string;\n\n /\n Optional empty state sub header\n /\n @Prop() subHeader: string;\n\n /\n Optional empty state action\n /\n @Prop() action: string;\n\n /\n Empty state action click event\n /\n @Event() actionClick: EventEmitter<void>;\n\n render() {\n return (\n <Host class={`emptyState emptyState--${this.layout}`}>\n {this.icon && (\n <div class=\"emptyState__icon\">\n {/ TODO: replace size for large layout with '56' if available */}\n <ix-icon\n name={this.icon}\n size={this.layout === 'large' ? '32' : '32'}\n color=\"color-soft-text\"\n />\n </div>\n )}\n\n <div class=\"emptyState__content\">\n <div class=\"content__label\">\n <ix-typography\n variant={this.layout === 'large' ? 'display-large' : 'default'}\n >\n {this.header}\n </ix-typography>\n\n {this.subHeader && (\n <div class=\"label__subHeader\">{this.subHeader}</div>\n )}\n </div>\n\n {this.action && (\n <div class=\"content__action\">\n <ix-button onClick={() => this.actionClick.emit()}>\n {this.action}\n </ix-button>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/ix-event-list_2.entry.js CHANGED Viewed

@@ -1,8 +1,8 @@
-import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-8ddfb6d8.js';
+import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-eb0be730.js';
 import { c as createMutationObserver } from './mutation-observer-7d01bbea.js';
 import { a as convertToRemString } from './rwd.util-cfc2ea72.js';
-const eventListCss = ".sc-ix-event-list-h{display:block;position:relative}ul.sc-ix-event-list{list-style:none;padding:0;margin-bottom:0}.sc-ix-event-list-s>.sc-ix-event-list-h:not(.item-size-s) .ix-event-list-item,.sc-ix-event-list-h:not(.item-size-l) .ix-event-list-item.sc-ix-event-list{display:none}.sc-ix-event-list-h.chevron .sc-ix-event-list-s .ix-event-list-item .chevron-icon{display:initial}.item-size-l .sc-ix-event-list-s .ix-event-list-item{height:6.5rem;max-height:6.5rem}.item-size-l .sc-ix-event-list-s .ix-event-list-item .event-content{height:6.5rem;max-height:6.5rem;white-space:normal}.compact .sc-ix-event-list-s .ix-event-list-item{margin-bottom:0px;border-radius:0px}.compact .sc-ix-event-list-s .ix-event-list-item .indicator{border-top-left-radius:0px;border-bottom-left-radius:0px}.compact .sc-ix-event-list-s .ix-event-list-item .event-list-item-container{border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.compact.sc-ix-event-list .compact.sc-ix-event-list:not(:last-child) .event-list-item-container.sc-ix-event-list{border-bottom:none}";
+const eventListCss = ":host{display:block;position:relative}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host ul{list-style:none;padding:0;margin-bottom:0}:host(.item-size-l){--event-list-item-height:6.5rem;--event-list-item-content-white-space:normal}:host(.compact){--event-list-item-border-radius:0;--event-list-item-margin-bottom:0}";
 const EventList = class {
   constructor(hostRef) {
@@ -13,18 +13,26 @@ const EventList = class {
     this.animated = true;
     this.chevron = undefined;
   }
+  watchChevron(chevron) {
+    this.handleChevron(chevron);
+  }
   componentDidLoad() {
     if (this.animated) {
       this.triggerFadeIn();
     }
-    if (typeof this.itemHeight === 'number') {
+    if (!Number.isNaN(Number(this.itemHeight))) {
       const height = convertToRemString(this.itemHeight);
-      this.el.querySelectorAll('.ix-event-list-item').forEach((item) => {
-        item.classList.add('d-flex');
+      this.hostElement
+        .querySelectorAll('ix-event-list-item')
+        .forEach((item) => {
         this.setCustomHeight(item, height);
       });
     }
-    this.mutationObserver.observe(this.el, { childList: true, subtree: true });
+    this.handleChevron(this.chevron);
+    this.mutationObserver.observe(this.hostElement, {
+      childList: true,
+      subtree: true,
+    });
   }
   onMutation(mutationRecords) {
     this.triggerFadeOut().then(() => {
@@ -33,21 +41,16 @@ const EventList = class {
         mutationRecords
           .filter((mutation) => mutation.type === 'childList')
           .forEach((mutation) => mutation.addedNodes.forEach((item) => {
-          var _a;
           const itemHtml = item;
-          if (!((_a = itemHtml.classList) === null || _a === void 0 ? void 0 : _a.contains('ix-event-list-item'))) {
-            return;
-          }
-          itemHtml.classList.add('d-flex');
           this.setCustomHeight(itemHtml, height);
         }));
       }
+      this.handleChevron(this.chevron);
       this.triggerFadeIn();
     });
   }
   setCustomHeight(item, height) {
-    item.style.height = height;
-    item.style.maxHeight = height;
+    item.style.setProperty('--event-list-item-height', height);
   }
   triggerFadeOut() {
     if (!this.animated) {
@@ -60,7 +63,7 @@ const EventList = class {
       },
       { opacity: 0 },
     ];
-    const listElement = this.el.querySelector('ul');
+    const listElement = this.hostElement.shadowRoot.querySelector('ul');
     return listElement.animate(keyframes, {
       duration: EventList.fadeOutDuration,
     }).finished;
@@ -69,7 +72,7 @@ const EventList = class {
     if (!this.animated) {
       return;
     }
-    const listItems = this.el.querySelectorAll('.ix-event-list-item');
+    const listItems = this.hostElement.querySelectorAll('ix-event-list-item');
     listItems.forEach((e, i) => {
       const delay = i * 80;
       const offset = delay / (delay + EventList.fadeInDuration);
@@ -85,21 +88,34 @@ const EventList = class {
       e.animate(keyframes, options);
     });
   }
+  handleChevron(chevron) {
+    const listItems = this.hostElement.querySelectorAll('ix-event-list-item');
+    listItems.forEach((e) => {
+      if (chevron) {
+        e.setAttribute('chevron', 'true');
+      }
+      else if (chevron !== undefined) {
+        e.removeAttribute('chevron');
+      }
+    });
+  }
   render() {
     return (h(Host, { class: {
         'item-size-s': this.itemHeight === 'S',
         'item-size-l': this.itemHeight === 'L',
         compact: this.compact,
-        chevron: this.chevron,
       } }, h("ul", null, h("slot", null))));
   }
-  get el() { return getElement(this); }
+  get hostElement() { return getElement(this); }
+  static get watchers() { return {
+    "chevron": ["watchChevron"]
+  }; }
 };
 EventList.fadeOutDuration = 50;
 EventList.fadeInDuration = 150;
 EventList.style = eventListCss;
-const eventListItemCss = ".ix-event-list-item{display:flex;align-items:center;position:relative;height:2.5rem;max-height:2.5rem;border-radius:0.25rem;background-color:var(--theme-event-item--background);overflow:hidden;transition:150ms;cursor:pointer;margin-bottom:0.5rem}.ix-event-list-item .indicator{height:100%;width:0.5rem;max-width:0.5rem;min-width:0.5rem;border-top-left-radius:0.25rem;border-bottom-left-radius:0.25rem}.ix-event-list-item .indicator-empty{border:var(--theme-weak-bdr-1);border-right:none}.ix-event-list-item .event-list-item-container{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;flex-grow:1;width:calc(100% - (1rem + 0.5rem));height:100%;border:0.062rem solid;border-color:var(--theme-event-item--border);border-top-left-radius:0;border-top-right-radius:0.25rem;border-bottom-left-radius:0;border-bottom-right-radius:0.25rem;border-left:none;padding-left:1rem}.ix-event-list-item:not(.selected):not(.disabled):not(:disabled){cursor:pointer}.ix-event-list-item:not(.selected):not(.disabled):not(:disabled):hover{background-color:var(--theme-event-item--background--hover)}.ix-event-list-item:not(.selected):not(.disabled):not(:disabled){cursor:pointer}.ix-event-list-item:not(.selected):not(.disabled):not(:disabled):active{background-color:var(--theme-event-item--background--active)}.ix-event-list-item:not(.selected) .event-list-item-container:not(.disabled):not(:disabled){cursor:pointer}.ix-event-list-item:not(.selected) .event-list-item-container:not(.disabled):not(:disabled):hover{border-color:var(--theme-event-item--border--hover)}.ix-event-list-item:not(.selected) .event-list-item-container:not(.disabled):not(:disabled){cursor:pointer}.ix-event-list-item:not(.selected) .event-list-item-container:not(.disabled):not(:disabled):active{border-color:var(--theme-event-item--border--active)}.ix-event-list-item.selected .event-list-item-container{background-color:var(--theme-event-item--background--selected);border-color:var(--theme-event-item--border--selected)}.ix-event-list-item[disabled],.ix-event-list-item.disabled{pointer-events:none}.ix-event-list-item[disabled] .event-list-item-container,.ix-event-list-item.disabled .event-list-item-container{background-color:var(--theme-event-item--background--disabled);border-color:var(--theme-event-item--border--disabled)}.ix-event-list-item .chevron-icon{margin-left:auto;margin-right:0.5rem;opacity:0.6;align-self:center}.ix-event-list-item .event-content{display:flex;align-items:center;width:100%;height:100%;overflow:hidden}";
+const eventListItemCss = ":host{}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .event-list-item{display:flex;align-items:center;position:relative;height:var(--event-list-item-height, 2.5rem);max-height:var(--event-list-item-height, 2.5rem);border-radius:var(--event-list-item-border-radius, 0.25rem);background-color:var(--theme-event-item--background);overflow:hidden;transition:150ms;cursor:pointer;margin-bottom:var(--event-list-item-margin-bottom, 0.5rem)}:host .event-list-item .indicator{height:100%;width:0.5rem;max-width:0.5rem;min-width:0.5rem;border-top-left-radius:var(--event-list-item-border-radius, 0.25rem);border-bottom-left-radius:var(--event-list-item-border-radius, 0.25rem)}:host .event-list-item .indicator-empty{border:var(--theme-weak-bdr-1);border-right:none}:host .event-list-item .event-list-item-container{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;flex-grow:1;width:calc(100% - (1rem + 0.5rem));height:100%;border:0.062rem solid;border-color:var(--theme-event-item--border);border-top-left-radius:0;border-top-right-radius:var(--event-list-item-border-radius, 0.25rem);border-bottom-left-radius:0;border-bottom-right-radius:var(--event-list-item-border-radius, 0.25rem);border-left:none;padding-left:1rem}:host .event-list-item .event-content{display:flex;align-items:center;width:100%;height:var(--event-list-item-height, 100%);max-height:var(--event-list-item-height, 100%);white-space:var(--event-list-item-content-white-space, inherit);overflow:hidden}:host .event-list-item .chevron-icon{margin-left:auto;margin-right:0.5rem;opacity:0.6;align-self:center}:host .event-list-item:not(.selected):not(.disabled):not(:disabled){cursor:pointer}:host .event-list-item:not(.selected):not(.disabled):not(:disabled):hover{background-color:var(--theme-event-item--background--hover)}:host .event-list-item:not(.selected):not(.disabled):not(:disabled){cursor:pointer}:host .event-list-item:not(.selected):not(.disabled):not(:disabled):active,:host .event-list-item:not(.selected):not(.disabled):not(:disabled).active{background-color:var(--theme-event-item--background--active)}:host .event-list-item:not(.selected) .event-list-item-container:not(.disabled):not(:disabled){cursor:pointer}:host .event-list-item:not(.selected) .event-list-item-container:not(.disabled):not(:disabled):hover{border-color:var(--theme-event-item--border--hover)}:host .event-list-item:not(.selected) .event-list-item-container:not(.disabled):not(:disabled){cursor:pointer}:host .event-list-item:not(.selected) .event-list-item-container:not(.disabled):not(:disabled):active,:host .event-list-item:not(.selected) .event-list-item-container:not(.disabled):not(:disabled).active{border-color:var(--theme-event-item--border--active)}:host .event-list-item.selected .event-list-item-container{background-color:var(--theme-event-item--background--selected);border-color:var(--theme-event-item--border--selected)}:host .event-list-item[disabled],:host .event-list-item.disabled{pointer-events:none}:host .event-list-item[disabled] .event-list-item-container,:host .event-list-item.disabled .event-list-item-container{background-color:var(--theme-event-item--background--disabled);border-color:var(--theme-event-item--border--disabled)}:host(.disabled){pointer-events:none}";
 const EventListItem = class {
   constructor(hostRef) {
@@ -115,18 +131,21 @@ const EventListItem = class {
     this.itemClick.emit();
   }
   render() {
-    return (h("div", { class: {
-        'ix-event-list-item': true,
+    var _a;
+    const color = ((_a = this.color) === null || _a === void 0 ? void 0 : _a.startsWith('--theme'))
+      ? `var(${this.color})`
+      : `var(--theme-${this.color})`;
+    return (h(Host, { class: {
+        disabled: this.disabled,
+      } }, h("div", { class: {
+        'event-list-item': true,
         selected: this.selected,
         disabled: this.disabled,
       } }, h("div", { class: `indicator ${!this.color ? 'indicator-empty' : ''}`, style: {
-        'background-color': this.color
-          ? `var(--theme-${this.color})`
-          : 'inherit',
+        'background-color': this.color ? color : 'inherit',
         opacity: `${this.disabled ? 0.4 : this.opacity}`,
-      } }), h("div", { class: "event-list-item-container" }, h("div", { class: "event-content" }, h("slot", null)), this.chevron ? (h("i", { class: "glyph glyph-16 glyph-chevron-right chevron-icon" })) : (''))));
+      } }), h("div", { class: "event-list-item-container" }, h("div", { class: "event-content" }, h("slot", null)), this.chevron && (h("ix-icon", { name: "chevron-right", size: "16", class: "chevron-icon" }))))));
   }
-  get el() { return getElement(this); }
 };
 EventListItem.style = eventListItemCss;

package/dist/esm/ix-event-list_2.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ix-event-list.ix-event-list-item.entry.js","mappings":"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","names":[],"sources":["./src/components/event-list/event-list.scss?tag=ix-event-list&encapsulation=scoped","./src/components/event-list/event-list.tsx","./src/components/event-list-item/event-list-item.scss?tag=ix-event-list-item","./src/components/event-list-item/event-list-item.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n$item-height-l: 6.5rem;\n\n:host {\n display: block;\n position: relative;\n}\n\nul {\n list-style: none;\n padding: 0;\n margin-bottom: 0;\n}\n\n:host:not(.item-size-s),\n:host:not(.item-size-l) {\n ::slotted(& .ix-event-list-item) {\n display: none;\n }\n}\n\n:host.chevron ::slotted( .ix-event-list-item) .chevron-icon {\n display: initial;\n}\n\n.item-size-l {\n ::slotted(* .ix-event-list-item) {\n height: $item-height-l;\n max-height: $item-height-l;\n\n .event-content {\n height: $item-height-l;\n max-height: $item-height-l;\n white-space: normal;\n }\n }\n}\n\n.compact {\n ::slotted(* .ix-event-list-item) {\n margin-bottom: 0px;\n border-radius: 0px;\n\n .indicator {\n border-top-left-radius: 0px;\n border-bottom-left-radius: 0px;\n }\n\n .event-list-item-container {\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n }\n\n .compact:not(:last-child) {\n .event-list-item-container {\n border-bottom: none;\n }\n }\n}\n","/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { Component, Element, h, Host, Prop } from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { convertToRemString } from '../utils/rwd.util';\n\n@Component({\n tag: 'ix-event-list',\n styleUrl: 'event-list.scss',\n scoped: true,\n})\nexport class EventList {\n private readonly mutationObserver = createMutationObserver(\n this.onMutation.bind(this)\n );\n\n private static readonly fadeOutDuration = 50;\n private static readonly fadeInDuration = 150;\n\n @Element() el!: HTMLIxEventListElement;\n\n /\n Determines the height of list items.\n * This can either be one of two predefined sizes ('S' or 'L') or an absolute pixel value.\n * In case a number is supplied it will get converted to rem internally.\n * Defaults to 'S'.\n /\n @Prop() itemHeight: 'S' \| 'L' \| number = 'S';\n\n /\n Make event-list items more compact\n /\n @Prop() compact = false;\n\n /\n Animate state change transitions. Defaults to 'true'.\n /\n @Prop() animated = true;\n\n /\n Display a chevron icon in list items. Defaults to 'false'\n /\n @Prop() chevron: boolean;\n\n componentDidLoad() {\n if (this.animated) {\n this.triggerFadeIn();\n }\n\n if (typeof this.itemHeight === 'number') {\n const height = convertToRemString(this.itemHeight);\n this.el.querySelectorAll('.ix-event-list-item').forEach((item) => {\n item.classList.add('d-flex');\n this.setCustomHeight(item as HTMLElement, height);\n });\n }\n\n this.mutationObserver.observe(this.el, { childList: true, subtree: true });\n }\n\n private onMutation(mutationRecords: Array<MutationRecord>) {\n this.triggerFadeOut().then(() => {\n if (typeof this.itemHeight === 'number') {\n const height = convertToRemString(this.itemHeight);\n\n mutationRecords\n .filter((mutation) => mutation.type === 'childList')\n .forEach((mutation) =>\n mutation.addedNodes.forEach((item) => {\n const itemHtml = item as HTMLElement;\n if (!itemHtml.classList?.contains('ix-event-list-item')) {\n return;\n }\n\n itemHtml.classList.add('d-flex');\n this.setCustomHeight(itemHtml, height);\n })\n );\n }\n\n this.triggerFadeIn();\n });\n }\n\n private setCustomHeight(item: HTMLElement, height: string) {\n item.style.height = height;\n item.style.maxHeight = height;\n }\n\n private triggerFadeOut(): Promise<any> {\n if (!this.animated) {\n return Promise.resolve();\n }\n\n const keyframes = [\n {\n opacity: 1,\n easing: 'ease-in',\n },\n { opacity: 0 },\n ];\n const listElement = this.el.querySelector('ul');\n return listElement.animate(keyframes, {\n duration: EventList.fadeOutDuration,\n }).finished;\n }\n\n private triggerFadeIn() {\n if (!this.animated) {\n return;\n }\n\n const listItems = this.el.querySelectorAll('.ix-event-list-item');\n listItems.forEach((e, i) => {\n const delay = i 80;\n const offset = delay / (delay + EventList.fadeInDuration);\n const keyframes = [\n { opacity: 0 },\n { opacity: 0, easing: 'ease-out', offset },\n { opacity: 1 },\n ];\n const options = {\n duration: EventList.fadeInDuration + delay,\n iterations: 1,\n };\n e.animate(keyframes, options);\n });\n }\n\n render() {\n return (\n <Host\n class={{\n 'item-size-s': this.itemHeight === 'S',\n 'item-size-l': this.itemHeight === 'L',\n compact: this.compact,\n chevron: this.chevron,\n }}\n >\n <ul>\n <slot></slot>\n </ul>\n </Host>\n );\n }\n}\n","/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'mixins/text-truncation';\n@import 'mixins/hover';\n@import 'common-variables';\n\n$height-single-line: 2.5rem;\n\n.ix-event-list-item {\n display: flex;\n align-items: center;\n position: relative;\n height: $height-single-line;\n max-height: $height-single-line;\n border-radius: $default-border-radius;\n background-color: var(--theme-event-item--background);\n overflow: hidden;\n transition: $default-time;\n cursor: pointer;\n\n .indicator {\n height: 100%;\n width: $small-space;\n max-width: $small-space;\n min-width: $small-space;\n border-top-left-radius: $default-border-radius;\n border-bottom-left-radius: $default-border-radius;\n }\n\n .indicator-empty {\n border: var(--theme-weak-bdr-1);\n border-right: none;\n }\n\n .event-list-item-container {\n @include ellipsis;\n\n display: flex;\n flex-grow: 1;\n width: calc(100% - (#{$default-space} + #{$small-space}));\n height: 100%;\n border: 0.062rem solid;\n border-color: var(--theme-event-item--border);\n border-top-left-radius: 0;\n border-top-right-radius: $default-border-radius;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: $default-border-radius;\n border-left: none;\n padding-left: $default-space;\n }\n\n &:not(.selected) {\n @include hover {\n background-color: var(--theme-event-item--background--hover);\n }\n\n @include active {\n background-color: var(--theme-event-item--background--active);\n }\n\n .event-list-item-container {\n @include hover {\n border-color: var(--theme-event-item--border--hover);\n }\n\n @include active {\n border-color: var(--theme-event-item--border--active);\n }\n }\n }\n\n &.selected {\n .event-list-item-container {\n background-color: var(--theme-event-item--background--selected);\n border-color: var(--theme-event-item--border--selected);\n }\n }\n\n &[disabled],\n &.disabled {\n pointer-events: none;\n\n .event-list-item-container {\n background-color: var(--theme-event-item--background--disabled);\n border-color: var(--theme-event-item--border--disabled);\n }\n }\n\n .chevron-icon {\n margin-left: auto;\n margin-right: $small-space;\n opacity: 0.6;\n align-self: center;\n }\n\n .event-content {\n display: flex;\n align-items: center;\n width: 100%;\n height: 100%;\n overflow: hidden;\n }\n\n margin-bottom: $small-space;\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Listen,\n Prop,\n} from '@stencil/core';\n\n@Component({\n tag: 'ix-event-list-item',\n styleUrl: 'event-list-item.scss',\n scoped: false,\n})\nexport class EventListItem {\n @Element() el!: HTMLIxEventListItemElement;\n\n /\n Color of the status indicator.\n * Allowed values are all Core UI color names.\n /\n @Prop() color: string;\n\n /\n Show event list item as selected\n /\n @Prop() selected: boolean;\n\n /\n Disable event list item\n /\n @Prop() disabled: boolean;\n\n /\n Show chevron on right side of the event list item\n /\n @Prop() chevron: boolean;\n\n /\n Opacity of the status indicator.\n * Defaults to 1.0\n \n @deprecated Will be removed in 2.0.0\n /\n @Prop() opacity = 1;\n\n /\n Event list item click\n */\n @Event() itemClick: EventEmitter;\n\n @Listen('click', { passive: true })\n handleItemClick() {\n this.itemClick.emit();\n }\n\n render() {\n return (\n <div\n class={{\n 'ix-event-list-item': true,\n selected: this.selected,\n disabled: this.disabled,\n }}\n >\n <div\n class={`indicator ${!this.color ? 'indicator-empty' : ''}`}\n style={{\n 'background-color': this.color\n ? `var(--theme-${this.color})`\n : 'inherit',\n opacity: `${this.disabled ? 0.4 : this.opacity}`,\n }}\n ></div>\n\n <div class=\"event-list-item-container\">\n <div class=\"event-content\">\n <slot></slot>\n </div>\n {this.chevron ? (\n <i class=\"glyph glyph-16 glyph-chevron-right chevron-icon\"></i>\n ) : (\n ''\n )}\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-event-list.ix-event-list-item.entry.js","mappings":"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","names":[],"sources":["./src/components/event-list/event-list.scss?tag=ix-event-list&encapsulation=shadow","./src/components/event-list/event-list.tsx","./src/components/event-list-item/event-list-item.scss?tag=ix-event-list-item&encapsulation=shadow","./src/components/event-list-item/event-list-item.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n\n display: block;\n position: relative;\n\n ul {\n list-style: none;\n padding: 0;\n margin-bottom: 0;\n }\n}\n\n:host(.item-size-l) {\n --event-list-item-height: 6.5rem;\n --event-list-item-content-white-space: normal;\n}\n\n:host(.compact) {\n --event-list-item-border-radius: 0;\n --event-list-item-margin-bottom: 0;\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { Component, Element, h, Host, Prop, Watch } from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { convertToRemString } from '../utils/rwd.util';\n\n@Component({\n tag: 'ix-event-list',\n styleUrl: 'event-list.scss',\n shadow: true,\n})\nexport class EventList {\n private readonly mutationObserver = createMutationObserver(\n this.onMutation.bind(this)\n );\n\n private static readonly fadeOutDuration = 50;\n private static readonly fadeInDuration = 150;\n\n @Element() hostElement!: HTMLIxEventListElement;\n\n /\n Determines the height of list items.\n * This can either be one of two predefined sizes ('S' or 'L') or an absolute pixel value.\n * In case a number is supplied it will get converted to rem internally.\n * Defaults to 'S'.\n /\n @Prop() itemHeight: 'S' \| 'L' \| number = 'S';\n\n /\n Make event-list items more compact\n /\n @Prop() compact = false;\n\n /\n Animate state change transitions. Defaults to 'true'.\n /\n @Prop() animated = true;\n\n /\n Display a chevron icon in list items. Defaults to 'false'\n /\n @Prop() chevron: boolean;\n\n @Watch('chevron')\n watchChevron(chevron: boolean \| undefined) {\n this.handleChevron(chevron);\n }\n\n componentDidLoad() {\n if (this.animated) {\n this.triggerFadeIn();\n }\n\n if (!Number.isNaN(Number(this.itemHeight))) {\n const height = convertToRemString(this.itemHeight as number);\n this.hostElement\n .querySelectorAll('ix-event-list-item')\n .forEach((item) => {\n this.setCustomHeight(item as HTMLElement, height);\n });\n }\n\n this.handleChevron(this.chevron);\n\n this.mutationObserver.observe(this.hostElement, {\n childList: true,\n subtree: true,\n });\n }\n\n private onMutation(mutationRecords: Array<MutationRecord>) {\n this.triggerFadeOut().then(() => {\n if (typeof this.itemHeight === 'number') {\n const height = convertToRemString(this.itemHeight);\n\n mutationRecords\n .filter((mutation) => mutation.type === 'childList')\n .forEach((mutation) =>\n mutation.addedNodes.forEach((item) => {\n const itemHtml = item as HTMLElement;\n\n this.setCustomHeight(itemHtml, height);\n })\n );\n }\n\n this.handleChevron(this.chevron);\n\n this.triggerFadeIn();\n });\n }\n\n private setCustomHeight(item: HTMLElement, height: string) {\n item.style.setProperty('--event-list-item-height', height);\n }\n\n private triggerFadeOut(): Promise<any> {\n if (!this.animated) {\n return Promise.resolve();\n }\n\n const keyframes = [\n {\n opacity: 1,\n easing: 'ease-in',\n },\n { opacity: 0 },\n ];\n const listElement = this.hostElement.shadowRoot.querySelector('ul');\n return listElement.animate(keyframes, {\n duration: EventList.fadeOutDuration,\n }).finished;\n }\n\n private triggerFadeIn() {\n if (!this.animated) {\n return;\n }\n\n const listItems = this.hostElement.querySelectorAll('ix-event-list-item');\n listItems.forEach((e, i) => {\n const delay = i 80;\n const offset = delay / (delay + EventList.fadeInDuration);\n const keyframes = [\n { opacity: 0 },\n { opacity: 0, easing: 'ease-out', offset },\n { opacity: 1 },\n ];\n const options = {\n duration: EventList.fadeInDuration + delay,\n iterations: 1,\n };\n e.animate(keyframes, options);\n });\n }\n\n private handleChevron(chevron: boolean \| undefined): void {\n const listItems = this.hostElement.querySelectorAll('ix-event-list-item');\n\n listItems.forEach((e) => {\n if (chevron) {\n e.setAttribute('chevron', 'true');\n } else if (chevron !== undefined) {\n e.removeAttribute('chevron');\n }\n });\n }\n\n render() {\n return (\n <Host\n class={{\n 'item-size-s': this.itemHeight === 'S',\n 'item-size-l': this.itemHeight === 'L',\n compact: this.compact,\n }}\n >\n <ul>\n <slot></slot>\n </ul>\n </Host>\n );\n }\n}\n","/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'mixins/text-truncation';\n@import 'mixins/hover';\n@import 'mixins/shadow-dom/component';\n@import 'mixins/shadow-dom/host-disabled';\n@import 'common-variables';\n\n$default-event-list-item-height: 2.5rem;\n\n:host {\n @include ix-component;\n\n .event-list-item {\n display: flex;\n align-items: center;\n position: relative;\n height: var(--event-list-item-height, $default-event-list-item-height);\n max-height: var(--event-list-item-height, $default-event-list-item-height);\n border-radius: var(--event-list-item-border-radius, $default-border-radius);\n background-color: var(--theme-event-item--background);\n overflow: hidden;\n transition: $default-time;\n cursor: pointer;\n margin-bottom: var(--event-list-item-margin-bottom, $small-space);\n\n .indicator {\n height: 100%;\n width: $small-space;\n max-width: $small-space;\n min-width: $small-space;\n border-top-left-radius: var(\n --event-list-item-border-radius,\n $default-border-radius\n );\n border-bottom-left-radius: var(\n --event-list-item-border-radius,\n $default-border-radius\n );\n }\n\n .indicator-empty {\n border: var(--theme-weak-bdr-1);\n border-right: none;\n }\n\n .event-list-item-container {\n @include ellipsis;\n\n display: flex;\n flex-grow: 1;\n width: calc(100% - (#{$default-space} + #{$small-space}));\n height: 100%;\n border: 0.062rem solid;\n border-color: var(--theme-event-item--border);\n border-top-left-radius: 0;\n border-top-right-radius: var(\n --event-list-item-border-radius,\n $default-border-radius\n );\n border-bottom-left-radius: 0;\n border-bottom-right-radius: var(\n --event-list-item-border-radius,\n $default-border-radius\n );\n border-left: none;\n padding-left: $default-space;\n }\n\n .event-content {\n display: flex;\n align-items: center;\n width: 100%;\n height: var(--event-list-item-height, 100%);\n max-height: var(--event-list-item-height, 100%);\n white-space: var(--event-list-item-content-white-space, inherit);\n overflow: hidden;\n }\n\n .chevron-icon {\n margin-left: auto;\n margin-right: $small-space;\n opacity: 0.6;\n align-self: center;\n }\n\n &:not(.selected) {\n @include hover {\n background-color: var(--theme-event-item--background--hover);\n }\n\n @include active {\n background-color: var(--theme-event-item--background--active);\n }\n\n .event-list-item-container {\n @include hover {\n border-color: var(--theme-event-item--border--hover);\n }\n\n @include active {\n border-color: var(--theme-event-item--border--active);\n }\n }\n }\n\n &.selected .event-list-item-container {\n background-color: var(--theme-event-item--background--selected);\n border-color: var(--theme-event-item--border--selected);\n }\n\n &[disabled],\n &.disabled {\n pointer-events: none;\n\n .event-list-item-container {\n background-color: var(--theme-event-item--background--disabled);\n border-color: var(--theme-event-item--border--disabled);\n }\n }\n }\n}\n\n@include host-disabled;\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Prop,\n} from '@stencil/core';\n\n@Component({\n tag: 'ix-event-list-item',\n styleUrl: 'event-list-item.scss',\n shadow: true,\n})\nexport class EventListItem {\n /\n Color of the status indicator.\n * You can find a list of all available colors in our documentation.\n * Example values are `--theme-color-alarm` or `color-alarm`\n \n @see https://ix.siemens.io/docs/theming/colors/\n /\n @Prop() color: string;\n\n /\n Show event list item as selected\n /\n @Prop() selected: boolean;\n\n /\n Disable event list item\n /\n @Prop() disabled: boolean;\n\n /\n Show chevron on right side of the event list item\n /\n @Prop() chevron: boolean;\n\n /\n Opacity of the status indicator.\n * Defaults to 1.0\n \n @deprecated Will be removed in 2.0.0\n /\n @Prop() opacity = 1;\n\n /\n Event list item click\n */\n @Event() itemClick: EventEmitter;\n\n @Listen('click', { passive: true })\n handleItemClick() {\n this.itemClick.emit();\n }\n\n render() {\n const color = this.color?.startsWith('--theme')\n ? `var(${this.color})`\n : `var(--theme-${this.color})`;\n\n return (\n <Host\n class={{\n disabled: this.disabled,\n }}\n >\n <div\n class={{\n 'event-list-item': true,\n selected: this.selected,\n disabled: this.disabled,\n }}\n >\n <div\n class={`indicator ${!this.color ? 'indicator-empty' : ''}`}\n style={{\n 'background-color': this.color ? color : 'inherit',\n opacity: `${this.disabled ? 0.4 : this.opacity}`,\n }}\n ></div>\n\n <div class=\"event-list-item-container\">\n <div class=\"event-content\">\n <slot></slot>\n </div>\n {this.chevron && (\n <ix-icon\n name=\"chevron-right\"\n size=\"16\"\n class=\"chevron-icon\"\n ></ix-icon>\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/ix-expanding-search.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-8ddfb6d8.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-eb0be730.js';
-const expandingSearchCss = ".sc-ix-expanding-search-h{display:inline-flex;width:auto;height:2rem;align-items:center;justify-content:space-between;position:relative}.right-position.sc-ix-expanding-search-h{width:11.5625rem !important}.right-position.fullWidth.sc-ix-expanding-search-h{width:100% !important}.sc-ix-expanding-search-h .input-container.sc-ix-expanding-search{transition:all 0.3s ease-in-out}.sc-ix-expanding-search-h .disable-pointer.sc-ix-expanding-search{pointer-events:none}.sc-ix-expanding-search-h input.sc-ix-expanding-search{box-shadow:var(--theme-input--box-shadow);cursor:auto !important}.sc-ix-expanding-search-h .expanded.sc-ix-expanding-search{width:11.5625rem}.sc-ix-expanding-search-h .expanded.fullWidth.sc-ix-expanding-search{width:100%}.sc-ix-expanding-search-h .collapsed.sc-ix-expanding-search{width:1.5rem;border:none}.sc-ix-expanding-search-h .btn-search-icon.sc-ix-expanding-search{align-self:center;margin:auto;position:relative}.sc-ix-expanding-search-h .btn-search.sc-ix-expanding-search{display:flex;max-width:2rem;max-height:2rem;border-radius:var(--theme-input--border-radius);transition:all 0.15s ease-in-out;z-index:1;align-items:center;position:relative;border:none}.sc-ix-expanding-search-h .btn-search.sc-ix-expanding-search:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-expanding-search-h .btn-search.sc-ix-expanding-search:not(.disabled):not(:disabled):hover{border-color:transparent}.sc-ix-expanding-search-h .btn-search.sc-ix-expanding-search:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-expanding-search-h .btn-search.sc-ix-expanding-search:not(.disabled):not(:disabled):active{border-color:transparent}.sc-ix-expanding-search-h .btn-search.sc-ix-expanding-search:not(.disabled):not(:disabled):focus-visible{outline:none}.sc-ix-expanding-search-h .btn-search.sc-ix-expanding-search:not(.disabled):not(:disabled):focus-visible{outline:var(--focus--border-color);outline-width:1px;outline-style:solid}.sc-ix-expanding-search-h .btn-search.sc-ix-expanding-search:active{width:2rem;height:2rem;border-radius:var(--theme-input--border-radius);border:var(--theme-std-bdr-1) !important}.sc-ix-expanding-search-h .input-container.sc-ix-expanding-search{display:flex;position:absolute;align-items:center;flex-wrap:nowrap}.sc-ix-expanding-search-h .btn-clear.sc-ix-expanding-search{position:absolute;border-radius:var(--theme-input--border-radius);right:0px;margin-right:0.25rem}.sc-ix-expanding-search-h .input.sc-ix-expanding-search{padding-left:2rem !important;padding-right:2.5rem !important}.sc-ix-expanding-search-h .opacity-before.sc-ix-expanding-search{opacity:0}.sc-ix-expanding-search-h .opacity-after.sc-ix-expanding-search{opacity:1}";
+const expandingSearchCss = ".form-control,.form-control-plaintext{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);color:var(--theme-input--color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--theme-input--border-radius);height:2rem;min-height:2rem;min-width:2rem;background-color:var(--theme-input--background);border:solid 1px var(--theme-input--border-color);box-shadow:var(--theme-input--box-shadow);-webkit-padding-start:0.5rem;padding-inline-start:0.5rem;-webkit-padding-end:0.5rem;padding-inline-end:0.5rem}.form-control::-moz-placeholder,.form-control-plaintext::-moz-placeholder{color:var(--theme-input-hint--color)}.form-control::placeholder,.form-control-plaintext::placeholder{color:var(--theme-input-hint--color)}.form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled),.form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled){cursor:pointer}.form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled),.form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled){cursor:pointer}.form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover,.form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover{background-color:var(--theme-input--background--hover);border-color:var(--theme-input--border-color--hover);cursor:auto}.form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover,.form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover{background-color:var(--theme-input--background--hover);border-color:var(--theme-input--border-color--hover);cursor:auto}.form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible,.form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible{background-color:var(--theme-input--background--focus);border-color:var(--theme-input--border-color--focus);outline-offset:var(--theme-input--focus--outline-offset);box-shadow:var(--theme-input--box-shadow);outline:1px solid var(--theme-color-focus-bdr)}.form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible,.form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible{background-color:var(--theme-input--background--focus);border-color:var(--theme-input--border-color--focus);outline-offset:var(--theme-input--focus--outline-offset);box-shadow:var(--theme-input--box-shadow);outline:1px solid var(--theme-color-focus-bdr)}.form-control:focus-visible{color:var(--theme-input--color)}.form-control[type=number]{text-align:right}.form-control[type=number]::-webkit-inner-spin-button{margin-right:-2px;margin-left:2px;display:none}.form-control.readonly,.form-control[readonly]{background:transparent !important;-webkit-border-before:none !important;border-block-start:none !important;-webkit-border-start:none !important;border-inline-start:none !important;-webkit-border-end:none !important;border-inline-end:none !important;border-radius:0rem}.form-control:-moz-read-only{box-shadow:none !important;outline:none !important;border-color:var(--theme-input--border-color);cursor:default !important}.form-control:read-only,.form-control[readonly],.form-control[readOnly],.form-control.readonly{box-shadow:none !important;outline:none !important;border-color:var(--theme-input--border-color);cursor:default !important}.form-control:read-only::-moz-placeholder,.form-control[readonly]::-moz-placeholder,.form-control[readOnly]::-moz-placeholder,.form-control.readonly::-moz-placeholder{color:transparent}.form-control:-moz-read-only::placeholder{color:transparent}.form-control:read-only::placeholder,.form-control[readonly]::placeholder,.form-control[readOnly]::placeholder,.form-control.readonly::placeholder{color:transparent}.form-control:disabled,.form-control.disabled{background:transparent !important;-webkit-border-before:none !important;border-block-start:none !important;-webkit-border-start:none !important;border-inline-start:none !important;-webkit-border-end:none !important;border-inline-end:none !important;border-radius:0rem;color:var(--theme-color-weak-text);border-color:var(--theme-input--border-color-bottom--disabled)}.form-control:disabled::-moz-placeholder,.form-control.disabled::-moz-placeholder{color:transparent}.form-control:disabled::placeholder,.form-control.disabled::placeholder{color:transparent}.form-control-plaintext{outline:0}.form-group{position:relative}.input-wrapper{display:flex;position:relative;align-items:center;flex-wrap:nowrap}.input-wrapper>.glyph{display:block;position:absolute;-webkit-margin-start:0.312rem;margin-inline-start:0.312rem;color:var(--theme-color-std-text)}.input-wrapper>input{-webkit-padding-start:2.2rem;padding-inline-start:2.2rem}select.form-control{padding:0 0.312rem}textarea.form-control{padding:0.375rem 0.5rem}.was-validated .form-control:invalid,.was-validated .is-invalid{background-color:var(--theme-input-error--background);background-image:url(\"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 62 (101010) - https://sketch.com --%3E%3Ctitle%3Eerror%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.75'%3E%3Cg id='error' fill='%23ff2640'%3E%3Cg id='error/error'%3E%3Cpath d='M256,42.6666667 C373.626371,42.6666667 469.333333,138.373627 469.333333,256 C469.333333,373.626371 373.626371,469.333333 256,469.333333 C138.373627,469.333333 42.6666667,373.626371 42.6666667,256 C42.6666667,138.373627 138.373627,42.6666667 256,42.6666667 Z M256,85.3333333 C161.559631,85.3333333 85.3333333,161.559631 85.3333333,256 C85.3333333,350.44037 161.559631,426.666667 256,426.666667 C350.44037,426.666667 426.666667,350.44037 426.666667,256 C426.666667,161.559631 350.44037,85.3333333 256,85.3333333 Z M326.248389,155.581722 L356.418278,185.751611 L286.168667,255.999667 L356.418278,326.248389 L326.248389,356.418278 L255.999667,286.168667 L185.751611,356.418278 L155.581722,326.248389 L225.829667,255.999667 L155.581722,185.751611 L185.751611,155.581722 L255.999667,225.829667 L326.248389,155.581722 Z' id='Combined-Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E\") !important;background-position:left calc(0.375em + 0.1875rem) center !important;padding-right:0.75rem;padding-left:calc(1.5em + 0.75rem);background-size:18px;background-repeat:no-repeat}input.disabled,input:disabled{color:var(--theme-input--color--disabled)}input:-moz-read-only{cursor:default}input:read-only,input.readonly{cursor:default}:host{display:inline-flex;width:auto;height:2rem;align-items:center;justify-content:space-between;position:relative;}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .input-container{transition:all 0.3s ease-in-out}:host input{box-shadow:var(--theme-input--box-shadow);cursor:auto !important;width:100%}:host .expanded{width:11.5625rem}:host .expanded.fullWidth{width:100%}:host .collapsed{width:1.5rem;border:none}:host .btn-search-icon{align-self:center;margin:auto;position:relative}:host .btn-search{display:flex;max-width:2rem;max-height:2rem;border-radius:var(--theme-input--border-radius);transition:all 0.15s ease-in-out;z-index:1;align-items:center;position:relative;border:none}:host .btn-search:not(.disabled):not(:disabled){cursor:pointer}:host .btn-search:not(.disabled):not(:disabled):hover{border-color:transparent}:host .btn-search:not(.disabled):not(:disabled){cursor:pointer}:host .btn-search:not(.disabled):not(:disabled):active,:host .btn-search:not(.disabled):not(:disabled).active{border-color:transparent}:host .btn-search:not(.disabled):not(:disabled):focus-visible{outline:none}:host .btn-search:not(.disabled):not(:disabled):focus-visible{outline:var(--focus--border-color);outline-width:1px;outline-style:solid}:host .btn-search.btn-search--expanded{margin-left:0.25rem;pointer-events:none}:host .btn-search:active{width:2rem;height:2rem;border-radius:var(--theme-input--border-radius);border:var(--theme-std-bdr-1) !important}:host .input-container{display:flex;position:absolute;align-items:center;flex-wrap:nowrap}:host .btn-clear{position:absolute;border-radius:var(--theme-input--border-radius);right:0px;margin-right:0.25rem}:host .input{padding-left:2rem !important;padding-right:2.5rem !important}:host .opacity-before{opacity:0}:host .opacity-after{opacity:1}:host(.right-position){width:11.5625rem !important}:host(.right-position.fullWidth){width:100% !important}:host(.right-position.fullWidth) .fullWidth{width:100% !important}";
 const ExpandingSearch = class {
   expandInput() {
@@ -53,13 +53,10 @@ const ExpandingSearch = class {
         expanded: this.expanded,
         'right-position': this.expanded,
         fullWidth: this.fullWidth,
-      } }, h("button", { class: {
-        btn: true,
-        'btn-invisible-primary': true,
-        'btn-icon': true,
+      } }, h("ix-icon-button", { size: this.expanded ? '16' : '24', icon: this.icon, ghost: true, variant: "primary", "data-testid": "button", onClick: () => this.expandInput(), tabindex: this.expanded ? -1 : 0, color: this.hasFocus ? 'input-search-icon--color--focus' : undefined, class: {
         'btn-search': true,
-        'disable-pointer': this.expanded,
-      }, "data-testid": "button", onClick: () => this.expandInput(), tabindex: this.expanded ? -1 : 0 }, h("ix-icon", { class: "btn-search-icon", name: this.icon, size: this.expanded ? '16' : '24', color: this.hasFocus ? 'input-search-icon--color--focus' : undefined })), h("div", { class: {
+        'btn-search--expanded': this.expanded,
+      } }), h("div", { class: {
         expanded: this.expanded,
         fullWidth: this.fullWidth,
         collapsed: !this.expanded,

package/dist/esm/ix-expanding-search.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ix-expanding-search.entry.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,~~inFAAinF~~;;~~MCwB/nF~~,eAAe;~~EAiClB~~,WAAW;IACjB,UAAU,CAAC,IAAI,CAAC,cAAc,EAAE,GAAG,CAAC,CAAC;IACrC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;GACtB;EAEO,aAAa;IACnB,IAAI,CAAC,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,QAAQ,EAAE;MACzC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;KACvB;GACF;EAEO,UAAU;IAChB,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;IAChB,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;GAC7B;EAEO,QAAQ,CAAC,CAAa;IAC5B,IAAI,CAAC,KAAK,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC;IAClD,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,EAAE;MAC5C,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;KAC7B;SAAM;MACL,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;KAC5B;IAED,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GACnC;EAID;;;~~gBA1De~~,QAAQ;uBAKD,iBAAiB;iBAKN,EAAE;qBAMf,KAAK;0BAEC,KAAK;~~oBAEX~~,KAAK;~~oBAEL~~,KAAK;IAqCvB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GACtD;EAEO,cAAc;;IACpB,MAAA,IAAI,CAAC,SAAS,0CAAE,KAAK,EAAE,CAAC;GACzB;EAEO,YAAY;;IAClB,IAAI,CAAC,UAAU,EAAE,CAAC;IAClB,MAAA,IAAI,CAAC,SAAS,0CAAE,KAAK,EAAE,CAAC;IACxB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GACnC;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,gBAAgB,EAAE,IAAI,CAAC,QAAQ;QAC/B,SAAS,EAAE,IAAI,CAAC,SAAS;OAC1B,IAED,~~cACE~~,~~KAAK~~,EAAE~~;QACL~~,GAAG,~~EAAE~~,IAAI~~;QACT~~,~~uBAAuB~~,~~EAAE,~~IAAI~~;QAC7B~~,~~UAAU,~~EAAE,IAAI~~;QAChB~~,~~YAAY~~,~~EAAE,~~IAAI~~;QAClB~~,~~iBAAiB~~,~~EAAE~~,~~IAAI~~,~~CAAC~~,~~QAAQ;OACjC~~,~~iBACW~~,QAAQ,EACpB,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EACjC,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC,~~IAEhC~~,~~eACE,~~KAAK,~~EAAC,iBAAiB,EACvB,IAAI,~~EAAE,IAAI,CAAC,~~IAAI~~,~~EACf~~,~~IAAI~~,~~EAAE~~,~~IAAI~~,~~CAAC~~,~~QAAQ~~,~~GAAG~~,~~IAAI~~,~~GAAG~~,IAAI,~~EACjC~~,~~KAAK~~,~~EACH,~~IAAI,CAAC,QAAQ,~~GAAG~~,~~iCAAiC~~,~~GAAG,SAAS,GAEtD,CACJ,EAET,~~WACE,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,SAAS,EAAE,IAAI,CAAC,SAAS;QACzB,SAAS,EAAE,CAAC,IAAI,CAAC,QAAQ;QACzB,iBAAiB,EAAE,CAAC,IAAI,CAAC,QAAQ;QACjC,iBAAiB,EAAE,IAAI;OACxB,iBACW,eAAe,IAE3B,aACE,KAAK,EAAE;QACL,cAAc,EAAE,IAAI;QACpB,KAAK,EAAE,IAAI,CAAC,QAAQ;QACpB,iBAAiB,EAAE,CAAC,IAAI,CAAC,QAAQ;QACjC,gBAAgB,EAAE,CAAC,IAAI,CAAC,QAAQ;QAChC,eAAe,EAAE,IAAI,CAAC,QAAQ;OAC/B,EACD,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC,iBACtB,OAAO,EACnB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE;QACN,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;OACvB,EACD,OAAO,EAAE,OAAO,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,EACrC,OAAO,EAAE,CAAC,CAAa,KAAK,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAC5C,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAC,GAChC,EAED,IAAI,CAAC,cAAc,IAClB,sBACE,KAAK,EAAC,WAAW,EACjB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,IAAI,EACX,IAAI,EAAC,IAAI,iBACG,cAAc,EAC1B,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,GAClC,IACA,IAAI,CACJ,CACD,EACP;GACH;;;;;;","names":[],"sources":["./src/components/expanding-search/expanding-search.scss?tag=ix-expanding-search&encapsulation=~~scoped~~","./src/components/expanding-search/expanding-search.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'common-variables';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n\n$container-width: 11.5625rem;\n\n:host {\n display: inline-flex;\n width: auto;\n height: $x-large-space;\n align-items: center;\n justify-content: space-between;\n position: relative;\n\n ~~&.right-position {\n width: $container-width !important;\n\n &.fullWidth {\n width: 100% !important;\n }\n }\n\n~~ .input-container {\n transition: all 0.3s ease-in-out;\n }\n\n ~~.disable-pointer {\n pointer-events: none;\n }\n\n~~ input {\n box-shadow: var(--theme-input--box-shadow);\n cursor: auto !important;\n }\n\n .expanded {\n width: $container-width;\n\n &.fullWidth {\n width: 100%;\n }\n }\n\n .collapsed {\n width: $large-space;\n border: none;\n }\n\n /collapsed view/\n .btn-search-icon {\n align-self: center;\n margin: auto;\n position: relative;\n }\n\n .btn-search {\n display: flex;\n max-width: $x-large-space;\n max-height: $x-large-space;\n border-radius: var(--theme-input--border-radius);\n transition: all 0.15s ease-in-out;\n z-index: 1;\n align-items: center;\n position: relative;\n border: none;\n\n @include hover {\n border-color: transparent;\n }\n\n @include active {\n border-color: transparent;\n }\n\n @include focus {\n outline: none;\n }\n\n @include focus-visible {\n outline: var(--focus--border-color);\n outline-width: 1px;\n outline-style: solid;\n }\n }\n\n .btn-search:active {\n width: $x-large-space;\n height: $x-large-space;\n border-radius: var(--theme-input--border-radius);\n border: var(--theme-std-bdr-1) !important;\n }\n\n /expanded view/\n .input-container {\n display: flex;\n position: absolute;\n align-items: center;\n flex-wrap: nowrap;\n }\n\n .btn-clear {\n position: absolute;\n border-radius: var(--theme-input--border-radius);\n right: 0px;\n margin-right: 0.25rem;\n }\n\n .input {\n padding-left: $x-large-space !important;\n padding-right: 2.5rem !important;\n }\n\n .opacity-before {\n opacity: 0;\n }\n\n .opacity-after {\n opacity: 1;\n }\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n} from '@stencil/core';\n\n@Component({\n tag: 'ix-expanding-search',\n styleUrl: 'expanding-search.scss',\n ~~scoped~~: true,\n})\nexport class ExpandingSearch {\n /\n Search icon\n /\n @Prop() icon = 'search';\n\n /\n Placeholder text\n /\n @Prop() placeholder = 'Enter text here';\n\n /\n Default value\n /\n @Prop({ mutable: true }) value = '';\n\n /\n If true the search field will fill all available horizontal space of it's parent container when expanded.\n * @since 1.6.0\n /\n @Prop() fullWidth = false;\n\n @State() isFieldChanged = false;\n\n @State() expanded = false;\n\n @State() hasFocus = false;\n\n /\n Value changed\n */\n @Event() valueChange: EventEmitter<string>;\n\n private expandInput() {\n setTimeout(this.focusTextInput, 300);\n this.expanded = true;\n }\n\n private collapseInput() {\n if (!this.isFieldChanged && this.expanded) {\n this.expanded = false;\n }\n }\n\n private clearInput() {\n this.value = '';\n this.isFieldChanged = false;\n }\n\n private onChange(e: InputEvent) {\n this.value = (e.target as HTMLInputElement).value;\n if (this.isFieldChanged && this.value === '') {\n this.isFieldChanged = false;\n } else {\n this.isFieldChanged = true;\n }\n\n this.valueChange.emit(this.value);\n }\n\n private textInput?: HTMLInputElement;\n\n constructor() {\n this.focusTextInput = this.focusTextInput.bind(this);\n }\n\n private focusTextInput() {\n this.textInput?.focus();\n }\n\n private clearClicked() {\n this.clearInput();\n this.textInput?.focus();\n this.valueChange.emit(this.value);\n }\n\n render() {\n return (\n <Host\n class={{\n expanded: this.expanded,\n 'right-position': this.expanded,\n fullWidth: this.fullWidth,\n }}\n >\n <button\n ~~class~~={~~{\n btn:~~ ~~true,\n~~ '~~btn-invisible-primary~~': ~~true,\n 'btn-icon'~~: ~~true,\n~~ '~~btn-search~~'~~: true,\~~n ~~'disable-pointer':~~ this.~~expanded,\~~n }}\n data-testid=\"button\"\n onClick={() => this.expandInput()}\n tabindex={this.expanded ? -1 : 0}\n ~~>\n~~ ~~<ix-icon\n class=\"btn-search-icon\"\n name~~={this.~~icon}\n size={this.expanded~~ ? '16' : ~~'24'~~}\n ~~color~~={\n ~~this.hasFocus~~ ? '~~input~~-search~~-icon~~--~~color--focus~~' : ~~undefined\~~n }\n ></ix-icon~~>\n </~~button>\n\n <div\n class={{\n expanded: this.expanded,\n fullWidth: this.fullWidth,\n collapsed: !this.expanded,\n 'disable-pointer': !this.expanded,\n 'input-container': true,\n }}\n data-testid=\"input-wrapper\"\n >\n <input\n class={{\n 'form-control': true,\n input: this.expanded,\n 'disable-pointer': !this.expanded,\n 'opacity-before': !this.expanded,\n 'opacity-after': this.expanded,\n }}\n ref={(el) => (this.textInput = el)}\n data-testid=\"input\"\n placeholder={this.placeholder}\n type=\"text\"\n value={this.value}\n onBlur={() => {\n this.collapseInput();\n this.hasFocus = false;\n }}\n onFocus={() => (this.hasFocus = true)}\n onInput={(e: InputEvent) => this.onChange(e)}\n tabindex={this.expanded ? 0 : -1}\n />\n\n {this.isFieldChanged ? (\n <ix-icon-button\n class=\"btn-clear\"\n icon=\"clear\"\n ghost={true}\n size=\"16\"\n data-testid=\"clear-button\"\n onClick={() => this.clearClicked()}\n />\n ) : null}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-expanding-search.entry.js","mappings":"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","names":[],"sources":["./src/components/expanding-search/expanding-search.scss?tag=ix-expanding-search&encapsulation=shadow","./src/components/expanding-search/expanding-search.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n@import 'common-variables';\n@import 'legacy/components/forms';\n@import 'mixins/shadow-dom/component';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n\n$container-width: 11.5625rem;\n\n:host {\n @include ix-component;\n\n display: inline-flex;\n width: auto;\n height: $x-large-space;\n align-items: center;\n justify-content: space-between;\n position: relative;\n\n .input-container {\n transition: all 0.3s ease-in-out;\n }\n\n input {\n box-shadow: var(--theme-input--box-shadow);\n cursor: auto !important;\n width: 100%;\n }\n\n .expanded {\n width: $container-width;\n\n &.fullWidth {\n width: 100%;\n }\n }\n\n .collapsed {\n width: $large-space;\n border: none;\n }\n\n /collapsed view/\n .btn-search-icon {\n align-self: center;\n margin: auto;\n position: relative;\n }\n\n .btn-search {\n display: flex;\n max-width: $x-large-space;\n max-height: $x-large-space;\n border-radius: var(--theme-input--border-radius);\n transition: all 0.15s ease-in-out;\n z-index: 1;\n align-items: center;\n position: relative;\n border: none;\n\n @include hover {\n border-color: transparent;\n }\n\n @include active {\n border-color: transparent;\n }\n\n @include focus {\n outline: none;\n }\n\n @include focus-visible {\n outline: var(--focus--border-color);\n outline-width: 1px;\n outline-style: solid;\n }\n }\n\n .btn-search.btn-search--expanded {\n margin-left: 0.25rem;\n pointer-events: none;\n }\n\n .btn-search:active {\n width: $x-large-space;\n height: $x-large-space;\n border-radius: var(--theme-input--border-radius);\n border: var(--theme-std-bdr-1) !important;\n }\n\n /expanded view/\n .input-container {\n display: flex;\n position: absolute;\n align-items: center;\n flex-wrap: nowrap;\n }\n\n .btn-clear {\n position: absolute;\n border-radius: var(--theme-input--border-radius);\n right: 0px;\n margin-right: 0.25rem;\n }\n\n .input {\n padding-left: $x-large-space !important;\n padding-right: 2.5rem !important;\n }\n\n .opacity-before {\n opacity: 0;\n }\n\n .opacity-after {\n opacity: 1;\n }\n}\n\n:host(.right-position) {\n width: $container-width !important;\n}\n\n:host(.right-position.fullWidth) {\n width: 100% !important;\n\n .fullWidth {\n width: 100% !important;\n }\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n} from '@stencil/core';\n\n@Component({\n tag: 'ix-expanding-search',\n styleUrl: 'expanding-search.scss',\n shadow: true,\n})\nexport class ExpandingSearch {\n /\n Search icon\n /\n @Prop() icon = 'search';\n\n /\n Placeholder text\n /\n @Prop() placeholder = 'Enter text here';\n\n /\n Default value\n /\n @Prop({ mutable: true }) value = '';\n\n /\n If true the search field will fill all available horizontal space of it's parent container when expanded.\n * @since 1.6.0\n /\n @Prop() fullWidth = false;\n\n @State() isFieldChanged = false;\n @State() expanded = false;\n @State() hasFocus = false;\n\n /\n Value changed\n */\n @Event() valueChange: EventEmitter<string>;\n\n private expandInput() {\n setTimeout(this.focusTextInput, 300);\n this.expanded = true;\n }\n\n private collapseInput() {\n if (!this.isFieldChanged && this.expanded) {\n this.expanded = false;\n }\n }\n\n private clearInput() {\n this.value = '';\n this.isFieldChanged = false;\n }\n\n private onChange(e: InputEvent) {\n this.value = (e.target as HTMLInputElement).value;\n if (this.isFieldChanged && this.value === '') {\n this.isFieldChanged = false;\n } else {\n this.isFieldChanged = true;\n }\n\n this.valueChange.emit(this.value);\n }\n\n private textInput?: HTMLInputElement;\n\n constructor() {\n this.focusTextInput = this.focusTextInput.bind(this);\n }\n\n private focusTextInput() {\n this.textInput?.focus();\n }\n\n private clearClicked() {\n this.clearInput();\n this.textInput?.focus();\n this.valueChange.emit(this.value);\n }\n\n render() {\n return (\n <Host\n class={{\n expanded: this.expanded,\n 'right-position': this.expanded,\n fullWidth: this.fullWidth,\n }}\n >\n <ix-icon-button\n size={this.expanded ? '16' : '24'}\n icon={this.icon}\n ghost\n variant=\"primary\"\n data-testid=\"button\"\n onClick={() => this.expandInput()}\n tabindex={this.expanded ? -1 : 0}\n color={this.hasFocus ? 'input-search-icon--color--focus' : undefined}\n class={{\n 'btn-search': true,\n 'btn-search--expanded': this.expanded,\n }}\n ></ix-icon-button>\n\n <div\n class={{\n expanded: this.expanded,\n fullWidth: this.fullWidth,\n collapsed: !this.expanded,\n 'disable-pointer': !this.expanded,\n 'input-container': true,\n }}\n data-testid=\"input-wrapper\"\n >\n <input\n class={{\n 'form-control': true,\n input: this.expanded,\n 'disable-pointer': !this.expanded,\n 'opacity-before': !this.expanded,\n 'opacity-after': this.expanded,\n }}\n ref={(el) => (this.textInput = el)}\n data-testid=\"input\"\n placeholder={this.placeholder}\n type=\"text\"\n value={this.value}\n onBlur={() => {\n this.collapseInput();\n this.hasFocus = false;\n }}\n onFocus={() => (this.hasFocus = true)}\n onInput={(e: InputEvent) => this.onChange(e)}\n tabindex={this.expanded ? 0 : -1}\n />\n\n {this.isFieldChanged ? (\n <ix-icon-button\n class=\"btn-clear\"\n icon=\"clear\"\n ghost={true}\n size=\"16\"\n data-testid=\"clear-button\"\n onClick={() => this.clearClicked()}\n />\n ) : null}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/ix-filter-chip.entry.js CHANGED Viewed

@@ -1,12 +1,13 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-8ddfb6d8.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-eb0be730.js';
-const filterChipCss = ".sc-ix-filter-chip-h{display:flex;align-items:center;justify-content:space-between;height:1.5rem;padding-left:0.5rem;border:var(--theme-focus--border-thickness) solid var(--theme-chip-primary-outline--border-color);border-radius:2rem;background-color:var(--theme-color-ghost);color:var(--theme-chip-primary-outline--color)}.sc-ix-filter-chip-h:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-filter-chip-h:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost-primary--hover);border-color:var(--theme-chip-primary-outline--border-color--hover);color:var(--theme-chip-primary-outline--color--hover)}.sc-ix-filter-chip-h:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-filter-chip-h:not(.disabled):not(:disabled):active{background-color:var(--theme-color-ghost-primary--active);border-color:var(--theme-chip-primary-outline--border-color--active);color:var(--theme-chip-primary-outline--color--active)}.sc-ix-filter-chip-h:not(.disabled):not(:disabled):focus-visible{outline:var(--theme-color-focus-bdr) solid var(--theme-focus--border-thickness);outline-offset:-0.125rem}.sc-ix-filter-chip-h .slot-container.sc-ix-filter-chip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-ix-filter-chip-h .slot-container.sc-ix-filter-chip .disabled.sc-ix-filter-chip-h,.disabled .sc-ix-filter-chip-h{background-color:var(--theme-color-ghost);border-color:var(--theme-color-component-4);color:var(--theme-color-weak-text)}.sc-ix-filter-chip-h .btn-oval.sc-ix-filter-chip{height:1.5rem;width:1.5rem;min-width:1.5rem;margin-left:0.25rem;padding:0;vertical-align:top}.sc-ix-filter-chip-h .btn-oval.sc-ix-filter-chip:not(.disabled):not(:disabled):focus-visible{outline:none;border-color:#199fff}";
+const filterChipCss = ":host{display:inline-flex;align-items:center;justify-content:space-between;height:1.5rem;padding-left:0.5rem;border:var(--theme-focus--border-thickness) solid var(--theme-chip-primary-outline--border-color);border-radius:2rem;background-color:var(--theme-color-ghost);color:var(--theme-chip-primary-outline--color)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .slot-container{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .slot-container :host-context(.disabled){background-color:var(--theme-color-ghost);border-color:var(--theme-color-component-4);color:var(--theme-color-weak-text)}:host ix-icon-button{height:1.5rem;margin-left:0.25rem}:host ix-icon-button:not(.disabled):not(:disabled):focus-visible{outline:none}:host(.disabled){border:var(--theme-focus--border-thickness) solid var(--theme-color-component-4);color:var(--theme-color-weak-text);padding-right:0.5rem;cursor:default}:host(.readonly){padding-right:0.5rem}:host(:not(.disabled):not(:disabled)){cursor:pointer}:host(:hover:not(.disabled):not(:disabled)){background-color:var(--theme-color-ghost-primary--hover);border-color:var(--theme-chip-primary-outline--border-color--hover);color:var(--theme-chip-primary-outline--color--hover)}:host(:not(.disabled):not(:disabled)){cursor:pointer}:host(:active:not(.disabled):not(:disabled)){background-color:var(--theme-color-ghost-primary--active);border-color:var(--theme-chip-primary-outline--border-color--active);color:var(--theme-chip-primary-outline--color--active)}:host(:focus-visible:not(.disabled):not(:disabled)){outline:var(--theme-color-focus-bdr) solid var(--theme-focus--border-thickness);outline-offset:-0.125rem}";
 const FilterChip = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.closeClick = createEvent(this, "closeClick", 7);
     this.disabled = false;
+    this.readonly = false;
   }
   onCloseClick(event) {
     event.preventDefault();
@@ -14,7 +15,7 @@ const FilterChip = class {
     this.closeClick.emit();
   }
   render() {
-    return (h(Host, { class: { disabled: this.disabled }, title: this.el.textContent }, h("div", { class: "slot-container" }, h("slot", null)), h("button", { disabled: this.disabled, class: "btn btn-invisible-primary btn-oval", onClick: (e) => this.onCloseClick(e) }, h("ix-icon", { name: "close-small", size: "16" }))));
+    return (h(Host, { class: { disabled: this.disabled, readonly: this.readonly }, title: this.el.textContent }, h("div", { class: "slot-container" }, h("slot", null)), !this.disabled && !this.readonly ? (h("ix-icon-button", { ghost: true, oval: true, icon: "close-small", size: "16", tabindex: this.disabled ? -1 : 0, variant: "primary", disabled: this.disabled, onClick: (e) => this.onCloseClick(e) })) : null));
   }
   get el() { return getElement(this); }
 };