@event-calendar/resource-time-grid - npm Package Compare versions

Comparing version 2.4.1 to 2.5.0

index.js

@@ -1,7 +0,17 @@
-import { setContent, toLocalDate, btnTextDay, themeView, btnTextWeek } from '@event-calendar/core';
+import { setContent, toLocalDate, toISOString, btnTextDay, themeView, btnTextWeek } from '@event-calendar/core';
 import TimeGrid, { Section, Body, Week, Day } from '@event-calendar/time-grid';
 import { derived } from 'svelte/store';
 import { SvelteComponent, init, safe_not_equal, element, attr, insert, action_destroyer, is_function, noop, detach, component_subscribe, binding_callbacks, create_component, space, mount_component, append, transition_in, group_outros, transition_out, check_outros, destroy_component, ensure_array_like, empty, destroy_each, set_store_value } from 'svelte/internal';
-import { getContext, onMount } from 'svelte';
+import { getContext, createEventDispatcher, onMount, afterUpdate } from 'svelte';
 
+function createResources(input) {
+    return input.map(resource => ({
+        id: String(resource.id),
+        title: resource.title || '',
+        titleHTML: resource.titleHTML || '',
+        eventBackgroundColor: resource.eventBackgroundColor,
+        eventTextColor: resource.eventTextColor
+    }));
+}
+
 function viewResources(state) {
@@ -30,3 +40,3 @@ return derived(
             if (!result.length) {
-                result = state.resources.parse([{}]);
+                result = createResources([{}]);
             }
@@ -39,7 +49,6 @@
 
-/* packages/resource-time-grid/src/Label.svelte generated by Svelte v4.2.2 */
+/* packages/resource-time-grid/src/Label.svelte generated by Svelte v4.2.8 */
 
 function create_fragment$1(ctx) {
-	let div;
-	let div_class_value;
+	let span;
 	let setContent_action;
@@ -51,11 +60,11 @@ let mounted;
 		c() {
-			div = element("div");
-			attr(div, "class", div_class_value = /*$theme*/ ctx[2].day);
+			span = element("span");
+			attr(span, "aria-label", /*ariaLabel*/ ctx[2]);
 		},
 		m(target, anchor) {
-			insert(target, div, anchor);
-			/*div_binding*/ ctx[9](div);
+			insert(target, span, anchor);
+			/*span_binding*/ ctx[9](span);
 
 			if (!mounted) {
-				dispose = action_destroyer(setContent_action = setContent.call(null, div, /*content*/ ctx[1]));
+				dispose = action_destroyer(setContent_action = setContent.call(null, span, /*content*/ ctx[1]));
 				mounted = true;
@@ -65,4 +74,4 @@ }
 		p(ctx, [dirty]) {
-			if (dirty & /*$theme*/ 4 && div_class_value !== (div_class_value = /*$theme*/ ctx[2].day)) {
-				attr(div, "class", div_class_value);
+			if (dirty & /*ariaLabel*/ 4) {
+				attr(span, "aria-label", /*ariaLabel*/ ctx[2]);
 			}
@@ -76,6 +85,6 @@
 			if (detaching) {
-				detach(div);
+				detach(span);
 			}
 
-			/*div_binding*/ ctx[9](null);
+			/*span_binding*/ ctx[9](null);
 			mounted = false;
@@ -88,13 +97,15 @@ dispose();
 function instance$2($$self, $$props, $$invalidate) {
+	let $_intlDayHeaderAL;
 	let $resourceLabelDidMount;
 	let $resourceLabelContent;
-	let $theme;
 	let { resource } = $$props;
 	let { date = undefined } = $$props;
-	let { resourceLabelContent, resourceLabelDidMount, theme } = getContext('state');
+	let { resourceLabelContent, resourceLabelDidMount, _intlDayHeaderAL } = getContext('state');
 	component_subscribe($$self, resourceLabelContent, value => $$invalidate(8, $resourceLabelContent = value));
-	component_subscribe($$self, resourceLabelDidMount, value => $$invalidate(10, $resourceLabelDidMount = value));
-	component_subscribe($$self, theme, value => $$invalidate(2, $theme = value));
+	component_subscribe($$self, resourceLabelDidMount, value => $$invalidate(11, $resourceLabelDidMount = value));
+	component_subscribe($$self, _intlDayHeaderAL, value => $$invalidate(10, $_intlDayHeaderAL = value));
+	const dispatch = createEventDispatcher();
 	let el;
 	let content;
+	let ariaLabel;
 
@@ -111,3 +122,12 @@ onMount(() => {
 
-	function div_binding($$value) {
+	afterUpdate(() => {
+		if (date) {
+			$$invalidate(2, ariaLabel = $_intlDayHeaderAL.format(date) + ', ' + el.innerText);
+		} else {
+			$$invalidate(2, ariaLabel = undefined);
+			dispatch('text', el.innerText);
+		}
+	});
+
+	function span_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
@@ -145,10 +165,10 @@ el = $$value;
 		content,
-		$theme,
+		ariaLabel,
 		resourceLabelContent,
 		resourceLabelDidMount,
-		theme,
+		_intlDayHeaderAL,
 		resource,
 		date,
 		$resourceLabelContent,
-		div_binding
+		span_binding
 	];
@@ -164,7 +184,7 @@ }
 
-/* packages/resource-time-grid/src/View.svelte generated by Svelte v4.2.2 */
+/* packages/resource-time-grid/src/View.svelte generated by Svelte v4.2.8 */
 
 function get_each_context(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[13] = list[i];
+	child_ctx[17] = list[i];
 	return child_ctx;
@@ -175,3 +195,3 @@ }
 	const child_ctx = ctx.slice();
-	child_ctx[16] = list[i];
+	child_ctx[20] = list[i];
 	return child_ctx;
@@ -182,3 +202,3 @@ }
 	const child_ctx = ctx.slice();
-	child_ctx[22] = list[i];
+	child_ctx[26] = list[i];
 	return child_ctx;
@@ -189,3 +209,3 @@ }
 	const child_ctx = ctx.slice();
-	child_ctx[19] = list[i];
+	child_ctx[23] = list[i];
 	return child_ctx;
@@ -196,3 +216,3 @@ }
 	const child_ctx = ctx.slice();
-	child_ctx[22] = list[i];
+	child_ctx[26] = list[i];
 	return child_ctx;
@@ -203,3 +223,4 @@ }
 	const child_ctx = ctx.slice();
-	child_ctx[13] = list[i];
+	child_ctx[17] = list[i];
+	child_ctx[32] = i;
 	return child_ctx;
@@ -210,24 +231,40 @@ }
 	const child_ctx = ctx.slice();
-	child_ctx[16] = list[i];
+	child_ctx[20] = list[i];
 	return child_ctx;
 }
 
-// (19:16) {:else}
+// (28:16) {:else}
 function create_else_block_2(ctx) {
+	let div;
 	let label;
+	let div_class_value;
 	let current;
-	label = new Label({ props: { resource: /*item0*/ ctx[13] } });
 
+	function text_handler(...args) {
+		return /*text_handler*/ ctx[16](/*i*/ ctx[32], ...args);
+	}
+
+	label = new Label({ props: { resource: /*item0*/ ctx[17] } });
+	label.$on("text", text_handler);
+
 	return {
 		c() {
+			div = element("div");
 			create_component(label.$$.fragment);
+			attr(div, "class", div_class_value = /*$theme*/ ctx[5].day);
 		},
 		m(target, anchor) {
-			mount_component(label, target, anchor);
+			insert(target, div, anchor);
+			mount_component(label, div, null);
 			current = true;
 		},
-		p(ctx, dirty) {
+		p(new_ctx, dirty) {
+			ctx = new_ctx;
 			const label_changes = {};
-			if (dirty[0] & /*loops*/ 8) label_changes.resource = /*item0*/ ctx[13];
+			if (dirty[0] & /*loops*/ 8) label_changes.resource = /*item0*/ ctx[17];
 			label.$set(label_changes);
+
+			if (!current || dirty[0] & /*$theme*/ 32 && div_class_value !== (div_class_value = /*$theme*/ ctx[5].day)) {
+				attr(div, "class", div_class_value);
+			}
 		},
@@ -244,3 +281,7 @@ i(local) {
 		d(detaching) {
-			destroy_component(label, detaching);
+			if (detaching) {
+				detach(div);
+			}
+
+			destroy_component(label);
 		}
@@ -250,7 +291,10 @@ };
 
-// (17:16) {#if $datesAboveResources}
+// (20:16) {#if $datesAboveResources}
 function create_if_block_4(ctx) {
 	let div;
+	let time;
+	let time_datetime_value;
+	let time_aria_label_value;
+	let setContent_action;
 	let div_class_value;
-	let setContent_action;
 	let mounted;
@@ -262,9 +306,13 @@ let dispose;
 			div = element("div");
-			attr(div, "class", div_class_value = /*$theme*/ ctx[4].day);
+			time = element("time");
+			attr(time, "datetime", time_datetime_value = toISOString(/*item0*/ ctx[17], 10));
+			attr(time, "aria-label", time_aria_label_value = /*$_intlDayHeaderAL*/ ctx[6].format(/*item0*/ ctx[17]));
+			attr(div, "class", div_class_value = "" + (/*$theme*/ ctx[5].day + " " + /*$theme*/ ctx[5].weekdays?.[/*item0*/ ctx[17].getUTCDay()]));
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
+			append(div, time);
 
 			if (!mounted) {
-				dispose = action_destroyer(setContent_action = setContent.call(null, div, /*$_intlDayHeader*/ ctx[5].format(/*item0*/ ctx[13])));
+				dispose = action_destroyer(setContent_action = setContent.call(null, time, /*$_intlDayHeader*/ ctx[7].format(/*item0*/ ctx[17])));
 				mounted = true;
@@ -276,7 +324,15 @@ }
 
-			if (dirty[0] & /*$theme*/ 16 && div_class_value !== (div_class_value = /*$theme*/ ctx[4].day)) {
+			if (dirty[0] & /*loops*/ 8 && time_datetime_value !== (time_datetime_value = toISOString(/*item0*/ ctx[17], 10))) {
+				attr(time, "datetime", time_datetime_value);
+			}
+
+			if (dirty[0] & /*$_intlDayHeaderAL, loops*/ 72 && time_aria_label_value !== (time_aria_label_value = /*$_intlDayHeaderAL*/ ctx[6].format(/*item0*/ ctx[17]))) {
+				attr(time, "aria-label", time_aria_label_value);
+			}
+
+			if (setContent_action && is_function(setContent_action.update) && dirty[0] & /*$_intlDayHeader, loops*/ 136) setContent_action.update.call(null, /*$_intlDayHeader*/ ctx[7].format(/*item0*/ ctx[17]));
+
+			if (dirty[0] & /*$theme, loops*/ 40 && div_class_value !== (div_class_value = "" + (/*$theme*/ ctx[5].day + " " + /*$theme*/ ctx[5].weekdays?.[/*item0*/ ctx[17].getUTCDay()]))) {
 				attr(div, "class", div_class_value);
 			}
-
-			if (setContent_action && is_function(setContent_action.update) && dirty[0] & /*$_intlDayHeader, loops*/ 40) setContent_action.update.call(null, /*$_intlDayHeader*/ ctx[5].format(/*item0*/ ctx[13]));
 		},
@@ -296,3 +352,3 @@ i: noop,
 
-// (22:16) {#if loops[1].length > 1}
+// (33:16) {#if loops[1].length > 1}
 function create_if_block_2(ctx) {
@@ -321,3 +377,3 @@ let div;
 
-			attr(div, "class", div_class_value = /*$theme*/ ctx[4].days);
+			attr(div, "class", div_class_value = /*$theme*/ ctx[5].days);
 		},
@@ -336,3 +392,3 @@ m(target, anchor) {
 		p(ctx, dirty) {
-			if (dirty[0] & /*loops, $datesAboveResources, $theme, $_intlDayHeader*/ 60) {
+			if (dirty[0] & /*$theme, loops, $datesAboveResources, resourceLabels, $_intlDayHeaderAL, $_intlDayHeader*/ 252) {
 				each_value_6 = ensure_array_like(/*loops*/ ctx[3][1]);
@@ -364,3 +420,3 @@ let i;
 
-			if (!current || dirty[0] & /*$theme*/ 16 && div_class_value !== (div_class_value = /*$theme*/ ctx[4].days)) {
+			if (!current || dirty[0] & /*$theme*/ 32 && div_class_value !== (div_class_value = /*$theme*/ ctx[5].days)) {
 				attr(div, "class", div_class_value);
@@ -397,7 +453,11 @@ }
 
-// (27:28) {:else}
+// (40:28) {:else}
 function create_else_block_1(ctx) {
 	let div;
+	let time;
+	let time_datetime_value;
+	let time_aria_label_value;
+	let setContent_action;
+	let t;
 	let div_class_value;
-	let setContent_action;
 	let mounted;
@@ -409,9 +469,16 @@ let dispose;
 			div = element("div");
-			attr(div, "class", div_class_value = /*$theme*/ ctx[4].day);
+			time = element("time");
+			t = space();
+			attr(time, "datetime", time_datetime_value = toISOString(/*item1*/ ctx[20], 10));
+			attr(time, "aria-label", time_aria_label_value = "" + (/*resourceLabels*/ ctx[4][/*i*/ ctx[32]] + /*$_intlDayHeaderAL*/ ctx[6].format(/*item1*/ ctx[20])));
+			attr(div, "class", div_class_value = "" + (/*$theme*/ ctx[5].day + " " + /*$theme*/ ctx[5].weekdays?.[/*item1*/ ctx[20].getUTCDay()]));
+			attr(div, "role", "columnheader");
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
+			append(div, time);
+			append(div, t);
 
 			if (!mounted) {
-				dispose = action_destroyer(setContent_action = setContent.call(null, div, /*$_intlDayHeader*/ ctx[5].format(/*item1*/ ctx[16])));
+				dispose = action_destroyer(setContent_action = setContent.call(null, time, /*$_intlDayHeader*/ ctx[7].format(/*item1*/ ctx[20])));
 				mounted = true;
@@ -423,7 +490,15 @@ }
 
-			if (dirty[0] & /*$theme*/ 16 && div_class_value !== (div_class_value = /*$theme*/ ctx[4].day)) {
+			if (dirty[0] & /*loops*/ 8 && time_datetime_value !== (time_datetime_value = toISOString(/*item1*/ ctx[20], 10))) {
+				attr(time, "datetime", time_datetime_value);
+			}
+
+			if (dirty[0] & /*resourceLabels, $_intlDayHeaderAL, loops*/ 88 && time_aria_label_value !== (time_aria_label_value = "" + (/*resourceLabels*/ ctx[4][/*i*/ ctx[32]] + /*$_intlDayHeaderAL*/ ctx[6].format(/*item1*/ ctx[20])))) {
+				attr(time, "aria-label", time_aria_label_value);
+			}
+
+			if (setContent_action && is_function(setContent_action.update) && dirty[0] & /*$_intlDayHeader, loops*/ 136) setContent_action.update.call(null, /*$_intlDayHeader*/ ctx[7].format(/*item1*/ ctx[20]));
+
+			if (dirty[0] & /*$theme, loops*/ 40 && div_class_value !== (div_class_value = "" + (/*$theme*/ ctx[5].day + " " + /*$theme*/ ctx[5].weekdays?.[/*item1*/ ctx[20].getUTCDay()]))) {
 				attr(div, "class", div_class_value);
 			}
-
-			if (setContent_action && is_function(setContent_action.update) && dirty[0] & /*$_intlDayHeader, loops*/ 40) setContent_action.update.call(null, /*$_intlDayHeader*/ ctx[5].format(/*item1*/ ctx[16]));
 		},
@@ -443,5 +518,8 @@ i: noop,
 
-// (25:28) {#if $datesAboveResources}
+// (36:28) {#if $datesAboveResources}
 function create_if_block_3(ctx) {
+	let div;
 	let label;
+	let t;
+	let div_class_value;
 	let current;
@@ -451,4 +529,4 @@
 			props: {
-				resource: /*item1*/ ctx[16],
-				date: /*item0*/ ctx[13]
+				resource: /*item1*/ ctx[20],
+				date: /*item0*/ ctx[17]
 			}
@@ -459,6 +537,12 @@ });
 		c() {
+			div = element("div");
 			create_component(label.$$.fragment);
+			t = space();
+			attr(div, "class", div_class_value = /*$theme*/ ctx[5].day);
+			attr(div, "role", "columnheader");
 		},
 		m(target, anchor) {
-			mount_component(label, target, anchor);
+			insert(target, div, anchor);
+			mount_component(label, div, null);
+			append(div, t);
 			current = true;
@@ -468,5 +552,9 @@ },
 			const label_changes = {};
-			if (dirty[0] & /*loops*/ 8) label_changes.resource = /*item1*/ ctx[16];
-			if (dirty[0] & /*loops*/ 8) label_changes.date = /*item0*/ ctx[13];
+			if (dirty[0] & /*loops*/ 8) label_changes.resource = /*item1*/ ctx[20];
+			if (dirty[0] & /*loops*/ 8) label_changes.date = /*item0*/ ctx[17];
 			label.$set(label_changes);
+
+			if (!current || dirty[0] & /*$theme*/ 32 && div_class_value !== (div_class_value = /*$theme*/ ctx[5].day)) {
+				attr(div, "class", div_class_value);
+			}
 		},
@@ -483,3 +571,7 @@ i(local) {
 		d(detaching) {
-			destroy_component(label, detaching);
+			if (detaching) {
+				detach(div);
+			}
+
+			destroy_component(label);
 		}
@@ -489,3 +581,3 @@ };
 
-// (24:24) {#each loops[1] as item1}
+// (35:24) {#each loops[1] as item1}
 function create_each_block_6(ctx) {
@@ -563,3 +655,3 @@ let current_block_type_index;
 
-// (15:8) {#each loops[0] as item0}
+// (18:8) {#each loops[0] as item0, i}
 function create_each_block_5(ctx) {
@@ -592,3 +684,3 @@ let div;
 			t1 = space();
-			attr(div, "class", div_class_value = /*$theme*/ ctx[4].resource);
+			attr(div, "class", div_class_value = /*$theme*/ ctx[5].resource);
 		},
@@ -653,3 +745,3 @@ m(target, anchor) {
 
-			if (!current || dirty[0] & /*$theme*/ 16 && div_class_value !== (div_class_value = /*$theme*/ ctx[4].resource)) {
+			if (!current || dirty[0] & /*$theme*/ 32 && div_class_value !== (div_class_value = /*$theme*/ ctx[5].resource)) {
 				attr(div, "class", div_class_value);
@@ -680,3 +772,3 @@ }
 
-// (14:4) <Section>
+// (17:4) <Section>
 function create_default_slot_2(ctx) {
@@ -715,3 +807,3 @@ let each_1_anchor;
 		p(ctx, dirty) {
-			if (dirty[0] & /*$theme, loops, $datesAboveResources, $_intlDayHeader*/ 60) {
+			if (dirty[0] & /*$theme, loops, $datesAboveResources, resourceLabels, $_intlDayHeaderAL, $_intlDayHeader*/ 252) {
 				each_value_5 = ensure_array_like(/*loops*/ ctx[3][0]);
@@ -771,3 +863,3 @@ let i;
 
-// (38:0) {#if $allDaySlot}
+// (57:0) {#if $allDaySlot}
 function create_if_block(ctx) {
@@ -798,5 +890,5 @@ let div2;
 			div0 = element("div");
-			attr(div0, "class", div0_class_value = /*$theme*/ ctx[4].hiddenScroll);
-			attr(div1, "class", div1_class_value = /*$theme*/ ctx[4].content);
-			attr(div2, "class", div2_class_value = /*$theme*/ ctx[4].allDay);
+			attr(div0, "class", div0_class_value = /*$theme*/ ctx[5].hiddenScroll);
+			attr(div1, "class", div1_class_value = /*$theme*/ ctx[5].content);
+			attr(div2, "class", div2_class_value = /*$theme*/ ctx[5].allDay);
 		},
@@ -814,3 +906,3 @@ m(target, anchor) {
 
-			if (dirty[0] & /*$_viewDates, $theme, $_viewResources, $datesAboveResources*/ 23 | dirty[1] & /*$$scope*/ 1) {
+			if (dirty[0] & /*$_viewDates, $theme, $_viewResources, $datesAboveResources*/ 39 | dirty[1] & /*$$scope*/ 16) {
 				section_changes.$$scope = { dirty, ctx };
@@ -821,11 +913,11 @@ }
 
-			if (!current || dirty[0] & /*$theme*/ 16 && div0_class_value !== (div0_class_value = /*$theme*/ ctx[4].hiddenScroll)) {
+			if (!current || dirty[0] & /*$theme*/ 32 && div0_class_value !== (div0_class_value = /*$theme*/ ctx[5].hiddenScroll)) {
 				attr(div0, "class", div0_class_value);
 			}
 
-			if (!current || dirty[0] & /*$theme*/ 16 && div1_class_value !== (div1_class_value = /*$theme*/ ctx[4].content)) {
+			if (!current || dirty[0] & /*$theme*/ 32 && div1_class_value !== (div1_class_value = /*$theme*/ ctx[5].content)) {
 				attr(div1, "class", div1_class_value);
 			}
 
-			if (!current || dirty[0] & /*$theme*/ 16 && div2_class_value !== (div2_class_value = /*$theme*/ ctx[4].allDay)) {
+			if (!current || dirty[0] & /*$theme*/ 32 && div2_class_value !== (div2_class_value = /*$theme*/ ctx[5].allDay)) {
 				attr(div2, "class", div2_class_value);
@@ -853,3 +945,3 @@ }
 
-// (50:16) {:else}
+// (69:16) {:else}
 function create_else_block(ctx) {
@@ -888,3 +980,3 @@ let each_1_anchor;
 		p(ctx, dirty) {
-			if (dirty[0] & /*$theme, $_viewDates, $_viewResources*/ 19) {
+			if (dirty[0] & /*$theme, $_viewDates, $_viewResources*/ 35) {
 				each_value_4 = ensure_array_like(/*$_viewResources*/ ctx[1]);
@@ -944,3 +1036,3 @@ let i;
 
-// (42:16) {#if $datesAboveResources}
+// (61:16) {#if $datesAboveResources}
 function create_if_block_1(ctx) {
@@ -979,3 +1071,3 @@ let each_1_anchor;
 		p(ctx, dirty) {
-			if (dirty[0] & /*$theme, $_viewResources, $_viewDates*/ 19) {
+			if (dirty[0] & /*$theme, $_viewResources, $_viewDates*/ 35) {
 				each_value_2 = ensure_array_like(/*$_viewDates*/ ctx[0]);
@@ -1035,3 +1127,3 @@ let i;
 
-// (51:20) {#each $_viewResources as resource}
+// (70:20) {#each $_viewResources as resource}
 function create_each_block_4(ctx) {
@@ -1047,3 +1139,3 @@ let div;
 				dates: /*$_viewDates*/ ctx[0],
-				resource: /*resource*/ ctx[22]
+				resource: /*resource*/ ctx[26]
 			}
@@ -1057,3 +1149,3 @@ });
 			t = space();
-			attr(div, "class", div_class_value = /*$theme*/ ctx[4].resource);
+			attr(div, "class", div_class_value = /*$theme*/ ctx[5].resource);
 		},
@@ -1069,6 +1161,6 @@ m(target, anchor) {
 			if (dirty[0] & /*$_viewDates*/ 1) week_changes.dates = /*$_viewDates*/ ctx[0];
-			if (dirty[0] & /*$_viewResources*/ 2) week_changes.resource = /*resource*/ ctx[22];
+			if (dirty[0] & /*$_viewResources*/ 2) week_changes.resource = /*resource*/ ctx[26];
 			week.$set(week_changes);
 
-			if (!current || dirty[0] & /*$theme*/ 16 && div_class_value !== (div_class_value = /*$theme*/ ctx[4].resource)) {
+			if (!current || dirty[0] & /*$theme*/ 32 && div_class_value !== (div_class_value = /*$theme*/ ctx[5].resource)) {
 				attr(div, "class", div_class_value);
@@ -1096,3 +1188,3 @@ }
 
-// (45:28) {#each $_viewResources as resource}
+// (64:28) {#each $_viewResources as resource}
 function create_each_block_3(ctx) {
@@ -1104,4 +1196,4 @@ let week;
 			props: {
-				dates: [/*date*/ ctx[19]],
-				resource: /*resource*/ ctx[22]
+				dates: [/*date*/ ctx[23]],
+				resource: /*resource*/ ctx[26]
 			}
@@ -1120,4 +1212,4 @@ });
 			const week_changes = {};
-			if (dirty[0] & /*$_viewDates*/ 1) week_changes.dates = [/*date*/ ctx[19]];
-			if (dirty[0] & /*$_viewResources*/ 2) week_changes.resource = /*resource*/ ctx[22];
+			if (dirty[0] & /*$_viewDates*/ 1) week_changes.dates = [/*date*/ ctx[23]];
+			if (dirty[0] & /*$_viewResources*/ 2) week_changes.resource = /*resource*/ ctx[26];
 			week.$set(week_changes);
@@ -1140,3 +1232,3 @@ },
 
-// (43:20) {#each $_viewDates as date}
+// (62:20) {#each $_viewDates as date}
 function create_each_block_2(ctx) {
@@ -1167,3 +1259,3 @@ let div;
 			t = space();
-			attr(div, "class", div_class_value = /*$theme*/ ctx[4].resource);
+			attr(div, "class", div_class_value = /*$theme*/ ctx[5].resource);
 		},
@@ -1210,3 +1302,3 @@ m(target, anchor) {
 
-			if (!current || dirty[0] & /*$theme*/ 16 && div_class_value !== (div_class_value = /*$theme*/ ctx[4].resource)) {
+			if (!current || dirty[0] & /*$theme*/ 32 && div_class_value !== (div_class_value = /*$theme*/ ctx[5].resource)) {
 				attr(div, "class", div_class_value);
@@ -1243,3 +1335,3 @@ }
 
-// (41:12) <Section>
+// (60:12) <Section>
 function create_default_slot_1(ctx) {
@@ -1317,3 +1409,3 @@ let current_block_type_index;
 
-// (65:8) {#each loops[1] as item1}
+// (84:8) {#each loops[1] as item1}
 function create_each_block_1(ctx) {
@@ -1326,7 +1418,7 @@ let day;
 				date: /*$datesAboveResources*/ ctx[2]
-				? /*item0*/ ctx[13]
-				: /*item1*/ ctx[16],
+				? /*item0*/ ctx[17]
+				: /*item1*/ ctx[20],
 				resource: /*$datesAboveResources*/ ctx[2]
-				? /*item1*/ ctx[16]
-				: /*item0*/ ctx[13]
+				? /*item1*/ ctx[20]
+				: /*item0*/ ctx[17]
 			}
@@ -1347,8 +1439,8 @@ });
 			if (dirty[0] & /*$datesAboveResources, loops*/ 12) day_changes.date = /*$datesAboveResources*/ ctx[2]
-			? /*item0*/ ctx[13]
-			: /*item1*/ ctx[16];
+			? /*item0*/ ctx[17]
+			: /*item1*/ ctx[20];
 
 			if (dirty[0] & /*$datesAboveResources, loops*/ 12) day_changes.resource = /*$datesAboveResources*/ ctx[2]
-			? /*item1*/ ctx[16]
-			: /*item0*/ ctx[13];
+			? /*item1*/ ctx[20]
+			: /*item0*/ ctx[17];
 
@@ -1372,3 +1464,3 @@ day.$set(day_changes);
 
-// (63:0) {#each loops[0] as item0}
+// (82:0) {#each loops[0] as item0}
 function create_each_block(ctx) {
@@ -1399,3 +1491,3 @@ let div;
 			t = space();
-			attr(div, "class", div_class_value = /*$theme*/ ctx[4].resource);
+			attr(div, "class", div_class_value = /*$theme*/ ctx[5].resource);
 		},
@@ -1442,3 +1534,3 @@ m(target, anchor) {
 
-			if (!current || dirty[0] & /*$theme*/ 16 && div_class_value !== (div_class_value = /*$theme*/ ctx[4].resource)) {
+			if (!current || dirty[0] & /*$theme*/ 32 && div_class_value !== (div_class_value = /*$theme*/ ctx[5].resource)) {
 				attr(div, "class", div_class_value);
@@ -1475,3 +1567,3 @@ }
 
-// (62:0) <Body>
+// (81:0) <Body>
 function create_default_slot(ctx) {
@@ -1510,3 +1602,3 @@ let each_1_anchor;
 		p(ctx, dirty) {
-			if (dirty[0] & /*$theme, loops, $datesAboveResources*/ 28) {
+			if (dirty[0] & /*$theme, loops, $datesAboveResources*/ 44) {
 				each_value = ensure_array_like(/*loops*/ ctx[3][0]);
@@ -1585,3 +1677,3 @@ let i;
 
-	let if_block = /*$allDaySlot*/ ctx[6] && create_if_block(ctx);
+	let if_block = /*$allDaySlot*/ ctx[8] && create_if_block(ctx);
 
@@ -1605,4 +1697,4 @@ body = new Body({
 			create_component(body.$$.fragment);
-			attr(div0, "class", div0_class_value = /*$theme*/ ctx[4].hiddenScroll);
-			attr(div1, "class", div1_class_value = /*$theme*/ ctx[4].header);
+			attr(div0, "class", div0_class_value = /*$theme*/ ctx[5].hiddenScroll);
+			attr(div1, "class", div1_class_value = /*$theme*/ ctx[5].header);
 		},
@@ -1623,3 +1715,3 @@ m(target, anchor) {
 
-			if (dirty[0] & /*loops, $theme, $datesAboveResources, $_intlDayHeader*/ 60 | dirty[1] & /*$$scope*/ 1) {
+			if (dirty[0] & /*loops, $theme, $datesAboveResources, resourceLabels, $_intlDayHeaderAL, $_intlDayHeader*/ 252 | dirty[1] & /*$$scope*/ 16) {
 				section_changes.$$scope = { dirty, ctx };
@@ -1630,15 +1722,15 @@ }
 
-			if (!current || dirty[0] & /*$theme*/ 16 && div0_class_value !== (div0_class_value = /*$theme*/ ctx[4].hiddenScroll)) {
+			if (!current || dirty[0] & /*$theme*/ 32 && div0_class_value !== (div0_class_value = /*$theme*/ ctx[5].hiddenScroll)) {
 				attr(div0, "class", div0_class_value);
 			}
 
-			if (!current || dirty[0] & /*$theme*/ 16 && div1_class_value !== (div1_class_value = /*$theme*/ ctx[4].header)) {
+			if (!current || dirty[0] & /*$theme*/ 32 && div1_class_value !== (div1_class_value = /*$theme*/ ctx[5].header)) {
 				attr(div1, "class", div1_class_value);
 			}
 
-			if (/*$allDaySlot*/ ctx[6]) {
+			if (/*$allDaySlot*/ ctx[8]) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 
-					if (dirty[0] & /*$allDaySlot*/ 64) {
+					if (dirty[0] & /*$allDaySlot*/ 256) {
 						transition_in(if_block, 1);
@@ -1664,3 +1756,3 @@ }
 
-			if (dirty[0] & /*loops, $theme, $datesAboveResources*/ 28 | dirty[1] & /*$$scope*/ 1) {
+			if (dirty[0] & /*loops, $theme, $datesAboveResources*/ 44 | dirty[1] & /*$$scope*/ 16) {
 				body_changes.$$scope = { dirty, ctx };
@@ -1703,12 +1795,16 @@ }
 	let $theme;
+	let $_intlDayHeaderAL;
 	let $_intlDayHeader;
 	let $allDaySlot;
-	let { datesAboveResources, _viewDates, _viewResources, _intlDayHeader, allDaySlot, theme } = getContext('state');
+	let { datesAboveResources, _viewDates, _viewResources, _intlDayHeader, _intlDayHeaderAL, allDaySlot, theme } = getContext('state');
 	component_subscribe($$self, datesAboveResources, value => $$invalidate(2, $datesAboveResources = value));
 	component_subscribe($$self, _viewDates, value => $$invalidate(0, $_viewDates = value));
 	component_subscribe($$self, _viewResources, value => $$invalidate(1, $_viewResources = value));
-	component_subscribe($$self, _intlDayHeader, value => $$invalidate(5, $_intlDayHeader = value));
-	component_subscribe($$self, allDaySlot, value => $$invalidate(6, $allDaySlot = value));
-	component_subscribe($$self, theme, value => $$invalidate(4, $theme = value));
+	component_subscribe($$self, _intlDayHeader, value => $$invalidate(7, $_intlDayHeader = value));
+	component_subscribe($$self, _intlDayHeaderAL, value => $$invalidate(6, $_intlDayHeaderAL = value));
+	component_subscribe($$self, allDaySlot, value => $$invalidate(8, $allDaySlot = value));
+	component_subscribe($$self, theme, value => $$invalidate(5, $theme = value));
 	let loops;
+	let resourceLabels = [];
+	const text_handler = (i, e) => $$invalidate(4, resourceLabels[i] = e.detail + ', ', resourceLabels);
 
@@ -1728,3 +1824,5 @@ $$self.$$.update = () => {
 		loops,
+		resourceLabels,
 		$theme,
+		$_intlDayHeaderAL,
 		$_intlDayHeader,
@@ -1736,4 +1834,6 @@ $allDaySlot,
 		_intlDayHeader,
+		_intlDayHeaderAL,
 		allDaySlot,
-		theme
+		theme,
+		text_handler
 	];
@@ -1749,3 +1849,3 @@ }
 
-/* packages/resource-time-grid/src/Auxiliary.svelte generated by Svelte v4.2.2 */
+/* packages/resource-time-grid/src/Auxiliary.svelte generated by Svelte v4.2.8 */
 
@@ -1829,12 +1929,2 @@ function instance($$self, $$props, $$invalidate) {
 
-function createResources(input) {
-	return input.map(resource => ({
-		id: String(resource.id),
-		title: resource.title || '',
-		titleHTML: resource.titleHTML || '',
-		eventBackgroundColor: resource.eventBackgroundColor,
-        eventTextColor: resource.eventTextColor
-	}));
-}
-
 export { index as default };

package.json

 {
   "name": "@event-calendar/resource-time-grid",
-  "version": "2.4.1",
+  "version": "2.5.0",
   "title": "Event Calendar ResourceTimeGrid plugin",
@@ -29,6 +29,6 @@ "description": "Full-sized drag & drop event calendar with resource view",
   "dependencies": {
-    "@event-calendar/core": "~2.4.1",
-    "@event-calendar/time-grid": "~2.4.1",
-    "svelte": "^4.1.1"
+    "@event-calendar/core": "~2.5.0",
+    "@event-calendar/time-grid": "~2.5.0",
+    "svelte": "^4.2.8"
   }
 }

README.md

@@ -200,4 +200,4 @@ # Event Calendar [![](https://data.jsdelivr.com/v1/package/npm/@event-calendar/build/badge)](https://www.jsdelivr.com/package/npm/@event-calendar/build) [![npm](https://img.shields.io/npm/dm/@event-calendar/core?color=red&label=npm&style=flat-square)](https://www.npmjs.com/package/@event-calendar/core)
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@2.4.1/event-calendar.min.css">
-<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@2.4.1/event-calendar.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@2.5.0/event-calendar.min.css">
+<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@2.5.0/event-calendar.min.js"></script>
 ```
@@ -482,2 +482,27 @@
 
+### dayHeaderAriaLabelFormat
+- Type `object` or `function`
+- Default `{dateStyle: 'long'}`
+> Views override the default value as follows:
+> - dayGridMonth `{weekday: 'long'}`
+
+Defines the text that is used inside the `aria-label` attribute in calendar column headings.
+
+This value can be either an object with options for the native JavaScript [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat) object, or a callback function that returns formatted string:
+
+```js
+function (date) {
+    // return formatted date string
+}
+```
+<table>
+<tr>
+<td>
+
+`date`
+</td>
+<td>JavaScript Date object that needs to be formatted</td>
+</tr>
+</table>
+
 ### dayHeaderFormat
@@ -2227,9 +2252,2 @@ - Type `object` or `function`
 
-<details>
-  <summary>Note</summary>
-
-> In the `'listDay'`, `'listWeek'`, `'listMonth'` and `'listYear'` views, the events are rendered outside the day container, so the method will return `null` for the coordinates that are inside the events.
-
-</details>
-
 ### destroy()
@@ -2306,3 +2324,3 @@ - Return value `undefined`
 
-The text appearing on the event. See [Content](#content)</td>
+`Content` The text appearing on the event. See [Content](#content)</td>
 </tr>
@@ -2597,10 +2615,6 @@ <tr>
 </td>
-<td>The title of the resource</td>
-</tr>
-<tr>
 <td>
 
-`titleHTML`
+The title of the resource. See [Content](#content).
 </td>
-<td>The HTML version of the title</td>
 </tr>
@@ -2645,3 +2659,3 @@ <tr>
 
-`string` Text that will be displayed on the resource when it is rendered. Default `''`
+`Content` Text that will be displayed on the resource when it is rendered. See [Content](#content). Default `''`
 </td>
@@ -2652,12 +2666,2 @@ </tr>
 
-`titleHTML`
-</td>
-<td>
-
-`string` The HTML version of the title to be displayed instead of the text version. Default `''`
-</td>
-</tr>
-<tr>
-<td>
-
 `eventBackgroundColor`
@@ -2664,0 +2668,0 @@ </td>

src/index.js

 import {btnTextDay, btnTextWeek, themeView} from '@event-calendar/core';
 import TimeGrid from '@event-calendar/time-grid';
 import {viewResources} from './stores.js';
+import {createResources} from './lib.js';
 import View from './View.svelte';
@@ -46,11 +47,1 @@ import Auxiliary from './Auxiliary.svelte';
 }
-
-function createResources(input) {
-	return input.map(resource => ({
-		id: String(resource.id),
-		title: resource.title || '',
-		titleHTML: resource.titleHTML || '',
-		eventBackgroundColor: resource.eventBackgroundColor,
-        eventTextColor: resource.eventTextColor
-	}));
-}

src/stores.js

 import {derived} from 'svelte/store';
+import {createResources} from './lib.js';
 
@@ -26,3 +27,3 @@ export function viewResources(state) {
             if (!result.length) {
-                result = state.resources.parse([{}]);
+                result = createResources([{}]);
             }
@@ -29,0 +30,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

118267

increased by4.86%

Number of package files

9

increased by12.5%

Lines of code

1673

increased by5.09%

Number of lines in readme file

2749

increased by0.15%

Dependency changes

• + Added@event-calendar/core@2.5.1(transitive)

• + Added@event-calendar/time-grid@2.5.1(transitive)

• - Removed@event-calendar/core@2.4.1(transitive)

• - Removed@event-calendar/time-grid@2.4.1(transitive)

• Updated@event-calendar/core@~2.5.0

• Updated@event-calendar/time-grid@~2.5.0

• Updatedsvelte@^4.2.8