@luzmo/ngx-lucero 1.0.1-alpha.78

package/README.md

@@ -0,0 +1,41 @@
+# Luzmo Lucero Design System - Angular Wrappers
+
+> Standalone Angular wrapper components for Lucero web components
+
+This package provides Angular wrappers for the Luzmo Lucero Design System web components.
+
+## Installation
+
+```bash
+npm install @luzmo/ngx-lucero @luzmo/lucero @angular/core @angular/forms
+```
+
+## Requirements
+
+- Angular `>= 17.3` (the wrappers use the functional `output()` API).
+- The peer package `@luzmo/lucero` provides the underlying custom-element
+  classes that the wrappers register at import time.
+
+## Usage
+
+```ts
+import { Component } from '@angular/core';
+import { LuzmoButton } from '@luzmo/ngx-lucero';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [LuzmoButton],
+  template: `<luzmo-button>Click me</luzmo-button>`
+})
+export class AppComponent {}
+```
+
+The wrapper class name mirrors the host element (`LuzmoButton`); the
+underlying `HTMLElement` subclass type is re-exported as
+`LuzmoButtonElement` for `@ViewChild` / `ElementRef<T>` use cases.
+
+## Notes
+
+- This package depends on `@luzmo/lucero` for the underlying custom elements.
+- Keep this file under `wrappers/angular/package/` to customize published README content.

package/esm/components/accordion-item.d.ts

@@ -0,0 +1,32 @@
+import { OnChanges, SimpleChanges } from '@angular/core';
+import '@luzmo/lucero/accordion';
+import type { LuzmoAccordionItem as LuzmoAccordionItemHostElement } from '@luzmo/lucero/accordion';
+import * as i0 from "@angular/core";
+export declare class LuzmoAccordionItem implements OnChanges {
+    private readonly elementRef;
+    private readonly renderer;
+    private readonly destroyRef;
+    private readonly host;
+    private readonly listenerCleanup;
+    /** The underlying custom element instance. Use to call imperative methods. */
+    get nativeElement(): LuzmoAccordionItemHostElement;
+    open?: boolean;
+    label?: string;
+    disabled?: boolean;
+    /** Announce that an accordion item has been toggled while allowing the event to be cancelled. */
+    readonly luzmoAccordionItemToggleEvent: import("@angular/core").OutputEmitterRef<CustomEvent<unknown>>;
+    constructor();
+    ngOnChanges(changes: SimpleChanges): void;
+    /**
+     * Forward a wrapper @Input to the underlying host element via Renderer2 so
+     * the wrapper stays compatible with non-DOM Angular platforms (SSR, tests).
+     * Unlike a "skip undefined" guard, this lets consumers reset values back to
+     * undefined / null by clearing their bindings.
+     */
+    private setHostProperty;
+    private bindEvents;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoAccordionItem, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoAccordionItem, "luzmo-accordion-item", ["luzmoAccordionItem"], { "open": { "alias": "open"; "required": false; }; "label": { "alias": "label"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "luzmoAccordionItemToggleEvent": "luzmo-accordion-item-toggle"; }, never, ["*"], true, never>;
+}
+/** The underlying custom element type for LuzmoAccordionItem */
+export type LuzmoAccordionItemElement = LuzmoAccordionItemHostElement;

package/esm/components/accordion-item.js

@@ -0,0 +1,89 @@
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, output, Renderer2 } from '@angular/core';
+import '@luzmo/lucero/accordion';
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+/**
+ * Angular wrapper component for <luzmo-accordion-item>
+ *
+ * @slot (default) - The content of the item that is hidden when the item is not open
+ */
+export class LuzmoAccordionItem {
+    elementRef = inject(ElementRef);
+    renderer = inject(Renderer2);
+    destroyRef = inject(DestroyRef);
+    host = this.elementRef.nativeElement;
+    listenerCleanup = [];
+    /** The underlying custom element instance. Use to call imperative methods. */
+    get nativeElement() {
+        return this.host;
+    }
+    open;
+    label;
+    disabled;
+    /** Announce that an accordion item has been toggled while allowing the event to be cancelled. */
+    luzmoAccordionItemToggleEvent = output({ alias: 'luzmo-accordion-item-toggle' });
+    constructor() {
+        this.bindEvents();
+        this.destroyRef.onDestroy(() => {
+            for (const cleanup of this.listenerCleanup) {
+                cleanup();
+            }
+        });
+    }
+    ngOnChanges(changes) {
+        for (const key of Object.keys(changes)) {
+            switch (key) {
+                case 'open':
+                    this.setHostProperty('open', changes['open'].currentValue);
+                    break;
+                case 'label':
+                    this.setHostProperty('label', changes['label'].currentValue);
+                    break;
+                case 'disabled':
+                    this.setHostProperty('disabled', changes['disabled'].currentValue);
+                    break;
+                default:
+                    break;
+            }
+        }
+    }
+    /**
+     * Forward a wrapper @Input to the underlying host element via Renderer2 so
+     * the wrapper stays compatible with non-DOM Angular platforms (SSR, tests).
+     * Unlike a "skip undefined" guard, this lets consumers reset values back to
+     * undefined / null by clearing their bindings.
+     */
+    setHostProperty(key, value) {
+        this.renderer.setProperty(this.host, key, value);
+    }
+    bindEvents() {
+        this.listenerCleanup.push(this.renderer.listen(this.host, 'luzmo-accordion-item-toggle', (event) => {
+            this.luzmoAccordionItemToggleEvent.emit(event);
+        }));
+    }
+    static ɵfac = function LuzmoAccordionItem_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoAccordionItem)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoAccordionItem, selectors: [["luzmo-accordion-item"]], inputs: { open: "open", label: "label", disabled: "disabled" }, outputs: { luzmoAccordionItemToggleEvent: "luzmo-accordion-item-toggle" }, exportAs: ["luzmoAccordionItem"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoAccordionItem_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵprojection(0);
+        } }, encapsulation: 2, changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoAccordionItem, [{
+        type: Component,
+        args: [{
+                selector: 'luzmo-accordion-item',
+                exportAs: 'luzmoAccordionItem',
+                standalone: true,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content />'
+            }]
+    }], () => [], { open: [{
+            type: Input,
+            args: [{ alias: 'open' }]
+        }], label: [{
+            type: Input,
+            args: [{ alias: 'label' }]
+        }], disabled: [{
+            type: Input,
+            args: [{ alias: 'disabled' }]
+        }], luzmoAccordionItemToggleEvent: [{ type: i0.Output, args: ["luzmo-accordion-item-toggle"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoAccordionItem, { className: "LuzmoAccordionItem", filePath: "components/accordion-item.ts", lineNumber: 17 }); })();

package/esm/components/accordion.d.ts

@@ -0,0 +1,38 @@
+import { OnChanges, SimpleChanges } from '@angular/core';
+import '@luzmo/lucero/accordion';
+import type { LuzmoAccordion as LuzmoAccordionHostElement } from '@luzmo/lucero/accordion';
+import * as i0 from "@angular/core";
+export declare class LuzmoAccordion implements OnChanges {
+    private readonly elementRef;
+    private readonly renderer;
+    private readonly destroyRef;
+    private readonly host;
+    private readonly listenerCleanup;
+    /** The underlying custom element instance. Use to call imperative methods. */
+    get nativeElement(): LuzmoAccordionHostElement;
+    /** Allows multiple accordion items to be opened at the same time */
+    allowMultiple?: boolean;
+    /** Sets the spacing between the content to borders of an accordion item */
+    density?: 'compact' | 'spacious';
+    /** Sets the case of an accordion item header */
+    headerCase?: 'uppercase' | 'default';
+    /** If true removes the left and right padding from the content of the accordion item */
+    noContentPadding?: boolean;
+    /** Default variant without background or highlight variant with */
+    variant?: 'highlight' | 'highlight-child' | 'default';
+    constructor();
+    ngOnChanges(changes: SimpleChanges): void;
+    /**
+     * Forward a wrapper @Input to the underlying host element via Renderer2 so
+     * the wrapper stays compatible with non-DOM Angular platforms (SSR, tests).
+     * Unlike a "skip undefined" guard, this lets consumers reset values back to
+     * undefined / null by clearing their bindings.
+     */
+    private setHostProperty;
+    private bindEvents;
+    focus(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoAccordion, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoAccordion, "luzmo-accordion", ["luzmoAccordion"], { "allowMultiple": { "alias": "allow-multiple"; "required": false; }; "density": { "alias": "density"; "required": false; }; "headerCase": { "alias": "header-case"; "required": false; }; "noContentPadding": { "alias": "no-content-padding"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+/** The underlying custom element type for LuzmoAccordion */
+export type LuzmoAccordionElement = LuzmoAccordionHostElement;

package/esm/components/accordion.js

@@ -0,0 +1,107 @@
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, Renderer2 } from '@angular/core';
+import '@luzmo/lucero/accordion';
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+/**
+ * Angular wrapper component for <luzmo-accordion>
+ *
+ * @slot (default) - The luzmo-accordion-item children to display.
+ */
+export class LuzmoAccordion {
+    elementRef = inject(ElementRef);
+    renderer = inject(Renderer2);
+    destroyRef = inject(DestroyRef);
+    host = this.elementRef.nativeElement;
+    listenerCleanup = [];
+    /** The underlying custom element instance. Use to call imperative methods. */
+    get nativeElement() {
+        return this.host;
+    }
+    /** Allows multiple accordion items to be opened at the same time */
+    allowMultiple;
+    /** Sets the spacing between the content to borders of an accordion item */
+    density;
+    /** Sets the case of an accordion item header */
+    headerCase;
+    /** If true removes the left and right padding from the content of the accordion item */
+    noContentPadding;
+    /** Default variant without background or highlight variant with */
+    variant;
+    constructor() {
+        this.bindEvents();
+        this.destroyRef.onDestroy(() => {
+            for (const cleanup of this.listenerCleanup) {
+                cleanup();
+            }
+        });
+    }
+    ngOnChanges(changes) {
+        for (const key of Object.keys(changes)) {
+            switch (key) {
+                case 'allowMultiple':
+                    this.setHostProperty('allowMultiple', changes['allowMultiple'].currentValue);
+                    break;
+                case 'density':
+                    this.setHostProperty('density', changes['density'].currentValue);
+                    break;
+                case 'headerCase':
+                    this.setHostProperty('headerCase', changes['headerCase'].currentValue);
+                    break;
+                case 'noContentPadding':
+                    this.setHostProperty('noContentPadding', changes['noContentPadding'].currentValue);
+                    break;
+                case 'variant':
+                    this.setHostProperty('variant', changes['variant'].currentValue);
+                    break;
+                default:
+                    break;
+            }
+        }
+    }
+    /**
+     * Forward a wrapper @Input to the underlying host element via Renderer2 so
+     * the wrapper stays compatible with non-DOM Angular platforms (SSR, tests).
+     * Unlike a "skip undefined" guard, this lets consumers reset values back to
+     * undefined / null by clearing their bindings.
+     */
+    setHostProperty(key, value) {
+        this.renderer.setProperty(this.host, key, value);
+    }
+    bindEvents() {
+        // No custom events for this wrapper.
+    }
+    focus() {
+        return this.host.focus();
+    }
+    static ɵfac = function LuzmoAccordion_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoAccordion)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoAccordion, selectors: [["luzmo-accordion"]], inputs: { allowMultiple: [0, "allow-multiple", "allowMultiple"], density: "density", headerCase: [0, "header-case", "headerCase"], noContentPadding: [0, "no-content-padding", "noContentPadding"], variant: "variant" }, exportAs: ["luzmoAccordion"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoAccordion_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵprojection(0);
+        } }, encapsulation: 2, changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoAccordion, [{
+        type: Component,
+        args: [{
+                selector: 'luzmo-accordion',
+                exportAs: 'luzmoAccordion',
+                standalone: true,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content />'
+            }]
+    }], () => [], { allowMultiple: [{
+            type: Input,
+            args: [{ alias: 'allow-multiple' }]
+        }], density: [{
+            type: Input,
+            args: [{ alias: 'density' }]
+        }], headerCase: [{
+            type: Input,
+            args: [{ alias: 'header-case' }]
+        }], noContentPadding: [{
+            type: Input,
+            args: [{ alias: 'no-content-padding' }]
+        }], variant: [{
+            type: Input,
+            args: [{ alias: 'variant' }]
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoAccordion, { className: "LuzmoAccordion", filePath: "components/accordion.ts", lineNumber: 17 }); })();

package/esm/components/action-bar.d.ts

@@ -0,0 +1,32 @@
+import { OnChanges, SimpleChanges } from '@angular/core';
+import '@luzmo/lucero/action-bar';
+import type { LuzmoActionBar as LuzmoActionBarHostElement } from '@luzmo/lucero/action-bar';
+import * as i0 from "@angular/core";
+export declare class LuzmoActionBar implements OnChanges {
+    private readonly elementRef;
+    private readonly renderer;
+    private readonly destroyRef;
+    private readonly host;
+    private readonly listenerCleanup;
+    /** The underlying custom element instance. Use to call imperative methods. */
+    get nativeElement(): LuzmoActionBarHostElement;
+    /** Deliver the Action Bar with additional visual emphasis. */
+    emphasized?: boolean;
+    /** The `open` attribute is used to control the visibility of the popover. */
+    open?: boolean;
+    readonly closeEvent: import("@angular/core").OutputEmitterRef<Event>;
+    constructor();
+    ngOnChanges(changes: SimpleChanges): void;
+    /**
+     * Forward a wrapper @Input to the underlying host element via Renderer2 so
+     * the wrapper stays compatible with non-DOM Angular platforms (SSR, tests).
+     * Unlike a "skip undefined" guard, this lets consumers reset values back to
+     * undefined / null by clearing their bindings.
+     */
+    private setHostProperty;
+    private bindEvents;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoActionBar, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoActionBar, "luzmo-action-bar", ["luzmoActionBar"], { "emphasized": { "alias": "emphasized"; "required": false; }; "open": { "alias": "open"; "required": false; }; }, { "closeEvent": "close"; }, never, ["*"], true, never>;
+}
+/** The underlying custom element type for LuzmoActionBar */
+export type LuzmoActionBarElement = LuzmoActionBarHostElement;

package/esm/components/action-bar.js

@@ -0,0 +1,83 @@
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, output, Renderer2 } from '@angular/core';
+import '@luzmo/lucero/action-bar';
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+/**
+ * Angular wrapper component for <luzmo-action-bar>
+ *
+ * @slot (default) - Content to display with the Action Bar
+ */
+export class LuzmoActionBar {
+    elementRef = inject(ElementRef);
+    renderer = inject(Renderer2);
+    destroyRef = inject(DestroyRef);
+    host = this.elementRef.nativeElement;
+    listenerCleanup = [];
+    /** The underlying custom element instance. Use to call imperative methods. */
+    get nativeElement() {
+        return this.host;
+    }
+    /** Deliver the Action Bar with additional visual emphasis. */
+    emphasized;
+    /** The `open` attribute is used to control the visibility of the popover. */
+    open;
+    closeEvent = output({ alias: 'close' });
+    constructor() {
+        this.bindEvents();
+        this.destroyRef.onDestroy(() => {
+            for (const cleanup of this.listenerCleanup) {
+                cleanup();
+            }
+        });
+    }
+    ngOnChanges(changes) {
+        for (const key of Object.keys(changes)) {
+            switch (key) {
+                case 'emphasized':
+                    this.setHostProperty('emphasized', changes['emphasized'].currentValue);
+                    break;
+                case 'open':
+                    this.setHostProperty('open', changes['open'].currentValue);
+                    break;
+                default:
+                    break;
+            }
+        }
+    }
+    /**
+     * Forward a wrapper @Input to the underlying host element via Renderer2 so
+     * the wrapper stays compatible with non-DOM Angular platforms (SSR, tests).
+     * Unlike a "skip undefined" guard, this lets consumers reset values back to
+     * undefined / null by clearing their bindings.
+     */
+    setHostProperty(key, value) {
+        this.renderer.setProperty(this.host, key, value);
+    }
+    bindEvents() {
+        this.listenerCleanup.push(this.renderer.listen(this.host, 'close', (event) => {
+            this.closeEvent.emit(event);
+        }));
+    }
+    static ɵfac = function LuzmoActionBar_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoActionBar)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoActionBar, selectors: [["luzmo-action-bar"]], inputs: { emphasized: "emphasized", open: "open" }, outputs: { closeEvent: "close" }, exportAs: ["luzmoActionBar"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoActionBar_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵprojection(0);
+        } }, encapsulation: 2, changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoActionBar, [{
+        type: Component,
+        args: [{
+                selector: 'luzmo-action-bar',
+                exportAs: 'luzmoActionBar',
+                standalone: true,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content />'
+            }]
+    }], () => [], { emphasized: [{
+            type: Input,
+            args: [{ alias: 'emphasized' }]
+        }], open: [{
+            type: Input,
+            args: [{ alias: 'open' }]
+        }], closeEvent: [{ type: i0.Output, args: ["close"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoActionBar, { className: "LuzmoActionBar", filePath: "components/action-bar.ts", lineNumber: 17 }); })();

package/esm/components/action-button.d.ts

@@ -0,0 +1,59 @@
+import { OnChanges, SimpleChanges } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import '@luzmo/lucero/action-button';
+import type { LuzmoActionButton as LuzmoActionButtonHostElement } from '@luzmo/lucero/action-button';
+import * as i0 from "@angular/core";
+export declare class LuzmoActionButton implements OnChanges, ControlValueAccessor {
+    private readonly elementRef;
+    private readonly renderer;
+    private readonly destroyRef;
+    private readonly host;
+    private readonly listenerCleanup;
+    /** The underlying custom element instance. Use to call imperative methods. */
+    get nativeElement(): LuzmoActionButtonHostElement;
+    /** Affects the display of a **selected** Action Button */
+    emphasized?: boolean;
+    /** Whether the Action Button should display a hold affordance */
+    holdAffordance?: boolean;
+    /** Whether the Action Button should show in a quiet state */
+    quiet?: boolean;
+    /** The role for the Action Button */
+    role?: string;
+    /** Whether an Action Button with `role='button'` should also be `aria-pressed='true'` */
+    selected?: boolean;
+    /** Whether to automatically manage the `selected` attribute on interaction and whether `aria-pressed="false"` should be used when `selected === false` */
+    toggles?: boolean;
+    /** The static color variant to use for the action button. */
+    staticColor?: 'white' | 'black';
+    /** The value of the Action Button */
+    value?: string;
+    active?: boolean;
+    /** The default behavior of the button. Possible values are: `button` (default), `submit`, and `reset`. */
+    type?: 'button' | 'submit' | 'reset';
+    /** Synthesizes a "longpress" interaction that signifies a `pointerdown` event that is >=300ms or a keyboard event where code is `Space` or code is `ArrowDown` while `altKey===true`. */
+    readonly longpressEvent: import("@angular/core").OutputEmitterRef<CustomEvent<unknown>>;
+    /** Announces a change in the `selected` property of an action button */
+    readonly changeEvent: import("@angular/core").OutputEmitterRef<CustomEvent<unknown>>;
+    constructor();
+    ngOnChanges(changes: SimpleChanges): void;
+    /**
+     * Forward a wrapper @Input to the underlying host element via Renderer2 so
+     * the wrapper stays compatible with non-DOM Angular platforms (SSR, tests).
+     * Unlike a "skip undefined" guard, this lets consumers reset values back to
+     * undefined / null by clearing their bindings.
+     */
+    private setHostProperty;
+    private bindEvents;
+    private onChange;
+    private onTouched;
+    private isWritingValue;
+    private lastCvaValue;
+    writeValue(value: string): void;
+    registerOnChange(fn: (value: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoActionButton, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoActionButton, "luzmo-action-button", ["luzmoActionButton"], { "emphasized": { "alias": "emphasized"; "required": false; }; "holdAffordance": { "alias": "hold-affordance"; "required": false; }; "quiet": { "alias": "quiet"; "required": false; }; "role": { "alias": "role"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "toggles": { "alias": "toggles"; "required": false; }; "staticColor": { "alias": "static-color"; "required": false; }; "value": { "alias": "value"; "required": false; }; "active": { "alias": "active"; "required": false; }; "type": { "alias": "type"; "required": false; }; }, { "longpressEvent": "longpress"; "changeEvent": "change"; }, never, ["*"], true, never>;
+}
+/** The underlying custom element type for LuzmoActionButton */
+export type LuzmoActionButtonElement = LuzmoActionButtonHostElement;