/**
 *
 * @ai-apps/angular v2.147.1-next.0 | side-panel.component.js
 *
 * Copyright 2014, 2022 IBM
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0

 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */


import { Component, EventEmitter, HostBinding, Input, Output, ViewEncapsulation, } from '@angular/core';
import { Close16, ChevronLeft16, ChevronRight16, OpenPanelLeft16, OpenPanelRight16, } from '@carbon/icons';
import { IconService } from 'carbon-components-angular';
import * as i0 from "@angular/core";
import * as i1 from "carbon-components-angular";
import * as i2 from "@angular/common";
function SidePanel_button_1__svg_svg_1_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵnamespaceSVG();
    i0.ɵɵelement(0, "svg", 6);
} }
function SidePanel_button_1__svg_svg_2_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵnamespaceSVG();
    i0.ɵɵelement(0, "svg", 7);
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext(2);
    i0.ɵɵproperty("ibmIcon", ctx_r2.closeIcon || "chevron--left");
} }
function SidePanel_button_1__svg_svg_3_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵnamespaceSVG();
    i0.ɵɵelement(0, "svg", 7);
} if (rf & 2) {
    const ctx_r3 = i0.ɵɵnextContext(2);
    i0.ɵɵproperty("ibmIcon", ctx_r3.closeIcon || "chevron--right");
} }
function SidePanel_button_1__svg_svg_4_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵnamespaceSVG();
    i0.ɵɵelement(0, "svg", 7);
} if (rf & 2) {
    const ctx_r4 = i0.ɵɵnextContext(2);
    i0.ɵɵproperty("ibmIcon", ctx_r4.drawerIcon || "open-panel--left");
} }
function SidePanel_button_1__svg_svg_5_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵnamespaceSVG();
    i0.ɵɵelement(0, "svg", 7);
} if (rf & 2) {
    const ctx_r5 = i0.ɵɵnextContext(2);
    i0.ɵɵproperty("ibmIcon", ctx_r5.drawerIcon || "open-panel--right");
} }
function SidePanel_button_1_Template(rf, ctx) { if (rf & 1) {
    const _r7 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "button", 3);
    i0.ɵɵlistener("click", function SidePanel_button_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r6 = i0.ɵɵnextContext(); return ctx_r6.close.emit(); });
    i0.ɵɵtemplate(1, SidePanel_button_1__svg_svg_1_Template, 1, 0, "svg", 4);
    i0.ɵɵtemplate(2, SidePanel_button_1__svg_svg_2_Template, 1, 1, "svg", 5);
    i0.ɵɵtemplate(3, SidePanel_button_1__svg_svg_3_Template, 1, 1, "svg", 5);
    i0.ɵɵtemplate(4, SidePanel_button_1__svg_svg_4_Template, 1, 1, "svg", 5);
    i0.ɵɵtemplate(5, SidePanel_button_1__svg_svg_5_Template, 1, 1, "svg", 5);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r0 = i0.ɵɵnextContext();
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngIf", ctx_r0.showClose && !ctx_r0.shouldShowDrawer);
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngIf", ctx_r0.shouldShowDrawer && ctx_r0.active && ctx_r0.side === "left");
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngIf", ctx_r0.shouldShowDrawer && ctx_r0.active && ctx_r0.side === "right");
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngIf", ctx_r0.shouldShowDrawer && !ctx_r0.active && ctx_r0.side === "left");
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngIf", ctx_r0.shouldShowDrawer && !ctx_r0.active && ctx_r0.side === "right");
} }
const _c0 = function (a0, a1) { return { "iot--side-panel__left": a0, "iot--side-panel__right": a1 }; };
const _c1 = ["*"];
/**
 *
 * [See demo](../../?path=/story/components-side-panel--basic)
 *
 * html:
 * ```
 * <ai-side-panel>
 *	options
 * </ai-side-panel>
 * ```
 */
export class SidePanel {
    constructor(iconService) {
        this.iconService = iconService;
        this.sidePanelClass = true;
        this.showClose = true;
        this.showDrawer = false;
        this.variation = 'inline';
        /**
         * Activates the panel when set to `true`, by sliding it in or over.
         *
         * Has no effect for `variation` `inline`
         */
        this.active = false;
        this.side = 'left';
        this.close = new EventEmitter();
    }
    get sidePanelSlideInClass() {
        return this.variation === 'slide-in';
    }
    get sidePanelInlineClass() {
        return this.variation === 'inline';
    }
    get sidePanelSlideOverClass() {
        return this.variation === 'slide-over';
    }
    get sidePanelRightClass() {
        return this.side === 'right';
    }
    get sidePanelDrawerClass() {
        return this.showDrawer && !this.active;
    }
    get shouldShowDrawer() {
        return this.showDrawer && this.variation === 'inline';
    }
    ngOnInit() {
        this.iconService.register(Close16);
        this.iconService.register(ChevronLeft16);
        this.iconService.register(ChevronRight16);
        this.iconService.register(OpenPanelLeft16);
        this.iconService.register(OpenPanelRight16);
    }
}
SidePanel.ɵfac = function SidePanel_Factory(t) { return new (t || SidePanel)(i0.ɵɵdirectiveInject(i1.IconService)); };
SidePanel.ɵcmp = i0.ɵɵdefineComponent({ type: SidePanel, selectors: [["ai-side-panel"]], hostVars: 14, hostBindings: function SidePanel_HostBindings(rf, ctx) { if (rf & 2) {
        i0.ɵɵclassProp("iot--side-panel", ctx.sidePanelClass)("iot--side-panel__slide-in", ctx.sidePanelSlideInClass)("iot--side-panel__inline", ctx.sidePanelInlineClass)("iot--side-panel__slide-over", ctx.sidePanelSlideOverClass)("iot--side-panel__right", ctx.sidePanelRightClass)("iot--side-panel__drawer", ctx.sidePanelDrawerClass)("active", ctx.active);
    } }, inputs: { showClose: "showClose", showDrawer: "showDrawer", drawerIcon: "drawerIcon", closeIcon: "closeIcon", variation: "variation", active: "active", overlay: "overlay", side: "side" }, outputs: { close: "close" }, ngContentSelectors: _c1, decls: 4, vars: 5, consts: [[1, "panel", 3, "ngClass"], ["tabindex", "0", "class", "iot--btn bx--btn bx--btn--ghost bx--btn--icon-only close-button", "type", "button", 3, "click", 4, "ngIf"], [1, "panel-content-wrapper"], ["tabindex", "0", "type", "button", 1, "iot--btn", "bx--btn", "bx--btn--ghost", "bx--btn--icon-only", "close-button", 3, "click"], ["ibmIcon", "close", "size", "16", 4, "ngIf"], ["size", "16", 3, "ibmIcon", 4, "ngIf"], ["ibmIcon", "close", "size", "16"], ["size", "16", 3, "ibmIcon"]], template: function SidePanel_Template(rf, ctx) { if (rf & 1) {
        i0.ɵɵprojectionDef();
        i0.ɵɵelementStart(0, "div", 0);
        i0.ɵɵtemplate(1, SidePanel_button_1_Template, 6, 5, "button", 1);
        i0.ɵɵelementStart(2, "div", 2);
        i0.ɵɵprojection(3);
        i0.ɵɵelementEnd();
        i0.ɵɵelementEnd();
    } if (rf & 2) {
        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(2, _c0, ctx.side === "left", ctx.side === "right"));
        i0.ɵɵadvance(1);
        i0.ɵɵproperty("ngIf", ctx.showClose || ctx.showDrawer);
    } }, directives: [i2.NgClass, i2.NgIf, i1.IconDirective], encapsulation: 2 });
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SidePanel, [{
        type: Component,
        args: [{
                selector: 'ai-side-panel',
                template: `
    <div
      class="panel"
      [ngClass]="{
        'iot--side-panel__left': side === 'left',
        'iot--side-panel__right': side === 'right'
      }"
    >
      <button
        *ngIf="showClose || showDrawer"
        tabindex="0"
        class="iot--btn bx--btn bx--btn--ghost bx--btn--icon-only close-button"
        type="button"
        (click)="close.emit()"
      >
        <svg *ngIf="showClose && !shouldShowDrawer" ibmIcon="close" size="16"></svg>
        <svg
          *ngIf="shouldShowDrawer && active && side === 'left'"
          [ibmIcon]="closeIcon || 'chevron--left'"
          size="16"
        ></svg>
        <svg
          *ngIf="shouldShowDrawer && active && side === 'right'"
          [ibmIcon]="closeIcon || 'chevron--right'"
          size="16"
        ></svg>
        <svg
          *ngIf="shouldShowDrawer && !active && side === 'left'"
          [ibmIcon]="drawerIcon || 'open-panel--left'"
          size="16"
        ></svg>
        <svg
          *ngIf="shouldShowDrawer && !active && side === 'right'"
          [ibmIcon]="drawerIcon || 'open-panel--right'"
          size="16"
        ></svg>
      </button>
      <div class="panel-content-wrapper">
        <ng-content></ng-content>
      </div>
    </div>
  `,
                encapsulation: ViewEncapsulation.None,
            }]
    }], function () { return [{ type: i1.IconService }]; }, { sidePanelClass: [{
            type: HostBinding,
            args: ['class.iot--side-panel']
        }], sidePanelSlideInClass: [{
            type: HostBinding,
            args: ['class.iot--side-panel__slide-in']
        }], sidePanelInlineClass: [{
            type: HostBinding,
            args: ['class.iot--side-panel__inline']
        }], sidePanelSlideOverClass: [{
            type: HostBinding,
            args: ['class.iot--side-panel__slide-over']
        }], sidePanelRightClass: [{
            type: HostBinding,
            args: ['class.iot--side-panel__right']
        }], sidePanelDrawerClass: [{
            type: HostBinding,
            args: ['class.iot--side-panel__drawer']
        }], showClose: [{
            type: Input
        }], showDrawer: [{
            type: Input
        }], drawerIcon: [{
            type: Input
        }], closeIcon: [{
            type: Input
        }], variation: [{
            type: Input
        }], active: [{
            type: Input
        }, {
            type: HostBinding,
            args: ['class.active']
        }], overlay: [{
            type: Input
        }], side: [{
            type: Input
        }], close: [{
            type: Output
        }] }); })();
//# sourceMappingURL=data:application/json;base64, 