@taon-dev/cms 21.0.13 → 21.0.16

package/ts-source/browser-code-prod/taon-posts/taon-cms-post/taon-cms-editable.directive.ts

@@ -0,0 +1,107 @@
+// @ts-nocheck
+/* ============================================================================
+
+- TAON READONLY SOURCE
+- DO NOT MODIFY THIS FILE.
+- Changes may be overwritten.
+- Use command: taon build:watch:lib
+  inside @taon-dev/cms project repository
+  for watch development of third party modules like this.
+  
+ * ========================================================================== */
+
+import { Directive, ElementRef, EventEmitter, HostListener, Input, Output, SecurityContext, inject, } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+@Directive({
+    selector: '[taonCmsEditable]',
+})
+export class TaonCmsEditableDirective {
+    private readonly element = inject<ElementRef<HTMLElement>>(ElementRef)
+        .nativeElement;
+    private readonly sanitizer = inject(DomSanitizer);
+    private value = '';
+    private composing = false;
+    @Input()
+    taonCmsEditableFormat: 'text' | 'html' = 'text';
+    @Input()
+    taonCmsEditableSingleLine = false;
+    @Output()
+    readonly taonCmsEditableChange = new EventEmitter<string>();
+    @Input()
+    set taonCmsEditable(value: string) {
+        if (value === this.value) {
+            return;
+        }
+        this.value = value;
+        this.render();
+    }
+    @HostListener('compositionstart')
+    compositionStart(): void {
+        this.composing = true;
+    }
+    @HostListener('compositionend')
+    compositionEnd(): void {
+        this.composing = false;
+        this.onInput();
+    }
+    @HostListener('input')
+    onInput(): void {
+        if (this.composing) {
+            return;
+        }
+        const text = this.element.innerText;
+        this.value =
+            this.taonCmsEditableFormat === 'html'
+                ? this.sanitize(this.element.innerHTML)
+                : this.taonCmsEditableSingleLine
+                    ? text.replace(/\s*\n\s*/g, ' ')
+                    : text;
+        this.taonCmsEditableChange.emit(this.value);
+    }
+    @HostListener('blur')
+    onBlur(): void {
+        this.onInput();
+        this.render();
+    }
+    @HostListener('keydown', ['$event'])
+    onKeydown(event: KeyboardEvent): void {
+        if (this.taonCmsEditableSingleLine && event.key === 'Enter') {
+            event.preventDefault();
+        }
+    }
+    @HostListener('paste', ['$event'])
+    onPaste(event: ClipboardEvent): void {
+        event.preventDefault();
+        const selection = this.element.ownerDocument.getSelection();
+        if (!selection?.rangeCount || !event.clipboardData) {
+            return;
+        }
+        const range = selection.getRangeAt(0);
+        if (!this.element.contains(range.commonAncestorContainer)) {
+            return;
+        }
+        const pasted = event.clipboardData.getData('text/plain');
+        const text = this.taonCmsEditableSingleLine
+            ? pasted.replace(/\s*\n\s*/g, ' ')
+            : pasted;
+        range.deleteContents();
+        const node = this.element.ownerDocument.createTextNode(text);
+        range.insertNode(node);
+        range.setStartAfter(node);
+        range.collapse(true);
+        selection.removeAllRanges();
+        selection.addRange(range);
+        this.onInput();
+    }
+    private sanitize(value: string): string {
+        return this.sanitizer.sanitize(SecurityContext.HTML, value) ?? '';
+    }
+    private render(): void {
+        if (this.taonCmsEditableFormat === 'html') {
+            this.element.innerHTML = this.sanitize(this.value);
+        }
+        else {
+            this.element.textContent = this.value;
+        }
+    }
+}

package/ts-source/browser-code-prod/taon-posts/taon-cms-post/taon-cms-post.component.html

@@ -0,0 +1,234 @@
+<!--
+==============================================================================
+
+- TAON READONLY SOURCE
+- DO NOT MODIFY THIS FILE.
+- Changes may be overwritten.
+- Use command: taon build:watch:lib
+  inside @taon-dev/cms project repository
+  for watch development of third party modules like this.
+  
+==============================================================================
+-->
+
+@if (mode() !== 'view-clean') {
+  <header class="post-actions">
+    <span class="post-status">{{ mode() === 'add' ? 'New draft' : currentPost()?.status }}</span>
+    <div class="buttons">
+      @if (editing()) {
+        <button mat-flat-button type="button" [disabled]="busy() || dialogOpen() || !canSave()" (click)="save()">
+          {{ mode() === 'add' ? 'Add' : 'Save' }}
+        </button>
+        <button mat-button type="button" [disabled]="busy() || dialogOpen()" (click)="cancel()">Cancel</button>
+      } @else if (currentPost()) {
+        <button mat-button type="button" [disabled]="busy() || dialogOpen()" (click)="edit()">
+          <mat-icon>edit</mat-icon> Edit
+        </button>
+      }
+      @if (mode() !== 'add' && currentPost()) {
+        @if (canPublish()) {
+          <button mat-flat-button type="button" [disabled]="busy() || dialogOpen() || (editing() && !canSave())" (click)="publish()">Publish</button>
+        }
+        <button mat-button type="button" [disabled]="busy() || dialogOpen()" (click)="revert()">
+          <mat-icon>history</mat-icon> Revert
+        </button>
+        @if (currentPost()?.status !== 'archived') {
+          <button mat-button type="button" [disabled]="busy() || dialogOpen()" (click)="delete()">
+            <mat-icon>delete</mat-icon> Delete
+          </button>
+        }
+      }
+    </div>
+    @if (busy()) {
+      <span role="status">{{ uploading() ? 'Uploading...' : 'Saving...' }}</span>
+    }
+  </header>
+  @if (error()) {
+    <p class="error" role="alert">{{ error() }}</p>
+  }
+}
+
+<article class="post-article" [attr.aria-busy]="busy()">
+  @if (editing()) {
+    <mat-radio-group
+      class="post-type-selector"
+      aria-label="Post type"
+      [value]="draft().type"
+      [disabled]="busy() || dialogOpen()"
+      (change)="updateDraft('type', $event.value)">
+      @for (type of postTypes; track type.value) {
+        <mat-radio-button [value]="type.value">{{ type.label }}</mat-radio-button>
+      }
+    </mat-radio-group>
+    <div
+      class="post-title editable"
+      contenteditable="true"
+      role="textbox"
+      aria-label="Post title"
+      aria-required="true"
+      data-placeholder="Title"
+      [attr.contenteditable]="!busy() && !dialogOpen()"
+      [taonCmsEditableSingleLine]="true"
+      [taonCmsEditable]="draft().title"
+      (taonCmsEditableChange)="updateDraft('title', $event)"></div>
+    <div
+      class="post-excerpt editable"
+      contenteditable="true"
+      role="textbox"
+      aria-label="Post excerpt"
+      aria-multiline="true"
+      data-placeholder="A short introduction..."
+      [attr.contenteditable]="!busy() && !dialogOpen()"
+      [taonCmsEditable]="draft().excerpt"
+      (taonCmsEditableChange)="updateDraft('excerpt', $event)"></div>
+    <div
+      class="post-body editable"
+      contenteditable="true"
+      role="textbox"
+      aria-label="Post body"
+      aria-multiline="true"
+      data-placeholder="Tell your story..."
+      [attr.contenteditable]="!busy() && !dialogOpen()"
+      taonCmsEditableFormat="html"
+      [taonCmsEditable]="draft().body"
+      (taonCmsEditableChange)="updateDraft('body', $event)"></div>
+    <label class="slug-field">
+      <span>URL slug</span>
+      <input aria-label="URL slug" [value]="draft().slug" [disabled]="busy() || dialogOpen()" (input)="updateSlug($event)" placeholder="my-post" />
+    </label>
+    @if (mediaAttachment(); as media) {
+      <section class="media-attachment" aria-labelledby="media-attachment-heading">
+        <h2 id="media-attachment-heading">{{ media.heading }}</h2>
+        @if (draft()[media.key]; as key) {
+          <p>Attached file: {{ key }}</p>
+          <button mat-button type="button" [disabled]="busy() || dialogOpen()" (click)="removeMedia()">Remove</button>
+        } @else {
+          <input
+            #mediaInput
+            hidden
+            type="file"
+            [accept]="media.accept"
+            [disabled]="busy() || dialogOpen()"
+            (change)="fileSelected($event)" />
+          <button mat-button type="button" [disabled]="busy() || dialogOpen()" (click)="mediaInput.click()">{{ media.uploadLabel }}</button>
+        }
+      </section>
+    }
+    <section class="related-posts" aria-labelledby="related-posts-heading">
+      <h2 id="related-posts-heading">Related posts</h2>
+      @if (relatedPostsLoading()) {
+        <p role="status">Loading related posts...</p>
+      } @else if (relatedPostsError()) {
+        <p class="error" role="alert">{{ relatedPostsError() }}</p>
+        <button mat-button type="button" [disabled]="busy() || dialogOpen()" (click)="loadRelatedPosts()">Try again</button>
+      } @else {
+        <ul>
+          @for (post of relatedPosts(); track post.id) {
+            <li>
+              <span>#{{ post.id }} - {{ post.title }}</span>
+              <button mat-icon-button type="button" [attr.aria-label]="'Remove related post ' + post.title" [disabled]="busy() || dialogOpen()" (click)="removeRelatedPost(post.id)">
+                <mat-icon>close</mat-icon>
+              </button>
+            </li>
+          } @empty {
+            <li>No related posts yet.</li>
+          }
+        </ul>
+        <button mat-button type="button" [disabled]="busy() || dialogOpen()" (click)="addRelatedPost()">
+          <mat-icon>add</mat-icon> Add related post
+        </button>
+      }
+    </section>
+    <section class="application-hook" aria-labelledby="application-hook-heading">
+      <h2 id="application-hook-heading">Application Hook</h2>
+      @if (applicationHooksLoading()) {
+        <p role="status">Loading application hooks...</p>
+      } @else if (applicationHooksError()) {
+        <p class="error" role="alert">{{ applicationHooksError() }}</p>
+        <button mat-button type="button" [disabled]="busy() || dialogOpen()" (click)="loadApplicationHooks()">Try again</button>
+      } @else {
+        <mat-checkbox
+          [checked]="useAsApplicationHook()"
+          [disabled]="busy() || dialogOpen()"
+          (change)="setUseAsApplicationHook($event.checked)">
+          Use as application hook
+        </mat-checkbox>
+        @if (useAsApplicationHook()) {
+          <mat-form-field appearance="outline" subscriptSizing="dynamic">
+            <mat-label>Application Hook</mat-label>
+            <mat-select
+              [value]="selectedApplicationHook()"
+              [disabled]="busy() || dialogOpen()"
+              (selectionChange)="selectedApplicationHook.set($event.value)">
+              @for (applicationHook of applicationHooks(); track applicationHook.id) {
+                <mat-option
+                  [value]="applicationHook.hook"
+                  [disabled]="applicationHookInUseByAnotherPost(applicationHook)">
+                  {{ applicationHookLabel(applicationHook.hook) }}
+                  @if (applicationHookInUseByAnotherPost(applicationHook)) {
+                    (in use by post #{{ applicationHook.contentId }})
+                  }
+                </mat-option>
+              } @empty {
+                <mat-option [disabled]="true">No application hooks configured</mat-option>
+              }
+            </mat-select>
+          </mat-form-field>
+        }
+      }
+    </section>
+    <section class="post-permissions" aria-labelledby="post-permissions-heading">
+      <h2 id="post-permissions-heading">Allow Read only with Permissions</h2>
+      @if (permissionsLoading()) {
+        <p role="status">Loading assigned permissions...</p>
+      } @else if (permissionsError()) {
+        <p class="error" role="alert">{{ permissionsError() }}</p>
+        <button mat-button type="button" [disabled]="busy() || dialogOpen()" (click)="loadPermissions()">Try again</button>
+      } @else {
+        <ul>
+          @for (permission of permissions(); track permission.id) {
+            <li>
+              <span>{{ permission.name }} ({{ permission.code }})</span>
+              <button mat-icon-button type="button" [attr.aria-label]="'Remove permission ' + permission.name" [disabled]="busy() || dialogOpen()" (click)="removePermission(permission.id)">
+                <mat-icon>close</mat-icon>
+              </button>
+            </li>
+          } @empty {
+            <li>No permissions assigned.</li>
+          }
+        </ul>
+        @if (permissionOptionsError()) {
+          <p class="error" role="alert">{{ permissionOptionsError() }}</p>
+          <button mat-button type="button" [disabled]="busy() || dialogOpen() || permissionOptionsLoading()" (click)="loadPermissionOptions()">Try again</button>
+        } @else {
+          <div class="permission-assignment">
+            <mat-form-field appearance="outline" subscriptSizing="dynamic">
+              <mat-label>Permission</mat-label>
+              <mat-select
+                [value]="selectedPermissionId()"
+                [disabled]="busy() || dialogOpen() || permissionOptionsLoading()"
+                (selectionChange)="selectedPermissionId.set($event.value)">
+                @for (permission of availablePermissions(); track permission.id) {
+                  <mat-option [value]="permission.id">{{ permission.name }} ({{ permission.code }})</mat-option>
+                } @empty {
+                  <mat-option [disabled]="true">No permissions available</mat-option>
+                }
+              </mat-select>
+            </mat-form-field>
+            <button mat-button type="button" [disabled]="busy() || dialogOpen() || !selectedPermissionId()" (click)="addPermission()">
+              <mat-icon>add</mat-icon> Assign permission
+            </button>
+          </div>
+        }
+      }
+    </section>
+  } @else if (currentPost(); as post) {
+    <h1 class="post-title">{{ post.title }}</h1>
+    @if (post.excerpt) {
+      <p class="post-excerpt">{{ post.excerpt }}</p>
+    }
+    <div class="post-body" [innerHTML]="post.body"></div>
+  } @else {
+    <p role="status">No post is loaded.</p>
+  }
+</article>

package/ts-source/browser-code-prod/taon-posts/taon-cms-post/taon-cms-post.component.scss

@@ -0,0 +1,154 @@
+/* ============================================================================
+ 
+- TAON READONLY SOURCE
+- DO NOT MODIFY THIS FILE.
+- Changes may be overwritten.
+- Use command: taon build:watch:lib
+  inside @taon-dev/cms project repository
+  for watch development of third party modules like this.
+  
+ * ========================================================================== */
+
+:host {
+  display: block;
+}
+
+.post-actions {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 1rem;
+  padding: 1rem;
+  border-bottom: 1px solid #8883;
+}
+
+.post-status {
+  margin-right: auto;
+  text-transform: capitalize;
+  opacity: 0.7;
+}
+
+.buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.post-article {
+  max-width: 760px;
+  margin: 0 auto;
+  padding: clamp(1.5rem, 5vw, 4rem) 1.5rem;
+  overflow-wrap: anywhere;
+}
+
+.post-title {
+  margin: 0 0 1.5rem;
+  font-size: clamp(2rem, 5vw, 3.5rem);
+  font-weight: 700;
+  line-height: 1.15;
+  letter-spacing: -0.03em;
+}
+
+.post-excerpt {
+  margin: 0 0 2rem;
+  font-size: 1.35rem;
+  line-height: 1.6;
+  opacity: 0.7;
+  white-space: pre-wrap;
+}
+
+.post-body {
+  font-family: Georgia, 'Times New Roman', serif;
+  font-size: 1.2rem;
+  line-height: 1.8;
+  white-space: pre-wrap;
+}
+
+.editable {
+  min-height: 1.2em;
+  outline: none;
+
+  &:focus {
+    box-shadow: -3px 0 #8885;
+  }
+
+  &:empty::before {
+    content: attr(data-placeholder);
+    opacity: 0.4;
+    pointer-events: none;
+  }
+}
+
+.post-body.editable {
+  min-height: 12rem;
+}
+
+.slug-field {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 1rem;
+  margin-top: 3rem;
+  padding-top: 1rem;
+  border-top: 1px solid #8883;
+  font-size: 0.875rem;
+
+  input {
+    flex: 1;
+    min-width: 160px;
+    padding: 0.5rem;
+    color: inherit;
+    background: transparent;
+    border: 1px solid #8885;
+    border-radius: 4px;
+  }
+}
+
+.error {
+  padding: 1rem;
+  color: #b3261e;
+}
+
+.post-type-selector {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-bottom: 1.5rem;
+}
+
+.media-attachment,
+.related-posts,
+.application-hook,
+.post-permissions {
+  margin-top: 1.5rem;
+  font-size: 0.875rem;
+
+  h2 {
+    font-size: 1rem;
+  }
+}
+
+.related-posts,
+.post-permissions {
+  ul {
+    padding: 0;
+    list-style: none;
+  }
+
+  .application-hook {
+    display: grid;
+    align-items: start;
+    gap: 0.75rem;
+
+    mat-form-field {
+      width: min(100%, 28rem);
+    }
+  }
+
+  li {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+  }
+}

package/ts-source/browser-code-prod/taon-posts/taon-cms-post/taon-cms-post.component.split-namespaces.json

@@ -0,0 +1,4 @@
+{
+  "namespacesMapObj": {},
+  "namespacesReplace": {}
+}