import { Component, ViewChild } from '@angular/core';
import { IgxColumnActionsComponent } from '../column-actions/column-actions.component';
import { IgxColumnPinningDirective } from '../column-actions/column-pinning.directive';
import { BaseToolbarColumnActionsDirective } from './grid-toolbar.base';
import { IgxToggleDirective } from '../../directives/toggle/toggle.directive';
import { IgxIconComponent } from '../../icon/icon.component';
import { IgxButtonDirective } from '../../directives/button/button.directive';
import { NgIf, AsyncPipe } from '@angular/common';
import * as i0 from "@angular/core";
/* blazorElement */
/* wcElementTag: igc-grid-toolbar-pinning */
/* singleInstanceIdentifier */
/* blazorIndirectRender */
/* jsonAPIManageItemInMarkup */
/**
 * Provides a pre-configured column pinning component for the grid.
 *
 *
 * @igxModule IgxGridToolbarModule
 * @igxParent IgxGridToolbarComponent
 *
 * @example
 * ```html
 *  <igx-grid-toolbar-pinning></igx-grid-toolbar-pinning>
 * ```
 */
export class IgxGridToolbarPinningComponent extends BaseToolbarColumnActionsDirective {
    set content(content) {
        this.columnActionsUI = content;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: IgxGridToolbarPinningComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: IgxGridToolbarPinningComponent, isStandalone: true, selector: "igx-grid-toolbar-pinning", viewQueries: [{ propertyName: "content", first: true, predicate: IgxColumnPinningDirective, descendants: true, read: IgxColumnActionsComponent }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"grid.rendered$ | async\">\n    <button\n        [title]=\"grid?.resourceStrings.igx_grid_toolbar_pinning_button_tooltip\"\n        #btn\n        igxButton=\"outlined\"\n        type=\"button\"\n        name=\"btnColumnPinning\" (click)=\"toggle(btn, ref, actions)\">\n        <igx-icon\n            family=\"default\"\n            [name]=\"!grid.pinnedColumnsCount ? 'unpin-left' : 'pin-left'\">\n        </igx-icon>\n        <span>{{ grid.pinnedColumnsCount }}</span>\n        <span>{{ buttonText }}</span>\n    </button>\n    <igx-column-actions #actions igxColumnPinning igxToggle (opened)=\"focusSearch(ref.element)\" #ref=\"toggle\"\n        [grid]=\"grid\" [title]=\"title || grid?.resourceStrings.igx_grid_toolbar_pinning_title\"\n        [filterColumnsPrompt]=\"prompt || grid?.resourceStrings.igx_grid_toolbar_actions_filter_prompt\"\n        [hideFilter]=\"hideFilter\" [filterCriteria]=\"filterCriteria\" [columnDisplayOrder]=\"columnDisplayOrder\" [columnsAreaMaxHeight]=\"columnsAreaMaxHeight\"\n        [uncheckAllText]=\"uncheckAllText\" [checkAllText]=\"checkAllText\" [indentation]=\"indentetion\">\n    </igx-column-actions>\n</ng-container>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "component", type: IgxColumnActionsComponent, selector: "igx-column-actions", inputs: ["grid", "indentation", "columnsAreaMaxHeight", "hideFilter", "title", "filterColumnsPrompt", "filterCriteria", "columnDisplayOrder", "uncheckAllText", "checkAllText", "id"], outputs: ["columnToggled"] }, { kind: "directive", type: IgxColumnPinningDirective, selector: "[igxColumnPinning]" }, { kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: IgxGridToolbarPinningComponent, decorators: [{
            type: Component,
            args: [{ selector: 'igx-grid-toolbar-pinning', standalone: true, imports: [NgIf, IgxButtonDirective, IgxIconComponent, IgxColumnActionsComponent, IgxColumnPinningDirective, IgxToggleDirective, AsyncPipe], template: "<ng-container *ngIf=\"grid.rendered$ | async\">\n    <button\n        [title]=\"grid?.resourceStrings.igx_grid_toolbar_pinning_button_tooltip\"\n        #btn\n        igxButton=\"outlined\"\n        type=\"button\"\n        name=\"btnColumnPinning\" (click)=\"toggle(btn, ref, actions)\">\n        <igx-icon\n            family=\"default\"\n            [name]=\"!grid.pinnedColumnsCount ? 'unpin-left' : 'pin-left'\">\n        </igx-icon>\n        <span>{{ grid.pinnedColumnsCount }}</span>\n        <span>{{ buttonText }}</span>\n    </button>\n    <igx-column-actions #actions igxColumnPinning igxToggle (opened)=\"focusSearch(ref.element)\" #ref=\"toggle\"\n        [grid]=\"grid\" [title]=\"title || grid?.resourceStrings.igx_grid_toolbar_pinning_title\"\n        [filterColumnsPrompt]=\"prompt || grid?.resourceStrings.igx_grid_toolbar_actions_filter_prompt\"\n        [hideFilter]=\"hideFilter\" [filterCriteria]=\"filterCriteria\" [columnDisplayOrder]=\"columnDisplayOrder\" [columnsAreaMaxHeight]=\"columnsAreaMaxHeight\"\n        [uncheckAllText]=\"uncheckAllText\" [checkAllText]=\"checkAllText\" [indentation]=\"indentetion\">\n    </igx-column-actions>\n</ng-container>\n" }]
        }], propDecorators: { content: [{
                type: ViewChild,
                args: [IgxColumnPinningDirective, { read: IgxColumnActionsComponent }]
            }] } });
//# sourceMappingURL=data:application/json;base64, 