@hpe/angular-toolkit/esm2015/gui/panel/card-panel/card-panel.js

Hewlett-Packard Enterprise : Angular toolkit for rapid project development

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes} checked by tsc
 */
//=============================================================================
//===
//=== (C) Copyright 2018 Hewlett Packard Enterprise Development LP.
//===
//=== Use of this source code is governed by an MIT-style license that can be
//=== found in the LICENSE file
//=============================================================================
import { Component, Input } from '@angular/core';
import { animate, state, style, transition, trigger } from '@angular/animations';
import { LabelService } from "@hpe/angular-toolkit/service";
//=============================================================================
export class CardPanel {
    /**
     * @param {?} labelService
     */
    constructor(labelService) {
        this.labelService = labelService;
        this.toggleButton = true;
        this.overflowUnset = true;
        this.state = "open";
    }
    /**
     * @return {?}
     */
    get cardOpen() {
        return this.state == "open";
    }
    /**
     * @return {?}
     */
    get tooltip() {
        return this.labelService.getLabel("card-panel", "toggle.tooltip");
    }
    /**
     * @return {?}
     */
    onToggleClick() {
        this.state = (this.state == 'open')
            ? 'closed'
            : 'open';
    }
    /**
     * @param {?} e
     * @return {?}
     */
    animationStart(e) {
        this.overflowUnset = false;
    }
    /**
     * @param {?} e
     * @return {?}
     */
    animationEnd(e) {
        this.overflowUnset = this.cardOpen;
    }
}
CardPanel.decorators = [
    { type: Component, args: [{
                selector: 'hpe-card-panel',
                template: `<!--
=============================================================================
===
=== (C) Copyright 2018 Hewlett Packard Enterprise Development LP.
===
=== Use of this source code is governed by an MIT-style license that can be
=== found in the LICENSE file
=============================================================================
-->

<mat-card>
	<hpe-title-panel icon="{{icon}}" title="{{title}}" >
		<ng-content select="[cpPostTitle]" tpPostTitle></ng-content>

		<ng-content select="[cpControl]" tpControl></ng-content>

		<button mat-button *ngIf="toggleButton" (click)="onToggleClick()" [title]="tooltip" tpControl class="buttonStyle">
			<hpe-title-icon name="fa-angle-up"   *ngIf="cardOpen"></hpe-title-icon>
			<hpe-title-icon name="fa-angle-down" *ngIf="!cardOpen"></hpe-title-icon>
		</button>

	</hpe-title-panel>

	<div [@focusPanel]      = "state"
		 (@focusPanel.start)= "animationStart($event)"
		 (@focusPanel.done) = "animationEnd($event)"
		 [style.overflow]   = "overflowUnset ? 'unset' : 'hidden'">

		<ng-content select="[cpBody]"></ng-content>
	</div>

</mat-card>
`,
                styles: [`mat-card{margin:1rem;padding:0}.buttonStyle{min-width:0;padding:0 8px}`],
                animations: [
                    trigger('focusPanel', [
                        state('open', style({ height: '*' })),
                        state('closed', style({ height: 0 })),
                        transition('open => closed', animate('500ms ease-in')),
                        transition('closed => open', animate('500ms ease-out'))
                    ])
                ]
            },] },
];
/** @nocollapse */
CardPanel.ctorParameters = () => [
    { type: LabelService, },
];
CardPanel.propDecorators = {
    "icon": [{ type: Input },],
    "title": [{ type: Input },],
    "toggleButton": [{ type: Input },],
};
function CardPanel_tsickle_Closure_declarations() {
    /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
    CardPanel.decorators;
    /**
     * @nocollapse
     * @type {function(): !Array<(null|{type: ?, decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>)})>}
     */
    CardPanel.ctorParameters;
    /** @type {!Object<string,!Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
    CardPanel.propDecorators;
    /** @type {?} */
    CardPanel.prototype.icon;
    /** @type {?} */
    CardPanel.prototype.title;
    /** @type {?} */
    CardPanel.prototype.toggleButton;
    /** @type {?} */
    CardPanel.prototype.state;
    /** @type {?} */
    CardPanel.prototype.overflowUnset;
    /** @type {?} */
    CardPanel.prototype.labelService;
}
//=============================================================================

//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2FyZC1wYW5lbC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0BocGUvYW5ndWxhci10b29sa2l0L2d1aS9wYW5lbC8iLCJzb3VyY2VzIjpbImNhcmQtcGFuZWwvY2FyZC1wYW5lbC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7OztBQVFBLE9BQU8sRUFBQyxTQUFTLEVBQUUsS0FBSyxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBQy9DLE9BQU8sRUFBQyxPQUFPLEVBQUUsS0FBSyxFQUFFLEtBQUssRUFBRSxVQUFVLEVBQUUsT0FBTyxFQUFDLE1BQU0scUJBQXFCLENBQUM7QUFFL0UsT0FBTyxFQUFDLFlBQVksRUFBQyxNQUFNLDhCQUE4QixDQUFDO0FBSTFEO0FBZ0RBLE1BQU07Ozs7SUF1QkwsWUFBb0IsWUFBMkI7UUFBM0IsaUJBQVksR0FBWixZQUFZLENBQWU7UUFDOUMsSUFBSSxDQUFDLFlBQVksR0FBSSxJQUFJLENBQUM7UUFDMUIsSUFBSSxDQUFDLGFBQWEsR0FBRyxJQUFJLENBQUM7UUFDMUIsSUFBSSxDQUFDLEtBQUssR0FBVyxNQUFNLENBQUM7S0FDNUI7Ozs7SUFRRCxJQUFJLFFBQVE7UUFDWCxNQUFNLENBQUMsSUFBSSxDQUFDLEtBQUssSUFBSSxNQUFNLENBQUM7S0FDNUI7Ozs7SUFJRCxJQUFJLE9BQU87UUFDVixNQUFNLENBQUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxRQUFRLENBQUMsWUFBWSxFQUFFLGdCQUFnQixDQUFDLENBQUM7S0FDbEU7Ozs7SUFRRCxhQUFhO1FBRVosSUFBSSxDQUFDLEtBQUssR0FBRyxDQUFDLElBQUksQ0FBQyxLQUFLLElBQUksTUFBTSxDQUFDO1lBQ2xDLENBQUMsQ0FBQyxRQUFRO1lBQ1YsQ0FBQyxDQUFDLE1BQU0sQ0FBQztLQUNWOzs7OztJQUlELGNBQWMsQ0FBQyxDQUFDO1FBQ2YsSUFBSSxDQUFDLGFBQWEsR0FBSSxLQUFLLENBQUM7S0FDNUI7Ozs7O0lBSUQsWUFBWSxDQUFDLENBQUM7UUFDYixJQUFJLENBQUMsYUFBYSxHQUFJLElBQUksQ0FBQyxRQUFRLENBQUM7S0FDcEM7OztZQXBIRCxTQUFTLFNBQUM7Z0JBQ1YsUUFBUSxFQUFVLGdCQUFnQjtnQkFDbEMsUUFBUSxFQUFFOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztDQWdDVjtnQkFDQSxNQUFNLEVBQUUsQ0FBQyx3RUFBd0UsQ0FBQztnQkFDbEYsVUFBVSxFQUFFO29CQUNYLE9BQU8sQ0FBQyxZQUFZLEVBQUU7d0JBQ3JCLEtBQUssQ0FBQyxNQUFNLEVBQUksS0FBSyxDQUFDLEVBQUUsTUFBTSxFQUFFLEdBQUcsRUFBRSxDQUFDLENBQUM7d0JBQ3ZDLEtBQUssQ0FBQyxRQUFRLEVBQUUsS0FBSyxDQUFDLEVBQUUsTUFBTSxFQUFFLENBQUMsRUFBSSxDQUFDLENBQUM7d0JBQ3ZDLFVBQVUsQ0FBQyxnQkFBZ0IsRUFBRSxPQUFPLENBQUMsZUFBZSxDQUFDLENBQUM7d0JBQ3RELFVBQVUsQ0FBQyxnQkFBZ0IsRUFBRSxPQUFPLENBQUMsZ0JBQWdCLENBQUMsQ0FBQztxQkFDdkQsQ0FBQztpQkFDRjthQUNEOzs7O1lBaERPLFlBQVk7OztxQkE0RGxCLEtBQUs7c0JBQ0wsS0FBSzs2QkFDTCxLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiLy89PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PVxuLy89PT1cbi8vPT09IChDKSBDb3B5cmlnaHQgMjAxOCBIZXdsZXR0IFBhY2thcmQgRW50ZXJwcmlzZSBEZXZlbG9wbWVudCBMUC5cbi8vPT09XG4vLz09PSBVc2Ugb2YgdGhpcyBzb3VyY2UgY29kZSBpcyBnb3Zlcm5lZCBieSBhbiBNSVQtc3R5bGUgbGljZW5zZSB0aGF0IGNhbiBiZVxuLy89PT0gZm91bmQgaW4gdGhlIExJQ0VOU0UgZmlsZVxuLy89PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PVxuXG5pbXBvcnQge0NvbXBvbmVudCwgSW5wdXR9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHthbmltYXRlLCBzdGF0ZSwgc3R5bGUsIHRyYW5zaXRpb24sIHRyaWdnZXJ9IGZyb20gJ0Bhbmd1bGFyL2FuaW1hdGlvbnMnO1xuXG5pbXBvcnQge0xhYmVsU2VydmljZX0gZnJvbSBcIkBocGUvYW5ndWxhci10b29sa2l0L3NlcnZpY2VcIjtcblxuLy89PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PVxuXG5AQ29tcG9uZW50KHtcblx0c2VsZWN0b3IgICAgOiAgICAgJ2hwZS1jYXJkLXBhbmVsJyxcblx0dGVtcGxhdGU6IGA8IS0tXG49PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PVxuPT09XG49PT0gKEMpIENvcHlyaWdodCAyMDE4IEhld2xldHQgUGFja2FyZCBFbnRlcnByaXNlIERldmVsb3BtZW50IExQLlxuPT09XG49PT0gVXNlIG9mIHRoaXMgc291cmNlIGNvZGUgaXMgZ292ZXJuZWQgYnkgYW4gTUlULXN0eWxlIGxpY2Vuc2UgdGhhdCBjYW4gYmVcbj09PSBmb3VuZCBpbiB0aGUgTElDRU5TRSBmaWxlXG49PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PVxuLS0+XG5cbjxtYXQtY2FyZD5cblx0PGhwZS10aXRsZS1wYW5lbCBpY29uPVwie3tpY29ufX1cIiB0aXRsZT1cInt7dGl0bGV9fVwiID5cblx0XHQ8bmctY29udGVudCBzZWxlY3Q9XCJbY3BQb3N0VGl0bGVdXCIgdHBQb3N0VGl0bGU+PC9uZy1jb250ZW50PlxuXG5cdFx0PG5nLWNvbnRlbnQgc2VsZWN0PVwiW2NwQ29udHJvbF1cIiB0cENvbnRyb2w+PC9uZy1jb250ZW50PlxuXG5cdFx0PGJ1dHRvbiBtYXQtYnV0dG9uICpuZ0lmPVwidG9nZ2xlQnV0dG9uXCIgKGNsaWNrKT1cIm9uVG9nZ2xlQ2xpY2soKVwiIFt0aXRsZV09XCJ0b29sdGlwXCIgdHBDb250cm9sIGNsYXNzPVwiYnV0dG9uU3R5bGVcIj5cblx0XHRcdDxocGUtdGl0bGUtaWNvbiBuYW1lPVwiZmEtYW5nbGUtdXBcIiAgICpuZ0lmPVwiY2FyZE9wZW5cIj48L2hwZS10aXRsZS1pY29uPlxuXHRcdFx0PGhwZS10aXRsZS1pY29uIG5hbWU9XCJmYS1hbmdsZS1kb3duXCIgKm5nSWY9XCIhY2FyZE9wZW5cIj48L2hwZS10aXRsZS1pY29uPlxuXHRcdDwvYnV0dG9uPlxuXG5cdDwvaHBlLXRpdGxlLXBhbmVsPlxuXG5cdDxkaXYgW0Bmb2N1c1BhbmVsXSAgICAgID0gXCJzdGF0ZVwiXG5cdFx0IChAZm9jdXNQYW5lbC5zdGFydCk9IFwiYW5pbWF0aW9uU3RhcnQoJGV2ZW50KVwiXG5cdFx0IChAZm9jdXNQYW5lbC5kb25lKSA9IFwiYW5pbWF0aW9uRW5kKCRldmVudClcIlxuXHRcdCBbc3R5bGUub3ZlcmZsb3ddICAgPSBcIm92ZXJmbG93VW5zZXQgPyAndW5zZXQnIDogJ2hpZGRlbidcIj5cblxuXHRcdDxuZy1jb250ZW50IHNlbGVjdD1cIltjcEJvZHldXCI+PC9uZy1jb250ZW50PlxuXHQ8L2Rpdj5cblxuPC9tYXQtY2FyZD5cbmAsXG5cdHN0eWxlczogW2BtYXQtY2FyZHttYXJnaW46MXJlbTtwYWRkaW5nOjB9LmJ1dHRvblN0eWxle21pbi13aWR0aDowO3BhZGRpbmc6MCA4cHh9YF0sXG5cdGFuaW1hdGlvbnM6IFtcblx0XHR0cmlnZ2VyKCdmb2N1c1BhbmVsJywgW1xuXHRcdFx0c3RhdGUoJ29wZW4nLCAgIHN0eWxlKHsgaGVpZ2h0OiAnKicgfSkpLFxuXHRcdFx0c3RhdGUoJ2Nsb3NlZCcsIHN0eWxlKHsgaGVpZ2h0OiAwICAgfSkpLFxuXHRcdFx0dHJhbnNpdGlvbignb3BlbiA9PiBjbG9zZWQnLCBhbmltYXRlKCc1MDBtcyBlYXNlLWluJykpLFxuXHRcdFx0dHJhbnNpdGlvbignY2xvc2VkID0+IG9wZW4nLCBhbmltYXRlKCc1MDBtcyBlYXNlLW91dCcpKVxuXHRcdF0pXG5cdF1cbn0pXG5cbi8vPT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT1cblxuZXhwb3J0IGNsYXNzIENhcmRQYW5lbCB7XG5cblx0Ly8tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tXG5cdC8vLS0tXG5cdC8vLS0tIFZhcmlhYmxlc1xuXHQvLy0tLVxuXHQvLy0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS1cblxuXHRASW5wdXQoKSBpY29uICAgICAgICAgOiBzdHJpbmc7XG5cdEBJbnB1dCgpIHRpdGxlICAgICAgICA6IHN0cmluZztcblx0QElucHV0KCkgdG9nZ2xlQnV0dG9uIDogYm9vbGVhbjtcblxuXHQvLy0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS1cblxuXHRzdGF0ZSAgICAgICAgIDogc3RyaW5nO1xuXHRvdmVyZmxvd1Vuc2V0IDogYm9vbGVhbjtcblxuXHQvLy0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS1cblx0Ly8tLS1cblx0Ly8tLS0gQ29uc3RydWN0b3Jcblx0Ly8tLS1cblx0Ly8tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tXG5cblx0Y29uc3RydWN0b3IocHJpdmF0ZSBsYWJlbFNlcnZpY2UgOiBMYWJlbFNlcnZpY2UpIHtcblx0XHR0aGlzLnRvZ2dsZUJ1dHRvbiAgPSB0cnVlO1xuXHRcdHRoaXMub3ZlcmZsb3dVbnNldCA9IHRydWU7XG5cdFx0dGhpcy5zdGF0ZSAgICAgICAgID0gXCJvcGVuXCI7XG5cdH1cblxuXHQvLy0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS1cblx0Ly8tLS1cblx0Ly8tLS0gQVBJIG1ldGhvZHNcblx0Ly8tLS1cblx0Ly8tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tXG5cblx0Z2V0IGNhcmRPcGVuKCkgOiBib29sZWFuIHtcblx0XHRyZXR1cm4gdGhpcy5zdGF0ZSA9PSBcIm9wZW5cIjtcblx0fVxuXG5cdC8vLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLVxuXG5cdGdldCB0b29sdGlwKCkgOiBzdHJpbmcge1xuXHRcdHJldHVybiB0aGlzLmxhYmVsU2VydmljZS5nZXRMYWJlbChcImNhcmQtcGFuZWxcIiwgXCJ0b2dnbGUudG9vbHRpcFwiKTtcblx0fVxuXG5cdC8vLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLVxuXHQvLy0tLVxuXHQvLy0tLSBFdmVudHNcblx0Ly8tLS1cblx0Ly8tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tXG5cblx0b25Ub2dnbGVDbGljaygpIHtcblxuXHRcdHRoaXMuc3RhdGUgPSAodGhpcy5zdGF0ZSA9PSAnb3BlbicpXG5cdFx0XHQ/ICdjbG9zZWQnXG5cdFx0XHQ6ICdvcGVuJztcblx0fVxuXG5cdC8vLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLVxuXG5cdGFuaW1hdGlvblN0YXJ0KGUpIHtcblx0XHR0aGlzLm92ZXJmbG93VW5zZXQgID0gZmFsc2U7XG5cdH1cblxuXHQvLy0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS1cblxuXHRhbmltYXRpb25FbmQoZSkge1xuXHRcdHRoaXMub3ZlcmZsb3dVbnNldCAgPSB0aGlzLmNhcmRPcGVuO1xuXHR9XG59XG5cbi8vPT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT1cbiJdfQ==