@ecodev/natural 55.2.0 → 55.4.0

package/fesm2022/ecodev-natural.mjs

@@ -5792,14 +5792,20 @@ function stripTags(str) {
  * configured for it in the routing.
  */
 class NaturalSeoService {
-    constructor(config, router, titleService, metaTagService, document, locale) {
-        this.config = config;
+    constructor(configToken, router, titleService, metaTagService, document, locale) {
         this.router = router;
         this.titleService = titleService;
         this.metaTagService = metaTagService;
         this.document = document;
         this.locale = locale;
-        this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(() => {
+        this.config = {
+            applicationName: '',
+        };
+        combineLatest({
+            config: configToken instanceof Observable ? configToken.pipe(startWith(this.config)) : of(configToken),
+            navigationEnd: this.router.events.pipe(filter(event => event instanceof NavigationEnd)),
+        }).subscribe(({ config }) => {
+            this.config = config;
             const root = this.router.routerState.root.snapshot;
             this.routeData = this.getRouteData(root);
             const seo = this.routeData.seo ?? { title: '' };
@@ -5819,11 +5825,11 @@ class NaturalSeoService {
     /**
      * Update the SEO with given info. The extra part and app name will be appended automatically.
      *
-     * In most cases this should not be used, and instead the SEO should be configured in the routing,
+     * In most cases, this should not be used. And instead, the SEO should be configured in the routing,
      * possibly with the callback variant for some dynamism.
      *
-     * But in rare cases only the Component is able to build a proper page title, after it gather everything it
-     * needed. For those cases the Component can inject this service and update the SEO directly.
+     * But in rare cases, only the Component is able to build a proper page title, after it gathered everything it
+     * needed. For those cases, the Component can inject this service and update the SEO directly.
      */
     update(seo) {
         // Title
@@ -5843,7 +5849,7 @@ class NaturalSeoService {
         // Canonical
         // Add language in url (after domain) if some languages are provided only
         const language = this.config.languages?.length && this.locale ? this.locale.split('-')[0] : '';
-        const urlParts = this.getUrlParts(seo.canonicalQueryParamsWhitelist || []);
+        const urlParts = this.getUrlParts(seo.canonicalQueryParamsWhitelist ?? []);
         this.updateLinkTag({ rel: 'canonical', href: this.getUrl(urlParts, language) });
         this.updateAlternates(urlParts);
     }
@@ -5864,10 +5870,10 @@ class NaturalSeoService {
         }
         // Query Params
         let params = '';
-        for (const param in urlTree.queryParams) {
-            if (whiteListedParams.includes(param)) {
-                const key = encodeURIComponent(param);
-                const value = encodeURIComponent(urlTree.queryParams[param]);
+        for (const whiteListedParam of whiteListedParams) {
+            if (whiteListedParam in urlTree.queryParams) {
+                const key = encodeURIComponent(whiteListedParam);
+                const value = encodeURIComponent(urlTree.queryParams[whiteListedParam]);
                 if (params.length) {
                     params += '&';
                 }
@@ -5881,9 +5887,6 @@ class NaturalSeoService {
     }
     /**
      * Add language between domain and uri https://example.com/fr/folder/page
-     * @param urlParts
-     * @param language
-     * @private
      */
     getUrl(urlParts, language) {
         let url = urlParts.url;
@@ -5915,7 +5918,7 @@ class NaturalSeoService {
         }
     }
     updateLinkTag(definition) {
-        const linkElement = this.document.head.querySelector(this._parseSelector(definition)) ||
+        const linkElement = this.document.head.querySelector(this.parseSelector(definition)) ??
             this.document.head.appendChild(this.document.createElement('link'));
         if (linkElement) {
             Object.keys(definition).forEach((attribute) => {
@@ -5924,13 +5927,11 @@ class NaturalSeoService {
         }
     }
     /**
-     * Parse tag to create a selector
-     * @param  definition
-     * @return {string} selector to use in querySelector
+     * Returns selector to use in querySelector to get the given link
      */
-    _parseSelector(definition) {
+    parseSelector(definition) {
         let attributes = 'link';
-        Object.keys(definition).forEach((attr) => {
+        Object.keys(definition).forEach(attr => {
             if (attr !== 'href') {
                 attributes += `[${attr}="${definition[attr]}"]`;
             }
@@ -10781,7 +10782,7 @@ function getInitials(name, size) {
  */
 class Initials extends Source {
     getAvatar(size) {
-        return getInitials(this.getValue(), size);
+        return getInitials(this.getValue().replace(/[^a-zA-Z0-9\s]/g, ''), size); // only letters, numbers and space
     }
     isTextual() {
         return true;
@@ -10815,14 +10816,15 @@ class AvatarService {
             ['initials', Initials],
         ]);
         this.avatarColors = [
-            '#1abc9c',
-            '#3498db',
-            '#f1c40f',
-            '#8e44ad',
-            '#e74c3c',
-            '#d35400',
-            '#2c3e50',
-            '#7f8c8d',
+            '#ff0000',
+            '#ff8800',
+            '#dabb00',
+            '#00c200',
+            '#01cbcb',
+            '#008cff',
+            '#ff00d8',
+            '#c800ff',
+            '#3b3b3b',
         ];
         this.failedSources = new Map();
     }
@@ -10868,10 +10870,11 @@ class NaturalAvatarComponent {
     constructor(avatarService) {
         this.avatarService = avatarService;
         this.size = 50;
-        this.textSizeRatio = 3;
+        this.decorated = true;
+        this.textSizeRatio = 2.25;
         this.fgColor = '#FFF';
         this.borderRadius = '';
-        this.textMaximumLength = 0;
+        this.textMaximumLength = 2;
         this.avatarSrc = null;
         this.avatarText = null;
         this.avatarStyle = {};
@@ -10966,6 +10969,8 @@ class NaturalAvatarComponent {
             backgroundColor: this.bgColor ? this.bgColor : this.avatarService.getRandomColor(avatarValue),
             font: Math.floor(+this.size / this.textSizeRatio) + 'px Helvetica, Arial, sans-serif',
             lineHeight: this.size + 'px',
+            width: this.size + 'px',
+            height: this.size + 'px',
         };
     }
     /**
@@ -10980,7 +10985,7 @@ class NaturalAvatarComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalAvatarComponent, deps: [{ token: AvatarService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: NaturalAvatarComponent, isStandalone: true, selector: "natural-avatar", inputs: { image: "image", initials: "initials", gravatar: "gravatar", size: "size", textSizeRatio: "textSizeRatio", bgColor: "bgColor", fgColor: "fgColor", borderRadius: "borderRadius", textMaximumLength: "textMaximumLength" }, usesOnChanges: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: NaturalAvatarComponent, isStandalone: true, selector: "natural-avatar", inputs: { image: "image", initials: "initials", gravatar: "gravatar", size: "size", decorated: "decorated", textSizeRatio: "textSizeRatio", bgColor: "bgColor", fgColor: "fgColor", borderRadius: "borderRadius", textMaximumLength: "textMaximumLength" }, host: { properties: { "style.height.px": "this.size", "style.width.px": "this.size", "class.decorated": "this.decorated" } }, usesOnChanges: true, ngImport: i0, template: `
         <div class="avatar-container" [ngStyle]="hostStyle">
             <img
                 *ngIf="avatarSrc"
@@ -10992,11 +10997,16 @@ class NaturalAvatarComponent {
                 class="avatar-content"
                 loading="lazy"
             />
-            <div *ngIf="avatarText" class="avatar-content" [ngStyle]="avatarStyle">
+            <div
+                *ngIf="avatarText"
+                class="avatar-content"
+                [class.natural-elevation]="decorated"
+                [ngStyle]="avatarStyle"
+            >
                 {{ avatarText }}
             </div>
         </div>
-    `, isInline: true, styles: [":host{border-radius:50%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+    `, isInline: true, styles: [":host{display:block}:host.decorated{position:relative}:host.decorated .avatar-container:before{content:\"\";position:absolute;inset:0;border-radius:50%;background:linear-gradient(345deg,rgba(255,255,255,0) 25%,rgba(255,255,255,.33) 100%)}:host.decorated .avatar-content{text-shadow:0 1px 0 rgba(0,0,0,.6)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalAvatarComponent, decorators: [{
             type: Component,
@@ -11012,11 +11022,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImpor
                 class="avatar-content"
                 loading="lazy"
             />
-            <div *ngIf="avatarText" class="avatar-content" [ngStyle]="avatarStyle">
+            <div
+                *ngIf="avatarText"
+                class="avatar-content"
+                [class.natural-elevation]="decorated"
+                [ngStyle]="avatarStyle"
+            >
                 {{ avatarText }}
             </div>
         </div>
-    `, standalone: true, imports: [CommonModule], styles: [":host{border-radius:50%}\n"] }]
+    `, standalone: true, imports: [CommonModule], styles: [":host{display:block}:host.decorated{position:relative}:host.decorated .avatar-container:before{content:\"\";position:absolute;inset:0;border-radius:50%;background:linear-gradient(345deg,rgba(255,255,255,0) 25%,rgba(255,255,255,.33) 100%)}:host.decorated .avatar-content{text-shadow:0 1px 0 rgba(0,0,0,.6)}\n"] }]
         }], ctorParameters: function () { return [{ type: AvatarService }]; }, propDecorators: { image: [{
                 type: Input
             }], initials: [{
@@ -11024,6 +11039,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImpor
             }], gravatar: [{
                 type: Input
             }], size: [{
+                type: HostBinding,
+                args: ['style.height.px']
+            }, {
+                type: HostBinding,
+                args: ['style.width.px']
+            }, {
+                type: Input
+            }], decorated: [{
+                type: HostBinding,
+                args: ['class.decorated']
+            }, {
                 type: Input
             }], textSizeRatio: [{
                 type: Input