javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 12:29:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(templates): import required directives for ionic templates

Browse Source
This commit is contained in:
Adam Bradley
2016-07-01 00:59:37 -05:00
parent 009d5a980a
commit 656426672c
27 changed files with 266 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/action-sheet/action-sheet-component.ts
View File

@ -1,8 +1,11 @@
import { Component, Renderer, ElementRef, HostListener, ViewEncapsulation } from '@angular/core';
import { NgClass, NgFor, NgIf } from '@angular/common';
import { Animation } from '../../animations/animation';
import { Backdrop } from '../backdrop/backdrop';
import { Config } from '../../config/config';
import { Form } from '../../util/form';
import { Icon } from '../icon/icon';
import { Key } from '../../util/key';
import { NavParams } from '../nav/nav-params';
import { Transition, TransitionOptions } from '../../transitions/transition';
@ -35,6 +38,7 @@ import { ViewController } from '../nav/view-controller';
</div>
</div>
`,
directives: [Backdrop, Icon, NgClass, NgFor, NgIf],
host: {
'role': 'dialog',
'[attr.aria-labelledby]': 'hdrId',

6
src/components/alert/alert-component.ts
View File

@ -1,6 +1,9 @@
import {Component, ElementRef, Renderer, HostListener, ViewEncapsulation} from '@angular/core';
import { Component, ElementRef, HostListener, Renderer, ViewEncapsulation } from '@angular/core';
import { NgClass, NgFor, NgIf, NgSwitch, NgSwitchCase, NgSwitchDefault } from '@angular/common';
import { NgModel } from '@angular/forms';
import { Animation } from '../../animations/animation';
import { Backdrop } from '../backdrop/backdrop';
import { Config } from '../../config/config';
import { isPresent } from '../../util/util';
import { Key } from '../../util/key';
@ -62,6 +65,7 @@ import {ViewController} from '../nav/view-controller';
</div>
</div>
`,
directives: [Backdrop, NgClass, NgFor, NgIf, NgModel, NgSwitch, NgSwitchCase, NgSwitchDefault],
host: {
'role': 'dialog',
'[attr.aria-labelledby]': 'hdrId',

7
src/components/button/button.ts
View File

@ -35,11 +35,8 @@ import {isTrueProperty} from '../../util/util';
*/
@Component({
selector: 'button:not([ion-item]),[button]',
template:
'<span class="button-inner">' +
'<ng-content></ng-content>' +
'</span>' +
'<ion-button-effect></ion-button-effect>',
// NOTE: template must not contain spaces between elements
template: '<span class="button-inner"><ng-content></ng-content></span><ion-button-effect></ion-button-effect>',
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
})

29
src/components/checkbox/checkbox.ts
View File

@ -5,7 +5,7 @@ import { Form } from '../../util/form';
import { Item } from '../item/item';
import { isTrueProperty } from '../../util/util';
const CHECKBOX_VALUE_ACCESSOR = new Provider(
export const CHECKBOX_VALUE_ACCESSOR = new Provider(
NG_VALUE_ACCESSOR, {useExisting: forwardRef(() => Checkbox), multi: true});
@ -49,19 +49,20 @@ const CHECKBOX_VALUE_ACCESSOR = new Provider(
*/
@Component({
selector: 'ion-checkbox',
template:
'<div class="checkbox-icon" [class.checkbox-checked]="_checked">' +
'<div class="checkbox-inner"></div>' +
'</div>' +
'<button role="checkbox" ' +
'type="button" ' +
'category="item-cover" ' +
'[id]="id" ' +
'[attr.aria-checked]="_checked" ' +
'[attr.aria-labelledby]="_labelId" ' +
'[attr.aria-disabled]="_disabled" ' +
'class="item-cover">' +
'</button>',
template: `
<div class="checkbox-icon" [class.checkbox-checked]="_checked">
<div class="checkbox-inner"></div>
</div>
<button role="checkbox"
type="button"
category="item-cover"
[id]="id"
[attr.aria-checked]="_checked"
[attr.aria-labelledby]="_labelId"
[attr.aria-disabled]="_disabled"
class="item-cover">
</button>
`,
host: {
'[class.checkbox-disabled]': '_disabled'
},

23
src/components/datetime/datetime.ts
View File

@ -10,7 +10,7 @@ import { merge, isBlank, isPresent, isTrueProperty, isArray, isString } from '..
import { dateValueRange, renderDateTime, renderTextFormat, convertFormatToKey, getValueFromFormat, parseTemplate, parseDate, updateDate, DateTimeData, convertDataToISO, daysInMonth, dateSortValue, dateDataSortValue, LocaleData } from '../../util/datetime-util';
import { NavController } from '../nav/nav-controller';
const DATETIME_VALUE_ACCESSOR = new Provider(
export const DATETIME_VALUE_ACCESSOR = new Provider(
NG_VALUE_ACCESSOR, {useExisting: forwardRef(() => DateTime), multi: true});
@ -248,16 +248,17 @@ const DATETIME_VALUE_ACCESSOR = new Provider(
*/
@Component({
selector: 'ion-datetime',
template:
'<div class="datetime-text">{{_text}}</div>' +
'<button aria-haspopup="true" ' +
'type="button" ' +
'[id]="id" ' +
'category="item-cover" ' +
'[attr.aria-labelledby]="_labelId" ' +
'[attr.aria-disabled]="_disabled" ' +
'class="item-cover">' +
'</button>',
template: `
<div class="datetime-text">{{_text}}</div>
<button aria-haspopup="true"
type="button"
[id]="id"
category="item-cover"
[attr.aria-labelledby]="_labelId"
[attr.aria-disabled]="_disabled"
class="item-cover">
</button>
`,
host: {
'[class.datetime-disabled]': '_disabled'
},

3
src/components/infinite-scroll/infinite-scroll-content.ts
View File

@ -1,7 +1,9 @@
import { Component, Input, ViewEncapsulation } from '@angular/core';
import { NgIf } from '@angular/common';
import { Config } from '../../config/config';
import { InfiniteScroll } from './infinite-scroll';
import { Spinner } from '../spinner/spinner';
/**
@ -16,6 +18,7 @@ import { InfiniteScroll } from './infinite-scroll';
'</div>' +
'<div class="infinite-loading-text" [innerHTML]="loadingText" *ngIf="loadingText"></div>' +
'</div>',
directives: [NgIf, Spinner],
host: {
'[attr.state]': 'inf.state'
},

24
src/components/input/input.ts
View File

@ -1,5 +1,6 @@
import { Component, Optional, ElementRef, ViewChild, ViewEncapsulation } from '@angular/core';
import { NgControl } from '@angular/forms';
import { NgIf } from '@angular/common';
import { NgControl, NgModel } from '@angular/forms';
import { App } from '../app/app';
import { Config } from '../../config/config';
@ -74,15 +75,13 @@ import { Platform } from '../../platform/platform';
*/
@Component({
selector: 'ion-input',
template:
'<input [type]="type" [(ngModel)]="_value" (blur)="inputBlurred($event)" (focus)="inputFocused($event)" [placeholder]="placeholder" class="text-input">' +
'<input [type]="type" aria-hidden="true" next-input *ngIf="_useAssist">' +
'<button clear [hidden]="!clearInput" type="button" class="text-input-clear-icon" (click)="clearTextInput()" (mousedown)="clearTextInput()"></button>' +
'<div (touchstart)="pointerStart($event)" (touchend)="pointerEnd($event)" (mousedown)="pointerStart($event)" (mouseup)="pointerEnd($event)" class="input-cover" tappable *ngIf="_useAssist"></div>',
directives: [
NextInput,
NativeInput,
],
template: `
<input [type]="type" [(ngModel)]="_value" (blur)="inputBlurred($event)" (focus)="inputFocused($event)" [placeholder]="placeholder" class="text-input">
<input [type]="type" aria-hidden="true" next-input *ngIf="_useAssist">
<button clear [hidden]="!clearInput" type="button" class="text-input-clear-icon" (click)="clearTextInput()" (mousedown)="clearTextInput()"></button>
<div (touchstart)="pointerStart($event)" (touchend)="pointerEnd($event)" (mousedown)="pointerStart($event)" (mouseup)="pointerEnd($event)" class="input-cover" tappable *ngIf="_useAssist"></div>
`,
directives: [NativeInput, NextInput, NgIf, NgModel],
encapsulation: ViewEncapsulation.None,
})
export class TextInput extends InputBase {
@ -170,10 +169,7 @@ export class TextInput extends InputBase {
'<textarea [(ngModel)]="_value" (blur)="inputBlurred($event)" (focus)="inputFocused($event)" [placeholder]="placeholder" class="text-input"></textarea>' +
'<input type="text" aria-hidden="true" next-input *ngIf="_useAssist">' +
'<div (touchstart)="pointerStart($event)" (touchend)="pointerEnd($event)" (mousedown)="pointerStart($event)" (mouseup)="pointerEnd($event)" class="input-cover" tappable *ngIf="_useAssist"></div>',
directives: [
NextInput,
NativeInput
],
directives: [NativeInput, NextInput, NgIf],
encapsulation: ViewEncapsulation.None,
})
export class TextArea extends InputBase {

7
src/components/item/item-sliding.ts
View File

@ -178,9 +178,10 @@ const enum SlidingState {
*/
@Component({
selector: 'ion-item-sliding',
template:
'<ng-content select="ion-item,[ion-item]"></ng-content>' +
'<ng-content select="ion-item-options"></ng-content>',
template: `
<ng-content select="ion-item,[ion-item]"></ng-content>
<ng-content select="ion-item-options"></ng-content>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None
})

32
src/components/item/item.ts
View File

@ -1,4 +1,5 @@
import { ChangeDetectionStrategy, Component, ContentChild, ContentChildren, Directive, ElementRef, forwardRef, Input, Renderer, ViewChild, ViewEncapsulation } from '@angular/core';
import { NgIf } from '@angular/common';
import { Button } from '../button/button';
import { Form } from '../../util/form';
@ -267,21 +268,22 @@ import { Label } from '../label/label';
*/
@Component({
selector: 'ion-list-header,ion-item,[ion-item],ion-item-divider',
template:
'<ng-content select="[item-left],ion-checkbox:not([item-right])"></ng-content>' +
'<div class="item-inner">' +
'<div class="input-wrapper">' +
'<ng-content select="ion-label"></ng-content>' +
'<ion-label *ngIf="_viewLabel">' +
'<ng-content></ng-content>' +
'</ion-label>' +
'<ng-content select="ion-select,ion-input,ion-textarea,ion-datetime,ion-range,[item-content]"></ng-content>' +
'</div>' +
'<ng-content select="[item-right],ion-radio,ion-toggle"></ng-content>' +
'<ion-reorder></ion-reorder>' +
'</div>' +
'<ion-button-effect></ion-button-effect>',
directives: [forwardRef(() => Reorder)],
template: `
<ng-content select="[item-left],ion-checkbox:not([item-right])"></ng-content>
<div class="item-inner">
<div class="input-wrapper">
<ng-content select="ion-label"></ng-content>
<ion-label *ngIf="_viewLabel">
<ng-content></ng-content>
</ion-label>
<ng-content select="ion-select,ion-input,ion-textarea,ion-datetime,ion-range,[item-content]"></ng-content>
</div>
<ng-content select="[item-right],ion-radio,ion-toggle"></ng-content>
<ion-reorder></ion-reorder>
</div>
<ion-button-effect></ion-button-effect>
`,
directives: [NgIf, Label, forwardRef(() => Reorder)],
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
})

21
src/components/loading/loading-component.ts
View File

@ -1,9 +1,12 @@
import { Component, ElementRef, Renderer, ViewEncapsulation } from '@angular/core';
import { NgIf } from '@angular/common';
import { Animation } from '../../animations/animation';
import { Backdrop } from '../backdrop/backdrop';
import { Config } from '../../config/config';
import { isDefined, isPresent, isUndefined } from '../../util/util';
import { NavParams } from '../nav/nav-params';
import { Spinner } from '../spinner/spinner';
import { Transition, TransitionOptions } from '../../transitions/transition';
import { ViewController} from '../nav/view-controller';
@ -13,14 +16,16 @@ import { ViewController} from '../nav/view-controller';
*/
@Component({
selector: 'ion-loading',
template:
'<ion-backdrop [class.hide-backdrop]="!d.showBackdrop"></ion-backdrop>' +
'<div class="loading-wrapper">' +
'<div *ngIf="showSpinner" class="loading-spinner">' +
'<ion-spinner [name]="d.spinner"></ion-spinner>' +
'</div>' +
'<div *ngIf="d.content" [innerHTML]="d.content" class="loading-content"></div>' +
'</div>',
template: `
<ion-backdrop [class.hide-backdrop]="!d.showBackdrop"></ion-backdrop>
<div class="loading-wrapper">
<div *ngIf="showSpinner" class="loading-spinner">
<ion-spinner [name]="d.spinner"></ion-spinner>
</div>
<div *ngIf="d.content" [innerHTML]="d.content" class="loading-content"></div>
</div>
`,
directives: [Backdrop, NgIf, Spinner],
host: {
'role': 'dialog'
},

14
src/components/menu/menu.ts
View File

@ -179,9 +179,11 @@ import { Platform } from '../../platform/platform';
host: {
'role': 'navigation'
},
template:
'<ng-content></ng-content>' +
'<ion-backdrop (click)="bdClick($event)" disableScroll="false"></ion-backdrop>',
template: `
<ng-content></ng-content>
<ion-backdrop (click)="bdClick($event)" disableScroll="false"></ion-backdrop>
`,
directives: [Backdrop],
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
})
@ -281,17 +283,17 @@ export class Menu extends Ion {
/**
* @output {event} When the menu is being dragged open.
*/
@Output() ionDrag: EventEmitter<number> = new EventEmitter();
@Output() ionDrag: EventEmitter<number> = new EventEmitter<number>();
/**
* @output {event} When the menu has been opened.
*/
@Output() ionOpen: EventEmitter<boolean> = new EventEmitter();
@Output() ionOpen: EventEmitter<boolean> = new EventEmitter<boolean>();
/**
* @output {event} When the menu has been closed.
*/
@Output() ionClose: EventEmitter<boolean> = new EventEmitter();
@Output() ionClose: EventEmitter<boolean> = new EventEmitter<boolean>();
constructor(
private _menuCtrl: MenuController,

6
src/components/modal/modal-component.ts
View File

@ -2,9 +2,10 @@ import { Component, ComponentResolver, HostListener, Renderer, ViewChild, ViewCo
import { addSelector } from '../../config/bootstrap';
import { Animation } from '../../animations/animation';
import { pascalCaseToDashCase } from '../../util/util';
import { Backdrop } from '../backdrop/backdrop';
import { Key } from '../../util/key';
import { NavParams } from '../nav/nav-params';
import { pascalCaseToDashCase } from '../../util/util';
import { PageTransition } from '../../transitions/page-transition';
import { TransitionOptions } from '../../transitions/transition';
import { ViewController } from '../nav/view-controller';
@ -21,7 +22,8 @@ import { windowDimensions } from '../../util/dom';
<div class="modal-wrapper">
<div #viewport nav-viewport></div>
</div>
`
`,
directives: [Backdrop]
})
export class ModalCmp {

38
src/components/navbar/navbar.ts
View File

@ -2,6 +2,7 @@ import { Component, Directive, ElementRef, forwardRef, Inject, Input, Optional }
import { App } from '../app/app';
import { Config } from '../../config/config';
import { Icon } from '../icon/icon';
import { Ion } from '../ion';
import { isTrueProperty } from '../../util/util';
import { NavController } from '../nav/nav-controller';
@ -94,28 +95,29 @@ class ToolbarBackground {
*/
@Component({
selector: 'ion-navbar',
template:
'<div class="toolbar-background"></div>' +
'<button category="bar-button" class="back-button" [hidden]="_hideBb">' +
'<span class="button-inner">' +
'<ion-icon class="back-button-icon" [name]="_bbIcon"></ion-icon>' +
'<span class="back-button-text">' +
'<span class="back-default">{{_bbText}}</span>' +
'</span>' +
'</span>' +
'</button>' +
'<ng-content select="[menuToggle],ion-buttons[left]"></ng-content>' +
'<ng-content select="ion-buttons[start]"></ng-content>' +
'<ng-content select="ion-buttons[end],ion-buttons[right]"></ng-content>' +
'<div class="toolbar-content">' +
'<ng-content></ng-content>' +
'</div>',
template: `
<div class="toolbar-background"></div>
<button category="bar-button" class="back-button" [hidden]="_hideBb">
<span class="button-inner">
<ion-icon class="back-button-icon" [name]="_bbIcon"></ion-icon>
<span class="back-button-text">
<span class="back-default">{{_bbText}}</span>
</span>
</span>
</button>
<ng-content select="[menuToggle],ion-buttons[left]"></ng-content>
<ng-content select="ion-buttons[start]"></ng-content>
<ng-content select="ion-buttons[end],ion-buttons[right]"></ng-content>
<div class="toolbar-content">
<ng-content></ng-content>
</div>
`,
directives: [BackButton, BackButtonText, Icon, ToolbarBackground],
host: {
'[hidden]': '_hidden',
'class': 'toolbar',
'[class.statusbar-padding]': '_sbPadding'
},
directives: [BackButton, BackButtonText, ToolbarBackground]
}
})
export class Navbar extends ToolbarBase {
private _bbIcon: string;

5
src/components/picker/picker-component.ts
View File

@ -1,7 +1,9 @@
import { Component, ElementRef, EventEmitter, Input, HostListener, Output, QueryList, Renderer, ViewChild, ViewChildren, ViewEncapsulation } from '@angular/core';
import { NgClass, NgFor, NgIf } from '@angular/common';
import { DomSanitizationService } from '@angular/platform-browser';
import { Animation } from '../../animations/animation';
import { Backdrop } from '../backdrop/backdrop';
import { cancelRaf, pointerCoord, raf } from '../../util/dom';
import { clamp, isNumber, isPresent, isString } from '../../util/util';
import { Config } from '../../config/config';
@ -28,6 +30,7 @@ import { ViewController } from '../nav/view-controller';
</div>
<div *ngIf="col.suffix" class="picker-suffix" [style.width]="col.suffixWidth">{{col.suffix}}</div>
`,
directives: [NgFor, NgIf],
host: {
'[style.min-width]': 'col.columnWidth',
'[class.picker-opts-left]': 'col.align=="left"',
@ -363,10 +366,10 @@ export class PickerColumnCmp {
</div>
</div>
`,
directives: [Backdrop, NgClass, NgFor, PickerColumnCmp],
host: {
'role': 'dialog'
},
directives: [PickerColumnCmp],
encapsulation: ViewEncapsulation.None,
})
export class PickerCmp {

4
src/components/popover/popover-component.ts
View File

@ -2,6 +2,7 @@ import { Component, ComponentResolver, ElementRef, HostListener, Renderer, ViewC
import { addSelector } from '../../config/bootstrap';
import { Animation } from '../../animations/animation';
import { Backdrop } from '../backdrop/backdrop';
import { Config } from '../../config/config';
import { CSS, nativeRaf } from '../../util/dom';
import { isPresent, pascalCaseToDashCase } from '../../util/util';
@ -27,7 +28,8 @@ import { ViewController } from '../nav/view-controller';
</div>
</div>
</div>
`
`,
directives: [Backdrop]
})
export class PopoverCmp {
@ViewChild('viewport', {read: ViewContainerRef}) viewport: ViewContainerRef;

27
src/components/radio/radio-button.ts
View File

@ -43,19 +43,20 @@ import { RadioGroup } from './radio-group';
*/
@Component({
selector: 'ion-radio',
template:
'<div class="radio-icon" [class.radio-checked]="_checked">' +
'<div class="radio-inner"></div>' +
'</div>' +
'<button role="radio" ' +
'type="button" ' +
'category="item-cover" ' +
'[id]="id" ' +
'[attr.aria-checked]="_checked" ' +
'[attr.aria-labelledby]="_labelId" ' +
'[attr.aria-disabled]="_disabled" ' +
'class="item-cover">' +
'</button>',
template: `
<div class="radio-icon" [class.radio-checked]="_checked">
<div class="radio-inner"></div>
</div>
<button role="radio"
type="button"
category="item-cover"
[id]="id"
[attr.aria-checked]="_checked"
[attr.aria-labelledby]="_labelId"
[attr.aria-disabled]="_disabled"
class="item-cover">
</button>
`,
host: {
'[class.radio-disabled]': '_disabled'
},

2
src/components/radio/radio-group.ts
View File

@ -5,7 +5,7 @@ import { ListHeader } from '../list/list';
import { isCheckedProperty } from '../../util/util';
import { RadioButton } from './radio-button';
const RADIO_VALUE_ACCESSOR = new Provider(
export const RADIO_VALUE_ACCESSOR = new Provider(
NG_VALUE_ACCESSOR, {useExisting: forwardRef(() => RadioGroup), multi: true});
/**

34
src/components/range/range.ts
View File

@ -1,4 +1,5 @@
import { AfterViewInit, Component, ElementRef, EventEmitter, forwardRef, Input, Inject, OnDestroy, OnInit, Optional, Output, Provider, QueryList, Renderer, ViewChild, ViewChildren, ViewEncapsulation } from '@angular/core';
import { NgFor, NgIf } from '@angular/common';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { clamp, isNumber, isPresent, isString, isTrueProperty } from '../../util/util';
@ -9,7 +10,7 @@ import { Item } from '../item/item';
import { UIEventManager } from '../../util/ui-event-manager';
const RANGE_VALUE_ACCESSOR = new Provider(
export const RANGE_VALUE_ACCESSOR = new Provider(
NG_VALUE_ACCESSOR, {useExisting: forwardRef(() => Range), multi: true});
/**
@ -17,9 +18,11 @@ const RANGE_VALUE_ACCESSOR = new Provider(
*/
@Component({
selector: '.range-knob-handle',
template:
'<div class="range-pin" *ngIf="range.pin">{{_val}}</div>' +
'<div class="range-knob"></div>',
template: `
<div class="range-pin" *ngIf="range.pin">{{_val}}</div>
<div class="range-knob"></div>
`,
directives: [NgIf],
host: {
'[class.range-knob-pressed]': 'pressed',
'[class.range-knob-min]': '_val===range.min',
@ -176,22 +179,23 @@ export class RangeKnob implements OnInit {
*/
@Component({
selector: 'ion-range',
template:
'<ng-content select="[range-left]"></ng-content>' +
'<div class="range-slider" #slider>' +
'<div class="range-tick" *ngFor="let t of _ticks" [style.left]="t.left" [class.range-tick-active]="t.active"></div>' +
'<div class="range-bar"></div>' +
'<div class="range-bar range-bar-active" [style.left]="_barL" [style.right]="_barR" #bar></div>' +
'<div class="range-knob-handle"></div>' +
'<div class="range-knob-handle" [upper]="true" *ngIf="_dual"></div>' +
'</div>' +
'<ng-content select="[range-right]"></ng-content>',
template: `
<ng-content select="[range-left]"></ng-content>
<div class="range-slider" #slider>
<div class="range-tick" *ngFor="let t of _ticks" [style.left]="t.left" [class.range-tick-active]="t.active"></div>
<div class="range-bar"></div>
<div class="range-bar range-bar-active" [style.left]="_barL" [style.right]="_barR" #bar></div>
<div class="range-knob-handle"></div>
<div class="range-knob-handle" [upper]="true" *ngIf="_dual"></div>
</div>
<ng-content select="[range-right]"></ng-content>
`,
directives: [NgFor, NgIf, RangeKnob],
host: {
'[class.range-disabled]': '_disabled',
'[class.range-pressed]': '_pressed',
'[class.range-has-pin]': '_pin'
},
directives: [RangeKnob],
providers: [RANGE_VALUE_ACCESSOR],
encapsulation: ViewEncapsulation.None,
})

31
src/components/refresher/refresher-content.ts
View File

@ -1,7 +1,10 @@
import { Component, Input, ViewEncapsulation } from '@angular/core';
import { NgIf } from '@angular/common';
import { Config } from '../../config/config';
import { Icon } from '../icon/icon';
import { Refresher } from './refresher';
import { Spinner } from '../spinner/spinner';
/**
@ -9,19 +12,21 @@ import { Refresher } from './refresher';
*/
@Component({
selector: 'ion-refresher-content',
template:
'<div class="refresher-pulling">' +
'<div class="refresher-pulling-icon" *ngIf="pullingIcon">' +
'<ion-icon [name]="pullingIcon"></ion-icon>' +
'</div>' +
'<div class="refresher-pulling-text" [innerHTML]="pullingText" *ngIf="pullingText"></div>' +
'</div>' +
'<div class="refresher-refreshing">' +
'<div class="refresher-refreshing-icon">' +
'<ion-spinner [name]="refreshingSpinner"></ion-spinner>' +
'</div>' +
'<div class="refresher-refreshing-text" [innerHTML]="refreshingText" *ngIf="refreshingText"></div>' +
'</div>',
template: `
<div class="refresher-pulling">
<div class="refresher-pulling-icon" *ngIf="pullingIcon">
<ion-icon [name]="pullingIcon"></ion-icon>
</div>
<div class="refresher-pulling-text" [innerHTML]="pullingText" *ngIf="pullingText"></div>
</div>
<div class="refresher-refreshing">
<div class="refresher-refreshing-icon">
<ion-spinner [name]="refreshingSpinner"></ion-spinner>
</div>
<div class="refresher-refreshing-text" [innerHTML]="refreshingText" *ngIf="refreshingText"></div>
</div>
`,
directives: [Icon, NgIf, Spinner],
host: {
'[attr.state]': 'r.state'
},

16
src/components/searchbar/searchbar.ts
View File

@ -1,7 +1,8 @@
import { Component, Directive, ElementRef, EventEmitter, HostBinding, Input, Optional, Output, ViewChild, ViewEncapsulation } from '@angular/core';
import { NgControl} from '@angular/forms';
import { NgControl, NgModel } from '@angular/forms';
import { Config } from '../../config/config';
import { Icon } from '../icon/icon';
import { isPresent } from '../../util/util';
import { Debouncer } from '../../util/debouncer';
@ -27,12 +28,6 @@ import { Debouncer } from '../../util/debouncer';
*/
@Component({
selector: 'ion-searchbar',
host: {
'[class.searchbar-has-value]': '_value',
'[class.searchbar-active]': '_isActive',
'[class.searchbar-show-cancel]': 'showCancelButton',
'[class.searchbar-left-aligned]': 'shouldAlignLeft()'
},
template:
'<div class="searchbar-input-container">' +
'<button (click)="cancelSearchbar($event)" (mousedown)="cancelSearchbar($event)" clear dark class="searchbar-md-cancel">' +
@ -43,6 +38,13 @@ import { Debouncer } from '../../util/debouncer';
'<button clear class="searchbar-clear-icon" (click)="clearInput($event)" (mousedown)="clearInput($event)"></button>' +
'</div>' +
'<button #cancelButton [tabindex]="_isActive ? 1 : -1" clear (click)="cancelSearchbar($event)" (mousedown)="cancelSearchbar($event)" class="searchbar-ios-cancel">{{cancelButtonText}}</button>',
directives: [Icon, NgModel],
host: {
'[class.searchbar-has-value]': '_value',
'[class.searchbar-active]': '_isActive',
'[class.searchbar-show-cancel]': 'showCancelButton',
'[class.searchbar-left-aligned]': 'shouldAlignLeft()'
},
encapsulation: ViewEncapsulation.None
})
export class Searchbar {

7
src/components/segment/segment.ts
View File

@ -42,9 +42,10 @@ import { isPresent, isTrueProperty } from '../../util/util';
*/
@Component({
selector: 'ion-segment-button',
template:
'<ng-content></ng-content>' +
'<ion-button-effect></ion-button-effect>',
template: `
<ng-content></ng-content>
<ion-button-effect></ion-button-effect>
`,
host: {
'tappable': '',
'class': 'segment-button',

31
src/components/select/select.ts
View File

@ -1,4 +1,5 @@
import { AfterContentInit, Component, ContentChildren, ElementRef, EventEmitter, forwardRef, Input, HostListener, OnDestroy, Optional, Output, Provider, Renderer, QueryList, ViewEncapsulation } from '@angular/core';
import { NgIf } from '@angular/common';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { ActionSheet } from '../action-sheet/action-sheet';
@ -10,7 +11,7 @@ import { Item } from '../item/item';
import { NavController } from '../nav/nav-controller';
import { Option } from '../option/option';
const SELECT_VALUE_ACCESSOR = new Provider(
export const SELECT_VALUE_ACCESSOR = new Provider(
NG_VALUE_ACCESSOR, {useExisting: forwardRef(() => Select), multi: true});
@ -116,19 +117,21 @@ const SELECT_VALUE_ACCESSOR = new Provider(
*/
@Component({
selector: 'ion-select',
template:
'<div *ngIf="!_text" class="select-placeholder select-text">{{placeholder}}</div>' +
'<div *ngIf="_text" class="select-text">{{_text}}</div>' +
'<div class="select-icon">' +
'<div class="select-icon-inner"></div>' +
'</div>' +
'<button aria-haspopup="true" ' +
'[id]="id" ' +
'category="item-cover" ' +
'[attr.aria-labelledby]="_labelId" ' +
'[attr.aria-disabled]="_disabled" ' +
'class="item-cover">' +
'</button>',
template: `
<div *ngIf="!_text" class="select-placeholder select-text">{{placeholder}}</div>
<div *ngIf="_text" class="select-text">{{_text}}</div>
<div class="select-icon">
<div class="select-icon-inner"></div>
</div>
<button aria-haspopup="true"
[id]="id"
category="item-cover"
[attr.aria-labelledby]="_labelId"
[attr.aria-disabled]="_disabled"
class="item-cover">
</button>
`,
directives: [NgIf],
host: {
'[class.select-disabled]': '_disabled'
},

17
src/components/spinner/spinner.ts
View File

@ -1,4 +1,5 @@
import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';
import { NgFor, NgStyle } from '@angular/common';
import { Config } from '../../config/config';
@ -97,13 +98,15 @@ import { Config } from '../../config/config';
*/
@Component({
selector: 'ion-spinner',
template:
'<svg viewBox="0 0 64 64" *ngFor="let i of _c" [ngStyle]="i.style">' +
'<circle [attr.r]="i.r" transform="translate(32,32)"></circle>' +
'</svg>' +
'<svg viewBox="0 0 64 64" *ngFor="let i of _l" [ngStyle]="i.style">' +
'<line [attr.y1]="i.y1" [attr.y2]="i.y2" transform="translate(32,32)"></line>' +
'</svg>',
template: `
<svg viewBox="0 0 64 64" *ngFor="let i of _c" [ngStyle]="i.style">
<circle [attr.r]="i.r" transform="translate(32,32)"></circle>
</svg>
<svg viewBox="0 0 64 64" *ngFor="let i of _l" [ngStyle]="i.style">
<line [attr.y1]="i.y1" [attr.y2]="i.y2" transform="translate(32,32)"></line>
</svg>
`,
directives: [NgFor, NgStyle],
host: {
'[class]': '_applied',
'[class.spinner-paused]': 'paused'

33
src/components/tabs/tabs.ts
View File

@ -1,8 +1,11 @@
import { Component, ElementRef, EventEmitter, Input, Output, Optional, Renderer, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
import { NgClass, NgFor, NgIf } from '@angular/common';
import { App } from '../app/app';
import { Badge } from '../badge/badge';
import { Config } from '../../config/config';
import { Content } from '../content/content';
import { Icon } from '../icon/icon';
import { Ion } from '../ion';
import { isBlank, isTrueProperty } from '../../util/util';
import { nativeRaf } from '../../util/dom';
@ -134,22 +137,20 @@ import { ViewController } from '../nav/view-controller';
*/
@Component({
selector: 'ion-tabs',
template:
'<ion-tabbar role="tablist" #tabbar>' +
'<a *ngFor="let t of _tabs" [tab]="t" class="tab-button" [class.tab-disabled]="!t.enabled" [class.tab-hidden]="!t.show" role="tab" href="#" (ionSelect)="select($event)">' +
'<ion-icon *ngIf="t.tabIcon" [name]="t.tabIcon" [isActive]="t.isSelected" class="tab-button-icon"></ion-icon>' +
'<span *ngIf="t.tabTitle" class="tab-button-text">{{t.tabTitle}}</span>' +
'<ion-badge *ngIf="t.tabBadge" class="tab-badge" [ngClass]="\'badge-\' + t.tabBadgeStyle">{{t.tabBadge}}</ion-badge>' +
'<ion-button-effect></ion-button-effect>' +
'</a>' +
'<tab-highlight></tab-highlight>' +
'</ion-tabbar>' +
'<ng-content></ng-content>' +
'<div #portal tab-portal></div>',
directives: [
TabButton,
TabHighlight
],
template: `
<ion-tabbar role="tablist" #tabbar>
<a *ngFor="let t of _tabs" [tab]="t" class="tab-button" [class.tab-disabled]="!t.enabled" [class.tab-hidden]="!t.show" role="tab" href="#" (ionSelect)="select($event)">
<ion-icon *ngIf="t.tabIcon" [name]="t.tabIcon" [isActive]="t.isSelected" class="tab-button-icon"></ion-icon>
<span *ngIf="t.tabTitle" class="tab-button-text">{{t.tabTitle}}</span>
<ion-badge *ngIf="t.tabBadge" class="tab-badge" [ngClass]="\'badge-\' + t.tabBadgeStyle">{{t.tabBadge}}</ion-badge>
<ion-button-effect></ion-button-effect>
</a>
<tab-highlight></tab-highlight>
</ion-tabbar>
<ng-content></ng-content>
<div #portal tab-portal></div>
`,
directives: [Badge, Icon, NgClass, NgFor, NgIf, TabButton, TabHighlight],
encapsulation: ViewEncapsulation.None,
})
export class Tabs extends Ion {

2
src/components/toast/toast-component.ts
View File

@ -1,4 +1,5 @@
import { AfterViewInit, Component, ElementRef, Renderer } from '@angular/core';
import { NgIf } from '@angular/common';
import { Animation } from '../../animations/animation';
import { Config } from '../../config/config';
@ -27,6 +28,7 @@ import { ViewController } from '../nav/view-controller';
</div>
</div>
`,
directives: [NgIf],
host: {
'role': 'dialog',
'[attr.aria-labelledby]': 'hdrId',

29
src/components/toggle/toggle.ts
View File

@ -8,7 +8,7 @@ import { pointerCoord } from '../../util/dom';
import { UIEventManager } from '../../util/ui-event-manager';
const TOGGLE_VALUE_ACCESSOR = new Provider(
export const TOGGLE_VALUE_ACCESSOR = new Provider(
NG_VALUE_ACCESSOR, {useExisting: forwardRef(() => Toggle), multi: true});
@ -51,19 +51,20 @@ const TOGGLE_VALUE_ACCESSOR = new Provider(
*/
@Component({
selector: 'ion-toggle',
template:
'<div class="toggle-icon" [class.toggle-checked]="_checked" [class.toggle-activated]="_activated">' +
'<div class="toggle-inner"></div>' +
'</div>' +
'<button role="checkbox" ' +
'type="button" ' +
'category="item-cover" ' +
'[id]="id" ' +
'[attr.aria-checked]="_checked" ' +
'[attr.aria-labelledby]="_labelId" ' +
'[attr.aria-disabled]="_disabled" ' +
'class="item-cover">' +
'</button>',
template: `
<div class="toggle-icon" [class.toggle-checked]="_checked" [class.toggle-activated]="_activated">
<div class="toggle-inner"></div>
</div>
<button role="checkbox"
type="button"
category="item-cover"
[id]="id"
[attr.aria-checked]="_checked"
[attr.aria-labelledby]="_labelId"
[attr.aria-disabled]="_disabled"
class="item-cover">
</button>
`,
host: {
'[class.toggle-disabled]': '_disabled'
},

17
src/components/toolbar/toolbar.ts
View File

@ -190,14 +190,15 @@ export class ToolbarBase extends Ion {
*/
@Component({
selector: 'ion-toolbar',
template:
'<div class="toolbar-background"></div>' +
'<ng-content select="[menuToggle],ion-buttons[left]"></ng-content>' +
'<ng-content select="ion-buttons[start]"></ng-content>' +
'<ng-content select="ion-buttons[end],ion-buttons[right]"></ng-content>' +
'<div class="toolbar-content">' +
'<ng-content></ng-content>' +
'</div>',
template: `
<div class="toolbar-background"></div>
<ng-content select="[menuToggle],ion-buttons[left]"></ng-content>
<ng-content select="ion-buttons[start]"></ng-content>
<ng-content select="ion-buttons[end],ion-buttons[right]"></ng-content>
<div class="toolbar-content">
<ng-content></ng-content>
</div>
`,
host: {
'class': 'toolbar',
'[class.statusbar-padding]': '_sbPadding'