import { Component, EventEmitter, Input, Output } from '@angular/core';
export class WidgetsDashboardComponent {
    constructor() {
        this.contextDashboard = { updateTarget: true };
        this.settings = {
            isFrozen: false,
            isDisabled: false,
            widgetMargin: 12,
            translateWidgetTitle: false,
            defaultHeight: 4,
            defaultWidth: 4,
            allowFullscreen: false,
            canDelete: true,
            isLoading: false
        };
        this.onAddWidget = new EventEmitter();
        this.onEditWidget = new EventEmitter();
        this.onDeleteWidget = new EventEmitter();
        this.onChangeDashboard = new EventEmitter();
        this.onEditDashboard = new EventEmitter();
        this.onDeleteDashboard = new EventEmitter();
        this.onFreeze = new EventEmitter();
        this.onChangeStart = new EventEmitter();
        this.onChangeEnd = new EventEmitter();
    }
    set _settings(settings) {
        this.settings = Object.assign(Object.assign({}, this.settings), settings);
    }
    toggleFullscreen() {
        const elem = document.body;
        const doc = document;
        if (!this.fullScreen()) {
            if (elem.requestFullscreen) {
                elem.requestFullscreen();
            }
            else if (elem.msRequestFullscreen) {
                elem.msRequestFullscreen();
            }
            else if (elem.mozRequestFullScreen) {
                elem.mozRequestFullScreen();
            }
            else if (elem.webkitRequestFullscreen) {
                elem.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
            }
        }
        else if (doc.exitFullscreen) {
            doc.exitFullscreen();
        }
        else if (doc.msExitFullscreen) {
            doc.msExitFullscreen();
        }
        else if (doc.mozCancelFullScreen) {
            doc.mozCancelFullScreen();
        }
        else if (doc.webkitExitFullscreen) {
            doc.webkitExitFullscreen();
        }
    }
    fullScreen() {
        const doc = document;
        return !!(doc.fullscreenElement ||
            doc.mozFullScreenElement ||
            doc.webkitFullscreenElement ||
            doc.msFullscreenElement);
    }
}
WidgetsDashboardComponent.decorators = [
    { type: Component, args: [{
                selector: 'c8y-widgets-dashboard',
                template: "<c8y-title *ngIf=\"!!settings.title\">\n  {{ settings.title | translate }}\n</c8y-title>\n\n<c8y-breadcrumb *ngIf=\"!!breadcrumb\">\n  <c8y-breadcrumb-item\n    [icon]=\"breadcrumb.icon\"\n    [label]=\"breadcrumb.label\"\n    [path]=\"breadcrumb.path\"\n  ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-action-bar-item [placement]=\"'right'\" *ngIf=\"onAddWidget.observers.length\">\n  <button\n    title=\"{{ 'Add widget' | translate }}\"\n    class=\"btn btn-link\"\n    [disabled]=\"settings.isFrozen || settings.isDisabled\"\n    (click)=\"onAddWidget.emit()\"\n  >\n    <i c8yIcon=\"plus-circle\"></i>\n    {{ 'Add widget' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item [placement]=\"'right'\" *ngIf=\"onEditDashboard.observers.length\">\n  <button\n    title=\"{{ 'Edit' | translate }}\"\n    class=\"btn btn-link\"\n    [disabled]=\"settings.isFrozen || settings.isDisabled\"\n    (click)=\"onEditDashboard.emit()\"\n  >\n    <i c8yIcon=\"pencil\"></i>\n    {{ 'Edit' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item [placement]=\"'right'\" *ngIf=\"settings.allowFullscreen\">\n  <button\n    title=\"{{ 'Full screen' | translate }}\"\n    class=\"btn btn-link\"\n    (click)=\"toggleFullscreen()\"\n    >\n    <i [c8yIcon]=\"fullScreen() ? 'compress' : 'expand'\"></i>\n    {{ 'Full screen' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  itemClass=\"navbar-form\"\n  *ngIf=\"onFreeze.observers.length\"\n>\n  <button\n    title=\"{{ 'Lock/unlock this dashboard' | translate }}\"\n    class=\"btn btn-default\"\n    [ngClass]=\"{ active: settings.isFrozen }\"\n    (click)=\"onFreeze.emit(settings)\"\n    [disabled]=\"settings.isDisabled\"\n    uib-btn-checkbox\n  >\n    <i [c8yIcon]=\"settings.isFrozen ? 'lock' : 'unlock'\"></i>\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'more'\"\n  [priority]=\"-3000\"\n  *ngIf=\"settings.canDelete && onDeleteDashboard.observers.length\"\n>\n  <button\n    title=\"{{ 'Delete dashboard' | translate }}\"\n    (click)=\"onDeleteDashboard.emit()\"\n    [disabled]=\"settings.isFrozen || settings.isDisabled\"\n  >\n    <i c8yIcon=\"trash\"></i>\n    <span class=\"m-l-4\" translate>Delete dashboard</span>\n  </button>\n</c8y-action-bar-item>\n\n<!-- empty state -->\n<div class=\"c8y-empty-state text-center\" *ngIf=\"!settings.isLoading && widgets?.length === 0\">\n  <h1 class=\"c8y-icon c8y-icon-device c8y-icon-duocolor\"></h1>\n  <h3 translate>No widgets to display.</h3>\n  <div *ngIf=\"!settings.isFrozen && onAddWidget.observers.length\">\n    <p translate>Add widgets to this dashboard.</p>\n    <div>\n      <button\n        title=\"{{ 'Add widget' | translate }}\"\n        [disabled]=\"settings.isFrozen || settings.isDisabled\"\n        (click)=\"onAddWidget.emit()\"\n        class=\"btn btn-primary\"\n        translate\n      >\n        Add widget\n      </button>\n    </div>\n    <p c8y-guide-docs>\n      <small translate ngNonBindable>\n        Find out more in the\n        <a c8y-guide-href=\"users-guide/cockpit/#dashboards\">\n          User guide`KEEP_ORIGINAL`\n        </a>.\n      </small>\n    </p>\n  </div>\n</div>\n<!-- /.empty settings -->\n\n<div class=\"col-xs-12 text-center\" *ngIf=\"settings.isLoading\">\n  <div class=\"spinner p-relative\">\n    <div class=\"rect1\"></div>\n    <div class=\"rect2\"></div>\n    <div class=\"rect3\"></div>\n    <div class=\"rect4\"></div>\n    <div class=\"rect5\"></div>\n  </div>\n</div>\n\n<c8y-dashboard\n  (dashboardChange)=\"onChangeDashboard.emit($event)\"\n  #dashboard\n  *ngIf=\"!settings.isLoading\"\n>\n  <c8y-dashboard-child\n    *ngFor=\"let widget of widgets\"\n    [x]=\"widget._x\"\n    [y]=\"widget._y\"\n    [width]=\"widget._width || settings.defaultWidth\"\n    [height]=\"widget._height || settings.defaultHeight\"\n    [margin]=\"settings.widgetMargin\"\n    [isFrozen]=\"settings.isFrozen || settings.isDisabled\"\n    [class]=\"widget.classes\"\n    [data]=\"widget\"\n    [useIntersection]=\"true\"\n    (changeStart)=\"onChangeStart.emit({ widget: widget, source: child, dashboard: dashboard })\"\n    (changeEnd)=\"onChangeEnd.emit({ widget: widget, source: child, dashboard: dashboard })\"\n    #child\n  >\n    <c8y-dashboard-child-title>\n      <span *ngIf=\"settings.translateWidgetTitle\">\n        {{ widget.title | translate }}\n      </span>\n      <span *ngIf=\"!settings.translateWidgetTitle\">\n        {{ widget.title }}\n      </span>\n    </c8y-dashboard-child-title>\n    <c8y-dashboard-child-action *ngIf=\"onEditWidget.observers.length\">\n      <button\n        title=\"{{ 'Edit widget' | translate }}\"\n        (click)=\"onEditWidget.emit({ widget: widget, source: child, dashboard: dashboard })\"\n      >\n        <i c8yIcon=\"pencil\"></i>\n        <span class=\"m-l-4\" translate>Edit</span>\n      </button>\n    </c8y-dashboard-child-action>\n    <c8y-dashboard-child-action *ngIf=\"onDeleteWidget.observers.length\">\n      <button\n        title=\"{{ 'Remove widget' | translate }}\"\n        (click)=\"onDeleteWidget.emit({ widget: widget, source: child, dashboard: dashboard })\"\n      >\n        <i c8yIcon=\"trash\"></i>\n        <span class=\"m-l-4\" translate>Remove</span>\n      </button>\n    </c8y-dashboard-child-action>\n    <c8y-dynamic-component\n      [componentId]=\"widget.componentId || widget.name\"\n      [config]=\"\n        widget.templateUrl || widget.widgetComponent\n          ? { child: widget, dashboard: contextDashboard, context: context }\n          : widget.config\n      \"\n      *ngIf=\"child.intersected\"\n    ></c8y-dynamic-component>\n  </c8y-dashboard-child>\n</c8y-dashboard>\n",
                host: {
                    style: `
      display: block;
    `,
                    class: 'dashboard c8y-grid-dashboard'
                }
            },] }
];
WidgetsDashboardComponent.propDecorators = {
    widgets: [{ type: Input }],
    context: [{ type: Input }],
    contextDashboard: [{ type: Input }],
    _settings: [{ type: Input, args: ['settings',] }],
    breadcrumb: [{ type: Input }],
    onAddWidget: [{ type: Output }],
    onEditWidget: [{ type: Output }],
    onDeleteWidget: [{ type: Output }],
    onChangeDashboard: [{ type: Output }],
    onEditDashboard: [{ type: Output }],
    onDeleteDashboard: [{ type: Output }],
    onFreeze: [{ type: Output }],
    onChangeStart: [{ type: Output }],
    onChangeEnd: [{ type: Output }]
};
//# sourceMappingURL=data:application/json;base64, 