@nectary/components 0.38.0 → 0.40.0

package/link/index.js

@@ -1,110 +1,38 @@
-import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
-import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
-
-var _$anchor, _$text, _onAnchorClick, _onAnchorFocus, _onAnchorBlur, _onFocusReactHandler, _onBlurReactHandler, _onClickReactHandler;
-
-function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
-
-function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
-
 import '../icons/open-in-new';
 import '../icons/arrow-forward';
 import { defineCustomElement, getBooleanAttribute, getAttribute, updateBooleanAttribute, updateAttribute, NectaryElement, isAttrTrue, getReactEventHandler } from '../utils';
 const templateHTML = '<style>:host{display:inline}a{font:var(--sinch-font-text-m);font-size:inherit;line-height:inherit;color:var(--sinch-color-tropical-500);border-radius:.5em;--sinch-size-icon:1em;--sinch-color-icon:var(--sinch-color-tropical-500)}a:hover{color:var(--sinch-color-tropical-600);--sinch-color-icon:var(--sinch-color-tropical-600)}a:focus-visible{outline:2px solid var(--sinch-color-aqua-400);outline-offset:2px}@supports not selector(:focus-visible){a:focus{outline:2px solid var(--sinch-color-aqua-400);outline-offset:2px}}#external-icon{display:none;margin-right:.2em;vertical-align:-.2em}#standalone-icon{display:none}:host([external]:not([external=false])) #external-icon{display:inline-block}:host([standalone]:not([standalone=false])){display:block}:host([standalone]:not([standalone=false])) a{display:block;font:var(--sinch-font-text-m);font-weight:var(--sinch-font-weight-emphasized);text-decoration:none;border-radius:var(--sinch-shape-radius-m);width:fit-content;--sinch-size-icon:24px}:host([standalone]:not([standalone=false])) #external-icon{margin-right:8px;vertical-align:-7px}:host([standalone]:not([standalone=false]):is([external=false],:not([external]))) #standalone-icon{display:inline-block;vertical-align:-7px;margin-left:8px}:host([disabled]:not([disabled=false])) a{color:var(--sinch-color-tropical-200);pointer-events:none;cursor:initial;--sinch-color-icon:var(--sinch-color-tropical-200)}</style><a referrerpolicy="no-referer" aria-hidden="true"><sinch-icon-open-in-new id="external-icon"></sinch-icon-open-in-new><span id="content"></span><sinch-icon-arrow-forward id="standalone-icon"></sinch-icon-arrow-forward></a>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-link', (_$anchor = new WeakMap(), _$text = new WeakMap(), _onAnchorClick = new WeakMap(), _onAnchorFocus = new WeakMap(), _onAnchorBlur = new WeakMap(), _onFocusReactHandler = new WeakMap(), _onBlurReactHandler = new WeakMap(), _onClickReactHandler = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-link', class extends NectaryElement {
+  #$anchor;
+  #$text;
+
   constructor() {
     super();
-
-    _classPrivateFieldInitSpec(this, _$anchor, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$text, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _onAnchorClick, {
-      writable: true,
-      value: e => {
-        if (this.preventDefault) {
-          e.preventDefault();
-        }
-
-        this.dispatchEvent(new CustomEvent('-click'));
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onAnchorFocus, {
-      writable: true,
-      value: () => {
-        this.dispatchEvent(new CustomEvent('-focus'));
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onAnchorBlur, {
-      writable: true,
-      value: () => {
-        this.dispatchEvent(new CustomEvent('-blur'));
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onFocusReactHandler, {
-      writable: true,
-      value: () => {
-        getReactEventHandler(this, 'on-focus')?.();
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onBlurReactHandler, {
-      writable: true,
-      value: () => {
-        getReactEventHandler(this, 'on-blur')?.();
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onClickReactHandler, {
-      writable: true,
-      value: e => {
-        getReactEventHandler(this, 'on-click')?.(e);
-      }
-    });
-
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-
-    _classPrivateFieldSet(this, _$anchor, shadowRoot.querySelector('a'));
-
-    _classPrivateFieldSet(this, _$text, shadowRoot.querySelector('#content'));
+    this.#$anchor = shadowRoot.querySelector('a');
+    this.#$text = shadowRoot.querySelector('#content');
   }
 
   connectedCallback() {
     this.setAttribute('role', 'link');
-
-    _classPrivateFieldGet(this, _$anchor).addEventListener('click', _classPrivateFieldGet(this, _onAnchorClick));
-
-    _classPrivateFieldGet(this, _$anchor).addEventListener('focus', _classPrivateFieldGet(this, _onAnchorFocus));
-
-    _classPrivateFieldGet(this, _$anchor).addEventListener('blur', _classPrivateFieldGet(this, _onAnchorBlur));
-
-    this.addEventListener('-click', _classPrivateFieldGet(this, _onClickReactHandler));
-    this.addEventListener('-focus', _classPrivateFieldGet(this, _onFocusReactHandler));
-    this.addEventListener('-blur', _classPrivateFieldGet(this, _onBlurReactHandler));
+    this.#$anchor.addEventListener('click', this.#onAnchorClick);
+    this.#$anchor.addEventListener('focus', this.#onAnchorFocus);
+    this.#$anchor.addEventListener('blur', this.#onAnchorBlur);
+    this.addEventListener('-click', this.#onClickReactHandler);
+    this.addEventListener('-focus', this.#onFocusReactHandler);
+    this.addEventListener('-blur', this.#onBlurReactHandler);
   }
 
   disconnectedCallback() {
-    _classPrivateFieldGet(this, _$anchor).removeEventListener('click', _classPrivateFieldGet(this, _onAnchorClick));
-
-    _classPrivateFieldGet(this, _$anchor).removeEventListener('focus', _classPrivateFieldGet(this, _onAnchorFocus));
-
-    _classPrivateFieldGet(this, _$anchor).removeEventListener('blur', _classPrivateFieldGet(this, _onAnchorBlur));
-
-    this.removeEventListener('-click', _classPrivateFieldGet(this, _onClickReactHandler));
-    this.removeEventListener('-focus', _classPrivateFieldGet(this, _onFocusReactHandler));
-    this.removeEventListener('-blur', _classPrivateFieldGet(this, _onBlurReactHandler));
+    this.#$anchor.removeEventListener('click', this.#onAnchorClick);
+    this.#$anchor.removeEventListener('focus', this.#onAnchorFocus);
+    this.#$anchor.removeEventListener('blur', this.#onAnchorBlur);
+    this.removeEventListener('-click', this.#onClickReactHandler);
+    this.removeEventListener('-focus', this.#onFocusReactHandler);
+    this.removeEventListener('-blur', this.#onBlurReactHandler);
   }
 
   get text() {
@@ -167,30 +95,52 @@ defineCustomElement('sinch-link', (_$anchor = new WeakMap(), _$text = new WeakMa
     switch (name) {
       case 'text':
         {
-          _classPrivateFieldGet(this, _$text).textContent = newVal;
+          this.#$text.textContent = newVal;
           break;
         }
 
       case 'href':
         {
-          updateAttribute(_classPrivateFieldGet(this, _$anchor), 'href', newVal);
+          updateAttribute(this.#$anchor, 'href', newVal);
           break;
         }
 
       case 'external':
         {
-          updateAttribute(_classPrivateFieldGet(this, _$anchor), 'target', isAttrTrue(newVal) ? '_blank' : null);
+          updateAttribute(this.#$anchor, 'target', isAttrTrue(newVal) ? '_blank' : null);
           break;
         }
     }
   }
 
   focus() {
-    _classPrivateFieldGet(this, _$anchor).focus();
+    this.#$anchor.focus();
   }
 
   blur() {
-    _classPrivateFieldGet(this, _$anchor).blur();
+    this.#$anchor.blur();
   }
 
-}));
+  #onAnchorClick = e => {
+    if (this.preventDefault) {
+      e.preventDefault();
+    }
+
+    this.dispatchEvent(new CustomEvent('-click'));
+  };
+  #onAnchorFocus = () => {
+    this.dispatchEvent(new CustomEvent('-focus'));
+  };
+  #onAnchorBlur = () => {
+    this.dispatchEvent(new CustomEvent('-blur'));
+  };
+  #onFocusReactHandler = () => {
+    getReactEventHandler(this, 'on-focus')?.();
+  };
+  #onBlurReactHandler = () => {
+    getReactEventHandler(this, 'on-blur')?.();
+  };
+  #onClickReactHandler = e => {
+    getReactEventHandler(this, 'on-click')?.(e);
+  };
+});

package/list-item/index.js

@@ -1,6 +1,6 @@
 import '../icons/keyboard-arrow-down';
 import { defineCustomElement, NectaryElement } from '../utils';
-const templateHTML = '<style>:host{display:block;outline:0}#wrapper{width:100%;height:100%;box-sizing:border-box;overflow:hidden;padding:8px 0;border-bottom:1px solid var(--sinch-color-snow-600)}:host(:last-child)>#wrapper{border-bottom:none}:host(:hover)>#wrapper{background-color:var(--sinch-color-snow-500)}</style><div id="wrapper"><slot name="content"></slot></div>';
+const templateHTML = '<style>:host{display:block;outline:0}#wrapper{width:100%;height:100%;box-sizing:border-box;overflow:hidden;padding:8px 0;border-bottom:1px solid var(--sinch-color-snow-500)}:host(:last-child)>#wrapper{border-bottom:none}:host(:hover)>#wrapper{background-color:var(--sinch-color-snow-400)}</style><div id="wrapper"><slot name="content"></slot></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-list-item', class extends NectaryElement {

package/package.json

@@ -1,12 +1,10 @@
 {
   "name": "@nectary/components",
-  "version": "0.38.0",
+  "version": "0.40.0",
   "files": [
     "theme.css",
     "**/*/*.js",
     "**/*/*.d.ts",
-    "utils.js",
-    "utils.d.ts",
     "types.d.ts",
     "colors.json"
   ],
@@ -14,19 +12,19 @@
     "build": "NODE_ENV=production babel . --extensions '.ts' --out-dir . && tsc --declaration --emitDeclarationOnly"
   },
   "dependencies": {
-    "@babel/runtime": "^7.17.0",
+    "@babel/runtime": "^7.19.0",
     "dialog-polyfill": "^0.5.6"
   },
   "devDependencies": {
-    "@babel/cli": "^7.17.0",
-    "@babel/core": "^7.17.0",
-    "@babel/plugin-transform-runtime": "^7.17.0",
-    "@babel/preset-env": "^7.16.0",
-    "@babel/preset-typescript": "^7.16.0",
-    "@types/node": "^17.0.14",
-    "@types/react": "^17.0.0",
-    "babel-plugin-html-inline-minifier": "workspace:babel-plugin-html-inline-minifier@*",
-    "babel-plugin-transform-inline-environment-variables": "^0.4.3",
-    "typescript": "^4.4.2"
+    "@babel/cli": "^7.19.3",
+    "@babel/core": "^7.19.3",
+    "@babel/plugin-transform-runtime": "^7.19.1",
+    "@babel/preset-env": "^7.19.3",
+    "@babel/preset-typescript": "^7.18.6",
+    "@types/node": "^17.0.45",
+    "@types/react": "^17.0.50",
+    "babel-plugin-html-inline-minifier": "workspace:^0.0.0",
+    "babel-plugin-transform-inline-environment-variables": "^0.4.4",
+    "typescript": "^4.8.4"
   }
 }

package/pagination/index.js

@@ -1,16 +1,3 @@
-import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
-import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
-
-var _$left, _$right, _$buttons, _$wrapper, _onValueChange, _onButtonClick, _clamp, _dispatchChangeEvent, _onChangeReactHandler;
-
-function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
-
-function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
-
-function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
-
-function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(receiver)) { throw new TypeError("attempted to get private field on non-instance"); } return fn; }
-
 import '../icons/keyboard-arrow-left';
 import '../icons/keyboard-arrow-right';
 import { defineCustomElement, updateAttribute, getIntegerAttribute, setClass, NectaryElement, getRect, getReactEventHandler } from '../utils';
@@ -23,106 +10,31 @@ const DOTS_LEFT_INDEX = 1;
 const DOTS_RIGHT_INDEX = LAST_BTN_INDEX - 1;
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-pagination', (_$left = new WeakMap(), _$right = new WeakMap(), _$buttons = new WeakMap(), _$wrapper = new WeakMap(), _onValueChange = new WeakSet(), _onButtonClick = new WeakMap(), _clamp = new WeakSet(), _dispatchChangeEvent = new WeakSet(), _onChangeReactHandler = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-pagination', class extends NectaryElement {
+  #$left;
+  #$right;
+  #$buttons;
+  #$wrapper;
+
   constructor() {
     super();
-
-    _classPrivateMethodInitSpec(this, _dispatchChangeEvent);
-
-    _classPrivateMethodInitSpec(this, _clamp);
-
-    _classPrivateMethodInitSpec(this, _onValueChange);
-
-    _classPrivateFieldInitSpec(this, _$left, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$right, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$buttons, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$wrapper, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _onButtonClick, {
-      writable: true,
-      value: e => {
-        e.stopPropagation();
-        const value = getIntegerAttribute(this, 'value', 0) - 1;
-        const max = Math.max(0, getIntegerAttribute(this, 'max', 0));
-
-        if (e.target === _classPrivateFieldGet(this, _$left)) {
-          return _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, value - 1);
-        }
-
-        if (e.target === _classPrivateFieldGet(this, _$right)) {
-          return _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, value + 1);
-        }
-
-        const btnIndex = Array.prototype.indexOf.call(_classPrivateFieldGet(this, _$wrapper).children, e.target) - 1;
-
-        if (btnIndex >= 0 && btnIndex < _classPrivateFieldGet(this, _$buttons).length) {
-          if (btnIndex === FIRST_BTN_INDEX) {
-            return _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, 0);
-          }
-
-          if (btnIndex === _classPrivateFieldGet(this, _$buttons).length - 1) {
-            return _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, max - 1);
-          }
-
-          if (btnIndex === DOTS_LEFT_INDEX && max > NUM_BUTTONS && value > MIDDLE_BTN_INDEX) {
-            return _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, Math.floor(value / 2));
-          }
-
-          if (btnIndex === DOTS_RIGHT_INDEX && max > NUM_BUTTONS && value <= max - DOTS_RIGHT_INDEX) {
-            return _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, Math.floor((max - value) / 2 + value));
-          }
-
-          return _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, btnIndex + Math.min(Math.max(0, value - MIDDLE_BTN_INDEX), Math.max(0, max - NUM_BUTTONS)));
-        }
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onChangeReactHandler, {
-      writable: true,
-      value: e => {
-        getReactEventHandler(this, 'on-change')?.(e);
-      }
-    });
-
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-
-    _classPrivateFieldSet(this, _$left, shadowRoot.querySelector('#left'));
-
-    _classPrivateFieldSet(this, _$right, shadowRoot.querySelector('#right'));
-
-    _classPrivateFieldSet(this, _$buttons, shadowRoot.querySelectorAll('.page'));
-
-    _classPrivateFieldSet(this, _$wrapper, shadowRoot.querySelector('#wrapper'));
+    this.#$left = shadowRoot.querySelector('#left');
+    this.#$right = shadowRoot.querySelector('#right');
+    this.#$buttons = shadowRoot.querySelectorAll('.page');
+    this.#$wrapper = shadowRoot.querySelector('#wrapper');
   }
 
   connectedCallback() {
-    _classPrivateMethodGet(this, _onValueChange, _onValueChange2).call(this);
-
-    _classPrivateFieldGet(this, _$wrapper).addEventListener('click', _classPrivateFieldGet(this, _onButtonClick));
-
-    this.addEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
+    this.#onValueChange();
+    this.#$wrapper.addEventListener('click', this.#onButtonClick);
+    this.addEventListener('-change', this.#onChangeReactHandler);
   }
 
   disconnectedCallback() {
-    _classPrivateFieldGet(this, _$wrapper).removeEventListener('click', _classPrivateFieldGet(this, _onButtonClick));
-
-    this.removeEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
+    this.#$wrapper.removeEventListener('click', this.#onButtonClick);
+    this.removeEventListener('-change', this.#onChangeReactHandler);
   }
 
   static get observedAttributes() {
@@ -133,15 +45,13 @@ defineCustomElement('sinch-pagination', (_$left = new WeakMap(), _$right = new W
     switch (name) {
       case 'value':
         {
-          _classPrivateMethodGet(this, _onValueChange, _onValueChange2).call(this);
-
+          this.#onValueChange();
           break;
         }
 
       case 'max':
         {
-          _classPrivateMethodGet(this, _onValueChange, _onValueChange2).call(this);
-
+          this.#onValueChange();
           break;
         }
     }
@@ -167,80 +77,116 @@ defineCustomElement('sinch-pagination', (_$left = new WeakMap(), _$right = new W
     return getIntegerAttribute(this, 'value', 0);
   }
 
-  focus() {
-    _classPrivateFieldGet(this, _$left).focus();
-  }
+  #onValueChange() {
+    const value = getIntegerAttribute(this, 'value', 0) - 1;
+    const max = Math.max(0, getIntegerAttribute(this, 'max', 0));
+    const valueOffset = Math.min(Math.max(0, value - MIDDLE_BTN_INDEX), Math.max(0, max - NUM_BUTTONS));
 
-  blur() {
-    _classPrivateFieldGet(this, _$left).blur();
+    for (let i = 0; i < this.#$buttons.length; i++) {
+      const $b = this.#$buttons[i];
 
-    _classPrivateFieldGet(this, _$right).blur();
+      if (value < 3) {
+        setClass($b, 'active', value === i);
+      } else if (value >= max - MIDDLE_BTN_INDEX) {
+        setClass($b, 'active', i + valueOffset === value);
+      } else {
+        setClass($b, 'active', i === MIDDLE_BTN_INDEX);
+      }
 
-    _classPrivateFieldGet(this, _$buttons).forEach($b => $b.blur());
-  }
+      if (max > NUM_BUTTONS) {
+        setClass($b, 'dots', i === DOTS_LEFT_INDEX && value > MIDDLE_BTN_INDEX || i === DOTS_RIGHT_INDEX && value <= max - DOTS_RIGHT_INDEX);
+      }
 
-  get prevButtonRect() {
-    return getRect(_classPrivateFieldGet(this, _$left));
-  }
+      setClass($b, 'hidden', i >= max);
+      const btnText = $b.firstElementChild;
 
-  get nextButtonRect() {
-    return getRect(_classPrivateFieldGet(this, _$right));
+      if (btnText != null) {
+        btnText.textContent = i === FIRST_BTN_INDEX ? '1' : i === LAST_BTN_INDEX ? String(max) : String(i + 1 + valueOffset);
+      }
+    }
+
+    const isValueBad = value < 0 || value >= max;
+    this.#$left.disabled = isValueBad || value === 0;
+    this.#$right.disabled = isValueBad || value === max - 1;
   }
 
-  nthButtonRect(index) {
-    const btn = _classPrivateFieldGet(this, _$buttons)[index];
+  #onButtonClick = e => {
+    e.stopPropagation();
+    const value = getIntegerAttribute(this, 'value', 0) - 1;
+    const max = Math.max(0, getIntegerAttribute(this, 'max', 0));
 
-    return btn == null ? null : getRect(btn);
-  }
+    if (e.target === this.#$left) {
+      return this.#dispatchChangeEvent(value - 1);
+    }
 
-}));
+    if (e.target === this.#$right) {
+      return this.#dispatchChangeEvent(value + 1);
+    }
 
-function _onValueChange2() {
-  const value = getIntegerAttribute(this, 'value', 0) - 1;
-  const max = Math.max(0, getIntegerAttribute(this, 'max', 0));
-  const valueOffset = Math.min(Math.max(0, value - MIDDLE_BTN_INDEX), Math.max(0, max - NUM_BUTTONS));
+    const btnIndex = Array.prototype.indexOf.call(this.#$wrapper.children, e.target) - 1;
 
-  for (let i = 0; i < _classPrivateFieldGet(this, _$buttons).length; i++) {
-    const $b = _classPrivateFieldGet(this, _$buttons)[i];
+    if (btnIndex >= 0 && btnIndex < this.#$buttons.length) {
+      if (btnIndex === FIRST_BTN_INDEX) {
+        return this.#dispatchChangeEvent(0);
+      }
 
-    if (value < 3) {
-      setClass($b, 'active', value === i);
-    } else if (value >= max - MIDDLE_BTN_INDEX) {
-      setClass($b, 'active', i + valueOffset === value);
-    } else {
-      setClass($b, 'active', i === MIDDLE_BTN_INDEX);
-    }
+      if (btnIndex === this.#$buttons.length - 1) {
+        return this.#dispatchChangeEvent(max - 1);
+      }
 
-    if (max > NUM_BUTTONS) {
-      setClass($b, 'dots', i === DOTS_LEFT_INDEX && value > MIDDLE_BTN_INDEX || i === DOTS_RIGHT_INDEX && value <= max - DOTS_RIGHT_INDEX);
-    }
+      if (btnIndex === DOTS_LEFT_INDEX && max > NUM_BUTTONS && value > MIDDLE_BTN_INDEX) {
+        return this.#dispatchChangeEvent(Math.floor(value / 2));
+      }
 
-    setClass($b, 'hidden', i >= max);
-    const btnText = $b.firstElementChild;
+      if (btnIndex === DOTS_RIGHT_INDEX && max > NUM_BUTTONS && value <= max - DOTS_RIGHT_INDEX) {
+        return this.#dispatchChangeEvent(Math.floor((max - value) / 2 + value));
+      }
 
-    if (btnText != null) {
-      btnText.textContent = i === FIRST_BTN_INDEX ? '1' : i === LAST_BTN_INDEX ? String(max) : String(i + 1 + valueOffset);
+      return this.#dispatchChangeEvent(btnIndex + Math.min(Math.max(0, value - MIDDLE_BTN_INDEX), Math.max(0, max - NUM_BUTTONS)));
     }
+  };
+
+  #clamp(value) {
+    const max = getIntegerAttribute(this, 'max', 0);
+    return Math.max(0, Math.min(max - 1, value)) + 1;
+  }
+
+  #dispatchChangeEvent(value) {
+    const detail = this.#clamp(value);
+    this.dispatchEvent(new CustomEvent('change', {
+      detail,
+      bubbles: true
+    }));
+    this.dispatchEvent(new CustomEvent('-change', {
+      detail
+    }));
   }
 
-  const isValueBad = value < 0 || value >= max;
-  _classPrivateFieldGet(this, _$left).disabled = isValueBad || value === 0;
-  _classPrivateFieldGet(this, _$right).disabled = isValueBad || value === max - 1;
-}
+  #onChangeReactHandler = e => {
+    getReactEventHandler(this, 'on-change')?.(e);
+  };
 
-function _clamp2(value) {
-  const max = getIntegerAttribute(this, 'max', 0);
-  return Math.max(0, Math.min(max - 1, value)) + 1;
-}
+  focus() {
+    this.#$left.focus();
+  }
+
+  blur() {
+    this.#$left.blur();
+    this.#$right.blur();
+    this.#$buttons.forEach($b => $b.blur());
+  }
 
-function _dispatchChangeEvent2(value) {
-  const detail = _classPrivateMethodGet(this, _clamp, _clamp2).call(this, value);
+  get prevButtonRect() {
+    return getRect(this.#$left);
+  }
+
+  get nextButtonRect() {
+    return getRect(this.#$right);
+  }
+
+  nthButtonRect(index) {
+    const btn = this.#$buttons[index];
+    return btn == null ? null : getRect(btn);
+  }
 
-  this.dispatchEvent(new CustomEvent('change', {
-    detail,
-    bubbles: true
-  }));
-  this.dispatchEvent(new CustomEvent('-change', {
-    detail
-  }));
-}
+});

package/pagination/types.d.ts

@@ -14,6 +14,7 @@ export declare type TSinchPaginationElement = HTMLElement & {
 export declare type TSinchPaginationReact = TSinchElementReact<TSinchPaginationElement> & {
     value: number;
     max: number;
+    /** @deprecated */
     onChange?: (event: SyntheticEvent<TSinchPaginationElement, CustomEvent<number>>) => void;
     'on-change': (e: CustomEvent<number>) => void;
 };