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

package/dist/components/bcm-segment.js

@@ -0,0 +1,71 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.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$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.bcmSegmentClick = 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 (h(Host, { role: "radio", "aria-checked": this.selected.toString() }, h("button", { class: 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" }, h("slot", null)), h("div", { class: `bcm-segment__divider ${hideDivider ? 'bcm-segment__divider--hidden' : ''}` })));
+  }
+  get el() { return this; }
+  static get style() { return segmentCss; }
+}, [4, "bcm-segment", {
+    "value": [513],
+    "disabled": [516],
+    "selected": [1540],
+    "size": [1025],
+    "index": [1026],
+    "activeIndex": [1026, "active-index"],
+    "totalSegments": [1026, "total-segments"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["bcm-segment"];
+  components.forEach(tagName => { switch (tagName) {
+    case "bcm-segment":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, BcmSegment$1);
+      }
+      break;
+  } });
+}
+
+const BcmSegment = BcmSegment$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BcmSegment, defineCustomElement };

package/dist/components/bcm-segmented-picker.d.ts

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

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

@@ -0,0 +1,182 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.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$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.bcmSegmentChange = 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 (h(Host, null, h("div", { class: 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 }, 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" }), h("div", { class: "bcm-segmented-picker__grid tw-grid tw-grid-flow-col tw-auto-cols-fr tw-relative tw-w-full" }, h("slot", null)))));
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "value": ["handleValueChange"],
+    "size": ["handleSizeChange"]
+  }; }
+  static get style() { return segmentedPickerCss; }
+}, [4, "bcm-segmented-picker", {
+    "value": [1537],
+    "name": [513],
+    "required": [516],
+    "size": [513],
+    "fullWidth": [516, "full-width"],
+    "disabled": [516],
+    "shadow": [516],
+    "segments": [32],
+    "activeIndex": [32],
+    "setValue": [64],
+    "getValue": [64]
+  }, [[0, "bcm-segment-click", "handleSegmentClick"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["bcm-segmented-picker"];
+  components.forEach(tagName => { switch (tagName) {
+    case "bcm-segmented-picker":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, BcmSegmentedPicker$1);
+      }
+      break;
+  } });
+}
+
+const BcmSegmentedPicker = BcmSegmentedPicker$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BcmSegmentedPicker, defineCustomElement };

package/dist/components/bcm-toast.js

@@ -5,7 +5,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
 import { G as Generate } from './generate.js';
-import { S as StringHelper } from './string-helper.js';
 import { a as Bcm } from './bcm.js';
 import { d as delay } from './utils.js';
 
@@ -29,6 +28,13 @@ const BcmToast$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.visible = false;
     this.visibleContainer = false;
   }
+  renderMultiline(text) {
+    if (!text) {
+      return null;
+    }
+    const lines = text.split("\n");
+    return lines.map((line, index) => [index > 0 && h("br", null), line]);
+  }
   async show() {
     const toast = document.getElementById(this._id + "-container");
     if (toast) {
@@ -84,7 +90,7 @@ const BcmToast$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     return container;
   }
   render() {
-    return (h(Host, { class: "tw-hidden" }, h("div", { class: classnames({ "tw-hidden": !this.visible }), id: this._id + "-container", onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, h("div", { class: 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 (h(Host, { class: "tw-hidden" }, h("div", { class: classnames({ "tw-hidden": !this.visible }), id: this._id + "-container", onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, h("div", { class: 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 ", {
@@ -92,11 +98,11 @@ const BcmToast$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         "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",
-      }) }, h("div", { class: "tw-flex tw-items-center tw-justify-between tw-gap-5" }, h("div", { class: "tw-flex tw-items-center tw-gap-3 " }, this.status && (h("i", { class: 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",
+      }) }, h("div", { class: "tw-flex tw-items-start tw-justify-between tw-gap-5" }, h("div", { class: "tw-flex tw-items-start tw-gap-3 " }, this.status && (h("i", { class: 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",
@@ -105,9 +111,9 @@ const BcmToast$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       }) })), h("span", { class: classnames({
         "tw-text-4": !this.description,
         "tw-text-6 tw-font-medium": this.description,
-      }) }, !this.description && this.status && h("span", null, StringHelper.capitalize(this.status), ": "), this.message)), h("div", { class: "tw-flex tw-items-baseline tw-gap-2" }, this.viewButton && (h("button", { onClick: () => this.bcmToastView.emit(), title: "View details", class: 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))), h("div", { class: "tw-flex tw-items-baseline tw-gap-2" }, this.viewButton && (h("button", { onClick: () => this.bcmToastView.emit(), title: "View details", class: 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 && (h("button", { title: "Close", onClick: () => this.hide(), class: 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") }, h("i", { class: "fal fa-times" }))))), this.description && h("div", { class: "tw-text-size-5 font-medium" }, this.description), h("slot", null)))));
+      }) }, "View")), this.closeButton && (h("button", { title: "Close", onClick: () => this.hide(), class: 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") }, h("i", { class: "fal fa-times" }))))), this.description && h("div", { class: "tw-text-3 " }, this.renderMultiline(this.description)), h("slot", null)))));
   }
   get el() { return this; }
 }, [4, "bcm-toast", {

package/dist/components/color-palette.js

@@ -0,0 +1,71 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { C as ColorHelper } from './color-helper.js';
+import { c as ce } from './index4.js';
+
+const colorPaletteStyle = ce({
+  slots: {
+    host: "tw-flex tw-gap-4 tw-p-3 tw-bg-color-base tw-border tw-rounded-md tw-box-border tw-w-fit tw-h-fit",
+    column: "tw-flex tw-flex-col tw-gap-4",
+    box: "tw-w-6 tw-h-6 tw-rounded-md tw-cursor-pointer tw-transition-all tw-duration-200 tw-relative tw-flex tw-items-center tw-justify-center tw-border",
+  },
+  variants: {
+    selected: {
+      true: {
+        box: "tw-z-10 tw-ring-2 tw-ring-primary tw-ring-offset-2 tw-scale-100 tw-border-transparent",
+      },
+      false: {
+        box: "tw-border-transparent hover:tw-border-black/10 hover:tw-scale-110",
+      },
+    },
+  },
+  defaultVariants: {
+    selected: false,
+  },
+});
+
+const BcmColorPalette = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.bcmChange = createEvent(this, "bcm-change", 7);
+    this.onColorChange = (hex) => {
+      this.value = hex;
+      this.bcmChange.emit(hex);
+    };
+    this.value = undefined;
+    this.paletteKeys = ["orange", "yellow", "lime", "green", "teal", "cyan", "sky", "indigo", "violet", "purple", "fuchsia", "pink", "rose", "stone", "slate"];
+    this.shades = [950, 900, 800, 700, 600, 400, 300, 200, 100, 50];
+  }
+  render() {
+    const { host, column, box } = colorPaletteStyle();
+    return (h(Host, { class: host() }, this.paletteKeys.map((colorName) => (h("div", { class: column(), key: colorName }, this.shades.map((shade) => {
+      const colorKey = `${colorName}-${shade}`;
+      const hex = ColorHelper.getTwColorToHex(colorKey);
+      const isSelected = this.value === hex;
+      return (h("div", { key: colorKey, class: box({ selected: isSelected }), style: { backgroundColor: hex }, onClick: () => this.onColorChange(hex) }));
+    }))))));
+  }
+}, [0, "bcm-color-palette", {
+    "value": [1537],
+    "paletteKeys": [16],
+    "shades": [16]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["bcm-color-palette"];
+  components.forEach(tagName => { switch (tagName) {
+    case "bcm-color-palette":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, BcmColorPalette);
+      }
+      break;
+  } });
+}
+
+export { BcmColorPalette as B, defineCustomElement as d };

package/dist/components/generate.js

@@ -5,7 +5,7 @@
 import { Build } from '@stencil/core/internal/client';
 import { c as colors } from './colors2.js';
 
-const version = "3.0.0-alpha.1";
+const version = "3.0.0-alpha.4";
 
 /**
  * 'status' prop predefined values

package/dist/components/index.d.ts

@@ -22,6 +22,7 @@ export { BcmChipGroup as BcmChipGroup } from '../types/components/atoms/chip/chi
 export { BcmCollapse as BcmCollapse } from '../types/components/other_deprecated/collapse/collapse';
 export { BcmCollapseGroup as BcmCollapseGroup } from '../types/components/other_deprecated/collapse/group';
 export { BcmColorInput as BcmColorInput } from '../types/components/molecules/color-input/color-input';
+export { BcmColorPalette as BcmColorPalette } from '../types/components/molecules/color-palette/color-palette';
 export { BcmColorful as BcmColorful } from '../types/components/third-parts/colorful/colorful';
 export { BcmColorPicker as BcmColorpicker } from '../types/components/other_deprecated/colorpicker/colorpicker';
 export { BcmContent as BcmContent } from '../types/components/other/content/content';
@@ -77,6 +78,8 @@ export { BcmReactNumber as BcmReactNumber } from '../types/components/molecules/
 export { BcmResult as BcmResult } from '../types/components/molecules/result/result';
 export { BcmScrollArea as BcmScrollArea } from '../types/components/other/scroll-area/scroll-area';
 export { BcmSearch as BcmSearch } from '../types/components/molecules/search/search';
+export { BcmSegment as BcmSegment } from '../types/components/other/segmented-picker/segment.component';
+export { BcmSegmentedPicker as BcmSegmentedPicker } from '../types/components/other/segmented-picker/segmented-picker.component';
 export { BcmSelect as BcmSelect } from '../types/components/other_deprecated/select/select';
 export { BcmSelectBox as BcmSelectBox } from '../types/components/other_deprecated/select/select-box';
 export { BcmSelectGroup as BcmSelectGroup } from '../types/components/other_deprecated/select/group';

package/dist/components/index.js

@@ -30,6 +30,7 @@ export { BcmChipGroup, defineCustomElement as defineCustomElementBcmChipGroup }
 export { BcmCollapse, defineCustomElement as defineCustomElementBcmCollapse } from './bcm-collapse.js';
 export { BcmCollapseGroup, defineCustomElement as defineCustomElementBcmCollapseGroup } from './bcm-collapse-group.js';
 export { BcmColorInput, defineCustomElement as defineCustomElementBcmColorInput } from './bcm-color-input.js';
+export { BcmColorPalette, defineCustomElement as defineCustomElementBcmColorPalette } from './bcm-color-palette.js';
 export { BcmColorful, defineCustomElement as defineCustomElementBcmColorful } from './bcm-colorful.js';
 export { BcmColorpicker, defineCustomElement as defineCustomElementBcmColorpicker } from './bcm-colorpicker.js';
 export { BcmContent, defineCustomElement as defineCustomElementBcmContent } from './bcm-content.js';
@@ -85,6 +86,8 @@ export { BcmReactNumber, defineCustomElement as defineCustomElementBcmReactNumbe
 export { BcmResult, defineCustomElement as defineCustomElementBcmResult } from './bcm-result.js';
 export { BcmScrollArea, defineCustomElement as defineCustomElementBcmScrollArea } from './bcm-scroll-area.js';
 export { BcmSearch, defineCustomElement as defineCustomElementBcmSearch } from './bcm-search.js';
+export { BcmSegment, defineCustomElement as defineCustomElementBcmSegment } from './bcm-segment.js';
+export { BcmSegmentedPicker, defineCustomElement as defineCustomElementBcmSegmentedPicker } from './bcm-segmented-picker.js';
 export { BcmSelect, defineCustomElement as defineCustomElementBcmSelect } from './bcm-select.js';
 export { BcmSelectBox, defineCustomElement as defineCustomElementBcmSelectBox } from './bcm-select-box.js';
 export { BcmSelectGroup, defineCustomElement as defineCustomElementBcmSelectGroup } from './bcm-select-group.js';