Bump intl-tel-input from 19.5.6 to 23.0.10

README.md

@@ -20,22 +20,22 @@ Wordpress plugin for entering and validating international telephone numbers bas
 <img width="600" alt="IP Lookup" src="https://user-images.githubusercontent.com/46939084/204006934-5ac1d6df-848f-436d-82ac-dd0e62f67b03.png">
 
 Change default country depends on user IP
-* **Show Selected Dial Code**
+* **Separate Dial Code**
 
-<img alt="Show Selected Dial Code" width="257" height="46" src="https://camo.githubusercontent.com/0d223e231ced86183d286196d3cab6e411f677f6695efa625dabdd44d0b4f65e/68747470733a2f2f7261772e6769746875622e636f6d2f6a61636b6f636e722f696e746c2d74656c2d696e7075742f6d61737465722f73637265656e73686f74732f73657061726174654469616c436f64652e706e67">
+<img alt="Separate Dial Code" width="257" height="46" src="TODO">
 
-Display the country dial code next to the selected flag. Play with this option on [Storybook](https://intl-tel-input.com/storybook/?path=/docs/intltelinput--showselecteddialcode) (using the React component).
+Display the country dial code next to the selected flag. Play with this option on [Storybook](https://intl-tel-input.com/storybook/?path=/docs/intltelinput--separateDialCode) (using the React component).
 
 * **Default Country**
 
 <img width="600" alt="Default Country" src="https://user-images.githubusercontent.com/46939084/204008019-65500e12-06ae-4503-b0a5-a42a0fbc78ed.png">
 
 Country in the input by default
-* **Preferred Countries**
+* **Country Order**
 
-<img width="600" alt="Preferred Countries" src="https://user-images.githubusercontent.com/46939084/204008199-69d512ee-2652-4375-8302-6ca3c4940a2d.png">
+<img width="600" alt="Country Order" src="TODO">
 
-Specify the countries to appear at the top of the list.
+Specify the ordering for the country list with an array of iso2 country codes. Any ommitted countries will appear after those specified
 * **Only Countries**
 
 <img width="600" alt="Only Countries" src="https://user-images.githubusercontent.com/46939084/204008692-8ee05c63-5743-4386-8027-4dd4460f22ea.png">

admin/class-ninja-forms-spn-addon-admin.php

@@ -51,7 +51,6 @@ public function __construct( $plugin_name, $version ) {
 
 		$this->plugin_name = $plugin_name;
 		$this->version     = $version;
-
 	}
 
 	/**
@@ -73,8 +72,7 @@ public function enqueue_styles() {
 		 * class.
 		 */
 
-		wp_enqueue_style( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'css/ninja-forms-spn-addon-admin.css', array(), $this->version, 'all' );
-
+		wp_enqueue_style( $this->plugin_name, plugin_dir_url( __DIR__ ) . 'dist/admin/ninja-forms-spn-addon-admin.min.css', array(), $this->version, 'all' );
 	}
 
 	/**
@@ -96,9 +94,8 @@ public function enqueue_scripts() {
 		 * class.
 		 */
 
-		wp_enqueue_script( $this->plugin_name . '-vendors', plugin_dir_url( dirname( __FILE__ ) ) . 'dist/admin/spn-back-vendors.min.js', array(), $this->version, true );
-		wp_enqueue_script( $this->plugin_name, plugin_dir_url( dirname( __FILE__ ) ) . 'dist/admin/spn-back-main.min.js', array( $this->plugin_name . '-vendors' ), $this->version, true );
-
+		wp_enqueue_script( $this->plugin_name . '-vendors', plugin_dir_url( __DIR__ ) . 'dist/admin/spn-back-vendors.min.js', array(), $this->version, true );
+		wp_enqueue_script( $this->plugin_name, plugin_dir_url( __DIR__ ) . 'dist/admin/spn-back-main.min.js', array( $this->plugin_name . '-vendors' ), $this->version, true );
 	}
 
 	/**
@@ -108,12 +105,10 @@ public function enqueue_scripts() {
 	 */
 	public function register_fields( $actions ) {
 
-		require_once plugin_dir_path( dirname( __FILE__ ) ) . 'admin/ninja-forms-fields/class-spn-field.php';
+		require_once plugin_dir_path( __DIR__ ) . 'admin/ninja-forms-fields/class-spn-field.php';
 
 		$actions['spn'] = new SPN_Field();
 
 		return $actions;
-
 	}
-
 }

admin/js/modules/Abstract/AdminField.js

@@ -4,8 +4,6 @@
  * @class AdminField
  */
 
-import { propDisabled, propSelected } from '../../utils.js'
-
 const $ = jQuery
 
 export class AdminField {
@@ -29,33 +27,6 @@ export class AdminField {
     }
   }
 
-  /**
-   * Get Admin Field as Node by checking body updates
-   *
-   * @return {Node}
-   */
-  findField () {
-    if (!$(this.fieldSelector).length) {
-      const target = document.body
-      const config = {
-        childList: true
-      }
-
-      // Create an observer instance.
-      const observer = new MutationObserver((mutationList, _observer) => {
-        if ($(this.fieldSelector).length) {
-          this.$field = $(this.fieldSelector)
-          _observer.disconnect()
-        }
-      })
-
-      // Pass in the target node, as well as the observer config.
-      observer.observe(target, config)
-    }
-
-    return $(this.fieldSelector)
-  }
-
   /**
    * Handle Field On Change
    *
@@ -70,118 +41,27 @@ export class AdminField {
   }
 
   /**
-   * Set Field Value
-   *
-   * @param {array} optionValueSelector - Array of values 'All', 'European', 'dz' (ISO 2 Code)
-   * @param {Boolean} value - True or False
+   * 
+   * @param {Function} callback 
    */
-  setFieldValue (optionValueSelector, value) {
-    if (!Array.isArray(optionValueSelector)) {
-      optionValueSelector = [optionValueSelector]
+  onSettingsInit( callback ) {
+    const target = document.getElementById('nf-drawer')
+    const config = {
+      childList: true,
+      subtree: true
     }
 
-    if (value !== true || value !== false) {
-      throw new Error('setFieldValue: wrong value, should be boolean')
-    }
+    // Create an observer instance.
+    const observer = new MutationObserver((mutationList, _observer) => {
+      if ($(this.fieldSelector).length) {
+        const fieldElement = $(this.fieldSelector)[0]
 
-    optionValueSelector.forEach(_optionValueSelector => {
-      // Handle data
-      _optionValueSelector = _optionValueSelector.toLowerCase()
-      const optionSelector = `${this.fieldSelector} option[value="${_optionValueSelector}"]`
+        callback( fieldElement )
 
-      if ($(optionSelector).length) {
-        propSelected(optionSelector, value)
-      } else {
-        throw new Error(this.getErrorOptionNotFound())
+        _observer.disconnect()
       }
     })
-  }
-
-  /**
-   * Get <option> tags from field by status
-   * You can choose return type
-   *
-   * @param {Enum} type - 'all', 'active', 'unactive', 'selected', 'unselected'
-   * @param {Enum} returnType - 'node' (HTML Elements), 'value'
-   * @return {Array<Nodes>} - HTML Nodes inside field
-   */
-  getOptions (type = 'all', returnType = 'node') {
-    switch (type) {
-      case 'all':
-        return [...this.$field?.find('option')].map(($option) => {
-          return getValueByType($option)
-        })
-      case 'active':
-        return [...this.$field?.find('option:not([disabled="disabled"])')].map(($option) => {
-          return getValueByType($option)
-        })
-      case 'unactive':
-        return [...this.$field?.find('option[disabled="disabled"]')].map(($option) => {
-          return getValueByType($option)
-        })
-      case 'selected':
-        return [...this.$field?.find('option:checked')].map(($option) => {
-          return getValueByType($option)
-        })
-      case 'unselected':
-        return [...this.$field?.find('option:not(:checked)')].map(($option) => {
-          return getValueByType($option)
-        })
-      default:
-        throw new Error('getOptions: type is wrong!')
-    }
 
-    /**
-     * Get Option Value By Return Type argument
-     *
-     * @param {Node} $option
-     * @return {Node|string}
-     */
-    function getValueByType ($option) {
-      switch (returnType) {
-        case 'node':
-          return $($option)
-        case 'value':
-          return $($option).val()
-        default:
-          throw new Error('getOptions: returnType is wrong!')
-      }
-    }
-  }
-
-  /**
-   * Disable options inside field by selector
-   * It sets attribute 'disabled="disabled"' or removes it
-   *
-   * @param {Array<String>|string} optionValueSelector
-   * @param {Boolean} value
-   */
-  disableOptions (optionValueSelector, value) {
-    if (!Array.isArray(optionValueSelector)) {
-      optionValueSelector = [optionValueSelector]
-    }
-
-    if (value !== true || value !== false) {
-      throw new Error('disableOptions: wrong value, should be boolean')
-    }
-
-    optionValueSelector.forEach(_optionValueSelector => {
-      // Handle data
-      _optionValueSelector = _optionValueSelector.toLowerCase()
-      const optionSelector = `${this.fieldSelector} option[value="${_optionValueSelector}"]`
-
-      if ($(optionSelector).length) {
-        propDisabled(optionSelector, value)
-      } else {
-        throw new Error(this.getErrorOptionNotFound())
-      }
-    })
-  }
-
-  /**
-   * Error Message if option inside field was not found
-   */
-  getErrorOptionNotFound () {
-    throw new Error('getErrorOptionNotFound should be implemented!')
+    observer.observe(target, config)
   }
 }

admin/js/modules/Abstract/AdminSelectField.js

@@ -0,0 +1,141 @@
+/**
+ * Abstract Class
+ *
+ * @class AdminField
+ */
+
+import { propDisabled, propSelected } from '../../utils.js'
+import { AdminField } from './AdminField.js'
+
+const $ = jQuery
+
+export class AdminSelectField extends AdminField {
+  /**
+   * Constructor
+   *
+   * @param {string} fieldSelector
+   */
+  constructor (fieldSelector) {
+    super(fieldSelector)
+
+    if (this.constructor === AdminSelectField) {
+      throw new Error('Object of Abstract Class cannot be created')
+    }
+  }
+
+  /**
+   * Set Field Value
+   *
+   * @param {array} optionValueSelector - Array of values 'All', 'European', 'dz' (ISO 2 Code)
+   * @param {Boolean} value - True or False
+   */
+  setFieldValue (optionValueSelector, value) {
+    if (!Array.isArray(optionValueSelector)) {
+      optionValueSelector = [optionValueSelector]
+    }
+
+    if (value !== true || value !== false) {
+      throw new Error('setFieldValue: wrong value, should be boolean')
+    }
+
+    optionValueSelector.forEach(_optionValueSelector => {
+      // Handle data
+      _optionValueSelector = _optionValueSelector.toLowerCase()
+      const optionSelector = `${this.fieldSelector} option[value="${_optionValueSelector}"]`
+
+      if ($(optionSelector).length) {
+        propSelected(optionSelector, value)
+      } else {
+        throw new Error(this.getErrorOptionNotFound())
+      }
+    })
+  }
+
+  /**
+   * Get <option> tags from field by status
+   * You can choose return type
+   *
+   * @param {Enum} type - 'all', 'active', 'unactive', 'selected', 'unselected'
+   * @param {Enum} returnType - 'node' (HTML Elements), 'value'
+   * @return {Array<Nodes>} - HTML Nodes inside field
+   */
+  getOptions (type = 'all', returnType = 'node') {
+    switch (type) {
+      case 'all':
+        return [...this.$field?.find('option')].map(($option) => {
+          return getValueByType($option)
+        })
+      case 'active':
+        return [...this.$field?.find('option:not([disabled="disabled"])')].map(($option) => {
+          return getValueByType($option)
+        })
+      case 'unactive':
+        return [...this.$field?.find('option[disabled="disabled"]')].map(($option) => {
+          return getValueByType($option)
+        })
+      case 'selected':
+        return [...this.$field?.find('option:checked')].map(($option) => {
+          return getValueByType($option)
+        })
+      case 'unselected':
+        return [...this.$field?.find('option:not(:checked)')].map(($option) => {
+          return getValueByType($option)
+        })
+      default:
+        throw new Error('getOptions: type is wrong!')
+    }
+
+    /**
+     * Get Option Value By Return Type argument
+     *
+     * @param {Node} $option
+     * @return {Node|string}
+     */
+    function getValueByType ($option) {
+      switch (returnType) {
+        case 'node':
+          return $($option)
+        case 'value':
+          return $($option).val()
+        default:
+          throw new Error('getOptions: returnType is wrong!')
+      }
+    }
+  }
+
+  /**
+   * Disable options inside field by selector
+   * It sets attribute 'disabled="disabled"' or removes it
+   *
+   * @param {Array<String>|string} optionValueSelector
+   * @param {Boolean} value
+   */
+  disableOptions (optionValueSelector, value) {
+    if (!Array.isArray(optionValueSelector)) {
+      optionValueSelector = [optionValueSelector]
+    }
+
+    if (value !== true || value !== false) {
+      throw new Error('disableOptions: wrong value, should be boolean')
+    }
+
+    optionValueSelector.forEach(_optionValueSelector => {
+      // Handle data
+      _optionValueSelector = _optionValueSelector.toLowerCase()
+      const optionSelector = `${this.fieldSelector} option[value="${_optionValueSelector}"]`
+
+      if ($(optionSelector).length) {
+        propDisabled(optionSelector, value)
+      } else {
+        throw new Error(this.getErrorOptionNotFound())
+      }
+    })
+  }
+
+  /**
+   * Error Message if option inside field was not found
+   */
+  getErrorOptionNotFound () {
+    throw new Error('getErrorOptionNotFound should be implemented!')
+  }
+}