feat-fix: customClass fix, feat customOpenerClass

giacomo · Jun 4, 2024 · 4b9a1be · 4b9a1be
1 parent 9bd9d85
commit 4b9a1be
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -73,6 +73,7 @@ import { NgxCookieConsentModule } from '@localia/ngx-cookie-consent';
 | showLanguageSwitcher  | boolean                          | true               | Show language switcher                                                             |
 | showBadgeOpener       | boolean                          | true               | Show badge opener                                                                  |
 | openerPosition        | enum                             | 'left-bottom'      | Position of the badge eg. 'left-top', 'right-top' , 'left-bottom' , 'right-bottom' |
+| customOpenerClass     | string                           | ''                 | Custom class for the badge opener                                                  |
 | customClass           | string                           | ''                 | Custom class for the cookie consent banner                                         |
 | cookiePrefix          | string                           | 'cookieconsent_'   | Prefix for the cookie consent banner                                               |
 | cookieExpiryDays      | number                           | 365                | Expiry days for the cookie consent banner                                          |

diff --git a/projects/ngx-cookie-consent/README.md b/projects/ngx-cookie-consent/README.md
@@ -73,6 +73,7 @@ import { NgxCookieConsentModule } from '@localia/ngx-cookie-consent';
 | showLanguageSwitcher  | boolean                          | true               | Show language switcher                                                             |
 | showBadgeOpener       | boolean                          | true               | Show badge opener                                                                  |
 | openerPosition        | enum                             | 'left-bottom'      | Position of the badge eg. 'left-top', 'right-top' , 'left-bottom' , 'right-bottom' |
+| customOpenerClass     | string                           | ''                 | Custom class for the badge opener                                                  |
 | customClass           | string                           | ''                 | Custom class for the cookie consent banner                                         |
 | cookiePrefix          | string                           | 'cookieconsent_'   | Prefix for the cookie consent banner                                               |
 | cookieExpiryDays      | number                           | 365                | Expiry days for the cookie consent banner                                          |

diff --git a/projects/ngx-cookie-consent/package.json b/projects/ngx-cookie-consent/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@localia/ngx-cookie-consent",
-    "version": "2.1.0",
+    "version": "2.2.0",
     "description": "Angular module to display a cookie consent banner without other dependencies.",
     "author": "Giacomo Barbalinardo <me@giacomo.dev>",
     "license": "MIT",

diff --git a/projects/ngx-cookie-consent/src/lib/config/ngx-cookie-consent-config.service.ts b/projects/ngx-cookie-consent/src/lib/config/ngx-cookie-consent-config.service.ts
@@ -14,6 +14,7 @@ export class NgxCookieConsentConfigService {
     showBadgeOpener?: boolean = true;
     openerPosition?: 'left-top' | 'right-top' | 'left-bottom' | 'right-bottom' = 'left-bottom';
     customClass?: string = '';
+    customOpenerClass?: string = '';
     cookiePrefix?: string = 'cookieconsent_';
     cookieExpiryDays?: number = 365;
     showCookieDetails?: boolean = false;

diff --git a/projects/ngx-cookie-consent/src/lib/ngx-cookie-consent.component.html b/projects/ngx-cookie-consent/src/lib/ngx-cookie-consent.component.html
@@ -1,4 +1,4 @@
-<div class="ngx-cc" *ngIf="cookieConsentVisible" (click)="closeDropDown($event)">
+<div class="ngx-cc" *ngIf="cookieConsentVisible" (click)="closeDropDown($event)" [ngClass]="config('customClass')">
     <div class="ngx-cc__wrapper">
         <div class="ngx-cc__modal" *ngIf="!showSettingsDialog">
             <div class="ngx-cc__modal_language-switcher" *ngIf="config('showLanguageSwitcher')">
@@ -263,7 +263,7 @@ <h5>{{ translate_o(other.name) }}</h5>
     </div>
 </div>
 
-<div class="ngx-cc__opener" [ngClass]="['ngx-cc__opener-' + config('openerPosition')]" *ngIf="!cookieConsentVisible && config('showBadgeOpener')" (click)="cookieConsentVisible = true">
+<div class="ngx-cc__opener" [ngClass]="['ngx-cc__opener-' + config('openerPosition'), config('customOpenerClass')]" *ngIf="!cookieConsentVisible && config('showBadgeOpener')" (click)="cookieConsentVisible = true">
     <svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
          y="0px" viewBox="0 0 120.23 122.88" style="enable-background:new 0 0 120.23 122.88" xml:space="preserve"
     ><style type="text/css">.st0 {

diff --git a/projects/ngx-cookie-consent/src/lib/ngx-cookie-consent.component.spec.ts b/projects/ngx-cookie-consent/src/lib/ngx-cookie-consent.component.spec.ts
@@ -50,6 +50,52 @@ describe('NgxCookieConsentComponent', () => {
         expect(component.otherToolsClosed).toBeTrue();
     });
 
+    it('should contain custom class from config', () => {
+        const configMock = TestBed.inject(NgxCookieConsentService);
+        configMock.setConfig('customClass', 'custom-class');
+        component.cookieConsentVisible = true;
+
+        fixture.detectChanges();
+
+        const renderedElement = fixture.nativeElement as HTMLElement;
+        expect(renderedElement.querySelector('.ngx-cc')?.classList.length).toBe(2);
+        expect(renderedElement.querySelector('.ngx-cc')?.classList.contains('custom-class')).toBeTrue();
+    });
+
+    it('should not contain custom class from config if class is empty', () => {
+        const configMock = TestBed.inject(NgxCookieConsentService);
+        configMock.setConfig('customClass', '');
+        component.cookieConsentVisible = true;
+
+        fixture.detectChanges();
+
+        const renderedElement = fixture.nativeElement as HTMLElement;
+        expect(renderedElement.querySelector('.ngx-cc')?.classList.length).toBe(1);
+    });
+
+    it('should contain custom opener class from config', () => {
+        const configMock = TestBed.inject(NgxCookieConsentService);
+        configMock.setConfig('customOpenerClass', 'custom-opener-class');
+        component.cookieConsentVisible = false;
+
+        fixture.detectChanges();
+
+        const renderedElement = fixture.nativeElement as HTMLElement;
+        expect(renderedElement.querySelector('.ngx-cc__opener')?.classList.length).toBe(3);
+        expect(renderedElement.querySelector('.ngx-cc__opener')?.classList.contains('custom-opener-class')).toBeTrue
+    });
+
+    it('should not contain custom opener class from config if class is empty', () => {
+        const configMock = TestBed.inject(NgxCookieConsentService);
+        configMock.setConfig('customOpenerClass', '');
+        component.cookieConsentVisible = false;
+
+        fixture.detectChanges();
+
+        const renderedElement = fixture.nativeElement as HTMLElement;
+        expect(renderedElement.querySelector('.ngx-cc__opener')?.classList.length).toBe(2);
+    });
+
     it('should get activeLang from config', () => {
         const configMock = TestBed.inject(NgxCookieConsentService);
         spyOn(configMock, 'getConfig').and.returnValue('en');