npm - @sd-angular/core - Versions diffs - 19.0.0-beta.101 → 19.0.0-beta.103 - Mend

@sd-angular/core 19.0.0-beta.101 → 19.0.0-beta.103

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 (68) hide show

package/fesm2022/sd-angular-core-components-operator.mjs CHANGED Viewed

@@ -8,18 +8,9 @@ import { DomSanitizer } from '@angular/platform-browser';
 import { OPERATORS } from '@sdcorejs/utils/constants';
 import { I18nService } from '@sd-angular/core/i18n';
-var _a;
 class SdOperator {
     // Inner SVG markup (hình phễu) dùng khi chưa chọn operator.
     static FALLBACK_ICON = '<path d="M4 5h16l-6.5 7.5V19l-3 2v-8.5z"/>';
-    // why: vài operator hợp lệ chưa có trong bảng OPERATORS dùng chung (vd BETWEEN). Bổ sung
-    // cục bộ icon (inner SVG) + nhãn đã dịch để không rơi về phễu và hiện được trong menu.
-    static SUPPLEMENT = {
-        BETWEEN: {
-            icon: '<line x1="5" y1="7" x2="5" y2="17"/><line x1="19" y1="7" x2="19" y2="17"/><line x1="5" y1="12" x2="19" y2="12"/>',
-            display: 'Trong khoảng',
-        },
-    };
     #i18n = inject(I18nService);
     #sanitizer = inject(DomSanitizer);
     /** Operator hiện tại — binding hai chiều [(model)]. */
@@ -43,19 +34,16 @@ class SdOperator {
     });
     /** Icon SVG ở trigger — fallback phễu khi model chưa set / không tìm thấy. */
     currentIcon = computed(() => {
-        return this.#svg(this.#resolve(this.model())?.icon ?? _a.FALLBACK_ICON);
+        return this.#svg(this.#resolve(this.model())?.icon ?? SdOperator.FALLBACK_ICON);
     });
     /** Tooltip = i18n label của operator hiện tại ('' khi chưa chọn). */
     currentLabel = computed(() => this.#resolve(this.model())?.display ?? '');
-    // Resolve một operator → { inner-svg, nhãn đã dịch }: OPERATORS trước, rồi SUPPLEMENT cục bộ.
+    // Resolve một operator → { inner-svg, nhãn đã dịch } từ bảng OPERATORS dùng chung.
     #resolve(value) {
         if (value == null)
             return undefined;
         const entry = OPERATORS.find((o) => o.value === value);
-        if (entry)
-            return { icon: entry.icon, display: this.#i18n.t(entry.display) };
-        const sup = _a.SUPPLEMENT[value];
-        return sup ? { icon: sup.icon, display: sup.display } : undefined;
+        return entry ? { icon: entry.icon, display: this.#i18n.t(entry.display) } : undefined;
     }
     // why: OPERATORS.icon là inner SVG (path/line/rect). Bọc <svg> + bypass sanitizer
     // (nguồn là hằng số nội bộ, không phải input người dùng) để Angular không strip svg con.
@@ -74,7 +62,6 @@ class SdOperator {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdOperator, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdOperator, isStandalone: true, selector: "sd-operator", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, operators: { classPropertyName: "operators", publicName: "operators", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, autoId: { classPropertyName: "autoId", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { model: "modelChange" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: MatMenuTrigger, descendants: true, isSignal: true }], ngImport: i0, template: "@let _current = model();\r\n\r\n<button\r\n  type=\"button\"\r\n  class=\"c-op-trigger\"\r\n  [disabled]=\"disabled()\"\r\n  [matMenuTriggerFor]=\"menu\"\r\n  [matTooltip]=\"currentLabel()\"\r\n  matTooltipPosition=\"above\"\r\n  [attr.data-autoId]=\"autoId() ?? null\">\r\n  <span class=\"c-op-icon\" [innerHTML]=\"currentIcon()\"></span>\r\n</button>\r\n\r\n<mat-menu #menu=\"matMenu\" class=\"c-op-menu\">\r\n  @for (item of items(); track item.value) {\r\n    <button\r\n      type=\"button\"\r\n      mat-menu-item\r\n      class=\"c-op-row\"\r\n      [class.c-op-active]=\"item.value === _current\"\r\n      (click)=\"select(item.value)\">\r\n      <span class=\"c-op-icon\" [innerHTML]=\"item.icon\"></span>\r\n      <span class=\"c-op-label\">{{ item.display }}</span>\r\n      <span class=\"c-op-code\">{{ item.value }}</span>\r\n    </button>\r\n  }\r\n</mat-menu>\r\n", styles: [".c-op-trigger{display:inline-flex;align-items:center;justify-content:center;padding:4px;border:none;background:transparent;color:var(--sd-primary, #0f766e);cursor:pointer;border-radius:4px}.c-op-trigger:hover:not([disabled]){background:#0000000a}.c-op-trigger[disabled]{color:#00000042;cursor:default}.c-op-icon{display:inline-flex;align-items:center}.c-op-icon svg{display:block}::ng-deep .c-op-menu .mat-mdc-menu-item-text{display:flex;align-items:center;gap:8px;width:100%}::ng-deep .c-op-menu .c-op-icon{display:inline-flex;align-items:center;flex:0 0 auto}::ng-deep .c-op-menu .c-op-icon svg{display:block}::ng-deep .c-op-menu .c-op-label{flex:1 1 auto}::ng-deep .c-op-menu .c-op-code{margin-left:auto;padding-left:16px;color:var(--sd-text-muted, #7a7a7a);font-size:11px;font-family:monospace}::ng-deep .c-op-menu .c-op-row.c-op-active{background:var(--sd-primary-light, rgba(15, 118, 110, .08))}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-_a = SdOperator;
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdOperator, decorators: [{
             type: Component,
             args: [{ selector: 'sd-operator', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatMenuModule, MatTooltipModule], template: "@let _current = model();\r\n\r\n<button\r\n  type=\"button\"\r\n  class=\"c-op-trigger\"\r\n  [disabled]=\"disabled()\"\r\n  [matMenuTriggerFor]=\"menu\"\r\n  [matTooltip]=\"currentLabel()\"\r\n  matTooltipPosition=\"above\"\r\n  [attr.data-autoId]=\"autoId() ?? null\">\r\n  <span class=\"c-op-icon\" [innerHTML]=\"currentIcon()\"></span>\r\n</button>\r\n\r\n<mat-menu #menu=\"matMenu\" class=\"c-op-menu\">\r\n  @for (item of items(); track item.value) {\r\n    <button\r\n      type=\"button\"\r\n      mat-menu-item\r\n      class=\"c-op-row\"\r\n      [class.c-op-active]=\"item.value === _current\"\r\n      (click)=\"select(item.value)\">\r\n      <span class=\"c-op-icon\" [innerHTML]=\"item.icon\"></span>\r\n      <span class=\"c-op-label\">{{ item.display }}</span>\r\n      <span class=\"c-op-code\">{{ item.value }}</span>\r\n    </button>\r\n  }\r\n</mat-menu>\r\n", styles: [".c-op-trigger{display:inline-flex;align-items:center;justify-content:center;padding:4px;border:none;background:transparent;color:var(--sd-primary, #0f766e);cursor:pointer;border-radius:4px}.c-op-trigger:hover:not([disabled]){background:#0000000a}.c-op-trigger[disabled]{color:#00000042;cursor:default}.c-op-icon{display:inline-flex;align-items:center}.c-op-icon svg{display:block}::ng-deep .c-op-menu .mat-mdc-menu-item-text{display:flex;align-items:center;gap:8px;width:100%}::ng-deep .c-op-menu .c-op-icon{display:inline-flex;align-items:center;flex:0 0 auto}::ng-deep .c-op-menu .c-op-icon svg{display:block}::ng-deep .c-op-menu .c-op-label{flex:1 1 auto}::ng-deep .c-op-menu .c-op-code{margin-left:auto;padding-left:16px;color:var(--sd-text-muted, #7a7a7a);font-size:11px;font-family:monospace}::ng-deep .c-op-menu .c-op-row.c-op-active{background:var(--sd-primary-light, rgba(15, 118, 110, .08))}\n"] }]

package/fesm2022/sd-angular-core-components-operator.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sd-angular-core-components-operator.mjs","sources":["../../../projects/sd-angular/components/operator/src/operator.component.ts","../../../projects/sd-angular/components/operator/src/operator.component.html","../../../projects/sd-angular/components/operator/sd-angular-core-components-operator.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, booleanAttribute, computed, inject, input, model, viewChild } from '@angular/core';\r\nimport { MatMenuModule, MatMenuTrigger } from '@angular/material/menu';\r\nimport { MatTooltipModule } from '@angular/material/tooltip';\r\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';\r\nimport { OPERATORS } from '@sdcorejs/utils/constants';\r\nimport { Operator } from '@sdcorejs/utils/models';\r\nimport { I18nService } from '@sd-angular/core/i18n';\r\n\r\ninterface OperatorItem {\r\n value: Operator;\r\n icon: SafeHtml;\r\n display: string;\r\n}\r\n\r\n@Component({\r\n selector: 'sd-operator',\r\n templateUrl: './operator.component.html',\r\n styleUrls: ['./operator.component.scss'],\r\n standalone: true,\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n imports: [MatMenuModule, MatTooltipModule],\r\n})\r\nexport class SdOperator {\r\n // Inner SVG markup (hình phễu) dùng khi chưa chọn operator.\r\n static readonly FALLBACK_ICON = '<path d=\"M4 5h16l-6.5 7.5V19l-3 2v-8.5z\"/>';\r\n\r\n // why: vài operator hợp lệ chưa có trong bảng OPERATORS dùng chung (vd BETWEEN). Bổ sung\r\n // cục bộ icon (inner SVG) + nhãn đã dịch để không rơi về phễu và hiện được trong menu.\r\n static readonly SUPPLEMENT: Partial<Record<Operator, { icon: string; display: string }>> = {\r\n BETWEEN: {\r\n icon: '<line x1=\"5\" y1=\"7\" x2=\"5\" y2=\"17\"/><line x1=\"19\" y1=\"7\" x2=\"19\" y2=\"17\"/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"/>',\r\n display: 'Trong khoảng',\r\n },\r\n };\r\n\r\n readonly #i18n = inject(I18nService);\r\n readonly #sanitizer = inject(DomSanitizer);\r\n\r\n /** Operator hiện tại — binding hai chiều [(model)]. /\r\n model = model<Operator \| undefined>();\r\n\r\n /* Danh sách operator cho phép, giữ nguyên thứ tự truyền vào. /\r\n operators = input<Operator[]>([]);\r\n\r\n /* Vô hiệu hóa trigger (không mở được menu). /\r\n disabled = input(false, { transform: booleanAttribute });\r\n\r\n /* data-autoId cho e2e selector. /\r\n autoId = input<string>();\r\n\r\n /* Allowed operators map sang { value, icon, display } theo thứ tự input. /\r\n readonly items = computed<OperatorItem[]>(() => {\r\n const out: OperatorItem[] = [];\r\n for (const value of this.operators()) {\r\n const r = this.#resolve(value);\r\n if (!r) continue;\r\n out.push({ value, icon: this.#svg(r.icon), display: r.display });\r\n }\r\n return out;\r\n });\r\n\r\n /* Icon SVG ở trigger — fallback phễu khi model chưa set / không tìm thấy. /\r\n readonly currentIcon = computed<SafeHtml>(() => {\r\n return this.#svg(this.#resolve(this.model())?.icon ?? SdOperator.FALLBACK_ICON);\r\n });\r\n\r\n /* Tooltip = i18n label của operator hiện tại ('' khi chưa chọn). /\r\n readonly currentLabel = computed<string>(() => this.#resolve(this.model())?.display ?? '');\r\n\r\n // Resolve một operator → { inner-svg, nhãn đã dịch }: ~~OPERATORS~~ ~~trước,~~ ~~rồi~~ ~~SUPPLEMENT~~ ~~cục bộ.\~~r\n #resolve(value: Operator \| undefined): { icon: string; display: string } \| undefined {\r\n if (value == null) return undefined;\r\n const entry = OPERATORS.find((o) => o.value === value);\r\n if (entry) ~~return~~ { icon: entry.icon, display: this.#i18n.t(entry.display) }~~;\r\n const~~ ~~sup = SdOperator.SUPPLEMENT[value];\r\n return sup ? { icon~~: ~~sup.icon, display: sup.display } :~~ undefined;\r\n }\r\n\r\n // why: OPERATORS.icon là inner SVG (path/line/rect). Bọc <svg> + bypass sanitizer\r\n // (nguồn là hằng số nội bộ, không phải input người dùng) để Angular không strip svg con.\r\n #svg(inner: string): SafeHtml {\r\n return this.#sanitizer.bypassSecurityTrustHtml(\r\n `<svg viewBox=\"0 0 24 24\" width=\"20\" height=\"20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">${inner}</svg>`,\r\n );\r\n }\r\n\r\n private readonly trigger = viewChild(MatMenuTrigger);\r\n\r\n /* Open the operator menu programmatically (used by the query-bar build flow). /\r\n open(): void {\r\n this.trigger()?.openMenu();\r\n }\r\n\r\n /* Chọn operator từ menu. /\r\n select(value: Operator): void {\r\n this.model.set(value);\r\n }\r\n}\r\n","@let _current = model();\r\n\r\n<button\r\n type=\"button\"\r\n class=\"c-op-trigger\"\r\n [disabled]=\"disabled()\"\r\n [matMenuTriggerFor]=\"menu\"\r\n [matTooltip]=\"currentLabel()\"\r\n matTooltipPosition=\"above\"\r\n [attr.data-autoId]=\"autoId() ?? null\">\r\n <span class=\"c-op-icon\" [innerHTML]=\"currentIcon()\"></span>\r\n</button>\r\n\r\n<mat-menu #menu=\"matMenu\" class=\"c-op-menu\">\r\n @for (item of items(); track item.value) {\r\n <button\r\n type=\"button\"\r\n mat-menu-item\r\n class=\"c-op-row\"\r\n [class.c-op-active]=\"item.value === _current\"\r\n (click)=\"select(item.value)\">\r\n <span class=\"c-op-icon\" [innerHTML]=\"item.icon\"></span>\r\n <span class=\"c-op-label\">{{ item.display }}</span>\r\n <span class=\"c-op-code\">{{ item.value }}</span>\r\n </button>\r\n }\r\n</mat-menu>\r\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"~~;;;;;;;;;;;~~MAsBa,UAAU,CAAA;;AAErB,IAAA,OAAgB,aAAa,GAAG,4CAA4C~~;;;IAI5E,OAAgB,UAAU,GAAiE~~;~~AACzF~~,~~QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,kHAAkH;AACxH,YAAA,OAAO,EAAE,cAAc;AACxB,SAAA;KACF;AAEQ,~~IAAA,KAAK,GAAG,MAAM,CAAC,WAAW,CAAC;AAC3B,IAAA,UAAU,GAAG,MAAM,CAAC,YAAY,CAAC;;IAG1C,KAAK,GAAG,KAAK,EAAwB;;AAGrC,IAAA,SAAS,GAAG,KAAK,CAAa,EAAE,CAAC;;IAGjC,QAAQ,GAAG,KAAK,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;;IAGxD,MAAM,GAAG,KAAK,EAAU;;AAGf,IAAA,KAAK,GAAG,QAAQ,CAAiB,MAAK;QAC7C,MAAM,GAAG,GAAmB,EAAE;QAC9B,KAAK,MAAM,KAAK,IAAI,IAAI,CAAC,SAAS,EAAE,EAAE;YACpC,MAAM,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;AAC9B,YAAA,IAAI,CAAC,CAAC;gBAAE;YACR,GAAG,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC;QAClE;AACA,QAAA,OAAO,GAAG;AACZ,IAAA,CAAC,CAAC;;AAGO,IAAA,WAAW,GAAG,QAAQ,CAAW,MAAK;QAC7C,OAAO,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI,IAAI,~~EAAU~~,CAAC,aAAa,CAAC;AACjF,IAAA,CAAC,CAAC;;IAGO,YAAY,GAAG,QAAQ,CAAS,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,OAAO,IAAI,EAAE,CAAC;;AAG1F,IAAA,QAAQ,CAAC,KAA2B,EAAA;QAClC,IAAI,KAAK,IAAI,IAAI;AAAE,YAAA,OAAO,SAAS;AACnC,QAAA,MAAM,KAAK,GAAG,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC;AACtD,QAAA,~~IAAI~~,KAAK~~;YAAE~~,~~OAAO~~,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE~~;QAC5E~~,~~MAAM,~~GAAG,~~GAAG,EAAU,CAAC,UAAU,CAAC,KAAK,CAAC;QACxC,OAAO,GAAG,GAAG,EAAE,IAAI,EAAE,GAAG,CAAC,IAAI,EAAE,OAAO,EAAE,GAAG,CAAC,OAAO,EAAE,GAAG,~~SAAS;~~IACnE~~;;;AAIA,IAAA,IAAI,CAAC,KAAa,EAAA;QAChB,OAAO,IAAI,CAAC,UAAU,CAAC,uBAAuB,CAC5C,CAAA,kJAAA,EAAqJ,KAAK,CAAA,MAAA,CAAQ,CACnK;IACH;AAEiB,IAAA,OAAO,GAAG,SAAS,CAAC,cAAc,CAAC;;IAGpD,IAAI,GAAA;AACF,QAAA,IAAI,CAAC,OAAO,EAAE,EAAE,QAAQ,EAAE;IAC5B;;AAGA,IAAA,MAAM,CAAC,KAAe,EAAA;AACpB,QAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC;IACvB;~~wGA1EW~~,UAAU,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAV,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,UAAU,~~upBAgEgB~~,cAAc,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,~~ECtFrD~~,g3BA2BA,EAAA,MAAA,EAAA,CAAA,y4BAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDPY,aAAa,6vBAAE,gBAAgB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,UAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,oBAAA,EAAA,4BAAA,EAAA,oBAAA,EAAA,qBAAA,EAAA,qBAAA,EAAA,yBAAA,EAAA,YAAA,EAAA,iBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,YAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA~~;;;~~4FAE9B,UAAU,EAAA,UAAA,EAAA,CAAA;kBARtB,SAAS;+BACE,aAAa,EAAA,UAAA,EAGX,IAAI,EAAA,eAAA,EACC,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC,CAAC,aAAa,EAAE,gBAAgB,CAAC,EAAA,QAAA,EAAA,g3BAAA,EAAA,MAAA,EAAA,CAAA,y4BAAA,CAAA,EAAA;;;AEpB5C;;AAEG;;;;"}
1	+ {"version":3,"file":"sd-angular-core-components-operator.mjs","sources":["../../../projects/sd-angular/components/operator/src/operator.component.ts","../../../projects/sd-angular/components/operator/src/operator.component.html","../../../projects/sd-angular/components/operator/sd-angular-core-components-operator.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, booleanAttribute, computed, inject, input, model, viewChild } from '@angular/core';\r\nimport { MatMenuModule, MatMenuTrigger } from '@angular/material/menu';\r\nimport { MatTooltipModule } from '@angular/material/tooltip';\r\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';\r\nimport { OPERATORS } from '@sdcorejs/utils/constants';\r\nimport { Operator } from '@sdcorejs/utils/models';\r\nimport { I18nService } from '@sd-angular/core/i18n';\r\n\r\ninterface OperatorItem {\r\n value: Operator;\r\n icon: SafeHtml;\r\n display: string;\r\n}\r\n\r\n@Component({\r\n selector: 'sd-operator',\r\n templateUrl: './operator.component.html',\r\n styleUrls: ['./operator.component.scss'],\r\n standalone: true,\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n imports: [MatMenuModule, MatTooltipModule],\r\n})\r\nexport class SdOperator {\r\n // Inner SVG markup (hình phễu) dùng khi chưa chọn operator.\r\n static readonly FALLBACK_ICON = '<path d=\"M4 5h16l-6.5 7.5V19l-3 2v-8.5z\"/>';\r\n\r\n readonly #i18n = inject(I18nService);\r\n readonly #sanitizer = inject(DomSanitizer);\r\n\r\n /** Operator hiện tại — binding hai chiều [(model)]. /\r\n model = model<Operator \| undefined>();\r\n\r\n /* Danh sách operator cho phép, giữ nguyên thứ tự truyền vào. /\r\n operators = input<Operator[]>([]);\r\n\r\n /* Vô hiệu hóa trigger (không mở được menu). /\r\n disabled = input(false, { transform: booleanAttribute });\r\n\r\n /* data-autoId cho e2e selector. /\r\n autoId = input<string>();\r\n\r\n /* Allowed operators map sang { value, icon, display } theo thứ tự input. /\r\n readonly items = computed<OperatorItem[]>(() => {\r\n const out: OperatorItem[] = [];\r\n for (const value of this.operators()) {\r\n const r = this.#resolve(value);\r\n if (!r) continue;\r\n out.push({ value, icon: this.#svg(r.icon), display: r.display });\r\n }\r\n return out;\r\n });\r\n\r\n /* Icon SVG ở trigger — fallback phễu khi model chưa set / không tìm thấy. /\r\n readonly currentIcon = computed<SafeHtml>(() => {\r\n return this.#svg(this.#resolve(this.model())?.icon ?? SdOperator.FALLBACK_ICON);\r\n });\r\n\r\n /* Tooltip = i18n label của operator hiện tại ('' khi chưa chọn). /\r\n readonly currentLabel = computed<string>(() => this.#resolve(this.model())?.display ?? '');\r\n\r\n // Resolve một operator → { inner-svg, nhãn đã dịch } từ bảng OPERATORS dùng chung.\r\n #resolve(value: Operator \| undefined): { icon: string; display: string } \| undefined {\r\n if (value == null) return undefined;\r\n const entry = OPERATORS.find((o) => o.value === value);\r\n return entry ? { icon: entry.icon, display: this.#i18n.t(entry.display) } : undefined;\r\n }\r\n\r\n // why: OPERATORS.icon là inner SVG (path/line/rect). Bọc <svg> + bypass sanitizer\r\n // (nguồn là hằng số nội bộ, không phải input người dùng) để Angular không strip svg con.\r\n #svg(inner: string): SafeHtml {\r\n return this.#sanitizer.bypassSecurityTrustHtml(\r\n `<svg viewBox=\"0 0 24 24\" width=\"20\" height=\"20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">${inner}</svg>`,\r\n );\r\n }\r\n\r\n private readonly trigger = viewChild(MatMenuTrigger);\r\n\r\n /* Open the operator menu programmatically (used by the query-bar build flow). /\r\n open(): void {\r\n this.trigger()?.openMenu();\r\n }\r\n\r\n /* Chọn operator từ menu. /\r\n select(value: Operator): void {\r\n this.model.set(value);\r\n }\r\n}\r\n","@let _current = model();\r\n\r\n<button\r\n type=\"button\"\r\n class=\"c-op-trigger\"\r\n [disabled]=\"disabled()\"\r\n [matMenuTriggerFor]=\"menu\"\r\n [matTooltip]=\"currentLabel()\"\r\n matTooltipPosition=\"above\"\r\n [attr.data-autoId]=\"autoId() ?? null\">\r\n <span class=\"c-op-icon\" [innerHTML]=\"currentIcon()\"></span>\r\n</button>\r\n\r\n<mat-menu #menu=\"matMenu\" class=\"c-op-menu\">\r\n @for (item of items(); track item.value) {\r\n <button\r\n type=\"button\"\r\n mat-menu-item\r\n class=\"c-op-row\"\r\n [class.c-op-active]=\"item.value === _current\"\r\n (click)=\"select(item.value)\">\r\n <span class=\"c-op-icon\" [innerHTML]=\"item.icon\"></span>\r\n <span class=\"c-op-label\">{{ item.display }}</span>\r\n <span class=\"c-op-code\">{{ item.value }}</span>\r\n </button>\r\n }\r\n</mat-menu>\r\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}