@getflip/swirl-components-angular 0.3.0 → 0.5.0

package/projects/component-library/src/lib/stencil-generated/components.ts

@@ -8,6 +8,25 @@ import { Components } from '@getflip/swirl-components';
 
 
 
+export declare interface FileManager extends Components.FileManager {}
+
+@ProxyCmp({
+  defineCustomElementFn: undefined
+})
+@Component({
+  selector: 'file-manager',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>'
+})
+export class FileManager {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
 export declare interface FlipActionList extends Components.FlipActionList {}
 
 @ProxyCmp({
@@ -68,18 +87,87 @@ export class FlipActionListSection {
   }
 }
 
+import type { FlipAppLayoutMobileView as IFlipAppLayoutFlipAppLayoutMobileView } from '@getflip/swirl-components';
+export declare interface FlipAppLayout extends Components.FlipAppLayout {
+  /**
+   *  
+   */
+  ctaClick: EventEmitter<CustomEvent<MouseEvent>>;
+  /**
+   *  
+   */
+  mobileViewChange: EventEmitter<CustomEvent<IFlipAppLayoutFlipAppLayoutMobileView>>;
+  /**
+   *  
+   */
+  navigationBackButtonClick: EventEmitter<CustomEvent<MouseEvent>>;
+  /**
+   *  
+   */
+  sidebarToggle: EventEmitter<CustomEvent<boolean>>;
+
+}
+
+@ProxyCmp({
+  defineCustomElementFn: undefined,
+  inputs: ['appBarMedia', 'appName', 'backToNavigationViewButtonLabel', 'ctaIcon', 'ctaLabel', 'heading', 'navigationBackButtonLabel', 'navigationLabel', 'showNavigationBackButton', 'sidebarCloseButtonLabel', 'sidebarHeading', 'subheading', 'transitionStyle'],
+  methods: ['showSidebar', 'hideSidebar', 'toggleSidebar', 'changeMobileView']
+})
+@Component({
+  selector: 'flip-app-layout',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  inputs: ['appBarMedia', 'appName', 'backToNavigationViewButtonLabel', 'ctaIcon', 'ctaLabel', 'heading', 'navigationBackButtonLabel', 'navigationLabel', 'showNavigationBackButton', 'sidebarCloseButtonLabel', 'sidebarHeading', 'subheading', 'transitionStyle']
+})
+export class FlipAppLayout {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+    proxyOutputs(this, this.el, ['ctaClick', 'mobileViewChange', 'navigationBackButtonClick', 'sidebarToggle']);
+  }
+}
+
+
+export declare interface FlipAutocomplete extends Components.FlipAutocomplete {
+  /**
+   *  
+   */
+  valueChange: EventEmitter<CustomEvent<string>>;
+
+}
+
+@ProxyCmp({
+  defineCustomElementFn: undefined,
+  inputs: ['autoSelect', 'clearButtonLabel', 'clearable', 'disabled', 'flipAriaDescribedby', 'generateSuggestions', 'invalid', 'maxLength', 'menuLabel', 'mode', 'required', 'spellCheck', 'value']
+})
+@Component({
+  selector: 'flip-autocomplete',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  inputs: ['autoSelect', 'clearButtonLabel', 'clearable', 'disabled', 'flipAriaDescribedby', 'generateSuggestions', 'invalid', 'maxLength', 'menuLabel', 'mode', 'required', 'spellCheck', 'value']
+})
+export class FlipAutocomplete {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+    proxyOutputs(this, this.el, ['valueChange']);
+  }
+}
+
 
 export declare interface FlipAvatar extends Components.FlipAvatar {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['badge', 'badgePosition', 'icon', 'initials', 'interactive', 'label', 'showLabel', 'size', 'src', 'variant']
+  inputs: ['badge', 'badgePosition', 'color', 'icon', 'initials', 'interactive', 'label', 'showLabel', 'size', 'src', 'variant']
 })
 @Component({
   selector: 'flip-avatar',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['badge', 'badgePosition', 'icon', 'initials', 'interactive', 'label', 'showLabel', 'size', 'src', 'variant']
+  inputs: ['badge', 'badgePosition', 'color', 'icon', 'initials', 'interactive', 'label', 'showLabel', 'size', 'src', 'variant']
 })
 export class FlipAvatar {
   protected el: HTMLElement;
@@ -164,6 +252,27 @@ export class FlipBanner {
 }
 
 
+export declare interface FlipBox extends Components.FlipBox {}
+
+@ProxyCmp({
+  defineCustomElementFn: undefined,
+  inputs: ['as', 'bordered', 'centerBlock', 'centerInline', 'cover', 'padding']
+})
+@Component({
+  selector: 'flip-box',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  inputs: ['as', 'bordered', 'centerBlock', 'centerInline', 'cover', 'padding']
+})
+export class FlipBox {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
 export declare interface FlipButton extends Components.FlipButton {}
 
 @ProxyCmp({
@@ -255,6 +364,38 @@ export class FlipChip {
 }
 
 
+export declare interface FlipConsoleLayout extends Components.FlipConsoleLayout {
+  /**
+   *  
+   */
+  backButtonClick: EventEmitter<CustomEvent<MouseEvent>>;
+  /**
+   *  
+   */
+  helpButtonClick: EventEmitter<CustomEvent<MouseEvent>>;
+
+}
+
+@ProxyCmp({
+  defineCustomElementFn: undefined,
+  inputs: ['appName', 'backButonLabel', 'heading', 'helpButonLabel', 'logoText', 'navigationLabel', 'showBackButton', 'showHelpButton', 'subheading']
+})
+@Component({
+  selector: 'flip-console-layout',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  inputs: ['appName', 'backButonLabel', 'heading', 'helpButonLabel', 'logoText', 'navigationLabel', 'showBackButton', 'showHelpButton', 'subheading']
+})
+export class FlipConsoleLayout {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+    proxyOutputs(this, this.el, ['backButtonClick', 'helpButtonClick']);
+  }
+}
+
+
 export declare interface FlipDateInput extends Components.FlipDateInput {
   /**
    *  
@@ -434,50 +575,70 @@ export class FlipFileUploader {
 }
 
 
-export declare interface FlipFileViewer extends Components.FlipFileViewer {}
+export declare interface FlipFileViewer extends Components.FlipFileViewer {
+  /**
+   *  
+   */
+  activate: EventEmitter<CustomEvent<HTMLElement>>;
+
+}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['active', 'description', 'errorMessage', 'file', 'type', 'typeUnsupportedMessage', 'zoom'],
+  inputs: ['active', 'autoplay', 'description', 'errorMessage', 'file', 'type', 'typeUnsupportedMessage', 'zoom'],
   methods: ['download', 'print']
 })
 @Component({
   selector: 'flip-file-viewer',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['active', 'description', 'errorMessage', 'file', 'type', 'typeUnsupportedMessage', 'zoom']
+  inputs: ['active', 'autoplay', 'description', 'errorMessage', 'file', 'type', 'typeUnsupportedMessage', 'zoom']
 })
 export class FlipFileViewer {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
+    proxyOutputs(this, this.el, ['activate']);
   }
 }
 
 
-export declare interface FlipFileViewerAudio extends Components.FlipFileViewerAudio {}
+export declare interface FlipFileViewerAudio extends Components.FlipFileViewerAudio {
+  /**
+   *  
+   */
+  activate: EventEmitter<CustomEvent<HTMLElement>>;
+
+}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['file', 'type']
+  inputs: ['autoplay', 'file', 'type']
 })
 @Component({
   selector: 'flip-file-viewer-audio',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['file', 'type']
+  inputs: ['autoplay', 'file', 'type']
 })
 export class FlipFileViewerAudio {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
+    proxyOutputs(this, this.el, ['activate']);
   }
 }
 
 
-export declare interface FlipFileViewerCsv extends Components.FlipFileViewerCsv {}
+export declare interface FlipFileViewerCsv extends Components.FlipFileViewerCsv {
+  /**
+   *  
+   */
+  activate: EventEmitter<CustomEvent<HTMLElement>>;
+
+}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
@@ -494,11 +655,18 @@ export class FlipFileViewerCsv {
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
+    proxyOutputs(this, this.el, ['activate']);
   }
 }
 
 
-export declare interface FlipFileViewerImage extends Components.FlipFileViewerImage {}
+export declare interface FlipFileViewerImage extends Components.FlipFileViewerImage {
+  /**
+   *  
+   */
+  activate: EventEmitter<CustomEvent<HTMLElement>>;
+
+}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
@@ -515,33 +683,47 @@ export class FlipFileViewerImage {
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
+    proxyOutputs(this, this.el, ['activate']);
   }
 }
 
 
-export declare interface FlipFileViewerPdf extends Components.FlipFileViewerPdf {}
+export declare interface FlipFileViewerPdf extends Components.FlipFileViewerPdf {
+  /**
+   *  
+   */
+  activate: EventEmitter<CustomEvent<HTMLElement>>;
+
+}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['errorMessage', 'file', 'zoom'],
-  methods: ['print']
+  inputs: ['errorMessage', 'file', 'singlePageMode', 'zoom'],
+  methods: ['print', 'nextPage', 'previousPage', 'setPage']
 })
 @Component({
   selector: 'flip-file-viewer-pdf',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['errorMessage', 'file', 'zoom']
+  inputs: ['errorMessage', 'file', 'singlePageMode', 'zoom']
 })
 export class FlipFileViewerPdf {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
+    proxyOutputs(this, this.el, ['activate']);
   }
 }
 
 
-export declare interface FlipFileViewerText extends Components.FlipFileViewerText {}
+export declare interface FlipFileViewerText extends Components.FlipFileViewerText {
+  /**
+   *  
+   */
+  activate: EventEmitter<CustomEvent<HTMLElement>>;
+
+}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
@@ -558,27 +740,35 @@ export class FlipFileViewerText {
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
+    proxyOutputs(this, this.el, ['activate']);
   }
 }
 
 
-export declare interface FlipFileViewerVideo extends Components.FlipFileViewerVideo {}
+export declare interface FlipFileViewerVideo extends Components.FlipFileViewerVideo {
+  /**
+   *  
+   */
+  activate: EventEmitter<CustomEvent<HTMLElement>>;
+
+}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['file', 'type']
+  inputs: ['autoplay', 'file', 'type']
 })
 @Component({
   selector: 'flip-file-viewer-video',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['file', 'type']
+  inputs: ['autoplay', 'file', 'type']
 })
 export class FlipFileViewerVideo {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
+    proxyOutputs(this, this.el, ['activate']);
   }
 }
 
@@ -1465,6 +1655,27 @@ export class FlipIconGroupsCustom {
 }
 
 
+export declare interface FlipIconHelp extends Components.FlipIconHelp {}
+
+@ProxyCmp({
+  defineCustomElementFn: undefined,
+  inputs: ['size']
+})
+@Component({
+  selector: 'flip-icon-help',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  inputs: ['size']
+})
+export class FlipIconHelp {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
 export declare interface FlipIconImage extends Components.FlipIconImage {}
 
 @ProxyCmp({
@@ -2326,6 +2537,14 @@ export class FlipList {
 
 
 export declare interface FlipModal extends Components.FlipModal {
+  /**
+   *  
+   */
+  modalClose: EventEmitter<CustomEvent<void>>;
+  /**
+   *  
+   */
+  modalOpen: EventEmitter<CustomEvent<void>>;
   /**
    *  
    */
@@ -2353,7 +2572,7 @@ export class FlipModal {
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
-    proxyOutputs(this, this.el, ['primaryAction', 'secondaryAction']);
+    proxyOutputs(this, this.el, ['modalClose', 'modalOpen', 'primaryAction', 'secondaryAction']);
   }
 }
 
@@ -2368,13 +2587,13 @@ export declare interface FlipOptionList extends Components.FlipOptionList {
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['disabled', 'label', 'multiSelect', 'value']
+  inputs: ['disabled', 'label', 'multiSelect', 'optionListId', 'value']
 })
 @Component({
   selector: 'flip-option-list',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['disabled', 'label', 'multiSelect', 'value']
+  inputs: ['disabled', 'label', 'multiSelect', 'optionListId', 'value']
 })
 export class FlipOptionList {
   protected el: HTMLElement;
@@ -2456,24 +2675,57 @@ export class FlipPagination {
 }
 
 
-export declare interface FlipPopover extends Components.FlipPopover {}
+export declare interface FlipPdfReader extends Components.FlipPdfReader {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['label', 'placement', 'popoverId', 'trigger'],
+  inputs: ['autoZoomLabel', 'closeButtonLabel', 'downloadButtonLabel', 'file', 'label', 'printButtonLabel', 'zoomInButtonLabel', 'zoomOutButtonLabel', 'zoomSelectLabel'],
+  methods: ['open', 'close']
+})
+@Component({
+  selector: 'flip-pdf-reader',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  inputs: ['autoZoomLabel', 'closeButtonLabel', 'downloadButtonLabel', 'file', 'label', 'printButtonLabel', 'zoomInButtonLabel', 'zoomOutButtonLabel', 'zoomSelectLabel']
+})
+export class FlipPdfReader {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface FlipPopover extends Components.FlipPopover {
+  /**
+   *  
+   */
+  popoverClose: EventEmitter<CustomEvent<void>>;
+  /**
+   *  
+   */
+  popoverOpen: EventEmitter<CustomEvent<void>>;
+
+}
+
+@ProxyCmp({
+  defineCustomElementFn: undefined,
+  inputs: ['animation', 'enableFlip', 'label', 'offset', 'placement', 'popoverId', 'trigger', 'useContainerWidth'],
   methods: ['close', 'open']
 })
 @Component({
   selector: 'flip-popover',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['label', 'placement', 'popoverId', 'trigger']
+  inputs: ['animation', 'enableFlip', 'label', 'offset', 'placement', 'popoverId', 'trigger', 'useContainerWidth']
 })
 export class FlipPopover {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
+    proxyOutputs(this, this.el, ['popoverClose', 'popoverOpen']);
   }
 }
 
@@ -2668,6 +2920,34 @@ export class FlipSearch {
 }
 
 
+export declare interface FlipSelect extends Components.FlipSelect {
+  /**
+   *  
+   */
+  valueChange: EventEmitter<CustomEvent<string[]>>;
+
+}
+
+@ProxyCmp({
+  defineCustomElementFn: undefined,
+  inputs: ['disabled', 'flipAriaDescribedby', 'invalid', 'label', 'multiSelect', 'required', 'value']
+})
+@Component({
+  selector: 'flip-select',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  inputs: ['disabled', 'flipAriaDescribedby', 'invalid', 'label', 'multiSelect', 'required', 'value']
+})
+export class FlipSelect {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+    proxyOutputs(this, this.el, ['valueChange']);
+  }
+}
+
+
 export declare interface FlipSpinner extends Components.FlipSpinner {}
 
 @ProxyCmp({
@@ -2838,6 +3118,14 @@ export class FlipText {
 
 
 export declare interface FlipTextInput extends Components.FlipTextInput {
+  /**
+   *  
+   */
+  inputBlur: EventEmitter<CustomEvent<FocusEvent>>;
+  /**
+   *  
+   */
+  inputFocus: EventEmitter<CustomEvent<FocusEvent>>;
   /**
    *  
    */
@@ -2847,20 +3135,20 @@ export declare interface FlipTextInput extends Components.FlipTextInput {
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['autoComplete', 'autoFocus', 'autoSelect', 'clearButtonLabel', 'clearable', 'disabled', 'flipAriaDescribedby', 'invalid', 'max', 'maxLength', 'min', 'mode', 'passwordToggleLabel', 'prefixLabel', 'required', 'rows', 'showCharacterCounter', 'spellCheck', 'step', 'suffixLabel', 'type', 'value']
+  inputs: ['autoComplete', 'autoFocus', 'autoSelect', 'clearButtonLabel', 'clearable', 'disableDynamicWidth', 'disabled', 'flipAriaAutocomplete', 'flipAriaControls', 'flipAriaDescribedby', 'flipAriaExpanded', 'flipRole', 'invalid', 'max', 'maxLength', 'min', 'mode', 'passwordToggleLabel', 'prefixLabel', 'required', 'rows', 'showCharacterCounter', 'spellCheck', 'step', 'suffixLabel', 'type', 'value']
 })
 @Component({
   selector: 'flip-text-input',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['autoComplete', 'autoFocus', 'autoSelect', 'clearButtonLabel', 'clearable', 'disabled', 'flipAriaDescribedby', 'invalid', 'max', 'maxLength', 'min', 'mode', 'passwordToggleLabel', 'prefixLabel', 'required', 'rows', 'showCharacterCounter', 'spellCheck', 'step', 'suffixLabel', 'type', 'value']
+  inputs: ['autoComplete', 'autoFocus', 'autoSelect', 'clearButtonLabel', 'clearable', 'disableDynamicWidth', 'disabled', 'flipAriaAutocomplete', 'flipAriaControls', 'flipAriaDescribedby', 'flipAriaExpanded', 'flipRole', 'invalid', 'max', 'maxLength', 'min', 'mode', 'passwordToggleLabel', 'prefixLabel', 'required', 'rows', 'showCharacterCounter', 'spellCheck', 'step', 'suffixLabel', 'type', 'value']
 })
 export class FlipTextInput {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
-    proxyOutputs(this, this.el, ['valueChange']);
+    proxyOutputs(this, this.el, ['inputBlur', 'inputFocus', 'valueChange']);
   }
 }
 

package/projects/component-library/src/lib/stencil-generated/index.ts

@@ -2,17 +2,22 @@
 import * as d from './components';
 
 export const DIRECTIVES = [
+  d.FileManager,
   d.FlipActionList,
   d.FlipActionListItem,
   d.FlipActionListSection,
+  d.FlipAppLayout,
+  d.FlipAutocomplete,
   d.FlipAvatar,
   d.FlipAvatarGroup,
   d.FlipBadge,
   d.FlipBanner,
+  d.FlipBox,
   d.FlipButton,
   d.FlipButtonGroup,
   d.FlipCheckbox,
   d.FlipChip,
+  d.FlipConsoleLayout,
   d.FlipDateInput,
   d.FlipDatePicker,
   d.FlipDescriptionList,
@@ -69,6 +74,7 @@ export const DIRECTIVES = [
   d.FlipIconGroupAssign,
   d.FlipIconGroups,
   d.FlipIconGroupsCustom,
+  d.FlipIconHelp,
   d.FlipIconImage,
   d.FlipIconInfo,
   d.FlipIconInventory,
@@ -115,6 +121,7 @@ export const DIRECTIVES = [
   d.FlipOptionListItem,
   d.FlipOptionListSection,
   d.FlipPagination,
+  d.FlipPdfReader,
   d.FlipPopover,
   d.FlipProgressIndicator,
   d.FlipRadio,
@@ -123,6 +130,7 @@ export const DIRECTIVES = [
   d.FlipResourceListFileItem,
   d.FlipResourceListItem,
   d.FlipSearch,
+  d.FlipSelect,
   d.FlipSpinner,
   d.FlipStack,
   d.FlipSwitch,

package/projects/component-library/src/lib/stencil-generated/select-value-accessor.ts

@@ -5,7 +5,7 @@ import { ValueAccessor } from './value-accessor';
 
 @Directive({
   /* tslint:disable-next-line:directive-selector */
-  selector: 'flip-option-list',
+  selector: 'flip-option-list, flip-select',
   host: {
     '(valueChange)': 'handleChangeEvent($event.target.value)'
   },