bromcom-ui 2.7.37-rc.1 → 2.7.37-rc.3

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

@@ -0,0 +1,81 @@
+/*!
+ * 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

@@ -0,0 +1,18 @@
+/*!
+ * 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

@@ -0,0 +1,58 @@
+/*!
+ * 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, disabled: item.disabled }))),
+        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

@@ -0,0 +1,24 @@
+/*!
+ * 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, emptyText, emptyIcon }) => {
+  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", { 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", { style: { "height": "auto" }, icon: emptyIcon },
+          h("span", { innerHTML: emptyText || "No data" })))),
+      searchFound == 0 && (h("section", { class: "bcm-list__container-no-data" },
+        h("bcm-empty", { style: { "height": "auto" }, icon: emptyIcon },
+          h("span", { innerHTML: emptyText || "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

@@ -0,0 +1,10 @@
+/*!
+ * 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

@@ -0,0 +1,26 @@
+/*!
+ * 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

@@ -0,0 +1,45 @@
+/*!
+ * 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

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

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

@@ -0,0 +1,274 @@
+/*!
+ * 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]));
+  }
+}

package/dist/collection/utils/floating-ui.js

@@ -0,0 +1,95 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { Bcm } from '../../types/models';
+import { computePosition, flip, shift, offset, arrow, hide, size } from '@floating-ui/dom';
+export const FloatingUI = (
+// el,
+// component,
+// options = {
+//     placement: Bcm.Placement.bottom as PlacementTypes,
+//     offset: 0,
+//     arrow: false,
+//     arrowColor: 'tw-bg-slate-700',
+// },
+// autoHidden = true,
+// autoSize = false,
+// style: any = {},
+args) => {
+  const { ref, floating, placement: _placement = Bcm.Placement.bottom, offset: _offset = 0, arrow: _arrow = false, arrowColor = 'tw-bg-slate-700', autoHidden = true, autoSize = false, style = {}, } = args;
+  // const { placement: _placement, offset: _offset, arrow: _arrow, arrowColor } = options;
+  // let _middleware = [offset(_offset), flip(), shift({ padding: 5 }), hide({ padding: 10 })];
+  let _middleware = [offset(_offset), flip(), shift({ padding: 5 })];
+  if (autoHidden) {
+    _middleware.push(hide({ padding: 10 }));
+  }
+  style &&
+    Object.assign(floating.style, Object.assign(Object.assign({}, (style.height && { height: style.height })), (style.minHeight && { minHeight: style.minHeight })));
+  if (autoSize && !(style === null || style === void 0 ? void 0 : style.height)) {
+    _middleware.push(size({
+      apply({ availableHeight }) {
+        const maxHeight = `${availableHeight > window.innerHeight ? window.innerHeight - 10 : availableHeight}px`;
+        Object.assign(floating.style, {
+          maxHeight: `${style.maxHeight && maxHeight >= style.maxHeight ? style.maxHeight : maxHeight}`,
+        });
+      },
+      padding: 5,
+    }));
+  }
+  let arrowElement = document.getElementById(`${floating.id}-arrow`);
+  if (_arrow) {
+    if (!arrowElement) {
+      arrowElement = document.createElement('div');
+      arrowElement.setAttribute('id', `${floating.id}-arrow`);
+    }
+    arrowElement.setAttribute('class', `tw-absolute tw-w-2 tw-h-2 ${arrowColor} tw-transform tw-z-[-1] tw-opacity-0 tw-transition-opacity tw-duration-300 
+            tw-shadow 
+        `);
+    floating.prepend(arrowElement);
+    _middleware.push(arrow({ element: arrowElement, padding: 4 }));
+  }
+  computePosition(ref, floating, { placement: _placement, middleware: _middleware }).then(({ x, y, placement, middlewareData }) => {
+    const { referenceHidden } = autoHidden ? middlewareData.hide : { referenceHidden: false };
+    Object.assign(floating.style, {
+      top: '0',
+      left: '0',
+      transform: `translate(${Math.round(x)}px,${Math.round(y)}px)`,
+      opacity: referenceHidden ? '0' : '1',
+      visibility: referenceHidden ? 'hidden' : 'visible',
+    });
+    if (referenceHidden) {
+      const isHideEvent = new CustomEvent('bcm-floating-is-hide', { detail: { id: floating.id } });
+      document.dispatchEvent(isHideEvent);
+      floating.getAttribute('outside-of-the-screen') !== 'true' && floating.setAttribute('outside-of-the-screen', 'true');
+    }
+    else {
+      floating.getAttribute('outside-of-the-screen') === 'true' && floating.removeAttribute('outside-of-the-screen');
+    }
+    if (_arrow) {
+      const { x: arrowX, y: arrowY } = middlewareData.arrow;
+      const staticSide = {
+        top: 'bottom',
+        right: 'left',
+        bottom: 'top',
+        left: 'right',
+      }[placement.split('-')[0]];
+      const arrowStyle = {
+        top: 'rotate(45deg)',
+        right: 'rotate(135deg)',
+        bottom: 'rotate(-135deg)',
+        left: 'rotate(-45deg)',
+      }[placement.split('-')[0]];
+      Object.assign(arrowElement.style, {
+        left: arrowX != null ? `${arrowX}px` : '',
+        top: arrowY != null ? `${arrowY}px` : '',
+        right: '',
+        bottom: '',
+        [staticSide]: '-4px',
+        opacity: 1,
+        visibility: referenceHidden ? 'hidden' : 'visible',
+        transform: arrowStyle,
+      });
+    }
+  });
+};

package/dist/collection/utils/index.js

@@ -0,0 +1,9 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+export * from './element-dragger';
+export * from './popover-placement';
+export * from './utils';
+export * from './validation';
+export * from './floating-ui';