@c8y/ngx-components/core/dashboard/dashboard.component.d.ts

Angular modules for Cumulocity IoT applications

import { AfterContentInit, ElementRef, EventEmitter } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { DashboardChildComponent } from './dashboard-child.component';
import { DashboardChange } from './dashboard.model';
import * as i0 from "@angular/core";
/**
 * Displays a CSS grid which is customizable by the customer. You can set
 * `c8y-dashboard-child`-components on it or position any element on it by
 * setting the grid CSS properties. On change (resize, or rearrange) the
 * component emits an change event.
 *
 * ```html
 * <c8y-title>Hello from outlet</c8y-title>
 *
 * <c8y-action-bar-item [placement]="'right'">
 *   <button class="btn btn-link" (click)="addRandom()"><i c8yIcon="plus-circle"></i> Add random</button>
 * </c8y-action-bar-item>
 * <c8y-action-bar-item [placement]="'right'">
 *   <button class="btn btn-link" (click)="isFrozen = !isFrozen">
 *     <i [c8yIcon]="isFrozen ? 'lock' : 'unlock'"></i> Toggle freeze
 *   </button>
 * </c8y-action-bar-item>
 *
 * <c8y-dashboard (dashboardChange)="dashboardChange($event)">
 *   <c8y-dashboard-child
 *     [isFrozen]="isFrozen"
 *     title="dynamic"
 *     *ngFor="let widget of widgets"
 *     #current
 *   >
 *     x: {{ current.x }}<br />
 *     y: {{ current.y }}<br />
 *     width: {{ current.width }}<br />
 *     height: {{ current.height }}<br />
 *   </c8y-dashboard-child>
 *   <c8y-dashboard-child
 *     #cpWidget
 *     [isFrozen]="isFrozen"
 *     [x]="0"
 *     [y]="1"
 *     [width]="3"
 *     [height]="2"
 *     [data]="widget"
 *     [class]="'card card-dashboard panel-title-regular panel-content-branded panel-title-overlay'"
 *   >
 *     <c8y-dashboard-child-title>
 *       <span>World!</span>
 *     </c8y-dashboard-child-title>
 *     x: {{ cpWidget.x }}<br />
 *     y: {{ cpWidget.y }}<br />
 *     width: {{ cpWidget.width }}<br />
 *     height: {{ cpWidget.height }}<br />
 *   </c8y-dashboard-child>
 *   <c8y-dashboard-child
 *     #cpWidget2
 *     [isFrozen]="isFrozen"
 *     [x]="8"
 *     [y]="1"
 *     [width]="4"
 *     [height]="4"
 *     [class]="'card card-dashboard panel-content-dark'"
 *   >
 *     <c8y-dashboard-child-title>
 *       <span>Hello!</span>
 *     </c8y-dashboard-child-title>
 *     <c8y-dashboard-child-action>
 *       <a href="" (click)="cpWidget2.isFrozen = !cpWidget2.isFrozen; (false)">
 *         <i [c8yIcon]="cpWidget2.isFrozen ? 'lock' : 'unlock'"></i> Toggle freeze
 *       </a>
 *     </c8y-dashboard-child-action>
 *     x: {{ cpWidget2.x }}<br />
 *     y: {{ cpWidget2.y }}<br />
 *     width: {{ cpWidget2.width }}<br />
 *     height: {{ cpWidget2.height }}<br />
 *   </c8y-dashboard-child>
 *
 *   <c8y-dashboard-child
 *     #cpWidget3
 *     [isFrozen]="isFrozen"
 *     [x]="0"
 *     [y]="3"
 *     [width]="4"
 *     [height]="4"
 *     [class]="'card-dashboard panel-content-transparent'"
 *   >
 *     <c8y-dashboard-child-title *ngIf="showTitle">
 *       <span>Transparent!</span>
 *     </c8y-dashboard-child-title>
 *     <c8y-dashboard-child-action>
 *       <a href="" (click)="showTitle = !showTitle; (false)">
 *         <i [c8yIcon]="'heading'"></i> Hide/show title
 *       </a>
 *     </c8y-dashboard-child-action>
 *     <c8y-dashboard-child-action>
 *       <a href="" (click)="cpWidget3.isFrozen = !cpWidget3.isFrozen; (false)">
 *         <i [c8yIcon]="cpWidget3.isFrozen ? 'lock' : 'unlock'"></i> Toggle freeze
 *       </a>
 *     </c8y-dashboard-child-action>
 *     x: {{ cpWidget3.x }}<br />
 *     y: {{ cpWidget3.y }}<br />
 *     width: {{ cpWidget3.width }}<br />
 *     height: {{ cpWidget3.height }}<br />
 *   </c8y-dashboard-child>
 * </c8y-dashboard>
 * ```
 */
export declare class DashboardComponent implements AfterContentInit {
    private element;
    private sanitizer;
    /**
     * All children in that dashboard.
     */
    children: DashboardChildComponent[];
    /**
     * The amount of columns on that dashboard.
     */
    columns: number;
    /**
     * The spacing between each children in pixel.
     */
    gap: number;
    /**
     * The amount of rows to dusplay. Set to auto to
     * auto extend the rows.
     */
    rows: number | 'auto';
    /**
     * An event fired if the dashboard was changed.
     */
    dashboardChange: EventEmitter<DashboardChange>;
    dashboardRect: any;
    private lastRow;
    private readonly DEFAULT_ROW_SIZE;
    /**
     * The current column size.
     */
    get columnSize(): number;
    /**
     * The current row size.
     */
    get rowSize(): number;
    /**
     * Returns all positioning styles. Nasty workaround for that issue:
     * https://github.com/angular/angular/issues/9343
     */
    get inlineStyle(): import("@angular/platform-browser").SafeStyle;
    constructor(element: ElementRef, sanitizer: DomSanitizer);
    ngAfterContentInit(): void;
    onResize(): void;
    /**
     * Updates the current rect size of the dashboard.
     */
    updateRectSize(): void;
    emitChange(widget: DashboardChildComponent): void;
    private calculateRowSize;
    static ɵfac: i0.ɵɵFactoryDeclaration<DashboardComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<DashboardComponent, "c8y-dashboard", never, { "columns": { "alias": "columns"; "required": false; }; "gap": { "alias": "gap"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; }, { "dashboardChange": "dashboardChange"; }, never, ["*"], false, never>;
}
//# sourceMappingURL=dashboard.component.d.ts.map