@isaiahiroko/tilmart-ngx-apps-admin 0.2.2 → 0.2.4

package/fesm2022/isaiahiroko-tilmart-ngx-apps-admin-catalog.module-BwjfFXDU.mjs

@@ -0,0 +1,562 @@
+import * as i0 from '@angular/core';
+import { inject, Component, NgModule } from '@angular/core';
+import * as i1$1 from '@angular/router';
+import { RouterModule } from '@angular/router';
+import { getEnv, BaseDirective, using, notify, SharedModule } from '@thescaffold/ngx-core';
+import * as i2 from '@thescaffold/ngx-ui';
+import { ElementsModule, WebgetsModule } from '@thescaffold/ngx-ui';
+import { HttpClient } from '@angular/common/http';
+import { firstValueFrom, takeUntil } from 'rxjs';
+import * as i1 from '@angular/forms';
+
+// `ProductMedia.blobId` (P1.3) resolves to `GET {API_BASE_URL}/apps/blobs/
+// download/:id` — same helper/reasoning as the buyer app's
+// `lib/data/media.ts#blobUrl` (confirmed against the real
+// `ntx-apps/libs/blobs` controller, not guessed).
+function resolveBlobUrl(blobId) {
+    if (!blobId)
+        return '';
+    return `${getEnv('API_BASE_URL')}/apps/blobs/download/${blobId}`;
+}
+// `@thescaffold/jsx-blobs`'s own `upload()` helper is broken against this
+// platform's response envelope: its internal `init()`/`verify()` return
+// the raw `{status, title, message, data}` body but `upload()` then reads
+// `file.id` (not `file.data.id`) — so it always reports "Failed to init
+// file upload" even on a 201. Confirmed by driving the real upload flow
+// in a browser and reading the network log: `init` returns 201 with a
+// real file id, `upload()` still fails. Rather than depend on a broken
+// vendor convenience function, this reimplements the same three-call
+// contract (init → chunked batch → verify) directly against
+// `apiService`, which is also how P1's demo-media seed script validated
+// the contract in the first place, and gets Angular's existing
+// `JwtInterceptor` auth for free instead of hand-managing SDK config.
+async function uploadFileToBlobs(apiService, file, parentId, tags) {
+    const ext = file.name.split('.').pop()?.toLowerCase() || '';
+    const mime = file.type || 'application/octet-stream';
+    const meta = { type: ext, parentId, name: file.name, tags, size: file.size, mime };
+    const initRes = await firstValueFrom(apiService.post('apps/blobs/upload/init', meta));
+    const fileId = initRes?.data?.id;
+    if (!fileId)
+        throw new Error('Failed to init file upload');
+    const chunkSize = 512 * 1024;
+    const reader = file.stream().getReader();
+    let index = 0;
+    let buffer = new Uint8Array();
+    const flushChunk = async (bytes) => {
+        await firstValueFrom(apiService.post('apps/blobs/upload/batch', {
+            pages: [{ fileId, index: index++, raw: uint8ToBase64(bytes) }],
+        }));
+    };
+    while (true) {
+        const { done, value } = await reader.read();
+        if (done)
+            break;
+        const combined = new Uint8Array(buffer.length + value.length);
+        combined.set(buffer);
+        combined.set(value, buffer.length);
+        buffer = combined;
+        while (buffer.length >= chunkSize) {
+            await flushChunk(buffer.slice(0, chunkSize));
+            buffer = buffer.slice(chunkSize);
+        }
+    }
+    if (buffer.length > 0)
+        await flushChunk(buffer);
+    const verifyRes = await firstValueFrom(apiService.post('apps/blobs/upload/verify', meta));
+    const blobId = verifyRes?.data?.id;
+    if (!blobId)
+        throw new Error('Failed to verify file upload');
+    return blobId;
+}
+function uint8ToBase64(bytes) {
+    let binary = '';
+    const chunkSize = 0x8000;
+    for (let i = 0; i < bytes.length; i += chunkSize) {
+        binary += String.fromCharCode(...bytes.subarray(i, i + chunkSize));
+    }
+    return btoa(binary);
+}
+const PRODUCT_TYPES = ['simple', 'variant', 'kit'];
+const PRODUCT_STATUSES = ['draft', 'active', 'archived', 'discontinued'];
+// A fixed "folder" id for every admin-uploaded product image.
+// `BlobsFiles.parentId` is NOT NULL in the DB despite the entity/DTO
+// marking it optional (`@IsOptional()`, `nullable: true`) — a genuine
+// vendor-package mismatch, found by running the demo-catalogue media seed
+// script against a live server and reading the resulting
+// QueryFailedError (see the commerce migrations' own notes). No FK is
+// declared on the column, so any UUID satisfies it.
+// Product photo guidance — mirrored in the bulk importer and the admin hint.
+const MAX_IMAGE_BYTES = 8 * 1024 * 1024;
+const MIN_IMAGE_SIDE = 800;
+async function readImageSize(file) {
+    try {
+        const bitmap = await createImageBitmap(file);
+        const size = { width: bitmap.width, height: bitmap.height };
+        bitmap.close();
+        return size;
+    }
+    catch {
+        return undefined;
+    }
+}
+const PRODUCT_MEDIA_PARENT_ID = '00000000-0000-4000-8000-000000000d30';
+// P1.15 (original slice) + R1 production-readiness pass (this rebuild).
+// The original version of this page was read-only: a product list plus
+// the CAT-03 publish-validation check, with no create/edit/media/
+// attribute/variant/pricing UI anywhere — "no way to add items to
+// catalogue" was the single most direct gap this session set out to
+// close. This keeps the publish-check list and adds a full create/edit
+// flow: basic info → category/brand → the category's resolved attribute
+// grid → one implicit variant (simple products; a per-variant grid for
+// `variant`-type products is real, isolated follow-up work, same
+// reasoning P1.15 originally gave for deferring it) → media upload → a
+// single default price + stock level. Search/refresh on the list are
+// real (not the generic `x-webget-collection` — this table needs a
+// bespoke "Check" action + inline errors the generic collection can't
+// render, so pagination/search are hand-wired here instead).
+class CatalogComponent extends BaseDirective {
+    constructor() {
+        super(...arguments);
+        this.http = inject(HttpClient);
+        this.productSource = this.apiService.on('apps/commerce/product');
+        this.categorySource = this.apiService.on('apps/commerce/category');
+        this.brandSource = this.apiService.on('apps/commerce/brand');
+        this.variantSource = this.apiService.on('apps/commerce/product-variant');
+        this.attrValueSource = this.apiService.on('apps/commerce/product-attribute-value');
+        this.mediaSource = this.apiService.on('apps/commerce/product-media');
+        this.priceSource = this.apiService.on('apps/commerce/price');
+        this.stockLevelSource = this.apiService.on('apps/commerce/stock-level');
+        this.stockLocationSource = this.apiService.on('apps/commerce/stock-location');
+        this.types = PRODUCT_TYPES;
+        this.statuses = PRODUCT_STATUSES;
+        this.loading = true;
+        this.products = [];
+        this.categories = [];
+        this.brands = [];
+        this.stockLocations = [];
+        this.query = '';
+        this.page = 1;
+        this.perPage = 25;
+        this.total = 0;
+        this.editing = false;
+        this.saving = false;
+        this.uploadingMedia = false;
+        this.draft = null;
+        this.variant = null;
+        this.attributeDefs = [];
+        this.attributeValues = {};
+        this.media = [];
+        this.price = null;
+        this.stock = null;
+        this.init = () => {
+            this.loadProducts();
+            this.loadCategories();
+            this.loadBrands();
+            this.loadStockLocations();
+        };
+    }
+    loadProducts(page = this.page) {
+        this.loading = true;
+        this.page = page;
+        const params = { page, perPage: this.perPage };
+        if (this.query.trim())
+            params.query = this.query.trim();
+        this.productSource
+            .getMany(params)
+            .pipe(takeUntil(this.$))
+            .subscribe(using((response) => {
+            this.products = (response?.data ?? []).map((p) => ({
+                id: p.id,
+                name: p.name,
+                model: p.model,
+                type: p.type,
+                status: p.status,
+                updatedAt: p.updatedAt,
+                checking: false,
+                checked: false,
+            }));
+            this.total = response?.meta?.total ?? this.products.length;
+            this.loading = false;
+        }));
+    }
+    search() {
+        this.loadProducts(1);
+    }
+    refresh() {
+        this.loadProducts(this.page);
+    }
+    prevPage() {
+        if (this.page > 1)
+            this.loadProducts(this.page - 1);
+    }
+    nextPage() {
+        if (this.page * this.perPage < this.total)
+            this.loadProducts(this.page + 1);
+    }
+    loadCategories() {
+        this.categorySource
+            .getMany({ page: 1, perPage: 300 })
+            .pipe(takeUntil(this.$))
+            .subscribe(using((response) => {
+            this.categories = (response?.data ?? []).sort((a, b) => String(a.name).localeCompare(String(b.name)));
+        }));
+    }
+    loadBrands() {
+        this.brandSource
+            .getMany({ page: 1, perPage: 200 })
+            .pipe(takeUntil(this.$))
+            .subscribe(using((response) => {
+            this.brands = (response?.data ?? []).sort((a, b) => String(a.name).localeCompare(String(b.name)));
+        }));
+    }
+    loadStockLocations() {
+        this.stockLocationSource
+            .getMany({ page: 1, perPage: 50 })
+            .pipe(takeUntil(this.$))
+            .subscribe(using((response) => (this.stockLocations = response?.data ?? [])));
+    }
+    checkPublish(product) {
+        product.checking = true;
+        this.productSource
+            .post(`apps/commerce/product/${product.id}/validate-publish`)
+            .pipe(takeUntil(this.$))
+            .subscribe(using((response) => {
+            product.checking = false;
+            product.checked = true;
+            product.canPublish = !!response?.data?.canPublish;
+            product.errors = response?.data?.errors ?? [];
+        }));
+    }
+    startCreate() {
+        this.editing = true;
+        this.draft = {
+            name: '',
+            slug: '',
+            model: '',
+            brandId: '',
+            primaryCategoryId: '',
+            shortDesc: '',
+            type: 'simple',
+            status: 'draft',
+        };
+        this.variant = { sku: '', weight: null, handlingClass: 'standard' };
+        this.attributeDefs = [];
+        this.attributeValues = {};
+        this.media = [];
+        this.price = { amount: null };
+        this.stock = { locationId: this.stockLocations[0]?.id ?? '', available: 0 };
+    }
+    async edit(row) {
+        this.editing = true;
+        const productRes = await firstValueFrom(this.productSource.getOne(row.id));
+        const p = productRes?.data;
+        this.draft = {
+            id: p.id,
+            name: p.name ?? '',
+            slug: p.slug ?? '',
+            model: p.model ?? '',
+            brandId: p.brandId ?? '',
+            primaryCategoryId: p.primaryCategoryId ?? '',
+            shortDesc: p.shortDesc ?? '',
+            type: p.type,
+            status: p.status,
+        };
+        this.attributeValues = {};
+        if (this.draft.primaryCategoryId) {
+            await this.loadAttributeTemplate(this.draft.primaryCategoryId);
+        }
+        else {
+            this.attributeDefs = [];
+        }
+        const [variantsRes, attrsRes, mediaRes] = await Promise.all([
+            firstValueFrom(this.variantSource.getMany({ productId: p.id, page: 1, perPage: 50 })),
+            firstValueFrom(this.attrValueSource.getMany({ productId: p.id, page: 1, perPage: 200 })),
+            firstValueFrom(this.mediaSource.getMany({ productId: p.id, page: 1, perPage: 50 })),
+        ]);
+        const firstVariant = variantsRes?.data?.[0];
+        this.variant = firstVariant
+            ? {
+                id: firstVariant.id,
+                sku: firstVariant.sku,
+                weight: firstVariant.weight ?? null,
+                handlingClass: firstVariant.handlingClass ?? 'standard',
+            }
+            : { sku: '', weight: null, handlingClass: 'standard' };
+        for (const v of attrsRes?.data ?? []) {
+            this.attributeValues[v.attributeDefinitionId] = {
+                id: v.id,
+                valueNumber: v.valueNumber,
+                valueNumberHigh: v.valueNumberHigh,
+                valueText: v.valueText,
+                valueBool: v.valueBool,
+            };
+        }
+        this.media = (mediaRes?.data ?? []).map((m) => ({
+            id: m.id,
+            blobId: m.blobId,
+            altText: m.altText,
+            type: m.type,
+        }));
+        for (const m of this.media) {
+            m.objectUrl = await this.resolveMediaObjectUrl(m.blobId);
+        }
+        if (this.variant.id) {
+            const priceRes = await firstValueFrom(this.priceSource.getMany({ variantId: this.variant.id, page: 1, perPage: 1 }));
+            const priceRow = priceRes?.data?.[0];
+            this.price = priceRow ? { id: priceRow.id, amount: priceRow.amount } : { amount: null };
+            const stockRes = await firstValueFrom(this.stockLevelSource.getMany({ variantId: this.variant.id, page: 1, perPage: 1 }));
+            const stockRow = stockRes?.data?.[0];
+            this.stock = stockRow
+                ? { id: stockRow.id, locationId: stockRow.locationId, available: stockRow.available }
+                : { locationId: this.stockLocations[0]?.id ?? '', available: 0 };
+        }
+        else {
+            this.price = { amount: null };
+            this.stock = { locationId: this.stockLocations[0]?.id ?? '', available: 0 };
+        }
+    }
+    async onCategoryChange() {
+        if (!this.draft?.primaryCategoryId) {
+            this.attributeDefs = [];
+            return;
+        }
+        await this.loadAttributeTemplate(this.draft.primaryCategoryId);
+    }
+    async loadAttributeTemplate(categoryId) {
+        try {
+            const res = await firstValueFrom(this.apiService.get(`apps/commerce/category/${categoryId}/attribute-template`));
+            this.attributeDefs = (res?.data?.definitions ?? []);
+            for (const def of this.attributeDefs) {
+                if (!this.attributeValues[def.id])
+                    this.attributeValues[def.id] = {};
+            }
+        }
+        catch {
+            this.attributeDefs = [];
+        }
+    }
+    async saveProduct() {
+        if (!this.draft || !this.draft.name.trim()) {
+            notify('Name is required.', undefined, 'error');
+            return;
+        }
+        this.saving = true;
+        try {
+            const payload = {
+                name: this.draft.name.trim(),
+                slug: this.draft.slug.trim() || undefined,
+                brandId: this.draft.brandId || undefined,
+                model: this.draft.model.trim() || undefined,
+                primaryCategoryId: this.draft.primaryCategoryId || undefined,
+                shortDesc: this.draft.shortDesc.trim() || undefined,
+                type: this.draft.type,
+                status: this.draft.status,
+            };
+            if (this.draft.id) {
+                await firstValueFrom(this.productSource.update(this.draft.id, payload));
+            }
+            else {
+                const res = await firstValueFrom(this.productSource.create(payload));
+                this.draft.id = res?.data?.id;
+            }
+            const productId = this.draft.id;
+            if (this.variant && this.variant.sku.trim()) {
+                const variantPayload = {
+                    productId,
+                    sku: this.variant.sku.trim(),
+                    weight: this.variant.weight != null ? Number(this.variant.weight) : undefined,
+                    handlingClass: this.variant.handlingClass || 'standard',
+                };
+                if (this.variant.id) {
+                    await firstValueFrom(this.variantSource.update(this.variant.id, variantPayload));
+                }
+                else {
+                    const vRes = await firstValueFrom(this.variantSource.create(variantPayload));
+                    this.variant.id = vRes?.data?.id;
+                }
+            }
+            for (const def of this.attributeDefs) {
+                const v = this.attributeValues[def.id];
+                if (!v)
+                    continue;
+                const hasValue = (v.valueNumber !== null && v.valueNumber !== undefined && `${v.valueNumber}` !== '') ||
+                    !!v.valueText ||
+                    v.valueBool !== null && v.valueBool !== undefined;
+                if (!hasValue)
+                    continue;
+                const attrPayload = {
+                    productId,
+                    attributeDefinitionId: def.id,
+                    valueNumber: def.dataType === 'number' || def.dataType === 'range'
+                        ? v.valueNumber != null && `${v.valueNumber}` !== ''
+                            ? Number(v.valueNumber)
+                            : undefined
+                        : undefined,
+                    valueNumberHigh: def.dataType === 'range' && v.valueNumberHigh != null && `${v.valueNumberHigh}` !== ''
+                        ? Number(v.valueNumberHigh)
+                        : undefined,
+                    valueText: def.dataType === 'text' || def.dataType === 'enum' ? v.valueText || undefined : undefined,
+                    valueBool: def.dataType === 'boolean' ? !!v.valueBool : undefined,
+                };
+                if (v.id) {
+                    await firstValueFrom(this.attrValueSource.update(v.id, attrPayload));
+                }
+                else {
+                    const aRes = await firstValueFrom(this.attrValueSource.create(attrPayload));
+                    v.id = aRes?.data?.id;
+                }
+            }
+            if (this.variant?.id) {
+                if (this.price && this.price.amount != null && `${this.price.amount}` !== '') {
+                    const pricePayload = {
+                        variantId: this.variant.id,
+                        amount: Number(this.price.amount),
+                        minQuantity: 1,
+                    };
+                    if (this.price.id) {
+                        await firstValueFrom(this.priceSource.update(this.price.id, pricePayload));
+                    }
+                    else {
+                        const prRes = await firstValueFrom(this.priceSource.create(pricePayload));
+                        this.price.id = prRes?.data?.id;
+                    }
+                }
+                if (this.stock?.locationId) {
+                    const stockPayload = {
+                        variantId: this.variant.id,
+                        locationId: this.stock.locationId,
+                        available: Number(this.stock.available ?? 0),
+                    };
+                    if (this.stock.id) {
+                        await firstValueFrom(this.stockLevelSource.update(this.stock.id, stockPayload));
+                    }
+                    else {
+                        const stRes = await firstValueFrom(this.stockLevelSource.create(stockPayload));
+                        this.stock.id = stRes?.data?.id;
+                    }
+                }
+            }
+            notify('Product saved.', undefined, 'success');
+            this.loadProducts(this.page);
+        }
+        catch {
+            notify('Could not save the product (check required fields).', undefined, 'error');
+        }
+        finally {
+            this.saving = false;
+        }
+    }
+    async onMediaSelected(event) {
+        const input = event.target;
+        const files = input.files;
+        if (!files || !files.length || !this.draft?.id)
+            return;
+        const file = files[0];
+        if (file.size > MAX_IMAGE_BYTES) {
+            notify('That image is over 8 MB — export it at 1200–2000 px (JPG/WebP) and try again.', undefined, 'error');
+            input.value = '';
+            return;
+        }
+        const size = await readImageSize(file);
+        if (size && Math.min(size.width, size.height) < MIN_IMAGE_SIDE) {
+            notify(`That image is only ${size.width} × ${size.height}px — it will look soft on large screens. 1200 × 1200 px or more is recommended.`, undefined, 'warning');
+        }
+        this.uploadingMedia = true;
+        try {
+            const blobId = await uploadFileToBlobs(this.apiService, file, PRODUCT_MEDIA_PARENT_ID, [
+                'product-media',
+            ]);
+            const altText = `${this.draft.name} — product photo`;
+            const res = await firstValueFrom(this.mediaSource.create({
+                productId: this.draft.id,
+                blobId,
+                type: 'gallery',
+                altText,
+                position: this.media.length,
+            }));
+            const objectUrl = await this.resolveMediaObjectUrl(blobId);
+            this.media.push({ id: res?.data?.id, blobId, altText, type: 'gallery', objectUrl });
+            notify('Image uploaded.', undefined, 'success');
+        }
+        catch (e) {
+            console.error('media upload failed', e);
+            notify('Could not upload the image.', undefined, 'error');
+        }
+        finally {
+            this.uploadingMedia = false;
+            input.value = '';
+        }
+    }
+    async removeMedia(item) {
+        try {
+            await firstValueFrom(this.mediaSource.remove(item.id));
+            this.media = this.media.filter((m) => m.id !== item.id);
+        }
+        catch {
+            notify('Could not remove the image.', undefined, 'error');
+        }
+    }
+    // `download/:id` needs the bearer header only `HttpClient` (via the
+    // app's existing `JwtInterceptor`) can attach — see the `MediaVm.
+    // objectUrl` comment. Empty string on failure just leaves the
+    // thumbnail blank rather than breaking the editor.
+    async resolveMediaObjectUrl(blobId) {
+        try {
+            const blob = await firstValueFrom(this.http.get(resolveBlobUrl(blobId), { responseType: 'blob' }));
+            // Not `URL.createObjectURL` — the app's CSP `img-src` allows `data:`
+            // but not `blob:`, so an object URL renders as a CSP violation
+            // (confirmed by driving this in a browser). A data URI sidesteps it.
+            return await new Promise((resolve, reject) => {
+                const reader = new FileReader();
+                reader.onload = () => resolve(reader.result);
+                reader.onerror = reject;
+                reader.readAsDataURL(blob);
+            });
+        }
+        catch {
+            return '';
+        }
+    }
+    cancelEdit() {
+        this.editing = false;
+        this.draft = null;
+        this.variant = null;
+        this.attributeDefs = [];
+        this.attributeValues = {};
+        this.media = [];
+        this.price = null;
+        this.stock = null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: CatalogComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: CatalogComponent, isStandalone: false, selector: "x-catalog", usesInheritance: true, ngImport: i0, template: "<div class=\"x-page-head\">\n  <div class=\"x-page-title\">Catalogue</div>\n  <div class=\"x-page-subtitle\">Products, variants, attributes, media, pricing and stock.</div>\n</div>\n\n@if (!editing) {\n  <div class=\"x-cat-toolbar\">\n    <input\n      type=\"text\"\n      class=\"x-cat-search\"\n      placeholder=\"Search products\u2026\"\n      [(ngModel)]=\"query\"\n      (keyup.enter)=\"search()\"\n    />\n    <button type=\"button\" class=\"x-cat-btn\" (click)=\"search()\">Search</button>\n    <button type=\"button\" class=\"x-cat-btn\" (click)=\"refresh()\">Refresh</button>\n    <div class=\"x-cat-spacer\"></div>\n    <a class=\"x-cat-btn\" routerLink=\"/admin/bulk-upload\">Bulk upload (Excel)</a>\n    <button type=\"button\" class=\"x-cat-btn x-cat-btn-primary\" (click)=\"startCreate()\">+ New product</button>\n  </div>\n\n  @if (loading) {\n    <x-element-loader></x-element-loader>\n  } @else {\n    <div class=\"x-catalog-table\">\n      <div class=\"x-catalog-row x-catalog-head\">\n        <div class=\"x-catalog-col-name\">Product</div>\n        <div class=\"x-catalog-col-type\">Type</div>\n        <div class=\"x-catalog-col-status\">Status</div>\n        <div class=\"x-catalog-col-check\">Publish check</div>\n        <div class=\"x-catalog-col-action\"></div>\n      </div>\n      @for (product of products; track product.id) {\n        <div class=\"x-catalog-row\">\n          <div class=\"x-catalog-col-name\">\n            {{ product.name }}\n            @if (product.model) {\n              <span class=\"x-catalog-model\">{{ product.model }}</span>\n            }\n          </div>\n          <div class=\"x-catalog-col-type\">{{ product.type }}</div>\n          <div class=\"x-catalog-col-status\">\n            <span class=\"x-status-badge\" [class]=\"'x-status-' + product.status\">{{\n              product.status\n            }}</span>\n          </div>\n          <div class=\"x-catalog-col-check\">\n            @if (product.checking) {\n              <span class=\"x-check-pending\">Checking\u2026</span>\n            } @else if (product.checked && product.canPublish) {\n              <span class=\"x-check-ok\">\u2713 Ready to publish</span>\n            } @else if (product.checked && product.errors?.length) {\n              <ul class=\"x-check-errors\">\n                @for (err of product.errors; track err.field) {\n                  <li>{{ err.message }}</li>\n                }\n              </ul>\n            }\n          </div>\n          <div class=\"x-catalog-col-action\">\n            <button type=\"button\" class=\"x-cat-btn\" (click)=\"edit(product)\">Edit</button>\n            <button\n              type=\"button\"\n              class=\"x-check-btn\"\n              [disabled]=\"product.checking\"\n              (click)=\"checkPublish(product)\"\n            >\n              Check\n            </button>\n          </div>\n        </div>\n      }\n      @if (!products.length) {\n        <div class=\"x-catalog-empty\">No products yet \u2014 use \"+ New product\" to add one.</div>\n      }\n    </div>\n\n    <div class=\"x-cat-pager\">\n      <button type=\"button\" class=\"x-cat-btn\" [disabled]=\"page <= 1\" (click)=\"prevPage()\">\u2190 Prev</button>\n      <span class=\"x-cat-pager-label\">Page {{ page }} \u00B7 {{ total }} total</span>\n      <button type=\"button\" class=\"x-cat-btn\" [disabled]=\"page * perPage >= total\" (click)=\"nextPage()\">\n        Next \u2192\n      </button>\n    </div>\n  }\n} @else if (draft) {\n  <div class=\"x-cat-editor\">\n    <div class=\"x-cat-editor-head\">\n      <div class=\"x-cat-editor-title\">{{ draft.id ? 'Edit product' : 'New product' }}</div>\n      <div class=\"x-cat-editor-actions\">\n        <button type=\"button\" class=\"x-cat-btn\" (click)=\"cancelEdit()\">Close</button>\n        <button type=\"button\" class=\"x-cat-btn x-cat-btn-primary\" [disabled]=\"saving\" (click)=\"saveProduct()\">\n          {{ saving ? 'Saving\u2026' : 'Save' }}\n        </button>\n      </div>\n    </div>\n\n    <section class=\"x-cat-section\">\n      <div class=\"x-cat-section-title\">Basic info</div>\n      <div class=\"x-cat-f-row\">\n        <label class=\"x-cat-f\">\n          Name\n          <input type=\"text\" [(ngModel)]=\"draft.name\" />\n        </label>\n        <label class=\"x-cat-f\">\n          Slug (optional)\n          <input type=\"text\" [(ngModel)]=\"draft.slug\" placeholder=\"auto from name if blank\" />\n        </label>\n      </div>\n      <div class=\"x-cat-f-row\">\n        <label class=\"x-cat-f\">\n          Model\n          <input type=\"text\" [(ngModel)]=\"draft.model\" />\n        </label>\n        <label class=\"x-cat-f\">\n          Type\n          <select [(ngModel)]=\"draft.type\">\n            @for (t of types; track t) { <option [value]=\"t\">{{ t }}</option> }\n          </select>\n        </label>\n        <label class=\"x-cat-f\">\n          Status\n          <select [(ngModel)]=\"draft.status\">\n            @for (s of statuses; track s) { <option [value]=\"s\">{{ s }}</option> }\n          </select>\n        </label>\n      </div>\n      @if (draft.type !== 'simple') {\n        <div class=\"x-cat-hint\">\n          \"{{ draft.type }}\" products still save through this one-variant form for now \u2014 a full\n          per-variant / per-component editor is a follow-up.\n        </div>\n      }\n      <label class=\"x-cat-f\">\n        Short description\n        <textarea rows=\"2\" [(ngModel)]=\"draft.shortDesc\"></textarea>\n      </label>\n    </section>\n\n    <section class=\"x-cat-section\">\n      <div class=\"x-cat-section-title\">Category &amp; brand</div>\n      <div class=\"x-cat-f-row\">\n        <label class=\"x-cat-f\">\n          Category\n          <select [(ngModel)]=\"draft.primaryCategoryId\" (ngModelChange)=\"onCategoryChange()\">\n            <option value=\"\">\u2014 none \u2014</option>\n            @for (c of categories; track c.id) { <option [value]=\"c.id\">{{ c.name }}</option> }\n          </select>\n        </label>\n        <label class=\"x-cat-f\">\n          Brand\n          <select [(ngModel)]=\"draft.brandId\">\n            <option value=\"\">\u2014 none \u2014</option>\n            @for (b of brands; track b.id) { <option [value]=\"b.id\">{{ b.name }}</option> }\n          </select>\n        </label>\n      </div>\n    </section>\n\n    @if (attributeDefs.length) {\n      <section class=\"x-cat-section\">\n        <div class=\"x-cat-section-title\">Attributes</div>\n        <div class=\"x-cat-attr-grid\">\n          @for (def of attributeDefs; track def.id) {\n            <label class=\"x-cat-f x-cat-attr\">\n              {{ def.label }}{{ def.unit ? ' (' + def.unit + ')' : '' }}\n              @if (def.required) {\n                <span class=\"x-cat-required\">*</span>\n              }\n              @switch (def.dataType) {\n                @case ('boolean') {\n                  <input type=\"checkbox\" [(ngModel)]=\"attributeValues[def.id].valueBool\" />\n                }\n                @case ('enum') {\n                  <select [(ngModel)]=\"attributeValues[def.id].valueText\">\n                    <option value=\"\">\u2014 choose \u2014</option>\n                    @for (opt of def.allowedValues; track opt) { <option [value]=\"opt\">{{ opt }}</option> }\n                  </select>\n                }\n                @case ('range') {\n                  <div class=\"x-cat-range\">\n                    <input type=\"number\" placeholder=\"min\" [(ngModel)]=\"attributeValues[def.id].valueNumber\" />\n                    <span>\u2013</span>\n                    <input\n                      type=\"number\"\n                      placeholder=\"max\"\n                      [(ngModel)]=\"attributeValues[def.id].valueNumberHigh\"\n                    />\n                  </div>\n                }\n                @case ('number') {\n                  <input type=\"number\" [(ngModel)]=\"attributeValues[def.id].valueNumber\" />\n                }\n                @default {\n                  <input type=\"text\" [(ngModel)]=\"attributeValues[def.id].valueText\" />\n                }\n              }\n            </label>\n          }\n        </div>\n      </section>\n    }\n\n    <section class=\"x-cat-section\">\n      <div class=\"x-cat-section-title\">Variant, price &amp; stock</div>\n      @if (variant) {\n        <div class=\"x-cat-f-row\">\n          <label class=\"x-cat-f\">\n            SKU\n            <input type=\"text\" [(ngModel)]=\"variant.sku\" />\n          </label>\n          <label class=\"x-cat-f\">\n            Weight (kg)\n            <input type=\"number\" [(ngModel)]=\"variant.weight\" />\n          </label>\n          <label class=\"x-cat-f\">\n            Handling class\n            <select [(ngModel)]=\"variant.handlingClass\">\n              <option value=\"standard\">standard</option>\n              <option value=\"bulky\">bulky</option>\n              <option value=\"freight\">freight</option>\n              <option value=\"hazmat\">hazmat</option>\n            </select>\n          </label>\n        </div>\n      }\n      <div class=\"x-cat-f-row\">\n        <label class=\"x-cat-f\">\n          Price (\u20A6)\n          <input type=\"number\" [(ngModel)]=\"price!.amount\" [disabled]=\"!variant?.sku\" />\n        </label>\n        <label class=\"x-cat-f\">\n          Stock location\n          <select [(ngModel)]=\"stock!.locationId\" [disabled]=\"!variant?.sku\">\n            @for (loc of stockLocations; track loc.id) { <option [value]=\"loc.id\">{{ loc.name }}</option> }\n          </select>\n        </label>\n        <label class=\"x-cat-f\">\n          Available\n          <input type=\"number\" [(ngModel)]=\"stock!.available\" [disabled]=\"!variant?.sku\" />\n        </label>\n      </div>\n      @if (!variant?.sku) {\n        <div class=\"x-cat-hint\">Enter a SKU above, then price/stock can be saved.</div>\n      }\n    </section>\n\n    <section class=\"x-cat-section\">\n      <div class=\"x-cat-section-title\">Media</div>\n      @if (!draft.id) {\n        <div class=\"x-cat-hint\">Save the product once first \u2014 media needs a real product to attach to.</div>\n      } @else {\n        <div class=\"x-cat-media-grid\">\n          @for (m of media; track m.id) {\n            <div class=\"x-cat-media-item\">\n              <img [src]=\"m.objectUrl\" [alt]=\"m.altText\" />\n              <button type=\"button\" class=\"x-cat-media-remove\" (click)=\"removeMedia(m)\">Remove</button>\n            </div>\n          }\n        </div>\n        <label class=\"x-cat-btn x-cat-upload\">\n          {{ uploadingMedia ? 'Uploading\u2026' : '+ Add image' }}\n          <input type=\"file\" accept=\"image/*\" hidden [disabled]=\"uploadingMedia\" (change)=\"onMediaSelected($event)\" />\n        </label>\n        <div class=\"x-cat-hint\">\n          Best results: <strong>1200 \u00D7 1200 px</strong> or larger, square (4:3 also works), product centred on a\n          plain white/light background, JPG or WebP, under 8 MB. The first image is the listing thumbnail \u2014\n          use a clean front-on shot; add the rating plate, ports/back and box contents as extra images.\n          The site downsizes photos for phones automatically, so upload the sharp original.\n        </div>\n      }\n    </section>\n  </div>\n}\n", styles: [".x-page-head{margin-bottom:20px}.x-page-title{font-size:24px;font-weight:800;color:var(--color-text)}.x-page-subtitle{font-size:13.5px;color:var(--color-text-muted);margin-top:2px}.x-cat-toolbar{display:flex;align-items:center;gap:8px;margin-bottom:14px}.x-cat-search{border:1px solid var(--color-border);border-radius:var(--radius-md);padding:6px 10px;font-size:13px;background:var(--color-surface);color:var(--color-text);min-width:220px}.x-cat-spacer{flex:1}.x-cat-btn{border:1px solid var(--color-border);background:transparent;border-radius:var(--radius-md);padding:6px 14px;font-size:12.5px;font-weight:700;cursor:pointer;color:var(--color-text-muted);display:inline-flex;align-items:center}.x-cat-btn:disabled{opacity:.5;cursor:default}.x-cat-btn-primary{border-color:var(--color-accent);color:var(--color-accent-hover)}.x-catalog-table{display:flex;flex-direction:column;border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden}.x-catalog-row{display:grid;grid-template-columns:2fr 100px 120px 2fr 160px;gap:10px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--color-border);font-size:13px}.x-catalog-row:last-child{border-bottom:none}.x-catalog-head{font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.02em;color:var(--color-text-muted);background:var(--color-surface-alt, rgba(0, 0, 0, .02))}.x-catalog-model{display:block;font-size:11.5px;color:var(--color-text-muted)}.x-catalog-col-action{display:flex;gap:6px;justify-content:flex-end}.x-catalog-empty{padding:24px;text-align:center;color:var(--color-text-muted);font-size:13px}.x-status-badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700;border:1px solid var(--color-border);text-transform:capitalize}.x-check-pending{color:var(--color-text-muted);font-size:12px}.x-check-ok{color:var(--color-success, #2a7a3b);font-size:12px;font-weight:700}.x-check-errors{margin:0;padding-left:16px;font-size:11.5px;color:var(--color-danger, #c0362c)}.x-check-btn{border:1px solid var(--color-border);background:transparent;border-radius:var(--radius-md);padding:4px 10px;font-size:11.5px;font-weight:700;cursor:pointer;color:var(--color-text-muted)}.x-check-btn:disabled{opacity:.5;cursor:default}.x-cat-pager{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:12px}.x-cat-pager-label{font-size:12px;color:var(--color-text-muted)}.x-cat-editor{display:flex;flex-direction:column;gap:16px}.x-cat-editor-head{display:flex;align-items:center;justify-content:space-between}.x-cat-editor-title{font-size:18px;font-weight:800;color:var(--color-text)}.x-cat-editor-actions{display:flex;gap:8px}.x-cat-section{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:16px;display:flex;flex-direction:column;gap:10px}.x-cat-section-title{font-size:13px;font-weight:800;color:var(--color-text);text-transform:uppercase;letter-spacing:.02em}.x-cat-f{display:flex;flex-direction:column;gap:4px;flex:1;font-size:11.5px;color:var(--color-text-muted);font-weight:700}.x-cat-f input,.x-cat-f select,.x-cat-f textarea{border:1px solid var(--color-border);border-radius:var(--radius-md);padding:6px 10px;font-size:13px;background:var(--color-surface);color:var(--color-text);font-weight:400}.x-cat-f-row{display:flex;gap:10px;flex-wrap:wrap}.x-cat-hint{font-size:12px;color:var(--color-text-muted);font-style:italic}.x-cat-required{color:var(--color-danger, #c0362c)}.x-cat-attr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}.x-cat-attr input[type=checkbox]{width:18px;height:18px}.x-cat-range{display:flex;align-items:center;gap:6px}.x-cat-range input{width:0;flex:1}.x-cat-media-grid{display:flex;flex-wrap:wrap;gap:12px}.x-cat-media-item{position:relative;width:100px;height:100px;border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden}.x-cat-media-item img{width:100%;height:100%;object-fit:cover;display:block}.x-cat-media-remove{position:absolute;bottom:0;left:0;right:0;border:none;background:#0009;color:#fff;font-size:10px;padding:3px 0;cursor:pointer}.x-cat-upload{align-self:flex-start;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i2.LoaderComponent, selector: "x-element-loader", inputs: ["data"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: CatalogComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'x-catalog', template: "<div class=\"x-page-head\">\n  <div class=\"x-page-title\">Catalogue</div>\n  <div class=\"x-page-subtitle\">Products, variants, attributes, media, pricing and stock.</div>\n</div>\n\n@if (!editing) {\n  <div class=\"x-cat-toolbar\">\n    <input\n      type=\"text\"\n      class=\"x-cat-search\"\n      placeholder=\"Search products\u2026\"\n      [(ngModel)]=\"query\"\n      (keyup.enter)=\"search()\"\n    />\n    <button type=\"button\" class=\"x-cat-btn\" (click)=\"search()\">Search</button>\n    <button type=\"button\" class=\"x-cat-btn\" (click)=\"refresh()\">Refresh</button>\n    <div class=\"x-cat-spacer\"></div>\n    <a class=\"x-cat-btn\" routerLink=\"/admin/bulk-upload\">Bulk upload (Excel)</a>\n    <button type=\"button\" class=\"x-cat-btn x-cat-btn-primary\" (click)=\"startCreate()\">+ New product</button>\n  </div>\n\n  @if (loading) {\n    <x-element-loader></x-element-loader>\n  } @else {\n    <div class=\"x-catalog-table\">\n      <div class=\"x-catalog-row x-catalog-head\">\n        <div class=\"x-catalog-col-name\">Product</div>\n        <div class=\"x-catalog-col-type\">Type</div>\n        <div class=\"x-catalog-col-status\">Status</div>\n        <div class=\"x-catalog-col-check\">Publish check</div>\n        <div class=\"x-catalog-col-action\"></div>\n      </div>\n      @for (product of products; track product.id) {\n        <div class=\"x-catalog-row\">\n          <div class=\"x-catalog-col-name\">\n            {{ product.name }}\n            @if (product.model) {\n              <span class=\"x-catalog-model\">{{ product.model }}</span>\n            }\n          </div>\n          <div class=\"x-catalog-col-type\">{{ product.type }}</div>\n          <div class=\"x-catalog-col-status\">\n            <span class=\"x-status-badge\" [class]=\"'x-status-' + product.status\">{{\n              product.status\n            }}</span>\n          </div>\n          <div class=\"x-catalog-col-check\">\n            @if (product.checking) {\n              <span class=\"x-check-pending\">Checking\u2026</span>\n            } @else if (product.checked && product.canPublish) {\n              <span class=\"x-check-ok\">\u2713 Ready to publish</span>\n            } @else if (product.checked && product.errors?.length) {\n              <ul class=\"x-check-errors\">\n                @for (err of product.errors; track err.field) {\n                  <li>{{ err.message }}</li>\n                }\n              </ul>\n            }\n          </div>\n          <div class=\"x-catalog-col-action\">\n            <button type=\"button\" class=\"x-cat-btn\" (click)=\"edit(product)\">Edit</button>\n            <button\n              type=\"button\"\n              class=\"x-check-btn\"\n              [disabled]=\"product.checking\"\n              (click)=\"checkPublish(product)\"\n            >\n              Check\n            </button>\n          </div>\n        </div>\n      }\n      @if (!products.length) {\n        <div class=\"x-catalog-empty\">No products yet \u2014 use \"+ New product\" to add one.</div>\n      }\n    </div>\n\n    <div class=\"x-cat-pager\">\n      <button type=\"button\" class=\"x-cat-btn\" [disabled]=\"page <= 1\" (click)=\"prevPage()\">\u2190 Prev</button>\n      <span class=\"x-cat-pager-label\">Page {{ page }} \u00B7 {{ total }} total</span>\n      <button type=\"button\" class=\"x-cat-btn\" [disabled]=\"page * perPage >= total\" (click)=\"nextPage()\">\n        Next \u2192\n      </button>\n    </div>\n  }\n} @else if (draft) {\n  <div class=\"x-cat-editor\">\n    <div class=\"x-cat-editor-head\">\n      <div class=\"x-cat-editor-title\">{{ draft.id ? 'Edit product' : 'New product' }}</div>\n      <div class=\"x-cat-editor-actions\">\n        <button type=\"button\" class=\"x-cat-btn\" (click)=\"cancelEdit()\">Close</button>\n        <button type=\"button\" class=\"x-cat-btn x-cat-btn-primary\" [disabled]=\"saving\" (click)=\"saveProduct()\">\n          {{ saving ? 'Saving\u2026' : 'Save' }}\n        </button>\n      </div>\n    </div>\n\n    <section class=\"x-cat-section\">\n      <div class=\"x-cat-section-title\">Basic info</div>\n      <div class=\"x-cat-f-row\">\n        <label class=\"x-cat-f\">\n          Name\n          <input type=\"text\" [(ngModel)]=\"draft.name\" />\n        </label>\n        <label class=\"x-cat-f\">\n          Slug (optional)\n          <input type=\"text\" [(ngModel)]=\"draft.slug\" placeholder=\"auto from name if blank\" />\n        </label>\n      </div>\n      <div class=\"x-cat-f-row\">\n        <label class=\"x-cat-f\">\n          Model\n          <input type=\"text\" [(ngModel)]=\"draft.model\" />\n        </label>\n        <label class=\"x-cat-f\">\n          Type\n          <select [(ngModel)]=\"draft.type\">\n            @for (t of types; track t) { <option [value]=\"t\">{{ t }}</option> }\n          </select>\n        </label>\n        <label class=\"x-cat-f\">\n          Status\n          <select [(ngModel)]=\"draft.status\">\n            @for (s of statuses; track s) { <option [value]=\"s\">{{ s }}</option> }\n          </select>\n        </label>\n      </div>\n      @if (draft.type !== 'simple') {\n        <div class=\"x-cat-hint\">\n          \"{{ draft.type }}\" products still save through this one-variant form for now \u2014 a full\n          per-variant / per-component editor is a follow-up.\n        </div>\n      }\n      <label class=\"x-cat-f\">\n        Short description\n        <textarea rows=\"2\" [(ngModel)]=\"draft.shortDesc\"></textarea>\n      </label>\n    </section>\n\n    <section class=\"x-cat-section\">\n      <div class=\"x-cat-section-title\">Category &amp; brand</div>\n      <div class=\"x-cat-f-row\">\n        <label class=\"x-cat-f\">\n          Category\n          <select [(ngModel)]=\"draft.primaryCategoryId\" (ngModelChange)=\"onCategoryChange()\">\n            <option value=\"\">\u2014 none \u2014</option>\n            @for (c of categories; track c.id) { <option [value]=\"c.id\">{{ c.name }}</option> }\n          </select>\n        </label>\n        <label class=\"x-cat-f\">\n          Brand\n          <select [(ngModel)]=\"draft.brandId\">\n            <option value=\"\">\u2014 none \u2014</option>\n            @for (b of brands; track b.id) { <option [value]=\"b.id\">{{ b.name }}</option> }\n          </select>\n        </label>\n      </div>\n    </section>\n\n    @if (attributeDefs.length) {\n      <section class=\"x-cat-section\">\n        <div class=\"x-cat-section-title\">Attributes</div>\n        <div class=\"x-cat-attr-grid\">\n          @for (def of attributeDefs; track def.id) {\n            <label class=\"x-cat-f x-cat-attr\">\n              {{ def.label }}{{ def.unit ? ' (' + def.unit + ')' : '' }}\n              @if (def.required) {\n                <span class=\"x-cat-required\">*</span>\n              }\n              @switch (def.dataType) {\n                @case ('boolean') {\n                  <input type=\"checkbox\" [(ngModel)]=\"attributeValues[def.id].valueBool\" />\n                }\n                @case ('enum') {\n                  <select [(ngModel)]=\"attributeValues[def.id].valueText\">\n                    <option value=\"\">\u2014 choose \u2014</option>\n                    @for (opt of def.allowedValues; track opt) { <option [value]=\"opt\">{{ opt }}</option> }\n                  </select>\n                }\n                @case ('range') {\n                  <div class=\"x-cat-range\">\n                    <input type=\"number\" placeholder=\"min\" [(ngModel)]=\"attributeValues[def.id].valueNumber\" />\n                    <span>\u2013</span>\n                    <input\n                      type=\"number\"\n                      placeholder=\"max\"\n                      [(ngModel)]=\"attributeValues[def.id].valueNumberHigh\"\n                    />\n                  </div>\n                }\n                @case ('number') {\n                  <input type=\"number\" [(ngModel)]=\"attributeValues[def.id].valueNumber\" />\n                }\n                @default {\n                  <input type=\"text\" [(ngModel)]=\"attributeValues[def.id].valueText\" />\n                }\n              }\n            </label>\n          }\n        </div>\n      </section>\n    }\n\n    <section class=\"x-cat-section\">\n      <div class=\"x-cat-section-title\">Variant, price &amp; stock</div>\n      @if (variant) {\n        <div class=\"x-cat-f-row\">\n          <label class=\"x-cat-f\">\n            SKU\n            <input type=\"text\" [(ngModel)]=\"variant.sku\" />\n          </label>\n          <label class=\"x-cat-f\">\n            Weight (kg)\n            <input type=\"number\" [(ngModel)]=\"variant.weight\" />\n          </label>\n          <label class=\"x-cat-f\">\n            Handling class\n            <select [(ngModel)]=\"variant.handlingClass\">\n              <option value=\"standard\">standard</option>\n              <option value=\"bulky\">bulky</option>\n              <option value=\"freight\">freight</option>\n              <option value=\"hazmat\">hazmat</option>\n            </select>\n          </label>\n        </div>\n      }\n      <div class=\"x-cat-f-row\">\n        <label class=\"x-cat-f\">\n          Price (\u20A6)\n          <input type=\"number\" [(ngModel)]=\"price!.amount\" [disabled]=\"!variant?.sku\" />\n        </label>\n        <label class=\"x-cat-f\">\n          Stock location\n          <select [(ngModel)]=\"stock!.locationId\" [disabled]=\"!variant?.sku\">\n            @for (loc of stockLocations; track loc.id) { <option [value]=\"loc.id\">{{ loc.name }}</option> }\n          </select>\n        </label>\n        <label class=\"x-cat-f\">\n          Available\n          <input type=\"number\" [(ngModel)]=\"stock!.available\" [disabled]=\"!variant?.sku\" />\n        </label>\n      </div>\n      @if (!variant?.sku) {\n        <div class=\"x-cat-hint\">Enter a SKU above, then price/stock can be saved.</div>\n      }\n    </section>\n\n    <section class=\"x-cat-section\">\n      <div class=\"x-cat-section-title\">Media</div>\n      @if (!draft.id) {\n        <div class=\"x-cat-hint\">Save the product once first \u2014 media needs a real product to attach to.</div>\n      } @else {\n        <div class=\"x-cat-media-grid\">\n          @for (m of media; track m.id) {\n            <div class=\"x-cat-media-item\">\n              <img [src]=\"m.objectUrl\" [alt]=\"m.altText\" />\n              <button type=\"button\" class=\"x-cat-media-remove\" (click)=\"removeMedia(m)\">Remove</button>\n            </div>\n          }\n        </div>\n        <label class=\"x-cat-btn x-cat-upload\">\n          {{ uploadingMedia ? 'Uploading\u2026' : '+ Add image' }}\n          <input type=\"file\" accept=\"image/*\" hidden [disabled]=\"uploadingMedia\" (change)=\"onMediaSelected($event)\" />\n        </label>\n        <div class=\"x-cat-hint\">\n          Best results: <strong>1200 \u00D7 1200 px</strong> or larger, square (4:3 also works), product centred on a\n          plain white/light background, JPG or WebP, under 8 MB. The first image is the listing thumbnail \u2014\n          use a clean front-on shot; add the rating plate, ports/back and box contents as extra images.\n          The site downsizes photos for phones automatically, so upload the sharp original.\n        </div>\n      }\n    </section>\n  </div>\n}\n", styles: [".x-page-head{margin-bottom:20px}.x-page-title{font-size:24px;font-weight:800;color:var(--color-text)}.x-page-subtitle{font-size:13.5px;color:var(--color-text-muted);margin-top:2px}.x-cat-toolbar{display:flex;align-items:center;gap:8px;margin-bottom:14px}.x-cat-search{border:1px solid var(--color-border);border-radius:var(--radius-md);padding:6px 10px;font-size:13px;background:var(--color-surface);color:var(--color-text);min-width:220px}.x-cat-spacer{flex:1}.x-cat-btn{border:1px solid var(--color-border);background:transparent;border-radius:var(--radius-md);padding:6px 14px;font-size:12.5px;font-weight:700;cursor:pointer;color:var(--color-text-muted);display:inline-flex;align-items:center}.x-cat-btn:disabled{opacity:.5;cursor:default}.x-cat-btn-primary{border-color:var(--color-accent);color:var(--color-accent-hover)}.x-catalog-table{display:flex;flex-direction:column;border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden}.x-catalog-row{display:grid;grid-template-columns:2fr 100px 120px 2fr 160px;gap:10px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--color-border);font-size:13px}.x-catalog-row:last-child{border-bottom:none}.x-catalog-head{font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.02em;color:var(--color-text-muted);background:var(--color-surface-alt, rgba(0, 0, 0, .02))}.x-catalog-model{display:block;font-size:11.5px;color:var(--color-text-muted)}.x-catalog-col-action{display:flex;gap:6px;justify-content:flex-end}.x-catalog-empty{padding:24px;text-align:center;color:var(--color-text-muted);font-size:13px}.x-status-badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700;border:1px solid var(--color-border);text-transform:capitalize}.x-check-pending{color:var(--color-text-muted);font-size:12px}.x-check-ok{color:var(--color-success, #2a7a3b);font-size:12px;font-weight:700}.x-check-errors{margin:0;padding-left:16px;font-size:11.5px;color:var(--color-danger, #c0362c)}.x-check-btn{border:1px solid var(--color-border);background:transparent;border-radius:var(--radius-md);padding:4px 10px;font-size:11.5px;font-weight:700;cursor:pointer;color:var(--color-text-muted)}.x-check-btn:disabled{opacity:.5;cursor:default}.x-cat-pager{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:12px}.x-cat-pager-label{font-size:12px;color:var(--color-text-muted)}.x-cat-editor{display:flex;flex-direction:column;gap:16px}.x-cat-editor-head{display:flex;align-items:center;justify-content:space-between}.x-cat-editor-title{font-size:18px;font-weight:800;color:var(--color-text)}.x-cat-editor-actions{display:flex;gap:8px}.x-cat-section{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:16px;display:flex;flex-direction:column;gap:10px}.x-cat-section-title{font-size:13px;font-weight:800;color:var(--color-text);text-transform:uppercase;letter-spacing:.02em}.x-cat-f{display:flex;flex-direction:column;gap:4px;flex:1;font-size:11.5px;color:var(--color-text-muted);font-weight:700}.x-cat-f input,.x-cat-f select,.x-cat-f textarea{border:1px solid var(--color-border);border-radius:var(--radius-md);padding:6px 10px;font-size:13px;background:var(--color-surface);color:var(--color-text);font-weight:400}.x-cat-f-row{display:flex;gap:10px;flex-wrap:wrap}.x-cat-hint{font-size:12px;color:var(--color-text-muted);font-style:italic}.x-cat-required{color:var(--color-danger, #c0362c)}.x-cat-attr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}.x-cat-attr input[type=checkbox]{width:18px;height:18px}.x-cat-range{display:flex;align-items:center;gap:6px}.x-cat-range input{width:0;flex:1}.x-cat-media-grid{display:flex;flex-wrap:wrap;gap:12px}.x-cat-media-item{position:relative;width:100px;height:100px;border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden}.x-cat-media-item img{width:100%;height:100%;object-fit:cover;display:block}.x-cat-media-remove{position:absolute;bottom:0;left:0;right:0;border:none;background:#0009;color:#fff;font-size:10px;padding:3px 0;cursor:pointer}.x-cat-upload{align-self:flex-start;cursor:pointer}\n"] }]
+        }] });
+
+class CatalogModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: CatalogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.16", ngImport: i0, type: CatalogModule, declarations: [CatalogComponent], imports: [SharedModule,
+            ElementsModule,
+            WebgetsModule, i1$1.RouterModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: CatalogModule, imports: [SharedModule,
+            ElementsModule,
+            WebgetsModule,
+            RouterModule.forChild([{ path: '', component: CatalogComponent }])] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: CatalogModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [CatalogComponent],
+                    imports: [
+                        SharedModule,
+                        ElementsModule,
+                        WebgetsModule,
+                        RouterModule.forChild([{ path: '', component: CatalogComponent }]),
+                    ],
+                }]
+        }] });
+
+export { CatalogModule };
+//# sourceMappingURL=isaiahiroko-tilmart-ngx-apps-admin-catalog.module-BwjfFXDU.mjs.map