mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
chore(build): rename ionic directory to src and update all references in the build process.
This commit is contained in:
Josh Thomas
173
src/components/radio/radio-button.ts
Normal file
173
src/components/radio/radio-button.ts
Normal file
@@ -0,0 +1,173 @@
|
||||
import {Component, Optional, Input, Output, HostListener, EventEmitter, ViewEncapsulation} from '@angular/core';
|
||||
|
||||
import {Form} from '../../util/form';
|
||||
import {isTrueProperty, isPresent, isBlank, isCheckedProperty} from '../../util/util';
|
||||
import {Item} from '../item/item';
|
||||
import {ListHeader} from '../list/list';
|
||||
import {RadioGroup} from './radio-group';
|
||||
|
||||
|
||||
/**
|
||||
* @description
|
||||
* A radio button is a button that can be either checked or unchecked. A user can tap
|
||||
* the button to check or uncheck it. It can also be checked from the template using
|
||||
* the `checked` property.
|
||||
*
|
||||
* Use an element with a `radio-group` attribute to group a set of radio buttons. When
|
||||
* radio buttons are inside a [radio group](../RadioGroup), exactly one radio button
|
||||
* in the group can be checked at any time. If a radio button is not placed in a group,
|
||||
* they will all have the ability to be checked at the same time.
|
||||
*
|
||||
* See the [Angular Forms Docs](https://angular.io/docs/ts/latest/guide/forms.html) for
|
||||
* more information on forms and input.
|
||||
*
|
||||
* @usage
|
||||
* ```html
|
||||
* <ion-list radio-group [(ngModel)]="relationship">
|
||||
* <ion-item>
|
||||
* <ion-label>Friends</ion-label>
|
||||
* <ion-radio value="friends" checked></ion-radio>
|
||||
* </ion-item>
|
||||
* <ion-item>
|
||||
* <ion-label>Family</ion-label>
|
||||
* <ion-radio value="family"></ion-radio>
|
||||
* </ion-item>
|
||||
* <ion-item>
|
||||
* <ion-label>Enemies</ion-label>
|
||||
* <ion-radio value="enemies" [disabled]="isDisabled"></ion-radio>
|
||||
* </ion-item>
|
||||
* </ion-list>
|
||||
* ```
|
||||
* @demo /docs/v2/demos/radio/
|
||||
* @see {@link /docs/v2/components#radio Radio Component Docs}
|
||||
* @see {@link ../RadioGroup RadioGroup API Docs}
|
||||
*/
|
||||
@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>',
|
||||
host: {
|
||||
'[class.radio-disabled]': '_disabled'
|
||||
},
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
})
|
||||
export class RadioButton {
|
||||
private _checked: boolean = false;
|
||||
private _disabled: boolean = false;
|
||||
private _labelId: string;
|
||||
private _value: any = null;
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
id: string;
|
||||
|
||||
/**
|
||||
* @output {any} expression to be evaluated when selected
|
||||
*/
|
||||
@Output() select: EventEmitter<any> = new EventEmitter();
|
||||
|
||||
constructor(
|
||||
private _form: Form,
|
||||
@Optional() private _item: Item,
|
||||
@Optional() private _group: RadioGroup
|
||||
) {
|
||||
_form.register(this);
|
||||
|
||||
if (_group) {
|
||||
// register with the radiogroup
|
||||
this.id = 'rb-' + _group.add(this);
|
||||
}
|
||||
|
||||
if (_item) {
|
||||
// register the input inside of the item
|
||||
// reset to the item's id instead of the radiogroup id
|
||||
this.id = 'rb-' + _item.registerInput('radio');
|
||||
this._labelId = 'lbl-' + _item.id;
|
||||
this._item.setCssClass('item-radio', true);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @input {any} The value of the radio button. Defaults to the generated id.
|
||||
*/
|
||||
@Input()
|
||||
get value(): any {
|
||||
// if the value is not defined then use it's unique id
|
||||
return isBlank(this._value) ? this.id : this._value;
|
||||
}
|
||||
|
||||
set value(val: any) {
|
||||
this._value = val;
|
||||
}
|
||||
|
||||
/**
|
||||
* @input {boolean} Whether the radio button should be checked or not. Default false.
|
||||
*/
|
||||
@Input()
|
||||
get checked(): boolean {
|
||||
return this._checked;
|
||||
}
|
||||
|
||||
set checked(isChecked: boolean) {
|
||||
this._checked = isTrueProperty(isChecked);
|
||||
|
||||
if (this._item) {
|
||||
this._item.setCssClass('item-radio-checked', this._checked);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @input {boolean} Whether the radio button should be disabled or not. Default false.
|
||||
*/
|
||||
@Input()
|
||||
get disabled(): boolean {
|
||||
return this._disabled;
|
||||
}
|
||||
|
||||
set disabled(val: boolean) {
|
||||
this._disabled = isTrueProperty(val);
|
||||
this._item && this._item.setCssClass('item-radio-disabled', this._disabled);
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
@HostListener('click', ['$event'])
|
||||
private _click(ev) {
|
||||
console.debug('radio, select', this.id);
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
|
||||
this.checked = true;
|
||||
this.select.emit(this.value);
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
ngOnInit() {
|
||||
if (this._group && isPresent(this._group.value)) {
|
||||
this.checked = isCheckedProperty(this._group.value, this.value);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
ngOnDestroy() {
|
||||
this._form.deregister(this);
|
||||
this._group && this._group.remove(this);
|
||||
}
|
||||
}
|
||||
230
src/components/radio/radio-group.ts
Normal file
230
src/components/radio/radio-group.ts
Normal file
@@ -0,0 +1,230 @@
|
||||
import {Directive, ElementRef, Renderer, Optional, Input, Output, Provider, forwardRef, HostListener, ContentChild, EventEmitter} from '@angular/core';
|
||||
import {NG_VALUE_ACCESSOR} from '@angular/common';
|
||||
|
||||
import {RadioButton} from './radio-button';
|
||||
import {ListHeader} from '../list/list';
|
||||
import {isPresent, isCheckedProperty} from '../../util/util';
|
||||
|
||||
const RADIO_VALUE_ACCESSOR = new Provider(
|
||||
NG_VALUE_ACCESSOR, {useExisting: forwardRef(() => RadioGroup), multi: true});
|
||||
|
||||
/**
|
||||
* @name RadioGroup
|
||||
* @description
|
||||
* A radio group is a group of [radio buttons](../RadioButton). It allows
|
||||
* a user to select at most one radio button from a set. Checking one radio
|
||||
* button that belongs to a radio group unchecks any previous checked
|
||||
* radio button within the same group.
|
||||
*
|
||||
* See the [Angular Forms Docs](https://angular.io/docs/ts/latest/guide/forms.html)
|
||||
* for more information on forms and inputs.
|
||||
*
|
||||
* @usage
|
||||
* ```html
|
||||
* <ion-list radio-group [(ngModel)]="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"></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}
|
||||
* @see {@link ../RadioButton RadioButton API Docs}
|
||||
*/
|
||||
@Directive({
|
||||
selector: '[radio-group]',
|
||||
host: {
|
||||
'[attr.aria-activedescendant]': 'activeId',
|
||||
'role': 'radiogroup'
|
||||
},
|
||||
providers: [RADIO_VALUE_ACCESSOR]
|
||||
})
|
||||
export class RadioGroup {
|
||||
private _btns: Array<RadioButton> = [];
|
||||
private _fn: Function;
|
||||
private _ids: number = -1;
|
||||
private _init: boolean = false;
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
value: any;
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
id: number;
|
||||
|
||||
/**
|
||||
* @output {any} expression to be evaluated when selection has been changed
|
||||
*/
|
||||
@Output() change: EventEmitter<RadioGroup> = new EventEmitter();
|
||||
|
||||
constructor(
|
||||
private _renderer: Renderer,
|
||||
private _elementRef: ElementRef
|
||||
) {
|
||||
this.id = ++radioGroupIds;
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
writeValue(val: any) {
|
||||
console.debug('radio group, writeValue', val);
|
||||
this.value = val;
|
||||
|
||||
if (this._init) {
|
||||
this._update();
|
||||
this.onTouched();
|
||||
this.change.emit(val);
|
||||
}
|
||||
|
||||
this._init = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
ngAfterContentInit() {
|
||||
let activeButton = this._btns.find(b => b.checked);
|
||||
if (activeButton) {
|
||||
this._setActive(activeButton);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
registerOnChange(fn: Function): void {
|
||||
this._fn = fn;
|
||||
this.onChange = (val: any) => {
|
||||
// onChange used when there's an ngControl
|
||||
console.debug('radio group, onChange', val);
|
||||
fn(val);
|
||||
this.value = val;
|
||||
this._update();
|
||||
this.onTouched();
|
||||
this.change.emit(val);
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
registerOnTouched(fn) { this.onTouched = fn; }
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
private _update() {
|
||||
// loop through each of the radiobuttons
|
||||
let hasChecked = false;
|
||||
this._btns.forEach(radioButton => {
|
||||
|
||||
// check this radiobutton if its value is
|
||||
// the same as the radiogroups value
|
||||
radioButton.checked = isCheckedProperty(this.value, radioButton.value) && !hasChecked;
|
||||
|
||||
if (radioButton.checked) {
|
||||
// if this button is checked, then set it as
|
||||
// the radiogroup's active descendant
|
||||
this._setActive(radioButton);
|
||||
hasChecked = true;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
private _setActive(radioButton: RadioButton) {
|
||||
this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-activedescendant', radioButton.id);
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
add(button: RadioButton): string {
|
||||
this._btns.push(button);
|
||||
|
||||
// listen for radiobutton select events
|
||||
button.select.subscribe((val) => {
|
||||
// this radiobutton has been selected
|
||||
this.onChange(val);
|
||||
});
|
||||
|
||||
return this.id + '-' + (++this._ids);
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
remove(button: RadioButton) {
|
||||
let index = this._btns.indexOf(button);
|
||||
if (index > -1) {
|
||||
if (button.value === this.value) {
|
||||
this.value = null;
|
||||
}
|
||||
this._btns.splice(index, 1);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
@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: any) {
|
||||
// onChange used when there is not an ngControl
|
||||
console.debug('radio group, onChange w/out ngControl', val);
|
||||
this.value = val;
|
||||
this._update();
|
||||
this.onTouched();
|
||||
this.change.emit(val);
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
onTouched() {}
|
||||
|
||||
}
|
||||
|
||||
let radioGroupIds = -1;
|
||||
119
src/components/radio/radio.ios.scss
Normal file
119
src/components/radio/radio.ios.scss
Normal file
@@ -0,0 +1,119 @@
|
||||
@import "../../globals.ios";
|
||||
|
||||
// iOS Radio
|
||||
// --------------------------------------------------
|
||||
|
||||
$radio-ios-color-on: color($colors-ios, primary) !default;
|
||||
|
||||
$radio-ios-icon-width: 16px !default;
|
||||
$radio-ios-icon-height: 21px !default;
|
||||
$radio-ios-icon-border-width: 2px !default;
|
||||
$radio-ios-icon-border-style: solid !default;
|
||||
|
||||
$radio-ios-disabled-opacity: .3 !default;
|
||||
|
||||
$radio-ios-item-left-margin: 8px 21px 8px 3px !default;
|
||||
$radio-ios-item-right-margin: $item-ios-padding-media-top 11px $item-ios-padding-media-bottom ($item-ios-padding-left / 2) !default;
|
||||
|
||||
|
||||
ion-radio {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
||||
// iOS Radio Circle: Unchecked
|
||||
// -----------------------------------------
|
||||
|
||||
.radio-icon {
|
||||
position: relative;
|
||||
display: block;
|
||||
|
||||
width: $radio-ios-icon-width;
|
||||
height: $radio-ios-icon-height;
|
||||
}
|
||||
|
||||
|
||||
// iOS Radio Checkmark: Checked
|
||||
// -----------------------------------------
|
||||
|
||||
.radio-checked .radio-inner {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 7px;
|
||||
|
||||
width: 5px;
|
||||
height: 12px;
|
||||
|
||||
border-width: $radio-ios-icon-border-width;
|
||||
border-top-width: 0;
|
||||
border-left-width: 0;
|
||||
border-style: $radio-ios-icon-border-style;
|
||||
border-color: $radio-ios-color-on;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
|
||||
// iOS Radio: Disabled
|
||||
// -----------------------------------------
|
||||
|
||||
.radio-disabled,
|
||||
.item-radio-disabled ion-label {
|
||||
opacity: $radio-ios-disabled-opacity;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
// iOS Radio Within An Item
|
||||
// -----------------------------------------
|
||||
|
||||
.item ion-radio {
|
||||
position: static;
|
||||
display: block;
|
||||
|
||||
margin: $radio-ios-item-right-margin;
|
||||
|
||||
&[item-left] {
|
||||
margin: $radio-ios-item-left-margin;
|
||||
}
|
||||
}
|
||||
|
||||
.item-radio ion-label {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
|
||||
// iOS Radio Item Label: Checked
|
||||
// -----------------------------------------
|
||||
|
||||
.item-radio-checked ion-label {
|
||||
color: $radio-ios-color-on;
|
||||
}
|
||||
|
||||
|
||||
// iOS Radio Color Mixin
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin radio-theme-ios($color-name, $color-base) {
|
||||
|
||||
ion-radio[#{$color-name}] .radio-checked {
|
||||
color: $color-base;
|
||||
|
||||
.radio-inner {
|
||||
border-color: $color-base;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Generate iOS Radio Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
|
||||
|
||||
@include radio-theme-ios($color-name, $color-base);
|
||||
|
||||
}
|
||||
149
src/components/radio/radio.md.scss
Normal file
149
src/components/radio/radio.md.scss
Normal file
@@ -0,0 +1,149 @@
|
||||
@import "../../globals.md";
|
||||
|
||||
// Material Design Radio
|
||||
// --------------------------------------------------
|
||||
|
||||
$radio-md-color-on: color($colors-md, primary) !default;
|
||||
$radio-md-color-off: darken($list-md-border-color, 40%) !default;
|
||||
|
||||
$radio-md-icon-width: 16px !default;
|
||||
$radio-md-icon-height: 16px !default;
|
||||
$radio-md-icon-border-width: 2px !default;
|
||||
$radio-md-icon-border-style: solid !default;
|
||||
$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: .3 !default;
|
||||
|
||||
$radio-md-item-left-margin: 11px 36px 10px 4px !default;
|
||||
$radio-md-item-right-margin: $item-md-padding-media-top 10px $item-md-padding-media-bottom 0 !default;
|
||||
|
||||
ion-radio {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
||||
// Material Design Radio Outer Circle: Unchecked
|
||||
// -----------------------------------------
|
||||
|
||||
.radio-icon {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
|
||||
margin: 0;
|
||||
|
||||
width: $radio-md-icon-width;
|
||||
height: $radio-md-icon-height;
|
||||
|
||||
border-width: $radio-md-icon-border-width;
|
||||
border-style: $radio-md-icon-border-style;
|
||||
border-radius: $radio-md-icon-border-radius;
|
||||
border-color: $radio-md-color-off;
|
||||
}
|
||||
|
||||
|
||||
// Material Design Radio Inner Circle: Unchecked
|
||||
// -----------------------------------------
|
||||
|
||||
.radio-inner {
|
||||
position: absolute;
|
||||
top: $radio-md-icon-border-width;
|
||||
left: $radio-md-icon-border-width;
|
||||
|
||||
width: $radio-md-icon-width / 2;
|
||||
height: $radio-md-icon-height / 2;
|
||||
|
||||
border-radius: 50%;
|
||||
background-color: $radio-md-color-on;
|
||||
transform: scale3d(0, 0, 0);
|
||||
transition: transform $radio-md-transition-duration $radio-md-transition-easing;
|
||||
}
|
||||
|
||||
|
||||
// Material Design Radio Outer Circle: Checked
|
||||
// -----------------------------------------
|
||||
|
||||
.radio-checked {
|
||||
border-color: $radio-md-color-on;
|
||||
}
|
||||
|
||||
|
||||
// Material Design Radio Inner Circle: Checked
|
||||
// -----------------------------------------
|
||||
|
||||
.radio-checked .radio-inner {
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
|
||||
|
||||
// Material Design Radio: Disabled
|
||||
// -----------------------------------------
|
||||
|
||||
.radio-disabled,
|
||||
.item-radio-disabled ion-label {
|
||||
opacity: $radio-md-disabled-opacity;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
// Material Design Radio Within An Item
|
||||
// -----------------------------------------
|
||||
|
||||
.item ion-radio {
|
||||
position: static;
|
||||
display: block;
|
||||
|
||||
margin: $radio-md-item-right-margin;
|
||||
|
||||
&[item-left] {
|
||||
margin: $radio-md-item-left-margin;
|
||||
}
|
||||
}
|
||||
|
||||
.item-radio ion-label {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
|
||||
// Material Design Radio Item Label: Checked
|
||||
// -----------------------------------------
|
||||
|
||||
.item-radio-checked ion-label {
|
||||
color: $radio-md-color-on;
|
||||
}
|
||||
|
||||
|
||||
// Material Design Radio Color Mixin
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin radio-theme-md($color-name, $color-base, $color-contrast) {
|
||||
|
||||
ion-radio[#{$color-name}] {
|
||||
|
||||
.radio-checked {
|
||||
border-color: $color-base;
|
||||
}
|
||||
|
||||
.radio-inner {
|
||||
background-color: $color-base;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Generate Material Design Radio Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
|
||||
|
||||
@include radio-theme-md($color-name, $color-base, $color-contrast);
|
||||
|
||||
}
|
||||
142
src/components/radio/radio.wp.scss
Normal file
142
src/components/radio/radio.wp.scss
Normal file
@@ -0,0 +1,142 @@
|
||||
@import "../../globals.wp";
|
||||
|
||||
// Windows Radio
|
||||
// --------------------------------------------------
|
||||
|
||||
$radio-wp-color-on: color($colors-wp, primary) !default;
|
||||
$radio-wp-color-off: #333 !default;
|
||||
|
||||
// Places radio icon on the left of the item
|
||||
$radio-wp-order: -1 !default;
|
||||
|
||||
$radio-wp-icon-width: 16px !default;
|
||||
$radio-wp-icon-height: 16px !default;
|
||||
$radio-wp-icon-border-width: 2px !default;
|
||||
$radio-wp-icon-border-style: solid !default;
|
||||
$radio-wp-icon-border-radius: 50% !default;
|
||||
|
||||
$radio-wp-disabled-opacity: .3 !default;
|
||||
|
||||
$radio-wp-item-left-margin: 9px 20px 9px 4px !default;
|
||||
$radio-wp-item-right-margin: 11px 10px 10px 0 !default;
|
||||
|
||||
|
||||
ion-radio {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
||||
// Windows Radio Outer Circle: Unchecked
|
||||
// -----------------------------------------
|
||||
|
||||
.radio-icon {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
|
||||
margin: 0;
|
||||
|
||||
width: $radio-wp-icon-width;
|
||||
height: $radio-wp-icon-height;
|
||||
|
||||
border-width: $radio-wp-icon-border-width;
|
||||
border-style: $radio-wp-icon-border-style;
|
||||
border-radius: $radio-wp-icon-border-radius;
|
||||
border-color: $radio-wp-color-off;
|
||||
}
|
||||
|
||||
|
||||
// Windows Radio Inner Circle: Unchecked
|
||||
// -----------------------------------------
|
||||
|
||||
.radio-inner {
|
||||
position: absolute;
|
||||
top: $radio-wp-icon-border-width;
|
||||
left: $radio-wp-icon-border-width;
|
||||
display: none;
|
||||
|
||||
width: $radio-wp-icon-width / 2;
|
||||
height: $radio-wp-icon-height / 2;
|
||||
|
||||
border-radius: 50%;
|
||||
background-color: $radio-wp-color-off;
|
||||
}
|
||||
|
||||
|
||||
// Windows Radio Outer Circle: Checked
|
||||
// -----------------------------------------
|
||||
|
||||
.radio-checked {
|
||||
border-color: $radio-wp-color-on;
|
||||
}
|
||||
|
||||
|
||||
// Windows Radio Inner Circle: Checked
|
||||
// -----------------------------------------
|
||||
|
||||
.radio-checked .radio-inner {
|
||||
// transform: scale3d(1, 1, 1);
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
// Windows Radio: Disabled
|
||||
// -----------------------------------------
|
||||
|
||||
.radio-disabled,
|
||||
.item-radio-disabled ion-label {
|
||||
opacity: $radio-wp-disabled-opacity;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
// Windows Radio Within An Item
|
||||
// -----------------------------------------
|
||||
|
||||
.item ion-radio {
|
||||
position: static;
|
||||
display: block;
|
||||
|
||||
order: $radio-wp-order;
|
||||
|
||||
margin: $radio-wp-item-left-margin;
|
||||
|
||||
&[item-right] {
|
||||
order: 0;
|
||||
|
||||
margin: $radio-wp-item-right-margin;
|
||||
}
|
||||
}
|
||||
|
||||
.item-radio ion-label {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
|
||||
// Windows Radio Color Mixin
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin radio-theme-wp($color-name, $color-base) {
|
||||
|
||||
ion-radio[#{$color-name}] {
|
||||
|
||||
.radio-checked {
|
||||
border-color: $color-base;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Generate Windows Radio Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
|
||||
|
||||
@include radio-theme-wp($color-name, $color-base);
|
||||
|
||||
}
|
||||
4
src/components/radio/test/basic/e2e.ts
Normal file
4
src/components/radio/test/basic/e2e.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
|
||||
it('should check Cherry', function() {
|
||||
element(by.css('[value="cherry"] button')).click();
|
||||
});
|
||||
73
src/components/radio/test/basic/index.ts
Normal file
73
src/components/radio/test/basic/index.ts
Normal file
@@ -0,0 +1,73 @@
|
||||
import {App} from '../../../../../ionic';
|
||||
import {Control, ControlGroup} from '@angular/common';
|
||||
|
||||
|
||||
@App({
|
||||
templateUrl: 'main.html'
|
||||
})
|
||||
class E2EApp {
|
||||
fruits: Control;
|
||||
fruitsForm: ControlGroup;
|
||||
currenciesControl: Control;
|
||||
currencyForm: ControlGroup;
|
||||
currencies: Array<string>;
|
||||
items: Array<{description: string, value: any}>;
|
||||
relationship: string;
|
||||
selectedTime: number = 60;
|
||||
|
||||
constructor() {
|
||||
this.fruits = new Control('apple');
|
||||
|
||||
this.fruitsForm = new ControlGroup({
|
||||
'fruits': this.fruits
|
||||
});
|
||||
|
||||
this.currencies = ['USD', 'EUR'];
|
||||
this.currenciesControl = new Control('EUR');
|
||||
this.currencyForm = new ControlGroup({
|
||||
'currenciesControl': this.currenciesControl
|
||||
});
|
||||
|
||||
this.relationship = 'enemies';
|
||||
|
||||
this.items = [
|
||||
{ description: 'value undefined', value: undefined },
|
||||
{ description: 'value false string', value: 'false' },
|
||||
{ description: 'value false boolean', value: false },
|
||||
{ description: 'value 0', value: 0 },
|
||||
];
|
||||
}
|
||||
|
||||
setApple() {
|
||||
this.fruits.updateValue('apple');
|
||||
}
|
||||
|
||||
setBanana() {
|
||||
this.fruits.updateValue('banana');
|
||||
}
|
||||
|
||||
setCherry() {
|
||||
this.fruits.updateValue('cherry');
|
||||
}
|
||||
|
||||
doSubmit(event) {
|
||||
console.log('Submitting form', this.fruitsForm.value);
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
petChange(ev) {
|
||||
console.log('petChange', ev);
|
||||
}
|
||||
|
||||
dogSelect(ev) {
|
||||
console.log('dogSelect', ev);
|
||||
}
|
||||
|
||||
catSelect(ev) {
|
||||
console.log('catSelect', ev);
|
||||
}
|
||||
|
||||
turtleSelect(ev) {
|
||||
console.log('turtleSelect', ev);
|
||||
}
|
||||
}
|
||||
141
src/components/radio/test/basic/main.html
Normal file
141
src/components/radio/test/basic/main.html
Normal file
@@ -0,0 +1,141 @@
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-title>Radio Group</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
|
||||
<ion-content>
|
||||
|
||||
<form (submit)="doSubmit($event)" [ngFormModel]="fruitsForm">
|
||||
|
||||
<ion-list radio-group ngControl="fruits">
|
||||
|
||||
<ion-list-header>
|
||||
Fruits
|
||||
</ion-list-header>
|
||||
|
||||
<ion-item>
|
||||
Button w/ left side default icon, really long text that should ellipsis
|
||||
<ion-icon name="information-circle" item-left></ion-icon>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Apple</ion-label>
|
||||
<ion-radio item-left value="apple"></ion-radio>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Banana</ion-label>
|
||||
<ion-radio value="banana"></ion-radio>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Cherry (secondary color)</ion-label>
|
||||
<ion-radio value="cherry" secondary></ion-radio>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Disabled</ion-label>
|
||||
<ion-radio value="disabled" disabled="true"></ion-radio>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Radio right side</ion-label>
|
||||
<ion-radio item-right checked></ion-radio>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
Button w/ right side default icon, really long text that should ellipsis
|
||||
<ion-icon name="information-circle" item-right></ion-icon>
|
||||
</ion-item>
|
||||
|
||||
</ion-list>
|
||||
|
||||
</form>
|
||||
|
||||
<div aria-hidden="true" text-center>
|
||||
<button (click)="setApple()" outline small>Select Apple</button>
|
||||
<button (click)="setBanana()" outline small>Select Banana</button>
|
||||
<button class="e2eCherry" (click)="setCherry()" outline small>Select Cherry</button>
|
||||
</div>
|
||||
|
||||
<div padding>
|
||||
<code><b>fruits.dirty:</b> {{fruitsForm.controls.fruits.dirty}}</code><br>
|
||||
<code><b>fruits.value:</b> {{fruitsForm.controls.fruits.value}}</code><br>
|
||||
</div>
|
||||
|
||||
<form (submit)="doSubmit($event)" [ngFormModel]="currencyForm">
|
||||
<ion-list radio-group ngControl="currenciesControl">
|
||||
<ion-list-header id="currencies">
|
||||
Currencies
|
||||
</ion-list-header>
|
||||
<ion-item *ngFor="let currency of currencies">
|
||||
<ion-label>{{currency}}</ion-label>
|
||||
<ion-radio [value]="currency"></ion-radio>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</form>
|
||||
|
||||
<div padding>
|
||||
<code><b>currenciesControl.value:</b> {{currencyForm.controls.currenciesControl.value}}</code>
|
||||
</div>
|
||||
|
||||
<ion-list radio-group [(ngModel)]="relationship">
|
||||
<ion-item>
|
||||
<ion-label>Friends</ion-label>
|
||||
<ion-radio value="friends"></ion-radio>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Enemies</ion-label>
|
||||
<ion-radio value="enemies"></ion-radio>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
|
||||
<div padding>
|
||||
<code><b>relationship:</b> {{relationship}}</code>
|
||||
</div>
|
||||
|
||||
<div radio-group (change)="petChange($event)">
|
||||
<p>
|
||||
<ion-radio (select)="dogSelect($event)"></ion-radio>
|
||||
Dogs
|
||||
</p>
|
||||
<p>
|
||||
<ion-radio (select)="catSelect($event)"></ion-radio>
|
||||
Cats
|
||||
</p>
|
||||
<p>
|
||||
<ion-radio (select)="turtleSelect($event)"></ion-radio>
|
||||
Turtles
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<ion-list radio-group [(ngModel)]="someValue">
|
||||
<ion-item *ngFor="let item of items">
|
||||
<ion-label>
|
||||
{{ item.description }}
|
||||
</ion-label>
|
||||
|
||||
<ion-radio [value]="item.value"></ion-radio>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
|
||||
<div padding>
|
||||
<code><b>someValue:</b> {{someValue}}</code>
|
||||
</div>
|
||||
|
||||
<ion-list radio-group [(ngModel)]="selectedTime">
|
||||
<ion-list-header>
|
||||
Time
|
||||
</ion-list-header>
|
||||
<ion-item>
|
||||
<ion-label>60 minutes</ion-label>
|
||||
<ion-radio value="60"></ion-radio>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>30 minutes</ion-label>
|
||||
<ion-radio value="30"></ion-radio>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
|
||||
</ion-content>
|
||||
133
src/components/radio/test/radio.spec.ts
Normal file
133
src/components/radio/test/radio.spec.ts
Normal file
@@ -0,0 +1,133 @@
|
||||
import {RadioGroup, RadioButton, Form} from '../../../../ionic';
|
||||
|
||||
export function run() {
|
||||
describe('RadioGroup', () => {
|
||||
|
||||
describe('_update', () => {
|
||||
|
||||
it('should set checked via string values', () => {
|
||||
let rb1 = createRadioButton();
|
||||
rb1.value = 'string1';
|
||||
let rb2 = createRadioButton();
|
||||
rb2.value = 'string2';
|
||||
let rb3 = createRadioButton();
|
||||
rb3.value = 'string3';
|
||||
|
||||
rg.value = 'string1';
|
||||
rg._update();
|
||||
|
||||
expect(rb1.checked).toEqual(true);
|
||||
expect(rb2.checked).toEqual(false);
|
||||
expect(rb3.checked).toEqual(false);
|
||||
});
|
||||
|
||||
it('should set checked via string group value, and number button values', () => {
|
||||
let rb1 = createRadioButton();
|
||||
rb1.value = 1;
|
||||
let rb2 = createRadioButton();
|
||||
rb2.value = 2;
|
||||
let rb3 = createRadioButton();
|
||||
rb3.value = 3;
|
||||
|
||||
rg.value = '1';
|
||||
rg._update();
|
||||
|
||||
expect(rb1.checked).toEqual(true);
|
||||
expect(rb2.checked).toEqual(false);
|
||||
expect(rb3.checked).toEqual(false);
|
||||
});
|
||||
|
||||
it('should set checked via number group value, and string button values', () => {
|
||||
let rb1 = createRadioButton();
|
||||
rb1.value = '1';
|
||||
let rb2 = createRadioButton();
|
||||
rb2.value = '2';
|
||||
let rb3 = createRadioButton();
|
||||
rb3.value = '3';
|
||||
|
||||
rg.value = 1;
|
||||
rg._update();
|
||||
|
||||
expect(rb1.checked).toEqual(true);
|
||||
expect(rb2.checked).toEqual(false);
|
||||
expect(rb3.checked).toEqual(false);
|
||||
});
|
||||
|
||||
it('should set checked via empty string group value, and one empty string button value', () => {
|
||||
let rb1 = createRadioButton();
|
||||
rb1.value = '';
|
||||
let rb2 = createRadioButton();
|
||||
rb2.value = 'value2';
|
||||
let rb3 = createRadioButton();
|
||||
rb3.value = 'value3';
|
||||
|
||||
rg.value = '';
|
||||
rg._update();
|
||||
|
||||
expect(rb1.checked).toEqual(true);
|
||||
expect(rb2.checked).toEqual(false);
|
||||
expect(rb3.checked).toEqual(false);
|
||||
});
|
||||
|
||||
it('should only check at most one value', () => {
|
||||
let rb1 = createRadioButton();
|
||||
rb1.value = 'string1';
|
||||
let rb2 = createRadioButton();
|
||||
rb2.value = 'string1';
|
||||
let rb3 = createRadioButton();
|
||||
rb3.value = 'string1';
|
||||
|
||||
rg.value = 'string1';
|
||||
rg._update();
|
||||
|
||||
expect(rb1.checked).toEqual(true);
|
||||
expect(rb2.checked).toEqual(false);
|
||||
expect(rb3.checked).toEqual(false);
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
describe('RadioButton', () => {
|
||||
|
||||
describe('ngOnDestroy', () => {
|
||||
it('should work without a group', () => {
|
||||
let rb1 = createRadioButton(false);
|
||||
expect(() => rb1.ngOnDestroy()).not.toThrowError();
|
||||
});
|
||||
|
||||
it('should remove button from group if part of a radio group', () => {
|
||||
let rb1 = createRadioButton();
|
||||
spyOn(rg, 'remove');
|
||||
rb1.ngOnDestroy();
|
||||
expect(rg.remove).toHaveBeenCalledWith(rb1);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
let rg: RadioGroup;
|
||||
let form: Form;
|
||||
|
||||
function createRadioButton(shouldIncludeGroup = true) {
|
||||
return new RadioButton(form, null, shouldIncludeGroup? rg : null);
|
||||
}
|
||||
|
||||
function mockRenderer(): any {
|
||||
return {
|
||||
setElementAttribute: function(){}
|
||||
}
|
||||
}
|
||||
|
||||
function mockElementRef(): any {
|
||||
return {
|
||||
nativeElement: document.createElement('div')
|
||||
}
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
rg = new RadioGroup(mockRenderer(), mockElementRef());
|
||||
form = new Form();
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user