minerva-design 1.17.1 → 1.18.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # minerva-design
 
+## 1.18.0
+
+### Minor Changes
+
+- 39a6cf4: QuadrantChart (React): one point card for hover, focus, selection and drag. The card carries the point's dot (placed exactly on the point), its name and its quadrant (with the badge), and the point's actions (`renderPointActions`) beside the name. The engine tooltip and hover label chip are gone, and the drawn label of the active point gives way to the card while the other labels keep their places. `renderTooltip` now fills the card. The card stays while the pointer moves from the dot to its actions, mirrors near the right edge (without flipping back and forth during a drag), and stays inside the plot near the top and bottom edges. Clicking its name selects the point.
+
+  QuadrantTaskBoard: compact edit and delete buttons (xsmall, 14px icons). On React they sit in the task card; on Vue, Angular and Web Components the toolbar above the task is smaller. On narrow phones (≤ 360px) the mini program headers give the title the room: the badge is hidden and the chips are tighter.
+
+  Chart engine: new `interaction.hoverLabel` option (`false` keeps a hovered dot's label as drawn) and `ChartInstance.setLabelHidden()` (hides a point's drawn label but keeps its place). Labels kept in quadrant cells now keep a gap between each other and never sit nearer to another dot than to their own, so crowded quadrants no longer pair a name with the wrong dot.
+
+## 1.17.2
+
+### Patch Changes
+
+- a411866: Sharper and tidier quadrant boards and charts on mini programs, and quadrant point labels that stay in their quadrant.
+
+  - **QuadrantTaskBoard** (Taro, uni-app, WeChat): the quadrant headers are compact single-line pills in a 2 x 2 grid, like the web board: the badge and the task count are small chips, a long quadrant title is cut with an ellipsis instead of wrapping, and the + button sits at the end. The headers are styled by the shared stylesheet (no inline layout) and can be themed with `--quadrant-task-board-header-background`, `--quadrant-task-board-header-color`, `--quadrant-task-board-count-background` and `--quadrant-task-board-count-color`.
+  - **Charts on Taro H5** were blurry on high-density screens: the canvas was drawn at 1x because Taro's H5 runtime has no pixel ratio API on its default export. Charts now use the page's `devicePixelRatio` there. Canvas charts (Taro and uni-app H5 included) also draw again right away when the host component resets the size of the canvas behind them, instead of staying blank or blurry until the next update.
+  - **Taro Input**: small and large inputs no longer pad their text twice, so their text lines up like in medium inputs. This also fixes the name field of the QuadrantTaskBoard panel.
+  - **Quadrant charts** (every renderer): a point label stays inside the quadrant of its dot. It goes on the side of the dot with more room in the quadrant, and is cut with "…" when it still does not fit (a label that would keep only a few letters is left out; the tooltip still names the point), so it no longer crosses the center dividers or runs into the dots of the next quadrant. Overlapping labels are still skipped. The behavior comes from a new scatter series option, `labelCells: { x, y }`, which keeps labels inside the cells of a plot cut at those values.
+
 ## 1.17.1
 
 ### Patch Changes

package/dist/angular/fesm2022/minerva-angular.mjs

@@ -1513,26 +1513,27 @@ const progressIndicatorStyles = {
 };
 const proseStyles = { prose: "_prose_3xiks_1" };
 const quadrantTaskBoardStyles = {
-	actions: "_actions_15tn3_58",
-	"actions-in": "_actions-in_15tn3_1",
-	add: "_add_15tn3_54",
-	badge: "_badge_15tn3_35",
-	board: "_board_15tn3_1",
-	count: "_count_15tn3_40",
-	field: "_field_15tn3_89",
-	footer: "_footer_15tn3_213",
-	form: "_form_15tn3_83",
-	header: "_header_15tn3_11",
-	panel: "_panel_15tn3_97",
-	"panel-in": "_panel-in_15tn3_1",
-	panelText: "_panelText_15tn3_134",
-	panelTitle: "_panelTitle_15tn3_127",
-	quadrant: "_quadrant_15tn3_142",
-	quadrantGrid: "_quadrantGrid_15tn3_156",
-	quadrantName: "_quadrantName_15tn3_206",
-	quadrants: "_quadrants_15tn3_142",
-	swatch: "_swatch_15tn3_199",
-	title: "_title_15tn3_29"
+	actions: "_actions_1m92c_58",
+	"actions-in": "_actions-in_1m92c_1",
+	add: "_add_1m92c_54",
+	badge: "_badge_1m92c_35",
+	board: "_board_1m92c_1",
+	cardActions: "_cardActions_1m92c_83",
+	count: "_count_1m92c_40",
+	field: "_field_1m92c_95",
+	footer: "_footer_1m92c_219",
+	form: "_form_1m92c_89",
+	header: "_header_1m92c_11",
+	panel: "_panel_1m92c_103",
+	"panel-in": "_panel-in_1m92c_1",
+	panelText: "_panelText_1m92c_140",
+	panelTitle: "_panelTitle_1m92c_133",
+	quadrant: "_quadrant_1m92c_148",
+	quadrantGrid: "_quadrantGrid_1m92c_162",
+	quadrantName: "_quadrantName_1m92c_212",
+	quadrants: "_quadrants_1m92c_148",
+	swatch: "_swatch_1m92c_205",
+	title: "_title_1m92c_29"
 };
 const radioStyles = {
 	circle: "_circle_ffxaw_87",
@@ -46606,6 +46607,7 @@ const emptyBox = () => ({
 	height: 0
 });
 const ICON_ATTRS = `width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"`;
+const ACTION_ICON_ATTRS = `width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"`;
 var MnQuadrantTaskBoard = class MnQuadrantTaskBoard {
 	constructor() {
 		this.points = input.required(...ngDevMode ? [{ debugName: "points" }] : /* istanbul ignore next */ []);
@@ -47204,7 +47206,7 @@ var MnQuadrantTaskBoard = class MnQuadrantTaskBoard {
 			],
 			exportAs: ["mnQuadrantTaskBoard"],
 			ngImport: i0,
-			template: "\n    <mn-quadrant-chart\n      [points]=\"points()\"\n      [locale]=\"language()\"\n      [selectedIndex]=\"selected()\"\n      [draggable]=\"draggable() ?? true\"\n      [height]=\"height()\"\n      [width]=\"width()\"\n      [renderer]=\"renderer()\"\n      [legend]=\"legend()\"\n      [tooltip]=\"tooltip()\"\n      [crosshair]=\"crosshair()\"\n      [annotations]=\"annotations()\"\n      [interaction]=\"interaction()\"\n      [padding]=\"padding()\"\n      [palette]=\"palette()\"\n      [ariaLabel]=\"ariaLabel()\"\n      [xDomain]=\"xDomain()\"\n      [yDomain]=\"yDomain()\"\n      [xSplit]=\"xSplit()\"\n      [ySplit]=\"ySplit()\"\n      [quadrants]=\"quadrants()\"\n      [xLabel]=\"xLabel()\"\n      [yLabel]=\"yLabel()\"\n      [axisLabels]=\"axisLabels()\"\n      [showTicks]=\"showTicks()\"\n      [reverseX]=\"reverseX()\"\n      [showLabels]=\"showLabels()\"\n      [pointSize]=\"pointSize()\"\n      [name]=\"name()\"\n      [selectedIndices]=\"selectedIndices()\"\n      [accessiblePoints]=\"accessiblePoints()\"\n      [quadrantHeader]=\"header\"\n      [pointActions]=\"actions\"\n      (hover)=\"hover.emit($event)\"\n      (zoom)=\"zoom.emit($event)\"\n      (rendererChange)=\"rendererChange.emit($event)\"\n      (pointClick)=\"onPointClick($event)\"\n      (pointDoubleClick)=\"edit($event.index)\"\n      (pointDrag)=\"pointDrag.emit($event)\"\n      (pointDrop)=\"onPointDrop($event)\"\n      (quadrantClick)=\"add($event.quadrant, pointerBox(), $event)\"\n    />\n    <ng-template #header let-corner let-info=\"info\">\n      <div [class]=\"s.header\" [attr.data-corner]=\"corner\">\n        @if (info.region?.badge) {\n          <span [class]=\"s.badge\">{{ info.region.badge }}</span>\n        }\n        <span [class]=\"s.title\">{{ title(corner) }}</span>\n        @if (showCounts() !== false) {\n          <span [class]=\"s.count\">{{ countText(info.points) }}</span>\n        }\n        <button\n          mnIconButton\n          size=\"xsmall\"\n          variant=\"ghost\"\n          [class]=\"s.add\"\n          [label]=\"texts().add + ' · ' + title(corner)\"\n          [attr.aria-expanded]=\"adding() === corner\"\n          (click)=\"add(corner, boxOf($event.currentTarget))\"\n        >\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path [attr.d]=\"icons.add\" /></svg>\n        </button>\n      </div>\n    </ng-template>\n    <ng-template #actions let-index=\"index\">\n      <div\n        role=\"toolbar\"\n        [attr.aria-label]=\"texts().actions\"\n        [class]=\"s.actions\"\n        (pointerdown)=\"$event.stopPropagation()\"\n      >\n        <button\n          mnIconButton\n          size=\"small\"\n          variant=\"ghost\"\n          [label]=\"texts().edit\"\n          (click)=\"edit(index)\"\n        >\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path [attr.d]=\"icons.edit\" /></svg>\n        </button>\n        <button\n          mnIconButton\n          size=\"small\"\n          variant=\"ghost\"\n          color=\"danger\"\n          [label]=\"texts().delete\"\n          (click)=\"confirmRemove(index)\"\n        >\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path [attr.d]=\"icons.delete\" /></svg>\n        </button>\n      </div>\n    </ng-template>\n    @if (draft(); as current) {\n      <div\n        #panel\n        role=\"dialog\"\n        [attr.aria-labelledby]=\"ids.title\"\n        [class]=\"s.panel\"\n        [attr.data-quadrant-task-panel]=\"\n          current.index === null ? 'add' : 'edit'\n        \"\n        (keydown)=\"onPanelKeydown($event)\"\n      >\n        <form [class]=\"s.form\" (submit)=\"save($event)\">\n          <h3 [id]=\"ids.title\" [class]=\"s.panelTitle\">\n            {{ current.index === null ? texts().add : texts().edit }}\n          </h3>\n          <label [class]=\"s.field\">\n            <span>{{ texts().name }}</span>\n            <mn-input\n              required\n              size=\"small\"\n              [value]=\"current.label\"\n              [aria-label]=\"texts().name\"\n              (valueChange)=\"setLabel($event ?? '')\"\n            />\n          </label>\n          <fieldset [class]=\"s.quadrants\">\n            <legend>{{ texts().quadrant }}</legend>\n            <div [class]=\"s.quadrantGrid\">\n              @for (corner of corners; track corner) {\n                <label [class]=\"s.quadrant\" [attr.data-corner]=\"corner\">\n                  <input\n                    type=\"radio\"\n                    [name]=\"ids.quadrant\"\n                    [value]=\"corner\"\n                    [checked]=\"current.quadrant === corner\"\n                    (change)=\"setQuadrant(corner)\"\n                  />\n                  <span\n                    [class]=\"s.swatch\"\n                    [style.background]=\"color(corner)\"\n                    aria-hidden=\"true\"\n                  ></span>\n                  <span [class]=\"s.quadrantName\">{{ title(corner) }}</span>\n                </label>\n              }\n            </div>\n          </fieldset>\n          <div [class]=\"s.footer\">\n            <button\n              mnButton\n              size=\"small\"\n              color=\"neutral\"\n              variant=\"ghost\"\n              (click)=\"close()\"\n            >\n              {{ texts().cancel }}\n            </button>\n            <button mnButton size=\"small\" type=\"submit\" [disabled]=\"!canSave()\">\n              {{ texts().save }}\n            </button>\n          </div>\n        </form>\n      </div>\n    }\n    @if (deletingPoint()) {\n      <div\n        #panel\n        role=\"alertdialog\"\n        [attr.aria-labelledby]=\"ids.title\"\n        [attr.aria-describedby]=\"ids.text\"\n        [class]=\"s.panel\"\n        data-quadrant-task-panel=\"delete\"\n        (keydown)=\"onPanelKeydown($event)\"\n      >\n        <h3 [id]=\"ids.title\" [class]=\"s.panelTitle\">{{ texts().delete }}</h3>\n        <p [id]=\"ids.text\" [class]=\"s.panelText\">{{ deleteText() }}</p>\n        <div [class]=\"s.footer\">\n          <button\n            #deleteCancel\n            mnButton\n            size=\"small\"\n            color=\"neutral\"\n            variant=\"ghost\"\n            (click)=\"close()\"\n          >\n            {{ texts().cancel }}\n          </button>\n          <button mnButton size=\"small\" color=\"danger\" (click)=\"remove()\">\n            {{ texts().confirmDelete }}\n          </button>\n        </div>\n      </div>\n    }\n  ",
+			template: "\n    <mn-quadrant-chart\n      [points]=\"points()\"\n      [locale]=\"language()\"\n      [selectedIndex]=\"selected()\"\n      [draggable]=\"draggable() ?? true\"\n      [height]=\"height()\"\n      [width]=\"width()\"\n      [renderer]=\"renderer()\"\n      [legend]=\"legend()\"\n      [tooltip]=\"tooltip()\"\n      [crosshair]=\"crosshair()\"\n      [annotations]=\"annotations()\"\n      [interaction]=\"interaction()\"\n      [padding]=\"padding()\"\n      [palette]=\"palette()\"\n      [ariaLabel]=\"ariaLabel()\"\n      [xDomain]=\"xDomain()\"\n      [yDomain]=\"yDomain()\"\n      [xSplit]=\"xSplit()\"\n      [ySplit]=\"ySplit()\"\n      [quadrants]=\"quadrants()\"\n      [xLabel]=\"xLabel()\"\n      [yLabel]=\"yLabel()\"\n      [axisLabels]=\"axisLabels()\"\n      [showTicks]=\"showTicks()\"\n      [reverseX]=\"reverseX()\"\n      [showLabels]=\"showLabels()\"\n      [pointSize]=\"pointSize()\"\n      [name]=\"name()\"\n      [selectedIndices]=\"selectedIndices()\"\n      [accessiblePoints]=\"accessiblePoints()\"\n      [quadrantHeader]=\"header\"\n      [pointActions]=\"actions\"\n      (hover)=\"hover.emit($event)\"\n      (zoom)=\"zoom.emit($event)\"\n      (rendererChange)=\"rendererChange.emit($event)\"\n      (pointClick)=\"onPointClick($event)\"\n      (pointDoubleClick)=\"edit($event.index)\"\n      (pointDrag)=\"pointDrag.emit($event)\"\n      (pointDrop)=\"onPointDrop($event)\"\n      (quadrantClick)=\"add($event.quadrant, pointerBox(), $event)\"\n    />\n    <ng-template #header let-corner let-info=\"info\">\n      <div [class]=\"s.header\" [attr.data-corner]=\"corner\">\n        @if (info.region?.badge) {\n          <span [class]=\"s.badge\">{{ info.region.badge }}</span>\n        }\n        <span [class]=\"s.title\">{{ title(corner) }}</span>\n        @if (showCounts() !== false) {\n          <span [class]=\"s.count\">{{ countText(info.points) }}</span>\n        }\n        <button\n          mnIconButton\n          size=\"xsmall\"\n          variant=\"ghost\"\n          [class]=\"s.add\"\n          [label]=\"texts().add + ' · ' + title(corner)\"\n          [attr.aria-expanded]=\"adding() === corner\"\n          (click)=\"add(corner, boxOf($event.currentTarget))\"\n        >\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path [attr.d]=\"icons.add\" /></svg>\n        </button>\n      </div>\n    </ng-template>\n    <ng-template #actions let-index=\"index\">\n      <div\n        role=\"toolbar\"\n        [attr.aria-label]=\"texts().actions\"\n        [class]=\"s.actions\"\n        (pointerdown)=\"$event.stopPropagation()\"\n      >\n        <button\n          mnIconButton\n          size=\"xsmall\"\n          variant=\"ghost\"\n          [label]=\"texts().edit\"\n          (click)=\"edit(index)\"\n        >\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path [attr.d]=\"icons.edit\" /></svg>\n        </button>\n        <button\n          mnIconButton\n          size=\"xsmall\"\n          variant=\"ghost\"\n          color=\"danger\"\n          [label]=\"texts().delete\"\n          (click)=\"confirmRemove(index)\"\n        >\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path [attr.d]=\"icons.delete\" /></svg>\n        </button>\n      </div>\n    </ng-template>\n    @if (draft(); as current) {\n      <div\n        #panel\n        role=\"dialog\"\n        [attr.aria-labelledby]=\"ids.title\"\n        [class]=\"s.panel\"\n        [attr.data-quadrant-task-panel]=\"\n          current.index === null ? 'add' : 'edit'\n        \"\n        (keydown)=\"onPanelKeydown($event)\"\n      >\n        <form [class]=\"s.form\" (submit)=\"save($event)\">\n          <h3 [id]=\"ids.title\" [class]=\"s.panelTitle\">\n            {{ current.index === null ? texts().add : texts().edit }}\n          </h3>\n          <label [class]=\"s.field\">\n            <span>{{ texts().name }}</span>\n            <mn-input\n              required\n              size=\"small\"\n              [value]=\"current.label\"\n              [aria-label]=\"texts().name\"\n              (valueChange)=\"setLabel($event ?? '')\"\n            />\n          </label>\n          <fieldset [class]=\"s.quadrants\">\n            <legend>{{ texts().quadrant }}</legend>\n            <div [class]=\"s.quadrantGrid\">\n              @for (corner of corners; track corner) {\n                <label [class]=\"s.quadrant\" [attr.data-corner]=\"corner\">\n                  <input\n                    type=\"radio\"\n                    [name]=\"ids.quadrant\"\n                    [value]=\"corner\"\n                    [checked]=\"current.quadrant === corner\"\n                    (change)=\"setQuadrant(corner)\"\n                  />\n                  <span\n                    [class]=\"s.swatch\"\n                    [style.background]=\"color(corner)\"\n                    aria-hidden=\"true\"\n                  ></span>\n                  <span [class]=\"s.quadrantName\">{{ title(corner) }}</span>\n                </label>\n              }\n            </div>\n          </fieldset>\n          <div [class]=\"s.footer\">\n            <button\n              mnButton\n              size=\"small\"\n              color=\"neutral\"\n              variant=\"ghost\"\n              (click)=\"close()\"\n            >\n              {{ texts().cancel }}\n            </button>\n            <button mnButton size=\"small\" type=\"submit\" [disabled]=\"!canSave()\">\n              {{ texts().save }}\n            </button>\n          </div>\n        </form>\n      </div>\n    }\n    @if (deletingPoint()) {\n      <div\n        #panel\n        role=\"alertdialog\"\n        [attr.aria-labelledby]=\"ids.title\"\n        [attr.aria-describedby]=\"ids.text\"\n        [class]=\"s.panel\"\n        data-quadrant-task-panel=\"delete\"\n        (keydown)=\"onPanelKeydown($event)\"\n      >\n        <h3 [id]=\"ids.title\" [class]=\"s.panelTitle\">{{ texts().delete }}</h3>\n        <p [id]=\"ids.text\" [class]=\"s.panelText\">{{ deleteText() }}</p>\n        <div [class]=\"s.footer\">\n          <button\n            #deleteCancel\n            mnButton\n            size=\"small\"\n            color=\"neutral\"\n            variant=\"ghost\"\n            (click)=\"close()\"\n          >\n            {{ texts().cancel }}\n          </button>\n          <button mnButton size=\"small\" color=\"danger\" (click)=\"remove()\">\n            {{ texts().confirmDelete }}\n          </button>\n        </div>\n      </div>\n    }\n  ",
 			isInline: true,
 			dependencies: [
 				{
@@ -47420,22 +47422,22 @@ i0.ɵɵngDeclareClassMetadata({
       >
         <button
           mnIconButton
-          size="small"
+          size="xsmall"
           variant="ghost"
           [label]="texts().edit"
           (click)="edit(index)"
         >
-          <svg ${ICON_ATTRS}><path [attr.d]="icons.edit" /></svg>
+          <svg ${ACTION_ICON_ATTRS}><path [attr.d]="icons.edit" /></svg>
         </button>
         <button
           mnIconButton
-          size="small"
+          size="xsmall"
           variant="ghost"
           color="danger"
           [label]="texts().delete"
           (click)="confirmRemove(index)"
         >
-          <svg ${ICON_ATTRS}><path [attr.d]="icons.delete" /></svg>
+          <svg ${ACTION_ICON_ATTRS}><path [attr.d]="icons.delete" /></svg>
         </button>
       </div>
     </ng-template>