Skip to content

Commit

Permalink
Merge pull request #136 from valor-software/development
Browse files Browse the repository at this point in the history
Allow to dispatch fn traits
  • Loading branch information
GulajavaMinistudio authored Dec 17, 2018
2 parents 3ffdb34 + b6e3b62 commit c689d1f
Show file tree
Hide file tree
Showing 13 changed files with 398 additions and 109 deletions.
3 changes: 3 additions & 0 deletions demo/src/app/components/+typeahead/demos/config/config.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<input [(ngModel)]="selected"
[typeahead]="states"
class="form-control">
68 changes: 68 additions & 0 deletions demo/src/app/components/+typeahead/demos/config/config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
import { Component } from '@angular/core';
import { TypeaheadConfig } from 'ngx-bootstrap/typeahead';

// such override allows to keep some initial values
export function getTypeaheadConfig(): TypeaheadConfig {
return Object.assign(new TypeaheadConfig(), { hideResultsOnBlur: false });
}

@Component({
selector: 'demo-typeahead-config',
templateUrl: './config.html',
providers: [{ provide: TypeaheadConfig, useFactory: getTypeaheadConfig }]
})
export class DemoTypeaheadConfigComponent {
selected: string;
states: string[] = [
'Alabama',
'Alaska',
'Arizona',
'Arkansas',
'California',
'Colorado',
'Connecticut',
'Delaware',
'Florida',
'Georgia',
'Hawaii',
'Idaho',
'Illinois',
'Indiana',
'Iowa',
'Kansas',
'Kentucky',
'Louisiana',
'Maine',
'Maryland',
'Massachusetts',
'Michigan',
'Minnesota',
'Mississippi',
'Missouri',
'Montana',
'Nebraska',
'Nevada',
'New Hampshire',
'New Jersey',
'New Mexico',
'New York',
'North Dakota',
'North Carolina',
'Ohio',
'Oklahoma',
'Oregon',
'Pennsylvania',
'Rhode Island',
'South Carolina',
'South Dakota',
'Tennessee',
'Texas',
'Utah',
'Vermont',
'Virginia',
'Washington',
'West Virginia',
'Wisconsin',
'Wyoming'
];
}
111 changes: 26 additions & 85 deletions demo/src/app/components/+typeahead/demos/index.ts
Original file line number Diff line number Diff line change
@@ -1,100 +1,41 @@
import { DemoTypeaheadAsyncComponent } from './async/async';
import { DemoTypeaheadBasicComponent } from './basic/basic';
import { DemoTypeaheadItemTemplateComponent } from './item-template/item-template';
import { DemoTypeaheadConfigComponent } from './config/config';
import { DemoTypeaheadContainerComponent } from './container/container';
import { DemoTypeaheadDelayComponent } from './delay/delay';
import { DemoTypeaheadDropupComponent } from './dropup/dropup';
import { DemoTypeaheadFieldComponent } from './field/field';
import { DemoTypeaheadAsyncComponent } from './async/async';
import { DemoTypeaheadReactiveFormComponent } from './reactive-form/reactive-form';
import { DemoTypeaheadFormComponent } from './form/form';
import { DemoTypeaheadGroupingComponent } from './grouping/grouping';
import { DemoTypeaheadDropupComponent } from './dropup/dropup';
import { DemoTypeaheadScrollableComponent } from './scrollable/scrollable';
import { DemoTypeaheadDelayComponent } from './delay/delay';
import { DemoTypeaheadItemTemplateComponent } from './item-template/item-template';
import { DemoTypeaheadLatinizeComponent } from './latinize/latinize';
import { DemoTypeaheadNoResultComponent } from './no-result/no-result';
import { DemoTypeaheadOnBlurComponent } from './on-blur/on-blur';
import { DemoTypeaheadContainerComponent } from './container/container';
import { DemoTypeaheadSingleWorldComponent } from './single-world/single-world';
import { DemoTypeaheadPhraseDelimitersComponent } from './phrase-delimiters/phrase-delimiters';
import { DemoTypeaheadFormComponent } from './form/form';
import { DemoTypeaheadOnSelectComponent } from './on-select/on-select';
import { DemoTypeaheadPhraseDelimitersComponent } from './phrase-delimiters/phrase-delimiters';
import { DemoTypeaheadReactiveFormComponent } from './reactive-form/reactive-form';
import { DemoTypeaheadScrollableComponent } from './scrollable/scrollable';
import { DemoTypeaheadShowOnBlurComponent } from './show-on-blur/show-on-blur';
import { DemoTypeaheadSingleWorldComponent } from './single-world/single-world';

export const DEMO_COMPONENTS = [
DemoTypeaheadAsyncComponent,
DemoTypeaheadBasicComponent,
DemoTypeaheadItemTemplateComponent,
DemoTypeaheadConfigComponent,
DemoTypeaheadContainerComponent,
DemoTypeaheadDelayComponent,
DemoTypeaheadDropupComponent,
DemoTypeaheadFieldComponent,
DemoTypeaheadAsyncComponent,
DemoTypeaheadReactiveFormComponent,
DemoTypeaheadFormComponent,
DemoTypeaheadGroupingComponent,
DemoTypeaheadSingleWorldComponent,
DemoTypeaheadPhraseDelimitersComponent,
DemoTypeaheadDropupComponent,
DemoTypeaheadScrollableComponent,
DemoTypeaheadDelayComponent,
DemoTypeaheadItemTemplateComponent,
DemoTypeaheadLatinizeComponent,
DemoTypeaheadNoResultComponent,
DemoTypeaheadOnBlurComponent,
DemoTypeaheadLatinizeComponent,
DemoTypeaheadContainerComponent,
DemoTypeaheadFormComponent,
DemoTypeaheadOnSelectComponent
DemoTypeaheadOnSelectComponent,
DemoTypeaheadPhraseDelimitersComponent,
DemoTypeaheadReactiveFormComponent,
DemoTypeaheadScrollableComponent,
DemoTypeaheadShowOnBlurComponent,
DemoTypeaheadSingleWorldComponent
];

export const DEMOS = {
static: {
component: require('!!raw-loader?lang=typescript!./basic/basic.ts'),
html: require('!!raw-loader?lang=markup!./basic/basic.html')
},
itemTemplate: {
component: require('!!raw-loader?lang=typescript!./item-template/item-template.ts'),
html: require('!!raw-loader?lang=markup!./item-template/item-template.html')
},
field: {
component: require('!!raw-loader?lang=typescript!./field/field.ts'),
html: require('!!raw-loader?lang=markup!./field/field.html')
},
async: {
component: require('!!raw-loader?lang=typescript!./async/async.ts'),
html: require('!!raw-loader?lang=markup!./async/async.html')
},
delay: {
component: require('!!raw-loader?lang=typescript!./delay/delay.ts'),
html: require('!!raw-loader?lang=markup!./delay/delay.html')
},
latinize: {
component: require('!!raw-loader?lang=typescript!./latinize/latinize.ts'),
html: require('!!raw-loader?lang=markup!./latinize/latinize.html')
},
form: {
component: require('!!raw-loader?lang=typescript!./form/form.ts'),
html: require('!!raw-loader?lang=markup!./form/form.html')
},
reactiveForm: {
component: require('!!raw-loader?lang=typescript!./reactive-form/reactive-form.ts'),
html: require('!!raw-loader?lang=markup!./reactive-form/reactive-form.html')
},
grouping: {
component: require('!!raw-loader?lang=typescript!./grouping/grouping.ts'),
html: require('!!raw-loader?lang=markup!./grouping/grouping.html')
},
dropup: {
component: require('!!raw-loader?lang=typescript!./dropup/dropup.ts'),
html: require('!!raw-loader?lang=markup!./dropup/dropup.html')
},
noResult: {
component: require('!!raw-loader?lang=typescript!./no-result/no-result.ts'),
html: require('!!raw-loader?lang=markup!./no-result/no-result.html')
},
onBlur: {
component: require('!!raw-loader?lang=typescript!./on-blur/on-blur.ts'),
html: require('!!raw-loader?lang=markup!./on-blur/on-blur.html')
},
container: {
component: require('!!raw-loader?lang=typescript!./container/container.ts'),
html: require('!!raw-loader?lang=markup!./container/container.html')
},
scrollable: {
component: require('!!raw-loader?lang=typescript!./scrollable/scrollable.ts'),
html: require('!!raw-loader?lang=markup!./scrollable/scrollable.html')
},
onSelect: {
component: require('!!raw-loader?lang=typescript!./on-select/on-select.ts'),
html: require('!!raw-loader?lang=markup!./on-select/on-select.html')
}
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<button type="button" class="btn btn-primary mb-3"
(click)="typeaheadHideResultsOnBlur = !typeaheadHideResultsOnBlur">Toggle typeaheadHideResultsOnBlur
</button>
<pre class="card card-block card-header mb-3">
typeaheadHideResultsOnBlur: {{typeaheadHideResultsOnBlur}}
Model: {{selected | json}}
</pre>
<input [(ngModel)]="selected"
[typeahead]="states"
[typeaheadHideResultsOnBlur]="typeaheadHideResultsOnBlur"
class="form-control">
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
import { Component } from '@angular/core';

@Component({
selector: 'demo-typeahead-show-on-blur',
templateUrl: './show-on-blur.html'
})
export class DemoTypeaheadShowOnBlurComponent {
typeaheadHideResultsOnBlur = false;
selected: string;
states = [
'Alabama',
'Alaska',
'Arizona',
'Arkansas',
'California',
'Colorado',
'Connecticut',
'Delaware',
'Florida',
'Georgia',
'Hawaii',
'Idaho',
'Illinois',
'Indiana',
'Iowa',
'Kansas',
'Kentucky',
'Louisiana',
'Maine',
'Maryland',
'Massachusetts',
'Michigan',
'Minnesota',
'Mississippi',
'Missouri',
'Montana',
'Nebraska',
'Nevada',
'New Hampshire',
'New Jersey',
'New Mexico',
'New York',
'North Dakota',
'North Carolina',
'Ohio',
'Oklahoma',
'Oregon',
'Pennsylvania',
'Rhode Island',
'South Carolina',
'South Dakota',
'Tennessee',
'Texas',
'Utah',
'Vermont',
'Virginia',
'Washington',
'West Virginia',
'Wisconsin',
'Wyoming'
];
}
49 changes: 37 additions & 12 deletions demo/src/app/components/+typeahead/typeahead-section.list.ts
Original file line number Diff line number Diff line change
@@ -1,27 +1,29 @@
import { DemoTypeaheadAsyncComponent } from './demos/async/async';
import { DemoTypeaheadBasicComponent } from './demos/basic/basic';
import { DemoTypeaheadItemTemplateComponent } from './demos/item-template/item-template';
import { DemoTypeaheadConfigComponent } from './demos/config/config';
import { DemoTypeaheadContainerComponent } from './demos/container/container';
import { DemoTypeaheadDelayComponent } from './demos/delay/delay';
import { DemoTypeaheadDropupComponent } from './demos/dropup/dropup';
import { DemoTypeaheadFieldComponent } from './demos/field/field';
import { DemoTypeaheadAsyncComponent } from './demos/async/async';
import { DemoTypeaheadReactiveFormComponent } from './demos/reactive-form/reactive-form';
import { DemoTypeaheadFormComponent } from './demos/form/form';
import { DemoTypeaheadGroupingComponent } from './demos/grouping/grouping';
import { DemoTypeaheadDropupComponent } from './demos/dropup/dropup';
import { DemoTypeaheadScrollableComponent } from './demos/scrollable/scrollable';
import { DemoTypeaheadDelayComponent } from './demos/delay/delay';
import { DemoTypeaheadItemTemplateComponent } from './demos/item-template/item-template';
import { DemoTypeaheadLatinizeComponent } from './demos/latinize/latinize';
import { DemoTypeaheadNoResultComponent } from './demos/no-result/no-result';
import { DemoTypeaheadOnBlurComponent } from './demos/on-blur/on-blur';
import { DemoTypeaheadFormComponent } from './demos/form/form';
import { DemoTypeaheadContainerComponent } from './demos/container/container';
import { DemoTypeaheadSingleWorldComponent } from './demos/single-world/single-world';
import { DemoTypeaheadPhraseDelimitersComponent } from './demos/phrase-delimiters/phrase-delimiters';
import { DemoTypeaheadOnSelectComponent } from './demos/on-select/on-select';
import { DemoTypeaheadPhraseDelimitersComponent } from './demos/phrase-delimiters/phrase-delimiters';
import { DemoTypeaheadReactiveFormComponent } from './demos/reactive-form/reactive-form';
import { DemoTypeaheadScrollableComponent } from './demos/scrollable/scrollable';
import { DemoTypeaheadShowOnBlurComponent } from './demos/show-on-blur/show-on-blur';
import { DemoTypeaheadSingleWorldComponent } from './demos/single-world/single-world';

import { ApiSectionsComponent } from '../../docs/demo-section-components/demo-api-section';
import { ContentSection } from '../../docs/models/content-section.model';
import { DemoTopSectionComponent } from '../../docs/demo-section-components/demo-top-section';
import { ExamplesComponent } from '../../docs/demo-section-components/demo-examples-section';
import { ApiSectionsComponent } from '../../docs/demo-section-components/demo-api-section';

import { NgApiDocComponent } from '../../docs/api-docs';
import { NgApiDocComponent, NgApiDocConfigComponent } from '../../docs/api-docs';

export const demoComponentContent: ContentSection[] = [
{
Expand Down Expand Up @@ -195,6 +197,24 @@ export const demoComponentContent: ContentSection[] = [
component: require('!!raw-loader?lang=typescript!./demos/on-select/on-select.ts'),
html: require('!!raw-loader?lang=markup!./demos/on-select/on-select.html'),
outlet: DemoTypeaheadOnSelectComponent
},
{
title: 'Show results on blur',
anchor: 'show-on-blur',
description: `
<p>Use input property <code>typeaheadHideResultsOnBlur</code> or config property <code>hideResultsOnBlur</code>
to prevent hiding typeahead's results until a user doesn't choose an item</p>
`,
component: require('!!raw-loader?lang=typescript!./demos/show-on-blur/show-on-blur.ts'),
html: require('!!raw-loader?lang=markup!./demos/show-on-blur/show-on-blur.html'),
outlet: DemoTypeaheadShowOnBlurComponent
},
{
title: 'Configuring defaults',
anchor: 'configuration',
component: require('!!raw-loader?lang=typescript!./demos/config/config'),
html: require('!!raw-loader?lang=markup!./demos/config/config.html'),
outlet: DemoTypeaheadConfigComponent
}
]
},
Expand All @@ -207,6 +227,11 @@ export const demoComponentContent: ContentSection[] = [
title: 'TypeaheadDirective',
anchor: 'TypeaheadDirective',
outlet: NgApiDocComponent
},
{
title: 'TypeaheadConfig',
anchor: 'bs-typeahead-config',
outlet: NgApiDocConfigComponent
}
]
}
Expand Down
Loading

0 comments on commit c689d1f

Please sign in to comment.