### Cleave.js Time Formatting Examples

Source: https://themesbrand.com/velzon/docs/symfony/input-mask

Provides examples for formatting time inputs using Cleave.js. The first example formats hours, minutes, and seconds (HH:MM:SS), while the second formats only hours and minutes (HH:MM).

```javascript
var cleaveTime = new Cleave('#cleave-time', {
    time: true,
    timePattern: ['h', 'm', 's']
});

var cleaveTimeFormat = new Cleave('#cleave-time-format', {
    time: true,
    timePattern: ['h', 'm']
});
```

--------------------------------

### Initialize Flatpickr for Date Range Selection

Source: https://themesbrand.com/velzon/docs/symfony/flatpickr

This example configures Flatpickr to allow users to select a date range. By setting `data-range-date` to `true`, the picker will facilitate the selection of a start and end date.

```html
<input type="text" class="form-control" data-provider="flatpickr" data-date-format="d M, Y" data-range-date="true">
```

--------------------------------

### Cleave.js Custom Input Formatting Examples

Source: https://themesbrand.com/velzon/docs/symfony/input-mask

Illustrates various custom formatting options with Cleave.js, including credit card numbers, delimited numbers, prefixed inputs, and phone numbers. These examples show how to configure blocks, delimiters, prefixes, and other properties for specific input requirements.

```javascript
var cleaveBlocks = new Cleave('#cleave-ccard', {
    blocks: [4, 4, 4, 4],
    uppercase: true
});

var cleaveDelimiter = new Cleave('#cleave-delimiter', {
    delimiter: '·',
    blocks: [3, 3, 3],
    uppercase: true
});

var cleaveDelimiters = new Cleave('#cleave-delimiters', {
    delimiters: ['.', '.', '-'],
    blocks: [3, 3, 3, 2],
    uppercase: true
});

var cleavePrefix = new Cleave('#cleave-prefix', {
    prefix: 'PREFIX',
    delimiter: '-',
    blocks: [6, 4, 4, 4],
    uppercase: true
});

var cleaveBlocks = new Cleave('#cleave-phone', {
    delimiters: ['(', ')', '-'],
    blocks: [0, 3, 3, 4]
});
```

--------------------------------

### List.js Initialization with Pagination

Source: https://themesbrand.com/velzon/docs/symfony/listjs

Sets up List.js to include pagination, breaking down a long list into manageable pages. This example configures pagination with a page size of 3 items.

```javascript
var paginationList = new List('pagination-list', {
    valueNames: ['pagi-list'],
    page: 3,
    pagination: true
});
```

--------------------------------

### List.js Initialization for Existing HTML List

Source: https://themesbrand.com/velzon/docs/symfony/listjs

This example shows how to initialize List.js on an existing HTML list structure. It defines the `valueNames` to map to the elements within each list item.

```javascript
var existOptionsList = {
    valueNames: [ 'contact-name', 'contact-message' ]
};

var existList = new List('contact-existing-list', existOptionsList);
```

--------------------------------

### HTML Basic Select Example

Source: https://themesbrand.com/velzon/docs/symfony/select2

Demonstrates a simple HTML select element configured for basic single selection using Select2. This serves as a foundational example for implementing dropdowns.

```html
<select class="js-example-basic-single" name="state">
    <option value="AL">Alabama</option>
        <option value="MA">Madrid</option>
        <option value="TO">Toronto</option>
        <option value="LO">Londan</option>
    <option value="WY">Wyoming</option>
</select>
```

--------------------------------

### Initialize Pie Charts (JavaScript)

Source: https://themesbrand.com/velzon/docs/symfony/apexcharts

This script initializes pie charts using ApexCharts. It requires the ApexCharts library and custom JavaScript for chart setup. The output is a rendered pie chart.

```html
<!-- piecharts init -->
<script src="assets/js/pages/apexcharts-pie.init.js"></script>
```

--------------------------------

### Initialize Flatpickr with Date and Time Selection

Source: https://themesbrand.com/velzon/docs/symfony/flatpickr

This example initializes Flatpickr to allow both date and time selection. The `data-enable-time` attribute enables the time picker, and `data-date-format` can be adjusted for desired date and time output.

```html
<input type="text" class="form-control" data-provider="flatpickr" data-date-format="d.m.y" data-enable-time>
```

--------------------------------

### Swiper Slider with Navigation and Pagination

Source: https://themesbrand.com/velzon/docs/symfony/swiper-slider

This example demonstrates initializing a Swiper slider with custom navigation buttons (next/prev) and a clickable pagination element. It also includes looping and autoplay.

```javascript
var swiper = new Swiper(".navigation-swiper", {
    loop: true,
    autoplay: {
        delay: 2500,
        disableOnInteraction: false,
    },
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
    pagination: {
        clickable: true,
        el: ".swiper-pagination",
    },
});
```

--------------------------------

### Multi-Element Range Handle Slider in JavaScript

Source: https://themesbrand.com/velzon/docs/symfony/nouislider

Shows how to create a slider with multiple handles for range selection. This example initializes a slider with two starting values and enables a connected range. It's useful for defining a minimum and maximum within a set boundary.

```javascript
var multielementslider = document.querySelectorAll('[data-multielement]');

multielementslider.forEach(function (slider) {
    noUiSlider.create(slider, {
        start: [20, 80],
        connect: true,
        range: {
            'min': 0,
            'max': 100
        }
    });
});
```

--------------------------------

### Initialize Multi.js - Basic Example

Source: https://themesbrand.com/velzon/docs/symfony/multi-js

Initializes Multi.js on a select element with the ID 'multiselect-basic'. This basic setup disables the search functionality.

```javascript
var multiSelectBasic = document.getElementById("multiselect-basic");
multi(multiSelectBasic, {
  enable_search: false
});
```

--------------------------------

### Cleave.js Date Formatting Examples

Source: https://themesbrand.com/velzon/docs/symfony/input-mask

Demonstrates how to use Cleave.js to format date inputs. The first example shows a full date format (DD-MM-YYYY), while the second illustrates a shorter format (MM-YY). Ensure the target HTML elements have the corresponding IDs.

```javascript
var cleaveDate = new Cleave('#cleave-date', {
    date: true,
    delimiter: '-',
    datePattern: ['d', 'm', 'Y']
});

var cleaveDateFormat = new Cleave('#cleave-date-format', {
    date: true,
    datePattern: ['m', 'y']
});
```

--------------------------------

### Swiper Slider with Custom Pagination Bullets

Source: https://themesbrand.com/velzon/docs/symfony/swiper-slider

This example sets up a Swiper slider with custom pagination bullets, rendered using a provided function. The bullets are numbered starting from 1. Includes looping and autoplay.

```javascript
var swiper = new Swiper(".pagination-custom-swiper", {
    loop: true,
    autoplay: {
        delay: 2500,
        disableOnInteraction: false,
    },
    pagination: {
        clickable: true,
        el: ".swiper-pagination",
        renderBullet: function (index, className) {
        return '' + (index + 1) + "";
        },
    }
});
```

--------------------------------

### Grid.js Pagination Example with Custom Formatting in Javascript

Source: https://themesbrand.com/velzon/docs/symfony/gridjs

This Javascript example demonstrates a Grid.js table with pagination enabled. It features custom formatting for the 'ID' column and an 'Actions' column. The table displays order details including ID, Name, Date, Total, and Status, and is rendered into the 'table-pagination' element.

```javascript
new gridjs.Grid({
    columns: [{
        name: 'ID',
        width: '120px',
        formatter: (function (cell) {
            return gridjs.html('' + cell + '');
        })
    },"Name", "Date", "Total", "Status",
    {
        name: 'Actions',
        width: '100px',
        formatter: (function (cell) {
            return gridjs.html("" +
            "Details" +
          "");
        })
    },
],
    pagination: {
        limit: 5
    },

    data: [
        ["#VL2111", "Jonathan", "07 Oct, 2021", "$24.05", "Paid",],
        ["#VL2110", "Harold", "07 Oct, 2021", "$26.15", "Paid"],
        ["#VL2109", "Shannon", "06 Oct, 2021", "$21.25", "Refund"],
        ["#VL2108", "Robert", "05 Oct, 2021", "$25.03", "Paid"],
        ["#VL2107", "Noel", "05 Oct, 2021", "$22.61", "Paid"],
        ["#VL2106", "Traci", "04 Oct, 2021", "$24.05", "Paid"],
        ["#VL2105", "Kerry", "04 Oct, 2021", "$26.15", "Paid"],
        ["#VL2104", "Patsy", "04 Oct, 2021", "$21.25", "Refund"],
        ["#VL2103", "Cathy", "03 Oct, 2021", "$22.61", "Paid"],
        ["#VL2102", "Tyrone", "03 Oct, 2021", "$25.03", "Paid"],
    ]
}).render(document.getElementById("table-pagination"));


```

--------------------------------

### HTML Templating Example

Source: https://themesbrand.com/velzon/docs/symfony/select2

Presents an HTML select element demonstrating custom templating with Select2. This allows for richer display of options, including formatting and additional information.

```html
<select class="form-control js-example-templating">
    <optgroup label="Alaskan/Hawaiian Time Zone">
        <option value="AK">Alaska</option>
        <option value="HI">Hawaii</option>
    </optgroup>
    <optgroup label="Pacific Time Zone">
        <option value="CA">California</option>
        <option value="NV">Nevada</option>
        <option value="OR">Oregon</option>
        <option value="WA">Washington</option>
    </optgroup>
</select>
```

--------------------------------

### Initialize Basic Datatable in Javascript

Source: https://themesbrand.com/velzon/docs/symfony/datatables

This snippet shows the basic initialization of a Datatable on an HTML element with the ID 'example'. It requires the DataTable library to be included. The output is a fully functional, interactive table.

```javascript
document.addEventListener('DOMContentLoaded', function () {
    let table = new DataTable('#example');
});
```

--------------------------------

### Grid.js Base Example with Custom Formatting in Javascript

Source: https://themesbrand.com/velzon/docs/symfony/gridjs

This Javascript example showcases a basic Grid.js table with custom formatters for the 'ID' and 'Email' columns, along with an 'Actions' column for integrating buttons. It includes pagination, sorting, and search functionalities and renders the table into the 'table-gridjs' element.

```javascript
new gridjs.Grid({
    columns: [
        {
            name: 'ID',
            formatter: (function (cell) {
                return gridjs.html('' + cell + '');
            })
        },
        "Name", 
        {
            name: 'Email',
            formatter: (function (cell) {
                return gridjs.html('' + cell + '');
            })
        },
        "Position", "Company", "Country",
        {
            name: 'Actions',
            width: '120px',
            formatter: (function (cell) {
                return gridjs.html("" +
                "Details" +
                "");
            })
        },
    ],
    pagination: {
        limit: 5
    },
    sort: true,
    search: true,
    data: [
        ["01", "Jonathan", "jonathan@example.com","Senior Implementation Architect", 
        "Hauck Inc", "Holy See"],
        ["02", "Harold", "harold@example.com", "Forward Creative Coordinator",
        "Metz Inc", "Iran"],
        ["03", "Shannon", "shannon@example.com","Legacy Functionality Associate",
            "Zemlak Group", "South Georgia"],
        ["04", "Robert", "robert@example.com","Product Accounts Technician",
            "Hoeger", "San Marino"],
        ["05", "Noel", "noel@example.com","Customer Data Director",
            "Howell - Rippin", "Germany"],
        ["06", "Traci", "traci@example.com","Corporate Identity Director",
            "Koelpin - Goldner", "Vanuatu"],
        ["07", "Kerry", "kerry@example.com","Lead Applications Associate",
            "Feeney, Langworth and Tremblay", "Niger"],
        ["08", "Patsy", "patsy@example.com","Dynamic Assurance Director",
            "Streich Group", "Niue"],
        ["09", "Cathy", "cathy@example.com","Customer Data Director",
            "Ebert, Schamberger and Johnston", "Mexico"],
        ["10", "Tyrone", "tyrone@example.com", "Senior Response Liaison",
            "Raynor, Rolfson and Daugherty", "Qatar"],
    ]
}).render(document.getElementById("table-gridjs"));


```

--------------------------------

### Initialize Bubble Charts (JavaScript)

Source: https://themesbrand.com/velzon/docs/symfony/apexcharts

This script initializes bubble charts using ApexCharts. It requires the ApexCharts library and custom JavaScript for setup. The result is a functional bubble chart displayed on the page.

```html
<!-- bubble charts init -->
<script src="assets/js/pages/apexcharts-bubble.init.js"></script>
```

--------------------------------

### Initialize Flatpickr with Min and Max Date Constraints

Source: https://themesbrand.com/velzon/docs/symfony/flatpickr

This example demonstrates how to set minimum and maximum selectable dates using Flatpickr. The `data-minDate` and `data-maxDate` attributes accept date strings in the specified format, restricting user selection to a specific range.

```html
<input type="text" class="form-control" data-provider="flatpickr" data-date-format="d M, Y" data-minDate="25 12, 2021" data-maxDate="29 12,2021">
```

--------------------------------

### Initialize Sweetalert2

Source: https://themesbrand.com/velzon/docs/symfony/sweetalert2

This snippet shows how to include the initialization JavaScript file for Sweetalert2. This file typically contains custom configurations and usage examples.

```javascript
<!-- Sweet alert init js-->
<script src="assets/js/pages/sweetalerts.init.js"></script>
```

--------------------------------

### Display Line Awesome Icons

Source: https://themesbrand.com/velzon/docs/symfony/icons

Provides an example of using Line Awesome icons, which are line-style icons accessible with a single line of code. Replace '**' with the specific icon identifier.

```html
<i class="lab la-*-*"></i>
```

--------------------------------

### Initialize Polararea Charts (JavaScript)

Source: https://themesbrand.com/velzon/docs/symfony/apexcharts

This script initializes polar area charts using ApexCharts. It depends on the ApexCharts library and custom JavaScript for setup. The final output is a polar area chart visualization.

```html
<!-- polarareacharts init -->
<script src="assets/js/pages/apexcharts-polararea.init.js"></script>
```

--------------------------------

### JavaScript: ApexCharts Line Chart Integration

Source: https://themesbrand.com/velzon/docs/symfony/apexcharts

Includes the ApexCharts library and a sample data script for creating line charts. It also points to the initialization script for line chart examples.

```javascript
<!-- apexcharts -->
<script src="assets/libs/apexcharts/apexcharts.min.js"></script>
<script src="https://apexcharts.com/samples/assets/stock-prices.js"></script>

<!-- linecharts init -->
<script src="assets/js/pages/apexcharts-line.init.js"></script>
```

--------------------------------

### HTML Multi Select Example

Source: https://themesbrand.com/velzon/docs/symfony/select2

Illustrates an HTML select element configured for multiple selections with Select2. It includes optgroups to categorize options, facilitating better organization and user experience.

```html
<select class="js-example-basic-multiple" name="states[]" multiple="multiple">
    <optgroup label="UK">
        <option value="London">London</option>
        <option value="Manchester" selected>Manchester</option>
        <option value="Liverpool">Liverpool</option>
    </optgroup>
    <optgroup label="FR">
        <option value="Paris">Paris</option>
        <option value="Lyon">Lyon</option>
        <option value="Marseille">Marseille</option>
    </optgroup>
    <optgroup label="SP">
        <option value="Madrid" selected>Madrid</option>
        <option value="Barcelona">Barcelona</option>
        <option value="Malaga">Malaga</option>
    </optgroup>
    <optgroup label="CA">
        <option value="Montreal">Montreal</option>
        <option value="Toronto">Toronto</option>
        <option value="Vancouver">Vancouver</option>
    </optgroup>
</select>
```

--------------------------------

### Initialize Star Rater with Step Values

Source: https://themesbrand.com/velzon/docs/symfony/ratings

This example shows how to initialize a raterJs instance that allows for ratings with decimal steps (e.g., 1.5). The `rating` option is set to a decimal value, and the `rateCallback` handles the update.

```javascript
var starRatingStep = raterJs( {
    starSize:22, 
    rating:1.5,
    element:document.querySelector("#rater-step"), 
    rateCallback:function rateCallback(rating, done) {
        this.setRating(rating); 
        done(); 
    }
});
```

--------------------------------

### Initialize and Configure Shepherd.js Tour in JavaScript

Source: https://themesbrand.com/velzon/docs/symfony/shepherdjs-tour

This JavaScript code initializes and configures a Shepherd.js tour. It sets default options for steps, including modal overlays and navigation buttons, and defines multiple steps with specific content, attachment points, and actions for guiding users through an application interface.

```javascript
var tour = new Shepherd.Tour({
    defaultStepOptions: {
        cancelIcon: {
            enabled: true
        },
        
        classes: 'shadow-md bg-purple-dark',
        scrollTo: { behavior: 'smooth', block: 'center' }
    },

    useModalOverlay:{
        enabled: true
    },
});

tour.addStep({
    title: 'Welcome Back !',
    text: 'This is Step 1',
    attachTo: {
        element: '#logo-tour',
        on: 'bottom'
    },
    buttons: [
        {
            text: 'Next',
            classes: 'btn btn-success',
            action: tour.next
        }
    ]
});
// end step 1

tour.addStep({
    title: 'Register your account',
    text: 'Get your Free Velzon account now.',
    attachTo: {
        element: '#register-tour',
        on: 'bottom'
    },
    buttons: [
        {
            text: 'Back',
            classes: 'btn btn-light',
            action: tour.back
        },
        {
            text: 'Next',
            classes: 'btn btn-success',
            action: tour.next
        }
    ]
});
// end step 2

tour.addStep({
    title: 'Login your account',
    text: 'Sign in to continue to Velzon.',
    attachTo: {
        element: '#login-tour',
        on: 'bottom'
    },
    buttons: [
        {
            text: 'Back',
            classes: 'btn btn-light',
            action: tour.back
        },
        {
            text: 'Next',
            classes: 'btn btn-success',
            action: tour.next
        }
    ]
});
// end step 3

tour.addStep({
    title: 'Get yout Product',
    text: 'Sign in to continue to Velzon.',
    attachTo: {
        element: '#getproduct-tour',
        on: 'bottom'
    },
    buttons: [
        {
            text: 'Back',
            classes: 'btn btn-light',
            action: tour.back
        },
        {
            text: 'Next',
            classes: 'btn btn-success',
            action: tour.next
        }
    ]
});
// end step 4

tour.addStep({
    title: 'Thank you !',
    text: 'Sign in to continue to Velzon.',
    attachTo: {
        element: '#thankyou-tour',
        on: 'bottom'
    },
    buttons: [
        {
            text: 'Back',
            classes: 'btn btn-light',
            action: tour.back
        },
        {
            text: 'Thank you !',
            classes: 'btn btn-primary',
            action: tour.complete
        }
    ]
});
// end step 5

tour.start();
```

--------------------------------

### Include Shepherd.js CSS and JavaScript Libraries

Source: https://themesbrand.com/velzon/docs/symfony/shepherdjs-tour

This snippet shows how to include the necessary CSS and JavaScript files for Shepherd.js, a library used for guiding users through tours of an application. Ensure these paths are correct in your project.

```html
<!-- shepherd.js css -->
<link rel="stylesheet" href="assets/libs/shepherd.js/css/shepherd.css">

<!-- shepherd js -->
<script src="assets/libs/shepherd.js/js/shepherd.min.js"></script>
```

--------------------------------

### Cleave.js Numeral Formatting Example

Source: https://themesbrand.com/velzon/docs/symfony/input-mask

Shows how to apply numeral formatting to an input field using Cleave.js, specifically setting the thousands group style to 'thousand'. This is useful for displaying large numbers in a more readable format.

```javascript
var cleaveNumeral = new Cleave('#cleave-numeral', {
    numeral: true,
    numeralThousandsGroupStyle: 'thousand'
});
```

--------------------------------

### Move noUiSlider with Clicked Pips

Source: https://themesbrand.com/velzon/docs/symfony/nouislider

This example demonstrates how to allow users to move the noUiSlider handles by clicking on the pips. It creates a slider with pips enabled and then adds event listeners to each pip to set the slider's value accordingly. Dependencies include the noUiSlider library.

```javascript
var pipsSlider = document.getElementById('slider-pips');

noUiSlider.create(pipsSlider, {
    range: {
        min: 0,
        max: 100
    },
    start: [50],
    pips: {mode: 'count', values: 5}
});

var pips = pipsSlider.querySelectorAll('.noUi-value');

function clickOnPip() {
    var value = Number(this.getAttribute('data-value'));
    pipsSlider.noUiSlider.set(value);
}

for (var i = 0; i < pips.length; i++) {

    // For this example. Do this in CSS!
    pips[i].style.cursor = 'pointer';
    pips[i].addEventListener('click', clickOnPip);
}
```

--------------------------------

### HTML Disabling Select2 Control Example

Source: https://themesbrand.com/velzon/docs/symfony/select2

Shows HTML select elements for both single and multi-select scenarios, demonstrating how to disable and enable Select2 controls programmatically. Includes buttons to trigger these actions.

```html
<select class="js-example-disabled" name="state">
        <option value="AL">Alabama</option>
        <option value="MA">Madrid</option>
        <option value="TO">Toronto</option>
        <option value="LO">Londan</option>
        <option value="WY">Wyoming</option>
    </select>
    <select class="js-example-disabled-multi" name="states[]" multiple="multiple">
        <optgroup label="UK">
            <option value="London">London</option>
            <option value="Manchester" selected>Manchester</option>
            <option value="Liverpool">Liverpool</option>
        </optgroup>
        <optgroup label="FR">
            <option value="Paris">Paris</option>
            <option value="Lyon">Lyon</option>
            <option value="Marseille">Marseille</option>
        </optgroup>
        <optgroup label="SP">
            <option value="Madrid" selected>Madrid</option>
            <option value="Barcelona">Barcelona</option>
            <option value="Malaga">Malaga</option>
        </optgroup>
        <optgroup label="CA">
            <option value="Montreal">Montreal</option>
            <option value="Toronto">Toronto</option>
            <option value="Vancouver">Vancouver</option>
        </optgroup>
    </select>
    </div>
    <div class="hstack gap-2 mt-3">
    <button type="button" class="js-programmatic-enable btn btn-primary">
        Enable
    </button>
    <button type="button" class="js-programmatic-disable btn btn-success">
        Disable
    </button>
</div>
```

--------------------------------

### Basic noUiSlider Initialization in JavaScript

Source: https://themesbrand.com/velzon/docs/symfony/nouislider

Demonstrates the basic creation of a noUiSlider instance for a single range element. It initializes a slider with a connect property set to 'lower' and a range from 0 to 255. This is a fundamental example for setting up a simple slider.

```javascript
var sliderColorScheme = document.querySelectorAll('[data-rangeslider]');

sliderColorScheme.forEach(function (slider) {
    noUiSlider.create(slider, {
        start: 127,
        connect: 'lower',
        range: {
            'min': 0,
            'max': 255
        },
    });
});
```

--------------------------------

### List.js Initialization with Data Attributes

Source: https://themesbrand.com/velzon/docs/symfony/listjs

Demonstrates initializing List.js using data attributes for configuration. This method allows defining list item properties directly in the HTML. It also shows how to add new items programmatically.

```javascript
var attroptions = {
  valueNames: [
    'name',
    'born',
    { data: ['id'] },
    { attr: 'src', name: 'image' },
    { attr: 'href', name: 'link' },
    { attr: 'data-timestamp', name: 'timestamp' }
  ]
};
var attrList = new List('users', attroptions);
attrList.add({ name: 'Leia', born: '1954', image: 'assets/images/users/avatar-5.jpg', id: 5, timestamp: '67893' });
```

--------------------------------

### Leaflet Basic Map Setup Javascript

Source: https://themesbrand.com/velzon/docs/symfony/leaflet

Initializes a basic Leaflet map centered on a specific geographical location and adds a tile layer using Mapbox. Requires the Leaflet library and a Mapbox API token. Sets maximum zoom level and attribution information.

```javascript
var mymap = L.map('leaflet-map').setView([51.505, -0.09], 13);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.
rJcFIG214AriISLbB6B5aw', {
    maxZoom: 18,
    attribution: 'Map data © OpenStreetMap contributors, ' + 
        'CC-BY-SA, ' + 
        'Imagery © Mapbox',
    id: 'mapbox/streets-v11',
    tileSize: 512,
    zoomOffset: -1
}).addTo(mymap);
```

--------------------------------

### Leaflet Markers, Circles, and Polygons Javascript

Source: https://themesbrand.com/velzon/docs/symfony/leaflet

Adds markers, circles, and polygons to a Leaflet map. This example builds upon basic map setup by demonstrating how to place specific geographical shapes with defined properties like color and radius. It utilizes the Leaflet library.

```javascript
var markermap = L.map('leaflet-map-marker').setView([51.505, -0.09], 13);

L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.
    eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.
    rJcFIG214AriISLbB6B5aw', {
    maxZoom: 18,
    attribution: 'Map data © OpenStreetMap contributors, ' + 
        'CC-BY-SA, ' + 
        'Imagery © Mapbox',
    id: 'mapbox/streets-v11',
    tileSize: 512,
    zoomOffset: -1
}).addTo(markermap);

L.marker([51.5, -0.09]).addTo(markermap);

L.circle([51.508, -0.11], {
    color: '#0ab39c',
    fillColor: '#0ab39c',
    fillOpacity: 0.5,
    radius: 500
}).addTo(markermap);

L.polygon([
    [51.509, -0.08],
    [51.503, -0.06],
    [51.51, -0.047]
],{
    color: '#405189',
    fillColor: '#405189',
}).addTo(markermap);
```

--------------------------------

### Initialize List.js Custom JavaScript

Source: https://themesbrand.com/velzon/docs/symfony/listjs

This snippet shows how to include the custom JavaScript file for initializing List.js functionalities. This file typically contains the logic for setting up List.js instances.

```javascript
<!-- listjs init -->
<script src="assets/js/pages/listjs.init.js"></script>
```

--------------------------------

### Initialize Filepond for Multiple File Uploads

Source: https://themesbrand.com/velzon/docs/symfony/filepond

This JavaScript code demonstrates how to initialize Filepond for handling multiple file uploads. It registers necessary plugins like FilePondPluginFileEncode, FilePondPluginFileValidateSize, FilePondPluginImageExifOrientation, and FilePondPluginImagePreview, and then creates a Filepond instance for each input element with the class 'filepond-input-multiple'.

```javascript
FilePond.registerPlugin(
    // encodes the file as base64 data
    FilePondPluginFileEncode,
    // validates the size of the file
    FilePondPluginFileValidateSize,
    // corrects mobile image orientation
    FilePondPluginImageExifOrientation,
    // previews dropped images
    FilePondPluginImagePreview
);

var inputMultipleElements = document.querySelectorAll('input.filepond-input-multiple');

// loop over input elements
Array.from(inputMultipleElements).forEach(function(inputElement) {
    // create a FilePond instance at the input element location
    FilePond.create(inputElement);
})
```

--------------------------------

### Initialize Dropzone.js for File Uploads

Source: https://themesbrand.com/velzon/docs/symfony/dropzone

This JavaScript code initializes Dropzone.js, configuring it to handle file uploads with a preview list. It specifies the upload URL, HTTP method, and the template used for previewing uploaded files.

```javascript
var dropzonePreviewNode = document.querySelector("#dropzone-preview-list");
dropzonePreviewNode.id = "";
var previewTemplate = dropzonePreviewNode.parentNode.innerHTML;
dropzonePreviewNode.parentNode.removeChild(dropzonePreviewNode);
var dropzone = new Dropzone(".dropzone", {
    url: 'https://httpbin.org/post',
    method: "post",
    previewTemplate: previewTemplate,
    previewsContainer: "#dropzone-preview",
});

```

--------------------------------

### Swiper Slider with Fade Effect

Source: https://themesbrand.com/velzon/docs/symfony/swiper-slider

Configures a Swiper slider to use the 'fade' effect for transitions between slides. This example includes looping, autoplay, and pagination.

```javascript
var swiper = new Swiper(".effect-fade-swiper", {
    loop: true,
    effect: "fade",
    autoplay: {
        delay: 2500,
        disableOnInteraction: false,
    },
    pagination: {
        el: ".swiper-pagination",
        clickable: true,
    },
});
```

--------------------------------

### JavaScript: ApexCharts Bar Chart Integration

Source: https://themesbrand.com/velzon/docs/symfony/apexcharts

Integrates the ApexCharts library for creating bar charts and includes the specific initialization script for bar chart examples.

```javascript
<!-- apexcharts -->
<script src="assets/libs/apexcharts/apexcharts.min.js"></script>

<!-- barcharts init -->
<script src="assets/js/pages/apexcharts-bar.init.js"></script>
```

--------------------------------

### List.js Initialization with Fuzzy Search

Source: https://themesbrand.com/velzon/docs/symfony/listjs

Configures List.js to enable fuzzy searching, allowing for more flexible and forgiving search queries. This initialization focuses on the 'name' value for searching.

```javascript
var fuzzySearchList = new List('fuzzysearch-list', { 
    valueNames: ['name']
});
```

--------------------------------

### Load Shepherd.js Tour Initialization Script

Source: https://themesbrand.com/velzon/docs/symfony/shepherdjs-tour

This HTML snippet includes a custom JavaScript file that is responsible for initializing and running the Shepherd.js tour. This script should be placed after the Shepherd.js library has been loaded.

```html
<!-- tour init -->
<script src="assets/js/pages/tour.init.js"></script>
```

--------------------------------

### Initialize Flatpickr to Disable Specific Dates

Source: https://themesbrand.com/velzon/docs/symfony/flatpickr

This example shows how to disable specific dates from being selected in Flatpickr. The `data-disable-date` attribute takes a date string that will be rendered unselectable.

```html
<input type="text" class="form-control" data-provider="flatpickr" data-date-format="d M, Y" data-disable-date="15 12,2021">
```

--------------------------------

### JavaScript: ApexCharts Timeline Chart Integration

Source: https://themesbrand.com/velzon/docs/symfony/apexcharts

Integrates ApexCharts and moment.js for creating timeline charts. It also references the specific initialization script for timeline chart examples.

```javascript
<!-- apexcharts -->
<script src="assets/libs/apexcharts/apexcharts.min.js"></script>
<script src="assets/libs/moment/min/moment.min.js"></script>

<!-- timeline charts init -->
<script src="assets/js/pages/apexcharts-timeline.init.js"></script>
```

--------------------------------

### Initialize Flatpickr with Basic Date Formatting

Source: https://themesbrand.com/velzon/docs/symfony/flatpickr

This HTML input element demonstrates how to initialize Flatpickr with a basic date format (DD MMM, YYYY). The `data-provider="flatpickr"` attribute is essential for initialization, and `data-date-format` specifies the desired output format.

```html
<input type="text" class="form-control" data-provider="flatpickr" data-date-format="d M, Y">
```

--------------------------------

### HTML Selections Templating Example

Source: https://themesbrand.com/velzon/docs/symfony/select2

Features an HTML select element for templating selected options with Select2. This is useful for displaying selected items in a customized and informative way.

```html
<select class="form-control select-flag-templating">
    <optgroup label="Alaskan/Hawaiian Time Zone">
        <option value="AK">Alaska</option>
        <option value="HI">Hawaii</option>
    </optgroup>
    <optgroup label="Pacific Time Zone">
        <option value="CA">California</option>
        <option value="NV">Nevada</option>
        <option value="OR">Oregon</option>
        <option value="WA">Washington</option>
    </optgroup>
</select>
```

--------------------------------

### Initialize Heatmap Charts (JavaScript)

Source: https://themesbrand.com/velzon/docs/symfony/apexcharts

This script initializes heatmap charts using ApexCharts. It requires the ApexCharts library and custom JavaScript for chart implementation. The final output is a heatmap visualization.

```html
<!-- heatmapscharts init -->
<script src="assets/js/pages/apexcharts-heatmap.init.js"></script>
```

--------------------------------

### Include SortableJS Library in HTML

Source: https://themesbrand.com/velzon/docs/symfony/sortablejs

This snippet shows how to include the SortableJS library in your HTML file using a script tag. Ensure the path to the script is correct for your project setup.

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

--------------------------------

### Include Filepond JavaScript Libraries

Source: https://themesbrand.com/velzon/docs/symfony/filepond

This snippet details the JavaScript files needed to use Filepond and its associated plugins. It includes the core Filepond library along with plugins for image preview, file size validation, EXIF orientation, and file encoding.

```javascript
<!-- 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-file-validate-size/filepond-plugin-file-validate-size.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-encode/filepond-plugin-file-encode.min.js"></script>
```

--------------------------------

### Gallery Initialization Script

Source: https://themesbrand.com/velzon/docs/symfony/glightbox

This snippet shows the HTML tag to include a custom JavaScript file for initializing the gallery features, including GLightbox. Ensure 'gallery.init.js' contains the necessary GLightbox initialization code.

```html
<!-- gallary init -->
<script src="assets/js/pages/gallery.init.js"></script>

```

--------------------------------

### Initialize Radar Charts (JavaScript)

Source: https://themesbrand.com/velzon/docs/symfony/apexcharts

This script initializes radar charts with ApexCharts. It requires the ApexCharts library and custom JavaScript for configuration. The output is a radar chart displayed on the page.

```html
<!-- radarcharts init -->
<script src="assets/js/pages/apexcharts-radar.init.js"></script>
```

--------------------------------

### Colorpickr Classic Demo in Javascript

Source: https://themesbrand.com/velzon/docs/symfony/colorpicker

Initializes a Colorpickr instance with the classic theme. This example demonstrates default settings, a predefined set of color swatches, and enables full interaction including hex, RGBA, HSVA inputs, clear, and save buttons. It's suitable for a standard color selection interface.

```javascript
var classicPickrDemo = document.querySelectorAll(".classic-colorpicker");

classicPickrDemo.forEach(function () {
Pickr.create({
    el: ".classic-colorpicker",
    theme: "classic", // or 'monolith', or 'nano'
    default: "#405189",
    swatches: [
        "rgba(244, 67, 54, 1)",
        "rgba(233, 30, 99, 0.95)",
        "rgba(156, 39, 176, 0.9)",
        "rgba(103, 58, 183, 0.85)",
        "rgba(63, 81, 181, 0.8)",
        "rgba(33, 150, 243, 0.75)",
        "rgba(3, 169, 244, 0.7)",
        "rgba(0, 188, 212, 0.7)",
        "rgba(0, 150, 136, 0.75)",
        "rgba(76, 175, 80, 0.8)",
        "rgba(139, 195, 74, 0.85)",
        "rgba(205, 220, 57, 0.9)",
        "rgba(255, 235, 59, 0.95)",
        "rgba(255, 193, 7, 1)",
    ],

    components: {
        // Main components
        preview: true,
        opacity: true,
        hue: true,

        // Input / output Options
        interaction: {
            hex: true,
            rgba: true,
            hsva: true,
            input: true,
            clear: true,
            save: true,
        },
    },
});
});

```

--------------------------------

### Include Cleave.js Library and Initialization Script

Source: https://themesbrand.com/velzon/docs/symfony/input-mask

This snippet shows how to include the Cleave.js library and its initialization script in your HTML. The cleave.min.js file provides the core functionality, while form-masks.init.js likely contains the custom JavaScript to apply the masks to specific form elements.

```html
<!-- cleave.js -->
<script src="assets/libs/cleave.js/cleave.min.js"></script>

<!-- form masks init -->
<script src="assets/js/pages/form-masks.init.js"></script>
```

--------------------------------

### Datatable with Alternative Pagination in Javascript

Source: https://themesbrand.com/velzon/docs/symfony/datatables

This example configures a Datatable to use the 'full_numbers' pagination style. This provides a more traditional pagination interface with page numbers and navigation buttons. It requires the Datatable library.

```javascript
document.addEventListener('DOMContentLoaded', function () {
let table = new DataTable('#alternative-pagination', {
    "pagingType": "full_numbers"
    });
});
```

--------------------------------

### Initialize Chart.js Initialization Script

Source: https://themesbrand.com/velzon/docs/symfony/chartjs

This snippet demonstrates how to include the custom initialization script for Chart.js. This script typically contains the logic to render charts on your page.

```html
<script src="assets/js/pages/chartjs.init.js"></script>
```

--------------------------------

### Initialize Autocomplete with Car Names

Source: https://themesbrand.com/velzon/docs/symfony/autocomplete

This JavaScript code initializes the Autocomplete widget with a list of car names. It is configured similarly to the fruit example, with a different data source and placeholder text.

```javascript
var autoCompleteCars = new autoComplete({
    selector: "#autoCompleteCars",
    placeHolder: "Search for Cars...",
    data: {
        src: ["Chevrolet", "Fiat", "Ford", "Honda", "Hyundai", 
        "Hyundai", "Kia", "Mahindra", "Maruti", "Mitsubishi","MG",
        "Nissan", "Renault","Skoda", "Tata", "Toyato", "Volkswagen"],
        cache: true
    },
    resultsList: {
        element: function element(list, data) {
          if (!data.results.length) {
            // Create "No Results" message element
            var message = document.createElement("div");
            // Add class to the created element
            message.setAttribute("class", "no_result");
            // Add message text content
            message.innerHTML = "Found No Results for \"" + data.query + "\"";
            // Append message element to the results list
            list.prepend(message);
          }
        },
        noResults: true
      },
      resultItem: {
        highlight: true
      },
      events: {
        input: {
          selection: function selection(event) {
            var selection = event.detail.selection.value;
            autoCompleteCars.input.value = selection;
          }
        }
      }
    });

```

--------------------------------

### Initialize Filepond for Profile Picture Selection

Source: https://themesbrand.com/velzon/docs/symfony/filepond

This JavaScript code initializes Filepond for a profile picture upload, featuring a circular preview. It registers essential plugins and configures Filepond with specific options for cropping, resizing, and layout to achieve the desired circular effect.

```javascript
FilePond.registerPlugin(
    // encodes the file as base64 data
    FilePondPluginFileEncode,
    // validates the size of the file
    FilePondPluginFileValidateSize,
    // corrects mobile image orientation
    FilePondPluginImageExifOrientation,
    // previews dropped images
    FilePondPluginImagePreview
);

FilePond.create(
    document.querySelector('.filepond-input-circle'),
    {
        labelIdle: 'Drag & Drop your picture or Browse',
        imagePreviewHeight: 170,
        imageCropAspectRatio: '1:1',
        imageResizeTargetWidth: 200,
        imageResizeTargetHeight: 200,
        stylePanelLayout: 'compact circle',
        styleLoadIndicatorPosition: 'center bottom',
        styleProgressIndicatorPosition: 'right bottom',
        styleButtonRemoveItemPosition: 'left bottom',
        styleButtonProcessItemPosition: 'right bottom',
    }
);
```

--------------------------------

### Initialize Scatter Charts (JavaScript)

Source: https://themesbrand.com/velzon/docs/symfony/apexcharts

This script initializes scatter charts with ApexCharts. It depends on the ApexCharts library and custom JavaScript for chart creation. The output is a scatter plot visualization.

```html
<!-- scatter charts init -->
<script src="assets/js/pages/apexcharts-scatter.init.js"></script>
```

--------------------------------

### Initialize Star Rater and Reset Functionality

Source: https://themesbrand.com/velzon/docs/symfony/ratings

This example initializes a raterJs instance with a default rating and demonstrates how to reset it using the `clear()` method. An event listener is attached to a button to trigger the reset and log the current rating.

```javascript
var starRatingreset = raterJs( {
    starSize:22,
    rating: 2, 
    element:document.querySelector("#raterreset"), 
    rateCallback:function rateCallback(rating, done) {
        this.setRating(rating); 
        done(); 
    }
}); 
document.querySelector('#raterreset-button').addEventListener("click", function() {
    starRatingreset.clear();
    console.log(starRatingreset.getRating());
}, false);

```

--------------------------------

### Initialize Swiper Slider with Custom JS

Source: https://themesbrand.com/velzon/docs/symfony/swiper-slider

This snippet shows how to include a custom JavaScript file for initializing the Swiper slider. This file typically contains the configuration and instantiation code for Swiper instances on your page. It should be included after the Swiper core JS.

```html
<!-- swiper.init js -->
<script src="assets/js/pages/swiper.init.js"></script>
```

--------------------------------

### HTML for Range Slider Sizes

Source: https://themesbrand.com/velzon/docs/symfony/nouislider

This set of HTML examples shows how to define different sizes for range sliders using the 'data-slider-size' attribute. This provides a way to control the visual dimensions of sliders for various layout needs.

```html
<div data-rangeslider data-slider-size="md"></div>
```

```html
<div data-rangeslider data-slider-color="md"></div>
```

```html
<div data-rangeslider data-slider-color="sm"></div>
```

--------------------------------

### Javascript SweetAlert Warning Message

Source: https://themesbrand.com/velzon/docs/symfony/sweetalert2

This example illustrates how to configure a SweetAlert for warning messages, specifically for a delete confirmation. It includes 'Yes, Delete It!' and 'Cancel' buttons with distinct styling and requires the SweetAlert library.

```javascript
document.getElementById("custom-sa-warning").addEventListener("click", function() {
    Swal.fire({
        html: '' + '' + '' + 'Are you Sure ?' + 'Are you Sure You want to Delete this Account ?' + '' + '',
        showCancelButton: true,
        confirmButtonClass: 'btn btn-primary w-xs me-2 mb-1',
        confirmButtonText: 'Yes, Delete It!',
        cancelButtonClass: 'btn btn-danger w-xs mb-1',
        buttonsStyling: false,
        showCloseButton: true
    })
});
```

--------------------------------

### Configure Vite Server Options

Source: https://themesbrand.com/velzon/docs/symfony/vertical

Customize Vite's development server behavior, including settings for hot module replacement (HMR) and port configuration. This example shows how to modify the server options in the `vite.config.js` file.

```javascript
import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    hmr: {
      protocol: 'ws',
      host: 'localhost',
    },
    port: 3000,
  },
});
```

--------------------------------

### Initialize Grid.js

Source: https://themesbrand.com/velzon/docs/symfony/gridjs

This snippet includes the custom JavaScript file responsible for initializing Grid.js on your pages. This file typically contains the code to set up and configure Grid.js instances.

```html
<!-- gridjs init -->
<script src="assets/js/pages/gridjs.init.js"></script>

```

--------------------------------

### HTML Ajax Select Example

Source: https://themesbrand.com/velzon/docs/symfony/select2

Shows an empty HTML select element intended for data loading via Ajax using Select2. This is useful for populating dropdowns dynamically from an external data source.

```html
<select class="js-example-data-array" name="state"></select>
```

--------------------------------

### Initialize Star Rater with Unlimited Stars and ReadOnly Mode

Source: https://themesbrand.com/velzon/docs/symfony/ratings

This example initializes a raterJs instance configured to display an unlimited number of stars by setting the `max` option. The `readOnly` option is set to `true`, preventing user interaction.

```javascript
var starRatingunlimited = raterJs( {
    max:16, 
    readOnly:true, 
    rating:4.4, 
    element:document.querySelector("#rater-unlimitedstar")
}); 

```

--------------------------------

### SCSS: Configure Sidebar Width

Source: https://themesbrand.com/velzon/docs/symfony/scss

Define the sidebar menu width for different screen sizes using these SCSS variables. This allows for responsive adjustments to the navigation layout.

```scss
$vertical-menu-width:                             250px;
$vertical-menu-width-md:                          180px;
$vertical-menu-width-sm:                          70px;
```

--------------------------------

### Datatable with Vertical Scrolling in Javascript

Source: https://themesbrand.com/velzon/docs/symfony/datatables

This example demonstrates how to enable vertical scrolling for a Datatable with a fixed height of 210px. It utilizes the 'scrollY' and 'scrollCollapse' options. This is useful for tables with many rows where a fixed height is desired.

```javascript
document.addEventListener('DOMContentLoaded', function () {
let table = new DataTable('#scroll-vertical', {
    "scrollY":        "210px",
    "scrollCollapse": true,
    "paging":         false
    });                                                          
});
```

--------------------------------

### Initialize Radialbar Charts (JavaScript)

Source: https://themesbrand.com/velzon/docs/symfony/apexcharts

This script initializes radial bar charts using ApexCharts. It depends on the ApexCharts library and custom JavaScript for implementation. The result is a radial bar chart visualization.

```html
<!-- radialbar charts init -->
<script src="assets/js/pages/apexcharts-radialbar.init.js"></script>
```

--------------------------------

### Set Theme Attribute in Twig Template

Source: https://themesbrand.com/velzon/docs/symfony/theme-setup

This snippet demonstrates how to set the theme attribute within the main HTML element in a Twig template. This is used to switch between different pre-built theme variations.

```twig
<html data-theme="default">
<!-- Other HTML content -->
</html>
```

--------------------------------

### Add French Language to JavaScript - Symfony

Source: https://themesbrand.com/velzon/docs/symfony/multi-language

This JavaScript code snippet demonstrates how to add a condition to the `setLanguage` function in `public/js/app.js` to handle the French language. It includes updating the flag image source.

```javascript
else if(lang=='fr') {
    document.getElementById("header-lang-img").src = "assets/images/flags/french.jpg";
}
```