@k2b/ui 0.8.0 → 0.9.0

package/dist/browser/content/Calendar.js

@@ -225,6 +225,7 @@ const timedEventLayouts = events => {
   }));
 };
 const EventChip = props => {
+  const messages = useUiMessages();
   const dateConfig = createMemo(() => ownerDateConfig(props.owner));
   const color = () => props.event.color ?? "blue";
   const selected = () => Boolean(props.owner.selectedEventId) && props.owner.selectedEventId === props.event.id;
@@ -238,6 +239,11 @@ const EventChip = props => {
   const showLocation = () => Boolean(props.event.location && !props.compact && durationHours() >= 1.25);
   const showDescription = () => Boolean(props.event.description?.trim() && props.fill && !props.event.allDay && !props.compact && durationHours() >= 1.5);
   const timeLabel = () => `${formatTime(props.event.startDate, dateConfig())} - ${formatTime(props.event.endDate, dateConfig())}`;
+  const ariaLabel = () => props.event.allDay ? props.event.title : messages().calendarEventTime({
+    title: props.event.title,
+    start: formatTime(props.event.startDate, dateConfig()),
+    end: formatTime(props.event.endDate, dateConfig())
+  });
   const renderedEvent = () => props.owner.renderEvent?.(props.event, {
     compact: props.compact ?? false,
     fill: props.fill ?? false,
@@ -331,7 +337,7 @@ const EventChip = props => {
         _v$0 = props.event.dataSpaceItemId,
         _v$1 = style(),
         _v$10 = props.onMovePointerDown ? false : undefined,
-        _v$11 = `${props.event.title}${props.event.allDay ? "" : `, ${formatTime(props.event.startDate, dateConfig())} to ${formatTime(props.event.endDate, dateConfig())}`}`;
+        _v$11 = ariaLabel();
       _v$ !== _p$.e && _$setAttribute(_el$5, "href", _p$.e = _v$);
       _v$2 !== _p$.t && _$setAttribute(_el$5, "data-color", _p$.t = _v$2);
       _v$3 !== _p$.a && _$setAttribute(_el$5, "data-selected", _p$.a = _v$3);
@@ -379,7 +385,7 @@ const EventChip = props => {
         _v$17 = props.moving ? "true" : undefined,
         _v$18 = props.event.display,
         _v$19 = style(),
-        _v$20 = `${props.event.title}${props.event.allDay ? "" : `, ${formatTime(props.event.startDate, dateConfig())} to ${formatTime(props.event.endDate, dateConfig())}`}`;
+        _v$20 = ariaLabel();
       _v$12 !== _p$.e && _$setAttribute(_el$6, "data-color", _p$.e = _v$12);
       _v$13 !== _p$.t && _$setAttribute(_el$6, "data-selected", _p$.t = _v$13);
       _v$14 !== _p$.a && _$setAttribute(_el$6, "data-compact", _p$.a = _v$14);
@@ -416,7 +422,7 @@ const EventChip = props => {
         _v$26 = props.moving ? "true" : undefined,
         _v$27 = props.event.display,
         _v$28 = style(),
-        _v$29 = `${props.event.title}${props.event.allDay ? "" : `, ${formatTime(props.event.startDate, dateConfig())} to ${formatTime(props.event.endDate, dateConfig())}`}`;
+        _v$29 = ariaLabel();
       _v$21 !== _p$.e && _$setAttribute(_el$7, "data-color", _p$.e = _v$21);
       _v$22 !== _p$.t && _$setAttribute(_el$7, "data-selected", _p$.t = _v$22);
       _v$23 !== _p$.a && _$setAttribute(_el$7, "data-compact", _p$.a = _v$23);
@@ -1103,7 +1109,7 @@ const MonthView = props => {
       })()
     }), _el$39, _co$9);
     _$effect(_p$ => {
-      var _v$30 = `auto repeat(${weeks().length}, minmax(5rem, 1fr))`,
+      var _v$30 = `auto repeat(${weeks().length}, ${props.compact ? "minmax(2.75rem, auto)" : "minmax(5rem, 1fr)"})`,
         _v$31 = props.owner.withWeekNumbers ? "true" : undefined;
       _v$30 !== _p$.e && _$setStyleProperty(_el$31, "grid-template-rows", _p$.e = _v$30);
       _v$31 !== _p$.t && _$setAttribute(_el$32, "data-week-numbers", _p$.t = _v$31);
@@ -1936,7 +1942,8 @@ const MobileMonthView = props => {
       },
       get labels() {
         return props.labels;
-      }
+      },
+      compact: true
     }), _el$164, _co$42);
     _$insert(_el$159, () => props.selectedDate.toLocaleDateString(dateConfig().locale ?? "en", {
       weekday: "long",