bromcom-ui 2.7.38-rc.0 → 2.7.38-rc.10

package/dist/esm/{stepper-states-204a065e.js → stepper-states-5ed84b4b.js}

@@ -2,8 +2,9 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { c as createStore } from './index-6bdec00d.js';
-import { G as Generate, s as snq } from './generate-30f32431.js';
+import { c as createStore } from './index-8b349654.js';
+import { G as Generate, s as snq } from './generate-8f3b9a2c.js';
+import { f as forceUpdate } from './index-6e2d80d7.js';
 
 const { state } = createStore({
   value: new Map(),
@@ -16,7 +17,8 @@ const setValue = val => {
         .filter(data => !data.hidden)
         .map((item, index) => ({
         id: item.id || Generate.UID(),
-        title: item.title || item._title || 'Step ' + (index + 1),
+        title: item.title || item._title,
+        _title: item.title || item._title || 'Step ' + (index + 1),
         description: item.description || '',
         status: item.status || 'default',
         disabled: val.linear ? (index == 0 ? false : true) : item.disabled || false,
@@ -46,14 +48,14 @@ const changeStepStatus = (id, stepId, status) => {
   const value = state.value.get(id);
   if (value && value.steps) {
     value.steps = value.steps.map(step => (Object.assign(Object.assign({}, step), { status: step.id === stepId ? status : step.status })));
-    value.el.tick = Generate.UID();
+    forceUpdate(value.el);
   }
 };
 const changeStepDisabled = (id, stepId, disabled) => {
   const value = state.value.get(id);
   if (value && value.steps) {
     value.steps = value.steps.map(step => (Object.assign(Object.assign({}, step), { disabled: step.id === stepId ? disabled : step.disabled })));
-    value.el.tick = Generate.UID();
+    forceUpdate(value.el);
   }
 };
 const setActiveIndex = (id, index) => state.value.get(id).active = index;
@@ -62,7 +64,7 @@ const stepperReset = id => {
   if (value) {
     value.active = 1;
     value.steps = value.steps.map((step, i) => (Object.assign(Object.assign({}, step), { active: i === 0, status: 'default', disabled: i !== 0, loading: false })));
-    value.el.tick = Generate.UID();
+    forceUpdate(value.el);
   }
 };
 const getValue = id => snq(() => state.value.get(id), {});

package/dist/esm/{string-helper-74a1648f.js → string-helper-0fb7ff20.js}

@@ -2,7 +2,7 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { a as Bcm } from './bcm-b8d8a236.js';
+import { B as Bcm } from './bcm-9f50af9c.js';
 import { c as createCommonjsModule, a as commonjsGlobal } from './_commonjsHelpers-3016b722.js';
 
 var slugify = createCommonjsModule(function (module, exports) {

package/dist/esm/tooltip-helper-7a9c8211.js

@@ -0,0 +1,117 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import './element-dragger-89bb52fd.js';
+import { S as StringHelper } from './string-helper-0fb7ff20.js';
+import { F as FloatingUI } from './floating-ui-4a49ea46.js';
+import { C as ColorHelper } from './color-helper-7e202fd8.js';
+import './datetime-helper-df25808a.js';
+import { G as Generate } from './generate-8f3b9a2c.js';
+import './number-helper-b2969361.js';
+import './validators-8aafda5d.js';
+import { a as Bcm } from './bcm-9f50af9c.js';
+
+class Tooltip {
+  constructor({ message, targetId, placement = "top", color = "slate-700", trigger = "none", size = "medium" }) {
+    this.bgColor = () => ColorHelper.twColor(this.color, 700);
+    this.target = () => document.getElementById(this.targetId);
+    this.sizeClass = () => {
+      switch (this.size) {
+        case Bcm.Size.small:
+          return "tw-text-1";
+        case Bcm.Size.medium:
+          return "tw-text-2";
+        case Bcm.Size.large:
+          return "tw-text-3";
+        default:
+          return "tw-text-2";
+      }
+    };
+    this.init = () => {
+      this.el = Generate.createElement("div", {
+        "id": `${this.targetId}-tooltip-box`,
+        "class": `
+            tw-whitespace-normal tw-break-words tw-block tw-font-sans tw-pointer-events-none tw-max-w-xs tw-py-1 tw-px-2 tw-rounded tw-bg-${this.bgColor()} tw-text-white ${this.sizeClass()} tw-absolute tw-top-0 tw-left-0 tw-z-tooltip tw-opacity-0 tw-transition-opacity tw-duration-300`,
+        "role": "tooltip",
+        "aria-hidden": "true",
+        "style": `color: ${ColorHelper.twColorReverse(this.bgColor())}`,
+        "innerHTML": StringHelper.trim(this.message),
+      });
+    };
+    this.update = () => {
+      this.el = document.getElementById(this.id);
+      if (this.el) {
+        this.hide();
+        this.show();
+      }
+    };
+    this.listener = () => {
+      window.addEventListener("resize", this.calculatePosition.bind(this));
+      window.addEventListener("scroll", this.calculatePosition.bind(this), true);
+      window.addEventListener("wheel", this.calculatePosition.bind(this));
+      if (this.trigger && this.target()) {
+        switch (this.trigger) {
+          case "click":
+            this.target().addEventListener("click", this.toggle.bind(this));
+            break;
+          case "hover":
+            this.target().addEventListener("mouseenter", this.show.bind(this));
+            this.target().addEventListener("mouseleave", this.hide.bind(this));
+            break;
+          case "focus":
+            this.target().addEventListener("focus", this.show.bind(this), true);
+            this.target().addEventListener("blur", this.hide.bind(this), true);
+            break;
+        }
+      }
+      this.calculatePosition();
+    };
+    this.calculatePosition = () => {
+      this.el = document.getElementById(this.id);
+      if (this.el) {
+        FloatingUI({
+          ref: this.target(),
+          floating: this.el,
+          placement: this.placement,
+          offset: 8,
+          arrow: true,
+          arrowColor: `tw-bg-${this.bgColor()}`,
+        });
+      }
+    };
+    this.show = () => {
+      if (this.message) {
+        this.init();
+        this.calculatePosition();
+      }
+      else {
+        this.hide();
+      }
+    };
+    this.hide = () => {
+      this.el = document.getElementById(this.id);
+      if (this.el) {
+        this.el.remove();
+      }
+    };
+    this.toggle = () => {
+      this.el = document.getElementById(this.id);
+      if (this.el) {
+        this.hide();
+      }
+      else {
+        this.show();
+      }
+    };
+    this.message = message;
+    this.targetId = targetId;
+    this.placement = placement;
+    this.color = color;
+    this.id = targetId + "-tooltip-box";
+    this.trigger = trigger;
+    this.size = size;
+  }
+}
+
+export { Tooltip as T };

package/dist/esm/{validators-e1c02a1a.js → validators-8aafda5d.js}

@@ -2,7 +2,7 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { s as snq } from './generate-30f32431.js';
+import { s as snq } from './generate-8f3b9a2c.js';
 
 class Validators {
 }

package/dist/types/components/atoms/chip/chip.d.ts

@@ -1,4 +1,4 @@
-import { ComponentInterface } from '../../../stencil-public-runtime';
+import { ComponentInterface, EventEmitter } from '../../../stencil-public-runtime';
 export declare class BcmChip implements ComponentInterface {
   el: HTMLElement;
   _id: string;
@@ -8,6 +8,9 @@ export declare class BcmChip implements ComponentInterface {
   icon: any;
   disabled: false;
   color: any;
+  bcmChipDismiss: EventEmitter;
+  bcmChipSelect: EventEmitter;
+  bcmChipAddable: EventEmitter;
   setColor(): {
     '--bcm-chip-color': string;
     '--bcm-chip-color-hover': string;
@@ -20,5 +23,7 @@ export declare class BcmChip implements ComponentInterface {
     '--bcm-chip-background-color-active': string;
     '--bcm-chip-background-color-disabled': string;
   };
+  private handleDismiss;
+  private handleAddable;
   render(): any;
 }

package/dist/types/components/molecules/color-input/color-input.d.ts

@@ -0,0 +1,20 @@
+import { ComponentInterface } from "../../../stencil-public-runtime";
+export declare class BcmColorInput implements ComponentInterface {
+  el: HTMLElement;
+  _id: string;
+  label: string;
+  placeholder: string;
+  value: string;
+  required: boolean;
+  disabled: boolean;
+  readonly: boolean;
+  fullWidth: boolean;
+  handleChange(color: any): void;
+  getInputElement(): HTMLBcmInputElement;
+  getPickerElement(): HTMLBcmColorfulElement;
+  handleInputChanged(e: any): void;
+  eyeDropper(): void;
+  isEyeDropperSupported(): boolean;
+  render(): any;
+  [memberName: string]: any;
+}

package/dist/types/components/molecules/colorful/colorful.d.ts

@@ -0,0 +1,8 @@
+import { ComponentInterface, EventEmitter } from "../../../stencil-public-runtime";
+export declare class BcmColorful implements ComponentInterface {
+  el: HTMLElement;
+  color: any;
+  bcmChange: EventEmitter;
+  handleChange(e: any): void;
+  componentDidRender(): void;
+}

package/dist/types/components/molecules/input/input.d.ts

@@ -78,5 +78,8 @@ export declare class BcmInput implements ComponentInterface {
   checkValid(type: any): boolean;
   whatchHasFocus(): void;
   fixToNumber(val: any): any;
+  eyeDropper(): void;
+  isEyeDropperSupported(): boolean;
+  toggleLinked(): void;
   render(): any;
 }

package/dist/types/components/molecules/linked/linked.d.ts

@@ -1,5 +1,5 @@
-import { ComponentInterface, EventEmitter } from '../../../stencil-public-runtime';
-import { PlacementTypes, TrigglerTypes } from '../../../models';
+import { ComponentInterface, EventEmitter } from "../../../stencil-public-runtime";
+import { PlacementTypes, TrigglerTypes } from "../../../models";
 export declare class BcmLinked implements ComponentInterface {
   el: HTMLElement;
   _id: string;

package/dist/types/components/molecules/popover/popover.d.ts

@@ -1,6 +1,6 @@
-import { Popover } from '../../../helper';
-import { PlacementTypes, TrigglerTypes } from '../../../models';
-import { ComponentInterface } from '../../../stencil-public-runtime';
+import { Popover } from "../../../helper";
+import { PlacementTypes, TrigglerTypes } from "../../../models";
+import { ComponentInterface } from "../../../stencil-public-runtime";
 export declare class BcmPopover implements ComponentInterface {
   el: HTMLElement;
   _id: string;

package/dist/types/components/molecules/skeleton/skeleton.d.ts

@@ -1,4 +1,4 @@
-import { ComponentInterface } from '../../../stencil-public-runtime';
+import { ComponentInterface } from "../../../stencil-public-runtime";
 export declare class BcmSkeleton implements ComponentInterface {
   el: HTMLElement;
   _id: string;

package/dist/types/components/molecules/states/search.states.d.ts

@@ -1,4 +1,4 @@
-import BcmMoleculesState from '../../../models/states/molecules/bcm-molecules-state';
+import BcmMoleculesState from "../../../models/states/molecules/bcm-molecules-state";
 declare const _default: {
   setValue: (val: any) => void;
   removeValue: (_id: any) => void;

package/dist/types/components/molecules/stepper/step.d.ts

@@ -17,7 +17,7 @@ export declare class BcmStep implements ComponentInterface {
   dataIsLoaded: EventEmitter;
   bcmChangeHidden: EventEmitter;
   componentDidLoad(): void;
-  getStepper(): HTMLBcmStepperElement;
+  getStepper(): any;
   activeChanged(): void;
   statusChange(): void;
   hiddenChange(newValue: any, oldValue: any): void;

package/dist/types/components/molecules/stepper/stepper.d.ts

@@ -9,6 +9,7 @@ export declare class BcmStepper implements ComponentInterface {
   size: SizeTypes;
   icon: boolean;
   active: number;
+  stepperId: string;
   data: any[];
   tick: {};
   bcmStepChange: EventEmitter;

package/dist/types/components/molecules/tab-group/tab-group.d.ts

@@ -1,5 +1,5 @@
-import { ComponentInterface, EventEmitter } from '../../../stencil-public-runtime';
-import { SizeTypes } from '../../../models/bcm-types';
+import { ComponentInterface, EventEmitter } from "../../../stencil-public-runtime";
+import { SizeTypes } from "../../../models/bcm-types";
 export declare class BcmTabGroup implements ComponentInterface {
   el: HTMLElement;
   _id: string;

package/dist/types/components/molecules/tooltip/tooltip.d.ts

@@ -1,6 +1,6 @@
-import { Tooltip } from '../../../helper';
-import { PlacementTypes, TrigglerTypes } from '../../../models';
-import { ComponentInterface } from '../../../stencil-public-runtime';
+import { Tooltip } from "../../../helper";
+import { PlacementTypes, SizeTypes, TrigglerTypes } from "../../../models";
+import { ComponentInterface } from "../../../stencil-public-runtime";
 export declare class BcmTooltip implements ComponentInterface {
   el: HTMLElement;
   _id: string;
@@ -9,6 +9,7 @@ export declare class BcmTooltip implements ComponentInterface {
   trigger: TrigglerTypes;
   open: boolean;
   color: string;
+  size: SizeTypes;
   tooltip: Tooltip;
   componentDidLoad(): void;
   componentDidRender(): void;

package/dist/types/components/organism/date-picker/date-picker.d.ts

@@ -24,6 +24,7 @@ export declare class BcmDatePicker implements ComponentInterface {
   _internal_id: string;
   placement: PlacementTypes;
   linkedComponent: string;
+  clearable: boolean;
   stateStartDate: any;
   stateEndDate: any;
   handleStartDateChange(): void;

package/dist/types/components/organism/datetime-picker/datetime-picker.d.ts

@@ -50,6 +50,7 @@ export declare class BcmDatetimePicker implements ComponentInterface {
   alignment: any;
   placement: PlacementTypes;
   linkedComponent: string;
+  clearable: boolean;
   /**
    * Component States
    */

package/dist/types/components/organism/list/list.d.ts

@@ -90,6 +90,7 @@ export declare class BcmList implements ComponentInterface {
   watchReturnFilterData(newVal: any): void;
   handleOtherSelected(newValue: any): void;
   handleOpen(): Promise<void>;
+  listScrollToTop(): void;
   dataChanged(newValue: any, oldValue: any): Promise<void>;
   isIntersecting(e: CustomEvent): void;
   handleSlotItems(e: CustomEvent): void;

package/dist/types/components/organism/time-picker/time-picker.d.ts

@@ -19,6 +19,7 @@ export declare class BcmTimePicker {
   alignment: any;
   placement: PlacementTypes;
   linkedComponent: string;
+  clearable: boolean;
   /**
    * @ComponentMethod
    */

package/dist/types/components.d.ts

@@ -210,6 +210,19 @@ export namespace Components {
         "multiple": boolean;
         "open": boolean;
     }
+    interface BcmColorInput {
+        "_id": string;
+        "disabled": boolean;
+        "fullWidth": boolean;
+        "label": string;
+        "placeholder": string;
+        "readonly": boolean;
+        "required": boolean;
+        "value": string;
+    }
+    interface BcmColorful {
+        "color": any;
+    }
     interface BcmColorpicker {
         /**
           * Component Properties
@@ -238,6 +251,7 @@ export namespace Components {
         "caption": string;
         "captionError": string;
         "captionType": 'primary' | 'success' | 'warning' | 'error' | 'default';
+        "clearable": boolean;
         "date": Date | string;
         "disabled": boolean;
         "disabledDates": any;
@@ -295,6 +309,7 @@ export namespace Components {
         "caption": string;
         "captionError": string;
         "captionType": 'primary' | 'success' | 'warning' | 'error' | 'default';
+        "clearable": boolean;
         /**
           * @desc
          */
@@ -1043,6 +1058,7 @@ export namespace Components {
         "reset": () => Promise<any>;
         "setActive": (index: number) => Promise<void>;
         "size": SizeTypes1;
+        "stepperId": string;
         "tick": {};
     }
     interface BcmSwitch {
@@ -1202,6 +1218,7 @@ export namespace Components {
         "caption": string;
         "captionError": string;
         "captionType": 'primary' | 'success' | 'warning' | 'error' | 'default';
+        "clearable": boolean;
         "disabled": boolean;
         "fullWidth": boolean;
         "get": () => Promise<any>;
@@ -1271,6 +1288,7 @@ export namespace Components {
         "open": boolean;
         "placement": PlacementTypes1;
         "show": () => Promise<void>;
+        "size": SizeTypes;
         "toggle": () => Promise<void>;
         "trigger": TrigglerTypes;
     }
@@ -1396,10 +1414,18 @@ export interface BcmCheckboxGroupCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBcmCheckboxGroupElement;
 }
+export interface BcmChipCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBcmChipElement;
+}
 export interface BcmCollapseCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBcmCollapseElement;
 }
+export interface BcmColorfulCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBcmColorfulElement;
+}
 export interface BcmColorpickerCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBcmColorpickerElement;
@@ -1651,6 +1677,18 @@ declare global {
         prototype: HTMLBcmCollapseGroupElement;
         new (): HTMLBcmCollapseGroupElement;
     };
+    interface HTMLBcmColorInputElement extends Components.BcmColorInput, HTMLStencilElement {
+    }
+    var HTMLBcmColorInputElement: {
+        prototype: HTMLBcmColorInputElement;
+        new (): HTMLBcmColorInputElement;
+    };
+    interface HTMLBcmColorfulElement extends Components.BcmColorful, HTMLStencilElement {
+    }
+    var HTMLBcmColorfulElement: {
+        prototype: HTMLBcmColorfulElement;
+        new (): HTMLBcmColorfulElement;
+    };
     interface HTMLBcmColorpickerElement extends Components.BcmColorpicker, HTMLStencilElement {
     }
     var HTMLBcmColorpickerElement: {
@@ -2071,6 +2109,8 @@ declare global {
         "bcm-chip": HTMLBcmChipElement;
         "bcm-collapse": HTMLBcmCollapseElement;
         "bcm-collapse-group": HTMLBcmCollapseGroupElement;
+        "bcm-color-input": HTMLBcmColorInputElement;
+        "bcm-colorful": HTMLBcmColorfulElement;
         "bcm-colorpicker": HTMLBcmColorpickerElement;
         "bcm-date-picker": HTMLBcmDatePickerElement;
         "bcm-datetime-picker": HTMLBcmDatetimePickerElement;
@@ -2306,6 +2346,9 @@ declare namespace LocalJSX {
         "color"?: any;
         "disabled"?: false;
         "icon"?: any;
+        "onBcm-chip-addable"?: (event: BcmChipCustomEvent<any>) => void;
+        "onBcm-chip-dismiss"?: (event: BcmChipCustomEvent<any>) => void;
+        "onBcm-chip-select"?: (event: BcmChipCustomEvent<any>) => void;
         "size"?: 'small' | 'medium' | 'large';
         "type"?: 'default' | 'dismissable' | 'addable' | 'checkable';
     }
@@ -2323,6 +2366,20 @@ declare namespace LocalJSX {
         "multiple"?: boolean;
         "open"?: boolean;
     }
+    interface BcmColorInput {
+        "_id"?: string;
+        "disabled"?: boolean;
+        "fullWidth"?: boolean;
+        "label"?: string;
+        "placeholder"?: string;
+        "readonly"?: boolean;
+        "required"?: boolean;
+        "value"?: string;
+    }
+    interface BcmColorful {
+        "color"?: any;
+        "onBcmChange"?: (event: BcmColorfulCustomEvent<any>) => void;
+    }
     interface BcmColorpicker {
         /**
           * Component Properties
@@ -2353,6 +2410,7 @@ declare namespace LocalJSX {
         "caption"?: string;
         "captionError"?: string;
         "captionType"?: 'primary' | 'success' | 'warning' | 'error' | 'default';
+        "clearable"?: boolean;
         "date"?: Date | string;
         "disabled"?: boolean;
         "disabledDates"?: any;
@@ -2379,6 +2437,7 @@ declare namespace LocalJSX {
         "caption"?: string;
         "captionError"?: string;
         "captionType"?: 'primary' | 'success' | 'warning' | 'error' | 'default';
+        "clearable"?: boolean;
         "date"?: string | Date;
         "disabled"?: boolean;
         "disabledDates"?: any;
@@ -3053,6 +3112,7 @@ declare namespace LocalJSX {
         "linear"?: boolean;
         "onBcm-step-change"?: (event: BcmStepperCustomEvent<any>) => void;
         "size"?: SizeTypes1;
+        "stepperId"?: string;
         "tick"?: {};
     }
     interface BcmSwitch {
@@ -3206,6 +3266,7 @@ declare namespace LocalJSX {
         "caption"?: string;
         "captionError"?: string;
         "captionType"?: 'primary' | 'success' | 'warning' | 'error' | 'default';
+        "clearable"?: boolean;
         "disabled"?: boolean;
         "fullWidth"?: boolean;
         "hidden"?: boolean;
@@ -3244,6 +3305,7 @@ declare namespace LocalJSX {
         "message"?: string;
         "open"?: boolean;
         "placement"?: PlacementTypes1;
+        "size"?: SizeTypes;
         "trigger"?: TrigglerTypes;
     }
     interface BcmTreeview {
@@ -3369,6 +3431,8 @@ declare namespace LocalJSX {
         "bcm-chip": BcmChip;
         "bcm-collapse": BcmCollapse;
         "bcm-collapse-group": BcmCollapseGroup;
+        "bcm-color-input": BcmColorInput;
+        "bcm-colorful": BcmColorful;
         "bcm-colorpicker": BcmColorpicker;
         "bcm-date-picker": BcmDatePicker;
         "bcm-datetime-picker": BcmDatetimePicker;
@@ -3459,6 +3523,8 @@ declare module "@stencil/core" {
             "bcm-chip": LocalJSX.BcmChip & JSXBase.HTMLAttributes<HTMLBcmChipElement>;
             "bcm-collapse": LocalJSX.BcmCollapse & JSXBase.HTMLAttributes<HTMLBcmCollapseElement>;
             "bcm-collapse-group": LocalJSX.BcmCollapseGroup & JSXBase.HTMLAttributes<HTMLBcmCollapseGroupElement>;
+            "bcm-color-input": LocalJSX.BcmColorInput & JSXBase.HTMLAttributes<HTMLBcmColorInputElement>;
+            "bcm-colorful": LocalJSX.BcmColorful & JSXBase.HTMLAttributes<HTMLBcmColorfulElement>;
             "bcm-colorpicker": LocalJSX.BcmColorpicker & JSXBase.HTMLAttributes<HTMLBcmColorpickerElement>;
             "bcm-date-picker": LocalJSX.BcmDatePicker & JSXBase.HTMLAttributes<HTMLBcmDatePickerElement>;
             "bcm-datetime-picker": LocalJSX.BcmDatetimePicker & JSXBase.HTMLAttributes<HTMLBcmDatetimePickerElement>;

package/dist/types/helper/tooltip-helper.d.ts

@@ -6,15 +6,18 @@ export declare class Tooltip {
   color: string;
   el: HTMLElement;
   trigger: string;
-  constructor({ message, targetId, placement, color, trigger }: {
+  size: string;
+  constructor({ message, targetId, placement, color, trigger, size }: {
     message: any;
     targetId: any;
     placement?: string;
     color?: string;
     trigger?: string;
+    size?: string;
   });
   private bgColor;
   private target;
+  private sizeClass;
   private init;
   update: () => void;
   listener: () => void;

package/dist/types/models/bcm.d.ts

@@ -321,7 +321,8 @@ export declare namespace Bcm {
     url = "url",
     search = "search",
     tel = "tel",
-    hidden = "hidden"
+    hidden = "hidden",
+    color = "color"
   }
   enum KeyCode {
     backspace = 8,

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

@@ -1,7 +1,7 @@
-import { FunctionalComponent } from '../stencil-public-runtime';
-import Bcm from '../models/bcm';
+import { FunctionalComponent } from "../stencil-public-runtime";
+import Bcm from "../models/bcm";
 interface InputTemplateProps extends Bcm.InputClickEvent {
-  elementType?: 'textarea' | 'input';
+  elementType?: "textarea" | "input";
   rows?: any;
   id?: any;
   internalId?: any;
@@ -29,6 +29,8 @@ interface InputTemplateProps extends Bcm.InputClickEvent {
   changePasswordVisibility?: () => void;
   handleClear?: (e: MouseEvent) => void;
   steps?: (type: any) => void;
+  isEyeDropperSupported?: () => boolean;
+  eyeDropper?: () => void;
 }
 export declare const InputTemplate: FunctionalComponent<InputTemplateProps>;
 export {};

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

@@ -1,6 +1,6 @@
 import { FunctionalComponent } from '../stencil-public-runtime';
 interface StepperHeaderTemplateProps {
-  title: string;
+  _title: string;
   description: string;
   status: 'default' | 'success' | 'warning' | 'error';
   statusIcon: boolean;