@ngflux/ngflux 3.2.3 → 3.2.5

package/lib/components/toast/group/group.component.scss

@@ -0,0 +1,55 @@
+:host {
+  display: block;
+  position: absolute;
+  width: calc(100% - (2 * var(--ngf-toast-x)));
+  transition: opacity .5s ease-in-out;
+  max-width: 300px;
+
+  --flex-direction: column;
+
+  &.topLeft {
+    inset: var(--ngf-toast-y) auto auto var(--ngf-toast-x);
+  }
+
+  &.topCenter {
+    inset: var(--ngf-toast-y) auto auto 50%;
+    transform: translateX(-50%);
+  }
+
+  &.topRight {
+    inset: var(--ngf-toast-y) var(--ngf-toast-x) auto auto;
+  }
+
+  &.bottomLeft {
+    inset: auto auto var(--ngf-toast-y) var(--ngf-toast-x);
+
+    --flex-direction: column-reverse;
+  }
+
+  &.bottomCenter {
+    inset: auto auto var(--ngf-toast-y) 50%;
+    transform: translateX(-50%);
+
+    --flex-direction: column-reverse;
+  }
+
+  &.bottomRight {
+    inset: auto var(--ngf-toast-x) var(--ngf-toast-y) auto;
+
+    --flex-direction: column-reverse;
+  }
+
+  .wrapper {
+    display: flex;
+    flex-direction: var(--flex-direction) !important;
+    gap: 10px;
+
+    .fade-in {
+      opacity: 1;
+    }
+
+    .fade-out {
+      opacity: 0;
+    }
+  }
+}

package/lib/components/toast/root/root.component.scss

@@ -0,0 +1,17 @@
+:host {
+  display: block;
+  visibility: hidden;
+  height: 0px !important;
+
+  .wrapper {
+    display: block;
+    position: fixed;
+    visibility: hidden;
+    z-index: var(--ngf-toast-z-index) !important;
+    inset: 0px;
+
+    .fade-out {
+      opacity: 0;
+    }
+  }
+}

package/lib/components/toast/toast.component.scss

@@ -0,0 +1,28 @@
+:host {
+  display: block;
+  box-shadow: 0px 0px 3px rgba(0, 0, 0, .7);
+  visibility: visible !important;
+  padding: 5px 10px;
+  font-size: .8rem;
+  transition: opacity .5s ease-in-out;
+  opacity: 0;
+
+  .wrapper {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 10px;
+
+    > .content {
+      display: block;
+      flex: 1 0 0;
+      font-weight: 500;
+    }
+
+    > .close-btn {
+      display: block;
+      cursor: pointer;
+      padding: 5px;
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngflux/ngflux",
-  "version": "3.2.3",
+  "version": "3.2.5",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/NgFlux/ngflux.git"

package/scss/_variables.scss

@@ -93,3 +93,9 @@ $dialog-background-color: #FFF !default;
 $dialog-box-shadow: 0px 0px 5px rgba(0, 0, 0, .4) !default;
 $dialog-border: 1px solid #DDD !default;
 // END: Dialog Variables
+
+// BEGIN: Toast Variables
+$toast-x: 20px !default;
+$toast-y: 20px !default;
+$toast-z-index: 2000 !default;
+// END: Toast Variables

package/scss/features/_index.scss

@@ -2,4 +2,6 @@
 @use './icons.scss';
 @use './loading.scss';
 @use './dialog.scss';
+@use './toast.scss';
+@use './theme.scss';
 @use './tab.scss';

package/scss/features/theme.scss

@@ -0,0 +1,51 @@
+.ngf-theme {
+  &-default {
+    background-color: var(--ngf-default) !important;
+    color: var(--ngf-default-fg) !important;
+  }
+
+  &-primary {
+    background-color: var(--ngf-primary) !important;
+    color: var(--ngf-primary-fg) !important;
+  }
+
+  &-secondary {
+    background-color: var(--ngf-secondary) !important;
+    color: var(--ngf-secondary-fg) !important;
+  }
+
+  &-error {
+    background-color: var(--ngf-error) !important;
+    color: var(--ngf-error-fg) !important;
+  }
+
+  &-danger {
+    background-color: var(--ngf-danger) !important;
+    color: var(--ngf-danger-fg) !important;
+  }
+
+  &-success {
+    background-color: var(--ngf-success) !important;
+    color: var(--ngf-success-fg) !important;
+  }
+
+  &-warning {
+    background-color: var(--ngf-warning) !important;
+    color: var(--ngf-warning-fg) !important;
+  }
+
+  &-info {
+    background-color: var(--ngf-info) !important;
+    color: var(--ngf-info-fg) !important;
+  }
+
+  &-light {
+    background-color: var(--ngf-light) !important;
+    color: var(--ngf-light-fg) !important;
+  }
+
+  &-dark {
+    background-color: var(--ngf-dark) !important;
+    color: var(--ngf-dark-fg) !important;
+  }
+}

package/scss/features/toast.scss

@@ -0,0 +1,23 @@
+@use '../system' as ngf;
+
+:root {
+  // --ngf-dialog-z-index: #{ngf.$dialog-z-index};
+  // --ngf-dialog-backdrop-color: #{ngf.$dialog-backdrop-color};
+
+  // --ngf-dialog-closebtn-color: #{ngf.$dialog-closebtn-color};
+  // --ngf-dialog-closebtn-opacity: #{ngf.$dialog-closebtn-opacity};
+
+  // --ngf-dialog-text-color: #{ngf.$dialog-text-color};
+  // --ngf-dialog-header-text-color: #{ngf.$dialog-header-text-color};
+  // --ngf-dialog-footer-text-color: #{ngf.$dialog-footer-text-color};
+
+  // --ngf-dialog-padding: #{ngf.$dialog-padding};
+  // --ngf-dialog-background-color: #{ngf.$dialog-background-color};
+  // --ngf-dialog-box-shadow: #{ngf.$dialog-box-shadow};
+  // --ngf-dialog-border: #{ngf.$dialog-border};
+
+  --ngf-toast-x: #{ngf.$toast-x};
+  --ngf-toast-y: #{ngf.$toast-y};
+
+  --ngf-toast-z-index: #{ngf.$toast-z-index};
+}

package/types/ngflux-ngflux.d.ts

@@ -7,8 +7,10 @@ import * as rxjs from 'rxjs';
 import { Observable } from 'rxjs';
 import { FormValueControl, FieldTree, FormSubmitOptions, Field, FieldState } from '@angular/forms/signals';
 
+type NgFluxTheme = 'default' | 'primary' | 'secondary' | 'error' | 'danger' | 'success' | 'warning' | 'info' | 'light' | 'dark';
+
 type ButtonDirection = 'normal' | 'reversed';
-type ButtonTheme = 'default' | 'primary' | 'secondary' | 'error' | 'danger' | 'success' | 'warning' | 'info' | 'light' | 'dark';
+type ButtonTheme = NgFluxTheme;
 type ButtonType = 'submit' | 'button' | 'reset' | 'menu';
 type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 type ButtonOptions = {
@@ -46,44 +48,77 @@ type PaginationInfo = {
     page: number;
 };
 
+type ToastPlacement = 'topLeft' | 'topCenter' | 'topRight' | 'bottomLeft' | 'bottomCenter' | 'bottomRight';
+type ToastOptions = {
+    /**
+     * Content of the toast
+     */
+    content: string;
+    /**
+     * Placement of the toast
+     * The default placement is `topRight`
+     */
+    placement?: ToastPlacement;
+    /**
+     * Whether to show the close button.
+     * The default value is `true`
+     */
+    showCloseButton?: boolean;
+    /**
+     * Timeout in milliseconds.
+     * The default timeout is `5000` (5 seconds).
+     */
+    timeout?: number;
+    /**
+     * Theme for the Toast
+     * The default theme is `info`
+     */
+    theme?: NgFluxTheme;
+};
+type ToastOptionsWithoutTheme = Omit<ToastOptions, 'theme'>;
+
 type NgFluxConfig = {
-    loading?: LoadingOptions;
-    dialog?: DialogOptions;
-    pagination?: PaginationOptions;
-    title?: RouterTitleOptions;
+    loading?: LoadingConfiguration;
+    dialog?: DialogConfiguration;
+    pagination?: PaginationConfiguration;
+    title?: RouterTitleConfiguration;
+    toast?: ToastConfiguration;
 };
 declare const NGF_CONFIG: InjectionToken<NgFluxConfig>;
-type RouterTitleOptions = {
+type RouterTitleConfiguration = {
     separator?: string;
     prefix?: string;
     suffix?: string;
 };
-type LoadingOptions = {
+type LoadingConfiguration = {
     showOnRouteNavigation?: boolean;
     component?: NgFluxComponent;
 };
-type DialogAlertOptions = {
+type DialogAlertConfiguration = {
     okayButton?: ButtonOptions;
 };
-type DialogConfirmOptions = {
+type DialogConfirmConfiguration = {
     okayButton?: ButtonOptions;
     cancelButton?: ButtonOptions;
 };
-type DialogPromptOptions = {
+type DialogPromptConfiguration = {
     submitButton?: ButtonOptions;
     cancelButton?: ButtonOptions;
 };
-type DialogOptions = {
-    alert?: DialogAlertOptions;
-    confirm?: DialogConfirmOptions;
-    prompt?: DialogPromptOptions;
+type DialogConfiguration = {
+    alert?: DialogAlertConfiguration;
+    confirm?: DialogConfirmConfiguration;
+    prompt?: DialogPromptConfiguration;
 };
-type PaginationOptions = {
+type PaginationConfiguration = {
     preload?: boolean;
     transform?: PaginationTransformer;
     limitOptions?: number[];
     limit?: number;
 };
+type ToastConfiguration = {
+    options?: Omit<ToastOptions, 'content'>;
+};
 
 type OnClosed<T = any> = (cmd: NgFluxDialogCommand<T>) => void;
 declare class NgFluxDialogRef<T = any> {
@@ -210,7 +245,7 @@ declare class NgFluxActions {
 declare class NgFluxButton {
     private readonly ref;
     readonly icon: _angular_core.InputSignal<string | undefined>;
-    readonly theme: _angular_core.InputSignal<ButtonTheme | undefined>;
+    readonly theme: _angular_core.InputSignal<_ngflux_ngflux.NgFluxTheme | undefined>;
     readonly type: _angular_core.InputSignal<ButtonType | undefined>;
     readonly size: _angular_core.InputSignal<ButtonSize | undefined>;
     readonly direction: _angular_core.InputSignal<ButtonDirection | undefined>;
@@ -254,7 +289,7 @@ declare class NgFluxDialog {
     alert(data: NgFluxDialogAlertOptions): rxjs.Observable<boolean | null>;
     success(data: NgFluxDialogAlertOptions): rxjs.Observable<boolean | null>;
     error(data: NgFluxDialogAlertOptions): rxjs.Observable<boolean | null>;
-    confirm(data: NgFluxDialogConfirmOptions): rxjs.Observable<any>;
+    confirm(data: NgFluxDialogConfirmOptions): rxjs.Observable<boolean>;
     prompt(data: NgFluxDialogPromptOptions): rxjs.Observable<any>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgFluxDialog, never>;
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<NgFluxDialog>;
@@ -279,6 +314,27 @@ declare class NgFluxDialogInstance<T = any> {
     send(cmd: NgFluxDialogCommand<T>): void;
 }
 
+declare class NgFluxToast {
+    private readonly config;
+    private readonly ctrl;
+    show(options: ToastOptions): void;
+    showDefault(options: ToastOptionsWithoutTheme): void;
+    showPrimary(options: ToastOptionsWithoutTheme): void;
+    showSecondary(options: ToastOptionsWithoutTheme): void;
+    showError(options: ToastOptionsWithoutTheme): void;
+    showDanger(options: ToastOptionsWithoutTheme): void;
+    showSuccess(options: ToastOptionsWithoutTheme): void;
+    showWarning(options: ToastOptionsWithoutTheme): void;
+    showInfo(options: ToastOptionsWithoutTheme): void;
+    showLight(options: ToastOptionsWithoutTheme): void;
+    showDark(options: ToastOptionsWithoutTheme): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgFluxToast, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<NgFluxToast>;
+}
+
+declare class ToastInstance {
+}
+
 declare class NgFluxDialogHeader {
     readonly config: _ngflux_ngflux.NgFluxDialogConfig;
     readonly dialogRef: NgFluxDialogRef<unknown>;
@@ -287,13 +343,6 @@ declare class NgFluxDialogHeader {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgFluxDialogHeader, "ngf-dialog-header", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
-declare class NgFluxDialogRootComponent {
-    readonly injector: Injector;
-    readonly viewContainer: _angular_core.Signal<ViewContainerRef>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgFluxDialogRootComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgFluxDialogRootComponent, "ngf-dialog-root", never, {}, {}, never, never, true, never>;
-}
-
 declare class NgFluxLoadingRootComponent {
     private readonly config;
     private readonly injector;
@@ -379,6 +428,13 @@ declare class NgFluxPinInput implements FormValueControl<string> {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgFluxPinInput, "ngf-pin-input", never, { "chars": { "alias": "chars"; "required": false; "isSignal": true; }; "block": { "alias": "block"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
 }
 
+declare class NgFluxThemeDirective {
+    readonly ngfTheme: _angular_core.ModelSignal<NgFluxTheme>;
+    protected className: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgFluxThemeDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgFluxThemeDirective, "[ngfTheme]", never, { "ngfTheme": { "alias": "ngfTheme"; "required": false; "isSignal": true; }; }, { "ngfTheme": "ngfThemeChange"; }, never, never, true, never>;
+}
+
 declare class NgFluxForm<TModel> {
     readonly root: _angular_core.InputSignal<FieldTree<TModel>>;
     readonly options: _angular_core.InputSignal<FormSubmitOptions<unknown, TModel> | undefined>;
@@ -498,5 +554,5 @@ declare class NgFluxFormMessage {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgFluxFormMessage, "ngf-form-message", never, { "field": { "alias": "field"; "required": true; "isSignal": true; }; "pending": { "alias": "pending"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-export { NGF_CONFIG, NGF_DIALOG_DATA, NgFlux, NgFluxActions, NgFluxButton, NgFluxDialog, NgFluxDialogBody, NgFluxDialogFooter, NgFluxDialogHeader, NgFluxDialogInstance, NgFluxDialogRef, NgFluxDialogRootComponent, NgFluxForm, NgFluxFormMessage, NgFluxFrame, NgFluxLoading, NgFluxLoadingRootComponent, NgFluxPagination, NgFluxPinInput, NgFluxSelect, NgFluxTab, NgFluxTabContentDirective, NgFluxTabGroup, NgFluxTabNavDirective, NgFluxTabNavbar, NgFluxTabPanel, provideNgFlux };
-export type { ButtonDirection, ButtonOptions, ButtonSize, ButtonTheme, ButtonType, FrameHeaderMenu, FrameOptions, FrameSize, FrameToolbarItem, Menu, NgFluxComponent, NgFluxConfig, NgFluxDialogAlertOptions, NgFluxDialogButton, NgFluxDialogButtonObj, NgFluxDialogCommand, NgFluxDialogConfig, NgFluxDialogConfirmOptions, NgFluxDialogEvents, NgFluxDialogPromptOptions, NgFluxDialogRoot, NgFluxLoadingEntry, NgFluxRoute, NgFluxRoutes, Pagination, PaginationInfo, PaginationTransformer, SelectItem, SelectTransformer };
+export { NGF_CONFIG, NGF_DIALOG_DATA, NgFlux, NgFluxActions, NgFluxButton, NgFluxDialog, NgFluxDialogBody, NgFluxDialogFooter, NgFluxDialogHeader, NgFluxDialogInstance, NgFluxDialogRef, NgFluxForm, NgFluxFormMessage, NgFluxFrame, NgFluxLoading, NgFluxLoadingRootComponent, NgFluxPagination, NgFluxPinInput, NgFluxSelect, NgFluxTab, NgFluxTabContentDirective, NgFluxTabGroup, NgFluxTabNavDirective, NgFluxTabNavbar, NgFluxTabPanel, NgFluxThemeDirective, NgFluxToast, ToastInstance, provideNgFlux };
+export type { ButtonDirection, ButtonOptions, ButtonSize, ButtonTheme, ButtonType, FrameHeaderMenu, FrameOptions, FrameSize, FrameToolbarItem, Menu, NgFluxComponent, NgFluxConfig, NgFluxDialogAlertOptions, NgFluxDialogButton, NgFluxDialogButtonObj, NgFluxDialogCommand, NgFluxDialogConfig, NgFluxDialogConfirmOptions, NgFluxDialogEvents, NgFluxDialogPromptOptions, NgFluxDialogRoot, NgFluxLoadingEntry, NgFluxRoute, NgFluxRoutes, NgFluxTheme, Pagination, PaginationInfo, PaginationTransformer, SelectItem, SelectTransformer, ToastOptions, ToastOptionsWithoutTheme, ToastPlacement };