@c8y/ngx-components 1023.14.148 → 1023.14.150

package/fesm2022/c8y-ngx-components.mjs

@@ -13016,21 +13016,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
 class MessageBannerService {
     constructor() {
         this.MESSAGE_BANNER = 'messageBanner';
+        this.DISMISSED_BANNERS_KEY = 'c8y.dismissedMessageBanners';
         this.options = inject(OptionsService);
         this.showBanner$ = new Subject();
+        this.isPreview = false;
     }
     settings$() {
         return this.options.get$(this.MESSAGE_BANNER);
     }
-    showBanner() {
+    showBanner(isPreview = false) {
+        this.isPreview = isPreview;
         this.showBanner$.next(true);
     }
-    dismiss() {
+    dismiss(bannerId, acknowledge) {
         this.showBanner$.next(false);
+        if (!this.isPreview && bannerId && acknowledge) {
+            this.markBannerAsDismissed(bannerId);
+        }
+        this.isPreview = false;
     }
     currentValue() {
         return this.options.get(this.MESSAGE_BANNER);
     }
+    /**
+     * Checks if a banner with the given ID has been dismissed before.
+     */
+    isBannerDismissed(bannerId) {
+        if (!bannerId) {
+            return false;
+        }
+        const dismissed = localStorage.getItem(this.DISMISSED_BANNERS_KEY);
+        if (!dismissed) {
+            return false;
+        }
+        const dismissedIds = JSON.parse(dismissed);
+        return dismissedIds.includes(bannerId);
+    }
+    /**
+     * Marks a banner as dismissed in localStorage.
+     */
+    markBannerAsDismissed(bannerId) {
+        const dismissed = localStorage.getItem(this.DISMISSED_BANNERS_KEY);
+        const dismissedIds = dismissed ? JSON.parse(dismissed) : [];
+        if (!dismissedIds.includes(bannerId)) {
+            dismissedIds.push(bannerId);
+            localStorage.setItem(this.DISMISSED_BANNERS_KEY, JSON.stringify(dismissedIds));
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MessageBannerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MessageBannerService, providedIn: 'root' }); }
 }
@@ -13046,18 +13078,22 @@ class MessageBannerComponent {
     ngOnInit() {
         this.settings$ = this.messageBannerService.settings$().pipe(shareReplay(1));
         this.showBanner$ = this.settings$.pipe(filter(Boolean), take(1), switchMap(settings => {
-            return this.messageBannerService.showBanner$.pipe(startWith(settings?.messageBannerEnabled));
+            const wasDismissed = settings?.messageBannerId
+                ? this.messageBannerService.isBannerDismissed(settings.messageBannerId)
+                : false;
+            const shouldShow = settings?.messageBannerEnabled && !wasDismissed;
+            return this.messageBannerService.showBanner$.pipe(startWith(shouldShow));
         }));
     }
-    dismiss() {
-        this.messageBannerService.dismiss();
+    dismiss(settings, acknowledge) {
+        this.messageBannerService.dismiss(settings?.messageBannerId, acknowledge);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MessageBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: MessageBannerComponent, isStandalone: true, selector: "c8y-message-banner", ngImport: i0, template: "<ng-container *ngIf=\"settings$ | async as settings\">\n  <div *ngIf=\"showBanner$ | async\">\n    <div\n      class=\"alert d-flex\"\n      [class]=\"'alert-' + settings.messageBannerType\"\n    >\n      <span\n        class=\"flex-grow\"\n        [innerHTML]=\"settings.messageBannerContent | translate | markdownToHtml | async\"\n      ></span>\n      <button\n        class=\"close a-s-start\"\n        [attr.aria-label]=\"'Close' | translate\"\n        type=\"button\"\n        (click)=\"dismiss()\"\n      >\n        <i\n          c8yIcon=\"times\"\n          aria-hidden=\"true\"\n        ></i>\n        <span class=\"sr-only\">Close</span>\n      </button>\n    </div>\n  </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: MarkdownToHtmlPipe, name: "markdownToHtml" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: MessageBannerComponent, isStandalone: true, selector: "c8y-message-banner", ngImport: i0, template: "@if (settings$ | async; as settings) {\n  @if (showBanner$ | async) {\n    <div>\n      <div\n        class=\"alert\"\n        [class]=\"'alert-' + settings.messageBannerType\"\n      >\n        <div\n          class=\"flex-grow\"\n          [innerHTML]=\"settings.messageBannerContent | translate | markdownToHtml | async\"\n        ></div>\n        <div class=\"d-flex\">\n          <button\n            class=\"btn btn-default m-l-auto\"\n            [title]=\"'Acknowledge and close' | translate\"\n            type=\"button\"\n            (click)=\"dismiss(settings, true)\"\n          >\n            {{ 'Acknowledge and close' | translate }}\n          </button>\n          <button\n            class=\"btn btn-default m-l-8\"\n            [title]=\"'Close' | translate\"\n            type=\"button\"\n            (click)=\"dismiss(settings, false)\"\n          >\n            {{ 'Close' | translate }}\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n}\n", dependencies: [{ kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: MarkdownToHtmlPipe, name: "markdownToHtml" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MessageBannerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-message-banner', standalone: true, imports: [NgIf, IconDirective, C8yTranslatePipe, AsyncPipe, MarkdownToHtmlPipe], template: "<ng-container *ngIf=\"settings$ | async as settings\">\n  <div *ngIf=\"showBanner$ | async\">\n    <div\n      class=\"alert d-flex\"\n      [class]=\"'alert-' + settings.messageBannerType\"\n    >\n      <span\n        class=\"flex-grow\"\n        [innerHTML]=\"settings.messageBannerContent | translate | markdownToHtml | async\"\n      ></span>\n      <button\n        class=\"close a-s-start\"\n        [attr.aria-label]=\"'Close' | translate\"\n        type=\"button\"\n        (click)=\"dismiss()\"\n      >\n        <i\n          c8yIcon=\"times\"\n          aria-hidden=\"true\"\n        ></i>\n        <span class=\"sr-only\">Close</span>\n      </button>\n    </div>\n  </div>\n</ng-container>\n" }]
+            args: [{ selector: 'c8y-message-banner', standalone: true, imports: [IconDirective, C8yTranslatePipe, AsyncPipe, MarkdownToHtmlPipe], template: "@if (settings$ | async; as settings) {\n  @if (showBanner$ | async) {\n    <div>\n      <div\n        class=\"alert\"\n        [class]=\"'alert-' + settings.messageBannerType\"\n      >\n        <div\n          class=\"flex-grow\"\n          [innerHTML]=\"settings.messageBannerContent | translate | markdownToHtml | async\"\n        ></div>\n        <div class=\"d-flex\">\n          <button\n            class=\"btn btn-default m-l-auto\"\n            [title]=\"'Acknowledge and close' | translate\"\n            type=\"button\"\n            (click)=\"dismiss(settings, true)\"\n          >\n            {{ 'Acknowledge and close' | translate }}\n          </button>\n          <button\n            class=\"btn btn-default m-l-8\"\n            [title]=\"'Close' | translate\"\n            type=\"button\"\n            (click)=\"dismiss(settings, false)\"\n          >\n            {{ 'Close' | translate }}\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n}\n" }]
         }] });
 
 /**