@nectary/components 2.12.1 → 2.12.3

package/lib/cjs/input/utils.js

@@ -0,0 +1,317 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.splitValueAndMask = exports.insertText = exports.insertFromPaste = exports.inputTypes = exports.getMergedValueSliced = exports.getMaskSymbols = exports.endMaskedComposition = exports.deleteContentForward = exports.deleteContentBackward = exports.beginMaskedComposition = void 0;
+const inputTypes = exports.inputTypes = ['text', 'password', 'number'];
+const MASK_SYMBOL_LETTER = 'A';
+const MASK_SYMBOL_DIGIT = '0';
+const EMPTY_CHAR = ' ';
+const MASK_MODE_DIGIT = 0;
+const MASK_MODE_LETTER = 1;
+const MASK_MODE_EXACT = 2;
+const MASK_PLACEHOLDER_DELIMITER = '@@';
+const MASK_PLACEHOLDER = '_';
+const testMaskedValue = (maskSymbol, inputChar) => {
+  switch (maskSymbol.mode) {
+    case MASK_MODE_DIGIT:
+      {
+        return /\d/.test(inputChar);
+      }
+    case MASK_MODE_LETTER:
+      {
+        return /\p{Letter}/u.test(inputChar);
+      }
+  }
+  return false;
+};
+const isExactMode = maskSymbol => maskSymbol.mode === MASK_MODE_EXACT;
+const isEmptyChar = char => char === EMPTY_CHAR;
+const getMaskSymbols = maskValue => {
+  const res = [];
+  const [mask, placeholder] = maskValue.split(MASK_PLACEHOLDER_DELIMITER);
+  const maskSymbols = [...mask];
+  const placeholderChars = placeholder != null ? [...placeholder] : [];
+  for (let maskIndex = 0, placeholderIndex = 0; maskIndex < maskSymbols.length; maskIndex++, placeholderIndex++) {
+    if (maskSymbols[maskIndex] === '\\') {
+      maskIndex += 1;
+      res.push({
+        value: maskSymbols[maskIndex],
+        mode: MASK_MODE_EXACT,
+        placeholder: placeholderChars[placeholderIndex] ?? maskSymbols[maskIndex]
+      });
+      continue;
+    }
+    if (maskSymbols[maskIndex] === MASK_SYMBOL_LETTER || maskSymbols[maskIndex] === MASK_SYMBOL_DIGIT) {
+      res.push({
+        value: maskSymbols[maskIndex],
+        mode: maskSymbols[maskIndex] === MASK_SYMBOL_LETTER ? MASK_MODE_LETTER : MASK_MODE_DIGIT,
+        placeholder: placeholderChars[placeholderIndex] ?? MASK_PLACEHOLDER
+      });
+      continue;
+    }
+    res.push({
+      value: maskSymbols[maskIndex],
+      mode: MASK_MODE_EXACT,
+      placeholder: placeholderChars[placeholderIndex] ?? maskSymbols[maskIndex]
+    });
+  }
+  return res;
+};
+exports.getMaskSymbols = getMaskSymbols;
+const clearCharsSelection = (chars, selectionStart, selectionEnd) => {
+  for (let i = selectionStart; i < selectionEnd && i < chars.length; i++) {
+    chars[i] = EMPTY_CHAR;
+  }
+};
+const getPlaceholder = (chars, maskSymbols) => {
+  const res = new Array(maskSymbols.length);
+  for (let i = 0; i < maskSymbols.length; i++) {
+    res[i] = i >= chars.length || isEmptyChar(chars[i]) || isExactMode(maskSymbols[i]) ? maskSymbols[i].placeholder : EMPTY_CHAR;
+  }
+  return res.join('');
+};
+const isMaskedInputComplete = (chars, maskSymbols) => {
+  if (chars.length > maskSymbols.length) {
+    throw new Error('chars.length > maskSymbols.length');
+  }
+  if (chars.length < maskSymbols.length) {
+    return false;
+  }
+  for (let i = 0; i < maskSymbols.length; i++) {
+    if (i >= chars.length || !isExactMode(maskSymbols[i]) && !testMaskedValue(maskSymbols[i], chars[i])) {
+      return false;
+    }
+  }
+  return true;
+};
+const getCharsFromInputValue = (inputValue, maskSymbols) => {
+  const chars = new Array(maskSymbols.length);
+  let i = 0;
+  for (const c of inputValue) {
+    chars[i++] = c;
+  }
+  chars.fill(EMPTY_CHAR, i);
+  return chars;
+};
+const isCursorAtTheBeginning = (maskSymbols, selectoinStart) => {
+  if (selectoinStart >= maskSymbols.length) {
+    return false;
+  }
+  for (let i = 0; i < selectoinStart; i++) {
+    if (!isExactMode(maskSymbols[i])) {
+      return false;
+    }
+  }
+  return true;
+};
+const getMergedValue = (chars, maskSymbols) => {
+  if (!isMaskedInputComplete(chars, maskSymbols)) {
+    return '';
+  }
+  const res = new Array(chars.length);
+  for (let i = 0; i < chars.length; i++) {
+    res[i] = isExactMode(maskSymbols[i]) ? maskSymbols[i].value : chars[i];
+  }
+  return res.join('');
+};
+const findLastNonEmptyCharIndex = chars => {
+  for (let i = chars.length - 1; i >= 0; i--) {
+    if (!isEmptyChar(chars[i])) {
+      return i;
+    }
+  }
+  return -1;
+};
+const compileResult = (chars, maskSymbols, cursorPos) => {
+  if (chars.length > maskSymbols.length) {
+    chars.length = maskSymbols.length;
+  }
+  let lastEmptyPos = findLastNonEmptyCharIndex(chars) + 1;
+  while (lastEmptyPos < maskSymbols.length && isExactMode(maskSymbols[lastEmptyPos])) {
+    ++lastEmptyPos;
+  }
+  if (lastEmptyPos < chars.length) {
+    chars.length = lastEmptyPos;
+  }
+  return {
+    value: chars.join(''),
+    placeholder: getPlaceholder(chars, maskSymbols),
+    cursorPos: Math.min(cursorPos, chars.length),
+    mergedValue: getMergedValue(chars, maskSymbols)
+  };
+};
+const deleteContentBackward = (inputValue, maskSymbols, selectionStart, selectionEnd) => {
+  if (selectionEnd === 0) {
+    return null;
+  }
+  const chars = getCharsFromInputValue(inputValue, maskSymbols);
+  if (selectionStart !== selectionEnd) {
+    clearCharsSelection(chars, selectionStart, selectionEnd);
+    return compileResult(chars, maskSymbols, selectionStart);
+  }
+  let cusrsorPos = selectionStart;
+  while (cusrsorPos > 0 && isExactMode(maskSymbols[cusrsorPos - 1])) {
+    --cusrsorPos;
+  }
+  if (cusrsorPos > 0) {
+    clearCharsSelection(chars, cusrsorPos - 1, cusrsorPos);
+    do {
+      --cusrsorPos;
+    } while (cusrsorPos > 0 && isExactMode(maskSymbols[cusrsorPos - 1]));
+  }
+  return compileResult(chars, maskSymbols, cusrsorPos);
+};
+exports.deleteContentBackward = deleteContentBackward;
+const deleteContentForward = (inputValue, maskSymbols, selectionStart, selectionEnd) => {
+  if (selectionStart >= maskSymbols.length) {
+    return null;
+  }
+  const chars = getCharsFromInputValue(inputValue, maskSymbols);
+  if (selectionStart !== selectionEnd) {
+    clearCharsSelection(chars, selectionStart, selectionEnd);
+    return compileResult(chars, maskSymbols, selectionEnd);
+  }
+  let cursorPos = selectionStart;
+  while (cursorPos < maskSymbols.length && isExactMode(maskSymbols[cursorPos])) {
+    cursorPos++;
+  }
+  if (cursorPos < chars.length) {
+    clearCharsSelection(chars, cursorPos, cursorPos + 1);
+  }
+  return compileResult(chars, maskSymbols, cursorPos + 1);
+};
+exports.deleteContentForward = deleteContentForward;
+const beginMaskedComposition = (inputValue, maskSymbols, selectionStart) => {
+  const chars = getCharsFromInputValue(inputValue, maskSymbols);
+  const placeholder = new Array(chars.length);
+  for (let i = 0; i < maskSymbols.length; i++) {
+    placeholder[i] = isEmptyChar(chars[i]) || isExactMode(maskSymbols[i]) ? maskSymbols[i].placeholder : EMPTY_CHAR;
+  }
+  placeholder[selectionStart] = EMPTY_CHAR;
+  chars.splice(selectionStart, 1);
+  return {
+    value: chars.join(''),
+    placeholder: placeholder.join('')
+  };
+};
+exports.beginMaskedComposition = beginMaskedComposition;
+const endMaskedComposition = (inputValue, data, maskSymbols, selectionStart, wasValueInserted) => {
+  let cursorPos = selectionStart;
+  const chars = getCharsFromInputValue(inputValue, maskSymbols);
+  const dataChars = [...data];
+  if (!wasValueInserted) {
+    chars.splice(cursorPos, 0, ...dataChars);
+    chars.length = maskSymbols.length;
+    cursorPos += dataChars.length;
+  }
+  cursorPos -= dataChars.length;
+  clearCharsSelection(chars, cursorPos, cursorPos + dataChars.length);
+  while (cursorPos < maskSymbols.length && isExactMode(maskSymbols[cursorPos])) {
+    cursorPos++;
+  }
+  if (cursorPos >= maskSymbols.length) {
+    return compileResult(chars, maskSymbols, cursorPos);
+  }
+  for (let dataPos = 0; dataPos < dataChars.length && cursorPos < maskSymbols.length; ++dataPos, ++cursorPos) {
+    const data = dataChars[dataPos];
+    if (isEmptyChar(chars[cursorPos]) && testMaskedValue(maskSymbols[cursorPos], data)) {
+      chars[cursorPos] = data;
+    }
+  }
+  while (cursorPos < maskSymbols.length && isExactMode(maskSymbols[cursorPos])) {
+    cursorPos++;
+  }
+  return compileResult(chars, maskSymbols, cursorPos);
+};
+exports.endMaskedComposition = endMaskedComposition;
+const insertText = (inputValue, data, maskSymbols, selectionStart, selectionEnd) => {
+  const chars = getCharsFromInputValue(inputValue, maskSymbols);
+  let cursorPos = selectionStart;
+  clearCharsSelection(chars, selectionStart, selectionEnd);
+  while (cursorPos < maskSymbols.length && isExactMode(maskSymbols[cursorPos])) {
+    cursorPos++;
+  }
+  if (cursorPos >= maskSymbols.length) {
+    return compileResult(chars, maskSymbols, cursorPos);
+  }
+  if (testMaskedValue(maskSymbols[cursorPos], data)) {
+    if (cursorPos >= chars.length) {
+      chars.length = cursorPos + 1;
+    }
+    chars[cursorPos] = data;
+    do {
+      cursorPos++;
+    } while (cursorPos < maskSymbols.length && isExactMode(maskSymbols[cursorPos]));
+  }
+  return compileResult(chars, maskSymbols, cursorPos);
+};
+exports.insertText = insertText;
+const insertFromPaste = (inputValue, data, maskSymbols, selectionStart, selectionEnd) => {
+  const chars = getCharsFromInputValue(inputValue, maskSymbols);
+  let cursorPos = selectionStart;
+  clearCharsSelection(chars, selectionStart, selectionEnd);
+  if (isCursorAtTheBeginning(maskSymbols, cursorPos)) {
+    cursorPos = 0;
+  } else {
+    while (cursorPos < maskSymbols.length && isExactMode(maskSymbols[cursorPos])) {
+      cursorPos++;
+    }
+  }
+  if (cursorPos >= maskSymbols.length) {
+    return compileResult(chars, maskSymbols, cursorPos);
+  }
+  const dataChars = [...data];
+  for (let dataPos = 0; dataPos < dataChars.length && cursorPos < maskSymbols.length;) {
+    const data = dataChars[dataPos];
+    const maskSymbol = maskSymbols[cursorPos];
+    if (isExactMode(maskSymbol)) {
+      if (maskSymbol.value === data) {
+        ++dataPos;
+      }
+      ++cursorPos;
+    } else {
+      if (testMaskedValue(maskSymbol, data)) {
+        chars[cursorPos] = data;
+        ++cursorPos;
+      }
+      ++dataPos;
+    }
+  }
+  return compileResult(chars, maskSymbols, cursorPos);
+};
+exports.insertFromPaste = insertFromPaste;
+const splitValueAndMask = (inputValue, maskSymbols) => {
+  const chars = getCharsFromInputValue('', maskSymbols);
+  const dataChars = getCharsFromInputValue(inputValue, maskSymbols);
+  let cursorPos = 0;
+  for (let dataPos = 0; dataPos < dataChars.length && cursorPos < maskSymbols.length;) {
+    const data = dataChars[dataPos];
+    const maskSymbol = maskSymbols[cursorPos];
+    if (isExactMode(maskSymbol)) {
+      if (maskSymbol.value === data) {
+        ++dataPos;
+      }
+      ++cursorPos;
+    } else {
+      if (testMaskedValue(maskSymbol, data)) {
+        chars[cursorPos] = data;
+        ++cursorPos;
+      }
+      ++dataPos;
+    }
+  }
+  return compileResult(chars, maskSymbols, chars.length);
+};
+exports.splitValueAndMask = splitValueAndMask;
+const getMergedValueSliced = (inputValue, maskSymbols, selectionStart, selectionEnd) => {
+  const chars = getCharsFromInputValue(inputValue, maskSymbols);
+  for (let i = selectionStart; i < selectionEnd && i < maskSymbols.length; i++) {
+    if (isExactMode(maskSymbols[i])) {
+      chars[i] = maskSymbols[i].value;
+    }
+  }
+  return chars.slice(selectionStart, selectionEnd).join('');
+};
+exports.getMergedValueSliced = getMergedValueSliced;

package/lib/cjs/link/index.js

@@ -0,0 +1,152 @@
+"use strict";
+
+require('../icon');
+var _utils = require('../utils');
+const templateHTML = '<style>:host{display:inline}a{font:var(--sinch-comp-link-default-font-initial);font-size:inherit;line-height:inherit;text-decoration:var(--sinch-comp-link-default-text-decoration-initial);color:var(--sinch-comp-link-color-default-text-initial);border-radius:.5em;white-space:nowrap;--sinch-global-color-icon:var(--sinch-comp-link-color-default-icon-initial)}a:hover{text-decoration:var(--sinch-comp-link-default-text-decoration-hover);color:var(--sinch-comp-link-color-default-text-hover);--sinch-global-color-icon:var(--sinch-comp-link-color-default-icon-hover)}a:focus-visible{outline:2px solid var(--sinch-comp-link-color-default-outline-focus);outline-offset:2px}:host([standalone]){display:block}:host([standalone]) a{display:block;font:var(--sinch-comp-link-standalone-font-initial);font-size:inherit;line-height:inherit;text-decoration:none;width:fit-content}#external-icon,#standalone-icon{display:none;height:1em}#icon-prefix{display:none;margin-left:-.25em}:host([external]:not([standalone])) #external-icon{display:inline-block;margin-left:.25em;vertical-align:-.2em;--sinch-global-size-icon:1em}:host([standalone][external]) #external-icon{display:inline-block;vertical-align:-.4em;--sinch-global-size-icon:1.5em}:host([standalone]) #icon-prefix{display:inline}:host([standalone]:not([external])) #standalone-icon{display:inline-block;vertical-align:-.4em;--sinch-global-size-icon:1.5em}:host([disabled]) a{color:var(--sinch-comp-link-color-disabled-text-initial);pointer-events:none;cursor:initial;text-decoration:var(--sinch-comp-link-default-text-decoration-disabled);--sinch-global-color-icon:var(--sinch-comp-link-color-disabled-icon-initial)}#content{white-space:var(--sinch-global-text-white-space,normal)}</style><a referrerpolicy="no-referer" aria-hidden="true"><span id="content"></span><span id="icon-prefix">&nbsp;</span><sinch-icon id="external-icon" name="open_in_new"></sinch-icon><sinch-icon id="standalone-icon" name="arrow_forward"></sinch-icon></a>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+(0, _utils.defineCustomElement)('sinch-link', class extends _utils.NectaryElement {
+  #$anchor;
+  #$text;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#$anchor = shadowRoot.querySelector('a');
+    this.#$text = shadowRoot.querySelector('#content');
+  }
+  connectedCallback() {
+    this.setAttribute('role', 'link');
+    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() {
+    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);
+  }
+  static get observedAttributes() {
+    return ['text', 'href', 'use-history', 'external', 'standalone', 'disabled'];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    if ((0, _utils.isAttrEqual)(oldVal, newVal)) {
+      return;
+    }
+    switch (name) {
+      case 'text':
+        {
+          this.#$text.textContent = newVal;
+          break;
+        }
+      case 'href':
+        {
+          (0, _utils.updateAttribute)(this.#$anchor, 'href', newVal);
+          break;
+        }
+      case 'use-history':
+        {
+          const shouldUseHistory = (0, _utils.isAttrTrue)(newVal);
+          if (shouldUseHistory) {
+            (0, _utils.updateBooleanAttribute)(this, 'preventdefault', true);
+          }
+          (0, _utils.updateBooleanAttribute)(this, name, shouldUseHistory);
+          break;
+        }
+      case 'standalone':
+      case 'disabled':
+        {
+          (0, _utils.updateBooleanAttribute)(this, name, (0, _utils.isAttrTrue)(newVal));
+          break;
+        }
+      case 'external':
+        {
+          const isExternal = (0, _utils.isAttrTrue)(newVal);
+          (0, _utils.updateAttribute)(this.#$anchor, 'target', isExternal ? '_blank' : null);
+          (0, _utils.updateBooleanAttribute)(this, name, isExternal);
+          break;
+        }
+    }
+  }
+  get text() {
+    return (0, _utils.getAttribute)(this, 'text', '');
+  }
+  set text(value) {
+    (0, _utils.updateAttribute)(this, 'text', value);
+  }
+  get href() {
+    return (0, _utils.getAttribute)(this, 'href', '');
+  }
+  set href(value) {
+    (0, _utils.updateAttribute)(this, 'href', value);
+  }
+  set 'use-history'(value) {
+    (0, _utils.updateBooleanAttribute)(this, 'use-history', value);
+  }
+  get 'use-history'() {
+    return (0, _utils.getBooleanAttribute)(this, 'use-history');
+  }
+  set disabled(isDisabled) {
+    (0, _utils.updateBooleanAttribute)(this, 'disabled', isDisabled);
+  }
+  get disabled() {
+    return (0, _utils.getBooleanAttribute)(this, 'disabled');
+  }
+  set external(isExternal) {
+    (0, _utils.updateBooleanAttribute)(this, 'external', isExternal);
+  }
+  get external() {
+    return (0, _utils.getBooleanAttribute)(this, 'external');
+  }
+  set standalone(isstandalone) {
+    (0, _utils.updateBooleanAttribute)(this, 'standalone', isstandalone);
+  }
+  get standalone() {
+    return (0, _utils.getBooleanAttribute)(this, 'standalone');
+  }
+  set preventDefault(isPrevented) {
+    (0, _utils.updateBooleanAttribute)(this, 'preventdefault', isPrevented);
+  }
+  get preventDefault() {
+    return (0, _utils.getBooleanAttribute)(this, 'preventdefault');
+  }
+  get focusable() {
+    return true;
+  }
+  focus() {
+    this.#$anchor.focus();
+  }
+  blur() {
+    this.#$anchor.blur();
+  }
+  #onAnchorClick = e => {
+    if (this.preventDefault) {
+      e.preventDefault();
+      if (this['use-history']) {
+        history.pushState({}, '', this.href);
+      }
+    }
+    this.dispatchEvent(new CustomEvent('-click'));
+  };
+  #onAnchorFocus = () => {
+    this.dispatchEvent(new CustomEvent('-focus'));
+  };
+  #onAnchorBlur = () => {
+    this.dispatchEvent(new CustomEvent('-blur'));
+  };
+  #onFocusReactHandler = () => {
+    (0, _utils.getReactEventHandler)(this, 'on-focus')?.();
+  };
+  #onBlurReactHandler = () => {
+    (0, _utils.getReactEventHandler)(this, 'on-blur')?.();
+  };
+  #onClickReactHandler = e => {
+    (0, _utils.getReactEventHandler)(this, 'on-click')?.(e);
+  };
+});

package/lib/cjs/link/types.js

@@ -0,0 +1 @@
+"use strict";

package/lib/cjs/list/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _utils = require('../utils');
+const templateHTML = '<style>:host{display:block;height:100%}#wrapper{display:flex;flex-direction:column;box-sizing:border-box;width:100%;height:100%;overflow-y:auto}</style><div id="wrapper"><slot></slot></div>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+(0, _utils.defineCustomElement)('sinch-list', class extends _utils.NectaryElement {
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+  connectedCallback() {
+    this.setAttribute('role', 'list');
+  }
+});

package/lib/cjs/list/types.js

@@ -0,0 +1 @@
+"use strict";

package/lib/cjs/list-item/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _utils = require('../utils');
+const templateHTML = '<style>:host{display:block;outline:0}#wrapper{width:100%;height:100%;box-sizing:border-box;overflow:hidden;padding:8px 0;background-color:var(--sinch-comp-list-color-default-background-initial);border-bottom:1px solid var(--sinch-comp-list-color-default-border-initial)}:host(:last-child)>#wrapper{border-bottom:none}:host(:hover)>#wrapper{background-color:var(--sinch-comp-list-color-default-background-hover)}</style><div id="wrapper"><slot name="content"></slot></div>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+(0, _utils.defineCustomElement)('sinch-list-item', class extends _utils.NectaryElement {
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+  connectedCallback() {
+    this.setAttribute('role', 'listitem');
+  }
+});

package/lib/cjs/list-item/types.js

@@ -0,0 +1 @@
+"use strict";

package/lib/cjs/pagination/index.js

@@ -0,0 +1,149 @@
+"use strict";
+
+require('../icon');
+var _utils = require('../utils');
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{display:flex;justify-content:center;gap:8px;width:100%;height:var(--sinch-local-size);--sinch-local-size:24px}button{all:initial;position:relative;display:flex;justify-content:center;align-items:center;min-width:var(--sinch-local-size);height:var(--sinch-local-size);cursor:pointer;border-radius:var(--sinch-comp-pagination-shape-radius);user-select:none;--sinch-global-color-icon:var(--sinch-comp-pagination-color-default-icon-default)}button:focus-visible::before{content:"";position:absolute;inset:-3px;border:2px solid var(--sinch-comp-pagination-color-default-outline-focus);border-radius:calc(var(--sinch-comp-pagination-shape-radius) + 3px);pointer-events:none}button:disabled{--sinch-global-color-icon:var(--sinch-comp-pagination-color-disabled-icon-initial);cursor:initial}button:enabled:hover{background-color:var(--sinch-comp-pagination-color-default-background-hover)}button>*{display:block;overflow:hidden;pointer-events:none}.page{font:var(--sinch-comp-pagination-font-default-page-number);color:var(--sinch-comp-pagination-color-default-text-initial);background-color:var(--sinch-comp-pagination-color-default-background-initial);padding:0 4px;box-sizing:border-box}.page.dots>span{display:none}.page.dots::after{content:"..."}.page.active{font:var(--sinch-comp-pagination-font-checked-page-number);background-color:var(--sinch-comp-pagination-color-checked-background-initial);pointer-events:none;cursor:initial}.page.active:hover{background-color:var(--sinch-comp-pagination-color-checked-background-hover)}.page.hidden{display:none}#left,#right{--sinch-icon-size:24px}</style><div id="wrapper"><button id="left"><sinch-icon id="icon-left" name="keyboard_arrow_left"></sinch-icon></button><button class="page"><span>1</span></button><button class="page active"><span>2</span></button><button class="page"><span>3</span></button><button class="page"><span>4</span></button><button class="page"><span>5</span></button><button class="page dots"><span>6</span></button><button class="page"><span>20</span></button><button id="right"><sinch-icon id="icon-right" name="keyboard_arrow_right"></sinch-icon></button></div>';
+const NUM_BUTTONS = 7;
+const MIDDLE_BTN_INDEX = Math.floor(NUM_BUTTONS / 2);
+const FIRST_BTN_INDEX = 0;
+const LAST_BTN_INDEX = NUM_BUTTONS - 1;
+const DOTS_LEFT_INDEX = 1;
+const DOTS_RIGHT_INDEX = LAST_BTN_INDEX - 1;
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+(0, _utils.defineCustomElement)('sinch-pagination', class extends _utils.NectaryElement {
+  #$left;
+  #$right;
+  #$buttons;
+  #$wrapper;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#$left = shadowRoot.querySelector('#left');
+    this.#$right = shadowRoot.querySelector('#right');
+    this.#$buttons = shadowRoot.querySelectorAll('.page');
+    this.#$wrapper = shadowRoot.querySelector('#wrapper');
+  }
+  connectedCallback() {
+    this.#onValueChange();
+    this.#$wrapper.addEventListener('click', this.#onButtonClick);
+    this.addEventListener('-change', this.#onChangeReactHandler);
+  }
+  disconnectedCallback() {
+    this.#$wrapper.removeEventListener('click', this.#onButtonClick);
+    this.removeEventListener('-change', this.#onChangeReactHandler);
+  }
+  static get observedAttributes() {
+    return ['max', 'value'];
+  }
+  attributeChangedCallback(name) {
+    switch (name) {
+      case 'value':
+      case 'max':
+        {
+          this.#onValueChange();
+          break;
+        }
+    }
+  }
+  set value(val) {
+    (0, _utils.updateAttribute)(this, 'value', val);
+  }
+  get value() {
+    return (0, _utils.getIntegerAttribute)(this, 'value', 0);
+  }
+  set max(val) {
+    (0, _utils.updateAttribute)(this, 'max', val);
+  }
+  get max() {
+    return (0, _utils.getIntegerAttribute)(this, 'value', 0);
+  }
+  #onValueChange() {
+    const value = (0, _utils.getIntegerAttribute)(this, 'value', 0) - 1;
+    const max = Math.max(0, (0, _utils.getIntegerAttribute)(this, 'max', 0));
+    const valueOffset = Math.min(Math.max(0, value - MIDDLE_BTN_INDEX), Math.max(0, max - NUM_BUTTONS));
+    for (let i = 0; i < this.#$buttons.length; i++) {
+      const $b = this.#$buttons[i];
+      if (value < 3) {
+        (0, _utils.setClass)($b, 'active', value === i);
+      } else if (value >= max - MIDDLE_BTN_INDEX) {
+        (0, _utils.setClass)($b, 'active', i + valueOffset === value);
+      } else {
+        (0, _utils.setClass)($b, 'active', i === MIDDLE_BTN_INDEX);
+      }
+      if (max > NUM_BUTTONS) {
+        (0, _utils.setClass)($b, 'dots', i === DOTS_LEFT_INDEX && value > MIDDLE_BTN_INDEX || i === DOTS_RIGHT_INDEX && value <= max - DOTS_RIGHT_INDEX);
+      }
+      (0, _utils.setClass)($b, 'hidden', i >= max);
+      const btnText = $b.firstElementChild;
+      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;
+  }
+  #onButtonClick = e => {
+    e.stopPropagation();
+    const value = Math.max((0, _utils.getIntegerAttribute)(this, 'value', 0) - 1);
+    const max = Math.max(0, (0, _utils.getIntegerAttribute)(this, 'max', 0));
+    if ((0, _utils.isTargetEqual)(e, this.#$left)) {
+      return this.#dispatchChangeEvent(Math.max(value - 1, 0));
+    }
+    if ((0, _utils.isTargetEqual)(e, this.#$right)) {
+      return this.#dispatchChangeEvent(Math.min(value + 1, max));
+    }
+    const btnIndex = (0, _utils.getTargetIndexInParent)(e, this.#$wrapper) - 1;
+    if (btnIndex >= FIRST_BTN_INDEX && btnIndex <= LAST_BTN_INDEX) {
+      if (btnIndex === FIRST_BTN_INDEX) {
+        return this.#dispatchChangeEvent(0);
+      }
+      if (btnIndex === LAST_BTN_INDEX) {
+        return this.#dispatchChangeEvent(max);
+      }
+      if (btnIndex === DOTS_LEFT_INDEX && max > NUM_BUTTONS && value > MIDDLE_BTN_INDEX) {
+        return this.#dispatchChangeEvent(Math.floor(value / 2));
+      }
+      if (btnIndex === DOTS_RIGHT_INDEX && max > NUM_BUTTONS && value <= max - DOTS_RIGHT_INDEX) {
+        return this.#dispatchChangeEvent(Math.floor((max - value) / 2 + value));
+      }
+      return this.#dispatchChangeEvent(btnIndex + Math.min(Math.max(0, value - MIDDLE_BTN_INDEX), Math.max(0, max - NUM_BUTTONS)));
+    }
+  };
+  #clamp(value) {
+    const max = (0, _utils.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
+    }));
+  }
+  #onChangeReactHandler = e => {
+    (0, _utils.getReactEventHandler)(this, 'on-change')?.(e);
+  };
+  get focusable() {
+    return true;
+  }
+  focus() {
+    this.#$left.focus();
+  }
+  blur() {
+    this.#$left.blur();
+    this.#$right.blur();
+    this.#$buttons.forEach($b => $b.blur());
+  }
+  get prevButtonRect() {
+    return (0, _utils.getRect)(this.#$left);
+  }
+  get nextButtonRect() {
+    return (0, _utils.getRect)(this.#$right);
+  }
+  nthButtonRect(index) {
+    const btn = this.#$buttons[index];
+    return btn == null ? null : (0, _utils.getRect)(btn);
+  }
+});

package/lib/cjs/pagination/types.js

@@ -0,0 +1 @@
+"use strict";