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

package/dist/components/string-helper.js

@@ -105,10 +105,10 @@ StringHelper.slugify = (str) => slugify(str, {
   trim: false, // trim leading and trailing replacement chars, defaults to `true`
 });
 StringHelper.highlight = (str, search) => {
-  const searchText = search;
-  const regex = new RegExp(searchText, 'gi');
   let text = str;
   text = text.replace(/(<mark>|<\/mark>)/gim, '');
+  const escapedSearch = search.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'); // Özel karakterleri kaçış dizileri ile kaçır
+  const regex = new RegExp(escapedSearch, 'gi');
   const newText = text.replace(regex, '<mark>$&</mark>');
   return newText;
 };

package/dist/components/textarea.js

@@ -0,0 +1,220 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+import { I as IsLoad } from './is-load-decorator.js';
+import { G as Generate } from './generate.js';
+import { B as Bcm } from './bcm.js';
+import { C as CaptionTemplate } from './caption-template.js';
+import { I as InputTemplate } from './input-template.js';
+import { d as delay } from './utils.js';
+import { d as defineCustomElement$3 } from './icon.js';
+import { d as defineCustomElement$2 } from './label.js';
+import { d as defineCustomElement$1 } from './tooltip.js';
+
+var ResizeType;
+(function (ResizeType) {
+  ResizeType["none"] = "none";
+  ResizeType["both"] = "both";
+  ResizeType["horizontal"] = "horizontal";
+  ResizeType["vertical"] = "vertical";
+  ResizeType["initial"] = "initial";
+  ResizeType["inherit"] = "inherit";
+})(ResizeType || (ResizeType = {}));
+
+const textareaCss = "@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\"); @import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); @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-caption-area{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;font-size:12px;line-height:calc(12px + 8px);color:var(--bcm-new-ds-color-slate-400);display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;flex-wrap:nowrap;margin-top:2px}.bcm-caption-area__text{color:var(--bcm-new-ds-color-slate-400)}.bcm-caption-area__text.default{color:var(--bcm-new-ds-color-slate-400)}.bcm-caption-area__text.info{color:var(--bcm-new-ds-color-blue-500)}.bcm-caption-area__text.success{color:var(--bcm-new-ds-color-emerald-500)}.bcm-caption-area__text.warning{color:var(--bcm-new-ds-color-amber-500)}.bcm-caption-area__text.error{color:var(--bcm-new-ds-color-red-500)}.bcm-caption-area__size-small{font-size:10px;line-height:calc(10px + 8px);min-height:calc(10px + 8px)}.bcm-caption-area__size-medium{font-size:12px;line-height:calc(12px + 8px);min-height:calc(12px + 8px)}.bcm-caption-area__size-large{font-size:14px;line-height:calc(14px + 8px);min-height:calc(14px + 8px)}*{box-sizing:border-box}.bcm-label{display:inline-flex;align-items:flex-start;grid-gap:2px}.bcm-label__text{margin-bottom:2px;font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:inline-block;color:var(--bcm-new-ds-color-slate-600)}.bcm-label__size-small{font-size:10px;line-height:calc(10px + 8px);min-height:calc(10px + 8px)}.bcm-label__size-medium{font-size:12px;line-height:calc(12px + 8px);min-height:calc(12px + 8px)}.bcm-label__size-large{font-size:14px;line-height:calc(14px + 8px);min-height:calc(14px + 8px)}.bcm-input[no-margin]{margin:0}.bcm-textarea[no-margin]{margin:0}.bcm-switch[no-margin]{margin:0}.bcm-checkbox[no-margin]{margin:0}.bcm-radio-group[no-margin]{margin:0}.bcm-checkbox-group[no-margin]{margin:0}.bcm-range[no-margin]{margin:0}.bcm-form[no-margin]{margin:0}.bcm-form-group[no-margin]{margin:0}.bcm-list[no-margin]{margin:0}.bcm-colorpicker[no-margin]{margin:0}.bcm-date-picker[no-margin]{margin:0}.bcm-time-picker[no-margin]{margin:0}.bcm-datetime-picker[no-margin]{margin:0}.bcm-select[no-margin]{margin:0}.bcm-listbox[no-margin]{margin:0}*{box-sizing:border-box}.bcm-input{display:inline-flex;flex-direction:column;width:100%;max-width:256px;margin-bottom:8px}.bcm-input.full-width{max-width:100%}.bcm-input.hidden{display:none}.bcm-input__container{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:flex;align-items:stretch;flex-direction:row;background-color:var(--bcm-new-ds-color-white);border:1px solid var(--bcm-new-ds-color-slate-300);border-radius:4px;box-sizing:border-box;cursor:text;padding:0 0 0 4px;position:relative;width:100%}.bcm-input__container.disabled{background-color:var(--bcm-new-ds-color-slate-50);cursor:not-allowed}.bcm-input__container.disabled .bcm-input-element{color:var(--bcm-new-ds-color-slate-500)}.bcm-input__container.readonly{background-color:var(--bcm-new-ds-color-slate-50);cursor:default}.bcm-input__container.readonly .bcm-input-element{color:var(--bcm-new-ds-color-slate-600)}.bcm-input__container:not(.disabled):hover .caret-container,.bcm-input__container:not(.disabled).focused .caret-container{opacity:1}.bcm-input__container:not(.disabled):hover .input-clear-button,.bcm-input__container:not(.disabled).focused .input-clear-button{opacity:1}.bcm-input__container:not(.disabled).focused{background-color:var(--bcm-new-ds-color-slate-50)}.bcm-input__container:not(.disabled):hover{border-color:var(--bcm-color-prime-blue-6)}.bcm-input__container.empty .input-clear-button{display:none}.bcm-input__container.invalid,.bcm-input__container.error{border-color:var(--bcm-new-ds-color-red-500)}.bcm-input__container .bcm-input-element{width:100%;color:var(--bcm-new-ds-color-slate-600);flex:1;border:none;background:transparent;box-shadow:unset;padding:0 4px;font-family:\"Inter\", sans-serif;cursor:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;overflow:hidden;text-overflow:ellipsis}.bcm-input__container .bcm-input-element::placeholder{font-family:\"Inter\", sans-serif;color:var(--bcm-new-ds-color-slate-300);user-select:none}.bcm-input__container .bcm-input-element::-webkit-search-decoration,.bcm-input__container .bcm-input-element::-webkit-search-cancel-button,.bcm-input__container .bcm-input-element::-webkit-search-results-button,.bcm-input__container .bcm-input-element::-webkit-search-results-decoration,.bcm-input__container .bcm-input-element::-webkit-calendar-picker-indicator,.bcm-input__container .bcm-input-element::-webkit-inner-spin-button,.bcm-input__container .bcm-input-element::-webkit-outer-spin-button{-webkit-appearance:none}.bcm-input__container .caret-container{width:30px;display:flex;flex-direction:column;justify-content:center;align-items:stretch;border-left:1px solid #D9D9D9;transition:0.2s opacity;user-select:none;box-sizing:border-box}.bcm-input__container .caret-container .bcm-input-caret{display:flex;align-items:center;justify-content:center;color:var(--bcm-color-grey-7);cursor:pointer;flex:1}.bcm-input__container .caret-container .bcm-input-caret bcm-icon{line-height:1}.bcm-input__container .caret-container .bcm-input-caret:hover{color:var(--bcm-color-prime-blue-6)}.bcm-input__container .caret-container .bcm-input-caret:active{background-color:var(--bcm-color-grey-3)}.bcm-input__container .caret-container .bcm-input-caret:last-child{border-top:1px solid #D9D9D9}.bcm-input__container .caret-container.disabled{background-color:var(--bcm-color-grey-3)}.bcm-input__container .caret-container.disabled .bcm-input-caret{cursor:not-allowed}.bcm-input__container .input-suffix-content{display:flex;align-items:center;justify-content:center}.bcm-input__container .input-prefix:not(:empty){padding-left:4px}.bcm-input__container .input-suffix:not(:empty){min-width:24px;padding-right:4px}.bcm-input__container .input-prefix:not(:empty),.bcm-input__container .input-suffix:not(:empty){display:flex;align-items:center;justify-content:center;cursor:default;color:#64748a}.bcm-input__container .input-prefix:not(:empty) .unit-prefix,.bcm-input__container .input-suffix:not(:empty) .unit-prefix{color:#64748a}.bcm-input__container .input-prefix-button:not(:empty),.bcm-input__container .input-suffix-button:not(:empty){cursor:pointer}.bcm-input__container .caret-container,.bcm-input__container .input-clear-button{opacity:0}.bcm-input__container--small{font-size:12px}.bcm-input__container--medium{font-size:14px}.bcm-input__container--large{font-size:16px}.bcm-input__textarea.clearable .bcm-input-element{padding-right:24px}.bcm-input__textarea .input-clear-button{position:absolute;top:4px;right:0}";
+
+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;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const BcmTextarea = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.focus = createEvent(this, "bcm-focus", 7);
+    this.blur = createEvent(this, "bcm-blur", 7);
+    this.clear = createEvent(this, "bcm-clear", 7);
+    this.change = createEvent(this, "bcm-change", 7);
+    this.input = createEvent(this, "bcm-input", 7);
+    this._id = Generate.UID();
+    this._internal_id = Generate.UID();
+    this.hidden = false;
+    this.value = undefined;
+    this.placeholder = undefined;
+    this.label = undefined;
+    this.name = undefined;
+    this.required = false;
+    this.caption = undefined;
+    this.noCaption = false;
+    this.captionError = undefined;
+    this.captionType = Bcm.Status.default;
+    this.rows = 3;
+    this.size = Bcm.Size.medium;
+    this.disabled = undefined;
+    this.readonly = false;
+    this.clearable = undefined;
+    this.resize = ResizeType.vertical;
+    this.fullWidth = false;
+    this.maxLength = undefined;
+    this.focused = false;
+    this.captionCache = undefined;
+    this.captionTypeCache = undefined;
+  }
+  connectedCallback() {
+    this.captionCache = this.caption;
+    this.captionTypeCache = this.captionType;
+  }
+  async onBcmFocus() {
+    this.textarea.focus();
+  }
+  async onBcmBlur() {
+    this.textarea.blur();
+  }
+  async onBcmSelect() {
+    this.textarea.select();
+  }
+  async set(data) {
+    await this.setValue(data);
+  }
+  async get() {
+    return this.value || null;
+  }
+  async setValue(value) {
+    this.textarea.value = value;
+    this.value = value;
+    this.handleChange();
+    return value;
+  }
+  async setClear() {
+    this.textarea.value = '';
+    this.value = '';
+    await delay(10);
+    return Promise.resolve();
+  }
+  async resetCaption() {
+    await delay(10);
+    this.caption = this.captionCache;
+    this.captionType = this.captionTypeCache;
+    this.captionError = null;
+    await delay(10);
+    return Promise.resolve();
+  }
+  async getValue() {
+    return this.value;
+  }
+  watchValue(newValue) {
+    this.textarea.value = newValue;
+    this.handleChange();
+  }
+  handleFocus() {
+    this.focused = true;
+    this.focus.emit();
+  }
+  handleBlur() {
+    this.focused = false;
+    this.blur.emit();
+  }
+  handleChange() {
+    this.value = this.textarea.value;
+    this.change.emit(this.value);
+  }
+  handleInput() {
+    this.value = this.textarea.value;
+    this.input.emit(this.value);
+  }
+  handleClear(e) {
+    this.textarea.value = '';
+    this.value = '';
+    this.clear.emit();
+    this.textarea.focus();
+    e.stopPropagation();
+  }
+  render() {
+    const { _id, hidden, readonly, fullWidth, size, rows, disabled, clearable, label, focused, noCaption, caption, captionError, captionType, value, resize, maxLength, placeholder, required } = this;
+    const hostClasses = classnames('bcm-input', {
+      hidden,
+      'full-width': fullWidth,
+    });
+    return (h(Host, { class: hostClasses }, label && h("bcm-label", { type: captionType, value: label, required: required, htmlFor: _id }), h(InputTemplate, { elementType: Bcm.HtmlElementType.textarea, id: _id, value: value, rows: rows, disabled: disabled, maxLength: maxLength, placeholder: placeholder, clearable: clearable, resize: resize, readonly: readonly, size: size, focused: focused, handleFocus: () => this.handleFocus(), handleBlur: () => this.handleBlur(), handleChange: () => this.handleChange(), handleInput: () => this.handleInput(), handleClear: (e) => this.handleClear(e), ref: (el) => this.textarea = el, captionType: captionType }), h(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption, value: value, maxLength: maxLength })));
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "value": ["watchValue"]
+  }; }
+  static get style() { return textareaCss; }
+}, [4, "bcm-textarea", {
+    "_id": [1537, "id"],
+    "_internal_id": [1025],
+    "hidden": [1028],
+    "value": [1025],
+    "placeholder": [1025],
+    "label": [1025],
+    "name": [1025],
+    "required": [1028],
+    "caption": [1025],
+    "noCaption": [1028, "no-caption"],
+    "captionError": [1025, "caption-error"],
+    "captionType": [1025, "caption-type"],
+    "rows": [1026],
+    "size": [1025],
+    "disabled": [1028],
+    "readonly": [1028],
+    "clearable": [1028],
+    "resize": [1032],
+    "fullWidth": [1028, "full-width"],
+    "maxLength": [1026, "max-length"],
+    "focused": [32],
+    "captionCache": [32],
+    "captionTypeCache": [32],
+    "onBcmFocus": [64],
+    "onBcmBlur": [64],
+    "onBcmSelect": [64],
+    "set": [64],
+    "get": [64],
+    "setValue": [64],
+    "setClear": [64],
+    "resetCaption": [64],
+    "getValue": [64]
+  }]);
+__decorate([
+  IsLoad()
+], BcmTextarea.prototype, "el", void 0);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["bcm-textarea", "bcm-icon", "bcm-label", "bcm-tooltip"];
+  components.forEach(tagName => { switch (tagName) {
+    case "bcm-textarea":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, BcmTextarea);
+      }
+      break;
+    case "bcm-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "bcm-label":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "bcm-tooltip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { BcmTextarea as B, defineCustomElement as d };

package/dist/components/tooltip-helper.js

@@ -22,7 +22,6 @@ class Tooltip {
       }
       this.removeListener();
     };
-    this.bgColor = () => ColorHelper.twColor(this.color, 700);
     this.target = () => document.getElementById(this.targetId);
     this.sizeClass = () => {
       switch (this.size) {
@@ -37,13 +36,22 @@ class Tooltip {
       }
     };
     this.init = () => {
+      const { tone, colorName } = ColorHelper.parseColor(this.color, 700);
+      const dc = Generate.getTwColor({
+        color: colorName,
+        tones: {
+          [tone]: ["bg"],
+        },
+        variable: "--bcm-tooltip",
+      });
+      const style = Object.assign(Object.assign({}, dc), (dc["--bcm-tooltip-bg"] && { "--bcm-tooltip-text": ColorHelper.reverseColor(dc["--bcm-tooltip-bg"]) }));
       this.el = Generate.createElement("div", {
         "id": `${this.targetId}-tooltip-box`,
         "class": `
-            tw-whitespace-normal tw-break-words tw-block tw-font-sans tw-pointer-events-none tw-max-w-xs tw-py-1 tw-px-2 tw-rounded tw-bg-${this.bgColor()} tw-text-white ${this.sizeClass()} tw-absolute tw-top-0 tw-left-0 tw-z-tooltip tw-opacity-0 tw-transition-opacity tw-duration-300`,
+            tw-whitespace-normal tw-break-words tw-block tw-font-sans tw-pointer-events-none tw-max-w-xs tw-py-1 tw-px-2 tw-rounded tw-bg-[--bcm-tooltip-bg] tw-text-[--bcm-tooltip-text] ${this.sizeClass()} tw-absolute tw-top-0 tw-left-0 tw-z-tooltip tw-opacity-0 tw-transition-opacity tw-duration-300`,
         "role": "tooltip",
         "aria-hidden": "true",
-        "style": `color: ${ColorHelper.twColorReverse(this.bgColor())}`,
+        "style": ColorHelper.generateStyleString(style),
         "innerHTML": StringHelper.trim(this.message),
       });
     };
@@ -97,7 +105,7 @@ class Tooltip {
           placement: this.placement,
           offset: 8,
           arrow: true,
-          arrowColor: `tw-bg-${this.bgColor()}`,
+          arrowColor: `tw-bg-[--bcm-tooltip-bg]`,
         });
       }
     };

package/dist/components/tooltip.js

@@ -79,7 +79,7 @@ const BcmTooltip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.tooltip.toggle();
   }
   render() {
-    return (h(Host, { "aria-describedby": "tooltip", class: "tw-inline-flex tw-h-fit tw-w-fit" }, h("slot", null)));
+    return (h(Host, { class: "tw-inline-flex tw-h-fit tw-w-fit", role: "tooltip", "aria-hidden": "true" }, h("slot", null)));
   }
   get el() { return this; }
 }, [4, "bcm-tooltip", {

package/dist/components/typography.js

@@ -10,7 +10,7 @@ const BcmTypography = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.__registerHost();
   }
   render() {
-    return (h(Host, null, h("slot", null)));
+    return (h(Host, { class: "bcm-ui-element bcm-ui-content-display" }, h("slot", null)));
   }
   get el() { return this; }
 }, [4, "bcm-typography"]);

package/dist/esm/{_commonjsHelpers-3016b722.js → _commonjsHelpers-7002e5de.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/esm/bcm-accordion.entry.js

@@ -2,10 +2,11 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-348b16ad.js';
-import { G as Generate } from './generate-1d92d93f.js';
-import './colors-44c95e7e.js';
-import './_commonjsHelpers-3016b722.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-0615c2b8.js';
+import { G as Generate } from './generate-57891049.js';
+import './package-9a6c49c8.js';
+import './colors-ebea297f.js';
+import './_commonjsHelpers-7002e5de.js';
 
 const accordionCss = "@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:block}";
 

package/dist/esm/bcm-alert.entry.js

@@ -2,14 +2,15 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-348b16ad.js';
-import { G as Generate, s as snq, S as StatusProps, T as TypeProps } from './generate-1d92d93f.js';
-import { c as classnames } from './index-ed9652af.js';
-import { c as createStore } from './index-0052017c.js';
-import { S as StringHelper } from './string-helper-6bd24967.js';
-import './colors-44c95e7e.js';
-import './_commonjsHelpers-3016b722.js';
-import './bcm-9f50af9c.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-0615c2b8.js';
+import { G as Generate, s as snq, S as StatusProps, T as TypeProps } from './generate-57891049.js';
+import { c as classnames } from './index-00c8a8f7.js';
+import { c as createStore } from './index-7e71bbc8.js';
+import { S as StringHelper } from './string-helper-b0e05041.js';
+import './package-9a6c49c8.js';
+import './colors-ebea297f.js';
+import './_commonjsHelpers-7002e5de.js';
+import './bcm-d45dc47d.js';
 
 const { state } = createStore({
   value: new Map(),

package/dist/esm/bcm-attendance.entry.js

@@ -2,10 +2,11 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-348b16ad.js';
-import { G as Generate } from './generate-1d92d93f.js';
-import './colors-44c95e7e.js';
-import './_commonjsHelpers-3016b722.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-0615c2b8.js';
+import { G as Generate } from './generate-57891049.js';
+import './package-9a6c49c8.js';
+import './colors-ebea297f.js';
+import './_commonjsHelpers-7002e5de.js';
 
 const attendanceCss = "@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-attendance{width:fit-content;display:inline-flex;align-items:center;flex-direction:row;gap:4px}.bcm-attendance__item{display:flex;flex-direction:row;align-items:center;gap:1px}.bcm-attendance__item-am,.bcm-attendance__item-pm{display:block;width:calc( calc( 12px + 1px ) / 2 );height:calc( 12px + 1px );background-color:var(--bcm-new-ds-color-blue-500)}.bcm-attendance__item-am:hover,.bcm-attendance__item-pm:hover{background-color:var(--bcm-new-ds-color-blue-600)}.bcm-attendance__item-am{border-top-left-radius:100px;border-bottom-left-radius:100px}.bcm-attendance__item-pm{border-top-right-radius:100px;border-bottom-right-radius:100px}.bcm-attendance__item-status-present{background-color:var(--bcm-new-ds-color-emerald-500)}.bcm-attendance__item-status-present:hover{background-color:var(--bcm-new-ds-color-emerald-600)}.bcm-attendance__item-status-late{background-color:var(--bcm-new-ds-color-amber-500)}.bcm-attendance__item-status-late:hover{background-color:var(--bcm-new-ds-color-amber-600)}.bcm-attendance__item-status-absent{background-color:var(--bcm-new-ds-color-red-500)}.bcm-attendance__item-status-absent:hover{background-color:var(--bcm-new-ds-color-red-600)}.bcm-attendance__item-status-default{background-color:var(--bcm-new-ds-color-slate-300)}.bcm-attendance__item-status-default:hover{background-color:var(--bcm-new-ds-color-slate-400)}";
 

package/dist/esm/bcm-autocomplete.entry.js

@@ -2,9 +2,9 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-348b16ad.js';
-import { c as classnames } from './index-ed9652af.js';
-import './_commonjsHelpers-3016b722.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-0615c2b8.js';
+import { c as classnames } from './index-00c8a8f7.js';
+import './_commonjsHelpers-7002e5de.js';
 
 const autocompleteCss = "@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:fit-content;height:fit-content}:host(.hidden){display:none}:host(.full-width){width:100%;height:100%}:host(.full-width) .bcm-autocomplete{max-height:100%;max-width:100%}.bcm-autocomplete{background-color:var(--bcm-color-grey-1);display:flex;flex-direction:column;height:100%;width:100%;min-width:256px;max-width:256px;position:relative}.bcm-autocomplete-result{position:relative}.bcm-autocomplete-result .viewport{position:absolute;overflow:hidden;height:0;transition:height 0.3s ease;background-color:#ffffff;width:100%;z-index:10000}.bcm-autocomplete-result.open .viewport{height:256px}";
 

package/dist/esm/bcm-avatar_2.entry.js

@@ -0,0 +1,204 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { r as registerInstance, h, H as Host, g as getElement } from './index-0615c2b8.js';
+import { C as ColorHelper } from './color-helper-845ba523.js';
+import './validators-37ce5ff0.js';
+import { G as Generate } from './generate-57891049.js';
+import './number-helper-be8c3021.js';
+import './string-helper-b0e05041.js';
+import './element-dragger-89bb52fd.js';
+import { a as Bcm } from './bcm-d45dc47d.js';
+import { c as ce } from './index-3bc8c6e3.js';
+import './colors-1d7854ea.js';
+import './utils-57652744.js';
+import './colors-ebea297f.js';
+import './_commonjsHelpers-7002e5de.js';
+import './package-9a6c49c8.js';
+
+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 = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this._id = Generate.UID();
+    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;
+  }
+  getFirstLetters(name) {
+    const words = name.split(" ");
+    const initials = words.map(word => word.charAt(0).toUpperCase()).join("");
+    return initials.substring(0, 2);
+  }
+  renderDefaultIcon() {
+    return h("bcm-icon", { icon: this.icon });
+  }
+  render() {
+    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 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 getElement(this); }
+};
+
+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 = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.statusColors = {
+      info: "blue",
+      error: "red",
+      warning: "amber",
+      success: "emerald",
+    };
+    this._id = Generate.UID();
+    this.blink = false;
+    this.value = undefined;
+    this.color = undefined;
+    this.size = Bcm.Size.medium;
+    this.status = undefined;
+  }
+  render() {
+    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",
+    });
+    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 getElement(this); }
+};
+
+export { BcmAvatar as bcm_avatar, BcmBadge as bcm_badge };

package/dist/esm/bcm-box.entry.js

@@ -2,7 +2,7 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-348b16ad.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-0615c2b8.js';
 
 const BcmBox = class {
   constructor(hostRef) {

package/dist/esm/bcm-breadcrumb.entry.js

@@ -2,11 +2,12 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-348b16ad.js';
-import { c as classnames } from './index-ed9652af.js';
-import { G as Generate } from './generate-1d92d93f.js';
-import './_commonjsHelpers-3016b722.js';
-import './colors-44c95e7e.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-0615c2b8.js';
+import { c as classnames } from './index-00c8a8f7.js';
+import { G as Generate } from './generate-57891049.js';
+import './_commonjsHelpers-7002e5de.js';
+import './package-9a6c49c8.js';
+import './colors-ebea297f.js';
 
 const breadcrumbCss = "@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}.bcm-breadcrumb{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;flex-wrap:wrap;color:var(--bcm-color-grey-7)}.bcm-breadcrumb__item{display:flex;align-items:center}.bcm-breadcrumb .seperator{cursor:default;display:inline-flex;align-items:center;justify-content:center;margin-left:8px;margin-right:8px;color:var(--bcm-color-grey-7)}.bcm-breadcrumb bcm-link:hover{color:var(--bcm-color-grey-7)}.bcm-breadcrumb .active{color:var(--bcm-color-grey-8)}.bcm-breadcrumb .active:hover{color:var(--bcm-color-grey-8)}.bcm-breadcrumb .is-link:hover{color:var(--bcm-color-prime-blue-6)}.bcm-breadcrumb .is-link:hover bcm-link,.bcm-breadcrumb .is-link:hover bcm-icon{color:var(--bcm-color-prime-blue-6)}.bcm-breadcrumb__dropdown-item{position:relative;display:inline-flex}.bcm-breadcrumb__dropdown-item summary{display:inline-flex;align-items:center;cursor:pointer}.bcm-breadcrumb__dropdown-item summary>span{display:inline-flex;align-items:center}.bcm-breadcrumb__dropdown-item summary::-webkit-details-marker{display:none}.bcm-breadcrumb__dropdown-item summary:focus{outline:none}.bcm-breadcrumb__dropdown-item summary.open bcm-link,.bcm-breadcrumb__dropdown-item summary.open bcm-icon{color:var(--bcm-color-prime-blue-6)}.bcm-breadcrumb__dropdown-item summary .down-icon{margin-left:4px}.bcm-breadcrumb__dropdown-submenu{position:absolute;min-width:140px;background-color:var(--bcm-color-grey-1);box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25);margin-top:4px}.bcm-breadcrumb__dropdown-submenu .dropdown-item{display:flex;padding:4px 8px}.bcm-breadcrumb__dropdown-submenu .dropdown-item bcm-link{width:100%}";