npm - @foliokit/cms-admin-ui - Versions diffs - 0.0.0 → 0.1.0 - Mend

@foliokit/cms-admin-ui 0.0.0 → 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (50) hide show

package/esm2022/lib/page-editor/links-editor-form.component.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"links-editor-form.component.js","sourceRoot":"","sources":["../../../../../../libs/cms-admin-ui/src/lib/page-editor/links-editor-form.component.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n PLATFORM_ID,\n ViewChild,\n inject,\n signal,\n} from '@angular/core';\nimport { isPlatformBrowser } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatProgressBarModule } from '@angular/material/progress-bar';\nimport { MatSelectModule } from '@angular/material/select';\nimport { MatSlideToggleModule } from '@angular/material/slide-toggle';\nimport {\n CdkDragDrop,\n DragDropModule,\n moveItemInArray,\n} from '@angular/cdk/drag-drop';\nimport { getDownloadURL, ref, uploadBytesResumable } from 'firebase/storage';\nimport { FIREBASE_STORAGE, PageService } from '@foliokit/cms-core';\nimport type { LinksLink } from '@foliokit/cms-core';\nimport { PageEditorStore } from './page-editor.store';\n\nconst PLATFORM_OPTIONS: LinksLink['platform'][] = [\n 'twitter',\n 'instagram',\n 'github',\n 'linkedin',\n 'youtube',\n 'tiktok',\n 'facebook',\n 'email',\n 'website',\n];\n\n@Component({\n selector: 'admin-links-editor-form',\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [\n FormsModule,\n MatButtonModule,\n MatFormFieldModule,\n MatIconModule,\n MatInputModule,\n MatProgressBarModule,\n MatSelectModule,\n MatSlideToggleModule,\n DragDropModule,\n ],\n styles: [\n `\n :host {\n display: flex;\n flex-direction: column;\n flex: 1;\n min-height: 0;\n overflow-y: auto;\n }\n .drag-handle {\n cursor: grab;\n touch-action: none;\n }\n .drag-handle:active { cursor: grabbing; }\n .cdk-drag-preview {\n box-shadow: 0 4px 16px rgba(0,0,0,0.15);\n border-radius: 8px;\n opacity: 0.95;\n }\n .cdk-drag-placeholder { opacity: 0.3; }\n .cdk-drag-animating { transition: transform 250ms cubic-bezier(0,0,0.2,1); }\n .drop-zone { border: 2px dashed color-mix(in srgb, currentColor 25%, transparent); border-radius: 8px; }\n .drop-zone.drag-over {\n border-color: var(--mat-sys-primary);\n background: color-mix(in srgb, var(--mat-sys-primary) 8%, transparent);\n }\n `,\n ],\n template: `\n @if (store.page(); as page) {\n @if (page.type === 'links') {\n <div class=\"flex flex-col gap-6 p-4\">\n \n <mat-form-field class=\"w-full\">\n <mat-label>Title</mat-label>\n <input\n matInput\n [value]=\"page.title\"\n (input)=\"store.updateField('title', $any($event.target).value)\"\n placeholder=\"Links\"\n />\n </mat-form-field>\n\n \n <div class=\"flex flex-col gap-2\">\n <span class=\"text-sm font-semibold\">Avatar</span>\n @if (avatarUploading()) {\n <mat-progress-bar mode=\"determinate\" [value]=\"avatarProgress()\" />\n }\n @if (avatarError()) {\n <p class=\"text-sm text-red-500\">{{ avatarError() }}</p>\n }\n <div class=\"flex items-center gap-4\">\n @if (page.avatarUrl) {\n <img\n [src]=\"page.avatarUrl\"\n [alt]=\"page.avatarAlt || 'Avatar'\"\n class=\"w-16 h-16 rounded-full object-cover shrink-0\"\n />\n } @else {\n <div class=\"w-16 h-16 rounded-full flex items-center justify-center shrink-0\"\n style=\"background: color-mix(in srgb, currentColor 10%, transparent)\">\n <mat-icon class=\"opacity-40\">person</mat-icon>\n </div>\n }\n <button mat-stroked-button [disabled]=\"avatarUploading()\" (click)=\"isBrowser && avatarInput.click()\">\n {{ page.avatarUrl ? 'Replace' : 'Upload' }}\n </button>\n @if (page.avatarUrl) {\n <button mat-icon-button (click)=\"onDeleteAvatar()\" title=\"Remove avatar\">\n <mat-icon>delete</mat-icon>\n </button>\n }\n </div>\n <input\n #avatarInput\n type=\"file\"\n accept=\"image/*\"\n class=\"hidden\"\n (change)=\"onAvatarSelected($any($event.target).files)\"\n />\n </div>\n\n \n <mat-form-field class=\"w-full\">\n <mat-label>Headline</mat-label>\n <input\n matInput\n [value]=\"page.headline ?? ''\"\n (input)=\"store.updateField('headline', $any($event.target).value)\"\n placeholder=\"Your name or tagline\"\n />\n </mat-form-field>\n\n \n <mat-form-field class=\"w-full\">\n <mat-label>Bio</mat-label>\n <textarea\n matInput\n rows=\"3\"\n [value]=\"page.bio ?? ''\"\n (input)=\"store.updateField('bio', $any($event.target).value)\"\n placeholder=\"Short bio shown below your headline\"\n ></textarea>\n </mat-form-field>\n\n \n <div class=\"flex flex-col gap-3\">\n <div class=\"flex items-center justify-between\">\n <span class=\"text-sm font-semibold\">Links</span>\n <button mat-stroked-button (click)=\"addLink(page.links)\">\n <mat-icon>add</mat-icon>\n Add Link\n </button>\n </div>\n\n <div\n cdkDropList\n (cdkDropListDropped)=\"onDrop($event, page.links)\"\n class=\"flex flex-col gap-2\"\n >\n @for (link of page.links; track link.id) {\n <div\n cdkDrag\n class=\"flex flex-col gap-3 p-3 rounded-lg\"\n style=\"background: color-mix(in srgb, currentColor 5%, transparent); border: 1px solid color-mix(in srgb, currentColor 10%, transparent)\"\n >\n \n <div class=\"flex items-center gap-2\">\n <mat-icon cdkDragHandle class=\"drag-handle opacity-40 shrink-0\" style=\"font-size: 1.25rem; width: 1.25rem; height: 1.25rem\">\n drag_indicator\n </mat-icon>\n <span class=\"flex-1 text-sm font-medium truncate\">{{ link.label || '(untitled)' }}</span>\n <mat-slide-toggle\n [checked]=\"!!link.highlighted\"\n (change)=\"updateLink(page.links, link.id, 'highlighted', $event.checked)\"\n class=\"shrink-0\"\n >\n Highlighted\n </mat-slide-toggle>\n <button mat-icon-button (click)=\"deleteLink(page.links, link.id)\" title=\"Delete link\">\n <mat-icon>delete</mat-icon>\n </button>\n </div>\n\n \n <div class=\"flex gap-3\">\n <mat-form-field class=\"flex-1\">\n <mat-label>Label</mat-label>\n <input\n matInput\n [value]=\"link.label\"\n (input)=\"updateLink(page.links, link.id, 'label', $any($event.target).value)\"\n placeholder=\"My Website\"\n />\n </mat-form-field>\n <mat-form-field class=\"flex-1\">\n <mat-label>URL</mat-label>\n <input\n matInput\n type=\"url\"\n [value]=\"link.url\"\n (input)=\"updateLink(page.links, link.id, 'url', $any($event.target).value)\"\n placeholder=\"https://example.com\"\n />\n </mat-form-field>\n </div>\n\n \n <mat-form-field class=\"w-full\">\n <mat-label>Platform</mat-label>\n <mat-select\n [value]=\"link.platform ?? null\"\n (selectionChange)=\"updateLink(page.links, link.id, 'platform', $event.value)\"\n >\n <mat-option [value]=\"null\">— none —</mat-option>\n @for (p of platformOptions; track p) {\n <mat-option [value]=\"p\">{{ p }}</mat-option>\n }\n </mat-select>\n </mat-form-field>\n </div>\n }\n\n @if (!page.links.length) {\n <div class=\"flex items-center justify-center py-8 opacity-40 text-sm\">\n No links yet. Add one above.\n </div>\n }\n </div>\n </div>\n </div>\n }\n }\n `,\n})\nexport class LinksEditorFormComponent {\n @ViewChild('avatarInput') avatarInput!: ElementRef<HTMLInputElement>;\n\n readonly store = inject(PageEditorStore);\n private readonly storage = inject(FIREBASE_STORAGE);\n private readonly pageService = inject(PageService);\n private readonly platformId = inject(PLATFORM_ID);\n\n readonly isBrowser = isPlatformBrowser(this.platformId);\n readonly platformOptions = PLATFORM_OPTIONS;\n\n readonly avatarUploading = signal(false);\n readonly avatarProgress = signal(0);\n readonly avatarError = signal<string | null>(null);\n private avatarStoragePath = signal<string | null>(null);\n\n onAvatarSelected(files: FileList | null): void {\n if (!files?.length) return;\n this.uploadAvatar(files[0]);\n if (this.avatarInput?.nativeElement) {\n this.avatarInput.nativeElement.value = '';\n }\n }\n\n onDeleteAvatar(): void {\n if (!window.confirm('Remove avatar?')) return;\n const path = this.avatarStoragePath();\n const clear = () => {\n this.store.updateField('avatarUrl', undefined);\n this.store.updateField('avatarAlt', undefined);\n this.avatarStoragePath.set(null);\n };\n if (path) {\n this.pageService.deleteStorageFile(path).subscribe({ next: clear, error: clear });\n } else {\n clear();\n }\n }\n\n addLink(links: LinksLink[]): void {\n const newLink: LinksLink = {\n id: crypto.randomUUID(),\n label: '',\n url: '',\n order: links.length,\n };\n this.store.updateField('links', [...links, newLink]);\n }\n\n deleteLink(links: LinksLink[], id: string): void {\n const updated = links\n .filter((l) => l.id !== id)\n .map((l, i) => ({ ...l, order: i }));\n this.store.updateField('links', updated);\n }\n\n updateLink<K extends keyof LinksLink>(\n links: LinksLink[],\n id: string,\n field: K,\n value: LinksLink[K],\n ): void {\n const updated = links.map((l) =>\n l.id === id ? { ...l, [field]: value } : l,\n );\n this.store.updateField('links', updated);\n }\n\n onDrop(event: CdkDragDrop<LinksLink[]>, links: LinksLink[]): void {\n const reordered = [...links];\n moveItemInArray(reordered, event.previousIndex, event.currentIndex);\n const withOrder = reordered.map((l, i) => ({ ...l, order: i }));\n this.store.updateField('links', withOrder);\n }\n\n private uploadAvatar(file: File): void {\n const previous = this.avatarStoragePath();\n const pageId = this.store.page()?.id || this.store.tempPageId();\n const storagePath = `pages/${pageId}/avatar/${file.name}`;\n\n if (previous) {\n this.pageService.deleteStorageFile(previous).subscribe();\n }\n\n const fileRef = ref(this.storage, storagePath);\n this.avatarUploading.set(true);\n this.avatarProgress.set(0);\n this.avatarError.set(null);\n\n const task = uploadBytesResumable(fileRef, file);\n task.on(\n 'state_changed',\n (snapshot) => {\n this.avatarProgress.set(\n Math.round((snapshot.bytesTransferred / snapshot.totalBytes) * 100),\n );\n },\n (error) => {\n this.avatarUploading.set(false);\n this.avatarError.set(error.message);\n },\n () => {\n getDownloadURL(task.snapshot.ref).then((downloadUrl) => {\n this.store.updateField('avatarUrl', downloadUrl);\n this.store.updateField('avatarAlt', file.name);\n this.avatarStoragePath.set(storagePath);\n this.avatarUploading.set(false);\n });\n },\n );\n }\n}\n"]}

package/esm2022/lib/page-editor/page-editor-hero-image.component.js ADDED Viewed

@@ -0,0 +1,216 @@
+import { ChangeDetectionStrategy, Component, PLATFORM_ID, ViewChild, inject, signal, } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { getDownloadURL, ref, uploadBytesResumable } from 'firebase/storage';
+import { FIREBASE_STORAGE, PageService } from '@foliokit/cms-core';
+import { PageEditorStore } from './page-editor.store';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/material/button";
+import * as i2 from "@angular/material/icon";
+import * as i3 from "@angular/material/progress-bar";
+export class PageEditorHeroImageComponent {
+    fileInput;
+    store = inject(PageEditorStore);
+    storage = inject(FIREBASE_STORAGE);
+    pageService = inject(PageService);
+    platformId = inject(PLATFORM_ID);
+    isBrowser = isPlatformBrowser(this.platformId);
+    uploading = signal(false, ...(ngDevMode ? [{ debugName: "uploading" }] : /* istanbul ignore next */ []));
+    uploadProgress = signal(0, ...(ngDevMode ? [{ debugName: "uploadProgress" }] : /* istanbul ignore next */ []));
+    uploadError = signal(null, ...(ngDevMode ? [{ debugName: "uploadError" }] : /* istanbul ignore next */ []));
+    isDragOver = signal(false, ...(ngDevMode ? [{ debugName: "isDragOver" }] : /* istanbul ignore next */ []));
+    storagePath = signal(null, ...(ngDevMode ? [{ debugName: "storagePath" }] : /* istanbul ignore next */ []));
+    get heroImageUrl() {
+        return () => {
+            const p = this.store.page();
+            return p?.type === 'about' ? p.heroImageUrl : undefined;
+        };
+    }
+    get heroImageAlt() {
+        return () => {
+            const p = this.store.page();
+            return p?.type === 'about' ? (p.heroImageAlt ?? '') : '';
+        };
+    }
+    onDragOver(event) {
+        event.preventDefault();
+        this.isDragOver.set(true);
+    }
+    onDragLeave() {
+        this.isDragOver.set(false);
+    }
+    onDrop(event) {
+        event.preventDefault();
+        this.isDragOver.set(false);
+        const files = event.dataTransfer?.files;
+        if (files?.length)
+            this.upload(files[0]);
+    }
+    onFileSelected(files) {
+        if (!files?.length)
+            return;
+        this.upload(files[0]);
+        if (this.fileInput?.nativeElement) {
+            this.fileInput.nativeElement.value = '';
+        }
+    }
+    onDelete() {
+        if (!window.confirm('Remove hero image?'))
+            return;
+        const path = this.storagePath();
+        const clear = () => {
+            this.store.updateField('heroImageUrl', undefined);
+            this.store.updateField('heroImageAlt', undefined);
+            this.storagePath.set(null);
+            this.uploadProgress.set(0);
+        };
+        if (path) {
+            this.pageService.deleteStorageFile(path).subscribe({ next: clear, error: clear });
+        }
+        else {
+            clear();
+        }
+    }
+    upload(file) {
+        const previousPath = this.storagePath();
+        const pageId = this.store.page()?.id || this.store.tempPageId();
+        const storagePath = `pages/${pageId}/hero/${file.name}`;
+        if (previousPath) {
+            this.pageService.deleteStorageFile(previousPath).subscribe();
+        }
+        const fileRef = ref(this.storage, storagePath);
+        this.uploading.set(true);
+        this.uploadProgress.set(0);
+        this.uploadError.set(null);
+        const task = uploadBytesResumable(fileRef, file);
+        task.on('state_changed', (snapshot) => {
+            this.uploadProgress.set(Math.round((snapshot.bytesTransferred / snapshot.totalBytes) * 100));
+        }, (error) => {
+            this.uploading.set(false);
+            this.uploadError.set(error.message);
+        }, () => {
+            getDownloadURL(task.snapshot.ref).then((downloadUrl) => {
+                this.store.updateField('heroImageUrl', downloadUrl);
+                this.store.updateField('heroImageAlt', file.name);
+                this.storagePath.set(storagePath);
+                this.uploading.set(false);
+            });
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: PageEditorHeroImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: PageEditorHeroImageComponent, isStandalone: true, selector: "admin-page-editor-hero-image", viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: `
+    <div class="flex flex-col gap-2">
+      <span class="text-sm font-semibold">Hero Image</span>
+      @if (heroImageUrl(); as url) {
+        <div class="image-wrapper rounded-lg overflow-hidden">
+          <div class="aspect-video w-full relative">
+            <img [src]="url" [alt]="heroImageAlt()" class="w-full h-full object-cover" />
+            <div
+              class="hover-overlay absolute inset-0 flex items-center justify-center gap-3"
+              style="background: rgba(0,0,0,0.45)"
+            >
+              <button mat-icon-button style="color: white" title="Replace image" (click)="isBrowser && fileInput.click()">
+                <mat-icon>swap_horiz</mat-icon>
+              </button>
+              <button mat-icon-button style="color: white" title="Remove image" (click)="onDelete()">
+                <mat-icon>delete</mat-icon>
+              </button>
+            </div>
+          </div>
+        </div>
+      } @else {
+        <div
+          class="drop-zone w-full flex flex-col items-center justify-center gap-2 py-10 cursor-pointer select-none"
+          [class.drag-over]="isDragOver()"
+          (click)="isBrowser && fileInput.click()"
+          (dragover)="isBrowser && onDragOver($event)"
+          (dragleave)="isBrowser && onDragLeave()"
+          (drop)="isBrowser && onDrop($event)"
+        >
+          <mat-icon class="opacity-40" style="font-size: 2.5rem; width: 2.5rem; height: 2.5rem">
+            upload_file
+          </mat-icon>
+          <span class="text-sm opacity-50">Upload hero image</span>
+        </div>
+      }
+      <input
+        #fileInput
+        type="file"
+        accept="image/*"
+        class="hidden"
+        (change)="onFileSelected($any($event.target).files)"
+      />
+      @if (uploading()) {
+        <mat-progress-bar mode="determinate" [value]="uploadProgress()" />
+      }
+      @if (uploadError()) {
+        <p class="text-sm text-red-500">{{ uploadError() }}</p>
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:block}.drop-zone{border:2px dashed color-mix(in srgb,currentColor 25%,transparent);border-radius:8px;transition:border-color .15s,background .15s}.drop-zone.drag-over{border-color:var(--mat-sys-primary);background:color-mix(in srgb,var(--mat-sys-primary) 8%,transparent)}.image-wrapper{position:relative}.image-wrapper:hover .hover-overlay{opacity:1}.hover-overlay{opacity:0;transition:opacity .15s}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: PageEditorHeroImageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'admin-page-editor-hero-image', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatButtonModule, MatIconModule, MatProgressBarModule], template: `
+    <div class="flex flex-col gap-2">
+      <span class="text-sm font-semibold">Hero Image</span>
+      @if (heroImageUrl(); as url) {
+        <div class="image-wrapper rounded-lg overflow-hidden">
+          <div class="aspect-video w-full relative">
+            <img [src]="url" [alt]="heroImageAlt()" class="w-full h-full object-cover" />
+            <div
+              class="hover-overlay absolute inset-0 flex items-center justify-center gap-3"
+              style="background: rgba(0,0,0,0.45)"
+            >
+              <button mat-icon-button style="color: white" title="Replace image" (click)="isBrowser && fileInput.click()">
+                <mat-icon>swap_horiz</mat-icon>
+              </button>
+              <button mat-icon-button style="color: white" title="Remove image" (click)="onDelete()">
+                <mat-icon>delete</mat-icon>
+              </button>
+            </div>
+          </div>
+        </div>
+      } @else {
+        <div
+          class="drop-zone w-full flex flex-col items-center justify-center gap-2 py-10 cursor-pointer select-none"
+          [class.drag-over]="isDragOver()"
+          (click)="isBrowser && fileInput.click()"
+          (dragover)="isBrowser && onDragOver($event)"
+          (dragleave)="isBrowser && onDragLeave()"
+          (drop)="isBrowser && onDrop($event)"
+        >
+          <mat-icon class="opacity-40" style="font-size: 2.5rem; width: 2.5rem; height: 2.5rem">
+            upload_file
+          </mat-icon>
+          <span class="text-sm opacity-50">Upload hero image</span>
+        </div>
+      }
+      <input
+        #fileInput
+        type="file"
+        accept="image/*"
+        class="hidden"
+        (change)="onFileSelected($any($event.target).files)"
+      />
+      @if (uploading()) {
+        <mat-progress-bar mode="determinate" [value]="uploadProgress()" />
+      }
+      @if (uploadError()) {
+        <p class="text-sm text-red-500">{{ uploadError() }}</p>
+      }
+    </div>
+  `, styles: [":host{display:block}.drop-zone{border:2px dashed color-mix(in srgb,currentColor 25%,transparent);border-radius:8px;transition:border-color .15s,background .15s}.drop-zone.drag-over{border-color:var(--mat-sys-primary);background:color-mix(in srgb,var(--mat-sys-primary) 8%,transparent)}.image-wrapper{position:relative}.image-wrapper:hover .hover-overlay{opacity:1}.hover-overlay{opacity:0;transition:opacity .15s}\n"] }]
+        }], propDecorators: { fileInput: [{
+                type: ViewChild,
+                args: ['fileInput']
+            }] } });
+//# sourceMappingURL=page-editor-hero-image.component.js.map

package/esm2022/lib/page-editor/page-editor-hero-image.component.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"page-editor-hero-image.component.js","sourceRoot":"","sources":["../../../../../../libs/cms-admin-ui/src/lib/page-editor/page-editor-hero-image.component.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n PLATFORM_ID,\n ViewChild,\n inject,\n signal,\n} from '@angular/core';\nimport { isPlatformBrowser } from '@angular/common';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatProgressBarModule } from '@angular/material/progress-bar';\nimport { getDownloadURL, ref, uploadBytesResumable } from 'firebase/storage';\nimport { FIREBASE_STORAGE, PageService } from '@foliokit/cms-core';\nimport { PageEditorStore } from './page-editor.store';\n\n@Component({\n selector: 'admin-page-editor-hero-image',\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [MatButtonModule, MatIconModule, MatProgressBarModule],\n styles: [\n `\n :host { display: block; }\n .drop-zone {\n border: 2px dashed color-mix(in srgb, currentColor 25%, transparent);\n border-radius: 8px;\n transition: border-color 0.15s, background 0.15s;\n }\n .drop-zone.drag-over {\n border-color: var(--mat-sys-primary);\n background: color-mix(in srgb, var(--mat-sys-primary) 8%, transparent);\n }\n .image-wrapper { position: relative; }\n .image-wrapper:hover .hover-overlay { opacity: 1; }\n .hover-overlay { opacity: 0; transition: opacity 0.15s; }\n `,\n ],\n template: `\n <div class=\"flex flex-col gap-2\">\n <span class=\"text-sm font-semibold\">Hero Image</span>\n\n @if (heroImageUrl(); as url) {\n <div class=\"image-wrapper rounded-lg overflow-hidden\">\n <div class=\"aspect-video w-full relative\">\n <img [src]=\"url\" [alt]=\"heroImageAlt()\" class=\"w-full h-full object-cover\" />\n <div\n class=\"hover-overlay absolute inset-0 flex items-center justify-center gap-3\"\n style=\"background: rgba(0,0,0,0.45)\"\n >\n <button mat-icon-button style=\"color: white\" title=\"Replace image\" (click)=\"isBrowser && fileInput.click()\">\n <mat-icon>swap_horiz</mat-icon>\n </button>\n <button mat-icon-button style=\"color: white\" title=\"Remove image\" (click)=\"onDelete()\">\n <mat-icon>delete</mat-icon>\n </button>\n </div>\n </div>\n </div>\n } @else {\n <div\n class=\"drop-zone w-full flex flex-col items-center justify-center gap-2 py-10 cursor-pointer select-none\"\n [class.drag-over]=\"isDragOver()\"\n (click)=\"isBrowser && fileInput.click()\"\n (dragover)=\"isBrowser && onDragOver($event)\"\n (dragleave)=\"isBrowser && onDragLeave()\"\n (drop)=\"isBrowser && onDrop($event)\"\n >\n <mat-icon class=\"opacity-40\" style=\"font-size: 2.5rem; width: 2.5rem; height: 2.5rem\">\n upload_file\n </mat-icon>\n <span class=\"text-sm opacity-50\">Upload hero image</span>\n </div>\n }\n\n <input\n #fileInput\n type=\"file\"\n accept=\"image/*\"\n class=\"hidden\"\n (change)=\"onFileSelected($any($event.target).files)\"\n />\n\n @if (uploading()) {\n <mat-progress-bar mode=\"determinate\" [value]=\"uploadProgress()\" />\n }\n @if (uploadError()) {\n <p class=\"text-sm text-red-500\">{{ uploadError() }}</p>\n }\n </div>\n `,\n})\nexport class PageEditorHeroImageComponent {\n @ViewChild('fileInput') fileInput!: ElementRef<HTMLInputElement>;\n\n readonly store = inject(PageEditorStore);\n private readonly storage = inject(FIREBASE_STORAGE);\n private readonly pageService = inject(PageService);\n private readonly platformId = inject(PLATFORM_ID);\n\n readonly isBrowser = isPlatformBrowser(this.platformId);\n readonly uploading = signal(false);\n readonly uploadProgress = signal(0);\n readonly uploadError = signal<string | null>(null);\n readonly isDragOver = signal(false);\n readonly storagePath = signal<string | null>(null);\n\n get heroImageUrl() {\n return () => {\n const p = this.store.page();\n return p?.type === 'about' ? p.heroImageUrl : undefined;\n };\n }\n\n get heroImageAlt() {\n return () => {\n const p = this.store.page();\n return p?.type === 'about' ? (p.heroImageAlt ?? '') : '';\n };\n }\n\n onDragOver(event: DragEvent): void {\n event.preventDefault();\n this.isDragOver.set(true);\n }\n\n onDragLeave(): void {\n this.isDragOver.set(false);\n }\n\n onDrop(event: DragEvent): void {\n event.preventDefault();\n this.isDragOver.set(false);\n const files = event.dataTransfer?.files;\n if (files?.length) this.upload(files[0]);\n }\n\n onFileSelected(files: FileList | null): void {\n if (!files?.length) return;\n this.upload(files[0]);\n if (this.fileInput?.nativeElement) {\n this.fileInput.nativeElement.value = '';\n }\n }\n\n onDelete(): void {\n if (!window.confirm('Remove hero image?')) return;\n const path = this.storagePath();\n const clear = () => {\n this.store.updateField('heroImageUrl', undefined);\n this.store.updateField('heroImageAlt', undefined);\n this.storagePath.set(null);\n this.uploadProgress.set(0);\n };\n if (path) {\n this.pageService.deleteStorageFile(path).subscribe({ next: clear, error: clear });\n } else {\n clear();\n }\n }\n\n private upload(file: File): void {\n const previousPath = this.storagePath();\n const pageId = this.store.page()?.id || this.store.tempPageId();\n const storagePath = `pages/${pageId}/hero/${file.name}`;\n\n if (previousPath) {\n this.pageService.deleteStorageFile(previousPath).subscribe();\n }\n\n const fileRef = ref(this.storage, storagePath);\n this.uploading.set(true);\n this.uploadProgress.set(0);\n this.uploadError.set(null);\n\n const task = uploadBytesResumable(fileRef, file);\n task.on(\n 'state_changed',\n (snapshot) => {\n this.uploadProgress.set(\n Math.round((snapshot.bytesTransferred / snapshot.totalBytes) * 100),\n );\n },\n (error) => {\n this.uploading.set(false);\n this.uploadError.set(error.message);\n },\n () => {\n getDownloadURL(task.snapshot.ref).then((downloadUrl) => {\n this.store.updateField('heroImageUrl', downloadUrl);\n this.store.updateField('heroImageAlt', file.name);\n this.storagePath.set(storagePath);\n this.uploading.set(false);\n });\n },\n );\n }\n}\n"]}

package/esm2022/lib/page-editor/page-editor.store.js ADDED Viewed

@@ -0,0 +1,198 @@
+import { inject } from '@angular/core';
+import { patchState, signalStore, watchState, withComputed, withHooks, withMethods, withState, } from '@ngrx/signals';
+import { computed } from '@angular/core';
+import { Subject } from 'rxjs';
+import { debounceTime, filter, switchMap } from 'rxjs/operators';
+import { PageService } from '@foliokit/cms-core';
+const initialState = {
+    page: null,
+    isDirty: false,
+    isSaving: false,
+    saveError: null,
+    mode: 'new',
+    cursorPosition: 0,
+    tempPageId: crypto.randomUUID(),
+};
+function blankAboutPage() {
+    const now = Date.now();
+    return {
+        id: '',
+        type: 'about',
+        slug: '',
+        title: '',
+        status: 'draft',
+        body: '',
+        contentVersion: 1,
+        embeddedMedia: {},
+        seo: {},
+        updatedAt: now,
+        createdAt: now,
+    };
+}
+function blankLinksPage() {
+    const now = Date.now();
+    return {
+        id: '',
+        type: 'links',
+        slug: '',
+        title: '',
+        status: 'draft',
+        links: [],
+        seo: {},
+        updatedAt: now,
+        createdAt: now,
+    };
+}
+export const PageEditorStore = signalStore(withState(initialState), withComputed((store) => ({
+    isNew: computed(() => store.mode() === 'new'),
+    canPublish: computed(() => {
+        const page = store.page();
+        return (page !== null &&
+            page.title.trim().length > 0 &&
+            page.status !== 'published');
+    }),
+})), withMethods((store, pageService = inject(PageService)) => {
+    let autosaveTrigger$ = null;
+    function cancelAutosave() {
+        autosaveTrigger$?.next('cancel');
+    }
+    return {
+        _setAutosaveTrigger(trigger) {
+            autosaveTrigger$ = trigger;
+        },
+        loadPage(id) {
+            pageService.getPageById(id).subscribe((page) => {
+                patchState(store, {
+                    page,
+                    isDirty: false,
+                    isSaving: false,
+                    saveError: null,
+                    mode: 'edit',
+                });
+            });
+        },
+        initNew(type = 'about') {
+            const page = type === 'links' ? blankLinksPage() : blankAboutPage();
+            patchState(store, {
+                page,
+                isDirty: false,
+                isSaving: false,
+                saveError: null,
+                mode: 'new',
+            });
+        },
+        updateField(field, value) {
+            const current = store.page();
+            if (!current)
+                return;
+            patchState(store, { page: { ...current, [field]: value }, isDirty: true });
+        },
+        setCursorPosition(position) {
+            patchState(store, { cursorPosition: position });
+        },
+        insertMediaAtCursor(token) {
+            const page = store.page();
+            const pos = store.cursorPosition();
+            if (!page || page.type !== 'about')
+                return;
+            const before = page.body.slice(0, pos);
+            const after = page.body.slice(pos);
+            const insertion = `![alt](${token})`;
+            patchState(store, {
+                page: { ...page, body: `${before}${insertion}${after}` },
+                isDirty: true,
+                cursorPosition: pos + insertion.length,
+            });
+        },
+        removeEmbeddedMedia(token) {
+            const page = store.page();
+            if (!page || page.type !== 'about')
+                return;
+            const entry = page.embeddedMedia[token];
+            const { [token]: _, ...remaining } = page.embeddedMedia;
+            patchState(store, {
+                page: { ...page, embeddedMedia: remaining },
+                isDirty: true,
+            });
+            if (entry) {
+                pageService.deleteStorageFile(entry.storagePath).subscribe();
+            }
+        },
+        save() {
+            const page = store.page();
+            if (!page)
+                return;
+            cancelAutosave();
+            patchState(store, { isSaving: true, saveError: null });
+            pageService.savePage(page).subscribe({
+                next: (saved) => {
+                    patchState(store, {
+                        page: saved,
+                        isDirty: false,
+                        isSaving: false,
+                        mode: 'edit',
+                    });
+                },
+                error: (err) => {
+                    const message = err instanceof Error ? err.message : 'Save failed';
+                    patchState(store, { isSaving: false, saveError: message });
+                },
+            });
+        },
+        toggleStatus() {
+            const page = store.page();
+            if (!page)
+                return;
+            const prevStatus = page.status;
+            const newStatus = prevStatus === 'published' ? 'draft' : 'published';
+            patchState(store, {
+                page: { ...page, status: newStatus },
+                isDirty: true,
+            });
+            cancelAutosave();
+            patchState(store, { isSaving: true, saveError: null });
+            pageService.savePage({ ...page, status: newStatus }).subscribe({
+                next: (saved) => {
+                    patchState(store, {
+                        page: saved,
+                        isDirty: false,
+                        isSaving: false,
+                        mode: 'edit',
+                    });
+                },
+                error: (err) => {
+                    const message = err instanceof Error ? err.message : 'Status change failed';
+                    patchState(store, {
+                        page: { ...page, status: prevStatus },
+                        isSaving: false,
+                        saveError: message,
+                    });
+                },
+            });
+        },
+    };
+}), withHooks({
+    onInit(store) {
+        const trigger$ = new Subject();
+        store._setAutosaveTrigger(trigger$);
+        const autosaveSub = trigger$
+            .pipe(filter((v) => v === 'save'), debounceTime(2000), switchMap(() => {
+            const page = store.page();
+            if (!page || !store.isDirty() || page.status !== 'draft') {
+                return [];
+            }
+            return [true];
+        }))
+            .subscribe(() => store.save());
+        watchState(store, (state) => {
+            if (state.isDirty && state.page?.status === 'draft' && !state.isSaving) {
+                trigger$.next('save');
+            }
+        });
+        return () => {
+            autosaveSub.unsubscribe();
+            trigger$.complete();
+        };
+    },
+}));
+//# sourceMappingURL=page-editor.store.js.map

package/esm2022/lib/page-editor/page-editor.store.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"page-editor.store.js","sourceRoot":"","sources":["../../../../../../libs/cms-admin-ui/src/lib/page-editor/page-editor.store.ts"],"names":[],"mappings":"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","sourcesContent":["import { inject } from '@angular/core';\nimport {\n patchState,\n signalStore,\n watchState,\n withComputed,\n withHooks,\n withMethods,\n withState,\n} from '@ngrx/signals';\nimport { computed } from '@angular/core';\nimport { Subject } from 'rxjs';\nimport { debounceTime, filter, switchMap } from 'rxjs/operators';\nimport { PageService } from '@foliokit/cms-core';\nimport type { AboutPage, CmsPageUnion, LinksPage } from '@foliokit/cms-core';\n\nexport interface PageEditorState {\n page: CmsPageUnion | null;\n isDirty: boolean;\n isSaving: boolean;\n saveError: string | null;\n mode: 'new' | 'edit';\n cursorPosition: number;\n tempPageId: string;\n}\n\nconst initialState: PageEditorState = {\n page: null,\n isDirty: false,\n isSaving: false,\n saveError: null,\n mode: 'new',\n cursorPosition: 0,\n tempPageId: crypto.randomUUID(),\n};\n\nfunction blankAboutPage(): AboutPage {\n const now = Date.now();\n return {\n id: '',\n type: 'about',\n slug: '',\n title: '',\n status: 'draft',\n body: '',\n contentVersion: 1,\n embeddedMedia: {},\n seo: {},\n updatedAt: now,\n createdAt: now,\n };\n}\n\nfunction blankLinksPage(): LinksPage {\n const now = Date.now();\n return {\n id: '',\n type: 'links',\n slug: '',\n title: '',\n status: 'draft',\n links: [],\n seo: {},\n updatedAt: now,\n createdAt: now,\n };\n}\n\nexport const PageEditorStore = signalStore(\n withState<PageEditorState>(initialState),\n\n withComputed((store) => ({\n isNew: computed(() => store.mode() === 'new'),\n canPublish: computed(() => {\n const page = store.page();\n return (\n page !== null &&\n page.title.trim().length > 0 &&\n page.status !== 'published'\n );\n }),\n })),\n\n withMethods((store, pageService = inject(PageService)) => {\n let autosaveTrigger$: Subject<'save' | 'cancel'> | null = null;\n\n function cancelAutosave() {\n autosaveTrigger$?.next('cancel');\n }\n\n return {\n _setAutosaveTrigger(trigger: Subject<'save' | 'cancel'>) {\n autosaveTrigger$ = trigger;\n },\n\n loadPage(id: string): void {\n pageService.getPageById(id).subscribe((page) => {\n patchState(store, {\n page,\n isDirty: false,\n isSaving: false,\n saveError: null,\n mode: 'edit',\n });\n });\n },\n\n initNew(type: CmsPageUnion['type'] = 'about'): void {\n const page = type === 'links' ? blankLinksPage() : blankAboutPage();\n patchState(store, {\n page,\n isDirty: false,\n isSaving: false,\n saveError: null,\n mode: 'new',\n });\n },\n\n updateField(field: string, value: unknown): void {\n const current = store.page();\n if (!current) return;\n patchState(store, { page: { ...current, [field]: value } as CmsPageUnion, isDirty: true });\n },\n\n setCursorPosition(position: number): void {\n patchState(store, { cursorPosition: position });\n },\n\n insertMediaAtCursor(token: string): void {\n const page = store.page();\n const pos = store.cursorPosition();\n if (!page || page.type !== 'about') return;\n const before = page.body.slice(0, pos);\n const after = page.body.slice(pos);\n const insertion = `![alt](${token})`;\n patchState(store, {\n page: { ...page, body: `${before}${insertion}${after}` } as CmsPageUnion,\n isDirty: true,\n cursorPosition: pos + insertion.length,\n });\n },\n\n removeEmbeddedMedia(token: string): void {\n const page = store.page();\n if (!page || page.type !== 'about') return;\n const entry = page.embeddedMedia[token];\n const { [token]: _, ...remaining } = page.embeddedMedia;\n patchState(store, {\n page: { ...page, embeddedMedia: remaining } as CmsPageUnion,\n isDirty: true,\n });\n if (entry) {\n pageService.deleteStorageFile(entry.storagePath).subscribe();\n }\n },\n\n save(): void {\n const page = store.page();\n if (!page) return;\n cancelAutosave();\n patchState(store, { isSaving: true, saveError: null });\n pageService.savePage(page).subscribe({\n next: (saved) => {\n patchState(store, {\n page: saved,\n isDirty: false,\n isSaving: false,\n mode: 'edit',\n });\n },\n error: (err: unknown) => {\n const message = err instanceof Error ? err.message : 'Save failed';\n patchState(store, { isSaving: false, saveError: message });\n },\n });\n },\n\n toggleStatus(): void {\n const page = store.page();\n if (!page) return;\n const prevStatus = page.status;\n const newStatus: CmsPageUnion['status'] =\n prevStatus === 'published' ? 'draft' : 'published';\n patchState(store, {\n page: { ...page, status: newStatus } as CmsPageUnion,\n isDirty: true,\n });\n cancelAutosave();\n patchState(store, { isSaving: true, saveError: null });\n pageService.savePage({ ...page, status: newStatus }).subscribe({\n next: (saved) => {\n patchState(store, {\n page: saved,\n isDirty: false,\n isSaving: false,\n mode: 'edit',\n });\n },\n error: (err: unknown) => {\n const message = err instanceof Error ? err.message : 'Status change failed';\n patchState(store, {\n page: { ...page, status: prevStatus } as CmsPageUnion,\n isSaving: false,\n saveError: message,\n });\n },\n });\n },\n };\n }),\n\n withHooks({\n onInit(store) {\n const trigger$ = new Subject<'save' | 'cancel'>();\n store._setAutosaveTrigger(trigger$);\n\n const autosaveSub = trigger$\n .pipe(\n filter((v) => v === 'save'),\n debounceTime(2000),\n switchMap(() => {\n const page = store.page();\n if (!page || !store.isDirty() || page.status !== 'draft') {\n return [];\n }\n return [true];\n }),\n )\n .subscribe(() => store.save());\n\n watchState(store, (state) => {\n if (state.isDirty && state.page?.status === 'draft' && !state.isSaving) {\n trigger$.next('save');\n }\n });\n\n return () => {\n autosaveSub.unsubscribe();\n trigger$.complete();\n };\n },\n }),\n);\n"]}