@smartsoft001-mobilems/angular 2.53.0 → 2.55.0

package/fesm2022/smartsoft001-mobilems-angular.mjs

@@ -1,6 +1,6 @@
 import { __decorate, __metadata } from 'tslib';
 import * as i0 from '@angular/core';
-import { Injectable, inject, PLATFORM_ID, signal, effect, computed, input, output, HostListener, Component, ApplicationRef, EnvironmentInjector, createComponent, InjectionToken, Directive, contentChild, Inject, ElementRef, APP_INITIALIZER, NgModule } from '@angular/core';
+import { Injectable, inject, PLATFORM_ID, signal, effect, computed, input, output, HostListener, Component, ApplicationRef, EnvironmentInjector, createComponent, InjectionToken, Directive, contentChild, Inject, viewChild, ElementRef, APP_INITIALIZER, NgModule } from '@angular/core';
 import { Meta, Title, DomSanitizer } from '@angular/platform-browser';
 import { StyleService as StyleService$1, ReduxAction, AppBaseComponent, PageBaseComponent, BaseComponent } from '@smartsoft001/angular';
 import { HttpClient } from '@angular/common/http';
@@ -8,13 +8,14 @@ import moment from 'moment';
 import { lastValueFrom, combineLatest, firstValueFrom, Subject, of, throwError } from 'rxjs';
 import { map, filter, catchError } from 'rxjs/operators';
 import * as i1 from '@angular/common';
-import { isPlatformBrowser, CommonModule, DOCUMENT, NgClass, NgTemplateOutlet, NgComponentOutlet } from '@angular/common';
+import { isPlatformBrowser, CommonModule, DOCUMENT, NgTemplateOutlet, NgClass, NgComponentOutlet } from '@angular/common';
 import { Router, ActivatedRoute, NavigationEnd, RouterOutlet, RouterLink, RouterLinkActive, RouterModule } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import { CrudSearchService, CrudService, CrudFacade } from '@smartsoft001/crud-shell-angular';
 import * as _ from 'lodash';
 import { Debounce } from 'lodash-decorators';
 import { ConfigPageType, ArticleWidgetType } from '@smartsoft001-mobilems/models';
+import { Masonry } from '@thisissoon/angular-masonry';
 import { capitalize } from '@smartsoft001/utils';
 import { toSignal } from '@angular/core/rxjs-interop';
 
@@ -271,8 +272,7 @@ class FileUrlService {
         if (path[0] === '/') {
             path = path.substring(1);
         }
-        // Skip extension replacement for string paths or paths containing media/dictionaries
-        const shouldSkipExtensionReplacement = isStringPath || path.includes('media/dictionaries');
+        const shouldSkipExtensionReplacement = isStringPath || path.includes('media/dictionaries') || path.includes('media/articles');
         if (!shouldSkipExtensionReplacement) {
             path = this.replaceExtensionIfCache(path, mode);
         }
@@ -988,6 +988,7 @@ const DEFAULT_CONFIG = {
     text: 'normal',
     letterSpacing: 'small',
     wordSpacing: 'small',
+    grayscale: 'false',
 };
 class WcagService {
     constructor() {
@@ -1028,6 +1029,14 @@ class WcagService {
         this.announceChange('setWordSpacing', value);
         this.save();
     }
+    setGrayscale(value) {
+        this._config.update((config) => ({
+            ...config,
+            grayscale: value,
+        }));
+        this.announceChange('setGrayscale', value);
+        this.save();
+    }
     reset() {
         this._config.set(DEFAULT_CONFIG);
         this.save();
@@ -1073,6 +1082,7 @@ class WcagService {
         body.className += ` text-${config.text}`;
         body.className += ` letter-spacing-${config.letterSpacing}`;
         body.className += ` word-spacing-${config.wordSpacing}`;
+        body.className += ` ${config.grayscale === 'true' ? 'grayscale' : ''}`;
     }
     announceChange(type, value) {
         if (!this.isBrowser)
@@ -1301,7 +1311,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImpor
 
 class FiltersContext extends BaseComponent {
     set searchText(val) {
-        if (this._filter && this._filter.searchText === val)
+        if (this.facade.filter() && this.facade.filter()?.searchText === val)
             return;
         this.refresh({
             searchText: val,
@@ -1309,25 +1319,28 @@ class FiltersContext extends BaseComponent {
         });
     }
     get searchText() {
-        return this._filter?.searchText;
+        return this.facade.filter()?.searchText;
     }
     set page(val) {
-        const offset = this._filter?.limit ? this._filter?.limit * val : 0;
-        if (this._filter && this._filter.offset === offset)
+        const filter = this.facade.filter();
+        const offset = filter?.limit ? filter?.limit * val : 0;
+        if (filter && filter.offset === offset)
             return;
         this.refresh({
             offset: offset,
         });
     }
     get page() {
-        if (!this._filter)
+        const filter = this.facade.filter();
+        if (!filter)
             return 1;
-        if (!this._filter.offset || !this._filter.limit)
+        if (!filter.offset || !filter.limit)
             return 1;
-        return this._filter.offset / this._filter.limit;
+        return filter.offset / filter.limit;
     }
     set limit(val) {
-        if (this._filter && this._filter.limit === val)
+        const filter = this.facade.filter();
+        if (filter && filter.limit === val)
             return;
         this.refresh({
             limit: val,
@@ -1335,44 +1348,49 @@ class FiltersContext extends BaseComponent {
         });
     }
     get limit() {
-        if (!this._filter)
+        const filter = this.facade.filter();
+        if (!filter)
             return 20;
-        if (!this._filter.limit)
+        if (!filter.limit)
             return 20;
-        return this._filter.limit;
+        return filter.limit;
     }
     set sortBy(val) {
-        if (this._filter && this._filter.sortBy === val)
+        const filter = this.facade.filter();
+        if (filter && filter.sortBy === val)
             return;
         this.refresh({
             sortBy: val,
         });
     }
     get sortBy() {
-        return this._filter?.sortBy;
+        return this.facade.filter()?.sortBy;
     }
     set query(val) {
-        if (this._filter && this._filter.query === val)
+        const filter = this.facade.filter();
+        if (filter && filter.query === val)
             return;
         this.refresh({
             query: val,
         });
     }
     get query() {
-        return this._filter?.query;
+        return this.facade.filter()?.query;
     }
     set sortDesc(val) {
-        if (this._filter && this._filter.sortDesc === val)
+        const filter = this.facade.filter();
+        if (filter && filter.sortDesc === val)
             return;
         this.refresh({
             sortDesc: val,
         });
     }
     get sortDesc() {
-        return this._filter?.sortDesc;
+        return this.facade.filter()?.sortDesc;
     }
     set sort(val) {
-        if (this._filter && this._filter.sortBy === val)
+        const filter = this.facade.filter();
+        if (filter && filter.sortBy === val)
             return;
         this.refresh({
             sortBy: val?.by,
@@ -1381,22 +1399,23 @@ class FiltersContext extends BaseComponent {
     }
     get sort() {
         return {
-            by: this._filter?.sortBy,
-            desc: this._filter?.sortDesc,
+            by: this.facade.filter()?.sortBy,
+            desc: this.facade.filter()?.sortDesc,
         };
     }
     set onlyImage(val) {
-        if (!val && this.onlyImage && this._filter) {
-            const result = this._filter.query
-                ? this._filter.query?.filter((q) => !(q.type === '=' && q.key === 'onlyImage'))
+        const filter = this.facade.filter();
+        if (!val && this.onlyImage && filter) {
+            const result = filter.query
+                ? filter.query?.filter((q) => !(q.type === '=' && q.key === 'onlyImage'))
                 : [];
             this.refresh({
                 query: [...result],
             });
         }
-        if (val && !this.onlyImage && this._filter) {
-            const result = this._filter.query
-                ? this._filter.query.filter((q) => !(q.type === '=' && q.key === 'onlyImage'))
+        if (val && !this.onlyImage && filter) {
+            const result = filter.query
+                ? filter.query.filter((q) => !(q.type === '=' && q.key === 'onlyImage'))
                 : [];
             this.refresh({
                 offset: 0,
@@ -1413,12 +1432,15 @@ class FiltersContext extends BaseComponent {
         }
     }
     get onlyImage() {
-        return this._filter?.query?.some((q) => q.type === '=' && q.key === 'onlyImage' && q.value === 1);
+        return this.facade
+            .filter()
+            ?.query?.some((q) => q.type === '=' && q.key === 'onlyImage' && q.value === 1);
     }
     set exposure(val) {
-        if (!val && this.exposure && this._filter) {
-            const result = this._filter.query
-                ? this._filter.query?.filter((q) => !(q.type === '=' &&
+        const filter = this.facade.filter();
+        if (!val && this.exposure && filter) {
+            const result = filter.query
+                ? filter.query?.filter((q) => !(q.type === '=' &&
                     q.key === 'locationType' &&
                     q.value === 'Ekspozycja'))
                 : [];
@@ -1426,9 +1448,9 @@ class FiltersContext extends BaseComponent {
                 query: [...result],
             });
         }
-        if (val && !this.exposure && this._filter) {
-            const result = this._filter.query
-                ? this._filter.query?.filter((q) => !(q.type === '=' &&
+        if (val && !this.exposure && filter) {
+            const result = filter.query
+                ? filter.query?.filter((q) => !(q.type === '=' &&
                     q.key === 'locationType' &&
                     q.value === 'Ekspozycja'))
                 : [];
@@ -1447,7 +1469,11 @@ class FiltersContext extends BaseComponent {
         }
     }
     get exposure() {
-        return this._filter?.query?.some((q) => q.type === '=' && q.key === 'locationType' && q.value === 'Ekspozycja');
+        return this.facade
+            .filter()
+            ?.query?.some((q) => q.type === '=' &&
+            q.key === 'locationType' &&
+            q.value === 'Ekspozycja');
     }
     set creators(val) {
         this.filterSet(this.creators, val, 'creators', '=');
@@ -1563,43 +1589,51 @@ class FiltersContext extends BaseComponent {
     get extraNumbersValue() {
         return this.filterGet('=', 'extraNumbersValue');
     }
-    constructor() {
+    set filters(filters) {
+        this.multipleFilterSet(filters?.map(({ val, key, type }) => ({
+            currentValue: this.filterGet(type, key),
+            val,
+            key,
+            type,
+        })) ?? undefined);
+    }
+    constructor(facade) {
         super();
-        this.facade = inject((CrudFacade));
-        this.totalCount = this.facade.totalCount;
-        effect(() => {
-            this._filter = this.facade.filter();
-        });
+        this.facade = facade;
+        this.totalCount = computed(() => this.facade.totalCount() || 0, ...(ngDevMode ? [{ debugName: "totalCount" }] : []));
     }
     refresh(filter) {
         let change = false;
         Object.keys(filter).forEach((key) => {
-            if (!_.isEqual(this._filter[key], filter[key]))
+            if (!_.isEqual(this.facade.filter()?.[key], filter?.[key]))
                 change = true;
         });
         if (!change)
             return;
         this.facade.read({
-            ...this.facade.filter,
+            ...this.facade.filter(),
             ...filter,
         });
     }
     filterGet(key, type) {
-        return this._filter?.query?.find((q) => q.type === key && q.key === type)?.value;
+        return this.facade
+            .filter()
+            ?.query?.find((q) => q.type === key && q.key === type)?.value;
     }
     filterSet(currentValue, val, key, type) {
-        if (!val && this._filter) {
-            const result = this._filter?.query
-                ? this._filter?.query?.filter((q) => !(q.type === type && q.key === key))
+        const filter = this.facade.filter();
+        if (!val && filter) {
+            const result = filter?.query
+                ? filter?.query?.filter((q) => !(q.type === type && q.key === key))
                 : [];
             this.refresh({
                 offset: 0,
                 query: [...result],
             });
         }
-        if (val && currentValue !== val && this._filter) {
-            const result = this._filter?.query
-                ? this._filter?.query?.filter((q) => !(q.type === type && q.key === key))
+        if (val && currentValue !== val && filter) {
+            const result = filter?.query
+                ? filter?.query?.filter((q) => !(q.type === type && q.key === key))
                 : [];
             this.refresh({
                 offset: 0,
@@ -1615,6 +1649,40 @@ class FiltersContext extends BaseComponent {
             });
         }
     }
+    multipleFilterSet(filters) {
+        const filter = this.facade.filter();
+        if (!filter)
+            return;
+        if (!filters)
+            return;
+        let resultQuery = filter.query ? [...filter.query] : [];
+        let hasChanges = false;
+        for (const { currentValue, val, key, type } of filters) {
+            if (!val) {
+                const newQuery = resultQuery.filter((q) => !(q.type === type && q.key === key));
+                if (newQuery.length !== resultQuery.length) {
+                    resultQuery = newQuery;
+                    hasChanges = true;
+                }
+            }
+            else if (val && currentValue !== val) {
+                resultQuery = resultQuery.filter((q) => !(q.type === type && q.key === key));
+                resultQuery.push({
+                    type: type,
+                    key: key,
+                    value: val,
+                    hidden: true,
+                });
+                hasChanges = true;
+            }
+        }
+        if (hasChanges) {
+            this.refresh({
+                offset: 0,
+                query: resultQuery,
+            });
+        }
+    }
 }
 __decorate([
     Debounce(500),
@@ -1624,10 +1692,11 @@ __decorate([
 ], FiltersContext.prototype, "refresh", null);
 class FiltersBaseComponent {
     constructor() {
+        this.facade = inject((CrudFacade));
         this.contentTpl = contentChild('contentTpl', ...(ngDevMode ? [{ debugName: "contentTpl" }] : []));
     }
     ngAfterContentInit() {
-        this.context = new FiltersContext();
+        this.context = new FiltersContext(this.facade);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: FiltersBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.1.0", type: FiltersBaseComponent, isStandalone: true, selector: "smart-mobilems-filters", queries: [{ propertyName: "contentTpl", first: true, predicate: ["contentTpl"], descendants: true, isSignal: true }], ngImport: i0 }); }
@@ -1796,6 +1865,155 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImpor
             args: [{ selector: 'smart-mobilems-header', standalone: true, imports: [], template: `` }]
         }] });
 
+class MasonryGridComponent {
+    constructor() {
+        this.list = input(...(ngDevMode ? [undefined, { debugName: "list" }] : []));
+        this.options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
+        this.classes = input('smart-my-4', ...(ngDevMode ? [{ debugName: "classes" }] : []));
+        this.masonryGridRef = viewChild('masonryGrid', ...(ngDevMode ? [{ debugName: "masonryGridRef" }] : []));
+        this.masonryContentTpl = contentChild('masonryContentTpl', ...(ngDevMode ? [{ debugName: "masonryContentTpl" }] : []));
+        this.masonryReady = signal(false, ...(ngDevMode ? [{ debugName: "masonryReady" }] : []));
+        this.masonry = inject(Masonry);
+        this.defaultOptions = {
+            itemSelector: '.masonry-item',
+            columnWidth: '.masonry-grid-sizer',
+            percentPosition: false,
+            gutter: 24,
+            horizontalOrder: false,
+        };
+        // Re-layout masonry when list changes
+        effect(() => {
+            const items = this.list();
+            if (items?.length) {
+                // Mark as not ready while reinitializing
+                this.masonryReady.set(false);
+                // Destroy existing instance to force fresh layout with new items
+                this.destroyMasonry();
+                // Defer initialization to ensure DOM is fully updated with new items
+                setTimeout(() => {
+                    const gridEl = this.masonryGridRef();
+                    if (gridEl?.nativeElement) {
+                        this.initMasonry();
+                    }
+                }, 150);
+            }
+        });
+        // Watch for grid ref changes (when component initializes or navigates)
+        effect(() => {
+            const gridEl = this.masonryGridRef();
+            const items = this.list();
+            if (gridEl?.nativeElement && items?.length) {
+                // Initialize masonry when grid appears if not already initialized
+                if (!this.masonryInstance) {
+                    setTimeout(() => this.initMasonry(), 250);
+                }
+            }
+        });
+    }
+    initMasonry() {
+        if (!this.masonry) {
+            return;
+        }
+        const gridEl = this.masonryGridRef();
+        if (!gridEl?.nativeElement) {
+            return;
+        }
+        // Responsive gutter: 0 on mobile, 24 on tablet+
+        const gutter = window.innerWidth < 768
+            ? 0
+            : (this.options()?.gutter ?? this.defaultOptions.gutter);
+        const options = {
+            ...this.defaultOptions,
+            ...this.options(),
+            gutter: gutter,
+        };
+        try {
+            this.masonryInstance = new this.masonry(gridEl.nativeElement, options);
+            // Wait for images to load, then layout and mark as ready
+            this.waitForImagesToLoad(gridEl.nativeElement).then(() => {
+                this.layoutMasonry();
+                // Small delay to ensure smooth transition
+                setTimeout(() => this.masonryReady.set(true), 250);
+            });
+        }
+        catch (error) {
+            console.warn('Masonry initialization failed:', error);
+            this.masonryReady.set(true); // Show items even on error
+        }
+    }
+    destroyMasonry() {
+        if (this.masonryInstance) {
+            try {
+                this.masonryInstance.destroy();
+            }
+            catch (error) {
+                console.warn('Masonry destroy failed:', error);
+            }
+            this.masonryInstance = undefined;
+        }
+        this.masonryReady.set(false);
+    }
+    async waitForImagesToLoad(container) {
+        const images = Array.from(container.querySelectorAll('img'));
+        if (images.length === 0) {
+            return Promise.resolve();
+        }
+        const imagePromises = images.map((img) => {
+            return new Promise((resolve) => {
+                if (img.complete) {
+                    resolve();
+                }
+                else {
+                    img.onload = () => resolve();
+                    img.onerror = () => resolve(); // resolve even on error to not block layout
+                }
+            });
+        });
+        await Promise.all(imagePromises);
+    }
+    layoutMasonry() {
+        if (this.masonryInstance) {
+            try {
+                this.masonryInstance.reloadItems();
+                this.masonryInstance.layout();
+            }
+            catch (error) {
+                console.warn('Masonry layout failed:', error);
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: MasonryGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.0", type: MasonryGridComponent, isStandalone: true, selector: "smart-mobilems-masonry-grid", inputs: { list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "masonryContentTpl", first: true, predicate: ["masonryContentTpl"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "masonryGridRef", first: true, predicate: ["masonryGrid"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div
+      #masonryGrid
+      class="smart-container"
+      [ngClass]="classes()"
+      [class.smart-opacity-0]="!masonryReady()"
+      [class.smart-opacity-100]="masonryReady()"
+    >
+      <ng-container *ngTemplateOutlet="masonryContentTpl()"></ng-container>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: MasonryGridComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'smart-mobilems-masonry-grid',
+                    template: `
+    <div
+      #masonryGrid
+      class="smart-container"
+      [ngClass]="classes()"
+      [class.smart-opacity-0]="!masonryReady()"
+      [class.smart-opacity-100]="masonryReady()"
+    >
+      <ng-container *ngTemplateOutlet="masonryContentTpl()"></ng-container>
+    </div>
+  `,
+                    imports: [NgTemplateOutlet, NgClass],
+                }]
+        }], ctorParameters: () => [] });
+
 class MenuComponent {
     constructor() {
         this.configsFacade = inject(ConfigsFacade);
@@ -2327,5 +2545,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ARTICLES_WIDGET_COMPONENTS_TOKEN, AppComponent, AuthStorageService, COMPONENTS, ClickOutsideDirective, ConfigsFacade, ConfigsService, ContrastService, CrudBaseService, DIRECTIVES, DictionaryService, FileUrlService, FiltersBaseComponent, FiltersContext, FooterComponent, GameType, GlobalService, HeaderComponent, HomeComponent, HoverDirective, ImageBox, ListMode, MenuComponent, MetaService, ModalContainerComponent, ModalRef, ModalService, NotFoundComponent, PageComponent, PageStaticComponent, QueryFilterService, SEARCH_CONFIG_TOKEN, SERVICES, ScrollTopComponent, ScrollableDirective, SearchService, SeoService, SettingsService, SharedConfig, SharedModule, StyleService, TRANSLATE_DATA_PL, TranslationService, WcagService, WidgetBaseComponent, WidgetComponent, WidgetTextComponent, authenticationGuard, environment, getSearchFilterQuery, setTranslationsAndLang, unauthorizedGuard };
+export { ARTICLES_WIDGET_COMPONENTS_TOKEN, AppComponent, AuthStorageService, COMPONENTS, ClickOutsideDirective, ConfigsFacade, ConfigsService, ContrastService, CrudBaseService, DIRECTIVES, DictionaryService, FileUrlService, FiltersBaseComponent, FiltersContext, FooterComponent, GameType, GlobalService, HeaderComponent, HomeComponent, HoverDirective, ImageBox, ListMode, MasonryGridComponent, MenuComponent, MetaService, ModalContainerComponent, ModalRef, ModalService, NotFoundComponent, PageComponent, PageStaticComponent, QueryFilterService, SEARCH_CONFIG_TOKEN, SERVICES, ScrollTopComponent, ScrollableDirective, SearchService, SeoService, SettingsService, SharedConfig, SharedModule, StyleService, TRANSLATE_DATA_PL, TranslationService, WcagService, WidgetBaseComponent, WidgetComponent, WidgetTextComponent, authenticationGuard, environment, getSearchFilterQuery, setTranslationsAndLang, unauthorizedGuard };
 //# sourceMappingURL=smartsoft001-mobilems-angular.mjs.map