Update readme

README.md

@@ -39,12 +39,7 @@ if (window.customElements.get("cookie-consent") === undefined) {
 }
 ```
 
-Once registered, you can add the cookie-consent element to your HTML, you can pass custom data attributes for the:
-
--   title
--   description
--   save button text
--   cookie types
+Once registered, you can add the cookie-consent element to your HTML there's some optional data you can pass to the element but the only required attribute to pass along are the cookies:
 
 ```js
 const cookies = [
@@ -71,6 +66,12 @@ const stringifiedCookies = JSON.stringify(cookies);
 
 ## Options
 
+As mentioned before there is some optional data you can pass to the element:
+
+-   title `string`
+-   description `string`
+-   save button text `string`
+
 To use the options, add them as data attributes to the custom element:
 
 ```js
@@ -88,7 +89,6 @@ All options except `cookies` are optional. They will fall back to the defaults,
 
 ```js
 export const DEFAULTS = {
-    type: "checkbox",
     prefix: "cookie-consent",
     append: true,
     appendDelay: 500,
@@ -112,8 +112,11 @@ export const DEFAULTS = {
 
 ## API
 
--   [show()](#showdialog)
--   [hide()](#hidedialog)
+-   [show()](#show)
+-   [hide()](#hide)
+-   [getPreferences()](#getpreferences)
+-   [updatePreference()](#updatePreferencecookies-array)
+-   [on()](#on)
 
 ### show()
 
@@ -131,12 +134,92 @@ button.addEventListener("click", (e) => {
 Will hide the dialog element.
 
 ```js
-el.addEventListener("click", (e) => {
+button.addEventListener("click", (e) => {
     e.preventDefault();
     cookieConsent.hide();
 });
 ```
 
+### getPreferences()
+
+Will return an array with preferences per cookie type.
+
+```js
+const preferences = cookieConsent.getPreferences();
+
+// [
+//   {
+//     "id": "analytical",
+//     "accepted": true
+//   },
+//   {
+//     "id": "marketing",
+//     "accepted": false
+//   }
+// ]
+```
+
+### updatePreference(cookies: array)
+
+Update cookies programmatically.
+
+By updating cookies programmatically, the event handler will receive an update method.
+
+```js
+const cookies = [
+    {
+        id: "marketing",
+        label: "Marketing",
+        description: "...",
+        required: false,
+        checked: true,
+    },
+    {
+        id: "simple",
+        label: "Simple",
+        description: "...",
+        required: false,
+        checked: false,
+    },
+];
+```
+
+### on(event: string)
+
+Add listeners for events. Will fire when the event is dispatched from the CookieConsent module.
+See available [events](#events).
+
+```js
+cookieConsent.on("event", eventHandler);
+```
+
+## Events
+
+Events are bound by the [on](#onevent-string) method.
+
+-   [update](#update)
+
+### update
+
+Will fire whenever the cookie settings are updated, or when the instance is constructed and stored preferences are found. It returns the array with cookie preferences, identical to the `getPreferences()` method.
+
+This event can be used to fire tag triggers for each cookie type, for example via Google Tag Manager (GTM). In the following example trackers are loaded via a trigger added in GTM. Each cookie type has it's own trigger, based on the `cookieType` variable, and the trigger itself is invoked by the `cookieConsent` event.
+
+Example:
+
+```js
+cookieConsent.on("update", (cookies) => {
+    const accepted = cookies.filter((cookie) => cookie.accepted);
+    const dataLayer = window.dataLayer || [];
+    accepted.forEach((cookie) =>
+        dataLayer.push({
+            event: "cookieConsent",
+            cookieType: cookie.id,
+        })
+    );
+});
+```
+
 ## Styling
 
 No styling is being applied by the JavaScript module. However, there is a default stylesheet in the form of a [Sass](https://sass-lang.com/) module which can easily be added and customized to your project and its needs.
@@ -151,7 +234,7 @@ cookie-consent::part(cookie-consent) {
 /**
  * Header
  */
-wookie-consent::part(cookie-consent__header) {
+cookie-consent::part(cookie-consent__header) {
     // Styles for the cookie consent header
 }
 cookie-consent::part(cookie-consent__title) {
@@ -161,10 +244,10 @@ cookie-consent::part(cookie-consent__title) {
 /**
  * Tabs
  */
-wookie-consent::part(cookie-consent__tab-list) {
+cookie-consent::part(cookie-consent__tab-list) {
     // Styles for the cookie consent tab list
 }
-wookie-consent::part(cookie-consent__tab-list-item) {
+cookie-consent::part(cookie-consent__tab-list-item) {
     // Styles for the cookie consent tab list item
 }
 cookie-consent::part(cookie-consent__tab) {