From cb2951ba72dad58ed085fc65b220e0832d5c2a78 Mon Sep 17 00:00:00 2001
From: Coleman Watts <coleman@civicrm.org>
Date: Thu, 30 Jun 2022 14:50:34 -0400
Subject: [PATCH] CrmUi - Add crmUiIconPicker Angular widget

---
 ang/crmUi.js                                      | 15 +++++++++++++++
 .../displays/common/searchAdminIcons.component.js |  9 ---------
 .../displays/common/searchAdminIcons.html         |  2 +-
 3 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/ang/crmUi.js b/ang/crmUi.js
index 11eb5e28ef..d8b56772bb 100644
--- a/ang/crmUi.js
+++ b/ang/crmUi.js
@@ -1170,6 +1170,21 @@
       };
     })
 
+    // Adds an icon picker widget
+    // Example: `<input crm-ui-icon-picker ng-model="model.icon">`
+    .directive('crmUiIconPicker', function($timeout) {
+      return {
+        restrict: 'A',
+        controller: function($element) {
+          CRM.loadScript(CRM.config.resourceBase + 'js/jquery/jquery.crmIconPicker.js').then(function() {
+            $timeout(function() {
+              $element.crmIconPicker();
+            });
+          });
+        }
+      };
+    })
+
     .run(function($rootScope, $location) {
       /// Example: <button ng-click="goto('home')">Go home!</button>
       $rootScope.goto = function(path) {
diff --git a/ext/search_kit/ang/crmSearchAdmin/displays/common/searchAdminIcons.component.js b/ext/search_kit/ang/crmSearchAdmin/displays/common/searchAdminIcons.component.js
index d8a1e5eb69..6a7d439f9e 100644
--- a/ext/search_kit/ang/crmSearchAdmin/displays/common/searchAdminIcons.component.js
+++ b/ext/search_kit/ang/crmSearchAdmin/displays/common/searchAdminIcons.component.js
@@ -22,12 +22,6 @@
         };
       };
 
-      function initWidgets() {
-        CRM.loadScript(CRM.config.resourceBase + 'js/jquery/jquery.crmIconPicker.js').then(function() {
-          $('.crm-search-admin-field-icon > input.crm-icon-picker[ng-model]', $element).crmIconPicker();
-        });
-      }
-
       this.$onInit = function() {
         $element.on('hidden.bs.dropdown', function() {
           $timeout(function() {
@@ -51,7 +45,6 @@
         }
         ctrl.iconFields = _.transform(allFields, getIconFields, []);
         ctrl.iconFieldMap = _.indexBy(ctrl.iconFields, 'id');
-        $timeout(initWidgets);
       };
 
       this.onSelectField = function(clause) {
@@ -72,7 +65,6 @@
           searchMeta.pickIcon().then(function(icon) {
             if (icon) {
               ctrl.item.icons.push({icon: icon, side: 'left', if: []});
-              $timeout(initWidgets);
             }
           });
         }
@@ -85,7 +77,6 @@
             item.icon = icon;
             delete item.field;
             item.if = item.if || [];
-            $timeout(initWidgets);
           }
         });
       };
diff --git a/ext/search_kit/ang/crmSearchAdmin/displays/common/searchAdminIcons.html b/ext/search_kit/ang/crmSearchAdmin/displays/common/searchAdminIcons.html
index 98d7676884..dd698a81fc 100644
--- a/ext/search_kit/ang/crmSearchAdmin/displays/common/searchAdminIcons.html
+++ b/ext/search_kit/ang/crmSearchAdmin/displays/common/searchAdminIcons.html
@@ -17,7 +17,7 @@
     </div>
   </div>
   <div class="form-group crm-search-admin-field-icon" ng-if="icon.icon">
-    <input required ng-model="icon.icon" class="form-control crm-icon-picker">
+    <input required ng-model="icon.icon" crm-ui-icon-picker class="form-control crm-icon-picker">
   </div>
   <select class="form-control" ng-model="icon.side" title="{{:: ts('Show icon on left or right side of the field') }}">
     <option value="left">{{:: ts('Align left') }}</option>
-- 
2.25.1