flowbite-angular/fesm2022/flowbite-angular-tooltip.mjs

<div align="center"> <h1>flowbite-angular</h1> <p> Build websites even faster with components on top of Angular and Tailwind CSS </p> <p> <a href="https://discord.com/invite/4eeurUVvTy"> <img src="https://img.shields.io/discord/90291

import { createTheme, mergeDeep, colorToTheme } from 'flowbite-angular';
import * as i0 from '@angular/core';
import { InjectionToken, inject, input, computed, Directive } from '@angular/core';
import { createStateToken, createStateProvider, createStateInjector, createState } from 'ng-primitives/state';
import { twMerge } from 'tailwind-merge';

const flowbiteTooltipTheme = createTheme({
    host: {
        base: 'absolute z-10 inline-block rounded-lg border p-3 py-2 text-sm font-medium shadow-xs',
        transition: '',
        color: {
            default: {
                light: 'border-gray-200 bg-gray-100 text-gray-900',
                dark: 'dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100',
            },
            info: {
                light: 'border-blue-200 bg-gray-100 text-gray-900',
                dark: 'dark:border-blue-800 dark:bg-gray-900 dark:text-gray-100',
            },
            failure: {
                light: 'border-red-200 bg-gray-100 text-gray-900',
                dark: 'dark:border-red-800 dark:bg-gray-900 dark:text-gray-100',
            },
            success: {
                light: 'border-green-200 bg-gray-100 text-gray-900',
                dark: 'dark:border-green-800 dark:bg-gray-900 dark:text-gray-100',
            },
            warning: {
                light: 'border-yellow-200 bg-gray-100 text-gray-900',
                dark: 'dark:border-yellow-800 dark:bg-gray-900 dark:text-gray-100',
            },
            primary: {
                light: 'border-primary-200 bg-gray-100 text-gray-900',
                dark: 'dark:border-primary-800 dark:bg-gray-900 dark:text-gray-100',
            },
        },
    },
});

const defaultFlowbiteTooltipConfig = {
    baseTheme: flowbiteTooltipTheme,
    color: 'default',
    customTheme: {},
};
const FlowbiteTooltipConfigToken = new InjectionToken('FlowbiteTooltipConfigToken');
/**
 * Provide the default Tooltip configuration
 * @param config The Tooltip configuration
 * @returns The provider
 */
const provideFlowbiteTooltipConfig = (config) => [
    {
        provide: FlowbiteTooltipConfigToken,
        useValue: { ...defaultFlowbiteTooltipConfig, ...config },
    },
];
/**
 * Inject the Tooltip configuration
 * @see {@link defaultFlowbiteTooltipConfig}
 * @returns The configuration
 */
const injectFlowbiteTooltipConfig = () => inject(FlowbiteTooltipConfigToken, { optional: true }) ?? defaultFlowbiteTooltipConfig;

const FlowbiteTooltipStateToken = createStateToken('Flowbite Tooltip');
const provideFlowbiteTooltipState = createStateProvider(FlowbiteTooltipStateToken);
const injectFlowbiteTooltipState = createStateInjector(FlowbiteTooltipStateToken);
const flowbiteTooltipState = createState(FlowbiteTooltipStateToken);

class Tooltip {
    constructor() {
        this.config = injectFlowbiteTooltipConfig();
        /**
         * @see {@link injectFlowbiteTooltipConfig}
         */
        this.color = input(this.config.color);
        /**
         * @see {@link injectFlowbiteTooltipConfig}
         */
        this.customTheme = input(this.config.customTheme);
        this.theme = computed(() => {
            const mergedTheme = mergeDeep(this.config.baseTheme, this.state.customTheme());
            return {
                host: {
                    root: twMerge(mergedTheme.host.base, colorToTheme(mergedTheme.host.color, this.state.color())),
                },
            };
        });
        /**
         * @internal
         */
        this.state = flowbiteTooltipState(this);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Tooltip, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: Tooltip, isStandalone: true, selector: "\n    [flowbiteTooltip]\n  ", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, customTheme: { classPropertyName: "customTheme", publicName: "customTheme", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "theme().host.root" } }, providers: [provideFlowbiteTooltipState()], exportAs: ["flowbiteTooltip"], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Tooltip, decorators: [{
            type: Directive,
            args: [{
                    standalone: true,
                    selector: `
    [flowbiteTooltip]
  `,
                    exportAs: 'flowbiteTooltip',
                    hostDirectives: [],
                    providers: [provideFlowbiteTooltipState()],
                    host: { '[class]': `theme().host.root` },
                }]
        }] });

/* Tooltip */

/**
 * Generated bundle index. Do not edit.
 */

export { FlowbiteTooltipConfigToken, FlowbiteTooltipStateToken, Tooltip, defaultFlowbiteTooltipConfig, flowbiteTooltipState, flowbiteTooltipTheme, injectFlowbiteTooltipConfig, injectFlowbiteTooltipState, provideFlowbiteTooltipConfig, provideFlowbiteTooltipState };
//# sourceMappingURL=flowbite-angular-tooltip.mjs.map