npm - @sdcorejs/angular - Versions diffs - 20.0.1 → 20.0.4 - Mend

@sdcorejs/angular 20.0.1 → 20.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (142) hide show

package/fesm2022/sdcorejs-angular-services-notify.mjs CHANGED Viewed

@@ -1,12 +1,14 @@
 import { CommonModule, DOCUMENT } from '@angular/common';
 import * as i0 from '@angular/core';
-import { signal, HostListener, Input, Component, createComponent, Inject, Injectable } from '@angular/core';
+import { signal, SecurityContext, HostListener, Input, Component, createComponent, Inject, Injectable } from '@angular/core';
 import { Utilities } from '@sdcorejs/utils/fns';
 import { trigger, transition, style, animate } from '@angular/animations';
 import { TranslatePipe } from '@sdcorejs/angular/i18n';
+import * as i2 from '@angular/platform-browser';
 class ToastComponent {
     notifyService;
+    sanitizer;
     data;
     isExpanded = signal(false, ...(ngDevMode ? [{ debugName: "isExpanded" }] : []));
     MAX_SHOW = 2;
@@ -14,8 +16,22 @@ class ToastComponent {
     timer;
     start;
     remaining;
-    constructor(notifyService) {
+    constructor(notifyService, sanitizer) {
         this.notifyService = notifyService;
+        this.sanitizer = sanitizer;
+    }
+    /**
+     * Sanitize HTML tường minh trước khi render qua `[innerHTML]` — strip
+     * `<script>`, event handler (`on*`), `javascript:` URL. Chỉ chạy ở nhánh
+     * `data.html === true`; nhánh mặc định render text (auto-escape) nên không
+     * có sink này. // why: phơi rõ việc sanitize cho review/scanner bảo mật.
+     */
+    sanitizeHtml(value) {
+        return this.sanitizer.sanitize(SecurityContext.HTML, value) ?? '';
+    }
+    /** Message ở dạng chuỗi đơn (chỉ dùng khi !isMultiMessage). */
+    get singleMessage() {
+        return this.data.message;
     }
     ngOnInit() {
         // Khởi tạo thời gian còn lại bằng duration ban đầu
@@ -73,8 +89,16 @@ class ToastComponent {
     get hasMore() {
         return this.isMultiMessage && this.messages.length > this.MAX_SHOW;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ToastComponent, deps: [{ token: SdNotifyService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: ToastComponent, isStandalone: true, selector: "toast", inputs: { data: "data" }, host: { listeners: { "mouseenter": "pauseTimer()", "mouseleave": "resumeTimer()" }, properties: { "@toastAnimation": "true", "class": "\"bg-white sd-toast\"" } }, ngImport: i0, template: "<div class=\"sd-toast__bar\" [class]=\"'bg-' + data.type\"></div>\n\n<div class=\"sd-toast__icon\" [class]=\"'text-' + data.type\">\n  @switch (data.type) {\n    @case ('success') {\n      <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"/></svg>\n    }\n    @case ('info') {\n      <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z\"/></svg>\n    }\n    @case ('warning') {\n      <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z\"/></svg>\n    }\n    @case ('error') {\n      <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\"/></svg>\n    }\n  }\n</div>\n\n<div class=\"sd-toast__content\">\n  <div class=\"sd-toast__header\">\n    <strong class=\"sd-toast__title\">{{ data.title || ('core.notify.type.' + data.type | translate) }}</strong>\n    <button class=\"sd-toast__close\" (click)=\"close()\">\u2715</button>\n  </div>\n\n  <div class=\"sd-toast__body\">\n    @if (!isMultiMessage) {\n      <div [innerHTML]=\"data.message\"></div>\n    } \n    @else {\n      <ul class=\"msg-list\">\n        @for (msg of displayMessages; track msg) {\n          <li [innerHTML]=\"'- ' + msg\"></li>\n        }\n      </ul>\n\n      @if (hasMore) {\n        <button type=\"button\" \n                class=\"toggle-more btn-link\" \n                [class]=\"'text-' + data.type\" \n                (click)=\"toggleExpand()\">\n          {{ isExpanded() ? ('core.notify.show-less' | translate) : ('core.notify.show-more' | translate: { count: restCount }) }}\n        </button>\n      }\n    }\n  </div>\n\n  @if (data.actionLabel) {\n    <div class=\"sd-toast__actions\">\n      <button class=\"btn-action\" \n              [class]=\"'bg-' + data.type + '-light text-' + data.type\"\n              (click)=\"onActionClick()\">\n        {{ data.actionLabel }}\n      </button>\n    </div>\n  }\n</div>", styles: ["@charset \"UTF-8\";:host{display:flex;width:350px;border-radius:8px;box-shadow:0 4px 12px #00000026;margin-bottom:12px;overflow:hidden;position:relative;font-family:Roboto,sans-serif;pointer-events:auto}.sd-toast__bar{width:6px;flex-shrink:0}.sd-toast__icon{padding:12px 0 0 12px;flex-shrink:0}.sd-toast__icon svg{width:24px;height:24px}.sd-toast__content{flex-grow:1;padding:12px;display:flex;flex-direction:column}.sd-toast__header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:4px}.sd-toast__title{font-size:16px;font-weight:600}.sd-toast__close{background:none;border:none;font-size:16px;cursor:pointer;line-height:1;padding:0;opacity:.5;transition:opacity .2s}.sd-toast__close:hover{opacity:1}.sd-toast__body{font-size:14px;line-height:1.4;word-break:break-word}.sd-toast__actions{display:flex;justify-content:flex-end;margin-top:8px}.msg-list{padding-left:0;list-style:none;margin:0}.toggle-more{background:none;border:none;padding:0;font:inherit;cursor:pointer;font-size:13px;margin-top:4px;font-weight:500;text-align:left}.toggle-more:hover{text-decoration:underline}.toggle-more:focus-visible{outline:2px solid currentColor;outline-offset:2px}.btn-action{border:none;padding:6px 12px;border-radius:4px;font-weight:600;cursor:pointer;font-size:13px;transition:filter .2s}.btn-action:hover{filter:brightness(.95)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [
+    /** autoid theo loại toast để E2E chọn trực tiếp, vd `services-notify-toast-success`. */
+    get autoId() {
+        return `services-notify-toast-${this.data.type}`;
+    }
+    /** Gộp message (mảng nối ' | ') để phơi ra data-message cho E2E. */
+    get dataMessage() {
+        return Array.isArray(this.data.message) ? this.data.message.join(' | ') : this.data.message;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ToastComponent, deps: [{ token: SdNotifyService }, { token: i2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: ToastComponent, isStandalone: true, selector: "toast", inputs: { data: "data" }, host: { listeners: { "mouseenter": "pauseTimer()", "mouseleave": "resumeTimer()" }, properties: { "@toastAnimation": "true", "class": "\"bg-white sd-toast\"", "attr.data-autoid": "autoId", "attr.data-type": "data.type", "attr.data-title": "data.title ?? null", "attr.data-message": "dataMessage" } }, ngImport: i0, template: "<div class=\"sd-toast__bar\" [class]=\"'bg-' + data.type\"></div>\n\n<div class=\"sd-toast__icon\" [class]=\"'text-' + data.type\">\n  @switch (data.type) {\n    @case ('success') {\n      <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"/></svg>\n    }\n    @case ('info') {\n      <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z\"/></svg>\n    }\n    @case ('warning') {\n      <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z\"/></svg>\n    }\n    @case ('error') {\n      <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\"/></svg>\n    }\n  }\n</div>\n\n<div class=\"sd-toast__content\">\n  <div class=\"sd-toast__header\">\n    <strong class=\"sd-toast__title\">{{ data.title || ('core.notify.type.' + data.type | translate) }}</strong>\n    <button class=\"sd-toast__close\" (click)=\"close()\">\u2715</button>\n  </div>\n\n  <div class=\"sd-toast__body\">\n    @if (!isMultiMessage) {\n      <!-- why: m\u1EB7c \u0111\u1ECBnh render TEXT (auto-escape) \u2014 an to\u00E0n. Ch\u1EC9 render HTML\n           (\u0111\u00E3 sanitize) khi data.html=true. -->\n      @if (data.html) {\n        <div [innerHTML]=\"sanitizeHtml(singleMessage)\"></div>\n      } @else {\n        <div>{{ singleMessage }}</div>\n      }\n    }\n    @else {\n      <ul class=\"msg-list\">\n        @for (msg of displayMessages; track msg) {\n          @if (data.html) {\n            <li [innerHTML]=\"sanitizeHtml('- ' + msg)\"></li>\n          } @else {\n            <li>{{ '- ' + msg }}</li>\n          }\n        }\n      </ul>\n\n      @if (hasMore) {\n        <button type=\"button\" \n                class=\"toggle-more btn-link\" \n                [class]=\"'text-' + data.type\" \n                (click)=\"toggleExpand()\">\n          {{ isExpanded() ? ('core.notify.show-less' | translate) : ('core.notify.show-more' | translate: { count: restCount }) }}\n        </button>\n      }\n    }\n  </div>\n\n  @if (data.actionLabel) {\n    <div class=\"sd-toast__actions\">\n      <button class=\"btn-action\" \n              [class]=\"'bg-' + data.type + '-light text-' + data.type\"\n              (click)=\"onActionClick()\">\n        {{ data.actionLabel }}\n      </button>\n    </div>\n  }\n</div>", styles: ["@charset \"UTF-8\";:host{display:flex;width:350px;border-radius:8px;box-shadow:0 4px 12px #00000026;margin-bottom:12px;overflow:hidden;position:relative;font-family:Roboto,sans-serif;pointer-events:auto}.sd-toast__bar{width:6px;flex-shrink:0}.sd-toast__icon{padding:12px 0 0 12px;flex-shrink:0}.sd-toast__icon svg{width:24px;height:24px}.sd-toast__content{flex-grow:1;padding:12px;display:flex;flex-direction:column}.sd-toast__header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:4px}.sd-toast__title{font-size:16px;font-weight:600}.sd-toast__close{background:none;border:none;font-size:16px;cursor:pointer;line-height:1;padding:0;opacity:.5;transition:opacity .2s}.sd-toast__close:hover{opacity:1}.sd-toast__body{font-size:14px;line-height:1.4;word-break:break-word}.sd-toast__actions{display:flex;justify-content:flex-end;margin-top:8px}.msg-list{padding-left:0;list-style:none;margin:0}.toggle-more{background:none;border:none;padding:0;font:inherit;cursor:pointer;font-size:13px;margin-top:4px;font-weight:500;text-align:left}.toggle-more:hover{text-decoration:underline}.toggle-more:focus-visible{outline:2px solid currentColor;outline-offset:2px}.btn-action{border:none;padding:6px 12px;border-radius:4px;font-weight:600;cursor:pointer;font-size:13px;transition:filter .2s}.btn-action:hover{filter:brightness(.95)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [
             trigger('toastAnimation', [
                 transition(':enter', [
                     style({ transform: 'translateX(100%)', opacity: 0 }),
@@ -86,7 +110,7 @@ class ToastComponent {
             ])
         ] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ToastComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ToastComponent, decorators: [{
             type: Component,
             args: [{ selector: 'toast', standalone: true, imports: [CommonModule, TranslatePipe], animations: [
                         trigger('toastAnimation', [
@@ -100,9 +124,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImpo
                         ])
                     ], host: {
                         '[@toastAnimation]': 'true',
-                        '[class]': '"bg-white sd-toast"'
-                    }, template: "<div class=\"sd-toast__bar\" [class]=\"'bg-' + data.type\"></div>\n\n<div class=\"sd-toast__icon\" [class]=\"'text-' + data.type\">\n  @switch (data.type) {\n    @case ('success') {\n      <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"/></svg>\n    }\n    @case ('info') {\n      <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z\"/></svg>\n    }\n    @case ('warning') {\n      <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z\"/></svg>\n    }\n    @case ('error') {\n      <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\"/></svg>\n    }\n  }\n</div>\n\n<div class=\"sd-toast__content\">\n  <div class=\"sd-toast__header\">\n    <strong class=\"sd-toast__title\">{{ data.title || ('core.notify.type.' + data.type | translate) }}</strong>\n    <button class=\"sd-toast__close\" (click)=\"close()\">\u2715</button>\n  </div>\n\n  <div class=\"sd-toast__body\">\n    @if (!isMultiMessage) {\n      <div [innerHTML]=\"data.message\"></div>\n    } \n    @else {\n      <ul class=\"msg-list\">\n        @for (msg of displayMessages; track msg) {\n          <li [innerHTML]=\"'- ' + msg\"></li>\n        }\n      </ul>\n\n      @if (hasMore) {\n        <button type=\"button\" \n                class=\"toggle-more btn-link\" \n                [class]=\"'text-' + data.type\" \n                (click)=\"toggleExpand()\">\n          {{ isExpanded() ? ('core.notify.show-less' | translate) : ('core.notify.show-more' | translate: { count: restCount }) }}\n        </button>\n      }\n    }\n  </div>\n\n  @if (data.actionLabel) {\n    <div class=\"sd-toast__actions\">\n      <button class=\"btn-action\" \n              [class]=\"'bg-' + data.type + '-light text-' + data.type\"\n              (click)=\"onActionClick()\">\n        {{ data.actionLabel }}\n      </button>\n    </div>\n  }\n</div>", styles: ["@charset \"UTF-8\";:host{display:flex;width:350px;border-radius:8px;box-shadow:0 4px 12px #00000026;margin-bottom:12px;overflow:hidden;position:relative;font-family:Roboto,sans-serif;pointer-events:auto}.sd-toast__bar{width:6px;flex-shrink:0}.sd-toast__icon{padding:12px 0 0 12px;flex-shrink:0}.sd-toast__icon svg{width:24px;height:24px}.sd-toast__content{flex-grow:1;padding:12px;display:flex;flex-direction:column}.sd-toast__header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:4px}.sd-toast__title{font-size:16px;font-weight:600}.sd-toast__close{background:none;border:none;font-size:16px;cursor:pointer;line-height:1;padding:0;opacity:.5;transition:opacity .2s}.sd-toast__close:hover{opacity:1}.sd-toast__body{font-size:14px;line-height:1.4;word-break:break-word}.sd-toast__actions{display:flex;justify-content:flex-end;margin-top:8px}.msg-list{padding-left:0;list-style:none;margin:0}.toggle-more{background:none;border:none;padding:0;font:inherit;cursor:pointer;font-size:13px;margin-top:4px;font-weight:500;text-align:left}.toggle-more:hover{text-decoration:underline}.toggle-more:focus-visible{outline:2px solid currentColor;outline-offset:2px}.btn-action{border:none;padding:6px 12px;border-radius:4px;font-weight:600;cursor:pointer;font-size:13px;transition:filter .2s}.btn-action:hover{filter:brightness(.95)}\n"] }]
-        }], ctorParameters: () => [{ type: SdNotifyService }], propDecorators: { data: [{
+                        '[class]': '"bg-white sd-toast"',
+                        // E2E hooks đọc bởi sd-autoid-inspector: autoid theo loại + state type/title/message.
+                        '[attr.data-autoid]': 'autoId',
+                        '[attr.data-type]': 'data.type',
+                        '[attr.data-title]': 'data.title ?? null',
+                        '[attr.data-message]': 'dataMessage'
+                    }, template: "<div class=\"sd-toast__bar\" [class]=\"'bg-' + data.type\"></div>\n\n<div class=\"sd-toast__icon\" [class]=\"'text-' + data.type\">\n  @switch (data.type) {\n    @case ('success') {\n      <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"/></svg>\n    }\n    @case ('info') {\n      <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z\"/></svg>\n    }\n    @case ('warning') {\n      <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z\"/></svg>\n    }\n    @case ('error') {\n      <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\"/></svg>\n    }\n  }\n</div>\n\n<div class=\"sd-toast__content\">\n  <div class=\"sd-toast__header\">\n    <strong class=\"sd-toast__title\">{{ data.title || ('core.notify.type.' + data.type | translate) }}</strong>\n    <button class=\"sd-toast__close\" (click)=\"close()\">\u2715</button>\n  </div>\n\n  <div class=\"sd-toast__body\">\n    @if (!isMultiMessage) {\n      <!-- why: m\u1EB7c \u0111\u1ECBnh render TEXT (auto-escape) \u2014 an to\u00E0n. Ch\u1EC9 render HTML\n           (\u0111\u00E3 sanitize) khi data.html=true. -->\n      @if (data.html) {\n        <div [innerHTML]=\"sanitizeHtml(singleMessage)\"></div>\n      } @else {\n        <div>{{ singleMessage }}</div>\n      }\n    }\n    @else {\n      <ul class=\"msg-list\">\n        @for (msg of displayMessages; track msg) {\n          @if (data.html) {\n            <li [innerHTML]=\"sanitizeHtml('- ' + msg)\"></li>\n          } @else {\n            <li>{{ '- ' + msg }}</li>\n          }\n        }\n      </ul>\n\n      @if (hasMore) {\n        <button type=\"button\" \n                class=\"toggle-more btn-link\" \n                [class]=\"'text-' + data.type\" \n                (click)=\"toggleExpand()\">\n          {{ isExpanded() ? ('core.notify.show-less' | translate) : ('core.notify.show-more' | translate: { count: restCount }) }}\n        </button>\n      }\n    }\n  </div>\n\n  @if (data.actionLabel) {\n    <div class=\"sd-toast__actions\">\n      <button class=\"btn-action\" \n              [class]=\"'bg-' + data.type + '-light text-' + data.type\"\n              (click)=\"onActionClick()\">\n        {{ data.actionLabel }}\n      </button>\n    </div>\n  }\n</div>", styles: ["@charset \"UTF-8\";:host{display:flex;width:350px;border-radius:8px;box-shadow:0 4px 12px #00000026;margin-bottom:12px;overflow:hidden;position:relative;font-family:Roboto,sans-serif;pointer-events:auto}.sd-toast__bar{width:6px;flex-shrink:0}.sd-toast__icon{padding:12px 0 0 12px;flex-shrink:0}.sd-toast__icon svg{width:24px;height:24px}.sd-toast__content{flex-grow:1;padding:12px;display:flex;flex-direction:column}.sd-toast__header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:4px}.sd-toast__title{font-size:16px;font-weight:600}.sd-toast__close{background:none;border:none;font-size:16px;cursor:pointer;line-height:1;padding:0;opacity:.5;transition:opacity .2s}.sd-toast__close:hover{opacity:1}.sd-toast__body{font-size:14px;line-height:1.4;word-break:break-word}.sd-toast__actions{display:flex;justify-content:flex-end;margin-top:8px}.msg-list{padding-left:0;list-style:none;margin:0}.toggle-more{background:none;border:none;padding:0;font:inherit;cursor:pointer;font-size:13px;margin-top:4px;font-weight:500;text-align:left}.toggle-more:hover{text-decoration:underline}.toggle-more:focus-visible{outline:2px solid currentColor;outline-offset:2px}.btn-action{border:none;padding:6px 12px;border-radius:4px;font-weight:600;cursor:pointer;font-size:13px;transition:filter .2s}.btn-action:hover{filter:brightness(.95)}\n"] }]
+        }], ctorParameters: () => [{ type: SdNotifyService }, { type: i2.DomSanitizer }], propDecorators: { data: [{
                 type: Input,
                 args: [{ required: true }]
             }], pauseTimer: [{
@@ -115,8 +144,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImpo
 class ToastContainerComponent {
     toasts = signal([], ...(ngDevMode ? [{ debugName: "toasts" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ToastContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: ToastContainerComponent, isStandalone: true, selector: "toast-container", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ToastContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: ToastContainerComponent, isStandalone: true, selector: "toast-container", ngImport: i0, template: `
     <div class="toast-container">
       @for (toast of toasts(); track toast.id) {
         <toast [data]="toast"> </toast>
@@ -124,7 +153,7 @@ class ToastContainerComponent {
     </div>
   `, isInline: true, styles: [".toast-container{position:fixed;top:20px;right:20px;z-index:9999;display:flex;flex-direction:column;pointer-events:none}sd-toast{pointer-events:auto}\n"], dependencies: [{ kind: "component", type: ToastComponent, selector: "toast", inputs: ["data"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ToastContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ToastContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'toast-container', standalone: true, imports: [ToastComponent], template: `
     <div class="toast-container">
@@ -195,7 +224,8 @@ class SdNotifyService {
             title: option?.title,
             duration: option?.duration ?? this.#DEFAULT_SUCCESS_DURATION,
             actionLabel: option?.actionLabel,
-            onAction: option?.onAction
+            onAction: option?.onAction,
+            html: option?.html
         };
         this.toasts.update((current) => {
             const updated = [newToast, ...current];
@@ -233,7 +263,8 @@ class SdNotifyService {
             title: finalTitle,
             duration: option?.duration ?? this.#DEFAULT_BUFFERED_DURATION,
             actionLabel: option?.actionLabel,
-            onAction: option?.onAction
+            onAction: option?.onAction,
+            html: option?.html
         };
         this.toasts.update((current) => {
             const updated = [newToast, ...current];
@@ -247,10 +278,10 @@ class SdNotifyService {
         });
         this.#timers = {};
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdNotifyService, deps: [{ token: i0.ApplicationRef }, { token: i0.EnvironmentInjector }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdNotifyService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SdNotifyService, deps: [{ token: i0.ApplicationRef }, { token: i0.EnvironmentInjector }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SdNotifyService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdNotifyService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SdNotifyService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',

package/fesm2022/sdcorejs-angular-services-notify.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sdcorejs-angular-services-notify.mjs","sources":["../../../projects/sdcorejs-angular/services/notify/src/components/toast/toast.component.ts","../../../projects/sdcorejs-angular/services/notify/src/components/toast/toast.component.html","../../../projects/sdcorejs-angular/services/notify/src/components/toast-container.component.ts","../../../projects/sdcorejs-angular/services/notify/src/notify.service.ts","../../../projects/sdcorejs-angular/services/notify/sdcorejs-angular-services-notify.ts"],"sourcesContent":["import { Component, Input, signal, HostListener, OnInit, OnDestroy } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { animate, style, transition, trigger } from '@angular/animations';\nimport { TranslatePipe } from '@sdcorejs/angular/i18n';\nimport { ToastData } from '../../notify.model';\nimport { SdNotifyService } from '../../notify.service';\n\n@Component({\n selector: 'toast',\n standalone: true,\n imports: [CommonModule, TranslatePipe],\n templateUrl: './toast.component.html',\n styleUrls: ['./toast.component.scss'],\n animations: [\n trigger('toastAnimation', [\n transition(':enter', [\n style({ transform: 'translateX(100%)', opacity: 0 }),\n animate('300ms ease-out', style({ transform: 'translateX(0)', opacity: 1 }))\n ]),\n transition(':leave', [\n animate('200ms ease-in', style({ transform: 'translateX(100%)', opacity: 0 }))\n ])\n ])\n ],\n host: {\n '[@toastAnimation]': 'true',\n '[class]': '\"bg-white sd-toast\"'\n }\n})\nexport class ToastComponent implements OnInit, OnDestroy {\n @Input({ required: true }) data!: ToastData;\n \n isExpanded = signal(false);\n readonly MAX_SHOW = 2;\n\n // --- Logic Timer ---\n private timer: any;\n private start!: number;\n private remaining!: number;\n\n constructor(private notifyService: SdNotifyService) {}\n\n ngOnInit() {\n // Khởi tạo thời gian còn lại bằng duration ban đầu\n this.remaining = this.data.duration;\n // Bắt đầu đếm ngược ngay khi hiện ra\n this.resumeTimer();\n }\n\n ngOnDestroy() {\n clearTimeout(this.timer);\n }\n\n // --- Logic Pause/Resume ---\n\n @HostListener('mouseenter')\n pauseTimer() {\n if (this.timer) {\n // Xóa timer hiện tại\n clearTimeout(this.timer);\n this.timer = null;\n // Tính toán thời gian đã trôi qua để trừ đi\n this.remaining -= Date.now() - this.start;\n }\n }\n\n @HostListener('mouseleave')\n resumeTimer() {\n // Chỉ chạy tiếp nếu còn thời gian và timer chưa chạy\n if (this.remaining > 0 && !this.timer) {\n this.start = Date.now();\n this.timer = setTimeout(() => {\n this.close();\n }, this.remaining);\n }\n }\n\n // --- Logic cũ ---\n\n close() {\n this.notifyService.remove(this.data.id);\n }\n\n onActionClick() {\n this.data.onAction?.();\n }\n\n toggleExpand() {\n this.isExpanded.update(v => !v);\n }\n\n get isMultiMessage(): boolean {\n return Array.isArray(this.data.message);\n }\n\n get messages(): string[] {\n return this.data.message as string[];\n }\n\n get displayMessages(): string[] {\n const msgs = this.messages;\n if (this.isExpanded()) return msgs;\n return msgs.slice(0, this.MAX_SHOW);\n }\n\n get restCount(): number {\n return this.messages.length - this.MAX_SHOW;\n }\n\n get hasMore(): boolean {\n return this.isMultiMessage && this.messages.length > this.MAX_SHOW;\n }\n}","<div class=\"sd-toast__bar\" [class]=\"'bg-' + data.type\"></div>\n\n<div class=\"sd-toast__icon\" [class]=\"'text-' + data.type\">\n @switch (data.type) {\n @case ('success') {\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"/></svg>\n }\n @case ('info') {\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z\"/></svg>\n }\n @case ('warning') {\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z\"/></svg>\n }\n @case ('error') {\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\"/></svg>\n }\n }\n</div>\n\n<div class=\"sd-toast__content\">\n <div class=\"sd-toast__header\">\n <strong class=\"sd-toast__title\">{{ data.title \|\| ('core.notify.type.' + data.type \| translate) }}</strong>\n <button class=\"sd-toast__close\" (click)=\"close()\">✕</button>\n </div>\n\n <div class=\"sd-toast__body\">\n @if (!isMultiMessage) {\n <div [innerHTML]=\"data.message\"></div>\n } \n @else {\n <ul class=\"msg-list\">\n @for (msg of displayMessages; track msg) {\n <li [innerHTML]=\"'- ' + msg\"></li>\n }\n </ul>\n\n @if (hasMore) {\n <button type=\"button\" \n class=\"toggle-more btn-link\" \n [class]=\"'text-' + data.type\" \n (click)=\"toggleExpand()\">\n {{ isExpanded() ? ('core.notify.show-less' \| translate) : ('core.notify.show-more' \| translate: { count: restCount }) }}\n </button>\n }\n }\n </div>\n\n @if (data.actionLabel) {\n <div class=\"sd-toast__actions\">\n <button class=\"btn-action\" \n [class]=\"'bg-' + data.type + '-light text-' + data.type\"\n (click)=\"onActionClick()\">\n {{ data.actionLabel }}\n </button>\n </div>\n }\n</div>","import { Component, signal, WritableSignal } from '@angular/core';\nimport { ToastData } from '../notify.model';\nimport { ToastComponent } from './toast/toast.component';\n\n@Component({\n selector: 'toast-container',\n standalone: true,\n imports: [ToastComponent],\n template: `\n <div class=\"toast-container\">\n @for (toast of toasts(); track toast.id) {\n <toast [data]=\"toast\"> </toast>\n }\n </div>\n `,\n styles: [\n `\n .toast-container {\n position: fixed;\n top: 20px;\n right: 20px;\n z-index: 9999;\n display: flex;\n flex-direction: column;\n pointer-events: none; /* Cho phép click xuyên qua vùng trống /\n }\n sd-toast {\n pointer-events: auto; / Bật lại click cho toast /\n }\n `,\n ],\n})\nexport class ToastContainerComponent {\n toasts: WritableSignal<ToastData[]> = signal([]);\n}\n","import { DOCUMENT } from '@angular/common';\nimport {\n ApplicationRef,\n createComponent,\n EnvironmentInjector,\n Inject,\n Injectable,\n signal\n} from '@angular/core';\nimport { Utilities } from '@sdcorejs/utils/fns';\nimport { ToastContainerComponent } from './components/toast-container.component';\nimport { NotifyOption, ToastData, ToastType } from './notify.model';\n\n@Injectable({\n providedIn: 'root',\n})\nexport class SdNotifyService {\n readonly toasts = signal<ToastData[]>([]);\n\n // Constants\n readonly #DEBOUNCE_TIME = 500;\n readonly #DEFAULT_SUCCESS_DURATION = 3000;\n readonly #DEFAULT_BUFFERED_DURATION = 5000;\n readonly #MAX_TOASTS = 5;\n\n // State\n #buffer: Record<string, string[]> = {};\n #timers: Record<string, ReturnType<typeof setTimeout> \| null> = {};\n\n constructor(\n private appRef: ApplicationRef,\n private injector: EnvironmentInjector,\n @Inject(DOCUMENT) private document: Document\n ) {\n this.#initContainer();\n }\n\n #initContainer() {\n const componentRef = createComponent(ToastContainerComponent, {\n environmentInjector: this.injector,\n });\n componentRef.instance.toasts = this.toasts;\n this.appRef.attachView(componentRef.hostView);\n const domElem = (componentRef.hostView as any).rootNodes[0] as HTMLElement;\n this.document.body.appendChild(domElem);\n }\n\n // Public API\n success(message: string, option?: NotifyOption) {\n this.#addImmediate('success', message, option);\n }\n\n info(message: string, option?: NotifyOption) {\n this.#addImmediate('info', message, option);\n }\n\n warning(message: string \| string[], option?: NotifyOption) {\n this.#addToBuffer('warning', message, option);\n }\n\n error(message: string \| string[], option?: NotifyOption) {\n this.#addToBuffer('error', message, option);\n }\n\n remove(id: string) {\n this.toasts.update((current) => current.filter((t) => t.id !== id));\n }\n\n clearAll() {\n this.toasts.set([]);\n this.#clearAllTimers();\n }\n\n clearByType(type: ToastType) {\n this.toasts.update((current) => current.filter((t) => t.type !== type));\n }\n\n // Private helpers\n #addImmediate(type: ToastType, message: string, option?: NotifyOption) {\n const newToast: ToastData = {\n id: Utilities.generateUuid(),\n type,\n message,\n title: option?.title,\n duration: option?.duration ?? this.#DEFAULT_SUCCESS_DURATION,\n actionLabel: option?.actionLabel,\n onAction: option?.onAction\n };\n\n this.toasts.update((current) => {\n const updated = [newToast, ...current];\n return updated.slice(0, this.#MAX_TOASTS);\n });\n }\n\n #addToBuffer(type: ToastType, message: string \| string[], option?: NotifyOption) {\n if (!this.#buffer[type]) {\n this.#buffer[type] = [];\n }\n \n const msgs = Array.isArray(message) ? message : [message];\n this.#buffer[type].push(...msgs);\n\n // Clear existing timer and set new one\n if (this.#timers[type]) {\n clearTimeout(this.#timers[type]!);\n }\n\n this.#timers[type] = setTimeout(() => {\n this.#flushBuffer(type, option);\n }, this.#DEBOUNCE_TIME);\n }\n\n #flushBuffer(type: ToastType, option?: NotifyOption) {\n const messages = [...new Set(this.#buffer[type])];\n \n // Cleanup\n this.#buffer[type] = [];\n this.#timers[type] = null;\n\n if (messages.length === 0) return;\n\n const typeLabel = type === 'error' ? 'Error' : 'Warning';\n const title = option?.title ?? typeLabel;\n const finalTitle = messages.length > 1 ? `${title} (${messages.length})` : title;\n\n const newToast: ToastData = {\n id: Utilities.generateUuid(),\n type,\n message: messages.length === 1 ? messages[0] : messages, \n title: finalTitle,\n duration: option?.duration ?? this.#DEFAULT_BUFFERED_DURATION,\n actionLabel: option?.actionLabel,\n onAction: option?.onAction\n };\n\n this.toasts.update((current) => {\n const updated = [newToast, ...current];\n return updated.slice(0, this.#MAX_TOASTS);\n });\n }\n\n #clearAllTimers() {\n Object.values(this.#timers).forEach(timer => {\n if (timer) clearTimeout(timer);\n });\n this.#timers = {};\n }\n}","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":["i1.SdNotifyService"],"mappings":"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"}
1	+ {"version":3,"file":"sdcorejs-angular-services-notify.mjs","sources":["../../../projects/sdcorejs-angular/services/notify/src/components/toast/toast.component.ts","../../../projects/sdcorejs-angular/services/notify/src/components/toast/toast.component.html","../../../projects/sdcorejs-angular/services/notify/src/components/toast-container.component.ts","../../../projects/sdcorejs-angular/services/notify/src/notify.service.ts","../../../projects/sdcorejs-angular/services/notify/sdcorejs-angular-services-notify.ts"],"sourcesContent":["import { Component, Input, signal, HostListener, OnInit, OnDestroy, SecurityContext } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { DomSanitizer } from '@angular/platform-browser';\nimport { animate, style, transition, trigger } from '@angular/animations';\nimport { TranslatePipe } from '@sdcorejs/angular/i18n';\nimport { ToastData } from '../../notify.model';\nimport { SdNotifyService } from '../../notify.service';\n\n@Component({\n selector: 'toast',\n standalone: true,\n imports: [CommonModule, TranslatePipe],\n templateUrl: './toast.component.html',\n styleUrls: ['./toast.component.scss'],\n animations: [\n trigger('toastAnimation', [\n transition(':enter', [\n style({ transform: 'translateX(100%)', opacity: 0 }),\n animate('300ms ease-out', style({ transform: 'translateX(0)', opacity: 1 }))\n ]),\n transition(':leave', [\n animate('200ms ease-in', style({ transform: 'translateX(100%)', opacity: 0 }))\n ])\n ])\n ],\n host: {\n '[@toastAnimation]': 'true',\n '[class]': '\"bg-white sd-toast\"',\n // E2E hooks đọc bởi sd-autoid-inspector: autoid theo loại + state type/title/message.\n '[attr.data-autoid]': 'autoId',\n '[attr.data-type]': 'data.type',\n '[attr.data-title]': 'data.title ?? null',\n '[attr.data-message]': 'dataMessage'\n }\n})\nexport class ToastComponent implements OnInit, OnDestroy {\n @Input({ required: true }) data!: ToastData;\n \n isExpanded = signal(false);\n readonly MAX_SHOW = 2;\n\n // --- Logic Timer ---\n private timer: any;\n private start!: number;\n private remaining!: number;\n\n constructor(\n private notifyService: SdNotifyService,\n private sanitizer: DomSanitizer\n ) {}\n\n /*\n Sanitize HTML tường minh trước khi render qua `[innerHTML]` — strip\n * `<script>`, event handler (`on`), `javascript:` URL. Chỉ chạy ở nhánh\n `data.html === true`; nhánh mặc định render text (auto-escape) nên không\n * có sink này. // why: phơi rõ việc sanitize cho review/scanner bảo mật.\n /\n sanitizeHtml(value: string): string {\n return this.sanitizer.sanitize(SecurityContext.HTML, value) ?? '';\n }\n\n /* Message ở dạng chuỗi đơn (chỉ dùng khi !isMultiMessage). /\n get singleMessage(): string {\n return this.data.message as string;\n }\n\n ngOnInit() {\n // Khởi tạo thời gian còn lại bằng duration ban đầu\n this.remaining = this.data.duration;\n // Bắt đầu đếm ngược ngay khi hiện ra\n this.resumeTimer();\n }\n\n ngOnDestroy() {\n clearTimeout(this.timer);\n }\n\n // --- Logic Pause/Resume ---\n\n @HostListener('mouseenter')\n pauseTimer() {\n if (this.timer) {\n // Xóa timer hiện tại\n clearTimeout(this.timer);\n this.timer = null;\n // Tính toán thời gian đã trôi qua để trừ đi\n this.remaining -= Date.now() - this.start;\n }\n }\n\n @HostListener('mouseleave')\n resumeTimer() {\n // Chỉ chạy tiếp nếu còn thời gian và timer chưa chạy\n if (this.remaining > 0 && !this.timer) {\n this.start = Date.now();\n this.timer = setTimeout(() => {\n this.close();\n }, this.remaining);\n }\n }\n\n // --- Logic cũ ---\n\n close() {\n this.notifyService.remove(this.data.id);\n }\n\n onActionClick() {\n this.data.onAction?.();\n }\n\n toggleExpand() {\n this.isExpanded.update(v => !v);\n }\n\n get isMultiMessage(): boolean {\n return Array.isArray(this.data.message);\n }\n\n get messages(): string[] {\n return this.data.message as string[];\n }\n\n get displayMessages(): string[] {\n const msgs = this.messages;\n if (this.isExpanded()) return msgs;\n return msgs.slice(0, this.MAX_SHOW);\n }\n\n get restCount(): number {\n return this.messages.length - this.MAX_SHOW;\n }\n\n get hasMore(): boolean {\n return this.isMultiMessage && this.messages.length > this.MAX_SHOW;\n }\n\n /* autoid theo loại toast để E2E chọn trực tiếp, vd `services-notify-toast-success`. /\n get autoId(): string {\n return `services-notify-toast-${this.data.type}`;\n }\n\n /* Gộp message (mảng nối ' \| ') để phơi ra data-message cho E2E. /\n get dataMessage(): string {\n return Array.isArray(this.data.message) ? this.data.message.join(' \| ') : this.data.message;\n }\n}","<div class=\"sd-toast__bar\" [class]=\"'bg-' + data.type\"></div>\n\n<div class=\"sd-toast__icon\" [class]=\"'text-' + data.type\">\n @switch (data.type) {\n @case ('success') {\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"/></svg>\n }\n @case ('info') {\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z\"/></svg>\n }\n @case ('warning') {\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z\"/></svg>\n }\n @case ('error') {\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\"/></svg>\n }\n }\n</div>\n\n<div class=\"sd-toast__content\">\n <div class=\"sd-toast__header\">\n <strong class=\"sd-toast__title\">{{ data.title \|\| ('core.notify.type.' + data.type \| translate) }}</strong>\n <button class=\"sd-toast__close\" (click)=\"close()\">✕</button>\n </div>\n\n <div class=\"sd-toast__body\">\n @if (!isMultiMessage) {\n <!-- why: mặc định render TEXT (auto-escape) — an toàn. Chỉ render HTML\n (đã sanitize) khi data.html=true. -->\n @if (data.html) {\n <div [innerHTML]=\"sanitizeHtml(singleMessage)\"></div>\n } @else {\n <div>{{ singleMessage }}</div>\n }\n }\n @else {\n <ul class=\"msg-list\">\n @for (msg of displayMessages; track msg) {\n @if (data.html) {\n <li [innerHTML]=\"sanitizeHtml('- ' + msg)\"></li>\n } @else {\n <li>{{ '- ' + msg }}</li>\n }\n }\n </ul>\n\n @if (hasMore) {\n <button type=\"button\" \n class=\"toggle-more btn-link\" \n [class]=\"'text-' + data.type\" \n (click)=\"toggleExpand()\">\n {{ isExpanded() ? ('core.notify.show-less' \| translate) : ('core.notify.show-more' \| translate: { count: restCount }) }}\n </button>\n }\n }\n </div>\n\n @if (data.actionLabel) {\n <div class=\"sd-toast__actions\">\n <button class=\"btn-action\" \n [class]=\"'bg-' + data.type + '-light text-' + data.type\"\n (click)=\"onActionClick()\">\n {{ data.actionLabel }}\n </button>\n </div>\n }\n</div>","import { Component, signal, WritableSignal } from '@angular/core';\nimport { ToastData } from '../notify.model';\nimport { ToastComponent } from './toast/toast.component';\n\n@Component({\n selector: 'toast-container',\n standalone: true,\n imports: [ToastComponent],\n template: `\n <div class=\"toast-container\">\n @for (toast of toasts(); track toast.id) {\n <toast [data]=\"toast\"> </toast>\n }\n </div>\n `,\n styles: [\n `\n .toast-container {\n position: fixed;\n top: 20px;\n right: 20px;\n z-index: 9999;\n display: flex;\n flex-direction: column;\n pointer-events: none; / Cho phép click xuyên qua vùng trống /\n }\n sd-toast {\n pointer-events: auto; / Bật lại click cho toast /\n }\n `,\n ],\n})\nexport class ToastContainerComponent {\n toasts: WritableSignal<ToastData[]> = signal([]);\n}\n","import { DOCUMENT } from '@angular/common';\nimport {\n ApplicationRef,\n createComponent,\n EnvironmentInjector,\n Inject,\n Injectable,\n signal\n} from '@angular/core';\nimport { Utilities } from '@sdcorejs/utils/fns';\nimport { ToastContainerComponent } from './components/toast-container.component';\nimport { NotifyOption, ToastData, ToastType } from './notify.model';\n\n@Injectable({\n providedIn: 'root',\n})\nexport class SdNotifyService {\n readonly toasts = signal<ToastData[]>([]);\n\n // Constants\n readonly #DEBOUNCE_TIME = 500;\n readonly #DEFAULT_SUCCESS_DURATION = 3000;\n readonly #DEFAULT_BUFFERED_DURATION = 5000;\n readonly #MAX_TOASTS = 5;\n\n // State\n #buffer: Record<string, string[]> = {};\n #timers: Record<string, ReturnType<typeof setTimeout> \| null> = {};\n\n constructor(\n private appRef: ApplicationRef,\n private injector: EnvironmentInjector,\n @Inject(DOCUMENT) private document: Document\n ) {\n this.#initContainer();\n }\n\n #initContainer() {\n const componentRef = createComponent(ToastContainerComponent, {\n environmentInjector: this.injector,\n });\n componentRef.instance.toasts = this.toasts;\n this.appRef.attachView(componentRef.hostView);\n const domElem = (componentRef.hostView as any).rootNodes[0] as HTMLElement;\n this.document.body.appendChild(domElem);\n }\n\n // Public API\n success(message: string, option?: NotifyOption) {\n this.#addImmediate('success', message, option);\n }\n\n info(message: string, option?: NotifyOption) {\n this.#addImmediate('info', message, option);\n }\n\n warning(message: string \| string[], option?: NotifyOption) {\n this.#addToBuffer('warning', message, option);\n }\n\n error(message: string \| string[], option?: NotifyOption) {\n this.#addToBuffer('error', message, option);\n }\n\n remove(id: string) {\n this.toasts.update((current) => current.filter((t) => t.id !== id));\n }\n\n clearAll() {\n this.toasts.set([]);\n this.#clearAllTimers();\n }\n\n clearByType(type: ToastType) {\n this.toasts.update((current) => current.filter((t) => t.type !== type));\n }\n\n // Private helpers\n #addImmediate(type: ToastType, message: string, option?: NotifyOption) {\n const newToast: ToastData = {\n id: Utilities.generateUuid(),\n type,\n message,\n title: option?.title,\n duration: option?.duration ?? this.#DEFAULT_SUCCESS_DURATION,\n actionLabel: option?.actionLabel,\n onAction: option?.onAction,\n html: option?.html\n };\n\n this.toasts.update((current) => {\n const updated = [newToast, ...current];\n return updated.slice(0, this.#MAX_TOASTS);\n });\n }\n\n #addToBuffer(type: ToastType, message: string \| string[], option?: NotifyOption) {\n if (!this.#buffer[type]) {\n this.#buffer[type] = [];\n }\n \n const msgs = Array.isArray(message) ? message : [message];\n this.#buffer[type].push(...msgs);\n\n // Clear existing timer and set new one\n if (this.#timers[type]) {\n clearTimeout(this.#timers[type]!);\n }\n\n this.#timers[type] = setTimeout(() => {\n this.#flushBuffer(type, option);\n }, this.#DEBOUNCE_TIME);\n }\n\n #flushBuffer(type: ToastType, option?: NotifyOption) {\n const messages = [...new Set(this.#buffer[type])];\n \n // Cleanup\n this.#buffer[type] = [];\n this.#timers[type] = null;\n\n if (messages.length === 0) return;\n\n const typeLabel = type === 'error' ? 'Error' : 'Warning';\n const title = option?.title ?? typeLabel;\n const finalTitle = messages.length > 1 ? `${title} (${messages.length})` : title;\n\n const newToast: ToastData = {\n id: Utilities.generateUuid(),\n type,\n message: messages.length === 1 ? messages[0] : messages, \n title: finalTitle,\n duration: option?.duration ?? this.#DEFAULT_BUFFERED_DURATION,\n actionLabel: option?.actionLabel,\n onAction: option?.onAction,\n html: option?.html\n };\n\n this.toasts.update((current) => {\n const updated = [newToast, ...current];\n return updated.slice(0, this.#MAX_TOASTS);\n });\n }\n\n #clearAllTimers() {\n Object.values(this.#timers).forEach(timer => {\n if (timer) clearTimeout(timer);\n });\n this.#timers = {};\n }\n}","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":["i1.SdNotifyService"],"mappings":"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"}

package/fesm2022/sdcorejs-angular-services-storage.mjs CHANGED Viewed

@@ -151,10 +151,10 @@ class SdStorageService {
             return val;
         return JSON.parse(JSON.stringify(val));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdStorageService, deps: [{ token: SD_STORAGE_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdStorageService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SdStorageService, deps: [{ token: SD_STORAGE_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SdStorageService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdStorageService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SdStorageService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',

package/forms/autocomplete/index.d.ts CHANGED Viewed

@@ -5,7 +5,7 @@ import { MatAutocompleteTrigger } from '@angular/material/autocomplete';
 import { ErrorStateMatcher } from '@angular/material/core';
 import { MatFormFieldAppearance } from '@angular/material/form-field';
 import { SdItemDefDefDirective, SdViewDefDirective } from '@sdcorejs/angular/forms/directives';
-import { SdSearch, SdCustomValidator, SdSelectionData, SdFormControl } from '@sdcorejs/angular/forms/models';
+import { SdSearch, SdViewed, SdViewedInput, SdCustomValidator, SdSelectionData, SdFormControl } from '@sdcorejs/angular/forms/models';
 import { Size } from '@sdcorejs/utils/models';
 declare class SdAutocompleteErrotStateMatcher implements ErrorStateMatcher {
@@ -50,7 +50,18 @@ declare class SdAutocomplete<T = any> implements OnInit, OnDestroy, AfterViewIni
     addable: _angular_core.InputSignalWithTransform<boolean, unknown>;
     required: _angular_core.InputSignalWithTransform<boolean, unknown>;
     disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    viewed: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Display mode: `false` edit · `true` static view · `'inline'` view + click-to-edit (autocomplete panel). */
+    viewed: _angular_core.InputSignalWithTransform<SdViewed, SdViewedInput>;
+    /** In `viewed='inline'`, show a hover clear-× on the text face. Set `false` when the host owns removal (chips). */
+    clearable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** `true` when `viewed === 'inline'`. */
+    readonly isInline: _angular_core.Signal<boolean>;
+    /** `true` when `viewed === true` (static view, no editor). */
+    readonly isViewed: _angular_core.Signal<boolean>;
+    /** Open the autocomplete panel from the inline text face. No-op unless `viewed='inline'`. */
+    enterInlineEdit: () => void;
+    /** View display template: `sdViewDef` overrides the projected `#sdValue` (unified). */
+    readonly viewTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
     validator: _angular_core.InputSignal<SdCustomValidator | undefined>;
     inlineError: _angular_core.InputSignal<string | undefined>;
     /**
@@ -85,11 +96,13 @@ declare class SdAutocomplete<T = any> implements OnInit, OnDestroy, AfterViewIni
     onClick: () => void;
     blur: () => void;
     focus: () => void;
+    /** Open the autocomplete panel programmatically (anchors to the field input). Used by inline mode. */
+    open: () => void;
     clear: ($event?: any) => void;
     onAdd: ($event: Event) => void;
     reValidate: () => void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdAutocomplete<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdAutocomplete<any>, "sd-autocomplete", never, { "autoIdInput": { "alias": "autoId"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "form": { "alias": "form"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "valueField": { "alias": "valueField"; "required": false; "isSignal": true; }; "displayField": { "alias": "displayField"; "required": false; "isSignal": true; }; "disabledField": { "alias": "disabledField"; "required": false; "isSignal": true; }; "limit": { "alias": "limit"; "required": false; "isSignal": true; }; "cacheChecksum": { "alias": "cacheChecksum"; "required": false; "isSignal": true; }; "hyperlink": { "alias": "hyperlink"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "hideInlineError": { "alias": "hideInlineError"; "required": false; "isSignal": true; }; "addable": { "alias": "addable"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "viewed": { "alias": "viewed"; "required": false; "isSignal": true; }; "validator": { "alias": "validator"; "required": false; "isSignal": true; }; "inlineError": { "alias": "inlineError"; "required": false; "isSignal": true; }; "appearanceInput": { "alias": "appearance"; "required": false; "isSignal": true; }; "valueModel": { "alias": "model"; "required": false; "isSignal": true; }; }, { "valueModel": "modelChange"; "sdChange": "sdChange"; "sdSelection": "sdSelection"; "sdAdd": "sdAdd"; }, ["sdLabelTemplate", "sdValueTemplate", "itemDef", "sdViewDef"], ["[sdLabel]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdAutocomplete<any>, "sd-autocomplete", never, { "autoIdInput": { "alias": "autoId"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "form": { "alias": "form"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "valueField": { "alias": "valueField"; "required": false; "isSignal": true; }; "displayField": { "alias": "displayField"; "required": false; "isSignal": true; }; "disabledField": { "alias": "disabledField"; "required": false; "isSignal": true; }; "limit": { "alias": "limit"; "required": false; "isSignal": true; }; "cacheChecksum": { "alias": "cacheChecksum"; "required": false; "isSignal": true; }; "hyperlink": { "alias": "hyperlink"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "hideInlineError": { "alias": "hideInlineError"; "required": false; "isSignal": true; }; "addable": { "alias": "addable"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "viewed": { "alias": "viewed"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "validator": { "alias": "validator"; "required": false; "isSignal": true; }; "inlineError": { "alias": "inlineError"; "required": false; "isSignal": true; }; "appearanceInput": { "alias": "appearance"; "required": false; "isSignal": true; }; "valueModel": { "alias": "model"; "required": false; "isSignal": true; }; }, { "valueModel": "modelChange"; "sdChange": "sdChange"; "sdSelection": "sdSelection"; "sdAdd": "sdAdd"; }, ["sdLabelTemplate", "sdValueTemplate", "itemDef", "sdViewDef"], ["[sdLabel]"], true, never>;
 }
 export { SdAutocomplete };

package/forms/checkbox/index.d.ts CHANGED Viewed

@@ -1,6 +1,7 @@
 import * as _angular_core from '@angular/core';
 import { OnDestroy, AfterViewInit } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
+import { SdViewed, SdViewedInput } from '@sdcorejs/angular/forms/models';
 import { Color } from '@sdcorejs/utils/models';
 declare class SdCheckbox implements OnDestroy, AfterViewInit {
@@ -13,7 +14,10 @@ declare class SdCheckbox implements OnDestroy, AfterViewInit {
     readonly label: _angular_core.InputSignalWithTransform<string | undefined, string | null | undefined>;
     readonly color: _angular_core.InputSignalWithTransform<Color, Color | null | undefined>;
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    readonly viewed: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Display mode: `false` edit · `true` static view · `'inline'` interactive (disabled `'inline'` → static). */
+    readonly viewed: _angular_core.InputSignalWithTransform<SdViewed, SdViewedInput>;
+    /** `true` when the static read-only view should render. */
+    readonly isViewed: _angular_core.Signal<boolean>;
     readonly inlineError: _angular_core.InputSignalWithTransform<string, string | null | undefined>;
     readonly model: _angular_core.ModelSignal<unknown>;
     readonly sdChange: _angular_core.OutputEmitterRef<unknown>;

package/forms/chip/index.d.ts CHANGED Viewed

@@ -6,7 +6,7 @@ import { MatChipInputEvent } from '@angular/material/chips';
 import { ErrorStateMatcher } from '@angular/material/core';
 import { MatFormFieldAppearance, FloatLabelType } from '@angular/material/form-field';
 import { SdViewDefDirective, SdLabelDefDirective } from '@sdcorejs/angular/forms/directives';
-import { SdFormControl } from '@sdcorejs/angular/forms/models';
+import { SdViewed, SdViewedInput, SdFormControl } from '@sdcorejs/angular/forms/models';
 import { Size } from '@sdcorejs/utils/models';
 declare class SdRemovableChipPipe implements PipeTransform {
@@ -45,7 +45,10 @@ declare class SdChip implements AfterViewInit {
     max: _angular_core.InputSignalWithTransform<number, number | null | undefined>;
     addable: _angular_core.InputSignalWithTransform<boolean, unknown>;
     disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    viewed: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Display mode: `false` edit · `true` static view · `'inline'` interactive (disabled `'inline'` → static). */
+    viewed: _angular_core.InputSignalWithTransform<SdViewed, SdViewedInput>;
+    /** `true` when the static view should render (`viewed===true`, or disabled `'inline'`). */
+    readonly isViewed: _angular_core.Signal<boolean>;
     hyperlink: _angular_core.InputSignalWithTransform<string | undefined, string | null | undefined>;
     model: _angular_core.ModelSignal<(string | number)[] | undefined>;
     sdChange: _angular_core.OutputEmitterRef<any[]>;

package/forms/chip-calendar/index.d.ts CHANGED Viewed

@@ -7,7 +7,7 @@ import { MatCalendar } from '@angular/material/datepicker';
 import { MatFormFieldAppearance, FloatLabelType } from '@angular/material/form-field';
 import { MatMenuTrigger } from '@angular/material/menu';
 import { SdViewDefDirective, SdLabelDefDirective } from '@sdcorejs/angular/forms/directives';
-import { SdFormControl } from '@sdcorejs/angular/forms/models';
+import { SdViewed, SdViewedInput, SdFormControl } from '@sdcorejs/angular/forms/models';
 import { Size } from '@sdcorejs/utils/models';
 declare class SdChipCalendarErrorStateMatcher implements ErrorStateMatcher {
@@ -40,7 +40,10 @@ declare class SdChipCalendar implements AfterViewInit {
     min: _angular_core.InputSignalWithTransform<number, number | null | undefined>;
     max: _angular_core.InputSignalWithTransform<number, number | null | undefined>;
     disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    viewed: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Display mode: `false` edit · `true` static view · `'inline'` interactive (disabled `'inline'` → static). */
+    viewed: _angular_core.InputSignalWithTransform<SdViewed, SdViewedInput>;
+    /** `true` when the static view should render (`viewed===true`, or disabled `'inline'`). */
+    readonly isViewed: _angular_core.Signal<boolean>;
     hyperlink: _angular_core.InputSignalWithTransform<string | undefined, string | null | undefined>;
     model: _angular_core.ModelSignal<(string | number)[] | undefined>;
     sdChange: _angular_core.OutputEmitterRef<any[]>;

package/forms/date/index.d.ts CHANGED Viewed

@@ -4,7 +4,7 @@ import { FormGroup } from '@angular/forms';
 import { MatDatepicker, MatDatepickerInputEvent } from '@angular/material/datepicker';
 import { MatFormFieldAppearance, FloatLabelType } from '@angular/material/form-field';
 import { SdViewDefDirective, SdLabelDefDirective } from '@sdcorejs/angular/forms/directives';
-import { SdFormControl } from '@sdcorejs/angular/forms/models';
+import { SdViewed, SdViewedInput, SdFormControl } from '@sdcorejs/angular/forms/models';
 import { Size } from '@sdcorejs/utils/models';
 declare class SdDate implements OnDestroy, OnInit {
@@ -35,9 +35,18 @@ declare class SdDate implements OnDestroy, OnInit {
     hideInlineError: _angular_core.InputSignalWithTransform<boolean, unknown>;
     required: _angular_core.InputSignalWithTransform<boolean, unknown>;
     disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    viewed: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    /** Flatten the field chrome to a chip-friendly trigger (value + caret only). */
-    bare: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Display mode: `false` edit · `true` static view · `'inline'` view + click-to-edit (calendar). */
+    viewed: _angular_core.InputSignalWithTransform<SdViewed, SdViewedInput>;
+    /** In `viewed='inline'`, show a hover clear-× on the text face. Set `false` when the host owns removal (chips). */
+    clearable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** `true` when `viewed === 'inline'`. */
+    readonly isInline: _angular_core.Signal<boolean>;
+    /** `true` when `viewed === true` (static view, no editor). */
+    readonly isViewed: _angular_core.Signal<boolean>;
+    /** Open the calendar from the inline text face. No-op unless `viewed='inline'`. */
+    enterInlineEdit: () => void;
+    /** View display template: `sdViewDef` overrides the projected `#sdValue` (unified). */
+    readonly viewTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
     inlineError: _angular_core.InputSignal<string | undefined>;
     /**
      * Tổng hợp error message để hiển thị trong tooltip khi hideInlineError = true.
@@ -76,7 +85,7 @@ declare class SdDate implements OnDestroy, OnInit {
     onChange: (event: MatDatepickerInputEvent<Date>) => void;
     clear: ($event: any) => void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdDate, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdDate, "sd-date", never, { "autoIdInput": { "alias": "autoId"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "form": { "alias": "form"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "hideInlineError": { "alias": "hideInlineError"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "viewed": { "alias": "viewed"; "required": false; "isSignal": true; }; "bare": { "alias": "bare"; "required": false; "isSignal": true; }; "inlineError": { "alias": "inlineError"; "required": false; "isSignal": true; }; "hyperlink": { "alias": "hyperlink"; "required": false; "isSignal": true; }; "appearanceInput": { "alias": "appearance"; "required": false; "isSignal": true; }; "floatLabel": { "alias": "floatLabel"; "required": false; "isSignal": true; }; "minInput": { "alias": "min"; "required": false; "isSignal": true; }; "minDateInput": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxInput": { "alias": "max"; "required": false; "isSignal": true; }; "maxDateInput": { "alias": "maxDate"; "required": false; "isSignal": true; }; "valueModel": { "alias": "model"; "required": false; "isSignal": true; }; }, { "valueModel": "modelChange"; "sdChange": "sdChange"; "sdFocus": "sdFocus"; }, ["sdLabelTemplate", "sdValueTemplate", "sdViewDef", "sdLabelDef"], ["[sdLabel]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdDate, "sd-date", never, { "autoIdInput": { "alias": "autoId"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "form": { "alias": "form"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "hideInlineError": { "alias": "hideInlineError"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "viewed": { "alias": "viewed"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "inlineError": { "alias": "inlineError"; "required": false; "isSignal": true; }; "hyperlink": { "alias": "hyperlink"; "required": false; "isSignal": true; }; "appearanceInput": { "alias": "appearance"; "required": false; "isSignal": true; }; "floatLabel": { "alias": "floatLabel"; "required": false; "isSignal": true; }; "minInput": { "alias": "min"; "required": false; "isSignal": true; }; "minDateInput": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxInput": { "alias": "max"; "required": false; "isSignal": true; }; "maxDateInput": { "alias": "maxDate"; "required": false; "isSignal": true; }; "valueModel": { "alias": "model"; "required": false; "isSignal": true; }; }, { "valueModel": "modelChange"; "sdChange": "sdChange"; "sdFocus": "sdFocus"; }, ["sdLabelTemplate", "sdValueTemplate", "sdViewDef", "sdLabelDef"], ["[sdLabel]"], true, never>;
 }
 export { SdDate };

package/forms/date-range/index.d.ts CHANGED Viewed

@@ -4,6 +4,7 @@ import { FormGroup, FormControl } from '@angular/forms';
 import { MatDateRangePicker, MatDatepickerInputEvent } from '@angular/material/datepicker';
 import { MatFormFieldAppearance, FloatLabelType } from '@angular/material/form-field';
 import { SdLabelDefDirective } from '@sdcorejs/angular/forms/directives';
+import { SdViewed, SdViewedInput } from '@sdcorejs/angular/forms/models';
 import { Size } from '@sdcorejs/utils/models';
 interface Daterange {
@@ -38,10 +39,16 @@ declare class SdDateRange implements OnDestroy, OnInit {
     readonly errorMessage: _angular_core.Signal<string | undefined>;
     required: _angular_core.InputSignalWithTransform<boolean, unknown>;
     disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    /** Bare mode — strip the form-field shell to fit inline in a chip / token. */
-    bare: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    /** Viewed mode — render a read-only <sd-view> instead of the editable form-field. */
-    viewed: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Display mode: `false` edit · `true` static view · `'inline'` view + click-to-edit (range picker). */
+    viewed: _angular_core.InputSignalWithTransform<SdViewed, SdViewedInput>;
+    /** In `viewed='inline'`, show a hover clear-× on the text face. Set `false` when the host owns removal (chips). */
+    clearable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** `true` when `viewed === 'inline'`. */
+    readonly isInline: _angular_core.Signal<boolean>;
+    /** `true` when `viewed === true` (static view, no editor). */
+    readonly isViewed: _angular_core.Signal<boolean>;
+    /** Open the range picker from the inline text face. No-op unless `viewed='inline'`. */
+    enterInlineEdit: () => void;
     /** Optional <ng-template #sdValue> projected by consumer to override the viewed text. */
     sdValueTemplate: _angular_core.Signal<TemplateRef<unknown> | undefined>;
     /**
@@ -77,7 +84,7 @@ declare class SdDateRange implements OnDestroy, OnInit {
     onClosePicker: () => void;
     onOpenPicker: (event: MouseEvent) => void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdDateRange, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdDateRange, "sd-date-range", never, { "autoIdInput": { "alias": "autoId"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "form": { "alias": "form"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "hideInlineError": { "alias": "hideInlineError"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "bare": { "alias": "bare"; "required": false; "isSignal": true; }; "viewed": { "alias": "viewed"; "required": false; "isSignal": true; }; "appearanceInput": { "alias": "appearance"; "required": false; "isSignal": true; }; "floatLabel": { "alias": "floatLabel"; "required": false; "isSignal": true; }; "minInput": { "alias": "min"; "required": false; "isSignal": true; }; "maxInput": { "alias": "max"; "required": false; "isSignal": true; }; "valueModel": { "alias": "model"; "required": false; "isSignal": true; }; }, { "valueModel": "modelChange"; "sdChange": "sdChange"; }, ["sdLabelDef", "sdValueTemplate"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdDateRange, "sd-date-range", never, { "autoIdInput": { "alias": "autoId"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "form": { "alias": "form"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "hideInlineError": { "alias": "hideInlineError"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "viewed": { "alias": "viewed"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "appearanceInput": { "alias": "appearance"; "required": false; "isSignal": true; }; "floatLabel": { "alias": "floatLabel"; "required": false; "isSignal": true; }; "minInput": { "alias": "min"; "required": false; "isSignal": true; }; "maxInput": { "alias": "max"; "required": false; "isSignal": true; }; "valueModel": { "alias": "model"; "required": false; "isSignal": true; }; }, { "valueModel": "modelChange"; "sdChange": "sdChange"; }, ["sdLabelDef", "sdValueTemplate"], never, true, never>;
 }
 export { SdDateRange };

package/forms/datetime/index.d.ts CHANGED Viewed

@@ -3,7 +3,7 @@ import { OnDestroy, OnInit, ElementRef, TemplateRef } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 import { MatFormFieldAppearance, FloatLabelType } from '@angular/material/form-field';
 import { SdViewDefDirective } from '@sdcorejs/angular/forms/directives';
-import { SdFormControl } from '@sdcorejs/angular/forms/models';
+import { SdViewed, SdViewedInput, SdFormControl } from '@sdcorejs/angular/forms/models';
 import { Size } from '@sdcorejs/utils/models';
 declare class SdDatetime implements OnDestroy, OnInit {
@@ -35,11 +35,20 @@ declare class SdDatetime implements OnDestroy, OnInit {
     hideInlineError: _angular_core.InputSignalWithTransform<boolean, unknown>;
     required: _angular_core.InputSignalWithTransform<boolean, unknown>;
     disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    viewed: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Display mode: `false` edit · `true` static view · `'inline'` view + click-to-edit (datetime overlay). */
+    viewed: _angular_core.InputSignalWithTransform<SdViewed, SdViewedInput>;
     /** Hiển thị thêm cột giây trong picker. Mặc định: chỉ HH:MM. */
     showSeconds: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    /** Flatten the field chrome to a chip-friendly trigger (value + caret only). */
-    bare: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** In `viewed='inline'`, show a hover clear-× on the text face. Set `false` when the host owns removal (chips). */
+    clearable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** `true` when `viewed === 'inline'`. */
+    readonly isInline: _angular_core.Signal<boolean>;
+    /** `true` when `viewed === true` (static view, no editor). */
+    readonly isViewed: _angular_core.Signal<boolean>;
+    /** Open the datetime overlay from the inline text face. No-op unless `viewed='inline'`. */
+    enterInlineEdit: () => void;
+    /** View display template: `sdViewDef` overrides the projected `#sdValue` (unified). */
+    readonly viewTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
     inlineError: _angular_core.InputSignal<string | undefined>;
     /**
      * Tổng hợp error message để hiển thị trong tooltip khi hideInlineError = true.
@@ -86,7 +95,7 @@ declare class SdDatetime implements OnDestroy, OnInit {
     onConfirmInput: (event: any) => void;
     clear: ($event: any) => void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdDatetime, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdDatetime, "sd-datetime", never, { "autoIdInput": { "alias": "autoId"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "form": { "alias": "form"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "hideInlineError": { "alias": "hideInlineError"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "viewed": { "alias": "viewed"; "required": false; "isSignal": true; }; "showSeconds": { "alias": "showSeconds"; "required": false; "isSignal": true; }; "bare": { "alias": "bare"; "required": false; "isSignal": true; }; "inlineError": { "alias": "inlineError"; "required": false; "isSignal": true; }; "hyperlink": { "alias": "hyperlink"; "required": false; "isSignal": true; }; "appearanceInput": { "alias": "appearance"; "required": false; "isSignal": true; }; "floatLabel": { "alias": "floatLabel"; "required": false; "isSignal": true; }; "minInput": { "alias": "min"; "required": false; "isSignal": true; }; "minDateInput": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxInput": { "alias": "max"; "required": false; "isSignal": true; }; "maxDateInput": { "alias": "maxDate"; "required": false; "isSignal": true; }; "valueModel": { "alias": "model"; "required": false; "isSignal": true; }; }, { "valueModel": "modelChange"; "sdChange": "sdChange"; "sdFocus": "sdFocus"; }, ["sdLabelTemplate", "sdValueTemplate", "sdViewDef"], ["[sdLabel]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdDatetime, "sd-datetime", never, { "autoIdInput": { "alias": "autoId"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "form": { "alias": "form"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "hideInlineError": { "alias": "hideInlineError"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "viewed": { "alias": "viewed"; "required": false; "isSignal": true; }; "showSeconds": { "alias": "showSeconds"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "inlineError": { "alias": "inlineError"; "required": false; "isSignal": true; }; "hyperlink": { "alias": "hyperlink"; "required": false; "isSignal": true; }; "appearanceInput": { "alias": "appearance"; "required": false; "isSignal": true; }; "floatLabel": { "alias": "floatLabel"; "required": false; "isSignal": true; }; "minInput": { "alias": "min"; "required": false; "isSignal": true; }; "minDateInput": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxInput": { "alias": "max"; "required": false; "isSignal": true; }; "maxDateInput": { "alias": "maxDate"; "required": false; "isSignal": true; }; "valueModel": { "alias": "model"; "required": false; "isSignal": true; }; }, { "valueModel": "modelChange"; "sdChange": "sdChange"; "sdFocus": "sdFocus"; }, ["sdLabelTemplate", "sdValueTemplate", "sdViewDef"], ["[sdLabel]"], true, never>;
 }
 export { SdDatetime };