oda-framework/components/colors/hsla-picker/hsla-picker.js

It's an ES Progressive Framework based on the technology of Web Components and designed especially for creating custom UI/UX of any complexity for web and cross-platform PWA mobile applications.

import './modules/hsla-picker.js';
ODA({ is: 'oda-hsla-picker',
template:`
        <style>
            :host {
                @apply --horizontal;
                @apply --center;
            }
        </style>
        <hsla-picker :color :size @change="changeColor"></hsla-picker>
    `,
    $public: {
        color: {
            $type: String,
            $def: '',
            $attr: true
        },
        size: {
            $type: Number,
            $def: 24,
            $attr: true
        }
    },
    changeColor(e) {
        this.color = e.detail || e;
    }
})