native-document 1.0.133 → 1.0.135

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

@@ -21,7 +21,8 @@ var NativeComponents = (function (exports) {
 
 
     BaseComponent.extends = function(Component, ...parents) {
-        Component.prototype = Object.create(BaseComponent.prototype);
+        const MainParent = parents[0] || BaseComponent;
+        Component.prototype = Object.create(MainParent.prototype);
 
         if(parents.length > 0) {
             for(const parent of parents) {
@@ -31,6 +32,14 @@ var NativeComponents = (function (exports) {
         Component.prototype.constructor = Component;
     };
 
+    BaseComponent.use = function(Component, ...traits) {
+        if(traits.length > 0) {
+            for(const trait of traits) {
+                Object.assign(Component.prototype, trait.prototype);
+            }
+        }
+    };
+
     BaseComponent.obs = (value) => {
         return value.__$Observable ? value : Observable(value);
     };
@@ -79,22 +88,13 @@ var NativeComponents = (function (exports) {
         return this;
     };
 
-    class NativeDocumentError extends Error {
-        constructor(message, context = {}) {
-            super(message);
-            this.name = 'NativeDocumentError';
-            this.context = context;
-            this.timestamp = new Date().toISOString();
-        }
-    }
-
-    function EventEmitter() {
+    function HasEventEmitter() {
 
         this.__$events = null;
 
     }
 
-    EventEmitter.prototype.on = function(eventName, callback) {
+    HasEventEmitter.prototype.on = function(eventName, callback) {
         if(!this.__$events) {
             this.__$events = new Map();
         }
@@ -110,11 +110,11 @@ var NativeComponents = (function (exports) {
         existingCallback.push(callback);
     };
 
-    EventEmitter.prototype.hasListeners = function(eventName) {
+    HasEventEmitter.prototype.hasListeners = function(eventName) {
         return !!this.__$events.get(eventName);
     };
 
-    EventEmitter.prototype.trigger = async function(eventName, ...args) {
+    HasEventEmitter.prototype.trigger = async function(eventName, ...args) {
         const callbacks = this.__$events.get(eventName);
         if(!callbacks) {
             // throw new NativeDocumentError(this.constructor.name, 'Event '+eventName+' not found');
@@ -131,7 +131,7 @@ var NativeComponents = (function (exports) {
         }
         return result;
     };
-    EventEmitter.prototype.emit = EventEmitter.prototype.trigger;
+    HasEventEmitter.prototype.emit = HasEventEmitter.prototype.trigger;
 
     /**
      * Valid children types that can be rendered in the DOM
@@ -158,7 +158,7 @@ var NativeComponents = (function (exports) {
         };
     }
 
-    BaseComponent.extends(Accordion, EventEmitter);
+    BaseComponent.extends(Accordion, HasEventEmitter);
 
     Accordion.defaultTemplate = null;
 
@@ -378,6 +378,15 @@ var NativeComponents = (function (exports) {
     }
     var DebugManager$1 = DebugManager$2;
 
+    class NativeDocumentError extends Error {
+        constructor(message, context = {}) {
+            super(message);
+            this.name = 'NativeDocumentError';
+            this.context = context;
+            this.timestamp = new Date().toISOString();
+        }
+    }
+
     /**
      *
      * @param {ObservableItem} $observable
@@ -4614,7 +4623,7 @@ var NativeComponents = (function (exports) {
         Alert.defaultContentTemplate = template.alertContent;
     };
 
-    BaseComponent.extends(Alert, EventEmitter);
+    BaseComponent.extends(Alert, HasEventEmitter);
 
     /**
      * Sets the variant style for the alert
@@ -5623,7 +5632,7 @@ var NativeComponents = (function (exports) {
         };
     }
 
-    BaseComponent.extends(Breadcrumb, EventEmitter);
+    BaseComponent.extends(Breadcrumb, HasEventEmitter);
 
     Breadcrumb.use = function(template) {};
     Breadcrumb.defaultTemplate = null;
@@ -5896,7 +5905,8 @@ var NativeComponents = (function (exports) {
         MenuGroup.defaultTemplate = template.menuGroup;
     };
 
-    BaseComponent.extends(MenuGroup, HasItems);
+    BaseComponent.extends(MenuGroup);
+    BaseComponent.use(MenuGroup, HasItems);
 
     MenuGroup.prototype.data = function(data) {
         this.$description.data = data;
@@ -5942,7 +5952,8 @@ var NativeComponents = (function (exports) {
         MenuItem.defaultTemplate = template.menuItem;
     };
 
-    BaseComponent.extends(MenuItem, HasItems);
+    BaseComponent.extends(MenuItem);
+    BaseComponent.use(MenuItem, HasItems);
 
 
     MenuItem.prototype.label = function(label) {
@@ -6040,7 +6051,8 @@ var NativeComponents = (function (exports) {
 
     }
 
-    BaseComponent.extends(Menu, HasItems, EventEmitter);
+    BaseComponent.extends(Menu);
+    BaseComponent.use(Menu, HasItems, HasEventEmitter);
 
     Menu.defaultTemplate = null;
 
@@ -6611,7 +6623,7 @@ var NativeComponents = (function (exports) {
         this.$element = null;
     }
 
-    BaseComponent.extends(Dropdown, EventEmitter);
+    BaseComponent.extends(Dropdown, HasEventEmitter);
 
 
     Dropdown.defaultTemplate = null;
@@ -7644,7 +7656,7 @@ var NativeComponents = (function (exports) {
         if(!(this instanceof FormControl)) {
             return new FormControl(configs);
         }
-        EventEmitter.call(this);
+        HasEventEmitter.call(this);
 
         this.$element = null;
         this.$configs = configs;
@@ -7665,7 +7677,7 @@ var NativeComponents = (function (exports) {
         return new FormControl(configs);
     };
 
-    BaseComponent.extends(FormControl, EventEmitter);
+    BaseComponent.extends(FormControl, HasEventEmitter);
 
     Object.defineProperty(FormControl.prototype, 'isDirty', {
         get() { return this.$isDirty; }
@@ -9350,7 +9362,8 @@ var NativeComponents = (function (exports) {
         List.defaultTemplate = template.list;
     };
 
-    BaseComponent.extends(List, HasItems, EventEmitter);
+    BaseComponent.extends(List);
+    BaseComponent.use(List, HasItems, HasEventEmitter);
 
     List.defaultTemplate = null;
 
@@ -9543,7 +9556,8 @@ var NativeComponents = (function (exports) {
         };
     }
 
-    BaseComponent.extends(ListGroup, HasItems);
+    BaseComponent.extends(ListGroup);
+    BaseComponent.use(ListGroup, HasItems);
 
     ListGroup.defaultTemplate = null;
 
@@ -9610,7 +9624,7 @@ var NativeComponents = (function (exports) {
         };
     }
 
-    BaseComponent.extends(Modal, EventEmitter);
+    BaseComponent.extends(Modal, HasEventEmitter);
 
     // Theming
     Modal.defaultLayout = null;
@@ -9770,7 +9784,7 @@ var NativeComponents = (function (exports) {
         this.$element = null;
     }
 
-    BaseComponent.extends(Pagination, EventEmitter);
+    BaseComponent.extends(Pagination, HasEventEmitter);
 
     Pagination.defaultTemplate = null;
 
@@ -10001,7 +10015,7 @@ var NativeComponents = (function (exports) {
         }
     }
 
-    BaseComponent.extends(Popover, EventEmitter);
+    BaseComponent.extends(Popover, HasEventEmitter);
 
     Popover.defaultTemplate = null;
 
@@ -10255,7 +10269,7 @@ var NativeComponents = (function (exports) {
         };
     }
 
-    BaseComponent.extends(Progress, EventEmitter);
+    BaseComponent.extends(Progress, HasEventEmitter);
 
     Progress.defaultTemplate = null;
 
@@ -10634,7 +10648,7 @@ var NativeComponents = (function (exports) {
         };
     }
 
-    BaseComponent.extends(Slider, EventEmitter);
+    BaseComponent.extends(Slider, HasEventEmitter);
 
     Slider.use = function(template) {};
     Slider.defaultTemplate = null;
@@ -10783,9 +10797,9 @@ var NativeComponents = (function (exports) {
         return this.$build();
     };
 
-    function Spinner$1(props = {}) {
-        if (!(this instanceof Spinner$1)) {
-            return new Spinner$1(props);
+    function Spinner(props = {}) {
+        if (!(this instanceof Spinner)) {
+            return new Spinner(props);
         }
 
         this.$description = {
@@ -10804,43 +10818,45 @@ var NativeComponents = (function (exports) {
         };
     }
 
-    Spinner$1.defaultTemplate = null;
-    Spinner$1.use = function(template) {
-        Spinner$1.defaultTemplate = template.spinner;
+    Spinner.defaultTemplate = null;
+    Spinner.use = function(template) {
+        Spinner.defaultTemplate = template.spinner;
     };
 
-    Spinner$1.preset = function(name, callback) {
-        if (Spinner$1.prototype[name] || Spinner$1[name]) {
+    BaseComponent.extends(Spinner);
+
+    Spinner.preset = function(name, callback) {
+        if (Spinner.prototype[name] || Spinner[name]) {
             DebugManager$1.warn(`Warning: the ${name} method already exists in Spinner.`);
             return;
         }
-        Spinner$1[name] = (props) => callback(new Spinner$1(props));
+        Spinner[name] = (props) => callback(new Spinner(props));
     };
 
-    Spinner$1.presets = function(presets) {
+    Spinner.presets = function(presets) {
         for (const name in presets) {
-            Spinner$1.preset(name, presets[name]);
+            Spinner.preset(name, presets[name]);
         }
     };
 
-    Spinner$1.prototype.type = function(type) {
+    Spinner.prototype.type = function(type) {
         this.$description.type = type;
         return this;
     };
 
-    Spinner$1.prototype.circle = function() {
+    Spinner.prototype.circle = function() {
         return this.type('circle');
     };
-    Spinner$1.prototype.dots = function() {
+    Spinner.prototype.dots = function() {
         return this.type('dots');
     };
-    Spinner$1.prototype.bars = function() {
+    Spinner.prototype.bars = function() {
         return this.type('bars');
     };
-    Spinner$1.prototype.pulse = function() {
+    Spinner.prototype.pulse = function() {
         return this.type('pulse');
     };
-    Spinner$1.prototype.ring = function() {
+    Spinner.prototype.ring = function() {
         return this.type('ring');
     };
 
@@ -10848,79 +10864,79 @@ var NativeComponents = (function (exports) {
      * @param {string|int} size
      * @returns {Spinner}
      */
-    Spinner$1.prototype.size = function(size) {
+    Spinner.prototype.size = function(size) {
         this.$description.size = size;
         return this;
     };
-    Spinner$1.prototype.extraSmall = function() {
+    Spinner.prototype.extraSmall = function() {
         return this.size('extra-small');
     };
-    Spinner$1.prototype.small = function() {
+    Spinner.prototype.small = function() {
         return this.size('small');
     };
-    Spinner$1.prototype.medium = function() {
+    Spinner.prototype.medium = function() {
         return this.size('medium');
     };
-    Spinner$1.prototype.large = function() {
+    Spinner.prototype.large = function() {
         return this.size('large');
     };
-    Spinner$1.prototype.extraLarge = function() {
+    Spinner.prototype.extraLarge = function() {
         return this.size('extra-large');
     };
 
-    Spinner$1.prototype.variant = function(name) {
+    Spinner.prototype.variant = function(name) {
         this.$description.variant = name;
         return this;
     };
-    Spinner$1.prototype.primary = function() {
+    Spinner.prototype.primary = function() {
         return this.variant('primary');
     };
-    Spinner$1.prototype.secondary = function() {
+    Spinner.prototype.secondary = function() {
         return this.variant('secondary');
     };
-    Spinner$1.prototype.success = function() {
+    Spinner.prototype.success = function() {
         return this.variant('success');
     };
-    Spinner$1.prototype.danger = function() {
+    Spinner.prototype.danger = function() {
         return this.variant('danger');
     };
-    Spinner$1.prototype.warning = function() {
+    Spinner.prototype.warning = function() {
         return this.variant('warning');
     };
-    Spinner$1.prototype.color = function(color) {
+    Spinner.prototype.color = function(color) {
         this.$description.color = color;
         return this;
     };
 
-    Spinner$1.prototype.label = function(label) {
+    Spinner.prototype.label = function(label) {
         this.$description.label = label;
         return this;
     };
-    Spinner$1.prototype.labelPosition = function(position) {
+    Spinner.prototype.labelPosition = function(position) {
         this.$description.labelPosition = position;
         return this;
     };
-    Spinner$1.prototype.labelAtTop = function() {
+    Spinner.prototype.labelAtTop = function() {
         return this.labelPosition('top');
     };
-    Spinner$1.prototype.labelAtBottom = function() {
+    Spinner.prototype.labelAtBottom = function() {
         return this.labelPosition('bottom');
     };
-    Spinner$1.prototype.labelAtLeft = function() {
+    Spinner.prototype.labelAtLeft = function() {
         return this.labelPosition('left');
     };
-    Spinner$1.prototype.labelAtRight = function() {
+    Spinner.prototype.labelAtRight = function() {
         return this.labelPosition('right');
     };
 
-    Spinner$1.prototype.overlay = function(enabled = true) {
+    Spinner.prototype.overlay = function(enabled = true) {
         this.$description.overlay = enabled;
         return this;
     };
-    Spinner$1.prototype.fullscreen = function() {
+    Spinner.prototype.fullscreen = function() {
         return this.overlay(true);
     };
-    Spinner$1.prototype.backdrop = function(enabled = true) {
+    Spinner.prototype.backdrop = function(enabled = true) {
         this.$description.backdrop = enabled;
         return this;
     };
@@ -10930,29 +10946,29 @@ var NativeComponents = (function (exports) {
      * @param {string|int} speed
      * @returns {Spinner}
      */
-    Spinner$1.prototype.speed = function(speed) {
+    Spinner.prototype.speed = function(speed) {
         this.$description.speed = speed;
         return this;
     };
-    Spinner$1.prototype.slow = function() {
+    Spinner.prototype.slow = function() {
         return this.speed('slow');
     };
-    Spinner$1.prototype.normal = function() {
+    Spinner.prototype.normal = function() {
         return this.speed('normal');
     };
-    Spinner$1.prototype.fast = function() {
+    Spinner.prototype.fast = function() {
         return this.speed('fast');
     };
-    Spinner$1.prototype.loading = function(isLoading) {
+    Spinner.prototype.loading = function(isLoading) {
         this.$description.loading = BaseComponent.obs(isLoading);
         return this;
     };
-    Spinner$1.prototype.bind = Spinner$1.prototype.loading;
+    Spinner.prototype.bind = Spinner.prototype.loading;
 
-    Spinner$1.prototype.show = function() {
+    Spinner.prototype.show = function() {
         this.$description.loading?.set(true);
     };
-    Spinner$1.prototype.hide = function() {
+    Spinner.prototype.hide = function() {
         this.$description.loading?.set(false);
     };
 
@@ -10972,7 +10988,7 @@ var NativeComponents = (function (exports) {
         this.$element = null;
     }
 
-    BaseComponent.extends(Splitter, EventEmitter);
+    BaseComponent.extends(Splitter, HasEventEmitter);
 
     Splitter.defaultTemplate = null;
 
@@ -11153,7 +11169,7 @@ var NativeComponents = (function (exports) {
         this.$element = null;
     }
 
-    BaseComponent.extends(Stepper, EventEmitter);
+    BaseComponent.extends(Stepper, HasEventEmitter);
 
     Stepper.defaultTemplate = null;
     Stepper.defaultStepTemplate = null;
@@ -11998,7 +12014,7 @@ var NativeComponents = (function (exports) {
         this.tabsMap = {};
     }
 
-    BaseComponent.extends(Tabs, EventEmitter);
+    BaseComponent.extends(Tabs, HasEventEmitter);
 
     Tabs.defaultTemplate = null;
     Tabs.defaultTabTemplate = null;
@@ -12112,7 +12128,7 @@ var NativeComponents = (function (exports) {
         };
     }
 
-    BaseComponent.extends(Toast, EventEmitter);
+    BaseComponent.extends(Toast, HasEventEmitter);
 
     Toast.use = function(template) {};
     Toast.defaultTemplate = null;
@@ -12336,6 +12352,7 @@ var NativeComponents = (function (exports) {
 
     BaseComponent.extends(Stack);
 
+
     Stack.prototype.wrap = function(enabled = true) {
         this.$description.wrap = enabled;
         return this;
@@ -12390,13 +12407,16 @@ var NativeComponents = (function (exports) {
     };
 
     function VStack(content, props = {}) {
-        if (!(this instanceof VStack)) return new VStack(content, props);
+        if (!(this instanceof VStack)) {
+            return new VStack(content, props);
+        }
 
         Stack.call(this, content, props);
+
         this.$description.orientation = 'vertical';
         this.$description.alignment = 'leading';
     }
-    BaseComponent.extends(VStack);
+    BaseComponent.extends(VStack, Stack);
 
     VStack.preset = function(name, callback) {
         if (VStack.prototype[name] || VStack[name]) {
@@ -12455,7 +12475,7 @@ var NativeComponents = (function (exports) {
         this.$description.orientation = 'horizontal';
     }
 
-    BaseComponent.extends(HStack);
+    BaseComponent.extends(HStack,  Stack);
 
     HStack.preset = function(name, callback) {
         if (HStack.prototype[name] || HStack[name]) {
@@ -12528,7 +12548,7 @@ var NativeComponents = (function (exports) {
     exports.SimpleTable = SimpleTable;
     exports.Skeleton = Skeleton;
     exports.Slider = Slider;
-    exports.Spinner = Spinner$1;
+    exports.Spinner = Spinner;
     exports.Splitter = Splitter;
     exports.SplitterPanel = SplitterPanel;
     exports.Stack = Stack;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "native-document",
-  "version": "1.0.133",
+  "version": "1.0.135",
   "main": "index.js",
   "type": "module",
   "scripts": {

package/src/components/BaseComponent.js

@@ -18,7 +18,8 @@ Object.defineProperty( BaseComponent.prototype, 'nd', {
 
 
 BaseComponent.extends = function(Component, ...parents) {
-    Component.prototype = Object.create(BaseComponent.prototype);
+    const MainParent = parents[0] || BaseComponent;
+    Component.prototype = Object.create(MainParent.prototype);
 
     if(parents.length > 0) {
         for(const parent of parents) {
@@ -28,6 +29,14 @@ BaseComponent.extends = function(Component, ...parents) {
     Component.prototype.constructor = Component;
 };
 
+BaseComponent.use = function(Component, ...traits) {
+    if(traits.length > 0) {
+        for(const trait of traits) {
+            Object.assign(Component.prototype, trait.prototype);
+        }
+    }
+};
+
 BaseComponent.obs = (value) => {
     return value.__$Observable ? value : Observable(value);
 };

package/src/components/accordion/Accordion.js

@@ -1,5 +1,5 @@
 import BaseComponent from "../BaseComponent";
-import EventEmitter from "../../../src/core/utils/EventEmitter";
+import HasEventEmitter from "../../core/utils/HasEventEmitter";
 
 
 /**
@@ -27,7 +27,7 @@ export default function Accordion(config = {}) {
     };
 }
 
-BaseComponent.extends(Accordion, EventEmitter);
+BaseComponent.extends(Accordion, HasEventEmitter);
 
 Accordion.defaultTemplate = null;
 

package/src/components/alert/Alert.js

@@ -1,5 +1,5 @@
 import BaseComponent from "../BaseComponent";
-import EventEmitter from "../../../src/core/utils/EventEmitter";
+import HasEventEmitter from "../../core/utils/HasEventEmitter";
 
 /**
  * Component for displaying alert messages with various styles and variants
@@ -41,7 +41,7 @@ Alert.use = function(template) {
     Alert.defaultContentTemplate = template.alertContent;
 };
 
-BaseComponent.extends(Alert, EventEmitter);
+BaseComponent.extends(Alert, HasEventEmitter);
 
 /**
  * Sets the variant style for the alert

package/src/components/breadcrumb/BreadCrumb.js

@@ -1,5 +1,5 @@
 import BaseComponent from "../BaseComponent";
-import EventEmitter from "../../../src/core/utils/EventEmitter";
+import HasEventEmitter from "../../core/utils/HasEventEmitter";
 
 export default function Breadcrumb(config = {}) {
     if (!(this instanceof Breadcrumb)) {
@@ -15,7 +15,7 @@ export default function Breadcrumb(config = {}) {
     };
 }
 
-BaseComponent.extends(Breadcrumb, EventEmitter);
+BaseComponent.extends(Breadcrumb, HasEventEmitter);
 
 Breadcrumb.use = function(template) {};
 Breadcrumb.defaultTemplate = null;

package/src/components/dropdown/Dropdown.js

@@ -1,5 +1,5 @@
 import BaseComponent from "../BaseComponent";
-import EventEmitter from "../../../src/core/utils/EventEmitter";
+import HasEventEmitter from "../../core/utils/HasEventEmitter";
 import DropdownGroup from "./DropdownGroup";
 import DropdownTrigger from "./DropdownTrigger";
 import DropdownDivider from "./DropdownDivider";
@@ -35,7 +35,7 @@ export default function Dropdown(config = {}) {
     this.$element = null;
 }
 
-BaseComponent.extends(Dropdown, EventEmitter);
+BaseComponent.extends(Dropdown, HasEventEmitter);
 
 
 Dropdown.defaultTemplate = null;

package/src/components/form/FormControl.js

@@ -1,5 +1,5 @@
 import {debounce} from "../../core/utils/helpers";
-import EventEmitter from "../../../src/core/utils/EventEmitter";
+import HasEventEmitter from "../../core/utils/HasEventEmitter";
 import {Validator, Observable as $ } from "../../../index";
 import NativeDocumentError from "../../../src/core/errors/NativeDocumentError";
 import BaseComponent from "../BaseComponent";
@@ -12,7 +12,7 @@ export default function FormControl(configs) {
     if(!(this instanceof FormControl)) {
         return new FormControl(configs);
     }
-    EventEmitter.call(this);
+    HasEventEmitter.call(this);
 
     this.$element = null;
     this.$configs = configs;
@@ -33,7 +33,7 @@ FormControl.create = function (configs) {
     return new FormControl(configs);
 };
 
-BaseComponent.extends(FormControl, EventEmitter);
+BaseComponent.extends(FormControl, HasEventEmitter);
 
 Object.defineProperty(FormControl.prototype, 'isDirty', {
     get() { return this.$isDirty; }

package/src/components/layouts/HStack.js

@@ -11,7 +11,7 @@ export default function HStack(content, props = {}) {
     this.$description.orientation = 'horizontal';
 }
 
-BaseComponent.extends(HStack);
+BaseComponent.extends(HStack,  Stack);
 
 HStack.preset = function(name, callback) {
     if (HStack.prototype[name] || HStack[name]) {

package/src/components/layouts/Stack.js

@@ -21,6 +21,7 @@ export default function Stack(content, props = {}) {
 
 BaseComponent.extends(Stack);
 
+
 Stack.prototype.wrap = function(enabled = true) {
     this.$description.wrap = enabled;
     return this;

package/src/components/layouts/VStack.js

@@ -4,13 +4,16 @@ import BaseComponent from "../BaseComponent";
 
 
 export default function VStack(content, props = {}) {
-    if (!(this instanceof VStack)) return new VStack(content, props);
+    if (!(this instanceof VStack)) {
+        return new VStack(content, props);
+    }
 
     Stack.call(this, content, props);
+
     this.$description.orientation = 'vertical';
     this.$description.alignment = 'leading';
 }
-BaseComponent.extends(VStack);
+BaseComponent.extends(VStack, Stack);
 
 VStack.preset = function(name, callback) {
     if (VStack.prototype[name] || VStack[name]) {

package/src/components/list/List.js

@@ -1,6 +1,6 @@
 
 import BaseComponent from "../BaseComponent";
-import EventEmitter from "../../../src/core/utils/EventEmitter";
+import HasEventEmitter from "../../core/utils/HasEventEmitter";
 import HasItems from "../$traits/HasItems";
 import Dropdown from "../dropdown/Dropdown";
 
@@ -31,7 +31,8 @@ List.use = function(template) {
     List.defaultTemplate = template.list;
 };
 
-BaseComponent.extends(List, HasItems, EventEmitter);
+BaseComponent.extends(List);
+BaseComponent.use(List, HasItems, HasEventEmitter);
 
 List.defaultTemplate = null;
 

package/src/components/list/ListGroup.js

@@ -19,7 +19,8 @@ export default function ListGroup(label, config = {}) {
     };
 }
 
-BaseComponent.extends(ListGroup, HasItems);
+BaseComponent.extends(ListGroup);
+BaseComponent.use(ListGroup, HasItems);
 
 ListGroup.defaultTemplate = null;
 

package/src/components/menu/Menu.js

@@ -1,5 +1,5 @@
 import BaseComponent from "../BaseComponent";
-import EventEmitter from "../../../src/core/utils/EventEmitter";
+import HasEventEmitter from "../../core/utils/HasEventEmitter";
 import HasItems from "../$traits/HasItems";
 import MenuDivider from "./MenuDivider";
 import MenuGroup from "./MenuGroup";
@@ -24,7 +24,8 @@ export default function Menu(props = {}) {
 
 }
 
-BaseComponent.extends(Menu, HasItems, EventEmitter);
+BaseComponent.extends(Menu);
+BaseComponent.use(Menu, HasItems, HasEventEmitter);
 
 Menu.defaultTemplate = null;
 

package/src/components/menu/MenuGroup.js

@@ -23,7 +23,8 @@ MenuGroup.use = function(template) {
     MenuGroup.defaultTemplate = template.menuGroup;
 };
 
-BaseComponent.extends(MenuGroup, HasItems);
+BaseComponent.extends(MenuGroup);
+BaseComponent.use(MenuGroup, HasItems);
 
 MenuGroup.prototype.data = function(data) {
     this.$description.data = data;

package/src/components/menu/MenuItem.js

@@ -32,7 +32,8 @@ MenuItem.use = function(template) {
     MenuItem.defaultTemplate = template.menuItem;
 };
 
-BaseComponent.extends(MenuItem, HasItems);
+BaseComponent.extends(MenuItem);
+BaseComponent.use(MenuItem, HasItems);
 
 
 MenuItem.prototype.label = function(label) {

package/src/components/modal/Modal.js

@@ -1,5 +1,5 @@
 import BaseComponent from "../BaseComponent";
-import EventEmitter from "../../../src/core/utils/EventEmitter";
+import HasEventEmitter from "../../core/utils/HasEventEmitter";
 
 
 export default function Modal(config = {}) {
@@ -22,7 +22,7 @@ export default function Modal(config = {}) {
     };
 }
 
-BaseComponent.extends(Modal, EventEmitter);
+BaseComponent.extends(Modal, HasEventEmitter);
 
 // Theming
 Modal.defaultLayout = null;

package/src/components/pagination/Pagination.js

@@ -1,5 +1,5 @@
 import BaseComponent from "../BaseComponent";
-import EventEmitter from "../../../src/core/utils/EventEmitter";
+import HasEventEmitter from "../../core/utils/HasEventEmitter";
 
 export default function Pagination(config = {}) {
     if(!(this instanceof Pagination)) {
@@ -31,7 +31,7 @@ export default function Pagination(config = {}) {
     this.$element = null;
 }
 
-BaseComponent.extends(Pagination, EventEmitter);
+BaseComponent.extends(Pagination, HasEventEmitter);
 
 Pagination.defaultTemplate = null;
 

package/src/components/popover/Popover.js

@@ -1,5 +1,5 @@
 import BaseComponent from "../BaseComponent";
-import EventEmitter from "../../../src/core/utils/EventEmitter";
+import HasEventEmitter from "../../core/utils/HasEventEmitter";
 
 export default function Popover(config = {}) {
     if (!(this instanceof Popover)) {
@@ -35,7 +35,7 @@ export default function Popover(config = {}) {
     }
 }
 
-BaseComponent.extends(Popover, EventEmitter);
+BaseComponent.extends(Popover, HasEventEmitter);
 
 Popover.defaultTemplate = null;
 

package/src/components/progress/Progress.js

@@ -1,5 +1,5 @@
 import BaseComponent from "../BaseComponent";
-import EventEmitter from "../../../src/core/utils/EventEmitter";
+import HasEventEmitter from "../../core/utils/HasEventEmitter";
 import {Validator} from "../../../index";
 import DebugManager from "../../core/utils/debug-manager";
 
@@ -30,7 +30,7 @@ export default function Progress(props = {}) {
     };
 }
 
-BaseComponent.extends(Progress, EventEmitter);
+BaseComponent.extends(Progress, HasEventEmitter);
 
 Progress.defaultTemplate = null;
 

package/src/components/slider/Slider.js

@@ -1,5 +1,5 @@
 import BaseComponent from "../BaseComponent";
-import EventEmitter from "../../../src/core/utils/EventEmitter";
+import HasEventEmitter from "../../core/utils/HasEventEmitter";
 
 export default function Slider(config = {}) {
     if (!(this instanceof Slider)) {
@@ -33,7 +33,7 @@ export default function Slider(config = {}) {
     };
 }
 
-BaseComponent.extends(Slider, EventEmitter);
+BaseComponent.extends(Slider, HasEventEmitter);
 
 Slider.use = function(template) {};
 Slider.defaultTemplate = null;

package/src/components/spinner/Spinner.js

@@ -27,6 +27,8 @@ Spinner.use = function(template) {
     Spinner.defaultTemplate = template.spinner;
 };
 
+BaseComponent.extends(Spinner);
+
 Spinner.preset = function(name, callback) {
     if (Spinner.prototype[name] || Spinner[name]) {
         DebugManager.warn(`Warning: the ${name} method already exists in Spinner.`);

package/src/components/splitter/Splitter.js

@@ -1,5 +1,5 @@
 import BaseComponent from "../BaseComponent";
-import EventEmitter from "../../../src/core/utils/EventEmitter";
+import HasEventEmitter from "../../core/utils/HasEventEmitter";
 import {Validator} from "../../../index";
 
 export default function Splitter(config = {}) {
@@ -18,7 +18,7 @@ export default function Splitter(config = {}) {
     this.$element = null;
 }
 
-BaseComponent.extends(Splitter, EventEmitter);
+BaseComponent.extends(Splitter, HasEventEmitter);
 
 Splitter.defaultTemplate = null;
 

package/src/components/stepper/Stepper.js

@@ -1,5 +1,5 @@
 import BaseComponent from "../BaseComponent";
-import EventEmitter from "../../../src/core/utils/EventEmitter";
+import HasEventEmitter from "../../core/utils/HasEventEmitter";
 import {$, Validator} from "../../../index";
 
 export default function Stepper(config = {}) {
@@ -27,7 +27,7 @@ export default function Stepper(config = {}) {
     this.$element = null;
 }
 
-BaseComponent.extends(Stepper, EventEmitter);
+BaseComponent.extends(Stepper, HasEventEmitter);
 
 Stepper.defaultTemplate = null;
 Stepper.defaultStepTemplate = null;

package/src/components/switch/Switch.js

@@ -1,5 +1,5 @@
 import BaseComponent from "../BaseComponent";
-import EventEmitter from "../../../src/core/utils/EventEmitter";
+import HasEventEmitter from "../../core/utils/HasEventEmitter";
 
 function Switch(config = {}) {
     if (!(this instanceof Switch)) {
@@ -11,7 +11,7 @@ function Switch(config = {}) {
     };
 }
 
-BaseComponent.extends(Switch, EventEmitter);
+BaseComponent.extends(Switch, HasEventEmitter);
 
 // Theming
 Switch.defaultTemplate = null;

package/src/components/tabs/Tabs.js

@@ -1,5 +1,5 @@
 import BaseComponent from "../BaseComponent";
-import EventEmitter from "../../../src/core/utils/EventEmitter";
+import HasEventEmitter from "../../core/utils/HasEventEmitter";
 
 
 export default function Tabs(config = {}) {
@@ -16,7 +16,7 @@ export default function Tabs(config = {}) {
     this.tabsMap = {};
 }
 
-BaseComponent.extends(Tabs, EventEmitter);
+BaseComponent.extends(Tabs, HasEventEmitter);
 
 Tabs.defaultTemplate = null;
 Tabs.defaultTabTemplate = null;

package/src/components/toast/Toast.js

@@ -1,5 +1,5 @@
 import BaseComponent from "../BaseComponent";
-import EventEmitter from "../../../src/core/utils/EventEmitter";
+import HasEventEmitter from "../../core/utils/HasEventEmitter";
 
 export default function Toast(message, config = {}) {
     if (!(this instanceof Toast)) {
@@ -22,7 +22,7 @@ export default function Toast(message, config = {}) {
     };
 }
 
-BaseComponent.extends(Toast, EventEmitter);
+BaseComponent.extends(Toast, HasEventEmitter);
 
 Toast.use = function(template) {};
 Toast.defaultTemplate = null;

package/src/core/utils/{EventEmitter.js → HasEventEmitter.js}

@@ -1,12 +1,11 @@
-import NativeDocumentError from "../errors/NativeDocumentError";
 
-export default function EventEmitter() {
+export default function HasEventEmitter() {
 
     this.__$events = null;
 
 }
 
-EventEmitter.prototype.on = function(eventName, callback) {
+HasEventEmitter.prototype.on = function(eventName, callback) {
     if(!this.__$events) {
         this.__$events = new Map();
     }
@@ -22,11 +21,11 @@ EventEmitter.prototype.on = function(eventName, callback) {
     existingCallback.push(callback);
 };
 
-EventEmitter.prototype.hasListeners = function(eventName) {
+HasEventEmitter.prototype.hasListeners = function(eventName) {
     return !!this.__$events.get(eventName);
 };
 
-EventEmitter.prototype.trigger = async function(eventName, ...args) {
+HasEventEmitter.prototype.trigger = async function(eventName, ...args) {
     const callbacks = this.__$events.get(eventName);
     if(!callbacks) {
         // throw new NativeDocumentError(this.constructor.name, 'Event '+eventName+' not found');
@@ -43,4 +42,4 @@ EventEmitter.prototype.trigger = async function(eventName, ...args) {
     }
     return result;
 };
-EventEmitter.prototype.emit = EventEmitter.prototype.trigger;
+HasEventEmitter.prototype.emit = HasEventEmitter.prototype.trigger;