Tooltip

import { Component } from '@angular/core';
import { HlmButtonImports } from '@spartan-ng/helm/button';
import { HlmTooltipImports } from '@spartan-ng/helm/tooltip';

@Component({
	selector: 'spartan-tooltip-preview',
	imports: [HlmTooltipImports, HlmButtonImports],
	template: `
		<button hlmTooltip="Add to library" hlmBtn variant="outline">Default</button>
	`,
})
export class TooltipPreview {}

import { Component } from '@angular/core';
import { HlmButtonImports } from '@spartan-ng/helm/button';
import { HlmTooltipImports } from '@spartan-ng/helm/tooltip';

@Component({
	selector: 'spartan-tooltip-simple',
	imports: [HlmButtonImports, HlmTooltipImports],
	template: `
		<button [hlmTooltip]="'Simple tooltip'" hlmBtn variant="outline">Simple</button>
	`,
})
export class TooltipSimple {}

import { Component } from '@angular/core';
import { HlmButtonImports } from '@spartan-ng/helm/button';
import { HlmTooltipImports } from '@spartan-ng/helm/tooltip';

@Component({
	selector: 'spartan-tooltip-position',
	imports: [HlmButtonImports, HlmTooltipImports],
	host: {
		class: 'flex flex-col space-y-2',
	},
	template: `
		<button type="button" hlmBtn variant="outline" hlmTooltip="Tooltip content" position="top">Top</button>

		<div class="flex space-x-2">
			<button type="button" hlmBtn variant="outline" hlmTooltip="Tooltip content" position="left">Left</button>
			<button type="button" hlmBtn variant="outline" hlmTooltip="Tooltip content" position="right">Right</button>
		</div>

		<button type="button" hlmBtn variant="outline" hlmTooltip="Tooltip content" position="bottom">Bottom</button>
	`,
})
export class TooltipPosition {}

import { Component } from '@angular/core';
import { HlmButtonImports } from '@spartan-ng/helm/button';
import { HlmTooltipImports } from '@spartan-ng/helm/tooltip';

@Component({
	selector: 'spartan-tooltip-disabled',
	imports: [HlmButtonImports, HlmTooltipImports],
	template: `
		<button [hlmTooltip]="'Simple tooltip'" [tooltipDisabled]="true" hlmBtn variant="outline">Simple</button>
	`,
})
export class TooltipDisabled {}

import { Component } from '@angular/core';
import { HlmButtonImports } from '@spartan-ng/helm/button';
import { HlmTooltipImports } from '@spartan-ng/helm/tooltip';

@Component({
	selector: 'spartan-tooltip-disabled-button-with-tooltip',
	imports: [HlmButtonImports, HlmTooltipImports],
	template: `
		<div hlmTooltip="Simple tooltip">
			<button hlmBtn variant="outline" disabled>Disabled Button</button>
		</div>
	`,
})
export class TooltipDisabledButtonWithTooltip {}

import { Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucidePlus } from '@ng-icons/lucide';
import { HlmButtonImports } from '@spartan-ng/helm/button';
import { HlmTooltipImports } from '@spartan-ng/helm/tooltip';

@Component({
	selector: 'spartan-tooltip-template',
	imports: [HlmButtonImports, HlmTooltipImports, NgIcon],
	providers: [provideIcons({ lucidePlus })],
	template: `
		<button [hlmTooltip]="tooltip" hlmBtn variant="outline">Simple</button>

		<ng-template #tooltip>
			<span class="flex items-center">
				Add to library
				<ng-icon class="ml-2 text-sm" name="lucidePlus" />
			</span>
		</ng-template>
	`,
})
export class TooltipTemplate {}