bromcom-ui 2.8.0-rc.9 → 3.0.0-rc.0

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

@@ -4,7 +4,7 @@
  */
 'use strict';
 
-const bcm = require('./bcm-634604e3.js');
+const bcm = require('./bcm-e4cbab88.js');
 
 function getAlignment(placement) {
   return placement.split('-')[1];
@@ -781,18 +781,17 @@ const size = function (options) {
       }
       const overflowAvailableHeight = height - overflow[heightSide];
       const overflowAvailableWidth = width - overflow[widthSide];
+      const noShift = !state.middlewareData.shift;
       let availableHeight = overflowAvailableHeight;
       let availableWidth = overflowAvailableWidth;
       if (isXAxis) {
-        availableWidth = min$1(
-        // Maximum clipping viewport width
-        width - overflow.right - overflow.left, overflowAvailableWidth);
+        const maximumClippingWidth = width - overflow.left - overflow.right;
+        availableWidth = alignment || noShift ? min$1(overflowAvailableWidth, maximumClippingWidth) : maximumClippingWidth;
       } else {
-        availableHeight = min$1(
-        // Maximum clipping viewport height
-        height - overflow.bottom - overflow.top, overflowAvailableHeight);
+        const maximumClippingHeight = height - overflow.top - overflow.bottom;
+        availableHeight = alignment || noShift ? min$1(overflowAvailableHeight, maximumClippingHeight) : maximumClippingHeight;
       }
-      if (!state.middlewareData.shift && !alignment) {
+      if (noShift && !alignment) {
         const xMin = max$1(overflow.left, 0);
         const xMax = max$1(overflow.right, 0);
         const yMin = max$1(overflow.top, 0);
@@ -837,19 +836,6 @@ function getNodeName(node) {
   return isNode(node) ? (node.nodeName || '').toLowerCase() : '';
 }
 
-let uaString;
-function getUAString() {
-  if (uaString) {
-    return uaString;
-  }
-  const uaData = navigator.userAgentData;
-  if (uaData && Array.isArray(uaData.brands)) {
-    uaString = uaData.brands.map(item => item.brand + "/" + item.version).join(' ');
-    return uaString;
-  }
-  return navigator.userAgent;
-}
-
 function isHTMLElement(value) {
   return value instanceof getWindow(value).HTMLElement;
 }
@@ -877,36 +863,15 @@ function isTableElement(element) {
   return ['table', 'td', 'th'].includes(getNodeName(element));
 }
 function isContainingBlock(element) {
-  // TODO: Try to use feature detection here instead.
-  const isFirefox = /firefox/i.test(getUAString());
+  const safari = isSafari();
   const css = getComputedStyle$1(element);
-  const backdropFilter = css.backdropFilter || css.WebkitBackdropFilter;
 
-  // This is non-exhaustive but covers the most common CSS properties that
-  // create a containing block.
   // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
-  return css.transform !== 'none' || css.perspective !== 'none' || (backdropFilter ? backdropFilter !== 'none' : false) || isFirefox && css.willChange === 'filter' || isFirefox && (css.filter ? css.filter !== 'none' : false) || ['transform', 'perspective'].some(value => css.willChange.includes(value)) || ['paint', 'layout', 'strict', 'content'].some(value => {
-    // Add type check for old browsers.
-    const contain = css.contain;
-    return contain != null ? contain.includes(value) : false;
-  });
+  return css.transform !== 'none' || css.perspective !== 'none' || !safari && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !safari && (css.filter ? css.filter !== 'none' : false) || ['transform', 'perspective', 'filter'].some(value => (css.willChange || '').includes(value)) || ['paint', 'layout', 'strict', 'content'].some(value => (css.contain || '').includes(value));
 }
-
-/**
- * Determines whether or not `.getBoundingClientRect()` is affected by visual
- * viewport offsets. In Safari, the `x`/`y` offsets are values relative to the
- * visual viewport, while in other engines, they are values relative to the
- * layout viewport.
- */
-function isClientRectVisualViewportBased() {
-  // TODO: Try to use feature detection here instead. Feature detection for
-  // this can fail in various ways, making the userAgent check the most
-  // reliable:
-  // • Always-visible scrollbar or not
-  // • Width of <html>
-
-  // Is Safari.
-  return /^((?!chrome|android).)*safari/i.test(getUAString());
+function isSafari() {
+  if (typeof CSS === 'undefined' || !CSS.supports) return false;
+  return CSS.supports('-webkit-backdrop-filter', 'none');
 }
 function isLastTraversableNode(node) {
   return ['html', 'body', '#document'].includes(getNodeName(node));
@@ -918,8 +883,10 @@ const round = Math.round;
 
 function getCssDimensions(element) {
   const css = getComputedStyle$1(element);
-  let width = parseFloat(css.width);
-  let height = parseFloat(css.height);
+  // In testing environments, the `width` and `height` properties are empty
+  // strings for SVG elements, returning NaN. Fallback to `0` in this case.
+  let width = parseFloat(css.width) || 0;
+  let height = parseFloat(css.height) || 0;
   const hasOffset = isHTMLElement(element);
   const offsetWidth = hasOffset ? element.offsetWidth : width;
   const offsetHeight = hasOffset ? element.offsetHeight : height;
@@ -971,8 +938,29 @@ function getScale(element) {
   };
 }
 
-function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetParent) {
+const noOffsets = {
+  x: 0,
+  y: 0
+};
+function getVisualOffsets(element, isFixed, floatingOffsetParent) {
   var _win$visualViewport, _win$visualViewport2;
+  if (isFixed === void 0) {
+    isFixed = true;
+  }
+  if (!isSafari()) {
+    return noOffsets;
+  }
+  const win = element ? getWindow(element) : window;
+  if (!floatingOffsetParent || isFixed && floatingOffsetParent !== win) {
+    return noOffsets;
+  }
+  return {
+    x: ((_win$visualViewport = win.visualViewport) == null ? void 0 : _win$visualViewport.offsetLeft) || 0,
+    y: ((_win$visualViewport2 = win.visualViewport) == null ? void 0 : _win$visualViewport2.offsetTop) || 0
+  };
+}
+
+function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetParent) {
   if (includeScale === void 0) {
     includeScale = false;
   }
@@ -991,10 +979,9 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
       scale = getScale(element);
     }
   }
-  const win = domElement ? getWindow(domElement) : window;
-  const addVisualOffsets = isClientRectVisualViewportBased() && isFixedStrategy;
-  let x = (clientRect.left + (addVisualOffsets ? ((_win$visualViewport = win.visualViewport) == null ? void 0 : _win$visualViewport.offsetLeft) || 0 : 0)) / scale.x;
-  let y = (clientRect.top + (addVisualOffsets ? ((_win$visualViewport2 = win.visualViewport) == null ? void 0 : _win$visualViewport2.offsetTop) || 0 : 0)) / scale.y;
+  const visualOffsets = getVisualOffsets(domElement, isFixedStrategy, offsetParent);
+  let x = (clientRect.left + visualOffsets.x) / scale.x;
+  let y = (clientRect.top + visualOffsets.y) / scale.y;
   let width = clientRect.width / scale.x;
   let height = clientRect.height / scale.y;
   if (domElement) {
@@ -1164,7 +1151,7 @@ function getViewportRect(element, strategy) {
   if (visualViewport) {
     width = visualViewport.width;
     height = visualViewport.height;
-    const visualViewportBased = isClientRectVisualViewportBased();
+    const visualViewportBased = isSafari();
     if (!visualViewportBased || visualViewportBased && strategy === 'fixed') {
       x = visualViewport.offsetLeft;
       y = visualViewport.offsetTop;
@@ -1207,19 +1194,22 @@ function getClientRectFromClippingAncestor(element, clippingAncestor, strategy)
   } else if (isElement(clippingAncestor)) {
     rect = getInnerBoundingClientRect(clippingAncestor, strategy);
   } else {
-    const mutableRect = {
-      ...clippingAncestor
+    const visualOffsets = getVisualOffsets(element);
+    rect = {
+      ...clippingAncestor,
+      x: clippingAncestor.x - visualOffsets.x,
+      y: clippingAncestor.y - visualOffsets.y
     };
-    if (isClientRectVisualViewportBased()) {
-      var _win$visualViewport, _win$visualViewport2;
-      const win = getWindow(element);
-      mutableRect.x -= ((_win$visualViewport = win.visualViewport) == null ? void 0 : _win$visualViewport.offsetLeft) || 0;
-      mutableRect.y -= ((_win$visualViewport2 = win.visualViewport) == null ? void 0 : _win$visualViewport2.offsetTop) || 0;
-    }
-    rect = mutableRect;
   }
   return rectToClientRect(rect);
 }
+function hasFixedPositionAncestor(element, stopNode) {
+  const parentNode = getParentNode(element);
+  if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {
+    return false;
+  }
+  return getComputedStyle$1(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode);
+}
 
 // A "clipping ancestor" is an `overflow` element with the characteristic of
 // clipping (or hiding) child elements. This returns all clipping ancestors
@@ -1237,19 +1227,17 @@ function getClippingElementAncestors(element, cache) {
   // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
   while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
     const computedStyle = getComputedStyle$1(currentNode);
-    const containingBlock = isContainingBlock(currentNode);
-    const shouldIgnoreCurrentNode = computedStyle.position === 'fixed';
-    if (shouldIgnoreCurrentNode) {
+    const currentNodeIsContaining = isContainingBlock(currentNode);
+    if (!currentNodeIsContaining && computedStyle.position === 'fixed') {
       currentContainingBlockComputedStyle = null;
+    }
+    const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && ['absolute', 'fixed'].includes(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
+    if (shouldDropCurrentNode) {
+      // Drop non-containing blocks.
+      result = result.filter(ancestor => ancestor !== currentNode);
     } else {
-      const shouldDropCurrentNode = elementIsFixed ? !containingBlock && !currentContainingBlockComputedStyle : !containingBlock && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && ['absolute', 'fixed'].includes(currentContainingBlockComputedStyle.position);
-      if (shouldDropCurrentNode) {
-        // Drop non-containing blocks.
-        result = result.filter(ancestor => ancestor !== currentNode);
-      } else {
-        // Record last containing block for next iteration.
-        currentContainingBlockComputedStyle = computedStyle;
-      }
+      // Record last containing block for next iteration.
+      currentContainingBlockComputedStyle = computedStyle;
     }
     currentNode = getParentNode(currentNode);
   }
@@ -1330,7 +1318,8 @@ function getOffsetParent(element, polyfill) {
 function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
   const isOffsetParentAnElement = isHTMLElement(offsetParent);
   const documentElement = getDocumentElement(offsetParent);
-  const rect = getBoundingClientRect(element, true, strategy === 'fixed', offsetParent);
+  const isFixed = strategy === 'fixed';
+  const rect = getBoundingClientRect(element, true, isFixed, offsetParent);
   let scroll = {
     scrollLeft: 0,
     scrollTop: 0
@@ -1339,12 +1328,12 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
     x: 0,
     y: 0
   };
-  if (isOffsetParentAnElement || !isOffsetParentAnElement && strategy !== 'fixed') {
+  if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
     if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
       scroll = getNodeScroll(offsetParent);
     }
     if (isHTMLElement(offsetParent)) {
-      const offsetRect = getBoundingClientRect(offsetParent, true);
+      const offsetRect = getBoundingClientRect(offsetParent, true, isFixed, offsetParent);
       offsets.x = offsetRect.x + offsetParent.clientLeft;
       offsets.y = offsetRect.y + offsetParent.clientTop;
     } else if (documentElement) {

package/dist/cjs/{generate-b39bfd65.js → generate-59e65204.js}

@@ -4,43 +4,12 @@
  */
 'use strict';
 
-const colors = require('./colors-43b24668.js');
+const snq_es5 = require('./snq.es5-da53ce70.js');
+const colors = require('./colors-f0a07cbe.js');
 
-/**
- * 'status' prop predefined values
- */
-exports.StatusProps = void 0;
-(function (StatusProps) {
-  StatusProps["info"] = "info";
-  StatusProps["error"] = "error";
-  StatusProps["warning"] = "warning";
-  StatusProps["success"] = "success";
-  StatusProps["default"] = "default";
-})(exports.StatusProps || (exports.StatusProps = {}));
-/**
- * 'type' prop predefined values
- */
-exports.TypeProps = void 0;
-(function (TypeProps) {
-  TypeProps["banner"] = "banner";
-  TypeProps["basic"] = "basic";
-})(exports.TypeProps || (exports.TypeProps = {}));
-
-const version = "2.8.0-rc.9";
-
-function snq(callback, defaultValue) {
-    try {
-        var result = callback();
-        return typeof result === 'undefined' ? defaultValue : result;
-    }
-    catch (err) {
-        if (err instanceof TypeError) {
-            return defaultValue;
-        }
-        throw err;
-    }
-}
+const version = "3.0.0-rc.0";
 
+// @ts-ignore
 const allowedDomains = ["localhost", "beta-regression.bromcomcloud.com", "beta-scrum.bromcomcloud.com", "beta-kanban.bromcomcloud.com"];
 const isAllowedDomain = () => {
   const hostname = window.location.hostname;
@@ -74,33 +43,27 @@ class Generate {
     });
     observer.observe(document.documentElement, { childList: true, subtree: true });
   }
-  static getTwColor(color, variable = "--bcm-color-default") {
-    if (!color || !colors.tailwindColor[color]) {
+  static getTwColor(args) {
+    const { color, variable, defaultTone } = (args = Object.assign({
+      variable: "--bcm-color-default",
+      defaultTone: "600"
+    }, args));
+    if (!color || !colors.colors[color]) {
       return false;
     }
-    const colorObj = colors.tailwindColor[color];
     const result = {};
-    for (const [key, value] of Object.entries(colorObj)) {
+    if (typeof colors.colors[color] === "string") {
+      result[variable] = colors.colors[color];
+      return result;
+    }
+    for (const [key, value] of Object.entries(colors.colors[color])) {
       result[`${variable}-${key}`] = value;
     }
+    result[variable] = colors.colors[color][defaultTone];
     return result;
   }
 }
 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" };
-  switch (status) {
-    case exports.StatusProps.info:
-      return { icon: "far fa-info-circle" };
-    case exports.StatusProps.error:
-      return { icon: "far fa-times-circle" };
-    case exports.StatusProps.warning:
-      return { icon: "far fa-exclamation-circle" };
-    case exports.StatusProps.success:
-      return { icon: "far fa-check-circle" };
-  }
-};
 Generate.createComponent = (el, props, area = "append-area") => {
   let container = area ? document.querySelector(area) : document.body;
   if (area && !container) {
@@ -177,7 +140,7 @@ Generate.findEventPathWithKey = (event, key, items) => {
 Generate.findEventPathHasAttribute = (event, key) => {
   let path = event.composedPath() || event.path;
   if (path) {
-    return snq(() => !!path.find((element) => element.hasAttribute(key)), false);
+    return snq_es5.snq(() => !!path.find((element) => element.hasAttribute(key)), false);
   }
 };
 Generate.findEventTarget = (event, items) => {
@@ -302,4 +265,3 @@ Generate.findParentElement = (element, selector) => {
 };
 
 exports.Generate = Generate;
-exports.snq = snq;

package/dist/cjs/icon-template-9d3d546d.js

@@ -0,0 +1,15 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+'use strict';
+
+const index = require('./index-ddfd6d8f.js');
+const index$1 = require('./index-fdbf5226.js');
+
+const IconTemplate = ({ icon, className }) => {
+  return (index.h("span", { class: index$1.classnames("before:tw-clear-both after:tw-clear-both", className) },
+    index.h("i", { class: index$1.classnames("!tw-block tw-text-size-inherit", icon) })));
+};
+
+exports.IconTemplate = IconTemplate;

package/dist/cjs/{input-template-7c7cfb83.js → input-template-2d413cf8.js}

@@ -6,9 +6,9 @@
 
 const index$1 = require('./index-ddfd6d8f.js');
 const types = require('./types-cc4adee7.js');
-const bcm = require('./bcm-634604e3.js');
+const bcm = require('./bcm-e4cbab88.js');
 const index = require('./index-fdbf5226.js');
-const generate = require('./generate-b39bfd65.js');
+const snq_es5 = require('./snq.es5-da53ce70.js');
 
 const InputTemplate = ({ elementType, 
 //textarea
@@ -25,7 +25,7 @@ changePasswordVisibility, handleClear, steps,
 ref, handleBlur, handleFocus, handleInput, handleChange, isEyeDropperSupported, eyeDropper, }) => {
   const ElementTagType = bcm.Bcm.HtmlElementType[elementType] || bcm.Bcm.HtmlElementType.input;
   type = type === "password" && isPasswordVisible ? "text" : type;
-  value = generate.snq(() => value, "");
+  value = snq_es5.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 typeColor = type === "color";
@@ -71,6 +71,8 @@ ref, handleBlur, handleFocus, handleInput, handleChange, isEyeDropperSupported,
     }), (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" })))),
+    bcm.Bcm.HtmlElementType.input === elementType && (index$1.h("span", { class: "input-suffix-content" }, captionType === "error" && (index$1.h("span", { class: "input-suffix input-error-icon" },
+      index$1.h("bcm-icon", { icon: "fas fa-times-circle" }))))),
     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" },

package/dist/cjs/{json-parse-decarator-3b0b8500.js → json-parse-decarator-d31c2be8.js}

@@ -5,7 +5,7 @@
 'use strict';
 
 const index = require('./index-ddfd6d8f.js');
-const generate = require('./generate-b39bfd65.js');
+const snq_es5 = require('./snq.es5-da53ce70.js');
 
 function JsonParse(attribute, isMethod = false) {
   return (proto, propName) => {
@@ -13,9 +13,9 @@ function JsonParse(attribute, isMethod = false) {
     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);
+        const value = snq_es5.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, []);
+          this[propName] = snq_es5.snq(() => typeof value === 'string' ? JSON.parse(value) : value, []);
           host.removeAttribute(attribute);
         }
       }
@@ -25,9 +25,9 @@ function JsonParse(attribute, isMethod = false) {
       if (isMethod) {
         const host = index.getElement(this);
         if (isMethod) {
-          const value = generate.snq(() => host.hasAttribute(attribute) ? host.getAttribute(attribute).valueOf() : host[attribute].valueOf(), null);
+          const value = snq_es5.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), []);
+            this[attribute] = snq_es5.snq(() => JSON.parse(value), []);
           }
           host.removeAttribute(attribute);
         }

package/dist/cjs/label-template-2db9d086.js

@@ -0,0 +1,24 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+'use strict';
+
+const index = require('./index-ddfd6d8f.js');
+const index$1 = require('./index-fdbf5226.js');
+const bcm = require('./bcm-e4cbab88.js');
+
+const LabelTemplate = ({ required, value, size, form, htmlFor, type }) => {
+  size = size || "medium";
+  type = type || bcm.Bcm.Status.default;
+  return (index.h("label", { form: form, htmlFor: htmlFor, class: index$1.classnames("bcm-ui-element bcm-ui-feedback bcm-label tw-mb-1 tw-text-slate-600 tw-font-medium ", {
+      "tw-text-size-3": size == "small",
+      "tw-text-size-4": size == "medium",
+      "tw-text-size-5": size == "large",
+    }) },
+    value,
+    " ",
+    required && ('*')));
+};
+
+exports.LabelTemplate = LabelTemplate;