kwikui/esm2015/lib/components/custom/label-value-pair/label-value-pair-value/label-value-pair-value.component.js

KwikID's UI Component Library in Angular

import { Component, Input } from "@angular/core";
import { assignTypeToValue } from "../label-value-pair.helper";
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "../../../../pipes/safe-html/safe-html.pipe";
export class LabelValuePairValueComponent {
    constructor() { }
    ngOnInit() {
        this.type = assignTypeToValue(this.value);
    }
    ngOnChanges(changes) {
        if (changes.hasOwnProperty("label") && !changes.label.firstChange) {
            this.value = changes.value.currentValue;
            this.type = assignTypeToValue(this.value);
        }
        if (changes.hasOwnProperty("config") && !changes.config.firstChange) {
            this.config = changes.config.currentValue;
        }
    }
}
/** @nocollapse */ LabelValuePairValueComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LabelValuePairValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
/** @nocollapse */ LabelValuePairValueComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: LabelValuePairValueComponent, selector: "kwikui-label-value-pair-value", inputs: { config: "config", value: "value" }, usesOnChanges: true, ngImport: i0, template: "<ng-container\n  *ngIf=\"value != undefined\"\n  [ngSwitch]=\"type\"\n>\n  <!-- String | Number Content -->\n  <ng-container *ngSwitchDefault>\n    <div\n      [class]=\"\n        config?.orientation == 'vertical'\n          ? 'label-value-pair-vertical-orientation'\n          : 'label-value-pair-horizontal-orientation'\n      \"\n      [ngStyle]=\"config?.customStyles?.value\"\n      [innerHTML]=\"value | kwikuiSafeHtml\"\n    ></div>\n  </ng-container>\n\n  <!-- Object Content -->\n  <ng-container *ngSwitchCase=\"'object'\">\n    <div\n      [class]=\"\n        config?.orientation == 'vertical'\n          ? 'label-value-pair-vertical-orientation'\n          : 'label-value-pair-horizontal-orientation'\n      \"\n      [ngStyle]=\"config?.customStyles?.value\"\n      >{{ value | json }}</div\n    >\n  </ng-container>\n\n  <!-- Boolean Content -->\n  <ng-container *ngSwitchCase=\"'boolean'\">\n    <!-- Show Boolean Value 'True' in Green Tick Symbol -->\n    <div\n      *ngIf=\"value\"\n      [class]=\"\n        config?.orientation == 'vertical'\n          ? 'label-value-pair-vertical-orientation'\n          : 'label-value-pair-horizontal-orientation'\n      \"\n      [ngStyle]=\"config?.customStyles?.value\"\n      style=\"display: flex; gap: 0.5rem; align-items: center; height: 100%\"\n    >\n      <div\n        style=\"\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          background-color: #34b41f;\n          border-radius: 100%;\n          height: 1rem;\n          width: 1rem;\n          padding: 0.15rem;\n        \"\n      >\n        <div\n          style=\"\n            height: 0.6rem;\n            width: 0.25rem;\n            border-bottom: 0.15rem solid white;\n            border-right: 0.15rem solid white;\n            transform: translateY(-1px) rotate(45deg);\n          \"\n        ></div>\n      </div>\n    </div>\n\n    <!-- Show Boolean Value 'False' in Red Cross Symbol -->\n    <div\n      *ngIf=\"!value\"\n      [class]=\"\n        config?.orientation == 'vertical'\n          ? 'label-value-pair-vertical-orientation'\n          : 'label-value-pair-horizontal-orientation'\n      \"\n      [ngStyle]=\"config?.customStyles?.value\"\n      style=\"display: flex; gap: 0.5rem; align-items: center; height: 100%\"\n    >\n      <div\n        style=\"\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          background-color: #f45725;\n          color: white;\n          border-radius: 100%;\n          height: 1rem;\n          width: 1rem;\n          font-size: 0.6rem;\n          padding: 0.15rem;\n        \"\n      >\n        <b>&#x2715; </b>\n      </div>\n    </div>\n  </ng-container>\n\n  <!-- Image Content -->\n  <ng-container *ngSwitchCase=\"'image'\">\n    <img\n      [class]=\"\n        config?.orientation == 'vertical'\n          ? 'label-value-pair-vertical-orientation'\n          : 'label-value-pair-horizontal-orientation'\n      \"\n      id=\"image\"\n      alt=\"Image\"\n      [src]=\"value\"\n      [ngStyle]=\"config?.customStyles?.value\"\n    />\n  </ng-container>\n\n  <!-- PDF Content -->\n  <ng-container *ngSwitchCase=\"'pdf'\">\n    <a\n      id=\"pdf\"\n      [class]=\"\n        config?.orientation == 'vertical'\n          ? 'label-value-pair-vertical-orientation'\n          : 'label-value-pair-horizontal-orientation'\n      \"\n      [href]=\"value\"\n      [ngStyle]=\"config?.customStyles?.value\"\n      target=\"_blank\"\n    >\n      View PDF\n    </a>\n  </ng-container>\n</ng-container>\n", styles: [".label-value-pair-horizontal-orientation{margin-left:.4rem}#image{height:150px}#pdf{font-weight:600;margin-bottom:.25rem}.label-value-pair-array{margin-left:.4rem}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], pipes: { "kwikuiSafeHtml": i2.KwikUISafeHtmlPipe, "json": i1.JsonPipe } });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LabelValuePairValueComponent, decorators: [{
            type: Component,
            args: [{
                    selector: "kwikui-label-value-pair-value",
                    templateUrl: "./label-value-pair-value.component.html",
                    styleUrls: ["./label-value-pair-value.component.css"]
                }]
        }], ctorParameters: function () { return []; }, propDecorators: { config: [{
                type: Input
            }], value: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGFiZWwtdmFsdWUtcGFpci12YWx1ZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9rd2lrdWkvc3JjL2xpYi9jb21wb25lbnRzL2N1c3RvbS9sYWJlbC12YWx1ZS1wYWlyL2xhYmVsLXZhbHVlLXBhaXItdmFsdWUvbGFiZWwtdmFsdWUtcGFpci12YWx1ZS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9rd2lrdWkvc3JjL2xpYi9jb21wb25lbnRzL2N1c3RvbS9sYWJlbC12YWx1ZS1wYWlyL2xhYmVsLXZhbHVlLXBhaXItdmFsdWUvbGFiZWwtdmFsdWUtcGFpci12YWx1ZS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBeUIsTUFBTSxlQUFlLENBQUM7QUFDeEUsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sNEJBQTRCLENBQUM7Ozs7QUFPL0QsTUFBTSxPQUFPLDRCQUE0QjtJQVN2QyxnQkFBZSxDQUFDO0lBRWhCLFFBQVE7UUFDTixJQUFJLENBQUMsSUFBSSxHQUFHLGlCQUFpQixDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUM1QyxDQUFDO0lBRUQsV0FBVyxDQUFDLE9BQXNCO1FBQ2hDLElBQUksT0FBTyxDQUFDLGNBQWMsQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxLQUFLLENBQUMsV0FBVyxFQUFFO1lBQ2pFLElBQUksQ0FBQyxLQUFLLEdBQUcsT0FBTyxDQUFDLEtBQUssQ0FBQyxZQUFZLENBQUM7WUFDeEMsSUFBSSxDQUFDLElBQUksR0FBRyxpQkFBaUIsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7U0FDM0M7UUFFRCxJQUFJLE9BQU8sQ0FBQyxjQUFjLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsTUFBTSxDQUFDLFdBQVcsRUFBRTtZQUNuRSxJQUFJLENBQUMsTUFBTSxHQUFHLE9BQU8sQ0FBQyxNQUFNLENBQUMsWUFBWSxDQUFDO1NBQzNDO0lBQ0gsQ0FBQzs7NklBeEJVLDRCQUE0QjtpSUFBNUIsNEJBQTRCLHdJQ1J6Qyw4L0dBaUlBOzRGRHpIYSw0QkFBNEI7a0JBTHhDLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLCtCQUErQjtvQkFDekMsV0FBVyxFQUFFLHlDQUF5QztvQkFDdEQsU0FBUyxFQUFFLENBQUMsd0NBQXdDLENBQUM7aUJBQ3REOzBFQUdDLE1BQU07c0JBREwsS0FBSztnQkFJTixLQUFLO3NCQURKLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBPbkluaXQsIFNpbXBsZUNoYW5nZXMgfSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuaW1wb3J0IHsgYXNzaWduVHlwZVRvVmFsdWUgfSBmcm9tIFwiLi4vbGFiZWwtdmFsdWUtcGFpci5oZWxwZXJcIjtcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiBcImt3aWt1aS1sYWJlbC12YWx1ZS1wYWlyLXZhbHVlXCIsXG4gIHRlbXBsYXRlVXJsOiBcIi4vbGFiZWwtdmFsdWUtcGFpci12YWx1ZS5jb21wb25lbnQuaHRtbFwiLFxuICBzdHlsZVVybHM6IFtcIi4vbGFiZWwtdmFsdWUtcGFpci12YWx1ZS5jb21wb25lbnQuY3NzXCJdXG59KVxuZXhwb3J0IGNsYXNzIExhYmVsVmFsdWVQYWlyVmFsdWVDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICBASW5wdXQoKVxuICBjb25maWc7XG5cbiAgQElucHV0KClcbiAgdmFsdWU7XG5cbiAgdHlwZTtcblxuICBjb25zdHJ1Y3RvcigpIHt9XG5cbiAgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgdGhpcy50eXBlID0gYXNzaWduVHlwZVRvVmFsdWUodGhpcy52YWx1ZSk7XG4gIH1cblxuICBuZ09uQ2hhbmdlcyhjaGFuZ2VzOiBTaW1wbGVDaGFuZ2VzKSB7XG4gICAgaWYgKGNoYW5nZXMuaGFzT3duUHJvcGVydHkoXCJsYWJlbFwiKSAmJiAhY2hhbmdlcy5sYWJlbC5maXJzdENoYW5nZSkge1xuICAgICAgdGhpcy52YWx1ZSA9IGNoYW5nZXMudmFsdWUuY3VycmVudFZhbHVlO1xuICAgICAgdGhpcy50eXBlID0gYXNzaWduVHlwZVRvVmFsdWUodGhpcy52YWx1ZSk7XG4gICAgfVxuXG4gICAgaWYgKGNoYW5nZXMuaGFzT3duUHJvcGVydHkoXCJjb25maWdcIikgJiYgIWNoYW5nZXMuY29uZmlnLmZpcnN0Q2hhbmdlKSB7XG4gICAgICB0aGlzLmNvbmZpZyA9IGNoYW5nZXMuY29uZmlnLmN1cnJlbnRWYWx1ZTtcbiAgICB9XG4gIH1cbn1cbiIsIjxuZy1jb250YWluZXJcbiAgKm5nSWY9XCJ2YWx1ZSAhPSB1bmRlZmluZWRcIlxuICBbbmdTd2l0Y2hdPVwidHlwZVwiXG4+XG4gIDwhLS0gU3RyaW5nIHwgTnVtYmVyIENvbnRlbnQgLS0+XG4gIDxuZy1jb250YWluZXIgKm5nU3dpdGNoRGVmYXVsdD5cbiAgICA8ZGl2XG4gICAgICBbY2xhc3NdPVwiXG4gICAgICAgIGNvbmZpZz8ub3JpZW50YXRpb24gPT0gJ3ZlcnRpY2FsJ1xuICAgICAgICAgID8gJ2xhYmVsLXZhbHVlLXBhaXItdmVydGljYWwtb3JpZW50YXRpb24nXG4gICAgICAgICAgOiAnbGFiZWwtdmFsdWUtcGFpci1ob3Jpem9udGFsLW9yaWVudGF0aW9uJ1xuICAgICAgXCJcbiAgICAgIFtuZ1N0eWxlXT1cImNvbmZpZz8uY3VzdG9tU3R5bGVzPy52YWx1ZVwiXG4gICAgICBbaW5uZXJIVE1MXT1cInZhbHVlIHwga3dpa3VpU2FmZUh0bWxcIlxuICAgID48L2Rpdj5cbiAgPC9uZy1jb250YWluZXI+XG5cbiAgPCEtLSBPYmplY3QgQ29udGVudCAtLT5cbiAgPG5nLWNvbnRhaW5lciAqbmdTd2l0Y2hDYXNlPVwiJ29iamVjdCdcIj5cbiAgICA8ZGl2XG4gICAgICBbY2xhc3NdPVwiXG4gICAgICAgIGNvbmZpZz8ub3JpZW50YXRpb24gPT0gJ3ZlcnRpY2FsJ1xuICAgICAgICAgID8gJ2xhYmVsLXZhbHVlLXBhaXItdmVydGljYWwtb3JpZW50YXRpb24nXG4gICAgICAgICAgOiAnbGFiZWwtdmFsdWUtcGFpci1ob3Jpem9udGFsLW9yaWVudGF0aW9uJ1xuICAgICAgXCJcbiAgICAgIFtuZ1N0eWxlXT1cImNvbmZpZz8uY3VzdG9tU3R5bGVzPy52YWx1ZVwiXG4gICAgICA+e3sgdmFsdWUgfCBqc29uIH19PC9kaXZcbiAgICA+XG4gIDwvbmctY29udGFpbmVyPlxuXG4gIDwhLS0gQm9vbGVhbiBDb250ZW50IC0tPlxuICA8bmctY29udGFpbmVyICpuZ1N3aXRjaENhc2U9XCInYm9vbGVhbidcIj5cbiAgICA8IS0tIFNob3cgQm9vbGVhbiBWYWx1ZSAnVHJ1ZScgaW4gR3JlZW4gVGljayBTeW1ib2wgLS0+XG4gICAgPGRpdlxuICAgICAgKm5nSWY9XCJ2YWx1ZVwiXG4gICAgICBbY2xhc3NdPVwiXG4gICAgICAgIGNvbmZpZz8ub3JpZW50YXRpb24gPT0gJ3ZlcnRpY2FsJ1xuICAgICAgICAgID8gJ2xhYmVsLXZhbHVlLXBhaXItdmVydGljYWwtb3JpZW50YXRpb24nXG4gICAgICAgICAgOiAnbGFiZWwtdmFsdWUtcGFpci1ob3Jpem9udGFsLW9yaWVudGF0aW9uJ1xuICAgICAgXCJcbiAgICAgIFtuZ1N0eWxlXT1cImNvbmZpZz8uY3VzdG9tU3R5bGVzPy52YWx1ZVwiXG4gICAgICBzdHlsZT1cImRpc3BsYXk6IGZsZXg7IGdhcDogMC41cmVtOyBhbGlnbi1pdGVtczogY2VudGVyOyBoZWlnaHQ6IDEwMCVcIlxuICAgID5cbiAgICAgIDxkaXZcbiAgICAgICAgc3R5bGU9XCJcbiAgICAgICAgICBkaXNwbGF5OiBmbGV4O1xuICAgICAgICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgICAgICAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogIzM0YjQxZjtcbiAgICAgICAgICBib3JkZXItcmFkaXVzOiAxMDAlO1xuICAgICAgICAgIGhlaWdodDogMXJlbTtcbiAgICAgICAgICB3aWR0aDogMXJlbTtcbiAgICAgICAgICBwYWRkaW5nOiAwLjE1cmVtO1xuICAgICAgICBcIlxuICAgICAgPlxuICAgICAgICA8ZGl2XG4gICAgICAgICAgc3R5bGU9XCJcbiAgICAgICAgICAgIGhlaWdodDogMC42cmVtO1xuICAgICAgICAgICAgd2lkdGg6IDAuMjVyZW07XG4gICAgICAgICAgICBib3JkZXItYm90dG9tOiAwLjE1cmVtIHNvbGlkIHdoaXRlO1xuICAgICAgICAgICAgYm9yZGVyLXJpZ2h0OiAwLjE1cmVtIHNvbGlkIHdoaXRlO1xuICAgICAgICAgICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKC0xcHgpIHJvdGF0ZSg0NWRlZyk7XG4gICAgICAgICAgXCJcbiAgICAgICAgPjwvZGl2PlxuICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG5cbiAgICA8IS0tIFNob3cgQm9vbGVhbiBWYWx1ZSAnRmFsc2UnIGluIFJlZCBDcm9zcyBTeW1ib2wgLS0+XG4gICAgPGRpdlxuICAgICAgKm5nSWY9XCIhdmFsdWVcIlxuICAgICAgW2NsYXNzXT1cIlxuICAgICAgICBjb25maWc/Lm9yaWVudGF0aW9uID09ICd2ZXJ0aWNhbCdcbiAgICAgICAgICA/ICdsYWJlbC12YWx1ZS1wYWlyLXZlcnRpY2FsLW9yaWVudGF0aW9uJ1xuICAgICAgICAgIDogJ2xhYmVsLXZhbHVlLXBhaXItaG9yaXpvbnRhbC1vcmllbnRhdGlvbidcbiAgICAgIFwiXG4gICAgICBbbmdTdHlsZV09XCJjb25maWc/LmN1c3RvbVN0eWxlcz8udmFsdWVcIlxuICAgICAgc3R5bGU9XCJkaXNwbGF5OiBmbGV4OyBnYXA6IDAuNXJlbTsgYWxpZ24taXRlbXM6IGNlbnRlcjsgaGVpZ2h0OiAxMDAlXCJcbiAgICA+XG4gICAgICA8ZGl2XG4gICAgICAgIHN0eWxlPVwiXG4gICAgICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgICAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgICAgICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6ICNmNDU3MjU7XG4gICAgICAgICAgY29sb3I6IHdoaXRlO1xuICAgICAgICAgIGJvcmRlci1yYWRpdXM6IDEwMCU7XG4gICAgICAgICAgaGVpZ2h0OiAxcmVtO1xuICAgICAgICAgIHdpZHRoOiAxcmVtO1xuICAgICAgICAgIGZvbnQtc2l6ZTogMC42cmVtO1xuICAgICAgICAgIHBhZGRpbmc6IDAuMTVyZW07XG4gICAgICAgIFwiXG4gICAgICA+XG4gICAgICAgIDxiPiYjeDI3MTU7IDwvYj5cbiAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICA8L25nLWNvbnRhaW5lcj5cblxuICA8IS0tIEltYWdlIENvbnRlbnQgLS0+XG4gIDxuZy1jb250YWluZXIgKm5nU3dpdGNoQ2FzZT1cIidpbWFnZSdcIj5cbiAgICA8aW1nXG4gICAgICBbY2xhc3NdPVwiXG4gICAgICAgIGNvbmZpZz8ub3JpZW50YXRpb24gPT0gJ3ZlcnRpY2FsJ1xuICAgICAgICAgID8gJ2xhYmVsLXZhbHVlLXBhaXItdmVydGljYWwtb3JpZW50YXRpb24nXG4gICAgICAgICAgOiAnbGFiZWwtdmFsdWUtcGFpci1ob3Jpem9udGFsLW9yaWVudGF0aW9uJ1xuICAgICAgXCJcbiAgICAgIGlkPVwiaW1hZ2VcIlxuICAgICAgYWx0PVwiSW1hZ2VcIlxuICAgICAgW3NyY109XCJ2YWx1ZVwiXG4gICAgICBbbmdTdHlsZV09XCJjb25maWc/LmN1c3RvbVN0eWxlcz8udmFsdWVcIlxuICAgIC8+XG4gIDwvbmctY29udGFpbmVyPlxuXG4gIDwhLS0gUERGIENvbnRlbnQgLS0+XG4gIDxuZy1jb250YWluZXIgKm5nU3dpdGNoQ2FzZT1cIidwZGYnXCI+XG4gICAgPGFcbiAgICAgIGlkPVwicGRmXCJcbiAgICAgIFtjbGFzc109XCJcbiAgICAgICAgY29uZmlnPy5vcmllbnRhdGlvbiA9PSAndmVydGljYWwnXG4gICAgICAgICAgPyAnbGFiZWwtdmFsdWUtcGFpci12ZXJ0aWNhbC1vcmllbnRhdGlvbidcbiAgICAgICAgICA6ICdsYWJlbC12YWx1ZS1wYWlyLWhvcml6b250YWwtb3JpZW50YXRpb24nXG4gICAgICBcIlxuICAgICAgW2hyZWZdPVwidmFsdWVcIlxuICAgICAgW25nU3R5bGVdPVwiY29uZmlnPy5jdXN0b21TdHlsZXM/LnZhbHVlXCJcbiAgICAgIHRhcmdldD1cIl9ibGFua1wiXG4gICAgPlxuICAgICAgVmlldyBQREZcbiAgICA8L2E+XG4gIDwvbmctY29udGFpbmVyPlxuPC9uZy1jb250YWluZXI+XG4iXX0=