@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>
210 lines • 13 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';
// tslint:disable-next-line: component-class-suffix
export class Radio {
constructor() {
this.checked = false;
this.name = '';
this.disabled = false;
this.labelPlacement = 'right';
/**
* Sets the HTML required attribute
*/
this.required = false;
/**
* The value of the `Radio`.
*/
this.value = '';
/**
* Set to `true` for a loading table.
*/
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;
/** @type {?} */
Radio.prototype.checked;
/** @type {?} */
Radio.prototype.name;
/** @type {?} */
Radio.prototype.disabled;
/** @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 table.
* @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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmFkaW8uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vQGt1c2hraS9uZy1zdWthLyIsInNvdXJjZXMiOlsibGliL3JhZGlvL3JhZGlvLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7O0FBQUEsT0FBTyxFQUNMLFNBQVMsRUFDVCxLQUFLLEVBQ0wsV0FBVyxFQUNYLE1BQU0sRUFDTixZQUFZLEVBQ2IsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDbkQsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLHNCQUFzQixDQUFDO0FBc0NuRCxtREFBbUQ7QUFDbkQsTUFBTSxPQUFPLEtBQUs7SUFwQ2xCO1FBMENXLFlBQU8sR0FBRyxLQUFLLENBQUM7UUFFaEIsU0FBSSxHQUFHLEVBQUUsQ0FBQztRQUVWLGFBQVEsR0FBRyxLQUFLLENBQUM7UUFFakIsbUJBQWMsR0FBcUIsT0FBTyxDQUFDOzs7O1FBZTNDLGFBQVEsR0FBRyxLQUFLLENBQUM7Ozs7UUFJakIsVUFBSyxHQUFHLEVBQUUsQ0FBQzs7OztRQUlYLGFBQVEsR0FBRyxLQUFLLENBQUM7Ozs7UUFJakIsT0FBRSxHQUFHLFNBQVMsS0FBSyxDQUFDLFVBQVUsRUFBRSxFQUFFLENBQUM7Ozs7O1FBS2xDLFdBQU0sR0FBRyxJQUFJLFlBQVksRUFBZSxDQUFDOzs7O1FBSXpCLFNBQUksR0FBRyxPQUFPLENBQUM7UUFFRSxjQUFTLEdBQUcsSUFBSSxDQUFDOztRQU9sRCxnQkFBVyxHQUFHLEVBQUUsQ0FBQzs7OztRQUszQix1QkFBa0I7Ozs7UUFBRyxDQUFDLEtBQWtCLEVBQUUsRUFBRSxHQUFHLENBQUMsRUFBQztJQXFCbkQsQ0FBQzs7Ozs7SUFyRUMsSUFBYSxjQUFjLENBQUMsS0FBYTtRQUN2QyxJQUFJLENBQUMsV0FBVyxHQUFHLEtBQUssQ0FBQztJQUMzQixDQUFDOzs7O0lBRUQsSUFBSSxjQUFjO1FBQ2hCLElBQUksSUFBSSxDQUFDLFdBQVcsRUFBRTtZQUNwQixPQUFPLElBQUksQ0FBQyxXQUFXLENBQUM7U0FDekI7UUFDRCxPQUFPLFNBQVMsSUFBSSxDQUFDLEVBQUUsRUFBRSxDQUFDO0lBQzVCLENBQUM7Ozs7SUE2QkQsSUFBMkQsU0FBUztRQUNsRSxPQUFPLElBQUksQ0FBQyxjQUFjLEtBQUssTUFBTSxDQUFDO0lBQ3hDLENBQUM7Ozs7Ozs7SUFjRCxRQUFRLENBQUMsS0FBWTtRQUNuQixLQUFLLENBQUMsZUFBZSxFQUFFLENBQUM7UUFDeEIsSUFBSSxDQUFDLE9BQU8sR0FBRyxDQUFDLG1CQUFBLEtBQUssQ0FBQyxNQUFNLEVBQW9CLENBQUMsQ0FBQyxPQUFPLENBQUM7O2NBQ3BELFVBQVUsR0FBRyxJQUFJLFdBQVcsQ0FBQyxJQUFJLEVBQUUsSUFBSSxDQUFDLEtBQUssQ0FBQztRQUNwRCxJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsQ0FBQztRQUM3QixJQUFJLENBQUMsa0JBQWtCLENBQUMsVUFBVSxDQUFDLENBQUM7SUFDdEMsQ0FBQzs7Ozs7O0lBTUQsMEJBQTBCLENBQUMsRUFBZ0M7UUFDekQsSUFBSSxDQUFDLGtCQUFrQixHQUFHLEVBQUUsQ0FBQztJQUMvQixDQUFDOzs7OztBQTlFTSxnQkFBVSxHQUFHLENBQUMsQ0FBQzs7WUF4Q3ZCLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsWUFBWTtnQkFDdEIsUUFBUSxFQUFFOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0F3QlQ7Z0JBQ0QsU0FBUyxFQUFFO29CQUNUO3dCQUNFLE9BQU8sRUFBRSxpQkFBaUI7d0JBQzFCLFdBQVcsRUFBRSxLQUFLO3dCQUNsQixLQUFLLEVBQUUsSUFBSTtxQkFDWjtpQkFDRjthQUNGOzs7c0JBUUUsS0FBSzttQkFFTCxLQUFLO3VCQUVMLEtBQUs7NkJBRUwsS0FBSzs2QkFFTCxLQUFLO3VCQWFMLEtBQUs7b0JBSUwsS0FBSzt1QkFJTCxLQUFLO2lCQUlMLEtBQUs7cUJBS0wsTUFBTTttQkFJTixXQUFXLFNBQUMsV0FBVzt3QkFFdkIsV0FBVyxTQUFDLDRCQUE0Qjt3QkFFeEMsV0FBVyxTQUFDLHdDQUF3Qzs7Ozs7OztJQWhEckQsaUJBQXNCOztJQUV0Qix3QkFBeUI7O0lBRXpCLHFCQUFtQjs7SUFFbkIseUJBQTBCOztJQUUxQiwrQkFBb0Q7Ozs7O0lBZXBELHlCQUEwQjs7Ozs7SUFJMUIsc0JBQW9COzs7OztJQUlwQix5QkFBMEI7Ozs7O0lBSTFCLG1CQUE0Qzs7Ozs7SUFLNUMsdUJBQW1EOzs7OztJQUluRCxxQkFBeUM7O0lBRXpDLDBCQUE0RDs7Ozs7SUFPNUQsNEJBQTJCOzs7OztJQUszQixtQ0FBaUQiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDb21wb25lbnQsXG4gIElucHV0LFxuICBIb3N0QmluZGluZyxcbiAgT3V0cHV0LFxuICBFdmVudEVtaXR0ZXJcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBOR19WQUxVRV9BQ0NFU1NPUiB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcbmltcG9ydCB7IFJhZGlvQ2hhbmdlIH0gZnJvbSAnLi9yYWRpby1jaGFuZ2UuY2xhc3MnO1xuXG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3N1a2EtcmFkaW8nLFxuICB0ZW1wbGF0ZTogYFxuICAgIDxpbnB1dFxuICAgICAgKm5nSWY9XCIhc2tlbGV0b25cIlxuICAgICAgY2xhc3M9XCJyYWRpby1idXR0b25cIlxuICAgICAgdHlwZT1cInJhZGlvXCJcbiAgICAgIFtjaGVja2VkXT1cImNoZWNrZWRcIlxuICAgICAgW2Rpc2FibGVkXT1cImRpc2FibGVkXCJcbiAgICAgIFtuYW1lXT1cIm5hbWVcIlxuICAgICAgW2lkXT1cImlkXCJcbiAgICAgIFtyZXF1aXJlZF09XCJyZXF1aXJlZFwiXG4gICAgICBbdmFsdWVdPVwidmFsdWVcIlxuICAgICAgW2F0dHIuYXJpYS1sYWJlbGxlZGJ5XT1cImFyaWFMYWJlbGxlZGJ5XCJcbiAgICAgIChjaGFuZ2UpPVwib25DaGFuZ2UoJGV2ZW50KVwiPlxuICAgIDxkaXYgKm5nSWY9XCJza2VsZXRvblwiIGNsYXNzPVwicmFkaW8tYnV0dG9uIHNrZWxldG9uXCI+PC9kaXY+XG4gICAgPGxhYmVsXG4gICAgICBjbGFzcz1cInJhZGlvLWJ1dHRvbl9fbGFiZWxcIlxuICAgICAgW25nQ2xhc3NdPVwie1xuICAgICAgICAnc2tlbGV0b24nOiBza2VsZXRvblxuICAgICAgfVwiXG4gICAgICBbZm9yXT1cImlkXCJcbiAgICAgIGlkPVwibGFiZWwte3tpZH19XCI+XG4gICAgICA8c3BhbiBjbGFzcz1cInJhZGlvLWJ1dHRvbl9fYXBwZWFyYW5jZVwiPjwvc3Bhbj5cbiAgICAgIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbiAgICA8L2xhYmVsPlxuICBgLFxuICBwcm92aWRlcnM6IFtcbiAgICB7XG4gICAgICBwcm92aWRlOiBOR19WQUxVRV9BQ0NFU1NPUixcbiAgICAgIHVzZUV4aXN0aW5nOiBSYWRpbyxcbiAgICAgIG11bHRpOiB0cnVlXG4gICAgfVxuICBdXG59KVxuLy8gdHNsaW50OmRpc2FibGUtbmV4dC1saW5lOiBjb21wb25lbnQtY2xhc3Mtc3VmZml4XG5leHBvcnQgY2xhc3MgUmFkaW8ge1xuICAvKipcbiAgICogVXNlZCB0byBkeW5hbWljYWxseSBjcmVhdGUgdW5pcXVlIGlkcyBmb3IgdGhlIGBSYWRpb2AuXG4gICAqL1xuICBzdGF0aWMgcmFkaW9Db3VudCA9IDA7XG5cbiAgQElucHV0KCkgY2hlY2tlZCA9IGZhbHNlO1xuXG4gIEBJbnB1dCgpIG5hbWUgPSAnJztcblxuICBASW5wdXQoKSBkaXNhYmxlZCA9IGZhbHNlO1xuXG4gIEBJbnB1dCgpIGxhYmVsUGxhY2VtZW50OiAncmlnaHQnIHwgJ2xlZnQnID0gJ3JpZ2h0JztcblxuICBASW5wdXQoKSBzZXQgYXJpYUxhYmVsbGVkYnkodmFsdWU6IHN0cmluZykge1xuICAgIHRoaXMuX2xhYmVsbGVkYnkgPSB2YWx1ZTtcbiAgfVxuXG4gIGdldCBhcmlhTGFiZWxsZWRieSgpIHtcbiAgICBpZiAodGhpcy5fbGFiZWxsZWRieSkge1xuICAgICAgcmV0dXJuIHRoaXMuX2xhYmVsbGVkYnk7XG4gICAgfVxuICAgIHJldHVybiBgbGFiZWwtJHt0aGlzLmlkfWA7XG4gIH1cbiAgLyoqXG4gICAqIFNldHMgdGhlIEhUTUwgcmVxdWlyZWQgYXR0cmlidXRlXG4gICAqL1xuICBASW5wdXQoKSByZXF1aXJlZCA9IGZhbHNlO1xuICAvKipcbiAgICogVGhlIHZhbHVlIG9mIHRoZSBgUmFkaW9gLlxuICAgKi9cbiAgQElucHV0KCkgdmFsdWUgPSAnJztcbiAgLyoqXG4gICAqIFNldCB0byBgdHJ1ZWAgZm9yIGEgbG9hZGluZyB0YWJsZS5cbiAgICovXG4gIEBJbnB1dCgpIHNrZWxldG9uID0gZmFsc2U7XG4gIC8qKlxuICAgKiBUaGUgaWQgZm9yIHRoZSBgUmFkaW9gLlxuICAgKi9cbiAgQElucHV0KCkgaWQgPSBgcmFkaW8tJHtSYWRpby5yYWRpb0NvdW50Kyt9YDtcbiAgLyoqXG4gICAqIGVtaXRzIHdoZW4gdGhlIHN0YXRlIG9mIHRoZSByYWRpbyBjaGFuZ2VzXG4gICAqL1xuICAvLyB0c2xpbnQ6ZGlzYWJsZS1uZXh0LWxpbmU6IG5vLW91dHB1dC1uYXRpdmVcbiAgQE91dHB1dCgpIGNoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8UmFkaW9DaGFuZ2U+KCk7XG4gIC8qKlxuICAgKiBCaW5kcyAncmFkaW8nIHZhbHVlIHRvIHRoZSByb2xlIGF0dHJpYnV0ZSBmb3IgYFJhZGlvYC5cbiAgICovXG4gIEBIb3N0QmluZGluZygnYXR0ci5yb2xlJykgcm9sZSA9ICdyYWRpbyc7XG5cbiAgQEhvc3RCaW5kaW5nKCdjbGFzcy5yYWRpby1idXR0b24td3JhcHBlcicpIGhvc3RDbGFzcyA9IHRydWU7XG5cbiAgQEhvc3RCaW5kaW5nKCdjbGFzcy5yYWRpby1idXR0b24td3JhcHBlci0tbGFiZWwtbGVmdCcpIGdldCBsYWJlbExlZnQoKSB7XG4gICAgcmV0dXJuIHRoaXMubGFiZWxQbGFjZW1lbnQgPT09ICdsZWZ0JztcbiAgfVxuXG4gIC8vIHRzbGludDpkaXNhYmxlLW5leHQtbGluZTogdmFyaWFibGUtbmFtZVxuICBwcm90ZWN0ZWQgX2xhYmVsbGVkYnkgPSAnJztcblxuICAvKipcbiAgICogSGFuZGxlciBwcm92aWRlZCBieSB0aGUgYFJhZGlvR3JvdXBgIHRvIGJ1YmJsZSBldmVudHMgdXBcbiAgICovXG4gIHJhZGlvQ2hhbmdlSGFuZGxlciA9IChldmVudDogUmFkaW9DaGFuZ2UpID0+IHsgfTtcblxuICAvKipcbiAgICogU3luY2hyb25pemVzIHdpdGggdGhlIGBSYWRpb0dyb3VwYCBpbiB0aGUgZXZlbnQgb2YgYSBjaGFuZ2VkIGBSYWRpb2AuXG4gICAqIEVtaXRzIHRoZSBjaGFuZ2VzIG9mIGJvdGggdGhlIGBSYWRpb0dyb3VwYCBhbmQgYFJhZGlvYC5cbiAgICovXG4gIG9uQ2hhbmdlKGV2ZW50OiBFdmVudCkge1xuICAgIGV2ZW50LnN0b3BQcm9wYWdhdGlvbigpO1xuICAgIHRoaXMuY2hlY2tlZCA9IChldmVudC50YXJnZXQgYXMgSFRNTElucHV0RWxlbWVudCkuY2hlY2tlZDtcbiAgICBjb25zdCByYWRpb0V2ZW50ID0gbmV3IFJhZGlvQ2hhbmdlKHRoaXMsIHRoaXMudmFsdWUpO1xuICAgIHRoaXMuY2hhbmdlLmVtaXQocmFkaW9FdmVudCk7XG4gICAgdGhpcy5yYWRpb0NoYW5nZUhhbmRsZXIocmFkaW9FdmVudCk7XG4gIH1cblxuICAvKipcbiAgICogTWV0aG9kIGNhbGxlZCBieSBgUmFkaW9Hcm91cGAgd2l0aCBhIGNhbGxiYWNrIGZ1bmN0aW9uIHRvIGJ1YmJsZSBgUmFkaW9DaGFuZ2VgIGV2ZW50c1xuICAgKiBAcGFyYW0gZm4gY2FsbGJhY2sgdGhhdCBleHBlY3RzIGEgYFJhZGlvQ2hhbmdlYCBhcyBhbiBhcmd1bWVudFxuICAgKi9cbiAgcmVnaXN0ZXJSYWRpb0NoYW5nZUhhbmRsZXIoZm46IChldmVudDogUmFkaW9DaGFuZ2UpID0+IHZvaWQpIHtcbiAgICB0aGlzLnJhZGlvQ2hhbmdlSGFuZGxlciA9IGZuO1xuICB9XG59XG4iXX0=