@ngbplatform/ui 1.3.0

package/src/ngb/editor/NgbEditorDiscardDialog.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import NgbConfirmDialog from '../components/NgbConfirmDialog.vue';
+
+const props = withDefaults(defineProps<{
+  open: boolean;
+  title?: string;
+  message?: string;
+  confirmText?: string;
+  cancelText?: string;
+}>(), {
+  title: 'Discard changes?',
+  message: 'You have unsaved changes. If you close this panel now, they won’t be saved.',
+  confirmText: 'Discard',
+  cancelText: 'Keep editing',
+});
+
+const emit = defineEmits<{
+  (e: 'update:open', value: boolean): void;
+  (e: 'confirm'): void;
+  (e: 'cancel'): void;
+}>();
+
+function handleOpenUpdate(value: boolean) {
+  emit('update:open', value);
+  if (!value) emit('cancel');
+}
+</script>
+
+<template>
+  <NgbConfirmDialog
+    :open="props.open"
+    :title="props.title"
+    :message="props.message"
+    :confirm-text="props.confirmText"
+    :cancel-text="props.cancelText"
+    danger
+    @update:open="handleOpenUpdate"
+    @confirm="emit('confirm')"
+  />
+</template>

package/src/ngb/editor/NgbEntityAuditSidebar.vue

@@ -0,0 +1,288 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+
+import { toErrorMessage } from '../utils/errorMessage';
+import { stableStringify } from '../utils/stableValue';
+import NgbIcon from '../primitives/NgbIcon.vue';
+
+import { getConfiguredNgbEditor, resolveNgbEditorAuditBehavior } from './config';
+import type { EditorAuditBehavior } from './types';
+import type { AuditEvent } from './types';
+
+const props = defineProps<{
+  open: boolean;
+  entityKind: number;
+  entityId?: string | null;
+  entityTitle?: string | null;
+  behavior?: EditorAuditBehavior;
+}>();
+
+const emit = defineEmits<{
+  (e: 'back'): void;
+  (e: 'close'): void;
+}>();
+
+const loading = ref(false);
+const error = ref<string | null>(null);
+const items = ref<AuditEvent[]>([]);
+let loadSequence = 0;
+
+const canLoad = computed(() => !!props.entityId);
+const title = computed(() => props.entityTitle?.trim() || 'Audit Log');
+const behavior = computed(() => resolveNgbEditorAuditBehavior(props.behavior));
+const hiddenFieldNames = computed(() => new Set((behavior.value.hiddenFieldNames ?? []).map((item) => item.toLowerCase())));
+const explicitFieldLabels = computed(() => {
+  const entries = Object.entries(behavior.value.explicitFieldLabels ?? {});
+  return Object.fromEntries(entries.map(([key, value]) => [key.toLowerCase(), value]));
+});
+const explicitActionTitles = computed(() => {
+  const entries = Object.entries(behavior.value.actionTitles ?? {});
+  return Object.fromEntries(entries.map(([key, value]) => [key.toLowerCase(), value]));
+});
+type AuditRow = { field: string; before: string; after: string };
+
+function formatDateTime(v: string): string {
+  const d = new Date(v);
+  if (Number.isNaN(d.getTime())) return v;
+  return d.toLocaleString([], {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+}
+
+function actorLabel(e: AuditEvent): string {
+  const a = e.actor;
+  if (!a) return 'System';
+  return a.displayName?.trim() || a.email?.trim() || 'System';
+}
+
+function humanizeField(fieldPath: string): string {
+  const raw = String(fieldPath ?? '');
+  const last = raw.split('.').pop() || raw;
+  const explicit = explicitFieldLabels.value[last.toLowerCase()];
+  if (explicit) return explicit;
+  return last
+    .replace(/_/g, ' ')
+    .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+    .replace(/\bid\b/gi, 'ID')
+    .replace(/\butc\b/gi, 'UTC')
+    .replace(/\b\w/g, (m) => m.toUpperCase());
+}
+
+function humanizeLooseText(v: string): string {
+  return String(v ?? '')
+    .replace(/[._]/g, ' ')
+    .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+    .replace(/\b\w/g, (m) => m.toUpperCase())
+    .trim();
+}
+
+function parseJsonLoose(v?: string | null): unknown {
+  if (v == null || v === '') return null;
+  try {
+    return JSON.parse(v);
+  } catch {
+    return v;
+  }
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return !!value && typeof value === 'object' && !Array.isArray(value);
+}
+
+function looksLikeIsoDateTime(v: string): boolean {
+  return /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}/.test(v);
+}
+
+function looksLikeDateOnly(v: string): boolean {
+  return /^\d{4}-\d{2}-\d{2}$/.test(v);
+}
+
+function formatPrimitiveString(v: string): string {
+  const trimmed = v.trim();
+  if (!trimmed) return '—';
+
+  if (looksLikeIsoDateTime(trimmed)) return formatDateTime(trimmed);
+
+  if (looksLikeDateOnly(trimmed)) {
+    const d = new Date(`${trimmed}T00:00:00`);
+    if (!Number.isNaN(d.getTime())) return d.toLocaleDateString();
+  }
+
+  if (/^(true|false)$/i.test(trimmed)) {
+    return trimmed.toLowerCase() === 'true' ? 'Yes' : 'No';
+  }
+
+  if (/^[a-z]+([A-Z][a-z0-9]+)+$/.test(trimmed) || trimmed.includes('_')) {
+    return humanizeLooseText(trimmed);
+  }
+
+  return trimmed;
+}
+
+function formatAuditValue(parsed: unknown): string {
+  if (parsed == null || parsed === '') return '—';
+  if (typeof parsed === 'boolean') return parsed ? 'Yes' : 'No';
+  if (typeof parsed === 'number') return String(parsed);
+  if (typeof parsed === 'string') return formatPrimitiveString(parsed);
+  if (Array.isArray(parsed)) {
+    if (parsed.length === 0) return '—';
+    return parsed.map((entry) => formatAuditValue(entry)).join(', ');
+  }
+  if (isRecord(parsed)) {
+    for (const key of ['display', 'label', 'name', 'email', 'id']) {
+      const value = parsed[key];
+      if (typeof value === 'string' && value.trim()) return value;
+    }
+    const permissionDisplay = formatPermissionLikeRecord(parsed);
+    if (permissionDisplay) return permissionDisplay;
+    return stableStringify(parsed);
+  }
+  return String(parsed);
+}
+
+function valueText(v?: string | null): string {
+  return formatAuditValue(parseJsonLoose(v));
+}
+
+function actionTitle(actionCode: string): string {
+  const code = String(actionCode ?? '').toLowerCase();
+  const explicitTitle = explicitActionTitles.value[code];
+  if (explicitTitle) return explicitTitle;
+  if (code.endsWith('.create') || code.includes('.create_')) return 'Created';
+  if (code.endsWith('.update') || code.includes('.update_') || code.includes('.replace_')) return 'Updated';
+  if (code.endsWith('.submit')) return 'Submitted';
+  if (code.endsWith('.approve')) return 'Approved';
+  if (code.endsWith('.reject')) return 'Rejected';
+  if (code.endsWith('.post')) return 'Posted';
+  if (code.endsWith('.unpost')) return 'Unposted';
+  if (code.endsWith('.repost')) return 'Reposted';
+  if (code.includes('unmark_for_deletion') || code.includes('restore')) return 'Restored';
+  if (code.includes('mark_for_deletion') || code.includes('soft_delete') || code.includes('.tombstone')) {
+    return 'Marked for deletion';
+  }
+  if (code.includes('set_active')) return 'Status changed';
+  return humanizeLooseText(actionCode);
+}
+
+function eventSummary(item: AuditEvent): string {
+  return `${actionTitle(item.actionCode)} by ${actorLabel(item)}`;
+}
+
+function sameText(a: string, b: string): boolean {
+  return a.trim() === b.trim();
+}
+
+function eventRows(item: AuditEvent): AuditRow[] {
+  const changes = Array.isArray(item.changes) ? item.changes : [];
+
+  const rows = changes
+    .filter((change) => {
+      const key = String(change.fieldPath ?? '').split('.').pop()?.toLowerCase() ?? '';
+      return !hiddenFieldNames.value.has(key);
+    })
+    .map((change) => ({
+      field: humanizeField(change.fieldPath),
+      before: valueText(change.oldValueJson),
+      after: valueText(change.newValueJson),
+    }))
+    .filter((row) => !sameText(row.before, row.after));
+
+  if (rows.length > 0) return rows;
+  return [{ field: 'Details', before: '—', after: 'No business-field changes recorded.' }];
+}
+
+function formatPermissionLikeRecord(value: Record<string, unknown>): string | null {
+  const resourceCode = getString(value.resourceCode ?? value.resource);
+  const actionCode = getString(value.actionCode ?? value.action);
+  if (!resourceCode || !actionCode) return null;
+
+  return `${humanizeLooseText(resourceCode)}: ${humanizeLooseText(actionCode)}`;
+}
+
+function getString(value: unknown): string | null {
+  return typeof value === 'string' && value.trim() ? value.trim() : null;
+}
+
+async function load() {
+  if (!props.open || !props.entityId) return;
+  const seq = ++loadSequence;
+  loading.value = true;
+  error.value = null;
+  try {
+    const page = await getConfiguredNgbEditor().loadEntityAuditLog(props.entityKind, props.entityId, { limit: 100 });
+    if (seq !== loadSequence) return;
+    items.value = page.items ?? [];
+  } catch (cause) {
+    if (seq !== loadSequence) return;
+    error.value = toErrorMessage(cause, 'Failed to load the audit log.');
+  } finally {
+    if (seq === loadSequence) loading.value = false;
+  }
+}
+
+watch(
+  () => [props.open, props.entityKind, props.entityId],
+  () => {
+    loadSequence += 1;
+    items.value = [];
+    error.value = null;
+    loading.value = false;
+    if (props.open && props.entityId) void load();
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <div class="h-full min-h-0 flex flex-col bg-ngb-card">
+    <div class="px-5 py-4 border-b border-ngb-border flex items-start gap-3">
+      <div class="min-w-0 flex-1">
+        <div class="text-base font-semibold text-ngb-text truncate">Audit Log</div>
+        <div class="text-sm text-ngb-muted truncate mt-1">{{ title }}</div>
+      </div>
+
+      <button class="ngb-iconbtn shrink-0" title="Close" @click="emit('close')">
+        <NgbIcon name="x" />
+      </button>
+    </div>
+
+    <div class="flex-1 min-h-0 overflow-auto">
+      <div v-if="error" class="px-5 py-4 text-sm text-red-700">{{ error }}</div>
+      <div v-else-if="!canLoad" class="px-5 py-4 text-sm text-ngb-muted">Save the record first to see its history.</div>
+      <div v-else-if="loading && items.length === 0" class="px-5 py-4 text-sm text-ngb-muted">Loading…</div>
+      <div v-else-if="items.length === 0" class="px-5 py-4 text-sm text-ngb-muted">No history yet.</div>
+
+      <div v-else class="py-3">
+        <section v-for="item in items" :key="item.auditEventId" class="bg-ngb-card px-4 mb-4 last:mb-0">
+          <div class="py-3 border-b border-ngb-border flex items-center justify-between gap-4">
+            <div class="min-w-0 text-sm font-semibold text-ngb-text truncate">{{ eventSummary(item) }}</div>
+            <div class="shrink-0 text-sm text-ngb-text whitespace-nowrap">{{ formatDateTime(item.occurredAtUtc) }}</div>
+          </div>
+
+          <div class="border border-ngb-border border-t-0">
+            <table class="w-full text-sm table-fixed">
+              <thead class="bg-ngb-bg text-ngb-muted text-xs">
+                <tr>
+                  <th class="w-[34%] px-4 py-2 text-left font-semibold border-r border-ngb-border">Field</th>
+                  <th class="w-[33%] px-4 py-2 text-left font-semibold border-r border-ngb-border">Original Value</th>
+                  <th class="w-[33%] px-4 py-2 text-left font-semibold">New Value</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="row in eventRows(item)" :key="`${item.auditEventId}:${row.field}`" class="border-t border-ngb-border">
+                  <td class="px-4 py-3 align-top border-r border-ngb-border break-words text-ngb-text">{{ row.field }}</td>
+                  <td class="px-4 py-3 align-top border-r border-ngb-border break-words text-ngb-text">{{ row.before }}</td>
+                  <td class="px-4 py-3 align-top break-words text-ngb-text">{{ row.after }}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </section>
+      </div>
+    </div>
+  </div>
+</template>

package/src/ngb/editor/NgbEntityEditor.vue

@@ -0,0 +1,250 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import NgbConfirmDialog from '../components/NgbConfirmDialog.vue';
+import NgbDrawer from '../components/NgbDrawer.vue';
+import NgbEntityForm from '../metadata/NgbEntityForm.vue';
+import type { DocumentStatusValue, EntityFormModel, FormMetadata } from '../metadata/types';
+import type { EditorErrorIssue, EditorErrorState } from './entityEditorErrors';
+import type { EntityEditorRenderExtension } from './extensions';
+import NgbEntityAuditSidebar from './NgbEntityAuditSidebar.vue';
+import NgbEditorDiscardDialog from './NgbEditorDiscardDialog.vue';
+import NgbEntityEditorHeader from './NgbEntityEditorHeader.vue';
+import type {
+  DocumentHeaderActionGroup,
+  DocumentHeaderActionItem,
+  EditorKind,
+  EditorMode,
+  EntityHeaderIconAction,
+} from './types';
+
+const props = withDefaults(defineProps<{
+  kind: EditorKind;
+  mode: EditorMode;
+  canBack?: boolean;
+  title: string;
+  subtitle?: string;
+  documentStatusLabel?: string;
+  documentStatusTone?: 'neutral' | 'success' | 'warn';
+  loading: boolean;
+  saving: boolean;
+  pageActions?: EntityHeaderIconAction[];
+  documentPrimaryActions?: DocumentHeaderActionItem[];
+  documentMoreActionGroups?: DocumentHeaderActionGroup[];
+  isNew: boolean;
+  isMarkedForDeletion: boolean;
+  displayedError?: EditorErrorState | null;
+  bannerIssues?: EditorErrorIssue[];
+  form?: FormMetadata | null;
+  model: EntityFormModel;
+  entityTypeCode: string;
+  status?: DocumentStatusValue;
+  isReadOnly?: boolean;
+  errors?: Record<string, string | string[] | null> | null;
+  afterFormExtensions?: EntityEditorRenderExtension[];
+  dialogExtensions?: EntityEditorRenderExtension[];
+  auditOpen?: boolean;
+  auditEntityKind?: number;
+  auditEntityId?: string | null;
+  auditEntityTitle?: string;
+  leaveOpen?: boolean;
+  markConfirmOpen?: boolean;
+  markConfirmMessage?: string;
+}>(), {
+  canBack: true,
+  subtitle: undefined,
+  documentStatusLabel: 'Draft',
+  documentStatusTone: 'neutral',
+  pageActions: () => [],
+  documentPrimaryActions: () => [],
+  documentMoreActionGroups: () => [],
+  displayedError: null,
+  bannerIssues: () => [],
+  form: null,
+  status: undefined,
+  isReadOnly: false,
+  errors: null,
+  afterFormExtensions: () => [],
+  dialogExtensions: () => [],
+  auditOpen: false,
+  auditEntityKind: 0,
+  auditEntityId: null,
+  auditEntityTitle: '',
+  leaveOpen: false,
+  markConfirmOpen: false,
+  markConfirmMessage: '',
+});
+
+const emit = defineEmits<{
+  (e: 'back'): void;
+  (e: 'close'): void;
+  (e: 'action', action: string): void;
+  (e: 'closeAuditLog'): void;
+  (e: 'cancelLeave'): void;
+  (e: 'confirmLeave'): void;
+  (e: 'cancelMarkForDeletion'): void;
+  (e: 'confirmMarkForDeletion'): void;
+}>();
+
+const formRef = ref<InstanceType<typeof NgbEntityForm> | null>(null);
+
+const visibleBannerIssues = computed(() => {
+  const summary = normalizeBannerText(props.displayedError?.summary);
+
+  return props.bannerIssues.filter((issue) => {
+    if (issue.path !== '_form') return true;
+    return normalizeBannerText(issue.messages.join(' ')) !== summary;
+  });
+});
+
+function focusField(path: string): boolean {
+  return !!formRef.value?.focusField?.(path);
+}
+
+function focusFirstError(keys: string[]): boolean {
+  return !!formRef.value?.focusFirstError?.(keys);
+}
+
+defineExpose({
+  focusField,
+  focusFirstError,
+});
+
+function normalizeBannerText(value: string | null | undefined): string {
+  return String(value ?? '')
+    .trim()
+    .replace(/\s+/g, ' ')
+    .toLowerCase();
+}
+</script>
+
+<template>
+  <div :class="mode === 'page' ? 'flex h-full min-h-0 flex-col' : 'flex flex-col'">
+    <NgbEntityEditorHeader
+      :kind="kind"
+      :mode="mode"
+      :can-back="canBack"
+      :title="title"
+      :subtitle="subtitle"
+      :document-status-label="documentStatusLabel"
+      :document-status-tone="documentStatusTone"
+      :loading="loading"
+      :saving="saving"
+      :page-actions="pageActions"
+      :document-primary-actions="documentPrimaryActions"
+      :document-more-action-groups="documentMoreActionGroups"
+      @back="emit('back')"
+      @close="emit('close')"
+      @action="(action) => emit('action', action)"
+    />
+
+    <div :class="mode === 'page' ? 'min-h-0 flex-1 overflow-auto p-6' : 'px-5 py-4'">
+      <div
+        v-if="!isNew && isMarkedForDeletion"
+        class="mb-4 flex items-start justify-between gap-3 rounded-[var(--ngb-radius)] border border-red-200 bg-red-50 p-3 dark:border-red-900/50 dark:bg-red-950/30"
+      >
+        <div class="min-w-0">
+          <div class="text-sm font-semibold text-ngb-danger">Deleted</div>
+          <div class="mt-1 text-sm text-ngb-muted">
+            This {{ kind === 'catalog' ? 'record' : 'document' }} is marked for deletion. Restore it to edit or post.
+          </div>
+        </div>
+      </div>
+
+      <div
+        v-if="displayedError"
+        class="mb-4 rounded-[var(--ngb-radius)] border border-red-200 bg-red-50 p-3 text-sm text-red-900 dark:border-red-900/50 dark:bg-red-950/30 dark:text-red-100"
+      >
+        <div class="font-medium leading-6">{{ displayedError.summary }}</div>
+        <ul v-if="visibleBannerIssues.length" class="mt-2 list-disc space-y-1 pl-5">
+          <li v-for="issue in visibleBannerIssues" :key="`${issue.scope}:${issue.path}:${issue.messages.join('|')}`">
+            <template v-if="issue.path === '_form'">
+              <span class="font-medium">{{ issue.messages.join(' ') }}</span>
+            </template>
+            <template v-else>
+              <span class="font-medium">{{ issue.label }}:</span>
+              <span> {{ issue.messages.join(' ') }}</span>
+            </template>
+          </li>
+        </ul>
+      </div>
+
+      <div v-if="loading" class="text-sm text-ngb-muted">Loading…</div>
+
+      <div v-else class="space-y-4">
+        <template v-if="form">
+          <NgbEntityForm
+            ref="formRef"
+            :form="form"
+            :model="model"
+            :entity-type-code="entityTypeCode"
+            :status="kind === 'document' ? status : undefined"
+            :force-readonly="isReadOnly"
+            :presentation="mode === 'drawer' ? 'flat' : 'sections'"
+            :errors="errors"
+          />
+
+          <component
+            :is="extension.component"
+            v-for="extension in afterFormExtensions"
+            :key="extension.key"
+            :ref="extension.componentRef ?? undefined"
+            v-bind="extension.props"
+          />
+
+          <slot name="after-form" />
+        </template>
+
+        <div v-else class="text-sm text-ngb-muted">No form metadata available.</div>
+      </div>
+    </div>
+
+    <component
+      :is="extension.component"
+      v-for="extension in dialogExtensions"
+      :key="extension.key"
+      :ref="extension.componentRef ?? undefined"
+      v-bind="extension.props"
+    />
+
+    <slot name="dialogs" />
+
+    <NgbDrawer
+      :open="auditOpen"
+      title="Audit Log"
+      hide-header
+      flush-body
+      @update:open="(value) => (!value ? emit('closeAuditLog') : null)"
+    >
+      <NgbEntityAuditSidebar
+        :open="auditOpen"
+        :entity-kind="auditEntityKind"
+        :entity-id="auditEntityId"
+        :entity-title="auditEntityTitle"
+        @back="emit('closeAuditLog')"
+        @close="emit('closeAuditLog')"
+      />
+    </NgbDrawer>
+
+    <NgbEditorDiscardDialog
+      :open="leaveOpen"
+      title="Discard changes?"
+      message="You have unsaved changes. If you leave now, they won’t be saved."
+      confirm-text="Leave"
+      cancel-text="Stay"
+      @cancel="emit('cancelLeave')"
+      @confirm="emit('confirmLeave')"
+    />
+
+    <NgbConfirmDialog
+      :open="markConfirmOpen"
+      title="Mark for deletion?"
+      :message="markConfirmMessage"
+      confirm-text="Mark"
+      cancel-text="Cancel"
+      danger
+      @update:open="(value) => (!value ? emit('cancelMarkForDeletion') : null)"
+      @confirm="emit('confirmMarkForDeletion')"
+    />
+  </div>
+</template>

package/src/ngb/editor/NgbEntityEditorDrawerActions.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import NgbIcon from '../primitives/NgbIcon.vue';
+
+import type { EntityEditorFlags, EntityHeaderIconAction } from './types';
+
+const props = withDefaults(defineProps<{
+  flags: EntityEditorFlags;
+  extraActions?: EntityHeaderIconAction[];
+  restoreTitle?: string;
+  markForDeletionTitle?: string;
+}>(), {
+  extraActions: () => [],
+  restoreTitle: 'Unmark for deletion',
+  markForDeletionTitle: 'Mark for deletion',
+});
+
+const emit = defineEmits<{
+  (e: 'action', action: string): void;
+}>();
+
+const actionDisabled = computed(() => props.flags.loading || props.flags.saving);
+const markTitle = computed(() => props.flags.canUnmarkForDeletion ? props.restoreTitle : props.markForDeletionTitle);
+const markIcon = computed(() => props.flags.canUnmarkForDeletion ? 'trash-restore' : 'trash');
+</script>
+
+<template>
+  <button
+    v-if="flags.canExpand"
+    class="ngb-iconbtn"
+    :disabled="actionDisabled"
+    title="Open full page"
+    @click="emit('action', 'expand')"
+  >
+    <NgbIcon name="open-in-new" />
+  </button>
+
+  <button
+    v-if="flags.canShareLink"
+    class="ngb-iconbtn"
+    :disabled="actionDisabled"
+    title="Share link"
+    @click="emit('action', 'share')"
+  >
+    <NgbIcon name="share" />
+  </button>
+
+  <button
+    v-if="flags.canShowAudit"
+    class="ngb-iconbtn"
+    :disabled="actionDisabled"
+    title="Audit log"
+    @click="emit('action', 'audit')"
+  >
+    <NgbIcon name="history" />
+  </button>
+
+  <button
+    v-if="flags.canMarkForDeletion || flags.canUnmarkForDeletion"
+    class="ngb-iconbtn"
+    :disabled="actionDisabled"
+    :title="markTitle"
+    @click="emit('action', 'mark')"
+  >
+    <NgbIcon :name="markIcon" />
+  </button>
+
+  <button
+    v-for="item in extraActions"
+    :key="item.key"
+    class="ngb-iconbtn"
+    :disabled="item.disabled"
+    :title="item.title"
+    @click="emit('action', item.key)"
+  >
+    <NgbIcon :name="item.icon" />
+  </button>
+
+  <button
+    class="ngb-iconbtn"
+    :disabled="actionDisabled || !flags.canSave"
+    title="Save"
+    @click="emit('action', 'save')"
+  >
+    <NgbIcon name="save" />
+  </button>
+</template>