Merge pull request #976 from systelab/975-configure-the-side-where-the-icon-appears-in-the-combo

975 - Configure the side where the icon appears in the combo

Author: diegocj28

projects/systelab-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "systelab-components",
-  "version": "18.0.3",
+  "version": "18.0.4",
   "license": "MIT",
   "keywords": [
     "Angular",

projects/systelab-components/src/lib/combobox/README.md

@@ -150,10 +150,11 @@ In order to use a combobox with a custom input text color you must set the input
 represent as a rgb code or hex code the color that must be displayed the text.
 
 ## Using a Combo with icons
-In order to set an icon at the end of the input text box (similar as favourites), you must use the input property "withIcon" as true 
+In order to set an icon in the input text box (similar as favourites), you must use the input property "withIcon" as true 
 and set the property "iconClass" with the icon that you want to show (for example, if we want to show an engine icon: 'icon-gear').
 This icon will be displayed with the color of the input text by default, but you can set a different color using the
-"iconColor" to change the color of the icon.
+"iconColor" to change the color of the icon. If you want to change the side where the icon appears (by default it is 
+the right side), you will have to set the "iconSide" property to "left".
 
 ## Using a Combo with Favourites
 

projects/systelab-components/src/lib/combobox/abstract-combobox.component.html

@@ -2,6 +2,10 @@
     <div #dropdowntoogle class="slab-flex-1 d-flex dropdown-toggle slab-dropdown-toogle" id="{{comboId}}"
          data-toggle="dropdown" (click)="onComboClicked($event)" (keydown.arrowDown)="onComboKeyArrowDown($event)"
          (keydown.arrowUp)="onComboKeyArrowUp($event)">
+        <ng-container *ngIf="iconSide === 'left'">
+            <button *ngIf="withIcon && id" class="slab-combo-button border-right-0 rounded-0 {{iconClass}}"
+                    [style.color]="iconColor" tabindex="-1"></button>
+        </ng-container>
         <input *ngIf="!customInputRenderer" #input [readonly]="!allowEditInput" type="text"
                class="slab-flex-1 slab-combo-label slab-combo-input"
                [tabindex]="tabindex"
@@ -20,8 +24,10 @@
         <button *ngIf="withDeleteOption && id && (id !== defaultIdValue)" type="button" #deleteButton
                 class="slab-combo-button border-right-0 rounded-0 {{deleteIconClass}}" (click)="deleteValueSelected($event)"
                 tabindex="-1"></button>
-        <button *ngIf="withIcon && id" class="slab-combo-button border-right-0 rounded-0 {{iconClass}}"
-                [style.color]="iconColor" tabindex="-1"></button>
+        <ng-container *ngIf="iconSide === 'right'">
+            <button *ngIf="withIcon && id" class="slab-combo-button border-right-0 rounded-0 {{iconClass}}"
+                    [style.color]="iconColor" tabindex="-1"></button>
+        </ng-container>
         <button type="button" *ngIf="withFavourites && id!==null && (!isTree || (isTree && level))" #favouriteButton
                 class="slab-combo-button slab-combo-star border-right-0 rounded-0 text-primary"
                 [ngClass]="{'icon-star': isFavourite, 'icon-star-o': !isFavourite }" (click)="doToggleFavourite($event)"

projects/systelab-components/src/lib/combobox/abstract-combobox.component.ts

@@ -42,6 +42,7 @@ export abstract class AbstractComboBox<T> implements AgRendererComponent, OnInit
 	@Input() public tabindex: number;
 	@Input() public deleteIconClass = 'icon-close';
 	@Input() public withEmptyValue: boolean;
+	@Input() public iconSide = 'right';
 
 	public getAllFieldIDValue(): string | number {
 		return '0';