/**
 * @fileoverview added by tsickle
 * Generated from: dropdown/dropdown.component.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/*!
 * Copyright 2020 VMware, Inc.
 * SPDX-License-Identifier: BSD-2-Clause
 */
import { Component, Input } from '@angular/core';
import { TextIcon } from '../common/interfaces';
import { TooltipSize } from '../lib/directives';
/**
 * Object representing an item of the dropdown
 * @record
 * @template T
 */
function DropdownItem() { }
if (false) {
    /**
     * The i18n key or a translated string for contents of a action button
     * @type {?|undefined}
     */
    DropdownItem.prototype.textKey;
    /**
     * List of items that will be grouped under this item
     * @type {?|undefined}
     */
    DropdownItem.prototype.children;
    /**
     * The Clarity icon of the contextual button that is displayed if the button is featured.
     * @type {?|undefined}
     */
    DropdownItem.prototype.icon;
    /**
     * To mark if the {\@link #ActionItem.textKey} has to be translated or not
     * @type {?|undefined}
     */
    DropdownItem.prototype.isTranslatable;
    /**
     * Css class of the dropdown item. Must be unique among all dropdown items within the dropdown items list
     * @type {?|undefined}
     */
    DropdownItem.prototype.class;
    /**
     * To add separators between groups of dropdown items
     * @type {?|undefined}
     */
    DropdownItem.prototype.isSeparator;
    /**
     * This is the busy state for the menu item. Used by extension actions of plugins
     * @type {?|undefined}
     */
    DropdownItem.prototype.busy;
}
/**
 * Dumb component used for displaying nested drop downs
 * @template T
 */
var DropdownComponent = /** @class */ (function () {
    function DropdownComponent() {
        /**
         * If a icon should be displayed inside contextual buttons
         */
        this.shouldShowIcon = (TextIcon.ICON & this.dropdownItemContents) === TextIcon.ICON;
        /**
         * If a text should be displayed inside contextual buttons
         */
        this.shouldShowText = (TextIcon.TEXT & this.dropdownItemContents) === TextIcon.TEXT;
        /**
         * If the contextual buttons with icons should have a tooltip
         */
        this.shouldShowTooltip = this.dropdownItemContents === TextIcon.ICON;
        /**
         * Default configuration for vcdShowClippedText directive
         */
        this.clipTextConfig = {
            mouseoutDelay: 0,
            size: TooltipSize.md,
            disabled: false,
        };
        /**
         * Text Content of the button that opens the root dropdown when clicked
         */
        this.dropdownTriggerBtnTxt = 'vcd.cc.action.menu.actions';
        /**
         * Icon shown in the button that opens the root dropdown when clicked
         */
        this.dropdownTriggerBtnIcon = 'ellipsis-horizontal';
        /**
         * The position of all the nested dropdowns {\@link clrPosition}. Default is 'bottom-left'
         */
        this.nestedDropdownPosition = 'right-top';
        /**
         * Used for displaying different button contents in the root dropdown trigger button vs nested dropdown trigger button
         */
        this.isNestedDropdown = false;
        this._dropdownItemContents = TextIcon.TEXT;
    }
    Object.defineProperty(DropdownComponent.prototype, "dropdownItemContents", {
        get: /**
         * @return {?}
         */
        function () {
            return this._dropdownItemContents;
        },
        /**
         * Decides what goes into the action buttons
         * @param textIcon An enum that describes the possible ways to display the button title
         */
        set: /**
         * Decides what goes into the action buttons
         * @param {?} textIcon An enum that describes the possible ways to display the button title
         * @return {?}
         */
        function (textIcon) {
            this.shouldShowIcon = (TextIcon.ICON & textIcon) === TextIcon.ICON;
            this.shouldShowText = (TextIcon.TEXT & textIcon) === TextIcon.TEXT;
            this.shouldShowTooltip = textIcon === TextIcon.ICON;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(DropdownComponent.prototype, "items", {
        get: /**
         * @return {?}
         */
        function () {
            return this._items;
        },
        /**
         * Nested list of dropdown objects
         */
        set: /**
         * Nested list of dropdown objects
         * @param {?} items
         * @return {?}
         */
        function (items) {
            this._items = this.flattenNestedItemsWithSingleChild(items);
        },
        enumerable: true,
        configurable: true
    });
    /**
     * @private
     * @param {?} items
     * @return {?}
     */
    DropdownComponent.prototype.flattenNestedItemsWithSingleChild = /**
     * @private
     * @param {?} items
     * @return {?}
     */
    function (items) {
        var _this = this;
        items.forEach((/**
         * @param {?} item
         * @return {?}
         */
        function (item) {
            // Flatten out the dropdowns with single children at each level of dropdown
            _this.flattenItemsWithSingleChild(items);
            if (item.children) {
                // Repeat the same for other nested levels
                _this.flattenNestedItemsWithSingleChild(item.children);
            }
        }));
        return items;
    };
    /**
     * @private
     * @param {?} items
     * @return {?}
     */
    DropdownComponent.prototype.flattenItemsWithSingleChild = /**
     * @private
     * @param {?} items
     * @return {?}
     */
    function (items) {
        /** @type {?} */
        var singleChildItemIndices = [];
        items.forEach((/**
         * @param {?} item
         * @param {?} index
         * @return {?}
         */
        function (item, index) {
            // Collect the indices of single child items
            if (item.children && item.children.length === 1) {
                singleChildItemIndices.push(index);
            }
        }));
        singleChildItemIndices.forEach((/**
         * @param {?} singleChildItemIndex
         * @return {?}
         */
        function (singleChildItemIndex) {
            // Delete them from the original list and add their children to the beginning of the current list
            /** @type {?} */
            var singleChildItem = items.splice(singleChildItemIndex, 1).pop();
            items.unshift(singleChildItem.children[0]);
        }));
    };
    /**
     * To check in the HTML, if a dropdown item of separator type should be used to add a separator item in the dropdown
     * This is required because,
     * 1. As each item decides its own availability, some groups may become empty and we collapse separators before them
     * 2. A separator is not required if it is the first item in the dropdown list
     * @param index Position of the dropdown item in the dropdown list
     * @param currentItem The current item in the list that is being iterated over
     */
    /**
     * To check in the HTML, if a dropdown item of separator type should be used to add a separator item in the dropdown
     * This is required because,
     * 1. As each item decides its own availability, some groups may become empty and we collapse separators before them
     * 2. A separator is not required if it is the first item in the dropdown list
     * @param {?} index Position of the dropdown item in the dropdown list
     * @param {?} currentItem The current item in the list that is being iterated over
     * @return {?}
     */
    DropdownComponent.prototype.shouldRenderAsSeparator = /**
     * To check in the HTML, if a dropdown item of separator type should be used to add a separator item in the dropdown
     * This is required because,
     * 1. As each item decides its own availability, some groups may become empty and we collapse separators before them
     * 2. A separator is not required if it is the first item in the dropdown list
     * @param {?} index Position of the dropdown item in the dropdown list
     * @param {?} currentItem The current item in the list that is being iterated over
     * @return {?}
     */
    function (index, currentItem) {
        /** @type {?} */
        var nextItem = this.items[index + 1];
        return index > 0 && currentItem.isSeparator && !!nextItem && !nextItem.isSeparator;
    };
    DropdownComponent.decorators = [
        { type: Component, args: [{
                    selector: 'vcd-dropdown',
                    template: "<clr-dropdown vcdDynamicDropdown class=\"nested-dropdown\">\n    <button\n        [ngClass]=\"[\n            dropdownTriggerBtnTxt ? 'btn btn-link' : '',\n            !isNestedDropdown ? 'first-dropdown-toggle' : '',\n            dropdownTriggerButtonClassName ? dropdownTriggerButtonClassName : ''\n        ]\"\n        clrDropdownTrigger\n        [vcdShowClippedText]=\"clipTextConfig\"\n        [disabled]=\"isDropdownDisabled\"\n    >\n        <ng-container *ngIf=\"dropdownTriggerBtnTxt\">\n            {{ dropdownTriggerBtnTxt }}\n            <clr-icon *ngIf=\"!isNestedDropdown\" shape=\"caret down\"></clr-icon>\n        </ng-container>\n        <clr-icon *ngIf=\"!dropdownTriggerBtnTxt\" [attr.shape]=\"dropdownTriggerBtnIcon\"></clr-icon>\n    </button>\n\n    <ng-container *ngIf=\"!isDropdownDisabled\">\n        <clr-dropdown-menu\n            class=\"nested-dropdown-menu\"\n            clrPosition=\"{{ isNestedDropdown ? nestedDropdownPosition : dropdownPosition }}\"\n            *clrIfOpen\n        >\n            <ng-container *ngFor=\"let action of items; let i = index; trackBy: trackByFunction\">\n                <div\n                    *ngIf=\"shouldRenderAsSeparator(i, action)\"\n                    class=\"dropdown-divider\"\n                    role=\"separator\"\n                    aria-hidden=\"true\"\n                ></div>\n\n                <ng-container *ngIf=\"!action.isSeparator && action.children && action.children.length\">\n                    <vcd-dropdown\n                        [items]=\"action.children\"\n                        [dropdownTriggerBtnTxt]=\"\n                            action.isTranslatable === false ? action.textKey : (action.textKey | translate)\n                        \"\n                        [dropdownTriggerButtonClassName]=\"action.class\"\n                        [nestedDropdownPosition]=\"nestedDropdownPosition\"\n                        [isNestedDropdown]=\"true\"\n                        [onItemClickedCb]=\"onItemClickedCb\"\n                        [isItemDisabledCb]=\"isItemDisabledCb\"\n                        [trackByFunction]=\"trackByFunction\"\n                        [dropdownItemContents]=\"dropdownItemContents\"\n                    ></vcd-dropdown>\n                </ng-container>\n\n                <ng-container *ngIf=\"!action.isSeparator && !action.children\">\n                    <button\n                        [ngClass]=\"[\n                            action.class ? action.class : '',\n                            shouldShowIcon ? 'btn-icon' : '',\n                            'btn',\n                            'btn-link'\n                        ]\"\n                        clrDropdownItem\n                        (click)=\"onItemClickedCb(action)\"\n                        [disabled]=\"isItemDisabledCb(action)\"\n                    >\n                        <ng-container *ngIf=\"shouldShowText\">{{\n                            action.isTranslatable === false ? action.textKey : (action.textKey | translate)\n                        }}</ng-container>\n\n                        <a *ngIf=\"shouldShowIcon\" role=\"tooltip\" aria-haspopup=\"true\" class=\"tooltip tooltip-sm\">\n                            <clr-icon size=\"1em\" [attr.shape]=\"action.icon\"></clr-icon>\n                            <span class=\"tooltip-content\" *ngIf=\"shouldShowTooltip\">{{\n                                action.textKey | translate\n                            }}</span>\n                        </a>\n                    </button>\n                </ng-container>\n            </ng-container>\n        </clr-dropdown-menu>\n    </ng-container>\n</clr-dropdown>\n",
                    styles: [".nested-dropdown-menu ::ng-deep .nested-dropdown{display:block;white-space:nowrap;max-width:15rem}"]
                }] }
    ];
    DropdownComponent.propDecorators = {
        dropdownTriggerBtnTxt: [{ type: Input }],
        dropdownTriggerBtnIcon: [{ type: Input }],
        trackByFunction: [{ type: Input }],
        dropdownPosition: [{ type: Input }],
        nestedDropdownPosition: [{ type: Input }],
        onItemClickedCb: [{ type: Input }],
        isItemDisabledCb: [{ type: Input }],
        isNestedDropdown: [{ type: Input }],
        isDropdownDisabled: [{ type: Input }],
        dropdownItemContents: [{ type: Input }],
        items: [{ type: Input }],
        dropdownTriggerButtonClassName: [{ type: Input }]
    };
    return DropdownComponent;
}());
export { DropdownComponent };
if (false) {
    /**
     * If a icon should be displayed inside contextual buttons
     * @type {?}
     */
    DropdownComponent.prototype.shouldShowIcon;
    /**
     * If a text should be displayed inside contextual buttons
     * @type {?}
     */
    DropdownComponent.prototype.shouldShowText;
    /**
     * If the contextual buttons with icons should have a tooltip
     * @type {?}
     */
    DropdownComponent.prototype.shouldShowTooltip;
    /**
     * Default configuration for vcdShowClippedText directive
     * @type {?}
     */
    DropdownComponent.prototype.clipTextConfig;
    /**
     * Text Content of the button that opens the root dropdown when clicked
     * @type {?}
     */
    DropdownComponent.prototype.dropdownTriggerBtnTxt;
    /**
     * Icon shown in the button that opens the root dropdown when clicked
     * @type {?}
     */
    DropdownComponent.prototype.dropdownTriggerBtnIcon;
    /**
     * The {\@link ngForTrackBy} method used for rendering of a dropdown actions or for rendering nested drop downs
     * NOTE: Without this, nested drop downs don't get rendered on the screen
     * @type {?}
     */
    DropdownComponent.prototype.trackByFunction;
    /**
     * The position the root dropdown with respect to root dropdown trigger button. Refer to {\@link clrPosition} for it's values
     * @type {?}
     */
    DropdownComponent.prototype.dropdownPosition;
    /**
     * The position of all the nested dropdowns {\@link clrPosition}. Default is 'bottom-left'
     * @type {?}
     */
    DropdownComponent.prototype.nestedDropdownPosition;
    /**
     * Dropdown item click handler
     * @type {?}
     */
    DropdownComponent.prototype.onItemClickedCb;
    /**
     * Method to calculate disabled state of an item
     * @type {?}
     */
    DropdownComponent.prototype.isItemDisabledCb;
    /**
     * Used for displaying different button contents in the root dropdown trigger button vs nested dropdown trigger button
     * @type {?}
     */
    DropdownComponent.prototype.isNestedDropdown;
    /** @type {?} */
    DropdownComponent.prototype.isDropdownDisabled;
    /**
     * @type {?}
     * @private
     */
    DropdownComponent.prototype._dropdownItemContents;
    /**
     * @type {?}
     * @private
     */
    DropdownComponent.prototype._items;
    /**
     * Css class name added to the dropdown trigger buttons
     * @type {?}
     */
    DropdownComponent.prototype.dropdownTriggerButtonClassName;
}
//# sourceMappingURL=data:application/json;base64, 