native-document 1.0.202 → 1.0.204

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "native-document",
-  "version": "1.0.202",
+  "version": "1.0.204",
   "description": "A reactive JavaScript framework that preserves native DOM simplicity without sacrificing modern features",
   "author": "AfroCodeur <https://github.com/afrocodeur>",
   "license": "MIT",

package/src/components/BaseComponent.d.ts

@@ -1,13 +1,14 @@
 import type { ValidChild, GlobalAttributes, NdStyleMap } from '../../types/elements';
 import type { ObservableItem } from '../../types/observable';
 import type { CssPropertyAccumulator, ClassPropertyAccumulator } from '../../types/property-accumulator';
+import {BaseComponentEvents} from "./BaseComponentEvents";
 
 export type EditableProps = Omit<GlobalAttributes, 'class' | 'style'> & {
     class: ClassPropertyAccumulator;
     style: CssPropertyAccumulator;
 };
 
-export interface BaseComponent {
+export interface BaseComponent extends BaseComponentEvents {
     setDescription(description: Record<string, unknown>): this;
     postBuild(callback: (element: HTMLElement) => void): this;
     refSelf(target: Record<string, unknown>, name: string): this;
@@ -22,6 +23,8 @@ export interface BaseComponent {
     visibility(condition: boolean | ObservableItem<boolean>): this;
     context(context: unknown): this;
     ghostDom(element: ValidChild): this;
+
+
 }
 
 export declare namespace BaseComponent {

package/src/components/BaseComponent.js

@@ -2,6 +2,8 @@ import {classPropertyAccumulator, cssPropertyAccumulator} from '../core/utils/pr
 import {Observable} from '../core/data/Observable';
 import {ShowIf} from '../core/elements/control/show-if';
 import {NDElement} from '../core/wrappers/NDElement';
+import {EVENTS} from '../core/utils/events';
+import {call} from '@babel/traverse/lib/path/context';
 
 /**
  *
@@ -31,6 +33,30 @@ Object.defineProperty( BaseComponent.prototype, 'nd', {
     },
 });
 
+
+EVENTS.forEach((eventSourceName) => {
+    const eventName = eventSourceName.toLowerCase();
+    const fnName = 'on'+eventSourceName;
+
+    BaseComponent.prototype[fnName] = function(callback = null, options = null) {
+
+        const callbackWrapper = (...args) => {
+            callback.apply(this, args);
+            this.emit ? this.emit(eventName, ...args) : null;
+        };
+
+        this.postBuild((element) => {
+            if(element[fnName]) {
+                element[fnName](callbackWrapper, options);
+                return;
+            }
+            element.nd[fnName](callbackWrapper, options);
+        });
+        return this;
+    };
+
+});
+
 /**
  * @param {Function} Component
  * @param {...Function} parents
@@ -97,9 +123,14 @@ BaseComponent.prototype.ghostDom = NDElement.prototype.ghostDom;
  * @returns {this}
  */
 BaseComponent.prototype.refSelf = function(target, name) {
+    if(target.__$Ref) {
+        target.$store(this, this.$element);
+        return this;
+    }
     target[name] = this;
     return this;
 };
+BaseComponent.prototype.ref = BaseComponent.prototype.refSelf;
 
 BaseComponent.prototype.$build = function() {
     if(this.$beforeRender) {

package/src/components/BaseComponentEvents.d.ts

@@ -0,0 +1,164 @@
+
+
+export interface BaseComponentEvents {
+    onClick(callback: (event: MouseEvent) => void, options?: AddEventListenerOptions | null): this;
+    onPreventClick(callback: (event: MouseEvent) => void, options?: AddEventListenerOptions | null): this;
+    onStopClick(callback: (event: MouseEvent) => void, options?: AddEventListenerOptions | null): this;
+    onPreventStopClick(callback: (event: MouseEvent) => void, options?: AddEventListenerOptions | null): this;
+    onDblClick(callback: (event: MouseEvent) => void, options?: AddEventListenerOptions | null): this;
+    onPreventDblClick(callback: (event: MouseEvent) => void, options?: AddEventListenerOptions | null): this;
+    onStopDblClick(callback: (event: MouseEvent) => void, options?: AddEventListenerOptions | null): this;
+    onPreventStopDblClick(callback: (event: MouseEvent) => void, options?: AddEventListenerOptions | null): this;
+    onMouseDown(callback: (event: MouseEvent) => void, options?: AddEventListenerOptions | null): this;
+    onPreventMouseDown(callback: (event: MouseEvent) => void, options?: AddEventListenerOptions | null): this;
+    onStopMouseDown(callback: (event: MouseEvent) => void, options?: AddEventListenerOptions | null): this;
+    onPreventStopMouseDown(callback: (event: MouseEvent) => void, options?: AddEventListenerOptions | null): this;
+    onMouseEnter(callback: (event: MouseEvent) => void, options?: AddEventListenerOptions | null): this;
+    onMouseLeave(callback: (event: MouseEvent) => void, options?: AddEventListenerOptions | null): this;
+    onMouseMove(callback: (event: MouseEvent) => void, options?: AddEventListenerOptions | null): this;
+    onStopMouseMove(callback: (event: MouseEvent) => void, options?: AddEventListenerOptions | null): this;
+    onMouseOut(callback: (event: MouseEvent) => void, options?: AddEventListenerOptions | null): this;
+    onStopMouseOut(callback: (event: MouseEvent) => void, options?: AddEventListenerOptions | null): this;
+    onMouseOver(callback: (event: MouseEvent) => void, options?: AddEventListenerOptions | null): this;
+    onStopMouseOver(callback: (event: MouseEvent) => void, options?: AddEventListenerOptions | null): this;
+    onMouseUp(callback: (event: MouseEvent) => void, options?: AddEventListenerOptions | null): this;
+    onPreventMouseUp(callback: (event: MouseEvent) => void, options?: AddEventListenerOptions | null): this;
+    onStopMouseUp(callback: (event: MouseEvent) => void, options?: AddEventListenerOptions | null): this;
+    onPreventStopMouseUp(callback: (event: MouseEvent) => void, options?: AddEventListenerOptions | null): this;
+    onWheel(callback: (event: WheelEvent) => void, options?: AddEventListenerOptions | null): this;
+    onPreventWheel(callback: (event: WheelEvent) => void, options?: AddEventListenerOptions | null): this;
+    onStopWheel(callback: (event: WheelEvent) => void, options?: AddEventListenerOptions | null): this;
+    onPreventStopWheel(callback: (event: WheelEvent) => void, options?: AddEventListenerOptions | null): this;
+    onKeyDown(callback: (event: KeyboardEvent) => void, options?: AddEventListenerOptions | null): this;
+    onPreventKeyDown(callback: (event: KeyboardEvent) => void, options?: AddEventListenerOptions | null): this;
+    onStopKeyDown(callback: (event: KeyboardEvent) => void, options?: AddEventListenerOptions | null): this;
+    onPreventStopKeyDown(callback: (event: KeyboardEvent) => void, options?: AddEventListenerOptions | null): this;
+    onKeyPress(callback: (event: KeyboardEvent) => void, options?: AddEventListenerOptions | null): this;
+    onPreventKeyPress(callback: (event: KeyboardEvent) => void, options?: AddEventListenerOptions | null): this;
+    onStopKeyPress(callback: (event: KeyboardEvent) => void, options?: AddEventListenerOptions | null): this;
+    onPreventStopKeyPress(callback: (event: KeyboardEvent) => void, options?: AddEventListenerOptions | null): this;
+    onKeyUp(callback: (event: KeyboardEvent) => void, options?: AddEventListenerOptions | null): this;
+    onStopKeyUp(callback: (event: KeyboardEvent) => void, options?: AddEventListenerOptions | null): this;
+    onBlur(callback: (event: FocusEvent) => void, options?: AddEventListenerOptions | null): this;
+    onChange(callback: (event: Event) => void, options?: AddEventListenerOptions | null): this;
+    onStopChange(callback: (event: Event) => void, options?: AddEventListenerOptions | null): this;
+    onFocus(callback: (event: FocusEvent) => void, options?: AddEventListenerOptions | null): this;
+    onInput(callback: (event: InputEvent) => void, options?: AddEventListenerOptions | null): this;
+    onStopInput(callback: (event: InputEvent) => void, options?: AddEventListenerOptions | null): this;
+    onInvalid(callback: (event: Event) => void, options?: AddEventListenerOptions | null): this;
+    onPreventInvalid(callback: (event: Event) => void, options?: AddEventListenerOptions | null): this;
+    onStopInvalid(callback: (event: Event) => void, options?: AddEventListenerOptions | null): this;
+    onPreventStopInvalid(callback: (event: Event) => void, options?: AddEventListenerOptions | null): this;
+    onReset(callback: (event: Event) => void, options?: AddEventListenerOptions | null): this;
+    onPreventReset(callback: (event: Event) => void, options?: AddEventListenerOptions | null): this;
+    onStopReset(callback: (event: Event) => void, options?: AddEventListenerOptions | null): this;
+    onPreventStopReset(callback: (event: Event) => void, options?: AddEventListenerOptions | null): this;
+    onSearch(callback: (event: Event) => void, options?: AddEventListenerOptions | null): this;
+    onStopSearch(callback: (event: Event) => void, options?: AddEventListenerOptions | null): this;
+    onSelect(callback: (event: Event) => void, options?: AddEventListenerOptions | null): this;
+    onStopSelect(callback: (event: Event) => void, options?: AddEventListenerOptions | null): this;
+    onSubmit(callback: (event: SubmitEvent) => void, options?: AddEventListenerOptions | null): this;
+    onPreventSubmit(callback: (event: SubmitEvent) => void, options?: AddEventListenerOptions | null): this;
+    onStopSubmit(callback: (event: SubmitEvent) => void, options?: AddEventListenerOptions | null): this;
+    onPreventStopSubmit(callback: (event: SubmitEvent) => void, options?: AddEventListenerOptions | null): this;
+    onDrag(callback: (event: DragEvent) => void, options?: AddEventListenerOptions | null): this;
+    onStopDrag(callback: (event: DragEvent) => void, options?: AddEventListenerOptions | null): this;
+    onDragEnd(callback: (event: DragEvent) => void, options?: AddEventListenerOptions | null): this;
+    onStopDragEnd(callback: (event: DragEvent) => void, options?: AddEventListenerOptions | null): this;
+    onDragEnter(callback: (event: DragEvent) => void, options?: AddEventListenerOptions | null): this;
+    onStopDragEnter(callback: (event: DragEvent) => void, options?: AddEventListenerOptions | null): this;
+    onDragLeave(callback: (event: DragEvent) => void, options?: AddEventListenerOptions | null): this;
+    onStopDragLeave(callback: (event: DragEvent) => void, options?: AddEventListenerOptions | null): this;
+    onDragOver(callback: (event: DragEvent) => void, options?: AddEventListenerOptions | null): this;
+    onPreventDragOver(callback: (event: DragEvent) => void, options?: AddEventListenerOptions | null): this;
+    onStopDragOver(callback: (event: DragEvent) => void, options?: AddEventListenerOptions | null): this;
+    onPreventStopDragOver(callback: (event: DragEvent) => void, options?: AddEventListenerOptions | null): this;
+    onDragStart(callback: (event: DragEvent) => void, options?: AddEventListenerOptions | null): this;
+    onStopDragStart(callback: (event: DragEvent) => void, options?: AddEventListenerOptions | null): this;
+    onDrop(callback: (event: DragEvent) => void, options?: AddEventListenerOptions | null): this;
+    onPreventDrop(callback: (event: DragEvent) => void, options?: AddEventListenerOptions | null): this;
+    onStopDrop(callback: (event: DragEvent) => void, options?: AddEventListenerOptions | null): this;
+    onPreventStopDrop(callback: (event: DragEvent) => void, options?: AddEventListenerOptions | null): this;
+    onAfterPrint(callback: (event: Event) => void, options?: AddEventListenerOptions | null): this;
+    onBeforePrint(callback: (event: Event) => void, options?: AddEventListenerOptions | null): this;
+    onBeforeUnload(callback: (event: BeforeUnloadEvent) => void, options?: AddEventListenerOptions | null): this;
+    onPreventBeforeUnload(callback: (event: BeforeUnloadEvent) => void, options?: AddEventListenerOptions | null): this;
+    onStopBeforeUnload(callback: (event: BeforeUnloadEvent) => void, options?: AddEventListenerOptions | null): this;
+    onPreventStopBeforeUnload(callback: (event: BeforeUnloadEvent) => void, options?: AddEventListenerOptions | null): this;
+    onError(callback: (event: ErrorEvent) => void, options?: AddEventListenerOptions | null): this;
+    onHashChange(callback: (event: HashChangeEvent) => void, options?: AddEventListenerOptions | null): this;
+    onStopHashChange(callback: (event: HashChangeEvent) => void, options?: AddEventListenerOptions | null): this;
+    onLoad(callback: (event: Event) => void, options?: AddEventListenerOptions | null): this;
+    onOffline(callback: (event: Event) => void, options?: AddEventListenerOptions | null): this;
+    onOnline(callback: (event: Event) => void, options?: AddEventListenerOptions | null): this;
+    onPageHide(callback: (event: PageTransitionEvent) => void, options?: AddEventListenerOptions | null): this;
+    onPageShow(callback: (event: PageTransitionEvent) => void, options?: AddEventListenerOptions | null): this;
+    onResize(callback: (event: UIEvent) => void, options?: AddEventListenerOptions | null): this;
+    onScroll(callback: (event: Event) => void, options?: AddEventListenerOptions | null): this;
+    onUnload(callback: (event: Event) => void, options?: AddEventListenerOptions | null): this;
+    onAbort(callback: (event: Event) => void, options?: AddEventListenerOptions | null): this;
+    onCanPlay(callback: (event: Event) => void, options?: AddEventListenerOptions | null): this;
+    onCanPlayThrough(callback: (event: Event) => void, options?: AddEventListenerOptions | null): this;
+    onDurationChange(callback: (event: Event) => void, options?: AddEventListenerOptions | null): this;
+    onEmptied(callback: (event: Event) => void, options?: AddEventListenerOptions | null): this;
+    onEnded(callback: (event: Event) => void, options?: AddEventListenerOptions | null): this;
+    onLoadedData(callback: (event: Event) => void, options?: AddEventListenerOptions | null): this;
+    onLoadedMetadata(callback: (event: Event) => void, options?: AddEventListenerOptions | null): this;
+    onLoadStart(callback: (event: Event) => void, options?: AddEventListenerOptions | null): this;
+    onPause(callback: (event: Event) => void, options?: AddEventListenerOptions | null): this;
+    onPlay(callback: (event: Event) => void, options?: AddEventListenerOptions | null): this;
+    onPlaying(callback: (event: Event) => void, options?: AddEventListenerOptions | null): this;
+    onProgress(callback: (event: ProgressEvent) => void, options?: AddEventListenerOptions | null): this;
+    onRateChange(callback: (event: Event) => void, options?: AddEventListenerOptions | null): this;
+    onSeeked(callback: (event: Event) => void, options?: AddEventListenerOptions | null): this;
+    onSeeking(callback: (event: Event) => void, options?: AddEventListenerOptions | null): this;
+    onStalled(callback: (event: Event) => void, options?: AddEventListenerOptions | null): this;
+    onSuspend(callback: (event: Event) => void, options?: AddEventListenerOptions | null): this;
+    onTimeUpdate(callback: (event: Event) => void, options?: AddEventListenerOptions | null): this;
+    onVolumeChange(callback: (event: Event) => void, options?: AddEventListenerOptions | null): this;
+    onWaiting(callback: (event: Event) => void, options?: AddEventListenerOptions | null): this;
+    onTouchCancel(callback: (event: TouchEvent) => void, options?: AddEventListenerOptions | null): this;
+    onPreventTouchCancel(callback: (event: TouchEvent) => void, options?: AddEventListenerOptions | null): this;
+    onStopTouchCancel(callback: (event: TouchEvent) => void, options?: AddEventListenerOptions | null): this;
+    onPreventStopTouchCancel(callback: (event: TouchEvent) => void, options?: AddEventListenerOptions | null): this;
+    onTouchEnd(callback: (event: TouchEvent) => void, options?: AddEventListenerOptions | null): this;
+    onPreventTouchEnd(callback: (event: TouchEvent) => void, options?: AddEventListenerOptions | null): this;
+    onStopTouchEnd(callback: (event: TouchEvent) => void, options?: AddEventListenerOptions | null): this;
+    onPreventStopTouchEnd(callback: (event: TouchEvent) => void, options?: AddEventListenerOptions | null): this;
+    onTouchMove(callback: (event: TouchEvent) => void, options?: AddEventListenerOptions | null): this;
+    onPreventTouchMove(callback: (event: TouchEvent) => void, options?: AddEventListenerOptions | null): this;
+    onStopTouchMove(callback: (event: TouchEvent) => void, options?: AddEventListenerOptions | null): this;
+    onPreventStopTouchMove(callback: (event: TouchEvent) => void, options?: AddEventListenerOptions | null): this;
+    onTouchStart(callback: (event: TouchEvent) => void, options?: AddEventListenerOptions | null): this;
+    onPreventTouchStart(callback: (event: TouchEvent) => void, options?: AddEventListenerOptions | null): this;
+    onStopTouchStart(callback: (event: TouchEvent) => void, options?: AddEventListenerOptions | null): this;
+    onPreventStopTouchStart(callback: (event: TouchEvent) => void, options?: AddEventListenerOptions | null): this;
+    onAnimationEnd(callback: (event: AnimationEvent) => void, options?: AddEventListenerOptions | null): this;
+    onStopAnimationEnd(callback: (event: AnimationEvent) => void, options?: AddEventListenerOptions | null): this;
+    onAnimationIteration(callback: (event: AnimationEvent) => void, options?: AddEventListenerOptions | null): this;
+    onStopAnimationIteration(callback: (event: AnimationEvent) => void, options?: AddEventListenerOptions | null): this;
+    onAnimationStart(callback: (event: AnimationEvent) => void, options?: AddEventListenerOptions | null): this;
+    onStopAnimationStart(callback: (event: AnimationEvent) => void, options?: AddEventListenerOptions | null): this;
+    onTransitionEnd(callback: (event: TransitionEvent) => void, options?: AddEventListenerOptions | null): this;
+    onStopTransitionEnd(callback: (event: TransitionEvent) => void, options?: AddEventListenerOptions | null): this;
+    onCopy(callback: (event: ClipboardEvent) => void, options?: AddEventListenerOptions | null): this;
+    onPreventCopy(callback: (event: ClipboardEvent) => void, options?: AddEventListenerOptions | null): this;
+    onStopCopy(callback: (event: ClipboardEvent) => void, options?: AddEventListenerOptions | null): this;
+    onPreventStopCopy(callback: (event: ClipboardEvent) => void, options?: AddEventListenerOptions | null): this;
+    onCut(callback: (event: ClipboardEvent) => void, options?: AddEventListenerOptions | null): this;
+    onPreventCut(callback: (event: ClipboardEvent) => void, options?: AddEventListenerOptions | null): this;
+    onStopCut(callback: (event: ClipboardEvent) => void, options?: AddEventListenerOptions | null): this;
+    onPreventStopCut(callback: (event: ClipboardEvent) => void, options?: AddEventListenerOptions | null): this;
+    onPaste(callback: (event: ClipboardEvent) => void, options?: AddEventListenerOptions | null): this;
+    onPreventPaste(callback: (event: ClipboardEvent) => void, options?: AddEventListenerOptions | null): this;
+    onStopPaste(callback: (event: ClipboardEvent) => void, options?: AddEventListenerOptions | null): this;
+    onPreventStopPaste(callback: (event: ClipboardEvent) => void, options?: AddEventListenerOptions | null): this;
+    onFocusIn(callback: (event: FocusEvent) => void, options?: AddEventListenerOptions | null): this;
+    onStopFocusIn(callback: (event: FocusEvent) => void, options?: AddEventListenerOptions | null): this;
+    onFocusOut(callback: (event: FocusEvent) => void, options?: AddEventListenerOptions | null): this;
+    onStopFocusOut(callback: (event: FocusEvent) => void, options?: AddEventListenerOptions | null): this;
+    onContextMenu(callback: (event: MouseEvent) => void, options?: AddEventListenerOptions | null): this;
+    onPreventContextMenu(callback: (event: MouseEvent) => void, options?: AddEventListenerOptions | null): this;
+    onStopContextMenu(callback: (event: MouseEvent) => void, options?: AddEventListenerOptions | null): this;
+    onPreventStopContextMenu(callback: (event: MouseEvent) => void, options?: AddEventListenerOptions | null): this;
+}

package/src/components/button/Button.js

@@ -43,7 +43,7 @@ export default function Button(label, props = {}) {
     this.$description = {
         label: label,
         type: null,
-        variant: null,
+        variant: 'primary',
         size: null,
         icon: null,
         iconPosition: 'left',

package/src/components/drawer/Drawer.js

@@ -51,6 +51,7 @@ export default function Drawer(content = null, props = {}) {
         renderHeader: null,
         backdrop: true,
         isOpen: null,
+        closeIcon: null,
         props,
     };
     this.aria = {
@@ -341,4 +342,13 @@ Drawer.prototype.onOpen = function(handler) {
 Drawer.prototype.onClose = function(handler) {
     this.on('close', handler);
     return this;
+};
+
+/**
+ * @param {NdChild} icon
+ * @return {this}
+ */
+Drawer.prototype.closeIcon = function(icon) {
+    this.$description.closeIcon = icon;
+    return this;
 };

package/src/components/drawer/types/Drawer.d.ts

@@ -48,6 +48,7 @@ export interface DrawerInterface extends BaseComponent {
     hide(): void;
     onOpen(handler: (instance: DrawerInterface) => void): this;
     onClose(handler: (instance: DrawerInterface) => void): this;
+    closeIcon(icon: ValidChild): this;
 }
 
 

package/src/components/form/FormControl.js

@@ -109,6 +109,7 @@ FormControl.prototype.fields = function(fieldBuilder) {
     if(typeof fieldBuilder !== 'function') {
         throw new NativeDocumentError('FormControl.fields() expects a function');
     }
+
     this.$description.fieldBuilder = (...args) => {
         const result = fieldBuilder(...args);
         const dirties = [];
@@ -117,6 +118,8 @@ FormControl.prototype.fields = function(fieldBuilder) {
             dirties.push(field.$description.isDirty);
         }
 
+        console.log(dirties);
+
         $.computed(() => {
             const isDirty = dirties.some((item) => item.val());
             this.$description.isDirty.set(isDirty);

package/src/components/form/field/FieldCollection.js

@@ -37,6 +37,7 @@ export default function FieldCollection(name, props = {}) {
         hasErrors: $(false),
         errors: $.array(),
         showErrors: $(true),
+        isDirty: $(false),
         defaultItem: null,
         fieldBuilder: null,
         renderItem: null,

package/src/core/data/Observable.js

@@ -11,6 +11,7 @@ import './observable-helpers/observable.is-to';
 import './observable-helpers/observable.prototypes';
 import ObservableResource from './ObservableResource';
 import {Formatters} from '../utils/formatters';
+import Ref from './Ref';
 /**
  *
  * @param {*} value
@@ -235,6 +236,14 @@ Observable.resource = function(fn, deps = [], options = false) {
     return new ObservableResource(fn, deps, config);
 };
 
+Observable.ref = function() {
+    return new Ref(false);
+};
+
+Observable.collection = function() {
+    return new Ref(true);
+};
+
 ObservableItem.prototype.resolve = function () {
     return Observable.value(this);
-};
+};

package/src/core/data/ObservableItem.js

@@ -209,7 +209,9 @@ Object.defineProperty(ObservableItem.prototype, 'trigger', {
         }
         return this.$trigger(operations);
     },
-    configurable: false,
+    writable: true,
+    enumerable: false,
+    configurable: true,
 });
 
 

package/src/core/data/Ref.js

@@ -0,0 +1,38 @@
+
+
+export function RefItem(multiple = false) {
+    this.$component = multiple ? [] : null;
+    this.$node = multiple ? [] : null;
+
+    this.$multiple = multiple;
+}
+export default function Ref(multiple = false) {
+    const ref = new RefItem(multiple);
+
+    return new Proxy(ref, {
+        get(target, property) {
+            if(target[property]) {
+                return target[property];
+            }
+            if(property === '__$Ref') {
+                return true;
+            }
+            if(target.$component != null) {
+                return typeof target.$component[property] === 'function'
+                    ? target.$component[property].bind(target.$component)
+                    : target.$component[property];
+            }
+        },
+    });
+}
+
+RefItem.prototype.$store = function(component = null, node = null) {
+    if(this.$multiple) {
+        this.$component.push(component);
+        this.$node.push(node);
+        return;
+    }
+
+    this.$component = component;
+    this.$node = node;
+};

package/src/core/wrappers/NDElement.js

@@ -76,6 +76,10 @@ NDElement.prototype.valueOf = function() {
  * refs.emailInput.focus();
  */
 NDElement.prototype.ref = function(target, name) {
+    if(target.__$Ref) {
+        target.$store(this, this.$element);
+        return this;
+    }
     target[name] = this.$element;
     return this;
 };
@@ -96,9 +100,11 @@ NDElement.prototype.ref = function(target, name) {
  * refs.counter.increment();
  */
 NDElement.prototype.refSelf = function(target, name) {
+    if(target.__$Ref) {
+        target.$store(this, this.$element);
+        return this;
+    }
     target[name] = this;
-    // TODO: @DIM to check
-    // target[name] = new NDElement(this.$element);
     return this;
 };
 

package/src/ui/components/drawer/DrawerRender.js

@@ -52,7 +52,7 @@ const buildDrawerHeader = ($desc, instance, closeFn) => {
             $desc.subtitle ? Paragraph({ class: 'drawer-sub-title' }, $desc.subtitle) : null,
         ]),
         $desc.closable
-            ? Button({ type: 'button', class: 'drawer-close', 'aria-label': 'Close menu' }, 'X').onClick(closeFn)
+            ? Button({ type: 'button', class: 'drawer-close', 'aria-label': 'Close menu' }, $desc.closeIcon ?? 'X').onClick(closeFn)
             : null,
     ];
 };

package/src/ui/components/form/FieldCollectionRender.js

@@ -1,4 +1,5 @@
-import {Div, Button, ForEachArray} from '../../../../elements';
+import {Div, ForEachArray} from '../../../../elements';
+import {Button} from '../../../components/button';
 import { $ } from '../../../core/data/Observable';
 
 import './field-collection.css';
@@ -40,7 +41,7 @@ export default function FieldCollectionRender($desc, instance) {
             isLast:    $isLast,
             item,
             remove: () => {
-                instance.removeItem(item);
+                instance.remove(item);
             },
             moveUp: () => {
                 const i   = $items.indexOf(item);

package/types/observable.d.ts

@@ -1,4 +1,5 @@
 import { FilterResult, PredicateMap } from './filters';
+import Ref, {RefItem} from './ref';
 
 export type Unsubscribe = () => void;
 
@@ -340,6 +341,9 @@ export interface ObservableStatic {
     setLocale(locale: string | ObservableItem<string>): void;
     useValueProperty(propertyName?: string): void;
 
+    ref<T = any>(): RefItem<T> & T;
+    collection<T = any>(): RefItem<T[]> & T[];
+
     getById(id: number): ObservableItem | null;
     cleanup(observable: ObservableItem): void;
     autoCleanup(enable?: boolean, options?: AutoCleanupOptions): void;

package/types/ref.d.ts

@@ -0,0 +1,22 @@
+
+export declare class RefItem<T = any> {
+    $component: T | T[] | null;
+    $node: HTMLElement | HTMLElement[] | null;
+    $multiple: boolean;
+
+    constructor(multiple?: boolean);
+
+    /**
+     * Assigns a component instance and its DOM node to the ref.
+     * In multiple mode, pushes to the internal arrays.
+     *
+     * @param component - Component instance to store
+     * @param node - Associated DOM node
+     */
+    $store(component?: T | null, node?: HTMLElement | null): void;
+}
+
+export declare function Ref<T = any>(multiple?: false): RefItem<T> & T;
+export declare function Ref<T = any>(multiple: true): RefItem<T[]> & { [K in keyof T]: T[K] };
+
+export { Ref as default };