kwikui
Version:
KwikID's UI Component Library in Angular
57 lines • 11.2 kB
JavaScript
import { Component, Input } from "@angular/core";
import { DEFAULT_VALUES, VALIDATE_KEY_VALUES } from "./label-value-pair.constants";
import { throwErrorMessage } from "../../../helpers/kwikui.common.helpers";
import { isValidKeyValue } from "./label-value-pair.validation";
import * as i0 from "@angular/core";
import * as i1 from "./label-value-pair-label/label-value-pair-label.component";
import * as i2 from "./label-value-pair-separator/label-value-pair-separator.component";
import * as i3 from "./label-value-pair-value/label-value-pair-value.component";
import * as i4 from "./label-value-pair-placeholder/label-value-pair-placeholder.component";
import * as i5 from "@angular/common";
export class KwikUILabelValuePairComponent {
constructor() {
this.config = DEFAULT_VALUES.config;
this.data = DEFAULT_VALUES.data;
this.id = DEFAULT_VALUES.id;
}
ngOnInit() { }
ngOnChanges(changes) {
const verifyChange = (key) => {
return changes.hasOwnProperty(key) && !changes[key].firstChange;
};
for (const change of Object.entries(changes)) {
const key = change[0];
const value = change[1].currentValue;
this.validateInputProperty(key, value);
}
if (verifyChange("config")) {
this.config = changes.config.currentValue;
}
if (verifyChange("data")) {
this.data = changes.data.currentValue;
}
}
validateInputProperty(key, value) {
if (VALIDATE_KEY_VALUES[key] && !isValidKeyValue(key, value)) {
this[key] = DEFAULT_VALUES[key];
throwErrorMessage("kwikui-label-value-pair", this.id, key, value, DEFAULT_VALUES[key]);
}
}
}
/** @nocollapse */ KwikUILabelValuePairComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikUILabelValuePairComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
/** @nocollapse */ KwikUILabelValuePairComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: KwikUILabelValuePairComponent, selector: "kwikui-label-value-pair", inputs: { config: "config", data: "data", id: "id" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngFor=\"let field of data; let index = index\">\n <div\n *ngIf=\"field?.value || config?.placeholder\"\n class=\"label-value-pair-container\"\n [ngStyle]=\"config?.customStyles?.container\"\n [class.label-value-pair-container-vertical]=\"\n config?.orientation == 'vertical'\n \"\n >\n <div class=\"label-value-pair-container-label-separator\">\n <kwikui-label-value-pair-label\n [config]=\"config\"\n [label]=\"field?.label\"\n ></kwikui-label-value-pair-label>\n\n <kwikui-label-value-pair-separator\n [separator]=\"config?.separator\"\n ></kwikui-label-value-pair-separator>\n </div>\n\n <div>\n <kwikui-label-value-pair-value\n *ngIf=\"field?.value != undefined\"\n [config]=\"config\"\n [value]=\"field?.value\"\n ></kwikui-label-value-pair-value>\n\n <kwikui-label-value-pair-placeholder\n *ngIf=\"field?.value == undefined\"\n [placeholder]=\"config?.placeholder\"\n ></kwikui-label-value-pair-placeholder>\n </div>\n </div>\n</ng-container>\n", styles: [".label-value-pair-container{display:flex;flex-direction:row;margin:.15rem 0}.label-value-pair-container.label-value-pair-container-vertical{flex-direction:column}.label-value-pair-container .label-value-pair-container-label-separator{display:flex;flex-direction:row}\n"], components: [{ type: i1.LabelValuePairLabelComponent, selector: "kwikui-label-value-pair-label", inputs: ["label", "config"] }, { type: i2.LabelValuePairSeparatorComponent, selector: "kwikui-label-value-pair-separator", inputs: ["separator"] }, { type: i3.LabelValuePairValueComponent, selector: "kwikui-label-value-pair-value", inputs: ["config", "value"] }, { type: i4.LabelValuePairPlaceholderComponent, selector: "kwikui-label-value-pair-placeholder", inputs: ["placeholder"] }], directives: [{ type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikUILabelValuePairComponent, decorators: [{
type: Component,
args: [{
selector: "kwikui-label-value-pair",
templateUrl: "./label-value-pair.component.html",
styleUrls: ["./label-value-pair.component.scss"]
}]
}], ctorParameters: function () { return []; }, propDecorators: { config: [{
type: Input
}], data: [{
type: Input
}], id: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGFiZWwtdmFsdWUtcGFpci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9rd2lrdWkvc3JjL2xpYi9jb21wb25lbnRzL2N1c3RvbS9sYWJlbC12YWx1ZS1wYWlyL2xhYmVsLXZhbHVlLXBhaXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMva3dpa3VpL3NyYy9saWIvY29tcG9uZW50cy9jdXN0b20vbGFiZWwtdmFsdWUtcGFpci9sYWJlbC12YWx1ZS1wYWlyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUF5QixNQUFNLGVBQWUsQ0FBQztBQUN4RSxPQUFPLEVBQ0wsY0FBYyxFQUNkLG1CQUFtQixFQUNwQixNQUFNLDhCQUE4QixDQUFDO0FBQ3RDLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLHdDQUF3QyxDQUFDO0FBQzNFLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSwrQkFBK0IsQ0FBQzs7Ozs7OztBQU9oRSxNQUFNLE9BQU8sNkJBQTZCO0lBT3hDO1FBTlMsV0FBTSxHQUFHLGNBQWMsQ0FBQyxNQUFNLENBQUM7UUFFL0IsU0FBSSxHQUFHLGNBQWMsQ0FBQyxJQUFJLENBQUM7UUFFM0IsT0FBRSxHQUFHLGNBQWMsQ0FBQyxFQUFFLENBQUM7SUFFakIsQ0FBQztJQUVoQixRQUFRLEtBQVUsQ0FBQztJQUVuQixXQUFXLENBQUMsT0FBc0I7UUFDaEMsTUFBTSxZQUFZLEdBQUcsQ0FBQyxHQUFXLEVBQUUsRUFBRTtZQUNuQyxPQUFPLE9BQU8sQ0FBQyxjQUFjLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsR0FBRyxDQUFDLENBQUMsV0FBVyxDQUFDO1FBQ2xFLENBQUMsQ0FBQztRQUVGLEtBQUssTUFBTSxNQUFNLElBQUksTUFBTSxDQUFDLE9BQU8sQ0FBQyxPQUFPLENBQUMsRUFBRTtZQUM1QyxNQUFNLEdBQUcsR0FBVyxNQUFNLENBQUMsQ0FBQyxDQUFDLENBQUM7WUFDOUIsTUFBTSxLQUFLLEdBQVEsTUFBTSxDQUFDLENBQUMsQ0FBQyxDQUFDLFlBQVksQ0FBQztZQUMxQyxJQUFJLENBQUMscUJBQXFCLENBQUMsR0FBRyxFQUFFLEtBQUssQ0FBQyxDQUFDO1NBQ3hDO1FBRUQsSUFBSSxZQUFZLENBQUMsUUFBUSxDQUFDLEVBQUU7WUFDMUIsSUFBSSxDQUFDLE1BQU0sR0FBRyxPQUFPLENBQUMsTUFBTSxDQUFDLFlBQVksQ0FBQztTQUMzQztRQUNELElBQUksWUFBWSxDQUFDLE1BQU0sQ0FBQyxFQUFFO1lBQ3hCLElBQUksQ0FBQyxJQUFJLEdBQUcsT0FBTyxDQUFDLElBQUksQ0FBQyxZQUFZLENBQUM7U0FDdkM7SUFDSCxDQUFDO0lBRU8scUJBQXFCLENBQUMsR0FBVyxFQUFFLEtBQVU7UUFDbkQsSUFBSSxtQkFBbUIsQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLGVBQWUsQ0FBQyxHQUFHLEVBQUUsS0FBSyxDQUFDLEVBQUU7WUFDNUQsSUFBSSxDQUFDLEdBQUcsQ0FBQyxHQUFHLGNBQWMsQ0FBQyxHQUFHLENBQUMsQ0FBQztZQUNoQyxpQkFBaUIsQ0FDZix5QkFBeUIsRUFDekIsSUFBSSxDQUFDLEVBQUUsRUFDUCxHQUFHLEVBQ0gsS0FBSyxFQUNMLGNBQWMsQ0FBQyxHQUFHLENBQUMsQ0FDcEIsQ0FBQztTQUNIO0lBQ0gsQ0FBQzs7OElBekNVLDZCQUE2QjtrSUFBN0IsNkJBQTZCLDBJQ2IxQywwa0NBa0NBOzRGRHJCYSw2QkFBNkI7a0JBTHpDLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLHlCQUF5QjtvQkFDbkMsV0FBVyxFQUFFLG1DQUFtQztvQkFDaEQsU0FBUyxFQUFFLENBQUMsbUNBQW1DLENBQUM7aUJBQ2pEOzBFQUVVLE1BQU07c0JBQWQsS0FBSztnQkFFRyxJQUFJO3NCQUFaLEtBQUs7Z0JBRUcsRUFBRTtzQkFBVixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgT25Jbml0LCBTaW1wbGVDaGFuZ2VzIH0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcbmltcG9ydCB7XG4gIERFRkFVTFRfVkFMVUVTLFxuICBWQUxJREFURV9LRVlfVkFMVUVTXG59IGZyb20gXCIuL2xhYmVsLXZhbHVlLXBhaXIuY29uc3RhbnRzXCI7XG5pbXBvcnQgeyB0aHJvd0Vycm9yTWVzc2FnZSB9IGZyb20gXCIuLi8uLi8uLi9oZWxwZXJzL2t3aWt1aS5jb21tb24uaGVscGVyc1wiO1xuaW1wb3J0IHsgaXNWYWxpZEtleVZhbHVlIH0gZnJvbSBcIi4vbGFiZWwtdmFsdWUtcGFpci52YWxpZGF0aW9uXCI7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogXCJrd2lrdWktbGFiZWwtdmFsdWUtcGFpclwiLFxuICB0ZW1wbGF0ZVVybDogXCIuL2xhYmVsLXZhbHVlLXBhaXIuY29tcG9uZW50Lmh0bWxcIixcbiAgc3R5bGVVcmxzOiBbXCIuL2xhYmVsLXZhbHVlLXBhaXIuY29tcG9uZW50LnNjc3NcIl1cbn0pXG5leHBvcnQgY2xhc3MgS3dpa1VJTGFiZWxWYWx1ZVBhaXJDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICBASW5wdXQoKSBjb25maWcgPSBERUZBVUxUX1ZBTFVFUy5jb25maWc7XG5cbiAgQElucHV0KCkgZGF0YSA9IERFRkFVTFRfVkFMVUVTLmRhdGE7XG5cbiAgQElucHV0KCkgaWQgPSBERUZBVUxUX1ZBTFVFUy5pZDtcblxuICBjb25zdHJ1Y3RvcigpIHt9XG5cbiAgbmdPbkluaXQoKTogdm9pZCB7fVxuXG4gIG5nT25DaGFuZ2VzKGNoYW5nZXM6IFNpbXBsZUNoYW5nZXMpIHtcbiAgICBjb25zdCB2ZXJpZnlDaGFuZ2UgPSAoa2V5OiBzdHJpbmcpID0+IHtcbiAgICAgIHJldHVybiBjaGFuZ2VzLmhhc093blByb3BlcnR5KGtleSkgJiYgIWNoYW5nZXNba2V5XS5maXJzdENoYW5nZTtcbiAgICB9O1xuXG4gICAgZm9yIChjb25zdCBjaGFuZ2Ugb2YgT2JqZWN0LmVudHJpZXMoY2hhbmdlcykpIHtcbiAgICAgIGNvbnN0IGtleTogc3RyaW5nID0gY2hhbmdlWzBdO1xuICAgICAgY29uc3QgdmFsdWU6IGFueSA9IGNoYW5nZVsxXS5jdXJyZW50VmFsdWU7XG4gICAgICB0aGlzLnZhbGlkYXRlSW5wdXRQcm9wZXJ0eShrZXksIHZhbHVlKTtcbiAgICB9XG5cbiAgICBpZiAodmVyaWZ5Q2hhbmdlKFwiY29uZmlnXCIpKSB7XG4gICAgICB0aGlzLmNvbmZpZyA9IGNoYW5nZXMuY29uZmlnLmN1cnJlbnRWYWx1ZTtcbiAgICB9XG4gICAgaWYgKHZlcmlmeUNoYW5nZShcImRhdGFcIikpIHtcbiAgICAgIHRoaXMuZGF0YSA9IGNoYW5nZXMuZGF0YS5jdXJyZW50VmFsdWU7XG4gICAgfVxuICB9XG5cbiAgcHJpdmF0ZSB2YWxpZGF0ZUlucHV0UHJvcGVydHkoa2V5OiBzdHJpbmcsIHZhbHVlOiBhbnkpOiB2b2lkIHtcbiAgICBpZiAoVkFMSURBVEVfS0VZX1ZBTFVFU1trZXldICYmICFpc1ZhbGlkS2V5VmFsdWUoa2V5LCB2YWx1ZSkpIHtcbiAgICAgIHRoaXNba2V5XSA9IERFRkFVTFRfVkFMVUVTW2tleV07XG4gICAgICB0aHJvd0Vycm9yTWVzc2FnZShcbiAgICAgICAgXCJrd2lrdWktbGFiZWwtdmFsdWUtcGFpclwiLFxuICAgICAgICB0aGlzLmlkLFxuICAgICAgICBrZXksXG4gICAgICAgIHZhbHVlLFxuICAgICAgICBERUZBVUxUX1ZBTFVFU1trZXldXG4gICAgICApO1xuICAgIH1cbiAgfVxufVxuIiwiPG5nLWNvbnRhaW5lciAqbmdGb3I9XCJsZXQgZmllbGQgb2YgZGF0YTsgbGV0IGluZGV4ID0gaW5kZXhcIj5cbiAgPGRpdlxuICAgICpuZ0lmPVwiZmllbGQ/LnZhbHVlIHx8IGNvbmZpZz8ucGxhY2Vob2xkZXJcIlxuICAgIGNsYXNzPVwibGFiZWwtdmFsdWUtcGFpci1jb250YWluZXJcIlxuICAgIFtuZ1N0eWxlXT1cImNvbmZpZz8uY3VzdG9tU3R5bGVzPy5jb250YWluZXJcIlxuICAgIFtjbGFzcy5sYWJlbC12YWx1ZS1wYWlyLWNvbnRhaW5lci12ZXJ0aWNhbF09XCJcbiAgICAgIGNvbmZpZz8ub3JpZW50YXRpb24gPT0gJ3ZlcnRpY2FsJ1xuICAgIFwiXG4gID5cbiAgICA8ZGl2IGNsYXNzPVwibGFiZWwtdmFsdWUtcGFpci1jb250YWluZXItbGFiZWwtc2VwYXJhdG9yXCI+XG4gICAgICA8a3dpa3VpLWxhYmVsLXZhbHVlLXBhaXItbGFiZWxcbiAgICAgICAgW2NvbmZpZ109XCJjb25maWdcIlxuICAgICAgICBbbGFiZWxdPVwiZmllbGQ/LmxhYmVsXCJcbiAgICAgID48L2t3aWt1aS1sYWJlbC12YWx1ZS1wYWlyLWxhYmVsPlxuXG4gICAgICA8a3dpa3VpLWxhYmVsLXZhbHVlLXBhaXItc2VwYXJhdG9yXG4gICAgICAgIFtzZXBhcmF0b3JdPVwiY29uZmlnPy5zZXBhcmF0b3JcIlxuICAgICAgPjwva3dpa3VpLWxhYmVsLXZhbHVlLXBhaXItc2VwYXJhdG9yPlxuICAgIDwvZGl2PlxuXG4gICAgPGRpdj5cbiAgICAgIDxrd2lrdWktbGFiZWwtdmFsdWUtcGFpci12YWx1ZVxuICAgICAgICAqbmdJZj1cImZpZWxkPy52YWx1ZSAhPSB1bmRlZmluZWRcIlxuICAgICAgICBbY29uZmlnXT1cImNvbmZpZ1wiXG4gICAgICAgIFt2YWx1ZV09XCJmaWVsZD8udmFsdWVcIlxuICAgICAgPjwva3dpa3VpLWxhYmVsLXZhbHVlLXBhaXItdmFsdWU+XG5cbiAgICAgIDxrd2lrdWktbGFiZWwtdmFsdWUtcGFpci1wbGFjZWhvbGRlclxuICAgICAgICAqbmdJZj1cImZpZWxkPy52YWx1ZSA9PSB1bmRlZmluZWRcIlxuICAgICAgICBbcGxhY2Vob2xkZXJdPVwiY29uZmlnPy5wbGFjZWhvbGRlclwiXG4gICAgICA+PC9rd2lrdWktbGFiZWwtdmFsdWUtcGFpci1wbGFjZWhvbGRlcj5cbiAgICA8L2Rpdj5cbiAgPC9kaXY+XG48L25nLWNvbnRhaW5lcj5cbiJdfQ==