@visa/nova-angular
Version:
Visa Product Design System Nova Angular library
95 lines • 8.41 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 { Directive, Input, HostBinding, ElementRef } from '@angular/core';
import * as i0 from "@angular/core";
export class TooltipArrowDirective {
get hostClasses() {
return this.class;
}
/**
* Sets the background color to the same variable as the tooltip itself.
*/
get hostBackground() {
return 'var(--v-surface-background)';
}
get hostPosition() {
return 'absolute';
}
/**
* This ensures the arrow is behind the tooltip content.
*/
get hostZIndex() {
return '-1';
}
get hostWidth() {
return this.customSize + 'px';
}
get hostHeight() {
return this.customSize + 'px';
}
get hostTransform() {
return 'rotate(45deg)';
}
constructor(el) {
this.el = el;
/**
* Provides custom class(es) for custom styling.
* @class .v-tooltip-arrow
*/
this.class = 'v-tooltip-arrow'; // override the standard class attr with a new one.
/**
* Sets custom size *in pixels* for the arrow.
* @default 8
*/
this.customSize = 8;
} // ElementRef needed for floating-ui-container
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TooltipArrowDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: TooltipArrowDirective, isStandalone: true, selector: "[v-tooltip-arrow], ", inputs: { class: "class", customSize: "customSize" }, host: { properties: { "class": "this.hostClasses", "style.background-color": "this.hostBackground", "style.position": "this.hostPosition", "style.z-index": "this.hostZIndex", "style.inline-size": "this.hostWidth", "style.block-size": "this.hostHeight", "style.transform": "this.hostTransform" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TooltipArrowDirective, decorators: [{
type: Directive,
args: [{
standalone: true,
selector: '[v-tooltip-arrow], '
}]
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { class: [{
type: Input
}], hostClasses: [{
type: HostBinding,
args: ['class']
}], hostBackground: [{
type: HostBinding,
args: ['style.background-color']
}], hostPosition: [{
type: HostBinding,
args: ['style.position']
}], hostZIndex: [{
type: HostBinding,
args: ['style.z-index']
}], customSize: [{
type: Input
}], hostWidth: [{
type: HostBinding,
args: ['style.inline-size']
}], hostHeight: [{
type: HostBinding,
args: ['style.block-size']
}], hostTransform: [{
type: HostBinding,
args: ['style.transform']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXJyb3cuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9ub3ZhLWxpYi9zcmMvbGliL2Fycm93L2Fycm93LmRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7Ozs7Ozs7Ozs7O0lBZUk7QUFDSixPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxXQUFXLEVBQUUsVUFBVSxFQUFFLE1BQU0sZUFBZSxDQUFDOztBQU0xRSxNQUFNLE9BQU8scUJBQXFCO0lBTWhDLElBQ0ksV0FBVztRQUNiLE9BQU8sSUFBSSxDQUFDLEtBQUssQ0FBQztJQUNwQixDQUFDO0lBRUQ7O09BRUc7SUFDSCxJQUNJLGNBQWM7UUFDaEIsT0FBTyw2QkFBNkIsQ0FBQztJQUN2QyxDQUFDO0lBRUQsSUFDSSxZQUFZO1FBQ2QsT0FBTyxVQUFVLENBQUM7SUFDcEIsQ0FBQztJQUVEOztPQUVHO0lBQ0gsSUFDSSxVQUFVO1FBQ1osT0FBTyxJQUFJLENBQUM7SUFDZCxDQUFDO0lBT0QsSUFDSSxTQUFTO1FBQ1gsT0FBTyxJQUFJLENBQUMsVUFBVSxHQUFHLElBQUksQ0FBQztJQUNoQyxDQUFDO0lBRUQsSUFDSSxVQUFVO1FBQ1osT0FBTyxJQUFJLENBQUMsVUFBVSxHQUFHLElBQUksQ0FBQztJQUNoQyxDQUFDO0lBRUQsSUFDSSxhQUFhO1FBQ2YsT0FBTyxlQUFlLENBQUM7SUFDekIsQ0FBQztJQUVELFlBQW1CLEVBQWM7UUFBZCxPQUFFLEdBQUYsRUFBRSxDQUFZO1FBbkRqQzs7O1dBR0c7UUFDTSxVQUFLLEdBQVcsaUJBQWlCLENBQUMsQ0FBQyxtREFBbUQ7UUEyQi9GOzs7V0FHRztRQUNNLGVBQVUsR0FBVyxDQUFDLENBQUM7SUFnQkksQ0FBQyxDQUFDLDhDQUE4QzsrR0FwRHpFLHFCQUFxQjttR0FBckIscUJBQXFCOzs0RkFBckIscUJBQXFCO2tCQUpqQyxTQUFTO21CQUFDO29CQUNULFVBQVUsRUFBRSxJQUFJO29CQUNoQixRQUFRLEVBQUUscUJBQXFCO2lCQUNoQzsrRUFNVSxLQUFLO3NCQUFiLEtBQUs7Z0JBRUYsV0FBVztzQkFEZCxXQUFXO3VCQUFDLE9BQU87Z0JBU2hCLGNBQWM7c0JBRGpCLFdBQVc7dUJBQUMsd0JBQXdCO2dCQU1qQyxZQUFZO3NCQURmLFdBQVc7dUJBQUMsZ0JBQWdCO2dCQVN6QixVQUFVO3NCQURiLFdBQVc7dUJBQUMsZUFBZTtnQkFTbkIsVUFBVTtzQkFBbEIsS0FBSztnQkFFRixTQUFTO3NCQURaLFdBQVc7dUJBQUMsbUJBQW1CO2dCQU01QixVQUFVO3NCQURiLFdBQVc7dUJBQUMsa0JBQWtCO2dCQU0zQixhQUFhO3NCQURoQixXQUFXO3VCQUFDLGlCQUFpQiIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogICAgICAgICAgICAgIENvcHlyaWdodCAoYykgMjAyNSBWaXNhLCBJbmMuXG4gKlxuICogTGljZW5zZWQgdW5kZXIgdGhlIEFwYWNoZSBMaWNlbnNlLCBWZXJzaW9uIDIuMCAodGhlIFwiTGljZW5zZVwiKTtcbiAqIHlvdSBtYXkgbm90IHVzZSB0aGlzIGZpbGUgZXhjZXB0IGluIGNvbXBsaWFuY2Ugd2l0aCB0aGUgTGljZW5zZS5cbiAqIFlvdSBtYXkgb2J0YWluIGEgY29weSBvZiB0aGUgTGljZW5zZSBhdFxuICpcbiAqICAgICAgICAgaHR0cDovL3d3dy5hcGFjaGUub3JnL2xpY2Vuc2VzL0xJQ0VOU0UtMi4wXG4gKlxuICogVW5sZXNzIHJlcXVpcmVkIGJ5IGFwcGxpY2FibGUgbGF3IG9yIGFncmVlZCB0byBpbiB3cml0aW5nLCBzb2Z0d2FyZVxuICogZGlzdHJpYnV0ZWQgdW5kZXIgdGhlIExpY2Vuc2UgaXMgZGlzdHJpYnV0ZWQgb24gYW4gXCJBUyBJU1wiIEJBU0lTLFxuICogV0lUSE9VVCBXQVJSQU5USUVTIE9SIENPTkRJVElPTlMgT0YgQU5ZIEtJTkQsIGVpdGhlciBleHByZXNzIG9yIGltcGxpZWQuXG4gKiBTZWUgdGhlIExpY2Vuc2UgZm9yIHRoZSBzcGVjaWZpYyBsYW5ndWFnZSBnb3Zlcm5pbmcgcGVybWlzc2lvbnMgYW5kXG4gKiBsaW1pdGF0aW9ucyB1bmRlciB0aGUgTGljZW5zZS5cbiAqXG4gKiovXG5pbXBvcnQgeyBEaXJlY3RpdmUsIElucHV0LCBIb3N0QmluZGluZywgRWxlbWVudFJlZiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5ARGlyZWN0aXZlKHtcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgc2VsZWN0b3I6ICdbdi10b29sdGlwLWFycm93XSwgJ1xufSlcbmV4cG9ydCBjbGFzcyBUb29sdGlwQXJyb3dEaXJlY3RpdmUge1xuICAvKipcbiAgICogUHJvdmlkZXMgY3VzdG9tIGNsYXNzJiM0MDtlcyYjNDE7IGZvciBjdXN0b20gc3R5bGluZy5cbiAgICogQGNsYXNzIC52LXRvb2x0aXAtYXJyb3dcbiAgICovXG4gIEBJbnB1dCgpIGNsYXNzOiBzdHJpbmcgPSAndi10b29sdGlwLWFycm93JzsgLy8gb3ZlcnJpZGUgdGhlIHN0YW5kYXJkIGNsYXNzIGF0dHIgd2l0aCBhIG5ldyBvbmUuXG4gIEBIb3N0QmluZGluZygnY2xhc3MnKVxuICBnZXQgaG9zdENsYXNzZXMoKTogc3RyaW5nIHtcbiAgICByZXR1cm4gdGhpcy5jbGFzcztcbiAgfVxuXG4gIC8qKlxuICAgKiBTZXRzIHRoZSBiYWNrZ3JvdW5kIGNvbG9yIHRvIHRoZSBzYW1lIHZhcmlhYmxlIGFzIHRoZSB0b29sdGlwIGl0c2VsZi5cbiAgICovXG4gIEBIb3N0QmluZGluZygnc3R5bGUuYmFja2dyb3VuZC1jb2xvcicpXG4gIGdldCBob3N0QmFja2dyb3VuZCgpOiBzdHJpbmcge1xuICAgIHJldHVybiAndmFyKC0tdi1zdXJmYWNlLWJhY2tncm91bmQpJztcbiAgfVxuXG4gIEBIb3N0QmluZGluZygnc3R5bGUucG9zaXRpb24nKVxuICBnZXQgaG9zdFBvc2l0aW9uKCk6IHN0cmluZyB7XG4gICAgcmV0dXJuICdhYnNvbHV0ZSc7XG4gIH1cblxuICAvKipcbiAgICogVGhpcyBlbnN1cmVzIHRoZSBhcnJvdyBpcyBiZWhpbmQgdGhlIHRvb2x0aXAgY29udGVudC5cbiAgICovXG4gIEBIb3N0QmluZGluZygnc3R5bGUuei1pbmRleCcpXG4gIGdldCBob3N0WkluZGV4KCk6IHN0cmluZyB7XG4gICAgcmV0dXJuICctMSc7XG4gIH1cblxuICAvKipcbiAgICogU2V0cyBjdXN0b20gc2l6ZSAqaW4gcGl4ZWxzKiBmb3IgdGhlIGFycm93LlxuICAgKiBAZGVmYXVsdCA4XG4gICAqL1xuICBASW5wdXQoKSBjdXN0b21TaXplOiBudW1iZXIgPSA4O1xuICBASG9zdEJpbmRpbmcoJ3N0eWxlLmlubGluZS1zaXplJylcbiAgZ2V0IGhvc3RXaWR0aCgpOiBzdHJpbmcge1xuICAgIHJldHVybiB0aGlzLmN1c3RvbVNpemUgKyAncHgnO1xuICB9XG5cbiAgQEhvc3RCaW5kaW5nKCdzdHlsZS5ibG9jay1zaXplJylcbiAgZ2V0IGhvc3RIZWlnaHQoKTogc3RyaW5nIHtcbiAgICByZXR1cm4gdGhpcy5jdXN0b21TaXplICsgJ3B4JztcbiAgfVxuXG4gIEBIb3N0QmluZGluZygnc3R5bGUudHJhbnNmb3JtJylcbiAgZ2V0IGhvc3RUcmFuc2Zvcm0oKTogc3RyaW5nIHtcbiAgICByZXR1cm4gJ3JvdGF0ZSg0NWRlZyknO1xuICB9XG5cbiAgY29uc3RydWN0b3IocHVibGljIGVsOiBFbGVtZW50UmVmKSB7fSAvLyBFbGVtZW50UmVmIG5lZWRlZCBmb3IgZmxvYXRpbmctdWktY29udGFpbmVyXG59XG4iXX0=