Migrate frontend prefix to -pngx

src-ui/.eslintrc.json

@@ -24,7 +24,7 @@
           "error",
           {
             "type": "attribute",
-            "prefix": "app",
+            "prefix": "pngx",
             "style": "camelCase"
           }
         ],
@@ -32,7 +32,7 @@
           "error",
           {
             "type": "element",
-            "prefix": "app",
+            "prefix": "pngx",
             "style": "kebab-case"
           }
         ]

src-ui/angular.json

@@ -12,7 +12,7 @@
       },
       "root": "",
       "sourceRoot": "src",
-      "prefix": "app",
+      "prefix": "pngx",
       "i18n": {
         "sourceLocale": "en-US",
         "locales": {

src-ui/e2e/dashboard/dashboard.spec.ts

@@ -10,7 +10,7 @@ test('dashboard inbox link', async ({ page }) => {
   await page.goto('/dashboard')
   await page.getByRole('link', { name: 'Documents in inbox' }).click()
   await expect(page).toHaveURL(/tags__id__all=9/)
-  await expect(page.locator('app-document-list')).toHaveText(/8 documents/)
+  await expect(page.locator('pngx-document-list')).toHaveText(/8 documents/)
 })
 
 test('dashboard total documents link', async ({ page }) => {
@@ -18,7 +18,7 @@ test('dashboard total documents link', async ({ page }) => {
   await page.goto('/dashboard')
   await page.getByRole('link').filter({ hasText: 'Total documents' }).click()
   await expect(page).toHaveURL(/documents/)
-  await expect(page.locator('app-document-list')).toHaveText(/61 documents/)
+  await expect(page.locator('pngx-document-list')).toHaveText(/61 documents/)
   await page.getByRole('button', { name: 'Reset filters' })
 })
 
@@ -26,19 +26,19 @@ test('dashboard saved view show all', async ({ page }) => {
   await page.routeFromHAR(REQUESTS_HAR3, { notFound: 'fallback' })
   await page.goto('/dashboard')
   await page
-    .locator('app-widget-frame')
+    .locator('pngx-widget-frame')
     .filter({ hasText: 'Inbox' })
     .getByRole('link', { name: 'Show all' })
     .click()
   await expect(page).toHaveURL(/view\/7/)
-  await expect(page.locator('app-document-list')).toHaveText(/8 documents/)
+  await expect(page.locator('pngx-document-list')).toHaveText(/8 documents/)
 })
 
 test('dashboard saved view document links', async ({ page }) => {
   await page.routeFromHAR(REQUESTS_HAR4, { notFound: 'fallback' })
   await page.goto('/dashboard')
   await page
-    .locator('app-widget-frame')
+    .locator('pngx-widget-frame')
     .filter({ hasText: 'Inbox' })
     .locator('table')
     .getByRole('link', { name: /test/ })

src-ui/e2e/document-detail/document-detail.spec.ts

@@ -8,7 +8,7 @@ test('should activate / deactivate save button when changes are saved', async ({
 }) => {
   await page.routeFromHAR(REQUESTS_HAR, { notFound: 'fallback' })
   await page.goto('/documents/175/')
-  await page.waitForSelector('app-document-detail app-input-text:first-child')
+  await page.waitForSelector('pngx-document-detail pngx-input-text:first-child')
   await expect(page.getByTitle('Storage path', { exact: true })).toHaveText(
     /\w+/
   )
@@ -85,7 +85,7 @@ test('should show a mobile preview', async ({ page }) => {
 test('should show a list of notes', async ({ page }) => {
   await page.routeFromHAR(REQUESTS_HAR, { notFound: 'fallback' })
   await page.goto('/documents/175/notes')
-  await expect(page.locator('app-document-notes')).toBeVisible()
+  await expect(page.locator('pngx-document-notes')).toBeVisible()
   await expect(
     await page.getByRole('button', {
       name: /delete note/i,

src-ui/e2e/document-list/document-list.spec.ts

@@ -13,33 +13,33 @@ test('basic filtering', async ({ page }) => {
   await page.getByRole('button', { name: 'Tags' }).click()
   await page.getByRole('menuitem', { name: 'Inbox' }).click()
   await expect(page).toHaveURL(/tags__id__all=9/)
-  await expect(page.locator('app-document-list')).toHaveText(/8 documents/)
+  await expect(page.locator('pngx-document-list')).toHaveText(/8 documents/)
   await page.getByRole('button', { name: 'Document type' }).click()
   await page.getByRole('menuitem', { name: 'Invoice Test 3' }).click()
   await expect(page).toHaveURL(/document_type__id__in=1/)
-  await expect(page.locator('app-document-list')).toHaveText(/3 documents/)
+  await expect(page.locator('pngx-document-list')).toHaveText(/3 documents/)
   await page.getByRole('button', { name: 'Reset filters' }).first().click()
   await page.getByRole('button', { name: 'Correspondent' }).click()
   await page.getByRole('menuitem', { name: 'Test Correspondent 1' }).click()
   await page.getByRole('menuitem', { name: 'Correspondent 9' }).click()
   await expect(page).toHaveURL(/correspondent__id__in=12,1/)
-  await expect(page.locator('app-document-list')).toHaveText(/7 documents/)
+  await expect(page.locator('pngx-document-list')).toHaveText(/7 documents/)
   await page
-    .locator('app-filter-editor')
+    .locator('pngx-filter-editor')
     .getByTitle('Correspondent')
     .getByText('Exclude')
     .click()
   await expect(page).toHaveURL(/correspondent__id__none=12,1/)
-  await expect(page.locator('app-document-list')).toHaveText(/54 documents/)
+  await expect(page.locator('pngx-document-list')).toHaveText(/54 documents/)
   // clear button
   await page.getByRole('button', { name: '2 selected', exact: true }).click()
-  await expect(page.locator('app-document-list')).toHaveText(/61 documents/)
+  await expect(page.locator('pngx-document-list')).toHaveText(/61 documents/)
   await page.getByRole('button', { name: 'Storage path' }).click()
   await page.getByRole('menuitem', { name: 'Testing 12' }).click()
   await expect(page).toHaveURL(/storage_path__id__in=5/)
-  await expect(page.locator('app-document-list')).toHaveText(/8 documents/)
+  await expect(page.locator('pngx-document-list')).toHaveText(/8 documents/)
   await page.getByRole('button', { name: 'Reset filters' }).first().click()
-  await expect(page.locator('app-document-list')).toHaveText(/61 documents/)
+  await expect(page.locator('pngx-document-list')).toHaveText(/61 documents/)
 })
 
 test('text filtering', async ({ page }) => {
@@ -47,35 +47,35 @@ test('text filtering', async ({ page }) => {
   await page.goto('/documents')
   await page.getByRole('textbox').click()
   await page.getByRole('textbox').fill('test')
-  await expect(page.locator('app-document-list')).toHaveText(/32 documents/)
+  await expect(page.locator('pngx-document-list')).toHaveText(/32 documents/)
   await expect(page).toHaveURL(/title_content=test/)
   await page.getByRole('button', { name: 'Title & content' }).click()
   await page.getByRole('button', { name: 'Title', exact: true }).click()
-  await expect(page.locator('app-document-list')).toHaveText(/9 documents/)
+  await expect(page.locator('pngx-document-list')).toHaveText(/9 documents/)
   await expect(page).toHaveURL(/title__icontains=test/)
   await page.getByRole('button', { name: 'Title', exact: true }).click()
   await page.getByRole('button', { name: 'Advanced search' }).click()
   await expect(page).toHaveURL(/query=test/)
-  await expect(page.locator('app-document-list')).toHaveText(/26 documents/)
+  await expect(page.locator('pngx-document-list')).toHaveText(/26 documents/)
   await page.getByRole('button', { name: 'Advanced search' }).click()
   await page.getByRole('button', { name: 'ASN' }).click()
   await page.getByRole('textbox').fill('1123')
   await expect(page).toHaveURL(/archive_serial_number=1123/)
-  await expect(page.locator('app-document-list')).toHaveText(/one document/i)
+  await expect(page.locator('pngx-document-list')).toHaveText(/one document/i)
   await page.locator('select').selectOption('greater')
   await page.getByRole('textbox').click()
   await page.getByRole('textbox').fill('1123')
   await expect(page).toHaveURL(/archive_serial_number__gt=1123/)
-  await expect(page.locator('app-document-list')).toHaveText(/5 documents/)
+  await expect(page.locator('pngx-document-list')).toHaveText(/5 documents/)
   await page.locator('select').selectOption('less')
   await expect(page).toHaveURL(/archive_serial_number__lt=1123/)
-  await expect(page.locator('app-document-list')).toHaveText(/0 documents/)
+  await expect(page.locator('pngx-document-list')).toHaveText(/0 documents/)
   await page.locator('select').selectOption('is null')
   await expect(page).toHaveURL(/archive_serial_number__isnull=1/)
-  await expect(page.locator('app-document-list')).toHaveText(/55 documents/)
+  await expect(page.locator('pngx-document-list')).toHaveText(/55 documents/)
   await page.locator('select').selectOption('not null')
   await expect(page).toHaveURL(/archive_serial_number__isnull=0/)
-  await expect(page.locator('app-document-list')).toHaveText(/6 documents/)
+  await expect(page.locator('pngx-document-list')).toHaveText(/6 documents/)
 })
 
 test('date filtering', async ({ page }) => {
@@ -83,7 +83,7 @@ test('date filtering', async ({ page }) => {
   await page.goto('/documents')
   await page.getByRole('button', { name: 'Created' }).click()
   await page.getByRole('menuitem', { name: 'Last 3 months' }).click()
-  await expect(page.locator('app-document-list')).toHaveText(/one document/i)
+  await expect(page.locator('pngx-document-list')).toHaveText(/one document/i)
   await page.getByRole('button', { name: 'Created Clear selected' }).click()
   await page.getByRole('button', { name: 'Created' }).click()
   await page
@@ -94,7 +94,7 @@ test('date filtering', async ({ page }) => {
   await page.getByRole('combobox', { name: 'Select year' }).selectOption('2022')
   await page.getByText('11', { exact: true }).click()
   await page.getByRole('button', { name: 'Title & content' }).click()
-  await expect(page.locator('app-document-list')).toHaveText(/2 documents/)
+  await expect(page.locator('pngx-document-list')).toHaveText(/2 documents/)
 })
 
 test('sorting', async ({ page }) => {
@@ -105,7 +105,7 @@ test('sorting', async ({ page }) => {
   await expect(page).toHaveURL(/sort=archive_serial_number/)
   await page.getByRole('button', { name: 'Sort' }).click()
   await page
-    .locator('app-page-header')
+    .locator('pngx-page-header')
     .getByRole('button', { name: 'Correspondent' })
     .click()
   await expect(page).toHaveURL(/sort=correspondent__name/)
@@ -114,7 +114,7 @@ test('sorting', async ({ page }) => {
   await expect(page).toHaveURL(/sort=title/)
   await page.getByRole('button', { name: 'Sort' }).click()
   await page
-    .locator('app-page-header')
+    .locator('pngx-page-header')
     .getByRole('button', { name: 'Document type' })
     .click()
   await expect(page).toHaveURL(/sort=document_type__name/)
@@ -138,42 +138,42 @@ test('sorting', async ({ page }) => {
 test('change views', async ({ page }) => {
   await page.routeFromHAR(REQUESTS_HAR5, { notFound: 'fallback' })
   await page.goto('/documents')
-  await page.locator('app-page-header label').first().click()
-  await expect(page.locator('app-document-list table')).toBeVisible()
-  await page.locator('app-page-header label').nth(1).click()
-  await expect(page.locator('app-document-card-small').first()).toBeAttached()
-  await page.locator('app-page-header label').nth(2).click()
-  await expect(page.locator('app-document-card-large').first()).toBeAttached()
+  await page.locator('pngx-page-header label').first().click()
+  await expect(page.locator('pngx-document-list table')).toBeVisible()
+  await page.locator('pngx-page-header label').nth(1).click()
+  await expect(page.locator('pngx-document-card-small').first()).toBeAttached()
+  await page.locator('pngx-page-header label').nth(2).click()
+  await expect(page.locator('pngx-document-card-large').first()).toBeAttached()
 })
 
 test('bulk edit', async ({ page }) => {
   await page.routeFromHAR(REQUESTS_HAR6, { notFound: 'fallback' })
   await page.goto('/documents')
 
-  await page.locator('app-document-card-small').nth(0).click()
+  await page.locator('pngx-document-card-small').nth(0).click()
   await page
-    .locator('app-document-card-small')
+    .locator('pngx-document-card-small')
     .nth(3)
     .click({
       modifiers: ['Shift'],
     })
 
-  await expect(page.locator('app-document-list')).toHaveText(
+  await expect(page.locator('pngx-document-list')).toHaveText(
     /Selected 4 of 61 documents/i
   )
 
   await page.getByRole('button', { name: 'Page' }).click()
-  await expect(page.locator('app-document-list')).toHaveText(
+  await expect(page.locator('pngx-document-list')).toHaveText(
     /Selected 50 of 61 documents/i
   )
   await page.getByRole('button', { name: 'All' }).click()
-  await expect(page.locator('app-document-list')).toHaveText(
+  await expect(page.locator('pngx-document-list')).toHaveText(
     /Selected 61 of 61 documents/i
   )
   await page.getByRole('button', { name: 'Cancel' }).click()
 
-  await page.locator('app-document-card-small').nth(1).click()
-  await page.locator('app-document-card-small').nth(2).click()
+  await page.locator('pngx-document-card-small').nth(1).click()
+  await page.locator('pngx-document-card-small').nth(2).click()
 
   await page.getByRole('button', { name: 'Tags' }).click()
   await page.getByRole('menuitem', { name: 'TagWithPartial' }).click()

src-ui/src/app/app.component.html

@@ -1,4 +1,4 @@
-<app-toasts></app-toasts>
+<pngx-toasts></pngx-toasts>
 
 <ngx-file-drop dropZoneClassName="main-dropzone" contentClassName="main-content" [disabled]="!dragDropEnabled"
 (onFileDrop)="dropped($event)" (onFileOver)="fileOver()" (onFileLeave)="fileLeave()">

src-ui/src/app/app.component.ts

@@ -16,7 +16,7 @@ import {
 } from './services/permissions.service'
 
 @Component({
-  selector: 'app-root',
+  selector: 'pngx-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
 })

src-ui/src/app/components/app-frame/app-frame.component.html

@@ -10,7 +10,7 @@
     </svg>
     <span class="ms-2" [class.visually-hidden]="slimSidebarEnabled" i18n="app title">Paperless-ngx</span>
   </a>
-  <div class="search-form-container flex-grow-1 py-2 pb-3 pb-sm-2 px-3 ps-md-4 me-sm-auto order-3 order-sm-1" *appIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }">
+  <div class="search-form-container flex-grow-1 py-2 pb-3 pb-sm-2 px-3 ps-md-4 me-sm-auto order-3 order-sm-1" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }">
     <form (ngSubmit)="search()" class="form-inline flex-grow-1">
       <svg width="1em" height="1em" fill="currentColor">
         <use xlink:href="assets/bootstrap-icons.svg#search"/>
@@ -39,7 +39,7 @@
           <p class="small mb-0 px-3 text-muted" i18n>Logged in as {{this.settingsService.displayName}}</p>
           <div class="dropdown-divider"></div>
         </div>
-        <a ngbDropdownItem class="nav-link" routerLink="settings" (click)="closeMenu()" *appIfPermissions="{ action: PermissionAction.View, type: PermissionType.UISettings }">
+        <a ngbDropdownItem class="nav-link" routerLink="settings" (click)="closeMenu()" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.UISettings }">
           <svg class="sidebaricon me-2" fill="currentColor">
             <use xlink:href="assets/bootstrap-icons.svg#gear"/>
           </svg><ng-container i18n>Settings</ng-container>
@@ -72,7 +72,7 @@
               </svg><span>&nbsp;<ng-container i18n>Dashboard</ng-container></span>
             </a>
           </li>
-          <li class="nav-item" *appIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }">
+          <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }">
             <a class="nav-link" routerLink="documents" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Documents" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
               <svg class="sidebaricon" fill="currentColor">
                 <use xlink:href="assets/bootstrap-icons.svg#files"/>
@@ -80,7 +80,7 @@
             </a>
           </li>
         </ul>
-        <div *appIfPermissions="{ action: PermissionAction.View, type: PermissionType.SavedView }">
+        <div *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.SavedView }">
           <h6 class="sidebar-heading px-3 mt-4 mb-1 text-muted" *ngIf='savedViewService.loading || savedViewService.sidebarViews.length > 0'>
             <span i18n>Saved views</span>
             <div *ngIf="savedViewService.loading" class="spinner-border spinner-border-sm fw-normal ms-2" role="status"></div>
@@ -96,7 +96,7 @@
           </ul>
         </div>
 
-        <div *appIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }">
+        <div *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }">
           <h6 class="sidebar-heading px-3 mt-4 mb-1 text-muted" *ngIf='openDocuments.length > 0'>
             <span i18n>Open documents</span>
           </h6>
@@ -127,35 +127,35 @@
           <span i18n>Manage</span>
         </h6>
         <ul class="nav flex-column mb-2">
-          <li class="nav-item" *appIfPermissions="{ action: PermissionAction.View, type: PermissionType.Correspondent }">
+          <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Correspondent }">
             <a class="nav-link" routerLink="correspondents" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Correspondents" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
               <svg class="sidebaricon" fill="currentColor">
                 <use xlink:href="assets/bootstrap-icons.svg#person"/>
               </svg><span>&nbsp;<ng-container i18n>Correspondents</ng-container></span>
             </a>
           </li>
-          <li class="nav-item" *appIfPermissions="{ action: PermissionAction.View, type: PermissionType.Tag }" tourAnchor="tour.tags">
+          <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Tag }" tourAnchor="tour.tags">
             <a class="nav-link" routerLink="tags" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Tags" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
               <svg class="sidebaricon" fill="currentColor">
                 <use xlink:href="assets/bootstrap-icons.svg#tags"/>
               </svg><span>&nbsp;<ng-container i18n>Tags</ng-container></span>
             </a>
           </li>
-          <li class="nav-item" *appIfPermissions="{ action: PermissionAction.View, type: PermissionType.DocumentType }">
+          <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.DocumentType }">
             <a class="nav-link" routerLink="documenttypes" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Document types" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
               <svg class="sidebaricon" fill="currentColor">
                 <use xlink:href="assets/bootstrap-icons.svg#hash"/>
               </svg><span>&nbsp;<ng-container i18n>Document types</ng-container></span>
             </a>
           </li>
-          <li class="nav-item" *appIfPermissions="{ action: PermissionAction.View, type: PermissionType.StoragePath }">
+          <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.StoragePath }">
             <a class="nav-link" routerLink="storagepaths" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Storage paths" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
               <svg class="sidebaricon" fill="currentColor">
                 <use xlink:href="assets/bootstrap-icons.svg#folder"/>
               </svg><span>&nbsp;<ng-container i18n>Storage paths</ng-container></span>
             </a>
           </li>
-          <li class="nav-item" *appIfPermissions="{ action: PermissionAction.View, type: PermissionType.PaperlessTask }" tourAnchor="tour.file-tasks">
+          <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.PaperlessTask }" tourAnchor="tour.file-tasks">
             <a class="nav-link" routerLink="tasks" routerLinkActive="active" (click)="closeMenu()" ngbPopover="File Tasks" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
               <span *ngIf="tasksService.failedFileTasks.length > 0 && slimSidebarEnabled" class="badge bg-danger position-absolute top-0 end-0">{{tasksService.failedFileTasks.length}}</span>
               <svg class="sidebaricon" fill="currentColor">
@@ -163,14 +163,14 @@
               </svg><span>&nbsp;<ng-container i18n>File Tasks<span *ngIf="tasksService.failedFileTasks.length > 0"><span class="badge bg-danger ms-2">{{tasksService.failedFileTasks.length}}</span></span></ng-container></span>
             </a>
           </li>
-          <li class="nav-item" *appIfPermissions="{ action: PermissionAction.View, type: PermissionType.Admin }">
+          <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Admin }">
             <a class="nav-link" routerLink="logs" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Logs" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
               <svg class="sidebaricon" fill="currentColor">
                 <use xlink:href="assets/bootstrap-icons.svg#text-left"/>
               </svg><span>&nbsp;<ng-container i18n>Logs</ng-container></span>
             </a>
           </li>
-          <li class="nav-item" *appIfPermissions="{ action: PermissionAction.View, type: PermissionType.UISettings }" tourAnchor="tour.settings">
+          <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.UISettings }" tourAnchor="tour.settings">
             <a class="nav-link" routerLink="settings" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Settings" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
               <svg class="sidebaricon" fill="currentColor">
                 <use xlink:href="assets/bootstrap-icons.svg#gear"/>

src-ui/src/app/components/app-frame/app-frame.component.ts

@@ -34,7 +34,7 @@ import {
 } from 'src/app/services/permissions.service'
 
 @Component({
-  selector: 'app-app-frame',
+  selector: 'pngx-app-frame',
   templateUrl: './app-frame.component.html',
   styleUrls: ['./app-frame.component.scss'],
 })

src-ui/src/app/components/common/clearable-badge/clearable-badge.component.ts

@@ -1,7 +1,7 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core'
 
 @Component({
-  selector: 'app-clearable-badge',
+  selector: 'pngx-clearable-badge',
   templateUrl: './clearable-badge.component.html',
   styleUrls: ['./clearable-badge.component.scss'],
 })

src-ui/src/app/components/common/confirm-dialog/confirm-dialog.component.ts

@@ -3,7 +3,7 @@ import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { interval, Subject, take } from 'rxjs'
 
 @Component({
-  selector: 'app-confirm-dialog',
+  selector: 'pngx-confirm-dialog',
   templateUrl: './confirm-dialog.component.html',
   styleUrls: ['./confirm-dialog.component.scss'],
 })

src-ui/src/app/components/common/date-dropdown/date-dropdown.component.html

@@ -1,7 +1,7 @@
   <div class="btn-group w-100" ngbDropdown role="group">
   <button class="btn btn-sm" id="dropdown{{title}}" ngbDropdownToggle [ngClass]="dateBefore || dateAfter ? 'btn-primary' : 'btn-outline-primary'" [disabled]="disabled">
     {{title}}
-    <app-clearable-badge [selected]="isActive" (cleared)="reset()"></app-clearable-badge><span class="visually-hidden">selected</span>
+    <pngx-clearable-badge [selected]="isActive" (cleared)="reset()"></pngx-clearable-badge><span class="visually-hidden">selected</span>
   </button>
   <div class="dropdown-menu date-dropdown shadow pt-0" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}">
     <div class="list-group list-group-flush">

src-ui/src/app/components/common/date-dropdown/date-dropdown.component.ts

@@ -26,7 +26,7 @@ export enum RelativeDate {
 }
 
 @Component({
-  selector: 'app-date-dropdown',
+  selector: 'pngx-date-dropdown',
   templateUrl: './date-dropdown.component.html',
   styleUrls: ['./date-dropdown.component.scss'],
   providers: [{ provide: NgbDateAdapter, useClass: ISODateAdapter }],

src-ui/src/app/components/common/edit-dialog/correspondent-edit-dialog/correspondent-edit-dialog.component.html

@@ -6,13 +6,13 @@
   </div>
   <div class="modal-body">
 
-    <app-input-text i18n-title title="Name" formControlName="name" [error]="error?.name"></app-input-text>
-    <app-input-select i18n-title title="Matching algorithm" [items]="getMatchingAlgorithms()" formControlName="matching_algorithm"></app-input-select>
-    <app-input-text *ngIf="patternRequired" i18n-title title="Matching pattern" formControlName="match" [error]="error?.match"></app-input-text>
-    <app-input-check *ngIf="patternRequired" i18n-title title="Case insensitive" formControlName="is_insensitive" novalidate></app-input-check>
+    <pngx-input-text i18n-title title="Name" formControlName="name" [error]="error?.name"></pngx-input-text>
+    <pngx-input-select i18n-title title="Matching algorithm" [items]="getMatchingAlgorithms()" formControlName="matching_algorithm"></pngx-input-select>
+    <pngx-input-text *ngIf="patternRequired" i18n-title title="Matching pattern" formControlName="match" [error]="error?.match"></pngx-input-text>
+    <pngx-input-check *ngIf="patternRequired" i18n-title title="Case insensitive" formControlName="is_insensitive" novalidate></pngx-input-check>
 
-    <div *appIfOwner="object">
-      <app-permissions-form [users]="users" accordion="true" formControlName="permissions_form"></app-permissions-form>
+    <div *pngxIfOwner="object">
+      <pngx-permissions-form [users]="users" accordion="true" formControlName="permissions_form"></pngx-permissions-form>
     </div>
 
   </div>

src-ui/src/app/components/common/edit-dialog/correspondent-edit-dialog/correspondent-edit-dialog.component.ts

@@ -9,7 +9,7 @@ import { UserService } from 'src/app/services/rest/user.service'
 import { SettingsService } from 'src/app/services/settings.service'
 
 @Component({
-  selector: 'app-correspondent-edit-dialog',
+  selector: 'pngx-correspondent-edit-dialog',
   templateUrl: './correspondent-edit-dialog.component.html',
   styleUrls: ['./correspondent-edit-dialog.component.scss'],
 })

src-ui/src/app/components/common/edit-dialog/document-type-edit-dialog/document-type-edit-dialog.component.html

@@ -7,14 +7,14 @@
     <div class="modal-body">
 
       <div class="col">
-        <app-input-text i18n-title title="Name" formControlName="name" [error]="error?.name"></app-input-text>
-        <app-input-select i18n-title title="Matching algorithm" [items]="getMatchingAlgorithms()" formControlName="matching_algorithm"></app-input-select>
-        <app-input-text *ngIf="patternRequired" i18n-title title="Matching pattern" formControlName="match" [error]="error?.match"></app-input-text>
-        <app-input-check *ngIf="patternRequired" i18n-title title="Case insensitive" formControlName="is_insensitive"></app-input-check>
+        <pngx-input-text i18n-title title="Name" formControlName="name" [error]="error?.name"></pngx-input-text>
+        <pngx-input-select i18n-title title="Matching algorithm" [items]="getMatchingAlgorithms()" formControlName="matching_algorithm"></pngx-input-select>
+        <pngx-input-text *ngIf="patternRequired" i18n-title title="Matching pattern" formControlName="match" [error]="error?.match"></pngx-input-text>
+        <pngx-input-check *ngIf="patternRequired" i18n-title title="Case insensitive" formControlName="is_insensitive"></pngx-input-check>
       </div>
 
-      <div *appIfOwner="object">
-        <app-permissions-form [users]="users" accordion="true" formControlName="permissions_form"></app-permissions-form>
+      <div *pngxIfOwner="object">
+        <pngx-permissions-form [users]="users" accordion="true" formControlName="permissions_form"></pngx-permissions-form>
       </div>
 
     </div>

src-ui/src/app/components/common/edit-dialog/document-type-edit-dialog/document-type-edit-dialog.component.ts

@@ -9,7 +9,7 @@ import { UserService } from 'src/app/services/rest/user.service'
 import { SettingsService } from 'src/app/services/settings.service'
 
 @Component({
-  selector: 'app-document-type-edit-dialog',
+  selector: 'pngx-document-type-edit-dialog',
   templateUrl: './document-type-edit-dialog.component.html',
   styleUrls: ['./document-type-edit-dialog.component.scss'],
 })

src-ui/src/app/components/common/edit-dialog/group-edit-dialog/group-edit-dialog.component.html

@@ -7,8 +7,8 @@
     <div class="modal-body">
       <div class="row">
         <div class="col">
-          <app-input-text i18n-title title="Name" formControlName="name" [error]="error?.name"></app-input-text>
-          <app-permissions-select i18n-title title="Permissions" formControlName="permissions" [error]="error?.permissions"></app-permissions-select>
+          <pngx-input-text i18n-title title="Name" formControlName="name" [error]="error?.name"></pngx-input-text>
+          <pngx-permissions-select i18n-title title="Permissions" formControlName="permissions" [error]="error?.permissions"></pngx-permissions-select>
         </div>
       </div>
     </div>

src-ui/src/app/components/common/edit-dialog/group-edit-dialog/group-edit-dialog.component.ts

@@ -8,7 +8,7 @@ import { UserService } from 'src/app/services/rest/user.service'
 import { SettingsService } from 'src/app/services/settings.service'
 
 @Component({
-  selector: 'app-group-edit-dialog',
+  selector: 'pngx-group-edit-dialog',
   templateUrl: './group-edit-dialog.component.html',
   styleUrls: ['./group-edit-dialog.component.scss'],
 })

src-ui/src/app/components/common/edit-dialog/mail-account-edit-dialog/mail-account-edit-dialog.component.html

@@ -7,16 +7,16 @@
   <div class="modal-body">
     <div class="row">
       <div class="col">
-        <app-input-text i18n-title title="Name" formControlName="name" [error]="error?.name"></app-input-text>
-        <app-input-text i18n-title title="IMAP Server" formControlName="imap_server" [error]="error?.imap_server"></app-input-text>
-        <app-input-text i18n-title title="IMAP Port" formControlName="imap_port" [error]="error?.imap_port"></app-input-text>
-        <app-input-select i18n-title title="IMAP Security" [items]="imapSecurityOptions" formControlName="imap_security"></app-input-select>
+        <pngx-input-text i18n-title title="Name" formControlName="name" [error]="error?.name"></pngx-input-text>
+        <pngx-input-text i18n-title title="IMAP Server" formControlName="imap_server" [error]="error?.imap_server"></pngx-input-text>
+        <pngx-input-text i18n-title title="IMAP Port" formControlName="imap_port" [error]="error?.imap_port"></pngx-input-text>
+        <pngx-input-select i18n-title title="IMAP Security" [items]="imapSecurityOptions" formControlName="imap_security"></pngx-input-select>
       </div>
       <div class="col">
-        <app-input-text i18n-title title="Username" formControlName="username" [error]="error?.username"></app-input-text>
-        <app-input-password i18n-title title="Password" formControlName="password" [error]="error?.password"></app-input-password>
-        <app-input-check i18n-title title="Password is token" i18n-hint hint="Check if the password above is a token used for authentication" formControlName="is_token" [error]="error?.is_token"></app-input-check>
-        <app-input-text i18n-title title="Character Set" formControlName="character_set" [error]="error?.character_set"></app-input-text>
+        <pngx-input-text i18n-title title="Username" formControlName="username" [error]="error?.username"></pngx-input-text>
+        <pngx-input-password i18n-title title="Password" formControlName="password" [error]="error?.password"></pngx-input-password>
+        <pngx-input-check i18n-title title="Password is token" i18n-hint hint="Check if the password above is a token used for authentication" formControlName="is_token" [error]="error?.is_token"></pngx-input-check>
+        <pngx-input-text i18n-title title="Character Set" formControlName="character_set" [error]="error?.character_set"></pngx-input-text>
       </div>
     </div>
   </div>

src-ui/src/app/components/common/edit-dialog/mail-account-edit-dialog/mail-account-edit-dialog.component.ts

@@ -17,7 +17,7 @@ const IMAP_SECURITY_OPTIONS = [
 ]
 
 @Component({
-  selector: 'app-mail-account-edit-dialog',
+  selector: 'pngx-mail-account-edit-dialog',
   templateUrl: './mail-account-edit-dialog.component.html',
   styleUrls: ['./mail-account-edit-dialog.component.scss'],
 })

src-ui/src/app/components/common/edit-dialog/mail-rule-edit-dialog/mail-rule-edit-dialog.component.html

@@ -7,30 +7,30 @@
   <div class="modal-body">
     <div class="row">
       <div class="col">
-        <app-input-text i18n-title title="Name" formControlName="name" [error]="error?.name"></app-input-text>
-        <app-input-select i18n-title title="Account" [items]="accounts" formControlName="account"></app-input-select>
-        <app-input-text i18n-title title="Folder" formControlName="folder" i18n-hint hint="Subfolders must be separated by a delimiter, often a dot ('.') or slash ('/'), but it varies by mail server." [error]="error?.folder"></app-input-text>
-        <app-input-number i18n-title title="Maximum age (days)" formControlName="maximum_age" [showAdd]="false" [error]="error?.maximum_age"></app-input-number>
-        <app-input-select i18n-title title="Attachment type" [items]="attachmentTypeOptions" formControlName="attachment_type"></app-input-select>
-        <app-input-select i18n-title title="Consumption scope" [items]="consumptionScopeOptions" formControlName="consumption_scope" i18n-hint hint="See docs for .eml processing requirements"></app-input-select>
-        <app-input-number i18n-title title="Rule order" formControlName="order" [showAdd]="false" [error]="error?.order"></app-input-number>
+        <pngx-input-text i18n-title title="Name" formControlName="name" [error]="error?.name"></pngx-input-text>
+        <pngx-input-select i18n-title title="Account" [items]="accounts" formControlName="account"></pngx-input-select>
+        <pngx-input-text i18n-title title="Folder" formControlName="folder" i18n-hint hint="Subfolders must be separated by a delimiter, often a dot ('.') or slash ('/'), but it varies by mail server." [error]="error?.folder"></pngx-input-text>
+        <pngx-input-number i18n-title title="Maximum age (days)" formControlName="maximum_age" [showAdd]="false" [error]="error?.maximum_age"></pngx-input-number>
+        <pngx-input-select i18n-title title="Attachment type" [items]="attachmentTypeOptions" formControlName="attachment_type"></pngx-input-select>
+        <pngx-input-select i18n-title title="Consumption scope" [items]="consumptionScopeOptions" formControlName="consumption_scope" i18n-hint hint="See docs for .eml processing requirements"></pngx-input-select>
+        <pngx-input-number i18n-title title="Rule order" formControlName="order" [showAdd]="false" [error]="error?.order"></pngx-input-number>
       </div>
       <div class="col">
         <p class="small" i18n>Paperless will only process mails that match <em>all</em> of the filters specified below.</p>
-        <app-input-text i18n-title title="Filter from" formControlName="filter_from" [error]="error?.filter_from"></app-input-text>
-        <app-input-text i18n-title title="Filter to" formControlName="filter_to" [error]="error?.filter_to"></app-input-text>
-        <app-input-text i18n-title title="Filter subject" formControlName="filter_subject" [error]="error?.filter_subject"></app-input-text>
-        <app-input-text i18n-title title="Filter body" formControlName="filter_body" [error]="error?.filter_body"></app-input-text>
-        <app-input-text i18n-title title="Filter attachment filename" formControlName="filter_attachment_filename" i18n-hint hint="Only consume documents which entirely match this filename if specified. Wildcards such as *.pdf or *invoice* are allowed. Case insensitive." [error]="error?.filter_attachment_filename"></app-input-text>
+        <pngx-input-text i18n-title title="Filter from" formControlName="filter_from" [error]="error?.filter_from"></pngx-input-text>
+        <pngx-input-text i18n-title title="Filter to" formControlName="filter_to" [error]="error?.filter_to"></pngx-input-text>
+        <pngx-input-text i18n-title title="Filter subject" formControlName="filter_subject" [error]="error?.filter_subject"></pngx-input-text>
+        <pngx-input-text i18n-title title="Filter body" formControlName="filter_body" [error]="error?.filter_body"></pngx-input-text>
+        <pngx-input-text i18n-title title="Filter attachment filename" formControlName="filter_attachment_filename" i18n-hint hint="Only consume documents which entirely match this filename if specified. Wildcards such as *.pdf or *invoice* are allowed. Case insensitive." [error]="error?.filter_attachment_filename"></pngx-input-text>
       </div>
       <div class="col">
-        <app-input-select i18n-title title="Action" [items]="actionOptions" formControlName="action" i18n-hint hint="Action is only performed when documents are consumed from the mail. Mails without attachments remain entirely untouched."></app-input-select>
-        <app-input-text i18n-title title="Action parameter" *ngIf="showActionParamField" formControlName="action_parameter" [error]="error?.action_parameter"></app-input-text>
-        <app-input-select i18n-title title="Assign title from" [items]="metadataTitleOptions" formControlName="assign_title_from"></app-input-select>
-        <app-input-tags [allowCreate]="false" formControlName="assign_tags"></app-input-tags>
-        <app-input-select i18n-title title="Assign document type" [items]="documentTypes" [allowNull]="true" formControlName="assign_document_type"></app-input-select>
-        <app-input-select i18n-title title="Assign correspondent from" [items]="metadataCorrespondentOptions" formControlName="assign_correspondent_from"></app-input-select>
-        <app-input-select *ngIf="showCorrespondentField" i18n-title title="Assign correspondent" [items]="correspondents" [allowNull]="true" formControlName="assign_correspondent"></app-input-select>
+        <pngx-input-select i18n-title title="Action" [items]="actionOptions" formControlName="action" i18n-hint hint="Action is only performed when documents are consumed from the mail. Mails without attachments remain entirely untouched."></pngx-input-select>
+        <pngx-input-text i18n-title title="Action parameter" *ngIf="showActionParamField" formControlName="action_parameter" [error]="error?.action_parameter"></pngx-input-text>
+        <pngx-input-select i18n-title title="Assign title from" [items]="metadataTitleOptions" formControlName="assign_title_from"></pngx-input-select>
+        <pngx-input-tags [allowCreate]="false" formControlName="assign_tags"></pngx-input-tags>
+        <pngx-input-select i18n-title title="Assign document type" [items]="documentTypes" [allowNull]="true" formControlName="assign_document_type"></pngx-input-select>
+        <pngx-input-select i18n-title title="Assign correspondent from" [items]="metadataCorrespondentOptions" formControlName="assign_correspondent_from"></pngx-input-select>
+        <pngx-input-select *ngIf="showCorrespondentField" i18n-title title="Assign correspondent" [items]="correspondents" [allowNull]="true" formControlName="assign_correspondent"></pngx-input-select>
       </div>
     </div>
   </div>

src-ui/src/app/components/common/edit-dialog/mail-rule-edit-dialog/mail-rule-edit-dialog.component.ts

@@ -101,7 +101,7 @@ const METADATA_CORRESPONDENT_OPTIONS = [
 ]
 
 @Component({
-  selector: 'app-mail-rule-edit-dialog',
+  selector: 'pngx-mail-rule-edit-dialog',
   templateUrl: './mail-rule-edit-dialog.component.html',
   styleUrls: ['./mail-rule-edit-dialog.component.scss'],
 })

src-ui/src/app/components/common/edit-dialog/storage-path-edit-dialog/storage-path-edit-dialog.component.html

@@ -6,14 +6,14 @@
   </div>
   <div class="modal-body">
 
-    <app-input-text i18n-title title="Name" formControlName="name" [error]="error?.name"></app-input-text>
-    <app-input-text i18n-title title="Path" formControlName="path" [error]="error?.path" [hint]="pathHint"></app-input-text>
-    <app-input-select i18n-title title="Matching algorithm" [items]="getMatchingAlgorithms()" formControlName="matching_algorithm"></app-input-select>
-    <app-input-text *ngIf="patternRequired" i18n-title title="Matching pattern" formControlName="match" [error]="error?.match"></app-input-text>
-    <app-input-check *ngIf="patternRequired" i18n-title title="Case insensitive" formControlName="is_insensitive"></app-input-check>
+    <pngx-input-text i18n-title title="Name" formControlName="name" [error]="error?.name"></pngx-input-text>
+    <pngx-input-text i18n-title title="Path" formControlName="path" [error]="error?.path" [hint]="pathHint"></pngx-input-text>
+    <pngx-input-select i18n-title title="Matching algorithm" [items]="getMatchingAlgorithms()" formControlName="matching_algorithm"></pngx-input-select>
+    <pngx-input-text *ngIf="patternRequired" i18n-title title="Matching pattern" formControlName="match" [error]="error?.match"></pngx-input-text>
+    <pngx-input-check *ngIf="patternRequired" i18n-title title="Case insensitive" formControlName="is_insensitive"></pngx-input-check>
 
-    <div *appIfOwner="object">
-      <app-permissions-form [users]="users" accordion="true" formControlName="permissions_form"></app-permissions-form>
+    <div *pngxIfOwner="object">
+      <pngx-permissions-form [users]="users" accordion="true" formControlName="permissions_form"></pngx-permissions-form>
     </div>
 
   </div>

src-ui/src/app/components/common/edit-dialog/storage-path-edit-dialog/storage-path-edit-dialog.component.ts

@@ -9,7 +9,7 @@ import { UserService } from 'src/app/services/rest/user.service'
 import { SettingsService } from 'src/app/services/settings.service'
 
 @Component({
-  selector: 'app-storage-path-edit-dialog',
+  selector: 'pngx-storage-path-edit-dialog',
   templateUrl: './storage-path-edit-dialog.component.html',
   styleUrls: ['./storage-path-edit-dialog.component.scss'],
 })

src-ui/src/app/components/common/edit-dialog/tag-edit-dialog/tag-edit-dialog.component.html

@@ -5,17 +5,17 @@
       </button>
     </div>
     <div class="modal-body">
-      <app-input-text i18n-title title="Name" formControlName="name" [error]="error?.name"></app-input-text>
+      <pngx-input-text i18n-title title="Name" formControlName="name" [error]="error?.name"></pngx-input-text>
 
-      <app-input-color i18n-title title="Color" formControlName="color" [error]="error?.color"></app-input-color>
+      <pngx-input-color i18n-title title="Color" formControlName="color" [error]="error?.color"></pngx-input-color>
 
-      <app-input-check i18n-title title="Inbox tag" formControlName="is_inbox_tag" i18n-hint hint="Inbox tags are automatically assigned to all consumed documents."></app-input-check>
-      <app-input-select i18n-title title="Matching algorithm" [items]="getMatchingAlgorithms()" formControlName="matching_algorithm"></app-input-select>
-      <app-input-text *ngIf="patternRequired" i18n-title title="Matching pattern" formControlName="match" [error]="error?.match"></app-input-text>
-      <app-input-check *ngIf="patternRequired" i18n-title title="Case insensitive" formControlName="is_insensitive"></app-input-check>
+      <pngx-input-check i18n-title title="Inbox tag" formControlName="is_inbox_tag" i18n-hint hint="Inbox tags are automatically assigned to all consumed documents."></pngx-input-check>
+      <pngx-input-select i18n-title title="Matching algorithm" [items]="getMatchingAlgorithms()" formControlName="matching_algorithm"></pngx-input-select>
+      <pngx-input-text *ngIf="patternRequired" i18n-title title="Matching pattern" formControlName="match" [error]="error?.match"></pngx-input-text>
+      <pngx-input-check *ngIf="patternRequired" i18n-title title="Case insensitive" formControlName="is_insensitive"></pngx-input-check>
 
-      <div *appIfOwner="object">
-        <app-permissions-form [users]="users" accordion="true" formControlName="permissions_form"></app-permissions-form>
+      <div *pngxIfOwner="object">
+        <pngx-permissions-form [users]="users" accordion="true" formControlName="permissions_form"></pngx-permissions-form>
       </div>
 
     </div>

src-ui/src/app/components/common/edit-dialog/tag-edit-dialog/tag-edit-dialog.component.ts

@@ -10,7 +10,7 @@ import { UserService } from 'src/app/services/rest/user.service'
 import { SettingsService } from 'src/app/services/settings.service'
 
 @Component({
-  selector: 'app-tag-edit-dialog',
+  selector: 'pngx-tag-edit-dialog',
   templateUrl: './tag-edit-dialog.component.html',
   styleUrls: ['./tag-edit-dialog.component.scss'],
 })

src-ui/src/app/components/common/edit-dialog/user-edit-dialog/user-edit-dialog.component.html

@@ -7,11 +7,11 @@
     <div class="modal-body">
       <div class="row">
         <div class="col">
-          <app-input-text i18n-title title="Username" formControlName="username" [error]="error?.username"></app-input-text>
-          <app-input-text i18n-title title="Email" formControlName="email" [error]="error?.email"></app-input-text>
-          <app-input-password i18n-title title="Password" formControlName="password" [error]="error?.password"></app-input-password>
-          <app-input-text i18n-title title="First name" formControlName="first_name" [error]="error?.first_name"></app-input-text>
-          <app-input-text i18n-title title="Last name" formControlName="last_name" [error]="error?.first_name"></app-input-text>
+          <pngx-input-text i18n-title title="Username" formControlName="username" [error]="error?.username"></pngx-input-text>
+          <pngx-input-text i18n-title title="Email" formControlName="email" [error]="error?.email"></pngx-input-text>
+          <pngx-input-password i18n-title title="Password" formControlName="password" [error]="error?.password"></pngx-input-password>
+          <pngx-input-text i18n-title title="First name" formControlName="first_name" [error]="error?.first_name"></pngx-input-text>
+          <pngx-input-text i18n-title title="Last name" formControlName="last_name" [error]="error?.first_name"></pngx-input-text>
 
           <div class="mb-2">
             <div class="form-check form-switch form-check-inline">
@@ -24,10 +24,10 @@
             </div>
           </div>
 
-          <app-input-select i18n-title title="Groups" [items]="groups" multiple="true" formControlName="groups"></app-input-select>
+          <pngx-input-select i18n-title title="Groups" [items]="groups" multiple="true" formControlName="groups"></pngx-input-select>
         </div>
         <div class="col">
-          <app-permissions-select i18n-title title="Permissions" formControlName="user_permissions" [error]="error?.user_permissions" [inheritedPermissions]="inheritedPermissions"></app-permissions-select>
+          <pngx-permissions-select i18n-title title="Permissions" formControlName="user_permissions" [error]="error?.user_permissions" [inheritedPermissions]="inheritedPermissions"></pngx-permissions-select>
         </div>
       </div>
     </div>

src-ui/src/app/components/common/edit-dialog/user-edit-dialog/user-edit-dialog.component.ts

@@ -10,7 +10,7 @@ import { UserService } from 'src/app/services/rest/user.service'
 import { SettingsService } from 'src/app/services/settings.service'
 
 @Component({
-  selector: 'app-user-edit-dialog',
+  selector: 'pngx-user-edit-dialog',
   templateUrl: './user-edit-dialog.component.html',
   styleUrls: ['./user-edit-dialog.component.scss'],
 })

src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html

@@ -5,7 +5,7 @@
     </svg>
     <div class="d-none d-sm-inline">&nbsp;{{title}}</div>
     <ng-container *ngIf="!editing && selectionModel.totalCount > 0">
-      <app-clearable-badge [number]="selectionModel.totalCount" [selected]="selectionModel.selectionSize() > 0" (cleared)="reset()"></app-clearable-badge>
+      <pngx-clearable-badge [number]="selectionModel.totalCount" [selected]="selectionModel.selectionSize() > 0" (cleared)="reset()"></pngx-clearable-badge>
     </ng-container>
   </button>
   <div class="dropdown-menu py-0 shadow" ngbDropdownMenu attr.aria-labelledby="dropdown_{{name}}">
@@ -33,9 +33,9 @@
       </div>
       <div *ngIf="selectionModel.items" class="items" #buttonItems>
         <ng-container *ngFor="let item of selectionModel.itemsSorted | filter: filterText; let i = index">
-          <app-toggleable-dropdown-button
+          <pngx-toggleable-dropdown-button
             *ngIf="allowSelectNone || item.id" [item]="item" [hideCount]="hideCount(item)" [state]="selectionModel.get(item.id)" [count]="getUpdatedDocumentCount(item.id)" (toggle)="selectionModel.toggle(item.id)" (exclude)="excludeClicked(item.id)" (click)="setButtonItemIndex(i - 1)" [disabled]="disabled">
-          </app-toggleable-dropdown-button>
+          </pngx-toggleable-dropdown-button>
         </ng-container>
       </div>
       <button *ngIf="editing" class="list-group-item list-group-item-action bg-light" (click)="applyClicked()" [disabled]="!modelIsDirty || disabled">

src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.spec.ts

@@ -410,7 +410,7 @@ describe('FilterableDropdownComponent & FilterableDropdownSelectionModel', () =>
       (fixture.nativeElement as HTMLDivElement).querySelectorAll('button')
     ).filter((b) => b.textContent.includes('Tag'))
     fixture.nativeElement
-      .querySelector('app-toggleable-dropdown-button')
+      .querySelector('pngx-toggleable-dropdown-button')
       .dispatchEvent(new MouseEvent('click'))
     itemButtons[0].focus() // normally handled by browser
     expect(document.activeElement).toEqual(itemButtons[0])

src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.ts

@@ -318,7 +318,7 @@ export class FilterableDropdownSelectionModel {
 }
 
 @Component({
-  selector: 'app-filterable-dropdown',
+  selector: 'pngx-filterable-dropdown',
   templateUrl: './filterable-dropdown.component.html',
   styleUrls: ['./filterable-dropdown.component.scss'],
 })

src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.html

@@ -17,7 +17,7 @@
     </ng-container>
   </div>
   <div class="me-1">
-    <app-tag *ngIf="isTag; else displayName" [tag]="item" [clickable]="false"></app-tag>
+    <pngx-tag *ngIf="isTag; else displayName" [tag]="item" [clickable]="false"></pngx-tag>
     <ng-template #displayName><small>{{item.name}}</small></ng-template>
   </div>
   <div *ngIf="!hideCount" class="badge bg-light text-dark rounded-pill ms-auto me-1">{{count ?? item.document_count}}</div>

src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.ts

@@ -9,7 +9,7 @@ export enum ToggleableItemState {
 }
 
 @Component({
-  selector: 'app-toggleable-dropdown-button',
+  selector: 'pngx-toggleable-dropdown-button',
   templateUrl: './toggleable-dropdown-button.component.html',
   styleUrls: ['./toggleable-dropdown-button.component.scss'],
 })

src-ui/src/app/components/common/input/check/check.component.ts

@@ -10,7 +10,7 @@ import { AbstractInputComponent } from '../abstract-input'
       multi: true,
     },
   ],
-  selector: 'app-input-check',
+  selector: 'pngx-input-check',
   templateUrl: './check.component.html',
   styleUrls: ['./check.component.scss'],
 })

src-ui/src/app/components/common/input/color/color.component.ts

@@ -11,7 +11,7 @@ import { AbstractInputComponent } from '../abstract-input'
       multi: true,
     },
   ],
-  selector: 'app-input-color',
+  selector: 'pngx-input-color',
   templateUrl: './color.component.html',
   styleUrls: ['./color.component.scss'],
 })

src-ui/src/app/components/common/input/date/date.component.ts

@@ -23,7 +23,7 @@ import { AbstractInputComponent } from '../abstract-input'
       multi: true,
     },
   ],
-  selector: 'app-input-date',
+  selector: 'pngx-input-date',
   templateUrl: './date.component.html',
   styleUrls: ['./date.component.scss'],
 })

src-ui/src/app/components/common/input/number/number.component.ts

@@ -12,7 +12,7 @@ import { AbstractInputComponent } from '../abstract-input'
       multi: true,
     },
   ],
-  selector: 'app-input-number',
+  selector: 'pngx-input-number',
   templateUrl: './number.component.html',
   styleUrls: ['./number.component.scss'],
 })

src-ui/src/app/components/common/input/password/password.component.ts

@@ -10,7 +10,7 @@ import { AbstractInputComponent } from '../abstract-input'
       multi: true,
     },
   ],
-  selector: 'app-input-password',
+  selector: 'pngx-input-password',
   templateUrl: './password.component.html',
   styleUrls: ['./password.component.scss'],
 })

src-ui/src/app/components/common/input/permissions/permissions-form/permissions-form.component.html

@@ -19,7 +19,7 @@
       <label class="form-label d-block my-2" i18n>Owner:</label>
     </div>
     <div class="col-lg-9">
-      <app-input-select [items]="users" bindLabel="username" formControlName="owner" [allowNull]="true"></app-input-select>
+      <pngx-input-select [items]="users" bindLabel="username" formControlName="owner" [allowNull]="true"></pngx-input-select>
     </div>
   </div>
   <small class="form-text text-muted text-end d-block mt-n2" i18n>Objects without an owner can be viewed and edited by all users</small>
@@ -31,7 +31,7 @@
           <label class="form-label d-block my-2" i18n>Users:</label>
         </div>
         <div class="col-lg-9">
-          <app-permissions-user type="view" formControlName="users"></app-permissions-user>
+          <pngx-permissions-user type="view" formControlName="users"></pngx-permissions-user>
         </div>
       </div>
       <div class="row">
@@ -39,7 +39,7 @@
           <label class="form-label d-block my-2" i18n>Groups:</label>
         </div>
         <div class="col-lg-9">
-          <app-permissions-group type="view" formControlName="groups"></app-permissions-group>
+          <pngx-permissions-group type="view" formControlName="groups"></pngx-permissions-group>
         </div>
       </div>
     </div>
@@ -50,7 +50,7 @@
           <label class="form-label d-block my-2" i18n>Users:</label>
         </div>
         <div class="col-lg-9">
-          <app-permissions-user type="change" formControlName="users"></app-permissions-user>
+          <pngx-permissions-user type="change" formControlName="users"></pngx-permissions-user>
         </div>
       </div>
       <div class="row">
@@ -58,7 +58,7 @@
           <label class="form-label d-block my-2" i18n>Groups:</label>
         </div>
         <div class="col-lg-9">
-          <app-permissions-group type="change" formControlName="groups"></app-permissions-group>
+          <pngx-permissions-group type="change" formControlName="groups"></pngx-permissions-group>
         </div>
       </div>
       <small class="form-text text-muted text-end d-block" i18n>Edit permissions also grant viewing permissions</small>

src-ui/src/app/components/common/input/permissions/permissions-form/permissions-form.component.ts

@@ -25,7 +25,7 @@ export interface PermissionsFormObject {
       multi: true,
     },
   ],
-  selector: 'app-permissions-form',
+  selector: 'pngx-permissions-form',
   templateUrl: './permissions-form.component.html',
   styleUrls: ['./permissions-form.component.scss'],
 })

src-ui/src/app/components/common/input/permissions/permissions-group/permissions-group.component.ts

@@ -13,7 +13,7 @@ import { AbstractInputComponent } from '../../abstract-input'
       multi: true,
     },
   ],
-  selector: 'app-permissions-group',
+  selector: 'pngx-permissions-group',
   templateUrl: './permissions-group.component.html',
   styleUrls: ['./permissions-group.component.scss'],
 })

src-ui/src/app/components/common/input/permissions/permissions-user/permissions-user.component.ts

@@ -14,7 +14,7 @@ import { AbstractInputComponent } from '../../abstract-input'
       multi: true,
     },
   ],
-  selector: 'app-permissions-user',
+  selector: 'pngx-permissions-user',
   templateUrl: './permissions-user.component.html',
   styleUrls: ['./permissions-user.component.scss'],
 })

src-ui/src/app/components/common/input/select/select.component.ts

@@ -16,7 +16,7 @@ import { AbstractInputComponent } from '../abstract-input'
       multi: true,
     },
   ],
-  selector: 'app-input-select',
+  selector: 'pngx-input-select',
   templateUrl: './select.component.html',
   styleUrls: ['./select.component.scss'],
 })

src-ui/src/app/components/common/input/tags/tags.component.html

@@ -18,12 +18,12 @@
           <svg width="1.2em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
             <use xlink:href="assets/bootstrap-icons.svg#x"/>
           </svg>
-          <app-tag *ngIf="item.id && tags" style="background-color: none;" [tag]="getTag(item.id)"></app-tag>
+          <pngx-tag *ngIf="item.id && tags" style="background-color: none;" [tag]="getTag(item.id)"></pngx-tag>
         </span>
       </ng-template>
       <ng-template ng-option-tmp let-item="item" let-index="index" let-search="searchTerm">
         <div class="tag-wrap">
-          <app-tag *ngIf="item.id && tags" class="me-2" [tag]="getTag(item.id)"></app-tag>
+          <pngx-tag *ngIf="item.id && tags" class="me-2" [tag]="getTag(item.id)"></pngx-tag>
         </div>
       </ng-template>
     </ng-select>

src-ui/src/app/components/common/input/tags/tags.component.ts

@@ -24,7 +24,7 @@ import { NgSelectComponent } from '@ng-select/ng-select'
       multi: true,
     },
   ],
-  selector: 'app-input-tags',
+  selector: 'pngx-input-tags',
   templateUrl: './tags.component.html',
   styleUrls: ['./tags.component.scss'],
 })

src-ui/src/app/components/common/input/text/text.component.ts

@@ -10,7 +10,7 @@ import { AbstractInputComponent } from '../abstract-input'
       multi: true,
     },
   ],
-  selector: 'app-input-text',
+  selector: 'pngx-input-text',
   templateUrl: './text.component.html',
   styleUrls: ['./text.component.scss'],
 })

src-ui/src/app/components/common/logo/logo.component.ts

@@ -1,7 +1,7 @@
 import { Component, Input } from '@angular/core'
 
 @Component({
-  selector: 'app-logo',
+  selector: 'pngx-logo',
   templateUrl: './logo.component.html',
   styleUrls: ['./logo.component.scss'],
 })

src-ui/src/app/components/common/page-header/page-header.component.ts

@@ -3,7 +3,7 @@ import { Title } from '@angular/platform-browser'
 import { environment } from 'src/environments/environment'
 
 @Component({
-  selector: 'app-page-header',
+  selector: 'pngx-page-header',
   templateUrl: './page-header.component.html',
   styleUrls: ['./page-header.component.scss'],
 })

src-ui/src/app/components/common/permissions-dialog/permissions-dialog.component.html

@@ -8,7 +8,7 @@
     <p class="mb-3" *ngIf="message" [innerHTML]="message | safeHtml"></p>
 
     <form [formGroup]="form">
-      <app-permissions-form [users]="users" formControlName="permissions_form"></app-permissions-form>
+      <pngx-permissions-form [users]="users" formControlName="permissions_form"></pngx-permissions-form>
     </form>
 
   </div>

src-ui/src/app/components/common/permissions-dialog/permissions-dialog.component.ts

@@ -5,7 +5,7 @@ import { PaperlessUser } from 'src/app/data/paperless-user'
 import { UserService } from 'src/app/services/rest/user.service'
 
 @Component({
-  selector: 'app-permissions-dialog',
+  selector: 'pngx-permissions-dialog',
   templateUrl: './permissions-dialog.component.html',
   styleUrls: ['./permissions-dialog.component.scss'],
 })

src-ui/src/app/components/common/permissions-filter-dropdown/permissions-filter-dropdown.component.html

@@ -4,7 +4,7 @@
            <use xlink:href="assets/bootstrap-icons.svg#person-fill-lock" />
         </svg>
         <div class="d-none d-sm-inline">&nbsp;{{title}}</div>
-      <app-clearable-badge [selected]="isActive" (cleared)="reset()"></app-clearable-badge><span class="visually-hidden">selected</span>
+      <pngx-clearable-badge [selected]="isActive" (cleared)="reset()"></pngx-clearable-badge><span class="visually-hidden">selected</span>
     </button>
     <div class="dropdown-menu permission-filter-dropdown shadow py-0 w-2" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}">
         <div class="list-group list-group-flush">
@@ -48,7 +48,7 @@
                     <small i18n>Unowned</small>
                 </div>
             </button>
-            <button *appIfPermissions="{ action: PermissionAction.Add, type: PermissionType.User }" class="list-group-item list-group-item-action d-flex align-items-center p-2 border-top-0 border-start-0 border-end-0 border-bottom" role="menuitem" [disabled]="disabled">
+            <button *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.User }" class="list-group-item list-group-item-action d-flex align-items-center p-2 border-top-0 border-start-0 border-end-0 border-bottom" role="menuitem" [disabled]="disabled">
                 <div class="selected-icon me-1">
                     <svg *ngIf="selectionModel.ownerFilter === OwnerFilterType.OTHERS" fill="currentColor" class="buttonicon-sm">
                         <use xlink:href="assets/bootstrap-icons.svg#check"/>

src-ui/src/app/components/common/permissions-filter-dropdown/permissions-filter-dropdown.component.ts

@@ -35,7 +35,7 @@ export enum OwnerFilterType {
 }
 
 @Component({
-  selector: 'app-permissions-filter-dropdown',
+  selector: 'pngx-permissions-filter-dropdown',
   templateUrl: './permissions-filter-dropdown.component.html',
   styleUrls: ['./permissions-filter-dropdown.component.scss'],
 })

src-ui/src/app/components/common/permissions-select/permissions-select.component.ts

@@ -21,7 +21,7 @@ import { ComponentWithPermissions } from '../../with-permissions/with-permission
       multi: true,
     },
   ],
-  selector: 'app-permissions-select',
+  selector: 'pngx-permissions-select',
   templateUrl: './permissions-select.component.html',
   styleUrls: ['./permissions-select.component.scss'],
 })

src-ui/src/app/components/common/select-dialog/select-dialog.component.html

@@ -5,7 +5,7 @@
 </div>
 <div class="modal-body">
 
-  <app-input-select [items]="objects" [title]="message" [(ngModel)]="selected"></app-input-select>
+  <pngx-input-select [items]="objects" [title]="message" [(ngModel)]="selected"></pngx-input-select>
 
 </div>
 <div class="modal-footer">

src-ui/src/app/components/common/select-dialog/select-dialog.component.ts

@@ -3,7 +3,7 @@ import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { ObjectWithId } from 'src/app/data/object-with-id'
 
 @Component({
-  selector: 'app-select-dialog',
+  selector: 'pngx-select-dialog',
   templateUrl: './select-dialog.component.html',
   styleUrls: ['./select-dialog.component.scss'],
 })

src-ui/src/app/components/common/share-links-dropdown/share-links-dropdown.component.ts

@@ -10,7 +10,7 @@ import { environment } from 'src/environments/environment'
 import { ClipboardService } from 'ngx-clipboard'
 
 @Component({
-  selector: 'app-share-links-dropdown',
+  selector: 'pngx-share-links-dropdown',
   templateUrl: './share-links-dropdown.component.html',
   styleUrls: ['./share-links-dropdown.component.scss'],
 })

src-ui/src/app/components/common/tag/tag.component.ts

@@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'
 import { PaperlessTag } from 'src/app/data/paperless-tag'
 
 @Component({
-  selector: 'app-tag',
+  selector: 'pngx-tag',
   templateUrl: './tag.component.html',
   styleUrls: ['./tag.component.scss'],
 })

src-ui/src/app/components/common/toasts/toasts.component.ts

@@ -4,7 +4,7 @@ import { Toast, ToastService } from 'src/app/services/toast.service'
 import { ClipboardService } from 'ngx-clipboard'
 
 @Component({
-  selector: 'app-toasts',
+  selector: 'pngx-toasts',
   templateUrl: './toasts.component.html',
   styleUrls: ['./toasts.component.scss'],
 })

src-ui/src/app/components/dashboard/dashboard.component.html

@@ -1,6 +1,6 @@
-<app-page-header title="Dashboard" [subTitle]="subtitle" i18n-title>
-  <app-logo extra_classes="d-none d-md-block"></app-logo>
-</app-page-header>
+<pngx-page-header title="Dashboard" [subTitle]="subtitle" i18n-title>
+  <pngx-logo extra_classes="d-none d-md-block"></pngx-logo>
+</pngx-page-header>
 
 <div class="row">
   <div class="col-lg-8">
@@ -10,20 +10,20 @@
         <ng-container i18n>Loading...</ng-container>
       </ng-container>
 
-      <app-welcome-widget *ngIf="settingsService.offerTour()" (dismiss)="completeTour()"></app-welcome-widget>
+      <pngx-welcome-widget *ngIf="settingsService.offerTour()" (dismiss)="completeTour()"></pngx-welcome-widget>
 
-      <div *appIfPermissions="{ action: PermissionAction.View, type: PermissionType.SavedView }">
+      <div *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.SavedView }">
         <ng-container *ngFor="let v of savedViewService.dashboardViews; first as isFirst">
-          <app-saved-view-widget [savedView]="v"></app-saved-view-widget>
+          <pngx-saved-view-widget [savedView]="v"></pngx-saved-view-widget>
         </ng-container>
       </div>
     </div>
   </div>
   <div class="col-lg-4">
 
-    <app-statistics-widget></app-statistics-widget>
+    <pngx-statistics-widget></pngx-statistics-widget>
 
-    <app-upload-file-widget></app-upload-file-widget>
+    <pngx-upload-file-widget></pngx-upload-file-widget>
 
   </div>
 </div>

src-ui/src/app/components/dashboard/dashboard.component.ts

@@ -5,7 +5,7 @@ import { ComponentWithPermissions } from '../with-permissions/with-permissions.c
 import { TourService } from 'ngx-ui-tour-ng-bootstrap'
 
 @Component({
-  selector: 'app-dashboard',
+  selector: 'pngx-dashboard',
   templateUrl: './dashboard.component.html',
   styleUrls: ['./dashboard.component.scss'],
 })

src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.html

@@ -1,6 +1,6 @@
-<app-widget-frame [title]="savedView.name" [loading]="loading">
+<pngx-widget-frame [title]="savedView.name" [loading]="loading">
 
-  <a class="btn-link" header-buttons [routerLink]="[]" (click)="showAll()" *appIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }" i18n>Show all</a>
+  <a class="btn-link" header-buttons [routerLink]="[]" (click)="showAll()" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }" i18n>Show all</a>
 
 
   <table content class="table table-sm table-hover table-borderless mb-0">
@@ -10,11 +10,11 @@
         <th scope="col" i18n>Title</th>
       </tr>
     </thead>
-    <tbody *appIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }">
+    <tbody *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }">
       <tr *ngFor="let doc of documents" (mouseleave)="mouseLeaveCard()">
         <td><a routerLink="/documents/{{doc.id}}" class="d-block text-dark text-decoration-none">{{doc.created_date | customDate}}</a></td>
         <td class="position-relative">
-          <a routerLink="/documents/{{doc.id}}" title="Edit" i18n-title class="d-block text-dark text-decoration-none">{{doc.title | documentTitle}}<app-tag [tag]="t" *ngFor="let t of doc.tags$ | async" class="ms-1" (click)="clickTag(t, $event)"></app-tag></a>
+          <a routerLink="/documents/{{doc.id}}" title="Edit" i18n-title class="d-block text-dark text-decoration-none">{{doc.title | documentTitle}}<pngx-tag [tag]="t" *ngFor="let t of doc.tags$ | async" class="ms-1" (click)="clickTag(t, $event)"></pngx-tag></a>
           <div class="btn-group position-absolute top-50 end-0 translate-middle-y">
             <a [href]="getPreviewUrl(doc)" title="View Preview" i18n-title target="_blank" class="btn btn-sm px-4 py-0 btn-dark border-dark-subtle"
             [ngbPopover]="previewContent" [popoverTitle]="doc.title | documentTitle"
@@ -37,4 +37,4 @@
     </tbody>
   </table>
 
-</app-widget-frame>
+</pngx-widget-frame>

src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.ts

@@ -20,7 +20,7 @@ import { ComponentWithPermissions } from 'src/app/components/with-permissions/wi
 import { NgbPopover } from '@ng-bootstrap/ng-bootstrap'
 
 @Component({
-  selector: 'app-saved-view-widget',
+  selector: 'pngx-saved-view-widget',
   templateUrl: './saved-view-widget.component.html',
   styleUrls: [
     './saved-view-widget.component.scss',

src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.html

@@ -1,4 +1,4 @@
-<app-widget-frame title="Statistics" [loading]="loading" i18n-title>
+<pngx-widget-frame title="Statistics" [loading]="loading" i18n-title>
   <ng-container content>
     <div class="list-group border-light">
       <a class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" title="Go to inbox" i18n-title href="javascript:void(0)" *ngIf="statistics?.documents_inbox !== null" (click)="goToInbox()">
@@ -43,4 +43,4 @@
       </div>
     </div>
   </ng-container>
-</app-widget-frame>
+</pngx-widget-frame>

src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.ts

@@ -21,7 +21,7 @@ interface DocumentFileType {
 }
 
 @Component({
-  selector: 'app-statistics-widget',
+  selector: 'pngx-statistics-widget',
   templateUrl: './statistics-widget.component.html',
   styleUrls: ['./statistics-widget.component.scss'],
 })

src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.html

@@ -1,4 +1,4 @@
-<app-widget-frame title="Upload new documents" i18n-title>
+<pngx-widget-frame title="Upload new documents" i18n-title>
   <div header-buttons>
     <a *ngIf="getStatusSuccess().length > 0" (click)="dismissCompleted()" [routerLink]="[]" >
       <span class="me-1" i18n="This button dismisses all status messages about processed documents on the dashboard (failed and successful)">Dismiss completed</span>
@@ -9,7 +9,7 @@
     </a>
   </div>
   <div content tourAnchor="tour.upload-widget">
-    <form *appIfPermissions="{ action: PermissionAction.Add, type: PermissionType.Document }">
+    <form *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.Document }">
       <ngx-file-drop dropZoneLabel="Drop documents here or" browseBtnLabel="Browse files" (onFileDrop)="dropped($event)"
         (onFileOver)="fileOver($event)" (onFileLeave)="fileLeave($event)" dropZoneClassName="bg-light card"
         multiple="true" contentClassName="justify-content-center d-flex align-items-center py-5 px-2" [showBrowseBtn]=true
@@ -33,14 +33,14 @@
       </div>
     </div>
   </div>
-</app-widget-frame>
+</pngx-widget-frame>
 
 <ng-template #consumerAlert let-status>
   <ngb-alert type="secondary" class="mt-2 mb-0" [dismissible]="isFinished(status)" (closed)="dismiss(status)">
     <h6 class="alert-heading">{{status.filename}}</h6>
     <p class="mb-0 pb-1" *ngIf="!isFinished(status) || (isFinished(status) && !status.documentId)">{{status.message}}</p>
     <ngb-progressbar [value]="status.getProgress()" [max]="1" [type]="getStatusColor(status)"></ngb-progressbar>
-    <div *appIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }">
+    <div *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }">
       <div *ngIf="isFinished(status)">
         <button *ngIf="status.documentId" class="btn btn-sm btn-outline-primary btn-open" routerLink="/documents/{{status.documentId}}" (click)="dismiss(status)">
           <small i18n>Open document</small>

src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.ts

@@ -11,7 +11,7 @@ import { UploadDocumentsService } from 'src/app/services/upload-documents.servic
 const MAX_ALERTS = 5
 
 @Component({
-  selector: 'app-upload-file-widget',
+  selector: 'pngx-upload-file-widget',
   templateUrl: './upload-file-widget.component.html',
   styleUrls: ['./upload-file-widget.component.scss'],
 })

src-ui/src/app/components/dashboard/widgets/welcome-widget/welcome-widget.component.ts

@@ -2,7 +2,7 @@ import { Component, EventEmitter, Output } from '@angular/core'
 import { TourService } from 'ngx-ui-tour-ng-bootstrap'
 
 @Component({
-  selector: 'app-welcome-widget',
+  selector: 'pngx-welcome-widget',
   templateUrl: './welcome-widget.component.html',
   styleUrls: ['./welcome-widget.component.scss'],
 })

src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.spec.ts

@@ -9,7 +9,7 @@ import { WidgetFrameComponent } from './widget-frame.component'
   template: `
     <div>
       <button
-        *appIfObjectPermissions="{
+        *pngxIfObjectPermissions="{
           object: { id: 2, owner: user1 },
           action: 'view'
         }"

src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.ts

@@ -1,7 +1,7 @@
 import { Component, Input } from '@angular/core'
 
 @Component({
-  selector: 'app-widget-frame',
+  selector: 'pngx-widget-frame',
   templateUrl: './widget-frame.component.html',
   styleUrls: ['./widget-frame.component.scss'],
 })

src-ui/src/app/components/document-asn/document-asn.component.ts

@@ -4,7 +4,7 @@ import { ActivatedRoute, Router } from '@angular/router'
 import { FILTER_ASN } from '../../data/filter-rule-type'
 
 @Component({
-  selector: 'app-document-asncomponent',
+  selector: 'pngx-document-asncomponent',
   templateUrl: './document-asn.component.html',
   styleUrls: ['./document-asn.component.scss'],
 })

src-ui/src/app/components/document-detail/document-detail.component.html

@@ -1,11 +1,11 @@
-<app-page-header [(title)]="title">
+<pngx-page-header [(title)]="title">
     <div class="input-group input-group-sm me-5 d-none d-md-flex" *ngIf="getContentType() === 'application/pdf' && !useNativePdfViewer">
       <div class="input-group-text" i18n>Page</div>
       <input class="form-control flex-grow-0 w-auto" type="number" min="1" [max]="previewNumPages" [(ngModel)]="previewCurrentPage" />
       <div class="input-group-text" i18n>of {{previewNumPages}}</div>
     </div>
 
-    <button type="button" class="btn btn-sm btn-outline-danger me-4" (click)="delete()" [disabled]="!userIsOwner" *appIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.Document }">
+    <button type="button" class="btn btn-sm btn-outline-danger me-4" (click)="delete()" [disabled]="!userIsOwner" *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.Document }">
         <svg class="buttonicon" fill="currentColor">
             <use xlink:href="assets/bootstrap-icons.svg#trash" />
         </svg><span class="d-none d-lg-inline ps-1" i18n>Delete</span>
@@ -48,7 +48,7 @@
         </div>
     </div>
 
-    <app-share-links-dropdown [documentId]="documentId" [disabled]="!userIsOwner" *appIfPermissions="{ action: PermissionAction.Add, type: PermissionType.ShareLink }"></app-share-links-dropdown>
+    <pngx-share-links-dropdown [documentId]="documentId" [disabled]="!userIsOwner" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.ShareLink }"></pngx-share-links-dropdown>
 
     <button type="button" class="btn btn-sm btn-outline-primary me-2" i18n-title title="Close" (click)="close()">
         <svg class="buttonicon" fill="currentColor">
@@ -69,7 +69,7 @@
         </button>
     </div>
 
-</app-page-header>
+</pngx-page-header>
 
 
 <div class="row">
@@ -82,17 +82,17 @@
                     <a ngbNavLink i18n>Details</a>
                     <ng-template ngbNavContent>
 
-                        <app-input-text #inputTitle i18n-title title="Title" formControlName="title" (keyup)="titleKeyUp($event)" [error]="error?.title"></app-input-text>
-                        <app-input-number i18n-title title="Archive serial number" [error]="error?.archive_serial_number" formControlName='archive_serial_number'></app-input-number>
-                        <app-input-date i18n-title title="Date created" formControlName="created_date" [suggestions]="suggestions?.dates" [showFilter]="true" (filterDocuments)="filterDocuments($event)"
-                            [error]="error?.created_date"></app-input-date>
-                        <app-input-select [items]="correspondents" i18n-title title="Correspondent" formControlName="correspondent" [allowNull]="true" [showFilter]="true" (filterDocuments)="filterDocuments($event)"
-                            (createNew)="createCorrespondent($event)" [suggestions]="suggestions?.correspondents" *appIfPermissions="{ action: PermissionAction.View, type: PermissionType.Correspondent }"></app-input-select>
-                        <app-input-select [items]="documentTypes" i18n-title title="Document type" formControlName="document_type" [allowNull]="true" [showFilter]="true" (filterDocuments)="filterDocuments($event)"
-                            (createNew)="createDocumentType($event)" [suggestions]="suggestions?.document_types" *appIfPermissions="{ action: PermissionAction.View, type: PermissionType.DocumentType }"></app-input-select>
-                        <app-input-select [items]="storagePaths" i18n-title title="Storage path" formControlName="storage_path" [allowNull]="true" [showFilter]="true" (filterDocuments)="filterDocuments($event)"
-                            (createNew)="createStoragePath($event)" [suggestions]="suggestions?.storage_paths" i18n-placeholder placeholder="Default" *appIfPermissions="{ action: PermissionAction.View, type: PermissionType.StoragePath }"></app-input-select>
-                        <app-input-tags formControlName="tags" [suggestions]="suggestions?.tags" [showFilter]="true" (filterDocuments)="filterDocuments($event)" *appIfPermissions="{ action: PermissionAction.View, type: PermissionType.Tag }"></app-input-tags>
+                        <pngx-input-text #inputTitle i18n-title title="Title" formControlName="title" (keyup)="titleKeyUp($event)" [error]="error?.title"></pngx-input-text>
+                        <pngx-input-number i18n-title title="Archive serial number" [error]="error?.archive_serial_number" formControlName='archive_serial_number'></pngx-input-number>
+                        <pngx-input-date i18n-title title="Date created" formControlName="created_date" [suggestions]="suggestions?.dates" [showFilter]="true" (filterDocuments)="filterDocuments($event)"
+                            [error]="error?.created_date"></pngx-input-date>
+                        <pngx-input-select [items]="correspondents" i18n-title title="Correspondent" formControlName="correspondent" [allowNull]="true" [showFilter]="true" (filterDocuments)="filterDocuments($event)"
+                            (createNew)="createCorrespondent($event)" [suggestions]="suggestions?.correspondents" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Correspondent }"></pngx-input-select>
+                        <pngx-input-select [items]="documentTypes" i18n-title title="Document type" formControlName="document_type" [allowNull]="true" [showFilter]="true" (filterDocuments)="filterDocuments($event)"
+                            (createNew)="createDocumentType($event)" [suggestions]="suggestions?.document_types" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.DocumentType }"></pngx-input-select>
+                        <pngx-input-select [items]="storagePaths" i18n-title title="Storage path" formControlName="storage_path" [allowNull]="true" [showFilter]="true" (filterDocuments)="filterDocuments($event)"
+                            (createNew)="createStoragePath($event)" [suggestions]="suggestions?.storage_paths" i18n-placeholder placeholder="Default" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.StoragePath }"></pngx-input-select>
+                        <pngx-input-tags formControlName="tags" [suggestions]="suggestions?.tags" [showFilter]="true" (filterDocuments)="filterDocuments($event)" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Tag }"></pngx-input-tags>
 
                     </ng-template>
                 </li>
@@ -151,8 +151,8 @@
                             </tbody>
                         </table>
 
-                        <app-metadata-collapse i18n-title title="Original document metadata" [metadata]="metadata.original_metadata" *ngIf="metadata?.original_metadata?.length > 0"></app-metadata-collapse>
-                        <app-metadata-collapse i18n-title title="Archived document metadata" [metadata]="metadata.archive_metadata" *ngIf="metadata?.archive_metadata?.length > 0"></app-metadata-collapse>
+                        <pngx-metadata-collapse i18n-title title="Original document metadata" [metadata]="metadata.original_metadata" *ngIf="metadata?.original_metadata?.length > 0"></pngx-metadata-collapse>
+                        <pngx-metadata-collapse i18n-title title="Archived document metadata" [metadata]="metadata.archive_metadata" *ngIf="metadata?.archive_metadata?.length > 0"></pngx-metadata-collapse>
 
                     </ng-template>
                 </li>
@@ -184,7 +184,7 @@
                 <li [ngbNavItem]="DocumentDetailNavIDs.Notes" *ngIf="notesEnabled">
                     <a ngbNavLink i18n>Notes <span *ngIf="document?.notes.length" class="badge text-bg-secondary ms-1">{{document.notes.length}}</span></a>
                     <ng-template ngbNavContent>
-                        <app-document-notes [documentId]="documentId" [notes]="document?.notes" [addDisabled]="!userCanEdit" (updated)="notesUpdated($event)"></app-document-notes>
+                        <pngx-document-notes [documentId]="documentId" [notes]="document?.notes" [addDisabled]="!userCanEdit" (updated)="notesUpdated($event)"></pngx-document-notes>
                     </ng-template>
                 </li>
 
@@ -192,7 +192,7 @@
                     <a ngbNavLink i18n>Permissions</a>
                     <ng-template ngbNavContent>
                         <div class="mb-3">
-                            <app-permissions-form [users]="users" formControlName="permissions_form"></app-permissions-form>
+                            <pngx-permissions-form [users]="users" formControlName="permissions_form"></pngx-permissions-form>
                         </div>
                     </ng-template>
                 </li>
@@ -202,7 +202,7 @@
 
             <ng-container>
                 <button type="button" class="btn btn-outline-secondary me-2" (click)="discard()" i18n [disabled]="!userCanEdit || networkActive || (isDirty$ | async) !== true">Discard</button>
-                <ng-container *appIfPermissions="{ action: PermissionAction.Change, type: PermissionType.Document }">
+                <ng-container *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.Document }">
                     <button *ngIf="hasNext()" type="button" class="btn btn-outline-primary me-2" (click)="saveEditNext()" i18n [disabled]="!userCanEdit || networkActive || (isDirty$ | async) !== true">Save &amp; next</button>
                     <button *ngIf="!hasNext()" type="button" class="btn btn-outline-primary me-2" (click)="save(true)" i18n [disabled]="!userCanEdit || networkActive || (isDirty$ | async) !== true">Save &amp; close</button>
                     <button type="submit" class="btn btn-primary" i18n [disabled]="!userCanEdit || networkActive || (isDirty$ | async) !== true">Save</button>

src-ui/src/app/components/document-detail/document-detail.component.ts

@@ -75,7 +75,7 @@ enum DocumentDetailNavIDs {
 }
 
 @Component({
-  selector: 'app-document-detail',
+  selector: 'pngx-document-detail',
   templateUrl: './document-detail.component.html',
   styleUrls: ['./document-detail.component.scss'],
 })

src-ui/src/app/components/document-detail/metadata-collapse/metadata-collapse.component.ts

@@ -1,7 +1,7 @@
 import { Component, Input } from '@angular/core'
 
 @Component({
-  selector: 'app-metadata-collapse',
+  selector: 'pngx-metadata-collapse',
   templateUrl: './metadata-collapse.component.html',
   styleUrls: ['./metadata-collapse.component.scss'],
 })

src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html

@@ -21,9 +21,9 @@
       </button>
     </div>
   </div>
-    <div class="d-flex align-items-center gap-2" *appIfPermissions="{ action: PermissionAction.Change, type: PermissionType.Document }">
+    <div class="d-flex align-items-center gap-2" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.Document }">
       <label class="me-2" i18n>Edit:</label>
-      <app-filterable-dropdown title="Tags" icon="tag-fill" i18n-title
+      <pngx-filterable-dropdown title="Tags" icon="tag-fill" i18n-title
         filterPlaceholder="Filter tags" i18n-filterPlaceholder
         [items]="tags"
         [disabled]="!userCanEditAll"
@@ -34,8 +34,8 @@
         [(selectionModel)]="tagSelectionModel"
         [documentCounts]="tagDocumentCounts"
         (apply)="setTags($event)">
-      </app-filterable-dropdown>
-      <app-filterable-dropdown title="Correspondent" icon="person-fill" i18n-title
+      </pngx-filterable-dropdown>
+      <pngx-filterable-dropdown title="Correspondent" icon="person-fill" i18n-title
         filterPlaceholder="Filter correspondents" i18n-filterPlaceholder
         [items]="correspondents"
         [disabled]="!userCanEditAll"
@@ -45,8 +45,8 @@
         [(selectionModel)]="correspondentSelectionModel"
         [documentCounts]="correspondentDocumentCounts"
         (apply)="setCorrespondents($event)">
-      </app-filterable-dropdown>
-      <app-filterable-dropdown title="Document type" icon="file-earmark-fill" i18n-title
+      </pngx-filterable-dropdown>
+      <pngx-filterable-dropdown title="Document type" icon="file-earmark-fill" i18n-title
         filterPlaceholder="Filter document types" i18n-filterPlaceholder
         [items]="documentTypes"
         [disabled]="!userCanEditAll"
@@ -56,8 +56,8 @@
         [(selectionModel)]="documentTypeSelectionModel"
         [documentCounts]="documentTypeDocumentCounts"
         (apply)="setDocumentTypes($event)">
-      </app-filterable-dropdown>
-      <app-filterable-dropdown title="Storage path" icon="folder-fill" i18n-title
+      </pngx-filterable-dropdown>
+      <pngx-filterable-dropdown title="Storage path" icon="folder-fill" i18n-title
         filterPlaceholder="Filter storage paths" i18n-filterPlaceholder
         [items]="storagePaths"
         [disabled]="!userCanEditAll"
@@ -67,7 +67,7 @@
         [(selectionModel)]="storagePathsSelectionModel"
         [documentCounts]="storagePathDocumentCounts"
         (apply)="setStoragePaths($event)">
-      </app-filterable-dropdown>
+      </pngx-filterable-dropdown>
   </div>
   <div class="d-flex align-items-center gap-2 ms-auto">
     <div class="btn-toolbar">
@@ -132,7 +132,7 @@
     </div>
 
     <div class="btn-group btn-group-sm">
-      <button type="button" class="btn btn-sm btn-outline-danger" (click)="applyDelete()" *appIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.Document }" [disabled]="!userOwnsAll">
+      <button type="button" class="btn btn-sm btn-outline-danger" (click)="applyDelete()" *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.Document }" [disabled]="!userOwnsAll">
         <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
           <use xlink:href="assets/bootstrap-icons.svg#trash" />
         </svg>&nbsp;<ng-container i18n>Delete</ng-container>

src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.ts

@@ -36,7 +36,7 @@ import { FormControl, FormGroup } from '@angular/forms'
 import { first, Subject, takeUntil } from 'rxjs'
 
 @Component({
-  selector: 'app-bulk-editor',
+  selector: 'pngx-bulk-editor',
   templateUrl: './bulk-editor.component.html',
   styleUrls: ['./bulk-editor.component.scss'],
 })

src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html

@@ -21,7 +21,7 @@
               <ng-template #nolink>{{(document.correspondent$ | async)?.name}}</ng-template>:
             </ng-container>
             {{document.title | documentTitle}}
-            <app-tag [tag]="t" linkTitle="Filter by tag" i18n-linkTitle *ngFor="let t of document.tags$ | async" class="ms-1" (click)="clickTag.emit(t.id);$event.stopPropagation()" [clickable]="clickTag.observers.length"></app-tag>
+            <pngx-tag [tag]="t" linkTitle="Filter by tag" i18n-linkTitle *ngFor="let t of document.tags$ | async" class="ms-1" (click)="clickTag.emit(t.id);$event.stopPropagation()" [clickable]="clickTag.observers.length"></pngx-tag>
           </h5>
         </div>
         <p class="card-text">
@@ -43,7 +43,7 @@
                 <use xlink:href="assets/bootstrap-icons.svg#diagram-3"/>
               </svg>&nbsp;<span class="d-none d-md-inline" i18n>More like this</span>
             </a>
-            <a routerLink="/documents/{{document.id}}" class="btn btn-sm btn-outline-secondary" *appIfPermissions="{ action: PermissionAction.Change, type: PermissionType.Document }">
+            <a routerLink="/documents/{{document.id}}" class="btn btn-sm btn-outline-secondary" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.Document }">
               <svg class="sidebaricon" fill="currentColor" class="sidebaricon">
                 <use xlink:href="assets/bootstrap-icons.svg#pencil"/>
               </svg>&nbsp;<span class="d-none d-md-inline" i18n>Edit</span>

src-ui/src/app/components/document-list/document-card-large/document-card-large.component.ts

@@ -13,7 +13,7 @@ import { SETTINGS_KEYS } from 'src/app/data/paperless-uisettings'
 import { ComponentWithPermissions } from '../../with-permissions/with-permissions.component'
 
 @Component({
-  selector: 'app-document-card-large',
+  selector: 'pngx-document-card-large',
   templateUrl: './document-card-large.component.html',
   styleUrls: [
     './document-card-large.component.scss',

src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html

@@ -11,7 +11,7 @@
       </div>
 
       <div class="tags d-flex flex-column text-end position-absolute me-1 fs-6">
-        <app-tag *ngFor="let t of getTagsLimited$() | async" [tag]="t" (click)="clickTag.emit(t.id);$event.stopPropagation()" [clickable]="true" linkTitle="Toggle tag filter" i18n-linkTitle></app-tag>
+        <pngx-tag *ngFor="let t of getTagsLimited$() | async" [tag]="t" (click)="clickTag.emit(t.id);$event.stopPropagation()" [clickable]="true" linkTitle="Toggle tag filter" i18n-linkTitle></pngx-tag>
         <div *ngIf="moreTags">
           <span class="badge text-dark">+ {{moreTags}}</span>
         </div>
@@ -80,7 +80,7 @@
       </div>
       <div class="d-flex justify-content-between align-items-center">
         <div class="btn-group w-100">
-          <a routerLink="/documents/{{document.id}}" class="btn btn-sm btn-outline-secondary" title="Edit" i18n-title *appIfPermissions="{ action: PermissionAction.Change, type: PermissionType.Document }" i18n-title>
+          <a routerLink="/documents/{{document.id}}" class="btn btn-sm btn-outline-secondary" title="Edit" i18n-title *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.Document }" i18n-title>
             <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-pencil" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
               <path fill-rule="evenodd" d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5L13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175l-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/>
             </svg>

src-ui/src/app/components/document-list/document-card-small/document-card-small.component.ts

@@ -14,7 +14,7 @@ import { SETTINGS_KEYS } from 'src/app/data/paperless-uisettings'
 import { ComponentWithPermissions } from '../../with-permissions/with-permissions.component'
 
 @Component({
-  selector: 'app-document-card-small',
+  selector: 'pngx-document-card-small',
   templateUrl: './document-card-small.component.html',
   styleUrls: [
     './document-card-small.component.scss',

src-ui/src/app/components/document-list/document-list.component.html

@@ -1,4 +1,4 @@
-<app-page-header [title]="getTitle()">
+<pngx-page-header [title]="getTitle()">
 
   <div ngbDropdown class="me-2 d-flex">
     <button class="btn btn-sm btn-outline-primary" id="dropdownSelect" ngbDropdownToggle>
@@ -59,7 +59,7 @@
     </div>
   </div>
 
-  <div class="btn-group ms-2 flex-fill" *appIfPermissions="{ action: PermissionAction.View, type: PermissionType.SavedView }" ngbDropdown role="group">
+  <div class="btn-group ms-2 flex-fill" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.SavedView }" ngbDropdown role="group">
     <button class="btn btn-sm btn-outline-primary dropdown-toggle flex-fill" tourAnchor="tour.documents-views" ngbDropdownToggle>
       <ng-container i18n>Views</ng-container>
       <div *ngIf="savedViewIsModified" class="position-absolute top-0 start-100 p-2 translate-middle badge bg-secondary border border-light rounded-circle">
@@ -72,18 +72,18 @@
         <div class="dropdown-divider" *ngIf="savedViewService.allViews.length > 0"></div>
       </ng-container>
 
-      <div *appIfPermissions="{ action: PermissionAction.Change, type: PermissionType.SavedView }">
+      <div *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.SavedView }">
         <button ngbDropdownItem (click)="saveViewConfig()" *ngIf="list.activeSavedViewId" [disabled]="!savedViewIsModified" i18n>Save "{{list.activeSavedViewTitle}}"</button>
       </div>
-      <button ngbDropdownItem (click)="saveViewConfigAs()" *appIfPermissions="{ action: PermissionAction.Add, type: PermissionType.SavedView }" i18n>Save as...</button>
+      <button ngbDropdownItem (click)="saveViewConfigAs()" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.SavedView }" i18n>Save as...</button>
     </div>
   </div>
 
-</app-page-header>
+</pngx-page-header>
 
 <div class="row sticky-top pt-3 pt-sm-4 pb-3 pb-lg-4 bg-body">
-  <app-filter-editor [hidden]="isBulkEditing" [(filterRules)]="list.filterRules" [unmodifiedFilterRules]="unmodifiedFilterRules" [selectionData]="list.selectionData" #filterEditor></app-filter-editor>
-  <app-bulk-editor [hidden]="!isBulkEditing"></app-bulk-editor>
+  <pngx-filter-editor [hidden]="isBulkEditing" [(filterRules)]="list.filterRules" [unmodifiedFilterRules]="unmodifiedFilterRules" [selectionData]="list.selectionData" #filterEditor></pngx-filter-editor>
+  <pngx-bulk-editor [hidden]="!isBulkEditing"></pngx-bulk-editor>
 </div>
 
 
@@ -119,71 +119,71 @@
 
 <ng-template #documentListNoError>
   <div *ngIf="displayMode === 'largeCards'">
-    <app-document-card-large [selected]="list.isSelected(d)" (toggleSelected)="toggleSelected(d, $event)" (dblClickDocument)="openDocumentDetail(d)" *ngFor="let d of list.documents; trackBy: trackByDocumentId" [document]="d" (clickTag)="clickTag($event)" (clickCorrespondent)="clickCorrespondent($event)" (clickDocumentType)="clickDocumentType($event)" (clickStoragePath)="clickStoragePath($event)" (clickMoreLike)="clickMoreLike(d.id)">
-    </app-document-card-large>
+    <pngx-document-card-large [selected]="list.isSelected(d)" (toggleSelected)="toggleSelected(d, $event)" (dblClickDocument)="openDocumentDetail(d)" *ngFor="let d of list.documents; trackBy: trackByDocumentId" [document]="d" (clickTag)="clickTag($event)" (clickCorrespondent)="clickCorrespondent($event)" (clickDocumentType)="clickDocumentType($event)" (clickStoragePath)="clickStoragePath($event)" (clickMoreLike)="clickMoreLike(d.id)">
+    </pngx-document-card-large>
   </div>
 
   <table class="table table-sm align-middle border shadow-sm" *ngIf="displayMode === 'details'">
     <thead>
       <th></th>
       <th class="d-none d-lg-table-cell"
-        appSortable="archive_serial_number"
+        pngxSortable="archive_serial_number"
         title="Sort by ASN" i18n-title
         [currentSortField]="list.sortField"
         [currentSortReverse]="list.sortReverse"
         (sort)="onSort($event)"
         i18n>ASN</th>
       <th class="d-none d-md-table-cell"
-        appSortable="correspondent__name"
+        pngxSortable="correspondent__name"
         title="Sort by correspondent" i18n-title
         [currentSortField]="list.sortField"
         [currentSortReverse]="list.sortReverse"
         (sort)="onSort($event)"
         i18n>Correspondent</th>
       <th
-        appSortable="title"
+        pngxSortable="title"
         title="Sort by title" i18n-title
         [currentSortField]="list.sortField"
         [currentSortReverse]="list.sortReverse"
         (sort)="onSort($event)"
         i18n>Title</th>
       <th class="d-none d-xl-table-cell"
-        appSortable="owner"
+        pngxSortable="owner"
         title="Sort by owner" i18n-title
         [currentSortField]="list.sortField"
         [currentSortReverse]="list.sortReverse"
         (sort)="onSort($event)"
         i18n>Owner</th>
       <th *ngIf="notesEnabled" class="d-none d-xl-table-cell"
-        appSortable="num_notes"
+        pngxSortable="num_notes"
         title="Sort by notes" i18n-title
         [currentSortField]="list.sortField"
         [currentSortReverse]="list.sortReverse"
         (sort)="onSort($event)"
         i18n>Notes</th>
       <th class="d-none d-xl-table-cell"
-        appSortable="document_type__name"
+        pngxSortable="document_type__name"
         title="Sort by document type" i18n-title
         [currentSortField]="list.sortField"
         [currentSortReverse]="list.sortReverse"
         (sort)="onSort($event)"
         i18n>Document type</th>
       <th class="d-none d-xl-table-cell"
-        appSortable="storage_path__name"
+        pngxSortable="storage_path__name"
         title="Sort by storage path" i18n-title
         [currentSortField]="list.sortField"
         [currentSortReverse]="list.sortReverse"
         (sort)="onSort($event)"
         i18n>Storage path</th>
       <th
-        appSortable="created"
+        pngxSortable="created"
         title="Sort by created date" i18n-title
         [currentSortField]="list.sortField"
         [currentSortReverse]="list.sortReverse"
         (sort)="onSort($event)"
         i18n>Created</th>
       <th class="d-none d-xl-table-cell"
-        appSortable="added"
+        pngxSortable="added"
         title="Sort by added date" i18n-title
         [currentSortField]="list.sortField"
         [currentSortReverse]="list.sortReverse"
@@ -208,7 +208,7 @@
         </td>
         <td>
           <a routerLink="/documents/{{d.id}}" title="Edit document" i18n-title style="overflow-wrap: anywhere;">{{d.title | documentTitle}}</a>
-          <app-tag [tag]="t" *ngFor="let t of d.tags$ | async" class="ms-1" clickable="true" linkTitle="Filter by tag" i18n-linkTitle (click)="clickTag(t.id);$event.stopPropagation()"></app-tag>
+          <pngx-tag [tag]="t" *ngFor="let t of d.tags$ | async" class="ms-1" clickable="true" linkTitle="Filter by tag" i18n-linkTitle (click)="clickTag(t.id);$event.stopPropagation()"></pngx-tag>
         </td>
         <td>
           {{d.owner | username}}
@@ -243,7 +243,7 @@
   </table>
 
   <div class="row row-cols-paperless-cards" *ngIf="displayMode === 'smallCards'">
-    <app-document-card-small class="p-0" [selected]="list.isSelected(d)" (toggleSelected)="toggleSelected(d, $event)" (dblClickDocument)="openDocumentDetail(d)" [document]="d" *ngFor="let d of list.documents; trackBy: trackByDocumentId" (clickTag)="clickTag($event)" (clickCorrespondent)="clickCorrespondent($event)" (clickStoragePath)="clickStoragePath($event)" (clickDocumentType)="clickDocumentType($event)"></app-document-card-small>
+    <pngx-document-card-small class="p-0" [selected]="list.isSelected(d)" (toggleSelected)="toggleSelected(d, $event)" (dblClickDocument)="openDocumentDetail(d)" [document]="d" *ngFor="let d of list.documents; trackBy: trackByDocumentId" (clickTag)="clickTag($event)" (clickCorrespondent)="clickCorrespondent($event)" (clickStoragePath)="clickStoragePath($event)" (clickDocumentType)="clickDocumentType($event)"></pngx-document-card-small>
   </div>
   <div *ngIf="list.documents?.length > 15" class="mt-3">
     <ng-container *ngTemplateOutlet="pagination"></ng-container>

src-ui/src/app/components/document-list/document-list.component.ts

@@ -37,7 +37,7 @@ import { FilterEditorComponent } from './filter-editor/filter-editor.component'
 import { SaveViewConfigDialogComponent } from './save-view-config-dialog/save-view-config-dialog.component'
 
 @Component({
-  selector: 'app-document-list',
+  selector: 'pngx-document-list',
   templateUrl: './document-list.component.html',
   styleUrls: ['./document-list.component.scss'],
 })

src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html

@@ -23,7 +23,7 @@
   <div class="col-auto">
     <div class="d-flex flex-wrap gap-3">
       <div class="d-flex flex-wrap gap-2">
-        <app-filterable-dropdown class="flex-fill" title="Tags" icon="tag-fill" i18n-title
+        <pngx-filterable-dropdown class="flex-fill" title="Tags" icon="tag-fill" i18n-title
           filterPlaceholder="Filter tags" i18n-filterPlaceholder
           [items]="tags"
           [manyToOne]="true"
@@ -31,51 +31,51 @@
           (selectionModelChange)="updateRules()"
           (opened)="onTagsDropdownOpen()"
           [documentCounts]="tagDocumentCounts"
-          [allowSelectNone]="true"></app-filterable-dropdown>
-        <app-filterable-dropdown class="flex-fill" title="Correspondent" icon="person-fill" i18n-title
+          [allowSelectNone]="true"></pngx-filterable-dropdown>
+        <pngx-filterable-dropdown class="flex-fill" title="Correspondent" icon="person-fill" i18n-title
           filterPlaceholder="Filter correspondents" i18n-filterPlaceholder
           [items]="correspondents"
           [(selectionModel)]="correspondentSelectionModel"
           (selectionModelChange)="updateRules()"
           (opened)="onCorrespondentDropdownOpen()"
           [documentCounts]="correspondentDocumentCounts"
-          [allowSelectNone]="true"></app-filterable-dropdown>
-        <app-filterable-dropdown class="flex-fill" title="Document type" icon="file-earmark-fill" i18n-title
+          [allowSelectNone]="true"></pngx-filterable-dropdown>
+        <pngx-filterable-dropdown class="flex-fill" title="Document type" icon="file-earmark-fill" i18n-title
           filterPlaceholder="Filter document types" i18n-filterPlaceholder
           [items]="documentTypes"
           [(selectionModel)]="documentTypeSelectionModel"
           (selectionModelChange)="updateRules()"
           (opened)="onDocumentTypeDropdownOpen()"
           [documentCounts]="documentTypeDocumentCounts"
-          [allowSelectNone]="true"></app-filterable-dropdown>
-        <app-filterable-dropdown class="flex-fill" title="Storage path" icon="folder-fill" i18n-title
+          [allowSelectNone]="true"></pngx-filterable-dropdown>
+        <pngx-filterable-dropdown class="flex-fill" title="Storage path" icon="folder-fill" i18n-title
           filterPlaceholder="Filter storage paths" i18n-filterPlaceholder
           [items]="storagePaths"
           [(selectionModel)]="storagePathSelectionModel"
           (selectionModelChange)="updateRules()"
           (opened)="onStoragePathDropdownOpen()"
           [documentCounts]="storagePathDocumentCounts"
-          [allowSelectNone]="true"></app-filterable-dropdown>
+          [allowSelectNone]="true"></pngx-filterable-dropdown>
       </div>
       <div class="d-flex flex-wrap gap-2">
-        <app-date-dropdown
+        <pngx-date-dropdown
           title="Created" i18n-title
           (datesSet)="updateRules()"
           [(dateBefore)]="dateCreatedBefore"
           [(dateAfter)]="dateCreatedAfter"
-          [(relativeDate)]="dateCreatedRelativeDate"></app-date-dropdown>
-        <app-date-dropdown
+          [(relativeDate)]="dateCreatedRelativeDate"></pngx-date-dropdown>
+        <pngx-date-dropdown
           title="Added" i18n-title
           (datesSet)="updateRules()"
           [(dateBefore)]="dateAddedBefore"
           [(dateAfter)]="dateAddedAfter"
-          [(relativeDate)]="dateAddedRelativeDate"></app-date-dropdown>
+          [(relativeDate)]="dateAddedRelativeDate"></pngx-date-dropdown>
       </div>
       <div class="d-flex flex-wrap">
-        <app-permissions-filter-dropdown
+        <pngx-permissions-filter-dropdown
           title="Permissions" i18n-title
           (ownerFilterSet)="updateRules()"
-          [(selectionModel)]="permissionsSelectionModel"></app-permissions-filter-dropdown>
+          [(selectionModel)]="permissionsSelectionModel"></pngx-permissions-filter-dropdown>
       </div>
       <div class="d-flex flex-wrap d-none d-sm-inline-block">
         <button class="btn btn-outline-secondary btn-sm" [disabled]="!rulesModified" (click)="resetSelected()">

src-ui/src/app/components/document-list/filter-editor/filter-editor.component.ts

@@ -103,7 +103,7 @@ const RELATIVE_DATE_QUERYSTRINGS = [
 ]
 
 @Component({
-  selector: 'app-filter-editor',
+  selector: 'pngx-filter-editor',
   templateUrl: './filter-editor.component.html',
   styleUrls: ['./filter-editor.component.scss'],
 })

src-ui/src/app/components/document-list/save-view-config-dialog/save-view-config-dialog.component.html

@@ -5,9 +5,9 @@
     </button>
   </div>
   <div class="modal-body">
-    <app-input-text i18n-title title="Name" formControlName="name" [error]="error?.name"></app-input-text>
-    <app-input-check i18n-title title="Show in sidebar" formControlName="showInSideBar"></app-input-check>
-    <app-input-check i18n-title title="Show on dashboard" formControlName="showOnDashboard"></app-input-check>
+    <pngx-input-text i18n-title title="Name" formControlName="name" [error]="error?.name"></pngx-input-text>
+    <pngx-input-check i18n-title title="Show in sidebar" formControlName="showInSideBar"></pngx-input-check>
+    <pngx-input-check i18n-title title="Show on dashboard" formControlName="showOnDashboard"></pngx-input-check>
     <div *ngIf="error?.filter_rules" class="alert alert-danger" role="alert">
       <h6 class="alert-heading" i18n>Filter rules error occurred while saving this view</h6>
       <ng-container i18n>The error returned was</ng-container>:<br/>

src-ui/src/app/components/document-list/save-view-config-dialog/save-view-config-dialog.component.ts

@@ -3,7 +3,7 @@ import { FormControl, FormGroup } from '@angular/forms'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 
 @Component({
-  selector: 'app-save-view-config-dialog',
+  selector: 'pngx-save-view-config-dialog',
   templateUrl: './save-view-config-dialog.component.html',
   styleUrls: ['./save-view-config-dialog.component.scss'],
 })

src-ui/src/app/components/document-notes/document-notes.component.html

@@ -1,5 +1,5 @@
 <div *ngIf="notes">
-    <form [formGroup]="noteForm" class="needs-validation mt-3" *appIfPermissions="{ action: PermissionAction.Add, type: PermissionType.Note }" novalidate>
+    <form [formGroup]="noteForm" class="needs-validation mt-3" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.Note }" novalidate>
         <div class="form-group">
             <textarea class="form-control form-control-sm" [class.is-invalid]="newNoteError" rows="3" formControlName="newNote" placeholder="Enter note" i18n-placeholder (keydown)="noteFormKeydown($event)" required></textarea>
             <div class="invalid-feedback" i18n>
@@ -18,7 +18,7 @@
         </div>
         <div class="d-flex card-footer small bg-light text-primary justify-content-between align-items-center">
             <span>{{displayName(note)}} - {{ note.created | customDate}}</span>
-            <button type="button" class="btn btn-link btn-sm p-0 fade" title="Delete note" i18n-title (click)="deleteNote(note.id)" *appIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.Note }">
+            <button type="button" class="btn btn-link btn-sm p-0 fade" title="Delete note" i18n-title (click)="deleteNote(note.id)" *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.Note }">
                 <svg width="13" height="13" fill="currentColor">
                     <use xlink:href="assets/bootstrap-icons.svg#trash" />
                 </svg>

src-ui/src/app/components/document-notes/document-notes.component.ts

@@ -8,7 +8,7 @@ import { UserService } from 'src/app/services/rest/user.service'
 import { PaperlessUser } from 'src/app/data/paperless-user'
 
 @Component({
-  selector: 'app-document-notes',
+  selector: 'pngx-document-notes',
   templateUrl: './document-notes.component.html',
   styleUrls: ['./document-notes.component.scss'],
 })

src-ui/src/app/components/manage/correspondent-list/correspondent-list.component.ts

@@ -14,7 +14,7 @@ import { CorrespondentEditDialogComponent } from '../../common/edit-dialog/corre
 import { ManagementListComponent } from '../management-list/management-list.component'
 
 @Component({
-  selector: 'app-correspondent-list',
+  selector: 'pngx-correspondent-list',
   templateUrl: './../management-list/management-list.component.html',
   styleUrls: ['./../management-list/management-list.component.scss'],
   providers: [{ provide: CustomDatePipe }],

src-ui/src/app/components/manage/document-type-list/document-type-list.component.ts

@@ -13,7 +13,7 @@ import { DocumentTypeEditDialogComponent } from '../../common/edit-dialog/docume
 import { ManagementListComponent } from '../management-list/management-list.component'
 
 @Component({
-  selector: 'app-document-type-list',
+  selector: 'pngx-document-type-list',
   templateUrl: './../management-list/management-list.component.html',
   styleUrls: ['./../management-list/management-list.component.scss'],
 })

src-ui/src/app/components/manage/logs/logs.component.html

@@ -1,6 +1,6 @@
-<app-page-header title="Logs" i18n-title>
+<pngx-page-header title="Logs" i18n-title>
 
-</app-page-header>
+</pngx-page-header>
 
 <ul ngbNav #nav="ngbNav" [(activeId)]="activeLog" (activeIdChange)="reloadLogs()" class="nav-tabs">
   <li *ngFor="let logFile of logFiles" [ngbNavItem]="logFile">

src-ui/src/app/components/manage/logs/logs.component.ts

@@ -10,7 +10,7 @@ import { Subject, takeUntil } from 'rxjs'
 import { LogService } from 'src/app/services/rest/log.service'
 
 @Component({
-  selector: 'app-logs',
+  selector: 'pngx-logs',
   templateUrl: './logs.component.html',
   styleUrls: ['./logs.component.scss'],
 })

src-ui/src/app/components/manage/management-list/management-list.component.html

@@ -1,6 +1,6 @@
-<app-page-header title="{{ typeNamePlural | titlecase }}">
-  <button type="button" class="btn btn-sm btn-outline-primary" (click)="openCreateDialog()" *appIfPermissions="{ action: PermissionAction.Add, type: permissionType }" i18n>Create</button>
-</app-page-header>
+<pngx-page-header title="{{ typeNamePlural | titlecase }}">
+  <button type="button" class="btn btn-sm btn-outline-primary" (click)="openCreateDialog()" *pngxIfPermissions="{ action: PermissionAction.Add, type: permissionType }" i18n>Create</button>
+</pngx-page-header>
 
 <div class="row mb-3">
   <div class="col-md mb-2 mb-xl-0">
@@ -16,10 +16,10 @@
 <table class="table table-striped align-middle border shadow-sm">
   <thead>
     <tr>
-      <th scope="col" appSortable="name" [currentSortField]="sortField" [currentSortReverse]="sortReverse" (sort)="onSort($event)" i18n>Name</th>
-      <th scope="col" class="d-none d-sm-table-cell" appSortable="matching_algorithm" [currentSortField]="sortField" [currentSortReverse]="sortReverse" (sort)="onSort($event)" i18n>Matching</th>
-      <th scope="col" appSortable="document_count" [currentSortField]="sortField" [currentSortReverse]="sortReverse" (sort)="onSort($event)" i18n>Document count</th>
-      <th scope="col" *ngFor="let column of extraColumns" appSortable="{{column.key}}" [currentSortField]="sortField" [currentSortReverse]="sortReverse" (sort)="onSort($event)">{{column.name}}</th>
+      <th scope="col" pngxSortable="name" [currentSortField]="sortField" [currentSortReverse]="sortReverse" (sort)="onSort($event)" i18n>Name</th>
+      <th scope="col" class="d-none d-sm-table-cell" pngxSortable="matching_algorithm" [currentSortField]="sortField" [currentSortReverse]="sortReverse" (sort)="onSort($event)" i18n>Matching</th>
+      <th scope="col" pngxSortable="document_count" [currentSortField]="sortField" [currentSortReverse]="sortReverse" (sort)="onSort($event)" i18n>Document count</th>
+      <th scope="col" *ngFor="let column of extraColumns" pngxSortable="{{column.key}}" [currentSortField]="sortField" [currentSortReverse]="sortReverse" (sort)="onSort($event)">{{column.name}}</th>
       <th scope="col" i18n>Actions</th>
     </tr>
   </thead>
@@ -47,24 +47,24 @@
               </svg>
             </button>
             <div ngbDropdownMenu aria-labelledby="actionsMenuMobile">
-              <button (click)="filterDocuments(object)" *appIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }" ngbDropdownItem i18n>Filter Documents</button>
-              <button (click)="openEditDialog(object)" *appIfPermissions="{ action: PermissionAction.Change, type: permissionType }" ngbDropdownItem i18n>Edit</button>
-              <button class="text-danger" (click)="openDeleteDialog(object)" *appIfPermissions="{ action: PermissionAction.Delete, type: permissionType }" ngbDropdownItem i18n>Delete</button>
+              <button (click)="filterDocuments(object)" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }" ngbDropdownItem i18n>Filter Documents</button>
+              <button (click)="openEditDialog(object)" *pngxIfPermissions="{ action: PermissionAction.Change, type: permissionType }" ngbDropdownItem i18n>Edit</button>
+              <button class="text-danger" (click)="openDeleteDialog(object)" *pngxIfPermissions="{ action: PermissionAction.Delete, type: permissionType }" ngbDropdownItem i18n>Delete</button>
             </div>
           </div>
         </div>
         <div class="btn-group d-none d-sm-block">
-          <button class="btn btn-sm btn-outline-secondary" (click)="filterDocuments(object)" *appIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }">
+          <button class="btn btn-sm btn-outline-secondary" (click)="filterDocuments(object)" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }">
             <svg class="buttonicon-sm" fill="currentColor">
               <use xlink:href="assets/bootstrap-icons.svg#filter" />
             </svg>&nbsp;<ng-container i18n>Documents</ng-container>
           </button>
-          <button class="btn btn-sm btn-outline-secondary" (click)="openEditDialog(object)" *appIfPermissions="{ action: PermissionAction.Change, type: permissionType }" [disabled]="!userCanEdit(object)">
+          <button class="btn btn-sm btn-outline-secondary" (click)="openEditDialog(object)" *pngxIfPermissions="{ action: PermissionAction.Change, type: permissionType }" [disabled]="!userCanEdit(object)">
             <svg class="buttonicon-sm" fill="currentColor">
               <use xlink:href="assets/bootstrap-icons.svg#pencil" />
             </svg>&nbsp;<ng-container i18n>Edit</ng-container>
           </button>
-          <button class="btn btn-sm btn-outline-danger" (click)="openDeleteDialog(object)" *appIfPermissions="{ action: PermissionAction.Delete, type: permissionType }" [disabled]="!userCanDelete(object)">
+          <button class="btn btn-sm btn-outline-danger" (click)="openDeleteDialog(object)" *pngxIfPermissions="{ action: PermissionAction.Delete, type: permissionType }" [disabled]="!userCanDelete(object)">
             <svg class="buttonicon-sm" fill="currentColor">
               <use xlink:href="assets/bootstrap-icons.svg#trash" />
             </svg>&nbsp;<ng-container i18n>Delete</ng-container>

src-ui/src/app/components/manage/settings/settings.component.html

@@ -1,12 +1,12 @@
-<app-page-header title="Settings" i18n-title>
+<pngx-page-header title="Settings" i18n-title>
   <button class="btn btn-sm btn-outline-primary" (click)="tourService.start()"><ng-container i18n>Start tour</ng-container></button>
-  <a *appIfPermissions="{ action: PermissionAction.View, type: PermissionType.Admin }" class="btn btn-sm btn-primary ms-3" href="admin/" target="_blank">
+  <a *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Admin }" class="btn btn-sm btn-primary ms-3" href="admin/" target="_blank">
       <ng-container i18n>Open Django Admin</ng-container>
       <svg class="sidebaricon ms-1" fill="currentColor">
         <use xlink:href="assets/bootstrap-icons.svg#arrow-up-right"/>
       </svg>
   </a>
-</app-page-header>
+</pngx-page-header>
 
 <form [formGroup]="settingsForm" (ngSubmit)="saveSettings()">
 
@@ -89,7 +89,7 @@
           </div>
           <div class="col">
 
-            <app-input-check i18n-title title="Use PDF viewer provided by the browser" i18n-hint hint="This is usually faster for displaying large PDF documents, but it might not work on some browsers." formControlName="useNativePdfViewer"></app-input-check>
+            <pngx-input-check i18n-title title="Use PDF viewer provided by the browser" i18n-hint hint="This is usually faster for displaying large PDF documents, but it might not work on some browsers." formControlName="useNativePdfViewer"></pngx-input-check>
 
           </div>
         </div>
@@ -100,7 +100,7 @@
           </div>
           <div class="col">
 
-            <app-input-check i18n-title title="Use 'slim' sidebar (icons only)" formControlName="slimSidebarEnabled"></app-input-check>
+            <pngx-input-check i18n-title title="Use 'slim' sidebar (icons only)" formControlName="slimSidebarEnabled"></pngx-input-check>
 
           </div>
         </div>
@@ -110,9 +110,9 @@
             <span i18n>Dark mode</span>
           </div>
           <div class="col">
-            <app-input-check i18n-title title="Use system settings" formControlName="darkModeUseSystem"></app-input-check>
-            <app-input-check [hidden]="settingsForm.value.darkModeUseSystem" i18n-title title="Enable dark mode" formControlName="darkModeEnabled"></app-input-check>
-            <app-input-check i18n-title title="Invert thumbnails in dark mode" formControlName="darkModeInvertThumbs"></app-input-check>
+            <pngx-input-check i18n-title title="Use system settings" formControlName="darkModeUseSystem"></pngx-input-check>
+            <pngx-input-check [hidden]="settingsForm.value.darkModeUseSystem" i18n-title title="Enable dark mode" formControlName="darkModeEnabled"></pngx-input-check>
+            <pngx-input-check i18n-title title="Invert thumbnails in dark mode" formControlName="darkModeInvertThumbs"></pngx-input-check>
           </div>
         </div>
 
@@ -121,7 +121,7 @@
             <span i18n>Theme Color</span>
           </div>
           <div class="col col-md-3">
-            <app-input-color i18n-title formControlName="themeColor" [error]="error?.color"></app-input-color>
+            <pngx-input-color i18n-title formControlName="themeColor" [error]="error?.color"></pngx-input-color>
           </div>
           <div class="col-2">
             <button class="btn btn-link btn-sm pt-2 ps-0" [disabled]="!this.settingsForm.get('themeColor').value" (click)="clearThemeColor()">
@@ -143,7 +143,7 @@
             <p i18n>
               <em>No tracking data is collected by the app in any way.</em>
             </p>
-            <app-input-check i18n-title title="Enable update checking" formControlName="updateCheckingEnabled" i18n-hint hint="Note that for users of third-party containers e.g. linuxserver.io this notification may be 'ahead' of the current third-party release."></app-input-check>
+            <pngx-input-check i18n-title title="Enable update checking" formControlName="updateCheckingEnabled" i18n-hint hint="Note that for users of third-party containers e.g. linuxserver.io this notification may be 'ahead' of the current third-party release."></pngx-input-check>
           </div>
         </div>
 
@@ -151,8 +151,8 @@
 
         <div class="row mb-3">
           <div class="offset-md-3 col">
-            <app-input-check i18n-title title="Show confirmation dialogs" formControlName="bulkEditConfirmationDialogs" i18n-hint hint="Deleting documents will always ask for confirmation."></app-input-check>
-            <app-input-check i18n-title title="Apply on close" formControlName="bulkEditApplyOnClose"></app-input-check>
+            <pngx-input-check i18n-title title="Show confirmation dialogs" formControlName="bulkEditConfirmationDialogs" i18n-hint hint="Deleting documents will always ask for confirmation."></pngx-input-check>
+            <pngx-input-check i18n-title title="Apply on close" formControlName="bulkEditApplyOnClose"></pngx-input-check>
           </div>
         </div>
 
@@ -160,7 +160,7 @@
 
         <div class="row mb-3">
           <div class="offset-md-3 col">
-            <app-input-check i18n-title title="Enable notes" formControlName="notesEnabled"></app-input-check>
+            <pngx-input-check i18n-title title="Enable notes" formControlName="notesEnabled"></pngx-input-check>
           </div>
         </div>
 
@@ -175,10 +175,10 @@
 
         <div class="row mb-3">
           <div class="offset-md-3 col">
-            <app-input-check i18n-title title="Show notifications when new documents are detected" formControlName="notificationsConsumerNewDocument"></app-input-check>
-            <app-input-check i18n-title title="Show notifications when document processing completes successfully" formControlName="notificationsConsumerSuccess"></app-input-check>
-            <app-input-check i18n-title title="Show notifications when document processing fails" formControlName="notificationsConsumerFailed"></app-input-check>
-            <app-input-check i18n-title title="Suppress notifications on dashboard" formControlName="notificationsConsumerSuppressOnDashboard" i18n-hint hint="This will suppress all messages about document processing status on the dashboard."></app-input-check>
+            <pngx-input-check i18n-title title="Show notifications when new documents are detected" formControlName="notificationsConsumerNewDocument"></pngx-input-check>
+            <pngx-input-check i18n-title title="Show notifications when document processing completes successfully" formControlName="notificationsConsumerSuccess"></pngx-input-check>
+            <pngx-input-check i18n-title title="Show notifications when document processing fails" formControlName="notificationsConsumerFailed"></pngx-input-check>
+            <pngx-input-check i18n-title title="Suppress notifications on dashboard" formControlName="notificationsConsumerSuppressOnDashboard" i18n-hint hint="This will suppress all messages about document processing status on the dashboard."></pngx-input-check>
           </div>
         </div>
 
@@ -192,7 +192,7 @@
         <h4 i18n>Settings</h4>
         <div class="row mb-3">
           <div class="offset-md-3 col">
-            <app-input-check i18n-title title="Show warning when closing saved views with unsaved changes" formControlName="savedViewsWarnOnUnsavedChange"></app-input-check>
+            <pngx-input-check i18n-title title="Show warning when closing saved views with unsaved changes" formControlName="savedViewsWarnOnUnsavedChange"></pngx-input-check>
           </div>
         </div>
 
@@ -219,7 +219,7 @@
 
               <div class="mb-2 col-auto">
                 <label class="form-label" for="name_{{view.id}}" i18n>Actions</label>
-                <button type="button" class="btn btn-sm btn-outline-danger form-control" (click)="deleteSavedView(view)" *appIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.SavedView }" i18n>Delete</button>
+                <button type="button" class="btn btn-sm btn-outline-danger form-control" (click)="deleteSavedView(view)" *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.SavedView }" i18n>Delete</button>
               </div>
             </div>
 
@@ -235,15 +235,15 @@
       </ng-template>
     </li>
 
-    <li *appIfPermissions="{ action: PermissionAction.View, type: PermissionType.MailRule }" [ngbNavItem]="SettingsNavIDs.Mail" (mouseover)="maybeInitializeTab(SettingsNavIDs.Mail)" (focusin)="maybeInitializeTab(SettingsNavIDs.Mail)">
+    <li *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.MailRule }" [ngbNavItem]="SettingsNavIDs.Mail" (mouseover)="maybeInitializeTab(SettingsNavIDs.Mail)" (focusin)="maybeInitializeTab(SettingsNavIDs.Mail)">
       <a ngbNavLink i18n>Mail</a>
       <ng-template ngbNavContent>
 
         <ng-container *ngIf="mailAccounts && mailRules">
-          <ng-container *appIfPermissions="{ action: PermissionAction.View, type: PermissionType.MailAccount }">
+          <ng-container *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.MailAccount }">
             <h4>
               <ng-container i18n>Mail accounts</ng-container>
-              <button type="button" class="btn btn-sm btn-primary ms-4" (click)="editMailAccount()" *appIfPermissions="{ action: PermissionAction.Add, type: PermissionType.MailAccount }">
+              <button type="button" class="btn btn-sm btn-primary ms-4" (click)="editMailAccount()" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.MailAccount }">
                 <svg class="sidebaricon me-1" fill="currentColor">
                   <use xlink:href="assets/bootstrap-icons.svg#plus-circle" />
                 </svg>
@@ -266,8 +266,8 @@
                     <div class="col d-flex align-items-center">{{account.imap_server}}</div>
                     <div class="col">
                       <div class="btn-group">
-                        <button *appIfPermissions="{ action: PermissionAction.Change, type: PermissionType.MailAccount }" [disabled]="!userCanEdit(account)" class="btn btn-sm btn-primary" type="button" (click)="editMailAccount(account)" i18n>Edit</button>
-                        <button *appIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.MailAccount }" [disabled]="!userIsOwner(account)" class="btn btn-sm btn-outline-danger" type="button" (click)="deleteMailAccount(account)" i18n>Delete</button>
+                        <button *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.MailAccount }" [disabled]="!userCanEdit(account)" class="btn btn-sm btn-primary" type="button" (click)="editMailAccount(account)" i18n>Edit</button>
+                        <button *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.MailAccount }" [disabled]="!userIsOwner(account)" class="btn btn-sm btn-outline-danger" type="button" (click)="deleteMailAccount(account)" i18n>Delete</button>
                       </div>
                     </div>
                   </div>
@@ -277,10 +277,10 @@
             </ul>
           </ng-container>
 
-          <ng-container *appIfPermissions="{ action: PermissionAction.View, type: PermissionType.MailRule }">
+          <ng-container *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.MailRule }">
             <h4 class="mt-4">
               <ng-container i18n>Mail rules</ng-container>
-              <button type="button" class="btn btn-sm btn-primary ms-4" (click)="editMailRule()" *appIfPermissions="{ action: PermissionAction.Add, type: PermissionType.MailRule }">
+              <button type="button" class="btn btn-sm btn-primary ms-4" (click)="editMailRule()" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.MailRule }">
                 <svg class="sidebaricon me-1" fill="currentColor">
                   <use xlink:href="assets/bootstrap-icons.svg#plus-circle" />
                 </svg>
@@ -303,8 +303,8 @@
                     <div class="col d-flex align-items-center">{{(mailAccountService.getCached(rule.account) | async)?.name}}</div>
                     <div class="col">
                       <div class="btn-group">
-                        <button *appIfPermissions="{ action: PermissionAction.Change, type: PermissionType.MailRule }" [disabled]="!userCanEdit(rule)" class="btn btn-sm btn-primary" type="button" (click)="editMailRule(rule)" i18n>Edit</button>
-                        <button *appIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.MailRule }" [disabled]="!userIsOwner(rule)" class="btn btn-sm btn-outline-danger" type="button" (click)="deleteMailRule(rule)" i18n>Delete</button>
+                        <button *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.MailRule }" [disabled]="!userCanEdit(rule)" class="btn btn-sm btn-primary" type="button" (click)="editMailRule(rule)" i18n>Edit</button>
+                        <button *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.MailRule }" [disabled]="!userIsOwner(rule)" class="btn btn-sm btn-outline-danger" type="button" (click)="deleteMailRule(rule)" i18n>Delete</button>
                       </div>
                     </div>
                   </div>
@@ -323,14 +323,14 @@
       </ng-template>
     </li>
 
-    <li [ngbNavItem]="SettingsNavIDs.UsersGroups" *appIfPermissions="{ action: PermissionAction.View, type: PermissionType.User }" (mouseover)="maybeInitializeTab(SettingsNavIDs.UsersGroups)" (focusin)="maybeInitializeTab(SettingsNavIDs.UsersGroups)">
+    <li [ngbNavItem]="SettingsNavIDs.UsersGroups" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.User }" (mouseover)="maybeInitializeTab(SettingsNavIDs.UsersGroups)" (focusin)="maybeInitializeTab(SettingsNavIDs.UsersGroups)">
       <a ngbNavLink i18n>Users & Groups</a>
       <ng-template ngbNavContent>
 
       <ng-container *ngIf="users && groups">
         <h4 class="d-flex">
           <ng-container i18n>Users</ng-container>
-          <button type="button" class="btn btn-sm btn-primary ms-4" (click)="editUser()" *appIfPermissions="{ action: PermissionAction.Add, type: PermissionType.User }">
+          <button type="button" class="btn btn-sm btn-primary ms-4" (click)="editUser()" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.User }">
             <svg class="sidebaricon me-1" fill="currentColor">
               <use xlink:href="assets/bootstrap-icons.svg#plus-circle" />
             </svg>
@@ -355,8 +355,8 @@
               <div class="col d-flex align-items-center">{{user.groups?.map(getGroupName, this).join(', ')}}</div>
               <div class="col">
                 <div class="btn-group">
-                  <button class="btn btn-sm btn-primary" type="button" (click)="editUser(user)" *appIfPermissions="{ action: PermissionAction.Change, type: PermissionType.User }" i18n>Edit</button>
-                  <button class="btn btn-sm btn-outline-danger" type="button" (click)="deleteUser(user)" *appIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.User }" i18n>Delete</button>
+                  <button class="btn btn-sm btn-primary" type="button" (click)="editUser(user)" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.User }" i18n>Edit</button>
+                  <button class="btn btn-sm btn-outline-danger" type="button" (click)="deleteUser(user)" *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.User }" i18n>Delete</button>
                 </div>
               </div>
             </div>
@@ -365,7 +365,7 @@
 
         <h4 class="mt-4 d-flex">
           <ng-container i18n>Groups</ng-container>
-          <button type="button" class="btn btn-sm btn-primary ms-4" (click)="editGroup()" *appIfPermissions="{ action: PermissionAction.Add, type: PermissionType.Group }">
+          <button type="button" class="btn btn-sm btn-primary ms-4" (click)="editGroup()" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.Group }">
             <svg class="sidebaricon me-1" fill="currentColor">
               <use xlink:href="assets/bootstrap-icons.svg#plus-circle" />
             </svg>
@@ -390,8 +390,8 @@
               <div class="col"></div>
               <div class="col">
                 <div class="btn-group">
-                  <button class="btn btn-sm btn-primary" type="button" (click)="editGroup(group)" *appIfPermissions="{ action: PermissionAction.Change, type: PermissionType.Group }" i18n>Edit</button>
-                  <button class="btn btn-sm btn-outline-danger" type="button" (click)="deleteGroup(group)" *appIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.Group }" i18n>Delete</button>
+                  <button class="btn btn-sm btn-primary" type="button" (click)="editGroup(group)" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.Group }" i18n>Edit</button>
+                  <button class="btn btn-sm btn-outline-danger" type="button" (click)="deleteGroup(group)" *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.Group }" i18n>Delete</button>
                 </div>
               </div>
             </div>
@@ -412,5 +412,5 @@
 
   <div [ngbNavOutlet]="nav" class="border-start border-end border-bottom p-3 mb-3 shadow-sm"></div>
 
-  <button type="submit" class="btn btn-primary mb-2" *appIfPermissions="{ action: PermissionAction.Change, type: PermissionType.UISettings }" [disabled]="(isDirty$ | async) === false" i18n>Save</button>
+  <button type="submit" class="btn btn-primary mb-2" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.UISettings }" [disabled]="(isDirty$ | async) === false" i18n>Save</button>
 </form>

src-ui/src/app/components/manage/settings/settings.component.ts

@@ -60,7 +60,7 @@ enum SettingsNavIDs {
 }
 
 @Component({
-  selector: 'app-settings',
+  selector: 'pngx-settings',
   templateUrl: './settings.component.html',
   styleUrls: ['./settings.component.scss'],
 })

src-ui/src/app/components/manage/storage-path-list/storage-path-list.component.ts

@@ -13,7 +13,7 @@ import { StoragePathEditDialogComponent } from '../../common/edit-dialog/storage
 import { ManagementListComponent } from '../management-list/management-list.component'
 
 @Component({
-  selector: 'app-storage-path-list',
+  selector: 'pngx-storage-path-list',
   templateUrl: './../management-list/management-list.component.html',
   styleUrls: ['./../management-list/management-list.component.scss'],
 })

src-ui/src/app/components/manage/tag-list/tag-list.component.ts

@@ -13,7 +13,7 @@ import { TagEditDialogComponent } from '../../common/edit-dialog/tag-edit-dialog
 import { ManagementListComponent } from '../management-list/management-list.component'
 
 @Component({
-  selector: 'app-tag-list',
+  selector: 'pngx-tag-list',
   templateUrl: './../management-list/management-list.component.html',
   styleUrls: ['./../management-list/management-list.component.scss'],
 })

src-ui/src/app/components/manage/tasks/tasks.component.html

@@ -1,11 +1,11 @@
-<app-page-header title="File Tasks" i18n-title>
+<pngx-page-header title="File Tasks" i18n-title>
   <div class="btn-toolbar col col-md-auto">
     <button class="btn btn-sm btn-outline-secondary me-2" (click)="clearSelection()" [hidden]="selectedTasks.size === 0">
       <svg class="sidebaricon" fill="currentColor">
         <use xlink:href="assets/bootstrap-icons.svg#x"/>
       </svg>&nbsp;<ng-container i18n>Clear selection</ng-container>
     </button>
-    <button class="btn btn-sm btn-outline-primary me-4" (click)="dismissTasks()" *appIfPermissions="{ action: PermissionAction.Change, type: PermissionType.PaperlessTask }" [disabled]="tasksService.total === 0">
+    <button class="btn btn-sm btn-outline-primary me-4" (click)="dismissTasks()" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.PaperlessTask }" [disabled]="tasksService.total === 0">
       <svg class="sidebaricon" fill="currentColor">
         <use xlink:href="assets/bootstrap-icons.svg#check2-all"/>
       </svg>&nbsp;<ng-container i18n>{{dismissButtonText}}</ng-container>
@@ -20,7 +20,7 @@
       </ng-container>&nbsp;<ng-container i18n>Refresh</ng-container>
     </button>
   </div>
-</app-page-header>
+</pngx-page-header>
 
 <ng-container *ngIf="!tasksService.completedFileTasks && tasksService.loading">
   <div class="spinner-border spinner-border-sm fw-normal ms-2 me-auto" role="status"></div>
@@ -75,12 +75,12 @@
         </td>
         <td scope="row">
           <div class="btn-group" role="group">
-            <button class="btn btn-sm btn-outline-secondary" (click)="dismissTask(task); $event.stopPropagation();" *appIfPermissions="{ action: PermissionAction.Change, type: PermissionType.PaperlessTask }">
+            <button class="btn btn-sm btn-outline-secondary" (click)="dismissTask(task); $event.stopPropagation();" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.PaperlessTask }">
               <svg class="sidebaricon" fill="currentColor">
                 <use xlink:href="assets/bootstrap-icons.svg#check"/>
               </svg>&nbsp;<ng-container i18n>Dismiss</ng-container>
             </button>
-            <ng-container *appIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }">
+            <ng-container *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }">
               <button *ngIf="task.related_document" class="btn btn-sm btn-outline-primary" (click)="dismissAndGo(task); $event.stopPropagation();">
                 <svg class="sidebaricon" fill="currentColor">
                   <use xlink:href="assets/bootstrap-icons.svg#file-text"/>

src-ui/src/app/components/manage/tasks/tasks.component.ts

@@ -8,7 +8,7 @@ import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dial
 import { ComponentWithPermissions } from '../../with-permissions/with-permissions.component'
 
 @Component({
-  selector: 'app-tasks',
+  selector: 'pngx-tasks',
   templateUrl: './tasks.component.html',
   styleUrls: ['./tasks.component.scss'],
 })

src-ui/src/app/components/not-found/not-found.component.html

@@ -13,5 +13,5 @@
         </a>
       </p>
     </div>
-    <app-logo extra_classes="p-3 position-absolute bottom-0 start-50 translate-middle"></app-logo>
+    <pngx-logo extra_classes="p-3 position-absolute bottom-0 start-50 translate-middle"></pngx-logo>
   </div>