npm - @siemens/ix - Versions diffs - 0.0.0-20240522074328 → 0.0.0-pr-1373-20240705054533 - Mend

@siemens/ix 0.0.0-20240522074328 → 0.0.0-pr-1373-20240705054533

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

package/dist/cjs/ix-pane.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ix-pane.entry.cjs.js","mappings":"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","names":["matchBreakpoint","applicationLayoutService","animation","anime","Animation","h","Host"],"sources":["src/components/pane/pane.scss?tag=ix-pane&encapsulation=shadow","src/components/pane/pane.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/shadow-dom/component';\n\n@mixin set-border($composition) {\n @if $composition {\n border-#{$composition}: var(--theme-app-header--border-width) solid var(--theme-color-soft-bdr);\n }\n}\n\n:host {\n @include ix-component;\n background-color: var(--theme-color-2);\n display: flex;\n position: relative;\n overflow: hidden;\n box-sizing: border-box;\n\n aside {\n width: 100%;\n height: 100%;\n }\n\n .title-text {\n display: flex;\n align-items: center;\n gap: var(--theme-space-1);\n overflow: hidden;\n\n .title-text-overflow {\n width: 100%;\n height: 100%;\n display: contents;\n\n {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n }\n }\n }\n\n .header-gap {\n gap: var(--theme-space-1);\n }\n\n .top-bottom-pane {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n\n .title {\n display: flex;\n flex-direction: row;\n align-items: center;\n margin: var(--theme-space--1) var(--theme-space-2) var(--theme-space--1) var(--theme-space-2);\n }\n\n .title-finished {\n padding: 0 !important;\n margin: var(--theme-space-2) var(--theme-space-2) var(--theme-space-2) var(--theme-space-2);\n }\n\n .title-expanded {\n display: flex;\n flex-direction: row;\n }\n\n .title-hide-on-collapse {\n display: flex;\n flex-direction: row-reverse;\n justify-content: space-between;\n padding: 0 !important;\n margin: var(--theme-space-2) var(--theme-space-2) var(--theme-space-2) var(--theme-space-2);\n }\n }\n\n .left-right-pane {\n display: flex;\n flex-grow: 1;\n\n .title {\n display: flex;\n flex-direction: column;\n align-items: center;\n margin: var(--theme-space-2) var(--theme-space--1) var(--theme-space-2) var(--theme-space--1);\n\n .title-text {\n flex-direction: row-reverse;\n justify-content: start;\n flex-direction: row;\n }\n\n .rotate {\n writing-mode: vertical-lr;\n text-orientation: mixed;\n transform: rotate(180deg);\n flex-direction: row-reverse;\n }\n }\n\n .title-finished {\n padding: 0 !important;\n margin: var(--theme-space-2) var(--theme-space-2) var(--theme-space-2) var(--theme-space-2);\n }\n\n .title-expanded {\n display: flex;\n flex-direction: row;\n }\n\n .title-hide-on-collapse {\n display: flex;\n flex-direction: row-reverse;\n justify-content: space-between;\n padding: 0 !important;\n margin: var(--theme-space-2) var(--theme-space-2) var(--theme-space-2) var(--theme-space-2);\n }\n }\n\n .left-right-pane.expanded {\n flex-direction: column;\n }\n\n .mobile-pane {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n\n .title-mobile {\n display: flex;\n flex-direction: row-reverse;\n justify-content: space-between;\n margin: var(--theme-space-1) var(--theme-space-2);\n }\n }\n\n .side-pane-content {\n padding: var(--theme-space-1) var(--theme-space-2);\n overflow: auto;\n height: 100%;\n width: 100%;\n }\n}\n\n:host(.not-visible) {\n display: none;\n}\n\n:host(.inline-color) {\n background-color: var(--theme-color-1);\n}\n\n:host(.box-shadow) {\n box-shadow: 0 0 1rem black;\n}\n\n:host(.nav-left-border) {\n border-left: var(--theme-app-header--border-width) solid var(--theme-color-weak-bdr);\n}\n\n:host(.left-pane-border) {\n @include set-border(right);\n}\n\n:host(.right-pane-border) {\n @include set-border(left);\n}\n\n:host(.top-pane-border) {\n @include set-border(bottom);\n}\n\n:host(.bottom-pane-border) {\n @include set-border(top);\n}\n\n:host(.mobile-overlay) {\n width: 100%;\n position: absolute;\n z-index: 100 !important;\n\n .side-pane-content {\n height: calc(100% - 2.5rem);\n }\n}\n\n:host(.mobile-border-top) {\n @include set-border(bottom);\n}\n\n:host(.mobile-border-bottom) {\n @include set-border(top);\n}\n\n:host(.top-expanded) {\n top: 0;\n}\n\n:host(.bottom-expanded) {\n bottom: 0;\n}\n\n:host(.left-right-pane) {\n height: 100%;\n}\n\n:host(.top-bottom-pane) {\n width: 100%;\n}\n","/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport Animation from '../utils/animation';\nimport { applicationLayoutService } from '../utils/application-layout';\nimport { matchBreakpoint } from '../utils/breakpoints';\n\nexport type Composition = 'top' \| 'left' \| 'bottom' \| 'right';\nexport type ExpandedChangedEvent = {\n slot: string;\n expanded: boolean;\n};\nexport type SlotChangedEvent = {\n slot: string;\n newSlot: string;\n};\nexport type HideOnCollapseChangedEvent = {\n slot: string;\n hideOnCollapse: boolean;\n};\nexport type VariantChangedEvent = {\n slot: string;\n variant: 'floating' \| 'inline';\n};\nexport type BorderlessChangedEvent = {\n slot: string;\n borderless: boolean;\n};\n\n/\n @since 2.1.0\n /\n@Component({\n tag: 'ix-pane',\n styleUrl: 'pane.scss',\n shadow: true,\n})\nexport class Pane {\n @Element() hostElement: HTMLIxPaneElement;\n\n /\n Title of the side panel\n /\n @Prop() heading: string;\n\n /\n Variant of the side pane.\n * Defaults to the variant attribute of the pane layout. If used standalone it defaults to inline.\n /\n @Prop() variant: 'floating' \| 'inline' = 'inline';\n\n /\n Define if the pane should have a collapsed state\n /\n @Prop() hideOnCollapse: boolean = false;\n\n /\n The maximum size of the sidebar, when it is expanded\n /\n @Prop() size:\n \| '240px'\n \| '320px'\n \| '360px'\n \| '480px'\n \| '600px'\n \| '33%'\n \| '50%' = '240px';\n\n /\n Toggle the border of the pane.\n * Defaults to the borderless attribute of the pane layout. If used standalone it defaults to false.\n /\n @Prop() borderless: boolean = false;\n\n /\n State of the pane\n /\n @Prop({ mutable: true }) expanded: boolean = false;\n\n /\n Defines the position of the pane inside it's container.\n * Inside a pane layout this property will automatically be set to the name of slot the pane is assigned to.\n /\n @Prop({ mutable: true }) composition: Composition = 'top';\n\n /\n Name of the icon\n /\n @Prop() icon: string;\n\n /\n @internal\n * Prevents overwriting of the variant and borderless property when used inside layout\n /\n @Prop() ignoreLayoutSettings: boolean = false;\n\n /\n @internal\n /\n @Prop({ mutable: true }) isMobile: boolean = false;\n\n /\n This event is triggered when the pane either expands or contracts\n /\n @Event() expandedChanged: EventEmitter<ExpandedChangedEvent>;\n\n /\n This event is triggered when the variant of the pane is changed\n /\n @Event() variantChanged: EventEmitter<VariantChangedEvent>;\n\n /\n This event is triggered when the variant of the pane is changed\n /\n @Event() borderlessChanged: EventEmitter<BorderlessChangedEvent>;\n\n /\n @internal\n /\n @Event() hideOnCollapseChanged: EventEmitter<HideOnCollapseChangedEvent>;\n\n /\n @internal\n */\n @Event() slotChanged: EventEmitter<SlotChangedEvent>;\n\n @State() private expandIcon = '';\n @State() private showContent = false;\n @State() private minimizeIcon = '';\n @State() private floating = false;\n @State() private parentWidthPx = 0;\n @State() private parentHeightPx = 0;\n\n private validPositions = ['top', 'left', 'bottom', 'right'];\n private collapsedPane = '40px';\n private collapsedPaneMobile = '48px';\n private animations: Map<string, anime.AnimeInstance> = new Map();\n private animationCounter = 0;\n\n private mutationObserver: MutationObserver;\n private resizeObserver: ResizeObserver;\n\n get currentSlot() {\n return this.hostElement.getAttribute('slot');\n }\n\n get isBottomTopPane() {\n return this.composition === 'bottom' \|\| this.composition === 'top';\n }\n\n get isLeftRightPane() {\n return this.composition === 'left' \|\| this.composition === 'right';\n }\n\n get isMobileTop() {\n return this.composition === 'top' \|\| this.composition === 'left';\n }\n\n componentWillLoad() {\n this.setIcons();\n\n this.floating = this.variant === 'floating';\n\n if (this.expanded) {\n this.onParentSizeChange();\n }\n\n this.isMobile = matchBreakpoint('sm');\n applicationLayoutService.onChange.on(() => {\n this.isMobile = matchBreakpoint('sm');\n });\n\n this.setPosition(this.currentSlot);\n\n this.mutationObserver = new MutationObserver((mutations) => {\n mutations.forEach((mutation) => {\n if (\n mutation.type === 'attributes' &&\n mutation.attributeName === 'slot'\n ) {\n const newSlot = this.currentSlot;\n const oldSlot = mutation.oldValue;\n\n if (newSlot !== oldSlot) {\n this.slotChanged.emit({\n slot: oldSlot,\n newSlot: newSlot,\n });\n this.setPosition(newSlot);\n }\n }\n });\n });\n this.mutationObserver.observe(this.hostElement, {\n attributes: true,\n attributeOldValue: true,\n });\n\n const parentElement = this.hostElement.parentElement;\n this.resizeObserver = new ResizeObserver((entries) => {\n this.parentWidthPx = entries[0].borderBoxSize[0].inlineSize;\n this.parentHeightPx = entries[0].borderBoxSize[0].blockSize;\n });\n if (parentElement) this.resizeObserver.observe(parentElement);\n }\n\n disconnectedCallback() {\n this.mutationObserver?.disconnect();\n this.resizeObserver?.disconnect();\n }\n\n private setPosition(value: string) {\n if (this.validPositions.includes(value)) {\n this.composition = value as Composition;\n }\n }\n\n private getExpandPaneSize() {\n let expandPaneSize: string;\n\n if (this.isBottomTopPane) {\n if (this.size.includes('px')) {\n const referenceValue = Math.round(this.parentHeightPx / 2);\n const currentValue = Number(this.size.replace('px', ''));\n\n if (referenceValue && referenceValue < currentValue) {\n expandPaneSize = `${referenceValue}px`;\n } else {\n expandPaneSize = `${currentValue}px`;\n }\n } else {\n if (this.size === '50%') {\n expandPaneSize = `${Math.round(this.parentHeightPx / 2)}px`;\n } else {\n expandPaneSize = `${Math.round(this.parentHeightPx / 3)}px`;\n }\n }\n } else {\n if (this.size.includes('px')) {\n const referenceValue = Math.round(this.parentWidthPx / 2);\n const currentValue = Number(this.size.replace('px', ''));\n\n if (referenceValue && referenceValue < currentValue) {\n expandPaneSize = `${referenceValue}px`;\n } else {\n expandPaneSize = `${currentValue}px`;\n }\n } else {\n if (this.size === '50%') {\n expandPaneSize = `${Math.round(this.parentWidthPx / 2)}px`;\n } else {\n expandPaneSize = `${Math.round(this.parentWidthPx / 3)}px`;\n }\n }\n }\n\n return expandPaneSize;\n }\n\n private setIcons() {\n const { expandIcon, minimizeIcon } = this.getIconNames();\n this.expandIcon = expandIcon;\n this.minimizeIcon = minimizeIcon;\n }\n\n private getIconNames(): { expandIcon: string; minimizeIcon: string } {\n let expandIcon = '';\n let minimizeIcon = '';\n\n switch (this.composition) {\n case 'left':\n expandIcon = this.isMobile\n ? 'double-chevron-up'\n : 'double-chevron-left';\n minimizeIcon = this.isMobile\n ? 'double-chevron-down'\n : 'double-chevron-right';\n break;\n case 'right':\n expandIcon = this.isMobile\n ? 'double-chevron-down'\n : 'double-chevron-right';\n minimizeIcon = this.isMobile\n ? 'double-chevron-up'\n : 'double-chevron-left';\n break;\n case 'bottom':\n expandIcon = 'double-chevron-down';\n minimizeIcon = 'double-chevron-up';\n break;\n case 'top':\n expandIcon = 'double-chevron-up';\n minimizeIcon = 'double-chevron-down';\n break;\n }\n\n return { expandIcon, minimizeIcon };\n }\n\n private getKey() {\n return (this.animationCounter++).toString();\n }\n\n private animateVerticalFadeIn(size: string) {\n let key = this.getKey();\n let animation = anime({\n targets: this.hostElement,\n duration: Animation.mediumTime,\n width: size,\n easing: 'easeInOutSine',\n delay: 0,\n begin: () => {\n if (!this.expanded) {\n this.showContent = false;\n this.animateVerticalPadding('0px');\n } else {\n this.animateVerticalPadding('8px');\n }\n },\n complete: () => {\n if (this.expanded) {\n this.showContent = true;\n }\n\n this.animations.delete(key);\n },\n });\n\n this.animations.set(key, animation);\n }\n\n private animateHorizontalFadeIn(size: string) {\n let key = this.getKey();\n let animation = anime({\n targets: this.hostElement,\n duration: Animation.mediumTime,\n height: size,\n easing: 'easeInOutSine',\n delay: 0,\n begin: () => {\n if (!this.expanded) {\n this.showContent = false;\n if (!this.isMobile) this.animateHorizontalPadding('0px');\n } else {\n if (!this.isMobile) this.animateHorizontalPadding('8px');\n }\n },\n complete: () => {\n if (this.expanded) {\n this.showContent = true;\n }\n\n this.animations.delete(key);\n },\n });\n\n this.animations.set(key, animation);\n }\n\n private removePadding() {\n anime({\n targets: this.hostElement.shadowRoot.querySelector('#title-div'),\n duration: 0,\n paddingTop: 0,\n paddingBottom: 0,\n paddingLeft: 0,\n paddingRight: 0,\n delay: 0,\n });\n }\n\n private animateHorizontalPadding(\n size: string,\n duration = Animation.mediumTime\n ) {\n let key = this.getKey();\n let animation = anime({\n targets: this.hostElement.shadowRoot.querySelector('#title-div'),\n duration: duration,\n paddingTop: size,\n paddingBottom: size,\n easing: 'easeInOutSine',\n delay: 0,\n complete: () => {\n this.animations.delete(key);\n },\n });\n\n this.animations.set(key, animation);\n }\n\n private animateVerticalPadding(\n size: string,\n duration = Animation.mediumTime\n ) {\n let key = this.getKey();\n let animation = anime({\n targets: this.hostElement.shadowRoot.querySelector('#title-div'),\n duration: duration,\n paddingLeft: size,\n paddingRight: size,\n easing: 'easeInOutSine',\n delay: 0,\n complete: () => {\n this.animations.delete(key);\n },\n });\n\n this.animations.set(key, animation);\n }\n\n private clearAnimations() {\n this.animations.forEach((animation) => animation.pause());\n this.animations.clear();\n this.animationCounter = 0;\n }\n\n @Watch('isMobile')\n onMobileChange() {\n this.setIcons();\n this.hostElement.style.removeProperty('width');\n this.hostElement.style.removeProperty('height');\n this.hostElement.style.removeProperty('min-height');\n this.onParentSizeChange();\n }\n\n @Watch('composition')\n onPositionChange() {\n this.setIcons();\n this.hostElement.style.removeProperty('width');\n this.hostElement.style.removeProperty('height');\n this.onParentSizeChange();\n }\n\n @Watch('hideOnCollapse')\n onHideOnCollapseChange(value: boolean) {\n this.onParentSizeChange();\n\n this.hideOnCollapseChanged.emit({\n slot: this.currentSlot,\n hideOnCollapse: value,\n });\n }\n\n @Watch('variant')\n onVariantChange(value: 'inline' \| 'floating') {\n this.floating = value === 'floating';\n\n this.variantChanged.emit({\n slot: this.currentSlot,\n variant: value,\n });\n }\n\n @Watch('borderless')\n onBorderlessChange(value: boolean) {\n this.borderlessChanged.emit({\n slot: this.currentSlot,\n borderless: value,\n });\n }\n\n @Watch('expanded')\n onExpandedChange() {\n this.onSizeChange();\n\n this.expandedChanged.emit({\n slot: this.currentSlot,\n expanded: this.expanded,\n });\n }\n\n @Watch('parentHeightPx')\n @Watch('parentWidthPx')\n onParentSizeChange() {\n this.clearAnimations();\n this.removePadding();\n\n if (this.expanded) {\n if (this.isMobile) {\n this.hostElement.style.height = '100%';\n } else {\n const expandPaneSize = this.getExpandPaneSize();\n\n if (this.isBottomTopPane) {\n this.hostElement.style.height = expandPaneSize;\n this.animateHorizontalPadding('8px', 0);\n } else {\n this.hostElement.style.width = expandPaneSize;\n this.animateVerticalPadding('8px', 0);\n }\n }\n\n this.showContent = true;\n } else {\n this.showContent = false;\n\n if (this.isMobile) {\n this.hostElement.style.height = this.hideOnCollapse\n ? '0'\n : this.collapsedPaneMobile;\n } else {\n if (this.isBottomTopPane) {\n this.hostElement.style.height = this.hideOnCollapse\n ? '0'\n : this.collapsedPane;\n } else {\n this.hostElement.style.width = this.hideOnCollapse\n ? '0'\n : this.collapsedPane;\n }\n }\n }\n }\n\n @Watch('size')\n onSizeChange() {\n if (this.expanded) {\n if (this.isMobile) {\n this.hostElement.style.minHeight = this.hideOnCollapse\n ? '0'\n : this.collapsedPaneMobile;\n this.animateHorizontalFadeIn('100%');\n } else {\n const expandPaneSize = this.getExpandPaneSize();\n\n if (this.isBottomTopPane) {\n this.hostElement.style.height = this.hideOnCollapse\n ? '0'\n : this.collapsedPane;\n this.animateHorizontalFadeIn(expandPaneSize);\n } else {\n this.hostElement.style.width = this.hideOnCollapse\n ? '0'\n : this.collapsedPane;\n this.animateVerticalFadeIn(expandPaneSize);\n }\n }\n } else {\n this.showContent = false;\n\n if (this.isMobile) {\n this.hostElement.style.height = this.collapsedPaneMobile;\n } else {\n if (this.isBottomTopPane) {\n this.animateHorizontalFadeIn(this.collapsedPane);\n } else {\n this.animateVerticalFadeIn(this.collapsedPane);\n }\n }\n }\n }\n\n render() {\n return (\n <Host\n class={{\n 'inline-color': !this.floating,\n 'mobile-overlay': this.expanded && this.isMobile,\n 'top-expanded': this.expanded && this.isMobileTop && this.isMobile,\n 'bottom-expanded':\n this.expanded && !this.isMobileTop && this.isMobile,\n 'top-bottom-pane': this.isBottomTopPane && !this.isMobile,\n 'left-right-pane': this.isLeftRightPane && !this.isMobile,\n [`${this.composition}-pane-border`]:\n !this.borderless && !this.isMobile && !this.floating,\n 'nav-left-border':\n !this.borderless &&\n !this.isMobile &&\n this.composition !== 'right' &&\n this.floating,\n 'mobile-border-top':\n !this.borderless &&\n this.isMobileTop &&\n this.isMobile &&\n !this.expanded &&\n !this.floating,\n 'mobile-border-bottom':\n !this.borderless &&\n !this.isMobileTop &&\n this.isMobile &&\n !this.expanded &&\n !this.floating,\n 'box-shadow': this.floating,\n 'aria-expanded': this.expanded,\n 'not-visible': this.hideOnCollapse && !this.expanded,\n }}\n >\n <aside\n class={{\n 'top-bottom-pane': this.isBottomTopPane && !this.isMobile,\n 'left-right-pane': this.isLeftRightPane && !this.isMobile,\n 'mobile-pane': this.isMobile,\n expanded: this.expanded,\n }}\n >\n <div\n id=\"title-div\"\n class={{\n title:\n !this.isMobile && !this.hideOnCollapse && !this.showContent,\n 'title-finished':\n !this.isMobile && !this.hideOnCollapse && this.showContent,\n 'title-expanded':\n !this.isMobile && !this.hideOnCollapse && this.expanded,\n 'title-hide-on-collapse': !this.isMobile && this.hideOnCollapse,\n 'title-mobile': this.isMobile,\n 'header-gap': !this.isMobile && !this.hideOnCollapse,\n }}\n >\n <ix-icon-button\n class=\"title-icon\"\n size=\"24\"\n icon={\n this.expanded\n ? this.isMobile \|\| this.hideOnCollapse\n ? 'close'\n : this.expandIcon\n : this.minimizeIcon\n }\n ghost\n onClick={() => {\n this.expanded = !this.expanded;\n }}\n aria-controls={this.composition + 'ToggleButton'}\n />\n <span\n class={{\n 'title-text': true,\n rotate:\n !this.expanded && !this.isMobile && this.isLeftRightPane,\n }}\n >\n {this.icon ? (\n <ix-icon size=\"24\" name={this.icon}></ix-icon>\n ) : null}\n <div class=\"title-text-overflow\">\n <ix-typography format=\"h4\">{this.heading}</ix-typography>\n </div>\n </span>\n </div>\n <div class=\"side-pane-content\" hidden={!this.showContent}>\n <slot></slot>\n </div>\n </aside>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-pane.entry.cjs.js","mappings":"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","names":["matchBreakpoint","applicationLayoutService","animation","anime","Animation","h","Host"],"sources":["src/components/pane/pane.scss?tag=ix-pane&encapsulation=shadow","src/components/pane/pane.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/shadow-dom/component';\n\n@mixin set-border($composition) {\n @if $composition {\n border-#{$composition}: var(--theme-app-header--border-width) solid var(--theme-color-soft-bdr);\n }\n}\n\n:host {\n @include ix-component;\n background-color: var(--theme-color-2);\n display: flex;\n position: relative;\n overflow: hidden;\n box-sizing: border-box;\n\n aside {\n width: 100%;\n height: 100%;\n }\n\n .title-text {\n display: flex;\n align-items: center;\n gap: var(--theme-space-1);\n overflow: hidden;\n\n .title-text-overflow {\n width: 100%;\n height: 100%;\n display: contents;\n\n {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n }\n }\n }\n\n .header-gap {\n gap: var(--theme-space-1);\n }\n\n .top-bottom-pane {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n\n .title {\n display: flex;\n flex-direction: row;\n align-items: center;\n margin: var(--theme-space--1) var(--theme-space-2) var(--theme-space--1) var(--theme-space-2);\n }\n\n .title-finished {\n padding: 0 !important;\n margin: var(--theme-space-2) var(--theme-space-2) var(--theme-space-2) var(--theme-space-2);\n }\n\n .title-expanded {\n display: flex;\n flex-direction: row;\n }\n\n .title-hide-on-collapse {\n display: flex;\n flex-direction: row-reverse;\n justify-content: space-between;\n padding: 0 !important;\n margin: var(--theme-space-2) var(--theme-space-2) var(--theme-space-2) var(--theme-space-2);\n }\n }\n\n .left-right-pane {\n display: flex;\n flex-grow: 1;\n\n .title {\n display: flex;\n flex-direction: column;\n align-items: center;\n margin: var(--theme-space-2) var(--theme-space--1) var(--theme-space-2) var(--theme-space--1);\n\n .title-text {\n flex-direction: row-reverse;\n justify-content: start;\n flex-direction: row;\n }\n\n .rotate {\n writing-mode: vertical-lr;\n text-orientation: mixed;\n transform: rotate(180deg);\n flex-direction: row-reverse;\n\n ix-icon {\n transform: rotate(90deg);\n }\n }\n }\n\n .title-finished {\n padding: 0 !important;\n margin: var(--theme-space-2) var(--theme-space-2) var(--theme-space-2) var(--theme-space-2);\n }\n\n .title-expanded {\n display: flex;\n flex-direction: row;\n }\n\n .title-hide-on-collapse {\n display: flex;\n flex-direction: row-reverse;\n justify-content: space-between;\n padding: 0 !important;\n margin: var(--theme-space-2) var(--theme-space-2) var(--theme-space-2) var(--theme-space-2);\n }\n }\n\n .left-right-pane.expanded {\n flex-direction: column;\n }\n\n .mobile-pane {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n\n .title-mobile {\n display: flex;\n flex-direction: row-reverse;\n justify-content: space-between;\n margin: var(--theme-space-1) var(--theme-space-2);\n }\n }\n\n .side-pane-content {\n padding: var(--theme-space-1) var(--theme-space-2);\n overflow: auto;\n height: 100%;\n width: 100%;\n }\n}\n\n:host(.not-visible) {\n display: none;\n}\n\n:host(.inline-color) {\n background-color: var(--theme-color-1);\n}\n\n:host(.box-shadow) {\n box-shadow: 0 0 1rem black;\n}\n\n:host(.nav-left-border) {\n border-left: var(--theme-app-header--border-width) solid var(--theme-color-weak-bdr);\n}\n\n:host(.left-pane-border) {\n @include set-border(right);\n}\n\n:host(.right-pane-border) {\n @include set-border(left);\n}\n\n:host(.top-pane-border) {\n @include set-border(bottom);\n}\n\n:host(.bottom-pane-border) {\n @include set-border(top);\n}\n\n:host(.mobile-overlay) {\n width: 100%;\n position: absolute;\n z-index: 100 !important;\n\n .side-pane-content {\n height: calc(100% - 2.5rem);\n }\n}\n\n:host(.mobile-border-top) {\n @include set-border(bottom);\n}\n\n:host(.mobile-border-bottom) {\n @include set-border(top);\n}\n\n:host(.top-expanded) {\n top: 0;\n}\n\n:host(.bottom-expanded) {\n bottom: 0;\n}\n\n:host(.left-right-pane) {\n height: 100%;\n}\n\n:host(.top-bottom-pane) {\n width: 100%;\n}\n","/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport Animation from '../utils/animation';\nimport { applicationLayoutService } from '../utils/application-layout';\nimport { matchBreakpoint } from '../utils/breakpoints';\n\nexport type Composition = 'top' \| 'left' \| 'bottom' \| 'right';\nexport type ExpandedChangedEvent = {\n slot: string;\n expanded: boolean;\n};\nexport type SlotChangedEvent = {\n slot: string;\n newSlot: string;\n};\nexport type HideOnCollapseChangedEvent = {\n slot: string;\n hideOnCollapse: boolean;\n};\nexport type VariantChangedEvent = {\n slot: string;\n variant: 'floating' \| 'inline';\n};\nexport type BorderlessChangedEvent = {\n slot: string;\n borderless: boolean;\n};\n\n/\n @since 2.1.0\n /\n@Component({\n tag: 'ix-pane',\n styleUrl: 'pane.scss',\n shadow: true,\n})\nexport class Pane {\n @Element() hostElement: HTMLIxPaneElement;\n\n /\n Title of the side panel\n /\n @Prop() heading: string;\n\n /\n Variant of the side pane.\n * Defaults to the variant attribute of the pane layout. If used standalone it defaults to inline.\n /\n @Prop() variant: 'floating' \| 'inline' = 'inline';\n\n /\n Define if the pane should have a collapsed state\n /\n @Prop() hideOnCollapse: boolean = false;\n\n /\n The maximum size of the sidebar, when it is expanded\n /\n @Prop() size:\n \| '240px'\n \| '320px'\n \| '360px'\n \| '480px'\n \| '600px'\n \| '33%'\n \| '50%' = '240px';\n\n /\n Toggle the border of the pane.\n * Defaults to the borderless attribute of the pane layout. If used standalone it defaults to false.\n /\n @Prop() borderless: boolean = false;\n\n /\n State of the pane\n /\n @Prop({ mutable: true }) expanded: boolean = false;\n\n /\n Defines the position of the pane inside it's container.\n * Inside a pane layout this property will automatically be set to the name of slot the pane is assigned to.\n /\n @Prop({ mutable: true }) composition: Composition = 'top';\n\n /\n Name of the icon\n /\n @Prop() icon: string;\n\n /\n @internal\n * Prevents overwriting of the variant and borderless property when used inside layout\n /\n @Prop() ignoreLayoutSettings: boolean = false;\n\n /\n @internal\n /\n @Prop({ mutable: true }) isMobile: boolean = false;\n\n /\n This event is triggered when the pane either expands or contracts\n /\n @Event() expandedChanged: EventEmitter<ExpandedChangedEvent>;\n\n /\n This event is triggered when the variant of the pane is changed\n /\n @Event() variantChanged: EventEmitter<VariantChangedEvent>;\n\n /\n This event is triggered when the variant of the pane is changed\n /\n @Event() borderlessChanged: EventEmitter<BorderlessChangedEvent>;\n\n /\n @internal\n /\n @Event() hideOnCollapseChanged: EventEmitter<HideOnCollapseChangedEvent>;\n\n /\n @internal\n */\n @Event() slotChanged: EventEmitter<SlotChangedEvent>;\n\n @State() private expandIcon = '';\n @State() private showContent = false;\n @State() private minimizeIcon = '';\n @State() private floating = false;\n @State() private parentWidthPx = 0;\n @State() private parentHeightPx = 0;\n\n private validPositions = ['top', 'left', 'bottom', 'right'];\n private collapsedPane = '40px';\n private collapsedPaneMobile = '48px';\n private animations: Map<string, anime.AnimeInstance> = new Map();\n private animationCounter = 0;\n\n private mutationObserver: MutationObserver;\n private resizeObserver: ResizeObserver;\n\n get currentSlot() {\n return this.hostElement.getAttribute('slot');\n }\n\n get isBottomTopPane() {\n return this.composition === 'bottom' \|\| this.composition === 'top';\n }\n\n get isLeftRightPane() {\n return this.composition === 'left' \|\| this.composition === 'right';\n }\n\n get isMobileTop() {\n return this.composition === 'top' \|\| this.composition === 'left';\n }\n\n componentWillLoad() {\n this.setIcons();\n\n this.floating = this.variant === 'floating';\n\n if (this.expanded) {\n this.onParentSizeChange();\n }\n\n this.isMobile = matchBreakpoint('sm');\n applicationLayoutService.onChange.on(() => {\n this.isMobile = matchBreakpoint('sm');\n });\n\n this.setPosition(this.currentSlot);\n\n this.mutationObserver = new MutationObserver((mutations) => {\n mutations.forEach((mutation) => {\n if (\n mutation.type === 'attributes' &&\n mutation.attributeName === 'slot'\n ) {\n const newSlot = this.currentSlot;\n const oldSlot = mutation.oldValue;\n\n if (newSlot !== oldSlot) {\n this.slotChanged.emit({\n slot: oldSlot,\n newSlot: newSlot,\n });\n this.setPosition(newSlot);\n }\n }\n });\n });\n this.mutationObserver.observe(this.hostElement, {\n attributes: true,\n attributeOldValue: true,\n });\n\n const parentElement = this.hostElement.parentElement;\n this.resizeObserver = new ResizeObserver((entries) => {\n this.parentWidthPx = entries[0].borderBoxSize[0].inlineSize;\n this.parentHeightPx = entries[0].borderBoxSize[0].blockSize;\n });\n if (parentElement) this.resizeObserver.observe(parentElement);\n }\n\n disconnectedCallback() {\n this.mutationObserver?.disconnect();\n this.resizeObserver?.disconnect();\n }\n\n private setPosition(value: string) {\n if (this.validPositions.includes(value)) {\n this.composition = value as Composition;\n }\n }\n\n private getExpandPaneSize() {\n let expandPaneSize: string;\n\n if (this.isBottomTopPane) {\n if (this.size.includes('px')) {\n const referenceValue = Math.round(this.parentHeightPx / 2);\n const currentValue = Number(this.size.replace('px', ''));\n\n if (referenceValue && referenceValue < currentValue) {\n expandPaneSize = `${referenceValue}px`;\n } else {\n expandPaneSize = `${currentValue}px`;\n }\n } else {\n if (this.size === '50%') {\n expandPaneSize = `${Math.round(this.parentHeightPx / 2)}px`;\n } else {\n expandPaneSize = `${Math.round(this.parentHeightPx / 3)}px`;\n }\n }\n } else {\n if (this.size.includes('px')) {\n const referenceValue = Math.round(this.parentWidthPx / 2);\n const currentValue = Number(this.size.replace('px', ''));\n\n if (referenceValue && referenceValue < currentValue) {\n expandPaneSize = `${referenceValue}px`;\n } else {\n expandPaneSize = `${currentValue}px`;\n }\n } else {\n if (this.size === '50%') {\n expandPaneSize = `${Math.round(this.parentWidthPx / 2)}px`;\n } else {\n expandPaneSize = `${Math.round(this.parentWidthPx / 3)}px`;\n }\n }\n }\n\n return expandPaneSize;\n }\n\n private setIcons() {\n const { expandIcon, minimizeIcon } = this.getIconNames();\n this.expandIcon = expandIcon;\n this.minimizeIcon = minimizeIcon;\n }\n\n private getIconNames(): { expandIcon: string; minimizeIcon: string } {\n let expandIcon = '';\n let minimizeIcon = '';\n\n switch (this.composition) {\n case 'left':\n expandIcon = this.isMobile\n ? 'double-chevron-up'\n : 'double-chevron-left';\n minimizeIcon = this.isMobile\n ? 'double-chevron-down'\n : 'double-chevron-right';\n break;\n case 'right':\n expandIcon = this.isMobile\n ? 'double-chevron-down'\n : 'double-chevron-right';\n minimizeIcon = this.isMobile\n ? 'double-chevron-up'\n : 'double-chevron-left';\n break;\n case 'bottom':\n expandIcon = 'double-chevron-down';\n minimizeIcon = 'double-chevron-up';\n break;\n case 'top':\n expandIcon = 'double-chevron-up';\n minimizeIcon = 'double-chevron-down';\n break;\n }\n\n return { expandIcon, minimizeIcon };\n }\n\n private getKey() {\n return (this.animationCounter++).toString();\n }\n\n private animateVerticalFadeIn(size: string) {\n let key = this.getKey();\n let animation = anime({\n targets: this.hostElement,\n duration: Animation.mediumTime,\n width: size,\n easing: 'easeInOutSine',\n delay: 0,\n begin: () => {\n if (!this.expanded) {\n this.showContent = false;\n this.animateVerticalPadding('0px');\n } else {\n this.animateVerticalPadding('8px');\n }\n },\n complete: () => {\n if (this.expanded) {\n this.showContent = true;\n }\n\n this.animations.delete(key);\n },\n });\n\n this.animations.set(key, animation);\n }\n\n private animateHorizontalFadeIn(size: string) {\n let key = this.getKey();\n let animation = anime({\n targets: this.hostElement,\n duration: Animation.mediumTime,\n height: size,\n easing: 'easeInOutSine',\n delay: 0,\n begin: () => {\n if (!this.expanded) {\n this.showContent = false;\n if (!this.isMobile) this.animateHorizontalPadding('0px');\n } else {\n if (!this.isMobile) this.animateHorizontalPadding('8px');\n }\n },\n complete: () => {\n if (this.expanded) {\n this.showContent = true;\n }\n\n this.animations.delete(key);\n },\n });\n\n this.animations.set(key, animation);\n }\n\n private removePadding() {\n anime({\n targets: this.hostElement.shadowRoot.querySelector('#title-div'),\n duration: 0,\n paddingTop: 0,\n paddingBottom: 0,\n paddingLeft: 0,\n paddingRight: 0,\n delay: 0,\n });\n }\n\n private animateHorizontalPadding(\n size: string,\n duration = Animation.mediumTime\n ) {\n let key = this.getKey();\n let animation = anime({\n targets: this.hostElement.shadowRoot.querySelector('#title-div'),\n duration: duration,\n paddingTop: size,\n paddingBottom: size,\n easing: 'easeInOutSine',\n delay: 0,\n complete: () => {\n this.animations.delete(key);\n },\n });\n\n this.animations.set(key, animation);\n }\n\n private animateVerticalPadding(\n size: string,\n duration = Animation.mediumTime\n ) {\n let key = this.getKey();\n let animation = anime({\n targets: this.hostElement.shadowRoot.querySelector('#title-div'),\n duration: duration,\n paddingLeft: size,\n paddingRight: size,\n easing: 'easeInOutSine',\n delay: 0,\n complete: () => {\n this.animations.delete(key);\n },\n });\n\n this.animations.set(key, animation);\n }\n\n private clearAnimations() {\n this.animations.forEach((animation) => animation.pause());\n this.animations.clear();\n this.animationCounter = 0;\n }\n\n @Watch('isMobile')\n onMobileChange() {\n this.setIcons();\n this.hostElement.style.removeProperty('width');\n this.hostElement.style.removeProperty('height');\n this.hostElement.style.removeProperty('min-height');\n this.onParentSizeChange();\n }\n\n @Watch('composition')\n onPositionChange() {\n this.setIcons();\n this.hostElement.style.removeProperty('width');\n this.hostElement.style.removeProperty('height');\n this.onParentSizeChange();\n }\n\n @Watch('hideOnCollapse')\n onHideOnCollapseChange(value: boolean) {\n this.onParentSizeChange();\n\n this.hideOnCollapseChanged.emit({\n slot: this.currentSlot,\n hideOnCollapse: value,\n });\n }\n\n @Watch('variant')\n onVariantChange(value: 'inline' \| 'floating') {\n this.floating = value === 'floating';\n\n this.variantChanged.emit({\n slot: this.currentSlot,\n variant: value,\n });\n }\n\n @Watch('borderless')\n onBorderlessChange(value: boolean) {\n this.borderlessChanged.emit({\n slot: this.currentSlot,\n borderless: value,\n });\n }\n\n @Watch('expanded')\n onExpandedChange() {\n this.onSizeChange();\n\n this.expandedChanged.emit({\n slot: this.currentSlot,\n expanded: this.expanded,\n });\n }\n\n @Watch('parentHeightPx')\n @Watch('parentWidthPx')\n onParentSizeChange() {\n this.clearAnimations();\n this.removePadding();\n\n if (this.expanded) {\n if (this.isMobile) {\n this.hostElement.style.height = '100%';\n } else {\n const expandPaneSize = this.getExpandPaneSize();\n\n if (this.isBottomTopPane) {\n this.hostElement.style.height = expandPaneSize;\n this.animateHorizontalPadding('8px', 0);\n } else {\n this.hostElement.style.width = expandPaneSize;\n this.animateVerticalPadding('8px', 0);\n }\n }\n\n this.showContent = true;\n } else {\n this.showContent = false;\n\n if (this.isMobile) {\n this.hostElement.style.height = this.hideOnCollapse\n ? '0'\n : this.collapsedPaneMobile;\n } else {\n if (this.isBottomTopPane) {\n this.hostElement.style.height = this.hideOnCollapse\n ? '0'\n : this.collapsedPane;\n } else {\n this.hostElement.style.width = this.hideOnCollapse\n ? '0'\n : this.collapsedPane;\n }\n }\n }\n }\n\n @Watch('size')\n onSizeChange() {\n if (this.expanded) {\n if (this.isMobile) {\n this.hostElement.style.minHeight = this.hideOnCollapse\n ? '0'\n : this.collapsedPaneMobile;\n this.animateHorizontalFadeIn('100%');\n } else {\n const expandPaneSize = this.getExpandPaneSize();\n\n if (this.isBottomTopPane) {\n this.hostElement.style.height = this.hideOnCollapse\n ? '0'\n : this.collapsedPane;\n this.animateHorizontalFadeIn(expandPaneSize);\n } else {\n this.hostElement.style.width = this.hideOnCollapse\n ? '0'\n : this.collapsedPane;\n this.animateVerticalFadeIn(expandPaneSize);\n }\n }\n } else {\n this.showContent = false;\n\n if (this.isMobile) {\n this.hostElement.style.height = this.collapsedPaneMobile;\n } else {\n if (this.isBottomTopPane) {\n this.animateHorizontalFadeIn(this.collapsedPane);\n } else {\n this.animateVerticalFadeIn(this.collapsedPane);\n }\n }\n }\n }\n\n render() {\n return (\n <Host\n class={{\n 'inline-color': !this.floating,\n 'mobile-overlay': this.expanded && this.isMobile,\n 'top-expanded': this.expanded && this.isMobileTop && this.isMobile,\n 'bottom-expanded':\n this.expanded && !this.isMobileTop && this.isMobile,\n 'top-bottom-pane': this.isBottomTopPane && !this.isMobile,\n 'left-right-pane': this.isLeftRightPane && !this.isMobile,\n [`${this.composition}-pane-border`]:\n !this.borderless && !this.isMobile && !this.floating,\n 'nav-left-border':\n !this.borderless &&\n !this.isMobile &&\n this.composition !== 'right' &&\n this.floating,\n 'mobile-border-top':\n !this.borderless &&\n this.isMobileTop &&\n this.isMobile &&\n !this.expanded &&\n !this.floating,\n 'mobile-border-bottom':\n !this.borderless &&\n !this.isMobileTop &&\n this.isMobile &&\n !this.expanded &&\n !this.floating,\n 'box-shadow': this.floating,\n 'aria-expanded': this.expanded,\n 'not-visible': this.hideOnCollapse && !this.expanded,\n }}\n >\n <aside\n class={{\n 'top-bottom-pane': this.isBottomTopPane && !this.isMobile,\n 'left-right-pane': this.isLeftRightPane && !this.isMobile,\n 'mobile-pane': this.isMobile,\n expanded: this.expanded,\n }}\n >\n <div\n id=\"title-div\"\n class={{\n title:\n !this.isMobile && !this.hideOnCollapse && !this.showContent,\n 'title-finished':\n !this.isMobile && !this.hideOnCollapse && this.showContent,\n 'title-expanded':\n !this.isMobile && !this.hideOnCollapse && this.expanded,\n 'title-hide-on-collapse': !this.isMobile && this.hideOnCollapse,\n 'title-mobile': this.isMobile,\n 'header-gap': !this.isMobile && !this.hideOnCollapse,\n }}\n >\n <ix-icon-button\n class=\"title-icon\"\n size=\"24\"\n icon={\n this.expanded\n ? this.isMobile \|\| this.hideOnCollapse\n ? 'close'\n : this.expandIcon\n : this.minimizeIcon\n }\n ghost\n onClick={() => {\n this.expanded = !this.expanded;\n }}\n aria-controls={this.composition + 'ToggleButton'}\n />\n <span\n class={{\n 'title-text': true,\n rotate:\n !this.expanded && !this.isMobile && this.isLeftRightPane,\n }}\n >\n {this.icon ? (\n <ix-icon size=\"24\" name={this.icon}></ix-icon>\n ) : null}\n <div class=\"title-text-overflow\">\n <ix-typography format=\"h4\">{this.heading}</ix-typography>\n </div>\n </span>\n </div>\n <div class=\"side-pane-content\" hidden={!this.showContent}>\n <slot></slot>\n </div>\n </aside>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/ix-pill.cjs.entry.js CHANGED Viewed

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-c6f0ac73.js');
+const index = require('./index-529f21c1.js');
-const pillCss = ":host{display:inline-block;position:relative;height:1.25rem;max-height:1.25rem;margin-left:0.25rem}: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}.container{display:inline-flex;width:inherit;box-sizing:border-box;position:relative;align-items:center;border-radius:100px;padding:0.5rem;height:2rem;max-height:2rem;cursor:default}.container .with-icon{margin-right:0.25rem}.container .hidden{display:none;width:0px;margin-right:0px}.container .close-button-container{display:inline-flex;margin-left:auto;padding-left:0.5rem}.container .slot-container{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.container.icon{padding-left:0.75rem;padding-right:0.75rem}.container.closable{padding-right:0.25rem}.container.primary{background-color:var(--theme-color-primary);color:var(--theme-chip-primary--color)}.container.primary .close-button{color:var(--theme-chip-primary--color);--ix-icon-button-color:var(--theme-chip-primary--color);pointer-events:auto}.container.primary.outline{color:var(--theme-chip-primary-outline--color);background-color:transparent;border:solid 1px var(--theme-chip-primary-outline--border-color)}.container.primary.outline .close-button{color:var(--theme-chip-primary-outline--color);--ix-icon-button-color:var(--theme-chip-primary-outline--color)}.container.outline{border-width:1px;border-style:solid}.container.alarm{color:var(--theme-color-alarm--contrast)}.container.alarm:not(.outline){background-color:var(--theme-color-alarm)}.container.alarm:not(.outline) .close-button{color:var(--theme-color-alarm--contrast);--ix-icon-button-color:var(--theme-color-alarm--contrast)}.container.alarm.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-alarm)}.container.critical{color:var(--theme-color-critical--contrast)}.container.critical:not(.outline){background-color:var(--theme-color-critical)}.container.critical:not(.outline) .close-button{color:var(--theme-color-critical--contrast);--ix-icon-button-color:var(--theme-color-critical--contrast)}.container.critical.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-critical)}.container.warning{color:var(--theme-color-warning--contrast)}.container.warning:not(.outline){background-color:var(--theme-color-warning)}.container.warning:not(.outline) .close-button{color:var(--theme-color-warning--contrast);--ix-icon-button-color:var(--theme-color-warning--contrast)}.container.warning.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-warning)}.container.info{color:var(--theme-color-info--contrast)}.container.info:not(.outline){background-color:var(--theme-color-info)}.container.info:not(.outline) .close-button{color:var(--theme-color-info--contrast);--ix-icon-button-color:var(--theme-color-info--contrast)}.container.info.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-info)}.container.neutral{color:var(--theme-color-neutral--contrast)}.container.neutral:not(.outline){background-color:var(--theme-color-neutral)}.container.neutral:not(.outline) .close-button{color:var(--theme-color-neutral--contrast);--ix-icon-button-color:var(--theme-color-neutral--contrast)}.container.neutral.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-neutral)}.container.success{color:var(--theme-color-success--contrast)}.container.success:not(.outline){background-color:var(--theme-color-success)}.container.success:not(.outline) .close-button{color:var(--theme-color-success--contrast);--ix-icon-button-color:var(--theme-color-success--contrast)}.container.success.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-success)}:host .container{height:100%;justify-content:center;padding-right:0.5rem}:host(.align-left) .container{justify-content:flex-start}";
+const pillCss = ":host{display:inline-block;position:relative;height:1.25rem;max-height:1.25rem;margin-left:0.25rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}: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}.container{display:inline-flex;width:inherit;box-sizing:border-box;position:relative;align-items:center;border-radius:100px;padding:0.5rem;height:2rem;max-height:2rem;cursor:default}.container .with-icon{margin-right:0.25rem}.container .hidden{display:none;width:0;margin-right:0}.container .close-button-container{display:inline-flex;margin-left:auto;padding-left:0.5rem}.container .slot-container{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.container.outline.icon{padding-left:calc(0.75rem - 1px)}.container.outline:not(.icon){padding-left:calc(0.5rem - 1px)}.container.outline.closable:not(.inactive){padding-right:calc(0.25rem - 1px)}.container.outline.closable.inactive,.container.outline:not(.closable){padding-right:calc(0.5rem - 1px)}.container.outline.icon:not(.closable){padding-right:calc(0.75rem - 1px)}.container:not(.outline).icon{padding-left:0.75rem}.container:not(.outline):not(.icon){padding-left:0.5rem}.container:not(.outline).closable:not(.inactive){padding-right:0.25rem}.container:not(.outline).closable.inactive{padding-right:0.5rem}.container:not(.outline):not(.closable).icon{padding-right:0.75rem}.container:not(.outline):not(.closable):not(.icon){padding-right:0.5rem}.container.primary{background-color:var(--theme-color-primary);color:var(--theme-chip-primary--color)}.container.primary .close-button{color:var(--theme-chip-primary--color);--ix-icon-button-color:var(--theme-chip-primary--color);pointer-events:auto}.container.primary.outline{color:var(--theme-chip-primary-outline--color);background-color:transparent;border:solid 1px var(--theme-chip-primary-outline--border-color)}.container.primary.outline .close-button{color:var(--theme-chip-primary-outline--color);--ix-icon-button-color:var(--theme-chip-primary-outline--color)}.container.outline{border-width:1px;border-style:solid}.container.alarm{color:var(--theme-color-alarm--contrast)}.container.alarm:not(.outline){background-color:var(--theme-color-alarm)}.container.alarm:not(.outline) .close-button{color:var(--theme-color-alarm--contrast);--ix-icon-button-color:var(--theme-color-alarm--contrast)}.container.alarm.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-alarm)}.container.critical{color:var(--theme-color-critical--contrast)}.container.critical:not(.outline){background-color:var(--theme-color-critical)}.container.critical:not(.outline) .close-button{color:var(--theme-color-critical--contrast);--ix-icon-button-color:var(--theme-color-critical--contrast)}.container.critical.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-critical)}.container.warning{color:var(--theme-color-warning--contrast)}.container.warning:not(.outline){background-color:var(--theme-color-warning)}.container.warning:not(.outline) .close-button{color:var(--theme-color-warning--contrast);--ix-icon-button-color:var(--theme-color-warning--contrast)}.container.warning.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-warning)}.container.info{color:var(--theme-color-info--contrast)}.container.info:not(.outline){background-color:var(--theme-color-info)}.container.info:not(.outline) .close-button{color:var(--theme-color-info--contrast);--ix-icon-button-color:var(--theme-color-info--contrast)}.container.info.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-info)}.container.neutral{color:var(--theme-color-neutral--contrast)}.container.neutral:not(.outline){background-color:var(--theme-color-neutral)}.container.neutral:not(.outline) .close-button{color:var(--theme-color-neutral--contrast);--ix-icon-button-color:var(--theme-color-neutral--contrast)}.container.neutral.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-neutral)}.container.success{color:var(--theme-color-success--contrast)}.container.success:not(.outline){background-color:var(--theme-color-success)}.container.success:not(.outline) .close-button{color:var(--theme-color-success--contrast);--ix-icon-button-color:var(--theme-color-success--contrast)}.container.success.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-success)}:host .container{height:100%;justify-content:center;padding-right:0.5rem !important}:host(.align-left) .container{justify-content:flex-start}";
 const IxPillStyle0 = pillCss;
 const Pill = class {
@@ -27,13 +27,13 @@ const Pill = class {
                 [this.outline ? 'borderColor' : 'backgroundColor']: this.background,
             };
         }
-        return (index.h(index.Host, { key: 'd7aa88991ef6b8cf39358e65a3c3745d9b6cf112', style: this.variant === 'custom'
+        return (index.h(index.Host, { key: '1d4d88d976564778835cd02e28d5ede6fe4dd6f7', style: this.variant === 'custom'
                 ? {
                     '--ix-icon-button-color': (_b = this.pillColor) !== null && _b !== void 0 ? _b : this.color,
                 }
                 : {}, title: this.el.textContent, class: {
                 'align-left': this.alignLeft,
-            } }, index.h("div", { key: '490ecb6d8560e39541d50b5d538608adef939dcf', style: Object.assign({}, customStyle), class: {
+            } }, index.h("div", { key: '74474d69acc5d47b9bf6c5ebe12f676155a9e87d', style: Object.assign({}, customStyle), class: {
                 container: true,
                 outline: this.outline,
                 inactive: false,
@@ -47,10 +47,10 @@ const Pill = class {
                 custom: this.variant === 'custom',
                 closable: false,
                 icon: !!this.icon,
-            } }, index.h("ix-icon", { key: 'd615b73a2bdd35fa67409e0783324abd2fc02f21', class: {
+            } }, index.h("ix-icon", { key: 'c70dcfe5f55c77484cf3300dca53f6a4e55d5caf', class: {
                 'with-icon': true,
                 hidden: this.icon === undefined || this.icon === '',
-            }, name: this.icon, size: '16' }), index.h("span", { key: '8c4f149571ae115af0cc264634f03633988d7871', class: "slot-container" }, index.h("slot", { key: '582ff33fd2b1cd6de42d4febbcd7f2ad31be0e02' })))));
+            }, name: this.icon, size: '16' }), index.h("span", { key: 'b3d056721cb891a986ac3196a9fcf049c8b366f9', class: "slot-container" }, index.h("slot", { key: 'a42505aafc70d545e3ff8020c80f67067b3eac8c' })))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/ix-pill.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ix-pill.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,OAAO,GAAG,~~owIAAowI~~,CAAC;~~AACrxI~~,qBAAe,OAAO;;MCeT,IAAI;;;uBAcA,SAAS;uBAKN,KAAK;;;;;yBA4BH,KAAK;;IAEzB,MAAM;;QACJ,IAAI,WAAW,GAAG,EAAE,CAAC;QAErB,IAAI,IAAI,CAAC,OAAO,KAAK,QAAQ,EAAE;YAC7B,WAAW,GAAG;gBACZ,KAAK,EAAE,MAAA,IAAI,CAAC,SAAS,mCAAI,IAAI,CAAC,KAAK;gBACnC,CAAC,IAAI,CAAC,OAAO,GAAG,aAAa,GAAG,iBAAiB,GAAG,IAAI,CAAC,UAAU;aACpE,CAAC;SACH;QACD,QACEA,QAACC,UAAI,qDACH,KAAK,EACH,IAAI,CAAC,OAAO,KAAK,QAAQ;kBACrB;oBACE,wBAAwB,EAAE,MAAA,IAAI,CAAC,SAAS,mCAAI,IAAI,CAAC,KAAK;iBACvD;kBACD,EAAE,EAER,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,WAAW,EAC1B,KAAK,EAAE;gBACL,YAAY,EAAE,IAAI,CAAC,SAAS;aAC7B,IAEDD,kEACE,KAAK,oBAAO,WAAW,GACvB,KAAK,EAAE;gBACL,SAAS,EAAE,IAAI;gBACf,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,QAAQ,EAAE,KAAK;gBACf,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;gBAC/B,QAAQ,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU;gBACrC,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;gBAC7B,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;gBACnC,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;gBACnC,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;gBACnC,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;gBACnC,MAAM,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;gBACjC,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI;aAClB,IAEDA,sEACE,KAAK,EAAE;gBACL,WAAW,EAAE,IAAI;gBACjB,MAAM,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,EAAE;aACpD,EACD,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,GACV,EACFA,mEAAM,KAAK,EAAC,gBAAgB,IAC1BA,oEAAa,CACR,CACH,CACD,EACP;KACH;;;;;;;","names":["h","Host"],"sources":["src/components/pill/pill.scss?tag=ix-pill&encapsulation=shadow","src/components/pill/pill.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 'mixins/shadow-dom/component';\n\n@import './../chip/chip-mixin';\n@import 'common-variables';\n@import 'mixins/text-truncation';\n\n:host {\n @include ix-component;\n display: inline-block;\n position: relative;\n height: 1.25rem;\n max-height: 1.25rem;\n margin-left: 0.25rem;\n}\n\n@include chip-container(false);\n\n:host {\n .container {\n height: 100%;\n justify-content: center;\n padding-right: 0.5rem;\n }\n}\n\n:host(.align-left) {\n .container {\n justify-content: flex-start;\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';\n\n@Component({\n tag: 'ix-pill',\n styleUrl: 'pill.scss',\n shadow: true,\n})\nexport class Pill {\n @Element() el: HTMLIxPillElement;\n\n /\n Pill variant\n /\n @Prop({ reflect: true }) variant:\n \| 'primary'\n \| 'alarm'\n \| 'critical'\n \| 'warning'\n \| 'info'\n \| 'neutral'\n \| 'success'\n \| 'custom' = 'primary';\n\n /\n Show pill as outline\n /\n @Prop() outline = false;\n\n /\n Show icon\n /\n @Prop() icon: string \| undefined;\n\n /\n Custom color for pill. Only working for `variant='custom'`\n /\n @Prop() background: string \| undefined;\n\n /\n Custom font color for pill. Only working for `variant='custom'`\n \n @deprecated since 2.1.0 use `pill-color`\n /\n // eslint-disable-next-line @stencil-community/reserved-member-names\n @Prop() color: string \| undefined;\n\n /\n Custom font color for pill. Only working for `variant='custom'`\n /\n @Prop() pillColor: string \| undefined;\n\n /\n Align pill content left\n */\n @Prop() alignLeft = false;\n\n render() {\n let customStyle = {};\n\n if (this.variant === 'custom') {\n customStyle = {\n color: this.pillColor ?? this.color,\n [this.outline ? 'borderColor' : 'backgroundColor']: this.background,\n };\n }\n return (\n <Host\n style={\n this.variant === 'custom'\n ? {\n '--ix-icon-button-color': this.pillColor ?? this.color,\n }\n : {}\n }\n title={this.el.textContent}\n class={{\n 'align-left': this.alignLeft,\n }}\n >\n <div\n style={{ ...customStyle }}\n class={{\n container: true,\n outline: this.outline,\n inactive: false,\n alarm: this.variant === 'alarm',\n critical: this.variant === 'critical',\n info: this.variant === 'info',\n neutral: this.variant === 'neutral',\n primary: this.variant === 'primary',\n success: this.variant === 'success',\n warning: this.variant === 'warning',\n custom: this.variant === 'custom',\n closable: false,\n icon: !!this.icon,\n }}\n >\n <ix-icon\n class={{\n 'with-icon': true,\n hidden: this.icon === undefined \|\| this.icon === '',\n }}\n name={this.icon}\n size={'16'}\n />\n <span class=\"slot-container\">\n <slot></slot>\n </span>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-pill.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,OAAO,GAAG,ojKAAojK,CAAC;AACrkK,qBAAe,OAAO;;MCeT,IAAI;;;uBAcA,SAAS;uBAKN,KAAK;;;;;yBA4BH,KAAK;;IAEzB,MAAM;;QACJ,IAAI,WAAW,GAAG,EAAE,CAAC;QAErB,IAAI,IAAI,CAAC,OAAO,KAAK,QAAQ,EAAE;YAC7B,WAAW,GAAG;gBACZ,KAAK,EAAE,MAAA,IAAI,CAAC,SAAS,mCAAI,IAAI,CAAC,KAAK;gBACnC,CAAC,IAAI,CAAC,OAAO,GAAG,aAAa,GAAG,iBAAiB,GAAG,IAAI,CAAC,UAAU;aACpE,CAAC;SACH;QACD,QACEA,QAACC,UAAI,qDACH,KAAK,EACH,IAAI,CAAC,OAAO,KAAK,QAAQ;kBACrB;oBACE,wBAAwB,EAAE,MAAA,IAAI,CAAC,SAAS,mCAAI,IAAI,CAAC,KAAK;iBACvD;kBACD,EAAE,EAER,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,WAAW,EAC1B,KAAK,EAAE;gBACL,YAAY,EAAE,IAAI,CAAC,SAAS;aAC7B,IAEDD,kEACE,KAAK,oBAAO,WAAW,GACvB,KAAK,EAAE;gBACL,SAAS,EAAE,IAAI;gBACf,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,QAAQ,EAAE,KAAK;gBACf,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;gBAC/B,QAAQ,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU;gBACrC,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;gBAC7B,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;gBACnC,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;gBACnC,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;gBACnC,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;gBACnC,MAAM,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;gBACjC,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI;aAClB,IAEDA,sEACE,KAAK,EAAE;gBACL,WAAW,EAAE,IAAI;gBACjB,MAAM,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,EAAE;aACpD,EACD,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,GACV,EACFA,mEAAM,KAAK,EAAC,gBAAgB,IAC1BA,oEAAa,CACR,CACH,CACD,EACP;KACH;;;;;;;","names":["h","Host"],"sources":["src/components/pill/pill.scss?tag=ix-pill&encapsulation=shadow","src/components/pill/pill.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 'mixins/shadow-dom/component';\n\n@import './../chip/chip-mixin';\n@import 'common-variables';\n@import 'mixins/text-truncation';\n\n:host {\n @include ix-component;\n display: inline-block;\n position: relative;\n height: 1.25rem;\n max-height: 1.25rem;\n margin-left: 0.25rem;\n}\n\n@include chip-container(false);\n\n:host {\n .container {\n height: 100%;\n justify-content: center;\n padding-right: 0.5rem !important;\n }\n}\n\n:host(.align-left) {\n .container {\n justify-content: flex-start;\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';\n\n@Component({\n tag: 'ix-pill',\n styleUrl: 'pill.scss',\n shadow: true,\n})\nexport class Pill {\n @Element() el: HTMLIxPillElement;\n\n /\n Pill variant\n /\n @Prop({ reflect: true }) variant:\n \| 'primary'\n \| 'alarm'\n \| 'critical'\n \| 'warning'\n \| 'info'\n \| 'neutral'\n \| 'success'\n \| 'custom' = 'primary';\n\n /\n Show pill as outline\n /\n @Prop() outline = false;\n\n /\n Show icon\n /\n @Prop() icon: string \| undefined;\n\n /\n Custom color for pill. Only working for `variant='custom'`\n /\n @Prop() background: string \| undefined;\n\n /\n Custom font color for pill. Only working for `variant='custom'`\n \n @deprecated since 2.1.0 use `pill-color`\n /\n // eslint-disable-next-line @stencil-community/reserved-member-names\n @Prop() color: string \| undefined;\n\n /\n Custom font color for pill. Only working for `variant='custom'`\n /\n @Prop() pillColor: string \| undefined;\n\n /\n Align pill content left\n */\n @Prop() alignLeft = false;\n\n render() {\n let customStyle = {};\n\n if (this.variant === 'custom') {\n customStyle = {\n color: this.pillColor ?? this.color,\n [this.outline ? 'borderColor' : 'backgroundColor']: this.background,\n };\n }\n return (\n <Host\n style={\n this.variant === 'custom'\n ? {\n '--ix-icon-button-color': this.pillColor ?? this.color,\n }\n : {}\n }\n title={this.el.textContent}\n class={{\n 'align-left': this.alignLeft,\n }}\n >\n <div\n style={{ ...customStyle }}\n class={{\n container: true,\n outline: this.outline,\n inactive: false,\n alarm: this.variant === 'alarm',\n critical: this.variant === 'critical',\n info: this.variant === 'info',\n neutral: this.variant === 'neutral',\n primary: this.variant === 'primary',\n success: this.variant === 'success',\n warning: this.variant === 'warning',\n custom: this.variant === 'custom',\n closable: false,\n icon: !!this.icon,\n }}\n >\n <ix-icon\n class={{\n 'with-icon': true,\n hidden: this.icon === undefined \|\| this.icon === '',\n }}\n name={this.icon}\n size={'16'}\n />\n <span class=\"slot-container\">\n <slot></slot>\n </span>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/ix-playground-internal.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-c6f0ac73.js');
+const index = require('./index-529f21c1.js');
 const playgroundCss = ".sc-ix-playground-internal-h{display:block;position:relative;width:100vw;height:100vh;padding:0rem 0rem 0rem 0rem}";
 const IxPlaygroundInternalStyle0 = playgroundCss;
@@ -12,7 +12,7 @@ const PlaygroundInternal = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return index.h(index.Host, { key: '64dc9d49b33337f3f1fbfef272dbe26bc08a17a8' });
+        return index.h(index.Host, { key: 'cb88d03e375d222d5903d13ca1fc154d9af86898' });
     }
 };
 PlaygroundInternal.style = IxPlaygroundInternalStyle0;

package/dist/cjs/ix-push-card.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-c6f0ac73.js');
+const index = require('./index-529f21c1.js');
 const pushCardCss = ":host{display:block;position:relative}:host .icon{transform:scale(1.25)}:host .notification{font-size:40px}:host ix-card-content{height:11rem}";
 const IxPushCardStyle0 = pushCardCss;
@@ -22,7 +22,7 @@ const PushCard = class {
         const color = this.variant === 'insight' || this.variant === 'notification'
             ? 'std'
             : undefined;
-        return (index.h(index.Host, { key: 'e24565973d07f9e229c36913ca3ac89a50fa203a' }, index.h("ix-card", { key: '44282cb66fe975ec987c732564b1a1b2f157fb5b', variant: this.variant }, index.h("ix-card-content", { key: 'a81102518c997300dd706eaaf9be2c409dc2cb57' }, index.h("ix-card-title", { key: 'cfe94c332de47b3457f713e601d5528da88eb9d6' }, this.icon ? (index.h("ix-icon", { class: 'icon', name: this.icon, size: "32" })) : null, index.h("span", { key: '70ae6659d04f30ba68a58f8cdf0fde3f33c3de01', class: 'notification' }, (_a = this.notification) !== null && _a !== void 0 ? _a : 0), index.h("slot", { key: 'b16c8760f377f9f5118cf2d6b09f0ed831c4d7bd', name: "title-action" })), index.h("ix-typography", { key: '861cc81ab636b168fbd6f931095d5128a2a4732b', color: color, format: "h4" }, this.heading), index.h("ix-typography", { key: '310464f9afd7994ccc5c51a8154387e59205b2bb', color: color }, this.subheading)), index.h("ix-card-accordion", { key: 'e070cee2f6ded1b56b92d3fc1ed5028cfe2d0d5d', collapse: this.collapse }, index.h("slot", { key: 'd8b198392bd09b45d2f0c6f6579e333c5f4d96e0' })))));
+        return (index.h(index.Host, { key: '9ba9fd8e6cc9f2b74e89fbbcd0c09a04aca45ac2' }, index.h("ix-card", { key: '913618b3fc69c1e59c3bbeb4c92569b2754ff3ae', variant: this.variant }, index.h("ix-card-content", { key: 'bb75a940ce3ac891fe947f4ed9e542c36a492f92' }, index.h("ix-card-title", { key: '37f4faab2368f341dd835fffe64b5915e1c4b322' }, this.icon ? (index.h("ix-icon", { class: 'icon', name: this.icon, size: "32" })) : null, index.h("span", { key: '42059a2ed174f15fdcce1ddb599bc831afade5b1', class: 'notification' }, (_a = this.notification) !== null && _a !== void 0 ? _a : 0), index.h("slot", { key: '9e3b8df6148f3b8e3d577d8ece5253b14c85a0dd', name: "title-action" })), index.h("ix-typography", { key: 'b7473e9fd9fdaee3045ec4884544469a9a6457fe', color: color, format: "h4" }, this.heading), index.h("ix-typography", { key: '26c212e7f6111df4d353525fda6b3a76ee7dea3c', color: color }, this.subheading)), index.h("ix-card-accordion", { key: 'a779591ee7405f4a725f1c04abbc7223064ee885', collapse: this.collapse }, index.h("slot", { key: '5d42faa67c254a1d8541c525cb8e0e08e6b0d095' })))));
     }
 };
 PushCard.style = IxPushCardStyle0;

package/dist/cjs/ix-select.cjs.entry.js CHANGED Viewed

@@ -2,12 +2,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-c6f0ac73.js');
+const index = require('./index-529f21c1.js');
 const focus = require('./focus-9c8ffbb0.js');
-const listener = require('./listener-d27acb41.js');
+const listener = require('./listener-bc3e7c0c.js');
 const mutationObserver = require('./mutation-observer-babb20a5.js');
-const selectCss = ":host{display:inline-block;position:relative;min-height:2rem;height:auto;border-radius:var(--theme-input--border-radius)}: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 .d-none{display:none}:host .select{position:relative;display:flex;align-items:center;background-color:var(--theme-input--background);border:var(--theme-input--border-thickness) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);padding:0 0 0 0.5rem;box-shadow:var(--theme-inset-shadow-1) !important}:host .select:not(.disabled):not(:disabled){cursor:pointer}:host .select:not(.disabled):not(:disabled):hover{background-color:var(--theme-input--background--hover);border-color:var(--theme-input--border-color--hover)}:host .select:focus-within{background-color:var(--theme-input--background--focus);border-color:var(--theme-input--border-color--focus);outline:1px solid #119fff;outline-offset:var(--theme-input--focus--outline-offset)}:host .select.readonly,:host .select.disabled{box-shadow:none !important;border:none;border-radius:0;cursor:pointer}:host .select.readonly,:host .select.readonly:hover,:host .select.readonly:active,:host .select.disabled,:host .select.disabled:hover,:host .select.disabled:active{background-color:transparent !important}:host .select.readonly:focus,:host .select.readonly:focus-within,:host .select.readonly:focus-visible,:host .select.disabled:focus,:host .select.disabled:focus-within,:host .select.disabled:focus-visible{outline:none}:host .select.readonly input:focus,:host .select.readonly input:focus-visible,:host .select.disabled input:focus,:host .select.disabled input:focus-visible{outline:none}:host .select.disabled{border-bottom:var(--theme-input--border-thickness) solid var(--theme-color-weak-bdr)}:host .select.disabled input{color:var(--theme-color-weak-text)}:host .select.readonly{border-bottom:var(--theme-input--border-thickness) solid var(--theme-color-soft-bdr)}:host .select.readonly input{color:var(--theme-color-std-text)}:host .hidden{display:none !important}:host .trigger{display:flex;align-items:center;flex-grow:1;height:100%}:host .input-container{display:flex;position:relative;align-items:flex-start;width:100%;height:100%}:host .input-container .chips{position:relative;display:flex;align-items:center;flex-wrap:wrap;height:100%;max-height:3.5rem;flex-grow:1;overflow-y:auto}:host .input-container .chips>ix-filter-chip{margin:0.1rem}:host .input-container input{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);background:transparent;height:1.75rem;width:100%}:host .input-container input,:host .input-container input:hover,:host .input-container input:focus-visible{border:none;outline:none}:host .input-container input::-moz-placeholder{color:var(--theme-input-select-icon--color)}:host .input-container input::placeholder{color:var(--theme-input-select-icon--color)}:host .input-container input.hide-placeholder::-moz-placeholder{opacity:0}:host .input-container input.hide-placeholder::placeholder{opacity:0}:host .dropdown-visible{--ix-icon-button-color:var(--theme-color-dynamic--hover)}:host .add-item{display:flex;justify-content:flex-start;align-items:center;position:relative;width:100%}:host .select-list-header{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;height:2rem;color:var(--theme-select-list-item-hint--color);margin:0 0.5rem 0 1rem}";
+const selectCss = ":host{display:inline-block;position:relative;min-height:2rem;height:auto;border-radius:var(--theme-input--border-radius)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}: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 .d-none{display:none}:host .select{position:relative;display:flex;align-items:center;background-color:var(--theme-input--background);border:var(--theme-input--border-thickness) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);padding:0 0 0 0.5rem;box-shadow:var(--theme-inset-shadow-1) !important}:host .select:not(.disabled):not(:disabled){cursor:pointer}:host .select:not(.disabled):not(:disabled):hover{background-color:var(--theme-input--background--hover);border-color:var(--theme-input--border-color--hover)}:host .select:focus-within{background-color:var(--theme-input--background--focus);border-color:var(--theme-input--border-color--focus);outline:1px solid #119fff;outline-offset:var(--theme-input--focus--outline-offset)}:host .select.readonly,:host .select.disabled{box-shadow:none !important;border:none;border-radius:0;cursor:pointer}:host .select.readonly,:host .select.readonly:hover,:host .select.readonly:active,:host .select.disabled,:host .select.disabled:hover,:host .select.disabled:active{background-color:transparent !important}:host .select.readonly:focus,:host .select.readonly:focus-within,:host .select.readonly:focus-visible,:host .select.disabled:focus,:host .select.disabled:focus-within,:host .select.disabled:focus-visible{outline:none}:host .select.readonly input:focus,:host .select.readonly input:focus-visible,:host .select.disabled input:focus,:host .select.disabled input:focus-visible{outline:none}:host .select.disabled{border-bottom:var(--theme-input--border-thickness) solid var(--theme-color-weak-bdr)}:host .select.disabled input{color:var(--theme-color-weak-text)}:host .select.readonly{border-bottom:var(--theme-input--border-thickness) solid var(--theme-color-soft-bdr)}:host .select.readonly input{color:var(--theme-color-std-text)}:host .hidden{display:none !important}:host .trigger{display:flex;align-items:center;flex-grow:1;height:100%}:host .input-container{display:flex;position:relative;align-items:flex-start;width:100%;height:100%}:host .input-container .chips{position:relative;display:flex;align-items:center;flex-wrap:wrap;height:100%;max-height:3.5rem;flex-grow:1;overflow-y:auto}:host .input-container .chips>ix-filter-chip{margin:0.1rem}:host .input-container input{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);background:transparent;height:1.75rem;width:100%}:host .input-container input,:host .input-container input:hover,:host .input-container input:focus-visible{border:none;outline:none}:host .input-container input::-moz-placeholder{color:var(--theme-input-select-icon--color)}:host .input-container input::placeholder{color:var(--theme-input-select-icon--color)}:host .input-container input.hide-placeholder::-moz-placeholder{opacity:0}:host .input-container input.hide-placeholder::placeholder{opacity:0}:host .dropdown-visible{--ix-icon-button-color:var(--theme-color-dynamic--hover)}:host .add-item{display:flex;justify-content:flex-start;align-items:center;position:relative;width:100%}:host .select-list-header{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;height:2rem;color:var(--theme-select-list-item-hint--color);margin:0 0.5rem 0 1rem}";
 const IxSelectStyle0 = selectCss;
 /*
@@ -131,13 +131,21 @@ const Select = class {
         }
     }
     itemClick(newId) {
-        this.value = this.toggleValue(newId);
+        const value = this.toggleValue(newId);
+        const defaultPrevented = this.emitValueChange(value);
+        if (defaultPrevented) {
+            return;
+        }
+        this.value = value;
         this.updateSelection();
-        this.emitValueChange();
     }
     emitAddItem(value) {
         if (value === undefined || value.trim() === '') {
-            return;
+            return false;
+        }
+        const { defaultPrevented } = this.addItem.emit(value);
+        if (defaultPrevented) {
+            return true;
         }
         const newItem = document.createElement('ix-select-item');
         newItem.value = value;
@@ -145,7 +153,7 @@ const Select = class {
         this.customItemsContainerRef.appendChild(newItem);
         this.clearInput();
         this.itemClick(value);
-        this.addItem.emit(value);
+        return false;
     }
     toggleValue(itemValue) {
         if (!this.isMultipleMode) {
@@ -172,12 +180,14 @@ const Select = class {
             ids = Array.isArray(this.value) ? [...this.value] : [this.value];
         }
         this.items.forEach((item) => {
-            item.selected = ids.some(
-            // Check can be removed if value is type of string in future releases
-            (i) => i ===
-                (item.value !== undefined && item.value !== null
-                    ? item.value.toString()
-                    : ''));
+            item.selected = ids.some((i) => {
+                if (typeof i !== typeof item.value) {
+                    return i.toString() === item.value.toString();
+                }
+                else {
+                    return i === item.value;
+                }
+            });
         });
         this.selectedLabels = this.selectedItems.map((item) => item.label);
         if (this.isSingleMode && ((_a = this.selectedLabels) === null || _a === void 0 ? void 0 : _a.length)) {
@@ -187,14 +197,18 @@ const Select = class {
         }
         this.inputValue = null;
     }
-    emitValueChange() {
-        this.valueChange.emit(this.value);
-        if (!this.value) {
+    emitValueChange(value) {
+        const { defaultPrevented } = this.valueChange.emit(value);
+        if (defaultPrevented) {
+            return true;
+        }
+        if (!value) {
             this.itemSelectionChange.emit(null);
         }
         else {
-            this.itemSelectionChange.emit(Array.isArray(this.value) ? this.value : [this.value]);
+            this.itemSelectionChange.emit(Array.isArray(value) ? value : [value]);
         }
+        return false;
     }
     componentDidLoad() {
         this.inputRef.addEventListener('input', () => {
@@ -256,7 +270,10 @@ const Select = class {
         }
         let item;
         if (this.editable && !this.itemExists(this.inputFilterText)) {
-            this.emitAddItem(this.inputFilterText);
+            const defaultPrevented = this.emitAddItem(this.inputFilterText);
+            if (defaultPrevented) {
+                return;
+            }
             item = this.items[this.items.length - 1];
         }
         if (item) {
@@ -431,7 +448,7 @@ const Select = class {
     }
     render() {
         var _a, _b, _c;
-        return (index.h(index.Host, { key: '7708ebeef204960e387864c06de4cf3d0d92620b' }, index.h("div", { key: '76ae70f1d3e1c3988a8db625b8c41626dcc0b28e', class: {
+        return (index.h(index.Host, { key: 'ef836653267a38d82ead34cf82285997083f4086' }, index.h("div", { key: '23e903c9849f58f70d9c843a7258f913d6811cf2', class: {
                 select: true,
                 disabled: this.disabled,
                 readonly: this.readonly,
@@ -439,13 +456,13 @@ const Select = class {
                 this.dropdownAnchor = ref;
                 if (!this.editable)
                     this.dropdownWrapperRef = ref;
-            } }, index.h("div", { key: '4cc234c24f76895f3dbc4a004c748352ef8aaa33', class: "input-container" }, index.h("div", { key: '066c71f9a1ead8f39685ea66fb1c83c6ad45f6a6', class: "chips" }, this.isMultipleMode
+            } }, index.h("div", { key: '56b38a998a44ddc6b8f380cc049e813be30ad711', class: "input-container" }, index.h("div", { key: 'b3e152d2ab35f3e2bcf2ac8c8df4cb3bc97f6e3c', class: "chips" }, this.isMultipleMode
             ? (_a = this.selectedItems) === null || _a === void 0 ? void 0 : _a.map((item) => (index.h("ix-filter-chip", { disabled: this.disabled || this.readonly, key: item.value, onCloseClick: (e) => {
                     e.preventDefault();
                     e.stopPropagation();
                     this.itemClick(item.value);
                 } }, item.label)))
-            : '', index.h("div", { key: '513a21a42da236852e5baa0dd15246f6108fcb0e', class: "trigger" }, index.h("input", { key: '7e059a58466f1ef24af5465a31842dc373be681c', autocomplete: "off", "data-testid": "input", disabled: this.disabled, readOnly: this.readonly, type: "text", class: {
+            : '', index.h("div", { key: 'f411e24b3c4512731593a4afd5c51f0223254cc9', class: "trigger" }, index.h("input", { key: '3c16a408ed58a3d2430ed86df32b6d990acb2b49', autocomplete: "off", "data-testid": "input", disabled: this.disabled, readOnly: this.readonly, type: "text", class: {
                 'allow-clear': this.allowClear && !!((_b = this.selectedLabels) === null || _b === void 0 ? void 0 : _b.length),
             }, placeholder: this.placeholderValue(), value: this.inputValue, ref: (ref) => (this.inputRef = ref), onBlur: (e) => this.onInputBlur(e), onFocus: () => {
                 this.navigationItem = undefined;
@@ -457,21 +474,22 @@ const Select = class {
             } })) : null, this.disabled || this.readonly ? null : (index.h("ix-icon-button", { "data-select-dropdown": true, class: { 'dropdown-visible': this.dropdownShow }, icon: "chevron-down-small", ghost: true, ref: (ref) => {
                 if (this.editable)
                     this.dropdownWrapperRef = ref;
-            } })))))), index.h("ix-dropdown", { key: '90d7f4d393e170384c3849a81cc2d0f9cafdaba4', ref: (ref) => (this.dropdownRef = ref), show: this.dropdownShow, closeBehavior: this.isMultipleMode ? 'outside' : 'both', class: {
+            } })))))), index.h("ix-dropdown", { key: '6c838166f4366d760f30dc102d3dad4611b369b5', ref: (ref) => (this.dropdownRef = ref), show: this.dropdownShow, closeBehavior: this.isMultipleMode ? 'outside' : 'both', class: {
                 'd-none': this.disabled || this.readonly,
             }, anchor: this.dropdownAnchor, trigger: this.dropdownWrapperRef, onShowChanged: (e) => this.dropdownVisibilityChanged(e), placement: "bottom-start", overwriteDropdownStyle: async () => {
                 return {
                     minWidth: `${this.hostElement.clientWidth}px`,
                 };
-            } }, index.h("div", { key: '5ca9e64a4bd8b566e33717f2d2bac21f86638aeb', class: {
+            } }, index.h("div", { key: '8f7b41436b7f15311dd4d46cbacbb95879de501e', class: {
                 'select-list-header': true,
                 hidden: this.hideListHeader || this.isDropdownEmpty,
-            }, title: this.i18nSelectListHeader }, this.i18nSelectListHeader), index.h("slot", { key: 'c2b10c1b09dd64eb0ab0a6bc51d43f98e876031a' }), index.h("div", { key: 'a7076d2f894af20584a45109b397b0362ea6f6a5', ref: (ref) => (this.customItemsContainerRef = ref), class: "d-contents" }), this.isAddItemVisible() ? (index.h("ix-dropdown-item", { "data-testid": "add-item", icon: 'plus', class: {
+            }, title: this.i18nSelectListHeader, onClick: (e) => e.preventDefault() }, this.i18nSelectListHeader), index.h("slot", { key: 'dc2913881d407f2cdaaa30efc15fa05193117b1c' }), index.h("div", { key: '706abca5e8fef621d36b560b6ca5629c235a6a32', ref: (ref) => (this.customItemsContainerRef = ref), class: "d-contents" }), this.isAddItemVisible() ? (index.h("ix-dropdown-item", { "data-testid": "add-item", icon: 'plus', class: {
                 'add-item': true,
             }, label: this.inputFilterText, onItemClick: (e) => {
                 e.preventDefault();
-                e.stopPropagation();
-                this.emitAddItem(this.inputFilterText);
+                if (this.emitAddItem(this.inputFilterText)) {
+                    e.stopPropagation();
+                }
             }, onFocus: () => (this.navigationItem = this.addItemRef), ref: (ref) => {
                 this.addItemRef = ref;
             } })) : null, this.isDropdownEmpty && !this.editable ? (index.h("div", { class: "select-list-header" }, this.i18nNoMatches)) : (''))));