@ecodev/natural 62.1.2 → 62.3.0

package/lib/modules/table-button/table-button.component.d.ts

@@ -1,6 +1,6 @@
-import { EventEmitter, OnChanges } from '@angular/core';
-import { Params, QueryParamsHandling, RouterLink } from '@angular/router';
+import { Params, QueryParamsHandling, UrlTree } from '@angular/router';
 import { ThemePalette } from '@angular/material/core';
+import { Subject } from 'rxjs';
 import * as i0 from "@angular/core";
 /**
  * Button that fits well in a `<mat-table>` and support either
@@ -12,21 +12,21 @@ import * as i0 from "@angular/core";
  *
  * External URL will always be opened in new tab.
  */
-export declare class NaturalTableButtonComponent implements OnChanges {
-    queryParams: Params;
-    queryParamsHandling: QueryParamsHandling;
-    label?: string | null;
-    icon?: string | null;
-    href?: string | null;
-    navigate: RouterLink['routerLink'];
-    fragment?: string | undefined;
-    preserveFragment: boolean;
-    disabled: boolean;
-    raised: boolean;
-    color: ThemePalette;
-    readonly buttonClick: EventEmitter<MouseEvent>;
-    type: 'routerLink' | 'href' | 'click' | 'none';
-    ngOnChanges(): void;
+export declare class NaturalTableButtonComponent {
+    readonly queryParams: import("@angular/core").InputSignal<Params>;
+    readonly queryParamsHandling: import("@angular/core").InputSignal<QueryParamsHandling>;
+    readonly label: import("@angular/core").InputSignal<string | null | undefined>;
+    readonly icon: import("@angular/core").InputSignal<string | null | undefined>;
+    readonly href: import("@angular/core").InputSignal<string | null | undefined>;
+    readonly navigate: import("@angular/core").InputSignal<string | any[] | UrlTree | null | undefined>;
+    readonly fragment: import("@angular/core").InputSignal<string | undefined>;
+    readonly preserveFragment: import("@angular/core").InputSignal<boolean>;
+    readonly disabled: import("@angular/core").InputSignal<boolean>;
+    readonly raised: import("@angular/core").InputSignal<boolean>;
+    readonly color: import("@angular/core").InputSignal<ThemePalette>;
+    protected readonly buttonClick$: Subject<MouseEvent>;
+    readonly buttonClick: import("@angular/core").OutputRef<MouseEvent>;
+    protected readonly type: import("@angular/core").Signal<"click" | "routerLink" | "none" | "href">;
     static ɵfac: i0.ɵɵFactoryDeclaration<NaturalTableButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NaturalTableButtonComponent, "natural-table-button", never, { "queryParams": { "alias": "queryParams"; "required": false; }; "queryParamsHandling": { "alias": "queryParamsHandling"; "required": false; }; "label": { "alias": "label"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "href": { "alias": "href"; "required": false; }; "navigate": { "alias": "navigate"; "required": false; }; "fragment": { "alias": "fragment"; "required": false; }; "preserveFragment": { "alias": "preserveFragment"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "raised": { "alias": "raised"; "required": false; }; "color": { "alias": "color"; "required": false; }; }, { "buttonClick": "buttonClick"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NaturalTableButtonComponent, "natural-table-button", never, { "queryParams": { "alias": "queryParams"; "required": false; "isSignal": true; }; "queryParamsHandling": { "alias": "queryParamsHandling"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "navigate": { "alias": "navigate"; "required": false; "isSignal": true; }; "fragment": { "alias": "fragment"; "required": false; "isSignal": true; }; "preserveFragment": { "alias": "preserveFragment"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "raised": { "alias": "raised"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; }, { "buttonClick": "buttonClick"; }, never, never, true, never>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecodev/natural",
-  "version": "62.1.2",
+  "version": "62.3.0",
   "license": "MIT",
   "repository": "github:Ecodev/natural",
   "sideEffects": false,
@@ -8,31 +8,33 @@
     ".": {
       "sass": "./theming/_natural.theme.scss",
       "types": "./index.d.ts",
-      "esm2022": "./esm2022/ecodev-natural.mjs",
-      "esm": "./esm2022/ecodev-natural.mjs",
       "default": "./fesm2022/ecodev-natural.mjs"
     },
     "./package.json": {
       "default": "./package.json"
+    },
+    "./vanilla": {
+      "types": "./vanilla/index.d.ts",
+      "default": "./fesm2022/ecodev-natural-vanilla.mjs"
     }
   },
   "dependencies": {
     "extract-files": "^13.0.0",
-    "tslib": "^2.5.3"
+    "tslib": "^2.8.1"
   },
   "peerDependencies": {
-    "@angular/animations": "^18.1.0",
-    "@angular/cdk": "^18.1.0",
-    "@angular/common": "^18.1.0",
-    "@angular/core": "^18.1.0",
-    "@angular/forms": "^18.1.0",
-    "@angular/localize": "^18.1.0",
-    "@angular/material": "^18.1.0",
-    "@angular/platform-browser": "^18.1.0",
-    "@angular/router": "^18.1.0",
+    "@angular/animations": "^19.2.0",
+    "@angular/cdk": "^19.2.0",
+    "@angular/common": "^19.2.0",
+    "@angular/core": "^19.2.0",
+    "@angular/forms": "^19.2.0",
+    "@angular/localize": "^19.2.0",
+    "@angular/material": "^19.2.0",
+    "@angular/platform-browser": "^19.2.0",
+    "@angular/router": "^19.2.0",
     "apollo-angular": "^10.0.0",
     "lodash-es": "^4.17.21",
-    "rxjs": "^7.8.1"
+    "rxjs": "^7.8.2"
   },
   "module": "fesm2022/ecodev-natural.mjs",
   "typings": "index.d.ts"

package/public-api.d.ts

@@ -8,6 +8,7 @@ export * from './lib/classes/query-variable-manager';
 export { cancellableTimeout, debug } from './lib/classes/rxjs';
 export * from './lib/classes/utility';
 export * from './lib/classes/validators';
+export { NetworkActivityService, activityInterceptor } from './lib/classes/network-activity.service';
 export { validTlds } from './lib/classes/tld';
 export * from './lib/services/abstract-model.service';
 export { NaturalDebounceService } from './lib/services/debounce.service';

package/src/lib/_natural.theme.scss

@@ -58,8 +58,7 @@ $defaultConfig: mat.m2-define-typography-config();
 
 // This is the default Material typography, but with button with normal letter-spacing instead of wider letter-spacing.
 $typography: mat.m2-define-typography-config(
-    $button:
-        mat.m2-define-typography-level(
+    $button: mat.m2-define-typography-level(
             $font-family: mat.m2-font-family($defaultConfig, 'button'),
             $font-weight: mat.m2-font-weight($defaultConfig, 'button'),
             $font-size: mat.m2-font-size($defaultConfig, 'button'),

package/vanilla/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@ecodev/natural/vanilla" />
+export * from './public-api';

package/vanilla/package.json

@@ -0,0 +1,3 @@
+{
+  "module": "../fesm2022/ecodev-natural-vanilla.mjs"
+}

package/vanilla/public-api.d.ts

@@ -0,0 +1,11 @@
+/**
+ * **DO NOT MODIFY UNLESS STRICTLY REQUIRED FOR VANILLA**
+ *
+ * This is a minimal service specialized for Vanilla and any modification,
+ * including adding `import` in this file, might break https://navigations.ichtus.club.
+ */
+export { NaturalQueryVariablesManager } from './src/lib/classes/query-variable-manager';
+export type { Literal } from './src/lib/types/types';
+export { graphqlQuerySigner } from './src/lib/classes/signing';
+export { formatIsoDateTime } from './src/lib/classes/utility';
+export { NaturalAbstractModelService, type FormValidators } from './src/lib/services/abstract-model.service';

package/vanilla/src/lib/classes/crypto.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Thin wrapper around browsers' native SubtleCrypto for convenience of use
+ */
+export declare function sha256(message: string): Promise<string>;
+/**
+ * Thin wrapper around browsers' native SubtleCrypto for convenience of use
+ */
+export declare function hmacSha256(secret: string, payload: string): Promise<string>;

package/vanilla/src/lib/classes/data-source.d.ts

@@ -0,0 +1,32 @@
+import { DataSource } from '@angular/cdk/collections';
+import { Observable } from 'rxjs';
+import { Literal } from '../types/types';
+export type PaginatedData<T> = {
+    readonly items: readonly T[];
+    readonly offset?: number | null;
+    readonly pageSize: number;
+    readonly pageIndex: number;
+    readonly length: number;
+};
+/**
+ * A NaturalDataSource will connect immediately, in order to know as soon as possible if
+ * we need to show a template at all (as seen in my-ichtus)
+ *
+ * It also allow some extra data manipulation
+ */
+export declare class NaturalDataSource<T extends PaginatedData<Literal> = PaginatedData<Literal>> extends DataSource<T['items'][0]> {
+    private readonly ngUnsubscribe;
+    private readonly internalData;
+    constructor(value: Observable<T> | T);
+    get internalDataObservable(): Observable<T | null>;
+    /**
+     * Array of data that should be rendered by the table, where each object represents one row.
+     */
+    get data(): T | null;
+    set data(data: T | null);
+    connect(): Observable<T['items']>;
+    disconnect(): void;
+    push(item: T['items'][0]): void;
+    pop(): T['items'][0] | undefined;
+    remove(item: T['items'][0]): void;
+}

package/vanilla/src/lib/classes/query-variable-manager-utils.d.ts

@@ -0,0 +1,2 @@
+import { Literal } from '../types/types';
+export declare function hasMixedGroupLogic(groups: Literal[]): boolean;

package/vanilla/src/lib/classes/query-variable-manager.d.ts

@@ -0,0 +1,91 @@
+import { BehaviorSubject } from 'rxjs';
+export type QueryVariables = {
+    filter?: any | null;
+    pagination?: PaginationInput | null;
+    sorting?: Sorting[] | null;
+};
+export type PaginationInput = {
+    offset?: number | null;
+    pageIndex?: number | null;
+    pageSize?: number | null;
+};
+export type Sorting = {
+    field: any;
+    order?: SortingOrder | null;
+    nullAsHighest?: boolean | null;
+    emptyStringAsHighest?: boolean | null;
+};
+export declare enum SortingOrder {
+    ASC = "ASC",
+    DESC = "DESC"
+}
+/**
+ * Filter manager stores a set of channels that contain a variable object and exposes an observable "variables" that updates with the result
+ * of all channels merged together.
+ *
+ * A channel is supposed to be used by a given aspect of the GUI (pagination, sorting, search, others ?).
+ *
+ * ```ts
+ * const fm = new QueryVariablesManager();
+ * fm.merge('componentA-variables', {a : [1, 2, 3]});
+ * ```
+ *
+ * Variables attributes is a BehaviorSubject. That mean it's not mandatory to subscribe, we can just call getValue or value attributes on
+ * it :
+ *
+ * ```ts
+ * console.log(fm.variables.value); // {a : [1, 2, 3]}
+ * ```
+ *
+ * Set new variables for 'componentA-variables':
+ *
+ * ```ts
+ * fm.merge('componentA-variables', {a : [1, 2]});
+ * console.log(fm.variables.value); // {a : [1, 2, 3]}
+ * ```
+ *
+ * Set new variables for new channel:
+ *
+ * ```ts
+ * fm.merge('componentB-variables', {a : [3, 4]});
+ * console.log(fm.variables.value); // {a : [1, 2, 3, 4]}
+ * ```
+ */
+export declare class NaturalQueryVariablesManager<T extends QueryVariables = QueryVariables> {
+    readonly variables: BehaviorSubject<T | undefined>;
+    private readonly channels;
+    constructor(queryVariablesManager?: NaturalQueryVariablesManager<T>);
+    /**
+     * Set or override all the variables that may exist in the given channel
+     */
+    set(channelName: string, variables: Partial<T> | null | undefined): void;
+    /**
+     * Return a deep clone of the variables for the given channel name.
+     *
+     * Avoid returning the same reference to prevent an attribute change, then another channel update that would
+     * used this changed attribute without having explicitly asked QueryVariablesManager to update it.
+     */
+    get(channelName: string): Partial<T> | undefined;
+    /**
+     * Merge variable into a channel, overriding arrays in same channel / key
+     */
+    merge(channelName: string, newVariables: Partial<T>): void;
+    /**
+     * Apply default values to a channel
+     * Note : lodash defaults only defines values on destinations keys that are undefined
+     */
+    defaults(channelName: string, newVariables: Partial<T>): void;
+    private getChannelsCopy;
+    /**
+     * Merge channels in a single object
+     * Arrays are concatenated
+     * Filter groups are combined smartly (see mergeGroupList)
+     */
+    private updateVariables;
+    /**
+     * Cross merge two filters
+     * Only accepts groups with same groupLogic (ignores the first one, because there is no groupLogic in this one)
+     * @throws In case two non-empty lists of groups are given and at one of them mix groupLogic value, throws an error
+     */
+    private mergeGroupList;
+}

package/vanilla/src/lib/classes/signing.d.ts

@@ -0,0 +1,7 @@
+import { HttpInterceptorFn } from '@angular/common/http';
+/**
+ * Sign all HTTP POST requests that are GraphQL queries against `/graphql` endpoint with a custom signature.
+ *
+ * The server will validate the signature before executing the GraphQL query.
+ */
+export declare function graphqlQuerySigner(key: string): HttpInterceptorFn;

package/vanilla/src/lib/classes/utility.d.ts

@@ -0,0 +1,77 @@
+import { Literal } from '../types/types';
+import type { ReadonlyDeep } from 'type-fest';
+import { PaginationInput, Sorting } from './query-variable-manager';
+/**
+ * Very basic formatting to get only date, without time and ignoring entirely the timezone
+ *
+ * So something like: "2021-09-23"
+ */
+export declare function formatIsoDate(date: null): null;
+export declare function formatIsoDate(date: Date): string;
+export declare function formatIsoDate(date: Date | null): string | null;
+/**
+ * Format a date and time in a way that will preserve the local time zone.
+ * This allows the server side to know the day (without time) that was selected on client side.
+ *
+ * So something like: "2021-09-23T17:57:16+09:00"
+ */
+export declare function formatIsoDateTime(date: Date): string;
+/**
+ * Relations to full objects are converted to their IDs only.
+ *
+ * So {user: {id: 123}} becomes {user: 123}
+ */
+export declare function relationsToIds(object: Literal): Literal;
+/**
+ * Returns the plural form of the given name
+ *
+ * This is **not** necessarily valid english grammar. Its only purpose is for internal usage, not for humans.
+ *
+ * This **MUST** be kept in sync with `\Ecodev\Felix\Api\Plural:make()`.
+ *
+ * This is a bit performance-sensitive, so we should keep it fast and only cover cases that we actually need.
+ */
+export declare function makePlural(name: string): string;
+/**
+ * Returns the string with the first letter as capital
+ */
+export declare function upperCaseFirstLetter(term: string): string;
+/**
+ * Replace all attributes of first object with the ones provided by the second, but keeps the reference
+ */
+export declare function replaceObjectKeepingReference(obj: Literal | null, newObj: Literal | null): void;
+/**
+ * Get contrasted color for text in the slider thumb
+ * @param hexBgColor string in hexadecimals representing the background color
+ */
+export declare function getForegroundColor(hexBgColor: string): 'black' | 'white';
+/**
+ * Convert RGB color to hexadecimal color
+ *
+ * ```ts
+ * rgbToHex('rgb(255, 00, 255)'); // '#FF00FF'
+ * ```
+ */
+export declare function rgbToHex(rgb: string): string;
+/**
+ * During lodash.mergeWith, overrides arrays
+ */
+export declare function mergeOverrideArray(destValue: unknown, source: unknown): unknown;
+/**
+ * Copy text to clipboard.
+ * Accepts line breaks `\n` as textarea do.
+ */
+export declare function copyToClipboard(document: Document, text: string): void;
+export declare function deepFreeze<T extends Literal>(o: T): ReadonlyDeep<T>;
+/**
+ * Return a valid PaginationInput from whatever is available from data. Invalid properties/types will be dropped.
+ */
+export declare function validatePagination(data: unknown): PaginationInput | null;
+/**
+ * Return a valid Sortings from whatever is available from data. Invalid properties/types will be dropped.
+ */
+export declare function validateSorting(data: unknown): Sorting[] | null;
+/**
+ * Return valid columns from whatever is available from data. Invalid properties/types will be dropped.
+ */
+export declare function validateColumns(data: unknown): string[] | null;

package/vanilla/src/lib/modules/search/classes/graphql-doctrine.types.d.ts

@@ -0,0 +1,83 @@
+import { Literal } from '../../../types/types';
+export type Filter = {
+    groups?: FilterGroup[] | null;
+};
+export type FilterGroup = {
+    groupLogic?: LogicalOperator | null;
+    conditionsLogic?: LogicalOperator | null;
+    joins?: FilterGroupJoin | null;
+    conditions?: FilterGroupCondition[] | null;
+};
+export type FilterGroupJoin = Record<string, JoinOn>;
+export type JoinOn = {
+    type?: JoinType | null;
+    joins?: FilterGroupJoin | null;
+    conditions?: FilterGroupCondition[] | null;
+};
+export declare enum LogicalOperator {
+    AND = "AND",
+    OR = "OR"
+}
+export declare enum JoinType {
+    innerJoin = "innerJoin",
+    leftJoin = "leftJoin"
+}
+export type FilterGroupCondition = Record<string, FilterGroupConditionField>;
+export type FilterGroupConditionField = {
+    between?: BetweenOperator | null;
+    equal?: EqualOperator | null;
+    greater?: GreaterOperator | null;
+    greaterOrEqual?: GreaterOrEqualOperator | null;
+    in?: InOperator | null;
+    less?: LessOperator | null;
+    lessOrEqual?: LessOrEqualOperator | null;
+    like?: LikeOperator | null;
+    null?: NullOperator | null;
+    have?: HaveOperator | null;
+    empty?: EmptyOperator | null;
+    [key: string]: Literal | undefined | null;
+};
+export type Scalar = number | string | boolean;
+export type HaveOperator = {
+    values: string[];
+    not?: boolean | null;
+};
+export type EmptyOperator = {
+    not?: boolean | null;
+};
+export type BetweenOperator = {
+    from: Scalar;
+    to: Scalar;
+    not?: boolean | null;
+};
+export type EqualOperator = {
+    value: Scalar;
+    not?: boolean | null;
+};
+export type GreaterOperator = {
+    value: Scalar;
+    not?: boolean | null;
+};
+export type GreaterOrEqualOperator = {
+    value: Scalar;
+    not?: boolean | null;
+};
+export type InOperator = {
+    values: Scalar[];
+    not?: boolean | null;
+};
+export type LessOperator = {
+    value: Scalar;
+    not?: boolean | null;
+};
+export type LessOrEqualOperator = {
+    value: Scalar;
+    not?: boolean | null;
+};
+export type LikeOperator = {
+    value: Scalar;
+    not?: boolean | null;
+};
+export type NullOperator = {
+    not?: boolean | null;
+};

package/vanilla/src/lib/modules/search/classes/utils.d.ts

@@ -0,0 +1,17 @@
+import { Facet, NaturalSearchFacets } from '../types/facet';
+import { NaturalSearchSelection } from '../types/values';
+/**
+ * Lookup a facet by its `name` and then by its `field`, or return null if not found
+ */
+export declare function getFacetFromSelection(facets: NaturalSearchFacets | null, selection: NaturalSearchSelection): Facet | null;
+/**
+ * Deep clone a literal via JSON serializing/unserializing
+ *
+ * It will **not** work with:
+ *
+ *     - functions (will be removed)
+ *     - `undefined` (will be removed)
+ *     - cyclic references (will crash)
+ *     - objects (will be converted to `{}`)
+ */
+export declare function deepClone<T>(obj: T extends undefined ? never : T): T;

package/vanilla/src/lib/modules/search/types/dropdown-component.d.ts

@@ -0,0 +1,20 @@
+import { BehaviorSubject } from 'rxjs';
+import { FilterGroupConditionField } from '../classes/graphql-doctrine.types';
+export type DropdownComponent = {
+    /**
+     * Observable of current value as string
+     */
+    readonly renderedValue: BehaviorSubject<string>;
+    /**
+     * Get condition, including rich object types
+     */
+    getCondition(): FilterGroupConditionField;
+    /**
+     * Returns true if dropdown value is valid
+     */
+    isValid(): boolean;
+    /**
+     * Returns true if the dropdown value has change
+     */
+    isDirty(): boolean;
+};

package/vanilla/src/lib/modules/search/types/facet.d.ts

@@ -0,0 +1,75 @@
+import { Type } from '@angular/core';
+import { DropdownComponent } from './dropdown-component';
+import { NaturalSearchSelection } from './values';
+type BasicFacet = {
+    /**
+     * The label to be used in the GUI
+     */
+    display: string;
+    /**
+     * The field this facet should apply to.
+     *
+     * In most cases it should be the property name of the model. Something like:
+     *
+     * - name
+     * - description
+     * - artist.name
+     */
+    field: string;
+    /**
+     * This is required only if there are duplicated `field` in all facets.
+     *
+     * If `name` exists it will be used as an alternative identifier for facet, instead of `field`, to match
+     * a selection with its facet (in `getFacetFromSelection()`). So a selection must be given with the `name`,
+     * instead of `field`. And it will also be present in the URL. But it will never appear in the GraphQL selection.
+     *
+     * https://github.com/Ecodev/natural-search/issues/16
+     */
+    name?: string;
+    /**
+     * A function to transform the selection before it is applied onto the filter.
+     *
+     * This would typically be useful to do unit conversion so the GUI has some user
+     * friendly values, but the API works with a "low-level" unit.
+     */
+    transform?: (s: NaturalSearchSelection) => NaturalSearchSelection;
+};
+/**
+ * Facet that is only a flag (set or unset)
+ */
+export type FlagFacet<Condition> = {
+    /**
+     * The value to be returned when the flag is set
+     */
+    condition: Condition;
+    /**
+     * If true the value is set when the flag does NOT exist and the
+     * value is unset when the flag exists.
+     *
+     * Defaults to `false`.
+     */
+    inversed?: boolean;
+} & BasicFacet;
+/**
+ * Facet that uses a component in a dropdown
+ */
+export type DropdownFacet<C> = {
+    component: Type<DropdownComponent>;
+    /**
+     * Show a button into the dropdown container to validate value. Gives alternative to "click out" and incoming "tab/esc" key.
+     */
+    showValidateButton?: boolean;
+    /**
+     * Anything that could be useful for the dropdown component
+     */
+    configuration?: C;
+} & BasicFacet;
+/**
+ * A facet
+ */
+export type Facet = DropdownFacet<any> | FlagFacet<any>;
+/**
+ * Exhaustive list of facets
+ */
+export type NaturalSearchFacets = Facet[];
+export {};

package/vanilla/src/lib/modules/search/types/values.d.ts

@@ -0,0 +1,32 @@
+import { FilterGroupConditionField } from '../classes/graphql-doctrine.types';
+import { Facet } from './facet';
+/**
+ * Type for a search selection
+ */
+export type NaturalSearchSelection = {
+    field: string;
+    /**
+     * This is required if the facet also have a `name`.
+     *
+     * See BasicFacet.name
+     */
+    name?: string;
+    condition: FilterGroupConditionField;
+};
+/**
+ * Groups are a list of values, that should be interpreted with AND condition
+ */
+export type GroupSelections = NaturalSearchSelection[];
+/**
+ * List of groups, that should be interpreted with OR condition
+ * Final input / output format
+ */
+export type NaturalSearchSelections = GroupSelections[];
+/**
+ * Consolidated type for a selection and it's matching facet
+ * Used internally for dropdown
+ */
+export type DropdownResult = {
+    condition: FilterGroupConditionField;
+    facet?: Facet;
+};