@sd-angular/core 19.0.45 → 19.0.47

package/README.md

@@ -120,7 +120,9 @@ export const appConfig: ApplicationConfig = {
 | `--sd-view-label-color` | `var(--sd-black400)` | Label chỉ-đọc (`sd-view`, control ở `viewed`, `sd-section-item`), class `.sd-view-label` |
 | `--sd-view-value-color` | `var(--sd-black500)` | Giá trị chỉ-đọc, class `.sd-view-value` |
 
-`theme()` còn ánh xạ token Material của form field, option và datepicker sang palette này (`assets/scss/themes/_material-tokens.scss`): viền/label/caret khi focus và option/ngày đang chọn dùng `--sd-primary`, viền lúc nghỉ dùng `--sd-black200`, field lỗi chỉ đổi viền sang `--sd-error` (label giữ màu thường). Đổi `primary` trong `theme()` là các trạng thái này đổi theo.
+`theme()` còn ánh xạ token Material của form field, option và datepicker sang palette này (`assets/scss/themes/_material-tokens.scss`): label/caret/mũi tên select khi focus và option/ngày đang chọn dùng `--sd-primary`. Đổi `primary` trong `theme()` là các trạng thái này đổi theo.
+
+Viền (outline) của form field luôn là `--sd-black200` ở mọi trạng thái — nghỉ, hover, focus (chỉ dày hơn) và lỗi (`assets/scss/core/form.scss`, `!important`). Field lỗi báo bằng label, message và dấu `*` màu đỏ; riêng field `hideInlineError` bị lỗi (không có message) có viền `--sd-error`.
 
 ### Custom Theme / Tuỳ chỉnh theme
 

package/assets/scss/core/form.scss

@@ -11,8 +11,22 @@
     color: map.get(color.$color_map, 'error');
   }
 
-  // Màu viền / label / caret theo trạng thái (thường, focus, lỗi): token Material ánh xạ sang palette
-  // Core trong theme() — xem themes/_material-tokens.scss.
+  // Xử lý màu border nhạt bớt
+  // why: viền xám ở MỌI trạng thái (nghỉ, hover, focus, lỗi) — focus chỉ dày hơn, lỗi báo bằng label và
+  // message đỏ. 19.0.45 từng đổi viền focus sang primary và viền lỗi sang đỏ; 19.0.46 trả lại giao diện
+  // cũ vì các app đang dùng không được báo trước thay đổi này.
+  .mat-mdc-notch-piece {
+    &.mdc-notched-outline__leading {
+      border-color: map.get(color.$color_map, 'black200') !important;
+    }
+    &.mdc-notched-outline__notch {
+      border-top-color: map.get(color.$color_map, 'black200') !important;
+      border-bottom-color: map.get(color.$color_map, 'black200') !important;
+    }
+    &.mdc-notched-outline__trailing {
+      border-color: map.get(color.$color_map, 'black200') !important;
+    }
+  }
 
   // Xử lý icon
   .sd-suffix-icon {
@@ -113,12 +127,27 @@
     }
   }
 
-  // Bỏ padding nếu hideInlineError. Viền đỏ khi lỗi đến từ token `error-outline-color` trong theme(),
-  // như mọi field khác.
+  // Bỏ padding nếu hideInlineError
   &.hide-inline-error {
     .mat-mdc-form-field-subscript-wrapper {
       display: none;
     }
+
+    // why: không có message lỗi bên dưới nên field lỗi tô viền đỏ — ngoại lệ duy nhất của viền xám ở trên.
+    &.mat-form-field-invalid {
+      .mat-mdc-notch-piece {
+        &.mdc-notched-outline__leading {
+          border-color: map.get(color.$color_map, 'error') !important;
+        }
+        &.mdc-notched-outline__notch {
+          border-top-color: map.get(color.$color_map, 'error') !important;
+          border-bottom-color: map.get(color.$color_map, 'error') !important;
+        }
+        &.mdc-notched-outline__trailing {
+          border-color: map.get(color.$color_map, 'error') !important;
+        }
+      }
+    }
   }
 
   // Size normal`

package/assets/scss/themes/_material-tokens.scss

@@ -1,20 +1,18 @@
 // Angular Material component tokens mapped onto the Core palette.
 //
-// why: `core/form.scss` used to force `border-color: var(--sd-black200) !important` on the outline
-// pieces in every state, so a focused field only drew a thicker grey outline and an invalid field kept
-// a grey outline under a red label. The colours now go through Material's own tokens, declared by
-// theme() so every theme scope resolves them against its palette and a parent of a field can still
-// override a token for its subtree.
+// why: theme() declares these, so every theme scope resolves them against its palette and a parent of a
+// field can still override a token for its subtree.
 //
-// - Rest / hover / disabled outline: --sd-black200 (the colour the old rule forced).
-// - Focus: --sd-primary for the outline, floating label, caret, select arrow and datepicker toggle.
-// - Error: only the outline (and the filled active indicator) turns --sd-error. The floating label and
-//   the select arrow keep the colour of a valid field; the error message, error icon and required
-//   marker stay red.
+// - Outline: not here. `core/form.scss` forces `--sd-black200` with `!important` on the outline pieces in
+//   every state (red only for an invalid `hideInlineError` field). 19.0.45 moved the outline onto the
+//   focus/error tokens (primary while focused, red when invalid); 19.0.46 restored the grey outline.
+// - Focus: --sd-primary for the floating label, caret, select arrow, datepicker toggle and the filled
+//   active indicator.
+// - Error: Material's own error colours (the Material 2 warn palette of `material-theme.scss`): red label,
+//   caret and select arrow; the filled active indicator turns --sd-error.
 // - Options, checkmarks and datepicker: selected state in --sd-primary.
 //
 // Token names are the Material 19 ones (`--mdc-*-text-field-*`, `--mat-{full,minimal}-pseudo-checkbox-*`).
-// The label references fall back to the Material 2 theme values of `material-theme.scss`.
 
 $-text-field-prefixes: (
   outlined: '--mdc-outlined-text-field-',
@@ -24,20 +22,8 @@ $-text-field-prefixes: (
 @mixin emit() {
   @each $appearance, $prefix in $-text-field-prefixes {
     #{$prefix}caret-color: var(--sd-primary);
-    #{$prefix}error-caret-color: var(--sd-primary);
     #{$prefix}focus-label-text-color: var(--sd-primary);
-    #{$prefix}error-focus-label-text-color: var(--sd-primary);
-    #{$prefix}error-label-text-color: var(#{$prefix}label-text-color, rgba(0, 0, 0, 0.6));
-    #{$prefix}error-hover-label-text-color: var(#{$prefix}hover-label-text-color, rgba(0, 0, 0, 0.87));
-    @if $appearance == outlined {
-      #{$prefix}outline-color: var(--sd-black200);
-      #{$prefix}hover-outline-color: var(--sd-black200);
-      #{$prefix}disabled-outline-color: var(--sd-black200);
-      #{$prefix}focus-outline-color: var(--sd-primary);
-      #{$prefix}error-outline-color: var(--sd-error);
-      #{$prefix}error-hover-outline-color: var(--sd-error);
-      #{$prefix}error-focus-outline-color: var(--sd-error);
-    } @else {
+    @if $appearance == filled {
       #{$prefix}focus-active-indicator-color: var(--sd-primary);
       #{$prefix}error-active-indicator-color: var(--sd-error);
       #{$prefix}error-hover-active-indicator-color: var(--sd-error);
@@ -46,7 +32,6 @@ $-text-field-prefixes: (
   }
   --mat-form-field-focus-select-arrow-color: var(--sd-primary);
   --mat-select-focused-arrow-color: var(--sd-primary);
-  --mat-select-invalid-arrow-color: var(--mat-select-enabled-arrow-color, rgba(0, 0, 0, 0.54));
   --mat-datepicker-toggle-active-state-icon-color: var(--sd-primary);
 
   --mat-option-selected-state-label-text-color: var(--sd-primary);

package/components/upload-file/src/upload-file.component.d.ts

@@ -66,8 +66,34 @@ export declare class SdUploadFile<TArgs = any> {
      */
     getFiles: () => Promise<File[]>;
     /**
-     * Thực hiện upload các file và gán giá trị, output trả ra mảng idOrKeys.
-     * HÀM NÀY BẮT BUỘC PHẢI GỌI TRƯỚC KHI GỌI VỀ SERVER.
+     * Upload the local files referenced by the model, then replace their temporary
+     * keys with server IDs. Call and await this method before submitting the model.
+     *
+     * Files are read from the model and local snapshots/cache, so pending or failed metadata
+     * requests do not omit files. Each distinct local key is uploaded once per
+     * batch; duplicate occurrences retain their positions and share the returned ID.
+     * Server IDs and URLs are preserved even when they have no preview metadata.
+     *
+     * Concurrent calls share the active batch. Changes made while it is pending
+     * are preserved: removed keys stay removed, reordering is retained, and newly
+     * added local keys remain pending for a subsequent call. After destruction, no
+     * new upload starts and an in-flight upload cannot update the model.
+     *
+     * @returns A promise resolving to void after the batch finishes. The preview
+     * metadata refresh may still be pending. With no local files this is a no-op.
+     * A missing upload handler displays the configuration error and resolves
+     * without changing the model or cache.
+     * @throws The upload handler's error, without changing the model or cache.
+     * @throws Error if the handler does not return exactly one non-empty string ID
+     * per distinct local key; the model and cache are retained in that case.
+     *
+     * @example
+     * import { SdUploadFile } from '@sd-angular/core/components/upload-file';
+     *
+     * async function submit(control: SdUploadFile) {
+     *   await control.upload();
+     *   return control.model(); // Server IDs/URLs for the uploaded batch.
+     * }
      */
     upload: () => Promise<void>;
     /**

package/fesm2022/sd-angular-core-components-upload-file.mjs

@@ -199,6 +199,9 @@ class SdUploadFile {
     #canvas2 = `C${Utilities.generateUuid()}`;
     #name = Utilities.generateUuid();
     #formGroup;
+    #uploadPromise;
+    #destroyed = false;
+    #localFiles = new Map();
     formControl = new SdFormControl();
     // why: component là OnPush nhưng template đọc formControl.touched/errors như thuộc tính
     // THƯỜNG (không reactive). Khi cha submit (markAllAsTouched) hoặc validator gắn lỗi, không
@@ -324,19 +327,34 @@ class SdUploadFile {
             }
         });
         // Reactive sync for model changes
-        effect(() => {
-            const values = this.model() || [];
+        effect(onCleanup => {
+            const modelValue = this.model();
+            const values = modelValue || [];
+            let active = true;
+            let cancelReaders;
+            // why: model có thể đổi trước lần effect kế tiếp; cleanup thôi chưa chặn được
+            // Promise cũ resolve trong khoảng đó. Destroy cũng phải chặn mọi emit/ghi state.
+            const isCurrent = () => active && !this.#destroyed && this.model() === modelValue;
+            onCleanup(() => {
+                active = false;
+                cancelReaders?.();
+            });
             this.formControl.setValue(values);
             if (Array.isArray(values)) {
                 this.#details(values).then(previewFiles => {
+                    if (!isCurrent())
+                        return;
                     this.previewFiles.set(previewFiles);
                     this.filesChanged.emit(this.previewFiles()
                         .map(e => e.file || e.idOrKey || e.src)
                         .filter(val => !!val));
-                    this.#preview();
+                    // why: consumer của filesChanged có thể đổi model hoặc destroy đồng bộ.
+                    if (isCurrent())
+                        cancelReaders = this.#preview(isCurrent);
                 });
             }
             else {
+                this.#localFiles.clear();
                 this.previewFiles.set([]);
             }
         });
@@ -364,6 +382,8 @@ class SdUploadFile {
         });
         // Cleanup on destroy
         this.#destroyRef.onDestroy(() => {
+            this.#destroyed = true;
+            this.#localFiles.clear();
             this.#revokePreviewBlobURLs();
             this.#formGroup?.removeControl(this.#name);
         });
@@ -495,17 +515,28 @@ class SdUploadFile {
         }
         return null;
     };
-    #preview = () => {
+    #preview = (isCurrent) => {
+        const readers = [];
         for (const previewFile of this.previewFiles().filter(e => e.file)) {
             const reader = new FileReader();
             reader.onload = evt => {
+                if (!isCurrent())
+                    return;
                 previewFile.previewSrc = evt.target.result;
                 previewFile.isPreviewImage = previewFile.file?.type.split('/')[0] === 'image' && previewFile.file?.type !== 'image/tiff';
                 // trigger signal update
                 this.previewFiles.set([...this.previewFiles()]);
             };
+            readers.push(reader);
             reader.readAsDataURL(previewFile.file);
         }
+        return () => {
+            for (const reader of readers) {
+                reader.onload = null;
+                if (reader.readyState === FileReader.LOADING)
+                    reader.abort();
+            }
+        };
     };
     // ─── Public Event Handlers ────────────────────────────────────────────
     onUpload = () => {
@@ -535,6 +566,7 @@ class SdUploadFile {
     };
     #uploadFile = async (originFiles) => {
         const currentModel = [...(this.model() || [])];
+        const pickedFiles = new Map();
         if (originFiles.length + currentModel.length > this.max()) {
             this.#notifyService.warning(this.#i18n.t('core.component.upload-file.too-many-files'));
             return;
@@ -551,9 +583,15 @@ class SdUploadFile {
             }
             const hashedKey = this.#uploadFileService.add(file);
             if (hashedKey) {
+                pickedFiles.set(hashedKey, file);
                 currentModel.push(hashedKey);
             }
         }
+        // why: giữ batch riêng qua từng await validate/resize; cache chung và effect của
+        // model cũ có thể mất hash trước khi picker hoàn tất. Chỉ nhận ownership khi commit.
+        for (const [key, file] of pickedFiles)
+            this.#localFiles.set(key, file);
+        this.#snapshotFiles(currentModel);
         this.model.set(currentModel);
         this.#touch();
     };
@@ -685,50 +723,81 @@ class SdUploadFile {
         return items.map(e => e?.file).filter(file => !!file);
     };
     /**
-     * Thực hiện upload các file và gán giá trị, output trả ra mảng idOrKeys.
-     * HÀM NÀY BẮT BUỘC PHẢI GỌI TRƯỚC KHI GỌI VỀ SERVER.
+     * Upload the local files referenced by the model, then replace their temporary
+     * keys with server IDs. Call and await this method before submitting the model.
+     *
+     * Files are read from the model and local snapshots/cache, so pending or failed metadata
+     * requests do not omit files. Each distinct local key is uploaded once per
+     * batch; duplicate occurrences retain their positions and share the returned ID.
+     * Server IDs and URLs are preserved even when they have no preview metadata.
+     *
+     * Concurrent calls share the active batch. Changes made while it is pending
+     * are preserved: removed keys stay removed, reordering is retained, and newly
+     * added local keys remain pending for a subsequent call. After destruction, no
+     * new upload starts and an in-flight upload cannot update the model.
+     *
+     * @returns A promise resolving to void after the batch finishes. The preview
+     * metadata refresh may still be pending. With no local files this is a no-op.
+     * A missing upload handler displays the configuration error and resolves
+     * without changing the model or cache.
+     * @throws The upload handler's error, without changing the model or cache.
+     * @throws Error if the handler does not return exactly one non-empty string ID
+     * per distinct local key; the model and cache are retained in that case.
+     *
+     * @example
+     * import { SdUploadFile } from '@sd-angular/core/components/upload-file';
+     *
+     * async function submit(control: SdUploadFile) {
+     *   await control.upload();
+     *   return control.model(); // Server IDs/URLs for the uploaded batch.
+     * }
      */
-    upload = async () => {
-        const items = this.previewFiles()?.filter(val => !!val) || [];
-        if (!Array.isArray(items)) {
-            this.model.set([]);
+    upload = () => {
+        if (this.#destroyed)
+            return Promise.resolve();
+        if (!this.#uploadPromise) {
+            // why: hai lần submit đồng thời phải dùng chung batch, tránh upload trùng File.
+            this.#uploadPromise = this.#uploadPendingFiles().finally(() => {
+                this.#uploadPromise = undefined;
+            });
+        }
+        return this.#uploadPromise;
+    };
+    #uploadPendingFiles = async () => {
+        const pending = [
+            ...new Map(this.#snapshotFiles(this.model())
+                .filter(entry => entry.file)
+                .map(entry => [entry.key, entry])).values(),
+        ];
+        if (!pending.length)
+            return;
+        const uploadHandler = this.#getUploadHandler();
+        if (!uploadHandler) {
+            const key = this.key();
+            this.#notifyService.error(key === undefined
+                ? this.#i18n.t('core.component.upload-file.no-configuration')
+                : this.#i18n.t('core.component.upload-file.no-configuration-key', { key }));
             return;
         }
-        const results = [];
-        const uploadedFiles = items.map(e => e?.file).filter(file => !!file);
-        let idOrKeys = [];
-        if (uploadedFiles.length) {
-            const uploadHandler = this.#getUploadHandler();
-            if (uploadHandler) {
-                idOrKeys = await uploadHandler(uploadedFiles, this.args()).then(results => {
-                    for (const uploadedFile of uploadedFiles) {
-                        this.#uploadFileService.remove(uploadedFile);
-                    }
-                    return results;
-                });
-            }
-            else {
-                const key = this.key();
-                this.#notifyService.error(key === undefined
-                    ? this.#i18n.t('core.component.upload-file.no-configuration')
-                    : this.#i18n.t('core.component.upload-file.no-configuration-key', { key }));
-            }
+        const idOrKeys = await uploadHandler(pending.map(entry => entry.file), this.args());
+        if (!Array.isArray(idOrKeys) ||
+            idOrKeys.length !== pending.length ||
+            pending.some((_, index) => typeof idOrKeys[index] !== 'string' || !idOrKeys[index])) {
+            throw new Error('[sd-upload-file] Upload must return one non-empty string ID per file.');
         }
-        let idx = 0;
-        for (const item of items) {
-            if (!item.file) {
-                if (item.idOrKey) {
-                    results.push(item.idOrKey);
-                }
-            }
-            else {
-                if (idOrKeys?.[idx]) {
-                    results.push(idOrKeys[idx]);
-                    idx++;
-                }
-            }
+        const replacements = new Map(pending.map((entry, index) => [entry.key, idOrKeys[index]]));
+        for (const entry of pending) {
+            this.#uploadFileService.remove(entry.key.toString());
+            this.#localFiles.delete(entry.key.toString());
+        }
+        if (this.#destroyed)
+            return;
+        // why: thay đúng hash trên model MỚI NHẤT, không phục hồi file đã xoá hoặc
+        // ghi đè các thao tác thêm/sắp xếp trong lúc upload đang chờ.
+        const values = this.model();
+        if (Array.isArray(values)) {
+            this.model.set(values.map(key => replacements.get(key) ?? key));
         }
-        this.model.set(results);
     };
     /**
      * Mở popup preview ảnh.
@@ -771,20 +840,23 @@ class SdUploadFile {
      * cần render ra ảnh/tệp tương ứng.
      */
     #details = async (keys) => {
-        if (!Array.isArray(keys) || !keys.length) {
+        const entries = this.#snapshotFiles(keys);
+        if (!entries.length) {
             return [];
         }
-        const idOrKeys = keys.filter(key => !!key && !this.#isCdn(key) && !this.#isHashedKey(key));
+        const idOrKeys = entries.filter(entry => !this.#isCdn(entry.key) && !entry.file).map(entry => entry.key);
         let detailsList = [];
         const detailsHandler = this.#getDetailsHandler();
         if (idOrKeys.length && detailsHandler) {
-            detailsList = await detailsHandler(idOrKeys, this.args()).catch(error => {
+            try {
+                detailsList = await detailsHandler(idOrKeys, this.args());
+            }
+            catch (error) {
                 console.error(error);
-                return [];
-            });
+            }
         }
         const results = [];
-        for (const key of keys.filter(val => !!val)) {
+        for (const { key, file } of entries) {
             if (this.#isCdn(key)) {
                 const cdn = key?.toString();
                 const extension = this.#getExtension(cdn);
@@ -799,9 +871,7 @@ class SdUploadFile {
                     extension,
                 });
             }
-            else if (this.#isHashedKey(key)) {
-                const hashedKey = key?.toString();
-                const file = this.#uploadFileService.get(hashedKey);
+            else if (file) {
                 const lastDot = file.name.lastIndexOf('.');
                 const extension = file.name.substring(lastDot + 1);
                 const isPreviewImage = (file.type.split('/')[0] === 'image' && file.type !== 'image/tiff') || IsImage(extension);
@@ -842,10 +912,26 @@ class SdUploadFile {
             return false;
         return idOrKey.startsWith('http');
     };
-    #isHashedKey = (idOrKey) => {
-        if (typeof idOrKey !== 'string')
-            return false;
-        return this.#uploadFileService.isHashedKey(idOrKey);
+    #snapshotFiles = (keys) => {
+        const values = Array.isArray(keys) ? keys : [];
+        const activeKeys = new Set(values);
+        for (const key of this.#localFiles.keys()) {
+            if (!activeKeys.has(key))
+                this.#localFiles.delete(key);
+        }
+        // why: cache có thể bị upload xoá trong lúc chờ details; giữ File theo snapshot
+        // của từng ô và request, kể cả khi ô khác upload cùng hash rồi xoá cache chung.
+        return values
+            .filter(key => !!key)
+            .map(key => {
+            let file = null;
+            if (typeof key === 'string' && !this.#isCdn(key)) {
+                file = this.#localFiles.get(key) ?? this.#uploadFileService.get(key);
+                if (file)
+                    this.#localFiles.set(key, file);
+            }
+            return { key, file };
+        });
     };
     #getExtension = (cdn) => {
         if (!cdn)