@api-client/ui 0.0.15 → 0.1.0

package/src/http-client/store/stores/ProjectUi.ts

@@ -1,53 +0,0 @@
-import { ContextChangeRecord, ContextDeleteRecord, IBulkOperationResult, IRequestUiMeta } from '@api-client/core/build/esm/browser.js';
-import { Store } from "./Store.js";
-
-/**
- * A store for the HTTP Project requests UI.
- */
-export interface ProjectUi {
-  /**
-   * Deletes all UI metadata for a project.
-   * 
-   * @param key The key of the project to remove the meta for.
-   * @returns The delete record
-   */
-  clear(key: string): Promise<ContextDeleteRecord>;
-
-  /**
-   * Sets an UI state for an HTTP request in a project
-   * 
-   * @param pid The project key.
-   * @param key The key of the request.
-   * @returns The created object
-   */
-  set(pid: string, key: string, meta: IRequestUiMeta): Promise<ContextChangeRecord<IRequestUiMeta>>;
-
-  /**
-   * Reads an UI state for an HTTP request in a project
-   * 
-   * @param pid The project key.
-   * @param key The key of the request.
-   * @returns The meta object
-   */
-  get(pid: string, key: string): Promise<IRequestUiMeta | undefined>;
-
-  /**
-   * Reads request UI meta in a bulk operation.
-   * @param pid The project id
-   * @param keys The list of keys to read.
-   */
-  getBulk(pid: string, keys: string[]): Promise<IBulkOperationResult<IRequestUiMeta>>;
-
-  /**
-   * Deletes an UI state for an HTTP request in a project
-   * 
-   * @param pid The project key.
-   * @param key The key of the request.
-   * @returns The delete record
-   */
-  delete(pid: string, key: string): Promise<ContextDeleteRecord>;
-}
-
-export interface ProjectUiStore extends Store, ProjectUi {
-
-}

package/src/http-client/store/stores/Store.ts

@@ -1,17 +0,0 @@
-import { HttpClientPersistance } from "../HttpClientPersistance.js";
-
-export interface Store {
-  parent: HttpClientPersistance;
-
-  /**
-   * A logic to be implemented when the model starts-up.
-   * It is optional to implement but always called.
-   */
-  warmup: () => Promise<void>;
-
-  /**
-   * Cleans up before shut down.
-   * It is optional to implement but always called.
-   */
-  cleanup: () => Promise<void>;
-}

package/src/http-client/store/stores/UrlHistory.ts

@@ -1,36 +0,0 @@
-import { ContextDeleteRecord, IQueryResponse, IUrl } from "@api-client/core/build/esm/browser.js";
-import { Store } from "./Store.js";
-
-/**
- * A store that stores URL history for the application.
- */
-export interface UrlHistory {
-  /**
-   * Adds or updates an URL in the history store.
-   * If the record exists it updates its `cnt`, `time`, and `midnight`.
-   * 
-   * @param url The URL to add to the store.
-   */
-  add(url: string): Promise<IUrl>;
-
-  /**
-   * Queries the store for the URL data that matches the `query`.
-   * @param query the search term for the URL.
-   */
-  query(query: string): Promise<IQueryResponse<IUrl>>;
-
-  /**
-   * @param url The URL to delete from the store.
-   */
-  delete(url: string): Promise<ContextDeleteRecord>;
-
-  /**
-   * Clears the URL history for a space.
-   */
-  clear(): Promise<void>;
-}
-
-
-export interface UrlHistoryStore extends UrlHistory, Store {
-
-}

package/src/http-client/store/stores/WsHistory.ts

@@ -1,35 +0,0 @@
-import { ContextDeleteRecord, IQueryResponse, IUrl } from "@api-client/core/build/esm/browser.js";
-import { Store } from "./Store.js";
-
-/**
- * A store that stores web socket URL history for the application.
- */
-export interface WsHistory {
-  /**
-   * Adds or updates an URL in the web socket history store.
-   * If the record exists it updates its `cnt`, `time`, and `midnight`.
-   * 
-   * @param url The URL to add to the store.
-   */
-  add(url: string): Promise<IUrl>;
-
-  /**
-   * Queries the store for the URL data that matches the `query`.
-   * @param query the search term for the URL.
-   */
-  query(query: string): Promise<IQueryResponse<IUrl>>;
-
-  /**
-   * @param url The URL to delete from the store.
-   */
-  delete(url: string): Promise<ContextDeleteRecord>;
-
-  /**
-   * Clears the web socket URL history for a space.
-   */
-  clear(): Promise<void>;
-}
-
-export interface WsHistoryStore extends WsHistory, Store {
-
-}

package/src/http-client/store/types.ts

@@ -1,27 +0,0 @@
-import {  IRequestUiMeta, IUrl } from '@api-client/core/build/esm/browser.js';
-import { DBSchema } from 'idb/with-async-ittr';
-
-export interface IStoredRequestUi {
-  data: IRequestUiMeta;
-  meta: { key: string; project: string; }
-}
-
-export type StoreName = 'UrlHistory' | 'WsHistory' | 'ProjectUi';
-
-export interface HttpClientDB extends DBSchema {
-  UrlHistory: {
-    key: string;
-    value: IUrl;
-  }
-  WsHistory: {
-    key: string;
-    value: IUrl;
-  }
-  ProjectUi: {
-    key: string[];
-    value: IStoredRequestUi;
-    indexes: {
-      project: string;
-    }
-  }
-}

package/src/lib/3rd-party/md5.ts

@@ -1,14 +0,0 @@
-/* eslint-disable @typescript-eslint/explicit-function-return-type */
-/* eslint-disable camelcase */
-/* eslint-disable no-array-constructor */
-/* eslint-disable no-param-reassign */
-/* eslint-disable block-scoped-var */
-/* eslint-disable no-unused-expressions */
-/* eslint-disable no-bitwise */
-/* eslint-disable no-sequences */
-/* eslint-disable no-plusplus */
-/* eslint-disable no-var */
-/* eslint-disable vars-on-top */
-/* eslint-disable no-use-before-define */
-// @ts-ignore
-export default function md5(d: string): string{const r = M(V(Y(X(d),8*d.length)));return r.toLowerCase()};function M(d){for(var _,m="0123456789ABCDEF",f="",r=0;r<d.length;r++)_=d.charCodeAt(r),f+=m.charAt(_>>>4&15)+m.charAt(15&_);return f}function X(d){for(var _=Array(d.length>>2),m=0;m<_.length;m++)_[m]=0;for(m=0;m<8*d.length;m+=8)_[m>>5]|=(255&d.charCodeAt(m/8))<<m%32;return _}function V(d){for(var _="",m=0;m<32*d.length;m+=8)_+=String.fromCharCode(d[m>>5]>>>m%32&255);return _}function Y(d,_){d[_>>5]|=128<<_%32,d[14+(_+64>>>9<<4)]=_;for(var m=1732584193,f=-271733879,r=-1732584194,i=271733878,n=0;n<d.length;n+=16){const h=m; const t=f; const g=r; const e=i;f=md5_ii(f=md5_ii(f=md5_ii(f=md5_ii(f=md5_hh(f=md5_hh(f=md5_hh(f=md5_hh(f=md5_gg(f=md5_gg(f=md5_gg(f=md5_gg(f=md5_ff(f=md5_ff(f=md5_ff(f=md5_ff(f,r=md5_ff(r,i=md5_ff(i,m=md5_ff(m,f,r,i,d[n+0],7,-680876936),f,r,d[n+1],12,-389564586),m,f,d[n+2],17,606105819),i,m,d[n+3],22,-1044525330),r=md5_ff(r,i=md5_ff(i,m=md5_ff(m,f,r,i,d[n+4],7,-176418897),f,r,d[n+5],12,1200080426),m,f,d[n+6],17,-1473231341),i,m,d[n+7],22,-45705983),r=md5_ff(r,i=md5_ff(i,m=md5_ff(m,f,r,i,d[n+8],7,1770035416),f,r,d[n+9],12,-1958414417),m,f,d[n+10],17,-42063),i,m,d[n+11],22,-1990404162),r=md5_ff(r,i=md5_ff(i,m=md5_ff(m,f,r,i,d[n+12],7,1804603682),f,r,d[n+13],12,-40341101),m,f,d[n+14],17,-1502002290),i,m,d[n+15],22,1236535329),r=md5_gg(r,i=md5_gg(i,m=md5_gg(m,f,r,i,d[n+1],5,-165796510),f,r,d[n+6],9,-1069501632),m,f,d[n+11],14,643717713),i,m,d[n+0],20,-373897302),r=md5_gg(r,i=md5_gg(i,m=md5_gg(m,f,r,i,d[n+5],5,-701558691),f,r,d[n+10],9,38016083),m,f,d[n+15],14,-660478335),i,m,d[n+4],20,-405537848),r=md5_gg(r,i=md5_gg(i,m=md5_gg(m,f,r,i,d[n+9],5,568446438),f,r,d[n+14],9,-1019803690),m,f,d[n+3],14,-187363961),i,m,d[n+8],20,1163531501),r=md5_gg(r,i=md5_gg(i,m=md5_gg(m,f,r,i,d[n+13],5,-1444681467),f,r,d[n+2],9,-51403784),m,f,d[n+7],14,1735328473),i,m,d[n+12],20,-1926607734),r=md5_hh(r,i=md5_hh(i,m=md5_hh(m,f,r,i,d[n+5],4,-378558),f,r,d[n+8],11,-2022574463),m,f,d[n+11],16,1839030562),i,m,d[n+14],23,-35309556),r=md5_hh(r,i=md5_hh(i,m=md5_hh(m,f,r,i,d[n+1],4,-1530992060),f,r,d[n+4],11,1272893353),m,f,d[n+7],16,-155497632),i,m,d[n+10],23,-1094730640),r=md5_hh(r,i=md5_hh(i,m=md5_hh(m,f,r,i,d[n+13],4,681279174),f,r,d[n+0],11,-358537222),m,f,d[n+3],16,-722521979),i,m,d[n+6],23,76029189),r=md5_hh(r,i=md5_hh(i,m=md5_hh(m,f,r,i,d[n+9],4,-640364487),f,r,d[n+12],11,-421815835),m,f,d[n+15],16,530742520),i,m,d[n+2],23,-995338651),r=md5_ii(r,i=md5_ii(i,m=md5_ii(m,f,r,i,d[n+0],6,-198630844),f,r,d[n+7],10,1126891415),m,f,d[n+14],15,-1416354905),i,m,d[n+5],21,-57434055),r=md5_ii(r,i=md5_ii(i,m=md5_ii(m,f,r,i,d[n+12],6,1700485571),f,r,d[n+3],10,-1894986606),m,f,d[n+10],15,-1051523),i,m,d[n+1],21,-2054922799),r=md5_ii(r,i=md5_ii(i,m=md5_ii(m,f,r,i,d[n+8],6,1873313359),f,r,d[n+15],10,-30611744),m,f,d[n+6],15,-1560198380),i,m,d[n+13],21,1309151649),r=md5_ii(r,i=md5_ii(i,m=md5_ii(m,f,r,i,d[n+4],6,-145523070),f,r,d[n+11],10,-1120210379),m,f,d[n+2],15,718787259),i,m,d[n+9],21,-343485551),m=safe_add(m,h),f=safe_add(f,t),r=safe_add(r,g),i=safe_add(i,e)}return Array(m,f,r,i)}function md5_cmn(d,_,m,f,r,i){return safe_add(bit_rol(safe_add(safe_add(_,d),safe_add(f,i)),r),m)}function md5_ff(d,_,m,f,r,i,n){return md5_cmn(_&m|~_&f,d,_,r,i,n)}function md5_gg(d,_,m,f,r,i,n){return md5_cmn(_&f|m&~f,d,_,r,i,n)}function md5_hh(d,_,m,f,r,i,n){return md5_cmn(_^m^f,d,_,r,i,n)}function md5_ii(d,_,m,f,r,i,n){return md5_cmn(m^(_|~f),d,_,r,i,n)}function safe_add(d,_){const m=(65535&d)+(65535&_);return(d>>16)+(_>>16)+(m>>16)<<16|65535&m}function bit_rol(d,_){return d<<_|d>>>32-_}

package/src/lib/Random.ts

@@ -1,9 +0,0 @@
-/* eslint-disable no-plusplus */
-export function randomString(length: number = 8): string {
-  let text = '';
-  const pool = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
-  for(let i = 0; i < length; i++) {
-    text += pool.charAt(Math.floor(Math.random() * pool.length));
-  }
-  return text;
-}

package/src/lib/ResizableElements.ts

@@ -1,483 +0,0 @@
-/* eslint-disable max-classes-per-file */
-/* eslint-disable no-inner-declarations */
-/* eslint-disable no-param-reassign */
-
-export declare type ResizableElementMode = 'north' | 'east' | 'south' | 'north';
-
-export interface ResizeEventDetail {
-  /**
-   * The resize direction
-   */
-  direction: string;
-  /**
-   * The width set on the element
-   */
-  width?: number;
-  /**
-   * The height set on the element
-   */
-  height?: number;
-}
-
-interface ResizedInfo {
-  /**
-   * The element that is being resized
-   */
-  resize: HTMLElement;
-  /**
-   * The active area drag element.
-   */
-  drag: HTMLDivElement;
-  /**
-   * The initial resize element rectangle sizing
-   */
-  rect: DOMRect;
-}
-
-
-declare global {
-  interface HTMLElement {
-    resize: ResizableElementMode;
-  }
-
-  interface HTMLAttributes {
-    resize: DOMTokenList;
-  }
-
-  interface HTMLElementEventMap {
-    /**
-     * The event dispatched when the user resized the element in one of the directions defined 
-     * in the `resize` attribute, but before the new styles has been applied to the element.
-     * 
-     * You can cancel the event to prohibit changing the layout.
-     * 
-     * This event can be canceled but it doesn't bubble.
-     */
-    beforeresize: CustomEvent<Readonly<ResizeEventDetail>>;
-    /**
-     * The event dispatched after the element has been resized by the user in one of the directions defined 
-     * in the `resize` attribute. The new width or height has been applied to the element.
-     * 
-     * This event does not bubble or can be canceled.
-     */
-    resized: CustomEvent<Readonly<ResizeEventDetail>>;
-  }
-}
-
-interface ResizeConfigItem {
-  resize: ResizableElementMode;
-  resizeList: string[];
-  originalPosition?: string;
-  mousedownHandler?: (this: HTMLElement, ev: MouseEvent) => any;
-}
-
-if (!('resize' in document.createElement('div'))) {
-  const configMap = new WeakMap<HTMLElement, ResizeConfigItem>();
-  /** 
-   * The `width` or `height` of the activation area on the 
-   * active resize corner.
-   */
-  const activeAreaSize: number = 8;
-  /** 
-   * Since only one `resize` action can be performed per document
-   * this is a global flag indicating that a resize is triggered.
-   */
-  let resizing = false;
-
-  let resizeInfo: ResizedInfo | undefined;
-
-  /**
-   * Resets the originally set `position` CSS value on the element.
-   */
-  function resetPosition(elm: HTMLElement, info: ResizeConfigItem): void {
-    const { originalPosition } = info;
-    if (originalPosition) {
-      elm.style.position = originalPosition;
-    }
-  }
-
-  /**
-   * Sets the relative position on the element, when required.
-   */
-  function setPosition(elm: HTMLElement, info: ResizeConfigItem): void {
-    const originalPosition = elm.style.position;
-    info.originalPosition = originalPosition;
-    elm.style.position = 'relative';
-  }
-
-  /**
-   * Removes any existing event listeners added to the element related to the resize.
-   */
-  function cleanupResize(elm: HTMLElement, info: ResizeConfigItem): void {
-    resetPosition(elm, info);
-    if (info.mousedownHandler) {
-      elm.removeEventListener('mousedown', info.mousedownHandler);
-      info.mousedownHandler = undefined;
-    }
-    if (elm.shadowRoot) {
-      const activeRegions = Array.from(elm.shadowRoot.querySelectorAll('[data-resize-region]'));
-      activeRegions.forEach((node) => node.parentNode!.removeChild(node));
-    }
-  }
-
-  function activeRegionMouseDownHandler(e: MouseEvent): void {
-    resizing = true;
-    e.preventDefault();
-    const node = e.target as HTMLDivElement;
-    const src = node.offsetParent as HTMLElement;
-    resizeInfo = {
-      resize: src,
-      drag: node,
-      rect: src.getClientRects()[0],
-    };
-  }
-
-  /**
-   * Adds the `shadowRoot` to the element, when missing.
-   * The activation regions are added to the shadow root of the 
-   * element.
-   */
-  function applyShadowRoot(elm: HTMLElement): void {
-    if (!elm.shadowRoot) {
-      const root = elm.attachShadow({ mode: 'open' });
-      root.innerHTML = `<slot></slot>`;
-    }
-  }
-
-  /**
-   * @return The East or West drag region with common properties.
-   */
-  function createWestEstRegion(): HTMLDivElement {
-    const region = document.createElement('div');
-    region.style.width = `${activeAreaSize}px`;
-    region.style.top = '0px';
-    region.style.bottom = '0px';
-    region.style.position = 'absolute';
-    return region;
-  }
-
-  /**
-   * Adds the mousedown event listener to the region, adds it into
-   * the shadow DOM, and updates the info object.
-   */
-  function activateRegion(elm: HTMLElement, info: ResizeConfigItem, region: HTMLDivElement): void {
-    region.addEventListener('mousedown', activeRegionMouseDownHandler);
-    info.mousedownHandler = activeRegionMouseDownHandler;
-    if (customElements.get(elm.localName)) {
-      // custom elements can have its own logic related to the local DOM rendering.
-      // To be on the safe side (??) lets put the region in a timeout so the local DOM 
-      // is expected to be rendered
-      setTimeout(() => {
-        elm.shadowRoot!.append(region);
-      });
-    } else {
-      elm.shadowRoot!.append(region);
-    }
-  }
-
-  /**
-   * Adds the East activation region.
-   */
-  function addEastRegion(elm: HTMLElement, info: ResizeConfigItem): void {
-    applyShadowRoot(elm);
-    const region = createWestEstRegion();
-    region.style.right = `-${activeAreaSize / 2}px`;
-    region.style.cursor = 'e-resize';
-    region.dataset.resizeRegion = 'east';
-    activateRegion(elm, info, region);
-  }
-
-  /**
-   * Adds the West activation region.
-   */
-  function addWestRegion(elm: HTMLElement, info: ResizeConfigItem): void {
-    applyShadowRoot(elm);
-    const region = createWestEstRegion();
-    region.style.left = `-${activeAreaSize / 2}px`;
-    region.style.cursor = 'w-resize';
-    region.dataset.resizeRegion = 'west';
-    activateRegion(elm, info, region);
-  }
-
-  /**
-   * @returns The North or South drag region with common properties.
-   */
-  function createNorthSouthRegion(): HTMLDivElement {
-    const region = document.createElement('div');
-    region.style.height = `${activeAreaSize}px`;
-    region.style.right = '0px';
-    region.style.left = '0px';
-    region.style.position = 'absolute';
-    return region;
-  }
-
-  /**
-   * Adds the North activation region.
-   */
-  function addNorthRegion(elm: HTMLElement, info: ResizeConfigItem): void {
-    applyShadowRoot(elm);
-    const region = createNorthSouthRegion();
-    region.style.top = `-${activeAreaSize / 2}px`;
-    region.style.cursor = 'n-resize';
-    region.dataset.resizeRegion = 'north';
-    activateRegion(elm, info, region);
-  }
-
-  /**
-   * Adds the South activation region.
-   */
-  function addSouthRegion(elm: HTMLElement, info: ResizeConfigItem): void {
-    applyShadowRoot(elm);
-    const region = createNorthSouthRegion();
-    region.style.bottom = `-${activeAreaSize / 2}px`;
-    region.style.cursor = 's-resize';
-    region.dataset.resizeRegion = 'south';
-    activateRegion(elm, info, region);
-  }
-
-  function updateResize(elm: HTMLElement): void {
-    const info = configMap.get(elm)!;
-    cleanupResize(elm, info);
-    const { resizeList } = info;
-    if (!Array.isArray(resizeList) || !resizeList.length) {
-      return;
-    }
-    setPosition(elm, info);
-    if (resizeList.includes('east')) {
-      addEastRegion(elm, info);
-    }
-    if (resizeList.includes('west')) {
-      addWestRegion(elm, info);
-    }
-    if (resizeList.includes('north')) {
-      addNorthRegion(elm, info);
-    }
-    if (resizeList.includes('south')) {
-      addSouthRegion(elm, info);
-    }
-  }
-
-  /**
-   * Dispatches the beforeresize event on the target element.
-   * 
-   * @returns Whether the event was cancelled.
-   */
-  function notifyBeforeResize(opts: ResizeEventDetail): boolean {
-    const e = new CustomEvent('beforeresize', {
-      cancelable: true,
-      detail: Object.freeze(opts),
-    });
-    resizeInfo!.resize.dispatchEvent(e);
-    return e.defaultPrevented;
-  }
-
-  /**
-   * Dispatches the resize event on the target element.
-   * 
-   * @returns Whether the event was cancelled.
-   */
-  function notifyResize(opts: ResizeEventDetail): void {
-    const e = new CustomEvent('resized', {
-      cancelable: true,
-      detail: Object.freeze(opts),
-    });
-    resizeInfo!.resize.dispatchEvent(e);
-  }
-
-  /**
-   * Resizes the resize element on the West side
-   */
-  function resizeWest(pageX: number): void {
-    const { left, width } = resizeInfo!.rect;
-    const dx = pageX - left;
-    const newWidth = width - dx;
-    const info: ResizeEventDetail = { width: newWidth, direction: 'west' };
-    if (!notifyBeforeResize(info)) {
-      resizeInfo!.resize.style.width = `${newWidth}px`;
-      notifyResize(info);
-      // resizeInfo!.resize.style.width = `${width}px`;
-    }
-  }
-
-  /**
-   * Resizes the resize element on the East side
-   */
-  function resizeEast(pageX: number): void {
-    const { right, width } = resizeInfo!.rect;
-    const dx = right - pageX;
-    const newWidth = width - dx;
-    const info: ResizeEventDetail = { width: newWidth, direction: 'east' };
-    if (!notifyBeforeResize(info)) {
-      resizeInfo!.resize.style.width = `${newWidth}px`;
-      notifyResize(info);
-      // resizeInfo!.resize.style.width = `${width}px`;
-    }
-  }
-
-  /**
-   * Resizes the resize element on the North side
-   */
-  function resizeNorth(pageY: number): void {
-    const { top, height } = resizeInfo!.rect;
-    const dx = pageY - top;
-    const newHeight = height - dx;
-    const info: ResizeEventDetail = { height: newHeight, direction: 'north' };
-    if (!notifyBeforeResize(info)) {
-      resizeInfo!.resize.style.height = `${newHeight}px`;
-      notifyResize(info);
-      // resizeInfo!.resize.style.height = `${height}px`;
-    }
-  }
-
-  /**
-   * Resizes the resize element on the North side
-   */
-  function resizeSouth(pageY: number): void {
-    const { bottom, height } = resizeInfo!.rect;
-    const dx = bottom - pageY;
-    const newHeight = height - dx;
-    const info: ResizeEventDetail = { height: newHeight, direction: 'south' };
-    if (!notifyBeforeResize(info)) {
-      resizeInfo!.resize.style.height = `${newHeight}px`;
-      notifyResize(info);
-      // resizeInfo!.resize.style.height = `${height}px`;
-    }
-  }
-
-  function moveTarget(e: MouseEvent): void {
-    const { pageX, pageY } = e;
-    const { resizeRegion } = resizeInfo!.drag.dataset;
-    switch (resizeRegion) {
-      case 'west': resizeWest(pageX); break;
-      case 'east': resizeEast(pageX); break;
-      case 'north': resizeNorth(pageY); break;
-      case 'south': resizeSouth(pageY); break;
-      default: // ...
-    }
-  }
-
-  // 1. add support for the `resize` attribute that is translated to a property.
-  // 2. when the property change run the logic that supports the resize of the element depending on the values.
-
-  // 
-  // Configuring the mutation observer
-  // 
-
-  /**
-   * Updates HTMLElement's `resize` property from it's current `resize` attribute value.
-   */
-  function updateHtmlElementResize(node: Element): void {
-    if (!node.hasAttribute('resize')) {
-      return;
-    }
-    const value = node.getAttribute('resize') as ResizableElementMode;
-    (node as HTMLElement).resize = value;
-  }
-
-  const traverseAllNodes = (parent: Node, out: Element[] = []): Element[] => {
-    if (parent.nodeType !== Node.ELEMENT_NODE) {
-      return out;
-    }
-    const typed = parent as Element;
-    out.push(typed);
-    Array.from(typed.children).forEach((current) => {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      traverseAllNodes(current, out);
-    });
-    if (typed.shadowRoot) {
-      typed.querySelectorAll('*').forEach((current) => {
-        if (current.nodeType !== Node.ELEMENT_NODE) {
-          return;
-        }
-        traverseAllNodes(current, out);
-      });
-    }
-    return out;
-  };
-
-  const mutationConfig: MutationObserverInit = {
-    attributes: true,
-    childList: true,
-    subtree: true,
-    attributeFilter: ['resize'],
-    // attributeOldValue: true, // to unregister previous listeners? Probably gonna keep a reference to this.
-  };
-  const mutationCallback = (mutationsList: MutationRecord[]): void => {
-    for (const mutation of mutationsList) {
-      if (mutation.type === 'attributes') {
-        const node = mutation.target as HTMLElement;
-        updateHtmlElementResize(node);
-      } else if (mutation.type === 'childList') {
-        const node = mutation.target as HTMLElement;
-        const nodes = traverseAllNodes(node);
-        // const resizables = Array.from(node.querySelectorAll('[resize]')) as HTMLElement[];
-        nodes.forEach((item) => updateHtmlElementResize(item));
-      }
-    }
-  };
-  const mutationObserver = new MutationObserver(mutationCallback);
-  mutationObserver.observe(document.body, mutationConfig);
-
-  Object.defineProperty(HTMLElement.prototype, 'resize', {
-    get(): ResizableElementMode | undefined {
-      const item = configMap.get(this)!;
-      if (item) {
-        return item.resize;
-      }
-      return undefined;
-    },
-    set(newValue: ResizableElementMode | undefined) {
-      if (!configMap.has(this)) {
-        // @ts-ignore
-        configMap.set(this, { resize: '', resizeList: [] });
-      }
-      const item = configMap.get(this)!;
-      if (item.resize === newValue) {
-        // do not set a new value when it's already set.
-        return;
-      }
-      item.resize = newValue!;
-      let listValue;
-      if (typeof newValue === 'string') {
-        listValue = newValue.split(' ').map((part) => part.trim().toLowerCase());
-      }
-      item.resizeList = listValue || [];
-      updateResize(this);
-    },
-    enumerable: true,
-    configurable: true,
-  });
-
-  // 
-  // Processing already existing nodes
-  // @todo: how to handle existing shadow DOM elements?
-  // 
-
-  const resizables = Array.from(document.body.querySelectorAll('[resize]')) as HTMLElement[];
-  resizables.forEach((node) => updateHtmlElementResize(node));
-
-  // 
-  // Registers global mousemove and mouseup event listeners 
-  // to handle the resize. These listeners are inactive while
-  // the `resizing` flag is not set.
-  // 
-
-  function mousemoveHandler(e: MouseEvent): void {
-    if (!resizing) {
-      return;
-    }
-    moveTarget(e);
-  }
-
-  function mouseupHandler(e: MouseEvent): void {
-    if (!resizing) {
-      return;
-    }
-    resizing = false;
-    resizeInfo = undefined;
-    e.preventDefault();
-  }
-
-  document.body.addEventListener('mousemove', mousemoveHandler);
-  document.body.addEventListener('mouseup', mouseupHandler);
-}