ngblock 0.0.5 → 0.0.7

package/README.md

@@ -5,10 +5,13 @@
 | Group | Component | Type | Selector |
 | --- | --- | --- | --- |
 | Control / Button | Button text | `control` | `ngb-button-text-control` |
+| Control / Button | Button icon | `control` | `ngb-button-icon-control` |
+| Misc | Icon | `misc` | `ngb-icon` |
 
-The component is in `src/lib/control/button/button-text/`. Component files use
-the `<component-name>.<type>.<extension>` naming convention, for example
-`button-text.control.ts` and `button-text.control.html`.
+The button components are in `src/lib/control/button/`; the icon component is
+in `src/lib/misc/icon/`. Component files use the
+`<component-name>.<type>.<extension>` naming convention, for example
+`button-text.control.ts` and `button-icon.control.ts`.
 
 ## Use
 
@@ -16,18 +19,28 @@ the `<component-name>.<type>.<extension>` naming convention, for example
 npm install ngblock
 ```
 
-Import `ButtonTextComponent` into the standalone component that uses it:
+Import the standalone components you use:
 
 ```ts
 import { Component } from '@angular/core';
-import { ButtonTextComponent } from 'ngblock';
+import {
+  ButtonIconComponent,
+  ButtonTextComponent,
+  IconComponent,
+} from 'ngblock';
 
 @Component({
   selector: 'app-example',
-  imports: [ButtonTextComponent],
+  imports: [ButtonTextComponent, ButtonIconComponent, IconComponent],
   template: `
-    <ngb-button-text-control (buttonClick)="save($event)">Save</ngb-button-text-control>
+    <ngb-button-text-control (clicked)="save($event)">Save</ngb-button-text-control>
     <ngb-button-text-control type="submit" [disabled]="isSaving">Submit</ngb-button-text-control>
+    <ngb-button-icon-control
+      icon="favorite"
+      ariaLabel="Add to favorites"
+      (clicked)="addToFavorites($event)"
+    />
+    <ngb-icon glyph="★" />
   `,
 })
 export class ExampleComponent {
@@ -36,6 +49,10 @@ export class ExampleComponent {
   save(event: MouseEvent): void {
     // Perform an operation using the click event.
   }
+
+  addToFavorites(event: MouseEvent): void {
+    // Perform an operation using the click event.
+  }
 }
 ```
 
@@ -46,7 +63,51 @@ supports these inputs and output:
 | --- | --- | --- | --- |
 | `type` | Input | `'button' \| 'submit' \| 'reset'` | `'button'` |
 | `disabled` | Input | `boolean` | `false` |
-| `buttonClick` | Output | `MouseEvent` | — |
+| `clicked` | Output | `MouseEvent` | — |
 
-`buttonClick` emits the native click event. The component intentionally uses
+`clicked` emits the native click event. The component intentionally uses
 the browser's default button styling.
+
+### Button icon
+
+The icon button renders one of the supported icons selected through the `icon`
+input. TypeScript exposes the `ButtonIcon` union for editor autocomplete:
+
+```html
+<ngb-button-icon-control
+  icon="favorite"
+  ariaLabel="Add to favorites"
+  (clicked)="addToFavorites($event)"
+/>
+```
+
+Available values: `add`, `check`, `close`, `delete`, `edit`, `favorite`,
+`home`, `menu`, `remove`, and `search`.
+
+| Name | Kind | Type | Default |
+| --- | --- | --- | --- |
+| `icon` | Input | `ButtonIcon` | Required |
+| `ariaLabel` | Input | `string` | Required |
+| `type` | Input | `'button' \| 'submit' \| 'reset'` | `'button'` |
+| `disabled` | Input | `boolean` | `false` |
+| `clicked` | Output | `MouseEvent` | — |
+
+`ButtonIcon` is exported from `ngblock` and is a union of the available icon
+names, so editors can suggest valid values: `add`, `check`, `close`, `delete`,
+`edit`, `favorite`, `home`, `menu`, `remove`, and `search`. The icon is hidden
+from assistive technology; `ariaLabel` provides the button's accessible name.
+The component uses the browser's default button styling.
+
+### Icon
+
+`IconComponent` is also exported from `ngblock` for displaying a glyph directly:
+
+```html
+<ngb-icon glyph="★" />
+```
+
+| Name | Kind | Type | Default |
+| --- | --- | --- | --- |
+| `glyph` | Input | `string` | Required |
+
+The glyph is treated as decorative and hidden from assistive technology.

package/fesm2022/ngblock.mjs

@@ -1,12 +1,293 @@
 import * as i0 from "@angular/core";
-import { ChangeDetectionStrategy, Component, input, output } from "@angular/core";
-var ButtonTextComponent = class ButtonTextComponent {
+import { ChangeDetectionStrategy, Component, computed, input, output } from "@angular/core";
+var IconComponent = class IconComponent {
+	glyph = input.required(...ngDevMode ? [{ debugName: "glyph" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: IconComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.4",
+		type: IconComponent,
+		isStandalone: true,
+		selector: "ngb-icon",
+		inputs: { glyph: {
+			classPropertyName: "glyph",
+			publicName: "glyph",
+			isSignal: true,
+			isRequired: true,
+			transformFunction: null
+		} },
+		ngImport: i0,
+		template: "<span aria-hidden=\"true\">{{ glyph() }}</span>\r\n",
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: IconComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ngb-icon",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<span aria-hidden=\"true\">{{ glyph() }}</span>\r\n"
+		}]
+	}],
+	propDecorators: { glyph: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "glyph",
+			required: true
+		}]
+	}] }
+});
+var ButtonBaseComponent = class ButtonBaseComponent {
 	type = input("button", ...ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []);
 	disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
-	buttonClick = output();
+	ariaLabel = input(null, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	clicked = output();
 	onClick(event) {
-		this.buttonClick.emit(event);
+		this.clicked.emit(event);
 	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: ButtonBaseComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.4",
+		type: ButtonBaseComponent,
+		isStandalone: true,
+		selector: "ngb-button-base-control",
+		inputs: {
+			type: {
+				classPropertyName: "type",
+				publicName: "type",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { clicked: "clicked" },
+		ngImport: i0,
+		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  <ng-content />\r\n</button>\r\n",
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: ButtonBaseComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ngb-button-base-control",
+			imports: [],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			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  <ng-content />\r\n</button>\r\n"
+		}]
+	}],
+	propDecorators: {
+		type: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "type",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		clicked: [{
+			type: i0.Output,
+			args: ["clicked"]
+		}]
+	}
+});
+const BUTTON_ICONS = {
+	add: "+",
+	check: "✓",
+	close: "×",
+	delete: "⌫",
+	edit: "✎",
+	favorite: "★",
+	home: "⌂",
+	menu: "☰",
+	remove: "−",
+	search: "⌕"
+};
+var ButtonIconComponent = class ButtonIconComponent {
+	type = input("button", ...ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []);
+	disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
+	icon = input.required(...ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []);
+	iconGlyph = computed(() => BUTTON_ICONS[this.icon()], ...ngDevMode ? [{ debugName: "iconGlyph" }] : /* istanbul ignore next */ []);
+	ariaLabel = input.required(...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	clicked = output();
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: ButtonIconComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.4",
+		type: ButtonIconComponent,
+		isStandalone: true,
+		selector: "ngb-button-icon-control",
+		inputs: {
+			type: {
+				classPropertyName: "type",
+				publicName: "type",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			icon: {
+				classPropertyName: "icon",
+				publicName: "icon",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			}
+		},
+		outputs: { clicked: "clicked" },
+		ngImport: i0,
+		template: "<ngb-button-base-control\r\n  [type]=\"type()\"\r\n  [disabled]=\"disabled()\"\r\n  [ariaLabel]=\"ariaLabel()\"\r\n  (clicked)=\"clicked.emit($event)\"\r\n>\r\n  <ngb-icon [glyph]=\"iconGlyph()\" />\r\n</ngb-button-base-control>\r\n",
+		dependencies: [{
+			kind: "component",
+			type: ButtonBaseComponent,
+			selector: "ngb-button-base-control",
+			inputs: [
+				"type",
+				"disabled",
+				"ariaLabel"
+			],
+			outputs: ["clicked"]
+		}, {
+			kind: "component",
+			type: IconComponent,
+			selector: "ngb-icon",
+			inputs: ["glyph"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: ButtonIconComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ngb-button-icon-control",
+			imports: [ButtonBaseComponent, IconComponent],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<ngb-button-base-control\r\n  [type]=\"type()\"\r\n  [disabled]=\"disabled()\"\r\n  [ariaLabel]=\"ariaLabel()\"\r\n  (clicked)=\"clicked.emit($event)\"\r\n>\r\n  <ngb-icon [glyph]=\"iconGlyph()\" />\r\n</ngb-button-base-control>\r\n"
+		}]
+	}],
+	propDecorators: {
+		type: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "type",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		icon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "icon",
+				required: true
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: true
+			}]
+		}],
+		clicked: [{
+			type: i0.Output,
+			args: ["clicked"]
+		}]
+	}
+});
+var ButtonTextComponent = class ButtonTextComponent {
+	type = input("button", ...ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []);
+	disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
+	clicked = output();
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
 		version: "22.2.4",
@@ -37,9 +318,20 @@ var ButtonTextComponent = class ButtonTextComponent {
 				transformFunction: null
 			}
 		},
-		outputs: { buttonClick: "buttonClick" },
+		outputs: { clicked: "clicked" },
 		ngImport: i0,
-		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",
+		template: "<ngb-button-base-control\r\n  [type]=\"type()\"\r\n  [disabled]=\"disabled()\"\r\n  (clicked)=\"clicked.emit($event)\"\r\n>\r\n  <ng-content />\r\n</ngb-button-base-control>\r\n",
+		dependencies: [{
+			kind: "component",
+			type: ButtonBaseComponent,
+			selector: "ngb-button-base-control",
+			inputs: [
+				"type",
+				"disabled",
+				"ariaLabel"
+			],
+			outputs: ["clicked"]
+		}],
 		changeDetection: i0.ChangeDetectionStrategy.OnPush
 	});
 };
@@ -52,9 +344,9 @@ i0.ɵɵngDeclareClassMetadata({
 		type: Component,
 		args: [{
 			selector: "ngb-button-text-control",
-			imports: [],
+			imports: [ButtonBaseComponent],
 			changeDetection: ChangeDetectionStrategy.OnPush,
-			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"
+			template: "<ngb-button-base-control\r\n  [type]=\"type()\"\r\n  [disabled]=\"disabled()\"\r\n  (clicked)=\"clicked.emit($event)\"\r\n>\r\n  <ng-content />\r\n</ngb-button-base-control>\r\n"
 		}]
 	}],
 	propDecorators: {
@@ -74,12 +366,12 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
-		buttonClick: [{
+		clicked: [{
 			type: i0.Output,
-			args: ["buttonClick"]
+			args: ["clicked"]
 		}]
 	}
 });
-export { ButtonTextComponent };
+export { BUTTON_ICONS, ButtonIconComponent, ButtonTextComponent, IconComponent };
 
 //# sourceMappingURL=ngblock.mjs.map

package/fesm2022/ngblock.mjs.map

@@ -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"}
+{"version":3,"file":"ngblock.mjs","names":[],"sources":["../../../../packages/ngblock/src/lib/misc/icon/icon.component.ts","../../../../packages/ngblock/src/lib/misc/icon/icon.component.html","../../../../packages/ngblock/src/lib/control/button/button-base/button-base.control.ts","../../../../packages/ngblock/src/lib/control/button/button-base/button-base.control.html","../../../../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 { ChangeDetectionStrategy, Component, input } from '@angular/core';\r\n\r\n@Component({\r\n  selector: 'ngb-icon',\r\n  templateUrl: './icon.component.html',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class IconComponent {\r\n  readonly glyph = input.required<string>();\r\n}\r\n","<span aria-hidden=\"true\">{{ glyph() }}</span>\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-base-control',\r\n  imports: [],\r\n  templateUrl: './button-base.control.html',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class ButtonBaseComponent {\r\n  readonly type = input<HTMLButtonElement['type']>('button');\r\n  readonly disabled = input(false);\r\n  readonly ariaLabel = input<string | null>(null);\r\n  readonly clicked = output<MouseEvent>();\r\n\r\n  onClick(event: MouseEvent): void {\r\n    this.clicked.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  <ng-content />\r\n</button>\r\n","import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  computed,\r\n  input,\r\n  output,\r\n} from '@angular/core';\r\nimport { IconComponent } from '../../../misc/icon/icon.component';\r\nimport { ButtonBaseComponent } from '../button-base/button-base.control';\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: [ButtonBaseComponent, IconComponent],\r\n  templateUrl: './button-icon.control.html',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class ButtonIconComponent {\r\n  readonly type = input<HTMLButtonElement['type']>('button');\r\n  readonly disabled = input(false);\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 clicked = output<MouseEvent>();\r\n}\r\n","<ngb-button-base-control\r\n  [type]=\"type()\"\r\n  [disabled]=\"disabled()\"\r\n  [ariaLabel]=\"ariaLabel()\"\r\n  (clicked)=\"clicked.emit($event)\"\r\n>\r\n  <ngb-icon [glyph]=\"iconGlyph()\" />\r\n</ngb-button-base-control>\r\n","import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  input,\r\n  output,\r\n} from '@angular/core';\r\nimport { ButtonBaseComponent } from '../button-base/button-base.control';\r\n\r\n@Component({\r\n  selector: 'ngb-button-text-control',\r\n  imports: [ButtonBaseComponent],\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 clicked = output<MouseEvent>();\r\n}\r\n","<ngb-button-base-control\r\n  [type]=\"type()\"\r\n  [disabled]=\"disabled()\"\r\n  (clicked)=\"clicked.emit($event)\"\r\n>\r\n  <ng-content />\r\n</ngb-button-base-control>\r\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngblock",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "description": "An Angular library for ngblock.",
   "license": "MIT",
   "peerDependencies": {

package/types/ngblock.d.ts

@@ -1,9 +1,54 @@
 import * as i0 from "@angular/core";
+export declare const BUTTON_ICONS: {
+  readonly add: "+";
+  readonly check: "✓";
+  readonly close: "×";
+  readonly delete: "⌫";
+  readonly edit: "✎";
+  readonly favorite: "★";
+  readonly home: "⌂";
+  readonly menu: "☰";
+  readonly remove: "−";
+  readonly search: "⌕";
+};
+export type ButtonIcon = keyof typeof BUTTON_ICONS;
+export declare class ButtonIconComponent {
+  readonly type: import("@angular/core").InputSignal<"submit" | "reset" | "button">;
+  readonly disabled: import("@angular/core").InputSignal<boolean>;
+  readonly icon: import("@angular/core").InputSignal<"add" | "check" | "close" | "delete" | "edit" | "favorite" | "home" | "menu" | "remove" | "search">;
+  readonly iconGlyph: import("@angular/core").Signal<"+" | "✓" | "×" | "⌫" | "✎" | "★" | "⌂" | "☰" | "−" | "⌕">;
+  readonly ariaLabel: import("@angular/core").InputSignal<string>;
+  readonly clicked: import("@angular/core").OutputEmitterRef<MouseEvent>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<ButtonIconComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<ButtonIconComponent, "ngb-button-icon-control", never, {
+    "type": {
+      "alias": "type";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+    "icon": {
+      "alias": "icon";
+      "required": true;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": true;
+      "isSignal": true;
+    };
+  }, {
+    "clicked": "clicked";
+  }, never, never, true, never>;
+}
 export declare class ButtonTextComponent {
   readonly type: import("@angular/core").InputSignal<"submit" | "reset" | "button">;
   readonly disabled: import("@angular/core").InputSignal<boolean>;
-  readonly buttonClick: import("@angular/core").OutputEmitterRef<MouseEvent>;
-  onClick(event: MouseEvent): void;
+  readonly clicked: import("@angular/core").OutputEmitterRef<MouseEvent>;
   static ɵfac: i0.ɵɵFactoryDeclaration<ButtonTextComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<ButtonTextComponent, "ngb-button-text-control", never, {
     "type": {
@@ -17,6 +62,17 @@ export declare class ButtonTextComponent {
       "isSignal": true;
     };
   }, {
-    "buttonClick": "buttonClick";
+    "clicked": "clicked";
   }, never, ["*"], true, never>;
+}
+export declare class IconComponent {
+  readonly glyph: import("@angular/core").InputSignal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<IconComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<IconComponent, "ngb-icon", never, {
+    "glyph": {
+      "alias": "glyph";
+      "required": true;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
 }