theme-lib
Version:
This is a simple example Angular Library published to npm.
211 lines • 14 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 { Component, Input, HostBinding, forwardRef, ChangeDetectorRef } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { convertToBoolProperty } from '../helpers';
/*
* Styled checkbox component
*
* @stacked-example(Showcase, checkbox/checkbox-showcase.component)
*
* ### Installation
*
* Import `NbCheckboxComponent` to your feature module.
* ```ts
* @NgModule({
* imports: [
* // ...
* NbCheckboxModule,
* ],
* })
* export class PageModule { }
* ```
* ### Usage
*
* Can have one of the following statuses: danger, success or warning
*
* @stacked-example(Colored Checkboxes, checkbox/checkbox-status.component)
*
* @additional-example(Disabled Checkbox, checkbox/checkbox-disabled.component)
*
* @styles
*
* checkbox-bg:
* checkbox-size:
* checkbox-border-size:
* checkbox-border-color:
* checkbox-checkmark:
* checkbox-checked-bg:
* checkbox-checked-size:
* checkbox-checked-border-size:
* checkbox-checked-border-color:
* checkbox-checked-checkmark:
* checkbox-disabled-bg:
* checkbox-disabled-size:
* checkbox-disabled-border-size:
* checkbox-disabled-border-color:
* checkbox-disabled-checkmark:
*/
export class NbCheckboxComponent {
/**
* @param {?} changeDetector
*/
constructor(changeDetector) {
this.changeDetector = changeDetector;
/*
* Checkbox value
* @type {boolean}
* @private
*/
this._value = false;
this.disabled = false;
this.onChange = () => { };
this.onTouched = () => { };
}
/**
* @param {?} val
* @return {?}
*/
set setDisabled(val) {
this.disabled = convertToBoolProperty(val);
}
/*
* Checkbox status (success, warning, danger)
* @param {string} val
*/
/**
* @param {?} val
* @return {?}
*/
set setStatus(val) {
this.status = val;
}
/**
* @return {?}
*/
get success() {
return this.status === 'success';
}
/**
* @return {?}
*/
get warning() {
return this.status === 'warning';
}
/**
* @return {?}
*/
get danger() {
return this.status === 'danger';
}
/**
* @return {?}
*/
get value() {
return this._value;
}
/**
* @param {?} val
* @return {?}
*/
set value(val) {
this._value = val;
this.onChange(val);
}
/**
* @param {?} fn
* @return {?}
*/
registerOnChange(fn) {
this.onChange = fn;
}
/**
* @param {?} fn
* @return {?}
*/
registerOnTouched(fn) {
this.onTouched = fn;
}
/**
* @param {?} val
* @return {?}
*/
writeValue(val) {
this._value = val;
this.changeDetector.detectChanges();
}
/**
* @param {?} val
* @return {?}
*/
setDisabledState(val) {
this.disabled = convertToBoolProperty(val);
}
/**
* @return {?}
*/
setTouched() {
this.onTouched();
}
}
NbCheckboxComponent.decorators = [
{ type: Component, args: [{
selector: 'nb-checkbox',
template: `
<label class="customised-control">
<input type="checkbox" class="customised-control-input"
[disabled]="disabled"
[checked]="value"
(change)="value = !value"
(blur)="setTouched()">
<span class="customised-control-indicator"></span>
<span class="customised-control-description">
<ng-content></ng-content>
</span>
</label>
`,
providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => NbCheckboxComponent),
multi: true,
}],
styles: [":host .customised-control{position:relative;display:inline-flex;margin:0;min-height:inherit;padding:.375rem 1.5rem .375rem 0}:host .customised-control-input{position:absolute;opacity:0}:host .customised-control-input:disabled~.customised-control-description,:host .customised-control-input:disabled~.customised-control-indicator{opacity:.5}:host .customised-control-indicator{border-radius:.25rem;flex-shrink:0}:host .customised-control-indicator::before{content:'';border-style:solid;display:block;margin:0 auto;-webkit-transform:rotate(45deg);transform:rotate(45deg)}[dir=ltr] :host .customised-control-description{padding-left:.5rem}[dir=rtl] :host .customised-control-description{padding-right:.5rem}"]
}] }
];
/** @nocollapse */
NbCheckboxComponent.ctorParameters = () => [
{ type: ChangeDetectorRef }
];
NbCheckboxComponent.propDecorators = {
_value: [{ type: Input, args: ['value',] }],
setDisabled: [{ type: Input, args: ['disabled',] }],
setStatus: [{ type: Input, args: ['status',] }],
success: [{ type: HostBinding, args: ['class.success',] }],
warning: [{ type: HostBinding, args: ['class.warning',] }],
danger: [{ type: HostBinding, args: ['class.danger',] }]
};
if (false) {
/** @type {?} */
NbCheckboxComponent.prototype.status;
/** @type {?} */
NbCheckboxComponent.prototype._value;
/** @type {?} */
NbCheckboxComponent.prototype.disabled;
/** @type {?} */
NbCheckboxComponent.prototype.onChange;
/** @type {?} */
NbCheckboxComponent.prototype.onTouched;
/**
* @type {?}
* @private
*/
NbCheckboxComponent.prototype.changeDetector;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hlY2tib3guY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vdGhlbWUtbGliLyIsInNvdXJjZXMiOlsibGliL2NvbXBvbmVudHMvY2hlY2tib3gvY2hlY2tib3guY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7OztBQU1BLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLFdBQVcsRUFBRSxVQUFVLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDN0YsT0FBTyxFQUF3QixpQkFBaUIsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQ3pFLE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLFlBQVksQ0FBQzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFtRW5ELE1BQU0sT0FBTyxtQkFBbUI7Ozs7SUFxRDlCLFlBQW9CLGNBQWlDO1FBQWpDLG1CQUFjLEdBQWQsY0FBYyxDQUFtQjs7Ozs7O1FBNUNyQyxXQUFNLEdBQVksS0FBSyxDQUFDO1FBRXhDLGFBQVEsR0FBWSxLQUFLLENBQUM7UUE4QjFCLGFBQVEsR0FBUSxHQUFHLEVBQUUsR0FBRyxDQUFDLENBQUM7UUFDMUIsY0FBUyxHQUFRLEdBQUcsRUFBRSxHQUFHLENBQUMsQ0FBQztJQVc2QixDQUFDOzs7OztJQXpDekQsSUFDSSxXQUFXLENBQUMsR0FBWTtRQUMxQixJQUFJLENBQUMsUUFBUSxHQUFHLHFCQUFxQixDQUFDLEdBQUcsQ0FBQyxDQUFDO0lBQzdDLENBQUM7Ozs7Ozs7OztJQU1ELElBQ0ksU0FBUyxDQUFDLEdBQVc7UUFDdkIsSUFBSSxDQUFDLE1BQU0sR0FBRyxHQUFHLENBQUM7SUFDcEIsQ0FBQzs7OztJQUVELElBQ0ksT0FBTztRQUNULE9BQU8sSUFBSSxDQUFDLE1BQU0sS0FBSyxTQUFTLENBQUM7SUFDbkMsQ0FBQzs7OztJQUVELElBQ0ksT0FBTztRQUNULE9BQU8sSUFBSSxDQUFDLE1BQU0sS0FBSyxTQUFTLENBQUM7SUFDbkMsQ0FBQzs7OztJQUVELElBQ0ksTUFBTTtRQUNSLE9BQU8sSUFBSSxDQUFDLE1BQU0sS0FBSyxRQUFRLENBQUM7SUFDbEMsQ0FBQzs7OztJQUtELElBQUksS0FBSztRQUNQLE9BQU8sSUFBSSxDQUFDLE1BQU0sQ0FBQztJQUNyQixDQUFDOzs7OztJQUVELElBQUksS0FBSyxDQUFDLEdBQUc7UUFDWCxJQUFJLENBQUMsTUFBTSxHQUFHLEdBQUcsQ0FBQztRQUNsQixJQUFJLENBQUMsUUFBUSxDQUFDLEdBQUcsQ0FBQyxDQUFDO0lBQ3JCLENBQUM7Ozs7O0lBSUQsZ0JBQWdCLENBQUMsRUFBTztRQUN0QixJQUFJLENBQUMsUUFBUSxHQUFHLEVBQUUsQ0FBQztJQUNyQixDQUFDOzs7OztJQUVELGlCQUFpQixDQUFDLEVBQU87UUFDdkIsSUFBSSxDQUFDLFNBQVMsR0FBRyxFQUFFLENBQUM7SUFDdEIsQ0FBQzs7Ozs7SUFFRCxVQUFVLENBQUMsR0FBUTtRQUNqQixJQUFJLENBQUMsTUFBTSxHQUFHLEdBQUcsQ0FBQztRQUNsQixJQUFJLENBQUMsY0FBYyxDQUFDLGFBQWEsRUFBRSxDQUFDO0lBQ3RDLENBQUM7Ozs7O0lBRUQsZ0JBQWdCLENBQUMsR0FBWTtRQUMzQixJQUFJLENBQUMsUUFBUSxHQUFHLHFCQUFxQixDQUFDLEdBQUcsQ0FBQyxDQUFDO0lBQzdDLENBQUM7Ozs7SUFFRCxVQUFVO1FBQ1IsSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDO0lBQ25CLENBQUM7OztZQWhHRixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLGFBQWE7Z0JBQ3ZCLFFBQVEsRUFBRTs7Ozs7Ozs7Ozs7O0dBWVQ7Z0JBRUQsU0FBUyxFQUFFLENBQUM7d0JBQ1YsT0FBTyxFQUFFLGlCQUFpQjt3QkFDMUIsV0FBVyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxtQkFBbUIsQ0FBQzt3QkFDbEQsS0FBSyxFQUFFLElBQUk7cUJBQ1osQ0FBQzs7YUFDSDs7OztZQXBFbUQsaUJBQWlCOzs7cUJBOEVsRSxLQUFLLFNBQUMsT0FBTzswQkFHYixLQUFLLFNBQUMsVUFBVTt3QkFTaEIsS0FBSyxTQUFDLFFBQVE7c0JBS2QsV0FBVyxTQUFDLGVBQWU7c0JBSzNCLFdBQVcsU0FBQyxlQUFlO3FCQUszQixXQUFXLFNBQUMsY0FBYzs7OztJQWxDM0IscUNBQWU7O0lBT2YscUNBQXdDOztJQUV4Qyx1Q0FBMEI7O0lBOEIxQix1Q0FBMEI7O0lBQzFCLHdDQUEyQjs7Ozs7SUFXZiw2Q0FBeUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKlxyXG4gKiBAbGljZW5zZVxyXG4gKiBDb3B5cmlnaHQgQWt2ZW8uIEFsbCBSaWdodHMgUmVzZXJ2ZWQuXHJcbiAqIExpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgTGljZW5zZS4gU2VlIExpY2Vuc2UudHh0IGluIHRoZSBwcm9qZWN0IHJvb3QgZm9yIGxpY2Vuc2UgaW5mb3JtYXRpb24uXHJcbiAqL1xyXG5cclxuaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgSG9zdEJpbmRpbmcsIGZvcndhcmRSZWYsIENoYW5nZURldGVjdG9yUmVmIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IENvbnRyb2xWYWx1ZUFjY2Vzc29yLCBOR19WQUxVRV9BQ0NFU1NPUiB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcclxuaW1wb3J0IHsgY29udmVydFRvQm9vbFByb3BlcnR5IH0gZnJvbSAnLi4vaGVscGVycyc7XHJcblxyXG4vKlxyXG4gKiBTdHlsZWQgY2hlY2tib3ggY29tcG9uZW50XHJcbiAqXHJcbiAqIEBzdGFja2VkLWV4YW1wbGUoU2hvd2Nhc2UsIGNoZWNrYm94L2NoZWNrYm94LXNob3djYXNlLmNvbXBvbmVudClcclxuICpcclxuICogIyMjIEluc3RhbGxhdGlvblxyXG4gKlxyXG4gKiBJbXBvcnQgYE5iQ2hlY2tib3hDb21wb25lbnRgIHRvIHlvdXIgZmVhdHVyZSBtb2R1bGUuXHJcbiAqIGBgYHRzXHJcbiAqIEBOZ01vZHVsZSh7XHJcbiAqICAgaW1wb3J0czogW1xyXG4gKiAgIFx0Ly8gLi4uXHJcbiAqICAgICBOYkNoZWNrYm94TW9kdWxlLFxyXG4gKiAgIF0sXHJcbiAqIH0pXHJcbiAqIGV4cG9ydCBjbGFzcyBQYWdlTW9kdWxlIHsgfVxyXG4gKiBgYGBcclxuICogIyMjIFVzYWdlXHJcbiAqXHJcbiAqIENhbiBoYXZlIG9uZSBvZiB0aGUgZm9sbG93aW5nIHN0YXR1c2VzOiBkYW5nZXIsIHN1Y2Nlc3Mgb3Igd2FybmluZ1xyXG4gKlxyXG4gKiBAc3RhY2tlZC1leGFtcGxlKENvbG9yZWQgQ2hlY2tib3hlcywgY2hlY2tib3gvY2hlY2tib3gtc3RhdHVzLmNvbXBvbmVudClcclxuICpcclxuICogQGFkZGl0aW9uYWwtZXhhbXBsZShEaXNhYmxlZCBDaGVja2JveCwgY2hlY2tib3gvY2hlY2tib3gtZGlzYWJsZWQuY29tcG9uZW50KVxyXG4gKlxyXG4gKiBAc3R5bGVzXHJcbiAqXHJcbiAqIGNoZWNrYm94LWJnOlxyXG4gKiBjaGVja2JveC1zaXplOlxyXG4gKiBjaGVja2JveC1ib3JkZXItc2l6ZTpcclxuICogY2hlY2tib3gtYm9yZGVyLWNvbG9yOlxyXG4gKiBjaGVja2JveC1jaGVja21hcms6XHJcbiAqIGNoZWNrYm94LWNoZWNrZWQtYmc6XHJcbiAqIGNoZWNrYm94LWNoZWNrZWQtc2l6ZTpcclxuICogY2hlY2tib3gtY2hlY2tlZC1ib3JkZXItc2l6ZTpcclxuICogY2hlY2tib3gtY2hlY2tlZC1ib3JkZXItY29sb3I6XHJcbiAqIGNoZWNrYm94LWNoZWNrZWQtY2hlY2ttYXJrOlxyXG4gKiBjaGVja2JveC1kaXNhYmxlZC1iZzpcclxuICogY2hlY2tib3gtZGlzYWJsZWQtc2l6ZTpcclxuICogY2hlY2tib3gtZGlzYWJsZWQtYm9yZGVyLXNpemU6XHJcbiAqIGNoZWNrYm94LWRpc2FibGVkLWJvcmRlci1jb2xvcjpcclxuICogY2hlY2tib3gtZGlzYWJsZWQtY2hlY2ttYXJrOlxyXG4gKi9cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICduYi1jaGVja2JveCcsXHJcbiAgdGVtcGxhdGU6IGBcclxuICAgIDxsYWJlbCBjbGFzcz1cImN1c3RvbWlzZWQtY29udHJvbFwiPlxyXG4gICAgICA8aW5wdXQgdHlwZT1cImNoZWNrYm94XCIgY2xhc3M9XCJjdXN0b21pc2VkLWNvbnRyb2wtaW5wdXRcIlxyXG4gICAgICAgICAgICAgW2Rpc2FibGVkXT1cImRpc2FibGVkXCJcclxuICAgICAgICAgICAgIFtjaGVja2VkXT1cInZhbHVlXCJcclxuICAgICAgICAgICAgIChjaGFuZ2UpPVwidmFsdWUgPSAhdmFsdWVcIlxyXG4gICAgICAgICAgICAgKGJsdXIpPVwic2V0VG91Y2hlZCgpXCI+XHJcbiAgICAgIDxzcGFuIGNsYXNzPVwiY3VzdG9taXNlZC1jb250cm9sLWluZGljYXRvclwiPjwvc3Bhbj5cclxuICAgICAgPHNwYW4gY2xhc3M9XCJjdXN0b21pc2VkLWNvbnRyb2wtZGVzY3JpcHRpb25cIj5cclxuICAgICAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XHJcbiAgICAgIDwvc3Bhbj5cclxuICAgIDwvbGFiZWw+XHJcbiAgYCxcclxuICBzdHlsZVVybHM6IFsgYC4vY2hlY2tib3guY29tcG9uZW50LnNjc3NgIF0sXHJcbiAgcHJvdmlkZXJzOiBbe1xyXG4gICAgcHJvdmlkZTogTkdfVkFMVUVfQUNDRVNTT1IsXHJcbiAgICB1c2VFeGlzdGluZzogZm9yd2FyZFJlZigoKSA9PiBOYkNoZWNrYm94Q29tcG9uZW50KSxcclxuICAgIG11bHRpOiB0cnVlLFxyXG4gIH1dLFxyXG59KVxyXG5leHBvcnQgY2xhc3MgTmJDaGVja2JveENvbXBvbmVudCBpbXBsZW1lbnRzIENvbnRyb2xWYWx1ZUFjY2Vzc29yIHtcclxuXHJcbiAgc3RhdHVzOiBzdHJpbmc7XHJcblxyXG4gIC8qXHJcbiAgICogQ2hlY2tib3ggdmFsdWVcclxuICAgKiBAdHlwZSB7Ym9vbGVhbn1cclxuICAgKiBAcHJpdmF0ZVxyXG4gICAqL1xyXG4gIEBJbnB1dCgndmFsdWUnKSBfdmFsdWU6IGJvb2xlYW4gPSBmYWxzZTtcclxuXHJcbiAgZGlzYWJsZWQ6IGJvb2xlYW4gPSBmYWxzZTtcclxuICBASW5wdXQoJ2Rpc2FibGVkJylcclxuICBzZXQgc2V0RGlzYWJsZWQodmFsOiBib29sZWFuKSB7XHJcbiAgICB0aGlzLmRpc2FibGVkID0gY29udmVydFRvQm9vbFByb3BlcnR5KHZhbCk7XHJcbiAgfVxyXG5cclxuICAvKlxyXG4gICAqIENoZWNrYm94IHN0YXR1cyAoc3VjY2Vzcywgd2FybmluZywgZGFuZ2VyKVxyXG4gICAqIEBwYXJhbSB7c3RyaW5nfSB2YWxcclxuICAgKi9cclxuICBASW5wdXQoJ3N0YXR1cycpXHJcbiAgc2V0IHNldFN0YXR1cyh2YWw6IHN0cmluZykge1xyXG4gICAgdGhpcy5zdGF0dXMgPSB2YWw7XHJcbiAgfVxyXG5cclxuICBASG9zdEJpbmRpbmcoJ2NsYXNzLnN1Y2Nlc3MnKVxyXG4gIGdldCBzdWNjZXNzKCkge1xyXG4gICAgcmV0dXJuIHRoaXMuc3RhdHVzID09PSAnc3VjY2Vzcyc7XHJcbiAgfVxyXG5cclxuICBASG9zdEJpbmRpbmcoJ2NsYXNzLndhcm5pbmcnKVxyXG4gIGdldCB3YXJuaW5nKCkge1xyXG4gICAgcmV0dXJuIHRoaXMuc3RhdHVzID09PSAnd2FybmluZyc7XHJcbiAgfVxyXG5cclxuICBASG9zdEJpbmRpbmcoJ2NsYXNzLmRhbmdlcicpXHJcbiAgZ2V0IGRhbmdlcigpIHtcclxuICAgIHJldHVybiB0aGlzLnN0YXR1cyA9PT0gJ2Rhbmdlcic7XHJcbiAgfVxyXG5cclxuICBvbkNoYW5nZTogYW55ID0gKCkgPT4geyB9O1xyXG4gIG9uVG91Y2hlZDogYW55ID0gKCkgPT4geyB9O1xyXG5cclxuICBnZXQgdmFsdWUoKSB7XHJcbiAgICByZXR1cm4gdGhpcy5fdmFsdWU7XHJcbiAgfVxyXG5cclxuICBzZXQgdmFsdWUodmFsKSB7XHJcbiAgICB0aGlzLl92YWx1ZSA9IHZhbDtcclxuICAgIHRoaXMub25DaGFuZ2UodmFsKTtcclxuICB9XHJcblxyXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgY2hhbmdlRGV0ZWN0b3I6IENoYW5nZURldGVjdG9yUmVmKSB7fVxyXG5cclxuICByZWdpc3Rlck9uQ2hhbmdlKGZuOiBhbnkpIHtcclxuICAgIHRoaXMub25DaGFuZ2UgPSBmbjtcclxuICB9XHJcblxyXG4gIHJlZ2lzdGVyT25Ub3VjaGVkKGZuOiBhbnkpIHtcclxuICAgIHRoaXMub25Ub3VjaGVkID0gZm47XHJcbiAgfVxyXG5cclxuICB3cml0ZVZhbHVlKHZhbDogYW55KSB7XHJcbiAgICB0aGlzLl92YWx1ZSA9IHZhbDtcclxuICAgIHRoaXMuY2hhbmdlRGV0ZWN0b3IuZGV0ZWN0Q2hhbmdlcygpO1xyXG4gIH1cclxuXHJcbiAgc2V0RGlzYWJsZWRTdGF0ZSh2YWw6IGJvb2xlYW4pIHtcclxuICAgIHRoaXMuZGlzYWJsZWQgPSBjb252ZXJ0VG9Cb29sUHJvcGVydHkodmFsKTtcclxuICB9XHJcblxyXG4gIHNldFRvdWNoZWQoKSB7XHJcbiAgICB0aGlzLm9uVG91Y2hlZCgpO1xyXG4gIH1cclxufVxyXG4iXX0=