Extract Component config functionality to a separate class (#33872)

Co-authored-by: XhmikosR <xhmikosr@gmail.com>

js/src/base-component.js

@@ -6,11 +6,9 @@
  */
 
 import Data from './dom/data'
-import {
-  executeAfterTransition,
-  getElement
-} from './util/index'
+import { executeAfterTransition, getElement } from './util/index'
 import EventHandler from './dom/event-handler'
+import Config from './util/config'
 
 /**
  * Constants
@@ -22,15 +20,18 @@ const VERSION = '5.1.3'
  * Class definition
  */
 
-class BaseComponent {
-  constructor(element) {
-    element = getElement(element)
+class BaseComponent extends Config {
+  constructor(element, config) {
+    super()
 
+    element = getElement(element)
     if (!element) {
       return
     }
 
     this._element = element
+    this._config = this._getConfig(config)
+
     Data.set(this._element, this.constructor.DATA_KEY, this)
   }
 
@@ -48,6 +49,13 @@ class BaseComponent {
     executeAfterTransition(callback, element, isAnimated)
   }
 
+  _getConfig(config) {
+    config = this._mergeConfigObj(config, this._element)
+    config = this._configAfterMerge(config)
+    this._typeCheckConfig(config)
+    return config
+  }
+
   // Static
   static getInstance(element) {
     return Data.get(getElement(element), this.DATA_KEY)
@@ -61,10 +69,6 @@ class BaseComponent {
     return VERSION
   }
 
-  static get NAME() {
-    throw new Error('You have to implement the static method "NAME" for each component!')
-  }
-
   static get DATA_KEY() {
     return `bs.${this.NAME}`
   }