@visa/nova-angular
Version:
Visa Product Design System Nova Angular library
143 lines • 13.4 kB
JavaScript
/**
* © 2025 Visa
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
**/
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { Directive, HostBinding, Input } from '@angular/core';
import { UUIDService } from '../_utilities/services/uuid.service';
import * as i0 from "@angular/core";
import * as i1 from "../_utilities/services/uuid.service";
export const BadgeType = {
DEFAULT: 'default',
NEUTRAL: 'neutral',
CRITICAL: 'critical',
NEGATIVE: 'negative',
STABLE: 'stable',
WARNING: 'warning',
SUBTLE: 'subtle',
NUMBER: 'number',
ACTIVE: 'active'
};
export class BadgeDirective {
/**
* Sets badge type.
* @default 'default' | BadgeType.DEFAULT
* @options 'default' | BadgeType.DEFAULT | <br> 'neutral' | BadgeType.NEUTRAL | <br> 'critical' | BadgeType.CRITICAL | <br> 'stable' | BadgeType.STABLE | <br> 'warning' | BadgeType.WARNING | <br> 'subtle' | BadgeType.SUBTLE | <br> 'number' | BadgeType.NUMBER
*/
get badgeType() {
return this._badgeType;
}
set badgeType(value) {
this._badgeType = value;
}
/**
* Provides custom class(es) for custom styling.
* @default .v-badge
*/
get class() {
return [
this._class,
this.badgeType && this.badgeType != 'default'
? this.badgeType === BadgeType.NEGATIVE
? 'v-badge-critical'
: `v-badge-${this.badgeType}`
: '',
this.number ? 'v-badge-number' : '',
this.noBackground ? 'v-badge-clear' : '',
this.icon ? 'v-badge-icon' : ''
].join(' ');
}
set class(value) {
this._class = value;
}
get hostClass() {
return this.class;
}
get hostId() {
return this.id;
}
constructor(uuidService) {
this.uuidService = uuidService;
this._badgeType = BadgeType.DEFAULT;
this._class = 'v-badge';
/**
* Sets custom id.
* @default uuidService.getUUID('v-badge-')
* @builtin true
*/
this.id = this.uuidService.getUUID('v-badge-');
this._number = false;
this._icon = false;
this._noBackground = false;
}
/**
* Sets badge to number variant when true. <br />
* Using this flag rather than <code>badgeType="number"</code> allows for number badges with other badge types.
* @default false
*/
get number() {
return this._number;
}
set number(value) {
this._number = coerceBooleanProperty(value);
}
/**
* Whether or not badge contains an icon.
* @default false
*/
get icon() {
return this._icon;
}
set icon(value) {
this._icon = coerceBooleanProperty(value);
}
/**
* Removes background color from badge when true.
*/
get noBackground() {
return this._noBackground;
}
set noBackground(value) {
this._noBackground = coerceBooleanProperty(value);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BadgeDirective, deps: [{ token: i1.UUIDService }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: BadgeDirective, isStandalone: true, selector: "[v-badge]", inputs: { badgeType: "badgeType", class: "class", id: "id", number: "number", icon: "icon", noBackground: "noBackground" }, host: { properties: { "class": "this.hostClass", "attr.id": "this.hostId" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BadgeDirective, decorators: [{
type: Directive,
args: [{
standalone: true,
selector: '[v-badge]'
}]
}], ctorParameters: () => [{ type: i1.UUIDService }], propDecorators: { badgeType: [{
type: Input
}], class: [{
type: Input
}], hostClass: [{
type: HostBinding,
args: ['class']
}], id: [{
type: Input
}], hostId: [{
type: HostBinding,
args: ['attr.id']
}], number: [{
type: Input
}], icon: [{
type: Input
}], noBackground: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmFkZ2UuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9ub3ZhLWxpYi9zcmMvbGliL2JhZGdlL2JhZGdlLmRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7Ozs7Ozs7Ozs7O0lBZUk7QUFDSixPQUFPLEVBQWdCLHFCQUFxQixFQUFFLE1BQU0sdUJBQXVCLENBQUM7QUFDNUUsT0FBTyxFQUFFLFNBQVMsRUFBRSxXQUFXLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzlELE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxxQ0FBcUMsQ0FBQzs7O0FBRWxFLE1BQU0sQ0FBQyxNQUFNLFNBQVMsR0FBRztJQUN2QixPQUFPLEVBQUUsU0FBUztJQUNsQixPQUFPLEVBQUUsU0FBUztJQUNsQixRQUFRLEVBQUUsVUFBVTtJQUNwQixRQUFRLEVBQUUsVUFBVTtJQUNwQixNQUFNLEVBQUUsUUFBUTtJQUNoQixPQUFPLEVBQUUsU0FBUztJQUNsQixNQUFNLEVBQUUsUUFBUTtJQUNoQixNQUFNLEVBQUUsUUFBUTtJQUNoQixNQUFNLEVBQUUsUUFBUTtDQUNSLENBQUM7QUFPWCxNQUFNLE9BQU8sY0FBYztJQUN6Qjs7OztPQUlHO0lBQ0gsSUFDSSxTQUFTO1FBQ1gsT0FBTyxJQUFJLENBQUMsVUFBVSxDQUFDO0lBQ3pCLENBQUM7SUFDRCxJQUFJLFNBQVMsQ0FBQyxLQUFnQjtRQUM1QixJQUFJLENBQUMsVUFBVSxHQUFHLEtBQUssQ0FBQztJQUMxQixDQUFDO0lBR0Q7OztPQUdHO0lBQ0gsSUFDSSxLQUFLO1FBQ1AsT0FBTztZQUNMLElBQUksQ0FBQyxNQUFNO1lBQ1gsSUFBSSxDQUFDLFNBQVMsSUFBSSxJQUFJLENBQUMsU0FBUyxJQUFJLFNBQVM7Z0JBQzNDLENBQUMsQ0FBQyxJQUFJLENBQUMsU0FBUyxLQUFLLFNBQVMsQ0FBQyxRQUFRO29CQUNyQyxDQUFDLENBQUMsa0JBQWtCO29CQUNwQixDQUFDLENBQUMsV0FBVyxJQUFJLENBQUMsU0FBUyxFQUFFO2dCQUMvQixDQUFDLENBQUMsRUFBRTtZQUNOLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLGdCQUFnQixDQUFDLENBQUMsQ0FBQyxFQUFFO1lBQ25DLElBQUksQ0FBQyxZQUFZLENBQUMsQ0FBQyxDQUFDLGVBQWUsQ0FBQyxDQUFDLENBQUMsRUFBRTtZQUN4QyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxjQUFjLENBQUMsQ0FBQyxDQUFDLEVBQUU7U0FDaEMsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUM7SUFDZCxDQUFDO0lBQ0QsSUFBSSxLQUFLLENBQUMsS0FBYTtRQUNyQixJQUFJLENBQUMsTUFBTSxHQUFHLEtBQUssQ0FBQztJQUN0QixDQUFDO0lBRUQsSUFDSSxTQUFTO1FBQ1gsT0FBTyxJQUFJLENBQUMsS0FBSyxDQUFDO0lBQ3BCLENBQUM7SUFTRCxJQUNJLE1BQU07UUFDUixPQUFPLElBQUksQ0FBQyxFQUFFLENBQUM7SUFDakIsQ0FBQztJQUVELFlBQW9CLFdBQXdCO1FBQXhCLGdCQUFXLEdBQVgsV0FBVyxDQUFhO1FBekM1QyxlQUFVLEdBQWMsU0FBUyxDQUFDLE9BQU8sQ0FBQztRQXVCMUMsV0FBTSxHQUFXLFNBQVMsQ0FBQztRQU0zQjs7OztXQUlHO1FBRUgsT0FBRSxHQUFXLElBQUksQ0FBQyxXQUFXLENBQUMsT0FBTyxDQUFDLFVBQVUsQ0FBQyxDQUFDO1FBb0JsRCxZQUFPLEdBQVksS0FBSyxDQUFDO1FBYXpCLFVBQUssR0FBWSxLQUFLLENBQUM7UUFZdkIsa0JBQWEsR0FBWSxLQUFLLENBQUM7SUF2Q2dCLENBQUM7SUFFaEQ7Ozs7T0FJRztJQUNILElBQ0ksTUFBTTtRQUNSLE9BQU8sSUFBSSxDQUFDLE9BQU8sQ0FBQztJQUN0QixDQUFDO0lBQ0QsSUFBSSxNQUFNLENBQUMsS0FBbUI7UUFDNUIsSUFBSSxDQUFDLE9BQU8sR0FBRyxxQkFBcUIsQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUM5QyxDQUFDO0lBR0Q7OztPQUdHO0lBQ0gsSUFDSSxJQUFJO1FBQ04sT0FBTyxJQUFJLENBQUMsS0FBSyxDQUFDO0lBQ3BCLENBQUM7SUFDRCxJQUFJLElBQUksQ0FBQyxLQUFtQjtRQUMxQixJQUFJLENBQUMsS0FBSyxHQUFHLHFCQUFxQixDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQzVDLENBQUM7SUFHRDs7T0FFRztJQUNILElBQ0ksWUFBWTtRQUNkLE9BQU8sSUFBSSxDQUFDLGFBQWEsQ0FBQztJQUM1QixDQUFDO0lBQ0QsSUFBSSxZQUFZLENBQUMsS0FBbUI7UUFDbEMsSUFBSSxDQUFDLGFBQWEsR0FBRyxxQkFBcUIsQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUNwRCxDQUFDOytHQTVGVSxjQUFjO21HQUFkLGNBQWM7OzRGQUFkLGNBQWM7a0JBSjFCLFNBQVM7bUJBQUM7b0JBQ1QsVUFBVSxFQUFFLElBQUk7b0JBQ2hCLFFBQVEsRUFBRSxXQUFXO2lCQUN0QjtnRkFRSyxTQUFTO3NCQURaLEtBQUs7Z0JBY0YsS0FBSztzQkFEUixLQUFLO2dCQW1CRixTQUFTO3NCQURaLFdBQVc7dUJBQUMsT0FBTztnQkFXcEIsRUFBRTtzQkFERCxLQUFLO2dCQUdGLE1BQU07c0JBRFQsV0FBVzt1QkFBQyxTQUFTO2dCQWFsQixNQUFNO3NCQURULEtBQUs7Z0JBY0YsSUFBSTtzQkFEUCxLQUFLO2dCQWFGLFlBQVk7c0JBRGYsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogICAgICAgICAgICAgIMKpIDIwMjUgVmlzYVxuICpcbiAqIExpY2Vuc2VkIHVuZGVyIHRoZSBBcGFjaGUgTGljZW5zZSwgVmVyc2lvbiAyLjAgKHRoZSBcIkxpY2Vuc2VcIik7XG4gKiB5b3UgbWF5IG5vdCB1c2UgdGhpcyBmaWxlIGV4Y2VwdCBpbiBjb21wbGlhbmNlIHdpdGggdGhlIExpY2Vuc2UuXG4gKiBZb3UgbWF5IG9idGFpbiBhIGNvcHkgb2YgdGhlIExpY2Vuc2UgYXRcbiAqXG4gKiAgICAgICAgIGh0dHA6Ly93d3cuYXBhY2hlLm9yZy9saWNlbnNlcy9MSUNFTlNFLTIuMFxuICpcbiAqIFVubGVzcyByZXF1aXJlZCBieSBhcHBsaWNhYmxlIGxhdyBvciBhZ3JlZWQgdG8gaW4gd3JpdGluZywgc29mdHdhcmVcbiAqIGRpc3RyaWJ1dGVkIHVuZGVyIHRoZSBMaWNlbnNlIGlzIGRpc3RyaWJ1dGVkIG9uIGFuIFwiQVMgSVNcIiBCQVNJUyxcbiAqIFdJVEhPVVQgV0FSUkFOVElFUyBPUiBDT05ESVRJT05TIE9GIEFOWSBLSU5ELCBlaXRoZXIgZXhwcmVzcyBvciBpbXBsaWVkLlxuICogU2VlIHRoZSBMaWNlbnNlIGZvciB0aGUgc3BlY2lmaWMgbGFuZ3VhZ2UgZ292ZXJuaW5nIHBlcm1pc3Npb25zIGFuZFxuICogbGltaXRhdGlvbnMgdW5kZXIgdGhlIExpY2Vuc2UuXG4gKlxuICoqL1xuaW1wb3J0IHsgQm9vbGVhbklucHV0LCBjb2VyY2VCb29sZWFuUHJvcGVydHkgfSBmcm9tICdAYW5ndWxhci9jZGsvY29lcmNpb24nO1xuaW1wb3J0IHsgRGlyZWN0aXZlLCBIb3N0QmluZGluZywgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFVVSURTZXJ2aWNlIH0gZnJvbSAnLi4vX3V0aWxpdGllcy9zZXJ2aWNlcy91dWlkLnNlcnZpY2UnO1xuXG5leHBvcnQgY29uc3QgQmFkZ2VUeXBlID0ge1xuICBERUZBVUxUOiAnZGVmYXVsdCcsXG4gIE5FVVRSQUw6ICduZXV0cmFsJyxcbiAgQ1JJVElDQUw6ICdjcml0aWNhbCcsXG4gIE5FR0FUSVZFOiAnbmVnYXRpdmUnLFxuICBTVEFCTEU6ICdzdGFibGUnLFxuICBXQVJOSU5HOiAnd2FybmluZycsXG4gIFNVQlRMRTogJ3N1YnRsZScsXG4gIE5VTUJFUjogJ251bWJlcicsXG4gIEFDVElWRTogJ2FjdGl2ZSdcbn0gYXMgY29uc3Q7XG5cbmV4cG9ydCB0eXBlIEJhZGdlVHlwZSA9ICh0eXBlb2YgQmFkZ2VUeXBlKVtrZXlvZiB0eXBlb2YgQmFkZ2VUeXBlXTtcbkBEaXJlY3RpdmUoe1xuICBzdGFuZGFsb25lOiB0cnVlLFxuICBzZWxlY3RvcjogJ1t2LWJhZGdlXSdcbn0pXG5leHBvcnQgY2xhc3MgQmFkZ2VEaXJlY3RpdmUge1xuICAvKipcbiAgICogU2V0cyBiYWRnZSB0eXBlLlxuICAgKiBAZGVmYXVsdCAnZGVmYXVsdCcgfCBCYWRnZVR5cGUuREVGQVVMVFxuICAgKiBAb3B0aW9ucyAnZGVmYXVsdCcgfCBCYWRnZVR5cGUuREVGQVVMVCB8IDxicj4gJ25ldXRyYWwnIHwgQmFkZ2VUeXBlLk5FVVRSQUwgfCA8YnI+ICdjcml0aWNhbCcgfCBCYWRnZVR5cGUuQ1JJVElDQUwgfCA8YnI+ICdzdGFibGUnIHwgQmFkZ2VUeXBlLlNUQUJMRSB8IDxicj4gJ3dhcm5pbmcnIHwgQmFkZ2VUeXBlLldBUk5JTkcgfCA8YnI+ICdzdWJ0bGUnIHwgQmFkZ2VUeXBlLlNVQlRMRSB8IDxicj4gJ251bWJlcicgfCBCYWRnZVR5cGUuTlVNQkVSXG4gICAqL1xuICBASW5wdXQoKVxuICBnZXQgYmFkZ2VUeXBlKCk6IEJhZGdlVHlwZSB7XG4gICAgcmV0dXJuIHRoaXMuX2JhZGdlVHlwZTtcbiAgfVxuICBzZXQgYmFkZ2VUeXBlKHZhbHVlOiBCYWRnZVR5cGUpIHtcbiAgICB0aGlzLl9iYWRnZVR5cGUgPSB2YWx1ZTtcbiAgfVxuICBfYmFkZ2VUeXBlOiBCYWRnZVR5cGUgPSBCYWRnZVR5cGUuREVGQVVMVDtcblxuICAvKipcbiAgICogUHJvdmlkZXMgY3VzdG9tIGNsYXNzJiM0MDtlcyYjNDE7IGZvciBjdXN0b20gc3R5bGluZy5cbiAgICogQGRlZmF1bHQgLnYtYmFkZ2VcbiAgICovXG4gIEBJbnB1dCgpXG4gIGdldCBjbGFzcygpOiBzdHJpbmcge1xuICAgIHJldHVybiBbXG4gICAgICB0aGlzLl9jbGFzcyxcbiAgICAgIHRoaXMuYmFkZ2VUeXBlICYmIHRoaXMuYmFkZ2VUeXBlICE9ICdkZWZhdWx0J1xuICAgICAgICA/IHRoaXMuYmFkZ2VUeXBlID09PSBCYWRnZVR5cGUuTkVHQVRJVkVcbiAgICAgICAgICA/ICd2LWJhZGdlLWNyaXRpY2FsJ1xuICAgICAgICAgIDogYHYtYmFkZ2UtJHt0aGlzLmJhZGdlVHlwZX1gXG4gICAgICAgIDogJycsXG4gICAgICB0aGlzLm51bWJlciA/ICd2LWJhZGdlLW51bWJlcicgOiAnJyxcbiAgICAgIHRoaXMubm9CYWNrZ3JvdW5kID8gJ3YtYmFkZ2UtY2xlYXInIDogJycsXG4gICAgICB0aGlzLmljb24gPyAndi1iYWRnZS1pY29uJyA6ICcnXG4gICAgXS5qb2luKCcgJyk7XG4gIH1cbiAgc2V0IGNsYXNzKHZhbHVlOiBzdHJpbmcpIHtcbiAgICB0aGlzLl9jbGFzcyA9IHZhbHVlO1xuICB9XG4gIF9jbGFzczogc3RyaW5nID0gJ3YtYmFkZ2UnO1xuICBASG9zdEJpbmRpbmcoJ2NsYXNzJylcbiAgZ2V0IGhvc3RDbGFzcygpOiBzdHJpbmcge1xuICAgIHJldHVybiB0aGlzLmNsYXNzO1xuICB9XG5cbiAgLyoqXG4gICAqIFNldHMgY3VzdG9tIGlkLlxuICAgKiBAZGVmYXVsdCB1dWlkU2VydmljZS5nZXRVVUlEKCd2LWJhZGdlLScpXG4gICAqIEBidWlsdGluIHRydWVcbiAgICovXG4gIEBJbnB1dCgpXG4gIGlkOiBzdHJpbmcgPSB0aGlzLnV1aWRTZXJ2aWNlLmdldFVVSUQoJ3YtYmFkZ2UtJyk7XG4gIEBIb3N0QmluZGluZygnYXR0ci5pZCcpXG4gIGdldCBob3N0SWQoKTogc3RyaW5nIHtcbiAgICByZXR1cm4gdGhpcy5pZDtcbiAgfVxuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgdXVpZFNlcnZpY2U6IFVVSURTZXJ2aWNlKSB7fVxuXG4gIC8qKlxuICAgKiBTZXRzIGJhZGdlIHRvIG51bWJlciB2YXJpYW50IHdoZW4gdHJ1ZS4gPGJyIC8+XG4gICAqIFVzaW5nIHRoaXMgZmxhZyByYXRoZXIgdGhhbiA8Y29kZT5iYWRnZVR5cGU9XCJudW1iZXJcIjwvY29kZT4gYWxsb3dzIGZvciBudW1iZXIgYmFkZ2VzIHdpdGggb3RoZXIgYmFkZ2UgdHlwZXMuXG4gICAqIEBkZWZhdWx0IGZhbHNlXG4gICAqL1xuICBASW5wdXQoKVxuICBnZXQgbnVtYmVyKCk6IGJvb2xlYW4ge1xuICAgIHJldHVybiB0aGlzLl9udW1iZXI7XG4gIH1cbiAgc2V0IG51bWJlcih2YWx1ZTogQm9vbGVhbklucHV0KSB7XG4gICAgdGhpcy5fbnVtYmVyID0gY29lcmNlQm9vbGVhblByb3BlcnR5KHZhbHVlKTtcbiAgfVxuICBfbnVtYmVyOiBib29sZWFuID0gZmFsc2U7XG5cbiAgLyoqXG4gICAqIFdoZXRoZXIgb3Igbm90IGJhZGdlIGNvbnRhaW5zIGFuIGljb24uXG4gICAqIEBkZWZhdWx0IGZhbHNlXG4gICAqL1xuICBASW5wdXQoKVxuICBnZXQgaWNvbigpOiBib29sZWFuIHtcbiAgICByZXR1cm4gdGhpcy5faWNvbjtcbiAgfVxuICBzZXQgaWNvbih2YWx1ZTogQm9vbGVhbklucHV0KSB7XG4gICAgdGhpcy5faWNvbiA9IGNvZXJjZUJvb2xlYW5Qcm9wZXJ0eSh2YWx1ZSk7XG4gIH1cbiAgX2ljb246IGJvb2xlYW4gPSBmYWxzZTtcblxuICAvKipcbiAgICogUmVtb3ZlcyBiYWNrZ3JvdW5kIGNvbG9yIGZyb20gYmFkZ2Ugd2hlbiB0cnVlLlxuICAgKi9cbiAgQElucHV0KClcbiAgZ2V0IG5vQmFja2dyb3VuZCgpOiBib29sZWFuIHtcbiAgICByZXR1cm4gdGhpcy5fbm9CYWNrZ3JvdW5kO1xuICB9XG4gIHNldCBub0JhY2tncm91bmQodmFsdWU6IEJvb2xlYW5JbnB1dCkge1xuICAgIHRoaXMuX25vQmFja2dyb3VuZCA9IGNvZXJjZUJvb2xlYW5Qcm9wZXJ0eSh2YWx1ZSk7XG4gIH1cbiAgX25vQmFja2dyb3VuZDogYm9vbGVhbiA9IGZhbHNlO1xufVxuIl19