bromcom-ui 2.10.1-rc.1 → 2.10.1-rc.11

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

@@ -0,0 +1,108 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index$1 = require('./index-c591ecec.js');
+require('./color-helper-c3a819ea.js');
+require('./validators-463a67ba.js');
+const generate = require('./generate-8f2a5b22.js');
+require('./number-helper-57ea679e.js');
+require('./string-helper-3212f4ea.js');
+require('./element-dragger-a8562f82.js');
+const bcm = require('./bcm-3c58a6d5.js');
+const captionTemplate = require('./caption-template-6f535b93.js');
+require('./index-95ae50d0.js');
+require('./types-cc4adee7.js');
+require('./types-7523fd99.js');
+const index = require('./index-5279dea2.js');
+require('./colors-56282b00.js');
+require('./utils-fc077139.js');
+require('./colors-078851ec.js');
+require('./_commonjsHelpers-ed84c3ca.js');
+require('./package-9f43976f.js');
+
+const numberInputStyle = index.ce({
+  slots: {
+    host: "bcm-number-input bcm-ui-element tw-flex tw-flex-col tw-items-start tw-justify-start tw-max-w-[256px] tw-w-full",
+    container: "tw-flex tw-flex-row tw-items-center tw-justify-between tw-rounded tw-border tw-border-solid tw-border-slate-300 tw-w-full tw-min-h-full hover:tw-bg-slate-50",
+    inputContainer: "tw-flex tw-min-h-fit tw-w-full tw-flex-row tw-items-center tw-justify-center tw-gap-2 tw-px-3",
+    input: "tw-outline-none tw-appearance-none tw-flex-1 tw-bg-transparent tw-text-slate-400 tw-text-inherit tw-font-normal",
+    caretContainer: "tw-flex tw-flex-col tw-min-h-full tw-border-l tw-items-stretch tw-self-stretch tw-justify-center tw-border-l-slate-300 tw-select-none tw-w-[30px]",
+    caretIcon: "tw-flex tw-items-center tw-text-slate-500 tw-justify-center tw-h-full tw-cursor-pointer active:tw-bg-slate-400 last:tw-border-t last:tw-border-t-slate-300",
+    slotIcon: "tw-text-slate-500",
+  },
+  variants: {
+    size: {
+      small: {
+        host: "tw-gap-0.5 tw-text-xs",
+        slotIcon: "tw-text-[10px]",
+        inputContainer: "tw-py-[2px]",
+        caretIcon: "tw-text-[10px]",
+      },
+      medium: {
+        host: "tw-gap-1 tw-text-base",
+        slotIcon: "tw-text-xs",
+        inputContainer: "tw-py-[5px]",
+      },
+      large: {
+        host: "tw-gap-2 tw-text-base",
+        slotIcon: "tw-text-[14px]",
+        inputContainer: "tw-py-2",
+      },
+    },
+    focus: {
+      true: {
+        container: "tw-ring-1 tw-ring-blue-600",
+        input: "tw-text-slate-700",
+      },
+    },
+  },
+  defaultVariants: {
+    size: "medium",
+  },
+});
+
+const numberInputCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");\n.size-1 {\n  font-size: 12px;\n  line-height: 20px;\n}\n\n.size-2 {\n  font-size: 14px;\n  line-height: 22px;\n}\n\n.size-3 {\n  font-size: 16px;\n  line-height: 24px;\n}\n\n.size-4 {\n  font-size: 20px;\n  line-height: 28px;\n}\n\n.size-5 {\n  font-size: 24px;\n  line-height: 32px;\n}\n\n.size-6 {\n  font-size: 30px;\n  line-height: 38px;\n}\n\n.size-7 {\n  font-size: 38px;\n  line-height: 46px;\n}\n\n.size-8 {\n  font-size: 46px;\n  line-height: 54px;\n}\n\n.size-9 {\n  font-size: 56px;\n  line-height: 64px;\n}\n\n.weight-regular {\n  font-weight: 400;\n}\n\n.weight-semibold {\n  font-weight: 500;\n}\n\n/**\n * Generator\n */\n.input-size-large {\n  height: 40px;\n}\n\n.input-size-medium {\n  height: 32px;\n}\n\n.input-size-small {\n  height: 24px;\n}\n\n.resize-none textarea {\n  resize: none;\n}\n\n.resize-vertical textarea {\n  resize: vertical;\n}\n\n.resize-auto textarea {\n  height: auto;\n  resize: none;\n}\n\n.textarea-size-large {\n  padding: 4px 0 0 4px;\n  min-height: 40px;\n}\n.textarea-size-large .bcm-input-element {\n  min-height: calc((40px - 8px) + 2px);\n}\n.textarea-size-large .input-clear-button {\n  height: calc( 40px - 16px );\n  top: 8px;\n  padding: 0;\n  margin-right: 8px;\n}\n\n.textarea-size-medium {\n  padding: 4px 0 0 4px;\n  min-height: 32px;\n}\n.textarea-size-medium .bcm-input-element {\n  min-height: calc((32px - 8px) + 2px);\n}\n.textarea-size-medium .input-clear-button {\n  height: calc( 32px - 16px );\n  top: 8px;\n  padding: 0;\n  margin-right: 8px;\n}\n\n.textarea-size-small {\n  padding: 0px 0 0 4px;\n  min-height: 24px;\n}\n.textarea-size-small .bcm-input-element {\n  min-height: calc((24px - 8px) + 2px);\n}\n.textarea-size-small .input-clear-button {\n  height: calc( 24px - 16px );\n  top: 8px;\n  padding: 0;\n  margin-right: 8px;\n}\n\n@layer base {\n  .bcm-number-input input[type=number]::-webkit-outer-spin-button,\n.bcm-number-input input[type=number]::-webkit-inner-spin-button,\n.bcm-number-input input[type=number] {\n    -webkit-appearance: none;\n    padding: 0px;\n    margin: 0px;\n    outline: none;\n    border: 0px;\n    vertical-align: baseline;\n    -moz-appearance: textfield !important;\n  }\n}";
+
+const NumberInput = class {
+  constructor(hostRef) {
+    index$1.registerInstance(this, hostRef);
+    this.blockInvalidChar = e => {
+      return ["e", "E", "+", "-"].includes(e.key) && e.preventDefault();
+    };
+    this._id = generate.Generate.UID();
+    this.size = bcm.Bcm$1.Size.medium;
+    this.min = 0;
+    this.max = 100;
+    this.step = 1;
+    this.placeholder = undefined;
+    this.label = undefined;
+    this.tooltip = undefined;
+    this.value = 0;
+    this.disabled = false;
+    this.readonly = false;
+    this.required = false;
+    this.pattern = undefined;
+    this.caption = undefined;
+    this.noCaption = false;
+    this.captionType = bcm.Bcm$1.Status.default;
+    this.captionError = undefined;
+    this.customErrorMessage = undefined;
+    this.prefixIcon = undefined;
+    this.suffixIcon = undefined;
+    this.isFocus = false;
+    this.isError = false;
+  }
+  render() {
+    const { _id, value, min, max, step, tooltip, disabled, size, label, caption, captionType, required, noCaption, captionError, customErrorMessage, prefixIcon, suffixIcon, pattern } = this;
+    const { host, input, container, inputContainer, caretContainer, caretIcon, slotIcon } = numberInputStyle({ size, focus: this.isFocus });
+    return (index$1.h(index$1.Host, { class: host(), onClick: () => !disabled && this.nativeInput.focus() }, label && index$1.h("bcm-label", { tooltip: tooltip, "no-margin": true, type: captionType, value: label, required: required, htmlFor: _id }), index$1.h("div", { class: container() }, index$1.h("div", { class: inputContainer() }, prefixIcon && (index$1.h("span", { class: slotIcon() }, index$1.h("i", { class: prefixIcon }))), index$1.h("input", { type: "number", class: input(), min: min, max: max, step: step, value: value, inputmode: "numeric", pattern: pattern, ref: input => (this.nativeInput = input), onKeyPress: this.blockInvalidChar, onFocus: () => (this.isFocus = true), onBlur: () => (this.isFocus = false), onError: e => console.log(e), onErrorCapture: e => console.log(e) }), suffixIcon && (index$1.h("span", { class: slotIcon() }, index$1.h("i", { class: suffixIcon })))), index$1.h("div", { class: caretContainer() }, index$1.h("span", { class: caretIcon() }, index$1.h("i", { class: "fas fa-caret-up" })), index$1.h("span", { class: caretIcon() }, index$1.h("i", { class: "fas fa-caret-down" })))), index$1.h(captionTemplate.CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption, customErrorMessage: customErrorMessage })));
+  }
+};
+NumberInput.style = numberInputCss;
+
+exports.bcm_number_input = NumberInput;

package/dist/cjs/bcm-popconfirm-box.cjs.entry.js

@@ -9,14 +9,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-c591ecec.js');
 const index$1 = require('./index-95ae50d0.js');
 const colorHelper = require('./color-helper-c3a819ea.js');
-const generate = require('./generate-e79347af.js');
+const generate = require('./generate-8f2a5b22.js');
 const stringHelper = require('./string-helper-3212f4ea.js');
 const popoverPlacement = require('./popover-placement-9b4b4153.js');
 require('./_commonjsHelpers-ed84c3ca.js');
 require('./colors-56282b00.js');
 require('./utils-fc077139.js');
 require('./colors-078851ec.js');
-require('./package-47b7b998.js');
+require('./package-9f43976f.js');
 require('./bcm-3c58a6d5.js');
 
 const popconfirmBoxCss = "@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-popconfirm-box{position:absolute;transition:transform 0.2s ease-in-out;}.bcm-popconfirm-box .bcm-pop-box{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;font-size:10px;line-height:calc(10px + 8px);box-shadow:0 4px 12px 2px rgba(17, 24, 38, 0.1);border-radius:4px;position:absolute;box-sizing:border-box;background-color:#FFFFFF;border:1px solid #FFFFFF;z-index:-99999;overflow:hidden;visibility:hidden;width:230px;filter:drop-shadow(0px 1px 6px rgba(0, 0, 0, 0.25));padding:8px 16px}.bcm-popconfirm-box .bcm-pop-box .bcm-pop-content{display:flex;flex-direction:row;align-items:flex-start}.bcm-popconfirm-box .bcm-pop-box .bcm-pop-content-icon{margin-right:8px;min-width:16px}.bcm-popconfirm-box .bcm-pop-box .bcm-pop-content-text{display:flex;flex-direction:row;align-items:center;text-align:left;padding-top:1px}.bcm-popconfirm-box .bcm-pop-box .bcm-pop-buttons{display:flex;justify-content:flex-end;margin-top:8px}.bcm-popconfirm-box .bcm-pop-box .bcm-pop-buttons bcm-button:first-child{margin-right:8px}.bcm-popconfirm-box::after{content:\"\";position:absolute;display:none;border:6px solid;z-index:10900;pointer-events:none}.bcm-popconfirm-box.bcm-pop-open{display:block;z-index:10900}.bcm-popconfirm-box.bcm-pop-open .bcm-pop-box{z-index:10900;overflow:unset;visibility:unset}.bcm-popconfirm-box.bcm-pop-open::after{display:block}.bcm-popconfirm-box.top .bcm-pop-box{bottom:100%;margin-bottom:16px}.bcm-popconfirm-box.top::after{bottom:100%;margin-bottom:4px;border-color:#FFFFFF transparent transparent transparent}.bcm-popconfirm-box.bottom .bcm-pop-box{top:100%;margin-top:16px}.bcm-popconfirm-box.bottom::after{top:100%;margin-top:4px;border-color:transparent transparent #FFFFFF transparent}.bcm-popconfirm-box.left .bcm-pop-box{right:100%;margin-right:16px}.bcm-popconfirm-box.left::after{right:100%;margin-right:4px;border-color:transparent transparent transparent #FFFFFF}.bcm-popconfirm-box.right .bcm-pop-box{left:100%;margin-left:16px}.bcm-popconfirm-box.right::after{left:100%;margin-left:4px;border-color:transparent #FFFFFF transparent transparent}.bcm-popconfirm-box.top.center .bcm-pop-box,.bcm-popconfirm-box.bottom.center .bcm-pop-box{left:50%;transform:translateX(-50%)}.bcm-popconfirm-box.top.center::after,.bcm-popconfirm-box.bottom.center::after{left:50%;transform:translateX(-50%)}.bcm-popconfirm-box.top.start .bcm-pop-box,.bcm-popconfirm-box.bottom.start .bcm-pop-box{left:0}.bcm-popconfirm-box.top.start::after,.bcm-popconfirm-box.bottom.start::after{left:16px}.bcm-popconfirm-box.top.end .bcm-pop-box,.bcm-popconfirm-box.bottom.end .bcm-pop-box{right:0}.bcm-popconfirm-box.top.end::after,.bcm-popconfirm-box.bottom.end::after{right:16px}.bcm-popconfirm-box.left.center .bcm-pop-box,.bcm-popconfirm-box.right.center .bcm-pop-box{top:50%;transform:translateY(-50%)}.bcm-popconfirm-box.left.center::after,.bcm-popconfirm-box.right.center::after{top:50%;transform:translateY(-50%)}.bcm-popconfirm-box.left.start .bcm-pop-box,.bcm-popconfirm-box.right.start .bcm-pop-box{top:0}.bcm-popconfirm-box.left.start::after,.bcm-popconfirm-box.right.start::after{top:12px}.bcm-popconfirm-box.left.end .bcm-pop-box,.bcm-popconfirm-box.right.end .bcm-pop-box{bottom:0}.bcm-popconfirm-box.left.end::after,.bcm-popconfirm-box.right.end::after{bottom:12px}.bcm-popconfirm-box.top{transform:translateY(1px)}.bcm-popconfirm-box.bottom{transform:translateY(-1px)}.bcm-popconfirm-box.left{transform:translateX(1px)}.bcm-popconfirm-box.right{transform:translateX(-1px)}.bcm-popconfirm-box.top.bcm-pop-open,.bcm-popconfirm-box.bottom.bcm-pop-open{transform:translateY(0)}.bcm-popconfirm-box.left.bcm-pop-open,.bcm-popconfirm-box.right.bcm-pop-open{transform:translateX(0)}";

package/dist/cjs/bcm-popconfirm.cjs.entry.js

@@ -8,10 +8,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c591ecec.js');
 const index$1 = require('./index-95ae50d0.js');
-const generate = require('./generate-e79347af.js');
+const generate = require('./generate-8f2a5b22.js');
 const bcm = require('./bcm-3c58a6d5.js');
 require('./_commonjsHelpers-ed84c3ca.js');
-require('./package-47b7b998.js');
+require('./package-9f43976f.js');
 require('./colors-078851ec.js');
 
 const popconfirmCss = "@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-popconfirm{display:inline-flex}";

package/dist/cjs/bcm-popover.cjs.entry.js

@@ -8,11 +8,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c591ecec.js');
 const colorHelper = require('./color-helper-c3a819ea.js');
-require('./datetime-helper-eaf4fadb.js');
-const generate = require('./generate-e79347af.js');
-require('./number-helper-2f971fd8.js');
+require('./validators-463a67ba.js');
+const generate = require('./generate-8f2a5b22.js');
+require('./number-helper-57ea679e.js');
 const stringHelper = require('./string-helper-3212f4ea.js');
-require('./validators-507307b9.js');
 require('./element-dragger-a8562f82.js');
 const bcm = require('./bcm-3c58a6d5.js');
 const utils = require('./utils-fc077139.js');
@@ -20,7 +19,7 @@ const floatingUi = require('./floating-ui-555cd3d4.js');
 require('./colors-56282b00.js');
 require('./colors-078851ec.js');
 require('./_commonjsHelpers-ed84c3ca.js');
-require('./package-47b7b998.js');
+require('./package-9f43976f.js');
 
 class Popover {
   constructor({ content, message, targetId, placement = "top", color = "slate-700", trigger = "none", openDelay = 0, closeDelay = 0, autoHide = false, emitShow = () => { }, emitHide = () => { } }) {

package/dist/cjs/bcm-progress.cjs.entry.js

@@ -9,13 +9,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-c591ecec.js');
 const index$1 = require('./index-95ae50d0.js');
 const colorHelper = require('./color-helper-c3a819ea.js');
-const generate = require('./generate-e79347af.js');
+const generate = require('./generate-8f2a5b22.js');
 const bcm = require('./bcm-3c58a6d5.js');
 require('./_commonjsHelpers-ed84c3ca.js');
 require('./colors-56282b00.js');
 require('./utils-fc077139.js');
 require('./colors-078851ec.js');
-require('./package-47b7b998.js');
+require('./package-9f43976f.js');
 
 // export const lineSizes = {
 //   small: {

package/dist/cjs/bcm-radio-group.cjs.entry.js

@@ -8,11 +8,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c591ecec.js');
 require('./color-helper-c3a819ea.js');
-require('./datetime-helper-eaf4fadb.js');
-const generate = require('./generate-e79347af.js');
-require('./number-helper-2f971fd8.js');
+require('./validators-463a67ba.js');
+const generate = require('./generate-8f2a5b22.js');
+require('./number-helper-57ea679e.js');
 require('./string-helper-3212f4ea.js');
-require('./validators-507307b9.js');
 require('./element-dragger-a8562f82.js');
 const utils = require('./utils-fc077139.js');
 const bcm = require('./bcm-3c58a6d5.js');
@@ -24,7 +23,7 @@ const isLoadDecorator = require('./is-load-decorator-15036f37.js');
 require('./colors-56282b00.js');
 require('./colors-078851ec.js');
 require('./_commonjsHelpers-ed84c3ca.js');
-require('./package-47b7b998.js');
+require('./package-9f43976f.js');
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;

package/dist/cjs/bcm-radio.cjs.entry.js

@@ -9,18 +9,17 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-c591ecec.js');
 const bcm = require('./bcm-3c58a6d5.js');
 require('./color-helper-c3a819ea.js');
-require('./datetime-helper-eaf4fadb.js');
-const generate = require('./generate-e79347af.js');
-require('./number-helper-2f971fd8.js');
+require('./validators-463a67ba.js');
+const generate = require('./generate-8f2a5b22.js');
+require('./number-helper-57ea679e.js');
 require('./string-helper-3212f4ea.js');
-require('./validators-507307b9.js');
 require('./element-dragger-a8562f82.js');
 const index$1 = require('./index-95ae50d0.js');
 require('./colors-56282b00.js');
 require('./utils-fc077139.js');
 require('./colors-078851ec.js');
 require('./_commonjsHelpers-ed84c3ca.js');
-require('./package-47b7b998.js');
+require('./package-9f43976f.js');
 
 const BcmRadio = class {
   constructor(hostRef) {

package/dist/cjs/bcm-range.cjs.entry.js

@@ -8,11 +8,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c591ecec.js');
 const index$1 = require('./index-95ae50d0.js');
-const generate = require('./generate-e79347af.js');
+const generate = require('./generate-8f2a5b22.js');
 const bcm = require('./bcm-3c58a6d5.js');
 const utils = require('./utils-fc077139.js');
 require('./_commonjsHelpers-ed84c3ca.js');
-require('./package-47b7b998.js');
+require('./package-9f43976f.js');
 require('./colors-078851ec.js');
 
 const rangeCss = "@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-range{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;width:100%;position:relative;display:block;margin:16px 0}.bcm-range input[type=range]{position:absolute;pointer-events:none;-webkit-appearance:none;z-index:4;height:30px;width:100%;top:-17px;opacity:0}.bcm-range input[type=range].single{display:none}.bcm-range input[type=range]::-webkit-slider-thumb{pointer-events:all;width:30px;height:30px;border-radius:0;border:0 none;background-color:red;-webkit-appearance:none;cursor:pointer}.bcm-range__container-bar{width:calc(100% - 24px);left:12px;position:relative}.bcm-range__container-bar-track{position:absolute;top:-2px;width:100%;height:4px;background-color:var(--bcm-new-ds-color-slate-300);z-index:1}.bcm-range__container-bar-range{position:absolute;top:-2px;left:22.22%;right:22.22%;height:4px;background-color:var(--bcm-new-ds-color-blue-500);z-index:2}.bcm-range__container-bar-thumb{position:absolute;top:0;width:16px;height:16px;background-color:var(--bcm-new-ds-color-blue-500);border-radius:50%;z-index:3;transition:box-shadow 0.2s ease-in-out;display:flex;align-items:center;justify-content:center}.bcm-range__container-bar-thumb>span{display:flex;width:100%;height:100%}.bcm-range__container-bar-thumb.hover{box-shadow:0px 2px 2px rgba(0, 0, 0, 0.1), 0px 3px 1px rgba(0, 0, 0, 0.05), 0px 1px 5px rgba(0, 0, 0, 0.1);cursor:pointer}.bcm-range__container-bar-thumb.hidden{display:none}.bcm-range__container-bar-thumb.left{left:22.22222%;transform:translate(-8px, -8px)}.bcm-range__container-bar-thumb.right{right:0%;transform:translate(8px, -8px)}.bcm-range .ticks{position:absolute;z-index:0;top:0;left:0;width:100%;display:flex;justify-content:space-between;padding:4px 0;user-select:none}.bcm-range .tick{position:relative;display:flex;justify-content:center;width:1px;color:var(--bcm-new-ds-color-slate-300);cursor:pointer;height:8px;line-height:32px;margin-bottom:8px;z-index:-1;transition:color 0.1s ease-in-out}.bcm-range .tick::before,.bcm-range .tick::after{content:\" \";position:absolute;width:1px;height:8px;background-color:var(--bcm-new-ds-color-slate-300);z-index:-1;transition:background-color 0.1s ease-in-out}.bcm-range .tick::before{top:-16px}.bcm-range .tick::after{top:0}.bcm-range .tick.hover{color:var(--bcm-new-ds-color-slate-400)}.bcm-range .tick.hover::before,.bcm-range .tick.hover::after{background-color:var(--bcm-new-ds-color-slate-400)}.bcm-range .touch{position:absolute;width:calc(100% + 48px);left:-24px;top:-17px;opacity:0;height:45px;z-index:2;background-color:transparent;display:flex;flex-direction:row;justify-content:space-between}.bcm-range .touch-point{cursor:pointer;flex:1;border:1px solid var(--bcm-new-ds-color-slate-300);box-sizing:border-box;background-color:var(--bcm-new-ds-color-slate-300)}.bcm-range .touch-point:hover{border-color:var(--bcm-new-ds-color-blue-500);background-color:var(--bcm-new-ds-color-blue-500)}.bcm-range .touch::after,.bcm-range .touch::before{content:\"\";position:absolute;width:24px;height:100%;top:0}.bcm-range .touch::before{left:0}.bcm-range .touch::after{right:0}.bcm-range.vertical{margin:0 16px;padding:12px 0}.bcm-range.vertical .touch{width:calc(100% + 12px);left:-6px;top:-17px}.bcm-range.vertical .touch::after,.bcm-range.vertical .touch::before{width:12px}.bcm-range.vertical .bcm-range__container{transform:rotate(270deg)}.bcm-range.vertical .bcm-range__container .ticks .tick-text{position:absolute;top:0px;width:100%;transform:rotate(90deg)}";

package/dist/cjs/bcm-shortcut.cjs.entry.js

@@ -8,11 +8,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c591ecec.js');
 require('./color-helper-c3a819ea.js');
-require('./datetime-helper-eaf4fadb.js');
-const generate = require('./generate-e79347af.js');
-require('./number-helper-2f971fd8.js');
+require('./validators-463a67ba.js');
+const generate = require('./generate-8f2a5b22.js');
+require('./number-helper-57ea679e.js');
 require('./string-helper-3212f4ea.js');
-require('./validators-507307b9.js');
 require('./element-dragger-a8562f82.js');
 const bcm = require('./bcm-3c58a6d5.js');
 const index$1 = require('./index-95ae50d0.js');
@@ -20,7 +19,7 @@ require('./colors-56282b00.js');
 require('./utils-fc077139.js');
 require('./colors-078851ec.js');
 require('./_commonjsHelpers-ed84c3ca.js');
-require('./package-47b7b998.js');
+require('./package-9f43976f.js');
 
 const osKeys = {
   ctrl: "⌘",

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

@@ -8,11 +8,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index$1 = require('./index-c591ecec.js');
 require('./color-helper-c3a819ea.js');
-require('./datetime-helper-eaf4fadb.js');
-const generate = require('./generate-e79347af.js');
-require('./number-helper-2f971fd8.js');
+require('./validators-463a67ba.js');
+const generate = require('./generate-8f2a5b22.js');
+require('./number-helper-57ea679e.js');
 require('./string-helper-3212f4ea.js');
-require('./validators-507307b9.js');
 require('./element-dragger-a8562f82.js');
 require('./bcm-3c58a6d5.js');
 const index = require('./index-5279dea2.js');
@@ -20,7 +19,7 @@ require('./colors-56282b00.js');
 require('./utils-fc077139.js');
 require('./colors-078851ec.js');
 require('./_commonjsHelpers-ed84c3ca.js');
-require('./package-47b7b998.js');
+require('./package-9f43976f.js');
 
 const skeletonStyle = index.ce({
   slots: {

package/dist/cjs/bcm-step.cjs.entry.js

@@ -8,10 +8,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c591ecec.js');
 const index$1 = require('./index-95ae50d0.js');
-const generate = require('./generate-e79347af.js');
-const stepperStates = require('./stepper-states-a5699b31.js');
+const generate = require('./generate-8f2a5b22.js');
+const stepperStates = require('./stepper-states-1199c518.js');
 require('./_commonjsHelpers-ed84c3ca.js');
-require('./package-47b7b998.js');
+require('./package-9f43976f.js');
 require('./colors-078851ec.js');
 require('./index-d321de96.js');
 

package/dist/cjs/bcm-stepper.cjs.entry.js

@@ -8,22 +8,21 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index$1 = require('./index-c591ecec.js');
 require('./color-helper-c3a819ea.js');
-require('./datetime-helper-eaf4fadb.js');
-const generate = require('./generate-e79347af.js');
-require('./number-helper-2f971fd8.js');
+require('./validators-463a67ba.js');
+const generate = require('./generate-8f2a5b22.js');
+require('./number-helper-57ea679e.js');
 require('./string-helper-3212f4ea.js');
-require('./validators-507307b9.js');
 require('./element-dragger-a8562f82.js');
 const utils = require('./utils-fc077139.js');
 const bcm = require('./bcm-3c58a6d5.js');
 const index = require('./index-95ae50d0.js');
 require('./types-cc4adee7.js');
 require('./types-7523fd99.js');
-const stepperStates = require('./stepper-states-a5699b31.js');
+const stepperStates = require('./stepper-states-1199c518.js');
 require('./colors-56282b00.js');
 require('./colors-078851ec.js');
 require('./_commonjsHelpers-ed84c3ca.js');
-require('./package-47b7b998.js');
+require('./package-9f43976f.js');
 require('./index-d321de96.js');
 
 const StepperHeaderTemplate = ({ _title, description, status, valid, index: index$2, loading, active, stepChange, statusIcon, icon, disabled, headerHidden, }) => {

package/dist/cjs/bcm-tab-group.cjs.entry.js

@@ -8,18 +8,17 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c591ecec.js');
 require('./color-helper-c3a819ea.js');
-require('./datetime-helper-eaf4fadb.js');
-const generate = require('./generate-e79347af.js');
-require('./number-helper-2f971fd8.js');
+require('./validators-463a67ba.js');
+const generate = require('./generate-8f2a5b22.js');
+require('./number-helper-57ea679e.js');
 require('./string-helper-3212f4ea.js');
-require('./validators-507307b9.js');
 require('./element-dragger-a8562f82.js');
 const utils = require('./utils-fc077139.js');
 const bcm = require('./bcm-3c58a6d5.js');
 require('./colors-56282b00.js');
 require('./colors-078851ec.js');
 require('./_commonjsHelpers-ed84c3ca.js');
-require('./package-47b7b998.js');
+require('./package-9f43976f.js');
 
 const BcmTabGroup = class {
   constructor(hostRef) {

package/dist/cjs/bcm-tab-item-header.cjs.entry.js

@@ -8,11 +8,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c591ecec.js');
 require('./color-helper-c3a819ea.js');
-require('./datetime-helper-eaf4fadb.js');
-const generate = require('./generate-e79347af.js');
-require('./number-helper-2f971fd8.js');
+require('./validators-463a67ba.js');
+const generate = require('./generate-8f2a5b22.js');
+require('./number-helper-57ea679e.js');
 require('./string-helper-3212f4ea.js');
-require('./validators-507307b9.js');
 require('./element-dragger-a8562f82.js');
 const bcm = require('./bcm-3c58a6d5.js');
 const index$1 = require('./index-95ae50d0.js');
@@ -20,7 +19,7 @@ require('./colors-56282b00.js');
 require('./utils-fc077139.js');
 require('./colors-078851ec.js');
 require('./_commonjsHelpers-ed84c3ca.js');
-require('./package-47b7b998.js');
+require('./package-9f43976f.js');
 
 const BcmTabItemHeader = class {
   constructor(hostRef) {

package/dist/cjs/bcm-tab-item.cjs.entry.js

@@ -8,18 +8,17 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c591ecec.js');
 require('./color-helper-c3a819ea.js');
-require('./datetime-helper-eaf4fadb.js');
-const generate = require('./generate-e79347af.js');
-require('./number-helper-2f971fd8.js');
+require('./validators-463a67ba.js');
+const generate = require('./generate-8f2a5b22.js');
+require('./number-helper-57ea679e.js');
 require('./string-helper-3212f4ea.js');
-require('./validators-507307b9.js');
 require('./element-dragger-a8562f82.js');
 require('./bcm-3c58a6d5.js');
 require('./colors-56282b00.js');
 require('./utils-fc077139.js');
 require('./colors-078851ec.js');
 require('./_commonjsHelpers-ed84c3ca.js');
-require('./package-47b7b998.js');
+require('./package-9f43976f.js');
 
 const BcmTabItem = class {
   constructor(hostRef) {

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

@@ -9,11 +9,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-c591ecec.js');
 const watermark = require('./watermark-2c23c8f1.js');
 require('./color-helper-c3a819ea.js');
-require('./datetime-helper-eaf4fadb.js');
-const generate = require('./generate-e79347af.js');
-require('./number-helper-2f971fd8.js');
+require('./validators-463a67ba.js');
+const generate = require('./generate-8f2a5b22.js');
+require('./number-helper-57ea679e.js');
 const stringHelper = require('./string-helper-3212f4ea.js');
-require('./validators-507307b9.js');
 require('./element-dragger-a8562f82.js');
 require('./bcm-3c58a6d5.js');
 const index$1 = require('./index-95ae50d0.js');
@@ -23,7 +22,7 @@ require('./colors-56282b00.js');
 require('./utils-fc077139.js');
 require('./colors-078851ec.js');
 require('./_commonjsHelpers-ed84c3ca.js');
-require('./package-47b7b998.js');
+require('./package-9f43976f.js');
 
 // DO NOT UPDATE MANUALLY: Generated from script during build time
 var VERSION$4 = '29.0.0';

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

@@ -7,14 +7,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index$1 = require('./index-c591ecec.js');
-const generate = require('./generate-e79347af.js');
+const generate = require('./generate-8f2a5b22.js');
 const bcm = require('./bcm-3c58a6d5.js');
 const index = require('./index-95ae50d0.js');
-const numberHelper = require('./number-helper-2f971fd8.js');
+const numberHelper = require('./number-helper-57ea679e.js');
 const utils = require('./utils-fc077139.js');
 const colors = require('./colors-56282b00.js');
 const types = require('./types-7523fd99.js');
-require('./package-47b7b998.js');
+require('./package-9f43976f.js');
 require('./colors-078851ec.js');
 require('./_commonjsHelpers-ed84c3ca.js');
 

package/dist/cjs/bcm-textarea.cjs.entry.js

@@ -9,13 +9,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-c591ecec.js');
 const index$1 = require('./index-95ae50d0.js');
 const isLoadDecorator = require('./is-load-decorator-15036f37.js');
-const generate = require('./generate-e79347af.js');
+const generate = require('./generate-8f2a5b22.js');
 const bcm = require('./bcm-3c58a6d5.js');
 const captionTemplate = require('./caption-template-6f535b93.js');
-const inputTemplate = require('./input-template-3d21aacb.js');
+const inputTemplate = require('./input-template-866a71d3.js');
 const utils = require('./utils-fc077139.js');
 require('./_commonjsHelpers-ed84c3ca.js');
-require('./package-47b7b998.js');
+require('./package-9f43976f.js');
 require('./colors-078851ec.js');
 require('./types-cc4adee7.js');
 

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

@@ -9,11 +9,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-c591ecec.js');
 const index$1 = require('./index-95ae50d0.js');
 const isLoadDecorator = require('./is-load-decorator-15036f37.js');
-const generate = require('./generate-e79347af.js');
+const generate = require('./generate-8f2a5b22.js');
 const bcm = require('./bcm-3c58a6d5.js');
 const utils = require('./utils-fc077139.js');
 require('./_commonjsHelpers-ed84c3ca.js');
-require('./package-47b7b998.js');
+require('./package-9f43976f.js');
 require('./colors-078851ec.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/cjs/bcm-toast.cjs.entry.js

@@ -8,12 +8,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c591ecec.js');
 const index$1 = require('./index-95ae50d0.js');
-const generate = require('./generate-e79347af.js');
+const generate = require('./generate-8f2a5b22.js');
 const stringHelper = require('./string-helper-3212f4ea.js');
 const bcm = require('./bcm-3c58a6d5.js');
 const utils = require('./utils-fc077139.js');
 require('./_commonjsHelpers-ed84c3ca.js');
-require('./package-47b7b998.js');
+require('./package-9f43976f.js');
 require('./colors-078851ec.js');
 
 const BcmToast = class {

package/dist/cjs/bcm-typography.cjs.entry.js

@@ -0,0 +1,21 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-c591ecec.js');
+
+const BcmTypography = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h(index.Host, { class: "bcm-ui-element bcm-ui-content-display" }, index.h("slot", null)));
+  }
+  get el() { return index.getElement(this); }
+};
+
+exports.bcm_typography = BcmTypography;