@k2b/ui 0.8.0 → 0.9.0

package/dist/ssr/content/Calendar.js

@@ -10,9 +10,9 @@ import { escape as _$escape } from "solid-js/web";
 var _tmpl$ = ["<span class=\"k2b-calendar-event__title\">", "</span>"],
   _tmpl$2 = ["<span class=\"k2b-calendar-event__meta\">", "</span>"],
   _tmpl$3 = ["<span class=\"k2b-calendar-event__description\">", "</span>"],
-  _tmpl$4 = ["<a", " class=\"k2b-calendar-event\" data-calendar-event", " style=\"", "\"", " aria-label=\"", "\">", "</a>"],
-  _tmpl$5 = ["<button type=\"button\" class=\"k2b-calendar-event\" data-calendar-event", " data-interactive=\"true\"", " style=\"", "\" aria-label=\"", "\">", "</button>"],
-  _tmpl$6 = ["<div class=\"k2b-calendar-event\" role=\"group\" data-calendar-event", " style=\"", "\" aria-label=\"", "\">", "</div>"],
+  _tmpl$4 = ["<a", " class=\"k2b-calendar-event\" data-calendar-event", " style=\"", "\"", ">", "</a>"],
+  _tmpl$5 = ["<button type=\"button\" class=\"k2b-calendar-event\" data-calendar-event", " data-interactive=\"true\"", " style=\"", "\"", ">", "</button>"],
+  _tmpl$6 = ["<div class=\"k2b-calendar-event\" role=\"group\" data-calendar-event", " style=\"", "\"", ">", "</div>"],
   _tmpl$7 = ["<div role=\"radiogroup\"", " aria-orientation=\"horizontal\" class=\"k2b-segmented-control k2b-calendar-view-switcher\">", "</div>"],
   _tmpl$8 = ["<i class=\"", "\"></i>"],
   _tmpl$9 = ["<button type=\"button\"", " class=\"k2b-calendar-header__nav-button\"><i class=\"", "\"></i></button>"],
@@ -214,6 +214,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;
@@ -227,6 +228,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,
@@ -290,7 +296,7 @@ const EventChip = props => {
       suppressClickUntil = performance.now() + 400;
     });
   };
-  return props.href ? _$ssr(_tmpl$4, _$ssrAttribute("href", _$escape(props.href, true), false), _$ssrAttribute("data-color", props.event.colorHex ? _$escape(undefined, true) : _$escape(color(), true), false) + _$ssrAttribute("data-selected", selected() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-compact", props.compact ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-fill", props.fill ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-short", short() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-moving", props.moving ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-interactive", isInteractive() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-display", _$escape(props.event.display, true), false) + _$ssrAttribute("data-space-item-id", _$escape(props.event.dataSpaceItemId, true), false), _$ssrStyle(style()), _$ssrAttribute("draggable", props.onMovePointerDown ? _$escape(false, true) : _$escape(undefined, true), false), `${_$escape(props.event.title, true)}${props.event.allDay ? "" : `, ${_$escape(formatTime(props.event.startDate, dateConfig()), true)} to ${_$escape(formatTime(props.event.endDate, dateConfig()), true)}`}`, _$escape(content())) : isActionable() ? _$ssr(_tmpl$5, _$ssrAttribute("data-color", props.event.colorHex ? _$escape(undefined, true) : _$escape(color(), true), false) + _$ssrAttribute("data-selected", selected() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-compact", props.compact ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-fill", props.fill ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-short", short() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-moving", props.moving ? "true" : _$escape(undefined, true), false), _$ssrAttribute("data-display", _$escape(props.event.display, true), false), _$ssrStyle(style()), `${_$escape(props.event.title, true)}${props.event.allDay ? "" : `, ${_$escape(formatTime(props.event.startDate, dateConfig()), true)} to ${_$escape(formatTime(props.event.endDate, dateConfig()), true)}`}`, _$escape(content())) : _$ssr(_tmpl$6, _$ssrAttribute("data-color", props.event.colorHex ? _$escape(undefined, true) : _$escape(color(), true), false) + _$ssrAttribute("data-selected", selected() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-compact", props.compact ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-fill", props.fill ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-short", short() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-moving", props.moving ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-interactive", _$escape(undefined, true), false) + _$ssrAttribute("data-display", _$escape(props.event.display, true), false), _$ssrStyle(style()), `${_$escape(props.event.title, true)}${props.event.allDay ? "" : `, ${_$escape(formatTime(props.event.startDate, dateConfig()), true)} to ${_$escape(formatTime(props.event.endDate, dateConfig()), true)}`}`, _$escape(content()));
+  return props.href ? _$ssr(_tmpl$4, _$ssrAttribute("href", _$escape(props.href, true), false), _$ssrAttribute("data-color", props.event.colorHex ? _$escape(undefined, true) : _$escape(color(), true), false) + _$ssrAttribute("data-selected", selected() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-compact", props.compact ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-fill", props.fill ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-short", short() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-moving", props.moving ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-interactive", isInteractive() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-display", _$escape(props.event.display, true), false) + _$ssrAttribute("data-space-item-id", _$escape(props.event.dataSpaceItemId, true), false), _$ssrStyle(style()), _$ssrAttribute("draggable", props.onMovePointerDown ? _$escape(false, true) : _$escape(undefined, true), false) + _$ssrAttribute("aria-label", _$escape(ariaLabel(), true), false), _$escape(content())) : isActionable() ? _$ssr(_tmpl$5, _$ssrAttribute("data-color", props.event.colorHex ? _$escape(undefined, true) : _$escape(color(), true), false) + _$ssrAttribute("data-selected", selected() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-compact", props.compact ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-fill", props.fill ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-short", short() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-moving", props.moving ? "true" : _$escape(undefined, true), false), _$ssrAttribute("data-display", _$escape(props.event.display, true), false), _$ssrStyle(style()), _$ssrAttribute("aria-label", _$escape(ariaLabel(), true), false), _$escape(content())) : _$ssr(_tmpl$6, _$ssrAttribute("data-color", props.event.colorHex ? _$escape(undefined, true) : _$escape(color(), true), false) + _$ssrAttribute("data-selected", selected() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-compact", props.compact ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-fill", props.fill ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-short", short() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-moving", props.moving ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-interactive", _$escape(undefined, true), false) + _$ssrAttribute("data-display", _$escape(props.event.display, true), false), _$ssrStyle(style()), _$ssrAttribute("aria-label", _$escape(ariaLabel(), true), false), _$escape(content()));
 };
 const slotInteractionProps = (owner, slot, suppressed, nativeControl = false) => {
   const isSlotChild = event => {
@@ -613,7 +619,7 @@ const MonthView = props => {
     });
   };
   onCleanup(() => cancelInteraction?.());
-  return _$ssr(_tmpl$12, _$ssrStyleProperty("grid-template-rows:", `auto repeat(${_$escape(weeks().length, true)}, minmax(5rem, 1fr))`), _$ssrAttribute("data-week-numbers", props.owner.withWeekNumbers ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
+  return _$ssr(_tmpl$12, _$ssrStyleProperty("grid-template-rows:", `auto repeat(${_$escape(weeks().length, true)}, ${props.compact ? "minmax(2.75rem, auto)" : "minmax(5rem, 1fr)"})`), _$ssrAttribute("data-week-numbers", props.owner.withWeekNumbers ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
     get when() {
       return props.owner.withWeekNumbers;
     },
@@ -1348,7 +1354,8 @@ const MobileMonthView = props => {
     },
     get labels() {
       return props.labels;
-    }
+    },
+    compact: true
   })), _$escape(props.selectedDate.toLocaleDateString(dateConfig().locale ?? "en", {
     weekday: "long",
     month: "long",