@kengcom202/kcore-ui 0.6.0 → 0.7.0

package/README.md

@@ -8,7 +8,7 @@ Angular 22 UI กลาง — ไม่พึ่งไลบรารีภา
 - `<app-search-select>` — dropdown พิมพ์ค้นหาได้ ค่าเป็น `value` ของ `SearchOption` (`''` = ไม่ระบุ) ปรับสีด้วย `--kc-ss-*`
 - `provideThaiPasteFix()` — ใส่ใน `app.config.ts` ครั้งเดียว แก้ข้อความไทยที่คัดลอกจาก PDF (□ แทนวรรณยุกต์, ช่องว่างหน้าวรรณยุกต์, "ํา") ตอนวางลงทุกช่อง
 - หน้าบัญชีผู้ใช้กลาง — `provideKcAuth({...})` + `kcAuthInterceptor` + `kcAuthRoutes()` (`/login`, `/register`, `/sso-callback`, `/thaid-callback`) — ปุ่ม SSO (`sso`) และ ThaiD (`thaid` เข้าสู่ระบบอย่างเดียว)
-  และ `<kc-profile>`, `<kc-config-users>`, `<kc-config-kcllu>` คู่กับ `kcAuthGuard` / `kcAdminGuard`, `KcAuthService` — API ต้องทำ endpoint ตามสัญญาใน README ของรีโป kcore
+  และ `<kc-profile>`, `<kc-config-users>`, `<kc-config-kcllu>` คู่กับ `kcAuthGuard` / `kcAdminGuard`, `KcAuthService` — API ต้องทำ endpoint ตามสัญญาใน `README_NPM.md` ของรีโป kcore
 - utils: `toBuddhistText`, `toChristianText`, `parseDate`, `formatDate`, `fixThaiText`
 
 ```ts

package/fesm2022/kengcom202-kcore-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from "@angular/core";
-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 { ApplicationRef, CSP_NONCE, Component, DOCUMENT, DestroyRef, Directive, ElementRef, EnvironmentInjector, Injectable, InjectionToken, NgZone, ViewChild, ViewEncapsulation, computed, createComponent, effect, forwardRef, inject, input, makeEnvironmentProviders, provideEnvironmentInitializer, signal, untracked } 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";
@@ -1610,6 +1610,8 @@ const kcAuthInterceptor = (req, next) => {
 const STYLE_ID = "kcore-auth-styles";
 const AUTH_CSS = `
 .kc-auth-screen, .kc-auth-page, .kc-auth-modal-bg {
+  /* ค่าเริ่มต้นใช้ฟอนต์ของเว็บ — เว็บที่ body ใช้ฟอนต์เฉพาะทาง (เช่น TH Sarabun ของหน้าพิมพ์) ตั้งฟอนต์ของหน้าชุดนี้แยกได้ */
+  font-family: var(--kc-auth-font-family, inherit);
   font-size: var(--kc-auth-font-size, 14px);
   color: var(--kc-auth-text, #3a2a3a);
   line-height: 1.5;
@@ -1618,6 +1620,8 @@ const AUTH_CSS = `
 
 /* ---- หน้าเต็มจอ (login / register / sso-callback) ---- */
 .kc-auth-screen {
+  /* border-box: padding อยู่ใน 100vh — ไม่งั้นสูงเกินจอ 48px และมี scrollbar ทั้งที่เนื้อหาน้อย */
+  box-sizing: border-box;
   min-height: 100vh;
   display: flex;
   align-items: center;
@@ -1627,16 +1631,23 @@ const AUTH_CSS = `
 }
 .kc-auth-card {
   width: 100%;
-  max-width: 380px;
-  padding: 28px 28px 24px;
+  max-width: var(--kc-auth-card-width, 380px);
+  /* ขนาดกรอบของหน้าเต็มจอปรับได้ เช่น สูง 80vh แล้วขยายตัวอักษร/ช่องกรอก/โลโก้ตามความสูงจอ — ค่าเริ่มต้น = ขนาดเดิม */
+  min-height: var(--kc-auth-card-height, auto);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: var(--kc-auth-card-padding, 28px 28px 24px);
+  font-size: var(--kc-auth-card-font-size, inherit);
   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.wide { max-width: var(--kc-auth-card-wide-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-card .kc-auth-input, .kc-auth-card .kc-auth-btn { height: var(--kc-auth-card-input-height, var(--kc-auth-input-height, 40px)); }
+.kc-auth-logo { display: block; max-height: var(--kc-auth-logo-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; }
@@ -1699,6 +1710,8 @@ const AUTH_CSS = `
 .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 {
+  /* <button> ไม่รับขนาดตัวอักษรจากแม่ (browser ตั้ง ~13px) — ต้อง inherit ไม่งั้นขนาด em ของไอคอนไม่ขยายตามกรอบ */
+  font: inherit;
   position: absolute;
   top: 50%;
   right: 5px;
@@ -1727,6 +1740,20 @@ const AUTH_CSS = `
   --kc-ss-border: var(--kc-auth-input-border, #e9cde9);
   --kc-ss-text: var(--kc-auth-text, #3a2a3a);
 }
+.kc-auth-card .kc-auth-field .kc-ss { --kc-ss-height: var(--kc-auth-card-input-height, var(--kc-auth-input-height, 40px)); }
+/* ในกรอบหน้าเต็มจอ ขนาดย่อยทั้งหมดเป็น em ของตัวอักษรในกรอบ (= px เดิมที่ 14px) — ตั้ง --kc-auth-card-font-size
+   แล้วไอคอน ระยะห่าง และ padding ขยาย/หดตามสัดส่วนเดียวกัน */
+.kc-auth-card .kc-auth-logo { margin-bottom: 0.86em; }
+.kc-auth-card .kc-auth-subtitle { margin: 0.3em 0 1.43em; }
+.kc-auth-card .kc-auth-footer { margin-top: 1.3em; }
+.kc-auth-card .kc-auth-field { gap: 0.3em; margin-bottom: 0.86em; }
+.kc-auth-card .kc-auth-input { padding: 0 0.72em; border-radius: 0.57em; }
+.kc-auth-card .kc-auth-pw > .kc-auth-input { padding-right: 3em; }
+.kc-auth-card .kc-auth-pw-toggle { right: 0.36em; width: 2.3em; height: 2.3em; border-radius: 0.43em; }
+.kc-auth-card .kc-auth-pw-toggle svg { width: 1.36em; height: 1.36em; }
+.kc-auth-card .kc-auth-btn { padding: 0 1.15em; border-radius: 0.57em; gap: 0.43em; }
+.kc-auth-card .kc-auth-btn-row { gap: 0.72em; margin-top: 0.43em; }
+.kc-auth-card .kc-auth-alert { padding: 0.72em 0.86em; margin-bottom: 1em; border-radius: 0.43em; }
 .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; }
@@ -1777,6 +1804,7 @@ const AUTH_CSS = `
 /* ปิดรหัสผ่าน: ปุ่ม SSO ปุ่มเดียวตรงกลาง */
 .kc-auth-sso-only { display: flex; flex-direction: column; align-items: center; gap: 10px; 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-card .kc-auth-sso-only > .kc-auth-btn { height: calc(var(--kc-auth-card-input-height, var(--kc-auth-input-height, 40px)) * 1.15); padding: 0 1.7em; }
 .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; }
@@ -3423,6 +3451,7 @@ var KcConfigUsersComponent = class KcConfigUsersComponent {
 	config = inject(KC_AUTH_CONFIG);
 	auth = inject(KcAuthService);
 	http = inject(HttpClient);
+	org = input("", ...ngDevMode ? [{ debugName: "org" }] : /* istanbul ignore next */ []);
 	users = signal([], ...ngDevMode ? [{ debugName: "users" }] : /* istanbul ignore next */ []);
 	orgs = signal([], ...ngDevMode ? [{ debugName: "orgs" }] : /* istanbul ignore next */ []);
 	roles = signal([], ...ngDevMode ? [{ debugName: "roles" }] : /* istanbul ignore next */ []);
@@ -3483,9 +3512,12 @@ var KcConfigUsersComponent = class KcConfigUsersComponent {
 	}, ...ngDevMode ? [{ debugName: "filtered" }] : /* istanbul ignore next */ []);
 	constructor() {
 		ensureAuthStyles();
+		effect(() => {
+			this.org();
+			untracked(() => this.load());
+		});
 	}
 	ngOnInit() {
-		this.load();
 		this.http.get(`${this.config.apiBase}/user/login-methods`).subscribe({
 			next: (m) => {
 				const v = {
@@ -3534,7 +3566,9 @@ var KcConfigUsersComponent = class KcConfigUsersComponent {
 	}
 	load() {
 		this.loading.set(true);
-		this.http.get(`${this.config.apiBase}/config/users`).subscribe({
+		const org = this.org();
+		const params = org ? { org } : {};
+		this.http.get(`${this.config.apiBase}/config/users`, { params }).subscribe({
 			next: (res) => {
 				this.users.set(res.users ?? []);
 				this.orgs.set(res.orgs ?? []);
@@ -3611,6 +3645,13 @@ var KcConfigUsersComponent = class KcConfigUsersComponent {
 		type: KcConfigUsersComponent,
 		isStandalone: true,
 		selector: "kc-config-users",
+		inputs: { org: {
+			classPropertyName: "org",
+			publicName: "org",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
 		host: { listeners: { "document:keydown.escape": "close()" } },
 		ngImport: i0,
 		template: `
@@ -4001,7 +4042,15 @@ i0.ɵɵngDeclareClassMetadata({
   `
 		}]
 	}],
-	ctorParameters: () => []
+	ctorParameters: () => [],
+	propDecorators: { org: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "org",
+			required: false
+		}]
+	}] }
 });
 var KcConfigKclluComponent = class KcConfigKclluComponent {
 	config = inject(KC_AUTH_CONFIG);