@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>
199 lines • 14 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() {
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 {?}
*/
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;
/** @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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLXJhZGlvLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0BrdXNoa2kvbmctc3VrYS8iLCJzb3VyY2VzIjpbImxpYi9idXR0b24tcmFkaW8vYnV0dG9uLXJhZGlvLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7O0FBQUEsT0FBTyxFQUNMLFNBQVMsRUFDVCxLQUFLLEVBQ0wsV0FBVyxFQUNYLE1BQU0sRUFDTixZQUFZLEVBQ2IsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDbkQsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFHaEU7SUFBQTtRQXlDVyxZQUFPLEdBQUcsS0FBSyxDQUFDO1FBRWhCLFNBQUksR0FBRyxFQUFFLENBQUM7UUFFVixhQUFRLEdBQUcsS0FBSyxDQUFDOzs7O1FBZWpCLGFBQVEsR0FBRyxLQUFLLENBQUM7Ozs7UUFJakIsVUFBSyxHQUFHLEVBQUUsQ0FBQzs7OztRQUlYLGFBQVEsR0FBRyxLQUFLLENBQUM7Ozs7UUFJakIsT0FBRSxHQUFHLGtCQUFnQixXQUFXLENBQUMsZ0JBQWdCLEVBQUksQ0FBQzs7Ozs7UUFLckQsV0FBTSxHQUFHLElBQUksWUFBWSxFQUFxQixDQUFDOzs7O1FBSS9CLFNBQUksR0FBRyxPQUFPLENBQUM7UUFFRSxjQUFTLEdBQUcsSUFBSSxDQUFDOztRQUdsRCxnQkFBVyxHQUFHLEVBQUUsQ0FBQzs7OztRQUszQiw2QkFBd0I7Ozs7UUFBRyxVQUFDLEtBQXdCLElBQU8sQ0FBQyxFQUFDO0lBcUIvRCxDQUFDO0lBakVDLHNCQUFhLHVDQUFjOzs7O1FBSTNCO1lBQ0UsSUFBSSxJQUFJLENBQUMsV0FBVyxFQUFFO2dCQUNwQixPQUFPLElBQUksQ0FBQyxXQUFXLENBQUM7YUFDekI7WUFDRCxPQUFPLFdBQVMsSUFBSSxDQUFDLEVBQUksQ0FBQztRQUM1QixDQUFDOzs7OztRQVRELFVBQTRCLEtBQWE7WUFDdkMsSUFBSSxDQUFDLFdBQVcsR0FBRyxLQUFLLENBQUM7UUFDM0IsQ0FBQzs7O09BQUE7SUE0Q0Q7OztPQUdHOzs7Ozs7O0lBQ0gsOEJBQVE7Ozs7OztJQUFSLFVBQVMsS0FBWTtRQUNuQixLQUFLLENBQUMsZUFBZSxFQUFFLENBQUM7UUFDeEIsSUFBSSxDQUFDLE9BQU8sR0FBRyxDQUFDLG1CQUFBLEtBQUssQ0FBQyxNQUFNLEVBQW9CLENBQUMsQ0FBQyxPQUFPLENBQUM7O1lBQ3BELGdCQUFnQixHQUFHLElBQUksaUJBQWlCLENBQUMsSUFBSSxFQUFFLElBQUksQ0FBQyxLQUFLLENBQUM7UUFDaEUsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsZ0JBQWdCLENBQUMsQ0FBQztRQUNuQyxJQUFJLENBQUMsd0JBQXdCLENBQUMsZ0JBQWdCLENBQUMsQ0FBQztJQUNsRCxDQUFDO0lBRUQ7OztPQUdHOzs7Ozs7SUFDSCxzREFBZ0M7Ozs7O0lBQWhDLFVBQWlDLEVBQXNDO1FBQ3JFLElBQUksQ0FBQyx3QkFBd0IsR0FBRyxFQUFFLENBQUM7SUFDckMsQ0FBQzs7OztJQXhFTSw0QkFBZ0IsR0FBRyxDQUFDLENBQUM7O2dCQXZDN0IsU0FBUyxTQUFDO29CQUNULFFBQVEsRUFBRSxtQkFBbUI7b0JBQzdCLFFBQVEsRUFBRSx3bUJBdUJUO29CQUNELFNBQVMsRUFBRTt3QkFDVDs0QkFDRSxPQUFPLEVBQUUsaUJBQWlCOzRCQUMxQixXQUFXLEVBQUUsV0FBVzs0QkFDeEIsS0FBSyxFQUFFLElBQUk7eUJBQ1o7cUJBQ0Y7aUJBQ0Y7OzswQkFRRSxLQUFLO3VCQUVMLEtBQUs7MkJBRUwsS0FBSztpQ0FFTCxLQUFLOzJCQWFMLEtBQUs7d0JBSUwsS0FBSzsyQkFJTCxLQUFLO3FCQUlMLEtBQUs7eUJBS0wsTUFBTTt1QkFJTixXQUFXLFNBQUMsV0FBVzs0QkFFdkIsV0FBVyxTQUFDLDRCQUE0Qjs7SUE2QjNDLGtCQUFDO0NBQUEsQUFoSEQsSUFnSEM7U0E3RVksV0FBVzs7Ozs7O0lBSXRCLDZCQUE0Qjs7SUFFNUIsOEJBQXlCOztJQUV6QiwyQkFBbUI7O0lBRW5CLCtCQUEwQjs7Ozs7SUFlMUIsK0JBQTBCOzs7OztJQUkxQiw0QkFBb0I7Ozs7O0lBSXBCLCtCQUEwQjs7Ozs7SUFJMUIseUJBQStEOzs7OztJQUsvRCw2QkFBeUQ7Ozs7O0lBSXpELDJCQUF5Qzs7SUFFekMsZ0NBQTREOzs7OztJQUc1RCxrQ0FBMkI7Ozs7O0lBSzNCLCtDQUE2RCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENvbXBvbmVudCxcbiAgSW5wdXQsXG4gIEhvc3RCaW5kaW5nLFxuICBPdXRwdXQsXG4gIEV2ZW50RW1pdHRlclxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE5HX1ZBTFVFX0FDQ0VTU09SIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHsgQnV0dG9uUmFkaW9DaGFuZ2UgfSBmcm9tICcuL2J1dHRvbi1yYWRpby1jaGFuZ2UuY2xhc3MnO1xuXG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3N1a2EtYnV0dG9uLXJhZGlvJyxcbiAgdGVtcGxhdGU6IGBcbiAgICA8aW5wdXRcbiAgICAgICpuZ0lmPVwiIXNrZWxldG9uXCJcbiAgICAgIGNsYXNzPVwiYnV0dG9uLXJhZGlvXCJcbiAgICAgIHR5cGU9XCJyYWRpb1wiXG4gICAgICBbY2hlY2tlZF09XCJjaGVja2VkXCJcbiAgICAgIFtkaXNhYmxlZF09XCJkaXNhYmxlZFwiXG4gICAgICBbbmFtZV09XCJuYW1lXCJcbiAgICAgIFtpZF09XCJpZFwiXG4gICAgICBbcmVxdWlyZWRdPVwicmVxdWlyZWRcIlxuICAgICAgW3ZhbHVlXT1cInZhbHVlXCJcbiAgICAgIFthdHRyLmFyaWEtbGFiZWxsZWRieV09XCJhcmlhTGFiZWxsZWRieVwiXG4gICAgICAoY2hhbmdlKT1cIm9uQ2hhbmdlKCRldmVudClcIj5cbiAgICA8ZGl2ICpuZ0lmPVwic2tlbGV0b25cIiBjbGFzcz1cImJ1dHRvbi1yYWRpbyBza2VsZXRvblwiPjwvZGl2PlxuICAgIDxsYWJlbFxuICAgICAgY2xhc3M9XCJidXR0b24tcmFkaW9fX2xhYmVsXCJcbiAgICAgIFtuZ0NsYXNzXT1cIntcbiAgICAgICAgJ3NrZWxldG9uJzogc2tlbGV0b25cbiAgICAgIH1cIlxuICAgICAgW2Zvcl09XCJpZFwiXG4gICAgICBpZD1cImxhYmVsLXt7aWR9fVwiPlxuICAgICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuICAgIDwvbGFiZWw+XG4gIGAsXG4gIHByb3ZpZGVyczogW1xuICAgIHtcbiAgICAgIHByb3ZpZGU6IE5HX1ZBTFVFX0FDQ0VTU09SLFxuICAgICAgdXNlRXhpc3Rpbmc6IEJ1dHRvblJhZGlvLFxuICAgICAgbXVsdGk6IHRydWVcbiAgICB9XG4gIF1cbn0pXG4vLyB0c2xpbnQ6ZGlzYWJsZS1uZXh0LWxpbmU6IGNvbXBvbmVudC1jbGFzcy1zdWZmaXhcbmV4cG9ydCBjbGFzcyBCdXR0b25SYWRpbyB7XG4gIC8qKlxuICAgKiBVc2VkIHRvIGR5bmFtaWNhbGx5IGNyZWF0ZSB1bmlxdWUgaWRzIGZvciB0aGUgYEJ1dHRvblJhZGlvYC5cbiAgICovXG4gIHN0YXRpYyBidXR0b25SYWRpb0NvdW50ID0gMDtcblxuICBASW5wdXQoKSBjaGVja2VkID0gZmFsc2U7XG5cbiAgQElucHV0KCkgbmFtZSA9ICcnO1xuXG4gIEBJbnB1dCgpIGRpc2FibGVkID0gZmFsc2U7XG5cbiAgQElucHV0KCkgc2V0IGFyaWFMYWJlbGxlZGJ5KHZhbHVlOiBzdHJpbmcpIHtcbiAgICB0aGlzLl9sYWJlbGxlZGJ5ID0gdmFsdWU7XG4gIH1cblxuICBnZXQgYXJpYUxhYmVsbGVkYnkoKSB7XG4gICAgaWYgKHRoaXMuX2xhYmVsbGVkYnkpIHtcbiAgICAgIHJldHVybiB0aGlzLl9sYWJlbGxlZGJ5O1xuICAgIH1cbiAgICByZXR1cm4gYGxhYmVsLSR7dGhpcy5pZH1gO1xuICB9XG4gIC8qKlxuICAgKiBTZXRzIHRoZSBIVE1MIHJlcXVpcmVkIGF0dHJpYnV0ZVxuICAgKi9cbiAgQElucHV0KCkgcmVxdWlyZWQgPSBmYWxzZTtcbiAgLyoqXG4gICAqIFRoZSB2YWx1ZSBvZiB0aGUgYFJhZGlvYC5cbiAgICovXG4gIEBJbnB1dCgpIHZhbHVlID0gJyc7XG4gIC8qKlxuICAgKiBTZXQgdG8gYHRydWVgIGZvciBhIGxvYWRpbmcgdGFibGUuXG4gICAqL1xuICBASW5wdXQoKSBza2VsZXRvbiA9IGZhbHNlO1xuICAvKipcbiAgICogVGhlIGlkIGZvciB0aGUgYFJhZGlvYC5cbiAgICovXG4gIEBJbnB1dCgpIGlkID0gYGJ1dHRvbi1yYWRpby0ke0J1dHRvblJhZGlvLmJ1dHRvblJhZGlvQ291bnQrK31gO1xuICAvKipcbiAgICogZW1pdHMgd2hlbiB0aGUgc3RhdGUgb2YgdGhlIHJhZGlvIGNoYW5nZXNcbiAgICovXG4gIC8vIHRzbGludDpkaXNhYmxlLW5leHQtbGluZTogbm8tb3V0cHV0LW5hdGl2ZVxuICBAT3V0cHV0KCkgY2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcjxCdXR0b25SYWRpb0NoYW5nZT4oKTtcbiAgLyoqXG4gICAqIEJpbmRzICdyYWRpbycgdmFsdWUgdG8gdGhlIHJvbGUgYXR0cmlidXRlIGZvciBgUmFkaW9gLlxuICAgKi9cbiAgQEhvc3RCaW5kaW5nKCdhdHRyLnJvbGUnKSByb2xlID0gJ3JhZGlvJztcblxuICBASG9zdEJpbmRpbmcoJ2NsYXNzLmJ1dHRvbi1yYWRpby13cmFwcGVyJykgaG9zdENsYXNzID0gdHJ1ZTtcblxuICAvLyB0c2xpbnQ6ZGlzYWJsZS1uZXh0LWxpbmU6IHZhcmlhYmxlLW5hbWVcbiAgcHJvdGVjdGVkIF9sYWJlbGxlZGJ5ID0gJyc7XG5cbiAgLyoqXG4gICAqIEhhbmRsZXIgcHJvdmlkZWQgYnkgdGhlIGBCdXR0b25SYWRpb0dyb3VwYCB0byBidWJibGUgZXZlbnRzIHVwXG4gICAqL1xuICBidXR0b25SYWRpb0NoYW5nZUhhbmRsZXIgPSAoZXZlbnQ6IEJ1dHRvblJhZGlvQ2hhbmdlKSA9PiB7IH07XG5cbiAgLyoqXG4gICAqIFN5bmNocm9uaXplcyB3aXRoIHRoZSBgQnV0dG9uUmFkaW9Hcm91cGAgaW4gdGhlIGV2ZW50IG9mIGEgY2hhbmdlZCBgQnV0dG9uUmFkaW9gLlxuICAgKiBFbWl0cyB0aGUgY2hhbmdlcyBvZiBib3RoIHRoZSBgQnV0dG9uUmFkaW9Hcm91cGAgYW5kIGBCdXR0b25SYWRpb2AuXG4gICAqL1xuICBvbkNoYW5nZShldmVudDogRXZlbnQpIHtcbiAgICBldmVudC5zdG9wUHJvcGFnYXRpb24oKTtcbiAgICB0aGlzLmNoZWNrZWQgPSAoZXZlbnQudGFyZ2V0IGFzIEhUTUxJbnB1dEVsZW1lbnQpLmNoZWNrZWQ7XG4gICAgY29uc3QgQnV0dG9uUmFkaW9FdmVudCA9IG5ldyBCdXR0b25SYWRpb0NoYW5nZSh0aGlzLCB0aGlzLnZhbHVlKTtcbiAgICB0aGlzLmNoYW5nZS5lbWl0KEJ1dHRvblJhZGlvRXZlbnQpO1xuICAgIHRoaXMuYnV0dG9uUmFkaW9DaGFuZ2VIYW5kbGVyKEJ1dHRvblJhZGlvRXZlbnQpO1xuICB9XG5cbiAgLyoqXG4gICAqIE1ldGhvZCBjYWxsZWQgYnkgYEJ1dHRvblJhZGlvR3JvdXBgIHdpdGggYSBjYWxsYmFjayBmdW5jdGlvbiB0byBidWJibGUgYEJ1dHRvblJhZGlvQ2hhbmdlYCBldmVudHNcbiAgICogQHBhcmFtIGZuIGNhbGxiYWNrIHRoYXQgZXhwZWN0cyBhIGBCdXR0b25SYWRpb0NoYW5nZWAgYXMgYW4gYXJndW1lbnRcbiAgICovXG4gIHJlZ2lzdGVyQnV0dG9uUmFkaW9DaGFuZ2VIYW5kbGVyKGZuOiAoZXZlbnQ6IEJ1dHRvblJhZGlvQ2hhbmdlKSA9PiB2b2lkKSB7XG4gICAgdGhpcy5idXR0b25SYWRpb0NoYW5nZUhhbmRsZXIgPSBmbjtcbiAgfVxufVxuIl19