Add classes argments for styling the options

plantain-00 · Aug 3, 2017 · 95bfa69 · 95bfa69
1 parent 27bf8e5
commit 95bfa69
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 5 deletions.
diff --git a/src/angular.template.html b/src/angular.template.html
@@ -51,10 +51,10 @@
                         <li *ngIf="groupOrOption.options"
                             class="select2-results__option"
                             role="group">
-                            <strong class="select2-results__group">{{groupOrOption.label}}</strong>
+                            <strong [attr.class]="'select2-results__group' + (groupOrOption.classes ? ' ' + groupOrOption.classes : '')">{{groupOrOption.label}}</strong>
                             <ul class="select2-results__options select2-results__options--nested">
                                 <li *ngFor="let option of groupOrOption.options"
-                                    [class]="getOptionStyle(option.value)"
+                                    [class]="getOptionStyle(option)"
                                     role="treeitem"
                                     [attr.aria-selected]="isSelected(option)"
                                     [attr.aria-disabled]="isDisabled(option)"
@@ -63,7 +63,7 @@
                             </ul>
                         </li>
                         <li *ngIf="!groupOrOption.options"
-                            [class]="getOptionStyle(groupOrOption.value)"
+                            [class]="getOptionStyle(groupOrOption)"
                             role="treeitem"
                             [attr.aria-selected]="isSelected(groupOrOption)"
                             [attr.aria-disabled]="isDisabled(groupOrOption)"

diff --git a/src/angular.ts b/src/angular.ts
@@ -208,8 +208,9 @@ export class Select2 implements ControlValueAccessor {
         this._dirtyCheckNativeValue();
     }
 
-    getOptionStyle(value: string) {
-        return common.getOptionStyle(value, this.hoveringValue);
+    getOptionStyle(option: common.Select2Option) {
+        return common.getOptionStyle(option.value, this.hoveringValue)
+            + (option.classes ? ' ' + option.classes : '');
     }
 
     mouseenter(option: common.Select2Option) {

diff --git a/src/common.ts b/src/common.ts
@@ -1,6 +1,7 @@
 export type Select2Group = {
     label: string;
     options: Select2Option[];
+    classes?: string;
 };
 
 export type Select2Option = {
@@ -9,6 +10,7 @@ export type Select2Option = {
     disabled?: boolean;
     // tslint:disable-next-line:ban-types
     component?: string | Function;
+    classes?: string;
 };
 
 export type Select2Value = string | number;