Introduction

https://choices-js.github.io/Choices/

https://www.npmjs.com/package/choices.js

https://swiperjs.com/

https://www.npmjs.com/package/swiper

https://sweetalert2.github.io/

https://www.npmjs.com/package/sweetalert2

<!-- noUiSlider JS -->
<script src="../assets/libs/nouislider/nouislider.min.js"></script>
<script src="../assets/libs/wnumb/wNumb.min.js"></script>

/* default slider */
var slider = document.getElementById('slidermain');
noUiSlider.create(slider, {
    start: [30, 80],
    connect: true,
    range: {
        'min': 0,
        'max': 100
    }
});

https://refreshless.com/nouislider/

https://www.npmjs.com/package/nouislider

    /* To choose date */
    flatpickr("#date", {});

https://flatpickr.js.org/examples/

https://www.npmjs.com/package/flatpickr

https://simonwep.github.io/pickr/

https://www.npmjs.com/package/@simonwep/pickr

    

    var lightboxVideo = GLightbox({
        selector: '.glightbox'
    });
    lightboxVideo.on('slide_changed', ({ prev, current }) => {
        console.log('Prev slide', prev);
        console.log('Current slide', current);

        const { slideIndex, slideNode, slideConfig, player } = current;
    });

https://biati-digital.github.io/glightbox/

https://www.npmjs.com/package/glightbox

   <!-- Moment JS -->
   <script src="../assets/libs/moment/min/moment.min.js"></script>

   <!-- Fullcalendar JS -->
   <script src="../assets/libs/fullcalendar/index.global.min.js"></script>
   <script src="../assets/js/fullcalendar.js"></script>
    

https://fullcalendar.io/

https://www.npmjs.com/package/fullcalendar

<!-- Leaflet Maps JS -->
<script src="../assets/libs/leaflet/leaflet.js"></script>

    /* default map */
    var map = L.map('map').setView([51.505, -0.09], 13);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: '© OpenStreetMap'
    }).addTo(map);
    

https://leafletjs.com/

https://www.npmjs.com/package/leaflet

<!-- JSVector Maps JS -->
    <script src="../assets/libs/jsvectormap/js/jsvectormap.min.js"></script>

    <!-- JSVector Maps MapsJS -->
    <script src="../assets/libs/jsvectormap/maps/world-merc.js"></script>

    /* basic vector map */
    var map = new jsVectorMap({
    selector: "#vector-map",
    map: "world_merc",
    });
    

https://jsvectorjs.com/

https://www.npmjs.com/package/jsvectormap

 <!-- Google Maps API -->
<script src="https://maps.google.com/maps/api/js?key=AIzaSyCW16SmpzDNLsrP-npQii6_8vBu_EJvEjA"></script>
<script src="../assets/libs/gmaps/gmaps.min.js"></script>

/* basic map */
var map = new GMaps({
    el: '#google-map',
    lat: -12.043333,
    lng: -77.028333
});

https://hpneo.dev/gmaps/

https://www.npmjs.com/package/gmaps

 var myElement = document.getElementById('scroll');
    new SimpleBar(myElement, { autoHide: true });

https://grsmto.github.io/simplebar/

https://www.npmjs.com/package/simplebar

 <!-- Quill Editor JS -->
<script src="../assets/libs/quill/quill.min.js"></script>

/* quill snow editor */
var toolbarOptions = [
    [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
    [{ 'font': [] }],
    ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
    ['blockquote', 'code-block'],

    [{ 'header': 1 }, { 'header': 2 }],               // custom button values
    [{ 'list': 'ordered' }, { 'list': 'bullet' }],
    [{ 'script': 'sub' }, { 'script': 'super' }],      // superscript/subscript
    [{ 'indent': '-1' }, { 'indent': '+1' }],          // outdent/indent
    [{ 'direction': 'rtl' }],                         // text direction

    [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown

    [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
    [{ 'align': [] }],

    ['image', 'video'],
    ['clean']                                         // remove formatting button
];
var quill = new Quill('#editor', {
    modules: {
        toolbar: toolbarOptions
    },
    theme: 'snow'
});

https://quilljs.com/

https://www.npmjs.com/package/quill

<!-- Filepond JS -->
<script src="../assets/libs/filepond/filepond.min.js"></script>
<script src="../assets/libs/filepond-plugin-image-preview/filepond-plugin-image-preview.min.js"></script>
<script src="../assets/libs/filepond-plugin-image-exif-orientation/filepond-plugin-image-exif-orientation.min.js"></script>
<script src="../assets/libs/filepond-plugin-file-validate-size/filepond-plugin-file-validate-size.min.js"></script>
<script src="../assets/libs/filepond-plugin-file-encode/filepond-plugin-file-encode.min.js"></script>
<script src="../assets/libs/filepond-plugin-image-edit/filepond-plugin-image-edit.min.js"></script>
<script src="../assets/libs/filepond-plugin-file-validate-type/filepond-plugin-file-validate-type.min.js"></script>
<script src="../assets/libs/filepond-plugin-file-validate-type/filepond-plugin-file-validate-type.min.js"></script>
<script src="../assets/libs/filepond-plugin-image-crop/filepond-plugin-image-crop.min.js"></script>
<script src="../assets/libs/filepond-plugin-image-resize/filepond-plugin-image-resize.min.js"></script>
<script src="../assets/libs/filepond-plugin-image-transform/filepond-plugin-image-transform.min.js"></script>

/* filepond */
FilePond.registerPlugin(
    FilePondPluginImagePreview,
    FilePondPluginImageExifOrientation,
    FilePondPluginFileValidateSize,
    FilePondPluginFileEncode,
    FilePondPluginImageEdit,
    FilePondPluginFileValidateType,
    FilePondPluginImageCrop,
    FilePondPluginImageResize,
    FilePondPluginImageTransform
);

/* multiple upload */
const MultipleElement = document.querySelector('.multiple-filepond');
FilePond.create(MultipleElement,);

https://pqina.nl/filepond/

	https://www.npmjs.com/package/filepond

 <!-- Dropzone JS -->
<script src="../assets/libs/dropzone/dropzone-min.js"></script>

/* dropzone */
let myDropzone = new Dropzone(".dropzone");
    myDropzone.on("addedfile", file => {
});

https://www.dropzone.dev/

https://www.npmjs.com/package/dropzone

 <!-- Grid JS -->
<script src="../assets/libs/gridjs/gridjs.umd.js"></script>

// basic example
new gridjs.Grid({
    resizable: true,
    columns: [{
        name: "Date",
        width: "150px",
    }, {
        name: "Name",
        width: "150px",
    }, {
        name: "Email",
        width: "200px",
    }, {
        name: "ID",
        width: "150px",
    }, {
        name: "Price",
        width: "100px",
    }, {
        name: "Quantity",
        width: "100px",
    }, {
        name: "Total",
        width: "100px",
    }],
    data: [
        ["24-10-2022 12:47", "john", "john123@gmail.com", "#12012", "$1799", "1", "$1799"],
        ["12-09-2022 04:24", "mark", "markzenner23@gmail.com", "#12013", "$2479", "2", "$4958"],
        ["18-11-2022 18:43", "eoin", "eoin1992@gmail.com", "#12014", "$769", "1", "$769"],
        ["10-09-2022 10:35", "sarahcdd", "sarahcdd129@gmail.com", "#12015", "$1299", "3", "$3997"],
        ["27-10-2022 09:55", "afshin", "afshin@example.com", "#12016", "$1449", "1", "$1449"]
    ],
}).render(document.getElementById("grid-example1"));
// basic example

https://gridjs.io/

https://www.npmjs.com/package/gridjs

<!-- Rater JS -->
<script src="../assets/libs/rater-js/index.js"></script>  

 /* Basic Rater */
        var starRating1 = raterJs({
            starSize: 24,
            element: document.querySelector("#rater-basic"),
            rateCallback: function rateCallback(rating, done) {
                this.setRating(rating);
                done();
            }
        });
        /* Basic Rater */

https://fredolss.github.io/rater-js/

https://www.npmjs.com/package/rater-js

<!-- Auto Complete JS -->
    <script src="../assets/libs/@tarekraafat/autocomplete.js/autoComplete.min.js"></script>

    /* Auto Complete Basic */
    const autoCompleteJS = new autoComplete({
        selector: "#autoComplete",
        placeHolder: "Search for Food & Drinks Combo",
        data: {
            src: ['Pizza, Soda',
                'Burger, Milkshake',
                'Tacos, Margarita',
                'Pasta, Red Wine',
                'Sushi, Green Tea',
                'Steak, Whiskey',
                'Salad, Sparkling Water',
                'Chicken Wings, Beer',
                'Fish and Chips, Lemonade',
                'Burrito, Iced Tea'],
            cache: true,
        },
        resultItem: {
            highlight: true
        },
        events: {
            input: {
                selection: (event) => {
                    const selection = event.detail.selection.value;
                    autoCompleteJS.input.value = selection;
                }
            }
        }
        });
            /* Auto Complete Basic */

https://smartscheduling.com/en/documentation/autocomplete

https://www.npmjs.com/package/autocompleter

 <!-- Tagify JS -->
<script src="../assets/libs/@yaireo/tagify/tagify.js"></script>

<!-- Dragsort JS -->
<script src="../assets/libs/@yaireo/dragsort/dragsort.js"></script>

https://www.npmjs.com/package/@yaireo/dragsort

<!-- tagify  JS -->
 <script src="../assets/libs/@yaireo/tagify/tagify.js"></script>

 /* Basic Tagify */
 // The DOM element you wish to replace with Tagify
 var inputtagify = document.querySelector('input[name=basic]');

 // initialize Tagify on the above input node reference
 new Tagify(inputtagify)
 /* Basic Tagify */

https://www.npmjs.com/package/@yaireo/tagify

<!-- Dual ListBox JS -->
 <script src="../assets/libs/dual-listbox/dual-listbox.js"></script>

 /* Basic DualList */
    let dlb1 = new DualListbox('.select1');
/* Basic DualList */

https://maykinmedia.github.io/dual-listbox/

https://www.npmjs.com/package/dual-listbox

<!-- Emojji Picker JS  -->
 <script src="../assets/libs/fg-emoji-picker/fgEmojiPicker.js"></script>

 new FgEmojiPicker({
    trigger: [".emoji-picker"],
    insertInto: document.querySelector(".chat-message-space"),
    closeButton: true,
    position: ['top', 'right'],
    preFetch: true,
    dir:"../assets/libs/fg-emoji-picker/"
});

https://nolanlawson.github.io/emoji-picker-element/

https://www.npmjs.com/package/emoji-picker-element

<!-- intl-tel-input JS -->
<script src="../assets/libs/intl-tel-input/build/js/intlTelInput.min.js"></script>

/* intl-tel-input Basic */
const input = document.querySelector("#phone");
window.intlTelInput(input, {
    utilsScript: "../assets/libs/intl-tel-input/build/js/utils.js"
});
/* intl-tel-input Basic */

https://www.npmjs.com/package/intl-tel-input

<!-- Plyr JS -->
<script src="../assets/libs/plyr/plyr.min.js"></script>

const player = new Plyr('#player');

https://plyr.io/

	https://www.npmjs.com/package/plyr

<!-- Sortable  JS -->
<script src="../assets/libs/sortablejs/Sortable.min.js"></script>

/* simple sortable */
var simple = document.getElementById('simple-list');
new Sortable(simple, {
    animation: 150,
});
/* simple sortable */

https://sortablejs.github.io/Sortable/

https://www.npmjs.com/package/sortablejs

<!-- Toastify JS -->
                            <script src="../assets/libs/toastify-js/src/toastify.js"></script>
                            
                            /* Toastify js */
                            document.getElementById("toast-button").addEventListener("click", function () {
                            Toastify({
                                text: "I'm a toast Message",
                                duration: 3000,
                                newWindow: true,
                                close: true,
                                gravity: "top", // `top` or `bottom`
                                positionRight: true, // `true` or `false`
                                backgroundColor: "linear-gradient(to right, var(--primary-color), rgb(215, 124, 247))"
                            }).showToast();
                            });
                            

https://apvarun.github.io/toastify-js/

https://www.npmjs.com/package/toastify-js