bromcom-ui 2.7.23-0 → 2.7.23-3

package/dist/collection/templates/icon-template.js

@@ -1,24 +0,0 @@
-/*!
- * Built with Stencil
- * Copyright (c) Bromcom.
- */
-import { h } from '@stencil/core';
-import cs from 'classnames';
-export const IconTemplate = ({ icon, hidden }) => {
-  const replaceIcon = (icon) => {
-    if (icon && icon.indexOf('fa-') > -1) {
-      const split = icon.split(" ");
-      let prefix = split[0].replace(/^fa/g, "bcm-fa");
-      let iconName = split[1].replace(/^fa-/g, "bcm-fa-");
-      if (split[2]) {
-        iconName += " " + split[2].replace(/^fa-/g, "bcm-fa-");
-      }
-      return prefix + " " + iconName;
-    }
-    return icon;
-  };
-  const hostClasses = cs('bcm-icon', replaceIcon(icon), {
-    hidden,
-  });
-  return (h("span", { class: hostClasses }));
-};

package/dist/collection/templates/info-footer-template.js

@@ -1,16 +0,0 @@
-/*!
- * Built with Stencil
- * Copyright (c) Bromcom.
- */
-import { h } from '@stencil/core';
-import { pluralize } from '../utils/utils';
-export const InfoFooterTemplate = ({ selected, total, found, multiple, variableText }) => {
-  total = total || 0;
-  variableText = variableText ? pluralize(variableText, total) : 'items';
-  return (h("footer", { class: "bcm-info-footer" },
-    h("bcm-text", { scale: "size-1", color: "grey-8" },
-      (multiple && selected > 0) && ` ( ${selected} selected ) `,
-      ` Total ${total} `,
-      found != null && ` / ${found} `,
-      ` ${variableText} found. `)));
-};

package/dist/collection/templates/input-template.js

@@ -1,81 +0,0 @@
-/*!
- * Built with Stencil
- * Copyright (c) Bromcom.
- */
-import { h } from '@stencil/core';
-import { defaultIcons } from "../components/molecules/input/types";
-import Bcm from '../models/bcm';
-import cs from 'classnames';
-import snq from "snq";
-export const InputTemplate = ({ elementType, 
-//textarea
-rows, 
-//props
-id, internalId, type, placeholder, value, size, pattern, 
-//,
-unit, unitPrefix, maxLength, 
-//boolean
-disabled, clearable, focused, readonly, isPasswordVisible, passwordToggle, noDefaultIcon, inValid, captionType, resize, autocomplete, _suffix, _prefix, 
-// custom functions
-changePasswordVisibility, handleClear, steps, 
-//event functions
-ref, handleBlur, handleFocus, handleInput, handleChange }) => {
-  const ElementTagType = Bcm.HtmlElementType[elementType] || Bcm.HtmlElementType.input;
-  type = (type === 'password' && isPasswordVisible) ? 'text' : type;
-  value = snq(() => value, '');
-  type = (unit === null || unit === void 0 ? void 0 : unit.length) > 0 && !focused ? 'text' : type;
-  value = !focused ? value + (value && (unit === null || unit === void 0 ? void 0 : unit.length) > 0 ? ' ' + unit : '') : value;
-  const templateHandleFocus = (e) => {
-    e.target.parentElement.classList.add('focused');
-    handleFocus(e);
-  };
-  const templateHandleBlur = (e) => {
-    e.target.parentElement.classList.remove('focused');
-    handleBlur(e);
-  };
-  var containerClass = cs('bcm-input__container', ElementTagType === Bcm.HtmlElementType.textarea && cs('bcm-input__textarea', 'textarea-size-' + Bcm.Size[size], 'resize-' + resize, 'textarea-' + size), ElementTagType === Bcm.HtmlElementType.input && cs('input-size-' + Bcm.Size[size]), {
-    'focused': focused,
-    'clearable': clearable,
-    disabled,
-    readonly,
-    'invalid': inValid,
-    'unit': (unit === null || unit === void 0 ? void 0 : unit.length) > 0,
-    // 'empty': value?.length < 1,
-    'error': captionType === 'error'
-  });
-  const caretContainer = cs('caret-container', {
-    'unit': (unit === null || unit === void 0 ? void 0 : unit.length) > 0,
-    'disabled': disabled || readonly || inValid
-  });
-  const inputClass = 'bcm-input__container--' + size;
-  const unitClass = cs(inputClass, 'unit-prefix');
-  return (h("div", { class: containerClass },
-    h("span", { hidden: true },
-      h("slot", null)),
-    h("span", { class: "input-prefix" },
-      h("slot", { name: "prefix" }),
-      _prefix && _prefix.length > 0 &&
-        h("span", { innerHTML: _prefix }),
-      unitPrefix && h("span", { class: unitClass }, unitPrefix)),
-    h(ElementTagType, Object.assign({ tabindex: "1", id: id, "bcm-internal-id": internalId, class: 'bcm-input-element ' + inputClass }, ((ElementTagType === Bcm.HtmlElementType.input && {
-      type,
-      autocomplete: autocomplete ? 'on' : 'off',
-      pattern,
-    })), ((ElementTagType === Bcm.HtmlElementType.textarea && { rows: rows, resize: resize })), { value: value, maxLength: maxLength, placeholder: placeholder, disabled: disabled, readOnly: readonly, ref: (el) => ref(el), onBlur: (e) => templateHandleBlur(e), onFocus: (e) => templateHandleFocus(e), onInput: (e) => handleInput(e), onChange: (e) => handleChange(e) })),
-    h("span", { class: "input-suffix-content" }, (clearable && !disabled) &&
-      h("span", { class: "input-suffix input-suffix-button input-clear-button", onClick: (e) => handleClear(e) },
-        h("bcm-icon", { icon: "far fa-times" }))),
-    h("span", { class: "input-suffix-content" }, ((type === 'password' || type === 'text') && passwordToggle) && (h("span", { class: "input-suffix input-suffix-button", onClick: () => changePasswordVisibility() },
-      h("bcm-icon", { icon: isPasswordVisible ? "far fa-eye-slash" : "far fa-eye" })))),
-    h("span", { class: "input-suffix-content" }, (Object.keys(defaultIcons).includes(type) && !noDefaultIcon) && (h("span", { class: "input-suffix" },
-      h("bcm-icon", { icon: defaultIcons[type] })))),
-    h("span", { class: "input-suffix-content" }, type === 'number' && (h("div", { class: caretContainer },
-      h("span", { class: "bcm-input-caret", onClick: () => steps('up') },
-        h("bcm-icon", { icon: "fas fa-caret-up" })),
-      h("span", { class: "bcm-input-caret", onClick: () => steps('down') },
-        h("bcm-icon", { icon: "fas fa-caret-down" }))))),
-    h("span", { class: "input-suffix-content" }, type !== 'number' && (h("span", { class: "input-suffix" },
-      h("slot", { name: "suffix" }),
-      _suffix && _suffix.length > 0 &&
-        h("span", { innerHTML: _suffix }))))));
-};

package/dist/collection/templates/label-template.js

@@ -1,18 +0,0 @@
-/*!
- * Built with Stencil
- * Copyright (c) Bromcom.
- */
-import { h } from '@stencil/core';
-import cs from 'classnames';
-import Bcm from '../models/bcm';
-import { SlotTemplate } from './slot-template';
-export const LabelTemplate = ({ required, value, size, form, htmlFor, type }) => {
-  size = size || "medium";
-  type = type || Bcm.Status.default;
-  const labelClasses = cs('bcm-label__text', 'bcm-label__text-' + type, 'bcm-label__size-' + size);
-  return (h("label", { form: form, htmlFor: htmlFor, class: labelClasses },
-    " ",
-    h(SlotTemplate, { value: value }),
-    " ",
-    required && ('*')));
-};

package/dist/collection/templates/list-item-template.js

@@ -1,58 +0,0 @@
-/*!
- * Built with Stencil
- * Copyright (c) Bromcom.
- */
-import { h } from '@stencil/core';
-import cs from 'classnames';
-import { StringHelper } from '../helper/string-helper';
-import { CheckboxTemplate } from './checkbox-template';
-export const ListItemTemplate = ({ item, treeview, highlight, checkboxes, size, selectedItem, openGroup, checkedItem, focusItem, searchIsOnlyChilds }) => {
-  const isHaveChildren = item.items && item.items.length > 0;
-  var text = StringHelper.htmlEntities(item.text);
-  let intersection = [];
-  if (highlight && StringHelper.slugify(text).includes(StringHelper.slugify(highlight))) {
-    if (!searchIsOnlyChilds || (searchIsOnlyChilds && (!isHaveChildren || (!treeview && item.type != "group")))) {
-      text = StringHelper.highlight(text, highlight);
-    }
-  }
-  if (item.type != 'group' && item.template) {
-    const match = item.template
-      .replace(/\s/g, '')
-      .match(/\{{[^}}]+\}/g)
-      .map(x => x.replace(/[{}]/g, ''));
-    const keys = Object.keys(item.itemObject);
-    intersection = match.filter(x => keys.includes(x));
-  }
-  text = item.isHtmlContent ? item.isHtmlContent : item.template && intersection.length > 0 ? StringHelper.templateParser(item.template, Object.assign(Object.assign({}, item.itemObject), { text })) : text;
-  const unClickable = !treeview && item.type == "group" && !item.clickable;
-  const disabled = item.disabled;
-  const readonly = item.readonly;
-  const itemClick = (event) => {
-    let path = event.path || event.composedPath();
-    if (path.filter(x => x.attributes && x.attributes.getNamedItem("unlinked"))[0]) {
-      return;
-    }
-    if (readonly) {
-      collapseClick();
-    }
-    !unClickable && !disabled && !readonly && (checkboxes ? checkedItem(item.id) : selectedItem(item.id));
-  };
-  const collapseClick = () => {
-    item.open = item.isSearching;
-    openGroup(item.id);
-  };
-  return (h("div", { id: item.id, hidden: item.hidden, tabindex: "-1", "on-focus": e => !unClickable && !disabled && focusItem(e), class: cs('bcm-list__item', 
-    // size === 'large' ? 'size-3' : 'size-2',
-    'bcm-list__item-' + size, {
-      'bcm-list__item--group': !treeview && item.type == 'group',
-      'bcm-list__item--readonly': readonly,
-    }) },
-    h("div", { class: cs('bcm-list__item-content', !checkboxes && item.selected && 'selected', { disabled: disabled }) },
-      treeview && (h("div", { class: "bcm-list__item-content-collapse-icon", onClick: () => collapseClick() }, isHaveChildren && h("bcm-icon", { icon: cs('fas fa-caret-' + (item.isSearching || item.open ? 'down' : 'right')) }))),
-      h("div", { class: cs('bcm-list__item-content-text', { treeview }), onClick: (e) => itemClick(e) },
-        checkboxes && (treeview || (!treeview && item.type != 'group')) && (h("div", { class: "bcm-list__item-content-text-checkbox" },
-          h(CheckboxTemplate, { indeterminate: item.indeterminate, checked: item.checked }))),
-        h("span", Object.assign({ class: "bcm-list__item-content-text-inner" }, (item.title && { "title": item.title }), { innerHTML: text })))),
-    (treeview || !treeview && item.type == "group") && isHaveChildren && (h("div", { class: "bcm-list__item-childs" }, (item.isSearching || item.open || (!treeview && item.type == "group")) &&
-      item.items.map((item) => (h(ListItemTemplate, { highlight: highlight, item: item, searchIsOnlyChilds: searchIsOnlyChilds, treeview: treeview, checkboxes: checkboxes, size: size, selectedItem: selectedItem, checkedItem: checkedItem, openGroup: parentId => openGroup(parentId), focusItem: itemId => focusItem(itemId) })))))));
-};

package/dist/collection/templates/list-template.js

@@ -1,22 +0,0 @@
-/*!
- * Built with Stencil
- * Copyright (c) Bromcom.
- */
-import { h } from '@stencil/core';
-import { InfoFooterTemplate } from './info-footer-template';
-import { ListItemTemplate } from './list-item-template';
-export const ListTemplate = ({ highlight, selectAllItem, bcmListContainer, treeview, checkboxes, checkAll, infoFooter, value, totalData, searchFound, variableText, _id, data, width, height, size, searchPlaceholder, selectedItem, openGroup, checkedItem, onScrollEvent, focusItem, items, searchable, searchIsOnlyChilds }) => {
-  const showSelectAll = !(treeview && searchFound > 0) && !(searchFound > 0);
-  return (h("div", { id: `bcm-list-${_id}`, class: bcmListContainer, style: { '--height': height, '--width': width } },
-    data && searchable && (h("section", { class: "bcm-list__container-search" },
-      h("bcm-search-2", { size: size, id: `bcm-list-${_id}-search`, data: data, clearable: true, placeholder: searchPlaceholder, searchIsOnlyChilds: searchIsOnlyChilds }))),
-    h("main", { onScroll: (e) => onScrollEvent(e), class: "scrolling" },
-      checkAll && searchFound != 0 && items && items.length > 0 && checkboxes && showSelectAll && (h("section", { class: "bcm-list__container-select-all" },
-        h(ListItemTemplate, { size: size, item: selectAllItem, treeview: false, checkboxes: true, selectedItem: (itemId) => selectedItem(itemId), checkedItem: (itemId) => checkedItem(itemId), openGroup: (parentId) => openGroup(parentId), focusItem: (itemId) => focusItem(itemId) }))),
-      items.map((item) => (h(ListItemTemplate, { highlight: highlight, size: size, item: item, searchIsOnlyChilds: searchIsOnlyChilds, treeview: treeview, checkboxes: checkboxes, selectedItem: (itemId) => selectedItem(itemId), checkedItem: (itemId) => checkedItem(itemId), openGroup: (parentId) => openGroup(parentId), focusItem: (itemId) => focusItem(itemId) }))),
-      ((!items || items.length === 0) && searchFound != 0) && (h("section", { class: "bcm-list__container-no-data" },
-        h("bcm-empty", { size: "small", text: "No Data" }))),
-      searchFound == 0 && (h("section", { class: "bcm-list__container-no-data" },
-        h("bcm-empty", { size: "small", text: "No Data Found" })))),
-    infoFooter && data && data.length > 0 && (h(InfoFooterTemplate, { selected: value === null || value === void 0 ? void 0 : value.length, total: totalData, found: searchFound, multiple: checkboxes, variableText: variableText }))));
-};

package/dist/collection/templates/slot-template.js

@@ -1,10 +0,0 @@
-/*!
- * Built with Stencil
- * Copyright (c) Bromcom.
- */
-import { h } from '@stencil/core';
-import { StringHelper } from '../helper/string-helper';
-export const SlotTemplate = ({ value, className, name }) => {
-  return StringHelper.isNullOrEmpty(value) ? h("span", { class: className },
-    h("slot", Object.assign({}, (name && { name: name })))) : h("span", { class: className, innerHTML: value });
-};

package/dist/collection/templates/step-template.js

@@ -1,26 +0,0 @@
-/*!
- * Built with Stencil
- * Copyright (c) Bromcom.
- */
-import { h } from '@stencil/core';
-import cs from 'classnames';
-export const StepperHeaderTemplate = ({ title, description, status, valid, index, loading, active, stepChange, statusIcon, icon, disabled, headerHidden, }) => {
-  const classes = cs('bcm-stepper__header-item', `bcm-stepper__header-item--${status}`, {
-    'bcm-stepper__header-item--active': active,
-    'bcm-stepper__header-item--valid': valid,
-    'bcm-stepper__header-item--invalid': !valid,
-    'bcm-stepper__header-item--disabled': disabled,
-    'hidden': headerHidden,
-  });
-  const defaultIcons = {
-    success: 'fal fa-check',
-    warning: 'fal fa-exclamation-triangle',
-    error: 'fal fa-times',
-  };
-  const customIcon = (icon || (statusIcon && defaultIcons[status])) && h("bcm-icon", { icon: icon ? icon : defaultIcons[status] });
-  return (h("div", { class: classes },
-    h("div", { class: "bcm-stepper__header-item--container", onClick: () => !disabled && stepChange(index) },
-      h("div", { class: "bcm-stepper__header-item-icon size-3" }, loading ? h("bcm-icon", { icon: "far fa-spinner-third fa-spin" }) : customIcon || index),
-      h("div", { class: "bcm-stepper__header-item-title size-2" }, title),
-      h("div", { class: "bcm-stepper__header-item-description size-1" }, description))));
-};

package/dist/collection/templates/tag-template.js

@@ -1,45 +0,0 @@
-/*!
- * Built with Stencil
- * Copyright (c) Bromcom.
- */
-import { h } from '@stencil/core';
-import Bcm from '../models/bcm';
-import cs from 'classnames';
-import { NumberHelper } from '../helper/number-helper';
-import { extractColor } from '../utils/utils';
-import { ColorPalette } from '../global/variables/colors';
-import { ColorProps } from '../components/atoms/tag/types';
-export const TagTemplate = ({ _id, color, customStyle, size, checked, hidden, value, type, onDismiss, onSelect }) => {
-  !size && (size = Bcm.FontSize['size-1']);
-  const getColor = (color) => {
-    if ((type === Bcm.TagType.basic || type == Bcm.TagType.dismissable) && ColorProps[color])
-      return {
-        color: extractColor(ColorPalette, ColorProps[color] + '-6'),
-        borderColor: extractColor(ColorPalette, ColorProps[color] + '-3'),
-        backgroundColor: extractColor(ColorPalette, ColorProps[color] + '-1')
-      };
-  };
-  const getSize = (size, returnNumber = false) => {
-    if (NumberHelper.isNumber(size)) {
-      size = Bcm.FontSize["size-" + size] || Bcm.FontSize["size-4"];
-    }
-    if (returnNumber) {
-      return +(Bcm.FontSizeValue[size] || Bcm.FontSizeValue['size-4']) + 2;
-    }
-    return size;
-  };
-  const classes = cs(getSize(size), 'bcm-tag__content', type);
-  const hostClasses = cs('bcm-tag', {
-    hidden
-  });
-  return (h("div", { id: _id, class: cs(hostClasses, { checked }) },
-    h("span", { hidden: true },
-      h("slot", null)),
-    h("span", { class: classes, style: getColor(color), onClick: (e) => onSelect(e) },
-      type === Bcm.TagType.add && (h("span", { class: "left" },
-        h("bcm-icon", { icon: "far fa-plus" }))),
-      type === Bcm.TagType.checkable && h("input", { type: "checkbox", checked: checked }),
-      h("span", { class: "value", style: customStyle }, value),
-      type === Bcm.TagType.dismissable && (h("span", { class: "right close-button", onClick: (e) => onDismiss(e) },
-        h("bcm-icon", { icon: "fal fa-times" }))))));
-};

package/dist/collection/types/index.js

@@ -1,5 +0,0 @@
-/*!
- * Built with Stencil
- * Copyright (c) Bromcom.
- */
-export {};

package/dist/collection/utils/element-dragger.js

@@ -1,274 +0,0 @@
-/*!
- * Built with Stencil
- * Copyright (c) Bromcom.
- */
-import { getTransform } from './utils';
-/**
- * Enums
- */
-export var DragDirections;
-(function (DragDirections) {
-  DragDirections["x"] = "x";
-  DragDirections["y"] = "y";
-  DragDirections["both"] = "both";
-})(DragDirections || (DragDirections = {}));
-/**
- * @Class BcmDragger
- * @desc -
- */
-export class ElementDragger {
-  constructor({ target, trigger, limit, center, direction = DragDirections.both, snapOnMouseDown = false, useTransform = false }) {
-    this.drag = {
-      x: 0,
-      y: 0
-    };
-    this.offset = {
-      left: 0,
-      top: 0
-    };
-    this.events = {
-      end: [],
-      drag: []
-    };
-    this.active = false;
-    this.anim = false;
-    this.busy = false;
-    this.target = target;
-    this.trigger = trigger || target;
-    this.direction = direction;
-    this.limit = limit;
-    this.useTransform = useTransform;
-    this.snapOnMouseDown = snapOnMouseDown;
-    this.center = center;
-    this.container = this.findRelativeContainer();
-    // Get trigger offset initially
-    // #
-    this.offset = {
-      top: this.useTransform
-        ? getTransform(target).y
-        : target.offsetTop,
-      left: this.useTransform
-        ? getTransform(target).x
-        : target.offsetLeft
-    };
-    this.attachEvents();
-  }
-  /**
-   * @desc
-   */
-  attachEvents() {
-    /**
-     * Mouse Event: move -> [window]
-     */
-    window.addEventListener('mousemove', (_event) => this.windowMove(_event));
-    /**
-     * Mouse Event: move -> [window]
-     */
-    window.addEventListener('mouseup', (_event) => this.windowUp());
-    /**
-     * Mouse Event: down -> [BcmDragger.trigger]
-     */
-    this.trigger.addEventListener('mousedown', (_event) => this.triggerDown(_event));
-  }
-  /**
-   * @desc
-   * @param element
-   * @param property
-   */
-  computedStyle(element, property) {
-    return window.getComputedStyle(element, null).getPropertyValue(property);
-  }
-  /**
-   * @desc
-   * -
-   */
-  findRelativeContainer() {
-    const { target } = this;
-    const elementNode = Node.ELEMENT_NODE;
-    let currentParent = target.parentNode;
-    while (currentParent && currentParent.nodeType === elementNode) {
-      const match = ['absolute', 'relative'].includes(this.computedStyle(currentParent, 'position'));
-      if (match)
-        return currentParent;
-      currentParent = currentParent.parentNode;
-    }
-    return null;
-  }
-  /**
-   * @desc
-   * @param event
-   */
-  windowMove(event) {
-    if (!this.active)
-      return;
-    const { limit } = this;
-    const { center: { x: centerX, y: centerY } = { x: 0, y: 0 }, } = this;
-    let x = event.pageX - this.drag.x - centerX;
-    let y = event.pageY - this.drag.y - centerY;
-    this.busy = true;
-    // Check limit boundaries
-    // #
-    const [xMax, xMin, yMax, yMin] = [
-      limit && limit.x && limit.x.max - centerX,
-      limit && limit.x && limit.x.min - centerX,
-      limit && limit.y && limit.y.max - centerY,
-      limit && limit.y && limit.y.min - centerY
-    ];
-    if ((xMax || xMax === 0) && x > xMax) {
-      x = xMax;
-    }
-    if ((xMin || xMin === 0) && x < xMin) {
-      x = xMin;
-    }
-    if ((yMax || yMax === 0) && y > yMax) {
-      y = yMax;
-    }
-    if ((yMin || yMin === 0) && y < yMin) {
-      y = yMin;
-    }
-    this.offset = {
-      top: y,
-      left: x
-    };
-    this.removeTransition();
-    this.move();
-  }
-  /**
-   * @desc
-   */
-  windowUp() {
-    if (!this.active)
-      return;
-    this.triggerEvent('end', this.getCurrentPosition());
-    this.animTimeout = setTimeout(() => {
-      clearTimeout(this.animTimeout);
-      this.busy = false;
-    }, 210);
-    this.active = false;
-  }
-  /**
-   * @desc
-   * @param event
-   */
-  triggerDown(event) {
-    this.active = true;
-    if (this.snapOnMouseDown) {
-      this.offset.left = event.offsetX;
-      this.offset.top = event.offsetY;
-      this.move();
-    }
-    this.drag.x = event.pageX - this.offset.left;
-    this.drag.y = event.pageY - this.offset.top;
-  }
-  /**
-   * @desc
-   */
-  move(triggerDrag = true) {
-    const { direction, useTransform, target, offset: { top, left } } = this;
-    if (direction === DragDirections.both) {
-      useTransform
-        ? target.style.transform = `translate(${left}px, ${top}px)`
-        : (target.style.top = `${top}px`) && (target.style.left = `${left}px`);
-    }
-    else if (direction === DragDirections.x) {
-      useTransform
-        ? target.style.transform = `translateX(${left}px)`
-        : target.style.left = `${left}px`;
-    }
-    else if (direction === DragDirections.y) {
-      useTransform
-        ? target.style.transform = `translateY(${top}px)`
-        : target.style.top = `${top}px`;
-    }
-    if (triggerDrag)
-      this.triggerEvent('drag', this.getCurrentPosition());
-  }
-  /**
-   * @desc
-   * -
-   */
-  calculateOffset() {
-    const { target, container } = this;
-    let { left, top } = target.style;
-    if (!container) {
-      return { left, top };
-    }
-    const [rectTarget, rectContainer] = [
-      target.getBoundingClientRect(),
-      container.getBoundingClientRect()
-    ];
-    left = rectTarget.left - rectContainer.left,
-      top = rectTarget.top - rectContainer.top;
-    return { left, top };
-  }
-  /**
-   * @desc
-   */
-  getCurrentPosition() {
-    const { target } = this;
-    const { center: { x: centerX, y: centerY } = { x: 0, y: 0 } } = this;
-    let { left: x, top: y } = this.calculateOffset();
-    // 'offsetLeft' and 'offsetTop' properties are giving 'long integer' values
-    // in this case, this is not useful, we are using subpixel values. 
-    return {
-      x: this.useTransform
-        ? getTransform(target).x + centerX
-        : /* this.target.offsetLeft */ parseFloat(x) + centerX,
-      y: this.useTransform
-        ? getTransform(target).y + centerY
-        : /* this.target.offsetTop */ parseFloat(y) + centerY
-    };
-  }
-  /**
-   * @desc
-   * @param x
-   * @param y
-   */
-  setPosition({ x, y, anim }) {
-    const { center: { x: centerX, y: centerY } = { x: 0, y: 0 }, } = this;
-    if (x || x === 0) {
-      this.offset.left = x - centerX;
-    }
-    if (y || y === 0) {
-      this.offset.top = y - centerY;
-    }
-    anim && this.applyTransition();
-    this.move(false);
-  }
-  /**
-   * @desc
-   */
-  applyTransition() {
-    this.anim = true;
-    this.target.style.transition = 'transform 0.2s ease';
-  }
-  /**
-   * @desc
-   */
-  removeTransition() {
-    this.anim = false;
-    this.target.style.transition = '';
-  }
-  /**
-   * @desc
-   * @returns
-   */
-  getOffset() {
-    return this.offset;
-  }
-  /**
-   * @desc
-   * @param event
-   * @param fn
-   */
-  on(event, fn) {
-    this.events[event].push(fn);
-  }
-  /**
-   * @desc
-   * @param event
-   */
-  triggerEvent(event, ...params) {
-    this.events[event].forEach((fn) => fn(params[0]));
-  }
-}