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

package/dist/cjs/{colors-e1d142ad.js → color-helper-d1cb7959.js}

@@ -4,6 +4,8 @@
  */
 'use strict';
 
+const colors$1 = require('./colors-56282b00.js');
+const utils = require('./utils-fc077139.js');
 const _commonjsHelpers = require('./_commonjsHelpers-bd20f4c0.js');
 
 var x=String;
@@ -71,7 +73,7 @@ const _default = {
 };
 });
 
-var colors$1 = _commonjsHelpers.createCommonjsModule(function (module, exports) {
+var colors = _commonjsHelpers.createCommonjsModule(function (module, exports) {
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
@@ -427,9 +429,84 @@ const _default = {
 });
 
 var colors_1 = _commonjsHelpers.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__*/_commonjsHelpers.getDefaultExportFromCjs(colors_1);
+const tailwindColor = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(colors_1);
 
-exports.colors = colors;
+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 (utils.extractColor(colors$1.ColorPalette, color)) {
+      return utils.extractColor(colors$1.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));
+
+exports.ColorHelper = ColorHelper;

package/dist/cjs/{floating-ui-74eb26d6.js → floating-ui-ded9c11f.js}

@@ -4,7 +4,7 @@
  */
 'use strict';
 
-const bcm = require('./bcm-634604e3.js');
+const bcm = require('./bcm-2c51bf0c.js');
 
 function getAlignment(placement) {
   return placement.split('-')[1];

package/dist/cjs/{generate-f658ddc8.js → generate-73f0e7fa.js}

@@ -4,8 +4,6 @@
  */
 'use strict';
 
-const colors = require('./colors-e1d142ad.js');
-
 /**
  * 'status' prop predefined values
  */
@@ -26,7 +24,7 @@ exports.TypeProps = void 0;
   TypeProps["basic"] = "basic";
 })(exports.TypeProps || (exports.TypeProps = {}));
 
-const version = "2.8.0-rc.10-d";
+const version = "2.8.0-rc.10-e";
 
 function snq(callback, defaultValue) {
     try {
@@ -41,74 +39,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.colors[color]) {
-      return false;
-    }
-    const colorObj = colors.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 exports.StatusProps.info:
-      return { icon: "far fa-info-circle" };
+      return { icon: 'far fa-info-circle' };
     case exports.StatusProps.error:
-      return { icon: "far fa-times-circle" };
+      return { icon: 'far fa-times-circle' };
     case exports.StatusProps.warning:
-      return { icon: "far fa-exclamation-circle" };
+      return { icon: 'far fa-exclamation-circle' };
     case exports.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) {
@@ -121,13 +84,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 {
@@ -235,71 +198,6 @@ 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);
-  }
-};
 
 exports.Generate = Generate;
 exports.snq = snq;

package/dist/cjs/{index-ddfd6d8f.js → index-b4a2fb85.js}

@@ -1458,7 +1458,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/cjs/{index-4506fcd7.js → index-b6a28fdb.js}

@@ -4,7 +4,7 @@
  */
 'use strict';
 
-const index = require('./index-ddfd6d8f.js');
+const index = require('./index-b4a2fb85.js');
 
 const appendToMap = (map, propName, value) => {
     const items = map.get(propName);

package/dist/cjs/input-template-80bdebb9.js

@@ -0,0 +1,86 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+'use strict';
+
+const index$1 = require('./index-b4a2fb85.js');
+const types = require('./types-cc4adee7.js');
+const bcm = require('./bcm-2c51bf0c.js');
+const index = require('./index-fdbf5226.js');
+const generate = require('./generate-73f0e7fa.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.HtmlElementType[elementType] || bcm.Bcm.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.HtmlElementType.textarea && index.classnames('bcm-input__textarea', 'textarea-size-' + bcm.Bcm.Size[size], 'resize-' + resize, 'textarea-' + size), ElementTagType === bcm.Bcm.HtmlElementType.input && index.classnames('input-size-' + bcm.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 = 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.HtmlElementType.input && {
+      type,
+      autocomplete: autocomplete ? 'on' : 'off',
+      pattern,
+    })), ((ElementTagType === bcm.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) })),
+    index$1.h("span", { class: "input-suffix-content" }, (clearable && !disabled && !readonly) &&
+      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/{is-load-decorator-137dded1.js → is-load-decorator-888172a8.js}

@@ -4,7 +4,7 @@
  */
 'use strict';
 
-const index = require('./index-ddfd6d8f.js');
+const index = require('./index-b4a2fb85.js');
 
 function IsLoad() {
   return (proto) => {
@@ -22,6 +22,8 @@ function registerAttrReflect(element) {
     let io = new IntersectionObserver((data) => {
       if (data[0].isIntersecting) {
         isIntersecting(element);
+        io.disconnect();
+        io = null;
       }
     });
     io.observe(element);

package/dist/cjs/{json-parse-decarator-a98a51f0.js → json-parse-decarator-5ddb904f.js}

@@ -4,8 +4,8 @@
  */
 'use strict';
 
-const index = require('./index-ddfd6d8f.js');
-const generate = require('./generate-f658ddc8.js');
+const index = require('./index-b4a2fb85.js');
+const generate = require('./generate-73f0e7fa.js');
 
 function JsonParse(attribute, isMethod = false) {
   return (proto, propName) => {

package/dist/cjs/{label-template-cc69bc21.js → label-template-5d3d6f6c.js}

@@ -4,10 +4,10 @@
  */
 'use strict';
 
-const index$1 = require('./index-ddfd6d8f.js');
+const index$1 = require('./index-b4a2fb85.js');
 const index = require('./index-fdbf5226.js');
-const bcm = require('./bcm-634604e3.js');
-const slotTemplate = require('./slot-template-3e59d7d8.js');
+const bcm = require('./bcm-2c51bf0c.js');
+const slotTemplate = require('./slot-template-720b35b8.js');
 
 const LabelTemplate = ({ required, value, size, form, htmlFor, type }) => {
   size = size || "medium";