@k2b/ui 0.46.0 → 0.48.0

package/dist/browser/content/calendar-time-view.js

@@ -11,7 +11,7 @@ import { effect as _$effect } from "solid-js/web";
 import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
 import { insert as _$insert } from "solid-js/web";
 import { getNextElement as _$getNextElement } from "solid-js/web";
-var _tmpl$ = /*#__PURE__*/_$template(`<svg viewBox="0 0 16 16"aria-hidden=true><rect x=1.75 y=1.75 width=12.5 height=12.5 rx=3.5></rect><path d="M4.6 8.3l2.3 2.3 4.6-4.9">`),
+var _tmpl$ = /*#__PURE__*/_$template(`<svg viewBox="0 0 16 16"aria-hidden=true><circle cx=8 cy=8 r=5.75></circle><path d="M5.4 8.2l1.8 1.8 3.5-3.8">`),
   _tmpl$2 = /*#__PURE__*/_$template(`<button type=button class=k2b-calendar-check role=checkbox>`),
   _tmpl$3 = /*#__PURE__*/_$template(`<span class=k2b-calendar-check aria-hidden=true>`),
   _tmpl$4 = /*#__PURE__*/_$template(`<span class=k2b-calendar-band__fill aria-hidden=true>`),
@@ -822,9 +822,9 @@ export const longDay = (view, key) => view.parseKey(key).toLocaleDateString(view
   } : {}),
   timeZone: view.dateConfig().timeZone
 });
-const CHECK_PATH = "M4.6 8.3l2.3 2.3 4.6-4.9";
+const CHECK_PATH = "M5.4 8.2l1.8 1.8 3.5-3.8";
 
-/** A to-do's checkbox: it draws its check, and the title beside it strikes through. */
+/** A to-do's check: a small ring in the entry's color before its title that fills when done; the title strikes through. */
 export const TimeCheck = props => {
   const checked = () => props.view.checkedOf(props.event) ?? false;
   const box = (() => {
@@ -948,6 +948,8 @@ export const TimeBand = props => {
       },
       fill: true,
       timeline: true,
+      faces: 3,
+      linkCount: true,
       get compact() {
         return props.compact;
       },
@@ -1008,35 +1010,37 @@ export const TimeBand = props => {
         _v$8 = past() ? "true" : undefined,
         _v$9 = running() ? "true" : undefined,
         _v$0 = checked() ? "true" : undefined,
-        _v$1 = checked() !== undefined ? "true" : undefined,
-        _v$10 = view.justChecked().has(event().id) ? "true" : undefined,
-        _v$11 = props.band.end > limit() ? "true" : undefined,
-        _v$12 = view.movingId() === event().id ? "true" : undefined,
-        _v$13 = event().display,
-        _v$14 = eventAccent(event()),
-        _v$15 = String(props.band.lane),
-        _v$16 = String(props.band.lanes),
-        _v$17 = String(lines()),
-        _v$18 = running() ? `${((now() - props.band.start) / length() * 100).toFixed(1)}%` : undefined,
-        _v$19 = `calc(${termsCss(top())} + 1px)`,
-        _v$20 = `max(var(--k2b-calendar-band-min), calc(${termsCss(subtractTerms(bottom(), top()))} - 2px))`;
+        _v$1 = past() && checked() === false ? "true" : undefined,
+        _v$10 = checked() !== undefined ? "true" : undefined,
+        _v$11 = view.justChecked().has(event().id) ? "true" : undefined,
+        _v$12 = props.band.end > limit() ? "true" : undefined,
+        _v$13 = view.movingId() === event().id ? "true" : undefined,
+        _v$14 = event().display,
+        _v$15 = eventAccent(event()),
+        _v$16 = String(props.band.lane),
+        _v$17 = String(props.band.lanes),
+        _v$18 = String(lines()),
+        _v$19 = running() ? `${((now() - props.band.start) / length() * 100).toFixed(1)}%` : undefined,
+        _v$20 = `calc(${termsCss(top())} + 1px)`,
+        _v$21 = `max(var(--k2b-calendar-band-min), calc(${termsCss(subtractTerms(bottom(), top()))} - 2px))`;
       _v$6 !== _p$.e && _$setAttribute(_el$6, "data-calendar-entry", _p$.e = _v$6);
       _v$7 !== _p$.t && _$setAttribute(_el$6, "data-size", _p$.t = _v$7);
       _v$8 !== _p$.a && _$setAttribute(_el$6, "data-past", _p$.a = _v$8);
       _v$9 !== _p$.o && _$setAttribute(_el$6, "data-running", _p$.o = _v$9);
       _v$0 !== _p$.i && _$setAttribute(_el$6, "data-checked", _p$.i = _v$0);
-      _v$1 !== _p$.n && _$setAttribute(_el$6, "data-checkbox", _p$.n = _v$1);
-      _v$10 !== _p$.s && _$setAttribute(_el$6, "data-just-checked", _p$.s = _v$10);
-      _v$11 !== _p$.h && _$setAttribute(_el$6, "data-cut-bottom", _p$.h = _v$11);
-      _v$12 !== _p$.r && _$setAttribute(_el$6, "data-moving", _p$.r = _v$12);
-      _v$13 !== _p$.d && _$setAttribute(_el$6, "data-display", _p$.d = _v$13);
-      _v$14 !== _p$.l && _$setStyleProperty(_el$6, "--k2b-calendar-accent", _p$.l = _v$14);
-      _v$15 !== _p$.u && _$setStyleProperty(_el$6, "--k2b-calendar-lane", _p$.u = _v$15);
-      _v$16 !== _p$.c && _$setStyleProperty(_el$6, "--k2b-calendar-lanes", _p$.c = _v$16);
-      _v$17 !== _p$.w && _$setStyleProperty(_el$6, "--k2b-calendar-lines", _p$.w = _v$17);
-      _v$18 !== _p$.m && _$setStyleProperty(_el$6, "--k2b-calendar-progress", _p$.m = _v$18);
-      _v$19 !== _p$.f && _$setStyleProperty(_el$6, "top", _p$.f = _v$19);
-      _v$20 !== _p$.y && _$setStyleProperty(_el$6, "height", _p$.y = _v$20);
+      _v$1 !== _p$.n && _$setAttribute(_el$6, "data-overdue", _p$.n = _v$1);
+      _v$10 !== _p$.s && _$setAttribute(_el$6, "data-checkbox", _p$.s = _v$10);
+      _v$11 !== _p$.h && _$setAttribute(_el$6, "data-just-checked", _p$.h = _v$11);
+      _v$12 !== _p$.r && _$setAttribute(_el$6, "data-cut-bottom", _p$.r = _v$12);
+      _v$13 !== _p$.d && _$setAttribute(_el$6, "data-moving", _p$.d = _v$13);
+      _v$14 !== _p$.l && _$setAttribute(_el$6, "data-display", _p$.l = _v$14);
+      _v$15 !== _p$.u && _$setStyleProperty(_el$6, "--k2b-calendar-accent", _p$.u = _v$15);
+      _v$16 !== _p$.c && _$setStyleProperty(_el$6, "--k2b-calendar-lane", _p$.c = _v$16);
+      _v$17 !== _p$.w && _$setStyleProperty(_el$6, "--k2b-calendar-lanes", _p$.w = _v$17);
+      _v$18 !== _p$.m && _$setStyleProperty(_el$6, "--k2b-calendar-lines", _p$.m = _v$18);
+      _v$19 !== _p$.f && _$setStyleProperty(_el$6, "--k2b-calendar-progress", _p$.f = _v$19);
+      _v$20 !== _p$.y && _$setStyleProperty(_el$6, "top", _p$.y = _v$20);
+      _v$21 !== _p$.g && _$setStyleProperty(_el$6, "height", _p$.g = _v$21);
       return _p$;
     }, {
       e: undefined,
@@ -1055,7 +1059,8 @@ export const TimeBand = props => {
       w: undefined,
       m: undefined,
       f: undefined,
-      y: undefined
+      y: undefined,
+      g: undefined
     });
     return _el$6;
   })();
@@ -1131,28 +1136,28 @@ export const TimeMarker = props => {
       }
     }), _el$22, _co$6);
     _$effect(_p$ => {
-      var _v$21 = props.event.id,
-        _v$22 = past() ? "true" : undefined,
-        _v$23 = past() && checked() === false ? "true" : undefined,
-        _v$24 = checked() ? "true" : undefined,
-        _v$25 = view.justChecked().has(props.event.id) ? "true" : undefined,
-        _v$26 = props.above ? "true" : undefined,
-        _v$27 = view.movingId() === props.event.id ? "true" : undefined,
-        _v$28 = eventAccent(props.event),
-        _v$29 = String(props.lane),
-        _v$30 = String(props.lanes),
-        _v$31 = termsCss(dayTopTerms(view.wake(), props.expanded, props.minute));
-      _v$21 !== _p$.e && _$setAttribute(_el$16, "data-calendar-entry", _p$.e = _v$21);
-      _v$22 !== _p$.t && _$setAttribute(_el$16, "data-past", _p$.t = _v$22);
-      _v$23 !== _p$.a && _$setAttribute(_el$16, "data-overdue", _p$.a = _v$23);
-      _v$24 !== _p$.o && _$setAttribute(_el$16, "data-checked", _p$.o = _v$24);
-      _v$25 !== _p$.i && _$setAttribute(_el$16, "data-just-checked", _p$.i = _v$25);
-      _v$26 !== _p$.n && _$setAttribute(_el$16, "data-above", _p$.n = _v$26);
-      _v$27 !== _p$.s && _$setAttribute(_el$16, "data-moving", _p$.s = _v$27);
-      _v$28 !== _p$.h && _$setStyleProperty(_el$16, "--k2b-calendar-accent", _p$.h = _v$28);
-      _v$29 !== _p$.r && _$setStyleProperty(_el$16, "--k2b-calendar-marker-lane", _p$.r = _v$29);
-      _v$30 !== _p$.d && _$setStyleProperty(_el$16, "--k2b-calendar-marker-lanes", _p$.d = _v$30);
-      _v$31 !== _p$.l && _$setStyleProperty(_el$16, "top", _p$.l = _v$31);
+      var _v$22 = props.event.id,
+        _v$23 = past() ? "true" : undefined,
+        _v$24 = past() && checked() === false ? "true" : undefined,
+        _v$25 = checked() ? "true" : undefined,
+        _v$26 = view.justChecked().has(props.event.id) ? "true" : undefined,
+        _v$27 = props.above ? "true" : undefined,
+        _v$28 = view.movingId() === props.event.id ? "true" : undefined,
+        _v$29 = eventAccent(props.event),
+        _v$30 = String(props.lane),
+        _v$31 = String(props.lanes),
+        _v$32 = termsCss(dayTopTerms(view.wake(), props.expanded, props.minute));
+      _v$22 !== _p$.e && _$setAttribute(_el$16, "data-calendar-entry", _p$.e = _v$22);
+      _v$23 !== _p$.t && _$setAttribute(_el$16, "data-past", _p$.t = _v$23);
+      _v$24 !== _p$.a && _$setAttribute(_el$16, "data-overdue", _p$.a = _v$24);
+      _v$25 !== _p$.o && _$setAttribute(_el$16, "data-checked", _p$.o = _v$25);
+      _v$26 !== _p$.i && _$setAttribute(_el$16, "data-just-checked", _p$.i = _v$26);
+      _v$27 !== _p$.n && _$setAttribute(_el$16, "data-above", _p$.n = _v$27);
+      _v$28 !== _p$.s && _$setAttribute(_el$16, "data-moving", _p$.s = _v$28);
+      _v$29 !== _p$.h && _$setStyleProperty(_el$16, "--k2b-calendar-accent", _p$.h = _v$29);
+      _v$30 !== _p$.r && _$setStyleProperty(_el$16, "--k2b-calendar-marker-lane", _p$.r = _v$30);
+      _v$31 !== _p$.d && _$setStyleProperty(_el$16, "--k2b-calendar-marker-lanes", _p$.d = _v$31);
+      _v$32 !== _p$.l && _$setStyleProperty(_el$16, "top", _p$.l = _v$32);
       return _p$;
     }, {
       e: undefined,
@@ -1212,27 +1217,27 @@ export const TimeGap = props => {
           return () => _c$() ? hit().text : label();
         })());
         _$effect(_p$ => {
-          var _v$32 = labelled() ? props.tabIndex ?? (props.gap.past ? -1 : 0) : -1,
-            _v$33 = stop()?.id,
-            _v$34 = stop()?.column,
-            _v$35 = stop()?.minute,
-            _v$36 = view.messages().calendarFreeAction({
+          var _v$33 = labelled() ? props.tabIndex ?? (props.gap.past ? -1 : 0) : -1,
+            _v$34 = stop()?.id,
+            _v$35 = stop()?.column,
+            _v$36 = stop()?.minute,
+            _v$37 = view.messages().calendarFreeAction({
               duration: view.duration(length()),
               from: view.clock(props.gap.start),
               to: view.clock(props.gap.end),
               start: view.clock(proposal()[0]),
               end: view.clock(proposal()[1])
             }),
-            _v$37 = view.messages().calendarCreateAt({
+            _v$38 = view.messages().calendarCreateAt({
               start: view.clock(proposal()[0]),
               end: view.clock(proposal()[1])
             });
-          _v$32 !== _p$.e && _$setAttribute(_el$26, "tabindex", _p$.e = _v$32);
-          _v$33 !== _p$.t && _$setAttribute(_el$26, "data-stop", _p$.t = _v$33);
-          _v$34 !== _p$.a && _$setAttribute(_el$26, "data-col", _p$.a = _v$34);
-          _v$35 !== _p$.o && _$setAttribute(_el$26, "data-minute", _p$.o = _v$35);
-          _v$36 !== _p$.i && _$setAttribute(_el$26, "aria-label", _p$.i = _v$36);
-          _v$37 !== _p$.n && _$setAttribute(_el$26, "title", _p$.n = _v$37);
+          _v$33 !== _p$.e && _$setAttribute(_el$26, "tabindex", _p$.e = _v$33);
+          _v$34 !== _p$.t && _$setAttribute(_el$26, "data-stop", _p$.t = _v$34);
+          _v$35 !== _p$.a && _$setAttribute(_el$26, "data-col", _p$.a = _v$35);
+          _v$36 !== _p$.o && _$setAttribute(_el$26, "data-minute", _p$.o = _v$36);
+          _v$37 !== _p$.i && _$setAttribute(_el$26, "aria-label", _p$.i = _v$37);
+          _v$38 !== _p$.n && _$setAttribute(_el$26, "title", _p$.n = _v$38);
           return _p$;
         }, {
           e: undefined,
@@ -1247,20 +1252,20 @@ export const TimeGap = props => {
       }
     }), _el$30, _co$7);
     _$effect(_p$ => {
-      var _v$38 = labelled() ? undefined : "true",
-        _v$39 = length() >= GAP_LONG_MINUTES ? "true" : undefined,
-        _v$40 = props.gap.past ? "true" : undefined,
-        _v$41 = props.aside ? "true" : undefined,
-        _v$42 = hit() ? hit().fits ? "fit" : "short" : undefined,
-        _v$43 = termsCss(top()),
-        _v$44 = termsCss(subtractTerms(dayYTerms(view.wake(), props.expanded, props.gap.end), top()));
-      _v$38 !== _p$.e && _$setAttribute(_el$24, "data-short", _p$.e = _v$38);
-      _v$39 !== _p$.t && _$setAttribute(_el$24, "data-long", _p$.t = _v$39);
-      _v$40 !== _p$.a && _$setAttribute(_el$24, "data-past", _p$.a = _v$40);
-      _v$41 !== _p$.o && _$setAttribute(_el$24, "data-aside", _p$.o = _v$41);
-      _v$42 !== _p$.i && _$setAttribute(_el$24, "data-hit", _p$.i = _v$42);
-      _v$43 !== _p$.n && _$setStyleProperty(_el$24, "top", _p$.n = _v$43);
-      _v$44 !== _p$.s && _$setStyleProperty(_el$24, "height", _p$.s = _v$44);
+      var _v$39 = labelled() ? undefined : "true",
+        _v$40 = length() >= GAP_LONG_MINUTES ? "true" : undefined,
+        _v$41 = props.gap.past ? "true" : undefined,
+        _v$42 = props.aside ? "true" : undefined,
+        _v$43 = hit() ? hit().fits ? "fit" : "short" : undefined,
+        _v$44 = termsCss(top()),
+        _v$45 = termsCss(subtractTerms(dayYTerms(view.wake(), props.expanded, props.gap.end), top()));
+      _v$39 !== _p$.e && _$setAttribute(_el$24, "data-short", _p$.e = _v$39);
+      _v$40 !== _p$.t && _$setAttribute(_el$24, "data-long", _p$.t = _v$40);
+      _v$41 !== _p$.a && _$setAttribute(_el$24, "data-past", _p$.a = _v$41);
+      _v$42 !== _p$.o && _$setAttribute(_el$24, "data-aside", _p$.o = _v$42);
+      _v$43 !== _p$.i && _$setAttribute(_el$24, "data-hit", _p$.i = _v$43);
+      _v$44 !== _p$.n && _$setStyleProperty(_el$24, "top", _p$.n = _v$44);
+      _v$45 !== _p$.s && _$setStyleProperty(_el$24, "height", _p$.s = _v$45);
       return _p$;
     }, {
       e: undefined,
@@ -1332,13 +1337,13 @@ export const TimeOverlays = props => {
       _$insert(_el$36, () => view.duration(slot().end - slot().start), _el$44, _co$0);
       _el$45.$$pointerdown = event => startDraftResize(view, event, "end");
       _$effect(_p$ => {
-        var _v$45 = box(slot().start, slot().end),
-          _v$46 = view.messages().calendarCreateAt({
+        var _v$46 = box(slot().start, slot().end),
+          _v$47 = view.messages().calendarCreateAt({
             start: view.clock(slot().start),
             end: view.clock(slot().end)
           });
-        _p$.e = _$style(_el$32, _v$45, _p$.e);
-        _v$46 !== _p$.t && _$setAttribute(_el$34, "aria-label", _p$.t = _v$46);
+        _p$.e = _$style(_el$32, _v$46, _p$.e);
+        _v$47 !== _p$.t && _$setAttribute(_el$34, "aria-label", _p$.t = _v$47);
         return _p$;
       }, {
         e: undefined,
@@ -1371,15 +1376,15 @@ export const TimeOverlays = props => {
         })()
       }), _el$50, _co$1);
       _$effect(_p$ => {
-        var _v$47 = current().end - current().start < 40 ? "s" : "m",
-          _v$48 = current().warn ? "true" : undefined,
-          _v$49 = {
+        var _v$48 = current().end - current().start < 40 ? "s" : "m",
+          _v$49 = current().warn ? "true" : undefined,
+          _v$50 = {
             ...box(current().start, current().end),
             "--k2b-calendar-accent": current().colorHex ?? "var(--k2b-action)"
           };
-        _v$47 !== _p$.e && _$setAttribute(_el$46, "data-size", _p$.e = _v$47);
-        _v$48 !== _p$.t && _$setAttribute(_el$46, "data-warn", _p$.t = _v$48);
-        _p$.a = _$style(_el$46, _v$49, _p$.a);
+        _v$48 !== _p$.e && _$setAttribute(_el$46, "data-size", _p$.e = _v$48);
+        _v$49 !== _p$.t && _$setAttribute(_el$46, "data-warn", _p$.t = _v$49);
+        _p$.a = _$style(_el$46, _v$50, _p$.a);
         return _p$;
       }, {
         e: undefined,
@@ -1564,16 +1569,16 @@ export const AllDayChips = props => {
           }
         }), _el$57, _co$11);
         _$effect(_p$ => {
-          var _v$50 = span.marker ? undefined : "true",
-            _v$51 = checked() !== undefined ? "true" : undefined,
-            _v$52 = checked() ? "true" : undefined,
-            _v$53 = view.justChecked().has(event.id) ? "true" : undefined,
-            _v$54 = eventAccent(event);
-          _v$50 !== _p$.e && _$setAttribute(_el$53, "data-bar", _p$.e = _v$50);
-          _v$51 !== _p$.t && _$setAttribute(_el$53, "data-checkbox", _p$.t = _v$51);
-          _v$52 !== _p$.a && _$setAttribute(_el$53, "data-checked", _p$.a = _v$52);
-          _v$53 !== _p$.o && _$setAttribute(_el$53, "data-just-checked", _p$.o = _v$53);
-          _v$54 !== _p$.i && _$setStyleProperty(_el$53, "--k2b-calendar-accent", _p$.i = _v$54);
+          var _v$51 = span.marker ? undefined : "true",
+            _v$52 = checked() !== undefined ? "true" : undefined,
+            _v$53 = checked() ? "true" : undefined,
+            _v$54 = view.justChecked().has(event.id) ? "true" : undefined,
+            _v$55 = eventAccent(event);
+          _v$51 !== _p$.e && _$setAttribute(_el$53, "data-bar", _p$.e = _v$51);
+          _v$52 !== _p$.t && _$setAttribute(_el$53, "data-checkbox", _p$.t = _v$52);
+          _v$53 !== _p$.a && _$setAttribute(_el$53, "data-checked", _p$.a = _v$53);
+          _v$54 !== _p$.o && _$setAttribute(_el$53, "data-just-checked", _p$.o = _v$54);
+          _v$55 !== _p$.i && _$setStyleProperty(_el$53, "--k2b-calendar-accent", _p$.i = _v$55);
           return _p$;
         }, {
           e: undefined,