Color Picker

<style>
.square .clr-field button, .circle .clr-field button {
    width: 22px;
    height: 22px;
    left: 5px;
    right: auto;
    border-radius: 5px;
}

.square .clr-field input, .circle .clr-field input {
    padding-left: 36px;
}

.circle .clr-field button {
    border-radius: 50%;
}
</style>

<h:form>
    <div class="card">
        <p:growl>
            <p:autoUpdate />
        </p:growl>

        <h5>Popup</h5>
        <div class="ui-fluid grid formgrid">
            <div class="field col-12 md:col-2">
                <p:outputLabel for="@next" value="Ajax" />
                <p:colorPicker id="ajax" value="#{colorView.ajax}"
                    clearButton="true" closeButton="true" alpha="false">
                    <p:ajax event="open" listener="#{colorView.onPopupOpened}" />
                    <p:ajax event="close" listener="#{colorView.onPopupClosed}" update="@this" />
                </p:colorPicker>
            </div>
            <div class="field col-12 md:col-2">
                <p:outputLabel for="pill" value="Pill (horizontal)" />
                <p:colorPicker id="pill" value="#{colorView.pill}" theme="pill"
                    formatToggle="true" clearButton="true" closeButton="true"
                    alpha="false">
                    <p:ajax event="change" listener="#{colorView.onColorChange}" />
                </p:colorPicker>
            </div>
            <div class="field col-12 md:col-2">
                <p:outputLabel for="@next" value="Polaroid (skinny)" />
                <p:colorPicker id="polaroid" value="#{colorView.polaroid}"
                    theme="polaroid" formatToggle="true" clearButton="true"
                    closeButton="true" alpha="false">
                    <p:ajax event="change" listener="#{colorView.onColorChange}" />
                </p:colorPicker>
            </div>
            <div class="field col-12 md:col-2">
                <p:outputLabel for="@next" value="Large" />
                <p:colorPicker id="large" value="#{colorView.large}" theme="large"
                    formatToggle="true" clearButton="true" closeButton="true"
                    forceAlpha="true">
                    <p:ajax event="change" listener="#{colorView.onColorChange}" />
                </p:colorPicker>
            </div>
            <div class="field col-12 md:col-2">
                <p:outputLabel for="@next" value="Swatches Only" />
                <p:colorPicker id="swatches" value="#{colorView.swatches}"
                    swatchesOnly="true" theme="polaroid" clearButton="false"
                    closeButton="false"
                    swatches="#264653, #2a9d8f, #e9c46a, #f4a261, #e76f51, #d62828, #023e8a, #0077b6, #0096c7, #00b4d8, #48cae4">
                    <p:ajax event="change" listener="#{colorView.onColorChange}" />
                </p:colorPicker>
            </div>
            <div class="field col-12 md:col-2 thumbnail">
                <p:outputLabel for="@next" value="Thumbnail" />
                <p:colorPicker id="thumbnail" value="#{colorView.thumbnail}"
                    swatchesOnly="true" theme="polaroid" clearButton="true"
                    closeButton="true"
                    swatches="#264653, #2a9d8f, #e9c46a, #f4a261, #e76f51, #d62828, #023e8a, #0077b6, #0096c7, #00b4d8, #48cae4">
                    <p:ajax event="change" listener="#{colorView.onColorChange}" />
                </p:colorPicker>
            </div>
            <div class="field col-12 md:col-2">
                <p:outputLabel for="@next" value="Dark Mode" />
                <p:colorPicker id="dark" value="#{colorView.dark}" theme="pill"
                    themeMode="dark" clearButton="true" closeButton="true"
                    formatToggle="true"
                    swatches="#067bc2, #84bcda, #80e377,  #ecc30b, #f37748, #d56062">
                    <p:ajax event="change" listener="#{colorView.onColorChange}" />
                </p:colorPicker>
            </div>
            <div class="field col-12 md:col-2">
                <p:outputLabel for="@next" value="Light Mode" />
                <p:colorPicker id="light" value="#{colorView.light}" theme="pill"
                    themeMode="light" clearButton="true" closeButton="true"
                    formatToggle="true"
                    swatches="#067bc2, #84bcda, #80e377,  #ecc30b, #f37748, #d56062">
                    <p:ajax event="change" listener="#{colorView.onColorChange}" />
                </p:colorPicker>
            </div>
            <div class="field col-12 md:col-2">
                <p:outputLabel for="@next" value="Alpha" />
                <p:colorPicker id="alpha" value="#{colorView.alpha}"
                    clearButton="true" closeButton="true" alpha="true"
                    forceAlpha="true">
                    <p:ajax event="change" listener="#{colorView.onColorChange}" />
                </p:colorPicker>
            </div>
            <div class="field col-12 md:col-2">
                <p:outputLabel for="rgb" value="RGB" />
                <p:colorPicker id="rgb" value="#{colorView.rgb}" theme="large"
                    clearButton="true" closeButton="true" format="rgb">
                    <p:ajax event="change" listener="#{colorView.onColorChange}" />
                </p:colorPicker>
            </div>
            <div class="field col-12 md:col-2">
                <p:outputLabel for="@next" value="HSL" />
                <p:colorPicker id="hsl" value="#{colorView.hsl}" theme="large"
                    clearButton="true" closeButton="true" format="hsl">
                    <p:ajax event="change" listener="#{colorView.onColorChange}" />
                </p:colorPicker>
            </div>
            <div class="field col-12 md:col-2 circle">
                <p:outputLabel for="@next" value="Circle" />
                <p:colorPicker id="circle" value="#{colorView.circle}"
                    format="auto">
                    <p:ajax event="change" listener="#{colorView.onColorChange}" />
                </p:colorPicker>
            </div>
            <div class="field col-12 md:col-2 square">
                <p:outputLabel for="@next" value="Square" />
                <p:colorPicker id="square" value="#{colorView.square}"
                    format="auto">
                    <p:ajax event="change" listener="#{colorView.onColorChange}" />
                </p:colorPicker>
            </div>
            <div class="field col-12 md:col-2">
                <p:outputLabel for="@next" value="RTL" />
                <p:colorPicker id="rtl" value="#{colorView.rtl}" theme="large"
                    dir="rtl" formatToggle="true" clearButton="true"
                    closeButton="true" forceAlpha="true">
                    <p:ajax event="change" listener="#{colorView.onColorChange}" />
                </p:colorPicker>
            </div>
            <div class="field col-12 md:col-2">
                <p:outputLabel for="@next" value="Disabled" />
                <p:colorPicker disabled="true" value="#000000" />
            </div>
            <div class="field col-12 md:col-2">
                <p:outputLabel for="@next" value="Error" />
                <p:colorPicker value="#FFFFFF" class="ui-state-error" />
            </div>
            <div class="field col-12 md:col-2 mt-5">
                <span class="ui-float-label"> 
                    <p:colorPicker clearButton="true" closeButton="true" alpha="false" /> 
                    <p:outputLabel for="@previous" value="Float Label" />
                </span>
            </div>
        </div>
        
         <p:commandButton value="Open Dialog" type="button" icon="pi pi-external-link" onclick="PF('dlg').show()"/>
    </div>

    <p:dialog header="Pick Color" widgetVar="dlg" minHeight="50" width="350" showEffect="fade" modal="true">
        <div style="height: 300px">
        <p:outputLabel for="@next" value="Pick Color:" />
        <p:colorPicker id="dialogPicker" clearButton="true" closeButton="true" alpha="false" />
        </div>
        <f:facet name="footer">
            <p:commandButton type="button" value="Close" style="width: 5rem" onclick="PF('dlg').hide()"/>
        </f:facet>
    </p:dialog>
</h:form>