ngblock 0.0.1 → 0.0.3

package/README.md

@@ -1,24 +1,61 @@
-# ngblock
-
-An Angular library packaged in Angular Package Format for use in Angular applications.
-
-## Install
-
-```bash
-npm install ngblock
-```
-
-## Use
-
-```ts
-import { Ngblock } from 'ngblock';
-```
-
-## Develop
-
-From the Nx workspace root:
-
-```bash
-npx nx build ngblock
-npx nx test ngblock
-```
+# ngblock
+
+`ngblock` is an Angular UI library. The current release includes a standalone
+button control.
+
+## Requirements
+
+- Angular `^22.2.0`
+
+## Install
+
+```bash
+npm install ngblock
+```
+
+## Button control
+
+Import `ButtonComponent` into the standalone component that uses it:
+
+```ts
+import { Component } from '@angular/core';
+import { ButtonComponent } from 'ngblock';
+
+@Component({
+  selector: 'app-example',
+  imports: [ButtonComponent],
+  template: `
+    <ngb-button (click)="save()">Save</ngb-button>
+    <ngb-button type="submit" [disabled]="isSaving">Submit</ngb-button>
+  `,
+})
+export class ExampleComponent {
+  isSaving = false;
+
+  save(): void {
+    // Perform the save action.
+  }
+}
+```
+
+`ButtonComponent` renders a native `<button>` and projects its content as the
+button label. Its selector is `ngb-button`.
+
+| Input | Type | Default | Description |
+| --- | --- | --- | --- |
+| `type` | `'button' \| 'submit' \| 'reset'` | `'button'` | Native button type. |
+| `disabled` | `boolean` | `false` | Disables the native button. |
+
+The control inherits its font and text color from its context, with basic
+padding, border, focus-visible, and disabled styles. Use the native `click`
+event to handle activation.
+
+## Develop
+
+From the Nx workspace root:
+
+```bash
+npx nx build ngblock
+npx nx test ngblock
+npx nx lint ngblock
+```

package/fesm2022/ngblock.mjs

@@ -1,39 +1,78 @@
 import * as i0 from "@angular/core";
-import { Component } from "@angular/core";
-var Ngblock = class Ngblock {
+import { ChangeDetectionStrategy, Component, input } from "@angular/core";
+var ButtonComponent = class ButtonComponent {
+	type = input("button", ...ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []);
+	disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
 		version: "22.2.4",
 		ngImport: i0,
-		type: Ngblock,
+		type: ButtonComponent,
 		deps: [],
 		target: i0.ɵɵFactoryTarget.Component
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
-		minVersion: "14.0.0",
+		minVersion: "17.1.0",
 		version: "22.2.4",
-		type: Ngblock,
+		type: ButtonComponent,
 		isStandalone: true,
-		selector: "lib-ngblock",
+		selector: "ngb-button",
+		inputs: {
+			type: {
+				classPropertyName: "type",
+				publicName: "type",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
 		ngImport: i0,
-		template: "<p>Ngblock works!</p>\n",
-		styles: [""]
+		template: "<button class=\"ngblock-button\" [type]=\"type()\" [disabled]=\"disabled()\">\n  <ng-content />\n</button>\n",
+		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"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
 	});
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
 	version: "22.2.4",
 	ngImport: i0,
-	type: Ngblock,
+	type: ButtonComponent,
 	decorators: [{
 		type: Component,
 		args: [{
-			selector: "lib-ngblock",
+			selector: "ngb-button",
 			imports: [],
-			template: "<p>Ngblock works!</p>\n"
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<button class=\"ngblock-button\" [type]=\"type()\" [disabled]=\"disabled()\">\n  <ng-content />\n</button>\n",
+			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"]
 		}]
-	}]
+	}],
+	propDecorators: {
+		type: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "type",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}]
+	}
 });
-export { Ngblock };
+export { ButtonComponent };
 
 //# sourceMappingURL=ngblock.mjs.map

package/fesm2022/ngblock.mjs.map

@@ -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"}
+{"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

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

package/types/ngblock.d.ts

@@ -1,5 +1,18 @@
 import * as i0 from "@angular/core";
-export declare class Ngblock {
-  static ɵfac: i0.ɵɵFactoryDeclaration<Ngblock, never>;
-  static ɵcmp: i0.ɵɵComponentDeclaration<Ngblock, "lib-ngblock", never, {}, {}, never, never, true, never>;
+export declare class ButtonComponent {
+  readonly type: import("@angular/core").InputSignal<"submit" | "reset" | "button">;
+  readonly disabled: import("@angular/core").InputSignal<boolean>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<ButtonComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "ngb-button", never, {
+    "type": {
+      "alias": "type";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["*"], true, never>;
 }