bromcom-ui 2.10.1-rc.2 → 2.10.1-rc.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/bromcom-ui/bromcom-ui.css +1 -1
- package/dist/bromcom-ui/bromcom-ui.esm.js +1 -1
- package/dist/bromcom-ui/p-000670b6.js +5 -0
- package/dist/bromcom-ui/{p-7149c15e.entry.js → p-0c54af0a.entry.js} +1 -1
- package/dist/bromcom-ui/{p-b77e861c.entry.js → p-10661efa.entry.js} +1 -1
- package/dist/bromcom-ui/{p-893ecfd7.entry.js → p-135056db.entry.js} +1 -1
- package/dist/bromcom-ui/{p-7814999e.entry.js → p-1772657f.entry.js} +1 -1
- package/dist/bromcom-ui/{p-bc26bfcc.entry.js → p-182eccc7.entry.js} +1 -1
- package/dist/bromcom-ui/{p-9f67eec6.entry.js → p-1bd9d245.entry.js} +1 -1
- package/dist/bromcom-ui/{p-69eb7be7.entry.js → p-1d14255e.entry.js} +1 -1
- package/dist/bromcom-ui/{p-fcfc1a26.entry.js → p-2dd5f6ad.entry.js} +1 -1
- package/dist/bromcom-ui/{p-8c1834d9.entry.js → p-2dda9287.entry.js} +1 -1
- package/dist/bromcom-ui/{p-82caef35.entry.js → p-30618ac6.entry.js} +1 -1
- package/dist/bromcom-ui/{p-f4af4e66.entry.js → p-359d9ed7.entry.js} +1 -1
- package/dist/bromcom-ui/p-3b705d79.entry.js +5 -0
- package/dist/bromcom-ui/{p-f3133898.entry.js → p-412a472d.entry.js} +1 -1
- package/dist/bromcom-ui/{p-9c31bd27.js → p-4246ca4f.js} +1 -1
- package/dist/bromcom-ui/{p-95e3e645.entry.js → p-4d0046a0.entry.js} +1 -1
- package/dist/bromcom-ui/{p-313f3908.entry.js → p-56212e24.entry.js} +1 -1
- package/dist/bromcom-ui/{p-5b5f9b00.entry.js → p-5b05c344.entry.js} +1 -1
- package/dist/bromcom-ui/{p-c8b1c1c6.entry.js → p-5f74a6c9.entry.js} +1 -1
- package/dist/bromcom-ui/{p-d9ecc3d8.entry.js → p-5ff2ae19.entry.js} +1 -1
- package/dist/bromcom-ui/{p-027e818d.entry.js → p-60e4f239.entry.js} +1 -1
- package/dist/bromcom-ui/{p-bda74b16.entry.js → p-63963eca.entry.js} +1 -1
- package/dist/bromcom-ui/{p-b193eb3a.entry.js → p-686e614c.entry.js} +1 -1
- package/dist/bromcom-ui/{p-f84d2e42.entry.js → p-7471cbf5.entry.js} +1 -1
- package/dist/bromcom-ui/{p-cae90479.entry.js → p-76556edf.entry.js} +1 -1
- package/dist/bromcom-ui/{p-4e5006b1.entry.js → p-78d95876.entry.js} +1 -1
- package/dist/bromcom-ui/{p-9b9f36d5.entry.js → p-7908ee85.entry.js} +1 -1
- package/dist/bromcom-ui/{p-57c9904b.entry.js → p-7c6238b7.entry.js} +1 -1
- package/dist/bromcom-ui/p-7f7b3465.entry.js +7 -0
- package/dist/bromcom-ui/{p-1064895e.js → p-823a5d13.js} +1 -1
- package/dist/bromcom-ui/{p-3ec44b04.entry.js → p-89513231.entry.js} +1 -1
- package/dist/bromcom-ui/{p-dc6e9205.entry.js → p-8b383614.entry.js} +1 -1
- package/dist/bromcom-ui/{p-06071e98.entry.js → p-8fa7df49.entry.js} +1 -1
- package/dist/bromcom-ui/{p-f7dbd393.entry.js → p-96c18c4e.entry.js} +1 -1
- package/dist/bromcom-ui/{p-f909d419.entry.js → p-994bc0b5.entry.js} +1 -1
- package/dist/bromcom-ui/{p-b2687899.entry.js → p-99a9bebb.entry.js} +1 -1
- package/dist/bromcom-ui/p-9b7af3c4.js +5 -0
- package/dist/bromcom-ui/p-9c6676f2.entry.js +5 -0
- package/dist/bromcom-ui/{p-43a281a4.js → p-9d7ec4f0.js} +1 -1
- package/dist/bromcom-ui/{p-b27218ea.entry.js → p-9f6fd146.entry.js} +1 -1
- package/dist/bromcom-ui/p-a18f6d11.js +5 -0
- package/dist/bromcom-ui/{p-21d98283.entry.js → p-a2583501.entry.js} +1 -1
- package/dist/bromcom-ui/{p-7f1681e2.entry.js → p-aa2f32bb.entry.js} +1 -1
- package/dist/bromcom-ui/p-abc44b58.entry.js +5 -0
- package/dist/bromcom-ui/{p-8cbae172.entry.js → p-acf307e1.entry.js} +1 -1
- package/dist/bromcom-ui/{p-be778e45.entry.js → p-ad8af495.entry.js} +1 -1
- package/dist/bromcom-ui/{p-4b8f90ef.js → p-b1f4ebad.js} +1 -1
- package/dist/bromcom-ui/{p-752057b7.entry.js → p-b36fe678.entry.js} +1 -1
- package/dist/bromcom-ui/{p-2ee20f32.entry.js → p-b5c650c6.entry.js} +1 -1
- package/dist/bromcom-ui/{p-2565ccce.js → p-b82041d3.js} +1 -1
- package/dist/bromcom-ui/{p-d498d79b.entry.js → p-c761e694.entry.js} +1 -1
- package/dist/bromcom-ui/{p-d685ffff.entry.js → p-ca106284.entry.js} +1 -1
- package/dist/bromcom-ui/p-cb66612c.entry.js +5 -0
- package/dist/bromcom-ui/{p-33f3295e.entry.js → p-ced26b93.entry.js} +1 -1
- package/dist/bromcom-ui/{p-d2f9f353.entry.js → p-d0fba40e.entry.js} +1 -1
- package/dist/bromcom-ui/{p-d9331f0f.entry.js → p-d4b23073.entry.js} +1 -1
- package/dist/bromcom-ui/{p-55547a6e.entry.js → p-d4fb5ac0.entry.js} +1 -1
- package/dist/bromcom-ui/{p-56ec6518.entry.js → p-d9bbea7b.entry.js} +1 -1
- package/dist/bromcom-ui/{p-ceafe408.entry.js → p-dad263b2.entry.js} +1 -1
- package/dist/bromcom-ui/{p-84089734.entry.js → p-ea888f01.entry.js} +1 -1
- package/dist/bromcom-ui/{p-e02e88fb.js → p-f0c03fb4.js} +1 -1
- package/dist/bromcom-ui/{p-cd567621.entry.js → p-f56a74bd.entry.js} +1 -1
- package/dist/bromcom-ui/{p-8846b944.entry.js → p-f667ee85.entry.js} +1 -1
- package/dist/bromcom-ui/{p-5da0f9ef.entry.js → p-fda7b812.entry.js} +1 -1
- package/dist/bromcom-ui/{p-fc1942c6.js → p-fe953a0b.js} +1 -1
- package/dist/cjs/bcm-accordion.cjs.entry.js +2 -2
- package/dist/cjs/bcm-alert.cjs.entry.js +2 -2
- package/dist/cjs/bcm-attendance.cjs.entry.js +2 -2
- package/dist/cjs/bcm-avatar_2.cjs.entry.js +4 -4
- package/dist/cjs/bcm-breadcrumb.cjs.entry.js +2 -2
- package/dist/cjs/bcm-button-group.cjs.entry.js +2 -2
- package/dist/cjs/{bcm-button_11.cjs.entry.js → bcm-button_12.cjs.entry.js} +172 -12
- package/dist/cjs/bcm-caption.cjs.entry.js +4 -4
- package/dist/cjs/bcm-card.cjs.entry.js +2 -2
- package/dist/cjs/bcm-checkbox-group.cjs.entry.js +3 -3
- package/dist/cjs/bcm-checkbox-lite_9.cjs.entry.js +2 -2
- package/dist/cjs/bcm-chip-group.cjs.entry.js +5 -5
- package/dist/cjs/bcm-chip.cjs.entry.js +2 -2
- package/dist/cjs/bcm-collapse.cjs.entry.js +2 -2
- package/dist/cjs/bcm-color-input.cjs.entry.js +4 -4
- package/dist/cjs/bcm-date-picker.cjs.entry.js +2 -2
- package/dist/cjs/bcm-datetime-picker.cjs.entry.js +3 -3
- package/dist/cjs/bcm-default.cjs.entry.js +2 -2
- package/dist/cjs/bcm-drawer.cjs.entry.js +4 -4
- package/dist/cjs/bcm-dropdown.cjs.entry.js +3 -3
- package/dist/cjs/bcm-expansion-panel.cjs.entry.js +2 -2
- package/dist/cjs/bcm-form-2.cjs.entry.js +2 -2
- package/dist/cjs/bcm-input-custom.cjs.entry.js +2 -2
- package/dist/cjs/bcm-input-dropdown.cjs.entry.js +4 -4
- package/dist/cjs/bcm-item.cjs.entry.js +2 -2
- package/dist/cjs/bcm-items.cjs.entry.js +2 -2
- package/dist/cjs/bcm-list_3.cjs.entry.js +7 -7
- package/dist/cjs/bcm-menu.cjs.entry.js +5 -5
- package/dist/cjs/bcm-modal-2-footer.cjs.entry.js +4 -4
- package/dist/cjs/bcm-modal-2-header.cjs.entry.js +4 -4
- package/dist/cjs/bcm-modal-2.cjs.entry.js +4 -4
- package/dist/cjs/bcm-modal.cjs.entry.js +2 -2
- package/dist/cjs/bcm-number-input.cjs.entry.js +109 -0
- package/dist/cjs/bcm-popconfirm-box.cjs.entry.js +2 -2
- package/dist/cjs/bcm-popconfirm.cjs.entry.js +2 -2
- package/dist/cjs/bcm-popover.cjs.entry.js +4 -4
- package/dist/cjs/bcm-progress.cjs.entry.js +2 -2
- package/dist/cjs/bcm-radio-group.cjs.entry.js +4 -4
- package/dist/cjs/bcm-radio.cjs.entry.js +4 -4
- package/dist/cjs/bcm-range.cjs.entry.js +2 -2
- package/dist/cjs/bcm-shortcut.cjs.entry.js +4 -4
- package/dist/cjs/bcm-skeleton.cjs.entry.js +4 -4
- package/dist/cjs/bcm-step.cjs.entry.js +3 -3
- package/dist/cjs/bcm-stepper.cjs.entry.js +5 -5
- package/dist/cjs/bcm-tab-group.cjs.entry.js +4 -4
- package/dist/cjs/bcm-tab-item-header.cjs.entry.js +4 -4
- package/dist/cjs/bcm-tab-item.cjs.entry.js +4 -4
- package/dist/cjs/bcm-table.cjs.entry.js +4 -4
- package/dist/cjs/bcm-tag.cjs.entry.js +3 -3
- package/dist/cjs/bcm-textarea.cjs.entry.js +3 -3
- package/dist/cjs/bcm-time-picker.cjs.entry.js +2 -2
- package/dist/cjs/bcm-toast.cjs.entry.js +2 -2
- package/dist/cjs/bcm-typography.cjs.entry.js +21 -0
- package/dist/cjs/bromcom-ui.cjs.js +3 -3
- package/dist/cjs/{generate-f0d6805e.js → generate-eb7fd62b.js} +1 -1
- package/dist/cjs/{global-c61c9656.js → global-1210b4ea.js} +1 -1
- package/dist/cjs/{input-template-38924cda.js → input-template-69fc22ac.js} +1 -1
- package/dist/cjs/{json-parse-decarator-a2024131.js → json-parse-decarator-2d4f7d88.js} +1 -1
- package/dist/cjs/{label-template-8dc10d0a.js → label-template-a6f51ef2.js} +6 -3
- package/dist/cjs/loader.cjs.js +3 -3
- package/dist/cjs/{number-helper-7c3fefa2.js → number-helper-952bd974.js} +1 -1
- package/dist/cjs/old-bcm-popover-box.cjs.entry.js +3 -3
- package/dist/cjs/old-bcm-popover.cjs.entry.js +2 -2
- package/dist/cjs/{package-a737bf36.js → package-c0fd1b3c.js} +1 -1
- package/dist/cjs/{stepper-states-3b876d4d.js → stepper-states-79ced0f7.js} +1 -1
- package/dist/cjs/{tooltip-helper-f98dd7a7.js → tooltip-helper-20502cd7.js} +3 -3
- package/dist/cjs/{validators-f2869ecb.js → validators-18074a6e.js} +1 -1
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/atoms/label/label.js +1 -1
- package/dist/collection/components/molecules/number-input/number-input.css +137 -0
- package/dist/collection/components/molecules/number-input/number-input.js +425 -0
- package/dist/collection/components/molecules/number-input/number-input.style.js +45 -0
- package/dist/collection/components/molecules/switch/switch.css +1 -0
- package/dist/collection/components/organism/list/list.css +2 -0
- package/dist/collection/templates/label-template.js +6 -6
- package/dist/components/bcm-number-input.d.ts +11 -0
- package/dist/components/bcm-number-input.js +157 -0
- package/dist/components/bcm-switch.js +1 -1
- package/dist/components/generate.js +1 -1
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.js +1 -0
- package/dist/components/label.js +7 -4
- package/dist/components/list.js +1 -1
- package/dist/esm/bcm-accordion.entry.js +2 -2
- package/dist/esm/bcm-alert.entry.js +2 -2
- package/dist/esm/bcm-attendance.entry.js +2 -2
- package/dist/esm/bcm-avatar_2.entry.js +4 -4
- package/dist/esm/bcm-breadcrumb.entry.js +2 -2
- package/dist/esm/bcm-button-group.entry.js +2 -2
- package/dist/esm/{bcm-button_11.entry.js → bcm-button_12.entry.js} +172 -13
- package/dist/esm/bcm-caption.entry.js +4 -4
- package/dist/esm/bcm-card.entry.js +2 -2
- package/dist/esm/bcm-checkbox-group.entry.js +3 -3
- package/dist/esm/bcm-checkbox-lite_9.entry.js +2 -2
- package/dist/esm/bcm-chip-group.entry.js +5 -5
- package/dist/esm/bcm-chip.entry.js +2 -2
- package/dist/esm/bcm-collapse.entry.js +2 -2
- package/dist/esm/bcm-color-input.entry.js +4 -4
- package/dist/esm/bcm-date-picker.entry.js +2 -2
- package/dist/esm/bcm-datetime-picker.entry.js +3 -3
- package/dist/esm/bcm-default.entry.js +2 -2
- package/dist/esm/bcm-drawer.entry.js +4 -4
- package/dist/esm/bcm-dropdown.entry.js +3 -3
- package/dist/esm/bcm-expansion-panel.entry.js +2 -2
- package/dist/esm/bcm-form-2.entry.js +2 -2
- package/dist/esm/bcm-input-custom.entry.js +2 -2
- package/dist/esm/bcm-input-dropdown.entry.js +4 -4
- package/dist/esm/bcm-item.entry.js +2 -2
- package/dist/esm/bcm-items.entry.js +2 -2
- package/dist/esm/bcm-list_3.entry.js +7 -7
- package/dist/esm/bcm-menu.entry.js +5 -5
- package/dist/esm/bcm-modal-2-footer.entry.js +4 -4
- package/dist/esm/bcm-modal-2-header.entry.js +4 -4
- package/dist/esm/bcm-modal-2.entry.js +4 -4
- package/dist/esm/bcm-modal.entry.js +2 -2
- package/dist/esm/bcm-number-input.entry.js +105 -0
- package/dist/esm/bcm-popconfirm-box.entry.js +2 -2
- package/dist/esm/bcm-popconfirm.entry.js +2 -2
- package/dist/esm/bcm-popover.entry.js +4 -4
- package/dist/esm/bcm-progress.entry.js +2 -2
- package/dist/esm/bcm-radio-group.entry.js +4 -4
- package/dist/esm/bcm-radio.entry.js +4 -4
- package/dist/esm/bcm-range.entry.js +2 -2
- package/dist/esm/bcm-shortcut.entry.js +4 -4
- package/dist/esm/bcm-skeleton.entry.js +4 -4
- package/dist/esm/bcm-step.entry.js +3 -3
- package/dist/esm/bcm-stepper.entry.js +5 -5
- package/dist/esm/bcm-tab-group.entry.js +4 -4
- package/dist/esm/bcm-tab-item-header.entry.js +4 -4
- package/dist/esm/bcm-tab-item.entry.js +4 -4
- package/dist/esm/bcm-table.entry.js +4 -4
- package/dist/esm/bcm-tag.entry.js +3 -3
- package/dist/esm/bcm-textarea.entry.js +3 -3
- package/dist/esm/bcm-time-picker.entry.js +2 -2
- package/dist/esm/bcm-toast.entry.js +2 -2
- package/dist/esm/bcm-typography.entry.js +17 -0
- package/dist/esm/bromcom-ui.js +3 -3
- package/dist/esm/{generate-fff9c034.js → generate-aae94409.js} +1 -1
- package/dist/esm/{global-446a0022.js → global-8975e389.js} +1 -1
- package/dist/esm/{input-template-ff26f463.js → input-template-6b597dcd.js} +1 -1
- package/dist/esm/{json-parse-decarator-3e533274.js → json-parse-decarator-84d6e52c.js} +1 -1
- package/dist/esm/{label-template-989d1700.js → label-template-ad2e8119.js} +6 -3
- package/dist/esm/loader.js +3 -3
- package/dist/esm/{number-helper-c1ee913b.js → number-helper-8dade9f3.js} +1 -1
- package/dist/esm/old-bcm-popover-box.entry.js +3 -3
- package/dist/esm/old-bcm-popover.entry.js +2 -2
- package/dist/esm/{package-7d8bb462.js → package-d5af5a81.js} +1 -1
- package/dist/esm/{stepper-states-500cb902.js → stepper-states-6923dc97.js} +1 -1
- package/dist/esm/{tooltip-helper-c22623e4.js → tooltip-helper-e0f7ed97.js} +3 -3
- package/dist/esm/{validators-93758ad4.js → validators-1e7b9d1d.js} +1 -1
- package/dist/types/components/molecules/number-input/number-input.d.ts +29 -0
- package/dist/types/components/molecules/number-input/number-input.style.d.ts +200 -0
- package/dist/types/components.d.ts +53 -0
- package/dist/types/templates/label-template.d.ts +2 -1
- package/package.json +1 -1
- package/dist/bromcom-ui/p-0208acef.entry.js +0 -7
- package/dist/bromcom-ui/p-0e2cff0d.js +0 -5
- package/dist/bromcom-ui/p-84307b0c.entry.js +0 -5
- package/dist/bromcom-ui/p-8b202d9e.js +0 -5
- package/dist/bromcom-ui/p-c35c11a7.js +0 -5
- package/dist/bromcom-ui/p-d2fe5024.entry.js +0 -5
- package/dist/bromcom-ui/p-f9739222.entry.js +0 -5
- package/dist/cjs/bcm-checkbox_2.cjs.entry.js +0 -194
- package/dist/esm/bcm-checkbox_2.entry.js +0 -189
|
@@ -0,0 +1,425 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* Built with Stencil
|
|
3
|
+
* Copyright (c) Bromcom.
|
|
4
|
+
*/
|
|
5
|
+
import { Generate } from "@bcm/helpers";
|
|
6
|
+
import { Host, h } from "@stencil/core";
|
|
7
|
+
import { Bcm } from "@bcm/model";
|
|
8
|
+
import { CaptionTemplate } from "@bcm/template";
|
|
9
|
+
import { numberInputStyle } from "./number-input.style";
|
|
10
|
+
export class NumberInput {
|
|
11
|
+
constructor() {
|
|
12
|
+
this.blockInvalidChar = e => {
|
|
13
|
+
return ["e", "E", "+", "-"].includes(e.key) && e.preventDefault();
|
|
14
|
+
};
|
|
15
|
+
this._id = Generate.UID();
|
|
16
|
+
this.size = Bcm.Size.medium;
|
|
17
|
+
this.min = 0;
|
|
18
|
+
this.max = 100;
|
|
19
|
+
this.step = 1;
|
|
20
|
+
this.placeholder = undefined;
|
|
21
|
+
this.label = undefined;
|
|
22
|
+
this.tooltip = undefined;
|
|
23
|
+
this.value = 0;
|
|
24
|
+
this.disabled = false;
|
|
25
|
+
this.readonly = false;
|
|
26
|
+
this.required = false;
|
|
27
|
+
this.pattern = undefined;
|
|
28
|
+
this.caption = undefined;
|
|
29
|
+
this.noCaption = false;
|
|
30
|
+
this.captionType = Bcm.Status.default;
|
|
31
|
+
this.captionError = undefined;
|
|
32
|
+
this.customErrorMessage = undefined;
|
|
33
|
+
this.prefixIcon = undefined;
|
|
34
|
+
this.suffixIcon = undefined;
|
|
35
|
+
this.isFocus = false;
|
|
36
|
+
this.isError = false;
|
|
37
|
+
}
|
|
38
|
+
render() {
|
|
39
|
+
const { _id, value, min, max, step, tooltip, disabled, size, label, caption, captionType, required, noCaption, captionError, customErrorMessage, prefixIcon, suffixIcon, pattern } = this;
|
|
40
|
+
const { host, input, container, inputContainer, caretContainer, caretIcon, slotIcon } = numberInputStyle({ size, focus: this.isFocus });
|
|
41
|
+
return (h(Host, { class: host(), onClick: () => !disabled && this.nativeInput.focus() }, label && h("bcm-label", { tooltip: tooltip, "no-margin": true, type: captionType, value: label, required: required, htmlFor: _id }), h("div", { class: container() }, h("div", { class: inputContainer() }, prefixIcon && (h("span", { class: slotIcon() }, h("i", { class: prefixIcon }))), 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 && (h("span", { class: slotIcon() }, h("i", { class: suffixIcon })))), h("div", { class: caretContainer() }, h("span", { class: caretIcon() }, h("i", { class: "fas fa-caret-up" })), h("span", { class: caretIcon() }, h("i", { class: "fas fa-caret-down" })))), h(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption, customErrorMessage: customErrorMessage })));
|
|
42
|
+
}
|
|
43
|
+
static get is() { return "bcm-number-input"; }
|
|
44
|
+
static get originalStyleUrls() {
|
|
45
|
+
return {
|
|
46
|
+
"$": ["number-input.scss"]
|
|
47
|
+
};
|
|
48
|
+
}
|
|
49
|
+
static get styleUrls() {
|
|
50
|
+
return {
|
|
51
|
+
"$": ["number-input.css"]
|
|
52
|
+
};
|
|
53
|
+
}
|
|
54
|
+
static get properties() {
|
|
55
|
+
return {
|
|
56
|
+
"_id": {
|
|
57
|
+
"type": "string",
|
|
58
|
+
"mutable": false,
|
|
59
|
+
"complexType": {
|
|
60
|
+
"original": "string",
|
|
61
|
+
"resolved": "string",
|
|
62
|
+
"references": {}
|
|
63
|
+
},
|
|
64
|
+
"required": false,
|
|
65
|
+
"optional": false,
|
|
66
|
+
"docs": {
|
|
67
|
+
"tags": [],
|
|
68
|
+
"text": ""
|
|
69
|
+
},
|
|
70
|
+
"attribute": "id",
|
|
71
|
+
"reflect": true,
|
|
72
|
+
"defaultValue": "Generate.UID()"
|
|
73
|
+
},
|
|
74
|
+
"size": {
|
|
75
|
+
"type": "string",
|
|
76
|
+
"mutable": false,
|
|
77
|
+
"complexType": {
|
|
78
|
+
"original": "SizeTypes",
|
|
79
|
+
"resolved": "\"large\" | \"medium\" | \"small\"",
|
|
80
|
+
"references": {
|
|
81
|
+
"SizeTypes": {
|
|
82
|
+
"location": "import",
|
|
83
|
+
"path": "@bcm/model"
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
},
|
|
87
|
+
"required": false,
|
|
88
|
+
"optional": false,
|
|
89
|
+
"docs": {
|
|
90
|
+
"tags": [],
|
|
91
|
+
"text": ""
|
|
92
|
+
},
|
|
93
|
+
"attribute": "size",
|
|
94
|
+
"reflect": false,
|
|
95
|
+
"defaultValue": "Bcm.Size.medium"
|
|
96
|
+
},
|
|
97
|
+
"min": {
|
|
98
|
+
"type": "number",
|
|
99
|
+
"mutable": false,
|
|
100
|
+
"complexType": {
|
|
101
|
+
"original": "number",
|
|
102
|
+
"resolved": "number",
|
|
103
|
+
"references": {}
|
|
104
|
+
},
|
|
105
|
+
"required": false,
|
|
106
|
+
"optional": false,
|
|
107
|
+
"docs": {
|
|
108
|
+
"tags": [],
|
|
109
|
+
"text": ""
|
|
110
|
+
},
|
|
111
|
+
"attribute": "min",
|
|
112
|
+
"reflect": false,
|
|
113
|
+
"defaultValue": "0"
|
|
114
|
+
},
|
|
115
|
+
"max": {
|
|
116
|
+
"type": "number",
|
|
117
|
+
"mutable": false,
|
|
118
|
+
"complexType": {
|
|
119
|
+
"original": "number",
|
|
120
|
+
"resolved": "number",
|
|
121
|
+
"references": {}
|
|
122
|
+
},
|
|
123
|
+
"required": false,
|
|
124
|
+
"optional": false,
|
|
125
|
+
"docs": {
|
|
126
|
+
"tags": [],
|
|
127
|
+
"text": ""
|
|
128
|
+
},
|
|
129
|
+
"attribute": "max",
|
|
130
|
+
"reflect": false,
|
|
131
|
+
"defaultValue": "100"
|
|
132
|
+
},
|
|
133
|
+
"step": {
|
|
134
|
+
"type": "number",
|
|
135
|
+
"mutable": false,
|
|
136
|
+
"complexType": {
|
|
137
|
+
"original": "number",
|
|
138
|
+
"resolved": "number",
|
|
139
|
+
"references": {}
|
|
140
|
+
},
|
|
141
|
+
"required": false,
|
|
142
|
+
"optional": false,
|
|
143
|
+
"docs": {
|
|
144
|
+
"tags": [],
|
|
145
|
+
"text": ""
|
|
146
|
+
},
|
|
147
|
+
"attribute": "step",
|
|
148
|
+
"reflect": false,
|
|
149
|
+
"defaultValue": "1"
|
|
150
|
+
},
|
|
151
|
+
"placeholder": {
|
|
152
|
+
"type": "string",
|
|
153
|
+
"mutable": false,
|
|
154
|
+
"complexType": {
|
|
155
|
+
"original": "string",
|
|
156
|
+
"resolved": "string",
|
|
157
|
+
"references": {}
|
|
158
|
+
},
|
|
159
|
+
"required": false,
|
|
160
|
+
"optional": false,
|
|
161
|
+
"docs": {
|
|
162
|
+
"tags": [],
|
|
163
|
+
"text": ""
|
|
164
|
+
},
|
|
165
|
+
"attribute": "placeholder",
|
|
166
|
+
"reflect": false
|
|
167
|
+
},
|
|
168
|
+
"label": {
|
|
169
|
+
"type": "string",
|
|
170
|
+
"mutable": false,
|
|
171
|
+
"complexType": {
|
|
172
|
+
"original": "string",
|
|
173
|
+
"resolved": "string",
|
|
174
|
+
"references": {}
|
|
175
|
+
},
|
|
176
|
+
"required": false,
|
|
177
|
+
"optional": false,
|
|
178
|
+
"docs": {
|
|
179
|
+
"tags": [],
|
|
180
|
+
"text": ""
|
|
181
|
+
},
|
|
182
|
+
"attribute": "label",
|
|
183
|
+
"reflect": false
|
|
184
|
+
},
|
|
185
|
+
"tooltip": {
|
|
186
|
+
"type": "string",
|
|
187
|
+
"mutable": true,
|
|
188
|
+
"complexType": {
|
|
189
|
+
"original": "string",
|
|
190
|
+
"resolved": "string",
|
|
191
|
+
"references": {}
|
|
192
|
+
},
|
|
193
|
+
"required": false,
|
|
194
|
+
"optional": false,
|
|
195
|
+
"docs": {
|
|
196
|
+
"tags": [],
|
|
197
|
+
"text": ""
|
|
198
|
+
},
|
|
199
|
+
"attribute": "tooltip",
|
|
200
|
+
"reflect": false
|
|
201
|
+
},
|
|
202
|
+
"value": {
|
|
203
|
+
"type": "number",
|
|
204
|
+
"mutable": true,
|
|
205
|
+
"complexType": {
|
|
206
|
+
"original": "number",
|
|
207
|
+
"resolved": "number",
|
|
208
|
+
"references": {}
|
|
209
|
+
},
|
|
210
|
+
"required": false,
|
|
211
|
+
"optional": false,
|
|
212
|
+
"docs": {
|
|
213
|
+
"tags": [],
|
|
214
|
+
"text": ""
|
|
215
|
+
},
|
|
216
|
+
"attribute": "value",
|
|
217
|
+
"reflect": false,
|
|
218
|
+
"defaultValue": "0"
|
|
219
|
+
},
|
|
220
|
+
"disabled": {
|
|
221
|
+
"type": "boolean",
|
|
222
|
+
"mutable": false,
|
|
223
|
+
"complexType": {
|
|
224
|
+
"original": "boolean",
|
|
225
|
+
"resolved": "boolean",
|
|
226
|
+
"references": {}
|
|
227
|
+
},
|
|
228
|
+
"required": false,
|
|
229
|
+
"optional": false,
|
|
230
|
+
"docs": {
|
|
231
|
+
"tags": [],
|
|
232
|
+
"text": ""
|
|
233
|
+
},
|
|
234
|
+
"attribute": "disabled",
|
|
235
|
+
"reflect": false,
|
|
236
|
+
"defaultValue": "false"
|
|
237
|
+
},
|
|
238
|
+
"readonly": {
|
|
239
|
+
"type": "boolean",
|
|
240
|
+
"mutable": false,
|
|
241
|
+
"complexType": {
|
|
242
|
+
"original": "boolean",
|
|
243
|
+
"resolved": "boolean",
|
|
244
|
+
"references": {}
|
|
245
|
+
},
|
|
246
|
+
"required": false,
|
|
247
|
+
"optional": false,
|
|
248
|
+
"docs": {
|
|
249
|
+
"tags": [],
|
|
250
|
+
"text": ""
|
|
251
|
+
},
|
|
252
|
+
"attribute": "readonly",
|
|
253
|
+
"reflect": false,
|
|
254
|
+
"defaultValue": "false"
|
|
255
|
+
},
|
|
256
|
+
"required": {
|
|
257
|
+
"type": "boolean",
|
|
258
|
+
"mutable": false,
|
|
259
|
+
"complexType": {
|
|
260
|
+
"original": "boolean",
|
|
261
|
+
"resolved": "boolean",
|
|
262
|
+
"references": {}
|
|
263
|
+
},
|
|
264
|
+
"required": false,
|
|
265
|
+
"optional": false,
|
|
266
|
+
"docs": {
|
|
267
|
+
"tags": [],
|
|
268
|
+
"text": ""
|
|
269
|
+
},
|
|
270
|
+
"attribute": "required",
|
|
271
|
+
"reflect": false,
|
|
272
|
+
"defaultValue": "false"
|
|
273
|
+
},
|
|
274
|
+
"pattern": {
|
|
275
|
+
"type": "string",
|
|
276
|
+
"mutable": true,
|
|
277
|
+
"complexType": {
|
|
278
|
+
"original": "string",
|
|
279
|
+
"resolved": "string",
|
|
280
|
+
"references": {}
|
|
281
|
+
},
|
|
282
|
+
"required": false,
|
|
283
|
+
"optional": false,
|
|
284
|
+
"docs": {
|
|
285
|
+
"tags": [],
|
|
286
|
+
"text": ""
|
|
287
|
+
},
|
|
288
|
+
"attribute": "pattern",
|
|
289
|
+
"reflect": false
|
|
290
|
+
},
|
|
291
|
+
"caption": {
|
|
292
|
+
"type": "string",
|
|
293
|
+
"mutable": true,
|
|
294
|
+
"complexType": {
|
|
295
|
+
"original": "string",
|
|
296
|
+
"resolved": "string",
|
|
297
|
+
"references": {}
|
|
298
|
+
},
|
|
299
|
+
"required": false,
|
|
300
|
+
"optional": false,
|
|
301
|
+
"docs": {
|
|
302
|
+
"tags": [],
|
|
303
|
+
"text": ""
|
|
304
|
+
},
|
|
305
|
+
"attribute": "caption",
|
|
306
|
+
"reflect": false
|
|
307
|
+
},
|
|
308
|
+
"noCaption": {
|
|
309
|
+
"type": "boolean",
|
|
310
|
+
"mutable": true,
|
|
311
|
+
"complexType": {
|
|
312
|
+
"original": "boolean",
|
|
313
|
+
"resolved": "boolean",
|
|
314
|
+
"references": {}
|
|
315
|
+
},
|
|
316
|
+
"required": false,
|
|
317
|
+
"optional": false,
|
|
318
|
+
"docs": {
|
|
319
|
+
"tags": [],
|
|
320
|
+
"text": ""
|
|
321
|
+
},
|
|
322
|
+
"attribute": "no-caption",
|
|
323
|
+
"reflect": false,
|
|
324
|
+
"defaultValue": "false"
|
|
325
|
+
},
|
|
326
|
+
"captionType": {
|
|
327
|
+
"type": "string",
|
|
328
|
+
"mutable": true,
|
|
329
|
+
"complexType": {
|
|
330
|
+
"original": "StatusTypes",
|
|
331
|
+
"resolved": "\"default\" | \"error\" | \"info\" | \"success\" | \"warning\"",
|
|
332
|
+
"references": {
|
|
333
|
+
"StatusTypes": {
|
|
334
|
+
"location": "import",
|
|
335
|
+
"path": "@bcm/model"
|
|
336
|
+
}
|
|
337
|
+
}
|
|
338
|
+
},
|
|
339
|
+
"required": false,
|
|
340
|
+
"optional": false,
|
|
341
|
+
"docs": {
|
|
342
|
+
"tags": [],
|
|
343
|
+
"text": ""
|
|
344
|
+
},
|
|
345
|
+
"attribute": "caption-type",
|
|
346
|
+
"reflect": false,
|
|
347
|
+
"defaultValue": "Bcm.Status.default"
|
|
348
|
+
},
|
|
349
|
+
"captionError": {
|
|
350
|
+
"type": "string",
|
|
351
|
+
"mutable": true,
|
|
352
|
+
"complexType": {
|
|
353
|
+
"original": "string",
|
|
354
|
+
"resolved": "string",
|
|
355
|
+
"references": {}
|
|
356
|
+
},
|
|
357
|
+
"required": false,
|
|
358
|
+
"optional": false,
|
|
359
|
+
"docs": {
|
|
360
|
+
"tags": [],
|
|
361
|
+
"text": ""
|
|
362
|
+
},
|
|
363
|
+
"attribute": "caption-error",
|
|
364
|
+
"reflect": false
|
|
365
|
+
},
|
|
366
|
+
"customErrorMessage": {
|
|
367
|
+
"type": "string",
|
|
368
|
+
"mutable": true,
|
|
369
|
+
"complexType": {
|
|
370
|
+
"original": "string",
|
|
371
|
+
"resolved": "string",
|
|
372
|
+
"references": {}
|
|
373
|
+
},
|
|
374
|
+
"required": false,
|
|
375
|
+
"optional": false,
|
|
376
|
+
"docs": {
|
|
377
|
+
"tags": [],
|
|
378
|
+
"text": ""
|
|
379
|
+
},
|
|
380
|
+
"attribute": "custom-error-message",
|
|
381
|
+
"reflect": false
|
|
382
|
+
},
|
|
383
|
+
"prefixIcon": {
|
|
384
|
+
"type": "string",
|
|
385
|
+
"mutable": true,
|
|
386
|
+
"complexType": {
|
|
387
|
+
"original": "string",
|
|
388
|
+
"resolved": "string",
|
|
389
|
+
"references": {}
|
|
390
|
+
},
|
|
391
|
+
"required": false,
|
|
392
|
+
"optional": false,
|
|
393
|
+
"docs": {
|
|
394
|
+
"tags": [],
|
|
395
|
+
"text": ""
|
|
396
|
+
},
|
|
397
|
+
"attribute": "prefix-icon",
|
|
398
|
+
"reflect": false
|
|
399
|
+
},
|
|
400
|
+
"suffixIcon": {
|
|
401
|
+
"type": "string",
|
|
402
|
+
"mutable": true,
|
|
403
|
+
"complexType": {
|
|
404
|
+
"original": "string",
|
|
405
|
+
"resolved": "string",
|
|
406
|
+
"references": {}
|
|
407
|
+
},
|
|
408
|
+
"required": false,
|
|
409
|
+
"optional": false,
|
|
410
|
+
"docs": {
|
|
411
|
+
"tags": [],
|
|
412
|
+
"text": ""
|
|
413
|
+
},
|
|
414
|
+
"attribute": "suffix-icon",
|
|
415
|
+
"reflect": false
|
|
416
|
+
}
|
|
417
|
+
};
|
|
418
|
+
}
|
|
419
|
+
static get states() {
|
|
420
|
+
return {
|
|
421
|
+
"isFocus": {},
|
|
422
|
+
"isError": {}
|
|
423
|
+
};
|
|
424
|
+
}
|
|
425
|
+
}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* Built with Stencil
|
|
3
|
+
* Copyright (c) Bromcom.
|
|
4
|
+
*/
|
|
5
|
+
import { tv } from "tailwind-variants";
|
|
6
|
+
export const numberInputStyle = tv({
|
|
7
|
+
slots: {
|
|
8
|
+
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",
|
|
9
|
+
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",
|
|
10
|
+
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",
|
|
11
|
+
input: "tw-outline-none tw-appearance-none tw-flex-1 tw-bg-transparent tw-text-slate-400 tw-text-inherit tw-font-normal",
|
|
12
|
+
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]",
|
|
13
|
+
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",
|
|
14
|
+
slotIcon: "tw-text-slate-500",
|
|
15
|
+
},
|
|
16
|
+
variants: {
|
|
17
|
+
size: {
|
|
18
|
+
small: {
|
|
19
|
+
host: "tw-gap-0.5 tw-text-xs",
|
|
20
|
+
slotIcon: "tw-text-[10px]",
|
|
21
|
+
inputContainer: "tw-py-[2px]",
|
|
22
|
+
caretIcon: "tw-text-[10px]",
|
|
23
|
+
},
|
|
24
|
+
medium: {
|
|
25
|
+
host: "tw-gap-1 tw-text-base",
|
|
26
|
+
slotIcon: "tw-text-xs",
|
|
27
|
+
inputContainer: "tw-py-[5px]",
|
|
28
|
+
},
|
|
29
|
+
large: {
|
|
30
|
+
host: "tw-gap-2 tw-text-base",
|
|
31
|
+
slotIcon: "tw-text-[14px]",
|
|
32
|
+
inputContainer: "tw-py-2",
|
|
33
|
+
},
|
|
34
|
+
},
|
|
35
|
+
focus: {
|
|
36
|
+
true: {
|
|
37
|
+
container: "tw-ring-1 tw-ring-blue-600",
|
|
38
|
+
input: "tw-text-slate-700",
|
|
39
|
+
},
|
|
40
|
+
},
|
|
41
|
+
},
|
|
42
|
+
defaultVariants: {
|
|
43
|
+
size: "medium",
|
|
44
|
+
},
|
|
45
|
+
});
|
|
@@ -561,6 +561,7 @@
|
|
|
561
561
|
width: 100%;
|
|
562
562
|
}
|
|
563
563
|
.bcm-list__container.bcm-list__type-linked-component, .bcm-list__container.bcm-list__type-select, .bcm-list__container.bcm-list__type-autocomplete {
|
|
564
|
+
display: none;
|
|
564
565
|
opacity: 0;
|
|
565
566
|
visibility: hidden;
|
|
566
567
|
position: absolute;
|
|
@@ -576,6 +577,7 @@
|
|
|
576
577
|
transform: translateY(-10%);
|
|
577
578
|
}
|
|
578
579
|
.bcm-list__container.bcm-list__type-linked-component.is-open, .bcm-list__container.bcm-list__type-select.is-open, .bcm-list__container.bcm-list__type-autocomplete.is-open {
|
|
580
|
+
display: block;
|
|
579
581
|
opacity: 1;
|
|
580
582
|
transform: translateY(0);
|
|
581
583
|
visibility: visible;
|
|
@@ -2,15 +2,15 @@
|
|
|
2
2
|
* Built with Stencil
|
|
3
3
|
* Copyright (c) Bromcom.
|
|
4
4
|
*/
|
|
5
|
-
import { h } from
|
|
6
|
-
import cs from
|
|
7
|
-
import Bcm from
|
|
8
|
-
export const LabelTemplate = ({ required, value, size, form, htmlFor, type }) => {
|
|
5
|
+
import { h } from "@stencil/core";
|
|
6
|
+
import cs from "classnames";
|
|
7
|
+
import Bcm from "../models/bcm";
|
|
8
|
+
export const LabelTemplate = ({ required, value, size, form, htmlFor, type, tooltip }) => {
|
|
9
9
|
size = size || "medium";
|
|
10
10
|
type = type || Bcm.Status.default;
|
|
11
|
-
return (h("label", { form: form, htmlFor: htmlFor, class: cs("bcm-ui-element bcm-ui-feedback bcm-label bcm-label__text tw-mb-1 tw-text-slate-600
|
|
11
|
+
return (h("label", { form: form, htmlFor: htmlFor, class: cs("bcm-ui-element bcm-ui-feedback bcm-label bcm-label__text tw-mb-1 tw-font-medium tw-text-slate-600 ", {
|
|
12
12
|
"tw-text-1": size == "small",
|
|
13
13
|
"tw-text-2": size == "medium",
|
|
14
14
|
"tw-text-3": size == "large",
|
|
15
|
-
}) }, value, " ", required && (
|
|
15
|
+
}) }, value, " ", required && "*", tooltip && (h("span", { class: "tw-ml-1" }, h("bcm-tooltip", { message: tooltip, placement: "top", trigger: "hover" }, h("bcm-icon", { icon: "fas fa-info-circle" }))))));
|
|
16
16
|
};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { Components, JSX } from "../types/components";
|
|
2
|
+
|
|
3
|
+
interface BcmNumberInput extends Components.BcmNumberInput, HTMLElement {}
|
|
4
|
+
export const BcmNumberInput: {
|
|
5
|
+
prototype: BcmNumberInput;
|
|
6
|
+
new (): BcmNumberInput;
|
|
7
|
+
};
|
|
8
|
+
/**
|
|
9
|
+
* Used to define this component and all nested components recursively.
|
|
10
|
+
*/
|
|
11
|
+
export const defineCustomElement: () => void;
|
|
@@ -0,0 +1,157 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* Built with Stencil
|
|
3
|
+
* Copyright (c) Bromcom.
|
|
4
|
+
*/
|
|
5
|
+
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
|
|
6
|
+
import './color-helper.js';
|
|
7
|
+
import './validators.js';
|
|
8
|
+
import { G as Generate } from './generate.js';
|
|
9
|
+
import './number-helper.js';
|
|
10
|
+
import './string-helper.js';
|
|
11
|
+
import './element-dragger.js';
|
|
12
|
+
import { a as Bcm } from './bcm.js';
|
|
13
|
+
import { C as CaptionTemplate } from './caption-template.js';
|
|
14
|
+
import './index2.js';
|
|
15
|
+
import './types.js';
|
|
16
|
+
import './types2.js';
|
|
17
|
+
import { c as ce } from './index5.js';
|
|
18
|
+
import { d as defineCustomElement$4 } from './icon.js';
|
|
19
|
+
import { d as defineCustomElement$3 } from './label.js';
|
|
20
|
+
import { d as defineCustomElement$2 } from './tooltip.js';
|
|
21
|
+
|
|
22
|
+
const numberInputStyle = ce({
|
|
23
|
+
slots: {
|
|
24
|
+
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",
|
|
25
|
+
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",
|
|
26
|
+
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",
|
|
27
|
+
input: "tw-outline-none tw-appearance-none tw-flex-1 tw-bg-transparent tw-text-slate-400 tw-text-inherit tw-font-normal",
|
|
28
|
+
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]",
|
|
29
|
+
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",
|
|
30
|
+
slotIcon: "tw-text-slate-500",
|
|
31
|
+
},
|
|
32
|
+
variants: {
|
|
33
|
+
size: {
|
|
34
|
+
small: {
|
|
35
|
+
host: "tw-gap-0.5 tw-text-xs",
|
|
36
|
+
slotIcon: "tw-text-[10px]",
|
|
37
|
+
inputContainer: "tw-py-[2px]",
|
|
38
|
+
caretIcon: "tw-text-[10px]",
|
|
39
|
+
},
|
|
40
|
+
medium: {
|
|
41
|
+
host: "tw-gap-1 tw-text-base",
|
|
42
|
+
slotIcon: "tw-text-xs",
|
|
43
|
+
inputContainer: "tw-py-[5px]",
|
|
44
|
+
},
|
|
45
|
+
large: {
|
|
46
|
+
host: "tw-gap-2 tw-text-base",
|
|
47
|
+
slotIcon: "tw-text-[14px]",
|
|
48
|
+
inputContainer: "tw-py-2",
|
|
49
|
+
},
|
|
50
|
+
},
|
|
51
|
+
focus: {
|
|
52
|
+
true: {
|
|
53
|
+
container: "tw-ring-1 tw-ring-blue-600",
|
|
54
|
+
input: "tw-text-slate-700",
|
|
55
|
+
},
|
|
56
|
+
},
|
|
57
|
+
},
|
|
58
|
+
defaultVariants: {
|
|
59
|
+
size: "medium",
|
|
60
|
+
},
|
|
61
|
+
});
|
|
62
|
+
|
|
63
|
+
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}";
|
|
64
|
+
|
|
65
|
+
const NumberInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
66
|
+
constructor() {
|
|
67
|
+
super();
|
|
68
|
+
this.__registerHost();
|
|
69
|
+
this.blockInvalidChar = e => {
|
|
70
|
+
return ["e", "E", "+", "-"].includes(e.key) && e.preventDefault();
|
|
71
|
+
};
|
|
72
|
+
this._id = Generate.UID();
|
|
73
|
+
this.size = Bcm.Size.medium;
|
|
74
|
+
this.min = 0;
|
|
75
|
+
this.max = 100;
|
|
76
|
+
this.step = 1;
|
|
77
|
+
this.placeholder = undefined;
|
|
78
|
+
this.label = undefined;
|
|
79
|
+
this.tooltip = undefined;
|
|
80
|
+
this.value = 0;
|
|
81
|
+
this.disabled = false;
|
|
82
|
+
this.readonly = false;
|
|
83
|
+
this.required = false;
|
|
84
|
+
this.pattern = undefined;
|
|
85
|
+
this.caption = undefined;
|
|
86
|
+
this.noCaption = false;
|
|
87
|
+
this.captionType = Bcm.Status.default;
|
|
88
|
+
this.captionError = undefined;
|
|
89
|
+
this.customErrorMessage = undefined;
|
|
90
|
+
this.prefixIcon = undefined;
|
|
91
|
+
this.suffixIcon = undefined;
|
|
92
|
+
this.isFocus = false;
|
|
93
|
+
this.isError = false;
|
|
94
|
+
}
|
|
95
|
+
render() {
|
|
96
|
+
const { _id, value, min, max, step, tooltip, disabled, size, label, caption, captionType, required, noCaption, captionError, customErrorMessage, prefixIcon, suffixIcon, pattern } = this;
|
|
97
|
+
const { host, input, container, inputContainer, caretContainer, caretIcon, slotIcon } = numberInputStyle({ size, focus: this.isFocus });
|
|
98
|
+
return (h(Host, { class: host(), onClick: () => !disabled && this.nativeInput.focus() }, label && h("bcm-label", { tooltip: tooltip, "no-margin": true, type: captionType, value: label, required: required, htmlFor: _id }), h("div", { class: container() }, h("div", { class: inputContainer() }, prefixIcon && (h("span", { class: slotIcon() }, h("i", { class: prefixIcon }))), 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 && (h("span", { class: slotIcon() }, h("i", { class: suffixIcon })))), h("div", { class: caretContainer() }, h("span", { class: caretIcon() }, h("i", { class: "fas fa-caret-up" })), h("span", { class: caretIcon() }, h("i", { class: "fas fa-caret-down" })))), h(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption, customErrorMessage: customErrorMessage })));
|
|
99
|
+
}
|
|
100
|
+
static get style() { return numberInputCss; }
|
|
101
|
+
}, [0, "bcm-number-input", {
|
|
102
|
+
"_id": [513, "id"],
|
|
103
|
+
"size": [1],
|
|
104
|
+
"min": [2],
|
|
105
|
+
"max": [2],
|
|
106
|
+
"step": [2],
|
|
107
|
+
"placeholder": [1],
|
|
108
|
+
"label": [1],
|
|
109
|
+
"tooltip": [1025],
|
|
110
|
+
"value": [1026],
|
|
111
|
+
"disabled": [4],
|
|
112
|
+
"readonly": [4],
|
|
113
|
+
"required": [4],
|
|
114
|
+
"pattern": [1025],
|
|
115
|
+
"caption": [1025],
|
|
116
|
+
"noCaption": [1028, "no-caption"],
|
|
117
|
+
"captionType": [1025, "caption-type"],
|
|
118
|
+
"captionError": [1025, "caption-error"],
|
|
119
|
+
"customErrorMessage": [1025, "custom-error-message"],
|
|
120
|
+
"prefixIcon": [1025, "prefix-icon"],
|
|
121
|
+
"suffixIcon": [1025, "suffix-icon"],
|
|
122
|
+
"isFocus": [32],
|
|
123
|
+
"isError": [32]
|
|
124
|
+
}]);
|
|
125
|
+
function defineCustomElement$1() {
|
|
126
|
+
if (typeof customElements === "undefined") {
|
|
127
|
+
return;
|
|
128
|
+
}
|
|
129
|
+
const components = ["bcm-number-input", "bcm-icon", "bcm-label", "bcm-tooltip"];
|
|
130
|
+
components.forEach(tagName => { switch (tagName) {
|
|
131
|
+
case "bcm-number-input":
|
|
132
|
+
if (!customElements.get(tagName)) {
|
|
133
|
+
customElements.define(tagName, NumberInput);
|
|
134
|
+
}
|
|
135
|
+
break;
|
|
136
|
+
case "bcm-icon":
|
|
137
|
+
if (!customElements.get(tagName)) {
|
|
138
|
+
defineCustomElement$4();
|
|
139
|
+
}
|
|
140
|
+
break;
|
|
141
|
+
case "bcm-label":
|
|
142
|
+
if (!customElements.get(tagName)) {
|
|
143
|
+
defineCustomElement$3();
|
|
144
|
+
}
|
|
145
|
+
break;
|
|
146
|
+
case "bcm-tooltip":
|
|
147
|
+
if (!customElements.get(tagName)) {
|
|
148
|
+
defineCustomElement$2();
|
|
149
|
+
}
|
|
150
|
+
break;
|
|
151
|
+
} });
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
const BcmNumberInput = NumberInput;
|
|
155
|
+
const defineCustomElement = defineCustomElement$1;
|
|
156
|
+
|
|
157
|
+
export { BcmNumberInput, defineCustomElement };
|