@siemens/ix 0.0.0-pr-1974-20250627114851 → 0.0.0-pr-1974-20250627115746

package/components/ix-pagination.js

@@ -0,0 +1,261 @@
+import { p as proxyCustomElement, H, e as createEvent, h, d as Host } from './p-BuJ6BWIi.js';
+import { B as BaseButton } from './p-9dLpp1OQ.js';
+import { a as a11yBoolean } from './p-Bb7pDeaQ.js';
+import { b as iconChevronRightSmall, l as iconChevronLeftSmall } from './p-CGwHQeMX.js';
+import { d as defineCustomElement$c } from './p-Cut5OrRw.js';
+import { d as defineCustomElement$b } from './p-TNoCM8Wi.js';
+import { d as defineCustomElement$a } from './p-Bu-j8wxy.js';
+import { d as defineCustomElement$9 } from './p-BMU8AlMD.js';
+import { d as defineCustomElement$8 } from './p-BmmgJGNd.js';
+import { d as defineCustomElement$7 } from './p-BXjBChze.js';
+import { d as defineCustomElement$6 } from './p-Cp5J1RZq.js';
+import { d as defineCustomElement$5 } from './p-BhLbU_vK.js';
+import { d as defineCustomElement$4 } from './p-BygLxZIM.js';
+import { d as defineCustomElement$3 } from './p-DyHdZRT0.js';
+import { d as defineCustomElement$2 } from './p-DyMgW0fR.js';
+
+const paginationCss = ".ix-form-control,.ix-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}.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]{text-align:right}.ix-form-control[type=number]::-webkit-inner-spin-button{margin-right:-2px;margin-left:2px;display:none}.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{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,: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,: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,: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,: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,: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,: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,: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,: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,: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,: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,: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,: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,: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,: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,: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,: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,: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,: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{}: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 Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.pageSelected = createEvent(this, "pageSelected", 7);
+        this.itemCountChanged = createEvent(this, "itemCountChanged", 7);
+        this.baseButtonConfig = {
+            variant: 'secondary',
+            outline: false,
+            ghost: true,
+            iconOnly: true,
+            iconOval: false,
+            disabled: false,
+            icon: '',
+            loading: false,
+            selected: false,
+            type: 'button',
+        };
+        this.maxCountPages = 7;
+        /**
+         * Advanced mode
+         */
+        this.advanced = false;
+        /**
+         * Number of items shown at once.
+         * Can only be changed in advaced mode.
+         */
+        this.itemCount = 15;
+        /**
+         * Show item count in advanced mode
+         */
+        this.showItemCount = true;
+        /**
+         * Total number of pages
+         */
+        this.count = 0;
+        /**
+         * Zero based index of currently selected page
+         */
+        this.selectedPage = 0;
+        /**
+         * i18n
+         */
+        this.i18nPage = 'Page';
+        /**
+         * i18n
+         */
+        this.i18nOf = 'of';
+        /**
+        /**
+         * i18n
+         */
+        this.i18nItems = 'Items';
+    }
+    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 = Object.assign(Object.assign({}, this.baseButtonConfig), { onClick: () => this.selectPage(index), selected: this.selectedPage === index, ariaAttributes: {
+                'aria-pressed': a11yBoolean(this.selectedPage === index),
+            } });
+        return h(BaseButton, Object.assign({}, 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 = Object.assign(Object.assign({}, 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, Object.assign({}, 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 = Object.assign(Object.assign({}, 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, Object.assign({}, baseButtonProps), "..."));
+            pageButtons.push(this.getPageButton(this.count - 1));
+        }
+        return h("span", { class: "page-buttons" }, pageButtons);
+    }
+    render() {
+        return (h(Host, { key: 'adb3cd92e82de3a7b5460ba4fbee1d7f035c1257' }, h("ix-icon-button", { key: '47a7143702d132548213d2a5b7b314b4f61f1eef', disabled: !this.count || this.selectedPage === 0, ghost: true, icon: iconChevronLeftSmall, onClick: () => this.decrease() }), this.advanced ? (h("div", { class: "advanced-pagination" }, h("ix-typography", { format: "body" }, this.i18nPage), h("input", { class: "ix-form-control page-selection", type: "number", min: "1", max: this.count, value: this.selectedPage + 1, onChange: (event) => {
+                const eventTarget = event.target;
+                if (eventTarget) {
+                    const index = Number.parseInt(eventTarget.value);
+                    this.selectPage(index - 1);
+                }
+            } }), 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: '93eb9d3d854f7d13bd9b170d04a7381605577d27', disabled: !this.count || this.selectedPage === this.count - 1, ghost: true, icon: iconChevronRightSmall, onClick: () => this.increase() }), this.advanced && this.showItemCount ? (h("span", { class: "item-count" }, h("ix-typography", { format: "body" }, this.i18nItems), 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);
+            } }, h("ix-select-item", { label: "10", value: "10" }), h("ix-select-item", { label: "15", value: "15" }), h("ix-select-item", { label: "20", value: "20" }), h("ix-select-item", { label: "40", value: "40" }), h("ix-select-item", { label: "100", value: "100" })))) : ('')));
+    }
+    get hostElement() { return this; }
+    static get style() { return paginationCss; }
+}, [1, "ix-pagination", {
+        "advanced": [4],
+        "itemCount": [2, "item-count"],
+        "showItemCount": [4, "show-item-count"],
+        "count": [2],
+        "selectedPage": [1026, "selected-page"],
+        "i18nPage": [1, "i-1-8n-page"],
+        "i18nOf": [1, "i-1-8n-of"],
+        "i18nItems": [1, "i-1-8n-items"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ix-pagination", "ix-dropdown", "ix-dropdown-item", "ix-field-label", "ix-field-wrapper", "ix-filter-chip", "ix-icon-button", "ix-select", "ix-select-item", "ix-spinner", "ix-tooltip", "ix-typography"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ix-pagination":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Pagination);
+            }
+            break;
+        case "ix-dropdown":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$c();
+            }
+            break;
+        case "ix-dropdown-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "ix-field-label":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "ix-field-wrapper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "ix-filter-chip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "ix-icon-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "ix-select":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "ix-select-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "ix-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "ix-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ix-typography":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const IxPagination = Pagination;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxPagination, defineCustomElement };
+//# sourceMappingURL=ix-pagination.js.map
+
+//# sourceMappingURL=ix-pagination.js.map

package/components/ix-pagination.js.map

@@ -0,0 +1 @@
+{"file":"ix-pagination.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"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';\nimport {\n  iconChevronLeftSmall,\n  iconChevronRightSmall,\n} from '@siemens/ix-icons/icons';\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  };\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 = 0;\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    const oldIndex = this.selectedPage;\n\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    const { defaultPrevented } = this.pageSelected.emit(this.selectedPage);\n\n    if (defaultPrevented) {\n      this.selectedPage = oldIndex;\n    }\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={iconChevronLeftSmall}\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=\"ix-form-control page-selection\"\n              type=\"number\"\n              min=\"1\"\n              max={this.count}\n              value={this.selectedPage + 1}\n              onChange={(event: Event) => {\n                const eventTarget = event.target as HTMLInputElement;\n                if (eventTarget) {\n                  const index = Number.parseInt(eventTarget.value);\n                  this.selectPage(index - 1);\n                }\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={iconChevronRightSmall}\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/components/ix-pane-layout.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface IxPaneLayout extends Components.IxPaneLayout, HTMLElement {}
+export const IxPaneLayout: {
+    prototype: IxPaneLayout;
+    new (): IxPaneLayout;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;