bromcom-ui 3.0.0-alpha.2 → 3.0.0-alpha.4

package/dist/cjs/bcm-modal-2-header.cjs.entry.js

@@ -9,17 +9,17 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-c591ecec.js');
 require('./color-helper-dc98a2ca.js');
 require('./datetime-helper-eaf4fadb.js');
-const generate = require('./generate-a25d8fc8.js');
-require('./number-helper-3a56812f.js');
+const generate = require('./generate-9d1bf6b3.js');
+require('./number-helper-ae28b255.js');
 require('./string-helper-9cdfb273.js');
-require('./validators-78797513.js');
+require('./validators-3381bee2.js');
 require('./element-dragger-a8562f82.js');
 require('./bcm-1d1fcf21.js');
 require('./colors-56282b00.js');
 require('./utils-fc077139.js');
 require('./colors-250d0982.js');
 require('./_commonjsHelpers-ed84c3ca.js');
-require('./package-6afe17f3.js');
+require('./package-6de220be.js');
 
 const BcmModal2Header = class {
   constructor(hostRef) {

package/dist/cjs/bcm-modal-2.cjs.entry.js

@@ -9,10 +9,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-c591ecec.js');
 require('./color-helper-dc98a2ca.js');
 require('./datetime-helper-eaf4fadb.js');
-const generate = require('./generate-a25d8fc8.js');
-require('./number-helper-3a56812f.js');
+const generate = require('./generate-9d1bf6b3.js');
+require('./number-helper-ae28b255.js');
 require('./string-helper-9cdfb273.js');
-require('./validators-78797513.js');
+require('./validators-3381bee2.js');
 require('./element-dragger-a8562f82.js');
 const utils = require('./utils-fc077139.js');
 const bcm = require('./bcm-1d1fcf21.js');
@@ -20,7 +20,7 @@ const index$1 = require('./index-95ae50d0.js');
 require('./colors-56282b00.js');
 require('./colors-250d0982.js');
 require('./_commonjsHelpers-ed84c3ca.js');
-require('./package-6afe17f3.js');
+require('./package-6de220be.js');
 
 const BcmModal2 = class {
   constructor(hostRef) {

package/dist/cjs/bcm-number-input.cjs.entry.js

@@ -9,10 +9,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-c591ecec.js');
 require('./color-helper-dc98a2ca.js');
 require('./datetime-helper-eaf4fadb.js');
-const generate = require('./generate-a25d8fc8.js');
-require('./number-helper-3a56812f.js');
+const generate = require('./generate-9d1bf6b3.js');
+require('./number-helper-ae28b255.js');
 const stringHelper = require('./string-helper-9cdfb273.js');
-require('./validators-78797513.js');
+require('./validators-3381bee2.js');
 require('./element-dragger-a8562f82.js');
 const utils = require('./utils-fc077139.js');
 const bcm = require('./bcm-1d1fcf21.js');
@@ -24,7 +24,7 @@ const input_style = require('./input.style-bee84fb0.js');
 require('./colors-56282b00.js');
 require('./colors-250d0982.js');
 require('./_commonjsHelpers-ed84c3ca.js');
-require('./package-6afe17f3.js');
+require('./package-6de220be.js');
 require('./index-5279dea2.js');
 
 const NumberInput = class {

package/dist/cjs/bcm-segment.cjs.entry.js

@@ -0,0 +1,51 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-c591ecec.js');
+const index$1 = require('./index-95ae50d0.js');
+require('./_commonjsHelpers-ed84c3ca.js');
+
+const segmentCss = "bcm-segment{display:flex;align-items:center;position:relative;width:100%}.bcm-segment__button{white-space:nowrap;flex:1;width:100%}.bcm-segment__divider{position:absolute;right:0;top:50%;transform:translateY(-50%);width:1px;height:20px;background-color:var(--bcm-ui-color-border-default);transition:opacity 800ms cubic-bezier(0.4, 0, 0.2, 1);pointer-events:none}.bcm-segment__divider--hidden{opacity:0}";
+
+const BcmSegment = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.bcmSegmentClick = index.createEvent(this, "bcm-segment-click", 5);
+    this.handleClick = () => {
+      if (!this.disabled) {
+        this.bcmSegmentClick.emit(this.value);
+      }
+    };
+    this.value = undefined;
+    this.disabled = false;
+    this.selected = false;
+    this.size = 'medium';
+    this.index = 0;
+    this.activeIndex = 0;
+    this.totalSegments = 0;
+  }
+  render() {
+    const isLastSegment = this.totalSegments > 0 && this.index === this.totalSegments - 1;
+    const hideDivider = isLastSegment || this.selected || this.index === this.activeIndex - 1;
+    return (index.h(index.Host, { role: "radio", "aria-checked": this.selected.toString() }, index.h("button", { class: index$1.classnames("bcm-ui-element bcm-segment__button tw-relative tw-z-20 tw-px-3 tw-text-center tw-font-medium tw-transition-colors tw-border-none tw-bg-transparent tw-select-none", {
+        "tw-text-2 tw-py-px": this.size === "small",
+        "tw-text-3 tw-py-1": this.size === "medium",
+        "tw-text-4 tw-py-2": this.size === "large",
+      }, {
+        "tw-text-color-header": this.selected,
+        "tw-text-color-helper": !this.selected,
+      }, {
+        "tw-cursor-not-allowed tw-opacity-50": this.disabled,
+        "tw-cursor-pointer hover:tw-text-color-header": !this.disabled,
+      }), onClick: this.handleClick, disabled: this.disabled, type: "button" }, index.h("slot", null)), index.h("div", { class: `bcm-segment__divider ${hideDivider ? 'bcm-segment__divider--hidden' : ''}` })));
+  }
+  get el() { return index.getElement(this); }
+};
+BcmSegment.style = segmentCss;
+
+exports.bcm_segment = BcmSegment;

package/dist/cjs/bcm-segmented-picker.cjs.entry.js

@@ -0,0 +1,158 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-c591ecec.js');
+const index$1 = require('./index-95ae50d0.js');
+require('./_commonjsHelpers-ed84c3ca.js');
+
+const segmentedPickerCss = "bcm-segmented-picker{display:block}.bcm-segmented-picker__container{--indicator-left:0%;--indicator-width:0%}.bcm-segmented-picker__indicator{left:var(--indicator-left);width:var(--indicator-width);transition:all 200ms cubic-bezier(0.4, 0, 0.2, 1)}";
+
+const BcmSegmentedPicker = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.bcmSegmentChange = index.createEvent(this, "bcm-segment-change", 1);
+    this.segmentElements = [];
+    this.value = undefined;
+    this.name = undefined;
+    this.required = false;
+    this.size = 'medium';
+    this.fullWidth = false;
+    this.disabled = false;
+    this.shadow = false;
+    this.segments = [];
+    this.activeIndex = 0;
+  }
+  componentWillLoad() {
+    this.discoverSegments();
+    this.updateActiveIndex();
+    this.propagatePropsToSegments();
+    this.updateSegmentStates();
+  }
+  componentDidLoad() {
+    this.updateCSSVariables();
+  }
+  /**
+   * Discovers all bcm-segment children
+   */
+  discoverSegments() {
+    this.segmentElements = Array.from(this.el.querySelectorAll('bcm-segment'));
+    this.segments = this.segmentElements.map((segment) => ({
+      value: segment.value,
+      disabled: segment.disabled || false,
+    }));
+    // Set initial value if not provided
+    if (!this.value && this.segments.length > 0) {
+      const firstEnabledSegment = this.segments.find(s => !s.disabled);
+      if (firstEnabledSegment) {
+        this.value = firstEnabledSegment.value;
+      }
+    }
+  }
+  /**
+   * Updates the active index based on current value
+   */
+  updateActiveIndex() {
+    const index = this.segments.findIndex(s => s.value === this.value);
+    this.activeIndex = index >= 0 ? index : 0;
+  }
+  /**
+   * Updates selected state of all segment elements
+   */
+  updateSegmentStates() {
+    this.segmentElements.forEach((segment) => {
+      segment.selected = segment.value === this.value;
+    });
+  }
+  /**
+   * Updates CSS custom properties for indicator positioning
+   */
+  updateCSSVariables() {
+    const container = this.el.querySelector('.bcm-segmented-picker__container');
+    if (container && this.segments.length > 0) {
+      const segmentWidth = 100 / this.segments.length;
+      const leftPosition = this.activeIndex * segmentWidth;
+      container.style.setProperty('--indicator-left', `${leftPosition}%`);
+      container.style.setProperty('--indicator-width', `${segmentWidth}%`);
+    }
+  }
+  handleValueChange(newValue, oldValue) {
+    this.updateActiveIndex();
+    this.propagatePropsToSegments();
+    this.updateSegmentStates();
+    this.updateCSSVariables();
+    if (oldValue !== undefined && oldValue !== newValue) {
+      this.bcmSegmentChange.emit({
+        value: newValue,
+        previousValue: oldValue,
+      });
+    }
+  }
+  handleSizeChange() {
+    this.propagatePropsToSegments();
+  }
+  /**
+   * Propagates parent props to child segments
+   */
+  propagatePropsToSegments() {
+    const total = this.segmentElements.length;
+    this.segmentElements.forEach((segment, index) => {
+      segment.size = this.size;
+      segment.index = index;
+      segment.activeIndex = this.activeIndex;
+      segment.totalSegments = total;
+    });
+  }
+  /**
+   * Handles segment click events from children
+   */
+  handleSegmentClick(event) {
+    const clickedValue = event.detail;
+    const segment = this.segments.find(s => s.value === clickedValue);
+    if (segment && !segment.disabled && !this.disabled) {
+      this.value = clickedValue;
+    }
+  }
+  /**
+   * Public method to programmatically set active segment
+   */
+  async setValue(value) {
+    const segment = this.segments.find(s => s.value === value);
+    if (segment && !segment.disabled) {
+      this.value = value;
+    }
+  }
+  /**
+   * Public method to get active segment value
+   */
+  async getValue() {
+    return this.value;
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: index$1.classnames("bcm-ui-element bcm-segmented-picker__container tw-inline-flex tw-relative tw-rounded-lg tw-border tw-border-solid tw-border-color tw-bg-color-default tw-overflow-hidden", {
+        "tw-text-2": this.size === "small",
+        "tw-text-3": this.size === "medium",
+        "tw-text-4": this.size === "large",
+      }, {
+        "tw-w-full": this.fullWidth,
+        "tw-w-auto": !this.fullWidth,
+      }, {
+        "tw-shadow-md": this.shadow,
+      }, {
+        "tw-opacity-50 tw-cursor-not-allowed": this.disabled,
+        "tw-cursor-pointer": !this.disabled,
+      }), role: "radiogroup", "aria-disabled": this.disabled }, index.h("div", { class: "bcm-segmented-picker__indicator tw-absolute tw-inset-y-0 tw-bg-color-base tw-rounded tw-shadow-sm tw-z-20" }), index.h("div", { class: "bcm-segmented-picker__grid tw-grid tw-grid-flow-col tw-auto-cols-fr tw-relative tw-w-full" }, index.h("slot", null)))));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "value": ["handleValueChange"],
+    "size": ["handleSizeChange"]
+  }; }
+};
+BcmSegmentedPicker.style = segmentedPickerCss;
+
+exports.bcm_segmented_picker = BcmSegmentedPicker;

package/dist/cjs/bcm-skeleton.cjs.entry.js

@@ -9,10 +9,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index$1 = require('./index-c591ecec.js');
 require('./color-helper-dc98a2ca.js');
 require('./datetime-helper-eaf4fadb.js');
-const generate = require('./generate-a25d8fc8.js');
-require('./number-helper-3a56812f.js');
+const generate = require('./generate-9d1bf6b3.js');
+require('./number-helper-ae28b255.js');
 require('./string-helper-9cdfb273.js');
-require('./validators-78797513.js');
+require('./validators-3381bee2.js');
 require('./element-dragger-a8562f82.js');
 require('./bcm-1d1fcf21.js');
 const index = require('./index-5279dea2.js');
@@ -20,7 +20,7 @@ require('./colors-56282b00.js');
 require('./utils-fc077139.js');
 require('./colors-250d0982.js');
 require('./_commonjsHelpers-ed84c3ca.js');
-require('./package-6afe17f3.js');
+require('./package-6de220be.js');
 
 const skeletonStyle = index.ce({
   slots: {

package/dist/cjs/bcm-table.cjs.entry.js

@@ -10,10 +10,10 @@ const index = require('./index-c591ecec.js');
 const watermark = require('./watermark-2c23c8f1.js');
 require('./color-helper-dc98a2ca.js');
 require('./datetime-helper-eaf4fadb.js');
-const generate = require('./generate-a25d8fc8.js');
-require('./number-helper-3a56812f.js');
+const generate = require('./generate-9d1bf6b3.js');
+require('./number-helper-ae28b255.js');
 const stringHelper = require('./string-helper-9cdfb273.js');
-require('./validators-78797513.js');
+require('./validators-3381bee2.js');
 require('./element-dragger-a8562f82.js');
 require('./bcm-1d1fcf21.js');
 const index$1 = require('./index-95ae50d0.js');
@@ -23,7 +23,7 @@ require('./colors-56282b00.js');
 require('./utils-fc077139.js');
 require('./colors-250d0982.js');
 require('./_commonjsHelpers-ed84c3ca.js');
-require('./package-6afe17f3.js');
+require('./package-6de220be.js');
 
 // DO NOT UPDATE MANUALLY: Generated from script during build time
 var VERSION$4 = '29.0.0';

package/dist/cjs/bcm-tag.cjs.entry.js

@@ -7,14 +7,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index$1 = require('./index-c591ecec.js');
-const generate = require('./generate-a25d8fc8.js');
+const generate = require('./generate-9d1bf6b3.js');
 const bcm = require('./bcm-1d1fcf21.js');
 const index = require('./index-95ae50d0.js');
-const numberHelper = require('./number-helper-3a56812f.js');
+const numberHelper = require('./number-helper-ae28b255.js');
 const utils = require('./utils-fc077139.js');
 const colors = require('./colors-56282b00.js');
 const types = require('./types-7523fd99.js');
-require('./package-6afe17f3.js');
+require('./package-6de220be.js');
 require('./colors-250d0982.js');
 require('./_commonjsHelpers-ed84c3ca.js');
 

package/dist/cjs/bcm-time-picker.cjs.entry.js

@@ -9,11 +9,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-c591ecec.js');
 const index$1 = require('./index-95ae50d0.js');
 const isLoadDecorator = require('./is-load-decorator-15036f37.js');
-const generate = require('./generate-a25d8fc8.js');
+const generate = require('./generate-9d1bf6b3.js');
 const bcm = require('./bcm-1d1fcf21.js');
 const utils = require('./utils-fc077139.js');
 require('./_commonjsHelpers-ed84c3ca.js');
-require('./package-6afe17f3.js');
+require('./package-6de220be.js');
 require('./colors-250d0982.js');
 
 const timePickerCss = "@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}";

package/dist/cjs/bcm-toast.cjs.entry.js

@@ -8,12 +8,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c591ecec.js');
 const index$1 = require('./index-95ae50d0.js');
-const generate = require('./generate-a25d8fc8.js');
-const stringHelper = require('./string-helper-9cdfb273.js');
+const generate = require('./generate-9d1bf6b3.js');
 const bcm = require('./bcm-1d1fcf21.js');
 const utils = require('./utils-fc077139.js');
 require('./_commonjsHelpers-ed84c3ca.js');
-require('./package-6afe17f3.js');
+require('./package-6de220be.js');
 require('./colors-250d0982.js');
 
 const BcmToast = class {
@@ -35,6 +34,13 @@ const BcmToast = class {
     this.visible = false;
     this.visibleContainer = false;
   }
+  renderMultiline(text) {
+    if (!text) {
+      return null;
+    }
+    const lines = text.split("\n");
+    return lines.map((line, index$1) => [index$1 > 0 && index.h("br", null), line]);
+  }
   async show() {
     const toast = document.getElementById(this._id + "-container");
     if (toast) {
@@ -90,7 +96,7 @@ const BcmToast = class {
     return container;
   }
   render() {
-    return (index.h(index.Host, { class: "tw-hidden" }, index.h("div", { class: index$1.classnames({ "tw-hidden": !this.visible }), id: this._id + "-container", onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, index.h("div", { class: index$1.classnames("tw-pointer-events-auto tw-transform tw-transition tw-duration-300 tw-ease-in-out", "tw-flex tw-min-w-[256px] tw-max-w-[420px] tw-flex-col tw-gap-2 tw-rounded-lg tw-border tw-font-sans tw-font-normal tw-shadow-2", "tw-border-color-default tw-bg-white tw-text-color-default", {
+    return (index.h(index.Host, { class: "tw-hidden" }, index.h("div", { class: index$1.classnames({ "tw-hidden": !this.visible }), id: this._id + "-container", onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, index.h("div", { class: index$1.classnames("tw-pointer-events-auto tw-transform tw-transition tw-duration-300 tw-ease-in-out", "tw-flex tw-min-w-[256px] tw-max-w-[420px] tw-flex-col tw-gap-2 tw-rounded-lg tw-border tw-font-sans tw-font-normal tw-shadow-2", "tw-border-gray-300 tw-bg-white tw-text-slate-600", {
         "tw-p-4": !this.description,
         "tw-p-6": this.description,
       }, "tw-transform tw-transition tw-duration-300 tw-ease-in-out ", {
@@ -98,11 +104,11 @@ const BcmToast = class {
         "tw-opacity-0": !this.visibleContainer,
         "tw-translate-y-[-100%]": !this.visibleContainer && this.position.split("-")[0] === "top",
         "tw-translate-y-[100%]": !this.visibleContainer && this.position.split("-")[0] === "bottom",
-      }) }, index.h("div", { class: "tw-flex tw-items-center tw-justify-between tw-gap-5" }, index.h("div", { class: "tw-flex tw-items-center tw-gap-3 " }, this.status && (index.h("i", { class: index$1.classnames("tw-text-6", this.messageIcon ? this.messageIcon : "far", {
-        "tw-text-color-success": this.status === "success",
-        "tw-text-color-error": this.status === "error",
-        "tw-text-color-warning": this.status === "warning",
-        "tw-text-color-info": this.status === "info",
+      }) }, index.h("div", { class: "tw-flex tw-items-start tw-justify-between tw-gap-5" }, index.h("div", { class: "tw-flex tw-items-start tw-gap-3 " }, this.status && (index.h("i", { class: index$1.classnames("tw-text-6 tw-pt-0.5", this.messageIcon ? this.messageIcon : "far", {
+        "tw-text-emerald-500": this.status === "success",
+        "tw-text-red-500": this.status === "error",
+        "tw-text-amber-500": this.status === "warning",
+        "tw-text-blue-500": this.status === "info",
       }, {
         "fa-check-circle": !this.messageIcon && this.status === "success",
         "fa-exclamation-circle": !this.messageIcon && this.status === "error",
@@ -111,9 +117,9 @@ const BcmToast = class {
       }) })), index.h("span", { class: index$1.classnames({
         "tw-text-4": !this.description,
         "tw-text-6 tw-font-medium": this.description,
-      }) }, !this.description && this.status && index.h("span", null, stringHelper.StringHelper.capitalize(this.status), ": "), this.message)), index.h("div", { class: "tw-flex tw-items-baseline tw-gap-2" }, this.viewButton && (index.h("button", { onClick: () => this.bcmToastView.emit(), title: "View details", class: index$1.classnames("tw-appearance-none tw-outline-0 tw-border-none tw-cursor-pointer tw-rounded tw-bg-transparent tw-p-0 tw-px-1 tw-text-4 tw-text-inherit", "hover:tw-bg-color-default-hover", "active:tw-bg-color-default-active", "tw-transition tw-duration-300 tw-ease-in-out", {
+      }) }, this.renderMultiline(this.message))), index.h("div", { class: "tw-flex tw-items-baseline tw-gap-2" }, this.viewButton && (index.h("button", { onClick: () => this.bcmToastView.emit(), title: "View details", class: index$1.classnames("tw-cursor-pointer tw-rounded tw-bg-transparent tw-p-0 tw-px-1 tw-text-4 tw-text-inherit", "hover:tw-bg-gray-100 hover:tw-text-slate-800", "active:tw-bg-gray-200", "tw-transition tw-duration-300 tw-ease-in-out", {
         "tw-font-medium": this.description,
-      }) }, "View")), this.closeButton && (index.h("button", { title: "Close", onClick: () => this.hide(), class: index$1.classnames("tw-appearance-none tw-outline-0 tw-border-none tw-cursor-pointer", "tw-rounded tw-bg-transparent tw-p-0", "tw-flex tw-h-6 tw-w-6 tw-cursor-pointer tw-items-center tw-justify-center tw-text-3 tw-text-inherit", "hover:tw-bg-color-default-hover", "active:tw-bg-color-default-active") }, index.h("i", { class: "fal fa-times" }))))), this.description && index.h("div", { class: "tw-text-size-5 font-medium" }, this.description), index.h("slot", null)))));
+      }) }, "View")), this.closeButton && (index.h("button", { title: "Close", onClick: () => this.hide(), class: index$1.classnames("tw-rounded tw-bg-transparent tw-p-0", "tw-flex tw-h-6 tw-w-6 tw-cursor-pointer tw-items-center tw-justify-center tw-text-3 tw-text-inherit", "hover:tw-bg-gray-100 hover:tw-text-slate-800", "active:tw-bg-gray-200") }, index.h("i", { class: "fal fa-times" }))))), this.description && index.h("div", { class: "tw-text-3 " }, this.renderMultiline(this.description)), index.h("slot", null)))));
   }
   get el() { return index.getElement(this); }
 };