Handle i18n for SuperSelector component

app/components/super_selector_component.rb

@@ -1,10 +1,12 @@
 # frozen_string_literal: true
 
 class SuperSelectorComponent < SelectorComponent
-  def initialize(title:, selected:, items:, data: {})
+  def initialize(title:, selected:, items:, data: {},
+                 selected_items_i18n_key: 'components.super_selector.selected_items')
     super(title: title, selected: selected, items: items, data: data)
     @query = ""
     @selected_items = items.select { |item| @selected.include?(item[:value]) }
+    @selected_items_i18n_key = selected_items_i18n_key
 
     filter_items
   end

app/components/super_selector_component/super_selector_component.html.haml

@@ -11,11 +11,11 @@
               = item[:label]
         - else
           .super-selector-selected-item
-            = "#{@selected_items.length} categories selected"
+            = t(@selected_items_i18n_key, count: @selected_items.length)
       .selector-arrow{data: reflex_data_attributes(:toggle)}
     .selector-wrapper
       .super-selector-search
-        %input{type: "text", placeholder: "Search", data: reflex_data_attributes("debounced:input->search"), value: @query}
+        %input{type: "text", placeholder: t("components.super_selector.search_placeholder"), data: reflex_data_attributes("debounced:input->search"), value: @query}
       .selector-items
         - @filtered_items.each do |item|
           .selector-item{ class: ("selected" if item[:selected]), data: @data, "data-value": item[:value] }

config/locales/en.yml

@@ -458,6 +458,9 @@ en:
   components:
     search_input:
       placeholder: Search
+    super_selector:
+      selected_items: "%{count} selected"
+      search_placeholder: Search
 # Admin
 #
   admin: