import { CdkMenuModule } from '@angular/cdk/menu';
import { CommonModule } from '@angular/common';
import { Component, model } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatTooltipModule } from '@angular/material/tooltip';
import { attrModel } from '@metad/ocap-angular/core';
import { TranslateModule } from '@ngx-translate/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/forms";
import * as i2 from "@ngx-translate/core";
import * as i3 from "@angular/cdk/menu";
import * as i4 from "@angular/material/tooltip";
export class NgmPresentationComponent {
    constructor() {
        this.presentation = model();
        this.topN = attrModel(this.presentation, 'maxItems');
        this.topNOptions = [5, 10, 20, 50, 100];
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgmPresentationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: NgmPresentationComponent, isStandalone: true, selector: "ngm-presentation", inputs: { presentation: { classPropertyName: "presentation", publicName: "presentation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { presentation: "presentationChange" }, ngImport: i0, template: "<button class=\"btn pressable flex justify-center items-center w-7 h-7 rounded-full border-0 text-text-secondary hover:text-text-primary\n            bg-transparent hover:bg-hover-bg\"\n  [matTooltip]=\"'Ngm.Common.Presentation' | translate: {Default: 'Presentation'}\"\n  matTooltipPosition=\"above\"\n  #trigger=\"cdkMenuTriggerFor\"\n  [cdkMenuTriggerFor]=\"menu\"\n  [cdkMenuTriggerData]=\"{trigger: trigger}\"\n>\n  <i class=\"ri-presentation-line\"></i>\n</button>\n\n<ng-template #menu let-trigger=\"trigger\">\n  <div cdkMenu class=\"cdk-menu__large\">\n    <div cdkMenuItem [cdkMenuTriggerFor]=\"topMenu\">\n      Top {{topN() ?? ''}}\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #topMenu let-trigger=\"trigger\">\n  <div cdkMenu class=\"cdk-menu__large\">\n    @for (n of topNOptions; track n) {\n      <div cdkMenuItem [class.active]=\"topN() === n\"\n        (click)=\"topN.set(n)\">\n        Top {{n}}\n      </div>\n    }\n\n    <div class=\"mt-1 flex flex-col\" >\n      <label class=\"text-sm px-1\">{{ 'Ngm.Common.Custom' | translate: {Default: 'Custom'} }}</label>\n      <input class=\"w-full appearance-none border border-transparent bg-components-input-bg-normal py-2 text-components-input-text-filled caret-primary-600 outline-none \n        placeholder:text-components-input-text-placeholder hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs \n        px-3 radius-md system-sm-regular\"\n        [(ngModel)]=\"topN\"\n      >\n    </div>\n  </div>\n</ng-template>\n  ", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: CdkMenuModule }, { kind: "directive", type: i3.CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }, { kind: "directive", type: i3.CdkMenuItem, selector: "[cdkMenuItem]", inputs: ["cdkMenuItemDisabled", "cdkMenuitemTypeaheadLabel"], outputs: ["cdkMenuItemTriggered"], exportAs: ["cdkMenuItem"] }, { kind: "directive", type: i3.CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgmPresentationComponent, decorators: [{
            type: Component,
            args: [{ standalone: true, imports: [CommonModule, FormsModule, TranslateModule, CdkMenuModule, MatTooltipModule], selector: 'ngm-presentation', template: "<button class=\"btn pressable flex justify-center items-center w-7 h-7 rounded-full border-0 text-text-secondary hover:text-text-primary\n            bg-transparent hover:bg-hover-bg\"\n  [matTooltip]=\"'Ngm.Common.Presentation' | translate: {Default: 'Presentation'}\"\n  matTooltipPosition=\"above\"\n  #trigger=\"cdkMenuTriggerFor\"\n  [cdkMenuTriggerFor]=\"menu\"\n  [cdkMenuTriggerData]=\"{trigger: trigger}\"\n>\n  <i class=\"ri-presentation-line\"></i>\n</button>\n\n<ng-template #menu let-trigger=\"trigger\">\n  <div cdkMenu class=\"cdk-menu__large\">\n    <div cdkMenuItem [cdkMenuTriggerFor]=\"topMenu\">\n      Top {{topN() ?? ''}}\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #topMenu let-trigger=\"trigger\">\n  <div cdkMenu class=\"cdk-menu__large\">\n    @for (n of topNOptions; track n) {\n      <div cdkMenuItem [class.active]=\"topN() === n\"\n        (click)=\"topN.set(n)\">\n        Top {{n}}\n      </div>\n    }\n\n    <div class=\"mt-1 flex flex-col\" >\n      <label class=\"text-sm px-1\">{{ 'Ngm.Common.Custom' | translate: {Default: 'Custom'} }}</label>\n      <input class=\"w-full appearance-none border border-transparent bg-components-input-bg-normal py-2 text-components-input-text-filled caret-primary-600 outline-none \n        placeholder:text-components-input-text-placeholder hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs \n        px-3 radius-md system-sm-regular\"\n        [(ngModel)]=\"topN\"\n      >\n    </div>\n  </div>\n</ng-template>\n  " }]
        }] });
//# sourceMappingURL=data:application/json;base64, 