@masterteam/client-components 0.0.84 → 0.0.85
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1618,7 +1618,7 @@ class ClientListCardsView {
|
|
|
1618
1618
|
});
|
|
1619
1619
|
}
|
|
1620
1620
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ClientListCardsView, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1621
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: ClientListCardsView, isStandalone: true, selector: "mt-client-list-cards-view", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: true, transformFunction: null }, rowActions: { classPropertyName: "rowActions", publicName: "rowActions", isSignal: true, isRequired: false, transformFunction: null }, rowActionsLoadingFn: { classPropertyName: "rowActionsLoadingFn", publicName: "rowActionsLoadingFn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { lazyLoad: "lazyLoad", loadMore: "loadMore", cardClick: "cardClick", rowActionsRequested: "rowActionsRequested" }, providers: [MTDateFormatPipe], viewQueries: [{ propertyName: "loadMoreSentinel", first: true, predicate: ["loadMoreSentinel"], descendants: true, isSignal: true }], ngImport: i0, template: "<mt-table-caption\n [generalSearch]=\"true\"\n [showFilters]=\"true\"\n filterMode=\"popover\"\n [printable]=\"true\"\n [groupable]=\"true\"\n [exportable]=\"true\"\n [columns]=\"columns()\"\n [data]=\"rowRepresentations()\"\n [groupColumns]=\"grouping.groupableColumns()\"\n [actions]=\"toolbarActions()\"\n [captionStart]=\"cardsState().config.toolbarStart ?? null\"\n [captionEnd]=\"cardsState().config.toolbarEnd ?? null\"\n [filters]=\"bucket().filters()\"\n (filtersChange)=\"bucket().filters.set($event)\"\n [filterTerm]=\"bucket().filterTerm()\"\n (filterTermChange)=\"bucket().filterTerm.set($event)\"\n [groupBy]=\"bucket().groupBy()\"\n (groupByChange)=\"bucket().groupBy.set($event)\"\n [activeTab]=\"bucket().activeTab()\"\n (activeTabChange)=\"bucket().activeTab.set($event)\"\n (exportRequested)=\"exportExcel()\"\n (printRequested)=\"printPdf()\"\n/>\n\n@if (badgeLegend().length > 0) {\n <!--\n Decodes the coloured count pills on the cards below. Rendered once for the\n whole board rather than per card, so it costs one line of vertical space\n instead of repeating a key inside every tile (finding M-04).\n -->\n <div\n class=\"mb-3 flex flex-wrap items-center gap-x-4 gap-y-2 px-1\"\n role=\"list\"\n [attr.aria-label]=\"\n 'components.clientComponents.list.badgeLegend' | transloco\n \"\n >\n <span class=\"text-xs font-medium text-gray-500 dark:text-gray-400\">\n {{ \"components.clientComponents.list.badgeLegend\" | transloco }}\n </span>\n @for (entry of badgeLegend(); track entry.key) {\n <span class=\"flex items-center gap-1.5\" role=\"listitem\">\n <span\n class=\"inline-flex h-4 min-w-4 items-center justify-center rounded text-[10px] font-bold\"\n [style.background-color]=\"entry.color\"\n [style.color]=\"entry.textColor\"\n aria-hidden=\"true\"\n >\n #\n </span>\n <span class=\"text-xs text-gray-600 dark:text-gray-300\">{{\n entry.label\n }}</span>\n </span>\n }\n </div>\n}\n\n@if (cardsState().loading && cardsState().cards.length === 0) {\n <div class=\"mt-cards-grid\">\n @for (i of [1, 2, 3, 4, 5, 6]; track i) {\n <p-skeleton height=\"20rem\" class=\"rounded-lg\" />\n }\n </div>\n} @else if (cardsState().error) {\n <div class=\"rounded-lg border border-red-200 bg-red-50 p-6 text-red-600\">\n {{ cardsState().error }}\n </div>\n} @else if (visibleCards().length === 0) {\n <!--\n The same empty state the tables use, so a board and a list stop looking like\n two products (finding H-12). A board narrowed by a search or a filter says\n so and offers to clear it, instead of the bare grey \"No cards found.\"\n -->\n <mt-empty-state\n [variant]=\"hasActiveCardFilters() ? 'filtered' : 'empty'\"\n [title]=\"\n hasActiveCardFilters()\n ? ''\n : ('components.clientComponents.list.noCardsFound' | transloco)\n \"\n [actionLabel]=\"\n hasActiveCardFilters()\n ? ('components.emptyState.clearFilters' | transloco)\n : ''\n \"\n actionIcon=\"general.x-close\"\n (actionClick)=\"clearCardFilters()\"\n />\n} @else if (grouping.groupingActive()) {\n <div class=\"flex flex-col gap-6\">\n @for (group of groupedCards(); track group.key) {\n <section class=\"flex flex-col gap-3\">\n <header\n class=\"flex items-center gap-3 px-2 py-2 bg-surface-50 dark:bg-surface-900 border-y border-surface-200 dark:border-surface-700 rounded\"\n [style.--mt-group-accent]=\"group.accent ?? 'var(--p-primary-color)'\"\n >\n <span\n class=\"inline-block w-1 h-5 rounded-full\"\n [style.background]=\"'var(--mt-group-accent)'\"\n ></span>\n <span\n class=\"text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400\"\n >\n {{ group.columnLabel }}\n </span>\n <span class=\"text-sm font-semibold text-gray-900 dark:text-gray-100\">\n {{ group.label }}\n </span>\n <span\n class=\"ml-auto inline-flex items-center gap-1 text-xs px-2 py-0.5 rounded-full bg-primary-50 text-primary-700 dark:bg-primary-950 dark:text-primary-300\"\n >\n {{ group.count }}\n </span>\n </header>\n <div class=\"mt-cards-grid\">\n @for (card of group.cards; track card.id) {\n <mt-card\n class=\"relative cursor-pointer p-5 shadow-sm transition-shadow hover:shadow-md\"\n (click)=\"cardClick.emit(card)\"\n >\n <ng-template #headless>\n <ng-container\n [ngTemplateOutlet]=\"cardActionsMenu\"\n [ngTemplateOutletContext]=\"{ $implicit: card }\"\n />\n <mt-entities-preview\n [entities]=\"card.entities\"\n attachmentShape=\"compact\"\n [stackOnNarrow]=\"false\"\n [clickableKeys]=\"clickableEntityKeys()\"\n [activeKeys]=\"activeKeysForCard(card)\"\n [clickableTooltip]=\"filterByThisLabel()\"\n [activeTooltip]=\"clearFilterLabel()\"\n (entityClick)=\"onEntityFilterClick(card, $event)\"\n />\n </ng-template>\n </mt-card>\n }\n </div>\n </section>\n }\n </div>\n} @else {\n <div class=\"mt-cards-grid\">\n @for (card of visibleCards(); track card.id) {\n @defer (on viewport) {\n <mt-card\n class=\"relative cursor-pointer p-5 shadow-sm transition-shadow hover:shadow-md\"\n (click)=\"cardClick.emit(card)\"\n >\n <ng-template #headless>\n <ng-container\n [ngTemplateOutlet]=\"cardActionsMenu\"\n [ngTemplateOutletContext]=\"{ $implicit: card }\"\n />\n <mt-entities-preview\n [entities]=\"card.entities\"\n attachmentShape=\"compact\"\n [stackOnNarrow]=\"false\"\n [clickableKeys]=\"clickableEntityKeys()\"\n [activeKeys]=\"activeKeysForCard(card)\"\n [clickableTooltip]=\"filterByThisLabel()\"\n [activeTooltip]=\"clearFilterLabel()\"\n (entityClick)=\"onEntityFilterClick(card, $event)\"\n />\n </ng-template>\n </mt-card>\n } @placeholder {\n <div class=\"min-h-[20rem]\">\n <p-skeleton height=\"20rem\" class=\"rounded-lg\" />\n </div>\n }\n }\n </div>\n}\n\n<!--\n Infinite-scroll trigger. Deliberately outside the @if/@else chain above:\n inside it the element would be torn down and rebuilt every time the view\n swapped branch (error, empty filter result, group-by), and the observer\n would be left watching a detached node. Kept in the DOM and hidden via CSS\n when there is nothing left to load, so appending a page never recreates it.\n It also has to sit outside so infinite scroll keeps working while a\n group-by is active \u2014 grouping is a pure FE view over whatever has been\n fetched, not a reason to stop fetching.\n-->\n<div\n #loadMoreSentinel\n class=\"mt-cards-grid py-4\"\n [class.hidden]=\"!hasMoreCards()\"\n>\n @for (i of [1, 2, 3]; track i) {\n <p-skeleton height=\"20rem\" class=\"rounded-lg\" />\n }\n</div>\n\n<!--\n Per-card escalation marker and 3-dots actions menu. The compact corner cover\n only indicates active escalation state; its preview action lives in the menu\n so the marker never displaces or competes with the menu trigger.\n-->\n<ng-template #cardActionsMenu let-card>\n @let escalationAction = escalationMarkerAction(card);\n @if (escalationAction) {\n <span\n class=\"mt-escalation-marker absolute end-0 top-0 z-10 h-[18px] w-[20px]\"\n role=\"img\"\n tabindex=\"0\"\n [attr.aria-label]=\"escalationLabel()\"\n [mtTooltip]=\"escalationLabel()\"\n tooltipPosition=\"top\"\n ></span>\n }\n @if (rowActions().length > 0) {\n <div\n class=\"absolute end-2 top-2 z-20 flex items-center gap-1\"\n (click)=\"$event.stopPropagation()\"\n >\n @for (action of inlineActionsForCard(card); track $index) {\n <mt-button\n [icon]=\"action.icon\"\n [severity]=\"action.color\"\n [variant]=\"action.variant\"\n [size]=\"actionSize(action) || 'small'\"\n [tooltip]=\"action.tooltip\"\n [label]=\"action.label\"\n [loading]=\"resolveActionLoading(action, card)\"\n (onClick)=\"runCardAction($event, action, card)\"\n />\n }\n @if (showCardActionsMenu(card)) {\n <button\n type=\"button\"\n class=\"flex h-7 w-7 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent p-0 text-base text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 dark:text-gray-300 dark:hover:bg-surface-700 dark:hover:text-gray-100\"\n [attr.aria-label]=\"actionsLabel()\"\n [mtTooltip]=\"actionsLabel()\"\n tooltipPosition=\"top\"\n (click)=\"onCardActionsToggle($event, cardPopover, card)\"\n >\n <mt-icon icon=\"general.dots-vertical\" class=\"text-base\" />\n </button>\n <p-popover #cardPopover appendTo=\"body\">\n <div class=\"flex min-w-44 flex-col gap-1 p-1\">\n @if (isCardActionsLoading(card)) {\n <div class=\"flex flex-col gap-2 p-1\">\n <p-skeleton height=\"1.75rem\" />\n <p-skeleton height=\"1.75rem\" />\n <p-skeleton height=\"1.75rem\" />\n </div>\n } @else {\n @for (action of menuActionsForCard(card); track $index) {\n @if (isFirstDestructiveCardAction(card, $index)) {\n <hr\n class=\"my-1 border-0 border-t border-surface-200 dark:border-surface-700\"\n />\n }\n <button\n type=\"button\"\n class=\"flex cursor-pointer items-center gap-2 rounded px-2 py-2 text-start text-sm transition-colors\"\n [class]=\"\n action.color === 'danger'\n ? 'text-red-600 hover:bg-red-50 dark:hover:bg-red-950'\n : action.color === 'warn'\n ? 'text-orange-600 hover:bg-orange-50 dark:text-orange-400 dark:hover:bg-orange-950'\n : 'text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-surface-700'\n \"\n (click)=\"\n runCardAction($event, action, card); cardPopover.hide()\n \"\n >\n @if (action.icon) {\n <mt-icon [icon]=\"action.icon\" class=\"text-base\" />\n }\n <span>{{ action.label || action.tooltip }}</span>\n </button>\n }\n }\n </div>\n </p-popover>\n }\n </div>\n }\n</ng-template>\n", styles: [".mt-cards-grid{--mt-cards-gap: 1.25rem;--mt-cards-min: 380px;--mt-cards-track: max( var(--mt-cards-min), (100% - 4 * var(--mt-cards-gap)) / 5 );display:grid;gap:var(--mt-cards-gap);grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--mt-cards-track)),1fr))}.mt-cards-grid.hidden,.mt-cards-grid[hidden]{display:none}.mt-escalation-marker{border-start-end-radius:.5rem;background:var(--p-button-text-warn-color, var(--p-orange-500, #f59e0b));clip-path:polygon(0 0,100% 0,100% 100%);transition:filter .15s ease}.mt-escalation-marker:dir(rtl){clip-path:polygon(0 0,100% 0,0 100%)}.mt-escalation-marker:hover{filter:brightness(.92)}.mt-escalation-marker:focus-visible{filter:brightness(.92) drop-shadow(0 0 2px var(--p-button-text-warn-color, #f59e0b));outline:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: Tooltip, selector: "[mtTooltip]" }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "component", type: EntitiesPreview, selector: "mt-entities-preview", inputs: ["entities", "attachmentShape", "stackOnNarrow", "clickableKeys", "activeKeys", "clickableTooltip", "activeTooltip"], outputs: ["entityClick"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i2.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i3.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: TableCaption, selector: "mt-table-caption", inputs: ["generalSearch", "showFilters", "filterMode", "exportable", "printable", "groupable", "columns", "data", "groupColumns", "tabs", "tabsOptionLabel", "tabsOptionValue", "actions", "captionStart", "captionEnd", "activeTab", "filters", "filterTerm", "groupBy"], outputs: ["activeTabChange", "filtersChange", "filterTermChange", "groupByChange", "exportRequested", "printRequested", "onTabChange", "searchChange", "filterApplied", "filterReset"] }, { kind: "component", type: EmptyState, selector: "mt-empty-state", inputs: ["variant", "illustration", "title", "description", "actionLabel", "actionIcon"], outputs: ["actionClick"] }, { kind: "pipe", type: i4.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [i1.NgTemplateOutlet, Card,
|
|
1621
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: ClientListCardsView, isStandalone: true, selector: "mt-client-list-cards-view", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: true, transformFunction: null }, rowActions: { classPropertyName: "rowActions", publicName: "rowActions", isSignal: true, isRequired: false, transformFunction: null }, rowActionsLoadingFn: { classPropertyName: "rowActionsLoadingFn", publicName: "rowActionsLoadingFn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { lazyLoad: "lazyLoad", loadMore: "loadMore", cardClick: "cardClick", rowActionsRequested: "rowActionsRequested" }, providers: [MTDateFormatPipe], viewQueries: [{ propertyName: "loadMoreSentinel", first: true, predicate: ["loadMoreSentinel"], descendants: true, isSignal: true }], ngImport: i0, template: "<mt-table-caption\n [generalSearch]=\"true\"\n [showFilters]=\"true\"\n filterMode=\"popover\"\n [printable]=\"true\"\n [groupable]=\"true\"\n [exportable]=\"true\"\n [columns]=\"columns()\"\n [data]=\"rowRepresentations()\"\n [groupColumns]=\"grouping.groupableColumns()\"\n [actions]=\"toolbarActions()\"\n [captionStart]=\"cardsState().config.toolbarStart ?? null\"\n [captionEnd]=\"cardsState().config.toolbarEnd ?? null\"\n [filters]=\"bucket().filters()\"\n (filtersChange)=\"bucket().filters.set($event)\"\n [filterTerm]=\"bucket().filterTerm()\"\n (filterTermChange)=\"bucket().filterTerm.set($event)\"\n [groupBy]=\"bucket().groupBy()\"\n (groupByChange)=\"bucket().groupBy.set($event)\"\n [activeTab]=\"bucket().activeTab()\"\n (activeTabChange)=\"bucket().activeTab.set($event)\"\n (exportRequested)=\"exportExcel()\"\n (printRequested)=\"printPdf()\"\n/>\n\n@if (badgeLegend().length > 0) {\n <!--\n Decodes the coloured count pills on the cards below. Rendered once for the\n whole board rather than per card, so it costs one line of vertical space\n instead of repeating a key inside every tile (finding M-04).\n -->\n <div\n class=\"mb-3 flex flex-wrap items-center gap-x-4 gap-y-2 px-1\"\n role=\"list\"\n [attr.aria-label]=\"\n 'components.clientComponents.list.badgeLegend' | transloco\n \"\n >\n <span class=\"text-xs font-medium text-gray-500 dark:text-gray-400\">\n {{ \"components.clientComponents.list.badgeLegend\" | transloco }}\n </span>\n @for (entry of badgeLegend(); track entry.key) {\n <span class=\"flex items-center gap-1.5\" role=\"listitem\">\n <span\n class=\"inline-flex h-4 min-w-4 items-center justify-center rounded text-[10px] font-bold\"\n [style.background-color]=\"entry.color\"\n [style.color]=\"entry.textColor\"\n aria-hidden=\"true\"\n >\n #\n </span>\n <span class=\"text-xs text-gray-600 dark:text-gray-300\">{{\n entry.label\n }}</span>\n </span>\n }\n </div>\n}\n\n@if (cardsState().loading && cardsState().cards.length === 0) {\n <div class=\"mt-cards-grid\">\n @for (i of [1, 2, 3, 4, 5, 6]; track i) {\n <p-skeleton height=\"20rem\" class=\"rounded-lg\" />\n }\n </div>\n} @else if (cardsState().error) {\n <div class=\"rounded-lg border border-red-200 bg-red-50 p-6 text-red-600\">\n {{ cardsState().error }}\n </div>\n} @else if (visibleCards().length === 0) {\n <!--\n The same empty state the tables use, so a board and a list stop looking like\n two products (finding H-12). A board narrowed by a search or a filter says\n so and offers to clear it, instead of the bare grey \"No cards found.\"\n -->\n <mt-empty-state\n [variant]=\"hasActiveCardFilters() ? 'filtered' : 'empty'\"\n [title]=\"\n hasActiveCardFilters()\n ? ''\n : ('components.clientComponents.list.noCardsFound' | transloco)\n \"\n [actionLabel]=\"\n hasActiveCardFilters()\n ? ('components.emptyState.clearFilters' | transloco)\n : ''\n \"\n actionIcon=\"general.x-close\"\n (actionClick)=\"clearCardFilters()\"\n />\n} @else if (grouping.groupingActive()) {\n <div class=\"flex flex-col gap-6\">\n @for (group of groupedCards(); track group.key) {\n <section class=\"flex flex-col gap-3\">\n <header\n class=\"flex items-center gap-3 px-2 py-2 bg-surface-50 dark:bg-surface-900 border-y border-surface-200 dark:border-surface-700 rounded\"\n [style.--mt-group-accent]=\"group.accent ?? 'var(--p-primary-color)'\"\n >\n <span\n class=\"inline-block w-1 h-5 rounded-full\"\n [style.background]=\"'var(--mt-group-accent)'\"\n ></span>\n <span\n class=\"text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400\"\n >\n {{ group.columnLabel }}\n </span>\n <span class=\"text-sm font-semibold text-gray-900 dark:text-gray-100\">\n {{ group.label }}\n </span>\n <span\n class=\"ml-auto inline-flex items-center gap-1 text-xs px-2 py-0.5 rounded-full bg-primary-50 text-primary-700 dark:bg-primary-950 dark:text-primary-300\"\n >\n {{ group.count }}\n </span>\n </header>\n <div class=\"mt-cards-grid\">\n @for (card of group.cards; track card.id) {\n <mt-card\n class=\"relative cursor-pointer p-5 shadow-sm transition-shadow hover:shadow-md\"\n (click)=\"cardClick.emit(card)\"\n >\n <ng-template #headless>\n <ng-container\n [ngTemplateOutlet]=\"cardActionsMenu\"\n [ngTemplateOutletContext]=\"{ $implicit: card }\"\n />\n <mt-entities-preview\n [entities]=\"card.entities\"\n attachmentShape=\"compact\"\n [stackOnNarrow]=\"false\"\n [clickableKeys]=\"clickableEntityKeys()\"\n [activeKeys]=\"activeKeysForCard(card)\"\n [clickableTooltip]=\"filterByThisLabel()\"\n [activeTooltip]=\"clearFilterLabel()\"\n (entityClick)=\"onEntityFilterClick(card, $event)\"\n />\n </ng-template>\n </mt-card>\n }\n </div>\n </section>\n }\n </div>\n} @else {\n <div class=\"mt-cards-grid\">\n @for (card of visibleCards(); track card.id) {\n @defer (on viewport) {\n <mt-card\n class=\"relative cursor-pointer p-5 shadow-sm transition-shadow hover:shadow-md\"\n (click)=\"cardClick.emit(card)\"\n >\n <ng-template #headless>\n <ng-container\n [ngTemplateOutlet]=\"cardActionsMenu\"\n [ngTemplateOutletContext]=\"{ $implicit: card }\"\n />\n <mt-entities-preview\n [entities]=\"card.entities\"\n attachmentShape=\"compact\"\n [stackOnNarrow]=\"false\"\n [clickableKeys]=\"clickableEntityKeys()\"\n [activeKeys]=\"activeKeysForCard(card)\"\n [clickableTooltip]=\"filterByThisLabel()\"\n [activeTooltip]=\"clearFilterLabel()\"\n (entityClick)=\"onEntityFilterClick(card, $event)\"\n />\n </ng-template>\n </mt-card>\n } @placeholder {\n <div class=\"min-h-[20rem]\">\n <p-skeleton height=\"20rem\" class=\"rounded-lg\" />\n </div>\n }\n }\n </div>\n}\n\n<!--\n Infinite-scroll trigger. Deliberately outside the @if/@else chain above:\n inside it the element would be torn down and rebuilt every time the view\n swapped branch (error, empty filter result, group-by), and the observer\n would be left watching a detached node. Kept in the DOM and hidden via CSS\n when there is nothing left to load, so appending a page never recreates it.\n It also has to sit outside so infinite scroll keeps working while a\n group-by is active \u2014 grouping is a pure FE view over whatever has been\n fetched, not a reason to stop fetching.\n-->\n<div\n #loadMoreSentinel\n class=\"mt-cards-grid py-4\"\n [class.hidden]=\"!hasMoreCards()\"\n>\n @for (i of [1, 2, 3]; track i) {\n <p-skeleton height=\"20rem\" class=\"rounded-lg\" />\n }\n</div>\n\n<!--\n Per-card escalation marker and 3-dots actions menu. The compact corner cover\n only indicates active escalation state; its preview action lives in the menu\n so the marker never displaces or competes with the menu trigger.\n-->\n<ng-template #cardActionsMenu let-card>\n @let escalationAction = escalationMarkerAction(card);\n @if (escalationAction) {\n <span\n class=\"mt-escalation-marker absolute end-0 top-0 z-10 h-[18px] w-[20px]\"\n role=\"img\"\n tabindex=\"0\"\n [attr.aria-label]=\"escalationLabel()\"\n [mtTooltip]=\"escalationLabel()\"\n tooltipPosition=\"top\"\n ></span>\n }\n @if (rowActions().length > 0) {\n <div\n class=\"absolute end-2 top-2 z-20 flex items-center gap-1\"\n (click)=\"$event.stopPropagation()\"\n >\n @for (action of inlineActionsForCard(card); track $index) {\n <mt-button\n [icon]=\"action.icon\"\n [severity]=\"action.color\"\n [variant]=\"action.variant\"\n [size]=\"actionSize(action) || 'small'\"\n [tooltip]=\"action.tooltip\"\n [label]=\"action.label\"\n [loading]=\"resolveActionLoading(action, card)\"\n (onClick)=\"runCardAction($event, action, card)\"\n />\n }\n @if (showCardActionsMenu(card)) {\n <button\n type=\"button\"\n class=\"flex h-7 w-7 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent p-0 text-base text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 dark:text-gray-300 dark:hover:bg-surface-700 dark:hover:text-gray-100\"\n [attr.aria-label]=\"actionsLabel()\"\n [mtTooltip]=\"actionsLabel()\"\n tooltipPosition=\"top\"\n (click)=\"onCardActionsToggle($event, cardPopover, card)\"\n >\n <mt-icon icon=\"general.dots-vertical\" class=\"text-base\" />\n </button>\n <p-popover #cardPopover appendTo=\"body\">\n <div class=\"flex min-w-44 flex-col gap-1 p-1\">\n @if (isCardActionsLoading(card)) {\n <div class=\"flex flex-col gap-2 p-1\">\n <p-skeleton height=\"1.75rem\" />\n <p-skeleton height=\"1.75rem\" />\n <p-skeleton height=\"1.75rem\" />\n </div>\n } @else {\n @for (action of menuActionsForCard(card); track $index) {\n @if (isFirstDestructiveCardAction(card, $index)) {\n <hr\n class=\"my-1 border-0 border-t border-surface-200 dark:border-surface-700\"\n />\n }\n <button\n type=\"button\"\n class=\"flex cursor-pointer items-center gap-2 rounded px-2 py-2 text-start text-sm transition-colors\"\n [class]=\"\n action.color === 'danger'\n ? 'text-red-600 hover:bg-red-50 dark:hover:bg-red-950'\n : action.color === 'warn'\n ? 'text-orange-600 hover:bg-orange-50 dark:text-orange-400 dark:hover:bg-orange-950'\n : 'text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-surface-700'\n \"\n (click)=\"\n runCardAction($event, action, card); cardPopover.hide()\n \"\n >\n @if (action.icon) {\n <mt-icon [icon]=\"action.icon\" class=\"text-base\" />\n }\n <span>{{ action.label || action.tooltip }}</span>\n </button>\n }\n }\n </div>\n </p-popover>\n }\n </div>\n }\n</ng-template>\n", styles: [".mt-cards-grid{--mt-cards-gap: 1.25rem;--mt-cards-min: 380px;--mt-cards-track: max( var(--mt-cards-min), (100% - 3 * var(--mt-cards-gap)) / 4 );display:grid;gap:var(--mt-cards-gap);grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--mt-cards-track)),1fr))}.mt-cards-grid.hidden,.mt-cards-grid[hidden]{display:none}.mt-escalation-marker{border-start-end-radius:.5rem;background:var(--p-button-text-warn-color, var(--p-orange-500, #f59e0b));clip-path:polygon(0 0,100% 0,100% 100%);transition:filter .15s ease}.mt-escalation-marker:dir(rtl){clip-path:polygon(0 0,100% 0,0 100%)}.mt-escalation-marker:hover{filter:brightness(.92)}.mt-escalation-marker:focus-visible{filter:brightness(.92) drop-shadow(0 0 2px var(--p-button-text-warn-color, #f59e0b));outline:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: Tooltip, selector: "[mtTooltip]" }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "component", type: EntitiesPreview, selector: "mt-entities-preview", inputs: ["entities", "attachmentShape", "stackOnNarrow", "clickableKeys", "activeKeys", "clickableTooltip", "activeTooltip"], outputs: ["entityClick"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i2.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i3.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: TableCaption, selector: "mt-table-caption", inputs: ["generalSearch", "showFilters", "filterMode", "exportable", "printable", "groupable", "columns", "data", "groupColumns", "tabs", "tabsOptionLabel", "tabsOptionValue", "actions", "captionStart", "captionEnd", "activeTab", "filters", "filterTerm", "groupBy"], outputs: ["activeTabChange", "filtersChange", "filterTermChange", "groupByChange", "exportRequested", "printRequested", "onTabChange", "searchChange", "filterApplied", "filterReset"] }, { kind: "component", type: EmptyState, selector: "mt-empty-state", inputs: ["variant", "illustration", "title", "description", "actionLabel", "actionIcon"], outputs: ["actionClick"] }, { kind: "pipe", type: i4.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [i1.NgTemplateOutlet, Card,
|
|
1622
1622
|
EntitiesPreview]] });
|
|
1623
1623
|
}
|
|
1624
1624
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ClientListCardsView, decorators: [{
|
|
@@ -1635,7 +1635,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
|
|
|
1635
1635
|
PopoverModule,
|
|
1636
1636
|
TableCaption,
|
|
1637
1637
|
EmptyState,
|
|
1638
|
-
], providers: [MTDateFormatPipe], template: "<mt-table-caption\n [generalSearch]=\"true\"\n [showFilters]=\"true\"\n filterMode=\"popover\"\n [printable]=\"true\"\n [groupable]=\"true\"\n [exportable]=\"true\"\n [columns]=\"columns()\"\n [data]=\"rowRepresentations()\"\n [groupColumns]=\"grouping.groupableColumns()\"\n [actions]=\"toolbarActions()\"\n [captionStart]=\"cardsState().config.toolbarStart ?? null\"\n [captionEnd]=\"cardsState().config.toolbarEnd ?? null\"\n [filters]=\"bucket().filters()\"\n (filtersChange)=\"bucket().filters.set($event)\"\n [filterTerm]=\"bucket().filterTerm()\"\n (filterTermChange)=\"bucket().filterTerm.set($event)\"\n [groupBy]=\"bucket().groupBy()\"\n (groupByChange)=\"bucket().groupBy.set($event)\"\n [activeTab]=\"bucket().activeTab()\"\n (activeTabChange)=\"bucket().activeTab.set($event)\"\n (exportRequested)=\"exportExcel()\"\n (printRequested)=\"printPdf()\"\n/>\n\n@if (badgeLegend().length > 0) {\n <!--\n Decodes the coloured count pills on the cards below. Rendered once for the\n whole board rather than per card, so it costs one line of vertical space\n instead of repeating a key inside every tile (finding M-04).\n -->\n <div\n class=\"mb-3 flex flex-wrap items-center gap-x-4 gap-y-2 px-1\"\n role=\"list\"\n [attr.aria-label]=\"\n 'components.clientComponents.list.badgeLegend' | transloco\n \"\n >\n <span class=\"text-xs font-medium text-gray-500 dark:text-gray-400\">\n {{ \"components.clientComponents.list.badgeLegend\" | transloco }}\n </span>\n @for (entry of badgeLegend(); track entry.key) {\n <span class=\"flex items-center gap-1.5\" role=\"listitem\">\n <span\n class=\"inline-flex h-4 min-w-4 items-center justify-center rounded text-[10px] font-bold\"\n [style.background-color]=\"entry.color\"\n [style.color]=\"entry.textColor\"\n aria-hidden=\"true\"\n >\n #\n </span>\n <span class=\"text-xs text-gray-600 dark:text-gray-300\">{{\n entry.label\n }}</span>\n </span>\n }\n </div>\n}\n\n@if (cardsState().loading && cardsState().cards.length === 0) {\n <div class=\"mt-cards-grid\">\n @for (i of [1, 2, 3, 4, 5, 6]; track i) {\n <p-skeleton height=\"20rem\" class=\"rounded-lg\" />\n }\n </div>\n} @else if (cardsState().error) {\n <div class=\"rounded-lg border border-red-200 bg-red-50 p-6 text-red-600\">\n {{ cardsState().error }}\n </div>\n} @else if (visibleCards().length === 0) {\n <!--\n The same empty state the tables use, so a board and a list stop looking like\n two products (finding H-12). A board narrowed by a search or a filter says\n so and offers to clear it, instead of the bare grey \"No cards found.\"\n -->\n <mt-empty-state\n [variant]=\"hasActiveCardFilters() ? 'filtered' : 'empty'\"\n [title]=\"\n hasActiveCardFilters()\n ? ''\n : ('components.clientComponents.list.noCardsFound' | transloco)\n \"\n [actionLabel]=\"\n hasActiveCardFilters()\n ? ('components.emptyState.clearFilters' | transloco)\n : ''\n \"\n actionIcon=\"general.x-close\"\n (actionClick)=\"clearCardFilters()\"\n />\n} @else if (grouping.groupingActive()) {\n <div class=\"flex flex-col gap-6\">\n @for (group of groupedCards(); track group.key) {\n <section class=\"flex flex-col gap-3\">\n <header\n class=\"flex items-center gap-3 px-2 py-2 bg-surface-50 dark:bg-surface-900 border-y border-surface-200 dark:border-surface-700 rounded\"\n [style.--mt-group-accent]=\"group.accent ?? 'var(--p-primary-color)'\"\n >\n <span\n class=\"inline-block w-1 h-5 rounded-full\"\n [style.background]=\"'var(--mt-group-accent)'\"\n ></span>\n <span\n class=\"text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400\"\n >\n {{ group.columnLabel }}\n </span>\n <span class=\"text-sm font-semibold text-gray-900 dark:text-gray-100\">\n {{ group.label }}\n </span>\n <span\n class=\"ml-auto inline-flex items-center gap-1 text-xs px-2 py-0.5 rounded-full bg-primary-50 text-primary-700 dark:bg-primary-950 dark:text-primary-300\"\n >\n {{ group.count }}\n </span>\n </header>\n <div class=\"mt-cards-grid\">\n @for (card of group.cards; track card.id) {\n <mt-card\n class=\"relative cursor-pointer p-5 shadow-sm transition-shadow hover:shadow-md\"\n (click)=\"cardClick.emit(card)\"\n >\n <ng-template #headless>\n <ng-container\n [ngTemplateOutlet]=\"cardActionsMenu\"\n [ngTemplateOutletContext]=\"{ $implicit: card }\"\n />\n <mt-entities-preview\n [entities]=\"card.entities\"\n attachmentShape=\"compact\"\n [stackOnNarrow]=\"false\"\n [clickableKeys]=\"clickableEntityKeys()\"\n [activeKeys]=\"activeKeysForCard(card)\"\n [clickableTooltip]=\"filterByThisLabel()\"\n [activeTooltip]=\"clearFilterLabel()\"\n (entityClick)=\"onEntityFilterClick(card, $event)\"\n />\n </ng-template>\n </mt-card>\n }\n </div>\n </section>\n }\n </div>\n} @else {\n <div class=\"mt-cards-grid\">\n @for (card of visibleCards(); track card.id) {\n @defer (on viewport) {\n <mt-card\n class=\"relative cursor-pointer p-5 shadow-sm transition-shadow hover:shadow-md\"\n (click)=\"cardClick.emit(card)\"\n >\n <ng-template #headless>\n <ng-container\n [ngTemplateOutlet]=\"cardActionsMenu\"\n [ngTemplateOutletContext]=\"{ $implicit: card }\"\n />\n <mt-entities-preview\n [entities]=\"card.entities\"\n attachmentShape=\"compact\"\n [stackOnNarrow]=\"false\"\n [clickableKeys]=\"clickableEntityKeys()\"\n [activeKeys]=\"activeKeysForCard(card)\"\n [clickableTooltip]=\"filterByThisLabel()\"\n [activeTooltip]=\"clearFilterLabel()\"\n (entityClick)=\"onEntityFilterClick(card, $event)\"\n />\n </ng-template>\n </mt-card>\n } @placeholder {\n <div class=\"min-h-[20rem]\">\n <p-skeleton height=\"20rem\" class=\"rounded-lg\" />\n </div>\n }\n }\n </div>\n}\n\n<!--\n Infinite-scroll trigger. Deliberately outside the @if/@else chain above:\n inside it the element would be torn down and rebuilt every time the view\n swapped branch (error, empty filter result, group-by), and the observer\n would be left watching a detached node. Kept in the DOM and hidden via CSS\n when there is nothing left to load, so appending a page never recreates it.\n It also has to sit outside so infinite scroll keeps working while a\n group-by is active \u2014 grouping is a pure FE view over whatever has been\n fetched, not a reason to stop fetching.\n-->\n<div\n #loadMoreSentinel\n class=\"mt-cards-grid py-4\"\n [class.hidden]=\"!hasMoreCards()\"\n>\n @for (i of [1, 2, 3]; track i) {\n <p-skeleton height=\"20rem\" class=\"rounded-lg\" />\n }\n</div>\n\n<!--\n Per-card escalation marker and 3-dots actions menu. The compact corner cover\n only indicates active escalation state; its preview action lives in the menu\n so the marker never displaces or competes with the menu trigger.\n-->\n<ng-template #cardActionsMenu let-card>\n @let escalationAction = escalationMarkerAction(card);\n @if (escalationAction) {\n <span\n class=\"mt-escalation-marker absolute end-0 top-0 z-10 h-[18px] w-[20px]\"\n role=\"img\"\n tabindex=\"0\"\n [attr.aria-label]=\"escalationLabel()\"\n [mtTooltip]=\"escalationLabel()\"\n tooltipPosition=\"top\"\n ></span>\n }\n @if (rowActions().length > 0) {\n <div\n class=\"absolute end-2 top-2 z-20 flex items-center gap-1\"\n (click)=\"$event.stopPropagation()\"\n >\n @for (action of inlineActionsForCard(card); track $index) {\n <mt-button\n [icon]=\"action.icon\"\n [severity]=\"action.color\"\n [variant]=\"action.variant\"\n [size]=\"actionSize(action) || 'small'\"\n [tooltip]=\"action.tooltip\"\n [label]=\"action.label\"\n [loading]=\"resolveActionLoading(action, card)\"\n (onClick)=\"runCardAction($event, action, card)\"\n />\n }\n @if (showCardActionsMenu(card)) {\n <button\n type=\"button\"\n class=\"flex h-7 w-7 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent p-0 text-base text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 dark:text-gray-300 dark:hover:bg-surface-700 dark:hover:text-gray-100\"\n [attr.aria-label]=\"actionsLabel()\"\n [mtTooltip]=\"actionsLabel()\"\n tooltipPosition=\"top\"\n (click)=\"onCardActionsToggle($event, cardPopover, card)\"\n >\n <mt-icon icon=\"general.dots-vertical\" class=\"text-base\" />\n </button>\n <p-popover #cardPopover appendTo=\"body\">\n <div class=\"flex min-w-44 flex-col gap-1 p-1\">\n @if (isCardActionsLoading(card)) {\n <div class=\"flex flex-col gap-2 p-1\">\n <p-skeleton height=\"1.75rem\" />\n <p-skeleton height=\"1.75rem\" />\n <p-skeleton height=\"1.75rem\" />\n </div>\n } @else {\n @for (action of menuActionsForCard(card); track $index) {\n @if (isFirstDestructiveCardAction(card, $index)) {\n <hr\n class=\"my-1 border-0 border-t border-surface-200 dark:border-surface-700\"\n />\n }\n <button\n type=\"button\"\n class=\"flex cursor-pointer items-center gap-2 rounded px-2 py-2 text-start text-sm transition-colors\"\n [class]=\"\n action.color === 'danger'\n ? 'text-red-600 hover:bg-red-50 dark:hover:bg-red-950'\n : action.color === 'warn'\n ? 'text-orange-600 hover:bg-orange-50 dark:text-orange-400 dark:hover:bg-orange-950'\n : 'text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-surface-700'\n \"\n (click)=\"\n runCardAction($event, action, card); cardPopover.hide()\n \"\n >\n @if (action.icon) {\n <mt-icon [icon]=\"action.icon\" class=\"text-base\" />\n }\n <span>{{ action.label || action.tooltip }}</span>\n </button>\n }\n }\n </div>\n </p-popover>\n }\n </div>\n }\n</ng-template>\n", styles: [".mt-cards-grid{--mt-cards-gap: 1.25rem;--mt-cards-min: 380px;--mt-cards-track: max( var(--mt-cards-min), (100% - 4 * var(--mt-cards-gap)) / 5 );display:grid;gap:var(--mt-cards-gap);grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--mt-cards-track)),1fr))}.mt-cards-grid.hidden,.mt-cards-grid[hidden]{display:none}.mt-escalation-marker{border-start-end-radius:.5rem;background:var(--p-button-text-warn-color, var(--p-orange-500, #f59e0b));clip-path:polygon(0 0,100% 0,100% 100%);transition:filter .15s ease}.mt-escalation-marker:dir(rtl){clip-path:polygon(0 0,100% 0,0 100%)}.mt-escalation-marker:hover{filter:brightness(.92)}.mt-escalation-marker:focus-visible{filter:brightness(.92) drop-shadow(0 0 2px var(--p-button-text-warn-color, #f59e0b));outline:none}\n"] }]
|
|
1638
|
+
], providers: [MTDateFormatPipe], template: "<mt-table-caption\n [generalSearch]=\"true\"\n [showFilters]=\"true\"\n filterMode=\"popover\"\n [printable]=\"true\"\n [groupable]=\"true\"\n [exportable]=\"true\"\n [columns]=\"columns()\"\n [data]=\"rowRepresentations()\"\n [groupColumns]=\"grouping.groupableColumns()\"\n [actions]=\"toolbarActions()\"\n [captionStart]=\"cardsState().config.toolbarStart ?? null\"\n [captionEnd]=\"cardsState().config.toolbarEnd ?? null\"\n [filters]=\"bucket().filters()\"\n (filtersChange)=\"bucket().filters.set($event)\"\n [filterTerm]=\"bucket().filterTerm()\"\n (filterTermChange)=\"bucket().filterTerm.set($event)\"\n [groupBy]=\"bucket().groupBy()\"\n (groupByChange)=\"bucket().groupBy.set($event)\"\n [activeTab]=\"bucket().activeTab()\"\n (activeTabChange)=\"bucket().activeTab.set($event)\"\n (exportRequested)=\"exportExcel()\"\n (printRequested)=\"printPdf()\"\n/>\n\n@if (badgeLegend().length > 0) {\n <!--\n Decodes the coloured count pills on the cards below. Rendered once for the\n whole board rather than per card, so it costs one line of vertical space\n instead of repeating a key inside every tile (finding M-04).\n -->\n <div\n class=\"mb-3 flex flex-wrap items-center gap-x-4 gap-y-2 px-1\"\n role=\"list\"\n [attr.aria-label]=\"\n 'components.clientComponents.list.badgeLegend' | transloco\n \"\n >\n <span class=\"text-xs font-medium text-gray-500 dark:text-gray-400\">\n {{ \"components.clientComponents.list.badgeLegend\" | transloco }}\n </span>\n @for (entry of badgeLegend(); track entry.key) {\n <span class=\"flex items-center gap-1.5\" role=\"listitem\">\n <span\n class=\"inline-flex h-4 min-w-4 items-center justify-center rounded text-[10px] font-bold\"\n [style.background-color]=\"entry.color\"\n [style.color]=\"entry.textColor\"\n aria-hidden=\"true\"\n >\n #\n </span>\n <span class=\"text-xs text-gray-600 dark:text-gray-300\">{{\n entry.label\n }}</span>\n </span>\n }\n </div>\n}\n\n@if (cardsState().loading && cardsState().cards.length === 0) {\n <div class=\"mt-cards-grid\">\n @for (i of [1, 2, 3, 4, 5, 6]; track i) {\n <p-skeleton height=\"20rem\" class=\"rounded-lg\" />\n }\n </div>\n} @else if (cardsState().error) {\n <div class=\"rounded-lg border border-red-200 bg-red-50 p-6 text-red-600\">\n {{ cardsState().error }}\n </div>\n} @else if (visibleCards().length === 0) {\n <!--\n The same empty state the tables use, so a board and a list stop looking like\n two products (finding H-12). A board narrowed by a search or a filter says\n so and offers to clear it, instead of the bare grey \"No cards found.\"\n -->\n <mt-empty-state\n [variant]=\"hasActiveCardFilters() ? 'filtered' : 'empty'\"\n [title]=\"\n hasActiveCardFilters()\n ? ''\n : ('components.clientComponents.list.noCardsFound' | transloco)\n \"\n [actionLabel]=\"\n hasActiveCardFilters()\n ? ('components.emptyState.clearFilters' | transloco)\n : ''\n \"\n actionIcon=\"general.x-close\"\n (actionClick)=\"clearCardFilters()\"\n />\n} @else if (grouping.groupingActive()) {\n <div class=\"flex flex-col gap-6\">\n @for (group of groupedCards(); track group.key) {\n <section class=\"flex flex-col gap-3\">\n <header\n class=\"flex items-center gap-3 px-2 py-2 bg-surface-50 dark:bg-surface-900 border-y border-surface-200 dark:border-surface-700 rounded\"\n [style.--mt-group-accent]=\"group.accent ?? 'var(--p-primary-color)'\"\n >\n <span\n class=\"inline-block w-1 h-5 rounded-full\"\n [style.background]=\"'var(--mt-group-accent)'\"\n ></span>\n <span\n class=\"text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400\"\n >\n {{ group.columnLabel }}\n </span>\n <span class=\"text-sm font-semibold text-gray-900 dark:text-gray-100\">\n {{ group.label }}\n </span>\n <span\n class=\"ml-auto inline-flex items-center gap-1 text-xs px-2 py-0.5 rounded-full bg-primary-50 text-primary-700 dark:bg-primary-950 dark:text-primary-300\"\n >\n {{ group.count }}\n </span>\n </header>\n <div class=\"mt-cards-grid\">\n @for (card of group.cards; track card.id) {\n <mt-card\n class=\"relative cursor-pointer p-5 shadow-sm transition-shadow hover:shadow-md\"\n (click)=\"cardClick.emit(card)\"\n >\n <ng-template #headless>\n <ng-container\n [ngTemplateOutlet]=\"cardActionsMenu\"\n [ngTemplateOutletContext]=\"{ $implicit: card }\"\n />\n <mt-entities-preview\n [entities]=\"card.entities\"\n attachmentShape=\"compact\"\n [stackOnNarrow]=\"false\"\n [clickableKeys]=\"clickableEntityKeys()\"\n [activeKeys]=\"activeKeysForCard(card)\"\n [clickableTooltip]=\"filterByThisLabel()\"\n [activeTooltip]=\"clearFilterLabel()\"\n (entityClick)=\"onEntityFilterClick(card, $event)\"\n />\n </ng-template>\n </mt-card>\n }\n </div>\n </section>\n }\n </div>\n} @else {\n <div class=\"mt-cards-grid\">\n @for (card of visibleCards(); track card.id) {\n @defer (on viewport) {\n <mt-card\n class=\"relative cursor-pointer p-5 shadow-sm transition-shadow hover:shadow-md\"\n (click)=\"cardClick.emit(card)\"\n >\n <ng-template #headless>\n <ng-container\n [ngTemplateOutlet]=\"cardActionsMenu\"\n [ngTemplateOutletContext]=\"{ $implicit: card }\"\n />\n <mt-entities-preview\n [entities]=\"card.entities\"\n attachmentShape=\"compact\"\n [stackOnNarrow]=\"false\"\n [clickableKeys]=\"clickableEntityKeys()\"\n [activeKeys]=\"activeKeysForCard(card)\"\n [clickableTooltip]=\"filterByThisLabel()\"\n [activeTooltip]=\"clearFilterLabel()\"\n (entityClick)=\"onEntityFilterClick(card, $event)\"\n />\n </ng-template>\n </mt-card>\n } @placeholder {\n <div class=\"min-h-[20rem]\">\n <p-skeleton height=\"20rem\" class=\"rounded-lg\" />\n </div>\n }\n }\n </div>\n}\n\n<!--\n Infinite-scroll trigger. Deliberately outside the @if/@else chain above:\n inside it the element would be torn down and rebuilt every time the view\n swapped branch (error, empty filter result, group-by), and the observer\n would be left watching a detached node. Kept in the DOM and hidden via CSS\n when there is nothing left to load, so appending a page never recreates it.\n It also has to sit outside so infinite scroll keeps working while a\n group-by is active \u2014 grouping is a pure FE view over whatever has been\n fetched, not a reason to stop fetching.\n-->\n<div\n #loadMoreSentinel\n class=\"mt-cards-grid py-4\"\n [class.hidden]=\"!hasMoreCards()\"\n>\n @for (i of [1, 2, 3]; track i) {\n <p-skeleton height=\"20rem\" class=\"rounded-lg\" />\n }\n</div>\n\n<!--\n Per-card escalation marker and 3-dots actions menu. The compact corner cover\n only indicates active escalation state; its preview action lives in the menu\n so the marker never displaces or competes with the menu trigger.\n-->\n<ng-template #cardActionsMenu let-card>\n @let escalationAction = escalationMarkerAction(card);\n @if (escalationAction) {\n <span\n class=\"mt-escalation-marker absolute end-0 top-0 z-10 h-[18px] w-[20px]\"\n role=\"img\"\n tabindex=\"0\"\n [attr.aria-label]=\"escalationLabel()\"\n [mtTooltip]=\"escalationLabel()\"\n tooltipPosition=\"top\"\n ></span>\n }\n @if (rowActions().length > 0) {\n <div\n class=\"absolute end-2 top-2 z-20 flex items-center gap-1\"\n (click)=\"$event.stopPropagation()\"\n >\n @for (action of inlineActionsForCard(card); track $index) {\n <mt-button\n [icon]=\"action.icon\"\n [severity]=\"action.color\"\n [variant]=\"action.variant\"\n [size]=\"actionSize(action) || 'small'\"\n [tooltip]=\"action.tooltip\"\n [label]=\"action.label\"\n [loading]=\"resolveActionLoading(action, card)\"\n (onClick)=\"runCardAction($event, action, card)\"\n />\n }\n @if (showCardActionsMenu(card)) {\n <button\n type=\"button\"\n class=\"flex h-7 w-7 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent p-0 text-base text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 dark:text-gray-300 dark:hover:bg-surface-700 dark:hover:text-gray-100\"\n [attr.aria-label]=\"actionsLabel()\"\n [mtTooltip]=\"actionsLabel()\"\n tooltipPosition=\"top\"\n (click)=\"onCardActionsToggle($event, cardPopover, card)\"\n >\n <mt-icon icon=\"general.dots-vertical\" class=\"text-base\" />\n </button>\n <p-popover #cardPopover appendTo=\"body\">\n <div class=\"flex min-w-44 flex-col gap-1 p-1\">\n @if (isCardActionsLoading(card)) {\n <div class=\"flex flex-col gap-2 p-1\">\n <p-skeleton height=\"1.75rem\" />\n <p-skeleton height=\"1.75rem\" />\n <p-skeleton height=\"1.75rem\" />\n </div>\n } @else {\n @for (action of menuActionsForCard(card); track $index) {\n @if (isFirstDestructiveCardAction(card, $index)) {\n <hr\n class=\"my-1 border-0 border-t border-surface-200 dark:border-surface-700\"\n />\n }\n <button\n type=\"button\"\n class=\"flex cursor-pointer items-center gap-2 rounded px-2 py-2 text-start text-sm transition-colors\"\n [class]=\"\n action.color === 'danger'\n ? 'text-red-600 hover:bg-red-50 dark:hover:bg-red-950'\n : action.color === 'warn'\n ? 'text-orange-600 hover:bg-orange-50 dark:text-orange-400 dark:hover:bg-orange-950'\n : 'text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-surface-700'\n \"\n (click)=\"\n runCardAction($event, action, card); cardPopover.hide()\n \"\n >\n @if (action.icon) {\n <mt-icon [icon]=\"action.icon\" class=\"text-base\" />\n }\n <span>{{ action.label || action.tooltip }}</span>\n </button>\n }\n }\n </div>\n </p-popover>\n }\n </div>\n }\n</ng-template>\n", styles: [".mt-cards-grid{--mt-cards-gap: 1.25rem;--mt-cards-min: 380px;--mt-cards-track: max( var(--mt-cards-min), (100% - 3 * var(--mt-cards-gap)) / 4 );display:grid;gap:var(--mt-cards-gap);grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--mt-cards-track)),1fr))}.mt-cards-grid.hidden,.mt-cards-grid[hidden]{display:none}.mt-escalation-marker{border-start-end-radius:.5rem;background:var(--p-button-text-warn-color, var(--p-orange-500, #f59e0b));clip-path:polygon(0 0,100% 0,100% 100%);transition:filter .15s ease}.mt-escalation-marker:dir(rtl){clip-path:polygon(0 0,100% 0,0 100%)}.mt-escalation-marker:hover{filter:brightness(.92)}.mt-escalation-marker:focus-visible{filter:brightness(.92) drop-shadow(0 0 2px var(--p-button-text-warn-color, #f59e0b));outline:none}\n"] }]
|
|
1639
1639
|
}], ctorParameters: () => [], propDecorators: { state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: true }] }], rowActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowActions", required: false }] }], rowActionsLoadingFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowActionsLoadingFn", required: false }] }], lazyLoad: [{ type: i0.Output, args: ["lazyLoad"] }], loadMore: [{ type: i0.Output, args: ["loadMore"] }], cardClick: [{ type: i0.Output, args: ["cardClick"] }], rowActionsRequested: [{ type: i0.Output, args: ["rowActionsRequested"] }], loadMoreSentinel: [{ type: i0.ViewChild, args: ['loadMoreSentinel', { isSignal: true }] }] } });
|
|
1640
1640
|
|
|
1641
1641
|
function toDashboardExtraFilters(filters = []) {
|
|
@@ -153,7 +153,7 @@ class EscalationAddDialog {
|
|
|
153
153
|
};
|
|
154
154
|
}
|
|
155
155
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EscalationAddDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
156
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: EscalationAddDialog, isStandalone: true, selector: "mt-escalation-add-dialog", inputs: { context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: true, transformFunction: null }, currentUserDisplayName: { classPropertyName: "currentUserDisplayName", publicName: "currentUserDisplayName", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"modal.contentClass + ' p-4 flex flex-col gap-4'\">\r\n <form class=\"col-span-1\">\r\n <mt-dynamic-form\r\n [formConfig]=\"dynamicFormConfig()\"\r\n [formControl]=\"escalationFormControl\"\r\n />\r\n </form>\r\n\r\n @if (submitError(); as errorMessage) {\r\n <div\r\n class=\"rounded-xl border border-red-200 bg-red-50 p-4 text-sm text-red-700\"\r\n role=\"alert\"\r\n >\r\n {{ errorMessage }}\r\n </div>\r\n }\r\n</div>\r\n\r\n<div [class]=\"modal.footerClass + ' flex items-center justify-end gap-2'\">\r\n <mt-button\r\n [label]=\"'components.clientComponents.escalation.cancel' | transloco\"\r\n variant=\"outlined\"\r\n [disabled]=\"isSubmitting()\"\r\n (onClick)=\"close()\"\r\n />\r\n\r\n <mt-button\r\n [label]=\"'components.clientComponents.escalation.escalationUp' | transloco\"\r\n [loading]=\"isSubmitting()\"\r\n [disabled]=\"isSubmitting() || !escalationFormControl.valid\"\r\n (onClick)=\"createEscalation()\"\r\n />\r\n</div>\r\n", dependencies: [{ kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig", "forcedHiddenFieldKeys", "forcedDisabledFieldKeys", "preserveForcedHiddenValues", "visibleSectionKeys", "externalValues"], outputs: ["runtimeMessagesChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
156
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: EscalationAddDialog, isStandalone: true, selector: "mt-escalation-add-dialog", inputs: { context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: true, transformFunction: null }, currentUserDisplayName: { classPropertyName: "currentUserDisplayName", publicName: "currentUserDisplayName", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"modal.contentClass + ' p-4 flex flex-col gap-4'\">\r\n <form class=\"col-span-1\">\r\n <mt-dynamic-form\r\n [formConfig]=\"dynamicFormConfig()\"\r\n [formControl]=\"escalationFormControl\"\r\n />\r\n </form>\r\n\r\n @if (submitError(); as errorMessage) {\r\n <div\r\n class=\"rounded-xl border border-red-200 bg-red-50 p-4 text-sm text-red-700\"\r\n role=\"alert\"\r\n >\r\n {{ errorMessage }}\r\n </div>\r\n }\r\n</div>\r\n\r\n<div [class]=\"modal.footerClass + ' flex items-center justify-end gap-2'\">\r\n <mt-button\r\n [label]=\"'components.clientComponents.escalation.cancel' | transloco\"\r\n variant=\"outlined\"\r\n [disabled]=\"isSubmitting()\"\r\n (onClick)=\"close()\"\r\n />\r\n\r\n <mt-button\r\n [label]=\"'components.clientComponents.escalation.escalationUp' | transloco\"\r\n [loading]=\"isSubmitting()\"\r\n [disabled]=\"isSubmitting() || !escalationFormControl.valid\"\r\n (onClick)=\"createEscalation()\"\r\n />\r\n</div>\r\n", dependencies: [{ kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig", "forcedHiddenFieldKeys", "forcedDisabledFieldKeys", "preserveForcedHiddenValues", "visibleSectionKeys", "externalValues", "serverFieldErrors"], outputs: ["runtimeMessagesChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
157
157
|
}
|
|
158
158
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EscalationAddDialog, decorators: [{
|
|
159
159
|
type: Component,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"masterteam-client-components-escalation-runtime.mjs","sources":["../../../../packages/masterteam/client-components/escalation-runtime/escalation-runtime.service.ts","../../../../packages/masterteam/client-components/escalation-runtime/escalation-add-dialog.ts","../../../../packages/masterteam/client-components/escalation-runtime/escalation-add-dialog.html","../../../../packages/masterteam/client-components/escalation-runtime/masterteam-client-components-escalation-runtime.ts"],"sourcesContent":["import { HttpClient } from '@angular/common/http';\r\nimport { Injectable, inject } from '@angular/core';\r\nimport { map } from 'rxjs';\r\nimport {\r\n CreateEscalationPayload,\r\n CreateEscalationResponseData,\r\n EscalationRuntimeContext,\r\n Response,\r\n} from './escalation-runtime.model';\r\n\r\n@Injectable({\r\n providedIn: 'root',\r\n})\r\nexport class EscalationRuntimeService {\r\n private readonly http = inject(HttpClient);\r\n\r\n createEscalation(\r\n context: EscalationRuntimeContext,\r\n payload: CreateEscalationPayload,\r\n ) {\r\n return this.http\r\n .post<\r\n Response<CreateEscalationResponseData>\r\n >(`levels/${context.levelId}/${context.levelDataId}/escalations`, payload)\r\n .pipe(map((response) => response.data));\r\n }\r\n}\r\n","import {\r\n Component,\r\n DestroyRef,\r\n computed,\r\n effect,\r\n inject,\r\n input,\r\n signal,\r\n} from '@angular/core';\r\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\r\nimport { FormControl, ReactiveFormsModule } from '@angular/forms';\r\nimport { TranslocoPipe, TranslocoService } from '@jsverse/transloco';\r\nimport {\r\n DateFieldConfig,\r\n DynamicFormConfig,\r\n TextFieldConfig,\r\n TextareaFieldConfig,\r\n UploadFileFieldConfig,\r\n ValidatorConfig,\r\n} from '@masterteam/components';\r\nimport { Button } from '@masterteam/components/button';\r\nimport { ModalRef } from '@masterteam/components/dialog';\r\nimport { ModalService } from '@masterteam/components/modal';\r\nimport { DynamicForm } from '@masterteam/forms/dynamic-form';\r\nimport { finalize } from 'rxjs';\r\nimport { EscalationRuntimeService } from './escalation-runtime.service';\r\nimport {\r\n CreateEscalationPayload,\r\n EscalationCreateResult,\r\n EscalationRuntimeContext,\r\n} from './escalation-runtime.model';\r\n\r\ninterface EscalationAddFormValue {\r\n startDate: Date;\r\n escalatedBy: string;\r\n reason: string;\r\n attachments: EscalationAttachmentValue | null;\r\n}\r\n\r\ninterface EscalationAttachmentValue {\r\n fileName?: string | null;\r\n}\r\n\r\n@Component({\r\n selector: 'mt-escalation-add-dialog',\r\n standalone: true,\r\n imports: [Button, DynamicForm, ReactiveFormsModule, TranslocoPipe],\r\n templateUrl: './escalation-add-dialog.html',\r\n})\r\nexport default class EscalationAddDialog {\r\n readonly modal = inject(ModalService);\r\n readonly ref = inject(ModalRef);\r\n private readonly destroyRef = inject(DestroyRef);\r\n private readonly escalationRuntimeService = inject(EscalationRuntimeService);\r\n private readonly transloco = inject(TranslocoService);\r\n private readonly startedAt = new Date();\r\n\r\n readonly context = input.required<EscalationRuntimeContext>();\r\n readonly currentUserDisplayName = input(\r\n this.transloco.translate(\r\n 'components.clientComponents.escalation.currentUser',\r\n ),\r\n );\r\n readonly escalationFormControl = new FormControl<EscalationAddFormValue>(\r\n {\r\n startDate: this.startedAt,\r\n escalatedBy: '',\r\n reason: '',\r\n attachments: null,\r\n },\r\n { nonNullable: true },\r\n );\r\n\r\n readonly resolvedCurrentUserDisplayName = computed(\r\n () =>\r\n this.currentUserDisplayName().trim() ||\r\n this.transloco.translate(\r\n 'components.clientComponents.escalation.currentUser',\r\n ),\r\n );\r\n readonly isSubmitting = signal(false);\r\n readonly submitError = signal<string | null>(null);\r\n readonly dynamicFormConfig = computed<DynamicFormConfig>(() => ({\r\n sections: [\r\n {\r\n key: 'escalation-runtime',\r\n type: 'header',\r\n label: '',\r\n fields: [\r\n new TextFieldConfig({\r\n key: 'escalatedBy',\r\n label: this.transloco.translate(\r\n 'components.clientComponents.escalation.escalatedBy',\r\n ),\r\n disabled: true,\r\n colSpan: 12,\r\n order: 1,\r\n }),\r\n new DateFieldConfig({\r\n key: 'startDate',\r\n label: this.transloco.translate(\r\n 'components.clientComponents.escalation.startDate',\r\n ),\r\n disabled: true,\r\n showIcon: true,\r\n colSpan: 6,\r\n order: 2,\r\n }),\r\n new TextareaFieldConfig({\r\n key: 'reason',\r\n label: this.transloco.translate(\r\n 'components.clientComponents.escalation.reason',\r\n ),\r\n placeholder: this.transloco.translate(\r\n 'components.clientComponents.escalation.reasonPlaceholder',\r\n ),\r\n validators: [ValidatorConfig.required()],\r\n rows: 3,\r\n autoResize: true,\r\n colSpan: 12,\r\n order: 3,\r\n }),\r\n new UploadFileFieldConfig({\r\n key: 'attachments',\r\n label: this.transloco.translate(\r\n 'components.clientComponents.escalation.attachments',\r\n ),\r\n title: this.transloco.translate(\r\n 'components.clientComponents.escalation.attachments',\r\n ),\r\n description: this.transloco.translate(\r\n 'components.clientComponents.escalation.uploadHelp',\r\n ),\r\n shape: 'card',\r\n colSpan: 12,\r\n order: 4,\r\n }),\r\n ],\r\n },\r\n ],\r\n }));\r\n\r\n constructor() {\r\n effect(() => {\r\n this.escalationFormControl.setValue(\r\n {\r\n ...this.escalationFormControl.getRawValue(),\r\n startDate: this.startedAt,\r\n escalatedBy: this.resolvedCurrentUserDisplayName(),\r\n },\r\n { emitEvent: false },\r\n );\r\n });\r\n }\r\n\r\n createEscalation(): void {\r\n if (this.isSubmitting()) {\r\n return;\r\n }\r\n\r\n this.submitError.set(null);\r\n\r\n if (this.escalationFormControl.invalid) {\r\n this.escalationFormControl.markAllAsTouched();\r\n return;\r\n }\r\n\r\n const payload = this.buildPayload();\r\n if (!payload.reason) {\r\n this.submitError.set(\r\n this.transloco.translate(\r\n 'components.clientComponents.escalation.reasonRequired',\r\n ),\r\n );\r\n this.escalationFormControl.markAllAsTouched();\r\n return;\r\n }\r\n\r\n this.isSubmitting.set(true);\r\n\r\n this.escalationRuntimeService\r\n .createEscalation(this.context(), payload)\r\n .pipe(\r\n finalize(() => this.isSubmitting.set(false)),\r\n takeUntilDestroyed(this.destroyRef),\r\n )\r\n .subscribe({\r\n next: (response) => {\r\n const result: EscalationCreateResult = {\r\n instanceId: response.instanceId,\r\n moduleDataId: payload.moduleDataId,\r\n };\r\n this.ref.close(result);\r\n },\r\n error: (error) => {\r\n this.submitError.set(\r\n error?.error?.message ??\r\n this.transloco.translate(\r\n 'components.clientComponents.escalation.createFailed',\r\n ),\r\n );\r\n },\r\n });\r\n }\r\n\r\n close(): void {\r\n if (this.isSubmitting()) {\r\n return;\r\n }\r\n\r\n this.ref.close();\r\n }\r\n\r\n private buildPayload(): CreateEscalationPayload {\r\n const formValue = this.escalationFormControl.getRawValue();\r\n\r\n return {\r\n moduleDataId: this.context().moduleDataId,\r\n reason: formValue.reason.trim(),\r\n notes: '',\r\n attachments: formValue.attachments?.fileName\r\n ? [formValue.attachments.fileName]\r\n : [],\r\n };\r\n }\r\n}\r\n","<div [class]=\"modal.contentClass + ' p-4 flex flex-col gap-4'\">\r\n <form class=\"col-span-1\">\r\n <mt-dynamic-form\r\n [formConfig]=\"dynamicFormConfig()\"\r\n [formControl]=\"escalationFormControl\"\r\n />\r\n </form>\r\n\r\n @if (submitError(); as errorMessage) {\r\n <div\r\n class=\"rounded-xl border border-red-200 bg-red-50 p-4 text-sm text-red-700\"\r\n role=\"alert\"\r\n >\r\n {{ errorMessage }}\r\n </div>\r\n }\r\n</div>\r\n\r\n<div [class]=\"modal.footerClass + ' flex items-center justify-end gap-2'\">\r\n <mt-button\r\n [label]=\"'components.clientComponents.escalation.cancel' | transloco\"\r\n variant=\"outlined\"\r\n [disabled]=\"isSubmitting()\"\r\n (onClick)=\"close()\"\r\n />\r\n\r\n <mt-button\r\n [label]=\"'components.clientComponents.escalation.escalationUp' | transloco\"\r\n [loading]=\"isSubmitting()\"\r\n [disabled]=\"isSubmitting() || !escalationFormControl.valid\"\r\n (onClick)=\"createEscalation()\"\r\n />\r\n</div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"masterteam-client-components-escalation-runtime.mjs","sources":["../../../../packages/masterteam/client-components/escalation-runtime/escalation-runtime.service.ts","../../../../packages/masterteam/client-components/escalation-runtime/escalation-add-dialog.ts","../../../../packages/masterteam/client-components/escalation-runtime/escalation-add-dialog.html","../../../../packages/masterteam/client-components/escalation-runtime/masterteam-client-components-escalation-runtime.ts"],"sourcesContent":["import { HttpClient } from '@angular/common/http';\r\nimport { Injectable, inject } from '@angular/core';\r\nimport { map } from 'rxjs';\r\nimport {\r\n CreateEscalationPayload,\r\n CreateEscalationResponseData,\r\n EscalationRuntimeContext,\r\n Response,\r\n} from './escalation-runtime.model';\r\n\r\n@Injectable({\r\n providedIn: 'root',\r\n})\r\nexport class EscalationRuntimeService {\r\n private readonly http = inject(HttpClient);\r\n\r\n createEscalation(\r\n context: EscalationRuntimeContext,\r\n payload: CreateEscalationPayload,\r\n ) {\r\n return this.http\r\n .post<\r\n Response<CreateEscalationResponseData>\r\n >(`levels/${context.levelId}/${context.levelDataId}/escalations`, payload)\r\n .pipe(map((response) => response.data));\r\n }\r\n}\r\n","import {\r\n Component,\r\n DestroyRef,\r\n computed,\r\n effect,\r\n inject,\r\n input,\r\n signal,\r\n} from '@angular/core';\r\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\r\nimport { FormControl, ReactiveFormsModule } from '@angular/forms';\r\nimport { TranslocoPipe, TranslocoService } from '@jsverse/transloco';\r\nimport {\r\n DateFieldConfig,\r\n DynamicFormConfig,\r\n TextFieldConfig,\r\n TextareaFieldConfig,\r\n UploadFileFieldConfig,\r\n ValidatorConfig,\r\n} from '@masterteam/components';\r\nimport { Button } from '@masterteam/components/button';\r\nimport { ModalRef } from '@masterteam/components/dialog';\r\nimport { ModalService } from '@masterteam/components/modal';\r\nimport { DynamicForm } from '@masterteam/forms/dynamic-form';\r\nimport { finalize } from 'rxjs';\r\nimport { EscalationRuntimeService } from './escalation-runtime.service';\r\nimport {\r\n CreateEscalationPayload,\r\n EscalationCreateResult,\r\n EscalationRuntimeContext,\r\n} from './escalation-runtime.model';\r\n\r\ninterface EscalationAddFormValue {\r\n startDate: Date;\r\n escalatedBy: string;\r\n reason: string;\r\n attachments: EscalationAttachmentValue | null;\r\n}\r\n\r\ninterface EscalationAttachmentValue {\r\n fileName?: string | null;\r\n}\r\n\r\n@Component({\r\n selector: 'mt-escalation-add-dialog',\r\n standalone: true,\r\n imports: [Button, DynamicForm, ReactiveFormsModule, TranslocoPipe],\r\n templateUrl: './escalation-add-dialog.html',\r\n})\r\nexport default class EscalationAddDialog {\r\n readonly modal = inject(ModalService);\r\n readonly ref = inject(ModalRef);\r\n private readonly destroyRef = inject(DestroyRef);\r\n private readonly escalationRuntimeService = inject(EscalationRuntimeService);\r\n private readonly transloco = inject(TranslocoService);\r\n private readonly startedAt = new Date();\r\n\r\n readonly context = input.required<EscalationRuntimeContext>();\r\n readonly currentUserDisplayName = input(\r\n this.transloco.translate(\r\n 'components.clientComponents.escalation.currentUser',\r\n ),\r\n );\r\n readonly escalationFormControl = new FormControl<EscalationAddFormValue>(\r\n {\r\n startDate: this.startedAt,\r\n escalatedBy: '',\r\n reason: '',\r\n attachments: null,\r\n },\r\n { nonNullable: true },\r\n );\r\n\r\n readonly resolvedCurrentUserDisplayName = computed(\r\n () =>\r\n this.currentUserDisplayName().trim() ||\r\n this.transloco.translate(\r\n 'components.clientComponents.escalation.currentUser',\r\n ),\r\n );\r\n readonly isSubmitting = signal(false);\r\n readonly submitError = signal<string | null>(null);\r\n readonly dynamicFormConfig = computed<DynamicFormConfig>(() => ({\r\n sections: [\r\n {\r\n key: 'escalation-runtime',\r\n type: 'header',\r\n label: '',\r\n fields: [\r\n new TextFieldConfig({\r\n key: 'escalatedBy',\r\n label: this.transloco.translate(\r\n 'components.clientComponents.escalation.escalatedBy',\r\n ),\r\n disabled: true,\r\n colSpan: 12,\r\n order: 1,\r\n }),\r\n new DateFieldConfig({\r\n key: 'startDate',\r\n label: this.transloco.translate(\r\n 'components.clientComponents.escalation.startDate',\r\n ),\r\n disabled: true,\r\n showIcon: true,\r\n colSpan: 6,\r\n order: 2,\r\n }),\r\n new TextareaFieldConfig({\r\n key: 'reason',\r\n label: this.transloco.translate(\r\n 'components.clientComponents.escalation.reason',\r\n ),\r\n placeholder: this.transloco.translate(\r\n 'components.clientComponents.escalation.reasonPlaceholder',\r\n ),\r\n validators: [ValidatorConfig.required()],\r\n rows: 3,\r\n autoResize: true,\r\n colSpan: 12,\r\n order: 3,\r\n }),\r\n new UploadFileFieldConfig({\r\n key: 'attachments',\r\n label: this.transloco.translate(\r\n 'components.clientComponents.escalation.attachments',\r\n ),\r\n title: this.transloco.translate(\r\n 'components.clientComponents.escalation.attachments',\r\n ),\r\n description: this.transloco.translate(\r\n 'components.clientComponents.escalation.uploadHelp',\r\n ),\r\n shape: 'card',\r\n colSpan: 12,\r\n order: 4,\r\n }),\r\n ],\r\n },\r\n ],\r\n }));\r\n\r\n constructor() {\r\n effect(() => {\r\n this.escalationFormControl.setValue(\r\n {\r\n ...this.escalationFormControl.getRawValue(),\r\n startDate: this.startedAt,\r\n escalatedBy: this.resolvedCurrentUserDisplayName(),\r\n },\r\n { emitEvent: false },\r\n );\r\n });\r\n }\r\n\r\n createEscalation(): void {\r\n if (this.isSubmitting()) {\r\n return;\r\n }\r\n\r\n this.submitError.set(null);\r\n\r\n if (this.escalationFormControl.invalid) {\r\n this.escalationFormControl.markAllAsTouched();\r\n return;\r\n }\r\n\r\n const payload = this.buildPayload();\r\n if (!payload.reason) {\r\n this.submitError.set(\r\n this.transloco.translate(\r\n 'components.clientComponents.escalation.reasonRequired',\r\n ),\r\n );\r\n this.escalationFormControl.markAllAsTouched();\r\n return;\r\n }\r\n\r\n this.isSubmitting.set(true);\r\n\r\n this.escalationRuntimeService\r\n .createEscalation(this.context(), payload)\r\n .pipe(\r\n finalize(() => this.isSubmitting.set(false)),\r\n takeUntilDestroyed(this.destroyRef),\r\n )\r\n .subscribe({\r\n next: (response) => {\r\n const result: EscalationCreateResult = {\r\n instanceId: response.instanceId,\r\n moduleDataId: payload.moduleDataId,\r\n };\r\n this.ref.close(result);\r\n },\r\n error: (error) => {\r\n this.submitError.set(\r\n error?.error?.message ??\r\n this.transloco.translate(\r\n 'components.clientComponents.escalation.createFailed',\r\n ),\r\n );\r\n },\r\n });\r\n }\r\n\r\n close(): void {\r\n if (this.isSubmitting()) {\r\n return;\r\n }\r\n\r\n this.ref.close();\r\n }\r\n\r\n private buildPayload(): CreateEscalationPayload {\r\n const formValue = this.escalationFormControl.getRawValue();\r\n\r\n return {\r\n moduleDataId: this.context().moduleDataId,\r\n reason: formValue.reason.trim(),\r\n notes: '',\r\n attachments: formValue.attachments?.fileName\r\n ? [formValue.attachments.fileName]\r\n : [],\r\n };\r\n }\r\n}\r\n","<div [class]=\"modal.contentClass + ' p-4 flex flex-col gap-4'\">\r\n <form class=\"col-span-1\">\r\n <mt-dynamic-form\r\n [formConfig]=\"dynamicFormConfig()\"\r\n [formControl]=\"escalationFormControl\"\r\n />\r\n </form>\r\n\r\n @if (submitError(); as errorMessage) {\r\n <div\r\n class=\"rounded-xl border border-red-200 bg-red-50 p-4 text-sm text-red-700\"\r\n role=\"alert\"\r\n >\r\n {{ errorMessage }}\r\n </div>\r\n }\r\n</div>\r\n\r\n<div [class]=\"modal.footerClass + ' flex items-center justify-end gap-2'\">\r\n <mt-button\r\n [label]=\"'components.clientComponents.escalation.cancel' | transloco\"\r\n variant=\"outlined\"\r\n [disabled]=\"isSubmitting()\"\r\n (onClick)=\"close()\"\r\n />\r\n\r\n <mt-button\r\n [label]=\"'components.clientComponents.escalation.escalationUp' | transloco\"\r\n [loading]=\"isSubmitting()\"\r\n [disabled]=\"isSubmitting() || !escalationFormControl.valid\"\r\n (onClick)=\"createEscalation()\"\r\n />\r\n</div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@masterteam/client-components",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.85",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"directory": "../../../dist/masterteam/client-components",
|
|
6
6
|
"linkDirectory": true,
|
|
@@ -16,10 +16,10 @@
|
|
|
16
16
|
"rxjs": "^7.8.2",
|
|
17
17
|
"tailwindcss": "^4.2.2",
|
|
18
18
|
"tailwindcss-primeui": "^0.6.1",
|
|
19
|
-
"@masterteam/forms": "^0.0.
|
|
19
|
+
"@masterteam/forms": "^0.0.138",
|
|
20
|
+
"@masterteam/dashboard-builder": "^0.0.80",
|
|
20
21
|
"@masterteam/icons": "^0.0.17",
|
|
21
|
-
"@masterteam/components": "^0.0.
|
|
22
|
-
"@masterteam/dashboard-builder": "^0.0.80"
|
|
22
|
+
"@masterteam/components": "^0.0.274"
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
25
|
"tslib": "^2.8.1"
|