@nectary/components 2.4.0

package/utils/csv.d.ts

@@ -0,0 +1,5 @@
+export declare const CSV_DELIMITER = ",";
+export declare const packCsv: (values: string[]) => string;
+export declare const unpackCsv: (csv: string) => string[];
+export declare const updateCsv: (csv: string, value: string, setActive: boolean) => string;
+export declare const getFirstCsvValue: (acc: string) => string | null;

package/utils/csv.js

@@ -0,0 +1,22 @@
+export const CSV_DELIMITER = ',';
+export const packCsv = values => {
+  return values.join(CSV_DELIMITER);
+};
+export const unpackCsv = csv => {
+  return csv.length === 0 ? [] : csv.split(CSV_DELIMITER);
+};
+export const updateCsv = (csv, value, setActive) => {
+  const values = unpackCsv(csv);
+  const index = values.indexOf(value);
+  if (setActive) {
+    if (index < 0) {
+      values.push(value);
+    }
+  } else if (index >= 0) {
+    values.splice(index, 1);
+  }
+  return packCsv(values);
+};
+export const getFirstCsvValue = acc => {
+  return acc.length === 0 ? null : unpackCsv(acc)[0];
+};

package/utils/debounce.d.ts

@@ -0,0 +1,8 @@
+export declare const debounceTimeout: (ms: number) => (cb: () => void) => {
+    fn: () => void;
+    cancel: () => void;
+};
+export declare const debounceAnimationFrame: (cb: () => void) => {
+    fn: () => void;
+    cancel: () => void;
+};

package/utils/debounce.js

@@ -0,0 +1,22 @@
+const createDebounce = (delayFn, cancelFn) => cb => {
+  let id = null;
+  const delayCallback = () => {
+    id = null;
+    cb();
+  };
+  return {
+    fn: () => {
+      if (id !== null) {
+        cancelFn(id);
+      }
+      id = delayFn(delayCallback);
+    },
+    cancel: () => {
+      if (id !== null) {
+        cancelFn(id);
+      }
+    }
+  };
+};
+export const debounceTimeout = ms => createDebounce(cb => global.setTimeout(cb, ms), global.clearTimeout);
+export const debounceAnimationFrame = createDebounce(global.requestAnimationFrame, global.cancelAnimationFrame);

package/utils/dom.d.ts

@@ -0,0 +1,34 @@
+export declare const updateExplicitBooleanAttribute: ($element: Element, attrName: string, attrValue: boolean | null | undefined) => void;
+export declare const isAttrTrue: (attrValue: string | null) => boolean;
+export declare const getBooleanAttribute: ($element: Element, attrName: string) => boolean;
+export declare const updateBooleanAttribute: ($element: Element, attrName: string, attrValue: boolean | null | undefined) => void;
+export declare const updateAttribute: ($element: Element, attrName: string, attrValue: string | number | boolean | null | undefined) => void;
+export declare function getAttribute($element: Element, attrName: string): string | null;
+export declare function getAttribute($element: Element, attrName: string, defaultValue: string): string;
+export declare const isLiteralValue: <T extends readonly string[]>(literals: T, value: string | null | undefined) => value is T[number];
+export declare const updateLiteralAttribute: <T extends readonly string[]>($element: Element, literals: T, attrName: string, attrValue: string | null | undefined) => void;
+export declare function getLiteralAttribute<T extends readonly string[]>($element: Element, literals: T, attrName: string): T[number];
+export declare function getLiteralAttribute<T extends readonly string[]>($element: Element, literals: T, attrName: string, defaultValue: null): T[number] | null;
+export declare function getLiteralAttribute<T extends readonly string[]>($element: Element, literals: T, attrName: string, defaultValue: T[number]): T[number];
+export declare const clampNumber: (value: number, min: number, max: number) => number;
+type IntegerOptions = {
+    min?: number;
+    max?: number;
+    defaultValue?: number | null;
+    itemSizeMultiplier?: number;
+    itemSpaceBetween?: number;
+};
+export declare const attrValueToInteger: (value: string | null, options?: IntegerOptions) => number | null;
+export declare const attrValueToPixels: (value: string | null, options?: IntegerOptions) => string;
+export declare const updateIntegerAttribute: ($element: Element, attrName: string, attrValue: string | number | null | undefined, options?: IntegerOptions) => void;
+export declare function getIntegerAttribute($element: Element, attrName: string): number | undefined;
+export declare function getIntegerAttribute($element: Element, attrName: string, defaultValue: null): number | null;
+export declare function getIntegerAttribute($element: Element, attrName: string, defaultValue: number): number;
+export declare const setClass: (elem: Element, name: string, isSet: boolean) => void;
+export declare const hasClass: (elem: Element, name: string) => boolean;
+export declare const getCssVar: (element: Element, variableName: string) => string | null;
+export declare const getCssVars: (element: Element, variableNames: string[]) => (string | null)[];
+export declare const cloneNode: (el: Element, deep: boolean) => Element;
+export declare const shouldReduceMotion: () => boolean;
+export declare const isAttrEqual: (oldVal: string | null, newVal: string | null) => boolean;
+export {};

package/utils/dom.js

@@ -0,0 +1,154 @@
+export const updateExplicitBooleanAttribute = ($element, attrName, attrValue) => {
+  $element.setAttribute(attrName, attrValue === true ? 'true' : 'false');
+};
+export const isAttrTrue = attrValue => {
+  return attrValue !== null && attrValue !== 'false';
+};
+export const getBooleanAttribute = ($element, attrName) => {
+  return isAttrTrue($element.getAttribute(attrName));
+};
+export const updateBooleanAttribute = ($element, attrName, attrValue) => {
+  const currentAttrValue = $element.getAttribute(attrName);
+  if (attrValue === true) {
+    if (!isAttrTrue(currentAttrValue)) {
+      $element.setAttribute(attrName, '');
+    }
+  } else if (currentAttrValue !== null) {
+    $element.removeAttribute(attrName);
+  }
+};
+export const updateAttribute = ($element, attrName, attrValue) => {
+  if (attrValue != null) {
+    $element.setAttribute(attrName, String(attrValue));
+  } else {
+    $element.removeAttribute(attrName);
+  }
+};
+export function getAttribute($element, attrName) {
+  let defaultValue = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+  return $element.getAttribute(attrName) ?? defaultValue;
+}
+export const isLiteralValue = (literals, value) => {
+  return value != null && literals.includes(value);
+};
+export const updateLiteralAttribute = ($element, literals, attrName, attrValue) => {
+  if (isLiteralValue(literals, attrValue)) {
+    $element.setAttribute(attrName, attrValue);
+  } else {
+    $element.removeAttribute(attrName);
+  }
+};
+export function getLiteralAttribute($element, literals, attrName, defaultValue) {
+  const attrValue = $element.getAttribute(attrName);
+  if (isLiteralValue(literals, attrValue)) {
+    return attrValue;
+  }
+  return defaultValue;
+}
+export const clampNumber = (value, min, max) => {
+  return Math.min(max, Math.max(min, value));
+};
+const DEFAULT_INTEGER_OPTIONS = {
+  itemSizeMultiplier: 1,
+  itemSpaceBetween: 0,
+  defaultValue: null
+};
+const applyRange = (value, _ref) => {
+  let {
+    min,
+    max
+  } = _ref;
+  let result = value;
+  if (min != null) {
+    result = Math.max(min, result);
+  }
+  if (max != null) {
+    result = Math.min(max, result);
+  }
+  return result;
+};
+export const attrValueToInteger = function (value) {
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_INTEGER_OPTIONS;
+  const {
+    defaultValue = null,
+    itemSizeMultiplier = 1,
+    itemSpaceBetween = 0
+  } = options;
+  let intValue = defaultValue;
+  if (value !== null) {
+    const int = parseInt(value);
+    if (Number.isInteger(int)) {
+      intValue = applyRange(int, options);
+    }
+  }
+  if (intValue !== null) {
+    return intValue * itemSizeMultiplier + Math.max(intValue - 1, 0) * itemSpaceBetween;
+  }
+  return null;
+};
+export const attrValueToPixels = function (value) {
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_INTEGER_OPTIONS;
+  const int = attrValueToInteger(value, options);
+  return int === null ? 'unset' : `${int}px`;
+};
+export const updateIntegerAttribute = function ($element, attrName, attrValue) {
+  let options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : DEFAULT_INTEGER_OPTIONS;
+  const {
+    defaultValue = null,
+    itemSizeMultiplier: multiplier = 1
+  } = options;
+  let intValue = null;
+  if (typeof attrValue === 'string') {
+    intValue = attrValueToInteger(attrValue, options);
+  } else if (typeof attrValue === 'number') {
+    intValue = applyRange(attrValue, options) * multiplier;
+  } else {
+    intValue = defaultValue;
+  }
+  if (intValue === null) {
+    $element.removeAttribute(attrName);
+  } else {
+    $element.setAttribute(attrName, intValue.toFixed(0));
+  }
+};
+export function getIntegerAttribute($element, attrName, defaultValue) {
+  return attrValueToInteger($element.getAttribute(attrName)) ?? defaultValue;
+}
+export const setClass = (elem, name, isSet) => {
+  isSet ? elem.classList.add(name) : elem.classList.remove(name);
+};
+export const hasClass = (elem, name) => {
+  return elem.classList.contains(name);
+};
+export const getCssVar = (element, variableName) => {
+  const result = getComputedStyle(element).getPropertyValue(variableName).trim();
+  return result === '' ? null : result;
+};
+export const getCssVars = (element, variableNames) => {
+  const style = getComputedStyle(element);
+  return variableNames.map(name => {
+    const result = style.getPropertyValue(name).trim();
+    return result === '' ? null : result;
+  });
+};
+export const cloneNode = (el, deep) => {
+  const root = el.getRootNode();
+  if (root !== document && Reflect.has(root, 'createElement')) {
+    const cloned = root.createElement(el.tagName.toLowerCase());
+    for (const attr of el.getAttributeNames()) {
+      cloned.setAttribute(attr, el.getAttribute(attr));
+    }
+    if (deep) {
+      for (let i = 0; i < el.children.length; i++) {
+        const clonedChild = cloneNode(el.children[i], deep);
+        cloned.appendChild(clonedChild);
+      }
+    }
+    return cloned;
+  }
+  return el.cloneNode(deep);
+};
+export const shouldReduceMotion = () => window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+export const isAttrEqual = (oldVal, newVal) => {
+  return oldVal === newVal || newVal === null && oldVal === 'false' || newVal === '' && oldVal === 'true';
+};

package/utils/element.d.ts

@@ -0,0 +1,16 @@
+export declare const defineCustomElement: (name: string, constructor: CustomElementConstructor) => void;
+export declare const setNectaryRegistry: (registry: CustomElementRegistry) => void;
+declare global {
+    interface ShadowRootInit {
+        customElements?: CustomElementRegistry;
+    }
+}
+export declare class NectaryElement extends HTMLElement {
+    #private;
+    attachShadow(options?: Partial<ShadowRootInit>): ShadowRoot;
+    version: string;
+    get focusable(): boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    get isDomConnected(): boolean;
+}

package/utils/element.js

@@ -0,0 +1,48 @@
+import pkg from '../package.json';
+const nectaryDefinitions = new Map();
+let nectaryRegistry = null;
+export const defineCustomElement = (name, constructor) => {
+  if (nectaryRegistry !== null) {
+    if (nectaryRegistry.get(name) == null) {
+      nectaryRegistry.define(name, constructor);
+    }
+    return;
+  }
+  nectaryDefinitions.set(name, constructor);
+};
+export const setNectaryRegistry = registry => {
+  if (nectaryRegistry !== null) {
+    throw new Error('Nectary registry already set');
+  }
+  nectaryRegistry = registry;
+  for (const [name, ctor] of nectaryDefinitions.entries()) {
+    if (nectaryRegistry.get(name) == null) {
+      nectaryRegistry.define(name, ctor);
+    }
+  }
+  nectaryDefinitions.clear();
+};
+export class NectaryElement extends HTMLElement {
+  attachShadow(options) {
+    return super.attachShadow({
+      mode: 'open',
+      delegatesFocus: false,
+      customElements: nectaryRegistry,
+      ...options
+    });
+  }
+  version = pkg.version;
+  get focusable() {
+    return false;
+  }
+  #isDomConnected = false;
+  connectedCallback() {
+    this.#isDomConnected = true;
+  }
+  disconnectedCallback() {
+    this.#isDomConnected = false;
+  }
+  get isDomConnected() {
+    return this.#isDomConnected;
+  }
+}

package/utils/event-target.d.ts

@@ -0,0 +1,4 @@
+export declare const isTargetEqual: (e: Event, $elem: HTMLElement) => boolean;
+export declare const getTargetByAttribute: (e: Event, attr: string) => HTMLElement | null;
+export declare const getTargetAttribute: (e: Event, attr: string) => string | null;
+export declare const getTargetIndexInParent: (e: Event, parent: Element) => number;

package/utils/event-target.js

@@ -0,0 +1,26 @@
+export const isTargetEqual = (e, $elem) => {
+  return e.target === $elem || e.originalTarget === $elem;
+};
+export const getTargetByAttribute = (e, attr) => {
+  if (e.target.hasAttribute(attr)) {
+    return e.target;
+  }
+  if (e.originalTarget?.hasAttribute(attr) === true) {
+    return e.originalTarget;
+  }
+  return null;
+};
+export const getTargetAttribute = (e, attr) => {
+  return e.target.getAttribute(attr) ?? e.originalTarget?.getAttribute(attr) ?? null;
+};
+export const getTargetIndexInParent = (e, parent) => {
+  const indexOf = Array.prototype.indexOf.call(parent.children, e.target);
+  if (indexOf >= 0) {
+    return indexOf;
+  }
+  const origTgt = e.originalTarget;
+  if (origTgt != null) {
+    return Array.prototype.indexOf.call(parent.children, origTgt);
+  }
+  return -1;
+};

package/utils/get-react-event-handler.d.ts

@@ -0,0 +1 @@
+export declare const getReactEventHandler: ($element: HTMLElement, handlerName: string) => ((arg?: any) => void) | null;

package/utils/get-react-event-handler.js

@@ -0,0 +1,8 @@
+export const getReactEventHandler = ($element, handlerName) => {
+  for (const key in $element) {
+    if (Object.hasOwn($element, key) && key.startsWith('__reactProps$')) {
+      return $element[key][handlerName];
+    }
+  }
+  return null;
+};

package/utils/index.d.ts

@@ -0,0 +1,12 @@
+export * from './context';
+export * from './csv';
+export * from './dom';
+export * from './element';
+export * from './rect';
+export * from './slot';
+export * from './throttle';
+export * from './debounce';
+export * from './get-react-event-handler';
+export * from './markdown';
+export * from './event-target';
+export * from './uid';

package/utils/index.js

@@ -0,0 +1,12 @@
+export * from './context';
+export * from './csv';
+export * from './dom';
+export * from './element';
+export * from './rect';
+export * from './slot';
+export * from './throttle';
+export * from './debounce';
+export * from './get-react-event-handler';
+export * from './markdown';
+export * from './event-target';
+export * from './uid';

package/utils/markdown.d.ts

@@ -0,0 +1 @@
+export declare const parseMarkdown: (md: string) => string;

package/utils/markdown.js

@@ -0,0 +1,128 @@
+import { filterXSS } from 'xss';
+const contextTags = {
+  em1: ['<span class="em1">', '</span>'],
+  em2: ['<span class="em2">', '</span>'],
+  em3: ['<span class="em3">', '</span>'],
+  s: ['<span class="strikethrough">', '</span>'],
+  p: ['<p class="paragraph">', '</p>']
+};
+const getContextTags = token => {
+  switch (token) {
+    case '_':
+    case '*':
+      return contextTags.em1;
+    case '__':
+    case '**':
+      return contextTags.em2;
+    case '___':
+    case '***':
+      return contextTags.em3;
+    case '~~':
+      return contextTags.s;
+    case 'p':
+      return contextTags.p;
+    default:
+      return null;
+  }
+};
+const encodeAttr = str => {
+  return `${str}`.replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+};
+const tokenizer = /(?<em>___|\*\*\*|__|\*\*|[_*]|~~)|(?:!?\[(?<linktext>[^\]]*?)\]\((?<linkhref>[^)]+?)\))|(?:`(?<code>[^`].*?)`)|(?<paragraph>\n{2,})|(?<newline>\n)/gm;
+export const parseMarkdown = md => {
+  const context = [];
+  let out = '';
+  let lastIndex = 0;
+  const isContextEnd = token => {
+    return context.length > 0 && context.at(-1).token === token;
+  };
+  const pushContext = token => {
+    const desc = getContextTags(token);
+    if (desc === null) {
+      return;
+    }
+    context.push({
+      token,
+      out: ''
+    });
+  };
+  const popContext = (token, prev) => {
+    const desc = getContextTags(token);
+    if (desc === null) {
+      return token;
+    }
+    const ctx = context.pop();
+    return `${desc[0]}${ctx.out}${prev}${desc[1]}`;
+  };
+  const flushContext = prev => {
+    let str = '';
+    while (context.length > 1) {
+      const ctx = context.pop();
+      str = `${ctx.token}${ctx.out}${str}`;
+    }
+    if (context.length === 0) {
+      pushContext('p');
+    }
+    return popContext(context.at(-1).token, str + prev);
+  };
+  md = md.trim();
+  while (true) {
+    const tokens = tokenizer.exec(md);
+    if (tokens === null) {
+      break;
+    }
+    let prev = md.substring(lastIndex, tokens.index);
+    let chunk = tokens[0];
+    const groups = tokens.groups;
+    lastIndex = tokenizer.lastIndex;
+    if (context.length === 0) {
+      pushContext('p');
+    }
+    if (prev.match(/[^\\](\\\\)*\\$/) != null) {
+      prev = prev.substring(0, prev.length - 1);
+      context.at(-1).out += prev + chunk;
+      continue;
+    }
+    if (groups.em != null) {
+      const isCloseTag = isContextEnd(groups.em);
+      if (isCloseTag) {
+        chunk = popContext(groups.em, prev);
+        context.at(-1).out += chunk;
+        continue;
+      }
+      context.at(-1).out += prev;
+      pushContext(groups.em);
+      continue;
+    }
+    if (groups.linkhref != null) {
+      const href = groups.linkhref;
+      const text = groups.linktext.length > 0 ? groups.linktext : href;
+      chunk = `<a class="link" target="_blank" href="${encodeAttr(href)}">${encodeAttr(text)}</a>`;
+      context.at(-1).out += prev + chunk;
+      continue;
+    }
+    if (groups.code != null) {
+      chunk = `<span class="code">${encodeAttr(groups.code)}</span>`;
+      context.at(-1).out += prev + chunk;
+      continue;
+    }
+    if (groups.newline != null) {
+      chunk = '<br/>';
+      context.at(-1).out += prev + chunk;
+      continue;
+    }
+    if (groups.paragraph != null) {
+      out += flushContext(prev);
+      continue;
+    }
+  }
+  out = (out + flushContext(md.substring(lastIndex))).trim();
+  return filterXSS(out, {
+    whiteList: {
+      p: ['class'],
+      span: ['class'],
+      a: ['href', 'class', 'target'],
+      br: []
+    }
+  });
+};

package/utils/rect.d.ts

@@ -0,0 +1,4 @@
+import type { TRect } from '../types';
+export declare const getRect: (el: Element) => TRect;
+export declare const rectOverlap: (targetRect: TRect, contentRect: TRect) => boolean;
+export declare const getTargetRect: (slot: HTMLSlotElement) => TRect | null;

package/utils/rect.js

@@ -0,0 +1,28 @@
+import { getFirstSlotElement } from './slot';
+export const getRect = el => {
+  const {
+    x,
+    y,
+    width,
+    height
+  } = el.getBoundingClientRect();
+  return {
+    x,
+    y,
+    width,
+    height
+  };
+};
+export const rectOverlap = (targetRect, contentRect) => {
+  return targetRect.x < contentRect.x + contentRect.width && targetRect.x + targetRect.width > contentRect.x && targetRect.y < contentRect.y + contentRect.height && targetRect.y + targetRect.height > contentRect.y;
+};
+export const getTargetRect = slot => {
+  const item = getFirstSlotElement(slot, true);
+  if (item === null) {
+    return null;
+  }
+  if (Reflect.has(item, 'footprintRect')) {
+    return item.footprintRect;
+  }
+  return getRect(item);
+};

package/utils/size.d.ts

@@ -0,0 +1,5 @@
+export type TSinchSize = 'l' | 'm' | 's';
+export type TSinchSizeEx = TSinchSize | 'xs';
+export declare const DEFAULT_SIZE: TSinchSize;
+export declare const sizeValues: readonly TSinchSize[];
+export declare const sizeExValues: readonly TSinchSizeEx[];

package/utils/size.js

@@ -0,0 +1,3 @@
+export const DEFAULT_SIZE = 'm';
+export const sizeValues = ['l', 'm', 's'];
+export const sizeExValues = [...sizeValues, 'xs'];

package/utils/slot.d.ts

@@ -0,0 +1,4 @@
+import type { NectaryElement } from './element';
+export declare const getFirstSlotElement: (root: HTMLSlotElement, isDeep?: boolean) => HTMLElement | null;
+export declare const getFirstFocusableElement: (root: Element) => NectaryElement | null;
+export declare const isElementFocused: ($el: Element | null) => boolean;

package/utils/slot.js

@@ -0,0 +1,38 @@
+const isSlotElement = el => {
+  return el.tagName === 'SLOT';
+};
+export const getFirstSlotElement = function (root) {
+  let isDeep = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  const el = root.assignedElements()[0];
+  if (el == null) {
+    return null;
+  }
+  if (isDeep && isSlotElement(el)) {
+    return getFirstSlotElement(el, isDeep);
+  }
+  return el;
+};
+const getChildren = root => {
+  if (isSlotElement(root)) {
+    return root.assignedElements();
+  }
+  return Array.from(root.children);
+};
+const isFocusable = el => {
+  return el.focusable === true;
+};
+export const getFirstFocusableElement = root => {
+  for (const child of getChildren(root)) {
+    if (isFocusable(child)) {
+      return child;
+    }
+    const resultEl = getFirstFocusableElement(child);
+    if (resultEl !== null) {
+      return resultEl;
+    }
+  }
+  return null;
+};
+export const isElementFocused = $el => {
+  return $el !== null && $el === $el.getRootNode().activeElement;
+};

package/utils/throttle.d.ts

@@ -0,0 +1,4 @@
+export declare const throttleAnimationFrame: (cb: () => void) => {
+    fn: () => void;
+    cancel: () => void;
+};

package/utils/throttle.js

@@ -0,0 +1,20 @@
+const createThrottle = (delayFn, cancelFn) => cb => {
+  let id = null;
+  const delayCallback = () => {
+    id = null;
+    cb();
+  };
+  return {
+    fn: () => {
+      if (id === null) {
+        id = delayFn(delayCallback);
+      }
+    },
+    cancel: () => {
+      if (id !== null) {
+        cancelFn(id);
+      }
+    }
+  };
+};
+export const throttleAnimationFrame = createThrottle(global.requestAnimationFrame, global.cancelAnimationFrame);

package/utils/uid.d.ts

@@ -0,0 +1 @@
+export declare const getUid: () => string;

package/utils/uid.js

@@ -0,0 +1,13 @@
+export const getUid = () => crypto.getRandomValues(new Uint8Array(21)).reduce((id, byte) => {
+  const nextByte = byte & 63;
+  if (nextByte < 36) {
+    return id + nextByte.toString(36);
+  }
+  if (nextByte < 62) {
+    return id + (nextByte - 26).toString(36).toUpperCase();
+  }
+  if (nextByte > 62) {
+    return `${id}-`;
+  }
+  return `${id}_`;
+}, '');

package/vertical-stepper/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchVerticalStepperElement, TSinchVerticalStepperReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-vertical-stepper': TSinchVerticalStepperReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-vertical-stepper': TSinchVerticalStepperElement;
+    }
+}