@luzmo/ngx-lucero 1.0.1-alpha.78

package/esm/components/action-button.js

@@ -0,0 +1,205 @@
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, forwardRef, inject, Input, output, Renderer2 } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import '@luzmo/lucero/action-button';
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+/**
+ * Angular wrapper component for <luzmo-action-button>
+ *
+ * @slot (default) - text label of the Action Button
+ * @slot icon - The icon to use for Action Button
+ */
+export class LuzmoActionButton {
+    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;
+    }
+    /** Affects the display of a **selected** Action Button */
+    emphasized;
+    /** Whether the Action Button should display a hold affordance */
+    holdAffordance;
+    /** Whether the Action Button should show in a quiet state */
+    quiet;
+    /** The role for the Action Button */
+    role;
+    /** Whether an Action Button with `role='button'` should also be `aria-pressed='true'` */
+    selected;
+    /** Whether to automatically manage the `selected` attribute on interaction and whether `aria-pressed="false"` should be used when `selected === false` */
+    toggles;
+    /** The static color variant to use for the action button. */
+    staticColor;
+    /** The value of the Action Button */
+    value;
+    active;
+    /** The default behavior of the button. Possible values are: `button` (default), `submit`, and `reset`. */
+    type;
+    /** Synthesizes a "longpress" interaction that signifies a `pointerdown` event that is >=300ms or a keyboard event where code is `Space` or code is `ArrowDown` while `altKey===true`. */
+    longpressEvent = output({ alias: 'longpress' });
+    /** Announces a change in the `selected` property of an action button */
+    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 'emphasized':
+                    this.setHostProperty('emphasized', changes['emphasized'].currentValue);
+                    break;
+                case 'holdAffordance':
+                    this.setHostProperty('holdAffordance', changes['holdAffordance'].currentValue);
+                    break;
+                case 'quiet':
+                    this.setHostProperty('quiet', changes['quiet'].currentValue);
+                    break;
+                case 'role':
+                    this.setHostProperty('role', changes['role'].currentValue);
+                    break;
+                case 'selected':
+                    this.setHostProperty('selected', changes['selected'].currentValue);
+                    break;
+                case 'toggles':
+                    this.setHostProperty('toggles', changes['toggles'].currentValue);
+                    break;
+                case 'staticColor':
+                    this.setHostProperty('staticColor', changes['staticColor'].currentValue);
+                    break;
+                case 'value':
+                    this.setHostProperty('value', changes['value'].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() {
+        this.listenerCleanup.push(this.renderer.listen(this.host, 'longpress', (event) => {
+            this.longpressEvent.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) {
+        // Underlying element does not declare a 'disabled' field; nothing to do.
+        void isDisabled;
+    }
+    static ɵfac = function LuzmoActionButton_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoActionButton)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoActionButton, selectors: [["luzmo-action-button"]], inputs: { emphasized: "emphasized", holdAffordance: [0, "hold-affordance", "holdAffordance"], quiet: "quiet", role: "role", selected: "selected", toggles: "toggles", staticColor: [0, "static-color", "staticColor"], value: "value", active: "active", type: "type" }, outputs: { longpressEvent: "longpress", changeEvent: "change" }, exportAs: ["luzmoActionButton"], features: [i0.ɵɵProvidersFeature([
+                {
+                    provide: NG_VALUE_ACCESSOR,
+                    useExisting: forwardRef(() => LuzmoActionButton),
+                    multi: true
+                }
+            ]), i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoActionButton_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵprojection(0);
+        } }, encapsulation: 2, changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoActionButton, [{
+        type: Component,
+        args: [{
+                selector: 'luzmo-action-button',
+                exportAs: 'luzmoActionButton',
+                standalone: true,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content />',
+                providers: [
+                    {
+                        provide: NG_VALUE_ACCESSOR,
+                        useExisting: forwardRef(() => LuzmoActionButton),
+                        multi: true
+                    }
+                ]
+            }]
+    }], () => [], { emphasized: [{
+            type: Input,
+            args: [{ alias: 'emphasized' }]
+        }], holdAffordance: [{
+            type: Input,
+            args: [{ alias: 'hold-affordance' }]
+        }], quiet: [{
+            type: Input,
+            args: [{ alias: 'quiet' }]
+        }], role: [{
+            type: Input,
+            args: [{ alias: 'role' }]
+        }], selected: [{
+            type: Input,
+            args: [{ alias: 'selected' }]
+        }], toggles: [{
+            type: Input,
+            args: [{ alias: 'toggles' }]
+        }], staticColor: [{
+            type: Input,
+            args: [{ alias: 'static-color' }]
+        }], value: [{
+            type: Input,
+            args: [{ alias: 'value' }]
+        }], active: [{
+            type: Input,
+            args: [{ alias: 'active' }]
+        }], type: [{
+            type: Input,
+            args: [{ alias: 'type' }]
+        }], longpressEvent: [{ type: i0.Output, args: ["longpress"] }], changeEvent: [{ type: i0.Output, args: ["change"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoActionButton, { className: "LuzmoActionButton", filePath: "components/action-button.ts", lineNumber: 26 }); })();

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

@@ -0,0 +1,42 @@
+import { OnChanges, SimpleChanges } from '@angular/core';
+import '@luzmo/lucero/action-group';
+import type { LuzmoActionGroup as LuzmoActionGroupHostElement } from '@luzmo/lucero/action-group';
+import * as i0 from "@angular/core";
+export declare class LuzmoActionGroup 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(): LuzmoActionGroupHostElement;
+    buttons?: unknown;
+    rovingTabindexController?: unknown;
+    compact?: boolean;
+    emphasized?: boolean;
+    justified?: boolean;
+    label?: string;
+    quiet?: boolean;
+    selects?: never | 'single' | 'multiple';
+    staticColor?: 'white' | 'black';
+    vertical?: boolean;
+    selected?: string[];
+    slotElement?: unknown;
+    /** Announces that selection state has been changed by 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(options?: FocusOptions): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoActionGroup, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoActionGroup, "luzmo-action-group", ["luzmoActionGroup"], { "buttons": { "alias": "buttons"; "required": false; }; "rovingTabindexController": { "alias": "roving-tabindex-controller"; "required": false; }; "compact": { "alias": "compact"; "required": false; }; "emphasized": { "alias": "emphasized"; "required": false; }; "justified": { "alias": "justified"; "required": false; }; "label": { "alias": "label"; "required": false; }; "quiet": { "alias": "quiet"; "required": false; }; "selects": { "alias": "selects"; "required": false; }; "staticColor": { "alias": "static-color"; "required": false; }; "vertical": { "alias": "vertical"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "slotElement": { "alias": "slot-element"; "required": false; }; }, { "changeEvent": "change"; }, never, ["*"], true, never>;
+}
+/** The underlying custom element type for LuzmoActionGroup */
+export type LuzmoActionGroupElement = LuzmoActionGroupHostElement;

package/esm/components/action-group.js

@@ -0,0 +1,155 @@
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, output, Renderer2 } from '@angular/core';
+import '@luzmo/lucero/action-group';
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+/**
+ * Angular wrapper component for <luzmo-action-group>
+ *
+ * @slot (default) - the luzmo-action-button elements that make up the group
+ */
+export class LuzmoActionGroup {
+    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;
+    }
+    buttons;
+    rovingTabindexController;
+    compact;
+    emphasized;
+    justified;
+    label;
+    quiet;
+    selects;
+    staticColor;
+    vertical;
+    selected;
+    slotElement;
+    /** Announces that selection state has been changed by 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 'buttons':
+                    this.setHostProperty('buttons', changes['buttons'].currentValue);
+                    break;
+                case 'rovingTabindexController':
+                    this.setHostProperty('rovingTabindexController', changes['rovingTabindexController'].currentValue);
+                    break;
+                case 'compact':
+                    this.setHostProperty('compact', changes['compact'].currentValue);
+                    break;
+                case 'emphasized':
+                    this.setHostProperty('emphasized', changes['emphasized'].currentValue);
+                    break;
+                case 'justified':
+                    this.setHostProperty('justified', changes['justified'].currentValue);
+                    break;
+                case 'label':
+                    this.setHostProperty('label', changes['label'].currentValue);
+                    break;
+                case 'quiet':
+                    this.setHostProperty('quiet', changes['quiet'].currentValue);
+                    break;
+                case 'selects':
+                    this.setHostProperty('selects', changes['selects'].currentValue);
+                    break;
+                case 'staticColor':
+                    this.setHostProperty('staticColor', changes['staticColor'].currentValue);
+                    break;
+                case 'vertical':
+                    this.setHostProperty('vertical', changes['vertical'].currentValue);
+                    break;
+                case 'selected':
+                    this.setHostProperty('selected', changes['selected'].currentValue);
+                    break;
+                case 'slotElement':
+                    this.setHostProperty('slotElement', changes['slotElement'].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 LuzmoActionGroup_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoActionGroup)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoActionGroup, selectors: [["luzmo-action-group"]], inputs: { buttons: "buttons", rovingTabindexController: [0, "roving-tabindex-controller", "rovingTabindexController"], compact: "compact", emphasized: "emphasized", justified: "justified", label: "label", quiet: "quiet", selects: "selects", staticColor: [0, "static-color", "staticColor"], vertical: "vertical", selected: "selected", slotElement: [0, "slot-element", "slotElement"] }, outputs: { changeEvent: "change" }, exportAs: ["luzmoActionGroup"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoActionGroup_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵprojection(0);
+        } }, encapsulation: 2, changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoActionGroup, [{
+        type: Component,
+        args: [{
+                selector: 'luzmo-action-group',
+                exportAs: 'luzmoActionGroup',
+                standalone: true,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content />'
+            }]
+    }], () => [], { buttons: [{
+            type: Input,
+            args: [{ alias: 'buttons' }]
+        }], rovingTabindexController: [{
+            type: Input,
+            args: [{ alias: 'roving-tabindex-controller' }]
+        }], compact: [{
+            type: Input,
+            args: [{ alias: 'compact' }]
+        }], emphasized: [{
+            type: Input,
+            args: [{ alias: 'emphasized' }]
+        }], justified: [{
+            type: Input,
+            args: [{ alias: 'justified' }]
+        }], label: [{
+            type: Input,
+            args: [{ alias: 'label' }]
+        }], quiet: [{
+            type: Input,
+            args: [{ alias: 'quiet' }]
+        }], selects: [{
+            type: Input,
+            args: [{ alias: 'selects' }]
+        }], staticColor: [{
+            type: Input,
+            args: [{ alias: 'static-color' }]
+        }], vertical: [{
+            type: Input,
+            args: [{ alias: 'vertical' }]
+        }], selected: [{
+            type: Input,
+            args: [{ alias: 'selected' }]
+        }], slotElement: [{
+            type: Input,
+            args: [{ alias: 'slot-element' }]
+        }], changeEvent: [{ type: i0.Output, args: ["change"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoActionGroup, { className: "LuzmoActionGroup", filePath: "components/action-group.ts", lineNumber: 17 }); })();

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

@@ -0,0 +1,75 @@
+import { OnChanges, SimpleChanges } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import '@luzmo/lucero/action-menu';
+import type { LuzmoActionMenu as LuzmoActionMenuHostElement } from '@luzmo/lucero/action-menu';
+import * as i0 from "@angular/core";
+export declare class LuzmoActionMenu 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(): LuzmoActionMenuHostElement;
+    selects?: never | 'single';
+    staticColor?: 'white' | 'black';
+    handleSlottableRequest?: unknown;
+    appliedLabel?: string;
+    button?: unknown;
+    /** Whether the Picker is disabled. */
+    disabled?: boolean;
+    focused?: boolean;
+    icons?: 'only' | 'none';
+    /** Type of dropdown */
+    variant?: 'checkmarks' | 'highlight';
+    /** Whether the value is invalid. */
+    invalid?: boolean;
+    /** Whether the items are currently loading. */
+    pending?: boolean;
+    /** Defines a string value that labels the Picker while it is in pending state. */
+    pendingLabel?: string;
+    label?: string;
+    open?: boolean;
+    /** Readonly value */
+    readonly?: boolean;
+    labelAlignment?: 'inline';
+    optionsMenu?: unknown;
+    overlayElement?: unknown;
+    placement?: "top" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end";
+    /** Display as a quiet picker */
+    quiet?: boolean;
+    value?: string;
+    selectedItem?: unknown;
+    dependencyManager?: unknown;
+    isMobile?: unknown;
+    strategy?: unknown;
+    pendingStateController?: unknown;
+    applyFocusElementLabel?: unknown;
+    readonly changeEvent: import("@angular/core").OutputEmitterRef<CustomEvent<unknown>>;
+    readonly scrollEvent: 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;
+    focus(options?: FocusOptions): void;
+    toggle(target?: boolean): void;
+    close(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoActionMenu, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoActionMenu, "luzmo-action-menu", ["luzmoActionMenu"], { "selects": { "alias": "selects"; "required": false; }; "staticColor": { "alias": "static-color"; "required": false; }; "handleSlottableRequest": { "alias": "handle-slottable-request"; "required": false; }; "appliedLabel": { "alias": "applied-label"; "required": false; }; "button": { "alias": "button"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "focused": { "alias": "focused"; "required": false; }; "icons": { "alias": "icons"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "pending": { "alias": "pending"; "required": false; }; "pendingLabel": { "alias": "pending-label"; "required": false; }; "label": { "alias": "label"; "required": false; }; "open": { "alias": "open"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "labelAlignment": { "alias": "label-alignment"; "required": false; }; "optionsMenu": { "alias": "options-menu"; "required": false; }; "overlayElement": { "alias": "overlay-element"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; "quiet": { "alias": "quiet"; "required": false; }; "value": { "alias": "value"; "required": false; }; "selectedItem": { "alias": "selected-item"; "required": false; }; "dependencyManager": { "alias": "dependency-manager"; "required": false; }; "isMobile": { "alias": "is-mobile"; "required": false; }; "strategy": { "alias": "strategy"; "required": false; }; "pendingStateController": { "alias": "pending-state-controller"; "required": false; }; "applyFocusElementLabel": { "alias": "apply-focus-element-label"; "required": false; }; }, { "changeEvent": "change"; "scrollEvent": "scroll"; }, never, ["*"], true, never>;
+}
+/** The underlying custom element type for LuzmoActionMenu */
+export type LuzmoActionMenuElement = LuzmoActionMenuHostElement;