@visa/nova-angular
Version:
Visa Product Design System Nova Angular library
118 lines • 11.8 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 { ContentChild, Directive, HostBinding, HostListener, Input } from '@angular/core';
import { ContentCardTitleLinkDirective } from '../content-card-title-link/content-card-title-link.directive';
import * as i0 from "@angular/core";
export class ContentCardDirective {
/**
* Displays indicator line at the bottom of the card when true.
* @default false
*/
get indicator() {
return this._indicator;
}
set indicator(value) {
this._indicator = coerceBooleanProperty(value);
}
/**
* Transforms card into a clickable card when true.
* @default false
*/
get clickable() {
return this._clickable;
}
set clickable(value) {
this._clickable = coerceBooleanProperty(value);
}
/**
* Sets component as disabled when true.
* @default false
*/
get disabled() {
return this._disabled;
}
set disabled(value) {
this._disabled = coerceBooleanProperty(value);
}
get hostDisabled() {
return this.disabled ? true : false;
}
get hostClass() {
return ['v-content-card', this.indicator ? 'v-content-card-border-block-end' : '', this.class].join(' ');
}
onSpaceKeyDown(event) {
if (this.clickable) {
//to prevent unnecessary scrolling
event.preventDefault();
}
}
handleClick() {
if (this.clickable) {
const mainLink = this.titleLink.el.nativeElement;
// handle if a mainlink is not found
if (mainLink) {
mainLink.click();
}
}
}
constructor() {
this._disabled = false;
}
ngAfterContentInit() {
if (this.titleLink) {
this.disabled = this.disabled
? this.disabled
: this.titleLink._disabled
? (this.disabled = true)
: (this.disabled = false);
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ContentCardDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: ContentCardDirective, isStandalone: true, selector: "[v-content-card]", inputs: { indicator: "indicator", clickable: "clickable", disabled: "disabled", class: "class" }, host: { listeners: { "keydown.space": "onSpaceKeyDown($event)", "click": "handleClick()" }, properties: { "attr.aria-disabled": "this.hostDisabled", "class": "this.hostClass" } }, queries: [{ propertyName: "titleLink", first: true, predicate: ContentCardTitleLinkDirective, descendants: true }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ContentCardDirective, decorators: [{
type: Directive,
args: [{
standalone: true,
selector: '[v-content-card]'
}]
}], ctorParameters: () => [], propDecorators: { titleLink: [{
type: ContentChild,
args: [ContentCardTitleLinkDirective]
}], indicator: [{
type: Input
}], clickable: [{
type: Input
}], disabled: [{
type: Input
}], hostDisabled: [{
type: HostBinding,
args: ['attr.aria-disabled']
}], class: [{
type: Input
}], hostClass: [{
type: HostBinding,
args: ['class']
}], onSpaceKeyDown: [{
type: HostListener,
args: ['keydown.space', ['$event']]
}], handleClick: [{
type: HostListener,
args: ['click']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29udGVudC1jYXJkLmRpcmVjdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvbm92YS1saWIvc3JjL2xpYi9jb250ZW50LWNhcmQvY29udGVudC1jYXJkLmRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7Ozs7Ozs7Ozs7O0lBZUk7QUFDSixPQUFPLEVBQWdCLHFCQUFxQixFQUFFLE1BQU0sdUJBQXVCLENBQUM7QUFDNUUsT0FBTyxFQUFvQixZQUFZLEVBQUUsU0FBUyxFQUFFLFdBQVcsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzVHLE9BQU8sRUFBRSw2QkFBNkIsRUFBRSxNQUFNLDhEQUE4RCxDQUFDOztBQU03RyxNQUFNLE9BQU8sb0JBQW9CO0lBRS9COzs7T0FHRztJQUNILElBQ0ksU0FBUztRQUNYLE9BQU8sSUFBSSxDQUFDLFVBQVUsQ0FBQztJQUN6QixDQUFDO0lBQ0QsSUFBSSxTQUFTLENBQUMsS0FBbUI7UUFDL0IsSUFBSSxDQUFDLFVBQVUsR0FBRyxxQkFBcUIsQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUNqRCxDQUFDO0lBR0Q7OztPQUdHO0lBQ0gsSUFDSSxTQUFTO1FBQ1gsT0FBTyxJQUFJLENBQUMsVUFBVSxDQUFDO0lBQ3pCLENBQUM7SUFDRCxJQUFJLFNBQVMsQ0FBQyxLQUFtQjtRQUMvQixJQUFJLENBQUMsVUFBVSxHQUFHLHFCQUFxQixDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ2pELENBQUM7SUFHRDs7O09BR0c7SUFDSCxJQUNJLFFBQVE7UUFDVixPQUFPLElBQUksQ0FBQyxTQUFTLENBQUM7SUFDeEIsQ0FBQztJQUNELElBQUksUUFBUSxDQUFDLEtBQW1CO1FBQzlCLElBQUksQ0FBQyxTQUFTLEdBQUcscUJBQXFCLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDaEQsQ0FBQztJQUdELElBQ0ksWUFBWTtRQUNkLE9BQU8sSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUM7SUFDdEMsQ0FBQztJQU9ELElBQ0ksU0FBUztRQUNYLE9BQU8sQ0FBQyxnQkFBZ0IsRUFBRSxJQUFJLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQyxpQ0FBaUMsQ0FBQyxDQUFDLENBQUMsRUFBRSxFQUFFLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUM7SUFDM0csQ0FBQztJQUdELGNBQWMsQ0FBQyxLQUFvQjtRQUNqQyxJQUFJLElBQUksQ0FBQyxTQUFTLEVBQUUsQ0FBQztZQUNuQixrQ0FBa0M7WUFDbEMsS0FBSyxDQUFDLGNBQWMsRUFBRSxDQUFDO1FBQ3pCLENBQUM7SUFDSCxDQUFDO0lBR0QsV0FBVztRQUNULElBQUksSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDO1lBQ25CLE1BQU0sUUFBUSxHQUFHLElBQUksQ0FBQyxTQUFTLENBQUMsRUFBRSxDQUFDLGFBQWEsQ0FBQztZQUNqRCxvQ0FBb0M7WUFDcEMsSUFBSSxRQUFRLEVBQUUsQ0FBQztnQkFDYixRQUFRLENBQUMsS0FBSyxFQUFFLENBQUM7WUFDbkIsQ0FBQztRQUNILENBQUM7SUFDSCxDQUFDO0lBQ0Q7UUFuQ0EsY0FBUyxHQUFZLEtBQUssQ0FBQztJQW1DWixDQUFDO0lBRWhCLGtCQUFrQjtRQUNoQixJQUFJLElBQUksQ0FBQyxTQUFTLEVBQUUsQ0FBQztZQUNuQixJQUFJLENBQUMsUUFBUSxHQUFHLElBQUksQ0FBQyxRQUFRO2dCQUMzQixDQUFDLENBQUMsSUFBSSxDQUFDLFFBQVE7Z0JBQ2YsQ0FBQyxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsU0FBUztvQkFDeEIsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLENBQUM7b0JBQ3hCLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxRQUFRLEdBQUcsS0FBSyxDQUFDLENBQUM7UUFDaEMsQ0FBQztJQUNILENBQUM7K0dBcEZVLG9CQUFvQjttR0FBcEIsb0JBQW9CLHlZQUNqQiw2QkFBNkI7OzRGQURoQyxvQkFBb0I7a0JBSmhDLFNBQVM7bUJBQUM7b0JBQ1QsVUFBVSxFQUFFLElBQUk7b0JBQ2hCLFFBQVEsRUFBRSxrQkFBa0I7aUJBQzdCO3dEQUU4QyxTQUFTO3NCQUFyRCxZQUFZO3VCQUFDLDZCQUE2QjtnQkFNdkMsU0FBUztzQkFEWixLQUFLO2dCQWNGLFNBQVM7c0JBRFosS0FBSztnQkFjRixRQUFRO3NCQURYLEtBQUs7Z0JBVUYsWUFBWTtzQkFEZixXQUFXO3VCQUFDLG9CQUFvQjtnQkFTeEIsS0FBSztzQkFBYixLQUFLO2dCQUVGLFNBQVM7c0JBRFosV0FBVzt1QkFBQyxPQUFPO2dCQU1wQixjQUFjO3NCQURiLFlBQVk7dUJBQUMsZUFBZSxFQUFFLENBQUMsUUFBUSxDQUFDO2dCQVN6QyxXQUFXO3NCQURWLFlBQVk7dUJBQUMsT0FBTyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogICAgICAgICAgICAgIENvcHlyaWdodCAoYykgMjAyNSBWaXNhLCBJbmMuXG4gKlxuICogTGljZW5zZWQgdW5kZXIgdGhlIEFwYWNoZSBMaWNlbnNlLCBWZXJzaW9uIDIuMCAodGhlIFwiTGljZW5zZVwiKTtcbiAqIHlvdSBtYXkgbm90IHVzZSB0aGlzIGZpbGUgZXhjZXB0IGluIGNvbXBsaWFuY2Ugd2l0aCB0aGUgTGljZW5zZS5cbiAqIFlvdSBtYXkgb2J0YWluIGEgY29weSBvZiB0aGUgTGljZW5zZSBhdFxuICpcbiAqICAgICAgICAgaHR0cDovL3d3dy5hcGFjaGUub3JnL2xpY2Vuc2VzL0xJQ0VOU0UtMi4wXG4gKlxuICogVW5sZXNzIHJlcXVpcmVkIGJ5IGFwcGxpY2FibGUgbGF3IG9yIGFncmVlZCB0byBpbiB3cml0aW5nLCBzb2Z0d2FyZVxuICogZGlzdHJpYnV0ZWQgdW5kZXIgdGhlIExpY2Vuc2UgaXMgZGlzdHJpYnV0ZWQgb24gYW4gXCJBUyBJU1wiIEJBU0lTLFxuICogV0lUSE9VVCBXQVJSQU5USUVTIE9SIENPTkRJVElPTlMgT0YgQU5ZIEtJTkQsIGVpdGhlciBleHByZXNzIG9yIGltcGxpZWQuXG4gKiBTZWUgdGhlIExpY2Vuc2UgZm9yIHRoZSBzcGVjaWZpYyBsYW5ndWFnZSBnb3Zlcm5pbmcgcGVybWlzc2lvbnMgYW5kXG4gKiBsaW1pdGF0aW9ucyB1bmRlciB0aGUgTGljZW5zZS5cbiAqXG4gKiovXG5pbXBvcnQgeyBCb29sZWFuSW5wdXQsIGNvZXJjZUJvb2xlYW5Qcm9wZXJ0eSB9IGZyb20gJ0Bhbmd1bGFyL2Nkay9jb2VyY2lvbic7XG5pbXBvcnQgeyBBZnRlckNvbnRlbnRJbml0LCBDb250ZW50Q2hpbGQsIERpcmVjdGl2ZSwgSG9zdEJpbmRpbmcsIEhvc3RMaXN0ZW5lciwgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENvbnRlbnRDYXJkVGl0bGVMaW5rRGlyZWN0aXZlIH0gZnJvbSAnLi4vY29udGVudC1jYXJkLXRpdGxlLWxpbmsvY29udGVudC1jYXJkLXRpdGxlLWxpbmsuZGlyZWN0aXZlJztcblxuQERpcmVjdGl2ZSh7XG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIHNlbGVjdG9yOiAnW3YtY29udGVudC1jYXJkXSdcbn0pXG5leHBvcnQgY2xhc3MgQ29udGVudENhcmREaXJlY3RpdmUgaW1wbGVtZW50cyBBZnRlckNvbnRlbnRJbml0IHtcbiAgQENvbnRlbnRDaGlsZChDb250ZW50Q2FyZFRpdGxlTGlua0RpcmVjdGl2ZSkgdGl0bGVMaW5rOiBDb250ZW50Q2FyZFRpdGxlTGlua0RpcmVjdGl2ZTtcbiAgLyoqXG4gICAqIERpc3BsYXlzIGluZGljYXRvciBsaW5lIGF0IHRoZSBib3R0b20gb2YgdGhlIGNhcmQgd2hlbiB0cnVlLlxuICAgKiBAZGVmYXVsdCBmYWxzZVxuICAgKi9cbiAgQElucHV0KClcbiAgZ2V0IGluZGljYXRvcigpOiBib29sZWFuIHtcbiAgICByZXR1cm4gdGhpcy5faW5kaWNhdG9yO1xuICB9XG4gIHNldCBpbmRpY2F0b3IodmFsdWU6IEJvb2xlYW5JbnB1dCkge1xuICAgIHRoaXMuX2luZGljYXRvciA9IGNvZXJjZUJvb2xlYW5Qcm9wZXJ0eSh2YWx1ZSk7XG4gIH1cbiAgX2luZGljYXRvcjogYm9vbGVhbjtcblxuICAvKipcbiAgICogVHJhbnNmb3JtcyBjYXJkIGludG8gYSBjbGlja2FibGUgY2FyZCB3aGVuIHRydWUuXG4gICAqIEBkZWZhdWx0IGZhbHNlXG4gICAqL1xuICBASW5wdXQoKVxuICBnZXQgY2xpY2thYmxlKCk6IGJvb2xlYW4ge1xuICAgIHJldHVybiB0aGlzLl9jbGlja2FibGU7XG4gIH1cbiAgc2V0IGNsaWNrYWJsZSh2YWx1ZTogQm9vbGVhbklucHV0KSB7XG4gICAgdGhpcy5fY2xpY2thYmxlID0gY29lcmNlQm9vbGVhblByb3BlcnR5KHZhbHVlKTtcbiAgfVxuICBfY2xpY2thYmxlOiBib29sZWFuO1xuXG4gIC8qKlxuICAgKiBTZXRzIGNvbXBvbmVudCBhcyBkaXNhYmxlZCB3aGVuIHRydWUuXG4gICAqIEBkZWZhdWx0IGZhbHNlXG4gICAqL1xuICBASW5wdXQoKVxuICBnZXQgZGlzYWJsZWQoKTogYm9vbGVhbiB7XG4gICAgcmV0dXJuIHRoaXMuX2Rpc2FibGVkO1xuICB9XG4gIHNldCBkaXNhYmxlZCh2YWx1ZTogQm9vbGVhbklucHV0KSB7XG4gICAgdGhpcy5fZGlzYWJsZWQgPSBjb2VyY2VCb29sZWFuUHJvcGVydHkodmFsdWUpO1xuICB9XG4gIF9kaXNhYmxlZDogYm9vbGVhbiA9IGZhbHNlO1xuXG4gIEBIb3N0QmluZGluZygnYXR0ci5hcmlhLWRpc2FibGVkJylcbiAgZ2V0IGhvc3REaXNhYmxlZCgpIHtcbiAgICByZXR1cm4gdGhpcy5kaXNhYmxlZCA/IHRydWUgOiBmYWxzZTtcbiAgfVxuXG4gIC8qKlxuICAgKiBQcm92aWRlcyBjdXN0b20gY2xhc3MmIzQwO2VzJiM0MTsgZm9yIGN1c3RvbSBzdHlsaW5nLlxuICAgKiBAZGVmYXVsdCAudi1jb250ZW50LWNhcmRcbiAgICovXG4gIEBJbnB1dCgpIGNsYXNzOiBzdHJpbmc7XG4gIEBIb3N0QmluZGluZygnY2xhc3MnKVxuICBnZXQgaG9zdENsYXNzKCk6IHN0cmluZyB7XG4gICAgcmV0dXJuIFsndi1jb250ZW50LWNhcmQnLCB0aGlzLmluZGljYXRvciA/ICd2LWNvbnRlbnQtY2FyZC1ib3JkZXItYmxvY2stZW5kJyA6ICcnLCB0aGlzLmNsYXNzXS5qb2luKCcgJyk7XG4gIH1cblxuICBASG9zdExpc3RlbmVyKCdrZXlkb3duLnNwYWNlJywgWyckZXZlbnQnXSlcbiAgb25TcGFjZUtleURvd24oZXZlbnQ6IEtleWJvYXJkRXZlbnQpIHtcbiAgICBpZiAodGhpcy5jbGlja2FibGUpIHtcbiAgICAgIC8vdG8gcHJldmVudCB1bm5lY2Vzc2FyeSBzY3JvbGxpbmdcbiAgICAgIGV2ZW50LnByZXZlbnREZWZhdWx0KCk7XG4gICAgfVxuICB9XG5cbiAgQEhvc3RMaXN0ZW5lcignY2xpY2snKVxuICBoYW5kbGVDbGljaygpIHtcbiAgICBpZiAodGhpcy5jbGlja2FibGUpIHtcbiAgICAgIGNvbnN0IG1haW5MaW5rID0gdGhpcy50aXRsZUxpbmsuZWwubmF0aXZlRWxlbWVudDtcbiAgICAgIC8vIGhhbmRsZSBpZiBhIG1haW5saW5rIGlzIG5vdCBmb3VuZFxuICAgICAgaWYgKG1haW5MaW5rKSB7XG4gICAgICAgIG1haW5MaW5rLmNsaWNrKCk7XG4gICAgICB9XG4gICAgfVxuICB9XG4gIGNvbnN0cnVjdG9yKCkge31cblxuICBuZ0FmdGVyQ29udGVudEluaXQoKTogdm9pZCB7XG4gICAgaWYgKHRoaXMudGl0bGVMaW5rKSB7XG4gICAgICB0aGlzLmRpc2FibGVkID0gdGhpcy5kaXNhYmxlZFxuICAgICAgICA/IHRoaXMuZGlzYWJsZWRcbiAgICAgICAgOiB0aGlzLnRpdGxlTGluay5fZGlzYWJsZWRcbiAgICAgICAgICA/ICh0aGlzLmRpc2FibGVkID0gdHJ1ZSlcbiAgICAgICAgICA6ICh0aGlzLmRpc2FibGVkID0gZmFsc2UpO1xuICAgIH1cbiAgfVxufVxuIl19