bromcom-ui 2.7.37-rc.3 → 2.7.37-rc.4-0

package/dist/components/divider.js

@@ -0,0 +1,59 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+import { I as IsLoad } from './is-load-decorator.js';
+import { B as Bcm } from './bcm.js';
+
+const dividerCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}.bcm-divider{display:block}.bcm-divider.hidden{display:none}.bcm-divider__direction-horizontal{width:100%;height:1px;margin:4px auto;border-top:1px solid var(--bcm-color-grey-5)}.bcm-divider__direction-vertical{height:auto;width:1px;margin:0 4px;border-left:1px solid var(--bcm-color-grey-5)}";
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const BcmDivider = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.hidden = false;
+    this.direction = Bcm.Direction.horizontal;
+  }
+  render() {
+    const { hidden, direction } = this;
+    const hostClasses = classnames('bcm-divider', 'bcm-divider__direction-' + direction, {
+      'hidden': hidden
+    });
+    return (h(Host, { class: hostClasses }, h("span", { hidden: true }, h("slot", null))));
+  }
+  get el() { return this; }
+  static get style() { return dividerCss; }
+}, [4, "bcm-divider", {
+    "hidden": [1028],
+    "direction": [1025]
+  }]);
+__decorate([
+  IsLoad()
+], BcmDivider.prototype, "el", void 0);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["bcm-divider"];
+  components.forEach(tagName => { switch (tagName) {
+    case "bcm-divider":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, BcmDivider);
+      }
+      break;
+  } });
+}
+
+export { BcmDivider as B, defineCustomElement as d };

package/dist/components/element-dragger.js

@@ -0,0 +1,277 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { c as getTransform } from './utils.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 };

package/dist/components/empty.js

@@ -0,0 +1,53 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { I as IsLoad } from './is-load-decorator.js';
+import { d as defineCustomElement$1 } from './typography.js';
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const BcmEmpty = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+  }
+  render() {
+    return (h(Host, { class: "tw-h-full tw-flex tw-flex-col tw-items-center tw-justify-center tw-w-full tw-flex-1 tw-bg-slate-50 tw-text-center tw-rounded tw-gap-3" }, this.icon && h("i", { class: `tw-text-8 tw-text-amber-400 ${this.icon}` }), h("bcm-typography", { class: "tw-text-slate-400 tw-text-2" }, h("slot", null))));
+  }
+  get el() { return this; }
+}, [4, "bcm-empty", {
+    "icon": [1]
+  }]);
+__decorate([
+  IsLoad()
+], BcmEmpty.prototype, "el", void 0);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["bcm-empty", "bcm-typography"];
+  components.forEach(tagName => { switch (tagName) {
+    case "bcm-empty":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, BcmEmpty);
+      }
+      break;
+    case "bcm-typography":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { BcmEmpty as B, defineCustomElement as d };