theme-lib
Version:
This is a simple example Angular Library published to npm.
176 lines • 12.7 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 } from '@angular/core';
import { NbLayoutDirectionService } from '../../services/direction.service';
/*
* Badge is a simple labeling component.
* It can be used to add additional information to any content or highlight unread items.
*
* Element is absolute positioned, so parent should be
* [positioned element](https://developer.mozilla.org/en-US/docs/Web/CSS/position).
* It means parent `position` should be set to anything except `static`, e.g. `relative`,
* `absolute`, `fixed`, or `sticky`.
*
* ### Installation
*
* Import `NbBadgeModule` to your feature module.
* ```ts
* @NgModule({
* imports: [
* // ...
* NbBadgeModule,
* ],
* })
* export class PageModule { }
* ```
* ### Usage
*
* Badge with default position and status(color):
*
* ```html
* <nb-badge text="badgeText"></nb-badge>
* ```
*
* For example, badge can be placed into nb-card header:
* @stacked-example(Showcase, badge/badge-showcase.component)
*
* Badge located on the bottom right with warning status:
*
* ```html
* <nb-badge text="badgeText" status="warning" position="bottom right">
* </nb-badge>
* ```
*
* @styles
*
* badge-fg-text:
* badge-primary-bg-color:
* badge-success-bg-color:
* badge-info-bg-color:
* badge-warning-bg-color:
* badge-danger-bg-color:
*/
export class NbBadgeComponent {
/**
* @param {?} layoutDirectionService
*/
constructor(layoutDirectionService) {
this.layoutDirectionService = layoutDirectionService;
this.colorClass = NbBadgeComponent.STATUS_PRIMARY;
/*
* Text to display
* @type string
*/
this.text = '';
}
/*
* Badge status (adds specific styles):
* 'primary', 'info', 'success', 'warning', 'danger'
* @param {string} val
* @type string
*/
/**
* @param {?} value
* @return {?}
*/
set status(value) {
if (value) {
this.colorClass = value;
}
}
/**
* @return {?}
*/
get positionClass() {
if (!this.position) {
return NbBadgeComponent.TOP_RIGHT;
}
/** @type {?} */
const isLtr = this.layoutDirectionService.isLtr();
/** @type {?} */
const startValue = isLtr ? 'left' : 'right';
/** @type {?} */
const endValue = isLtr ? 'right' : 'left';
return this.position
.replace(/\bstart\b/, startValue)
.replace(/\bend\b/, endValue);
}
}
NbBadgeComponent.TOP_LEFT = 'top left';
NbBadgeComponent.TOP_RIGHT = 'top right';
NbBadgeComponent.BOTTOM_LEFT = 'bottom left';
NbBadgeComponent.BOTTOM_RIGHT = 'bottom right';
NbBadgeComponent.TOP_START = 'top start';
NbBadgeComponent.TOP_END = 'top end';
NbBadgeComponent.BOTTOM_START = 'bottom start';
NbBadgeComponent.BOTTOM_END = 'bottom end';
NbBadgeComponent.STATUS_PRIMARY = 'primary';
NbBadgeComponent.STATUS_INFO = 'info';
NbBadgeComponent.STATUS_SUCCESS = 'success';
NbBadgeComponent.STATUS_WARNING = 'warning';
NbBadgeComponent.STATUS_DANGER = 'danger';
NbBadgeComponent.decorators = [
{ type: Component, args: [{
selector: 'nb-badge',
template: `
<span class="nb-badge {{positionClass}} nb-badge-{{colorClass}}">{{text}}</span>
`,
styles: [":host .nb-badge{position:absolute;padding:.25em .4em;font-size:75%;font-weight:700;line-height:1;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25rem}:host .nb-badge.top{top:0}:host .nb-badge.right{right:0}:host .nb-badge.bottom{bottom:0}:host .nb-badge.left{left:0}"]
}] }
];
/** @nocollapse */
NbBadgeComponent.ctorParameters = () => [
{ type: NbLayoutDirectionService }
];
NbBadgeComponent.propDecorators = {
text: [{ type: Input }],
position: [{ type: Input }],
status: [{ type: Input }]
};
if (false) {
/** @type {?} */
NbBadgeComponent.TOP_LEFT;
/** @type {?} */
NbBadgeComponent.TOP_RIGHT;
/** @type {?} */
NbBadgeComponent.BOTTOM_LEFT;
/** @type {?} */
NbBadgeComponent.BOTTOM_RIGHT;
/** @type {?} */
NbBadgeComponent.TOP_START;
/** @type {?} */
NbBadgeComponent.TOP_END;
/** @type {?} */
NbBadgeComponent.BOTTOM_START;
/** @type {?} */
NbBadgeComponent.BOTTOM_END;
/** @type {?} */
NbBadgeComponent.STATUS_PRIMARY;
/** @type {?} */
NbBadgeComponent.STATUS_INFO;
/** @type {?} */
NbBadgeComponent.STATUS_SUCCESS;
/** @type {?} */
NbBadgeComponent.STATUS_WARNING;
/** @type {?} */
NbBadgeComponent.STATUS_DANGER;
/** @type {?} */
NbBadgeComponent.prototype.colorClass;
/** @type {?} */
NbBadgeComponent.prototype.text;
/** @type {?} */
NbBadgeComponent.prototype.position;
/**
* @type {?}
* @private
*/
NbBadgeComponent.prototype.layoutDirectionService;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmFkZ2UuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vdGhlbWUtbGliLyIsInNvdXJjZXMiOlsibGliL2NvbXBvbmVudHMvYmFkZ2UvYmFkZ2UuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7OztBQU1BLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ2pELE9BQU8sRUFBRSx3QkFBd0IsRUFBRSxNQUFNLGtDQUFrQyxDQUFDOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBeUQ1RSxNQUFNLE9BQU8sZ0JBQWdCOzs7O0lBNEQzQixZQUFvQixzQkFBZ0Q7UUFBaEQsMkJBQXNCLEdBQXRCLHNCQUFzQixDQUEwQjtRQTNDcEUsZUFBVSxHQUFXLGdCQUFnQixDQUFDLGNBQWMsQ0FBQzs7Ozs7UUFNNUMsU0FBSSxHQUFXLEVBQUUsQ0FBQztJQXFDNEMsQ0FBQzs7Ozs7Ozs7Ozs7SUFuQnhFLElBQWEsTUFBTSxDQUFDLEtBQUs7UUFDdkIsSUFBSSxLQUFLLEVBQUU7WUFDVCxJQUFJLENBQUMsVUFBVSxHQUFHLEtBQUssQ0FBQztTQUN6QjtJQUNILENBQUM7Ozs7SUFFRCxJQUFJLGFBQWE7UUFDZixJQUFJLENBQUMsSUFBSSxDQUFDLFFBQVEsRUFBRTtZQUNsQixPQUFPLGdCQUFnQixDQUFDLFNBQVMsQ0FBQztTQUNuQzs7Y0FFSyxLQUFLLEdBQUcsSUFBSSxDQUFDLHNCQUFzQixDQUFDLEtBQUssRUFBRTs7Y0FDM0MsVUFBVSxHQUFHLEtBQUssQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxPQUFPOztjQUNyQyxRQUFRLEdBQUcsS0FBSyxDQUFDLENBQUMsQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLE1BQU07UUFDekMsT0FBTyxJQUFJLENBQUMsUUFBUTthQUNqQixPQUFPLENBQUMsV0FBVyxFQUFFLFVBQVUsQ0FBQzthQUNoQyxPQUFPLENBQUMsU0FBUyxFQUFFLFFBQVEsQ0FBQyxDQUFDO0lBQ2xDLENBQUM7O0FBekRlLHlCQUFRLEdBQUcsVUFBVSxDQUFDO0FBQ3RCLDBCQUFTLEdBQUcsV0FBVyxDQUFDO0FBQ3hCLDRCQUFXLEdBQUcsYUFBYSxDQUFDO0FBQzVCLDZCQUFZLEdBQUcsY0FBYyxDQUFDO0FBRTlCLDBCQUFTLEdBQUcsV0FBVyxDQUFDO0FBQ3hCLHdCQUFPLEdBQUcsU0FBUyxDQUFDO0FBQ3BCLDZCQUFZLEdBQUcsY0FBYyxDQUFDO0FBQzlCLDJCQUFVLEdBQUcsWUFBWSxDQUFDO0FBRTFCLCtCQUFjLEdBQUcsU0FBUyxDQUFDO0FBQzNCLDRCQUFXLEdBQUcsTUFBTSxDQUFDO0FBQ3JCLCtCQUFjLEdBQUcsU0FBUyxDQUFDO0FBQzNCLCtCQUFjLEdBQUcsU0FBUyxDQUFDO0FBQzNCLDhCQUFhLEdBQUcsUUFBUSxDQUFDOztZQXRCMUMsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxVQUFVO2dCQUVwQixRQUFRLEVBQUU7O0dBRVQ7O2FBQ0Y7Ozs7WUF4RFEsd0JBQXdCOzs7bUJBZ0Y5QixLQUFLO3VCQVVMLEtBQUs7cUJBUUwsS0FBSzs7OztJQXhDTiwwQkFBc0M7O0lBQ3RDLDJCQUF3Qzs7SUFDeEMsNkJBQTRDOztJQUM1Qyw4QkFBOEM7O0lBRTlDLDJCQUF3Qzs7SUFDeEMseUJBQW9DOztJQUNwQyw4QkFBOEM7O0lBQzlDLDRCQUEwQzs7SUFFMUMsZ0NBQTJDOztJQUMzQyw2QkFBcUM7O0lBQ3JDLGdDQUEyQzs7SUFDM0MsZ0NBQTJDOztJQUMzQywrQkFBeUM7O0lBRXpDLHNDQUFxRDs7SUFNckQsZ0NBQTJCOztJQVUzQixvQ0FBMEI7Ozs7O0lBMkJkLGtEQUF3RCIsInNvdXJjZXNDb250ZW50IjpbIi8qXHJcbiAqIEBsaWNlbnNlXHJcbiAqIENvcHlyaWdodCBBa3Zlby4gQWxsIFJpZ2h0cyBSZXNlcnZlZC5cclxuICogTGljZW5zZWQgdW5kZXIgdGhlIE1JVCBMaWNlbnNlLiBTZWUgTGljZW5zZS50eHQgaW4gdGhlIHByb2plY3Qgcm9vdCBmb3IgbGljZW5zZSBpbmZvcm1hdGlvbi5cclxuICovXHJcblxyXG5pbXBvcnQgeyBDb21wb25lbnQsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IE5iTGF5b3V0RGlyZWN0aW9uU2VydmljZSB9IGZyb20gJy4uLy4uL3NlcnZpY2VzL2RpcmVjdGlvbi5zZXJ2aWNlJztcclxuXHJcbi8qXHJcbiAqIEJhZGdlIGlzIGEgc2ltcGxlIGxhYmVsaW5nIGNvbXBvbmVudC5cclxuICogSXQgY2FuIGJlIHVzZWQgdG8gYWRkIGFkZGl0aW9uYWwgaW5mb3JtYXRpb24gdG8gYW55IGNvbnRlbnQgb3IgaGlnaGxpZ2h0IHVucmVhZCBpdGVtcy5cclxuICpcclxuICogRWxlbWVudCBpcyBhYnNvbHV0ZSBwb3NpdGlvbmVkLCBzbyBwYXJlbnQgc2hvdWxkIGJlXHJcbiAqIFtwb3NpdGlvbmVkIGVsZW1lbnRdKGh0dHBzOi8vZGV2ZWxvcGVyLm1vemlsbGEub3JnL2VuLVVTL2RvY3MvV2ViL0NTUy9wb3NpdGlvbikuXHJcbiAqIEl0IG1lYW5zIHBhcmVudCBgcG9zaXRpb25gIHNob3VsZCBiZSBzZXQgdG8gYW55dGhpbmcgZXhjZXB0IGBzdGF0aWNgLCBlLmcuIGByZWxhdGl2ZWAsXHJcbiAqIGBhYnNvbHV0ZWAsIGBmaXhlZGAsIG9yIGBzdGlja3lgLlxyXG4gKlxyXG4gKiAjIyMgSW5zdGFsbGF0aW9uXHJcbiAqXHJcbiAqIEltcG9ydCBgTmJCYWRnZU1vZHVsZWAgdG8geW91ciBmZWF0dXJlIG1vZHVsZS5cclxuICogYGBgdHNcclxuICogQE5nTW9kdWxlKHtcclxuICogICBpbXBvcnRzOiBbXHJcbiAqICAgXHQvLyAuLi5cclxuICogICAgIE5iQmFkZ2VNb2R1bGUsXHJcbiAqICAgXSxcclxuICogfSlcclxuICogZXhwb3J0IGNsYXNzIFBhZ2VNb2R1bGUgeyB9XHJcbiAqIGBgYFxyXG4gKiAjIyMgVXNhZ2VcclxuICpcclxuICogQmFkZ2Ugd2l0aCBkZWZhdWx0IHBvc2l0aW9uIGFuZCBzdGF0dXMoY29sb3IpOlxyXG4gKlxyXG4gKiBgYGBodG1sXHJcbiAqIDxuYi1iYWRnZSB0ZXh0PVwiYmFkZ2VUZXh0XCI+PC9uYi1iYWRnZT5cclxuICogYGBgXHJcbiAqXHJcbiAqIEZvciBleGFtcGxlLCBiYWRnZSBjYW4gYmUgcGxhY2VkIGludG8gbmItY2FyZCBoZWFkZXI6XHJcbiAqIEBzdGFja2VkLWV4YW1wbGUoU2hvd2Nhc2UsIGJhZGdlL2JhZGdlLXNob3djYXNlLmNvbXBvbmVudClcclxuICpcclxuICogQmFkZ2UgbG9jYXRlZCBvbiB0aGUgYm90dG9tIHJpZ2h0IHdpdGggd2FybmluZyBzdGF0dXM6XHJcbiAqXHJcbiAqIGBgYGh0bWxcclxuICogPG5iLWJhZGdlIHRleHQ9XCJiYWRnZVRleHRcIiBzdGF0dXM9XCJ3YXJuaW5nXCIgcG9zaXRpb249XCJib3R0b20gcmlnaHRcIj5cclxuICogPC9uYi1iYWRnZT5cclxuICogYGBgXHJcbiAqXHJcbiAqIEBzdHlsZXNcclxuICpcclxuICogYmFkZ2UtZmctdGV4dDpcclxuICogYmFkZ2UtcHJpbWFyeS1iZy1jb2xvcjpcclxuICogYmFkZ2Utc3VjY2Vzcy1iZy1jb2xvcjpcclxuICogYmFkZ2UtaW5mby1iZy1jb2xvcjpcclxuICogYmFkZ2Utd2FybmluZy1iZy1jb2xvcjpcclxuICogYmFkZ2UtZGFuZ2VyLWJnLWNvbG9yOlxyXG4gKi9cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICduYi1iYWRnZScsXHJcbiAgc3R5bGVVcmxzOiBbJy4vYmFkZ2UuY29tcG9uZW50LnNjc3MnXSxcclxuICB0ZW1wbGF0ZTogYFxyXG4gICAgPHNwYW4gY2xhc3M9XCJuYi1iYWRnZSB7e3Bvc2l0aW9uQ2xhc3N9fSBuYi1iYWRnZS17e2NvbG9yQ2xhc3N9fVwiPnt7dGV4dH19PC9zcGFuPlxyXG4gIGAsXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBOYkJhZGdlQ29tcG9uZW50IHtcclxuICBzdGF0aWMgcmVhZG9ubHkgVE9QX0xFRlQgPSAndG9wIGxlZnQnO1xyXG4gIHN0YXRpYyByZWFkb25seSBUT1BfUklHSFQgPSAndG9wIHJpZ2h0JztcclxuICBzdGF0aWMgcmVhZG9ubHkgQk9UVE9NX0xFRlQgPSAnYm90dG9tIGxlZnQnO1xyXG4gIHN0YXRpYyByZWFkb25seSBCT1RUT01fUklHSFQgPSAnYm90dG9tIHJpZ2h0JztcclxuXHJcbiAgc3RhdGljIHJlYWRvbmx5IFRPUF9TVEFSVCA9ICd0b3Agc3RhcnQnO1xyXG4gIHN0YXRpYyByZWFkb25seSBUT1BfRU5EID0gJ3RvcCBlbmQnO1xyXG4gIHN0YXRpYyByZWFkb25seSBCT1RUT01fU1RBUlQgPSAnYm90dG9tIHN0YXJ0JztcclxuICBzdGF0aWMgcmVhZG9ubHkgQk9UVE9NX0VORCA9ICdib3R0b20gZW5kJztcclxuXHJcbiAgc3RhdGljIHJlYWRvbmx5IFNUQVRVU19QUklNQVJZID0gJ3ByaW1hcnknO1xyXG4gIHN0YXRpYyByZWFkb25seSBTVEFUVVNfSU5GTyA9ICdpbmZvJztcclxuICBzdGF0aWMgcmVhZG9ubHkgU1RBVFVTX1NVQ0NFU1MgPSAnc3VjY2Vzcyc7XHJcbiAgc3RhdGljIHJlYWRvbmx5IFNUQVRVU19XQVJOSU5HID0gJ3dhcm5pbmcnO1xyXG4gIHN0YXRpYyByZWFkb25seSBTVEFUVVNfREFOR0VSID0gJ2Rhbmdlcic7XHJcblxyXG4gIGNvbG9yQ2xhc3M6IHN0cmluZyA9IE5iQmFkZ2VDb21wb25lbnQuU1RBVFVTX1BSSU1BUlk7XHJcblxyXG4gIC8qXHJcbiAgICogVGV4dCB0byBkaXNwbGF5XHJcbiAgICogQHR5cGUgc3RyaW5nXHJcbiAgICovXHJcbiAgQElucHV0KCkgdGV4dDogc3RyaW5nID0gJyc7XHJcblxyXG4gIC8qXHJcbiAgICogQmFkZ2UgcG9zaXRpb25cclxuICAgKlxyXG4gICAqIENhbiBiZSBzZXQgdG8gYW55IGNsYXNzIG9yIHRvIG9uZSBvZiBwcmVkZWZpbmVkIHBvc2l0aW9uczpcclxuICAgKiAndG9wIGxlZnQnLCAndG9wIHJpZ2h0JywgJ2JvdHRvbSBsZWZ0JywgJ2JvdHRvbSByaWdodCcsXHJcbiAgICogJ3RvcCBzdGFydCcsICd0b3AgZW5kJywgJ2JvdHRvbSBzdGFydCcsICdib3R0b20gZW5kJ1xyXG4gICAqIEB0eXBlIHN0cmluZ1xyXG4gICAqL1xyXG4gIEBJbnB1dCgpIHBvc2l0aW9uOiBzdHJpbmc7XHJcblxyXG4gIC8qXHJcbiAgICogQmFkZ2Ugc3RhdHVzIChhZGRzIHNwZWNpZmljIHN0eWxlcyk6XHJcbiAgICogJ3ByaW1hcnknLCAnaW5mbycsICdzdWNjZXNzJywgJ3dhcm5pbmcnLCAnZGFuZ2VyJ1xyXG4gICAqIEBwYXJhbSB7c3RyaW5nfSB2YWxcclxuICAgKiBAdHlwZSBzdHJpbmdcclxuICAgKi9cclxuICBASW5wdXQoKSBzZXQgc3RhdHVzKHZhbHVlKSB7XHJcbiAgICBpZiAodmFsdWUpIHtcclxuICAgICAgdGhpcy5jb2xvckNsYXNzID0gdmFsdWU7XHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICBnZXQgcG9zaXRpb25DbGFzcygpIHtcclxuICAgIGlmICghdGhpcy5wb3NpdGlvbikge1xyXG4gICAgICByZXR1cm4gTmJCYWRnZUNvbXBvbmVudC5UT1BfUklHSFQ7XHJcbiAgICB9XHJcblxyXG4gICAgY29uc3QgaXNMdHIgPSB0aGlzLmxheW91dERpcmVjdGlvblNlcnZpY2UuaXNMdHIoKTtcclxuICAgIGNvbnN0IHN0YXJ0VmFsdWUgPSBpc0x0ciA/ICdsZWZ0JyA6ICdyaWdodCc7XHJcbiAgICBjb25zdCBlbmRWYWx1ZSA9IGlzTHRyID8gJ3JpZ2h0JyA6ICdsZWZ0JztcclxuICAgIHJldHVybiB0aGlzLnBvc2l0aW9uXHJcbiAgICAgIC5yZXBsYWNlKC9cXGJzdGFydFxcYi8sIHN0YXJ0VmFsdWUpXHJcbiAgICAgIC5yZXBsYWNlKC9cXGJlbmRcXGIvLCBlbmRWYWx1ZSk7XHJcbiAgfVxyXG5cclxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGxheW91dERpcmVjdGlvblNlcnZpY2U6IE5iTGF5b3V0RGlyZWN0aW9uU2VydmljZSkge31cclxufVxyXG4iXX0=