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

@siemens/ix 3.0.0-alpha.4 → 3.0.0

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

Files changed (1093) hide show

package/dist/siemens-ix/ix-icon-button.ix-spinner.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ix-icon-button.ix-spinner.entry.esm.js","sources":["src/components/icon-button/icon-button.scss?tag=ix-icon-button&encapsulation=shadow","src/components/icon-button/icon-button.tsx","src/components/spinner/spinner.scss?tag=ix-spinner&encapsulation=shadow","src/components/spinner/spinner.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 './icon-button-mixin.scss';\n\n@include base-icon-button;\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 { BaseButtonProps } from '../button/base-button';\nimport { ButtonVariant } from '../button/button';\nimport { BaseIconButton } from '../icon-button/base-icon-button';\nimport { getFallbackLabelFromIconName } from '../utils/a11y';\n\nexport type IconButtonVariant = ButtonVariant;\n\n@Component({\n tag: 'ix-icon-button',\n styleUrl: 'icon-button.scss',\n shadow: true,\n})\nexport class IconButton {\n @Element() hostElement!: HTMLIxIconButtonElement;\n\n /\n Accessibility label for the icon button\n * Will be set as aria-label on the nested HTML button element\n \n @since 2.1.0\n /\n @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;\n\n /\n Variant of button\n * @since 2.3.0 - variant danger\n /\n @Prop() variant: IconButtonVariant = 'secondary';\n\n /\n Button outline\n /\n @Prop() outline: boolean = false;\n\n /\n Button invisible\n /\n @Prop() ghost: boolean = false;\n\n /\n Button in oval shape\n /\n @Prop() oval: boolean = false;\n\n /\n Icon name\n /\n @Prop() icon?: string;\n\n /\n Size of icon in button\n \n /\n @Prop() size: '24' \| '16' \| '12' = '24';\n\n /*\n Color of icon in button\n /\n @Prop() iconColor?: string;\n\n /\n Disabled\n /\n @Prop() disabled = false;\n\n /\n Type of the button\n /\n @Prop() type: 'button' \| 'submit' = 'button';\n\n /\n Loading button\n \n @since 2.0.0\n /\n @Prop() loading = false;\n\n /\n Temp. workaround until stencil issue is fixed (https://github.com/ionic-team/stencil/issues/2284)\n /\n submitButtonElement!: HTMLButtonElement;\n\n componentDidLoad() {\n if (this.type === 'submit') {\n const submitButton = document.createElement('button');\n submitButton.style.display = 'none';\n submitButton.type = 'submit';\n submitButton.tabIndex = -1;\n this.hostElement.appendChild(submitButton);\n\n this.submitButtonElement = submitButton;\n }\n }\n\n dispatchFormEvents() {\n if (this.type === 'submit' && this.submitButtonElement) {\n this.submitButtonElement.click();\n }\n }\n\n private getIconSizeClass() {\n return {\n 'btn-icon-12': this.size === '12',\n 'btn-icon-16': this.size === '16',\n 'btn-icon-32': this.size === '24' \|\| !this.size,\n };\n }\n\n render() {\n const baseButtonProps: BaseButtonProps = {\n ariaAttributes: {\n 'aria-label': this.a11yLabel\n ? this.a11yLabel\n : getFallbackLabelFromIconName(this.icon),\n },\n variant: this.variant,\n outline: this.outline,\n ghost: this.ghost,\n iconOnly: true,\n iconOval: this.oval,\n selected: false,\n disabled: this.disabled \|\| this.loading,\n icon: this.icon,\n iconColor: this.iconColor,\n iconSize: this.size,\n loading: this.loading,\n onClick: () => this.dispatchFormEvents(),\n type: this.type,\n extraClasses: this.getIconSizeClass(),\n };\n\n return (\n <Host\n class={{\n ...this.getIconSizeClass(),\n disabled: this.disabled \|\| this.loading,\n }}\n >\n <BaseIconButton {...baseButtonProps}></BaseIconButton>\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\n@mixin ix-spinner($size-name: 'medium', $size: 2rem, $track-size: 4px) {\n :host {\n @include ix-component;\n display: block;\n position: relative;\n }\n\n .#{$size-name} {\n width: $size;\n height: $size;\n min-width: $size;\n min-height: $size;\n max-width: $size;\n max-height: $size;\n border-radius: 100%;\n position: relative;\n animation: rotate 2s linear infinite;\n\n @keyframes rotate {\n 100% {\n transform: rotate(360deg);\n }\n }\n\n @keyframes clipMask {\n 0% {\n clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n }\n 12.5% {\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);\n }\n 25% {\n clip-path: polygon(\n 50% 50%,\n 0 0,\n 100% 0,\n 100% 100%,\n 100% 100%,\n 100% 100%\n );\n }\n 37.5% {\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);\n }\n 50% {\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);\n }\n 62.5% {\n clip-path: polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0);\n }\n 75% {\n clip-path: polygon(\n 50% 50%,\n 100% 100%,\n 100% 100%,\n 100% 100%,\n 0 100%,\n 0 0\n );\n }\n 87.5% {\n clip-path: polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0);\n }\n 100% {\n clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n }\n }\n }\n\n .#{$size-name}::after {\n content: '';\n box-sizing: border-box;\n position: absolute;\n inset: 8.33%;\n border-radius: 100%;\n border: $track-size solid\n var(--ix-button-color, var(--theme-color-soft-text));\n animation: clipMask 3s linear infinite;\n }\n\n .#{$size-name}:not(.hide-track)::before {\n content: '';\n box-sizing: border-box;\n position: absolute;\n inset: 8.33%;\n border-radius: 100%;\n border: $track-size solid var(--theme-color-ghost--hover);\n }\n\n .primary::after {\n border-color: var(--theme-color-dynamic);\n }\n\n .primary::before {\n border-color: var(--theme-color-ghost--hover);\n }\n}\n\n@include ix-spinner($size-name: 'xx-small', $size: 0.75rem, $track-size: 1px);\n@include ix-spinner($size-name: 'x-small', $size: 1.25rem, $track-size: 2px);\n@include ix-spinner($size-name: 'small', $size: 1.5rem, $track-size: 2px);\n@include ix-spinner($size-name: 'medium', $size: 2rem, $track-size: 2px);\n@include ix-spinner($size-name: 'large', $size: 6rem, $track-size: 4px);\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-spinner',\n styleUrl: 'spinner.scss',\n shadow: true,\n})\nexport class Spinner {\n @Element() hostElement!: HTMLIxSpinnerElement;\n\n /\n Variant of spinner\n /\n @Prop() variant: 'primary' \| 'secondary' = 'secondary';\n\n /\n Size of spinner\n /\n @Prop() size: 'xx-small' \| 'x-small' \| 'small' \| 'medium' \| 'large' =\n 'medium';\n\n /\n @internal\n */\n @Prop() hideTrack = false;\n\n render() {\n return (\n <Host>\n <div\n class={{\n primary: this.variant === 'primary',\n [this.size]: true,\n 'hide-track': this.hideTrack,\n }}\n ></div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"ix-icon-button.ix-spinner.entry.esm.js","sources":["src/components/icon-button/icon-button.scss?tag=ix-icon-button&encapsulation=shadow","src/components/icon-button/icon-button.tsx","src/components/spinner/spinner.scss?tag=ix-spinner&encapsulation=shadow","src/components/spinner/spinner.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 './icon-button-mixin.scss';\n\n@include base-icon-button;\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 { BaseButtonProps } from '../button/base-button';\nimport { ButtonVariant } from '../button/button';\nimport { BaseIconButton } from '../icon-button/base-icon-button';\nimport { getFallbackLabelFromIconName } from '../utils/a11y';\n\nexport type IconButtonVariant = ButtonVariant;\n\n@Component({\n tag: 'ix-icon-button',\n styleUrl: 'icon-button.scss',\n shadow: true,\n})\nexport class IconButton {\n @Element() hostElement!: HTMLIxIconButtonElement;\n\n /\n Accessibility label for the icon button\n * Will be set as aria-label on the nested HTML button element\n /\n @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;\n\n /\n Variant of button\n /\n @Prop() variant: IconButtonVariant = 'secondary';\n\n /\n Button outline\n /\n @Prop() outline: boolean = false;\n\n /\n Button invisible\n /\n @Prop() ghost: boolean = false;\n\n /\n Button in oval shape\n /\n @Prop() oval: boolean = false;\n\n /\n Icon name\n /\n @Prop() icon?: string;\n\n /\n Size of icon in button\n \n /\n @Prop() size: '24' \| '16' \| '12' = '24';\n\n /*\n Color of icon in button\n /\n @Prop() iconColor?: string;\n\n /\n Disabled\n /\n @Prop() disabled = false;\n\n /\n Type of the button\n /\n @Prop() type: 'button' \| 'submit' = 'button';\n\n /\n Loading button\n /\n @Prop() loading = false;\n\n /\n Temp. workaround until stencil issue is fixed (https://github.com/ionic-team/stencil/issues/2284)\n /\n submitButtonElement!: HTMLButtonElement;\n\n componentDidLoad() {\n if (this.type === 'submit') {\n const submitButton = document.createElement('button');\n submitButton.style.display = 'none';\n submitButton.type = 'submit';\n submitButton.tabIndex = -1;\n this.hostElement.appendChild(submitButton);\n\n this.submitButtonElement = submitButton;\n }\n }\n\n dispatchFormEvents() {\n if (this.type === 'submit' && this.submitButtonElement) {\n this.submitButtonElement.click();\n }\n }\n\n private getIconSizeClass() {\n return {\n 'btn-icon-12': this.size === '12',\n 'btn-icon-16': this.size === '16',\n 'btn-icon-32': this.size === '24' \|\| !this.size,\n };\n }\n\n render() {\n const baseButtonProps: BaseButtonProps = {\n ariaAttributes: {\n 'aria-label': this.a11yLabel\n ? this.a11yLabel\n : getFallbackLabelFromIconName(this.icon),\n },\n variant: this.variant,\n outline: this.outline,\n ghost: this.ghost,\n iconOnly: true,\n iconOval: this.oval,\n selected: false,\n disabled: this.disabled \|\| this.loading,\n icon: this.icon,\n iconColor: this.iconColor,\n iconSize: this.size,\n loading: this.loading,\n onClick: () => this.dispatchFormEvents(),\n type: this.type,\n extraClasses: this.getIconSizeClass(),\n };\n\n return (\n <Host\n class={{\n ...this.getIconSizeClass(),\n disabled: this.disabled \|\| this.loading,\n }}\n >\n <BaseIconButton {...baseButtonProps}></BaseIconButton>\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\n@mixin ix-spinner($size-name: 'medium', $size: 2rem, $track-size: 4px) {\n :host {\n @include ix-component;\n display: block;\n position: relative;\n }\n\n .#{$size-name} {\n width: $size;\n height: $size;\n min-width: $size;\n min-height: $size;\n max-width: $size;\n max-height: $size;\n border-radius: 100%;\n position: relative;\n animation: rotate 2s linear infinite;\n\n @keyframes rotate {\n 100% {\n transform: rotate(360deg);\n }\n }\n\n @keyframes clipMask {\n 0% {\n clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n }\n 12.5% {\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);\n }\n 25% {\n clip-path: polygon(\n 50% 50%,\n 0 0,\n 100% 0,\n 100% 100%,\n 100% 100%,\n 100% 100%\n );\n }\n 37.5% {\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);\n }\n 50% {\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);\n }\n 62.5% {\n clip-path: polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0);\n }\n 75% {\n clip-path: polygon(\n 50% 50%,\n 100% 100%,\n 100% 100%,\n 100% 100%,\n 0 100%,\n 0 0\n );\n }\n 87.5% {\n clip-path: polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0);\n }\n 100% {\n clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n }\n }\n }\n\n .#{$size-name}::after {\n content: '';\n box-sizing: border-box;\n position: absolute;\n inset: 8.33%;\n border-radius: 100%;\n border: $track-size solid\n var(--ix-button-color, var(--theme-color-soft-text));\n animation: clipMask 3s linear infinite;\n }\n\n .#{$size-name}:not(.hide-track)::before {\n content: '';\n box-sizing: border-box;\n position: absolute;\n inset: 8.33%;\n border-radius: 100%;\n border: $track-size solid var(--theme-color-ghost--hover);\n }\n\n .primary::after {\n border-color: var(--theme-color-dynamic);\n }\n\n .primary::before {\n border-color: var(--theme-color-ghost--hover);\n }\n}\n\n@include ix-spinner($size-name: 'xx-small', $size: 0.75rem, $track-size: 1px);\n@include ix-spinner($size-name: 'x-small', $size: 1.25rem, $track-size: 2px);\n@include ix-spinner($size-name: 'small', $size: 1.5rem, $track-size: 2px);\n@include ix-spinner($size-name: 'medium', $size: 2rem, $track-size: 2px);\n@include ix-spinner($size-name: 'large', $size: 6rem, $track-size: 4px);\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-spinner',\n styleUrl: 'spinner.scss',\n shadow: true,\n})\nexport class Spinner {\n @Element() hostElement!: HTMLIxSpinnerElement;\n\n /\n Variant of spinner\n /\n @Prop() variant: 'primary' \| 'secondary' = 'secondary';\n\n /\n Size of spinner\n /\n @Prop() size: 'xx-small' \| 'x-small' \| 'small' \| 'medium' \| 'large' =\n 'medium';\n\n /\n @internal\n */\n @Prop() hideTrack = false;\n\n render() {\n return (\n <Host>\n <div\n class={{\n primary: this.variant === 'primary',\n [this.size]: true,\n 'hide-track': this.hideTrack,\n }}\n ></div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}

package/dist/siemens-ix/ix-icon-toggle-button.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ix-icon-toggle-button.entry.esm.js","sources":["src/components/icon-toggle-button/icon-toggle-button.scss?tag=ix-icon-toggle-button&encapsulation=shadow","src/components/icon-toggle-button/icon-toggle-button.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 '../icon-button/icon-button-mixin.scss';\n\n@include base-icon-button;\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n Watch,\n} from '@stencil/core';\nimport { BaseButtonProps } from '../button/base-button';\nimport { ButtonVariant } from '../button/button';\nimport { BaseIconButton } from '../icon-button/base-icon-button';\nimport { a11yBoolean } from '../utils/a11y';\n\n/\n @~~since 2.0.0\n /\n@~~Component({\n tag: 'ix-icon-toggle-button',\n shadow: true,\n styleUrl: './icon-toggle-button.scss',\n})\nexport class IconToggleButton {\n /\n Button variant.\n * Important: Variant 'primary' can only be combined with either outline or ghost.\n /\n @Prop() variant: ButtonVariant = 'secondary';\n\n /\n Outline button\n /\n @Prop() outline = false;\n\n /\n Button with no background or outline\n /\n @Prop() ghost = false;\n\n /\n Icon name\n /\n @Prop() icon?: string;\n\n /\n Show button as pressed\n /\n @Prop() pressed = false;\n\n /\n Size of icon in button\n /\n @Prop() size: '24' \| '16' \| '12' = '24';\n\n /\n Disable the button\n /\n @Prop({ reflect: true }) disabled = false;\n\n /\n Loading button\n /\n @Prop() loading: boolean = false;\n\n /\n Pressed change event\n */\n @Event() pressedChange!: EventEmitter<boolean>;\n\n @Element() hostElement!: HTMLIxIconToggleButtonElement;\n\n private isIllegalToggleButtonConfig() {\n return this.variant === 'primary' && (this.outline \|\| this.ghost);\n }\n\n private logIllegalConfig() {\n console.warn(\n 'iX toggle button with illegal configuration detected. Variant \"primary\" can only be combined with \"outline\" or \"ghost\".'\n );\n }\n\n @Watch('variant')\n onVariantChange() {\n if (this.isIllegalToggleButtonConfig()) {\n this.logIllegalConfig();\n }\n }\n\n @Watch('ghost')\n onGhostChange() {\n this.onVariantChange();\n }\n\n @Watch('outline')\n onOutlineChange() {\n this.onVariantChange();\n }\n\n componentDidLoad() {\n this.onVariantChange();\n }\n\n private dispatchPressedChange() {\n this.pressedChange.emit(!this.pressed);\n }\n\n private getIconSizeClass() {\n return {\n 'btn-icon-12': this.size === '12',\n 'btn-icon-16': this.size === '16',\n 'btn-icon-32': this.size === '24',\n };\n }\n\n render() {\n const baseButtonProps: BaseButtonProps = {\n variant: this.variant,\n outline: this.outline,\n ghost: this.ghost,\n iconOnly: true,\n iconOval: false,\n selected: this.pressed,\n disabled: this.disabled \|\| this.loading,\n icon: this.icon,\n iconSize: this.size,\n loading: this.loading,\n onClick: () => this.dispatchPressedChange(),\n type: 'button',\n ariaAttributes: {\n 'aria-pressed': a11yBoolean(this.pressed),\n },\n extraClasses: {\n 'icon-button': true,\n ...this.getIconSizeClass(),\n },\n };\n\n return (\n <Host\n class={{\n ...this.getIconSizeClass(),\n disabled: this.disabled \|\| this.loading,\n }}\n >\n <BaseIconButton {...baseButtonProps}></BaseIconButton>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;;;;AAAA,MAAM,mBAAmB,GAAG,y7tBAAy7tB;;~~MCgCx8tB~~,gBAAgB,GAAA,MAAA;AAL7B,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAME;;;AAGG;AACK,QAAA,IAAO,CAAA,OAAA,GAAkB,WAAW;AAE5C;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;AAEvB;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAG,KAAK;AAOrB;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;AAEvB;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAuB,IAAI;AAEvC;;AAEG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAEzC;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;AAsFjC;IA7ES,2BAA2B,GAAA;AACjC,QAAA,OAAO,IAAI,CAAC,OAAO,KAAK,SAAS,KAAK,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,CAAC;;IAG3D,gBAAgB,GAAA;AACtB,QAAA,OAAO,CAAC,IAAI,CACV,yHAAyH,CAC1H;;IAIH,eAAe,GAAA;AACb,QAAA,IAAI,IAAI,CAAC,2BAA2B,EAAE,EAAE;YACtC,IAAI,CAAC,gBAAgB,EAAE;;;IAK3B,aAAa,GAAA;QACX,IAAI,CAAC,eAAe,EAAE;;IAIxB,eAAe,GAAA;QACb,IAAI,CAAC,eAAe,EAAE;;IAGxB,gBAAgB,GAAA;QACd,IAAI,CAAC,eAAe,EAAE;;IAGhB,qBAAqB,GAAA;QAC3B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC;;IAGhC,gBAAgB,GAAA;QACtB,OAAO;AACL,YAAA,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;AACjC,YAAA,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;AACjC,YAAA,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;SAClC;;IAGH,MAAM,GAAA;AACJ,QAAA,MAAM,eAAe,GAAoB;YACvC,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,KAAK,EAAE,IAAI,CAAC,KAAK;AACjB,YAAA,QAAQ,EAAE,IAAI;AACd,YAAA,QAAQ,EAAE,KAAK;YACf,QAAQ,EAAE,IAAI,CAAC,OAAO;AACtB,YAAA,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;YACvC,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,QAAQ,EAAE,IAAI,CAAC,IAAI;YACnB,OAAO,EAAE,IAAI,CAAC,OAAO;AACrB,YAAA,OAAO,EAAE,MAAM,IAAI,CAAC,qBAAqB,EAAE;AAC3C,YAAA,IAAI,EAAE,QAAQ;AACd,YAAA,cAAc,EAAE;AACd,gBAAA,cAAc,EAAE,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC;AAC1C,aAAA;AACD,YAAA,YAAY,EAAA,MAAA,CAAA,MAAA,CAAA,EACV,aAAa,EAAE,IAAI,IAChB,IAAI,CAAC,gBAAgB,EAAE,CAC3B;SACF;AAED,QAAA,QACE,CAAC,CAAA,IAAI,qDACH,KAAK,EAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACA,IAAI,CAAC,gBAAgB,EAAE,CAC1B,EAAA,EAAA,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,EAAA,CAAA,EAAA,EAGzC,CAAA,CAAC,cAAc,EAAK,MAAA,CAAA,MAAA,CAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,eAAe,CAAmB,CAAA,CACjD;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"ix-icon-toggle-button.entry.esm.js","sources":["src/components/icon-toggle-button/icon-toggle-button.scss?tag=ix-icon-toggle-button&encapsulation=shadow","src/components/icon-toggle-button/icon-toggle-button.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 '../icon-button/icon-button-mixin.scss';\n\n@include base-icon-button;\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n Watch,\n} from '@stencil/core';\nimport { BaseButtonProps } from '../button/base-button';\nimport { ButtonVariant } from '../button/button';\nimport { BaseIconButton } from '../icon-button/base-icon-button';\nimport { a11yBoolean } from '../utils/a11y';\n\n@Component({\n tag: 'ix-icon-toggle-button',\n shadow: true,\n styleUrl: './icon-toggle-button.scss',\n})\nexport class IconToggleButton {\n /\n Button variant.\n * Important: Variant 'primary' can only be combined with either outline or ghost.\n /\n @Prop() variant: ButtonVariant = 'secondary';\n\n /\n Outline button\n /\n @Prop() outline = false;\n\n /\n Button with no background or outline\n /\n @Prop() ghost = false;\n\n /\n Icon name\n /\n @Prop() icon?: string;\n\n /\n Show button as pressed\n /\n @Prop() pressed = false;\n\n /\n Size of icon in button\n /\n @Prop() size: '24' \| '16' \| '12' = '24';\n\n /\n Disable the button\n /\n @Prop({ reflect: true }) disabled = false;\n\n /\n Loading button\n /\n @Prop() loading: boolean = false;\n\n /\n Pressed change event\n */\n @Event() pressedChange!: EventEmitter<boolean>;\n\n @Element() hostElement!: HTMLIxIconToggleButtonElement;\n\n private isIllegalToggleButtonConfig() {\n return this.variant === 'primary' && (this.outline \|\| this.ghost);\n }\n\n private logIllegalConfig() {\n console.warn(\n 'iX toggle button with illegal configuration detected. Variant \"primary\" can only be combined with \"outline\" or \"ghost\".'\n );\n }\n\n @Watch('variant')\n onVariantChange() {\n if (this.isIllegalToggleButtonConfig()) {\n this.logIllegalConfig();\n }\n }\n\n @Watch('ghost')\n onGhostChange() {\n this.onVariantChange();\n }\n\n @Watch('outline')\n onOutlineChange() {\n this.onVariantChange();\n }\n\n componentDidLoad() {\n this.onVariantChange();\n }\n\n private dispatchPressedChange() {\n this.pressedChange.emit(!this.pressed);\n }\n\n private getIconSizeClass() {\n return {\n 'btn-icon-12': this.size === '12',\n 'btn-icon-16': this.size === '16',\n 'btn-icon-32': this.size === '24',\n };\n }\n\n render() {\n const baseButtonProps: BaseButtonProps = {\n variant: this.variant,\n outline: this.outline,\n ghost: this.ghost,\n iconOnly: true,\n iconOval: false,\n selected: this.pressed,\n disabled: this.disabled \|\| this.loading,\n icon: this.icon,\n iconSize: this.size,\n loading: this.loading,\n onClick: () => this.dispatchPressedChange(),\n type: 'button',\n ariaAttributes: {\n 'aria-pressed': a11yBoolean(this.pressed),\n },\n extraClasses: {\n 'icon-button': true,\n ...this.getIconSizeClass(),\n },\n };\n\n return (\n <Host\n class={{\n ...this.getIconSizeClass(),\n disabled: this.disabled \|\| this.loading,\n }}\n >\n <BaseIconButton {...baseButtonProps}></BaseIconButton>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;;;;AAAA,MAAM,mBAAmB,GAAG,y7tBAAy7tB;;MC6Bx8tB,gBAAgB,GAAA,MAAA;AAL7B,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAME;;;AAGG;AACK,QAAA,IAAO,CAAA,OAAA,GAAkB,WAAW;AAE5C;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;AAEvB;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAG,KAAK;AAOrB;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;AAEvB;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAuB,IAAI;AAEvC;;AAEG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAEzC;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;AAsFjC;IA7ES,2BAA2B,GAAA;AACjC,QAAA,OAAO,IAAI,CAAC,OAAO,KAAK,SAAS,KAAK,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,CAAC;;IAG3D,gBAAgB,GAAA;AACtB,QAAA,OAAO,CAAC,IAAI,CACV,yHAAyH,CAC1H;;IAIH,eAAe,GAAA;AACb,QAAA,IAAI,IAAI,CAAC,2BAA2B,EAAE,EAAE;YACtC,IAAI,CAAC,gBAAgB,EAAE;;;IAK3B,aAAa,GAAA;QACX,IAAI,CAAC,eAAe,EAAE;;IAIxB,eAAe,GAAA;QACb,IAAI,CAAC,eAAe,EAAE;;IAGxB,gBAAgB,GAAA;QACd,IAAI,CAAC,eAAe,EAAE;;IAGhB,qBAAqB,GAAA;QAC3B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC;;IAGhC,gBAAgB,GAAA;QACtB,OAAO;AACL,YAAA,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;AACjC,YAAA,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;AACjC,YAAA,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;SAClC;;IAGH,MAAM,GAAA;AACJ,QAAA,MAAM,eAAe,GAAoB;YACvC,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,KAAK,EAAE,IAAI,CAAC,KAAK;AACjB,YAAA,QAAQ,EAAE,IAAI;AACd,YAAA,QAAQ,EAAE,KAAK;YACf,QAAQ,EAAE,IAAI,CAAC,OAAO;AACtB,YAAA,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;YACvC,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,QAAQ,EAAE,IAAI,CAAC,IAAI;YACnB,OAAO,EAAE,IAAI,CAAC,OAAO;AACrB,YAAA,OAAO,EAAE,MAAM,IAAI,CAAC,qBAAqB,EAAE;AAC3C,YAAA,IAAI,EAAE,QAAQ;AACd,YAAA,cAAc,EAAE;AACd,gBAAA,cAAc,EAAE,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC;AAC1C,aAAA;AACD,YAAA,YAAY,EAAA,MAAA,CAAA,MAAA,CAAA,EACV,aAAa,EAAE,IAAI,IAChB,IAAI,CAAC,gBAAgB,EAAE,CAC3B;SACF;AAED,QAAA,QACE,CAAC,CAAA,IAAI,qDACH,KAAK,EAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACA,IAAI,CAAC,gBAAgB,EAAE,CAC1B,EAAA,EAAA,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,EAAA,CAAA,EAAA,EAGzC,CAAA,CAAC,cAAc,EAAK,MAAA,CAAA,MAAA,CAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,eAAe,CAAmB,CAAA,CACjD;;;;;;;;;;;;;"}

package/dist/siemens-ix/ix-input-group.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ix-input-group.entry.esm.js","sources":["src/components/input-group/input-group.scss?tag=ix-input-group&encapsulation=shadow","src/components/input-group/input-group.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@import 'mixins/shadow-dom/host-disabled';\n\n:host {\n @include ix-component;\n\n position: relative;\n display: flex;\n width: 100%;\n flex-wrap: wrap;\n align-items: stretch;\n\n .group {\n display: flex;\n position: absolute;\n align-items: center;\n height: 100%;\n }\n\n .group-start {\n left: 0px;\n height: 2rem;\n margin-left: 0.5rem;\n color: var(--theme-color-soft-text);\n }\n\n .group-end {\n right: 0px;\n height: 2rem;\n margin-right: 0.5rem;\n color: var(--theme-color-soft-text);\n }\n\n ::slotted() {\n display: flex;\n }\n}\n\n@include host-disabled {\n .group-start,\n .group-end {\n ::slotted() {\n opacity: 0.4 !important;\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, State } from '@stencil/core';\nimport { getSlottedElements } from '../utils/shadow-dom';\n\n/\n @deprecated since 3.0.0. Will be removed with 4.0.0.\n * Use the 'ix-input' component instead\n */\n@Component({\n tag: 'ix-input-group',\n styleUrl: 'input-group.scss',\n shadow: true,\n})\nexport class InputGroup {\n @Element() hostElement!: HTMLIxInputGroupElement;\n\n @State() disabled = false;\n\n @State() inputPaddingLeft = 0;\n @State() inputPaddingRight = 0;\n\n startSlotRef?: HTMLElement;\n endSlotRef?: HTMLElement;\n\n private get inputElement() {\n return this.hostElement.querySelector('input') as HTMLInputElement;\n }\n\n private observer?: MutationObserver;\n\n componentWillLoad() {\n const { valid } = this.inputElement.validity;\n this.inputElement.addEventListener('valid', () => {\n this.onValidInput();\n });\n this.inputElement.addEventListener('invalid', () => {\n this.onInvalidInput();\n });\n this.inputElement.addEventListener('input', () => {\n this.startSlotChanged();\n });\n\n this.inputElement.form?.addEventListener('submit', () => {\n this.startSlotChanged();\n });\n\n valid ? this.onValidInput() : this.onInvalidInput();\n\n this.observer = new MutationObserver(() => {\n this.slotChanged();\n this.startSlotChanged();\n this.endSlotChanged();\n });\n\n this.observer.observe(this.hostElement, {\n subtree: true,\n childList: true,\n attributes: true,\n characterData: true,\n });\n }\n\n componentDidRender() {\n this.prepareInputElement();\n }\n\n private onValidInput() {\n this.startSlotChanged();\n }\n\n private onInvalidInput() {\n this.startSlotChanged();\n }\n\n private prepareInputElement() {\n if (this.inputElement) {\n this.inputElement.style.width = '100%';\n\n if (this.inputPaddingRight !== 0) {\n this.inputElement.style.paddingRight = this.inputPaddingRight + 'px';\n } else {\n this.inputElement.style.paddingRight = '0.5rem';\n }\n\n if (this.inputPaddingLeft !== 0) {\n this.inputElement.style.paddingLeft = this.inputPaddingLeft + 'px';\n } else {\n this.inputElement.style.paddingLeft = '0.5rem';\n }\n } else {\n console.warn(\n 'You used the ix-input-group without an input tag, e.g. <input class=\"ix-form-control\" />'\n );\n }\n }\n\n private slotChanged() {\n this.disabled = this.inputElement?.disabled;\n }\n\n private startSlotChanged() {\n setTimeout(() => {\n const startPadding = this.getChildrenWidth(this.startSlotRef);\n\n if (startPadding !== 0) {\n this.inputPaddingLeft = 11 + startPadding;\n } else {\n this.inputPaddingLeft = 0;\n }\n\n if (!this.inputElement) {\n return;\n }\n\n const isInputInvalid =\n !this.inputElement.validity.valid \|\|\n this.inputElement.classList.contains('is-invalid');\n\n const formWasValidated =\n this.inputElement.form?.classList.contains('was-validated') \|\|\n this.inputElement.form?.noValidate === false;\n\n if (formWasValidated && isInputInvalid) {\n const left = this.inputPaddingLeft !== 0 ? this.inputPaddingLeft : 7;\n this.inputElement.style.backgroundPosition = `left ${left}px center`;\n this.inputPaddingLeft += 26;\n }\n });\n }\n\n private endSlotChanged() {\n setTimeout(() => {\n this.inputPaddingRight = 15 + this.getChildrenWidth(this.endSlotRef);\n });\n }\n\n private getChildrenWidth(slotElement: Element \| undefined) {\n if (!slotElement) {\n return 0;\n }\n\n const endElements = getSlottedElements<HTMLElement>(slotElement);\n if (endElements.length === 0) {\n return 0;\n }\n\n let width = 0;\n\n endElements.forEach((element) => {\n width += element.getBoundingClientRect().width;\n });\n\n return width;\n }\n\n render() {\n return (\n <Host class={{ disabled: this.disabled }}>\n <div class=\"group group-start\">\n <slot\n ref={(el) => (this.startSlotRef = el as HTMLElement)}\n name=\"input-start\"\n ></slot>\n </div>\n <slot></slot>\n <div class=\"group group-end\">\n <slot\n ref={(el) => (this.endSlotRef = el as HTMLElement)}\n name=\"input-end\"\n ></slot>\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"ix-input-group.entry.esm.js","sources":["src/components/input-group/input-group.scss?tag=ix-input-group&encapsulation=shadow","src/components/input-group/input-group.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@import 'mixins/shadow-dom/host-disabled';\n\n:host {\n @include ix-component;\n\n position: relative;\n display: flex;\n width: 100%;\n flex-wrap: wrap;\n align-items: stretch;\n\n .group {\n display: flex;\n position: absolute;\n align-items: center;\n height: 100%;\n }\n\n .group-start {\n left: 0px;\n height: 2rem;\n margin-left: 0.5rem;\n color: var(--theme-color-soft-text);\n }\n\n .group-end {\n right: 0px;\n height: 2rem;\n margin-right: 0.5rem;\n color: var(--theme-color-soft-text);\n }\n\n ::slotted() {\n display: flex;\n }\n}\n\n@include host-disabled {\n .group-start,\n .group-end {\n ::slotted() {\n opacity: 0.4 !important;\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, State } from '@stencil/core';\nimport { getSlottedElements } from '../utils/shadow-dom';\n\n/\n @deprecated Will be removed with 4.0.0\n * Use the 'ix-input' component instead\n */\n@Component({\n tag: 'ix-input-group',\n styleUrl: 'input-group.scss',\n shadow: true,\n})\nexport class InputGroup {\n @Element() hostElement!: HTMLIxInputGroupElement;\n\n @State() disabled = false;\n\n @State() inputPaddingLeft = 0;\n @State() inputPaddingRight = 0;\n\n startSlotRef?: HTMLElement;\n endSlotRef?: HTMLElement;\n\n private get inputElement() {\n return this.hostElement.querySelector('input') as HTMLInputElement;\n }\n\n private observer?: MutationObserver;\n\n componentWillLoad() {\n const { valid } = this.inputElement.validity;\n this.inputElement.addEventListener('valid', () => {\n this.onValidInput();\n });\n this.inputElement.addEventListener('invalid', () => {\n this.onInvalidInput();\n });\n this.inputElement.addEventListener('input', () => {\n this.startSlotChanged();\n });\n\n this.inputElement.form?.addEventListener('submit', () => {\n this.startSlotChanged();\n });\n\n valid ? this.onValidInput() : this.onInvalidInput();\n\n this.observer = new MutationObserver(() => {\n this.slotChanged();\n this.startSlotChanged();\n this.endSlotChanged();\n });\n\n this.observer.observe(this.hostElement, {\n subtree: true,\n childList: true,\n attributes: true,\n characterData: true,\n });\n }\n\n componentDidRender() {\n this.prepareInputElement();\n }\n\n private onValidInput() {\n this.startSlotChanged();\n }\n\n private onInvalidInput() {\n this.startSlotChanged();\n }\n\n private prepareInputElement() {\n if (this.inputElement) {\n this.inputElement.style.width = '100%';\n\n if (this.inputPaddingRight !== 0) {\n this.inputElement.style.paddingRight = this.inputPaddingRight + 'px';\n } else {\n this.inputElement.style.paddingRight = '0.5rem';\n }\n\n if (this.inputPaddingLeft !== 0) {\n this.inputElement.style.paddingLeft = this.inputPaddingLeft + 'px';\n } else {\n this.inputElement.style.paddingLeft = '0.5rem';\n }\n } else {\n console.warn(\n 'You used the ix-input-group without an input tag, e.g. <input class=\"ix-form-control\" />'\n );\n }\n }\n\n private slotChanged() {\n this.disabled = this.inputElement?.disabled;\n }\n\n private startSlotChanged() {\n setTimeout(() => {\n const startPadding = this.getChildrenWidth(this.startSlotRef);\n\n if (startPadding !== 0) {\n this.inputPaddingLeft = 11 + startPadding;\n } else {\n this.inputPaddingLeft = 0;\n }\n\n if (!this.inputElement) {\n return;\n }\n\n const isInputInvalid =\n !this.inputElement.validity.valid \|\|\n this.inputElement.classList.contains('is-invalid');\n\n const formWasValidated =\n this.inputElement.form?.classList.contains('was-validated') \|\|\n this.inputElement.form?.noValidate === false;\n\n if (formWasValidated && isInputInvalid) {\n const left = this.inputPaddingLeft !== 0 ? this.inputPaddingLeft : 7;\n this.inputElement.style.backgroundPosition = `left ${left}px center`;\n this.inputPaddingLeft += 26;\n }\n });\n }\n\n private endSlotChanged() {\n setTimeout(() => {\n this.inputPaddingRight = 15 + this.getChildrenWidth(this.endSlotRef);\n });\n }\n\n private getChildrenWidth(slotElement: Element \| undefined) {\n if (!slotElement) {\n return 0;\n }\n\n const endElements = getSlottedElements<HTMLElement>(slotElement);\n if (endElements.length === 0) {\n return 0;\n }\n\n let width = 0;\n\n endElements.forEach((element) => {\n width += element.getBoundingClientRect().width;\n });\n\n return width;\n }\n\n render() {\n return (\n <Host class={{ disabled: this.disabled }}>\n <div class=\"group group-start\">\n <slot\n ref={(el) => (this.startSlotRef = el as HTMLElement)}\n name=\"input-start\"\n ></slot>\n </div>\n <slot></slot>\n <div class=\"group group-end\">\n <slot\n ref={(el) => (this.endSlotRef = el as HTMLElement)}\n name=\"input-end\"\n ></slot>\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ix-input.entry.esm.js","sources":["src/components/input/input.scss?tag=ix-input&encapsulation=shadow","src/components/input/input.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2024 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n@import 'mixins/shadow-dom/component';\n@import 'mixins/validation/form-component';\n@import './input.mixins.scss';\n\n@include input-field;\n\n:host {\n .password-eye {\n margin-left: 0.125rem;\n color: red;\n\n &.eye-hidden {\n display: none;\n }\n }\n}\n","/\n * SPDX-FileCopyrightText: 2024 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { iconEye, iconEyeCancelled } from '@siemens/ix-icons/icons';\nimport {\n AttachInternals,\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Method,\n Prop,\n State,\n Watch,\n h,\n} from '@stencil/core';\nimport { A11yAttributes } from '../utils/a11y';\nimport {\n HookValidationLifecycle,\n IxInputFieldComponent,\n ValidationResults,\n} from '../utils/input';\nimport { makeRef } from '../utils/make-ref';\nimport { InputElement, SlotEnd, SlotStart } from './input.fc';\nimport {\n addDisposableChangesAndVisibilityObservers,\n adjustPaddingForStartAndEnd,\n checkAllowedKeys,\n DisposableChangesAndVisibilityObservers,\n getAriaAttributesForInput,\n mapValidationResult,\n onInputBlur,\n} from './input.util';\n\nlet inputIds = 0;\n\n/\n @since 2.6.0\n * @form-ready 2.6.0\n * @slot start - Element will be displayed at the start of the input\n * @slot end - Element will be displayed at the end of the input\n /\n@Component({\n tag: 'ix-input',\n styleUrl: 'input.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class Input implements IxInputFieldComponent<string> {\n @Element() hostElement!: HTMLIxInputElement;\n @AttachInternals() formInternals!: ElementInternals;\n\n /\n The type of the text field. Possible values are 'text', 'email', or 'password'.\n /\n @Prop() type: 'text' \| 'email' \| 'password' \| 'tel' \| 'url' = 'text';\n\n /\n The name of the text field.\n /\n @Prop({ reflect: true }) name?: string;\n\n /\n The placeholder text for the text field.\n /\n @Prop({ reflect: true }) placeholder?: string;\n\n /\n The value of the text field.\n /\n @Prop({ reflect: true, mutable: true }) value: string = '';\n\n /\n Specifies whether the text field is required.\n /\n @Prop({ reflect: true }) required: boolean = false;\n\n /\n Specifies whether the text field is disabled.\n /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /\n Specifies whether the text field is readonly.\n /\n @Prop({ reflect: true }) readonly: boolean = false;\n\n /\n The helper text for the text field.\n /\n @Prop() helperText?: string;\n\n /\n The info text for the text field.\n /\n @Prop() infoText?: string;\n\n /\n Specifies whether to show the text as a tooltip.\n /\n @Prop() showTextAsTooltip?: boolean;\n\n /\n The valid text for the text field.\n /\n @Prop() validText?: string;\n\n /\n The warning text for the text field.\n /\n @Prop() warningText?: string;\n\n /\n The label for the text field.\n /\n @Prop({ reflect: true }) label?: string;\n\n /\n The error text for the text field.\n /\n @Prop() invalidText?: string;\n\n /\n The pattern for the text field.\n /\n @Prop() pattern?: string;\n\n /\n The maximum length of the text field.\n /\n @Prop() maxLength?: number;\n\n /\n The minimum length of the text field.\n /\n @Prop() minLength?: number;\n\n /\n The allowed characters pattern for the text field.\n /\n @Prop() allowedCharactersPattern?: string;\n\n /\n Event emitted when the value of the text field changes.\n /\n @Event() valueChange!: EventEmitter<string>;\n\n /\n Event emitted when the validity state of the text field changes.\n /\n @Event() validityStateChange!: EventEmitter<ValidityState>;\n\n /\n Event emitted when the text field loses focus.\n /\n @Event() ixBlur!: EventEmitter<void>;\n\n @State() isInvalid = false;\n @State() isValid = false;\n @State() isInfo = false;\n @State() isWarning = false;\n @State() isInvalidByRequired = false;\n\n @State() inputType = 'text';\n\n private readonly inputRef = makeRef<HTMLInputElement>();\n private readonly slotEndRef = makeRef<HTMLDivElement>();\n private readonly slotStartRef = makeRef<HTMLDivElement>();\n private readonly inputId = `input-${inputIds++}`;\n private touched = false;\n\n private disposableChangesAndVisibilityObservers?: DisposableChangesAndVisibilityObservers;\n\n @HookValidationLifecycle()\n updateClassMappings(result: ValidationResults) {\n mapValidationResult(this, result);\n }\n\n @Watch('type')\n updateInputType() {\n this.inputType = this.type;\n }\n\n componentWillLoad() {\n this.updateFormInternalValue(this.value);\n this.inputType = this.type;\n }\n\n connectedCallback(): void {\n this.disposableChangesAndVisibilityObservers =\n addDisposableChangesAndVisibilityObservers(\n this.hostElement,\n this.updatePaddings.bind(this)\n );\n }\n\n private updatePaddings() {\n adjustPaddingForStartAndEnd(\n this.slotStartRef.current,\n this.slotEndRef.current,\n this.inputRef.current\n );\n }\n\n disconnectedCallback(): void {\n this.disposableChangesAndVisibilityObservers?.();\n }\n\n updateFormInternalValue(value: string) {\n this.formInternals.setFormValue(value);\n this.value = value;\n }\n\n /* @internal /\n @Method()\n async getAssociatedFormElement(): Promise<HTMLFormElement \| null> {\n return this.formInternals.form;\n }\n\n /* @internal /\n @Method()\n hasValidValue(): Promise<boolean> {\n return Promise.resolve(!!this.value);\n }\n\n /\n Returns the native input element used in the text field.\n /\n @Method()\n getNativeInputElement() {\n return this.inputRef.waitForCurrent();\n }\n\n /\n Focuses the input field\n /\n @Method()\n async focusInput(): Promise<void> {\n return (await this.getNativeInputElement()).focus();\n }\n\n /\n Returns whether the text field has been touched.\n * @internal\n */\n @Method()\n isTouched(): Promise<boolean> {\n return Promise.resolve(this.touched);\n }\n\n render() {\n const inputAria: A11yAttributes = getAriaAttributesForInput(this);\n return (\n <Host\n class={{\n disabled: this.disabled,\n readonly: this.readonly,\n }}\n >\n <ix-field-wrapper\n htmlForLabel={this.inputId}\n required={this.required}\n label={this.label}\n helperText={this.helperText}\n invalidText={this.invalidText}\n infoText={this.infoText}\n warningText={this.warningText}\n validText={this.validText}\n showTextAsTooltip={this.showTextAsTooltip}\n isInvalid={this.isInvalid}\n isValid={this.isValid}\n isInfo={this.isInfo}\n isWarning={this.isWarning}\n controlRef={this.inputRef}\n >\n <div class=\"input-wrapper\">\n <SlotStart\n slotStartRef={this.slotStartRef}\n onSlotChange={() => this.updatePaddings()}\n ></SlotStart>\n <InputElement\n id={this.inputId}\n readonly={this.readonly}\n disabled={this.disabled}\n maxLength={this.maxLength}\n minLength={this.minLength}\n pattern={this.pattern}\n type={this.inputType}\n isInvalid={this.isInvalid}\n required={this.required}\n value={this.value}\n placeholder={this.placeholder}\n inputRef={this.inputRef}\n onKeyPress={(event) => checkAllowedKeys(this, event)}\n valueChange={(value) => this.valueChange.emit(value)}\n updateFormInternalValue={(value) =>\n this.updateFormInternalValue(value)\n }\n onBlur={() => {\n onInputBlur(this, this.inputRef.current);\n this.touched = true;\n }}\n ariaAttributes={inputAria}\n ></InputElement>\n <SlotEnd\n slotEndRef={this.slotEndRef}\n onSlotChange={() => this.updatePaddings()}\n >\n <ix-icon-button\n color=\"color-weak-text\"\n class={{\n 'password-eye': true,\n 'eye-hidden': this.type !== 'password',\n }}\n ghost\n icon={\n this.inputType === 'password' ? iconEye : iconEyeCancelled\n }\n onClick={() => {\n if (this.inputType === 'password') {\n this.inputType = 'text';\n return;\n }\n\n this.inputType = 'password';\n }}\n ></ix-icon-button>\n </SlotEnd>\n </div>\n {!!this.maxLength && this.maxLength > 0 && (\n <ix-typography\n class=\"bottom-text\"\n slot=\"bottom-right\"\n textColor=\"soft\"\n >\n {this.value?.length}/{this.maxLength}\n </ix-typography>\n )}\n </ix-field-wrapper>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"ix-input.entry.esm.js","sources":["src/components/input/input.scss?tag=ix-input&encapsulation=shadow","src/components/input/input.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2024 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n@import 'mixins/shadow-dom/component';\n@import 'mixins/validation/form-component';\n@import './input.mixins.scss';\n\n@include input-field;\n\n:host {\n .password-eye {\n margin-left: 0.125rem;\n color: red;\n\n &.eye-hidden {\n display: none;\n }\n }\n}\n","/\n * SPDX-FileCopyrightText: 2024 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { iconEye, iconEyeCancelled } from '@siemens/ix-icons/icons';\nimport {\n AttachInternals,\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Method,\n Prop,\n State,\n Watch,\n h,\n} from '@stencil/core';\nimport { A11yAttributes } from '../utils/a11y';\nimport {\n HookValidationLifecycle,\n IxInputFieldComponent,\n ValidationResults,\n} from '../utils/input';\nimport { makeRef } from '../utils/make-ref';\nimport { InputElement, SlotEnd, SlotStart } from './input.fc';\nimport {\n addDisposableChangesAndVisibilityObservers,\n adjustPaddingForStartAndEnd,\n checkAllowedKeys,\n DisposableChangesAndVisibilityObservers,\n getAriaAttributesForInput,\n mapValidationResult,\n onInputBlur,\n} from './input.util';\n\nlet inputIds = 0;\n\n/\n @form-ready\n * @slot start - Element will be displayed at the start of the input\n * @slot end - Element will be displayed at the end of the input\n /\n@Component({\n tag: 'ix-input',\n styleUrl: 'input.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class Input implements IxInputFieldComponent<string> {\n @Element() hostElement!: HTMLIxInputElement;\n @AttachInternals() formInternals!: ElementInternals;\n\n /\n The type of the text field. Possible values are 'text', 'email', or 'password'.\n /\n @Prop() type: 'text' \| 'email' \| 'password' \| 'tel' \| 'url' = 'text';\n\n /\n The name of the text field.\n /\n @Prop({ reflect: true }) name?: string;\n\n /\n The placeholder text for the text field.\n /\n @Prop({ reflect: true }) placeholder?: string;\n\n /\n The value of the text field.\n /\n @Prop({ reflect: true, mutable: true }) value: string = '';\n\n /\n Specifies whether the text field is required.\n /\n @Prop({ reflect: true }) required: boolean = false;\n\n /\n Specifies whether the text field is disabled.\n /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /\n Specifies whether the text field is readonly.\n /\n @Prop({ reflect: true }) readonly: boolean = false;\n\n /\n The helper text for the text field.\n /\n @Prop() helperText?: string;\n\n /\n The info text for the text field.\n /\n @Prop() infoText?: string;\n\n /\n Specifies whether to show the text as a tooltip.\n /\n @Prop() showTextAsTooltip?: boolean;\n\n /\n The valid text for the text field.\n /\n @Prop() validText?: string;\n\n /\n The warning text for the text field.\n /\n @Prop() warningText?: string;\n\n /\n The label for the text field.\n /\n @Prop({ reflect: true }) label?: string;\n\n /\n The error text for the text field.\n /\n @Prop() invalidText?: string;\n\n /\n The pattern for the text field.\n /\n @Prop() pattern?: string;\n\n /\n The maximum length of the text field.\n /\n @Prop() maxLength?: number;\n\n /\n The minimum length of the text field.\n /\n @Prop() minLength?: number;\n\n /\n The allowed characters pattern for the text field.\n /\n @Prop() allowedCharactersPattern?: string;\n\n /\n Event emitted when the value of the text field changes.\n /\n @Event() valueChange!: EventEmitter<string>;\n\n /\n Event emitted when the validity state of the text field changes.\n /\n @Event() validityStateChange!: EventEmitter<ValidityState>;\n\n /\n Event emitted when the text field loses focus.\n /\n @Event() ixBlur!: EventEmitter<void>;\n\n @State() isInvalid = false;\n @State() isValid = false;\n @State() isInfo = false;\n @State() isWarning = false;\n @State() isInvalidByRequired = false;\n\n @State() inputType = 'text';\n\n private readonly inputRef = makeRef<HTMLInputElement>();\n private readonly slotEndRef = makeRef<HTMLDivElement>();\n private readonly slotStartRef = makeRef<HTMLDivElement>();\n private readonly inputId = `input-${inputIds++}`;\n private touched = false;\n\n private disposableChangesAndVisibilityObservers?: DisposableChangesAndVisibilityObservers;\n\n @HookValidationLifecycle()\n updateClassMappings(result: ValidationResults) {\n mapValidationResult(this, result);\n }\n\n @Watch('type')\n updateInputType() {\n this.inputType = this.type;\n }\n\n componentWillLoad() {\n this.updateFormInternalValue(this.value);\n this.inputType = this.type;\n }\n\n connectedCallback(): void {\n this.disposableChangesAndVisibilityObservers =\n addDisposableChangesAndVisibilityObservers(\n this.hostElement,\n this.updatePaddings.bind(this)\n );\n }\n\n private updatePaddings() {\n adjustPaddingForStartAndEnd(\n this.slotStartRef.current,\n this.slotEndRef.current,\n this.inputRef.current\n );\n }\n\n disconnectedCallback(): void {\n this.disposableChangesAndVisibilityObservers?.();\n }\n\n updateFormInternalValue(value: string) {\n this.formInternals.setFormValue(value);\n this.value = value;\n }\n\n /* @internal /\n @Method()\n async getAssociatedFormElement(): Promise<HTMLFormElement \| null> {\n return this.formInternals.form;\n }\n\n /* @internal /\n @Method()\n hasValidValue(): Promise<boolean> {\n return Promise.resolve(!!this.value);\n }\n\n /\n Returns the native input element used in the text field.\n /\n @Method()\n getNativeInputElement() {\n return this.inputRef.waitForCurrent();\n }\n\n /\n Returns the validity state of the input field.\n /\n @Method()\n getValidityState(): Promise<ValidityState> {\n return Promise.resolve(this.inputRef.current.validity);\n }\n\n /\n Focuses the input field\n /\n @Method()\n async focusInput(): Promise<void> {\n return (await this.getNativeInputElement()).focus();\n }\n\n /\n Returns whether the text field has been touched.\n * @internal\n */\n @Method()\n isTouched(): Promise<boolean> {\n return Promise.resolve(this.touched);\n }\n\n render() {\n const inputAria: A11yAttributes = getAriaAttributesForInput(this);\n return (\n <Host\n class={{\n disabled: this.disabled,\n readonly: this.readonly,\n }}\n >\n <ix-field-wrapper\n htmlForLabel={this.inputId}\n required={this.required}\n label={this.label}\n helperText={this.helperText}\n invalidText={this.invalidText}\n infoText={this.infoText}\n warningText={this.warningText}\n validText={this.validText}\n showTextAsTooltip={this.showTextAsTooltip}\n isInvalid={this.isInvalid}\n isValid={this.isValid}\n isInfo={this.isInfo}\n isWarning={this.isWarning}\n controlRef={this.inputRef}\n >\n <div class=\"input-wrapper\">\n <SlotStart\n slotStartRef={this.slotStartRef}\n onSlotChange={() => this.updatePaddings()}\n ></SlotStart>\n <InputElement\n id={this.inputId}\n readonly={this.readonly}\n disabled={this.disabled}\n maxLength={this.maxLength}\n minLength={this.minLength}\n pattern={this.pattern}\n type={this.inputType}\n isInvalid={this.isInvalid}\n required={this.required}\n value={this.value}\n placeholder={this.placeholder}\n inputRef={this.inputRef}\n onKeyPress={(event) => checkAllowedKeys(this, event)}\n valueChange={(value) => this.valueChange.emit(value)}\n updateFormInternalValue={(value) =>\n this.updateFormInternalValue(value)\n }\n onBlur={() => {\n onInputBlur(this, this.inputRef.current);\n this.touched = true;\n }}\n ariaAttributes={inputAria}\n ></InputElement>\n <SlotEnd\n slotEndRef={this.slotEndRef}\n onSlotChange={() => this.updatePaddings()}\n >\n <ix-icon-button\n color=\"color-weak-text\"\n class={{\n 'password-eye': true,\n 'eye-hidden': this.type !== 'password',\n }}\n ghost\n icon={\n this.inputType === 'password' ? iconEye : iconEyeCancelled\n }\n onClick={() => {\n if (this.inputType === 'password') {\n this.inputType = 'text';\n return;\n }\n\n this.inputType = 'password';\n }}\n ></ix-icon-button>\n </SlotEnd>\n </div>\n {!!this.maxLength && this.maxLength > 0 && (\n <ix-typography\n class=\"bottom-text\"\n slot=\"bottom-right\"\n textColor=\"soft\"\n >\n {this.value?.length}/{this.maxLength}\n </ix-typography>\n )}\n </ix-field-wrapper>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}

package/dist/siemens-ix/ix-key-value-list.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ix-key-value-list.entry.esm.js","sources":["src/components/key-value-list/key-value-list.scss?tag=ix-key-value-list&encapsulation=shadow","src/components/key-value-list/key-value-list.tsx"],"sourcesContent":[":host(.keyValueList) {\n ::slotted(ix-key-value) {\n border-bottom: 1px solid var(--theme-color-weak-bdr);\n }\n}\n\n:host(.keyValueList.keyValueList--striped) {\n ::slotted(ix-key-value:nth-child(odd)) {\n background: var(--theme-color-ghost-alt);\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, h, Host, Prop } from '@stencil/core';\n\n/\n @~~since 1.6.0\n /\n@~~Component({\n tag: 'ix-key-value-list',\n styleUrl: 'key-value-list.scss',\n shadow: true,\n})\nexport class KeyValueList {\n /\n Optional striped key value list style\n */\n @Prop() striped: boolean = false;\n\n render() {\n return (\n <Host\n class={{ keyValueList: true, 'keyValueList--striped': this.striped }}\n >\n <slot></slot>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,eAAe,GAAG,6NAA6N;;~~MCmBxO~~,YAAY,GAAA,MAAA;AALzB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;AAWjC;IATC,MAAM,GAAA;AACJ,QAAA,QACE,CAAC,CAAA,IAAI,EACH,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,uBAAuB,EAAE,IAAI,CAAC,OAAO,EAAE,EAAA,EAEpE,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;"}
1	+ {"version":3,"file":"ix-key-value-list.entry.esm.js","sources":["src/components/key-value-list/key-value-list.scss?tag=ix-key-value-list&encapsulation=shadow","src/components/key-value-list/key-value-list.tsx"],"sourcesContent":[":host(.keyValueList) {\n ::slotted(ix-key-value) {\n border-bottom: 1px solid var(--theme-color-weak-bdr);\n }\n}\n\n:host(.keyValueList.keyValueList--striped) {\n ::slotted(ix-key-value:nth-child(odd)) {\n background: var(--theme-color-ghost-alt);\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, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'ix-key-value-list',\n styleUrl: 'key-value-list.scss',\n shadow: true,\n})\nexport class KeyValueList {\n /\n Optional striped key value list style\n */\n @Prop() striped: boolean = false;\n\n render() {\n return (\n <Host\n class={{ keyValueList: true, 'keyValueList--striped': this.striped }}\n >\n <slot></slot>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,eAAe,GAAG,6NAA6N;;MCgBxO,YAAY,GAAA,MAAA;AALzB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;AAWjC;IATC,MAAM,GAAA;AACJ,QAAA,QACE,CAAC,CAAA,IAAI,EACH,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,uBAAuB,EAAE,IAAI,CAAC,OAAO,EAAE,EAAA,EAEpE,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;"}

package/dist/siemens-ix/ix-key-value.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ix-key-value.entry.esm.js","sources":["src/components/key-value/key-value.scss?tag=ix-key-value&encapsulation=shadow","src/components/key-value/key-value.tsx"],"sourcesContent":["@import 'common-variables';\n@import 'mixins/text-truncation';\n\n:host(.keyValue) {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: $default-space;\n\n .keyValue__icon {\n padding: $tiny-space 0;\n }\n\n .keyValue__content {\n display: flex;\n flex-grow: 1;\n align-items: flex-start;\n\n &,\n .content__label,\n .content__value {\n @include ellipsis;\n max-width: 100%;\n }\n\n .content__label {\n color: var(--theme-color-soft-text);\n }\n\n .content__value {\n width: 100%;\n }\n }\n}\n\n:host(.keyValue.keyValue--column) {\n padding: $small-space 0;\n border-bottom: 1px solid var(--theme-color-soft-bdr);\n\n .keyValue__content {\n flex-direction: column;\n\n .content__label,\n .content__value:not(.has-customValue) {\n padding: 2px 0;\n }\n }\n}\n\n:host(.keyValue.keyValue--row) {\n padding: $tiny-space 0;\n\n .keyValue__content {\n flex-direction: row;\n gap: $default-space;\n align-items: center;\n\n .content__label,\n .content__value:not(.has-customValue) {\n padding: 6px 0;\n }\n\n .content__label {\n min-width: 8rem;\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, h, Host, Prop } from '@stencil/core';\n\nexport type KeyValueLabelPosition = 'top' \| 'left';\n\n/\n @slot custom-value - Optional custom value at key value instead of text value\n \n @since 1.6.0\n /\n@Component({\n tag: 'ix-key-value',\n styleUrl: 'key-value.scss',\n shadow: true,\n})\nexport class KeyValue {\n /\n Optional key value icon\n /\n @Prop() icon?: string;\n\n /\n Key value label\n /\n @Prop() label!: string;\n\n /\n Optional key value label position - 'top' or 'left'\n /\n @Prop() labelPosition: KeyValueLabelPosition = 'top';\n\n /\n Optional key value text value\n */\n @Prop() value?: string;\n\n render() {\n return (\n <Host\n class={`keyValue keyValue--${\n this.labelPosition === 'top' ? 'column' : 'row'\n }`}\n >\n {this.icon && (\n <ix-icon name={this.icon} size=\"24\" class=\"keyValue__icon\"></ix-icon>\n )}\n <div class=\"keyValue__content\">\n <div class=\"content__label\">{this.label}</div>\n <div\n class={{\n content__value: true,\n 'has-customValue': this.value === undefined,\n }}\n >\n {this.value !== undefined ? (\n this.value\n ) : (\n <slot name=\"custom-value\"></slot>\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,WAAW,GAAG,4yCAA4yC;;~~MCuBnzC~~,QAAQ,GAAA,MAAA;AALrB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAgBE;;AAEG;AACK,QAAA,IAAa,CAAA,aAAA,GAA0B,KAAK;AAmCrD;IA5BC,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE,CACL,mBAAA,EAAA,IAAI,CAAC,aAAa,KAAK,KAAK,GAAG,QAAQ,GAAG,KAC5C,CAAA,CAAE,EAAA,EAED,IAAI,CAAC,IAAI,KACR,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,gBAAgB,GAAW,CACtE,EACD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,mBAAmB,EAAA,EAC5B,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,KAAK,CAAO,EAC9C,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,cAAc,EAAE,IAAI;AACpB,gBAAA,iBAAiB,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;AAC5C,aAAA,EAEA,EAAA,IAAI,CAAC,KAAK,KAAK,SAAS,IACvB,IAAI,CAAC,KAAK,KAEV,CAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,cAAc,EAAQ,CAAA,CAClC,CACG,CACF,CACD;;;;;;;"}
1	+ {"version":3,"file":"ix-key-value.entry.esm.js","sources":["src/components/key-value/key-value.scss?tag=ix-key-value&encapsulation=shadow","src/components/key-value/key-value.tsx"],"sourcesContent":["@import 'common-variables';\n@import 'mixins/text-truncation';\n\n:host(.keyValue) {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: $default-space;\n\n .keyValue__icon {\n padding: $tiny-space 0;\n }\n\n .keyValue__content {\n display: flex;\n flex-grow: 1;\n align-items: flex-start;\n\n &,\n .content__label,\n .content__value {\n @include ellipsis;\n max-width: 100%;\n }\n\n .content__label {\n color: var(--theme-color-soft-text);\n }\n\n .content__value {\n width: 100%;\n }\n }\n}\n\n:host(.keyValue.keyValue--column) {\n padding: $small-space 0;\n border-bottom: 1px solid var(--theme-color-soft-bdr);\n\n .keyValue__content {\n flex-direction: column;\n\n .content__label,\n .content__value:not(.has-customValue) {\n padding: 2px 0;\n }\n }\n}\n\n:host(.keyValue.keyValue--row) {\n padding: $tiny-space 0;\n\n .keyValue__content {\n flex-direction: row;\n gap: $default-space;\n align-items: center;\n\n .content__label,\n .content__value:not(.has-customValue) {\n padding: 6px 0;\n }\n\n .content__label {\n min-width: 8rem;\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, h, Host, Prop } from '@stencil/core';\n\nexport type KeyValueLabelPosition = 'top' \| 'left';\n\n/\n @slot custom-value - Optional custom value at key value instead of text value\n /\n@Component({\n tag: 'ix-key-value',\n styleUrl: 'key-value.scss',\n shadow: true,\n})\nexport class KeyValue {\n /\n Optional key value icon\n /\n @Prop() icon?: string;\n\n /\n Key value label\n /\n @Prop() label!: string;\n\n /\n Optional key value label position - 'top' or 'left'\n /\n @Prop() labelPosition: KeyValueLabelPosition = 'top';\n\n /\n Optional key value text value\n */\n @Prop() value?: string;\n\n render() {\n return (\n <Host\n class={`keyValue keyValue--${\n this.labelPosition === 'top' ? 'column' : 'row'\n }`}\n >\n {this.icon && (\n <ix-icon name={this.icon} size=\"24\" class=\"keyValue__icon\"></ix-icon>\n )}\n <div class=\"keyValue__content\">\n <div class=\"content__label\">{this.label}</div>\n <div\n class={{\n content__value: true,\n 'has-customValue': this.value === undefined,\n }}\n >\n {this.value !== undefined ? (\n this.value\n ) : (\n <slot name=\"custom-value\"></slot>\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,WAAW,GAAG,4yCAA4yC;;MCqBnzC,QAAQ,GAAA,MAAA;AALrB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAgBE;;AAEG;AACK,QAAA,IAAa,CAAA,aAAA,GAA0B,KAAK;AAmCrD;IA5BC,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE,CACL,mBAAA,EAAA,IAAI,CAAC,aAAa,KAAK,KAAK,GAAG,QAAQ,GAAG,KAC5C,CAAA,CAAE,EAAA,EAED,IAAI,CAAC,IAAI,KACR,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,gBAAgB,GAAW,CACtE,EACD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,mBAAmB,EAAA,EAC5B,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,KAAK,CAAO,EAC9C,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,cAAc,EAAE,IAAI;AACpB,gBAAA,iBAAiB,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;AAC5C,aAAA,EAEA,EAAA,IAAI,CAAC,KAAK,KAAK,SAAS,IACvB,IAAI,CAAC,KAAK,KAEV,CAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,cAAc,EAAQ,CAAA,CAClC,CACG,CACF,CACD;;;;;;;"}

package/dist/siemens-ix/ix-layout-auto.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ix-layout-auto.entry.esm.js","sources":["src/components/layout-auto/layout-auto.scss?tag=ix-layout-auto&encapsulation=shadow","src/components/layout-auto/layout-auto.tsx"],"sourcesContent":[":host {\n display: block;\n position: relative;\n margin: 0 0.75rem;\n\n --ix-layout-grid-gap: 1.5rem;\n\n .container {\n display: flex;\n align-items: stretch;\n flex-wrap: wrap;\n gap: var(--ix-layout-grid-gap);\n }\n\n ::slotted() {\n flex-grow: 0;\n flex-shrink: 0;\n }\n}\n","import { Component, Element, Host, Prop, Watch, h } from '@stencil/core';\nimport { IxComponent } from '../utils/internal';\n\n/\n @~~since 2.6.0\n /\n@~~Component({\n tag: 'ix-layout-auto',\n styleUrl: 'layout-auto.scss',\n shadow: true,\n})\nexport class LayoutForm implements IxComponent {\n @Element() hostElement!: HTMLIxLayoutAutoElement;\n\n /\n Defines the layout of the form.\n /\n @Prop() layout: {\n minWidth: string;\n columns: number;\n }[] = [\n { minWidth: '0', columns: 1 },\n { minWidth: '48em', columns: 2 },\n ];\n\n private mediaQueryList: {\n mediaQuery: MediaQueryList;\n layout: {\n minWidth: string;\n columns: number;\n };\n }[] = [];\n\n private readonly observer = new MutationObserver(() =>\n this.calculateGridTemplateColumns()\n );\n\n private readonly resizeObserver = new ResizeObserver(() => {\n this.calculateGridTemplateColumns();\n });\n\n connectedCallback(): void {\n this.observer.observe(this.hostElement, {\n childList: true,\n subtree: true,\n attributes: true,\n attributeFilter: ['data-colspan'],\n });\n this.resizeObserver.observe(this.hostElement);\n\n this.calculateGridTemplateColumns();\n }\n\n componentWillLoad(): void \| Promise<void> {\n this.calculateGridTemplateColumns();\n }\n\n disconnectedCallback(): void {\n if (this.observer) {\n this.observer.disconnect();\n }\n\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n }\n\n @Watch('layout')\n updateMediaQueryList() {\n this.mediaQueryList = [];\n this.layout.forEach((layout) => {\n const mediaQuery = window.matchMedia(`(min-width: ${layout.minWidth})`);\n this.mediaQueryList.push({\n mediaQuery,\n layout,\n });\n });\n }\n\n private parseNumber(number: string \| null) {\n if (!number) {\n return 1;\n }\n\n const result = parseInt(number);\n if (isNaN(result)) {\n return 1;\n }\n\n return result;\n }\n\n private calculateGridTemplateColumns() {\n this.updateMediaQueryList();\n\n let layoutColumns = 1;\n let columnSpacing = 'var(--ix-layout-grid-gap)';\n\n this.mediaQueryList.forEach((mediaQuery) => {\n if (mediaQuery.mediaQuery.matches) {\n layoutColumns = mediaQuery.layout.columns;\n }\n });\n\n let column = 0;\n Array.from(\n this.hostElement.children as HTMLCollectionOf<HTMLElement>\n ).forEach((child) => {\n let colspan = this.parseNumber(child.getAttribute('data-colspan'));\n colspan = Math.min(colspan, layoutColumns);\n const childRatio = colspan / layoutColumns;\n\n child.style.width = `calc(${childRatio 99.9}% - ${\n 1 - childRatio\n } * ${columnSpacing})`;\n\n if (column + colspan > layoutColumns) {\n column = 0;\n }\n\n column = (column + colspan) % layoutColumns;\n });\n }\n\n render() {\n return (\n <Host>\n <div class=\"container\">\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,aAAa,GAAG,iOAAiO;;~~MCW1O~~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"}
1	+ {"version":3,"file":"ix-layout-auto.entry.esm.js","sources":["src/components/layout-auto/layout-auto.scss?tag=ix-layout-auto&encapsulation=shadow","src/components/layout-auto/layout-auto.tsx"],"sourcesContent":[":host {\n display: block;\n position: relative;\n margin: 0 0.75rem;\n\n --ix-layout-grid-gap: 1.5rem;\n\n .container {\n display: flex;\n align-items: stretch;\n flex-wrap: wrap;\n gap: var(--ix-layout-grid-gap);\n }\n\n ::slotted() {\n flex-grow: 0;\n flex-shrink: 0;\n }\n}\n","import { Component, Element, Host, Prop, Watch, h } from '@stencil/core';\nimport { IxComponent } from '../utils/internal';\n\n@Component({\n tag: 'ix-layout-auto',\n styleUrl: 'layout-auto.scss',\n shadow: true,\n})\nexport class LayoutForm implements IxComponent {\n @Element() hostElement!: HTMLIxLayoutAutoElement;\n\n /\n Defines the layout of the form.\n /\n @Prop() layout: {\n minWidth: string;\n columns: number;\n }[] = [\n { minWidth: '0', columns: 1 },\n { minWidth: '48em', columns: 2 },\n ];\n\n private mediaQueryList: {\n mediaQuery: MediaQueryList;\n layout: {\n minWidth: string;\n columns: number;\n };\n }[] = [];\n\n private readonly observer = new MutationObserver(() =>\n this.calculateGridTemplateColumns()\n );\n\n private readonly resizeObserver = new ResizeObserver(() => {\n this.calculateGridTemplateColumns();\n });\n\n connectedCallback(): void {\n this.observer.observe(this.hostElement, {\n childList: true,\n subtree: true,\n attributes: true,\n attributeFilter: ['data-colspan'],\n });\n this.resizeObserver.observe(this.hostElement);\n\n this.calculateGridTemplateColumns();\n }\n\n componentWillLoad(): void \| Promise<void> {\n this.calculateGridTemplateColumns();\n }\n\n disconnectedCallback(): void {\n if (this.observer) {\n this.observer.disconnect();\n }\n\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n }\n\n @Watch('layout')\n updateMediaQueryList() {\n this.mediaQueryList = [];\n this.layout.forEach((layout) => {\n const mediaQuery = window.matchMedia(`(min-width: ${layout.minWidth})`);\n this.mediaQueryList.push({\n mediaQuery,\n layout,\n });\n });\n }\n\n private parseNumber(number: string \| null) {\n if (!number) {\n return 1;\n }\n\n const result = parseInt(number);\n if (isNaN(result)) {\n return 1;\n }\n\n return result;\n }\n\n private calculateGridTemplateColumns() {\n this.updateMediaQueryList();\n\n let layoutColumns = 1;\n let columnSpacing = 'var(--ix-layout-grid-gap)';\n\n this.mediaQueryList.forEach((mediaQuery) => {\n if (mediaQuery.mediaQuery.matches) {\n layoutColumns = mediaQuery.layout.columns;\n }\n });\n\n let column = 0;\n Array.from(\n this.hostElement.children as HTMLCollectionOf<HTMLElement>\n ).forEach((child) => {\n let colspan = this.parseNumber(child.getAttribute('data-colspan'));\n colspan = Math.min(colspan, layoutColumns);\n const childRatio = colspan / layoutColumns;\n\n child.style.width = `calc(${childRatio 99.9}% - ${\n 1 - childRatio\n } * ${columnSpacing})`;\n\n if (column + colspan > layoutColumns) {\n column = 0;\n }\n\n column = (column + colspan) % layoutColumns;\n });\n }\n\n render() {\n return (\n <Host>\n <div class=\"container\">\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}

package/dist/siemens-ix/ix-link-button.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ix-link-button.entry.esm.js","sources":["src/components/link-button/link-button.scss?tag=ix-link-button&encapsulation=shadow","src/components/link-button/link-button.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'common-variables';\n@import 'legacy/components/buttons';\n@import 'mixins/hover';\n\n:host {\n display: inline-flex;\n height: $x-large-space;\n font-size: $font-size-default;\n font-weight: $font-weight-normal;\n min-width: $x-large-space;\n\n .link-button {\n display: inline-flex;\n position: relative;\n width: 100%;\n padding: 0 $tiny-space 0 0;\n align-items: center;\n justify-content: center;\n background-color: transparent;\n color: var(--theme-color-primary);\n cursor: pointer;\n text-decoration: none;\n\n .link {\n display: block;\n position: relative;\n width: 100%;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n }\n\n @include hover {\n color: var(--theme-color-dynamic--hover);\n\n .link {\n text-decoration: underline;\n text-underline-offset: 0.2rem;\n }\n }\n\n @include active {\n color: var(--theme-color-dynamic--active);\n\n .link {\n text-decoration: underline;\n text-underline-offset: 0.2rem;\n }\n }\n\n &.disabled {\n cursor: default;\n color: var(--theme-color-weak-text);\n }\n\n a {\n all: unset;\n }\n }\n\n :focus-visible {\n outline: 1px solid var(--theme-color-focus-bdr);\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 { iconChevronRightSmall } from '@siemens/ix-icons/icons';\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n/\n @~~since 2.0.0\n /\n@~~Component({\n tag: 'ix-link-button',\n styleUrl: 'link-button.scss',\n shadow: true,\n})\nexport class LinkButton {\n /\n Disable the link button\n /\n @Prop() disabled = false;\n\n /\n Url for the link button\n /\n @Prop() url?: string;\n\n /\n Specifies where to open the link\n \n https://www.w3schools.com/html/html_links.asp\n */\n @Prop() target: '_self' \| '_blank' \| '_parent' \| '_top' = '_self';\n\n render() {\n return (\n <Host>\n <a\n title={this.url}\n tabindex=\"0\"\n class={{\n 'link-button': true,\n disabled: this.disabled,\n }}\n href={this.disabled ? undefined : this.url}\n target={this.target}\n >\n <ix-icon\n class=\"icon\"\n name={iconChevronRightSmall}\n size=\"16\"\n ></ix-icon>\n <div\n class={{\n link: true,\n disabled: this.disabled,\n }}\n >\n <slot></slot>\n </div>\n </a>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;;AAAA,MAAM,aAAa,GAAG,0wbAA0wb;;~~MCoBnxb~~,UAAU,GAAA,MAAA;AALvB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAOxB;;;;AAIG;AACK,QAAA,IAAM,CAAA,MAAA,GAA4C,OAAO;AAgClE;IA9BC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CACE,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,IAAI,CAAC,GAAG,EACf,QAAQ,EAAC,GAAG,EACZ,KAAK,EAAE;AACL,gBAAA,aAAa,EAAE,IAAI;gBACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,EACD,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAG,SAAS,GAAG,IAAI,CAAC,GAAG,EAC1C,MAAM,EAAE,IAAI,CAAC,MAAM,EAAA,EAEnB,CACE,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,MAAM,EACZ,IAAI,EAAE,qBAAqB,EAC3B,IAAI,EAAC,IAAI,EACA,CAAA,EACX,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,IAAI,EAAE,IAAI;gBACV,QAAQ,EAAE,IAAI,CAAC,QAAQ;AACxB,aAAA,EAAA,EAED,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACJ,CACC;;;;;;;"}
1	+ {"version":3,"file":"ix-link-button.entry.esm.js","sources":["src/components/link-button/link-button.scss?tag=ix-link-button&encapsulation=shadow","src/components/link-button/link-button.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'common-variables';\n@import 'legacy/components/buttons';\n@import 'mixins/hover';\n\n:host {\n display: inline-flex;\n height: $x-large-space;\n font-size: $font-size-default;\n font-weight: $font-weight-normal;\n min-width: $x-large-space;\n\n .link-button {\n display: inline-flex;\n position: relative;\n width: 100%;\n padding: 0 $tiny-space 0 0;\n align-items: center;\n justify-content: center;\n background-color: transparent;\n color: var(--theme-color-primary);\n cursor: pointer;\n text-decoration: none;\n\n .link {\n display: block;\n position: relative;\n width: 100%;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n }\n\n @include hover {\n color: var(--theme-color-dynamic--hover);\n\n .link {\n text-decoration: underline;\n text-underline-offset: 0.2rem;\n }\n }\n\n @include active {\n color: var(--theme-color-dynamic--active);\n\n .link {\n text-decoration: underline;\n text-underline-offset: 0.2rem;\n }\n }\n\n &.disabled {\n cursor: default;\n color: var(--theme-color-weak-text);\n }\n\n a {\n all: unset;\n }\n }\n\n :focus-visible {\n outline: 1px solid var(--theme-color-focus-bdr);\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 { iconChevronRightSmall } from '@siemens/ix-icons/icons';\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'ix-link-button',\n styleUrl: 'link-button.scss',\n shadow: true,\n})\nexport class LinkButton {\n /\n Disable the link button\n /\n @Prop() disabled = false;\n\n /\n Url for the link button\n /\n @Prop() url?: string;\n\n /\n Specifies where to open the link\n \n https://www.w3schools.com/html/html_links.asp\n */\n @Prop() target: '_self' \| '_blank' \| '_parent' \| '_top' = '_self';\n\n render() {\n return (\n <Host>\n <a\n title={this.url}\n tabindex=\"0\"\n class={{\n 'link-button': true,\n disabled: this.disabled,\n }}\n href={this.disabled ? undefined : this.url}\n target={this.target}\n >\n <ix-icon\n class=\"icon\"\n name={iconChevronRightSmall}\n size=\"16\"\n ></ix-icon>\n <div\n class={{\n link: true,\n disabled: this.disabled,\n }}\n >\n <slot></slot>\n </div>\n </a>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;;AAAA,MAAM,aAAa,GAAG,0wbAA0wb;;MCiBnxb,UAAU,GAAA,MAAA;AALvB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAOxB;;;;AAIG;AACK,QAAA,IAAM,CAAA,MAAA,GAA4C,OAAO;AAgClE;IA9BC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CACE,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,IAAI,CAAC,GAAG,EACf,QAAQ,EAAC,GAAG,EACZ,KAAK,EAAE;AACL,gBAAA,aAAa,EAAE,IAAI;gBACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,EACD,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAG,SAAS,GAAG,IAAI,CAAC,GAAG,EAC1C,MAAM,EAAE,IAAI,CAAC,MAAM,EAAA,EAEnB,CACE,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,MAAM,EACZ,IAAI,EAAE,qBAAqB,EAC3B,IAAI,EAAC,IAAI,EACA,CAAA,EACX,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,IAAI,EAAE,IAAI;gBACV,QAAQ,EAAE,IAAI,CAAC,QAAQ;AACxB,aAAA,EAAA,EAED,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACJ,CACC;;;;;;;"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ix-map-navigation.entry.esm.js","sources":["src/components/map-navigation/map-navigation.scss?tag=ix-map-navigation&encapsulation=shadow","src/components/map-navigation/map-navigation.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'common-variables';\n@import 'legacy/mixins/fonts';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n\n $appHeaderHeight: 3.5rem;\n $appHeaderGradientHeight: 4rem;\n $navHeaderHeight: 11.5rem;\n $sidebarWidth: 29.75rem;\n\n display: flex;\n position: relative;\n width: 100%;\n height: 100%;\n\n .map-nav {\n display: flex;\n margin-left: 3.25rem;\n position: relative;\n height: 100%;\n flex-grow: 1;\n overflow: hidden;\n }\n\n .map-nav-sidebar {\n display: flex;\n flex-direction: column;\n align-items: center;\n width: $sidebarWidth;\n max-width: $sidebarWidth;\n min-width: $sidebarWidth;\n height: 100%;\n left: 4rem;\n background-color: var(--theme-map-navigation--background);\n border-inline-end: 0.125rem solid\n var(--theme-map-navigation-separator--background);\n z-index: 99;\n\n &.display-none {\n display: none;\n }\n }\n\n .map-nav-sidebar-content {\n align-items: center;\n position: relative;\n overflow: auto;\n height: 100%;\n width: 100%;\n\n .map-nav-sidebar-static-content {\n @include text-h2;\n display: flex;\n justify-content: space-between;\n margin-top: 0.437rem;\n margin-bottom: 0.812rem;\n margin-left: $default-space;\n margin-right: $default-space;\n }\n }\n\n .map-nav-header {\n display: flex;\n position: relative;\n align-items: center;\n height: $appHeaderHeight;\n min-height: $appHeaderHeight;\n width: 100%;\n\n .map-nav-header-brand {\n background-color: var(--theme-map-navigation-background);\n\n padding-left: $default-space;\n padding-right: $default-space;\n padding-bottom: 0.625rem;\n height: 100%;\n width: 100%;\n --theme-app-header--color: var(--theme-map-navigation-header--color);\n --theme-app-header-logo--color: var(--theme-map-navigation-logo--color);\n\n button {\n margin-left: $default-space;\n }\n }\n }\n\n .map-nav-header-content {\n display: flex;\n height: $appHeaderHeight;\n align-items: center;\n overflow: hidden;\n padding: 0 $default-space;\n\n &.empty {\n height: 0;\n }\n }\n\n .map-nav-title {\n @include text-h2();\n\n display: flex;\n align-items: center;\n flex-grow: 1;\n }\n\n .content {\n display: block;\n flex-grow: 1;\n position: relative;\n height: 100%;\n overflow: hidden;\n z-index: calc(var(--theme-z-index-sticky) - 1);\n }\n\n ::slotted(ix-menu) {\n position: absolute;\n }\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n State,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { ApplicationLayoutContext } from '../utils/application-layout/context';\nimport { useContextProvider } from '../utils/context';\nimport { iconContextMenu } from '@siemens/ix-icons/icons';\n\n@Component({\n tag: 'ix-map-navigation',\n styleUrl: 'map-navigation.scss',\n shadow: true,\n})\nexport class MapNavigation {\n private static readonly defaultTime = 150;\n private static readonly slowTime = 500;\n\n @Element() hostElement!: HTMLIxMapNavigationElement;\n\n /\n Application name\n /\n @Prop() applicationName?: string;\n\n /\n Navigation title\n /\n @Prop() navigationTitle?: string;\n\n /\n Hide the sidebar context menu button when set to true\n /\n @Prop() hideContextMenu = true;\n\n /\n Navigation toggled\n /\n @Event() navigationToggled!: EventEmitter<boolean>;\n\n /\n Context menu clicked\n /\n @Event() contextMenuClick!: EventEmitter<void>;\n\n @State() isSidebarOpen = true;\n @State() hasContentHeader = false;\n\n get menu() {\n return this.hostElement.querySelector('ix-menu')!;\n }\n\n get menuOverlay() {\n return this.hostElement.querySelector('ix-menu-overlay')!;\n }\n\n get mapNavMenu() {\n return this.hostElement.shadowRoot!.querySelector('.map-nav-menu')!;\n }\n\n get sidebar() {\n return this.hostElement.shadowRoot!.querySelector('.map-nav-sidebar')!;\n }\n\n get overlay() {\n return this.hostElement.shadowRoot!.querySelector('#overlay')!;\n }\n\n componentDidRender() {\n this.appendMenu();\n this.closeOverlay();\n }\n\n componentWillLoad() {\n useContextProvider(this.hostElement, ApplicationLayoutContext, {\n hideHeader: false,\n host: 'map-navigation',\n });\n }\n\n private appendMenu() {\n this.menu.addEventListener(\n 'mapExpandChange',\n (event: CustomEvent<boolean>) => {\n const state = !event.detail;\n this.toggleSidebar(state);\n }\n );\n this.menu.enableMapExpand = true;\n }\n\n /\n Change the visibility of the sidebar\n \n @param show new visibility state\n * @since 1.6.0\n /\n @Method()\n async toggleSidebar(show?: boolean) {\n if (show !== undefined) {\n this.isSidebarOpen = show;\n } else {\n this.isSidebarOpen = !this.isSidebarOpen;\n }\n\n if (this.isSidebarOpen) {\n this.openSidebar();\n } else {\n this.closeSidebar();\n }\n\n this.navigationToggled.emit(this.isSidebarOpen);\n this.menu.toggleMapExpand(this.isSidebarOpen);\n }\n\n private closeSidebar() {\n anime({\n targets: this.sidebar,\n duration: MapNavigation.defaultTime,\n marginLeft: [0, '-29.75rem'],\n opacity: [1, 0],\n easing: 'easeInSine',\n complete: () => {\n this.sidebar.classList.add('display-none');\n },\n });\n }\n\n private openSidebar() {\n anime({\n targets: this.sidebar,\n duration: MapNavigation.defaultTime,\n marginLeft: ['-29.75rem', 0],\n opacity: [0, 1],\n easing: 'easeOutSine',\n begin: () => {\n this.sidebar.classList.remove('display-none');\n },\n });\n }\n\n /\n Open a overlay inside content area\n * @deprecated Will be removed in 2.0.0. Use slot based approach\n \n @param name\n * @param component\n * @param icon\n * @param color\n /\n @Method()\n async openOverlay(\n name: string,\n component: HTMLElement,\n icon?: string,\n color?: string\n ) {\n anime({\n targets: this.overlay,\n duration: MapNavigation.slowTime,\n backdropFilter: [0, 'blur(1rem)'],\n translateX: ['-4rem', 0],\n opacity: [0, 1],\n easing: 'easeOutSine',\n begin: () => {\n this.overlay.classList.remove('display-none');\n },\n });\n\n const overlayInstance = document.createElement('ix-map-navigation-overlay');\n overlayInstance.setAttribute('color', color ?? '');\n overlayInstance.setAttribute('name', name);\n overlayInstance.setAttribute('icon', icon ?? '');\n overlayInstance.setAttribute('slot', 'overlay');\n overlayInstance.addEventListener('closeClick', () => this.closeOverlay());\n overlayInstance.appendChild(component);\n this.hostElement.appendChild(overlayInstance);\n }\n\n /\n Close current shown overlay\n * @deprecated Will be removed in 2.0.0. Use slot based approach\n */\n @Method()\n async closeOverlay() {\n anime({\n targets: this.overlay,\n duration: MapNavigation.slowTime,\n backdropFilter: ['blur(1rem)', 0],\n translateX: [0, '-4rem'],\n opacity: [1, 0],\n easing: 'easeInSine',\n complete: () => {\n if (!this.overlay) {\n return;\n }\n this.overlay.firstChild?.remove();\n this.overlay.classList.add('display-none');\n },\n });\n }\n\n private checkHasContentHeader(e: Event) {\n const nodes = (e.currentTarget as HTMLSlotElement).assignedNodes({\n flatten: true,\n });\n\n this.hasContentHeader = nodes?.length !== 0;\n }\n\n render() {\n return (\n <Host>\n <slot name=\"menu\"></slot>\n <div class=\"map-nav\">\n <div class=\"map-nav-sidebar\">\n <div class=\"map-nav-header\">\n <ix-application-header\n name={this.applicationName}\n class=\"map-nav-header-brand\"\n >\n <slot slot=\"logo\" name=\"logo\"></slot>\n </ix-application-header>\n </div>\n <div class=\"map-nav-sidebar-content\">\n <div class=\"map-nav-sidebar-static-content\">\n <div class=\"map-nav-title\">{this.navigationTitle}</div>\n {this.hideContextMenu ? (\n ''\n ) : (\n <ix-icon-button\n icon={iconContextMenu}\n ghost\n size=\"24\"\n variant=\"secondary\"\n onClick={(_) => this.contextMenuClick.emit()}\n ></ix-icon-button>\n )}\n </div>\n <div class=\"map-nav-sidebar-user-content\">\n <slot name=\"sidebar-content\"></slot>\n </div>\n </div>\n </div>\n <div class=\"content\">\n <div\n class={{\n 'map-nav-header-content': true,\n 'bg-2': true,\n empty: !this.hasContentHeader,\n }}\n >\n <slot\n name=\"content-header\"\n onSlotchange={(e) => this.checkHasContentHeader(e)}\n ></slot>\n </div>\n <main>\n <slot></slot>\n <slot name=\"overlay\"></slot>\n </main>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"ix-map-navigation.entry.esm.js","sources":["src/components/map-navigation/map-navigation.scss?tag=ix-map-navigation&encapsulation=shadow","src/components/map-navigation/map-navigation.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'common-variables';\n@import 'legacy/mixins/fonts';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n\n $appHeaderHeight: 3.5rem;\n $appHeaderGradientHeight: 4rem;\n $navHeaderHeight: 11.5rem;\n $sidebarWidth: 29.75rem;\n\n display: flex;\n position: relative;\n width: 100%;\n height: 100%;\n\n .map-nav {\n display: flex;\n margin-left: 3.25rem;\n position: relative;\n height: 100%;\n flex-grow: 1;\n overflow: hidden;\n }\n\n .map-nav-sidebar {\n display: flex;\n flex-direction: column;\n align-items: center;\n width: $sidebarWidth;\n max-width: $sidebarWidth;\n min-width: $sidebarWidth;\n height: 100%;\n left: 4rem;\n background-color: var(--theme-map-navigation--background);\n border-inline-end: 0.125rem solid\n var(--theme-map-navigation-separator--background);\n z-index: 99;\n\n &.display-none {\n display: none;\n }\n }\n\n .map-nav-sidebar-content {\n align-items: center;\n position: relative;\n overflow: auto;\n height: 100%;\n width: 100%;\n\n .map-nav-sidebar-static-content {\n @include text-h2;\n display: flex;\n justify-content: space-between;\n margin-top: 0.437rem;\n margin-bottom: 0.812rem;\n margin-left: $default-space;\n margin-right: $default-space;\n }\n }\n\n .map-nav-header {\n display: flex;\n position: relative;\n align-items: center;\n height: $appHeaderHeight;\n min-height: $appHeaderHeight;\n width: 100%;\n\n .map-nav-header-brand {\n background-color: var(--theme-map-navigation-background);\n\n padding-left: $default-space;\n padding-right: $default-space;\n padding-bottom: 0.625rem;\n height: 100%;\n width: 100%;\n --theme-app-header--color: var(--theme-map-navigation-header--color);\n --theme-app-header-logo--color: var(--theme-map-navigation-logo--color);\n\n button {\n margin-left: $default-space;\n }\n }\n }\n\n .map-nav-header-content {\n display: flex;\n height: $appHeaderHeight;\n align-items: center;\n overflow: hidden;\n padding: 0 $default-space;\n\n &.empty {\n height: 0;\n }\n }\n\n .map-nav-title {\n @include text-h2();\n\n display: flex;\n align-items: center;\n flex-grow: 1;\n }\n\n .content {\n display: block;\n flex-grow: 1;\n position: relative;\n height: 100%;\n overflow: hidden;\n z-index: calc(var(--theme-z-index-sticky) - 1);\n }\n\n ::slotted(ix-menu) {\n position: absolute;\n }\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n State,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { ApplicationLayoutContext } from '../utils/application-layout/context';\nimport { useContextProvider } from '../utils/context';\nimport { iconContextMenu } from '@siemens/ix-icons/icons';\n\n@Component({\n tag: 'ix-map-navigation',\n styleUrl: 'map-navigation.scss',\n shadow: true,\n})\nexport class MapNavigation {\n private static readonly defaultTime = 150;\n private static readonly slowTime = 500;\n\n @Element() hostElement!: HTMLIxMapNavigationElement;\n\n /\n Application name\n /\n @Prop() applicationName?: string;\n\n /\n Navigation title\n /\n @Prop() navigationTitle?: string;\n\n /\n Hide the sidebar context menu button when set to true\n /\n @Prop() hideContextMenu = true;\n\n /\n Navigation toggled\n /\n @Event() navigationToggled!: EventEmitter<boolean>;\n\n /\n Context menu clicked\n /\n @Event() contextMenuClick!: EventEmitter<void>;\n\n @State() isSidebarOpen = true;\n @State() hasContentHeader = false;\n\n get menu() {\n return this.hostElement.querySelector('ix-menu')!;\n }\n\n get menuOverlay() {\n return this.hostElement.querySelector('ix-menu-overlay')!;\n }\n\n get mapNavMenu() {\n return this.hostElement.shadowRoot!.querySelector('.map-nav-menu')!;\n }\n\n get sidebar() {\n return this.hostElement.shadowRoot!.querySelector('.map-nav-sidebar')!;\n }\n\n get overlay() {\n return this.hostElement.shadowRoot!.querySelector('#overlay')!;\n }\n\n componentDidRender() {\n this.appendMenu();\n this.closeOverlay();\n }\n\n componentWillLoad() {\n useContextProvider(this.hostElement, ApplicationLayoutContext, {\n hideHeader: false,\n host: 'map-navigation',\n });\n }\n\n private appendMenu() {\n this.menu.addEventListener(\n 'mapExpandChange',\n (event: CustomEvent<boolean>) => {\n const state = !event.detail;\n this.toggleSidebar(state);\n }\n );\n this.menu.enableMapExpand = true;\n }\n\n /\n Change the visibility of the sidebar\n \n @param show new visibility state\n /\n @Method()\n async toggleSidebar(show?: boolean) {\n if (show !== undefined) {\n this.isSidebarOpen = show;\n } else {\n this.isSidebarOpen = !this.isSidebarOpen;\n }\n\n if (this.isSidebarOpen) {\n this.openSidebar();\n } else {\n this.closeSidebar();\n }\n\n this.navigationToggled.emit(this.isSidebarOpen);\n this.menu.toggleMapExpand(this.isSidebarOpen);\n }\n\n private closeSidebar() {\n anime({\n targets: this.sidebar,\n duration: MapNavigation.defaultTime,\n marginLeft: [0, '-29.75rem'],\n opacity: [1, 0],\n easing: 'easeInSine',\n complete: () => {\n this.sidebar.classList.add('display-none');\n },\n });\n }\n\n private openSidebar() {\n anime({\n targets: this.sidebar,\n duration: MapNavigation.defaultTime,\n marginLeft: ['-29.75rem', 0],\n opacity: [0, 1],\n easing: 'easeOutSine',\n begin: () => {\n this.sidebar.classList.remove('display-none');\n },\n });\n }\n\n /\n Open a overlay inside content area\n * @deprecated Will be removed in 2.0.0. Use slot based approach\n \n @param name\n * @param component\n * @param icon\n * @param color\n /\n @Method()\n async openOverlay(\n name: string,\n component: HTMLElement,\n icon?: string,\n color?: string\n ) {\n anime({\n targets: this.overlay,\n duration: MapNavigation.slowTime,\n backdropFilter: [0, 'blur(1rem)'],\n translateX: ['-4rem', 0],\n opacity: [0, 1],\n easing: 'easeOutSine',\n begin: () => {\n this.overlay.classList.remove('display-none');\n },\n });\n\n const overlayInstance = document.createElement('ix-map-navigation-overlay');\n overlayInstance.setAttribute('color', color ?? '');\n overlayInstance.setAttribute('name', name);\n overlayInstance.setAttribute('icon', icon ?? '');\n overlayInstance.setAttribute('slot', 'overlay');\n overlayInstance.addEventListener('closeClick', () => this.closeOverlay());\n overlayInstance.appendChild(component);\n this.hostElement.appendChild(overlayInstance);\n }\n\n /\n Close current shown overlay\n * @deprecated Will be removed in 2.0.0. Use slot based approach\n */\n @Method()\n async closeOverlay() {\n anime({\n targets: this.overlay,\n duration: MapNavigation.slowTime,\n backdropFilter: ['blur(1rem)', 0],\n translateX: [0, '-4rem'],\n opacity: [1, 0],\n easing: 'easeInSine',\n complete: () => {\n if (!this.overlay) {\n return;\n }\n this.overlay.firstChild?.remove();\n this.overlay.classList.add('display-none');\n },\n });\n }\n\n private checkHasContentHeader(e: Event) {\n const nodes = (e.currentTarget as HTMLSlotElement).assignedNodes({\n flatten: true,\n });\n\n this.hasContentHeader = nodes?.length !== 0;\n }\n\n render() {\n return (\n <Host>\n <slot name=\"menu\"></slot>\n <div class=\"map-nav\">\n <div class=\"map-nav-sidebar\">\n <div class=\"map-nav-header\">\n <ix-application-header\n name={this.applicationName}\n class=\"map-nav-header-brand\"\n >\n <slot slot=\"logo\" name=\"logo\"></slot>\n </ix-application-header>\n </div>\n <div class=\"map-nav-sidebar-content\">\n <div class=\"map-nav-sidebar-static-content\">\n <div class=\"map-nav-title\">{this.navigationTitle}</div>\n {this.hideContextMenu ? (\n ''\n ) : (\n <ix-icon-button\n icon={iconContextMenu}\n ghost\n size=\"24\"\n variant=\"secondary\"\n onClick={(_) => this.contextMenuClick.emit()}\n ></ix-icon-button>\n )}\n </div>\n <div class=\"map-nav-sidebar-user-content\">\n <slot name=\"sidebar-content\"></slot>\n </div>\n </div>\n </div>\n <div class=\"content\">\n <div\n class={{\n 'map-nav-header-content': true,\n 'bg-2': true,\n empty: !this.hasContentHeader,\n }}\n >\n <slot\n name=\"content-header\"\n onSlotchange={(e) => this.checkHasContentHeader(e)}\n ></slot>\n </div>\n <main>\n <slot></slot>\n <slot name=\"overlay\"></slot>\n </main>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}

package/dist/siemens-ix/ix-menu-avatar.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ix-menu-avatar.entry.esm.js","sources":["src/components/menu-avatar/menu-avatar.scss?tag=ix-menu-avatar&encapsulation=shadow","src/components/menu-avatar/menu-avatar.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/text-truncation';\n@import 'mixins/hover';\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n display: block;\n position: relative;\n margin-bottom: 0.5rem;\n margin-right: 0.75rem;\n\n .avatar {\n all: unset;\n box-sizing: border-box;\n\n display: flex;\n align-items: center;\n height: 2.5rem;\n width: 100%;\n max-height: 2.5rem;\n padding-left: 0.25rem;\n margin-left: 0.41rem;\n margin-right: 0.35rem;\n transition: var(--theme-default-time);\n\n .avatar-name {\n display: flex;\n flex-direction: column;\n overflow: hidden;\n white-space: nowrap;\n margin-left: $default-space;\n line-height: 1.14;\n\n .text-default-single {\n color: var(--theme-nav-item-primary--color);\n @include ellipsis;\n }\n }\n\n border-radius: 1.25rem;\n\n @include hover {\n background-color: var(--theme-avatar-btn--background--hover);\n color: var(--theme-avatar-btn--color--hover);\n }\n\n @include active {\n background-color: var(--theme-avatar-btn--background--active);\n color: var(--theme-avatar-btn--color--active);\n }\n }\n\n .avatar:focus-visible {\n outline: 1px solid var(--theme-color-focus-bdr);\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 {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n} from '@stencil/core';\nimport { getSlottedElements } from '../utils/shadow-dom';\nimport { iconLogOut } from '@siemens/ix-icons/icons';\n\n@Component({\n tag: 'ix-menu-avatar',\n styleUrl: 'menu-avatar.scss',\n shadow: true,\n})\nexport class MenuAvatar {\n @Element() hostElement!: HTMLIxMenuAvatarElement;\n\n /\n First line of text\n /\n @Prop() top?: string;\n\n /\n Second line of text\n /\n @Prop() bottom?: string;\n\n /\n Display a avatar image\n \n @since 1.4.0\n /\n @Prop() image?: string;\n\n /\n Display the initials of the user. Will be overwritten by image\n \n @since 1.4.0\n /\n @Prop() initials?: string;\n\n /\n Use for translation\n /\n @Prop() i18nLogout: string = 'Logout';\n\n /\n Control the visibility of the logout button\n * @since 2.1.0\n /\n @Prop() showLogoutButton: boolean = true;\n\n /\n Control the visibility of the dropdown menu\n * @since 2.1.0\n /\n @State() showContextMenu: boolean = false;\n\n /\n Logout click\n */\n @Event() logoutClick!: EventEmitter;\n\n private avatarElementId = 'ix-menu-avatar-id';\n\n onSlotChange() {\n const slot = this.hostElement.shadowRoot!.querySelector('slot');\n if (!slot) {\n return;\n }\n const elements = getSlottedElements(slot);\n this.showContextMenu = elements.length !== 0;\n }\n\n render() {\n return (\n <Host slot=\"ix-menu-avatar\">\n <button\n class=\"nav-item top-item avatar no-hover\"\n title={this.top}\n id={this.avatarElementId}\n tabIndex={0}\n >\n <ix-avatar image={this.image} initials={this.initials}></ix-avatar>\n\n <div class=\"avatar-name\">\n <span class=\"text-default-single\" title={this.top}>\n {this.top}\n </span>\n <span class=\"text-default-single\" title={this.bottom}>\n {this.bottom}\n </span>\n </div>\n </button>\n <ix-dropdown\n trigger={this.hostElement}\n placement={'right-start'}\n hidden={!this.showContextMenu && !this.showLogoutButton}\n offset={{\n mainAxis: 16,\n }}\n >\n <slot onSlotchange={() => this.onSlotChange()}></slot>\n {this.showLogoutButton ? (\n <ix-menu-avatar-item\n label={this.i18nLogout}\n icon={iconLogOut}\n onClick={(e) => {\n this.logoutClick.emit(e);\n }}\n ></ix-menu-avatar-item>\n ) : null}\n </ix-dropdown>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;;;AAAA,MAAM,aAAa,GAAG,+3DAA+3D;;MC0Bx4D,UAAU,GAAA,MAAA;AALvB,IAAA,WAAA,CAAA,OAAA,EAAA;;;~~AAgCE~~;;AAEG;AACK,QAAA,IAAU,CAAA,UAAA,GAAW,QAAQ;AAErC~~;;;AAGG~~;AACK,QAAA,IAAgB,CAAA,gBAAA,GAAY,IAAI;AAExC~~;;;AAGG~~;AACM,QAAA,IAAe,CAAA,eAAA,GAAY,KAAK;AAOjC,QAAA,IAAe,CAAA,eAAA,GAAG,mBAAmB;AAqD9C;IAnDC,YAAY,GAAA;AACV,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,UAAW,CAAC,aAAa,CAAC,MAAM,CAAC;QAC/D,IAAI,CAAC,IAAI,EAAE;YACT;;AAEF,QAAA,MAAM,QAAQ,GAAG,kBAAkB,CAAC,IAAI,CAAC;QACzC,IAAI,CAAC,eAAe,GAAG,QAAQ,CAAC,MAAM,KAAK,CAAC;;IAG9C,MAAM,GAAA;AACJ,QAAA,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,gBAAgB,EAAA,EACzB,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,mCAAmC,EACzC,KAAK,EAAE,IAAI,CAAC,GAAG,EACf,EAAE,EAAE,IAAI,CAAC,eAAe,EACxB,QAAQ,EAAE,CAAC,EAAA,EAEX,CAAW,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAc,CAAA,EAEnE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EACtB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,qBAAqB,EAAC,KAAK,EAAE,IAAI,CAAC,GAAG,EAAA,EAC9C,IAAI,CAAC,GAAG,CACJ,EACP,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,qBAAqB,EAAC,KAAK,EAAE,IAAI,CAAC,MAAM,IACjD,IAAI,CAAC,MAAM,CACP,CACH,CACC,EACT,CACE,CAAA,aAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,aAAa,EACxB,MAAM,EAAE,CAAC,IAAI,CAAC,eAAe,IAAI,CAAC,IAAI,CAAC,gBAAgB,EACvD,MAAM,EAAE;AACN,gBAAA,QAAQ,EAAE,EAAE;aACb,EAAA,EAED,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,YAAY,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,EAAS,CAAA,EACrD,IAAI,CAAC,gBAAgB,IACpB,CAAA,CAAA,qBAAA,EAAA,EACE,KAAK,EAAE,IAAI,CAAC,UAAU,EACtB,IAAI,EAAE,UAAU,EAChB,OAAO,EAAE,CAAC,CAAC,KAAI;AACb,gBAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC;aACzB,EAAA,CACoB,IACrB,IAAI,CACI,CACT;;;;;;;;"}
1	+ {"version":3,"file":"ix-menu-avatar.entry.esm.js","sources":["src/components/menu-avatar/menu-avatar.scss?tag=ix-menu-avatar&encapsulation=shadow","src/components/menu-avatar/menu-avatar.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/text-truncation';\n@import 'mixins/hover';\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n display: block;\n position: relative;\n margin-bottom: 0.5rem;\n margin-right: 0.75rem;\n\n .avatar {\n all: unset;\n box-sizing: border-box;\n\n display: flex;\n align-items: center;\n height: 2.5rem;\n width: 100%;\n max-height: 2.5rem;\n padding-left: 0.25rem;\n margin-left: 0.41rem;\n margin-right: 0.35rem;\n transition: var(--theme-default-time);\n\n .avatar-name {\n display: flex;\n flex-direction: column;\n overflow: hidden;\n white-space: nowrap;\n margin-left: $default-space;\n line-height: 1.14;\n\n .text-default-single {\n color: var(--theme-nav-item-primary--color);\n @include ellipsis;\n }\n }\n\n border-radius: 1.25rem;\n\n @include hover {\n background-color: var(--theme-avatar-btn--background--hover);\n color: var(--theme-avatar-btn--color--hover);\n }\n\n @include active {\n background-color: var(--theme-avatar-btn--background--active);\n color: var(--theme-avatar-btn--color--active);\n }\n }\n\n .avatar:focus-visible {\n outline: 1px solid var(--theme-color-focus-bdr);\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 {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n} from '@stencil/core';\nimport { getSlottedElements } from '../utils/shadow-dom';\nimport { iconLogOut } from '@siemens/ix-icons/icons';\n\n@Component({\n tag: 'ix-menu-avatar',\n styleUrl: 'menu-avatar.scss',\n shadow: true,\n})\nexport class MenuAvatar {\n @Element() hostElement!: HTMLIxMenuAvatarElement;\n\n /\n First line of text\n /\n @Prop() top?: string;\n\n /\n Second line of text\n /\n @Prop() bottom?: string;\n\n /\n Display a avatar image\n /\n @Prop() image?: string;\n\n /\n Display the initials of the user. Will be overwritten by image\n /\n @Prop() initials?: string;\n\n /\n Use for translation\n /\n @Prop() i18nLogout: string = 'Logout';\n\n /\n Control the visibility of the logout button\n /\n @Prop() showLogoutButton: boolean = true;\n\n /\n Control the visibility of the dropdown menu\n /\n @State() showContextMenu: boolean = false;\n\n /\n Logout click\n */\n @Event() logoutClick!: EventEmitter;\n\n private avatarElementId = 'ix-menu-avatar-id';\n\n onSlotChange() {\n const slot = this.hostElement.shadowRoot!.querySelector('slot');\n if (!slot) {\n return;\n }\n const elements = getSlottedElements(slot);\n this.showContextMenu = elements.length !== 0;\n }\n\n render() {\n return (\n <Host slot=\"ix-menu-avatar\">\n <button\n class=\"nav-item top-item avatar no-hover\"\n title={this.top}\n id={this.avatarElementId}\n tabIndex={0}\n >\n <ix-avatar image={this.image} initials={this.initials}></ix-avatar>\n\n <div class=\"avatar-name\">\n <span class=\"text-default-single\" title={this.top}>\n {this.top}\n </span>\n <span class=\"text-default-single\" title={this.bottom}>\n {this.bottom}\n </span>\n </div>\n </button>\n <ix-dropdown\n trigger={this.hostElement}\n placement={'right-start'}\n hidden={!this.showContextMenu && !this.showLogoutButton}\n offset={{\n mainAxis: 16,\n }}\n >\n <slot onSlotchange={() => this.onSlotChange()}></slot>\n {this.showLogoutButton ? (\n <ix-menu-avatar-item\n label={this.i18nLogout}\n icon={iconLogOut}\n onClick={(e) => {\n this.logoutClick.emit(e);\n }}\n ></ix-menu-avatar-item>\n ) : null}\n </ix-dropdown>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;;;AAAA,MAAM,aAAa,GAAG,+3DAA+3D;;MC0Bx4D,UAAU,GAAA,MAAA;AALvB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AA4BE;;AAEG;AACK,QAAA,IAAU,CAAA,UAAA,GAAW,QAAQ;AAErC;;AAEG;AACK,QAAA,IAAgB,CAAA,gBAAA,GAAY,IAAI;AAExC;;AAEG;AACM,QAAA,IAAe,CAAA,eAAA,GAAY,KAAK;AAOjC,QAAA,IAAe,CAAA,eAAA,GAAG,mBAAmB;AAqD9C;IAnDC,YAAY,GAAA;AACV,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,UAAW,CAAC,aAAa,CAAC,MAAM,CAAC;QAC/D,IAAI,CAAC,IAAI,EAAE;YACT;;AAEF,QAAA,MAAM,QAAQ,GAAG,kBAAkB,CAAC,IAAI,CAAC;QACzC,IAAI,CAAC,eAAe,GAAG,QAAQ,CAAC,MAAM,KAAK,CAAC;;IAG9C,MAAM,GAAA;AACJ,QAAA,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,gBAAgB,EAAA,EACzB,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,mCAAmC,EACzC,KAAK,EAAE,IAAI,CAAC,GAAG,EACf,EAAE,EAAE,IAAI,CAAC,eAAe,EACxB,QAAQ,EAAE,CAAC,EAAA,EAEX,CAAW,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAc,CAAA,EAEnE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EACtB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,qBAAqB,EAAC,KAAK,EAAE,IAAI,CAAC,GAAG,EAAA,EAC9C,IAAI,CAAC,GAAG,CACJ,EACP,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,qBAAqB,EAAC,KAAK,EAAE,IAAI,CAAC,MAAM,IACjD,IAAI,CAAC,MAAM,CACP,CACH,CACC,EACT,CACE,CAAA,aAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,aAAa,EACxB,MAAM,EAAE,CAAC,IAAI,CAAC,eAAe,IAAI,CAAC,IAAI,CAAC,gBAAgB,EACvD,MAAM,EAAE;AACN,gBAAA,QAAQ,EAAE,EAAE;aACb,EAAA,EAED,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,YAAY,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,EAAS,CAAA,EACrD,IAAI,CAAC,gBAAgB,IACpB,CAAA,CAAA,qBAAA,EAAA,EACE,KAAK,EAAE,IAAI,CAAC,UAAU,EACtB,IAAI,EAAE,UAAU,EAChB,OAAO,EAAE,CAAC,CAAC,KAAI;AACb,gBAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC;aACzB,EAAA,CACoB,IACrB,IAAI,CACI,CACT;;;;;;;;"}

package/dist/siemens-ix/ix-menu-category.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ix-menu-category.entry.esm.js","sources":["src/components/menu-category/enter-leave.ts","src/components/menu-category/menu-category.scss?tag=ix-menu-category&encapsulation=shadow","src/components/menu-category/menu-category.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2024 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\nexport function createEnterLeaveDebounce(\n enterCallback: Function,\n leaveCallback: Function,\n {\n debounceTimeEnter,\n debounceTimeLeave,\n }: {\n debounceTimeEnter: number;\n debounceTimeLeave: number;\n } = {\n debounceTimeEnter: 0,\n debounceTimeLeave: 500,\n }\n) {\n let enterTimeout: NodeJS.Timeout;\n let leaveTimeout: NodeJS.Timeout;\n\n return {\n onEnter: () => {\n clearTimeout(leaveTimeout);\n enterTimeout = setTimeout(() => {\n enterCallback();\n }, debounceTimeEnter);\n },\n onLeave: () => {\n clearTimeout(enterTimeout);\n leaveTimeout = setTimeout(() => {\n leaveCallback();\n }, debounceTimeLeave);\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/text-truncation';\n\n:host {\n @include ix-component;\n display: flex;\n flex-direction: column;\n position: relative;\n\n .category {\n display: flex;\n position: relative;\n align-items: center;\n width: 100%;\n height: 100%;\n }\n\n .category-text {\n width: 100%;\n padding-right: 0.25rem;\n @include ellipsis;\n }\n\n .category-chevron {\n margin-left: auto;\n margin-right: 0;\n transition: var(--theme-default-time) transform ease-in-out;\n }\n\n .category-chevron--open {\n transform: rotate(-180deg);\n }\n\n .menu-items {\n overflow: hidden;\n max-height: 0;\n transition: var(--theme-default-time) max-height ease-in-out;\n }\n\n .menu-items--expanded {\n max-height: 999999999px;\n padding: 0.25rem 0 0.25rem 1.625rem;\n }\n\n .menu-items--collapsed {\n display: none;\n }\n\n .category-dropdown {\n ::slotted(ix-menu-item) {\n --ix-menu-item-height: 2.5rem;\n }\n }\n\n .category-dropdown-header {\n pointer-events: none;\n padding-left: 0.125rem;\n min-width: 256px;\n }\n\n ::slotted(ix-menu-item) {\n --ix-menu-item-height: 2.5rem;\n }\n}\n\n:host(.expanded) {\n background-color: var(--theme-color-ghost--active);\n}\n\n:host {\n ::slotted(a[href]) {\n text-decoration: none !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 {\n Component,\n Element,\n h,\n Host,\n Prop,\n State,\n Event,\n EventEmitter,\n Listen,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { closestIxMenu } from '../utils/application-layout/context';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { createEnterLeaveDebounce } from './enter-leave';\nimport { iconChevronDownSmall } from '@siemens/ix-icons/icons';\n\nconst DefaultIxMenuItemHeight = 40;\nconst DefaultAnimationTimeout = 150;\n\n/\n @since 2.0.0\n /\n@Component({\n tag: 'ix-menu-category',\n styleUrl: 'menu-category.scss',\n shadow: true,\n})\nexport class MenuCategory {\n @Element() hostElement!: HTMLIxMenuCategoryElement;\n\n /\n Display name of the category\n /\n @Prop() label?: string;\n\n /\n Icon of the category\n /\n @Prop() icon?: string;\n\n /\n Show notification count on the category\n /\n @Prop() notifications?: number;\n\n /* @internal /\n // eslint-disable-next-line @stencil-community/decorators-style\n @Event({ bubbles: true, cancelable: true })\n closeOtherCategories!: EventEmitter;\n\n @State() menuExpand = false;\n @State() showItems = false;\n @State() showDropdown = false;\n @State() nestedItems: HTMLIxMenuItemElement[] = [];\n\n private observer?: MutationObserver;\n private menuItemsContainer?: HTMLDivElement;\n private ixMenu?: HTMLIxMenuElement;\n\n private enterLeaveDebounce = createEnterLeaveDebounce(\n () => {\n this.onPointerEnter();\n },\n () => {\n this.onPointerLeave();\n }\n );\n\n private isNestedItemActive() {\n return this.getNestedItems().some((item) => item.active);\n }\n\n private getNestedItems() {\n return Array.from(\n this.hostElement.querySelectorAll(':scope ix-menu-item')\n ) as HTMLIxMenuItemElement[];\n }\n\n private getNestedItemsHeight() {\n const items = this.getNestedItems();\n\n return items.length DefaultIxMenuItemHeight;\n }\n\n private onExpandCategory(showItems: boolean) {\n if (showItems) {\n this.animateFadeIn();\n } else {\n this.animateFadeOut();\n }\n }\n\n private animateFadeOut() {\n const slotHideThresholdMs = 25;\n anime({\n targets: this.menuItemsContainer,\n duration: DefaultAnimationTimeout,\n easing: 'easeInSine',\n opacity: [1, 0],\n maxHeight: [this.getNestedItemsHeight() + DefaultIxMenuItemHeight, 0],\n complete: () => {\n setTimeout(() => {\n this.showItems = false;\n this.showDropdown = false;\n }, DefaultAnimationTimeout + slotHideThresholdMs);\n },\n });\n }\n\n private animateFadeIn() {\n anime({\n targets: this.menuItemsContainer,\n duration: DefaultAnimationTimeout,\n easing: 'easeInSine',\n opacity: [0, 1],\n maxHeight: [0, this.getNestedItemsHeight() + DefaultIxMenuItemHeight],\n begin: () => {\n this.showItems = true;\n this.showDropdown = false;\n },\n });\n }\n\n private onPointerEnter() {\n if (this.ixMenu?.expand) {\n return;\n }\n this.closeOtherCategories.emit();\n this.showDropdown = true;\n }\n\n @Listen('closeOtherCategories', { target: 'window' })\n private onPointerLeave() {\n this.showDropdown = false;\n }\n\n private onCategoryClick(e: MouseEvent) {\n e.stopPropagation();\n if (this.ixMenu?.expand) {\n this.onExpandCategory(!this.showItems);\n return;\n }\n }\n\n private onNestedItemsChanged(mutations?: MutationRecord[]) {\n const oldNestedItemsLength = this.nestedItems.length;\n this.nestedItems = this.getNestedItems();\n\n if (\n this.showItems &&\n this.menuItemsContainer &&\n oldNestedItemsLength !== this.nestedItems.length\n ) {\n this.menuItemsContainer.style.maxHeight = `${\n this.getNestedItemsHeight() + DefaultIxMenuItemHeight\n }px`;\n }\n\n if (!this.menuExpand \|\| this.showItems \|\| !mutations) {\n return;\n }\n\n for (const mutation of mutations ?? []) {\n if (\n mutation.attributeName === 'class' &&\n mutation.target instanceof HTMLElement &&\n mutation.target.classList.contains('active')\n ) {\n this.showItems = true;\n this.onExpandCategory(true);\n return;\n }\n }\n }\n\n private isCategoryItemListVisible() {\n return this.menuExpand && (this.showItems \|\| this.isNestedItemActive());\n }\n\n componentWillLoad() {\n const closestMenu = closestIxMenu(this.hostElement);\n if (!closestMenu) {\n throw Error('ix-menu-category can only be used as a child of ix-menu');\n }\n this.ixMenu = closestMenu;\n\n this.menuExpand = this.ixMenu.expand;\n this.showItems = this.isCategoryItemListVisible();\n }\n\n componentDidLoad() {\n this.observer = createMutationObserver((mutations: MutationRecord[]) =>\n this.onNestedItemsChanged(mutations)\n );\n\n this.observer.observe(this.hostElement, {\n attributes: true,\n childList: true,\n subtree: true,\n });\n\n requestAnimationFrame(() => {\n this.onNestedItemsChanged();\n });\n\n this.ixMenu?.addEventListener(\n 'expandChange',\n ({ detail: menuExpand }: CustomEvent<boolean>) => {\n this.menuExpand = menuExpand;\n if (!menuExpand) {\n this.clearMenuItemStyles();\n }\n this.showItems = this.isCategoryItemListVisible();\n }\n );\n }\n\n clearMenuItemStyles() {\n this.menuItemsContainer?.style.removeProperty('max-height');\n this.menuItemsContainer?.style.removeProperty('opacity');\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n }\n\n render() {\n return (\n <Host\n class={{\n expanded: this.showItems,\n }}\n onPointerEnter={() => {\n this.enterLeaveDebounce.onEnter();\n }}\n onPointerLeave={(event: PointerEvent) => {\n if (event.pointerType === 'touch') {\n return;\n }\n this.enterLeaveDebounce.onLeave();\n }}\n >\n <ix-menu-item\n class={'category-parent'}\n active={this.isNestedItemActive()}\n notifications={this.notifications}\n icon={this.icon}\n onClick={(e) => this.onCategoryClick(e)}\n onFocus={() => this.onPointerEnter()}\n isCategory\n >\n <div class=\"category\">\n <div class=\"category-text\">{this.label}</div>\n <ix-icon\n name={iconChevronDownSmall}\n class={{\n 'category-chevron': true,\n 'category-chevron--open': this.showItems,\n }}\n ></ix-icon>\n </div>\n </ix-menu-item>\n <div\n ref={(ref) => (this.menuItemsContainer = ref!)}\n class={{\n 'menu-items': true,\n 'menu-items--expanded': this.showItems,\n 'menu-items--collapsed': !this.showItems,\n }}\n >\n {this.showItems ? <slot></slot> : null}\n </div>\n <ix-dropdown\n closeBehavior={'both'}\n show={this.showDropdown}\n onShowChanged={({ detail: dropdownShown }: CustomEvent<boolean>) => {\n this.showDropdown = dropdownShown;\n }}\n class={'category-dropdown'}\n anchor={this.hostElement}\n placement=\"right-start\"\n offset={{\n mainAxis: 3,\n }}\n onClick={(e) => {\n if (e.target instanceof HTMLElement) {\n if (e.target.tagName === 'IX-MENU-ITEM') {\n this.showDropdown = false;\n } else {\n e.preventDefault();\n }\n }\n }}\n >\n <ix-dropdown-item class={'category-dropdown-header'}>\n <ix-typography format=\"label\" bold textColor=\"std\">\n {this.label}\n </ix-typography>\n </ix-dropdown-item>\n <ix-divider></ix-divider>\n <slot></slot>\n </ix-dropdown>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"ix-menu-category.entry.esm.js","sources":["src/components/menu-category/enter-leave.ts","src/components/menu-category/menu-category.scss?tag=ix-menu-category&encapsulation=shadow","src/components/menu-category/menu-category.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2024 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\nexport function createEnterLeaveDebounce(\n enterCallback: Function,\n leaveCallback: Function,\n {\n debounceTimeEnter,\n debounceTimeLeave,\n }: {\n debounceTimeEnter: number;\n debounceTimeLeave: number;\n } = {\n debounceTimeEnter: 0,\n debounceTimeLeave: 500,\n }\n) {\n let enterTimeout: NodeJS.Timeout;\n let leaveTimeout: NodeJS.Timeout;\n\n return {\n onEnter: () => {\n clearTimeout(leaveTimeout);\n enterTimeout = setTimeout(() => {\n enterCallback();\n }, debounceTimeEnter);\n },\n onLeave: () => {\n clearTimeout(enterTimeout);\n leaveTimeout = setTimeout(() => {\n leaveCallback();\n }, debounceTimeLeave);\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/text-truncation';\n\n:host {\n @include ix-component;\n display: flex;\n flex-direction: column;\n position: relative;\n\n .category {\n display: flex;\n position: relative;\n align-items: center;\n width: 100%;\n height: 100%;\n }\n\n .category-text {\n width: 100%;\n padding-right: 0.25rem;\n @include ellipsis;\n }\n\n .category-chevron {\n margin-left: auto;\n margin-right: 0;\n transition: var(--theme-default-time) transform ease-in-out;\n }\n\n .category-chevron--open {\n transform: rotate(-180deg);\n }\n\n .menu-items {\n overflow: hidden;\n max-height: 0;\n transition: var(--theme-default-time) max-height ease-in-out;\n }\n\n .menu-items--expanded {\n max-height: 999999999px;\n padding: 0.25rem 0 0.25rem 1.625rem;\n }\n\n .menu-items--collapsed {\n display: none;\n }\n\n .category-dropdown {\n ::slotted(ix-menu-item) {\n --ix-menu-item-height: 2.5rem;\n }\n }\n\n .category-dropdown-header {\n pointer-events: none;\n padding-left: 0.125rem;\n min-width: 256px;\n }\n\n ::slotted(ix-menu-item) {\n --ix-menu-item-height: 2.5rem;\n }\n}\n\n:host(.expanded) {\n background-color: var(--theme-color-ghost--active);\n}\n\n:host {\n ::slotted(a[href]) {\n text-decoration: none !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 {\n Component,\n Element,\n h,\n Host,\n Prop,\n State,\n Event,\n EventEmitter,\n Listen,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { closestIxMenu } from '../utils/application-layout/context';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { createEnterLeaveDebounce } from './enter-leave';\nimport { iconChevronDownSmall } from '@siemens/ix-icons/icons';\n\nconst DefaultIxMenuItemHeight = 40;\nconst DefaultAnimationTimeout = 150;\n\n@Component({\n tag: 'ix-menu-category',\n styleUrl: 'menu-category.scss',\n shadow: true,\n})\nexport class MenuCategory {\n @Element() hostElement!: HTMLIxMenuCategoryElement;\n\n /\n Display name of the category\n /\n @Prop() label?: string;\n\n /\n Icon of the category\n /\n @Prop() icon?: string;\n\n /\n Show notification count on the category\n /\n @Prop() notifications?: number;\n\n /* @internal /\n // eslint-disable-next-line @stencil-community/decorators-style\n @Event({ bubbles: true, cancelable: true })\n closeOtherCategories!: EventEmitter;\n\n @State() menuExpand = false;\n @State() showItems = false;\n @State() showDropdown = false;\n @State() nestedItems: HTMLIxMenuItemElement[] = [];\n\n private observer?: MutationObserver;\n private menuItemsContainer?: HTMLDivElement;\n private ixMenu?: HTMLIxMenuElement;\n\n private enterLeaveDebounce = createEnterLeaveDebounce(\n () => {\n this.onPointerEnter();\n },\n () => {\n this.onPointerLeave();\n }\n );\n\n private isNestedItemActive() {\n return this.getNestedItems().some((item) => item.active);\n }\n\n private getNestedItems() {\n return Array.from(\n this.hostElement.querySelectorAll(':scope ix-menu-item')\n ) as HTMLIxMenuItemElement[];\n }\n\n private getNestedItemsHeight() {\n const items = this.getNestedItems();\n\n return items.length DefaultIxMenuItemHeight;\n }\n\n private onExpandCategory(showItems: boolean) {\n if (showItems) {\n this.animateFadeIn();\n } else {\n this.animateFadeOut();\n }\n }\n\n private animateFadeOut() {\n const slotHideThresholdMs = 25;\n anime({\n targets: this.menuItemsContainer,\n duration: DefaultAnimationTimeout,\n easing: 'easeInSine',\n opacity: [1, 0],\n maxHeight: [this.getNestedItemsHeight() + DefaultIxMenuItemHeight, 0],\n complete: () => {\n setTimeout(() => {\n this.showItems = false;\n this.showDropdown = false;\n }, DefaultAnimationTimeout + slotHideThresholdMs);\n },\n });\n }\n\n private animateFadeIn() {\n anime({\n targets: this.menuItemsContainer,\n duration: DefaultAnimationTimeout,\n easing: 'easeInSine',\n opacity: [0, 1],\n maxHeight: [0, this.getNestedItemsHeight() + DefaultIxMenuItemHeight],\n begin: () => {\n this.showItems = true;\n this.showDropdown = false;\n },\n });\n }\n\n private onPointerEnter() {\n if (this.ixMenu?.expand) {\n return;\n }\n this.closeOtherCategories.emit();\n this.showDropdown = true;\n }\n\n @Listen('closeOtherCategories', { target: 'window' })\n private onPointerLeave() {\n this.showDropdown = false;\n }\n\n private onCategoryClick(e: MouseEvent) {\n e.stopPropagation();\n if (this.ixMenu?.expand) {\n this.onExpandCategory(!this.showItems);\n return;\n }\n }\n\n private onNestedItemsChanged(mutations?: MutationRecord[]) {\n const oldNestedItemsLength = this.nestedItems.length;\n this.nestedItems = this.getNestedItems();\n\n if (\n this.showItems &&\n this.menuItemsContainer &&\n oldNestedItemsLength !== this.nestedItems.length\n ) {\n this.menuItemsContainer.style.maxHeight = `${\n this.getNestedItemsHeight() + DefaultIxMenuItemHeight\n }px`;\n }\n\n if (!this.menuExpand \|\| this.showItems \|\| !mutations) {\n return;\n }\n\n for (const mutation of mutations ?? []) {\n if (\n mutation.attributeName === 'class' &&\n mutation.target instanceof HTMLElement &&\n mutation.target.classList.contains('active')\n ) {\n this.showItems = true;\n this.onExpandCategory(true);\n return;\n }\n }\n }\n\n private isCategoryItemListVisible() {\n return this.menuExpand && (this.showItems \|\| this.isNestedItemActive());\n }\n\n componentWillLoad() {\n const closestMenu = closestIxMenu(this.hostElement);\n if (!closestMenu) {\n throw Error('ix-menu-category can only be used as a child of ix-menu');\n }\n this.ixMenu = closestMenu;\n\n this.menuExpand = this.ixMenu.expand;\n this.showItems = this.isCategoryItemListVisible();\n }\n\n componentDidLoad() {\n this.observer = createMutationObserver((mutations: MutationRecord[]) =>\n this.onNestedItemsChanged(mutations)\n );\n\n this.observer.observe(this.hostElement, {\n attributes: true,\n childList: true,\n subtree: true,\n });\n\n requestAnimationFrame(() => {\n this.onNestedItemsChanged();\n });\n\n this.ixMenu?.addEventListener(\n 'expandChange',\n ({ detail: menuExpand }: CustomEvent<boolean>) => {\n this.menuExpand = menuExpand;\n if (!menuExpand) {\n this.clearMenuItemStyles();\n }\n this.showItems = this.isCategoryItemListVisible();\n }\n );\n }\n\n clearMenuItemStyles() {\n this.menuItemsContainer?.style.removeProperty('max-height');\n this.menuItemsContainer?.style.removeProperty('opacity');\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n }\n\n render() {\n return (\n <Host\n class={{\n expanded: this.showItems,\n }}\n onPointerEnter={() => {\n this.enterLeaveDebounce.onEnter();\n }}\n onPointerLeave={(event: PointerEvent) => {\n if (event.pointerType === 'touch') {\n return;\n }\n this.enterLeaveDebounce.onLeave();\n }}\n >\n <ix-menu-item\n class={'category-parent'}\n active={this.isNestedItemActive()}\n notifications={this.notifications}\n icon={this.icon}\n onClick={(e) => this.onCategoryClick(e)}\n onFocus={() => this.onPointerEnter()}\n isCategory\n >\n <div class=\"category\">\n <div class=\"category-text\">{this.label}</div>\n <ix-icon\n name={iconChevronDownSmall}\n class={{\n 'category-chevron': true,\n 'category-chevron--open': this.showItems,\n }}\n ></ix-icon>\n </div>\n </ix-menu-item>\n <div\n ref={(ref) => (this.menuItemsContainer = ref!)}\n class={{\n 'menu-items': true,\n 'menu-items--expanded': this.showItems,\n 'menu-items--collapsed': !this.showItems,\n }}\n >\n {this.showItems ? <slot></slot> : null}\n </div>\n <ix-dropdown\n closeBehavior={'both'}\n show={this.showDropdown}\n onShowChanged={({ detail: dropdownShown }: CustomEvent<boolean>) => {\n this.showDropdown = dropdownShown;\n }}\n class={'category-dropdown'}\n anchor={this.hostElement}\n placement=\"right-start\"\n offset={{\n mainAxis: 3,\n }}\n onClick={(e) => {\n if (e.target instanceof HTMLElement) {\n if (e.target.tagName === 'IX-MENU-ITEM') {\n this.showDropdown = false;\n } else {\n e.preventDefault();\n }\n }\n }}\n >\n <ix-dropdown-item class={'category-dropdown-header'}>\n <ix-typography format=\"label\" bold textColor=\"std\">\n {this.label}\n </ix-typography>\n </ix-dropdown-item>\n <ix-divider></ix-divider>\n <slot></slot>\n </ix-dropdown>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}

package/dist/siemens-ix/ix-menu-item.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ix-menu-item.entry.esm.js","sources":["src/components/menu-item/menu-item.scss?tag=ix-menu-item&encapsulation=shadow","src/components/menu-item/menu-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@import 'mixins/hover';\n@import 'mixins/text-truncation';\n\n$menuItemHeight: 3rem;\n$menuItemPadding: 0.875rem;\n\n:host {\n position: relative;\n display: block;\n cursor: pointer;\n\n height: var(--ix-menu-item-height, $menuItemHeight);\n min-height: var(--ix-menu-item-height, $menuItemHeight);\n max-height: var(--ix-menu-item-height, $menuItemHeight);\n\n .tab {\n all: unset;\n box-sizing: border-box;\n display: flex;\n position: relative;\n align-items: center;\n height: var(--ix-menu-item-height, $menuItemHeight);\n width: calc(100%);\n z-index: 500;\n padding-left: $menuItemPadding;\n\n @include ghost-hover-pressed;\n }\n\n .tab-icon {\n color: var(--theme-nav-item-primary-icon--color);\n position: relative;\n pointer-events: none;\n }\n\n .tab:focus-visible {\n outline: 1px solid var(--theme-color-focus-bdr);\n outline-offset: -1px;\n }\n\n .notification {\n display: inline-flex;\n position: absolute;\n top: 0.25rem;\n left: 1.5rem;\n\n .pill {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n height: 0.5rem;\n min-width: 1rem;\n position: relative;\n border-radius: 6.25rem;\n background-color: var(--theme-color-primary);\n font-size: 0.75rem;\n font-weight: bold;\n line-height: 1;\n font-family: Siemens Sans, Arial, sans-serif;\n color: var(--theme-color-primary--contrast);\n padding: $tiny-space;\n }\n }\n\n .tab-text {\n @include ellipsis;\n color: var(--theme-nav-item-primary--color);\n margin: 0 1rem 0 1.25rem;\n user-select: none;\n width: 100%;\n }\n}\n\n:host(.active),\n:host(.selected) {\n .tab {\n background-color: var(--theme-nav-item-primary--background--selected);\n }\n\n .tab::before {\n content: '';\n background-color: var(--theme-nav-item-primary--border-color--selected);\n height: var(--ix-menu-item-height, $menuItemHeight);\n width: 0.25rem;\n left: 0;\n position: absolute;\n }\n\n .tab > .glyph {\n color: var(--theme-nav-item-primary-icon--color--selected);\n }\n}\n\n:host(.disabled) {\n color: var(--theme-color-weak-text);\n pointer-events: none;\n cursor: default;\n\n .tab > .tab-icon {\n color: var(--theme-color-weak-text);\n }\n\n .tab-text {\n color: var(--theme-color-weak-text);\n }\n}\n\n:host(.bottom-tab),\n:host([slot='bottom']) {\n $bottom-height: 2.25rem;\n\n min-height: $bottom-height;\n height: $bottom-height;\n max-height: $bottom-height;\n\n .tab {\n height: $bottom-height;\n }\n\n .tab::before {\n height: $bottom-height;\n background-color: transparent;\n }\n\n &.active,\n &.selected {\n &:hover {\n background-color: var(--theme-nav-item-secondary--background--selected);\n }\n\n &:active {\n background-color: var(--theme-nav-item-secondary--background--selected);\n }\n }\n}\n\n:host(.bottom-tab.active),\n:host(.bottom-tab.selected),\n:host(.active[slot='bottom']),\n:host(.selected[slot='bottom']) {\n .tab {\n background-color: var(--theme-nav-item-secondary--background--selected);\n }\n}\n\n:host(.tab-nested) {\n .tab {\n flex-direction: row;\n padding-left: calc(0.5rem + $menuItemPadding);\n\n .notification {\n position: relative;\n top: 0;\n left: 0;\n padding-left: 0.5rem;\n }\n\n .tab-icon {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n }\n\n .tab-text {\n margin-left: 0.5rem;\n }\n\n &::before {\n display: 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, State, Watch } from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { makeRef } from '../utils/make-ref';\nimport { menuController } from '../utils/menu-service/menu-service';\nimport { Disposable } from '../utils/typed-event';\nimport { iconDocument } from '@siemens/ix-icons/icons';\n\n/\n @slot menu-item-label Custom label\n /\n@Component({\n tag: 'ix-menu-item',\n styleUrl: 'menu-item.scss',\n shadow: true,\n})\nexport class MenuItem {\n /\n Label of the menu item. Will also be used as tooltip text\n \n @since 2.2.0\n /\n @Prop() label?: string;\n\n /\n Move the Tab to a top position.\n /\n @Prop() home = false;\n\n /\n Caution: this is no longer working. Please use slot=\"bottom\" instead.\n \n Place tab on bottom\n /\n @Prop() bottom = false;\n\n /\n Name of the icon you want to display. Icon names can be resolved from the documentation @link https://ix.siemens.io/docs/icon-library/icons\n /\n @Prop({ mutable: true }) icon?: string;\n\n /\n Show notification count on tab\n /\n @Prop() notifications?: number;\n\n /\n State to display active\n /\n @Prop() active: boolean = false;\n\n /\n Disable tab and remove event handlers\n /\n @Prop() disabled: boolean = false;\n\n /* @internal */\n @Prop() isCategory: boolean = false;\n\n @Element() hostElement!: HTMLIxMenuItemElement;\n\n @State() tooltip?: string;\n @State() menuExpanded: boolean = false;\n\n private readonly buttonRef = makeRef<HTMLButtonElement>();\n private isHostedInsideCategory = false;\n private menuExpandedDisposer?: Disposable;\n\n private readonly observer: MutationObserver = createMutationObserver(() => {\n this.setTooltip();\n });\n\n componentWillLoad() {\n this.isHostedInsideCategory =\n !!this.hostElement.closest('ix-menu-category');\n\n this.onIconChange();\n\n this.menuExpanded = menuController.nativeElement?.expand \|\| false;\n this.menuExpandedDisposer = menuController.expandChange.on(\n (expand) => (this.menuExpanded = expand)\n );\n }\n\n componentWillRender() {\n this.setTooltip();\n }\n\n setTooltip() {\n this.tooltip = this.label ?? this.hostElement.textContent ?? undefined;\n }\n\n connectedCallback() {\n this.observer.observe(this.hostElement, {\n subtree: true,\n childList: true,\n characterData: true,\n });\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n\n if (this.menuExpandedDisposer) {\n this.menuExpandedDisposer.dispose();\n }\n }\n\n @Watch('icon')\n onIconChange() {\n if (!this.isHostedInsideCategory && !this.hostElement.icon) {\n this.icon = iconDocument;\n }\n }\n\n render() {\n let extendedAttributes = {};\n if (this.home) {\n extendedAttributes = {\n slot: 'home',\n };\n }\n\n if (this.bottom) {\n extendedAttributes = {\n slot: 'bottom',\n };\n }\n return (\n <Host\n class={{\n disabled: this.disabled,\n 'home-tab': this.home,\n 'bottom-tab': this.bottom,\n active: this.active,\n 'tab-nested': this.isHostedInsideCategory,\n }}\n {...extendedAttributes}\n >\n <button\n class=\"tab\"\n tabIndex={this.disabled ? -1 : 0}\n ref={this.buttonRef}\n >\n {this.icon && <ix-icon class={'tab-icon'} name={this.icon}></ix-icon>}\n {this.notifications ? (\n <div class=\"notification\">\n <div class=\"pill\">{this.notifications}</div>\n </div>\n ) : null}\n <span class=\"tab-text text-default\">\n {this.label}\n <slot></slot>\n </span>\n </button>\n {!this.isCategory &&\n !this.isHostedInsideCategory &&\n !this.menuExpanded && (\n <ix-tooltip\n for={this.buttonRef.waitForCurrent()}\n placement={'right'}\n showDelay={1000}\n >\n {this.tooltip}\n </ix-tooltip>\n )}\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"ix-menu-item.entry.esm.js","sources":["src/components/menu-item/menu-item.scss?tag=ix-menu-item&encapsulation=shadow","src/components/menu-item/menu-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@import 'mixins/hover';\n@import 'mixins/text-truncation';\n\n$menuItemHeight: 3rem;\n$menuItemPadding: 0.875rem;\n\n:host {\n position: relative;\n display: block;\n cursor: pointer;\n\n height: var(--ix-menu-item-height, $menuItemHeight);\n min-height: var(--ix-menu-item-height, $menuItemHeight);\n max-height: var(--ix-menu-item-height, $menuItemHeight);\n\n .tab {\n all: unset;\n box-sizing: border-box;\n display: flex;\n position: relative;\n align-items: center;\n height: var(--ix-menu-item-height, $menuItemHeight);\n width: calc(100%);\n z-index: 500;\n padding-left: $menuItemPadding;\n\n @include ghost-hover-pressed;\n }\n\n .tab-icon {\n color: var(--theme-nav-item-primary-icon--color);\n position: relative;\n pointer-events: none;\n }\n\n .tab:focus-visible {\n outline: 1px solid var(--theme-color-focus-bdr);\n outline-offset: -1px;\n }\n\n .notification {\n display: inline-flex;\n position: absolute;\n top: 0.25rem;\n left: 1.5rem;\n\n .pill {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n height: 0.5rem;\n min-width: 1rem;\n position: relative;\n border-radius: 6.25rem;\n background-color: var(--theme-color-primary);\n font-size: 0.75rem;\n font-weight: bold;\n line-height: 1;\n font-family: Siemens Sans, Arial, sans-serif;\n color: var(--theme-color-primary--contrast);\n padding: $tiny-space;\n }\n }\n\n .tab-text {\n @include ellipsis;\n color: var(--theme-nav-item-primary--color);\n margin: 0 1rem 0 1.25rem;\n user-select: none;\n width: 100%;\n }\n}\n\n:host(.active),\n:host(.selected) {\n .tab {\n background-color: var(--theme-nav-item-primary--background--selected);\n }\n\n .tab::before {\n content: '';\n background-color: var(--theme-nav-item-primary--border-color--selected);\n height: var(--ix-menu-item-height, $menuItemHeight);\n width: 0.25rem;\n left: 0;\n position: absolute;\n }\n\n .tab > .glyph {\n color: var(--theme-nav-item-primary-icon--color--selected);\n }\n}\n\n:host(.disabled) {\n color: var(--theme-color-weak-text);\n pointer-events: none;\n cursor: default;\n\n .tab > .tab-icon {\n color: var(--theme-color-weak-text);\n }\n\n .tab-text {\n color: var(--theme-color-weak-text);\n }\n}\n\n:host(.bottom-tab),\n:host([slot='bottom']) {\n $bottom-height: 2.25rem;\n\n min-height: $bottom-height;\n height: $bottom-height;\n max-height: $bottom-height;\n\n .tab {\n height: $bottom-height;\n }\n\n .tab::before {\n height: $bottom-height;\n background-color: transparent;\n }\n\n &.active,\n &.selected {\n &:hover {\n background-color: var(--theme-nav-item-secondary--background--selected);\n }\n\n &:active {\n background-color: var(--theme-nav-item-secondary--background--selected);\n }\n }\n}\n\n:host(.bottom-tab.active),\n:host(.bottom-tab.selected),\n:host(.active[slot='bottom']),\n:host(.selected[slot='bottom']) {\n .tab {\n background-color: var(--theme-nav-item-secondary--background--selected);\n }\n}\n\n:host(.tab-nested) {\n .tab {\n flex-direction: row;\n padding-left: calc(0.5rem + $menuItemPadding);\n\n .notification {\n position: relative;\n top: 0;\n left: 0;\n padding-left: 0.5rem;\n }\n\n .tab-icon {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n }\n\n .tab-text {\n margin-left: 0.5rem;\n }\n\n &::before {\n display: 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, State, Watch } from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { makeRef } from '../utils/make-ref';\nimport { menuController } from '../utils/menu-service/menu-service';\nimport { Disposable } from '../utils/typed-event';\nimport { iconDocument } from '@siemens/ix-icons/icons';\n\n/\n @slot menu-item-label Custom label\n /\n@Component({\n tag: 'ix-menu-item',\n styleUrl: 'menu-item.scss',\n shadow: true,\n})\nexport class MenuItem {\n /\n Label of the menu item. Will also be used as tooltip text\n /\n @Prop() label?: string;\n\n /\n Move the Tab to a top position.\n /\n @Prop() home = false;\n\n /\n Caution: this is no longer working. Please use slot=\"bottom\" instead.\n \n Place tab on bottom\n /\n @Prop() bottom = false;\n\n /\n Name of the icon you want to display. Icon names can be resolved from the documentation @link https://ix.siemens.io/docs/icon-library/icons\n /\n @Prop({ mutable: true }) icon?: string;\n\n /\n Show notification count on tab\n /\n @Prop() notifications?: number;\n\n /\n State to display active\n /\n @Prop() active: boolean = false;\n\n /\n Disable tab and remove event handlers\n /\n @Prop() disabled: boolean = false;\n\n /* @internal */\n @Prop() isCategory: boolean = false;\n\n @Element() hostElement!: HTMLIxMenuItemElement;\n\n @State() tooltip?: string;\n @State() menuExpanded: boolean = false;\n\n private readonly buttonRef = makeRef<HTMLButtonElement>();\n private isHostedInsideCategory = false;\n private menuExpandedDisposer?: Disposable;\n\n private readonly observer: MutationObserver = createMutationObserver(() => {\n this.setTooltip();\n });\n\n componentWillLoad() {\n this.isHostedInsideCategory =\n !!this.hostElement.closest('ix-menu-category');\n\n this.onIconChange();\n\n this.menuExpanded = menuController.nativeElement?.expand \|\| false;\n this.menuExpandedDisposer = menuController.expandChange.on(\n (expand) => (this.menuExpanded = expand)\n );\n }\n\n componentWillRender() {\n this.setTooltip();\n }\n\n setTooltip() {\n this.tooltip = this.label ?? this.hostElement.textContent ?? undefined;\n }\n\n connectedCallback() {\n this.observer.observe(this.hostElement, {\n subtree: true,\n childList: true,\n characterData: true,\n });\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n\n if (this.menuExpandedDisposer) {\n this.menuExpandedDisposer.dispose();\n }\n }\n\n @Watch('icon')\n onIconChange() {\n if (!this.isHostedInsideCategory && !this.hostElement.icon) {\n this.icon = iconDocument;\n }\n }\n\n render() {\n let extendedAttributes = {};\n if (this.home) {\n extendedAttributes = {\n slot: 'home',\n };\n }\n\n if (this.bottom) {\n extendedAttributes = {\n slot: 'bottom',\n };\n }\n return (\n <Host\n class={{\n disabled: this.disabled,\n 'home-tab': this.home,\n 'bottom-tab': this.bottom,\n active: this.active,\n 'tab-nested': this.isHostedInsideCategory,\n }}\n {...extendedAttributes}\n >\n <button\n class=\"tab\"\n tabIndex={this.disabled ? -1 : 0}\n ref={this.buttonRef}\n >\n {this.icon && <ix-icon class={'tab-icon'} name={this.icon}></ix-icon>}\n {this.notifications ? (\n <div class=\"notification\">\n <div class=\"pill\">{this.notifications}</div>\n </div>\n ) : null}\n <span class=\"tab-text text-default\">\n {this.label}\n <slot></slot>\n </span>\n </button>\n {!this.isCategory &&\n !this.isHostedInsideCategory &&\n !this.menuExpanded && (\n <ix-tooltip\n for={this.buttonRef.waitForCurrent()}\n placement={'right'}\n showDelay={1000}\n >\n {this.tooltip}\n </ix-tooltip>\n )}\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}