ngblock 0.0.3 → 0.0.5

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 -32
  2. package/fesm2022/ngblock.mjs +19 -12
  3. package/fesm2022/ngblock.mjs.map +1 -1
  4. package/package.json +1 -1
  5. package/types/ngblock.d.ts +8 -4
package/README.md CHANGED
@@ -1,61 +1,52 @@
1
1
  # ngblock
2
2
 
3
- `ngblock` is an Angular UI library. The current release includes a standalone
4
- button control.
3
+ ## Components
5
4
 
6
- ## Requirements
5
+ | Group | Component | Type | Selector |
6
+ | --- | --- | --- | --- |
7
+ | Control / Button | Button text | `control` | `ngb-button-text-control` |
7
8
 
8
- - Angular `^22.2.0`
9
+ The component is in `src/lib/control/button/button-text/`. Component files use
10
+ the `<component-name>.<type>.<extension>` naming convention, for example
11
+ `button-text.control.ts` and `button-text.control.html`.
9
12
 
10
- ## Install
13
+ ## Use
11
14
 
12
15
  ```bash
13
16
  npm install ngblock
14
17
  ```
15
18
 
16
- ## Button control
17
-
18
- Import `ButtonComponent` into the standalone component that uses it:
19
+ Import `ButtonTextComponent` into the standalone component that uses it:
19
20
 
20
21
  ```ts
21
22
  import { Component } from '@angular/core';
22
- import { ButtonComponent } from 'ngblock';
23
+ import { ButtonTextComponent } from 'ngblock';
23
24
 
24
25
  @Component({
25
26
  selector: 'app-example',
26
- imports: [ButtonComponent],
27
+ imports: [ButtonTextComponent],
27
28
  template: `
28
- <ngb-button (click)="save()">Save</ngb-button>
29
- <ngb-button type="submit" [disabled]="isSaving">Submit</ngb-button>
29
+ <ngb-button-text-control (buttonClick)="save($event)">Save</ngb-button-text-control>
30
+ <ngb-button-text-control type="submit" [disabled]="isSaving">Submit</ngb-button-text-control>
30
31
  `,
31
32
  })
32
33
  export class ExampleComponent {
33
34
  isSaving = false;
34
35
 
35
- save(): void {
36
- // Perform the save action.
36
+ save(event: MouseEvent): void {
37
+ // Perform an operation using the click event.
37
38
  }
38
39
  }
39
40
  ```
40
41
 
41
- `ButtonComponent` renders a native `<button>` and projects its content as the
42
- button label. Its selector is `ngb-button`.
42
+ `ButtonTextComponent` wraps a native button and projects its text content. It
43
+ supports these inputs and output:
43
44
 
44
- | Input | Type | Default | Description |
45
+ | Name | Kind | Type | Default |
45
46
  | --- | --- | --- | --- |
46
- | `type` | `'button' \| 'submit' \| 'reset'` | `'button'` | Native button type. |
47
- | `disabled` | `boolean` | `false` | Disables the native button. |
48
-
49
- The control inherits its font and text color from its context, with basic
50
- padding, border, focus-visible, and disabled styles. Use the native `click`
51
- event to handle activation.
52
-
53
- ## Develop
47
+ | `type` | Input | `'button' \| 'submit' \| 'reset'` | `'button'` |
48
+ | `disabled` | Input | `boolean` | `false` |
49
+ | `buttonClick` | Output | `MouseEvent` | — |
54
50
 
55
- From the Nx workspace root:
56
-
57
- ```bash
58
- npx nx build ngblock
59
- npx nx test ngblock
60
- npx nx lint ngblock
61
- ```
51
+ `buttonClick` emits the native click event. The component intentionally uses
52
+ the browser's default button styling.
package/fesm2022/ngblock.mjs CHANGED
@@ -1,22 +1,26 @@
1
1
  import * as i0 from "@angular/core";
2
- import { ChangeDetectionStrategy, Component, input } from "@angular/core";
3
- var ButtonComponent = class ButtonComponent {
2
+ import { ChangeDetectionStrategy, Component, input, output } from "@angular/core";
3
+ var ButtonTextComponent = class ButtonTextComponent {
4
4
  type = input("button", ...ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []);
5
5
  disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
6
+ buttonClick = output();
7
+ onClick(event) {
8
+ this.buttonClick.emit(event);
9
+ }
6
10
  static ɵfac = i0.ɵɵngDeclareFactory({
7
11
  minVersion: "12.0.0",
8
12
  version: "22.2.4",
9
13
  ngImport: i0,
10
- type: ButtonComponent,
14
+ type: ButtonTextComponent,
11
15
  deps: [],
12
16
  target: i0.ɵɵFactoryTarget.Component
13
17
  });
14
18
  static ɵcmp = i0.ɵɵngDeclareComponent({
15
19
  minVersion: "17.1.0",
16
20
  version: "22.2.4",
17
- type: ButtonComponent,
21
+ type: ButtonTextComponent,
18
22
  isStandalone: true,
19
- selector: "ngb-button",
23
+ selector: "ngb-button-text-control",
20
24
  inputs: {
21
25
  type: {
22
26
  classPropertyName: "type",
@@ -33,9 +37,9 @@ var ButtonComponent = class ButtonComponent {
33
37
  transformFunction: null
34
38
  }
35
39
  },
40
+ outputs: { buttonClick: "buttonClick" },
36
41
  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"],
42
+ template: "<button\r\n [type]=\"type()\"\r\n [disabled]=\"disabled()\"\r\n (click)=\"onClick($event)\"\r\n>\r\n <ng-content />\r\n</button>\r\n",
39
43
  changeDetection: i0.ChangeDetectionStrategy.OnPush
40
44
  });
41
45
  };
@@ -43,15 +47,14 @@ i0.ɵɵngDeclareClassMetadata({
43
47
  minVersion: "12.0.0",
44
48
  version: "22.2.4",
45
49
  ngImport: i0,
46
- type: ButtonComponent,
50
+ type: ButtonTextComponent,
47
51
  decorators: [{
48
52
  type: Component,
49
53
  args: [{
50
- selector: "ngb-button",
54
+ selector: "ngb-button-text-control",
51
55
  imports: [],
52
56
  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"]
57
+ template: "<button\r\n [type]=\"type()\"\r\n [disabled]=\"disabled()\"\r\n (click)=\"onClick($event)\"\r\n>\r\n <ng-content />\r\n</button>\r\n"
55
58
  }]
56
59
  }],
57
60
  propDecorators: {
@@ -70,9 +73,13 @@ i0.ɵɵngDeclareClassMetadata({
70
73
  alias: "disabled",
71
74
  required: false
72
75
  }]
76
+ }],
77
+ buttonClick: [{
78
+ type: i0.Output,
79
+ args: ["buttonClick"]
73
80
  }]
74
81
  }
75
82
  });
76
- export { ButtonComponent };
83
+ export { ButtonTextComponent };
77
84
 
78
85
  //# sourceMappingURL=ngblock.mjs.map
package/fesm2022/ngblock.mjs.map CHANGED
@@ -1 +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"}
1
+ {"version":3,"file":"ngblock.mjs","names":[],"sources":["../../../../packages/ngblock/src/lib/control/button/button-text/button-text.control.ts","../../../../packages/ngblock/src/lib/control/button/button-text/button-text.control.html"],"sourcesContent":["import {\r\n ChangeDetectionStrategy,\r\n Component,\r\n input,\r\n output,\r\n} from '@angular/core';\r\n\r\n@Component({\r\n selector: 'ngb-button-text-control',\r\n imports: [],\r\n templateUrl: './button-text.control.html',\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class ButtonTextComponent {\r\n readonly type = input<HTMLButtonElement['type']>('button');\r\n readonly disabled = input(false);\r\n readonly buttonClick = output<MouseEvent>();\r\n\r\n onClick(event: MouseEvent): void {\r\n this.buttonClick.emit(event);\r\n }\r\n}\r\n","<button\r\n [type]=\"type()\"\r\n [disabled]=\"disabled()\"\r\n (click)=\"onClick($event)\"\r\n>\r\n <ng-content />\r\n</button>\r\n"],"mappings":";;AAaA,IAAa,sBAAb,MAAa,oBAAmB;CACrB,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;CACvB,cAAc,OAAM;CAE7B,QAAQ,OAAiB;EACvB,KAAK,YAAY,KAAK,KAAK;CAC7B;CAPW,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAmB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAnB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAmB,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,SAAA,EAAA,aAAA,cAAA;EAAA,UAAA;EAAA,UCbhC;EAOA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;ADMa,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAmB,YAAA,CAAA;EAN/B,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAyB,SAC1B,CAAA;GAAE,iBAEM,wBAAwB;GAAM,UAAA;EAAA,CAAA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ngblock",
3
- "version": "0.0.3",
3
+ "version": "0.0.5",
4
4
  "description": "An Angular library for ngblock.",
5
5
  "license": "MIT",
6
6
  "peerDependencies": {
package/types/ngblock.d.ts CHANGED
@@ -1,9 +1,11 @@
1
1
  import * as i0 from "@angular/core";
2
- export declare class ButtonComponent {
2
+ export declare class ButtonTextComponent {
3
3
  readonly type: import("@angular/core").InputSignal<"submit" | "reset" | "button">;
4
4
  readonly disabled: import("@angular/core").InputSignal<boolean>;
5
- static ɵfac: i0.ɵɵFactoryDeclaration<ButtonComponent, never>;
6
- static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "ngb-button", never, {
5
+ readonly buttonClick: import("@angular/core").OutputEmitterRef<MouseEvent>;
6
+ onClick(event: MouseEvent): void;
7
+ static ɵfac: i0.ɵɵFactoryDeclaration<ButtonTextComponent, never>;
8
+ static ɵcmp: i0.ɵɵComponentDeclaration<ButtonTextComponent, "ngb-button-text-control", never, {
7
9
  "type": {
8
10
  "alias": "type";
9
11
  "required": false;
@@ -14,5 +16,7 @@ export declare class ButtonComponent {
14
16
  "required": false;
15
17
  "isSignal": true;
16
18
  };
17
- }, {}, never, ["*"], true, never>;
19
+ }, {
20
+ "buttonClick": "buttonClick";
21
+ }, never, ["*"], true, never>;
18
22
  }