@siemens/ix 0.0.0-pr-1318-20240627080522 → 0.0.0-pr-1522-20241021144048

package/dist/cjs/ix-modal.cjs.entry.js

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0f6297c8.js');
+const index = require('./index-529f21c1.js');
 const anime_es = require('./anime.es-e2814360.js');
-const a11y = require('./a11y-32046b56.js');
+const a11y = require('./a11y-eba397e8.js');
 const animation = require('./animation-99234008.js');
-const listener = require('./listener-0881dc51.js');
+const listener = require('./listener-164d1a4a.js');
 
 /*
  * SPDX-FileCopyrightText: 2024 Siemens AG
@@ -37,7 +37,7 @@ function waitForElement(selector, doc, timeout = 3000) {
     });
 }
 
-const modalCss = "::backdrop{--ix-dialog-backdrop:var(--theme-color-lightbox, #0000008c)}:focus-visible{outline:none !important}:host{display:none}:host dialog{margin:0;padding:1rem;left:50%}:host dialog::backdrop{-webkit-backdrop-filter:blur(2.7182817459px);backdrop-filter:blur(2.7182817459px)}:host .modal{display:flex;flex-direction:column;position:relative;border:none;border-radius:var(--theme-default-border-radius);background:var(--theme-modal--background);box-shadow:var(--theme-shadow-4);color:var(--theme-color-std-text);overflow:visible;max-height:80vh;pointer-events:all}:host .modal-size-360{width:22.5rem}:host .modal-size-480{width:30rem}:host .modal-size-600{width:37.5rem}:host .modal-size-720{width:45rem}:host .modal-size-840{width:52.5rem}:host .modal-size-full-width{width:95%}:host .modal-size-full-screen{left:0 !important;top:0 !important;transform:none !important;width:calc(100% - 28px);min-width:calc(100% - 28px);max-width:calc(100% - 28px);height:calc(100% - 28px);min-height:calc(100% - 28px);max-height:calc(100% - 28px)}:host .dialog-backdrop{display:block;position:fixed;width:100vw;height:100vh;top:0;left:0;pointer-events:none}:host ::slotted(ix-modal-footer){margin-top:auto}:host(.visible){display:block}:host(.align-center) dialog{margin:0;left:50%;top:50%}:host(.no-backdrop) dialog::backdrop{background-color:transparent !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important}:host(.with-icon) ::slotted(ix-modal-footer),:host(.with-icon) ::slotted(ix-modal-content){margin-left:2.5rem}";
+const modalCss = "::backdrop{--ix-dialog-backdrop:var(--theme-color-lightbox, #0000008c)}:focus-visible{outline:none !important}:host{display:none}:host dialog{--ix-dialog-padding:1rem;margin:0;padding:var(--ix-dialog-padding);padding-top:calc(var(--ix-dialog-padding) + var(--ix-safe-area-inset-top));padding-bottom:calc(var(--ix-dialog-padding) + var(--ix-safe-area-inset-bottom));left:50%}:host dialog::backdrop{-webkit-backdrop-filter:blur(2.7182817459px);backdrop-filter:blur(2.7182817459px)}:host .modal{display:flex;flex-direction:column;position:relative;border:none;border-radius:var(--theme-default-border-radius);background:var(--theme-modal--background);box-shadow:var(--theme-shadow-4);color:var(--theme-color-std-text);overflow:visible;max-height:80vh;pointer-events:all}:host .modal-size-360{width:22.5rem}:host .modal-size-480{width:30rem}:host .modal-size-600{width:37.5rem}:host .modal-size-720{width:45rem}:host .modal-size-840{width:52.5rem}:host .modal-size-full-width{width:95%}:host .modal-size-full-screen{border-radius:0;left:0 !important;top:0 !important;transform:none !important;box-shadow:none;--ix-dialog-full-screen-height:calc(\n    var(--ix-safe-area-inset-top) + var(--ix-safe-area-inset-bottom)\n  );width:calc(100% - var(--ix-dialog-padding) * 2);min-width:calc(100% - var(--ix-dialog-padding) * 2);max-width:calc(100% - var(--ix-dialog-padding) * 2);min-height:calc(100% - var(--ix-dialog-padding) * 2 - var(--ix-dialog-full-screen-height));max-height:calc(100% - var(--ix-dialog-padding) * 2 - var(--ix-dialog-full-screen-height))}:host dialog.modal-size-full-screen::backdrop{background:var(--theme-modal--background)}:host .dialog-backdrop{display:block;position:fixed;width:100vw;height:100vh;top:0;left:0;pointer-events:none}:host ::slotted(ix-modal-footer){margin-top:auto}:host(.visible){display:block}:host(.align-center) dialog{margin:0;left:50%;top:50%}:host(.no-backdrop) dialog::backdrop{background-color:transparent !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important}:host(.with-icon) ::slotted(ix-modal-footer),:host(.with-icon) ::slotted(ix-modal-content){margin-left:3rem}";
 const IxModalStyle0 = modalCss;
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -133,6 +133,9 @@ const Modal = class {
      * Dismiss the dialog
      */
     async dismissModal(reason) {
+        if (!this.modalVisible) {
+            return;
+        }
         let allowDismiss = true;
         if (this.beforeDismiss !== undefined) {
             allowDismiss = await this.beforeDismiss(reason);
@@ -153,7 +156,11 @@ const Modal = class {
      * Close the dialog
      */
     async closeModal(reason) {
+        if (!this.modalVisible) {
+            return;
+        }
         this.slideOutModal(() => {
+            this.modalVisible = false;
             this.dialog.close(JSON.stringify({
                 type: 'close',
                 reason,
@@ -168,17 +175,17 @@ const Modal = class {
         this.ariaAttributes = a11y.a11yHostAttributes(this.hostElement);
     }
     render() {
-        return (index.h(index.Host, { key: '8b2a2348be6f989b1acdbfed6d5801b561379152', class: {
+        return (index.h(index.Host, { key: '8da37bc0aac23c63b7ac842548d830d846ff92ce', class: {
                 visible: this.modalVisible,
                 'no-backdrop': this.backdrop === false,
                 'align-center': this.centered,
-            } }, index.h("div", { key: '677773f563437bfbc6039a41439b861cec214232', class: "dialog-backdrop" }, index.h("dialog", { key: '80ec0cbc9a3dbb9cfe013ebd6cf68490b5c579ad', "aria-modal": a11y.a11yBoolean(true), "aria-describedby": this.ariaAttributes['aria-describedby'], "aria-labelledby": this.ariaAttributes['aria-labelledby'], class: {
+            } }, index.h("div", { key: '32476b0da9857b242a3f2de542bee81fffdf0b86', class: "dialog-backdrop" }, index.h("dialog", { key: 'a4f71623afbe203f0b4da5ad606441115b104ae8', "aria-modal": a11y.a11yBoolean(true), "aria-describedby": this.ariaAttributes['aria-describedby'], "aria-labelledby": this.ariaAttributes['aria-labelledby'], class: {
                 modal: true,
                 [`modal-size-${this.size}`]: true,
             }, onClose: () => this.dismissModal(), onClick: (event) => this.onModalClick(event), onCancel: (e) => {
                 e.preventDefault();
                 this.dismissModal();
-            } }, index.h("slot", { key: '40b25ba86f7404f870664c769f12d7c7b3a8f882' })))));
+            } }, index.h("slot", { key: '18506986577fda589e6a6fa47315b9df927f13ad' })))));
     }
     get hostElement() { return index.getElement(this); }
 };

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

@@ -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}
+{"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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0f6297c8.js');
-const baseButton = require('./base-button-16d4fadf.js');
-const a11y = require('./a11y-32046b56.js');
+const index = require('./index-529f21c1.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: 'eb3c653903e26f70a13572f269418ae56a05e375' }, index.h("ix-icon-button", { key: 'a62eb19fbafd0cc39ede3b82a2bc1ca801da27eb', 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: 'ea6b9cd0d23c7eeda8f5aa66bb18157721bf6615', 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

@@ -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}
+{"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

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0f6297c8.js');
-const service = require('./service-a42add5f.js');
+const index = require('./index-529f21c1.js');
+const service = require('./service-39a8e5fe.js');
 const breakpoints = require('./breakpoints-5d1583fb.js');
 require('./typed-event-8032c0c0.js');
 
@@ -229,7 +229,7 @@ const Panes = class {
         return pane ? pane.floating : false;
     }
     render() {
-        return (index.h(index.Host, { key: '52ada343d80a6508c1b85de923327cb9c42c9429' }, !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

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0f6297c8.js');
+const index = require('./index-529f21c1.js');
 const anime_es = require('./anime.es-e2814360.js');
 const animation = require('./animation-99234008.js');
-const service = require('./service-a42add5f.js');
+const service = require('./service-39a8e5fe.js');
 const breakpoints = require('./breakpoints-5d1583fb.js');
 require('./typed-event-8032c0c0.js');
 
@@ -407,7 +407,7 @@ const Pane = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '5073e610b9b02ad10f5272b0e42d23f540d9065e', 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: '8a21c58d61d5364309343737bb8bd283b3e25efe', 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: 'd75b5af119dfacbda1db9974e36435f300cb515b', 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: '31dba3e6d0b6f2a70d9c6446dde96712fe10c5bc', 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: 'cab9e83d8ef36a4ef334e4f18b6385f64c8a5ef7', 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: '7f4c6daed699ed852da6145253d078637a27cacf', class: "title-text-overflow" }, index.h("ix-typography", { key: '4486830e173e8625386a0bd6250ecc43856435ec', format: "h4" }, this.heading)))), index.h("div", { key: 'ac32177babb00ab47027ea28747b96d386887091', class: "side-pane-content", hidden: !this.showContent }, index.h("slot", { key: '0e328617b71f534b7e5e23be765a04b541331dc2' })))));
+            } }, 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

@@ -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}
+{"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}