native-document 1.0.92 → 1.0.94

package/types/forms.d.ts

@@ -1,51 +1,88 @@
 // Form elements type definitions
-import { Attributes, ValidChild } from './elements';
-import { NDElement} from "./nd-element";
-import {ElementFunction} from "./elements";
-
-// Form Elements
-export declare const Form: ElementFunction & {
-    submit(action: string | ((event: Event) => void)): HTMLFormElement & { nd: NDElement };
-    multipartFormData(): HTMLFormElement & { nd: NDElement };
-    post(action: string): HTMLFormElement & { nd: NDElement };
-    get(action: string): HTMLFormElement & { nd: NDElement };
+import {
+    ValidChild,
+    ElementFunction,
+    ElementFunctionNoChildren,
+    NdHTMLElement,
+    GlobalAttributes,
+    Observable
+} from './elements';
+import {
+    FormAttributes,
+    InputAttributes,
+    TextAreaAttributes,
+    SelectAttributes,
+    OptionAttributes,
+    ButtonAttributes,
+    OutputAttributes,
+    ProgressAttributes,
+    MeterAttributes,
+    LabelAttributes,
+} from './elements';
+
+// ─────────────────────────────────────────────
+// Form
+// ─────────────────────────────────────────────
+
+export declare const Form: (
+    attributes?: FormAttributes,
+    children?: ValidChild
+) => NdHTMLElement<HTMLFormElement> & {
+    submit:            (actionOrFn: string | ((e: SubmitEvent) => void)) => NdHTMLElement<HTMLFormElement>;
+    post:              (action: string) => NdHTMLElement<HTMLFormElement>;
+    get:               (action: string) => NdHTMLElement<HTMLFormElement>;
+    multipartFormData: () => NdHTMLElement<HTMLFormElement>;
 };
 
-export declare const Input: ElementFunction;
-export declare const TextArea: ElementFunction;
-export declare const Select: ElementFunction;
-export declare const Option: ElementFunction;
-export declare const Button: ElementFunction;
-
-// Specialized Input Types
-export declare const HiddenInput: (attributes?: Attributes) => HTMLInputElement & { nd: NDElement };
-export declare const FileInput: (attributes?: Attributes) => HTMLInputElement & { nd: NDElement };
-export declare const PasswordInput: (attributes?: Attributes) => HTMLInputElement & { nd: NDElement };
-export declare const Checkbox: (attributes?: Attributes) => HTMLInputElement & { nd: NDElement };
-export declare const Radio: (attributes?: Attributes) => HTMLInputElement & { nd: NDElement };
-export declare const NumberInput: (attributes?: Attributes) => HTMLInputElement & { nd: NDElement };
-export declare const EmailInput: (attributes?: Attributes) => HTMLInputElement & { nd: NDElement };
-export declare const DateInput: (attributes?: Attributes) => HTMLInputElement & { nd: NDElement };
-export declare const TimeInput: (attributes?: Attributes) => HTMLInputElement & { nd: NDElement };
-export declare const RangeInput: (attributes?: Attributes) => HTMLInputElement & { nd: NDElement };
-export declare const ColorInput: (attributes?: Attributes) => HTMLInputElement & { nd: NDElement };
-
-export declare const ReadonlyInput: (attributes?: Attributes) => HTMLInputElement & { nd: NDElement };
-export declare const DateTimeInput: (attributes?: Attributes) => HTMLInputElement & { nd: NDElement };
-export declare const WeekInput: (attributes?: Attributes) => HTMLInputElement & { nd: NDElement };
-export declare const MonthInput: (attributes?: Attributes) => HTMLInputElement & { nd: NDElement };
-export declare const SearchInput: (attributes?: Attributes) => HTMLInputElement & { nd: NDElement };
-export declare const TelInput: (attributes?: Attributes) => HTMLInputElement & { nd: NDElement };
-export declare const UrlInput: (attributes?: Attributes) => HTMLInputElement & { nd: NDElement };
-
-export declare const TextInput: ElementFunction;
-export declare const FieldSet: ElementFunction;
-export declare const Legend: ElementFunction;
-export declare const Datalist: ElementFunction;
-export declare const Output: ElementFunction;
-export declare const Progress: ElementFunction;
-export declare const Meter: ElementFunction;
-
-// Specialized Button Types
-export declare const SimpleButton: (child: ValidChild, attributes?: Attributes) => HTMLButtonElement & { nd: NDElement };
-export declare const SubmitButton: (child: ValidChild, attributes?: Attributes) => HTMLButtonElement & { nd: NDElement };
+// ─────────────────────────────────────────────
+// Input
+// ─────────────────────────────────────────────
+
+export declare const Input:         ElementFunctionNoChildren<InputAttributes, HTMLInputElement>;
+export declare const ReadonlyInput: (attributes?: Omit<InputAttributes, 'type' | 'readonly' | 'readOnly'>) => NdHTMLElement<HTMLInputElement>;
+export declare const HiddenInput:   (attributes?: Omit<InputAttributes, 'type'>) => NdHTMLElement<HTMLInputElement>;
+export declare const FileInput:     (attributes?: Omit<InputAttributes, 'type'>) => NdHTMLElement<HTMLInputElement>;
+export declare const PasswordInput: (attributes?: Omit<InputAttributes, 'type'>) => NdHTMLElement<HTMLInputElement>;
+export declare const Checkbox:      (attributes?: Omit<InputAttributes, 'type'>) => NdHTMLElement<HTMLInputElement>;
+export declare const Radio:         (attributes?: Omit<InputAttributes, 'type'>) => NdHTMLElement<HTMLInputElement>;
+export declare const RangeInput:    (attributes?: Omit<InputAttributes, 'type'>) => NdHTMLElement<HTMLInputElement>;
+export declare const ColorInput:    (attributes?: Omit<InputAttributes, 'type'>) => NdHTMLElement<HTMLInputElement>;
+export declare const DateInput:     (attributes?: Omit<InputAttributes, 'type'>) => NdHTMLElement<HTMLInputElement>;
+export declare const TimeInput:     (attributes?: Omit<InputAttributes, 'type'>) => NdHTMLElement<HTMLInputElement>;
+export declare const DateTimeInput: (attributes?: Omit<InputAttributes, 'type'>) => NdHTMLElement<HTMLInputElement>;
+export declare const WeekInput:     (attributes?: Omit<InputAttributes, 'type'>) => NdHTMLElement<HTMLInputElement>;
+export declare const MonthInput:    (attributes?: Omit<InputAttributes, 'type'>) => NdHTMLElement<HTMLInputElement>;
+export declare const SearchInput:   (attributes?: Omit<InputAttributes, 'type'>) => NdHTMLElement<HTMLInputElement>;
+export declare const TelInput:      (attributes?: Omit<InputAttributes, 'type'>) => NdHTMLElement<HTMLInputElement>;
+export declare const UrlInput:      (attributes?: Omit<InputAttributes, 'type'>) => NdHTMLElement<HTMLInputElement>;
+export declare const EmailInput:    (attributes?: Omit<InputAttributes, 'type'>) => NdHTMLElement<HTMLInputElement>;
+export declare const NumberInput:   (attributes?: Omit<InputAttributes, 'type'>) => NdHTMLElement<HTMLInputElement>;
+
+// ─────────────────────────────────────────────
+// Textarea & Select
+// ─────────────────────────────────────────────
+
+export declare const TextArea:  ElementFunction<TextAreaAttributes, HTMLTextAreaElement>;
+export declare const TextInput: typeof TextArea;
+export declare const Select:    ElementFunction<SelectAttributes, HTMLSelectElement>;
+export declare const Option:    ElementFunction<OptionAttributes, HTMLOptionElement>;
+
+// ─────────────────────────────────────────────
+// Button
+// ─────────────────────────────────────────────
+
+export declare const Button:       ElementFunction<ButtonAttributes, HTMLButtonElement>;
+export declare const SimpleButton: (children?: ValidChild, attributes?: Omit<ButtonAttributes, 'type'>) => NdHTMLElement<HTMLButtonElement>;
+export declare const SubmitButton: (children?: ValidChild, attributes?: Omit<ButtonAttributes, 'type'>) => NdHTMLElement<HTMLButtonElement>;
+
+// ─────────────────────────────────────────────
+// Other form elements
+// ─────────────────────────────────────────────
+
+export declare const FieldSet: ElementFunction<GlobalAttributes & { disabled?: Observable<boolean> }, HTMLFieldSetElement>;
+export declare const Legend:   ElementFunction<GlobalAttributes, HTMLLegendElement>;
+export declare const Label:    ElementFunction<LabelAttributes, HTMLLabelElement>;
+export declare const Datalist: ElementFunction<GlobalAttributes, HTMLDataListElement>;
+export declare const Output:   ElementFunction<OutputAttributes, HTMLOutputElement>;
+export declare const Progress: ElementFunction<ProgressAttributes, HTMLProgressElement>;
+export declare const Meter:    ElementFunction<MeterAttributes, HTMLMeterElement>;

package/types/images.d.ts

@@ -1,16 +1,23 @@
 // Image components type definitions
-import {Attributes, ElementFunction, NDElement} from './elements';
-import {ObservableItem} from "./observable";
+import { ElementFunctionNoChildren, NdHTMLElement } from './elements';
+import { ImgAttributes } from './elements';
+import { ObservableItem } from "./observable";
 
+export declare const BaseImage: ElementFunctionNoChildren<ImgAttributes, HTMLImageElement>;
 
-export declare const BaseImage: ElementFunction;
+export declare const Img: (
+    src: string | ObservableItem<string>,
+    attributes?: Omit<ImgAttributes, 'src'>
+) => NdHTMLElement<HTMLImageElement>;
 
-// Image Elements
-export declare const Img: (src: string | ObservableItem<string>, attributes?: Attributes) => HTMLImageElement & { nd: NDElement };
 export declare const AsyncImg: (
     src: string | ObservableItem<string>,
-    defaultImage?: string,
-    attributes?: Attributes,
+    defaultImage?: string | null,
+    attributes?: Omit<ImgAttributes, 'src'>,
     callback?: (error: Error | null, img?: HTMLImageElement) => void
-) => HTMLImageElement & { nd: NDElement };
-export declare const LazyImg: (src: string | ObservableItem<string>, attributes?: Attributes) => HTMLImageElement & { nd: NDElement };
+) => NdHTMLElement<HTMLImageElement>;
+
+export declare const LazyImg: (
+    src: string | ObservableItem<string>,
+    attributes?: Omit<ImgAttributes, 'src' | 'loading'>
+) => NdHTMLElement<HTMLImageElement>;

package/types/nd-element.d.ts

@@ -38,7 +38,9 @@ export interface NDElement {
     shadow(mode: ShadowMode, style?: string | null): this;
     openShadow(style?: string | null): this;
     closedShadow(style?: string | null): this;
-    attach(bindingHydrator: BindingHydrator): HTMLElement;
+    attach(methodName: string, bindingHydrator: BindingHydrator): HTMLElement;
+
+    on(name: string, callback: EventListener, options?: boolean | AddEventListenerOptions): this;
 
     // Mouse Events
     onClick(callback: (event: MouseEvent) => void): this;
@@ -341,8 +343,6 @@ export interface NDElement {
     onPreventStopClick(callback?: (event: MouseEvent) => void): this;
     onPreventStopDblClick(callback?: (event: MouseEvent) => void): this;
     onPreventStopMouseDown(callback?: (event: MouseEvent) => void): this;
-    onPreventStopMouseEnter(callback?: (event: MouseEvent) => void): this;
-    onPreventStopMouseLeave(callback?: (event: MouseEvent) => void): this;
     onPreventStopMouseMove(callback?: (event: MouseEvent) => void): this;
     onPreventStopMouseOut(callback?: (event: MouseEvent) => void): this;
     onPreventStopMouseOver(callback?: (event: MouseEvent) => void): this;
@@ -356,17 +356,15 @@ export interface NDElement {
     onPreventStopKeyUp(callback?: (event: KeyboardEvent) => void): this;
 
     // Prevent + Stop versions for Form Events
-    onPreventStopBlur(callback?: (event: FocusEvent) => void): this;
     onPreventStopChange(callback?: (event: Event) => void): this;
-    onPreventStopFocus(callback?: (event: FocusEvent) => void): this;
-    onPreventStopFocusIn(callback?: (event: FocusEvent) => void): this;
-    onPreventStopFocusOut(callback?: (event: FocusEvent) => void): this;
     onPreventStopInput(callback?: (event: Event) => void): this;
     onPreventStopInvalid(callback?: (event: Event) => void): this;
     onPreventStopReset(callback?: (event: Event) => void): this;
     onPreventStopSearch(callback?: (event: Event) => void): this;
     onPreventStopSelect(callback?: (event: Event) => void): this;
     onPreventStopSubmit(callback?: (event: Event) => void): this;
+    onPreventStopFocusIn(callback?: (event: FocusEvent) => void): this;
+    onPreventStopFocusOut(callback?: (event: FocusEvent) => void): this;
 
     // Prevent + Stop versions for Drag Events
     onPreventStopDrag(callback?: (event: DragEvent) => void): this;
@@ -378,42 +376,8 @@ export interface NDElement {
     onPreventStopDrop(callback?: (event: DragEvent) => void): this;
 
     // Prevent + Stop versions for Window/Page Events
-    onPreventStopAfterPrint(callback?: (event: Event) => void): this;
-    onPreventStopBeforePrint(callback?: (event: Event) => void): this;
     onPreventStopBeforeUnload(callback?: (event: BeforeUnloadEvent) => void): this;
-    onPreventStopError(callback?: (event: Event) => void): this;
     onPreventStopHashChange(callback?: (event: HashChangeEvent) => void): this;
-    onPreventStopLoad(callback?: (event: Event) => void): this;
-    onPreventStopOffline(callback?: (event: Event) => void): this;
-    onPreventStopOnline(callback?: (event: Event) => void): this;
-    onPreventStopPageHide(callback?: (event: PageTransitionEvent) => void): this;
-    onPreventStopPageShow(callback?: (event: PageTransitionEvent) => void): this;
-    onPreventStopResize(callback?: (event: UIEvent) => void): this;
-    onPreventStopScroll(callback?: (event: Event) => void): this;
-    onPreventStopUnload(callback?: (event: Event) => void): this;
-
-    // Prevent + Stop versions for Media Events
-    onPreventStopAbort(callback?: (event: Event) => void): this;
-    onPreventStopCanPlay(callback?: (event: Event) => void): this;
-    onPreventStopCanPlayThrough(callback?: (event: Event) => void): this;
-    onPreventStopDurationChange(callback?: (event: Event) => void): this;
-    onPreventStopEmptied(callback?: (event: Event) => void): this;
-    onPreventStopEnded(callback?: (event: Event) => void): this;
-    onPreventStopLoadedData(callback?: (event: Event) => void): this;
-    onPreventStopLoadedMetadata(callback?: (event: Event) => void): this;
-    onPreventStopLoadStart(callback?: (event: Event) => void): this;
-    onPreventStopPause(callback?: (event: Event) => void): this;
-    onPreventStopPlay(callback?: (event: Event) => void): this;
-    onPreventStopPlaying(callback?: (event: Event) => void): this;
-    onPreventStopProgress(callback?: (event: ProgressEvent) => void): this;
-    onPreventStopRateChange(callback?: (event: Event) => void): this;
-    onPreventStopSeeked(callback?: (event: Event) => void): this;
-    onPreventStopSeeking(callback?: (event: Event) => void): this;
-    onPreventStopStalled(callback?: (event: Event) => void): this;
-    onPreventStopSuspend(callback?: (event: Event) => void): this;
-    onPreventStopTimeUpdate(callback?: (event: Event) => void): this;
-    onPreventStopVolumeChange(callback?: (event: Event) => void): this;
-    onPreventStopWaiting(callback?: (event: Event) => void): this;
 
     // Prevent + Stop versions for Touch Events
     onPreventStopTouchCancel(callback?: (event: TouchEvent) => void): this;
@@ -434,201 +398,4 @@ export interface NDElement {
     onPreventStopCut(callback?: (event: ClipboardEvent) => void): this;
     onPreventStopPaste(callback?: (event: ClipboardEvent) => void): this;
 
-    // DELEGATION METHODS - WHEN (for children)
-
-    // When versions for Mouse Events
-    whenClick(callback: (event: MouseEvent) => void): this;
-    whenDblClick(callback: (event: MouseEvent) => void): this;
-    whenMouseDown(callback: (event: MouseEvent) => void): this;
-    whenMouseEnter(callback: (event: MouseEvent) => void): this;
-    whenMouseLeave(callback: (event: MouseEvent) => void): this;
-    whenMouseMove(callback: (event: MouseEvent) => void): this;
-    whenMouseOut(callback: (event: MouseEvent) => void): this;
-    whenMouseOver(callback: (event: MouseEvent) => void): this;
-    whenMouseUp(callback: (event: MouseEvent) => void): this;
-    whenWheel(callback: (event: WheelEvent) => void): this;
-    whenContextMenu(callback: (event: MouseEvent) => void): this;
-
-    // When versions for Keyboard Events
-    whenKeyDown(callback: (event: KeyboardEvent) => void): this;
-    whenKeyPress(callback: (event: KeyboardEvent) => void): this;
-    whenKeyUp(callback: (event: KeyboardEvent) => void): this;
-
-    // When versions for Form Events
-    whenBlur(callback: (event: FocusEvent) => void): this;
-    whenChange(callback: (event: Event) => void): this;
-    whenFocus(callback: (event: FocusEvent) => void): this;
-    whenFocusIn(callback: (event: FocusEvent) => void): this;
-    whenFocusOut(callback: (event: FocusEvent) => void): this;
-    whenInput(callback: (event: Event) => void): this;
-    whenInvalid(callback: (event: Event) => void): this;
-    whenReset(callback: (event: Event) => void): this;
-    whenSearch(callback: (event: Event) => void): this;
-    whenSelect(callback: (event: Event) => void): this;
-    whenSubmit(callback: (event: Event) => void): this;
-
-    // When versions for Drag Events
-    whenDrag(callback: (event: DragEvent) => void): this;
-    whenDragEnd(callback: (event: DragEvent) => void): this;
-    whenDragEnter(callback: (event: DragEvent) => void): this;
-    whenDragLeave(callback: (event: DragEvent) => void): this;
-    whenDragOver(callback: (event: DragEvent) => void): this;
-    whenDragStart(callback: (event: DragEvent) => void): this;
-    whenDrop(callback: (event: DragEvent) => void): this;
-
-    // When versions for Window/Page Events
-    whenAfterPrint(callback: (event: Event) => void): this;
-    whenBeforePrint(callback: (event: Event) => void): this;
-    whenBeforeUnload(callback: (event: BeforeUnloadEvent) => void): this;
-    whenError(callback: (event: Event) => void): this;
-    whenHashChange(callback: (event: HashChangeEvent) => void): this;
-    whenLoad(callback: (event: Event) => void): this;
-    whenOffline(callback: (event: Event) => void): this;
-    whenOnline(callback: (event: Event) => void): this;
-    whenPageHide(callback: (event: PageTransitionEvent) => void): this;
-    whenPageShow(callback: (event: PageTransitionEvent) => void): this;
-    whenResize(callback: (event: UIEvent) => void): this;
-    whenScroll(callback: (event: Event) => void): this;
-    whenUnload(callback: (event: Event) => void): this;
-
-    // When versions for Media Events
-    whenAbort(callback: (event: Event) => void): this;
-    whenCanPlay(callback: (event: Event) => void): this;
-    whenCanPlayThrough(callback: (event: Event) => void): this;
-    whenDurationChange(callback: (event: Event) => void): this;
-    whenEmptied(callback: (event: Event) => void): this;
-    whenEnded(callback: (event: Event) => void): this;
-    whenLoadedData(callback: (event: Event) => void): this;
-    whenLoadedMetadata(callback: (event: Event) => void): this;
-    whenLoadStart(callback: (event: Event) => void): this;
-    whenPause(callback: (event: Event) => void): this;
-    whenPlay(callback: (event: Event) => void): this;
-    whenPlaying(callback: (event: Event) => void): this;
-    whenProgress(callback: (event: ProgressEvent) => void): this;
-    whenRateChange(callback: (event: Event) => void): this;
-    whenSeeked(callback: (event: Event) => void): this;
-    whenSeeking(callback: (event: Event) => void): this;
-    whenStalled(callback: (event: Event) => void): this;
-    whenSuspend(callback: (event: Event) => void): this;
-    whenTimeUpdate(callback: (event: Event) => void): this;
-    whenVolumeChange(callback: (event: Event) => void): this;
-    whenWaiting(callback: (event: Event) => void): this;
-
-    // When versions for Touch Events
-    whenTouchCancel(callback: (event: TouchEvent) => void): this;
-    whenTouchEnd(callback: (event: TouchEvent) => void): this;
-    whenTouchMove(callback: (event: TouchEvent) => void): this;
-    whenTouchStart(callback: (event: TouchEvent) => void): this;
-
-    // When versions for Animation Events
-    whenAnimationEnd(callback: (event: AnimationEvent) => void): this;
-    whenAnimationIteration(callback: (event: AnimationEvent) => void): this;
-    whenAnimationStart(callback: (event: AnimationEvent) => void): this;
-
-    // When versions for Transition Events
-    whenTransitionEnd(callback: (event: TransitionEvent) => void): this;
-
-    // When versions for Clipboard Events
-    whenCopy(callback: (event: ClipboardEvent) => void): this;
-    whenCut(callback: (event: ClipboardEvent) => void): this;
-    whenPaste(callback: (event: ClipboardEvent) => void): this;
-
-    // CAPTURE METHODS (for parents)
-
-    // Capture versions for Mouse Events
-    captureClick(directHandler?: (event: MouseEvent) => void): this;
-    captureDblClick(directHandler?: (event: MouseEvent) => void): this;
-    captureMouseDown(directHandler?: (event: MouseEvent) => void): this;
-    captureMouseEnter(directHandler?: (event: MouseEvent) => void): this;
-    captureMouseLeave(directHandler?: (event: MouseEvent) => void): this;
-    captureMouseMove(directHandler?: (event: MouseEvent) => void): this;
-    captureMouseOut(directHandler?: (event: MouseEvent) => void): this;
-    captureMouseOver(directHandler?: (event: MouseEvent) => void): this;
-    captureMouseUp(directHandler?: (event: MouseEvent) => void): this;
-    captureWheel(directHandler?: (event: WheelEvent) => void): this;
-    captureContextMenu(directHandler?: (event: MouseEvent) => void): this;
-
-    // Capture versions for Keyboard Events
-    captureKeyDown(directHandler?: (event: KeyboardEvent) => void): this;
-    captureKeyPress(directHandler?: (event: KeyboardEvent) => void): this;
-    captureKeyUp(directHandler?: (event: KeyboardEvent) => void): this;
-
-    // Capture versions for Form Events
-    captureBlur(directHandler?: (event: FocusEvent) => void): this;
-    captureChange(directHandler?: (event: Event) => void): this;
-    captureFocus(directHandler?: (event: FocusEvent) => void): this;
-    captureFocusIn(directHandler?: (event: FocusEvent) => void): this;
-    captureFocusOut(directHandler?: (event: FocusEvent) => void): this;
-    captureInput(directHandler?: (event: Event) => void): this;
-    captureInvalid(directHandler?: (event: Event) => void): this;
-    captureReset(directHandler?: (event: Event) => void): this;
-    captureSearch(directHandler?: (event: Event) => void): this;
-    captureSelect(directHandler?: (event: Event) => void): this;
-    captureSubmit(directHandler?: (event: Event) => void): this;
-
-    // Capture versions for Drag Events
-    captureDrag(directHandler?: (event: DragEvent) => void): this;
-    captureDragEnd(directHandler?: (event: DragEvent) => void): this;
-    captureDragEnter(directHandler?: (event: DragEvent) => void): this;
-    captureDragLeave(directHandler?: (event: DragEvent) => void): this;
-    captureDragOver(directHandler?: (event: DragEvent) => void): this;
-    captureDragStart(directHandler?: (event: DragEvent) => void): this;
-    captureDrop(directHandler?: (event: DragEvent) => void): this;
-
-    // Capture versions for Window/Page Events
-    captureAfterPrint(directHandler?: (event: Event) => void): this;
-    captureBeforePrint(directHandler?: (event: Event) => void): this;
-    captureBeforeUnload(directHandler?: (event: BeforeUnloadEvent) => void): this;
-    captureError(directHandler?: (event: Event) => void): this;
-    captureHashChange(directHandler?: (event: HashChangeEvent) => void): this;
-    captureLoad(directHandler?: (event: Event) => void): this;
-    captureOffline(directHandler?: (event: Event) => void): this;
-    captureOnline(directHandler?: (event: Event) => void): this;
-    capturePageHide(directHandler?: (event: PageTransitionEvent) => void): this;
-    capturePageShow(directHandler?: (event: PageTransitionEvent) => void): this;
-    captureResize(directHandler?: (event: UIEvent) => void): this;
-    captureScroll(directHandler?: (event: Event) => void): this;
-    captureUnload(directHandler?: (event: Event) => void): this;
-
-    // Capture versions for Media Events
-    captureAbort(directHandler?: (event: Event) => void): this;
-    captureCanPlay(directHandler?: (event: Event) => void): this;
-    captureCanPlayThrough(directHandler?: (event: Event) => void): this;
-    captureDurationChange(directHandler?: (event: Event) => void): this;
-    captureEmptied(directHandler?: (event: Event) => void): this;
-    captureEnded(directHandler?: (event: Event) => void): this;
-    captureLoadedData(directHandler?: (event: Event) => void): this;
-    captureLoadedMetadata(directHandler?: (event: Event) => void): this;
-    captureLoadStart(directHandler?: (event: Event) => void): this;
-    capturePause(directHandler?: (event: Event) => void): this;
-    capturePlay(directHandler?: (event: Event) => void): this;
-    capturePlaying(directHandler?: (event: Event) => void): this;
-    captureProgress(directHandler?: (event: ProgressEvent) => void): this;
-    captureRateChange(directHandler?: (event: Event) => void): this;
-    captureSeeked(directHandler?: (event: Event) => void): this;
-    captureSeeking(directHandler?: (event: Event) => void): this;
-    captureStalled(directHandler?: (event: Event) => void): this;
-    captureSuspend(directHandler?: (event: Event) => void): this;
-    captureTimeUpdate(directHandler?: (event: Event) => void): this;
-    captureVolumeChange(directHandler?: (event: Event) => void): this;
-    captureWaiting(directHandler?: (event: Event) => void): this;
-
-    // Capture versions for Touch Events
-    captureTouchCancel(directHandler?: (event: TouchEvent) => void): this;
-    captureTouchEnd(directHandler?: (event: TouchEvent) => void): this;
-    captureTouchMove(directHandler?: (event: TouchEvent) => void): this;
-    captureTouchStart(directHandler?: (event: TouchEvent) => void): this;
-
-    // Capture versions for Animation Events
-    captureAnimationEnd(directHandler?: (event: AnimationEvent) => void): this;
-    captureAnimationIteration(directHandler?: (event: AnimationEvent) => void): this;
-    captureAnimationStart(directHandler?: (event: AnimationEvent) => void): this;
-
-    // Capture versions for Transition Events
-    captureTransitionEnd(directHandler?: (event: TransitionEvent) => void): this;
-
-    // Capture versions for Clipboard Events
-    captureCopy(directHandler?: (event: ClipboardEvent) => void): this;
-    captureCut(directHandler?: (event: ClipboardEvent) => void): this;
-    capturePaste(directHandler?: (event: ClipboardEvent) => void): this;
 }

package/types/observable.d.ts

@@ -23,7 +23,12 @@ export interface ObservableItem<T = any> {
 
     check<U>(callback: (value: T) => U): ObservableChecker<U>;
     get<U>(callback: (value: T) => U): ObservableChecker<U>;
-    when(value: T): { $target: T; $observer: ObservableItem<T> };
+    when(value: T): ObservableWhen<T>;
+    off(value: T, callback?: Function): void;
+    once(predicate: T | ((value: T) => boolean), callback: (value: T) => void): void;
+    onCleanup(callback: () => void): void;
+    intercept(callback: (newValue: T, currentValue: T) => T | undefined): this;
+    disconnectAll(): void;
 
     toString(): string;
     equals(value: any): boolean;
@@ -41,7 +46,7 @@ export class ObservableWhen<T = any> {
 
     subscribe(callback: (value: boolean) => void): Unsubscribe;
     val(): boolean;
-    isMath(): boolean;
+    isMatch(): boolean;
     isActive(): boolean;
 }
 
@@ -64,6 +69,8 @@ export interface ObservableChecker<T = any> {
 }
 
 export interface ObservableArray<T> extends ObservableItem<T[]> {
+    readonly length: number;
+
     push(...items: T[]): number;
     pop(): T | undefined;
     shift(): T | undefined;
@@ -78,7 +85,6 @@ export interface ObservableArray<T> extends ObservableItem<T[]> {
     removeItem(item: T): T[];
     remove(index: number): T[];
     swap(indexA: number, indexB: number): boolean;
-    length(): number;
     count(condition: (item:T, index?:number) => boolean): number;
     populateAndRender(iteration: number, callback: (index: number) => T): void;
 

package/types/router.d.ts

@@ -1,6 +1,7 @@
 // Router system type definitions
 import { ValidChild } from './elements';
 import { NDElement } from './nd-element';
+import {ValidChildren} from "./validator";
 
 export interface RouteParams {
     [key: string]: string;
@@ -21,6 +22,7 @@ export interface Route {
     middlewares(): Function[];
     shouldRebuild(): boolean;
     path(): string;
+    layout(): Function | null;
     match(path: string): RouteParams | false;
     url(configs: { params?: RouteParams; query?: QueryParams; basePath?: string }): string;
 }
@@ -30,6 +32,7 @@ export interface RouterState {
     params: RouteParams | null;
     query: QueryParams | null;
     path: string | null;
+    hash: string | null;
 }
 
 export interface Router {
@@ -41,9 +44,10 @@ export interface Router {
         middlewares?: Function[];
         shouldRebuild?: boolean;
         with?: Record<string, string>;
+        layout?: (children: ValidChild) => ValidChild ;
     }): this;
 
-    group(suffix: string, options: { middlewares?: Function[]; name?: string, layout?: Function }, callback: () => void): this;
+    group(suffix: string, options: { middlewares?: Function[]; name?: string; layout?: Function }, callback: () => void): this;
 
     generateUrl(name: string, params?: RouteParams, query?: QueryParams): string;
     resolve(target: string | { name: string; params?: RouteParams; query?: QueryParams }): {

package/types/template-cloner.ts

@@ -29,6 +29,7 @@ export declare class TemplateCloner {
     style(fn: (...data: any[]) => any): BindingHydrator;
     class(fn: (...data: any[]) => any): BindingHydrator;
     value(callbackOrProperty: string | ((...data: any[]) => any)): BindingHydrator;
+    text(callbackOrProperty: string | ((...data: any[]) => any)): BindingHydrator;
     attr(fn: (...data: any[]) => any): BindingHydrator;
     event(fn: (event: Event, ...data: any[]) => void): BindingHydrator;
 

package/types/validator.ts

@@ -1,4 +1,4 @@
-import {ObservableChecker, ObservableItem, ObservableProxy} from "./observable";
+import {ObservableArray, ObservableChecker, ObservableItem, ObservableProxy} from "./observable";
 import { ValidChild } from "./elements";
 import { NDElement } from "./nd-element";
 
@@ -14,6 +14,16 @@ declare const Validator: {
 
     isObservableChecker(value: any): value is ObservableChecker;
 
+    isTemplateBinding(value: any): boolean;
+
+    isObservableWhenResult(value: any): boolean;
+
+    isArrayObservable(value: any): value is ObservableArray<any>;
+
+    isObservableOrProxy(value: any): value is ObservableItem | ObservableProxy<any>;
+
+    isAnchor(value: any): boolean;
+
     isArray(value: any): value is Array<any>;
 
     isString(value: any): value is string;

package/utils.d.ts

@@ -1,3 +1,4 @@
 
 export * from './types/native-fetch';
-export * from './types/service';
+export * from './types/service';
+export * as filters from './types/filters/index';

package/utils.js

@@ -1,10 +1,10 @@
 import NativeFetch from "./src/fetch/NativeFetch";
-import { Service } from "./src/core/utils/service";
-import * as Filters from "./src/core/utils/filters/index";
+import * as Cache from "./src/core/utils/cache";
+import * as filters from "./src/core/utils/filters/index";
 
 
 export {
     NativeFetch,
-    Service,
-    Filters,
+    Cache,
+    filters,
 };

package/src/core/utils/service.js

@@ -1,6 +0,0 @@
-import { autoMemoize, autoOnce } from "./memoize.js";
-
-export const Service = {
-    once: fn => autoOnce(fn),
-    memoize: fn => autoMemoize(fn)
-};