adding files of assets

assets/js/custom/documentation/forms/bootstrap-maxlength.js

@@ -0,0 +1,97 @@
+"use strict";
+
+// Class definition
+var KTFormsMaxlengthDemos = function () {
+    // Private functions
+    var exampleBasic = function () {
+        // minimum setup
+        $('#kt_docs_maxlength_basic').maxlength({
+            warningClass: "badge badge-primary",
+            limitReachedClass: "badge badge-success"
+        });
+    }
+
+    var exampleThreshold = function () {
+        // Threshold setup
+        $('#kt_docs_maxlength_threshold').maxlength({
+            threshold: 20,
+            warningClass: "badge badge-primary",
+            limitReachedClass: "badge badge-success"
+        });
+    }
+
+    var exampleAlwaysShow = function () {
+        // Always show setup
+        $('#kt_docs_maxlength_always_show').maxlength({
+            alwaysShow: true,
+            threshold: 20,
+            warningClass: "badge badge-danger",
+            limitReachedClass: "badge badge-info"
+        });
+    }
+
+    var exampleCustomText = function () {
+        // Always show setup
+        $('#kt_docs_maxlength_custom_text').maxlength({
+            threshold: 20,
+            warningClass: "badge badge-danger",
+            limitReachedClass: "badge badge-success",
+            separator: ' of ',
+            preText: 'You have ',
+            postText: ' chars remaining.',
+            validate: true
+        });
+    }
+
+    var exampleTextarea = function () {
+        // Textarea setup
+        $('#kt_docs_maxlength_textarea').maxlength({
+            warningClass: "badge badge-primary",
+            limitReachedClass: "badge badge-success"
+        });
+    }
+
+    var examplePosition = function () {
+        // Position setup
+        $('#kt_docs_maxlength_position_top_left').maxlength({
+            placement: 'top-left',
+            warningClass: "badge badge-danger",
+            limitReachedClass: "badge badge-primary"
+        });
+
+        $('#kt_docs_maxlength_position_top_right').maxlength({
+            placement: 'top-right',
+            warningClass: "badge badge-success",
+            limitReachedClass: "badge badge-danger"
+        });
+
+        $('#kt_docs_maxlength_position_bottom_left').maxlength({
+            placement: 'bottom-left',
+            warningClass: "badge badge-info",
+            limitReachedClass: "badge badge-warning"
+        });
+
+        $('#kt_docs_maxlength_position_bottom_right').maxlength({
+            placement: 'bottom-right',
+            warningClass: "badge badge-primary",
+            limitReachedClass: "badge badge-success"
+        });
+    }
+
+    return {
+        // Public Functions
+        init: function () {
+            exampleBasic();
+            exampleThreshold();
+            exampleAlwaysShow();
+            exampleCustomText();
+            exampleTextarea();
+            examplePosition();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTFormsMaxlengthDemos.init();
+});

assets/js/custom/documentation/forms/clipboard.js

@@ -0,0 +1,172 @@
+"use strict";
+
+// Class definition
+var KTFormsClipboard = function () {
+    // Shared variables
+    var clipboard;
+
+    // Private functions
+    var example1 = function () {
+        // Select elements
+        const target = document.getElementById('kt_clipboard_1');
+        const button = target.nextElementSibling;
+
+        // Init clipboard -- for more info, please read the offical documentation: https://clipboardjs.com/
+        clipboard = new ClipboardJS(button, {
+            target: target,
+            text: function () {
+                return target.value;
+            }
+        });
+
+        // Success action handler
+        clipboard.on('success', function (e) {
+            const currentLabel = button.innerHTML;
+
+            // Exit label update when already in progress
+            if (button.innerHTML === 'Copied!') {
+                return;
+            }
+
+            // Update button label
+            button.innerHTML = "Copied!";
+
+            // Revert button label after 3 seconds
+            setTimeout(function () {
+                button.innerHTML = currentLabel;
+            }, 3000)
+        });
+    }
+
+    var example2 = function () {
+        // Select elements
+        const target = document.getElementById('kt_clipboard_2');
+        const button = target.nextElementSibling;
+
+        // Init clipboard -- for more info, please read the offical documentation: https://clipboardjs.com/
+        clipboard = new ClipboardJS(button, {
+            target: target,
+            text: function () {
+                return target.innerText;
+            }
+        });
+
+        // Success action handler
+        clipboard.on('success', function (e) {
+            const currentLabel = button.innerHTML;
+
+            // Exit label update when already in progress
+            if (button.innerHTML === 'Copied!') {
+                return;
+            }
+
+            // Update button label
+            button.innerHTML = "Copied!";
+
+            // Revert button label after 3 seconds
+            setTimeout(function () {
+                button.innerHTML = currentLabel;
+            }, 3000)
+        });
+    }
+
+    var example3 = function () {
+        // Select element
+        const target = document.getElementById('kt_clipboard_3');
+
+        // Init clipboard -- for more info, please read the offical documentation: https://clipboardjs.com/
+        clipboard = new ClipboardJS(target);
+
+        // Success action handler
+        clipboard.on('success', function (e) {
+            const currentLabel = target.innerHTML;
+
+            // Exit label update when already in progress
+            if (target.innerHTML === 'Copied!') {
+                return;
+            }
+
+            // Update button label
+            target.innerHTML = "Copied!";
+
+            // Revert button label after 3 seconds
+            setTimeout(function () {
+                target.innerHTML = currentLabel;
+            }, 3000)
+        });
+    }
+
+    var example4 = function () {
+        // Select elements
+        const target = document.getElementById('kt_clipboard_4');
+        const button = target.nextElementSibling;
+
+        // Init clipboard -- for more info, please read the offical documentation: https://clipboardjs.com/
+        clipboard = new ClipboardJS(button, {
+            target: target,
+            text: function () {
+                return target.innerHTML;
+            }
+        });
+
+        // Success action handler
+        clipboard.on('success', function (e) {
+            var checkIcon = button.querySelector('.bi.bi-check');
+            var svgIcon = button.querySelector('.svg-icon');
+
+            // Exit check icon when already showing
+            if (checkIcon) {
+                return;
+            }
+
+            // Create check icon
+            checkIcon = document.createElement('i');
+            checkIcon.classList.add('bi');
+            checkIcon.classList.add('bi-check');
+            checkIcon.classList.add('fs-2x');
+
+            // Append check icon
+            button.appendChild(checkIcon);
+
+            // Highlight target
+            const classes = ['text-success', 'fw-boldest'];
+            target.classList.add(...classes);
+
+            // Highlight button
+            button.classList.add('btn-success');
+
+            // Hide copy icon
+            svgIcon.classList.add('d-none');
+
+            // Revert button label after 3 seconds
+            setTimeout(function () {
+                // Remove check icon
+                svgIcon.classList.remove('d-none');
+
+                // Revert icon
+                button.removeChild(checkIcon);
+
+                // Remove target highlight
+                target.classList.remove(...classes);
+
+                // Remove button highlight
+                button.classList.remove('btn-success');
+            }, 3000)
+        });
+    }
+
+    return {
+        // Public Functions
+        init: function () {
+            example1();
+            example2();
+            example3();
+            example4();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTFormsClipboard.init();
+});

assets/js/custom/documentation/forms/daterangepicker.js

@@ -0,0 +1,77 @@
+"use strict";
+
+// Class definition
+var KTFormsDaterangepickerDemos = function() {
+    // Private functions
+    var example1 = function(element) {
+        $("#kt_daterangepicker_1").daterangepicker();
+    }
+
+    var example2 = function(element) {
+        $("#kt_daterangepicker_2").daterangepicker({
+            timePicker: true,
+            startDate: moment().startOf("hour"),
+            endDate: moment().startOf("hour").add(32, "hour"),
+            locale: {
+                format: "M/DD hh:mm A"
+            }
+        });
+    }
+
+    var example3 = function(element) {
+        $("#kt_daterangepicker_3").daterangepicker({
+                singleDatePicker: true,
+                showDropdowns: true,
+                minYear: 1901,
+                maxYear: parseInt(moment().format("YYYY"),10)
+            }, function(start, end, label) {
+                var years = moment().diff(start, "years");
+                alert("You are " + years + " years old!");
+            }
+        );
+    }
+
+    var example4 = function(element) {
+        var start = moment().subtract(29, "days");
+        var end = moment();
+
+        function cb(start, end) {
+            $("#kt_daterangepicker_4").html(start.format("MMMM D, YYYY") + " - " + end.format("MMMM D, YYYY"));
+        }
+
+        $("#kt_daterangepicker_4").daterangepicker({
+            startDate: start,
+            endDate: end,
+            ranges: {
+            "Today": [moment(), moment()],
+            "Yesterday": [moment().subtract(1, "days"), moment().subtract(1, "days")],
+            "Last 7 Days": [moment().subtract(6, "days"), moment()],
+            "Last 30 Days": [moment().subtract(29, "days"), moment()],
+            "This Month": [moment().startOf("month"), moment().endOf("month")],
+            "Last Month": [moment().subtract(1, "month").startOf("month"), moment().subtract(1, "month").endOf("month")]
+            }
+        }, cb);
+
+        cb(start, end);
+    }
+
+    var example5 = function(element) {
+        $("#kt_daterangepicker_5").daterangepicker();
+    }    
+
+    return {
+        // Public Functions
+        init: function(element) {
+            example1();
+            example2();
+            example3();
+            example4();
+            example5();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTFormsDaterangepickerDemos.init();
+});

assets/js/custom/documentation/forms/dialer.js

@@ -0,0 +1,31 @@
+"use strict";
+
+// Class definition
+var KTFormsDialerDemos = function() {
+    // Private functions
+    var example1 = function(element) {
+        // Dialer container element
+        var dialerElement = document.querySelector("#kt_dialer_example_1");
+
+        // Create dialer object and initialize a new instance
+        var dialerObject = new KTDialer(dialerElement, {
+            min: 1000,
+            max: 50000,
+            step: 1000,
+            prefix: "$",
+            decimals: 2
+        });
+    }
+
+    return {
+        // Public Functions
+        init: function(element) {
+            example1();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTFormsDialerDemos.init();
+});

assets/js/custom/documentation/forms/dropzonejs.js

@@ -0,0 +1,187 @@
+"use strict";
+
+// Class definition
+var KTFormsDropzoneJSDemos = function () {
+    // Private functions
+    var exampleBasic = function () {
+        // For more info about Dropzone plugin visit:  https://www.dropzonejs.com/#usage
+        var myDropzone = new Dropzone("#kt_dropzonejs_example_1", {
+            url: "https://keenthemes.com/scripts/void.php", // Set the url for your upload script location
+            paramName: "file", // The name that will be used to transfer the file
+            maxFiles: 10,
+            maxFilesize: 10, // MB
+            addRemoveLinks: true,
+            accept: function (file, done) {
+                if (file.name == "wow.jpg") {
+                    done("Naha, you don't.");
+                } else {
+                    done();
+                }
+            }
+        });
+    }
+
+    var exampleQueue = function () {
+        // set the dropzone container id
+        const id = "#kt_dropzonejs_example_2";
+        const dropzone = document.querySelector(id);
+
+        // set the preview element template
+        var previewNode = dropzone.querySelector(".dropzone-item");
+        previewNode.id = "";
+        var previewTemplate = previewNode.parentNode.innerHTML;
+        previewNode.parentNode.removeChild(previewNode);
+
+        var myDropzone = new Dropzone(id, { // Make the whole body a dropzone
+            url: "https://preview.keenthemes.com/api/dropzone/void.php", // Set the url for your upload script location
+            parallelUploads: 20,
+            previewTemplate: previewTemplate,
+            maxFilesize: 1, // Max filesize in MB
+            autoQueue: false, // Make sure the files aren't queued until manually added
+            previewsContainer: id + " .dropzone-items", // Define the container to display the previews
+            clickable: id + " .dropzone-select" // Define the element that should be used as click trigger to select files.
+        });
+
+        myDropzone.on("addedfile", function (file) {
+            // Hookup the start button
+            file.previewElement.querySelector(id + " .dropzone-start").onclick = function () { myDropzone.enqueueFile(file); };
+            const dropzoneItems = dropzone.querySelectorAll('.dropzone-item');
+            dropzoneItems.forEach(dropzoneItem => {
+                dropzoneItem.style.display = '';
+            });
+            dropzone.querySelector('.dropzone-upload').style.display = "inline-block";
+            dropzone.querySelector('.dropzone-remove-all').style.display = "inline-block";
+        });
+
+        // Update the total progress bar
+        myDropzone.on("totaluploadprogress", function (progress) {
+            const progressBars = dropzone.querySelectorAll('.progress-bar');
+            progressBars.forEach(progressBar => {
+                progressBar.style.width = progress + "%";
+            });
+        });
+
+        myDropzone.on("sending", function (file) {
+            // Show the total progress bar when upload starts
+            const progressBars = dropzone.querySelectorAll('.progress-bar');
+            progressBars.forEach(progressBar => {
+                progressBar.style.opacity = "1";
+            });
+            // And disable the start button
+            file.previewElement.querySelector(id + " .dropzone-start").setAttribute("disabled", "disabled");
+        });
+
+        // Hide the total progress bar when nothing's uploading anymore
+        myDropzone.on("complete", function (progress) {
+            const progressBars = dropzone.querySelectorAll('.dz-complete');
+
+            setTimeout(function () {
+                progressBars.forEach(progressBar => {
+                    progressBar.querySelector('.progress-bar').style.opacity = "0";
+                    progressBar.querySelector('.progress').style.opacity = "0";
+                    progressBar.querySelector('.dropzone-start').style.opacity = "0";
+                });
+            }, 300);
+        });
+
+        // Setup the buttons for all transfers
+        dropzone.querySelector(".dropzone-upload").addEventListener('click', function () {
+            myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED));
+        });
+
+        // Setup the button for remove all files
+        dropzone.querySelector(".dropzone-remove-all").addEventListener('click', function () {
+            dropzone.querySelector('.dropzone-upload').style.display = "none";
+            dropzone.querySelector('.dropzone-remove-all').style.display = "none";
+            myDropzone.removeAllFiles(true);
+        });
+
+        // On all files completed upload
+        myDropzone.on("queuecomplete", function (progress) {
+            const uploadIcons = dropzone.querySelectorAll('.dropzone-upload');
+            uploadIcons.forEach(uploadIcon => {
+                uploadIcon.style.display = "none";
+            });
+        });
+
+        // On all files removed
+        myDropzone.on("removedfile", function (file) {
+            if (myDropzone.files.length < 1) {
+                dropzone.querySelector('.dropzone-upload').style.display = "none";
+                dropzone.querySelector('.dropzone-remove-all').style.display = "none";
+            }
+        });
+    }
+
+    var exampleQueueAutoUpload = function () {
+        // set the dropzone container id
+        const id = "#kt_dropzonejs_example_3";
+        const dropzone = document.querySelector(id);
+
+        // set the preview element template
+        var previewNode = dropzone.querySelector(".dropzone-item");
+        previewNode.id = "";
+        var previewTemplate = previewNode.parentNode.innerHTML;
+        previewNode.parentNode.removeChild(previewNode);
+
+        var myDropzone = new Dropzone(id, { // Make the whole body a dropzone
+            url: "https://preview.keenthemes.com/api/dropzone/void.php", // Set the url for your upload script location
+            parallelUploads: 20,
+            maxFilesize: 1, // Max filesize in MB
+            previewTemplate: previewTemplate,
+            previewsContainer: id + " .dropzone-items", // Define the container to display the previews
+            clickable: id + " .dropzone-select" // Define the element that should be used as click trigger to select files.
+        });
+
+
+        myDropzone.on("addedfile", function (file) {
+            // Hookup the start button
+            const dropzoneItems = dropzone.querySelectorAll('.dropzone-item');
+            dropzoneItems.forEach(dropzoneItem => {
+                dropzoneItem.style.display = '';
+            });
+        });
+
+        // Update the total progress bar
+        myDropzone.on("totaluploadprogress", function (progress) {
+            const progressBars = dropzone.querySelectorAll('.progress-bar');
+            progressBars.forEach(progressBar => {
+                progressBar.style.width = progress + "%";
+            });
+        });
+
+        myDropzone.on("sending", function (file) {
+            // Show the total progress bar when upload starts
+            const progressBars = dropzone.querySelectorAll('.progress-bar');
+            progressBars.forEach(progressBar => {
+                progressBar.style.opacity = "1";
+            });
+        });
+
+        // Hide the total progress bar when nothing"s uploading anymore
+        myDropzone.on("complete", function (progress) {
+            const progressBars = dropzone.querySelectorAll('.dz-complete');
+
+            setTimeout(function () {
+                progressBars.forEach(progressBar => {
+                    progressBar.querySelector('.progress-bar').style.opacity = "0";
+                    progressBar.querySelector('.progress').style.opacity = "0";
+                });
+            }, 300);
+        });
+    }
+
+    return {
+        // Public Functions
+        init: function (element) {
+            exampleBasic();
+            exampleQueue();
+            exampleQueueAutoUpload();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTFormsDropzoneJSDemos.init();
+});

assets/js/custom/documentation/forms/flatpickr.js

@@ -0,0 +1,103 @@
+"use strict";
+
+// Class definition
+var KTFormsFlatpickrDemos = function() {
+    // Private functions
+    var example1 = function(element) {
+        $("#kt_datepicker_1").flatpickr();
+
+        $("#kt_datepicker_2").flatpickr();
+    }
+
+    var example2 = function(element) {
+        $("#kt_datepicker_3").flatpickr({
+            enableTime: true,
+            dateFormat: "Y-m-d H:i",
+        });
+    }
+
+    var example3 = function(element) {
+        $("#kt_datepicker_4").flatpickr({
+            onReady: function () {
+                this.jumpToDate("2025-01")
+            },
+            disable: ["2025-01-10", "22025-01-11", "2025-01-12", "2025-01-13", "2025-01-14", "2025-01-15", "2025-01-16", "2025-01-17"],
+            dateFormat: "Y-m-d",
+        });
+
+        $("#kt_datepicker_5").flatpickr({
+            onReady: function () {
+                this.jumpToDate("2025-01")
+            },
+            dateFormat: "Y-m-d",
+            disable: [
+                {
+                    from: "2025-01-05",
+                    to: "2025-01-25"
+                },
+                {
+                    from: "2025-02-03",
+                    to: "2025-02-15"
+                }
+            ]
+        });
+    }
+
+    var example4 = function(element) {
+        $("#kt_datepicker_6").flatpickr({
+            onReady: function () {
+                this.jumpToDate("2025-01")
+            },
+            mode: "multiple",
+            dateFormat: "Y-m-d",
+            defaultDate: ["2025-01-05", "2025-01-10"]
+        });
+    }
+
+    var example5 = function(element) {
+        $("#kt_datepicker_7").flatpickr({
+            altInput: true,
+            altFormat: "F j, Y",
+            dateFormat: "Y-m-d",
+            mode: "range"
+        });
+    }
+
+    var example6 = function(element) {
+        $("#kt_datepicker_8").flatpickr({
+            enableTime: true,
+            noCalendar: true,
+            dateFormat: "H:i",
+        });
+    }
+
+    var example7 = function(element) {
+        $("#kt_datepicker_9").flatpickr({
+            weekNumbers: true
+        });
+    }
+
+    var example8 = function(element) {
+        $("#kt_datepicker_10").flatpickr();
+    }
+    
+
+    return {
+        // Public Functions
+        init: function(element) {
+            example1();
+            example2();
+            example3();
+            example4();
+            example5();
+            example6();
+            example7();
+            example8();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTFormsFlatpickrDemos.init();
+});

assets/js/custom/documentation/forms/formrepeater/advanced.js

@@ -0,0 +1,55 @@
+"use strict";
+
+// Class definition
+var KTFormRepeaterAdvanced = function () {
+    // Private functions
+    var example1 = function () {
+        $('#kt_docs_repeater_advanced').repeater({
+            initEmpty: false,
+
+            defaultValues: {
+                'text-input': 'foo'
+            },
+
+            show: function () {
+                $(this).slideDown();
+
+                // Re-init select2
+                $(this).find('[data-kt-repeater="select2"]').select2();
+
+                // Re-init flatpickr
+                $(this).find('[data-kt-repeater="datepicker"]').flatpickr();
+
+                // Re-init tagify
+                new Tagify(this.querySelector('[data-kt-repeater="tagify"]'));
+            },
+
+            hide: function (deleteElement) {
+                $(this).slideUp(deleteElement);
+            },
+
+            ready: function(){
+                // Init select
+                $('[data-kt-repeater="select2"]').select2();
+
+                // Init flatpickr
+                $('[data-kt-repeater="datepicker"]').flatpickr();
+
+                // Init Tagify
+                new Tagify(document.querySelector('[data-kt-repeater="tagify"]'));
+            }
+        });        
+    }
+
+    return {
+        // Public Functions
+        init: function () {
+            example1();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTFormRepeaterAdvanced.init();
+});

assets/js/custom/documentation/forms/formrepeater/basic.js

@@ -0,0 +1,35 @@
+"use strict";
+
+// Class definition
+var KTFormRepeaterBasic = function () {
+    // Private functions
+    var example1 = function () {
+        $('#kt_docs_repeater_basic').repeater({
+            initEmpty: false,
+
+            defaultValues: {
+                'text-input': 'foo'
+            },
+
+            show: function () {
+                $(this).slideDown();
+            },
+
+            hide: function (deleteElement) {
+                $(this).slideUp(deleteElement);
+            }
+        });
+    }
+
+    return {
+        // Public Functions
+        init: function () {
+            example1();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTFormRepeaterBasic.init();
+});

assets/js/custom/documentation/forms/formrepeater/nested.js

@@ -0,0 +1,47 @@
+"use strict";
+
+// Class definition
+var KTFormRepeaterNested = function() {
+    // Private functions
+    var example1 = function() {
+        $('#kt_docs_repeater_nested').repeater({
+            // (Required if there is a nested repeater)
+            // Specify the configuration of the nested repeaters.
+            // Nested configuration follows the same format as the base configuration,
+            // supporting options "defaultValues", "show", "hide", etc.
+            // Nested repeaters additionally require a "selector" field.
+            repeaters: [{
+                // (Required)
+                // Specify the jQuery selector for this nested repeater
+                selector: '.inner-repeater',
+                show: function () {
+                    $(this).slideDown();
+                },
+    
+                hide: function (deleteElement) {
+                    $(this).slideUp(deleteElement);
+                }
+            }],
+
+            show: function () {
+                $(this).slideDown();
+            },
+
+            hide: function (deleteElement) {
+                $(this).slideUp(deleteElement);
+            }
+        });
+    }
+
+    return {
+        // Public Functions
+        init: function() {
+            example1();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTFormRepeaterNested.init();
+});

assets/js/custom/documentation/forms/formvalidation/advanced.js

@@ -0,0 +1,664 @@
+"use strict";
+
+// Class definition
+var KTFormValidationDemoAdvanced = function () {
+
+    // Private functions
+    var exampleAdvanced = function () {
+        // Define form element
+        const form = document.getElementById('kt_docs_formvalidation_advanced');
+
+        // Init daterangepicker --- for more info, please visit: https://www.daterangepicker.com/
+        $("#kt_daterangepicker").daterangepicker();
+
+        // Init flatpickr --- for more info, please visit: https://flatpickr.js.org/
+        $("#kt_flatpickr").flatpickr();
+
+        // Init tagify --- for more info, please visit: https://yaireo.github.io/tagify/
+        new Tagify(document.querySelector("#kt_tagify"), {
+            whitelist: ["Tag 1", "Tag 2", "Tag 3", "Tag 4", "Tag 5", "Tag 6", "Tag 7", "Tag 8", "Tag 9", "Tag 10", "Tag 11", "Tag 12"],
+            maxTags: 6,
+            dropdown: {
+                maxItems: 20,           // <- mixumum allowed rendered suggestions
+                classname: "tagify__inline__suggestions", // <- custom classname for this dropdown, so it could be targeted
+                enabled: 0,             // <- show suggestions on focus
+                closeOnSelect: false    // <- do not hide the suggestions dropdown once an item has been selected
+            }
+        });
+
+
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        var validator = FormValidation.formValidation(
+            form,
+            {
+                fields: {
+                    'daterangepicker_input': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Date range input is required'
+                            }
+                        }
+                    },
+                    'flatpickr_input': {
+                        validators: {
+                            date: {
+                                format: 'YYYY-MM-DD',
+                                message: 'The value is not a valid date',
+                            },
+                            notEmpty: {
+                                message: 'Flatpickr input is required'
+                            }
+                        }
+                    },
+                    'avatar': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Please select an image'
+                            },
+                            file: {
+                                extension: 'jpg,jpeg,png',
+                                type: 'image/jpeg,image/png',
+                                message: 'The selected file is not valid'
+                            },
+                        }
+                    },
+                    'select2_input': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Select2 input is required'
+                            }
+                        }
+                    },
+                    'tagify_input': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Tagify input is required'
+                            }
+                        }
+                    },
+                },
+
+                plugins: {
+                    trigger: new FormValidation.plugins.Trigger(),
+                    bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+                }
+            }
+        );
+
+        // Revalidate Select2 input. For more info, plase visit the official plugin site: https://select2.org/
+        $(form.querySelector('[name="select2_input"]')).on('change', function () {
+            // Revalidate the field when an option is chosen
+            validator.revalidateField('select2_input');
+        });
+
+        // Submit button handler
+        const submitButton = document.getElementById('kt_docs_formvalidation_submit');
+        submitButton.addEventListener('click', function (e) {
+            // Prevent default button action
+            e.preventDefault();
+
+            // Validate form before submit
+            if (validator) {
+                validator.validate().then(function (status) {
+                    console.log('validated!');
+
+                    if (status == 'Valid') {
+                        // Show loading indication
+                        submitButton.setAttribute('data-kt-indicator', 'on');
+
+                        // Disable button to avoid multiple click 
+                        submitButton.disabled = true;
+
+                        // Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+                        setTimeout(function () {
+                            // Remove loading indication
+                            submitButton.removeAttribute('data-kt-indicator');
+
+                            // Enable button
+                            submitButton.disabled = false;
+
+                            // Show popup confirmation 
+                            Swal.fire({
+                                text: "Form has been successfully submitted!",
+                                icon: "success",
+                                buttonsStyling: false,
+                                confirmButtonText: "Ok, got it!",
+                                customClass: {
+                                    confirmButton: "btn btn-primary"
+                                }
+                            });
+
+                            //form.submit(); // Submit form
+                        }, 2000);
+                    }
+                });
+            }
+        });
+    }
+
+    var exampleDateRangePicker = function () {
+        // Define form element
+        const form = document.getElementById('kt_docs_formvalidation_daterangepicker');
+
+        // Init daterangepicker --- for more info, please visit: https://www.daterangepicker.com/
+        $("#kt_daterangepicker").daterangepicker();
+
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        var validator = FormValidation.formValidation(
+            form,
+            {
+                fields: {
+                    'daterangepicker_input': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Date range input is required'
+                            }
+                        }
+                    },
+                },
+
+                plugins: {
+                    trigger: new FormValidation.plugins.Trigger(),
+                    bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+                }
+            }
+        );
+
+        // Submit button handler
+        const submitButton = document.getElementById('kt_docs_formvalidation_daterangepicker_submit');
+        submitButton.addEventListener('click', function (e) {
+            // Prevent default button action
+            e.preventDefault();
+
+            // Validate form before submit
+            if (validator) {
+                validator.validate().then(function (status) {
+                    console.log('validated!');
+
+                    if (status == 'Valid') {
+                        // Show loading indication
+                        submitButton.setAttribute('data-kt-indicator', 'on');
+
+                        // Disable button to avoid multiple click 
+                        submitButton.disabled = true;
+
+                        // Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+                        setTimeout(function () {
+                            // Remove loading indication
+                            submitButton.removeAttribute('data-kt-indicator');
+
+                            // Enable button
+                            submitButton.disabled = false;
+
+                            // Show popup confirmation 
+                            Swal.fire({
+                                text: "Form has been successfully submitted!",
+                                icon: "success",
+                                buttonsStyling: false,
+                                confirmButtonText: "Ok, got it!",
+                                customClass: {
+                                    confirmButton: "btn btn-primary"
+                                }
+                            });
+
+                            //form.submit(); // Submit form
+                        }, 2000);
+                    }
+                });
+            }
+        });
+    }
+
+    var exampleFlatpickr = function () {
+        // Define form element
+        const form = document.getElementById('kt_docs_formvalidation_flatpickr');
+
+        // Init flatpickr --- for more info, please visit: https://flatpickr.js.org/
+        $("#kt_flatpickr").flatpickr();
+
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        var validator = FormValidation.formValidation(
+            form,
+            {
+                fields: {
+                    'flatpickr_input': {
+                        validators: {
+                            date: {
+                                format: 'YYYY-MM-DD',
+                                message: 'The value is not a valid date',
+                            },
+                            notEmpty: {
+                                message: 'Flatpickr input is required'
+                            }
+                        }
+                    },
+                },
+
+                plugins: {
+                    trigger: new FormValidation.plugins.Trigger(),
+                    bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+                }
+            }
+        );
+
+        // Submit button handler
+        const submitButton = document.getElementById('kt_docs_formvalidation_flatpickr_submit');
+        submitButton.addEventListener('click', function (e) {
+            // Prevent default button action
+            e.preventDefault();
+
+            // Validate form before submit
+            if (validator) {
+                validator.validate().then(function (status) {
+                    console.log('validated!');
+
+                    if (status == 'Valid') {
+                        // Show loading indication
+                        submitButton.setAttribute('data-kt-indicator', 'on');
+
+                        // Disable button to avoid multiple click 
+                        submitButton.disabled = true;
+
+                        // Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+                        setTimeout(function () {
+                            // Remove loading indication
+                            submitButton.removeAttribute('data-kt-indicator');
+
+                            // Enable button
+                            submitButton.disabled = false;
+
+                            // Show popup confirmation 
+                            Swal.fire({
+                                text: "Form has been successfully submitted!",
+                                icon: "success",
+                                buttonsStyling: false,
+                                confirmButtonText: "Ok, got it!",
+                                customClass: {
+                                    confirmButton: "btn btn-primary"
+                                }
+                            });
+
+                            //form.submit(); // Submit form
+                        }, 2000);
+                    }
+                });
+            }
+        });
+    }
+
+    var exampleImageInput = function () {
+        // Define form element
+        const form = document.getElementById('kt_docs_formvalidation_image_input');
+
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        var validator = FormValidation.formValidation(
+            form,
+            {
+                fields: {
+                    'avatar': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Please select an image'
+                            },
+                            file: {
+                                extension: 'jpg,jpeg,png',
+                                type: 'image/jpeg,image/png',
+                                message: 'The selected file is not valid'
+                            },
+                        }
+                    },
+                },
+
+                plugins: {
+                    trigger: new FormValidation.plugins.Trigger(),
+                    bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+                }
+            }
+        );
+
+        // Submit button handler
+        const submitButton = document.getElementById('kt_docs_formvalidation_image_input_submit');
+        submitButton.addEventListener('click', function (e) {
+            // Prevent default button action
+            e.preventDefault();
+
+            // Validate form before submit
+            if (validator) {
+                validator.validate().then(function (status) {
+                    console.log('validated!');
+
+                    if (status == 'Valid') {
+                        // Show loading indication
+                        submitButton.setAttribute('data-kt-indicator', 'on');
+
+                        // Disable button to avoid multiple click 
+                        submitButton.disabled = true;
+
+                        // Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+                        setTimeout(function () {
+                            // Remove loading indication
+                            submitButton.removeAttribute('data-kt-indicator');
+
+                            // Enable button
+                            submitButton.disabled = false;
+
+                            // Show popup confirmation 
+                            Swal.fire({
+                                text: "Form has been successfully submitted!",
+                                icon: "success",
+                                buttonsStyling: false,
+                                confirmButtonText: "Ok, got it!",
+                                customClass: {
+                                    confirmButton: "btn btn-primary"
+                                }
+                            });
+
+                            //form.submit(); // Submit form
+                        }, 2000);
+                    }
+                });
+            }
+        });
+    }
+
+    var examplePassword = function () {
+        // Define form element
+        const form = document.getElementById('kt_docs_formvalidation_password');
+
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        var validator = FormValidation.formValidation(
+            form,
+            {
+                fields: {
+                    'current_password': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Current password is required'
+                            }
+                        }
+                    },
+                    'new_password': {
+                        validators: {
+                            notEmpty: {
+                                message: 'The password is required'
+                            },
+                            callback: {
+                                message: 'Please enter valid password',
+                                callback: function (input) {
+                                    if (input.value.length > 0) {
+                                        return validatePassword();
+                                    }
+                                }
+                            }
+                        }
+                    },
+                    'confirm_password': {
+                        validators: {
+                            notEmpty: {
+                                message: 'The password confirmation is required'
+                            },
+                            identical: {
+                                compare: function () {
+                                    return form.querySelector('[name="new_password"]').value;
+                                },
+                                message: 'The password and its confirm are not the same'
+                            }
+                        }
+                    },
+                },
+
+                plugins: {
+                    trigger: new FormValidation.plugins.Trigger(),
+                    bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+                }
+            }
+        );
+
+        // Submit button handler
+        const submitButton = document.getElementById('kt_docs_formvalidation_password_submit');
+        submitButton.addEventListener('click', function (e) {
+            // Prevent default button action
+            e.preventDefault();
+
+            // Validate form before submit
+            if (validator) {
+                validator.validate().then(function (status) {
+                    console.log('validated!');
+
+                    if (status == 'Valid') {
+                        // Show loading indication
+                        submitButton.setAttribute('data-kt-indicator', 'on');
+
+                        // Disable button to avoid multiple click 
+                        submitButton.disabled = true;
+
+                        // Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+                        setTimeout(function () {
+                            // Remove loading indication
+                            submitButton.removeAttribute('data-kt-indicator');
+
+                            // Enable button
+                            submitButton.disabled = false;
+
+                            // Show popup confirmation 
+                            Swal.fire({
+                                text: "Form has been successfully submitted!",
+                                icon: "success",
+                                buttonsStyling: false,
+                                confirmButtonText: "Ok, got it!",
+                                customClass: {
+                                    confirmButton: "btn btn-primary"
+                                }
+                            });
+
+                            //form.submit(); // Submit form
+                        }, 2000);
+                    }
+                });
+            }
+        });
+    }
+
+    var exampleSelect2 = function () {
+        // Define form element
+        const form = document.getElementById('kt_docs_formvalidation_select2');
+
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        var validator = FormValidation.formValidation(
+            form,
+            {
+                fields: {
+                    'select2_input': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Select2 input is required'
+                            }
+                        }
+                    },
+                },
+
+                plugins: {
+                    trigger: new FormValidation.plugins.Trigger(),
+                    bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+                }
+            }
+        );
+
+        // Revalidate Select2 input. For more info, plase visit the official plugin site: https://select2.org/
+        $(form.querySelector('[name="select2_input"]')).on('change', function () {
+            // Revalidate the field when an option is chosen
+            validator.revalidateField('select2_input');
+        });
+
+        // Submit button handler
+        const submitButton = document.getElementById('kt_docs_formvalidation_select2_submit');
+        submitButton.addEventListener('click', function (e) {
+            // Prevent default button action
+            e.preventDefault();
+
+            // Validate form before submit
+            if (validator) {
+                validator.validate().then(function (status) {
+                    console.log('validated!');
+
+                    if (status == 'Valid') {
+                        // Show loading indication
+                        submitButton.setAttribute('data-kt-indicator', 'on');
+
+                        // Disable button to avoid multiple click 
+                        submitButton.disabled = true;
+
+                        // Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+                        setTimeout(function () {
+                            // Remove loading indication
+                            submitButton.removeAttribute('data-kt-indicator');
+
+                            // Enable button
+                            submitButton.disabled = false;
+
+                            // Show popup confirmation 
+                            Swal.fire({
+                                text: "Form has been successfully submitted!",
+                                icon: "success",
+                                buttonsStyling: false,
+                                confirmButtonText: "Ok, got it!",
+                                customClass: {
+                                    confirmButton: "btn btn-primary"
+                                }
+                            });
+
+                            //form.submit(); // Submit form
+                        }, 2000);
+                    }
+                });
+            }
+        });
+    }
+
+    var exampleTagify = function () {
+        // Define form element
+        const form = document.getElementById('kt_docs_formvalidation_tagify');
+
+        // Init tagify --- for more info, please visit: https://yaireo.github.io/tagify/
+        new Tagify(document.querySelector("#kt_tagify"), {
+            whitelist: ["Tag 1", "Tag 2", "Tag 3", "Tag 4", "Tag 5", "Tag 6", "Tag 7", "Tag 8", "Tag 9", "Tag 10", "Tag 11", "Tag 12"],
+            maxTags: 6,
+            dropdown: {
+                maxItems: 20,           // <- mixumum allowed rendered suggestions
+                classname: "tagify__inline__suggestions", // <- custom classname for this dropdown, so it could be targeted
+                enabled: 0,             // <- show suggestions on focus
+                closeOnSelect: false    // <- do not hide the suggestions dropdown once an item has been selected
+            }
+        });
+
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        var validator = FormValidation.formValidation(
+            form,
+            {
+                fields: {
+                    'tagify_input': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Tagify input is required'
+                            }
+                        }
+                    },
+                },
+
+                plugins: {
+                    trigger: new FormValidation.plugins.Trigger(),
+                    bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+                }
+            }
+        );
+
+        // Submit button handler
+        const submitButton = document.getElementById('kt_docs_formvalidation_tagify_submit');
+        submitButton.addEventListener('click', function (e) {
+            // Prevent default button action
+            e.preventDefault();
+
+            // Validate form before submit
+            if (validator) {
+                validator.validate().then(function (status) {
+                    console.log('validated!');
+
+                    if (status == 'Valid') {
+                        // Show loading indication
+                        submitButton.setAttribute('data-kt-indicator', 'on');
+
+                        // Disable button to avoid multiple click 
+                        submitButton.disabled = true;
+
+                        // Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+                        setTimeout(function () {
+                            // Remove loading indication
+                            submitButton.removeAttribute('data-kt-indicator');
+
+                            // Enable button
+                            submitButton.disabled = false;
+
+                            // Show popup confirmation 
+                            Swal.fire({
+                                text: "Form has been successfully submitted!",
+                                icon: "success",
+                                buttonsStyling: false,
+                                confirmButtonText: "Ok, got it!",
+                                customClass: {
+                                    confirmButton: "btn btn-primary"
+                                }
+                            });
+
+                            //form.submit(); // Submit form
+                        }, 2000);
+                    }
+                });
+            }
+        });
+    }
+
+    return {
+        // Public Functions
+        init: function () {
+            exampleDateRangePicker();
+            exampleFlatpickr();
+            exampleImageInput();
+            examplePassword();
+            exampleSelect2();
+            exampleTagify();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTFormValidationDemoAdvanced.init();
+});

assets/js/custom/documentation/forms/formvalidation/basic.js

@@ -0,0 +1,536 @@
+"use strict";
+
+// Class definition
+var KTFormValidationDemoBasic = function () {
+
+    // Private functions
+    var exampleBasic = function () {
+        // Define form element
+        const form = document.getElementById('kt_docs_formvalidation_basic');
+
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        var validator = FormValidation.formValidation(
+            form,
+            {
+                fields: {
+                    'text_input': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Text input is required'
+                            }
+                        }
+                    },
+                    'email_input': {
+                        validators: {
+                            emailAddress: {
+                                message: 'The value is not a valid email address'
+                            },
+                            notEmpty: {
+                                message: 'Email address is required'
+                            }
+                        }
+                    },
+                    'current_password': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Current password is required'
+                            }
+                        }
+                    },
+                    'new_password': {
+                        validators: {
+                            notEmpty: {
+                                message: 'The password is required'
+                            },
+                            callback: {
+                                message: 'Please enter valid password',
+                                callback: function (input) {
+                                    if (input.value.length > 0) {
+                                        return validatePassword();
+                                    }
+                                }
+                            }
+                        }
+                    },
+                    'confirm_password': {
+                        validators: {
+                            notEmpty: {
+                                message: 'The password confirmation is required'
+                            },
+                            identical: {
+                                compare: function () {
+                                    return form.querySelector('[name="new_password"]').value;
+                                },
+                                message: 'The password and its confirm are not the same'
+                            }
+                        }
+                    },
+                    'textarea_input': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Textarea input is required'
+                            }
+                        }
+                    },
+                    'radio_input': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Radio input is required'
+                            }
+                        }
+                    },
+                    'checkbox_input': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Radio input is required'
+                            }
+                        }
+                    },
+                },
+
+                plugins: {
+                    trigger: new FormValidation.plugins.Trigger(),
+                    bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+                }
+            }
+        );
+
+        // Submit button handler
+        const submitButton = document.getElementById('kt_docs_formvalidation_submit');
+        submitButton.addEventListener('click', function (e) {
+            // Prevent default button action
+            e.preventDefault();
+
+            // Validate form before submit
+            if (validator) {
+                validator.validate().then(function (status) {
+                    console.log('validated!');
+
+                    if (status == 'Valid') {
+                        // Show loading indication
+                        submitButton.setAttribute('data-kt-indicator', 'on');
+
+                        // Disable button to avoid multiple click 
+                        submitButton.disabled = true;
+
+                        // Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+                        setTimeout(function () {
+                            // Remove loading indication
+                            submitButton.removeAttribute('data-kt-indicator');
+
+                            // Enable button
+                            submitButton.disabled = false;
+
+                            // Show popup confirmation 
+                            Swal.fire({
+                                text: "Form has been successfully submitted!",
+                                icon: "success",
+                                buttonsStyling: false,
+                                confirmButtonText: "Ok, got it!",
+                                customClass: {
+                                    confirmButton: "btn btn-primary"
+                                }
+                            });
+
+                            //form.submit(); // Submit form
+                        }, 2000);
+                    }
+                });
+            }
+        });
+
+    }
+
+    var exampleText = function () {
+        // Define form element
+        const form = document.getElementById('kt_docs_formvalidation_text');
+
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        var validator = FormValidation.formValidation(
+            form,
+            {
+                fields: {
+                    'text_input': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Text input is required'
+                            }
+                        }
+                    },
+                },
+
+                plugins: {
+                    trigger: new FormValidation.plugins.Trigger(),
+                    bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+                }
+            }
+        );
+
+        // Submit button handler
+        const submitButton = document.getElementById('kt_docs_formvalidation_text_submit');
+        submitButton.addEventListener('click', function (e) {
+            // Prevent default button action
+            e.preventDefault();
+
+            // Validate form before submit
+            if (validator) {
+                validator.validate().then(function (status) {
+                    console.log('validated!');
+
+                    if (status == 'Valid') {
+                        // Show loading indication
+                        submitButton.setAttribute('data-kt-indicator', 'on');
+
+                        // Disable button to avoid multiple click 
+                        submitButton.disabled = true;
+
+                        // Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+                        setTimeout(function () {
+                            // Remove loading indication
+                            submitButton.removeAttribute('data-kt-indicator');
+
+                            // Enable button
+                            submitButton.disabled = false;
+
+                            // Show popup confirmation 
+                            Swal.fire({
+                                text: "Form has been successfully submitted!",
+                                icon: "success",
+                                buttonsStyling: false,
+                                confirmButtonText: "Ok, got it!",
+                                customClass: {
+                                    confirmButton: "btn btn-primary"
+                                }
+                            });
+
+                            //form.submit(); // Submit form
+                        }, 2000);
+                    }
+                });
+            }
+        });
+    }
+
+    var exampleEmail = function () {
+        // Define form element
+        const form = document.getElementById('kt_docs_formvalidation_email');
+
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        var validator = FormValidation.formValidation(
+            form,
+            {
+                fields: {
+                    'email_input': {
+                        validators: {
+                            emailAddress: {
+                                message: 'The value is not a valid email address'
+                            },
+                            notEmpty: {
+                                message: 'Email address is required'
+                            }
+                        }
+                    },
+                },
+
+                plugins: {
+                    trigger: new FormValidation.plugins.Trigger(),
+                    bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+                }
+            }
+        );
+
+        // Submit button handler
+        const submitButton = document.getElementById('kt_docs_formvalidation_email_submit');
+        submitButton.addEventListener('click', function (e) {
+            // Prevent default button action
+            e.preventDefault();
+
+            // Validate form before submit
+            if (validator) {
+                validator.validate().then(function (status) {
+                    console.log('validated!');
+
+                    if (status == 'Valid') {
+                        // Show loading indication
+                        submitButton.setAttribute('data-kt-indicator', 'on');
+
+                        // Disable button to avoid multiple click 
+                        submitButton.disabled = true;
+
+                        // Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+                        setTimeout(function () {
+                            // Remove loading indication
+                            submitButton.removeAttribute('data-kt-indicator');
+
+                            // Enable button
+                            submitButton.disabled = false;
+
+                            // Show popup confirmation 
+                            Swal.fire({
+                                text: "Form has been successfully submitted!",
+                                icon: "success",
+                                buttonsStyling: false,
+                                confirmButtonText: "Ok, got it!",
+                                customClass: {
+                                    confirmButton: "btn btn-primary"
+                                }
+                            });
+
+                            //form.submit(); // Submit form
+                        }, 2000);
+                    }
+                });
+            }
+        });
+    }
+
+    var exampleTextarea = function () {
+        // Define form element
+        const form = document.getElementById('kt_docs_formvalidation_textarea');
+
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        var validator = FormValidation.formValidation(
+            form,
+            {
+                fields: {
+                    'textarea_input': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Textarea input is required'
+                            }
+                        }
+                    },
+                },
+
+                plugins: {
+                    trigger: new FormValidation.plugins.Trigger(),
+                    bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+                }
+            }
+        );
+
+        // Submit button handler
+        const submitButton = document.getElementById('kt_docs_formvalidation_textarea_submit');
+        submitButton.addEventListener('click', function (e) {
+            // Prevent default button action
+            e.preventDefault();
+
+            // Validate form before submit
+            if (validator) {
+                validator.validate().then(function (status) {
+                    console.log('validated!');
+
+                    if (status == 'Valid') {
+                        // Show loading indication
+                        submitButton.setAttribute('data-kt-indicator', 'on');
+
+                        // Disable button to avoid multiple click 
+                        submitButton.disabled = true;
+
+                        // Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+                        setTimeout(function () {
+                            // Remove loading indication
+                            submitButton.removeAttribute('data-kt-indicator');
+
+                            // Enable button
+                            submitButton.disabled = false;
+
+                            // Show popup confirmation 
+                            Swal.fire({
+                                text: "Form has been successfully submitted!",
+                                icon: "success",
+                                buttonsStyling: false,
+                                confirmButtonText: "Ok, got it!",
+                                customClass: {
+                                    confirmButton: "btn btn-primary"
+                                }
+                            });
+
+                            //form.submit(); // Submit form
+                        }, 2000);
+                    }
+                });
+            }
+        });
+    }
+
+    var exampleRadio = function () {
+        // Define form element
+        const form = document.getElementById('kt_docs_formvalidation_radio');
+
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        var validator = FormValidation.formValidation(
+            form,
+            {
+                fields: {
+                    'radio_input': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Radio input is required'
+                            }
+                        }
+                    },
+                },
+
+                plugins: {
+                    trigger: new FormValidation.plugins.Trigger(),
+                    bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+                }
+            }
+        );
+
+        // Submit button handler
+        const submitButton = document.getElementById('kt_docs_formvalidation_radio_submit');
+        submitButton.addEventListener('click', function (e) {
+            // Prevent default button action
+            e.preventDefault();
+
+            // Validate form before submit
+            if (validator) {
+                validator.validate().then(function (status) {
+                    console.log('validated!');
+
+                    if (status == 'Valid') {
+                        // Show loading indication
+                        submitButton.setAttribute('data-kt-indicator', 'on');
+
+                        // Disable button to avoid multiple click 
+                        submitButton.disabled = true;
+
+                        // Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+                        setTimeout(function () {
+                            // Remove loading indication
+                            submitButton.removeAttribute('data-kt-indicator');
+
+                            // Enable button
+                            submitButton.disabled = false;
+
+                            // Show popup confirmation 
+                            Swal.fire({
+                                text: "Form has been successfully submitted!",
+                                icon: "success",
+                                buttonsStyling: false,
+                                confirmButtonText: "Ok, got it!",
+                                customClass: {
+                                    confirmButton: "btn btn-primary"
+                                }
+                            });
+
+                            //form.submit(); // Submit form
+                        }, 2000);
+                    }
+                });
+            }
+        });
+    }
+
+    var exampleCheckbox = function () {
+        // Define form element
+        const form = document.getElementById('kt_docs_formvalidation_checkbox');
+
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        var validator = FormValidation.formValidation(
+            form,
+            {
+                fields: {
+                    'checkbox_input': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Checkbox input is required'
+                            }
+                        }
+                    },
+                },
+
+                plugins: {
+                    trigger: new FormValidation.plugins.Trigger(),
+                    bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+                }
+            }
+        );
+
+        // Submit button handler
+        const submitButton = document.getElementById('kt_docs_formvalidation_checkbox_submit');
+        submitButton.addEventListener('click', function (e) {
+            // Prevent default button action
+            e.preventDefault();
+
+            // Validate form before submit
+            if (validator) {
+                validator.validate().then(function (status) {
+                    console.log('validated!');
+
+                    if (status == 'Valid') {
+                        // Show loading indication
+                        submitButton.setAttribute('data-kt-indicator', 'on');
+
+                        // Disable button to avoid multiple click 
+                        submitButton.disabled = true;
+
+                        // Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+                        setTimeout(function () {
+                            // Remove loading indication
+                            submitButton.removeAttribute('data-kt-indicator');
+
+                            // Enable button
+                            submitButton.disabled = false;
+
+                            // Show popup confirmation 
+                            Swal.fire({
+                                text: "Form has been successfully submitted!",
+                                icon: "success",
+                                buttonsStyling: false,
+                                confirmButtonText: "Ok, got it!",
+                                customClass: {
+                                    confirmButton: "btn btn-primary"
+                                }
+                            });
+
+                            //form.submit(); // Submit form
+                        }, 2000);
+                    }
+                });
+            }
+        });
+    }
+
+    return {
+        // Public Functions
+        init: function () {
+            exampleText();
+            exampleEmail();
+            exampleTextarea();
+            exampleRadio();
+            exampleCheckbox();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTFormValidationDemoBasic.init();
+});

assets/js/custom/documentation/forms/image-input.js

@@ -0,0 +1,21 @@
+"use strict";
+
+// Class definition
+var KTGeneralImageInputDemos = function() {
+    // Private functions
+    var _exampleBasic = function() {
+        
+    }
+
+    return {
+        // Public Functions
+        init: function() {
+            _exampleBasic();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTGeneralImageInputDemos.init();
+});

assets/js/custom/documentation/forms/inputmask.js

@@ -0,0 +1,74 @@
+"use strict";
+
+// Class definition
+var KTFormsInputmaskDemos = function() {
+    // Private functions
+    var _examples = function() {
+        // Date
+        Inputmask({
+            "mask" : "99/99/9999"
+        }).mask("#kt_inputmask_1");
+
+        // Phone 
+        Inputmask({
+            "mask" : "(999) 999-9999"
+        }).mask("#kt_inputmask_2");
+
+        // Placeholder 
+        Inputmask({
+            "mask" : "(999) 999-9999",
+            "placeholder": "(999) 999-9999",
+        }).mask("#kt_inputmask_3");
+
+        // Repeating 
+        Inputmask({
+            "mask": "9",
+            "repeat": 10,
+            "greedy": false
+        }).mask("#kt_inputmask_4");
+
+        // Right aligned 
+        Inputmask("decimal", {
+            "rightAlignNumerics": false
+        }).mask("#kt_inputmask_5");
+
+        // Currency
+        Inputmask("€ 999.999.999,99", {
+            "numericInput": true
+        }).mask("#kt_inputmask_6");
+
+        // Ip address
+        Inputmask({
+            "mask": "999.999.999.999"
+        }).mask("#kt_inputmask_7");
+
+        // Email address
+        Inputmask({
+            mask: "*{1,20}[.*{1,20}][.*{1,20}][.*{1,20}]@*{1,20}[.*{2,6}][.*{1,2}]",
+            greedy: false,
+            onBeforePaste: function (pastedValue, opts) {
+                pastedValue = pastedValue.toLowerCase();
+                return pastedValue.replace("mailto:", "");
+            },
+            definitions: {
+                "*": {
+                    validator: '[0-9A-Za-z!#$%&"*+/=?^_`{|}~\-]',
+                    cardinality: 1,
+                    casing: "lower"
+                }
+            }
+        }).mask("#kt_inputmask_8");
+    }
+
+    return {
+        // Public Functions
+        init: function(element) {
+            _examples();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTFormsInputmaskDemos.init();
+});

assets/js/custom/documentation/forms/multiselectsplitter.js

@@ -0,0 +1,65 @@
+"use strict";
+
+// Class definition
+var KTFormsMultiselectsplitterDemos = function() {
+    // Private functions
+    var example1 = function() {
+        $("#kt_multiselectsplitter_example_1").multiselectsplitter();
+    }
+
+    var example2 = function() {
+        $('#kt_multiselectsplitter_example_2').multiselectsplitter({
+    		selectSize: 7,
+            clearOnFirstChange: true,
+    		groupCounter: true
+        });
+    }
+
+    var example3 = function() {
+        $('#kt_multiselectsplitter_example_3').multiselectsplitter({
+    		groupCounter: true,
+            maximumSelected: 2
+        });
+    }
+
+    var example4 = function() {
+        $('#kt_multiselectsplitter_example_4').multiselectsplitter({
+    		groupCounter: true,
+            maximumSelected: 3,
+            onlySameGroup: true
+        });
+    }
+
+    var example5 = function() {
+        $('#kt_multiselectsplitter_example_5').multiselectsplitter({
+    		size: 6,
+    		groupCounter: true,
+            maximumSelected: 2,
+            maximumAlert: function(maximumSelected) {
+                alert("You choose " + ( maximumSelected + 1 ) + " options. Are you crazy ?");
+            },
+            createFirstSelect: function (label, $originalSelect) { 
+                return "<option class=\"text-success\">prefix - " + label + "</option>";
+            },
+            createSecondSelect: function (label, $firstSelect) { 
+                return "<option class=\"text-danger\"> ??? </option>";
+            }
+        });
+    }
+
+    return {
+        // Public Functions
+        init: function() {
+            example1();
+            example2();
+            example3();
+            example4();
+            example5();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTFormsMultiselectsplitterDemos.init();
+});

assets/js/custom/documentation/forms/nouislider.js

@@ -0,0 +1,121 @@
+"use strict";
+
+// Class definition
+var KTFormsNouisliderDemos = function() {
+    // Private functions
+    var _exampleBasic = function() {
+        var slider = document.querySelector("#kt_slider_basic");
+        var valueMin = document.querySelector("#kt_slider_basic_min");
+        var valueMax = document.querySelector("#kt_slider_basic_max");
+
+        noUiSlider.create(slider, {
+            start: [20, 80],
+            connect: true,
+            range: {
+                "min": 0,
+                "max": 100
+            }
+        });
+
+        slider.noUiSlider.on("update", function (values, handle) {
+            if (handle) {
+                valueMax.innerHTML = values[handle];
+            } else {
+                valueMin.innerHTML = values[handle];
+            }
+        });
+    }
+
+    var _exampleSizes = function() {
+        var slider1 = document.querySelector("#kt_slider_sizes_sm");
+        var slider2 = document.querySelector("#kt_slider_sizes_default");
+        var slider3 = document.querySelector("#kt_slider_sizes_lg");
+
+        noUiSlider.create(slider1, {
+            start: [20, 80],
+            connect: true,
+            range: {
+                "min": 0,
+                "max": 100
+            }
+        });
+
+        noUiSlider.create(slider2, {
+            start: [20, 80],
+            connect: true,
+            range: {
+                "min": 0,
+                "max": 100
+            }
+        });
+
+        noUiSlider.create(slider3, {
+            start: [20, 80],
+            connect: true,
+            range: {
+                "min": 0,
+                "max": 100
+            }
+        });
+    }   
+
+    var _exampleVertical = function() {
+        var slider = document.querySelector("#kt_slider_vertical");
+
+        noUiSlider.create(slider, {
+            start: [60, 160],
+            connect: true,
+            orientation: "vertical",
+            range: {
+                "min": 0,
+                "max": 200
+            }
+        });
+    }
+
+    var _exampleTooltip = function() {
+        var slider = document.querySelector("#kt_slider_tooltip");
+
+        noUiSlider.create(slider, {
+            start: [20, 80, 120],
+            tooltips: [false, wNumb({decimals: 1}), true],
+            range: {
+                "min": 0,
+                "max": 200
+            }
+        });        
+    }
+
+    var _exampleSoftLimits = function() {
+        var slider = document.querySelector("#kt_slider_soft_limits");
+
+        noUiSlider.create(slider, {
+            start: 50,
+            range: {
+                min: 0,
+                max: 100
+            },
+            pips: {
+                mode: "values",
+                values: [20, 80],
+                density: 4
+            }
+        });
+    } 
+
+    return {
+        // Public Functions
+        init: function(element) {
+            _exampleBasic();
+            _exampleSizes();
+            _exampleVertical();
+            _exampleTooltip();
+            _exampleSoftLimits();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTFormsNouisliderDemos.init();
+});

assets/js/custom/documentation/forms/password-meter.js

@@ -0,0 +1,43 @@
+"use strict";
+
+// Class definition
+var KTGeneralPasswordMeterDemos = function() {
+    // Private functions
+    var _showScore = function() {
+        // Select show score button
+        const showScoreButton = document.getElementById('kt_password_meter_example_show_score');  
+
+        // Get password meter instance
+        const passwordMeterElement = document.querySelector("#kt_password_meter_example");
+        const passwordMeter = KTPasswordMeter.getInstance(passwordMeterElement);
+
+        // Handle show score button click
+        showScoreButton.addEventListener('click', e => {
+            // Get password score
+            const score = passwordMeter.getScore();
+
+            // Show popup confirmation 
+            Swal.fire({
+                text: "Current Password Score: " + score,
+                icon: "success",
+                buttonsStyling: false,
+                confirmButtonText: "Ok, got it!",
+                customClass: {
+                    confirmButton: "btn btn-primary"
+                }
+            });
+        });
+    }
+
+    return {
+        // Public Functions
+        init: function() {
+            _showScore();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTGeneralPasswordMeterDemos.init();
+});

assets/js/custom/documentation/forms/recaptcha.js

@@ -0,0 +1,31 @@
+"use strict";
+
+// Class definition
+var KTFormsGoogleRecaptchaDemos = function () {
+    // Private functions
+    var example = function (element) {
+        document.querySelector("#kt_form_submit_button").addEventListener("click", function (e) {
+            e.preventDefault();
+
+            grecaptcha.ready(function () {
+                if (grecaptcha.getResponse() === "") {
+                    alert("Please validate the Google reCaptcha.");
+                } else {
+                    alert("Successful validation! Now you can submit this form to your server side processing.");
+                }
+            });
+        });
+    }
+
+    return {
+        // Public Functions
+        init: function (element) {
+            example();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTFormsGoogleRecaptchaDemos.init();
+});

assets/js/custom/documentation/forms/select2.js

@@ -0,0 +1,74 @@
+"use strict";
+
+// Class definition
+var KTFormsSelect2Demo = function () {
+    // Private functions
+    var exampleCountry = function () {
+        // Format options
+        const format = (item) => {
+            if (!item.id) {
+                return item.text;
+            }
+
+            var url = hostUrl + 'media/' + item.element.getAttribute('data-kt-select2-country');
+            var img = $("<img>", {
+                class: "rounded-circle me-2",
+                width: 26,
+                src: url
+            });
+            var span = $("<span>", {
+                text: " " + item.text
+            });
+            span.prepend(img);
+            return span;
+        }
+
+        // Init Select2 --- more info: https://select2.org/
+        $('#kt_docs_select2_country').select2({
+            templateResult: function (item) {
+                return format(item);
+            }
+        });
+    }
+
+    const exampleUsers = function () {
+        // Format options
+        const format = (item) => {
+            if (!item.id) {
+                return item.text;
+            }
+
+            var url = hostUrl + 'media/' + item.element.getAttribute('data-kt-select2-user');
+            var img = $("<img>", {
+                class: "rounded-circle me-2",
+                width: 26,
+                src: url
+            });
+            var span = $("<span>", {
+                text: " " + item.text
+            });
+            span.prepend(img);
+            return span;
+        }
+
+        // Init Select2 --- more info: https://select2.org/
+        $('#kt_docs_select2_users').select2({
+            templateResult: function (item) {
+                return format(item);
+            }
+        });
+    }
+
+    return {
+        // Public Functions
+        init: function () {
+            exampleCountry();
+            exampleUsers();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTFormsSelect2Demo.init();
+});

assets/js/custom/documentation/forms/tagify.js

@@ -0,0 +1,275 @@
+"use strict";
+
+// Class definition
+var KTFormsTagifyDemos = function () {
+    // Private functions
+    var example1 = function (element) {
+        // The DOM elements you wish to replace with Tagify
+        var input1 = document.querySelector("#kt_tagify_1");
+        var input2 = document.querySelector("#kt_tagify_2");
+
+        // Initialize Tagify components on the above inputs
+        new Tagify(input1, {
+            placeholder: "Type something"
+        });
+        new Tagify(input2, {
+            placeholder: "Type something"
+        });
+    }
+
+    var example2 = function (element) {
+        // The DOM elements you wish to replace with Tagify
+        var input1 = document.querySelector("#kt_tagify_3");
+        var input2 = document.querySelector("#kt_tagify_4");
+        var input3 = document.querySelector("#kt_tagify_5");
+
+        // Initialize Tagify components on the above inputs
+        new Tagify(input1);
+        new Tagify(input2);
+        new Tagify(input3);
+    }
+
+    var example3 = function (element) {
+        // The DOM elements you wish to replace with Tagify
+        var input1 = document.querySelector("#kt_tagify_6");
+        var input2 = document.querySelector("#kt_tagify_7");
+
+        // Initialize Tagify components on the above inputs
+        new Tagify(input1, {
+            whitelist: ["A# .NET", "A# (Axiom)", "A-0 System", "A+", "A++", "ABAP", "ABC", "ABC ALGOL", "ABSET", "ABSYS", "ACC", "Accent", "Ace DASL", "ACL2", "Avicsoft", "ACT-III", "Action!", "ActionScript", "Ada", "Adenine", "Agda", "Agilent VEE", "Agora", "AIMMS", "Alef", "ALF", "ALGOL 58", "ALGOL 60", "ALGOL 68", "ALGOL W", "Alice", "Alma-0", "AmbientTalk", "Amiga E", "AMOS", "AMPL", "Apex (Salesforce.com)", "APL", "AppleScript", "Arc", "ARexx", "Argus", "AspectJ", "Assembly language", "ATS", "Ateji PX", "AutoHotkey", "Autocoder", "AutoIt", "AutoLISP / Visual LISP", "Averest", "AWK", "Axum", "Active Server Pages", "ASP.NET", "B", "Babbage", "Bash", "BASIC", "bc", "BCPL", "BeanShell", "Batch (Windows/Dos)", "Bertrand", "BETA", "Bigwig", "Bistro", "BitC", "BLISS", "Blockly", "BlooP", "Blue", "Boo", "Boomerang", "Bourne shell (including bash and ksh)", "BREW", "BPEL", "B", "C--", "C++ – ISO/IEC 14882", "C# – ISO/IEC 23270", "C/AL", "Caché ObjectScript", "C Shell", "Caml", "Cayenne", "CDuce", "Cecil", "Cesil", "Céu", "Ceylon", "CFEngine", "CFML", "Cg", "Ch", "Chapel", "Charity", "Charm", "Chef", "CHILL", "CHIP-8", "chomski", "ChucK", "CICS", "Cilk", "Citrine (programming language)", "CL (IBM)", "Claire", "Clarion", "Clean", "Clipper", "CLIPS", "CLIST", "Clojure", "CLU", "CMS-2", "COBOL – ISO/IEC 1989", "CobolScript – COBOL Scripting language", "Cobra", "CODE", "CoffeeScript", "ColdFusion", "COMAL", "Combined Programming Language (CPL)", "COMIT", "Common Intermediate Language (CIL)", "Common Lisp (also known as CL)", "COMPASS", "Component Pascal", "Constraint Handling Rules (CHR)", "COMTRAN", "Converge", "Cool", "Coq", "Coral 66", "Corn", "CorVision", "COWSEL", "CPL", "CPL", "Cryptol", "csh", "Csound", "CSP", "CUDA", "Curl", "Curry", "Cybil", "Cyclone", "Cython", "Java", "Javascript", "M2001", "M4", "M#", "Machine code", "MAD (Michigan Algorithm Decoder)", "MAD/I", "Magik", "Magma", "make", "Maple", "MAPPER now part of BIS", "MARK-IV now VISION:BUILDER", "Mary", "MASM Microsoft Assembly x86", "MATH-MATIC", "Mathematica", "MATLAB", "Maxima (see also Macsyma)", "Max (Max Msp – Graphical Programming Environment)", "Maya (MEL)", "MDL", "Mercury", "Mesa", "Metafont", "Microcode", "MicroScript", "MIIS", "Milk (programming language)", "MIMIC", "Mirah", "Miranda", "MIVA Script", "ML", "Model 204", "Modelica", "Modula", "Modula-2", "Modula-3", "Mohol", "MOO", "Mortran", "Mouse", "MPD", "Mathcad", "MSIL – deprecated name for CIL", "MSL", "MUMPS", "Mystic Programming L"],
+            maxTags: 10,
+            dropdown: {
+                maxItems: 20,           // <- mixumum allowed rendered suggestions
+                classname: "tagify__inline__suggestions", // <- custom classname for this dropdown, so it could be targeted
+                enabled: 0,             // <- show suggestions on focus
+                closeOnSelect: false    // <- do not hide the suggestions dropdown once an item has been selected
+            }
+        });
+
+        new Tagify(input2, {
+            whitelist: ["A# .NET", "A# (Axiom)", "A-0 System", "A+", "A++", "ABAP", "ABC", "ABC ALGOL", "ABSET", "ABSYS", "ACC", "Accent", "Ace DASL", "ACL2", "Avicsoft", "ACT-III", "Action!", "ActionScript", "Ada", "Adenine", "Agda", "Agilent VEE", "Agora", "AIMMS", "Alef", "ALF", "ALGOL 58", "ALGOL 60", "ALGOL 68", "ALGOL W", "Alice", "Alma-0", "AmbientTalk", "Amiga E", "AMOS", "AMPL", "Apex (Salesforce.com)", "APL", "AppleScript", "Arc", "ARexx", "Argus", "AspectJ", "Assembly language", "ATS", "Ateji PX", "AutoHotkey", "Autocoder", "AutoIt", "AutoLISP / Visual LISP", "Averest", "AWK", "Axum", "Active Server Pages", "ASP.NET", "B", "Babbage", "Bash", "BASIC", "bc", "BCPL", "BeanShell", "Batch (Windows/Dos)", "Bertrand", "BETA", "Bigwig", "Bistro", "BitC", "BLISS", "Blockly", "BlooP", "Blue", "Boo", "Boomerang", "Bourne shell (including bash and ksh)", "BREW", "BPEL", "B", "C--", "C++ – ISO/IEC 14882", "C# – ISO/IEC 23270", "C/AL", "Caché ObjectScript", "C Shell", "Caml", "Cayenne", "CDuce", "Cecil", "Cesil", "Céu", "Ceylon", "CFEngine", "CFML", "Cg", "Ch", "Chapel", "Charity", "Charm", "Chef", "CHILL", "CHIP-8", "chomski", "ChucK", "CICS", "Cilk", "Citrine (programming language)", "CL (IBM)", "Claire", "Clarion", "Clean", "Clipper", "CLIPS", "CLIST", "Clojure", "CLU", "CMS-2", "COBOL – ISO/IEC 1989", "CobolScript – COBOL Scripting language", "Cobra", "CODE", "CoffeeScript", "ColdFusion", "COMAL", "Combined Programming Language (CPL)", "COMIT", "Common Intermediate Language (CIL)", "Common Lisp (also known as CL)", "COMPASS", "Component Pascal", "Constraint Handling Rules (CHR)", "COMTRAN", "Converge", "Cool", "Coq", "Coral 66", "Corn", "CorVision", "COWSEL", "CPL", "CPL", "Cryptol", "csh", "Csound", "CSP", "CUDA", "Curl", "Curry", "Cybil", "Cyclone", "Cython", "Java", "Javascript", "M2001", "M4", "M#", "Machine code", "MAD (Michigan Algorithm Decoder)", "MAD/I", "Magik", "Magma", "make", "Maple", "MAPPER now part of BIS", "MARK-IV now VISION:BUILDER", "Mary", "MASM Microsoft Assembly x86", "MATH-MATIC", "Mathematica", "MATLAB", "Maxima (see also Macsyma)", "Max (Max Msp – Graphical Programming Environment)", "Maya (MEL)", "MDL", "Mercury", "Mesa", "Metafont", "Microcode", "MicroScript", "MIIS", "Milk (programming language)", "MIMIC", "Mirah", "Miranda", "MIVA Script", "ML", "Model 204", "Modelica", "Modula", "Modula-2", "Modula-3", "Mohol", "MOO", "Mortran", "Mouse", "MPD", "Mathcad", "MSIL – deprecated name for CIL", "MSL", "MUMPS", "Mystic Programming L"],
+            maxTags: 10,
+            dropdown: {
+                maxItems: 20,           // <- mixumum allowed rendered suggestions
+                classname: "", // <- custom classname for this dropdown, so it could be targeted
+                enabled: 0,             // <- show suggestions on focus
+                closeOnSelect: false    // <- do not hide the suggestions dropdown once an item has been selected
+            }
+        });
+    }
+
+    var example4 = function (element) {
+        // The DOM elements you wish to replace with Tagify
+        var input1 = document.querySelector("#kt_tagify_8");
+
+        // Initialize Tagify components on the above inputs
+        new Tagify(input1);
+    }
+
+    const exampleCountry = () => {
+        var tagify = new Tagify(document.querySelector('#kt_tagify_country'), {
+            delimiters: null,
+            templates: {
+                tag: function (tagData) {
+                    const countryPath = hostUrl + 'media/flags/' + tagData.value.toLowerCase().replace(/\s+/g, '-') + '.svg';
+                    try {
+                        // _ESCAPE_START_
+                        return `<tag title='${tagData.value}' contenteditable='false' spellcheck="false" class='tagify__tag ${tagData.class ? tagData.class : ""}' ${this.getAttributes(tagData)}>
+                                <x title='remove tag' class='tagify__tag__removeBtn'></x>
+                                <div class="d-flex align-items-center">
+                                    ${tagData.code ?
+                                `<img onerror="this.style.visibility = 'hidden'" class="w-25px rounded-circle me-2" src='${countryPath}' />` : ''
+                            }
+                                    <span class='tagify__tag-text'>${tagData.value}</span>
+                                </div>
+                            </tag>`
+                        // _ESCAPE_END_
+                    }
+                    catch (err) { }
+                },
+
+                dropdownItem: function (tagData) {
+                    const countryPath = hostUrl + 'media/flags/' + tagData.value.toLowerCase().replace(/\s+/g, '-') + '.svg';
+                    try {
+                        // _ESCAPE_START_
+                        return `<div class='tagify__dropdown__item ${tagData.class ? tagData.class : ""}'>
+                                    <img onerror="this.style.visibility = 'hidden'" class="w-25px rounded-circle me-2"
+                                         src='${countryPath}' />
+                                    <span>${tagData.value}</span>
+                                </div>`
+                        // _ESCAPE_END_
+                    }
+                    catch (err) { }
+                }
+            },
+            enforceWhitelist: true,
+            whitelist: [
+                { value: 'Argentina', code: 'AR' },
+                { value: 'Australia', code: 'AU', searchBy: 'beach, sub-tropical' },
+                { value: 'Austria', code: 'AT' },
+                { value: 'Brazil', code: 'BR' },
+                { value: 'China', code: 'CN' },
+                { value: 'Egypt', code: 'EG' },
+                { value: 'Finland', code: 'FI' },
+                { value: 'France', code: 'FR' },
+                { value: 'Germany', code: 'DE' },
+                { value: 'Hong Kong', code: 'HK' },
+                { value: 'Hungary', code: 'HU' },
+                { value: 'Iceland', code: 'IS' },
+                { value: 'India', code: 'IN' },
+                { value: 'Indonesia', code: 'ID' },
+                { value: 'Italy', code: 'IT' },
+                { value: 'Jamaica', code: 'JM' },
+                { value: 'Japan', code: 'JP' },
+                { value: 'Jersey', code: 'JE' },
+                { value: 'Luxembourg', code: 'LU' },
+                { value: 'Mexico', code: 'MX' },
+                { value: 'Netherlands', code: 'NL' },
+                { value: 'New Zealand', code: 'NZ' },
+                { value: 'Norway', code: 'NO' },
+                { value: 'Philippines', code: 'PH' },
+                { value: 'Singapore', code: 'SG' },
+                { value: 'South Korea', code: 'KR' },
+                { value: 'Sweden', code: 'SE' },
+                { value: 'Switzerland', code: 'CH' },
+                { value: 'Thailand', code: 'TH' },
+                { value: 'Ukraine', code: 'UA' },
+                { value: 'United Kingdom', code: 'GB' },
+                { value: 'United States', code: 'US' },
+                { value: 'Vietnam', code: 'VN' }
+            ],
+            dropdown: {
+                enabled: 1, // suggest tags after a single character input
+                classname: 'extra-properties' // custom class for the suggestions dropdown
+            } // map tags' values to this property name, so this property will be the actual value and not the printed value on the screen
+        })
+
+        // add the first 2 tags and makes them readonly
+        var tagsToAdd = tagify.settings.whitelist.slice(0, 2);
+        tagify.addTags(tagsToAdd);
+    }
+
+    const exampleUsers = () => {
+        var inputElm = document.querySelector('#kt_tagify_users');
+
+        const usersList = [
+            { value: 1, name: 'Emma Smith', avatar: 'avatars/150-1.jpg', email: '[email protected]' },
+            { value: 2, name: 'Max Smith', avatar: 'avatars/150-26.jpg', email: '[email protected]' },
+            { value: 3, name: 'Sean Bean', avatar: 'avatars/150-4.jpg', email: '[email protected]' },
+            { value: 4, name: 'Brian Cox', avatar: 'avatars/150-15.jpg', email: '[email protected]' },
+            { value: 5, name: 'Francis Mitcham', avatar: 'avatars/150-8.jpg', email: '[email protected]' },
+            { value: 6, name: 'Dan Wilson', avatar: 'avatars/150-6.jpg', email: '[email protected]' },
+            { value: 7, name: 'Ana Crown', avatar: 'avatars/150-7.jpg', email: '[email protected]' },
+            { value: 8, name: 'John Miller', avatar: 'avatars/150-17.jpg', email: '[email protected]' }
+        ];
+
+        function tagTemplate(tagData) {
+            return `
+                <tag title="${(tagData.title || tagData.email)}"
+                        contenteditable='false'
+                        spellcheck='false'
+                        tabIndex="-1"
+                        class="${this.settings.classNames.tag} ${tagData.class ? tagData.class : ""}"
+                        ${this.getAttributes(tagData)}>
+                    <x title='' class='tagify__tag__removeBtn' role='button' aria-label='remove tag'></x>
+                    <div class="d-flex align-items-center">
+                        <div class='tagify__tag__avatar-wrap ps-0'>
+                            <img onerror="this.style.visibility='hidden'" class="rounded-circle w-25px me-2" src="${hostUrl}media/${tagData.avatar}">
+                        </div>
+                        <span class='tagify__tag-text'>${tagData.name}</span>
+                    </div>
+                </tag>
+            `
+        }
+
+        function suggestionItemTemplate(tagData) {
+            return `
+                <div ${this.getAttributes(tagData)}
+                    class='tagify__dropdown__item d-flex align-items-center ${tagData.class ? tagData.class : ""}'
+                    tabindex="0"
+                    role="option">
+
+                    ${tagData.avatar ? `
+                            <div class='tagify__dropdown__item__avatar-wrap me-2'>
+                                <img onerror="this.style.visibility='hidden'"  class="rounded-circle w-50px me-2" src="${hostUrl}media/${tagData.avatar}">
+                            </div>` : ''
+                        }
+
+                    <div class="d-flex flex-column">
+                        <strong>${tagData.name}</strong>
+                        <span>${tagData.email}</span>
+                    </div>
+                </div>
+            `
+        }
+
+        // initialize Tagify on the above input node reference
+        var tagify = new Tagify(inputElm, {
+            tagTextProp: 'name', // very important since a custom template is used with this property as text. allows typing a "value" or a "name" to match input with whitelist
+            enforceWhitelist: true,
+            skipInvalid: true, // do not remporarily add invalid tags
+            dropdown: {
+                closeOnSelect: false,
+                enabled: 0,
+                classname: 'users-list',
+                searchKeys: ['name', 'email']  // very important to set by which keys to search for suggesttions when typing
+            },
+            templates: {
+                tag: tagTemplate,
+                dropdownItem: suggestionItemTemplate
+            },
+            whitelist: usersList
+        })
+
+        tagify.on('dropdown:show dropdown:updated', onDropdownShow)
+        tagify.on('dropdown:select', onSelectSuggestion)
+
+        var addAllSuggestionsElm;
+
+        function onDropdownShow(e) {
+            var dropdownContentElm = e.detail.tagify.DOM.dropdown.content;
+
+            if (tagify.suggestedListItems.length > 1) {
+                addAllSuggestionsElm = getAddAllSuggestionsElm();
+
+                // insert "addAllSuggestionsElm" as the first element in the suggestions list
+                dropdownContentElm.insertBefore(addAllSuggestionsElm, dropdownContentElm.firstChild)
+            }
+        }
+
+        function onSelectSuggestion(e) {
+            if (e.detail.elm == addAllSuggestionsElm)
+                tagify.dropdown.selectAll.call(tagify);
+        }
+
+        // create a "add all" custom suggestion element every time the dropdown changes
+        function getAddAllSuggestionsElm() {
+            // suggestions items should be based on "dropdownItem" template
+            return tagify.parseTemplate('dropdownItem', [{
+                class: "addAll",
+                name: "Add all",
+                email: tagify.settings.whitelist.reduce(function (remainingSuggestions, item) {
+                    return tagify.isTagDuplicate(item.value) ? remainingSuggestions : remainingSuggestions + 1
+                }, 0) + " Members"
+            }]
+            )
+        }
+    }
+
+    return {
+        // Public Functions
+        init: function () {
+            example1();
+            example2();
+            example3();
+            example4();
+            exampleCountry();
+            exampleUsers();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTFormsTagifyDemos.init();
+});