bromcom-ui 2.3.63 → 2.3.67

package/dist/bromcom-ui/index-dd5c1283.js

@@ -0,0 +1,187 @@
+import { i as getRenderingRef, j as forceUpdate } from './index-dbc63c66.js';
+
+const appendToMap = (map, propName, value) => {
+    const items = map.get(propName);
+    if (!items) {
+        map.set(propName, [value]);
+    }
+    else if (!items.includes(value)) {
+        items.push(value);
+    }
+};
+const debounce = (fn, ms) => {
+    let timeoutId;
+    return (...args) => {
+        if (timeoutId) {
+            clearTimeout(timeoutId);
+        }
+        timeoutId = setTimeout(() => {
+            timeoutId = 0;
+            fn(...args);
+        }, ms);
+    };
+};
+
+/**
+ * Check if a possible element isConnected.
+ * The property might not be there, so we check for it.
+ *
+ * We want it to return true if isConnected is not a property,
+ * otherwise we would remove these elements and would not update.
+ *
+ * Better leak in Edge than to be useless.
+ */
+const isConnected = (maybeElement) => !('isConnected' in maybeElement) || maybeElement.isConnected;
+const cleanupElements = debounce((map) => {
+    for (let key of map.keys()) {
+        map.set(key, map.get(key).filter(isConnected));
+    }
+}, 2000);
+const stencilSubscription = () => {
+    if (typeof getRenderingRef !== 'function') {
+        // If we are not in a stencil project, we do nothing.
+        // This function is not really exported by @stencil/core.
+        return {};
+    }
+    const elmsToUpdate = new Map();
+    return {
+        dispose: () => elmsToUpdate.clear(),
+        get: (propName) => {
+            const elm = getRenderingRef();
+            if (elm) {
+                appendToMap(elmsToUpdate, propName, elm);
+            }
+        },
+        set: (propName) => {
+            const elements = elmsToUpdate.get(propName);
+            if (elements) {
+                elmsToUpdate.set(propName, elements.filter(forceUpdate));
+            }
+            cleanupElements(elmsToUpdate);
+        },
+        reset: () => {
+            elmsToUpdate.forEach((elms) => elms.forEach(forceUpdate));
+            cleanupElements(elmsToUpdate);
+        },
+    };
+};
+
+const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) => {
+    let states = new Map(Object.entries(defaultState !== null && defaultState !== void 0 ? defaultState : {}));
+    const handlers = {
+        dispose: [],
+        get: [],
+        set: [],
+        reset: [],
+    };
+    const reset = () => {
+        states = new Map(Object.entries(defaultState !== null && defaultState !== void 0 ? defaultState : {}));
+        handlers.reset.forEach((cb) => cb());
+    };
+    const dispose = () => {
+        // Call first dispose as resetting the state would
+        // cause less updates ;)
+        handlers.dispose.forEach((cb) => cb());
+        reset();
+    };
+    const get = (propName) => {
+        handlers.get.forEach((cb) => cb(propName));
+        return states.get(propName);
+    };
+    const set = (propName, value) => {
+        const oldValue = states.get(propName);
+        if (shouldUpdate(value, oldValue, propName)) {
+            states.set(propName, value);
+            handlers.set.forEach((cb) => cb(propName, value, oldValue));
+        }
+    };
+    const state = (typeof Proxy === 'undefined'
+        ? {}
+        : new Proxy(defaultState, {
+            get(_, propName) {
+                return get(propName);
+            },
+            ownKeys(_) {
+                return Array.from(states.keys());
+            },
+            getOwnPropertyDescriptor() {
+                return {
+                    enumerable: true,
+                    configurable: true,
+                };
+            },
+            has(_, propName) {
+                return states.has(propName);
+            },
+            set(_, propName, value) {
+                set(propName, value);
+                return true;
+            },
+        }));
+    const on = (eventName, callback) => {
+        handlers[eventName].push(callback);
+        return () => {
+            removeFromArray(handlers[eventName], callback);
+        };
+    };
+    const onChange = (propName, cb) => {
+        const unSet = on('set', (key, newValue) => {
+            if (key === propName) {
+                cb(newValue);
+            }
+        });
+        const unReset = on('reset', () => cb(defaultState[propName]));
+        return () => {
+            unSet();
+            unReset();
+        };
+    };
+    const use = (...subscriptions) => {
+        const unsubs = subscriptions.reduce((unsubs, subscription) => {
+            if (subscription.set) {
+                unsubs.push(on('set', subscription.set));
+            }
+            if (subscription.get) {
+                unsubs.push(on('get', subscription.get));
+            }
+            if (subscription.reset) {
+                unsubs.push(on('reset', subscription.reset));
+            }
+            if (subscription.dispose) {
+                unsubs.push(on('dispose', subscription.dispose));
+            }
+            return unsubs;
+        }, []);
+        return () => unsubs.forEach((unsub) => unsub());
+    };
+    const forceUpdate = (key) => {
+        const oldValue = states.get(key);
+        handlers.set.forEach((cb) => cb(key, oldValue, oldValue));
+    };
+    return {
+        state,
+        get,
+        set,
+        on,
+        onChange,
+        use,
+        dispose,
+        reset,
+        forceUpdate,
+    };
+};
+const removeFromArray = (array, item) => {
+    const index = array.indexOf(item);
+    if (index >= 0) {
+        array[index] = array[array.length - 1];
+        array.length--;
+    }
+};
+
+const createStore = (defaultState, shouldUpdate) => {
+    const map = createObservableMap(defaultState, shouldUpdate);
+    map.use(stencilSubscription());
+    return map;
+};
+
+export { createStore as c };

package/dist/bromcom-ui/index.esm.js

@@ -0,0 +1 @@
+

package/dist/bromcom-ui/input-template-2c402b1c.js

@@ -0,0 +1,91 @@
+import { h } from './index-dbc63c66.js';
+import { c as classnames } from './index-43956e3c.js';
+import { B as Bcm } from './bcm-ad02f9c9.js';
+
+var defaultIcons;
+(function (defaultIcons) {
+  defaultIcons["search"] = "search";
+  defaultIcons["email"] = "mail";
+  defaultIcons["tel"] = "phone";
+  defaultIcons["url"] = "link";
+})(defaultIcons || (defaultIcons = {}));
+var iconSizes;
+(function (iconSizes) {
+  iconSizes[iconSizes["small"] = 14] = "small";
+  iconSizes[iconSizes["medium"] = 16] = "medium";
+  iconSizes[iconSizes["large"] = 18] = "large";
+})(iconSizes || (iconSizes = {}));
+
+const InputTemplate = ({ elementType, 
+//textarea
+rows, 
+//props
+id, internalId, type, placeholder, value, size, 
+//,
+unit, unitPrefix, maxLength, 
+//boolean
+disabled, clearable, focused, readonly, isPasswordVisible, passwordToggle, noDefaultIcon, inValid, captionType, resize, 
+// custom functions
+changePasswordVisibility, handleClear, steps, 
+//event functions
+ref, handleBlur, handleFocus, handleInput, handleChange, componentWillRender, }) => {
+  const ElementTagType = Bcm.HtmlElementType[elementType] || Bcm.HtmlElementType.input;
+  type = (type === 'password' && isPasswordVisible) ? 'text' : type;
+  value = value || '';
+  value = !focused ? value + (value && (unit === null || unit === void 0 ? void 0 : unit.length) > 0 ? ' ' + unit : '') : value;
+  let clearableButton = false;
+  const templateHandleFocus = (e) => {
+    e.target.parentElement.classList.add('focused');
+    handleFocus(e);
+  };
+  const templateHandleBlur = (e) => {
+    e.target.parentElement.classList.remove('focused');
+    handleBlur(e);
+  };
+  const templateHandleInput = (e) => {
+    console.log(clearable);
+    console.log(e.target.value);
+    clearableButton = clearable && e.target.value.length > 0 ? true : false;
+    handleInput(e);
+    componentWillRender();
+  };
+  var containerClass = classnames('bcm-input__container', ElementTagType === Bcm.HtmlElementType.textarea && classnames('bcm-input__textarea', 'textarea-size-' + Bcm.Size[size], 'resize-' + resize, 'textarea-' + size), ElementTagType === Bcm.HtmlElementType.input && classnames('input-size-' + Bcm.Size[size]), {
+    'focused': focused,
+    'clearable': clearable,
+    disabled,
+    readonly,
+    'invalid': inValid,
+    'unit': (unit === null || unit === void 0 ? void 0 : unit.length) > 0,
+    // 'empty': value?.length < 1,
+    'error': captionType === 'error'
+  });
+  const caretContainer = classnames('caret-container', {
+    'unit': (unit === null || unit === void 0 ? void 0 : unit.length) > 0,
+    'disabled': disabled || readonly || inValid
+  });
+  const inputClass = size === 'large' ? 'size-3' : 'size-2';
+  const unitClass = classnames(inputClass, 'unit-prefix');
+  return (h("div", { class: containerClass },
+    h("span", { hidden: true },
+      h("slot", null)),
+    h("span", { class: "input-prefix" },
+      h("slot", { name: "prefix" }),
+      unitPrefix && h("span", { class: unitClass }, unitPrefix)),
+    h(ElementTagType, Object.assign({ tabindex: "1", id: id, "bcm-internal-id": internalId, class: 'bcm-input-element ' + inputClass }, ((ElementTagType === Bcm.HtmlElementType.input && { type: type })), ((ElementTagType === Bcm.HtmlElementType.textarea && { rows: rows })), { value: value, maxLength: maxLength, placeholder: placeholder, disabled: disabled, readOnly: readonly, ref: (el) => ref(el), onBlur: (e) => templateHandleBlur(e), onFocus: (e) => templateHandleFocus(e), onInput: (e) => templateHandleInput(e), onChange: (e) => handleChange(e) })),
+    (clearableButton && !disabled) &&
+      h("span", { class: "input-suffix input-suffix-button input-clear-button", onClick: (e) => handleClear(e) },
+        h("bcm-icon", { icon: "close-circle", type: "fill", size: iconSizes[size], color: "grey-7" })),
+    (type === 'password' && passwordToggle) && (h("span", { class: "input-suffix input-suffix-button", onClick: () => changePasswordVisibility() },
+      h("bcm-icon", { icon: isPasswordVisible ? "eye-invisible" : "eye", type: "outlined", size: iconSizes[size], color: "grey-7" }))),
+    (Object.keys(defaultIcons).includes(type) && !noDefaultIcon) && (h("span", { class: "input-suffix" },
+      h("bcm-icon", { icon: defaultIcons[type], type: "outlined", size: iconSizes[size], color: "grey-7" }))),
+    type === 'number' && (h("div", { class: caretContainer },
+      h("span", { class: "caret", onClick: () => steps('up') },
+        h("bcm-icon", { icon: "caret-up", type: "outlined", color: "grey-7", size: 8 })),
+      h("span", { class: "caret", onClick: () => steps('down') },
+        h("bcm-icon", { icon: "caret-down", type: "outlined", color: "grey-7", size: 8 })))),
+    type !== 'number' && (h("span", { class: "input-suffix" },
+      h("slot", { name: "suffix" })))));
+};
+
+export { InputTemplate as I };

package/dist/bromcom-ui/input-template-3fef2084.js

@@ -0,0 +1,87 @@
+import { h } from './index-dbc63c66.js';
+import { c as classnames } from './index-43956e3c.js';
+import { B as Bcm } from './bcm-ad02f9c9.js';
+
+var defaultIcons;
+(function (defaultIcons) {
+  defaultIcons["search"] = "search";
+  defaultIcons["email"] = "mail";
+  defaultIcons["tel"] = "phone";
+  defaultIcons["url"] = "link";
+})(defaultIcons || (defaultIcons = {}));
+var iconSizes;
+(function (iconSizes) {
+  iconSizes[iconSizes["small"] = 14] = "small";
+  iconSizes[iconSizes["medium"] = 16] = "medium";
+  iconSizes[iconSizes["large"] = 18] = "large";
+})(iconSizes || (iconSizes = {}));
+
+const InputTemplate = ({ elementType, 
+//textarea
+rows, 
+//props
+id, internalId, type, placeholder, value, size, 
+//,
+unit, unitPrefix, maxLength, 
+//boolean
+disabled, clearable, focused, readonly, isPasswordVisible, passwordToggle, noDefaultIcon, inValid, captionType, resize, 
+// custom functions
+changePasswordVisibility, handleClear, steps, 
+//event functions
+ref, handleBlur, handleFocus, handleInput, handleChange, }) => {
+  const ElementTagType = Bcm.HtmlElementType[elementType] || Bcm.HtmlElementType.input;
+  type = (type === 'password' && isPasswordVisible) ? 'text' : type;
+  value = value || '';
+  value = !focused ? value + (value && (unit === null || unit === void 0 ? void 0 : unit.length) > 0 ? ' ' + unit : '') : value;
+  let clearableButton = false;
+  const templateHandleFocus = (e) => {
+    e.target.parentElement.classList.add('focused');
+    handleFocus(e);
+  };
+  const templateHandleBlur = (e) => {
+    e.target.parentElement.classList.remove('focused');
+    handleBlur(e);
+  };
+  const templateHandleInput = (e) => {
+    clearableButton = clearable && e.target.value.length > 0 ? true : false;
+    handleInput(e);
+  };
+  var containerClass = classnames('bcm-input__container', ElementTagType === Bcm.HtmlElementType.textarea && classnames('bcm-input__textarea', 'textarea-size-' + Bcm.Size[size], 'resize-' + resize, 'textarea-' + size), ElementTagType === Bcm.HtmlElementType.input && classnames('input-size-' + Bcm.Size[size]), {
+    'focused': focused,
+    disabled,
+    readonly,
+    'invalid': inValid,
+    'unit': (unit === null || unit === void 0 ? void 0 : unit.length) > 0,
+    // 'empty': value?.length < 1,
+    'error': captionType === 'error'
+  });
+  const caretContainer = classnames('caret-container', {
+    'unit': (unit === null || unit === void 0 ? void 0 : unit.length) > 0,
+    'disabled': disabled || readonly || inValid
+  });
+  const inputClass = size === 'large' ? 'size-3' : 'size-2';
+  const unitClass = classnames(inputClass, 'unit-prefix');
+  return (h("div", { class: containerClass },
+    h("span", { hidden: true },
+      h("slot", null)),
+    h("span", { class: "input-prefix" },
+      h("slot", { name: "prefix" }),
+      unitPrefix && h("span", { class: unitClass }, unitPrefix)),
+    h(ElementTagType, Object.assign({ tabindex: "1", id: id, "bcm-internal-id": internalId, class: 'bcm-input-element ' + inputClass }, ((ElementTagType === Bcm.HtmlElementType.input && { type: type })), ((ElementTagType === Bcm.HtmlElementType.textarea && { rows: rows })), { value: value, maxLength: maxLength, placeholder: placeholder, disabled: disabled, readOnly: readonly, ref: (el) => ref(el), onBlur: (e) => templateHandleBlur(e), onFocus: (e) => templateHandleFocus(e), onInput: (e) => templateHandleInput(e), onChange: (e) => handleChange(e) })),
+    (clearableButton && !disabled) &&
+      h("span", { class: "input-suffix input-suffix-button input-clear-button", onClick: (e) => handleClear(e) },
+        h("bcm-icon", { icon: "close-circle", type: "fill", size: iconSizes[size], color: "grey-7" })),
+    (type === 'password' && passwordToggle) && (h("span", { class: "input-suffix input-suffix-button", onClick: () => changePasswordVisibility() },
+      h("bcm-icon", { icon: isPasswordVisible ? "eye-invisible" : "eye", type: "outlined", size: iconSizes[size], color: "grey-7" }))),
+    (Object.keys(defaultIcons).includes(type) && !noDefaultIcon) && (h("span", { class: "input-suffix" },
+      h("bcm-icon", { icon: defaultIcons[type], type: "outlined", size: iconSizes[size], color: "grey-7" }))),
+    type === 'number' && (h("div", { class: caretContainer },
+      h("span", { class: "caret", onClick: () => steps('up') },
+        h("bcm-icon", { icon: "caret-up", type: "outlined", color: "grey-7", size: 8 })),
+      h("span", { class: "caret", onClick: () => steps('down') },
+        h("bcm-icon", { icon: "caret-down", type: "outlined", color: "grey-7", size: 8 })))),
+    type !== 'number' && (h("span", { class: "input-suffix" },
+      h("slot", { name: "suffix" })))));
+};
+
+export { InputTemplate as I };

package/dist/bromcom-ui/input-template-5d0fa41c.js

@@ -0,0 +1,89 @@
+import { h } from './index-dbc63c66.js';
+import { c as classnames } from './index-43956e3c.js';
+import { B as Bcm } from './bcm-ad02f9c9.js';
+
+var defaultIcons;
+(function (defaultIcons) {
+  defaultIcons["search"] = "search";
+  defaultIcons["email"] = "mail";
+  defaultIcons["tel"] = "phone";
+  defaultIcons["url"] = "link";
+})(defaultIcons || (defaultIcons = {}));
+var iconSizes;
+(function (iconSizes) {
+  iconSizes[iconSizes["small"] = 14] = "small";
+  iconSizes[iconSizes["medium"] = 16] = "medium";
+  iconSizes[iconSizes["large"] = 18] = "large";
+})(iconSizes || (iconSizes = {}));
+
+const InputTemplate = ({ elementType, 
+//textarea
+rows, 
+//props
+id, internalId, type, placeholder, value, size, 
+//,
+unit, unitPrefix, maxLength, 
+//boolean
+disabled, clearable, focused, readonly, isPasswordVisible, passwordToggle, noDefaultIcon, inValid, captionType, resize, 
+// custom functions
+changePasswordVisibility, handleClear, steps, 
+//event functions
+ref, handleBlur, handleFocus, handleInput, handleChange, }) => {
+  const ElementTagType = Bcm.HtmlElementType[elementType] || Bcm.HtmlElementType.input;
+  type = (type === 'password' && isPasswordVisible) ? 'text' : type;
+  value = value || '';
+  value = !focused ? value + (value && (unit === null || unit === void 0 ? void 0 : unit.length) > 0 ? ' ' + unit : '') : value;
+  let clearableButton = false;
+  const templateHandleFocus = (e) => {
+    e.target.parentElement.classList.add('focused');
+    handleFocus(e);
+  };
+  const templateHandleBlur = (e) => {
+    e.target.parentElement.classList.remove('focused');
+    handleBlur(e);
+  };
+  const templateHandleInput = (e) => {
+    console.log(clearable);
+    console.log(e.target.value);
+    clearableButton = clearable && e.target.value.length > 0 ? true : false;
+    handleInput(e);
+  };
+  var containerClass = classnames('bcm-input__container', ElementTagType === Bcm.HtmlElementType.textarea && classnames('bcm-input__textarea', 'textarea-size-' + Bcm.Size[size], 'resize-' + resize, 'textarea-' + size), ElementTagType === Bcm.HtmlElementType.input && classnames('input-size-' + Bcm.Size[size]), {
+    'focused': focused,
+    disabled,
+    readonly,
+    'invalid': inValid,
+    'unit': (unit === null || unit === void 0 ? void 0 : unit.length) > 0,
+    // 'empty': value?.length < 1,
+    'error': captionType === 'error'
+  });
+  const caretContainer = classnames('caret-container', {
+    'unit': (unit === null || unit === void 0 ? void 0 : unit.length) > 0,
+    'disabled': disabled || readonly || inValid
+  });
+  const inputClass = size === 'large' ? 'size-3' : 'size-2';
+  const unitClass = classnames(inputClass, 'unit-prefix');
+  return (h("div", { class: containerClass },
+    h("span", { hidden: true },
+      h("slot", null)),
+    h("span", { class: "input-prefix" },
+      h("slot", { name: "prefix" }),
+      unitPrefix && h("span", { class: unitClass }, unitPrefix)),
+    h(ElementTagType, Object.assign({ tabindex: "1", id: id, "bcm-internal-id": internalId, class: 'bcm-input-element ' + inputClass }, ((ElementTagType === Bcm.HtmlElementType.input && { type: type })), ((ElementTagType === Bcm.HtmlElementType.textarea && { rows: rows })), { value: value, maxLength: maxLength, placeholder: placeholder, disabled: disabled, readOnly: readonly, ref: (el) => ref(el), onBlur: (e) => templateHandleBlur(e), onFocus: (e) => templateHandleFocus(e), onInput: (e) => templateHandleInput(e), onChange: (e) => handleChange(e) })),
+    (clearableButton && !disabled) &&
+      h("span", { class: "input-suffix input-suffix-button input-clear-button", onClick: (e) => handleClear(e) },
+        h("bcm-icon", { icon: "close-circle", type: "fill", size: iconSizes[size], color: "grey-7" })),
+    (type === 'password' && passwordToggle) && (h("span", { class: "input-suffix input-suffix-button", onClick: () => changePasswordVisibility() },
+      h("bcm-icon", { icon: isPasswordVisible ? "eye-invisible" : "eye", type: "outlined", size: iconSizes[size], color: "grey-7" }))),
+    (Object.keys(defaultIcons).includes(type) && !noDefaultIcon) && (h("span", { class: "input-suffix" },
+      h("bcm-icon", { icon: defaultIcons[type], type: "outlined", size: iconSizes[size], color: "grey-7" }))),
+    type === 'number' && (h("div", { class: caretContainer },
+      h("span", { class: "caret", onClick: () => steps('up') },
+        h("bcm-icon", { icon: "caret-up", type: "outlined", color: "grey-7", size: 8 })),
+      h("span", { class: "caret", onClick: () => steps('down') },
+        h("bcm-icon", { icon: "caret-down", type: "outlined", color: "grey-7", size: 8 })))),
+    type !== 'number' && (h("span", { class: "input-suffix" },
+      h("slot", { name: "suffix" })))));
+};
+
+export { InputTemplate as I };

package/dist/bromcom-ui/input-template-5d288c2e.js

@@ -0,0 +1,90 @@
+import { h } from './index-dbc63c66.js';
+import { c as classnames } from './index-43956e3c.js';
+import { B as Bcm } from './bcm-ad02f9c9.js';
+
+var defaultIcons;
+(function (defaultIcons) {
+  defaultIcons["search"] = "search";
+  defaultIcons["email"] = "mail";
+  defaultIcons["tel"] = "phone";
+  defaultIcons["url"] = "link";
+})(defaultIcons || (defaultIcons = {}));
+var iconSizes;
+(function (iconSizes) {
+  iconSizes[iconSizes["small"] = 14] = "small";
+  iconSizes[iconSizes["medium"] = 16] = "medium";
+  iconSizes[iconSizes["large"] = 18] = "large";
+})(iconSizes || (iconSizes = {}));
+
+const InputTemplate = ({ elementType, 
+//textarea
+rows, 
+//props
+id, internalId, type, placeholder, value, size, 
+//,
+unit, unitPrefix, maxLength, 
+//boolean
+disabled, clearable, focused, readonly, isPasswordVisible, passwordToggle, noDefaultIcon, inValid, captionType, resize, 
+// custom functions
+changePasswordVisibility, handleClear, steps, 
+//event functions
+ref, handleBlur, handleFocus, handleInput, handleChange }) => {
+  const ElementTagType = Bcm.HtmlElementType[elementType] || Bcm.HtmlElementType.input;
+  type = (type === 'password' && isPasswordVisible) ? 'text' : type;
+  value = value || '';
+  value = !focused ? value + (value && (unit === null || unit === void 0 ? void 0 : unit.length) > 0 ? ' ' + unit : '') : value;
+  let clearableButton = false;
+  const templateHandleFocus = (e) => {
+    e.target.parentElement.classList.add('focused');
+    handleFocus(e);
+  };
+  const templateHandleBlur = (e) => {
+    e.target.parentElement.classList.remove('focused');
+    handleBlur(e);
+  };
+  const templateHandleInput = (e) => {
+    console.log(clearable);
+    console.log(e.target.value);
+    clearableButton = clearable && e.target.value.length > 0 ? true : false;
+    handleInput(e);
+  };
+  var containerClass = classnames('bcm-input__container', ElementTagType === Bcm.HtmlElementType.textarea && classnames('bcm-input__textarea', 'textarea-size-' + Bcm.Size[size], 'resize-' + resize, 'textarea-' + size), ElementTagType === Bcm.HtmlElementType.input && classnames('input-size-' + Bcm.Size[size]), {
+    'focused': focused,
+    'clearable': clearable,
+    disabled,
+    readonly,
+    'invalid': inValid,
+    'unit': (unit === null || unit === void 0 ? void 0 : unit.length) > 0,
+    // 'empty': value?.length < 1,
+    'error': captionType === 'error'
+  });
+  const caretContainer = classnames('caret-container', {
+    'unit': (unit === null || unit === void 0 ? void 0 : unit.length) > 0,
+    'disabled': disabled || readonly || inValid
+  });
+  const inputClass = size === 'large' ? 'size-3' : 'size-2';
+  const unitClass = classnames(inputClass, 'unit-prefix');
+  return (h("div", { class: containerClass },
+    h("span", { hidden: true },
+      h("slot", null)),
+    h("span", { class: "input-prefix" },
+      h("slot", { name: "prefix" }),
+      unitPrefix && h("span", { class: unitClass }, unitPrefix)),
+    h(ElementTagType, Object.assign({ tabindex: "1", id: id, "bcm-internal-id": internalId, class: 'bcm-input-element ' + inputClass }, ((ElementTagType === Bcm.HtmlElementType.input && { type: type })), ((ElementTagType === Bcm.HtmlElementType.textarea && { rows: rows })), { value: value, maxLength: maxLength, placeholder: placeholder, disabled: disabled, readOnly: readonly, ref: (el) => ref(el), onBlur: (e) => templateHandleBlur(e), onFocus: (e) => templateHandleFocus(e), onInput: (e) => templateHandleInput(e), onChange: (e) => handleChange(e) })),
+    (clearableButton && !disabled) &&
+      h("span", { class: "input-suffix input-suffix-button input-clear-button", onClick: (e) => handleClear(e) },
+        h("bcm-icon", { icon: "close-circle", type: "fill", size: iconSizes[size], color: "grey-7" })),
+    (type === 'password' && passwordToggle) && (h("span", { class: "input-suffix input-suffix-button", onClick: () => changePasswordVisibility() },
+      h("bcm-icon", { icon: isPasswordVisible ? "eye-invisible" : "eye", type: "outlined", size: iconSizes[size], color: "grey-7" }))),
+    (Object.keys(defaultIcons).includes(type) && !noDefaultIcon) && (h("span", { class: "input-suffix" },
+      h("bcm-icon", { icon: defaultIcons[type], type: "outlined", size: iconSizes[size], color: "grey-7" }))),
+    type === 'number' && (h("div", { class: caretContainer },
+      h("span", { class: "caret", onClick: () => steps('up') },
+        h("bcm-icon", { icon: "caret-up", type: "outlined", color: "grey-7", size: 8 })),
+      h("span", { class: "caret", onClick: () => steps('down') },
+        h("bcm-icon", { icon: "caret-down", type: "outlined", color: "grey-7", size: 8 })))),
+    type !== 'number' && (h("span", { class: "input-suffix" },
+      h("slot", { name: "suffix" })))));
+};
+
+export { InputTemplate as I };

package/dist/bromcom-ui/input-template-63f2d73c.js

@@ -0,0 +1,83 @@
+import { h } from './index-dbc63c66.js';
+import { c as classnames } from './index-43956e3c.js';
+import { B as Bcm } from './bcm-ad02f9c9.js';
+
+var defaultIcons;
+(function (defaultIcons) {
+  defaultIcons["search"] = "search";
+  defaultIcons["email"] = "mail";
+  defaultIcons["tel"] = "phone";
+  defaultIcons["url"] = "link";
+})(defaultIcons || (defaultIcons = {}));
+var iconSizes;
+(function (iconSizes) {
+  iconSizes[iconSizes["small"] = 14] = "small";
+  iconSizes[iconSizes["medium"] = 16] = "medium";
+  iconSizes[iconSizes["large"] = 18] = "large";
+})(iconSizes || (iconSizes = {}));
+
+const InputTemplate = ({ elementType, 
+//textarea
+rows, 
+//props
+id, internalId, type, placeholder, value, size, 
+//,
+unit, unitPrefix, maxLength, 
+//boolean
+disabled, clearable, focused, readonly, isPasswordVisible, passwordToggle, noDefaultIcon, inValid, captionType, resize, 
+// custom functions
+changePasswordVisibility, handleClear, steps, 
+//event functions
+ref, handleBlur, handleFocus, handleInput, handleChange, }) => {
+  const ElementTagType = Bcm.HtmlElementType[elementType] || Bcm.HtmlElementType.input;
+  type = (type === 'password' && isPasswordVisible) ? 'text' : type;
+  value = value || '';
+  value = !focused ? value + (value && (unit === null || unit === void 0 ? void 0 : unit.length) > 0 ? ' ' + unit : '') : value;
+  const templateHandleFocus = (e) => {
+    e.target.parentElement.classList.add('focused');
+    handleFocus(e);
+  };
+  const templateHandleBlur = (e) => {
+    e.target.parentElement.classList.remove('focused');
+    handleBlur(e);
+  };
+  var containerClass = classnames('bcm-input__container', ElementTagType === Bcm.HtmlElementType.textarea && classnames('bcm-input__textarea', 'textarea-size-' + Bcm.Size[size], 'resize-' + resize, 'textarea-' + size), ElementTagType === Bcm.HtmlElementType.input && classnames('input-size-' + Bcm.Size[size]), {
+    'focused': focused,
+    disabled,
+    readonly,
+    'invalid': inValid,
+    'unit': (unit === null || unit === void 0 ? void 0 : unit.length) > 0,
+    // 'empty': value?.length < 1,
+    'error': captionType === 'error'
+  });
+  const caretContainer = classnames('caret-container', {
+    'unit': (unit === null || unit === void 0 ? void 0 : unit.length) > 0,
+    'disabled': disabled || readonly || inValid
+  });
+  const inputClass = size === 'large' ? 'size-3' : 'size-2';
+  const unitClass = classnames(inputClass, 'unit-prefix');
+  return (console.log('input template', value),
+    h("div", { class: containerClass },
+      h("span", { hidden: true },
+        h("slot", null)),
+      h("span", { class: "input-prefix" },
+        h("slot", { name: "prefix" }),
+        unitPrefix && h("span", { class: unitClass }, unitPrefix)),
+      h(ElementTagType, Object.assign({ tabindex: "1", id: id, "bcm-internal-id": internalId, class: 'bcm-input-element ' + inputClass }, ((ElementTagType === Bcm.HtmlElementType.input && { type: type })), ((ElementTagType === Bcm.HtmlElementType.textarea && { rows: rows })), { value: value, maxLength: maxLength, placeholder: placeholder, disabled: disabled, readOnly: readonly, ref: (el) => ref(el), onBlur: (e) => templateHandleBlur(e), onFocus: (e) => templateHandleFocus(e), onInput: (e) => handleInput(e), onChange: (e) => handleChange(e) })),
+      (clearable && !disabled) &&
+        h("span", { class: "input-suffix input-suffix-button input-clear-button", onClick: (e) => handleClear(e) },
+          h("bcm-icon", { icon: "close-circle", type: "fill", size: iconSizes[size], color: "grey-7" })),
+      (type === 'password' && passwordToggle) && (h("span", { class: "input-suffix input-suffix-button", onClick: () => changePasswordVisibility() },
+        h("bcm-icon", { icon: isPasswordVisible ? "eye-invisible" : "eye", type: "outlined", size: iconSizes[size], color: "grey-7" }))),
+      (Object.keys(defaultIcons).includes(type) && !noDefaultIcon) && (h("span", { class: "input-suffix" },
+        h("bcm-icon", { icon: defaultIcons[type], type: "outlined", size: iconSizes[size], color: "grey-7" }))),
+      type === 'number' && (h("div", { class: caretContainer },
+        h("span", { class: "caret", onClick: () => steps('up') },
+          h("bcm-icon", { icon: "caret-up", type: "outlined", color: "grey-7", size: 8 })),
+        h("span", { class: "caret", onClick: () => steps('down') },
+          h("bcm-icon", { icon: "caret-down", type: "outlined", color: "grey-7", size: 8 })))),
+      type !== 'number' && (h("span", { class: "input-suffix" },
+        h("slot", { name: "suffix" })))));
+};
+
+export { InputTemplate as I };