@ngflux/ngflux 3.0.1 → 3.2.0

package/lib/components/form/message/message.component.scss

@@ -0,0 +1,18 @@
+:host {
+  display: none;
+  font-size: .8em;
+
+  &.show {
+    display: block;
+  }
+
+  > .pending {
+    display: block;
+    color: #666;
+  }
+
+  > .error {
+    display: block;
+    color: #F00;
+  }
+}

package/lib/components/input/select/items/items.component.scss

@@ -1,10 +1,11 @@
 :host {
   display: block;
   position: relative;
-  max-height: 200px;
+  max-height: 150px;
   overflow: hidden auto;
 
   &.has-parent {
+    max-height: auto;
     padding: 0px 0px 0px 10px;
 
     &::before {

package/lib/components/input/select/select.component.scss

@@ -17,6 +17,19 @@
     display: block;
     position: relative;
 
+    .overlay {
+      display: flex;
+      position: absolute;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      background-color: rgba(255, 255, 255, .9);
+      font-weight: 600;
+      color: #444;
+      inset: 0px;
+      z-index: 10;
+    }
+
     .header {
       display: flex;
       flex-direction: row;
@@ -56,7 +69,7 @@
         position: absolute;
         inset: 100% 0px auto 0px;
         box-shadow: 0px 0px 3px rgba(0, 0, 0, .7);
-        z-index: 5;
+        z-index: 15;
 
         &.show {
           display: block !important;

package/package.json

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

package/scss/features/dialog.scss

@@ -29,33 +29,43 @@
   height: 0px;
 }
 
-.ngf-dialog-box {
-  display: block;
-  position: relative;
-  font-family: "Poppins", sans-serif;
-  background-color: var(--ngf-dialog-background-color) !important;
-  box-shadow: var(--ngf-dialog-box-shadow) !important;
-  border: 1px solid transparent;
-  border-top: none;
-  border-bottom: none;
-  animation: ngfDialogOpen .5s forwards;
+.ngf-dialog {
+  &-box {
+    display: block;
+    position: relative;
+    font-family: "Poppins", sans-serif;
+    background-color: var(--ngf-dialog-background-color) !important;
+    box-shadow: var(--ngf-dialog-box-shadow) !important;
+    border: 1px solid transparent;
+    border-top: none;
+    border-bottom: none;
+    animation: ngfDialogOpen .5s forwards;
+
+    &:focus {
+      outline: none;
+    }
+
+    &.close {
+      pointer-events: none;
+      user-select: none;
+      -moz-user-select: none;
+      animation: ngfDialogClose .3s forwards;
+    }
 
-  &:focus {
-    outline: none;
+    [ngf-dialog-title] {
+      margin: 0px;
+      font-size: 1.1rem;
+      text-transform: uppercase;
+      font-weight: 500;
+    }
   }
 
-  &.close {
-    pointer-events: none;
-    user-select: none;
-    -moz-user-select: none;
-    animation: ngfDialogClose .3s forwards;
+  &-success {
+    color: #090;
   }
 
-  [ngf-dialog-title] {
-    margin: 0px;
-    font-size: 1.1rem;
-    text-transform: uppercase;
-    font-weight: 500;
+  &-error {
+    color: #F00;
   }
 }
 

package/types/ngflux-ngflux.d.ts

@@ -1,11 +1,11 @@
 import * as _angular_core from '@angular/core';
 import { InjectionToken, Signal, ViewContainerRef, Injector, InputSignal, InputSignalWithTransform, ModelSignal, TemplateRef } from '@angular/core';
+import * as i1 from '@angular/router';
+import { Route, Data, CanActivateFn, CanActivateChildFn, CanDeactivateFn, CanMatchFn } from '@angular/router';
 import * as _ngflux_ngflux from '@ngflux/ngflux';
 import * as rxjs from 'rxjs';
 import { Observable } from 'rxjs';
-import { FormValueControl } from '@angular/forms/signals';
-import * as i1 from '@angular/router';
-import { Route, Data } from '@angular/router';
+import { FormValueControl, Field, FieldState } from '@angular/forms/signals';
 
 type ButtonDirection = 'normal' | 'reversed';
 type ButtonTheme = 'default' | 'primary' | 'secondary' | 'error' | 'danger' | 'success' | 'warning' | 'info' | 'light' | 'dark';
@@ -191,6 +191,13 @@ type FrameOptions = {
 
 declare const provideNgFlux: (config?: NgFluxConfig) => _angular_core.EnvironmentProviders;
 
+declare namespace NgFlux.SerialGuard {
+    function canActivateFn(...guards: CanActivateFn[]): CanActivateFn;
+    function canActivateChildFn(...guards: CanActivateChildFn[]): CanActivateChildFn;
+    function canDeactivateFn<T>(...guards: CanDeactivateFn<T>[]): CanDeactivateFn<T>;
+    function canMatchFn(...guards: CanMatchFn[]): CanMatchFn;
+}
+
 type Justify = 'start' | 'center' | 'end' | 'stretch';
 declare class NgFluxActions {
     readonly justify: _angular_core.InputSignal<Justify>;
@@ -328,14 +335,18 @@ declare class NgFluxSelect<V = any> implements FormValueControl<V | V[] | null>
     readonly block: InputSignalWithTransform<boolean, unknown>;
     readonly multi: InputSignalWithTransform<boolean, unknown>;
     readonly placeholder: InputSignal<string | undefined>;
+    readonly loading: InputSignal<boolean>;
+    readonly loadingText: InputSignal<string>;
     readonly transform: InputSignal<SelectTransformer<any, V>>;
     protected readonly mapper: _angular_core.Signal<Map<V, any>>;
     readonly value: ModelSignal<V | V[] | null>;
     protected readonly vmap: _angular_core.Signal<Map<V, any>>;
+    protected readonly items: _angular_core.Signal<any[]>;
     protected readonly open: _angular_core.WritableSignal<boolean>;
     protected readonly searchbox: _angular_core.WritableSignal<string>;
     protected readonly search: _angular_core.Signal<any[]>;
     protected readonly headerText: _angular_core.Signal<string>;
+    constructor();
     private doFlatMap;
     private doSearch;
     protected toggleOpen(): void;
@@ -343,7 +354,7 @@ declare class NgFluxSelect<V = any> implements FormValueControl<V | V[] | null>
     protected readonly options: SelectItemOptions;
     protected onDocumentClick(e: PointerEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgFluxSelect<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgFluxSelect<any>, "ngf-select", never, { "data": { "alias": "data"; "required": true; "isSignal": true; }; "block": { "alias": "block"; "required": false; "isSignal": true; }; "multi": { "alias": "multi"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "transform": { "alias": "transform"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgFluxSelect<any>, "ngf-select", never, { "data": { "alias": "data"; "required": true; "isSignal": true; }; "block": { "alias": "block"; "required": false; "isSignal": true; }; "multi": { "alias": "multi"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "loadingText": { "alias": "loadingText"; "required": false; "isSignal": true; }; "transform": { "alias": "transform"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
 }
 
 declare class PinInputDirective {
@@ -467,5 +478,16 @@ declare class NgFluxFrame {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgFluxFrame, "ngf-frame", never, { "viewport": { "alias": "viewport"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
-export { NGF_CONFIG, NGF_DIALOG_DATA, NgFluxActions, NgFluxButton, NgFluxDialog, NgFluxDialogBody, NgFluxDialogFooter, NgFluxDialogHeader, NgFluxDialogInstance, NgFluxDialogRef, NgFluxDialogRootComponent, NgFluxFrame, NgFluxLoading, NgFluxLoadingRootComponent, NgFluxPagination, NgFluxPinInput, NgFluxSelect, NgFluxTab, NgFluxTabContentDirective, NgFluxTabGroup, NgFluxTabNavDirective, NgFluxTabNavbar, NgFluxTabPanel, provideNgFlux };
+declare class NgFluxFormMessage {
+    readonly field: _angular_core.InputSignal<Field<any>>;
+    readonly pending: _angular_core.InputSignal<string>;
+    protected readonly fieldState: _angular_core.Signal<FieldState<any, string | number>>;
+    protected readonly validate: _angular_core.Signal<boolean>;
+    protected readonly show: _angular_core.Signal<boolean>;
+    protected readonly errorMessage: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgFluxFormMessage, never>;
+    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, 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 };