bromcom-ui 2.12.4-rc.0 → 3.0.0-alpha.1

package/dist/esm/stepper-states-b1aa55b0.js

@@ -1,83 +0,0 @@
-/*!
- * Built with Stencil
- * Copyright (c) Bromcom.
- */
-import { c as createStore } from './index-91dbe540.js';
-import { G as Generate, s as snq } from './generate-27c06421.js';
-import { f as forceUpdate } from './index-b3026131.js';
-
-const { state } = createStore({
-  value: new Map(),
-  setData: {},
-});
-const setValue = val => {
-  const data = Object.assign(Object.assign({}, val), { steps: val.steps &&
-      val.steps.length > 0 &&
-      val.steps
-        .filter(data => !data.hidden)
-        .map((item, index) => ({
-        id: item.id || Generate.UID(),
-        title: item.title || item._title,
-        _title: item.title || item._title || 'Step ' + (index + 1),
-        description: item.description || '',
-        status: item.status || 'default',
-        disabled: val.linear ? (index == 0 ? false : true) : item.disabled || false,
-        icon: item.icon || undefined,
-        valid: item.valid || true,
-        loading: item.loading || false,
-        index: index + 1,
-        active: val.linear ? (index == 0 ? true : false) : val.active === index + 1,
-        isLast: index === val.steps.length - 1,
-        statusIcon: val.icon,
-        headerHidden: item.hidden,
-      })) });
-  state.value.set(val.id, data);
-};
-const removeState = _id => {
-  state.value.delete(_id);
-};
-const changeActiveStep = (id, index) => {
-  const value = state.value.get(id);
-  if (value) {
-    value.active = index;
-    value.steps = value.steps.map((step, i) => (Object.assign(Object.assign({}, step), { active: i === index - 1 })));
-  }
-};
-const getActiveIndex = id => snq(() => state.value.get(id).active, 0);
-const changeStepStatus = (id, stepId, status) => {
-  const value = state.value.get(id);
-  if (value && value.steps) {
-    value.steps = value.steps.map(step => (Object.assign(Object.assign({}, step), { status: step.id === stepId ? status : step.status })));
-    forceUpdate(value.el);
-  }
-};
-const changeStepDisabled = (id, stepId, disabled) => {
-  const value = state.value.get(id);
-  if (value && value.steps) {
-    value.steps = value.steps.map(step => (Object.assign(Object.assign({}, step), { disabled: step.id === stepId ? disabled : step.disabled })));
-    forceUpdate(value.el);
-  }
-};
-const setActiveIndex = (id, index) => state.value.get(id).active = index;
-const stepperReset = id => {
-  const value = state.value.get(id);
-  if (value) {
-    value.active = 1;
-    value.steps = value.steps.map((step, i) => (Object.assign(Object.assign({}, step), { active: i === 0, status: 'default', disabled: i !== 0, loading: false })));
-    forceUpdate(value.el);
-  }
-};
-const getValue = id => snq(() => state.value.get(id), {});
-const stepperStates = {
-  removeState,
-  getValue,
-  setValue,
-  changeActiveStep,
-  getActiveIndex,
-  changeStepStatus,
-  changeStepDisabled,
-  stepperReset,
-  setActiveIndex
-};
-
-export { stepperStates as s };

package/dist/esm/tooltip-helper-112e52a6.js

@@ -1,156 +0,0 @@
-/*!
- * Built with Stencil
- * Copyright (c) Bromcom.
- */
-import './element-dragger-7ea06c76.js';
-import { S as StringHelper } from './string-helper-85990695.js';
-import { d as delay } from './utils-b3338faf.js';
-import { F as FloatingUI } from './floating-ui-3f4394da.js';
-import { C as ColorHelper } from './color-helper-e74656af.js';
-import './datetime-helper-df25808a.js';
-import { G as Generate } from './generate-27c06421.js';
-import './number-helper-94a51ec2.js';
-import './validators-7e605ca5.js';
-import { a as Bcm } from './bcm-a50d55ba.js';
-
-class Tooltip {
-  constructor({ message, targetId, placement = "top", color = "slate-700", trigger = "none", size = "medium", openDelay = 0, closeDelay = 0, autoHide = false, emitShow = () => { }, emitHide = () => { }, }) {
-    this.destroy = () => {
-      this.el = document.getElementById(this.id);
-      if (this.el) {
-        this.el.remove();
-        this.emitHide();
-      }
-      this.removeListener();
-    };
-    this.target = () => document.getElementById(this.targetId);
-    this.sizeClass = () => {
-      switch (this.size) {
-        case Bcm.Size.small:
-          return "tw-text-1";
-        case Bcm.Size.medium:
-          return "tw-text-2";
-        case Bcm.Size.large:
-          return "tw-text-3";
-        default:
-          return "tw-text-2";
-      }
-    };
-    this.init = () => {
-      const { tone, colorName } = ColorHelper.parseColor(this.color, 700);
-      const dc = Generate.getTwColor({
-        color: colorName,
-        tones: {
-          [tone]: ["bg"],
-        },
-        variable: "--bcm-tooltip",
-      });
-      const style = Object.assign(Object.assign({}, dc), (dc["--bcm-tooltip-bg"] && { "--bcm-tooltip-text": ColorHelper.reverseColor(dc["--bcm-tooltip-bg"]) }));
-      this.el = Generate.createElement("div", {
-        "id": `${this.targetId}-tooltip-box`,
-        "class": `
-            tw-whitespace-normal tw-break-words tw-block tw-font-sans tw-pointer-events-none tw-max-w-xs tw-py-1 tw-px-2 tw-rounded tw-bg-[--bcm-tooltip-bg] tw-text-[--bcm-tooltip-text] ${this.sizeClass()} tw-absolute tw-top-0 tw-left-0 tw-z-tooltip tw-opacity-0 tw-transition-opacity tw-duration-300`,
-        "role": "tooltip",
-        "aria-hidden": "true",
-        "style": ColorHelper.generateStyleString(style),
-        "innerHTML": StringHelper.trim(this.message),
-      });
-    };
-    this.update = () => {
-      this.el = document.getElementById(this.id);
-      if (this.el) {
-        this.hide();
-        this.show();
-      }
-    };
-    this.listener = () => {
-      window.addEventListener("resize", this.calculatePosition.bind(this));
-      window.addEventListener("scroll", this.calculatePosition.bind(this), true);
-      window.addEventListener("wheel", this.calculatePosition.bind(this));
-      if (this.trigger && this.target()) {
-        switch (this.trigger) {
-          case "click":
-            this.target().addEventListener("click", this.toggle.bind(this));
-            this.autoHide && this.target().addEventListener("mouseleave", this.hide.bind(this));
-            break;
-          case "hover":
-            this.target().addEventListener("mouseenter", this.show.bind(this));
-            this.target().addEventListener("mouseleave", this.hide.bind(this));
-            break;
-          case "focus":
-            this.target().addEventListener("focus", this.show.bind(this), true);
-            this.target().addEventListener("blur", this.hide.bind(this), true);
-            break;
-        }
-      }
-      this.calculatePosition();
-    };
-    this.removeListener = () => {
-      window.removeEventListener("resize", this.calculatePosition.bind(this));
-      window.removeEventListener("scroll", this.calculatePosition.bind(this), true);
-      window.removeEventListener("wheel", this.calculatePosition.bind(this));
-      if (this.target()) {
-        this.target().removeEventListener("click", this.toggle.bind(this));
-        this.target().removeEventListener("mouseenter", this.show.bind(this));
-        this.target().removeEventListener("mouseleave", this.hide.bind(this));
-        this.target().removeEventListener("focus", this.show.bind(this), true);
-        this.target().removeEventListener("blur", this.hide.bind(this), true);
-      }
-    };
-    this.calculatePosition = () => {
-      this.el = document.getElementById(this.id);
-      if (this.el) {
-        FloatingUI({
-          ref: this.target(),
-          floating: this.el,
-          placement: this.placement,
-          offset: 8,
-          arrow: true,
-          arrowColor: `tw-bg-[--bcm-tooltip-bg]`,
-        });
-      }
-    };
-    this.show = async () => {
-      if (this.message) {
-        this.init();
-        await delay(this.openDelay);
-        this.calculatePosition();
-        this.emitShow();
-      }
-      else {
-        this.hide();
-      }
-    };
-    this.hide = async () => {
-      this.el = document.getElementById(this.id);
-      if (this.el) {
-        await delay(this.closeDelay);
-        this.el && this.el.remove();
-        this.emitHide();
-      }
-    };
-    this.toggle = () => {
-      this.el = document.getElementById(this.id);
-      if (this.el) {
-        this.hide();
-      }
-      else {
-        this.show();
-      }
-    };
-    this.message = message;
-    this.targetId = targetId;
-    this.placement = placement;
-    this.color = color;
-    this.id = targetId + "-tooltip-box";
-    this.trigger = trigger;
-    this.size = size;
-    this.openDelay = openDelay;
-    this.closeDelay = closeDelay;
-    this.autoHide = autoHide;
-    this.emitShow = emitShow;
-    this.emitHide = emitHide;
-  }
-}
-
-export { Tooltip as T };