native-document 1.0.126 → 1.0.127

package/dist/native-document.components.min.js

@@ -31,6 +31,10 @@ var NativeComponents = (function (exports) {
         Component.prototype.constructor = Component;
     };
 
+    BaseComponent.obs = (value) => {
+        return value.__$Observable ? value : Observable(value);
+    };
+
     BaseComponent.prototype.$storeElement = function(element) {
         this.$element = element;
         return this;
@@ -363,16 +367,16 @@ var NativeComponents = (function (exports) {
         // });
     };
 
-    let DebugManager$1 = {};
+    let DebugManager$2 = {};
     {
-        DebugManager$1 = {
+        DebugManager$2 = {
             log() {},
             warn() {},
             error() {},
             disable() {}
         };
     }
-    var DebugManager$2 = DebugManager$1;
+    var DebugManager$1 = DebugManager$2;
 
     /**
      *
@@ -854,17 +858,17 @@ var NativeComponents = (function (exports) {
             const method = methods[name];
 
             if (typeof method !== 'function') {
-                DebugManager$2.warn('NDElement.extend', `"${name}" is not a function, skipping`);
+                DebugManager$1.warn('NDElement.extend', `"${name}" is not a function, skipping`);
                 continue;
             }
 
             if (protectedMethods.has(name)) {
-                DebugManager$2.error('NDElement.extend', `Cannot override protected method "${name}"`);
+                DebugManager$1.error('NDElement.extend', `Cannot override protected method "${name}"`);
                 throw new NativeDocumentError(`Cannot override protected method "${name}"`);
             }
 
             if (NDElement.prototype[name]) {
-                DebugManager$2.warn('NDElement.extend', `Overwriting existing prototype method "${name}"`);
+                DebugManager$1.warn('NDElement.extend', `Overwriting existing prototype method "${name}"`);
             }
 
             NDElement.prototype[name] = method;
@@ -886,7 +890,7 @@ var NativeComponents = (function (exports) {
     VALID_TYPES[COMMON_NODE_TYPES.DOCUMENT_FRAGMENT] = true;
     VALID_TYPES[COMMON_NODE_TYPES.COMMENT] = true;
 
-    const Validator = {
+    const Validator$1 = {
         isObservable(value) {
             return  value?.__$isObservable;
         },
@@ -903,7 +907,7 @@ var NativeComponents = (function (exports) {
             return value?.__isProxy__
         },
         isObservableOrProxy(value) {
-            return Validator.isObservable(value) || Validator.isProxy(value);
+            return Validator$1.isObservable(value) || Validator$1.isProxy(value);
         },
         isAnchor(value) {
             return value?.__Anchor__
@@ -986,8 +990,8 @@ var NativeComponents = (function (exports) {
             if(!data) {
                 return false;
             }
-            return Validator.isObject(data)
-                && Object.values(data).some(value => Validator.isObservable(value));
+            return Validator$1.isObject(data)
+                && Object.values(data).some(value => Validator$1.isObservable(value));
         },
         /**
          * Check if the data contains an observable reference.
@@ -1089,7 +1093,7 @@ var NativeComponents = (function (exports) {
                     }
                 }
                 if (cleanedCount > 0) {
-                    DebugManager$2.log('Memory Auto Clean', `🧹 Cleaned ${cleanedCount} orphaned observables`);
+                    DebugManager$1.log('Memory Auto Clean', `🧹 Cleaned ${cleanedCount} orphaned observables`);
                 }
             }
         };
@@ -1215,7 +1219,7 @@ var NativeComponents = (function (exports) {
         }
 
         // Observables - keep the référence
-        if (Validator.isObservable(value)) {
+        if (Validator$1.isObservable(value)) {
             onObservableFound && onObservableFound(value);
             return value;
         }
@@ -1384,7 +1388,7 @@ var NativeComponents = (function (exports) {
      * @class ObservableItem
      */
     function ObservableItem(value, configs = null) {
-        value = Validator.isObservable(value) ? value.val() : value;
+        value = Validator$1.isObservable(value) ? value.val() : value;
 
         this.$previousValue = null;
         this.$currentValue = value;
@@ -1398,7 +1402,7 @@ var NativeComponents = (function (exports) {
         if(configs) {
             this.configs = configs;
             if(configs.reset) {
-                this.$initialValue = Validator.isObject(value) ? deepClone(value) : value;
+                this.$initialValue = Validator$1.isObject(value) ? deepClone(value) : value;
             }
         }
     }
@@ -1607,7 +1611,7 @@ var NativeComponents = (function (exports) {
         if(!watchValueList) {
             watchValueList = callback;
             this.$watchers.set(value, callback);
-        } else if(!Validator.isArray(watchValueList.list)) {
+        } else if(!Validator$1.isArray(watchValueList.list)) {
             watchValueList = [watchValueList, callback];
             callback = (value) => {
                 for(let i = 0, length = watchValueList.length; i < length; i++) {
@@ -1719,7 +1723,7 @@ var NativeComponents = (function (exports) {
      */
     ObservableItem.prototype.get = function(key) {
         const item = this.$currentValue[key];
-        return Validator.isObservable(item) ? item.val() : item;
+        return Validator$1.isObservable(item) ? item.val() : item;
     };
 
     /**
@@ -1751,7 +1755,7 @@ var NativeComponents = (function (exports) {
      * a.equals(10); // false
      */
     ObservableItem.prototype.equals = function(other) {
-        if(Validator.isObservable(other)) {
+        if(Validator$1.isObservable(other)) {
             return this.$currentValue === other.$currentValue;
         }
         return this.$currentValue === other;
@@ -1796,7 +1800,7 @@ var NativeComponents = (function (exports) {
         if(!this.configs?.reset) {
             return;
         }
-        const resetValue = (Validator.isObject(this.$initialValue))
+        const resetValue = (Validator$1.isObject(this.$initialValue))
             ? deepClone(this.$initialValue, (observable) => {
                 observable.reset();
             })
@@ -1885,7 +1889,7 @@ var NativeComponents = (function (exports) {
         const formatter = Formatters[type];
         const localeObservable = Formatters.locale;
 
-        return Observable.computed(() => formatter(self.val(), localeObservable.val(), options),
+        return Observable$1.computed(() => formatter(self.val(), localeObservable.val(), options),
             [self, localeObservable]
         );
     };
@@ -1910,17 +1914,17 @@ var NativeComponents = (function (exports) {
      * @returns {ObservableItem}
      * @constructor
      */
-    function Observable(value, configs = null) {
+    function Observable$1(value, configs = null) {
         return new ObservableItem(value, configs);
     }
 
-    const $$1 = Observable;
+    const $$1 = Observable$1;
 
     /**
      *
      * @param {string} propertyName
      */
-    Observable.useValueProperty = function(propertyName = 'value') {
+    Observable$1.useValueProperty = function(propertyName = 'value') {
         Object.defineProperty(ObservableItem.prototype, propertyName, {
             get() {
                 return this.$currentValue;
@@ -1938,7 +1942,7 @@ var NativeComponents = (function (exports) {
      * @param id
      * @returns {ObservableItem|null}
      */
-    Observable.getById = function(id) {
+    Observable$1.getById = function(id) {
         const item = MemoryManager.getObservableById(parseInt(id));
         if(!item) {
             throw new NativeDocumentError('Observable.getById : No observable found with id ' + id);
@@ -1950,7 +1954,7 @@ var NativeComponents = (function (exports) {
      *
      * @param {ObservableItem} observable
      */
-    Observable.cleanup = function(observable) {
+    Observable$1.cleanup = function(observable) {
         observable.cleanup();
     };
 
@@ -1959,7 +1963,7 @@ var NativeComponents = (function (exports) {
      * @param {Boolean} enable
      * @param {{interval:Boolean, threshold:number}} options
      */
-    Observable.autoCleanup = function(enable = false, options = {}) {
+    Observable$1.autoCleanup = function(enable = false, options = {}) {
         if(!enable) {
             return;
         }
@@ -2019,7 +2023,7 @@ var NativeComponents = (function (exports) {
     const bindBooleanAttribute = (element, attributeName, value) => {
         const isObservable = value.__$isObservable;
         const defaultValue = isObservable? value.val() : value;
-        if(Validator.isBoolean(defaultValue)) {
+        if(Validator$1.isBoolean(defaultValue)) {
             element[attributeName] = defaultValue;
         }
         else {
@@ -2330,7 +2334,7 @@ var NativeComponents = (function (exports) {
             if(child.toNdElement) {
                 do {
                     child =  child.toNdElement();
-                    if(Validator.isElement(child)) {
+                    if(Validator$1.isElement(child)) {
                         return child;
                     }
                 } while (child.toNdElement);
@@ -2409,7 +2413,7 @@ var NativeComponents = (function (exports) {
         anchor.getParent = () => parent;
 
         anchor.appendChild = (child) => {
-            child = Validator.isElement(child) ? child : ElementCreator.getChild(child);
+            child = Validator$1.isElement(child) ? child : ElementCreator.getChild(child);
             parent.appendChild(child);
         };
 
@@ -2418,7 +2422,7 @@ var NativeComponents = (function (exports) {
         anchor.appendRaw = anchor.appendChildRaw;
 
         anchor.insertAtStart = (child) => {
-            child = Validator.isElement(child) ? child : ElementCreator.getChild(child);
+            child = Validator$1.isElement(child) ? child : ElementCreator.getChild(child);
             parent.firstChild ? parent.insertBefore(child, parent.firstChild) : parent.appendChild(child);
         };
         anchor.insertAtStartRaw = (child) => {
@@ -2432,7 +2436,7 @@ var NativeComponents = (function (exports) {
         };
 
         anchor.replaceContent = function(content) {
-            const child = Validator.isElement(content) ? content : ElementCreator.getChild(content);
+            const child = Validator$1.isElement(content) ? content : ElementCreator.getChild(content);
             parent.replaceChildren(child);
         };
 
@@ -2442,7 +2446,7 @@ var NativeComponents = (function (exports) {
         anchor.setContent = anchor.replaceContent;
 
         anchor.insertBefore = (child, anchor) => {
-            child = Validator.isElement(child) ? child : ElementCreator.getChild(child);
+            child = Validator$1.isElement(child) ? child : ElementCreator.getChild(child);
             parent.insertBefore(child, anchor);
         };
         anchor.insertBeforeRaw = (child, anchor) => {
@@ -2486,7 +2490,7 @@ var NativeComponents = (function (exports) {
             ? () => true: (parent) => (parent.firstChild === anchorStart && parent.lastChild === anchorEnd);
 
         const insertBefore = function(parent, child, target) {
-            const childElement = Validator.isElement(child) ? child : ElementCreator.getChild(child);
+            const childElement = Validator$1.isElement(child) ? child : ElementCreator.getChild(child);
             insertBeforeRaw(parent, childElement, target);
         };
 
@@ -2536,7 +2540,7 @@ var NativeComponents = (function (exports) {
         anchorFragment.appendRaw = anchorFragment.appendChildRaw;
 
         anchorFragment.insertAtStart = function(child) {
-            child = Validator.isElement(child) ? child : ElementCreator.getChild(child);
+            child = Validator$1.isElement(child) ? child : ElementCreator.getChild(child);
             anchorFragment.insertAtStartRaw(child);
         };
 
@@ -2592,7 +2596,7 @@ var NativeComponents = (function (exports) {
         };
 
         anchorFragment.replaceContent = function(child) {
-            const childElement = Validator.isElement(child) ? child : ElementCreator.getChild(child);
+            const childElement = Validator$1.isElement(child) ? child : ElementCreator.getChild(child);
             anchorFragment.replaceContentRaw(childElement);
         };
 
@@ -3204,10 +3208,10 @@ var NativeComponents = (function (exports) {
     String.prototype.use = function(args) {
         const value = this;
 
-        return Observable.computed(() => {
+        return Observable$1.computed(() => {
             return value.replace(/\$\{(.*?)}/g, (match, key) => {
                 const data = args[key];
-                if(Validator.isObservable(data)) {
+                if(Validator$1.isObservable(data)) {
                     return data.val();
                 }
                 return data;
@@ -3216,23 +3220,23 @@ var NativeComponents = (function (exports) {
     };
 
     String.prototype.resolveObservableTemplate = function() {
-        if(!Validator.containsObservableReference(this)) {
+        if(!Validator$1.containsObservableReference(this)) {
             return this.valueOf();
         }
         return this.split(/(\{\{#ObItem::\([0-9]+\)\}\})/g).filter(Boolean).map((value) => {
-            if(!Validator.containsObservableReference(value)) {
+            if(!Validator$1.containsObservableReference(value)) {
                 return value;
             }
             const [_, id] = value.match(/\{\{#ObItem::\(([0-9]+)\)\}\}/);
-            return Observable.getById(id);
+            return Observable$1.getById(id);
         });
     };
 
     function createMultiSourceFilter(sources, callbackFn){
-        const observables = sources.filter(Validator.isObservable);
+        const observables = sources.filter(Validator$1.isObservable);
 
         const getValues = () => sources.map(src =>
-            Validator.isObservable(src) ? src.val() : src
+            Validator$1.isObservable(src) ? src.val() : src
         );
 
         return {
@@ -3482,7 +3486,7 @@ var NativeComponents = (function (exports) {
         const filterCallbacks = {};
 
         for (const [key, rawPredicate] of Object.entries(predicates)) {
-            const predicate = Validator.isObservable(rawPredicate) ? match(rawPredicate, false) : rawPredicate;
+            const predicate = Validator$1.isObservable(rawPredicate) ? match(rawPredicate, false) : rawPredicate;
             if (predicate && typeof predicate === 'object' && 'callback' in predicate) {
                 filterCallbacks[key] = predicate.callback;
 
@@ -3499,7 +3503,7 @@ var NativeComponents = (function (exports) {
             }
         }
 
-        const viewArray = Observable.array();
+        const viewArray = Observable$1.array();
 
         const filters = Object.entries(filterCallbacks);
         const updateView = () => {
@@ -3647,7 +3651,7 @@ var NativeComponents = (function (exports) {
      * items.push(4); // Triggers update
      * items.subscribe((arr) => console.log(arr));
      */
-    Observable.array = function(target = [], configs = null) {
+    Observable$1.array = function(target = [], configs = null) {
         return new ObservableArray(target, configs);
     };
 
@@ -3656,10 +3660,10 @@ var NativeComponents = (function (exports) {
      * @param {Function} callback
      * @returns {Function}
      */
-    Observable.batch = function(callback) {
-        const $observer = Observable(0);
+    Observable$1.batch = function(callback) {
+        const $observer = Observable$1(0);
         const batch = function() {
-            if(Validator.isAsyncFunction(callback)) {
+            if(Validator$1.isAsyncFunction(callback)) {
                 return (callback(...arguments)).then(() => {
                     $observer.trigger();
                 }).catch(error => { throw error; });
@@ -3710,25 +3714,25 @@ var NativeComponents = (function (exports) {
             if(Array.isArray(itemValue)) {
                 if(configs?.deep !== false) {
                     const mappedItemValue = itemValue.map(item => {
-                        if(Validator.isJson(item)) {
-                            return Observable.json(item, configs);
+                        if(Validator$1.isJson(item)) {
+                            return Observable$1.json(item, configs);
                         }
-                        if(Validator.isArray(item)) {
-                            return Observable.array(item, configs);
+                        if(Validator$1.isArray(item)) {
+                            return Observable$1.array(item, configs);
                         }
-                        return Observable(item, configs);
+                        return Observable$1(item, configs);
                     });
-                    this.$observables[key] = Observable.array(mappedItemValue, configs);
+                    this.$observables[key] = Observable$1.array(mappedItemValue, configs);
                     continue;
                 }
-                this.$observables[key] = Observable.array(itemValue, configs);
+                this.$observables[key] = Observable$1.array(itemValue, configs);
                 continue;
             }
-            if(Validator.isObservable(itemValue) || Validator.isProxy(itemValue)) {
+            if(Validator$1.isObservable(itemValue) || Validator$1.isProxy(itemValue)) {
                 this.$observables[key] = itemValue;
                 continue;
             }
-            this.$observables[key] = (typeof itemValue === 'object') ? Observable.object(itemValue, configs) : Observable(itemValue, configs);
+            this.$observables[key] = (typeof itemValue === 'object') ? Observable$1.object(itemValue, configs) : Observable$1(itemValue, configs);
         }
     };
 
@@ -3736,21 +3740,21 @@ var NativeComponents = (function (exports) {
         const result = {};
         for(const key in this.$observables) {
             const dataItem = this.$observables[key];
-            if(Validator.isObservable(dataItem)) {
+            if(Validator$1.isObservable(dataItem)) {
                 let value = dataItem.val();
                 if(Array.isArray(value)) {
                     value = value.map(item => {
-                        if(Validator.isObservable(item)) {
+                        if(Validator$1.isObservable(item)) {
                             return item.val();
                         }
-                        if(Validator.isProxy(item)) {
+                        if(Validator$1.isProxy(item)) {
                             return item.$value;
                         }
                         return item;
                     });
                 }
                 result[key] = value;
-            } else if(Validator.isProxy(dataItem)) {
+            } else if(Validator$1.isProxy(dataItem)) {
                 result[key] = dataItem.$value;
             } else {
                 result[key] = dataItem;
@@ -3762,10 +3766,10 @@ var NativeComponents = (function (exports) {
 
     ObservableObject.prototype.get = function(property) {
         const item = this.$observables[property];
-        if(Validator.isObservable(item)) {
+        if(Validator$1.isObservable(item)) {
             return item.val();
         }
-        if(Validator.isProxy(item)) {
+        if(Validator$1.isProxy(item)) {
             return item.$value;
         }
         return item;
@@ -3773,7 +3777,7 @@ var NativeComponents = (function (exports) {
     ObservableObject.prototype.$get = ObservableObject.prototype.get;
 
     ObservableObject.prototype.set = function(newData) {
-        const data = Validator.isProxy(newData) ? newData.$value : newData;
+        const data = Validator$1.isProxy(newData) ? newData.$value : newData;
         const configs = this.configs;
 
         for(const key in data) {
@@ -3781,18 +3785,18 @@ var NativeComponents = (function (exports) {
             const newValueOrigin = newData[key];
             const newValue = data[key];
 
-            if(Validator.isObservable(targetItem)) {
-                if(!Validator.isArray(newValue)) {
+            if(Validator$1.isObservable(targetItem)) {
+                if(!Validator$1.isArray(newValue)) {
                     targetItem.set(newValue);
                     continue;
                 }
                 const firstElementFromOriginalValue = newValueOrigin.at(0);
-                if(Validator.isObservable(firstElementFromOriginalValue) || Validator.isProxy(firstElementFromOriginalValue)) {
+                if(Validator$1.isObservable(firstElementFromOriginalValue) || Validator$1.isProxy(firstElementFromOriginalValue)) {
                     const newValues = newValue.map(item => {
-                        if(Validator.isProxy(firstElementFromOriginalValue)) {
-                            return Observable.init(item, configs);
+                        if(Validator$1.isProxy(firstElementFromOriginalValue)) {
+                            return Observable$1.init(item, configs);
                         }
-                        return Observable(item, configs);
+                        return Observable$1(item, configs);
                     });
                     targetItem.set(newValues);
                     continue;
@@ -3800,7 +3804,7 @@ var NativeComponents = (function (exports) {
                 targetItem.set([...newValue]);
                 continue;
             }
-            if(Validator.isProxy(targetItem)) {
+            if(Validator$1.isProxy(targetItem)) {
                 targetItem.update(newValue);
                 continue;
             }
@@ -3820,7 +3824,7 @@ var NativeComponents = (function (exports) {
     };
     ObservableObject.prototype.$keys = ObservableObject.prototype.keys;
     ObservableObject.prototype.clone = function() {
-        return Observable.init(this.val(), this.configs);
+        return Observable$1.init(this.val(), this.configs);
     };
     ObservableObject.prototype.$clone = ObservableObject.prototype.clone;
     ObservableObject.prototype.reset = function() {
@@ -3850,7 +3854,7 @@ var NativeComponents = (function (exports) {
 
     ObservableObject.prototype.update = ObservableObject.prototype.set;
 
-    Observable.init = function(initialValue, configs = null) {
+    Observable$1.init = function(initialValue, configs = null) {
         return new ObservableObject(initialValue, configs)
     };
 
@@ -3859,8 +3863,8 @@ var NativeComponents = (function (exports) {
      * @param {any[]} data
      * @return Proxy[]
      */
-    Observable.arrayOfObject = function(data) {
-        return data.map(item => Observable.object(item));
+    Observable$1.arrayOfObject = function(data) {
+        return data.map(item => Observable$1.object(item));
     };
 
     /**
@@ -3868,26 +3872,26 @@ var NativeComponents = (function (exports) {
      * @param {ObservableItem|Object<ObservableItem>} data
      * @returns {{}|*|null}
      */
-    Observable.value = function(data) {
-        if(Validator.isObservable(data)) {
+    Observable$1.value = function(data) {
+        if(Validator$1.isObservable(data)) {
             return data.val();
         }
-        if(Validator.isProxy(data)) {
+        if(Validator$1.isProxy(data)) {
             return data.$value;
         }
-        if(Validator.isArray(data)) {
+        if(Validator$1.isArray(data)) {
             const result = [];
             for(let i = 0, length = data.length; i < length; i++) {
                 const item = data[i];
-                result.push(Observable.value(item));
+                result.push(Observable$1.value(item));
             }
             return result;
         }
         return data;
     };
 
-    Observable.object = Observable.init;
-    Observable.json = Observable.init;
+    Observable$1.object = Observable$1.init;
+    Observable$1.json = Observable$1.init;
 
     /**
      * Creates a computed observable that automatically updates when its dependencies change.
@@ -3908,13 +3912,13 @@ var NativeComponents = (function (exports) {
      * const batch = Observable.batch(() => { ...  });
      * const computed = Observable.computed(() => { ... }, batch);
     */
-    Observable.computed = function(callback, dependencies = []) {
+    Observable$1.computed = function(callback, dependencies = []) {
         const initialValue = callback();
         const observable = new ObservableItem(initialValue);
         const updatedValue = nextTick(() => observable.set(callback()));
 
-        if(Validator.isFunction(dependencies)) {
-            if(!Validator.isObservable(dependencies.$observer)) {
+        if(Validator$1.isFunction(dependencies)) {
+            if(!Validator$1.isObservable(dependencies.$observer)) {
                 throw new NativeDocumentError('Observable.computed : dependencies must be valid batch function');
             }
             dependencies.$observer.subscribe(updatedValue);
@@ -3922,7 +3926,7 @@ var NativeComponents = (function (exports) {
         }
 
         dependencies.forEach(dependency => {
-            if(Validator.isProxy(dependency)) {
+            if(Validator$1.isProxy(dependency)) {
                 dependency.$observables.forEach((observable) => {
                     observable.subscribe(updatedValue);
                 });
@@ -3945,7 +3949,7 @@ var NativeComponents = (function (exports) {
         const $getStoreOrThrow = (method, name) => {
             const item = $stores.get(name);
             if (!item) {
-                DebugManager$2.error('Store', `Store.${method}('${name}') : store not found. Did you call Store.create('${name}') first?`);
+                DebugManager$1.error('Store', `Store.${method}('${name}') : store not found. Did you call Store.create('${name}') first?`);
                 throw new NativeDocumentError(
                     `Store.${method}('${name}') : store not found.`
                 );
@@ -3958,7 +3962,7 @@ var NativeComponents = (function (exports) {
          */
         const $applyReadOnly = (observer, name, context) => {
             const readOnlyError = (method) => () => {
-                DebugManager$2.error('Store', `Store.${context}('${name}') is read-only. '${method}()' is not allowed.`);
+                DebugManager$1.error('Store', `Store.${context}('${name}') is read-only. '${method}()' is not allowed.`);
                 throw new NativeDocumentError(
                     `Store.${context}('${name}') is read-only.`
                 );
@@ -3970,12 +3974,12 @@ var NativeComponents = (function (exports) {
 
         const $createObservable = (value, options = {}) => {
             if(Array.isArray(value)) {
-                return Observable.array(value, options);
+                return Observable$1.array(value, options);
             }
             if(typeof value === 'object') {
-                return Observable.object(value, options);
+                return Observable$1.object(value, options);
             }
-            return Observable(value, options);
+            return Observable$1(value, options);
         };
 
         const $api = {
@@ -3989,7 +3993,7 @@ var NativeComponents = (function (exports) {
              */
             create(name, value) {
                 if ($stores.has(name)) {
-                    DebugManager$2.warn('Store', `Store.create('${name}') : a store with this name already exists. Use Store.get('${name}') to retrieve it.`);
+                    DebugManager$1.warn('Store', `Store.create('${name}') : a store with this name already exists. Use Store.get('${name}') to retrieve it.`);
                     throw new NativeDocumentError(
                         `Store.create('${name}') : a store with this name already exists.`
                     );
@@ -4010,7 +4014,7 @@ var NativeComponents = (function (exports) {
              */
             createResettable(name, value) {
                 if ($stores.has(name)) {
-                    DebugManager$2.warn('Store', `Store.createResettable('${name}') : a store with this name already exists.`);
+                    DebugManager$1.warn('Store', `Store.createResettable('${name}') : a store with this name already exists.`);
                     throw new NativeDocumentError(
                         `Store.createResettable('${name}') : a store with this name already exists.`
                     );
@@ -4046,7 +4050,7 @@ var NativeComponents = (function (exports) {
              */
             createComposed(name, computation, dependencies) {
                 if ($stores.has(name)) {
-                    DebugManager$2.warn('Store', `Store.createComposed('${name}') : a store with this name already exists.`);
+                    DebugManager$1.warn('Store', `Store.createComposed('${name}') : a store with this name already exists.`);
                     throw new NativeDocumentError(
                         `Store.createComposed('${name}') : a store with this name already exists.`
                     );
@@ -4069,7 +4073,7 @@ var NativeComponents = (function (exports) {
                     }
                     const depItem = $stores.get(depName);
                     if (!depItem) {
-                        DebugManager$2.error('Store', `Store.createComposed('${name}') : dependency '${depName}' not found. Create it first.`);
+                        DebugManager$1.error('Store', `Store.createComposed('${name}') : dependency '${depName}' not found. Create it first.`);
                         throw new NativeDocumentError(
                             `Store.createComposed('${name}') : dependency store '${depName}' not found.`
                         );
@@ -4078,7 +4082,7 @@ var NativeComponents = (function (exports) {
                 });
 
                 // Create computed observable from dependency observers
-                const observer = Observable.computed(computation, depObservers);
+                const observer = Observable$1.computed(computation, depObservers);
 
                 $stores.set(name, { observer, subscribers: new Set(), resettable: false, composed: true });
                 return observer;
@@ -4103,13 +4107,13 @@ var NativeComponents = (function (exports) {
             reset(name) {
                 const item = $getStoreOrThrow('reset', name);
                 if (item.composed) {
-                    DebugManager$2.error('Store', `Store.reset('${name}') : composed stores cannot be reset. Their value is derived from dependencies.`);
+                    DebugManager$1.error('Store', `Store.reset('${name}') : composed stores cannot be reset. Their value is derived from dependencies.`);
                     throw new NativeDocumentError(
                         `Store.reset('${name}') : composed stores cannot be reset.`
                     );
                 }
                 if (!item.resettable) {
-                    DebugManager$2.error('Store', `Store.reset('${name}') : this store is not resettable. Use Store.createResettable('${name}', value) instead of Store.create().`);
+                    DebugManager$1.error('Store', `Store.reset('${name}') : this store is not resettable. Use Store.createResettable('${name}', value) instead of Store.create().`);
                     throw new NativeDocumentError(
                         `Store.reset('${name}') : this store is not resettable. Use Store.createResettable('${name}', value) instead of Store.create().`
                     );
@@ -4130,7 +4134,7 @@ var NativeComponents = (function (exports) {
                 const item = $getStoreOrThrow('use', name);
 
                 if (item.composed) {
-                    DebugManager$2.error('Store', `Store.use('${name}') : composed stores are read-only. Use Store.follow('${name}') instead.`);
+                    DebugManager$1.error('Store', `Store.use('${name}') : composed stores are read-only. Use Store.follow('${name}') instead.`);
                     throw new NativeDocumentError(
                         `Store.use('${name}') : composed stores are read-only. Use Store.follow('${name}') instead.`
                     );
@@ -4197,7 +4201,7 @@ var NativeComponents = (function (exports) {
             get(name) {
                 const item = $stores.get(name);
                 if (!item) {
-                    DebugManager$2.warn('Store', `Store.get('${name}') : store not found.`);
+                    DebugManager$1.warn('Store', `Store.get('${name}') : store not found.`);
                     return null;
                 }
                 return item.observer;
@@ -4219,7 +4223,7 @@ var NativeComponents = (function (exports) {
             delete(name) {
                 const item = $stores.get(name);
                 if (!item) {
-                    DebugManager$2.warn('Store', `Store.delete('${name}') : store not found, nothing to delete.`);
+                    DebugManager$1.warn('Store', `Store.delete('${name}') : store not found, nothing to delete.`);
                     return;
                 }
                 item.subscribers.forEach(follower => follower.destroy());
@@ -4321,7 +4325,7 @@ var NativeComponents = (function (exports) {
                 return undefined;
             },
             set(target, prop, value) {
-                DebugManager$2.error('Store', `Forbidden: You cannot overwrite the store key '${String(prop)}'. Use .use('${String(prop)}').set(value) instead.`);
+                DebugManager$1.error('Store', `Forbidden: You cannot overwrite the store key '${String(prop)}'. Use .use('${String(prop)}').set(value) instead.`);
                 throw new NativeDocumentError(`Store structure is immutable. Use .set() on the observable.`);
             },
             deleteProperty(target, prop) {
@@ -4901,7 +4905,7 @@ var NativeComponents = (function (exports) {
         }
 
         this.$description = {
-            src: Validator.isObservable(source) ? source : $(null),
+            src: Validator$1.isObservable(source) ? source : $(null),
             alt: null,
             name: null,
             initials: null,
@@ -5536,31 +5540,36 @@ var NativeComponents = (function (exports) {
         return this;
     };
 
-    Button.prototype.iconAtLeft = function(position) {
-        return this.iconPosition('left');
+    Button.prototype.iconAtLeft = function() {
+        this.$description.iconPosition = 'left';
+        return this;
     };
-    Button.prototype.iconAtRight = function(position) {
-        return this.iconPosition('right');
+    Button.prototype.iconAtRight = function() {
+        this.$description.iconPosition = 'right';
+        return this;
     };
     Button.prototype.iconAtTop = function() {
-        return this.iconPosition('top');
+        this.$description.iconPosition = 'top';
+        return this;
     };
 
     Button.prototype.iconAtBottom = function() {
-        return this.iconPosition('bottom');
+        this.$description.iconPosition = 'bottom';
+        return this;
     };
 
     Button.prototype.iconOnly = function() {
+        this.$description.iconOnly = true;
         return this;
     };
 
     Button.prototype.loading = function(loading = true) {
-        this.$description.loading = loading;
+        this.$description.loading = BaseComponent.obs(loading);
         return this;
     };
 
     Button.prototype.disable = function(disabled = true) {
-        this.$description.disabled = disabled;
+        this.$description.disabled = BaseComponent.obs(disabled);
         return this;
     };
 
@@ -7142,7 +7151,7 @@ var NativeComponents = (function (exports) {
             }
             else if (typeof condition === 'function') {
                 isRequired = condition(allValues);
-            } else if (Validator.isObservable(condition)) {
+            } else if (Validator$1.isObservable(condition)) {
                 isRequired = condition.val();
             } else {
                 isRequired = !!condition;
@@ -7275,7 +7284,7 @@ var NativeComponents = (function (exports) {
     };
 
     Field.prototype.errors = function(errors) {
-        if(!Validator.isObservable(errors)) {
+        if(!Validator$1.isObservable(errors)) {
             throw new Error('Errors must be an observable');
         }
         this.$description.errors = errors;
@@ -7379,12 +7388,12 @@ var NativeComponents = (function (exports) {
 
     Field.prototype.value = function() {
         const value = this.$model();
-        return Validator.isObservable(value) ? value.val() : value;
+        return Validator$1.isObservable(value) ? value.val() : value;
     };
 
     Field.prototype.setValue = function(newValue) {
         const value = this.$model();
-        if(Validator.isObservable(value)) {
+        if(Validator$1.isObservable(value)) {
             value.set(newValue);
             return this;
         }
@@ -7506,10 +7515,10 @@ var NativeComponents = (function (exports) {
         this.$element = null;
         this.$configs = configs;
         this.$fields = new Map();
-        this.$submitting = Observable(false);
-        this.$errors = Observable(null);
-        this.$isDirty = Observable(false);
-        this.$isValid = Observable(false);
+        this.$submitting = Observable$1(false);
+        this.$errors = Observable$1(null);
+        this.$isDirty = Observable$1(false);
+        this.$isValid = Observable$1(false);
     }
 
     FormControl.defaultLayoutTemplate = null;
@@ -7554,7 +7563,7 @@ var NativeComponents = (function (exports) {
             return this;
         }
 
-        if(Validator.isObservable(dataSource)) {
+        if(Validator$1.isObservable(dataSource)) {
             field.model(dataSource);
             dataSource.subscribe(() => {
                 this.$isDirty.set(true);
@@ -8107,7 +8116,7 @@ var NativeComponents = (function (exports) {
 
     CheckboxField.prototype.checked = function() {
         const checked = this.$description.checked;
-        if(Validator.isObservable(checked)) {
+        if(Validator$1.isObservable(checked)) {
             return checked.val();
         }
         return checked;
@@ -8148,7 +8157,7 @@ var NativeComponents = (function (exports) {
 
     CheckboxField.prototype.checked = function() {
         const checked = this.$description.checked;
-        if(Validator.isObservable(checked)) {
+        if(Validator$1.isObservable(checked)) {
             return checked.val();
         }
         return checked;
@@ -8828,9 +8837,9 @@ var NativeComponents = (function (exports) {
         this.$description = {
             name: name,
             defaultItem: null,
-            value: (config?.data && Validator.isObservable(config.data))
+            value: (config?.data && Validator$1.isObservable(config.data))
                 ? config.data
-                : Observable.array(config?.data || []),
+                : Observable$1.array(config?.data || []),
             rules: null,
             layout: null,
             template: null,
@@ -8860,7 +8869,7 @@ var NativeComponents = (function (exports) {
             value.set(data);
             return;
         }
-        if(Validator.isObservable(data)) {
+        if(Validator$1.isObservable(data)) {
             field.model(data);
             return;
         }
@@ -8924,11 +8933,11 @@ var NativeComponents = (function (exports) {
 
         const defaultItem = this.$description.defaultItem;
         let defaultItemData = (typeof defaultItem === 'function' ? defaultItem(...args) : defaultItem) || '';
-        defaultItemData = Validator.isObservable(defaultItemData)
+        defaultItemData = Validator$1.isObservable(defaultItemData)
             ? defaultItemData
-            : Validator.isObject(defaultItemData)
-                ? Observable.init(defaultItemData)
-                : Observable(defaultItemData);
+            : Validator$1.isObject(defaultItemData)
+                ? Observable$1.init(defaultItemData)
+                : Observable$1(defaultItemData);
 
         this.$items = this.$items || new WeakMap();
 
@@ -8972,7 +8981,7 @@ var NativeComponents = (function (exports) {
     };
 
     FieldCollection.prototype.model = function(newValue) {
-        if(Validator.isObservable(newValue)) {
+        if(Validator$1.isObservable(newValue)) {
             this.$description.value?.cleanup?.();
             this.$description.value = newValue;
             return this;
@@ -8983,7 +8992,7 @@ var NativeComponents = (function (exports) {
 
     FieldCollection.prototype.value = function() {
         return this.$description.value.map((item) => {
-            return Validator.isObservable(item) ? item.val() : item;
+            return Validator$1.isObservable(item) ? item.val() : item;
         });
     };
 
@@ -9346,7 +9355,7 @@ var NativeComponents = (function (exports) {
 
     ListItem.prototype.selectable = function() {
         this.$description.selectable = true;
-        if(Validator.isObservable(this.$description.selected)) {
+        if(Validator$1.isObservable(this.$description.selected)) {
             return this;
         }
         this.$description.selected = $(false);
@@ -9354,7 +9363,7 @@ var NativeComponents = (function (exports) {
     };
 
     ListItem.prototype.selected = function(selected = true) {
-        if(Validator.isObservable(this.$description.selected)) {
+        if(Validator$1.isObservable(this.$description.selected)) {
             this.$description.selected.set(selected);
             return this;
         }
@@ -10127,7 +10136,7 @@ var NativeComponents = (function (exports) {
 
     Progress.prototype.value = function() {
         const value = this.$description.value;
-        if(Validator.isObservable(value)) {
+        if(Validator$1.isObservable(value)) {
             return value.val();
         }
         return value;
@@ -10135,7 +10144,7 @@ var NativeComponents = (function (exports) {
 
     Progress.prototype.setValue = function(newValue) {
         const value = this.$description.value;
-        if(Validator.isObservable(value)) {
+        if(Validator$1.isObservable(value)) {
             value.set(newValue);
             return this;
         }
@@ -10796,7 +10805,7 @@ var NativeComponents = (function (exports) {
     };
 
     Splitter.prototype.panels = function(panels) {
-        if(Validator.isObservable(this.$description.panels)) {
+        if(Validator$1.isObservable(this.$description.panels)) {
             this.$description.panels.set(panels);
             return this;
         }
@@ -10958,7 +10967,7 @@ var NativeComponents = (function (exports) {
     };
 
     Stepper.prototype.steps = function(steps) {
-        if(Validator.isObservable(steps)) {
+        if(Validator$1.isObservable(steps)) {
             this.$description.steps = steps;
             return this;
         }
@@ -11410,9 +11419,9 @@ var NativeComponents = (function (exports) {
             ...configs
         });
 
-        this.$currentPage = Observable(1);
-        this.$selectedRows = Observable.array();
-        this.$expandedRows = Observable.array();
+        this.$currentPage = Observable$1(1);
+        this.$selectedRows = Observable$1.array();
+        this.$expandedRows = Observable$1.array();
     }
 
     DataTable.defaultToolbarTemplate = null;