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

package/dist/types/components/other/segmented-picker/segmented-picker.component.d.ts

@@ -0,0 +1,86 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+/**
+ * Modern Segmented Picker component with CSS Grid-based indicator
+ * @slot - Default slot for bcm-segment components
+ */
+export declare class BcmSegmentedPicker {
+  el: HTMLElement;
+  /**
+   * Selected segment value
+   */
+  value: string;
+  /**
+   * Name attribute for form association
+   */
+  name: string;
+  /**
+   * Whether this field is required in a form
+   */
+  required: boolean;
+  /**
+   * Size variant
+   */
+  size: 'small' | 'medium' | 'large';
+  /**
+   * Full width flag
+   */
+  fullWidth: boolean;
+  /**
+   * Disabled state
+   */
+  disabled: boolean;
+  /**
+   * Enable shadow on container
+   */
+  shadow: boolean;
+  /**
+   * Emits when selected segment changes
+   */
+  bcmSegmentChange: EventEmitter<{
+    value: string;
+    previousValue: string;
+  }>;
+  segments: Array<{
+    value: string;
+    disabled: boolean;
+  }>;
+  activeIndex: number;
+  private segmentElements;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  /**
+   * Discovers all bcm-segment children
+   */
+  private discoverSegments;
+  /**
+   * Updates the active index based on current value
+   */
+  private updateActiveIndex;
+  /**
+   * Updates selected state of all segment elements
+   */
+  private updateSegmentStates;
+  /**
+   * Updates CSS custom properties for indicator positioning
+   */
+  private updateCSSVariables;
+  handleValueChange(newValue: string, oldValue: string): void;
+  handleSizeChange(): void;
+  /**
+   * Propagates parent props to child segments
+   */
+  private propagatePropsToSegments;
+  /**
+   * Handles segment click events from children
+   */
+  handleSegmentClick(event: CustomEvent<string>): void;
+  /**
+   * Public method to programmatically set active segment
+   */
+  setValue(value: string): Promise<void>;
+  /**
+   * Public method to get active segment value
+   */
+  getValue(): Promise<string>;
+  render(): any;
+}

package/dist/types/components/other/segmented-picker/types.d.ts

@@ -0,0 +1 @@
+export type SegmentedPickerSize = 'small' | 'medium' | 'large';

package/dist/types/components/other/toast/toast.d.ts

@@ -18,6 +18,7 @@ export declare class BcmToast implements ComponentInterface {
   visible: boolean;
   visibleContainer: boolean;
   private timer;
+  private renderMultiline;
   show(): Promise<HTMLElement>;
   hide(): Promise<void>;
   private handleMouseEnter;

package/dist/types/components.d.ts

@@ -278,6 +278,34 @@ export namespace Components {
         "placeholder": string;
         "readonly": boolean;
         "required": boolean;
+        /**
+          * Picker type to display
+         */
+        "type": 'default' | 'palette';
+        "value": string;
+    }
+    /**
+     * A component that renders a grid of Tailwind CSS colors.
+     * It allows users to select a specific shade from various color palettes.
+     * @component bcm-color-palette
+     * @property {string} value - The currently selected color value (e.g., '#000000'). This prop is mutable and reflected.
+     * @property {string[]} paletteKeys - An array of Tailwind color names to display in the grid (e.g., ['blue', 'red']).
+     * @property {number[]} shades - An array of shade values to generate for each color key (e.g., [100, 200, ...]).
+     * @event bcm-change - Emitted when a color is selected. The event detail contains the selected hex color string.
+     * @example <bcm-color-palette value="#000000"></bcm-color-palette>
+     */
+    interface BcmColorPalette {
+        /**
+          * List of tailwind color keys to display
+         */
+        "paletteKeys": string[];
+        /**
+          * List of shades to display
+         */
+        "shades": number[];
+        /**
+          * Selected color value (e.g. '#000000')
+         */
         "value": string;
     }
     interface BcmColorful {
@@ -747,6 +775,7 @@ export namespace Components {
         "_id": string;
         "addChecked": (ids?: any[], save?: boolean, emit?: boolean) => Promise<any>;
         "allOpen": boolean;
+        "autoFocusSelected": boolean;
         "caption": string;
         "captionError": string;
         "captionType": StatusTypes;
@@ -1265,6 +1294,80 @@ export namespace Components {
         "setValue": (newValue: any) => Promise<void>;
         "size": SizeTypes1;
     }
+    /**
+     * Individual segment option component
+     */
+    interface BcmSegment {
+        /**
+          * Index of currently active segment (inherited from parent)
+         */
+        "activeIndex": number;
+        /**
+          * Disabled state
+         */
+        "disabled": boolean;
+        /**
+          * Index of this segment (inherited from parent)
+         */
+        "index": number;
+        /**
+          * Selected state (controlled by parent)
+         */
+        "selected": boolean;
+        /**
+          * Size variant (inherited from parent)
+         */
+        "size": 'small' | 'medium' | 'large';
+        /**
+          * Total number of segments (inherited from parent)
+         */
+        "totalSegments": number;
+        /**
+          * Unique identifier for this segment
+         */
+        "value": string;
+    }
+    /**
+     * Modern Segmented Picker component with CSS Grid-based indicator
+     */
+    interface BcmSegmentedPicker {
+        /**
+          * Disabled state
+         */
+        "disabled": boolean;
+        /**
+          * Full width flag
+         */
+        "fullWidth": boolean;
+        /**
+          * Public method to get active segment value
+         */
+        "getValue": () => Promise<string>;
+        /**
+          * Name attribute for form association
+         */
+        "name": string;
+        /**
+          * Whether this field is required in a form
+         */
+        "required": boolean;
+        /**
+          * Public method to programmatically set active segment
+         */
+        "setValue": (value: string) => Promise<void>;
+        /**
+          * Enable shadow on container
+         */
+        "shadow": boolean;
+        /**
+          * Size variant
+         */
+        "size": 'small' | 'medium' | 'large';
+        /**
+          * Selected segment value
+         */
+        "value": string;
+    }
     interface BcmSelect {
         "_data": any;
         "_id": string;
@@ -1800,6 +1903,10 @@ export interface BcmCollapseCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBcmCollapseElement;
 }
+export interface BcmColorPaletteCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBcmColorPaletteElement;
+}
 export interface BcmColorfulCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBcmColorfulElement;
@@ -1936,6 +2043,14 @@ export interface BcmSearchCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBcmSearchElement;
 }
+export interface BcmSegmentCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBcmSegmentElement;
+}
+export interface BcmSegmentedPickerCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBcmSegmentedPickerElement;
+}
 export interface BcmSelectCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBcmSelectElement;
@@ -2131,6 +2246,22 @@ declare global {
         prototype: HTMLBcmColorInputElement;
         new (): HTMLBcmColorInputElement;
     };
+    /**
+     * A component that renders a grid of Tailwind CSS colors.
+     * It allows users to select a specific shade from various color palettes.
+     * @component bcm-color-palette
+     * @property {string} value - The currently selected color value (e.g., '#000000'). This prop is mutable and reflected.
+     * @property {string[]} paletteKeys - An array of Tailwind color names to display in the grid (e.g., ['blue', 'red']).
+     * @property {number[]} shades - An array of shade values to generate for each color key (e.g., [100, 200, ...]).
+     * @event bcm-change - Emitted when a color is selected. The event detail contains the selected hex color string.
+     * @example <bcm-color-palette value="#000000"></bcm-color-palette>
+     */
+    interface HTMLBcmColorPaletteElement extends Components.BcmColorPalette, HTMLStencilElement {
+    }
+    var HTMLBcmColorPaletteElement: {
+        prototype: HTMLBcmColorPaletteElement;
+        new (): HTMLBcmColorPaletteElement;
+    };
     interface HTMLBcmColorfulElement extends Components.BcmColorful, HTMLStencilElement {
     }
     var HTMLBcmColorfulElement: {
@@ -2461,6 +2592,24 @@ declare global {
         prototype: HTMLBcmSearchElement;
         new (): HTMLBcmSearchElement;
     };
+    /**
+     * Individual segment option component
+     */
+    interface HTMLBcmSegmentElement extends Components.BcmSegment, HTMLStencilElement {
+    }
+    var HTMLBcmSegmentElement: {
+        prototype: HTMLBcmSegmentElement;
+        new (): HTMLBcmSegmentElement;
+    };
+    /**
+     * Modern Segmented Picker component with CSS Grid-based indicator
+     */
+    interface HTMLBcmSegmentedPickerElement extends Components.BcmSegmentedPicker, HTMLStencilElement {
+    }
+    var HTMLBcmSegmentedPickerElement: {
+        prototype: HTMLBcmSegmentedPickerElement;
+        new (): HTMLBcmSegmentedPickerElement;
+    };
     interface HTMLBcmSelectElement extends Components.BcmSelect, HTMLStencilElement {
     }
     var HTMLBcmSelectElement: {
@@ -2671,6 +2820,7 @@ declare global {
         "bcm-collapse": HTMLBcmCollapseElement;
         "bcm-collapse-group": HTMLBcmCollapseGroupElement;
         "bcm-color-input": HTMLBcmColorInputElement;
+        "bcm-color-palette": HTMLBcmColorPaletteElement;
         "bcm-colorful": HTMLBcmColorfulElement;
         "bcm-colorpicker": HTMLBcmColorpickerElement;
         "bcm-content": HTMLBcmContentElement;
@@ -2726,6 +2876,8 @@ declare global {
         "bcm-result": HTMLBcmResultElement;
         "bcm-scroll-area": HTMLBcmScrollAreaElement;
         "bcm-search": HTMLBcmSearchElement;
+        "bcm-segment": HTMLBcmSegmentElement;
+        "bcm-segmented-picker": HTMLBcmSegmentedPickerElement;
         "bcm-select": HTMLBcmSelectElement;
         "bcm-select-box": HTMLBcmSelectBoxElement;
         "bcm-select-group": HTMLBcmSelectGroupElement;
@@ -3010,6 +3162,38 @@ declare namespace LocalJSX {
         "placeholder"?: string;
         "readonly"?: boolean;
         "required"?: boolean;
+        /**
+          * Picker type to display
+         */
+        "type"?: 'default' | 'palette';
+        "value"?: string;
+    }
+    /**
+     * A component that renders a grid of Tailwind CSS colors.
+     * It allows users to select a specific shade from various color palettes.
+     * @component bcm-color-palette
+     * @property {string} value - The currently selected color value (e.g., '#000000'). This prop is mutable and reflected.
+     * @property {string[]} paletteKeys - An array of Tailwind color names to display in the grid (e.g., ['blue', 'red']).
+     * @property {number[]} shades - An array of shade values to generate for each color key (e.g., [100, 200, ...]).
+     * @event bcm-change - Emitted when a color is selected. The event detail contains the selected hex color string.
+     * @example <bcm-color-palette value="#000000"></bcm-color-palette>
+     */
+    interface BcmColorPalette {
+        /**
+          * Emitted when a color is selected
+         */
+        "onBcm-change"?: (event: BcmColorPaletteCustomEvent<string>) => void;
+        /**
+          * List of tailwind color keys to display
+         */
+        "paletteKeys"?: string[];
+        /**
+          * List of shades to display
+         */
+        "shades"?: number[];
+        /**
+          * Selected color value (e.g. '#000000')
+         */
         "value"?: string;
     }
     interface BcmColorful {
@@ -3409,6 +3593,7 @@ declare namespace LocalJSX {
     interface BcmList {
         "_id"?: string;
         "allOpen"?: boolean;
+        "autoFocusSelected"?: boolean;
         "caption"?: string;
         "captionError"?: string;
         "captionType"?: StatusTypes;
@@ -3913,6 +4098,80 @@ declare namespace LocalJSX {
         "searchIsOnlyChilds"?: boolean;
         "size"?: SizeTypes1;
     }
+    /**
+     * Individual segment option component
+     */
+    interface BcmSegment {
+        /**
+          * Index of currently active segment (inherited from parent)
+         */
+        "activeIndex"?: number;
+        /**
+          * Disabled state
+         */
+        "disabled"?: boolean;
+        /**
+          * Index of this segment (inherited from parent)
+         */
+        "index"?: number;
+        /**
+          * Internal event emitted when segment is clicked
+         */
+        "onBcm-segment-click"?: (event: BcmSegmentCustomEvent<string>) => void;
+        /**
+          * Selected state (controlled by parent)
+         */
+        "selected"?: boolean;
+        /**
+          * Size variant (inherited from parent)
+         */
+        "size"?: 'small' | 'medium' | 'large';
+        /**
+          * Total number of segments (inherited from parent)
+         */
+        "totalSegments"?: number;
+        /**
+          * Unique identifier for this segment
+         */
+        "value": string;
+    }
+    /**
+     * Modern Segmented Picker component with CSS Grid-based indicator
+     */
+    interface BcmSegmentedPicker {
+        /**
+          * Disabled state
+         */
+        "disabled"?: boolean;
+        /**
+          * Full width flag
+         */
+        "fullWidth"?: boolean;
+        /**
+          * Name attribute for form association
+         */
+        "name"?: string;
+        /**
+          * Emits when selected segment changes
+         */
+        "onBcm-segment-change"?: (event: BcmSegmentedPickerCustomEvent<{ value: string; previousValue: string }>) => void;
+        /**
+          * Whether this field is required in a form
+         */
+        "required"?: boolean;
+        /**
+          * Enable shadow on container
+         */
+        "shadow"?: boolean;
+        /**
+          * Size variant
+         */
+        "size"?: 'small' | 'medium' | 'large';
+        /**
+          * Selected segment value
+         */
+        "value"?: string;
+    }
     interface BcmSelect {
         "_data"?: any;
         "_id"?: string;
@@ -4385,6 +4644,7 @@ declare namespace LocalJSX {
         "bcm-collapse": BcmCollapse;
         "bcm-collapse-group": BcmCollapseGroup;
         "bcm-color-input": BcmColorInput;
+        "bcm-color-palette": BcmColorPalette;
         "bcm-colorful": BcmColorful;
         "bcm-colorpicker": BcmColorpicker;
         "bcm-content": BcmContent;
@@ -4440,6 +4700,8 @@ declare namespace LocalJSX {
         "bcm-result": BcmResult;
         "bcm-scroll-area": BcmScrollArea;
         "bcm-search": BcmSearch;
+        "bcm-segment": BcmSegment;
+        "bcm-segmented-picker": BcmSegmentedPicker;
         "bcm-select": BcmSelect;
         "bcm-select-box": BcmSelectBox;
         "bcm-select-group": BcmSelectGroup;
@@ -4500,6 +4762,17 @@ declare module "@stencil/core" {
             "bcm-collapse": LocalJSX.BcmCollapse & JSXBase.HTMLAttributes<HTMLBcmCollapseElement>;
             "bcm-collapse-group": LocalJSX.BcmCollapseGroup & JSXBase.HTMLAttributes<HTMLBcmCollapseGroupElement>;
             "bcm-color-input": LocalJSX.BcmColorInput & JSXBase.HTMLAttributes<HTMLBcmColorInputElement>;
+            /**
+             * A component that renders a grid of Tailwind CSS colors.
+             * It allows users to select a specific shade from various color palettes.
+             * @component bcm-color-palette
+             * @property {string} value - The currently selected color value (e.g., '#000000'). This prop is mutable and reflected.
+             * @property {string[]} paletteKeys - An array of Tailwind color names to display in the grid (e.g., ['blue', 'red']).
+             * @property {number[]} shades - An array of shade values to generate for each color key (e.g., [100, 200, ...]).
+             * @event bcm-change - Emitted when a color is selected. The event detail contains the selected hex color string.
+             * @example <bcm-color-palette value="#000000"></bcm-color-palette>
+             */
+            "bcm-color-palette": LocalJSX.BcmColorPalette & JSXBase.HTMLAttributes<HTMLBcmColorPaletteElement>;
             "bcm-colorful": LocalJSX.BcmColorful & JSXBase.HTMLAttributes<HTMLBcmColorfulElement>;
             "bcm-colorpicker": LocalJSX.BcmColorpicker & JSXBase.HTMLAttributes<HTMLBcmColorpickerElement>;
             "bcm-content": LocalJSX.BcmContent & JSXBase.HTMLAttributes<HTMLBcmContentElement>;
@@ -4555,6 +4828,14 @@ declare module "@stencil/core" {
             "bcm-result": LocalJSX.BcmResult & JSXBase.HTMLAttributes<HTMLBcmResultElement>;
             "bcm-scroll-area": LocalJSX.BcmScrollArea & JSXBase.HTMLAttributes<HTMLBcmScrollAreaElement>;
             "bcm-search": LocalJSX.BcmSearch & JSXBase.HTMLAttributes<HTMLBcmSearchElement>;
+            /**
+             * Individual segment option component
+             */
+            "bcm-segment": LocalJSX.BcmSegment & JSXBase.HTMLAttributes<HTMLBcmSegmentElement>;
+            /**
+             * Modern Segmented Picker component with CSS Grid-based indicator
+             */
+            "bcm-segmented-picker": LocalJSX.BcmSegmentedPicker & JSXBase.HTMLAttributes<HTMLBcmSegmentedPickerElement>;
             "bcm-select": LocalJSX.BcmSelect & JSXBase.HTMLAttributes<HTMLBcmSelectElement>;
             "bcm-select-box": LocalJSX.BcmSelectBox & JSXBase.HTMLAttributes<HTMLBcmSelectBoxElement>;
             "bcm-select-group": LocalJSX.BcmSelectGroup & JSXBase.HTMLAttributes<HTMLBcmSelectGroupElement>;

package/dist/types/templates/list-item-template.d.ts

@@ -8,6 +8,8 @@ interface ListItemTemplateProps extends Bcm.ListItemClickEvent {
   size?: any;
   highlight?: any;
   focusItem?: (event: any) => void;
+  disabled?: boolean;
+  readonly?: boolean;
 }
 export declare const ListItemTemplate: FunctionalComponent<ListItemTemplateProps>;
 export {};

package/dist/types/templates/list-template.d.ts

@@ -28,6 +28,8 @@ interface ListTemplateProps extends Bcm.ListClickEvent {
   emptyIcon?: any;
   focusItem?: (event: any) => void;
   handleTransitionEnd?: (event: any) => void;
+  disabled?: boolean;
+  readonly?: boolean;
 }
 export declare const ListTemplate: FunctionalComponent<ListTemplateProps>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bromcom-ui",
-  "version": "3.0.0-alpha.2",
+  "version": "3.0.0-alpha.4",
   "description": "Bromcom UI is a collection of web components built with StencilJS",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

package/dist/bromcom-ui/p-485ed6c1.entry.js

@@ -1,5 +0,0 @@
-/*!
- * Built with Stencil
- * Copyright (c) Bromcom.
- */
-import{h as s,r as t,c as e,g as i}from"./p-e037ee2b.js";import{G as o}from"./p-d4e4aeee.js";import{a as c}from"./p-a313fba6.js";import{c as h}from"./p-64fad38b.js";import{N as a}from"./p-e9a43560.js";import{e as r}from"./p-6f2e4c9b.js";import{C as l}from"./p-436364c8.js";import{C as n}from"./p-2e73d572.js";import"./p-858cee66.js";import"./p-a2df6c19.js";import"./p-85eedabc.js";const d=({_id:t,color:e,customStyle:i,size:o,checked:d,hidden:m,value:p,type:b,onDismiss:f,onSelect:u})=>{!o&&(o=c.FontSize["size-1"]);const j=h(((s,t=!1)=>(a.isNumber(s)&&(s=c.FontSize["size-"+s]||c.FontSize["size-4"]),t?+(c.FontSizeValue[s]||c.FontSizeValue["size-4"])+2:s))(o),"bcm-tag__content",b),k=h("bcm-tag",{hidden:m});return s("div",{id:t,class:h(k,{checked:d})},s("span",{hidden:!0},s("slot",null)),s("span",{class:j,style:(s=>{if((b===c.TagType.basic||b==c.TagType.dismissable)&&n[s])return{color:r(l,n[s]+"-6"),borderColor:r(l,n[s]+"-3"),backgroundColor:r(l,n[s]+"-1")}})(e),onClick:s=>u(s)},b===c.TagType.add&&s("span",{class:"left"},s("bcm-icon",{icon:"far fa-plus"})),b===c.TagType.checkable&&s("input",{type:"checkbox",checked:d}),s("span",{class:"value",style:i},p),b===c.TagType.dismissable&&s("span",{class:"right close-button",onClick:s=>f(s)},s("bcm-icon",{icon:"fal fa-times"}))))},m=class{constructor(s){t(this,s),this.change=e(this,"bcm-change",7),this.tagDismissable=e(this,"bcm-tag-dismissable",7),this.bcmTagSelect=e(this,"bcm-tag-select",7),this._id=o.UID(),this._internal_id=o.UID(),this.hidden=!1,this.value="",this.type=c.TagType.basic,this.checked=!1,this.color=void 0,this.customStyle=void 0,this.itemObject=void 0,this.size=c.FontSize["size-1"],this.closeFunc=s=>s,this.selectFunc=s=>s}handleClick(){this.type===c.TagType.checkable&&this.handleChecked()}handleClose(){this.tagDismissable.emit(this.el)}handleChecked(){this.checked=!this.checked,this.change.emit(this.checked)}render(){const{type:t,color:e,value:i,customStyle:o,size:h,hidden:a,checked:r}=this;return s(d,{size:h,hidden:a,color:e,customStyle:o,checked:r,value:i,type:c.TagType[t],onSelect:s=>{this.bcmTagSelect.emit(s),this.selectFunc({event:s,id:this._id})},onDismiss:s=>{this.handleClose(),this.closeFunc(s)}})}get el(){return i(this)}};export{m as bcm_tag}

package/dist/bromcom-ui/p-5c4939a7.js

@@ -1,5 +0,0 @@
-/*!
- * Built with Stencil
- * Copyright (c) Bromcom.
- */
-import{E as o}from"./p-e037ee2b.js";import{v as s}from"./p-858cee66.js";import{L as e}from"./p-a9eb0321.js";window.bcm={version:s},function(o){const s=document.head,e=document.createElement("script");Object.keys(o).forEach((s=>{e[s]=o[s]})),s.appendChild(e)}({src:"https://kit.fontawesome.com/5e86bea963.js",crossOrigin:"anonymous"}),e.setLicenseKey(o.AG_GRID_LICENSE_KEY);

package/dist/bromcom-ui/p-8457670e.entry.js

@@ -1,5 +0,0 @@
-/*!
- * Built with Stencil
- * Copyright (c) Bromcom.
- */
-import{r as e,c as t,f as i,h as s,H as a,g as o}from"./p-e037ee2b.js";import{I as n}from"./p-8e5e362a.js";import{G as r,s as h}from"./p-d4e4aeee.js";import{S as p}from"./p-d65bc842.js";import{a as l}from"./p-a313fba6.js";import"./p-858cee66.js";import"./p-a2df6c19.js";import"./p-85eedabc.js";const c=["BCM-INPUT","BCM-TEXTAREA","BCM-SWITCH","BCM-CHECKBOX","BCM-RADIO-GROUP","BCM-CHECKBOX-GROUP","BCM-RANGE","BCM-FORM","BCM-FORM-GROUP","BCM-LIST","BCM-COLORPICKER","BCM-DATE","BCM-DATE-PICKER","BCM-TIME-PICKER","BCM-DATETIME-PICKER","BCM-SELECT","BCM-LISTBOX","BCM-CHIP-GROUP","BCM-INPUT-DROPDOWN","BCM-NUMBER-INPUT"];const m=class{constructor(i){e(this,i),this.bcmForm=t(this,"bcm-form",7),this.isLoad=!1,this.formData={},this.formObj=new Map,this._id=r.UID(),this.validation=!1}componentDidLoad(){this.isLoad=!0,i(this)}componentIsValid(e){if(!e.hidden){this.checkIsGroup(e);const t=["bcm-checkbox","bcm-switch"].includes(p.lowercase(e.tagName))?0==e.value:p.isNullOrEmpty(e.value);e.required&&(t?(e.captionError=l.FormErrorMessages.required,e.captionType="error",this.formObj.set(e.id,{name:e.name,valid:!1,errorDetails:e.captionError})):(e.captionError=null,e.captionType="default",this.formObj.delete(e.id)))}}isGroup(e){return["bcm-checkbox-group"].includes(p.lowercase(e.tagName))}checkIsGroup(e){if(this.isGroup(e))for(let t of Array.from(e.querySelectorAll("bcm-checkbox")))t&&this.componentIsValid(t)}changeCheckboxGroup(e){const t=e.target,{changed:i}=e.detail,s=Array.from(t.querySelectorAll("bcm-checkbox"));for(let e of s)e.id==i.element.id&&(e.value=i.event.value,this.componentIsValid(e))}bcmComponentList(){return h((()=>Array.from(this.el.querySelectorAll("*")).filter((e=>c.includes(e.tagName)&&(!e["s-hn"]||"BCM-FORM-2"==e["s-hn"]))).filter(Boolean)),[])}formResponse(){const e={formData:this.formData,isValid:0==this.formObj.size,errorDetails:Object.assign({},this.formObj.size>0&&Array.from(this.formObj).map((([e,t])=>({[t.name]:t.errorDetails})))),message:0==this.formObj.size?"":"Please fill in all inputs"};return this.bcmForm.emit(e),e}async setMethodType(e){const{isLoad:t,validation:i}=this;if(t)for(const t of this.bcmComponentList())try{await t[e](),"setClear"==e&&i&&this.componentIsValid(t)}catch(i){console.error(t.nodeName,e,i)}return Promise.resolve()}async submit(){const{isLoad:e,validation:t}=this;if(e)for(const e of this.bcmComponentList()){const{name:i,value:s}=e;this.formData[i]=p.isNullOrEmpty(s)?null:s,t&&this.componentIsValid(e)}return Promise.resolve(this.formResponse())}async set(e){var t,i,s;if(this.isLoad&&e&&(null===(t=this.bcmComponentList())||void 0===t?void 0:t.length)>0)for(let t of Object.keys(e)){const a=null!==(s=null===(i=this.bcmComponentList())||void 0===i?void 0:i.find((e=>e.name==t)))&&void 0!==s?s:{};if(a)try{await a.set(e[t]),this.componentIsValid(a)}catch(e){console.warn("set: ",t,a.nodeName)}}}async get(){var e;let t={};if((null===(e=this.bcmComponentList())||void 0===e?void 0:e.length)>0)for(let e of this.bcmComponentList()){const i=await e.get();t=Object.assign(Object.assign({},t),{[e.name]:p.isNullOrEmpty(i)?null:i})}return Promise.resolve(t)}async resetCaption(){return Promise.resolve(await this.setMethodType("resetCaption"))}async setClear(){return this.formData={},this.formObj=new Map,Promise.resolve(await this.setMethodType("setClear"))}onChange(e){const{isLoad:t,validation:i}=this;if(t){const t=e.target,s=t&&t.tagName.toLowerCase().startsWith("bcm-");if(i&&s){if(this.isGroup(t))return this.changeCheckboxGroup(e);this.componentIsValid(t)}}}render(){return s(a,null,s("slot",null))}get el(){return o(this)}};(function(e,t,i,s){var a,o=arguments.length,n=o<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,s);else for(var r=e.length-1;r>=0;r--)(a=e[r])&&(n=(o<3?a(n):o>3?a(t,i,n):a(t,i))||n);o>3&&n&&Object.defineProperty(t,i,n)})([n()],m.prototype,"el",void 0),m.style='@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}';export{m as bcm_form_2}

package/dist/bromcom-ui/p-dcd69786.entry.js

@@ -1,5 +0,0 @@
-/*!
- * Built with Stencil
- * Copyright (c) Bromcom.
- */
-import{r as t,c as s,h as e,H as i,g as o}from"./p-e037ee2b.js";import{c as r}from"./p-64fad38b.js";import{G as w}from"./p-d4e4aeee.js";import{S as a}from"./p-d65bc842.js";import{a as n}from"./p-a313fba6.js";import{d as h}from"./p-6f2e4c9b.js";import"./p-85eedabc.js";import"./p-858cee66.js";import"./p-a2df6c19.js";const c=class{constructor(e){t(this,e),this.bcmToastClose=s(this,"bcm-toast-close",7),this.bcmToastOpen=s(this,"bcm-toast-open",7),this.bcmToastView=s(this,"bcm-toast-view",7),this._id=w.UID(),this.status=void 0,this.message="",this.description="",this.duration=3e3,this.position=n.Placement.bottom,this.messageIcon=void 0,this.viewButton=!1,this.closeButton=!0,this.removeAfterClose=!0,this.visible=!1,this.visibleContainer=!1}async show(){const t=document.getElementById(this._id+"-container");return t&&this.createContainer(this.position).appendChild(t),this.visible=!0,await h(50),this.visibleContainer=!0,this.bcmToastOpen.emit(),this.timer&&clearTimeout(this.timer),this.timer=setTimeout((()=>this.hide()),this.duration),this.el}async hide(){this.visibleContainer=!1,clearTimeout(this.timer),this.bcmToastClose.emit(),await h(100),this.visible=!1,this.removeAfterClose&&(await h(100),this.el.remove())}handleMouseEnter(){clearTimeout(this.timer)}handleMouseLeave(){this.visible&&(this.timer=setTimeout((()=>this.hide()),1e3))}createContainer(t){const s="bcm-toast-container-"+t;let e=document.getElementById(s);if(!e){e=document.createElement("div"),e.id=s;const t=r("tw-pointer-events-none tw-overflow-hidden tw-z-50","tw-fixed tw-flex","tw-p-4 tw-gap-4",{"tw-flex-col-reverse tw-inset-x-0 tw-top-4 tw-mx-auto":this.position===n.Placement.top,"tw-flex-col tw-inset-x-0 tw-bottom-4 tw-mx-auto":this.position===n.Placement.bottom,"tw-flex-col-reverse tw-top-4 tw-left-4":this.position===n.Placement["top-start"],"tw-flex-col-reverse tw-top-4 tw-right-4":this.position===n.Placement["top-end"],"tw-flex-col tw-bottom-4 tw-left-4":this.position===n.Placement["bottom-start"],"tw-flex-col tw-bottom-4 tw-right-4":this.position===n.Placement["bottom-end"]});e.classList.add(...t.split(" ")),document.body.appendChild(e)}return e}render(){return e(i,{class:"tw-hidden"},e("div",{class:r({"tw-hidden":!this.visible}),id:this._id+"-container",onMouseEnter:()=>this.handleMouseEnter(),onMouseLeave:()=>this.handleMouseLeave()},e("div",{class:r("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",{"tw-p-4":!this.description,"tw-p-6":this.description},"tw-transform tw-transition tw-duration-300 tw-ease-in-out ",{"tw-translate-y-0 tw-opacity-100 ":this.visibleContainer,"tw-opacity-0":!this.visibleContainer,"tw-translate-y-[-100%]":!this.visibleContainer&&"top"===this.position.split("-")[0],"tw-translate-y-[100%]":!this.visibleContainer&&"bottom"===this.position.split("-")[0]})},e("div",{class:"tw-flex tw-items-center tw-justify-between tw-gap-5"},e("div",{class:"tw-flex tw-items-center tw-gap-3 "},this.status&&e("i",{class:r("tw-text-6",this.messageIcon?this.messageIcon:"far",{"tw-text-color-success":"success"===this.status,"tw-text-color-error":"error"===this.status,"tw-text-color-warning":"warning"===this.status,"tw-text-color-info":"info"===this.status},{"fa-check-circle":!this.messageIcon&&"success"===this.status,"fa-exclamation-circle":!this.messageIcon&&"error"===this.status,"fa-exclamation-triangle":!this.messageIcon&&"warning"===this.status,"fa-info-circle":!this.messageIcon&&"info"===this.status})}),e("span",{class:r({"tw-text-4":!this.description,"tw-text-6 tw-font-medium":this.description})},!this.description&&this.status&&e("span",null,a.capitalize(this.status),": "),this.message)),e("div",{class:"tw-flex tw-items-baseline tw-gap-2"},this.viewButton&&e("button",{onClick:()=>this.bcmToastView.emit(),title:"View details",class:r("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",{"tw-font-medium":this.description})},"View"),this.closeButton&&e("button",{title:"Close",onClick:()=>this.hide(),class:r("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")},e("i",{class:"fal fa-times"})))),this.description&&e("div",{class:"tw-text-size-5 font-medium"},this.description),e("slot",null))))}get el(){return o(this)}};export{c as bcm_toast}

package/dist/bromcom-ui/p-e9a43560.js

@@ -1,5 +0,0 @@
-/*!
- * Built with Stencil
- * Copyright (c) Bromcom.
- */
-import{s as e}from"./p-d4e4aeee.js";class s{}s.isNumber=s=>e((()=>/^[0-9]+$/i.test(s))),s.convertToNumber=s=>e((()=>Number(s))),s.replaceNumber=s=>e((()=>s.replace(/[^0-9]/g,""))),s.replaceFloat=s=>e((()=>s.replace(/[^0-9.]/g,""))),s.toFixed=(s,a)=>e((()=>s.toFixed(a))),s.parseFloatFixed=(a,r)=>e((()=>parseFloat(s.replaceFloat(a)).toFixed(r))),s.getDecimalLength=s=>e((()=>s.split(".")[1]?s.split(".")[1].length:0)),s.toNumber=s=>e((()=>Number(s.replace(/[^0-9.]/g,""))));export{s as N}

package/dist/bromcom-ui/p-ea24a822.entry.js

@@ -1,5 +0,0 @@
-/*!
- * Built with Stencil
- * Copyright (c) Bromcom.
- */
-import{r as t,h as p,H as s,g as r}from"./p-e037ee2b.js";import"./p-499d8454.js";import"./p-626a65e9.js";import{G as e}from"./p-d4e4aeee.js";import"./p-e9a43560.js";import"./p-d65bc842.js";import"./p-367bc8e0.js";import"./p-6f861fed.js";import"./p-a313fba6.js";import{c as o}from"./p-64fad38b.js";import"./p-436364c8.js";import"./p-6f2e4c9b.js";import"./p-a2df6c19.js";import"./p-85eedabc.js";import"./p-858cee66.js";const i=class{constructor(p){t(this,p),this._id=e.UID(),this.el.slot="footer"}render(){return p(s,{class:o("tw-flex tw-flex-row tw-items-center tw-justify-end tw-gap-2 tw-px-6 tw-pb-6 tw-pt-2")},p("slot",null))}get el(){return r(this)}};export{i as bcm_modal_2_footer}