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 '@sdcorejs/angular/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(...(ngDevMode ? [undefined, { debugName: "model" }] : /* istanbul ignore next */ []));
    /** Danh sách operator cho phép, giữ nguyên thứ tự truyền vào. */
    operators = input([], ...(ngDevMode ? [{ debugName: "operators" }] : /* istanbul ignore next */ []));
    /** Vô hiệu hóa trigger (không mở được menu). */
    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    /** data-autoId cho e2e selector. */
    autoId = input(...(ngDevMode ? [undefined, { debugName: "autoId" }] : /* istanbul ignore next */ []));
    /** 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;
    }, ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
    /** 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);
    }, ...(ngDevMode ? [{ debugName: "currentIcon" }] : /* istanbul ignore next */ []));
    /** Tooltip = i18n label của operator hiện tại ('' khi chưa chọn). */
    currentLabel = computed(() => this.#resolve(this.model())?.display ?? '', ...(ngDevMode ? [{ debugName: "currentLabel" }] : /* istanbul ignore next */ []));
    // Resolve một operator → { inner-svg, nhãn đã dịch } từ bảng OPERATORS dùng chung.
    // why: OPERATORS[].display là i18n KEY ('core.operator.*.display'), KHÔNG phải text —
    // phải dịch qua I18nService, nếu không UI hiện key thô (code) thay vì nhãn đã dịch.
    #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, ...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
    /** 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: "21.2.17", ngImport: i0, type: SdOperator, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", 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();\n\n<button\n  type=\"button\"\n  class=\"c-op-trigger\"\n  [disabled]=\"disabled()\"\n  [matMenuTriggerFor]=\"menu\"\n  [matTooltip]=\"currentLabel()\"\n  matTooltipPosition=\"above\"\n  [attr.data-autoId]=\"autoId() ?? null\">\n  <span class=\"c-op-icon\" [innerHTML]=\"currentIcon()\"></span>\n</button>\n\n<mat-menu #menu=\"matMenu\" class=\"c-op-menu\">\n  @for (item of items(); track item.value) {\n    <button\n      type=\"button\"\n      mat-menu-item\n      class=\"c-op-row\"\n      [class.c-op-active]=\"item.value === _current\"\n      (click)=\"select(item.value)\">\n      <span class=\"c-op-icon\" [innerHTML]=\"item.icon\"></span>\n      <span class=\"c-op-label\">{{ item.display }}</span>\n      <span class=\"c-op-code\">{{ item.value }}</span>\n    </button>\n  }\n</mat-menu>\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: "21.2.17", ngImport: i0, type: SdOperator, decorators: [{
            type: Component,
            args: [{ selector: 'sd-operator', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatMenuModule, MatTooltipModule], template: "@let _current = model();\n\n<button\n  type=\"button\"\n  class=\"c-op-trigger\"\n  [disabled]=\"disabled()\"\n  [matMenuTriggerFor]=\"menu\"\n  [matTooltip]=\"currentLabel()\"\n  matTooltipPosition=\"above\"\n  [attr.data-autoId]=\"autoId() ?? null\">\n  <span class=\"c-op-icon\" [innerHTML]=\"currentIcon()\"></span>\n</button>\n\n<mat-menu #menu=\"matMenu\" class=\"c-op-menu\">\n  @for (item of items(); track item.value) {\n    <button\n      type=\"button\"\n      mat-menu-item\n      class=\"c-op-row\"\n      [class.c-op-active]=\"item.value === _current\"\n      (click)=\"select(item.value)\">\n      <span class=\"c-op-icon\" [innerHTML]=\"item.icon\"></span>\n      <span class=\"c-op-label\">{{ item.display }}</span>\n      <span class=\"c-op-code\">{{ item.value }}</span>\n    </button>\n  }\n</mat-menu>\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"] }]
        }], propDecorators: { model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: false }] }, { type: i0.Output, args: ["modelChange"] }], operators: [{ type: i0.Input, args: [{ isSignal: true, alias: "operators", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], autoId: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoId", required: false }] }], trigger: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatMenuTrigger), { isSignal: true }] }] } });

/**
 * Generated bundle index. Do not edit.
 */

export { SdOperator };
//# sourceMappingURL=sdcorejs-angular-components-operator.mjs.map
