mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 12:29:55 +08:00
fix(input): update input css/tests
This commit is contained in:
Adam Bradley
@ -11,10 +11,11 @@
|
||||
Card List
|
||||
</ion-list-header>
|
||||
|
||||
<ion-toggle>
|
||||
<ion-item>
|
||||
<ion-icon name="wifi" item-left></ion-icon>
|
||||
Wifi
|
||||
</ion-toggle>
|
||||
<ion-label>Wifi</ion-label>
|
||||
<ion-toggle></ion-toggle>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-icon name="heart" item-left></ion-icon>
|
||||
@ -44,10 +45,11 @@
|
||||
Card List Without Lines
|
||||
</ion-list-header>
|
||||
|
||||
<ion-toggle>
|
||||
<ion-item>
|
||||
<ion-icon name="wifi" item-left></ion-icon>
|
||||
Wifi
|
||||
</ion-toggle>
|
||||
<ion-label>Wifi</ion-label>
|
||||
<ion-toggle></ion-toggle>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-icon name="heart" item-left></ion-icon>
|
||||
@ -75,10 +77,11 @@
|
||||
Card With Items (No List)
|
||||
</ion-card-header>
|
||||
|
||||
<ion-toggle>
|
||||
<ion-item>
|
||||
<ion-icon name="wifi" item-left></ion-icon>
|
||||
Wifi
|
||||
</ion-toggle>
|
||||
<ion-label>Wifi</ion-label>
|
||||
<ion-toggle></ion-toggle>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-icon name="heart" item-left></ion-icon>
|
||||
|
||||
@ -19,7 +19,7 @@ $checkbox-ios-icon-checkmark-color: $background-ios-color !default;
|
||||
|
||||
$checkbox-ios-media-margin: $item-ios-padding-media-top $item-ios-padding-right $item-ios-padding-media-bottom 2px !default;
|
||||
|
||||
$checkbox-ios-disabled-opacity: 0.5 !default;
|
||||
$checkbox-ios-disabled-opacity: 0.4 !default;
|
||||
|
||||
|
||||
// iOS Checkbox Outer Circle: Unchecked
|
||||
|
||||
@ -9,7 +9,7 @@ $checkbox-md-border-bottom-color: $list-md-border-color !default;
|
||||
$checkbox-md-padding: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom 0 !default;
|
||||
$checkbox-md-margin: 0 !default;
|
||||
$checkbox-md-media-margin: $item-md-padding-media-top 36px $item-md-padding-media-bottom 4px !default;
|
||||
$checkbox-md-disabled-opacity: 0.5 !default;
|
||||
$checkbox-md-disabled-opacity: 0.4 !default;
|
||||
|
||||
$checkbox-md-icon-background-color-off: $list-md-background-color !default;
|
||||
$checkbox-md-icon-background-color-on: map-get($colors-md, primary) !default;
|
||||
@ -78,13 +78,17 @@ $checkbox-md-icon-border-color-on: map-get($colors-md, primary) !default;
|
||||
}
|
||||
|
||||
|
||||
// Material Design Checkbox within an item
|
||||
// Material Design Checkbox Within An Item
|
||||
// -----------------------------------------
|
||||
|
||||
.item ion-checkbox {
|
||||
margin: $checkbox-md-media-margin;
|
||||
}
|
||||
|
||||
ion-checkbox + .item-inner ion-label {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
|
||||
// Material Design Checkbox Color Mixin
|
||||
// --------------------------------------------------
|
||||
|
||||
@ -80,6 +80,7 @@ export class Checkbox {
|
||||
if (_item) {
|
||||
this.id = 'chk-' + _item.registerInput('checkbox');
|
||||
this._labelId = 'lbl-' + _item.id;
|
||||
this._item.setCssClass('item-checkbox', true);
|
||||
}
|
||||
}
|
||||
|
||||
@ -91,11 +92,11 @@ export class Checkbox {
|
||||
this.checked = !this.checked;
|
||||
}
|
||||
|
||||
@Input()
|
||||
get checked() {
|
||||
return this._checked;
|
||||
}
|
||||
|
||||
@Input()
|
||||
set checked(val) {
|
||||
if (!this._disabled) {
|
||||
this._checked = (val === true || val === 'true');
|
||||
@ -104,11 +105,11 @@ export class Checkbox {
|
||||
}
|
||||
}
|
||||
|
||||
@Input()
|
||||
get disabled() {
|
||||
return this._disabled;
|
||||
}
|
||||
|
||||
@Input()
|
||||
set disabled(val) {
|
||||
this._disabled = (val === true || val === 'true');
|
||||
this._item && this._item.setCssClass('item-checkbox-disabled', this._disabled);
|
||||
|
||||
@ -1,14 +1,25 @@
|
||||
@import "../../globals.core";
|
||||
|
||||
// Input Wrapper
|
||||
// Input/Textarea Wrapper
|
||||
// --------------------------------------------------
|
||||
|
||||
ion-input {
|
||||
ion-input,
|
||||
ion-textarea {
|
||||
display: block;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// Textarea Within An Item
|
||||
// --------------------------------------------------
|
||||
|
||||
.item.item-textarea {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
|
||||
// Native Text Input
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
@ -8,6 +8,6 @@ class E2EApp {
|
||||
url;
|
||||
|
||||
constructor() {
|
||||
this.url = 'hello';
|
||||
this.input1 = 'Text 1';
|
||||
}
|
||||
}
|
||||
|
||||
@ -9,12 +9,7 @@
|
||||
|
||||
<ion-item>
|
||||
<ion-label fixed>To</ion-label>
|
||||
<ion-input [(ngModel)]="url" type="url"></ion-input>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label fixed>Comments</ion-label>
|
||||
<ion-textarea value="Comment value"></ion-textarea>
|
||||
<ion-input [(ngModel)]="input1"></ion-input>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
@ -30,6 +25,11 @@
|
||||
</button>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label fixed>Comments</ion-label>
|
||||
<ion-textarea value="Comment value"></ion-textarea>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-icon name="globe" item-left></ion-icon>
|
||||
<ion-label fixed>Website</ion-label>
|
||||
|
||||
@ -90,9 +90,8 @@
|
||||
|
||||
<ion-item>
|
||||
<ion-label>No List</ion-label>
|
||||
<ion-input value="ListFreeeee">
|
||||
<ion-input value="ListFreeeee"></ion-input>
|
||||
</ion-item>
|
||||
<ion-textarea></ion-textarea>
|
||||
|
||||
</form>
|
||||
|
||||
|
||||
@ -27,11 +27,11 @@
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-textarea placeholder="ion-textarea Placeholder"></ion-textarea>
|
||||
<ion-textarea placeholder="Textarea Placeholder"></ion-textarea>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-textarea placeholder="ion-textarea Placeholder">ion-textarea value</ion-textarea>
|
||||
<ion-textarea placeholder="ion-textarea Placeholder" value="Textarea value"></ion-textarea>
|
||||
</ion-item>
|
||||
|
||||
</ion-list>
|
||||
|
||||
@ -9,10 +9,6 @@ ion-label {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
ion-label:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.item-input ion-label {
|
||||
max-width: 200px;
|
||||
@ -24,6 +20,7 @@ ion-label:empty {
|
||||
// --------------------------------------------------
|
||||
|
||||
ion-label[fixed] {
|
||||
flex: 0;
|
||||
width: 30%;
|
||||
min-width: 100px;
|
||||
max-width: 200px;
|
||||
|
||||
@ -5,9 +5,9 @@
|
||||
|
||||
<ion-content>
|
||||
|
||||
<ion-input>
|
||||
<ion-item>
|
||||
<ion-label>Username</ion-label>
|
||||
<input type="text" value="">
|
||||
</ion-input>
|
||||
<ion-input></ion-input>
|
||||
</ion-item>
|
||||
|
||||
</ion-content>
|
||||
|
||||
@ -8,10 +8,11 @@
|
||||
List Header
|
||||
</ion-list-header>
|
||||
|
||||
<ion-toggle>
|
||||
<ion-item>
|
||||
<ion-icon name="wifi" item-left></ion-icon>
|
||||
Wifi
|
||||
</ion-toggle>
|
||||
<ion-label>Wifi</ion-label>
|
||||
<ion-toggle></ion-toggle>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-icon name="heart" item-left></ion-icon>
|
||||
|
||||
@ -20,13 +20,15 @@
|
||||
List Link Item 2
|
||||
</a>
|
||||
|
||||
<ion-toggle checked="true">
|
||||
Toggle
|
||||
</ion-toggle>
|
||||
<ion-item>
|
||||
<ion-label>Toggle</ion-label>
|
||||
<ion-toggle checked="true"></ion-toggle>
|
||||
</ion-item>
|
||||
|
||||
<ion-checkbox checked="true">
|
||||
Checkbox
|
||||
</ion-checkbox>
|
||||
<ion-item>
|
||||
<ion-label>Checkbox</ion-label>
|
||||
<ion-checkbox checked="true"></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<button ion-item>
|
||||
<ion-icon name="boat" item-left></ion-icon>
|
||||
|
||||
@ -6,10 +6,11 @@
|
||||
List With No Lines
|
||||
</ion-list-header>
|
||||
|
||||
<ion-toggle>
|
||||
<ion-item>
|
||||
<ion-icon name="wifi" item-left></ion-icon>
|
||||
Wifi
|
||||
</ion-toggle>
|
||||
<ion-label>Wifi</ion-label>
|
||||
<ion-toggle></ion-toggle>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-icon name="heart" item-left></ion-icon>
|
||||
|
||||
@ -41,10 +41,10 @@
|
||||
</p>
|
||||
|
||||
<ion-card>
|
||||
<ion-input>
|
||||
<ion-item>
|
||||
<ion-label>Username:</ion-label>
|
||||
<input type="text">
|
||||
</ion-input>
|
||||
<ion-input></ion-input>
|
||||
</ion-item>
|
||||
</ion-card>
|
||||
|
||||
<p>
|
||||
|
||||
@ -71,14 +71,14 @@ class E2EPage {
|
||||
</ion-navbar>
|
||||
<ion-content>
|
||||
<ion-list>
|
||||
<ion-input>
|
||||
<ion-item>
|
||||
<ion-label>UserId</ion-label>
|
||||
<input type="number" [(ngModel)]="data.userId">
|
||||
</ion-input>
|
||||
<ion-input>
|
||||
<ion-input type="number" [(ngModel)]="data.userId"></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Name</ion-label>
|
||||
<input type="text" [(ngModel)]="data.name">
|
||||
</ion-input>
|
||||
<ion-input [(ngModel)]="data.name"></ion-input>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
<button full (click)="submit()">Submit</button>
|
||||
</ion-content>
|
||||
|
||||
@ -33,10 +33,10 @@ class MyCmpTest{}
|
||||
<button ion-item (click)="pushPrimaryHeaderPage()">Push to PrimaryHeaderPage</button>
|
||||
<button ion-item (click)="pushAnother()">Push to AnotherPage</button>
|
||||
|
||||
<ion-input>
|
||||
<ion-item>
|
||||
<ion-label>Text Input</ion-label>
|
||||
<textarea></textarea>
|
||||
</ion-input>
|
||||
<ion-textarea></ion-textarea>
|
||||
</ion-item>
|
||||
|
||||
<button ion-item [navPush]="[pushPage, {id: 42}]">Push FullPage w/ [navPush] array</button>
|
||||
<button ion-item [navPush]="pushPage" [navParams]="{id:40}">Push w/ [navPush] and [navParams]</button>
|
||||
@ -218,10 +218,10 @@ class PrimaryHeaderPage {
|
||||
<ion-content>
|
||||
<ion-list>
|
||||
|
||||
<ion-input>
|
||||
<ion-item>
|
||||
<ion-label>Text Input</ion-label>
|
||||
<textarea></textarea>
|
||||
</ion-input>
|
||||
<ion-textarea></ion-textarea>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>Back button hidden w/ <code>ion-navbar hideBackButton</code></ion-item>
|
||||
<button ion-item (click)="nav.pop()">Pop</button>
|
||||
|
||||
@ -9,17 +9,22 @@ import {RadioGroup} from './radio-group';
|
||||
|
||||
/**
|
||||
* @description
|
||||
* A radio button with a unique value. Note that all `<ion-radio>` components
|
||||
* must be wrapped within a `<ion-list radio-group>`, and there must be at
|
||||
* least two `<ion-radio>` components within the radio group.
|
||||
* A radio button with a unique value. Note that all `<ion-radio>`
|
||||
* components must be wrapped within a `<ion-list radio-group>`,
|
||||
* and there must be at least two `<ion-radio>` components within
|
||||
* the radio group.
|
||||
*
|
||||
* See the [Angular 2 Docs](https://angular.io/docs/js/latest/api/forms/) for more info on forms and input.
|
||||
* See the [Angular 2 Docs](https://angular.io/docs/js/latest/api/forms/) for
|
||||
* more info on forms and input.
|
||||
*
|
||||
* @usage
|
||||
* ```html
|
||||
* <ion-radio value="my-value" checked="true">
|
||||
* Radio Label
|
||||
* </ion-radio>
|
||||
*
|
||||
* <ion-item>
|
||||
* <ion-label>Radio Label</ion-label>
|
||||
* <ion-radio value="radio-value"></ion-radio>
|
||||
* </ion-item>
|
||||
*
|
||||
* ```
|
||||
* @demo /docs/v2/demos/radio/
|
||||
* @see {@link /docs/v2/components#radio Radio Component Docs}
|
||||
@ -61,6 +66,7 @@ export class RadioButton {
|
||||
if (_item) {
|
||||
this.id = 'rb-' + _item.registerInput('radio');
|
||||
this._labelId = 'lbl-' + _item.id;
|
||||
this._item.setCssClass('item-radio', true);
|
||||
}
|
||||
|
||||
if (_group) {
|
||||
@ -78,16 +84,11 @@ export class RadioButton {
|
||||
}
|
||||
|
||||
set checked(val) {
|
||||
<<<<<<< HEAD
|
||||
if (!this._disabled) {
|
||||
this._checked = (val === true || val === 'true');
|
||||
this.select.emit(this);
|
||||
this._item && this._item.setCssClass('item-radio-checked', this._checked);
|
||||
}
|
||||
=======
|
||||
this._checked = (val === true || val === 'true');
|
||||
this.select.emit(this);
|
||||
>>>>>>> 581c666... refactor(radio): place ion-radio insde of ion-item
|
||||
}
|
||||
|
||||
@Input()
|
||||
@ -97,11 +98,7 @@ export class RadioButton {
|
||||
|
||||
set disabled(val) {
|
||||
this._disabled = (val === true || val === 'true');
|
||||
<<<<<<< HEAD
|
||||
this._item && this._item.setCssClass('item-radio-disabled', this._disabled);
|
||||
=======
|
||||
this._item && this._item.setCssClass('radio-disabled', val);
|
||||
>>>>>>> 581c666... refactor(radio): place ion-radio insde of ion-item
|
||||
}
|
||||
|
||||
/**
|
||||
@ -109,11 +106,7 @@ export class RadioButton {
|
||||
*/
|
||||
setChecked(val: boolean) {
|
||||
this._checked = val;
|
||||
<<<<<<< HEAD
|
||||
this._item && this._item.setCssClass('item-radio-checked', val);
|
||||
=======
|
||||
this._item && this._item.setCssClass('radio-checked', val);
|
||||
>>>>>>> 581c666... refactor(radio): place ion-radio insde of ion-item
|
||||
}
|
||||
|
||||
/**
|
||||
@ -121,11 +114,7 @@ export class RadioButton {
|
||||
*/
|
||||
@HostListener('click', ['$event'])
|
||||
private _click(ev) {
|
||||
<<<<<<< HEAD
|
||||
console.debug('radio, select', this.value);
|
||||
=======
|
||||
console.debug('RadioButton, select', this.value);
|
||||
>>>>>>> 581c666... refactor(radio): place ion-radio insde of ion-item
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
this.toggle();
|
||||
|
||||
@ -8,14 +8,14 @@ import {isDefined} from '../../util/util';
|
||||
|
||||
/**
|
||||
* A radio group is a group of radio components, and its value comes
|
||||
* fr0m the selected radio button's value. Selecting a radio button
|
||||
* from the selected radio button's value. Selecting a radio button
|
||||
* in the group unselects all others in the group.
|
||||
*
|
||||
* See the [Angular 2 Docs](https://angular.io/docs/js/latest/api/forms/) for more info on forms and input.
|
||||
*
|
||||
* @usage
|
||||
* ```html
|
||||
* <ion-list radio-group ngControl="autoManufacturers">
|
||||
* <ion-list radio-group [(ngModel)]="autoManufacturers">
|
||||
*
|
||||
* <ion-list-header>
|
||||
* Auto Manufacturers
|
||||
|
||||
@ -1,167 +0,0 @@
|
||||
import {Directive, ElementRef, Renderer, Optional, Input, Output, ContentChild, EventEmitter} from 'angular2/core';
|
||||
import {NgControl} from 'angular2/common';
|
||||
|
||||
import {RadioButton} from './radio-button';
|
||||
import {ListHeader} from '../list/list';
|
||||
import {isDefined} from '../../util/util';
|
||||
|
||||
|
||||
/**
|
||||
* A radio group is a group of radio components, and its value comes
|
||||
* fr0m the selected radio button's value. Selecting a radio button
|
||||
* in the group unselects all others in the group.
|
||||
*
|
||||
* See the [Angular 2 Docs](https://angular.io/docs/js/latest/api/forms/) for more info on forms and input.
|
||||
*
|
||||
* @usage
|
||||
* ```html
|
||||
* <ion-list radio-group ngControl="autoManufacturers">
|
||||
*
|
||||
* <ion-list-header>
|
||||
* Auto Manufacturers
|
||||
* </ion-list-header>
|
||||
*
|
||||
* <ion-item>
|
||||
* <ion-label>Cord</ion-label>
|
||||
* <ion-radio value="cord"></ion-radio>
|
||||
* </ion-item>
|
||||
*
|
||||
* <ion-item>
|
||||
* <ion-label>Duesenberg</ion-label>
|
||||
* <ion-radio value="duesenberg" checked="true"></ion-radio>
|
||||
* </ion-item>
|
||||
*
|
||||
* <ion-item>
|
||||
* <ion-label>Hudson</ion-label>
|
||||
* <ion-radio value="hudson"></ion-radio>
|
||||
* </ion-item>
|
||||
*
|
||||
* <ion-item>
|
||||
* <ion-label>Packard</ion-label>
|
||||
* <ion-radio value="packard"></ion-radio>
|
||||
* </ion-item>
|
||||
*
|
||||
* <ion-item>
|
||||
* <ion-label>Studebaker</ion-label>
|
||||
* <ion-radio value="studebaker"></ion-radio>
|
||||
* </ion-item>
|
||||
*
|
||||
* </ion-list>
|
||||
* ```
|
||||
* @demo /docs/v2/demos/radio/
|
||||
* @see {@link /docs/v2/components#radio Radio Component Docs}
|
||||
*/
|
||||
@Directive({
|
||||
selector: '[radio-group]',
|
||||
host: {
|
||||
'[attr.aria-activedescendant]': 'activeId',
|
||||
'role': 'radiogroup'
|
||||
}
|
||||
})
|
||||
export class RadioGroup {
|
||||
private _buttons: Array<RadioButton> = [];
|
||||
|
||||
id;
|
||||
value;
|
||||
|
||||
@Output() change: EventEmitter<RadioGroup> = new EventEmitter();
|
||||
|
||||
constructor(
|
||||
@Optional() ngControl: NgControl,
|
||||
private _renderer: Renderer,
|
||||
private _elementRef: ElementRef
|
||||
) {
|
||||
this.id = ++radioGroupIds;
|
||||
|
||||
if (ngControl) {
|
||||
ngControl.valueAccessor = this;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* Angular2 Forms API method called by the model (Control) on change to update
|
||||
* the checked value.
|
||||
* https://github.com/angular/angular/blob/master/modules/angular2/src/forms/directives/shared.ts#L34
|
||||
*/
|
||||
writeValue(value) {
|
||||
this.value = isDefined(value) ? value : '';
|
||||
this._buttons.forEach(button => {
|
||||
let isChecked = (button.value === this.value);
|
||||
button.setChecked(isChecked);
|
||||
if (isChecked) {
|
||||
this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-activedescendant', button.id);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
register(button: RadioButton) {
|
||||
this._buttons.push(button);
|
||||
|
||||
button.select.subscribe(() => {
|
||||
this.writeValue(button.value);
|
||||
this.onChange(button.value);
|
||||
this.change.emit(this);
|
||||
});
|
||||
}
|
||||
|
||||
ngAfterContentInit() {
|
||||
this._buttons.forEach(button => {
|
||||
|
||||
if (isDefined(this.value)) {
|
||||
let isChecked = (button.value === this.value) || button.checked;
|
||||
button.setChecked(isChecked);
|
||||
if (isChecked) {
|
||||
this.writeValue(button.value);
|
||||
//this.onChange(button.value);
|
||||
this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-activedescendant', button.id);
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
@ContentChild(ListHeader)
|
||||
private set _header(header) {
|
||||
if (header) {
|
||||
if (!header.id) {
|
||||
header.id = 'rg-hdr-' + this.id;
|
||||
}
|
||||
this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-describedby', header.id);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
onChange(val) {
|
||||
// TODO: figure the whys and the becauses
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
onTouched(val) {
|
||||
// TODO: figure the whys and the becauses
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* Angular2 Forms API method called by the view (NgControl) to register the
|
||||
* onChange event handler that updates the model (Control).
|
||||
* https://github.com/angular/angular/blob/master/modules/angular2/src/forms/directives/shared.ts#L27
|
||||
* @param {Function} fn the onChange event handler.
|
||||
*/
|
||||
registerOnChange(fn) { this.onChange = fn; }
|
||||
|
||||
/**
|
||||
* @private
|
||||
* Angular2 Forms API method called by the the view (NgControl) to register
|
||||
* the onTouched event handler that marks the model (Control) as touched.
|
||||
* @param {Function} fn onTouched event handler.
|
||||
*/
|
||||
registerOnTouched(fn) { this.onTouched = fn; }
|
||||
|
||||
}
|
||||
|
||||
let radioGroupIds = -1;
|
||||
@ -1,167 +0,0 @@
|
||||
import {Directive, ElementRef, Renderer, Optional, Input, Output, ContentChild, EventEmitter} from 'angular2/core';
|
||||
import {NgControl} from 'angular2/common';
|
||||
|
||||
import {RadioButton} from './radio-button';
|
||||
import {ListHeader} from '../list/list';
|
||||
import {isDefined} from '../../util/util';
|
||||
|
||||
|
||||
/**
|
||||
* A radio group is a group of radio components, and its value comes
|
||||
* fr0m the selected radio button's value. Selecting a radio button
|
||||
* in the group unselects all others in the group.
|
||||
*
|
||||
* See the [Angular 2 Docs](https://angular.io/docs/js/latest/api/forms/) for more info on forms and input.
|
||||
*
|
||||
* @usage
|
||||
* ```html
|
||||
* <ion-list radio-group ngControl="autoManufacturers">
|
||||
*
|
||||
* <ion-list-header>
|
||||
* Auto Manufacturers
|
||||
* </ion-list-header>
|
||||
*
|
||||
* <ion-item>
|
||||
* <ion-label>Cord</ion-label>
|
||||
* <ion-radio value="cord"></ion-radio>
|
||||
* </ion-item>
|
||||
*
|
||||
* <ion-item>
|
||||
* <ion-label>Duesenberg</ion-label>
|
||||
* <ion-radio value="duesenberg" checked="true"></ion-radio>
|
||||
* </ion-item>
|
||||
*
|
||||
* <ion-item>
|
||||
* <ion-label>Hudson</ion-label>
|
||||
* <ion-radio value="hudson"></ion-radio>
|
||||
* </ion-item>
|
||||
*
|
||||
* <ion-item>
|
||||
* <ion-label>Packard</ion-label>
|
||||
* <ion-radio value="packard"></ion-radio>
|
||||
* </ion-item>
|
||||
*
|
||||
* <ion-item>
|
||||
* <ion-label>Studebaker</ion-label>
|
||||
* <ion-radio value="studebaker"></ion-radio>
|
||||
* </ion-item>
|
||||
*
|
||||
* </ion-list>
|
||||
* ```
|
||||
* @demo /docs/v2/demos/radio/
|
||||
* @see {@link /docs/v2/components#radio Radio Component Docs}
|
||||
*/
|
||||
@Directive({
|
||||
selector: '[radio-group]',
|
||||
host: {
|
||||
'[attr.aria-activedescendant]': 'activeId',
|
||||
'role': 'radiogroup'
|
||||
}
|
||||
})
|
||||
export class RadioGroup {
|
||||
private _buttons: Array<RadioButton> = [];
|
||||
|
||||
id;
|
||||
value;
|
||||
|
||||
@Output() change: EventEmitter<RadioGroup> = new EventEmitter();
|
||||
|
||||
constructor(
|
||||
@Optional() ngControl: NgControl,
|
||||
private _renderer: Renderer,
|
||||
private _elementRef: ElementRef
|
||||
) {
|
||||
this.id = ++radioGroupIds;
|
||||
|
||||
if (ngControl) {
|
||||
ngControl.valueAccessor = this;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* Angular2 Forms API method called by the model (Control) on change to update
|
||||
* the checked value.
|
||||
* https://github.com/angular/angular/blob/master/modules/angular2/src/forms/directives/shared.ts#L34
|
||||
*/
|
||||
writeValue(value) {
|
||||
this.value = isDefined(value) ? value : '';
|
||||
this._buttons.forEach(button => {
|
||||
let isChecked = (button.value === this.value);
|
||||
button.setChecked(isChecked);
|
||||
if (isChecked) {
|
||||
this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-activedescendant', button.id);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
register(button: RadioButton) {
|
||||
this._buttons.push(button);
|
||||
|
||||
button.select.subscribe(() => {
|
||||
this.writeValue(button.value);
|
||||
this.onChange(button.value);
|
||||
this.change.emit(this);
|
||||
});
|
||||
}
|
||||
|
||||
ngAfterContentInit() {
|
||||
this._buttons.forEach(button => {
|
||||
|
||||
if (isDefined(this.value)) {
|
||||
let isChecked = (button.value === this.value) || button.checked;
|
||||
button.setChecked(isChecked);
|
||||
if (isChecked) {
|
||||
this.writeValue(button.value);
|
||||
//this.onChange(button.value);
|
||||
this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-activedescendant', button.id);
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
@ContentChild(ListHeader)
|
||||
private set _header(header) {
|
||||
if (header) {
|
||||
if (!header.id) {
|
||||
header.id = 'rg-hdr-' + this.id;
|
||||
}
|
||||
this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-describedby', header.id);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
onChange(val) {
|
||||
// TODO: figure the whys and the becauses
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
onTouched(val) {
|
||||
// TODO: figure the whys and the becauses
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* Angular2 Forms API method called by the view (NgControl) to register the
|
||||
* onChange event handler that updates the model (Control).
|
||||
* https://github.com/angular/angular/blob/master/modules/angular2/src/forms/directives/shared.ts#L27
|
||||
* @param {Function} fn the onChange event handler.
|
||||
*/
|
||||
registerOnChange(fn) { this.onChange = fn; }
|
||||
|
||||
/**
|
||||
* @private
|
||||
* Angular2 Forms API method called by the the view (NgControl) to register
|
||||
* the onTouched event handler that marks the model (Control) as touched.
|
||||
* @param {Function} fn onTouched event handler.
|
||||
*/
|
||||
registerOnTouched(fn) { this.onTouched = fn; }
|
||||
|
||||
}
|
||||
|
||||
let radioGroupIds = -1;
|
||||
@ -10,7 +10,7 @@ $radio-ios-icon-height: 21px !default;
|
||||
$radio-ios-icon-border-width: 2px !default;
|
||||
$radio-ios-icon-border-style: solid !default;
|
||||
|
||||
$radio-ios-disabled-opacity: 0.5 !default;
|
||||
$radio-ios-disabled-opacity: 0.4 !default;
|
||||
|
||||
|
||||
// iOS Radio Circle: Unchecked
|
||||
@ -32,10 +32,10 @@ $radio-ios-disabled-opacity: 0.5 !default;
|
||||
border-width: $radio-ios-icon-border-width;
|
||||
border-style: $radio-ios-icon-border-style;
|
||||
border-color: $radio-ios-color-on;
|
||||
top: 3px;
|
||||
top: 4px;
|
||||
left: 7px;
|
||||
width: 4px;
|
||||
height: 10px;
|
||||
width: 5px;
|
||||
height: 12px;
|
||||
border-left: none;
|
||||
border-top: none;
|
||||
transform: rotate(45deg);
|
||||
@ -60,6 +60,10 @@ $radio-ios-disabled-opacity: 0.5 !default;
|
||||
margin: $item-ios-padding-media-top ($item-ios-padding-right / 2) $item-ios-padding-media-bottom ($item-ios-padding-left / 2);
|
||||
}
|
||||
|
||||
.item-radio ion-label {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
|
||||
// iOS Radio Item Label: Checked
|
||||
// -----------------------------------------
|
||||
|
||||
@ -15,7 +15,7 @@ $radio-md-icon-border-radius: 50% !default;
|
||||
$radio-md-transition-duration: 280ms !default;
|
||||
$radio-md-transition-easing: cubic-bezier(.4, 0, .2, 1) !default;
|
||||
|
||||
$radio-md-disabled-opacity: 0.5 !default;
|
||||
$radio-md-disabled-opacity: 0.4 !default;
|
||||
|
||||
|
||||
// Material Design Radio Outer Circle: Unchecked
|
||||
@ -83,7 +83,11 @@ $radio-md-disabled-opacity: 0.5 !default;
|
||||
|
||||
.item ion-radio {
|
||||
display: block;
|
||||
margin: $item-md-padding-media-top ($item-md-padding-right / 2) $item-md-padding-media-bottom ($item-md-padding-left / 2);
|
||||
margin: $item-md-padding-media-top ($item-md-padding-right / 2) $item-md-padding-media-bottom 0;
|
||||
}
|
||||
|
||||
.item-radio ion-label {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
|
||||
@ -100,10 +104,13 @@ $radio-md-disabled-opacity: 0.5 !default;
|
||||
|
||||
@mixin radio-theme-md($color-name, $color-value) {
|
||||
|
||||
ion-radio[#{$color-name}] .radio-checked {
|
||||
border-color: $color-value;
|
||||
ion-radio[#{$color-name}] {
|
||||
|
||||
.radio-icon {
|
||||
.radio-checked {
|
||||
border-color: $color-value;
|
||||
}
|
||||
|
||||
.radio-inner {
|
||||
background-color: $color-value;
|
||||
}
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
|
||||
it('should check Cherry', function() {
|
||||
element(by.css('.e2eCherry button')).click();
|
||||
element(by.css('[value="cherry"] button')).click();
|
||||
});
|
||||
|
||||
@ -12,4 +12,24 @@ $select-ios-padding-left: $item-ios-padding-left !default;
|
||||
|
||||
ion-select {
|
||||
padding: $select-ios-padding-top $select-ios-padding-right $select-ios-padding-bottom $select-ios-padding-left;
|
||||
}
|
||||
|
||||
.select-icon {
|
||||
position: relative;
|
||||
width: 12px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.select-icon .select-icon-inner {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 5px;
|
||||
margin-top: -2px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 5px solid;
|
||||
border-right: 5px solid transparent;
|
||||
border-left: 5px solid transparent;
|
||||
color: #999;
|
||||
pointer-events: none;
|
||||
}
|
||||
@ -12,4 +12,28 @@ $select-md-padding-left: $item-md-padding-left !default;
|
||||
|
||||
ion-select {
|
||||
padding: $select-md-padding-top $select-md-padding-right $select-md-padding-bottom $select-md-padding-left;
|
||||
}
|
||||
|
||||
.item-select ion-label {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.select-icon {
|
||||
position: relative;
|
||||
width: 12px;
|
||||
height: 19px;
|
||||
}
|
||||
|
||||
.select-icon .select-icon-inner {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 5px;
|
||||
margin-top: -3px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 5px solid;
|
||||
border-right: 5px solid transparent;
|
||||
border-left: 5px solid transparent;
|
||||
color: #999;
|
||||
pointer-events: none;
|
||||
}
|
||||
@ -18,26 +18,6 @@ ion-select {
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.select-icon {
|
||||
position: relative;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.select-icon .select-icon-inner {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 5px;
|
||||
margin-top: -2px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 5px solid;
|
||||
border-right: 5px solid transparent;
|
||||
border-left: 5px solid transparent;
|
||||
color: #999;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.item-multiple-inputs ion-select {
|
||||
position: relative;
|
||||
}
|
||||
@ -4,7 +4,7 @@ import {NgControl} from 'angular2/common';
|
||||
import {Alert} from '../alert/alert';
|
||||
import {Form} from '../../util/form';
|
||||
import {Item} from '../item/item';
|
||||
import {merge} from '../../util/util';
|
||||
import {merge, isDefined} from '../../util/util';
|
||||
import {NavController} from '../nav/nav-controller';
|
||||
import {Option} from '../option/option';
|
||||
|
||||
@ -143,6 +143,7 @@ export class Select {
|
||||
if (_item) {
|
||||
this.id = 'sel-' + _item.registerInput('select');
|
||||
this._labelId = 'lbl-' + _item.id;
|
||||
this._item.setCssClass('item-select', true);
|
||||
}
|
||||
|
||||
if (!_nav) {
|
||||
@ -154,24 +155,22 @@ export class Select {
|
||||
* @private
|
||||
*/
|
||||
ngAfterContentInit() {
|
||||
var selectedOption = this.options.toArray().find(o => o.checked);
|
||||
let values = [];
|
||||
let selectedTexts = [];
|
||||
|
||||
if (!selectedOption) {
|
||||
this.options.toArray().forEach(o => {
|
||||
o.checked = o.value === this.value + '';
|
||||
if (o.checked) {
|
||||
selectedOption = o;
|
||||
}
|
||||
});
|
||||
this.options.toArray().forEach(option => {
|
||||
if (option.checked) {
|
||||
values.push( isDefined(option.value) ? option.value : option.text );
|
||||
selectedTexts.push(option.text);
|
||||
}
|
||||
});
|
||||
|
||||
} else {
|
||||
this.value = selectedOption.value;
|
||||
this._selectedText = selectedOption.text;
|
||||
this.value = values.join(',');
|
||||
this._selectedText = selectedTexts.join(', ');
|
||||
|
||||
setTimeout(()=> {
|
||||
this.onChange(this.value);
|
||||
});
|
||||
}
|
||||
setTimeout(()=> {
|
||||
this.onChange(this.value);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -1 +1,4 @@
|
||||
|
||||
it('should open toppings multiple select', function() {
|
||||
element(by.css('.e2eSelectToppings button')).click();
|
||||
});
|
||||
@ -6,10 +6,10 @@
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Toppings</ion-label>
|
||||
<ion-select [(ngModel)]="toppings" multiple="true" cancelText="Nah" okText="Okay!">
|
||||
<ion-option value="bacon">Bacon</ion-option>
|
||||
<ion-select [(ngModel)]="toppings" multiple="true" cancelText="Nah" okText="Okay!" class="e2eSelectToppings">
|
||||
<ion-option value="bacon" checked="true">Bacon</ion-option>
|
||||
<ion-option value="olives">Black Olives</ion-option>
|
||||
<ion-option value="xcheese">Extra Cheese</ion-option>
|
||||
<ion-option value="xcheese" checked="true">Extra Cheese</ion-option>
|
||||
<ion-option value="peppers">Green Peppers</ion-option>
|
||||
<ion-option value="mushrooms">Mushrooms</ion-option>
|
||||
<ion-option value="onions">Onions</ion-option>
|
||||
|
||||
@ -1 +1,4 @@
|
||||
|
||||
it('should open gender single select', function() {
|
||||
element(by.css('.e2eSelectGender button')).click();
|
||||
});
|
||||
@ -1,10 +1,12 @@
|
||||
<ion-toolbar><ion-title>Select Item: Single Value</ion-title></ion-toolbar>
|
||||
<ion-toolbar>
|
||||
<ion-title>Select Item: Single Value</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-content class="outer-content">
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Gender</ion-label>
|
||||
<ion-select [(ngModel)]="gender">
|
||||
<ion-select [(ngModel)]="gender" class="e2eSelectGender">
|
||||
<ion-option value="f" checked="true">Female</ion-option>
|
||||
<ion-option value="m">Male</ion-option>
|
||||
</ion-select>
|
||||
@ -38,15 +40,13 @@
|
||||
<ion-item>
|
||||
<ion-label>Music</ion-label>
|
||||
<ion-select [(ngModel)]="music" [alertOptions]="musicAlertOpts">
|
||||
<ion-option value="aliceinchains">Alice in Chains</ion-option>
|
||||
<ion-option value="greenday">Green Day</ion-option>
|
||||
<ion-option value="hole">Hole</ion-option>
|
||||
<ion-option value="korn">Korn</ion-option>
|
||||
<ion-option value="nirvana">Nirvana</ion-option>
|
||||
<ion-option value="pearljam">Pearl Jam</ion-option>
|
||||
<ion-option value="smashingpumpkins">Smashing Pumpkins</ion-option>
|
||||
<ion-option value="soundgarden">Soundgarden</ion-option>
|
||||
<ion-option value="stp">Stone Temple Pilots</ion-option>
|
||||
<ion-option>Alice in Chains</ion-option>
|
||||
<ion-option>Green Day</ion-option>
|
||||
<ion-option>Nirvana</ion-option>
|
||||
<ion-option>Pearl Jam</ion-option>
|
||||
<ion-option>Smashing Pumpkins</ion-option>
|
||||
<ion-option>Soundgarden</ion-option>
|
||||
<ion-option>Stone Temple Pilots</ion-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
@ -60,11 +60,11 @@
|
||||
<ion-option value="05">May</ion-option>
|
||||
<ion-option value="06">June</ion-option>
|
||||
<ion-option value="07">July</ion-option>
|
||||
<ion-option value="08" checked="true">August</ion-option>
|
||||
<ion-option value="08">August</ion-option>
|
||||
<ion-option value="09">September</ion-option>
|
||||
<ion-option value="10">October</ion-option>
|
||||
<ion-option value="11">November</ion-option>
|
||||
<ion-option value="12">December</ion-option>
|
||||
<ion-option value="12" checked="true">December</ion-option>
|
||||
</ion-select>
|
||||
<ion-select [(ngModel)]="year">
|
||||
<ion-option>1989</ion-option>
|
||||
@ -86,6 +86,7 @@
|
||||
<code>gaming: {{gaming}}</code><br>
|
||||
<code>os: {{os}}</code><br>
|
||||
<code>music: {{music}}</code><br>
|
||||
<code>date: {{month}}/{{year}}</code><br>
|
||||
</p>
|
||||
|
||||
</ion-content>
|
||||
|
||||
@ -11,14 +11,14 @@ import {App, Page, NavController, Modal, ViewController, Tabs} from 'ionic/ionic
|
||||
</ion-navbar>
|
||||
<ion-content padding>
|
||||
<ion-card>
|
||||
<ion-input>
|
||||
<ion-item>
|
||||
<ion-label>Username:</ion-label>
|
||||
<input type="text">
|
||||
</ion-input>
|
||||
<ion-input>
|
||||
<ion-input></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Password:</ion-label>
|
||||
<input type="password">
|
||||
</ion-input>
|
||||
<ion-input type="password"></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<button block id="signIn" (click)="push()">Sign In</button>
|
||||
</ion-item>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
|
||||
it('should check apple via switch element click', function() {
|
||||
element(by.css('[ngControl=appleCtrl] .toggle-media')).click();
|
||||
element(by.css('[value="apple"] button')).click();
|
||||
});
|
||||
|
||||
|
||||
|
||||
@ -25,7 +25,7 @@ $toggle-ios-media-padding: 6px ($item-ios-padding-right / 2) 5px ($i
|
||||
|
||||
$toggle-ios-transition-duration: 300ms !default;
|
||||
|
||||
$toggle-ios-disabled-opacity: 0.5 !default;
|
||||
$toggle-ios-disabled-opacity: 0.4 !default;
|
||||
|
||||
|
||||
// iOS Toggle
|
||||
|
||||
@ -22,7 +22,7 @@ $toggle-md-media-padding: 12px ($item-md-padding-right / 2) 12px
|
||||
|
||||
$toggle-md-transition-duration: 300ms !default;
|
||||
|
||||
$toggle-md-disabled-opacity: 0.5 !default;
|
||||
$toggle-md-disabled-opacity: 0.4 !default;
|
||||
|
||||
|
||||
// Material Design Toggle
|
||||
@ -101,7 +101,7 @@ ion-toggle {
|
||||
}
|
||||
|
||||
|
||||
// Material Design Toggle within an item
|
||||
// Material Design Toggle Within An Item
|
||||
// -----------------------------------------
|
||||
|
||||
.item ion-toggle {
|
||||
@ -110,14 +110,8 @@ ion-toggle {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
// Material Design Toggle Within An Item
|
||||
// -----------------------------------------
|
||||
|
||||
.item ion-toggle {
|
||||
margin: $toggle-md-media-margin;
|
||||
padding: $toggle-md-media-padding;
|
||||
cursor: pointer;
|
||||
.item-toggle ion-label {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -106,6 +106,7 @@ export class Toggle {
|
||||
if (_item) {
|
||||
this.id = 'tgl-' + _item.registerInput('toggle');
|
||||
this._labelId = 'lbl-' + _item.id;
|
||||
this._item.setCssClass('item-toggle', true);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -2,17 +2,9 @@ import {Injectable} from 'angular2/core';
|
||||
|
||||
|
||||
/**
|
||||
* The Input component is used to focus text input elements.
|
||||
*
|
||||
* @usage
|
||||
* ```html
|
||||
* <ion-input>
|
||||
* <ion-label>Name</ion-label>
|
||||
* <input value="Name" type="text">
|
||||
* </ion-input>
|
||||
* ```
|
||||
* @private
|
||||
*/
|
||||
@Injectable()
|
||||
@Injectable()
|
||||
export class Form {
|
||||
private _blur: HTMLElement;
|
||||
private _focused = null;
|
||||
|
||||
@ -9,7 +9,7 @@ exports.config = {
|
||||
//domain: 'localhost:8080',
|
||||
|
||||
//specs: 'dist/e2e/**/*e2e.js',
|
||||
specs: 'dist/e2e/checkbox/**/*e2e.js',
|
||||
specs: 'dist/e2e/input/**/*e2e.js',
|
||||
|
||||
sleepBetweenSpecs: 350,
|
||||
|
||||
|
||||
Reference in New Issue
Block a user