@visa/nova-angular
Version:
Visa Product Design System Nova Angular library
143 lines • 13.4 kB
JavaScript
/**
* Copyright (c) 2025 Visa, Inc.
*
* 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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmFkZ2UuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9ub3ZhLWxpYi9zcmMvbGliL2JhZGdlL2JhZGdlLmRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7Ozs7Ozs7Ozs7O0lBZUk7QUFDSixPQUFPLEVBQWdCLHFCQUFxQixFQUFFLE1BQU0sdUJBQXVCLENBQUM7QUFDNUUsT0FBTyxFQUFFLFNBQVMsRUFBRSxXQUFXLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzlELE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxxQ0FBcUMsQ0FBQzs7O0FBRWxFLE1BQU0sQ0FBQyxNQUFNLFNBQVMsR0FBRztJQUN2QixPQUFPLEVBQUUsU0FBUztJQUNsQixPQUFPLEVBQUUsU0FBUztJQUNsQixRQUFRLEVBQUUsVUFBVTtJQUNwQixRQUFRLEVBQUUsVUFBVTtJQUNwQixNQUFNLEVBQUUsUUFBUTtJQUNoQixPQUFPLEVBQUUsU0FBUztJQUNsQixNQUFNLEVBQUUsUUFBUTtJQUNoQixNQUFNLEVBQUUsUUFBUTtJQUNoQixNQUFNLEVBQUUsUUFBUTtDQUNSLENBQUM7QUFPWCxNQUFNLE9BQU8sY0FBYztJQUN6Qjs7OztPQUlHO0lBQ0gsSUFDSSxTQUFTO1FBQ1gsT0FBTyxJQUFJLENBQUMsVUFBVSxDQUFDO0lBQ3pCLENBQUM7SUFDRCxJQUFJLFNBQVMsQ0FBQyxLQUFnQjtRQUM1QixJQUFJLENBQUMsVUFBVSxHQUFHLEtBQUssQ0FBQztJQUMxQixDQUFDO0lBR0Q7OztPQUdHO0lBQ0gsSUFDSSxLQUFLO1FBQ1AsT0FBTztZQUNMLElBQUksQ0FBQyxNQUFNO1lBQ1gsSUFBSSxDQUFDLFNBQVMsSUFBSSxJQUFJLENBQUMsU0FBUyxJQUFJLFNBQVM7Z0JBQzNDLENBQUMsQ0FBQyxJQUFJLENBQUMsU0FBUyxLQUFLLFNBQVMsQ0FBQyxRQUFRO29CQUNyQyxDQUFDLENBQUMsa0JBQWtCO29CQUNwQixDQUFDLENBQUMsV0FBVyxJQUFJLENBQUMsU0FBUyxFQUFFO2dCQUMvQixDQUFDLENBQUMsRUFBRTtZQUNOLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLGdCQUFnQixDQUFDLENBQUMsQ0FBQyxFQUFFO1lBQ25DLElBQUksQ0FBQyxZQUFZLENBQUMsQ0FBQyxDQUFDLGVBQWUsQ0FBQyxDQUFDLENBQUMsRUFBRTtZQUN4QyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxjQUFjLENBQUMsQ0FBQyxDQUFDLEVBQUU7U0FDaEMsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUM7SUFDZCxDQUFDO0lBQ0QsSUFBSSxLQUFLLENBQUMsS0FBYTtRQUNyQixJQUFJLENBQUMsTUFBTSxHQUFHLEtBQUssQ0FBQztJQUN0QixDQUFDO0lBRUQsSUFDSSxTQUFTO1FBQ1gsT0FBTyxJQUFJLENBQUMsS0FBSyxDQUFDO0lBQ3BCLENBQUM7SUFTRCxJQUNJLE1BQU07UUFDUixPQUFPLElBQUksQ0FBQyxFQUFFLENBQUM7SUFDakIsQ0FBQztJQUVELFlBQW9CLFdBQXdCO1FBQXhCLGdCQUFXLEdBQVgsV0FBVyxDQUFhO1FBekM1QyxlQUFVLEdBQWMsU0FBUyxDQUFDLE9BQU8sQ0FBQztRQXVCMUMsV0FBTSxHQUFXLFNBQVMsQ0FBQztRQU0zQjs7OztXQUlHO1FBRUgsT0FBRSxHQUFXLElBQUksQ0FBQyxXQUFXLENBQUMsT0FBTyxDQUFDLFVBQVUsQ0FBQyxDQUFDO1FBb0JsRCxZQUFPLEdBQVksS0FBSyxDQUFDO1FBYXpCLFVBQUssR0FBWSxLQUFLLENBQUM7UUFZdkIsa0JBQWEsR0FBWSxLQUFLLENBQUM7SUF2Q2dCLENBQUM7SUFFaEQ7Ozs7T0FJRztJQUNILElBQ0ksTUFBTTtRQUNSLE9BQU8sSUFBSSxDQUFDLE9BQU8sQ0FBQztJQUN0QixDQUFDO0lBQ0QsSUFBSSxNQUFNLENBQUMsS0FBbUI7UUFDNUIsSUFBSSxDQUFDLE9BQU8sR0FBRyxxQkFBcUIsQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUM5QyxDQUFDO0lBR0Q7OztPQUdHO0lBQ0gsSUFDSSxJQUFJO1FBQ04sT0FBTyxJQUFJLENBQUMsS0FBSyxDQUFDO0lBQ3BCLENBQUM7SUFDRCxJQUFJLElBQUksQ0FBQyxLQUFtQjtRQUMxQixJQUFJLENBQUMsS0FBSyxHQUFHLHFCQUFxQixDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQzVDLENBQUM7SUFHRDs7T0FFRztJQUNILElBQ0ksWUFBWTtRQUNkLE9BQU8sSUFBSSxDQUFDLGFBQWEsQ0FBQztJQUM1QixDQUFDO0lBQ0QsSUFBSSxZQUFZLENBQUMsS0FBbUI7UUFDbEMsSUFBSSxDQUFDLGFBQWEsR0FBRyxxQkFBcUIsQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUNwRCxDQUFDOytHQTVGVSxjQUFjO21HQUFkLGNBQWM7OzRGQUFkLGNBQWM7a0JBSjFCLFNBQVM7bUJBQUM7b0JBQ1QsVUFBVSxFQUFFLElBQUk7b0JBQ2hCLFFBQVEsRUFBRSxXQUFXO2lCQUN0QjtnRkFRSyxTQUFTO3NCQURaLEtBQUs7Z0JBY0YsS0FBSztzQkFEUixLQUFLO2dCQW1CRixTQUFTO3NCQURaLFdBQVc7dUJBQUMsT0FBTztnQkFXcEIsRUFBRTtzQkFERCxLQUFLO2dCQUdGLE1BQU07c0JBRFQsV0FBVzt1QkFBQyxTQUFTO2dCQWFsQixNQUFNO3NCQURULEtBQUs7Z0JBY0YsSUFBSTtzQkFEUCxLQUFLO2dCQWFGLFlBQVk7c0JBRGYsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogICAgICAgICAgICAgIENvcHlyaWdodCAoYykgMjAyNSBWaXNhLCBJbmMuXG4gKlxuICogTGljZW5zZWQgdW5kZXIgdGhlIEFwYWNoZSBMaWNlbnNlLCBWZXJzaW9uIDIuMCAodGhlIFwiTGljZW5zZVwiKTtcbiAqIHlvdSBtYXkgbm90IHVzZSB0aGlzIGZpbGUgZXhjZXB0IGluIGNvbXBsaWFuY2Ugd2l0aCB0aGUgTGljZW5zZS5cbiAqIFlvdSBtYXkgb2J0YWluIGEgY29weSBvZiB0aGUgTGljZW5zZSBhdFxuICpcbiAqICAgICAgICAgaHR0cDovL3d3dy5hcGFjaGUub3JnL2xpY2Vuc2VzL0xJQ0VOU0UtMi4wXG4gKlxuICogVW5sZXNzIHJlcXVpcmVkIGJ5IGFwcGxpY2FibGUgbGF3IG9yIGFncmVlZCB0byBpbiB3cml0aW5nLCBzb2Z0d2FyZVxuICogZGlzdHJpYnV0ZWQgdW5kZXIgdGhlIExpY2Vuc2UgaXMgZGlzdHJpYnV0ZWQgb24gYW4gXCJBUyBJU1wiIEJBU0lTLFxuICogV0lUSE9VVCBXQVJSQU5USUVTIE9SIENPTkRJVElPTlMgT0YgQU5ZIEtJTkQsIGVpdGhlciBleHByZXNzIG9yIGltcGxpZWQuXG4gKiBTZWUgdGhlIExpY2Vuc2UgZm9yIHRoZSBzcGVjaWZpYyBsYW5ndWFnZSBnb3Zlcm5pbmcgcGVybWlzc2lvbnMgYW5kXG4gKiBsaW1pdGF0aW9ucyB1bmRlciB0aGUgTGljZW5zZS5cbiAqXG4gKiovXG5pbXBvcnQgeyBCb29sZWFuSW5wdXQsIGNvZXJjZUJvb2xlYW5Qcm9wZXJ0eSB9IGZyb20gJ0Bhbmd1bGFyL2Nkay9jb2VyY2lvbic7XG5pbXBvcnQgeyBEaXJlY3RpdmUsIEhvc3RCaW5kaW5nLCBJbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgVVVJRFNlcnZpY2UgfSBmcm9tICcuLi9fdXRpbGl0aWVzL3NlcnZpY2VzL3V1aWQuc2VydmljZSc7XG5cbmV4cG9ydCBjb25zdCBCYWRnZVR5cGUgPSB7XG4gIERFRkFVTFQ6ICdkZWZhdWx0JyxcbiAgTkVVVFJBTDogJ25ldXRyYWwnLFxuICBDUklUSUNBTDogJ2NyaXRpY2FsJyxcbiAgTkVHQVRJVkU6ICduZWdhdGl2ZScsXG4gIFNUQUJMRTogJ3N0YWJsZScsXG4gIFdBUk5JTkc6ICd3YXJuaW5nJyxcbiAgU1VCVExFOiAnc3VidGxlJyxcbiAgTlVNQkVSOiAnbnVtYmVyJyxcbiAgQUNUSVZFOiAnYWN0aXZlJ1xufSBhcyBjb25zdDtcblxuZXhwb3J0IHR5cGUgQmFkZ2VUeXBlID0gKHR5cGVvZiBCYWRnZVR5cGUpW2tleW9mIHR5cGVvZiBCYWRnZVR5cGVdO1xuQERpcmVjdGl2ZSh7XG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIHNlbGVjdG9yOiAnW3YtYmFkZ2VdJ1xufSlcbmV4cG9ydCBjbGFzcyBCYWRnZURpcmVjdGl2ZSB7XG4gIC8qKlxuICAgKiBTZXRzIGJhZGdlIHR5cGUuXG4gICAqIEBkZWZhdWx0ICdkZWZhdWx0JyB8IEJhZGdlVHlwZS5ERUZBVUxUXG4gICAqIEBvcHRpb25zICdkZWZhdWx0JyB8IEJhZGdlVHlwZS5ERUZBVUxUIHwgPGJyPiAnbmV1dHJhbCcgfCBCYWRnZVR5cGUuTkVVVFJBTCB8IDxicj4gJ2NyaXRpY2FsJyB8IEJhZGdlVHlwZS5DUklUSUNBTCB8IDxicj4gJ3N0YWJsZScgfCBCYWRnZVR5cGUuU1RBQkxFIHwgPGJyPiAnd2FybmluZycgfCBCYWRnZVR5cGUuV0FSTklORyB8IDxicj4gJ3N1YnRsZScgfCBCYWRnZVR5cGUuU1VCVExFIHwgPGJyPiAnbnVtYmVyJyB8IEJhZGdlVHlwZS5OVU1CRVJcbiAgICovXG4gIEBJbnB1dCgpXG4gIGdldCBiYWRnZVR5cGUoKTogQmFkZ2VUeXBlIHtcbiAgICByZXR1cm4gdGhpcy5fYmFkZ2VUeXBlO1xuICB9XG4gIHNldCBiYWRnZVR5cGUodmFsdWU6IEJhZGdlVHlwZSkge1xuICAgIHRoaXMuX2JhZGdlVHlwZSA9IHZhbHVlO1xuICB9XG4gIF9iYWRnZVR5cGU6IEJhZGdlVHlwZSA9IEJhZGdlVHlwZS5ERUZBVUxUO1xuXG4gIC8qKlxuICAgKiBQcm92aWRlcyBjdXN0b20gY2xhc3MmIzQwO2VzJiM0MTsgZm9yIGN1c3RvbSBzdHlsaW5nLlxuICAgKiBAZGVmYXVsdCAudi1iYWRnZVxuICAgKi9cbiAgQElucHV0KClcbiAgZ2V0IGNsYXNzKCk6IHN0cmluZyB7XG4gICAgcmV0dXJuIFtcbiAgICAgIHRoaXMuX2NsYXNzLFxuICAgICAgdGhpcy5iYWRnZVR5cGUgJiYgdGhpcy5iYWRnZVR5cGUgIT0gJ2RlZmF1bHQnXG4gICAgICAgID8gdGhpcy5iYWRnZVR5cGUgPT09IEJhZGdlVHlwZS5ORUdBVElWRVxuICAgICAgICAgID8gJ3YtYmFkZ2UtY3JpdGljYWwnXG4gICAgICAgICAgOiBgdi1iYWRnZS0ke3RoaXMuYmFkZ2VUeXBlfWBcbiAgICAgICAgOiAnJyxcbiAgICAgIHRoaXMubnVtYmVyID8gJ3YtYmFkZ2UtbnVtYmVyJyA6ICcnLFxuICAgICAgdGhpcy5ub0JhY2tncm91bmQgPyAndi1iYWRnZS1jbGVhcicgOiAnJyxcbiAgICAgIHRoaXMuaWNvbiA/ICd2LWJhZGdlLWljb24nIDogJydcbiAgICBdLmpvaW4oJyAnKTtcbiAgfVxuICBzZXQgY2xhc3ModmFsdWU6IHN0cmluZykge1xuICAgIHRoaXMuX2NsYXNzID0gdmFsdWU7XG4gIH1cbiAgX2NsYXNzOiBzdHJpbmcgPSAndi1iYWRnZSc7XG4gIEBIb3N0QmluZGluZygnY2xhc3MnKVxuICBnZXQgaG9zdENsYXNzKCk6IHN0cmluZyB7XG4gICAgcmV0dXJuIHRoaXMuY2xhc3M7XG4gIH1cblxuICAvKipcbiAgICogU2V0cyBjdXN0b20gaWQuXG4gICAqIEBkZWZhdWx0IHV1aWRTZXJ2aWNlLmdldFVVSUQoJ3YtYmFkZ2UtJylcbiAgICogQGJ1aWx0aW4gdHJ1ZVxuICAgKi9cbiAgQElucHV0KClcbiAgaWQ6IHN0cmluZyA9IHRoaXMudXVpZFNlcnZpY2UuZ2V0VVVJRCgndi1iYWRnZS0nKTtcbiAgQEhvc3RCaW5kaW5nKCdhdHRyLmlkJylcbiAgZ2V0IGhvc3RJZCgpOiBzdHJpbmcge1xuICAgIHJldHVybiB0aGlzLmlkO1xuICB9XG5cbiAgY29uc3RydWN0b3IocHJpdmF0ZSB1dWlkU2VydmljZTogVVVJRFNlcnZpY2UpIHt9XG5cbiAgLyoqXG4gICAqIFNldHMgYmFkZ2UgdG8gbnVtYmVyIHZhcmlhbnQgd2hlbiB0cnVlLiA8YnIgLz5cbiAgICogVXNpbmcgdGhpcyBmbGFnIHJhdGhlciB0aGFuIDxjb2RlPmJhZGdlVHlwZT1cIm51bWJlclwiPC9jb2RlPiBhbGxvd3MgZm9yIG51bWJlciBiYWRnZXMgd2l0aCBvdGhlciBiYWRnZSB0eXBlcy5cbiAgICogQGRlZmF1bHQgZmFsc2VcbiAgICovXG4gIEBJbnB1dCgpXG4gIGdldCBudW1iZXIoKTogYm9vbGVhbiB7XG4gICAgcmV0dXJuIHRoaXMuX251bWJlcjtcbiAgfVxuICBzZXQgbnVtYmVyKHZhbHVlOiBCb29sZWFuSW5wdXQpIHtcbiAgICB0aGlzLl9udW1iZXIgPSBjb2VyY2VCb29sZWFuUHJvcGVydHkodmFsdWUpO1xuICB9XG4gIF9udW1iZXI6IGJvb2xlYW4gPSBmYWxzZTtcblxuICAvKipcbiAgICogV2hldGhlciBvciBub3QgYmFkZ2UgY29udGFpbnMgYW4gaWNvbi5cbiAgICogQGRlZmF1bHQgZmFsc2VcbiAgICovXG4gIEBJbnB1dCgpXG4gIGdldCBpY29uKCk6IGJvb2xlYW4ge1xuICAgIHJldHVybiB0aGlzLl9pY29uO1xuICB9XG4gIHNldCBpY29uKHZhbHVlOiBCb29sZWFuSW5wdXQpIHtcbiAgICB0aGlzLl9pY29uID0gY29lcmNlQm9vbGVhblByb3BlcnR5KHZhbHVlKTtcbiAgfVxuICBfaWNvbjogYm9vbGVhbiA9IGZhbHNlO1xuXG4gIC8qKlxuICAgKiBSZW1vdmVzIGJhY2tncm91bmQgY29sb3IgZnJvbSBiYWRnZSB3aGVuIHRydWUuXG4gICAqL1xuICBASW5wdXQoKVxuICBnZXQgbm9CYWNrZ3JvdW5kKCk6IGJvb2xlYW4ge1xuICAgIHJldHVybiB0aGlzLl9ub0JhY2tncm91bmQ7XG4gIH1cbiAgc2V0IG5vQmFja2dyb3VuZCh2YWx1ZTogQm9vbGVhbklucHV0KSB7XG4gICAgdGhpcy5fbm9CYWNrZ3JvdW5kID0gY29lcmNlQm9vbGVhblByb3BlcnR5KHZhbHVlKTtcbiAgfVxuICBfbm9CYWNrZ3JvdW5kOiBib29sZWFuID0gZmFsc2U7XG59XG4iXX0=