@luzmo/ngx-lucero 1.0.1-alpha.78

package/esm/components/status-light.js

@@ -0,0 +1,78 @@
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, Renderer2 } from '@angular/core';
+import '@luzmo/lucero/status-light';
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+/**
+ * Angular wrapper component for <luzmo-status-light>
+ *
+ * @slot (default) - text label of the Status Light
+ */
+export class LuzmoStatusLight {
+    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;
+    }
+    variant;
+    disabled;
+    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 'variant':
+                    this.setHostProperty('variant', changes['variant'].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() {
+        // No custom events for this wrapper.
+    }
+    static ɵfac = function LuzmoStatusLight_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoStatusLight)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoStatusLight, selectors: [["luzmo-status-light"]], inputs: { variant: "variant", disabled: "disabled" }, exportAs: ["luzmoStatusLight"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoStatusLight_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵprojection(0);
+        } }, encapsulation: 2, changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoStatusLight, [{
+        type: Component,
+        args: [{
+                selector: 'luzmo-status-light',
+                exportAs: 'luzmoStatusLight',
+                standalone: true,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content />'
+            }]
+    }], () => [], { variant: [{
+            type: Input,
+            args: [{ alias: 'variant' }]
+        }], disabled: [{
+            type: Input,
+            args: [{ alias: 'disabled' }]
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoStatusLight, { className: "LuzmoStatusLight", filePath: "components/status-light.ts", lineNumber: 18 }); })();

package/esm/components/swatch-group.d.ts

@@ -0,0 +1,37 @@
+import { OnChanges, SimpleChanges } from '@angular/core';
+import '@luzmo/lucero/swatch';
+import type { LuzmoSwatchGroup as LuzmoSwatchGroupHostElement, LuzmoSwatch } from '@luzmo/lucero/swatch';
+import * as i0 from "@angular/core";
+export declare class LuzmoSwatchGroup 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(): LuzmoSwatchGroupHostElement;
+    border?: ('none' | 'light' | undefined);
+    density?: 'compact' | 'spacious';
+    rounding?: ('none' | 'full' | undefined);
+    selected?: string[];
+    selects?: ('single' | 'multiple' | undefined);
+    shape?: ('rectangle' | undefined);
+    swatches?: LuzmoSwatch[];
+    rovingTabindexController?: unknown;
+    readonly changeEvent: 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;
+    focus(options?: FocusOptions): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoSwatchGroup, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoSwatchGroup, "luzmo-swatch-group", ["luzmoSwatchGroup"], { "border": { "alias": "border"; "required": false; }; "density": { "alias": "density"; "required": false; }; "rounding": { "alias": "rounding"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "selects": { "alias": "selects"; "required": false; }; "shape": { "alias": "shape"; "required": false; }; "swatches": { "alias": "swatches"; "required": false; }; "rovingTabindexController": { "alias": "roving-tabindex-controller"; "required": false; }; }, { "changeEvent": "change"; }, never, ["*"], true, never>;
+}
+/** The underlying custom element type for LuzmoSwatchGroup */
+export type LuzmoSwatchGroupElement = LuzmoSwatchGroupHostElement;

package/esm/components/swatch-group.js

@@ -0,0 +1,126 @@
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, output, Renderer2 } from '@angular/core';
+import '@luzmo/lucero/swatch';
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+/**
+ * Angular wrapper component for <luzmo-swatch-group>
+ *
+ * @slot (default) - Swatch elements to manage as a group
+ */
+export class LuzmoSwatchGroup {
+    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;
+    }
+    border;
+    density;
+    rounding;
+    selected;
+    selects;
+    shape;
+    swatches;
+    rovingTabindexController;
+    changeEvent = output({ alias: 'change' });
+    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 'border':
+                    this.setHostProperty('border', changes['border'].currentValue);
+                    break;
+                case 'density':
+                    this.setHostProperty('density', changes['density'].currentValue);
+                    break;
+                case 'rounding':
+                    this.setHostProperty('rounding', changes['rounding'].currentValue);
+                    break;
+                case 'selected':
+                    this.setHostProperty('selected', changes['selected'].currentValue);
+                    break;
+                case 'selects':
+                    this.setHostProperty('selects', changes['selects'].currentValue);
+                    break;
+                case 'shape':
+                    this.setHostProperty('shape', changes['shape'].currentValue);
+                    break;
+                case 'swatches':
+                    this.setHostProperty('swatches', changes['swatches'].currentValue);
+                    break;
+                case 'rovingTabindexController':
+                    this.setHostProperty('rovingTabindexController', changes['rovingTabindexController'].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, 'change', (event) => {
+            this.changeEvent.emit(event);
+        }));
+    }
+    focus(options) {
+        return this.host.focus(options);
+    }
+    static ɵfac = function LuzmoSwatchGroup_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoSwatchGroup)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoSwatchGroup, selectors: [["luzmo-swatch-group"]], inputs: { border: "border", density: "density", rounding: "rounding", selected: "selected", selects: "selects", shape: "shape", swatches: "swatches", rovingTabindexController: [0, "roving-tabindex-controller", "rovingTabindexController"] }, outputs: { changeEvent: "change" }, exportAs: ["luzmoSwatchGroup"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoSwatchGroup_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵprojection(0);
+        } }, encapsulation: 2, changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoSwatchGroup, [{
+        type: Component,
+        args: [{
+                selector: 'luzmo-swatch-group',
+                exportAs: 'luzmoSwatchGroup',
+                standalone: true,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content />'
+            }]
+    }], () => [], { border: [{
+            type: Input,
+            args: [{ alias: 'border' }]
+        }], density: [{
+            type: Input,
+            args: [{ alias: 'density' }]
+        }], rounding: [{
+            type: Input,
+            args: [{ alias: 'rounding' }]
+        }], selected: [{
+            type: Input,
+            args: [{ alias: 'selected' }]
+        }], selects: [{
+            type: Input,
+            args: [{ alias: 'selects' }]
+        }], shape: [{
+            type: Input,
+            args: [{ alias: 'shape' }]
+        }], swatches: [{
+            type: Input,
+            args: [{ alias: 'swatches' }]
+        }], rovingTabindexController: [{
+            type: Input,
+            args: [{ alias: 'roving-tabindex-controller' }]
+        }], changeEvent: [{ type: i0.Output, args: ["change"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoSwatchGroup, { className: "LuzmoSwatchGroup", filePath: "components/swatch-group.ts", lineNumber: 17 }); })();

package/esm/components/swatch.d.ts

@@ -0,0 +1,49 @@
+import { OnChanges, SimpleChanges } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import '@luzmo/lucero/swatch';
+import type { LuzmoSwatch as LuzmoSwatchHostElement } from '@luzmo/lucero/swatch';
+import * as i0 from "@angular/core";
+export declare class LuzmoSwatch 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(): LuzmoSwatchHostElement;
+    border?: ('none' | 'light' | undefined);
+    color?: string;
+    label?: string;
+    mixedValue?: boolean;
+    nothing?: boolean;
+    role?: string;
+    rounding?: ('none' | 'full' | undefined);
+    selected?: string[];
+    readonly?: boolean;
+    shape?: ('rectangle' | undefined);
+    value?: string;
+    readonly changeEvent: 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;
+    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;
+    toggle(force?: boolean): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoSwatch, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoSwatch, "luzmo-swatch", ["luzmoSwatch"], { "border": { "alias": "border"; "required": false; }; "color": { "alias": "color"; "required": false; }; "label": { "alias": "label"; "required": false; }; "mixedValue": { "alias": "mixed-value"; "required": false; }; "nothing": { "alias": "nothing"; "required": false; }; "role": { "alias": "role"; "required": false; }; "rounding": { "alias": "rounding"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "shape": { "alias": "shape"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "changeEvent": "change"; }, never, ["*"], true, never>;
+}
+/** The underlying custom element type for LuzmoSwatch */
+export type LuzmoSwatchElement = LuzmoSwatchHostElement;

package/esm/components/swatch.js

@@ -0,0 +1,197 @@
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, forwardRef, inject, Input, output, Renderer2 } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import '@luzmo/lucero/swatch';
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+/**
+ * Angular wrapper component for <luzmo-swatch>
+ */
+export class LuzmoSwatch {
+    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;
+    }
+    border;
+    color;
+    label;
+    mixedValue;
+    nothing;
+    role;
+    rounding;
+    selected;
+    readonly;
+    shape;
+    value;
+    changeEvent = output({ alias: 'change' });
+    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 'border':
+                    this.setHostProperty('border', changes['border'].currentValue);
+                    break;
+                case 'color':
+                    this.setHostProperty('color', changes['color'].currentValue);
+                    break;
+                case 'label':
+                    this.setHostProperty('label', changes['label'].currentValue);
+                    break;
+                case 'mixedValue':
+                    this.setHostProperty('mixedValue', changes['mixedValue'].currentValue);
+                    break;
+                case 'nothing':
+                    this.setHostProperty('nothing', changes['nothing'].currentValue);
+                    break;
+                case 'role':
+                    this.setHostProperty('role', changes['role'].currentValue);
+                    break;
+                case 'rounding':
+                    this.setHostProperty('rounding', changes['rounding'].currentValue);
+                    break;
+                case 'selected':
+                    this.setHostProperty('selected', changes['selected'].currentValue);
+                    break;
+                case 'readonly':
+                    this.setHostProperty('readonly', changes['readonly'].currentValue);
+                    break;
+                case 'shape':
+                    this.setHostProperty('shape', changes['shape'].currentValue);
+                    break;
+                case 'value':
+                    this.setHostProperty('value', changes['value'].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, 'change', (event) => {
+            this.changeEvent.emit(event);
+            if (!this.isWritingValue) {
+                const eventWithDetail = event;
+                const eventTarget = event.target;
+                const detail = 'detail' in eventWithDetail ? eventWithDetail.detail : undefined;
+                const hostRecord = this.host;
+                const nextValue = (detail
+                    ?? eventTarget?.['value']
+                    ?? hostRecord['value']);
+                if (Object.is(this.lastCvaValue, nextValue)) {
+                    return;
+                }
+                this.lastCvaValue = nextValue;
+                this.setHostProperty('value', nextValue);
+                this.onChange(nextValue);
+            }
+        }));
+        this.listenerCleanup.push(this.renderer.listen(this.host, 'blur', () => {
+            this.onTouched();
+        }));
+    }
+    onChange = () => { };
+    onTouched = () => { };
+    isWritingValue = false;
+    lastCvaValue;
+    writeValue(value) {
+        this.isWritingValue = true;
+        this.lastCvaValue = value;
+        this.setHostProperty('value', value);
+        this.isWritingValue = false;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        // Underlying element does not declare a 'disabled' field; nothing to do.
+        void isDisabled;
+    }
+    toggle(force) {
+        return this.host.toggle(force);
+    }
+    static ɵfac = function LuzmoSwatch_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoSwatch)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoSwatch, selectors: [["luzmo-swatch"]], inputs: { border: "border", color: "color", label: "label", mixedValue: [0, "mixed-value", "mixedValue"], nothing: "nothing", role: "role", rounding: "rounding", selected: "selected", readonly: "readonly", shape: "shape", value: "value" }, outputs: { changeEvent: "change" }, exportAs: ["luzmoSwatch"], features: [i0.ɵɵProvidersFeature([
+                {
+                    provide: NG_VALUE_ACCESSOR,
+                    useExisting: forwardRef(() => LuzmoSwatch),
+                    multi: true
+                }
+            ]), i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoSwatch_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵprojection(0);
+        } }, encapsulation: 2, changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoSwatch, [{
+        type: Component,
+        args: [{
+                selector: 'luzmo-swatch',
+                exportAs: 'luzmoSwatch',
+                standalone: true,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content />',
+                providers: [
+                    {
+                        provide: NG_VALUE_ACCESSOR,
+                        useExisting: forwardRef(() => LuzmoSwatch),
+                        multi: true
+                    }
+                ]
+            }]
+    }], () => [], { border: [{
+            type: Input,
+            args: [{ alias: 'border' }]
+        }], color: [{
+            type: Input,
+            args: [{ alias: 'color' }]
+        }], label: [{
+            type: Input,
+            args: [{ alias: 'label' }]
+        }], mixedValue: [{
+            type: Input,
+            args: [{ alias: 'mixed-value' }]
+        }], nothing: [{
+            type: Input,
+            args: [{ alias: 'nothing' }]
+        }], role: [{
+            type: Input,
+            args: [{ alias: 'role' }]
+        }], rounding: [{
+            type: Input,
+            args: [{ alias: 'rounding' }]
+        }], selected: [{
+            type: Input,
+            args: [{ alias: 'selected' }]
+        }], readonly: [{
+            type: Input,
+            args: [{ alias: 'readonly' }]
+        }], shape: [{
+            type: Input,
+            args: [{ alias: 'shape' }]
+        }], value: [{
+            type: Input,
+            args: [{ alias: 'value' }]
+        }], changeEvent: [{ type: i0.Output, args: ["change"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoSwatch, { className: "LuzmoSwatch", filePath: "components/swatch.ts", lineNumber: 23 }); })();

package/esm/components/switch.d.ts

@@ -0,0 +1,48 @@
+import { OnChanges, SimpleChanges } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import '@luzmo/lucero/switch';
+import type { LuzmoSwitch as LuzmoSwitchHostElement } from '@luzmo/lucero/switch';
+import * as i0 from "@angular/core";
+export declare class LuzmoSwitch 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(): LuzmoSwitchHostElement;
+    /** Deliver the Switch with additional visual emphasis. */
+    emphasized?: boolean;
+    /** Whether the thumb is within the Switch or overflows it. */
+    thumb?: 'overflow' | 'within';
+    /** The `checked` attribute reflects the state of the element */
+    checked?: boolean;
+    /** The name attribute of the element */
+    name?: string;
+    /** Whether the element is read-only */
+    readonly?: boolean;
+    /** Announces a change in the `checked` property of a Switch */
+    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: boolean): void;
+    registerOnChange(fn: (value: boolean) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoSwitch, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoSwitch, "luzmo-switch", ["luzmoSwitch"], { "emphasized": { "alias": "emphasized"; "required": false; }; "thumb": { "alias": "thumb"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "name": { "alias": "name"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; }, { "changeEvent": "change"; }, never, ["*"], true, never>;
+}
+/** The underlying custom element type for LuzmoSwitch */
+export type LuzmoSwitchElement = LuzmoSwitchHostElement;