@kushki/ng-suka
Version:
<p align="center"> <h1 align="center">Suka Components Angular</h1> <p align="center"> An Angular implementation of the Suka Design System </p> </p>
233 lines • 13.6 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component, Input, HostBinding, Output, EventEmitter } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { RadioChange } from './radio-change.class';
export class Radio {
constructor() {
/**
* Sets the checked status.
*/
this.checked = false;
/**
* Sets the `Radio` `<input>` name.
*/
this.name = '';
/**
* Set to `true` to disable the `Radio`.
*/
this.disabled = false;
/**
* Sets the label placement. Default to `right`.
*/
this.labelPlacement = 'right';
/**
* Sets the HTML required attribute
*/
this.required = false;
/**
* The value of the `Radio`.
*/
this.value = '';
/**
* Set to `true` for a loading radio.
*/
this.skeleton = false;
/**
* The id for the `Radio`.
*/
this.id = `radio-${Radio.radioCount++}`;
/**
* emits when the state of the radio changes
*/
// tslint:disable-next-line: no-output-native
this.change = new EventEmitter();
/**
* Binds 'radio' value to the role attribute for `Radio`.
*/
this.role = 'radio';
this.hostClass = true;
// tslint:disable-next-line: variable-name
this._labelledby = '';
/**
* Handler provided by the `RadioGroup` to bubble events up
*/
this.radioChangeHandler = (/**
* @param {?} event
* @return {?}
*/
(event) => { });
}
/**
* @param {?} value
* @return {?}
*/
set ariaLabelledby(value) {
this._labelledby = value;
}
/**
* @return {?}
*/
get ariaLabelledby() {
if (this._labelledby) {
return this._labelledby;
}
return `label-${this.id}`;
}
/**
* @return {?}
*/
get labelLeft() {
return this.labelPlacement === 'left';
}
/**
* Synchronizes with the `RadioGroup` in the event of a changed `Radio`.
* Emits the changes of both the `RadioGroup` and `Radio`.
* @param {?} event
* @return {?}
*/
onChange(event) {
event.stopPropagation();
this.checked = ((/** @type {?} */ (event.target))).checked;
/** @type {?} */
const radioEvent = new RadioChange(this, this.value);
this.change.emit(radioEvent);
this.radioChangeHandler(radioEvent);
}
/**
* Method called by `RadioGroup` with a callback function to bubble `RadioChange` events
* @param {?} fn callback that expects a `RadioChange` as an argument
* @return {?}
*/
registerRadioChangeHandler(fn) {
this.radioChangeHandler = fn;
}
}
/**
* Used to dynamically create unique ids for the `Radio`.
*/
Radio.radioCount = 0;
Radio.decorators = [
{ type: Component, args: [{
selector: 'suka-radio',
template: `
<input
*ngIf="!skeleton"
class="radio-button"
type="radio"
[checked]="checked"
[disabled]="disabled"
[name]="name"
[id]="id"
[required]="required"
[value]="value"
[attr.aria-labelledby]="ariaLabelledby"
(change)="onChange($event)">
<div *ngIf="skeleton" class="radio-button skeleton"></div>
<label
class="radio-button__label"
[ngClass]="{
'skeleton': skeleton
}"
[for]="id"
id="label-{{id}}">
<span class="radio-button__appearance"></span>
<ng-content></ng-content>
</label>
`,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: Radio,
multi: true
}
]
}] }
];
Radio.propDecorators = {
checked: [{ type: Input }],
name: [{ type: Input }],
disabled: [{ type: Input }],
labelPlacement: [{ type: Input }],
ariaLabelledby: [{ type: Input }],
required: [{ type: Input }],
value: [{ type: Input }],
skeleton: [{ type: Input }],
id: [{ type: Input }],
change: [{ type: Output }],
role: [{ type: HostBinding, args: ['attr.role',] }],
hostClass: [{ type: HostBinding, args: ['class.radio-button-wrapper',] }],
labelLeft: [{ type: HostBinding, args: ['class.radio-button-wrapper--label-left',] }]
};
if (false) {
/**
* Used to dynamically create unique ids for the `Radio`.
* @type {?}
*/
Radio.radioCount;
/**
* Sets the checked status.
* @type {?}
*/
Radio.prototype.checked;
/**
* Sets the `Radio` `<input>` name.
* @type {?}
*/
Radio.prototype.name;
/**
* Set to `true` to disable the `Radio`.
* @type {?}
*/
Radio.prototype.disabled;
/**
* Sets the label placement. Default to `right`.
* @type {?}
*/
Radio.prototype.labelPlacement;
/**
* Sets the HTML required attribute
* @type {?}
*/
Radio.prototype.required;
/**
* The value of the `Radio`.
* @type {?}
*/
Radio.prototype.value;
/**
* Set to `true` for a loading radio.
* @type {?}
*/
Radio.prototype.skeleton;
/**
* The id for the `Radio`.
* @type {?}
*/
Radio.prototype.id;
/**
* emits when the state of the radio changes
* @type {?}
*/
Radio.prototype.change;
/**
* Binds 'radio' value to the role attribute for `Radio`.
* @type {?}
*/
Radio.prototype.role;
/** @type {?} */
Radio.prototype.hostClass;
/**
* @type {?}
* @protected
*/
Radio.prototype._labelledby;
/**
* Handler provided by the `RadioGroup` to bubble events up
* @type {?}
*/
Radio.prototype.radioChangeHandler;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmFkaW8uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vQGt1c2hraS9uZy1zdWthLyIsInNvdXJjZXMiOlsibGliL3JhZGlvL3JhZGlvLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7O0FBQUEsT0FBTyxFQUNMLFNBQVMsRUFDVCxLQUFLLEVBQ0wsV0FBVyxFQUNYLE1BQU0sRUFDTixZQUFZLEVBQ2IsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDbkQsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLHNCQUFzQixDQUFDO0FBc0NuRCxNQUFNLE9BQU8sS0FBSztJQW5DbEI7Ozs7UUEwQ1csWUFBTyxHQUFHLEtBQUssQ0FBQzs7OztRQUdoQixTQUFJLEdBQUcsRUFBRSxDQUFDOzs7O1FBR1YsYUFBUSxHQUFHLEtBQUssQ0FBQzs7OztRQUdqQixtQkFBYyxHQUFxQixPQUFPLENBQUM7Ozs7UUFlM0MsYUFBUSxHQUFHLEtBQUssQ0FBQzs7OztRQUlqQixVQUFLLEdBQUcsRUFBRSxDQUFDOzs7O1FBSVgsYUFBUSxHQUFHLEtBQUssQ0FBQzs7OztRQUlqQixPQUFFLEdBQUcsU0FBUyxLQUFLLENBQUMsVUFBVSxFQUFFLEVBQUUsQ0FBQzs7Ozs7UUFLbEMsV0FBTSxHQUFHLElBQUksWUFBWSxFQUFlLENBQUM7Ozs7UUFJekIsU0FBSSxHQUFHLE9BQU8sQ0FBQztRQUVFLGNBQVMsR0FBRyxJQUFJLENBQUM7O1FBT2xELGdCQUFXLEdBQUcsRUFBRSxDQUFDOzs7O1FBSzNCLHVCQUFrQjs7OztRQUFHLENBQUMsS0FBa0IsRUFBRSxFQUFFLEdBQUcsQ0FBQyxFQUFDO0lBcUJuRCxDQUFDOzs7OztJQXJFQyxJQUFhLGNBQWMsQ0FBQyxLQUFhO1FBQ3ZDLElBQUksQ0FBQyxXQUFXLEdBQUcsS0FBSyxDQUFDO0lBQzNCLENBQUM7Ozs7SUFFRCxJQUFJLGNBQWM7UUFDaEIsSUFBSSxJQUFJLENBQUMsV0FBVyxFQUFFO1lBQ3BCLE9BQU8sSUFBSSxDQUFDLFdBQVcsQ0FBQztTQUN6QjtRQUNELE9BQU8sU0FBUyxJQUFJLENBQUMsRUFBRSxFQUFFLENBQUM7SUFDNUIsQ0FBQzs7OztJQTZCRCxJQUEyRCxTQUFTO1FBQ2xFLE9BQU8sSUFBSSxDQUFDLGNBQWMsS0FBSyxNQUFNLENBQUM7SUFDeEMsQ0FBQzs7Ozs7OztJQWNELFFBQVEsQ0FBQyxLQUFZO1FBQ25CLEtBQUssQ0FBQyxlQUFlLEVBQUUsQ0FBQztRQUN4QixJQUFJLENBQUMsT0FBTyxHQUFHLENBQUMsbUJBQUEsS0FBSyxDQUFDLE1BQU0sRUFBb0IsQ0FBQyxDQUFDLE9BQU8sQ0FBQzs7Y0FDcEQsVUFBVSxHQUFHLElBQUksV0FBVyxDQUFDLElBQUksRUFBRSxJQUFJLENBQUMsS0FBSyxDQUFDO1FBQ3BELElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxDQUFDO1FBQzdCLElBQUksQ0FBQyxrQkFBa0IsQ0FBQyxVQUFVLENBQUMsQ0FBQztJQUN0QyxDQUFDOzs7Ozs7SUFNRCwwQkFBMEIsQ0FBQyxFQUFnQztRQUN6RCxJQUFJLENBQUMsa0JBQWtCLEdBQUcsRUFBRSxDQUFDO0lBQy9CLENBQUM7Ozs7O0FBbEZNLGdCQUFVLEdBQUcsQ0FBQyxDQUFDOztZQXZDdkIsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxZQUFZO2dCQUN0QixRQUFRLEVBQUU7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQXdCVDtnQkFDRCxTQUFTLEVBQUU7b0JBQ1Q7d0JBQ0UsT0FBTyxFQUFFLGlCQUFpQjt3QkFDMUIsV0FBVyxFQUFFLEtBQUs7d0JBQ2xCLEtBQUssRUFBRSxJQUFJO3FCQUNaO2lCQUNGO2FBQ0Y7OztzQkFRRSxLQUFLO21CQUdMLEtBQUs7dUJBR0wsS0FBSzs2QkFHTCxLQUFLOzZCQUVMLEtBQUs7dUJBYUwsS0FBSztvQkFJTCxLQUFLO3VCQUlMLEtBQUs7aUJBSUwsS0FBSztxQkFLTCxNQUFNO21CQUlOLFdBQVcsU0FBQyxXQUFXO3dCQUV2QixXQUFXLFNBQUMsNEJBQTRCO3dCQUV4QyxXQUFXLFNBQUMsd0NBQXdDOzs7Ozs7O0lBcERyRCxpQkFBc0I7Ozs7O0lBR3RCLHdCQUF5Qjs7Ozs7SUFHekIscUJBQW1COzs7OztJQUduQix5QkFBMEI7Ozs7O0lBRzFCLCtCQUFvRDs7Ozs7SUFlcEQseUJBQTBCOzs7OztJQUkxQixzQkFBb0I7Ozs7O0lBSXBCLHlCQUEwQjs7Ozs7SUFJMUIsbUJBQTRDOzs7OztJQUs1Qyx1QkFBbUQ7Ozs7O0lBSW5ELHFCQUF5Qzs7SUFFekMsMEJBQTREOzs7OztJQU81RCw0QkFBMkI7Ozs7O0lBSzNCLG1DQUFpRCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENvbXBvbmVudCxcbiAgSW5wdXQsXG4gIEhvc3RCaW5kaW5nLFxuICBPdXRwdXQsXG4gIEV2ZW50RW1pdHRlclxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE5HX1ZBTFVFX0FDQ0VTU09SIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHsgUmFkaW9DaGFuZ2UgfSBmcm9tICcuL3JhZGlvLWNoYW5nZS5jbGFzcyc7XG5cblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnc3VrYS1yYWRpbycsXG4gIHRlbXBsYXRlOiBgXG4gICAgPGlucHV0XG4gICAgICAqbmdJZj1cIiFza2VsZXRvblwiXG4gICAgICBjbGFzcz1cInJhZGlvLWJ1dHRvblwiXG4gICAgICB0eXBlPVwicmFkaW9cIlxuICAgICAgW2NoZWNrZWRdPVwiY2hlY2tlZFwiXG4gICAgICBbZGlzYWJsZWRdPVwiZGlzYWJsZWRcIlxuICAgICAgW25hbWVdPVwibmFtZVwiXG4gICAgICBbaWRdPVwiaWRcIlxuICAgICAgW3JlcXVpcmVkXT1cInJlcXVpcmVkXCJcbiAgICAgIFt2YWx1ZV09XCJ2YWx1ZVwiXG4gICAgICBbYXR0ci5hcmlhLWxhYmVsbGVkYnldPVwiYXJpYUxhYmVsbGVkYnlcIlxuICAgICAgKGNoYW5nZSk9XCJvbkNoYW5nZSgkZXZlbnQpXCI+XG4gICAgPGRpdiAqbmdJZj1cInNrZWxldG9uXCIgY2xhc3M9XCJyYWRpby1idXR0b24gc2tlbGV0b25cIj48L2Rpdj5cbiAgICA8bGFiZWxcbiAgICAgIGNsYXNzPVwicmFkaW8tYnV0dG9uX19sYWJlbFwiXG4gICAgICBbbmdDbGFzc109XCJ7XG4gICAgICAgICdza2VsZXRvbic6IHNrZWxldG9uXG4gICAgICB9XCJcbiAgICAgIFtmb3JdPVwiaWRcIlxuICAgICAgaWQ9XCJsYWJlbC17e2lkfX1cIj5cbiAgICAgIDxzcGFuIGNsYXNzPVwicmFkaW8tYnV0dG9uX19hcHBlYXJhbmNlXCI+PC9zcGFuPlxuICAgICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuICAgIDwvbGFiZWw+XG4gIGAsXG4gIHByb3ZpZGVyczogW1xuICAgIHtcbiAgICAgIHByb3ZpZGU6IE5HX1ZBTFVFX0FDQ0VTU09SLFxuICAgICAgdXNlRXhpc3Rpbmc6IFJhZGlvLFxuICAgICAgbXVsdGk6IHRydWVcbiAgICB9XG4gIF1cbn0pXG5leHBvcnQgY2xhc3MgUmFkaW8ge1xuICAvKipcbiAgICogVXNlZCB0byBkeW5hbWljYWxseSBjcmVhdGUgdW5pcXVlIGlkcyBmb3IgdGhlIGBSYWRpb2AuXG4gICAqL1xuICBzdGF0aWMgcmFkaW9Db3VudCA9IDA7XG5cbiAgLyoqIFNldHMgdGhlIGNoZWNrZWQgc3RhdHVzLiAqL1xuICBASW5wdXQoKSBjaGVja2VkID0gZmFsc2U7XG5cbiAgLyoqIFNldHMgdGhlIGBSYWRpb2AgYDxpbnB1dD5gIG5hbWUuICovXG4gIEBJbnB1dCgpIG5hbWUgPSAnJztcblxuICAvKiogU2V0IHRvIGB0cnVlYCB0byBkaXNhYmxlIHRoZSBgUmFkaW9gLiAqL1xuICBASW5wdXQoKSBkaXNhYmxlZCA9IGZhbHNlO1xuXG4gIC8qKiBTZXRzIHRoZSBsYWJlbCBwbGFjZW1lbnQuIERlZmF1bHQgdG8gYHJpZ2h0YC4gKi9cbiAgQElucHV0KCkgbGFiZWxQbGFjZW1lbnQ6ICdyaWdodCcgfCAnbGVmdCcgPSAncmlnaHQnO1xuXG4gIEBJbnB1dCgpIHNldCBhcmlhTGFiZWxsZWRieSh2YWx1ZTogc3RyaW5nKSB7XG4gICAgdGhpcy5fbGFiZWxsZWRieSA9IHZhbHVlO1xuICB9XG5cbiAgZ2V0IGFyaWFMYWJlbGxlZGJ5KCkge1xuICAgIGlmICh0aGlzLl9sYWJlbGxlZGJ5KSB7XG4gICAgICByZXR1cm4gdGhpcy5fbGFiZWxsZWRieTtcbiAgICB9XG4gICAgcmV0dXJuIGBsYWJlbC0ke3RoaXMuaWR9YDtcbiAgfVxuICAvKipcbiAgICogU2V0cyB0aGUgSFRNTCByZXF1aXJlZCBhdHRyaWJ1dGVcbiAgICovXG4gIEBJbnB1dCgpIHJlcXVpcmVkID0gZmFsc2U7XG4gIC8qKlxuICAgKiBUaGUgdmFsdWUgb2YgdGhlIGBSYWRpb2AuXG4gICAqL1xuICBASW5wdXQoKSB2YWx1ZSA9ICcnO1xuICAvKipcbiAgICogU2V0IHRvIGB0cnVlYCBmb3IgYSBsb2FkaW5nIHJhZGlvLlxuICAgKi9cbiAgQElucHV0KCkgc2tlbGV0b24gPSBmYWxzZTtcbiAgLyoqXG4gICAqIFRoZSBpZCBmb3IgdGhlIGBSYWRpb2AuXG4gICAqL1xuICBASW5wdXQoKSBpZCA9IGByYWRpby0ke1JhZGlvLnJhZGlvQ291bnQrK31gO1xuICAvKipcbiAgICogZW1pdHMgd2hlbiB0aGUgc3RhdGUgb2YgdGhlIHJhZGlvIGNoYW5nZXNcbiAgICovXG4gIC8vIHRzbGludDpkaXNhYmxlLW5leHQtbGluZTogbm8tb3V0cHV0LW5hdGl2ZVxuICBAT3V0cHV0KCkgY2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcjxSYWRpb0NoYW5nZT4oKTtcbiAgLyoqXG4gICAqIEJpbmRzICdyYWRpbycgdmFsdWUgdG8gdGhlIHJvbGUgYXR0cmlidXRlIGZvciBgUmFkaW9gLlxuICAgKi9cbiAgQEhvc3RCaW5kaW5nKCdhdHRyLnJvbGUnKSByb2xlID0gJ3JhZGlvJztcblxuICBASG9zdEJpbmRpbmcoJ2NsYXNzLnJhZGlvLWJ1dHRvbi13cmFwcGVyJykgaG9zdENsYXNzID0gdHJ1ZTtcblxuICBASG9zdEJpbmRpbmcoJ2NsYXNzLnJhZGlvLWJ1dHRvbi13cmFwcGVyLS1sYWJlbC1sZWZ0JykgZ2V0IGxhYmVsTGVmdCgpIHtcbiAgICByZXR1cm4gdGhpcy5sYWJlbFBsYWNlbWVudCA9PT0gJ2xlZnQnO1xuICB9XG5cbiAgLy8gdHNsaW50OmRpc2FibGUtbmV4dC1saW5lOiB2YXJpYWJsZS1uYW1lXG4gIHByb3RlY3RlZCBfbGFiZWxsZWRieSA9ICcnO1xuXG4gIC8qKlxuICAgKiBIYW5kbGVyIHByb3ZpZGVkIGJ5IHRoZSBgUmFkaW9Hcm91cGAgdG8gYnViYmxlIGV2ZW50cyB1cFxuICAgKi9cbiAgcmFkaW9DaGFuZ2VIYW5kbGVyID0gKGV2ZW50OiBSYWRpb0NoYW5nZSkgPT4geyB9O1xuXG4gIC8qKlxuICAgKiBTeW5jaHJvbml6ZXMgd2l0aCB0aGUgYFJhZGlvR3JvdXBgIGluIHRoZSBldmVudCBvZiBhIGNoYW5nZWQgYFJhZGlvYC5cbiAgICogRW1pdHMgdGhlIGNoYW5nZXMgb2YgYm90aCB0aGUgYFJhZGlvR3JvdXBgIGFuZCBgUmFkaW9gLlxuICAgKi9cbiAgb25DaGFuZ2UoZXZlbnQ6IEV2ZW50KSB7XG4gICAgZXZlbnQuc3RvcFByb3BhZ2F0aW9uKCk7XG4gICAgdGhpcy5jaGVja2VkID0gKGV2ZW50LnRhcmdldCBhcyBIVE1MSW5wdXRFbGVtZW50KS5jaGVja2VkO1xuICAgIGNvbnN0IHJhZGlvRXZlbnQgPSBuZXcgUmFkaW9DaGFuZ2UodGhpcywgdGhpcy52YWx1ZSk7XG4gICAgdGhpcy5jaGFuZ2UuZW1pdChyYWRpb0V2ZW50KTtcbiAgICB0aGlzLnJhZGlvQ2hhbmdlSGFuZGxlcihyYWRpb0V2ZW50KTtcbiAgfVxuXG4gIC8qKlxuICAgKiBNZXRob2QgY2FsbGVkIGJ5IGBSYWRpb0dyb3VwYCB3aXRoIGEgY2FsbGJhY2sgZnVuY3Rpb24gdG8gYnViYmxlIGBSYWRpb0NoYW5nZWAgZXZlbnRzXG4gICAqIEBwYXJhbSBmbiBjYWxsYmFjayB0aGF0IGV4cGVjdHMgYSBgUmFkaW9DaGFuZ2VgIGFzIGFuIGFyZ3VtZW50XG4gICAqL1xuICByZWdpc3RlclJhZGlvQ2hhbmdlSGFuZGxlcihmbjogKGV2ZW50OiBSYWRpb0NoYW5nZSkgPT4gdm9pZCkge1xuICAgIHRoaXMucmFkaW9DaGFuZ2VIYW5kbGVyID0gZm47XG4gIH1cbn1cbiJdfQ==