// © 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 { ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, Output, TemplateRef, ViewChild, ViewEncapsulation, } from "@angular/core";
import * as i0 from "@angular/core";
import * as i1 from "../../icon/icon.component";
import * as i2 from "@angular/common";
import * as i3 from "../../tooltip/tooltip.directive";
/**
 * @ignore
 */
export class ChipComponent {
    constructor(host, cdRef) {
        this.host = host;
        this.cdRef = cdRef;
        /**
         * Event that is fired when single item is cleared (by clicking on remove icon).
         */
        this.remove = new EventEmitter();
    }
    ngAfterViewInit() {
        this.isContentProjected = Boolean(this.contentTemplate.createEmbeddedView(undefined).rootNodes.length);
        this.cdRef.detectChanges();
    }
    onRemove() {
        this.remove.emit();
    }
}
ChipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ChipComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
ChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ChipComponent, selector: "nui-chip", inputs: { item: "item", closeButtonTooltip: "closeButtonTooltip", customClass: "customClass" }, outputs: { remove: "remove" }, host: { attributes: { "role": "listitem" }, classAttribute: "nui-chip" }, viewQueries: [{ propertyName: "contentTemplate", first: true, predicate: ["projection"], descendants: true }], ngImport: i0, template: "<div class=\"nui-chip__value\" [ngClass]=\"customClass\">\n    <span\n        class=\"nui-chip__value-name\"\n        [title]=\"!isContentProjected ? item?.label : ''\"\n        [ngClass]=\"{ projected: isContentProjected }\"\n    >\n        <ng-container *ngIf=\"isContentProjected; else itemLabel\">\n            <ng-container *ngTemplateOutlet=\"projection\"></ng-container>\n        </ng-container>\n    </span>\n    <nui-icon\n        (click)=\"onRemove()\"\n        [nuiTooltip]=\"closeButtonTooltip\"\n        icon=\"remove\"\n        iconSize=\"small\"\n        cssClass=\"nui-chip__value-remove\"\n    ></nui-icon>\n</div>\n\n<ng-template #projection><ng-content></ng-content></ng-template>\n<ng-template #itemLabel>{{ item?.label }}</ng-template>\n", styles: [".nui .nui-chip .nui-tag{padding:0 10px;display:inline-flex;align-items:center;outline:none;margin-right:1px;box-sizing:border-box;height:18px;border-radius:9px;font-size:11px;border:1px solid gray;border-color:var(--gray,#d5d5d5)}.nui .nui-chip .nui-tag-default{background:var(--nui-color-bg-accordion_header,rgba(17, 17, 17, .06))}.nui .nui-chip .nui-tag-info{background-color:var(--nui-color-semantic-info,#1c8eb1)}.nui .nui-chip .nui-tag-ok{background-color:var(--nui-color-semantic-ok,#00a753)}.nui .nui-chip .nui-tag-warning{background-color:var(--nui-color-semantic-warning,#fec405)}.nui .nui-chip .nui-tag-critical{background-color:var(--nui-color-semantic-critical,#dd2c00)}.nui .nui-chip .nui-tag-text-light{color:var(--nui-color-text-light,#fff)}.nui .nui-chip .nui-tag-with-border-info{background:var(--nui-color-semantic-info-bg,#e8f4f7);border-color:var(--nui-color-line-info,#1c8eb1)}.nui .nui-chip .nui-tag-with-border-ok{background:var(--nui-color-semantic-ok-bg,#e6f6ee);border-color:var(--nui-color-line-ok,#00a753)}.nui .nui-chip .nui-tag-with-border-warning{background:var(--nui-color-semantic-warning-bg,#fff9e6);border-color:var(--nui-color-line-warning,#fec405)}.nui .nui-chip .nui-tag-with-border-critical{background:var(--nui-color-semantic-critical-bg,#fceae6);border-color:var(--nui-color-line-critical,#dd2c00)}.nui .nui-chip .nui-tag-with-hover-styles.nui-tag:hover{background-color:var(--nui-color-bg-accordion_header,rgba(17, 17, 17, .06))}.nui .nui-chip .nui-tag-with-hover-styles.nui-tag-default:hover{background-color:var(--nui-color-bg-accordion_header-hover,rgba(17, 17, 17, .11))}.nui .nui-chip .nui-tag-with-hover-styles.nui-tag-info:hover{background-color:var(--nui-color-semantic-info-hover,#19809f)}.nui .nui-chip .nui-tag-with-hover-styles.nui-tag-ok:hover{background-color:var(--nui-color-semantic-ok-hover,#00964b)}.nui .nui-chip .nui-tag-with-hover-styles.nui-tag-warning:hover{background-color:var(--nui-color-semantic-warning-hover,#e5b005)}.nui .nui-chip .nui-tag-with-hover-styles.nui-tag-critical:hover{background-color:var(--nui-color-semantic-critical-hover,#c72800)}.nui .nui-chip .nui-tag-with-hover-styles.nui-tag-with-border-info:hover{background-color:var(--nui-color-semantic-info-bg-hover,#d2e8ef);border-color:var(--nui-color-semantic-info-hover,#19809f)}.nui .nui-chip .nui-tag-with-hover-styles.nui-tag-with-border-ok:hover{background-color:var(--nui-color-semantic-ok-bg-hover,#cceddd);border-color:var(--nui-color-semantic-ok-hover,#00964b)}.nui .nui-chip .nui-tag-with-hover-styles.nui-tag-with-border-warning:hover{background-color:var(--nui-color-semantic-warning-bg-hover,#fff3cd);border-color:var(--nui-color-semantic-warning-hover,#e5b005)}.nui .nui-chip .nui-tag-with-hover-styles.nui-tag-with-border-critical:hover{background-color:var(--nui-color-semantic-critical-bg-hover,#f8d5cc);border-color:var(--nui-color-semantic-critical-hover,#c72800)}.nui .nui-chip .nui-tag-with-icon nui-icon{padding-right:6px}.nui .nui-chip__value{padding:0 10px;display:inline-flex;align-items:center;outline:none;margin-right:1px;box-sizing:border-box;height:18px;border-radius:9px;font-size:11px;border:1px solid gray;border-color:var(--gray,#d5d5d5);border:none;background-color:var(--nui-color-bg-accordion_header,rgba(17, 17, 17, .06))}.nui .nui-chip__value:hover:not([class*=\"nui-tag-\"]){background-color:var(--nui-color-bg-accordion_header-hover,rgba(17, 17, 17, .11))}.nui .nui-chip__value-name{font-size:11px;max-width:200px;white-space:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;text-overflow:ellipsis}.nui .nui-chip__value-name.projected{display:flex;align-items:center}.nui .nui-chip__value.unlimited-width .nui-chip__value-name{max-width:unset}.nui .nui-chip__value-remove{cursor:pointer;margin:0 0 0 5px}.nui .nui-chip__value-remove svg *{fill:var(--nui-color-icon-highlight,#111)}.nui .nui-chip__value.nui-tag-text-light .nui-chip__value-remove svg *{fill:var(--nui-color-text-light,#fff)}.nui .nui-chip__value-drag{display:none}.nui .nui-chips__vertical .nui-chip__value{display:flex;margin-top:1px;margin-right:0}.nui .nui-chips__vertical .nui-chip__value-name{flex:auto}.nui .nui-chips__vertical .nui-chip__value-remove{float:right}\n"], components: [{ type: i1.IconComponent, selector: "nui-icon", inputs: ["iconColor", "brushType", "iconHoverColor", "iconSize", "cssClass", "fillContainer", "status", "childStatus", "icon", "counter"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.TooltipDirective, selector: "[nuiTooltip]", inputs: ["tooltipPlacement", "nuiTooltipDisabled", "nuiTooltip"], exportAs: ["nuiTooltip"] }], encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ChipComponent, decorators: [{
            type: Component,
            args: [{ selector: "nui-chip", encapsulation: ViewEncapsulation.None, host: {
                        class: "nui-chip",
                        role: "listitem",
                    }, template: "<div class=\"nui-chip__value\" [ngClass]=\"customClass\">\n    <span\n        class=\"nui-chip__value-name\"\n        [title]=\"!isContentProjected ? item?.label : ''\"\n        [ngClass]=\"{ projected: isContentProjected }\"\n    >\n        <ng-container *ngIf=\"isContentProjected; else itemLabel\">\n            <ng-container *ngTemplateOutlet=\"projection\"></ng-container>\n        </ng-container>\n    </span>\n    <nui-icon\n        (click)=\"onRemove()\"\n        [nuiTooltip]=\"closeButtonTooltip\"\n        icon=\"remove\"\n        iconSize=\"small\"\n        cssClass=\"nui-chip__value-remove\"\n    ></nui-icon>\n</div>\n\n<ng-template #projection><ng-content></ng-content></ng-template>\n<ng-template #itemLabel>{{ item?.label }}</ng-template>\n", styles: [".nui .nui-chip .nui-tag{padding:0 10px;display:inline-flex;align-items:center;outline:none;margin-right:1px;box-sizing:border-box;height:18px;border-radius:9px;font-size:11px;border:1px solid gray;border-color:var(--gray,#d5d5d5)}.nui .nui-chip .nui-tag-default{background:var(--nui-color-bg-accordion_header,rgba(17, 17, 17, .06))}.nui .nui-chip .nui-tag-info{background-color:var(--nui-color-semantic-info,#1c8eb1)}.nui .nui-chip .nui-tag-ok{background-color:var(--nui-color-semantic-ok,#00a753)}.nui .nui-chip .nui-tag-warning{background-color:var(--nui-color-semantic-warning,#fec405)}.nui .nui-chip .nui-tag-critical{background-color:var(--nui-color-semantic-critical,#dd2c00)}.nui .nui-chip .nui-tag-text-light{color:var(--nui-color-text-light,#fff)}.nui .nui-chip .nui-tag-with-border-info{background:var(--nui-color-semantic-info-bg,#e8f4f7);border-color:var(--nui-color-line-info,#1c8eb1)}.nui .nui-chip .nui-tag-with-border-ok{background:var(--nui-color-semantic-ok-bg,#e6f6ee);border-color:var(--nui-color-line-ok,#00a753)}.nui .nui-chip .nui-tag-with-border-warning{background:var(--nui-color-semantic-warning-bg,#fff9e6);border-color:var(--nui-color-line-warning,#fec405)}.nui .nui-chip .nui-tag-with-border-critical{background:var(--nui-color-semantic-critical-bg,#fceae6);border-color:var(--nui-color-line-critical,#dd2c00)}.nui .nui-chip .nui-tag-with-hover-styles.nui-tag:hover{background-color:var(--nui-color-bg-accordion_header,rgba(17, 17, 17, .06))}.nui .nui-chip .nui-tag-with-hover-styles.nui-tag-default:hover{background-color:var(--nui-color-bg-accordion_header-hover,rgba(17, 17, 17, .11))}.nui .nui-chip .nui-tag-with-hover-styles.nui-tag-info:hover{background-color:var(--nui-color-semantic-info-hover,#19809f)}.nui .nui-chip .nui-tag-with-hover-styles.nui-tag-ok:hover{background-color:var(--nui-color-semantic-ok-hover,#00964b)}.nui .nui-chip .nui-tag-with-hover-styles.nui-tag-warning:hover{background-color:var(--nui-color-semantic-warning-hover,#e5b005)}.nui .nui-chip .nui-tag-with-hover-styles.nui-tag-critical:hover{background-color:var(--nui-color-semantic-critical-hover,#c72800)}.nui .nui-chip .nui-tag-with-hover-styles.nui-tag-with-border-info:hover{background-color:var(--nui-color-semantic-info-bg-hover,#d2e8ef);border-color:var(--nui-color-semantic-info-hover,#19809f)}.nui .nui-chip .nui-tag-with-hover-styles.nui-tag-with-border-ok:hover{background-color:var(--nui-color-semantic-ok-bg-hover,#cceddd);border-color:var(--nui-color-semantic-ok-hover,#00964b)}.nui .nui-chip .nui-tag-with-hover-styles.nui-tag-with-border-warning:hover{background-color:var(--nui-color-semantic-warning-bg-hover,#fff3cd);border-color:var(--nui-color-semantic-warning-hover,#e5b005)}.nui .nui-chip .nui-tag-with-hover-styles.nui-tag-with-border-critical:hover{background-color:var(--nui-color-semantic-critical-bg-hover,#f8d5cc);border-color:var(--nui-color-semantic-critical-hover,#c72800)}.nui .nui-chip .nui-tag-with-icon nui-icon{padding-right:6px}.nui .nui-chip__value{padding:0 10px;display:inline-flex;align-items:center;outline:none;margin-right:1px;box-sizing:border-box;height:18px;border-radius:9px;font-size:11px;border:1px solid gray;border-color:var(--gray,#d5d5d5);border:none;background-color:var(--nui-color-bg-accordion_header,rgba(17, 17, 17, .06))}.nui .nui-chip__value:hover:not([class*=\"nui-tag-\"]){background-color:var(--nui-color-bg-accordion_header-hover,rgba(17, 17, 17, .11))}.nui .nui-chip__value-name{font-size:11px;max-width:200px;white-space:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;text-overflow:ellipsis}.nui .nui-chip__value-name.projected{display:flex;align-items:center}.nui .nui-chip__value.unlimited-width .nui-chip__value-name{max-width:unset}.nui .nui-chip__value-remove{cursor:pointer;margin:0 0 0 5px}.nui .nui-chip__value-remove svg *{fill:var(--nui-color-icon-highlight,#111)}.nui .nui-chip__value.nui-tag-text-light .nui-chip__value-remove svg *{fill:var(--nui-color-text-light,#fff)}.nui .nui-chip__value-drag{display:none}.nui .nui-chips__vertical .nui-chip__value{display:flex;margin-top:1px;margin-right:0}.nui .nui-chips__vertical .nui-chip__value-name{flex:auto}.nui .nui-chips__vertical .nui-chip__value-remove{float:right}\n"] }]
        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { item: [{
                type: Input
            }], closeButtonTooltip: [{
                type: Input
            }], customClass: [{
                type: Input
            }], remove: [{
                type: Output
            }], contentTemplate: [{
                type: ViewChild,
                args: ["projection"]
            }] } });
//# sourceMappingURL=data:application/json;base64, 