// © 2022 SolarWinds Worldwide, LLC. All rights reserved.
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
//  of this software and associated documentation files (the "Software"), to
//  deal in the Software without restriction, including without limitation the
//  rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
//  sell copies of the Software, and to permit persons to whom the Software is
//  furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
//  all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
//  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
//  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
//  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
//  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
//  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
//  THE SOFTWARE.
import { Component, ContentChild, ElementRef, EventEmitter, HostListener, Input, NgZone, Output, QueryList, ViewChild, ViewChildren, ViewEncapsulation, } from "@angular/core";
import _isEmpty from "lodash/isEmpty";
import _size from "lodash/size";
import { Subject } from "rxjs";
import { takeUntil } from "rxjs/operators";
import { ChipsOverflowService } from "./chips-overflow.service";
import * as i0 from "@angular/core";
import * as i1 from "./chips-overflow.service";
import * as i2 from "@angular/common";
import * as i3 from "./chip/chip.component";
// <example-url>./../examples/index.html#/chips</example-url>
/**
 * Control used to list groups of selected options (former ng1 nui-chiclets component).
 *
 *  __Usage:__
 *
 * ```html
 * <nui-chips [autoHide]="false"
 *            [itemsSource]="itemsSource"
 *            [title]="title"
 *            [orientation]="'vertical'"
 *            [allowRemoveAll]="false"
 *            [removeAllLinkText]="clearAllText"
 *            (chipRemoved)="onRemove($event)"
 *            (removeAll)="onRemoveAll()">
 * </nui-chips>
 * ```
 *
 */
export class ChipsComponent {
    set clearAll(elem) {
        this.chipsOverflowService.clearAll = elem;
    }
    set overflowCounter(el) {
        this.chipsOverflowService.overflowCounter = el;
    }
    get role() {
        return this.getItemsCount() ? "list" : null;
    }
    constructor(zone, chipsOverflowService) {
        this.zone = zone;
        this.chipsOverflowService = chipsOverflowService;
        /**
         * Whether overflow mode turned on
         */
        this.overflow = false;
        /**
         * Limits chips lines if overflow mode
         */
        this.overflowLinesNumber = 1;
        /**
         * Flag for 'Clear all' link visibility.
         */
        this.allowRemoveAll = true;
        /**
         * Expression to determine if the component is hidden when 'itemsSource' is empty.
         */
        this.autoHide = true;
        /**
         * Event that is fired when single item is cleared (by clicking on item or its remove icon).
         * Event data passed contains object with item clicked and its parent group.
         */
        this.chipRemoved = new EventEmitter();
        /**
         * Event that is fired when 'Clear All' is clicked.
         */
        this.removeAll = new EventEmitter();
        /**
         * Emits overflowed chips if chips overflow
         */
        this.chipsOverflowed = new EventEmitter();
        this.destroy$ = new Subject();
    }
    ngOnChanges(changes) {
        if (changes.itemsSource) {
            this.chipsOverflowService.itemsSource =
                changes.itemsSource.currentValue;
        }
        if (changes.overflowLinesNumber) {
            this.chipsOverflowService.overflowLinesNumber =
                changes.overflowLinesNumber.currentValue;
        }
        if (changes.overflow && !changes.overflow.currentValue) {
            this.chipsOverflowService.onDestroy();
        }
    }
    ngOnInit() {
        this.removeAllLinkText = this.removeAllLinkText || $localize `Clear all`;
    }
    ngAfterViewInit() {
        if (this.overflow) {
            this.initChipsOverflow();
        }
    }
    /** Handles Popup on window resize */
    onWinResize() {
        if (this.overflow && this.getItemsCount()) {
            this.chipsOverflowService.handleOverflow();
        }
    }
    getItemsCount() {
        let count = _size(this.itemsSource.flatItems);
        if (!_isEmpty(this.itemsSource.groupedItems)) {
            count += (this.itemsSource.groupedItems || [])
                .map((group) => group.items.length)
                .reduce((sum, val) => sum + val);
        }
        return count;
    }
    onRemove(data) {
        this.chipRemoved.emit(data);
    }
    onRemoveAll(event) {
        this.removeAll.emit(event);
        event.preventDefault();
    }
    ngOnDestroy() {
        if (this.overflow) {
            this.chipsOverflowService.onDestroy();
        }
        this.destroy$.next();
        this.destroy$.complete();
    }
    initChipsOverflow() {
        this.chipsOverflowService.mainCell = this.mainCell;
        this.chipsOverflowService.nuiChips = this.nuiChips;
        this.chipsOverflowService.allChips = this.allChips;
        this.chipsOverflowService.itemsSource = this.itemsSource;
        this.chipsOverflowService.overflowLinesNumber =
            this.overflowLinesNumber;
        this.chipsOverflowService.init();
        this.chipsOverflowService.chipsOverflowed
            .pipe(takeUntil(this.destroy$))
            .subscribe((e) => {
            this.chipsOverflowed.emit(e);
            this.isOverflowed = Boolean(e.groupedItems?.length || e.flatItems?.length);
        });
    }
}
ChipsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: ChipsComponent, deps: [{ token: i0.NgZone }, { token: i1.ChipsOverflowService }], target: i0.ɵɵFactoryTarget.Component });
ChipsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: ChipsComponent, selector: "nui-chips", inputs: { overflow: "overflow", overflowLinesNumber: "overflowLinesNumber", allowRemoveAll: "allowRemoveAll", autoHide: "autoHide", removeAllLinkText: "removeAllLinkText", itemsSource: "itemsSource", orientation: "orientation", title: "title", customClass: "customClass" }, outputs: { chipRemoved: "chipRemoved", removeAll: "removeAll", chipsOverflowed: "chipsOverflowed" }, host: { listeners: { "window:resize": "onWinResize()" }, properties: { "attr.role": "role" } }, providers: [ChipsOverflowService], queries: [{ propertyName: "overflowCounter", first: true, predicate: ["overflowCounterLabel"], descendants: true }], viewQueries: [{ propertyName: "mainCell", first: true, predicate: ["chipsMainCell"], descendants: true }, { propertyName: "clearAll", first: true, predicate: ["clearAll"], descendants: true }, { propertyName: "nuiChips", first: true, predicate: ["nuiChips"], descendants: true }, { propertyName: "allChips", predicate: ["chipItem"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n    [style.display]=\"getItemsCount() !== 0 || !autoHide ? 'flex' : 'none'\"\n    #nuiChips\n    class=\"nui-chips media\"\n    [ngClass]=\"customClass\"\n    [class.nui-chips__vertical]=\"orientation === 'vertical'\"\n>\n    <h4\n        *ngIf=\"!!title && orientation === 'vertical'\"\n        class=\"nui-chips__title-cell\"\n    >\n        <span class=\"nui-chips__title\">{{ title }}:</span>\n        <span class=\"nui-chips__count\">({{ getItemsCount() }})</span>\n    </h4>\n    <div\n        class=\"nui-chips__main-cell\"\n        #chipsMainCell\n        [style.flex-grow]=\"isOverflowed ? 1 : 0\"\n    >\n        <ng-container *ngIf=\"itemsSource.flatItems?.length\">\n            <nui-chip\n                class=\"chip-flat\"\n                #chipItem\n                *ngFor=\"let flatItem of itemsSource.flatItems; let last = last\"\n                [customClass]=\"flatItem.customClass\"\n                [class.group-last]=\"last\"\n                [item]=\"flatItem\"\n                (remove)=\"onRemove({ item: flatItem, group: undefined })\"\n            ></nui-chip>\n        </ng-container>\n\n        <ng-container\n            *ngFor=\"let group of itemsSource.groupedItems; let lastGroup = last\"\n        >\n            <ng-container *ngIf=\"group.items?.length > 0\">\n                <div\n                    class=\"nui-chips__group-name\"\n                    [ngClass]=\"group.customClass\"\n                    #chipItem\n                >\n                    <div class=\"nui-chips__group-label\">\n                        {{ group.label }}\n                    </div>\n                </div>\n                <nui-chip\n                    #chipItem\n                    *ngFor=\"let groupItem of group.items; let last = last\"\n                    [customClass]=\"groupItem.customClass\"\n                    [class.group-last]=\"last && !lastGroup\"\n                    [item]=\"groupItem\"\n                    (remove)=\"onRemove({ item: groupItem, group: group })\"\n                ></nui-chip>\n            </ng-container>\n        </ng-container>\n        <ng-content select=\".nui-chips-overflowed\"></ng-content>\n    </div>\n\n    <div\n        class=\"nui-chips__clear-cell\"\n        #clearAll\n        *ngIf=\"allowRemoveAll && getItemsCount() > 0\"\n    >\n        <a href class=\"nui-chips__clear\" (click)=\"onRemoveAll($event)\">{{\n            removeAllLinkText\n        }}</a>\n    </div>\n</div>\n", styles: [".nui .nui-chips{display:flex;margin-top:15px;background-color:var(--nui-color-bg-light,#fff);padding:15px 15px 10px}.nui .nui-chips nui-chip,.nui .nui-chips .nui-chips__group-name{margin-bottom:5px}.nui .nui-chips:first-child{margin-top:0}.nui .nui-chips-overflowed__counter{font-size:11px;cursor:pointer}.nui .nui-chips .group-last .nui-chip__value{margin-right:5px}.nui .nui-chips__title-cell{white-space:nowrap;vertical-align:top;line-height:20px;padding:0 5px 5px 0;margin:0}.nui .nui-chips__main-cell{display:flex;flex-wrap:wrap;font-size:0}.nui .nui-chips__clear-cell{text-align:right;white-space:nowrap}.nui .nui-chips__group-name,.nui .nui-chips__group-values,.nui .nui-chips__clear{display:inline-block;font-size:11px;line-height:18px}.nui .nui-chips__group nui-chip:last-of-type .nui-chip__value{border-radius:0 3px 3px 0}.nui .nui-chips__group-label{line-height:14px;font-size:11px;font-weight:400;color:#1119;color:var(--nui-color-text-secondary,rgba(17, 17, 17, .6));white-space:nowrap;margin-right:1px;padding:0 10px;line-height:18px}.nui .nui-chips__group-values{cursor:pointer;margin-right:5px}.nui .nui-chips__group-values.nui .nui-chips__group-noname{margin-right:0}.nui .nui-chips__flat-values nui-chip:first-of-type .nui-chip__value{border-radius:3px 0 0 3px}.nui .nui-chips__flat-values nui-chip:last-of-type .nui-chip__value{border-radius:0 3px 3px 0}.nui .nui-chips__flat-values nui-chip:only-of-type .nui-chip__value{border-radius:3px}.nui .nui-chips__clear{vertical-align:top;cursor:pointer;margin-left:10px}.nui .nui-chips__clear:focus{outline:none;z-index:500;box-shadow:0 0 0 2px #00c4d280;border-radius:3px}.nui .nui-chips__vertical{padding:0;flex-wrap:wrap}.nui .nui-chips__vertical nui-chip,.nui .nui-chips__vertical .nui-chips__group-name{margin-bottom:0}.nui .nui-chips__vertical .group-last .nui-chip__value{margin-right:0;margin-bottom:5px}.nui .nui-chips__vertical .nui-chips__title-cell{order:1;flex-grow:1}.nui .nui-chips__vertical .nui-chips__flat-values nui-chip:first-of-type .nui-chip__value{border-radius:3px 3px 0 0}.nui .nui-chips__vertical .nui-chips__flat-values nui-chip:last-of-type .nui-chip__value{border-radius:0 0 3px 3px}.nui .nui-chips__vertical .nui-chips__flat-values nui-chip:only-of-type .nui-chip__value{border-radius:3px}.nui .nui-chips__vertical .nui-chips__main-cell{order:3;width:100%;display:flex;flex-direction:column}.nui .nui-chips__vertical .nui-chips__main-cell .nui-chips__flat-values{padding-bottom:5px}.nui .nui-chips__vertical .nui-chips__main-cell .nui-chips__group-name{width:100%;border-radius:3px 3px 0 0}.nui .nui-chips__vertical .nui-chips__main-cell .nui-chips__group-values{display:flex;width:100%;flex-direction:column}.nui .nui-chips__vertical .nui-chips__main-cell .nui-chips__group-values .nui-chips__value-remove{float:right}.nui .nui-chips__vertical .nui-chips__main-cell .nui-chips__group{display:block}.nui .nui-chips__vertical .nui-chips__main-cell .nui-chips__group nui-chip:last-of-type .nui-chip__value{border-radius:0 0 3px 3px}.nui .nui-chips__vertical .nui-chips__main-cell .nui-chips__group-name{display:block}.nui .nui-chips__vertical .nui-chips__main-cell nui-chip{width:100%}.nui .nui-chips__vertical .nui-chips__main-cell nui-chip .nui-chip__value-name{max-width:100%}.nui .nui-chips__vertical .nui-chips__clear{vertical-align:baseline}.nui .nui-chips__vertical .nui-chips__clear-cell{order:2}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.ChipComponent, selector: "nui-chip", inputs: ["item", "closeButtonTooltip", "customClass"], outputs: ["remove"] }], encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: ChipsComponent, decorators: [{
            type: Component,
            args: [{ selector: "nui-chips", encapsulation: ViewEncapsulation.None, providers: [ChipsOverflowService], host: { "[attr.role]": "role" }, template: "<div\n    [style.display]=\"getItemsCount() !== 0 || !autoHide ? 'flex' : 'none'\"\n    #nuiChips\n    class=\"nui-chips media\"\n    [ngClass]=\"customClass\"\n    [class.nui-chips__vertical]=\"orientation === 'vertical'\"\n>\n    <h4\n        *ngIf=\"!!title && orientation === 'vertical'\"\n        class=\"nui-chips__title-cell\"\n    >\n        <span class=\"nui-chips__title\">{{ title }}:</span>\n        <span class=\"nui-chips__count\">({{ getItemsCount() }})</span>\n    </h4>\n    <div\n        class=\"nui-chips__main-cell\"\n        #chipsMainCell\n        [style.flex-grow]=\"isOverflowed ? 1 : 0\"\n    >\n        <ng-container *ngIf=\"itemsSource.flatItems?.length\">\n            <nui-chip\n                class=\"chip-flat\"\n                #chipItem\n                *ngFor=\"let flatItem of itemsSource.flatItems; let last = last\"\n                [customClass]=\"flatItem.customClass\"\n                [class.group-last]=\"last\"\n                [item]=\"flatItem\"\n                (remove)=\"onRemove({ item: flatItem, group: undefined })\"\n            ></nui-chip>\n        </ng-container>\n\n        <ng-container\n            *ngFor=\"let group of itemsSource.groupedItems; let lastGroup = last\"\n        >\n            <ng-container *ngIf=\"group.items?.length > 0\">\n                <div\n                    class=\"nui-chips__group-name\"\n                    [ngClass]=\"group.customClass\"\n                    #chipItem\n                >\n                    <div class=\"nui-chips__group-label\">\n                        {{ group.label }}\n                    </div>\n                </div>\n                <nui-chip\n                    #chipItem\n                    *ngFor=\"let groupItem of group.items; let last = last\"\n                    [customClass]=\"groupItem.customClass\"\n                    [class.group-last]=\"last && !lastGroup\"\n                    [item]=\"groupItem\"\n                    (remove)=\"onRemove({ item: groupItem, group: group })\"\n                ></nui-chip>\n            </ng-container>\n        </ng-container>\n        <ng-content select=\".nui-chips-overflowed\"></ng-content>\n    </div>\n\n    <div\n        class=\"nui-chips__clear-cell\"\n        #clearAll\n        *ngIf=\"allowRemoveAll && getItemsCount() > 0\"\n    >\n        <a href class=\"nui-chips__clear\" (click)=\"onRemoveAll($event)\">{{\n            removeAllLinkText\n        }}</a>\n    </div>\n</div>\n", styles: [".nui .nui-chips{display:flex;margin-top:15px;background-color:var(--nui-color-bg-light,#fff);padding:15px 15px 10px}.nui .nui-chips nui-chip,.nui .nui-chips .nui-chips__group-name{margin-bottom:5px}.nui .nui-chips:first-child{margin-top:0}.nui .nui-chips-overflowed__counter{font-size:11px;cursor:pointer}.nui .nui-chips .group-last .nui-chip__value{margin-right:5px}.nui .nui-chips__title-cell{white-space:nowrap;vertical-align:top;line-height:20px;padding:0 5px 5px 0;margin:0}.nui .nui-chips__main-cell{display:flex;flex-wrap:wrap;font-size:0}.nui .nui-chips__clear-cell{text-align:right;white-space:nowrap}.nui .nui-chips__group-name,.nui .nui-chips__group-values,.nui .nui-chips__clear{display:inline-block;font-size:11px;line-height:18px}.nui .nui-chips__group nui-chip:last-of-type .nui-chip__value{border-radius:0 3px 3px 0}.nui .nui-chips__group-label{line-height:14px;font-size:11px;font-weight:400;color:#1119;color:var(--nui-color-text-secondary,rgba(17, 17, 17, .6));white-space:nowrap;margin-right:1px;padding:0 10px;line-height:18px}.nui .nui-chips__group-values{cursor:pointer;margin-right:5px}.nui .nui-chips__group-values.nui .nui-chips__group-noname{margin-right:0}.nui .nui-chips__flat-values nui-chip:first-of-type .nui-chip__value{border-radius:3px 0 0 3px}.nui .nui-chips__flat-values nui-chip:last-of-type .nui-chip__value{border-radius:0 3px 3px 0}.nui .nui-chips__flat-values nui-chip:only-of-type .nui-chip__value{border-radius:3px}.nui .nui-chips__clear{vertical-align:top;cursor:pointer;margin-left:10px}.nui .nui-chips__clear:focus{outline:none;z-index:500;box-shadow:0 0 0 2px #00c4d280;border-radius:3px}.nui .nui-chips__vertical{padding:0;flex-wrap:wrap}.nui .nui-chips__vertical nui-chip,.nui .nui-chips__vertical .nui-chips__group-name{margin-bottom:0}.nui .nui-chips__vertical .group-last .nui-chip__value{margin-right:0;margin-bottom:5px}.nui .nui-chips__vertical .nui-chips__title-cell{order:1;flex-grow:1}.nui .nui-chips__vertical .nui-chips__flat-values nui-chip:first-of-type .nui-chip__value{border-radius:3px 3px 0 0}.nui .nui-chips__vertical .nui-chips__flat-values nui-chip:last-of-type .nui-chip__value{border-radius:0 0 3px 3px}.nui .nui-chips__vertical .nui-chips__flat-values nui-chip:only-of-type .nui-chip__value{border-radius:3px}.nui .nui-chips__vertical .nui-chips__main-cell{order:3;width:100%;display:flex;flex-direction:column}.nui .nui-chips__vertical .nui-chips__main-cell .nui-chips__flat-values{padding-bottom:5px}.nui .nui-chips__vertical .nui-chips__main-cell .nui-chips__group-name{width:100%;border-radius:3px 3px 0 0}.nui .nui-chips__vertical .nui-chips__main-cell .nui-chips__group-values{display:flex;width:100%;flex-direction:column}.nui .nui-chips__vertical .nui-chips__main-cell .nui-chips__group-values .nui-chips__value-remove{float:right}.nui .nui-chips__vertical .nui-chips__main-cell .nui-chips__group{display:block}.nui .nui-chips__vertical .nui-chips__main-cell .nui-chips__group nui-chip:last-of-type .nui-chip__value{border-radius:0 0 3px 3px}.nui .nui-chips__vertical .nui-chips__main-cell .nui-chips__group-name{display:block}.nui .nui-chips__vertical .nui-chips__main-cell nui-chip{width:100%}.nui .nui-chips__vertical .nui-chips__main-cell nui-chip .nui-chip__value-name{max-width:100%}.nui .nui-chips__vertical .nui-chips__clear{vertical-align:baseline}.nui .nui-chips__vertical .nui-chips__clear-cell{order:2}\n"] }]
        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i1.ChipsOverflowService }]; }, propDecorators: { overflow: [{
                type: Input
            }], overflowLinesNumber: [{
                type: Input
            }], allowRemoveAll: [{
                type: Input
            }], autoHide: [{
                type: Input
            }], removeAllLinkText: [{
                type: Input
            }], itemsSource: [{
                type: Input
            }], orientation: [{
                type: Input
            }], title: [{
                type: Input
            }], customClass: [{
                type: Input
            }], chipRemoved: [{
                type: Output
            }], removeAll: [{
                type: Output
            }], chipsOverflowed: [{
                type: Output
            }], mainCell: [{
                type: ViewChild,
                args: ["chipsMainCell"]
            }], clearAll: [{
                type: ViewChild,
                args: ["clearAll"]
            }], nuiChips: [{
                type: ViewChild,
                args: ["nuiChips"]
            }], allChips: [{
                type: ViewChildren,
                args: ["chipItem"]
            }], overflowCounter: [{
                type: ContentChild,
                args: ["overflowCounterLabel"]
            }], onWinResize: [{
                type: HostListener,
                args: ["window:resize"]
            }] } });
//# sourceMappingURL=data:application/json;base64, 