@memberjunction/ng-dashboard-viewer 6.2.0-edge.3 → 6.2.0-edge.4

package/dist/lib/dashboard-card/dashboard-card.component.js

@@ -0,0 +1,281 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { HighlightSearchMatches } from '@memberjunction/global';
+import { FormatDashboardDate } from './dashboard-card.helpers';
+import { LayoutPreviewCache } from './layout-preview-cache';
+import * as i0 from "@angular/core";
+import * as i1 from "../layout-preview/dashboard-layout-preview.component";
+function DashboardCardComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 2)(1, "span", 18);
+    i0.ɵɵelement(2, "i", 19);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 20);
+    i0.ɵɵtext(4, "Not set up yet");
+    i0.ɵɵelementEnd()();
+} }
+function DashboardCardComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "img", 3);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("src", ctx_r0.Dashboard.Thumbnail, i0.ɵɵsanitizeUrl);
+} }
+function DashboardCardComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-dashboard-layout-preview", 4);
+} if (rf & 2) {
+    i0.ɵɵproperty("Preview", ctx);
+} }
+function DashboardCardComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 2)(1, "span", 18);
+    i0.ɵɵelement(2, "i", 19);
+    i0.ɵɵelementEnd()();
+} }
+function DashboardCardComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "label", 21);
+    i0.ɵɵlistener("click", function DashboardCardComponent_Conditional_6_Template_label_click_0_listener($event) { return $event.stopPropagation(); })("dblclick", function DashboardCardComponent_Conditional_6_Template_label_dblclick_0_listener($event) { return $event.stopPropagation(); });
+    i0.ɵɵelementStart(1, "input", 22);
+    i0.ɵɵlistener("change", function DashboardCardComponent_Conditional_6_Template_input_change_1_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.SelectionToggle.emit(ctx_r0.Dashboard)); });
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("checked", ctx_r0.Selected);
+    i0.ɵɵattribute("aria-label", "Select " + ctx_r0.Dashboard.Name);
+} }
+function DashboardCardComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 23);
+    i0.ɵɵlistener("click", function DashboardCardComponent_Conditional_8_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnAction($event, ctx_r0.Edit)); });
+    i0.ɵɵelement(1, "i", 24);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵattribute("aria-label", "Edit " + ctx_r0.Dashboard.Name);
+} }
+function DashboardCardComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 25);
+    i0.ɵɵlistener("click", function DashboardCardComponent_Conditional_9_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnAction($event, ctx_r0.Delete)); });
+    i0.ɵɵelement(1, "i", 26);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵattribute("aria-label", "Delete " + ctx_r0.Dashboard.Name);
+} }
+function DashboardCardComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 27);
+    i0.ɵɵlistener("click", function DashboardCardComponent_Conditional_10_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnAction($event, ctx_r0.ToggleFavorite)); });
+    i0.ɵɵelement(1, "i", 28);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("on", ctx_r0.IsFavorite);
+    i0.ɵɵattribute("aria-pressed", ctx_r0.IsFavorite ? "true" : "false")("aria-label", "Favorite " + ctx_r0.Dashboard.Name);
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r0.IsFavorite ? "fa-solid fa-star" : "fa-regular fa-star");
+} }
+function DashboardCardComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "p", 12);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("innerHTML", ctx_r0.DescriptionHtml, i0.ɵɵsanitizeHtml);
+} }
+function DashboardCardComponent_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 14);
+    i0.ɵɵelement(1, "i", 29);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r0.OwnerLabel);
+} }
+function DashboardCardComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 15);
+    i0.ɵɵelement(1, "i", 30);
+    i0.ɵɵtext(2, "Shared");
+    i0.ɵɵelementEnd();
+} }
+function DashboardCardComponent_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 16);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.CategoryPath);
+} }
+function DashboardCardComponent_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 17);
+    i0.ɵɵelement(1, "i", 31);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r0.UpdatedLabel);
+} }
+/**
+ * A dashboard card: a picture, the name, the description, and a meta row with the owner, a Shared
+ * marker, the category and the last update. The picture is the screenshot (Thumbnail), else a
+ * miniature of the saved panel layout, else an icon. A Config dashboard with no parts shows the icon
+ * and "Not set up yet". Presentational: the host decides what each event does.
+ */
+export class DashboardCardComponent {
+    Dashboard;
+    /** True when the dashboard is one of the user's favorites: the star is filled. */
+    IsFavorite = false;
+    /** Whether the card shows the favorite star. */
+    ShowFavorite = true;
+    /** True when another user owns the dashboard and shared it with this user. */
+    IsShared = false;
+    /** Who owns the dashboard, for example "You" or "Ana Ruiz". Null shows no owner. */
+    OwnerLabel = null;
+    /** The category path, for example "Sales › Pipeline". Null shows no category. */
+    CategoryPath = null;
+    /** Search text to mark in the name and description. */
+    HighlightQuery = '';
+    /** True in selection mode: the card shows a checkbox. */
+    Selectable = false;
+    /** True when the card is selected. */
+    Selected = false;
+    /** Whether the card offers Edit. */
+    CanEdit = false;
+    /** Whether the card offers Delete. */
+    CanDelete = false;
+    /** A click on the card outside its buttons. */
+    CardClick = new EventEmitter();
+    /** A double-click on the card outside its buttons. */
+    CardDoubleClick = new EventEmitter();
+    /** A click on the star. */
+    ToggleFavorite = new EventEmitter();
+    /** A change of the selection checkbox. */
+    SelectionToggle = new EventEmitter();
+    /** A click on Edit. */
+    Edit = new EventEmitter();
+    /** A click on Delete. */
+    Delete = new EventEmitter();
+    layoutPreview = new LayoutPreviewCache();
+    /** The miniature of the saved panel layout: a Config dashboard's saved panels, else null. */
+    get LayoutPreview() {
+        return this.layoutPreview.PreviewFor(this.Dashboard);
+    }
+    /** True for a Config dashboard with no parts. Uses the cached preview, so the JSON is parsed once. */
+    get IsNotSetUp() {
+        return this.Dashboard.Type === 'Config' && this.LayoutPreview === null;
+    }
+    /** The name, with the search text marked. */
+    get NameHtml() {
+        return HighlightSearchMatches(this.Dashboard.Name ?? '', this.HighlightQuery);
+    }
+    /** The description, with the search text marked. */
+    get DescriptionHtml() {
+        return HighlightSearchMatches(this.Dashboard.Description ?? '', this.HighlightQuery);
+    }
+    /** When the dashboard was last updated, for example "Yesterday". Empty without a date. */
+    get UpdatedLabel() {
+        return FormatDashboardDate(this.Dashboard.__mj_UpdatedAt);
+    }
+    OnCardClick(event) {
+        this.CardClick.emit({ Dashboard: this.Dashboard, MouseEvent: event });
+    }
+    OnCardDoubleClick(event) {
+        this.CardDoubleClick.emit({ Dashboard: this.Dashboard, MouseEvent: event });
+    }
+    /** Runs a card button's action without the click also counting as a click on the card. */
+    OnAction(event, action) {
+        event.stopPropagation();
+        action.emit(this.Dashboard);
+    }
+    static ɵfac = function DashboardCardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || DashboardCardComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DashboardCardComponent, selectors: [["mj-dashboard-card"]], inputs: { Dashboard: "Dashboard", IsFavorite: "IsFavorite", ShowFavorite: "ShowFavorite", IsShared: "IsShared", OwnerLabel: "OwnerLabel", CategoryPath: "CategoryPath", HighlightQuery: "HighlightQuery", Selectable: "Selectable", Selected: "Selected", CanEdit: "CanEdit", CanDelete: "CanDelete" }, outputs: { CardClick: "CardClick", CardDoubleClick: "CardDoubleClick", ToggleFavorite: "ToggleFavorite", SelectionToggle: "SelectionToggle", Edit: "Edit", Delete: "Delete" }, standalone: false, decls: 19, vars: 14, consts: [[1, "dc-card", 3, "click", "dblclick"], ["aria-hidden", "true", 1, "dc-thumb"], [1, "dc-placeholder"], ["alt", "", "draggable", "false", 3, "src"], [3, "Preview"], [1, "dc-select"], [1, "dc-tools", 3, "dblclick"], ["type", "button", "title", "Edit", 1, "dc-tool", "dc-edit"], ["type", "button", "title", "Delete", 1, "dc-tool", "dc-delete"], ["type", "button", 1, "dc-tool", "dc-star", 3, "on"], [1, "dc-body"], ["type", "button", 1, "dc-name", 3, "innerHTML"], [1, "dc-desc", 3, "innerHTML"], [1, "dc-meta"], [1, "dc-owner"], ["title", "Shared with you", 1, "dc-shared"], [1, "dc-category"], ["title", "Last updated", 1, "dc-updated"], [1, "dc-icon-tile"], [1, "fa-solid", "fa-gauge-high"], [1, "dc-not-set-up"], [1, "dc-select", 3, "click", "dblclick"], ["type", "checkbox", 1, "mj-checkbox", 3, "change", "checked"], ["type", "button", "title", "Edit", 1, "dc-tool", "dc-edit", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-pen"], ["type", "button", "title", "Delete", 1, "dc-tool", "dc-delete", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-trash-can"], ["type", "button", 1, "dc-tool", "dc-star", 3, "click"], ["aria-hidden", "true"], ["aria-hidden", "true", 1, "fa-regular", "fa-user"], ["aria-hidden", "true", 1, "fa-solid", "fa-share-nodes"], ["aria-hidden", "true", 1, "fa-regular", "fa-clock"]], template: function DashboardCardComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "article", 0);
+            i0.ɵɵlistener("click", function DashboardCardComponent_Template_article_click_0_listener($event) { return ctx.OnCardClick($event); })("dblclick", function DashboardCardComponent_Template_article_dblclick_0_listener($event) { return ctx.OnCardDoubleClick($event); });
+            i0.ɵɵelementStart(1, "div", 1);
+            i0.ɵɵconditionalCreate(2, DashboardCardComponent_Conditional_2_Template, 5, 0, "span", 2)(3, DashboardCardComponent_Conditional_3_Template, 1, 1, "img", 3)(4, DashboardCardComponent_Conditional_4_Template, 1, 1, "mj-dashboard-layout-preview", 4)(5, DashboardCardComponent_Conditional_5_Template, 3, 0, "span", 2);
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(6, DashboardCardComponent_Conditional_6_Template, 2, 2, "label", 5);
+            i0.ɵɵelementStart(7, "div", 6);
+            i0.ɵɵlistener("dblclick", function DashboardCardComponent_Template_div_dblclick_7_listener($event) { return $event.stopPropagation(); });
+            i0.ɵɵconditionalCreate(8, DashboardCardComponent_Conditional_8_Template, 2, 1, "button", 7);
+            i0.ɵɵconditionalCreate(9, DashboardCardComponent_Conditional_9_Template, 2, 1, "button", 8);
+            i0.ɵɵconditionalCreate(10, DashboardCardComponent_Conditional_10_Template, 2, 6, "button", 9);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(11, "div", 10);
+            i0.ɵɵelement(12, "button", 11);
+            i0.ɵɵconditionalCreate(13, DashboardCardComponent_Conditional_13_Template, 1, 1, "p", 12);
+            i0.ɵɵelementStart(14, "div", 13);
+            i0.ɵɵconditionalCreate(15, DashboardCardComponent_Conditional_15_Template, 3, 1, "span", 14);
+            i0.ɵɵconditionalCreate(16, DashboardCardComponent_Conditional_16_Template, 3, 0, "span", 15);
+            i0.ɵɵconditionalCreate(17, DashboardCardComponent_Conditional_17_Template, 2, 1, "span", 16);
+            i0.ɵɵconditionalCreate(18, DashboardCardComponent_Conditional_18_Template, 3, 1, "span", 17);
+            i0.ɵɵelementEnd()()();
+        } if (rf & 2) {
+            let tmp_1_0;
+            i0.ɵɵclassProp("selected", ctx.Selected);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.IsNotSetUp ? 2 : ctx.Dashboard.Thumbnail ? 3 : (tmp_1_0 = ctx.LayoutPreview) ? 4 : 5, tmp_1_0);
+            i0.ɵɵadvance(4);
+            i0.ɵɵconditional(ctx.Selectable ? 6 : -1);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.CanEdit ? 8 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.CanDelete ? 9 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.ShowFavorite ? 10 : -1);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("innerHTML", ctx.NameHtml, i0.ɵɵsanitizeHtml);
+            i0.ɵɵattribute("aria-label", "Open " + ctx.Dashboard.Name);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.Dashboard.Description ? 13 : -1);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.OwnerLabel ? 15 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.IsShared ? 16 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.CategoryPath ? 17 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.UpdatedLabel ? 18 : -1);
+        } }, dependencies: [i1.DashboardLayoutPreviewComponent], styles: ["\n\n[_nghost-%COMP%] {\n    display: block;\n    min-width: 0;\n}\n\n.dc-card[_ngcontent-%COMP%] {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: var(--mj-radius-lg);\n    box-shadow: var(--mj-shadow-sm);\n    overflow: hidden;\n    cursor: pointer;\n    transition:\n        border-color var(--mj-transition-fast),\n        box-shadow var(--mj-transition-fast),\n        transform var(--mj-transition-fast);\n}\n\n.dc-card[_ngcontent-%COMP%]:hover {\n    border-color: var(--mj-border-strong);\n    box-shadow: var(--mj-shadow-md);\n    transform: translateY(-2px);\n}\n\n.dc-card[_ngcontent-%COMP%]:focus-within {\n    border-color: var(--mj-border-focus);\n}\n\n.dc-card.selected[_ngcontent-%COMP%] {\n    border-color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n\n.dc-thumb[_ngcontent-%COMP%] {\n    position: relative;\n    aspect-ratio: 16 / 9;\n    background: var(--mj-bg-surface-sunken);\n    border-bottom: 1px solid var(--mj-border-default);\n    overflow: hidden;\n}\n\n.dc-thumb[_ngcontent-%COMP%]   img[_ngcontent-%COMP%], \n.dc-thumb[_ngcontent-%COMP%]   mj-dashboard-layout-preview[_ngcontent-%COMP%] {\n    position: absolute;\n    inset: 0;\n}\n\n.dc-thumb[_ngcontent-%COMP%]   img[_ngcontent-%COMP%] {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    display: block;\n}\n\n.dc-placeholder[_ngcontent-%COMP%] {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: var(--mj-space-2);\n}\n\n.dc-icon-tile[_ngcontent-%COMP%] {\n    width: 52px;\n    height: 52px;\n    border-radius: var(--mj-radius-md);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n    font-size: 22px;\n}\n\n.dc-not-set-up[_ngcontent-%COMP%] {\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--mj-text-muted);\n}\n\n\n.dc-select[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 8px;\n    left: 8px;\n    z-index: 1;\n    display: flex;\n    padding: 6px;\n    border-radius: var(--mj-radius-md);\n    background: color-mix(in srgb, var(--mj-bg-surface) 92%, transparent);\n    border: 1px solid var(--mj-border-default);\n}\n\n\n.dc-tools[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 6px;\n    right: 6px;\n    z-index: 1;\n    display: flex;\n    gap: 4px;\n}\n\n.dc-tool[_ngcontent-%COMP%] {\n    width: 26px;\n    height: 26px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0;\n    border-radius: var(--mj-radius-sm);\n    border: 1px solid var(--mj-border-default);\n    background: color-mix(in srgb, var(--mj-bg-surface) 92%, transparent);\n    color: var(--mj-text-muted);\n    cursor: pointer;\n}\n\n.dc-tool[_ngcontent-%COMP%]:hover {\n    color: var(--mj-text-primary);\n}\n\n.dc-tool[_ngcontent-%COMP%]:focus-visible {\n    outline: var(--mj-ring-width) solid var(--mj-focus-ring-color);\n    outline-offset: var(--mj-ring-offset);\n}\n\n\n.dc-edit[_ngcontent-%COMP%], \n.dc-delete[_ngcontent-%COMP%] {\n    opacity: 0;\n    transition: opacity var(--mj-transition-fast);\n}\n\n.dc-card[_ngcontent-%COMP%]:hover   .dc-edit[_ngcontent-%COMP%], \n.dc-card[_ngcontent-%COMP%]:hover   .dc-delete[_ngcontent-%COMP%], \n.dc-card[_ngcontent-%COMP%]:focus-within   .dc-edit[_ngcontent-%COMP%], \n.dc-card[_ngcontent-%COMP%]:focus-within   .dc-delete[_ngcontent-%COMP%] {\n    opacity: 1;\n}\n\n@media (hover: none) {\n    .dc-edit[_ngcontent-%COMP%], \n   .dc-delete[_ngcontent-%COMP%] {\n        opacity: 1;\n    }\n}\n\n.dc-delete[_ngcontent-%COMP%]:hover {\n    color: var(--mj-status-error);\n}\n\n.dc-star.on[_ngcontent-%COMP%] {\n    color: var(--mj-status-warning);\n}\n\n\n.dc-body[_ngcontent-%COMP%] {\n    padding: 10px 12px 12px;\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n    min-width: 0;\n}\n\n.dc-name[_ngcontent-%COMP%] {\n    border: none;\n    background: none;\n    padding: 0;\n    text-align: left;\n    font: inherit;\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    cursor: pointer;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.dc-name[_ngcontent-%COMP%]:hover {\n    color: var(--mj-brand-primary);\n}\n\n.dc-name[_ngcontent-%COMP%]:focus-visible {\n    outline: var(--mj-ring-width) solid var(--mj-focus-ring-color);\n    outline-offset: var(--mj-ring-offset);\n    border-radius: var(--mj-radius-sm);\n}\n\n.dc-desc[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 12px;\n    color: var(--mj-text-muted);\n    line-height: 1.45;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n.dc-meta[_ngcontent-%COMP%] {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: 6px 10px;\n    font-size: 12px;\n    color: var(--mj-text-muted);\n}\n\n.dc-owner[_ngcontent-%COMP%], \n.dc-shared[_ngcontent-%COMP%], \n.dc-updated[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n}\n\n.dc-shared[_ngcontent-%COMP%] {\n    padding: 1px 8px;\n    border-radius: var(--mj-radius-full);\n    font-weight: 600;\n    color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.dc-category[_ngcontent-%COMP%] {\n    padding: 2px 8px;\n    border-radius: var(--mj-radius-full);\n    background: var(--mj-bg-surface-sunken);\n}\n\n\n[_nghost-%COMP%]     mark {\n    background: color-mix(in srgb, var(--mj-status-warning) 35%, transparent);\n    color: inherit;\n    border-radius: 2px;\n    padding: 0 1px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .dc-card[_ngcontent-%COMP%] {\n        transition: none;\n    }\n\n    .dc-card[_ngcontent-%COMP%]:hover {\n        transform: none;\n    }\n}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DashboardCardComponent, [{
+        type: Component,
+        args: [{ standalone: false, selector: 'mj-dashboard-card', template: "<article class=\"dc-card\" [class.selected]=\"Selected\" (click)=\"OnCardClick($event)\" (dblclick)=\"OnCardDoubleClick($event)\">\n  <div class=\"dc-thumb\" aria-hidden=\"true\">\n    @if (IsNotSetUp) {\n      <span class=\"dc-placeholder\">\n        <span class=\"dc-icon-tile\"><i class=\"fa-solid fa-gauge-high\"></i></span>\n        <span class=\"dc-not-set-up\">Not set up yet</span>\n      </span>\n    } @else if (Dashboard.Thumbnail) {\n      <img [src]=\"Dashboard.Thumbnail\" alt=\"\" draggable=\"false\" />\n    } @else if (LayoutPreview; as preview) {\n      <mj-dashboard-layout-preview [Preview]=\"preview\"></mj-dashboard-layout-preview>\n    } @else {\n      <span class=\"dc-placeholder\"><span class=\"dc-icon-tile\"><i class=\"fa-solid fa-gauge-high\"></i></span></span>\n    }\n  </div>\n  @if (Selectable) {\n    <label class=\"dc-select\" (click)=\"$event.stopPropagation()\" (dblclick)=\"$event.stopPropagation()\">\n      <input type=\"checkbox\" class=\"mj-checkbox\" [checked]=\"Selected\" [attr.aria-label]=\"'Select ' + Dashboard.Name\"\n        (change)=\"SelectionToggle.emit(Dashboard)\" />\n    </label>\n  }\n  <div class=\"dc-tools\" (dblclick)=\"$event.stopPropagation()\">\n    @if (CanEdit) {\n      <button type=\"button\" class=\"dc-tool dc-edit\" title=\"Edit\" [attr.aria-label]=\"'Edit ' + Dashboard.Name\" (click)=\"OnAction($event, Edit)\">\n        <i class=\"fa-solid fa-pen\" aria-hidden=\"true\"></i>\n      </button>\n    }\n    @if (CanDelete) {\n      <button type=\"button\" class=\"dc-tool dc-delete\" title=\"Delete\" [attr.aria-label]=\"'Delete ' + Dashboard.Name\" (click)=\"OnAction($event, Delete)\">\n        <i class=\"fa-solid fa-trash-can\" aria-hidden=\"true\"></i>\n      </button>\n    }\n    @if (ShowFavorite) {\n      <button type=\"button\" class=\"dc-tool dc-star\" [class.on]=\"IsFavorite\" [attr.aria-pressed]=\"IsFavorite ? 'true' : 'false'\"\n        [attr.aria-label]=\"'Favorite ' + Dashboard.Name\" (click)=\"OnAction($event, ToggleFavorite)\">\n        <i [class]=\"IsFavorite ? 'fa-solid fa-star' : 'fa-regular fa-star'\" aria-hidden=\"true\"></i>\n      </button>\n    }\n  </div>\n  <div class=\"dc-body\">\n    <button type=\"button\" class=\"dc-name\" [attr.aria-label]=\"'Open ' + Dashboard.Name\" [innerHTML]=\"NameHtml\"></button>\n    @if (Dashboard.Description) {\n      <p class=\"dc-desc\" [innerHTML]=\"DescriptionHtml\"></p>\n    }\n    <div class=\"dc-meta\">\n      @if (OwnerLabel) {\n        <span class=\"dc-owner\"><i class=\"fa-regular fa-user\" aria-hidden=\"true\"></i>{{ OwnerLabel }}</span>\n      }\n      @if (IsShared) {\n        <span class=\"dc-shared\" title=\"Shared with you\"><i class=\"fa-solid fa-share-nodes\" aria-hidden=\"true\"></i>Shared</span>\n      }\n      @if (CategoryPath) {\n        <span class=\"dc-category\">{{ CategoryPath }}</span>\n      }\n      @if (UpdatedLabel) {\n        <span class=\"dc-updated\" title=\"Last updated\"><i class=\"fa-regular fa-clock\" aria-hidden=\"true\"></i>{{ UpdatedLabel }}</span>\n      }\n    </div>\n  </div>\n</article>\n", styles: ["/* Dashboard card: picture, name, description, meta row */\n\n:host {\n    display: block;\n    min-width: 0;\n}\n\n.dc-card {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: var(--mj-radius-lg);\n    box-shadow: var(--mj-shadow-sm);\n    overflow: hidden;\n    cursor: pointer;\n    transition:\n        border-color var(--mj-transition-fast),\n        box-shadow var(--mj-transition-fast),\n        transform var(--mj-transition-fast);\n}\n\n.dc-card:hover {\n    border-color: var(--mj-border-strong);\n    box-shadow: var(--mj-shadow-md);\n    transform: translateY(-2px);\n}\n\n.dc-card:focus-within {\n    border-color: var(--mj-border-focus);\n}\n\n.dc-card.selected {\n    border-color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n/* Picture: the screenshot, the layout miniature or the placeholder fills the 16:9 area */\n.dc-thumb {\n    position: relative;\n    aspect-ratio: 16 / 9;\n    background: var(--mj-bg-surface-sunken);\n    border-bottom: 1px solid var(--mj-border-default);\n    overflow: hidden;\n}\n\n.dc-thumb img,\n.dc-thumb mj-dashboard-layout-preview {\n    position: absolute;\n    inset: 0;\n}\n\n.dc-thumb img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    display: block;\n}\n\n.dc-placeholder {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: var(--mj-space-2);\n}\n\n.dc-icon-tile {\n    width: 52px;\n    height: 52px;\n    border-radius: var(--mj-radius-md);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n    font-size: 22px;\n}\n\n.dc-not-set-up {\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--mj-text-muted);\n}\n\n/* Selection checkbox, top left */\n.dc-select {\n    position: absolute;\n    top: 8px;\n    left: 8px;\n    z-index: 1;\n    display: flex;\n    padding: 6px;\n    border-radius: var(--mj-radius-md);\n    background: color-mix(in srgb, var(--mj-bg-surface) 92%, transparent);\n    border: 1px solid var(--mj-border-default);\n}\n\n/* Edit, Delete and the star, top right */\n.dc-tools {\n    position: absolute;\n    top: 6px;\n    right: 6px;\n    z-index: 1;\n    display: flex;\n    gap: 4px;\n}\n\n.dc-tool {\n    width: 26px;\n    height: 26px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0;\n    border-radius: var(--mj-radius-sm);\n    border: 1px solid var(--mj-border-default);\n    background: color-mix(in srgb, var(--mj-bg-surface) 92%, transparent);\n    color: var(--mj-text-muted);\n    cursor: pointer;\n}\n\n.dc-tool:hover {\n    color: var(--mj-text-primary);\n}\n\n.dc-tool:focus-visible {\n    outline: var(--mj-ring-width) solid var(--mj-focus-ring-color);\n    outline-offset: var(--mj-ring-offset);\n}\n\n/* Edit and Delete show on hover or focus; on touch screens they always show */\n.dc-edit,\n.dc-delete {\n    opacity: 0;\n    transition: opacity var(--mj-transition-fast);\n}\n\n.dc-card:hover .dc-edit,\n.dc-card:hover .dc-delete,\n.dc-card:focus-within .dc-edit,\n.dc-card:focus-within .dc-delete {\n    opacity: 1;\n}\n\n@media (hover: none) {\n    .dc-edit,\n    .dc-delete {\n        opacity: 1;\n    }\n}\n\n.dc-delete:hover {\n    color: var(--mj-status-error);\n}\n\n.dc-star.on {\n    color: var(--mj-status-warning);\n}\n\n/* Name, description, meta row */\n.dc-body {\n    padding: 10px 12px 12px;\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n    min-width: 0;\n}\n\n.dc-name {\n    border: none;\n    background: none;\n    padding: 0;\n    text-align: left;\n    font: inherit;\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    cursor: pointer;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.dc-name:hover {\n    color: var(--mj-brand-primary);\n}\n\n.dc-name:focus-visible {\n    outline: var(--mj-ring-width) solid var(--mj-focus-ring-color);\n    outline-offset: var(--mj-ring-offset);\n    border-radius: var(--mj-radius-sm);\n}\n\n.dc-desc {\n    margin: 0;\n    font-size: 12px;\n    color: var(--mj-text-muted);\n    line-height: 1.45;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n.dc-meta {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: 6px 10px;\n    font-size: 12px;\n    color: var(--mj-text-muted);\n}\n\n.dc-owner,\n.dc-shared,\n.dc-updated {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n}\n\n.dc-shared {\n    padding: 1px 8px;\n    border-radius: var(--mj-radius-full);\n    font-weight: 600;\n    color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.dc-category {\n    padding: 2px 8px;\n    border-radius: var(--mj-radius-full);\n    background: var(--mj-bg-surface-sunken);\n}\n\n/* Search marks come from innerHTML and get no _ngcontent attribute, so they are reached through ::ng-deep under the host */\n:host ::ng-deep mark {\n    background: color-mix(in srgb, var(--mj-status-warning) 35%, transparent);\n    color: inherit;\n    border-radius: 2px;\n    padding: 0 1px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .dc-card {\n        transition: none;\n    }\n\n    .dc-card:hover {\n        transform: none;\n    }\n}\n"] }]
+    }], null, { Dashboard: [{
+            type: Input,
+            args: [{ required: true }]
+        }], IsFavorite: [{
+            type: Input
+        }], ShowFavorite: [{
+            type: Input
+        }], IsShared: [{
+            type: Input
+        }], OwnerLabel: [{
+            type: Input
+        }], CategoryPath: [{
+            type: Input
+        }], HighlightQuery: [{
+            type: Input
+        }], Selectable: [{
+            type: Input
+        }], Selected: [{
+            type: Input
+        }], CanEdit: [{
+            type: Input
+        }], CanDelete: [{
+            type: Input
+        }], CardClick: [{
+            type: Output
+        }], CardDoubleClick: [{
+            type: Output
+        }], ToggleFavorite: [{
+            type: Output
+        }], SelectionToggle: [{
+            type: Output
+        }], Edit: [{
+            type: Output
+        }], Delete: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DashboardCardComponent, { className: "DashboardCardComponent", filePath: "src/lib/dashboard-card/dashboard-card.component.ts", lineNumber: 27 }); })();
+//# sourceMappingURL=dashboard-card.component.js.map

package/dist/lib/dashboard-card/dashboard-card.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dashboard-card.component.js","sourceRoot":"","sources":["../../../src/lib/dashboard-card/dashboard-card.component.ts","../../../src/lib/dashboard-card/dashboard-card.component.html"],"names":[],"mappings":"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","sourcesContent":["import { Component, EventEmitter, Input, Output } from '@angular/core';\nimport type { MJDashboardEntity } from '@memberjunction/core-entities';\nimport { HighlightSearchMatches } from '@memberjunction/global';\nimport type { DashboardLayoutPreviewNode } from '../layout-preview/dashboard-layout-preview';\nimport { FormatDashboardDate } from './dashboard-card.helpers';\nimport { LayoutPreviewCache } from './layout-preview-cache';\n\n/** A click on a dashboard card outside its buttons. */\nexport interface DashboardCardClickEvent {\n    Dashboard: MJDashboardEntity;\n    /** The click; the host reads its Shift, Ctrl and Cmd keys. */\n    MouseEvent: MouseEvent;\n}\n\n/**\n * A dashboard card: a picture, the name, the description, and a meta row with the owner, a Shared\n * marker, the category and the last update. The picture is the screenshot (Thumbnail), else a\n * miniature of the saved panel layout, else an icon. A Config dashboard with no parts shows the icon\n * and \"Not set up yet\". Presentational: the host decides what each event does.\n */\n@Component({\n    standalone: false,\n    selector: 'mj-dashboard-card',\n    templateUrl: './dashboard-card.component.html',\n    styleUrls: ['./dashboard-card.component.css'],\n})\nexport class DashboardCardComponent {\n    @Input({ required: true }) Dashboard!: MJDashboardEntity;\n    /** True when the dashboard is one of the user's favorites: the star is filled. */\n    @Input() IsFavorite = false;\n    /** Whether the card shows the favorite star. */\n    @Input() ShowFavorite = true;\n    /** True when another user owns the dashboard and shared it with this user. */\n    @Input() IsShared = false;\n    /** Who owns the dashboard, for example \"You\" or \"Ana Ruiz\". Null shows no owner. */\n    @Input() OwnerLabel: string | null = null;\n    /** The category path, for example \"Sales › Pipeline\". Null shows no category. */\n    @Input() CategoryPath: string | null = null;\n    /** Search text to mark in the name and description. */\n    @Input() HighlightQuery = '';\n    /** True in selection mode: the card shows a checkbox. */\n    @Input() Selectable = false;\n    /** True when the card is selected. */\n    @Input() Selected = false;\n    /** Whether the card offers Edit. */\n    @Input() CanEdit = false;\n    /** Whether the card offers Delete. */\n    @Input() CanDelete = false;\n\n    /** A click on the card outside its buttons. */\n    @Output() CardClick = new EventEmitter<DashboardCardClickEvent>();\n    /** A double-click on the card outside its buttons. */\n    @Output() CardDoubleClick = new EventEmitter<DashboardCardClickEvent>();\n    /** A click on the star. */\n    @Output() ToggleFavorite = new EventEmitter<MJDashboardEntity>();\n    /** A change of the selection checkbox. */\n    @Output() SelectionToggle = new EventEmitter<MJDashboardEntity>();\n    /** A click on Edit. */\n    @Output() Edit = new EventEmitter<MJDashboardEntity>();\n    /** A click on Delete. */\n    @Output() Delete = new EventEmitter<MJDashboardEntity>();\n\n    private layoutPreview = new LayoutPreviewCache();\n\n    /** The miniature of the saved panel layout: a Config dashboard's saved panels, else null. */\n    public get LayoutPreview(): DashboardLayoutPreviewNode | null {\n        return this.layoutPreview.PreviewFor(this.Dashboard);\n    }\n\n    /** True for a Config dashboard with no parts. Uses the cached preview, so the JSON is parsed once. */\n    public get IsNotSetUp(): boolean {\n        return this.Dashboard.Type === 'Config' && this.LayoutPreview === null;\n    }\n\n    /** The name, with the search text marked. */\n    public get NameHtml(): string {\n        return HighlightSearchMatches(this.Dashboard.Name ?? '', this.HighlightQuery);\n    }\n\n    /** The description, with the search text marked. */\n    public get DescriptionHtml(): string {\n        return HighlightSearchMatches(this.Dashboard.Description ?? '', this.HighlightQuery);\n    }\n\n    /** When the dashboard was last updated, for example \"Yesterday\". Empty without a date. */\n    public get UpdatedLabel(): string {\n        return FormatDashboardDate(this.Dashboard.__mj_UpdatedAt);\n    }\n\n    public OnCardClick(event: MouseEvent): void {\n        this.CardClick.emit({ Dashboard: this.Dashboard, MouseEvent: event });\n    }\n\n    public OnCardDoubleClick(event: MouseEvent): void {\n        this.CardDoubleClick.emit({ Dashboard: this.Dashboard, MouseEvent: event });\n    }\n\n    /** Runs a card button's action without the click also counting as a click on the card. */\n    public OnAction(event: Event, action: EventEmitter<MJDashboardEntity>): void {\n        event.stopPropagation();\n        action.emit(this.Dashboard);\n    }\n}\n","<article class=\"dc-card\" [class.selected]=\"Selected\" (click)=\"OnCardClick($event)\" (dblclick)=\"OnCardDoubleClick($event)\">\n  <div class=\"dc-thumb\" aria-hidden=\"true\">\n    @if (IsNotSetUp) {\n      <span class=\"dc-placeholder\">\n        <span class=\"dc-icon-tile\"><i class=\"fa-solid fa-gauge-high\"></i></span>\n        <span class=\"dc-not-set-up\">Not set up yet</span>\n      </span>\n    } @else if (Dashboard.Thumbnail) {\n      <img [src]=\"Dashboard.Thumbnail\" alt=\"\" draggable=\"false\" />\n    } @else if (LayoutPreview; as preview) {\n      <mj-dashboard-layout-preview [Preview]=\"preview\"></mj-dashboard-layout-preview>\n    } @else {\n      <span class=\"dc-placeholder\"><span class=\"dc-icon-tile\"><i class=\"fa-solid fa-gauge-high\"></i></span></span>\n    }\n  </div>\n  @if (Selectable) {\n    <label class=\"dc-select\" (click)=\"$event.stopPropagation()\" (dblclick)=\"$event.stopPropagation()\">\n      <input type=\"checkbox\" class=\"mj-checkbox\" [checked]=\"Selected\" [attr.aria-label]=\"'Select ' + Dashboard.Name\"\n        (change)=\"SelectionToggle.emit(Dashboard)\" />\n    </label>\n  }\n  <div class=\"dc-tools\" (dblclick)=\"$event.stopPropagation()\">\n    @if (CanEdit) {\n      <button type=\"button\" class=\"dc-tool dc-edit\" title=\"Edit\" [attr.aria-label]=\"'Edit ' + Dashboard.Name\" (click)=\"OnAction($event, Edit)\">\n        <i class=\"fa-solid fa-pen\" aria-hidden=\"true\"></i>\n      </button>\n    }\n    @if (CanDelete) {\n      <button type=\"button\" class=\"dc-tool dc-delete\" title=\"Delete\" [attr.aria-label]=\"'Delete ' + Dashboard.Name\" (click)=\"OnAction($event, Delete)\">\n        <i class=\"fa-solid fa-trash-can\" aria-hidden=\"true\"></i>\n      </button>\n    }\n    @if (ShowFavorite) {\n      <button type=\"button\" class=\"dc-tool dc-star\" [class.on]=\"IsFavorite\" [attr.aria-pressed]=\"IsFavorite ? 'true' : 'false'\"\n        [attr.aria-label]=\"'Favorite ' + Dashboard.Name\" (click)=\"OnAction($event, ToggleFavorite)\">\n        <i [class]=\"IsFavorite ? 'fa-solid fa-star' : 'fa-regular fa-star'\" aria-hidden=\"true\"></i>\n      </button>\n    }\n  </div>\n  <div class=\"dc-body\">\n    <button type=\"button\" class=\"dc-name\" [attr.aria-label]=\"'Open ' + Dashboard.Name\" [innerHTML]=\"NameHtml\"></button>\n    @if (Dashboard.Description) {\n      <p class=\"dc-desc\" [innerHTML]=\"DescriptionHtml\"></p>\n    }\n    <div class=\"dc-meta\">\n      @if (OwnerLabel) {\n        <span class=\"dc-owner\"><i class=\"fa-regular fa-user\" aria-hidden=\"true\"></i>{{ OwnerLabel }}</span>\n      }\n      @if (IsShared) {\n        <span class=\"dc-shared\" title=\"Shared with you\"><i class=\"fa-solid fa-share-nodes\" aria-hidden=\"true\"></i>Shared</span>\n      }\n      @if (CategoryPath) {\n        <span class=\"dc-category\">{{ CategoryPath }}</span>\n      }\n      @if (UpdatedLabel) {\n        <span class=\"dc-updated\" title=\"Last updated\"><i class=\"fa-regular fa-clock\" aria-hidden=\"true\"></i>{{ UpdatedLabel }}</span>\n      }\n    </div>\n  </div>\n</article>\n"]}

package/dist/lib/dashboard-card/dashboard-card.helpers.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @fileoverview Pure helpers for dashboard cards and the dashboard browser: whether a dashboard has
+ * no parts yet, how a last update reads, and a category's path.
+ */
+import type { MJDashboardCategoryEntity, MJDashboardEntity } from '@memberjunction/core-entities';
+/** True for a Config dashboard whose saved configuration has no panel layout: it has no parts yet. */
+export declare function IsDashboardNotSetUp(dashboard: Pick<MJDashboardEntity, 'Type' | 'UIConfigDetails'>): boolean;
+/**
+ * "Today", "Yesterday", "N days ago" (under a week), else the local date. A date later than `now`
+ * reads "Today". Empty for no date.
+ */
+export declare function FormatDashboardDate(date: Date | null | undefined, now?: Date): string;
+/**
+ * The category names from the top category down to `categoryId`, joined with " › ". Null when
+ * `categoryId` is empty or not in `categories`. Stops at a category it has already visited.
+ */
+export declare function DashboardCategoryPath(categoryId: string | null, categories: readonly MJDashboardCategoryEntity[]): string | null;
+//# sourceMappingURL=dashboard-card.helpers.d.ts.map

package/dist/lib/dashboard-card/dashboard-card.helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dashboard-card.helpers.d.ts","sourceRoot":"","sources":["../../../src/lib/dashboard-card/dashboard-card.helpers.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,EAAE,yBAAyB,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AASlG,sGAAsG;AACtG,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,iBAAiB,EAAE,MAAM,GAAG,iBAAiB,CAAC,GAAG,OAAO,CAE3G;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,SAAS,EAAE,GAAG,GAAE,IAAiB,GAAG,MAAM,CAQjG;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI,EAAE,UAAU,EAAE,SAAS,yBAAyB,EAAE,GAAG,MAAM,GAAG,IAAI,CAWhI"}

package/dist/lib/dashboard-card/dashboard-card.helpers.js

@@ -0,0 +1,43 @@
+import { UUIDsEqual } from '@memberjunction/global';
+import { BuildDashboardLayoutPreview } from '../layout-preview/dashboard-layout-preview';
+/** Separator between category names in a category path. */
+const CATEGORY_PATH_SEPARATOR = ' › ';
+const DAY_MS = 24 * 60 * 60 * 1000;
+/** True for a Config dashboard whose saved configuration has no panel layout: it has no parts yet. */
+export function IsDashboardNotSetUp(dashboard) {
+    return dashboard.Type === 'Config' && BuildDashboardLayoutPreview(dashboard.UIConfigDetails) === null;
+}
+/**
+ * "Today", "Yesterday", "N days ago" (under a week), else the local date. A date later than `now`
+ * reads "Today". Empty for no date.
+ */
+export function FormatDashboardDate(date, now = new Date()) {
+    if (!date)
+        return '';
+    const d = new Date(date);
+    const diffDays = Math.floor((now.getTime() - d.getTime()) / DAY_MS);
+    if (diffDays <= 0)
+        return 'Today';
+    if (diffDays === 1)
+        return 'Yesterday';
+    if (diffDays < 7)
+        return `${diffDays} days ago`;
+    return d.toLocaleDateString();
+}
+/**
+ * The category names from the top category down to `categoryId`, joined with " › ". Null when
+ * `categoryId` is empty or not in `categories`. Stops at a category it has already visited.
+ */
+export function DashboardCategoryPath(categoryId, categories) {
+    const names = [];
+    const visited = new Set();
+    let current = categoryId ? categories.find(c => UUIDsEqual(c.ID, categoryId)) : undefined;
+    while (current && !visited.has(current)) {
+        visited.add(current);
+        names.unshift(current.Name);
+        const parentId = current.ParentID;
+        current = parentId ? categories.find(c => UUIDsEqual(c.ID, parentId)) : undefined;
+    }
+    return names.length ? names.join(CATEGORY_PATH_SEPARATOR) : null;
+}
+//# sourceMappingURL=dashboard-card.helpers.js.map

package/dist/lib/dashboard-card/dashboard-card.helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dashboard-card.helpers.js","sourceRoot":"","sources":["../../../src/lib/dashboard-card/dashboard-card.helpers.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,2BAA2B,EAAE,MAAM,4CAA4C,CAAC;AAEzF,2DAA2D;AAC3D,MAAM,uBAAuB,GAAG,KAAK,CAAC;AAEtC,MAAM,MAAM,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC;AAEnC,sGAAsG;AACtG,MAAM,UAAU,mBAAmB,CAAC,SAA8D;IAC9F,OAAO,SAAS,CAAC,IAAI,KAAK,QAAQ,IAAI,2BAA2B,CAAC,SAAS,CAAC,eAAe,CAAC,KAAK,IAAI,CAAC;AAC1G,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,mBAAmB,CAAC,IAA6B,EAAE,MAAY,IAAI,IAAI,EAAE;IACrF,IAAI,CAAC,IAAI;QAAE,OAAO,EAAE,CAAC;IACrB,MAAM,CAAC,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC;IACzB,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,OAAO,EAAE,CAAC,GAAG,MAAM,CAAC,CAAC;IACpE,IAAI,QAAQ,IAAI,CAAC;QAAE,OAAO,OAAO,CAAC;IAClC,IAAI,QAAQ,KAAK,CAAC;QAAE,OAAO,WAAW,CAAC;IACvC,IAAI,QAAQ,GAAG,CAAC;QAAE,OAAO,GAAG,QAAQ,WAAW,CAAC;IAChD,OAAO,CAAC,CAAC,kBAAkB,EAAE,CAAC;AAClC,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,qBAAqB,CAAC,UAAyB,EAAE,UAAgD;IAC7G,MAAM,KAAK,GAAa,EAAE,CAAC;IAC3B,MAAM,OAAO,GAAG,IAAI,GAAG,EAA6B,CAAC;IACrD,IAAI,OAAO,GAAG,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAC1F,OAAO,OAAO,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;QACtC,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;QACrB,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QAC5B,MAAM,QAAQ,GAAG,OAAO,CAAC,QAAQ,CAAC;QAClC,OAAO,GAAG,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IACtF,CAAC;IACD,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;AACrE,CAAC","sourcesContent":["/**\n * @fileoverview Pure helpers for dashboard cards and the dashboard browser: whether a dashboard has\n * no parts yet, how a last update reads, and a category's path.\n */\nimport type { MJDashboardCategoryEntity, MJDashboardEntity } from '@memberjunction/core-entities';\nimport { UUIDsEqual } from '@memberjunction/global';\nimport { BuildDashboardLayoutPreview } from '../layout-preview/dashboard-layout-preview';\n\n/** Separator between category names in a category path. */\nconst CATEGORY_PATH_SEPARATOR = ' › ';\n\nconst DAY_MS = 24 * 60 * 60 * 1000;\n\n/** True for a Config dashboard whose saved configuration has no panel layout: it has no parts yet. */\nexport function IsDashboardNotSetUp(dashboard: Pick<MJDashboardEntity, 'Type' | 'UIConfigDetails'>): boolean {\n    return dashboard.Type === 'Config' && BuildDashboardLayoutPreview(dashboard.UIConfigDetails) === null;\n}\n\n/**\n * \"Today\", \"Yesterday\", \"N days ago\" (under a week), else the local date. A date later than `now`\n * reads \"Today\". Empty for no date.\n */\nexport function FormatDashboardDate(date: Date | null | undefined, now: Date = new Date()): string {\n    if (!date) return '';\n    const d = new Date(date);\n    const diffDays = Math.floor((now.getTime() - d.getTime()) / DAY_MS);\n    if (diffDays <= 0) return 'Today';\n    if (diffDays === 1) return 'Yesterday';\n    if (diffDays < 7) return `${diffDays} days ago`;\n    return d.toLocaleDateString();\n}\n\n/**\n * The category names from the top category down to `categoryId`, joined with \" › \". Null when\n * `categoryId` is empty or not in `categories`. Stops at a category it has already visited.\n */\nexport function DashboardCategoryPath(categoryId: string | null, categories: readonly MJDashboardCategoryEntity[]): string | null {\n    const names: string[] = [];\n    const visited = new Set<MJDashboardCategoryEntity>();\n    let current = categoryId ? categories.find(c => UUIDsEqual(c.ID, categoryId)) : undefined;\n    while (current && !visited.has(current)) {\n        visited.add(current);\n        names.unshift(current.Name);\n        const parentId = current.ParentID;\n        current = parentId ? categories.find(c => UUIDsEqual(c.ID, parentId)) : undefined;\n    }\n    return names.length ? names.join(CATEGORY_PATH_SEPARATOR) : null;\n}\n"]}

package/dist/lib/dashboard-card/layout-preview-cache.d.ts

@@ -0,0 +1,15 @@
+import type { MJDashboardEntity } from '@memberjunction/core-entities';
+import { DashboardLayoutPreviewNode } from '../layout-preview/dashboard-layout-preview';
+/**
+ * The layout preview a dashboard card draws: the tree of a Config dashboard's saved panel layout,
+ * or null (a Code dashboard, or no panels). It builds the tree again only when the saved
+ * configuration or the type changes, so a template can ask on every change detection, also after
+ * the same dashboard object is saved again, and the preview gets the same tree until then.
+ */
+export declare class LayoutPreviewCache {
+    private checkedDetails;
+    private checkedType;
+    private preview;
+    PreviewFor(dashboard: Pick<MJDashboardEntity, 'Type' | 'UIConfigDetails'>): DashboardLayoutPreviewNode | null;
+}
+//# sourceMappingURL=layout-preview-cache.d.ts.map

package/dist/lib/dashboard-card/layout-preview-cache.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout-preview-cache.d.ts","sourceRoot":"","sources":["../../../src/lib/dashboard-card/layout-preview-cache.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AACvE,OAAO,EAA+B,0BAA0B,EAAE,MAAM,4CAA4C,CAAC;AAErH;;;;;GAKG;AACH,qBAAa,kBAAkB;IAC3B,OAAO,CAAC,cAAc,CAAuB;IAC7C,OAAO,CAAC,WAAW,CAA0C;IAC7D,OAAO,CAAC,OAAO,CAA2C;IAEnD,UAAU,CAAC,SAAS,EAAE,IAAI,CAAC,iBAAiB,EAAE,MAAM,GAAG,iBAAiB,CAAC,GAAG,0BAA0B,GAAG,IAAI;CASvH"}

package/dist/lib/dashboard-card/layout-preview-cache.js

@@ -0,0 +1,22 @@
+import { BuildDashboardLayoutPreview } from '../layout-preview/dashboard-layout-preview';
+/**
+ * The layout preview a dashboard card draws: the tree of a Config dashboard's saved panel layout,
+ * or null (a Code dashboard, or no panels). It builds the tree again only when the saved
+ * configuration or the type changes, so a template can ask on every change detection, also after
+ * the same dashboard object is saved again, and the preview gets the same tree until then.
+ */
+export class LayoutPreviewCache {
+    checkedDetails = null;
+    checkedType = null;
+    preview = null;
+    PreviewFor(dashboard) {
+        const details = dashboard.UIConfigDetails ?? null;
+        if (details !== this.checkedDetails || dashboard.Type !== this.checkedType) {
+            this.checkedDetails = details;
+            this.checkedType = dashboard.Type;
+            this.preview = dashboard.Type === 'Config' ? BuildDashboardLayoutPreview(details) : null;
+        }
+        return this.preview;
+    }
+}
+//# sourceMappingURL=layout-preview-cache.js.map

package/dist/lib/dashboard-card/layout-preview-cache.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout-preview-cache.js","sourceRoot":"","sources":["../../../src/lib/dashboard-card/layout-preview-cache.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,2BAA2B,EAA8B,MAAM,4CAA4C,CAAC;AAErH;;;;;GAKG;AACH,MAAM,OAAO,kBAAkB;IACnB,cAAc,GAAkB,IAAI,CAAC;IACrC,WAAW,GAAqC,IAAI,CAAC;IACrD,OAAO,GAAsC,IAAI,CAAC;IAEnD,UAAU,CAAC,SAA8D;QAC5E,MAAM,OAAO,GAAG,SAAS,CAAC,eAAe,IAAI,IAAI,CAAC;QAClD,IAAI,OAAO,KAAK,IAAI,CAAC,cAAc,IAAI,SAAS,CAAC,IAAI,KAAK,IAAI,CAAC,WAAW,EAAE,CAAC;YACzE,IAAI,CAAC,cAAc,GAAG,OAAO,CAAC;YAC9B,IAAI,CAAC,WAAW,GAAG,SAAS,CAAC,IAAI,CAAC;YAClC,IAAI,CAAC,OAAO,GAAG,SAAS,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,2BAA2B,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QAC7F,CAAC;QACD,OAAO,IAAI,CAAC,OAAO,CAAC;IACxB,CAAC;CACJ","sourcesContent":["import type { MJDashboardEntity } from '@memberjunction/core-entities';\nimport { BuildDashboardLayoutPreview, DashboardLayoutPreviewNode } from '../layout-preview/dashboard-layout-preview';\n\n/**\n * The layout preview a dashboard card draws: the tree of a Config dashboard's saved panel layout,\n * or null (a Code dashboard, or no panels). It builds the tree again only when the saved\n * configuration or the type changes, so a template can ask on every change detection, also after\n * the same dashboard object is saved again, and the preview gets the same tree until then.\n */\nexport class LayoutPreviewCache {\n    private checkedDetails: string | null = null;\n    private checkedType: MJDashboardEntity['Type'] | null = null;\n    private preview: DashboardLayoutPreviewNode | null = null;\n\n    public PreviewFor(dashboard: Pick<MJDashboardEntity, 'Type' | 'UIConfigDetails'>): DashboardLayoutPreviewNode | null {\n        const details = dashboard.UIConfigDetails ?? null;\n        if (details !== this.checkedDetails || dashboard.Type !== this.checkedType) {\n            this.checkedDetails = details;\n            this.checkedType = dashboard.Type;\n            this.preview = dashboard.Type === 'Config' ? BuildDashboardLayoutPreview(details) : null;\n        }\n        return this.preview;\n    }\n}\n"]}