bromcom-ui 2.8.0-rc.10-d → 2.8.0-rc.10-e

package/dist/esm/{colors-44c95e7e.js → color-helper-99e2372d.js}

@@ -2,6 +2,8 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
+import { C as ColorPalette } from './colors-1d7854ea.js';
+import { e as extractColor } from './utils-b3338faf.js';
 import { c as createCommonjsModule, g as getDefaultExportFromCjs } from './_commonjsHelpers-3016b722.js';
 
 var x=String;
@@ -69,7 +71,7 @@ const _default = {
 };
 });
 
-var colors$1 = createCommonjsModule(function (module, exports) {
+var colors = createCommonjsModule(function (module, exports) {
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
@@ -425,9 +427,84 @@ const _default = {
 });
 
 var colors_1 = createCommonjsModule(function (module) {
-module.exports = (colors$1.__esModule ? colors$1 : { default: colors$1 }).default;
+module.exports = (colors.__esModule ? colors : { default: colors }).default;
 });
 
-const colors = /*@__PURE__*/getDefaultExportFromCjs(colors_1);
+const tailwindColor = /*@__PURE__*/getDefaultExportFromCjs(colors_1);
 
-export { colors as c };
+class ColorHelper {
+}
+ColorHelper.isHex = (str) => /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(str);
+ColorHelper.isRgb = (str) => /^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/.test(str);
+ColorHelper.isRgba = (str) => /^rgba\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/.test(str);
+ColorHelper.isHsl = (str) => /^hsl\((\d{1,3}),\s*(\d{1,3}%),\s*(\d{1,3}%)\)$/.test(str);
+ColorHelper.isHsla = (str) => /^hsla\((\d{1,3}),\s*(\d{1,3}%),\s*(\d{1,3}%),\s*(\d{1,3})\)$/.test(str);
+ColorHelper.isVariable = (str) => /^var\((.*)\)$/.test(str);
+ColorHelper.extractVariable = (str) => str.match(/^var\((.*)\)$/)[1];
+ColorHelper.convertColorToHex = (color) => {
+  if (color) {
+    if (ColorHelper.isVariable(color)) {
+      const extractColor = ColorHelper.extractVariable(color);
+      return getComputedStyle(document.documentElement).getPropertyValue(extractColor);
+    }
+    if (ColorHelper.isHex(color)) {
+      return color;
+    }
+    if (ColorHelper.isRgb(color)) {
+      const rgb = color.match(/^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/);
+      return `#${(0x1000000 + parseInt(rgb[1]) * 0x10000 + parseInt(rgb[2]) * 0x100 + parseInt(rgb[3])).toString(16).substring(1)}`;
+    }
+    if (extractColor(ColorPalette, color)) {
+      return extractColor(ColorPalette, color);
+    }
+  }
+};
+ColorHelper.reverseColor = (color) => {
+  let hexColor = ColorHelper.convertColorToHex(color).trim();
+  if (hexColor) {
+    if (hexColor.length === 4) {
+      hexColor = `#${hexColor[1]}${hexColor[1]}${hexColor[2]}${hexColor[2]}${hexColor[3]}${hexColor[3]}`;
+    }
+    const r = parseInt(hexColor.substring(1, 3), 16);
+    const g = parseInt(hexColor.substring(3, 5), 16);
+    const b = parseInt(hexColor.substring(5, 7), 16);
+    const yiq = (r * 299 + g * 587 + b * 114) / 1000;
+    return yiq >= 200 ? '#475569' : '#f8fafc';
+  }
+};
+ColorHelper.dsColor = (color) => 'var(--bcm-new-ds-color-' + color + ')';
+ColorHelper.getTwColorToHex = (colorName) => ColorHelper.getTwColor(colorName) || tailwindColor['blue']['500'];
+ColorHelper.getTwColor = (colorName, checkTw = false) => {
+  if (tailwindColor[colorName]) {
+    return tailwindColor[colorName];
+  }
+  const splitted = colorName.split('-');
+  const grade = splitted[splitted.length - 1];
+  const swatch = splitted.slice(0, splitted.length - 1).join('-');
+  if (tailwindColor[swatch] && tailwindColor[swatch][grade]) {
+    return checkTw ? 1 : tailwindColor[swatch][grade];
+  }
+  else if (tailwindColor[swatch]) {
+    return checkTw ? 2 : tailwindColor[swatch];
+  }
+  else {
+    console.warn('Color not found in tailwind colors: ' + colorName);
+    return 0;
+  }
+};
+// slate => slate-500
+// slate-700 => slate-700
+ColorHelper.twColor = (colorName, tone = '500') => {
+  const newColor = colorName && colorName.indexOf('-') === -1 ? `${colorName}-${tone}` : colorName;
+  const getTw = ColorHelper.getTwColor(newColor, true);
+  if (getTw === 1) {
+    return newColor;
+  }
+  if (getTw === 2) {
+    return colorName;
+  }
+  return 'blue-500';
+};
+ColorHelper.twColorReverse = (color) => ColorHelper.reverseColor(ColorHelper.getTwColorToHex(color));
+
+export { ColorHelper as C };

package/dist/esm/{element-dragger-89bb52fd.js → element-dragger-7ea06c76.js}

@@ -2,7 +2,7 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { a as getTransform } from './utils-57652744.js';
+import { g as getTransform } from './utils-b3338faf.js';
 
 /**
  * Enums

package/dist/esm/{floating-ui-e7341329.js → floating-ui-54c1f339.js}

@@ -2,7 +2,7 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { a as Bcm } from './bcm-9f50af9c.js';
+import { a as Bcm } from './bcm-b8d8a236.js';
 
 function getAlignment(placement) {
   return placement.split('-')[1];

package/dist/esm/{generate-20047511.js → generate-8c14a484.js}

@@ -2,8 +2,6 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { c as colors } from './colors-44c95e7e.js';
-
 /**
  * 'status' prop predefined values
  */
@@ -24,7 +22,7 @@ var TypeProps;
   TypeProps["basic"] = "basic";
 })(TypeProps || (TypeProps = {}));
 
-const version = "2.8.0-rc.10-d";
+const version = "2.8.0-rc.10-e";
 
 function snq(callback, defaultValue) {
     try {
@@ -39,74 +37,39 @@ function snq(callback, defaultValue) {
     }
 }
 
-const allowedDomains = ["localhost", "beta-regression.bromcomcloud.com", "beta-scrum.bromcomcloud.com", "beta-kanban.bromcomcloud.com"];
+const allowedDomains = ['localhost', 'beta-regression.bromcomcloud.com', 'beta-scrum.bromcomcloud.com', 'beta-kanban.bromcomcloud.com'];
 const isAllowedDomain = () => {
   const hostname = window.location.hostname;
   return allowedDomains.includes(hostname);
 };
 if (isAllowedDomain()) {
-  console.log(`%cbromcom ui%c version: ${version}-${"p"} `, `color: white; background:#1890FF; font-weight: 300;  font-size:10px;  padding:2px 6px;  border-radius: 5px`, `font-size:10px;`);
+  console.log(`%cbromcom ui%c version: ${version}-${'p'} `, `color: white; background:#1890FF; font-weight: 300;  font-size:10px;  padding:2px 6px;  border-radius: 5px`, `font-size:10px;`);
 }
-(function checkTheme() {
-  const body = document.querySelector("body");
-  let theme = localStorage.getItem("bcm-theme");
-  if (!body.classList.contains("bcm-theme-*") && theme) {
-    body.classList.add(`bcm-theme-${theme}`);
-  }
-})();
 class Generate {
-  static observeElementRemoval(element, callback) {
-    const observer = new MutationObserver((mutationsList, observer) => {
-      for (const mutation of mutationsList) {
-        if (mutation.type === "childList") {
-          const removedNodes = Array.from(mutation.removedNodes);
-          for (const removedNode of removedNodes) {
-            if (removedNode === element) {
-              callback();
-              observer.disconnect();
-              return;
-            }
-          }
-        }
-      }
-    });
-    observer.observe(document.documentElement, { childList: true, subtree: true });
-  }
-  static getTwColor(color, variable = "--bcm-color-default") {
-    if (!color || !colors[color]) {
-      return false;
-    }
-    const colorObj = colors[color];
-    const result = {};
-    for (const [key, value] of Object.entries(colorObj)) {
-      result[`${variable}-${key}`] = value;
-    }
-    return result;
-  }
 }
-Generate.UID = (prefix = "bcm") => `${prefix}${Math.random().toString(36).substr(2, 9)}`;
+Generate.UID = (prefix = 'bcm') => `${prefix}${Math.random().toString(36).substr(2, 9)}`;
 Generate.getIconAttrWithStatusType = (status, loading = false) => {
   if (loading)
-    return { icon: "far fa-spinner-third fa-spin" };
+    return { icon: 'far fa-spinner-third fa-spin' };
   switch (status) {
     case StatusProps.info:
-      return { icon: "far fa-info-circle" };
+      return { icon: 'far fa-info-circle' };
     case StatusProps.error:
-      return { icon: "far fa-times-circle" };
+      return { icon: 'far fa-times-circle' };
     case StatusProps.warning:
-      return { icon: "far fa-exclamation-circle" };
+      return { icon: 'far fa-exclamation-circle' };
     case StatusProps.success:
-      return { icon: "far fa-check-circle" };
+      return { icon: 'far fa-check-circle' };
   }
 };
-Generate.createComponent = (el, props, area = "append-area") => {
+Generate.createComponent = (el, props, area = 'append-area') => {
   let container = area ? document.querySelector(area) : document.body;
   if (area && !container) {
-    container = document.createElement("div");
-    container.id = "append-area";
+    container = document.createElement('div');
+    container.id = 'append-area';
     document.body.appendChild(container);
-    container.style.visibility = "hidden";
-    container.style.opacity = "0";
+    container.style.visibility = 'hidden';
+    container.style.opacity = '0';
   }
   let element = document.getElementById(props.id);
   if (!element) {
@@ -119,13 +82,13 @@ Generate.createComponent = (el, props, area = "append-area") => {
   container.appendChild(element);
   return element;
 };
-Generate.createElement = (tag = "div", props) => {
+Generate.createElement = (tag = 'div', props) => {
   let element = document.getElementById(props.id);
   if (!element) {
     element = document.createElement(tag);
   }
   Object.keys(props).forEach(key => {
-    if (key == "innerHTML") {
+    if (key == 'innerHTML') {
       element[key] = props[key];
     }
     else {
@@ -233,70 +196,5 @@ Generate.getAncestor = (el, selector) => {
     ;
   return el;
 };
-Generate.findParentElement = (element, selector) => {
-  const firstChar = selector.charAt(0);
-  function getElementByClass(currentElement, className) {
-    while (currentElement !== null) {
-      if (currentElement.classList.contains(className)) {
-        return currentElement;
-      }
-      currentElement = currentElement.parentElement;
-    }
-    return null;
-  }
-  function getElementById(currentElement, id) {
-    while (currentElement !== null) {
-      if (currentElement.id === id) {
-        return currentElement;
-      }
-      currentElement = currentElement.parentElement;
-    }
-    return null;
-  }
-  function getElementByAttribute(currentElement, attr, value) {
-    while (currentElement !== null) {
-      if (currentElement.hasAttribute(attr) && (value === undefined || currentElement.getAttribute(attr) === value)) {
-        return currentElement;
-      }
-      currentElement = currentElement.parentElement;
-    }
-    return null;
-  }
-  function getElementByTag(currentElement, tag) {
-    while (currentElement !== null) {
-      if (currentElement.tagName.toLowerCase() === tag.toLowerCase()) {
-        return currentElement;
-      }
-      currentElement = currentElement.parentElement;
-    }
-    return null;
-  }
-  if (selector === "*") {
-    // Tüm elementleri seç
-    return element.parentElement;
-  }
-  else if (firstChar === ".") {
-    // Sınıf adı seçicisi
-    const className = selector.slice(1);
-    return getElementByClass(element.parentElement, className);
-  }
-  else if (firstChar === "#") {
-    // ID seçicisi
-    const id = selector.slice(1);
-    return getElementById(element.parentElement, id);
-  }
-  else if (firstChar === "[") {
-    // Öznitelik seçicisi
-    const end = selector.indexOf("]");
-    const attr = selector.slice(1, end);
-    const value = selector.slice(end + 2, -1);
-    return getElementByAttribute(element.parentElement, attr, value);
-  }
-  else {
-    // Etiket adı seçicisi
-    const tag = selector.toLowerCase();
-    return getElementByTag(element.parentElement, tag);
-  }
-};
 
 export { Generate as G, StatusProps as S, TypeProps as T, snq as s };

package/dist/esm/{index-93e36fdb.js → index-0f68d8f0.js}

@@ -2,7 +2,7 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { a as getRenderingRef, f as forceUpdate } from './index-39133086.js';
+import { a as getRenderingRef, f as forceUpdate } from './index-85cce099.js';
 
 const appendToMap = (map, propName, value) => {
     const items = map.get(propName);

package/dist/esm/{index-39133086.js → index-85cce099.js}

@@ -1436,7 +1436,7 @@ const updateComponent = async (hostRef, instance, isInitialLoad) => {
 const callRender = (hostRef, instance, elm) => {
     try {
         renderingRef = instance;
-        instance = instance.render && instance.render();
+        instance = instance.render() ;
         {
             hostRef.$flags$ &= ~16 /* HOST_FLAGS.isQueuedForUpdate */;
         }

package/dist/esm/input-template-b410853d.js

@@ -0,0 +1,84 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { h } from './index-85cce099.js';
+import { d as defaultIcons } from './types-6f06fa1a.js';
+import { B as Bcm } from './bcm-b8d8a236.js';
+import { c as classnames } from './index-ed9652af.js';
+import { s as snq } from './generate-8c14a484.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.HtmlElementType[elementType] || Bcm.HtmlElementType.input;
+  type = (type === 'password' && isPasswordVisible) ? 'text' : type;
+  value = 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 = classnames('bcm-input__container', ElementTagType === Bcm.HtmlElementType.textarea && classnames('bcm-input__textarea', 'textarea-size-' + Bcm.Size[size], 'resize-' + resize, 'textarea-' + size), ElementTagType === Bcm.HtmlElementType.input && classnames('input-size-' + Bcm.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 = 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 = classnames(inputClass, 'unit-prefix');
+  return (h("div", { class: containerClass },
+    h("span", { hidden: true },
+      h("slot", null)),
+    h("span", { class: "input-prefix" },
+      h("slot", { name: "prefix" }),
+      _prefix && _prefix.length > 0 &&
+        h("span", { innerHTML: _prefix }),
+      unitPrefix && h("span", { class: unitClass }, unitPrefix)),
+    h(ElementTagType, Object.assign({ tabindex: "1", id: id, "bcm-internal-id": internalId, class: 'bcm-input-element ' + inputClass }, ((ElementTagType === Bcm.HtmlElementType.input && {
+      type,
+      autocomplete: autocomplete ? 'on' : 'off',
+      pattern,
+    })), ((ElementTagType === Bcm.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) })),
+    h("span", { class: "input-suffix-content" }, (clearable && !disabled && !readonly) &&
+      h("span", { class: "input-suffix input-suffix-button input-clear-button", onClick: (e) => handleClear(e) },
+        h("bcm-icon", { icon: "far fa-times" }))),
+    h("span", { class: "input-suffix-content" }, ((type === 'password' || type === 'text') && passwordToggle) && (h("span", { class: "input-suffix input-suffix-button", onClick: () => changePasswordVisibility() },
+      h("bcm-icon", { icon: isPasswordVisible ? "far fa-eye-slash" : "far fa-eye" })))),
+    h("span", { class: "input-suffix-content" }, (Object.keys(defaultIcons).includes(type) && !noDefaultIcon) && (h("span", { class: "input-suffix" },
+      h("bcm-icon", { icon: defaultIcons[type] })))),
+    h("span", { class: "input-suffix-content" }, type === 'number' && (h("div", { class: caretContainer },
+      h("span", { class: "bcm-input-caret", onClick: () => steps('up') },
+        h("bcm-icon", { icon: "fas fa-caret-up" })),
+      h("span", { class: "bcm-input-caret", onClick: () => steps('down') },
+        h("bcm-icon", { icon: "fas fa-caret-down" }))))),
+    h("span", { class: "input-suffix-content" }, type !== 'number' && (h("span", { class: "input-suffix" },
+      h("slot", { name: "suffix" }),
+      _suffix && _suffix.length > 0 &&
+        h("span", { innerHTML: _suffix }))))));
+};
+
+export { InputTemplate as I };

package/dist/esm/{is-load-decorator-bc14ec4b.js → is-load-decorator-87c09179.js}

@@ -2,7 +2,7 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { g as getElement } from './index-39133086.js';
+import { g as getElement } from './index-85cce099.js';
 
 function IsLoad() {
   return (proto) => {
@@ -20,6 +20,8 @@ function registerAttrReflect(element) {
     let io = new IntersectionObserver((data) => {
       if (data[0].isIntersecting) {
         isIntersecting(element);
+        io.disconnect();
+        io = null;
       }
     });
     io.observe(element);

package/dist/esm/{json-parse-decarator-af08e07f.js → json-parse-decarator-46d7fb30.js}

@@ -2,8 +2,8 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { g as getElement } from './index-39133086.js';
-import { s as snq } from './generate-20047511.js';
+import { g as getElement } from './index-85cce099.js';
+import { s as snq } from './generate-8c14a484.js';
 
 function JsonParse(attribute, isMethod = false) {
   return (proto, propName) => {

package/dist/esm/{label-template-d74fe788.js → label-template-4f474794.js}

@@ -2,10 +2,10 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { h } from './index-39133086.js';
+import { h } from './index-85cce099.js';
 import { c as classnames } from './index-ed9652af.js';
-import { B as Bcm } from './bcm-9f50af9c.js';
-import { S as SlotTemplate } from './slot-template-5b2db362.js';
+import { B as Bcm } from './bcm-b8d8a236.js';
+import { S as SlotTemplate } from './slot-template-97e4665e.js';
 
 const LabelTemplate = ({ required, value, size, form, htmlFor, type }) => {
   size = size || "medium";