import { Component, Input, HostBinding, Output, EventEmitter, ViewChild, } from "@angular/core";
import { BehaviorSubject } from "rxjs";
import { css } from "emotion";
import { CssUtils } from "../utils";
import { coerceNumberProperty } from "@angular/cdk/coercion";
import { BackgroundProviderService } from "../background-provider/service/background-provider.service";
import * as i0 from "@angular/core";
import * as i1 from "../utils";
import * as i2 from "../background-provider/background-provider-inner.component";
import * as i3 from "@angular/common";
export class DxcAlertComponent {
    constructor(utils) {
        this.utils = utils;
        /**
         * Uses on of the available alert types.
         */
        this.type = "info";
        /**
         * Uses on of the available alert modes:
         *    'inline': If onClose eventEmitter is received, close button will be visible and the
         *              event will be emitted when it's clicked. There is no overlay layer.
         *              Position should be decided by the user.
         *    'modal': The alert will be displayed in the middle of the screen with an overlay
         *             layer behind. The onClose event will be emitted when the X button or
         *             the overlay is clicked. The user has the responsibility of hidding the modal
         *             in the onClose event, otherwise the modal will remain visible.
         */
        this.mode = "inline";
        this._tabIndexValue = 0;
        /**
         * This event will emit in case the user clicks the close button. If there is no
         * eventEmitter we should close the alert by default.
         */
        this.onClose = new EventEmitter();
        /**
         * Size of the component.
         */
        this.size = "fitContent";
        this.isCloseVisible = false;
        this.sizes = {
            small: "280px",
            medium: "480px",
            large: "820px",
            fillParent: "100%",
            fitContent: "auto",
        };
        this.defaultInputs = new BehaviorSubject({
            type: "info",
            mode: "inline",
            inlineText: null,
            tabIndexValue: 0,
            margin: null,
            size: "fitContent",
        });
    }
    /**
     * Tabindex value given to the close button.
     */
    get tabIndexValue() {
        return this._tabIndexValue;
    }
    set tabIndexValue(value) {
        this._tabIndexValue = coerceNumberProperty(value);
    }
    ngOnInit() {
        this.isCloseVisible = this.onClose.observers.length > 0;
        this.className = `${this.getDynamicStyle(this.defaultInputs.getValue())}`;
    }
    ngOnChanges(changes) {
        const inputs = Object.keys(changes).reduce((result, item) => {
            result[item] = changes[item].currentValue;
            return result;
        }, {});
        this.defaultInputs.next({ ...this.defaultInputs.getValue(), ...inputs });
        this.className = `${this.getDynamicStyle(this.defaultInputs.getValue())}`;
    }
    getDynamicStyle(inputs) {
        return css `
      .container {
        overflow: hidden;
        box-shadow: var(--alert-boxShadowOffsetX) var(--alert-boxShadowOffsetY)
          var(--alert-boxShadowBlur) var(--alert-boxShadowColor);
        border-radius: var(--alert-borderRadius);
        z-index: 300;
        ${this.utils.getMargins(inputs.margin)}
        ${this.utils.calculateWidth(this.sizes, inputs)}
      cursor: default;
        ${inputs.mode && inputs.mode === "modal"
            ? css `
              justify-content: center;
              align-items: center;
            `
            : css ``}
        ${this.setBackgroundColorByAlertType(inputs.type)}
      }
    `;
    }
    setBackgroundColorByAlertType(type) {
        switch (type) {
            case "info":
                this.currentBackgroundColor = this.utils.readProperty("--alert-infoBackgroundColor");
                return css `
          background-color: var(--alert-infoBackgroundColor);
          border-color: var(--alert-infoBorderColor);
          .icon svg {
            fill: var(--alert-infoIconColor);
          }
        `;
            case "confirm":
                this.currentBackgroundColor = this.utils.readProperty("--alert-successBackgroundColor");
                return css `
          background-color: var(--alert-successBackgroundColor);
          border-color: var(--alert-successBorderColor);
          .icon svg {
            fill: var(--alert-successIconColor);
          }
        `;
            case "warning":
                this.currentBackgroundColor = this.utils.readProperty("--alert-warningBackgroundColor");
                return css `
          background-color: var(--alert-warningBackgroundColor);
          border-color: var(--alert-warningBorderColor);
          .icon svg {
            fill: var(--alert-warningIconColor);
          }
        `;
            case "error":
                this.currentBackgroundColor = this.utils.readProperty("--alert-errorBackgroundColor");
                return css `
          background-color: var(--alert-errorBackgroundColor);
          border-color: var(--alert-errorBorderColor);
          .icon svg {
            fill: var(--alert-errorIconColor);
          }
        `;
            default:
                this.currentBackgroundColor = this.utils.readProperty("--alert-errorBackgroundColor");
                return css `
          background-color: var(--alert-errorBackgroundColor);
          border-color: var(--alert-errorBorderColor);
          .icon svg {
            fill: var(--alert-errorIconColor);
          }
        `;
        }
    }
    onCloseHandler($event) {
        this.onClose.emit($event);
    }
    ngAfterViewChecked() {
        if (this.content &&
            this.content.element &&
            this.content.element.nativeElement &&
            (this.content.element.nativeElement.children.length > 0 ||
                this.content.element.nativeElement.innerText)) {
            this.content.element.nativeElement.classList.add("content");
        }
    }
}
DxcAlertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: DxcAlertComponent, deps: [{ token: i1.CssUtils }], target: i0.ɵɵFactoryTarget.Component });
DxcAlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.5", type: DxcAlertComponent, selector: "dxc-alert", inputs: { type: "type", mode: "mode", inlineText: "inlineText", tabIndexValue: "tabIndexValue", margin: "margin", size: "size" }, outputs: { onClose: "onClose" }, host: { properties: { "class": "this.className" } }, providers: [CssUtils, BackgroundProviderService], viewQueries: [{ propertyName: "content", first: true, predicate: ["contents"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"alert\" [ngClass]=\"{ modal: mode == 'modal' }\">\n  <div\n    class=\"backOverlay\"\n    (click)=\"onCloseHandler($event)\"\n    [ngClass]=\"{ backVisible: mode == 'modal' }\"\n    *ngIf=\"mode == 'modal'\"\n  ></div>\n  <div\n    class=\"container\"\n    [ngClass]=\"{\n      infoHeader: type == 'info',\n      warningHeader: type == 'warning',\n      errorHeader: type == 'error',\n      confirmHeader: type == 'confirm'\n    }\"\n  >\n    <div class=\"alertHeader\">\n      <div *ngIf=\"type == 'info'\" class=\"headerLabel\">\n        <div class=\"icon\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"#0067b3\"\n          >\n            <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n            <path\n              d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z\"\n            />\n          </svg>\n        </div>\n        <span class=\"mainLabel\"> information </span>\n      </div>\n      <div *ngIf=\"type == 'warning'\" class=\"headerLabel\">\n        <div class=\"icon\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"#c59f07\"\n          >\n            <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n            <path d=\"M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z\" />\n          </svg>\n        </div>\n        <span class=\"mainLabel\"> warning </span>\n      </div>\n      <div *ngIf=\"type == 'error'\" class=\"headerLabel\">\n        <div class=\"icon\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"#d0011b\"\n          >\n            <path\n              d=\"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z\"\n            />\n            <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n          </svg>\n        </div>\n        <span class=\"mainLabel\"> error </span>\n      </div>\n      <div *ngIf=\"type == 'confirm'\" class=\"headerLabel\">\n        <div class=\"icon\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"#24a148\"\n          >\n            <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n            <path\n              d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"\n            />\n          </svg>\n        </div>\n        <span class=\"mainLabel\"> success </span>\n      </div>\n      <span *ngIf=\"inlineText\" class=\"spacer\"> - </span>\n      <div class=\"inlineContainer\">\n        <span *ngIf=\"inlineText\" class=\"inlineText\"> {{ inlineText }} </span>\n        <span\n          class=\"closeIcon\"\n          *ngIf=\"isCloseVisible || mode == 'modal'\"\n          (click)=\"onCloseHandler($event)\"\n          data-testId=\"closeIcon\"\n          [tabindex]=\"tabIndexValue\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n          >\n            <path\n              d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"\n            />\n            <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n          </svg>\n        </span>\n      </div>\n    </div>\n    <background-provider-inner #contents class=\"contentContainer\" color=\"{{currentBackgroundColor}}\">\n      <ng-content></ng-content>\n    </background-provider-inner>\n  </div>\n</div>\n", styles: [":host .alert{display:flex}:host .alert.modal{width:100%;height:100%;justify-content:center;align-items:center;top:0;left:0;position:fixed;z-index:1000}:host .alert.modal .container{max-height:50vh;height:auto}:host .alert.modal .container .contentContainer.content{display:block;overflow:auto}:host .alert.modal .container .contentContainer.content ::ng-deep span{display:block}:host .backOverlay{top:0;left:0;right:0;bottom:0;position:fixed;opacity:1;background-color:transparent;transition:opacity 225ms cubic-bezier(.4,0,.2,1) 0ms}:host .backVisible{background-color:var(--alert-overlayColor);opacity:.8}:host .container{outline:none;opacity:1;transition:opacity 225ms cubic-bezier(.4,0,.2,1) 0ms;box-shadow:var(--alert-boxShadowColor) var(--alert-boxShadowOffsetX) var(--alert-boxShadowOffsetY) var(--alert-boxShadowBlur);border-radius:var(--alert-borderRadius);border-style:var(--alert-borderStyle);border-width:var(--alert-borderThickness);z-index:1;padding-left:12px;padding-right:12px}:host .container .alertHeader{height:48px;position:relative;color:var(--alert-titleFontColor);transition:box-shadow .3s cubic-bezier(.4,0,.2,1) 0ms;display:flex;align-items:center}:host .container .alertHeader .inlineContainer{display:flex;flex-grow:1;overflow:hidden;align-items:center}:host .container .alertHeader .headerLabel{display:flex;align-items:center}:host .container .alertHeader .headerLabel .icon{padding-left:var(--alert-iconPaddingLeft);padding-right:var(--alert-iconPaddingRight);padding-top:var(--alert-iconPaddingTop);padding-bottom:var(--alert-iconPaddingBottom);display:inline-flex;width:var(--alert-iconSize);border-top-left-radius:4px;border-bottom-left-radius:4px;margin-right:12px}:host .container .alertHeader .headerLabel .mainLabel{padding-left:var(--alert-titlePaddingLeft);padding-right:var(--alert-titlePaddingRight);padding-top:var(--alert-titlePaddingTop);padding-bottom:var(--alert-titlePaddingBottom);font-family:var(--alert-titleFontFamily);font-weight:var(--alert-titleFontWeight);font-style:var(--alert-titleFontStyle);font-size:var(--alert-titleFontSize);text-transform:var(--alert-titleTextTransform);color:var(--alert-titleFontColor);margin-right:8px}:host .container .alertHeader .closeIcon{display:flex;justify-content:flex-end;margin-right:12px;padding:3px;margin-left:12px}:host .container .alertHeader .closeIcon svg{cursor:pointer;width:20px;height:20px}:host .container .alertHeader .closeIcon:hover{background-color:var(--alert-hoverActionBackgroundColor)}:host .container .alertHeader .closeIcon:focus,:host .container .alertHeader .closeIcon:focus-visible{outline-color:var(--alert-focusActionBorderColor)}:host .container .alertHeader .closeIcon:active{outline-color:var(--alert-focusActionBorderColor);outline:-webkit-focus-ring-color auto 1px;background-color:var(--alert-activeActionBackgroundColor)}:host .container .alertHeader .spacer{font-family:var(--alert-titleFontFamily);font-size:var(--alert-titleFontSize)}:host .container .alertHeader .inlineText{width:100%;font-family:var(--alert-inlineTextFontFamily);font-size:var(--alert-inlineTextFontSize);color:var(--alert-inlineTextFontColor);font-style:var(--alert-inlineTextFontStyle);font-weight:var(--alert-inlineTextFontWeight);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding-left:var(--alert-inlineTextPaddingLeft);padding-right:var(--alert-inlineTextPaddingRight);padding-top:var(--alert-inlineTextPaddingTop);padding-bottom:var(--alert-inlineTextPaddingBottom);margin-left:8px}:host .container .contentContainer:not(.content){display:none}:host .container .content{display:block;padding:var(--alert-contentPaddingTop) var(--alert-contentPaddingRight) var(--alert-contentPaddingBottom) var(--alert-contentPaddingLeft)}\n"], components: [{ type: i2.BackgroundProviderInnerComponent, selector: "background-provider-inner", inputs: ["color"] }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: DxcAlertComponent, decorators: [{
            type: Component,
            args: [{ selector: "dxc-alert", providers: [CssUtils, BackgroundProviderService], template: "<div class=\"alert\" [ngClass]=\"{ modal: mode == 'modal' }\">\n  <div\n    class=\"backOverlay\"\n    (click)=\"onCloseHandler($event)\"\n    [ngClass]=\"{ backVisible: mode == 'modal' }\"\n    *ngIf=\"mode == 'modal'\"\n  ></div>\n  <div\n    class=\"container\"\n    [ngClass]=\"{\n      infoHeader: type == 'info',\n      warningHeader: type == 'warning',\n      errorHeader: type == 'error',\n      confirmHeader: type == 'confirm'\n    }\"\n  >\n    <div class=\"alertHeader\">\n      <div *ngIf=\"type == 'info'\" class=\"headerLabel\">\n        <div class=\"icon\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"#0067b3\"\n          >\n            <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n            <path\n              d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z\"\n            />\n          </svg>\n        </div>\n        <span class=\"mainLabel\"> information </span>\n      </div>\n      <div *ngIf=\"type == 'warning'\" class=\"headerLabel\">\n        <div class=\"icon\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"#c59f07\"\n          >\n            <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n            <path d=\"M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z\" />\n          </svg>\n        </div>\n        <span class=\"mainLabel\"> warning </span>\n      </div>\n      <div *ngIf=\"type == 'error'\" class=\"headerLabel\">\n        <div class=\"icon\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"#d0011b\"\n          >\n            <path\n              d=\"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z\"\n            />\n            <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n          </svg>\n        </div>\n        <span class=\"mainLabel\"> error </span>\n      </div>\n      <div *ngIf=\"type == 'confirm'\" class=\"headerLabel\">\n        <div class=\"icon\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"#24a148\"\n          >\n            <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n            <path\n              d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"\n            />\n          </svg>\n        </div>\n        <span class=\"mainLabel\"> success </span>\n      </div>\n      <span *ngIf=\"inlineText\" class=\"spacer\"> - </span>\n      <div class=\"inlineContainer\">\n        <span *ngIf=\"inlineText\" class=\"inlineText\"> {{ inlineText }} </span>\n        <span\n          class=\"closeIcon\"\n          *ngIf=\"isCloseVisible || mode == 'modal'\"\n          (click)=\"onCloseHandler($event)\"\n          data-testId=\"closeIcon\"\n          [tabindex]=\"tabIndexValue\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n          >\n            <path\n              d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"\n            />\n            <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n          </svg>\n        </span>\n      </div>\n    </div>\n    <background-provider-inner #contents class=\"contentContainer\" color=\"{{currentBackgroundColor}}\">\n      <ng-content></ng-content>\n    </background-provider-inner>\n  </div>\n</div>\n", styles: [":host .alert{display:flex}:host .alert.modal{width:100%;height:100%;justify-content:center;align-items:center;top:0;left:0;position:fixed;z-index:1000}:host .alert.modal .container{max-height:50vh;height:auto}:host .alert.modal .container .contentContainer.content{display:block;overflow:auto}:host .alert.modal .container .contentContainer.content ::ng-deep span{display:block}:host .backOverlay{top:0;left:0;right:0;bottom:0;position:fixed;opacity:1;background-color:transparent;transition:opacity 225ms cubic-bezier(.4,0,.2,1) 0ms}:host .backVisible{background-color:var(--alert-overlayColor);opacity:.8}:host .container{outline:none;opacity:1;transition:opacity 225ms cubic-bezier(.4,0,.2,1) 0ms;box-shadow:var(--alert-boxShadowColor) var(--alert-boxShadowOffsetX) var(--alert-boxShadowOffsetY) var(--alert-boxShadowBlur);border-radius:var(--alert-borderRadius);border-style:var(--alert-borderStyle);border-width:var(--alert-borderThickness);z-index:1;padding-left:12px;padding-right:12px}:host .container .alertHeader{height:48px;position:relative;color:var(--alert-titleFontColor);transition:box-shadow .3s cubic-bezier(.4,0,.2,1) 0ms;display:flex;align-items:center}:host .container .alertHeader .inlineContainer{display:flex;flex-grow:1;overflow:hidden;align-items:center}:host .container .alertHeader .headerLabel{display:flex;align-items:center}:host .container .alertHeader .headerLabel .icon{padding-left:var(--alert-iconPaddingLeft);padding-right:var(--alert-iconPaddingRight);padding-top:var(--alert-iconPaddingTop);padding-bottom:var(--alert-iconPaddingBottom);display:inline-flex;width:var(--alert-iconSize);border-top-left-radius:4px;border-bottom-left-radius:4px;margin-right:12px}:host .container .alertHeader .headerLabel .mainLabel{padding-left:var(--alert-titlePaddingLeft);padding-right:var(--alert-titlePaddingRight);padding-top:var(--alert-titlePaddingTop);padding-bottom:var(--alert-titlePaddingBottom);font-family:var(--alert-titleFontFamily);font-weight:var(--alert-titleFontWeight);font-style:var(--alert-titleFontStyle);font-size:var(--alert-titleFontSize);text-transform:var(--alert-titleTextTransform);color:var(--alert-titleFontColor);margin-right:8px}:host .container .alertHeader .closeIcon{display:flex;justify-content:flex-end;margin-right:12px;padding:3px;margin-left:12px}:host .container .alertHeader .closeIcon svg{cursor:pointer;width:20px;height:20px}:host .container .alertHeader .closeIcon:hover{background-color:var(--alert-hoverActionBackgroundColor)}:host .container .alertHeader .closeIcon:focus,:host .container .alertHeader .closeIcon:focus-visible{outline-color:var(--alert-focusActionBorderColor)}:host .container .alertHeader .closeIcon:active{outline-color:var(--alert-focusActionBorderColor);outline:-webkit-focus-ring-color auto 1px;background-color:var(--alert-activeActionBackgroundColor)}:host .container .alertHeader .spacer{font-family:var(--alert-titleFontFamily);font-size:var(--alert-titleFontSize)}:host .container .alertHeader .inlineText{width:100%;font-family:var(--alert-inlineTextFontFamily);font-size:var(--alert-inlineTextFontSize);color:var(--alert-inlineTextFontColor);font-style:var(--alert-inlineTextFontStyle);font-weight:var(--alert-inlineTextFontWeight);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding-left:var(--alert-inlineTextPaddingLeft);padding-right:var(--alert-inlineTextPaddingRight);padding-top:var(--alert-inlineTextPaddingTop);padding-bottom:var(--alert-inlineTextPaddingBottom);margin-left:8px}:host .container .contentContainer:not(.content){display:none}:host .container .content{display:block;padding:var(--alert-contentPaddingTop) var(--alert-contentPaddingRight) var(--alert-contentPaddingBottom) var(--alert-contentPaddingLeft)}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.CssUtils }]; }, propDecorators: { type: [{
                type: Input
            }], mode: [{
                type: Input
            }], inlineText: [{
                type: Input
            }], tabIndexValue: [{
                type: Input
            }], onClose: [{
                type: Output
            }], margin: [{
                type: Input
            }], size: [{
                type: Input
            }], className: [{
                type: HostBinding,
                args: ["class"]
            }], content: [{
                type: ViewChild,
                args: ["contents", { static: true }]
            }] } });
//# sourceMappingURL=data:application/json;base64, 