Introducing the fonticon picker component

Author: skateman

application-settings.js

@@ -11,7 +11,8 @@ module.exports = {
     common: '/common',
     dialogEditor: '/dialog-editor',
     gtl: '/gtl',
-    siteSwitcher: '/site-switcher'
+    siteSwitcher: '/site-switcher',
+    fonticonPicker: '/fonticon-picker'
   },
   nodePackages: 'node_modules/',
   get stylesheetPath() {

demo/controllers/fonticonPickerController.ts

@@ -0,0 +1,2 @@
+export default class FonticonPickerController {
+}

demo/controllers/index.ts

@@ -2,11 +2,13 @@ import AvailableComponentsController from './availableComponentsController';
 import ToolbarMenuController from './toolbarMenuController';
 import DataTableController from './dataTableController';
 import SiteSwitcherController from './siteSwitcherController';
+import FonticonPickerController from './fonticonPickerController';
 import * as ng from 'angular';
 
 export default (module: ng.IModule) => {
   module.controller('demoAvailableComponents', AvailableComponentsController);
   module.controller('demoToolbarMenu', ToolbarMenuController);
   module.controller('demoDataTable', DataTableController);
   module.controller('demoSiteSwitcher', SiteSwitcherController);
+  module.controller('demoFonticonPicker', FonticonPickerController);
 };

demo/services/availableComponentsService.ts

@@ -71,6 +71,12 @@ export default class AvailableComponentsService {
           'Site switcher',
           '/basic',
           require('./../views/site-switcher/basic.html'), 'demoSiteSwitcher as vm')
+      ]),
+      new AvailableGroup('fonticon-picker', 'Fonticon Picker Components', '/fonticon-picker', [
+        new AvailableComponent('basic',
+          'Fonticon picker',
+          '/basic',
+          require('./../views/fonticon-picker/basic.html'), 'demoFonticonPicker as vm')
       ])
     ];
   }

demo/views/fonticon-picker/basic.html

@@ -0,0 +1,6 @@
+<miq-fonticon-picker input-name="fonticon">
+  <miq-fonticon-family selector="ff" title="Font Fabulous"></miq-fonticon-family>
+  <miq-fonticon-family selector="pficon" title="PatternFly"></miq-fonticon-family>
+  <miq-fonticon-family selector="fa" title="Font Awesome"></miq-fonticon-family>
+  <miq-fonticon-family selector="glyphicon" title="Glyphicons"></miq-fonticon-family>
+</miq-fonticon-picker>

dist/css/ui-components.css

@@ -0,0 +1,25 @@
+import { FonticonPickerController } from '../fonticon-picker/fonticonPickerComponent';
+
+class FonticonFamilyController {
+  public FonticonPickerCtrl : FonticonPickerController;
+  private title : string;
+  private selector : string;
+
+  public $onInit() {
+    this.FonticonPickerCtrl.addFamily({
+      title: this.title,
+      selector: this.selector
+    });
+  }
+}
+
+export default class FonticonPicker implements ng.IComponentOptions {
+  public controller = FonticonFamilyController;
+  public require = {
+    FonticonPickerCtrl: '^miqFonticonPicker'
+  };
+  public bindings = {
+    title: '@',
+    selector: '@'
+  };
+}

dist/js/ui-components.js

@@ -0,0 +1,5 @@
+import FonticonFamily from './fonticonFamilyComponent';
+
+export default (module: ng.IModule) => {
+  module.component('miqFonticonFamily', new FonticonFamily);
+};