@ngflux/ngflux 2.1.0 → 2.2.0

package/scss/features/icons.scss

@@ -22,6 +22,40 @@
   &.search::before { content: "\e8b6"; }
   &.close::before { content: "\e5cd"; }
 
+  &.arrow-drop-down::before { content: "\e5c5"; }
+  &.arrow-drop-up::before { content: "\e5c7"; }
+
+  &.unfold-more::before { content: "\e5d7"; }
+  &.unfold-less::before { content: "\e5d6"; }
+
   &.chevron-left::before { content: "\e5cb"; }
   &.chevron-right::before { content: "\e5cc"; }
+
+  &.add::before { content: "\e145"; }
+  &.edit::before { content: "\e3c9"; }
+  &.eye::before { content: "\e8f4"; }
+  &.trash::before { content: "\e872"; }
+  &.refresh::before { content: "\e5d5"; }
+  &.close::before { content: "\e5cd"; }
+  &.filter::before { content: "\ef4f"; }
+  &.upgrade::before { content: "\f0fb"; }
+  &.download::before { content: "\f090"; }
+  &.upload::before { content: "\f09b"; }
+
+  &.heart::before { content: "\e87d"; }
+  &.heart-plus::before { content: "\f884"; }
+  &.heart-minus::before { content: "\f883"; }
+  &.heart-check::before { content: "\f60a"; }
+
+  &.cart::before { content: "\e8cc"; }
+  &.cart-plus::before { content: "\e854"; }
+  &.cart-minus::before { content: "\e928"; }
+  &.cart-checkout::before { content: "\eb88"; }
+  &.cart-off::before { content: "\f4f7"; }
+
+  &.arrow-up::before { content: "\e986"; }
+  &.arrow-down::before { content: "\e984"; }
+
+  &.arrow-left::before { content: "\ef7d"; }
+  &.arrow-right::before { content: "\e941"; }
 }

package/scss/features/tab.scss

@@ -0,0 +1,31 @@
+.ngf-tab-nav {
+  display: block;
+  padding: 10px 30px;
+  background-color: var(--background-color) !important;
+  color: var(--color) !important;
+  text-decoration: none !important;
+  cursor: pointer;
+
+  --color: #333;
+  --background-color: #FFF;
+
+  &:hover {
+    --background-color: rgba(var(--ngf-primary-rgb), .1);
+  }
+
+  &.active {
+    position: relative;
+
+    --color: var(--ngf-primary);
+
+    &::before {
+      display: block;
+      position: absolute;
+      inset: auto 0px -1px 0px;
+      background-color: var(--ngf-primary);
+      height: 3px;
+      content: "";
+      z-index: 2;
+    }
+  }
+}

package/types/ngflux-ngflux.d.ts

@@ -1,8 +1,11 @@
 import * as _angular_core from '@angular/core';
-import { InjectionToken, Signal, ViewContainerRef, Injector } from '@angular/core';
+import { InjectionToken, Signal, ViewContainerRef, Injector, InputSignal, InputSignalWithTransform, ModelSignal, TemplateRef } from '@angular/core';
 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';
 
 type ButtonDirection = 'normal' | 'reversed';
 type ButtonTheme = 'default' | 'primary' | 'secondary' | 'error' | 'danger' | 'success' | 'warning' | 'info' | 'light' | 'dark';
@@ -43,6 +46,18 @@ type PaginationInfo = {
     page: number;
 };
 
+type NgFluxConfig = {
+    loading?: LoadingOptions;
+    dialog?: DialogOptions;
+    pagination?: PaginationOptions;
+    title?: RouterTitleOptions;
+};
+declare const NGF_CONFIG: InjectionToken<NgFluxConfig>;
+type RouterTitleOptions = {
+    separator?: string;
+    prefix?: string;
+    suffix?: string;
+};
 type LoadingOptions = {
     showOnRouteNavigation?: boolean;
     component?: NgFluxComponent;
@@ -69,12 +84,6 @@ type PaginationOptions = {
     limitOptions?: number[];
     limit?: number;
 };
-type NgFluxConfig = {
-    loading?: LoadingOptions;
-    dialog?: DialogOptions;
-    pagination?: PaginationOptions;
-};
-declare const NGF_CONFIG: InjectionToken<NgFluxConfig>;
 
 type OnClosed<T = any> = (cmd: NgFluxDialogCommand<T>) => void;
 declare class NgFluxDialogRef<T = any> {
@@ -132,8 +141,65 @@ type NgFluxLoadingEntry = {
     text: string;
 };
 
+type NgFluxRoutes = NgFluxRoute[];
+type NgFluxRoute = Route & {
+    addParentTitle?: boolean;
+    parentTitleSeparator?: string;
+    description?: string;
+    keywords?: string | string[];
+    getTitle?: (data: Data) => string;
+    getDescription?: (data: Data) => string;
+    getKeywords?: (data: Data) => string | string[];
+    children?: NgFluxRoutes;
+};
+
+type SelectItem<T = any, V = any> = {
+    label: string;
+    value: V;
+    children?: T[];
+    disabled?: boolean;
+};
+type SelectTransformer<T = any, V = any> = {
+    getLabel(item: T): string;
+    getValue(item: T): V;
+    getChildren?(item: T): T[];
+    setChildren?(item: T, children: T[]): void;
+    isDisabled?(item: T): boolean;
+};
+
+type Menu = {
+    text: string;
+    icon?: string;
+    href?: string;
+    isExternal?: boolean;
+    targetBlank?: boolean;
+    onClick?: (e: PointerEvent, item: Menu) => any;
+    children?: Menu[];
+};
+
+type FrameSize = 'auto' | 'viewport';
+type FrameToolbarItem = {};
+type FrameHeaderMenu = Omit<Menu, 'children'>;
+type FrameOptions = {
+    title?: () => string;
+    icon?: () => string;
+    image?: () => string;
+    toolbarItems?: () => FrameToolbarItem[];
+    headerMenu?: () => FrameHeaderMenu[];
+    sideMenu?: () => Menu[];
+};
+
 declare const provideNgFlux: (config?: NgFluxConfig) => _angular_core.EnvironmentProviders;
 
+type Justify = 'start' | 'center' | 'end' | 'stretch';
+declare class NgFluxActions {
+    readonly justify: _angular_core.InputSignal<Justify>;
+    readonly wrap: _angular_core.InputSignal<boolean>;
+    readonly gap: _angular_core.InputSignal<number>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgFluxActions, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgFluxActions, "ngf-actions", never, { "justify": { "alias": "justify"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
 declare class NgFluxButton {
     private readonly ref;
     readonly icon: _angular_core.InputSignal<string | undefined>;
@@ -252,5 +318,154 @@ declare class NgFluxPagination {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgFluxPagination, "ngf-pagination", never, { "data": { "alias": "data"; "required": true; "isSignal": true; }; "preload": { "alias": "preload"; "required": false; "isSignal": true; }; "transform": { "alias": "transform"; "required": false; "isSignal": true; }; "limit": { "alias": "limit"; "required": false; "isSignal": true; }; "limitOptions": { "alias": "limitOptions"; "required": false; "isSignal": true; }; }, { "limit": "limitChange"; "callback": "callback"; }, never, ["*"], true, never>;
 }
 
-export { NGF_CONFIG, NGF_DIALOG_DATA, NgFluxButton, NgFluxDialog, NgFluxDialogBodyComponent, NgFluxDialogFooterComponent, NgFluxDialogHeaderComponent, NgFluxDialogInstance, NgFluxDialogRef, NgFluxDialogRootComponent, NgFluxLoading, NgFluxLoadingRootComponent, NgFluxPagination, provideNgFlux };
-export type { ButtonDirection, ButtonOptions, ButtonSize, ButtonTheme, ButtonType, NgFluxComponent, NgFluxConfig, NgFluxDialogAlertOptions, NgFluxDialogButton, NgFluxDialogButtonObj, NgFluxDialogCommand, NgFluxDialogConfig, NgFluxDialogConfirmOptions, NgFluxDialogEvents, NgFluxDialogPromptOptions, NgFluxDialogRoot, NgFluxLoadingEntry, Pagination, PaginationInfo, PaginationTransformer };
+type SelectItemOptions = {
+    getSelected: (item: any) => boolean;
+};
+
+declare class NgFluxSelect<V = any> implements FormValueControl<V | V[] | null> {
+    private readonly ref;
+    readonly data: InputSignal<any[]>;
+    readonly block: InputSignalWithTransform<boolean, unknown>;
+    readonly multi: InputSignalWithTransform<boolean, unknown>;
+    readonly placeholder: InputSignal<string | undefined>;
+    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 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>;
+    private doFlatMap;
+    private doSearch;
+    protected toggleOpen(): void;
+    protected toggle(item: any): void;
+    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>;
+}
+
+declare class PinInputDirective {
+    private readonly ref;
+    readonly elem: HTMLInputElement;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PinInputDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<PinInputDirective, "[pinInput]", never, {}, {}, never, never, true, never>;
+}
+
+declare class NgFluxPinInput implements FormValueControl<string> {
+    readonly chars: InputSignal<number>;
+    readonly block: InputSignalWithTransform<boolean, unknown>;
+    readonly value: _angular_core.ModelSignal<string>;
+    protected readonly values: _angular_core.Signal<string[]>;
+    protected readonly inputs: _angular_core.Signal<readonly PinInputDirective[]>;
+    protected onKeyDown(e: KeyboardEvent, index: number): void;
+    protected onPaste(e: ClipboardEvent, index: number): void;
+    private setFocus;
+    private readonly allowed;
+    focus(options?: FocusOptions): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgFluxPinInput, never>;
+    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 TabNavController {
+    private readonly map;
+    readonly navs: _angular_core.Signal<NgFluxTabNavDirective[]>;
+    private readonly selected;
+    readonly selectedIndex: _angular_core.WritableSignal<number>;
+    readonly active: _angular_core.Signal<NgFluxTabNavDirective | null>;
+    readonly activeContent: _angular_core.Signal<NgFluxTabContentDirective | undefined>;
+    activate(nav: NgFluxTabNavDirective): void;
+    add(nav: NgFluxTabNavDirective): void;
+    remove(nav: NgFluxTabNavDirective): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TabNavController, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<TabNavController>;
+}
+
+declare class TabGroupController {
+    private readonly map;
+    readonly tabs: _angular_core.Signal<NgFluxTab[]>;
+    add(nav: NgFluxTab): void;
+    remove(nav: NgFluxTab): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TabGroupController, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<TabGroupController>;
+}
+
+declare class NgFluxTabContentDirective {
+    readonly templateRef: TemplateRef<any>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgFluxTabContentDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgFluxTabContentDirective, "[ngfTabContent]", ["content"], {}, {}, never, never, true, never>;
+}
+
+declare class NgFluxTabNavDirective {
+    private readonly routerLink;
+    private readonly routerLinkActive;
+    protected readonly ctrl: TabNavController;
+    readonly content: _angular_core.InputSignal<NgFluxTabContentDirective | undefined>;
+    readonly navContent: _angular_core.Signal<NgFluxTabContentDirective | undefined>;
+    private readonly routeActive;
+    protected readonly active: _angular_core.Signal<boolean>;
+    constructor();
+    protected activate(e?: PointerEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgFluxTabNavDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgFluxTabNavDirective, "[ngfTabNav]", never, { "content": { "alias": "content"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.RouterLink; inputs: { "routerLink": "link"; }; outputs: {}; }, { directive: typeof i1.RouterLinkActive; inputs: {}; outputs: {}; }]>;
+}
+
+declare class NgFluxTab {
+    private readonly ctrl;
+    readonly label: _angular_core.InputSignal<string>;
+    readonly navLabel: _angular_core.Signal<string>;
+    readonly content: _angular_core.Signal<NgFluxTabContentDirective>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgFluxTab, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgFluxTab, "ngf-tab", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+declare class NgFluxTabGroup {
+    protected readonly ctrl: TabGroupController;
+    readonly selectedIndex: _angular_core.InputSignal<number>;
+    protected readonly showTabs: boolean;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgFluxTabGroup, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgFluxTabGroup, "ngf-tab-group", never, { "selectedIndex": { "alias": "selectedIndex"; "required": false; "isSignal": true; }; }, {}, never, ["ngf-tab"], true, never>;
+}
+
+declare class NgFluxTabPanel {
+    readonly label: _angular_core.InputSignal<string | undefined>;
+    protected readonly content: _angular_core.WritableSignal<TemplateRef<any> | null>;
+    setContent(tpl?: TemplateRef<any>): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgFluxTabPanel, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgFluxTabPanel, "ngf-tab-panel", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class NgFluxTabNavbar {
+    private readonly ctrl;
+    readonly panel: _angular_core.InputSignal<NgFluxTabPanel | undefined>;
+    readonly selectedIndex: _angular_core.InputSignal<number>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgFluxTabNavbar, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgFluxTabNavbar, "ngf-tab-navbar", never, { "panel": { "alias": "panel"; "required": false; "isSignal": true; }; "selectedIndex": { "alias": "selectedIndex"; "required": false; "isSignal": true; }; }, {}, never, ["[ngfTabNav]"], true, never>;
+}
+
+declare class NgFluxFrame {
+    private readonly leftRef;
+    readonly viewport: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly options: _angular_core.InputSignal<FrameOptions>;
+    protected readonly title: _angular_core.Signal<string>;
+    protected readonly icon: _angular_core.Signal<string>;
+    protected readonly image: _angular_core.Signal<string>;
+    protected readonly toolbarItems: _angular_core.Signal<_ngflux_ngflux.FrameToolbarItem[]>;
+    protected readonly headerMenu: _angular_core.Signal<_ngflux_ngflux.FrameHeaderMenu[]>;
+    protected readonly drawer: _angular_core.WritableSignal<boolean>;
+    protected readonly search: _angular_core.WritableSignal<string>;
+    protected readonly searchText: _angular_core.Resource<string>;
+    protected readonly sideMenu: _angular_core.Signal<Menu[]>;
+    private searchMenu;
+    protected toggleDrawer(e?: PointerEvent): void;
+    protected closeDrawer(e?: PointerEvent): void;
+    protected onDocumentClick(e: PointerEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgFluxFrame, never>;
+    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, NgFluxDialogBodyComponent, NgFluxDialogFooterComponent, NgFluxDialogHeaderComponent, NgFluxDialogInstance, NgFluxDialogRef, NgFluxDialogRootComponent, 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 };