theme-lib
Version:
This is a simple example Angular Library published to npm.
162 lines • 10.6 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/*
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';
import { convertToBoolProperty } from '../helpers';
/*
* The `NbRadioComponent` provides the same functionality as native `<input type="radio">`
* with Nebular styles and animations.
*
* @stacked-example(Showcase, radio/radio-showcase.component)
*
* ### Installation
*
* Import `NbRadioModule` to your feature module.
*
* ```ts
* @NgModule({
* imports: [
* // ...
* NbRadioModule,
* ],
* })
* export class PageModule { }
* ```
*
* ### Usage
*
* Radio buttons should be wrapped in `nb-radio-group` to provide form bindings.
*
* ```html
* <nb-radio-group [(ngModel)]="selectedOption">
* <nb-radio>Option 1</nb-radio>
* <nb-radio>Option 2</nb-radio>
* <nb-radio>Option 3</nb-radio>
* </nb-radio-group>
* ```
*
* You can disable some radios in the group using a `disabled` attribute.
*
* @stacked-example(Disabled, radio/radio-disabled.component)
*
*
* @styles
*
* radio-bg
* radio-fg
* radio-size
* radio-border-size
* radio-border-color
* radio-checkmark
* radio-checked-bg
* radio-checked-size
* radio-checked-border-size
* radio-checked-border-color
* radio-checked-checkmark
* radio-disabled-bg
* radio-disabled-size
* radio-disabled-border-size
* radio-disabled-border-color
* radio-disabled-checkmark
* */
export class NbRadioComponent {
/**
* @param {?} cd
*/
constructor(cd) {
this.cd = cd;
this.valueChange = new EventEmitter();
this.blur = new EventEmitter();
}
/**
* @param {?} disabled
* @return {?}
*/
set setDisabled(disabled) {
this.disabled = convertToBoolProperty(disabled);
}
/**
* @return {?}
*/
markForCheck() {
this.cd.markForCheck();
this.cd.detectChanges();
}
/**
* @param {?} event
* @return {?}
*/
onChange(event) {
event.stopPropagation();
this.checked = true;
this.valueChange.emit(this.value);
}
/**
* @param {?} event
* @return {?}
*/
onClick(event) {
event.stopPropagation();
}
}
NbRadioComponent.decorators = [
{ type: Component, args: [{
selector: 'nb-radio',
template: `
<label>
<input
type="radio"
[name]="name"
[value]="value"
[checked]="checked"
[disabled]="disabled"
(change)="onChange($event)"
(click)="onClick($event)">
<span class="radio-indicator"></span>
<span class="radio-description">
<ng-content></ng-content>
</span>
</label>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
styles: [":host{display:block}:host label{position:relative;display:inline-flex;margin:0;min-height:inherit;padding:.375rem 1.5rem .375rem 0}:host input{position:absolute;opacity:0}:host input:disabled+.radio-indicator,:host input:disabled~.radio-description{opacity:.5}:host .radio-indicator{border-radius:50%;flex-shrink:0;display:flex;justify-content:center;align-items:center}:host .radio-indicator::before{content:'';transition:.1s;border-radius:50%}[dir=ltr] :host .radio-description{padding-left:.5rem}[dir=rtl] :host .radio-description{padding-right:.5rem}"]
}] }
];
/** @nocollapse */
NbRadioComponent.ctorParameters = () => [
{ type: ChangeDetectorRef }
];
NbRadioComponent.propDecorators = {
name: [{ type: Input }],
checked: [{ type: Input }],
value: [{ type: Input }],
setDisabled: [{ type: Input, args: ['disabled',] }],
valueChange: [{ type: Output }],
blur: [{ type: Output }]
};
if (false) {
/** @type {?} */
NbRadioComponent.prototype.name;
/** @type {?} */
NbRadioComponent.prototype.checked;
/** @type {?} */
NbRadioComponent.prototype.value;
/** @type {?} */
NbRadioComponent.prototype.valueChange;
/** @type {?} */
NbRadioComponent.prototype.blur;
/** @type {?} */
NbRadioComponent.prototype.disabled;
/**
* @type {?}
* @protected
*/
NbRadioComponent.prototype.cd;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmFkaW8uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vdGhlbWUtbGliLyIsInNvdXJjZXMiOlsibGliL2NvbXBvbmVudHMvcmFkaW8vcmFkaW8uY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7OztBQU1BLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxpQkFBaUIsRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFbkgsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0sWUFBWSxDQUFDOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFnRm5ELE1BQU0sT0FBTyxnQkFBZ0I7Ozs7SUFtQjNCLFlBQXNCLEVBQXFCO1FBQXJCLE9BQUUsR0FBRixFQUFFLENBQW1CO1FBTmpDLGdCQUFXLEdBQXNCLElBQUksWUFBWSxFQUFFLENBQUM7UUFFcEQsU0FBSSxHQUF1QixJQUFJLFlBQVksRUFBRSxDQUFDO0lBSVYsQ0FBQzs7Ozs7SUFYL0MsSUFDSSxXQUFXLENBQUMsUUFBaUI7UUFDL0IsSUFBSSxDQUFDLFFBQVEsR0FBRyxxQkFBcUIsQ0FBQyxRQUFRLENBQUMsQ0FBQztJQUNsRCxDQUFDOzs7O0lBVUQsWUFBWTtRQUNWLElBQUksQ0FBQyxFQUFFLENBQUMsWUFBWSxFQUFFLENBQUM7UUFDdkIsSUFBSSxDQUFDLEVBQUUsQ0FBQyxhQUFhLEVBQUUsQ0FBQztJQUMxQixDQUFDOzs7OztJQUVELFFBQVEsQ0FBQyxLQUFZO1FBQ25CLEtBQUssQ0FBQyxlQUFlLEVBQUUsQ0FBQztRQUN4QixJQUFJLENBQUMsT0FBTyxHQUFHLElBQUksQ0FBQztRQUNwQixJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDcEMsQ0FBQzs7Ozs7SUFFRCxPQUFPLENBQUMsS0FBWTtRQUNsQixLQUFLLENBQUMsZUFBZSxFQUFFLENBQUM7SUFDMUIsQ0FBQzs7O1lBdkRGLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsVUFBVTtnQkFDcEIsUUFBUSxFQUFFOzs7Ozs7Ozs7Ozs7Ozs7R0FlVDtnQkFDRCxlQUFlLEVBQUUsdUJBQXVCLENBQUMsTUFBTTs7YUFFaEQ7Ozs7WUFqRmlDLGlCQUFpQjs7O21CQW9GaEQsS0FBSztzQkFFTCxLQUFLO29CQUVMLEtBQUs7MEJBRUwsS0FBSyxTQUFDLFVBQVU7MEJBS2hCLE1BQU07bUJBRU4sTUFBTTs7OztJQWJQLGdDQUFzQjs7SUFFdEIsbUNBQTBCOztJQUUxQixpQ0FBb0I7O0lBT3BCLHVDQUE4RDs7SUFFOUQsZ0NBQXdEOztJQUV4RCxvQ0FBa0I7Ozs7O0lBRU4sOEJBQStCIiwic291cmNlc0NvbnRlbnQiOlsiLypcclxuICogQGxpY2Vuc2VcclxuICogQ29weXJpZ2h0IEFrdmVvLiBBbGwgUmlnaHRzIFJlc2VydmVkLlxyXG4gKiBMaWNlbnNlZCB1bmRlciB0aGUgTUlUIExpY2Vuc2UuIFNlZSBMaWNlbnNlLnR4dCBpbiB0aGUgcHJvamVjdCByb290IGZvciBsaWNlbnNlIGluZm9ybWF0aW9uLlxyXG4gKi9cclxuXHJcbmltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDaGFuZ2VEZXRlY3RvclJlZiwgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuXHJcbmltcG9ydCB7IGNvbnZlcnRUb0Jvb2xQcm9wZXJ0eSB9IGZyb20gJy4uL2hlbHBlcnMnO1xyXG5cclxuXHJcbi8qXHJcbiAqIFRoZSBgTmJSYWRpb0NvbXBvbmVudGAgcHJvdmlkZXMgdGhlIHNhbWUgZnVuY3Rpb25hbGl0eSBhcyBuYXRpdmUgYDxpbnB1dCB0eXBlPVwicmFkaW9cIj5gXHJcbiAqIHdpdGggTmVidWxhciBzdHlsZXMgYW5kIGFuaW1hdGlvbnMuXHJcbiAqXHJcbiAqIEBzdGFja2VkLWV4YW1wbGUoU2hvd2Nhc2UsIHJhZGlvL3JhZGlvLXNob3djYXNlLmNvbXBvbmVudClcclxuICpcclxuICogIyMjIEluc3RhbGxhdGlvblxyXG4gKlxyXG4gKiBJbXBvcnQgYE5iUmFkaW9Nb2R1bGVgIHRvIHlvdXIgZmVhdHVyZSBtb2R1bGUuXHJcbiAqXHJcbiAqIGBgYHRzXHJcbiAqIEBOZ01vZHVsZSh7XHJcbiAqICAgaW1wb3J0czogW1xyXG4gKiAgIFx0Ly8gLi4uXHJcbiAqICAgICBOYlJhZGlvTW9kdWxlLFxyXG4gKiAgIF0sXHJcbiAqIH0pXHJcbiAqIGV4cG9ydCBjbGFzcyBQYWdlTW9kdWxlIHsgfVxyXG4gKiBgYGBcclxuICpcclxuICogIyMjIFVzYWdlXHJcbiAqXHJcbiAqIFJhZGlvIGJ1dHRvbnMgc2hvdWxkIGJlIHdyYXBwZWQgaW4gYG5iLXJhZGlvLWdyb3VwYCB0byBwcm92aWRlIGZvcm0gYmluZGluZ3MuXHJcbiAqXHJcbiAqIGBgYGh0bWxcclxuICogPG5iLXJhZGlvLWdyb3VwIFsobmdNb2RlbCldPVwic2VsZWN0ZWRPcHRpb25cIj5cclxuICogICA8bmItcmFkaW8+T3B0aW9uIDE8L25iLXJhZGlvPlxyXG4gKiAgIDxuYi1yYWRpbz5PcHRpb24gMjwvbmItcmFkaW8+XHJcbiAqICAgPG5iLXJhZGlvPk9wdGlvbiAzPC9uYi1yYWRpbz5cclxuICogPC9uYi1yYWRpby1ncm91cD5cclxuICogYGBgXHJcbiAqXHJcbiAqIFlvdSBjYW4gZGlzYWJsZSBzb21lIHJhZGlvcyBpbiB0aGUgZ3JvdXAgdXNpbmcgYSBgZGlzYWJsZWRgIGF0dHJpYnV0ZS5cclxuICpcclxuICogQHN0YWNrZWQtZXhhbXBsZShEaXNhYmxlZCwgcmFkaW8vcmFkaW8tZGlzYWJsZWQuY29tcG9uZW50KVxyXG4gKlxyXG4gKlxyXG4gKiBAc3R5bGVzXHJcbiAqXHJcbiAqIHJhZGlvLWJnXHJcbiAqIHJhZGlvLWZnXHJcbiAqIHJhZGlvLXNpemVcclxuICogcmFkaW8tYm9yZGVyLXNpemVcclxuICogcmFkaW8tYm9yZGVyLWNvbG9yXHJcbiAqIHJhZGlvLWNoZWNrbWFya1xyXG4gKiByYWRpby1jaGVja2VkLWJnXHJcbiAqIHJhZGlvLWNoZWNrZWQtc2l6ZVxyXG4gKiByYWRpby1jaGVja2VkLWJvcmRlci1zaXplXHJcbiAqIHJhZGlvLWNoZWNrZWQtYm9yZGVyLWNvbG9yXHJcbiAqIHJhZGlvLWNoZWNrZWQtY2hlY2ttYXJrXHJcbiAqIHJhZGlvLWRpc2FibGVkLWJnXHJcbiAqIHJhZGlvLWRpc2FibGVkLXNpemVcclxuICogcmFkaW8tZGlzYWJsZWQtYm9yZGVyLXNpemVcclxuICogcmFkaW8tZGlzYWJsZWQtYm9yZGVyLWNvbG9yXHJcbiAqIHJhZGlvLWRpc2FibGVkLWNoZWNrbWFya1xyXG4gKiAqL1xyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ25iLXJhZGlvJyxcclxuICB0ZW1wbGF0ZTogYFxyXG4gICAgPGxhYmVsPlxyXG4gICAgICA8aW5wdXRcclxuICAgICAgICB0eXBlPVwicmFkaW9cIlxyXG4gICAgICAgIFtuYW1lXT1cIm5hbWVcIlxyXG4gICAgICAgIFt2YWx1ZV09XCJ2YWx1ZVwiXHJcbiAgICAgICAgW2NoZWNrZWRdPVwiY2hlY2tlZFwiXHJcbiAgICAgICAgW2Rpc2FibGVkXT1cImRpc2FibGVkXCJcclxuICAgICAgICAoY2hhbmdlKT1cIm9uQ2hhbmdlKCRldmVudClcIlxyXG4gICAgICAgIChjbGljayk9XCJvbkNsaWNrKCRldmVudClcIj5cclxuICAgICAgPHNwYW4gY2xhc3M9XCJyYWRpby1pbmRpY2F0b3JcIj48L3NwYW4+XHJcbiAgICAgIDxzcGFuIGNsYXNzPVwicmFkaW8tZGVzY3JpcHRpb25cIj5cclxuICAgICAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XHJcbiAgICAgIDwvc3Bhbj5cclxuICAgIDwvbGFiZWw+XHJcbiAgYCxcclxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcclxuICBzdHlsZVVybHM6IFsnLi9yYWRpby5jb21wb25lbnQuc2NzcyddLFxyXG59KVxyXG5leHBvcnQgY2xhc3MgTmJSYWRpb0NvbXBvbmVudCB7XHJcblxyXG4gIEBJbnB1dCgpIG5hbWU6IHN0cmluZztcclxuXHJcbiAgQElucHV0KCkgY2hlY2tlZDogYm9vbGVhbjtcclxuXHJcbiAgQElucHV0KCkgdmFsdWU6IGFueTtcclxuXHJcbiAgQElucHV0KCdkaXNhYmxlZCcpXHJcbiAgc2V0IHNldERpc2FibGVkKGRpc2FibGVkOiBib29sZWFuKSB7XHJcbiAgICB0aGlzLmRpc2FibGVkID0gY29udmVydFRvQm9vbFByb3BlcnR5KGRpc2FibGVkKTtcclxuICB9XHJcblxyXG4gIEBPdXRwdXQoKSB2YWx1ZUNoYW5nZTogRXZlbnRFbWl0dGVyPGFueT4gPSBuZXcgRXZlbnRFbWl0dGVyKCk7XHJcblxyXG4gIEBPdXRwdXQoKSBibHVyOiBFdmVudEVtaXR0ZXI8dm9pZD4gPSBuZXcgRXZlbnRFbWl0dGVyKCk7XHJcblxyXG4gIGRpc2FibGVkOiBib29sZWFuO1xyXG5cclxuICBjb25zdHJ1Y3Rvcihwcm90ZWN0ZWQgY2Q6IENoYW5nZURldGVjdG9yUmVmKSB7fVxyXG5cclxuICBtYXJrRm9yQ2hlY2soKSB7XHJcbiAgICB0aGlzLmNkLm1hcmtGb3JDaGVjaygpO1xyXG4gICAgdGhpcy5jZC5kZXRlY3RDaGFuZ2VzKCk7XHJcbiAgfVxyXG5cclxuICBvbkNoYW5nZShldmVudDogRXZlbnQpIHtcclxuICAgIGV2ZW50LnN0b3BQcm9wYWdhdGlvbigpO1xyXG4gICAgdGhpcy5jaGVja2VkID0gdHJ1ZTtcclxuICAgIHRoaXMudmFsdWVDaGFuZ2UuZW1pdCh0aGlzLnZhbHVlKTtcclxuICB9XHJcblxyXG4gIG9uQ2xpY2soZXZlbnQ6IEV2ZW50KSB7XHJcbiAgICBldmVudC5zdG9wUHJvcGFnYXRpb24oKTtcclxuICB9XHJcbn1cclxuIl19