bromcom-ui 2.9.0-rc.2 → 2.9.0-rc.20

package/dist/collection/models/bcm.js

@@ -81,6 +81,7 @@ export var Bcm;
     Kind["solid"] = "solid";
     Kind["ghost"] = "ghost";
     Kind["link"] = "link";
+    Kind["ghost-link"] = "ghost-link";
   })(Kind = Bcm.Kind || (Bcm.Kind = {}));
   let ButtonType;
   (function (ButtonType) {
@@ -395,33 +396,33 @@ export var Bcm;
     KeyCode[KeyCode["a"] = 65] = "a";
   })(KeyCode = Bcm.KeyCode || (Bcm.KeyCode = {}));
   Bcm.FormErrorMessages = {
-    'email': 'Please enter a valid email address',
-    'password': 'Please enter a valid password',
-    'url': 'Please enter a valid URL',
-    'phone': 'Please enter a valid phone number',
-    'search': 'Please enter a valid search term',
-    'number': 'Please enter a valid number',
-    'text': 'Please enter a valid text',
-    'required': 'This field is required',
-    'minlength': 'This field must be at least {0} characters long',
-    'maxlength': 'This field must be at most {0} characters long',
-    'min': 'This field must be at least {0}',
-    'max': 'This field must be at most {0}',
-    'between': 'This field must be between {0} and {1}',
-    'pattern': 'Please use a valid format',
-    'date': 'Please enter a valid date',
-    'time': 'Please enter a valid time',
-    'datetime': 'Please enter a valid date and time',
-    'datetime-local': 'Please enter a valid date and time',
-    'month': 'Please enter a valid month',
-    'week': 'Please enter a valid week',
-    'color': 'Please enter a valid color',
-    'file': 'Please enter a valid file',
-    'range': 'Please enter a valid range',
-    'radio': 'Please select a valid option',
-    'checkbox': 'Please select a valid option',
-    'select': 'Please select a valid option',
-    'multiple': 'Please select a valid option',
+    "email": "Please enter a valid email address",
+    "password": "Please enter a valid password",
+    "url": "Please enter a valid URL",
+    "phone": "Please enter a valid phone number",
+    "search": "Please enter a valid search term",
+    "number": "Please enter a valid number",
+    "text": "Please enter a valid text",
+    "required": "This field is required",
+    "minlength": "This field must be at least {0} characters long",
+    "maxlength": "This field must be at most {0} characters long",
+    "min": "This field must be at least {0}",
+    "max": "This field must be at most {0}",
+    "between": "This field must be between {0} and {1}",
+    "pattern": "Please use a valid format",
+    "date": "Please enter a valid date",
+    "time": "Please enter a valid time",
+    "datetime": "Please enter a valid date and time",
+    "datetime-local": "Please enter a valid date and time",
+    "month": "Please enter a valid month",
+    "week": "Please enter a valid week",
+    "color": "Please enter a valid color",
+    "file": "Please enter a valid file",
+    "range": "Please enter a valid range",
+    "radio": "Please select a valid option",
+    "checkbox": "Please select a valid option",
+    "select": "Please select a valid option",
+    "multiple": "Please select a valid option",
   };
   let IndeterminateType;
   (function (IndeterminateType) {
@@ -456,6 +457,7 @@ export var Bcm;
     TriggerType["hover"] = "hover";
     TriggerType["click"] = "click";
     TriggerType["focus"] = "focus";
+    TriggerType["custom"] = "custom";
   })(TriggerType = Bcm.TriggerType || (Bcm.TriggerType = {}));
   let ListType;
   (function (ListType) {

package/dist/collection/templates/index.js

@@ -15,3 +15,5 @@ export * from './list-template';
 export * from './slot-template';
 export * from './step-template';
 export * from './tag-template';
+export * from './toolbar-template';
+export * from './toolbar-hamburger-template';

package/dist/collection/templates/toolbar-hamburger-template.js

@@ -0,0 +1,14 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { StringHelper } from "@bcm/helpers";
+import { Fragment, h } from "@stencil/core";
+export const ToolbarHamburgerTemplate = ({ hamburgerMenuId, config, column, extensions, onHideColumn, onSelectExportType }) => {
+  const { showColumnButton, showExportButton, showNewButton } = config;
+  return (h(Fragment, null, h("bcm-linked", { class: "lg:tw-hidden md:tw-hidden", "target-id": hamburgerMenuId, "main-linked": true }, h("div", { class: "tw-shadow-custom tw-w-full tw-min-w-[180px] tw-flex-col tw-gap-2 tw-p-4" }, showNewButton && (h("bcm-item", { color: "white" }, h("div", { class: "tw-flex tw-h-5 tw-w-full tw-flex-1 tw-items-center tw-justify-between tw-gap-1" }, h("span", null, "New")))), showColumnButton && (h("bcm-item", { id: hamburgerMenuId + "-hamburger-linked", color: "white" }, h("div", { class: "tw-flex tw-h-5 tw-w-full tw-flex-1 tw-items-center tw-justify-between tw-gap-1" }, h("span", { class: "tw-mr-2" }, "Add Column"), h("i", { class: "fas fa-chevron-right" })))), showExportButton && (h("bcm-item", { id: hamburgerMenuId + "-hamburger-extentions", color: "white" }, h("div", { class: "tw-flex tw-h-5 tw-w-full tw-flex-1 tw-items-center tw-justify-between tw-gap-1" }, h("span", { class: "tw-mr-2" }, "Exports"), h("i", { class: "fas fa-chevron-right" })))))), h("bcm-linked", { trigger: "hover", "target-id": hamburgerMenuId + "-hamburger-linked", placement: "left-start", "hide-delay": "200" }, h(Fragment, null, h("div", { class: "tw-shadow-custom tw-w-full tw-min-w-[200px] tw-flex-col tw-gap-2 tw-p-4" }, column === null || column === void 0 ? void 0 : column.map(col => {
+    return (h("bcm-item", { color: "white" }, h("div", { class: "tw-flex tw-h-5 tw-w-full tw-flex-1 tw-items-center tw-justify-between tw-gap-1" }, h("span", null, StringHelper.capitalize(col.id)), h("bcm-switch", { disabled: col.disabled, accessKey: col.id, id: col.id, class: "tw-mt-2", "no-caption": true, checked: true, "onBcm-change": e => onHideColumn({ checked: e.detail, id: col.id }) }))));
+  })))), h("bcm-linked", { trigger: "hover", "target-id": hamburgerMenuId + "-hamburger-extentions", placement: "left-start", "hide-delay": "200" }, h(Fragment, null, h("div", { class: "tw-shadow-custom tw-flex tw-w-full tw-min-w-[200px] tw-flex-col tw-gap-2 tw-p-4" }, extensions === null || extensions === void 0 ? void 0 : extensions.map(ext => {
+    return (h("div", { class: "tw-flex tw-w-full tw-flex-1 tw-cursor-pointer tw-flex-row tw-items-center tw-justify-start tw-gap-2 tw-rounded tw-bg-white tw-px-3 tw-py-[5px] tw-font-sans tw-text-size-4 tw-font-medium tw-antialiased hover:tw-bg-slate-100", onClick: () => onSelectExportType(ext) }, h("span", null, h("i", { class: "tw-text-size-5 " + ext.icon })), h("span", null, ext.text)));
+  }))))));
+};

package/dist/collection/templates/toolbar-template.js

@@ -0,0 +1,15 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { StringHelper } from "@bcm/helpers";
+import { Fragment, h } from "@stencil/core";
+import { ToolbarHamburgerTemplate } from "./toolbar-hamburger-template";
+export const ToolbarTemplate = ({ columns, config, extensions, tableId, onHideColumn, onSearch, onSelectExportType }) => {
+  const { showColumnButton, showExportButton, showNewButton, showFilterButton, showSearchInput } = config;
+  return (h("div", { class: "tw-flex tw-w-full tw-flex-row tw-items-center tw-justify-between" }, h("div", { class: "tw-flex tw-flex-row tw-items-center tw-justify-start tw-gap-2" }, h("slot", { name: "left" }), showFilterButton && (h("bcm-dropdown", { kind: "ghost" }, h("bcm-icon", { icon: "far fa-filter" }), "Filter", h("bcm-badge", { color: "blue", size: "small", value: "1" }, "1"))), showSearchInput && h("bcm-input", { class: "!tw-mb-0", placeholder: "Search", type: "search", "no-caption": true, "onBcm-input": e => onSearch(e.detail) })), h("div", null), h("div", { class: "tw-flex tw-flex-row tw-flex-wrap tw-items-center tw-justify-start tw-gap-2", id: "test" }, h("slot", { name: "right" }), showNewButton && h("bcm-button", { icon: "fas fa-plus" }, "New"), showColumnButton && (h("section", { class: "tw-hidden lg:tw-block md:tw-block" }, h("bcm-dropdown", { kind: "ghost", placement: "bottom-end" }, h("bcm-icon", { icon: "far fa-plus" }), "Add Column", h(Fragment, null, h("bcm-content", { class: "tw-hidden lg:tw-block md:tw-block" }, h("div", { class: "tw-shadow-custom tw-w-full tw-min-w-[256px] tw-flex-col tw-gap-2 tw-p-4" }, columns === null || columns === void 0 ? void 0 : columns.map(col => {
+    return (h("bcm-item", { color: "white" }, h("div", { class: "tw-flex tw-h-4 tw-w-full tw-flex-1 tw-items-center tw-justify-between tw-gap-1 tw-font-medium" }, h("span", null, StringHelper.capitalize(col.id)), h("bcm-switch", { class: "!tw-mt-2", disabled: col.disabled, "onBcm-change": e => onHideColumn({ checked: e.detail, id: col.id }), accessKey: col.id, id: col.id, "no-caption": true, checked: true }))));
+  }))))))), showExportButton && (h("section", { class: "tw-hidden lg:tw-block md:tw-block" }, (extensions === null || extensions === void 0 ? void 0 : extensions.length) > 1 && (h("bcm-dropdown", { id: tableId + "extention-content", selectable: false, kind: "ghost", class: "!tw-font-medium" }, "Export As", h("bcm-content", { class: "tw-hidden lg:tw-block md:tw-block" }, h("div", { class: "tw-shadow-custom tw-flex tw-w-full tw-min-w-[200px] tw-flex-col tw-gap-2 tw-p-4" }, extensions === null || extensions === void 0 ? void 0 : extensions.map(ext => {
+    return (h("div", { class: "tw-flex tw-w-full tw-flex-1 tw-cursor-pointer tw-flex-row tw-items-center tw-justify-start tw-gap-2 tw-rounded tw-bg-white tw-px-3 tw-py-[5px] tw-font-sans tw-text-size-4 tw-font-medium tw-antialiased hover:tw-bg-slate-100", onClick: () => onSelectExportType(ext) }, h("span", null, h("i", { class: "tw-text-size-5 " + ext.icon })), h("span", null, ext.text)));
+  }))))), (extensions === null || extensions === void 0 ? void 0 : extensions.length) == 1 && (h("bcm-button", { outline: true, onClick: () => onSelectExportType(extensions[0]) }, h("img", { src: "assets/" + extensions[0].path }), " Export as ", extensions[0].text))))), h("bcm-button", { outline: true, id: tableId + "-hamburger-menu", class: "sm:tw-block lg:tw-hidden md:tw-hidden", icon: "fas fa-bars" }), h(ToolbarHamburgerTemplate, { hamburgerMenuId: tableId + "-hamburger-menu", config: config, column: columns, extensions: extensions, onHideColumn: onHideColumn, onSelectExportType: onSelectExportType })));
+};

package/dist/components/_commonjsHelpers.js

@@ -18,8 +18,23 @@ function createCommonjsModule(fn, basedir, module) {
 	}, fn(module, module.exports), module.exports;
 }
 
+function getAugmentedNamespace(n) {
+	if (n.__esModule) return n;
+	var a = Object.defineProperty({}, '__esModule', {value: true});
+	Object.keys(n).forEach(function (k) {
+		var d = Object.getOwnPropertyDescriptor(n, k);
+		Object.defineProperty(a, k, d.get ? d : {
+			enumerable: true,
+			get: function () {
+				return n[k];
+			}
+		});
+	});
+	return a;
+}
+
 function commonjsRequire () {
 	throw new Error('Dynamic requires are not currently supported by @rollup/plugin-commonjs');
 }
 
-export { commonjsGlobal as a, createCommonjsModule as c, getDefaultExportFromCjs as g };
+export { commonjsGlobal as a, getDefaultExportFromCjs as b, createCommonjsModule as c, getAugmentedNamespace as g };

package/dist/components/avatar.js

@@ -3,89 +3,130 @@
  * Copyright (c) Bromcom.
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { C as ColorHelper } from './color-helper.js';
+import './color-helper.js';
 import './validators.js';
 import { G as Generate } from './generate.js';
-import { N as NumberHelper } from './number-helper.js';
+import './number-helper.js';
 import './string-helper.js';
 import './element-dragger.js';
 import { a as Bcm } from './bcm.js';
-import { c as classnames } from './index2.js';
+import { c as ce } from './index5.js';
 import { d as defineCustomElement$2 } from './badge.js';
 import { d as defineCustomElement$1 } from './icon.js';
 
-const avatarCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}*{box-sizing:border-box}.bcm-avatar{--bcm-avatar-color:var(--bcm-new-ds-color-slate-600);--bcm-avatar-background-color:var(--bcm-new-ds-color-slate-100);--prefix-height:40px;--prefix-font-size:font-size(2);font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;flex-wrap:nowrap;background-color:var(--bcm-avatar-background-color);color:var(--bcm-avatar-color);text-transform:uppercase}.bcm-avatar.hidden{display:none}.bcm-avatar img{width:100%;height:100%}.bcm-avatar__shape-ellipse,.bcm-avatar__shape-ellipse>img{border-radius:100px}.bcm-avatar__shape-square,.bcm-avatar__shape-square>img{border-radius:4px}.bcm-avatar__shape-ellipse .bcm-badge{top:0px;right:0px}.bcm-avatar__shape-square .bcm-badge{top:-2px;right:-2px}.bcm-avatar__size-small{font-size:10px;line-height:calc(10px + 8px);height:24px;width:24px}.bcm-avatar__size-medium{font-size:12px;line-height:calc(12px + 8px);height:32px;width:32px}.bcm-avatar__size-large{font-size:14px;line-height:calc(14px + 8px);height:40px;width:40px}.bcm-avatar__size-custom{font-size:var(--bcm-avatar-font-size);line-height:calc(var(--bcm-avatar-font-size) + 8px);height:var(--bcm-avatar-height);width:var(--bcm-avatar-height)}.bcm-avatar__status{position:relative}.bcm-avatar__status .bcm-badge{position:absolute}";
+const avatarStyle = ce({
+  slots: {
+    base: "bcm-avatar bcm-ui-element bcm-ui-content-display tw-uppercase tw-inline-flex tw-items-center tw-justify-center tw-bg-[--bcm-avatar-bg] tw-text-[--bcm-avatar-text]",
+    image: "tw-w-full tw-h-full",
+    badge: "",
+  },
+  variants: {
+    size: {
+      small: "bcm-avatar__size-small tw-text-1 tw-w-6 tw-h-6",
+      medium: "bcm-avatar__size-medium tw-text-2 tw-w-8 tw-h-8",
+      large: "bcm-avatar__size-large tw-text-3 tw-w-10 tw-h-10",
+    },
+    shape: {
+      ellipse: {
+        base: "bcm-avatar__shape-ellipse tw-rounded-full",
+        image: "tw-rounded-full",
+        badge: "tw-top-0 tw-right-0",
+      },
+      square: {
+        base: "bcm-avatar__shape-square tw-rounded",
+        image: "tw-rounded",
+        badge: "tw--top-0.5 tw--right-0.5",
+      },
+    },
+    status: {
+      true: {
+        base: "bcm-avatar__status tw-relative",
+        badge: "tw-absolute",
+      },
+    },
+  },
+  defaultVariants: {
+    size: "medium",
+    shape: "ellipse",
+    status: false,
+  },
+});
 
 const BcmAvatar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this._id = Generate.UID();
-    this.hidden = false;
     this.image = undefined;
     this.name = undefined;
     this.alt = undefined;
     this.shape = Bcm.Shape.ellipse;
     this.size = Bcm.Size.medium;
     this.color = undefined;
+    this.icon = "fas fa-user";
     this.status = undefined;
+    this.blink = false;
     this.isFallback = false;
   }
-  componentWillLoad() {
-    this.name = this.name && this.name.trim() || '';
-  }
-  handleError() {
-    this.isFallback = true;
-  }
-  getCustomSizes(customSize) {
-    return Math.round(parseInt(customSize) / 3);
-  }
   getFirstLetters(name) {
-    const splitted = name.split(' ');
-    if (splitted.length === 1)
-      return splitted[0].substring(0, 2);
-    return splitted[0].charAt(0) + splitted[splitted.length - 1].charAt(0);
+    const words = name.split(" ");
+    const initials = words.map(word => word.charAt(0).toUpperCase()).join("");
+    return initials.substring(0, 2);
   }
-  setStyleVariables() {
-    const { size } = this;
-    let { color } = this;
-    !color && (color = 'slate');
-    let height = NumberHelper.toNumber(size);
-    let fontSize = Math.round(parseInt(height) / 3);
-    const prefix = `--bcm-avatar`;
-    return {
-      [`${prefix}-color`]: ColorHelper.dsColor(`${color}-600`),
-      [`${prefix}-background-color`]: ColorHelper.dsColor(`${color}-100`),
-      [`${prefix}-height`]: `${height}px`,
-      [`${prefix}-font-size`]: `${fontSize}px`
-    };
+  renderDefaultIcon() {
+    return h("bcm-icon", { icon: this.icon });
   }
   render() {
-    const { image, name, alt, hidden, shape, size, status } = this;
-    const isCustom = !Object.keys(Bcm.BaseSize).includes(size);
-    const hostClasses = classnames('bcm-avatar', `bcm-avatar__shape-${shape}`, `bcm-avatar__size-${isCustom ? 'custom' : size}`, {
-      'hidden': hidden,
-      'bcm-avatar__status': !!status
+    const { shape, size, status, color, blink } = this;
+    const { base, badge, image } = avatarStyle({ size, shape, status: !!status });
+    const dc = Generate.getTwColor({
+      color: color,
+      tones: {
+        200: ["bg"],
+        700: ["text"],
+      },
+      variable: "--bcm-avatar",
     });
-    const GetIcon = () => h("bcm-icon", { icon: "fas fa-user" });
-    return (h(Host, { class: hostClasses, style: this.setStyleVariables() }, h("span", { hidden: true }, h("slot", null)), this.isFallback ? (this.name ? this.getFirstLetters(this.name) : GetIcon())
-      : image
-        ? h("img", { onError: () => this.handleError(), src: image, alt: alt })
-        : name ? this.getFirstLetters(name)
-          : GetIcon(), status && h("bcm-badge", { status: status })));
+    const customSize = !Object.keys(Bcm.BaseSize).includes(size)
+      ? {
+        width: `${size}px`,
+        height: `${size}px`,
+        fontSize: `${+size / 3}px`,
+      }
+      : {};
+    const RenderContent = () => {
+      if (this.isFallback) {
+        if (this.name) {
+          return this.getFirstLetters(this.name);
+        }
+        else {
+          return this.renderDefaultIcon();
+        }
+      }
+      else if (this.image) {
+        return h("img", { class: image(), onError: () => (this.isFallback = true), src: this.image, alt: this.alt });
+      }
+      else if (this.name) {
+        return this.getFirstLetters(this.name);
+      }
+      else {
+        return this.renderDefaultIcon();
+      }
+    };
+    return (h(Host, { role: "img", "aria-label": this.alt || this.name || "Avatar", class: base(), style: Object.assign(Object.assign({}, dc), customSize) }, h(RenderContent, null), status && h("bcm-badge", { class: badge(), status: status, blink: blink, "aria-hidden": "true" }), h("slot", null)));
   }
   get el() { return this; }
-  static get style() { return avatarCss; }
 }, [4, "bcm-avatar", {
-    "_id": [1537, "id"],
-    "hidden": [1028],
-    "image": [1025],
-    "name": [1025],
-    "alt": [1025],
-    "shape": [1025],
-    "size": [1025],
-    "color": [1032],
-    "status": [1025],
+    "_id": [513, "id"],
+    "image": [1],
+    "name": [1],
+    "alt": [1],
+    "shape": [1],
+    "size": [1],
+    "color": [1],
+    "icon": [1],
+    "status": [1],
+    "blink": [4],
     "isFallback": [32]
   }]);
 function defineCustomElement() {

package/dist/components/badge.js

@@ -3,70 +3,102 @@
  * Copyright (c) Bromcom.
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as classnames } from './index2.js';
-import { a as Bcm } from './bcm.js';
-import { G as Generate } from './generate.js';
-import { S as SlotTemplate } from './slot-template.js';
 import { C as ColorHelper } from './color-helper.js';
+import './validators.js';
+import { G as Generate } from './generate.js';
+import './number-helper.js';
+import './string-helper.js';
+import './element-dragger.js';
+import { a as Bcm } from './bcm.js';
+import { c as ce } from './index5.js';
 
-const badgeCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}*{box-sizing:border-box}.bcm-badge{--bcm-badge-color:var(--bcm-new-ds-color-white);--bcm-badge-background-color:var(--bcm-new-ds-color-slate-400);--bcm-badge-spacing:4px;font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;justify-content:flex-start;flex-wrap:nowrap;gap:4px}.bcm-badge.hidden{display:none}.bcm-badge span:empty{display:none}.bcm-badge__dot{color:var(--bcm-badge-color);background-color:var(--bcm-badge-background-color);display:inline-block;border-radius:100px;position:relative}.bcm-badge__dot-text{display:flex;flex-direction:row;align-items:center;justify-content:center;flex-wrap:nowrap;padding:0 var(--bcm-badge-spacing);z-index:2;color:var(--bcm-badge-color)}.bcm-badge__dot-size-small{font-size:10px;line-height:calc(10px + 8px);min-width:6px;min-height:6px}.bcm-badge__dot-size-small .bcm-badge__dot-text{min-width:calc(10px + 8px)}.bcm-badge__dot-size-medium{font-size:12px;line-height:calc(12px + 8px);min-width:8px;min-height:8px}.bcm-badge__dot-size-medium .bcm-badge__dot-text{min-width:calc(12px + 8px)}.bcm-badge__dot-size-large{font-size:14px;line-height:calc(14px + 8px);min-width:10px;min-height:10px}.bcm-badge__dot-size-large .bcm-badge__dot-text{min-width:calc(14px + 8px)}.bcm-badge__dot-blink{position:relative;z-index:1}.bcm-badge__dot-blink:after{content:\"\";position:absolute;z-index:-1;top:0;left:0;background:var(--bcm-badge-background-color);border-radius:100px;opacity:0.7;box-shadow:0 0 0 0 rgba(0, 0, 0, 0);transform:scale(1);width:100%;height:100%}.bcm-badge__dot:after{background-color:var(--bcm-badge-background-color);animation:badge-pulse 2s infinite}@keyframes badge-pulse{0%{transform:scale(0.95);box-shadow:0 0 0 0 var(--bcm-badge-background-color)}70%{transform:scale(1);box-shadow:0 0 0 10px rgba(0, 0, 0, 0)}100%{transform:scale(0.95);box-shadow:0 0 0 0 rgba(0, 0, 0, 0)}}";
+const badgeStyle = ce({
+  slots: {
+    host: "bcm-badge bcm-ui-element bcm-ui-content-display tw-inline-flex tw-items-center tw-justify-center tw-font-normal ",
+    base: [
+      "bcm-badge__dot",
+      "tw-flex tw-items-center tw-justify-center tw-flex-row",
+      "tw-rounded-full tw-text-center",
+      "tw-bg-[--bcm-badge-bg] tw-text-[--bcm-badge-text]",
+      "tw-whitespace-nowrap",
+    ],
+    dotText: "empty:tw-hidden",
+  },
+  variants: {
+    size: {
+      small: {
+        host: "tw-text-2 tw-gap-1",
+        base: "bcm-badge__dot-size-small tw-text-1 tw-min-w-1.5 tw-min-h-1.5",
+        dotText: "tw-px-1.5 tw-min-w-4",
+      },
+      medium: {
+        host: "tw-text-3 tw-gap-1.5",
+        base: "bcm-badge__dot-size-medium tw-text-2 tw-min-w-2 tw-min-h-2",
+        dotText: "tw-px-1.5 tw-min-w-5",
+      },
+      large: {
+        host: "tw-text-4 tw-gap-2",
+        base: "bcm-badge__dot-size-large tw-text-3 tw-min-w-2.5 tw-min-h-2.5",
+        dotText: "tw-px-2 tw-min-w-6",
+      },
+    },
+    blink: {
+      true: {
+        base: [
+          "bcm-badge__dot-blink tw-relative",
+          "after:tw-content-[''] after:tw-absolute after:tw-top-0 after:tw-left-0 after:tw-z-[-1]",
+          "after:tw-w-full after:tw-h-full after:tw-bg-[--bcm-badge-bg] after:tw-opacity-75 after:tw-rounded-full",
+          "after:tw-animate-blink after:tw-pointer-events-none",
+        ],
+      },
+    },
+  },
+  defaultVariants: {
+    size: "medium",
+    blink: false,
+  },
+});
 
 const BcmBadge = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    this.statusColors = {
+      info: "blue",
+      error: "red",
+      warning: "amber",
+      success: "emerald",
+    };
     this._id = Generate.UID();
-    this.hidden = false;
     this.blink = false;
     this.value = undefined;
     this.color = undefined;
     this.size = Bcm.Size.medium;
     this.status = undefined;
-    this._slot = undefined;
-  }
-  setStyleVariables() {
-    const { status, value } = this;
-    let { color } = this;
-    const statusColors = {
-      'info': 'blue',
-      'error': 'red',
-      'warning': 'amber',
-      'success': 'emerald',
-      'default': 'slate'
-    };
-    !!status && (color = statusColors[status]);
-    !color && (color = 'slate');
-    const prefix = `--bcm-badge`;
-    const spacing = !!value && value.length > 1 ? '8' : '4';
-    return {
-      [`${prefix}-color`]: ColorHelper.reverseColor(ColorHelper.dsColor(`${color}`)),
-      [`${prefix}-background-color`]: ColorHelper.dsColor(`${color}`),
-      [`${prefix}-spacing`]: `${spacing}px`
-    };
   }
   render() {
-    let { blink, value, size, _slot, hidden } = this;
-    const dotClass = classnames('bcm-badge__dot', 'bcm-badge__dot-size-' + size, 
-    // 'size-2',
-    {
-      'bcm-badge__dot-blink': blink
-    });
-    const hostClasses = classnames('bcm-badge', {
-      hidden
+    const { blink, value, size, color, status } = this;
+    const _color = this.statusColors[status] || color;
+    const { tone, colorName } = ColorHelper.parseColor(_color);
+    const dc = Generate.getTwColor({
+      color: colorName,
+      tones: {
+        [tone]: ["bg"],
+      },
+      variable: "--bcm-badge",
     });
-    return (h(Host, { class: hostClasses, style: this.setStyleVariables() }, h("span", { hidden: true }, h("slot", null)), h("div", { class: dotClass }, !!value && h("span", { class: "bcm-badge__dot-text" }, value)), h(SlotTemplate, { value: _slot })));
+    const style = Object.assign(Object.assign({}, dc), (dc["--bcm-badge-bg"] && { "--bcm-badge-text": ColorHelper.reverseColor(dc["--bcm-badge-bg"]) }));
+    const { base, dotText, host } = badgeStyle({ size, blink });
+    return (h(Host, { class: host(), role: "status", "aria-live": "polite" }, h("div", { class: base(), style: style }, h("span", { class: dotText(), role: "presentation", "aria-hidden": "true" }, value), h("span", { class: "tw-sr-only" }, value)), h("slot", null)));
   }
   get el() { return this; }
-  static get style() { return badgeCss; }
 }, [4, "bcm-badge", {
-    "_id": [1537, "id"],
-    "hidden": [1028],
-    "blink": [1028],
-    "value": [1025],
-    "color": [1032],
-    "size": [1025],
-    "status": [1025],
-    "_slot": [1032, "slot"]
+    "_id": [513, "id"],
+    "blink": [4],
+    "value": [1],
+    "color": [8],
+    "size": [1],
+    "status": [1]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

package/dist/components/bcm-chip-group.js

@@ -15,10 +15,11 @@ import { c as classnames } from './index2.js';
 import './types.js';
 import { L as LabelTemplate } from './label-template.js';
 import './types2.js';
-import { d as defineCustomElement$9 } from './avatar.js';
-import { d as defineCustomElement$8 } from './badge.js';
-import { d as defineCustomElement$7 } from './chip.js';
-import { d as defineCustomElement$6 } from './icon.js';
+import { d as defineCustomElement$a } from './avatar.js';
+import { d as defineCustomElement$9 } from './badge.js';
+import { d as defineCustomElement$8 } from './chip.js';
+import { d as defineCustomElement$7 } from './icon.js';
+import { d as defineCustomElement$6 } from './label.js';
 import { d as defineCustomElement$5 } from './list.js';
 import { d as defineCustomElement$4 } from './rc-overflow.js';
 import { d as defineCustomElement$3 } from './search.js';
@@ -138,7 +139,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["bcm-chip-group", "bcm-avatar", "bcm-badge", "bcm-chip", "bcm-icon", "bcm-list", "bcm-rc-overflow", "bcm-search", "bcm-tooltip"];
+  const components = ["bcm-chip-group", "bcm-avatar", "bcm-badge", "bcm-chip", "bcm-icon", "bcm-label", "bcm-list", "bcm-rc-overflow", "bcm-search", "bcm-tooltip"];
   components.forEach(tagName => { switch (tagName) {
     case "bcm-chip-group":
       if (!customElements.get(tagName)) {
@@ -147,20 +148,25 @@ function defineCustomElement$1() {
       break;
     case "bcm-avatar":
       if (!customElements.get(tagName)) {
-        defineCustomElement$9();
+        defineCustomElement$a();
       }
       break;
     case "bcm-badge":
       if (!customElements.get(tagName)) {
-        defineCustomElement$8();
+        defineCustomElement$9();
       }
       break;
     case "bcm-chip":
       if (!customElements.get(tagName)) {
-        defineCustomElement$7();
+        defineCustomElement$8();
       }
       break;
     case "bcm-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "bcm-label":
       if (!customElements.get(tagName)) {
         defineCustomElement$6();
       }

package/dist/components/bcm-date-picker.js

@@ -15,7 +15,7 @@ import { d as defineCustomElement$4 } from './label.js';
 import { d as defineCustomElement$3 } from './old-input.js';
 import { d as defineCustomElement$2 } from './tooltip.js';
 
-const datePickerCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}:host{display:inline-block;width:100%;max-width:256px}:host(.full-width){max-width:100%}:host(.hidden){display:none}:host(.linked-component){display:none}";
+const datePickerCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}:host{display:inline-flex;width:100%;max-width:256px}:host(.full-width){max-width:100%}:host(.hidden){display:none}:host(.linked-component){display:none}";
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -45,6 +45,7 @@ const BcmDatePicker$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     this.placeholder = undefined;
     this.disabledDates = '';
     this.disabled = false;
+    this.noMargin = false;
     this.noCaption = false;
     this.caption = '';
     this.captionError = undefined;
@@ -165,7 +166,7 @@ const BcmDatePicker$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
       'full-width': this.fullWidth,
       'linked-component': this.linkedComponent,
     });
-    return (h(Host, { class: hostClasses }, h("bcm-datetime-picker", { "linked-component": this.linkedComponent, id: this._id, name: this.name, type: this.range ? 'range' : 'date', date: this.date, placeholder: this.placeholder, fullWidth: this.fullWidth, ref: el => (this.picker = el), required: this.required, clearable: this.clearable, label: this.label, "end-date": this.endDate, disabled: this.disabled, disabledDates: this.disabledDates, "on-bcm-load": () => this.handlePickerLoad(), "on-bcm-change": (e) => this.handlePickerChange(e), noCaption: this.noCaption, caption: this.caption, captionError: this.captionError, captionType: this.captionType, alignment: this.alignment, placement: this.placement })));
+    return (h(Host, { class: hostClasses }, h("bcm-datetime-picker", { "linked-component": this.linkedComponent, id: this._id, name: this.name, type: this.range ? 'range' : 'date', date: this.date, placeholder: this.placeholder, fullWidth: this.fullWidth, ref: el => (this.picker = el), required: this.required, clearable: this.clearable, label: this.label, "end-date": this.endDate, disabled: this.disabled, disabledDates: this.disabledDates, "on-bcm-load": () => this.handlePickerLoad(), "on-bcm-change": (e) => this.handlePickerChange(e), noCaption: this.noCaption, caption: this.caption, captionError: this.captionError, captionType: this.captionType, alignment: this.alignment, placement: this.placement, noMargin: this.noMargin })));
   }
   get el() { return this; }
   static get watchers() { return {
@@ -187,6 +188,7 @@ const BcmDatePicker$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     "placeholder": [1025],
     "disabledDates": [1032, "disableddates"],
     "disabled": [1028],
+    "noMargin": [1028, "no-margin"],
     "noCaption": [1028, "no-caption"],
     "caption": [1025],
     "captionError": [1025, "caption-error"],

package/dist/components/bcm-date.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface BcmDate extends Components.BcmDate, HTMLElement {}
+export const BcmDate: {
+  prototype: BcmDate;
+  new (): BcmDate;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;