@luzmo/ngx-lucero 1.0.1-alpha.78

package/esm/components/tabs.js

@@ -0,0 +1,150 @@
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, output, Renderer2 } from '@angular/core';
+import '@luzmo/lucero/tabs';
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+/**
+ * Angular wrapper component for <luzmo-tabs>
+ *
+ * @slot (default) - Tab elements to manage as a group
+ * @slot tab-panel - Tab Panel elements related to the listed Tab elements
+ * @csspart tablist - Container element for the slotted luzmo-tab elements
+ */
+export class LuzmoTabs {
+    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;
+    }
+    /** Whether to activate a tab on keyboard focus or not.  By default a tab is activated via a "click" interaction. This is specifically intended for when tab content cannot be displayed instantly, e.g. not all of the DOM content is available, etc. To learn more about "Deciding When to Make Selection Automatically Follow Focus", visit: https://w3c.github.io/aria-practices/#kbd_selection_follows_focus */
+    auto;
+    /** The tab items are displayed closer together. */
+    compact;
+    dir;
+    direction;
+    emphasized;
+    label;
+    enableTabsScroll;
+    /** The tab list is displayed without a border. */
+    quiet;
+    selectionIndicatorStyle;
+    shouldAnimate;
+    selected;
+    /** The selected Tab child has 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 'auto':
+                    this.setHostProperty('auto', changes['auto'].currentValue);
+                    break;
+                case 'compact':
+                    this.setHostProperty('compact', changes['compact'].currentValue);
+                    break;
+                case 'dir':
+                    this.setHostProperty('dir', changes['dir'].currentValue);
+                    break;
+                case 'direction':
+                    this.setHostProperty('direction', changes['direction'].currentValue);
+                    break;
+                case 'emphasized':
+                    this.setHostProperty('emphasized', changes['emphasized'].currentValue);
+                    break;
+                case 'label':
+                    this.setHostProperty('label', changes['label'].currentValue);
+                    break;
+                case 'enableTabsScroll':
+                    this.setHostProperty('enableTabsScroll', changes['enableTabsScroll'].currentValue);
+                    break;
+                case 'quiet':
+                    this.setHostProperty('quiet', changes['quiet'].currentValue);
+                    break;
+                case 'selectionIndicatorStyle':
+                    this.setHostProperty('selectionIndicatorStyle', changes['selectionIndicatorStyle'].currentValue);
+                    break;
+                case 'shouldAnimate':
+                    this.setHostProperty('shouldAnimate', changes['shouldAnimate'].currentValue);
+                    break;
+                case 'selected':
+                    this.setHostProperty('selected', changes['selected'].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);
+        }));
+    }
+    static ɵfac = function LuzmoTabs_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoTabs)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoTabs, selectors: [["luzmo-tabs"]], inputs: { auto: "auto", compact: "compact", dir: "dir", direction: "direction", emphasized: "emphasized", label: "label", enableTabsScroll: [0, "enable-tabs-scroll", "enableTabsScroll"], quiet: "quiet", selectionIndicatorStyle: [0, "selection-indicator-style", "selectionIndicatorStyle"], shouldAnimate: [0, "should-animate", "shouldAnimate"], selected: "selected" }, outputs: { changeEvent: "change" }, exportAs: ["luzmoTabs"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoTabs_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵprojection(0);
+        } }, encapsulation: 2, changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoTabs, [{
+        type: Component,
+        args: [{
+                selector: 'luzmo-tabs',
+                exportAs: 'luzmoTabs',
+                standalone: true,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content />'
+            }]
+    }], () => [], { auto: [{
+            type: Input,
+            args: [{ alias: 'auto' }]
+        }], compact: [{
+            type: Input,
+            args: [{ alias: 'compact' }]
+        }], dir: [{
+            type: Input,
+            args: [{ alias: 'dir' }]
+        }], direction: [{
+            type: Input,
+            args: [{ alias: 'direction' }]
+        }], emphasized: [{
+            type: Input,
+            args: [{ alias: 'emphasized' }]
+        }], label: [{
+            type: Input,
+            args: [{ alias: 'label' }]
+        }], enableTabsScroll: [{
+            type: Input,
+            args: [{ alias: 'enable-tabs-scroll' }]
+        }], quiet: [{
+            type: Input,
+            args: [{ alias: 'quiet' }]
+        }], selectionIndicatorStyle: [{
+            type: Input,
+            args: [{ alias: 'selection-indicator-style' }]
+        }], shouldAnimate: [{
+            type: Input,
+            args: [{ alias: 'should-animate' }]
+        }], selected: [{
+            type: Input,
+            args: [{ alias: 'selected' }]
+        }], changeEvent: [{ type: i0.Output, args: ["change"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoTabs, { className: "LuzmoTabs", filePath: "components/tabs.ts", lineNumber: 19 }); })();

package/esm/components/tag.d.ts

@@ -0,0 +1,31 @@
+import { OnChanges, SimpleChanges } from '@angular/core';
+import '@luzmo/lucero/tags';
+import type { LuzmoTag as LuzmoTagHostElement } from '@luzmo/lucero/tags';
+import * as i0 from "@angular/core";
+export declare class LuzmoTag 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(): LuzmoTagHostElement;
+    deletable?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    readonly deleteEvent: 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<LuzmoTag, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoTag, "luzmo-tag", ["luzmoTag"], { "deletable": { "alias": "deletable"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; }, { "deleteEvent": "delete"; }, never, ["*"], true, never>;
+}
+/** The underlying custom element type for LuzmoTag */
+export type LuzmoTagElement = LuzmoTagHostElement;

package/esm/components/tag.js

@@ -0,0 +1,90 @@
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, output, Renderer2 } from '@angular/core';
+import '@luzmo/lucero/tags';
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+/**
+ * Angular wrapper component for <luzmo-tag>
+ *
+ * @slot (default) - text content for labeling the tag
+ * @slot avatar - an avatar element to display within the Tag
+ * @slot icon - an icon element to display within the Tag
+ */
+export class LuzmoTag {
+    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;
+    }
+    deletable;
+    disabled;
+    readonly;
+    deleteEvent = output({ alias: 'delete' });
+    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 'deletable':
+                    this.setHostProperty('deletable', changes['deletable'].currentValue);
+                    break;
+                case 'disabled':
+                    this.setHostProperty('disabled', changes['disabled'].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, 'delete', (event) => {
+            this.deleteEvent.emit(event);
+        }));
+    }
+    static ɵfac = function LuzmoTag_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoTag)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoTag, selectors: [["luzmo-tag"]], inputs: { deletable: "deletable", disabled: "disabled", readonly: "readonly" }, outputs: { deleteEvent: "delete" }, exportAs: ["luzmoTag"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoTag_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵprojection(0);
+        } }, encapsulation: 2, changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoTag, [{
+        type: Component,
+        args: [{
+                selector: 'luzmo-tag',
+                exportAs: 'luzmoTag',
+                standalone: true,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content />'
+            }]
+    }], () => [], { deletable: [{
+            type: Input,
+            args: [{ alias: 'deletable' }]
+        }], disabled: [{
+            type: Input,
+            args: [{ alias: 'disabled' }]
+        }], readonly: [{
+            type: Input,
+            args: [{ alias: 'readonly' }]
+        }], deleteEvent: [{ type: i0.Output, args: ["delete"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoTag, { className: "LuzmoTag", filePath: "components/tag.ts", lineNumber: 19 }); })();

package/esm/components/tags.d.ts

@@ -0,0 +1,30 @@
+import { OnChanges, SimpleChanges } from '@angular/core';
+import '@luzmo/lucero/tags';
+import type { LuzmoTags as LuzmoTagsHostElement } from '@luzmo/lucero/tags';
+import * as i0 from "@angular/core";
+export declare class LuzmoTags 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(): LuzmoTagsHostElement;
+    defaultNodes?: unknown;
+    rovingTabindexController?: 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;
+    focus(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoTags, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoTags, "luzmo-tags", ["luzmoTags"], { "defaultNodes": { "alias": "default-nodes"; "required": false; }; "rovingTabindexController": { "alias": "roving-tabindex-controller"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+/** The underlying custom element type for LuzmoTags */
+export type LuzmoTagsElement = LuzmoTagsHostElement;

package/esm/components/tags.js

@@ -0,0 +1,81 @@
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, Renderer2 } from '@angular/core';
+import '@luzmo/lucero/tags';
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+/**
+ * Angular wrapper component for <luzmo-tags>
+ *
+ * @slot (default) - Tag elements to manage as a group
+ */
+export class LuzmoTags {
+    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;
+    }
+    defaultNodes;
+    rovingTabindexController;
+    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 'defaultNodes':
+                    this.setHostProperty('defaultNodes', changes['defaultNodes'].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() {
+        // No custom events for this wrapper.
+    }
+    focus() {
+        return this.host.focus();
+    }
+    static ɵfac = function LuzmoTags_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoTags)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoTags, selectors: [["luzmo-tags"]], inputs: { defaultNodes: [0, "default-nodes", "defaultNodes"], rovingTabindexController: [0, "roving-tabindex-controller", "rovingTabindexController"] }, exportAs: ["luzmoTags"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoTags_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵprojection(0);
+        } }, encapsulation: 2, changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoTags, [{
+        type: Component,
+        args: [{
+                selector: 'luzmo-tags',
+                exportAs: 'luzmoTags',
+                standalone: true,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content />'
+            }]
+    }], () => [], { defaultNodes: [{
+            type: Input,
+            args: [{ alias: 'default-nodes' }]
+        }], rovingTabindexController: [{
+            type: Input,
+            args: [{ alias: 'roving-tabindex-controller' }]
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoTags, { className: "LuzmoTags", filePath: "components/tags.ts", lineNumber: 17 }); })();

package/esm/components/text-field.d.ts

@@ -0,0 +1,87 @@
+import { OnChanges, SimpleChanges } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import '@luzmo/lucero/text-field';
+import type { LuzmoTextField as LuzmoTextFieldHostElement } from '@luzmo/lucero/text-field';
+import * as i0 from "@angular/core";
+export declare class LuzmoTextField 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(): LuzmoTextFieldHostElement;
+    /** 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;
+    /** A string applied via `aria-label` to the form control when a user visible label is not provided. */
+    label?: string;
+    /** Name of the form control. */
+    name?: string;
+    /** Text that appears in the form control when it has no value set */
+    placeholder?: 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;
+    /** 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;
+    /** 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<LuzmoTextField, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoTextField, "luzmo-text-field", ["luzmoTextField"], { "value": { "alias": "value"; "required": false; }; "helpTextManager": { "alias": "help-text-manager"; "required": false; }; "allowedKeys": { "alias": "allowed-keys"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "label": { "alias": "label"; "required": false; }; "name": { "alias": "name"; "required": false; }; "placeholder": { "alias": "placeholder"; "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; }; }, { "changeEvent": "change"; "inputEvent": "input"; "keypressEvent": "keypress"; }, never, ["*"], true, never>;
+}
+/** The underlying custom element type for LuzmoTextField */
+export type LuzmoTextFieldElement = LuzmoTextFieldHostElement;