Merge pull request #12931 from IgniteUI/bpenkov/combo-directives-api-15.1

Update combo directives' public api - 15.1.x

Author: Lipata

projects/igniteui-angular/src/lib/combo/combo.directives.ts

@@ -1,50 +1,156 @@
 import { Directive } from '@angular/core';
 
 /**
- * @hidden
+ * Allows a custom element to be added at the beginning of the combo list.
+ *
+ * @igxModule IgxComboModule
+ * @igxTheme igx-combo-theme
+ * @igxKeywords combobox, combo selection
+ * @igxGroup Grids & Lists
+ *
+ * @example
+ * <igx-combo>
+ *   <ng-template igxComboHeader>
+ *      <div class="header-class">Custom header</div>
+ *      <img src=""/>
+ *   </ng-template>
+ * </igx-combo>
  */
 @Directive({ selector: '[igxComboHeader]' })
 export class IgxComboHeaderDirective { }
 
 /**
- * @hidden
+ * Allows a custom element to be added at the end of the combo list.
+ *
+ * @igxModule IgxComboModule
+ * @igxTheme igx-combo-theme
+ * @igxKeywords combobox, combo selection
+ * @igxGroup Grids & Lists
+ *
+ * @example
+ * <igx-combo>
+ *   <ng-template igxComboFooter>
+ *      <div class="footer-class">Custom footer</div>
+ *      <img src=""/>
+ *   </ng-template>
+ * </igx-combo>
  */
 @Directive({ selector: '[igxComboFooter]' })
 export class IgxComboFooterDirective { }
 
 /**
- * @hidden
+ * Allows the combo's items to be modified with a custom template
+ *
+ * @igxModule IgxComboModule
+ * @igxTheme igx-combo-theme
+ * @igxKeywords combobox, combo selection
+ * @igxGroup Grids & Lists
+ *
+ * @example
+ * <igx-combo>
+ *	<ng-template igxComboItem let-display let-key="valueKey">
+ *		<div class="item">
+ *			<span class="state">State: {{ display[key] }}</span>
+ *	 		<span class="region">Region: {{ display.region }}</span>
+ *	 	</div>
+ *	 </ng-template>
+  * </igx-combo>
  */
 @Directive({ selector: '[igxComboItem]' })
 export class IgxComboItemDirective { }
 
 /**
- * @hidden
+ * Defines the custom template that will be displayed when the combo's list is empty
+ *
+ * @igxModule IgxComboModule
+ * @igxTheme igx-combo-theme
+ * @igxKeywords combobox, combo selection
+ * @igxGroup Grids & Lists
+ *
+ * @example
+ *  <igx-combo>
+ *      <ng-template igxComboEmpty>
+ *          <div class="combo--empty">
+ *              There are no items to display
+ *          </div>
+ *      </ng-template>
+ *  </igx-combo>
  */
 @Directive({ selector: '[igxComboEmpty]' })
 export class IgxComboEmptyDirective { }
 
 /**
- * @hidden
+ * Defines the custom template that will be used when rendering header items for groups in the combo's list
+ *
+ * @igxModule IgxComboModule
+ * @igxTheme igx-combo-theme
+ * @igxKeywords combobox, combo selection
+ * @igxGroup Grids & Lists
+ *
+ * @example
+ *  <igx-combo>
+ *      <ng-template igxComboHeaderItem let-item let-key="groupKey">
+ *          <div class="custom-item--group">Group header for {{ item[key] }}</div>
+ *      </ng-template>
+ *  </igx-combo>
  */
 @Directive({ selector: '[igxComboHeaderItem]' })
 export class IgxComboHeaderItemDirective { }
 
 /**
- * @hidden
+ * Defines the custom template that will be used to display the `ADD` button
+ *
+ * @remarks To show the `ADD` button, the `allowCustomValues` option must be enabled
+ *
+ * @igxModule IgxComboModule
+ * @igxTheme igx-combo-theme
+ * @igxKeywords combobox, combo selection
+ * @igxGroup Grids & Lists
+ *
+ * @example
+ * <igx-combo #combo>
+ *      <ng-template igxComboAddItem>
+ *          <button class="combo__add-button">
+ *              Click to add item
+ *          </button>
+ *      </ng-template>
+ *  </igx-combo>
  */
 @Directive({ selector: '[igxComboAddItem]' })
 export class IgxComboAddItemDirective { }
 
 /**
- * @hidden
+ * The custom template that will be used when rendering the combo's toggle button
+ *
+ * @igxModule IgxComboModule
+ * @igxTheme igx-combo-theme
+ * @igxKeywords combobox, combo selection
+ * @igxGroup Grids & Lists
+ *
+ * @example
+ *  <igx-combo #combo>
+ *      <ng-template igxComboToggleIcon let-collapsed>
+ *          <igx-icon>{{ collapsed ? 'remove_circle' : 'remove_circle_outline'}}</igx-icon>
+ *      </ng-template>
+ *  </igx-combo>
  */
 @Directive({ selector: '[igxComboToggleIcon]' })
 export class IgxComboToggleIconDirective { }
 
 /**
- * @hidden
+ * Defines the custom template that will be used when rendering the combo's clear icon
+ *
+ * @igxModule IgxComboModule
+ * @igxTheme igx-combo-theme
+ * @igxKeywords combobox, combo selection
+ * @igxGroup Grids & Lists
+ *
+ * @example
+ *  <igx-combo #combo>
+ *      <ng-template igxComboClearIcon>
+ *          <igx-icon>clear</igx-icon>
+ *      </ng-template>
+ *  </igx-combo>
  */
 @Directive({ selector: '[igxComboClearIcon]' })
 export class IgxComboClearIconDirective { }
-