ngblock 0.0.0-stage → 0.0.2
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 +45 -2
- package/fesm2022/ngblock.mjs +78 -0
- package/fesm2022/ngblock.mjs.map +1 -0
- package/package.json +26 -3
- package/types/ngblock.d.ts +18 -0
package/README.md
CHANGED
|
@@ -1,3 +1,46 @@
|
|
|
1
|
-
#
|
|
1
|
+
# ngblock
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
An Angular library packaged in Angular Package Format for use in Angular applications.
|
|
4
|
+
|
|
5
|
+
## Install
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install ngblock
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Use
|
|
12
|
+
|
|
13
|
+
Import the standalone button component where you need it:
|
|
14
|
+
|
|
15
|
+
```ts
|
|
16
|
+
import { Component } from '@angular/core';
|
|
17
|
+
import { ButtonComponent } from 'ngblock';
|
|
18
|
+
|
|
19
|
+
@Component({
|
|
20
|
+
imports: [ButtonComponent],
|
|
21
|
+
template: `
|
|
22
|
+
<ngb-button (click)="save()">Save</ngb-button>
|
|
23
|
+
<ngb-button type="submit" [disabled]="isSaving">Submit</ngb-button>
|
|
24
|
+
`,
|
|
25
|
+
})
|
|
26
|
+
export class ExampleComponent {
|
|
27
|
+
isSaving = false;
|
|
28
|
+
|
|
29
|
+
save(): void {
|
|
30
|
+
// Handle the action.
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
`ngb-button` projects its content into a native button. It supports the native
|
|
36
|
+
button types through `type` (`button`, `submit`, or `reset`) and a `disabled`
|
|
37
|
+
input. The default type is `button`.
|
|
38
|
+
|
|
39
|
+
## Develop
|
|
40
|
+
|
|
41
|
+
From the Nx workspace root:
|
|
42
|
+
|
|
43
|
+
```bash
|
|
44
|
+
npx nx build ngblock
|
|
45
|
+
npx nx test ngblock
|
|
46
|
+
```
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import * as i0 from "@angular/core";
|
|
2
|
+
import { ChangeDetectionStrategy, Component, input } from "@angular/core";
|
|
3
|
+
var ButtonComponent = class ButtonComponent {
|
|
4
|
+
type = input("button", ...ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []);
|
|
5
|
+
disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
|
|
6
|
+
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
7
|
+
minVersion: "12.0.0",
|
|
8
|
+
version: "22.2.4",
|
|
9
|
+
ngImport: i0,
|
|
10
|
+
type: ButtonComponent,
|
|
11
|
+
deps: [],
|
|
12
|
+
target: i0.ɵɵFactoryTarget.Component
|
|
13
|
+
});
|
|
14
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({
|
|
15
|
+
minVersion: "17.1.0",
|
|
16
|
+
version: "22.2.4",
|
|
17
|
+
type: ButtonComponent,
|
|
18
|
+
isStandalone: true,
|
|
19
|
+
selector: "ngb-button",
|
|
20
|
+
inputs: {
|
|
21
|
+
type: {
|
|
22
|
+
classPropertyName: "type",
|
|
23
|
+
publicName: "type",
|
|
24
|
+
isSignal: true,
|
|
25
|
+
isRequired: false,
|
|
26
|
+
transformFunction: null
|
|
27
|
+
},
|
|
28
|
+
disabled: {
|
|
29
|
+
classPropertyName: "disabled",
|
|
30
|
+
publicName: "disabled",
|
|
31
|
+
isSignal: true,
|
|
32
|
+
isRequired: false,
|
|
33
|
+
transformFunction: null
|
|
34
|
+
}
|
|
35
|
+
},
|
|
36
|
+
ngImport: i0,
|
|
37
|
+
template: "<button class=\"ngblock-button\" [type]=\"type()\" [disabled]=\"disabled()\">\n <ng-content />\n</button>\n",
|
|
38
|
+
styles: [":host{display:inline-block}.ngblock-button{padding:.5rem .875rem;border:1px solid currentColor;border-radius:.25rem;background:transparent;color:inherit;cursor:pointer;font:inherit}.ngblock-button:focus-visible{outline:2px solid currentColor;outline-offset:2px}.ngblock-button:disabled{cursor:not-allowed;opacity:.6}\n"],
|
|
39
|
+
changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
40
|
+
});
|
|
41
|
+
};
|
|
42
|
+
i0.ɵɵngDeclareClassMetadata({
|
|
43
|
+
minVersion: "12.0.0",
|
|
44
|
+
version: "22.2.4",
|
|
45
|
+
ngImport: i0,
|
|
46
|
+
type: ButtonComponent,
|
|
47
|
+
decorators: [{
|
|
48
|
+
type: Component,
|
|
49
|
+
args: [{
|
|
50
|
+
selector: "ngb-button",
|
|
51
|
+
imports: [],
|
|
52
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
53
|
+
template: "<button class=\"ngblock-button\" [type]=\"type()\" [disabled]=\"disabled()\">\n <ng-content />\n</button>\n",
|
|
54
|
+
styles: [":host{display:inline-block}.ngblock-button{padding:.5rem .875rem;border:1px solid currentColor;border-radius:.25rem;background:transparent;color:inherit;cursor:pointer;font:inherit}.ngblock-button:focus-visible{outline:2px solid currentColor;outline-offset:2px}.ngblock-button:disabled{cursor:not-allowed;opacity:.6}\n"]
|
|
55
|
+
}]
|
|
56
|
+
}],
|
|
57
|
+
propDecorators: {
|
|
58
|
+
type: [{
|
|
59
|
+
type: i0.Input,
|
|
60
|
+
args: [{
|
|
61
|
+
isSignal: true,
|
|
62
|
+
alias: "type",
|
|
63
|
+
required: false
|
|
64
|
+
}]
|
|
65
|
+
}],
|
|
66
|
+
disabled: [{
|
|
67
|
+
type: i0.Input,
|
|
68
|
+
args: [{
|
|
69
|
+
isSignal: true,
|
|
70
|
+
alias: "disabled",
|
|
71
|
+
required: false
|
|
72
|
+
}]
|
|
73
|
+
}]
|
|
74
|
+
}
|
|
75
|
+
});
|
|
76
|
+
export { ButtonComponent };
|
|
77
|
+
|
|
78
|
+
//# sourceMappingURL=ngblock.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ngblock.mjs","names":[],"sources":["../../../../packages/ngblock/src/lib/control/button.ts","../../../../packages/ngblock/src/lib/control/button.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input } from '@angular/core';\n\n@Component({\n selector: 'ngb-button',\n imports: [],\n templateUrl: './button.html',\n styleUrl: './button.css',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ButtonComponent {\n readonly type = input<HTMLButtonElement['type']>('button');\n readonly disabled = input(false);\n}\n","<button class=\"ngblock-button\" [type]=\"type()\" [disabled]=\"disabled()\">\n <ng-content />\n</button>\n"],"mappings":";;AASA,IAAa,kBAAb,MAAa,gBAAe;CACjB,OAAO,MAAiC,UAAS,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CACjD,WAAW,MAAM,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CAFrB,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAe,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAf,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAe,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,UAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,UAAA;EAAA,UCT5B;EAGA,QAAA,CAAA,gUAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;ADMa,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAe,YAAA,CAAA;EAP3B,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAY,SACb,CAAA;GAAE,iBAGM,wBAAwB;GAAM,UAAA;GAAA,QAAA,CAAA,gUAAA;EAAA,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,29 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ngblock",
|
|
3
|
-
"version": "0.0.
|
|
4
|
-
"
|
|
5
|
-
"
|
|
3
|
+
"version": "0.0.2",
|
|
4
|
+
"description": "An Angular library for ngblock.",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"peerDependencies": {
|
|
7
|
+
"@angular/common": "^22.2.0",
|
|
8
|
+
"@angular/core": "^22.2.0"
|
|
9
|
+
},
|
|
10
|
+
"sideEffects": false,
|
|
11
|
+
"publishConfig": {
|
|
12
|
+
"access": "public"
|
|
13
|
+
},
|
|
14
|
+
"module": "fesm2022/ngblock.mjs",
|
|
15
|
+
"typings": "types/ngblock.d.ts",
|
|
16
|
+
"exports": {
|
|
17
|
+
"./package.json": {
|
|
18
|
+
"default": "./package.json"
|
|
19
|
+
},
|
|
20
|
+
".": {
|
|
21
|
+
"types": "./types/ngblock.d.ts",
|
|
22
|
+
"default": "./fesm2022/ngblock.mjs"
|
|
23
|
+
}
|
|
24
|
+
},
|
|
25
|
+
"type": "module",
|
|
26
|
+
"dependencies": {
|
|
27
|
+
"tslib": "^2.3.0"
|
|
28
|
+
}
|
|
6
29
|
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import * as i0 from "@angular/core";
|
|
2
|
+
export declare class ButtonComponent {
|
|
3
|
+
readonly type: import("@angular/core").InputSignal<"submit" | "reset" | "button">;
|
|
4
|
+
readonly disabled: import("@angular/core").InputSignal<boolean>;
|
|
5
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ButtonComponent, never>;
|
|
6
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "ngb-button", never, {
|
|
7
|
+
"type": {
|
|
8
|
+
"alias": "type";
|
|
9
|
+
"required": false;
|
|
10
|
+
"isSignal": true;
|
|
11
|
+
};
|
|
12
|
+
"disabled": {
|
|
13
|
+
"alias": "disabled";
|
|
14
|
+
"required": false;
|
|
15
|
+
"isSignal": true;
|
|
16
|
+
};
|
|
17
|
+
}, {}, never, ["*"], true, never>;
|
|
18
|
+
}
|