minerva-design 1.17.2 → 1.18.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # 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

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>