ngblock 0.0.5 → 0.0.6

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 +46 -6
  2. package/fesm2022/ngblock.mjs +127 -2
  3. package/fesm2022/ngblock.mjs.map +1 -1
  4. package/package.json +1 -1
  5. package/types/ngblock.d.ts +47 -0
package/README.md CHANGED
@@ -5,10 +5,11 @@
5
5
  | Group | Component | Type | Selector |
6
6
  | --- | --- | --- | --- |
7
7
  | Control / Button | Button text | `control` | `ngb-button-text-control` |
8
+ | Control / Button | Button icon | `control` | `ngb-button-icon-control` |
8
9
 
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`.
10
+ The button components are in `src/lib/control/button/`. Component files use the
11
+ `<component-name>.<type>.<extension>` naming convention, for example
12
+ `button-text.control.ts` and `button-icon.control.ts`.
12
13
 
13
14
  ## Use
14
15
 
@@ -16,18 +17,23 @@ the `<component-name>.<type>.<extension>` naming convention, for example
16
17
  npm install ngblock
17
18
  ```
18
19
 
19
- Import `ButtonTextComponent` into the standalone component that uses it:
20
+ Import the standalone components you use:
20
21
 
21
22
  ```ts
22
23
  import { Component } from '@angular/core';
23
- import { ButtonTextComponent } from 'ngblock';
24
+ import { ButtonIconComponent, ButtonTextComponent } from 'ngblock';
24
25
 
25
26
  @Component({
26
27
  selector: 'app-example',
27
- imports: [ButtonTextComponent],
28
+ imports: [ButtonTextComponent, ButtonIconComponent],
28
29
  template: `
29
30
  <ngb-button-text-control (buttonClick)="save($event)">Save</ngb-button-text-control>
30
31
  <ngb-button-text-control type="submit" [disabled]="isSaving">Submit</ngb-button-text-control>
32
+ <ngb-button-icon-control
33
+ icon="favorite"
34
+ ariaLabel="Add to favorites"
35
+ (buttonClick)="addToFavorites($event)"
36
+ />
31
37
  `,
32
38
  })
33
39
  export class ExampleComponent {
@@ -36,6 +42,10 @@ export class ExampleComponent {
36
42
  save(event: MouseEvent): void {
37
43
  // Perform an operation using the click event.
38
44
  }
45
+
46
+ addToFavorites(event: MouseEvent): void {
47
+ // Perform an operation using the click event.
48
+ }
39
49
  }
40
50
  ```
41
51
 
@@ -50,3 +60,33 @@ supports these inputs and output:
50
60
 
51
61
  `buttonClick` emits the native click event. The component intentionally uses
52
62
  the browser's default button styling.
63
+
64
+ ### Button icon
65
+
66
+ The icon button renders one of the supported icons selected through the `icon`
67
+ input. TypeScript exposes the `ButtonIcon` union for editor autocomplete:
68
+
69
+ ```html
70
+ <ngb-button-icon-control
71
+ icon="favorite"
72
+ ariaLabel="Add to favorites"
73
+ (buttonClick)="addToFavorites($event)"
74
+ />
75
+ ```
76
+
77
+ Available values: `add`, `check`, `close`, `delete`, `edit`, `favorite`,
78
+ `home`, `menu`, `remove`, and `search`.
79
+
80
+ | Name | Kind | Type | Default |
81
+ | --- | --- | --- | --- |
82
+ | `icon` | Input | `ButtonIcon` | Required |
83
+ | `ariaLabel` | Input | `string` | Required |
84
+ | `type` | Input | `'button' \| 'submit' \| 'reset'` | `'button'` |
85
+ | `disabled` | Input | `boolean` | `false` |
86
+ | `buttonClick` | Output | `MouseEvent` | — |
87
+
88
+ `ButtonIcon` is exported from `ngblock` and is a union of the available icon
89
+ names, so editors can suggest valid values: `add`, `check`, `close`, `delete`,
90
+ `edit`, `favorite`, `home`, `menu`, `remove`, and `search`. The icon is hidden
91
+ from assistive technology; `ariaLabel` provides the button's accessible name.
92
+ The component uses the browser's default button styling.
package/fesm2022/ngblock.mjs CHANGED
@@ -1,5 +1,130 @@
1
1
  import * as i0 from "@angular/core";
2
- import { ChangeDetectionStrategy, Component, input, output } from "@angular/core";
2
+ import { ChangeDetectionStrategy, Component, computed, input, output } from "@angular/core";
3
+ const BUTTON_ICONS = {
4
+ add: "+",
5
+ check: "✓",
6
+ close: "×",
7
+ delete: "⌫",
8
+ edit: "✎",
9
+ favorite: "★",
10
+ home: "⌂",
11
+ menu: "☰",
12
+ remove: "−",
13
+ search: "⌕"
14
+ };
15
+ var ButtonIconComponent = class ButtonIconComponent {
16
+ icon = input.required(...ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []);
17
+ iconGlyph = computed(() => BUTTON_ICONS[this.icon()], ...ngDevMode ? [{ debugName: "iconGlyph" }] : /* istanbul ignore next */ []);
18
+ ariaLabel = input.required(...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
19
+ type = input("button", ...ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []);
20
+ disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
21
+ buttonClick = output();
22
+ onClick(event) {
23
+ this.buttonClick.emit(event);
24
+ }
25
+ static ɵfac = i0.ɵɵngDeclareFactory({
26
+ minVersion: "12.0.0",
27
+ version: "22.2.4",
28
+ ngImport: i0,
29
+ type: ButtonIconComponent,
30
+ deps: [],
31
+ target: i0.ɵɵFactoryTarget.Component
32
+ });
33
+ static ɵcmp = i0.ɵɵngDeclareComponent({
34
+ minVersion: "17.1.0",
35
+ version: "22.2.4",
36
+ type: ButtonIconComponent,
37
+ isStandalone: true,
38
+ selector: "ngb-button-icon-control",
39
+ inputs: {
40
+ icon: {
41
+ classPropertyName: "icon",
42
+ publicName: "icon",
43
+ isSignal: true,
44
+ isRequired: true,
45
+ transformFunction: null
46
+ },
47
+ ariaLabel: {
48
+ classPropertyName: "ariaLabel",
49
+ publicName: "ariaLabel",
50
+ isSignal: true,
51
+ isRequired: true,
52
+ transformFunction: null
53
+ },
54
+ type: {
55
+ classPropertyName: "type",
56
+ publicName: "type",
57
+ isSignal: true,
58
+ isRequired: false,
59
+ transformFunction: null
60
+ },
61
+ disabled: {
62
+ classPropertyName: "disabled",
63
+ publicName: "disabled",
64
+ isSignal: true,
65
+ isRequired: false,
66
+ transformFunction: null
67
+ }
68
+ },
69
+ outputs: { buttonClick: "buttonClick" },
70
+ ngImport: i0,
71
+ template: "<button\r\n [type]=\"type()\"\r\n [disabled]=\"disabled()\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n (click)=\"onClick($event)\"\r\n>\r\n <span aria-hidden=\"true\">{{ iconGlyph() }}</span>\r\n</button>\r\n",
72
+ changeDetection: i0.ChangeDetectionStrategy.OnPush
73
+ });
74
+ };
75
+ i0.ɵɵngDeclareClassMetadata({
76
+ minVersion: "12.0.0",
77
+ version: "22.2.4",
78
+ ngImport: i0,
79
+ type: ButtonIconComponent,
80
+ decorators: [{
81
+ type: Component,
82
+ args: [{
83
+ selector: "ngb-button-icon-control",
84
+ imports: [],
85
+ changeDetection: ChangeDetectionStrategy.OnPush,
86
+ template: "<button\r\n [type]=\"type()\"\r\n [disabled]=\"disabled()\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n (click)=\"onClick($event)\"\r\n>\r\n <span aria-hidden=\"true\">{{ iconGlyph() }}</span>\r\n</button>\r\n"
87
+ }]
88
+ }],
89
+ propDecorators: {
90
+ icon: [{
91
+ type: i0.Input,
92
+ args: [{
93
+ isSignal: true,
94
+ alias: "icon",
95
+ required: true
96
+ }]
97
+ }],
98
+ ariaLabel: [{
99
+ type: i0.Input,
100
+ args: [{
101
+ isSignal: true,
102
+ alias: "ariaLabel",
103
+ required: true
104
+ }]
105
+ }],
106
+ type: [{
107
+ type: i0.Input,
108
+ args: [{
109
+ isSignal: true,
110
+ alias: "type",
111
+ required: false
112
+ }]
113
+ }],
114
+ disabled: [{
115
+ type: i0.Input,
116
+ args: [{
117
+ isSignal: true,
118
+ alias: "disabled",
119
+ required: false
120
+ }]
121
+ }],
122
+ buttonClick: [{
123
+ type: i0.Output,
124
+ args: ["buttonClick"]
125
+ }]
126
+ }
127
+ });
3
128
  var ButtonTextComponent = class ButtonTextComponent {
4
129
  type = input("button", ...ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []);
5
130
  disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
@@ -80,6 +205,6 @@ i0.ɵɵngDeclareClassMetadata({
80
205
  }]
81
206
  }
82
207
  });
83
- export { ButtonTextComponent };
208
+ export { BUTTON_ICONS, ButtonIconComponent, ButtonTextComponent };
84
209
 
85
210
  //# 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/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"}
1
+ {"version":3,"file":"ngblock.mjs","names":[],"sources":["../../../../packages/ngblock/src/lib/control/button/button-icon/button-icon.control.ts","../../../../packages/ngblock/src/lib/control/button/button-icon/button-icon.control.html","../../../../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 computed,\r\n input,\r\n output,\r\n} from '@angular/core';\r\n\r\nexport const BUTTON_ICONS = {\r\n add: '+',\r\n check: '✓',\r\n close: '×',\r\n delete: '⌫',\r\n edit: '✎',\r\n favorite: '★',\r\n home: '⌂',\r\n menu: '☰',\r\n remove: '−',\r\n search: '⌕',\r\n} as const;\r\n\r\nexport type ButtonIcon = keyof typeof BUTTON_ICONS;\r\n\r\n@Component({\r\n selector: 'ngb-button-icon-control',\r\n imports: [],\r\n templateUrl: './button-icon.control.html',\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class ButtonIconComponent {\r\n readonly icon = input.required<ButtonIcon>();\r\n readonly iconGlyph = computed(() => BUTTON_ICONS[this.icon()]);\r\n readonly ariaLabel = input.required<string>();\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 [attr.aria-label]=\"ariaLabel()\"\r\n (click)=\"onClick($event)\"\r\n>\r\n <span aria-hidden=\"true\">{{ iconGlyph() }}</span>\r\n</button>\r\n","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":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ngblock",
3
- "version": "0.0.5",
3
+ "version": "0.0.6",
4
4
  "description": "An Angular library for ngblock.",
5
5
  "license": "MIT",
6
6
  "peerDependencies": {
package/types/ngblock.d.ts CHANGED
@@ -1,4 +1,51 @@
1
1
  import * as i0 from "@angular/core";
2
+ export declare const BUTTON_ICONS: {
3
+ readonly add: "+";
4
+ readonly check: "✓";
5
+ readonly close: "×";
6
+ readonly delete: "⌫";
7
+ readonly edit: "✎";
8
+ readonly favorite: "★";
9
+ readonly home: "⌂";
10
+ readonly menu: "☰";
11
+ readonly remove: "−";
12
+ readonly search: "⌕";
13
+ };
14
+ export type ButtonIcon = keyof typeof BUTTON_ICONS;
15
+ export declare class ButtonIconComponent {
16
+ readonly icon: import("@angular/core").InputSignal<"add" | "check" | "close" | "delete" | "edit" | "favorite" | "home" | "menu" | "remove" | "search">;
17
+ readonly iconGlyph: import("@angular/core").Signal<"+" | "✓" | "×" | "⌫" | "✎" | "★" | "⌂" | "☰" | "−" | "⌕">;
18
+ readonly ariaLabel: import("@angular/core").InputSignal<string>;
19
+ readonly type: import("@angular/core").InputSignal<"submit" | "reset" | "button">;
20
+ readonly disabled: import("@angular/core").InputSignal<boolean>;
21
+ readonly buttonClick: import("@angular/core").OutputEmitterRef<MouseEvent>;
22
+ onClick(event: MouseEvent): void;
23
+ static ɵfac: i0.ɵɵFactoryDeclaration<ButtonIconComponent, never>;
24
+ static ɵcmp: i0.ɵɵComponentDeclaration<ButtonIconComponent, "ngb-button-icon-control", never, {
25
+ "icon": {
26
+ "alias": "icon";
27
+ "required": true;
28
+ "isSignal": true;
29
+ };
30
+ "ariaLabel": {
31
+ "alias": "ariaLabel";
32
+ "required": true;
33
+ "isSignal": true;
34
+ };
35
+ "type": {
36
+ "alias": "type";
37
+ "required": false;
38
+ "isSignal": true;
39
+ };
40
+ "disabled": {
41
+ "alias": "disabled";
42
+ "required": false;
43
+ "isSignal": true;
44
+ };
45
+ }, {
46
+ "buttonClick": "buttonClick";
47
+ }, never, never, true, never>;
48
+ }
2
49
  export declare class ButtonTextComponent {
3
50
  readonly type: import("@angular/core").InputSignal<"submit" | "reset" | "button">;
4
51
  readonly disabled: import("@angular/core").InputSignal<boolean>;