@flexzap/misc 1.0.1 → 1.1.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.
- package/README.md +12 -19
- package/fesm2022/flexzap-misc.mjs +49 -10
- package/fesm2022/flexzap-misc.mjs.map +1 -1
- package/package.json +1 -1
- package/types/flexzap-misc.d.ts +44 -5
package/README.md
CHANGED
|
@@ -29,19 +29,12 @@ import { ZapSpinner, ZapProgressBar } from '@flexzap/misc';
|
|
|
29
29
|
template: `
|
|
30
30
|
<!-- Simple spinner -->
|
|
31
31
|
<zap-spinner />
|
|
32
|
-
|
|
32
|
+
|
|
33
33
|
<!-- Progress bar with percentage -->
|
|
34
|
-
<zap-progress-bar
|
|
35
|
-
|
|
36
|
-
[min]="0"
|
|
37
|
-
[max]="100"
|
|
38
|
-
[format]="{ symbol: '%' }" />
|
|
39
|
-
|
|
34
|
+
<zap-progress-bar [value]="currentValue" [min]="0" [max]="100" [format]="{ symbol: '%' }" />
|
|
35
|
+
|
|
40
36
|
<!-- Custom range progress bar -->
|
|
41
|
-
<zap-progress-bar
|
|
42
|
-
[value]="progress"
|
|
43
|
-
[min]="10"
|
|
44
|
-
[max]="50" />
|
|
37
|
+
<zap-progress-bar [value]="progress" [min]="10" [max]="50" />
|
|
45
38
|
`
|
|
46
39
|
})
|
|
47
40
|
export class MyComponent {
|
|
@@ -69,12 +62,12 @@ An animated progress bar component with customizable range and formatting.
|
|
|
69
62
|
|
|
70
63
|
#### Inputs
|
|
71
64
|
|
|
72
|
-
| Property | Type
|
|
73
|
-
|
|
74
|
-
| `value`
|
|
75
|
-
| `min`
|
|
76
|
-
| `max`
|
|
77
|
-
| `format` | `Partial<ZapNumericInterface>` | `{}`
|
|
65
|
+
| Property | Type | Default | Description |
|
|
66
|
+
| -------- | ------------------------------ | ------- | ---------------------------------------------------------------- |
|
|
67
|
+
| `value` | `number` | `0` | Current progress value |
|
|
68
|
+
| `min` | `number` | `0` | Minimum value for the progress range |
|
|
69
|
+
| `max` | `number` | `100` | Maximum value for the progress range |
|
|
70
|
+
| `format` | `Partial<ZapNumericInterface>` | `{}` | Formatting options for the displayed value (uses @flexzap/pipes) |
|
|
78
71
|
|
|
79
72
|
#### Features
|
|
80
73
|
|
|
@@ -130,8 +123,8 @@ npm run misc:test:watch # Run tests in watch mode (no coverage)
|
|
|
130
123
|
|
|
131
124
|
```bash
|
|
132
125
|
# From the monorepo root
|
|
133
|
-
npm run misc:build # Build
|
|
134
|
-
ng build @flexzap/misc # Build
|
|
126
|
+
npm run misc:build # Build directly
|
|
127
|
+
ng build @flexzap/misc # Build using Angular CLI
|
|
135
128
|
```
|
|
136
129
|
|
|
137
130
|
### Code Scaffolding
|
|
@@ -1,20 +1,41 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import {
|
|
2
|
+
import { input, signal, computed, effect, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
3
|
import { ZapNumeric } from '@flexzap/pipes';
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
5
|
+
/**
|
|
6
|
+
* Component that displays a progress bar with a calculated percentage width.
|
|
7
|
+
* Supports custom range (min/max), value formatting, and smooth animation.
|
|
8
|
+
*
|
|
9
|
+
* @example
|
|
10
|
+
* ```html
|
|
11
|
+
* <zap-progress-bar
|
|
12
|
+
* [value]="50"
|
|
13
|
+
* [max]="200"
|
|
14
|
+
* [format]="{ style: 'currency', currency: 'USD' }"
|
|
15
|
+
* ></zap-progress-bar>
|
|
16
|
+
* ```
|
|
17
|
+
*/
|
|
14
18
|
class ZapProgressBar {
|
|
19
|
+
/**
|
|
20
|
+
* The current value of the progress bar.
|
|
21
|
+
* @default 0
|
|
22
|
+
*/
|
|
15
23
|
value = input(0, ...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
24
|
+
/**
|
|
25
|
+
* The minimum value of the range.
|
|
26
|
+
* @default 0
|
|
27
|
+
*/
|
|
16
28
|
min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : []));
|
|
29
|
+
/**
|
|
30
|
+
* The maximum value of the range.
|
|
31
|
+
* @default 100
|
|
32
|
+
*/
|
|
17
33
|
max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : []));
|
|
34
|
+
/**
|
|
35
|
+
* Optional formatting configuration for the displayed value.
|
|
36
|
+
* Uses ZapNumericInterface for format options.
|
|
37
|
+
* @default {}
|
|
38
|
+
*/
|
|
18
39
|
format = input({}, ...(ngDevMode ? [{ debugName: "format" }] : []));
|
|
19
40
|
size = signal(0, ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
20
41
|
width = computed(() => ({
|
|
@@ -40,6 +61,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
40
61
|
args: [{ selector: 'zap-progress-bar', imports: [ZapNumeric], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"zap-progress-bar\">\n <div [style]=\"width()\">\n <span>{{ value() | ZapNumeric: format() }}</span>\n </div>\n</div>\n", styles: [".zap-progress-bar div{max-width:100%}:host{display:block}\n"] }]
|
|
41
62
|
}], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }] } });
|
|
42
63
|
|
|
64
|
+
/**
|
|
65
|
+
* Component that displays a loading spinner.
|
|
66
|
+
* Useful for indicating active processes or data loading states.
|
|
67
|
+
*
|
|
68
|
+
* @example
|
|
69
|
+
* ```html
|
|
70
|
+
* <zap-spinner></zap-spinner>
|
|
71
|
+
* ```
|
|
72
|
+
*/
|
|
73
|
+
class ZapSpinner {
|
|
74
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ZapSpinner, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
75
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: ZapSpinner, isStandalone: true, selector: "zap-spinner", ngImport: i0, template: "<div class=\"zap-spinner\">\n <div>\n <ng-content></ng-content>\n </div>\n <div></div>\n</div>\n", styles: [".zap-spinner{display:flex;justify-content:center;align-items:center;flex:1}.zap-spinner div:nth-child(1){position:absolute;z-index:1}.zap-spinner div:nth-child(2){width:100%;height:100%}:host{width:100%;height:100%;display:flex;position:absolute;left:0;top:0;z-index:10}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
76
|
+
}
|
|
77
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ZapSpinner, decorators: [{
|
|
78
|
+
type: Component,
|
|
79
|
+
args: [{ selector: 'zap-spinner', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"zap-spinner\">\n <div>\n <ng-content></ng-content>\n </div>\n <div></div>\n</div>\n", styles: [".zap-spinner{display:flex;justify-content:center;align-items:center;flex:1}.zap-spinner div:nth-child(1){position:absolute;z-index:1}.zap-spinner div:nth-child(2){width:100%;height:100%}:host{width:100%;height:100%;display:flex;position:absolute;left:0;top:0;z-index:10}\n"] }]
|
|
80
|
+
}] });
|
|
81
|
+
|
|
43
82
|
/*
|
|
44
83
|
* Public API Surface of misc
|
|
45
84
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"flexzap-misc.mjs","sources":["../../../../projects/flexzap/misc/src/lib/
|
|
1
|
+
{"version":3,"file":"flexzap-misc.mjs","sources":["../../../../projects/flexzap/misc/src/lib/progress-bar/progress-bar.ts","../../../../projects/flexzap/misc/src/lib/progress-bar/progress-bar.html","../../../../projects/flexzap/misc/src/lib/spinner/spinner.ts","../../../../projects/flexzap/misc/src/lib/spinner/spinner.html","../../../../projects/flexzap/misc/src/public-api.ts","../../../../projects/flexzap/misc/src/flexzap-misc.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, effect, input, signal } from '@angular/core';\n\nimport { ZapNumeric, ZapNumericInterface } from '@flexzap/pipes';\n\n/**\n * Component that displays a progress bar with a calculated percentage width.\n * Supports custom range (min/max), value formatting, and smooth animation.\n *\n * @example\n * ```html\n * <zap-progress-bar\n * [value]=\"50\"\n * [max]=\"200\"\n * [format]=\"{ style: 'currency', currency: 'USD' }\"\n * ></zap-progress-bar>\n * ```\n */\n@Component({\n selector: 'zap-progress-bar',\n imports: [ZapNumeric],\n templateUrl: './progress-bar.html',\n styleUrl: './progress-bar.scss',\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class ZapProgressBar {\n /**\n * The current value of the progress bar.\n * @default 0\n */\n readonly value = input<number>(0);\n\n /**\n * The minimum value of the range.\n * @default 0\n */\n readonly min = input<number>(0);\n\n /**\n * The maximum value of the range.\n * @default 100\n */\n readonly max = input<number>(100);\n\n /**\n * Optional formatting configuration for the displayed value.\n * Uses ZapNumericInterface for format options.\n * @default {}\n */\n readonly format = input<Partial<ZapNumericInterface>>({});\n\n private size = signal<number>(0);\n\n width = computed(() => ({\n width: `${this.size()}%`\n }));\n\n constructor() {\n // Effect to animate progress bar with CSS transition delay\n effect(() => {\n const targetSize = this.calculatePercentage();\n setTimeout(() => this.size.set(targetSize), 100);\n });\n }\n\n private calculatePercentage(): number {\n if (this.max() <= this.min()) return 0;\n return Math.trunc(((this.value() - this.min()) / (this.max() - this.min())) * 100);\n }\n}\n","<div class=\"zap-progress-bar\">\n <div [style]=\"width()\">\n <span>{{ value() | ZapNumeric: format() }}</span>\n </div>\n</div>\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n/**\n * Component that displays a loading spinner.\n * Useful for indicating active processes or data loading states.\n *\n * @example\n * ```html\n * <zap-spinner></zap-spinner>\n * ```\n */\n@Component({\n selector: 'zap-spinner',\n templateUrl: './spinner.html',\n styleUrl: './spinner.scss',\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class ZapSpinner {}\n","<div class=\"zap-spinner\">\n <div>\n <ng-content></ng-content>\n </div>\n <div></div>\n</div>\n","/*\n * Public API Surface of misc\n */\n\nexport * from './lib/progress-bar/index';\nexport * from './lib/spinner/index';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;AAIA;;;;;;;;;;;;AAYG;MAQU,cAAc,CAAA;AACzB;;;AAGG;AACM,IAAA,KAAK,GAAG,KAAK,CAAS,CAAC,iDAAC;AAEjC;;;AAGG;AACM,IAAA,GAAG,GAAG,KAAK,CAAS,CAAC,+CAAC;AAE/B;;;AAGG;AACM,IAAA,GAAG,GAAG,KAAK,CAAS,GAAG,+CAAC;AAEjC;;;;AAIG;AACM,IAAA,MAAM,GAAG,KAAK,CAA+B,EAAE,kDAAC;AAEjD,IAAA,IAAI,GAAG,MAAM,CAAS,CAAC,gDAAC;AAEhC,IAAA,KAAK,GAAG,QAAQ,CAAC,OAAO;AACtB,QAAA,KAAK,EAAE,CAAA,EAAG,IAAI,CAAC,IAAI,EAAE,CAAA,CAAA;AACtB,KAAA,CAAC,iDAAC;AAEH,IAAA,WAAA,GAAA;;QAEE,MAAM,CAAC,MAAK;AACV,YAAA,MAAM,UAAU,GAAG,IAAI,CAAC,mBAAmB,EAAE;AAC7C,YAAA,UAAU,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,GAAG,CAAC;AAClD,QAAA,CAAC,CAAC;IACJ;IAEQ,mBAAmB,GAAA;QACzB,IAAI,IAAI,CAAC,GAAG,EAAE,IAAI,IAAI,CAAC,GAAG,EAAE;AAAE,YAAA,OAAO,CAAC;AACtC,QAAA,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,GAAG,IAAI,CAAC,GAAG,EAAE,KAAK,IAAI,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,GAAG,CAAC;IACpF;uGA3CW,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAd,cAAc,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,GAAA,EAAA,EAAA,iBAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,GAAA,EAAA,EAAA,iBAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECxB3B,0IAKA,EAAA,MAAA,EAAA,CAAA,6DAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EDcY,UAAU,EAAA,IAAA,EAAA,YAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAKT,cAAc,EAAA,UAAA,EAAA,CAAA;kBAP1B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,kBAAkB,WACnB,CAAC,UAAU,CAAC,EAAA,eAAA,EAGJ,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,0IAAA,EAAA,MAAA,EAAA,CAAA,6DAAA,CAAA,EAAA;;;AEpBjD;;;;;;;;AAQG;MAOU,UAAU,CAAA;uGAAV,UAAU,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAV,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAU,uECjBvB,wGAMA,EAAA,MAAA,EAAA,CAAA,kRAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FDWa,UAAU,EAAA,UAAA,EAAA,CAAA;kBANtB,SAAS;+BACE,aAAa,EAAA,eAAA,EAGN,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,wGAAA,EAAA,MAAA,EAAA,CAAA,kRAAA,CAAA,EAAA;;;AEfjD;;AAEG;;ACFH;;AAEG;;;;"}
|
package/package.json
CHANGED
package/types/flexzap-misc.d.ts
CHANGED
|
@@ -1,15 +1,40 @@
|
|
|
1
1
|
import * as _angular_core from '@angular/core';
|
|
2
2
|
import { ZapNumericInterface } from '@flexzap/pipes';
|
|
3
3
|
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
4
|
+
/**
|
|
5
|
+
* Component that displays a progress bar with a calculated percentage width.
|
|
6
|
+
* Supports custom range (min/max), value formatting, and smooth animation.
|
|
7
|
+
*
|
|
8
|
+
* @example
|
|
9
|
+
* ```html
|
|
10
|
+
* <zap-progress-bar
|
|
11
|
+
* [value]="50"
|
|
12
|
+
* [max]="200"
|
|
13
|
+
* [format]="{ style: 'currency', currency: 'USD' }"
|
|
14
|
+
* ></zap-progress-bar>
|
|
15
|
+
* ```
|
|
16
|
+
*/
|
|
9
17
|
declare class ZapProgressBar {
|
|
18
|
+
/**
|
|
19
|
+
* The current value of the progress bar.
|
|
20
|
+
* @default 0
|
|
21
|
+
*/
|
|
10
22
|
readonly value: _angular_core.InputSignal<number>;
|
|
23
|
+
/**
|
|
24
|
+
* The minimum value of the range.
|
|
25
|
+
* @default 0
|
|
26
|
+
*/
|
|
11
27
|
readonly min: _angular_core.InputSignal<number>;
|
|
28
|
+
/**
|
|
29
|
+
* The maximum value of the range.
|
|
30
|
+
* @default 100
|
|
31
|
+
*/
|
|
12
32
|
readonly max: _angular_core.InputSignal<number>;
|
|
33
|
+
/**
|
|
34
|
+
* Optional formatting configuration for the displayed value.
|
|
35
|
+
* Uses ZapNumericInterface for format options.
|
|
36
|
+
* @default {}
|
|
37
|
+
*/
|
|
13
38
|
readonly format: _angular_core.InputSignal<Partial<ZapNumericInterface>>;
|
|
14
39
|
private size;
|
|
15
40
|
width: _angular_core.Signal<{
|
|
@@ -21,4 +46,18 @@ declare class ZapProgressBar {
|
|
|
21
46
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ZapProgressBar, "zap-progress-bar", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
22
47
|
}
|
|
23
48
|
|
|
49
|
+
/**
|
|
50
|
+
* Component that displays a loading spinner.
|
|
51
|
+
* Useful for indicating active processes or data loading states.
|
|
52
|
+
*
|
|
53
|
+
* @example
|
|
54
|
+
* ```html
|
|
55
|
+
* <zap-spinner></zap-spinner>
|
|
56
|
+
* ```
|
|
57
|
+
*/
|
|
58
|
+
declare class ZapSpinner {
|
|
59
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ZapSpinner, never>;
|
|
60
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ZapSpinner, "zap-spinner", never, {}, {}, never, ["*"], true, never>;
|
|
61
|
+
}
|
|
62
|
+
|
|
24
63
|
export { ZapProgressBar, ZapSpinner };
|