@sd-angular/core 19.0.0-beta.100 → 19.0.0-beta.102

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

@@ -0,0 +1,75 @@
+import * as i0 from '@angular/core';
+import { inject, model, input, booleanAttribute, computed, viewChild, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i1 from '@angular/material/menu';
+import { MatMenuTrigger, MatMenuModule } from '@angular/material/menu';
+import * as i2 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { DomSanitizer } from '@angular/platform-browser';
+import { OPERATORS } from '@sdcorejs/utils/constants';
+import { I18nService } from '@sd-angular/core/i18n';
+
+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"/>';
+    #i18n = inject(I18nService);
+    #sanitizer = inject(DomSanitizer);
+    /** Operator hiện tại — binding hai chiều [(model)]. */
+    model = model();
+    /** Danh sách operator cho phép, giữ nguyên thứ tự truyền vào. */
+    operators = input([]);
+    /** Vô hiệu hóa trigger (không mở được menu). */
+    disabled = input(false, { transform: booleanAttribute });
+    /** data-autoId cho e2e selector. */
+    autoId = input();
+    /** Allowed operators map sang { value, icon, display } theo thứ tự input. */
+    items = computed(() => {
+        const out = [];
+        for (const value of this.operators()) {
+            const r = this.#resolve(value);
+            if (!r)
+                continue;
+            out.push({ value, icon: this.#svg(r.icon), display: r.display });
+        }
+        return out;
+    });
+    /** 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 ?? 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 } từ bảng OPERATORS dùng chung.
+    #resolve(value) {
+        if (value == null)
+            return undefined;
+        const entry = OPERATORS.find((o) => o.value === value);
+        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.
+    #svg(inner) {
+        return this.#sanitizer.bypassSecurityTrustHtml(`<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>`);
+    }
+    trigger = viewChild(MatMenuTrigger);
+    /** Open the operator menu programmatically (used by the query-bar build flow). */
+    open() {
+        this.trigger()?.openMenu();
+    }
+    /** Chọn operator từ menu. */
+    select(value) {
+        this.model.set(value);
+    }
+    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 });
+}
+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"] }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SdOperator };
+//# sourceMappingURL=sd-angular-core-components-operator.mjs.map

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

@@ -0,0 +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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"}