@luzmo/ngx-lucero 1.0.1-alpha.78

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

@@ -0,0 +1,39 @@
+import { OnChanges, SimpleChanges } from '@angular/core';
+import '@luzmo/lucero/radio';
+import type { LuzmoRadioGroup as LuzmoRadioGroupHostElement } from '@luzmo/lucero/radio';
+import * as i0 from "@angular/core";
+export declare class LuzmoRadioGroup 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(): LuzmoRadioGroupHostElement;
+    name?: string;
+    defaultNodes?: unknown;
+    rovingTabindexController?: unknown;
+    selected?: string;
+    helpTextManager?: unknown;
+    horizontal?: boolean;
+    invalid?: boolean;
+    label?: string;
+    vertical?: boolean;
+    /** An alteration to the value of the element has been committed by the user. */
+    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(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoRadioGroup, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoRadioGroup, "luzmo-radio-group", ["luzmoRadioGroup"], { "name": { "alias": "name"; "required": false; }; "defaultNodes": { "alias": "default-nodes"; "required": false; }; "rovingTabindexController": { "alias": "roving-tabindex-controller"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "helpTextManager": { "alias": "help-text-manager"; "required": false; }; "horizontal": { "alias": "horizontal"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "label": { "alias": "label"; "required": false; }; "vertical": { "alias": "vertical"; "required": false; }; }, { "changeEvent": "change"; }, never, ["*"], true, never>;
+}
+/** The underlying custom element type for LuzmoRadioGroup */
+export type LuzmoRadioGroupElement = LuzmoRadioGroupHostElement;

package/esm/components/radio-group.js

@@ -0,0 +1,136 @@
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, output, Renderer2 } from '@angular/core';
+import '@luzmo/lucero/radio';
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+/**
+ * Angular wrapper component for <luzmo-radio-group>
+ *
+ * @slot (default) - The `luzmo-radio` elements to display/manage in the group.
+ * @slot help-text - default or non-negative help text to associate to your form element
+ * @slot negative-help-text - negative help text to associate to your form element when `invalid`
+ */
+export class LuzmoRadioGroup {
+    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;
+    }
+    name;
+    defaultNodes;
+    rovingTabindexController;
+    selected;
+    helpTextManager;
+    horizontal;
+    invalid;
+    label;
+    vertical;
+    /** An alteration to the value of the element has been committed by the user. */
+    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 'name':
+                    this.setHostProperty('name', changes['name'].currentValue);
+                    break;
+                case 'defaultNodes':
+                    this.setHostProperty('defaultNodes', changes['defaultNodes'].currentValue);
+                    break;
+                case 'rovingTabindexController':
+                    this.setHostProperty('rovingTabindexController', changes['rovingTabindexController'].currentValue);
+                    break;
+                case 'selected':
+                    this.setHostProperty('selected', changes['selected'].currentValue);
+                    break;
+                case 'helpTextManager':
+                    this.setHostProperty('helpTextManager', changes['helpTextManager'].currentValue);
+                    break;
+                case 'horizontal':
+                    this.setHostProperty('horizontal', changes['horizontal'].currentValue);
+                    break;
+                case 'invalid':
+                    this.setHostProperty('invalid', changes['invalid'].currentValue);
+                    break;
+                case 'label':
+                    this.setHostProperty('label', changes['label'].currentValue);
+                    break;
+                case 'vertical':
+                    this.setHostProperty('vertical', changes['vertical'].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() {
+        return this.host.focus();
+    }
+    static ɵfac = function LuzmoRadioGroup_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoRadioGroup)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoRadioGroup, selectors: [["luzmo-radio-group"]], inputs: { name: "name", defaultNodes: [0, "default-nodes", "defaultNodes"], rovingTabindexController: [0, "roving-tabindex-controller", "rovingTabindexController"], selected: "selected", helpTextManager: [0, "help-text-manager", "helpTextManager"], horizontal: "horizontal", invalid: "invalid", label: "label", vertical: "vertical" }, outputs: { changeEvent: "change" }, exportAs: ["luzmoRadioGroup"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoRadioGroup_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵprojection(0);
+        } }, encapsulation: 2, changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoRadioGroup, [{
+        type: Component,
+        args: [{
+                selector: 'luzmo-radio-group',
+                exportAs: 'luzmoRadioGroup',
+                standalone: true,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content />'
+            }]
+    }], () => [], { name: [{
+            type: Input,
+            args: [{ alias: 'name' }]
+        }], defaultNodes: [{
+            type: Input,
+            args: [{ alias: 'default-nodes' }]
+        }], rovingTabindexController: [{
+            type: Input,
+            args: [{ alias: 'roving-tabindex-controller' }]
+        }], selected: [{
+            type: Input,
+            args: [{ alias: 'selected' }]
+        }], helpTextManager: [{
+            type: Input,
+            args: [{ alias: 'help-text-manager' }]
+        }], horizontal: [{
+            type: Input,
+            args: [{ alias: 'horizontal' }]
+        }], invalid: [{
+            type: Input,
+            args: [{ alias: 'invalid' }]
+        }], label: [{
+            type: Input,
+            args: [{ alias: 'label' }]
+        }], vertical: [{
+            type: Input,
+            args: [{ alias: 'vertical' }]
+        }], changeEvent: [{ type: i0.Output, args: ["change"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoRadioGroup, { className: "LuzmoRadioGroup", filePath: "components/radio-group.ts", lineNumber: 19 }); })();

package/esm/components/radio.d.ts

@@ -0,0 +1,46 @@
+import { OnChanges, SimpleChanges } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import '@luzmo/lucero/radio';
+import type { LuzmoRadio as LuzmoRadioHostElement } from '@luzmo/lucero/radio';
+import * as i0 from "@angular/core";
+export declare class LuzmoRadio 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(): LuzmoRadioHostElement;
+    value?: string;
+    checked?: boolean;
+    disabled?: boolean;
+    emphasized?: boolean;
+    invalid?: boolean;
+    readonly?: boolean;
+    /** Trick :focus-visible polyfill into thinking keyboard based focus */
+    readonly keydownEvent: import("@angular/core").OutputEmitterRef<unknown>;
+    /** When the input is interacted with and its state is changed */
+    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;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoRadio, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoRadio, "luzmo-radio", ["luzmoRadio"], { "value": { "alias": "value"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "emphasized": { "alias": "emphasized"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; }, { "keydownEvent": "keydown"; "changeEvent": "change"; }, never, ["*"], true, never>;
+}
+/** The underlying custom element type for LuzmoRadio */
+export type LuzmoRadioElement = LuzmoRadioHostElement;

package/esm/components/radio.js

@@ -0,0 +1,172 @@
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, forwardRef, inject, Input, output, Renderer2 } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import '@luzmo/lucero/radio';
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+/**
+ * Angular wrapper component for <luzmo-radio>
+ *
+ * @slot (default) - text label of the Radio button
+ */
+export class LuzmoRadio {
+    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;
+    }
+    value;
+    checked;
+    disabled;
+    emphasized;
+    invalid;
+    readonly;
+    /** Trick :focus-visible polyfill into thinking keyboard based focus */
+    keydownEvent = output({ alias: 'keydown' });
+    /** When the input is interacted with and its state is changed */
+    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 'value':
+                    this.setHostProperty('value', changes['value'].currentValue);
+                    break;
+                case 'checked':
+                    this.setHostProperty('checked', changes['checked'].currentValue);
+                    break;
+                case 'disabled':
+                    this.setHostProperty('disabled', changes['disabled'].currentValue);
+                    break;
+                case 'emphasized':
+                    this.setHostProperty('emphasized', changes['emphasized'].currentValue);
+                    break;
+                case 'invalid':
+                    this.setHostProperty('invalid', changes['invalid'].currentValue);
+                    break;
+                case 'readonly':
+                    this.setHostProperty('readonly', changes['readonly'].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, 'keydown', (event) => {
+            this.keydownEvent.emit(event);
+        }));
+        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) {
+        this.setHostProperty('disabled', isDisabled);
+        if (isDisabled) {
+            this.renderer.setAttribute(this.host, 'disabled', '');
+        }
+        else {
+            this.renderer.removeAttribute(this.host, 'disabled');
+        }
+    }
+    static ɵfac = function LuzmoRadio_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoRadio)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoRadio, selectors: [["luzmo-radio"]], inputs: { value: "value", checked: "checked", disabled: "disabled", emphasized: "emphasized", invalid: "invalid", readonly: "readonly" }, outputs: { keydownEvent: "keydown", changeEvent: "change" }, exportAs: ["luzmoRadio"], features: [i0.ɵɵProvidersFeature([
+                {
+                    provide: NG_VALUE_ACCESSOR,
+                    useExisting: forwardRef(() => LuzmoRadio),
+                    multi: true
+                }
+            ]), i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoRadio_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵprojection(0);
+        } }, encapsulation: 2, changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoRadio, [{
+        type: Component,
+        args: [{
+                selector: 'luzmo-radio',
+                exportAs: 'luzmoRadio',
+                standalone: true,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content />',
+                providers: [
+                    {
+                        provide: NG_VALUE_ACCESSOR,
+                        useExisting: forwardRef(() => LuzmoRadio),
+                        multi: true
+                    }
+                ]
+            }]
+    }], () => [], { value: [{
+            type: Input,
+            args: [{ alias: 'value' }]
+        }], checked: [{
+            type: Input,
+            args: [{ alias: 'checked' }]
+        }], disabled: [{
+            type: Input,
+            args: [{ alias: 'disabled' }]
+        }], emphasized: [{
+            type: Input,
+            args: [{ alias: 'emphasized' }]
+        }], invalid: [{
+            type: Input,
+            args: [{ alias: 'invalid' }]
+        }], readonly: [{
+            type: Input,
+            args: [{ alias: 'readonly' }]
+        }], keydownEvent: [{ type: i0.Output, args: ["keydown"] }], changeEvent: [{ type: i0.Output, args: ["change"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoRadio, { className: "LuzmoRadio", filePath: "components/radio.ts", lineNumber: 25 }); })();

package/esm/components/search.d.ts

@@ -0,0 +1,95 @@
+import { OnChanges, SimpleChanges } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import '@luzmo/lucero/search';
+import type { LuzmoSearch as LuzmoSearchHostElement } from '@luzmo/lucero/search';
+import * as i0 from "@angular/core";
+export declare class LuzmoSearch 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(): LuzmoSearchHostElement;
+    action?: string;
+    /** A string applied via `aria-label` to the form control when a user visible label is not provided. */
+    label?: string;
+    border?: 'none';
+    method?: 'get' | 'post' | 'dialog';
+    /** Text that appears in the form control when it has no value set */
+    placeholder?: string;
+    holdValueOnEscape?: boolean;
+    form?: unknown;
+    /** The value held by the form control */
+    value?: string | number;
+    helpTextManager?: unknown;
+    /** A regular expression outlining the keys that will be allowed to update the value of the form control. */
+    allowedKeys?: string;
+    /** Whether the `value` held by the form control is invalid. */
+    invalid?: boolean;
+    /** Name of the form control. */
+    name?: string;
+    type?: unknown;
+    /** Pattern the `value` must match to be valid */
+    pattern?: string;
+    /** Whether a form control delivered with the `multiline` attribute will change size vertically to accomodate longer input */
+    grows?: boolean;
+    /** Defines the maximum string length that the user can enter */
+    maxlength?: number;
+    /** Defines the minimum string length that the user can enter */
+    minlength?: number;
+    /** Whether the form control should accept a value longer than one line */
+    multiline?: boolean;
+    /** Whether a user can interact with the value of the form control */
+    readonly?: boolean;
+    /** The specific number of rows the form control should provide in the user interface */
+    rows?: number;
+    /** The maximum number of rows the form control should grow to when `grows` is enabled. When content exceeds this limit, the textarea will show a scrollbar. A value of -1 means no maximum (unlimited growth). When set, the value must be >= 1; values < 1 will be disregarded. */
+    maxRows?: number;
+    /** Whether the `value` held by the form control is valid. */
+    valid?: boolean;
+    /** Whether to hide the validation state icons (valid/invalid icons). */
+    hideValidationIcons?: boolean;
+    /** Whether to display the form control with no visible background */
+    quiet?: boolean;
+    /** Whether the form control will be found to be invalid when it holds no `value` */
+    required?: boolean;
+    /** What form of assistance should be provided when attempting to supply a value to the form control */
+    autocomplete?: unknown;
+    /** The search form has been submitted. */
+    readonly submitEvent: import("@angular/core").OutputEmitterRef<Event>;
+    /** An alteration to the value of the element has been committed by the user. */
+    readonly changeEvent: import("@angular/core").OutputEmitterRef<Event>;
+    /** The value of the element has changed. */
+    readonly inputEvent: import("@angular/core").OutputEmitterRef<CustomEvent<unknown>>;
+    /** A key has been pressed. */
+    readonly keypressEvent: 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 | number): void;
+    registerOnChange(fn: (value: string | number) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    reset(): Promise<void>;
+    /** Sets the start and end positions of the current selection. */
+    setSelectionRange(selectionStart: number, selectionEnd: number, selectionDirection?: 'forward' | 'backward' | 'none'): void;
+    /** Selects all the text. */
+    select(): void;
+    checkValidity(): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoSearch, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoSearch, "luzmo-search", ["luzmoSearch"], { "action": { "alias": "action"; "required": false; }; "label": { "alias": "label"; "required": false; }; "border": { "alias": "border"; "required": false; }; "method": { "alias": "method"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "holdValueOnEscape": { "alias": "hold-value-on-escape"; "required": false; }; "form": { "alias": "form"; "required": false; }; "value": { "alias": "value"; "required": false; }; "helpTextManager": { "alias": "help-text-manager"; "required": false; }; "allowedKeys": { "alias": "allowed-keys"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "name": { "alias": "name"; "required": false; }; "type": { "alias": "type"; "required": false; }; "pattern": { "alias": "pattern"; "required": false; }; "grows": { "alias": "grows"; "required": false; }; "maxlength": { "alias": "maxlength"; "required": false; }; "minlength": { "alias": "minlength"; "required": false; }; "multiline": { "alias": "multiline"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "maxRows": { "alias": "max-rows"; "required": false; }; "valid": { "alias": "valid"; "required": false; }; "hideValidationIcons": { "alias": "hide-validation-icons"; "required": false; }; "quiet": { "alias": "quiet"; "required": false; }; "required": { "alias": "required"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; }, { "submitEvent": "submit"; "changeEvent": "change"; "inputEvent": "input"; "keypressEvent": "keypress"; }, never, ["*"], true, never>;
+}
+/** The underlying custom element type for LuzmoSearch */
+export type LuzmoSearchElement = LuzmoSearchHostElement;