@sixbell-telco/sdk
Version:
A collection of reusable components designed for use in Sixbell Telco Angular projects
155 lines (150 loc) • 6.82 kB
JavaScript
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { ChangeDetectionStrategy, Component, input, contentChild, computed } from '@angular/core';
import { cn } from '@sixbell-telco/sdk/utils/cn';
import { cva } from 'class-variance-authority';
/**
* A container component for custom tooltip content
*
* @remarks
* Designed to be used within `<st-tooltip>` components to provide
* rich, customized tooltip content. When used, replaces the default
* text label with any arbitrary content.
*
* @example
* ```html
* <st-tooltip variant="warning">
* <button class="btn">Hover me</button>
* <st-tooltip-content>
* <div class="animate-pulse text-red-500">
* ⚠️ Critical warning!
* </div>
* </st-tooltip-content>
* </st-tooltip>
* ```
*
* @example
* ```html
* <st-tooltip position="right">
* <st-tooltip-content>
* <div class="flex items-center gap-2">
* <st-icon icon="info"></st-icon>
* <span>Custom tooltip layout</span>
* </div>
* </st-tooltip-content>
* <p class="cursor-pointer">Hover for details</p>
* </st-tooltip>
* ```
*/
class TooltipContentComponent {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: TooltipContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.0", type: TooltipContentComponent, isStandalone: true, selector: "st-tooltip-content", ngImport: i0, template: "<ng-content></ng-content>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: TooltipContentComponent, decorators: [{
type: Component,
args: [{ selector: 'st-tooltip-content', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n" }]
}] });
/**
* @internal
* Generates base tooltip classes with style variants
*/
const tooltipComponent = cva(['tooltip', 'inline-flex', 'items-center', 'align-top'], {
variants: {
variant: {
primary: ['tooltip-primary'],
secondary: ['tooltip-secondary'],
tertiary: ['tooltip-tertiary'],
success: ['tooltip-success'],
neutral: ['tooltip-neutral'],
warning: ['tooltip-warning'],
error: ['tooltip-error'],
info: ['tooltip-info'],
},
position: {
top: ['tooltip-top'],
bottom: ['tooltip-bottom'],
right: ['tooltip-right'],
left: ['tooltip-left'],
},
},
compoundVariants: [],
defaultVariants: {
variant: 'primary',
position: 'bottom',
},
});
/**
* A customizable tooltip component with multiple variants and content options
*
* @remarks
* Built with Tailwind CSS and class-variance-authority for style management.
* Supports both simple text labels and custom content tooltips.
*
* @example
* ```html
* <!-- Simple text tooltip -->
* <st-tooltip variant="primary" label="Information tooltip">
* <button class="btn">Hover me</button>
* </st-tooltip>
* ```
*
* @example
* ```html
* <!-- Custom content tooltip -->
* <st-tooltip position="right" variant="warning">
* <button class="btn">Dangerous action</button>
* <st-tooltip-content>
* <div class="text-red-500 font-bold">
* ⚠️ Proceed with caution!
* </div>
* </st-tooltip-content>
* </st-tooltip>
* ```
*/
class TooltipComponent {
/**
* Tooltip color variant
* @defaultValue 'primary'
*/
variant = input();
/**
* Tooltip position relative to target element
* @defaultValue 'bottom'
*/
position = input();
/**
* Text label for simple tooltip content
*/
label = input();
/**
* @internal
* Reference to custom tooltip content component
*/
customContent = contentChild(TooltipContentComponent);
/**
* @internal
* Computed flag indicating presence of custom content
*/
hasCustomContent = computed(() => !!this.customContent());
/**
* @internal
* Computed class string for the tooltip container
*/
componentClass = computed(() => {
return cn(tooltipComponent({
variant: this.variant(),
position: this.position(),
}));
});
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.0", type: TooltipComponent, isStandalone: true, selector: "st-tooltip", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "customContent", first: true, predicate: TooltipContentComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@let labelVar = label();\n@let hasCustomContentVar = hasCustomContent();\n@let componentClassVar = componentClass();\n\n<!-- tooltip.component.html -->\n<div [class]=\"componentClassVar\" [attr.data-tip]=\"hasCustomContentVar ? null : labelVar\">\n\t<ng-content></ng-content>\n\n\t@if (hasCustomContentVar) {\n\t\t<div class=\"tooltip-content\">\n\t\t\t<ng-content select=\"st-tooltip-content\"></ng-content>\n\t\t</div>\n\t}\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: TooltipComponent, decorators: [{
type: Component,
args: [{ selector: 'st-tooltip', imports: [CommonModule], template: "@let labelVar = label();\n@let hasCustomContentVar = hasCustomContent();\n@let componentClassVar = componentClass();\n\n<!-- tooltip.component.html -->\n<div [class]=\"componentClassVar\" [attr.data-tip]=\"hasCustomContentVar ? null : labelVar\">\n\t<ng-content></ng-content>\n\n\t@if (hasCustomContentVar) {\n\t\t<div class=\"tooltip-content\">\n\t\t\t<ng-content select=\"st-tooltip-content\"></ng-content>\n\t\t</div>\n\t}\n</div>\n" }]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { TooltipComponent, TooltipContentComponent, tooltipComponent };
//# sourceMappingURL=sixbell-telco-sdk-components-tooltip.mjs.map