@luzmo/ngx-lucero 1.0.1-alpha.78

package/esm/components/close-button.js

@@ -0,0 +1,95 @@
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, Renderer2 } from '@angular/core';
+import '@luzmo/lucero/button';
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+/**
+ * Angular wrapper component for <luzmo-close-button>
+ *
+ * @slot (default) - text label of the Close Button
+ * @slot icon - The icon to use for Close Button
+ */
+export class LuzmoCloseButton {
+    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;
+    }
+    /** The visual variant to apply to this button. */
+    variant;
+    staticColor;
+    active;
+    /** The default behavior of the button. Possible values are: `button` (default), `submit`, and `reset`. */
+    type;
+    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 'staticColor':
+                    this.setHostProperty('staticColor', changes['staticColor'].currentValue);
+                    break;
+                case 'active':
+                    this.setHostProperty('active', changes['active'].currentValue);
+                    break;
+                case 'type':
+                    this.setHostProperty('type', changes['type'].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 LuzmoCloseButton_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoCloseButton)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoCloseButton, selectors: [["luzmo-close-button"]], inputs: { variant: "variant", staticColor: [0, "static-color", "staticColor"], active: "active", type: "type" }, exportAs: ["luzmoCloseButton"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoCloseButton_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵprojection(0);
+        } }, encapsulation: 2, changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoCloseButton, [{
+        type: Component,
+        args: [{
+                selector: 'luzmo-close-button',
+                exportAs: 'luzmoCloseButton',
+                standalone: true,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content />'
+            }]
+    }], () => [], { variant: [{
+            type: Input,
+            args: [{ alias: 'variant' }]
+        }], staticColor: [{
+            type: Input,
+            args: [{ alias: 'static-color' }]
+        }], active: [{
+            type: Input,
+            args: [{ alias: 'active' }]
+        }], type: [{
+            type: Input,
+            args: [{ alias: 'type' }]
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoCloseButton, { className: "LuzmoCloseButton", filePath: "components/close-button.ts", lineNumber: 18 }); })();

package/esm/components/color-area.d.ts

@@ -0,0 +1,45 @@
+import { OnChanges, SimpleChanges } from '@angular/core';
+import '@luzmo/lucero/color-area';
+import type { LuzmoColorArea as LuzmoColorAreaHostElement } from '@luzmo/lucero/color-area';
+import * as i0 from "@angular/core";
+export declare class LuzmoColorArea 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(): LuzmoColorAreaHostElement;
+    dir?: 'ltr' | 'rtl';
+    disabled?: boolean;
+    focused?: boolean;
+    labelX?: string;
+    labelY?: string;
+    isLTR?: boolean;
+    hue?: number;
+    color?: unknown;
+    x?: number;
+    y?: number;
+    step?: number;
+    inputX?: unknown;
+    inputY?: unknown;
+    /** The value of the Color Area has changed. */
+    readonly inputEvent: import("@angular/core").OutputEmitterRef<Event>;
+    /** An alteration to the value of the Color Area 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(focusOptions: FocusOptions): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoColorArea, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoColorArea, "luzmo-color-area", ["luzmoColorArea"], { "dir": { "alias": "dir"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "focused": { "alias": "focused"; "required": false; }; "labelX": { "alias": "label-x"; "required": false; }; "labelY": { "alias": "label-y"; "required": false; }; "isLTR": { "alias": "is-ltr"; "required": false; }; "hue": { "alias": "hue"; "required": false; }; "color": { "alias": "color"; "required": false; }; "x": { "alias": "x"; "required": false; }; "y": { "alias": "y"; "required": false; }; "step": { "alias": "step"; "required": false; }; "inputX": { "alias": "input-x"; "required": false; }; "inputY": { "alias": "input-y"; "required": false; }; }, { "inputEvent": "input"; "changeEvent": "change"; }, never, ["*"], true, never>;
+}
+/** The underlying custom element type for LuzmoColorArea */
+export type LuzmoColorAreaElement = LuzmoColorAreaHostElement;

package/esm/components/color-area.js

@@ -0,0 +1,167 @@
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, output, Renderer2 } from '@angular/core';
+import '@luzmo/lucero/color-area';
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+/**
+ * Angular wrapper component for <luzmo-color-area>
+ *
+ * @slot gradient - a custom gradient visually outlining the available color values
+ */
+export class LuzmoColorArea {
+    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;
+    }
+    dir;
+    disabled;
+    focused;
+    labelX;
+    labelY;
+    isLTR;
+    hue;
+    color;
+    x;
+    y;
+    step;
+    inputX;
+    inputY;
+    /** The value of the Color Area has changed. */
+    inputEvent = output({ alias: 'input' });
+    /** An alteration to the value of the Color Area 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 'dir':
+                    this.setHostProperty('dir', changes['dir'].currentValue);
+                    break;
+                case 'disabled':
+                    this.setHostProperty('disabled', changes['disabled'].currentValue);
+                    break;
+                case 'focused':
+                    this.setHostProperty('focused', changes['focused'].currentValue);
+                    break;
+                case 'labelX':
+                    this.setHostProperty('labelX', changes['labelX'].currentValue);
+                    break;
+                case 'labelY':
+                    this.setHostProperty('labelY', changes['labelY'].currentValue);
+                    break;
+                case 'isLTR':
+                    this.setHostProperty('isLTR', changes['isLTR'].currentValue);
+                    break;
+                case 'hue':
+                    this.setHostProperty('hue', changes['hue'].currentValue);
+                    break;
+                case 'color':
+                    this.setHostProperty('color', changes['color'].currentValue);
+                    break;
+                case 'x':
+                    this.setHostProperty('x', changes['x'].currentValue);
+                    break;
+                case 'y':
+                    this.setHostProperty('y', changes['y'].currentValue);
+                    break;
+                case 'step':
+                    this.setHostProperty('step', changes['step'].currentValue);
+                    break;
+                case 'inputX':
+                    this.setHostProperty('inputX', changes['inputX'].currentValue);
+                    break;
+                case 'inputY':
+                    this.setHostProperty('inputY', changes['inputY'].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, 'input', (event) => {
+            this.inputEvent.emit(event);
+        }));
+        this.listenerCleanup.push(this.renderer.listen(this.host, 'change', (event) => {
+            this.changeEvent.emit(event);
+        }));
+    }
+    focus(focusOptions) {
+        return this.host.focus(focusOptions);
+    }
+    static ɵfac = function LuzmoColorArea_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoColorArea)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoColorArea, selectors: [["luzmo-color-area"]], inputs: { dir: "dir", disabled: "disabled", focused: "focused", labelX: [0, "label-x", "labelX"], labelY: [0, "label-y", "labelY"], isLTR: [0, "is-ltr", "isLTR"], hue: "hue", color: "color", x: "x", y: "y", step: "step", inputX: [0, "input-x", "inputX"], inputY: [0, "input-y", "inputY"] }, outputs: { inputEvent: "input", changeEvent: "change" }, exportAs: ["luzmoColorArea"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoColorArea_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵprojection(0);
+        } }, encapsulation: 2, changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoColorArea, [{
+        type: Component,
+        args: [{
+                selector: 'luzmo-color-area',
+                exportAs: 'luzmoColorArea',
+                standalone: true,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content />'
+            }]
+    }], () => [], { dir: [{
+            type: Input,
+            args: [{ alias: 'dir' }]
+        }], disabled: [{
+            type: Input,
+            args: [{ alias: 'disabled' }]
+        }], focused: [{
+            type: Input,
+            args: [{ alias: 'focused' }]
+        }], labelX: [{
+            type: Input,
+            args: [{ alias: 'label-x' }]
+        }], labelY: [{
+            type: Input,
+            args: [{ alias: 'label-y' }]
+        }], isLTR: [{
+            type: Input,
+            args: [{ alias: 'is-ltr' }]
+        }], hue: [{
+            type: Input,
+            args: [{ alias: 'hue' }]
+        }], color: [{
+            type: Input,
+            args: [{ alias: 'color' }]
+        }], x: [{
+            type: Input,
+            args: [{ alias: 'x' }]
+        }], y: [{
+            type: Input,
+            args: [{ alias: 'y' }]
+        }], step: [{
+            type: Input,
+            args: [{ alias: 'step' }]
+        }], inputX: [{
+            type: Input,
+            args: [{ alias: 'input-x' }]
+        }], inputY: [{
+            type: Input,
+            args: [{ alias: 'input-y' }]
+        }], inputEvent: [{ type: i0.Output, args: ["input"] }], changeEvent: [{ type: i0.Output, args: ["change"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoColorArea, { className: "LuzmoColorArea", filePath: "components/color-area.ts", lineNumber: 17 }); })();

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

@@ -0,0 +1,91 @@
+import { OnChanges, SimpleChanges } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import '@luzmo/lucero/color-field';
+import type { LuzmoColorField as LuzmoColorFieldHostElement } from '@luzmo/lucero/color-field';
+import * as i0 from "@angular/core";
+export declare class LuzmoColorField 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(): LuzmoColorFieldHostElement;
+    /** Whether the color handle with the preview color is shown */
+    viewColor?: boolean;
+    /** Whether the alpha channel is not allowed */
+    noAlphaChannel?: boolean;
+    /** The value held by the form control */
+    value?: string;
+    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;
+    /** The value of the color-field has changed. */
+    readonly inputEvent: import("@angular/core").OutputEmitterRef<CustomEvent<unknown>>;
+    /** An alteration to the value of the color-field has been committed by the user. */
+    readonly changeEvent: import("@angular/core").OutputEmitterRef<Event>;
+    /** 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): void;
+    registerOnChange(fn: (value: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    checkValidity(): boolean;
+    /** 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;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoColorField, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoColorField, "luzmo-color-field", ["luzmoColorField"], { "viewColor": { "alias": "view-color"; "required": false; }; "noAlphaChannel": { "alias": "no-alpha-channel"; "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; }; "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; }; }, { "inputEvent": "input"; "changeEvent": "change"; "keypressEvent": "keypress"; }, never, ["*"], true, never>;
+}
+/** The underlying custom element type for LuzmoColorField */
+export type LuzmoColorFieldElement = LuzmoColorFieldHostElement;