@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>
216 lines • 13.3 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 { ButtonRadioChange } from './button-radio-change.class';
// tslint:disable-next-line: component-class-suffix
export class ButtonRadio {
constructor() {
/**
* Sets the checked status
*/
this.checked = false;
/**
* Sets the name of the `ButtonRadio`
*/
this.name = '';
/**
* Set to `true` to disable it.
*/
this.disabled = false;
/**
* Sets the HTML required attribute
*/
this.required = false;
/**
* The value of the `ButtonRadio`.
*/
this.value = '';
/**
* Set to `true` for a loading state.
*/
this.skeleton = false;
/**
* The id for the `ButtonRadio`.
*/
this.id = `button-radio-${ButtonRadio.buttonRadioCount++}`;
/**
* emits when the state of the button radio changes
*/
// tslint:disable-next-line: no-output-native
this.change = new EventEmitter();
/**
* Binds 'radio' value to the role attribute for `ButtonRadio`.
*/
this.role = 'radio';
this.hostClass = true;
// tslint:disable-next-line: variable-name
this._labelledby = '';
/**
* Handler provided by the `ButtonRadioGroup` to bubble events up
*/
this.buttonRadioChangeHandler = (/**
* @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}`;
}
/**
* Synchronizes with the `ButtonRadioGroup` in the event of a changed `ButtonRadio`.
* Emits the changes of both the `ButtonRadioGroup` and `ButtonRadio`.
* @param {?} event
* @return {?}
*/
onChange(event) {
event.stopPropagation();
this.checked = ((/** @type {?} */ (event.target))).checked;
/** @type {?} */
const ButtonRadioEvent = new ButtonRadioChange(this, this.value);
this.change.emit(ButtonRadioEvent);
this.buttonRadioChangeHandler(ButtonRadioEvent);
}
/**
* Method called by `ButtonRadioGroup` with a callback function to bubble `ButtonRadioChange` events
* @param {?} fn callback that expects a `ButtonRadioChange` as an argument
* @return {?}
*/
registerButtonRadioChangeHandler(fn) {
this.buttonRadioChangeHandler = fn;
}
}
/**
* Used to dynamically create unique ids for the `ButtonRadio`.
*/
ButtonRadio.buttonRadioCount = 0;
ButtonRadio.decorators = [
{ type: Component, args: [{
selector: 'suka-button-radio',
template: `
<input
*ngIf="!skeleton"
class="button-radio"
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="button-radio skeleton"></div>
<label
class="button-radio__label"
[ngClass]="{
'skeleton': skeleton
}"
[for]="id"
id="label-{{id}}">
<ng-content></ng-content>
</label>
`,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: ButtonRadio,
multi: true
}
]
}] }
];
ButtonRadio.propDecorators = {
checked: [{ type: Input }],
name: [{ type: Input }],
disabled: [{ 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.button-radio-wrapper',] }]
};
if (false) {
/**
* Used to dynamically create unique ids for the `ButtonRadio`.
* @type {?}
*/
ButtonRadio.buttonRadioCount;
/**
* Sets the checked status
* @type {?}
*/
ButtonRadio.prototype.checked;
/**
* Sets the name of the `ButtonRadio`
* @type {?}
*/
ButtonRadio.prototype.name;
/**
* Set to `true` to disable it.
* @type {?}
*/
ButtonRadio.prototype.disabled;
/**
* Sets the HTML required attribute
* @type {?}
*/
ButtonRadio.prototype.required;
/**
* The value of the `ButtonRadio`.
* @type {?}
*/
ButtonRadio.prototype.value;
/**
* Set to `true` for a loading state.
* @type {?}
*/
ButtonRadio.prototype.skeleton;
/**
* The id for the `ButtonRadio`.
* @type {?}
*/
ButtonRadio.prototype.id;
/**
* emits when the state of the button radio changes
* @type {?}
*/
ButtonRadio.prototype.change;
/**
* Binds 'radio' value to the role attribute for `ButtonRadio`.
* @type {?}
*/
ButtonRadio.prototype.role;
/** @type {?} */
ButtonRadio.prototype.hostClass;
/**
* @type {?}
* @protected
*/
ButtonRadio.prototype._labelledby;
/**
* Handler provided by the `ButtonRadioGroup` to bubble events up
* @type {?}
*/
ButtonRadio.prototype.buttonRadioChangeHandler;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLXJhZGlvLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0BrdXNoa2kvbmctc3VrYS8iLCJzb3VyY2VzIjpbImxpYi9idXR0b24tcmFkaW8vYnV0dG9uLXJhZGlvLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7O0FBQUEsT0FBTyxFQUNMLFNBQVMsRUFDVCxLQUFLLEVBQ0wsV0FBVyxFQUNYLE1BQU0sRUFDTixZQUFZLEVBQ2IsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDbkQsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFxQ2hFLG1EQUFtRDtBQUNuRCxNQUFNLE9BQU8sV0FBVztJQW5DeEI7Ozs7UUE0Q1csWUFBTyxHQUFHLEtBQUssQ0FBQzs7OztRQUtoQixTQUFJLEdBQUcsRUFBRSxDQUFDOzs7O1FBS1YsYUFBUSxHQUFHLEtBQUssQ0FBQzs7OztRQWdCakIsYUFBUSxHQUFHLEtBQUssQ0FBQzs7OztRQUlqQixVQUFLLEdBQUcsRUFBRSxDQUFDOzs7O1FBS1gsYUFBUSxHQUFHLEtBQUssQ0FBQzs7OztRQUtqQixPQUFFLEdBQUcsZ0JBQWdCLFdBQVcsQ0FBQyxnQkFBZ0IsRUFBRSxFQUFFLENBQUM7Ozs7O1FBTXJELFdBQU0sR0FBRyxJQUFJLFlBQVksRUFBcUIsQ0FBQzs7OztRQUkvQixTQUFJLEdBQUcsT0FBTyxDQUFDO1FBRUUsY0FBUyxHQUFHLElBQUksQ0FBQzs7UUFHbEQsZ0JBQVcsR0FBRyxFQUFFLENBQUM7Ozs7UUFLM0IsNkJBQXdCOzs7O1FBQUcsQ0FBQyxLQUF3QixFQUFFLEVBQUUsR0FBRyxDQUFDLEVBQUM7SUFxQi9ELENBQUM7Ozs7O0lBckVDLElBQWEsY0FBYyxDQUFDLEtBQWE7UUFDdkMsSUFBSSxDQUFDLFdBQVcsR0FBRyxLQUFLLENBQUM7SUFDM0IsQ0FBQzs7OztJQUVELElBQUksY0FBYztRQUNoQixJQUFJLElBQUksQ0FBQyxXQUFXLEVBQUU7WUFDcEIsT0FBTyxJQUFJLENBQUMsV0FBVyxDQUFDO1NBQ3pCO1FBQ0QsT0FBTyxTQUFTLElBQUksQ0FBQyxFQUFFLEVBQUUsQ0FBQztJQUM1QixDQUFDOzs7Ozs7O0lBNkNELFFBQVEsQ0FBQyxLQUFZO1FBQ25CLEtBQUssQ0FBQyxlQUFlLEVBQUUsQ0FBQztRQUN4QixJQUFJLENBQUMsT0FBTyxHQUFHLENBQUMsbUJBQUEsS0FBSyxDQUFDLE1BQU0sRUFBb0IsQ0FBQyxDQUFDLE9BQU8sQ0FBQzs7Y0FDcEQsZ0JBQWdCLEdBQUcsSUFBSSxpQkFBaUIsQ0FBQyxJQUFJLEVBQUUsSUFBSSxDQUFDLEtBQUssQ0FBQztRQUNoRSxJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFDO1FBQ25DLElBQUksQ0FBQyx3QkFBd0IsQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFDO0lBQ2xELENBQUM7Ozs7OztJQU1ELGdDQUFnQyxDQUFDLEVBQXNDO1FBQ3JFLElBQUksQ0FBQyx3QkFBd0IsR0FBRyxFQUFFLENBQUM7SUFDckMsQ0FBQzs7Ozs7QUFyRk0sNEJBQWdCLEdBQUcsQ0FBQyxDQUFDOztZQXZDN0IsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxtQkFBbUI7Z0JBQzdCLFFBQVEsRUFBRTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0F1QlQ7Z0JBQ0QsU0FBUyxFQUFFO29CQUNUO3dCQUNFLE9BQU8sRUFBRSxpQkFBaUI7d0JBQzFCLFdBQVcsRUFBRSxXQUFXO3dCQUN4QixLQUFLLEVBQUUsSUFBSTtxQkFDWjtpQkFDRjthQUNGOzs7c0JBV0UsS0FBSzttQkFLTCxLQUFLO3VCQUtMLEtBQUs7NkJBRUwsS0FBSzt1QkFjTCxLQUFLO29CQUlMLEtBQUs7dUJBS0wsS0FBSztpQkFLTCxLQUFLO3FCQU1MLE1BQU07bUJBSU4sV0FBVyxTQUFDLFdBQVc7d0JBRXZCLFdBQVcsU0FBQyw0QkFBNEI7Ozs7Ozs7SUF6RHpDLDZCQUE0Qjs7Ozs7SUFLNUIsOEJBQXlCOzs7OztJQUt6QiwyQkFBbUI7Ozs7O0lBS25CLCtCQUEwQjs7Ozs7SUFnQjFCLCtCQUEwQjs7Ozs7SUFJMUIsNEJBQW9COzs7OztJQUtwQiwrQkFBMEI7Ozs7O0lBSzFCLHlCQUErRDs7Ozs7SUFNL0QsNkJBQXlEOzs7OztJQUl6RCwyQkFBeUM7O0lBRXpDLGdDQUE0RDs7Ozs7SUFHNUQsa0NBQTJCOzs7OztJQUszQiwrQ0FBNkQiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDb21wb25lbnQsXG4gIElucHV0LFxuICBIb3N0QmluZGluZyxcbiAgT3V0cHV0LFxuICBFdmVudEVtaXR0ZXJcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBOR19WQUxVRV9BQ0NFU1NPUiB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcbmltcG9ydCB7IEJ1dHRvblJhZGlvQ2hhbmdlIH0gZnJvbSAnLi9idXR0b24tcmFkaW8tY2hhbmdlLmNsYXNzJztcblxuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdzdWthLWJ1dHRvbi1yYWRpbycsXG4gIHRlbXBsYXRlOiBgXG4gICAgPGlucHV0XG4gICAgICAqbmdJZj1cIiFza2VsZXRvblwiXG4gICAgICBjbGFzcz1cImJ1dHRvbi1yYWRpb1wiXG4gICAgICB0eXBlPVwicmFkaW9cIlxuICAgICAgW2NoZWNrZWRdPVwiY2hlY2tlZFwiXG4gICAgICBbZGlzYWJsZWRdPVwiZGlzYWJsZWRcIlxuICAgICAgW25hbWVdPVwibmFtZVwiXG4gICAgICBbaWRdPVwiaWRcIlxuICAgICAgW3JlcXVpcmVkXT1cInJlcXVpcmVkXCJcbiAgICAgIFt2YWx1ZV09XCJ2YWx1ZVwiXG4gICAgICBbYXR0ci5hcmlhLWxhYmVsbGVkYnldPVwiYXJpYUxhYmVsbGVkYnlcIlxuICAgICAgKGNoYW5nZSk9XCJvbkNoYW5nZSgkZXZlbnQpXCI+XG4gICAgPGRpdiAqbmdJZj1cInNrZWxldG9uXCIgY2xhc3M9XCJidXR0b24tcmFkaW8gc2tlbGV0b25cIj48L2Rpdj5cbiAgICA8bGFiZWxcbiAgICAgIGNsYXNzPVwiYnV0dG9uLXJhZGlvX19sYWJlbFwiXG4gICAgICBbbmdDbGFzc109XCJ7XG4gICAgICAgICdza2VsZXRvbic6IHNrZWxldG9uXG4gICAgICB9XCJcbiAgICAgIFtmb3JdPVwiaWRcIlxuICAgICAgaWQ9XCJsYWJlbC17e2lkfX1cIj5cbiAgICAgIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbiAgICA8L2xhYmVsPlxuICBgLFxuICBwcm92aWRlcnM6IFtcbiAgICB7XG4gICAgICBwcm92aWRlOiBOR19WQUxVRV9BQ0NFU1NPUixcbiAgICAgIHVzZUV4aXN0aW5nOiBCdXR0b25SYWRpbyxcbiAgICAgIG11bHRpOiB0cnVlXG4gICAgfVxuICBdXG59KVxuLy8gdHNsaW50OmRpc2FibGUtbmV4dC1saW5lOiBjb21wb25lbnQtY2xhc3Mtc3VmZml4XG5leHBvcnQgY2xhc3MgQnV0dG9uUmFkaW8ge1xuICAvKipcbiAgICogVXNlZCB0byBkeW5hbWljYWxseSBjcmVhdGUgdW5pcXVlIGlkcyBmb3IgdGhlIGBCdXR0b25SYWRpb2AuXG4gICAqL1xuICBzdGF0aWMgYnV0dG9uUmFkaW9Db3VudCA9IDA7XG5cbiAgLyoqXG4gICAqIFNldHMgdGhlIGNoZWNrZWQgc3RhdHVzXG4gICAqL1xuICBASW5wdXQoKSBjaGVja2VkID0gZmFsc2U7XG5cbiAgLyoqXG4gICAqIFNldHMgdGhlIG5hbWUgb2YgdGhlIGBCdXR0b25SYWRpb2BcbiAgICovXG4gIEBJbnB1dCgpIG5hbWUgPSAnJztcblxuICAvKipcbiAgICogU2V0IHRvIGB0cnVlYCB0byBkaXNhYmxlIGl0LlxuICAgKi9cbiAgQElucHV0KCkgZGlzYWJsZWQgPSBmYWxzZTtcblxuICBASW5wdXQoKSBzZXQgYXJpYUxhYmVsbGVkYnkodmFsdWU6IHN0cmluZykge1xuICAgIHRoaXMuX2xhYmVsbGVkYnkgPSB2YWx1ZTtcbiAgfVxuXG4gIGdldCBhcmlhTGFiZWxsZWRieSgpIHtcbiAgICBpZiAodGhpcy5fbGFiZWxsZWRieSkge1xuICAgICAgcmV0dXJuIHRoaXMuX2xhYmVsbGVkYnk7XG4gICAgfVxuICAgIHJldHVybiBgbGFiZWwtJHt0aGlzLmlkfWA7XG4gIH1cblxuICAvKipcbiAgICogU2V0cyB0aGUgSFRNTCByZXF1aXJlZCBhdHRyaWJ1dGVcbiAgICovXG4gIEBJbnB1dCgpIHJlcXVpcmVkID0gZmFsc2U7XG4gIC8qKlxuICAgKiBUaGUgdmFsdWUgb2YgdGhlIGBCdXR0b25SYWRpb2AuXG4gICAqL1xuICBASW5wdXQoKSB2YWx1ZSA9ICcnO1xuXG4gIC8qKlxuICAgKiBTZXQgdG8gYHRydWVgIGZvciBhIGxvYWRpbmcgc3RhdGUuXG4gICAqL1xuICBASW5wdXQoKSBza2VsZXRvbiA9IGZhbHNlO1xuXG4gIC8qKlxuICAgKiBUaGUgaWQgZm9yIHRoZSBgQnV0dG9uUmFkaW9gLlxuICAgKi9cbiAgQElucHV0KCkgaWQgPSBgYnV0dG9uLXJhZGlvLSR7QnV0dG9uUmFkaW8uYnV0dG9uUmFkaW9Db3VudCsrfWA7XG5cbiAgLyoqXG4gICAqIGVtaXRzIHdoZW4gdGhlIHN0YXRlIG9mIHRoZSBidXR0b24gcmFkaW8gY2hhbmdlc1xuICAgKi9cbiAgLy8gdHNsaW50OmRpc2FibGUtbmV4dC1saW5lOiBuby1vdXRwdXQtbmF0aXZlXG4gIEBPdXRwdXQoKSBjaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPEJ1dHRvblJhZGlvQ2hhbmdlPigpO1xuICAvKipcbiAgICogQmluZHMgJ3JhZGlvJyB2YWx1ZSB0byB0aGUgcm9sZSBhdHRyaWJ1dGUgZm9yIGBCdXR0b25SYWRpb2AuXG4gICAqL1xuICBASG9zdEJpbmRpbmcoJ2F0dHIucm9sZScpIHJvbGUgPSAncmFkaW8nO1xuXG4gIEBIb3N0QmluZGluZygnY2xhc3MuYnV0dG9uLXJhZGlvLXdyYXBwZXInKSBob3N0Q2xhc3MgPSB0cnVlO1xuXG4gIC8vIHRzbGludDpkaXNhYmxlLW5leHQtbGluZTogdmFyaWFibGUtbmFtZVxuICBwcm90ZWN0ZWQgX2xhYmVsbGVkYnkgPSAnJztcblxuICAvKipcbiAgICogSGFuZGxlciBwcm92aWRlZCBieSB0aGUgYEJ1dHRvblJhZGlvR3JvdXBgIHRvIGJ1YmJsZSBldmVudHMgdXBcbiAgICovXG4gIGJ1dHRvblJhZGlvQ2hhbmdlSGFuZGxlciA9IChldmVudDogQnV0dG9uUmFkaW9DaGFuZ2UpID0+IHsgfTtcblxuICAvKipcbiAgICogU3luY2hyb25pemVzIHdpdGggdGhlIGBCdXR0b25SYWRpb0dyb3VwYCBpbiB0aGUgZXZlbnQgb2YgYSBjaGFuZ2VkIGBCdXR0b25SYWRpb2AuXG4gICAqIEVtaXRzIHRoZSBjaGFuZ2VzIG9mIGJvdGggdGhlIGBCdXR0b25SYWRpb0dyb3VwYCBhbmQgYEJ1dHRvblJhZGlvYC5cbiAgICovXG4gIG9uQ2hhbmdlKGV2ZW50OiBFdmVudCkge1xuICAgIGV2ZW50LnN0b3BQcm9wYWdhdGlvbigpO1xuICAgIHRoaXMuY2hlY2tlZCA9IChldmVudC50YXJnZXQgYXMgSFRNTElucHV0RWxlbWVudCkuY2hlY2tlZDtcbiAgICBjb25zdCBCdXR0b25SYWRpb0V2ZW50ID0gbmV3IEJ1dHRvblJhZGlvQ2hhbmdlKHRoaXMsIHRoaXMudmFsdWUpO1xuICAgIHRoaXMuY2hhbmdlLmVtaXQoQnV0dG9uUmFkaW9FdmVudCk7XG4gICAgdGhpcy5idXR0b25SYWRpb0NoYW5nZUhhbmRsZXIoQnV0dG9uUmFkaW9FdmVudCk7XG4gIH1cblxuICAvKipcbiAgICogTWV0aG9kIGNhbGxlZCBieSBgQnV0dG9uUmFkaW9Hcm91cGAgd2l0aCBhIGNhbGxiYWNrIGZ1bmN0aW9uIHRvIGJ1YmJsZSBgQnV0dG9uUmFkaW9DaGFuZ2VgIGV2ZW50c1xuICAgKiBAcGFyYW0gZm4gY2FsbGJhY2sgdGhhdCBleHBlY3RzIGEgYEJ1dHRvblJhZGlvQ2hhbmdlYCBhcyBhbiBhcmd1bWVudFxuICAgKi9cbiAgcmVnaXN0ZXJCdXR0b25SYWRpb0NoYW5nZUhhbmRsZXIoZm46IChldmVudDogQnV0dG9uUmFkaW9DaGFuZ2UpID0+IHZvaWQpIHtcbiAgICB0aGlzLmJ1dHRvblJhZGlvQ2hhbmdlSGFuZGxlciA9IGZuO1xuICB9XG59XG4iXX0=