@hn250424/aero 0.1.0

package/lib/base/BaseAeroContainer.d.ts

@@ -0,0 +1,47 @@
+import { AeroShadowElement } from '../core/AeroShadowElement';
+/**
+ * @module base
+ */
+/**
+ * A base class for container-like elements, providing common functionality
+ * such as handling a background attribute.
+ *
+ * @extends AeroShadowElement
+ * @abstract
+ */
+export declare class BaseAeroContainer extends AeroShadowElement {
+    /**
+     * @param {string} htmlTemplate - The HTML string to be used as the template for the shadow DOM.
+     * @protected
+     */
+    protected constructor(htmlTemplate: string);
+    /**
+     * Specifies the observed attributes for the custom element.
+     * @returns {string[]} An array of attribute names to observe.
+     */
+    static get observedAttributes(): string[];
+    /**
+     * Called when an observed attribute has been added, removed, or changed.
+     * @param {string} name - The name of the attribute that changed.
+     * @param {string | null} _oldValue - The old value of the attribute.
+     * @param {string | null} newValue - The new value of the attribute.
+     */
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null): void;
+    /**
+     * A map of attribute names to their respective handler functions.
+     * @private
+     */
+    private baseAeroContainerAttributeHandlers;
+    /**
+     * Updates the background style of the container.
+     * @param {string | null} val - The new background value.
+     * @private
+     */
+    private updateBackground;
+    /**
+     * Sets the background of the container.
+     * @param {string} val - The new background value.
+     * @attr
+     */
+    set containerBackground(val: string);
+}

package/lib/base/BaseAeroNumericInput.d.ts

@@ -0,0 +1,164 @@
+import { AeroShadowElement } from '../core/AeroShadowElement';
+/**
+ * @module base
+ */
+/**
+ * An abstract base class for numeric input elements. It provides core functionalities
+ * for handling numeric values, including min, max, and step attributes.
+ *
+ * @extends AeroShadowElement
+ * @abstract
+ *
+ * @fires input - Fired when the value of the element has changed.
+ * @fires change - Fired when the value of the element has been committed by the user.
+ * @fires focusin - Fired when the element receives focus.
+ * @fires focusout - Fired when the element loses focus.
+ */
+export declare abstract class BaseAeroNumericInput extends AeroShadowElement {
+    /**
+     * The underlying HTML input element.
+     * @private
+     */
+    private _input;
+    /**
+     * The HTML input element's value.
+     * @private
+     */
+    private _value;
+    /**
+     * The minimum allowed value.
+     * @private
+     */
+    private _min;
+    /**
+     * The maximum allowed value.
+     * @private
+     */
+    private _max;
+    /**
+     * The stepping interval.
+     * @private
+     */
+    private _step;
+    /**
+     * The number of decimal places to round to, inferred from the `step` value.
+     * @private
+     */
+    private _decimalPlaces;
+    /**
+     * @param {string} htmlTemplate - The HTML string to be used as the template for the shadow DOM.
+     * @protected
+     */
+    protected constructor(htmlTemplate: string);
+    /**
+     * An abstract method that must be implemented by subclasses to provide the CSS selector
+     * for the underlying input element.
+     * @returns {string} The CSS selector for the input element.
+     * @protected
+     * @abstract
+     */
+    protected abstract getInputSelector(): string;
+    /**
+     * Initializes the `_input` property by querying the shadow DOM.
+     * @private
+     */
+    private initializeInput;
+    /**
+     * Validates and sanitizes a given value according to the `min`, `max`, and `step` properties.
+     * @param {string} value - The value to validate.
+     * @returns {string} The validated and sanitized value.
+     * @protected
+     */
+    protected getValidateValue(value: string): string;
+    /**
+     * Sets up event listeners on the input element to forward native events.
+     * @private
+     */
+    private dispatchInputEvents;
+    /**
+     * Specifies the observed attributes for the custom element.
+     * @returns {string[]} An array of attribute names to observe.
+     */
+    static get observedAttributes(): string[];
+    /**
+     * Called when an observed attribute has been added, removed, or changed.
+     * @param {string} name - The name of the attribute that changed.
+     * @param {string | null} _oldValue - The old value of the attribute.
+     * @param {string | null} newValue - The new value of the attribute.
+     */
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null): void;
+    /**
+     * A map of attribute names to their respective handler functions.
+     * @private
+     */
+    private baseAeroNumericInputAttributeHandlers;
+    /**
+     * Updates the internal `_value` value.
+     * @param {string | null} val - The new input value.
+     * @private
+     */
+    private updateInputValue;
+    /**
+     * Updates the internal `_min` value.
+     * @param {string | null} val - The new minimum value.
+     * @private
+     */
+    private updateMinValue;
+    /**
+     * Updates the internal `_max` value.
+     * @param {string | null} val - The new maximum value.
+     * @private
+     */
+    private updateMaxValue;
+    /**
+     * Updates the internal `_step` value and calculates the number of decimal places.
+     * @param {string | null} val - The new step value.
+     * @private
+     */
+    private updateStepValue;
+    /**
+     * The underlying HTML input element.
+     * @type {HTMLInputElement}
+     * @readonly
+     */
+    get input(): HTMLInputElement;
+    /**
+     * The current value of the numeric input.
+     * @type {string}
+     * @attr
+     * @default "0"
+     */
+    get value(): string;
+    set value(val: string);
+    /**
+     * The minimum allowed value.
+     * @type {string}
+     * @attr
+     * @default "0"
+     */
+    get min(): string;
+    set min(val: string);
+    /**
+     * The maximum allowed value.
+     * @type {string}
+     * @attr
+     * @default "100"
+     */
+    get max(): string;
+    set max(val: string);
+    /**
+     * The stepping interval for the numeric input.
+     * @type {string}
+     * @attr
+     * @default "1"
+     */
+    get step(): string;
+    set step(val: string);
+    /**
+     * The number of decimal places, derived from the `step` attribute.
+     * @type {string}
+     * @readonly
+     * @protected
+     */
+    protected get decimalPlaces(): string;
+}

package/lib/components/numeric_input/AeroNumericInput.d.ts

@@ -0,0 +1,18 @@
+import { BaseAeroNumericInput } from '../../base/BaseAeroNumericInput';
+/**
+ * @module components
+ */
+/**
+ * A numeric input web component.
+ *
+ * @extends BaseAeroNumericInput
+ */
+export declare class AeroNumericInput extends BaseAeroNumericInput {
+    constructor();
+    /**
+     * Returns the CSS selector for the internal input element.
+     * @returns {string} The CSS selector.
+     * @protected
+     */
+    protected getInputSelector(): string;
+}

package/lib/components/progress_spinner/AeroProgressSpinner.d.ts

@@ -0,0 +1,69 @@
+import { AeroShadowElement } from '../../core/AeroShadowElement';
+/**
+ * @module components
+ */
+/**
+ * A circular progress spinner component.
+ *
+ * @extends AeroShadowElement
+ *
+ * @property {string} width - The width of the spinner in pixels.
+ * @property {string} height - The height of the spinner in pixels.
+ * @property {string} background - The color of the spinner's track.
+ * @property {string} color - The color of the spinner's moving part.
+ * @property {string} cycle - The duration of one spin cycle in seconds.
+ */
+export declare class AeroProgressSpinner extends AeroShadowElement {
+    constructor();
+    /**
+     * Specifies the observed attributes for the custom element.
+     * @returns {string[]} An array of attribute names to observe.
+     */
+    static get observedAttributes(): string[];
+    /**
+     * Called when an observed attribute has been added, removed, or changed.
+     */
+    attributeChangedCallback(_name: string, _oldValue: string | null, _newValue: string | null): void;
+    /**
+     * Updates the spinner's styles based on its current attributes.
+     * Using :host instead of an inner element means styles are applied to the custom element itself.
+     * Re-appending styles multiple times can cause conflicts or unexpected behavior.
+     * @private
+     */
+    private updateSpinnerStyles;
+    /**
+     * The width of the spinner in pixels.
+     * @param {string} val - The width value.
+     * @attr
+     * @default "50"
+     */
+    set width(val: string);
+    /**
+     * The height of the spinner in pixels.
+     * @param {string} val - The height value.
+     * @attr
+     * @default "50"
+     */
+    set height(val: string);
+    /**
+     * The color of the spinner's track.
+     * @param {string} val - The background color value.
+     * @attr
+     * @default "white"
+     */
+    set background(val: string);
+    /**
+     * The color of the spinner's moving part.
+     * @param {string} val - The color value.
+     * @attr
+     * @default "black"
+     */
+    set color(val: string);
+    /**
+     * The duration of one spin cycle in seconds.
+     * @param {string} val - The cycle duration.
+     * @attr
+     * @default "1"
+     */
+    set cycle(val: string);
+}

package/lib/components/resize_box/AeroResizeBox.d.ts

@@ -0,0 +1,196 @@
+import { AeroShadowElement } from '../../core/AeroShadowElement';
+/**
+ * @module components
+ */
+/**
+ * A container element that can be resized by dragging its edges.
+ *
+ * @extends AeroShadowElement
+ *
+ * @fires aero-resize-start - Fired when a resize operation begins. The detail object contains `width`, `height`, and `edge`.
+ * @fires aero-resize - Fired continuously during a resize operation. The detail object contains `width` and `height`.
+ * @fires aero-resize-end - Fired when a resize operation ends. The detail object contains the final `width` and `height`.
+ *
+ * @slot - The default slot for content to be placed inside the resizable box.
+ */
+export declare class AeroResizeBox extends AeroShadowElement {
+    private _topResizer;
+    private _bottomResizer;
+    private _leftResizer;
+    private _rightResizer;
+    private _hasTopResizer;
+    private _hasBottomResizer;
+    private _hasLeftResizer;
+    private _hasRightResizer;
+    private _nMinWidth;
+    private _nMaxWidth;
+    private _nMinHeight;
+    private _nMaxHeight;
+    private isTopDragging;
+    private isBottomDragging;
+    private isLeftDragging;
+    private isRightDragging;
+    private isDragging;
+    private animationFrameId;
+    private resizerHandlers;
+    constructor();
+    /**
+     * Handles the mousedown event on a resizer element.
+     * @param {MouseEvent} e - The mouse event.
+     * @param {"top" | "bottom" | "left" | "right"} resizer - The resizer that was clicked.
+     * @private
+     */
+    private processMousedownEvent;
+    /**
+     * Emits the 'aero-resize' custom event.
+     * @param {number | null} width - The new width, or null if not changed.
+     * @param {number | null} height - The new height, or null if not changed.
+     * @private
+     */
+    private emitResize;
+    /**
+     * Specifies the observed attributes for the custom element.
+     * @returns {string[]} An array of attribute names to observe.
+     */
+    static get observedAttributes(): string[];
+    /**
+     * Called when an observed attribute has been added, removed, or changed.
+     * @param {string} name - The name of the attribute that changed.
+     * @param {string | null} _oldValue - The old value of the attribute.
+     * @param {string | null} newValue - The new value of the attribute.
+     */
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null): void;
+    /**
+     * A map of attribute names to their respective handler functions.
+     * @private
+     */
+    private baseAeroResizeBoxAttributeHandlers;
+    /**
+     * Enables or disables the top resizer.
+     * @param {boolean} enabled - Whether the resizer should be enabled.
+     * @private
+     */
+    private updateTopResizerState;
+    /**
+     * Enables or disables the bottom resizer.
+     * @param {boolean} enabled - Whether the resizer should be enabled.
+     * @private
+     */
+    private updateBottomResizerState;
+    /**
+     * Enables or disables the left resizer.
+     * @param {boolean} enabled - Whether the resizer should be enabled.
+     * @private
+     */
+    private updateLeftResizerState;
+    /**
+     * Enables or disables the right resizer.
+     * @param {boolean} enabled - Whether the resizer should be enabled.
+     * @private
+     */
+    private updateRightResizerState;
+    /**
+     * A helper function to add or remove the mousedown event listener for a resizer.
+     * @param {HTMLElement} resizer - The resizer element.
+     * @param {boolean} enabled - Whether the resizer is enabled.
+     * @param {(e: MouseEvent) => void} handler - The event handler.
+     * @private
+     */
+    private updateResizeState;
+    /**
+     * Updates the internal minimum width value.
+     * @param {string | null} val - The new value.
+     * @private
+     */
+    private updateMinWidthValue;
+    /**
+     * Updates the internal maximum width value.
+     * @param {string | null} val - The new value.
+     * @private
+     */
+    private updateMaxWidthValue;
+    /**
+     * Updates the internal minimum height value.
+     * @param {string | null} val - The new value.
+     * @private
+     */
+    private updateMinHeightValue;
+    /**
+     * Updates the internal maximum height value.
+     * @param {string | null} val - The new value.
+     * @private
+     */
+    private updateMaxHeightValue;
+    /**
+     * The color of the resizer handles on hover.
+     * @param {string} color - The color value.
+     * @type {string}
+     * @attr
+     * @default "#ccc"
+     */
+    set resizerColor(color: string);
+    /**
+     * The minimum width of the box.
+     * @type {string}
+     * @attr min-width
+     * @default "0"
+     */
+    get minWidth(): string;
+    set minWidth(val: string);
+    /**
+     * The maximum width of the box.
+     * @type {string}
+     * @attr max-width
+     * @default "2000"
+     */
+    get maxWidth(): string;
+    set maxWidth(val: string);
+    /**
+     * The minimum height of the box.
+     * @type {string}
+     * @attr min-height
+     * @default "0"
+     */
+    get minHeight(): string;
+    set minHeight(val: string);
+    /**
+     * The maximum height of the box.
+     * @type {string}
+     * @attr max-height
+     * @default "2000"
+     */
+    get maxHeight(): string;
+    set maxHeight(val: string);
+    /**
+     * Enables the top resizer.
+     */
+    addTopResizer(): void;
+    /**
+     * Disables the top resizer.
+     */
+    removeTopResizer(): void;
+    /**
+     * Enables the bottom resizer.
+     */
+    addBottomResizer(): void;
+    /**
+     * Disables the bottom resizer.
+     */
+    removeBottomResizer(): void;
+    /**
+     * Enables the left resizer.
+     */
+    addLeftResizer(): void;
+    /**
+     * Disables the left resizer.
+     */
+    removeLeftResizer(): void;
+    /**
+     * Enables the right resizer.
+     */
+    addRightResizer(): void;
+    /**
+     * Disables the right resizer.
+     */
+    removeRightResizer(): void;
+}

package/lib/components/spinbox/AeroSpinbox.d.ts

@@ -0,0 +1,102 @@
+import { BaseAeroNumericInput } from '../../base/BaseAeroNumericInput';
+/**
+ * @module components
+ */
+/**
+ * A numeric input component with increment and decrement buttons.
+ *
+ * @extends BaseAeroNumericInput
+ *
+ */
+export declare class AeroSpinbox extends BaseAeroNumericInput {
+    /**
+     * The decrement button element.
+     * @private
+     */
+    private minus;
+    /**
+     * The increment button element.
+     * @private
+     */
+    private plus;
+    constructor();
+    /**
+     * Returns the CSS selector for the internal input element.
+     * @returns {string} The CSS selector.
+     * @protected
+     */
+    protected getInputSelector(): string;
+    /**
+     * Specifies the observed attributes for the custom element.
+     * @returns {string[]} An array of attribute names to observe.
+     */
+    static get observedAttributes(): string[];
+    /**
+     * Called when an observed attribute has been added, removed, or changed.
+     * @param {string} name - The name of the attribute that changed.
+     * @param {string | null} _oldValue - The old value of the attribute.
+     * @param {string | null} newValue - The new value of the attribute.
+     */
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null): void;
+    /**
+     * A map of attribute names to their respective handler functions for this component.
+     * @private
+     */
+    private aeroSpinboxAttributeHandlers;
+    /**
+     * Updates the text content of the decrement button.
+     * @param {string | null} val - The new text.
+     * @private
+     */
+    private updateMinuxText;
+    /**
+     * Updates the text content of the increment button.
+     * @param {string | null} val - The new text.
+     * @private
+     */
+    private updatePlusText;
+    /**
+     * Updates the background color of the buttons.
+     * @param {string | null} val - The new color.
+     * @private
+     */
+    private updateButtonBackgrondColor;
+    /**
+     * Adjusts the grid layout based on the component's height.
+     * @param {number | null} val - The new height.
+     * @private
+     */
+    private updateHeight;
+    /**
+     * The background color of the increment and decrement buttons.
+     * @param {string} color - The color value.
+     * @type {string}
+     * @attr button-backgroundcolor
+     * @default "#ccc"
+     */
+    set buttonBackgroundColor(color: string);
+    /**
+     * The text content for the decrement button.
+     * @param {string} text - The text to display.
+     * @type {string}
+     * @attr minus-text
+     * @default "-"
+     */
+    set minusText(text: string);
+    /**
+     * The text content for the increment button.
+     * @param {string} text - The text to display.
+     * @type {string}
+     * @attr plus-text
+     * @default "+"
+     */
+    set plusText(text: string);
+    /**
+     * Decrements the input value by the step amount.
+     */
+    decrement(): void;
+    /**
+     * Increments the input value by the step amount.
+     */
+    increment(): void;
+}

package/lib/core/AeroShadowElement.d.ts

@@ -0,0 +1,52 @@
+/**
+ * @module core
+ */
+/**
+ * `AeroShadowElement` is an abstract base class that simplifies the creation of custom elements
+ * with a shadow DOM. It handles the boilerplate of creating a shadow root and cloning a template.
+ *
+ * @abstract
+ */
+export declare class AeroShadowElement extends HTMLElement {
+    /**
+     * The shadow root for this element.
+     * @protected
+     */
+    protected shadow: ShadowRoot;
+    /**
+     * @param {string} htmlTemplate - The HTML string to be used as the template for the shadow DOM.
+     * @protected
+     */
+    protected constructor(htmlTemplate: string);
+    /**
+     * Queries the shadow DOM for an element matching the given selector.
+     * @param {string} selector - The CSS selector to match.
+     * @returns {T} The first element matching the selector.
+     * @protected
+     */
+    protected query<T extends HTMLElement>(selector: string): T;
+    /**
+     * Applies a string of CSS to the shadow DOM by creating and appending a `<style>` tag.
+     * @param {string} style - The CSS string to apply.
+     * @protected
+     */
+    protected applyStyles(style: string): void;
+    /**
+     * Dispatches a standard DOM event from this custom element.
+     * @param {string} type - The type of the event to dispatch (e.g., 'click', 'input').
+     * @protected
+     */
+    protected forwardNativeEvent(type: string): void;
+    /**
+     * Dispatches a custom event with an optional detail payload.
+     * @param {string} type - The name of the custom event.
+     * @param {object} [options] - Options for the custom event.
+     * @param {*} [options.detail] - The data payload to send with the event.
+     * @param {Event} [options.originalEvent] - The original event that triggered this custom event.
+     * @protected
+     */
+    protected forwardCustomEvent(type: string, options?: {
+        detail?: unknown;
+        originalEvent?: Event;
+    }): void;
+}

package/lib/css-env.d.ts

@@ -0,0 +1,4 @@
+declare module "*.css" {
+	const content: { [className: string] };
+	export default content;
+}

package/lib/index.d.ts

@@ -0,0 +1,4 @@
+export { AeroNumericInput } from './components/numeric_input/AeroNumericInput';
+export { AeroSpinbox } from './components/spinbox/AeroSpinbox';
+export { AeroProgressSpinner } from './components/progress_spinner/AeroProgressSpinner';
+export { AeroResizeBox } from './components/resize_box/AeroResizeBox';

package/lib/vite-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="vite/client" />
+