deving

res/assets/js/forms/custom-validation-init.js

@@ -0,0 +1,4 @@
+!(function (window, document, $) {
+  "use strict";
+  $("input,select,textarea").not("[type=submit]").jqBootstrapValidation();
+})(window, document, jQuery);

res/assets/js/forms/datepicker-init.js

@@ -0,0 +1,12 @@
+// Date Picker
+jQuery(".mydatepicker, #datepicker, .input-group.date").datepicker();
+jQuery("#datepicker-autoclose").datepicker({
+  autoclose: true,
+  todayHighlight: true,
+});
+jQuery("#date-range").datepicker({
+  toggleActive: true,
+});
+jQuery("#datepicker-inline").datepicker({
+  todayHighlight: true,
+});

res/assets/js/forms/daterangepicker-init.js

@@ -0,0 +1,165 @@
+/*******************************************/
+// Basic Date Range Picker
+/*******************************************/
+$(".daterange").daterangepicker();
+
+/*******************************************/
+// Date & Time
+/*******************************************/
+$(".datetime").daterangepicker({
+  timePicker: true,
+  timePickerIncrement: 30,
+  locale: {
+    format: "MM/DD/YYYY h:mm A",
+  },
+});
+
+/*******************************************/
+//Calendars are not linked
+/*******************************************/
+$(".timeseconds").daterangepicker({
+  timePicker: true,
+  timePickerIncrement: 30,
+  timePicker24Hour: true,
+  timePickerSeconds: true,
+  locale: {
+    format: "MM-DD-YYYY h:mm:ss",
+  },
+});
+
+/*******************************************/
+// Single Date Range Picker
+/*******************************************/
+$(".singledate").daterangepicker({
+  singleDatePicker: true,
+  showDropdowns: true,
+});
+
+/*******************************************/
+// Auto Apply Date Range
+/*******************************************/
+$(".autoapply").daterangepicker({
+  autoApply: true,
+});
+
+/*******************************************/
+// Calendars are not linked
+/*******************************************/
+$(".linkedCalendars").daterangepicker({
+  linkedCalendars: false,
+});
+
+/*******************************************/
+// Date Limit
+/*******************************************/
+$(".dateLimit").daterangepicker({
+  dateLimit: {
+    days: 7,
+  },
+});
+
+/*******************************************/
+// Show Dropdowns
+/*******************************************/
+$(".showdropdowns").daterangepicker({
+  showDropdowns: true,
+});
+
+/*******************************************/
+// Show Week Numbers
+/*******************************************/
+$(".showweeknumbers").daterangepicker({
+  showWeekNumbers: true,
+});
+
+/*******************************************/
+// Date Ranges
+/*******************************************/
+$(".dateranges").daterangepicker({
+  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"),
+    ],
+  },
+});
+
+/*******************************************/
+// Always Show Calendar on Ranges
+/*******************************************/
+$(".shawCalRanges").daterangepicker({
+  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"),
+    ],
+  },
+  alwaysShowCalendars: true,
+});
+
+/*******************************************/
+// Top of the form-control open alignment
+/*******************************************/
+$(".drops").daterangepicker({
+  drops: "up", // up/down
+});
+
+/*******************************************/
+// Custom button options
+/*******************************************/
+$(".buttonClass").daterangepicker({
+  drops: "up",
+  buttonClasses: "btn",
+  applyClass: "btn-primary",
+  cancelClass: "bg-danger-subtle text-danger",
+});
+
+/*******************************************/
+// Language
+/*******************************************/
+$(".localeRange").daterangepicker({
+  ranges: {
+    "Aujourd'hui": [moment(), moment()],
+    Hier: [moment().subtract("days", 1), moment().subtract("days", 1)],
+    "Les 7 derniers jours": [moment().subtract("days", 6), moment()],
+    "Les 30 derniers jours": [moment().subtract("days", 29), moment()],
+    "Ce mois-ci": [moment().startOf("month"), moment().endOf("month")],
+    "le mois dernier": [
+      moment().subtract("month", 1).startOf("month"),
+      moment().subtract("month", 1).endOf("month"),
+    ],
+  },
+  locale: {
+    applyLabel: "Vers l'avant",
+    cancelLabel: "Annulation",
+    startLabel: "Date initiale",
+    endLabel: "Date limite",
+    customRangeLabel: "Sélectionner une date",
+    daysOfWeek: ["Di", "Lu", "Ma", "Me", "Je", "Ve", "Sa"],
+    monthNames: [
+      "Janvier",
+      "février",
+      "Mars",
+      "Avril",
+      "Маi",
+      "Juin",
+      "Juillet",
+      "Août",
+      "Septembre",
+      "Octobre",
+      "Novembre",
+      "Decembre",
+    ],
+    firstDay: 1,
+  },
+});

res/assets/js/forms/draggable-init.js

@@ -0,0 +1,47 @@
+$(function () {
+  dragula([document.getElementById("draggable-area")]),
+    dragula([document.getElementById("card-colors")])
+      .on("drag", function (e) {
+        e.className = e.className.replace("card-moved", "");
+      })
+      .on("drop", function (e) {
+        e.className += " card-moved";
+      })
+      .on("over", function (e, t) {
+        t.className += " card-over";
+      })
+      .on("out", function (e, t) {
+        t.className = t.className.replace("card-over", "");
+      }),
+    dragula(
+      [
+        document.getElementById("copy-left"),
+        document.getElementById("copy-right"),
+      ],
+      {
+        copy: !0,
+      }
+    ),
+    dragula(
+      [
+        document.getElementById("left-handles"),
+        document.getElementById("right-handles"),
+      ],
+      {
+        moves: function (e, t, n) {
+          return n.classList.contains("handle");
+        },
+      }
+    ),
+    dragula(
+      [
+        document.getElementById("left-titleHandles"),
+        document.getElementById("right-titleHandles"),
+      ],
+      {
+        moves: function (e, t, n) {
+          return n.classList.contains("titleArea");
+        },
+      }
+    );
+});

res/assets/js/forms/form-wizard.js

@@ -0,0 +1,177 @@
+//Basic Example
+$("#example-basic").steps({
+  headerTag: "h3",
+  bodyTag: "section",
+  transitionEffect: "slideLeft",
+  autoFocus: true,
+});
+
+// Basic Example with form
+var form = $("#example-form");
+form.validate({
+  errorPlacement: function errorPlacement(error, element) {
+    element.before(error);
+  },
+  rules: {
+    confirm: {
+      equalTo: "#password",
+    },
+  },
+});
+form.children("div").steps({
+  headerTag: "h3",
+  bodyTag: "section",
+  transitionEffect: "slideLeft",
+  onStepChanging: function (event, currentIndex, newIndex) {
+    form.validate().settings.ignore = ":disabled,:hidden";
+    return form.valid();
+  },
+  onFinishing: function (event, currentIndex) {
+    form.validate().settings.ignore = ":disabled";
+    return form.valid();
+  },
+  onFinished: function (event, currentIndex) {
+    alert("Submitted!");
+  },
+});
+
+// Advance Example
+
+var advanced_form = $("#example-advanced-form").show();
+
+advanced_form
+  .steps({
+    headerTag: "h3",
+    bodyTag: "fieldset",
+    transitionEffect: "slideLeft",
+    onStepChanging: function (event, currentIndex, newIndex) {
+      // Allways allow previous action even if the current form is not valid!
+      if (currentIndex > newIndex) {
+        return true;
+      }
+      // Forbid next action on "Warning" step if the user is to young
+      if (newIndex === 3 && Number($("#age-2").val()) < 18) {
+        return false;
+      }
+      // Needed in some cases if the user went back (clean up)
+      if (currentIndex < newIndex) {
+        // To remove error styles
+        advanced_form.find(".body:eq(" + newIndex + ") label.error").remove();
+        advanced_form.find(".body:eq(" + newIndex + ") .error").removeClass("error");
+      }
+      advanced_form.validate().settings.ignore = ":disabled,:hidden";
+      return advanced_form.valid();
+    },
+    onStepChanged: function (event, currentIndex, priorIndex) {
+      // Used to skip the "Warning" step if the user is old enough.
+      if (currentIndex === 2 && Number($("#age-2").val()) >= 18) {
+        advanced_form.steps("next");
+      }
+      // Used to skip the "Warning" step if the user is old enough and wants to the previous step.
+      if (currentIndex === 2 && priorIndex === 3) {
+        advanced_form.steps("previous");
+      }
+    },
+    onFinishing: function (event, currentIndex) {
+      advanced_form.validate().settings.ignore = ":disabled";
+      return advanced_form.valid();
+    },
+    onFinished: function (event, currentIndex) {
+      alert("Submitted!");
+    },
+  })
+  .validate({
+    errorPlacement: function errorPlacement(error, element) {
+      element.before(error);
+    },
+    rules: {
+      confirm: {
+        equalTo: "#password-2",
+      },
+    },
+  });
+
+// Dynamic Manipulation
+$("#example-manipulation").steps({
+  headerTag: "h3",
+  bodyTag: "section",
+  enableAllSteps: true,
+  enablePagination: false,
+});
+
+//Vertical Steps
+
+$("#example-vertical").steps({
+  headerTag: "h3",
+  bodyTag: "section",
+  transitionEffect: "slideLeft",
+  stepsOrientation: "vertical",
+});
+
+//Custom design form example
+$(".tab-wizard").steps({
+  headerTag: "h6",
+  bodyTag: "section",
+  transitionEffect: "fade",
+  titleTemplate: '<span class="step">#index#</span> #title#',
+  labels: {
+    finish: "Submit",
+  },
+  onFinished: function (event, currentIndex) {
+    swal(
+      "Form Submitted!",
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lorem erat eleifend ex semper, lobortis purus sed."
+    );
+  },
+});
+
+var form = $(".validation-wizard").show();
+
+$(".validation-wizard").steps({
+  headerTag: "h6",
+  bodyTag: "section",
+  transitionEffect: "fade",
+  titleTemplate: '<span class="step">#index#</span> #title#',
+  labels: {
+    finish: "Submit",
+  },
+  onStepChanging: function (event, currentIndex, newIndex) {
+    return (
+      currentIndex > newIndex ||
+      (!(3 === newIndex && Number($("#age-2").val()) < 18) &&
+        (currentIndex < newIndex &&
+          (form.find(".body:eq(" + newIndex + ") label.error").remove(),
+          form.find(".body:eq(" + newIndex + ") .error").removeClass("error")),
+        (form.validate().settings.ignore = ":disabled,:hidden"),
+        form.valid()))
+    );
+  },
+  onFinishing: function (event, currentIndex) {
+    return (form.validate().settings.ignore = ":disabled"), form.valid();
+  },
+  onFinished: function (event, currentIndex) {
+    swal(
+      "Form Submitted!",
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lorem erat eleifend ex semper, lobortis purus sed."
+    );
+  },
+}),
+  $(".validation-wizard").validate({
+    ignore: "input[type=hidden]",
+    errorClass: "text-danger",
+    successClass: "text-success",
+    highlight: function (element, errorClass) {
+      $(element).removeClass(errorClass);
+    },
+    unhighlight: function (element, errorClass) {
+      $(element).removeClass(errorClass);
+    },
+    errorPlacement: function (error, element) {
+      error.insertAfter(element);
+    },
+    rules: {
+      email: {
+        email: !0,
+      },
+    },
+  });

res/assets/js/forms/mask.init.js

@@ -0,0 +1,38 @@
+$(function (e) {
+  "use strict";
+  $(".date-inputmask").inputmask({
+    alias: "datetime",
+    inputFormat: "mm/dd/yyyy",
+    placeholder: "mm/dd/yyyy",
+  }),
+    $(".phone-inputmask").inputmask("(999) 999-9999"),
+    $(".international-inputmask").inputmask("+9(999)999-9999"),
+    $(".xphone-inputmask").inputmask("(999) 999-9999 / x999999"),
+    $(".purchase-inputmask").inputmask("aaaa 9999-****"),
+    $(".cc-inputmask").inputmask("9999 9999 9999 9999"),
+    $(".ssn-inputmask").inputmask("999-99-9999"),
+    $(".isbn-inputmask").inputmask("999-99-999-9999-9"),
+    $(".currency-inputmask").inputmask("$9999"),
+    $(".percentage-inputmask").inputmask("99%"),
+    $(".optional-inputmask").inputmask("(99) 9999[9]-9999"),
+    $(".decimal-inputmask").inputmask({
+      alias: "decimal",
+      radixPoint: ".",
+    }),
+    $(".email-inputmask").inputmask({
+      mask: "*{1,20}[.*{1,20}][.*{1,20}][.*{1,20}]@*{1,20}[*{2,6}][*{1,2}].*{1,}[.*{2,6}][.*{1,2}]",
+      greedy: !1,
+      onBeforePaste: function (n, a) {
+        return (e = e.toLowerCase()).replace("mailto:", "");
+      },
+      definitions: {
+        "*": {
+          validator: "[0-9A-Za-z!#$%&'*+/=?^_`{|}~/-]",
+          cardinality: 1,
+          casing: "lower",
+        },
+      },
+    }),
+    $("#num-letter").inputmask("999-AAA"),
+    $("#date-time-once").inputmask();
+});

res/assets/js/forms/material-datepicker-init.js

@@ -0,0 +1,27 @@
+// MAterial Date picker
+$("#mdate").bootstrapMaterialDatePicker({ weekStart: 0, time: false });
+$("#timepicker").bootstrapMaterialDatePicker({
+  format: "HH:mm",
+  time: true,
+  date: false,
+});
+$("#date-format").bootstrapMaterialDatePicker({
+  format: "dddd DD MMMM YYYY - HH:mm",
+});
+
+$("#min-date").bootstrapMaterialDatePicker({
+  format: "DD/MM/YYYY HH:mm",
+  minDate: new Date(),
+});
+$("#date-fr").bootstrapMaterialDatePicker({
+  format: "DD/MM/YYYY HH:mm",
+  lang: "fr",
+  weekStart: 1,
+  cancelText: "ANNULER",
+});
+$("#date-end").bootstrapMaterialDatePicker({ weekStart: 0 });
+$("#date-start")
+  .bootstrapMaterialDatePicker({ weekStart: 0 })
+  .on("change", function (e, date) {
+    $("#date-end").bootstrapMaterialDatePicker("setMinDate", date);
+  });

res/assets/js/forms/quill-init.js

@@ -0,0 +1,3 @@
+var quill = new Quill("#editor", {
+  theme: "snow",
+});

res/assets/js/forms/repeater-init.js

@@ -0,0 +1,38 @@
+$(function () {
+  "use strict";
+
+  // Default
+  $(".repeater-default").repeater();
+
+  // Custom Show / Hide Configurations
+  $(".file-repeater, .email-repeater").repeater({
+    show: function () {
+      $(this).slideDown();
+    },
+    hide: function (remove) {
+      if (confirm("Are you sure you want to remove this item?")) {
+        $(this).slideUp(remove);
+      }
+    },
+  });
+});
+
+var room = 1;
+
+function education_fields() {
+  room++;
+  var objTo = document.getElementById("education_fields");
+  var divtest = document.createElement("div");
+  divtest.setAttribute("class", "mb-3 removeclass" + room);
+  var rdiv = "removeclass" + room;
+  divtest.innerHTML =
+    '<form class="row"><div class="col-sm-3"><div class="form-group"><input type="text" class="form-control" id="Schoolname" name="Schoolname" placeholder="School Name"></div></div><div class="col-sm-2"> <div class="form-group"> <input type="text" class="form-control" id="Age" name="Age" placeholder="Age"> </div></div><div class="col-sm-2"> <div class="form-group"> <input type="text" class="form-control" id="Degree" name="Degree" placeholder="Degree"> </div></div><div class="col-sm-3"> <div class="form-group"> <select class="form-select" id="educationDate" name="educationDate"> <option>Date</option> <option value="2015">2015</option> <option value="2016">2016</option> <option value="2017">2017</option> <option value="2018">2018</option> </select> </div></div><div class="col-sm-2"> <div class="form-group"> <button class="btn btn-danger" type="button" onclick="remove_education_fields(' +
+    room +
+    ');"> <i class="ti ti-minus"></i> </button> </div></div></form>';
+
+  objTo.appendChild(divtest);
+}
+
+function remove_education_fields(rid) {
+  $(".removeclass" + rid).remove();
+}

res/assets/js/forms/select2.init.js

@@ -0,0 +1,431 @@
+//
+// For select 2
+//
+$(".select2").select2();
+
+// Single Select Placeholder
+$("#select2-with-placeholder").select2({
+  placeholder: "Select a state",
+  allowClear: true,
+});
+
+//
+// Hiding the search box
+//
+$("#select2-search-hide").select2({
+  minimumResultsForSearch: Infinity,
+});
+
+//
+// Select With Icon
+//
+$("#select2-with-icons").select2({
+  minimumResultsForSearch: Infinity,
+  templateResult: iconFormat,
+  templateSelection: iconFormat,
+  escapeMarkup: function (es) {
+    return es;
+  },
+});
+
+function iconFormat(icon) {
+  var originalOption = icon.element;
+  if (!icon.id) {
+    return icon.text;
+  }
+  var $icon =
+    "<i class='fab fa-" + $(icon.element).data("icon") + "'></i>" + icon.text;
+  return $icon;
+}
+
+//
+// Limiting the number of selections
+//
+$("#select2-max-length").select2({
+  maximumSelectionLength: 3,
+  placeholder: "Select only maximum 3 items",
+});
+
+//
+//multiple-select2-with-icons
+//
+$("#multiple-select2-with-icons").select2({
+  minimumResultsForSearch: Infinity,
+  templateResult: iconFormat,
+  templateSelection: iconFormat,
+  escapeMarkup: function (es) {
+    return es;
+  },
+});
+
+function iconFormat(icon) {
+  var originalOption = icon.element;
+  if (!icon.id) {
+    return icon.text;
+  }
+  var $icon =
+    "<i class='fab fa-" + $(icon.element).data("icon") + "'></i>" + icon.text;
+  return $icon;
+}
+
+//
+// DOM Events
+//
+var $selectEvent = $(".js-events");
+$selectEvent.select2({
+  placeholder: "DOM Events",
+});
+$selectEvent.on("select2:open", function (e) {
+  alert("Open Event Fired.");
+});
+$selectEvent.on("select2:close", function (e) {
+  alert("Close Event Fired.");
+});
+$selectEvent.on("select2:select", function (e) {
+  alert("Select Event Fired.");
+});
+$selectEvent.on("select2:unselect", function (e) {
+  alert("Unselect Event Fired.");
+});
+
+$selectEvent.on("change", function (e) {
+  alert("Change Event Fired.");
+});
+
+//
+// Programmatic access
+//
+var $select = $(".js-programmatic").select2();
+var $selectMulti = $(".js-programmatic-multiple").select2();
+$selectMulti.select2({
+  placeholder: "Programmatic Events",
+});
+$(".js-programmatic-set-val").on("click", function () {
+  $select.val("NM").trigger("change");
+});
+
+$(".js-programmatic-open").on("click", function () {
+  $select.select2("open");
+});
+$(".js-programmatic-close").on("click", function () {
+  $select.select2("close");
+});
+
+$(".js-programmatic-init").on("click", function () {
+  $select.select2();
+});
+$(".js-programmatic-destroy").on("click", function () {
+  $select.select2("destroy");
+});
+
+$(".js-programmatic-multi-set-val").on("click", function () {
+  $selectMulti.val(["UT", "NM"]).trigger("change");
+});
+$(".js-programmatic-multi-clear").on("click", function () {
+  $selectMulti.val(null).trigger("change");
+});
+
+//
+// Loading array data
+//
+var data = [
+  { id: 0, text: "Web Designer" },
+  { id: 1, text: "Mobile App Developer" },
+  { id: 2, text: "Graphics Designer" },
+  { id: 3, text: "Hacker" },
+  { id: 4, text: "Animation Designer" },
+];
+
+$("#select2-data-array").select2({
+  data: data,
+});
+
+//
+// Loading remote data
+//
+$(".select2-data-ajax").select2({
+  placeholder: "Loading remote data",
+  ajax: {
+    url: "http://api.github.com/search/repositories",
+    dataType: "json",
+    delay: 250,
+    data: function (params) {
+      return {
+        q: params.term, // search term
+        page: params.page,
+      };
+    },
+    processResults: function (data, params) {
+      // parse the results into the format expected by Select2
+      // since we are using custom formatting functions we do not need to
+      // alter the remote JSON data, except to indicate that infinite
+      // scrolling can be used
+      params.page = params.page || 1;
+
+      return {
+        results: data.items,
+        pagination: {
+          more: params.page * 30 < data.total_count,
+        },
+      };
+    },
+    cache: true,
+  },
+  escapeMarkup: function (markup) {
+    return markup;
+  }, // let our custom formatter work
+  minimumInputLength: 1,
+  templateResult: formatRepo, // omitted for brevity, see the source of this page
+  templateSelection: formatRepoSelection, // omitted for brevity, see the source of this page
+});
+
+function formatRepo(repo) {
+  if (repo.loading) return repo.text;
+
+  var markup =
+    "<div class='select2-result-repository clearfix'>" +
+    "<div class='select2-result-repository__avatar'><img src='" +
+    repo.owner.avatar_url +
+    "' /></div>" +
+    "<div class='select2-result-repository__meta'>" +
+    "<div class='select2-result-repository__title'>" +
+    repo.full_name +
+    "</div>";
+
+  if (repo.description) {
+    markup +=
+      "<div class='select2-result-repository__description'>" +
+      repo.description +
+      "</div>";
+  }
+
+  markup +=
+    "<div class='select2-result-repository__statistics'>" +
+    "<div class='select2-result-repository__forks'><i class='la la-code-fork mr-0'></i> " +
+    repo.forks_count +
+    " Forks</div>" +
+    "<div class='select2-result-repository__stargazers'><i class='la la-star-o mr-0'></i> " +
+    repo.stargazers_count +
+    " Stars</div>" +
+    "<div class='select2-result-repository__watchers'><i class='la la-eye mr-0'></i> " +
+    repo.watchers_count +
+    " Watchers</div>" +
+    "</div>" +
+    "</div></div>";
+
+  return markup;
+}
+
+function formatRepoSelection(repo) {
+  return repo.full_name || repo.text;
+}
+
+//
+// Multiple languages
+//
+$("#select2-language").select2({
+  language: "es",
+});
+
+//
+// Theme support
+//
+$("#select2-theme").select2({
+  placeholder: "Classic Theme",
+  theme: "classic",
+});
+
+//
+//templete with flag icons
+//
+$("#template-with-flag-icons").select2({
+  minimumResultsForSearch: Infinity,
+  templateResult: iconFormat,
+  templateSelection: iconFormat,
+  escapeMarkup: function (es) {
+    return es;
+  },
+});
+
+function iconFormat(ficon) {
+  var originalOption = ficon.element;
+  if (!ficon.id) {
+    return ficon.text;
+  }
+  var $ficon =
+    "<i class='flag-icon flag-icon-" +
+    $(ficon.element).data("flag") +
+    "'></i>" +
+    ficon.text;
+  return $ficon;
+}
+
+//
+// Tagging support
+//
+$("#select2-with-tags").select2({
+  tags: true,
+});
+
+//
+// Automatic tokenization
+//
+$("#select2-with-tokenizer").select2({
+  tags: true,
+  tokenSeparators: [",", " "],
+});
+
+//
+// RTL support
+//
+$("#select2-rtl-multiple").select2({
+  placeholder: "RTL Select",
+  dir: "rtl",
+});
+
+//
+// Language Files
+//
+$("#select2-transliteration-multiple").select2({
+  placeholder: "Type 'aero'",
+});
+
+//
+// Color Options
+//
+
+//
+// Background Color
+//
+$(".select2-with-bg").each(function (i, obj) {
+  var variation = "",
+    textVariation = "",
+    textColor = "";
+  var color = $(this).data("bgcolor");
+  variation = $(this).data("bgcolor-variation");
+  textVariation = $(this).data("text-variation");
+  textColor = $(this).data("text-color");
+  if (textVariation !== "") {
+    textVariation = " " + textVariation;
+  }
+  if (variation !== "") {
+    variation = " bg-" + variation;
+  }
+  var className =
+    "bg-" +
+    color +
+    variation +
+    " " +
+    textColor +
+    textVariation +
+    " border-" +
+    color;
+
+  $(this).select2({
+    containerCssClass: className,
+  });
+});
+
+//
+// Menu Background Color
+//
+$(".select2-with-menu-bg").each(function (i, obj) {
+  var variation = "",
+    textVariation = "",
+    textColor = "";
+  var color = $(this).data("bgcolor");
+  variation = $(this).data("bgcolor-variation");
+  textVariation = $(this).data("text-variation");
+  textColor = $(this).data("text-color");
+  if (variation !== "") {
+    variation = " bg-" + variation;
+  }
+  if (textVariation !== "") {
+    textVariation = " " + textVariation;
+  }
+  var className =
+    "bg-" +
+    color +
+    variation +
+    " " +
+    textColor +
+    textVariation +
+    " border-" +
+    color;
+
+  $(this).select2({
+    dropdownCssClass: className,
+  });
+});
+
+//
+// Full Background Color
+//
+$(".select2-with-full-bg").each(function (i, obj) {
+  var variation = "",
+    textVariation = "",
+    textColor = "";
+  var color = $(this).data("bgcolor");
+  variation = $(this).data("bgcolor-variation");
+  textVariation = $(this).data("text-variation");
+  textColor = $(this).data("text-color");
+  if (variation !== "") {
+    variation = " bg-" + variation;
+  }
+  if (textVariation !== "") {
+    textVariation = " " + textVariation;
+  }
+  var className =
+    "bg-" +
+    color +
+    variation +
+    " " +
+    textColor +
+    textVariation +
+    " border-" +
+    color;
+
+  $(this).select2({
+    containerCssClass: className,
+    dropdownCssClass: className,
+  });
+});
+
+$("select[data-text-color]").each(function (i, obj) {
+  var text = $(this).data("text-color"),
+    textVariation;
+  textVariation = $(this).data("text-variation");
+  if (textVariation !== "") {
+    textVariation = " " + textVariation;
+  }
+  $(this)
+    .next(".select2")
+    .find(".select2-selection__rendered")
+    .addClass(text + textVariation);
+});
+
+//
+// Border Color
+//
+$(".select2-with-border").each(function (i, obj) {
+  var variation = "",
+    textVariation = "",
+    textColor = "";
+  var color = $(this).data("border-color");
+  textVariation = $(this).data("text-variation");
+  variation = $(this).data("border-variation");
+  textColor = $(this).data("text-color");
+  if (textVariation !== "") {
+    textVariation = " " + textVariation;
+  }
+  if (variation !== "") {
+    variation = " border-" + variation;
+  }
+
+  var className =
+    "border-" + color + " " + variation + " " + textColor + textVariation;
+
+  $(this).select2({
+    containerCssClass: className,
+  });
+});

res/assets/js/forms/summernote-init.js

@@ -0,0 +1,42 @@
+// 
+//default editor
+// 
+$(".summernote").summernote({
+    height: 350, // set editor height
+    minHeight: null, // set minimum height of editor
+    maxHeight: null, // set maximum height of editor
+    focus: false, // set focus to editable area after initializing summernote
+});
+
+// 
+//inline-editor
+// 
+$(".inline-editor").summernote({
+    airMode: true,
+});
+
+// 
+//edit and save mode
+// 
+(window.edit = function () {
+    $(".click2edit").summernote();
+}),
+    (window.save = function () {
+        $(".click2edit").summernote("destroy");
+    });
+
+var edit = function () {
+    $(".click2edit").summernote({ focus: true });
+};
+
+var save = function () {
+    var markup = $(".click2edit").summernote("code");
+    $(".click2edit").summernote("destroy");
+};
+
+// 
+//airmode editor
+// 
+$(".airmode-summer").summernote({
+    airMode: true,
+});

res/assets/js/forms/sweet-alert.init.js

@@ -0,0 +1,385 @@
+!(function ($) {
+  "use strict";
+
+  var SweetAlert = function () {};
+
+  //examples
+  (SweetAlert.prototype.init = function () {
+    //Basic
+    $("#sa-basic").click(function () {
+      Swal.fire("Here's a message!");
+    });
+
+    //A title with a text under
+    $("#sa-title").click(function () {
+      Swal.fire(
+        "Here's a message!",
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lorem erat eleifend ex semper, lobortis purus sed."
+      );
+    });
+
+    //Success Message
+    $("#sa-success").click(function () {
+      Swal.fire(
+        "Good job!",
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lorem erat eleifend ex semper, lobortis purus sed.",
+        "success"
+      );
+    });
+
+    //Warning Message
+    $("#sa-warning").click(function () {
+      Swal.fire(
+        {
+          title: "Are you sure?",
+          text: "You will not be able to recover this imaginary file!",
+          type: "warning",
+          showCancelButton: true,
+          confirmButtonColor: "#DD6B55",
+          confirmButtonText: "Yes, delete it!",
+          closeOnConfirm: false,
+        },
+        function () {
+          swal("Deleted!", "Your imaginary file has been deleted.", "success");
+        }
+      );
+    });
+
+    //Custom Image
+    $("#sa-image").click(function () {
+      Swal.fire({
+        title: "Govinda!",
+        text: "Recently joined twitter",
+        imageUrl: "../assets/images/profile/user-2.jpg",
+      });
+    });
+
+    //Auto Close Timer
+    $("#sa-close").click(function () {
+      Swal.fire({
+        title: "Auto close alert!",
+        text: "I will close in 2 seconds.",
+        timer: 2000,
+        showConfirmButton: false,
+      });
+    });
+
+    $("#model-error-icon").click(function () {
+      Swal.fire({
+        type: "error",
+        title: "Oops...",
+        text: "Something went wrong!",
+        footer: "<a href>Why do I have this issue?</a>",
+      });
+    });
+
+    $("#sa-html").click(function () {
+      Swal.fire({
+        title: "<strong>HTML <u>example</u></strong>",
+        type: "info",
+        html:
+          "You can use <b>bold text</b>, " +
+          '<a href="//github.com">links</a> ' +
+          "and other HTML tags",
+        showCloseButton: true,
+        showCancelButton: true,
+        focusConfirm: false,
+        confirmButtonText: '<i class="ti ti-thumb-up"></i> Great!',
+        confirmButtonAriaLabel: "Thumbs up, great!",
+        cancelButtonText: '<i class="ti ti-thumb-down"></i>',
+        cancelButtonAriaLabel: "Thumbs down",
+      });
+    });
+
+    $("#sa-position").click(function () {
+      Swal.fire({
+        position: "top-end",
+        type: "success",
+        title: "Your work has been saved",
+        showConfirmButton: false,
+        timer: 1500,
+      });
+    });
+
+    $("#sa-animation").click(function () {
+      Swal.fire({
+        title: "Custom animation with Animate.css",
+        animation: false,
+        customClass: {
+          popup: "animated tada",
+        },
+      });
+    });
+
+    $("#sa-confirm").click(function () {
+      Swal.fire({
+        title: "Are you sure?",
+        text: "You won't be able to revert this!",
+        type: "warning",
+        showCancelButton: true,
+        confirmButtonColor: "#3085d6",
+        cancelButtonColor: "#d33",
+        confirmButtonText: "Yes, delete it!",
+      }).then((result) => {
+        if (result.value) {
+          Swal.fire("Deleted!", "Your file has been deleted.", "success");
+        }
+      });
+    });
+
+    $("#sa-passparameter").click(function () {
+      const swalWithBootstrapButtons = Swal.mixin({
+        customClass: {
+          confirmButton: "btn btn-success",
+          cancelButton: "me-6 btn btn-danger",
+        },
+        buttonsStyling: false,
+      });
+
+      swalWithBootstrapButtons
+        .fire({
+          title: "Are you sure?",
+          text: "You won't be able to revert this!",
+          type: "warning",
+          showCancelButton: true,
+          confirmButtonText: "Yes, delete it!",
+          cancelButtonText: "No, cancel!",
+          reverseButtons: true,
+        })
+        .then((result) => {
+          if (result.value) {
+            swalWithBootstrapButtons.fire(
+              "Deleted!",
+              "Your file has been deleted.",
+              "success"
+            );
+          } else if (
+            // Read more about handling dismissals
+            result.dismiss === Swal.DismissReason.cancel
+          ) {
+            swalWithBootstrapButtons.fire(
+              "Cancelled",
+              "Your imaginary file is safe :)",
+              "error"
+            );
+          }
+        });
+    });
+
+    $("#sa-bg").click(function () {
+      Swal.fire({
+        title: "Custom width, padding, background.",
+        width: 600,
+        padding: "3em",
+        background:
+          "var(--bs-body-bg) url(../assets/images/backgrounds/active-bg.png)",
+        backdrop: `
+                          rgba(0,0,123,0.4)
+                          url("../assets/images/backgrounds/nyan-cat.gif")
+                          center left
+                          no-repeat
+                      `,
+      });
+    });
+
+    $("#sa-autoclose").click(function () {
+      let timerInterval;
+      Swal.fire({
+        title: "Auto close alert!",
+        html: "I will close in <strong></strong> seconds.",
+        timer: 2000,
+        onBeforeOpen: () => {
+          Swal.showLoading();
+          timerInterval = setInterval(() => {
+            Swal.getContent().querySelector("strong").textContent =
+              Swal.getTimerLeft();
+          }, 100);
+        },
+        onClose: () => {
+          clearInterval(timerInterval);
+        },
+      }).then((result) => {
+        if (
+          // Read more about handling dismissals
+          result.dismiss === Swal.DismissReason.timer
+        ) {
+          console.log("I was closed by the timer");
+        }
+      });
+    });
+
+    $("#sa-rtl").click(function () {
+      Swal.fire({
+        title: "هل تريد الاستمرار؟",
+        type: "question",
+        customClass: {
+          icon: "swal2-arabic-question-mark",
+        },
+        confirmButtonText: "نعم",
+        cancelButtonText: "لا",
+        showCancelButton: true,
+        showCloseButton: true,
+      });
+    });
+
+    $("#sa-ajax").click(function () {
+      Swal.fire({
+        title: "Submit your Github username",
+        input: "text",
+        inputAttributes: {
+          autocapitalize: "off",
+        },
+        showCancelButton: true,
+        confirmButtonText: "Look up",
+        showLoaderOnConfirm: true,
+        preConfirm: (login) => {
+          return fetch(`//api.github.com/users/${login}`)
+            .then((response) => {
+              if (!response.ok) {
+                throw new Error(response.statusText);
+              }
+              return response.json();
+            })
+            .catch((error) => {
+              Swal.showValidationMessage(`Request failed: ${error}`);
+            });
+        },
+        allowOutsideClick: () => !Swal.isLoading(),
+      }).then((result) => {
+        if (result.value) {
+          Swal.fire({
+            title: `${result.value.login}'s avatar`,
+            imageUrl: result.value.avatar_url,
+          });
+        }
+      });
+    });
+
+    $("#sa-chain").click(function () {
+      Swal.mixin({
+        input: "text",
+        confirmButtonText: "Next &rarr;",
+        showCancelButton: true,
+        progressSteps: ["1", "2", "3"],
+      })
+        .queue([
+          {
+            title: "Question 1",
+            text: "Chaining swal2 modals is easy",
+          },
+          "Question 2",
+          "Question 3",
+        ])
+        .then((result) => {
+          if (result.value) {
+            Swal.fire({
+              title: "All done!",
+              html:
+                "Your answers: <pre><code>" +
+                JSON.stringify(result.value) +
+                "</code></pre>",
+              confirmButtonText: "Lovely!",
+            });
+          }
+        });
+    });
+
+    $("#sa-queue").click(function () {
+      const ipAPI = "https://api.ipify.org?format=json";
+
+      Swal.queue([
+        {
+          title: "Your public IP",
+          confirmButtonText: "Show my public IP",
+          text: "Your public IP will be received " + "via AJAX request",
+          showLoaderOnConfirm: true,
+          preConfirm: () => {
+            return fetch(ipAPI)
+              .then((response) => response.json())
+              .then((data) => Swal.insertQueueStep(data.ip))
+              .catch(() => {
+                Swal.insertQueueStep({
+                  type: "error",
+                  title: "Unable to get your public IP",
+                });
+              });
+          },
+        },
+      ]);
+    });
+
+    $("#sa-timerfun").click(function () {
+      let timerInterval;
+      Swal.fire({
+        title: "Auto close alert!",
+        html:
+          "I will close in <strong></strong> seconds.<br/><br/>" +
+          '<button id="increase" class="btn bg-warning-subtle text-warning px-4">' +
+          "I need 5 more seconds!" +
+          "</button><br/>" +
+          '<button id="stop" class="btn bg-danger-subtle text-danger px-4 mt-1">' +
+          "Please stop the timer!!" +
+          "</button><br/>" +
+          '<button id="resume" class="btn bg-success-subtle text-success px-4 mt-1" disabled>' +
+          "Phew... you can restart now!" +
+          "</button><br/>" +
+          '<button id="toggle" class="btn bg-primary-subtle text-primary px-4 mt-1">' +
+          "Toggle" +
+          "</button>",
+        timer: 10000,
+        onBeforeOpen: () => {
+          const content = Swal.getContent();
+          const $ = content.querySelector.bind(content);
+
+          const stop = $("#stop");
+          const resume = $("#resume");
+          const toggle = $("#toggle");
+          const increase = $("#increase");
+
+          Swal.showLoading();
+
+          function toggleButtons() {
+            stop.disabled = !Swal.isTimerRunning();
+            resume.disabled = Swal.isTimerRunning();
+          }
+
+          stop.addEventListener("click", () => {
+            Swal.stopTimer();
+            toggleButtons();
+          });
+
+          resume.addEventListener("click", () => {
+            Swal.resumeTimer();
+            toggleButtons();
+          });
+
+          toggle.addEventListener("click", () => {
+            Swal.toggleTimer();
+            toggleButtons();
+          });
+
+          increase.addEventListener("click", () => {
+            Swal.increaseTimer(5000);
+          });
+
+          timerInterval = setInterval(() => {
+            Swal.getContent().querySelector("strong").textContent = (
+              Swal.getTimerLeft() / 1000
+            ).toFixed(0);
+          }, 100);
+        },
+        onClose: () => {
+          clearInterval(timerInterval);
+        },
+      });
+    });
+  }),
+    //init
+    ($.SweetAlert = new SweetAlert()),
+    ($.SweetAlert.Constructor = SweetAlert);
+})(window.jQuery),
+  //initializing
+  (function ($) {
+    "use strict";
+    $.SweetAlert.init();
+  })(window.jQuery);

res/assets/js/forms/tinymce-init.js

@@ -0,0 +1,3 @@
+tinymce.init({
+  selector: "textarea#mymce",
+});

res/assets/js/forms/typeahead/typeahead.init.js

@@ -0,0 +1,400 @@
+var substringMatcher = function (strs) {
+  return function findMatches(q, cb) {
+    var matches, substringRegex;
+
+    // an array that will be populated with substring matches
+    matches = [];
+
+    // regex used to determine if a string contains the substring `q`
+    substrRegex = new RegExp(q, "i");
+
+    // iterate through the pool of strings and for any string that
+    // contains the substring `q`, add it to the `matches` array
+    $.each(strs, function (i, str) {
+      if (substrRegex.test(str)) {
+        matches.push(str);
+      }
+    });
+
+    cb(matches);
+  };
+};
+
+var states = [
+  "Andorra",
+  "United Arab Emirates",
+  "Afghanistan",
+  "Antigua and Barbuda",
+  "Anguilla",
+  "Albania",
+  "Armenia",
+  "Angola",
+  "Antarctica",
+  "Argentina",
+  "American Samoa",
+  "Austria",
+  "Australia",
+  "Aruba",
+  "Åland",
+  "Azerbaijan",
+  "Bosnia and Herzegovina",
+  "Barbados",
+  "Bangladesh",
+  "Belgium",
+  "Burkina Faso",
+  "Bulgaria",
+  "Bahrain",
+  "Burundi",
+  "Benin",
+  "Saint Barthélemy",
+  "Bermuda",
+  "Brunei",
+  "Bolivia",
+  "Bonaire",
+  "Brazil",
+  "Bahamas",
+  "Bhutan",
+  "Bouvet Island",
+  "Botswana",
+  "Belarus",
+  "Belize",
+  "Canada",
+  "Cocos [Keeling] Islands",
+  "Congo",
+  "Central African Republic",
+  "Republic of the Congo",
+  "Switzerland",
+  "Ivory Coast",
+  "Cook Islands",
+  "Chile",
+  "Cameroon",
+  "China",
+  "Colombia",
+  "Costa Rica",
+  "Cuba",
+  "Cape Verde",
+  "Curacao",
+  "Christmas Island",
+  "Cyprus",
+  "Czechia",
+  "Germany",
+  "Djibouti",
+  "Denmark",
+  "Dominica",
+  "Dominican Republic",
+  "Algeria",
+  "Ecuador",
+  "Estonia",
+  "Egypt",
+  "Western Sahara",
+  "Eritrea",
+  "Spain",
+  "Ethiopia",
+  "Finland",
+  "Fiji",
+  "Falkland Islands",
+  "Micronesia",
+  "Faroe Islands",
+  "France",
+  "Gabon",
+  "United Kingdom",
+  "Grenada",
+  "Georgia",
+  "French Guiana",
+  "Guernsey",
+  "Ghana",
+  "Gibraltar",
+  "Greenland",
+  "Gambia",
+  "Guinea",
+  "Guadeloupe",
+  "Equatorial Guinea",
+  "Greece",
+  "South Georgia and the South Sandwich Islands",
+  "Guatemala",
+  "Guam",
+  "Guinea-Bissau",
+  "Guyana",
+  "Hong Kong",
+  "Heard Island and McDonald Islands",
+  "Honduras",
+  "Croatia",
+  "Haiti",
+  "Hungary",
+  "Indonesia",
+  "Ireland",
+  "Israel",
+  "Isle of Man",
+  "India",
+  "British Indian Ocean Territory",
+  "Iraq",
+  "Iran",
+  "Iceland",
+  "Italy",
+  "Jersey",
+  "Jamaica",
+  "Jordan",
+  "Japan",
+  "Kenya",
+  "Kyrgyzstan",
+  "Cambodia",
+  "Kiribati",
+  "Comoros",
+  "Saint Kitts and Nevis",
+  "North Korea",
+  "South Korea",
+  "Kuwait",
+  "Cayman Islands",
+  "Kazakhstan",
+  "Laos",
+  "Lebanon",
+  "Saint Lucia",
+  "Liechtenstein",
+  "Sri Lanka",
+  "Liberia",
+  "Lesotho",
+  "Lithuania",
+  "Luxembourg",
+  "Latvia",
+  "Libya",
+  "Morocco",
+  "Monaco",
+  "Moldova",
+  "Montenegro",
+  "Saint Martin",
+  "Madagascar",
+  "Marshall Islands",
+  "Macedonia",
+  "Mali",
+  "Myanmar [Burma]",
+  "Mongolia",
+  "Macao",
+  "Northern Mariana Islands",
+  "Martinique",
+  "Mauritania",
+  "Montserrat",
+  "Malta",
+  "Mauritius",
+  "Maldives",
+  "Malawi",
+  "Mexico",
+  "Malaysia",
+  "Mozambique",
+  "Namibia",
+  "New Caledonia",
+  "Niger",
+  "Norfolk Island",
+  "Nigeria",
+  "Nicaragua",
+  "Netherlands",
+  "Norway",
+  "Nepal",
+  "Nauru",
+  "Niue",
+  "New Zealand",
+  "Oman",
+  "Panama",
+  "Peru",
+  "French Polynesia",
+  "Papua New Guinea",
+  "Philippines",
+  "Pakistan",
+  "Poland",
+  "Saint Pierre and Miquelon",
+  "Pitcairn Islands",
+  "Puerto Rico",
+  "Palestine",
+  "Portugal",
+  "Palau",
+  "Paraguay",
+  "Qatar",
+  "Réunion",
+  "Romania",
+  "Serbia",
+  "Russia",
+  "Rwanda",
+  "Saudi Arabia",
+  "Solomon Islands",
+  "Seychelles",
+  "Sudan",
+  "Sweden",
+  "Singapore",
+  "Saint Helena",
+  "Slovenia",
+  "Svalbard and Jan Mayen",
+  "Slovakia",
+  "Sierra Leone",
+  "San Marino",
+  "Senegal",
+  "Somalia",
+  "Suriname",
+  "South Sudan",
+  "São Tomé and Príncipe",
+  "El Salvador",
+  "Sint Maarten",
+  "Syria",
+  "Swaziland",
+  "Turks and Caicos Islands",
+  "Chad",
+  "French Southern Territories",
+  "Togo",
+  "Thailand",
+  "Tajikistan",
+  "Tokelau",
+  "East Timor",
+  "Turkmenistan",
+  "Tunisia",
+  "Tonga",
+  "Turkey",
+  "Trinidad and Tobago",
+  "Tuvalu",
+  "Taiwan",
+  "Tanzania",
+  "Ukraine",
+  "Uganda",
+  "U.S. Minor Outlying Islands",
+  "United States",
+  "Uruguay",
+  "Uzbekistan",
+  "Vatican City",
+  "Saint Vincent and the Grenadines",
+  "Venezuela",
+  "British Virgin Islands",
+  "U.S. Virgin Islands",
+  "Vietnam",
+  "Vanuatu",
+  "Wallis and Futuna",
+  "Samoa",
+  "Kosovo",
+  "Yemen",
+  "Mayotte",
+  "South Africa",
+  "Zambia",
+  "Zimbabwe",
+];
+
+$("#the-basics .typeahead").typeahead(
+  {
+    hint: true,
+    highlight: true,
+    minLength: 1,
+  },
+  {
+    name: "states",
+    source: substringMatcher(states),
+  }
+);
+
+// ---------- Bloodhound ----------
+
+// constructs the suggestion engine
+var states = new Bloodhound({
+  datumTokenizer: Bloodhound.tokenizers.whitespace,
+  queryTokenizer: Bloodhound.tokenizers.whitespace,
+  // `states` is an array of state names defined in "The Basics"
+  local: states,
+});
+
+$("#bloodhound .typeahead").typeahead(
+  {
+    hint: true,
+    highlight: true,
+    minLength: 1,
+  },
+  {
+    name: "states",
+    source: states,
+  }
+);
+
+// -------- Prefatch --------
+
+var countries = new Bloodhound({
+  datumTokenizer: Bloodhound.tokenizers.whitespace,
+  queryTokenizer: Bloodhound.tokenizers.whitespace,
+  // url points to a json file that contains an array of country names, see
+  // https://github.com/twitter/typeahead.js/blob/gh-pages/data/countries.json
+  prefetch: "https://api.npoint.io/af734cdc01ad5a28c5ea",
+});
+
+// passing in `null` for the `options` arguments will result in the default
+// options being used
+$("#prefetch .typeahead").typeahead(null, {
+  name: "countries",
+  source: countries,
+});
+
+// -------- Custom --------
+
+var nflTeams = new Bloodhound({
+  datumTokenizer: Bloodhound.tokenizers.obj.whitespace("team"),
+  queryTokenizer: Bloodhound.tokenizers.whitespace,
+  identify: function (obj) {
+    return obj.team;
+  },
+  // prefetch: "nfl.json",
+});
+
+function nflTeamsWithDefaults(q, sync) {
+  if (q === "") {
+    sync(nflTeams.get("Detroit Lions", "Green Bay Packers", "Chicago Bears"));
+  } else {
+    nflTeams.search(q, sync);
+  }
+}
+
+$("#default-suggestions .typeahead").typeahead(
+  {
+    minLength: 0,
+    highlight: true,
+  },
+  {
+    name: "nfl-teams",
+    display: "team",
+    source: nflTeamsWithDefaults,
+  }
+);
+
+// -------- Multiple --------
+
+var nbaTeams = new Bloodhound({
+  datumTokenizer: Bloodhound.tokenizers.obj.whitespace("team"),
+  queryTokenizer: Bloodhound.tokenizers.whitespace,
+  prefetch: "https://api.npoint.io/54d8e8f1624399184b6b",
+});
+
+var nhlTeams = new Bloodhound({
+  datumTokenizer: Bloodhound.tokenizers.obj.whitespace("team"),
+  queryTokenizer: Bloodhound.tokenizers.whitespace,
+  prefetch: "https://api.npoint.io/86c2a1b430ece4e734ce",
+});
+
+$("#multiple-datasets .typeahead").typeahead(
+  {
+    highlight: true,
+  },
+  {
+    name: "nba-teams",
+    display: "team",
+    source: nbaTeams,
+    templates: {
+      header: '<h3 class="league-name">NBA Teams</h3>',
+    },
+  },
+  {
+    name: "nhl-teams",
+    display: "team",
+    source: nhlTeams,
+    templates: {
+      header: '<h3 class="league-name">NHL Teams</h3>',
+    },
+  }
+);
+
+// -------- Scrollable --------
+
+$("#scrollable-dropdown-menu .typeahead").typeahead(null, {
+  name: "states",
+  limit: 10,
+  source: states,
+});