@nectary/components 3.3.0 → 3.3.2

package/lib/cjs/input/utils.js

@@ -1,317 +0,0 @@
-"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

@@ -1,152 +0,0 @@
-"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

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

package/lib/cjs/list/index.js

@@ -1,16 +0,0 @@
-"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

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

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

@@ -1,16 +0,0 @@
-"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

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

package/lib/cjs/pagination/index.js

@@ -1,149 +0,0 @@
-"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

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

package/lib/cjs/persistent-overlay/index.d.ts

@@ -1,15 +0,0 @@
-import '../icon';
-import '../stop-events';
-import '../title';
-import type { TSinchPersistentOverlayElement, TSinchPersistentOverlayReact } from './types';
-import '@nectary/components/dialog';
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-persistent-overlay': TSinchPersistentOverlayReact;
-        }
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-persistent-overlay': TSinchPersistentOverlayElement;
-    }
-}