bromcom-ui 2.9.0 → 2.9.1-rc.1

package/dist/cjs/bcm-label_2.cjs.entry.js

@@ -0,0 +1,126 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-c591ecec.js');
+const index$1 = require('./index-95ae50d0.js');
+const generate = require('./generate-efeda203.js');
+const bcm = require('./bcm-9e47c4b2.js');
+const labelTemplate = require('./label-template-d531dfb7.js');
+require('./color-helper-c3a819ea.js');
+require('./datetime-helper-eaf4fadb.js');
+require('./number-helper-b178b610.js');
+require('./string-helper-4cd32dbb.js');
+require('./validators-2adde99d.js');
+const tooltipHelper = require('./tooltip-helper-f828ebee.js');
+require('./element-dragger-a8562f82.js');
+require('./_commonjsHelpers-ed84c3ca.js');
+require('./package-2899048c.js');
+require('./colors-078851ec.js');
+require('./slot-template-46018683.js');
+require('./colors-56282b00.js');
+require('./utils-fc077139.js');
+require('./floating-ui-4a2c2bd4.js');
+
+const labelCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .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}*{box-sizing:border-box}.bcm-label{display:inline-flex;align-items:flex-start;grid-gap:2px}.bcm-label__text{margin-bottom:2px;font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:inline-block;color:var(--bcm-new-ds-color-slate-600)}.bcm-label__size-small{font-size:10px;line-height:calc(10px + 8px);min-height:calc(10px + 8px)}.bcm-label__size-medium{font-size:12px;line-height:calc(12px + 8px);min-height:calc(12px + 8px)}.bcm-label__size-large{font-size:14px;line-height:calc(14px + 8px);min-height:calc(14px + 8px)}";
+
+const BcmLabel = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this._id = generate.Generate.UID();
+    this.required = false;
+    this.value = undefined;
+    this.size = "medium";
+    this.form = undefined;
+    this.htmlFor = undefined;
+    this.hidden = false;
+    this.type = bcm.Bcm$1.Status.default;
+    this.tooltip = undefined;
+  }
+  render() {
+    const { required, value, size, form, htmlFor, hidden, type, tooltip } = this;
+    const hostClasses = index$1.classnames('bcm-label', { hidden });
+    const Label = (index.h(labelTemplate.LabelTemplate, { form: form, htmlFor: htmlFor, value: value, size: size, type: type, required: required }));
+    return (index.h(index.Host, { class: hostClasses }, Label, tooltip && (index.h("bcm-tooltip", { message: tooltip, placement: 'top', trigger: 'hover' }, index.h("bcm-icon", { icon: "far fa-question-circle" })))));
+  }
+  get el() { return index.getElement(this); }
+};
+BcmLabel.style = labelCss;
+
+const BcmTooltip = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.bcmTooltipShow = index.createEvent(this, "bcmTooltipShow", 7);
+    this.bcmTooltipHide = index.createEvent(this, "bcmTooltipHide", 7);
+    this._id = generate.Generate.UID();
+    this.message = "";
+    this.placement = bcm.Bcm.Placement.top;
+    this.trigger = bcm.Bcm.TriggerType.click;
+    this.open = false;
+    this.color = "slate";
+    this.size = bcm.Bcm.Size.medium;
+    this.openDelay = 0;
+    this.closeDelay = 0;
+    this.autoHide = false;
+    this.targetId = undefined;
+    this.tooltip = undefined;
+  }
+  emitShow() {
+    this.bcmTooltipShow.emit();
+  }
+  emitHide() {
+    this.bcmTooltipHide.emit();
+  }
+  connectedCallback() {
+    this.tooltip = new tooltipHelper.Tooltip({
+      targetId: this.targetId || this._id,
+      message: this.message,
+      placement: this.placement,
+      color: this.color,
+      trigger: this.trigger,
+      size: this.size,
+      openDelay: this.openDelay,
+      closeDelay: this.closeDelay,
+      autoHide: this.autoHide,
+      emitShow: () => this.emitShow(),
+      emitHide: () => this.emitHide(),
+    });
+  }
+  componentDidLoad() {
+    this.tooltip.listener();
+  }
+  componentDidRender() {
+    this.tooltip.message = this.message;
+    this.tooltip.placement = this.placement;
+    this.tooltip.color = this.color;
+    this.tooltip.trigger = this.trigger;
+    this.tooltip.size = this.size;
+    this.tooltip.openDelay = this.openDelay;
+    this.tooltip.closeDelay = this.closeDelay;
+    this.tooltip.autoHide = this.autoHide;
+    this.tooltip.update();
+  }
+  disconnectedCallback() {
+    this.tooltip.destroy();
+  }
+  async show() {
+    this.tooltip.show();
+  }
+  async hide() {
+    this.tooltip.hide();
+  }
+  async toggle() {
+    this.tooltip.toggle();
+  }
+  render() {
+    return (index.h(index.Host, { class: "tw-inline-flex tw-h-fit tw-w-fit", role: "tooltip", "aria-hidden": "true" }, index.h("slot", null)));
+  }
+  get el() { return index.getElement(this); }
+};
+
+exports.bcm_label = BcmLabel;
+exports.bcm_tooltip = BcmTooltip;

package/dist/cjs/bcm-link.cjs.entry.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c591ecec.js');
 const index$1 = require('./index-95ae50d0.js');
-const bcm = require('./bcm-7f703055.js');
+const bcm = require('./bcm-9e47c4b2.js');
 require('./_commonjsHelpers-ed84c3ca.js');
 
 const linkCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .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}*{box-sizing:border-box}.bcm-link{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:inline;color:var(--bcm-new-ds-color-blue-500)}.bcm-link.hidden{display:none}.bcm-link.disabled{pointer-events:none;opacity:0.5;cursor:not-allowed}.bcm-link__anchor{display:inline-flex;align-items:baseline;font-size:inherit;color:inherit}.bcm-link__anchor.prefix .prefix-icon{margin-right:4px}.bcm-link__anchor.suffix .suffix-icon{margin-left:4px}.bcm-link__anchor:hover,.bcm-link__anchor:focus,.bcm-link__anchor:active,.bcm-link__anchor:focus-visible{outline:none}.bcm-link__anchor:hover{color:var(--bcm-new-ds-color-blue-600)}.bcm-link__anchor:active{color:var(--bcm-new-ds-color-blue-700)}.bcm-link__anchor:focus-visible{color:var(--bcm-new-ds-color-blue-800)}";
@@ -21,7 +21,7 @@ const BcmLink = class {
     this.target = undefined;
     this.icon = undefined;
     this.disabled = false;
-    this.iconPosition = bcm.Bcm.IconPosition.prefix;
+    this.iconPosition = bcm.Bcm$1.IconPosition.prefix;
   }
   handleOnClick(e) {
     if (this.disabled) {
@@ -42,7 +42,7 @@ const BcmLink = class {
       'suffix': this.linkIsExternal(href)
     });
     const ElementTagType = href ? 'a' : 'span';
-    return (index.h(index.Host, { disabled: disabled, class: hostClasses }, index.h(ElementTagType, { class: classes, href: href, target: this.linkIsExternal(href) ? '_blank' : target }, icon && iconPosition === bcm.Bcm.IconPosition.prefix && index.h("bcm-icon", { class: "prefix-icon", icon: icon }), index.h("slot", null), this.linkIsExternal(href) && index.h("bcm-icon", { class: "suffix-icon", icon: "far fa-external-link-alt" }))));
+    return (index.h(index.Host, { disabled: disabled, class: hostClasses }, index.h(ElementTagType, { class: classes, href: href, target: this.linkIsExternal(href) ? '_blank' : target }, icon && iconPosition === bcm.Bcm$1.IconPosition.prefix && index.h("bcm-icon", { class: "prefix-icon", icon: icon }), index.h("slot", null), this.linkIsExternal(href) && index.h("bcm-icon", { class: "suffix-icon", icon: "far fa-external-link-alt" }))));
   }
   get el() { return index.getElement(this); }
 };

package/dist/cjs/bcm-linked_2.cjs.entry.js

@@ -0,0 +1,289 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-c591ecec.js');
+require('./color-helper-c3a819ea.js');
+require('./datetime-helper-eaf4fadb.js');
+const generate = require('./generate-efeda203.js');
+require('./number-helper-b178b610.js');
+require('./string-helper-4cd32dbb.js');
+require('./validators-2adde99d.js');
+require('./element-dragger-a8562f82.js');
+const utils = require('./utils-fc077139.js');
+const floatingUi = require('./floating-ui-4a2c2bd4.js');
+const bcm = require('./bcm-9e47c4b2.js');
+const index$1 = require('./index-5279dea2.js');
+require('./colors-56282b00.js');
+require('./colors-078851ec.js');
+require('./_commonjsHelpers-ed84c3ca.js');
+require('./package-2899048c.js');
+
+const BcmLinked = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.bcmOpen = index.createEvent(this, "bcm-open", 7);
+    this._id = generate.Generate.UID();
+    this.placement = bcm.Bcm.Placement["bottom-start"];
+    this.trigger = bcm.Bcm.TriggerType.click;
+    this.targetId = "";
+    this.height = undefined;
+    this.maxHeight = undefined;
+    this.minHeight = "50px";
+    this.isOpen = false;
+    this.hideDelay = 500;
+    this.isMouseOverLink = false;
+    window.addEventListener("scroll", () => this.calculatePosition(), true);
+    window.addEventListener("wheel", () => this.calculatePosition(), true);
+    window.addEventListener("resize", () => this.calculatePosition(), true);
+  }
+  target() {
+    const target = document.querySelectorAll(`[id="${this.targetId}"]`);
+    if (target.length > 0) {
+      target.length > 1 && console.warn(`[bcm-linked] - Target id "${this.targetId}" is duplicated`);
+      return target[0];
+    }
+    else {
+      // console.warn(`[bcm-linked] - id="${this._id}" was removed from the dom because id="${this.targetId}" could not be found.`);
+      this.el.remove();
+      return null;
+    }
+  }
+  detectClone() {
+    const linked = document.querySelectorAll(`[target-id="${this.targetId}"]`);
+    if (linked.length > 0) {
+      linked.forEach((item) => {
+        if (item.id !== this._id) {
+          console.warn(`[bcm-linked] - id="${this._id}" was removed from the dom because id="${this.targetId}" is duplicated.`);
+          item.remove();
+        }
+      });
+    }
+  }
+  dismissEvent() {
+    document.dispatchEvent(new CustomEvent("linked-data-dismiss", { detail: { id: this._id } }));
+  }
+  checkDataDismiss(e) {
+    generate.Generate.findEventPathHasAttribute(e, "data-dismiss") && this.dismissEvent();
+  }
+  hideChildLinked() {
+    this.el.querySelectorAll("[is-linked][linked-is-open]").forEach(item => {
+      var _a;
+      (_a = document.querySelector(`#${item.getAttribute("is-linked")}[is-open]`)) === null || _a === void 0 ? void 0 : _a.hide(false);
+    });
+  }
+  calculatePosition() {
+    const el = this.el;
+    if (el && this.target()) {
+      if (this.isOpen) {
+        floatingUi.FloatingUI({
+          ref: this.target(),
+          floating: el,
+          placement: this.placement,
+          offset: 4,
+          autoHidden: el.getAttribute("main-linked") === "true" ? false : true,
+          autoSize: true,
+          style: {
+            height: this.height,
+            maxHeight: this.maxHeight,
+            minHeight: this.minHeight,
+          },
+        });
+      }
+      else {
+        el.style.visibility = "hidden";
+        el.style.opacity = "0";
+      }
+    }
+  }
+  init() {
+    const target = this.target();
+    this.trigger === bcm.Bcm.TriggerType.hover && this.listenMouseOver();
+    if (target) {
+      target.setAttribute("is-linked", this.el.id);
+      if (!generate.Generate.getAncestor(target, "bcm-linked")) {
+        this.el.setAttribute("main-linked", "true");
+      }
+      else {
+        this.el.removeAttribute("main-linked");
+      }
+    }
+  }
+  componentDidLoad() {
+    this.init();
+  }
+  triggerWatch(newValue) {
+    if (newValue === bcm.Bcm.TriggerType.hover) {
+      this.listenMouseOver();
+    }
+  }
+  watchIsOpen() {
+    this.bcmOpen.emit(this.isOpen);
+  }
+  onLinkedDataDismis() {
+    this.hide(false);
+  }
+  onBcmFloatingIsHide(e) {
+    if (e.detail.id === this._id) {
+      this.hide(false);
+    }
+  }
+  async show(wait = true) {
+    wait && (await utils.delay(50));
+    this.detectClone();
+    const target = this.target();
+    if (target) {
+      const bcmOverlayContainer = document.querySelector("#bcm-overlay-container");
+      bcmOverlayContainer.appendChild(this.el);
+      target.setAttribute("linked-is-open", "true");
+      this.isOpen = true;
+      this.calculatePosition();
+    }
+    else {
+      this.hide(false);
+    }
+    return this.isOpen;
+  }
+  async hide(wait = true) {
+    wait && (await utils.delay(50));
+    const target = this.target();
+    this.isMouseOverLink = false;
+    if (target) {
+      target.removeAttribute("linked-is-open");
+      this.hideChildLinked();
+      this.isOpen = false;
+    }
+    return this.isOpen;
+  }
+  async toggle(wait = true) {
+    return this.isOpen ? await this.hide(wait) : await this.show(wait);
+  }
+  clickListener(e) {
+    if (!this.target())
+      return;
+    if (this.trigger === bcm.Bcm.TriggerType.hover || this.trigger === bcm.Bcm.TriggerType.custom)
+      return;
+    const isTarget = generate.Generate.findEventPath(e, this.target());
+    const isSelf = generate.Generate.findEventPath(e, this.el);
+    const isLinked = generate.Generate.findEventPathWithNodeName(e, "BCM-LINKED");
+    if (!isTarget && !isSelf && !isLinked) {
+      this.hide();
+      this.bcmOpen.emit(this.isOpen);
+      return;
+    }
+    if (this.isOpen) {
+      isTarget && this.hide(false);
+      isSelf && this.checkDataDismiss(e);
+      if (this.el.getAttribute("main-linked") === "true" && !isTarget && !isSelf && !isLinked) {
+        this.dismissEvent();
+      }
+    }
+    else {
+      isTarget && this.show(false);
+    }
+  }
+  listenMouseOver() {
+    var _a, _b;
+    this.el.addEventListener("mouseover", () => (this.isMouseOverLink = true));
+    this.el.addEventListener("mouseleave", () => {
+      this.isMouseOverLink = false;
+      this.handleMouseLeave();
+    });
+    (_a = this.target()) === null || _a === void 0 ? void 0 : _a.addEventListener("mouseenter", this.handleMouseEnter.bind(this));
+    (_b = this.target()) === null || _b === void 0 ? void 0 : _b.addEventListener("mouseleave", this.handleMouseLeave.bind(this));
+  }
+  handleMouseLeave() {
+    setTimeout(() => {
+      !this.isMouseOverLink && this.hide();
+    }, this.hideDelay);
+  }
+  handleMouseEnter() {
+    clearTimeout(this.timeoutId);
+    this.isMouseOverLink = false;
+    this.show();
+  }
+  render() {
+    const openStyle = this.isOpen ? { visibility: "visible", opacity: "1" } : { visibility: "hidden", opacity: "0" };
+    return (index.h(index.Host, { class: "tw-invisible tw-absolute tw-left-0 tw-top-0 tw-z-tooltip  tw-block tw-overscroll-contain  tw-scroll-smooth tw-rounded tw-bg-white  tw-opacity-0 tw-shadow tw-transition-opacity tw-duration-100", style: Object.assign(Object.assign({}, openStyle), { overflow: "auto" }) }, index.h("slot", null)));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "trigger": ["triggerWatch"],
+    "isOpen": ["watchIsOpen"]
+  }; }
+};
+
+const skeletonStyle = index$1.ce({
+  slots: {
+    host: "tw-bg-gray-200 tw-w-full tw-inline-block",
+  },
+  variants: {
+    variant: {
+      rect: {
+        host: "tw-rounded-md",
+      },
+      circle: {
+        host: "tw-rounded-full tw-w-8 tw-h-8",
+      },
+    },
+    effect: {
+      pulse: {
+        host: "tw-animate-pulse",
+      },
+      ping: {
+        host: "tw-animate-ping",
+      },
+      none: {
+        host: "tw-animate-none",
+      },
+    },
+  },
+  defaultVariants: {
+    variant: "rect",
+    effect: "pulse",
+  },
+});
+
+const skeletonCss = "@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}:host([hidden]){display:none}:host{display:block;position:relative;overflow:hidden}";
+
+const BcmSkeleton = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.items = [];
+    this._id = generate.Generate.UID();
+    this.effect = "pulse";
+    this.variant = "rect";
+    this.count = 1;
+    this.hidden = false;
+    this.width = null;
+    this.height = "16px";
+    this.marginBottom = null;
+    this.customStyles = {};
+  }
+  componentWillLoad() {
+    this.init();
+  }
+  componentWillUpdate() {
+    this.init();
+  }
+  init() {
+    this.items.length = this.count;
+    this.items.fill(1);
+  }
+  render() {
+    const { variant, effect, width, height, marginBottom, customStyles } = this;
+    const style = Object.assign(Object.assign(Object.assign(Object.assign({}, (width ? { width } : {})), (height ? { height } : {})), (marginBottom ? { marginBottom } : {})), (typeof customStyles === "string" ? JSON.parse(customStyles) : customStyles));
+    const { host } = skeletonStyle({ variant, effect });
+    return (index.h(index.Host, null, this.items.map((_, index$1) => {
+      return index.h("div", { role: "status", part: "base", key: index$1, class: host(), "aria-busy": "true", "aria-live": "polite", style: style });
+    })));
+  }
+};
+BcmSkeleton.style = skeletonCss;
+
+exports.bcm_linked = BcmLinked;
+exports.bcm_skeleton = BcmSkeleton;