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

@siemens/ix 0.0.0-pr-1373-20240705054533 → 0.0.0-pr-1522-20241022123832

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

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

	@@ -1 +1 @@
1	- {"file":"ix-modal.entry.cjs.js","mappings":"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","names":["Animation","anime","a11yHostAttributes","h","Host","a11yBoolean","OnListener"],"sources":["src/components/utils/waitForElement.ts","src/components/modal/modal.scss?tag=ix-modal&encapsulation=shadow","src/components/modal/modal.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\nexport function waitForElement<R extends HTMLElement>(\n selector: string,\n doc: any,\n timeout = 3000\n): Promise<R> {\n return new Promise<R>((resolve, reject) => {\n const startTime = Date.now();\n\n const checkIfElementExist = () => {\n const dialog = doc.querySelector(selector) satisfies R;\n\n if (dialog) {\n resolve(dialog);\n } else {\n if (Date.now() - startTime < timeout) {\n setTimeout(checkIfElementExist);\n } else {\n reject();\n }\n }\n };\n\n checkIfElementExist();\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::backdrop {\n --ix-dialog-backdrop: var(--theme-color-lightbox, #0000008c);\n}\n\n:focus-visible {\n outline: none !important;\n}\n\n:host {\n display: none;\n\n dialog {\n margin: 0;\n padding: 1rem;\n left: 50%;\n }\n\n dialog::backdrop {\n backdrop-filter: blur(2.7182817459106445px);\n }\n\n .modal {\n display: flex;\n flex-direction: column;\n position: relative;\n border: none;\n border-radius: var(--theme-default-border-radius);\n background: var(--theme-modal--background);\n box-shadow: var(--theme-shadow-4);\n color: var(--theme-color-std-text);\n overflow: visible;\n max-height: 80vh;\n pointer-events: all;\n }\n\n .modal-size-360 {\n width: 22.5rem;\n }\n\n .modal-size-480 {\n width: 30rem;\n }\n\n .modal-size-600 {\n width: 37.5rem;\n }\n\n .modal-size-720 {\n width: 45rem;\n }\n\n .modal-size-840 {\n width: 52.5rem;\n }\n\n .modal-size-full-width {\n width: 95%;\n }\n\n .modal-size-full-screen {\n left: 0 !important;\n top: 0 !important;\n transform: none !important;\n\n width: calc(100% - 28px);\n min-width: calc(100% - 28px);\n max-width: calc(100% - 28px);\n\n height: calc(100% - 28px);\n min-height: calc(100% - 28px);\n max-height: calc(100% - 28px);\n }\n\n .dialog-backdrop {\n display: block;\n position: fixed;\n width: 100vw;\n height: 100vh;\n top: 0;\n left: 0;\n\n pointer-events: none;\n }\n\n ::slotted(ix-modal-footer) {\n margin-top: auto;\n }\n}\n\n:host(.visible) {\n display: block;\n}\n\n:host(.align-center) {\n dialog {\n margin: 0;\n left: 50%;\n top: 50%;\n }\n}\n\n:host(.no-backdrop) {\n dialog::backdrop {\n background-color: transparent !important;\n backdrop-filter: none !important;\n }\n}\n\n:host(.with-icon) {\n ::slotted(ix-modal-footer),\n ::slotted(ix-modal-content) {\n margin-left: 2.5rem;\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 Method,\n Prop,\n State,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { A11yAttributes, a11yBoolean, a11yHostAttributes } from '../utils/a11y';\nimport Animation from '../utils/animation';\nimport { OnListener } from '../utils/listener';\nimport { waitForElement } from '../utils/waitForElement';\n\nexport type IxModalFixedSize = '360' \| '480' \| '600' \| '720' \| '840';\nexport type IxModalDynamicSize = 'full-width' \| 'full-screen';\nexport type IxModalSize = IxModalFixedSize \| IxModalDynamicSize;\n\n@Component({\n tag: 'ix-modal',\n styleUrl: 'modal.scss',\n shadow: true,\n})\nexport class Modal {\n private ariaAttributes: A11yAttributes = {};\n\n @Element() hostElement!: HTMLIxModalElement;\n\n /\n Modal size\n \n @since 2.0.0\n /\n @Prop() size: IxModalSize = '360';\n\n /\n Should the modal be animated\n /\n @Prop() animation = true;\n\n /\n Show a backdrop behind the modal dialog\n /\n @Prop() backdrop = true;\n\n /\n Dismiss modal on backdrop click\n \n @since 2.0.0\n /\n @Prop() closeOnBackdropClick = false;\n\n /\n Is called before the modal is dismissed.\n \n - Return `true` to proceed in dismissing the modal\n * - Return `false` to abort in dismissing the modal\n /\n @Prop() beforeDismiss: (reason?: any) => boolean \| Promise<boolean>;\n\n /\n Centered modal\n /\n @Prop() centered = false;\n\n /\n Use ESC to dismiss the modal\n * @deprecated - Use closeOnEscape instead\n /\n @Prop() keyboard = true;\n\n /\n If set to true the modal can be closed by pressing the Escape key\n /\n @Prop() closeOnEscape = true;\n\n /\n Dialog close\n /\n @Event() dialogClose: EventEmitter;\n\n /\n Dialog cancel\n /\n @Event() dialogDismiss: EventEmitter;\n\n @State() modalVisible = false;\n\n @OnListener<Modal>('keydown', (self) => !self.closeOnEscape \|\| !self.keyboard)\n onKey(e: KeyboardEvent) {\n if (e.key === 'Escape') {\n e.preventDefault();\n }\n }\n\n get dialog() {\n return this.hostElement.shadowRoot.querySelector('dialog');\n }\n\n private slideInModal() {\n const duration = this.animation ? Animation.mediumTime : 0;\n\n let transformY = this.centered ? '-50%' : 40;\n\n anime({\n targets: this.dialog,\n duration,\n opacity: [0, 1],\n translateY: [0, transformY],\n translateX: ['-50%', '-50%'],\n easing: 'easeOutSine',\n });\n }\n\n private slideOutModal(completeCallback: Function) {\n const duration = this.animation ? Animation.mediumTime : 0;\n\n let transformY = this.centered ? '-50%' : 40;\n\n anime({\n targets: this.dialog,\n duration,\n opacity: [1, 0],\n translateY: [transformY, 0],\n translateX: ['-50%', '-50%'],\n easing: 'easeInSine',\n complete: () => {\n if (completeCallback) {\n completeCallback();\n }\n },\n });\n }\n\n private onModalClick(event: MouseEvent) {\n if (event.target !== this.dialog) {\n return;\n }\n\n const rect = this.dialog.getBoundingClientRect();\n const isClickOutside =\n rect.top <= event.clientY &&\n event.clientY <= rect.top + rect.height &&\n rect.left <= event.clientX &&\n event.clientX <= rect.left + rect.width;\n\n if (!isClickOutside && this.closeOnBackdropClick) {\n this.dismissModal();\n }\n }\n\n /\n Show the dialog\n /\n @Method()\n async showModal() {\n try {\n const dialog = await waitForElement<HTMLDialogElement>(\n 'dialog',\n this.hostElement.shadowRoot\n );\n this.modalVisible = true;\n dialog.showModal();\n } catch (e) {\n console.error('HTMLDialogElement not existing');\n }\n }\n\n /\n Dismiss the dialog\n /\n @Method()\n async dismissModal<T = any>(reason?: T) {\n let allowDismiss = true;\n\n if (this.beforeDismiss !== undefined) {\n allowDismiss = await this.beforeDismiss(reason);\n }\n if (!allowDismiss) {\n return;\n }\n\n this.slideOutModal(() => {\n this.modalVisible = false;\n this.dialog.close(\n JSON.stringify(\n {\n type: 'dismiss',\n reason,\n },\n null,\n 2\n )\n );\n\n this.dialogDismiss.emit(reason);\n });\n }\n\n /\n Close the dialog\n */\n @Method()\n async closeModal<T = any>(reason: T) {\n this.slideOutModal(() => {\n this.dialog.close(\n JSON.stringify(\n {\n type: 'close',\n reason,\n },\n null,\n 2\n )\n );\n\n this.dialogClose.emit(reason);\n });\n }\n\n componentDidLoad() {\n this.slideInModal();\n }\n\n componentWillLoad() {\n this.ariaAttributes = a11yHostAttributes(this.hostElement);\n }\n\n render() {\n return (\n <Host\n class={{\n visible: this.modalVisible,\n 'no-backdrop': this.backdrop === false,\n 'align-center': this.centered,\n }}\n >\n <div class=\"dialog-backdrop\">\n <dialog\n aria-modal={a11yBoolean(true)}\n aria-describedby={this.ariaAttributes['aria-describedby']}\n aria-labelledby={this.ariaAttributes['aria-labelledby']}\n class={{\n modal: true,\n [`modal-size-${this.size}`]: true,\n }}\n onClose={() => this.dismissModal()}\n onClick={(event) => this.onModalClick(event)}\n onCancel={(e) => {\n e.preventDefault();\n this.dismissModal();\n }}\n >\n <slot></slot>\n </dialog>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-modal.entry.cjs.js","mappings":"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","names":["Animation","anime","a11yHostAttributes","h","Host","a11yBoolean","OnListener"],"sources":["src/components/utils/waitForElement.ts","src/components/modal/modal.scss?tag=ix-modal&encapsulation=shadow","src/components/modal/modal.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\nexport function waitForElement<R extends HTMLElement>(\n selector: string,\n doc: any,\n timeout = 3000\n): Promise<R> {\n return new Promise<R>((resolve, reject) => {\n const startTime = Date.now();\n\n const checkIfElementExist = () => {\n const dialog = doc.querySelector(selector) satisfies R;\n\n if (dialog) {\n resolve(dialog);\n } else {\n if (Date.now() - startTime < timeout) {\n setTimeout(checkIfElementExist);\n } else {\n reject();\n }\n }\n };\n\n checkIfElementExist();\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\n::backdrop {\n --ix-dialog-backdrop: var(--theme-color-lightbox, #0000008c);\n}\n\n:focus-visible {\n outline: none !important;\n}\n\n:host {\n display: none;\n\n dialog {\n --ix-dialog-padding: 1rem;\n\n margin: 0;\n padding: var(--ix-dialog-padding);\n padding-top: calc(var(--ix-dialog-padding) + var(--ix-safe-area-inset-top));\n padding-bottom: calc(\n var(--ix-dialog-padding) + var(--ix-safe-area-inset-bottom)\n );\n left: 50%;\n }\n\n dialog::backdrop {\n backdrop-filter: blur(2.7182817459106445px);\n }\n\n .modal {\n display: flex;\n flex-direction: column;\n position: relative;\n border: none;\n border-radius: var(--theme-default-border-radius);\n background: var(--theme-modal--background);\n box-shadow: var(--theme-shadow-4);\n color: var(--theme-color-std-text);\n overflow: visible;\n max-height: 80vh;\n pointer-events: all;\n }\n\n .modal-size-360 {\n width: 22.5rem;\n }\n\n .modal-size-480 {\n width: 30rem;\n }\n\n .modal-size-600 {\n width: 37.5rem;\n }\n\n .modal-size-720 {\n width: 45rem;\n }\n\n .modal-size-840 {\n width: 52.5rem;\n }\n\n .modal-size-full-width {\n width: 95%;\n }\n\n .modal-size-full-screen {\n border-radius: 0;\n left: 0 !important;\n top: 0 !important;\n transform: none !important;\n box-shadow: none;\n\n --ix-dialog-full-screen-height: calc(\n var(--ix-safe-area-inset-top) + var(--ix-safe-area-inset-bottom)\n );\n\n width: calc(100% - var(--ix-dialog-padding) 2);\n min-width: calc(100% - var(--ix-dialog-padding) * 2);\n max-width: calc(100% - var(--ix-dialog-padding) * 2);\n\n min-height: calc(\n 100% - (var(--ix-dialog-padding) * 2) -\n var(--ix-dialog-full-screen-height)\n );\n max-height: calc(\n 100% - (var(--ix-dialog-padding) * 2) -\n var(--ix-dialog-full-screen-height)\n );\n }\n\n dialog.modal-size-full-screen::backdrop {\n background: var(--theme-modal--background);\n }\n\n .dialog-backdrop {\n display: block;\n position: fixed;\n width: 100vw;\n height: 100vh;\n top: 0;\n left: 0;\n\n pointer-events: none;\n }\n\n ::slotted(ix-modal-footer) {\n margin-top: auto;\n }\n}\n\n:host(.visible) {\n display: block;\n}\n\n:host(.align-center) {\n dialog {\n margin: 0;\n left: 50%;\n top: 50%;\n }\n}\n\n:host(.no-backdrop) {\n dialog::backdrop {\n background-color: transparent !important;\n backdrop-filter: none !important;\n }\n}\n\n:host(.with-icon) {\n ::slotted(ix-modal-footer),\n ::slotted(ix-modal-content) {\n margin-left: 3rem;\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 /\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 { A11yAttributes, a11yBoolean, a11yHostAttributes } from '../utils/a11y';\nimport Animation from '../utils/animation';\nimport { OnListener } from '../utils/listener';\nimport { waitForElement } from '../utils/waitForElement';\n\nexport type IxModalFixedSize = '360' \| '480' \| '600' \| '720' \| '840';\nexport type IxModalDynamicSize = 'full-width' \| 'full-screen';\nexport type IxModalSize = IxModalFixedSize \| IxModalDynamicSize;\n\n@Component({\n tag: 'ix-modal',\n styleUrl: 'modal.scss',\n shadow: true,\n})\nexport class Modal {\n private ariaAttributes: A11yAttributes = {};\n\n @Element() hostElement!: HTMLIxModalElement;\n\n /\n Modal size\n \n @since 2.0.0\n /\n @Prop() size: IxModalSize = '360';\n\n /\n Should the modal be animated\n /\n @Prop() animation = true;\n\n /\n Show a backdrop behind the modal dialog\n /\n @Prop() backdrop = true;\n\n /\n Dismiss modal on backdrop click\n \n @since 2.0.0\n /\n @Prop() closeOnBackdropClick = false;\n\n /\n Is called before the modal is dismissed.\n \n - Return `true` to proceed in dismissing the modal\n * - Return `false` to abort in dismissing the modal\n /\n @Prop() beforeDismiss: (reason?: any) => boolean \| Promise<boolean>;\n\n /\n Centered modal\n /\n @Prop() centered = false;\n\n /\n Use ESC to dismiss the modal\n * @deprecated - Use closeOnEscape instead\n /\n @Prop() keyboard = true;\n\n /\n If set to true the modal can be closed by pressing the Escape key\n /\n @Prop() closeOnEscape = true;\n\n /\n Dialog close\n /\n @Event() dialogClose: EventEmitter;\n\n /\n Dialog cancel\n /\n @Event() dialogDismiss: EventEmitter;\n\n @State() modalVisible = false;\n\n @OnListener<Modal>('keydown', (self) => !self.closeOnEscape \|\| !self.keyboard)\n onKey(e: KeyboardEvent) {\n if (e.key === 'Escape') {\n e.preventDefault();\n }\n }\n\n get dialog() {\n return this.hostElement.shadowRoot.querySelector('dialog');\n }\n\n private slideInModal() {\n const duration = this.animation ? Animation.mediumTime : 0;\n\n let transformY = this.centered ? '-50%' : 40;\n\n anime({\n targets: this.dialog,\n duration,\n opacity: [0, 1],\n translateY: [0, transformY],\n translateX: ['-50%', '-50%'],\n easing: 'easeOutSine',\n });\n }\n\n private slideOutModal(completeCallback: Function) {\n const duration = this.animation ? Animation.mediumTime : 0;\n\n let transformY = this.centered ? '-50%' : 40;\n\n anime({\n targets: this.dialog,\n duration,\n opacity: [1, 0],\n translateY: [transformY, 0],\n translateX: ['-50%', '-50%'],\n easing: 'easeInSine',\n complete: () => {\n if (completeCallback) {\n completeCallback();\n }\n },\n });\n }\n\n private onModalClick(event: MouseEvent) {\n if (event.target !== this.dialog) {\n return;\n }\n\n const rect = this.dialog.getBoundingClientRect();\n const isClickOutside =\n rect.top <= event.clientY &&\n event.clientY <= rect.top + rect.height &&\n rect.left <= event.clientX &&\n event.clientX <= rect.left + rect.width;\n\n if (!isClickOutside && this.closeOnBackdropClick) {\n this.dismissModal();\n }\n }\n\n /\n Show the dialog\n /\n @Method()\n async showModal() {\n try {\n const dialog = await waitForElement<HTMLDialogElement>(\n 'dialog',\n this.hostElement.shadowRoot\n );\n this.modalVisible = true;\n dialog.showModal();\n } catch (e) {\n console.error('HTMLDialogElement not existing');\n }\n }\n\n /\n Dismiss the dialog\n /\n @Method()\n async dismissModal<T = any>(reason?: T) {\n if (!this.modalVisible) {\n return;\n }\n\n let allowDismiss = true;\n\n if (this.beforeDismiss !== undefined) {\n allowDismiss = await this.beforeDismiss(reason);\n }\n if (!allowDismiss) {\n return;\n }\n\n this.slideOutModal(() => {\n this.modalVisible = false;\n this.dialog.close(\n JSON.stringify(\n {\n type: 'dismiss',\n reason,\n },\n null,\n 2\n )\n );\n\n this.dialogDismiss.emit(reason);\n });\n }\n\n /\n Close the dialog\n */\n @Method()\n async closeModal<T = any>(reason: T) {\n if (!this.modalVisible) {\n return;\n }\n\n this.slideOutModal(() => {\n this.modalVisible = false;\n this.dialog.close(\n JSON.stringify(\n {\n type: 'close',\n reason,\n },\n null,\n 2\n )\n );\n\n this.dialogClose.emit(reason);\n });\n }\n\n componentDidLoad() {\n this.slideInModal();\n }\n\n componentWillLoad() {\n this.ariaAttributes = a11yHostAttributes(this.hostElement);\n }\n\n render() {\n return (\n <Host\n class={{\n visible: this.modalVisible,\n 'no-backdrop': this.backdrop === false,\n 'align-center': this.centered,\n }}\n >\n <div class=\"dialog-backdrop\">\n <dialog\n aria-modal={a11yBoolean(true)}\n aria-describedby={this.ariaAttributes['aria-describedby']}\n aria-labelledby={this.ariaAttributes['aria-labelledby']}\n class={{\n modal: true,\n [`modal-size-${this.size}`]: true,\n }}\n onClose={() => this.dismissModal()}\n onClick={(event) => this.onModalClick(event)}\n onCancel={(e) => {\n e.preventDefault();\n this.dismissModal();\n }}\n >\n <slot></slot>\n </dialog>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-529f21c1.js');
-const baseButton = require('./base-button-3735b8c2.js');
-const a11y = require('./a11y-d3ce56d1.js');
+const baseButton = require('./base-button-a472cf2f.js');
+const a11y = require('./a11y-eba397e8.js');
 const paginationCss = ".form-control,.form-control-plaintext{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);color:var(--theme-input--color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--theme-input--border-radius);height:2rem;min-height:2rem;min-width:2rem;background-color:var(--theme-input--background);border:solid 1px var(--theme-input--border-color);box-shadow:var(--theme-input--box-shadow);padding-inline-start:0.5rem;padding-inline-end:0.5rem}.form-control::-moz-placeholder,.form-control-plaintext::-moz-placeholder{color:var(--theme-input-hint--color)}.form-control::placeholder,.form-control-plaintext::placeholder{color:var(--theme-input-hint--color)}.form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled),.form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled){cursor:pointer}.form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled),.form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled){cursor:pointer}.form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover,.form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover{background-color:var(--theme-input--background--hover);border-color:var(--theme-input--border-color--hover);cursor:auto}.form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover,.form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover{background-color:var(--theme-input--background--hover);border-color:var(--theme-input--border-color--hover);cursor:auto}.form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible,.form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible{background-color:var(--theme-input--background--focus);border-color:var(--theme-input--border-color--focus);outline-offset:var(--theme-input--focus--outline-offset);box-shadow:var(--theme-input--box-shadow);outline:1px solid var(--theme-color-focus-bdr)}.form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible,.form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible{background-color:var(--theme-input--background--focus);border-color:var(--theme-input--border-color--focus);outline-offset:var(--theme-input--focus--outline-offset);box-shadow:var(--theme-input--box-shadow);outline:1px solid var(--theme-color-focus-bdr)}.form-control:focus-visible{color:var(--theme-input--color)}.form-control[type=number]{text-align:right}.form-control[type=number]::-webkit-inner-spin-button{margin-right:-2px;margin-left:2px;display:none}.form-control.readonly,.form-control[readonly]{background:transparent !important;border-block-start:none !important;border-inline-start:none !important;border-inline-end:none !important;border-radius:0rem}.form-control:-moz-read-only{box-shadow:none !important;outline:none !important;border-color:var(--theme-input--border-color);cursor:default !important}.form-control:read-only,.form-control[readonly],.form-control[readOnly],.form-control.readonly{box-shadow:none !important;outline:none !important;border-color:var(--theme-input--border-color);cursor:default !important}.form-control:read-only::-moz-placeholder,.form-control[readonly]::-moz-placeholder,.form-control[readOnly]::-moz-placeholder,.form-control.readonly::-moz-placeholder{color:transparent}.form-control:-moz-read-only::placeholder{color:transparent}.form-control:read-only::placeholder,.form-control[readonly]::placeholder,.form-control[readOnly]::placeholder,.form-control.readonly::placeholder{color:transparent}.form-control:disabled,.form-control.disabled{background:transparent !important;border-block-start:none !important;border-inline-start:none !important;border-inline-end:none !important;border-radius:0rem;color:var(--theme-color-weak-text);border-color:var(--theme-input--border-color-bottom--disabled)}.form-control:disabled::-moz-placeholder,.form-control.disabled::-moz-placeholder{color:transparent}.form-control:disabled::placeholder,.form-control.disabled::placeholder{color:transparent}.form-control-plaintext{outline:0}.form-group{position:relative}.input-wrapper{display:flex;position:relative;align-items:center;flex-wrap:nowrap}.input-wrapper>.glyph{display:block;position:absolute;margin-inline-start:0.312rem;color:var(--theme-color-std-text)}.input-wrapper>input{padding-inline-start:2.2rem}select.form-control{padding:0 0.312rem}textarea.form-control{padding:0.375rem 0.5rem}input.disabled,input:disabled{color:var(--theme-input--color--disabled)}input:-moz-read-only{cursor:default}input:read-only,input.readonly{cursor:default}:host{display:inline-block;height:2rem;vertical-align:middle;cursor:pointer;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host button{all:unset;box-sizing:border-box;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;align-items:center;justify-content:center;width:100%;height:100%;padding:0 0.5rem}:host ix-spinner{margin-right:0.25rem}:host ix-icon{margin-right:0.25rem}:host .content{display:inline-block;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .content-start{width:100%}:host .icon{pointer-events:none}:host(.disabled){cursor:default}*,*::after,*::before{box-sizing:border-box}::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){*{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}::-webkit-scrollbar{width:0.5rem;height:0.5rem}::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}::-webkit-scrollbar-corner{display:none}:host .btn-danger{border-radius:var(--theme-btn--border-radius)}:host .btn-danger,:host .btn-danger.focus,:host .btn-danger:focus-visible{background-color:var(--theme-btn-danger--background);color:var(--theme-btn-danger--color);--ix-button-color:var(--theme-btn-danger--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-danger--border-color);border-style:solid}:host .btn-danger:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-danger.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-danger.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-danger.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger.selected:not(.disabled):not(:disabled):active,:host .btn-danger.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-danger:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-danger--border-color--hover);background-color:var(--theme-btn-danger--background--hover);color:var(--theme-btn-danger--color--hover)}:host .btn-danger:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger:not(.disabled):not(:disabled):active,:host .btn-danger:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-danger--border-color--active);background-color:var(--theme-btn-danger--background--active);color:var(--theme-btn-danger--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-danger.disabled,:host(.disabled) .btn-danger:disabled{pointer-events:none;border-color:var(--theme-btn-danger--border-color--disabled);background-color:var(--theme-btn-danger--background--disabled);color:var(--theme-btn-danger--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-danger--color--disabled)}:host .btn-outline-danger{border-radius:var(--theme-btn--border-radius)}:host .btn-outline-danger,:host .btn-outline-danger.focus,:host .btn-outline-danger:focus-visible{background-color:var(--theme-btn-outline-danger--background);color:var(--theme-btn-outline-danger--color);--ix-button-color:var(--theme-btn-outline-danger--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-danger--border-color);border-style:solid}:host .btn-outline-danger:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-outline-danger.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-outline-danger.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-danger.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-outline-danger.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-danger.selected:not(.disabled):not(:disabled):active,:host .btn-outline-danger.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-outline-danger:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-danger:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-outline-danger--border-color--hover);background-color:var(--theme-btn-outline-danger--background--hover);color:var(--theme-btn-outline-danger--color--hover)}:host .btn-outline-danger:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-danger:not(.disabled):not(:disabled):active,:host .btn-outline-danger:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-outline-danger--border-color--active);background-color:var(--theme-btn-outline-danger--background--active);color:var(--theme-btn-outline-danger--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-outline-danger.disabled,:host(.disabled) .btn-outline-danger:disabled{pointer-events:none;border-color:var(--theme-btn-outline-danger--border-color--disabled);background-color:var(--theme-btn-outline-danger--background--disabled);color:var(--theme-btn-outline-danger--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-danger--color--disabled)}:host .btn-invisible-danger{border-radius:var(--theme-btn--border-radius)}:host .btn-invisible-danger,:host .btn-invisible-danger.focus,:host .btn-invisible-danger:focus-visible{background-color:var(--theme-btn-invisible-danger--background);color:var(--theme-btn-invisible-danger--color);--ix-button-color:var(--theme-btn-invisible-danger--color);border-color:transparent}:host .btn-invisible-danger:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-invisible-danger.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-invisible-danger.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-danger.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-invisible-danger.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-danger.selected:not(.disabled):not(:disabled):active,:host .btn-invisible-danger.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-invisible-danger:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-danger:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-danger--background--hover);color:var(--theme-btn-invisible-danger--color--hover)}:host .btn-invisible-danger:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-danger:not(.disabled):not(:disabled):active,:host .btn-invisible-danger:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-danger--background--active);color:var(--theme-btn-invisible-danger--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-invisible-danger.disabled,:host(.disabled) .btn-invisible-danger:disabled{pointer-events:none;background-color:var(--theme-btn-invisible-danger--background--disabled);color:var(--theme-btn-invisible-danger--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-danger--color--disabled)}:host .btn-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-primary,:host .btn-primary.focus,:host .btn-primary:focus-visible{background-color:var(--theme-btn-primary--background);color:var(--theme-btn-primary--color);--ix-button-color:var(--theme-btn-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-primary--border-color);border-style:solid}:host .btn-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary.selected:not(.disabled):not(:disabled):active,:host .btn-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-primary--border-color--hover);background-color:var(--theme-btn-primary--background--hover);color:var(--theme-btn-primary--color--hover)}:host .btn-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary:not(.disabled):not(:disabled):active,:host .btn-primary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-primary--border-color--active);background-color:var(--theme-btn-primary--background--active);color:var(--theme-btn-primary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-primary.disabled,:host(.disabled) .btn-primary:disabled{pointer-events:none;border-color:var(--theme-btn-primary--border-color--disabled);background-color:var(--theme-btn-primary--background--disabled);color:var(--theme-btn-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-primary--color--disabled)}:host .btn-outline-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-outline-primary,:host .btn-outline-primary.focus,:host .btn-outline-primary:focus-visible{background-color:var(--theme-btn-outline-primary--background);color:var(--theme-btn-outline-primary--color);--ix-button-color:var(--theme-btn-outline-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-primary--border-color);border-style:solid}:host .btn-outline-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-outline-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-outline-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-outline-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary.selected:not(.disabled):not(:disabled):active,:host .btn-outline-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-outline-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-outline-primary--border-color--hover);background-color:var(--theme-btn-outline-primary--background--hover);color:var(--theme-btn-outline-primary--color--hover)}:host .btn-outline-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary:not(.disabled):not(:disabled):active,:host .btn-outline-primary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-outline-primary--border-color--active);background-color:var(--theme-btn-outline-primary--background--active);color:var(--theme-btn-outline-primary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-outline-primary.disabled,:host(.disabled) .btn-outline-primary:disabled{pointer-events:none;border-color:var(--theme-btn-outline-primary--border-color--disabled);background-color:var(--theme-btn-outline-primary--background--disabled);color:var(--theme-btn-outline-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-primary--color--disabled)}:host .btn-invisible-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-invisible-primary,:host .btn-invisible-primary.focus,:host .btn-invisible-primary:focus-visible{background-color:var(--theme-btn-invisible-primary--background);color:var(--theme-btn-invisible-primary--color);--ix-button-color:var(--theme-btn-invisible-primary--color);border-color:transparent}:host .btn-invisible-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-invisible-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):active,:host .btn-invisible-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-primary--background--hover);color:var(--theme-btn-invisible-primary--color--hover)}:host .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary:not(.disabled):not(:disabled):active,:host .btn-invisible-primary:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-primary--background--active);color:var(--theme-btn-invisible-primary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-invisible-primary.disabled,:host(.disabled) .btn-invisible-primary:disabled{pointer-events:none;background-color:var(--theme-btn-invisible-primary--background--disabled);color:var(--theme-btn-invisible-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-primary--color--disabled)}:host .btn-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-secondary,:host .btn-secondary.focus,:host .btn-secondary:focus-visible{background-color:var(--theme-btn-secondary--background);color:var(--theme-btn-secondary--color);--ix-button-color:var(--theme-btn-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-secondary--border-color);border-style:solid}:host .btn-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-secondary--border-color--hover);background-color:var(--theme-btn-secondary--background--hover);color:var(--theme-btn-secondary--color--hover)}:host .btn-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary:not(.disabled):not(:disabled):active,:host .btn-secondary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-secondary--border-color--active);background-color:var(--theme-btn-secondary--background--active);color:var(--theme-btn-secondary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-secondary.disabled,:host(.disabled) .btn-secondary:disabled{pointer-events:none;border-color:var(--theme-btn-secondary--border-color--disabled);background-color:var(--theme-btn-secondary--background--disabled);color:var(--theme-btn-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-secondary--color--disabled)}:host .btn-outline-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-outline-secondary,:host .btn-outline-secondary.focus,:host .btn-outline-secondary:focus-visible{background-color:var(--theme-btn-outline-secondary--background);color:var(--theme-btn-outline-secondary--color);--ix-button-color:var(--theme-btn-outline-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-secondary--border-color);border-style:solid}:host .btn-outline-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-outline-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-outline-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-outline-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-outline-secondary--border-color--hover);background-color:var(--theme-btn-outline-secondary--background--hover);color:var(--theme-btn-outline-secondary--color--hover)}:host .btn-outline-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary:not(.disabled):not(:disabled):active,:host .btn-outline-secondary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-outline-secondary--border-color--active);background-color:var(--theme-btn-outline-secondary--background--active);color:var(--theme-btn-outline-secondary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-outline-secondary.disabled,:host(.disabled) .btn-outline-secondary:disabled{pointer-events:none;border-color:var(--theme-btn-outline-secondary--border-color--disabled);background-color:var(--theme-btn-outline-secondary--background--disabled);color:var(--theme-btn-outline-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-secondary--color--disabled)}:host .btn-invisible-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-invisible-secondary,:host .btn-invisible-secondary.focus,:host .btn-invisible-secondary:focus-visible{background-color:var(--theme-btn-invisible-secondary--background);color:var(--theme-btn-invisible-secondary--color);--ix-button-color:var(--theme-btn-invisible-secondary--color);border-color:transparent}:host .btn-invisible-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-invisible-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-secondary--background--hover);color:var(--theme-btn-invisible-secondary--color--hover)}:host .btn-invisible-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary:not(.disabled):not(:disabled):active,:host .btn-invisible-secondary:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-secondary--background--active);color:var(--theme-btn-invisible-secondary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-invisible-secondary.disabled,:host(.disabled) .btn-invisible-secondary:disabled{pointer-events:none;background-color:var(--theme-btn-invisible-secondary--background--disabled);color:var(--theme-btn-invisible-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-secondary--color--disabled)}:host{display:inline-flex;justify-content:center;align-items:center}:host button{width:100%;height:100%;overflow:hidden;padding:0}:host button.btn-oval{border-radius:6.25rem}:host ix-icon{color:var(--ix-icon-button-color, currentColor);margin:0}:host ix-spinner{margin:0}:host(.btn-icon-12){height:1rem;width:1rem;min-width:1rem;min-height:1rem}:host(.btn-icon-16){height:1.5rem;width:1.5rem;min-width:1.5rem;min-height:1.5rem}:host(.btn-icon-32){height:2rem;width:2rem;min-width:2rem;min-height:2rem}:host(.btn-icon-12) ix-spinner{height:12px;width:12px}:host(.btn-icon-16) ix-spinner{height:16px;width:16px}:host(.btn-icon-32) ix-spinner{height:24px;width:24px}:host{}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host,:host .advanced-pagination,:host .item-count{display:inline-flex;align-items:center}:host .basic-pagination{padding:0 0.125rem}:host .advanced-pagination{padding:0 0.75rem}:host .page-selection{width:4.125rem;text-align:center;margin:0 0.5rem;-moz-appearance:textfield;-webkit-appearance:textfield}:host .page-buttons{white-space:nowrap}:host .total-count{white-space:nowrap}:host .item-count{flex-grow:1;justify-content:flex-end;margin-inline-start:1.5rem}:host .item-count ix-select{width:4.5rem;margin-inline-start:1.5rem}:host button{width:auto;min-width:2rem;height:2rem;padding:0 0.5rem}:host button+button{margin-inline-start:0.125rem}";
 const IxPaginationStyle0 = paginationCss;
@@ -30,7 +30,7 @@ const Pagination = class {
             },
         };
         this.maxCountPages = 7;
-        this.advanced = undefined;
+        this.advanced = false;
         this.itemCount = 15;
         this.showItemCount = true;
         this.count = undefined;
@@ -124,10 +124,10 @@ const Pagination = class {
         return index.h("span", { class: "page-buttons" }, pageButtons);
     }
     render() {
-        return (index.h(index.Host, { key: 'dfb53c78222c3c907d955c9548da14d68b0e94f8' }, index.h("ix-icon-button", { key: '80935e6cfdff052b4a9280fd0edeed6a2c27e007', disabled: this.selectedPage === 0, ghost: true, icon: 'chevron-left-small', onClick: () => this.decrease() }), this.advanced ? (index.h("div", { class: "advanced-pagination" }, index.h("ix-typography", { variant: "default" }, this.i18nPage), index.h("input", { class: "form-control page-selection", type: "number", min: "1", max: this.count, value: this.selectedPage + 1, onChange: (e) => {
+        return (index.h(index.Host, { key: 'f349793bc26bda4cb398dfb40e4a27724526acdb' }, index.h("ix-icon-button", { key: 'e5046b45dde285062efc6054a98ed92c3e5554e3', disabled: !this.count || this.selectedPage === 0, ghost: true, icon: 'chevron-left-small', onClick: () => this.decrease() }), this.advanced ? (index.h("div", { class: "advanced-pagination" }, index.h("ix-typography", { format: "body" }, this.i18nPage), index.h("input", { class: "form-control page-selection", type: "number", min: "1", max: this.count, value: this.selectedPage + 1, onChange: (e) => {
                 const index = Number.parseInt(e.target['value']);
                 this.selectPage(index - 1);
-            } }), index.h("span", { class: "total-count" }, index.h("ix-typography", { variant: "default" }, this.i18nOf, " ", this.count)))) : (index.h("span", { class: "basic-pagination" }, this.renderPageButtons(), " ")), index.h("ix-icon-button", { key: 'd6d17f40ee390398252466da12abecef4952b7ce', disabled: this.selectedPage === this.count - 1, ghost: true, icon: 'chevron-right-small', onClick: () => this.increase() }), this.advanced && this.showItemCount ? (index.h("span", { class: "item-count" }, index.h("ix-typography", { variant: "default" }, this.i18nItems), index.h("ix-select", { hideListHeader: true, i18nPlaceholder: "", i18nSelectListHeader: "", value: `${this.itemCount}`, onValueChange: (e) => {
+            } }), index.h("span", { class: "total-count" }, index.h("ix-typography", { format: "body" }, this.i18nOf, " ", this.count)))) : (index.h("span", { class: "basic-pagination" }, this.renderPageButtons(), " ")), index.h("ix-icon-button", { key: '1ae7f149469a320903721287ea02fc51538cfd5e', disabled: !this.count || this.selectedPage === this.count - 1, ghost: true, icon: 'chevron-right-small', onClick: () => this.increase() }), this.advanced && this.showItemCount ? (index.h("span", { class: "item-count" }, index.h("ix-typography", { format: "body" }, this.i18nItems), index.h("ix-select", { hideListHeader: true, i18nPlaceholder: "", i18nSelectListHeader: "", value: `${this.itemCount}`, onValueChange: (e) => {
                 const count = Number.parseInt(Array.isArray(e.detail) ? e.detail[0] : e.detail);
                 this.itemCountChanged.emit(count);
             } }, index.h("ix-select-item", { label: "10", value: "10" }), index.h("ix-select-item", { label: "15", value: "15" }), index.h("ix-select-item", { label: "20", value: "20" }), index.h("ix-select-item", { label: "40", value: "40" }), index.h("ix-select-item", { label: "100", value: "100" })))) : ('')));

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

	@@ -1 +1 @@
1	- {"file":"ix-pagination.entry.cjs.js","mappings":"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","names":["index","a11yBoolean","h","BaseButton","Host"],"sources":["src/components/pagination/pagination.scss?tag=ix-pagination&encapsulation=shadow","src/components/pagination/pagination.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2022 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/forms';\n@import '../icon-button/icon-button';\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n\n &,\n .advanced-pagination,\n .item-count {\n display: inline-flex;\n align-items: center;\n }\n\n .basic-pagination {\n padding: 0 0.125rem;\n }\n\n .advanced-pagination {\n padding: 0 $medium-space;\n }\n\n .page-selection {\n width: 4.125rem;\n text-align: center;\n margin: 0 $small-space;\n -moz-appearance: textfield;\n -webkit-appearance: textfield;\n }\n\n .page-buttons {\n white-space: nowrap;\n }\n\n .total-count {\n white-space: nowrap;\n }\n\n .item-count {\n flex-grow: 1;\n justify-content: flex-end;\n margin-inline-start: $large-space;\n\n ix-select {\n width: 4.5rem;\n margin-inline-start: $large-space;\n }\n }\n\n button {\n width: auto;\n min-width: 2rem;\n height: 2rem;\n padding: 0 0.5rem;\n }\n\n button + button {\n margin-inline-start: 0.125rem;\n }\n}\n","/\n * SPDX-FileCopyrightText: 2022 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} from '@stencil/core';\nimport { BaseButton, BaseButtonProps } from '../button/base-button';\nimport { a11yBoolean } from '../utils/a11y';\n\n/\n @since 1.5.0\n /\n@Component({\n tag: 'ix-pagination',\n styleUrl: 'pagination.scss',\n shadow: true,\n})\nexport class Pagination {\n private readonly baseButtonConfig: BaseButtonProps = {\n variant: 'secondary',\n outline: false,\n ghost: true,\n iconOnly: true,\n iconOval: false,\n disabled: false,\n icon: '',\n loading: false,\n selected: false,\n type: 'button',\n extraClasses: {\n ['w-auto']: true,\n },\n };\n\n private readonly maxCountPages = 7;\n\n @Element() hostElement!: HTMLIxPaginationElement;\n\n /\n Advanced mode\n /\n @Prop() advanced: boolean;\n\n /\n Number of items shown at once.\n * Can only be changed in advaced mode.\n /\n @Prop() itemCount = 15;\n\n /\n Show item count in advanced mode\n /\n @Prop() showItemCount = true;\n\n /\n Total number of pages\n /\n @Prop() count: number;\n\n /\n Zero based index of currently selected page\n /\n @Prop({ mutable: true }) selectedPage = 0;\n\n /\n i18n\n /\n @Prop() i18nPage = 'Page';\n\n /\n i18n\n /\n @Prop() i18nOf = 'of';\n\n /\n /\n i18n\n /\n @Prop() i18nItems = 'Items';\n\n /\n Page selection event\n /\n @Event() pageSelected: EventEmitter<number>;\n\n /\n Item count change event\n /\n @Event() itemCountChanged: EventEmitter<number>;\n\n private selectPage(index: number) {\n if (index < 0) {\n this.selectedPage = 0;\n } else if (index > this.count - 1) {\n this.selectedPage = this.count - 1;\n } else {\n this.selectedPage = index;\n }\n\n this.pageSelected.emit(this.selectedPage);\n }\n\n private increase() {\n if (this.selectedPage === this.count - 1) {\n return;\n }\n\n this.selectPage(this.selectedPage + 1);\n }\n\n private decrease() {\n if (this.selectedPage === 0) {\n return;\n }\n\n this.selectPage(this.selectedPage - 1);\n }\n\n private getPageButton(index: number) {\n const baseButtonProps: BaseButtonProps = {\n ...this.baseButtonConfig,\n onClick: () => this.selectPage(index),\n selected: this.selectedPage === index,\n ariaAttributes: {\n 'aria-pressed': a11yBoolean(this.selectedPage === index),\n },\n };\n\n return <BaseButton {...baseButtonProps}>{index + 1}</BaseButton>;\n }\n\n private renderPageButtons() {\n const pagesBeforeOverflow = Math.floor(this.maxCountPages / 2);\n const hasOverflow = this.count > this.maxCountPages;\n const hasOverflowStart =\n hasOverflow && this.selectedPage > pagesBeforeOverflow;\n const hasOverflowEnd =\n hasOverflow && this.selectedPage < this.count - pagesBeforeOverflow - 1;\n const pageButtons = [];\n\n let start = 0;\n let end = Math.min(this.count, this.maxCountPages);\n let pageCount = Math.floor((this.maxCountPages - 4) / 2);\n\n if (hasOverflowStart) {\n const baseButtonProps = {\n ...this.baseButtonConfig,\n onClick: () => {\n if (hasOverflowEnd) {\n this.selectPage(this.selectedPage - Math.max(0, 2 pageCount + 1));\n } else {\n this.selectPage(this.count - this.maxCountPages);\n }\n },\n };\n pageButtons.push(this.getPageButton(0));\n pageButtons.push(<BaseButton {...baseButtonProps}>...</BaseButton>);\n\n if (hasOverflowEnd) {\n start = this.count - this.maxCountPages + 2;\n } else {\n start = this.count - this.maxCountPages + 2;\n end = this.count;\n }\n }\n\n if (hasOverflowEnd) {\n if (hasOverflowStart) {\n start = this.selectedPage - pageCount;\n end = this.selectedPage + pageCount + 1;\n } else {\n end = this.maxCountPages - 2;\n }\n }\n\n for (let i = start; i < end; i++) {\n pageButtons.push(this.getPageButton(i));\n }\n\n if (hasOverflowEnd) {\n const baseButtonProps = {\n ...this.baseButtonConfig,\n onClick: () => {\n if (hasOverflowStart) {\n this.selectPage(this.selectedPage + Math.max(0, 2 * pageCount + 1));\n } else {\n this.selectPage(this.maxCountPages - 1);\n }\n },\n };\n pageButtons.push(<BaseButton {...baseButtonProps}>...</BaseButton>);\n pageButtons.push(this.getPageButton(this.count - 1));\n }\n\n return <span class=\"page-buttons\">{pageButtons}</span>;\n }\n\n render() {\n return (\n <Host>\n <ix-icon-button\n disabled={this.selectedPage === 0}\n ghost\n icon={'chevron-left-small'}\n onClick={() => this.decrease()}\n ></ix-icon-button>\n\n {this.advanced ? (\n <div class=\"advanced-pagination\">\n <ix-typography variant=\"default\">{this.i18nPage}</ix-typography>\n <input\n class=\"form-control page-selection\"\n type=\"number\"\n min=\"1\"\n max={this.count}\n value={this.selectedPage + 1}\n onChange={(e) => {\n const index = Number.parseInt(e.target['value']);\n this.selectPage(index - 1);\n }}\n />\n <span class=\"total-count\">\n <ix-typography variant=\"default\">\n {this.i18nOf} {this.count}\n </ix-typography>\n </span>\n </div>\n ) : (\n <span class=\"basic-pagination\">{this.renderPageButtons()} </span>\n )}\n\n <ix-icon-button\n disabled={this.selectedPage === this.count - 1}\n ghost\n icon={'chevron-right-small'}\n onClick={() => this.increase()}\n ></ix-icon-button>\n\n {this.advanced && this.showItemCount ? (\n <span class=\"item-count\">\n <ix-typography variant=\"default\">{this.i18nItems}</ix-typography>\n <ix-select\n hideListHeader\n i18nPlaceholder=\"\"\n i18nSelectListHeader=\"\"\n value={`${this.itemCount}`}\n onValueChange={(e) => {\n const count = Number.parseInt(\n Array.isArray(e.detail) ? e.detail[0] : e.detail\n );\n\n this.itemCountChanged.emit(count);\n }}\n >\n <ix-select-item label=\"10\" value=\"10\"></ix-select-item>\n <ix-select-item label=\"15\" value=\"15\"></ix-select-item>\n <ix-select-item label=\"20\" value=\"20\"></ix-select-item>\n <ix-select-item label=\"40\" value=\"40\"></ix-select-item>\n <ix-select-item label=\"100\" value=\"100\"></ix-select-item>\n </ix-select>\n </span>\n ) : (\n ''\n )}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-pagination.entry.cjs.js","mappings":"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","names":["index","a11yBoolean","h","BaseButton","Host"],"sources":["src/components/pagination/pagination.scss?tag=ix-pagination&encapsulation=shadow","src/components/pagination/pagination.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2022 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/forms';\n@import '../icon-button/icon-button';\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n\n &,\n .advanced-pagination,\n .item-count {\n display: inline-flex;\n align-items: center;\n }\n\n .basic-pagination {\n padding: 0 0.125rem;\n }\n\n .advanced-pagination {\n padding: 0 $medium-space;\n }\n\n .page-selection {\n width: 4.125rem;\n text-align: center;\n margin: 0 $small-space;\n -moz-appearance: textfield;\n -webkit-appearance: textfield;\n }\n\n .page-buttons {\n white-space: nowrap;\n }\n\n .total-count {\n white-space: nowrap;\n }\n\n .item-count {\n flex-grow: 1;\n justify-content: flex-end;\n margin-inline-start: $large-space;\n\n ix-select {\n width: 4.5rem;\n margin-inline-start: $large-space;\n }\n }\n\n button {\n width: auto;\n min-width: 2rem;\n height: 2rem;\n padding: 0 0.5rem;\n }\n\n button + button {\n margin-inline-start: 0.125rem;\n }\n}\n","/\n * SPDX-FileCopyrightText: 2022 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} from '@stencil/core';\nimport { BaseButton, BaseButtonProps } from '../button/base-button';\nimport { a11yBoolean } from '../utils/a11y';\n\n/\n @since 1.5.0\n /\n@Component({\n tag: 'ix-pagination',\n styleUrl: 'pagination.scss',\n shadow: true,\n})\nexport class Pagination {\n private readonly baseButtonConfig: BaseButtonProps = {\n variant: 'secondary',\n outline: false,\n ghost: true,\n iconOnly: true,\n iconOval: false,\n disabled: false,\n icon: '',\n loading: false,\n selected: false,\n type: 'button',\n extraClasses: {\n ['w-auto']: true,\n },\n };\n\n private readonly maxCountPages = 7;\n\n @Element() hostElement!: HTMLIxPaginationElement;\n\n /\n Advanced mode\n /\n @Prop() advanced = false;\n\n /\n Number of items shown at once.\n * Can only be changed in advaced mode.\n /\n @Prop() itemCount = 15;\n\n /\n Show item count in advanced mode\n /\n @Prop() showItemCount = true;\n\n /\n Total number of pages\n /\n @Prop() count: number;\n\n /\n Zero based index of currently selected page\n /\n @Prop({ mutable: true }) selectedPage = 0;\n\n /\n i18n\n /\n @Prop() i18nPage = 'Page';\n\n /\n i18n\n /\n @Prop() i18nOf = 'of';\n\n /\n /\n i18n\n /\n @Prop() i18nItems = 'Items';\n\n /\n Page selection event\n /\n @Event() pageSelected!: EventEmitter<number>;\n\n /\n Item count change event\n /\n @Event() itemCountChanged!: EventEmitter<number>;\n\n private selectPage(index: number) {\n if (index < 0) {\n this.selectedPage = 0;\n } else if (index > this.count - 1) {\n this.selectedPage = this.count - 1;\n } else {\n this.selectedPage = index;\n }\n\n this.pageSelected.emit(this.selectedPage);\n }\n\n private increase() {\n if (this.selectedPage === this.count - 1) {\n return;\n }\n\n this.selectPage(this.selectedPage + 1);\n }\n\n private decrease() {\n if (this.selectedPage === 0) {\n return;\n }\n\n this.selectPage(this.selectedPage - 1);\n }\n\n private getPageButton(index: number) {\n const baseButtonProps: BaseButtonProps = {\n ...this.baseButtonConfig,\n onClick: () => this.selectPage(index),\n selected: this.selectedPage === index,\n ariaAttributes: {\n 'aria-pressed': a11yBoolean(this.selectedPage === index),\n },\n };\n\n return <BaseButton {...baseButtonProps}>{index + 1}</BaseButton>;\n }\n\n private renderPageButtons() {\n const pagesBeforeOverflow = Math.floor(this.maxCountPages / 2);\n const hasOverflow = this.count > this.maxCountPages;\n const hasOverflowStart =\n hasOverflow && this.selectedPage > pagesBeforeOverflow;\n const hasOverflowEnd =\n hasOverflow && this.selectedPage < this.count - pagesBeforeOverflow - 1;\n const pageButtons = [];\n\n let start = 0;\n let end = Math.min(this.count, this.maxCountPages);\n let pageCount = Math.floor((this.maxCountPages - 4) / 2);\n\n if (hasOverflowStart) {\n const baseButtonProps = {\n ...this.baseButtonConfig,\n onClick: () => {\n if (hasOverflowEnd) {\n this.selectPage(this.selectedPage - Math.max(0, 2 pageCount + 1));\n } else {\n this.selectPage(this.count - this.maxCountPages);\n }\n },\n };\n pageButtons.push(this.getPageButton(0));\n pageButtons.push(<BaseButton {...baseButtonProps}>...</BaseButton>);\n\n if (hasOverflowEnd) {\n start = this.count - this.maxCountPages + 2;\n } else {\n start = this.count - this.maxCountPages + 2;\n end = this.count;\n }\n }\n\n if (hasOverflowEnd) {\n if (hasOverflowStart) {\n start = this.selectedPage - pageCount;\n end = this.selectedPage + pageCount + 1;\n } else {\n end = this.maxCountPages - 2;\n }\n }\n\n for (let i = start; i < end; i++) {\n pageButtons.push(this.getPageButton(i));\n }\n\n if (hasOverflowEnd) {\n const baseButtonProps = {\n ...this.baseButtonConfig,\n onClick: () => {\n if (hasOverflowStart) {\n this.selectPage(this.selectedPage + Math.max(0, 2 * pageCount + 1));\n } else {\n this.selectPage(this.maxCountPages - 1);\n }\n },\n };\n pageButtons.push(<BaseButton {...baseButtonProps}>...</BaseButton>);\n pageButtons.push(this.getPageButton(this.count - 1));\n }\n\n return <span class=\"page-buttons\">{pageButtons}</span>;\n }\n\n render() {\n return (\n <Host>\n <ix-icon-button\n disabled={!this.count \|\| this.selectedPage === 0}\n ghost\n icon={'chevron-left-small'}\n onClick={() => this.decrease()}\n ></ix-icon-button>\n\n {this.advanced ? (\n <div class=\"advanced-pagination\">\n <ix-typography format=\"body\">{this.i18nPage}</ix-typography>\n <input\n class=\"form-control page-selection\"\n type=\"number\"\n min=\"1\"\n max={this.count}\n value={this.selectedPage + 1}\n onChange={(e) => {\n const index = Number.parseInt(e.target['value']);\n this.selectPage(index - 1);\n }}\n />\n <span class=\"total-count\">\n <ix-typography format=\"body\">\n {this.i18nOf} {this.count}\n </ix-typography>\n </span>\n </div>\n ) : (\n <span class=\"basic-pagination\">{this.renderPageButtons()} </span>\n )}\n\n <ix-icon-button\n disabled={!this.count \|\| this.selectedPage === this.count - 1}\n ghost\n icon={'chevron-right-small'}\n onClick={() => this.increase()}\n ></ix-icon-button>\n\n {this.advanced && this.showItemCount ? (\n <span class=\"item-count\">\n <ix-typography format=\"body\">{this.i18nItems}</ix-typography>\n <ix-select\n hideListHeader\n i18nPlaceholder=\"\"\n i18nSelectListHeader=\"\"\n value={`${this.itemCount}`}\n onValueChange={(e) => {\n const count = Number.parseInt(\n Array.isArray(e.detail) ? e.detail[0] : e.detail\n );\n\n this.itemCountChanged.emit(count);\n }}\n >\n <ix-select-item label=\"10\" value=\"10\"></ix-select-item>\n <ix-select-item label=\"15\" value=\"15\"></ix-select-item>\n <ix-select-item label=\"20\" value=\"20\"></ix-select-item>\n <ix-select-item label=\"40\" value=\"40\"></ix-select-item>\n <ix-select-item label=\"100\" value=\"100\"></ix-select-item>\n </ix-select>\n </span>\n ) : (\n ''\n )}\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -229,7 +229,7 @@ const Panes = class {
         return pane ? pane.floating : false;
     }
     render() {
-        return (index.h(index.Host, { key: '8885c647d0661b05b2ed1b58fd8b61614eda6783' }, !this.isMobile ? (this.layout == 'full-vertical' ? (index.h("div", { class: "side-panes-wrapper" }, index.h("div", { class: {
+        return (index.h(index.Host, { key: '641a1bea04a43f86e081140f19d1e1ed85a95ae3' }, !this.isMobile ? (this.layout == 'full-vertical' ? (index.h("div", { class: "side-panes-wrapper" }, index.h("div", { class: {
                 row: true,
                 'padding-left': this.hasPadding('left'),
                 'padding-right': this.hasPadding('right'),

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

@@ -407,7 +407,7 @@ const Pane = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '10c2543fa3814a44f4a696b768070da6a0b2ce83', class: {
+        return (index.h(index.Host, { key: '967fa165d163b266a4c84ca6d42a792f8fe655ce', class: {
                 'inline-color': !this.floating,
                 'mobile-overlay': this.expanded && this.isMobile,
                 'top-expanded': this.expanded && this.isMobileTop && this.isMobile,
@@ -432,28 +432,28 @@ const Pane = class {
                 'box-shadow': this.floating,
                 'aria-expanded': this.expanded,
                 'not-visible': this.hideOnCollapse && !this.expanded,
-            } }, index.h("aside", { key: '4bea08d18307f21ca3d71874117152c10acd9ce9', class: {
+            } }, index.h("aside", { key: '7e4b9a66c3c2e74569811b69343d84e5760900bc', class: {
                 'top-bottom-pane': this.isBottomTopPane && !this.isMobile,
                 'left-right-pane': this.isLeftRightPane && !this.isMobile,
                 'mobile-pane': this.isMobile,
                 expanded: this.expanded,
-            } }, index.h("div", { key: 'b86bd206f53643fb15f411528dd9e41e1d060ef8', id: "title-div", class: {
+            } }, index.h("div", { key: 'df360544d45ce593f1e6abc24d7375396f17ac1b', id: "title-div", class: {
                 title: !this.isMobile && !this.hideOnCollapse && !this.showContent,
                 'title-finished': !this.isMobile && !this.hideOnCollapse && this.showContent,
                 'title-expanded': !this.isMobile && !this.hideOnCollapse && this.expanded,
                 'title-hide-on-collapse': !this.isMobile && this.hideOnCollapse,
                 'title-mobile': this.isMobile,
                 'header-gap': !this.isMobile && !this.hideOnCollapse,
-            } }, index.h("ix-icon-button", { key: '4f58db9432c7685521d7a60257fff08118bc3c76', class: "title-icon", size: "24", icon: this.expanded
+            } }, index.h("ix-icon-button", { key: '40e2e8a8ba1a4b299b775fc3c309ad35b8e2fbfc', class: "title-icon", size: "24", icon: this.expanded
                 ? this.isMobile || this.hideOnCollapse
                     ? 'close'
                     : this.expandIcon
                 : this.minimizeIcon, ghost: true, onClick: () => {
                 this.expanded = !this.expanded;
-            }, "aria-controls": this.composition + 'ToggleButton' }), index.h("span", { key: 'bd88452cdede62871391416c736ff80ae29f14a0', class: {
+            }, "aria-controls": this.composition + 'ToggleButton' }), index.h("span", { key: 'e44696a143e5a19389156b2b03db1cb1daccc46c', class: {
                 'title-text': true,
                 rotate: !this.expanded && !this.isMobile && this.isLeftRightPane,
-            } }, this.icon ? (index.h("ix-icon", { size: "24", name: this.icon })) : null, index.h("div", { key: '6e49c2b280c258209dd43aa03658ab4bbcb9b883', class: "title-text-overflow" }, index.h("ix-typography", { key: '65fa43f3fec84b63d24d14b38434eea186aa0910', format: "h4" }, this.heading)))), index.h("div", { key: '11a5da6825a09b85f4957854179264c43ccd8a6f', class: "side-pane-content", hidden: !this.showContent }, index.h("slot", { key: '3c986fb71f77e5481ffd6449445b4247429ff07e' })))));
+            } }, this.icon ? (index.h("ix-icon", { size: "24", name: this.icon })) : null, index.h("div", { key: '84fe19a5ba5e2c80e297eaf3473738f0cc2d45f2', class: "title-text-overflow" }, index.h("ix-typography", { key: 'f0426f58f9059483215dbe05f50838678041a0b4', format: "h4" }, this.heading)))), index.h("div", { key: '2f7dbe97863fee3a9ab6768439782f7a29a4e841', class: "side-pane-content", hidden: !this.showContent }, index.h("slot", { key: '4d37740b51d94519f2b98a1ebd51dd9292c9b636' })))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

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

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

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

@@ -27,13 +27,13 @@ const Pill = class {
                 [this.outline ? 'borderColor' : 'backgroundColor']: this.background,
             };
         }
-        return (index.h(index.Host, { key: '1d4d88d976564778835cd02e28d5ede6fe4dd6f7', style: this.variant === 'custom'
+        return (index.h(index.Host, { key: '29cace32b0045ef0c543039aef8bf869926e577a', style: this.variant === 'custom'
                 ? {
                     '--ix-icon-button-color': (_b = this.pillColor) !== null && _b !== void 0 ? _b : this.color,
                 }
                 : {}, title: this.el.textContent, class: {
                 'align-left': this.alignLeft,
-            } }, index.h("div", { key: '74474d69acc5d47b9bf6c5ebe12f676155a9e87d', style: Object.assign({}, customStyle), class: {
+            } }, index.h("div", { key: '36f07f0be369e34a047b56e9bc9ea13f99110780', style: Object.assign({}, customStyle), class: {
                 container: true,
                 outline: this.outline,
                 inactive: false,
@@ -47,10 +47,10 @@ const Pill = class {
                 custom: this.variant === 'custom',
                 closable: false,
                 icon: !!this.icon,
-            } }, index.h("ix-icon", { key: 'c70dcfe5f55c77484cf3300dca53f6a4e55d5caf', class: {
+            } }, index.h("ix-icon", { key: '536f7eb3f1b337606657f90e1430760e25058881', class: {
                 'with-icon': true,
                 hidden: this.icon === undefined || this.icon === '',
-            }, name: this.icon, size: '16' }), index.h("span", { key: 'b3d056721cb891a986ac3196a9fcf049c8b366f9', class: "slot-container" }, index.h("slot", { key: 'a42505aafc70d545e3ff8020c80f67067b3eac8c' })))));
+            }, name: this.icon, size: '16' }), index.h("span", { key: '3116eae155b7225bd638542e7f7f92193bbe993d', class: "slot-container" }, index.h("slot", { key: '5ff80e2f6dd3df78a8e6ded373038efa1340b479' })))));
     }
     get el() { return index.getElement(this); }
 };

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

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

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

@@ -12,7 +12,7 @@ const PlaygroundInternal = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return index.h(index.Host, { key: 'cb88d03e375d222d5903d13ca1fc154d9af86898' });
+        return index.h(index.Host, { key: '8e768a983e40b4948edd431c24d19f1a9b54c782' });
     }
 };
 PlaygroundInternal.style = IxPlaygroundInternalStyle0;

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

	@@ -1 +1 @@
1	- {"file":"ix-playground-internal.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,oHAAoH,CAAC;AAC3I,mCAAe,aAAa;;MCkBf,kBAAkB;;;;IAC7B,MAAM;QACJ,OAAOA,QAACC,UAAI,sDAAQ,CAAC;KACtB;;;;;;","names":["h","Host"],"sources":["src/components/playground/playground.scss?tag=ix-playground-internal&encapsulation=scoped","src/components/playground/playground.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'common-variables';\n\n:host {\n display: block;\n position: relative;\n width: 100vw;\n height: 100vh;\n padding: 0rem 0rem 0rem 0rem;\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 * LICENxSE file in the root directory of this source tree.\n /\n\nimport { Component, h, Host } from '@stencil/core';\n\n/* @internal */\n@Component({\n tag: 'ix-playground-internal',\n styleUrl: 'playground.scss',\n // shadow: true,\n // Set scoped=true and shadow=false to test global styles like checkbox etc\n scoped: true,\n})\nexport class PlaygroundInternal {\n render() {\n return <Host></Host>;\n }\n}\n"],"version":3}
1	+ {"file":"ix-playground-internal.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,oHAAoH,CAAC;AAC3I,mCAAe,aAAa;;MCkBf,kBAAkB;;;;IAC7B,MAAM;QACJ,OAAOA,QAACC,UAAI,sDAAQ,CAAC;KACtB;;;;;;","names":["h","Host"],"sources":["src/components/playground/playground.scss?tag=ix-playground-internal&encapsulation=scoped","src/components/playground/playground.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'common-variables';\n\n:host {\n display: block;\n position: relative;\n width: 100vw;\n height: 100vh;\n padding: 0rem 0rem 0rem 0rem;\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 * LICENxSE file in the root directory of this source tree.\n /\n\nimport { Component, h, Host } from '@stencil/core';\n\n/* @internal */\n@Component({\n tag: 'ix-playground-internal',\n styleUrl: 'playground.scss',\n // shadow: true,\n // Set scoped=true and shadow=false to test global styles like checkbox etc\n scoped: true,\n})\nexport class PlaygroundInternal {\n render() {\n return <Host></Host>;\n }\n}\n"],"version":3}

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

@@ -22,7 +22,7 @@ const PushCard = class {
         const color = this.variant === 'insight' || this.variant === 'notification'
             ? 'std'
             : undefined;
-        return (index.h(index.Host, { key: '9ba9fd8e6cc9f2b74e89fbbcd0c09a04aca45ac2' }, index.h("ix-card", { key: '913618b3fc69c1e59c3bbeb4c92569b2754ff3ae', variant: this.variant }, index.h("ix-card-content", { key: 'bb75a940ce3ac891fe947f4ed9e542c36a492f92' }, index.h("ix-card-title", { key: '37f4faab2368f341dd835fffe64b5915e1c4b322' }, this.icon ? (index.h("ix-icon", { class: 'icon', name: this.icon, size: "32" })) : null, index.h("span", { key: '42059a2ed174f15fdcce1ddb599bc831afade5b1', class: 'notification' }, (_a = this.notification) !== null && _a !== void 0 ? _a : 0), index.h("slot", { key: '9e3b8df6148f3b8e3d577d8ece5253b14c85a0dd', name: "title-action" })), index.h("ix-typography", { key: 'b7473e9fd9fdaee3045ec4884544469a9a6457fe', color: color, format: "h4" }, this.heading), index.h("ix-typography", { key: '26c212e7f6111df4d353525fda6b3a76ee7dea3c', color: color }, this.subheading)), index.h("ix-card-accordion", { key: 'a779591ee7405f4a725f1c04abbc7223064ee885', collapse: this.collapse }, index.h("slot", { key: '5d42faa67c254a1d8541c525cb8e0e08e6b0d095' })))));
+        return (index.h(index.Host, { key: 'bd4d0b97ac2a912d2a12d46b1db02eab923e385f' }, index.h("ix-card", { key: 'b1aa79776e78dde87baf8c373898bdd2ea505773', variant: this.variant }, index.h("ix-card-content", { key: '2a47a10c99c198d50d8ac3a9c18657a650740db8' }, index.h("ix-card-title", { key: 'b85a670379e7bef606cace90fe249381f55242dc' }, this.icon ? (index.h("ix-icon", { class: 'icon', name: this.icon, size: "32" })) : null, index.h("span", { key: 'f25b8482aba67d4affe7b52f0b407caad19ed1eb', class: 'notification' }, (_a = this.notification) !== null && _a !== void 0 ? _a : 0), index.h("slot", { key: 'befe6d95db540e1242ecd0b95506335161ad7845', name: "title-action" })), index.h("ix-typography", { key: 'e986568bbc39603d7143d0f547c285f1afe9c8ee', color: color, format: "h4" }, this.heading), index.h("ix-typography", { key: '3243ea18f7056a4264b96a011e9bfd88267de509', color: color }, this.subheading)), index.h("ix-card-accordion", { key: '2345d77b8deade135b787d4988780ee8dc4df593', collapse: this.collapse }, index.h("slot", { key: 'de2ea91c607d7dab1d47a5bd1cd1e07e4cf1d06d' })))));
     }
 };
 PushCard.style = IxPushCardStyle0;