bromcom-ui 2.11.1-rc.9-3 → 2.11.1-rc.9-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.
Files changed (183) hide show
  1. package/dist/bromcom-ui/bromcom-ui.css +1 -1
  2. package/dist/bromcom-ui/bromcom-ui.esm.js +1 -1
  3. package/dist/bromcom-ui/{p-3cdfd8eb.entry.js → p-082b9695.entry.js} +1 -1
  4. package/dist/bromcom-ui/{p-14ed8029.entry.js → p-0da8ad9f.entry.js} +1 -1
  5. package/dist/bromcom-ui/{p-7fd22a35.entry.js → p-0ef4f5ec.entry.js} +1 -1
  6. package/dist/bromcom-ui/p-15199f10.entry.js +5 -0
  7. package/dist/bromcom-ui/{p-0eacfbb2.entry.js → p-198cccb5.entry.js} +1 -1
  8. package/dist/bromcom-ui/p-222203a4.entry.js +16 -0
  9. package/dist/bromcom-ui/{p-adcb30bc.entry.js → p-2ab3e5cb.entry.js} +1 -1
  10. package/dist/bromcom-ui/p-2addde9e.js +5 -0
  11. package/dist/bromcom-ui/p-2b42d77e.entry.js +5 -0
  12. package/dist/bromcom-ui/{p-db15dca3.entry.js → p-2c9f9889.entry.js} +1 -1
  13. package/dist/bromcom-ui/{p-a018f340.entry.js → p-42d09898.entry.js} +1 -1
  14. package/dist/bromcom-ui/{p-6f37a4d7.entry.js → p-471c7f34.entry.js} +1 -1
  15. package/dist/bromcom-ui/{p-35c215f2.entry.js → p-4d0680e1.entry.js} +1 -1
  16. package/dist/bromcom-ui/{p-8b31581f.js → p-5cb99e9e.js} +1 -1
  17. package/dist/bromcom-ui/{p-9589f69c.entry.js → p-5d670fd7.entry.js} +1 -1
  18. package/dist/bromcom-ui/{p-e497cf5d.entry.js → p-5df2d3f1.entry.js} +1 -1
  19. package/dist/bromcom-ui/{p-70253803.entry.js → p-5ee56cae.entry.js} +1 -1
  20. package/dist/bromcom-ui/{p-e10780ed.entry.js → p-603efb90.entry.js} +1 -1
  21. package/dist/bromcom-ui/{p-178fa936.entry.js → p-64a8db1d.entry.js} +1 -1
  22. package/dist/bromcom-ui/{p-61753299.js → p-6bea284a.js} +1 -1
  23. package/dist/bromcom-ui/{p-dc607ae4.entry.js → p-7230713c.entry.js} +1 -1
  24. package/dist/bromcom-ui/{p-fba1682e.entry.js → p-7d4f57be.entry.js} +1 -1
  25. package/dist/bromcom-ui/p-87e5fda5.entry.js +5 -0
  26. package/dist/bromcom-ui/{p-e93d6619.js → p-8f3ca5d9.js} +1 -1
  27. package/dist/bromcom-ui/p-9bbd341c.entry.js +5 -0
  28. package/dist/bromcom-ui/{p-bca0ff0a.entry.js → p-a292b41d.entry.js} +1 -1
  29. package/dist/bromcom-ui/{p-90223f9f.entry.js → p-a933ac12.entry.js} +1 -1
  30. package/dist/bromcom-ui/{p-5a22b74b.entry.js → p-adb21984.entry.js} +1 -1
  31. package/dist/bromcom-ui/p-aeb4be41.js +5 -0
  32. package/dist/bromcom-ui/p-b847cbea.js +5 -0
  33. package/dist/bromcom-ui/p-bbe8c777.entry.js +5 -0
  34. package/dist/bromcom-ui/{p-c10b07cc.entry.js → p-c157a7d4.entry.js} +1 -1
  35. package/dist/bromcom-ui/{p-ebeb9689.entry.js → p-c23d73fb.entry.js} +1 -1
  36. package/dist/bromcom-ui/p-c67a5e5f.entry.js +5 -0
  37. package/dist/bromcom-ui/p-c77541f4.js +10 -0
  38. package/dist/bromcom-ui/{p-abd2f9ff.entry.js → p-c89acfca.entry.js} +1 -1
  39. package/dist/bromcom-ui/p-d1298c40.js +5 -0
  40. package/dist/bromcom-ui/{p-5bf1657b.entry.js → p-e8bb9019.entry.js} +1 -1
  41. package/dist/bromcom-ui/{p-627c7769.entry.js → p-e9928d0c.entry.js} +1 -1
  42. package/dist/bromcom-ui/p-f478ad92.entry.js +5 -0
  43. package/dist/bromcom-ui/{p-5a391fcd.js → p-fcf70988.js} +1 -1
  44. package/dist/cjs/{bcm-accordion_46.cjs.entry.js → bcm-accordion_47.cjs.entry.js} +8764 -8633
  45. package/dist/cjs/bcm-alert.cjs.entry.js +3 -3
  46. package/dist/cjs/bcm-attendance-actions-comment.cjs.entry.js +6 -6
  47. package/dist/cjs/bcm-attendance-actions-dropdown.cjs.entry.js +6 -6
  48. package/dist/cjs/bcm-breadcrumb.cjs.entry.js +3 -3
  49. package/dist/cjs/bcm-caption.cjs.entry.js +6 -6
  50. package/dist/cjs/bcm-card.cjs.entry.js +4 -4
  51. package/dist/cjs/bcm-checkbox-lite_8.cjs.entry.js +3 -3
  52. package/dist/cjs/bcm-chip-group.cjs.entry.js +6 -6
  53. package/dist/cjs/bcm-collapse.cjs.entry.js +3 -3
  54. package/dist/cjs/bcm-date-picker.cjs.entry.js +3 -3
  55. package/dist/cjs/bcm-datetime-picker.cjs.entry.js +3 -3
  56. package/dist/cjs/bcm-default.cjs.entry.js +3 -3
  57. package/dist/cjs/bcm-form-2.cjs.entry.js +5 -4
  58. package/dist/cjs/bcm-input-2.cjs.entry.js +153 -0
  59. package/dist/cjs/bcm-input-custom.cjs.entry.js +3 -3
  60. package/dist/cjs/bcm-input-dropdown.cjs.entry.js +6 -6
  61. package/dist/cjs/bcm-modal-2-footer.cjs.entry.js +6 -6
  62. package/dist/cjs/bcm-modal-2-header.cjs.entry.js +6 -6
  63. package/dist/cjs/bcm-modal-2.cjs.entry.js +6 -6
  64. package/dist/cjs/bcm-number-input.cjs.entry.js +260 -72
  65. package/dist/cjs/bcm-overlay_2.cjs.entry.js +1 -1
  66. package/dist/cjs/bcm-popover.cjs.entry.js +6 -6
  67. package/dist/cjs/bcm-range.cjs.entry.js +3 -3
  68. package/dist/cjs/bcm-react-number.cjs.entry.js +1230 -0
  69. package/dist/cjs/bcm-skeleton.cjs.entry.js +6 -6
  70. package/dist/cjs/bcm-table.cjs.entry.js +6 -6
  71. package/dist/cjs/bcm-tag.cjs.entry.js +4 -4
  72. package/dist/cjs/bcm-time-picker.cjs.entry.js +3 -3
  73. package/dist/cjs/bcm-toast.cjs.entry.js +3 -3
  74. package/dist/cjs/bromcom-ui.cjs.js +3 -3
  75. package/dist/cjs/{color-helper-c3a819ea.js → color-helper-dc98a2ca.js} +1 -1
  76. package/dist/cjs/{colors-078851ec.js → colors-250d0982.js} +13 -7
  77. package/dist/cjs/{generate-f73a098d.js → generate-2f15ee94.js} +2 -2
  78. package/dist/cjs/{global-baf04c81.js → global-da78178f.js} +1 -1
  79. package/dist/cjs/index-e05a7c6f.js +545 -0
  80. package/dist/cjs/input.style-b5676e6a.js +122 -0
  81. package/dist/cjs/loader.cjs.js +3 -3
  82. package/dist/cjs/{number-helper-0543a62e.js → number-helper-9b0b5976.js} +1 -1
  83. package/dist/cjs/old-bcm-popover-box.cjs.entry.js +4 -4
  84. package/dist/cjs/old-bcm-popover.cjs.entry.js +3 -3
  85. package/dist/cjs/{package-e717a31f.js → package-7b89373b.js} +1 -1
  86. package/dist/cjs/{validators-77768582.js → validators-082184cd.js} +1 -1
  87. package/dist/collection/collection-manifest.json +2 -0
  88. package/dist/collection/components/atoms/link/link.css +9 -3
  89. package/dist/collection/components/molecules/input/input.style.js +117 -0
  90. package/dist/collection/components/molecules/input/input2.js +918 -0
  91. package/dist/collection/components/molecules/number-input/number-input.js +776 -95
  92. package/dist/collection/components/molecules/number-input/react-input.js +96 -0
  93. package/dist/collection/components/molecules/radio/radio.js +1 -1
  94. package/dist/collection/components/organism/form/form.js +2 -2
  95. package/dist/collection/components/organism/form-2/bcm-form-components.js +2 -1
  96. package/dist/collection/components/organism/list/list.css +0 -1
  97. package/dist/collection/components/third-parts/rc-picker/date.js +1 -1
  98. package/dist/collection/components/third-parts/rc-picker/rc-picker.css +40 -5
  99. package/dist/collection/components/third-parts/rc-picker/rc-picker.js +11 -2
  100. package/dist/components/{raf.js → Overflow.js} +692 -69
  101. package/dist/components/bcm-date.js +1 -1
  102. package/dist/components/bcm-form-2.js +2 -1
  103. package/dist/components/bcm-input-2.d.ts +11 -0
  104. package/dist/components/bcm-input-2.js +225 -0
  105. package/dist/components/bcm-number-input.js +295 -79
  106. package/dist/components/bcm-react-number.d.ts +11 -0
  107. package/dist/components/bcm-react-number.js +10 -0
  108. package/dist/components/colors2.js +13 -7
  109. package/dist/components/form.js +2 -2
  110. package/dist/components/generate.js +1 -1
  111. package/dist/components/index.d.ts +2 -0
  112. package/dist/components/index.js +2 -0
  113. package/dist/components/input.style.js +120 -0
  114. package/dist/components/link.js +1 -1
  115. package/dist/components/list.js +1 -1
  116. package/dist/components/radio.js +1 -1
  117. package/dist/components/rc-overflow.js +1 -593
  118. package/dist/components/rc-picker.js +8620 -8025
  119. package/dist/components/react-input.js +1242 -0
  120. package/dist/esm/{bcm-accordion_46.entry.js → bcm-accordion_47.entry.js} +8656 -8526
  121. package/dist/esm/bcm-alert.entry.js +3 -3
  122. package/dist/esm/bcm-attendance-actions-comment.entry.js +6 -6
  123. package/dist/esm/bcm-attendance-actions-dropdown.entry.js +6 -6
  124. package/dist/esm/bcm-breadcrumb.entry.js +3 -3
  125. package/dist/esm/bcm-caption.entry.js +6 -6
  126. package/dist/esm/bcm-card.entry.js +4 -4
  127. package/dist/esm/bcm-checkbox-lite_8.entry.js +3 -3
  128. package/dist/esm/bcm-chip-group.entry.js +6 -6
  129. package/dist/esm/bcm-collapse.entry.js +3 -3
  130. package/dist/esm/bcm-date-picker.entry.js +3 -3
  131. package/dist/esm/bcm-datetime-picker.entry.js +3 -3
  132. package/dist/esm/bcm-default.entry.js +3 -3
  133. package/dist/esm/bcm-form-2.entry.js +5 -4
  134. package/dist/esm/bcm-input-2.entry.js +149 -0
  135. package/dist/esm/bcm-input-custom.entry.js +3 -3
  136. package/dist/esm/bcm-input-dropdown.entry.js +6 -6
  137. package/dist/esm/bcm-modal-2-footer.entry.js +6 -6
  138. package/dist/esm/bcm-modal-2-header.entry.js +6 -6
  139. package/dist/esm/bcm-modal-2.entry.js +6 -6
  140. package/dist/esm/bcm-number-input.entry.js +259 -71
  141. package/dist/esm/bcm-overlay_2.entry.js +1 -1
  142. package/dist/esm/bcm-popover.entry.js +6 -6
  143. package/dist/esm/bcm-range.entry.js +3 -3
  144. package/dist/esm/bcm-react-number.entry.js +1226 -0
  145. package/dist/esm/bcm-skeleton.entry.js +6 -6
  146. package/dist/esm/bcm-table.entry.js +6 -6
  147. package/dist/esm/bcm-tag.entry.js +4 -4
  148. package/dist/esm/bcm-time-picker.entry.js +3 -3
  149. package/dist/esm/bcm-toast.entry.js +3 -3
  150. package/dist/esm/bromcom-ui.js +3 -3
  151. package/dist/esm/{color-helper-3b528349.js → color-helper-74614f24.js} +1 -1
  152. package/dist/esm/{colors-c530a5b8.js → colors-dd598eea.js} +13 -7
  153. package/dist/esm/{generate-c2c0b02e.js → generate-df0f43b2.js} +2 -2
  154. package/dist/esm/{global-2473677b.js → global-72a67caf.js} +1 -1
  155. package/dist/esm/index-036974d7.js +541 -0
  156. package/dist/esm/input.style-e855c0f3.js +120 -0
  157. package/dist/esm/loader.js +3 -3
  158. package/dist/esm/{number-helper-75447fa6.js → number-helper-b012c05f.js} +1 -1
  159. package/dist/esm/old-bcm-popover-box.entry.js +4 -4
  160. package/dist/esm/old-bcm-popover.entry.js +3 -3
  161. package/dist/esm/{package-28dc6847.js → package-40075eb9.js} +1 -1
  162. package/dist/esm/{validators-5a383988.js → validators-166e2a4e.js} +1 -1
  163. package/dist/types/components/molecules/input/input.style.d.ts +576 -0
  164. package/dist/types/components/molecules/input/input2.d.ts +64 -0
  165. package/dist/types/components/molecules/number-input/number-input.d.ts +66 -17
  166. package/dist/types/components/molecules/number-input/react-input.d.ts +16 -0
  167. package/dist/types/components.d.ts +203 -19
  168. package/package.json +4 -3
  169. package/dist/bromcom-ui/p-3361f6c9.entry.js +0 -5
  170. package/dist/bromcom-ui/p-350dbff0.entry.js +0 -5
  171. package/dist/bromcom-ui/p-3a43bf45.js +0 -5
  172. package/dist/bromcom-ui/p-64f21481.entry.js +0 -20
  173. package/dist/bromcom-ui/p-930f3618.js +0 -5
  174. package/dist/bromcom-ui/p-a4b675ef.entry.js +0 -5
  175. package/dist/bromcom-ui/p-bb46d881.entry.js +0 -5
  176. package/dist/bromcom-ui/p-c7030364.entry.js +0 -5
  177. package/dist/bromcom-ui/p-de0b0192.entry.js +0 -5
  178. package/dist/bromcom-ui/p-ede82918.js +0 -5
  179. package/dist/cjs/bcm-link.cjs.entry.js +0 -51
  180. package/dist/collection/components/molecules/number-input/number-input.css +0 -137
  181. package/dist/collection/components/molecules/number-input/number-input.style.js +0 -45
  182. package/dist/esm/bcm-link.entry.js +0 -47
  183. package/dist/types/components/molecules/number-input/number-input.style.d.ts +0 -200
@@ -2,131 +2,342 @@
2
2
  * Built with Stencil
3
3
  * Copyright (c) Bromcom.
4
4
  */
5
- import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
5
+ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
6
6
  import './color-helper.js';
7
7
  import './validators.js';
8
8
  import { G as Generate } from './generate.js';
9
9
  import './number-helper.js';
10
- import './string-helper.js';
10
+ import { S as StringHelper } from './string-helper.js';
11
11
  import './element-dragger.js';
12
+ import { d as delay } from './utils.js';
12
13
  import { B as Bcm } from './bcm.js';
13
14
  import { C as CaptionTemplate } from './caption-template.js';
14
- import './index2.js';
15
+ import { c as classnames } from './index2.js';
15
16
  import './types.js';
16
17
  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';
18
+ import { i as inputStyle } from './input.style.js';
19
+ import { d as defineCustomElement$5 } from './icon.js';
20
+ import { d as defineCustomElement$4 } from './label.js';
21
+ import { d as defineCustomElement$3 } from './react-input.js';
20
22
  import { d as defineCustomElement$2 } from './tooltip.js';
21
23
 
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
24
  const NumberInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
66
25
  constructor() {
67
26
  super();
68
27
  this.__registerHost();
69
- this.blockInvalidChar = e => {
70
- return ["e", "E", "+", "-"].includes(e.key) && e.preventDefault();
28
+ this.focus = createEvent(this, "bcm-focus", 3);
29
+ this.blur = createEvent(this, "bcm-blur", 3);
30
+ this.clear = createEvent(this, "bcm-clear", 3);
31
+ this.change = createEvent(this, "bcm-change", 7);
32
+ this.input = createEvent(this, "bcm-input", 3);
33
+ this.beforeClear = createEvent(this, "bcm-input-before-clear", 3);
34
+ this._onChange = createEvent(this, "bcm-onchange", 3);
35
+ this.inValid = false;
36
+ this.onInput = () => {
37
+ var _a;
38
+ (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.addEventListener("input", (e) => {
39
+ this.input.emit(e);
40
+ });
41
+ };
42
+ this.onChange = () => {
43
+ var _a;
44
+ (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.addEventListener("change", (e) => {
45
+ this.change.emit(e);
46
+ });
47
+ };
48
+ this.onFocus = () => {
49
+ var _a;
50
+ (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.addEventListener("focus", e => {
51
+ this.isFocus = true;
52
+ this.focus.emit(e);
53
+ });
54
+ };
55
+ this.onBlur = () => {
56
+ var _a;
57
+ (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.addEventListener("blur", e => {
58
+ this.isFocus = false;
59
+ this.blur.emit(e);
60
+ });
61
+ };
62
+ this.onKeydown = () => {
63
+ var _a;
64
+ (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.addEventListener("keydown", (e) => {
65
+ if (e.key === "ArrowUp") {
66
+ e.preventDefault();
67
+ this.up();
68
+ }
69
+ if (e.key === "ArrowDown") {
70
+ e.preventDefault();
71
+ this.down();
72
+ }
73
+ });
74
+ };
75
+ this.listener = () => {
76
+ this.onInput();
77
+ this.onChange();
78
+ this.onFocus();
79
+ this.onBlur();
80
+ this.onKeydown();
71
81
  };
72
82
  this._id = Generate.UID();
73
- this.size = Bcm.Size.medium;
74
- this.min = 0;
75
- this.max = 100;
83
+ this.value = "";
84
+ this.defaultValue = undefined;
85
+ this._prefix = undefined;
86
+ this._suffix = undefined;
87
+ this.size = "medium";
88
+ this.min = undefined;
89
+ this.max = undefined;
76
90
  this.step = 1;
77
- this.placeholder = undefined;
78
91
  this.label = undefined;
79
- this.tooltip = undefined;
80
- this.value = 0;
81
- this.disabled = false;
92
+ this.name = undefined;
93
+ this.fullWidth = false;
94
+ this.clearable = false;
82
95
  this.readonly = false;
96
+ this.disabled = false;
83
97
  this.required = false;
84
- this.pattern = undefined;
98
+ this.mode = "none";
99
+ this.placeholder = undefined;
100
+ this.thousandSeparator = false;
101
+ this.decimalSeparator = undefined;
102
+ this.decimalScale = undefined;
103
+ this.fixedDecimalScale = false;
104
+ this.allowNegative = false;
105
+ this.allowLeadingZeros = false;
106
+ this.unitPrefix = undefined;
107
+ this.unitSuffix = undefined;
85
108
  this.caption = undefined;
86
109
  this.noCaption = false;
87
110
  this.captionType = Bcm.Status.default;
88
111
  this.captionError = undefined;
89
112
  this.customErrorMessage = undefined;
90
- this.prefixIcon = undefined;
91
- this.suffixIcon = undefined;
92
113
  this.isFocus = false;
93
- this.isError = false;
114
+ this.captionCache = undefined;
115
+ this.captionTypeCache = undefined;
116
+ this.valueCache = "";
117
+ }
118
+ connectedCallback() {
119
+ if (this.defaultValue)
120
+ this.value = +this.defaultValue;
121
+ this.valueCache = this.value;
122
+ this.captionCache = this.caption;
123
+ this.captionTypeCache = this.captionType;
124
+ }
125
+ componentDidLoad() {
126
+ this.listener();
127
+ }
128
+ up() {
129
+ if (this.disabled)
130
+ return;
131
+ if (!this.value)
132
+ this.value = Number(0);
133
+ this.value = +this.value + +this.step;
134
+ if (this.mode === "strict") {
135
+ if (this.max && +this.value > +this.max) {
136
+ this.value = this.max;
137
+ }
138
+ }
139
+ }
140
+ down() {
141
+ if (this.disabled)
142
+ return;
143
+ if (!this.value)
144
+ this.value = Number(0);
145
+ this.value = +this.value - +this.step;
146
+ if (this.mode === "strict") {
147
+ if (this.min && +this.value < +this.min) {
148
+ this.value = this.min;
149
+ }
150
+ }
151
+ }
152
+ handleClear(e) {
153
+ if (this.disabled)
154
+ return;
155
+ const event = this.beforeClear.emit(e);
156
+ if (event.defaultPrevented)
157
+ return;
158
+ this.value = "";
159
+ this.clear.emit(e);
160
+ }
161
+ checkLength() {
162
+ const { min, max, value } = this;
163
+ const minLength = min;
164
+ const maxLength = max;
165
+ let valuePoint = value === null || value === void 0 ? void 0 : value.toString();
166
+ if (min && max) {
167
+ if (+valuePoint < +min || +valuePoint > +max) {
168
+ this.setCaption(StringHelper.getMessage("betweenlength", [minLength, maxLength]), "error");
169
+ this.inValid = true;
170
+ }
171
+ else {
172
+ this.setCaption();
173
+ this.inValid = false;
174
+ }
175
+ }
176
+ else if (minLength) {
177
+ if (+valuePoint < +minLength) {
178
+ this.setCaption(StringHelper.getMessage("minlength", [minLength]), "error");
179
+ this.inValid = true;
180
+ }
181
+ else {
182
+ this.setCaption();
183
+ this.inValid = false;
184
+ }
185
+ }
186
+ else if (maxLength) {
187
+ if (valuePoint > maxLength) {
188
+ this.setCaption(StringHelper.getMessage("maxlength", [maxLength]), "error");
189
+ this.inValid = true;
190
+ }
191
+ else {
192
+ this.setCaption();
193
+ this.inValid = false;
194
+ }
195
+ }
196
+ }
197
+ watchValue() {
198
+ this.checkLength();
199
+ }
200
+ async onBcmFocus() {
201
+ this.inputElement.focus();
202
+ }
203
+ async onBcmBlur() {
204
+ this.inputElement.blur();
205
+ }
206
+ async onBcmSelect() {
207
+ this.inputElement.select();
208
+ }
209
+ async set(data) {
210
+ await this.setValue(data);
211
+ }
212
+ async get() {
213
+ return this.value || null;
214
+ }
215
+ async setValue(value) {
216
+ this.value = value;
217
+ }
218
+ async setClear() {
219
+ this.value = null;
220
+ await delay(10);
221
+ return Promise.resolve();
222
+ }
223
+ async resetCaption() {
224
+ await delay(10);
225
+ this.caption = this.captionCache;
226
+ this.captionType = this.captionTypeCache;
227
+ this.captionError = null;
228
+ this.inValid = false;
229
+ await delay(10);
230
+ return Promise.resolve();
231
+ }
232
+ setCaption(caption = null, captionType = null) {
233
+ this.caption = caption || this.captionCache;
234
+ this.captionType = captionType || this.captionTypeCache;
235
+ this.captionError = captionType == "error" ? caption : null;
236
+ return Promise.resolve();
237
+ }
238
+ disconnectedCallback() {
239
+ var _a, _b, _c, _d, _e;
240
+ (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.removeEventListener("input", this.onInput.bind(this));
241
+ (_b = this.inputElement) === null || _b === void 0 ? void 0 : _b.removeEventListener("change", this.onChange.bind(this));
242
+ (_c = this.inputElement) === null || _c === void 0 ? void 0 : _c.removeEventListener("focus", this.onFocus.bind(this));
243
+ (_d = this.inputElement) === null || _d === void 0 ? void 0 : _d.removeEventListener("blur", this.onBlur.bind(this));
244
+ (_e = this.inputElement) === null || _e === void 0 ? void 0 : _e.removeEventListener("keydown", this.onKeydown.bind(this));
94
245
  }
95
246
  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 })));
247
+ const { _prefix, _suffix, noCaption, captionType, captionError, caption, required, _id, label, size, fullWidth, clearable, value, placeholder, thousandSeparator, decimalSeparator, decimalScale, fixedDecimalScale, allowNegative, allowLeadingZeros, unitPrefix, unitSuffix, min, max, step, defaultValue, disabled, mode, } = this;
248
+ const isActiveClearable = (value === null || value === void 0 ? void 0 : value.toString().length) > 0 && clearable;
249
+ const isInvalid = this.captionType == "error" || this.inValid;
250
+ const { host, inputContainer, slotClass, clearButton, controls, controlsBtn, controlsBtnDown, controlsBtnUp, controlsDivider, input } = inputStyle({
251
+ size,
252
+ fullWidth,
253
+ clearable: isActiveClearable,
254
+ disabled,
255
+ invalid: isInvalid,
256
+ });
257
+ const numericProps = {
258
+ placeholder,
259
+ thousandSeparator,
260
+ decimalSeparator,
261
+ decimalScale,
262
+ fixedDecimalScale,
263
+ allowNegative,
264
+ allowLeadingZeros,
265
+ prefix: unitPrefix,
266
+ suffix: unitSuffix,
267
+ };
268
+ /* input props */
269
+ const inputProps = {
270
+ min,
271
+ max,
272
+ step,
273
+ value,
274
+ defaultValue,
275
+ };
276
+ const generalProps = Object.assign(Object.assign(Object.assign({ "id": _id + "-base-input", "name": this.name, disabled,
277
+ mode, "aria-label": label, "aria-labelledby": _id + "-label", "getInputRef": el => {
278
+ this.inputElement = el;
279
+ }, "className": input() }, numericProps), inputProps), { "onValueChange": (e) => {
280
+ const { floatValue } = e;
281
+ this.value = floatValue;
282
+ this._onChange.emit(e);
283
+ } });
284
+ return (h(Host, { class: host() }, label && h("bcm-label", { size: size, type: captionType, value: label, required: required, htmlFor: _id + "-base-input", id: _id + "-label" }), h("div", { class: inputContainer() }, h("div", { class: slotClass() }, h("slot", { name: "prefix" }, _prefix && _prefix.length > 0 && h("span", { innerHTML: _prefix }))), h("bcm-react-number", { disabled: disabled, class: "tw-flex-1", options: generalProps }), h("div", { class: slotClass() }, !disabled && isActiveClearable && (h("button", { class: clearButton(), onClick: event => this.handleClear(event) }, h("i", { class: "far fa-times" }))), h("slot", { name: "suffix" }, _suffix && _suffix.length > 0 && h("span", { innerHTML: _suffix })), h("div", { class: controls() }, h("button", { type: "button", disabled: disabled, class: classnames(controlsBtn(), controlsBtnUp()), onClick: this.up.bind(this), "aria-label": "Increase value" }, h("i", { class: "fas fa-caret-up" })), h("div", { class: controlsDivider() }), h("button", { type: "button", disabled: disabled, class: classnames(controlsBtn(), controlsBtnDown()), onClick: this.down.bind(this), "aria-label": "Decrease value" }, h("i", { class: "fas fa-caret-down" }))))), h(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption, customErrorMessage: this.customErrorMessage })));
99
285
  }
100
- static get style() { return numberInputCss; }
101
- }, [0, "bcm-number-input", {
286
+ get el() { return this; }
287
+ static get watchers() { return {
288
+ "value": ["watchValue"]
289
+ }; }
290
+ }, [4, "bcm-number-input", {
102
291
  "_id": [513, "id"],
292
+ "value": [1032],
293
+ "defaultValue": [8, "default-value"],
294
+ "_prefix": [1, "prefix"],
295
+ "_suffix": [1, "suffix"],
103
296
  "size": [1],
104
- "min": [2],
105
- "max": [2],
297
+ "min": [8],
298
+ "max": [8],
106
299
  "step": [2],
107
- "placeholder": [1],
108
300
  "label": [1],
109
- "tooltip": [1025],
110
- "value": [1026],
111
- "disabled": [4],
301
+ "name": [1],
302
+ "fullWidth": [4, "full-width"],
303
+ "clearable": [4],
112
304
  "readonly": [4],
305
+ "disabled": [4],
113
306
  "required": [4],
114
- "pattern": [1025],
307
+ "mode": [1],
308
+ "placeholder": [1],
309
+ "thousandSeparator": [8, "thousand-separator"],
310
+ "decimalSeparator": [1, "decimal-separator"],
311
+ "decimalScale": [2, "decimal-scale"],
312
+ "fixedDecimalScale": [4, "fixed-decimal-scale"],
313
+ "allowNegative": [4, "allow-negative"],
314
+ "allowLeadingZeros": [4, "allow-leading-zeros"],
315
+ "unitPrefix": [1, "unit-prefix"],
316
+ "unitSuffix": [1, "unit-suffix"],
115
317
  "caption": [1025],
116
318
  "noCaption": [1028, "no-caption"],
117
319
  "captionType": [1025, "caption-type"],
118
320
  "captionError": [1025, "caption-error"],
119
321
  "customErrorMessage": [1025, "custom-error-message"],
120
- "prefixIcon": [1025, "prefix-icon"],
121
- "suffixIcon": [1025, "suffix-icon"],
122
322
  "isFocus": [32],
123
- "isError": [32]
323
+ "captionCache": [32],
324
+ "captionTypeCache": [32],
325
+ "valueCache": [32],
326
+ "onBcmFocus": [64],
327
+ "onBcmBlur": [64],
328
+ "onBcmSelect": [64],
329
+ "set": [64],
330
+ "get": [64],
331
+ "setValue": [64],
332
+ "setClear": [64],
333
+ "resetCaption": [64],
334
+ "setCaption": [64]
124
335
  }]);
125
336
  function defineCustomElement$1() {
126
337
  if (typeof customElements === "undefined") {
127
338
  return;
128
339
  }
129
- const components = ["bcm-number-input", "bcm-icon", "bcm-label", "bcm-tooltip"];
340
+ const components = ["bcm-number-input", "bcm-icon", "bcm-label", "bcm-react-number", "bcm-tooltip"];
130
341
  components.forEach(tagName => { switch (tagName) {
131
342
  case "bcm-number-input":
132
343
  if (!customElements.get(tagName)) {
@@ -135,10 +346,15 @@ function defineCustomElement$1() {
135
346
  break;
136
347
  case "bcm-icon":
137
348
  if (!customElements.get(tagName)) {
138
- defineCustomElement$4();
349
+ defineCustomElement$5();
139
350
  }
140
351
  break;
141
352
  case "bcm-label":
353
+ if (!customElements.get(tagName)) {
354
+ defineCustomElement$4();
355
+ }
356
+ break;
357
+ case "bcm-react-number":
142
358
  if (!customElements.get(tagName)) {
143
359
  defineCustomElement$3();
144
360
  }
@@ -0,0 +1,11 @@
1
+ import type { Components, JSX } from "../types/components";
2
+
3
+ interface BcmReactNumber extends Components.BcmReactNumber, HTMLElement {}
4
+ export const BcmReactNumber: {
5
+ prototype: BcmReactNumber;
6
+ new (): BcmReactNumber;
7
+ };
8
+ /**
9
+ * Used to define this component and all nested components recursively.
10
+ */
11
+ export const defineCustomElement: () => void;
@@ -0,0 +1,10 @@
1
+ /*!
2
+ * Built with Stencil
3
+ * Copyright (c) Bromcom.
4
+ */
5
+ import { B as BcmReactNumber$1, d as defineCustomElement$1 } from './react-input.js';
6
+
7
+ const BcmReactNumber = BcmReactNumber$1;
8
+ const defineCustomElement = defineCustomElement$1;
9
+
10
+ export { BcmReactNumber, defineCustomElement };
@@ -21,11 +21,15 @@ function _export(target, all) {
21
21
  });
22
22
  }
23
23
  _export(exports, {
24
- dim: ()=>dim,
25
- default: ()=>_default
24
+ dim: function() {
25
+ return dim;
26
+ },
27
+ default: function() {
28
+ return _default;
29
+ }
26
30
  });
27
- const _picocolors = /*#__PURE__*/ _interopRequireDefault(picocolors_browser);
28
- function _interopRequireDefault(obj) {
31
+ const _picocolors = /*#__PURE__*/ _interop_require_default(picocolors_browser);
32
+ function _interop_require_default(obj) {
29
33
  return obj && obj.__esModule ? obj : {
30
34
  default: obj
31
35
  };
@@ -75,10 +79,12 @@ Object.defineProperty(exports, "__esModule", {
75
79
  });
76
80
  Object.defineProperty(exports, "default", {
77
81
  enumerable: true,
78
- get: ()=>_default
82
+ get: function() {
83
+ return _default;
84
+ }
79
85
  });
80
- const _log = /*#__PURE__*/ _interopRequireDefault(log_1);
81
- function _interopRequireDefault(obj) {
86
+ const _log = /*#__PURE__*/ _interop_require_default(log_1);
87
+ function _interop_require_default(obj) {
82
88
  return obj && obj.__esModule ? obj : {
83
89
  default: obj
84
90
  };
@@ -103,7 +103,8 @@ const BcmForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
103
103
  DATETIME_PICKER: 'datetime-picker',
104
104
  // silinecek komponentler
105
105
  SELECT: 'select',
106
- LISTBOX: 'listbox'
106
+ LISTBOX: 'listbox',
107
+ NUMBER_INPUT: 'number-input',
107
108
  },
108
109
  helpers: {
109
110
  randomId: function () {
@@ -156,7 +157,6 @@ const BcmForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
156
157
  var _a;
157
158
  const validate = this.validation;
158
159
  this.validation = false;
159
- // debugger
160
160
  this.selector = this.el;
161
161
  await this.getInputs();
162
162
  if (data && ((_a = this.inputs) === null || _a === void 0 ? void 0 : _a.length) > 0) {
@@ -5,7 +5,7 @@
5
5
  import { Build } from '@stencil/core/internal/client';
6
6
  import { c as colors } from './colors2.js';
7
7
 
8
- const version = "2.11.1-rc.9-3";
8
+ const version = "2.11.1-rc.9-4";
9
9
 
10
10
  /**
11
11
  * 'status' prop predefined values
@@ -40,6 +40,7 @@ export { BcmForm2 as BcmForm2 } from '../types/components/organism/form-2/form-2
40
40
  export { BcmFormGroup as BcmFormGroup } from '../types/components/organism/form/form-group';
41
41
  export { BcmIcon as BcmIcon } from '../types/components/atoms/icon/icon';
42
42
  export { BcmInput as BcmInput } from '../types/components/molecules/input/input';
43
+ export { BcmInput2 as BcmInput2 } from '../types/components/molecules/input/input2';
43
44
  export { BcmInputCustom as BcmInputCustom } from '../types/components/other/input-custom/input-custom';
44
45
  export { BcmInputDropdown as BcmInputDropdown } from '../types/components/molecules/input-dropdown/input-dropdown';
45
46
  export { BcmItem as BcmItem } from '../types/components/molecules/item/item';
@@ -72,6 +73,7 @@ export { BcmRadioGroup as BcmRadioGroup } from '../types/components/molecules/ra
72
73
  export { BcmRange as BcmRange } from '../types/components/molecules/range/range';
73
74
  export { BcmRcOverflow as BcmRcOverflow } from '../types/components/third-parts/rc-overflow/rc-overflow';
74
75
  export { BcmRcPicker as BcmRcPicker } from '../types/components/third-parts/rc-picker/rc-picker';
76
+ export { BcmReactNumber as BcmReactNumber } from '../types/components/molecules/number-input/react-input';
75
77
  export { BcmResult as BcmResult } from '../types/components/molecules/result/result';
76
78
  export { BcmScrollArea as BcmScrollArea } from '../types/components/other/scroll-area/scroll-area';
77
79
  export { BcmSearch as BcmSearch } from '../types/components/molecules/search/search';
@@ -48,6 +48,7 @@ export { BcmForm2, defineCustomElement as defineCustomElementBcmForm2 } from './
48
48
  export { BcmFormGroup, defineCustomElement as defineCustomElementBcmFormGroup } from './bcm-form-group.js';
49
49
  export { BcmIcon, defineCustomElement as defineCustomElementBcmIcon } from './bcm-icon.js';
50
50
  export { BcmInput, defineCustomElement as defineCustomElementBcmInput } from './bcm-input.js';
51
+ export { BcmInput2, defineCustomElement as defineCustomElementBcmInput2 } from './bcm-input-2.js';
51
52
  export { BcmInputCustom, defineCustomElement as defineCustomElementBcmInputCustom } from './bcm-input-custom.js';
52
53
  export { BcmInputDropdown, defineCustomElement as defineCustomElementBcmInputDropdown } from './bcm-input-dropdown.js';
53
54
  export { BcmItem, defineCustomElement as defineCustomElementBcmItem } from './bcm-item.js';
@@ -80,6 +81,7 @@ export { BcmRadioGroup, defineCustomElement as defineCustomElementBcmRadioGroup
80
81
  export { BcmRange, defineCustomElement as defineCustomElementBcmRange } from './bcm-range.js';
81
82
  export { BcmRcOverflow, defineCustomElement as defineCustomElementBcmRcOverflow } from './bcm-rc-overflow.js';
82
83
  export { BcmRcPicker, defineCustomElement as defineCustomElementBcmRcPicker } from './bcm-rc-picker.js';
84
+ export { BcmReactNumber, defineCustomElement as defineCustomElementBcmReactNumber } from './bcm-react-number.js';
83
85
  export { BcmResult, defineCustomElement as defineCustomElementBcmResult } from './bcm-result.js';
84
86
  export { BcmScrollArea, defineCustomElement as defineCustomElementBcmScrollArea } from './bcm-scroll-area.js';
85
87
  export { BcmSearch, defineCustomElement as defineCustomElementBcmSearch } from './bcm-search.js';