Merge branch 'SERV-2286' into 'master'

Serv 2286

See merge request !4

resources/Elements/modal/modal.sample.js

+$(document).ready(function() {
+
+    // onShow callback
+    $('#modal_onshow').on('show.bs.modal', function() {
+        alert('onShow callback fired.')
+    });
+
+    // onShown callback
+    $('#modal_onshown').on('shown.bs.modal', function() {
+        alert('onShown callback fired.')
+    });
+
+    // onHide callback
+    $('#modal_onhide').on('hide.bs.modal', function() {
+        alert('onHide callback fired.')
+    });
+
+    // onHidden callback
+    $('#modal_onhidden').on('hidden.bs.modal', function() {
+        alert('onHidden callback fired.')
+    });
+
+})
\ No newline at end of file

resources/Elements/notification/notification.sample.js

+let limitlessNotification = new LimitlessNotification();
+
+$(document).on('click', '#notify_success', function () {
+    limitlessNotification.set('Success!', 'This is a success message!', 'success');
+});
+
+$(document).on('click', '#notify_error', function () {
+    limitlessNotification.set('Error!', 'This is an error message!', 'error');
+});
+
+$(document).on('click', '#notify_warning', function () {
+    limitlessNotification.set('', 'This is a warning message!', ''); // warning type as default
+});
+
+$(document).on('click', '#notify_info', function () {
+    limitlessNotification.set('Info!', 'This is an info message!', 'info');
+});
+
+$(document).on('click', '#notify_confirm', function () {
+    let instance = limitlessNotification.set('Confirmation', 'Are you sure?', 'warning', true);
+
+    // On confirm
+    instance.get().on('pnotify.confirm', function() {
+        alert('Are you really really sure?');
+    })
+
+    // On cancel
+    instance.get().on('pnotify.cancel', function() {
+        alert('Okay.');
+    });
+});
+
+$(document).on('click', '#notify_bar', function () {
+    limitlessNotification.set('Bar!', 'This is a bar notification', 'info', false, true, 'bottom');
+});
\ No newline at end of file

src/Managers/ChartManager/ChartDataManager.php

+<?php
+namespace Ceetrox\Managers\ChartManager;
+
+Class ChartDataManager {
+
+    private ?string  $title;
+    private array    $categories;
+    private Series   $series;
+    private ?int     $numberOfCharts;
+    private array    $colors;
+    private ?int     $animationDuration;
+    private ?string  $yAxisLabelValueFormat;
+    private ?string  $rawData;
+
+    private ?bool    $isStacked;
+    private ?string    $markLine;
+
+    public function __construct()
+    {
+        $this->title = null;
+        $this->categories = [];
+        $this->series = new Series();
+        $this->numberOfCharts = null;
+        $this->colors = [];
+        $this->animationDuration = null;
+        $this->yAxisLabelValueFormat = null;
+        $this->rawData = null;
+
+        $this->isStacked = null;
+        $this->markLine = null;
+    }
+
+
+    public function setTitle(string $value)
+    {
+        $this->title = $value;
+    }
+
+    public function setColors($color)
+    {
+        if(is_array($color)) {
+            $this->colors = array_merge($this->colors, $color);
+        } else {
+            $this->colors[] = $color;
+        }
+    }
+
+    public function setAnimationDuration(int $value)
+    {
+        $this->animationDuration = $value;
+    }
+
+    public function setYAxisLabelValueFormat(string $value)
+    {
+        $this->yAxisLabelValueFormat = $value;
+    }
+
+    public function setRawData(string $value)
+    {
+        $this->rawData = $value;
+    }
+
+    public function setIsStacked(bool $value)
+    {
+        $this->isStacked = $value;
+    }
+
+    public function setMarkLine(string $value)
+    {
+        $this->markLine = $value;
+    }
+
+    public function addCategories($category)
+    {
+        if(is_array($category)) {
+            $this->categories = array_merge($this->categories, $category);
+        } else {
+            $this->categories[] = $category;
+        }
+    }
+
+    public function addSeries(ISeriesData $series)
+    {
+        $this->series->push($series);
+        $this->numberOfCharts = $this->series->numberOfCharts();
+    }
+
+    public function getParentData(): array
+    {
+        // set if conditions so we can only pass attributes that are set.
+        // if attributes are not set then we can check and use the manual parameters of the charts.
+
+        $data = [];
+
+        if(!is_null($this->title))                      $data['title'] = $this->title;
+        if(!is_null($this->numberOfCharts))             $data['charts'] = $this->numberOfCharts;
+        if(count($this->series) > 0)                    $data['series'] = $this->series->toArray();
+        if(count($this->categories) > 0)                $data['categories'] = $this->categories;
+        if(count($this->colors) > 0)                    $data['colors'] = $this->colors;
+        if(!is_null($this->animationDuration))          $data['animationDuration'] = $this->animationDuration;
+        if(!is_null($this->yAxisLabelValueFormat))      $data['yAxisLabelValueFormat'] = $this->yAxisLabelValueFormat;
+        if(!is_null($this->rawData))                    $data['raw'] = json_encode(json_decode($this->rawData));
+
+        if(!is_null($this->isStacked))                  $data['stacked'] = $this->isStacked;
+        if(!is_null($this->markLine))                   $data['markLine'] = $this->markLine;
+
+        return $data;
+    }
+}
\ No newline at end of file

src/Managers/ChartManager/ChartManager.js

+class ChartManager {
+
+    defaultColors = [
+        '#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80',
+        '#8d98b3','#e5cf0d','#97b552','#95706d','#dc69aa',
+        '#07a2a4','#9a7fd1','#588dd5','#f5994e','#c05050',
+        '#59678c','#c9ab00','#7eb00a','#6f5553','#c14089',
+        '#66bb6a'
+    ];
+
+    defaultLoadingOptions = {
+        text: 'LADE DATEN',
+        maskColor: '#353f53',
+        color: '#fff',
+        textColor: '#fff',
+        fontSize: 15
+    };
+
+    defaultGlobalTextStyle = {
+        fontFamily: 'Roboto, Arial, Verdana, sans-serif',
+        fontSize: 13
+    };
+
+    isModuleSet() {
+        let isset = (typeof echarts != 'undefined');
+        if (isset == false) console.warn('Warning - echarts.min.js is not loaded.');
+        return isset;
+    }
+
+    getColors(objectData, elementObject) {
+        return objectData?.colors ?? (JSON.parse(elementObject.attr('colors')) ?? chartManager.defaultColors)
+    }
+
+    getAnimationDuration(objectData, elementObject) {
+        return objectData?.animationDuration ?? (elementObject.attr('animation-duration') ?? 750);
+    }
+
+    getYAxisLabelValueFormat(objectData, elementObject) {
+        // ex '{value} users'  - https://echarts.apache.org/en/option.html#yAxis.axisLabel.formatter
+        return objectData?.yAxisLabelValueFormat ?? (elementObject.attr('y-axis-label-value-format') ?? null);
+    }
+
+    getSeriesStacked(objectData, elementObject) {
+        return objectData?.stacked ?? ((elementObject.attr('stacked') == 'true' || elementObject.attr('stacked') == true) ?? false);
+    }
+
+    getSeriesMarkLine(objectData, elementObject) {
+        // min | max | average
+        return objectData?.markLine ?? (elementObject.attr('mark-line') ?? null);
+    }
+
+    getChartCategories(objectData, elementObject) {
+        return objectData?.categories ?? (JSON.parse(elementObject.attr('categories')) ?? null);
+    }
+
+    getChartSeries(objectData, elementObject) {
+        return objectData?.series ?? (JSON.parse(elementObject.attr('series')) ?? null);
+    }
+
+    getChartSeriesNames(series) {
+        return series && series.map(function(item){ return item.name });
+    }
+
+    getRawData(objectData, elementObject) {
+        return objectData?.rawData ?? (elementObject.attr('raw') ? JSON.parse(elementObject.attr('raw')) : null);
+    }
+
+    getObjectData(elementObject) {
+        return elementObject.attr('data') ? JSON.parse(elementObject.attr('data')) : null;
+    }
+
+    setSeriesMarkLine(series, seriesData, markLine) {
+        if(seriesData.markLine !== undefined && ['min', 'max', 'average'].includes(markLine)) {
+
+            series.markLine = {
+                data: [{
+                    type: seriesData.markLine,
+                    name: seriesData.markLine[0].toUpperCase() + seriesData.markLine.substring(1),
+                }]
+            };
+
+        } else if(markLine != null && ['min', 'max', 'average'].includes(markLine)) {
+
+            series.markLine = {
+                data: [{
+                    type: markLine,
+                    name: markLine[0].toUpperCase() + markLine.substring(1),
+                }]
+            };
+        }
+    }
+
+    setResizeEvent(chartElement, chartInstance) {
+        // Resize function
+        let triggerChartResize = function() {
+            chartElement && chartInstance.resize();
+        };
+
+        // On sidebar width change
+        let sidebarToggle = document.querySelector('.sidebar-control');
+        sidebarToggle && sidebarToggle.addEventListener('click', triggerChartResize);
+
+        // On window resize
+        let resizeCharts;
+        window.addEventListener('resize', function() {
+            clearTimeout(resizeCharts);
+            resizeCharts = setTimeout(function () {
+                triggerChartResize();
+            }, 200);
+        });
+    }
+
+}
\ No newline at end of file

src/Managers/ChartManager/ISeriesData.php

+<?php
+namespace Ceetrox\Managers\ChartManager;
+
+interface ISeriesData
+{
+    public function getIndex(): int;
+}

src/Managers/ChartManager/Series.php

+<?php
+namespace Ceetrox\Managers\ChartManager;
+
+use Illuminate\Support\Collection;
+
+class Series extends Collection
+{
+    public function toArray(): array
+    {
+        $return = [];
+        $this->each(function (ISeriesData $entry) use (&$return) {
+            $return[] = $entry->toArray();
+        });
+
+        return $return;
+    }
+
+    public function numberOfCharts(): int
+    {
+        return $this->unique(function (ISeriesData $entry) {
+           return $entry->getIndex();
+        })->count();
+    }
+}

src/Managers/ChartManager/SeriesData.php

+<?php
+namespace Ceetrox\Managers\ChartManager;
+
+class SeriesData
+{
+    private string    $name;
+    private array     $categoryValues;
+    private int       $index;
+    private ?string   $type;
+    private ?string   $stackName;
+    private ?string   $markLine;
+
+    public function __construct()
+    {
+        $this->categoryValues = [];
+        $this->index = 0;
+        $this->type = null;
+        $this->stackName = null;
+        $this->markLine = null;
+    }
+
+    public function getIndex() : int
+    {
+        return $this->index;
+    }
+
+    public function setName(string $name)
+    {
+        $this->name = $name;
+    }
+
+    public function setCategoryValues($values)
+    {
+        if(is_array($values)) {
+            $this->categoryValues = array_merge($this->categoryValues, $values);
+        } else {
+            $this->categoryValues[] = $values;
+        }
+    }
+
+    public function setIndex(int $index)
+    {
+        $this->index = $index;
+    }
+
+    public function setType(string $value)
+    {
+        $this->type = $value;
+    }
+
+    public function setStackName(string $value)
+    {
+        $this->stackName = $value;
+    }
+
+    public function setMarkLine(string $value)
+    {
+        $this->markLine = $value;
+    }
+
+    public function getParentData(): array
+    {
+        $data = [];
+
+        $data['name']  = $this->name;
+        $data['data']  = $this->categoryValues;
+        $data['index'] = $this->index;
+
+        if(!is_null($this->type)) $data['type']                     = $this->type;
+        if(!is_null($this->stackName)) $data['stacked']             = $this->stackName;
+        if(!is_null($this->markLine)) $data['markLine']             = $this->markLine;
+
+        return $data;
+    }
+
+}

src/Managers/PicassoManager/AssetHelper.php

@@ -30,7 +30,7 @@
     | Class "AssetHelper"
     |------------------------------------------------------------------------------------------------
     */
-    class AssetHelper  
+    class AssetHelper
     {
 
         /*
@@ -55,6 +55,13 @@
             */
             if (isset($configCls->assetAllocation) && isset($configCls->assetAllocation[$currentKey]))
             {
+
+                /*
+                |--------------------------------------------------------------------------------
+                | Start the ResourcePublisherManager for getting the mimetype within the loop.
+                */
+                $RP = new ResourcePublisherManager();
+
                 /*
                 |------------------------------------------------------------------------------------
                 | Loop all available assets.
@@ -93,7 +100,6 @@
                     |--------------------------------------------------------------------------------
                     | Get the correct mimetype of the source.
                     */
-                    $RP = new ResourcePublisherManager();
                     $mime = $RP->getMime($path);
 
                     /*

src/Managers/PicassoManager/BladeManagement.php

@@ -30,7 +30,7 @@
     | Class "BladeManagement"
     |------------------------------------------------------------------------------------------------
     */
-    class BladeManagement  
+    class BladeManagement
     {
 
         /*
@@ -101,40 +101,43 @@
                     |--------------------------------------------------------------------------------
                     | Load all allocations from the config.
                     */
-                    foreach ($config->methodAllocation as $key => $method)
+                    if(isset($config->methodAllocation))
                     {
-                        $blade->directive($key, function ($parameters) use ($key, $config, $method, $folder, $namespace)
+                        foreach ($config->methodAllocation as $key => $method)
                         {
-                            /*
-                            |------------------------------------------------------------------------
-                            | Protect parameters array against empty strings.
-                            */
-                            if (strlen($parameters) < 2)
+                            $blade->directive($key, function ($parameters) use ($key, $config, $method, $folder, $namespace)
                             {
-                                $parameters = 'array()';
-                            }
-
-                            /*
-                            |------------------------------------------------------------------------
-                            | Increase the picasso unique id.
-                            */
-                            $this->picassoid++;
-
-                            /*
-                            |------------------------------------------------------------------------
-                            | Register the directive return value (related View) together with the
-                            | picasso tag as identifier.
-                            */
-                            return
-                            '<picasso id="picasso' . $this->picassoid . '" type="start" folder="' . $folder . '" method="' . $method . '"></picasso>' .
-                            AssetHelper::generateAssetTag($config, $namespace, $folder, $key) .
-                            '<?php
-                            $array = ' . $parameters . ';
-                            $class = new \Ceetrox\Sidekick\Views\\' . $namespace . '\\' . $folder . '\Config();
-                            echo $class -> ' . $method . '($array)->render();
-                            ?>' .
-                            '<picasso id="picasso' . $this->picassoid . '" type="stop"></picasso>';
-                        });
+                                /*
+                                |------------------------------------------------------------------------
+                                | Protect parameters array against empty strings.
+                                */
+                                if (strlen($parameters) < 2)
+                                {
+                                    $parameters = 'array()';
+                                }
+
+                                /*
+                                |------------------------------------------------------------------------
+                                | Increase the picasso unique id.
+                                */
+                                $this->picassoid++;
+
+                                /*
+                                |------------------------------------------------------------------------
+                                | Register the directive return value (related View) together with the
+                                | picasso tag as identifier.
+                                */
+                                return
+                                '<picasso id="picasso' . $this->picassoid . '" type="start" folder="' . $folder . '" method="' . $method . '"></picasso>' .
+                                AssetHelper::generateAssetTag($config, $namespace, $folder, $key) .
+                                '<?php
+                                $array = ' . $parameters . ';
+                                $class = new \Ceetrox\Sidekick\Views\\' . $namespace . '\\' . $folder . '\Config();
+                                echo $class -> ' . $method . '($array)->render();
+                                ?>' .
+                                '<picasso id="picasso' . $this->picassoid . '" type="stop"></picasso>';
+                            });
+                        }
                     }
                 }
             }
@@ -149,7 +152,7 @@
     | Class "ViewStorage"
     |------------------------------------------------------------------------------------------------
     */
-    class ViewStorage extends ServiceProvider  
+    class ViewStorage extends ServiceProvider
     {
 
         /*

src/Managers/ResourcePublisherManager/ResourcePublisherManager.php

@@ -22,6 +22,7 @@
     |------------------------------------------------------------------------------------------------
     */
     use Response;
+    use Cache;
 
 
     /*
@@ -29,7 +30,7 @@
     | Class "ResourcePublisherManager"
     |------------------------------------------------------------------------------------------------
     */
-    class ResourcePublisherManager  
+    class ResourcePublisherManager
     {
 
         /*
@@ -124,8 +125,9 @@
         */
         public function getMime($filePathOrUrl)
         {
-            return $this->renderFilePath($filePathOrUrl, true);
-
+            return Cache::rememberForever('ResourcePublisherManagergetMime'.$filePathOrUrl, function () use ($filePathOrUrl) {
+                return $this->renderFilePath($filePathOrUrl, true);
+            });
         }
 
 
@@ -240,6 +242,8 @@
                 exit();
             }
 
+            header("Access-Control-Allow-Origin: *");
+
             /*
             |----------------------------------------------------------------------------------------
             | ...otherwise by default, load the file and return a successfull response.

src/Providers/CoreServiceProvider.php

@@ -23,7 +23,11 @@
     */
     use Ceetrox\Providers\CommandServiceProvider\CommandServiceProvider;
     use Ceetrox\Providers\PicassoServiceProvider\PicassoServiceProvider;
+    use Ceetrox\Sidekick\Views\Limitless\Barchart\Attachments\BarChartData;
+    use Ceetrox\Sidekick\Views\Limitless\Linechart\Attachments\LineChartData;
+    use Ceetrox\Sidekick\Views\Limitless\Piechart\Attachments\PieChartData;
     use Illuminate\Support\ServiceProvider;
+    use Illuminate\Foundation\AliasLoader;
 
 
     /*
@@ -53,6 +57,24 @@
             */
             app()->register( new PicassoServiceProvider( app() ) );
 
+            /*
+            |----------------------------------------------------------------------------------------
+            | Set the aliases of the chart data manager classes.
+            */
+            $this->app->booting(function() {
+                $loader = AliasLoader::getInstance();
+                $loader->alias('SidekickLineChartDataManager', LineChartData::class);
+            });
+
+            $this->app->booting(function() {
+                $loader = AliasLoader::getInstance();
+                $loader->alias('SidekickBarChartDataManager', BarChartData::class);
+            });
+
+            $this->app->booting(function() {
+                $loader = AliasLoader::getInstance();
+                $loader->alias('SidekickPieChartDataManager', PieChartData::class);
+            });
         }
 
     }

src/Views/Limitless/Authentication/Attachments/authentication.init.js

+$(document).ready(function() {
+
+})
\ No newline at end of file

src/Views/Limitless/Authentication/Config.php

+<?php
+
+
+    /*
+    |------------------------------------------------------------------------------------------------
+    | Information
+    |------------------------------------------------------------------------------------------------
+    |
+    | This file is beautified by the command "sidekick:CodebeautifierCommand" of the ceetrox
+    | sidekick package.
+    |
+    | Author: Kevin Almond Roe Yumang <kevin.yumang@itmax.email>
+    | Update: 2022-06-30 02:31:57
+    |
+    */
+    namespace Ceetrox\Sidekick\Views\Limitless\Authentication;
+
+
+    /*
+    |------------------------------------------------------------------------------------------------
+    | Dependencies
+    |------------------------------------------------------------------------------------------------
+    */
+    use View;
+
+
+    /*
+    |------------------------------------------------------------------------------------------------
+    | Class "Config"
+    |------------------------------------------------------------------------------------------------
+    */
+    class Config 
+    {
+        public $methodAllocation = [
+        'Limitless::AuthenticationStart' => 'authenticationStart',
+        'Limitless::AuthenticationStop' => 'authenticationStop',
+        ];
+
+        public $assetAllocation;
+
+        public function __construct()
+        {
+            $this->assetAllocation = [
+                'Limitless::AuthenticationStart' => [
+                    'Attachments/authentication.init.js'
+                ]
+            ];
+        }
+
+
+        /*
+        |--------------------------------------------------------------------------------------------
+        | Method "authenticationStart"
+        |--------------------------------------------------------------------------------------------
+        */
+        public function authenticationStart($parameters)
+        {
+            return View('Limitless::Authentication.Start');
+
+        }
+
+
+        /*
+        |--------------------------------------------------------------------------------------------
+        | Method "authenticationStop"
+        |--------------------------------------------------------------------------------------------
+        */
+        public function authenticationStop()
+        {
+            return View('Limitless::Authentication.Stop');
+
+        }
+
+    }
+
+
+

src/Views/Limitless/Authentication/Documentation/Index.blade.php

+{{-- Layout Reference --}}
+@extends('Limitless::Help.Layout.Master')
+
+@section('Limitless::Content')
+
+    @Limitless::AuthenticationStart
+
+@stop

src/Views/Limitless/Barchart/Attachments/BarChartData.php

+<?php
+namespace Ceetrox\Sidekick\Views\Limitless\Barchart\Attachments;
+
+use Ceetrox\Managers\ChartManager\ChartDataManager;
+use Ceetrox\Managers\ChartManager\ISeriesData;
+
+Class BarChartData extends ChartDataManager {
+
+    private ?bool    $isHorizontal;
+    private ?bool    $showBarValues;
+
+    public function __construct()
+    {
+        parent::__construct();
+
+        $this->isHorizontal = null;
+        $this->showBarValues = null;
+    }
+
+    public static function getInstance(): BarChartData
+    {
+        return new self;
+    }
+
+    public static function getSeriesDataInstance(): ISeriesData
+    {
+        return new BarSeriesData();
+    }
+
+    public function setIsHorizontal(bool $value)
+    {
+        $this->isHorizontal = $value;
+    }
+
+    public function setShowBarValues(bool $value)
+    {
+        $this->showBarValues = $value;
+    }
+
+    public function toJson(): string
+    {
+        return json_encode($this->toArray());
+    }
+
+    public function toArray(): array
+    {
+        // set if conditions so we can only pass attributes that are set.
+        // if attributes are not set then we can check and use the manual parameters of the charts.
+
+        $data = [];
+
+        if(!is_null($this->isHorizontal))               $data['horizontal'] = $this->isHorizontal;
+        if(!is_null($this->showBarValues))              $data['barValues'] = $this->showBarValues;
+
+        $data = array_merge($data, $this->getParentData());
+
+        return $data;
+    }
+
+}
\ No newline at end of file

src/Views/Limitless/Barchart/Attachments/BarSeriesData.php

+<?php
+namespace Ceetrox\Sidekick\Views\Limitless\Barchart\Attachments;
+
+use Ceetrox\Managers\ChartManager\ISeriesData;
+use Ceetrox\Managers\ChartManager\SeriesData;
+
+class BarSeriesData extends SeriesData implements ISeriesData
+{
+    private ?bool   $showBarValues;
+
+    public function __construct()
+    {
+        parent::__construct();
+
+        $this->showBarValues = null;
+    }
+
+    public function setShowBarValues(bool $value)
+    {
+        $this->showBarValues = $value;
+    }
+
+    public function toArray(): array
+    {
+        $data = [];
+
+        if(!is_null($this->showBarValues)) $data['showBarValues']   = $this->showBarValues;
+
+        $data = array_merge($data, $this->getParentData());
+
+        return $data;
+    }
+
+}

src/Views/Limitless/Barchart/Attachments/barchart.init.js

+let chartManager = new ChartManager();
+
+//#region MAIN FUNCTIONS
+function set_chart() {
+
+    if(chartManager.isModuleSet() == false) return;
+
+    let chartCounter = 0;
+
+    $('.LimitlessBarChart').each(function() {
+
+        chartCounter++;
+        let elementChart = $(this);
+        elementChart.attr('id', 'LimitlessBarChart' + chartCounter);
+
+        init_chart(elementChart[0].id);
+
+    });
+
+}
+function init_chart(chartId) {
+
+    // Define element
+    let chartElement = document.getElementById(chartId);
+
+    if (chartElement) {
+
+        let elementObject = $(chartElement);
+
+        let chartInstance = echarts.init(chartElement);
+
+        chartInstance.showLoading(chartManager.defaultLoadingOptions);
+
+        set_data(elementObject, function(options) {
+            chartInstance.hideLoading();
+            chartInstance.setOption(options);
+            chartManager.setResizeEvent(chartElement, chartInstance);
+        })
+    }
+}
+function set_data(elementObject, callback) {
+
+    setTimeout(function() {
+
+        let options;
+
+        let objectData = chartManager.getObjectData(elementObject);
+        let rawData = chartManager.getRawData(objectData, elementObject);
+
+        if(rawData == null) {
+
+            // variables (this will be set by user)
+
+            // unique attributes of bar chart
+            let title = objectData?.title ?? (elementObject.attr('title') ?? null);
+            let horizontal = objectData?.horizontal ?? (elementObject.attr('horizontal') == 'true' || elementObject.attr('horizontal') == true); // default false
+            let showBarValues = objectData?.barValues ?? ((elementObject.attr('bar-values') == 'true' || elementObject.attr('bar-values') == true) ?? false); // series data option
+
+            let yAxisLabelValueFormat = chartManager.getYAxisLabelValueFormat(objectData, elementObject);
+
+            let stacked = chartManager.getSeriesStacked(objectData, elementObject);
+            let markLine = chartManager.getSeriesMarkLine(objectData, elementObject);
+
+            let categories = chartManager.getChartCategories(objectData, elementObject);
+            let series = chartManager.getChartSeries(objectData, elementObject);
+
+            let seriesNames = chartManager.getChartSeriesNames(series);
+            let seriesObject = setSeries(series, stacked, markLine, showBarValues, horizontal);
+
+            // Options
+            options = {
+
+                // Chart title
+                title: setTitle(title),
+
+                // Define colors
+                color: chartManager.getColors(objectData, elementObject),
+
+                // Global text styles
+                textStyle: chartManager.defaultGlobalTextStyle,
+
+                // Chart animation duration
+                animationDuration: chartManager.getAnimationDuration(objectData, elementObject),
+
+                // Setup grid
+                grid: setGrid(),
+
+                // Add legend
+                legend: setLegend(seriesNames),
+
+                // Add tooltip
+                tooltip: setTooltip(),
+
+                // Horizontal axis
+                xAxis: horizontal ? setYAxis(yAxisLabelValueFormat) : setXAxis(categories),
+
+                // Vertical axis
+                yAxis: horizontal ? setXAxis(categories) : setYAxis(yAxisLabelValueFormat),
+
+                // Add series
+                series: seriesObject
+            };
+
+        } else {
+            options = rawData;
+        }
+
+        callback(options);
+
+    }, 1000);
+
+}
+//#endregion
+
+//#region FUNCTIONS FOR OPTIONS
+function setSeries(seriesData, stacked, markLine, showBarValues, horizontal = false) {
+
+    // uses series options if available else use global options.
+    let seriesArray = [];
+
+    if(!seriesData || seriesData.length == 0) return [];
+
+    for(let i = 0; i < seriesData.length; i++) {
+
+        let series = {
+            name: seriesData[i].name,
+            type: seriesData[i].type ?? 'bar',
+            data: seriesData[i].data,
+            stack: seriesData[i].stacked ?? stacked,
+            itemStyle: {
+                normal: {
+                    label: {
+                        show: seriesData[i].showBarValues ?? showBarValues,
+                        position: horizontal ? 'insideRight' : 'top',
+                        textStyle: {
+                            fontWeight: 500
+                        }
+                    }
+                }
+            },
+        }
+
+        chartManager.setSeriesMarkLine(series, seriesData[i], markLine);
+
+        seriesArray.push(series);
+
+    }
+
+    return seriesArray;
+}
+function setXAxis(categories) {
+
+    let x = {
+        type: 'category',
+        axisLabel: {
+            color: '#fff'
+        },
+        axisLine: {
+            lineStyle: {
+                color: 'rgba(255,255,255,0.25)'
+            }
+        },
+        splitLine: {
+            show: true,
+            lineStyle: {
+                color: 'rgba(255,255,255,0.1)',
+                type: 'dashed'
+            }
+        }
+    };
+
+    if(categories != null) {
+        x.data = categories;
+    }
+
+    return x;
+}
+function setYAxis(yAxisLabelValueFormat) {
+
+    return {
+        type: 'value',
+        axisLabel: {
+            formatter: yAxisLabelValueFormat,
+            color: '#fff'
+        },
+        axisLine: {
+            lineStyle: {
+                color: 'rgba(255,255,255,0.25)'
+            }
+        },
+        splitLine: {
+            lineStyle: {
+                color: 'rgba(255,255,255,0.1)'
+            }
+        },
+        splitArea: {
+            show: true,
+                areaStyle: {
+                color: ['rgba(255,255,255,0.01)', 'rgba(0,0,0,0.01)']
+            }
+        }
+    };
+}
+function setLegend(legendData) {
+    return {
+        data: legendData,
+        itemHeight: 8,
+        itemGap: 20,
+        textStyle: {
+            color: '#fff'
+        }
+    }
+}
+function setTitle(title) {
+
+    if(title == null) return null;
+
+    return {
+        text: title,
+        textStyle: {
+            color: '#fff'
+        }
+    }
+
+}
+function setTooltip() {
+    return {
+        trigger: 'axis',
+        backgroundColor: 'rgba(255,255,255,0.9)',
+        padding: [10, 15],
+        textStyle: {
+            color: '#222',
+            fontSize: 13,
+            fontFamily: 'Roboto, sans-serif'
+        },
+        axisPointer: {
+            type: 'shadow',
+            shadowStyle: {
+                color: 'rgba(255,255,255,0.1)'
+            }
+        }
+    }
+}
+function setGrid() {
+
+    return {
+        left: 0,
+        right: 40,
+        top: 50,
+        containLabel: true
+    };
+
+}
+//#endregion
+
+$(document).ready(function() { set_chart(); });
\ No newline at end of file

src/Views/Limitless/Barchart/BarChart.blade.php

+<div class="chart-container">
+    <div class="chart has-fixed-height LimitlessBarChart"
+         title="{{ $title }}"
+         colors="{{ json_encode($colors) }}"
+         bar-values="{{ $barValues }}"
+         horizontal="{{ $horizontal }}"
+         stacked="{{ $stacked }}"
+         animation-duration="{{ $animationDuration }}"
+         @if($yAxisLabelValueFormat != null) y-axis-label-value-format="{{ $yAxisLabelValueFormat }}" @endif
+         @if($markLine != null) mark-line="{{ $markLine }}" @endif
+         categories="{{ json_encode($categories) }}"
+         series="{{ json_encode($series) }}"
+         raw="{{ json_encode(json_decode($raw)) }}"
+         data="{{ $data }}"
+    >
+    </div>
+</div>
\ No newline at end of file

src/Views/Limitless/Barchart/Config.php

+<?php
+
+
+    /*
+    |------------------------------------------------------------------------------------------------
+    | Information
+    |------------------------------------------------------------------------------------------------
+    |
+    | This file is beautified by the command "sidekick:CodebeautifierCommand" of the ceetrox
+    | sidekick package.
+    |
+    | Author: Kevin Almond Roe Yumang <kevin.yumang@itmax.email>
+    | Update: 2022-07-21 01:27:31
+    |
+    */
+    namespace Ceetrox\Sidekick\Views\Limitless\Barchart;
+
+
+    /*
+    |------------------------------------------------------------------------------------------------
+    | Dependencies
+    |------------------------------------------------------------------------------------------------
+    */
+    use View;
+
+
+    /*
+    |------------------------------------------------------------------------------------------------
+    | Class "Config"
+    |------------------------------------------------------------------------------------------------
+    */
+    class Config 
+    {
+        public $methodAllocation = [
+        'Limitless::BarChart' => 'barChart'
+        ];
+
+        
+        public $assetAllocation;
+
+
+        /*
+        |--------------------------------------------------------------------------------------------
+        | Method "__construct"
+        |--------------------------------------------------------------------------------------------
+        */
+        public function __construct()
+        {
+            $this->assetAllocation = [
+            'Limitless::BarChart' => [
+            '../../../Managers/ChartManager/ChartManager.js',
+            'Attachments/barchart.init.js',
+            secure_url('/ceetrox/sidekick/resource/public/Webdesigns/design-limitless/Template/global_assets/js/plugins/visualization/echarts/echarts.min.js'),
+            ]
+            ];
+
+        }
+
+
+        /*
+        |--------------------------------------------------------------------------------------------
+        | Method "barChart"
+        |--------------------------------------------------------------------------------------------
+        */
+        public function barChart($parameters)
+        {
+            return View('Limitless::Barchart.BarChart')
+            ->withTitle($parameters['title'] ?? null)
+            ->withColors($parameters['colors'] ?? null)
+            ->withBarValues($parameters['bar-values'] ?? false)
+            ->withHorizontal($parameters['horizontal'] ?? false)
+            ->withStacked($parameters['stacked'] ?? false)
+            ->withAnimationDuration($parameters['animation-duration'] ?? 750)
+            ->withYAxisLabelValueFormat($parameters['y-axis-label-value-format'] ?? null)
+            ->withMarkLine($parameters['mark-line'] ?? null)
+            ->withCategories($parameters['categories'] ?? null)
+            ->withSeries($parameters['series'] ?? null)
+            ->withRaw($parameters['raw'] ?? null)
+            ->withData($parameters['data'] ?? null);
+
+        }
+
+    }
+
+
+

src/Views/Limitless/Barchart/Documentation/Index.blade.php

+{{-- Layout Reference --}}
+@extends('Limitless::Help.Layout.Master')
+
+@section('Limitless::Content')
+
+    @php
+
+        $chartDataManager = SidekickBarChartDataManager::getInstance();
+        // or $chartDataManager = new SidekickBarChartDataManager();
+
+         // accepts string or array.
+        $chartDataManager->addCategories('Mon');
+        $chartDataManager->addCategories(['Tue', 'Wed', 'Thu', 'Fri']);
+
+        $sd = $chartDataManager::getSeriesDataInstance();
+        $sd->setName('ONC');
+        $sd->setCategoryValues(10);
+        $sd->setCategoryValues([100, 50, 80, 60]);
+        $sd->setIndex(0); // 0 as default.
+
+        $chartDataManager->addSeries($sd);
+
+        $sd = $chartDataManager::getSeriesDataInstance();
+        $sd->setName('APR');
+        $sd->setCategoryValues([90,40,70,20,90]);
+        $sd->setIndex(0);
+
+        $chartDataManager->addSeries($sd);
+
+        $chartDataManager->setIsHorizontal(true);
+        $chartDataManager->setShowBarValues(true);
+
+        $dataObject = $chartDataManager->toJson();
+
+        // sample backend data
+        $categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'July', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+        $series = ['ONC', 'APR', 'PHX', 'BRG'];
+
+        $seriesData = [];
+        foreach ($series as $s) {
+            $data['name'] = $s;
+            $dataArray = [];
+            foreach ($categories as $c) {
+               $dataArray[] = rand(1,100);
+            }
+            $data['data'] = $dataArray;
+            $data['index'] = 0; //rand(0,1); on what chart index to add.
+            $seriesData[] = $data;
+        }
+
+        // json string data should be valid else it will return null
+        $rawData = '{
+           "textStyle":{
+              "fontFamily":"Roboto, Arial, Verdana, sans-serif",
+              "fontSize":13
+           },
+           "animationDuration":750,
+           "grid":{
+              "left":0,
+              "right":30,
+              "top":30,
+              "bottom":0,
+              "containLabel":true
+           },
+           "legend":{
+              "data":[
+                 "Customers",
+                 "Returned"
+              ],
+              "itemHeight":8,
+              "itemGap":20,
+              "textStyle":{
+                 "padding":[
+                    0,
+                    5
+                 ],
+                 "color":"#fff"
+              }
+           },
+           "tooltip":{
+              "trigger":"axis",
+              "backgroundColor":"rgba(255,255,255,0.9)",
+              "padding":[
+                 10,
+                 15
+              ],
+              "textStyle":{
+                 "color":"#222",
+                 "fontSize":13,
+                 "fontFamily":"Roboto, sans-serif"
+              },
+              "axisPointer":{
+                 "type":"shadow",
+                 "shadowStyle":{
+                    "color":"rgba(255,255,255,0.1)"
+                 }
+              }
+           },
+           "xAxis":[
+              {
+                 "type":"value",
+                 "axisLabel":{
+                    "color":"#fff"
+                 },
+                 "axisLine":{
+                    "lineStyle":{
+                       "color":"rgba(255,255,255,0.25)"
+                    }
+                 },
+                 "splitLine":{
+                    "show":true,
+                    "lineStyle":{
+                       "color":"rgba(255,255,255,0.1)",
+                       "type":"dashed"
+                    }
+                 }
+              }
+           ],
+           "yAxis":[
+              {
+                 "type":"category",
+                 "data":[
+                    "Oct",
+                    "Sep",
+                    "Aug",
+                    "July",
+                    "June",
+                    "May",
+                    "Apr",
+                    "Mar",
+                    "Feb",
+                    "Jan"
+                 ],
+                 "axisLabel":{
+                    "color":"#fff"
+                 },
+                 "axisLine":{
+                    "lineStyle":{
+                       "color":"rgba(255,255,255,0.25)"
+                    }
+                 },
+                 "splitLine":{
+                    "show":true,
+                    "lineStyle":{
+                       "color":"rgba(255,255,255,0.1)"
+                    }
+                 },
+                 "splitArea":{
+                    "show":true,
+                    "areaStyle":{
+                       "color":[
+                          "rgba(255,255,255,0.01)",
+                          "rgba(0,0,0,0.01)"
+                       ]
+                    }
+                 }
+              }
+           ],
+           "series":[
+              {
+                 "name":"Customers",
+                 "type":"bar",
+                 "barCategoryGap":"40%",
+                 "label":{
+                    "normal":{
+                       "textStyle":{
+                          "color":"#682d19"
+                       },
+                       "position":"left",
+                       "show":false,
+                       "formatter":"{b}"
+                    }
+                 },
+                 "itemStyle":{
+                    "normal":{
+                       "color":"#6bca6f"
+                    }
+                 },
+                 "data":[
+                    1900,
+                    1029,
+                    1602,
+                    2004,
+                    1100,
+                    1800,
+                    2800,
+                    1407,
+                    2200,
+                    900
+                 ]
+              },
+              {
+                 "name":"Returned",
+                 "type":"line",
+                 "symbol":"circle",
+                 "symbolSize":7,
+                 "silent":true,
+                 "data":[
+                    100,
+                    1000,
+                    800,
+                    1070,
+                    900,
+                    300,
+                    1200,
+                    900,
+                    1200,
+                    200
+                 ],
+                 "itemStyle":{
+                    "normal":{
+                       "color":"#fff",
+                       "borderWidth":2
+                    }
+                 }
+              }
+           ]
+        }';
+
+    @endphp
+
+    @Limitless::CardStart(['title' => "Basic Setup using Chart Manager Object", 'icon' => 'icon-info22' ] )
+        @Limitless::BarChart([
+            'data' => $dataObject
+        ])
+    @Limitless::CardStop
+
+    @Limitless::CardStart(['title' => "Basic Setup", 'icon' => 'icon-info22' ] )
+        @Limitless::BarChart([
+            'title' => 'Basic',
+            'mark-line' => 'average',
+            'categories' => $categories,
+            'series' => $seriesData,
+        ])
+    @Limitless::CardStop
+
+    @Limitless::CardStart(['title' => "Stacked Setup", 'icon' => 'icon-info22' ] )
+        @Limitless::BarChart([
+            'stacked' => true,
+            'categories' => $categories,
+            'series' => $seriesData,
+        ])
+    @Limitless::CardStop
+
+    @Limitless::CardStart(['title' => "Stacked Horizontal Setup", 'icon' => 'icon-info22' ] )
+        @Limitless::BarChart([
+            'horizontal' => true,
+            'stacked' => true,
+            'bar-values' => true,
+            'categories' => $categories,
+            'series' => $seriesData,
+        ])
+    @Limitless::CardStop
+
+    @Limitless::CardStart(['title' => "Raw Setup", 'icon' => 'icon-info22' ] )
+        @Limitless::BarChart([
+            'raw' => $rawData
+        ])
+    @Limitless::CardStop
+
+@stop

src/Views/Limitless/Card/Attachments/card.js

+$(document).ready(function() {
+
+    // Refresh codemirror elements.
+    // card collapse on click
+    $('.card [data-action=collapse]:not(.disabled)').on('click', function () {
+
+        let cardParent = $(this).parents('.card');
+
+        // check if parent is not collapsed.
+        if(!cardParent.hasClass('card-collapsed')) {
+
+            // loop on codemirror elements inside the card.
+            $(cardParent).find('.CodeMirror').each(function(i, el){
+                el.CodeMirror.refresh();
+            });
+        }
+
+    })
+
+})
\ No newline at end of file

src/Views/Limitless/Card/Config.php

+<?php
+
+
+    /*
+    |------------------------------------------------------------------------------------------------
+    | Information
+    |------------------------------------------------------------------------------------------------
+    |
+    | This file is beautified by the command "sidekick:CodebeautifierCommand" of the ceetrox
+    | sidekick package.
+    |
+    | Author: Kevin Almond Roe Yumang <kevin.yumang@itmax.email>
+    | Update: 2022-06-30 02:31:57
+    |
+    */
+    namespace Ceetrox\Sidekick\Views\Limitless\Card;
+
+
+    /*
+    |------------------------------------------------------------------------------------------------
+    | Dependencies
+    |------------------------------------------------------------------------------------------------
+    */
+    use View;
+
+
+    /*
+    |------------------------------------------------------------------------------------------------
+    | Class "Config"
+    |------------------------------------------------------------------------------------------------
+    */
+    class Config 
+    {
+        public $methodAllocation = [
+        'Limitless::CardStart' => 'cardStart',
+        'Limitless::CardStop' => 'cardStop',
+        ];
+
+        public $assetAllocation;
+
+        public function __construct()
+        {
+            $this->assetAllocation = [
+                'Limitless::CardStart' => [
+                    'Attachments/card.js'
+                ]
+            ];
+        }
+
+
+        /*
+        |--------------------------------------------------------------------------------------------
+        | Method "cardStart"
+        |--------------------------------------------------------------------------------------------
+        */
+        public function cardStart($parameters)
+        {
+            return View('Limitless::Card.Start')
+            ->withTitle( ($parameters['title'] ?? 'No Title') )
+            ->withIcon( ($parameters['icon'] ?? null) )
+            ->withCollapsible( ($parameters['collapsible'] ?? true) )
+            ->withRemovable( ($parameters['removable'] ?? false) )
+            ->withExtra( ($parameters['extra'] ?? []) );
+
+        }
+
+
+        /*
+        |--------------------------------------------------------------------------------------------
+        | Method "cardStop"
+        |--------------------------------------------------------------------------------------------
+        */
+        public function cardStop()
+        {
+            return View('Limitless::Card.Stop');
+
+        }
+
+    }
+
+
+

src/Views/Limitless/Card/Documentation/Index.blade.php

+{{-- Layout Reference --}}
+@extends('Limitless::Help.Layout.Master')
+
+@section('Limitless::Content')
+
+
+    {{-- Description --}}
+    @Limitless::CardStart(['title' => "Description", 'icon' => 'icon-info22'])
+        <p>
+            A styled container for grouping contents. For more details, refer to the original documentation
+            <a href="/ceetrox/sidekick/resource/public/Webdesigns/design-limitless/Template/layout_1/LTR/dark/full/content_cards.html" target="_blank">
+                here
+            </a>.
+        </p>
+    @Limitless::CardStop
+
+    {{-- Basics --}}
+    @Limitless::CardStart(['title' => "Basics", 'icon' => 'icon-book'])
+
+        <div class="bg-dark rounded py-2 px-3 mb-3">
+            <h6 class="mb-0 font-weight-semibold">Output</h6>
+            @Limitless::Divider
+            <div class="mt-2">
+                @Limitless::CardStart( ['title' => "Card"] )
+                    @Limitless::LoremIpsum
+                @Limitless::CardStop
+            </div>
+        </div>
+
+        @php
+            $example = base64_decode("QExpbWl0bGVzczo6Q2FyZFN0YXJ0KCBbJ3RpdGxlJyA9PiAiQ2FyZCJdICkKCUBMaW1pdGxlc3M6OkxvcmVtSXBzdW0KQExpbWl0bGVzczo6Q2FyZFN0b3A=");
+        @endphp
+
+        <div class="bg-dark rounded py-2 px-3 mb-3">
+            <h6 class="mb-0 font-weight-semibold">Code</h6>
+            @Limitless::Divider
+            <div class="mt-2">
+                @Limitless::Codemirror([ 'language' => 'javascript', 'theme' => 'zenburn', 'value' => $example ])
+            </div>
+        </div>
+
+        <div class="bg-dark rounded py-2 px-3 mb-3">
+            <h6 class="mb-0 font-weight-semibold">Parameters</h6>
+            @Limitless::Divider
+            <div class="mt-2">
+                @Limitless::TableStart([ 'extra' => ['class' => 'table table-xs table-striped'] ])
+
+                    @Limitless::TableAutofillHeader([
+                        ['name' => 'Key'],
+                        ['name' => 'Type'],
+                        ['name' => 'Description']
+                    ])
+
+                    @Limitless::TableAutofillBody([
+                        [
+                            ['value' => 'title'],
+                            ['value' => '<i>String</i> [Default = <code>"No Title"</code>]', 'secure' => false],
+                            ['value' => 'The header title of the card.']
+                        ]
+                    ])
+
+                @Limitless::TableStop
+            </div>
+        </div>
+
+    @Limitless::CardStop
+
+    {{-- Styling --}}
+    @Limitless::CardStart(['title' => "Styling", 'icon' => 'icon-brush', 'extra' => ['class' => 'card card-collapsed'] ])
+
+        <div class="bg-dark rounded py-2 px-3 mb-3">
+            <h6 class="mb-0 font-weight-semibold">Output</h6>
+            @Limitless::Divider
+            <div class="mt-2">
+                @Limitless::CardStart( ['icon' => "icon-newspaper"] )
+                    @Limitless::LoremIpsum
+                @Limitless::CardStop
+            </div>
+        </div>
+
+        @php
+            $example = base64_decode("QExpbWl0bGVzczo6Q2FyZFN0YXJ0KCBbJ2ljb24nID0+ICJpY29uLW5ld3NwYXBlciJdICkKCUBMaW1pdGxlc3M6OkxvcmVtSXBzdW0KQExpbWl0bGVzczo6Q2FyZFN0b3A=");
+        @endphp
+
+        <div class="bg-dark rounded py-2 px-3 mb-3">
+            <h6 class="mb-0 font-weight-semibold">Code</h6>
+            @Limitless::Divider
+            <div class="mt-2">
+                @Limitless::Codemirror([ 'language' => 'javascript', 'theme' => 'zenburn', 'value' => $example ])
+            </div>
+        </div>
+
+        <div class="bg-dark rounded py-2 px-3 mb-3">
+            <h6 class="mb-0 font-weight-semibold">Parameters</h6>
+            <div class="mt-2">
+                @Limitless::TableStart([ 'extra' => ['class' => 'table table-xs table-striped'] ])
+
+                    @Limitless::TableAutofillHeader([
+                        ['name' => 'Key'],
+                        ['name' => 'Type'],
+                        ['name' => 'Description']
+                    ])
+
+                    @Limitless::TableAutofillBody([
+                        [
+                            ['value' => 'icon'],
+                            ['value' => '<i>String</i> [Default = <code>null</code>]', 'secure' => false],
+                            ['value' => 'The header icon of the card.']
+                        ]
+                    ])
+
+                @Limitless::TableStop
+            </div>
+        </div>
+
+    @Limitless::CardStop
+
+
+    {{-- Attributes --}}
+    @Limitless::CardStart(['title' => "Attributes", 'icon' => 'icon-tree5', 'extra' => ['class' => 'card card-collapsed'] ])
+
+    <div class="bg-dark rounded py-2 px-3 mb-3">
+        <h6 class="mb-0 font-weight-semibold">Output</h6>
+        @Limitless::Divider
+        <div class="mt-2">
+            @Limitless::CardStart([ 'collapsible' => false, 'removable' => true, 'extra' => ['style' => 'position:relative;', 'id' => 'elemento1', 'class' => 'card my-card-css-class'] ])
+                @Limitless::LoremIpsum
+            @Limitless::CardStop
+        </div>
+    </div>
+
+    @php
+        $example = base64_decode("QExpbWl0bGVzczo6Q2FyZFN0YXJ0KFsgJ2NvbGxhcHNpYmxlJyA9PiBmYWxzZSwgJ3JlbW92YWJsZScgPT4gdHJ1ZSwgJ2V4dHJhJyA9PiBbJ3N0eWxlJyA9PiAncG9zaXRpb246cmVsYXRpdmU7JywgJ2lkJyA9PiAnZWxlbWVudG8xJywgJ2NsYXNzJyA9PiAnY2FyZCBteS1jYXJkLWNzcy1jbGFzcyddIF0pCglATGltaXRsZXNzOjpMb3JlbUlwc3VtCkBMaW1pdGxlc3M6OkNhcmRTdG9w");
+    @endphp
+
+    <div class="bg-dark rounded py-2 px-3 mb-3">
+        <h6 class="mb-0 font-weight-semibold">Code</h6>
+        @Limitless::Divider
+        <div class="mt-2">
+            @Limitless::Codemirror([ 'language' => 'javascript', 'theme' => 'zenburn', 'value' => $example ])
+        </div>
+    </div>
+
+    <div class="bg-dark rounded py-2 px-3 mb-3">
+        <h6 class="mb-0 font-weight-semibold">Parameters</h6>
+        <div class="mt-2">
+            @Limitless::TableStart([ 'extra' => ['class' => 'table table-xs table-striped'] ])
+
+                @Limitless::TableAutofillHeader([
+                    ['name' => 'Key'],
+                    ['name' => 'Type'],
+                    ['name' => 'Description']
+                ])
+
+                @Limitless::TableAutofillBody([
+                    [
+                        ['value' => 'collapsible'],
+                        ['value' => '<i>Boolean</i> [Default = <code>true</code>]', 'secure' => false],
+                        ['value' => 'Option to make the card body to show or hide.']
+                    ],
+                    [
+                        ['value' => 'removable'],
+                        ['value' => '<i>Boolean</i> [Default = <code>false</code>]', 'secure' => false],
+                        ['value' => 'Option to show or hide the close button.']
+                    ],
+                    [
+                        ['value' => 'extra'],
+                        ['value' => '<i>Array</i> [Default = <code>[]</code>]', 'secure' => false],
+                        ['value' => 'Adds custom attributes for the card div element. existing attributes such as class will be overwritten.']
+                    ]
+                ])
+
+            @Limitless::TableStop
+        </div>
+    </div>
+
+    @Limitless::CardStop
+
+@stop

src/Views/Limitless/Element/Card/Start.blade.php → src/Views/Limitless/Card/Start.blade.php

@@ -2,16 +2,19 @@
 
     <div class="card-header header-elements-inline">
 
-        <h5 class="card-title"> <i class="{{$icon}}"></i>&nbsp;&nbsp;{{$title}}</h5>
+        <h5 class="card-title">
+            @if($icon) <i class="{{ $icon }} mr-1"></i> @endif
+            {{$title}}
+        </h5>
 
         <div class="header-elements">
             <div class="list-icons">
 
-                @if($collapsable)
+                @if($collapsible)
                     <a class="list-icons-item" data-action="collapse"></a>
                 @endif
 
-                @if($removeable)
+                @if($removable)
                     <a class="list-icons-item" data-action="remove"></a>
                 @endif
          </div>

src/Views/Limitless/Card/Stop.php

+</div></div>

src/Views/Limitless/Codemirror/Attachments/Core.js

@@ -2,7 +2,7 @@ $(document).ready(function () {
   $('[texteditor="true"]').each(function () {
     var editor = CodeMirror.fromTextArea(this, {
       lineNumbers: false,
-      lineWrapping: true,
+      lineWrapping: false,
       mode: 'default'
     });
 
@@ -26,7 +26,7 @@ $(document).ready(function () {
 
     var editor = CodeMirror.fromTextArea(this, {
       lineNumbers: true,
-      lineWrapping: true,
+      lineWrapping: false,
       theme: currentTheme,
       mode: currentLanguage
     });

src/Views/Limitless/Codemirror/Documentation/Index.blade.php

@@ -3,21 +3,83 @@
 
 @section('Limitless::Content')
 
-    @php
-        $example = base64_decode("ICAgIEBMaW1pdGxlc3M6OkVsZW1lbnRDYXJkU3RhcnQoWyd0aXRsZScgPT4gIkNvZGVtaXJyb3IgVGVzdCIsICdpY29uJyA9PiAnaWNvbi1maWxlLWVtcHR5JyBdICkKICAgICAgICBATGltaXRsZXNzOjpDb2RlbWlycm9yKFsgJ2xhbmd1YWdlJyA9PiAnamF2YXNjcmlwdCcsICd0aGVtZScgPT4gJ3plbmJ1cm4nLCAndmFsdWUnID0+ICdIZWxsbyBXb3JsZCEnIF0pCiAgICBATGltaXRsZXNzOjpFbGVtZW50Q2FyZFN0b3A=");
-    @endphp
+    {{-- Description --}}
+    @Limitless::CardStart(['title' => "Code Mirror", 'icon' => 'icon-circle-code'])
+        A themed writable container for codes.
+    @Limitless::CardStop
+
+    {{-- Elements --}}
+    @Limitless::CardStart(['title' => "Fragments", 'icon' => 'icon-grid5'])
+    <div class="bg-dark rounded py-2 px-3 mb-3">
+        <h6 class="mb-0 font-weight-semibold">Codemirror</h6>
+        <p class="mb-3 text-muted">A themed writable container for codes.</p>
+        <p class="font-italic font-size-lg">Parameters</p>
+        <div class="row mt-2">
+            @Limitless::TableStart([ 'extra' => ['class' => 'table table-xs table-striped'] ])
+
+                @Limitless::TableAutofillHeader([
+                    ['name' => 'Key'],
+                    ['name' => 'Type'],
+                    ['name' => 'Description']
+                ])
+
+                @Limitless::TableAutofillBody([
+                    [
+                        ['value' => 'language'],
+                        ['value' => '<i>String</i> [Default = <code>""</code>]', 'secure' => false],
+                        ['value' => 'The language of the code to write. <code>javascript | manticore | python | shell</code>', 'secure' => false]
+                    ],
+                    [
+                        ['value' => 'theme'],
+                        ['value' => '<i>String</i> [Default = <code>"icecoder"</code>]', 'secure' => false],
+                        ['value' => 'The theme of the editor.']
+                    ],
+                    [
+                        ['value' => 'value'],
+                        ['value' => '<i>String</i> [Default = <code>"... no value parameter set..."</code>]', 'secure' => false],
+                        ['value' => 'The value or text to display.']
+                    ],
+                    [
+                        ['value' => 'extra'],
+                        ['value' => '<i>Array</i> [Default = <code>[]</code>]', 'secure' => false],
+                        ['value' => 'Adds custom attributes for the codemirror element. existing attributes such as class will be overwritten.']
+                    ]
+                ])
+
+            @Limitless::TableStop
+        </div>
 
-    @Limitless::ElementCardStart(['title' => "Documentation", 'icon' => 'icon-file-text3', 'collapsable' => true, 'removeable' => false, 'extra' => ['style' => 'position:relative;', 'id' => 'elemento1', 'class' => 'card'] ])
-        hello world
-    @Limitless::ElementCardStop
+        <div class="mb-3"></div>
+        <p class="font-italic font-size-lg">Themes</p>
+        <div class="row mt-2">
+            <code>
+                3024-day | 3024-night | abcdef | ambiance | base16-dark | base16-light | bespin | blackboard | cobalt |
+                codemirror | colorforth | darcula | dracula | duotone-dark | duotone-light | eclipse | elegant | erlang-dark |
+                gruvbox-dark | hopscotch | icecoder | idea | isotope | lesser-dark | liquibyte | lucario | material | mbo |
+                mdn-like | midnight | monokai | neat | neo | night | nord | oceanic-next | panda-syntax | paraiso-dark |
+                paraiso-light | pastel-on-dark | railscasts | rubyblue | seti | shadowfox | solarized | the-matrix |
+                tomorrow-night-bright | tomorrow-night-eighties | ttcn | twilight | vibrant-ink | xq-dark | xq-light |
+                yeti | yonce | zenburn
+            </code>
+        </div>
 
-    @Limitless::ElementCardStart(['title' => "Codemirror Test", 'icon' => 'icon-file-empty' ] )
-        @Limitless::Codemirror([ 'language' => 'javascript', 'theme' => 'zenburn', 'value' => 'Hello World!' ])
-    @Limitless::ElementCardStop
+    </div>
+
+    @Limitless::CardStop
+
+    {{-- Sample Output --}}
+    @Limitless::CardStart(['title' => "Sample Output", 'icon' => 'icon-display4' ] )
+        @Limitless::Codemirror([ 'language' => 'javascript', 'theme' => 'zenburn', 'value' => 'Hello World!', 'extra' => ['id' => 'codemirror1', 'data-is-modified' => true] ])
+    @Limitless::CardStop
+
+    @php
+        $example = base64_decode("QExpbWl0bGVzczo6Q29kZW1pcnJvcihbICdsYW5ndWFnZScgPT4gJ2phdmFzY3JpcHQnLCAndGhlbWUnID0+ICd6ZW5idXJuJywgJ3ZhbHVlJyA9PiAnSGVsbG8gV29ybGQhJywgJ2V4dHJhJyA9PiBbJ2lkJyA9PiAnY29kZW1pcnJvcjEnLCAnZGF0YS1pcy1tb2RpZmllZCcgPT4gdHJ1ZV0gXSk=");
+    @endphp
 
-    @Limitless::ElementCardStart(['title' => "Codemirror Test", 'icon' => 'icon-file-empty' ] )
+    {{-- Sample Code --}}
+    @Limitless::CardStart(['title' => "Sample Code", 'icon' => 'icon-circle-code' ] )
         @Limitless::Codemirror([ 'language' => 'javascript', 'theme' => 'zenburn', 'value' => $example ])
-    @Limitless::ElementCardStop
+    @Limitless::CardStop
 
 
 @stop

src/Views/Limitless/Dashboard/Attachments/dashboard.css

+.dashboard-container span.dashboard-tile ~ span.dashboard-tile {
+    margin-left: 0.25rem;
+}
+
+.dashboard-tile {
+    border: 2px solid rgba(255,255,255,.1);
+    border-radius: .5rem;
+}
\ No newline at end of file

src/Views/Limitless/Dashboard/Attachments/dashboard.init.js

+$(document).ready(function() {
+// dashboard-container
+    // dashboard-tile
+})
\ No newline at end of file

src/Views/Limitless/Dashboard/Config.php

+<?php
+
+
+    /*
+    |------------------------------------------------------------------------------------------------
+    | Information
+    |------------------------------------------------------------------------------------------------
+    |
+    | This file is beautified by the command "sidekick:CodebeautifierCommand" of the ceetrox
+    | sidekick package.
+    |
+    | Author: Kevin Almond Roe Yumang <kevin.yumang@itmax.email>
+    | Update: 2022-06-30 02:31:57
+    |
+    */
+    namespace Ceetrox\Sidekick\Views\Limitless\Dashboard;
+
+
+    /*
+    |------------------------------------------------------------------------------------------------
+    | Dependencies
+    |------------------------------------------------------------------------------------------------
+    */
+    use View;
+
+
+    /*
+    |------------------------------------------------------------------------------------------------
+    | Class "Config"
+    |------------------------------------------------------------------------------------------------
+    */
+    class Config 
+    {
+        public $methodAllocation = [
+            'Limitless::DashboardStart' => 'dashboardStart',
+            'Limitless::DashboardStop' => 'dashboardStop',
+            'Limitless::DashboardTileStart' => 'dashboardTileStart',
+            'Limitless::DashboardTileStop' => 'dashboardTileStop',
+        ];
+
+        public $assetAllocation;
+
+        public function __construct()
+        {
+            $this->assetAllocation = [
+                'Limitless::DashboardStart' => [
+                    'Attachments/dashboard.css'
+                ]
+            ];
+        }
+
+        /*
+        |--------------------------------------------------------------------------------------------
+        | Method "dashboardStart"
+        |--------------------------------------------------------------------------------------------
+        */
+        public function dashboardStart()
+        {
+            return View('Limitless::Dashboard.Start');
+        }
+
+        /*
+        |--------------------------------------------------------------------------------------------
+        | Method "dashboardStop"
+        |--------------------------------------------------------------------------------------------
+        */
+        public function dashboardStop()
+        {
+            return View('Limitless::Dashboard.Stop');
+
+        }
+
+        /*
+        |--------------------------------------------------------------------------------------------
+        | Method "dashboardTileStart"
+        |--------------------------------------------------------------------------------------------
+        */
+        public function dashboardTileStart($parameters)
+        {
+            return View('Limitless::Dashboard.TileStart')
+            ->withClass($parameters['class'] ?? '')
+            ->withTitle($parameters['title'] ?? 'No Title')
+            ->withIcon($parameters['icon'] ?? null);
+        }
+
+        /*
+        |--------------------------------------------------------------------------------------------
+        | Method "dashboardTileStop"
+        |--------------------------------------------------------------------------------------------
+        */
+        public function dashboardTileStop()
+        {
+            return View('Limitless::Dashboard.TileStop');
+
+        }
+    }
+
+
+

src/Views/Limitless/Dashboard/Documentation/Index.blade.php

+{{-- Layout Reference --}}
+@extends('Limitless::Help.Layout.Master')
+
+@section('Limitless::Content')
+
+    @Limitless::CardStart(['title' => "Description", 'icon' => 'icon-info22'])
+
+        @Limitless::DashboardStart
+            @Limitless::DashboardTileStart(['class' => 'testclass', 'title' => 'Dashboard 1', 'icon' => 'icon-person'])
+                DASHBOARD 1 CONTENT
+            @Limitless::DashboardTileStop
+
+            @Limitless::DashboardTileStart(['class' => 'testclass', 'title' => 'Dashboard 2', 'icon' => 'icon-file-media'])
+                DASHBOARD 2 CONTENT
+            @Limitless::DashboardTileStop
+
+            @Limitless::DashboardTileStart(['class' => 'testclass', 'title' => 'Dashboard 3', 'icon' => 'icon-paw'])
+                DASHBOARD 3 CONTENT
+            @Limitless::DashboardTileStop
+        @Limitless::DashboardStop
+
+    @Limitless::CardStop
+
+@stop
\ No newline at end of file

src/Views/Limitless/Dashboard/Start.php

+<div class="dashboard-container d-flex flex-wrap">
\ No newline at end of file

src/Views/Limitless/Dashboard/Stop.php

+</div>
\ No newline at end of file

src/Views/Limitless/Dashboard/TileStart.blade.php

+<span class="dashboard-tile
+    d-flex col-xl-3 col-lg-6 col-md-6 col-sm-6 col-xs-12
+    {{ $class }}
+">
+    <div class="card-body">
+
+        <div class="d-flex mb-1">
+            <h4 class="font-weight-semibold mb-0">
+                @if($icon) <i class="{{ $icon }} mr-2"></i> @endif
+                {{ $title }}
+            </h4>
+        </div>
+
+    <div>

src/Views/Limitless/Dashboard/TileStop.php

+</div></div></span>
\ No newline at end of file

src/Views/Limitless/Datatable/Attachments/datatable.css

+/* HIGHLIGHT SORTED COLUMN */
+table.dataTable.display>tbody>tr.odd>.sorting_1 {
+    box-shadow: inset 0 0 0 9999px rgb(0 0 0 / 20%);
+}
+
+table.dataTable.display>tbody>tr.even>.sorting_1 {
+    box-shadow: inset 0 0 0 9999px rgb(0 0 0 / 10%);
+}
+
+
+/* EXPORT BUTTONS */
+.dt-buttons .btn {
+    margin-bottom: 0.333em;
+}
+
+.dt-buttons {
+    margin-right: 1.25rem;
+}
+
+@media screen and (max-width: 640px) {
+    div.dt-buttons {
+        margin-right: 0;
+    }
+}
+
+@media (max-width: 1180px) {
+    div.dt-buttons {
+        width: 100%;
+    }
+}

src/Views/Limitless/Datatable/Attachments/datatables.init.css

+.DatatableFader {
+    height:0px;
+    opacity:0;
+    overflow-y: hidden;
+}
\ No newline at end of file

src/Views/Limitless/Datatable/Attachments/datatables.init.js

+// define function
+function limitless_init_datatable() {
+
+    // counter for datatables
+    let DatatableCounter = 0;
+
+    // scann for each datatable
+    $('.LimitlessTable').each(function () {
+
+        // count table
+        DatatableCounter++;
+
+        // loading bar
+        $(this).before('<div id="DatatableLoader' + DatatableCounter + '"><br/><center><b>[ LADE DATEN... ]</b></center><br/></div>');
+
+    });
+
+    setTimeout(function () {
+        // reset counter for datatables
+        let DatatableCounter = 0;
+
+        // scann for each datatable
+        $('.LimitlessTable').each(function () {
+
+            // count table
+            DatatableCounter++;
+
+            // element
+            let elementTable = $(this);
+
+            let currentClass = elementTable.attr('class');
+            currentClass = currentClass.replace('LimitlessTable','');
+
+            // create replacement
+            let NewHtml = '' +
+                '<div id="DatatableFader' + DatatableCounter + '" class="DatatableFader">' +
+                '<table id="Datatable' + DatatableCounter + '" class="display table datatable ' + currentClass + '">' +
+                elementTable.html() +
+                '</table>' +
+                '</div>';
+
+            // transport code to html
+            elementTable.replaceWith(NewHtml);
+
+
+            // render setup parameter
+            let counter = 0;
+            let sort = [];
+            let orderable = [];
+
+            $('#Datatable' + DatatableCounter).find('th').each(function () {
+
+                let tableHeaderElement = $(this);
+
+                // define sort
+                if (tableHeaderElement.attr('Sort') != undefined) {
+                    sort = [
+                        [counter, tableHeaderElement.attr('Sort')]
+                    ];
+                }
+
+                // orderable
+                if (tableHeaderElement.attr('Sortable') == "false") {
+                    orderable.push({
+                        "orderable": false,
+                        "targets": counter
+                    });
+                }
+
+                // searchable
+                if (tableHeaderElement.attr('Searchable') != undefined && tableHeaderElement.attr('Searchable') == "false") {
+                    orderable.push({
+                        "searchable": false,
+                        "targets": counter
+                    });
+                }
+
+
+                // counter
+                counter++;
+            });
+
+            // rows
+            let rows = elementTable.attr('rows');
+            if (rows == undefined) {
+                rows = 10;
+            }
+
+            // check entry count
+            let Complex = false;
+            if ($('#Datatable' + DatatableCounter).children('tbody').children('tr').length > rows) {
+                Complex = true;
+            }
+
+            // export buttons
+            let showExportButtons = elementTable.attr('exportable') != undefined && (elementTable.attr('exportable') == "true" || elementTable.attr('exportable') == true);
+            let exportButtons = setExportButtons();
+
+            // Define the table control elements to appear on the page and in what order.
+            // https://datatables.net/reference/option/dom
+            let dom = showExportButtons ?
+                '<"datatable-header"fl><"datatable-scroll"t><"datatable-footer"Bip>' :
+                '<"datatable-header"fl><"datatable-scroll"t><"datatable-footer"ip>';
+
+            // length menu
+            let lengthMenu = [
+                [10, 25, 50, 100, 500, -1],
+                ['Standard (10)', 25, 50, 100, 500, "Alle"]
+            ];
+
+            // activate datatable
+            $('#Datatable' + DatatableCounter).dataTable({
+                'dom': dom,
+                "fixedHeader": true,
+                'autoWidth': true,
+                'pageLength': parseInt(rows),
+                "order": sort,
+                "paging": Complex,
+                "searching": Complex,
+                "info": Complex,
+                "columnDefs": orderable,
+                "buttons": exportButtons,
+                "language": {
+                    "search": '_INPUT_',
+                    "searchPlaceholder": 'Suchen',
+                    "lengthMenu": '<span>Einträge anzeigen</span> _MENU_',
+                    "url": "//cdn.datatables.net/plug-ins/1.10.19/i18n/German.json",
+                },
+                "lengthMenu": lengthMenu,
+                "drawCallback": function (settings) {
+
+                    setSelect2();
+                    animate(settings);
+
+                }
+            });
+        });
+
+    }, 300);
+}
+
+function animate(settings) {
+
+    // calculate height for animation
+    let height = $('#' + settings.sTableId).parents('.dataTables_wrapper').first().height() + 10;
+
+    // get int from callback
+    let callbbackid = settings.sTableId.replace(/[^\d.]/g, '');
+
+    // remove loader
+    $('#DatatableLoader' + callbbackid).remove();
+
+    // break after inti
+    if ($('#DatatableFader' + callbbackid).css("opacity") == 1) {
+        return false;
+    }
+
+    // scale up table
+    $('#DatatableFader' + callbbackid).animate({
+        'opacity': '1',
+        'min-height': height
+    }, 300, function () {
+        // fix height for responsible design
+        $('#DatatableFader' + callbbackid).css("height", "auto");
+        $('#DatatableFader' + callbbackid).css("min-height", "auto");
+    });
+}
+
+// modified default class of export buttons.
+// https://datatables.net/reference/option/buttons.dom.button
+function setExportButtons() {
+
+    return {
+        dom: {
+            button: {
+                tag: 'button',
+                className: ''
+            }
+        },
+        buttons: [
+            {
+                extend: 'copy',
+                className: 'btn btn-light'
+            },
+            {
+                extend: 'csv',
+                className: 'btn btn-light'
+            },
+            {
+                extend: 'excel',
+                className: 'btn btn-light'
+            },
+            {
+                extend: 'pdf',
+                className: 'btn btn-light'
+            },
+            {
+                extend: 'print',
+                className: 'btn btn-light'
+            },
+        ]
+    };
+
+}
+
+// Select2 for length menu styling
+function setSelect2() {
+
+    if (!$().select2) {
+        console.warn('Warning - select2.min.js is not loaded.');
+        return;
+    }
+
+    // Initialize
+    $('.dataTables_length select').select2({
+        minimumResultsForSearch: Infinity,
+        dropdownAutoWidth: true,
+        width: 'auto'
+    });
+}
+
+
+$(document).ready(function() {
+    limitless_init_datatable();
+});

src/Views/Limitless/Datatable/Attachments/exporting/buttons,print.min.js

+/*!
+ Print button for Buttons and DataTables.
+ 2016 SpryMedia Ltd - datatables.net/license
+*/
+(function(b){"function"===typeof define&&define.amd?define(["jquery","datatables.net","datatables.net-buttons"],function(c){return b(c,window,document)}):"object"===typeof exports?module.exports=function(c,g){c||(c=window);g&&g.fn.dataTable||(g=require("datatables.net")(c,g).$);g.fn.dataTable.Buttons||require("datatables.net-buttons")(c,g);return b(g,c,c.document)}:b(jQuery,window,document)})(function(b,c,g,y){var u=b.fn.dataTable,n=g.createElement("a"),v=function(a){n.href=a;a=n.host;-1===a.indexOf("/")&&
+0!==n.pathname.indexOf("/")&&(a+="/");return n.protocol+"//"+a+n.pathname+n.search};u.ext.buttons.print={className:"buttons-print",text:function(a){return a.i18n("buttons.print","Print")},action:function(a,k,p,h){a=k.buttons.exportData(b.extend({decodeEntities:!1},h.exportOptions));p=k.buttons.exportInfo(h);var w=k.columns(h.exportOptions.columns).flatten().map(function(d){return k.settings()[0].aoColumns[k.column(d).index()].sClass}).toArray(),r=function(d,e){for(var x="<tr>",l=0,z=d.length;l<z;l++)x+=
+        "<"+e+" "+(w[l]?'class="'+w[l]+'"':"")+">"+(null===d[l]||d[l]===y?"":d[l])+"</"+e+">";return x+"</tr>"},m='<table class="'+k.table().node().className+'">';h.header&&(m+="<thead>"+r(a.header,"th")+"</thead>");m+="<tbody>";for(var t=0,A=a.body.length;t<A;t++)m+=r(a.body[t],"td");m+="</tbody>";h.footer&&a.footer&&(m+="<tfoot>"+r(a.footer,"th")+"</tfoot>");m+="</table>";var f=c.open("","");f.document.close();var q="<title>"+p.title+"</title>";b("style, link").each(function(){var d=q,e=b(this).clone()[0];
+        "link"===e.nodeName.toLowerCase()&&(e.href=v(e.href));q=d+e.outerHTML});try{f.document.head.innerHTML=q}catch(d){b(f.document.head).html(q)}f.document.body.innerHTML="<h1>"+p.title+"</h1><div>"+(p.messageTop||"")+"</div>"+m+"<div>"+(p.messageBottom||"")+"</div>";b(f.document.body).addClass("dt-print-view");b("img",f.document.body).each(function(d,e){e.setAttribute("src",v(e.getAttribute("src")))});h.customize&&h.customize(f,h,k);a=function(){h.autoPrint&&(f.print(),f.close())};navigator.userAgent.match(/Trident\/\d.\d/)?
+        a():f.setTimeout(a,1E3)},title:"*",messageTop:"*",messageBottom:"*",exportOptions:{},header:!0,footer:!1,autoPrint:!0,customize:null};return u.Buttons});

src/Views/Limitless/Datatable/Attachments/exporting/buttons.print.min.js

+/*!
+ Print button for Buttons and DataTables.
+ 2016 SpryMedia Ltd - datatables.net/license
+*/
+(function(b){"function"===typeof define&&define.amd?define(["jquery","datatables.net","datatables.net-buttons"],function(d){return b(d,window,document)}):"object"===typeof exports?module.exports=function(d,h){d||(d=window);h&&h.fn.dataTable||(h=require("datatables.net")(d,h).$);h.fn.dataTable.Buttons||require("datatables.net-buttons")(d,h);return b(h,d,d.document)}:b(jQuery,window,document)})(function(b,d,h,y){var u=b.fn.dataTable,n=h.createElement("a"),v=function(a){n.href=a;a=n.host;-1===a.indexOf("/")&&
+0!==n.pathname.indexOf("/")&&(a+="/");return n.protocol+"//"+a+n.pathname+n.search};u.ext.buttons.print={className:"buttons-print",text:function(a){return a.i18n("buttons.print","Print")},action:function(a,e,p,k){a=e.buttons.exportData(b.extend({decodeEntities:!1},k.exportOptions));p=e.buttons.exportInfo(k);var w=e.columns(k.exportOptions.columns).flatten().map(function(f){return e.settings()[0].aoColumns[e.column(f).index()].sClass}).toArray(),r=function(f,g){for(var x="<tr>",l=0,z=f.length;l<z;l++)x+=
+        "<"+g+" "+(w[l]?'class="'+w[l]+'"':"")+">"+(null===f[l]||f[l]===y?"":f[l])+"</"+g+">";return x+"</tr>"},m='<table class="'+e.table().node().className+'">';k.header&&(m+="<thead>"+r(a.header,"th")+"</thead>");m+="<tbody>";for(var t=0,A=a.body.length;t<A;t++)m+=r(a.body[t],"td");m+="</tbody>";k.footer&&a.footer&&(m+="<tfoot>"+r(a.footer,"th")+"</tfoot>");m+="</table>";var c=d.open("","");if(c){c.document.close();var q="<title>"+p.title+"</title>";b("style, link").each(function(){var f=q,g=b(this).clone()[0];
+        "link"===g.nodeName.toLowerCase()&&(g.href=v(g.href));q=f+g.outerHTML});try{c.document.head.innerHTML=q}catch(f){b(c.document.head).html(q)}c.document.body.innerHTML="<h1>"+p.title+"</h1><div>"+(p.messageTop||"")+"</div>"+m+"<div>"+(p.messageBottom||"")+"</div>";b(c.document.body).addClass("dt-print-view");b("img",c.document.body).each(function(f,g){g.setAttribute("src",v(g.getAttribute("src")))});k.customize&&k.customize(c,k,e);a=function(){k.autoPrint&&(c.print(),c.close())};navigator.userAgent.match(/Trident\/\d.\d/)?
+        a():c.setTimeout(a,1E3)}else e.buttons.info(e.i18n("buttons.printErrorTitle","Unable to open print view"),e.i18n("buttons.printErrorMsg","Please allow popups in your browser for this site to be able to view the print view."),5E3)},title:"*",messageTop:"*",messageBottom:"*",exportOptions:{},header:!0,footer:!1,autoPrint:!0,customize:null};return u.Buttons});
\ No newline at end of file

src/Views/Limitless/Datatable/Config.php

+<?php
+
+
+    /*
+    |------------------------------------------------------------------------------------------------
+    | Information
+    |------------------------------------------------------------------------------------------------
+    |
+    | This file is beautified by the command "sidekick:CodebeautifierCommand" of the ceetrox
+    | sidekick package.
+    |
+    | Author: Marco Schmiedel <marco.schmiedel@itmax.email>
+    | Update: 2022-06-15 10:07:09
+    |
+    */
+    namespace Ceetrox\Sidekick\Views\Limitless\Datatable;
+
+
+    /*
+    |------------------------------------------------------------------------------------------------
+    | Dependencies
+    |------------------------------------------------------------------------------------------------
+    */
+    use View;
+
+
+    /*
+    |------------------------------------------------------------------------------------------------
+    | Class "Config"
+    |------------------------------------------------------------------------------------------------
+    */
+    class Config
+    {
+        public $methodAllocation = [
+            'Limitless::DatatableStart' => 'datatableStart',
+            'Limitless::DatatableStop' => 'datatableStop',
+        ];
+
+        public $assetAllocation;
+
+        public function __construct()
+        {
+            $this->assetAllocation = [
+                'Limitless::DatatableStart' => [
+                    'Attachments/jquery.dataTables.min.js',
+                    'Attachments/exporting/buttons.dataTables.min.css',
+                    'Attachments/exporting/dataTables.buttons.min.js',
+                    'Attachments/exporting/jszip.min.js',
+                    'Attachments/exporting/pdfmake.min.js',
+                    'Attachments/exporting/vfs_fonts.js',
+                    'Attachments/exporting/buttons.html5.min.js',
+                    'Attachments/exporting/buttons.print.min.js',
+                    'Attachments/datatables.init.js',
+                    'Attachments/datatables.init.css',
+                    'Attachments/datatable.css',
+                    secure_url('/ceetrox/sidekick/resource/public/Webdesigns/design-limitless/Template/global_assets/js/plugins/forms/selects/select2.min.js'),
+                ]
+            ];
+        }
+
+
+        /*
+        |--------------------------------------------------------------------------------------------
+        | Method "datatableStart"
+        |--------------------------------------------------------------------------------------------
+        */
+        public function datatableStart($parameters)
+        {
+            return View('Limitless::Datatable.Start')
+                ->withExtra($parameters['extra'] ?? [])
+                ->withRows($parameters['rows'] ?? null)
+                ->withExportable($parameters['exportable'] ?? null);
+
+        }
+
+
+        /*
+        |--------------------------------------------------------------------------------------------
+        | Method "datatableStop"
+        |--------------------------------------------------------------------------------------------
+        */
+        public function datatableStop($parameters)
+        {
+            return View('Limitless::Datatable.Stop');
+
+        }
+
+    }
+
+
+

src/Views/Limitless/Datatable/Start.blade.php

+<div class="table-responsive">
+   <table
+   @foreach($extra as $k => $v)
+
+      @if($k == 'class')
+         @if(!strpos($v, 'LimitlessTable')) {{ $v = $v . ' ' . 'LimitlessTable' }} @endif
+      @endif
+
+      {{$k}}="{{$v}}"
+
+   @endforeach
+
+   @if($rows) rows='{{ $rows }}' @endif
+   @if($exportable) exportable='{{ $exportable }}' @endif
+   class="table LimitlessTable" hidden>

src/Views/Limitless/Documentation.php

+<?php
+
+    /*
+    |--------------------------------------------------------------------------------
+    | This little helper boots the documentation.
+    | @extends('Limitless::Documentation')
+    */
+    $x = new Ceetrox\Sidekick\Views\Limitless\Help\Config();
+    echo $x -> internalNavigation();
+
+?>

src/Views/Limitless/Dropzone/Attachments/dropzone.init.js

+Dropzone.prototype.defaultOptions.dictDefaultMessage = "Drop files here to upload";
+Dropzone.prototype.defaultOptions.dictFallbackMessage = "Your browser does not support drag'n'drop file uploads.";
+Dropzone.prototype.defaultOptions.dictFallbackText = "Please use the fallback form below to upload your files like in the olden days.";
+Dropzone.prototype.defaultOptions.dictFileTooBig = "Die maximale Dateigröße beträgt {{maxFilesize}}MB.";
+Dropzone.prototype.defaultOptions.dictInvalidFileType = "You can't upload files of this type.";
+Dropzone.prototype.defaultOptions.dictResponseError = "Server responded with {{statusCode}} code.";
+Dropzone.prototype.defaultOptions.dictCancelUpload = "Cancel upload";
+Dropzone.prototype.defaultOptions.dictCancelUploadConfirmation = "Are you sure you want to cancel this upload?";
+Dropzone.prototype.defaultOptions.dictRemoveFile = "Remove file";
+Dropzone.prototype.defaultOptions.dictMaxFilesExceeded = "You can not upload any more files.";
+Dropzone.autoDiscover = false;
+
+$(document).off('click touchstart', '[data-dz-delete]');
+$(document).on('click touchstart', '[data-dz-delete]', function (e) {
+
+    let file = $(this);
+
+    console.log(e);
+    // Prevent Click...
+    e.preventDefault();
+
+    // Confirmation
+    let instance = limitlessNotification.set('Confirmation', 'Möchten Sie diese Datei wirklich löschen?', 'warning', true);
+
+    // On confirm
+    instance.get().on('pnotify.confirm', function() {
+
+        // Get trigger for backend.
+        $.get(file.attr('href'), function (data) {
+            console.log("Data Loaded: " + data);
+        });
+
+        // Remove image
+        file.parents('[dz-container]').hide();
+    })
+
+    // On cancel
+    instance.get().on('pnotify.cancel', function() {
+
+    });
+})
+$(document).on('click', '.DropzoneButton', function(e) {
+    e.preventDefault();
+})
+
+function init() {
+
+    let templateId = 'LimitlessDropzoneTemplate';
+
+    setDropzoneButtons();
+    setDropzone(templateId);
+}
+
+function initFiles(files, dropzoneId, templateId) {
+
+    if(files.length == 0) return;
+
+    files.forEach(function(file) {
+
+        let templateObject = $('#' + templateId).clone();
+
+        templateObject.show();
+        templateObject.find('img').attr('src', file.thumbnailurl);
+        templateObject.find('[data-dz-source]').attr('href', file.sourceurl);
+        templateObject.find('[data-dz-delete]').attr('href', file.deleteurl);
+        templateObject.find('[data-dz-name]').html(file.filename);
+        templateObject.find('[data-dz-size]').html(file.filesize);
+        templateObject.find('.align-items-start').css({'border':'1px dotted #888888'});
+
+        $('#' + dropzoneId).append(templateObject.html());
+
+    });
+
+}
+
+function setDropzoneButtons() {
+
+    let counter = 0;
+
+    $('.DropzoneButton').each(function() {
+        counter++;
+        let buttonElement = $(this);
+        buttonElement.attr('id', 'DropzoneButton' + counter);
+    });
+
+}
+
+function setDropzone(templateId) {
+
+    let counter = 0;
+
+    $('.LimitlessDropzone').each(function() {
+
+        let element = $(this);
+        let additionalConfig = element.attr('data-config') ? JSON.parse(element.attr('data-config')) : [];
+        let files = element.attr('data-files') ? JSON.parse(element.attr('data-files')) : [];
+        counter++;
+
+        // adds auto generated id if element has no id
+        if(!element.attr('id')) {
+            let id = 'LimitlessDropzone' + counter;
+            element.attr('id', id);
+        }
+
+        // Queueindicator
+        let UIblocked = false;
+
+        // Define and extend dropzone object.
+        let DZ = $.extend({
+
+                maxFilesize: 20,
+                timeout: 90000,
+                method: "post",
+                thumbnailWidth: 120,
+                thumbnailHeight: 100,
+                acceptedFiles: "image/*,application/pdf",
+                previewTemplate: document.getElementById(templateId).innerHTML,
+                autoProcessQueue: true,
+                clickable:'#DropzoneButton' + counter,
+                success: function (file, response) {
+
+                    // Saving successfull
+                    let obj = $(file.previewTemplate);
+                    obj.show();
+                    obj.find('img').attr('src', response.thumbnailurl);
+                    obj.find('[data-dz-source]').attr('href', response.sourceurl);
+                    obj.find('[data-dz-name]').html(response.filename);
+                    obj.find('[data-dz-size]').html(response.filesize);
+                    obj.find('[data-dz-delete]').attr('href', response.deleteurl);
+
+                    // Saving not successfull
+                    if (response.sourceurl == undefined) {
+                        obj.find('.list-icons').hide();
+
+                        obj.find('.align-items-start').css({
+                            'border': '1px solid #ff0000'
+                        });
+
+                        // Greyscale thumbnail on error.
+                        obj.find('img').css({
+                            '-webkit-filter': 'grayscale(100%)',
+                            '-moz-filter': 'grayscale(100%)',
+                            'filter': 'grayscale(100%)',
+                            'opacity': '0.5'
+                        });
+
+                        limitlessNotification.set('', file.name + ": Der Uploadserver ist derzeit nicht verfügbar.", 'error');
+                    }else{
+                        limitlessNotification.set('', 'Die Datei wurde erfolgreich hochgeladen.', 'success');
+                    }
+                },
+                processing: function () {
+
+                    if(UIblocked == true)
+                    {
+                        return false;
+                    }
+
+                    UIblocked = true;
+
+                    // Block UI while uploading...
+                    $.blockUI({
+                        message: '<i style="font-size: 5rem" class="icon-spinner6 spinner"></i>',
+                        overlayCSS: {
+                            backgroundColor: '#1b2024',
+                            opacity: 0.8,
+                            cursor: 'wait'
+                        },
+                        css: {
+                            border: 0,
+                            color: '#fff',
+                            padding: 0,
+                            backgroundColor: 'transparent'
+                        }
+                    });
+
+                },
+                queuecomplete: function () {
+
+                    // Unblock UI when complete...
+                    $.unblockUI();
+
+                    UIblocked = false;
+
+                },
+                error: function (file, response) {
+
+                    console.log(response);
+
+                    if(response.message == '') response.message = '"dropconfig" URL nicht gefunden.';
+
+                    // Error Message
+                    limitlessNotification.set('', file.name + ": " + response.message, 'error');
+
+                    // Greyscale thumbnail on error.
+                    $(file.previewTemplate).find('img').css({
+                        '-webkit-filter': 'grayscale(100%)',
+                        '-moz-filter': 'grayscale(100%)',
+                        'filter': 'grayscale(100%)',
+                        'opacity': '0.5'
+                    });
+
+                    // Remove delete button on error.
+                    $(file.previewTemplate).find('.list-icons').hide();
+
+                    // Outline border in red on error.
+                    $(file.previewTemplate).find('.align-items-start').css({
+                        'border': '1px solid #ff0000'
+                    });
+
+                }
+            },
+            additionalConfig
+        );
+
+        // Start dropzone.
+        element.dropzone(DZ);
+
+        initFiles(files , element.attr('id'), templateId);
+    });
+
+}
+
+$(document).ready(function() {
+    init();
+});
+
+// $(document).ready(function()
+// {
+//
+//     $('#<?php echo $array["id"]; ?>').find('button').click(function (e) {
+//         e.preventDefault();
+//     });
+//
+//
+//     <?php foreach($array['files'] as $file){ ?>
+//
+//     var obj = $('#limitlessdropzonetemplate').clone();
+//     obj.show();
+//     obj.find('img').attr('src','<?php echo $file["thumbnailurl"]; ?>');
+//     obj.find('[data-dz-source]').attr('href','<?php echo $file["sourceurl"]; ?>');
+//     obj.find('[data-dz-delete]').attr('href','<?php echo $file["deleteurl"]; ?>');
+//     obj.find('[data-dz-name]').html('<?php echo $file["filename"]; ?>');
+//     obj.find('[data-dz-size]').html('<?php echo $file["filesize"]; ?>');
+//     obj.find('.align-items-start').css({'border':'1px dotted #888888'});
+//
+//     $('#<?php echo $array["id"]; ?>').append(   obj.html()     );
+//
+//     <?php } ?>
+//
+// });
\ No newline at end of file

src/Views/Limitless/Dropzone/Config.php

+<?php
+
+
+    /*
+    |------------------------------------------------------------------------------------------------
+    | Information
+    |------------------------------------------------------------------------------------------------
+    |
+    | This file is beautified by the command "sidekick:CodebeautifierCommand" of the ceetrox
+    | sidekick package.
+    |
+    | Author: Kevin Almond Roe Yumang <kevin.yumang@itmax.email>
+    | Update: 2022-06-30 02:31:57
+    |
+    */
+    namespace Ceetrox\Sidekick\Views\Limitless\Dropzone;
+
+
+    /*
+    |------------------------------------------------------------------------------------------------
+    | Dependencies
+    |------------------------------------------------------------------------------------------------
+    */
+    use View;
+
+
+    /*
+    |------------------------------------------------------------------------------------------------
+    | Class "Config"
+    |------------------------------------------------------------------------------------------------
+    */
+    class Config 
+    {
+        public $methodAllocation = [
+        'Limitless::Dropzone' => 'dropzone',
+        ];
+
+        public $assetAllocation;
+
+        public function __construct()
+        {
+            $this->assetAllocation = [
+                'Limitless::Dropzone' => [
+                    'Attachments/dropzone.js',
+                    'Attachments/dropzone.css',
+                    'Attachments/dropzone.init.js',
+                ]
+            ];
+        }
+
+        /*
+        |--------------------------------------------------------------------------------------------
+        | Method "dropzone"
+        |--------------------------------------------------------------------------------------------
+        */
+        public function dropzone($parameters)
+        {
+            return View('Limitless::Dropzone.Dropzone')
+                ->withId($parameters['id'] ?? null)
+                ->withButtonText($parameters['buttontext'] ?? 'No Text')
+                ->withFiles($parameters['files'] ?? null)
+                ->withConfig($parameters['dropconfig'] ?? null);
+        }
+
+
+    }
+
+
+

src/Views/Limitless/Dropzone/Documentation/Index.blade.php

+{{-- Layout Reference --}}
+@extends('Limitless::Help.Layout.Master')
+
+@section('Limitless::Content')
+
+    @Limitless::CardStart(['title' => "Description", 'icon' => 'icon-info22'])
+
+        @Limitless::Dropzone([
+            'id' => 'MyDropzone1',
+            'files' => [
+                [
+                'sourceurl' => 'https://i.picsum.photos/id/254/200/300.jpg?hmac=VoOUXxjWvbLuWPBSHy_pbMAoLSYCaO-3drnOhwvA2yY',
+                'thumbnailurl' => 'https://i.picsum.photos/id/254/200/300.jpg?hmac=VoOUXxjWvbLuWPBSHy_pbMAoLSYCaO-3drnOhwvA2yY',
+                'deleteurl' => secure_url('/delete'),
+                'filesize' => '0.002 MB',
+                'filename' => 'MyFileName 1'
+                ],
+                [
+                'sourceurl' => 'https://i.picsum.photos/id/542/200/300.jpg?hmac=qD8M4ejDPlEc69pGT21BzB7CDiWOcElb_Ke7V8POjm8',
+                'thumbnailurl' => 'https://i.picsum.photos/id/542/200/300.jpg?hmac=qD8M4ejDPlEc69pGT21BzB7CDiWOcElb_Ke7V8POjm8',
+                'deleteurl' => secure_url('/delete'),
+                'filesize' => '0.003 MB',
+                'filename' => 'MyFileName 2'
+                ],
+                [
+                'sourceurl' => 'https://i.picsum.photos/id/774/200/300.jpg?hmac=HLVTa6awH1Il_dvZGTiqNsqGiyR5RgPXTkD_pBW9L48',
+                'thumbnailurl' => 'https://i.picsum.photos/id/774/200/300.jpg?hmac=HLVTa6awH1Il_dvZGTiqNsqGiyR5RgPXTkD_pBW9L48',
+                'deleteurl' => secure_url('/delete'),
+                'filesize' => '0.004 MB',
+                'filename' => 'MyFileName 3'
+                ]
+            ],
+            'buttontext' => 'Dropzone 1',
+            'dropconfig' => [
+                'maxFileSize' => 20,
+                'url' => secure_url('/upload'),
+                'params' => [
+                    'Token' => @csrf
+                ]
+            ]
+        ])
+
+        @Limitless::Dropzone([
+            'id' => 'MyDropzone2',
+            'files' => [
+                [
+                    'sourceurl' => 'https://i.picsum.photos/id/94/200/300.jpg?hmac=CA7x5S3EdSeRqM9TK0RxiKTcx1R96lIncvKTjTP3beI',
+                    'thumbnailurl' => 'https://i.picsum.photos/id/94/200/300.jpg?hmac=CA7x5S3EdSeRqM9TK0RxiKTcx1R96lIncvKTjTP3beI',
+                    'deleteurl' => secure_url('/delete'),
+                    'filesize' => '1 MB',
+                    'filename' => 'MyFileName 4'
+                ],
+                [
+                    'sourceurl' => 'https://i.picsum.photos/id/574/200/300.jpg?hmac=8A2sOGZU1xgRXI46snJ80xNY3Yx-KcLVsBG-wRchwFg',
+                    'thumbnailurl' => 'https://i.picsum.photos/id/574/200/300.jpg?hmac=8A2sOGZU1xgRXI46snJ80xNY3Yx-KcLVsBG-wRchwFg',
+                    'deleteurl' => secure_url('/delete'),
+                    'filesize' => '0.5 MB',
+                    'filename' => 'MyFileName 5'
+                ],
+                [
+                    'sourceurl' => 'https://i.picsum.photos/id/546/200/300.jpg?hmac=WRVm_tMObPuM2HqJCr5D6N59Mboh73aqEno4MCuu5AE',
+                    'thumbnailurl' => 'https://i.picsum.photos/id/546/200/300.jpg?hmac=WRVm_tMObPuM2HqJCr5D6N59Mboh73aqEno4MCuu5AE',
+                    'deleteurl' => secure_url('/delete'),
+                    'filesize' => '0.7 MB',
+                    'filename' => 'MyFileName 6'
+                ]
+            ],
+            'buttontext' => 'Dropzone 2',
+            'dropconfig' => [
+                'maxFileSize' => 20,
+                'url' => secure_url('/upload'),
+                'params' => [
+                'Token' => @csrf
+                ]
+            ]
+        ])
+
+        @Limitless::Dropzone([
+            'dropconfig' => [
+                'url' => '/upload',
+            ]
+        ])
+    @Limitless::CardStop
+
+@stop

src/Views/Limitless/Dropzone/Dropzone.blade.php

+<div id="LimitlessDropzoneTemplate" style="display:none">
+    <div dz-container="true" style="flex-grow: 1; min-width:220px;">
+        <div class="card-body" style="padding: 7px;">
+            <div class="d-flex align-items-start flex-nowrap" style="border: 1px solid #00bcd4; padding:5px;">
+                <div style="text-align: center;">
+                    <div>
+                        <div class="font-weight-semibold mr-2">
+                            <div class="card-img-actions" style="width:130px; height:110px;">
+                                <a data-dz-source target="_blank" href="#">
+                                    <img style="margin:5px; width:120px; height:100px;"
+                                         data-dz-thumbnail alt=""
+                                    >
+                                    <span class="card-img-actions-overlay card-img"><i class="icon-search4 icon-2x"></i></span>
+                                </a>
+                            </div>
+                        </div>
+                        <small>
+                            <span style="text-transform: uppercase" data-dz-name></span> (<span class="DropzoneFilesize text-muted" data-dz-size></span>)
+                        </small>
+                    </div>
+                </div>
+                <div class="list-icons list-icons-extended ml-auto">
+                    <a data-dz-delete href="#" class="list-icons-item"><i class="icon-bin text-grey top-0"></i></a>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div @if($id) id="{{ $id }}" @endif
+    class="LimitlessDropzone d-flex flex-wrap align-items-stretch flex-row"
+     @if($config) data-config="{{ json_encode($config) }}" @endif
+     @if($files) data-files="{{ json_encode($files) }}" @endif
+>
+    <button style="margin:7px;" class="DropzoneButton btn btn-secondary btn-labeled btn-labeled-left btn-block">
+        <b><i class="icon-drawer-in"></i></b> {{ $buttonText }}
+    </button>
+</div>

src/Views/Limitless/Element/Alert/Alert.blade.php

+<div class="alert
+    @if($default) alert-{{ $type }} @else bg-{{ $type }} @endif
+    @if($border) border-{{ $border }} @endif
+    @if($styled) alert-styled-{{ $styled }} @endif
+    @if($rounded) alert-rounded @endif
+    @if($dismissible) alert-dismissible @endif
+    ">
+    @if($dismissible) <button type="button" class="close" data-dismiss="alert"><span>×</span></button> @endif
+    <span class="font-weight-semibold">{{ $title }}</span>
+    {{ $message }}
+</div>
\ No newline at end of file

src/Views/Limitless/Element/Alert/Documentation/Index.blade.php

+{{-- Layout Reference --}}
+@extends('Limitless::Help.Layout.Master')
+
+@section('Limitless::Content')
+
+    {{-- Description --}}
+    @Limitless::CardStart(['title' => "Alert", 'icon' => 'icon-bubble-notification'])
+    <p>A styled container for alert messages.</p>
+    @Limitless::CardStop
+
+    {{-- Elements --}}
+    @Limitless::CardStart(['title' => "Fragments", 'icon' => 'icon-grid5'])
+
+        <div class="bg-dark rounded py-2 px-3 mb-3">
+            <h6 class="mb-0 font-weight-semibold">Alert</h6>
+            <p class="mb-3 text-muted">A styled container for alert messages.</p>
+            <p class="font-italic font-size-lg">Parameters</p>
+            <div class="row mt-2">
+                @Limitless::TableStart([ 'extra' => ['class' => 'table table-xs table-striped'] ])
+
+                @Limitless::TableAutofillHeader([
+                    ['name' => 'Key'],
+                    ['name' => 'Type'],
+                    ['name' => 'Description']
+                ])
+
+                @Limitless::TableAutofillBody([
+                    [
+                        ['value' => 'default'],
+                        ['value' => '<i>Boolean</i> [Default = <code>true</code>]', 'secure' => false],
+                        ['value' => 'Type of alert container whether <code>true = default</code> or <code>false = solid</code>.', 'secure' => false]
+                    ],
+                    [
+                        ['value' => 'type'],
+                        ['value' => '<i>String</i> [Default = <code>"primary"</code>]', 'secure' => false],
+                        ['value' => 'Type of alert color whether <code>primary | success | danger | info | warning</code>.', 'secure' => false]
+                    ],
+                    [
+                        ['value' => 'border'],
+                        ['value' => '<i>String?</i> [Default = <code>null</code>]', 'secure' => false],
+                        ['value' => 'Border container of the alert. <code>0 | 1 | 2 | 3</code>', 'secure' => false]
+                    ],
+                    [
+                        ['value' => 'styled'],
+                        ['value' => '<i>String?</i> [Default = <code>null</code>]', 'secure' => false],
+                        ['value' => 'Adds icon depending on the alert type on <code>left</code> or <code>right</code> side of the container. ', 'secure' => false]
+                    ],
+                    [
+                        ['value' => 'rounded'],
+                        ['value' => '<i>Boolean</i> [Default = <code>false</code>]', 'secure' => false],
+                        ['value' => 'Makes the container round shaped if set to <code>true</code>.', 'secure' => false]
+                    ],
+                    [
+                        ['value' => 'dismissible'],
+                        ['value' => '<i>Boolean</i> [Default = <code>false</code>]', 'secure' => false],
+                        ['value' => 'Adds a closing button to make the container have an option to be dismissed.']
+                    ],
+                    [
+                        ['value' => 'title'],
+                        ['value' => '<i>String</i> [Default = <code>"No title."</code>]', 'secure' => false],
+                        ['value' => 'The starting text of the alert message.']
+                    ],
+                    [
+                        ['value' => 'message'],
+                        ['value' => '<i>String</i> [Default = <code>"No message."</code>]', 'secure' => false],
+                        ['value' => 'The main text of the alert message.']
+                    ]
+                ])
+                @Limitless::TableStop
+            </div>
+        </div>
+
+    @Limitless::CardStop
+
+    {{-- Sample Output --}}
+    @Limitless::CardStart(['title' => "Sample Output", 'icon' => 'icon-display4' ] )
+        @Limitless::Alert
+        @Limitless::Alert(['type' => 'success', 'title' => 'Success!', 'message' => 'Default success.'])
+        @Limitless::Alert(['default' => false, 'type' => 'danger', 'title' => 'Danger!', 'message' => 'Solid danger dismissible.', 'dismissible' => true])
+        @Limitless::Alert(['type' => 'info', 'title' => 'Info!', 'message' => 'Default info dismissible border 3.', 'dismissible' => true, 'border' => 3])
+        @Limitless::Alert(['type' => 'primary', 'title' => 'Primary!', 'message' => 'Default primary dismissible styled left.', 'dismissible' => true, 'styled' => 'left'])
+        @Limitless::Alert(['default' => false, 'type' => 'warning', 'title' => 'Warning!', 'message' => 'Solid warning dismissible styled right.', 'dismissible' => true, 'styled' => 'right'])
+        @Limitless::Alert(['type' => 'success', 'title' => 'Round!', 'message' => 'Default success rounded styled left.', 'styled' => 'left', 'rounded' => true])
+    @Limitless::CardStop
+
+    @php
+        $example = base64_decode("QExpbWl0bGVzczo6QWxlcnQKQExpbWl0bGVzczo6QWxlcnQoWyd0eXBlJyA9PiAnc3VjY2VzcycsICd0aXRsZScgPT4gJ1N1Y2Nlc3MhJywgJ21lc3NhZ2UnID0+ICdEZWZhdWx0IHN1Y2Nlc3MuJ10pCkBMaW1pdGxlc3M6OkFsZXJ0KFsnZGVmYXVsdCcgPT4gZmFsc2UsICd0eXBlJyA9PiAnZGFuZ2VyJywgJ3RpdGxlJyA9PiAnRGFuZ2VyIScsICdtZXNzYWdlJyA9PiAnU29saWQgZGFuZ2VyIGRpc21pc3NpYmxlLicsICdkaXNtaXNzaWJsZScgPT4gdHJ1ZV0pCkBMaW1pdGxlc3M6OkFsZXJ0KFsndHlwZScgPT4gJ2luZm8nLCAndGl0bGUnID0+ICdJbmZvIScsICdtZXNzYWdlJyA9PiAnRGVmYXVsdCBpbmZvIGRpc21pc3NpYmxlIGJvcmRlciAzLicsICdkaXNtaXNzaWJsZScgPT4gdHJ1ZSwgJ2JvcmRlcicgPT4gM10pCkBMaW1pdGxlc3M6OkFsZXJ0KFsndHlwZScgPT4gJ3ByaW1hcnknLCAndGl0bGUnID0+ICdQcmltYXJ5IScsICdtZXNzYWdlJyA9PiAnRGVmYXVsdCBwcmltYXJ5IGRpc21pc3NpYmxlIHN0eWxlZCBsZWZ0LicsICdkaXNtaXNzaWJsZScgPT4gdHJ1ZSwgJ3N0eWxlZCcgPT4gJ2xlZnQnXSkKQExpbWl0bGVzczo6QWxlcnQoWydkZWZhdWx0JyA9PiBmYWxzZSwgJ3R5cGUnID0+ICd3YXJuaW5nJywgJ3RpdGxlJyA9PiAnV2FybmluZyEnLCAnbWVzc2FnZScgPT4gJ1NvbGlkIHdhcm5pbmcgZGlzbWlzc2libGUgc3R5bGVkIHJpZ2h0LicsICdkaXNtaXNzaWJsZScgPT4gdHJ1ZSwgJ3N0eWxlZCcgPT4gJ3JpZ2h0J10pCkBMaW1pdGxlc3M6OkFsZXJ0KFsndHlwZScgPT4gJ3N1Y2Nlc3MnLCAndGl0bGUnID0+ICdSb3VuZCEnLCAnbWVzc2FnZScgPT4gJ0RlZmF1bHQgc3VjY2VzcyByb3VuZGVkIHN0eWxlZCBsZWZ0LicsICdzdHlsZWQnID0+ICdsZWZ0JywgJ3JvdW5kZWQnID0+IHRydWVdKQ==");
+    @endphp
+
+    {{-- Sample Code --}}
+    @Limitless::CardStart(['title' => "Sample Code", 'icon' => 'icon-circle-code' ] )
+        @Limitless::Codemirror([ 'language' => 'javascript', 'theme' => 'zenburn', 'value' => $example ])
+    @Limitless::CardStop
+
+@stop

src/Views/Limitless/Element/Card/Documentation/Index.blade.php

-{{-- Layout Reference --}}
-@extends('Limitless::Help.Layout.Master')
-
-@section('Limitless::Content')
-
-    @php
-        $example = base64_decode("ICAgIEBMaW1pdGxlc3M6OkVsZW1lbnRDYXJkU3RhcnQoWyd0aXRsZScgPT4gIkNvZGVtaXJyb3IgVGVzdCIsICdpY29uJyA9PiAnaWNvbi1maWxlLWVtcHR5JyBdICkKICAgICAgICBJIGFtIGluc2lkZSBhIGNhcmQhCiAgICBATGltaXRsZXNzOjpFbGVtZW50Q2FyZFN0b3A=");
-    @endphp
-
-    @Limitless::ElementCardStart(['title' => "Documentation", 'icon' => 'icon-file-text3', 'collapsable' => true, 'removeable' => false, 'extra' => ['style' => 'position:relative;', 'id' => 'elemento1', 'class' => 'card'] ])
-        Description for card element here.
-    @Limitless::ElementCardStop
-
-    @Limitless::ElementCardStart(['title' => "Card Sample", 'icon' => 'icon-file-empty' ] )
-        I am inside a card!
-    @Limitless::ElementCardStop
-
-    @Limitless::ElementCardStart(['title' => "Card Syntax", 'icon' => 'icon-file-empty' ] )
-        @Limitless::Codemirror([ 'language' => 'javascript', 'theme' => 'zenburn', 'value' => $example ])
-    @Limitless::ElementCardStop
-
-@stop

src/Views/Limitless/Element/Config.php

@@ -9,8 +9,8 @@
     | This file is beautified by the command "sidekick:CodebeautifierCommand" of the ceetrox
     | sidekick package.
     |
-    | Author: Marco Schmiedel <marco.schmiedel@itmax.email>
-    | Update: 2022-06-15 10:07:09
+    | Author: Kevin Almond Roe Yumang <kevin.yumang@itmax.email>
+    | Update: 2022-06-30 02:04:35
     |
     */
     namespace Ceetrox\Sidekick\Views\Limitless\Element;
@@ -37,45 +37,78 @@
         |--------------------------------------------------------------------------------------------
         */
         public $methodAllocation = [
-        'Limitless::ElementCardStart' => 'cardStart',
-        'Limitless::ElementCardStop' => 'cardStop',
+        'Limitless::Alert' => 'alert',
+        'Limitless::LoremIpsum' => 'loremIpsum',
+        'Limitless::RandomSelect' => 'randomSelect',
+        'Limitless::Divider' => 'divider',
         'Limitless::Example' => 'example',
+        'Limitless::Copyright' => 'copyright',
+        'Limitless::Legend' => 'legend',
         ];
 
+        
         public $assetAllocation = [
         'Limitless::Example' => [
-        'Example/example.js',
-        'Example/example.css'
+        'Example/Attachments/example.js',
+        'Example/Attachments/example.css'
         ]
         ];
 
 
         /*
         |--------------------------------------------------------------------------------------------
-        | Method "cardStart"
+        | Method "alert"
         |--------------------------------------------------------------------------------------------
-        | Method "CardStart"
         */
-        public function cardStart($parameters)
+        public function alert($parameters)
         {
-            return View('Limitless::Element.Card.Start')
-            ->withTitle( (isset($parameters['title']) ? $parameters['title'] : 'No Title') )
-            ->withIcon( (isset($parameters['icon']) ? $parameters['icon'] : 'icon-circle2') )
-            ->withCollapsable( (isset($parameters['collapsable']) ? $parameters['collapsable'] : true) )
-            ->withRemoveable( (isset($parameters['removeable']) ? $parameters['removeable'] : false) )
-            ->withExtra( (isset($parameters['extra']) ? $parameters['extra'] : [] ) );
+            return View('Limitless::Element.Alert.Alert')
+            ->withDefault($parameters['default'] ?? true)
+            ->withType($parameters['type'] ?? 'primary')
+            ->withBorder(isset($parameters['border']) ? (string)$parameters['border'] : null)
+            ->withStyled($parameters['styled'] ?? null)
+            ->withRounded($parameters['rounded'] ?? false)
+            ->withDismissible($parameters['dismissible'] ?? false)
+            ->withTitle($parameters['title'] ?? 'No title.')
+            ->withMessage($parameters['message'] ?? 'No message.');
 
         }
 
 
         /*
         |--------------------------------------------------------------------------------------------
-        | Method "cardStop"
+        | Method "loremIpsum"
         |--------------------------------------------------------------------------------------------
         */
-        public function cardStop()
+        public function loremIpsum($parameters)
         {
-            return View('Limitless::Element.Card.Stop');
+            return View('Limitless::Element.LoremIpsum.LoremIpsum')
+            ->withLength($parameters == [] ? 20 : $parameters);
+
+        }
+
+
+        /*
+        |--------------------------------------------------------------------------------------------
+        | Method "divider"
+        |--------------------------------------------------------------------------------------------
+        */
+        public function divider()
+        {
+            return View('Limitless::Element.Divider.Divider');
+
+        }
+
+
+        /*
+        |--------------------------------------------------------------------------------------------
+        | Method "randomSelect"
+        |--------------------------------------------------------------------------------------------
+        */
+        public function randomSelect($items)
+        {
+            return View('Limitless::Element.RandomSelect.RandomSelect')
+            ->withItems($items);
 
         }
 
@@ -91,6 +124,30 @@
 
         }
 
+        /*
+        |--------------------------------------------------------------------------------------------
+        | Method "copyright"
+        |--------------------------------------------------------------------------------------------
+        */
+        public function copyright($parameters)
+        {
+            return View('Limitless::Element.Copyright.Copyright')
+            ->withCopyright($parameters ?? 'No Author');
+
+        }
+
+        /*
+        |--------------------------------------------------------------------------------------------
+        | Method "legend"
+        |--------------------------------------------------------------------------------------------
+        */
+        public function legend($parameters)
+        {
+            return View('Limitless::Element.Legend.Legend')
+                ->withLegend($parameters ?? 'No Title');
+
+        }
+
     }
 
 

src/Views/Limitless/Element/Copyright/Copyright.blade.php

+Copyright © {{ date('Y') }} {{ $copyright }}
\ No newline at end of file

src/Views/Limitless/Element/Copyright/Documentation/Index.blade.php

+{{-- Layout Reference --}}
+@extends('Limitless::Help.Layout.Master')
+
+@section('Limitless::Content')
+
+    @Limitless::CardStart(['title' => "Description", 'icon' => 'icon-info22'])
+        @Limitless::Copyright('Ceetrox GmbH')
+    @Limitless::CardStop
+
+@stop
\ No newline at end of file

src/Views/Limitless/Element/Divider/Divider.php

+<div style="border-top:1px solid #ffffff1a;" class="dropdown-divider"></div>
\ No newline at end of file

src/Views/Limitless/Element/Divider/Documentation/Index.blade.php

+{{-- Layout Reference --}}
+@extends('Limitless::Help.Layout.Master')
+
+@section('Limitless::Content')
+
+    {{-- Description --}}
+    @Limitless::CardStart(['title' => "Divider", 'icon' => 'icon-minus2'])
+        <p>A styled horizontal line for separating contents.</p>
+    @Limitless::CardStop
+
+    {{-- Elements --}}
+    @Limitless::CardStart(['title' => "Fragments", 'icon' => 'icon-grid5'])
+
+        <div class="bg-dark rounded py-2 px-3 mb-3">
+            <h6 class="mb-0 font-weight-semibold">Divider</h6>
+            <p class="mb-3 text-muted">A styled horizontal line for separating contents.</p>
+            <p class="font-italic font-size-lg">Parameters</p> NONE
+        </div>
+
+    @Limitless::CardStop
+
+    {{-- Sample Output --}}
+    @Limitless::CardStart(['title' => "Sample Output", 'icon' => 'icon-display4' ] )
+
+        <p>some content...</p>
+        @Limitless::Divider
+        <p>some content...</p>
+
+    @Limitless::CardStop
+
+    @php
+        $example = base64_decode("PHA+c29tZSBjb250ZW50Li4uPC9wPgpATGltaXRsZXNzOjpEaXZpZGVyCjxwPnNvbWUgY29udGVudC4uLjwvcD4=");
+    @endphp
+
+    {{-- Sample Code --}}
+    @Limitless::CardStart(['title' => "Sample Code", 'icon' => 'icon-circle-code' ] )
+        @Limitless::Codemirror([ 'language' => 'javascript', 'theme' => 'zenburn', 'value' => $example ])
+    @Limitless::CardStop
+
+@stop

src/Views/Limitless/Element/Example/Documentation/Index.blade.php

@@ -3,20 +3,34 @@
 
 @section('Limitless::Content')
 
-    @php
-        $example = base64_decode("QExpbWl0bGVzczo6RXhhbXBsZQ==");
-    @endphp
+    {{-- Description --}}
+    @Limitless::CardStart(['title' => "Example", 'icon' => 'icon-exclamation'])
+        <p>Example Div element with custom javascript and stylesheet files.</p>
+    @Limitless::CardStop
+
+    {{-- Elements --}}
+    @Limitless::CardStart(['title' => "Fragments", 'icon' => 'icon-grid5'])
+
+        <div class="bg-dark rounded py-2 px-3 mb-3">
+            <h6 class="mb-0 font-weight-semibold">Example</h6>
+            <p class="mb-3 text-muted">Example Div element with custom javascript and stylesheet files.</p>
+            <p class="font-italic font-size-lg">Parameters</p> NONE
+        </div>
 
-    @Limitless::ElementCardStart(['title' => "Documentation", 'icon' => 'icon-file-text3', 'collapsable' => true, 'removeable' => false, 'extra' => ['style' => 'position:relative;', 'id' => 'elemento1', 'class' => 'card'] ])
-        Description for example element here.
-    @Limitless::ElementCardStop
+    @Limitless::CardStop
 
-    @Limitless::ElementCardStart(['title' => "Example Sample Output", 'icon' => 'icon-file-empty' ] )
+    {{-- Sample Output --}}
+    @Limitless::CardStart(['title' => "Sample Output", 'icon' => 'icon-display4' ] )
         @Limitless::Example
-    @Limitless::ElementCardStop
+    @Limitless::CardStop
+
+    @php
+        $example = base64_decode("QExpbWl0bGVzczo6RXhhbXBsZQ==");
+    @endphp
 
-    @Limitless::ElementCardStart(['title' => "Example Syntax", 'icon' => 'icon-file-empty' ] )
+    {{-- Sample Code --}}
+    @Limitless::CardStart(['title' => "Sample Code", 'icon' => 'icon-circle-code' ] )
         @Limitless::Codemirror([ 'language' => 'javascript', 'theme' => 'zenburn', 'value' => $example ])
-    @Limitless::ElementCardStop
+    @Limitless::CardStop
 
 @stop

src/Views/Limitless/Element/Legend/Documentation/Index.blade.php

+{{-- Layout Reference --}}
+@extends('Limitless::Help.Layout.Master')
+
+@section('Limitless::Content')
+
+    @Limitless::CardStart(['title' => "Description", 'icon' => 'icon-info22'])
+        @Limitless::Legend('Form Header Title')
+    @Limitless::CardStop
+
+@stop
\ No newline at end of file

src/Views/Limitless/Element/Legend/Legend.blade.php

+<legend class="text-uppercase font-size-sm font-weight-bold">{{ $legend }}</legend>
\ No newline at end of file

src/Views/Limitless/Element/LoremIpsum/Documentation/Index.blade.php

+{{-- Layout Reference --}}
+@extends('Limitless::Help.Layout.Master')
+
+@section('Limitless::Content')
+
+
+    {{-- Description --}}
+    @Limitless::CardStart(['title' => "Lorem Ipsum", 'icon' => 'icon-bubble-lines3'])
+        <p>Generates Lorem ipsum based on passed parameter <i>length</i>.</p>
+    @Limitless::CardStop
+
+    {{-- Elements --}}
+    @Limitless::CardStart(['title' => "Fragments", 'icon' => 'icon-grid5'])
+
+        <div class="bg-dark rounded py-2 px-3 mb-3">
+            <h6 class="mb-0 font-weight-semibold">LoremIpsum</h6>
+            <p class="mb-3 text-muted">Generates Lorem ipsum based on passed parameter <i>length</i>.</p>
+            <p class="font-italic font-size-lg">Parameters</p>
+            <div class="row mt-2">
+                @Limitless::TableStart([ 'extra' => ['class' => 'table table-xs table-striped'] ])
+
+                    @Limitless::TableAutofillHeader([
+                        ['name' => 'Key'],
+                        ['name' => 'Type'],
+                        ['name' => 'Description']
+                    ])
+
+                    @Limitless::TableAutofillBody([
+                        [
+                            ['value' => 'length'],
+                            ['value' => '<i>Integer|Numeric String</i> [Default = <code>20</code>]', 'secure' => false],
+                            ['value' => 'The length of random words to generate.']
+                        ]
+                    ])
+                @Limitless::TableStop
+            </div>
+        </div>
+
+    @Limitless::CardStop
+
+    {{-- Sample Output --}}
+    @Limitless::CardStart(['title' => "Sample Output", 'icon' => 'icon-display4' ] )
+        @Limitless::LoremIpsum(100)
+        @Limitless::Divider
+        @Limitless::LoremIpsum('50')
+        @Limitless::Divider
+        @Limitless::LoremIpsum
+    @Limitless::CardStop
+
+    @php
+        $example = base64_decode("QExpbWl0bGVzczo6TG9yZW1JcHN1bSgxMDApCkBMaW1pdGxlc3M6OkRpdmlkZXIKQExpbWl0bGVzczo6TG9yZW1JcHN1bSgnNTAnKQpATGltaXRsZXNzOjpEaXZpZGVyCkBMaW1pdGxlc3M6OkxvcmVtSXBzdW0=");
+    @endphp
+
+    {{-- Sample Code --}}
+    @Limitless::CardStart(['title' => "Sample Code", 'icon' => 'icon-circle-code' ] )
+        @Limitless::Codemirror([ 'language' => 'javascript', 'theme' => 'zenburn', 'value' => $example ])
+    @Limitless::CardStop
+
+
+
+@stop

src/Views/Limitless/Element/LoremIpsum/LoremIpsum.blade.php

+@php
+    $output = (new Ceetrox\Views\Limitless\Element\LoremIpsum\Attachments\Core())->words($length);
+@endphp
+
+{{ $output }}
\ No newline at end of file

src/Views/Limitless/Element/RandomSelect/Documentation/Index.blade.php

+{{-- Layout Reference --}}
+@extends('Limitless::Help.Layout.Master')
+
+@section('Limitless::Content')
+
+    {{-- Description --}}
+    @Limitless::CardStart(['title' => "Random Select", 'icon' => 'icon-shuffle'])
+    <p>Selects one random item from a <i>one (1)</i> level array.</p>
+    @Limitless::CardStop
+
+    {{-- Elements --}}
+    @Limitless::CardStart(['title' => "Fragments", 'icon' => 'icon-grid5'])
+
+        <div class="bg-dark rounded py-2 px-3 mb-3">
+            <h6 class="mb-0 font-weight-semibold">RandomSelect</h6>
+            <p class="mb-3 text-muted">Selects one random item from a <i>one (1)</i> level array.</p>
+            <p class="font-italic font-size-lg">Parameters</p>
+            <div class="row mt-2">
+                @Limitless::TableStart([ 'extra' => ['class' => 'table table-xs table-striped'] ])
+
+                @Limitless::TableAutofillHeader([
+                    ['name' => 'Key'],
+                    ['name' => 'Type'],
+                    ['name' => 'Description']
+                ])
+
+                @Limitless::TableAutofillBody([
+                    [
+                        ['value' => 'items'],
+                        ['value' => '<i>Array</i> [Default = <code>[]</code>]', 'secure' => false],
+                        ['value' => 'The array of items.']
+                    ]
+                ])
+                @Limitless::TableStop
+            </div>
+        </div>
+
+    @Limitless::CardStop
+
+    {{-- Sample Output --}}
+    @Limitless::CardStart(['title' => "Sample Output", 'icon' => 'icon-display4' ] )
+        @php
+            $items = ['Item1', 'Item2', 'Item3', 'Item4', 'Item5'];
+        @endphp
+
+        <div> @Limitless::RandomSelect($items) </div>
+        <div> @Limitless::RandomSelect($items) </div>
+        <div> @Limitless::RandomSelect($items) </div>
+        <div> @Limitless::RandomSelect($items) </div>
+        <div> @Limitless::RandomSelect($items) </div>
+    @Limitless::CardStop
+
+    @php
+        $example = base64_decode("QHBocAoJJGl0ZW1zID0gWydJdGVtMScsICdJdGVtMicsICdJdGVtMycsICdJdGVtNCcsICdJdGVtNSddOwpAZW5kcGhwCgo8ZGl2PiBATGltaXRsZXNzOjpSYW5kb21TZWxlY3QoJGl0ZW1zKSA8L2Rpdj4KPGRpdj4gQExpbWl0bGVzczo6UmFuZG9tU2VsZWN0KCRpdGVtcykgPC9kaXY+CjxkaXY+IEBMaW1pdGxlc3M6OlJhbmRvbVNlbGVjdCgkaXRlbXMpIDwvZGl2Pgo8ZGl2PiBATGltaXRsZXNzOjpSYW5kb21TZWxlY3QoJGl0ZW1zKSA8L2Rpdj4KPGRpdj4gQExpbWl0bGVzczo6UmFuZG9tU2VsZWN0KCRpdGVtcykgPC9kaXY+");
+    @endphp
+
+    {{-- Sample Code --}}
+    @Limitless::CardStart(['title' => "Sample Code", 'icon' => 'icon-circle-code' ] )
+        @Limitless::Codemirror([ 'language' => 'javascript', 'theme' => 'zenburn', 'value' => $example ])
+    @Limitless::CardStop
+
+@stop

src/Views/Limitless/Element/RandomSelect/RandomSelect.blade.php

+{{ $items[array_rand($items)] }}
\ No newline at end of file

src/Views/Limitless/Form/Attachments/form.init.js

+$(document).ready(function() {
+
+})
\ No newline at end of file

src/Views/Limitless/Form/Documentation/Index.blade.php

+{{-- Layout Reference --}}
+@extends('Limitless::Help.Layout.Master')
+
+@section('Limitless::Content')
+
+
+    {{-- Description --}}
+    @Limitless::CardStart(['title' => "Description", 'icon' => 'icon-info22'])
+        FORMS
+    @Limitless::CardStop
+
+
+@stop

src/Views/Limitless/Form/Stop.php

+</div></div>

src/Views/Limitless/Listgroup/Documentation/Index.blade.php

+{{-- Layout Reference --}}
+@extends('Limitless::Help.Layout.Master')
+
+@section('Limitless::Content')
+
+    {{-- https://manticore5029f2b2nexus.bugsmasher.online/ceetrox/sidekick/resource/public/Webdesigns/design-limitless/Template/layout_1/LTR/dark/full/components_navs.html --}}
+
+    @Limitless::CardStart(['title' => "Description", 'icon' => 'icon-info22'])
+        @Limitless::ListGroupStart(false)
+            @Limitless::ListGroupHeader(['title' => 'List Group', 'icon' => 'icon-comment-discussion'])
+            @Limitless::ListGroupItem(['title' => 'Item 1', 'icon' => 'icon-mention'])
+            @Limitless::ListGroupItem(['title' => 'Item 2'])
+        @Limitless::ListGroupStop
+    @Limitless::CardStop
+
+
+@stop
\ No newline at end of file