native-document 1.0.125 → 1.0.127

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (37) hide show
  1. package/dist/native-document.components.min.js +132 -130
  2. package/dist/native-document.dev.js +55 -58
  3. package/dist/native-document.dev.js.map +1 -1
  4. package/dist/native-document.min.js +1 -1
  5. package/package.json +1 -1
  6. package/src/components/$traits/HasItems.js +39 -2
  7. package/src/components/BaseComponent.js +4 -0
  8. package/src/components/button/Button.js +15 -9
  9. package/src/components/menu/Menu.js +18 -7
  10. package/src/components/menu/MenuItem.js +13 -13
  11. package/src/components/menu/MenuLink.js +24 -0
  12. package/src/core/elements/anchor/anchor.js +3 -10
  13. package/src/core/utils/property-accumulator.js +1 -1
  14. package/src/router/Router.js +11 -0
  15. package/src/router/RouterComponent.js +3 -1
  16. package/src/ui/components/button/button.css +362 -0
  17. package/src/ui/components/button/button.render.js +63 -0
  18. package/src/ui/theme.js +2 -1
  19. package/src/ui/tokens/animation.scss +36 -0
  20. package/src/ui/tokens/colors-dark.scss +57 -0
  21. package/src/ui/tokens/colors.scss +54 -0
  22. package/src/ui/tokens/components.scss +32 -0
  23. package/src/ui/tokens/fonts.scss +57 -0
  24. package/src/ui/tokens/glass.scss +10 -0
  25. package/src/ui/tokens/index.scss +38 -0
  26. package/src/ui/tokens/layouts.scss +228 -0
  27. package/src/ui/tokens/opacity.scss +21 -0
  28. package/src/ui/tokens/others.scss +11 -0
  29. package/src/ui/tokens/radius.scss +6 -0
  30. package/src/ui/tokens/reset.scss +48 -0
  31. package/src/ui/tokens/shadows.scss +29 -0
  32. package/src/ui/tokens/spacings.scss +13 -0
  33. package/src/ui/tokens/vars.scss +35 -0
  34. package/src/ui/tokens/viewports.scss +30 -0
  35. package/utils.js +3 -1
  36. package/src/ui/components/button/Button.js +0 -8
  37. package/src/ui/tokens/vars.css +0 -0
@@ -31,6 +31,10 @@ var NativeComponents = (function (exports) {
31
31
  Component.prototype.constructor = Component;
32
32
  };
33
33
 
34
+ BaseComponent.obs = (value) => {
35
+ return value.__$Observable ? value : Observable(value);
36
+ };
37
+
34
38
  BaseComponent.prototype.$storeElement = function(element) {
35
39
  this.$element = element;
36
40
  return this;
@@ -886,7 +890,7 @@ var NativeComponents = (function (exports) {
886
890
  VALID_TYPES[COMMON_NODE_TYPES.DOCUMENT_FRAGMENT] = true;
887
891
  VALID_TYPES[COMMON_NODE_TYPES.COMMENT] = true;
888
892
 
889
- const Validator = {
893
+ const Validator$1 = {
890
894
  isObservable(value) {
891
895
  return value?.__$isObservable;
892
896
  },
@@ -903,7 +907,7 @@ var NativeComponents = (function (exports) {
903
907
  return value?.__isProxy__
904
908
  },
905
909
  isObservableOrProxy(value) {
906
- return Validator.isObservable(value) || Validator.isProxy(value);
910
+ return Validator$1.isObservable(value) || Validator$1.isProxy(value);
907
911
  },
908
912
  isAnchor(value) {
909
913
  return value?.__Anchor__
@@ -986,8 +990,8 @@ var NativeComponents = (function (exports) {
986
990
  if(!data) {
987
991
  return false;
988
992
  }
989
- return Validator.isObject(data)
990
- && Object.values(data).some(value => Validator.isObservable(value));
993
+ return Validator$1.isObject(data)
994
+ && Object.values(data).some(value => Validator$1.isObservable(value));
991
995
  },
992
996
  /**
993
997
  * Check if the data contains an observable reference.
@@ -1215,7 +1219,7 @@ var NativeComponents = (function (exports) {
1215
1219
  }
1216
1220
 
1217
1221
  // Observables - keep the référence
1218
- if (Validator.isObservable(value)) {
1222
+ if (Validator$1.isObservable(value)) {
1219
1223
  onObservableFound && onObservableFound(value);
1220
1224
  return value;
1221
1225
  }
@@ -1384,7 +1388,7 @@ var NativeComponents = (function (exports) {
1384
1388
  * @class ObservableItem
1385
1389
  */
1386
1390
  function ObservableItem(value, configs = null) {
1387
- value = Validator.isObservable(value) ? value.val() : value;
1391
+ value = Validator$1.isObservable(value) ? value.val() : value;
1388
1392
 
1389
1393
  this.$previousValue = null;
1390
1394
  this.$currentValue = value;
@@ -1398,7 +1402,7 @@ var NativeComponents = (function (exports) {
1398
1402
  if(configs) {
1399
1403
  this.configs = configs;
1400
1404
  if(configs.reset) {
1401
- this.$initialValue = Validator.isObject(value) ? deepClone(value) : value;
1405
+ this.$initialValue = Validator$1.isObject(value) ? deepClone(value) : value;
1402
1406
  }
1403
1407
  }
1404
1408
  }
@@ -1607,7 +1611,7 @@ var NativeComponents = (function (exports) {
1607
1611
  if(!watchValueList) {
1608
1612
  watchValueList = callback;
1609
1613
  this.$watchers.set(value, callback);
1610
- } else if(!Validator.isArray(watchValueList.list)) {
1614
+ } else if(!Validator$1.isArray(watchValueList.list)) {
1611
1615
  watchValueList = [watchValueList, callback];
1612
1616
  callback = (value) => {
1613
1617
  for(let i = 0, length = watchValueList.length; i < length; i++) {
@@ -1719,7 +1723,7 @@ var NativeComponents = (function (exports) {
1719
1723
  */
1720
1724
  ObservableItem.prototype.get = function(key) {
1721
1725
  const item = this.$currentValue[key];
1722
- return Validator.isObservable(item) ? item.val() : item;
1726
+ return Validator$1.isObservable(item) ? item.val() : item;
1723
1727
  };
1724
1728
 
1725
1729
  /**
@@ -1751,7 +1755,7 @@ var NativeComponents = (function (exports) {
1751
1755
  * a.equals(10); // false
1752
1756
  */
1753
1757
  ObservableItem.prototype.equals = function(other) {
1754
- if(Validator.isObservable(other)) {
1758
+ if(Validator$1.isObservable(other)) {
1755
1759
  return this.$currentValue === other.$currentValue;
1756
1760
  }
1757
1761
  return this.$currentValue === other;
@@ -1796,7 +1800,7 @@ var NativeComponents = (function (exports) {
1796
1800
  if(!this.configs?.reset) {
1797
1801
  return;
1798
1802
  }
1799
- const resetValue = (Validator.isObject(this.$initialValue))
1803
+ const resetValue = (Validator$1.isObject(this.$initialValue))
1800
1804
  ? deepClone(this.$initialValue, (observable) => {
1801
1805
  observable.reset();
1802
1806
  })
@@ -1885,7 +1889,7 @@ var NativeComponents = (function (exports) {
1885
1889
  const formatter = Formatters[type];
1886
1890
  const localeObservable = Formatters.locale;
1887
1891
 
1888
- return Observable.computed(() => formatter(self.val(), localeObservable.val(), options),
1892
+ return Observable$1.computed(() => formatter(self.val(), localeObservable.val(), options),
1889
1893
  [self, localeObservable]
1890
1894
  );
1891
1895
  };
@@ -1910,17 +1914,17 @@ var NativeComponents = (function (exports) {
1910
1914
  * @returns {ObservableItem}
1911
1915
  * @constructor
1912
1916
  */
1913
- function Observable(value, configs = null) {
1917
+ function Observable$1(value, configs = null) {
1914
1918
  return new ObservableItem(value, configs);
1915
1919
  }
1916
1920
 
1917
- const $$1 = Observable;
1921
+ const $$1 = Observable$1;
1918
1922
 
1919
1923
  /**
1920
1924
  *
1921
1925
  * @param {string} propertyName
1922
1926
  */
1923
- Observable.useValueProperty = function(propertyName = 'value') {
1927
+ Observable$1.useValueProperty = function(propertyName = 'value') {
1924
1928
  Object.defineProperty(ObservableItem.prototype, propertyName, {
1925
1929
  get() {
1926
1930
  return this.$currentValue;
@@ -1938,7 +1942,7 @@ var NativeComponents = (function (exports) {
1938
1942
  * @param id
1939
1943
  * @returns {ObservableItem|null}
1940
1944
  */
1941
- Observable.getById = function(id) {
1945
+ Observable$1.getById = function(id) {
1942
1946
  const item = MemoryManager.getObservableById(parseInt(id));
1943
1947
  if(!item) {
1944
1948
  throw new NativeDocumentError('Observable.getById : No observable found with id ' + id);
@@ -1950,7 +1954,7 @@ var NativeComponents = (function (exports) {
1950
1954
  *
1951
1955
  * @param {ObservableItem} observable
1952
1956
  */
1953
- Observable.cleanup = function(observable) {
1957
+ Observable$1.cleanup = function(observable) {
1954
1958
  observable.cleanup();
1955
1959
  };
1956
1960
 
@@ -1959,7 +1963,7 @@ var NativeComponents = (function (exports) {
1959
1963
  * @param {Boolean} enable
1960
1964
  * @param {{interval:Boolean, threshold:number}} options
1961
1965
  */
1962
- Observable.autoCleanup = function(enable = false, options = {}) {
1966
+ Observable$1.autoCleanup = function(enable = false, options = {}) {
1963
1967
  if(!enable) {
1964
1968
  return;
1965
1969
  }
@@ -2019,7 +2023,7 @@ var NativeComponents = (function (exports) {
2019
2023
  const bindBooleanAttribute = (element, attributeName, value) => {
2020
2024
  const isObservable = value.__$isObservable;
2021
2025
  const defaultValue = isObservable? value.val() : value;
2022
- if(Validator.isBoolean(defaultValue)) {
2026
+ if(Validator$1.isBoolean(defaultValue)) {
2023
2027
  element[attributeName] = defaultValue;
2024
2028
  }
2025
2029
  else {
@@ -2330,7 +2334,7 @@ var NativeComponents = (function (exports) {
2330
2334
  if(child.toNdElement) {
2331
2335
  do {
2332
2336
  child = child.toNdElement();
2333
- if(Validator.isElement(child)) {
2337
+ if(Validator$1.isElement(child)) {
2334
2338
  return child;
2335
2339
  }
2336
2340
  } while (child.toNdElement);
@@ -2409,7 +2413,7 @@ var NativeComponents = (function (exports) {
2409
2413
  anchor.getParent = () => parent;
2410
2414
 
2411
2415
  anchor.appendChild = (child) => {
2412
- child = Validator.isElement(child) ? child : ElementCreator.getChild(child);
2416
+ child = Validator$1.isElement(child) ? child : ElementCreator.getChild(child);
2413
2417
  parent.appendChild(child);
2414
2418
  };
2415
2419
 
@@ -2418,7 +2422,7 @@ var NativeComponents = (function (exports) {
2418
2422
  anchor.appendRaw = anchor.appendChildRaw;
2419
2423
 
2420
2424
  anchor.insertAtStart = (child) => {
2421
- child = Validator.isElement(child) ? child : ElementCreator.getChild(child);
2425
+ child = Validator$1.isElement(child) ? child : ElementCreator.getChild(child);
2422
2426
  parent.firstChild ? parent.insertBefore(child, parent.firstChild) : parent.appendChild(child);
2423
2427
  };
2424
2428
  anchor.insertAtStartRaw = (child) => {
@@ -2432,7 +2436,7 @@ var NativeComponents = (function (exports) {
2432
2436
  };
2433
2437
 
2434
2438
  anchor.replaceContent = function(content) {
2435
- const child = Validator.isElement(content) ? content : ElementCreator.getChild(content);
2439
+ const child = Validator$1.isElement(content) ? content : ElementCreator.getChild(content);
2436
2440
  parent.replaceChildren(child);
2437
2441
  };
2438
2442
 
@@ -2442,7 +2446,7 @@ var NativeComponents = (function (exports) {
2442
2446
  anchor.setContent = anchor.replaceContent;
2443
2447
 
2444
2448
  anchor.insertBefore = (child, anchor) => {
2445
- child = Validator.isElement(child) ? child : ElementCreator.getChild(child);
2449
+ child = Validator$1.isElement(child) ? child : ElementCreator.getChild(child);
2446
2450
  parent.insertBefore(child, anchor);
2447
2451
  };
2448
2452
  anchor.insertBeforeRaw = (child, anchor) => {
@@ -2467,13 +2471,6 @@ var NativeComponents = (function (exports) {
2467
2471
  function Anchor(name, isUniqueChild = false) {
2468
2472
  const anchorFragment = new AnchorWithSentinel(name);
2469
2473
 
2470
- /**
2471
- * State :
2472
- * 1. Not injected in the DOM
2473
- * 2. Injected in the DOM and should be the only child of parent
2474
- * 3. Injected in the DOM and the parent may have other children
2475
- */
2476
-
2477
2474
  anchorFragment.onConnectedOnce((parent) => {
2478
2475
  if(isUniqueChild) {
2479
2476
  oneChildAnchorOverwriting(anchorFragment, parent);
@@ -2493,7 +2490,7 @@ var NativeComponents = (function (exports) {
2493
2490
  ? () => true: (parent) => (parent.firstChild === anchorStart && parent.lastChild === anchorEnd);
2494
2491
 
2495
2492
  const insertBefore = function(parent, child, target) {
2496
- const childElement = Validator.isElement(child) ? child : ElementCreator.getChild(child);
2493
+ const childElement = Validator$1.isElement(child) ? child : ElementCreator.getChild(child);
2497
2494
  insertBeforeRaw(parent, childElement, target);
2498
2495
  };
2499
2496
 
@@ -2543,7 +2540,7 @@ var NativeComponents = (function (exports) {
2543
2540
  anchorFragment.appendRaw = anchorFragment.appendChildRaw;
2544
2541
 
2545
2542
  anchorFragment.insertAtStart = function(child) {
2546
- child = Validator.isElement(child) ? child : ElementCreator.getChild(child);
2543
+ child = Validator$1.isElement(child) ? child : ElementCreator.getChild(child);
2547
2544
  anchorFragment.insertAtStartRaw(child);
2548
2545
  };
2549
2546
 
@@ -2580,7 +2577,7 @@ var NativeComponents = (function (exports) {
2580
2577
  return;
2581
2578
  }
2582
2579
  if(isParentUniqueChild(parent)) {
2583
- anchorFragment.append.apply(anchorFragment, parent.childNodes);
2580
+ anchorFragment.nativeAppend.apply(anchorFragment, parent.childNodes);
2584
2581
  parent.replaceChildren(anchorStart, anchorEnd);
2585
2582
  return;
2586
2583
  }
@@ -2599,7 +2596,7 @@ var NativeComponents = (function (exports) {
2599
2596
  };
2600
2597
 
2601
2598
  anchorFragment.replaceContent = function(child) {
2602
- const childElement = Validator.isElement(child) ? child : ElementCreator.getChild(child);
2599
+ const childElement = Validator$1.isElement(child) ? child : ElementCreator.getChild(child);
2603
2600
  anchorFragment.replaceContentRaw(childElement);
2604
2601
  };
2605
2602
 
@@ -2609,11 +2606,11 @@ var NativeComponents = (function (exports) {
2609
2606
  return;
2610
2607
  }
2611
2608
  if(isParentUniqueChild(parent)) {
2612
- parent.replaceChildren(anchorStart, childElement, anchorEnd);
2609
+ parent.replaceChildren(anchorStart, child, anchorEnd);
2613
2610
  return;
2614
2611
  }
2615
2612
  anchorFragment.removeChildren();
2616
- parent.insertBefore(childElement, anchorEnd);
2613
+ parent.insertBefore(child, anchorEnd);
2617
2614
  };
2618
2615
 
2619
2616
  anchorFragment.setContent = anchorFragment.replaceContent;
@@ -3211,10 +3208,10 @@ var NativeComponents = (function (exports) {
3211
3208
  String.prototype.use = function(args) {
3212
3209
  const value = this;
3213
3210
 
3214
- return Observable.computed(() => {
3211
+ return Observable$1.computed(() => {
3215
3212
  return value.replace(/\$\{(.*?)}/g, (match, key) => {
3216
3213
  const data = args[key];
3217
- if(Validator.isObservable(data)) {
3214
+ if(Validator$1.isObservable(data)) {
3218
3215
  return data.val();
3219
3216
  }
3220
3217
  return data;
@@ -3223,23 +3220,23 @@ var NativeComponents = (function (exports) {
3223
3220
  };
3224
3221
 
3225
3222
  String.prototype.resolveObservableTemplate = function() {
3226
- if(!Validator.containsObservableReference(this)) {
3223
+ if(!Validator$1.containsObservableReference(this)) {
3227
3224
  return this.valueOf();
3228
3225
  }
3229
3226
  return this.split(/(\{\{#ObItem::\([0-9]+\)\}\})/g).filter(Boolean).map((value) => {
3230
- if(!Validator.containsObservableReference(value)) {
3227
+ if(!Validator$1.containsObservableReference(value)) {
3231
3228
  return value;
3232
3229
  }
3233
3230
  const [_, id] = value.match(/\{\{#ObItem::\(([0-9]+)\)\}\}/);
3234
- return Observable.getById(id);
3231
+ return Observable$1.getById(id);
3235
3232
  });
3236
3233
  };
3237
3234
 
3238
3235
  function createMultiSourceFilter(sources, callbackFn){
3239
- const observables = sources.filter(Validator.isObservable);
3236
+ const observables = sources.filter(Validator$1.isObservable);
3240
3237
 
3241
3238
  const getValues = () => sources.map(src =>
3242
- Validator.isObservable(src) ? src.val() : src
3239
+ Validator$1.isObservable(src) ? src.val() : src
3243
3240
  );
3244
3241
 
3245
3242
  return {
@@ -3489,7 +3486,7 @@ var NativeComponents = (function (exports) {
3489
3486
  const filterCallbacks = {};
3490
3487
 
3491
3488
  for (const [key, rawPredicate] of Object.entries(predicates)) {
3492
- const predicate = Validator.isObservable(rawPredicate) ? match(rawPredicate, false) : rawPredicate;
3489
+ const predicate = Validator$1.isObservable(rawPredicate) ? match(rawPredicate, false) : rawPredicate;
3493
3490
  if (predicate && typeof predicate === 'object' && 'callback' in predicate) {
3494
3491
  filterCallbacks[key] = predicate.callback;
3495
3492
 
@@ -3506,7 +3503,7 @@ var NativeComponents = (function (exports) {
3506
3503
  }
3507
3504
  }
3508
3505
 
3509
- const viewArray = Observable.array();
3506
+ const viewArray = Observable$1.array();
3510
3507
 
3511
3508
  const filters = Object.entries(filterCallbacks);
3512
3509
  const updateView = () => {
@@ -3654,7 +3651,7 @@ var NativeComponents = (function (exports) {
3654
3651
  * items.push(4); // Triggers update
3655
3652
  * items.subscribe((arr) => console.log(arr));
3656
3653
  */
3657
- Observable.array = function(target = [], configs = null) {
3654
+ Observable$1.array = function(target = [], configs = null) {
3658
3655
  return new ObservableArray(target, configs);
3659
3656
  };
3660
3657
 
@@ -3663,10 +3660,10 @@ var NativeComponents = (function (exports) {
3663
3660
  * @param {Function} callback
3664
3661
  * @returns {Function}
3665
3662
  */
3666
- Observable.batch = function(callback) {
3667
- const $observer = Observable(0);
3663
+ Observable$1.batch = function(callback) {
3664
+ const $observer = Observable$1(0);
3668
3665
  const batch = function() {
3669
- if(Validator.isAsyncFunction(callback)) {
3666
+ if(Validator$1.isAsyncFunction(callback)) {
3670
3667
  return (callback(...arguments)).then(() => {
3671
3668
  $observer.trigger();
3672
3669
  }).catch(error => { throw error; });
@@ -3717,25 +3714,25 @@ var NativeComponents = (function (exports) {
3717
3714
  if(Array.isArray(itemValue)) {
3718
3715
  if(configs?.deep !== false) {
3719
3716
  const mappedItemValue = itemValue.map(item => {
3720
- if(Validator.isJson(item)) {
3721
- return Observable.json(item, configs);
3717
+ if(Validator$1.isJson(item)) {
3718
+ return Observable$1.json(item, configs);
3722
3719
  }
3723
- if(Validator.isArray(item)) {
3724
- return Observable.array(item, configs);
3720
+ if(Validator$1.isArray(item)) {
3721
+ return Observable$1.array(item, configs);
3725
3722
  }
3726
- return Observable(item, configs);
3723
+ return Observable$1(item, configs);
3727
3724
  });
3728
- this.$observables[key] = Observable.array(mappedItemValue, configs);
3725
+ this.$observables[key] = Observable$1.array(mappedItemValue, configs);
3729
3726
  continue;
3730
3727
  }
3731
- this.$observables[key] = Observable.array(itemValue, configs);
3728
+ this.$observables[key] = Observable$1.array(itemValue, configs);
3732
3729
  continue;
3733
3730
  }
3734
- if(Validator.isObservable(itemValue) || Validator.isProxy(itemValue)) {
3731
+ if(Validator$1.isObservable(itemValue) || Validator$1.isProxy(itemValue)) {
3735
3732
  this.$observables[key] = itemValue;
3736
3733
  continue;
3737
3734
  }
3738
- this.$observables[key] = (typeof itemValue === 'object') ? Observable.object(itemValue, configs) : Observable(itemValue, configs);
3735
+ this.$observables[key] = (typeof itemValue === 'object') ? Observable$1.object(itemValue, configs) : Observable$1(itemValue, configs);
3739
3736
  }
3740
3737
  };
3741
3738
 
@@ -3743,21 +3740,21 @@ var NativeComponents = (function (exports) {
3743
3740
  const result = {};
3744
3741
  for(const key in this.$observables) {
3745
3742
  const dataItem = this.$observables[key];
3746
- if(Validator.isObservable(dataItem)) {
3743
+ if(Validator$1.isObservable(dataItem)) {
3747
3744
  let value = dataItem.val();
3748
3745
  if(Array.isArray(value)) {
3749
3746
  value = value.map(item => {
3750
- if(Validator.isObservable(item)) {
3747
+ if(Validator$1.isObservable(item)) {
3751
3748
  return item.val();
3752
3749
  }
3753
- if(Validator.isProxy(item)) {
3750
+ if(Validator$1.isProxy(item)) {
3754
3751
  return item.$value;
3755
3752
  }
3756
3753
  return item;
3757
3754
  });
3758
3755
  }
3759
3756
  result[key] = value;
3760
- } else if(Validator.isProxy(dataItem)) {
3757
+ } else if(Validator$1.isProxy(dataItem)) {
3761
3758
  result[key] = dataItem.$value;
3762
3759
  } else {
3763
3760
  result[key] = dataItem;
@@ -3769,10 +3766,10 @@ var NativeComponents = (function (exports) {
3769
3766
 
3770
3767
  ObservableObject.prototype.get = function(property) {
3771
3768
  const item = this.$observables[property];
3772
- if(Validator.isObservable(item)) {
3769
+ if(Validator$1.isObservable(item)) {
3773
3770
  return item.val();
3774
3771
  }
3775
- if(Validator.isProxy(item)) {
3772
+ if(Validator$1.isProxy(item)) {
3776
3773
  return item.$value;
3777
3774
  }
3778
3775
  return item;
@@ -3780,7 +3777,7 @@ var NativeComponents = (function (exports) {
3780
3777
  ObservableObject.prototype.$get = ObservableObject.prototype.get;
3781
3778
 
3782
3779
  ObservableObject.prototype.set = function(newData) {
3783
- const data = Validator.isProxy(newData) ? newData.$value : newData;
3780
+ const data = Validator$1.isProxy(newData) ? newData.$value : newData;
3784
3781
  const configs = this.configs;
3785
3782
 
3786
3783
  for(const key in data) {
@@ -3788,18 +3785,18 @@ var NativeComponents = (function (exports) {
3788
3785
  const newValueOrigin = newData[key];
3789
3786
  const newValue = data[key];
3790
3787
 
3791
- if(Validator.isObservable(targetItem)) {
3792
- if(!Validator.isArray(newValue)) {
3788
+ if(Validator$1.isObservable(targetItem)) {
3789
+ if(!Validator$1.isArray(newValue)) {
3793
3790
  targetItem.set(newValue);
3794
3791
  continue;
3795
3792
  }
3796
3793
  const firstElementFromOriginalValue = newValueOrigin.at(0);
3797
- if(Validator.isObservable(firstElementFromOriginalValue) || Validator.isProxy(firstElementFromOriginalValue)) {
3794
+ if(Validator$1.isObservable(firstElementFromOriginalValue) || Validator$1.isProxy(firstElementFromOriginalValue)) {
3798
3795
  const newValues = newValue.map(item => {
3799
- if(Validator.isProxy(firstElementFromOriginalValue)) {
3800
- return Observable.init(item, configs);
3796
+ if(Validator$1.isProxy(firstElementFromOriginalValue)) {
3797
+ return Observable$1.init(item, configs);
3801
3798
  }
3802
- return Observable(item, configs);
3799
+ return Observable$1(item, configs);
3803
3800
  });
3804
3801
  targetItem.set(newValues);
3805
3802
  continue;
@@ -3807,7 +3804,7 @@ var NativeComponents = (function (exports) {
3807
3804
  targetItem.set([...newValue]);
3808
3805
  continue;
3809
3806
  }
3810
- if(Validator.isProxy(targetItem)) {
3807
+ if(Validator$1.isProxy(targetItem)) {
3811
3808
  targetItem.update(newValue);
3812
3809
  continue;
3813
3810
  }
@@ -3827,7 +3824,7 @@ var NativeComponents = (function (exports) {
3827
3824
  };
3828
3825
  ObservableObject.prototype.$keys = ObservableObject.prototype.keys;
3829
3826
  ObservableObject.prototype.clone = function() {
3830
- return Observable.init(this.val(), this.configs);
3827
+ return Observable$1.init(this.val(), this.configs);
3831
3828
  };
3832
3829
  ObservableObject.prototype.$clone = ObservableObject.prototype.clone;
3833
3830
  ObservableObject.prototype.reset = function() {
@@ -3857,7 +3854,7 @@ var NativeComponents = (function (exports) {
3857
3854
 
3858
3855
  ObservableObject.prototype.update = ObservableObject.prototype.set;
3859
3856
 
3860
- Observable.init = function(initialValue, configs = null) {
3857
+ Observable$1.init = function(initialValue, configs = null) {
3861
3858
  return new ObservableObject(initialValue, configs)
3862
3859
  };
3863
3860
 
@@ -3866,8 +3863,8 @@ var NativeComponents = (function (exports) {
3866
3863
  * @param {any[]} data
3867
3864
  * @return Proxy[]
3868
3865
  */
3869
- Observable.arrayOfObject = function(data) {
3870
- return data.map(item => Observable.object(item));
3866
+ Observable$1.arrayOfObject = function(data) {
3867
+ return data.map(item => Observable$1.object(item));
3871
3868
  };
3872
3869
 
3873
3870
  /**
@@ -3875,26 +3872,26 @@ var NativeComponents = (function (exports) {
3875
3872
  * @param {ObservableItem|Object<ObservableItem>} data
3876
3873
  * @returns {{}|*|null}
3877
3874
  */
3878
- Observable.value = function(data) {
3879
- if(Validator.isObservable(data)) {
3875
+ Observable$1.value = function(data) {
3876
+ if(Validator$1.isObservable(data)) {
3880
3877
  return data.val();
3881
3878
  }
3882
- if(Validator.isProxy(data)) {
3879
+ if(Validator$1.isProxy(data)) {
3883
3880
  return data.$value;
3884
3881
  }
3885
- if(Validator.isArray(data)) {
3882
+ if(Validator$1.isArray(data)) {
3886
3883
  const result = [];
3887
3884
  for(let i = 0, length = data.length; i < length; i++) {
3888
3885
  const item = data[i];
3889
- result.push(Observable.value(item));
3886
+ result.push(Observable$1.value(item));
3890
3887
  }
3891
3888
  return result;
3892
3889
  }
3893
3890
  return data;
3894
3891
  };
3895
3892
 
3896
- Observable.object = Observable.init;
3897
- Observable.json = Observable.init;
3893
+ Observable$1.object = Observable$1.init;
3894
+ Observable$1.json = Observable$1.init;
3898
3895
 
3899
3896
  /**
3900
3897
  * Creates a computed observable that automatically updates when its dependencies change.
@@ -3915,13 +3912,13 @@ var NativeComponents = (function (exports) {
3915
3912
  * const batch = Observable.batch(() => { ... });
3916
3913
  * const computed = Observable.computed(() => { ... }, batch);
3917
3914
  */
3918
- Observable.computed = function(callback, dependencies = []) {
3915
+ Observable$1.computed = function(callback, dependencies = []) {
3919
3916
  const initialValue = callback();
3920
3917
  const observable = new ObservableItem(initialValue);
3921
3918
  const updatedValue = nextTick(() => observable.set(callback()));
3922
3919
 
3923
- if(Validator.isFunction(dependencies)) {
3924
- if(!Validator.isObservable(dependencies.$observer)) {
3920
+ if(Validator$1.isFunction(dependencies)) {
3921
+ if(!Validator$1.isObservable(dependencies.$observer)) {
3925
3922
  throw new NativeDocumentError('Observable.computed : dependencies must be valid batch function');
3926
3923
  }
3927
3924
  dependencies.$observer.subscribe(updatedValue);
@@ -3929,7 +3926,7 @@ var NativeComponents = (function (exports) {
3929
3926
  }
3930
3927
 
3931
3928
  dependencies.forEach(dependency => {
3932
- if(Validator.isProxy(dependency)) {
3929
+ if(Validator$1.isProxy(dependency)) {
3933
3930
  dependency.$observables.forEach((observable) => {
3934
3931
  observable.subscribe(updatedValue);
3935
3932
  });
@@ -3977,12 +3974,12 @@ var NativeComponents = (function (exports) {
3977
3974
 
3978
3975
  const $createObservable = (value, options = {}) => {
3979
3976
  if(Array.isArray(value)) {
3980
- return Observable.array(value, options);
3977
+ return Observable$1.array(value, options);
3981
3978
  }
3982
3979
  if(typeof value === 'object') {
3983
- return Observable.object(value, options);
3980
+ return Observable$1.object(value, options);
3984
3981
  }
3985
- return Observable(value, options);
3982
+ return Observable$1(value, options);
3986
3983
  };
3987
3984
 
3988
3985
  const $api = {
@@ -4085,7 +4082,7 @@ var NativeComponents = (function (exports) {
4085
4082
  });
4086
4083
 
4087
4084
  // Create computed observable from dependency observers
4088
- const observer = Observable.computed(computation, depObservers);
4085
+ const observer = Observable$1.computed(computation, depObservers);
4089
4086
 
4090
4087
  $stores.set(name, { observer, subscribers: new Set(), resettable: false, composed: true });
4091
4088
  return observer;
@@ -4908,7 +4905,7 @@ var NativeComponents = (function (exports) {
4908
4905
  }
4909
4906
 
4910
4907
  this.$description = {
4911
- src: Validator.isObservable(source) ? source : $(null),
4908
+ src: Validator$1.isObservable(source) ? source : $(null),
4912
4909
  alt: null,
4913
4910
  name: null,
4914
4911
  initials: null,
@@ -5543,31 +5540,36 @@ var NativeComponents = (function (exports) {
5543
5540
  return this;
5544
5541
  };
5545
5542
 
5546
- Button.prototype.iconAtLeft = function(position) {
5547
- return this.iconPosition('left');
5543
+ Button.prototype.iconAtLeft = function() {
5544
+ this.$description.iconPosition = 'left';
5545
+ return this;
5548
5546
  };
5549
- Button.prototype.iconAtRight = function(position) {
5550
- return this.iconPosition('right');
5547
+ Button.prototype.iconAtRight = function() {
5548
+ this.$description.iconPosition = 'right';
5549
+ return this;
5551
5550
  };
5552
5551
  Button.prototype.iconAtTop = function() {
5553
- return this.iconPosition('top');
5552
+ this.$description.iconPosition = 'top';
5553
+ return this;
5554
5554
  };
5555
5555
 
5556
5556
  Button.prototype.iconAtBottom = function() {
5557
- return this.iconPosition('bottom');
5557
+ this.$description.iconPosition = 'bottom';
5558
+ return this;
5558
5559
  };
5559
5560
 
5560
5561
  Button.prototype.iconOnly = function() {
5562
+ this.$description.iconOnly = true;
5561
5563
  return this;
5562
5564
  };
5563
5565
 
5564
5566
  Button.prototype.loading = function(loading = true) {
5565
- this.$description.loading = loading;
5567
+ this.$description.loading = BaseComponent.obs(loading);
5566
5568
  return this;
5567
5569
  };
5568
5570
 
5569
5571
  Button.prototype.disable = function(disabled = true) {
5570
- this.$description.disabled = disabled;
5572
+ this.$description.disabled = BaseComponent.obs(disabled);
5571
5573
  return this;
5572
5574
  };
5573
5575
 
@@ -7149,7 +7151,7 @@ var NativeComponents = (function (exports) {
7149
7151
  }
7150
7152
  else if (typeof condition === 'function') {
7151
7153
  isRequired = condition(allValues);
7152
- } else if (Validator.isObservable(condition)) {
7154
+ } else if (Validator$1.isObservable(condition)) {
7153
7155
  isRequired = condition.val();
7154
7156
  } else {
7155
7157
  isRequired = !!condition;
@@ -7282,7 +7284,7 @@ var NativeComponents = (function (exports) {
7282
7284
  };
7283
7285
 
7284
7286
  Field.prototype.errors = function(errors) {
7285
- if(!Validator.isObservable(errors)) {
7287
+ if(!Validator$1.isObservable(errors)) {
7286
7288
  throw new Error('Errors must be an observable');
7287
7289
  }
7288
7290
  this.$description.errors = errors;
@@ -7386,12 +7388,12 @@ var NativeComponents = (function (exports) {
7386
7388
 
7387
7389
  Field.prototype.value = function() {
7388
7390
  const value = this.$model();
7389
- return Validator.isObservable(value) ? value.val() : value;
7391
+ return Validator$1.isObservable(value) ? value.val() : value;
7390
7392
  };
7391
7393
 
7392
7394
  Field.prototype.setValue = function(newValue) {
7393
7395
  const value = this.$model();
7394
- if(Validator.isObservable(value)) {
7396
+ if(Validator$1.isObservable(value)) {
7395
7397
  value.set(newValue);
7396
7398
  return this;
7397
7399
  }
@@ -7513,10 +7515,10 @@ var NativeComponents = (function (exports) {
7513
7515
  this.$element = null;
7514
7516
  this.$configs = configs;
7515
7517
  this.$fields = new Map();
7516
- this.$submitting = Observable(false);
7517
- this.$errors = Observable(null);
7518
- this.$isDirty = Observable(false);
7519
- this.$isValid = Observable(false);
7518
+ this.$submitting = Observable$1(false);
7519
+ this.$errors = Observable$1(null);
7520
+ this.$isDirty = Observable$1(false);
7521
+ this.$isValid = Observable$1(false);
7520
7522
  }
7521
7523
 
7522
7524
  FormControl.defaultLayoutTemplate = null;
@@ -7561,7 +7563,7 @@ var NativeComponents = (function (exports) {
7561
7563
  return this;
7562
7564
  }
7563
7565
 
7564
- if(Validator.isObservable(dataSource)) {
7566
+ if(Validator$1.isObservable(dataSource)) {
7565
7567
  field.model(dataSource);
7566
7568
  dataSource.subscribe(() => {
7567
7569
  this.$isDirty.set(true);
@@ -8114,7 +8116,7 @@ var NativeComponents = (function (exports) {
8114
8116
 
8115
8117
  CheckboxField.prototype.checked = function() {
8116
8118
  const checked = this.$description.checked;
8117
- if(Validator.isObservable(checked)) {
8119
+ if(Validator$1.isObservable(checked)) {
8118
8120
  return checked.val();
8119
8121
  }
8120
8122
  return checked;
@@ -8155,7 +8157,7 @@ var NativeComponents = (function (exports) {
8155
8157
 
8156
8158
  CheckboxField.prototype.checked = function() {
8157
8159
  const checked = this.$description.checked;
8158
- if(Validator.isObservable(checked)) {
8160
+ if(Validator$1.isObservable(checked)) {
8159
8161
  return checked.val();
8160
8162
  }
8161
8163
  return checked;
@@ -8835,9 +8837,9 @@ var NativeComponents = (function (exports) {
8835
8837
  this.$description = {
8836
8838
  name: name,
8837
8839
  defaultItem: null,
8838
- value: (config?.data && Validator.isObservable(config.data))
8840
+ value: (config?.data && Validator$1.isObservable(config.data))
8839
8841
  ? config.data
8840
- : Observable.array(config?.data || []),
8842
+ : Observable$1.array(config?.data || []),
8841
8843
  rules: null,
8842
8844
  layout: null,
8843
8845
  template: null,
@@ -8867,7 +8869,7 @@ var NativeComponents = (function (exports) {
8867
8869
  value.set(data);
8868
8870
  return;
8869
8871
  }
8870
- if(Validator.isObservable(data)) {
8872
+ if(Validator$1.isObservable(data)) {
8871
8873
  field.model(data);
8872
8874
  return;
8873
8875
  }
@@ -8931,11 +8933,11 @@ var NativeComponents = (function (exports) {
8931
8933
 
8932
8934
  const defaultItem = this.$description.defaultItem;
8933
8935
  let defaultItemData = (typeof defaultItem === 'function' ? defaultItem(...args) : defaultItem) || '';
8934
- defaultItemData = Validator.isObservable(defaultItemData)
8936
+ defaultItemData = Validator$1.isObservable(defaultItemData)
8935
8937
  ? defaultItemData
8936
- : Validator.isObject(defaultItemData)
8937
- ? Observable.init(defaultItemData)
8938
- : Observable(defaultItemData);
8938
+ : Validator$1.isObject(defaultItemData)
8939
+ ? Observable$1.init(defaultItemData)
8940
+ : Observable$1(defaultItemData);
8939
8941
 
8940
8942
  this.$items = this.$items || new WeakMap();
8941
8943
 
@@ -8979,7 +8981,7 @@ var NativeComponents = (function (exports) {
8979
8981
  };
8980
8982
 
8981
8983
  FieldCollection.prototype.model = function(newValue) {
8982
- if(Validator.isObservable(newValue)) {
8984
+ if(Validator$1.isObservable(newValue)) {
8983
8985
  this.$description.value?.cleanup?.();
8984
8986
  this.$description.value = newValue;
8985
8987
  return this;
@@ -8990,7 +8992,7 @@ var NativeComponents = (function (exports) {
8990
8992
 
8991
8993
  FieldCollection.prototype.value = function() {
8992
8994
  return this.$description.value.map((item) => {
8993
- return Validator.isObservable(item) ? item.val() : item;
8995
+ return Validator$1.isObservable(item) ? item.val() : item;
8994
8996
  });
8995
8997
  };
8996
8998
 
@@ -9353,7 +9355,7 @@ var NativeComponents = (function (exports) {
9353
9355
 
9354
9356
  ListItem.prototype.selectable = function() {
9355
9357
  this.$description.selectable = true;
9356
- if(Validator.isObservable(this.$description.selected)) {
9358
+ if(Validator$1.isObservable(this.$description.selected)) {
9357
9359
  return this;
9358
9360
  }
9359
9361
  this.$description.selected = $(false);
@@ -9361,7 +9363,7 @@ var NativeComponents = (function (exports) {
9361
9363
  };
9362
9364
 
9363
9365
  ListItem.prototype.selected = function(selected = true) {
9364
- if(Validator.isObservable(this.$description.selected)) {
9366
+ if(Validator$1.isObservable(this.$description.selected)) {
9365
9367
  this.$description.selected.set(selected);
9366
9368
  return this;
9367
9369
  }
@@ -10134,7 +10136,7 @@ var NativeComponents = (function (exports) {
10134
10136
 
10135
10137
  Progress.prototype.value = function() {
10136
10138
  const value = this.$description.value;
10137
- if(Validator.isObservable(value)) {
10139
+ if(Validator$1.isObservable(value)) {
10138
10140
  return value.val();
10139
10141
  }
10140
10142
  return value;
@@ -10142,7 +10144,7 @@ var NativeComponents = (function (exports) {
10142
10144
 
10143
10145
  Progress.prototype.setValue = function(newValue) {
10144
10146
  const value = this.$description.value;
10145
- if(Validator.isObservable(value)) {
10147
+ if(Validator$1.isObservable(value)) {
10146
10148
  value.set(newValue);
10147
10149
  return this;
10148
10150
  }
@@ -10803,7 +10805,7 @@ var NativeComponents = (function (exports) {
10803
10805
  };
10804
10806
 
10805
10807
  Splitter.prototype.panels = function(panels) {
10806
- if(Validator.isObservable(this.$description.panels)) {
10808
+ if(Validator$1.isObservable(this.$description.panels)) {
10807
10809
  this.$description.panels.set(panels);
10808
10810
  return this;
10809
10811
  }
@@ -10965,7 +10967,7 @@ var NativeComponents = (function (exports) {
10965
10967
  };
10966
10968
 
10967
10969
  Stepper.prototype.steps = function(steps) {
10968
- if(Validator.isObservable(steps)) {
10970
+ if(Validator$1.isObservable(steps)) {
10969
10971
  this.$description.steps = steps;
10970
10972
  return this;
10971
10973
  }
@@ -11417,9 +11419,9 @@ var NativeComponents = (function (exports) {
11417
11419
  ...configs
11418
11420
  });
11419
11421
 
11420
- this.$currentPage = Observable(1);
11421
- this.$selectedRows = Observable.array();
11422
- this.$expandedRows = Observable.array();
11422
+ this.$currentPage = Observable$1(1);
11423
+ this.$selectedRows = Observable$1.array();
11424
+ this.$expandedRows = Observable$1.array();
11423
11425
  }
11424
11426
 
11425
11427
  DataTable.defaultToolbarTemplate = null;