100% Docs

src/components/sq-steps/sq-steps.component.ts

@@ -1,22 +1,5 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core'
-
-/**
- * Represents a step in a sequence of steps.
- *
- * @export
- * @interface Step
- */
-export interface Step {
-  /**
-   * Additional information or a tip related to the step.
-   */
-  tip?: string;
-
-  /**
-   * The status of the step (e.g., "completed", "active", "disabled").
-   */
-  status: string;
-}
+import { Step } from '../../interfaces/step.interface'
 
 /**
  * Represents a component for displaying a sequence of steps.

src/helpers/toast.helper.ts

@@ -1,61 +1,18 @@
 import { Injectable } from '@angular/core'
+import { Toast, ToastConfig, ToastResponse } from '../interfaces/toast.interface'
 
 /**
- * Represents Toast Instance.
- */
-export interface Toast {
-  success: (message: string, config: ToastConfig) => ToastResponse
-  error: (message: string, config: ToastConfig) => ToastResponse
-  inverted: (message: string, config: ToastConfig) => ToastResponse
-  info: (message: string, config: ToastConfig) => ToastResponse
-  warning: (message: string, config: ToastConfig) => ToastResponse
-  grayscale: (message: string, config: ToastConfig) => ToastResponse
-  custom: (message: string, config: ToastConfig) => ToastResponse
-  default: (message: string, config: ToastConfig) => ToastResponse
-  show: (message: string, config: ToastConfig) => ToastResponse
-  theme: (message: string, config: ToastConfig) => ToastResponse
-}
-
-/**
- * Globel declare to get from window
+ * Global declare to get from window
  */
 declare const Toast: Toast
 
-/**
- * Represents a response from a toast message.
- */
-export interface ToastResponse {
-  message: string; // The message content of the toast.
-  config: ToastConfig; // The configuration options used for the toast.
-}
-
-/**
- * Configuration options for a toast message.
- */
-export interface ToastConfig {
-  position?: string; // The position of the toast message on the screen.
-  className?: string; // Custom CSS class to be applied to the toast.
-  fadeDuration?: number; // Duration of the fade-in and fade-out animations.
-  fadeInterval?: number; // Interval between consecutive fade animations.
-  duration?: number; // Duration for which the toast is displayed.
-  closeButton?: boolean; // Indicates whether a close button should be displayed.
-  immediately?: boolean; // Indicates whether the toast should be displayed immediately without queuing.
-  notOverClick?: boolean; // Prevents the toast from being displayed over a click event.
-  onClick?: () => void; // A callback function to be executed when the toast is clicked.
-  persistent?: boolean; // Indicates whether the toast should be persistent until manually closed.
-}
-
 /**
  * A service for displaying toast messages in Angular applications.
  *
  * Toast messages are often used to provide feedback to users in a non-intrusive way. This service
  * provides methods to display different types of toast messages with various configurations.
  *
  * @example
- * // Import and inject the ToastHelper service in a component or service.
- * import { Component } from '@angular/core';
- * import { ToastHelper } from './toast-helper.service';
- *
  * @Component({
  *   selector: 'app-root',
  *   template: '<button (click)="showToast()">Show Toast</button>',
@@ -65,7 +22,7 @@ export interface ToastConfig {
  *
  *   showToast() {
  *     // Display a success toast message.
- *     this.toastHelper.toast.success('Operation was successful.', { duration: 3000 });
+ *     this.toastHelper.toast.success('Operation was successful.', { duration: 3000 })
  *   }
  * }
  */

src/interfaces/step.interface.ts

@@ -0,0 +1,17 @@
+/**
+ * Represents a step in a sequence of steps.
+ *
+ * @export
+ * @interface Step
+ */
+export interface Step {
+  /**
+   * Additional information or a tip related to the step.
+   */
+  tip?: string;
+
+  /**
+   * The status of the step (e.g., "completed", "active", "disabled").
+   */
+  status: string;
+}

src/interfaces/toast.interface.ts

@@ -0,0 +1,165 @@
+/**
+ * Represents a set of functions for displaying toast messages with various configurations.
+ * Each function corresponds to a different toast type.
+ */
+export interface Toast {
+  /**
+   * Display a success toast message.
+   *
+   * @param {string} message - The message content to display in the toast.
+   * @param {ToastConfig} config - Configuration options for the toast.
+   * @returns {ToastResponse} - An object containing the message and toast configuration.
+   */
+  success: (message: string, config: ToastConfig) => ToastResponse;
+
+  /**
+   * Display an error toast message.
+   *
+   * @param {string} message - The message content to display in the toast.
+   * @param {ToastConfig} config - Configuration options for the toast.
+   * @returns {ToastResponse} - An object containing the message and toast configuration.
+   */
+  error: (message: string, config: ToastConfig) => ToastResponse;
+
+  /**
+   * Display an inverted (styled) toast message.
+   *
+   * @param {string} message - The message content to display in the toast.
+   * @param {ToastConfig} config - Configuration options for the toast.
+   * @returns {ToastResponse} - An object containing the message and toast configuration.
+   */
+  inverted: (message: string, config: ToastConfig) => ToastResponse;
+
+  /**
+   * Display an information (info) toast message.
+   *
+   * @param {string} message - The message content to display in the toast.
+   * @param {ToastConfig} config - Configuration options for the toast.
+   * @returns {ToastResponse} - An object containing the message and toast configuration.
+   */
+  info: (message: string, config: ToastConfig) => ToastResponse;
+
+  /**
+   * Display a warning toast message.
+   *
+   * @param {string} message - The message content to display in the toast.
+   * @param {ToastConfig} config - Configuration options for the toast.
+   * @returns {ToastResponse} - An object containing the message and toast configuration.
+   */
+  warning: (message: string, config: ToastConfig) => ToastResponse;
+
+  /**
+   * Display a grayscale (styled) toast message.
+   *
+   * @param {string} message - The message content to display in the toast.
+   * @param {ToastConfig} config - Configuration options for the toast.
+   * @returns {ToastResponse} - An object containing the message and toast configuration.
+   */
+  grayscale: (message: string, config: ToastConfig) => ToastResponse;
+
+  /**
+   * Display a custom-styled toast message.
+   *
+   * @param {string} message - The message content to display in the toast.
+   * @param {ToastConfig} config - Configuration options for the toast.
+   * @returns {ToastResponse} - An object containing the message and toast configuration.
+   */
+  custom: (message: string, config: ToastConfig) => ToastResponse;
+
+  /**
+   * Display a default (unstyled) toast message.
+   *
+   * @param {string} message - The message content to display in the toast.
+   * @param {ToastConfig} config - Configuration options for the toast.
+   * @returns {ToastResponse} - An object containing the message and toast configuration.
+   */
+  default: (message: string, config: ToastConfig) => ToastResponse;
+
+  /**
+   * Display a toast message with custom styling or theme.
+   *
+   * @param {string} message - The message content to display in the toast.
+   * @param {ToastConfig} config - Configuration options for the toast.
+   * @returns {ToastResponse} - An object containing the message and toast configuration.
+   */
+  theme: (message: string, config: ToastConfig) => ToastResponse;
+
+  /**
+   * Display a toast message with custom configuration options.
+   *
+   * @param {string} message - The message content to display in the toast.
+   * @param {ToastConfig} config - Configuration options for the toast.
+   * @returns {ToastResponse} - An object containing the message and toast configuration.
+   */
+  show: (message: string, config: ToastConfig) => ToastResponse;
+}
+
+/**
+ * Represents the response object from displaying a toast message.
+ */
+export interface ToastResponse {
+  /**
+   * The message content that was displayed in the toast.
+   */
+  message: string;
+
+  /**
+   * Configuration options used for displaying the toast.
+   */
+  config: ToastConfig;
+}
+
+/**
+ * Represents the configuration options for displaying a toast message.
+ */
+export interface ToastConfig {
+  /**
+   * The position of the toast on the screen.
+   */
+  position?: string;
+
+  /**
+   * A custom CSS class name to apply to the toast element.
+   */
+  className?: string;
+
+  /**
+   * The duration (in milliseconds) for which the toast should remain visible.
+   */
+  fadeDuration?: number;
+
+  /**
+   * The interval (in milliseconds) for fading in/out the toast.
+   */
+  fadeInterval?: number;
+
+  /**
+   * The duration (in milliseconds) for which the toast should remain visible.
+   */
+  duration?: number;
+
+  /**
+   * Indicates whether the toast should have a close button.
+   */
+  closeButton?: boolean;
+
+  /**
+   * Indicates whether the toast should be displayed immediately.
+   */
+  immediately?: boolean;
+
+  /**
+   * Indicates whether the toast should not close when clicked.
+   */
+  notOverClick?: boolean;
+
+  /**
+   * A callback function to execute when the toast is clicked.
+   */
+  onClick?: () => void;
+
+  /**
+   * Indicates whether the toast should persist (not auto-close).
+   */
+  persistent?: boolean;
+}

src/public-api.ts

@@ -44,5 +44,7 @@ export * from './helpers/toast.helper'
 export * from './helpers/validator.helper'
 
 export * from './interfaces/option.interface'
+export * from './interfaces/step.interface'
+export * from './interfaces/toast.interface'
 
 export * from './main.module'