@unofficialbox/box-open-elements-angular 0.7.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 box-open-elements contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,29 @@
+# @unofficialbox/box-open-elements-angular
+
+Typed standalone Angular 20 directives for `box-open-elements`. Import
+`Button`, `TextField`, `Select`, and `Dialog` in a standalone component to get
+typed inputs, custom-event outputs, element access, and automatic registration.
+
+```bash
+npm install @unofficialbox/box-open-elements @unofficialbox/box-open-elements-angular @angular/core
+```
+
+```ts
+import { Component } from "@angular/core";
+import { Button, Select, TextField } from "@unofficialbox/box-open-elements-angular";
+
+@Component({
+  standalone: true,
+  imports: [Button, Select, TextField],
+  template: `<box-select [options]="options" (value-changed)="setStatus($event)" />`,
+})
+export class Example {
+  options = [{ label: "Draft", value: "draft" }];
+  setStatus(event: CustomEvent<{ value: string }>) {}
+}
+```
+
+`createExplorerSelectionSignal(controller)` exposes the shared selection
+controller as a scoped Angular signal. Version `0.1.0` is a release candidate;
+Supported status follows the first public lockstep adapter release and clean
+registry-install verification.

package/dist/button.d.ts

@@ -0,0 +1,14 @@
+import { ElementRef } from "@angular/core";
+import { Button as ButtonElement } from "@unofficialbox/box-open-elements/button";
+import * as i0 from "@angular/core";
+/** Typed standalone Angular directive for `<box-button>`. */
+export declare class Button {
+    readonly element: ButtonElement;
+    constructor(host: ElementRef<ButtonElement>);
+    set label(value: string | undefined);
+    set tone(value: string | undefined);
+    set size(value: string | undefined);
+    set disabled(value: boolean | undefined);
+    static ɵfac: i0.ɵɵFactoryDeclaration<Button, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<Button, "box-button", never, { "label": { "alias": "label"; "required": false; }; "tone": { "alias": "tone"; "required": false; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, never, true, never>;
+}

package/dist/button.js

@@ -0,0 +1,39 @@
+import { Directive, Input } from "@angular/core";
+import { Button as ButtonElement } from "@unofficialbox/box-open-elements/button";
+import * as i0 from "@angular/core";
+ButtonElement.register();
+/** Typed standalone Angular directive for `<box-button>`. */
+export class Button {
+    constructor(host) {
+        this.element = host.nativeElement;
+    }
+    set label(value) {
+        if (value !== undefined)
+            this.element.label = value;
+    }
+    set tone(value) {
+        if (value !== undefined)
+            this.element.tone = value;
+    }
+    set size(value) {
+        if (value !== undefined)
+            this.element.size = value;
+    }
+    set disabled(value) {
+        this.element.disabled = Boolean(value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: Button, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: Button, isStandalone: true, selector: "box-button", inputs: { label: "label", tone: "tone", size: "size", disabled: "disabled" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: Button, decorators: [{
+            type: Directive,
+            args: [{ selector: "box-button", standalone: true }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { label: [{
+                type: Input
+            }], tone: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }] } });

package/dist/dialog.d.ts

@@ -0,0 +1,26 @@
+import { ElementRef, EventEmitter, OnDestroy } from "@angular/core";
+import { Dialog as DialogElement } from "@unofficialbox/box-open-elements/dialog";
+import * as i0 from "@angular/core";
+export type DialogSize = "small" | "medium" | "large" | "fullscreen";
+export type OpenChangedEvent = CustomEvent<{
+    open: boolean;
+}>;
+/** Typed standalone Angular directive for the controlled `<box-dialog>`. */
+export declare class Dialog implements OnDestroy {
+    readonly element: DialogElement;
+    private readonly openChangedListener;
+    private readonly confirmListener;
+    private readonly cancelListener;
+    readonly openChanged: EventEmitter<OpenChangedEvent>;
+    readonly confirm: EventEmitter<CustomEvent<null>>;
+    readonly cancel: EventEmitter<CustomEvent<null>>;
+    constructor(host: ElementRef<DialogElement>);
+    set open(value: boolean | undefined);
+    set heading(value: string | undefined);
+    set description(value: string | undefined);
+    set confirmLabel(value: string | undefined);
+    set size(value: DialogSize | undefined);
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<Dialog, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<Dialog, "box-dialog", never, { "open": { "alias": "open"; "required": false; }; "heading": { "alias": "heading"; "required": false; }; "description": { "alias": "description"; "required": false; }; "confirmLabel": { "alias": "confirmLabel"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "openChanged": "open-changed"; "confirm": "confirm"; "cancel": "cancel"; }, never, never, true, never>;
+}

package/dist/dialog.js

@@ -0,0 +1,72 @@
+import { Directive, EventEmitter, Input, Output, } from "@angular/core";
+import { Dialog as DialogElement } from "@unofficialbox/box-open-elements/dialog";
+import * as i0 from "@angular/core";
+DialogElement.register();
+/** Typed standalone Angular directive for the controlled `<box-dialog>`. */
+export class Dialog {
+    constructor(host) {
+        this.openChangedListener = (event) => {
+            this.openChanged.emit(event);
+        };
+        this.confirmListener = (event) => {
+            this.confirm.emit(event);
+        };
+        this.cancelListener = (event) => {
+            this.cancel.emit(event);
+        };
+        this.openChanged = new EventEmitter();
+        this.confirm = new EventEmitter();
+        this.cancel = new EventEmitter();
+        this.element = host.nativeElement;
+        this.element.addEventListener("open-changed", this.openChangedListener);
+        this.element.addEventListener("confirm", this.confirmListener);
+        this.element.addEventListener("cancel", this.cancelListener);
+    }
+    set open(value) {
+        this.element.open = Boolean(value);
+    }
+    set heading(value) {
+        if (value !== undefined)
+            this.element.heading = value;
+    }
+    set description(value) {
+        if (value !== undefined)
+            this.element.description = value;
+    }
+    set confirmLabel(value) {
+        if (value !== undefined)
+            this.element.confirmLabel = value;
+    }
+    set size(value) {
+        if (value !== undefined)
+            this.element.size = value;
+    }
+    ngOnDestroy() {
+        this.element.removeEventListener("open-changed", this.openChangedListener);
+        this.element.removeEventListener("confirm", this.confirmListener);
+        this.element.removeEventListener("cancel", this.cancelListener);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: Dialog, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: Dialog, isStandalone: true, selector: "box-dialog", inputs: { open: "open", heading: "heading", description: "description", confirmLabel: "confirmLabel", size: "size" }, outputs: { openChanged: "open-changed", confirm: "confirm", cancel: "cancel" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: Dialog, decorators: [{
+            type: Directive,
+            args: [{ selector: "box-dialog", standalone: true }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { openChanged: [{
+                type: Output,
+                args: ["open-changed"]
+            }], confirm: [{
+                type: Output
+            }], cancel: [{
+                type: Output
+            }], open: [{
+                type: Input
+            }], heading: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], confirmLabel: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }] } });

package/dist/explorer-selection.d.ts

@@ -0,0 +1,9 @@
+import { DestroyRef, type Signal } from "@angular/core";
+import { ExplorerSelectionController, type ExplorerSelectionState } from "@unofficialbox/box-open-elements/patterns/content-explorer/selection";
+export { ExplorerSelectionController };
+export type { ExplorerSelectionState };
+/**
+ * Exposes the framework-neutral selection controller as an Angular signal.
+ * Call inside an injection context, or pass a DestroyRef explicitly in tests.
+ */
+export declare const createExplorerSelectionSignal: (controller: ExplorerSelectionController, destroyRef?: DestroyRef) => Signal<Readonly<ExplorerSelectionState>>;

package/dist/explorer-selection.js

@@ -0,0 +1,20 @@
+import { DestroyRef, inject, signal } from "@angular/core";
+import { ExplorerSelectionController, } from "@unofficialbox/box-open-elements/patterns/content-explorer/selection";
+// Re-exported so a host can construct the controller through this package and
+// hand it straight to the adapter API. Classes with private fields are
+// nominally typed, so a host that imports the class from a differently
+// resolved copy of the core package gets an incompatible identity — one
+// import path sidesteps that whole class of version-skew errors.
+export { ExplorerSelectionController };
+/**
+ * Exposes the framework-neutral selection controller as an Angular signal.
+ * Call inside an injection context, or pass a DestroyRef explicitly in tests.
+ */
+export const createExplorerSelectionSignal = (controller, destroyRef = inject(DestroyRef)) => {
+    const state = signal(controller.getState(), ...(ngDevMode ? [{ debugName: "state" }] : []));
+    const unsubscribe = controller.subscribe("selectionChanged", () => {
+        state.set(controller.getState());
+    });
+    destroyRef.onDestroy(unsubscribe);
+    return state.asReadonly();
+};

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { Button } from "./button.js";
+export { Dialog, type DialogSize } from "./dialog.js";
+export { createExplorerSelectionSignal } from "./explorer-selection.js";
+export { Select, type SelectOption } from "./select.js";
+export { TextField, type ValueChangedDetail } from "./text-field.js";
+export { ExplorerSelectionController, type ExplorerSelectionState } from "./explorer-selection.js";

package/dist/index.js

@@ -0,0 +1,6 @@
+export { Button } from "./button.js";
+export { Dialog } from "./dialog.js";
+export { createExplorerSelectionSignal } from "./explorer-selection.js";
+export { Select } from "./select.js";
+export { TextField } from "./text-field.js";
+export { ExplorerSelectionController } from "./explorer-selection.js";

package/dist/select.d.ts

@@ -0,0 +1,26 @@
+import { ElementRef, EventEmitter, OnDestroy } from "@angular/core";
+import { Select as SelectElement } from "@unofficialbox/box-open-elements/select";
+import type { ValueChangedDetail } from "./text-field.js";
+import * as i0 from "@angular/core";
+export type SelectOption = {
+    label: string;
+    value: string;
+};
+export type SelectValueChangedEvent = CustomEvent<ValueChangedDetail>;
+/** Typed standalone Angular directive for `<box-select>`. */
+export declare class Select implements OnDestroy {
+    readonly element: SelectElement;
+    private readonly valueChangedListener;
+    readonly valueChanged: EventEmitter<SelectValueChangedEvent>;
+    constructor(host: ElementRef<SelectElement>);
+    set label(value: string | undefined);
+    set value(value: string | undefined);
+    set options(value: SelectOption[] | undefined);
+    set name(value: string | undefined);
+    set errorMessage(value: string | undefined);
+    set disabled(value: boolean | undefined);
+    set invalid(value: boolean | undefined);
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<Select, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<Select, "box-select", never, { "label": { "alias": "label"; "required": false; }; "value": { "alias": "value"; "required": false; }; "options": { "alias": "options"; "required": false; }; "name": { "alias": "name"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; }, { "valueChanged": "value-changed"; }, never, never, true, never>;
+}

package/dist/select.js

@@ -0,0 +1,67 @@
+import { Directive, EventEmitter, Input, Output, } from "@angular/core";
+import { Select as SelectElement } from "@unofficialbox/box-open-elements/select";
+import * as i0 from "@angular/core";
+SelectElement.register();
+/** Typed standalone Angular directive for `<box-select>`. */
+export class Select {
+    constructor(host) {
+        this.valueChangedListener = (event) => {
+            this.valueChanged.emit(event);
+        };
+        this.valueChanged = new EventEmitter();
+        this.element = host.nativeElement;
+        this.element.addEventListener("value-changed", this.valueChangedListener);
+    }
+    set label(value) {
+        if (value !== undefined)
+            this.element.label = value;
+    }
+    set value(value) {
+        if (value !== undefined)
+            this.element.value = value;
+    }
+    set options(value) {
+        if (value !== undefined)
+            this.element.options = value;
+    }
+    set name(value) {
+        if (value !== undefined)
+            this.element.name = value;
+    }
+    set errorMessage(value) {
+        if (value !== undefined)
+            this.element.errorMessage = value;
+    }
+    set disabled(value) {
+        this.element.disabled = Boolean(value);
+    }
+    set invalid(value) {
+        this.element.invalid = Boolean(value);
+    }
+    ngOnDestroy() {
+        this.element.removeEventListener("value-changed", this.valueChangedListener);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: Select, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: Select, isStandalone: true, selector: "box-select", inputs: { label: "label", value: "value", options: "options", name: "name", errorMessage: "errorMessage", disabled: "disabled", invalid: "invalid" }, outputs: { valueChanged: "value-changed" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: Select, decorators: [{
+            type: Directive,
+            args: [{ selector: "box-select", standalone: true }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { valueChanged: [{
+                type: Output,
+                args: ["value-changed"]
+            }], label: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], errorMessage: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], invalid: [{
+                type: Input
+            }] } });

package/dist/text-field.d.ts

@@ -0,0 +1,24 @@
+import { ElementRef, EventEmitter, OnDestroy } from "@angular/core";
+import { TextField as TextFieldElement } from "@unofficialbox/box-open-elements/text-field";
+import * as i0 from "@angular/core";
+export type ValueChangedDetail = {
+    value: string;
+};
+export type ValueChangedEvent = CustomEvent<ValueChangedDetail>;
+/** Typed standalone Angular directive for `<box-text-field>`. */
+export declare class TextField implements OnDestroy {
+    readonly element: TextFieldElement;
+    private readonly valueChangedListener;
+    readonly valueChanged: EventEmitter<ValueChangedEvent>;
+    constructor(host: ElementRef<TextFieldElement>);
+    set label(value: string | undefined);
+    set value(value: string | undefined);
+    set placeholder(value: string | undefined);
+    set name(value: string | undefined);
+    set errorMessage(value: string | undefined);
+    set disabled(value: boolean | undefined);
+    set invalid(value: boolean | undefined);
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TextField, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TextField, "box-text-field", never, { "label": { "alias": "label"; "required": false; }; "value": { "alias": "value"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "name": { "alias": "name"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; }, { "valueChanged": "value-changed"; }, never, never, true, never>;
+}

package/dist/text-field.js

@@ -0,0 +1,67 @@
+import { Directive, EventEmitter, Input, Output, } from "@angular/core";
+import { TextField as TextFieldElement } from "@unofficialbox/box-open-elements/text-field";
+import * as i0 from "@angular/core";
+TextFieldElement.register();
+/** Typed standalone Angular directive for `<box-text-field>`. */
+export class TextField {
+    constructor(host) {
+        this.valueChangedListener = (event) => {
+            this.valueChanged.emit(event);
+        };
+        this.valueChanged = new EventEmitter();
+        this.element = host.nativeElement;
+        this.element.addEventListener("value-changed", this.valueChangedListener);
+    }
+    set label(value) {
+        if (value !== undefined)
+            this.element.label = value;
+    }
+    set value(value) {
+        if (value !== undefined)
+            this.element.value = value;
+    }
+    set placeholder(value) {
+        if (value !== undefined)
+            this.element.placeholder = value;
+    }
+    set name(value) {
+        if (value !== undefined)
+            this.element.name = value;
+    }
+    set errorMessage(value) {
+        if (value !== undefined)
+            this.element.errorMessage = value;
+    }
+    set disabled(value) {
+        this.element.disabled = Boolean(value);
+    }
+    set invalid(value) {
+        this.element.invalid = Boolean(value);
+    }
+    ngOnDestroy() {
+        this.element.removeEventListener("value-changed", this.valueChangedListener);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: TextField, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: TextField, isStandalone: true, selector: "box-text-field", inputs: { label: "label", value: "value", placeholder: "placeholder", name: "name", errorMessage: "errorMessage", disabled: "disabled", invalid: "invalid" }, outputs: { valueChanged: "value-changed" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: TextField, decorators: [{
+            type: Directive,
+            args: [{ selector: "box-text-field", standalone: true }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { valueChanged: [{
+                type: Output,
+                args: ["value-changed"]
+            }], label: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], errorMessage: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], invalid: [{
+                type: Input
+            }] } });

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@unofficialbox/box-open-elements-angular",
+  "version": "0.7.0",
+  "description": "Typed Angular adapters for box-open-elements Web Components.",
+  "license": "MIT",
+  "homepage": "https://unofficialbox.github.io/box-open-elements",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/unofficialbox/box-open-elements.git",
+    "directory": "packages/angular"
+  },
+  "bugs": {
+    "url": "https://github.com/unofficialbox/box-open-elements/issues"
+  },
+  "keywords": ["angular", "web-components", "design-system", "box"],
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": ["dist"],
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=20.9.0"
+  },
+  "peerDependencies": {
+    "@angular/core": ">=20.0.0 <21.0.0",
+    "@unofficialbox/box-open-elements": "^0.7.0"
+  },
+  "scripts": {
+    "build": "ngc -p tsconfig.build.json",
+    "prepublishOnly": "bun run build",
+    "typecheck": "ngc -p tsconfig.json --noEmit"
+  }
+}