@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>
198 lines • 12.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 { ButtonRadioChange } from './button-radio-change.class';
// tslint:disable-next-line: component-class-suffix
export class ButtonRadio {
constructor() {
this.checked = false;
this.name = '';
this.disabled = false;
/**
* 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 = `button-radio-${ButtonRadio.buttonRadioCount++}`;
/**
* 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 `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;
/** @type {?} */
ButtonRadio.prototype.checked;
/** @type {?} */
ButtonRadio.prototype.name;
/** @type {?} */
ButtonRadio.prototype.disabled;
/**
* Sets the HTML required attribute
* @type {?}
*/
ButtonRadio.prototype.required;
/**
* The value of the `Radio`.
* @type {?}
*/
ButtonRadio.prototype.value;
/**
* Set to `true` for a loading table.
* @type {?}
*/
ButtonRadio.prototype.skeleton;
/**
* The id for the `Radio`.
* @type {?}
*/
ButtonRadio.prototype.id;
/**
* emits when the state of the radio changes
* @type {?}
*/
ButtonRadio.prototype.change;
/**
* Binds 'radio' value to the role attribute for `Radio`.
* @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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLXJhZGlvLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0BrdXNoa2kvbmctc3VrYS8iLCJzb3VyY2VzIjpbImxpYi9idXR0b24tcmFkaW8vYnV0dG9uLXJhZGlvLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7O0FBQUEsT0FBTyxFQUNMLFNBQVMsRUFDVCxLQUFLLEVBQ0wsV0FBVyxFQUNYLE1BQU0sRUFDTixZQUFZLEVBQ2IsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDbkQsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFxQ2hFLG1EQUFtRDtBQUNuRCxNQUFNLE9BQU8sV0FBVztJQW5DeEI7UUF5Q1csWUFBTyxHQUFHLEtBQUssQ0FBQztRQUVoQixTQUFJLEdBQUcsRUFBRSxDQUFDO1FBRVYsYUFBUSxHQUFHLEtBQUssQ0FBQzs7OztRQWVqQixhQUFRLEdBQUcsS0FBSyxDQUFDOzs7O1FBSWpCLFVBQUssR0FBRyxFQUFFLENBQUM7Ozs7UUFJWCxhQUFRLEdBQUcsS0FBSyxDQUFDOzs7O1FBSWpCLE9BQUUsR0FBRyxnQkFBZ0IsV0FBVyxDQUFDLGdCQUFnQixFQUFFLEVBQUUsQ0FBQzs7Ozs7UUFLckQsV0FBTSxHQUFHLElBQUksWUFBWSxFQUFxQixDQUFDOzs7O1FBSS9CLFNBQUksR0FBRyxPQUFPLENBQUM7UUFFRSxjQUFTLEdBQUcsSUFBSSxDQUFDOztRQUdsRCxnQkFBVyxHQUFHLEVBQUUsQ0FBQzs7OztRQUszQiw2QkFBd0I7Ozs7UUFBRyxDQUFDLEtBQXdCLEVBQUUsRUFBRSxHQUFHLENBQUMsRUFBQztJQXFCL0QsQ0FBQzs7Ozs7SUFqRUMsSUFBYSxjQUFjLENBQUMsS0FBYTtRQUN2QyxJQUFJLENBQUMsV0FBVyxHQUFHLEtBQUssQ0FBQztJQUMzQixDQUFDOzs7O0lBRUQsSUFBSSxjQUFjO1FBQ2hCLElBQUksSUFBSSxDQUFDLFdBQVcsRUFBRTtZQUNwQixPQUFPLElBQUksQ0FBQyxXQUFXLENBQUM7U0FDekI7UUFDRCxPQUFPLFNBQVMsSUFBSSxDQUFDLEVBQUUsRUFBRSxDQUFDO0lBQzVCLENBQUM7Ozs7Ozs7SUF5Q0QsUUFBUSxDQUFDLEtBQVk7UUFDbkIsS0FBSyxDQUFDLGVBQWUsRUFBRSxDQUFDO1FBQ3hCLElBQUksQ0FBQyxPQUFPLEdBQUcsQ0FBQyxtQkFBQSxLQUFLLENBQUMsTUFBTSxFQUFvQixDQUFDLENBQUMsT0FBTyxDQUFDOztjQUNwRCxnQkFBZ0IsR0FBRyxJQUFJLGlCQUFpQixDQUFDLElBQUksRUFBRSxJQUFJLENBQUMsS0FBSyxDQUFDO1FBQ2hFLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLGdCQUFnQixDQUFDLENBQUM7UUFDbkMsSUFBSSxDQUFDLHdCQUF3QixDQUFDLGdCQUFnQixDQUFDLENBQUM7SUFDbEQsQ0FBQzs7Ozs7O0lBTUQsZ0NBQWdDLENBQUMsRUFBc0M7UUFDckUsSUFBSSxDQUFDLHdCQUF3QixHQUFHLEVBQUUsQ0FBQztJQUNyQyxDQUFDOzs7OztBQXhFTSw0QkFBZ0IsR0FBRyxDQUFDLENBQUM7O1lBdkM3QixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLG1CQUFtQjtnQkFDN0IsUUFBUSxFQUFFOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQXVCVDtnQkFDRCxTQUFTLEVBQUU7b0JBQ1Q7d0JBQ0UsT0FBTyxFQUFFLGlCQUFpQjt3QkFDMUIsV0FBVyxFQUFFLFdBQVc7d0JBQ3hCLEtBQUssRUFBRSxJQUFJO3FCQUNaO2lCQUNGO2FBQ0Y7OztzQkFRRSxLQUFLO21CQUVMLEtBQUs7dUJBRUwsS0FBSzs2QkFFTCxLQUFLO3VCQWFMLEtBQUs7b0JBSUwsS0FBSzt1QkFJTCxLQUFLO2lCQUlMLEtBQUs7cUJBS0wsTUFBTTttQkFJTixXQUFXLFNBQUMsV0FBVzt3QkFFdkIsV0FBVyxTQUFDLDRCQUE0Qjs7Ozs7OztJQTVDekMsNkJBQTRCOztJQUU1Qiw4QkFBeUI7O0lBRXpCLDJCQUFtQjs7SUFFbkIsK0JBQTBCOzs7OztJQWUxQiwrQkFBMEI7Ozs7O0lBSTFCLDRCQUFvQjs7Ozs7SUFJcEIsK0JBQTBCOzs7OztJQUkxQix5QkFBK0Q7Ozs7O0lBSy9ELDZCQUF5RDs7Ozs7SUFJekQsMkJBQXlDOztJQUV6QyxnQ0FBNEQ7Ozs7O0lBRzVELGtDQUEyQjs7Ozs7SUFLM0IsK0NBQTZEIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ29tcG9uZW50LFxuICBJbnB1dCxcbiAgSG9zdEJpbmRpbmcsXG4gIE91dHB1dCxcbiAgRXZlbnRFbWl0dGVyXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgTkdfVkFMVUVfQUNDRVNTT1IgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQgeyBCdXR0b25SYWRpb0NoYW5nZSB9IGZyb20gJy4vYnV0dG9uLXJhZGlvLWNoYW5nZS5jbGFzcyc7XG5cblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnc3VrYS1idXR0b24tcmFkaW8nLFxuICB0ZW1wbGF0ZTogYFxuICAgIDxpbnB1dFxuICAgICAgKm5nSWY9XCIhc2tlbGV0b25cIlxuICAgICAgY2xhc3M9XCJidXR0b24tcmFkaW9cIlxuICAgICAgdHlwZT1cInJhZGlvXCJcbiAgICAgIFtjaGVja2VkXT1cImNoZWNrZWRcIlxuICAgICAgW2Rpc2FibGVkXT1cImRpc2FibGVkXCJcbiAgICAgIFtuYW1lXT1cIm5hbWVcIlxuICAgICAgW2lkXT1cImlkXCJcbiAgICAgIFtyZXF1aXJlZF09XCJyZXF1aXJlZFwiXG4gICAgICBbdmFsdWVdPVwidmFsdWVcIlxuICAgICAgW2F0dHIuYXJpYS1sYWJlbGxlZGJ5XT1cImFyaWFMYWJlbGxlZGJ5XCJcbiAgICAgIChjaGFuZ2UpPVwib25DaGFuZ2UoJGV2ZW50KVwiPlxuICAgIDxkaXYgKm5nSWY9XCJza2VsZXRvblwiIGNsYXNzPVwiYnV0dG9uLXJhZGlvIHNrZWxldG9uXCI+PC9kaXY+XG4gICAgPGxhYmVsXG4gICAgICBjbGFzcz1cImJ1dHRvbi1yYWRpb19fbGFiZWxcIlxuICAgICAgW25nQ2xhc3NdPVwie1xuICAgICAgICAnc2tlbGV0b24nOiBza2VsZXRvblxuICAgICAgfVwiXG4gICAgICBbZm9yXT1cImlkXCJcbiAgICAgIGlkPVwibGFiZWwte3tpZH19XCI+XG4gICAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG4gICAgPC9sYWJlbD5cbiAgYCxcbiAgcHJvdmlkZXJzOiBbXG4gICAge1xuICAgICAgcHJvdmlkZTogTkdfVkFMVUVfQUNDRVNTT1IsXG4gICAgICB1c2VFeGlzdGluZzogQnV0dG9uUmFkaW8sXG4gICAgICBtdWx0aTogdHJ1ZVxuICAgIH1cbiAgXVxufSlcbi8vIHRzbGludDpkaXNhYmxlLW5leHQtbGluZTogY29tcG9uZW50LWNsYXNzLXN1ZmZpeFxuZXhwb3J0IGNsYXNzIEJ1dHRvblJhZGlvIHtcbiAgLyoqXG4gICAqIFVzZWQgdG8gZHluYW1pY2FsbHkgY3JlYXRlIHVuaXF1ZSBpZHMgZm9yIHRoZSBgQnV0dG9uUmFkaW9gLlxuICAgKi9cbiAgc3RhdGljIGJ1dHRvblJhZGlvQ291bnQgPSAwO1xuXG4gIEBJbnB1dCgpIGNoZWNrZWQgPSBmYWxzZTtcblxuICBASW5wdXQoKSBuYW1lID0gJyc7XG5cbiAgQElucHV0KCkgZGlzYWJsZWQgPSBmYWxzZTtcblxuICBASW5wdXQoKSBzZXQgYXJpYUxhYmVsbGVkYnkodmFsdWU6IHN0cmluZykge1xuICAgIHRoaXMuX2xhYmVsbGVkYnkgPSB2YWx1ZTtcbiAgfVxuXG4gIGdldCBhcmlhTGFiZWxsZWRieSgpIHtcbiAgICBpZiAodGhpcy5fbGFiZWxsZWRieSkge1xuICAgICAgcmV0dXJuIHRoaXMuX2xhYmVsbGVkYnk7XG4gICAgfVxuICAgIHJldHVybiBgbGFiZWwtJHt0aGlzLmlkfWA7XG4gIH1cbiAgLyoqXG4gICAqIFNldHMgdGhlIEhUTUwgcmVxdWlyZWQgYXR0cmlidXRlXG4gICAqL1xuICBASW5wdXQoKSByZXF1aXJlZCA9IGZhbHNlO1xuICAvKipcbiAgICogVGhlIHZhbHVlIG9mIHRoZSBgUmFkaW9gLlxuICAgKi9cbiAgQElucHV0KCkgdmFsdWUgPSAnJztcbiAgLyoqXG4gICAqIFNldCB0byBgdHJ1ZWAgZm9yIGEgbG9hZGluZyB0YWJsZS5cbiAgICovXG4gIEBJbnB1dCgpIHNrZWxldG9uID0gZmFsc2U7XG4gIC8qKlxuICAgKiBUaGUgaWQgZm9yIHRoZSBgUmFkaW9gLlxuICAgKi9cbiAgQElucHV0KCkgaWQgPSBgYnV0dG9uLXJhZGlvLSR7QnV0dG9uUmFkaW8uYnV0dG9uUmFkaW9Db3VudCsrfWA7XG4gIC8qKlxuICAgKiBlbWl0cyB3aGVuIHRoZSBzdGF0ZSBvZiB0aGUgcmFkaW8gY2hhbmdlc1xuICAgKi9cbiAgLy8gdHNsaW50OmRpc2FibGUtbmV4dC1saW5lOiBuby1vdXRwdXQtbmF0aXZlXG4gIEBPdXRwdXQoKSBjaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPEJ1dHRvblJhZGlvQ2hhbmdlPigpO1xuICAvKipcbiAgICogQmluZHMgJ3JhZGlvJyB2YWx1ZSB0byB0aGUgcm9sZSBhdHRyaWJ1dGUgZm9yIGBSYWRpb2AuXG4gICAqL1xuICBASG9zdEJpbmRpbmcoJ2F0dHIucm9sZScpIHJvbGUgPSAncmFkaW8nO1xuXG4gIEBIb3N0QmluZGluZygnY2xhc3MuYnV0dG9uLXJhZGlvLXdyYXBwZXInKSBob3N0Q2xhc3MgPSB0cnVlO1xuXG4gIC8vIHRzbGludDpkaXNhYmxlLW5leHQtbGluZTogdmFyaWFibGUtbmFtZVxuICBwcm90ZWN0ZWQgX2xhYmVsbGVkYnkgPSAnJztcblxuICAvKipcbiAgICogSGFuZGxlciBwcm92aWRlZCBieSB0aGUgYEJ1dHRvblJhZGlvR3JvdXBgIHRvIGJ1YmJsZSBldmVudHMgdXBcbiAgICovXG4gIGJ1dHRvblJhZGlvQ2hhbmdlSGFuZGxlciA9IChldmVudDogQnV0dG9uUmFkaW9DaGFuZ2UpID0+IHsgfTtcblxuICAvKipcbiAgICogU3luY2hyb25pemVzIHdpdGggdGhlIGBCdXR0b25SYWRpb0dyb3VwYCBpbiB0aGUgZXZlbnQgb2YgYSBjaGFuZ2VkIGBCdXR0b25SYWRpb2AuXG4gICAqIEVtaXRzIHRoZSBjaGFuZ2VzIG9mIGJvdGggdGhlIGBCdXR0b25SYWRpb0dyb3VwYCBhbmQgYEJ1dHRvblJhZGlvYC5cbiAgICovXG4gIG9uQ2hhbmdlKGV2ZW50OiBFdmVudCkge1xuICAgIGV2ZW50LnN0b3BQcm9wYWdhdGlvbigpO1xuICAgIHRoaXMuY2hlY2tlZCA9IChldmVudC50YXJnZXQgYXMgSFRNTElucHV0RWxlbWVudCkuY2hlY2tlZDtcbiAgICBjb25zdCBCdXR0b25SYWRpb0V2ZW50ID0gbmV3IEJ1dHRvblJhZGlvQ2hhbmdlKHRoaXMsIHRoaXMudmFsdWUpO1xuICAgIHRoaXMuY2hhbmdlLmVtaXQoQnV0dG9uUmFkaW9FdmVudCk7XG4gICAgdGhpcy5idXR0b25SYWRpb0NoYW5nZUhhbmRsZXIoQnV0dG9uUmFkaW9FdmVudCk7XG4gIH1cblxuICAvKipcbiAgICogTWV0aG9kIGNhbGxlZCBieSBgQnV0dG9uUmFkaW9Hcm91cGAgd2l0aCBhIGNhbGxiYWNrIGZ1bmN0aW9uIHRvIGJ1YmJsZSBgQnV0dG9uUmFkaW9DaGFuZ2VgIGV2ZW50c1xuICAgKiBAcGFyYW0gZm4gY2FsbGJhY2sgdGhhdCBleHBlY3RzIGEgYEJ1dHRvblJhZGlvQ2hhbmdlYCBhcyBhbiBhcmd1bWVudFxuICAgKi9cbiAgcmVnaXN0ZXJCdXR0b25SYWRpb0NoYW5nZUhhbmRsZXIoZm46IChldmVudDogQnV0dG9uUmFkaW9DaGFuZ2UpID0+IHZvaWQpIHtcbiAgICB0aGlzLmJ1dHRvblJhZGlvQ2hhbmdlSGFuZGxlciA9IGZuO1xuICB9XG59XG4iXX0=