@beaconsoftware/b-format-number 1.2.0

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 (11) hide show
  1. package/dist/b-format-number.d.ts +102 -0
  2. package/dist/b-format-number.d.ts.map +1 -0
  3. package/dist/b-format-number.js +139 -0
  4. package/dist/b-format-number.js.map +1 -0
  5. package/dist/index.d.ts +3 -0
  6. package/dist/index.d.ts.map +1 -0
  7. package/dist/index.js +2 -0
  8. package/dist/index.js.map +1 -0
  9. package/package.json +42 -0
  10. package/src/b-format-number.ts +166 -0
  11. package/src/index.ts +2 -0
package/dist/b-format-number.d.ts ADDED
@@ -0,0 +1,102 @@
1
+ import { LitElement } from 'lit';
2
+ /**
3
+ * The formatting type for the number.
4
+ * - "decimal": Plain number formatting (default)
5
+ * - "percent": Format as percentage
6
+ * - "currency": Format as currency
7
+ */
8
+ export type FormatNumberType = 'decimal' | 'percent' | 'currency';
9
+ /**
10
+ * How to display the currency.
11
+ * - "symbol": Use a localized currency symbol such as € (default)
12
+ * - "code": Use the ISO currency code (e.g., "USD")
13
+ * - "name": Use a localized currency name such as "dollar"
14
+ * - "narrowSymbol": Use a narrow format symbol ("$100" rather than "US$100")
15
+ */
16
+ export type CurrencyDisplay = 'symbol' | 'code' | 'name' | 'narrowSymbol';
17
+ /**
18
+ * A number formatting component that uses the browser's Intl.NumberFormat API.
19
+ *
20
+ * @example
21
+ * ```html
22
+ * <!-- Basic number formatting -->
23
+ * <b-format-number value="1000"></b-format-number>
24
+ * <!-- Output: 1,000 -->
25
+ *
26
+ * <!-- Percent formatting -->
27
+ * <b-format-number value="0.25" type="percent"></b-format-number>
28
+ * <!-- Output: 25% -->
29
+ *
30
+ * <!-- Currency formatting -->
31
+ * <b-format-number value="1234.56" type="currency" currency="USD"></b-format-number>
32
+ * <!-- Output: $1,234.56 -->
33
+ *
34
+ * <!-- Currency with code display -->
35
+ * <b-format-number value="1234.56" type="currency" currency="EUR" currency-display="code"></b-format-number>
36
+ * <!-- Output: EUR 1,234.56 -->
37
+ * ```
38
+ */
39
+ export declare class BFormatNumber extends LitElement {
40
+ /**
41
+ * The number value to format.
42
+ */
43
+ value: number | null;
44
+ /**
45
+ * The formatting type.
46
+ * - "decimal": Plain number formatting (default)
47
+ * - "percent": Format as percentage
48
+ * - "currency": Format as currency
49
+ */
50
+ type: FormatNumberType;
51
+ /**
52
+ * The locale to use for formatting.
53
+ * Defaults to the browser's locale.
54
+ */
55
+ locale?: string;
56
+ /**
57
+ * The currency to use when type is "currency".
58
+ * Must be an ISO 4217 currency code (e.g., "USD", "EUR", "GBP").
59
+ * Defaults to "USD".
60
+ */
61
+ currency: string;
62
+ /**
63
+ * How to display the currency when type is "currency".
64
+ * - "symbol": Use a localized currency symbol such as € (default)
65
+ * - "code": Use the ISO currency code
66
+ * - "name": Use a localized currency name
67
+ * - "narrowSymbol": Use a narrow format symbol
68
+ */
69
+ currencyDisplay: CurrencyDisplay;
70
+ /**
71
+ * The minimum number of integer digits to use.
72
+ * Possible values are from 1 to 21.
73
+ */
74
+ minimumIntegerDigits?: number;
75
+ /**
76
+ * The minimum number of fraction digits to use.
77
+ * Possible values are from 0 to 100.
78
+ */
79
+ minimumFractionDigits?: number;
80
+ /**
81
+ * The maximum number of fraction digits to use.
82
+ * Possible values are from 0 to 100.
83
+ */
84
+ maximumFractionDigits?: number;
85
+ /**
86
+ * Whether to use grouping separators (e.g., thousands separators).
87
+ * Defaults to true.
88
+ */
89
+ useGrouping: boolean;
90
+ /**
91
+ * Get the formatted number string.
92
+ */
93
+ get formattedValue(): string;
94
+ protected createRenderRoot(): HTMLElement | DocumentFragment;
95
+ render(): import("lit-html").TemplateResult<1>;
96
+ }
97
+ declare global {
98
+ interface HTMLElementTagNameMap {
99
+ 'b-format-number': BFormatNumber;
100
+ }
101
+ }
102
+ //# sourceMappingURL=b-format-number.d.ts.map
package/dist/b-format-number.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"b-format-number.d.ts","sourceRoot":"","sources":["../src/b-format-number.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAGvC;;;;;GAKG;AACH,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AAElE;;;;;;GAMG;AACH,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,cAAc,CAAC;AAE1E;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C;;OAEG;IAEH,KAAK,EAAE,MAAM,GAAG,IAAI,CAAQ;IAE5B;;;;;OAKG;IAEH,IAAI,EAAE,gBAAgB,CAAa;IAEnC;;;OAGG;IAEH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;;OAIG;IAEH,QAAQ,SAAS;IAEjB;;;;;;OAMG;IAEH,eAAe,EAAE,eAAe,CAAY;IAE5C;;;OAGG;IAEH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAE9B;;;OAGG;IAEH,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAE/B;;;OAGG;IAEH,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAE/B;;;OAGG;IAEH,WAAW,UAAQ;IAEnB;;OAEG;IACH,IAAI,cAAc,IAAI,MAAM,CAkC3B;IAGD,SAAS,CAAC,gBAAgB,IAAI,WAAW,GAAG,gBAAgB;IAI5D,MAAM;CAGP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}
package/dist/b-format-number.js ADDED
@@ -0,0 +1,139 @@
1
+ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
+ else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
6
+ };
7
+ import { LitElement, html } from 'lit';
8
+ import { customElement, property } from 'lit/decorators.js';
9
+ /**
10
+ * A number formatting component that uses the browser's Intl.NumberFormat API.
11
+ *
12
+ * @example
13
+ * ```html
14
+ * <!-- Basic number formatting -->
15
+ * <b-format-number value="1000"></b-format-number>
16
+ * <!-- Output: 1,000 -->
17
+ *
18
+ * <!-- Percent formatting -->
19
+ * <b-format-number value="0.25" type="percent"></b-format-number>
20
+ * <!-- Output: 25% -->
21
+ *
22
+ * <!-- Currency formatting -->
23
+ * <b-format-number value="1234.56" type="currency" currency="USD"></b-format-number>
24
+ * <!-- Output: $1,234.56 -->
25
+ *
26
+ * <!-- Currency with code display -->
27
+ * <b-format-number value="1234.56" type="currency" currency="EUR" currency-display="code"></b-format-number>
28
+ * <!-- Output: EUR 1,234.56 -->
29
+ * ```
30
+ */
31
+ let BFormatNumber = class BFormatNumber extends LitElement {
32
+ constructor() {
33
+ super(...arguments);
34
+ /**
35
+ * The number value to format.
36
+ */
37
+ this.value = null;
38
+ /**
39
+ * The formatting type.
40
+ * - "decimal": Plain number formatting (default)
41
+ * - "percent": Format as percentage
42
+ * - "currency": Format as currency
43
+ */
44
+ this.type = 'decimal';
45
+ /**
46
+ * The currency to use when type is "currency".
47
+ * Must be an ISO 4217 currency code (e.g., "USD", "EUR", "GBP").
48
+ * Defaults to "USD".
49
+ */
50
+ this.currency = 'USD';
51
+ /**
52
+ * How to display the currency when type is "currency".
53
+ * - "symbol": Use a localized currency symbol such as € (default)
54
+ * - "code": Use the ISO currency code
55
+ * - "name": Use a localized currency name
56
+ * - "narrowSymbol": Use a narrow format symbol
57
+ */
58
+ this.currencyDisplay = 'symbol';
59
+ /**
60
+ * Whether to use grouping separators (e.g., thousands separators).
61
+ * Defaults to true.
62
+ */
63
+ this.useGrouping = true;
64
+ }
65
+ /**
66
+ * Get the formatted number string.
67
+ */
68
+ get formattedValue() {
69
+ if (this.value === null || this.value === undefined || isNaN(this.value)) {
70
+ return '';
71
+ }
72
+ try {
73
+ const options = {
74
+ style: this.type,
75
+ useGrouping: this.useGrouping,
76
+ };
77
+ // Add currency options if type is currency
78
+ if (this.type === 'currency') {
79
+ options.currency = this.currency;
80
+ options.currencyDisplay = this.currencyDisplay;
81
+ }
82
+ // Add digit options if specified
83
+ if (this.minimumIntegerDigits !== undefined) {
84
+ options.minimumIntegerDigits = this.minimumIntegerDigits;
85
+ }
86
+ if (this.minimumFractionDigits !== undefined) {
87
+ options.minimumFractionDigits = this.minimumFractionDigits;
88
+ }
89
+ if (this.maximumFractionDigits !== undefined) {
90
+ options.maximumFractionDigits = this.maximumFractionDigits;
91
+ }
92
+ const formatter = new Intl.NumberFormat(this.locale, options);
93
+ return formatter.format(this.value);
94
+ }
95
+ catch (error) {
96
+ console.error('BFormatNumber: Error formatting number', error);
97
+ return String(this.value);
98
+ }
99
+ }
100
+ // Use Light DOM rendering - no Shadow DOM needed for simple text output
101
+ createRenderRoot() {
102
+ return this;
103
+ }
104
+ render() {
105
+ return html `${this.formattedValue}`;
106
+ }
107
+ };
108
+ __decorate([
109
+ property({ type: Number })
110
+ ], BFormatNumber.prototype, "value", void 0);
111
+ __decorate([
112
+ property({ type: String })
113
+ ], BFormatNumber.prototype, "type", void 0);
114
+ __decorate([
115
+ property({ type: String })
116
+ ], BFormatNumber.prototype, "locale", void 0);
117
+ __decorate([
118
+ property({ type: String })
119
+ ], BFormatNumber.prototype, "currency", void 0);
120
+ __decorate([
121
+ property({ type: String, attribute: 'currency-display' })
122
+ ], BFormatNumber.prototype, "currencyDisplay", void 0);
123
+ __decorate([
124
+ property({ type: Number, attribute: 'minimum-integer-digits' })
125
+ ], BFormatNumber.prototype, "minimumIntegerDigits", void 0);
126
+ __decorate([
127
+ property({ type: Number, attribute: 'minimum-fraction-digits' })
128
+ ], BFormatNumber.prototype, "minimumFractionDigits", void 0);
129
+ __decorate([
130
+ property({ type: Number, attribute: 'maximum-fraction-digits' })
131
+ ], BFormatNumber.prototype, "maximumFractionDigits", void 0);
132
+ __decorate([
133
+ property({ type: Boolean, attribute: 'use-grouping' })
134
+ ], BFormatNumber.prototype, "useGrouping", void 0);
135
+ BFormatNumber = __decorate([
136
+ customElement('b-format-number')
137
+ ], BFormatNumber);
138
+ export { BFormatNumber };
139
+ //# sourceMappingURL=b-format-number.js.map
package/dist/b-format-number.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"b-format-number.js","sourceRoot":"","sources":["../src/b-format-number.ts"],"names":[],"mappings":"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"}
package/dist/index.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ export { BFormatNumber } from './b-format-number.js';
2
+ export type { FormatNumberType, CurrencyDisplay } from './b-format-number.js';
3
+ //# sourceMappingURL=index.d.ts.map
package/dist/index.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,YAAY,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC"}
package/dist/index.js ADDED
@@ -0,0 +1,2 @@
1
+ export { BFormatNumber } from './b-format-number.js';
2
+ //# sourceMappingURL=index.js.map
package/dist/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC"}
package/package.json ADDED
@@ -0,0 +1,42 @@
1
+ {
2
+ "name": "@beaconsoftware/b-format-number",
3
+ "version": "1.2.0",
4
+ "description": "A number formatting web component using Intl.NumberFormat",
5
+ "type": "module",
6
+ "main": "dist/index.js",
7
+ "module": "dist/index.js",
8
+ "types": "dist/index.d.ts",
9
+ "exports": {
10
+ ".": {
11
+ "types": "./dist/index.d.ts",
12
+ "import": "./dist/index.js"
13
+ }
14
+ },
15
+ "files": [
16
+ "dist",
17
+ "src"
18
+ ],
19
+ "scripts": {
20
+ "build": "tsc",
21
+ "build:watch": "tsc --watch",
22
+ "clean": "rm -rf dist"
23
+ },
24
+ "dependencies": {
25
+ "lit": "^3.1.0"
26
+ },
27
+ "devDependencies": {
28
+ "typescript": "^5.3.0"
29
+ },
30
+ "keywords": [
31
+ "web-components",
32
+ "lit",
33
+ "number",
34
+ "format",
35
+ "intl",
36
+ "beacon"
37
+ ],
38
+ "license": "MIT",
39
+ "publishConfig": {
40
+ "access": "public"
41
+ }
42
+ }
package/src/b-format-number.ts ADDED
@@ -0,0 +1,166 @@
1
+ import { LitElement, html } from 'lit';
2
+ import { customElement, property } from 'lit/decorators.js';
3
+
4
+ /**
5
+ * The formatting type for the number.
6
+ * - "decimal": Plain number formatting (default)
7
+ * - "percent": Format as percentage
8
+ * - "currency": Format as currency
9
+ */
10
+ export type FormatNumberType = 'decimal' | 'percent' | 'currency';
11
+
12
+ /**
13
+ * How to display the currency.
14
+ * - "symbol": Use a localized currency symbol such as € (default)
15
+ * - "code": Use the ISO currency code (e.g., "USD")
16
+ * - "name": Use a localized currency name such as "dollar"
17
+ * - "narrowSymbol": Use a narrow format symbol ("$100" rather than "US$100")
18
+ */
19
+ export type CurrencyDisplay = 'symbol' | 'code' | 'name' | 'narrowSymbol';
20
+
21
+ /**
22
+ * A number formatting component that uses the browser's Intl.NumberFormat API.
23
+ *
24
+ * @example
25
+ * ```html
26
+ * <!-- Basic number formatting -->
27
+ * <b-format-number value="1000"></b-format-number>
28
+ * <!-- Output: 1,000 -->
29
+ *
30
+ * <!-- Percent formatting -->
31
+ * <b-format-number value="0.25" type="percent"></b-format-number>
32
+ * <!-- Output: 25% -->
33
+ *
34
+ * <!-- Currency formatting -->
35
+ * <b-format-number value="1234.56" type="currency" currency="USD"></b-format-number>
36
+ * <!-- Output: $1,234.56 -->
37
+ *
38
+ * <!-- Currency with code display -->
39
+ * <b-format-number value="1234.56" type="currency" currency="EUR" currency-display="code"></b-format-number>
40
+ * <!-- Output: EUR 1,234.56 -->
41
+ * ```
42
+ */
43
+ @customElement('b-format-number')
44
+ export class BFormatNumber extends LitElement {
45
+ /**
46
+ * The number value to format.
47
+ */
48
+ @property({ type: Number })
49
+ value: number | null = null;
50
+
51
+ /**
52
+ * The formatting type.
53
+ * - "decimal": Plain number formatting (default)
54
+ * - "percent": Format as percentage
55
+ * - "currency": Format as currency
56
+ */
57
+ @property({ type: String })
58
+ type: FormatNumberType = 'decimal';
59
+
60
+ /**
61
+ * The locale to use for formatting.
62
+ * Defaults to the browser's locale.
63
+ */
64
+ @property({ type: String })
65
+ locale?: string;
66
+
67
+ /**
68
+ * The currency to use when type is "currency".
69
+ * Must be an ISO 4217 currency code (e.g., "USD", "EUR", "GBP").
70
+ * Defaults to "USD".
71
+ */
72
+ @property({ type: String })
73
+ currency = 'USD';
74
+
75
+ /**
76
+ * How to display the currency when type is "currency".
77
+ * - "symbol": Use a localized currency symbol such as € (default)
78
+ * - "code": Use the ISO currency code
79
+ * - "name": Use a localized currency name
80
+ * - "narrowSymbol": Use a narrow format symbol
81
+ */
82
+ @property({ type: String, attribute: 'currency-display' })
83
+ currencyDisplay: CurrencyDisplay = 'symbol';
84
+
85
+ /**
86
+ * The minimum number of integer digits to use.
87
+ * Possible values are from 1 to 21.
88
+ */
89
+ @property({ type: Number, attribute: 'minimum-integer-digits' })
90
+ minimumIntegerDigits?: number;
91
+
92
+ /**
93
+ * The minimum number of fraction digits to use.
94
+ * Possible values are from 0 to 100.
95
+ */
96
+ @property({ type: Number, attribute: 'minimum-fraction-digits' })
97
+ minimumFractionDigits?: number;
98
+
99
+ /**
100
+ * The maximum number of fraction digits to use.
101
+ * Possible values are from 0 to 100.
102
+ */
103
+ @property({ type: Number, attribute: 'maximum-fraction-digits' })
104
+ maximumFractionDigits?: number;
105
+
106
+ /**
107
+ * Whether to use grouping separators (e.g., thousands separators).
108
+ * Defaults to true.
109
+ */
110
+ @property({ type: Boolean, attribute: 'use-grouping' })
111
+ useGrouping = true;
112
+
113
+ /**
114
+ * Get the formatted number string.
115
+ */
116
+ get formattedValue(): string {
117
+ if (this.value === null || this.value === undefined || isNaN(this.value)) {
118
+ return '';
119
+ }
120
+
121
+ try {
122
+ const options: Intl.NumberFormatOptions = {
123
+ style: this.type,
124
+ useGrouping: this.useGrouping,
125
+ };
126
+
127
+ // Add currency options if type is currency
128
+ if (this.type === 'currency') {
129
+ options.currency = this.currency;
130
+ options.currencyDisplay = this.currencyDisplay;
131
+ }
132
+
133
+ // Add digit options if specified
134
+ if (this.minimumIntegerDigits !== undefined) {
135
+ options.minimumIntegerDigits = this.minimumIntegerDigits;
136
+ }
137
+ if (this.minimumFractionDigits !== undefined) {
138
+ options.minimumFractionDigits = this.minimumFractionDigits;
139
+ }
140
+ if (this.maximumFractionDigits !== undefined) {
141
+ options.maximumFractionDigits = this.maximumFractionDigits;
142
+ }
143
+
144
+ const formatter = new Intl.NumberFormat(this.locale, options);
145
+ return formatter.format(this.value);
146
+ } catch (error) {
147
+ console.error('BFormatNumber: Error formatting number', error);
148
+ return String(this.value);
149
+ }
150
+ }
151
+
152
+ // Use Light DOM rendering - no Shadow DOM needed for simple text output
153
+ protected createRenderRoot(): HTMLElement | DocumentFragment {
154
+ return this;
155
+ }
156
+
157
+ render() {
158
+ return html`${this.formattedValue}`;
159
+ }
160
+ }
161
+
162
+ declare global {
163
+ interface HTMLElementTagNameMap {
164
+ 'b-format-number': BFormatNumber;
165
+ }
166
+ }
package/src/index.ts ADDED
@@ -0,0 +1,2 @@
1
+ export { BFormatNumber } from './b-format-number.js';
2
+ export type { FormatNumberType, CurrencyDisplay } from './b-format-number.js';