@weaver-apps/service-desk 0.0.0-stage → 0.1.2

package/fesm2022/weaver-apps-service-desk.mjs

@@ -0,0 +1,773 @@
+import * as i0 from "@angular/core";
+import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, DestroyRef, InjectionToken, computed, effect, inject, input, output, resource, signal } from "@angular/core";
+import { TranslocoPipe, TranslocoService } from "@jsverse/transloco";
+import { toSignal } from "@angular/core/rxjs-interop";
+import { ActivatedRoute } from "@angular/router";
+import { map } from "rxjs";
+import { DialogRef } from "@loomweaver/plugin-sdk";
+var ServiceDeskGatewayError = class extends Error {
+	status;
+	constructor(status) {
+		super(`The service desk answered ${status}.`);
+		this.status = status;
+	}
+};
+const SERVICE_DESK_GATEWAY = new InjectionToken("weaver-apps.service-desk.gateway");
+function provideServiceDeskGateway(gateway) {
+	return {
+		provide: SERVICE_DESK_GATEWAY,
+		useValue: gateway
+	};
+}
+var ServiceDeskHost = class {
+	ctx;
+	bind(ctx) {
+		this.ctx = ctx;
+	}
+	unbind() {
+		this.ctx = void 0;
+	}
+	get ui() {
+		if (!this.ctx) throw new Error("The service-desk plugin is not active.");
+		return this.ctx.ui;
+	}
+	navigate(path) {
+		this.ctx?.navigateContent(path);
+	}
+};
+const serviceDeskHost = new ServiceDeskHost();
+const deskListPath = "service-desk";
+function deskPath(deskId) {
+	return `${deskListPath}/${deskId}`;
+}
+var DeskListPage = class DeskListPage {
+	gateway = inject(SERVICE_DESK_GATEWAY);
+	desks = resource({
+		...ngDevMode ? { debugName: "desks" } : /* istanbul ignore next */ {},
+		loader: () => this.gateway.desks()
+	});
+	open(deskId) {
+		serviceDeskHost.navigate(deskPath(deskId));
+	}
+	async create() {
+		const name = await serviceDeskHost.ui.prompt({
+			title: "service-desk.desks.create",
+			message: "service-desk.desks.createMessage",
+			confirmLabel: "service-desk.desks.createConfirm"
+		});
+		if (!name?.trim()) return;
+		try {
+			const desk = await this.gateway.saveDesk(crypto.randomUUID(), name.trim());
+			this.open(desk.id);
+		} catch {
+			serviceDeskHost.ui.toast({
+				message: "service-desk.errors.create",
+				kind: "error"
+			});
+		}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: DeskListPage,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: DeskListPage,
+		isStandalone: true,
+		selector: "wa-desk-list-page",
+		ngImport: i0,
+		template: "<div class=\"flex h-full flex-col gap-4 overflow-auto p-6\">\n  <div class=\"flex items-center justify-between gap-4\">\n    <h2 class=\"text-lg font-semibold text-content\">{{ 'service-desk.desks.title' | transloco }}</h2>\n    <button type=\"button\" class=\"lw-btn lw-btn--primary\" (click)=\"create()\">{{ 'service-desk.desks.create' | transloco }}</button>\n  </div>\n  @if (desks.error()) {\n    <p class=\"text-sm text-negative\" role=\"alert\">{{ 'service-desk.errors.load' | transloco }}</p>\n  } @else if (desks.hasValue()) {\n    <ul role=\"list\" class=\"divide-y divide-border rounded-xl border border-border bg-surface\">\n      @for (desk of desks.value(); track desk.id) {\n        <li>\n          <button type=\"button\" class=\"flex w-full items-center gap-3 px-4 py-3 text-left text-sm text-content hover:bg-surface-overlay\" (click)=\"open(desk.id)\">\n            <lw-icon name=\"serviceDesk\" size=\"1.25rem\"></lw-icon>\n            <span>{{ desk.name }}</span>\n          </button>\n        </li>\n      } @empty {\n        <li class=\"px-4 py-8 text-center text-sm text-content-faint\">{{ 'service-desk.desks.empty' | transloco }}</li>\n      }\n    </ul>\n  }\n</div>\n",
+		dependencies: [{
+			kind: "pipe",
+			type: TranslocoPipe,
+			name: "transloco"
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: DeskListPage,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "wa-desk-list-page",
+			imports: [TranslocoPipe],
+			schemas: [CUSTOM_ELEMENTS_SCHEMA],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<div class=\"flex h-full flex-col gap-4 overflow-auto p-6\">\n  <div class=\"flex items-center justify-between gap-4\">\n    <h2 class=\"text-lg font-semibold text-content\">{{ 'service-desk.desks.title' | transloco }}</h2>\n    <button type=\"button\" class=\"lw-btn lw-btn--primary\" (click)=\"create()\">{{ 'service-desk.desks.create' | transloco }}</button>\n  </div>\n  @if (desks.error()) {\n    <p class=\"text-sm text-negative\" role=\"alert\">{{ 'service-desk.errors.load' | transloco }}</p>\n  } @else if (desks.hasValue()) {\n    <ul role=\"list\" class=\"divide-y divide-border rounded-xl border border-border bg-surface\">\n      @for (desk of desks.value(); track desk.id) {\n        <li>\n          <button type=\"button\" class=\"flex w-full items-center gap-3 px-4 py-3 text-left text-sm text-content hover:bg-surface-overlay\" (click)=\"open(desk.id)\">\n            <lw-icon name=\"serviceDesk\" size=\"1.25rem\"></lw-icon>\n            <span>{{ desk.name }}</span>\n          </button>\n        </li>\n      } @empty {\n        <li class=\"px-4 py-8 text-center text-sm text-content-faint\">{{ 'service-desk.desks.empty' | transloco }}</li>\n      }\n    </ul>\n  }\n</div>\n"
+		}]
+	}]
+});
+function activeLocale() {
+	const transloco = inject(TranslocoService);
+	return toSignal(transloco.langChanges$, { initialValue: transloco.getActiveLang() });
+}
+const ServiceRequestOrigin = {
+	manual: "manual",
+	voiceChat: "voiceChat",
+	textChat: "textChat",
+	widget: "widget",
+	email: "email",
+	phone: "phone"
+};
+const ServiceRequestPriority = {
+	low: "low",
+	normal: "normal",
+	high: "high",
+	urgent: "urgent"
+};
+const ServiceRequestStatus = {
+	open: "open",
+	inProgress: "inProgress",
+	completed: "completed",
+	cancelled: "cancelled"
+};
+const ServiceRequestType = {
+	inquiry: "inquiry",
+	task: "task",
+	callbackRequest: "callbackRequest",
+	conversationSummary: "conversationSummary",
+	complaint: "complaint",
+	quote: "quote"
+};
+const requestTypes = Object.values(ServiceRequestType);
+const requestPriorities = Object.values(ServiceRequestPriority);
+const requestOrigins = Object.values(ServiceRequestOrigin);
+const settableStatuses = [ServiceRequestStatus.open, ServiceRequestStatus.inProgress];
+const statusFilters = [
+	"active",
+	"open",
+	"inProgress",
+	"completed",
+	"cancelled",
+	"all"
+];
+function isClosed(status) {
+	return status === ServiceRequestStatus.completed || status === ServiceRequestStatus.cancelled;
+}
+function localDate(value) {
+	const pad = (part) => `${part}`.padStart(2, "0");
+	return `${value.getFullYear()}-${pad(value.getMonth() + 1)}-${pad(value.getDate())}`;
+}
+function pick(choices, value) {
+	return choices.find((choice) => choice === value);
+}
+var RequestDialog = class RequestDialog {
+	dialog = inject(DialogRef);
+	gateway = inject(SERVICE_DESK_GATEWAY);
+	data = this.dialog.data;
+	existing = this.data.request;
+	editing = this.existing !== null;
+	closed = this.existing !== null && isClosed(this.existing.status);
+	types = requestTypes;
+	priorities = requestPriorities;
+	origins = requestOrigins;
+	statuses = settableStatuses;
+	title = signal(this.existing?.title ?? "", ...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
+	type = signal(this.existing?.type ?? ServiceRequestType.inquiry, ...ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []);
+	priority = signal(this.existing?.priority ?? ServiceRequestPriority.normal, ...ngDevMode ? [{ debugName: "priority" }] : /* istanbul ignore next */ []);
+	origin = signal(this.existing?.origin ?? ServiceRequestOrigin.manual, ...ngDevMode ? [{ debugName: "origin" }] : /* istanbul ignore next */ []);
+	status = signal(this.existing?.status ?? "open", ...ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []);
+	contactName = signal(this.existing?.contactName ?? "", ...ngDevMode ? [{ debugName: "contactName" }] : /* istanbul ignore next */ []);
+	contactPhone = signal(this.existing?.contactPhone ?? "", ...ngDevMode ? [{ debugName: "contactPhone" }] : /* istanbul ignore next */ []);
+	contactEmail = signal(this.existing?.contactEmail ?? "", ...ngDevMode ? [{ debugName: "contactEmail" }] : /* istanbul ignore next */ []);
+	assignee = signal(this.existing?.assignee ?? "", ...ngDevMode ? [{ debugName: "assignee" }] : /* istanbul ignore next */ []);
+	dueDate = signal(this.existing?.dueAt ? localDate(new Date(this.existing.dueAt)) : "", ...ngDevMode ? [{ debugName: "dueDate" }] : /* istanbul ignore next */ []);
+	description = signal(this.existing?.description ?? "", ...ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []);
+	cancellationReason = this.existing?.cancellationReason ?? null;
+	saving = signal(false, ...ngDevMode ? [{ debugName: "saving" }] : /* istanbul ignore next */ []);
+	problem = signal("", ...ngDevMode ? [{ debugName: "problem" }] : /* istanbul ignore next */ []);
+	persisted = false;
+	bind(target, event) {
+		target.set(event.target.value);
+	}
+	chooseType(event) {
+		this.choose(this.type, requestTypes, event);
+	}
+	choosePriority(event) {
+		this.choose(this.priority, requestPriorities, event);
+	}
+	chooseOrigin(event) {
+		this.choose(this.origin, requestOrigins, event);
+	}
+	chooseStatus(event) {
+		this.choose(this.status, settableStatuses, event);
+	}
+	close() {
+		this.dialog.close(this.persisted);
+	}
+	async save() {
+		if (!this.title().trim()) {
+			this.problem.set("service-desk.dialog.titleRequired");
+			return;
+		}
+		this.saving.set(true);
+		try {
+			const changes = this.changes();
+			const outcome = this.existing ? await this.gateway.edit(this.data.deskId, this.existing.id, changes) : await this.gateway.raise(this.data.deskId, {
+				...changes,
+				origin: this.origin()
+			});
+			this.settle(await this.applyStatus(outcome));
+		} catch {
+			this.problem.set("service-desk.errors.save");
+		} finally {
+			this.saving.set(false);
+		}
+	}
+	changes() {
+		const keptDue = this.existing?.dueAt && localDate(new Date(this.existing.dueAt)) === this.dueDate() ? this.existing.dueAt : null;
+		if (keptDue) return {
+			...this.fields(),
+			dueAt: keptDue
+		};
+		const due = this.dueDate() ? /* @__PURE__ */ new Date(`${this.dueDate()}T12:00`) : null;
+		return {
+			...this.fields(),
+			dueAt: due && !Number.isNaN(due.getTime()) ? due.toISOString() : null
+		};
+	}
+	fields() {
+		return {
+			title: this.title().trim(),
+			description: this.optional(this.description()),
+			type: this.type(),
+			priority: this.priority(),
+			contactName: this.optional(this.contactName()),
+			contactPhone: this.optional(this.contactPhone()),
+			contactEmail: this.optional(this.contactEmail()),
+			assignee: this.optional(this.assignee())
+		};
+	}
+	async applyStatus(outcome) {
+		if (outcome.kind === "saved") {
+			this.existing = outcome.request;
+			this.persisted = true;
+		}
+		if (outcome.kind !== "saved" || outcome.request.status === this.status()) return outcome;
+		return this.gateway.setStatus(this.data.deskId, outcome.request.id, this.status());
+	}
+	settle(outcome) {
+		const messages = {
+			closed: "service-desk.dialog.closed",
+			changed: "service-desk.dialog.changed",
+			invalid: "service-desk.dialog.invalid",
+			missing: "service-desk.dialog.missing"
+		};
+		if (outcome.kind === "saved") {
+			this.dialog.close(true);
+			return;
+		}
+		this.problem.set(messages[outcome.kind]);
+	}
+	choose(target, choices, event) {
+		const chosen = pick(choices, event.target.value);
+		if (chosen) target.set(chosen);
+	}
+	optional(value) {
+		return value.trim() ? value.trim() : null;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: RequestDialog,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: RequestDialog,
+		isStandalone: true,
+		selector: "wa-request-dialog",
+		ngImport: i0,
+		template: "<form class=\"flex flex-col gap-4\" (submit)=\"$event.preventDefault(); save()\">\n  @if (closed) {\n    <p class=\"text-sm text-content-faint\" role=\"status\">\n      {{ 'service-desk.dialog.closedNote' | transloco }}\n      @if (cancellationReason) {\n        {{ 'service-desk.dialog.reason' | transloco: { reason: cancellationReason } }}\n      }\n    </p>\n  }\n\n  <label class=\"flex flex-col gap-1 text-sm text-content\">\n    {{ 'service-desk.fields.title' | transloco }}\n    <input class=\"lw-field\" required [disabled]=\"closed\" [value]=\"title()\" (input)=\"bind(title, $event)\" />\n  </label>\n\n  <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-3\">\n    <label class=\"flex flex-col gap-1 text-sm text-content\">\n      {{ 'service-desk.fields.type' | transloco }}\n      <select class=\"lw-field\" [disabled]=\"closed\" (change)=\"chooseType($event)\">\n        @for (choice of types; track choice) {\n          <option [value]=\"choice\" [selected]=\"choice === type()\">{{ 'service-desk.type.' + choice | transloco }}</option>\n        }\n      </select>\n    </label>\n    <label class=\"flex flex-col gap-1 text-sm text-content\">\n      {{ 'service-desk.fields.priority' | transloco }}\n      <select class=\"lw-field\" [disabled]=\"closed\" (change)=\"choosePriority($event)\">\n        @for (choice of priorities; track choice) {\n          <option [value]=\"choice\" [selected]=\"choice === priority()\">{{ 'service-desk.priority.' + choice | transloco }}</option>\n        }\n      </select>\n    </label>\n    @if (editing) {\n      <label class=\"flex flex-col gap-1 text-sm text-content\">\n        {{ 'service-desk.fields.status' | transloco }}\n        <select class=\"lw-field\" [disabled]=\"closed\" (change)=\"chooseStatus($event)\">\n          @if (closed) {\n            <option selected>{{ 'service-desk.status.' + status() | transloco }}</option>\n          } @else {\n            @for (choice of statuses; track choice) {\n              <option [value]=\"choice\" [selected]=\"choice === status()\">{{ 'service-desk.status.' + choice | transloco }}</option>\n            }\n          }\n        </select>\n      </label>\n    } @else {\n      <label class=\"flex flex-col gap-1 text-sm text-content\">\n        {{ 'service-desk.fields.origin' | transloco }}\n        <select class=\"lw-field\" (change)=\"chooseOrigin($event)\">\n          @for (choice of origins; track choice) {\n            <option [value]=\"choice\" [selected]=\"choice === origin()\">{{ 'service-desk.origin.' + choice | transloco }}</option>\n          }\n        </select>\n      </label>\n    }\n  </div>\n\n  <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-3\">\n    <label class=\"flex flex-col gap-1 text-sm text-content\">\n      {{ 'service-desk.fields.contactName' | transloco }}\n      <input class=\"lw-field\" [disabled]=\"closed\" [value]=\"contactName()\" (input)=\"bind(contactName, $event)\" />\n    </label>\n    <label class=\"flex flex-col gap-1 text-sm text-content\">\n      {{ 'service-desk.fields.contactPhone' | transloco }}\n      <input class=\"lw-field\" type=\"tel\" [disabled]=\"closed\" [value]=\"contactPhone()\" (input)=\"bind(contactPhone, $event)\" />\n    </label>\n    <label class=\"flex flex-col gap-1 text-sm text-content\">\n      {{ 'service-desk.fields.contactEmail' | transloco }}\n      <input class=\"lw-field\" type=\"email\" [disabled]=\"closed\" [value]=\"contactEmail()\" (input)=\"bind(contactEmail, $event)\" />\n    </label>\n  </div>\n\n  <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-2\">\n    <label class=\"flex flex-col gap-1 text-sm text-content\">\n      {{ 'service-desk.fields.assignee' | transloco }}\n      <input class=\"lw-field\" [disabled]=\"closed\" [value]=\"assignee()\" (input)=\"bind(assignee, $event)\" />\n    </label>\n    <label class=\"flex flex-col gap-1 text-sm text-content\">\n      {{ 'service-desk.fields.due' | transloco }}\n      <input class=\"lw-field\" type=\"date\" [disabled]=\"closed\" [value]=\"dueDate()\" (input)=\"bind(dueDate, $event)\" />\n    </label>\n  </div>\n\n  <label class=\"flex flex-col gap-1 text-sm text-content\">\n    {{ 'service-desk.fields.description' | transloco }}\n    <textarea class=\"lw-field\" rows=\"3\" [disabled]=\"closed\" [value]=\"description()\" (input)=\"bind(description, $event)\"></textarea>\n  </label>\n\n  @if (problem()) {\n    <p class=\"text-sm text-negative\" role=\"alert\">{{ problem() | transloco }}</p>\n  }\n\n  <div class=\"flex justify-end gap-2\">\n    <button type=\"button\" class=\"lw-btn lw-btn--default\" (click)=\"close()\">{{ (closed ? 'service-desk.dialog.close' : 'service-desk.dialog.cancel') | transloco }}</button>\n    @if (!closed) {\n      <button type=\"submit\" class=\"lw-btn lw-btn--primary\" [disabled]=\"saving()\">{{ 'service-desk.dialog.save' | transloco }}</button>\n    }\n  </div>\n</form>\n",
+		dependencies: [{
+			kind: "pipe",
+			type: TranslocoPipe,
+			name: "transloco"
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: RequestDialog,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "wa-request-dialog",
+			imports: [TranslocoPipe],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<form class=\"flex flex-col gap-4\" (submit)=\"$event.preventDefault(); save()\">\n  @if (closed) {\n    <p class=\"text-sm text-content-faint\" role=\"status\">\n      {{ 'service-desk.dialog.closedNote' | transloco }}\n      @if (cancellationReason) {\n        {{ 'service-desk.dialog.reason' | transloco: { reason: cancellationReason } }}\n      }\n    </p>\n  }\n\n  <label class=\"flex flex-col gap-1 text-sm text-content\">\n    {{ 'service-desk.fields.title' | transloco }}\n    <input class=\"lw-field\" required [disabled]=\"closed\" [value]=\"title()\" (input)=\"bind(title, $event)\" />\n  </label>\n\n  <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-3\">\n    <label class=\"flex flex-col gap-1 text-sm text-content\">\n      {{ 'service-desk.fields.type' | transloco }}\n      <select class=\"lw-field\" [disabled]=\"closed\" (change)=\"chooseType($event)\">\n        @for (choice of types; track choice) {\n          <option [value]=\"choice\" [selected]=\"choice === type()\">{{ 'service-desk.type.' + choice | transloco }}</option>\n        }\n      </select>\n    </label>\n    <label class=\"flex flex-col gap-1 text-sm text-content\">\n      {{ 'service-desk.fields.priority' | transloco }}\n      <select class=\"lw-field\" [disabled]=\"closed\" (change)=\"choosePriority($event)\">\n        @for (choice of priorities; track choice) {\n          <option [value]=\"choice\" [selected]=\"choice === priority()\">{{ 'service-desk.priority.' + choice | transloco }}</option>\n        }\n      </select>\n    </label>\n    @if (editing) {\n      <label class=\"flex flex-col gap-1 text-sm text-content\">\n        {{ 'service-desk.fields.status' | transloco }}\n        <select class=\"lw-field\" [disabled]=\"closed\" (change)=\"chooseStatus($event)\">\n          @if (closed) {\n            <option selected>{{ 'service-desk.status.' + status() | transloco }}</option>\n          } @else {\n            @for (choice of statuses; track choice) {\n              <option [value]=\"choice\" [selected]=\"choice === status()\">{{ 'service-desk.status.' + choice | transloco }}</option>\n            }\n          }\n        </select>\n      </label>\n    } @else {\n      <label class=\"flex flex-col gap-1 text-sm text-content\">\n        {{ 'service-desk.fields.origin' | transloco }}\n        <select class=\"lw-field\" (change)=\"chooseOrigin($event)\">\n          @for (choice of origins; track choice) {\n            <option [value]=\"choice\" [selected]=\"choice === origin()\">{{ 'service-desk.origin.' + choice | transloco }}</option>\n          }\n        </select>\n      </label>\n    }\n  </div>\n\n  <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-3\">\n    <label class=\"flex flex-col gap-1 text-sm text-content\">\n      {{ 'service-desk.fields.contactName' | transloco }}\n      <input class=\"lw-field\" [disabled]=\"closed\" [value]=\"contactName()\" (input)=\"bind(contactName, $event)\" />\n    </label>\n    <label class=\"flex flex-col gap-1 text-sm text-content\">\n      {{ 'service-desk.fields.contactPhone' | transloco }}\n      <input class=\"lw-field\" type=\"tel\" [disabled]=\"closed\" [value]=\"contactPhone()\" (input)=\"bind(contactPhone, $event)\" />\n    </label>\n    <label class=\"flex flex-col gap-1 text-sm text-content\">\n      {{ 'service-desk.fields.contactEmail' | transloco }}\n      <input class=\"lw-field\" type=\"email\" [disabled]=\"closed\" [value]=\"contactEmail()\" (input)=\"bind(contactEmail, $event)\" />\n    </label>\n  </div>\n\n  <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-2\">\n    <label class=\"flex flex-col gap-1 text-sm text-content\">\n      {{ 'service-desk.fields.assignee' | transloco }}\n      <input class=\"lw-field\" [disabled]=\"closed\" [value]=\"assignee()\" (input)=\"bind(assignee, $event)\" />\n    </label>\n    <label class=\"flex flex-col gap-1 text-sm text-content\">\n      {{ 'service-desk.fields.due' | transloco }}\n      <input class=\"lw-field\" type=\"date\" [disabled]=\"closed\" [value]=\"dueDate()\" (input)=\"bind(dueDate, $event)\" />\n    </label>\n  </div>\n\n  <label class=\"flex flex-col gap-1 text-sm text-content\">\n    {{ 'service-desk.fields.description' | transloco }}\n    <textarea class=\"lw-field\" rows=\"3\" [disabled]=\"closed\" [value]=\"description()\" (input)=\"bind(description, $event)\"></textarea>\n  </label>\n\n  @if (problem()) {\n    <p class=\"text-sm text-negative\" role=\"alert\">{{ problem() | transloco }}</p>\n  }\n\n  <div class=\"flex justify-end gap-2\">\n    <button type=\"button\" class=\"lw-btn lw-btn--default\" (click)=\"close()\">{{ (closed ? 'service-desk.dialog.close' : 'service-desk.dialog.cancel') | transloco }}</button>\n    @if (!closed) {\n      <button type=\"submit\" class=\"lw-btn lw-btn--primary\" [disabled]=\"saving()\">{{ 'service-desk.dialog.save' | transloco }}</button>\n    }\n  </div>\n</form>\n"
+		}]
+	}]
+});
+var RequestTable = class RequestTable {
+	requests = input.required(...ngDevMode ? [{ debugName: "requests" }] : /* istanbul ignore next */ []);
+	locale = input.required(...ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []);
+	requestActions = output();
+	rows = computed(() => {
+		const date = new Intl.DateTimeFormat(this.locale(), {
+			day: "2-digit",
+			month: "2-digit",
+			year: "numeric"
+		});
+		return this.requests().map((request) => ({
+			request,
+			raised: date.format(new Date(request.raisedAt)),
+			due: request.dueAt ? date.format(new Date(request.dueAt)) : null,
+			closed: isClosed(request.status)
+		}));
+	}, ...ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: RequestTable,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: RequestTable,
+		isStandalone: true,
+		selector: "wa-request-table",
+		inputs: {
+			requests: {
+				classPropertyName: "requests",
+				publicName: "requests",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			locale: {
+				classPropertyName: "locale",
+				publicName: "locale",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			}
+		},
+		outputs: { requestActions: "requestActions" },
+		ngImport: i0,
+		template: "<table class=\"w-full border-collapse text-sm\">\n  <thead class=\"border-y border-border bg-surface-raised\">\n    <tr>\n      <th scope=\"col\" class=\"px-4 py-2 text-left text-xs font-medium uppercase tracking-wide text-content-faint\">{{ 'service-desk.table.title' | transloco }}</th>\n      <th scope=\"col\" class=\"px-4 py-2 text-left text-xs font-medium uppercase tracking-wide text-content-faint\">{{ 'service-desk.table.type' | transloco }}</th>\n      <th scope=\"col\" class=\"px-4 py-2 text-left text-xs font-medium uppercase tracking-wide text-content-faint\">{{ 'service-desk.table.priority' | transloco }}</th>\n      <th scope=\"col\" class=\"px-4 py-2 text-left text-xs font-medium uppercase tracking-wide text-content-faint\">{{ 'service-desk.table.status' | transloco }}</th>\n      <th scope=\"col\" class=\"px-4 py-2 text-left text-xs font-medium uppercase tracking-wide text-content-faint\">{{ 'service-desk.table.contact' | transloco }}</th>\n      <th scope=\"col\" class=\"px-4 py-2 text-left text-xs font-medium uppercase tracking-wide text-content-faint\">{{ 'service-desk.table.dates' | transloco }}</th>\n      <th scope=\"col\" class=\"px-4 py-2\"><span class=\"sr-only\">{{ 'service-desk.table.actions' | transloco }}</span></th>\n    </tr>\n  </thead>\n  <tbody>\n    @for (row of rows(); track row.request.id) {\n      <tr class=\"border-b border-border\" [class.text-content-faint]=\"row.closed\" data-testid=\"request-row\">\n        <td class=\"min-w-48 px-4 py-3 font-medium text-content\" [class.line-through]=\"row.request.status === 'cancelled'\">{{ row.request.title }}</td>\n        <td class=\"px-4 py-3 whitespace-nowrap\">\n          <span class=\"rounded-full border border-border px-2 py-0.5 text-xs text-content\">{{ 'service-desk.type.' + row.request.type | transloco }}</span>\n        </td>\n        <td class=\"px-4 py-3 whitespace-nowrap\">\n          <span class=\"rounded-full border border-border px-2 py-0.5 text-xs\" [class.text-negative]=\"row.request.priority === 'urgent'\" [class.font-semibold]=\"row.request.priority === 'urgent' || row.request.priority === 'high'\" data-testid=\"request-priority\">{{ 'service-desk.priority.' + row.request.priority | transloco }}</span>\n        </td>\n        <td class=\"px-4 py-3 whitespace-nowrap\">\n          <span class=\"rounded-full border border-border px-2 py-0.5 text-xs text-content\" data-testid=\"request-status\">{{ 'service-desk.status.' + row.request.status | transloco }}</span>\n        </td>\n        <td class=\"px-4 py-3\">\n          <div class=\"text-content\">{{ row.request.contactName ?? '–' }}</div>\n          @if (row.request.contactPhone ?? row.request.contactEmail; as reach) {\n            <div class=\"text-content-faint\">{{ reach }}</div>\n          }\n        </td>\n        <td class=\"px-4 py-3 whitespace-nowrap\">\n          <div class=\"text-content\">{{ row.raised }}</div>\n          @if (row.due) {\n            <div class=\"text-content-faint\">{{ 'service-desk.table.dueOn' | transloco: { date: row.due } }}</div>\n          }\n        </td>\n        <td class=\"px-4 py-3 text-right whitespace-nowrap\">\n          <button type=\"button\" class=\"relative lw-btn lw-btn--ghost lw-btn--sm lw-btn--icon\" [attr.aria-label]=\"'service-desk.actions.more' | transloco\" (click)=\"requestActions.emit({ request: row.request, x: $event.clientX, y: $event.clientY })\">\n            <lw-icon name=\"more\" size=\"1rem\"></lw-icon>\n            <lw-tooltip [attr.text]=\"'service-desk.actions.more' | transloco\" position=\"top\"></lw-tooltip>\n          </button>\n        </td>\n      </tr>\n    } @empty {\n      <tr>\n        <td colspan=\"7\" class=\"px-4 py-8 text-center text-content-faint\">{{ 'service-desk.table.empty' | transloco }}</td>\n      </tr>\n    }\n  </tbody>\n</table>\n",
+		dependencies: [{
+			kind: "pipe",
+			type: TranslocoPipe,
+			name: "transloco"
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: RequestTable,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "wa-request-table",
+			imports: [TranslocoPipe],
+			schemas: [CUSTOM_ELEMENTS_SCHEMA],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<table class=\"w-full border-collapse text-sm\">\n  <thead class=\"border-y border-border bg-surface-raised\">\n    <tr>\n      <th scope=\"col\" class=\"px-4 py-2 text-left text-xs font-medium uppercase tracking-wide text-content-faint\">{{ 'service-desk.table.title' | transloco }}</th>\n      <th scope=\"col\" class=\"px-4 py-2 text-left text-xs font-medium uppercase tracking-wide text-content-faint\">{{ 'service-desk.table.type' | transloco }}</th>\n      <th scope=\"col\" class=\"px-4 py-2 text-left text-xs font-medium uppercase tracking-wide text-content-faint\">{{ 'service-desk.table.priority' | transloco }}</th>\n      <th scope=\"col\" class=\"px-4 py-2 text-left text-xs font-medium uppercase tracking-wide text-content-faint\">{{ 'service-desk.table.status' | transloco }}</th>\n      <th scope=\"col\" class=\"px-4 py-2 text-left text-xs font-medium uppercase tracking-wide text-content-faint\">{{ 'service-desk.table.contact' | transloco }}</th>\n      <th scope=\"col\" class=\"px-4 py-2 text-left text-xs font-medium uppercase tracking-wide text-content-faint\">{{ 'service-desk.table.dates' | transloco }}</th>\n      <th scope=\"col\" class=\"px-4 py-2\"><span class=\"sr-only\">{{ 'service-desk.table.actions' | transloco }}</span></th>\n    </tr>\n  </thead>\n  <tbody>\n    @for (row of rows(); track row.request.id) {\n      <tr class=\"border-b border-border\" [class.text-content-faint]=\"row.closed\" data-testid=\"request-row\">\n        <td class=\"min-w-48 px-4 py-3 font-medium text-content\" [class.line-through]=\"row.request.status === 'cancelled'\">{{ row.request.title }}</td>\n        <td class=\"px-4 py-3 whitespace-nowrap\">\n          <span class=\"rounded-full border border-border px-2 py-0.5 text-xs text-content\">{{ 'service-desk.type.' + row.request.type | transloco }}</span>\n        </td>\n        <td class=\"px-4 py-3 whitespace-nowrap\">\n          <span class=\"rounded-full border border-border px-2 py-0.5 text-xs\" [class.text-negative]=\"row.request.priority === 'urgent'\" [class.font-semibold]=\"row.request.priority === 'urgent' || row.request.priority === 'high'\" data-testid=\"request-priority\">{{ 'service-desk.priority.' + row.request.priority | transloco }}</span>\n        </td>\n        <td class=\"px-4 py-3 whitespace-nowrap\">\n          <span class=\"rounded-full border border-border px-2 py-0.5 text-xs text-content\" data-testid=\"request-status\">{{ 'service-desk.status.' + row.request.status | transloco }}</span>\n        </td>\n        <td class=\"px-4 py-3\">\n          <div class=\"text-content\">{{ row.request.contactName ?? '–' }}</div>\n          @if (row.request.contactPhone ?? row.request.contactEmail; as reach) {\n            <div class=\"text-content-faint\">{{ reach }}</div>\n          }\n        </td>\n        <td class=\"px-4 py-3 whitespace-nowrap\">\n          <div class=\"text-content\">{{ row.raised }}</div>\n          @if (row.due) {\n            <div class=\"text-content-faint\">{{ 'service-desk.table.dueOn' | transloco: { date: row.due } }}</div>\n          }\n        </td>\n        <td class=\"px-4 py-3 text-right whitespace-nowrap\">\n          <button type=\"button\" class=\"relative lw-btn lw-btn--ghost lw-btn--sm lw-btn--icon\" [attr.aria-label]=\"'service-desk.actions.more' | transloco\" (click)=\"requestActions.emit({ request: row.request, x: $event.clientX, y: $event.clientY })\">\n            <lw-icon name=\"more\" size=\"1rem\"></lw-icon>\n            <lw-tooltip [attr.text]=\"'service-desk.actions.more' | transloco\" position=\"top\"></lw-tooltip>\n          </button>\n        </td>\n      </tr>\n    } @empty {\n      <tr>\n        <td colspan=\"7\" class=\"px-4 py-8 text-center text-content-faint\">{{ 'service-desk.table.empty' | transloco }}</td>\n      </tr>\n    }\n  </tbody>\n</table>\n"
+		}]
+	}],
+	propDecorators: {
+		requests: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "requests",
+				required: true
+			}]
+		}],
+		locale: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "locale",
+				required: true
+			}]
+		}],
+		requestActions: [{
+			type: i0.Output,
+			args: ["requestActions"]
+		}]
+	}
+});
+const pageSize = 25;
+const searchDelayMs = 300;
+var DeskPage = class DeskPage {
+	gateway = inject(SERVICE_DESK_GATEWAY);
+	route = inject(ActivatedRoute);
+	searchTimer;
+	locale = activeLocale();
+	filters = statusFilters;
+	deskId = toSignal(this.route.paramMap.pipe(map((params) => params.get("deskId") ?? "")), { initialValue: this.route.snapshot.paramMap.get("deskId") ?? "" });
+	text = signal("", ...ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []);
+	filter = signal("active", ...ngDevMode ? [{ debugName: "filter" }] : /* istanbul ignore next */ []);
+	offset = signal(0, ...ngDevMode ? [{ debugName: "offset" }] : /* istanbul ignore next */ []);
+	desk = resource({
+		...ngDevMode ? { debugName: "desk" } : /* istanbul ignore next */ {},
+		params: () => this.deskId(),
+		loader: ({ params }) => this.gateway.desk(params)
+	});
+	page = resource({
+		...ngDevMode ? { debugName: "page" } : /* istanbul ignore next */ {},
+		params: () => ({
+			deskId: this.deskId(),
+			text: this.text().trim(),
+			filter: this.filter(),
+			offset: this.offset()
+		}),
+		loader: ({ params, abortSignal }) => this.gateway.requests(params.deskId, {
+			text: params.text || void 0,
+			...params.filter === "active" ? {} : params.filter === "all" ? { includeCancelled: true } : { status: params.filter },
+			offset: params.offset,
+			limit: pageSize
+		}, abortSignal)
+	});
+	constructor() {
+		inject(DestroyRef).onDestroy(() => clearTimeout(this.searchTimer));
+		effect(() => {
+			const total = this.total();
+			if (this.page.hasValue() && this.offset() > 0 && this.offset() >= total) this.offset.set(Math.max(0, Math.ceil(total / pageSize) - 1) * pageSize);
+		});
+	}
+	total = computed(() => Number(this.page.value()?.total ?? 0), ...ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []);
+	range = computed(() => {
+		const total = this.total();
+		return {
+			first: total === 0 ? 0 : this.offset() + 1,
+			last: Math.min(this.offset() + pageSize, total),
+			total
+		};
+	}, ...ngDevMode ? [{ debugName: "range" }] : /* istanbul ignore next */ []);
+	hasPrevious = computed(() => this.offset() > 0, ...ngDevMode ? [{ debugName: "hasPrevious" }] : /* istanbul ignore next */ []);
+	hasNext = computed(() => this.offset() + pageSize < this.total(), ...ngDevMode ? [{ debugName: "hasNext" }] : /* istanbul ignore next */ []);
+	search(event) {
+		const value = event.target.value;
+		clearTimeout(this.searchTimer);
+		this.searchTimer = setTimeout(() => {
+			this.text.set(value);
+			this.offset.set(0);
+		}, searchDelayMs);
+	}
+	chooseFilter(event) {
+		const chosen = statusFilters.find((filter) => filter === event.target.value);
+		if (chosen) {
+			this.filter.set(chosen);
+			this.offset.set(0);
+		}
+	}
+	previous() {
+		this.offset.update((offset) => Math.max(0, offset - pageSize));
+	}
+	next() {
+		this.offset.update((offset) => offset + pageSize);
+	}
+	add() {
+		this.openDialog({
+			deskId: this.deskId(),
+			request: null
+		}, "service-desk.dialog.addTitle");
+	}
+	actions({ request, x, y }) {
+		const closed = isClosed(request.status);
+		serviceDeskHost.ui.openMenu([
+			{
+				label: closed ? "service-desk.actions.view" : "service-desk.actions.edit",
+				icon: closed ? "preview" : "edit",
+				run: () => this.open(request)
+			},
+			...closed ? [] : [{
+				label: "service-desk.actions.complete",
+				icon: "serviceDeskComplete",
+				run: () => void this.complete(request)
+			}, {
+				label: "service-desk.actions.cancel",
+				icon: "serviceDeskCancel",
+				run: () => void this.cancel(request)
+			}],
+			{
+				label: "service-desk.actions.delete",
+				icon: "trash",
+				run: () => void this.remove(request)
+			}
+		], {
+			x,
+			y
+		});
+	}
+	open(request) {
+		const closed = isClosed(request.status);
+		this.openDialog({
+			deskId: this.deskId(),
+			request
+		}, closed ? "service-desk.dialog.viewTitle" : "service-desk.dialog.editTitle");
+	}
+	async complete(request) {
+		await this.attempt(async () => this.report(await this.gateway.complete(this.deskId(), request.id), "service-desk.complete.done"));
+	}
+	async cancel(request) {
+		const reason = await serviceDeskHost.ui.prompt({
+			title: "service-desk.cancel.title",
+			message: "service-desk.cancel.message",
+			confirmLabel: "service-desk.cancel.confirm",
+			tone: "warning"
+		});
+		if (reason === null) return;
+		await this.attempt(async () => this.report(await this.gateway.cancel(this.deskId(), request.id, reason.trim() || null), "service-desk.cancel.done"));
+	}
+	async remove(request) {
+		if (!await serviceDeskHost.ui.confirm({
+			title: "service-desk.delete.title",
+			message: "service-desk.delete.message",
+			confirmLabel: "service-desk.delete.confirm",
+			tone: "danger"
+		})) return;
+		await this.attempt(async () => {
+			await this.gateway.remove(this.deskId(), request.id);
+			serviceDeskHost.ui.toast({
+				message: "service-desk.delete.done",
+				kind: "success"
+			});
+			this.page.reload();
+		});
+	}
+	async attempt(work) {
+		try {
+			await work();
+		} catch {
+			serviceDeskHost.ui.toast({
+				message: "service-desk.errors.save",
+				kind: "error"
+			});
+			this.page.reload();
+		}
+	}
+	openDialog(data, title) {
+		serviceDeskHost.ui.open(RequestDialog, {
+			data,
+			title,
+			size: "lg",
+			dismiss: "explicit"
+		}).closed.then((saved) => {
+			if (saved) {
+				serviceDeskHost.ui.toast({
+					message: "service-desk.dialog.saved",
+					kind: "success"
+				});
+				this.page.reload();
+			}
+		});
+	}
+	report(outcome, done) {
+		const saved = outcome.kind === "saved";
+		serviceDeskHost.ui.toast({
+			message: saved ? done : "service-desk.errors.save",
+			kind: saved ? "success" : "error"
+		});
+		this.page.reload();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: DeskPage,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: DeskPage,
+		isStandalone: true,
+		selector: "wa-desk-page",
+		ngImport: i0,
+		template: "<div class=\"flex h-full flex-col gap-4 overflow-auto p-6\">\n  <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n    <h2 class=\"text-lg font-semibold text-content\">{{ desk.value()?.name ?? ('service-desk.title' | transloco) }}</h2>\n    <div class=\"flex flex-wrap items-center gap-2\">\n      <input\n        type=\"search\"\n        class=\"lw-field w-56\"\n        [attr.aria-label]=\"'service-desk.search.label' | transloco\"\n        [attr.placeholder]=\"'service-desk.search.placeholder' | transloco\"\n        (input)=\"search($event)\"\n      />\n      <select class=\"lw-field w-64\" [attr.aria-label]=\"'service-desk.filter.label' | transloco\" (change)=\"chooseFilter($event)\">\n        @for (choice of filters; track choice) {\n          <option [value]=\"choice\" [selected]=\"choice === filter()\">{{ 'service-desk.filter.' + choice | transloco }}</option>\n        }\n      </select>\n      <button type=\"button\" class=\"lw-btn lw-btn--primary\" (click)=\"add()\">\n        <lw-icon name=\"add\" size=\"1rem\"></lw-icon>\n        {{ 'service-desk.actions.add' | transloco }}\n      </button>\n    </div>\n  </div>\n\n  @if (page.error()) {\n    <p class=\"text-sm text-negative\" role=\"alert\">{{ 'service-desk.errors.load' | transloco }}</p>\n  } @else {\n    <div class=\"overflow-x-auto rounded-xl border border-border bg-surface\">\n      <wa-request-table\n        [requests]=\"page.value()?.items ?? []\"\n        [locale]=\"locale()\"\n        (requestActions)=\"actions($event)\"\n      />\n    </div>\n    <div class=\"flex items-center justify-end gap-2 text-sm text-content-faint\">\n      <span data-testid=\"page-range\">{{ 'service-desk.pager.range' | transloco: range() }}</span>\n      <button type=\"button\" class=\"relative lw-btn lw-btn--default lw-btn--sm lw-btn--icon\" [disabled]=\"!hasPrevious()\" [attr.aria-label]=\"'service-desk.pager.previous' | transloco\" (click)=\"previous()\">\n        <lw-icon name=\"serviceDeskPrevious\" size=\"1rem\"></lw-icon>\n      </button>\n      <button type=\"button\" class=\"relative lw-btn lw-btn--default lw-btn--sm lw-btn--icon\" [disabled]=\"!hasNext()\" [attr.aria-label]=\"'service-desk.pager.next' | transloco\" (click)=\"next()\">\n        <lw-icon name=\"serviceDeskNext\" size=\"1rem\"></lw-icon>\n      </button>\n    </div>\n  }\n</div>\n",
+		dependencies: [{
+			kind: "component",
+			type: RequestTable,
+			selector: "wa-request-table",
+			inputs: ["requests", "locale"],
+			outputs: ["requestActions"]
+		}, {
+			kind: "pipe",
+			type: TranslocoPipe,
+			name: "transloco"
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: DeskPage,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "wa-desk-page",
+			imports: [TranslocoPipe, RequestTable],
+			schemas: [CUSTOM_ELEMENTS_SCHEMA],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<div class=\"flex h-full flex-col gap-4 overflow-auto p-6\">\n  <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n    <h2 class=\"text-lg font-semibold text-content\">{{ desk.value()?.name ?? ('service-desk.title' | transloco) }}</h2>\n    <div class=\"flex flex-wrap items-center gap-2\">\n      <input\n        type=\"search\"\n        class=\"lw-field w-56\"\n        [attr.aria-label]=\"'service-desk.search.label' | transloco\"\n        [attr.placeholder]=\"'service-desk.search.placeholder' | transloco\"\n        (input)=\"search($event)\"\n      />\n      <select class=\"lw-field w-64\" [attr.aria-label]=\"'service-desk.filter.label' | transloco\" (change)=\"chooseFilter($event)\">\n        @for (choice of filters; track choice) {\n          <option [value]=\"choice\" [selected]=\"choice === filter()\">{{ 'service-desk.filter.' + choice | transloco }}</option>\n        }\n      </select>\n      <button type=\"button\" class=\"lw-btn lw-btn--primary\" (click)=\"add()\">\n        <lw-icon name=\"add\" size=\"1rem\"></lw-icon>\n        {{ 'service-desk.actions.add' | transloco }}\n      </button>\n    </div>\n  </div>\n\n  @if (page.error()) {\n    <p class=\"text-sm text-negative\" role=\"alert\">{{ 'service-desk.errors.load' | transloco }}</p>\n  } @else {\n    <div class=\"overflow-x-auto rounded-xl border border-border bg-surface\">\n      <wa-request-table\n        [requests]=\"page.value()?.items ?? []\"\n        [locale]=\"locale()\"\n        (requestActions)=\"actions($event)\"\n      />\n    </div>\n    <div class=\"flex items-center justify-end gap-2 text-sm text-content-faint\">\n      <span data-testid=\"page-range\">{{ 'service-desk.pager.range' | transloco: range() }}</span>\n      <button type=\"button\" class=\"relative lw-btn lw-btn--default lw-btn--sm lw-btn--icon\" [disabled]=\"!hasPrevious()\" [attr.aria-label]=\"'service-desk.pager.previous' | transloco\" (click)=\"previous()\">\n        <lw-icon name=\"serviceDeskPrevious\" size=\"1rem\"></lw-icon>\n      </button>\n      <button type=\"button\" class=\"relative lw-btn lw-btn--default lw-btn--sm lw-btn--icon\" [disabled]=\"!hasNext()\" [attr.aria-label]=\"'service-desk.pager.next' | transloco\" (click)=\"next()\">\n        <lw-icon name=\"serviceDeskNext\" size=\"1rem\"></lw-icon>\n      </button>\n    </div>\n  }\n</div>\n"
+		}]
+	}],
+	ctorParameters: () => []
+});
+const stroke = "fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"";
+const serviceDeskIcons = {
+	serviceDesk: `<svg viewBox="0 0 24 24" ${stroke}><path d="M4 13.5V7a2.5 2.5 0 0 1 2.5-2.5h11A2.5 2.5 0 0 1 20 7v6.5"/><path d="M3 13.5h5l1.5 2.5h5l1.5-2.5h5V18a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>`,
+	serviceDeskComplete: `<svg viewBox="0 0 24 24" ${stroke}><circle cx="12" cy="12" r="8.5"/><path d="M8.5 12.5l2.5 2.5 4.5-5"/></svg>`,
+	serviceDeskCancel: `<svg viewBox="0 0 24 24" ${stroke}><circle cx="12" cy="12" r="8.5"/><path d="M9 9l6 6M15 9l-6 6"/></svg>`,
+	serviceDeskPrevious: `<svg viewBox="0 0 24 24" ${stroke}><path d="M15 5l-7 7 7 7"/></svg>`,
+	serviceDeskNext: `<svg viewBox="0 0 24 24" ${stroke}><path d="M9 5l7 7-7 7"/></svg>`
+};
+function createServiceDeskPlugin(options = {}) {
+	return {
+		manifest: {
+			id: "service-desk",
+			name: "Service desk",
+			capabilities: [
+				"contributions",
+				"navigation",
+				"ui"
+			]
+		},
+		activate(ctx) {
+			serviceDeskHost.bind(ctx);
+			ctx.contributeIcons(serviceDeskIcons);
+			ctx.registerSurface({
+				id: "service-desk.desks",
+				title: "service-desk.desks.title",
+				icon: "serviceDesk",
+				routable: { path: deskListPath },
+				component: DeskListPage
+			});
+			ctx.registerSurface({
+				id: "service-desk.desk",
+				title: "service-desk.title",
+				icon: "serviceDesk",
+				routable: { path: `${deskListPath}/:deskId` },
+				component: DeskPage
+			});
+			if (options.railItem) ctx.registerRailItem({
+				id: "service-desk.rail",
+				rail: "primary",
+				icon: "serviceDesk",
+				title: "service-desk.desks.title",
+				run: () => ctx.navigateContent(deskListPath)
+			});
+		},
+		deactivate() {
+			serviceDeskHost.unbind();
+		}
+	};
+}
+const serviceDeskPlugin = createServiceDeskPlugin();
+const getServiceDeskDesksSaveUrl = (deskId) => {
+	return `/service-desk/desks/${deskId}`;
+};
+const getServiceDeskDesksGetUrl = (deskId) => {
+	return `/service-desk/desks/${deskId}`;
+};
+const getServiceDeskDesksListUrl = () => {
+	return `/service-desk/desks`;
+};
+const getServiceDeskRequestsRaiseUrl = (deskId) => {
+	return `/service-desk/desks/${deskId}/requests`;
+};
+const getServiceDeskRequestsListUrl = (deskId, params) => {
+	const normalizedParams = new URLSearchParams();
+	Object.entries(params || {}).forEach(([key, value]) => {
+		if (value !== void 0) normalizedParams.append(key, value === null ? "null" : String(value));
+	});
+	const stringifiedParams = normalizedParams.toString();
+	return stringifiedParams.length > 0 ? `/service-desk/desks/${deskId}/requests?${stringifiedParams}` : `/service-desk/desks/${deskId}/requests`;
+};
+const getServiceDeskRequestsEditUrl = (deskId, requestId) => {
+	return `/service-desk/desks/${deskId}/requests/${requestId}`;
+};
+const getServiceDeskRequestsDeleteUrl = (deskId, requestId) => {
+	return `/service-desk/desks/${deskId}/requests/${requestId}`;
+};
+const getServiceDeskRequestsStatusUrl = (deskId, requestId) => {
+	return `/service-desk/desks/${deskId}/requests/${requestId}/status`;
+};
+const getServiceDeskRequestsCompleteUrl = (deskId, requestId) => {
+	return `/service-desk/desks/${deskId}/requests/${requestId}/complete`;
+};
+const getServiceDeskRequestsCancelUrl = (deskId, requestId) => {
+	return `/service-desk/desks/${deskId}/requests/${requestId}/cancel`;
+};
+const notFound = 404;
+const conflict = 409;
+const badRequest = 400;
+const closedCode = "request-closed";
+function createHttpServiceDeskGateway(options) {
+	const base = options.baseUrl.replace(/\/+$/, "");
+	const run = options.fetch ?? ((input, init) => fetch(input, init));
+	const send = (path, method, body, signal) => run(base + path, {
+		method,
+		signal,
+		credentials: "same-origin",
+		headers: {
+			Accept: "application/json",
+			...body === void 0 ? {} : { "Content-Type": "application/json" },
+			...options.headers
+		},
+		body: body === void 0 ? void 0 : JSON.stringify(body)
+	});
+	const read = async (response) => {
+		if (!response.ok) throw new ServiceDeskGatewayError(response.status);
+		return await response.json();
+	};
+	const outcome = async (response) => {
+		if (response.ok) return {
+			kind: "saved",
+			request: await response.json()
+		};
+		if (response.status === notFound) return { kind: "missing" };
+		if (response.status === badRequest) return { kind: "invalid" };
+		if (response.status !== conflict) throw new ServiceDeskGatewayError(response.status);
+		return (await response.json().catch(() => ({}))).code === closedCode ? { kind: "closed" } : { kind: "changed" };
+	};
+	return {
+		desks: async () => read(await send(getServiceDeskDesksListUrl(), "GET")),
+		desk: async (deskId) => {
+			const response = await send(getServiceDeskDesksGetUrl(deskId), "GET");
+			return response.status === notFound ? null : read(response);
+		},
+		saveDesk: async (deskId, name) => read(await send(getServiceDeskDesksSaveUrl(deskId), "PUT", { name })),
+		requests: async (deskId, listing, signal) => read(await send(getServiceDeskRequestsListUrl(deskId, listing), "GET", void 0, signal)),
+		raise: async (deskId, request) => outcome(await send(getServiceDeskRequestsRaiseUrl(deskId), "POST", request)),
+		edit: async (deskId, requestId, changes) => outcome(await send(getServiceDeskRequestsEditUrl(deskId, requestId), "PUT", changes)),
+		setStatus: async (deskId, requestId, status) => outcome(await send(getServiceDeskRequestsStatusUrl(deskId, requestId), "PUT", { status })),
+		complete: async (deskId, requestId) => outcome(await send(getServiceDeskRequestsCompleteUrl(deskId, requestId), "POST")),
+		cancel: async (deskId, requestId, reason) => outcome(await send(getServiceDeskRequestsCancelUrl(deskId, requestId), "POST", { reason })),
+		remove: async (deskId, requestId) => {
+			const response = await send(getServiceDeskRequestsDeleteUrl(deskId, requestId), "DELETE");
+			if (!response.ok && response.status !== notFound) throw new ServiceDeskGatewayError(response.status);
+		}
+	};
+}
+export { SERVICE_DESK_GATEWAY, ServiceDeskGatewayError, createHttpServiceDeskGateway, createServiceDeskPlugin, deskListPath, deskPath, provideServiceDeskGateway, serviceDeskPlugin };
+
+//# sourceMappingURL=weaver-apps-service-desk.mjs.map