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

package/dist/esm/colors-1d7854ea.js

@@ -0,0 +1,222 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+const ColorPalette = {
+  'black': '#000000',
+  'white': '#ffffff',
+  'prime-blue': {
+    1: '#F4FBFE',
+    2: '#D4E9F6',
+    3: '#B0D3EC',
+    4: '#8ABDE2',
+    5: '#65A8D9',
+    6: '#4293CF',
+    7: '#3679AB',
+    8: '#285C82',
+    9: '#194E75',
+    10: '#0E2739'
+  },
+  'grey': {
+    1: '#FFFFFF',
+    2: '#FAFAFA',
+    3: '#F5F5F5',
+    4: '#E8E8E8',
+    5: '#D9D9D9',
+    6: '#BFBFBF',
+    7: '#8C8C8C',
+    8: '#595959',
+    9: '#262626',
+    10: '#000000'
+  },
+  'blue': {
+    1: '#E6F7FF',
+    2: '#BAE7FF',
+    3: '#91D5FF',
+    4: '#69C0FF',
+    5: '#40A9FF',
+    6: '#1890FF',
+    7: '#096DD9',
+    8: '#0050B3',
+    9: '#003A8C',
+    10: '#002766'
+  },
+  'warmyellow': {
+    1: '#FFFBE6',
+    2: '#FFF1B8',
+    3: '#FFE58F',
+    4: '#FFD666',
+    5: '#FFC53D',
+    6: '#FAAD14',
+    7: '#D48806',
+    8: '#AD6800',
+    9: '#874D00',
+    10: '#613400'
+  },
+  'yellow': {
+    1: '#FEFFE6',
+    2: '#FFFFB8',
+    3: '#FFFB8F',
+    4: '#FFF566',
+    5: '#FFEC3D',
+    6: '#FADB14',
+    7: '#D4B106',
+    8: '#AD8B00',
+    9: '#876800',
+    10: '#614700'
+  },
+  'limegreen': {
+    1: '#FCFFE6',
+    2: '#F4FFB8',
+    3: '#EAFF8F',
+    4: '#D3F261',
+    5: '#BAE637',
+    6: '#A0D911',
+    7: '#7CB305',
+    8: '#5B8C00',
+    9: '#3F66',
+    10: '#254000'
+  },
+  'red': {
+    1: '#FFF1F0',
+    2: '#FFCCC7',
+    3: '#FFA39E',
+    4: '#FF7875',
+    5: '#FF4D4F',
+    6: '#F5222D',
+    7: '#CF1322',
+    8: '#A8071A',
+    9: '#820014',
+    10: '#5C0011'
+  },
+  'darkorange': {
+    1: '#FFF2E8',
+    2: '#FFD8BF',
+    3: '#FFBB96',
+    4: '#FF9C6E',
+    5: '#FF7A45',
+    6: '#FA541C',
+    7: '#D4380D',
+    8: '#AD2102',
+    9: '#871400',
+    10: '#610B00'
+  },
+  'orange': {
+    1: '#FFF7E6',
+    2: '#FFE7BA',
+    3: '#FFD591',
+    4: '#FFC096',
+    5: '#FFA940',
+    6: '#FA8C16',
+    7: '#D46B08',
+    8: '#AD4E00',
+    9: '#873800',
+    10: '#612500'
+  },
+  'green': {
+    1: '#F6FFED',
+    2: '#D9F7BE',
+    3: '#B7EB8F',
+    4: '#95DE64',
+    5: '#73D13D',
+    6: '#52C41A',
+    7: '#389E0D',
+    8: '#237804',
+    9: '#135200',
+    10: '#092B00'
+  },
+  'turquosie': {
+    1: '#E6FFFB',
+    2: '#B5F5EC',
+    3: '#87E8DE',
+    4: '#5CDBD3',
+    5: '#36CFC9',
+    6: '#13C2C2',
+    7: '#08979C',
+    8: '#006D75',
+    9: '#00474F',
+    10: '#002329'
+  },
+  'cobaltblue': {
+    1: '#F0F5FF',
+    2: '#D6E4FF',
+    3: '#ADC6FF',
+    4: '#85A5FF',
+    5: '#597EF7',
+    6: '#2F54EB',
+    7: '#1D39C4',
+    8: '#10239E',
+    9: '#061178',
+    10: '#030852'
+  },
+  'magenta': {
+    1: '#FFF0F6',
+    2: '#FFD6E7',
+    3: '#FFADD2',
+    4: '#FF85C0',
+    5: '#F759AB',
+    6: '#EB2F96',
+    7: '#C41D7F',
+    8: '#9E1068',
+    9: '#780650',
+    10: '#520339'
+  },
+  'purple': {
+    1: '#F9F0FF',
+    2: '#EFDBFF',
+    3: '#D3ADF7',
+    4: '#B37FEB',
+    5: '#9254DE',
+    6: '#722ED1',
+    7: '#531DAB',
+    8: '#391085',
+    9: '#22075E',
+    10: '#120338'
+  },
+  'bc-red': {
+    1: '#FCF5F5',
+    2: '#F3C4BF',
+    3: '#EB998F',
+    4: '#E46E60',
+    5: '#CC4C41',
+    6: '#AA3527',
+    7: '#8D2D20',
+    8: '#6F241A',
+    9: '#4A1912'
+  },
+  'bc-orange': {
+    1: '#FEF9F4',
+    2: '#F9DDC0',
+    3: '#F7C494',
+    4: '#F4AD69',
+    5: '#F1963F',
+    6: '#D38236',
+    7: '#B26C2C',
+    8: '#905622',
+    9: '#6B3E17'
+  },
+  'bc-green': {
+    1: '#F8FCF6',
+    2: '#DBE8CA',
+    3: '#C0D6A2',
+    4: '#A6C57B',
+    5: '#8BB453',
+    6: '#7C9F4B',
+    7: '#6A8740',
+    8: '#586E36',
+    9: '#45532B'
+  },
+  'bc-blue': {
+    1: '#F4FBFE',
+    2: '#C5DEF0',
+    3: '#99C4E5',
+    4: '#6DACDA',
+    5: '#4293CF',
+    6: '#3A7FB3',
+    7: '#316892',
+    8: '#275071',
+    9: '#1D374F'
+  }
+};
+
+export { ColorPalette as C };

package/dist/esm/datetime-helper-df25808a.js

@@ -0,0 +1,9 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+class DateTimeHelper {
+}
+DateTimeHelper.convertTimeStampToDate = (timestamp) => new Date(timestamp);
+
+export { DateTimeHelper as D };

package/dist/esm/element-dragger-89bb52fd.js

@@ -0,0 +1,277 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { a as getTransform } from './utils-57652744.js';
+
+/**
+ * Enums
+ */
+var DragDirections;
+(function (DragDirections) {
+  DragDirections["x"] = "x";
+  DragDirections["y"] = "y";
+  DragDirections["both"] = "both";
+})(DragDirections || (DragDirections = {}));
+/**
+ * @Class BcmDragger
+ * @desc -
+ */
+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]));
+  }
+}
+
+export { DragDirections as D, ElementDragger as E };