@sixbell-telco/sdk/fesm2022/sixbell-telco-sdk-components-sonner.mjs

A collection of reusable components designed for use in Sixbell Telco Angular projects

import { cva } from 'class-variance-authority';
import { toast as toast$1, NgxSonnerToaster } from 'ngx-sonner';
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
import { cn } from '@sixbell-telco/sdk/utils/cn';

/**
 * @internal
 * Generates base toast classes with style variants for semantic colors
 */
const toastVariants = cva('', {
    variants: {
        variant: {
            default: '',
            success: 'text-success',
            error: 'text-error',
            warning: 'text-warning',
            info: 'text-info',
        },
    },
    defaultVariants: {
        variant: 'default',
    },
});
/**
 * Toast function with semantic variants and Tailwind styling
 * Proxies ngx-sonner toast functionality with SDK styling
 */
function createToast(message, options) {
    return toast$1(message, options);
}
// Add methods to the function
createToast.success = (message, options) => {
    return toast$1.success(message, options);
};
createToast.error = (message, options) => {
    return toast$1.error(message, options);
};
// IMPORTANT: use the variant helpers so ngx-sonner applies variant metadata (was plain toast before)
createToast.warning = (message, options) => {
    return toast$1.warning(message, options);
};
createToast.info = (message, options) => {
    return toast$1.info(message, options);
};
createToast.loading = (message, options) => toast$1.loading(message, options);
createToast.promise = (promise, options) => toast$1.promise(promise, options);
createToast.custom = (component, options) => toast$1.custom(component, options);
createToast.dismiss = (id) => toast$1.dismiss(id);
createToast.dismissAll = () => toast$1.dismiss();
const toast = createToast;

/**
 * Sixbell Telco Sonner Toaster Component
 *
 * A wrapper around ngx-sonner-toaster that provides Tailwind CSS styling and semantic color variants.
 * This component proxies the ngx-sonner-toaster functionality while applying the SDK's design system.
 *
 * @example
 * ```html
 * <st-sonner-toaster
 *   [theme]="'light'"
 *   [position]="'bottom-right'"
 *   [richColors]="true"
 * />
 * ```
 */
class SonnerToasterComponent {
    /**
     * Direction for the toasts
     * @defaultValue 'ltr'
     */
    dir = input('ltr');
    /**
     * Whether to use rich colors for semantic toasts
     * @defaultValue true
     */
    richColors = input(false);
    /**
     * Whether to expand the toast on hover
     * @defaultValue false
     */
    expand = input(false);
    /**
     * Maximum number of visible toasts
     * @defaultValue 3
     */
    visibleToasts = input(3);
    /**
     * Position of the toasts
     * @defaultValue 'bottom-right'
     */
    position = input('bottom-right');
    /**
     * Offset from the edge of the screen
     * @defaultValue '16px'
     */
    offset = input('16px');
    /**
     * Whether to show close button
     * @defaultValue false
     */
    closeButton = input(false);
    /**
     * Duration for the toast in milliseconds
     * @defaultValue 4000
     */
    duration = input(4000);
    /**
     * Default toast options with semantic styling
     */
    toastOptions = computed(() => {
        const baseClasses = {
            toast: cn('p-4! w-[22rem]! bg-base-200! data-[type=loading]:border-neutral! data-[type=default]:border-neutral! border! text-base-content! rounded-box shadow-main-lg! text-pretty! transition-[transform,opacity,height,box-shadow,border-color,color]! duration-[400ms,400ms,400ms,200ms,200ms,200ms]!', { 'border-neutral!': this.richColors() === false }),
            title: cn('font-medium! font-heading!'),
            description: cn('text-base-content/70!'),
            actionButton: cn('btn! btn-primary! btn-xs! text-pretty! font-body! font-medium! leading-normal!'),
            cancelButton: cn('btn! btn-secondary! btn-xs! text-pretty! font-body! font-medium! leading-normal!'),
            closeButton: cn('btn! btn-circle! btn-xs! text-pretty! font-body! border-neutral! border!'),
        };
        const semanticClasses = this.richColors()
            ? {
                success: cn('bg-base-200! border-success! text-success!'),
                error: cn('bg-base-200! border-error! text-error!'),
                warning: cn('bg-base-200! border-warning! text-warning!'),
                info: cn('bg-base-200! border-info! text-info!'),
            }
            : {};
        return {
            unstyled: false,
            classes: {
                ...baseClasses,
                ...semanticClasses,
            },
        };
    });
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: SonnerToasterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.0", type: SonnerToasterComponent, isStandalone: true, selector: "st-sonner-toaster", inputs: { dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, richColors: { classPropertyName: "richColors", publicName: "richColors", isSignal: true, isRequired: false, transformFunction: null }, expand: { classPropertyName: "expand", publicName: "expand", isSignal: true, isRequired: false, transformFunction: null }, visibleToasts: { classPropertyName: "visibleToasts", publicName: "visibleToasts", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, closeButton: { classPropertyName: "closeButton", publicName: "closeButton", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
		<ngx-sonner-toaster
			[dir]="dir()"
			[expand]="expand()"
			[visibleToasts]="visibleToasts()"
			[position]="position()"
			[offset]="offset()"
			[closeButton]="closeButton()"
			[duration]="duration()"
			[toastOptions]="toastOptions()"
		/>
	`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: NgxSonnerToaster, selector: "ngx-sonner-toaster", inputs: ["invert", "theme", "position", "hotKey", "richColors", "expand", "duration", "visibleToasts", "closeButton", "toastOptions", "offset", "dir", "class", "style"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: SonnerToasterComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'st-sonner-toaster',
                    imports: [CommonModule, NgxSonnerToaster],
                    template: `
		<ngx-sonner-toaster
			[dir]="dir()"
			[expand]="expand()"
			[visibleToasts]="visibleToasts()"
			[position]="position()"
			[offset]="offset()"
			[closeButton]="closeButton()"
			[duration]="duration()"
			[toastOptions]="toastOptions()"
		/>
	`,
                    standalone: true,
                    changeDetection: ChangeDetectionStrategy.OnPush,
                }]
        }] });

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

export { SonnerToasterComponent, toast, toastVariants };
//# sourceMappingURL=sixbell-telco-sdk-components-sonner.mjs.map