Type declaration file (#16)

* all imported interfaces are now imported as "import type"

* fixed typo in names

* better typings

* removed unknown theme property

* prefix build with version comment

* renamed package

* created types declaration file

* merge same rollupJS piping

* added launch config

.vscode/launch.json

@@ -0,0 +1,20 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+
+  "configurations": [
+    {
+      "name": "Develop",
+      "type": "node-terminal",
+      "request": "launch",
+      "command": "npm run dev",
+      "serverReadyAction": {
+        "pattern": "  Local:.+(https?://[a-z]+:[0-9]+)",
+        "uriFormat": "%s/public/",
+        "action": "debugWithChrome"
+      }
+    }
+  ]
+}

package.json

@@ -1,10 +1,12 @@
 {
-  "name": "@zoot/cookie-consent",
+  "name": "@danielsitek/dgp-cookie-consent",
   "version": "1.6.2",
-  "description": "ZOOT cookie consent",
+  "description": "DGP cookie consent",
   "main": "dist/cookies.js",
+  "types": "./types.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "./types.d.ts"
   ],
   "scripts": {
     "test": "echo \"Error: no test specified\"",
@@ -17,7 +19,13 @@
   },
   "keywords": [
     "cookie",
-    "cookiebar"
+    "cookiebar",
+    "cookieconsent",
+    "consent",
+    "gdpr",
+    "privacy",
+    "privacybar",
+    "privacyconsent"
   ],
   "author": "Daniel Sitek <[email protected]>",
   "license": "MIT",
@@ -37,6 +45,7 @@
     "gulp": "^4.0.2",
     "gulp-cli": "^2.3.0",
     "gulp-eslint": "^6.0.0",
+    "gulp-insert": "^0.5.0",
     "gulp-postcss": "^9.0.1",
     "gulp-rename": "^2.0.0",
     "gulp-sass": "^5.0.0",
@@ -64,4 +73,4 @@
     "ie >= 11"
   ],
   "private": "true"
-}
+}

public/example.html

@@ -11,7 +11,6 @@
 
     'button-primary--hover__bg-color': '#8d1a44',
     'button-primary--hover__color': '#fff',
-    'button-primary--hover__text-transform': 'none',
   };
 
   window.CookieConsentTranslations = {
@@ -101,7 +100,6 @@
 
       'button-primary--hover__bg-color': '#8d1a44',
       'button-primary--hover__color': '#fff',
-      'button-primary--hover__text-transform': 'none',
     };
 
     window.CookieConsentTranslations = {

src/components/consent-button/consent-button.ts

@@ -1,5 +1,5 @@
 import { EVENT_CLICK } from '@/config';
-import { componentClassList, ComponentProps } from '@/utils/component-helpers';
+import { componentClassList, type ComponentProps } from '@/utils/component-helpers';
 import { createVElement } from '@/utils/elements';
 
 interface ConsentButtonProps extends ComponentProps {

src/components/consent-dialog-footer/consent-dialog-footer.ts

@@ -1,4 +1,4 @@
-import { componentClassList, ComponentProps } from '@/utils/component-helpers';
+import { componentClassList, type ComponentProps } from '@/utils/component-helpers';
 import { createVElement } from '@/utils/elements';
 
 interface ConsentTabProps extends ComponentProps {

src/components/consent-dialog/consent-dialog.ts

@@ -1,4 +1,4 @@
-import { ComponentProps, componentClassList } from '@/utils/component-helpers';
+import { type ComponentProps, componentClassList } from '@/utils/component-helpers';
 import { createVElement } from '@/utils/elements';
 import { consentTabs } from '../consent-tabs/consent-tabs';
 import { tabButtonAboutEl, tabButtonAgreeEl, tabButtonDetailsEl } from '../consent-tab/consent-tab-instances';

src/components/consent-tab/consent-tab.ts

@@ -1,5 +1,5 @@
 import { EVENT_CLICK } from '@/config';
-import { ComponentProps } from '@/utils/component-helpers';
+import type { ComponentProps } from '@/utils/component-helpers';
 import { createVElement } from '@/utils/elements';
 
 interface ConsentTabProps extends ComponentProps {

src/components/consent-tabs/consent-tabs.ts

@@ -1,4 +1,4 @@
-import { componentClassList, ComponentProps } from '@/utils/component-helpers';
+import { componentClassList, type ComponentProps } from '@/utils/component-helpers';
 import { createVElement } from '@/utils/elements';
 
 interface ConsentTabsProps extends ComponentProps {

src/components/tab-content-details/tab-content-details.ts

@@ -1,9 +1,9 @@
 import { translationService } from '@/services/translation-service';
 import { createVElement } from '@/utils/elements';
 import { consentDialogFooter } from '@/components/consent-dialog-footer/consent-dialog-footer';
-import { consentSection, ConsentSectionProps } from '@/components/consent-section/consent-section';
+import { consentSection, type ConsentSectionProps } from '@/components/consent-section/consent-section';
 
-export interface TabContentDefaultsectionsProps {
+export interface TabContentDefaultSectionsProps {
   necessary: ConsentSectionProps;
   preferences: ConsentSectionProps;
   statistics: ConsentSectionProps;
@@ -14,7 +14,7 @@ export interface TabContentDetailsProps {
   lastUpdated?: string;
   buttonRejectAll?: HTMLButtonElement;
   buttonConfirm?: HTMLButtonElement;
-  sections: TabContentDefaultsectionsProps;
+  sections: TabContentDefaultSectionsProps;
   buttons?: Array<HTMLButtonElement | boolean>;
 }
 

src/config/index.ts

@@ -1,4 +1,4 @@
-import { ConsentType } from '@/utils/consent';
+import type { ConsentType } from '@/utils/consent';
 
 export const COOKIE_NAME = 'CookieConsent';
 export const COOKIE_EXPIRATION = 365;

src/elements/consent-dialog/consent-dialog.ts

@@ -17,12 +17,12 @@ import { settingsService } from '@/services/settings-service';
 import { themeService } from '@/services/theme-service';
 import { translationService } from '@/services/translation-service';
 import { fadeIn, fadeOut } from '@/utils/animation';
-import { ConsentType } from '@/utils/consent';
+import type { ConsentType } from '@/utils/consent';
 import { createVElement } from '@/utils/elements';
 import { dispatchEventConsentHide, dispatchEventConsentShow } from '@/utils/events';
 import { consentButton, consentButtonPrimary } from '@/components/consent-button/consent-button';
 import { tabContentDefault } from '@/components/tab-content-default/tab-content-default';
-import { TabContentDetailsProps, tabContentDetails } from '@/components/tab-content-details/tab-content-details';
+import { type TabContentDetailsProps, tabContentDetails } from '@/components/tab-content-details/tab-content-details';
 import {
   switchMarketing,
   switchNecessary,

src/index.ts

@@ -1,12 +1,23 @@
 import { ConsentService } from '@/services/consent-service';
-import { CookieConsentTranslations } from '@/services/translation-service';
-import { CookieConsentTheme } from '@/services/theme-service';
-import { CookieConsentSettings } from '@/services/settings-service';
+import type { CookieConsentTranslations } from '@/services/translation-service';
+import type { CookieConsentTheme } from '@/services/theme-service';
+import type { CookieConsentSettings } from '@/services/settings-service';
 import { initConsentModal } from '@/init/initConsentModal';
 import { initConsentBadge } from '@/init/initConsentBadge';
 
 type WindowCookieConsent = ConsentService;
 
+declare global {
+  interface Window {
+    CookieConsent: WindowCookieConsent;
+    CookieConsentTranslations: CookieConsentTranslations;
+    CookieConsentTheme: CookieConsentTheme;
+    CookieConsentThemeDark: CookieConsentTheme;
+    CookieConsentSettings: CookieConsentSettings;
+    CookieConsentModalOpen: () => void;
+  }
+}
+
 const windowCookieConsent = (): WindowCookieConsent => {
   const consent = new ConsentService();
 
@@ -19,17 +30,6 @@ const windowCookieConsent = (): WindowCookieConsent => {
   return consent;
 };
 
-declare global {
-  interface Window {
-    CookieConsent: WindowCookieConsent;
-    CookieConsentTranslations: CookieConsentTranslations;
-    CookieConsentTheme: CookieConsentTheme;
-    CookieConsentThemeDark: CookieConsentTheme;
-    CookieConsentSettings: CookieConsentSettings;
-    CookieConsentModalOpen: () => void;
-  }
-}
-
 window.CookieConsent = windowCookieConsent();
 
 window.CookieConsentModalOpen = () => {