@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>
217 lines • 14.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';
var ButtonRadio = /** @class */ (function () {
function ButtonRadio() {
/**
* 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 {?}
*/
function (event) { });
}
Object.defineProperty(ButtonRadio.prototype, "ariaLabelledby", {
get: /**
* @return {?}
*/
function () {
if (this._labelledby) {
return this._labelledby;
}
return "label-" + this.id;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._labelledby = value;
},
enumerable: true,
configurable: true
});
/**
* Synchronizes with the `ButtonRadioGroup` in the event of a changed `ButtonRadio`.
* Emits the changes of both the `ButtonRadioGroup` and `ButtonRadio`.
*/
/**
* Synchronizes with the `ButtonRadioGroup` in the event of a changed `ButtonRadio`.
* Emits the changes of both the `ButtonRadioGroup` and `ButtonRadio`.
* @param {?} event
* @return {?}
*/
ButtonRadio.prototype.onChange = /**
* Synchronizes with the `ButtonRadioGroup` in the event of a changed `ButtonRadio`.
* Emits the changes of both the `ButtonRadioGroup` and `ButtonRadio`.
* @param {?} event
* @return {?}
*/
function (event) {
event.stopPropagation();
this.checked = ((/** @type {?} */ (event.target))).checked;
/** @type {?} */
var 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
*/
/**
* Method called by `ButtonRadioGroup` with a callback function to bubble `ButtonRadioChange` events
* @param {?} fn callback that expects a `ButtonRadioChange` as an argument
* @return {?}
*/
ButtonRadio.prototype.registerButtonRadioChangeHandler = /**
* Method called by `ButtonRadioGroup` with a callback function to bubble `ButtonRadioChange` events
* @param {?} fn callback that expects a `ButtonRadioChange` as an argument
* @return {?}
*/
function (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: "\n <input\n *ngIf=\"!skeleton\"\n class=\"button-radio\"\n type=\"radio\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n [name]=\"name\"\n [id]=\"id\"\n [required]=\"required\"\n [value]=\"value\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n (change)=\"onChange($event)\">\n <div *ngIf=\"skeleton\" class=\"button-radio skeleton\"></div>\n <label\n class=\"button-radio__label\"\n [ngClass]=\"{\n 'skeleton': skeleton\n }\"\n [for]=\"id\"\n id=\"label-{{id}}\">\n <ng-content></ng-content>\n </label>\n ",
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',] }]
};
return ButtonRadio;
}());
export { ButtonRadio };
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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLXJhZGlvLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0BrdXNoa2kvbmctc3VrYS8iLCJzb3VyY2VzIjpbImxpYi9idXR0b24tcmFkaW8vYnV0dG9uLXJhZGlvLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7O0FBQUEsT0FBTyxFQUNMLFNBQVMsRUFDVCxLQUFLLEVBQ0wsV0FBVyxFQUNYLE1BQU0sRUFDTixZQUFZLEVBQ2IsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDbkQsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFHaEU7SUFBQTs7OztRQTRDVyxZQUFPLEdBQUcsS0FBSyxDQUFDOzs7O1FBS2hCLFNBQUksR0FBRyxFQUFFLENBQUM7Ozs7UUFLVixhQUFRLEdBQUcsS0FBSyxDQUFDOzs7O1FBZ0JqQixhQUFRLEdBQUcsS0FBSyxDQUFDOzs7O1FBSWpCLFVBQUssR0FBRyxFQUFFLENBQUM7Ozs7UUFLWCxhQUFRLEdBQUcsS0FBSyxDQUFDOzs7O1FBS2pCLE9BQUUsR0FBRyxrQkFBZ0IsV0FBVyxDQUFDLGdCQUFnQixFQUFJLENBQUM7Ozs7O1FBTXJELFdBQU0sR0FBRyxJQUFJLFlBQVksRUFBcUIsQ0FBQzs7OztRQUkvQixTQUFJLEdBQUcsT0FBTyxDQUFDO1FBRUUsY0FBUyxHQUFHLElBQUksQ0FBQzs7UUFHbEQsZ0JBQVcsR0FBRyxFQUFFLENBQUM7Ozs7UUFLM0IsNkJBQXdCOzs7O1FBQUcsVUFBQyxLQUF3QixJQUFPLENBQUMsRUFBQztJQXFCL0QsQ0FBQztJQXJFQyxzQkFBYSx1Q0FBYzs7OztRQUkzQjtZQUNFLElBQUksSUFBSSxDQUFDLFdBQVcsRUFBRTtnQkFDcEIsT0FBTyxJQUFJLENBQUMsV0FBVyxDQUFDO2FBQ3pCO1lBQ0QsT0FBTyxXQUFTLElBQUksQ0FBQyxFQUFJLENBQUM7UUFDNUIsQ0FBQzs7Ozs7UUFURCxVQUE0QixLQUFhO1lBQ3ZDLElBQUksQ0FBQyxXQUFXLEdBQUcsS0FBSyxDQUFDO1FBQzNCLENBQUM7OztPQUFBO0lBZ0REOzs7T0FHRzs7Ozs7OztJQUNILDhCQUFROzs7Ozs7SUFBUixVQUFTLEtBQVk7UUFDbkIsS0FBSyxDQUFDLGVBQWUsRUFBRSxDQUFDO1FBQ3hCLElBQUksQ0FBQyxPQUFPLEdBQUcsQ0FBQyxtQkFBQSxLQUFLLENBQUMsTUFBTSxFQUFvQixDQUFDLENBQUMsT0FBTyxDQUFDOztZQUNwRCxnQkFBZ0IsR0FBRyxJQUFJLGlCQUFpQixDQUFDLElBQUksRUFBRSxJQUFJLENBQUMsS0FBSyxDQUFDO1FBQ2hFLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLGdCQUFnQixDQUFDLENBQUM7UUFDbkMsSUFBSSxDQUFDLHdCQUF3QixDQUFDLGdCQUFnQixDQUFDLENBQUM7SUFDbEQsQ0FBQztJQUVEOzs7T0FHRzs7Ozs7O0lBQ0gsc0RBQWdDOzs7OztJQUFoQyxVQUFpQyxFQUFzQztRQUNyRSxJQUFJLENBQUMsd0JBQXdCLEdBQUcsRUFBRSxDQUFDO0lBQ3JDLENBQUM7Ozs7SUFyRk0sNEJBQWdCLEdBQUcsQ0FBQyxDQUFDOztnQkF2QzdCLFNBQVMsU0FBQztvQkFDVCxRQUFRLEVBQUUsbUJBQW1CO29CQUM3QixRQUFRLEVBQUUsd21CQXVCVDtvQkFDRCxTQUFTLEVBQUU7d0JBQ1Q7NEJBQ0UsT0FBTyxFQUFFLGlCQUFpQjs0QkFDMUIsV0FBVyxFQUFFLFdBQVc7NEJBQ3hCLEtBQUssRUFBRSxJQUFJO3lCQUNaO3FCQUNGO2lCQUNGOzs7MEJBV0UsS0FBSzt1QkFLTCxLQUFLOzJCQUtMLEtBQUs7aUNBRUwsS0FBSzsyQkFjTCxLQUFLO3dCQUlMLEtBQUs7MkJBS0wsS0FBSztxQkFLTCxLQUFLO3lCQU1MLE1BQU07dUJBSU4sV0FBVyxTQUFDLFdBQVc7NEJBRXZCLFdBQVcsU0FBQyw0QkFBNEI7O0lBNkIzQyxrQkFBQztDQUFBLEFBN0hELElBNkhDO1NBMUZZLFdBQVc7Ozs7OztJQUl0Qiw2QkFBNEI7Ozs7O0lBSzVCLDhCQUF5Qjs7Ozs7SUFLekIsMkJBQW1COzs7OztJQUtuQiwrQkFBMEI7Ozs7O0lBZ0IxQiwrQkFBMEI7Ozs7O0lBSTFCLDRCQUFvQjs7Ozs7SUFLcEIsK0JBQTBCOzs7OztJQUsxQix5QkFBK0Q7Ozs7O0lBTS9ELDZCQUF5RDs7Ozs7SUFJekQsMkJBQXlDOztJQUV6QyxnQ0FBNEQ7Ozs7O0lBRzVELGtDQUEyQjs7Ozs7SUFLM0IsK0NBQTZEIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ29tcG9uZW50LFxuICBJbnB1dCxcbiAgSG9zdEJpbmRpbmcsXG4gIE91dHB1dCxcbiAgRXZlbnRFbWl0dGVyXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgTkdfVkFMVUVfQUNDRVNTT1IgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQgeyBCdXR0b25SYWRpb0NoYW5nZSB9IGZyb20gJy4vYnV0dG9uLXJhZGlvLWNoYW5nZS5jbGFzcyc7XG5cblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnc3VrYS1idXR0b24tcmFkaW8nLFxuICB0ZW1wbGF0ZTogYFxuICAgIDxpbnB1dFxuICAgICAgKm5nSWY9XCIhc2tlbGV0b25cIlxuICAgICAgY2xhc3M9XCJidXR0b24tcmFkaW9cIlxuICAgICAgdHlwZT1cInJhZGlvXCJcbiAgICAgIFtjaGVja2VkXT1cImNoZWNrZWRcIlxuICAgICAgW2Rpc2FibGVkXT1cImRpc2FibGVkXCJcbiAgICAgIFtuYW1lXT1cIm5hbWVcIlxuICAgICAgW2lkXT1cImlkXCJcbiAgICAgIFtyZXF1aXJlZF09XCJyZXF1aXJlZFwiXG4gICAgICBbdmFsdWVdPVwidmFsdWVcIlxuICAgICAgW2F0dHIuYXJpYS1sYWJlbGxlZGJ5XT1cImFyaWFMYWJlbGxlZGJ5XCJcbiAgICAgIChjaGFuZ2UpPVwib25DaGFuZ2UoJGV2ZW50KVwiPlxuICAgIDxkaXYgKm5nSWY9XCJza2VsZXRvblwiIGNsYXNzPVwiYnV0dG9uLXJhZGlvIHNrZWxldG9uXCI+PC9kaXY+XG4gICAgPGxhYmVsXG4gICAgICBjbGFzcz1cImJ1dHRvbi1yYWRpb19fbGFiZWxcIlxuICAgICAgW25nQ2xhc3NdPVwie1xuICAgICAgICAnc2tlbGV0b24nOiBza2VsZXRvblxuICAgICAgfVwiXG4gICAgICBbZm9yXT1cImlkXCJcbiAgICAgIGlkPVwibGFiZWwte3tpZH19XCI+XG4gICAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG4gICAgPC9sYWJlbD5cbiAgYCxcbiAgcHJvdmlkZXJzOiBbXG4gICAge1xuICAgICAgcHJvdmlkZTogTkdfVkFMVUVfQUNDRVNTT1IsXG4gICAgICB1c2VFeGlzdGluZzogQnV0dG9uUmFkaW8sXG4gICAgICBtdWx0aTogdHJ1ZVxuICAgIH1cbiAgXVxufSlcbi8vIHRzbGludDpkaXNhYmxlLW5leHQtbGluZTogY29tcG9uZW50LWNsYXNzLXN1ZmZpeFxuZXhwb3J0IGNsYXNzIEJ1dHRvblJhZGlvIHtcbiAgLyoqXG4gICAqIFVzZWQgdG8gZHluYW1pY2FsbHkgY3JlYXRlIHVuaXF1ZSBpZHMgZm9yIHRoZSBgQnV0dG9uUmFkaW9gLlxuICAgKi9cbiAgc3RhdGljIGJ1dHRvblJhZGlvQ291bnQgPSAwO1xuXG4gIC8qKlxuICAgKiBTZXRzIHRoZSBjaGVja2VkIHN0YXR1c1xuICAgKi9cbiAgQElucHV0KCkgY2hlY2tlZCA9IGZhbHNlO1xuXG4gIC8qKlxuICAgKiBTZXRzIHRoZSBuYW1lIG9mIHRoZSBgQnV0dG9uUmFkaW9gXG4gICAqL1xuICBASW5wdXQoKSBuYW1lID0gJyc7XG5cbiAgLyoqXG4gICAqIFNldCB0byBgdHJ1ZWAgdG8gZGlzYWJsZSBpdC5cbiAgICovXG4gIEBJbnB1dCgpIGRpc2FibGVkID0gZmFsc2U7XG5cbiAgQElucHV0KCkgc2V0IGFyaWFMYWJlbGxlZGJ5KHZhbHVlOiBzdHJpbmcpIHtcbiAgICB0aGlzLl9sYWJlbGxlZGJ5ID0gdmFsdWU7XG4gIH1cblxuICBnZXQgYXJpYUxhYmVsbGVkYnkoKSB7XG4gICAgaWYgKHRoaXMuX2xhYmVsbGVkYnkpIHtcbiAgICAgIHJldHVybiB0aGlzLl9sYWJlbGxlZGJ5O1xuICAgIH1cbiAgICByZXR1cm4gYGxhYmVsLSR7dGhpcy5pZH1gO1xuICB9XG5cbiAgLyoqXG4gICAqIFNldHMgdGhlIEhUTUwgcmVxdWlyZWQgYXR0cmlidXRlXG4gICAqL1xuICBASW5wdXQoKSByZXF1aXJlZCA9IGZhbHNlO1xuICAvKipcbiAgICogVGhlIHZhbHVlIG9mIHRoZSBgQnV0dG9uUmFkaW9gLlxuICAgKi9cbiAgQElucHV0KCkgdmFsdWUgPSAnJztcblxuICAvKipcbiAgICogU2V0IHRvIGB0cnVlYCBmb3IgYSBsb2FkaW5nIHN0YXRlLlxuICAgKi9cbiAgQElucHV0KCkgc2tlbGV0b24gPSBmYWxzZTtcblxuICAvKipcbiAgICogVGhlIGlkIGZvciB0aGUgYEJ1dHRvblJhZGlvYC5cbiAgICovXG4gIEBJbnB1dCgpIGlkID0gYGJ1dHRvbi1yYWRpby0ke0J1dHRvblJhZGlvLmJ1dHRvblJhZGlvQ291bnQrK31gO1xuXG4gIC8qKlxuICAgKiBlbWl0cyB3aGVuIHRoZSBzdGF0ZSBvZiB0aGUgYnV0dG9uIHJhZGlvIGNoYW5nZXNcbiAgICovXG4gIC8vIHRzbGludDpkaXNhYmxlLW5leHQtbGluZTogbm8tb3V0cHV0LW5hdGl2ZVxuICBAT3V0cHV0KCkgY2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcjxCdXR0b25SYWRpb0NoYW5nZT4oKTtcbiAgLyoqXG4gICAqIEJpbmRzICdyYWRpbycgdmFsdWUgdG8gdGhlIHJvbGUgYXR0cmlidXRlIGZvciBgQnV0dG9uUmFkaW9gLlxuICAgKi9cbiAgQEhvc3RCaW5kaW5nKCdhdHRyLnJvbGUnKSByb2xlID0gJ3JhZGlvJztcblxuICBASG9zdEJpbmRpbmcoJ2NsYXNzLmJ1dHRvbi1yYWRpby13cmFwcGVyJykgaG9zdENsYXNzID0gdHJ1ZTtcblxuICAvLyB0c2xpbnQ6ZGlzYWJsZS1uZXh0LWxpbmU6IHZhcmlhYmxlLW5hbWVcbiAgcHJvdGVjdGVkIF9sYWJlbGxlZGJ5ID0gJyc7XG5cbiAgLyoqXG4gICAqIEhhbmRsZXIgcHJvdmlkZWQgYnkgdGhlIGBCdXR0b25SYWRpb0dyb3VwYCB0byBidWJibGUgZXZlbnRzIHVwXG4gICAqL1xuICBidXR0b25SYWRpb0NoYW5nZUhhbmRsZXIgPSAoZXZlbnQ6IEJ1dHRvblJhZGlvQ2hhbmdlKSA9PiB7IH07XG5cbiAgLyoqXG4gICAqIFN5bmNocm9uaXplcyB3aXRoIHRoZSBgQnV0dG9uUmFkaW9Hcm91cGAgaW4gdGhlIGV2ZW50IG9mIGEgY2hhbmdlZCBgQnV0dG9uUmFkaW9gLlxuICAgKiBFbWl0cyB0aGUgY2hhbmdlcyBvZiBib3RoIHRoZSBgQnV0dG9uUmFkaW9Hcm91cGAgYW5kIGBCdXR0b25SYWRpb2AuXG4gICAqL1xuICBvbkNoYW5nZShldmVudDogRXZlbnQpIHtcbiAgICBldmVudC5zdG9wUHJvcGFnYXRpb24oKTtcbiAgICB0aGlzLmNoZWNrZWQgPSAoZXZlbnQudGFyZ2V0IGFzIEhUTUxJbnB1dEVsZW1lbnQpLmNoZWNrZWQ7XG4gICAgY29uc3QgQnV0dG9uUmFkaW9FdmVudCA9IG5ldyBCdXR0b25SYWRpb0NoYW5nZSh0aGlzLCB0aGlzLnZhbHVlKTtcbiAgICB0aGlzLmNoYW5nZS5lbWl0KEJ1dHRvblJhZGlvRXZlbnQpO1xuICAgIHRoaXMuYnV0dG9uUmFkaW9DaGFuZ2VIYW5kbGVyKEJ1dHRvblJhZGlvRXZlbnQpO1xuICB9XG5cbiAgLyoqXG4gICAqIE1ldGhvZCBjYWxsZWQgYnkgYEJ1dHRvblJhZGlvR3JvdXBgIHdpdGggYSBjYWxsYmFjayBmdW5jdGlvbiB0byBidWJibGUgYEJ1dHRvblJhZGlvQ2hhbmdlYCBldmVudHNcbiAgICogQHBhcmFtIGZuIGNhbGxiYWNrIHRoYXQgZXhwZWN0cyBhIGBCdXR0b25SYWRpb0NoYW5nZWAgYXMgYW4gYXJndW1lbnRcbiAgICovXG4gIHJlZ2lzdGVyQnV0dG9uUmFkaW9DaGFuZ2VIYW5kbGVyKGZuOiAoZXZlbnQ6IEJ1dHRvblJhZGlvQ2hhbmdlKSA9PiB2b2lkKSB7XG4gICAgdGhpcy5idXR0b25SYWRpb0NoYW5nZUhhbmRsZXIgPSBmbjtcbiAgfVxufVxuIl19