From fe77228492477b0be44c510794e32e627ab3c0f5 Mon Sep 17 00:00:00 2001 From: Ed Carroll Date: Wed, 29 Mar 2017 17:22:19 +0100 Subject: [PATCH 1/7] Fixes #52 --- components/select/select.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/components/select/select.ts b/components/select/select.ts index 701a4a032..e1a2a77a9 100644 --- a/components/select/select.ts +++ b/components/select/select.ts @@ -78,8 +78,6 @@ export class SuiSelect extends SuiSelectBase { this.searchService.updateQueryDelayed(""); this.drawSelectedOption(); - // Adds the active property to the items. - this.onAvailableOptionsRendered(); // Automatically refocus the search input for better keyboard accessibility. this.focusInput(); @@ -97,6 +95,7 @@ export class SuiSelect extends SuiSelectBase { (this.searchService.itemLookup(value) as Promise) .then(r => { this.selectedOption = r; + this.drawSelectedOption(); }); return; @@ -119,6 +118,9 @@ export class SuiSelect extends SuiSelectBase { } private drawSelectedOption() { + // Updates the active class on the newly selected option. + this.onAvailableOptionsRendered(); + if (this.selectedOption && this.optionTemplate) { this.drawTemplate(this._optionTemplateSibling, this.selectedOption); } From 0a7c96e33e578f5562db4e6ba2bb2621f15eb481 Mon Sep 17 00:00:00 2001 From: Ed Carroll Date: Sat, 1 Apr 2017 00:36:43 +0100 Subject: [PATCH 2/7] Started to make demo aot compatible --- .../src/app/pages/accordion/accordion.page.ts | 106 +++++----- demo/src/app/pages/checkbox/checkbox.page.ts | 162 +++++++------- demo/src/app/pages/collapse/collapse.page.ts | 48 +++-- demo/src/app/pages/dimmer/dimmer.page.ts | 68 +++--- demo/src/app/pages/dropdown/dropdown.page.ts | 124 +++++------ demo/src/app/pages/message/message.page.ts | 54 ++--- demo/src/app/pages/popup/popup.page.ts | 66 +++--- demo/src/app/pages/progress/progress.page.ts | 90 ++++---- demo/src/app/pages/rating/rating.page.ts | 68 +++--- demo/src/app/pages/search/search.page.ts | 38 ++-- demo/src/app/pages/select/select.page.ts | 198 ++++++++++-------- demo/src/app/pages/sidebar/sidebar.page.ts | 94 +++++---- demo/src/app/pages/tabs/tabs.page.ts | 130 ++++++------ .../app/pages/transition/transition.page.ts | 30 +-- 14 files changed, 672 insertions(+), 604 deletions(-) diff --git a/demo/src/app/pages/accordion/accordion.page.ts b/demo/src/app/pages/accordion/accordion.page.ts index ea4ca0aa8..9563082cc 100644 --- a/demo/src/app/pages/accordion/accordion.page.ts +++ b/demo/src/app/pages/accordion/accordion.page.ts @@ -1,49 +1,6 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; -@Component({ - selector: 'demo-page-accordion', - templateUrl: './accordion.page.html' -}) -export class AccordionPage { - public api = [ - { - selector: '', - properties: [ - { - name: "closeOthers", - description: "Limits the number of open panels to 1 when true.", - defaultValue: "true" - }, - { - name: "transitionDuration", - description: "Duration for the accordion animations.", - defaultValue: "350" - } - ] - }, - { - selector: '', - properties: [ - { - name: "isOpen", - description: "Sets whether or not the panel is open.", - defaultValue: "false" - }, - { - name: "isDisabled", - description: "Sets whether or not the panel is disabled (locks current state).", - defaultValue: "false" - } - ], - events: [ - { - name: "isOpenChange", - description: "Fires whenever the panel is toggled. [(isOpen)] syntax is supported." - } - ] - } - ]; - public exampleStandardTemplate:string = ` +const exampleStandardTemplate = `
@@ -76,7 +33,8 @@ export class AccordionPage { `; - public exampleStyledTemplate:string = ` + +const exampleStyledTemplate = `
@@ -97,20 +55,66 @@ export class AccordionPage {
-`; +` + +@Component({ + selector: 'demo-page-accordion', + templateUrl: './accordion.page.html' +}) +export class AccordionPage { + public api = [ + { + selector: '', + properties: [ + { + name: "closeOthers", + description: "Limits the number of open panels to 1 when true.", + defaultValue: "true" + }, + { + name: "transitionDuration", + description: "Duration for the accordion animations.", + defaultValue: "350" + } + ] + }, + { + selector: '', + properties: [ + { + name: "isOpen", + description: "Sets whether or not the panel is open.", + defaultValue: "false" + }, + { + name: "isDisabled", + description: "Sets whether or not the panel is disabled (locks current state).", + defaultValue: "false" + } + ], + events: [ + { + name: "isOpenChange", + description: "Fires whenever the panel is toggled. [(isOpen)] syntax is supported." + } + ] + } + ]; + public exampleStandardTemplate = exampleStandardTemplate; + public exampleStyledTemplate = exampleStyledTemplate; } @Component({ selector: 'accordion-example-standard', - template: new AccordionPage().exampleStandardTemplate + template: exampleStandardTemplate }) -export class AccordionExampleStandard { } +export class AccordionExampleStandard {} @Component({ selector: 'accordion-example-styled', - template: new AccordionPage().exampleStyledTemplate + template: exampleStyledTemplate }) -export class AccordionExampleStyled { } +export class AccordionExampleStyled {} export const AccordionPageComponents = [AccordionPage, AccordionExampleStandard, AccordionExampleStyled]; diff --git a/demo/src/app/pages/checkbox/checkbox.page.ts b/demo/src/app/pages/checkbox/checkbox.page.ts index daa621f4d..708d5fe33 100644 --- a/demo/src/app/pages/checkbox/checkbox.page.ts +++ b/demo/src/app/pages/checkbox/checkbox.page.ts @@ -1,8 +1,82 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; + +const exampleStandardTemplate = ` +
+
+ +
+ + An example checkbox + +
+
+ 1st checkbox disabled? +
+
+ 1st checkbox read-only? +
+
+ Mirrors value of 1st checkbox +
+
+
+`; + +const exampleRadioButtonTemplate = ` +
+
+ +
+ Value: "hello" +
+
+ Value: "world" +
+
+ Value: "example" +
+
+ + Value: {{ '{' }} example: "object" } + +
+
+
+

The currently selected value is {{ eRadio | json }}

+`; + +const exampleStyledTemplate = ` +
+
+ +
+ Slider checkbox +
+
+ Toggle checkbox +
+
+
+
+
+ +
+ + Slider radio button + +
+
+ + Toggle radio button + +
+
+
+`; @Component({ - selector: 'demo-page-checkbox', - templateUrl: './checkbox.page.html', + selector: 'demo-page-checkbox', + templateUrl: './checkbox.page.html', }) export class CheckboxPage { public api = [ @@ -78,80 +152,14 @@ export class CheckboxPage { ] } ]; - public exampleStandardTemplate:string = ` -
-
- -
- - An example checkbox - -
-
- 1st checkbox disabled? -
-
- 1st checkbox read-only? -
-
- Mirrors value of 1st checkbox -
-
-
`; - public exampleRadioButtonTemplate:string = ` -
-
- -
- Value: "hello" -
-
- Value: "world" -
-
- Value: "example" -
-
- - Value: {{ '{' }} example: "object" } - -
-
-
-

The currently selected value is {{ eRadio | json }}

-`; - public exampleStyledTemplate:string = ` -
-
- -
- Slider checkbox -
-
- Toggle checkbox -
-
-
-
-
- -
- - Slider radio button - -
-
- - Toggle radio button - -
-
-
`; + public exampleStandardTemplate = exampleStandardTemplate; + public exampleRadioButtonTemplate = exampleRadioButtonTemplate; + public exampleStyledTemplate = exampleStyledTemplate; } @Component({ selector: 'checkbox-example-standard', - template: new CheckboxPage().exampleStandardTemplate + template: exampleStandardTemplate }) export class CheckboxExampleStandard { public eCheck:boolean = true; @@ -159,7 +167,7 @@ export class CheckboxExampleStandard { @Component({ selector: 'checkbox-example-radio-button', - template: new CheckboxPage().exampleRadioButtonTemplate + template: exampleRadioButtonTemplate }) export class CheckboxExampleRadioButton { public eRadio:any = "world"; @@ -167,8 +175,8 @@ export class CheckboxExampleRadioButton { @Component({ selector: 'checkbox-example-styled', - template: new CheckboxPage().exampleStyledTemplate + template: exampleStyledTemplate }) -export class CheckboxExampleStyled { } +export class CheckboxExampleStyled {} -export const CheckboxPageComponents:Array = [CheckboxPage, CheckboxExampleStandard, CheckboxExampleRadioButton, CheckboxExampleStyled]; +export const CheckboxPageComponents = [CheckboxPage, CheckboxExampleStandard, CheckboxExampleRadioButton, CheckboxExampleStyled]; diff --git a/demo/src/app/pages/collapse/collapse.page.ts b/demo/src/app/pages/collapse/collapse.page.ts index 46afcb1ed..9047680e2 100644 --- a/demo/src/app/pages/collapse/collapse.page.ts +++ b/demo/src/app/pages/collapse/collapse.page.ts @@ -1,8 +1,26 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; + +const exampleStandardTemplate = ` +
+
+ +
+
+
+
+

Collapsible Panel

+

Content of the panel.

+
+
+
+
+`; @Component({ - selector: 'demo-page-collapse', - templateUrl: './collapse.page.html' + selector: 'demo-page-collapse', + templateUrl: './collapse.page.html' }) export class CollapsePage { public api = [ @@ -22,32 +40,16 @@ export class CollapsePage { ] } ]; - public exampleStandardTemplate:string = ` -
-
- -
-
-
-
-

Collapsible Panel

-

Content of the panel.

-
-
-
-
-`; - public polyfillCode:string = ``; + public exampleStandardTemplate = exampleStandardTemplate; + public polyfillCode = ``; } @Component({ selector: 'collapse-example-standard', - template: new CollapsePage().exampleStandardTemplate + template: exampleStandardTemplate }) export class CollapseExampleStandard { private collapse:boolean = false; } -export const CollapsePageComponents:Array = [CollapsePage, CollapseExampleStandard]; +export const CollapsePageComponents = [CollapsePage, CollapseExampleStandard]; diff --git a/demo/src/app/pages/dimmer/dimmer.page.ts b/demo/src/app/pages/dimmer/dimmer.page.ts index 8d0542c9f..b5af5257d 100644 --- a/demo/src/app/pages/dimmer/dimmer.page.ts +++ b/demo/src/app/pages/dimmer/dimmer.page.ts @@ -1,4 +1,34 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; + +const exampleStandardTemplate = ` +
+

Example segment

+ +

I can have content too!

+ +

Some random content for the example segment.

+

Some more content!.

+
+ +Click to close? +`; + +const exampleVariationsTemplate = ` +
+ +

+ + The page has been dimmed! +

+ + +
Enables loading screens!
+ +

Page dimmers and inverted dimmers are possible!

+ + +
+`; @Component({ selector: 'demo-page-dimmer', @@ -28,39 +58,13 @@ export class DimmerPage { ] } ]; - public exampleStandardTemplate:string = ` -
-

Example segment

- -

I can have content too!

- -

Some random content for the example segment.

-

Some more content!.

-
- -Click to close? -`; - public exampleVariationsTemplate:string = ` -
- -

- - The page has been dimmed! -

- - -
Enables loading screens!
- -

Page dimmers and inverted dimmers are possible!

- - -
-`; + public exampleStandardTemplate = exampleStandardTemplate; + public exampleVariationsTemplate = exampleVariationsTemplate; } @Component({ selector: 'dimmer-example-standard', - template: new DimmerPage().exampleStandardTemplate + template: exampleStandardTemplate }) export class DimmerExampleStandard { public isClickable:boolean = true; @@ -68,10 +72,10 @@ export class DimmerExampleStandard { @Component({ selector: 'dimmer-example-variations', - template: new DimmerPage().exampleVariationsTemplate + template: exampleVariationsTemplate }) export class DimmerExampleVariations { public isClickable:boolean = true; } -export const DimmerPageComponents:Array = [DimmerPage, DimmerExampleStandard, DimmerExampleVariations]; +export const DimmerPageComponents = [DimmerPage, DimmerExampleStandard, DimmerExampleVariations]; diff --git a/demo/src/app/pages/dropdown/dropdown.page.ts b/demo/src/app/pages/dropdown/dropdown.page.ts index 0f2f55068..0a9a9a103 100644 --- a/demo/src/app/pages/dropdown/dropdown.page.ts +++ b/demo/src/app/pages/dropdown/dropdown.page.ts @@ -1,8 +1,62 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; + +const exampleStandardTemplate = ` +

You can use the keyboard to navigate the dropdown.

+
+
Dropdown
+ +
+
Item 1
+
Disabled Item
+
+ + Nested +
+
Sub-item 1
+
Sub-item 2
+
+
+
Item 4
+
+
+ +Disabled? +`; + +const exampleStyledTemplate = ` +

(autoClose set to disabled)

+
+
Pointing
+ +
+
Item 1
+
Item 2
+
+
+
+ Right + +
+
Item 1
+
Item 2
+
+
+
+

(autoClose set to outsideClick)

+
+
Floating
+ +
+
Item 1
+
Item 2
+
+
+
+`; @Component({ - selector: 'demo-page-dropdown', - templateUrl: './dropdown.page.html' + selector: 'demo-page-dropdown', + templateUrl: './dropdown.page.html' }) export class DropdownPage { public api = [ @@ -53,70 +107,20 @@ export class DropdownPage { ] } ]; - public exampleStandardTemplate:string = ` -

You can use the keyboard to navigate the dropdown.

-
-
Dropdown
- -
-
Item 1
-
Disabled Item
-
- - Nested -
-
Sub-item 1
-
Sub-item 2
-
-
-
Item 4
-
-
- -Disabled? -`; - public exampleStyledTemplate:string = ` -

(autoClose set to disabled)

-
-
Pointing
- -
-
Item 1
-
Item 2
-
-
-
- Right - -
-
Item 1
-
Item 2
-
-
-
-

(autoClose set to outsideClick)

-
-
Floating
- -
-
Item 1
-
Item 2
-
-
-
-`; + public exampleStandardTemplate = exampleStandardTemplate; + public exampleStyledTemplate = exampleStyledTemplate; } @Component({ selector: 'dropdown-example-standard', - template: new DropdownPage().exampleStandardTemplate + template: exampleStandardTemplate }) -export class DropdownExampleStandard { } +export class DropdownExampleStandard {} @Component({ selector: 'dropdown-example-styled', - template: new DropdownPage().exampleStyledTemplate + template: exampleStyledTemplate }) -export class DropdownExampleStyled { } +export class DropdownExampleStyled {} -export const DropdownPageComponents:Array = [DropdownPage, DropdownExampleStandard, DropdownExampleStyled]; +export const DropdownPageComponents = [DropdownPage, DropdownExampleStandard, DropdownExampleStyled]; diff --git a/demo/src/app/pages/message/message.page.ts b/demo/src/app/pages/message/message.page.ts index b308d1655..ce12fec6f 100644 --- a/demo/src/app/pages/message/message.page.ts +++ b/demo/src/app/pages/message/message.page.ts @@ -1,8 +1,29 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; + +const exampleStandardTemplate = ` + +
+ This is a message! +
+

This message can be styled (as shown) and dismissed with the close icon in the top right.

+ +`; + +const exampleNoDismissTemplate = ` + +
+ Attached message! +
+

This message isn't dismissible.

+ +
+

Example content

+
+`; @Component({ - selector: 'demo-page-message', - templateUrl: './message.page.html' + selector: 'demo-page-message', + templateUrl: './message.page.html' }) export class MessagePage { public api = [ @@ -23,37 +44,20 @@ export class MessagePage { ] } ]; - public exampleStandardTemplate:string = ` - -
- This is a message! -
-

This message can be styled (as shown) and dismissed with the close icon in the top right.

- -`; - public exampleNoDismissTemplate:string = ` - -
- Attached message! -
-

This message isn't dismissible.

- -
-

Example content

-
-`; + public exampleStandardTemplate = exampleStandardTemplate; + public exampleNoDismissTemplate = exampleNoDismissTemplate; } @Component({ selector: 'message-example-standard', - template: new MessagePage().exampleStandardTemplate + template: exampleStandardTemplate }) export class MessageExampleStandard {} @Component({ selector: 'message-example-no-dismiss', - template: new MessagePage().exampleNoDismissTemplate + template: exampleNoDismissTemplate }) export class MessageExampleNoDismiss {} -export const MessagePageComponents:Array = [MessagePage, MessageExampleStandard, MessageExampleNoDismiss]; +export const MessagePageComponents = [MessagePage, MessageExampleStandard, MessageExampleNoDismiss]; diff --git a/demo/src/app/pages/popup/popup.page.ts b/demo/src/app/pages/popup/popup.page.ts index bca947cd6..a029a73be 100644 --- a/demo/src/app/pages/popup/popup.page.ts +++ b/demo/src/app/pages/popup/popup.page.ts @@ -1,5 +1,34 @@ import {Component, Input} from '@angular/core'; +const exampleStandardTemplate = ` + +`; + +const exampleTemplateTemplate = ` + +
Rating
+
+ +
+ + +`; + +const examplePlacementTemplate = ` +
+
+
Positioning
+
+ Popup placement can be anywhere around the content. +
+
+
+`; + @Component({ selector: 'demo-page-popup', templateUrl: './popup.page.html' @@ -56,34 +85,9 @@ export class PopupPage { } ]; - public exampleStandardTemplate = ` - -`; - - public exampleTemplateTemplate = ` - -
Rating
-
- -
- - -`; - - public examplePlacementTemplate = ` -
-
-
Positioning
-
- Popup placement can be anywhere around the content. -
-
-
-`; + public exampleStandardTemplate = exampleStandardTemplate; + public exampleTemplateTemplate = exampleTemplateTemplate; + public examplePlacementTemplate = examplePlacementTemplate; public placements = [ "top left", @@ -105,19 +109,19 @@ export class PopupPage { @Component({ selector: 'popup-example-standard', - template: new PopupPage().exampleStandardTemplate + template: exampleStandardTemplate }) export class PopupExampleStandard {} @Component({ selector: 'popup-example-template', - template: new PopupPage().exampleTemplateTemplate + template: exampleTemplateTemplate }) export class PopupExampleTemplate {} @Component({ selector: 'popup-example-placement', - template: new PopupPage().examplePlacementTemplate + template: examplePlacementTemplate }) export class PopupExamplePlacement { @Input() diff --git a/demo/src/app/pages/progress/progress.page.ts b/demo/src/app/pages/progress/progress.page.ts index 31bb93db0..85bebe337 100644 --- a/demo/src/app/pages/progress/progress.page.ts +++ b/demo/src/app/pages/progress/progress.page.ts @@ -1,43 +1,6 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; -@Component({ - selector: 'demo-page-progress', - templateUrl: './progress.page.html' -}) -export class ProgressPage { - public api = [ - { - selector: "", - properties: [ - { - name: "value", - description: "Sets whether or not the element is collapsed. Values not in [0, ..., maximum] are automatically bounded.", - defaultValue: "0" - }, - { - name: "maximum", - description: "Sets the maximum value. When value > maximum the progress bar is full. Use the 1st example to try out this functionality.", - defaultValue: "100" - }, - { - name: "progress", - description: "Whether or not the current progress label is displayed.", - defaultValue: "true" - }, - { - name: "precision", - description: "Sets the number of decimal places on the current progress label.", - defaultValue: "0" - }, - { - name: "autoSuccess", - description: "Sets whether or not the progress bar automatically turns green when value == maximum.", - defaultValue: "true" - }, - ] - } - ]; - public exampleStandardTemplate:string = ` +const exampleStandardTemplate = `
Progress Bar Label @@ -73,7 +36,8 @@ export class ProgressPage {
`; - public exampleVariationsTemplate:string = ` + +const exampleVariationsTemplate = `
Indicating @@ -85,11 +49,51 @@ export class ProgressPage {
`; + +@Component({ + selector: 'demo-page-progress', + templateUrl: './progress.page.html' +}) +export class ProgressPage { + public api = [ + { + selector: "", + properties: [ + { + name: "value", + description: "Sets whether or not the element is collapsed. Values not in [0, ..., maximum] are automatically bounded.", + defaultValue: "0" + }, + { + name: "maximum", + description: "Sets the maximum value. When value > maximum the progress bar is full. Use the 1st example to try out this functionality.", + defaultValue: "100" + }, + { + name: "progress", + description: "Whether or not the current progress label is displayed.", + defaultValue: "true" + }, + { + name: "precision", + description: "Sets the number of decimal places on the current progress label.", + defaultValue: "0" + }, + { + name: "autoSuccess", + description: "Sets whether or not the progress bar automatically turns green when value == maximum.", + defaultValue: "true" + }, + ] + } + ]; + public exampleStandardTemplate = exampleStandardTemplate; + public exampleVariationsTemplate = exampleVariationsTemplate; } @Component({ selector: 'progress-example-standard', - template: new ProgressPage().exampleStandardTemplate + template: exampleStandardTemplate }) export class ProgressExampleStandard { public value:number = 55; @@ -100,7 +104,7 @@ export class ProgressExampleStandard { @Component({ selector: 'progress-example-variations', - template: new ProgressPage().exampleVariationsTemplate + template: exampleVariationsTemplate }) export class ProgressExampleVariations { public value:number = 55; @@ -126,4 +130,4 @@ export class ProgressExampleVariations { public randomValue = 0; } -export const ProgressPageComponents:Array = [ProgressPage, ProgressExampleStandard, ProgressExampleVariations]; +export const ProgressPageComponents = [ProgressPage, ProgressExampleStandard, ProgressExampleVariations]; diff --git a/demo/src/app/pages/rating/rating.page.ts b/demo/src/app/pages/rating/rating.page.ts index 87a2e0fd2..c94ce9b0f 100644 --- a/demo/src/app/pages/rating/rating.page.ts +++ b/demo/src/app/pages/rating/rating.page.ts @@ -1,8 +1,35 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; + +const exampleStandardTemplate = ` +
+
+ + +
+
+ + +
+
+ Read Only? +
+
+`; + +const exampleStyledTemplate = ` +
Stars
+
+ +
+
Hearts
+
+ +
+`; @Component({ - selector: 'demo-page-rating', - templateUrl: './rating.page.html' + selector: 'demo-page-rating', + templateUrl: './rating.page.html' }) export class RatingPage { public api = [ @@ -36,36 +63,13 @@ export class RatingPage { ] }, ]; - public exampleStandardTemplate:string = ` -
-
- - -
-
- - -
-
- Read Only? -
-
-`; - public exampleStyledTemplate:string = ` -
Stars
-
- -
-
Hearts
-
- -
-`; + public exampleStandardTemplate = exampleStandardTemplate; + public exampleStyledTemplate = exampleStyledTemplate; } @Component({ selector: 'rating-example-standard', - template: new RatingPage().exampleStandardTemplate + template: exampleStandardTemplate }) export class RatingExampleStandard { public rating = 3; @@ -73,8 +77,8 @@ export class RatingExampleStandard { @Component({ selector: 'rating-example-styled', - template: new RatingPage().exampleStyledTemplate + template: exampleStyledTemplate }) -export class RatingExampleStyled { } +export class RatingExampleStyled {} -export const RatingPageComponents:Array = [RatingPage, RatingExampleStandard, RatingExampleStyled]; +export const RatingPageComponents = [RatingPage, RatingExampleStandard, RatingExampleStyled]; diff --git a/demo/src/app/pages/search/search.page.ts b/demo/src/app/pages/search/search.page.ts index 7992b97d2..f68589fd5 100644 --- a/demo/src/app/pages/search/search.page.ts +++ b/demo/src/app/pages/search/search.page.ts @@ -1,8 +1,22 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; + +const exampleStandardTemplate = ` + +
+ Has icon? +
+`; + +const exampleRemoteTemplate = ` + +
+

Currently selected: {{ selectedItem | json }}

+
+`; @Component({ - selector: 'demo-page-search', - templateUrl: './search.page.html' + selector: 'demo-page-search', + templateUrl: './search.page.html' }) export class SearchPage { public api = [ @@ -50,23 +64,13 @@ export class SearchPage { ] } ]; - public exampleStandardTemplate:string = ` - -
- Has icon? -
-`; - public exampleRemoteTemplate:string = ` - -
-

Currently selected: {{ selectedItem | json }}

-
-`; + public exampleStandardTemplate; + public exampleRemoteTemplate; } @Component({ selector: 'search-example-standard', - template: new SearchPage().exampleStandardTemplate + template: exampleStandardTemplate }) export class SearchExampleStandard { public icon:boolean = true; @@ -85,7 +89,7 @@ export class SearchExampleStandard { @Component({ selector: 'search-example-remote', - template: new SearchPage().exampleRemoteTemplate + template: exampleRemoteTemplate }) export class SearchExampleRemote extends SearchExampleStandard { public optionsSearch(query:string):Promise> { diff --git a/demo/src/app/pages/select/select.page.ts b/demo/src/app/pages/select/select.page.ts index 5d163fca0..b8f9fda3f 100644 --- a/demo/src/app/pages/select/select.page.ts +++ b/demo/src/app/pages/select/select.page.ts @@ -1,8 +1,93 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; + +const exampleStandardTemplate = ` + + + + +
+

Currently selected: {{ selectedGender | json }}

+
+`; + +const exampleOptionsTemplate = ` + + + +
+

Currently selected: {{ selectedOption | json }}

+ +
+`; + +const exampleSearchTemplate = ` +

You can also use the keyboard to navigate.

+ + + +
+

Currently selected: {{ selectedOption | json }}

+
+`; + +const exampleSearchLookupTemplate = ` +

You can also use the keyboard to navigate.

+ + + +
+

Currently selected: {{ selectedOption | json }}

+
+`; + +const exampleMultipleTemplate = ` + + + +
+

Currently selected: {{ selectedOptions | json }}

+
+`; + +const exampleMultipleSearchTemplate = ` + + + +
+

Currently selected: {{ selectedOptions | json }}

+
+`; + +const exampleTemplateSearchTemplate = ` + + {{ option.name }} + +
+
+ +
+ + Custom Menu Markup! +
+
+ + +
+
+ + + +
+
+
+

Singly selected: {{ selectedOption | json }}

+

Multi selected: {{ selectedOptions | json }}

+
+`; @Component({ - selector: 'demo-page-select', - templateUrl: './select.page.html' + selector: 'demo-page-select', + templateUrl: './select.page.html' }) export class SelectPage { public api = [ @@ -132,43 +217,11 @@ export class SelectPage { ] } ]; - public exampleStandardTemplate:string = ` - - - - -
-

Currently selected: {{ selectedGender | json }}

-
-`; - public exampleOptionsTemplate:string = ` - - - -
-

Currently selected: {{ selectedOption | json }}

- -
-`; - public exampleSearchTemplate:string = ` -

You can also use the keyboard to navigate.

- - - -
-

Currently selected: {{ selectedOption | json }}

-
-`; - public exampleSearchLookupTemplate:string = ` -

You can also use the keyboard to navigate.

- - - -
-

Currently selected: {{ selectedOption | json }}

-
-`; - public searchLookupCode:string = ` + public exampleStandardTemplate = exampleStandardTemplate; + public exampleOptionsTemplate = exampleOptionsTemplate; + public exampleSearchTemplate = exampleSearchTemplate; + public exampleSearchLookupTemplate = exampleSearchLookupTemplate; + public searchLookupCode = ` // The 2nd argument's type is that of the property specified by 'valueField'. let selectLookup = (query:string, initial:number) => { if (initial != undefined) { @@ -189,61 +242,20 @@ let multiSelectLookup = (query:string, initials:number[]) => { return externalApi.query(query); }; `; - public exampleMultipleTemplate:string = ` - - - -
-

Currently selected: {{ selectedOptions | json }}

-
-`; - public exampleMultipleSearchTemplate:string = ` - - - -
-

Currently selected: {{ selectedOptions | json }}

-
-`; - public exampleTemplateSearchTemplate:string = ` - - {{ option.name }} - -
-
- -
- - Custom Menu Markup! -
-
- - -
-
- - - -
-
-
-

Singly selected: {{ selectedOption | json }}

-

Multi selected: {{ selectedOptions | json }}

-
-`; + public exampleMultipleTemplate = exampleMultipleTemplate; + public exampleMultipleSearchTemplate = exampleMultipleSearchTemplate; + public exampleTemplateSearchTemplate = exampleTemplateSearchTemplate; } @Component({ selector: 'select-example-standard', - template: new SelectPage().exampleStandardTemplate + template: exampleStandardTemplate }) -export class SelectExampleStandard { - -} +export class SelectExampleStandard {} @Component({ selector: 'select-example-options', - template: new SelectPage().exampleOptionsTemplate + template: exampleOptionsTemplate }) export class SelectExampleOptions { public options:Array = [{ name: "Example" }, { name: "Test" }, { name: "What" }, { name: "No" }, { name: "Benefit" }, { name: "Oranges" }, { name: "Artemis" }, { name: "Another" }]; @@ -255,7 +267,7 @@ export class SelectExampleOptions { @Component({ selector: 'select-example-search', - template: new SelectPage().exampleSearchTemplate + template: exampleSearchTemplate }) export class SelectExampleSearch { public options:Array = [{ name: "Example" }, { name: "Test" }, { name: "What" }, { name: "No" }, { name: "Benefit" }, { name: "Oranges" }, { name: "Artemis" }, { name: "Another" }]; @@ -263,7 +275,7 @@ export class SelectExampleSearch { @Component({ selector: 'select-example-search-lookup', - template: new SelectPage().exampleSearchLookupTemplate + template: exampleSearchLookupTemplate }) export class SelectExampleLookupSearch { private _options:Array = [{ id: 1, name: "Example" }, { id: 2, name: "Test" }, { id: 3, name: "What" }, { id: 4, name: "No" }, { id: 5, name: "Benefit" }, { id: 6, name: "Oranges" }, { id: 7, name: "Artemis" }, { id: 8, name: "Another" }]; @@ -285,7 +297,7 @@ export class SelectExampleLookupSearch { @Component({ selector: 'select-example-multiple', - template: new SelectPage().exampleMultipleTemplate + template: exampleMultipleTemplate }) export class SelectExampleMultiple { public options:Array = ["Example", "Test", "What", "No", "Benefit", "Oranges", "Artemis", "Another"]; @@ -294,7 +306,7 @@ export class SelectExampleMultiple { @Component({ selector: 'select-example-multiple-search', - template: new SelectPage().exampleMultipleSearchTemplate + template: exampleMultipleSearchTemplate }) export class SelectExampleMultipleSearch { public options:Array = ["Example", "Test", "What", "No", "Benefit", "Oranges", "Artemis", "Another"]; @@ -303,11 +315,11 @@ export class SelectExampleMultipleSearch { @Component({ selector: 'select-example-template-search', - template: new SelectPage().exampleTemplateSearchTemplate + template: exampleTemplateSearchTemplate }) export class SelectExampleTemplateSearch { public options:Array = [{ name: "Example"}, { name: "Test"}, { name: "What"}, { name: "No"}, { name: "Benefit"}, { name: "Oranges"}, { name: "Artemis"}, { name: "Another"}]; public selectedOption = this.options[5]; } -export const SelectPageComponents:Array = [SelectPage, SelectExampleStandard, SelectExampleOptions, SelectExampleSearch, SelectExampleLookupSearch, SelectExampleMultiple, SelectExampleMultipleSearch, SelectExampleTemplateSearch]; +export const SelectPageComponents = [SelectPage, SelectExampleStandard, SelectExampleOptions, SelectExampleSearch, SelectExampleLookupSearch, SelectExampleMultiple, SelectExampleMultipleSearch, SelectExampleTemplateSearch]; diff --git a/demo/src/app/pages/sidebar/sidebar.page.ts b/demo/src/app/pages/sidebar/sidebar.page.ts index 44ed01d9a..d34a703a5 100644 --- a/demo/src/app/pages/sidebar/sidebar.page.ts +++ b/demo/src/app/pages/sidebar/sidebar.page.ts @@ -1,8 +1,50 @@ import {Component} from '@angular/core'; +const exampleStandardTemplate = ` +
+ + Menu + +
+ + + 1 + 2 + + +
+

Content

+

Example content beside the sidebar

+ +
+ + +`; + +const exampleDirectionTemplate = ` +
+ + Menu + +
+ + + 1 + 2 + + +
+

Content

+

Sidebar visibility: {{ isVisible }}

+ +
+ + +`; + @Component({ - selector: 'demo-page-sidebar', - templateUrl: './sidebar.page.html' + selector: 'demo-page-sidebar', + templateUrl: './sidebar.page.html' }) export class SidebarPage { public api = [ @@ -46,60 +88,22 @@ export class SidebarPage { ] } ]; - public exampleStandardTemplate:string = ` -
- - Menu - -
- - - 1 - 2 - - -
-

Content

-

Example content beside the sidebar

- -
- - -`; - public exampleDirectionTemplate:string = ` -
- - Menu - -
- - - 1 - 2 - - -
-

Content

-

Sidebar visibility: {{ isVisible }}

- -
- - -`; + public exampleStandardTemplate = exampleStandardTemplate; + public exampleDirectionTemplate = exampleDirectionTemplate; } @Component({ selector: 'sidebar-example-standard', - template: new SidebarPage().exampleStandardTemplate + template: exampleStandardTemplate }) export class SidebarExampleStandard {} @Component({ selector: 'sidebar-example-direction', - template: new SidebarPage().exampleDirectionTemplate + template: exampleDirectionTemplate }) export class SidebarExampleDirection { isVisible:boolean = false; } -export const SidebarPageComponents:Array = [SidebarPage, SidebarExampleStandard, SidebarExampleDirection]; +export const SidebarPageComponents = [SidebarPage, SidebarExampleStandard, SidebarExampleDirection]; diff --git a/demo/src/app/pages/tabs/tabs.page.ts b/demo/src/app/pages/tabs/tabs.page.ts index d825b6377..0a8bd33e1 100644 --- a/demo/src/app/pages/tabs/tabs.page.ts +++ b/demo/src/app/pages/tabs/tabs.page.ts @@ -1,56 +1,6 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; -@Component({ - selector: 'demo-page-tabs', - templateUrl: './tabs.page.html' -}) -export class TabsPage { - public api = [ - { - selector: "" - }, - { - selector: "[suiTabHeader]", - properties: [ - { - name: "suiTabHeader", - description: "Specifies the ID so the content can be linked to a [suiTabContent]. This must be unique.", - required: true - }, - { - name: "isActive", - description: "Sets whether the tab is active. Supports being set to false at which time the closest available tab is activated.", - defaultValue: "false" - }, - { - name: "isDisabled", - description: "Sets whether not the tab is disabled. If the tab is active when it is disabled, the closest available tab is activated.", - defaultValue: "false" - } - ], - events: [ - { - name: "isActiveChange", - description: "Fires when the tab's active status is changed. Using the [(isActive)] syntax is recommended so that the value is updated when the active tab changes." - }, - { - name: "onActivate", - description: "Fires when the tab becomes active." - } - ] - }, - { - selector: "[suiTabContent]", - properties: [ - { - name: "suiTabContent", - description: "Specifies the ID so the content can be linked to a [suiTabHeader]. This must be unique.", - required: true - } - ] - } - ]; - public exampleStandardTemplate:string = ` +const exampleStandardTemplate = `
First @@ -62,7 +12,8 @@ export class TabsPage {
Third tab!
`; - public examplePropertiesTemplate:string = ` + +const examplePropertiesTemplate = `
First @@ -87,7 +38,8 @@ export class TabsPage { Third tab disabled?
`; - public exampleDynamicTemplate:string = ` + +const exampleDynamicTemplate = `
Static @@ -104,7 +56,8 @@ export class TabsPage {
`; - public exampleStyledTemplate:string = ` + +const exampleStyledTemplate = `
First @@ -125,17 +78,72 @@ export class TabsPage {
Third tab!
`; + +@Component({ + selector: 'demo-page-tabs', + templateUrl: './tabs.page.html' +}) +export class TabsPage { + public api = [ + { + selector: "" + }, + { + selector: "[suiTabHeader]", + properties: [ + { + name: "suiTabHeader", + description: "Specifies the ID so the content can be linked to a [suiTabContent]. This must be unique.", + required: true + }, + { + name: "isActive", + description: "Sets whether the tab is active. Supports being set to false at which time the closest available tab is activated.", + defaultValue: "false" + }, + { + name: "isDisabled", + description: "Sets whether not the tab is disabled. If the tab is active when it is disabled, the closest available tab is activated.", + defaultValue: "false" + } + ], + events: [ + { + name: "isActiveChange", + description: "Fires when the tab's active status is changed. Using the [(isActive)] syntax is recommended so that the value is updated when the active tab changes." + }, + { + name: "onActivate", + description: "Fires when the tab becomes active." + } + ] + }, + { + selector: "[suiTabContent]", + properties: [ + { + name: "suiTabContent", + description: "Specifies the ID so the content can be linked to a [suiTabHeader]. This must be unique.", + required: true + } + ] + } + ]; + public exampleStandardTemplate = exampleStandardTemplate; + public examplePropertiesTemplate = examplePropertiesTemplate; + public exampleDynamicTemplate = exampleDynamicTemplate; + public exampleStyledTemplate = exampleStyledTemplate; } @Component({ selector: 'tab-example-standard', - template: new TabsPage().exampleStandardTemplate + template: exampleStandardTemplate }) -export class TabExampleStandard { } +export class TabExampleStandard {} @Component({ selector: 'tab-example-properties', - template: new TabsPage().examplePropertiesTemplate + template: examplePropertiesTemplate }) export class TabExampleProperties { public alert = function() { @@ -145,7 +153,7 @@ export class TabExampleProperties { @Component({ selector: 'tab-example-dynamic', - template: new TabsPage().exampleDynamicTemplate + template: exampleDynamicTemplate }) export class TabExampleDynamic { public active:boolean[] = []; @@ -169,10 +177,10 @@ export class TabExampleDynamic { @Component({ selector: 'tab-example-styled', - template: new TabsPage().exampleStyledTemplate + template: exampleStyledTemplate }) export class TabExampleStyled { public pointing = true; } -export const TabsPageComponents:Array = [TabsPage, TabExampleStandard, TabExampleProperties, TabExampleDynamic, TabExampleStyled]; +export const TabsPageComponents = [TabsPage, TabExampleStandard, TabExampleProperties, TabExampleDynamic, TabExampleStyled]; diff --git a/demo/src/app/pages/transition/transition.page.ts b/demo/src/app/pages/transition/transition.page.ts index 36e54e3ca..388a6f62f 100644 --- a/demo/src/app/pages/transition/transition.page.ts +++ b/demo/src/app/pages/transition/transition.page.ts @@ -2,9 +2,19 @@ import {Component} from '@angular/core'; import {SuiTransition, Transition, TransitionDirection} from "../../../../../components/transition/transition"; import {TransitionController} from "../../../../../components/transition/transition-controller"; +const exampleStandardTemplate = ` +
+ +
+ + + + +`; + @Component({ - selector: 'demo-page-transition', - templateUrl: './transition.page.html' + selector: 'demo-page-transition', + templateUrl: './transition.page.html' }) export class TransitionPage { public api = [ @@ -49,15 +59,7 @@ export class MyComponent { } `; - public exampleStandardTemplate:string = ` -
- -
- - - - -`; + public exampleStandardTemplate = exampleStandardTemplate; public transitionControllerInterface = ` this.ctrl = new TransitionController(isInitiallyVisible:boolean = false, display:string = "block"); @@ -86,7 +88,7 @@ this.ctrl.clearQueue(); // Continues with the current transition, but empties the queue. `; - public advancedExampleCode:string = ` + public advancedExampleCode = ` import {SuiTransition, TransitionController, Transition} from "ng2-semantic-ui"; @Component({}) @@ -111,7 +113,7 @@ export class MyComponent extends SuiTransition { @Component({ selector: 'transition-example-standard', - template: new TransitionPage().exampleStandardTemplate + template: exampleStandardTemplate }) export class TransitionExampleStandard { public transitionController = new TransitionController(); @@ -127,4 +129,4 @@ export class TransitionExampleStandard { } } -export const TransitionPageComponents:Array = [TransitionPage, TransitionExampleStandard]; +export const TransitionPageComponents = [TransitionPage, TransitionExampleStandard]; From bb723f03ee5f42b16c08ad1b4f8c5e1502585773 Mon Sep 17 00:00:00 2001 From: Ed Carroll Date: Sat, 1 Apr 2017 00:50:06 +0100 Subject: [PATCH 3/7] Fixed immediate AoT errors in components --- components/checkbox/checkbox.ts | 30 +++++++++++++++++----------- components/checkbox/radiobutton.ts | 32 +++++++++++++++++++----------- components/message/message.ts | 4 ++-- components/progress/progress.ts | 16 ++++++++++----- components/rating/rating.ts | 8 ++++++-- components/select/multi-select.ts | 2 +- 6 files changed, 58 insertions(+), 34 deletions(-) diff --git a/components/checkbox/checkbox.ts b/components/checkbox/checkbox.ts index eccb43eb6..6d59e32d4 100644 --- a/components/checkbox/checkbox.ts +++ b/components/checkbox/checkbox.ts @@ -13,24 +13,30 @@ import {NG_VALUE_ACCESSOR, ControlValueAccessor} from '@angular/forms'; }) export class SuiCheckbox { @HostBinding('class.ui') - @HostBinding('class.checkbox') classes = true; + @HostBinding('class.checkbox') + private _classes = true; - @Input() public name:string; + @Input() + public name:string; @HostBinding('class.checked') - private checked:boolean = false; + public isChecked:boolean = false; - @Output() public checkChange:EventEmitter = new EventEmitter(false); + @Output() + public checkChange:EventEmitter = new EventEmitter(false); + + @Input() + public isDisabled:boolean = false; - @Input() public isDisabled:boolean = false; @HostBinding('class.read-only') - @Input() public isReadonly:boolean = false; + @Input() + public isReadonly:boolean = false; - private get checkedAttribute():string { - return this.checked ? "" : null; + public get checkedAttribute():string { + return this.isChecked ? "" : null; } - private get isDisabledAttribute():string { + public get isDisabledAttribute():string { return this.isDisabled ? "disabled" : null; } @@ -42,13 +48,13 @@ export class SuiCheckbox { } public toggle():void { - this.checked = !this.checked; - this.checkChange.emit(this.checked); + this.isChecked = !this.isChecked; + this.checkChange.emit(this.isChecked); } public writeValue(value:boolean) { setTimeout(() => { - this.checked = value; + this.isChecked = value; }); } } diff --git a/components/checkbox/radiobutton.ts b/components/checkbox/radiobutton.ts index e02314fdc..386d0f5e5 100644 --- a/components/checkbox/radiobutton.ts +++ b/components/checkbox/radiobutton.ts @@ -20,27 +20,35 @@ import {NG_VALUE_ACCESSOR, ControlValueAccessor} from '@angular/forms'; export class SuiRadioButton { @HostBinding('class.ui') @HostBinding('class.radio') - @HostBinding('class.checkbox') classes = true; + @HostBinding('class.checkbox') + private _classes = true; - @Input() public name:string; - @Input() public value:any = ""; + @Input() + public name:string; + + @Input() + public value:any = ""; + + @Input() + public isDisabled:boolean = false; - @Input() public isDisabled:boolean = false; @HostBinding('class.read-only') - @Input() public isReadonly:boolean = false; + @Input() + public isReadonly:boolean = false; @HostBinding('class.checked') - private checked:boolean = false; + public isChecked:boolean = false; - private currentValue:any; + public currentValue:any; - @Output() public currentValueChange:EventEmitter = new EventEmitter(false); + @Output() + public currentValueChange:EventEmitter = new EventEmitter(false); - private get checkedAttribute():string { - return this.checked ? "" : null; + public get checkedAttribute():string { + return this.isChecked ? "" : null; } - private get isDisabledAttribute():string { + public get isDisabledAttribute():string { return this.isDisabled ? "disabled" : null; } @@ -56,7 +64,7 @@ export class SuiRadioButton { public update():void { //This is a horrible hack - need to rewrite! setTimeout(() => { - this.checked = this.currentValue == this.value; + this.isChecked = this.currentValue == this.value; }); } diff --git a/components/message/message.ts b/components/message/message.ts index 19203208d..7b8e599a5 100644 --- a/components/message/message.ts +++ b/components/message/message.ts @@ -20,9 +20,9 @@ export class SuiMessage { private transition:TransitionController = new TransitionController(); - private isDismissed:boolean = false; + public isDismissed:boolean = false; - private dismiss():void { + public dismiss():void { this.transition.animate(new Transition("fade", 300, TransitionDirection.Out, () => { this.isDismissed = true; this.onDismiss.emit(this); diff --git a/components/progress/progress.ts b/components/progress/progress.ts index 4040f4939..8ab8c8fe1 100644 --- a/components/progress/progress.ts +++ b/components/progress/progress.ts @@ -15,7 +15,8 @@ import {Component, Input, HostBinding} from '@angular/core'; }) export class SuiProgress { @HostBinding('class.ui') - @HostBinding('class.progress') classes = true; + @HostBinding('class.progress') + private _classes = true; @HostBinding('class.success') private get reachedMaximum() { @@ -26,9 +27,14 @@ export class SuiProgress { private unscaledValue:number = 0; private _maximum:number = 100; - @Input() public autoSuccess:boolean = true; - @Input() public progress:boolean = true; - @Input() public precision:number = 0; + @Input() + public autoSuccess:boolean = true; + + @Input() + public progress:boolean = true; + + @Input() + public precision:number = 0; @Input() public set value(value:any) { @@ -64,7 +70,7 @@ export class SuiProgress { } @HostBinding('attr.data-percent') - private get percentage():string { + public get percentage():string { return this._value.toString(); } diff --git a/components/rating/rating.ts b/components/rating/rating.ts index 1e6712ae7..ac12b267b 100644 --- a/components/rating/rating.ts +++ b/components/rating/rating.ts @@ -30,16 +30,20 @@ export class SuiRating { public set max(value:any) { this._max = parseInt(value); } - private get icons() { + + public get icons() { return Array(this._max); } - @Output() public valueChange:EventEmitter = new EventEmitter(false); + @Output() + public valueChange:EventEmitter = new EventEmitter(false); private _hoveredIndex:number = -1; + private mouseover(i:number) { this._hoveredIndex = i; } + @HostListener('mouseout') private mouseout() { this._hoveredIndex = -1; diff --git a/components/select/multi-select.ts b/components/select/multi-select.ts index 67e12baa0..53ecfd6d1 100644 --- a/components/select/multi-select.ts +++ b/components/select/multi-select.ts @@ -14,7 +14,7 @@ import {KeyCode} from '../util/util'; -
{{ placeholder }}
+
{{ placeholder }}
From af631d86461bb8d76ed87d77968c684f2eb994a1 Mon Sep 17 00:00:00 2001 From: Ed Carroll Date: Sat, 1 Apr 2017 00:52:39 +0100 Subject: [PATCH 4/7] Fixed broken checkbox and radiobutton --- components/checkbox/checkbox.ts | 2 +- components/checkbox/radiobutton.ts | 2 +- demo/src/app/components/codeblock/codeblock.component.ts | 2 +- demo/src/app/components/example/example.component.ts | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/components/checkbox/checkbox.ts b/components/checkbox/checkbox.ts index 6d59e32d4..d177848ad 100644 --- a/components/checkbox/checkbox.ts +++ b/components/checkbox/checkbox.ts @@ -5,7 +5,7 @@ import {NG_VALUE_ACCESSOR, ControlValueAccessor} from '@angular/forms'; selector: 'sui-checkbox', exportAs: 'suiCheckbox', template: ` - + diff --git a/components/checkbox/radiobutton.ts b/components/checkbox/radiobutton.ts index 386d0f5e5..25cb02a42 100644 --- a/components/checkbox/radiobutton.ts +++ b/components/checkbox/radiobutton.ts @@ -10,7 +10,7 @@ import {NG_VALUE_ACCESSOR, ControlValueAccessor} from '@angular/forms'; [attr.name]="name" [attr.checked]="checkedAttribute" [attr.disabled]="isDisabledAttribute" - [ngModel]="checked" + [ngModel]="isChecked" (ngModel)="currentValue = value">