ngblock 0.0.1 → 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.
Files changed (5) hide show
  1. package/README.md +23 -1
  2. package/fesm2022/ngblock.mjs +52 -13
  3. package/fesm2022/ngblock.mjs.map +1 -1
  4. package/package.json +1 -1
  5. package/types/ngblock.d.ts +16 -3
package/README.md CHANGED
@@ -10,10 +10,32 @@ npm install ngblock
10
10
 
11
11
  ## Use
12
12
 
13
+ Import the standalone button component where you need it:
14
+
13
15
  ```ts
14
- import { Ngblock } from 'ngblock';
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
+ }
15
33
  ```
16
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
+
17
39
  ## Develop
18
40
 
19
41
  From the Nx workspace root:
package/fesm2022/ngblock.mjs CHANGED
@@ -1,39 +1,78 @@
1
1
  import * as i0 from "@angular/core";
2
- import { Component } from "@angular/core";
3
- var Ngblock = class Ngblock {
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 */ []);
4
6
  static ɵfac = i0.ɵɵngDeclareFactory({
5
7
  minVersion: "12.0.0",
6
8
  version: "22.2.4",
7
9
  ngImport: i0,
8
- type: Ngblock,
10
+ type: ButtonComponent,
9
11
  deps: [],
10
12
  target: i0.ɵɵFactoryTarget.Component
11
13
  });
12
14
  static ɵcmp = i0.ɵɵngDeclareComponent({
13
- minVersion: "14.0.0",
15
+ minVersion: "17.1.0",
14
16
  version: "22.2.4",
15
- type: Ngblock,
17
+ type: ButtonComponent,
16
18
  isStandalone: true,
17
- selector: "lib-ngblock",
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
+ },
18
36
  ngImport: i0,
19
- template: "<p>Ngblock works!</p>\n",
20
- styles: [""]
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
21
40
  });
22
41
  };
23
42
  i0.ɵɵngDeclareClassMetadata({
24
43
  minVersion: "12.0.0",
25
44
  version: "22.2.4",
26
45
  ngImport: i0,
27
- type: Ngblock,
46
+ type: ButtonComponent,
28
47
  decorators: [{
29
48
  type: Component,
30
49
  args: [{
31
- selector: "lib-ngblock",
50
+ selector: "ngb-button",
32
51
  imports: [],
33
- template: "<p>Ngblock works!</p>\n"
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"]
34
55
  }]
35
- }]
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
+ }
36
75
  });
37
- export { Ngblock };
76
+ export { ButtonComponent };
38
77
 
39
78
  //# sourceMappingURL=ngblock.mjs.map
package/fesm2022/ngblock.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ngblock.mjs","names":[],"sources":["../../../../packages/ngblock/src/lib/ngblock/ngblock.ts","../../../../packages/ngblock/src/lib/ngblock/ngblock.html"],"sourcesContent":["import { Component } from '@angular/core';\n\n@Component({\n selector: 'lib-ngblock',\n imports: [],\n templateUrl: './ngblock.html',\n styleUrl: './ngblock.css',\n})\nexport class Ngblock {}\n","<p>Ngblock works!</p>\n"],"mappings":";;AAQA,IAAa,UAAb,MAAa,QAAO;CAAP,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAO,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAP,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAO,cAAA;EAAA,UAAA;EAAA,UAAA;EAAA,UCRpB;EACA,QAAA,CAAA,EAAA;CAAA,CAAA;;ADOa,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAO,YAAA,CAAA;EANnB,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAa,SACd,CAAA;GAAE,UAAA;EAAA,CAAA"}
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,6 @@
1
1
  {
2
2
  "name": "ngblock",
3
- "version": "0.0.1",
3
+ "version": "0.0.2",
4
4
  "description": "An Angular library for ngblock.",
5
5
  "license": "MIT",
6
6
  "peerDependencies": {
package/types/ngblock.d.ts CHANGED
@@ -1,5 +1,18 @@
1
1
  import * as i0 from "@angular/core";
2
- export declare class Ngblock {
3
- static ɵfac: i0.ɵɵFactoryDeclaration<Ngblock, never>;
4
- static ɵcmp: i0.ɵɵComponentDeclaration<Ngblock, "lib-ngblock", never, {}, {}, never, never, true, never>;
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>;
5
18
  }