<%= render component_tag(x: { data: "colorPicker({selectedColor: '#{selected}'})", ":class": "colorWheel.show && 'picker-color-wheel-open'", dimensions: "onResize" }) do %>

<% color_swatches.each do |swatch| %> <% color = swatch[:color].upcase name = swatch[:name] %> <%= coco_tag(:button, type: "button", class: "picker-swatch", style: "background-color: #{color};", maxlength: 7, data: { color: color, tippy: ("tooltip" if name), tippy_content: (name if name), role: "picker-swatch" }, x: { "@click": "setSelectedColor('#{color}')", ":class": "{'swatch-current': selectedColor == '#{color}'}" } ) %> <% end %>

<%= coco_button( icon: :palette, theme: :secondary, tooltip: { placement: "right", content: "Open colour wheel" }, x: { "@click.prevent": " toggleState('active'); $dispatch('color-wheel:toggle') " } ) do |button| %> <% button.with_state(:active, tooltip: "Hide colour wheel") %> <% end %>

<% end %>