@kengcom202/kcore-ui 0.2.0 → 0.4.0

package/fesm2022/kengcom202-kcore-ui.mjs

@@ -1,6 +1,10 @@
 import * as i0 from "@angular/core";
-import { ApplicationRef, CSP_NONCE, Component, DOCUMENT, DestroyRef, Directive, ElementRef, EnvironmentInjector, NgZone, ViewChild, ViewEncapsulation, computed, createComponent, forwardRef, inject, input, signal } from "@angular/core";
-import { NG_VALUE_ACCESSOR } from "@angular/forms";
+import { ApplicationRef, CSP_NONCE, Component, DOCUMENT, DestroyRef, Directive, ElementRef, EnvironmentInjector, Injectable, InjectionToken, NgZone, ViewChild, ViewEncapsulation, computed, createComponent, forwardRef, inject, input, makeEnvironmentProviders, provideEnvironmentInitializer, signal } from "@angular/core";
+import * as i1 from "@angular/forms";
+import { FormBuilder, FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule, Validators } from "@angular/forms";
+import { HttpClient, HttpErrorResponse } from "@angular/common/http";
+import { ActivatedRoute, Router, RouterLink } from "@angular/router";
+import { catchError, throwError } from "rxjs";
 var AnchoredPopup = class {
 	anchor;
 	component;
@@ -355,7 +359,7 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}]
 });
-const STYLE_ID = "kcore-picker-styles";
+const STYLE_ID$1 = "kcore-picker-styles";
 const PICKER_CSS = `
 .app-datepicker {
   cursor: pointer;
@@ -371,9 +375,9 @@ const PICKER_CSS = `
 `;
 function ensurePickerStyles() {
 	const doc = inject(DOCUMENT);
-	if (!doc.head || doc.getElementById(STYLE_ID)) return;
+	if (!doc.head || doc.getElementById(STYLE_ID$1)) return;
 	const style = doc.createElement("style");
-	style.id = STYLE_ID;
+	style.id = STYLE_ID$1;
 	const nonce = inject(CSP_NONCE, { optional: true });
 	if (nonce) style.setAttribute("nonce", nonce);
 	style.textContent = PICKER_CSS;
@@ -1331,6 +1335,2786 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-export { AnchoredPopup, ClockPickerDirective, ClockPickerPopupComponent, DatePickerDirective, DatePickerPopupComponent, PICKER_CSS, SearchSelectComponent, ThaiDatePickerComponent, ensurePickerStyles, formatDate, parseDate, toBuddhistText, toChristianText };
+const PUA_MAP = {
+	"": "ฐ",
+	"": "ิ",
+	"": "ี",
+	"": "ึ",
+	"": "ื",
+	"": "่",
+	"": "้",
+	"": "๊",
+	"": "๋",
+	"": "์",
+	"": "่",
+	"": "้",
+	"": "๊",
+	"": "๋",
+	"": "์",
+	"": "ญ",
+	"": "ั",
+	"": "ํ",
+	"": "็",
+	"": "่",
+	"": "้",
+	"": "๊",
+	"": "๋",
+	"": "์",
+	"": "ุ",
+	"": "ู",
+	"": "ฺ"
+};
+function fixThaiText(text) {
+	if (!text) return text;
+	return text.replace(/[-]/g, (c) => PUA_MAP[c] ?? c).replace(/[  ]+(?=[ัิ-ฺ็-๎])/g, "").replace(/ํา/g, "ำ");
+}
+function provideThaiPasteFix() {
+	return provideEnvironmentInitializer(() => {
+		const doc = inject(DOCUMENT);
+		const listener = (e) => onPaste(doc, e);
+		doc.addEventListener("paste", listener, true);
+		inject(DestroyRef).onDestroy(() => doc.removeEventListener("paste", listener, true));
+	});
+}
+function onPaste(doc, e) {
+	const el = e.target;
+	const view = doc.defaultView;
+	if (!view || !(el instanceof view.HTMLInputElement || el instanceof view.HTMLTextAreaElement)) return;
+	if (el.readOnly || el.disabled) return;
+	const text = e.clipboardData?.getData("text/plain");
+	if (!text) return;
+	const fixed = fixThaiText(text);
+	if (fixed === text) return;
+	e.preventDefault();
+	if (doc.execCommand?.("insertText", false, fixed)) return;
+	if (el.selectionStart === null || el.selectionEnd === null) el.value += fixed;
+	else el.setRangeText(fixed, el.selectionStart, el.selectionEnd, "end");
+	el.dispatchEvent(new Event("input", { bubbles: true }));
+}
+const KC_AUTH_CONFIG = new InjectionToken("KC_AUTH_CONFIG");
+const KC_AUTH_PATHS = {
+	login: "/login",
+	register: "/register",
+	ssoCallback: "/sso-callback"
+};
+function resolveKcAuthConfig(o) {
+	return {
+		appName: o.appName,
+		logoUrl: o.logoUrl ?? "",
+		apiBase: (o.apiBase ?? "/api").replace(/\/+$/, ""),
+		homeUrl: o.homeUrl || "/",
+		sso: o.sso ? { label: o.sso.label || "SSO" } : null,
+		passwordLogin: o.passwordLogin !== false || !o.sso,
+		register: o.register ?? "none",
+		orgLabel: o.orgLabel || "หน่วยงาน",
+		adminRoles: o.adminRoles ?? ["admin"],
+		passwordMinLength: o.passwordMinLength ?? 4,
+		kclluHints: o.kclluHints ?? {}
+	};
+}
+function provideKcAuth(options) {
+	return makeEnvironmentProviders([{
+		provide: KC_AUTH_CONFIG,
+		useValue: resolveKcAuthConfig(options)
+	}]);
+}
+function kcErrorMessage(err, fallback) {
+	if (err instanceof HttpErrorResponse) {
+		const m = err.error?.message;
+		if (typeof m === "string" && m.trim()) return m;
+		if (err.status === 0) return "ไม่สามารถเชื่อมต่อเซิร์ฟเวอร์ได้ กรุณาลองใหม่อีกครั้ง";
+	}
+	return fallback;
+}
+const SESSION_KEY = "kc_session";
+const KC_SSO_STATE_KEY = "kc_sso_state";
+const KC_SSO_TICKET_KEY = "kc_sso_ticket";
+const KC_RETURN_URL_KEY = "kc_return_url";
+function kcTokenExpired(token, now = Date.now()) {
+	const part = token.split(".")[1];
+	if (!part) return false;
+	try {
+		const b64 = part.replace(/-/g, "+").replace(/_/g, "/");
+		const payload = JSON.parse(atob(b64.padEnd(Math.ceil(b64.length / 4) * 4, "=")));
+		return typeof payload?.exp === "number" && payload.exp * 1e3 <= now;
+	} catch {
+		return false;
+	}
+}
+var KcAuthService = class KcAuthService {
+	config = inject(KC_AUTH_CONFIG);
+	router = inject(Router);
+	win = inject(DOCUMENT).defaultView;
+	state = signal(this.read(), ...ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []);
+	session = this.state.asReadonly();
+	user = computed(() => this.state()?.user ?? null, ...ngDevMode ? [{ debugName: "user" }] : /* istanbul ignore next */ []);
+	isAdmin = computed(() => {
+		const u = this.user();
+		return !!u && this.config.adminRoles.includes(u.role);
+	}, ...ngDevMode ? [{ debugName: "isAdmin" }] : /* istanbul ignore next */ []);
+	constructor() {
+		const onStorage = (e) => {
+			if (e.key === SESSION_KEY || e.key === null) this.state.set(this.read());
+		};
+		this.win?.addEventListener("storage", onStorage);
+		inject(DestroyRef).onDestroy(() => this.win?.removeEventListener("storage", onStorage));
+	}
+	isLoggedIn() {
+		const s = this.state();
+		return !!s && !kcTokenExpired(s.token);
+	}
+	token() {
+		return this.state()?.token ?? "";
+	}
+	start(session) {
+		this.clear();
+		this.state.set({
+			token: session.token,
+			user: { ...session.user }
+		});
+		this.storage("localStorage")?.setItem(SESSION_KEY, JSON.stringify(this.state()));
+	}
+	updateUser(patch) {
+		const s = this.state();
+		if (!s) return;
+		this.state.set({
+			token: s.token,
+			user: {
+				...s.user,
+				...patch
+			}
+		});
+		this.storage("localStorage")?.setItem(SESSION_KEY, JSON.stringify(this.state()));
+	}
+	clear() {
+		this.state.set(null);
+		this.storage("localStorage")?.removeItem(SESSION_KEY);
+		for (const k of [
+			KC_SSO_STATE_KEY,
+			KC_SSO_TICKET_KEY,
+			KC_RETURN_URL_KEY
+		]) this.storage("sessionStorage")?.removeItem(k);
+	}
+	logout() {
+		this.clear();
+		return this.router.navigateByUrl(KC_AUTH_PATHS.login);
+	}
+	safeReturnUrl(url) {
+		if (!url || !url.startsWith("/") || url.startsWith("//") || url.includes("\\")) return this.config.homeUrl;
+		const path = url.split(/[?#]/)[0];
+		return Object.values(KC_AUTH_PATHS).includes(path) ? this.config.homeUrl : url;
+	}
+	setTemp(key, value) {
+		this.storage("sessionStorage")?.setItem(key, value);
+	}
+	getTemp(key) {
+		return this.storage("sessionStorage")?.getItem(key) ?? "";
+	}
+	takeTemp(key) {
+		const v = this.getTemp(key);
+		this.storage("sessionStorage")?.removeItem(key);
+		return v;
+	}
+	redirect(url) {
+		this.win?.location.assign(url);
+	}
+	read() {
+		try {
+			const s = JSON.parse(this.storage("localStorage")?.getItem(SESSION_KEY) ?? "null");
+			return s && typeof s.token === "string" && s.user && typeof s.user === "object" ? s : null;
+		} catch {
+			return null;
+		}
+	}
+	storage(kind) {
+		try {
+			return this.win?.[kind] ?? null;
+		} catch {
+			return null;
+		}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: KcAuthService,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: KcAuthService,
+		providedIn: "root"
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: KcAuthService,
+	decorators: [{
+		type: Injectable,
+		args: [{ providedIn: "root" }]
+	}],
+	ctorParameters: () => []
+});
+function loginTree(state) {
+	const expired = !!inject(KcAuthService).session();
+	return inject(Router).createUrlTree([KC_AUTH_PATHS.login], { queryParams: {
+		returnUrl: state.url,
+		...expired ? { expired: 1 } : {}
+	} });
+}
+const kcAuthGuard = (_route, state) => inject(KcAuthService).isLoggedIn() || loginTree(state);
+const kcAdminGuard = (_route, state) => {
+	const auth = inject(KcAuthService);
+	if (!auth.isLoggedIn()) return loginTree(state);
+	return auth.isAdmin() || inject(Router).parseUrl(inject(KC_AUTH_CONFIG).homeUrl);
+};
+function onAnonymousPage(url) {
+	const path = url.split(/[?#]/)[0];
+	return Object.values(KC_AUTH_PATHS).includes(path);
+}
+const kcAuthInterceptor = (req, next) => {
+	const auth = inject(KcAuthService);
+	const router = inject(Router);
+	const { apiBase } = inject(KC_AUTH_CONFIG);
+	const isApi = req.url === apiBase || req.url.startsWith(apiBase + "/");
+	const token = auth.token();
+	return next(isApi && token && !req.headers.has("Authorization") ? req.clone({ setHeaders: { Authorization: `Bearer ${token}` } }) : req).pipe(catchError((err) => {
+		if (isApi && err instanceof HttpErrorResponse && err.status === 401 && !onAnonymousPage(router.url)) {
+			const returnUrl = router.url;
+			auth.clear();
+			router.navigate([KC_AUTH_PATHS.login], { queryParams: {
+				expired: 1,
+				returnUrl
+			} });
+		}
+		return throwError(() => err);
+	}));
+};
+const STYLE_ID = "kcore-auth-styles";
+const AUTH_CSS = `
+.kc-auth-screen, .kc-auth-page, .kc-auth-modal-bg {
+  font-size: var(--kc-auth-font-size, 14px);
+  color: var(--kc-auth-text, #3a2a3a);
+  line-height: 1.5;
+}
+.kc-auth-screen *, .kc-auth-page *, .kc-auth-modal-bg * { box-sizing: border-box; }
+
+/* ---- หน้าเต็มจอ (login / register / sso-callback) ---- */
+.kc-auth-screen {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px 16px;
+  background: var(--kc-auth-page-bg, linear-gradient(160deg, #fff7ff 0%, #ffe6ff 100%));
+}
+.kc-auth-card {
+  width: 100%;
+  max-width: 380px;
+  padding: 28px 28px 24px;
+  background: var(--kc-auth-bg, #fff);
+  border: 1px solid var(--kc-auth-border, #f3e1f3);
+  border-radius: var(--kc-auth-radius, 14px);
+  box-shadow: 0 12px 36px rgba(204, 102, 204, 0.12);
+}
+.kc-auth-card.wide { max-width: 560px; }
+.kc-auth-card.center { text-align: center; }
+.kc-auth-logo { display: block; max-height: 72px; max-width: 100%; margin: 0 auto 12px; }
+.kc-auth-title { margin: 0; font-size: 1.35em; font-weight: 600; text-align: center; }
+.kc-auth-subtitle { margin: 4px 0 20px; color: var(--kc-auth-muted, #806f80); text-align: center; }
+.kc-auth-footer { margin: 18px 0 0; text-align: center; color: var(--kc-auth-muted, #806f80); font-size: 0.93em; }
+
+/* ---- หน้าในแอป (ข้อมูลส่วนตัว / config) ---- */
+.kc-auth-page { display: block; max-width: var(--kc-auth-page-width, 1100px); margin: 0 auto; }
+.kc-auth-page.narrow { max-width: 640px; }
+.kc-auth-page.single { max-width: 460px; }
+.kc-auth-page.single .kc-auth-page-title { margin-bottom: 16px; }
+.kc-auth-page-header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 14px;
+}
+.kc-auth-page-title { margin: 0; font-size: 1.3em; font-weight: 600; }
+.kc-auth-page-subtitle { margin: 2px 0 0; color: var(--kc-auth-muted, #806f80); }
+.kc-auth-panel {
+  position: relative;
+  margin-bottom: 14px;
+  padding: 18px;
+  background: var(--kc-auth-bg, #fff);
+  border: 1px solid var(--kc-auth-border, #f3e1f3);
+  border-radius: var(--kc-auth-radius, 14px);
+}
+.kc-auth-panel.flush { padding: 0; overflow: hidden; }
+.kc-auth-panel-title { margin: 0 0 12px; font-size: 1.05em; font-weight: 600; }
+
+/* ---- ฟอร์ม ---- */
+.kc-auth-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
+.kc-auth-grid > .full { grid-column: 1 / -1; }
+.kc-auth-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; min-width: 0; }
+.kc-auth-field > span, .kc-auth-label { font-size: 0.93em; font-weight: 500; }
+.kc-auth-field .req { color: var(--kc-auth-danger, #c62828); }
+.kc-auth-input {
+  width: 100%;
+  height: var(--kc-auth-input-height, 40px);
+  margin: 0;
+  padding: 0 10px;
+  font: inherit;
+  color: inherit;
+  background: var(--kc-auth-bg, #fff);
+  border: 1px solid var(--kc-auth-input-border, #e9cde9);
+  border-radius: 8px;
+  outline: none;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+.kc-auth-input:focus {
+  border-color: var(--kc-auth-accent, #a23ea2);
+  box-shadow: 0 0 0 3px var(--kc-auth-accent-soft, rgba(230, 140, 230, 0.22));
+}
+.kc-auth-input:disabled, .kc-auth-input[readonly] {
+  color: var(--kc-auth-muted, #806f80);
+  background: var(--kc-auth-disabled-bg, #f8f1f8);
+}
+/* ช่องรหัสผ่าน + ปุ่มดวงตา (<kc-password>) */
+.kc-auth-pw { position: relative; display: block; }
+.kc-auth-pw > .kc-auth-input { padding-right: 42px; }
+.kc-auth-pw > input::-ms-reveal, .kc-auth-pw > input::-ms-clear { display: none; }
+.kc-auth-pw-toggle {
+  position: absolute;
+  top: 50%;
+  right: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  color: var(--kc-auth-muted, #806f80);
+  background: none;
+  border: 0;
+  border-radius: 6px;
+  cursor: pointer;
+  transform: translateY(-50%);
+}
+.kc-auth-pw-toggle:hover, .kc-auth-pw-toggle[aria-pressed="true"] { color: var(--kc-auth-accent, #a23ea2); }
+.kc-auth-pw-toggle:focus-visible { outline: 2px solid var(--kc-auth-accent, #a23ea2); outline-offset: 1px; }
+.kc-auth-pw-toggle svg { width: 19px; height: 19px; }
+.kc-auth-input.invalid { border-color: var(--kc-auth-danger, #c62828); }
+.kc-auth-field .kc-ss {
+  --kc-ss-height: var(--kc-auth-input-height, 40px);
+  --kc-ss-radius: 8px;
+  --kc-ss-accent: var(--kc-auth-accent, #a23ea2);
+  --kc-ss-accent-soft: var(--kc-auth-accent-soft, rgba(230, 140, 230, 0.22));
+  --kc-ss-border: var(--kc-auth-input-border, #e9cde9);
+  --kc-ss-text: var(--kc-auth-text, #3a2a3a);
+}
+.kc-auth-value { padding: 8px 0; }
+.kc-auth-field-error { color: var(--kc-auth-danger, #c62828); font-size: 0.86em; }
+.kc-auth-hint { margin: 2px 0 0; color: var(--kc-auth-muted, #806f80); font-size: 0.86em; }
+.kc-auth-check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
+
+/* ---- ปุ่ม ---- */
+.kc-auth-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 6px; }
+.kc-auth-actions.center { justify-content: center; }
+.kc-auth-actions.center > .kc-auth-btn { min-width: 120px; }
+.kc-auth-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: var(--kc-auth-input-height, 40px);
+  padding: 0 16px;
+  font: inherit;
+  font-weight: 500;
+  color: var(--kc-auth-text, #3a2a3a);
+  background: var(--kc-auth-bg, #fff);
+  border: 1px solid var(--kc-auth-input-border, #e9cde9);
+  border-radius: 8px;
+  cursor: pointer;
+  text-decoration: none;
+  white-space: nowrap;
+  transition: filter 0.15s, background 0.15s;
+}
+.kc-auth-btn:hover:not(:disabled) { filter: brightness(0.96); }
+.kc-auth-btn:disabled, .kc-auth-btn.disabled { opacity: 0.6; cursor: not-allowed; pointer-events: none; }
+.kc-auth-btn.primary {
+  color: var(--kc-auth-primary-text, #6b2c6b);
+  background: var(--kc-auth-primary-bg, #ffccff);
+  border-color: var(--kc-auth-primary-border, #f0aef0);
+  font-weight: 600;
+  box-shadow: 0 4px 12px rgba(230, 140, 230, 0.25);
+}
+.kc-auth-btn.outline {
+  color: var(--kc-auth-accent, #a23ea2);
+  background: var(--kc-auth-accent-tint, #fff);
+  border-color: var(--kc-auth-accent-border, #f0c2f0);
+}
+/* ปุ่มเข้าสู่ระบบ + SSO บรรทัดเดียวกัน แบ่งเท่ากัน */
+.kc-auth-btn-row { display: flex; gap: 10px; margin-top: 6px; }
+.kc-auth-btn-row > .kc-auth-btn { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+/* ปิดรหัสผ่าน: ปุ่ม SSO ปุ่มเดียวตรงกลาง */
+.kc-auth-sso-only { display: flex; justify-content: center; padding: 8px 0 4px; }
+.kc-auth-sso-only > .kc-auth-btn { min-width: 75%; height: 46px; padding: 0 24px; font-size: 1.05em; }
+.kc-auth-btn.block { display: flex; width: 100%; }
+.kc-auth-btn.sm { height: 30px; padding: 0 10px; font-size: 0.93em; }
+.kc-auth-link { color: var(--kc-auth-accent, #a23ea2); text-decoration: none; cursor: pointer; }
+.kc-auth-link:hover { text-decoration: underline; }
+
+/* ---- ข้อความแจ้ง ---- */
+.kc-auth-alert {
+  margin-bottom: 14px;
+  padding: 10px 12px;
+  border-radius: 6px;
+  border: 1px solid transparent;
+  font-size: 0.93em;
+}
+.kc-auth-alert.error { color: #8a1c1c; background: #fdecea; border-color: #f5c2c0; }
+.kc-auth-alert.success { color: #1e5b2a; background: #e8f5e9; border-color: #b9dfbf; }
+.kc-auth-alert.warn { color: #6d4c1f; background: #fff8e6; border-color: #f3dfb0; }
+.kc-auth-alert.info { color: #6b2c6b; background: #fff0ff; border-color: #f5d0f5; }
+.kc-auth-loading {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--kc-auth-muted, #806f80);
+  background: rgba(255, 255, 255, 0.7);
+}
+
+/* ---- ตาราง (จอแคบเรียงเป็นการ์ด) ---- */
+.kc-auth-table-wrap { overflow-x: auto; }
+.kc-auth-table { width: 100%; border-collapse: collapse; }
+.kc-auth-table th, .kc-auth-table td {
+  padding: 9px 12px;
+  text-align: left;
+  vertical-align: top;
+  border-bottom: 1px solid var(--kc-auth-border, #f3e1f3);
+}
+.kc-auth-table th {
+  font-size: 0.9em;
+  font-weight: 600;
+  color: var(--kc-auth-muted, #806f80);
+  background: var(--kc-auth-head-bg, #fdf5fd);
+  white-space: nowrap;
+}
+.kc-auth-table tbody tr.clickable { cursor: pointer; }
+.kc-auth-table tbody tr.clickable:hover { background: var(--kc-auth-row-hover, #fff0ff); }
+.kc-auth-table tbody tr.inactive { opacity: 0.55; }
+.kc-auth-table .c { text-align: center; }
+.kc-auth-table .empty { padding: 24px; text-align: center; color: var(--kc-auth-muted, #806f80); }
+.kc-auth-badge {
+  display: inline-block;
+  padding: 1px 10px;
+  border-radius: 999px;
+  font-size: 0.86em;
+  white-space: nowrap;
+}
+.kc-auth-badge.on { color: #1e5b2a; background: #e8f5e9; }
+.kc-auth-badge.off { color: #806f80; background: #eceff1; }
+
+/* ---- popup แก้ไข ---- */
+.kc-auth-modal-bg {
+  position: fixed;
+  inset: 0;
+  z-index: var(--kc-auth-z-index, 9000);
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 6vh 16px 16px;
+  overflow-y: auto;
+  background: rgba(70, 30, 70, 0.30);
+}
+.kc-auth-modal {
+  width: 100%;
+  max-width: 620px;
+  background: var(--kc-auth-bg, #fff);
+  border-radius: var(--kc-auth-radius, 14px);
+  box-shadow: 0 20px 50px rgba(120, 50, 120, 0.20);
+}
+.kc-auth-modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 14px 18px;
+  border-bottom: 1px solid var(--kc-auth-border, #f3e1f3);
+  font-weight: 600;
+}
+.kc-auth-modal-body { padding: 16px 18px 18px; }
+.kc-auth-close {
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  font-size: 20px;
+  line-height: 1;
+  color: var(--kc-auth-muted, #806f80);
+  background: none;
+  border: 0;
+  border-radius: 6px;
+  cursor: pointer;
+}
+.kc-auth-close:hover { background: var(--kc-auth-disabled-bg, #f8f1f8); }
+
+@media (max-width: 640px) {
+  .kc-auth-grid { grid-template-columns: minmax(0, 1fr); }
+  .kc-auth-card { padding: 22px 18px 18px; }
+  .kc-auth-table.stack thead { display: none; }
+  .kc-auth-table.stack tr { display: block; padding: 8px 0; border-bottom: 1px solid var(--kc-auth-border, #f3e1f3); }
+  .kc-auth-table.stack td { display: flex; gap: 10px; padding: 3px 12px; border: 0; text-align: left; }
+  .kc-auth-table.stack td[data-label]::before {
+    content: attr(data-label);
+    flex: 0 0 110px;
+    color: var(--kc-auth-muted, #806f80);
+  }
+  .kc-auth-table.stack td.empty { display: block; }
+}
+`;
+function ensureAuthStyles() {
+	const doc = inject(DOCUMENT);
+	if (!doc.head || doc.getElementById(STYLE_ID)) return;
+	const style = doc.createElement("style");
+	style.id = STYLE_ID;
+	const nonce = inject(CSP_NONCE, { optional: true });
+	if (nonce) style.setAttribute("nonce", nonce);
+	style.textContent = AUTH_CSS;
+	doc.head.appendChild(style);
+}
+var KcPasswordToggleComponent = class KcPasswordToggleComponent {
+	host = inject(ElementRef);
+	shown = signal(false, ...ngDevMode ? [{ debugName: "shown" }] : /* istanbul ignore next */ []);
+	input = null;
+	constructor() {
+		ensureAuthStyles();
+	}
+	ngAfterContentInit() {
+		this.input = this.host.nativeElement.querySelector("input");
+	}
+	toggle() {
+		if (!this.input) return;
+		this.shown.update((v) => !v);
+		this.input.type = this.shown() ? "text" : "password";
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: KcPasswordToggleComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: KcPasswordToggleComponent,
+		isStandalone: true,
+		selector: "kc-password",
+		host: { classAttribute: "kc-auth-pw" },
+		ngImport: i0,
+		template: `
+    <ng-content />
+    <button type="button" class="kc-auth-pw-toggle" [attr.aria-label]="shown() ? 'ซ่อนรหัสผ่าน' : 'แสดงรหัสผ่าน'"
+      [attr.aria-pressed]="shown()" [attr.title]="shown() ? 'ซ่อนรหัสผ่าน' : 'แสดงรหัสผ่าน'"
+      (mousedown)="$event.preventDefault()" (click)="toggle()">
+      @if (shown()) {
+      <!-- ตาปิด (กด = ซ่อน) -->
+      <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M3 3l18 18" />
+        <path d="M10.6 5.1A9.8 9.8 0 0 1 12 5c5 0 8.6 4.2 9.7 6.2a1.7 1.7 0 0 1 0 1.6 15 15 0 0 1-2.6 3.4" />
+        <path d="M6.6 6.6A15.4 15.4 0 0 0 2.3 11.2a1.7 1.7 0 0 0 0 1.6C3.4 14.8 7 19 12 19a9.6 9.6 0 0 0 5.4-1.6" />
+        <path d="M9.9 9.9a3 3 0 0 0 4.2 4.2" />
+      </svg>
+      } @else {
+      <!-- ตาเปิด (กด = แสดง) -->
+      <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M2.3 12.8a1.7 1.7 0 0 1 0-1.6C3.4 9.2 7 5 12 5s8.6 4.2 9.7 6.2a1.7 1.7 0 0 1 0 1.6C20.6 14.8 17 19 12 19s-8.6-4.2-9.7-6.2z" />
+        <circle cx="12" cy="12" r="3" />
+      </svg>
+      }
+    </button>
+  `,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: KcPasswordToggleComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "kc-password",
+			standalone: true,
+			host: { class: "kc-auth-pw" },
+			template: `
+    <ng-content />
+    <button type="button" class="kc-auth-pw-toggle" [attr.aria-label]="shown() ? 'ซ่อนรหัสผ่าน' : 'แสดงรหัสผ่าน'"
+      [attr.aria-pressed]="shown()" [attr.title]="shown() ? 'ซ่อนรหัสผ่าน' : 'แสดงรหัสผ่าน'"
+      (mousedown)="$event.preventDefault()" (click)="toggle()">
+      @if (shown()) {
+      <!-- ตาปิด (กด = ซ่อน) -->
+      <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M3 3l18 18" />
+        <path d="M10.6 5.1A9.8 9.8 0 0 1 12 5c5 0 8.6 4.2 9.7 6.2a1.7 1.7 0 0 1 0 1.6 15 15 0 0 1-2.6 3.4" />
+        <path d="M6.6 6.6A15.4 15.4 0 0 0 2.3 11.2a1.7 1.7 0 0 0 0 1.6C3.4 14.8 7 19 12 19a9.6 9.6 0 0 0 5.4-1.6" />
+        <path d="M9.9 9.9a3 3 0 0 0 4.2 4.2" />
+      </svg>
+      } @else {
+      <!-- ตาเปิด (กด = แสดง) -->
+      <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M2.3 12.8a1.7 1.7 0 0 1 0-1.6C3.4 9.2 7 5 12 5s8.6 4.2 9.7 6.2a1.7 1.7 0 0 1 0 1.6C20.6 14.8 17 19 12 19s-8.6-4.2-9.7-6.2z" />
+        <circle cx="12" cy="12" r="3" />
+      </svg>
+      }
+    </button>
+  `
+		}]
+	}],
+	ctorParameters: () => []
+});
+var KcLoginComponent = class KcLoginComponent {
+	config = inject(KC_AUTH_CONFIG);
+	paths = KC_AUTH_PATHS;
+	auth = inject(KcAuthService);
+	http = inject(HttpClient);
+	router = inject(Router);
+	route = inject(ActivatedRoute);
+	busy = signal("", ...ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []);
+	message = signal(null, ...ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []);
+	form = inject(FormBuilder).nonNullable.group({
+		username: ["", Validators.required],
+		password: ["", Validators.required]
+	});
+	constructor() {
+		ensureAuthStyles();
+	}
+	get returnUrl() {
+		return this.auth.safeReturnUrl(this.route.snapshot.queryParamMap.get("returnUrl"));
+	}
+	ngOnInit() {
+		if (this.route.snapshot.queryParamMap.get("expired") === "1") this.message.set({
+			text: "หมดเวลาการใช้งาน กรุณาเข้าสู่ระบบใหม่",
+			error: false
+		});
+		else if (this.auth.isLoggedIn()) this.router.navigateByUrl(this.returnUrl);
+	}
+	submit() {
+		if (this.busy()) return;
+		const v = this.form.getRawValue();
+		if (!v.username.trim() || !v.password) {
+			this.message.set({
+				text: "กรุณากรอกชื่อผู้ใช้และรหัสผ่าน",
+				error: true
+			});
+			return;
+		}
+		this.busy.set("password");
+		this.message.set(null);
+		this.http.post(`${this.config.apiBase}/user/login`, {
+			username: v.username.trim(),
+			password: v.password
+		}).subscribe({
+			next: (res) => {
+				this.auth.start(res);
+				this.router.navigateByUrl(this.returnUrl);
+			},
+			error: (err) => {
+				this.busy.set("");
+				this.message.set({
+					text: kcErrorMessage(err, "เข้าสู่ระบบไม่สำเร็จ"),
+					error: true
+				});
+			}
+		});
+	}
+	startSso() {
+		const sso = this.config.sso;
+		if (!sso || this.busy()) return;
+		this.busy.set("sso");
+		this.message.set(null);
+		this.http.get(`${this.config.apiBase}/user/sso/authorize-url`).subscribe({
+			next: ({ url, state }) => {
+				this.auth.setTemp(KC_SSO_STATE_KEY, state);
+				this.auth.setTemp(KC_RETURN_URL_KEY, this.returnUrl);
+				this.auth.redirect(url);
+			},
+			error: (err) => {
+				this.busy.set("");
+				this.message.set({
+					text: err.status === 404 ? `ระบบยังไม่ได้ตั้งค่าการเข้าสู่ระบบด้วย ${sso.label}` : kcErrorMessage(err, `ไม่สามารถเชื่อมต่อ ${sso.label} ได้ กรุณาลองใหม่อีกครั้ง`),
+					error: true
+				});
+			}
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: KcLoginComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: KcLoginComponent,
+		isStandalone: true,
+		selector: "kc-login",
+		ngImport: i0,
+		template: `
+    <div class="kc-auth-screen">
+      <div class="kc-auth-card">
+        @if (config.logoUrl) {
+        <img class="kc-auth-logo" [src]="config.logoUrl" alt="" />
+        }
+        <h1 class="kc-auth-title">{{ config.appName }}</h1>
+        <p class="kc-auth-subtitle">ลงชื่อเข้าสู่ระบบ</p>
+
+        @if (message(); as m) {
+        <div class="kc-auth-alert" [class.error]="m.error" [class.info]="!m.error" role="alert">{{ m.text }}</div>
+        }
+
+        @if (config.passwordLogin) {
+        <form [formGroup]="form" (ngSubmit)="submit()" novalidate>
+          <label class="kc-auth-field">
+            <span>ชื่อผู้ใช้</span>
+            <input class="kc-auth-input" type="text" formControlName="username" autocomplete="username" />
+          </label>
+          <label class="kc-auth-field">
+            <span>รหัสผ่าน</span>
+            <kc-password><input class="kc-auth-input" type="password" formControlName="password" autocomplete="current-password" /></kc-password>
+          </label>
+          <!-- ปุ่มเข้าสู่ระบบกับ SSO อยู่บรรทัดเดียวกัน แบ่งครึ่ง — ปุ่ม SSO ใช้แค่ชื่อเพื่อให้พอดีครึ่งการ์ด -->
+          <div class="kc-auth-btn-row">
+            <button type="submit" class="kc-auth-btn primary" [disabled]="!!busy()">
+              {{ busy() === 'password' ? 'กำลังเข้าสู่ระบบ...' : 'เข้าสู่ระบบ' }}
+            </button>
+            @if (config.sso; as sso) {
+            <button type="button" class="kc-auth-btn outline" [disabled]="!!busy()" (click)="startSso()"
+              [attr.title]="'เข้าสู่ระบบด้วย ' + sso.label">
+              {{ busy() === 'sso' ? 'กำลังเชื่อมต่อ...' : sso.label }}
+            </button>
+            }
+          </div>
+        </form>
+        } @else if (config.sso; as sso) {
+        <!-- ปิดรหัสผ่าน: มีแต่ปุ่ม SSO ตรงกลาง -->
+        <div class="kc-auth-sso-only">
+          <button type="button" class="kc-auth-btn primary" [disabled]="!!busy()" (click)="startSso()">
+            {{ busy() === 'sso' ? 'กำลังเชื่อมต่อ...' : 'เข้าสู่ระบบด้วย ' + sso.label }}
+          </button>
+        </div>
+        }
+
+        @if (config.register === 'form') {
+        <p class="kc-auth-footer">ยังไม่มีบัญชี? <a class="kc-auth-link" [routerLink]="paths.register">ลงทะเบียน</a></p>
+        } @else if (config.register === 'sso' && config.sso) {
+        <p class="kc-auth-footer">ผู้ใช้ใหม่ กดปุ่ม {{ config.sso.label }} เพื่อลงทะเบียน</p>
+        }
+        <ng-content />
+      </div>
+    </div>
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "ngmodule",
+				type: ReactiveFormsModule
+			},
+			{
+				kind: "directive",
+				type: i1.ɵNgNoValidate,
+				selector: "form:not([ngNoForm]):not([ngNativeValidate])"
+			},
+			{
+				kind: "directive",
+				type: i1.DefaultValueAccessor,
+				selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]"
+			},
+			{
+				kind: "directive",
+				type: i1.NgControlStatus,
+				selector: "[formControlName],[ngModel],[formControl]"
+			},
+			{
+				kind: "directive",
+				type: i1.NgControlStatusGroup,
+				selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]"
+			},
+			{
+				kind: "directive",
+				type: i1.FormGroupDirective,
+				selector: "[formGroup]",
+				inputs: ["formGroup"],
+				outputs: ["ngSubmit"],
+				exportAs: ["ngForm"]
+			},
+			{
+				kind: "directive",
+				type: i1.FormControlName,
+				selector: "[formControlName]",
+				inputs: [
+					"formControlName",
+					"disabled",
+					"ngModel"
+				],
+				outputs: ["ngModelChange"]
+			},
+			{
+				kind: "directive",
+				type: RouterLink,
+				selector: "[routerLink]",
+				inputs: [
+					"target",
+					"queryParams",
+					"fragment",
+					"queryParamsHandling",
+					"state",
+					"info",
+					"relativeTo",
+					"preserveFragment",
+					"skipLocationChange",
+					"replaceUrl",
+					"browserUrl",
+					"routerLink"
+				]
+			},
+			{
+				kind: "component",
+				type: KcPasswordToggleComponent,
+				selector: "kc-password"
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: KcLoginComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "kc-login",
+			standalone: true,
+			imports: [
+				ReactiveFormsModule,
+				RouterLink,
+				KcPasswordToggleComponent
+			],
+			template: `
+    <div class="kc-auth-screen">
+      <div class="kc-auth-card">
+        @if (config.logoUrl) {
+        <img class="kc-auth-logo" [src]="config.logoUrl" alt="" />
+        }
+        <h1 class="kc-auth-title">{{ config.appName }}</h1>
+        <p class="kc-auth-subtitle">ลงชื่อเข้าสู่ระบบ</p>
+
+        @if (message(); as m) {
+        <div class="kc-auth-alert" [class.error]="m.error" [class.info]="!m.error" role="alert">{{ m.text }}</div>
+        }
+
+        @if (config.passwordLogin) {
+        <form [formGroup]="form" (ngSubmit)="submit()" novalidate>
+          <label class="kc-auth-field">
+            <span>ชื่อผู้ใช้</span>
+            <input class="kc-auth-input" type="text" formControlName="username" autocomplete="username" />
+          </label>
+          <label class="kc-auth-field">
+            <span>รหัสผ่าน</span>
+            <kc-password><input class="kc-auth-input" type="password" formControlName="password" autocomplete="current-password" /></kc-password>
+          </label>
+          <!-- ปุ่มเข้าสู่ระบบกับ SSO อยู่บรรทัดเดียวกัน แบ่งครึ่ง — ปุ่ม SSO ใช้แค่ชื่อเพื่อให้พอดีครึ่งการ์ด -->
+          <div class="kc-auth-btn-row">
+            <button type="submit" class="kc-auth-btn primary" [disabled]="!!busy()">
+              {{ busy() === 'password' ? 'กำลังเข้าสู่ระบบ...' : 'เข้าสู่ระบบ' }}
+            </button>
+            @if (config.sso; as sso) {
+            <button type="button" class="kc-auth-btn outline" [disabled]="!!busy()" (click)="startSso()"
+              [attr.title]="'เข้าสู่ระบบด้วย ' + sso.label">
+              {{ busy() === 'sso' ? 'กำลังเชื่อมต่อ...' : sso.label }}
+            </button>
+            }
+          </div>
+        </form>
+        } @else if (config.sso; as sso) {
+        <!-- ปิดรหัสผ่าน: มีแต่ปุ่ม SSO ตรงกลาง -->
+        <div class="kc-auth-sso-only">
+          <button type="button" class="kc-auth-btn primary" [disabled]="!!busy()" (click)="startSso()">
+            {{ busy() === 'sso' ? 'กำลังเชื่อมต่อ...' : 'เข้าสู่ระบบด้วย ' + sso.label }}
+          </button>
+        </div>
+        }
+
+        @if (config.register === 'form') {
+        <p class="kc-auth-footer">ยังไม่มีบัญชี? <a class="kc-auth-link" [routerLink]="paths.register">ลงทะเบียน</a></p>
+        } @else if (config.register === 'sso' && config.sso) {
+        <p class="kc-auth-footer">ผู้ใช้ใหม่ กดปุ่ม {{ config.sso.label }} เพื่อลงทะเบียน</p>
+        }
+        <ng-content />
+      </div>
+    </div>
+  `
+		}]
+	}],
+	ctorParameters: () => []
+});
+const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+const MOBILE_RE = /^0\d{9}$/;
+function kcUsernameProblem(username) {
+	const u = username.trim();
+	if (!u) return "กรุณากรอกชื่อผู้ใช้";
+	if (/\s/.test(u)) return "ชื่อผู้ใช้ห้ามมีช่องว่าง";
+	if (u.length > 50) return "ชื่อผู้ใช้ยาวได้ไม่เกิน 50 ตัวอักษร";
+	return "";
+}
+function kcPasswordProblem(password, confirm, minLength, required) {
+	if (!password && !required && !confirm) return "";
+	if (password.length < minLength) return `กรุณากรอกรหัสผ่านอย่างน้อย ${minLength} ตัวอักษร`;
+	if (password !== confirm) return "รหัสผ่านทั้งสองช่องไม่ตรงกัน";
+	return "";
+}
+function kcContactProblem(email, mobile) {
+	if (!EMAIL_RE.test(email.trim())) return "กรุณากรอกอีเมลให้ถูกต้อง";
+	if (!MOBILE_RE.test(mobile.trim())) return "กรุณากรอกเบอร์มือถือ 10 หลัก ขึ้นต้นด้วย 0";
+	return "";
+}
+var KcRegisterComponent = class KcRegisterComponent {
+	config = inject(KC_AUTH_CONFIG);
+	paths = KC_AUTH_PATHS;
+	ssoLabel = this.config.sso?.label ?? "SSO";
+	auth = inject(KcAuthService);
+	http = inject(HttpClient);
+	router = inject(Router);
+	loading = signal(false, ...ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []);
+	ready = signal(false, ...ngDevMode ? [{ debugName: "ready" }] : /* istanbul ignore next */ []);
+	saving = signal(false, ...ngDevMode ? [{ debugName: "saving" }] : /* istanbul ignore next */ []);
+	error = signal("", ...ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []);
+	done = signal("", ...ngDevMode ? [{ debugName: "done" }] : /* istanbul ignore next */ []);
+	notice = signal("", ...ngDevMode ? [{ debugName: "notice" }] : /* istanbul ignore next */ []);
+	fromSso = signal(false, ...ngDevMode ? [{ debugName: "fromSso" }] : /* istanbul ignore next */ []);
+	cid = signal("", ...ngDevMode ? [{ debugName: "cid" }] : /* istanbul ignore next */ []);
+	orgs = signal([], ...ngDevMode ? [{ debugName: "orgs" }] : /* istanbul ignore next */ []);
+	orgLocked = signal(false, ...ngDevMode ? [{ debugName: "orgLocked" }] : /* istanbul ignore next */ []);
+	lockedOrg = signal("", ...ngDevMode ? [{ debugName: "lockedOrg" }] : /* istanbul ignore next */ []);
+	orgName = computed(() => this.orgs().find((o) => o.value === this.lockedOrg())?.label ?? this.lockedOrg(), ...ngDevMode ? [{ debugName: "orgName" }] : /* istanbul ignore next */ []);
+	form = inject(FormBuilder).nonNullable.group({
+		fullName: [""],
+		org: [""],
+		username: [""],
+		password: [""],
+		confirmPassword: [""]
+	});
+	ticket = "";
+	constructor() {
+		ensureAuthStyles();
+	}
+	ngOnInit() {
+		const mode = this.config.register;
+		if (mode === "none") {
+			this.error.set("ระบบนี้ไม่เปิดให้ลงทะเบียนเอง กรุณาติดต่อผู้ดูแลระบบ");
+			return;
+		}
+		if (mode === "sso") {
+			this.ticket = this.auth.getTemp(KC_SSO_TICKET_KEY);
+			if (!this.ticket) {
+				this.error.set(`ยังไม่ได้ยืนยันตัวตน กรุณากลับไปกด "เข้าสู่ระบบด้วย ${this.ssoLabel}" ที่หน้าเข้าสู่ระบบก่อน`);
+				return;
+			}
+		}
+		this.loading.set(true);
+		const params = this.ticket ? { ticket: this.ticket } : {};
+		this.http.get(`${this.config.apiBase}/user/register-info`, { params }).subscribe({
+			next: (info) => {
+				this.orgs.set(info.orgs ?? []);
+				this.cid.set(info.cid ?? "");
+				this.notice.set(info.notice ?? "");
+				this.form.patchValue({
+					fullName: info.fullName ?? "",
+					org: info.org ?? ""
+				});
+				if (info.fullName) {
+					this.fromSso.set(true);
+					this.form.controls.fullName.disable();
+				}
+				if (info.orgLocked && info.org) {
+					this.orgLocked.set(true);
+					this.lockedOrg.set(info.org);
+				}
+				this.loading.set(false);
+				this.ready.set(true);
+			},
+			error: (err) => {
+				this.loading.set(false);
+				if (this.ticket) this.auth.takeTemp(KC_SSO_TICKET_KEY);
+				this.error.set(kcErrorMessage(err, "ไม่สามารถเริ่มการลงทะเบียนได้"));
+			}
+		});
+	}
+	submit() {
+		if (this.saving()) return;
+		const v = this.form.getRawValue();
+		const problem = (!v.fullName.trim() ? "กรุณากรอกชื่อ-สกุล" : "") || kcUsernameProblem(v.username) || kcPasswordProblem(v.password, v.confirmPassword, this.config.passwordMinLength, true) || (this.orgs().length && !v.org ? `กรุณาเลือก${this.config.orgLabel}ที่สังกัด` : "");
+		this.error.set(problem);
+		if (problem) return;
+		const body = {
+			...this.ticket ? { ticket: this.ticket } : {},
+			fullName: v.fullName.trim(),
+			username: v.username.trim(),
+			password: v.password,
+			org: v.org
+		};
+		this.saving.set(true);
+		this.http.post(`${this.config.apiBase}/user/register`, body).subscribe({
+			next: (res) => {
+				this.saving.set(false);
+				if (this.ticket) this.auth.takeTemp(KC_SSO_TICKET_KEY);
+				if (res?.token && res.user) {
+					this.auth.start({
+						token: res.token,
+						user: res.user
+					});
+					this.router.navigateByUrl(this.config.homeUrl);
+					return;
+				}
+				this.done.set(res?.message || "ลงทะเบียนเรียบร้อยแล้ว กรุณาเข้าสู่ระบบ");
+			},
+			error: (err) => {
+				this.saving.set(false);
+				this.error.set(kcErrorMessage(err, "ลงทะเบียนไม่สำเร็จ"));
+			}
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: KcRegisterComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: KcRegisterComponent,
+		isStandalone: true,
+		selector: "kc-register",
+		ngImport: i0,
+		template: `
+    <div class="kc-auth-screen">
+      <div class="kc-auth-card">
+        <h1 class="kc-auth-title">ลงทะเบียนผู้ใช้ใหม่</h1>
+        <p class="kc-auth-subtitle">{{ config.appName }}</p>
+
+        @if (loading()) {
+        <p class="kc-auth-subtitle">{{ ticket ? 'กำลังตรวจสอบการยืนยันตัวตน...' : 'กำลังโหลดข้อมูล...' }}</p>
+        } @else if (done()) {
+        <div class="kc-auth-alert success" role="status">{{ done() }}</div>
+        <div class="kc-auth-actions center">
+          <a class="kc-auth-btn primary" [routerLink]="paths.login">กลับไปหน้าเข้าสู่ระบบ</a>
+        </div>
+        } @else if (!ready()) {
+        <!-- ไม่มีตั๋ว / ตั๋วใช้ไม่ได้ / ไม่เปิดให้ลงทะเบียน — ไม่แสดงฟอร์ม เพราะกรอกไปก็ส่งไม่ผ่าน -->
+        <div class="kc-auth-alert error" role="alert">{{ error() }}</div>
+        <div class="kc-auth-actions center">
+          <a class="kc-auth-btn" [routerLink]="paths.login">กลับไปหน้าเข้าสู่ระบบ</a>
+        </div>
+        } @else {
+        @if (notice()) {
+        <div class="kc-auth-alert warn" role="status">{{ notice() }}</div>
+        }
+        <form [formGroup]="form" (ngSubmit)="submit()" novalidate>
+          <label class="kc-auth-field">
+            <span>ชื่อ-สกุล @if (fromSso()) { (จาก {{ ssoLabel }}) } @else { <span class="req">*</span> }</span>
+            <input class="kc-auth-input" type="text" formControlName="fullName" maxlength="200" autocomplete="name" />
+          </label>
+
+          @if (cid()) {
+          <label class="kc-auth-field">
+            <span>เลขบัตรประชาชน</span>
+            <input class="kc-auth-input" type="text" [value]="cid()" disabled />
+          </label>
+          }
+
+          @if (orgs().length) {
+          @if (orgLocked()) {
+          <label class="kc-auth-field">
+            <span>{{ config.orgLabel }}ที่สังกัด</span>
+            <input class="kc-auth-input" type="text" [value]="orgName()" disabled />
+          </label>
+          } @else {
+          <div class="kc-auth-field">
+            <label class="kc-auth-label" for="kc-reg-org">{{ config.orgLabel }}ที่สังกัด <span class="req">*</span></label>
+            <app-search-select inputId="kc-reg-org" [options]="orgs()" formControlName="org"
+              [placeholder]="'-- เลือก' + config.orgLabel + 'ที่สังกัด --'" />
+          </div>
+          }
+          }
+
+          <label class="kc-auth-field">
+            <span>ชื่อผู้ใช้ <span class="req">*</span></span>
+            <input class="kc-auth-input" type="text" formControlName="username" maxlength="50" autocomplete="username" />
+          </label>
+          <label class="kc-auth-field">
+            <span>รหัสผ่าน <span class="req">*</span></span>
+            <kc-password><input class="kc-auth-input" type="password" formControlName="password" maxlength="50" autocomplete="new-password" /></kc-password>
+          </label>
+          <label class="kc-auth-field">
+            <span>ยืนยันรหัสผ่าน <span class="req">*</span></span>
+            <kc-password><input class="kc-auth-input" type="password" formControlName="confirmPassword" maxlength="50" autocomplete="new-password" /></kc-password>
+          </label>
+
+          <div class="kc-auth-actions center">
+            <button type="submit" class="kc-auth-btn primary" [disabled]="saving()">
+              {{ saving() ? 'กำลังบันทึก...' : 'ลงทะเบียน' }}
+            </button>
+            <a class="kc-auth-btn" [routerLink]="paths.login" [class.disabled]="saving()">ยกเลิก</a>
+          </div>
+
+          @if (error()) {
+          <div class="kc-auth-alert error" role="alert" style="margin: 14px 0 0">{{ error() }}</div>
+          }
+        </form>
+        }
+      </div>
+    </div>
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "ngmodule",
+				type: ReactiveFormsModule
+			},
+			{
+				kind: "directive",
+				type: i1.ɵNgNoValidate,
+				selector: "form:not([ngNoForm]):not([ngNativeValidate])"
+			},
+			{
+				kind: "directive",
+				type: i1.DefaultValueAccessor,
+				selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]"
+			},
+			{
+				kind: "directive",
+				type: i1.NgControlStatus,
+				selector: "[formControlName],[ngModel],[formControl]"
+			},
+			{
+				kind: "directive",
+				type: i1.NgControlStatusGroup,
+				selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]"
+			},
+			{
+				kind: "directive",
+				type: i1.MaxLengthValidator,
+				selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]",
+				inputs: ["maxlength"]
+			},
+			{
+				kind: "directive",
+				type: i1.FormGroupDirective,
+				selector: "[formGroup]",
+				inputs: ["formGroup"],
+				outputs: ["ngSubmit"],
+				exportAs: ["ngForm"]
+			},
+			{
+				kind: "directive",
+				type: i1.FormControlName,
+				selector: "[formControlName]",
+				inputs: [
+					"formControlName",
+					"disabled",
+					"ngModel"
+				],
+				outputs: ["ngModelChange"]
+			},
+			{
+				kind: "directive",
+				type: RouterLink,
+				selector: "[routerLink]",
+				inputs: [
+					"target",
+					"queryParams",
+					"fragment",
+					"queryParamsHandling",
+					"state",
+					"info",
+					"relativeTo",
+					"preserveFragment",
+					"skipLocationChange",
+					"replaceUrl",
+					"browserUrl",
+					"routerLink"
+				]
+			},
+			{
+				kind: "component",
+				type: SearchSelectComponent,
+				selector: "app-search-select",
+				inputs: [
+					"options",
+					"placeholder",
+					"searchHint",
+					"inputId"
+				]
+			},
+			{
+				kind: "component",
+				type: KcPasswordToggleComponent,
+				selector: "kc-password"
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: KcRegisterComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "kc-register",
+			standalone: true,
+			imports: [
+				ReactiveFormsModule,
+				RouterLink,
+				SearchSelectComponent,
+				KcPasswordToggleComponent
+			],
+			template: `
+    <div class="kc-auth-screen">
+      <div class="kc-auth-card">
+        <h1 class="kc-auth-title">ลงทะเบียนผู้ใช้ใหม่</h1>
+        <p class="kc-auth-subtitle">{{ config.appName }}</p>
+
+        @if (loading()) {
+        <p class="kc-auth-subtitle">{{ ticket ? 'กำลังตรวจสอบการยืนยันตัวตน...' : 'กำลังโหลดข้อมูล...' }}</p>
+        } @else if (done()) {
+        <div class="kc-auth-alert success" role="status">{{ done() }}</div>
+        <div class="kc-auth-actions center">
+          <a class="kc-auth-btn primary" [routerLink]="paths.login">กลับไปหน้าเข้าสู่ระบบ</a>
+        </div>
+        } @else if (!ready()) {
+        <!-- ไม่มีตั๋ว / ตั๋วใช้ไม่ได้ / ไม่เปิดให้ลงทะเบียน — ไม่แสดงฟอร์ม เพราะกรอกไปก็ส่งไม่ผ่าน -->
+        <div class="kc-auth-alert error" role="alert">{{ error() }}</div>
+        <div class="kc-auth-actions center">
+          <a class="kc-auth-btn" [routerLink]="paths.login">กลับไปหน้าเข้าสู่ระบบ</a>
+        </div>
+        } @else {
+        @if (notice()) {
+        <div class="kc-auth-alert warn" role="status">{{ notice() }}</div>
+        }
+        <form [formGroup]="form" (ngSubmit)="submit()" novalidate>
+          <label class="kc-auth-field">
+            <span>ชื่อ-สกุล @if (fromSso()) { (จาก {{ ssoLabel }}) } @else { <span class="req">*</span> }</span>
+            <input class="kc-auth-input" type="text" formControlName="fullName" maxlength="200" autocomplete="name" />
+          </label>
+
+          @if (cid()) {
+          <label class="kc-auth-field">
+            <span>เลขบัตรประชาชน</span>
+            <input class="kc-auth-input" type="text" [value]="cid()" disabled />
+          </label>
+          }
+
+          @if (orgs().length) {
+          @if (orgLocked()) {
+          <label class="kc-auth-field">
+            <span>{{ config.orgLabel }}ที่สังกัด</span>
+            <input class="kc-auth-input" type="text" [value]="orgName()" disabled />
+          </label>
+          } @else {
+          <div class="kc-auth-field">
+            <label class="kc-auth-label" for="kc-reg-org">{{ config.orgLabel }}ที่สังกัด <span class="req">*</span></label>
+            <app-search-select inputId="kc-reg-org" [options]="orgs()" formControlName="org"
+              [placeholder]="'-- เลือก' + config.orgLabel + 'ที่สังกัด --'" />
+          </div>
+          }
+          }
+
+          <label class="kc-auth-field">
+            <span>ชื่อผู้ใช้ <span class="req">*</span></span>
+            <input class="kc-auth-input" type="text" formControlName="username" maxlength="50" autocomplete="username" />
+          </label>
+          <label class="kc-auth-field">
+            <span>รหัสผ่าน <span class="req">*</span></span>
+            <kc-password><input class="kc-auth-input" type="password" formControlName="password" maxlength="50" autocomplete="new-password" /></kc-password>
+          </label>
+          <label class="kc-auth-field">
+            <span>ยืนยันรหัสผ่าน <span class="req">*</span></span>
+            <kc-password><input class="kc-auth-input" type="password" formControlName="confirmPassword" maxlength="50" autocomplete="new-password" /></kc-password>
+          </label>
+
+          <div class="kc-auth-actions center">
+            <button type="submit" class="kc-auth-btn primary" [disabled]="saving()">
+              {{ saving() ? 'กำลังบันทึก...' : 'ลงทะเบียน' }}
+            </button>
+            <a class="kc-auth-btn" [routerLink]="paths.login" [class.disabled]="saving()">ยกเลิก</a>
+          </div>
+
+          @if (error()) {
+          <div class="kc-auth-alert error" role="alert" style="margin: 14px 0 0">{{ error() }}</div>
+          }
+        </form>
+        }
+      </div>
+    </div>
+  `
+		}]
+	}],
+	ctorParameters: () => []
+});
+var KcSsoCallbackComponent = class KcSsoCallbackComponent {
+	config = inject(KC_AUTH_CONFIG);
+	auth = inject(KcAuthService);
+	http = inject(HttpClient);
+	route = inject(ActivatedRoute);
+	router = inject(Router);
+	paths = KC_AUTH_PATHS;
+	label = this.config.sso?.label ?? "SSO";
+	message = signal(`กำลังเข้าสู่ระบบผ่าน ${this.label}...`, ...ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []);
+	failed = signal(false, ...ngDevMode ? [{ debugName: "failed" }] : /* istanbul ignore next */ []);
+	constructor() {
+		ensureAuthStyles();
+	}
+	ngOnInit() {
+		const params = this.route.snapshot.queryParamMap;
+		const expectedState = this.auth.takeTemp(KC_SSO_STATE_KEY);
+		const code = params.get("code");
+		if (params.get("error")) {
+			this.fail(`${this.label} ปฏิเสธการเข้าสู่ระบบ กรุณาลองใหม่อีกครั้ง`);
+			return;
+		}
+		if (!code) {
+			this.message.set(`กำลังเชื่อมต่อกับ ${this.label}...`);
+			this.http.get(`${this.config.apiBase}/user/sso/authorize-url`).subscribe({
+				next: ({ url, state }) => {
+					this.auth.setTemp(KC_SSO_STATE_KEY, state);
+					this.auth.redirect(url);
+				},
+				error: () => this.fail(`ไม่สามารถเชื่อมต่อ ${this.label} ได้ กรุณาเริ่มเข้าสู่ระบบใหม่`)
+			});
+			return;
+		}
+		if (!expectedState || expectedState !== params.get("state")) {
+			this.fail("คำขอเข้าสู่ระบบไม่ถูกต้อง (state ไม่ตรงกัน) กรุณาเริ่มเข้าสู่ระบบใหม่");
+			return;
+		}
+		this.http.post(`${this.config.apiBase}/user/sso/callback`, { code }).subscribe({
+			next: (res) => {
+				if (res.mode === "signed-in" && res.token && res.user) {
+					this.auth.start({
+						token: res.token,
+						user: res.user
+					});
+					this.router.navigateByUrl(this.auth.safeReturnUrl(this.auth.takeTemp(KC_RETURN_URL_KEY)), { replaceUrl: true });
+					return;
+				}
+				if (res.mode === "register" && res.ticket) {
+					this.auth.setTemp(KC_SSO_TICKET_KEY, res.ticket);
+					this.message.set("ยังไม่มีบัญชีในระบบ กำลังไปหน้าลงทะเบียน...");
+					this.router.navigateByUrl(KC_AUTH_PATHS.register, { replaceUrl: true });
+					return;
+				}
+				this.fail("ไม่สามารถเข้าสู่ระบบได้ กรุณาลองใหม่อีกครั้ง");
+			},
+			error: (err) => this.fail(kcErrorMessage(err, `ไม่สามารถเข้าสู่ระบบผ่าน ${this.label} ได้`))
+		});
+	}
+	fail(message) {
+		this.message.set(message);
+		this.failed.set(true);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: KcSsoCallbackComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: KcSsoCallbackComponent,
+		isStandalone: true,
+		selector: "kc-sso-callback",
+		ngImport: i0,
+		template: `
+    <div class="kc-auth-screen">
+      <div class="kc-auth-card center">
+        <h1 class="kc-auth-title">{{ label }}</h1>
+        @if (failed()) {
+        <div class="kc-auth-alert error" role="alert" style="margin-top: 16px">{{ message() }}</div>
+        <a class="kc-auth-btn" [routerLink]="paths.login">กลับไปหน้าเข้าสู่ระบบ</a>
+        } @else {
+        <p class="kc-auth-subtitle" style="margin-bottom: 0">{{ message() }}</p>
+        }
+      </div>
+    </div>
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "directive",
+			type: RouterLink,
+			selector: "[routerLink]",
+			inputs: [
+				"target",
+				"queryParams",
+				"fragment",
+				"queryParamsHandling",
+				"state",
+				"info",
+				"relativeTo",
+				"preserveFragment",
+				"skipLocationChange",
+				"replaceUrl",
+				"browserUrl",
+				"routerLink"
+			]
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: KcSsoCallbackComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "kc-sso-callback",
+			standalone: true,
+			imports: [RouterLink],
+			template: `
+    <div class="kc-auth-screen">
+      <div class="kc-auth-card center">
+        <h1 class="kc-auth-title">{{ label }}</h1>
+        @if (failed()) {
+        <div class="kc-auth-alert error" role="alert" style="margin-top: 16px">{{ message() }}</div>
+        <a class="kc-auth-btn" [routerLink]="paths.login">กลับไปหน้าเข้าสู่ระบบ</a>
+        } @else {
+        <p class="kc-auth-subtitle" style="margin-bottom: 0">{{ message() }}</p>
+        }
+      </div>
+    </div>
+  `
+		}]
+	}],
+	ctorParameters: () => []
+});
+function kcAuthRoutes() {
+	return [
+		{
+			path: "login",
+			component: KcLoginComponent,
+			title: "เข้าสู่ระบบ"
+		},
+		{
+			path: "register",
+			component: KcRegisterComponent,
+			title: "ลงทะเบียน"
+		},
+		{
+			path: "sso-callback",
+			component: KcSsoCallbackComponent,
+			title: "เข้าสู่ระบบ"
+		}
+	];
+}
+var KcProfileComponent = class KcProfileComponent {
+	config = inject(KC_AUTH_CONFIG);
+	auth = inject(KcAuthService);
+	http = inject(HttpClient);
+	loading = signal(true, ...ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []);
+	loadFailed = signal(false, ...ngDevMode ? [{ debugName: "loadFailed" }] : /* istanbul ignore next */ []);
+	saving = signal(false, ...ngDevMode ? [{ debugName: "saving" }] : /* istanbul ignore next */ []);
+	error = signal("", ...ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []);
+	success = signal("", ...ngDevMode ? [{ debugName: "success" }] : /* istanbul ignore next */ []);
+	fullName = signal("", ...ngDevMode ? [{ debugName: "fullName" }] : /* istanbul ignore next */ []);
+	orgName = signal("", ...ngDevMode ? [{ debugName: "orgName" }] : /* istanbul ignore next */ []);
+	form = inject(FormBuilder).nonNullable.group({
+		email: ["", [Validators.required, Validators.email]],
+		mobile: ["", [Validators.required, Validators.pattern(/^0\d{9}$/)]],
+		username: ["", [Validators.required, Validators.pattern(/^\S+$/)]],
+		password: [""],
+		confirmPassword: [""]
+	});
+	constructor() {
+		ensureAuthStyles();
+	}
+	ngOnInit() {
+		this.http.get(`${this.config.apiBase}/user/me`).subscribe({
+			next: (me) => {
+				this.fullName.set(me.fullName);
+				this.orgName.set(me.orgName || me.org);
+				this.form.patchValue({
+					email: me.email ?? "",
+					mobile: me.mobile ?? "",
+					username: me.username ?? ""
+				});
+				this.loading.set(false);
+			},
+			error: (err) => {
+				this.loading.set(false);
+				this.loadFailed.set(true);
+				this.error.set(kcErrorMessage(err, "ไม่สามารถโหลดข้อมูลบัญชีได้"));
+			}
+		});
+	}
+	bad(name) {
+		const c = this.form.controls[name];
+		return c.touched && c.invalid;
+	}
+	submit() {
+		if (this.saving() || this.loading()) return;
+		this.success.set("");
+		this.form.markAllAsTouched();
+		const v = this.form.getRawValue();
+		const problem = kcContactProblem(v.email, v.mobile) || kcUsernameProblem(v.username) || kcPasswordProblem(v.password, v.confirmPassword, this.config.passwordMinLength, false);
+		this.error.set(problem);
+		if (problem) return;
+		const body = {
+			username: v.username.trim(),
+			email: v.email.trim(),
+			mobile: v.mobile.trim(),
+			password: v.password
+		};
+		this.saving.set(true);
+		this.http.put(`${this.config.apiBase}/user/me`, body).subscribe({
+			next: (res) => {
+				this.saving.set(false);
+				this.auth.updateUser({ username: body.username });
+				this.form.patchValue({
+					password: "",
+					confirmPassword: ""
+				});
+				this.success.set(res?.message || "บันทึกข้อมูลเรียบร้อยแล้ว");
+			},
+			error: (err) => {
+				this.saving.set(false);
+				this.error.set(kcErrorMessage(err, "บันทึกข้อมูลไม่สำเร็จ"));
+			}
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: KcProfileComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: KcProfileComponent,
+		isStandalone: true,
+		selector: "kc-profile",
+		ngImport: i0,
+		template: `
+    <div class="kc-auth-page single">
+      <div class="kc-auth-panel">
+        <h1 class="kc-auth-panel-title kc-auth-page-title">บัญชีของฉัน</h1>
+
+        @if (loading()) {
+        <p class="kc-auth-hint">กำลังโหลดข้อมูล...</p>
+        } @else if (loadFailed()) {
+        <div class="kc-auth-alert error" role="alert">{{ error() }}</div>
+        } @else {
+        <form [formGroup]="form" (ngSubmit)="submit()" novalidate>
+          <label class="kc-auth-field">
+            <span>ชื่อ-สกุล</span>
+            <input class="kc-auth-input" type="text" [value]="fullName()" disabled />
+          </label>
+
+          <label class="kc-auth-field">
+            <span>{{ config.orgLabel }}ที่สังกัด</span>
+            <input class="kc-auth-input" type="text" [value]="orgName()" disabled />
+            <small class="kc-auth-hint">หากต้องการย้าย{{ config.orgLabel }} กรุณาติดต่อผู้ดูแลระบบ</small>
+          </label>
+
+          <label class="kc-auth-field">
+            <span>อีเมล <span class="req">*</span></span>
+            <input class="kc-auth-input" type="email" formControlName="email" maxlength="100" autocomplete="email"
+              [class.invalid]="bad('email')" />
+            @if (bad('email')) {
+            <small class="kc-auth-field-error">* รูปแบบอีเมลไม่ถูกต้อง</small>
+            }
+          </label>
+
+          <label class="kc-auth-field">
+            <span>เบอร์โทรศัพท์มือถือ <span class="req">*</span></span>
+            <input class="kc-auth-input" type="tel" formControlName="mobile" maxlength="10" inputmode="numeric" autocomplete="tel"
+              [class.invalid]="bad('mobile')" />
+            @if (bad('mobile')) {
+            <small class="kc-auth-field-error">* เบอร์มือถือต้องเป็นตัวเลข 10 หลัก และขึ้นต้นด้วย 0</small>
+            }
+          </label>
+
+          <label class="kc-auth-field">
+            <span>ชื่อผู้ใช้ <span class="req">*</span></span>
+            <input class="kc-auth-input" type="text" formControlName="username" maxlength="50" autocomplete="username"
+              [class.invalid]="bad('username')" />
+            @if (bad('username')) {
+            <small class="kc-auth-field-error">* กรุณากรอกชื่อผู้ใช้ (ห้ามมีช่องว่าง)</small>
+            }
+          </label>
+
+          <label class="kc-auth-field">
+            <span>รหัสผ่านใหม่ <small class="kc-auth-hint">(อย่างน้อย {{ config.passwordMinLength }} ตัวอักษร — เว้นว่างถ้าไม่เปลี่ยน)</small></span>
+            <kc-password><input class="kc-auth-input" type="password" formControlName="password" maxlength="50" autocomplete="new-password" /></kc-password>
+          </label>
+
+          <label class="kc-auth-field">
+            <span>ยืนยันรหัสผ่านใหม่</span>
+            <kc-password><input class="kc-auth-input" type="password" formControlName="confirmPassword" maxlength="50" autocomplete="new-password" /></kc-password>
+          </label>
+
+          @if (error()) {
+          <div class="kc-auth-alert error" role="alert">{{ error() }}</div>
+          }
+          @if (success()) {
+          <div class="kc-auth-alert success" role="status">{{ success() }}</div>
+          }
+
+          <button type="submit" class="kc-auth-btn primary block" [disabled]="saving()">
+            {{ saving() ? 'กำลังบันทึก...' : 'บันทึกข้อมูล' }}
+          </button>
+        </form>
+        }
+      </div>
+    </div>
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "ngmodule",
+				type: ReactiveFormsModule
+			},
+			{
+				kind: "directive",
+				type: i1.ɵNgNoValidate,
+				selector: "form:not([ngNoForm]):not([ngNativeValidate])"
+			},
+			{
+				kind: "directive",
+				type: i1.DefaultValueAccessor,
+				selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]"
+			},
+			{
+				kind: "directive",
+				type: i1.NgControlStatus,
+				selector: "[formControlName],[ngModel],[formControl]"
+			},
+			{
+				kind: "directive",
+				type: i1.NgControlStatusGroup,
+				selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]"
+			},
+			{
+				kind: "directive",
+				type: i1.MaxLengthValidator,
+				selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]",
+				inputs: ["maxlength"]
+			},
+			{
+				kind: "directive",
+				type: i1.FormGroupDirective,
+				selector: "[formGroup]",
+				inputs: ["formGroup"],
+				outputs: ["ngSubmit"],
+				exportAs: ["ngForm"]
+			},
+			{
+				kind: "directive",
+				type: i1.FormControlName,
+				selector: "[formControlName]",
+				inputs: [
+					"formControlName",
+					"disabled",
+					"ngModel"
+				],
+				outputs: ["ngModelChange"]
+			},
+			{
+				kind: "component",
+				type: KcPasswordToggleComponent,
+				selector: "kc-password"
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: KcProfileComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "kc-profile",
+			standalone: true,
+			imports: [ReactiveFormsModule, KcPasswordToggleComponent],
+			template: `
+    <div class="kc-auth-page single">
+      <div class="kc-auth-panel">
+        <h1 class="kc-auth-panel-title kc-auth-page-title">บัญชีของฉัน</h1>
+
+        @if (loading()) {
+        <p class="kc-auth-hint">กำลังโหลดข้อมูล...</p>
+        } @else if (loadFailed()) {
+        <div class="kc-auth-alert error" role="alert">{{ error() }}</div>
+        } @else {
+        <form [formGroup]="form" (ngSubmit)="submit()" novalidate>
+          <label class="kc-auth-field">
+            <span>ชื่อ-สกุล</span>
+            <input class="kc-auth-input" type="text" [value]="fullName()" disabled />
+          </label>
+
+          <label class="kc-auth-field">
+            <span>{{ config.orgLabel }}ที่สังกัด</span>
+            <input class="kc-auth-input" type="text" [value]="orgName()" disabled />
+            <small class="kc-auth-hint">หากต้องการย้าย{{ config.orgLabel }} กรุณาติดต่อผู้ดูแลระบบ</small>
+          </label>
+
+          <label class="kc-auth-field">
+            <span>อีเมล <span class="req">*</span></span>
+            <input class="kc-auth-input" type="email" formControlName="email" maxlength="100" autocomplete="email"
+              [class.invalid]="bad('email')" />
+            @if (bad('email')) {
+            <small class="kc-auth-field-error">* รูปแบบอีเมลไม่ถูกต้อง</small>
+            }
+          </label>
+
+          <label class="kc-auth-field">
+            <span>เบอร์โทรศัพท์มือถือ <span class="req">*</span></span>
+            <input class="kc-auth-input" type="tel" formControlName="mobile" maxlength="10" inputmode="numeric" autocomplete="tel"
+              [class.invalid]="bad('mobile')" />
+            @if (bad('mobile')) {
+            <small class="kc-auth-field-error">* เบอร์มือถือต้องเป็นตัวเลข 10 หลัก และขึ้นต้นด้วย 0</small>
+            }
+          </label>
+
+          <label class="kc-auth-field">
+            <span>ชื่อผู้ใช้ <span class="req">*</span></span>
+            <input class="kc-auth-input" type="text" formControlName="username" maxlength="50" autocomplete="username"
+              [class.invalid]="bad('username')" />
+            @if (bad('username')) {
+            <small class="kc-auth-field-error">* กรุณากรอกชื่อผู้ใช้ (ห้ามมีช่องว่าง)</small>
+            }
+          </label>
+
+          <label class="kc-auth-field">
+            <span>รหัสผ่านใหม่ <small class="kc-auth-hint">(อย่างน้อย {{ config.passwordMinLength }} ตัวอักษร — เว้นว่างถ้าไม่เปลี่ยน)</small></span>
+            <kc-password><input class="kc-auth-input" type="password" formControlName="password" maxlength="50" autocomplete="new-password" /></kc-password>
+          </label>
+
+          <label class="kc-auth-field">
+            <span>ยืนยันรหัสผ่านใหม่</span>
+            <kc-password><input class="kc-auth-input" type="password" formControlName="confirmPassword" maxlength="50" autocomplete="new-password" /></kc-password>
+          </label>
+
+          @if (error()) {
+          <div class="kc-auth-alert error" role="alert">{{ error() }}</div>
+          }
+          @if (success()) {
+          <div class="kc-auth-alert success" role="status">{{ success() }}</div>
+          }
+
+          <button type="submit" class="kc-auth-btn primary block" [disabled]="saving()">
+            {{ saving() ? 'กำลังบันทึก...' : 'บันทึกข้อมูล' }}
+          </button>
+        </form>
+        }
+      </div>
+    </div>
+  `
+		}]
+	}],
+	ctorParameters: () => []
+});
+var KcConfigUsersComponent = class KcConfigUsersComponent {
+	config = inject(KC_AUTH_CONFIG);
+	auth = inject(KcAuthService);
+	http = inject(HttpClient);
+	users = signal([], ...ngDevMode ? [{ debugName: "users" }] : /* istanbul ignore next */ []);
+	orgs = signal([], ...ngDevMode ? [{ debugName: "orgs" }] : /* istanbul ignore next */ []);
+	roles = signal([], ...ngDevMode ? [{ debugName: "roles" }] : /* istanbul ignore next */ []);
+	loading = signal(false, ...ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []);
+	saving = signal(false, ...ngDevMode ? [{ debugName: "saving" }] : /* istanbul ignore next */ []);
+	error = signal("", ...ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []);
+	success = signal("", ...ngDevMode ? [{ debugName: "success" }] : /* istanbul ignore next */ []);
+	editError = signal("", ...ngDevMode ? [{ debugName: "editError" }] : /* istanbul ignore next */ []);
+	search = signal("", ...ngDevMode ? [{ debugName: "search" }] : /* istanbul ignore next */ []);
+	editing = signal(null, ...ngDevMode ? [{ debugName: "editing" }] : /* istanbul ignore next */ []);
+	myId = computed(() => this.auth.user()?.id ?? "", ...ngDevMode ? [{ debugName: "myId" }] : /* istanbul ignore next */ []);
+	orgOptions = computed(() => [{
+		value: "",
+		label: "-- ไม่ระบุ --"
+	}, ...this.orgs()], ...ngDevMode ? [{ debugName: "orgOptions" }] : /* istanbul ignore next */ []);
+	filtered = computed(() => {
+		const words = this.search().trim().toLowerCase().split(/\s+/).filter(Boolean);
+		if (!words.length) return this.users();
+		return this.users().filter((u) => {
+			const text = [
+				u.username,
+				u.fullName,
+				u.orgName,
+				u.org,
+				this.roleName(u.role),
+				u.email,
+				u.mobile
+			].join(" ").toLowerCase();
+			return words.every((w) => text.includes(w));
+		});
+	}, ...ngDevMode ? [{ debugName: "filtered" }] : /* istanbul ignore next */ []);
+	constructor() {
+		ensureAuthStyles();
+	}
+	ngOnInit() {
+		this.load();
+	}
+	load() {
+		this.loading.set(true);
+		this.http.get(`${this.config.apiBase}/config/users`).subscribe({
+			next: (res) => {
+				this.users.set(res.users ?? []);
+				this.orgs.set(res.orgs ?? []);
+				this.roles.set(res.roles ?? []);
+				this.loading.set(false);
+			},
+			error: (err) => {
+				this.loading.set(false);
+				this.error.set(kcErrorMessage(err, "ไม่สามารถโหลดรายชื่อผู้ใช้ได้"));
+			}
+		});
+	}
+	roleName(role) {
+		return this.roles().find((r) => r.value === role)?.label ?? (role || "-");
+	}
+	hasRole(role) {
+		return this.roles().some((r) => r.value === role);
+	}
+	edit(u) {
+		this.editError.set("");
+		this.editing.set({
+			id: u.id,
+			fullName: u.fullName,
+			username: u.username,
+			role: u.role,
+			active: u.active,
+			org: u.org,
+			password: "",
+			confirmPassword: ""
+		});
+	}
+	close() {
+		if (!this.saving()) this.editing.set(null);
+	}
+	save() {
+		const e = this.editing();
+		if (!e || this.saving()) return;
+		const problem = kcUsernameProblem(e.username) || kcPasswordProblem(e.password, e.confirmPassword, this.config.passwordMinLength, false);
+		this.editError.set(problem);
+		if (problem) return;
+		const body = {
+			username: e.username.trim(),
+			password: e.password,
+			role: e.role,
+			active: e.active,
+			org: e.org
+		};
+		this.saving.set(true);
+		this.http.put(`${this.config.apiBase}/config/users/${encodeURIComponent(e.id)}`, body).subscribe({
+			next: (res) => {
+				this.saving.set(false);
+				this.editing.set(null);
+				this.error.set("");
+				this.success.set(res?.message || "บันทึกข้อมูลเรียบร้อยแล้ว");
+				this.load();
+			},
+			error: (err) => {
+				this.saving.set(false);
+				this.editError.set(kcErrorMessage(err, "บันทึกข้อมูลไม่สำเร็จ"));
+			}
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: KcConfigUsersComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: KcConfigUsersComponent,
+		isStandalone: true,
+		selector: "kc-config-users",
+		host: { listeners: { "document:keydown.escape": "close()" } },
+		ngImport: i0,
+		template: `
+    <div class="kc-auth-page">
+      <div class="kc-auth-page-header">
+        <div>
+          <h1 class="kc-auth-page-title">ผู้ใช้งานระบบ</h1>
+          <p class="kc-auth-page-subtitle">คลิกแถวเพื่อแก้ไข — ทั้งหมด {{ users().length }} บัญชี</p>
+        </div>
+      </div>
+
+      @if (error()) {
+      <div class="kc-auth-alert error" role="alert">{{ error() }}</div>
+      }
+      @if (success()) {
+      <div class="kc-auth-alert success" role="status">{{ success() }}</div>
+      }
+
+      <div class="kc-auth-panel">
+        <input class="kc-auth-input" type="search" [placeholder]="'ค้นหาชื่อผู้ใช้ ชื่อ-สกุล ' + config.orgLabel + ' ระดับผู้ใช้ หรืออีเมล'"
+          [ngModel]="search()" (ngModelChange)="search.set($event)" aria-label="ค้นหาผู้ใช้" />
+      </div>
+
+      <div class="kc-auth-panel flush">
+        @if (loading()) {
+        <div class="kc-auth-loading">กำลังโหลดข้อมูล...</div>
+        }
+        <div class="kc-auth-table-wrap">
+          <table class="kc-auth-table stack">
+            <thead>
+              <tr>
+                <th>ชื่อผู้ใช้</th>
+                <th>ชื่อ-สกุล</th>
+                <th>{{ config.orgLabel }}</th>
+                <th>ระดับผู้ใช้</th>
+                <th class="c">สถานะ</th>
+                <th>เข้าระบบล่าสุด</th>
+              </tr>
+            </thead>
+            <tbody>
+              @for (u of filtered(); track u.id) {
+              <tr class="clickable" [class.inactive]="!u.active" (click)="edit(u)">
+                <td><span class="kc-auth-link">{{ u.username || '-' }}</span>
+                  @if (u.id === myId()) { <span class="kc-auth-hint"> (ตัวคุณ)</span> }</td>
+                <td data-label="ชื่อ-สกุล">{{ u.fullName || '-' }}</td>
+                <td [attr.data-label]="config.orgLabel">{{ u.orgName || u.org || '-' }}</td>
+                <td data-label="ระดับผู้ใช้">{{ roleName(u.role) }}</td>
+                <td class="c" data-label="สถานะ">
+                  <span class="kc-auth-badge" [class.on]="u.active" [class.off]="!u.active">{{ u.active ? 'ใช้งาน' : 'ระงับ' }}</span>
+                </td>
+                <td data-label="เข้าระบบล่าสุด">{{ u.lastLogin || '-' }}</td>
+              </tr>
+              } @empty {
+              @if (!loading()) {
+              <tr><td colspan="6" class="empty">ไม่พบผู้ใช้</td></tr>
+              }
+              }
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+
+    @if (editing(); as e) {
+    <div class="kc-auth-modal-bg" (click)="close()">
+      <div class="kc-auth-modal" role="dialog" aria-modal="true" aria-labelledby="kc-cu-title" (click)="$event.stopPropagation()">
+        <div class="kc-auth-modal-header">
+          <span id="kc-cu-title">แก้ไขผู้ใช้ — {{ e.fullName || e.username }}</span>
+          <button type="button" class="kc-auth-close" aria-label="ปิด" (click)="close()">&times;</button>
+        </div>
+        <div class="kc-auth-modal-body">
+          @if (editError()) {
+          <div class="kc-auth-alert error" role="alert">{{ editError() }}</div>
+          }
+          <div class="kc-auth-grid">
+            <label class="kc-auth-field full">
+              <span>ชื่อผู้ใช้ <span class="req">*</span></span>
+              <input class="kc-auth-input" type="text" [(ngModel)]="e.username" maxlength="50" autocomplete="off" />
+            </label>
+            <label class="kc-auth-field">
+              <span>ระดับผู้ใช้</span>
+              <select class="kc-auth-input" [(ngModel)]="e.role" [disabled]="e.id === myId()">
+                @if (!hasRole(e.role)) {
+                <option [value]="e.role">{{ e.role || '-- ไม่ระบุ --' }}</option>
+                }
+                @for (r of roles(); track r.value) {
+                <option [value]="r.value">{{ r.label }}</option>
+                }
+              </select>
+            </label>
+            <label class="kc-auth-field">
+              <span>สถานะ</span>
+              <select class="kc-auth-input" [(ngModel)]="e.active" [disabled]="e.id === myId()">
+                <option [ngValue]="true">ใช้งาน</option>
+                <option [ngValue]="false">ระงับการใช้งาน</option>
+              </select>
+            </label>
+            @if (orgs().length) {
+            <div class="kc-auth-field full">
+              <label class="kc-auth-label" for="kc-cu-org">{{ config.orgLabel }}</label>
+              <app-search-select inputId="kc-cu-org" [options]="orgOptions()" [(ngModel)]="e.org" />
+            </div>
+            }
+            <label class="kc-auth-field">
+              <span>รหัสผ่านใหม่</span>
+              <kc-password><input class="kc-auth-input" type="password" [(ngModel)]="e.password" autocomplete="new-password" /></kc-password>
+            </label>
+            <label class="kc-auth-field">
+              <span>ยืนยันรหัสผ่านใหม่</span>
+              <kc-password><input class="kc-auth-input" type="password" [(ngModel)]="e.confirmPassword" autocomplete="new-password" /></kc-password>
+            </label>
+          </div>
+          <p class="kc-auth-hint">
+            เว้นว่างรหัสผ่านไว้ถ้าไม่ต้องการเปลี่ยน — ระดับผู้ใช้และ{{ config.orgLabel }}ที่เปลี่ยนมีผลเมื่อผู้ใช้เข้าสู่ระบบครั้งถัดไป
+            @if (e.id === myId()) { — แก้ระดับหรือระงับบัญชีของตนเองไม่ได้ }
+          </p>
+          <div class="kc-auth-actions">
+            <button type="button" class="kc-auth-btn" (click)="close()">ยกเลิก</button>
+            <button type="button" class="kc-auth-btn primary" [disabled]="saving()" (click)="save()">
+              {{ saving() ? 'กำลังบันทึก...' : 'บันทึก' }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    }
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "ngmodule",
+				type: FormsModule
+			},
+			{
+				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]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]"
+			},
+			{
+				kind: "directive",
+				type: i1.SelectControlValueAccessor,
+				selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]",
+				inputs: ["compareWith"]
+			},
+			{
+				kind: "directive",
+				type: i1.NgControlStatus,
+				selector: "[formControlName],[ngModel],[formControl]"
+			},
+			{
+				kind: "directive",
+				type: i1.MaxLengthValidator,
+				selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]",
+				inputs: ["maxlength"]
+			},
+			{
+				kind: "directive",
+				type: i1.NgModel,
+				selector: "[ngModel]:not([formControlName]):not([formControl])",
+				inputs: [
+					"name",
+					"disabled",
+					"ngModel",
+					"ngModelOptions"
+				],
+				outputs: ["ngModelChange"],
+				exportAs: ["ngModel"]
+			},
+			{
+				kind: "component",
+				type: SearchSelectComponent,
+				selector: "app-search-select",
+				inputs: [
+					"options",
+					"placeholder",
+					"searchHint",
+					"inputId"
+				]
+			},
+			{
+				kind: "component",
+				type: KcPasswordToggleComponent,
+				selector: "kc-password"
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: KcConfigUsersComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "kc-config-users",
+			standalone: true,
+			imports: [
+				FormsModule,
+				SearchSelectComponent,
+				KcPasswordToggleComponent
+			],
+			host: { "(document:keydown.escape)": "close()" },
+			template: `
+    <div class="kc-auth-page">
+      <div class="kc-auth-page-header">
+        <div>
+          <h1 class="kc-auth-page-title">ผู้ใช้งานระบบ</h1>
+          <p class="kc-auth-page-subtitle">คลิกแถวเพื่อแก้ไข — ทั้งหมด {{ users().length }} บัญชี</p>
+        </div>
+      </div>
+
+      @if (error()) {
+      <div class="kc-auth-alert error" role="alert">{{ error() }}</div>
+      }
+      @if (success()) {
+      <div class="kc-auth-alert success" role="status">{{ success() }}</div>
+      }
+
+      <div class="kc-auth-panel">
+        <input class="kc-auth-input" type="search" [placeholder]="'ค้นหาชื่อผู้ใช้ ชื่อ-สกุล ' + config.orgLabel + ' ระดับผู้ใช้ หรืออีเมล'"
+          [ngModel]="search()" (ngModelChange)="search.set($event)" aria-label="ค้นหาผู้ใช้" />
+      </div>
+
+      <div class="kc-auth-panel flush">
+        @if (loading()) {
+        <div class="kc-auth-loading">กำลังโหลดข้อมูล...</div>
+        }
+        <div class="kc-auth-table-wrap">
+          <table class="kc-auth-table stack">
+            <thead>
+              <tr>
+                <th>ชื่อผู้ใช้</th>
+                <th>ชื่อ-สกุล</th>
+                <th>{{ config.orgLabel }}</th>
+                <th>ระดับผู้ใช้</th>
+                <th class="c">สถานะ</th>
+                <th>เข้าระบบล่าสุด</th>
+              </tr>
+            </thead>
+            <tbody>
+              @for (u of filtered(); track u.id) {
+              <tr class="clickable" [class.inactive]="!u.active" (click)="edit(u)">
+                <td><span class="kc-auth-link">{{ u.username || '-' }}</span>
+                  @if (u.id === myId()) { <span class="kc-auth-hint"> (ตัวคุณ)</span> }</td>
+                <td data-label="ชื่อ-สกุล">{{ u.fullName || '-' }}</td>
+                <td [attr.data-label]="config.orgLabel">{{ u.orgName || u.org || '-' }}</td>
+                <td data-label="ระดับผู้ใช้">{{ roleName(u.role) }}</td>
+                <td class="c" data-label="สถานะ">
+                  <span class="kc-auth-badge" [class.on]="u.active" [class.off]="!u.active">{{ u.active ? 'ใช้งาน' : 'ระงับ' }}</span>
+                </td>
+                <td data-label="เข้าระบบล่าสุด">{{ u.lastLogin || '-' }}</td>
+              </tr>
+              } @empty {
+              @if (!loading()) {
+              <tr><td colspan="6" class="empty">ไม่พบผู้ใช้</td></tr>
+              }
+              }
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+
+    @if (editing(); as e) {
+    <div class="kc-auth-modal-bg" (click)="close()">
+      <div class="kc-auth-modal" role="dialog" aria-modal="true" aria-labelledby="kc-cu-title" (click)="$event.stopPropagation()">
+        <div class="kc-auth-modal-header">
+          <span id="kc-cu-title">แก้ไขผู้ใช้ — {{ e.fullName || e.username }}</span>
+          <button type="button" class="kc-auth-close" aria-label="ปิด" (click)="close()">&times;</button>
+        </div>
+        <div class="kc-auth-modal-body">
+          @if (editError()) {
+          <div class="kc-auth-alert error" role="alert">{{ editError() }}</div>
+          }
+          <div class="kc-auth-grid">
+            <label class="kc-auth-field full">
+              <span>ชื่อผู้ใช้ <span class="req">*</span></span>
+              <input class="kc-auth-input" type="text" [(ngModel)]="e.username" maxlength="50" autocomplete="off" />
+            </label>
+            <label class="kc-auth-field">
+              <span>ระดับผู้ใช้</span>
+              <select class="kc-auth-input" [(ngModel)]="e.role" [disabled]="e.id === myId()">
+                @if (!hasRole(e.role)) {
+                <option [value]="e.role">{{ e.role || '-- ไม่ระบุ --' }}</option>
+                }
+                @for (r of roles(); track r.value) {
+                <option [value]="r.value">{{ r.label }}</option>
+                }
+              </select>
+            </label>
+            <label class="kc-auth-field">
+              <span>สถานะ</span>
+              <select class="kc-auth-input" [(ngModel)]="e.active" [disabled]="e.id === myId()">
+                <option [ngValue]="true">ใช้งาน</option>
+                <option [ngValue]="false">ระงับการใช้งาน</option>
+              </select>
+            </label>
+            @if (orgs().length) {
+            <div class="kc-auth-field full">
+              <label class="kc-auth-label" for="kc-cu-org">{{ config.orgLabel }}</label>
+              <app-search-select inputId="kc-cu-org" [options]="orgOptions()" [(ngModel)]="e.org" />
+            </div>
+            }
+            <label class="kc-auth-field">
+              <span>รหัสผ่านใหม่</span>
+              <kc-password><input class="kc-auth-input" type="password" [(ngModel)]="e.password" autocomplete="new-password" /></kc-password>
+            </label>
+            <label class="kc-auth-field">
+              <span>ยืนยันรหัสผ่านใหม่</span>
+              <kc-password><input class="kc-auth-input" type="password" [(ngModel)]="e.confirmPassword" autocomplete="new-password" /></kc-password>
+            </label>
+          </div>
+          <p class="kc-auth-hint">
+            เว้นว่างรหัสผ่านไว้ถ้าไม่ต้องการเปลี่ยน — ระดับผู้ใช้และ{{ config.orgLabel }}ที่เปลี่ยนมีผลเมื่อผู้ใช้เข้าสู่ระบบครั้งถัดไป
+            @if (e.id === myId()) { — แก้ระดับหรือระงับบัญชีของตนเองไม่ได้ }
+          </p>
+          <div class="kc-auth-actions">
+            <button type="button" class="kc-auth-btn" (click)="close()">ยกเลิก</button>
+            <button type="button" class="kc-auth-btn primary" [disabled]="saving()" (click)="save()">
+              {{ saving() ? 'กำลังบันทึก...' : 'บันทึก' }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    }
+  `
+		}]
+	}],
+	ctorParameters: () => []
+});
+var KcConfigKclluComponent = class KcConfigKclluComponent {
+	config = inject(KC_AUTH_CONFIG);
+	http = inject(HttpClient);
+	api = `${this.config.apiBase}/config/kcllu`;
+	titles = signal([], ...ngDevMode ? [{ debugName: "titles" }] : /* istanbul ignore next */ []);
+	title = signal("", ...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
+	rows = signal([], ...ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []);
+	loading = signal(false, ...ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []);
+	saving = signal(false, ...ngDevMode ? [{ debugName: "saving" }] : /* istanbul ignore next */ []);
+	showInactive = signal(true, ...ngDevMode ? [{ debugName: "showInactive" }] : /* istanbul ignore next */ []);
+	error = signal("", ...ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []);
+	success = signal("", ...ngDevMode ? [{ debugName: "success" }] : /* istanbul ignore next */ []);
+	editError = signal("", ...ngDevMode ? [{ debugName: "editError" }] : /* istanbul ignore next */ []);
+	editing = signal(null, ...ngDevMode ? [{ debugName: "editing" }] : /* istanbul ignore next */ []);
+	titleOptions = computed(() => this.titles().map((t) => ({
+		value: t.title,
+		label: `${t.title} (${t.count})${t.readOnly ? " — ดูอย่างเดียว" : ""}`
+	})), ...ngDevMode ? [{ debugName: "titleOptions" }] : /* istanbul ignore next */ []);
+	readOnly = computed(() => this.titles().find((t) => t.title === this.title())?.readOnly ?? false, ...ngDevMode ? [{ debugName: "readOnly" }] : /* istanbul ignore next */ []);
+	hint = computed(() => this.config.kclluHints[this.title()] ?? "", ...ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []);
+	visibleRows = computed(() => this.showInactive() ? this.rows() : this.rows().filter((r) => r.active), ...ngDevMode ? [{ debugName: "visibleRows" }] : /* istanbul ignore next */ []);
+	constructor() {
+		ensureAuthStyles();
+	}
+	ngOnInit() {
+		this.loadTitles();
+	}
+	loadTitles() {
+		this.http.get(`${this.api}/titles`).subscribe({
+			next: (res) => {
+				this.titles.set(res ?? []);
+				if (!this.title() && this.titles().length) this.select(this.titles()[0].title);
+			},
+			error: (err) => this.error.set(kcErrorMessage(err, "ไม่สามารถโหลดกลุ่มข้อมูลได้"))
+		});
+	}
+	select(title) {
+		if (!title || title === this.title()) return;
+		this.title.set(title);
+		this.success.set("");
+		this.loadRows();
+	}
+	loadRows() {
+		const title = this.title();
+		this.loading.set(true);
+		this.http.get(this.api, { params: { title } }).subscribe({
+			next: (res) => {
+				if (title !== this.title()) return;
+				this.rows.set(res ?? []);
+				this.loading.set(false);
+			},
+			error: (err) => {
+				this.loading.set(false);
+				this.error.set(kcErrorMessage(err, "ไม่สามารถโหลดข้อมูลได้"));
+			}
+		});
+	}
+	add() {
+		this.editError.set("");
+		this.editing.set({
+			id: 0,
+			code: "",
+			name: "",
+			name1: "",
+			value: "",
+			grp: "",
+			no: "",
+			mark: "",
+			active: true
+		});
+	}
+	edit(row) {
+		if (this.readOnly()) return;
+		this.editError.set("");
+		this.editing.set({ ...row });
+	}
+	close() {
+		if (!this.saving()) this.editing.set(null);
+	}
+	save() {
+		const e = this.editing();
+		if (!e || this.saving()) return;
+		const no = String(e.no ?? "").trim();
+		const problem = !e.name.trim() ? "กรุณากรอกชื่อ (k_name)" : !/^\d*$/.test(no) ? "ลำดับ (k_no) ต้องเป็นตัวเลข" : "";
+		this.editError.set(problem);
+		if (problem) return;
+		const body = {
+			...e,
+			no,
+			name: e.name.trim(),
+			title: this.title()
+		};
+		const req = e.id ? this.http.put(`${this.api}/${e.id}`, body) : this.http.post(this.api, body);
+		this.saving.set(true);
+		req.subscribe({
+			next: (res) => {
+				this.saving.set(false);
+				this.editing.set(null);
+				this.error.set("");
+				this.success.set(res?.message || "บันทึกข้อมูลเรียบร้อยแล้ว");
+				this.loadRows();
+				if (!e.id) this.loadTitles();
+			},
+			error: (err) => {
+				this.saving.set(false);
+				this.editError.set(kcErrorMessage(err, "บันทึกข้อมูลไม่สำเร็จ"));
+			}
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: KcConfigKclluComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: KcConfigKclluComponent,
+		isStandalone: true,
+		selector: "kc-config-kcllu",
+		host: { listeners: { "document:keydown.escape": "close()" } },
+		ngImport: i0,
+		template: `
+    <div class="kc-auth-page">
+      <div class="kc-auth-page-header">
+        <div>
+          <h1 class="kc-auth-page-title">ข้อมูลอ้างอิง (kcllu)</h1>
+          <p class="kc-auth-page-subtitle">เลือกกลุ่มข้อมูล แล้วคลิกแถวเพื่อแก้ไข — ไม่มีการลบ ใช้ "ปิดใช้งาน" แทน</p>
+        </div>
+        @if (title() && !readOnly()) {
+        <button type="button" class="kc-auth-btn primary" (click)="add()">+ เพิ่มข้อมูล</button>
+        }
+      </div>
+
+      @if (error()) {
+      <div class="kc-auth-alert error" role="alert">{{ error() }}</div>
+      }
+      @if (success()) {
+      <div class="kc-auth-alert success" role="status">{{ success() }}</div>
+      }
+
+      <div class="kc-auth-panel">
+        <div class="kc-auth-grid">
+          <div class="kc-auth-field" style="margin-bottom: 0">
+            <label class="kc-auth-label" for="kc-kl-title">กลุ่มข้อมูล (k_title)</label>
+            <app-search-select inputId="kc-kl-title" [options]="titleOptions()" placeholder="-- เลือกกลุ่ม --"
+              [ngModel]="title()" (ngModelChange)="select($event)" />
+          </div>
+          <div class="kc-auth-field" style="margin-bottom: 0; justify-content: flex-end">
+            <label class="kc-auth-check">
+              <input type="checkbox" [ngModel]="showInactive()" (ngModelChange)="showInactive.set($event)" />
+              แสดงรายการที่ปิดใช้งาน
+            </label>
+          </div>
+        </div>
+        @if (hint()) {
+        <p class="kc-auth-hint" style="margin-top: 10px">{{ hint() }}</p>
+        }
+        @if (readOnly()) {
+        <p class="kc-auth-hint" style="margin-top: 6px">กลุ่มนี้ดูได้อย่างเดียว</p>
+        }
+      </div>
+
+      <div class="kc-auth-panel flush">
+        @if (loading()) {
+        <div class="kc-auth-loading">กำลังโหลดข้อมูล...</div>
+        }
+        <div class="kc-auth-table-wrap">
+          <table class="kc-auth-table stack">
+            <thead>
+              <tr>
+                <th>ลำดับ</th>
+                <th>รหัส (k_code)</th>
+                <th style="width: 30%">ชื่อ (k_name)</th>
+                <th>ค่า (k_value)</th>
+                <th>กลุ่มย่อย (k_grp)</th>
+                <th>k_mark</th>
+                <th class="c">สถานะ</th>
+              </tr>
+            </thead>
+            <tbody>
+              @for (r of visibleRows(); track r.id) {
+              <tr [class.clickable]="!readOnly()" [class.inactive]="!r.active" (click)="edit(r)">
+                <td data-label="ลำดับ">{{ r.no || '-' }}</td>
+                <td data-label="รหัส">{{ r.code || '-' }}</td>
+                <td data-label="ชื่อ"><span [class.kc-auth-link]="!readOnly()">{{ r.name || '-' }}</span>
+                  @if (r.name1) { <div class="kc-auth-hint">{{ r.name1 }}</div> }</td>
+                <td data-label="ค่า">{{ r.value || '-' }}</td>
+                <td data-label="กลุ่มย่อย">{{ r.grp || '-' }}</td>
+                <td data-label="k_mark">{{ r.mark || '-' }}</td>
+                <td class="c" data-label="สถานะ">
+                  <span class="kc-auth-badge" [class.on]="r.active" [class.off]="!r.active">{{ r.active ? 'ใช้งาน' : 'ปิดใช้งาน' }}</span>
+                </td>
+              </tr>
+              } @empty {
+              @if (!loading()) {
+              <tr><td colspan="7" class="empty">{{ title() ? 'ไม่พบข้อมูล' : 'กรุณาเลือกกลุ่มข้อมูล' }}</td></tr>
+              }
+              }
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+
+    @if (editing(); as e) {
+    <div class="kc-auth-modal-bg" (click)="close()">
+      <div class="kc-auth-modal" role="dialog" aria-modal="true" aria-labelledby="kc-kl-edit" (click)="$event.stopPropagation()">
+        <div class="kc-auth-modal-header">
+          <span id="kc-kl-edit">{{ e.id ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล' }} — กลุ่ม {{ title() }}</span>
+          <button type="button" class="kc-auth-close" aria-label="ปิด" (click)="close()">&times;</button>
+        </div>
+        <div class="kc-auth-modal-body">
+          @if (editError()) {
+          <div class="kc-auth-alert error" role="alert">{{ editError() }}</div>
+          }
+          @if (hint()) {
+          <p class="kc-auth-hint" style="margin: 0 0 12px">{{ hint() }}</p>
+          }
+          <div class="kc-auth-grid">
+            <label class="kc-auth-field">
+              <span>รหัส (k_code)</span>
+              <input class="kc-auth-input" type="text" [(ngModel)]="e.code" maxlength="255" />
+            </label>
+            <label class="kc-auth-field">
+              <span>ลำดับ (k_no)</span>
+              <input class="kc-auth-input" type="text" inputmode="numeric" [(ngModel)]="e.no" maxlength="9" />
+            </label>
+            <label class="kc-auth-field full">
+              <span>ชื่อ (k_name) <span class="req">*</span></span>
+              <input class="kc-auth-input" type="text" [(ngModel)]="e.name" maxlength="255" />
+            </label>
+            <label class="kc-auth-field full">
+              <span>ชื่อที่ 2 (k_name1)</span>
+              <input class="kc-auth-input" type="text" [(ngModel)]="e.name1" maxlength="255" />
+            </label>
+            <label class="kc-auth-field">
+              <span>ค่า (k_value)</span>
+              <input class="kc-auth-input" type="text" [(ngModel)]="e.value" maxlength="255" />
+            </label>
+            <label class="kc-auth-field">
+              <span>กลุ่มย่อย (k_grp)</span>
+              <input class="kc-auth-input" type="text" [(ngModel)]="e.grp" maxlength="255" />
+            </label>
+            <label class="kc-auth-field">
+              <span>k_mark</span>
+              <input class="kc-auth-input" type="text" [(ngModel)]="e.mark" maxlength="255" />
+            </label>
+            <label class="kc-auth-field">
+              <span>สถานะ</span>
+              <select class="kc-auth-input" [(ngModel)]="e.active">
+                <option [ngValue]="true">ใช้งาน</option>
+                <option [ngValue]="false">ปิดใช้งาน</option>
+              </select>
+            </label>
+          </div>
+          <div class="kc-auth-actions">
+            <button type="button" class="kc-auth-btn" (click)="close()">ยกเลิก</button>
+            <button type="button" class="kc-auth-btn primary" [disabled]="saving()" (click)="save()">
+              {{ saving() ? 'กำลังบันทึก...' : 'บันทึก' }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    }
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "ngmodule",
+				type: FormsModule
+			},
+			{
+				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]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]"
+			},
+			{
+				kind: "directive",
+				type: i1.CheckboxControlValueAccessor,
+				selector: "input[type=checkbox]:not([ngNoCva])[formControlName],input[type=checkbox]:not([ngNoCva])[formControl],input[type=checkbox]:not([ngNoCva])[ngModel]"
+			},
+			{
+				kind: "directive",
+				type: i1.SelectControlValueAccessor,
+				selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]",
+				inputs: ["compareWith"]
+			},
+			{
+				kind: "directive",
+				type: i1.NgControlStatus,
+				selector: "[formControlName],[ngModel],[formControl]"
+			},
+			{
+				kind: "directive",
+				type: i1.MaxLengthValidator,
+				selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]",
+				inputs: ["maxlength"]
+			},
+			{
+				kind: "directive",
+				type: i1.NgModel,
+				selector: "[ngModel]:not([formControlName]):not([formControl])",
+				inputs: [
+					"name",
+					"disabled",
+					"ngModel",
+					"ngModelOptions"
+				],
+				outputs: ["ngModelChange"],
+				exportAs: ["ngModel"]
+			},
+			{
+				kind: "component",
+				type: SearchSelectComponent,
+				selector: "app-search-select",
+				inputs: [
+					"options",
+					"placeholder",
+					"searchHint",
+					"inputId"
+				]
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: KcConfigKclluComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "kc-config-kcllu",
+			standalone: true,
+			imports: [FormsModule, SearchSelectComponent],
+			host: { "(document:keydown.escape)": "close()" },
+			template: `
+    <div class="kc-auth-page">
+      <div class="kc-auth-page-header">
+        <div>
+          <h1 class="kc-auth-page-title">ข้อมูลอ้างอิง (kcllu)</h1>
+          <p class="kc-auth-page-subtitle">เลือกกลุ่มข้อมูล แล้วคลิกแถวเพื่อแก้ไข — ไม่มีการลบ ใช้ "ปิดใช้งาน" แทน</p>
+        </div>
+        @if (title() && !readOnly()) {
+        <button type="button" class="kc-auth-btn primary" (click)="add()">+ เพิ่มข้อมูล</button>
+        }
+      </div>
+
+      @if (error()) {
+      <div class="kc-auth-alert error" role="alert">{{ error() }}</div>
+      }
+      @if (success()) {
+      <div class="kc-auth-alert success" role="status">{{ success() }}</div>
+      }
+
+      <div class="kc-auth-panel">
+        <div class="kc-auth-grid">
+          <div class="kc-auth-field" style="margin-bottom: 0">
+            <label class="kc-auth-label" for="kc-kl-title">กลุ่มข้อมูล (k_title)</label>
+            <app-search-select inputId="kc-kl-title" [options]="titleOptions()" placeholder="-- เลือกกลุ่ม --"
+              [ngModel]="title()" (ngModelChange)="select($event)" />
+          </div>
+          <div class="kc-auth-field" style="margin-bottom: 0; justify-content: flex-end">
+            <label class="kc-auth-check">
+              <input type="checkbox" [ngModel]="showInactive()" (ngModelChange)="showInactive.set($event)" />
+              แสดงรายการที่ปิดใช้งาน
+            </label>
+          </div>
+        </div>
+        @if (hint()) {
+        <p class="kc-auth-hint" style="margin-top: 10px">{{ hint() }}</p>
+        }
+        @if (readOnly()) {
+        <p class="kc-auth-hint" style="margin-top: 6px">กลุ่มนี้ดูได้อย่างเดียว</p>
+        }
+      </div>
+
+      <div class="kc-auth-panel flush">
+        @if (loading()) {
+        <div class="kc-auth-loading">กำลังโหลดข้อมูล...</div>
+        }
+        <div class="kc-auth-table-wrap">
+          <table class="kc-auth-table stack">
+            <thead>
+              <tr>
+                <th>ลำดับ</th>
+                <th>รหัส (k_code)</th>
+                <th style="width: 30%">ชื่อ (k_name)</th>
+                <th>ค่า (k_value)</th>
+                <th>กลุ่มย่อย (k_grp)</th>
+                <th>k_mark</th>
+                <th class="c">สถานะ</th>
+              </tr>
+            </thead>
+            <tbody>
+              @for (r of visibleRows(); track r.id) {
+              <tr [class.clickable]="!readOnly()" [class.inactive]="!r.active" (click)="edit(r)">
+                <td data-label="ลำดับ">{{ r.no || '-' }}</td>
+                <td data-label="รหัส">{{ r.code || '-' }}</td>
+                <td data-label="ชื่อ"><span [class.kc-auth-link]="!readOnly()">{{ r.name || '-' }}</span>
+                  @if (r.name1) { <div class="kc-auth-hint">{{ r.name1 }}</div> }</td>
+                <td data-label="ค่า">{{ r.value || '-' }}</td>
+                <td data-label="กลุ่มย่อย">{{ r.grp || '-' }}</td>
+                <td data-label="k_mark">{{ r.mark || '-' }}</td>
+                <td class="c" data-label="สถานะ">
+                  <span class="kc-auth-badge" [class.on]="r.active" [class.off]="!r.active">{{ r.active ? 'ใช้งาน' : 'ปิดใช้งาน' }}</span>
+                </td>
+              </tr>
+              } @empty {
+              @if (!loading()) {
+              <tr><td colspan="7" class="empty">{{ title() ? 'ไม่พบข้อมูล' : 'กรุณาเลือกกลุ่มข้อมูล' }}</td></tr>
+              }
+              }
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+
+    @if (editing(); as e) {
+    <div class="kc-auth-modal-bg" (click)="close()">
+      <div class="kc-auth-modal" role="dialog" aria-modal="true" aria-labelledby="kc-kl-edit" (click)="$event.stopPropagation()">
+        <div class="kc-auth-modal-header">
+          <span id="kc-kl-edit">{{ e.id ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล' }} — กลุ่ม {{ title() }}</span>
+          <button type="button" class="kc-auth-close" aria-label="ปิด" (click)="close()">&times;</button>
+        </div>
+        <div class="kc-auth-modal-body">
+          @if (editError()) {
+          <div class="kc-auth-alert error" role="alert">{{ editError() }}</div>
+          }
+          @if (hint()) {
+          <p class="kc-auth-hint" style="margin: 0 0 12px">{{ hint() }}</p>
+          }
+          <div class="kc-auth-grid">
+            <label class="kc-auth-field">
+              <span>รหัส (k_code)</span>
+              <input class="kc-auth-input" type="text" [(ngModel)]="e.code" maxlength="255" />
+            </label>
+            <label class="kc-auth-field">
+              <span>ลำดับ (k_no)</span>
+              <input class="kc-auth-input" type="text" inputmode="numeric" [(ngModel)]="e.no" maxlength="9" />
+            </label>
+            <label class="kc-auth-field full">
+              <span>ชื่อ (k_name) <span class="req">*</span></span>
+              <input class="kc-auth-input" type="text" [(ngModel)]="e.name" maxlength="255" />
+            </label>
+            <label class="kc-auth-field full">
+              <span>ชื่อที่ 2 (k_name1)</span>
+              <input class="kc-auth-input" type="text" [(ngModel)]="e.name1" maxlength="255" />
+            </label>
+            <label class="kc-auth-field">
+              <span>ค่า (k_value)</span>
+              <input class="kc-auth-input" type="text" [(ngModel)]="e.value" maxlength="255" />
+            </label>
+            <label class="kc-auth-field">
+              <span>กลุ่มย่อย (k_grp)</span>
+              <input class="kc-auth-input" type="text" [(ngModel)]="e.grp" maxlength="255" />
+            </label>
+            <label class="kc-auth-field">
+              <span>k_mark</span>
+              <input class="kc-auth-input" type="text" [(ngModel)]="e.mark" maxlength="255" />
+            </label>
+            <label class="kc-auth-field">
+              <span>สถานะ</span>
+              <select class="kc-auth-input" [(ngModel)]="e.active">
+                <option [ngValue]="true">ใช้งาน</option>
+                <option [ngValue]="false">ปิดใช้งาน</option>
+              </select>
+            </label>
+          </div>
+          <div class="kc-auth-actions">
+            <button type="button" class="kc-auth-btn" (click)="close()">ยกเลิก</button>
+            <button type="button" class="kc-auth-btn primary" [disabled]="saving()" (click)="save()">
+              {{ saving() ? 'กำลังบันทึก...' : 'บันทึก' }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    }
+  `
+		}]
+	}],
+	ctorParameters: () => []
+});
+export { AnchoredPopup, ClockPickerDirective, ClockPickerPopupComponent, DatePickerDirective, DatePickerPopupComponent, KC_AUTH_CONFIG, KC_AUTH_PATHS, KC_RETURN_URL_KEY, KC_SSO_STATE_KEY, KC_SSO_TICKET_KEY, KcAuthService, KcConfigKclluComponent, KcConfigUsersComponent, KcLoginComponent, KcPasswordToggleComponent, KcProfileComponent, KcRegisterComponent, KcSsoCallbackComponent, PICKER_CSS, SearchSelectComponent, ThaiDatePickerComponent, ensurePickerStyles, fixThaiText, formatDate, kcAdminGuard, kcAuthGuard, kcAuthInterceptor, kcAuthRoutes, kcErrorMessage, kcTokenExpired, parseDate, provideKcAuth, provideThaiPasteFix, resolveKcAuthConfig, toBuddhistText, toChristianText };
 
 //# sourceMappingURL=kengcom202-kcore-ui.mjs.map