// © 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, ViewChild, ViewEncapsulation, } from "@angular/core";
import { expandV2 } from "../../animations/expand";
import { KEYBOARD_CODE } from "../../constants/keycode.constants";
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "../icon/icon.component";
/**
 * <example-url>./../examples/index.html#/expander</example-url>
 */
export class ExpanderComponent {
    /**
     * Use this to have expander opened by default.
     */
    set open(value) {
        const previousValue = this.state === "expanded";
        if (previousValue !== value) {
            this.state = value ? "expanded" : "collapsed";
        }
    }
    get open() {
        return this.state === "expanded";
    }
    constructor(cdRef) {
        this.cdRef = cdRef;
        /**
         * Adds "disabled" attribute to expander
         */
        this.disabled = false;
        /**
         * Adds icon to expander's header
         */
        this.icon = "";
        /**
         * Adds title to expander's header
         */
        this.header = "";
        /**
         * Hides left dotted border of expander.
         */
        this.hideLeftBorder = false;
        /**
         * Is emitted when expander is expanded/collapsed
         */
        this.openChange = new EventEmitter();
        this.state = "collapsed";
        this.isCustomHeaderContentEmpty = false;
        this.actionKeys = [KEYBOARD_CODE.SPACE, KEYBOARD_CODE.ENTER].map(String);
    }
    ngAfterContentInit() {
        this.isCustomHeaderContentEmpty =
            this.customHeaderContent.nativeElement.childNodes.length === 0;
    }
    toggle() {
        if (!this.disabled) {
            this.open = !this.open;
            this.openChange.emit(this.open);
            this.cdRef.detectChanges();
        }
    }
    getIconColor() {
        return this.disabled ? "gray" : "primary-blue";
    }
    onKeyDown(event) {
        if (this.actionKeys.includes(event.code)) {
            if (event.target === event.currentTarget) {
                event.preventDefault();
                this.toggle();
            }
        }
    }
}
ExpanderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: ExpanderComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
ExpanderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: ExpanderComponent, selector: "nui-expander", inputs: { disabled: "disabled", icon: "icon", header: "header", hideLeftBorder: "hideLeftBorder", open: "open" }, outputs: { openChange: "openChange" }, viewQueries: [{ propertyName: "customHeaderContent", first: true, predicate: ["customHeaderContent"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"nui-expander\" [class.nui-expander--expanded]=\"state === 'expanded'\">\n    <div\n        class=\"nui-expander__header\"\n        tabindex=\"0\"\n        role=\"button\"\n        aria-label=\"Expander toggle\"\n        [attr.aria-expanded]=\"state === 'expanded'\"\n        [attr.aria-disabled]=\"disabled\"\n        [class.nui-expander__header--empty]=\"\n            !header && isCustomHeaderContentEmpty\n        \"\n        (keydown)=\"onKeyDown($event)\"\n        (click)=\"toggle()\"\n    >\n        <nui-icon\n            class=\"nui-expander__header-icon\"\n            [iconColor]=\"getIconColor()\"\n            aria-hidden=\"true\"\n            icon=\"{{ open ? 'triangle-down' : 'triangle-right' }}\"\n        ></nui-icon>\n        <div\n            class=\"nui-expander__header-content-wrapper\"\n            [class.nui-expander__custom-header--empty]=\"\n                isCustomHeaderContentEmpty\n            \"\n        >\n            <div\n                #customHeaderContent\n                class=\"nui-expander__custom-header\"\n                [class.nui-expander__custom-header--empty]=\"\n                    isCustomHeaderContentEmpty\n                \"\n            >\n                <ng-content select=\"[nuiExpanderHeader]\"></ng-content>\n            </div>\n            <div\n                class=\"nui-expander__header-content\"\n                *ngIf=\"isCustomHeaderContentEmpty\"\n                [class.nui-expander__header-content--with-icon]=\"!!icon\"\n            >\n                <nui-icon\n                    class=\"nui-expander__header-content-icon\"\n                    [icon]=\"icon\"\n                    *ngIf=\"!!icon\"\n                ></nui-icon>\n                <span class=\"nui-expander__header-title\">{{ header }}</span>\n            </div>\n        </div>\n    </div>\n    <div\n        class=\"nui-expander__body-wrapper\"\n        role=\"region\"\n        [attr.aria-label]=\"header || null\"\n    >\n        <div\n            class=\"nui-expander__body\"\n            [class.hide-left-border]=\"hideLeftBorder\"\n            *ngIf=\"open\"\n            @expandContent\n        >\n            <ng-content></ng-content>\n        </div>\n    </div>\n</div>\n", styles: [".nui-expander--expanded{padding-bottom:5px}.nui-expander__icon{align-items:center;align-self:flex-start;display:flex;flex-shrink:0;height:30px;justify-content:center;width:30px;margin-left:-7px}.nui-expander__header{align-items:center;border-radius:3px;cursor:pointer;display:flex;-webkit-user-select:none;-o-user-select:none;user-select:none}.nui-expander__header:hover{background-color:var(--nui-color-bg-transparent-hover,rgba(17, 17, 17, .05))}.nui-expander__header-title{white-space:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;text-overflow:ellipsis;line-height:18px;font-size:13px;font-weight:600;color:#111;color:var(--nui-color-text-default,#111)}.nui-expander__header-icon{align-items:center;align-self:flex-start;display:flex;flex-shrink:0;height:30px;justify-content:center;width:30px}.nui-expander__header-content{align-items:center;display:flex;flex-grow:2;justify-content:flex-start;padding-left:5px;min-width:0;padding-right:5px}.nui-expander__header-content-icon{align-items:center;align-self:flex-start;flex-shrink:0;height:30px;justify-content:center;width:30px}.nui-expander__header-content--with-icon{padding-left:0}.nui-expander__header-content-wrapper{display:flex;flex-grow:2;min-width:0;width:100%}.nui-expander__header.nui-expander__header--empty.nui-expander__header{display:inline-flex}.nui-expander__header.nui-expander__header--empty .nui-expander__header-content{padding-left:0;padding-right:0}.nui-expander__custom-header{width:100%}.nui-expander__custom-header--empty{display:flex;width:auto}.nui-expander__body{border:none;border-left:dotted 2px #d9d9d9;border-left:dotted 2px var(--nui-color-line-default, #d9d9d9);color:#111;color:var(--nui-color-text-default, #111);margin-left:14px;padding-left:14px}.nui-expander__body.hide-left-border{border-left:0}.nui-expander__body.ng-animating{overflow:hidden}.nui-expander__header:focus{outline:none;box-shadow:0 0 0 2px #00c4d280}.nui-expander p{margin:0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IconComponent, selector: "nui-icon", inputs: ["iconColor", "brushType", "iconHoverColor", "iconSize", "cssClass", "fillContainer", "status", "childStatus", "icon", "counter"] }], animations: [expandV2], encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: ExpanderComponent, decorators: [{
            type: Component,
            args: [{ selector: "nui-expander", animations: [expandV2], encapsulation: ViewEncapsulation.None, template: "<div class=\"nui-expander\" [class.nui-expander--expanded]=\"state === 'expanded'\">\n    <div\n        class=\"nui-expander__header\"\n        tabindex=\"0\"\n        role=\"button\"\n        aria-label=\"Expander toggle\"\n        [attr.aria-expanded]=\"state === 'expanded'\"\n        [attr.aria-disabled]=\"disabled\"\n        [class.nui-expander__header--empty]=\"\n            !header && isCustomHeaderContentEmpty\n        \"\n        (keydown)=\"onKeyDown($event)\"\n        (click)=\"toggle()\"\n    >\n        <nui-icon\n            class=\"nui-expander__header-icon\"\n            [iconColor]=\"getIconColor()\"\n            aria-hidden=\"true\"\n            icon=\"{{ open ? 'triangle-down' : 'triangle-right' }}\"\n        ></nui-icon>\n        <div\n            class=\"nui-expander__header-content-wrapper\"\n            [class.nui-expander__custom-header--empty]=\"\n                isCustomHeaderContentEmpty\n            \"\n        >\n            <div\n                #customHeaderContent\n                class=\"nui-expander__custom-header\"\n                [class.nui-expander__custom-header--empty]=\"\n                    isCustomHeaderContentEmpty\n                \"\n            >\n                <ng-content select=\"[nuiExpanderHeader]\"></ng-content>\n            </div>\n            <div\n                class=\"nui-expander__header-content\"\n                *ngIf=\"isCustomHeaderContentEmpty\"\n                [class.nui-expander__header-content--with-icon]=\"!!icon\"\n            >\n                <nui-icon\n                    class=\"nui-expander__header-content-icon\"\n                    [icon]=\"icon\"\n                    *ngIf=\"!!icon\"\n                ></nui-icon>\n                <span class=\"nui-expander__header-title\">{{ header }}</span>\n            </div>\n        </div>\n    </div>\n    <div\n        class=\"nui-expander__body-wrapper\"\n        role=\"region\"\n        [attr.aria-label]=\"header || null\"\n    >\n        <div\n            class=\"nui-expander__body\"\n            [class.hide-left-border]=\"hideLeftBorder\"\n            *ngIf=\"open\"\n            @expandContent\n        >\n            <ng-content></ng-content>\n        </div>\n    </div>\n</div>\n", styles: [".nui-expander--expanded{padding-bottom:5px}.nui-expander__icon{align-items:center;align-self:flex-start;display:flex;flex-shrink:0;height:30px;justify-content:center;width:30px;margin-left:-7px}.nui-expander__header{align-items:center;border-radius:3px;cursor:pointer;display:flex;-webkit-user-select:none;-o-user-select:none;user-select:none}.nui-expander__header:hover{background-color:var(--nui-color-bg-transparent-hover,rgba(17, 17, 17, .05))}.nui-expander__header-title{white-space:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;text-overflow:ellipsis;line-height:18px;font-size:13px;font-weight:600;color:#111;color:var(--nui-color-text-default,#111)}.nui-expander__header-icon{align-items:center;align-self:flex-start;display:flex;flex-shrink:0;height:30px;justify-content:center;width:30px}.nui-expander__header-content{align-items:center;display:flex;flex-grow:2;justify-content:flex-start;padding-left:5px;min-width:0;padding-right:5px}.nui-expander__header-content-icon{align-items:center;align-self:flex-start;flex-shrink:0;height:30px;justify-content:center;width:30px}.nui-expander__header-content--with-icon{padding-left:0}.nui-expander__header-content-wrapper{display:flex;flex-grow:2;min-width:0;width:100%}.nui-expander__header.nui-expander__header--empty.nui-expander__header{display:inline-flex}.nui-expander__header.nui-expander__header--empty .nui-expander__header-content{padding-left:0;padding-right:0}.nui-expander__custom-header{width:100%}.nui-expander__custom-header--empty{display:flex;width:auto}.nui-expander__body{border:none;border-left:dotted 2px #d9d9d9;border-left:dotted 2px var(--nui-color-line-default, #d9d9d9);color:#111;color:var(--nui-color-text-default, #111);margin-left:14px;padding-left:14px}.nui-expander__body.hide-left-border{border-left:0}.nui-expander__body.ng-animating{overflow:hidden}.nui-expander__header:focus{outline:none;box-shadow:0 0 0 2px #00c4d280}.nui-expander p{margin:0}\n"] }]
        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { disabled: [{
                type: Input
            }], icon: [{
                type: Input
            }], header: [{
                type: Input
            }], hideLeftBorder: [{
                type: Input
            }], open: [{
                type: Input
            }], openChange: [{
                type: Output
            }], customHeaderContent: [{
                type: ViewChild,
                args: ["customHeaderContent", { static: true }]
            }] } });
//# sourceMappingURL=data:application/json;base64, 