@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>
214 lines • 14.4 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';
var Radio = /** @class */ (function () {
function Radio() {
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 {?}
*/
function (event) { });
}
Object.defineProperty(Radio.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
});
Object.defineProperty(Radio.prototype, "labelLeft", {
get: /**
* @return {?}
*/
function () {
return this.labelPlacement === 'left';
},
enumerable: true,
configurable: true
});
/**
* Synchronizes with the `RadioGroup` in the event of a changed `Radio`.
* Emits the changes of both the `RadioGroup` and `Radio`.
*/
/**
* Synchronizes with the `RadioGroup` in the event of a changed `Radio`.
* Emits the changes of both the `RadioGroup` and `Radio`.
* @param {?} event
* @return {?}
*/
Radio.prototype.onChange = /**
* Synchronizes with the `RadioGroup` in the event of a changed `Radio`.
* Emits the changes of both the `RadioGroup` and `Radio`.
* @param {?} event
* @return {?}
*/
function (event) {
event.stopPropagation();
this.checked = ((/** @type {?} */ (event.target))).checked;
/** @type {?} */
var 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
*/
/**
* Method called by `RadioGroup` with a callback function to bubble `RadioChange` events
* @param {?} fn callback that expects a `RadioChange` as an argument
* @return {?}
*/
Radio.prototype.registerRadioChangeHandler = /**
* Method called by `RadioGroup` with a callback function to bubble `RadioChange` events
* @param {?} fn callback that expects a `RadioChange` as an argument
* @return {?}
*/
function (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: "\n <input\n *ngIf=\"!skeleton\"\n class=\"radio-button\"\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=\"radio-button skeleton\"></div>\n <label\n class=\"radio-button__label\"\n [ngClass]=\"{\n 'skeleton': skeleton\n }\"\n [for]=\"id\"\n id=\"label-{{id}}\">\n <span class=\"radio-button__appearance\"></span>\n <ng-content></ng-content>\n </label>\n ",
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',] }]
};
return Radio;
}());
export { Radio };
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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmFkaW8uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vQGt1c2hraS9uZy1zdWthLyIsInNvdXJjZXMiOlsibGliL3JhZGlvL3JhZGlvLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7O0FBQUEsT0FBTyxFQUNMLFNBQVMsRUFDVCxLQUFLLEVBQ0wsV0FBVyxFQUNYLE1BQU0sRUFDTixZQUFZLEVBQ2IsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDbkQsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLHNCQUFzQixDQUFDO0FBR25EO0lBQUE7UUEwQ1csWUFBTyxHQUFHLEtBQUssQ0FBQztRQUVoQixTQUFJLEdBQUcsRUFBRSxDQUFDO1FBRVYsYUFBUSxHQUFHLEtBQUssQ0FBQztRQUVqQixtQkFBYyxHQUFxQixPQUFPLENBQUM7Ozs7UUFlM0MsYUFBUSxHQUFHLEtBQUssQ0FBQzs7OztRQUlqQixVQUFLLEdBQUcsRUFBRSxDQUFDOzs7O1FBSVgsYUFBUSxHQUFHLEtBQUssQ0FBQzs7OztRQUlqQixPQUFFLEdBQUcsV0FBUyxLQUFLLENBQUMsVUFBVSxFQUFJLENBQUM7Ozs7O1FBS2xDLFdBQU0sR0FBRyxJQUFJLFlBQVksRUFBZSxDQUFDOzs7O1FBSXpCLFNBQUksR0FBRyxPQUFPLENBQUM7UUFFRSxjQUFTLEdBQUcsSUFBSSxDQUFDOztRQU9sRCxnQkFBVyxHQUFHLEVBQUUsQ0FBQzs7OztRQUszQix1QkFBa0I7Ozs7UUFBRyxVQUFDLEtBQWtCLElBQU8sQ0FBQyxFQUFDO0lBcUJuRCxDQUFDO0lBckVDLHNCQUFhLGlDQUFjOzs7O1FBSTNCO1lBQ0UsSUFBSSxJQUFJLENBQUMsV0FBVyxFQUFFO2dCQUNwQixPQUFPLElBQUksQ0FBQyxXQUFXLENBQUM7YUFDekI7WUFDRCxPQUFPLFdBQVMsSUFBSSxDQUFDLEVBQUksQ0FBQztRQUM1QixDQUFDOzs7OztRQVRELFVBQTRCLEtBQWE7WUFDdkMsSUFBSSxDQUFDLFdBQVcsR0FBRyxLQUFLLENBQUM7UUFDM0IsQ0FBQzs7O09BQUE7SUFvQ0Qsc0JBQTJELDRCQUFTOzs7O1FBQXBFO1lBQ0UsT0FBTyxJQUFJLENBQUMsY0FBYyxLQUFLLE1BQU0sQ0FBQztRQUN4QyxDQUFDOzs7T0FBQTtJQVVEOzs7T0FHRzs7Ozs7OztJQUNILHdCQUFROzs7Ozs7SUFBUixVQUFTLEtBQVk7UUFDbkIsS0FBSyxDQUFDLGVBQWUsRUFBRSxDQUFDO1FBQ3hCLElBQUksQ0FBQyxPQUFPLEdBQUcsQ0FBQyxtQkFBQSxLQUFLLENBQUMsTUFBTSxFQUFvQixDQUFDLENBQUMsT0FBTyxDQUFDOztZQUNwRCxVQUFVLEdBQUcsSUFBSSxXQUFXLENBQUMsSUFBSSxFQUFFLElBQUksQ0FBQyxLQUFLLENBQUM7UUFDcEQsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLENBQUM7UUFDN0IsSUFBSSxDQUFDLGtCQUFrQixDQUFDLFVBQVUsQ0FBQyxDQUFDO0lBQ3RDLENBQUM7SUFFRDs7O09BR0c7Ozs7OztJQUNILDBDQUEwQjs7Ozs7SUFBMUIsVUFBMkIsRUFBZ0M7UUFDekQsSUFBSSxDQUFDLGtCQUFrQixHQUFHLEVBQUUsQ0FBQztJQUMvQixDQUFDOzs7O0lBOUVNLGdCQUFVLEdBQUcsQ0FBQyxDQUFDOztnQkF4Q3ZCLFNBQVMsU0FBQztvQkFDVCxRQUFRLEVBQUUsWUFBWTtvQkFDdEIsUUFBUSxFQUFFLGdxQkF3QlQ7b0JBQ0QsU0FBUyxFQUFFO3dCQUNUOzRCQUNFLE9BQU8sRUFBRSxpQkFBaUI7NEJBQzFCLFdBQVcsRUFBRSxLQUFLOzRCQUNsQixLQUFLLEVBQUUsSUFBSTt5QkFDWjtxQkFDRjtpQkFDRjs7OzBCQVFFLEtBQUs7dUJBRUwsS0FBSzsyQkFFTCxLQUFLO2lDQUVMLEtBQUs7aUNBRUwsS0FBSzsyQkFhTCxLQUFLO3dCQUlMLEtBQUs7MkJBSUwsS0FBSztxQkFJTCxLQUFLO3lCQUtMLE1BQU07dUJBSU4sV0FBVyxTQUFDLFdBQVc7NEJBRXZCLFdBQVcsU0FBQyw0QkFBNEI7NEJBRXhDLFdBQVcsU0FBQyx3Q0FBd0M7O0lBK0J2RCxZQUFDO0NBQUEsQUF2SEQsSUF1SEM7U0FuRlksS0FBSzs7Ozs7O0lBSWhCLGlCQUFzQjs7SUFFdEIsd0JBQXlCOztJQUV6QixxQkFBbUI7O0lBRW5CLHlCQUEwQjs7SUFFMUIsK0JBQW9EOzs7OztJQWVwRCx5QkFBMEI7Ozs7O0lBSTFCLHNCQUFvQjs7Ozs7SUFJcEIseUJBQTBCOzs7OztJQUkxQixtQkFBNEM7Ozs7O0lBSzVDLHVCQUFtRDs7Ozs7SUFJbkQscUJBQXlDOztJQUV6QywwQkFBNEQ7Ozs7O0lBTzVELDRCQUEyQjs7Ozs7SUFLM0IsbUNBQWlEIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ29tcG9uZW50LFxuICBJbnB1dCxcbiAgSG9zdEJpbmRpbmcsXG4gIE91dHB1dCxcbiAgRXZlbnRFbWl0dGVyXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgTkdfVkFMVUVfQUNDRVNTT1IgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQgeyBSYWRpb0NoYW5nZSB9IGZyb20gJy4vcmFkaW8tY2hhbmdlLmNsYXNzJztcblxuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdzdWthLXJhZGlvJyxcbiAgdGVtcGxhdGU6IGBcbiAgICA8aW5wdXRcbiAgICAgICpuZ0lmPVwiIXNrZWxldG9uXCJcbiAgICAgIGNsYXNzPVwicmFkaW8tYnV0dG9uXCJcbiAgICAgIHR5cGU9XCJyYWRpb1wiXG4gICAgICBbY2hlY2tlZF09XCJjaGVja2VkXCJcbiAgICAgIFtkaXNhYmxlZF09XCJkaXNhYmxlZFwiXG4gICAgICBbbmFtZV09XCJuYW1lXCJcbiAgICAgIFtpZF09XCJpZFwiXG4gICAgICBbcmVxdWlyZWRdPVwicmVxdWlyZWRcIlxuICAgICAgW3ZhbHVlXT1cInZhbHVlXCJcbiAgICAgIFthdHRyLmFyaWEtbGFiZWxsZWRieV09XCJhcmlhTGFiZWxsZWRieVwiXG4gICAgICAoY2hhbmdlKT1cIm9uQ2hhbmdlKCRldmVudClcIj5cbiAgICA8ZGl2ICpuZ0lmPVwic2tlbGV0b25cIiBjbGFzcz1cInJhZGlvLWJ1dHRvbiBza2VsZXRvblwiPjwvZGl2PlxuICAgIDxsYWJlbFxuICAgICAgY2xhc3M9XCJyYWRpby1idXR0b25fX2xhYmVsXCJcbiAgICAgIFtuZ0NsYXNzXT1cIntcbiAgICAgICAgJ3NrZWxldG9uJzogc2tlbGV0b25cbiAgICAgIH1cIlxuICAgICAgW2Zvcl09XCJpZFwiXG4gICAgICBpZD1cImxhYmVsLXt7aWR9fVwiPlxuICAgICAgPHNwYW4gY2xhc3M9XCJyYWRpby1idXR0b25fX2FwcGVhcmFuY2VcIj48L3NwYW4+XG4gICAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG4gICAgPC9sYWJlbD5cbiAgYCxcbiAgcHJvdmlkZXJzOiBbXG4gICAge1xuICAgICAgcHJvdmlkZTogTkdfVkFMVUVfQUNDRVNTT1IsXG4gICAgICB1c2VFeGlzdGluZzogUmFkaW8sXG4gICAgICBtdWx0aTogdHJ1ZVxuICAgIH1cbiAgXVxufSlcbi8vIHRzbGludDpkaXNhYmxlLW5leHQtbGluZTogY29tcG9uZW50LWNsYXNzLXN1ZmZpeFxuZXhwb3J0IGNsYXNzIFJhZGlvIHtcbiAgLyoqXG4gICAqIFVzZWQgdG8gZHluYW1pY2FsbHkgY3JlYXRlIHVuaXF1ZSBpZHMgZm9yIHRoZSBgUmFkaW9gLlxuICAgKi9cbiAgc3RhdGljIHJhZGlvQ291bnQgPSAwO1xuXG4gIEBJbnB1dCgpIGNoZWNrZWQgPSBmYWxzZTtcblxuICBASW5wdXQoKSBuYW1lID0gJyc7XG5cbiAgQElucHV0KCkgZGlzYWJsZWQgPSBmYWxzZTtcblxuICBASW5wdXQoKSBsYWJlbFBsYWNlbWVudDogJ3JpZ2h0JyB8ICdsZWZ0JyA9ICdyaWdodCc7XG5cbiAgQElucHV0KCkgc2V0IGFyaWFMYWJlbGxlZGJ5KHZhbHVlOiBzdHJpbmcpIHtcbiAgICB0aGlzLl9sYWJlbGxlZGJ5ID0gdmFsdWU7XG4gIH1cblxuICBnZXQgYXJpYUxhYmVsbGVkYnkoKSB7XG4gICAgaWYgKHRoaXMuX2xhYmVsbGVkYnkpIHtcbiAgICAgIHJldHVybiB0aGlzLl9sYWJlbGxlZGJ5O1xuICAgIH1cbiAgICByZXR1cm4gYGxhYmVsLSR7dGhpcy5pZH1gO1xuICB9XG4gIC8qKlxuICAgKiBTZXRzIHRoZSBIVE1MIHJlcXVpcmVkIGF0dHJpYnV0ZVxuICAgKi9cbiAgQElucHV0KCkgcmVxdWlyZWQgPSBmYWxzZTtcbiAgLyoqXG4gICAqIFRoZSB2YWx1ZSBvZiB0aGUgYFJhZGlvYC5cbiAgICovXG4gIEBJbnB1dCgpIHZhbHVlID0gJyc7XG4gIC8qKlxuICAgKiBTZXQgdG8gYHRydWVgIGZvciBhIGxvYWRpbmcgdGFibGUuXG4gICAqL1xuICBASW5wdXQoKSBza2VsZXRvbiA9IGZhbHNlO1xuICAvKipcbiAgICogVGhlIGlkIGZvciB0aGUgYFJhZGlvYC5cbiAgICovXG4gIEBJbnB1dCgpIGlkID0gYHJhZGlvLSR7UmFkaW8ucmFkaW9Db3VudCsrfWA7XG4gIC8qKlxuICAgKiBlbWl0cyB3aGVuIHRoZSBzdGF0ZSBvZiB0aGUgcmFkaW8gY2hhbmdlc1xuICAgKi9cbiAgLy8gdHNsaW50OmRpc2FibGUtbmV4dC1saW5lOiBuby1vdXRwdXQtbmF0aXZlXG4gIEBPdXRwdXQoKSBjaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPFJhZGlvQ2hhbmdlPigpO1xuICAvKipcbiAgICogQmluZHMgJ3JhZGlvJyB2YWx1ZSB0byB0aGUgcm9sZSBhdHRyaWJ1dGUgZm9yIGBSYWRpb2AuXG4gICAqL1xuICBASG9zdEJpbmRpbmcoJ2F0dHIucm9sZScpIHJvbGUgPSAncmFkaW8nO1xuXG4gIEBIb3N0QmluZGluZygnY2xhc3MucmFkaW8tYnV0dG9uLXdyYXBwZXInKSBob3N0Q2xhc3MgPSB0cnVlO1xuXG4gIEBIb3N0QmluZGluZygnY2xhc3MucmFkaW8tYnV0dG9uLXdyYXBwZXItLWxhYmVsLWxlZnQnKSBnZXQgbGFiZWxMZWZ0KCkge1xuICAgIHJldHVybiB0aGlzLmxhYmVsUGxhY2VtZW50ID09PSAnbGVmdCc7XG4gIH1cblxuICAvLyB0c2xpbnQ6ZGlzYWJsZS1uZXh0LWxpbmU6IHZhcmlhYmxlLW5hbWVcbiAgcHJvdGVjdGVkIF9sYWJlbGxlZGJ5ID0gJyc7XG5cbiAgLyoqXG4gICAqIEhhbmRsZXIgcHJvdmlkZWQgYnkgdGhlIGBSYWRpb0dyb3VwYCB0byBidWJibGUgZXZlbnRzIHVwXG4gICAqL1xuICByYWRpb0NoYW5nZUhhbmRsZXIgPSAoZXZlbnQ6IFJhZGlvQ2hhbmdlKSA9PiB7IH07XG5cbiAgLyoqXG4gICAqIFN5bmNocm9uaXplcyB3aXRoIHRoZSBgUmFkaW9Hcm91cGAgaW4gdGhlIGV2ZW50IG9mIGEgY2hhbmdlZCBgUmFkaW9gLlxuICAgKiBFbWl0cyB0aGUgY2hhbmdlcyBvZiBib3RoIHRoZSBgUmFkaW9Hcm91cGAgYW5kIGBSYWRpb2AuXG4gICAqL1xuICBvbkNoYW5nZShldmVudDogRXZlbnQpIHtcbiAgICBldmVudC5zdG9wUHJvcGFnYXRpb24oKTtcbiAgICB0aGlzLmNoZWNrZWQgPSAoZXZlbnQudGFyZ2V0IGFzIEhUTUxJbnB1dEVsZW1lbnQpLmNoZWNrZWQ7XG4gICAgY29uc3QgcmFkaW9FdmVudCA9IG5ldyBSYWRpb0NoYW5nZSh0aGlzLCB0aGlzLnZhbHVlKTtcbiAgICB0aGlzLmNoYW5nZS5lbWl0KHJhZGlvRXZlbnQpO1xuICAgIHRoaXMucmFkaW9DaGFuZ2VIYW5kbGVyKHJhZGlvRXZlbnQpO1xuICB9XG5cbiAgLyoqXG4gICAqIE1ldGhvZCBjYWxsZWQgYnkgYFJhZGlvR3JvdXBgIHdpdGggYSBjYWxsYmFjayBmdW5jdGlvbiB0byBidWJibGUgYFJhZGlvQ2hhbmdlYCBldmVudHNcbiAgICogQHBhcmFtIGZuIGNhbGxiYWNrIHRoYXQgZXhwZWN0cyBhIGBSYWRpb0NoYW5nZWAgYXMgYW4gYXJndW1lbnRcbiAgICovXG4gIHJlZ2lzdGVyUmFkaW9DaGFuZ2VIYW5kbGVyKGZuOiAoZXZlbnQ6IFJhZGlvQ2hhbmdlKSA9PiB2b2lkKSB7XG4gICAgdGhpcy5yYWRpb0NoYW5nZUhhbmRsZXIgPSBmbjtcbiAgfVxufVxuIl19