ng-luna 0.0.1 → 0.1.1

package/README.md

@@ -6,6 +6,8 @@ An Angular component library inspired by Windows XP aesthetics, built with XP.cs
 
 ng-luna provides a collection of Angular components styled to match the classic Windows XP design language. The library uses [XP.css](https://botoxparty.github.io/XP.css/) for styling and [IBM Plex](https://www.ibm.com/plex/) fonts for typography.
 
+All components are **standalone** and implement Angular's reactive forms API where applicable, making them compatible with `FormControl`, `FormGroup`, and `ngModel`.
+
 ## Installation
 
 ```bash
@@ -18,24 +20,30 @@ This library requires the following peer dependencies:
 
 - `@angular/common`: 19.2.15
 - `@angular/core`: 19.2.15
+- `@angular/forms`: 19.2.15
 
 ## Usage
 
-### Import the Module
+### Import Components
 
-Import the components you need in your Angular application:
+Import the components you need in your Angular application. All components are standalone:
 
 ```typescript
 import { ButtonComponent } from 'ng-luna';
+
+@Component({
+    imports: [ ButtonComponent ],
+    // ...
+})
 ```
 
+## Components
+
 ### Button Component
 
-The `luna-button` component provides a Windows XP-styled button:
+The `luna-button` component provides a Windows XP-styled button.
 
-```html
-<luna-button (click)="handleClick()">Click Me</luna-button>
-```
+**Selector:** `luna-button`
 
 #### Inputs
 
@@ -71,6 +79,337 @@ The `luna-button` component provides a Windows XP-styled button:
 </luna-button>
 ```
 
+### Checkbox Component
+
+The `luna-checkbox` component provides a Windows XP-styled checkbox that implements `ControlValueAccessor` for reactive forms support.
+
+**Selector:** `luna-checkbox`
+
+#### Inputs
+
+- `disabled: boolean` - Whether the checkbox is disabled (default: `false`)
+- `label?: string` - Label text for the checkbox
+- `name?: string` - Name attribute for the checkbox
+- `value?: string` - Value attribute for the checkbox
+
+#### Outputs
+
+- `change: EventEmitter<boolean>` - Emitted when the checkbox state changes
+
+#### Example
+
+```html
+<luna-checkbox 
+    [(ngModel)]="isChecked"
+    label="Accept terms and conditions"
+    (change)="onCheckboxChange($event)">
+</luna-checkbox>
+```
+
+### Fieldset Component
+
+The `luna-fieldset` component provides a Windows XP-styled fieldset for grouping form controls.
+
+**Selector:** `luna-fieldset`
+
+#### Inputs
+
+- `legend?: string` - Legend text for the fieldset
+
+#### Example
+
+```html
+<luna-fieldset legend="User Information">
+    <!-- Form controls here -->
+</luna-fieldset>
+```
+
+### Input Component
+
+The `luna-input` component provides a Windows XP-styled text input that implements `ControlValueAccessor` for reactive forms support.
+
+**Selector:** `luna-input`
+
+#### Inputs
+
+- `disabled: boolean` - Whether the input is disabled (default: `false`)
+- `name?: string` - Name attribute for the input
+- `placeholder?: string` - Placeholder text
+- `type: InputType` - Input type: `'text' | 'password' | 'email'` (default: `'text'`)
+- `readonly: boolean` - Whether the input is readonly (default: `false`)
+
+#### Outputs
+
+- `change: EventEmitter<string>` - Emitted when the input value changes
+- `blur: EventEmitter<FocusEvent>` - Emitted when the input loses focus
+
+#### Example
+
+```html
+<luna-input 
+    [(ngModel)]="username"
+    type="text"
+    placeholder="Enter username"
+    (change)="onInputChange($event)">
+</luna-input>
+```
+
+### Progress Component
+
+The `luna-progress` component provides a Windows XP-styled progress bar.
+
+**Selector:** `luna-progress`
+
+#### Inputs
+
+- `value?: number` - Current progress value
+- `max: number` - Maximum value (default: `100`)
+
+#### Example
+
+```html
+<luna-progress 
+    [value]="progressValue"
+    [max]="100">
+</luna-progress>
+```
+
+### Radio Component
+
+The `luna-radio` component provides a Windows XP-styled radio button that implements `ControlValueAccessor` for reactive forms support.
+
+**Selector:** `luna-radio`
+
+#### Inputs
+
+- `disabled: boolean` - Whether the radio button is disabled (default: `false`)
+- `label?: string` - Label text for the radio button
+- `name?: string` - Name attribute for the radio button (required for grouping)
+- `value?: string` - Value attribute for the radio button
+
+#### Outputs
+
+- `change: EventEmitter<string>` - Emitted when the radio button is selected
+
+#### Example
+
+```html
+<luna-radio 
+    name="option"
+    value="option1"
+    label="Option 1"
+    [(ngModel)]="selectedOption">
+</luna-radio>
+<luna-radio 
+    name="option"
+    value="option2"
+    label="Option 2"
+    [(ngModel)]="selectedOption">
+</luna-radio>
+```
+
+### Select Component
+
+The `luna-select` component provides a Windows XP-styled select dropdown that implements `ControlValueAccessor` for reactive forms support.
+
+**Selector:** `luna-select`
+
+#### Inputs
+
+- `disabled: boolean` - Whether the select is disabled (default: `false`)
+- `name?: string` - Name attribute for the select
+
+#### Outputs
+
+- `change: EventEmitter<string>` - Emitted when the selection changes
+
+#### Example
+
+```html
+<luna-select 
+    [(ngModel)]="selectedValue"
+    (change)="onSelectChange($event)">
+    <option value="option1">Option 1</option>
+    <option value="option2">Option 2</option>
+</luna-select>
+```
+
+### Slider Component
+
+The `luna-slider` component provides a Windows XP-styled range slider that implements `ControlValueAccessor` for reactive forms support.
+
+**Selector:** `luna-slider`
+
+#### Inputs
+
+- `disabled: boolean` - Whether the slider is disabled (default: `false`)
+- `name?: string` - Name attribute for the slider
+- `min: number` - Minimum value (default: `0`)
+- `max: number` - Maximum value (default: `100`)
+- `step: number` - Step value (default: `1`)
+- `vertical: boolean` - Whether the slider is vertical (default: `false`)
+- `boxIndicator: boolean` - Whether to show a box indicator (default: `false`)
+
+#### Outputs
+
+- `change: EventEmitter<number>` - Emitted when the slider value changes
+
+#### Example
+
+```html
+<luna-slider 
+    [(ngModel)]="sliderValue"
+    [min]="0"
+    [max]="100"
+    [step]="1"
+    (change)="onSliderChange($event)">
+</luna-slider>
+```
+
+### Tabs Component
+
+The `luna-tabs` component provides a Windows XP-styled tab interface.
+
+**Selector:** `luna-tabs`
+
+#### Inputs
+
+- `tabs: Tab[]` - Array of tab objects with `id`, `label`, and optional `content`
+- `activeTabId?: string` - ID of the currently active tab
+
+#### Outputs
+
+- `tabChange: EventEmitter<string>` - Emitted when a tab is selected
+
+#### Example
+
+```html
+<luna-tabs 
+    [tabs]="tabs"
+    [activeTabId]="activeTabId"
+    (tabChange)="onTabChange($event)">
+</luna-tabs>
+```
+
+```typescript
+tabs: Tab[] = [
+    { id: 'tab1', label: 'Tab 1', content: 'Content 1' },
+    { id: 'tab2', label: 'Tab 2', content: 'Content 2' }
+];
+```
+
+### Textarea Component
+
+The `luna-textarea` component provides a Windows XP-styled textarea that implements `ControlValueAccessor` for reactive forms support.
+
+**Selector:** `luna-textarea`
+
+#### Inputs
+
+- `disabled: boolean` - Whether the textarea is disabled (default: `false`)
+- `name?: string` - Name attribute for the textarea
+- `placeholder?: string` - Placeholder text
+- `rows?: number` - Number of visible rows
+- `cols?: number` - Number of visible columns
+- `readonly: boolean` - Whether the textarea is readonly (default: `false`)
+
+#### Outputs
+
+- `change: EventEmitter<string>` - Emitted when the textarea value changes
+- `blur: EventEmitter<FocusEvent>` - Emitted when the textarea loses focus
+
+#### Example
+
+```html
+<luna-textarea 
+    [(ngModel)]="message"
+    [rows]="5"
+    [cols]="40"
+    placeholder="Enter your message"
+    (change)="onTextareaChange($event)">
+</luna-textarea>
+```
+
+### Window Component
+
+The `luna-window` component provides a Windows XP-styled window with title bar and controls.
+
+**Selector:** `luna-window`
+
+#### Inputs
+
+- `title?: string` - Window title text
+- `showMinimize: boolean` - Whether to show the minimize button (default: `true`)
+- `showMaximize: boolean` - Whether to show the maximize button (default: `true`)
+- `showHelp: boolean` - Whether to show the help button (default: `false`)
+- `showClose: boolean` - Whether to show the close button (default: `true`)
+- `isMaximized: boolean` - Whether the window is currently maximized (default: `false`)
+
+#### Outputs
+
+- `minimize: EventEmitter<void>` - Emitted when the minimize button is clicked
+- `maximize: EventEmitter<void>` - Emitted when the maximize button is clicked
+- `restore: EventEmitter<void>` - Emitted when the restore button is clicked
+- `help: EventEmitter<void>` - Emitted when the help button is clicked
+- `close: EventEmitter<void>` - Emitted when the close button is clicked
+
+#### Example
+
+```html
+<luna-window 
+    title="My Application"
+    [showHelp]="true"
+    (minimize)="onMinimize()"
+    (maximize)="onMaximize()"
+    (close)="onClose()">
+    <div class="window-body">
+        Window content goes here
+    </div>
+</luna-window>
+```
+
+## Reactive Forms Support
+
+Components that implement `ControlValueAccessor` (checkbox, input, radio, select, slider, textarea) can be used with Angular's reactive forms:
+
+```typescript
+import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
+
+export class MyComponent
+{
+    form: FormGroup;
+
+    constructor(private fb: FormBuilder)
+    {
+        this.form = this.fb.group({
+            username: [''],
+            email: [''],
+            agreeToTerms: [false]
+        });
+    }
+}
+```
+
+```html
+<form [formGroup]="form">
+    <luna-input 
+        formControlName="username"
+        placeholder="Username">
+    </luna-input>
+    
+    <luna-input 
+        formControlName="email"
+        type="email"
+        placeholder="Email">
+    </luna-input>
+    
+    <luna-checkbox 
+        formControlName="agreeToTerms"
+        label="I agree to the terms">
+    </luna-checkbox>
+</form>
+```
+
 ## Development
 
 ### Building the Library
@@ -86,9 +425,22 @@ ng-luna/
 ├── src/
 │   ├── controls/          # Component library controls
 │   │   ├── button/        # Button component
+│   │   ├── checkbox/      # Checkbox component
+│   │   ├── fieldset/      # Fieldset component
+│   │   ├── input/         # Input component
+│   │   ├── progress/      # Progress component
+│   │   ├── radio/         # Radio component
+│   │   ├── select/        # Select component
+│   │   ├── slider/        # Slider component
+│   │   ├── tabs/          # Tabs component
+│   │   ├── textarea/      # Textarea component
+│   │   ├── window/        # Window component
 │   │   └── index.ts       # Controls barrel export
 │   ├── theme/             # Theme files (fonts, styles)
-│   │   └── _fonts.scss    # IBM Plex font imports
+│   │   ├── _fonts.scss    # IBM Plex font imports
+│   │   ├── _palette.scss  # Color palette
+│   │   ├── _graphics.scss # SVG graphics
+│   │   └── _global.scss   # Global styles
 │   └── public-api.ts      # Public API surface
 ├── ng-package.json        # ng-packagr configuration
 ├── package.json           # Package dependencies
@@ -98,7 +450,7 @@ ng-luna/
 ## Dependencies
 
 - **XP.css** (v0.2.6) - Windows XP styling framework
-- **@ibm/plex** (v6.4.1) - IBM Plex font families
+- **@ibm/plex** (v6.4.1) - IBM Plex font families (fonts are bundled with the library)
 - **@angular/cdk** (v19.2.17) - Angular Component Dev Kit
 
 ## Publishing
@@ -155,4 +507,3 @@ npm publish ./dist
 MIT License - see [LICENSE](LICENSE) file for details.
 
 Copyright (c) 2025 Adam R Moss
-

package/controls/button/button.component.d.ts

@@ -1,29 +1,26 @@
 import { EventEmitter } from '@angular/core';
+import { LunaControl } from '../luna-control';
 import * as i0 from "@angular/core";
 export type ButtonType = 'button' | 'submit' | 'reset';
 export type FormEnctype = 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain';
 export type FormMethod = 'get' | 'post';
 export type FormTarget = '_self' | '_blank' | '_parent' | '_top';
 export type PopoverTargetAction = 'show' | 'hide' | 'toggle';
-export declare class ButtonComponent {
-    autofocus: boolean;
+export declare class ButtonComponent extends LunaControl {
     command?: string;
     commandfor?: string;
-    disabled: boolean;
     form?: string;
     formaction?: string;
     formenctype?: FormEnctype;
     formmethod?: FormMethod;
     formnovalidate: boolean;
     formtarget?: FormTarget;
-    name?: string;
     popovertarget?: string;
     popovertargetaction?: PopoverTargetAction;
-    tabindex?: number;
     type: ButtonType;
     value?: string;
     click: EventEmitter<MouseEvent>;
     onClick(event: MouseEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "luna-button", never, { "autofocus": { "alias": "autofocus"; "required": false; }; "command": { "alias": "command"; "required": false; }; "commandfor": { "alias": "commandfor"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "form": { "alias": "form"; "required": false; }; "formaction": { "alias": "formaction"; "required": false; }; "formenctype": { "alias": "formenctype"; "required": false; }; "formmethod": { "alias": "formmethod"; "required": false; }; "formnovalidate": { "alias": "formnovalidate"; "required": false; }; "formtarget": { "alias": "formtarget"; "required": false; }; "name": { "alias": "name"; "required": false; }; "popovertarget": { "alias": "popovertarget"; "required": false; }; "popovertargetaction": { "alias": "popovertargetaction"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "type": { "alias": "type"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "click": "click"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "luna-button", never, { "command": { "alias": "command"; "required": false; }; "commandfor": { "alias": "commandfor"; "required": false; }; "form": { "alias": "form"; "required": false; }; "formaction": { "alias": "formaction"; "required": false; }; "formenctype": { "alias": "formenctype"; "required": false; }; "formmethod": { "alias": "formmethod"; "required": false; }; "formnovalidate": { "alias": "formnovalidate"; "required": false; }; "formtarget": { "alias": "formtarget"; "required": false; }; "popovertarget": { "alias": "popovertarget"; "required": false; }; "popovertargetaction": { "alias": "popovertargetaction"; "required": false; }; "type": { "alias": "type"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "click": "click"; }, never, ["*"], true, never>;
 }

package/controls/checkbox/checkbox.component.d.ts

@@ -1,10 +1,9 @@
 import { EventEmitter } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
+import { LunaControl } from '../luna-control';
 import * as i0 from "@angular/core";
-export declare class CheckboxComponent implements ControlValueAccessor {
-    disabled: boolean;
+export declare class CheckboxComponent extends LunaControl implements ControlValueAccessor {
     label?: string;
-    name?: string;
     value?: string;
     change: EventEmitter<boolean>;
     checked: boolean;
@@ -16,5 +15,5 @@ export declare class CheckboxComponent implements ControlValueAccessor {
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CheckboxComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CheckboxComponent, "luna-checkbox", never, { "disabled": { "alias": "disabled"; "required": false; }; "label": { "alias": "label"; "required": false; }; "name": { "alias": "name"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "change": "change"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CheckboxComponent, "luna-checkbox", never, { "label": { "alias": "label"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "change": "change"; }, never, ["*"], true, never>;
 }

package/controls/fieldset/fieldset.component.d.ts

@@ -1,5 +1,6 @@
+import { LunaControl } from '../luna-control';
 import * as i0 from "@angular/core";
-export declare class FieldsetComponent {
+export declare class FieldsetComponent extends LunaControl {
     legend?: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<FieldsetComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<FieldsetComponent, "luna-fieldset", never, { "legend": { "alias": "legend"; "required": false; }; }, {}, never, ["*"], true, never>;

package/controls/input/input.component.d.ts

@@ -1,13 +1,12 @@
 import { EventEmitter } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
+import { LunaControl } from '../luna-control';
 import * as i0 from "@angular/core";
 export type InputType = 'text' | 'password' | 'email';
-export declare class InputComponent implements ControlValueAccessor {
-    disabled: boolean;
-    name?: string;
+export declare class InputComponent extends LunaControl implements ControlValueAccessor {
     placeholder?: string;
-    type: InputType;
     readonly: boolean;
+    type: InputType;
     change: EventEmitter<string>;
     blur: EventEmitter<FocusEvent>;
     value: string;
@@ -20,5 +19,5 @@ export declare class InputComponent implements ControlValueAccessor {
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<InputComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<InputComponent, "luna-input", never, { "disabled": { "alias": "disabled"; "required": false; }; "name": { "alias": "name"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "type": { "alias": "type"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; }, { "change": "change"; "blur": "blur"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<InputComponent, "luna-input", never, { "placeholder": { "alias": "placeholder"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "type": { "alias": "type"; "required": false; }; }, { "change": "change"; "blur": "blur"; }, never, never, true, never>;
 }

package/controls/luna-control.d.ts

@@ -0,0 +1,10 @@
+import * as i0 from "@angular/core";
+export declare abstract class LunaControl {
+    id?: string;
+    name?: string;
+    disabled: boolean;
+    tabindex?: number;
+    autofocus: boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LunaControl, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<LunaControl, never, never, { "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; }, {}, never, never, true, never>;
+}

package/controls/progress/progress.component.d.ts

@@ -1,7 +1,8 @@
+import { LunaControl } from '../luna-control';
 import * as i0 from "@angular/core";
-export declare class ProgressComponent {
-    value?: number;
+export declare class ProgressComponent extends LunaControl {
     max: number;
+    value?: number;
     static ɵfac: i0.ɵɵFactoryDeclaration<ProgressComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ProgressComponent, "luna-progress", never, { "value": { "alias": "value"; "required": false; }; "max": { "alias": "max"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ProgressComponent, "luna-progress", never, { "max": { "alias": "max"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, {}, never, never, true, never>;
 }

package/controls/radio/radio.component.d.ts

@@ -1,10 +1,9 @@
 import { EventEmitter } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
+import { LunaControl } from '../luna-control';
 import * as i0 from "@angular/core";
-export declare class RadioComponent implements ControlValueAccessor {
-    disabled: boolean;
+export declare class RadioComponent extends LunaControl implements ControlValueAccessor {
     label?: string;
-    name?: string;
     value?: string;
     change: EventEmitter<string>;
     checked: boolean;
@@ -16,5 +15,5 @@ export declare class RadioComponent implements ControlValueAccessor {
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<RadioComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<RadioComponent, "luna-radio", never, { "disabled": { "alias": "disabled"; "required": false; }; "label": { "alias": "label"; "required": false; }; "name": { "alias": "name"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "change": "change"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RadioComponent, "luna-radio", never, { "label": { "alias": "label"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "change": "change"; }, never, ["*"], true, never>;
 }

package/controls/select/select.component.d.ts

@@ -1,9 +1,8 @@
 import { EventEmitter } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
+import { LunaControl } from '../luna-control';
 import * as i0 from "@angular/core";
-export declare class SelectComponent implements ControlValueAccessor {
-    disabled: boolean;
-    name?: string;
+export declare class SelectComponent extends LunaControl implements ControlValueAccessor {
     change: EventEmitter<string>;
     value: string;
     private onChange;
@@ -14,5 +13,5 @@ export declare class SelectComponent implements ControlValueAccessor {
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SelectComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SelectComponent, "luna-select", never, { "disabled": { "alias": "disabled"; "required": false; }; "name": { "alias": "name"; "required": false; }; }, { "change": "change"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SelectComponent, "luna-select", never, {}, { "change": "change"; }, never, ["*"], true, never>;
 }

package/controls/slider/slider.component.d.ts

@@ -1,14 +1,13 @@
 import { EventEmitter } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
+import { LunaControl } from '../luna-control';
 import * as i0 from "@angular/core";
-export declare class SliderComponent implements ControlValueAccessor {
-    disabled: boolean;
-    name?: string;
-    min: number;
+export declare class SliderComponent extends LunaControl implements ControlValueAccessor {
+    boxIndicator: boolean;
     max: number;
+    min: number;
     step: number;
     vertical: boolean;
-    boxIndicator: boolean;
     change: EventEmitter<number>;
     value: number;
     private onChange;
@@ -20,5 +19,5 @@ export declare class SliderComponent implements ControlValueAccessor {
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SliderComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SliderComponent, "luna-slider", never, { "disabled": { "alias": "disabled"; "required": false; }; "name": { "alias": "name"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "step": { "alias": "step"; "required": false; }; "vertical": { "alias": "vertical"; "required": false; }; "boxIndicator": { "alias": "boxIndicator"; "required": false; }; }, { "change": "change"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SliderComponent, "luna-slider", never, { "boxIndicator": { "alias": "boxIndicator"; "required": false; }; "max": { "alias": "max"; "required": false; }; "min": { "alias": "min"; "required": false; }; "step": { "alias": "step"; "required": false; }; "vertical": { "alias": "vertical"; "required": false; }; }, { "change": "change"; }, never, never, true, never>;
 }

package/controls/tabs/tabs.component.d.ts

@@ -1,16 +1,17 @@
 import { EventEmitter } from '@angular/core';
+import { LunaControl } from '../luna-control';
 import * as i0 from "@angular/core";
 export interface Tab {
     id: string;
     label: string;
     content?: string;
 }
-export declare class TabsComponent {
-    tabs: Tab[];
+export declare class TabsComponent extends LunaControl {
     activeTabId?: string;
+    tabs: Tab[];
     tabChange: EventEmitter<string>;
     selectTab(tabId: string): void;
     isActive(tabId: string): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<TabsComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TabsComponent, "luna-tabs", never, { "tabs": { "alias": "tabs"; "required": false; }; "activeTabId": { "alias": "activeTabId"; "required": false; }; }, { "tabChange": "tabChange"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TabsComponent, "luna-tabs", never, { "activeTabId": { "alias": "activeTabId"; "required": false; }; "tabs": { "alias": "tabs"; "required": false; }; }, { "tabChange": "tabChange"; }, never, ["*"], true, never>;
 }

package/controls/textarea/textarea.component.d.ts

@@ -1,13 +1,12 @@
 import { EventEmitter } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
+import { LunaControl } from '../luna-control';
 import * as i0 from "@angular/core";
-export declare class TextareaComponent implements ControlValueAccessor {
-    disabled: boolean;
-    name?: string;
-    placeholder?: string;
-    rows?: number;
+export declare class TextareaComponent extends LunaControl implements ControlValueAccessor {
     cols?: number;
+    placeholder?: string;
     readonly: boolean;
+    rows?: number;
     change: EventEmitter<string>;
     blur: EventEmitter<FocusEvent>;
     value: string;
@@ -20,5 +19,5 @@ export declare class TextareaComponent implements ControlValueAccessor {
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TextareaComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TextareaComponent, "luna-textarea", never, { "disabled": { "alias": "disabled"; "required": false; }; "name": { "alias": "name"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "cols": { "alias": "cols"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; }, { "change": "change"; "blur": "blur"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TextareaComponent, "luna-textarea", never, { "cols": { "alias": "cols"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; }, { "change": "change"; "blur": "blur"; }, never, never, true, never>;
 }