@onsvisual/svelte-components 1.0.49 → 1.0.50

package/dist/layout/Accordion/Accordion.svelte

@@ -1,9 +1,11 @@
 <script>
-	import { onMount, setContext } from "svelte";
+	import { onMount, setContext, createEventDispatcher } from "svelte";
 	import Accordion from "./accordion.js";
 	import Details from "./details.js";
 	import { slugify, sleep } from "../../js/utils.js";
 
+	const dispatch = createEventDispatcher();
+
 	/**
 	 * Optional: Set the unique ID of the accordion
 	 * @type {string}
@@ -27,7 +29,9 @@
 	onMount(async () => {
 		await sleep(0);
 		const detailsComponents = [...el.querySelectorAll(".ons-js-details")];
-		const detailsEls = detailsComponents.map((element) => new Details(element));
+		const detailsEls = detailsComponents.map(
+			(el) => new Details(el, (data) => dispatch("toggle", { ...data, el }))
+		);
 		new Accordion(buttonEl, detailsEls);
 	});
 </script>

package/dist/layout/Accordion/Accordion.svelte.d.ts

@@ -6,6 +6,8 @@ export default class Accordion extends SvelteComponentTyped<{
     id?: string | undefined;
     showToggle?: boolean | undefined;
 }, {
+    toggle: CustomEvent<any>;
+} & {
     [evt: string]: CustomEvent<any>;
 }, {
     default: {};
@@ -22,6 +24,8 @@ declare const __propDef: {
         showToggle?: boolean | undefined;
     };
     events: {
+        toggle: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/dist/layout/Accordion/details.d.ts

@@ -1,5 +1,5 @@
 export default class Details {
-    constructor(detailsElement: any);
+    constructor(detailsElement: any, callback?: null);
     saveState: boolean;
     open: boolean;
     group: any;
@@ -7,6 +7,8 @@ export default class Details {
     detailsHeader: any;
     content: any;
     detailsTitle: any;
+    detailsId: any;
+    callback: any;
     toggle(event: any): void;
     setOpen(open: any): void;
     isOpen: any;

package/dist/layout/Accordion/details.js

@@ -1,5 +1,5 @@
 export default class Details {
-	constructor(detailsElement) {
+	constructor(detailsElement, callback = null) {
 		this.saveState = detailsElement.getAttribute("data-save-state") === "true";
 		this.open = detailsElement.getAttribute("data-open") === "true";
 		this.group = detailsElement.getAttribute("data-group");
@@ -11,14 +11,15 @@ export default class Details {
 		this.detailsTitle = this.details.querySelector(".ons-js-corrections-details-title");
 
 		// Initialise
-		const detailsId = detailsElement.getAttribute("id");
+		this.detailsId = detailsElement.getAttribute("id");
+		this.callback = callback;
 
 		this.details.setAttribute("role", "group");
 		this.detailsHeader.setAttribute("role", "link");
-		this.detailsHeader.setAttribute("aria-controls", detailsId);
+		this.detailsHeader.setAttribute("aria-controls", this.detailsId);
 		this.detailsHeader.setAttribute("tabindex", 0);
 
-		if (localStorage.getItem(detailsId) || this.open) {
+		if (localStorage.getItem(this.detailsId) || this.open) {
 			this.setOpen(true);
 		} else {
 			this.setOpen(false);
@@ -32,6 +33,8 @@ export default class Details {
 	toggle(event) {
 		event.preventDefault();
 		this.setOpen(!this.isOpen);
+
+		if (typeof this.callback === "function") this.callback({ id: this.detailsId, open: this.isOpen });
 	}
 
 	setOpen(open) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onsvisual/svelte-components",
-	"version": "1.0.49",
+	"version": "1.0.50",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "npm run build:package && npm run build:docs",