input.color.php

<?php

$attributes = $Field->getInputAttributes(array(
    'grid-margin' => $Field->getInputMargin(),
    'grid-width' => $Field->getInputWidth(),
    'type' => 'text',
    'name' => $Field->name,
    'value' => $Field->hasValue() && $Field->value !== 'transparent' ? ((strlen($Field->value) === 6 ? '#' : '') . $Field->v()) : '',
    'placeholder' => strval($Field->placeholder) !== '' ? htmlspecialchars($Field->placeholder) : null,
    'required' => $Field->required ? '' : null,
    'readonly' => $Field->readonly ? '' : null,
    'disabled' => $Field->disabled ? '' : null,
    'class' => 'field-input field-input--' . $Field->type . ' input input--' . $Field->type . ' with-buttons',
    'id' => $Field->id('-input'),
));
print '<input';
foreach ($attributes as $attributeName => $attributeValue) if ($attributeValue !== null) print ' ' . $attributeName . '="' . $attributeValue . '"';
print '>';

$attributes = $Field->getButtonAttributes(array(
    'type' => 'button',
    'disabled' => $Field->disabled ? '' : null,
    'class' => 'button-1 button--picker',
    'id' => $Field->id('-button-1'),
    'tabindex' => -1,
));
print '<button';
foreach ($attributes as $attributeName => $attributeValue) if ($attributeValue !== null) print ' ' . $attributeName . '="' . $attributeValue . '"';
print '><i class="las la-eye-dropper"></i></button>';

$attributes = $Field->getButtonAttributes(array(
    'type' => 'button',
    'class' => 'button-2 button--sample no-pointer',
    'id' => $Field->id('-button-2'),
    'tabindex' => -1,
));
print '<button';
foreach ($attributes as $attributeName => $attributeValue) if ($attributeValue !== null) print ' ' . $attributeName . '="' . $attributeValue . '"';
print '><i style="' . ($Field->hasValue() ? 'background-color:' . ((strlen($Field->value) === 6 ? '#' : '') . $Field->v()) . ';': '') . '"></i></button>';

?>

<script>
cmsRequire(['form/script/input.color'], init => init(document.getElementById(<?=$Field->jId('-input')?>)));
</script>