bromcom-ui 2.7.38-rc.0 → 2.7.38-rc.10

package/dist/cjs/input-template-d7f600a5.js

@@ -1,86 +0,0 @@
-/*!
- * Built with Stencil
- * Copyright (c) Bromcom.
- */
-'use strict';
-
-const index$1 = require('./index-1fda1524.js');
-const types = require('./types-cc4adee7.js');
-const bcm = require('./bcm-f00ec62c.js');
-const index = require('./index-a2b50e51.js');
-const generate = require('./generate-0d51cba6.js');
-
-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.Bcm$1.HtmlElementType[elementType] || bcm.Bcm$1.HtmlElementType.input;
-  type = (type === 'password' && isPasswordVisible) ? 'text' : type;
-  value = generate.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 = index.classnames('bcm-input__container', ElementTagType === bcm.Bcm$1.HtmlElementType.textarea && index.classnames('bcm-input__textarea', 'textarea-size-' + bcm.Bcm$1.Size[size], 'resize-' + resize, 'textarea-' + size), ElementTagType === bcm.Bcm$1.HtmlElementType.input && index.classnames('input-size-' + bcm.Bcm$1.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 = index.classnames('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 = index.classnames(inputClass, 'unit-prefix');
-  return (index$1.h("div", { class: containerClass },
-    index$1.h("span", { hidden: true },
-      index$1.h("slot", null)),
-    index$1.h("span", { class: "input-prefix" },
-      index$1.h("slot", { name: "prefix" }),
-      _prefix && _prefix.length > 0 &&
-        index$1.h("span", { innerHTML: _prefix }),
-      unitPrefix && index$1.h("span", { class: unitClass }, unitPrefix)),
-    index$1.h(ElementTagType, Object.assign({ tabindex: "1", id: id, "bcm-internal-id": internalId, class: 'bcm-input-element ' + inputClass }, ((ElementTagType === bcm.Bcm$1.HtmlElementType.input && {
-      type,
-      autocomplete: autocomplete ? 'on' : 'off',
-      pattern,
-    })), ((ElementTagType === bcm.Bcm$1.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) })),
-    index$1.h("span", { class: "input-suffix-content" }, (clearable && !disabled) &&
-      index$1.h("span", { class: "input-suffix input-suffix-button input-clear-button", onClick: (e) => handleClear(e) },
-        index$1.h("bcm-icon", { icon: "far fa-times" }))),
-    index$1.h("span", { class: "input-suffix-content" }, ((type === 'password' || type === 'text') && passwordToggle) && (index$1.h("span", { class: "input-suffix input-suffix-button", onClick: () => changePasswordVisibility() },
-      index$1.h("bcm-icon", { icon: isPasswordVisible ? "far fa-eye-slash" : "far fa-eye" })))),
-    index$1.h("span", { class: "input-suffix-content" }, (Object.keys(types.defaultIcons).includes(type) && !noDefaultIcon) && (index$1.h("span", { class: "input-suffix" },
-      index$1.h("bcm-icon", { icon: types.defaultIcons[type] })))),
-    index$1.h("span", { class: "input-suffix-content" }, type === 'number' && (index$1.h("div", { class: caretContainer },
-      index$1.h("span", { class: "bcm-input-caret", onClick: () => steps('up') },
-        index$1.h("bcm-icon", { icon: "fas fa-caret-up" })),
-      index$1.h("span", { class: "bcm-input-caret", onClick: () => steps('down') },
-        index$1.h("bcm-icon", { icon: "fas fa-caret-down" }))))),
-    index$1.h("span", { class: "input-suffix-content" }, type !== 'number' && (index$1.h("span", { class: "input-suffix" },
-      index$1.h("slot", { name: "suffix" }),
-      _suffix && _suffix.length > 0 &&
-        index$1.h("span", { innerHTML: _suffix }))))));
-};
-
-exports.InputTemplate = InputTemplate;

package/dist/cjs/tooltip-helper-eff66c97.js

@@ -1,137 +0,0 @@
-/*!
- * Built with Stencil
- * Copyright (c) Bromcom.
- */
-'use strict';
-
-const index = require('./index-1fda1524.js');
-const generate = require('./generate-0d51cba6.js');
-require('./element-dragger-a8562f82.js');
-const stringHelper = require('./string-helper-145cd64f.js');
-const floatingUi = require('./floating-ui-2a4a79ff.js');
-const colorHelper = require('./color-helper-c9882bd8.js');
-require('./datetime-helper-eaf4fadb.js');
-require('./number-helper-1d113d3e.js');
-require('./validators-424a487a.js');
-
-function JsonParse(attribute, isMethod = false) {
-  return (proto, propName) => {
-    const { connectedCallback, componentWillRender } = proto;
-    proto.connectedCallback = function () {
-      const host = index.getElement(this);
-      if (host[propName]) {
-        const value = generate.snq(() => host.hasAttribute(attribute) ? host.getAttribute(attribute).valueOf() : host[attribute].valueOf(), null);
-        if (value) {
-          this[propName] = generate.snq(() => typeof value === 'string' ? JSON.parse(value) : value, []);
-          host.removeAttribute(attribute);
-        }
-      }
-      return connectedCallback && connectedCallback.call(this);
-    };
-    proto.componentWillRender = async function () {
-      if (isMethod) {
-        const host = index.getElement(this);
-        if (isMethod) {
-          const value = generate.snq(() => host.hasAttribute(attribute) ? host.getAttribute(attribute).valueOf() : host[attribute].valueOf(), null);
-          if (value && value.length > 0 && typeof value === 'string') {
-            this[attribute] = generate.snq(() => JSON.parse(value), []);
-          }
-          host.removeAttribute(attribute);
-        }
-        return componentWillRender && componentWillRender.call(this);
-      }
-    };
-  };
-}
-
-class Tooltip {
-  constructor({ message, targetId, placement = 'top', color = 'slate-700', trigger = 'none' }) {
-    this.bgColor = () => colorHelper.ColorHelper.twColor(this.color, 700);
-    this.target = () => document.getElementById(this.targetId);
-    this.init = () => {
-      this.el = generate.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-${this.bgColor()} tw-text-white tw-text-1 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': `color: ${colorHelper.ColorHelper.twColorReverse(this.bgColor())}`,
-        'innerHTML': stringHelper.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));
-            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.calculatePosition = () => {
-      this.el = document.getElementById(this.id);
-      if (this.el) {
-        floatingUi.FloatingUI({
-          ref: this.target(),
-          floating: this.el,
-          placement: this.placement,
-          offset: 8,
-          arrow: true,
-          arrowColor: `tw-bg-${this.bgColor()}`,
-        });
-      }
-    };
-    this.show = () => {
-      if (this.message) {
-        this.init();
-        this.calculatePosition();
-      }
-      else {
-        this.hide();
-      }
-    };
-    this.hide = () => {
-      this.el = document.getElementById(this.id);
-      if (this.el) {
-        this.el.remove();
-      }
-    };
-    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;
-  }
-}
-
-exports.JsonParse = JsonParse;
-exports.Tooltip = Tooltip;