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

Angular modules for Cumulocity IoT applications

import { CdkDrag, CdkDragEnd, CdkDragStart } from '@angular/cdk/drag-drop';
import { ElementRef, EventEmitter } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { Observable, Subscription } from 'rxjs';
import { DashboardChildActionComponent } from './dashboard-child-action.component';
import { DashboardComponent } from './dashboard.component';
import { DashboardChildDimension, Widget } from './dashboard.model';
import * as i0 from "@angular/core";
/**
 * A dashboard child allows to position elements
 * correctly on a grid.
 *
 * By setting `c8y-dashboard-child-actions` and
 * `c8y-dashboard-child-title` on the element you can add
 * custom actions or a custom title to the current child.
 *
 * By adding the correct branded classes, you can define
 * the look and feel of the child. By default it is displayed
 * as a card.
 *
 * ```html
 *   <c8y-dashboard-child
 *     #cpWidget3
 *     [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>
 *     x: {{ cpWidget3.x }}<br />
 *     y: {{ cpWidget3.y }}<br />
 *     width: {{ cpWidget3.width }}<br />
 *     height: {{ cpWidget3.height }}<br />
 *   </c8y-dashboard-child>
 * ```
 */
export declare class DashboardChildComponent implements DashboardChildDimension {
    dashboard: DashboardComponent;
    private sanitizer;
    element: ElementRef;
    actions: DashboardChildActionComponent[];
    set templateActions(actions: DashboardChildActionComponent[]);
    dragSource: CdkDrag;
    isResize: boolean;
    isDragging: boolean;
    klasses: {};
    _pxWidth: string;
    _pxHeight: string;
    fullscreen: boolean;
    readonly MD_BOOTSTRAP_BREAKPOINT_READONLY_CLASS_PROPERTY = 768;
    /**
     * The x position of the child.
     */
    x: any;
    /**
     * The y position of the child.
     */
    y: any;
    /**
     * The width of the component in grid-columns.
     */
    width: number;
    /**
     * The height of the component in grid-rows.
     */
    height: number;
    /**
     * The data object can be used as a dataTransfer object for events of the child.
     */
    data: Widget | any;
    /**
     * The margin of the child in pixel.
     */
    margin: number;
    /**
     * The child content is initialized, as soon it is scrolled into viewport
     */
    useIntersection: boolean;
    /**
     * If a dashboard is frozen, all children cannot be moved
     * or resized.
     * @deprecated use editMode.
     */
    set isFrozen(value: boolean);
    canToggleFullscreen: boolean;
    /**
     * If a dashboard editing is disabled no widgets can be moved, edited, removed
     * or added.
     */
    editMode: boolean;
    /**
     * An event fired if a child change is started (dragging or resizing)
     */
    changeStart: EventEmitter<DashboardChildComponent>;
    /**
     * An event fired if a child change is ended
     */
    changeEnd: EventEmitter<DashboardChildComponent>;
    /**
     * An event fired if the fullscreen toggle button was pressed.
     */
    toggleFullscreen: EventEmitter<void>;
    /**
     * All classes added to this child
     */
    class: string[] | {
        [key: string]: boolean;
    };
    /**
     * Updates the pixel width of the child (used for resizing)
     */
    set pxWidth(value: any);
    /**
     * Updates the pixel height of the child (used for resizing)
     */
    set pxHeight(value: any);
    /**
     * Triggers on every resize and returns true if in one column view (mobile view)
     */
    isOneColumnView$: Observable<boolean>;
    /**
     * An indicator if the child is intersected (that mean visible for the user)
     */
    intersected: boolean;
    /**
     * Tells if the last change was a dragging or resizing event;
     */
    lastChange: 'drag' | 'resize';
    /**
     * nasty workaround for that issue:
     * https://github.com/angular/angular/issues/9343
     */
    get inlineStyle(): import("@angular/platform-browser").SafeStyle;
    /**
     * The observable subscription which is listen to
     * on changes (drag or resize).
     */
    changeSubscription: Subscription;
    constructor(dashboard: DashboardComponent, sanitizer: DomSanitizer, element: ElementRef);
    ngOnChanges(): void;
    ngOnInit(): void;
    ngAfterViewInit(): void;
    setDynamicDimension(): void;
    resizeStarted($event: CdkDragStart): void;
    dragStarted($event: CdkDragStart): void;
    reset($event?: CdkDragEnd): void;
    ngOnDestroy(): void;
    addActions(actions: DashboardChildActionComponent[], prepend?: boolean): void;
    private removeSelfFromDashboard;
    private getOrder;
    private childInView;
    static ɵfac: i0.ɵɵFactoryDeclaration<DashboardChildComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<DashboardChildComponent, "c8y-dashboard-child", never, { "x": { "alias": "x"; "required": false; }; "y": { "alias": "y"; "required": false; }; "width": { "alias": "width"; "required": false; }; "height": { "alias": "height"; "required": false; }; "data": { "alias": "data"; "required": false; }; "margin": { "alias": "margin"; "required": false; }; "useIntersection": { "alias": "useIntersection"; "required": false; }; "isFrozen": { "alias": "isFrozen"; "required": false; }; "canToggleFullscreen": { "alias": "canToggleFullscreen"; "required": false; }; "editMode": { "alias": "editMode"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, { "changeStart": "changeStart"; "changeEnd": "changeEnd"; "toggleFullscreen": "toggleFullscreen"; }, ["templateActions"], ["c8y-dashboard-child-title", "*"], true, never>;
}
//# sourceMappingURL=dashboard-child.component.d.ts.map