@harbor/ui
Version:
Harbor shared UI components based on Clarity and Angular6
98 lines (97 loc) • 7.39 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
import { Component, Input, ChangeDetectionStrategy } from "@angular/core";
export class ChartDetailValueComponent {
constructor() {
// Default set to yaml file
this.valueMode = false;
this.valueHover = false;
this.yamlHover = true;
this.objKeys = Object.keys;
}
/**
* @return {?}
*/
ngOnInit() {
}
/**
* @return {?}
*/
get isValueMode() {
return this.valueMode;
}
/**
* @param {?} view
* @return {?}
*/
isHovering(view) {
if (view === 'value') {
return this.valueHover ? true : false;
}
else {
return this.yamlHover ? true : false;
}
}
/**
* @param {?} showYaml
* @return {?}
*/
showYamlFile(showYaml) {
this.valueMode = !showYaml;
}
/**
* @param {?} mode
* @return {?}
*/
mouseEnter(mode) {
if (mode === "value") {
this.valueHover = true;
}
else {
this.yamlHover = true;
}
}
/**
* @param {?} mode
* @return {?}
*/
mouseLeave(mode) {
if (mode === "value") {
this.valueHover = false;
}
else {
this.yamlHover = false;
}
}
}
ChartDetailValueComponent.decorators = [
{ type: Component, args: [{
selector: "hbr-chart-detail-value",
template: "<div class=\"row flex-items-xs-between values-header\">\n <div *ngIf=\"valueMode\" class=\"title-container\">\n <label>{{'HELM_CHART.SHOW_KV' | translate }}</label>\n </div>\n <div *ngIf=\"!valueMode\" class=\"title-container\">\n <label>{{'HELM_CHART.SHOW_YAML' | translate }}</label>\n </div>\n <div class=\"switch-container\">\n <span class=\"card-btn\" (click)=\"showYamlFile(false)\" (mouseenter)=\"mouseEnter('value') \" (mouseleave)=\"mouseLeave('value')\">\n <clr-icon size=\"24\" shape=\"view-list\" title='list values' [ngClass]=\"{'is-highlight': isValueMode || isHovering('value') }\"></clr-icon>\n </span>\n <span class=\"list-btn\" (click)=\"showYamlFile(true)\" (mouseenter)=\"mouseEnter('yaml') \" (mouseleave)=\"mouseLeave('yaml')\">\n <clr-icon size=\"24\" shape=\"file\" title=\"yaml file\" [ngClass]=\"{'is-highlight': !isValueMode || isHovering('yaml') }\"></clr-icon>\n </span>\n </div>\n</div>\n\n<div class=\"row value-container\">\n <div class=\"col-xs-8\" *ngIf=\"valueMode\">\n <table class=\"table\">\n <tbody>\n <tr *ngFor=\"let key of objKeys(values)\">\n <td class=\"left\">{{key}}</td>\n <td class=\"left\">{{values[key]}}</td>\n </tr>\n </tbody>\n </table>\n </div>\n <div class=\"col-xs-8\" *ngIf=\"!valueMode\">\n <div class=\"yaml-container\" [innerHTML]=\"yaml | language : 'yaml' | markdown\"></div>\n </div>\n</div>",
changeDetection: ChangeDetectionStrategy.OnPush,
styles: [".value-container ::ng-deep pre{min-height:-webkit-fit-content;min-height:-moz-fit-content;min-height:fit-content}.values-header{margin-top:12px}.values-header .title-container{margin-left:15px}.values-header .switch-container{margin-right:15px}pre{max-height:-webkit-max-content;max-height:-moz-max-content;max-height:max-content;padding-left:21px}"]
}] }
];
/** @nocollapse */
ChartDetailValueComponent.ctorParameters = () => [];
ChartDetailValueComponent.propDecorators = {
values: [{ type: Input }],
yaml: [{ type: Input }]
};
if (false) {
/** @type {?} */
ChartDetailValueComponent.prototype.values;
/** @type {?} */
ChartDetailValueComponent.prototype.yaml;
/** @type {?} */
ChartDetailValueComponent.prototype.valueMode;
/** @type {?} */
ChartDetailValueComponent.prototype.valueHover;
/** @type {?} */
ChartDetailValueComponent.prototype.yamlHover;
/** @type {?} */
ChartDetailValueComponent.prototype.objKeys;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hhcnQtZGV0YWlsLXZhbHVlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0BoYXJib3IvdWkvIiwic291cmNlcyI6WyJzcmMvaGVsbS1jaGFydC9jaGFydC1kZXRhaWwvY2hhcnQtZGV0YWlsLXZhbHVlLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7O0FBQUEsT0FBTyxFQUNMLFNBQVMsRUFDVCxLQUFLLEVBRUwsdUJBQXVCLEVBQ3hCLE1BQU0sZUFBZSxDQUFDO0FBUXZCLE1BQU07SUFXSjs7eUJBTlksS0FBSzswQkFDSixLQUFLO3lCQUNOLElBQUk7dUJBRU4sTUFBTSxDQUFDLElBQUk7S0FFTDs7OztJQUVoQixRQUFRO0tBQ1A7Ozs7UUFFVSxXQUFXO1FBQ3BCLE9BQU8sSUFBSSxDQUFDLFNBQVMsQ0FBQzs7Ozs7O0lBR3hCLFVBQVUsQ0FBQyxJQUFZO1FBQ3JCLElBQUksSUFBSSxLQUFLLE9BQU8sRUFBRTtZQUNwQixPQUFPLElBQUksQ0FBQyxVQUFVLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDO1NBQ3ZDO2FBQU07WUFDTCxPQUFPLElBQUksQ0FBQyxTQUFTLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDO1NBQ3RDO0tBQ0Y7Ozs7O0lBRUQsWUFBWSxDQUFDLFFBQWlCO1FBQzVCLElBQUksQ0FBQyxTQUFTLEdBQUcsQ0FBQyxRQUFRLENBQUM7S0FDNUI7Ozs7O0lBRUQsVUFBVSxDQUFDLElBQVk7UUFDckIsSUFBSSxJQUFJLEtBQUssT0FBTyxFQUFFO1lBQ3BCLElBQUksQ0FBQyxVQUFVLEdBQUcsSUFBSSxDQUFDO1NBQ3hCO2FBQU07WUFDTCxJQUFJLENBQUMsU0FBUyxHQUFHLElBQUksQ0FBQztTQUN2QjtLQUNGOzs7OztJQUVELFVBQVUsQ0FBQyxJQUFZO1FBQ3JCLElBQUksSUFBSSxLQUFLLE9BQU8sRUFBRTtZQUNwQixJQUFJLENBQUMsVUFBVSxHQUFHLEtBQUssQ0FBQztTQUN6QjthQUFNO1lBQ0wsSUFBSSxDQUFDLFNBQVMsR0FBRyxLQUFLLENBQUM7U0FDeEI7S0FDRjs7O1lBcERGLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsd0JBQXdCO2dCQUNsQyxtaURBQWtEO2dCQUVsRCxlQUFlLEVBQUUsdUJBQXVCLENBQUMsTUFBTTs7YUFDaEQ7Ozs7O3FCQUVFLEtBQUs7bUJBQ0wsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENvbXBvbmVudCxcbiAgSW5wdXQsXG4gIE9uSW5pdCxcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3lcbn0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiBcImhici1jaGFydC1kZXRhaWwtdmFsdWVcIixcbiAgdGVtcGxhdGVVcmw6IFwiLi9jaGFydC1kZXRhaWwtdmFsdWUuY29tcG9uZW50Lmh0bWxcIixcbiAgc3R5bGVVcmxzOiBbXCIuL2NoYXJ0LWRldGFpbC12YWx1ZS5jb21wb25lbnQuc2Nzc1wiXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2hcbn0pXG5leHBvcnQgY2xhc3MgQ2hhcnREZXRhaWxWYWx1ZUNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIEBJbnB1dCgpIHZhbHVlcztcbiAgQElucHV0KCkgeWFtbDtcblxuICAvLyBEZWZhdWx0IHNldCB0byB5YW1sIGZpbGVcbiAgdmFsdWVNb2RlID0gZmFsc2U7XG4gIHZhbHVlSG92ZXIgPSBmYWxzZTtcbiAgeWFtbEhvdmVyID0gdHJ1ZTtcblxuICBvYmpLZXlzID0gT2JqZWN0LmtleXM7XG5cbiAgY29uc3RydWN0b3IoKSB7fVxuXG4gIG5nT25Jbml0KCk6IHZvaWQge1xuICB9XG5cbiAgcHVibGljIGdldCBpc1ZhbHVlTW9kZSgpIHtcbiAgICByZXR1cm4gdGhpcy52YWx1ZU1vZGU7XG4gIH1cblxuICBpc0hvdmVyaW5nKHZpZXc6IHN0cmluZykge1xuICAgIGlmICh2aWV3ID09PSAndmFsdWUnKSB7XG4gICAgICByZXR1cm4gdGhpcy52YWx1ZUhvdmVyID8gdHJ1ZSA6IGZhbHNlO1xuICAgIH0gZWxzZSB7XG4gICAgICByZXR1cm4gdGhpcy55YW1sSG92ZXIgPyB0cnVlIDogZmFsc2U7XG4gICAgfVxuICB9XG5cbiAgc2hvd1lhbWxGaWxlKHNob3dZYW1sOiBib29sZWFuKSB7XG4gICAgdGhpcy52YWx1ZU1vZGUgPSAhc2hvd1lhbWw7XG4gIH1cblxuICBtb3VzZUVudGVyKG1vZGU6IHN0cmluZykge1xuICAgIGlmIChtb2RlID09PSBcInZhbHVlXCIpIHtcbiAgICAgIHRoaXMudmFsdWVIb3ZlciA9IHRydWU7XG4gICAgfSBlbHNlIHtcbiAgICAgIHRoaXMueWFtbEhvdmVyID0gdHJ1ZTtcbiAgICB9XG4gIH1cblxuICBtb3VzZUxlYXZlKG1vZGU6IHN0cmluZykge1xuICAgIGlmIChtb2RlID09PSBcInZhbHVlXCIpIHtcbiAgICAgIHRoaXMudmFsdWVIb3ZlciA9IGZhbHNlO1xuICAgIH0gZWxzZSB7XG4gICAgICB0aGlzLnlhbWxIb3ZlciA9IGZhbHNlO1xuICAgIH1cbiAgfVxufVxuIl19