@siemens/ix-docs 4.3.0 → 5.0.0

package/build/static/demo/v2/preview/html/assets/ix-pagination.entry-Dq9avUnj.js

@@ -0,0 +1,219 @@
+import { a as registerInstance, c as createEvent, g as getElement, h, H as Host } from "./global-DjWMysHf.js";
+import { B as BaseButton } from "./base-button-hppF0uUM-BayQ2Iat.js";
+import { a as a11yBoolean } from "./a11y-B5k8YVR0-BOSd6BQK.js";
+import { j as iconChevronRightSmall, g as iconChevronLeftSmall } from "./index-Cl7fhG1I-C77BCFLW.js";
+const paginationCss = () => `.ix-form-control,.ix-form-control-plaintext{color:var(--theme-input--color);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;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ix-form-control::-moz-placeholder,.ix-form-control-plaintext::-moz-placeholder{color:var(--theme-input-hint--color)}.ix-form-control::placeholder,.ix-form-control-plaintext::placeholder{color:var(--theme-input-hint--color)}.ix-form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled),.ix-form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled){cursor:pointer}.ix-form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled),.ix-form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled){cursor:pointer}.ix-form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover,.ix-form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled).hover,.ix-form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover,.ix-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}.ix-form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover,.ix-form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled).hover,.ix-form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover,.ix-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}.ix-form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible,.ix-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)}.ix-form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible,.ix-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)}.ix-form-control:focus-visible{color:var(--theme-input--color)}.ix-form-control[type=number]::-webkit-inner-spin-button{margin-right:-2px;margin-left:2px;display:none}.ix-form-control[type=number]{text-align:right}.ix-form-control.readonly,.ix-form-control[readonly]{background:transparent !important;border-block-start:none !important;border-inline-start:none !important;border-inline-end:none !important;border-radius:0rem}.ix-form-control:-moz-read-only{box-shadow:none !important;outline:none !important;border-color:var(--theme-input--border-color);cursor:default !important}.ix-form-control:read-only,.ix-form-control[readonly],.ix-form-control[readOnly],.ix-form-control.readonly{box-shadow:none !important;outline:none !important;border-color:var(--theme-input--border-color);cursor:default !important}.ix-form-control:read-only::-moz-placeholder,.ix-form-control[readonly]::-moz-placeholder,.ix-form-control[readOnly]::-moz-placeholder,.ix-form-control.readonly::-moz-placeholder{color:transparent}.ix-form-control:-moz-read-only::placeholder{color:transparent}.ix-form-control:read-only::placeholder,.ix-form-control[readonly]::placeholder,.ix-form-control[readOnly]::placeholder,.ix-form-control.readonly::placeholder{color:transparent}.ix-form-control:disabled,.ix-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)}.ix-form-control:disabled::-moz-placeholder,.ix-form-control.disabled::-moz-placeholder{color:transparent}.ix-form-control:disabled::placeholder,.ix-form-control.disabled::placeholder{color:transparent}.ix-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.ix-form-control{padding:0 0.312rem}textarea.ix-form-control{padding:0.375rem 0.5rem}input.ix-form-control.disabled,input.ix-form-control:disabled{color:var(--theme-input--color--disabled)}input.ix-form-control:-moz-read-only{cursor:default}input.ix-form-control:read-only,input.ix-form-control.readonly{cursor:default}:host{--ix-button-border-radius-left:var(--theme-btn--border-radius);--ix-button-border-radius-right:var(--theme-btn--border-radius);display:inline-block;height:2rem;vertical-align:middle;cursor:pointer;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}: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{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}: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{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host button,:host a{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 .content{display:inline-block;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .content-start{width:100%}:host .icon{pointer-events:none;margin-right:0.25rem}:host .icon-right{margin-left:0.25rem}:host(.disabled){cursor:default}:host(.ix-focused) .btn{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn:focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host{--ix-button-border-radius-left:var(--theme-btn--border-radius);--ix-button-border-radius-right:var(--theme-btn--border-radius);display:inline-block;height:2rem;vertical-align:middle;cursor:pointer;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}: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{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}: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{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host button,:host a{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 .content{display:inline-block;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .content-start{width:100%}:host .icon{pointer-events:none;margin-right:0.25rem}:host .icon-right{margin-left:0.25rem}:host(.disabled){cursor:default}:host(.ix-focused) .btn{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn:focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-primary{text-align:start;border-top-left-radius:var(--ix-button-border-radius-left);border-bottom-left-radius:var(--ix-button-border-radius-left);border-top-right-radius:var(--ix-button-border-radius-right);border-bottom-right-radius:var(--ix-button-border-radius-right)}:host .btn-primary{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.selected{background-color:var(--theme-btn-primary--background--pressed);color:var(--theme-btn-primary--color--pressed)}:host .btn-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary.selected:not(.disabled):not(:disabled):hover,:host .btn-primary.selected:not(.disabled):not(:disabled).hover{background-color:var(--theme-btn-primary--background--pressed-hover);color:var(--theme-btn-primary--color--pressed-hover)}: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-btn-primary--background--pressed-hover);color:var(--theme-btn-primary--color--pressed-active)}:host .btn-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary:not(.disabled):not(:disabled):hover,: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-secondary{text-align:start;border-top-left-radius:var(--ix-button-border-radius-left);border-bottom-left-radius:var(--ix-button-border-radius-left);border-top-right-radius:var(--ix-button-border-radius-right);border-bottom-right-radius:var(--ix-button-border-radius-right)}:host .btn-secondary{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.selected{background-color:var(--theme-btn-secondary--background--pressed);color:var(--theme-btn-secondary--color--pressed)}:host .btn-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary.selected:not(.disabled):not(:disabled):hover,:host .btn-secondary.selected:not(.disabled):not(:disabled).hover{background-color:var(--theme-btn-secondary--background--pressed-hover);color:var(--theme-btn-secondary--color--pressed-hover)}: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-btn-secondary--background--pressed-hover);color:var(--theme-btn-secondary--color--pressed-active)}:host .btn-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary:not(.disabled):not(:disabled):hover,: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-tertiary{text-align:start;border-top-left-radius:var(--ix-button-border-radius-left);border-bottom-left-radius:var(--ix-button-border-radius-left);border-top-right-radius:var(--ix-button-border-radius-right);border-bottom-right-radius:var(--ix-button-border-radius-right)}:host .btn-tertiary{background-color:var(--theme-btn-tertiary--background);color:var(--theme-btn-tertiary--color);--ix-button-color:var(--theme-btn-tertiary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-tertiary--border-color);border-style:solid}:host .btn-tertiary.selected{background-color:var(--theme-btn-tertiary--background--pressed);color:var(--theme-btn-tertiary--color--pressed)}:host .btn-tertiary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-tertiary.selected:not(.disabled):not(:disabled):hover,:host .btn-tertiary.selected:not(.disabled):not(:disabled).hover{background-color:var(--theme-btn-tertiary--background--pressed-hover);color:var(--theme-btn-tertiary--color--pressed-hover)}:host .btn-tertiary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-tertiary.selected:not(.disabled):not(:disabled):active,:host .btn-tertiary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-tertiary--background--pressed-hover);color:var(--theme-btn-tertiary--color--pressed-active)}:host .btn-tertiary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-tertiary:not(.disabled):not(:disabled):hover,:host .btn-tertiary:not(.disabled):not(:disabled).hover{border-color:var(--theme-btn-tertiary--border-color--hover);background-color:var(--theme-btn-tertiary--background--hover);color:var(--theme-btn-tertiary--color--hover)}:host .btn-tertiary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-tertiary:not(.disabled):not(:disabled):active,:host .btn-tertiary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-tertiary--border-color--active);background-color:var(--theme-btn-tertiary--background--active);color:var(--theme-btn-tertiary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-tertiary.disabled,:host(.disabled) .btn-tertiary:disabled{pointer-events:none;border-color:var(--theme-btn-tertiary--border-color--disabled);background-color:var(--theme-btn-tertiary--background--disabled);color:var(--theme-btn-tertiary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-tertiary--color--disabled)}:host .btn-subtle-primary{text-align:start;border-top-left-radius:var(--ix-button-border-radius-left);border-bottom-left-radius:var(--ix-button-border-radius-left);border-top-right-radius:var(--ix-button-border-radius-right);border-bottom-right-radius:var(--ix-button-border-radius-right)}:host .btn-subtle-primary{background-color:var(--theme-btn-subtle-primary--background);color:var(--theme-btn-subtle-primary--color);--ix-button-color:var(--theme-btn-subtle-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-subtle-primary--border-color);border-style:solid}:host .btn-subtle-primary.selected{background-color:var(--theme-btn-subtle-primary--background--pressed);color:var(--theme-btn-subtle-primary--color--pressed)}:host .btn-subtle-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-primary.selected:not(.disabled):not(:disabled):hover,:host .btn-subtle-primary.selected:not(.disabled):not(:disabled).hover{background-color:var(--theme-btn-subtle-primary--background--pressed-hover);color:var(--theme-btn-subtle-primary--color--pressed-hover)}:host .btn-subtle-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-primary.selected:not(.disabled):not(:disabled):active,:host .btn-subtle-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-subtle-primary--background--pressed-hover);color:var(--theme-btn-subtle-primary--color--pressed-active)}:host .btn-subtle-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-primary:not(.disabled):not(:disabled):hover,:host .btn-subtle-primary:not(.disabled):not(:disabled).hover{border-color:var(--theme-btn-subtle-primary--border-color--hover);background-color:var(--theme-btn-subtle-primary--background--hover);color:var(--theme-btn-subtle-primary--color--hover)}:host .btn-subtle-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-primary:not(.disabled):not(:disabled):active,:host .btn-subtle-primary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-subtle-primary--border-color--active);background-color:var(--theme-btn-subtle-primary--background--active);color:var(--theme-btn-subtle-primary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-subtle-primary.disabled,:host(.disabled) .btn-subtle-primary:disabled{pointer-events:none;border-color:var(--theme-btn-subtle-primary--border-color--disabled);background-color:var(--theme-btn-subtle-primary--background--disabled);color:var(--theme-btn-subtle-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-subtle-primary--color--disabled)}:host .btn-subtle-secondary{text-align:start;border-top-left-radius:var(--ix-button-border-radius-left);border-bottom-left-radius:var(--ix-button-border-radius-left);border-top-right-radius:var(--ix-button-border-radius-right);border-bottom-right-radius:var(--ix-button-border-radius-right)}:host .btn-subtle-secondary{background-color:var(--theme-btn-subtle-secondary--background);color:var(--theme-btn-subtle-secondary--color);--ix-button-color:var(--theme-btn-subtle-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-subtle-secondary--border-color);border-style:solid}:host .btn-subtle-secondary.selected{background-color:var(--theme-btn-subtle-secondary--background--pressed);color:var(--theme-btn-subtle-secondary--color--pressed)}:host .btn-subtle-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-secondary.selected:not(.disabled):not(:disabled):hover,:host .btn-subtle-secondary.selected:not(.disabled):not(:disabled).hover{background-color:var(--theme-btn-subtle-secondary--background--pressed-hover);color:var(--theme-btn-subtle-secondary--color--pressed-hover)}:host .btn-subtle-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-subtle-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-subtle-secondary--background--pressed-hover);color:var(--theme-btn-subtle-secondary--color--pressed-active)}:host .btn-subtle-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-secondary:not(.disabled):not(:disabled):hover,:host .btn-subtle-secondary:not(.disabled):not(:disabled).hover{border-color:var(--theme-btn-subtle-secondary--border-color--hover);background-color:var(--theme-btn-subtle-secondary--background--hover);color:var(--theme-btn-subtle-secondary--color--hover)}:host .btn-subtle-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-secondary:not(.disabled):not(:disabled):active,:host .btn-subtle-secondary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-subtle-secondary--border-color--active);background-color:var(--theme-btn-subtle-secondary--background--active);color:var(--theme-btn-subtle-secondary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-subtle-secondary.disabled,:host(.disabled) .btn-subtle-secondary:disabled{pointer-events:none;border-color:var(--theme-btn-subtle-secondary--border-color--disabled);background-color:var(--theme-btn-subtle-secondary--background--disabled);color:var(--theme-btn-subtle-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-subtle-secondary--color--disabled)}:host .btn-subtle-tertiary{text-align:start;border-top-left-radius:var(--ix-button-border-radius-left);border-bottom-left-radius:var(--ix-button-border-radius-left);border-top-right-radius:var(--ix-button-border-radius-right);border-bottom-right-radius:var(--ix-button-border-radius-right)}:host .btn-subtle-tertiary{background-color:var(--theme-btn-subtle-tertiary--background);color:var(--theme-btn-subtle-tertiary--color);--ix-button-color:var(--theme-btn-subtle-tertiary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-subtle-tertiary--border-color);border-style:solid}:host .btn-subtle-tertiary.selected{background-color:var(--theme-btn-subtle-tertiary--background--pressed);color:var(--theme-btn-subtle-tertiary--color--pressed)}:host .btn-subtle-tertiary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-tertiary.selected:not(.disabled):not(:disabled):hover,:host .btn-subtle-tertiary.selected:not(.disabled):not(:disabled).hover{background-color:var(--theme-btn-subtle-tertiary--background--pressed-hover);color:var(--theme-btn-subtle-tertiary--color--pressed-hover)}:host .btn-subtle-tertiary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-tertiary.selected:not(.disabled):not(:disabled):active,:host .btn-subtle-tertiary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-subtle-tertiary--background--pressed-hover);color:var(--theme-btn-subtle-tertiary--color--pressed-active)}:host .btn-subtle-tertiary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-tertiary:not(.disabled):not(:disabled):hover,:host .btn-subtle-tertiary:not(.disabled):not(:disabled).hover{border-color:var(--theme-btn-subtle-tertiary--border-color--hover);background-color:var(--theme-btn-subtle-tertiary--background--hover);color:var(--theme-btn-subtle-tertiary--color--hover)}:host .btn-subtle-tertiary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-tertiary:not(.disabled):not(:disabled):active,:host .btn-subtle-tertiary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-subtle-tertiary--border-color--active);background-color:var(--theme-btn-subtle-tertiary--background--active);color:var(--theme-btn-subtle-tertiary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-subtle-tertiary.disabled,:host(.disabled) .btn-subtle-tertiary:disabled{pointer-events:none;border-color:var(--theme-btn-subtle-tertiary--border-color--disabled);background-color:var(--theme-btn-subtle-tertiary--background--disabled);color:var(--theme-btn-subtle-tertiary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-subtle-tertiary--color--disabled)}:host .btn-danger-primary{text-align:start;border-top-left-radius:var(--ix-button-border-radius-left);border-bottom-left-radius:var(--ix-button-border-radius-left);border-top-right-radius:var(--ix-button-border-radius-right);border-bottom-right-radius:var(--ix-button-border-radius-right)}:host .btn-danger-primary{background-color:var(--theme-btn-danger-primary--background);color:var(--theme-btn-danger-primary--color);--ix-button-color:var(--theme-btn-danger-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-danger-primary--border-color);border-style:solid}:host .btn-danger-primary.selected{background-color:var(--theme-btn-danger-primary--background--pressed);color:var(--theme-btn-danger-primary--color--pressed)}:host .btn-danger-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger-primary.selected:not(.disabled):not(:disabled):hover,:host .btn-danger-primary.selected:not(.disabled):not(:disabled).hover{background-color:var(--theme-btn-danger-primary--background--pressed-hover);color:var(--theme-btn-danger-primary--color--pressed-hover)}:host .btn-danger-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger-primary.selected:not(.disabled):not(:disabled):active,:host .btn-danger-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-danger-primary--background--pressed-hover);color:var(--theme-btn-danger-primary--color--pressed-active)}:host .btn-danger-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger-primary:not(.disabled):not(:disabled):hover,:host .btn-danger-primary:not(.disabled):not(:disabled).hover{border-color:var(--theme-btn-danger-primary--border-color--hover);background-color:var(--theme-btn-danger-primary--background--hover);color:var(--theme-btn-danger-primary--color--hover)}:host .btn-danger-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger-primary:not(.disabled):not(:disabled):active,:host .btn-danger-primary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-danger-primary--border-color--active);background-color:var(--theme-btn-danger-primary--background--active);color:var(--theme-btn-danger-primary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-danger-primary.disabled,:host(.disabled) .btn-danger-primary:disabled{pointer-events:none;border-color:var(--theme-btn-danger-primary--border-color--disabled);background-color:var(--theme-btn-danger-primary--background--disabled);color:var(--theme-btn-danger-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-danger-primary--color--disabled)}:host .btn-danger-secondary{text-align:start;border-top-left-radius:var(--ix-button-border-radius-left);border-bottom-left-radius:var(--ix-button-border-radius-left);border-top-right-radius:var(--ix-button-border-radius-right);border-bottom-right-radius:var(--ix-button-border-radius-right)}:host .btn-danger-secondary{background-color:var(--theme-btn-danger-secondary--background);color:var(--theme-btn-danger-secondary--color);--ix-button-color:var(--theme-btn-danger-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-danger-secondary--border-color);border-style:solid}:host .btn-danger-secondary.selected{background-color:var(--theme-btn-danger-secondary--background--pressed);color:var(--theme-btn-danger-secondary--color--pressed)}:host .btn-danger-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger-secondary.selected:not(.disabled):not(:disabled):hover,:host .btn-danger-secondary.selected:not(.disabled):not(:disabled).hover{background-color:var(--theme-btn-danger-secondary--background--pressed-hover);color:var(--theme-btn-danger-secondary--color--pressed-hover)}:host .btn-danger-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-danger-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-danger-secondary--background--pressed-hover);color:var(--theme-btn-danger-secondary--color--pressed-active)}:host .btn-danger-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger-secondary:not(.disabled):not(:disabled):hover,:host .btn-danger-secondary:not(.disabled):not(:disabled).hover{border-color:var(--theme-btn-danger-secondary--border-color--hover);background-color:var(--theme-btn-danger-secondary--background--hover);color:var(--theme-btn-danger-secondary--color--hover)}:host .btn-danger-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger-secondary:not(.disabled):not(:disabled):active,:host .btn-danger-secondary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-danger-secondary--border-color--active);background-color:var(--theme-btn-danger-secondary--background--active);color:var(--theme-btn-danger-secondary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-danger-secondary.disabled,:host(.disabled) .btn-danger-secondary:disabled{pointer-events:none;border-color:var(--theme-btn-danger-secondary--border-color--disabled);background-color:var(--theme-btn-danger-secondary--background--disabled);color:var(--theme-btn-danger-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-danger-secondary--color--disabled)}:host .btn-danger-tertiary{text-align:start;border-top-left-radius:var(--ix-button-border-radius-left);border-bottom-left-radius:var(--ix-button-border-radius-left);border-top-right-radius:var(--ix-button-border-radius-right);border-bottom-right-radius:var(--ix-button-border-radius-right)}:host .btn-danger-tertiary{background-color:var(--theme-btn-danger-tertiary--background);color:var(--theme-btn-danger-tertiary--color);--ix-button-color:var(--theme-btn-danger-tertiary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-danger-tertiary--border-color);border-style:solid}:host .btn-danger-tertiary.selected{background-color:var(--theme-btn-danger-tertiary--background--pressed);color:var(--theme-btn-danger-tertiary--color--pressed)}:host .btn-danger-tertiary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger-tertiary.selected:not(.disabled):not(:disabled):hover,:host .btn-danger-tertiary.selected:not(.disabled):not(:disabled).hover{background-color:var(--theme-btn-danger-tertiary--background--pressed-hover);color:var(--theme-btn-danger-tertiary--color--pressed-hover)}:host .btn-danger-tertiary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger-tertiary.selected:not(.disabled):not(:disabled):active,:host .btn-danger-tertiary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-danger-tertiary--background--pressed-hover);color:var(--theme-btn-danger-tertiary--color--pressed-active)}:host .btn-danger-tertiary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger-tertiary:not(.disabled):not(:disabled):hover,:host .btn-danger-tertiary:not(.disabled):not(:disabled).hover{border-color:var(--theme-btn-danger-tertiary--border-color--hover);background-color:var(--theme-btn-danger-tertiary--background--hover);color:var(--theme-btn-danger-tertiary--color--hover)}:host .btn-danger-tertiary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger-tertiary:not(.disabled):not(:disabled):active,:host .btn-danger-tertiary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-danger-tertiary--border-color--active);background-color:var(--theme-btn-danger-tertiary--background--active);color:var(--theme-btn-danger-tertiary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-danger-tertiary.disabled,:host(.disabled) .btn-danger-tertiary:disabled{pointer-events:none;border-color:var(--theme-btn-danger-tertiary--border-color--disabled);background-color:var(--theme-btn-danger-tertiary--background--disabled);color:var(--theme-btn-danger-tertiary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-danger-tertiary--color--disabled)}*,*::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{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 .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 *,: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{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}: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{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}: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 Pagination = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.pageSelected = createEvent(this, "pageSelected", 7);
+    this.itemCountChanged = createEvent(this, "itemCountChanged", 7);
+  }
+  baseButtonConfig = {
+    variant: "subtle-tertiary",
+    iconOnly: true,
+    iconOval: false,
+    disabled: false,
+    icon: "",
+    loading: false,
+    selected: false,
+    type: "button"
+  };
+  maxCountPages = 7;
+  get hostElement() {
+    return getElement(this);
+  }
+  /**
+   * Advanced mode
+   */
+  advanced = false;
+  /**
+   * Number of items shown at once.
+   * Can only be changed in advanced mode.
+   */
+  itemCount = 15;
+  /**
+   * Hide item count in advanced mode
+   */
+  hideItemCount = false;
+  /**
+   * Custom item count options for advanced mode.
+   * Provide an array of positive numbers to display in the items per page dropdown.
+   *
+   * @since 4.4.0
+   */
+  itemCountOptions = [10, 15, 20, 40, 100];
+  /**
+   * Total number of pages
+   */
+  count = 0;
+  /**
+   * Zero based index of currently selected page
+   */
+  selectedPage = 0;
+  /**
+   * i18n label for 'Page'
+   */
+  i18nPage = "Page";
+  /**
+   * i18n label for 'of'
+   */
+  i18nOf = "of";
+  /**
+   * i18n label for 'Items'
+   */
+  i18nItems = "Items";
+  /**
+   * ARIA label for the chevron left icon button
+   * Will be set as aria-label on the nested HTML button element
+   *
+   * @since 3.2.0
+   */
+  ariaLabelChevronLeftIconButton = "Previous page";
+  /**
+   * ARIA label for the chevron right icon button
+   * Will be set as aria-label on the nested HTML button element
+   *
+   * @since 3.2.0
+   */
+  ariaLabelChevronRightIconButton = "Next page";
+  /**
+   * ARIA label for the page selection input
+   * Will be set as aria-label on the nested HTML input element
+   *
+   * @since 4.1.0
+   */
+  ariaLabelPageSelection = "Page selection input";
+  /**
+   * Page selection event
+   */
+  pageSelected;
+  /**
+   * Item count change event
+   */
+  itemCountChanged;
+  selectPage(index) {
+    const oldIndex = this.selectedPage;
+    if (index < 0) {
+      this.selectedPage = 0;
+    } else if (index > this.count - 1) {
+      this.selectedPage = this.count - 1;
+    } else {
+      this.selectedPage = index;
+    }
+    const { defaultPrevented } = this.pageSelected.emit(this.selectedPage);
+    if (defaultPrevented) {
+      this.selectedPage = oldIndex;
+    }
+  }
+  increase() {
+    if (this.selectedPage === this.count - 1) {
+      return;
+    }
+    this.selectPage(this.selectedPage + 1);
+  }
+  decrease() {
+    if (this.selectedPage === 0) {
+      return;
+    }
+    this.selectPage(this.selectedPage - 1);
+  }
+  getPageButton(index) {
+    const baseButtonProps = {
+      ...this.baseButtonConfig,
+      onClick: () => this.selectPage(index),
+      selected: this.selectedPage === index,
+      ariaAttributes: {
+        "aria-pressed": a11yBoolean(this.selectedPage === index)
+      }
+    };
+    return h(BaseButton, { ...baseButtonProps }, index + 1);
+  }
+  renderPageButtons() {
+    const pagesBeforeOverflow = Math.floor(this.maxCountPages / 2);
+    const hasOverflow = this.count > this.maxCountPages;
+    const hasOverflowStart = hasOverflow && this.selectedPage > pagesBeforeOverflow;
+    const hasOverflowEnd = hasOverflow && this.selectedPage < this.count - pagesBeforeOverflow - 1;
+    const pageButtons = [];
+    let start = 0;
+    let end = Math.min(this.count, this.maxCountPages);
+    let pageCount = Math.floor((this.maxCountPages - 4) / 2);
+    if (hasOverflowStart) {
+      const baseButtonProps = {
+        ...this.baseButtonConfig,
+        onClick: () => {
+          if (hasOverflowEnd) {
+            this.selectPage(this.selectedPage - Math.max(0, 2 * pageCount + 1));
+          } else {
+            this.selectPage(this.count - this.maxCountPages);
+          }
+        }
+      };
+      pageButtons.push(this.getPageButton(0));
+      pageButtons.push(h(BaseButton, { ...baseButtonProps }, "..."));
+      if (hasOverflowEnd) {
+        start = this.count - this.maxCountPages + 2;
+      } else {
+        start = this.count - this.maxCountPages + 2;
+        end = this.count;
+      }
+    }
+    if (hasOverflowEnd) {
+      if (hasOverflowStart) {
+        start = this.selectedPage - pageCount;
+        end = this.selectedPage + pageCount + 1;
+      } else {
+        end = this.maxCountPages - 2;
+      }
+    }
+    for (let i = start; i < end; i++) {
+      pageButtons.push(this.getPageButton(i));
+    }
+    if (hasOverflowEnd) {
+      const baseButtonProps = {
+        ...this.baseButtonConfig,
+        onClick: () => {
+          if (hasOverflowStart) {
+            this.selectPage(this.selectedPage + Math.max(0, 2 * pageCount + 1));
+          } else {
+            this.selectPage(this.maxCountPages - 1);
+          }
+        }
+      };
+      pageButtons.push(h(BaseButton, { ...baseButtonProps }, "..."));
+      pageButtons.push(this.getPageButton(this.count - 1));
+    }
+    return h("span", { class: "page-buttons" }, pageButtons);
+  }
+  handlePageInput(inputValue) {
+    const value = Number.parseInt(inputValue, 10);
+    if (!Number.isNaN(value)) {
+      const clampedValue = Math.max(1, Math.min(value, this.count));
+      this.selectPage(clampedValue - 1);
+    }
+  }
+  render() {
+    return h(Host, { key: "8ee910b6e83aa8ea187f6ae5fb488fec20610976" }, h("ix-icon-button", { key: "c2d3870465e0882cfb6b6920060fedbadaf4bda6", disabled: !this.count || this.selectedPage === 0, variant: "subtle-tertiary", icon: iconChevronLeftSmall, onClick: () => this.decrease(), "aria-label": this.ariaLabelChevronLeftIconButton }), this.advanced ? h("div", { class: "advanced-pagination" }, h("ix-typography", { format: "body" }, this.i18nPage), h("input", { "aria-label": this.ariaLabelPageSelection, class: "ix-form-control page-selection", type: "number", min: "1", max: this.count, value: this.selectedPage + 1, onChange: (event) => {
+      const inputElement = event.target;
+      this.handlePageInput(inputElement.value);
+    }, onKeyDown: (event) => {
+      if (["e", "E", "+", "-", "."].includes(event.key))
+        event.preventDefault();
+      if (event.key === "Enter") {
+        const inputElement = event.target;
+        this.handlePageInput(inputElement.value);
+        inputElement.blur();
+      }
+    }, onBlur: (e) => {
+      const inputElement = e.target;
+      inputElement.value = (this.selectedPage + 1).toString();
+    } }), h("span", { class: "total-count" }, h("ix-typography", { format: "body" }, this.i18nOf, " ", this.count))) : h("span", { class: "basic-pagination" }, this.renderPageButtons(), " "), h("ix-icon-button", { key: "9f129654625aabdf2d325559938ffdc2ddb866bb", disabled: !this.count || this.selectedPage === this.count - 1, variant: "subtle-tertiary", icon: iconChevronRightSmall, onClick: () => this.increase(), "aria-label": this.ariaLabelChevronRightIconButton }), this.advanced && !this.hideItemCount && h("span", { key: "470c8a4fddb59f8af7d7faa7bcb663a7505898c6", class: "item-count" }, h("ix-typography", { key: "08e9e48a77c86cc5edde0df9dbbe34ab3ed86f91", format: "body" }, this.i18nItems), h("ix-select", { key: "3a770912a515cc0739ab54007c8fb46f2b8a9aff", 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);
+    } }, this.itemCountOptions.map((option) => h("ix-select-item", { label: `${option}`, value: `${option}` })))));
+  }
+};
+Pagination.style = paginationCss();
+export {
+  Pagination as ix_pagination
+};

package/build/static/demo/v2/preview/html/assets/ix-pane-layout.entry-CXxN69A0.js

@@ -0,0 +1,280 @@
+import { a as registerInstance, g as getElement, f as forceUpdate, h, H as Host } from "./global-DjWMysHf.js";
+import { m as matchBreakpoint } from "./breakpoints-D_Hmobxf-DBbixPq4.js";
+import { a as applicationLayoutService } from "./service-CEglFEKY-CaUBmgY_.js";
+import "./typed-event-CWshStHZ-DBYwEilm.js";
+const paneLayoutCss = () => `:host{display:flex;position:relative;width:100%;height:100%}: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{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}: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{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .side-panes-wrapper{height:100%;width:100%}:host .row{height:100%;width:100%;overflow:hidden;display:flex;flex-direction:row;justify-content:space-between;position:relative}:host .col{height:100%;width:100%;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;position:relative}:host .content{width:100%;height:100%;overflow:auto}:host .absolute-top{width:100%;position:absolute;top:0}:host .absolute-bottom{width:100%;position:absolute;bottom:0}:host .absolute-left{height:100%;position:absolute;left:0}:host .absolute-right{height:100%;position:absolute;right:0}:host .padding-top{padding-top:2.5rem}:host .padding-bottom{padding-bottom:2.5rem}:host .padding-left{padding-left:2.5rem}:host .padding-right{padding-right:2.5rem}`;
+const Panes = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  get hostElement() {
+    return getElement(this);
+  }
+  /**
+   * Choose the layout of the panes.
+   * When set to 'full-vertical' the vertical panes (left, right) will get the full height.
+   * When set to 'full-horizontal' the horizontal panes (top, bottom) will get the full width.
+   */
+  layout = "full-vertical";
+  /**
+   * Set the default variant for all panes in the layout
+   */
+  variant = "inline";
+  /**
+   * Set the default border state for all panes in the layout
+   */
+  borderless = false;
+  isMobile = false;
+  paneElements = 0;
+  panes = [];
+  observer;
+  get currentPanes() {
+    return this.hostElement.querySelectorAll("ix-pane");
+  }
+  componentWillLoad() {
+    this.paneElements = this.currentPanes.length;
+    this.observer = new MutationObserver((mutations) => {
+      if (mutations[0].addedNodes.item(0)?.nodeName === "IX-PANE") {
+        this.paneElements += 1;
+      } else if (mutations[0].removedNodes.item(0)?.nodeName === "IX-PANE") {
+        this.paneElements -= 1;
+      }
+    });
+    this.observer.observe(this.hostElement, {
+      childList: true
+    });
+    this.isMobile = matchBreakpoint("sm");
+    applicationLayoutService.onChange.on(() => {
+      this.isMobile = matchBreakpoint("sm");
+      this.configurePanes();
+    });
+  }
+  componentDidLoad() {
+    this.setPanes(this.currentPanes);
+  }
+  disconnectedCallback() {
+    this.observer?.disconnect();
+  }
+  setPaneVariant(pane) {
+    if (!pane.ignoreLayoutSettings) {
+      pane.variant = this.variant;
+    }
+  }
+  setPaneBorder(pane) {
+    if (!pane.ignoreLayoutSettings) {
+      if (this.borderless) {
+        pane.borderless = true;
+      } else {
+        const hasVisibleLeftPane = !!this.panes.find((pane2) => pane2.slot === "left" && !pane2.hideOnCollapse);
+        if (pane.variant === "floating" && this.layout === "full-vertical" && hasVisibleLeftPane && (pane.composition === "top" || pane.composition === "bottom")) {
+          pane.borderless = true;
+        } else {
+          pane.borderless = false;
+        }
+      }
+    }
+  }
+  setPaneZIndex(pane) {
+    const isTop = pane.slot === "top";
+    const isBottom = pane.slot === "bottom";
+    const isLeft = pane.slot === "left";
+    const isRight = pane.slot === "right";
+    let zIndex = 1;
+    if (this.isMobile) {
+      if (isBottom || isTop) {
+        zIndex = 3;
+      }
+    } else {
+      if (this.layout === "full-vertical") {
+        if (isLeft || isRight) {
+          zIndex = 3;
+        }
+      } else {
+        if (isBottom || isTop) {
+          zIndex = 3;
+        }
+      }
+    }
+    pane.style.zIndex = zIndex.toString();
+  }
+  setPanes(panes) {
+    this.panes = [];
+    panes.forEach((pane) => {
+      this.panes.push({
+        slot: pane.slot,
+        hideOnCollapse: pane.hideOnCollapse,
+        floating: pane.variant === "floating"
+      });
+    });
+  }
+  closeFloatingPanes() {
+    this.currentPanes.forEach((pane) => {
+      if (pane.expanded && pane.variant === "floating") {
+        pane.expanded = false;
+      }
+    });
+  }
+  configurePanes() {
+    let topCount = 0;
+    let bottomCount = 0;
+    let leftCount = 0;
+    let rightCount = 0;
+    this.currentPanes.forEach((pane) => {
+      const isTop = pane.slot === "top";
+      const isBottom = pane.slot === "bottom";
+      const isLeft = pane.slot === "left";
+      const isRight = pane.slot === "right";
+      if (isLeft) {
+        if (leftCount) {
+          pane.slot = "";
+          return;
+        }
+        leftCount++;
+      } else if (isRight) {
+        if (rightCount) {
+          pane.slot = "";
+          return;
+        }
+        rightCount++;
+      } else if (isTop) {
+        if (topCount) {
+          pane.slot = "";
+          return;
+        }
+        topCount++;
+      } else if (isBottom) {
+        if (bottomCount) {
+          pane.slot = "";
+          return;
+        }
+        bottomCount++;
+      } else {
+        pane.slot = "";
+        return;
+      }
+      this.setPaneVariant(pane);
+      this.setPaneBorder(pane);
+      this.setPaneZIndex(pane);
+    });
+    this.setPanes(this.currentPanes);
+    forceUpdate(this.hostElement);
+  }
+  onSlotChanged() {
+    this.configurePanes();
+  }
+  onCollapsibleChanged(event) {
+    const { slot, hideOnCollapse } = event.detail;
+    this.panes.forEach((currentSlot) => {
+      if (currentSlot.slot === slot) {
+        currentSlot.hideOnCollapse = hideOnCollapse;
+      }
+    });
+    forceUpdate(this.hostElement);
+  }
+  onVariantChanged(event) {
+    const { slot, variant } = event.detail;
+    this.panes.forEach((currentSlot) => {
+      if (currentSlot.slot === slot) {
+        currentSlot.floating = variant === "floating";
+      }
+    });
+    forceUpdate(this.hostElement);
+  }
+  onPaneElementsChange() {
+    this.configurePanes();
+  }
+  onVariableChange() {
+    this.currentPanes.forEach((pane) => {
+      this.setPaneVariant(pane);
+      this.setPaneBorder(pane);
+    });
+    this.setPanes(this.currentPanes);
+    forceUpdate(this.hostElement);
+  }
+  onBorderChange() {
+    this.currentPanes.forEach((pane) => {
+      this.setPaneBorder(pane);
+    });
+  }
+  onLayoutChange() {
+    this.currentPanes.forEach((pane) => {
+      this.setPaneBorder(pane);
+      this.setPaneZIndex(pane);
+    });
+  }
+  onMobileChange() {
+    this.currentPanes.forEach((pane) => {
+      this.setPaneZIndex(pane);
+    });
+  }
+  hasPadding(composition) {
+    const pane = this.panes.find((pane2) => pane2.slot === composition);
+    return pane ? !pane.hideOnCollapse && pane.floating : false;
+  }
+  hasPaddingMobile(composition) {
+    const pane = this.panes.find((pane2) => pane2.slot === composition);
+    return pane && !pane.hideOnCollapse;
+  }
+  slotExists(composition) {
+    const pane = this.panes.find((pane2) => pane2.slot === composition);
+    return !!pane;
+  }
+  isFloating(composition) {
+    const pane = this.panes.find((pane2) => pane2.slot === composition);
+    return pane ? pane.floating : false;
+  }
+  render() {
+    return h(Host, { key: "c21202ca403d967e76477ce169c3c66f568b0fe2" }, !this.isMobile ? this.layout == "full-vertical" ? h("div", { class: "side-panes-wrapper" }, h("div", { class: {
+      row: true,
+      "padding-left": this.hasPadding("left"),
+      "padding-right": this.hasPadding("right")
+    } }, h("div", { key: "left", class: { "absolute-left": this.isFloating("left") } }, h("slot", { name: "left" })), h("div", { class: {
+      col: true,
+      "padding-top": this.hasPadding("top"),
+      "padding-bottom": this.hasPadding("bottom")
+    } }, h("div", { key: "top", class: { "absolute-top": this.isFloating("top") } }, h("slot", { name: "top" })), h("div", { key: "content", class: "content", onClick: () => this.closeFloatingPanes() }, h("slot", { name: "content" }), h("slot", null)), h("div", { key: "bottom", class: { "absolute-bottom": this.isFloating("bottom") } }, h("slot", { name: "bottom" }))), h("div", { key: "right", class: { "absolute-right": this.isFloating("right") } }, h("slot", { name: "right" })))) : h("div", { class: "side-panes-wrapper" }, h("div", { class: {
+      col: true,
+      "padding-top": this.hasPadding("top"),
+      "padding-bottom": this.hasPadding("bottom")
+    } }, h("div", { key: "top", class: { "absolute-top": this.isFloating("top") } }, h("slot", { name: "top" })), h("div", { class: {
+      row: true,
+      "padding-left": this.hasPadding("left"),
+      "padding-right": this.hasPadding("right")
+    } }, h("div", { key: "left", class: { "absolute-left": this.isFloating("left") } }, h("slot", { name: "left" })), h("div", { key: "content", class: "content", onClick: () => this.closeFloatingPanes() }, h("slot", { name: "content" }), h("slot", null)), h("div", { key: "right", class: { "absolute-right": this.isFloating("right") } }, h("slot", { name: "right" }))), h("div", { key: "bottom", class: { "absolute-bottom": this.isFloating("bottom") } }, h("slot", { name: "bottom" })))) : h("div", { class: "col" }, h("div", { key: "top", style: {
+      minHeight: this.hasPaddingMobile("top") ? "48px" : "0",
+      display: this.slotExists("top") ? "block" : "none"
+    } }, h("slot", { name: "top" })), h("div", { key: "left", style: {
+      minHeight: this.hasPaddingMobile("left") ? "48px" : "0",
+      display: this.slotExists("left") ? "block" : "none"
+    } }, h("slot", { name: "left" })), h("div", { key: "content", class: "content", onClick: () => this.closeFloatingPanes() }, h("slot", { name: "content" }), h("slot", null)), h("div", { key: "right", style: {
+      minHeight: this.hasPaddingMobile("right") ? "48px" : "0",
+      display: this.slotExists("right") ? "block" : "none"
+    } }, h("slot", { name: "right" })), h("div", { key: "bottom", style: {
+      minHeight: this.hasPaddingMobile("bottom") ? "48px" : "0",
+      display: this.slotExists("bottom") ? "block" : "none"
+    } }, h("slot", { name: "bottom" }))));
+  }
+  static get watchers() {
+    return {
+      "paneElements": [{
+        "onPaneElementsChange": 0
+      }],
+      "variant": [{
+        "onVariableChange": 0
+      }],
+      "borderless": [{
+        "onBorderChange": 0
+      }],
+      "layout": [{
+        "onLayoutChange": 0
+      }],
+      "isMobile": [{
+        "onMobileChange": 0
+      }]
+    };
+  }
+};
+Panes.style = paneLayoutCss();
+export {
+  Panes as ix_pane_layout
+};