@ecodev/natural 60.0.2 → 60.1.0

package/lib/classes/abstract-list.d.ts

@@ -24,7 +24,10 @@ type MaybeNavigable = Literal | NavigableItem<Literal>;
  * Components inheriting from this class can be used as standalone with input attributes.
  *
  * Usage :
+ *
+ * ```html
  * <natural-my-listing [forcedVariables]="{filter:...}" [selectedColumns]="['col1']" [persistSearch]="false">
+ * ```
  */
 export declare class NaturalAbstractList<TService extends NaturalAbstractModelService<any, any, PaginatedData<Literal>, QueryVariables, any, any, any, any, any, any>, Tall extends PaginatedData<MaybeNavigable> = ExtractTall<TService>> extends NaturalAbstractPanel implements OnInit, OnDestroy {
     readonly service: TService;

package/lib/modules/common/directives/background-density.directive.d.ts

@@ -0,0 +1,39 @@
+import { ElementRef } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class NaturalBackgroundDensityDirective {
+    private readonly elementRef;
+    /**
+     * Automatically apply background image selection based on screen density.
+     *
+     * The given URL **MUST** be the normal density URL. And it **MUST** include
+     * the size as last path segment. That size will automatically be changed
+     * for other screen densities. That means that the server **MUST** be able to
+     * serve an image of the given size.
+     *
+     * If the given URL starts with `url(`, or is not ending with a number, then
+     * it will be set as-is, without any processing. This allows using url data,
+     * such as `url(data:image/png;base64,aabbcc)`.
+     *
+     * Usage:
+     *
+     * ```html
+     * <div naturalBackgroundDensity="/api/image/123/200"></div>
+     * <div naturalBackgroundDensity="/non-responsive.jpg"></div>
+     * <div naturalBackgroundDensity="url(data:image/png;base64,aabbcc)"></div>
+     * ```
+     *
+     * Will generate something like:
+     *
+     * ```html
+     * <div style="background-image: image-set(url("/api/image/123/200") 1x, url("/api/image/123/300") 1.5x, url("/api/image/123/400") 2x, url("/api/image/123/600") 3x, url("/api/image/123/800") 4x);"></div>
+     * <div style="background-image: url("/non-responsive.jpg");"></div>
+     * <div style="background-image: url(data:image/png;base64,aabbcc)"></div>
+     * ```
+     *
+     * See https://developer.mozilla.org/en-US/docs/Web/CSS/image/image-set
+     */
+    set naturalBackgroundDensity(src: string);
+    constructor(elementRef: ElementRef<HTMLElement>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<NaturalBackgroundDensityDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NaturalBackgroundDensityDirective, "[naturalBackgroundDensity]", never, { "naturalBackgroundDensity": { "alias": "naturalBackgroundDensity"; "required": true; }; }, {}, never, never, true, never>;
+}

package/lib/modules/common/directives/linkable-tab.directive.d.ts

@@ -6,11 +6,13 @@ import * as i0 from "@angular/core";
 /**
  * Usage :
  *
+ * ```html
  * <mat-tab-group [naturalLinkableTab]="!isPanel">
  *     <mat-tab label="Tab 1">Tab 1</mat-tab> // First tab doesn't need id. This keeps url clean on default one
  *     <mat-tab label="Tab 2" id="second-tab">Tab 2</mat-tab>
  *     ...
  * </mat-tab-group>
+ * ```
  */
 export declare class NaturalLinkableTabDirective extends NaturalAbstractController implements AfterViewInit {
     private readonly component;

package/lib/modules/common/directives/src-density.directive.d.ts

@@ -1,5 +1,6 @@
 import { ElementRef } from '@angular/core';
 import * as i0 from "@angular/core";
+export declare function densities(src: string, forImageSet: boolean): string;
 export declare class NaturalSrcDensityDirective {
     private readonly elementRef;
     /**
@@ -13,7 +14,7 @@ export declare class NaturalSrcDensityDirective {
      * Usage:
      *
      * ```html
-     * <img [naturalSrcDensity]="'/api/image/123/200'" />
+     * <img naturalSrcDensity="/api/image/123/200" />
      * ```
      *
      * Will generate something like:

package/lib/modules/common/public-api.d.ts

@@ -5,5 +5,6 @@ export * from './pipes/enum.pipe';
 export { NaturalTimeAgoPipe } from './pipes/time-ago.pipe';
 export * from './services/memory-storage';
 export { NaturalSrcDensityDirective } from './directives/src-density.directive';
+export { NaturalBackgroundDensityDirective } from './directives/background-density.directive';
 export { NATURAL_SEO_CONFIG, NaturalSeoConfig, NaturalSeoService, NaturalSeo, NaturalSeoBasic, NaturalSeoResolve, NaturalSeoCallback, NaturalSeoResolveData, } from './services/seo.service';
 export { provideSeo } from './services/seo.provider';

package/lib/modules/detail-header/detail-header.component.d.ts

@@ -1,4 +1,4 @@
-import { Literal } from '../../types/types';
+import { Literal, NameOrFullName } from '../../types/types';
 import * as i0 from "@angular/core";
 export declare class NaturalDetailHeaderComponent {
     /**
@@ -32,7 +32,7 @@ export declare class NaturalDetailHeaderComponent {
      */
     newLabel: string;
     model: Literal;
-    breadcrumbs: Literal[];
+    breadcrumbs: NameOrFullName[];
     listRoute: any[];
     listFragment: string | undefined;
     link?: (id: string) => any[];

package/lib/modules/file/component/file.component.d.ts

@@ -1,6 +1,5 @@
 import { EventEmitter, OnChanges, OnInit, SimpleChanges } from '@angular/core';
 import { AbstractControl } from '@angular/forms';
-import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
 import { Observable } from 'rxjs';
 import { NaturalFileService } from '../file.service';
 import { FileModel } from '../types';
@@ -9,7 +8,6 @@ import * as i0 from "@angular/core";
 export declare class NaturalFileComponent implements OnInit, OnChanges {
     private readonly naturalFileService;
     private readonly alertService;
-    private readonly sanitizer;
     private readonly document;
     height: number;
     action: 'upload' | 'download' | null;
@@ -29,7 +27,7 @@ export declare class NaturalFileComponent implements OnInit, OnChanges {
      * cases you **must** `bind()` the callback explicitly, like so:
      *
      * ```html
-     * <natural-file [uploader]="myCallback.bind(this)"></natural-file>
+     * <natural-file [uploader]="myCallback.bind(this)" />
      * ```
      *
      * Also, you probably **should** set a `[formCtrl]` so that the form is updated automatically, instead of doing
@@ -47,9 +45,9 @@ export declare class NaturalFileComponent implements OnInit, OnChanges {
      * human navigates away from the page before the upload is finished. Instead, you should use `[uploader]`.
      */
     readonly modelChange: EventEmitter<FileModel>;
-    imagePreview: SafeStyle | null;
+    imagePreview: string;
     filePreview: string | null;
-    constructor(naturalFileService: NaturalFileService, alertService: NaturalAlertService, sanitizer: DomSanitizer, document: Document);
+    constructor(naturalFileService: NaturalFileService, alertService: NaturalAlertService, document: Document);
     ngOnChanges(changes: SimpleChanges): void;
     ngOnInit(): void;
     upload(file: File): void;

package/lib/modules/relations/relations.component.d.ts

@@ -12,11 +12,14 @@ import { ExtractTallOne, ExtractVall } from '../../types/types';
 import * as i0 from "@angular/core";
 /**
  * Custom template usage :
+ *
+ * ```html
  * <natural-relations [main]="owner" [service]="svc" [filter]="{}" placeholder="Select an item">
  *     <ng-template let-item="item">
  *         <span>{{ item.xxx }}</span>
  *     </ng-template>
  * </natural-relations>
+ * ```
  */
 export declare class NaturalRelationsComponent<TService extends NaturalAbstractModelService<unknown, any, PaginatedData<LinkableObject>, QueryVariables, unknown, any, unknown, any, unknown, any>> extends NaturalAbstractController implements OnInit, OnChanges {
     private readonly linkMutationService;

package/lib/modules/select/select/select.component.d.ts

@@ -12,7 +12,7 @@ type V<TService> = string | ExtractTallOne<TService>;
 /**
  * Default usage:
  * ```html
- * <natural-select [service]="myServiceInstance" [(model)]="myModel" (modelChange)=myChangeFn($event)></natural-select>
+ * <natural-select [service]="myServiceInstance" [(model)]="myModel" (modelChange)=myChangeFn($event) />
  * ```
  *
  * Custom template usage :
@@ -28,17 +28,17 @@ type V<TService> = string | ExtractTallOne<TService>;
  *
  * Placeholder :
  * ```html
- * <natural-select placeholder="my placeholder"></natural-select>
+ * <natural-select placeholder="my placeholder" />
  * ```
  *
  * Search with like %xxx% on specified field `name` instead of custom filter on whole object
  * ```html
- * <natural-select searchField="name"></natural-select>
+ * <natural-select searchField="name" />
  * ```
  *
  * Allows to input free string without selecting an option from autocomplete suggestions
  * ```html
- * <natural-select [optionRequired]="false"></natural-select>
+ * <natural-select [optionRequired]="false" />
  * ```
  */
 export declare class NaturalSelectComponent<TService extends NaturalAbstractModelService<any, any, PaginatedData<Literal>, QueryVariables, any, any, any, any, any, any>> extends AbstractSelect<V<TService>, V<TService>> implements OnInit, OnDestroy, ControlValueAccessor, AfterViewInit {

package/lib/modules/select/select-hierarchic/select-hierarchic.component.d.ts

@@ -7,13 +7,22 @@ import { AbstractSelect } from '../abstract-select.component';
 import * as i0 from "@angular/core";
 /**
  * Default usage:
- * <natural-select [config]="myConfig" [(ngModel)]="amazingModel"
- * (ngModelChange)=amazingChangeFn($event)></natural-select>
  *
- * [(ngModel)] and (ngModelChange) are optional
+ * ```html
+ * <natural-select
+ *     [config]="myConfig"
+ *     [(ngModel)]="amazingModel"
+ *     (ngModelChange)=amazingChangeFn($event)
+ * />
+ * ```
+ *
+ * `[(ngModel)]` and `(ngModelChange)` are optional.
  *
  * Placeholder :
- * <natural-select placeholder="amazing placeholder">
+ *
+ * ```html
+ * <natural-select placeholder="amazing placeholder" />
+ * ```
  */
 export declare class NaturalSelectHierarchicComponent extends AbstractSelect<Literal, string> implements OnInit, OnDestroy, ControlValueAccessor {
     private readonly hierarchicSelectorDialogService;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecodev/natural",
-  "version": "60.0.2",
+  "version": "60.1.0",
   "license": "MIT",
   "repository": "github:Ecodev/natural",
   "sideEffects": false,