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

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

@@ -4,9 +4,9 @@
  */
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-4614b7f0.js';
 import { c as classnames } from './index-00c8a8f7.js';
-import { G as Generate } from './generate-a4b85775.js';
+import { G as Generate } from './generate-56d49b70.js';
 import './_commonjsHelpers-7002e5de.js';
-import './package-1d6f13ed.js';
+import './package-edee14d5.js';
 import './colors-ed4e7579.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%}";

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

@@ -10,16 +10,16 @@ import './index-00c8a8f7.js';
 import './types-6f06fa1a.js';
 import './color-helper-ba15b0d8.js';
 import './datetime-helper-df25808a.js';
-import './generate-a4b85775.js';
-import './number-helper-872d5482.js';
-import './validators-e9800e9a.js';
+import './generate-56d49b70.js';
+import './number-helper-455ab41e.js';
+import './validators-cc882165.js';
 import './element-dragger-b75266e6.js';
 import './types-9493a7ed.js';
 import './_commonjsHelpers-7002e5de.js';
 import './colors-1d7854ea.js';
 import './utils-7727d09e.js';
 import './colors-ed4e7579.js';
-import './package-1d6f13ed.js';
+import './package-edee14d5.js';
 
 const BcmCaption = class {
   constructor(hostRef) {

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

@@ -5,14 +5,14 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-4614b7f0.js';
 import { c as classnames } from './index-00c8a8f7.js';
 import { C as ColorHelper } from './color-helper-ba15b0d8.js';
-import { G as Generate } from './generate-a4b85775.js';
+import { G as Generate } from './generate-56d49b70.js';
 import { S as StringHelper } from './string-helper-69203215.js';
 import { S as SlotTemplate } from './slot-template-e0202c5a.js';
 import './_commonjsHelpers-7002e5de.js';
 import './colors-1d7854ea.js';
 import './utils-7727d09e.js';
 import './colors-ed4e7579.js';
-import './package-1d6f13ed.js';
+import './package-edee14d5.js';
 import './bcm-a50d55ba.js';
 
 const cardCss = "@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-card{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:block;width:100%;background-color:var(--bcm-new-ds-color-white);border-radius:8px;box-shadow:0 1px 3px 0 rgba(17, 24, 38, 0.1);box-sizing:border-box}.bcm-card__header,.bcm-card__body,.bcm-card__footer{display:block;width:100%}.bcm-card__header{border-radius:8px 8px 0 0;padding:12px 24px;color:var(--bcm-new-ds-color-slate-700);font-weight:600}.bcm-card__body{padding:12px 24px}.bcm-card__footer{padding:12px 24px;border-radius:0 0 8px 8px}";

package/dist/esm/bcm-date-picker.entry.js

@@ -6,11 +6,11 @@ import { r as registerInstance, h, H as Host, g as getElement } from './index-46
 import { c as classnames } from './index-00c8a8f7.js';
 import { I as IsLoad } from './is-load-decorator-b8ca22f2.js';
 import { D as DateTimeHelper } from './datetime-helper-df25808a.js';
-import { G as Generate } from './generate-a4b85775.js';
+import { G as Generate } from './generate-56d49b70.js';
 import { a as Bcm } from './bcm-a50d55ba.js';
 import { d as delay } from './utils-7727d09e.js';
 import './_commonjsHelpers-7002e5de.js';
-import './package-1d6f13ed.js';
+import './package-edee14d5.js';
 import './colors-ed4e7579.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-flex;width:100%;max-width:256px}:host(.full-width){max-width:100%}:host(.hidden){display:none}:host(.linked-component){display:none}";

package/dist/esm/bcm-datetime-picker.entry.js

@@ -7,13 +7,13 @@ import { D as DragDirections, E as ElementDragger } from './element-dragger-b752
 import { c as classnames } from './index-00c8a8f7.js';
 import { D as DateTimeHelper } from './datetime-helper-df25808a.js';
 import { d as delay } from './utils-7727d09e.js';
-import { G as Generate } from './generate-a4b85775.js';
+import { G as Generate } from './generate-56d49b70.js';
 import { a as Bcm } from './bcm-a50d55ba.js';
 import { g as getPlacement, s as setPosition } from './popover-placement-2bf3a181.js';
 import { L as LabelTemplate } from './label-template-4c3797f4.js';
 import { I as IsLoad } from './is-load-decorator-b8ca22f2.js';
 import './_commonjsHelpers-7002e5de.js';
-import './package-1d6f13ed.js';
+import './package-edee14d5.js';
 import './colors-ed4e7579.js';
 import './string-helper-69203215.js';
 

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

@@ -3,8 +3,8 @@
  * Copyright (c) Bromcom.
  */
 import { r as registerInstance, h, H as Host, g as getElement } from './index-4614b7f0.js';
-import { G as Generate } from './generate-a4b85775.js';
-import './package-1d6f13ed.js';
+import { G as Generate } from './generate-56d49b70.js';
+import './package-edee14d5.js';
 import './colors-ed4e7579.js';
 import './_commonjsHelpers-7002e5de.js';
 

package/dist/esm/bcm-form-2.entry.js

@@ -4,10 +4,10 @@
  */
 import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, g as getElement } from './index-4614b7f0.js';
 import { I as IsLoad } from './is-load-decorator-b8ca22f2.js';
-import { G as Generate, s as snq } from './generate-a4b85775.js';
+import { G as Generate, s as snq } from './generate-56d49b70.js';
 import { S as StringHelper } from './string-helper-69203215.js';
 import { a as Bcm } from './bcm-a50d55ba.js';
-import './package-1d6f13ed.js';
+import './package-edee14d5.js';
 import './colors-ed4e7579.js';
 import './_commonjsHelpers-7002e5de.js';
 

package/dist/esm/bcm-input-2.entry.js

@@ -5,12 +5,12 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-4614b7f0.js';
 import { c as classnames } from './index-00c8a8f7.js';
 import { I as IsLoad } from './is-load-decorator-b8ca22f2.js';
-import { G as Generate } from './generate-a4b85775.js';
+import { G as Generate } from './generate-56d49b70.js';
 import { a as Bcm } from './bcm-a50d55ba.js';
 import { C as CaptionTemplate } from './caption-template-16dd9444.js';
 import { i as inputStyle } from './input.style-0ddc0073.js';
 import './_commonjsHelpers-7002e5de.js';
-import './package-1d6f13ed.js';
+import './package-edee14d5.js';
 import './colors-ed4e7579.js';
 import './index-3bc8c6e3.js';
 

package/dist/esm/bcm-input-custom.entry.js

@@ -3,9 +3,9 @@
  * Copyright (c) Bromcom.
  */
 import { r as registerInstance, h, H as Host, g as getElement } from './index-4614b7f0.js';
-import { G as Generate } from './generate-a4b85775.js';
+import { G as Generate } from './generate-56d49b70.js';
 import { c as classnames } from './index-00c8a8f7.js';
-import './package-1d6f13ed.js';
+import './package-edee14d5.js';
 import './colors-ed4e7579.js';
 import './_commonjsHelpers-7002e5de.js';
 

package/dist/esm/bcm-input-dropdown.entry.js

@@ -5,10 +5,10 @@
 import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, g as getElement, F as Fragment } from './index-4614b7f0.js';
 import './color-helper-ba15b0d8.js';
 import './datetime-helper-df25808a.js';
-import { G as Generate } from './generate-a4b85775.js';
-import './number-helper-872d5482.js';
+import { G as Generate } from './generate-56d49b70.js';
+import './number-helper-455ab41e.js';
 import './string-helper-69203215.js';
-import './validators-e9800e9a.js';
+import './validators-cc882165.js';
 import './element-dragger-b75266e6.js';
 import { B as Bcm } from './bcm-a50d55ba.js';
 import { C as CaptionTemplate } from './caption-template-16dd9444.js';
@@ -20,7 +20,7 @@ import './colors-1d7854ea.js';
 import './utils-7727d09e.js';
 import './colors-ed4e7579.js';
 import './_commonjsHelpers-7002e5de.js';
-import './package-1d6f13ed.js';
+import './package-edee14d5.js';
 
 const inputDropdownStyle = ce({
   slots: {

package/dist/esm/bcm-modal-2-footer.entry.js

@@ -5,10 +5,10 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-4614b7f0.js';
 import './color-helper-ba15b0d8.js';
 import './datetime-helper-df25808a.js';
-import { G as Generate } from './generate-a4b85775.js';
-import './number-helper-872d5482.js';
+import { G as Generate } from './generate-56d49b70.js';
+import './number-helper-455ab41e.js';
 import './string-helper-69203215.js';
-import './validators-e9800e9a.js';
+import './validators-cc882165.js';
 import './element-dragger-b75266e6.js';
 import './bcm-a50d55ba.js';
 import { c as classnames } from './index-00c8a8f7.js';
@@ -16,7 +16,7 @@ import './colors-1d7854ea.js';
 import './utils-7727d09e.js';
 import './colors-ed4e7579.js';
 import './_commonjsHelpers-7002e5de.js';
-import './package-1d6f13ed.js';
+import './package-edee14d5.js';
 
 const BcmModal2Footer = class {
   constructor(hostRef) {

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

@@ -5,17 +5,17 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-4614b7f0.js';
 import './color-helper-ba15b0d8.js';
 import './datetime-helper-df25808a.js';
-import { G as Generate } from './generate-a4b85775.js';
-import './number-helper-872d5482.js';
+import { G as Generate } from './generate-56d49b70.js';
+import './number-helper-455ab41e.js';
 import './string-helper-69203215.js';
-import './validators-e9800e9a.js';
+import './validators-cc882165.js';
 import './element-dragger-b75266e6.js';
 import './bcm-a50d55ba.js';
 import './colors-1d7854ea.js';
 import './utils-7727d09e.js';
 import './colors-ed4e7579.js';
 import './_commonjsHelpers-7002e5de.js';
-import './package-1d6f13ed.js';
+import './package-edee14d5.js';
 
 const BcmModal2Header = class {
   constructor(hostRef) {

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

@@ -5,10 +5,10 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-4614b7f0.js';
 import './color-helper-ba15b0d8.js';
 import './datetime-helper-df25808a.js';
-import { G as Generate } from './generate-a4b85775.js';
-import './number-helper-872d5482.js';
+import { G as Generate } from './generate-56d49b70.js';
+import './number-helper-455ab41e.js';
 import './string-helper-69203215.js';
-import './validators-e9800e9a.js';
+import './validators-cc882165.js';
 import './element-dragger-b75266e6.js';
 import { d as delay } from './utils-7727d09e.js';
 import { B as Bcm } from './bcm-a50d55ba.js';
@@ -16,7 +16,7 @@ import { c as classnames } from './index-00c8a8f7.js';
 import './colors-1d7854ea.js';
 import './colors-ed4e7579.js';
 import './_commonjsHelpers-7002e5de.js';
-import './package-1d6f13ed.js';
+import './package-edee14d5.js';
 
 const BcmModal2 = class {
   constructor(hostRef) {

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

@@ -5,10 +5,10 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-4614b7f0.js';
 import './color-helper-ba15b0d8.js';
 import './datetime-helper-df25808a.js';
-import { G as Generate } from './generate-a4b85775.js';
-import './number-helper-872d5482.js';
+import { G as Generate } from './generate-56d49b70.js';
+import './number-helper-455ab41e.js';
 import { S as StringHelper } from './string-helper-69203215.js';
-import './validators-e9800e9a.js';
+import './validators-cc882165.js';
 import './element-dragger-b75266e6.js';
 import { d as delay } from './utils-7727d09e.js';
 import { B as Bcm } from './bcm-a50d55ba.js';
@@ -20,7 +20,7 @@ import { i as inputStyle } from './input.style-0ddc0073.js';
 import './colors-1d7854ea.js';
 import './colors-ed4e7579.js';
 import './_commonjsHelpers-7002e5de.js';
-import './package-1d6f13ed.js';
+import './package-edee14d5.js';
 import './index-3bc8c6e3.js';
 
 const NumberInput = class {

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

@@ -0,0 +1,47 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-4614b7f0.js';
+import { c as classnames } from './index-00c8a8f7.js';
+import './_commonjsHelpers-7002e5de.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) {
+    registerInstance(this, hostRef);
+    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 getElement(this); }
+};
+BcmSegment.style = segmentCss;
+
+export { BcmSegment as bcm_segment };

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

@@ -0,0 +1,154 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-4614b7f0.js';
+import { c as classnames } from './index-00c8a8f7.js';
+import './_commonjsHelpers-7002e5de.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) {
+    registerInstance(this, hostRef);
+    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 getElement(this); }
+  static get watchers() { return {
+    "value": ["handleValueChange"],
+    "size": ["handleSizeChange"]
+  }; }
+};
+BcmSegmentedPicker.style = segmentedPickerCss;
+
+export { BcmSegmentedPicker as bcm_segmented_picker };

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

@@ -5,10 +5,10 @@
 import { r as registerInstance, h, H as Host } from './index-4614b7f0.js';
 import './color-helper-ba15b0d8.js';
 import './datetime-helper-df25808a.js';
-import { G as Generate } from './generate-a4b85775.js';
-import './number-helper-872d5482.js';
+import { G as Generate } from './generate-56d49b70.js';
+import './number-helper-455ab41e.js';
 import './string-helper-69203215.js';
-import './validators-e9800e9a.js';
+import './validators-cc882165.js';
 import './element-dragger-b75266e6.js';
 import './bcm-a50d55ba.js';
 import { c as ce } from './index-3bc8c6e3.js';
@@ -16,7 +16,7 @@ import './colors-1d7854ea.js';
 import './utils-7727d09e.js';
 import './colors-ed4e7579.js';
 import './_commonjsHelpers-7002e5de.js';
-import './package-1d6f13ed.js';
+import './package-edee14d5.js';
 
 const skeletonStyle = ce({
   slots: {

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

@@ -6,10 +6,10 @@ import { h, F as Fragment, r as registerInstance, H as Host, g as getElement } f
 import { M as ModuleNames, L as LicenseManager, a as MD5, W as WatermarkComp, _, R as RowNode, E as Events, C as ClientSideRowModelSteps, b as RowHighlightPosition, c as ChangedPath, A as Autowired, O as Optional, P as PostConstruct, B as Bean, d as BeanStub, G as GROUP_AUTO_COLUMN_ID, e as ColumnGroup, f as GroupInstanceIdCreator, g as ExcelFactoryMode, h as CssClassApplier, i as AgPromise, j as RefSelector, k as Component, l as ModuleRegistry, m as Grid } from './watermark-f2c6a1f9.js';
 import './color-helper-ba15b0d8.js';
 import './datetime-helper-df25808a.js';
-import { G as Generate, s as snq } from './generate-a4b85775.js';
-import './number-helper-872d5482.js';
+import { G as Generate, s as snq } from './generate-56d49b70.js';
+import './number-helper-455ab41e.js';
 import { S as StringHelper } from './string-helper-69203215.js';
-import './validators-e9800e9a.js';
+import './validators-cc882165.js';
 import './element-dragger-b75266e6.js';
 import './bcm-a50d55ba.js';
 import { c as classnames } from './index-00c8a8f7.js';
@@ -19,7 +19,7 @@ import './colors-1d7854ea.js';
 import './utils-7727d09e.js';
 import './colors-ed4e7579.js';
 import './_commonjsHelpers-7002e5de.js';
-import './package-1d6f13ed.js';
+import './package-edee14d5.js';
 
 // DO NOT UPDATE MANUALLY: Generated from script during build time
 var VERSION$4 = '29.0.0';

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

@@ -3,14 +3,14 @@
  * Copyright (c) Bromcom.
  */
 import { h, r as registerInstance, c as createEvent, g as getElement } from './index-4614b7f0.js';
-import { G as Generate } from './generate-a4b85775.js';
+import { G as Generate } from './generate-56d49b70.js';
 import { a as Bcm } from './bcm-a50d55ba.js';
 import { c as classnames } from './index-00c8a8f7.js';
-import { N as NumberHelper } from './number-helper-872d5482.js';
+import { N as NumberHelper } from './number-helper-455ab41e.js';
 import { e as extractColor } from './utils-7727d09e.js';
 import { C as ColorPalette } from './colors-1d7854ea.js';
 import { C as ColorProps } from './types-9493a7ed.js';
-import './package-1d6f13ed.js';
+import './package-edee14d5.js';
 import './colors-ed4e7579.js';
 import './_commonjsHelpers-7002e5de.js';
 

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

@@ -5,11 +5,11 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-4614b7f0.js';
 import { c as classnames } from './index-00c8a8f7.js';
 import { I as IsLoad } from './is-load-decorator-b8ca22f2.js';
-import { G as Generate } from './generate-a4b85775.js';
+import { G as Generate } from './generate-56d49b70.js';
 import { a as Bcm } from './bcm-a50d55ba.js';
 import { d as delay } from './utils-7727d09e.js';
 import './_commonjsHelpers-7002e5de.js';
-import './package-1d6f13ed.js';
+import './package-edee14d5.js';
 import './colors-ed4e7579.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/esm/bcm-toast.entry.js

@@ -4,12 +4,11 @@
  */
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-4614b7f0.js';
 import { c as classnames } from './index-00c8a8f7.js';
-import { G as Generate } from './generate-a4b85775.js';
-import { S as StringHelper } from './string-helper-69203215.js';
+import { G as Generate } from './generate-56d49b70.js';
 import { a as Bcm } from './bcm-a50d55ba.js';
 import { d as delay } from './utils-7727d09e.js';
 import './_commonjsHelpers-7002e5de.js';
-import './package-1d6f13ed.js';
+import './package-edee14d5.js';
 import './colors-ed4e7579.js';
 
 const BcmToast = class {
@@ -31,6 +30,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) => [index > 0 && h("br", null), line]);
+  }
   async show() {
     const toast = document.getElementById(this._id + "-container");
     if (toast) {
@@ -86,7 +92,7 @@ const BcmToast = class {
     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 ", {
@@ -94,11 +100,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",
-      }) }, 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",
@@ -107,9 +113,9 @@ const BcmToast = class {
       }) })), 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 getElement(this); }
 };