@claspo/common 7.3.1-dev.2 → 7.3.1-dev.3

package/src/document/DocumentUtils.ts

@@ -1,194 +0,0 @@
-import {ClBaseComponentI, ClDocumentActionI, ClDocumentHandlerI, ClDocumentHandlerType} from './Document.interface';
-import {ComponentInsertType} from './ComponentInsertType';
-
-export interface IterableNodeI {
-  children?: IterableNodeI[];
-  [key: string]: any;
-}
-
-export default class DocumentUtils {
-
-  static removeNode(views: ClBaseComponentI[], path: number[]): ClBaseComponentI {
-    const parentPath = this.getParentPath(path);
-    const nodeIndex = path[path.length - 1];
-    const parent = this.getNodeByPath(views, parentPath);
-
-    if (parent && parent.children && parent.path) {
-      const removedNode = parent.children.splice(nodeIndex, 1)[0];
-      (removedNode as any).prevPath = path;
-      (removedNode as any).path = null;
-      DocumentUtils.reIndex(parent, parent.path);
-      return removedNode;
-    } else {
-      const removedNode = views.splice(nodeIndex, 1)[0];
-      (removedNode as any).prevPath = path;
-      (removedNode as any).path = null;
-      views.forEach((view, index) => {
-        view.path = [index];
-        DocumentUtils.reIndex(view, view.path);
-      });
-      return removedNode;
-
-    }
-  }
-
-  static insertNode(node: ClBaseComponentI, targetPath: number[], views: ClBaseComponentI[], insertPosition: string): ClBaseComponentI {
-    const toPath = DocumentUtils.getPathToInsert(targetPath, insertPosition, views, node);
-    const parentPath = insertPosition === ComponentInsertType.INSIDE
-      ? targetPath
-      : this.getParentPath(toPath);
-    const parentNode = this.getNodeByPath(views, parentPath);
-
-    const nodeIndex = toPath[toPath.length - 1];
-
-    if (parentNode && parentNode.children && parentNode.path) {
-      parentNode.children.splice(nodeIndex, 0, node);
-      DocumentUtils.reIndex(parentNode, parentNode.path);
-      return node;
-    } else {
-      views.splice(nodeIndex, 0, node);
-      views.forEach((view, index) => {
-        view.path = [index];
-        DocumentUtils.reIndex(view, view.path);
-      });
-      return node;
-    }
-
-  }
-
-  static moveNode(views: ClBaseComponentI[], fromPath: number[], targetPath: number[], insertType: string): void {
-    const targetNode = DocumentUtils.getNodeByPath(views, targetPath);
-
-    if (!targetNode) {
-      return;
-    }
-
-    const removedComponent = DocumentUtils.removeNode(views, fromPath);
-    const foundNode = DocumentUtils.getNodeById(views, targetNode.id);
-
-    if (foundNode && foundNode.path) {
-      DocumentUtils.insertNode(removedComponent, foundNode.path, views, insertType);
-    }
-  }
-
-  static iterateDepthFirst<T extends IterableNodeI>(node: T, callback: (node: T) => void): void {
-    return iterateDepthFirst(node, callback);
-  }
-
-  static reIndex(node: ClBaseComponentI, nodePath: number[]): void {
-    node.path = nodePath;
-    if (node.children) {
-      node.children.forEach((n: ClBaseComponentI, i: number) => {
-        DocumentUtils.reIndex(n, nodePath.concat(i));
-      });
-    }
-  }
-
-  static getRelativePath(path: number[]): number[] {
-    return path.slice(1, path.length);
-  }
-
-  static getParentPath(path: number[]): number[] {
-    return path.slice(0, -1);
-  }
-
-  static getNodeByPath(components: ClBaseComponentI[], path: number[]): ClBaseComponentI | null {
-    let current: ClBaseComponentI[] = components;
-    for (let i = 0; i < path.length; i++) {
-      if (i === path.length - 1) {
-        return current[path[i]] || null;
-      } else {
-        if (current[path[i]] && current[path[i]].children) {
-          current = current[path[i]].children as ClBaseComponentI[];
-        } else {
-          return null;
-        }
-      }
-    }
-    return null;
-  }
-
-  static getNodeById(componentsTree: ClBaseComponentI[], id: string): ClBaseComponentI | null {
-    let targetComponent: ClBaseComponentI | null = null;
-    for (let i = 0; i < componentsTree.length; i++) {
-      const component = componentsTree[i];
-      if (targetComponent) {
-        break;
-      }
-      if (component.id === id) {
-        targetComponent = component;
-        break;
-      } else {
-        if (component.children && component.children.length) {
-          targetComponent = this.getNodeById(component.children, id);
-        }
-      }
-    }
-
-    return targetComponent;
-  }
-
-  static getPathToInsert(targetPath: number[], insertPosition: string, views: ClBaseComponentI[], node?: ClBaseComponentI): number[] {
-    let toPath: number[];
-
-    const targetIndex = targetPath[targetPath.length - 1];
-    switch (insertPosition) {
-      case ComponentInsertType.BEFORE:
-        toPath = targetPath;
-        break;
-      case ComponentInsertType.AFTER: {
-        toPath = targetPath.slice();
-        toPath[targetPath.length - 1] = targetIndex + 1;
-        break;
-      }
-      case ComponentInsertType.INSIDE: {
-        const targetNode = DocumentUtils.getNodeByPath(views, targetPath);
-        const childrenLength = targetNode?.children?.length ?? 0;
-        toPath = targetPath.concat([childrenLength]);
-        break;
-      }
-      case ComponentInsertType.INSTEAD: {
-        const prevPath = (node as any)?.prevPath;
-        const isBefore = prevPath?.at(-1) <= targetIndex;
-        toPath = isBefore
-          ? [...targetPath.slice(0, -1), targetIndex + 1]
-          : targetPath;
-        break;
-      }
-      default:
-        toPath = targetPath;
-        break;
-    }
-
-    return toPath;
-
-  }
-
-  static getNodeOnClickData(node: ClBaseComponentI): { actions: ClDocumentActionI[]; npsViewIds: string[] } {
-    let actions: ClDocumentActionI[] = [];
-    let npsViewIdsMap: Record<string, string> = {};
-    DocumentUtils.iterateDepthFirst(node, (model: ClBaseComponentI) => {
-      const clickActions = model.props?.handlers?.find((h: ClDocumentHandlerI) => h.type === ClDocumentHandlerType.CLICK)?.actions;
-      if (clickActions?.length) {
-        actions = [...actions, ...clickActions];
-      }
-      Object.keys(model.props?.content || {})
-        .filter(k => ['detractor', 'passive', 'promoter'].includes(k))
-        .map(k => (model.props?.content || {})[k] || null)
-        .filter(v => v)
-        .forEach(v => npsViewIdsMap[v] = v);
-    });
-
-    return {
-      actions,
-      npsViewIds: Object.keys(npsViewIdsMap),
-    };
-  }
-}
-
-export function iterateDepthFirst<T extends IterableNodeI>(node: T, callback: (node: T) => void): void {
-  if (node.children) {
-    node.children.forEach((ch) => iterateDepthFirst(ch as T, callback));
-  }
-  callback(node);
-}

package/src/document/hidden-fields.interface.ts

@@ -1,54 +0,0 @@
-export enum SourceType {
-  STATIC = 'STATIC',
-  DATA_LAYER = 'DATA_LAYER',
-  URL_QUERY_PARAMS = 'URL_QUERY_PARAMS',
-  JS_API_VARIABLE = 'JS_API_VARIABLE',
-  COOKIE = 'COOKIE',
-  LOCAL_STORAGE = 'LOCAL_STORAGE',
-}
-
-export interface HiddenFieldSourceArgumentI {
-  name: string;
-  value: string;
-  type?: string;
-  placeholder?: string;
-  [key: string]: any;
-}
-
-export interface StaticSourceConfigI {
-  value: string;
-  [key: string]: any;
-}
-
-export interface HiddenFieldArgumentsConfigI {
-  arguments?: HiddenFieldSourceArgumentI[];
-  fallbackValue?: string;
-  [key: string]: any;
-}
-
-export interface HiddenFieldConfigBySource {
-  [SourceType.STATIC]: StaticSourceConfigI;
-  [SourceType.DATA_LAYER]: HiddenFieldArgumentsConfigI;
-  [SourceType.URL_QUERY_PARAMS]: HiddenFieldArgumentsConfigI;
-  [SourceType.JS_API_VARIABLE]: HiddenFieldArgumentsConfigI;
-  [SourceType.COOKIE]: HiddenFieldArgumentsConfigI;
-  [SourceType.LOCAL_STORAGE]: HiddenFieldArgumentsConfigI;
-}
-
-export interface HiddenFieldSharedBaseI {
-  id: string;
-  name: string;
-  label: string;
-  options: [];
-  type: 'HIDDEN';
-}
-
-export type HiddenFieldSharedI<S extends SourceType = SourceType> =
-  HiddenFieldSharedBaseI & {
-    sourceType: S;
-    config: HiddenFieldConfigBySource[S];
-  };
-
-export type AnyHiddenFieldSharedI = {
-  [S in SourceType]: HiddenFieldSharedI<S>;
-}[SourceType];

package/src/dom/ViewportSize.ts

@@ -1,61 +0,0 @@
-/**
- * Represents viewport dimensions.
- */
-export interface ViewportSizeI {
-  /** Viewport width in pixels */
-  width: number;
-  /** Viewport height in pixels */
-  height: number;
-}
-
-/**
- * Utility class for measuring viewport dimensions.
- * Provides static methods to get viewport size, width, height, and scrollbar width.
- */
-export default class ViewportSize {
-
-  /**
-   * Returns the current viewport size (width and height).
-   * @param htmlDocumentObject - Optional document object (defaults to window.document)
-   * @returns Object containing viewport width and height
-   */
-  static size(htmlDocumentObject?: Document): ViewportSizeI {
-    return {
-      width: this.width(htmlDocumentObject),
-      height: this.height(htmlDocumentObject),
-    }
-  }
-
-  /**
-   * Returns the viewport width in pixels.
-   * Uses the maximum of clientWidth and innerWidth for cross-browser compatibility.
-   * @param htmlDocumentObject - Optional document object (defaults to window.document)
-   * @returns Viewport width in pixels
-   */
-  static width(htmlDocumentObject?: Document): number {
-    const doc = htmlDocumentObject || document;
-    return Math.max(doc.documentElement.clientWidth, doc.defaultView?.innerWidth || 0);
-  }
-
-  /**
-   * Returns the viewport height in pixels.
-   * Uses the maximum of clientHeight and innerHeight for cross-browser compatibility.
-   * @param htmlDocumentObject - Optional document object (defaults to window.document)
-   * @returns Viewport height in pixels
-   */
-  static height(htmlDocumentObject?: Document): number {
-    const doc = htmlDocumentObject || document;
-    return Math.max(doc.documentElement.clientHeight, doc.defaultView?.innerHeight || 0);
-  }
-
-  /**
-   * Returns the scrollbar width in pixels.
-   * Calculated as the difference between innerWidth and clientWidth.
-   * @param htmlDocumentObject - Optional document object (defaults to window.document)
-   * @returns Scrollbar width in pixels (0 if no scrollbar)
-   */
-  static scrollbarWidth(htmlDocumentObject?: Document): number {
-    const doc = htmlDocumentObject || document;
-    return (doc.defaultView?.innerWidth || 0) - doc.documentElement.clientWidth;
-  }
-}

package/src/dom/copyToClipboard.ts

@@ -1,17 +0,0 @@
-/**
- * Copies text to the system clipboard using the Clipboard API.
- * Trims whitespace and replaces `<br>` tags with spaces.
- * @param textToCopy - The text to copy to the clipboard
- * @returns A promise that resolves when the text is copied, or rejects if clipboard is unavailable
- * @example
- * copyToClipboard('Hello World').then(() => console.log('Copied!'));
- */
-export default function copyToClipboard(textToCopy: string): Promise<void> {
-  if (!navigator.clipboard?.writeText) {
-    return Promise.reject();
-  }
-
-  return navigator.clipboard.writeText(
-    String(textToCopy).trim().replace('<br>', ' ')
-  );
-}

package/src/dom/getMostNestedNode.ts

@@ -1,9 +0,0 @@
-export default function getMostNestedNode(containerElement: Element): Element {
-  let mostNestedNode: Element = containerElement;
-
-  while (mostNestedNode.firstElementChild) {
-    mostNestedNode = mostNestedNode.firstElementChild;
-  }
-
-  return mostNestedNode;
-}

package/src/dom/insertHtmlIntoElement.ts

@@ -1,36 +0,0 @@
-import sanitizeHTML from './sanitizeHTML';
-
-/**
- * Parameters for inserting HTML into an element.
- */
-export interface InsertHtmlIntoElementParamsI {
-  /** The target DOM element to insert HTML into */
-  element: Element;
-  /** The HTML string to insert */
-  html: string;
-  /** If true, appends HTML to existing content; otherwise replaces it */
-  appendHtml?: boolean;
-}
-
-/**
- * Safely inserts HTML content into a DOM element after sanitizing it.
- * Can either replace existing content or append to it.
- * @param params - Configuration object with element, html, and optional appendHtml flag
- * @example
- * insertHtmlIntoElement({
- *   element: document.getElementById('container'),
- *   html: '<p>Hello</p>',
- *   appendHtml: true
- * });
- */
-export default function insertHtmlIntoElement(params: InsertHtmlIntoElementParamsI): void {
-  const {element, html, appendHtml} = params;
-
-  const sanitizedHTML = sanitizeHTML(html);
-
-  if (appendHtml) {
-    element.innerHTML += sanitizedHTML;
-  } else {
-    element.innerHTML = sanitizedHTML;
-  }
-}

package/src/dom/sanitizeHTML.test.ts

@@ -1,59 +0,0 @@
-import sanitizeHTML from './sanitizeHTML';
-import fs from 'fs';
-import path from 'path';
-
-/**
- * Test cases array format: [input, expected_output]
- * Each test case contains:
- * - input: The HTML/text string to sanitize (or null/undefined/non-string values)
- * - expected_output: The exact expected string result (strict equality check)
- * 
- * Test cases are loaded from sanitizeHTML-test-cases.json for consistency with Java version
- */
-
-// Load test cases from JSON file
-const jsonPath = path.join(__dirname, 'sanitizeHTML-test-cases.json');
-const testData = JSON.parse(fs.readFileSync(jsonPath, 'utf-8'));
-const testCases = testData.testCases;
-
-describe('sanitizeHTML - Array-based tests from JSON', () => {
-  it('should sanitize all test cases correctly', () => {
-    const failedTests: { index: number; input: string; expected: any; actual: string }[] = [];
-    
-    testCases.forEach(([input, expected], index) => {
-      const result = sanitizeHTML(input);
-      
-      // Strict equality check
-      if (result !== expected) {
-        failedTests.push({
-          index,
-          input: input === null ? 'null' : input === undefined ? 'undefined' : String(input),
-          expected,
-          actual: result
-        });
-      }
-    });
-    
-    // Report failed tests
-    if (failedTests.length > 0) {
-      console.log(`\n=== FAILED TEST CASES ${failedTests.length} ===\n`);
-      failedTests.forEach(test => {
-        console.log(`Test #${test.index}:`);
-        console.log(`Input:"${test.input}"`);
-        console.log(`Expected:"${test.expected}"`);
-        console.log(`Actual:"${test.actual}"\n`);
-      });
-      
-      console.log(`Total failed: ${failedTests.length} out of ${testCases.length} tests\n`);
-      
-      // Fail the test with summary
-      expect(failedTests).toHaveLength(0);
-    }
-  });
-  
-  // Keep one traditional test for better Jest output
-  it('should have all test cases loaded from JSON', () => {
-    expect(testCases.length).toBeGreaterThan(0);
-    console.log(`Loaded ${testCases.length} test cases from JSON`);
-  });
-});

package/src/dom/sanitizeHTML.ts

@@ -1,78 +0,0 @@
-/**
- * Sanitizes HTML content by removing potentially dangerous elements and attributes.
- * Removes script tags, style tags, event handlers, and javascript: URLs.
- * @param html - The HTML string to sanitize
- * @returns The sanitized HTML string safe for insertion into the DOM
- * @example
- * const safe = sanitizeHTML('<div onclick="alert(1)">Hello</div>');
- * // Returns: '<div>Hello</div>'
- */
-export default function sanitizeHTML(html: string): string {
-  // Handle null and undefined specifically
-  if (html === null || html === undefined) {
-    return '';
-  }
-
-  if (typeof html !== 'string') {
-    // Convert non-string values to string, including boolean false
-    return String(html);
-  }
-
-  // Handle empty string
-  if (html === '') {
-    return '';
-  }
-
-  // Improved HTML tag detection - must have valid tag name after <
-  // This avoids false positives on strings like "Price < 100" or "Banking &<>"
-  const htmlTagPattern = /<\/?([a-zA-Z][a-zA-Z0-9]*)\b[^>]*>/;
-  if (!htmlTagPattern.test(html)) {
-    return html;
-  }
-
-  const parser = new DOMParser();
-  const doc = parser.parseFromString(html, 'text/html');
-
-  const scriptsAndStyles = doc.querySelectorAll('script, style, link[rel="stylesheet"], meta[http-equiv]');
-  scriptsAndStyles.forEach(el => el.remove());
-
-  const elements = doc.querySelectorAll('*');
-  elements.forEach(element => {
-    const dangerousAttrs: string[] = [
-      'onclick', 'onload', 'onerror', 'onmouseover', 'onfocus', 'onblur',
-      'onkeyup', 'onkeydown', 'onchange', 'onsubmit', 'onmouseenter',
-      'onmouseleave', 'onmouseout', 'oncontextmenu', 'ondrag', 'ondrop'
-    ];
-
-    dangerousAttrs.forEach(attr => element.removeAttribute(attr));
-
-    Array.from(element.attributes).forEach(attr => {
-      if (attr.name.startsWith('on')) {
-        element.removeAttribute(attr.name);
-      }
-    });
-
-    if (element.tagName === 'A' || element.tagName === 'AREA') {
-      const href = element.getAttribute('href');
-      if (href && (href.startsWith('javascript:') || href.startsWith('data:'))) {
-        element.removeAttribute('href');
-      }
-    }
-
-    if (element.tagName === 'IMG' || element.tagName === 'IFRAME') {
-      const src = element.getAttribute('src');
-      if (src && (src.startsWith('javascript:') || src.startsWith('data:text/html'))) {
-        element.removeAttribute('src');
-      }
-    }
-
-    if (element.tagName === 'FORM') {
-      const action = element.getAttribute('action');
-      if (action && action.startsWith('javascript:')) {
-        element.removeAttribute('action');
-      }
-    }
-  });
-
-  return doc.body.innerHTML;
-}

package/src/element/BaseElementInViewportHandler.ts

@@ -1,41 +0,0 @@
-export default class BaseElementInViewportHandler {
-  observer: IntersectionObserver | null;
-  rootElement: Element;
-  oneTimeObserver: boolean;
-
-  constructor(rootElement: Element, oneTimeObserver: boolean) {
-    this.observer = null;
-    this.rootElement = rootElement;
-    this.oneTimeObserver = oneTimeObserver;
-  }
-
-  handle(visibleCallback: () => void, notVisibleCallback?: () => void): void {
-    const options = {
-      root: null,
-      rootMargin: '0px',
-      threshold: 0.1
-    };
-
-    this.observer = new IntersectionObserver((intersectionEntries) => {
-      const isIntersecting = !!intersectionEntries.find(entry => entry.isIntersecting);
-
-      if (!isIntersecting) {
-        if (notVisibleCallback && typeof notVisibleCallback === 'function') {
-          notVisibleCallback();
-        }
-
-        return;
-      }
-
-      visibleCallback();
-      if (this.oneTimeObserver) {
-        this.unsubscribe();
-      }
-    }, options);
-    this.observer.observe(this.rootElement);
-  }
-
-  unsubscribe(): void {
-    this.observer?.disconnect();
-  }
-}

package/src/element/CssVarsOperations.ts

@@ -1,37 +0,0 @@
-import {ClDocumentCssVarsI} from '../document/Document.interface';
-
-function forEachCssVarKey(cssVarsMap: ClDocumentCssVarsI, cb: (key: string) => void): void {
-  if (cssVarsMap && Object.keys(cssVarsMap)) {
-    Object
-      .keys(cssVarsMap)
-      .forEach(cb);
-  }
-}
-
-
-export default class CssVarsOperations {
-  static get(varName: string, element: HTMLElement): string {
-    return element.style.getPropertyValue(`--${varName}`);
-  }
-
-  static apply(cssVarsMap: ClDocumentCssVarsI = {}, element: HTMLElement): void {
-    forEachCssVarKey(cssVarsMap, (key: string) => {
-        const property = `--${key}`;
-        const value = cssVarsMap[key];
-        if (!element.style.getPropertyValue(property)) {
-          element.style.setProperty(property, value);
-        }
-      }
-    );
-  }
-
-  static override(cssVarsMap: ClDocumentCssVarsI = {}, element: HTMLElement): void {
-    forEachCssVarKey(cssVarsMap, (key: string) => {
-      const property = `--${key}`;
-      const value = cssVarsMap[key];
-      element.style.setProperty(property, value);
-    });
-  }
-}
-
-

package/src/element/ThemeCssVars.ts

@@ -1,28 +0,0 @@
-import { toCssVarToken } from "../theme/theme.utils";
-import CssVarsOperations from "./CssVarsOperations";
-
-export function prepareKeys(schema) {
-  const originalKeys = Object.keys(schema).reduce((acc, key) => {
-    acc[toCssVarToken(key)] = schema[key];
-    return acc;
-  }, {});
-
-  return originalKeys;
-}
-
-export default class ThemeCssVars extends CssVarsOperations {
-  static override(schema = {}, element) {
-    const cssVars = prepareKeys(schema);
-    super.override(cssVars, element);
-  }
-
-  static apply(schema = {}, element) {
-    const cssVars = prepareKeys(schema);
-    super.apply(cssVars, element);
-  }
-
-  static get(varName, element) {
-    const cssVarToken = toCssVarToken(varName);
-    return super.get(cssVarToken, element);
-  }
-}

package/src/element/recursiveFindParentNodeByAttribute.test.ts

@@ -1,63 +0,0 @@
-import recursiveFindParentNodeByAttribute from "./recursiveFindParentNodeByAttribute";
-
-
-describe('recursiveFindParentNodeByAttribute function', () => {
-  test('returns null if reference node does not have the specified attribute', () => {
-    const parentNode = document.createElement('div');
-
-    const result = recursiveFindParentNodeByAttribute(parentNode, 'attribute', 'value');
-
-    expect(result).toBeNull();
-  });
-
-  test('returns null if reference node is null', () => {
-    const result = recursiveFindParentNodeByAttribute(null, 'attribute', 'value');
-    expect(result).toBeNull();
-  });
-
-  test('returns the reference node if it has the specified attribute', () => {
-    const parentNode = document.createElement('div');
-    parentNode.setAttribute('attribute', 'value');
-
-    const result = recursiveFindParentNodeByAttribute(parentNode, 'attribute', 'value');
-
-    expect(result).toEqual(parentNode);
-  });
-
-  test('returns the parent node with the specified attribute inside nested shadow DOM', () => {
-    // given
-    const parentNode = document.createElement('div');
-    const shadowChild1 = document.createElement('div');
-    const shadowChild2 = document.createElement('div');
-
-    parentNode.id = '0';
-    shadowChild1.id = '1';
-    shadowChild2.id = '2';
-
-    parentNode.setAttribute('attribute', 'value');
-    shadowChild1.setAttribute('attribute', 'value');
-    shadowChild2.setAttribute('attribute', 'value');
-
-    const shadowRoot1 = parentNode.attachShadow({ mode: 'open' });
-    const shadowRoot2 = shadowChild1.attachShadow({ mode: 'open' });
-
-    shadowRoot1.appendChild(shadowChild1);
-    shadowRoot2.appendChild(shadowChild2);
-
-    // when
-    const result = recursiveFindParentNodeByAttribute(shadowChild2, 'attribute', 'value');
-
-    // then
-    expect(result!.id).toEqual('2');
-  });
-
-  test('returns null if no parent node has the specified attribute', () => {
-    const parentNode = document.createElement('div');
-    const childNode = document.createElement('div');
-    parentNode.appendChild(childNode);
-
-    const result = recursiveFindParentNodeByAttribute(childNode, 'attribute', 'value');
-
-    expect(result).toBeNull();
-  });
-});