Create new color selection component.

application/views/components/color_selection.php

@@ -0,0 +1,65 @@
+<?php
+/**
+ * @var string $attributes
+ */
+?>
+
+<?php section('styles') ?>
+
+<link rel="stylesheet" type="text/css" href="<?= asset_url('assets/css/components/color_selection.css') ?>">
+
+<?php section('styles') ?>
+
+<label class="form-label"><?= lang('color') ?></label>
+
+<div <?= $attributes ?? '' ?> class="color-selection d-flex justify-content-between mb-4">
+    <button type="button" class="color-selection-option selected" data-value="#4c96cc">
+        <i class="fas fa-check"></i>
+    </button>
+
+    <button type="button" class="color-selection-option" data-value="#acbefb">
+        <i class="fas fa-check"></i>
+    </button>
+
+    <button type="button" class="color-selection-option" data-value="#65d8e1">
+        <i class="fas fa-check"></i>
+    </button>
+
+    <button type="button" class="color-selection-option" data-value="#7cebc1">
+        <i class="fas fa-check"></i>
+    </button>
+
+    <button type="button" class="color-selection-option" data-value="#54be49">
+        <i class="fas fa-check"></i>
+    </button>
+
+    <button type="button" class="color-selection-option" data-value="#eddf60">
+        <i class="fas fa-check"></i>
+    </button>
+
+    <button type="button" class="color-selection-option" data-value="#f3bc7d">
+        <i class="fas fa-check"></i>
+    </button>
+
+    <button type="button" class="color-selection-option" data-value="#ef8c80">
+        <i class="fas fa-check"></i>
+    </button>
+
+    <button type="button" class="color-selection-option" data-value="#e0292b">
+        <i class="fas fa-check"></i>
+    </button>
+
+    <button type="button" class="color-selection-option" data-value="#dfaffe">
+        <i class="fas fa-check"></i>
+    </button>
+
+    <button type="button" class="color-selection-option" data-value="#e3e3e3">
+        <i class="fas fa-check"></i>
+    </button>
+</div>
+
+<?php section('scripts') ?>
+
+<script src="<?= asset_url('assets/js/components/color_selection.js') ?>"></script>
+
+<?php section('scripts') ?>

assets/css/components/color_selection.scss

@@ -0,0 +1,17 @@
+.color-selection {
+    .color-selection-option {
+        border: none;
+        color: white;
+        width: 32px;
+        height: 32px;
+
+        .fa-check {
+            display: none;
+            margin: auto;
+        }
+
+        &.selected .fa-check {
+            display: block;
+        }
+    }
+}

assets/js/components/color_selection.js

@@ -0,0 +1,111 @@
+/* ----------------------------------------------------------------------------
+ * Easy!Appointments - Online Appointment Scheduler
+ *
+ * @package     EasyAppointments
+ * @author      A.Tselegidis <alextselegidis@gmail.com>
+ * @copyright   Copyright (c) Alex Tselegidis
+ * @license     https://opensource.org/licenses/GPL-3.0 - GPLv3
+ * @link        https://easyappointments.org
+ * @since       v1.5.0
+ * ---------------------------------------------------------------------------- */
+
+/**
+ * Color selection component.
+ *
+ * This module implements the color selection functionality.
+ */
+App.Components.ColorSelection = (function () {
+    /**
+     * Event: Color Selection Option "Click"
+     *
+     * @param {jQuery.Event} event
+     */
+    function onColorSelectionOptionClick(event) {
+        const $target = $(event.currentTarget);
+
+        const $colorSelection = $target.closest('.color-selection');
+
+        $colorSelection.find('.color-selection-option.selected').removeClass('selected');
+
+        $target.addClass('selected');
+    }
+
+    /**
+     * Get target color.
+     *
+     * @param {jQuery} $target Container element ".color-selection" selector.
+     */
+    function getColor($target) {
+        return $target.find('.color-selection-option.selected').data('value');
+    }
+
+    /**
+     * Set target color.
+     *
+     * @param {jQuery} $target Container element ".color-selection" selector.
+     * @param {String} color Color value.
+     */
+    function setColor($target, color) {
+        $target
+            .find('.color-selection-option')
+            .removeClass('selected')
+            .each((index, colorSelectionOptionEl) => {
+                var $colorSelectionOption = $(colorSelectionOptionEl);
+
+                if ($colorSelectionOption.data('value') === color) {
+                    $colorSelectionOption.addClass('selected');
+                    return false;
+                }
+            });
+    }
+
+    /**
+     * Disable the color selection for the target element.
+     *
+     * @param {jQuery} $target
+     */
+    function disable($target) {
+        $target.find('.color-selection-option').prop('disabled', true).removeClass('selected');
+        $target.find('.color-selection-option:first').addClass('selected');
+    }
+
+    /**
+     * Enable the color selection for the target element.
+     *
+     * @param {jQuery} $target
+     */
+    function enable($target) {
+        $target.find('.color-selection-option').prop('disabled', false);
+    }
+
+    function applyBackgroundColors() {
+        $(document)
+            .find('.color-selection-option')
+            .each((index, colorSelectionOptionEl) => {
+                const $colorSelectionOption = $(colorSelectionOptionEl);
+
+                const color = $colorSelectionOption.data('value');
+
+                $colorSelectionOption.css('background-color', color);
+            });
+    }
+
+    /**
+     * Initialize the module.
+     */
+    function initialize() {
+        $(document).on('click', '.color-selection-option', onColorSelectionOptionClick);
+
+        applyBackgroundColors();
+    }
+
+    document.addEventListener('DOMContentLoaded', initialize);
+
+    return {
+        disable,
+        enable,
+        getColor,
+        setColor,
+        initialize
+    };
+})();