ngblock 0.0.4 → 0.0.6

package/README.md

@@ -5,10 +5,11 @@
 | Group | Component | Type | Selector |
 | --- | --- | --- | --- |
 | Control / Button | Button text | `control` | `ngb-button-text-control` |
+| Control / Button | Button icon | `control` | `ngb-button-icon-control` |
 
-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/`. Component files use the
+`<component-name>.<type>.<extension>` naming convention, for example
+`button-text.control.ts` and `button-icon.control.ts`.
 
 ## Use
 
@@ -16,29 +17,76 @@ 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 } from 'ngblock';
 
 @Component({
   selector: 'app-example',
-  imports: [ButtonTextComponent],
+  imports: [ButtonTextComponent, ButtonIconComponent],
   template: `
-    <ngb-button-text-control (click)="save()">Save</ngb-button-text-control>
+    <ngb-button-text-control (buttonClick)="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"
+      (buttonClick)="addToFavorites($event)"
+    />
   `,
 })
 export class ExampleComponent {
   isSaving = false;
 
-  save(): void {
-    // Perform the save action.
+  save(event: MouseEvent): void {
+    // Perform an operation using the click event.
+  }
+
+  addToFavorites(event: MouseEvent): void {
+    // Perform an operation using the click event.
   }
 }
 ```
 
 `ButtonTextComponent` wraps a native button and projects its text content. It
-supports native `type` and `disabled` inputs and intentionally uses the
-browser's default styling.
+supports these inputs and output:
+
+| Name | Kind | Type | Default |
+| --- | --- | --- | --- |
+| `type` | Input | `'button' \| 'submit' \| 'reset'` | `'button'` |
+| `disabled` | Input | `boolean` | `false` |
+| `buttonClick` | Output | `MouseEvent` | — |
+
+`buttonClick` 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"
+  (buttonClick)="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` |
+| `buttonClick` | 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.

package/fesm2022/ngblock.mjs

@@ -1,8 +1,137 @@
 import * as i0 from "@angular/core";
-import { ChangeDetectionStrategy, Component, input } from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, input, output } from "@angular/core";
+const BUTTON_ICONS = {
+	add: "+",
+	check: "✓",
+	close: "×",
+	delete: "⌫",
+	edit: "✎",
+	favorite: "★",
+	home: "⌂",
+	menu: "☰",
+	remove: "−",
+	search: "⌕"
+};
+var ButtonIconComponent = class ButtonIconComponent {
+	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 */ []);
+	type = input("button", ...ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []);
+	disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
+	buttonClick = output();
+	onClick(event) {
+		this.buttonClick.emit(event);
+	}
+	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: {
+			icon: {
+				classPropertyName: "icon",
+				publicName: "icon",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			type: {
+				classPropertyName: "type",
+				publicName: "type",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { buttonClick: "buttonClick" },
+		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  <span aria-hidden=\"true\">{{ iconGlyph() }}</span>\r\n</button>\r\n",
+		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: [],
+			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  <span aria-hidden=\"true\">{{ iconGlyph() }}</span>\r\n</button>\r\n"
+		}]
+	}],
+	propDecorators: {
+		icon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "icon",
+				required: true
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: true
+			}]
+		}],
+		type: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "type",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		buttonClick: [{
+			type: i0.Output,
+			args: ["buttonClick"]
+		}]
+	}
+});
 var ButtonTextComponent = class ButtonTextComponent {
 	type = input("button", ...ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []);
 	disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
+	buttonClick = output();
+	onClick(event) {
+		this.buttonClick.emit(event);
+	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
 		version: "22.2.4",
@@ -33,8 +162,9 @@ var ButtonTextComponent = class ButtonTextComponent {
 				transformFunction: null
 			}
 		},
+		outputs: { buttonClick: "buttonClick" },
 		ngImport: i0,
-		template: "<button [type]=\"type()\" [disabled]=\"disabled()\">\r\n  <ng-content />\r\n</button>\r\n",
+		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",
 		changeDetection: i0.ChangeDetectionStrategy.OnPush
 	});
 };
@@ -49,7 +179,7 @@ i0.ɵɵngDeclareClassMetadata({
 			selector: "ngb-button-text-control",
 			imports: [],
 			changeDetection: ChangeDetectionStrategy.OnPush,
-			template: "<button [type]=\"type()\" [disabled]=\"disabled()\">\r\n  <ng-content />\r\n</button>\r\n"
+			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"
 		}]
 	}],
 	propDecorators: {
@@ -68,9 +198,13 @@ i0.ɵɵngDeclareClassMetadata({
 				alias: "disabled",
 				required: false
 			}]
+		}],
+		buttonClick: [{
+			type: i0.Output,
+			args: ["buttonClick"]
 		}]
 	}
 });
-export { ButtonTextComponent };
+export { BUTTON_ICONS, ButtonIconComponent, ButtonTextComponent };
 
 //# 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 { ChangeDetectionStrategy, Component, input } 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}\r\n","<button [type]=\"type()\" [disabled]=\"disabled()\">\r\n  <ng-content />\r\n</button>\r\n"],"mappings":";;AAQA,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;CAFrB,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,UAAA;EAAA,UCRhC;EAGA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;ADKa,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/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

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

package/types/ngblock.d.ts

@@ -1,7 +1,56 @@
 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 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 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;
+  static ɵfac: i0.ɵɵFactoryDeclaration<ButtonIconComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<ButtonIconComponent, "ngb-button-icon-control", never, {
+    "icon": {
+      "alias": "icon";
+      "required": true;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": true;
+      "isSignal": true;
+    };
+    "type": {
+      "alias": "type";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "buttonClick": "buttonClick";
+  }, 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;
   static ɵfac: i0.ɵɵFactoryDeclaration<ButtonTextComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<ButtonTextComponent, "ngb-button-text-control", never, {
     "type": {
@@ -14,5 +63,7 @@ export declare class ButtonTextComponent {
       "required": false;
       "isSignal": true;
     };
-  }, {}, never, ["*"], true, never>;
+  }, {
+    "buttonClick": "buttonClick";
+  }, never, ["*"], true, never>;
 }