gentics-ui-core
Version:
This is the common core framework for the Gentics CMS and Mesh UI, and other Angular applications.
122 lines (121 loc) • 4.31 kB
TypeScript
import { ChangeDetectorRef, EventEmitter, OnDestroy, OnInit } from '@angular/core';
import { ControlValueAccessor } from '@angular/forms';
import * as i0 from "@angular/core";
/**
* RadioGroup groups multiple {@link RadioButton} elements together.
* Use ngModel to connect it to a form model.
*/
export declare class RadioGroup implements ControlValueAccessor {
private static instanceCounter;
private radioButtons;
private groupID;
get uniqueName(): string;
constructor();
add(radio: RadioButton): void;
remove(radio: RadioButton): void;
radioSelected(selected?: RadioButton): void;
writeValue(value: any): void;
registerOnChange(fn: Function): void;
registerOnTouched(fn: Function): void;
private onTouched;
private onChange;
static ɵfac: i0.ɵɵFactoryDeclaration<RadioGroup, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<RadioGroup, "gtx-radio-group, [gtx-radio-group]", never, {}, {}, never>;
}
/**
* RadioButton wraps the native `<input type="radio">` form element.
* To connect multiple radio buttons with a form via ngModel,
* wrap them in a {@link RadioGroup} (`<gtx-radio-group>`).
*
* ```html
* <gtx-radio-button [(ngModel)]="val" value="A" label="A"></gtx-radio-button>
* <gtx-radio-button [(ngModel)]="val" value="B" label="B"></gtx-radio-button>
* <gtx-radio-button [(ngModel)]="val" value="C" label="C"></gtx-radio-button>
* ```
*
* ## Stateless Mode
* By default, the RadioButton keeps track of its own internal checked state. This makes sense
* for most use cases, such as when used in a form bound to ngModel.
*
* However, in some cases we want to explicitly set the state from outside. This is done by binding
* to the <code>checked</code> attribute. When this attribute is bound, the checked state of the
* RadioButton will *only* change when the value of the binding changes. Clicking on the RadioButton
* will have no effect other than to emit an event which the parent can use to update the binding.
*
* Here is a basic example of a stateless RadioButton where the parent component manages the state:
*
* ```html
* <gtx-radio-button [checked]="isChecked"></gtx-checkbox>
* ```
*/
export declare class RadioButton implements ControlValueAccessor, OnInit, OnDestroy {
private group;
private changeDetector;
/**
* Sets the radio button to be auto-focused. Handled by `AutofocusDirective`.
*/
autofocus: boolean;
/**
* The checked state of the control. When set, the RadioButton will be
* in stateless mode.
*/
get checked(): boolean;
set checked(val: boolean);
/**
* The disabled state of the control
*/
disabled: boolean;
/**
* ID of the control
*/
id: string;
/**
* Label for the radio button
*/
label: string;
/**
* Name of the input
*/
name: string;
/**
* Sets the required state
*/
required: boolean;
/**
* Value associated with this input
*/
value: any;
/**
* Blur event
*/
blur: EventEmitter<boolean>;
/**
* Focus event
*/
focus: EventEmitter<boolean>;
/**
* Change event
*/
change: EventEmitter<any>;
tabbedFocus: boolean;
private inputChecked;
/**
* See note above on stateless mode.
*/
private statelessMode;
constructor(group: RadioGroup, modelAttrib: string, changeDetector: ChangeDetectorRef);
onBlur(): void;
onFocus(): void;
focusHandler(e: KeyboardEvent): void;
writeValue(value: any): void;
ngOnInit(): void;
ngOnDestroy(): void;
onInputChecked(e: Event, input: HTMLInputElement): boolean;
registerOnChange(fn: Function): void;
registerOnTouched(fn: Function): void;
setDisabledState(disabled: boolean): void;
private onChange;
private onTouched;
static ɵfac: i0.ɵɵFactoryDeclaration<RadioButton, [{ optional: true; }, { attribute: "ngModel"; }, null]>;
static ɵcmp: i0.ɵɵComponentDeclaration<RadioButton, "gtx-radio-button", never, { "autofocus": "autofocus"; "checked": "checked"; "disabled": "disabled"; "id": "id"; "label": "label"; "name": "name"; "required": "required"; "value": "value"; }, { "blur": "blur"; "focus": "focus"; "change": "change"; }, never, never>;
}