@nectary/components 0.39.0 → 0.40.0

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
-  }));
-}
+});