@klippa/ngx-enhancy-forms 18.26.9 → 18.26.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/elements/file-input/file-input.component.mjs +6 -3
- package/esm2022/lib/elements/radio/radio.component.mjs +6 -3
- package/fesm2022/klippa-ngx-enhancy-forms.mjs +10 -4
- package/fesm2022/klippa-ngx-enhancy-forms.mjs.map +1 -1
- package/lib/elements/file-input/file-input.component.d.ts +2 -1
- package/lib/elements/radio/radio.component.d.ts +3 -2
- package/package.json +1 -1
|
@@ -13,6 +13,7 @@ export class FileInputComponent extends MultipleValueAccessorBase {
|
|
|
13
13
|
this.clearable = false;
|
|
14
14
|
this.onlyShowUploadButton = false;
|
|
15
15
|
this.useFullParentSize = false;
|
|
16
|
+
this.fullyCustom = false;
|
|
16
17
|
}
|
|
17
18
|
onChange(files) {
|
|
18
19
|
const result = [];
|
|
@@ -51,11 +52,11 @@ export class FileInputComponent extends MultipleValueAccessorBase {
|
|
|
51
52
|
this.nativeInputRef.nativeElement.click();
|
|
52
53
|
}
|
|
53
54
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FileInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
54
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: FileInputComponent, selector: "klp-form-file-input", inputs: { isLoading: "isLoading", clearable: "clearable", onlyShowUploadButton: "onlyShowUploadButton", useFullParentSize: "useFullParentSize", buttonText: "buttonText" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: FileInputComponent, multi: true }], viewQueries: [{ propertyName: "nativeInputRef", first: true, predicate: ["nativeInputRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\" [ngClass]=\"{fullParentSize: useFullParentSize, showErrors: isInErrorState()}\">\n\t<div class=\"buttonContainer\">\n\t\t<input\n\t\t\ttype=\"file\"\n\t\t\t#nativeInputRef\n\t\t\t(change)=\"onChange($event.target.files)\"\n\t\t\t[multiple]=\"multiple\"\n\t\t\t[disabled]=\"disabled\"\n\t\t>\n\t\t<klp-form-button
|
|
55
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: FileInputComponent, selector: "klp-form-file-input", inputs: { isLoading: "isLoading", clearable: "clearable", onlyShowUploadButton: "onlyShowUploadButton", useFullParentSize: "useFullParentSize", buttonText: "buttonText", fullyCustom: "fullyCustom" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: FileInputComponent, multi: true }], viewQueries: [{ propertyName: "nativeInputRef", first: true, predicate: ["nativeInputRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"fullyCustom\" *ngIf=\"fullyCustom\">\n\t<input\n\t\ttype=\"file\"\n\t\t#nativeInputRef\n\t\t(change)=\"onChange($event.target.files)\"\n\t\t[multiple]=\"multiple\"\n\t\t[disabled]=\"disabled\"\n\t/>\n\t<div (click)=\"uploadFileClicked()\">\n\t\t<ng-container [ngTemplateOutlet]=\"contentTpl\"></ng-container>\n\t</div>\n</div>\n\n<div class=\"componentContainer\" [ngClass]=\"{fullParentSize: useFullParentSize, showErrors: isInErrorState()}\"\n\t\t *ngIf=\"!fullyCustom\">\n\t<div class=\"buttonContainer\">\n\t\t<input\n\t\t\ttype=\"file\"\n\t\t\t#nativeInputRef\n\t\t\t(change)=\"onChange($event.target.files)\"\n\t\t\t[multiple]=\"multiple\"\n\t\t\t[disabled]=\"disabled\"\n\t\t>\n\t\t<klp-form-button\n\t\t\tclass=\"uploadButton\"\n\t\t\t[isLoading]=\"isLoading\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t(click)=\"uploadFileClicked()\"\n\t\t>\n\t\t\t<div class=\"innerButton\">\n\t\t\t\t<span *ngIf=\"buttonText\">{{ buttonText }}</span>\n\t\t\t\t<div *ngIf=\"!buttonText\">\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"contentTpl\"></ng-container>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"tail\">\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</klp-form-button>\n\t</div>\n\t<div class=\"fileName\" *ngIf=\"!onlyShowUploadButton\">\n\t\t{{ getFileNames() }}\n\t</div>\n\t<klp-form-button class=\"clearButton\" variant=\"white\" *ngIf=\"shouldShowClearButton()\" (click)=\"resetToNull()\">X\n\t</klp-form-button>\n</div>\n\n<ng-template #contentTpl>\n\t<ng-content></ng-content>\n</ng-template>\n", styles: [":host{display:block}:host input:disabled{cursor:not-allowed}.componentContainer{display:flex;align-items:center}.componentContainer.showErrors ::ng-deep button{border-color:#ff8000}.componentContainer.fullParentSize{height:100%;justify-content:center;position:relative}.componentContainer:not(.fullParentSize) .buttonContainer{position:relative}.componentContainer .buttonContainer{flex:0 0 auto}.innerButton{display:flex;align-items:center}.tail{margin-left:.4rem}input{position:absolute;cursor:pointer;opacity:0;inset:0}.fileName{flex:1 1 0px;margin-left:.625rem;color:#515365;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clearButton{flex:0 0 auto}.fullyCustom input{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.ButtonComponent, selector: "klp-form-button", inputs: ["variant", "size", "fullWidth", "hasBorder", "disabled", "isLoading", "type", "clickCallback"] }] }); }
|
|
55
56
|
}
|
|
56
57
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FileInputComponent, decorators: [{
|
|
57
58
|
type: Component,
|
|
58
|
-
args: [{ selector: 'klp-form-file-input', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: FileInputComponent, multi: true }], template: "<div class=\"componentContainer\" [ngClass]=\"{fullParentSize: useFullParentSize, showErrors: isInErrorState()}\">\n\t<div class=\"buttonContainer\">\n\t\t<input\n\t\t\ttype=\"file\"\n\t\t\t#nativeInputRef\n\t\t\t(change)=\"onChange($event.target.files)\"\n\t\t\t[multiple]=\"multiple\"\n\t\t\t[disabled]=\"disabled\"\n\t\t>\n\t\t<klp-form-button
|
|
59
|
+
args: [{ selector: 'klp-form-file-input', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: FileInputComponent, multi: true }], template: "<div class=\"fullyCustom\" *ngIf=\"fullyCustom\">\n\t<input\n\t\ttype=\"file\"\n\t\t#nativeInputRef\n\t\t(change)=\"onChange($event.target.files)\"\n\t\t[multiple]=\"multiple\"\n\t\t[disabled]=\"disabled\"\n\t/>\n\t<div (click)=\"uploadFileClicked()\">\n\t\t<ng-container [ngTemplateOutlet]=\"contentTpl\"></ng-container>\n\t</div>\n</div>\n\n<div class=\"componentContainer\" [ngClass]=\"{fullParentSize: useFullParentSize, showErrors: isInErrorState()}\"\n\t\t *ngIf=\"!fullyCustom\">\n\t<div class=\"buttonContainer\">\n\t\t<input\n\t\t\ttype=\"file\"\n\t\t\t#nativeInputRef\n\t\t\t(change)=\"onChange($event.target.files)\"\n\t\t\t[multiple]=\"multiple\"\n\t\t\t[disabled]=\"disabled\"\n\t\t>\n\t\t<klp-form-button\n\t\t\tclass=\"uploadButton\"\n\t\t\t[isLoading]=\"isLoading\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t(click)=\"uploadFileClicked()\"\n\t\t>\n\t\t\t<div class=\"innerButton\">\n\t\t\t\t<span *ngIf=\"buttonText\">{{ buttonText }}</span>\n\t\t\t\t<div *ngIf=\"!buttonText\">\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"contentTpl\"></ng-container>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"tail\">\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</klp-form-button>\n\t</div>\n\t<div class=\"fileName\" *ngIf=\"!onlyShowUploadButton\">\n\t\t{{ getFileNames() }}\n\t</div>\n\t<klp-form-button class=\"clearButton\" variant=\"white\" *ngIf=\"shouldShowClearButton()\" (click)=\"resetToNull()\">X\n\t</klp-form-button>\n</div>\n\n<ng-template #contentTpl>\n\t<ng-content></ng-content>\n</ng-template>\n", styles: [":host{display:block}:host input:disabled{cursor:not-allowed}.componentContainer{display:flex;align-items:center}.componentContainer.showErrors ::ng-deep button{border-color:#ff8000}.componentContainer.fullParentSize{height:100%;justify-content:center;position:relative}.componentContainer:not(.fullParentSize) .buttonContainer{position:relative}.componentContainer .buttonContainer{flex:0 0 auto}.innerButton{display:flex;align-items:center}.tail{margin-left:.4rem}input{position:absolute;cursor:pointer;opacity:0;inset:0}.fileName{flex:1 1 0px;margin-left:.625rem;color:#515365;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clearButton{flex:0 0 auto}.fullyCustom input{display:none}\n"] }]
|
|
59
60
|
}], propDecorators: { isLoading: [{
|
|
60
61
|
type: Input
|
|
61
62
|
}], clearable: [{
|
|
@@ -66,8 +67,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
|
66
67
|
type: Input
|
|
67
68
|
}], buttonText: [{
|
|
68
69
|
type: Input
|
|
70
|
+
}], fullyCustom: [{
|
|
71
|
+
type: Input
|
|
69
72
|
}], nativeInputRef: [{
|
|
70
73
|
type: ViewChild,
|
|
71
74
|
args: ['nativeInputRef']
|
|
72
75
|
}] } });
|
|
73
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
76
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmlsZS1pbnB1dC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9rbGlwcGEvbmd4LWVuaGFuY3ktZm9ybXMvc3JjL2xpYi9lbGVtZW50cy9maWxlLWlucHV0L2ZpbGUtaW5wdXQuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMva2xpcHBhL25neC1lbmhhbmN5LWZvcm1zL3NyYy9saWIvZWxlbWVudHMvZmlsZS1pbnB1dC9maWxlLWlucHV0LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxTQUFTLEVBQWMsS0FBSyxFQUFFLFNBQVMsRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUN0RSxPQUFPLEVBQUMsaUJBQWlCLEVBQUMsTUFBTSxnQkFBZ0IsQ0FBQztBQUNqRCxPQUFPLEVBQUMseUJBQXlCLEVBQUMsTUFBTSwrREFBK0QsQ0FBQztBQUN4RyxPQUFPLEVBQUMsVUFBVSxFQUFDLE1BQU0sbUJBQW1CLENBQUM7QUFDN0MsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sbUJBQW1CLENBQUM7Ozs7QUFReEQsTUFBTSxPQUFPLGtCQUFtQixTQUFRLHlCQUErQjtJQU52RTs7UUFPVSxjQUFTLEdBQUcsS0FBSyxDQUFDO1FBQ2xCLGNBQVMsR0FBRyxLQUFLLENBQUM7UUFDbEIseUJBQW9CLEdBQUcsS0FBSyxDQUFDO1FBQzdCLHNCQUFpQixHQUFHLEtBQUssQ0FBQztRQUUxQixnQkFBVyxHQUFHLEtBQUssQ0FBQztLQXlDN0I7SUF0Q08sUUFBUSxDQUFDLEtBQWU7UUFDOUIsTUFBTSxNQUFNLEdBQUcsRUFBRSxDQUFDO1FBQ2xCLEtBQUssSUFBSSxDQUFDLEdBQUcsQ0FBQyxFQUFFLENBQUMsR0FBRyxLQUFLLENBQUMsTUFBTSxFQUFFLENBQUMsRUFBRSxFQUFFLENBQUM7WUFDdkMsTUFBTSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUM7UUFDNUIsQ0FBQztRQUNELElBQUksQ0FBQyxzQkFBc0IsQ0FBQyxNQUFNLENBQUMsQ0FBQztRQUNwQyxpREFBaUQ7UUFDakQsSUFBSSxDQUFDLGNBQWMsQ0FBQyxhQUFhLENBQUMsS0FBSyxHQUFHLElBQUksQ0FBQztJQUNoRCxDQUFDO0lBRU0sWUFBWTtRQUNsQixJQUFJLEtBQUssQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxFQUFFLENBQUM7WUFDcEMsT0FBTyxJQUFJLENBQUMsVUFBVSxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDcEQsQ0FBQzthQUFNLElBQUksSUFBSSxDQUFDLFVBQVUsWUFBWSxJQUFJLEVBQUUsQ0FBQztZQUM1QyxPQUFPLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDO1FBQzdCLENBQUM7UUFDRCxPQUFPLElBQUksQ0FBQztJQUNiLENBQUM7SUFFTSxxQkFBcUI7UUFDM0IsSUFBSSxJQUFJLENBQUMsb0JBQW9CLEVBQUUsQ0FBQztZQUMvQixPQUFPLEtBQUssQ0FBQztRQUNkLENBQUM7UUFDRCxJQUFJLElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQztZQUNuQixJQUFJLG1CQUFtQixDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsRUFBRSxDQUFDO2dCQUMxQyxPQUFPLElBQUksQ0FBQztZQUNiLENBQUM7WUFDRCxPQUFPLEtBQUssQ0FBQztRQUNkLENBQUM7UUFDRCxJQUFJLFVBQVUsQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLEVBQUUsQ0FBQztZQUNqQyxPQUFPLElBQUksQ0FBQztRQUNiLENBQUM7UUFDRCxPQUFPLEtBQUssQ0FBQztJQUNkLENBQUM7SUFFTSxpQkFBaUI7UUFDdkIsSUFBSSxDQUFDLGNBQWMsQ0FBQyxhQUFhLENBQUMsS0FBSyxFQUFFLENBQUM7SUFDM0MsQ0FBQzs4R0E5Q1csa0JBQWtCO2tHQUFsQixrQkFBa0Isc1BBRm5CLENBQUMsRUFBQyxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsV0FBVyxFQUFFLGtCQUFrQixFQUFFLEtBQUssRUFBRSxJQUFJLEVBQUMsQ0FBQyxtS0NWeEYsMGlEQWtEQTs7MkZEdENhLGtCQUFrQjtrQkFOOUIsU0FBUzsrQkFDQyxxQkFBcUIsYUFHcEIsQ0FBQyxFQUFDLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxXQUFXLG9CQUFvQixFQUFFLEtBQUssRUFBRSxJQUFJLEVBQUMsQ0FBQzs4QkFHOUUsU0FBUztzQkFBakIsS0FBSztnQkFDRyxTQUFTO3NCQUFqQixLQUFLO2dCQUNHLG9CQUFvQjtzQkFBNUIsS0FBSztnQkFDRyxpQkFBaUI7c0JBQXpCLEtBQUs7Z0JBQ0csVUFBVTtzQkFBbEIsS0FBSztnQkFDRyxXQUFXO3NCQUFuQixLQUFLO2dCQUN1QixjQUFjO3NCQUExQyxTQUFTO3VCQUFDLGdCQUFnQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q29tcG9uZW50LCBFbGVtZW50UmVmLCBJbnB1dCwgVmlld0NoaWxkfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7TkdfVkFMVUVfQUNDRVNTT1J9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcbmltcG9ydCB7TXVsdGlwbGVWYWx1ZUFjY2Vzc29yQmFzZX0gZnJvbSAnLi4vdmFsdWUtYWNjZXNzb3ItYmFzZS9tdWx0aXBsZS12YWx1ZS1hY2Nlc3Nvci1iYXNlLmNvbXBvbmVudCc7XG5pbXBvcnQge2lzVmFsdWVTZXR9IGZyb20gJy4uLy4uL3V0aWwvdmFsdWVzJztcbmltcG9ydCB7IGFycmF5SXNTZXRBbmRGaWxsZWQgfSBmcm9tICcuLi8uLi91dGlsL2FycmF5cyc7XG5cbkBDb21wb25lbnQoe1xuXHRzZWxlY3RvcjogJ2tscC1mb3JtLWZpbGUtaW5wdXQnLFxuXHR0ZW1wbGF0ZVVybDogJy4vZmlsZS1pbnB1dC5jb21wb25lbnQuaHRtbCcsXG5cdHN0eWxlVXJsczogWycuL2ZpbGUtaW5wdXQuY29tcG9uZW50LnNjc3MnXSxcblx0cHJvdmlkZXJzOiBbe3Byb3ZpZGU6IE5HX1ZBTFVFX0FDQ0VTU09SLCB1c2VFeGlzdGluZzogRmlsZUlucHV0Q29tcG9uZW50LCBtdWx0aTogdHJ1ZX1dLFxufSlcbmV4cG9ydCBjbGFzcyBGaWxlSW5wdXRDb21wb25lbnQgZXh0ZW5kcyBNdWx0aXBsZVZhbHVlQWNjZXNzb3JCYXNlPEZpbGU+IHtcblx0QElucHV0KCkgaXNMb2FkaW5nID0gZmFsc2U7XG5cdEBJbnB1dCgpIGNsZWFyYWJsZSA9IGZhbHNlO1xuXHRASW5wdXQoKSBvbmx5U2hvd1VwbG9hZEJ1dHRvbiA9IGZhbHNlO1xuXHRASW5wdXQoKSB1c2VGdWxsUGFyZW50U2l6ZSA9IGZhbHNlO1xuXHRASW5wdXQoKSBidXR0b25UZXh0OiBzdHJpbmc7XG5cdEBJbnB1dCgpIGZ1bGx5Q3VzdG9tID0gZmFsc2U7XG5cdEBWaWV3Q2hpbGQoJ25hdGl2ZUlucHV0UmVmJykgbmF0aXZlSW5wdXRSZWY6IEVsZW1lbnRSZWY8SFRNTElucHV0RWxlbWVudD47XG5cblx0cHVibGljIG9uQ2hhbmdlKGZpbGVzOiBGaWxlTGlzdCk6IHZvaWQge1xuXHRcdGNvbnN0IHJlc3VsdCA9IFtdO1xuXHRcdGZvciAobGV0IGkgPSAwOyBpIDwgZmlsZXMubGVuZ3RoOyBpKyspIHtcblx0XHRcdHJlc3VsdC5wdXNoKGZpbGVzLml0ZW0oaSkpO1xuXHRcdH1cblx0XHR0aGlzLnNldElubmVyVmFsdWVBbmROb3RpZnkocmVzdWx0KTtcblx0XHQvLyB0byBtYWtlIHN1cmUgd2UgY2FuIHNlbGVjdCB0aGUgc2FtZSBmaWxlIGFnYWluXG5cdFx0dGhpcy5uYXRpdmVJbnB1dFJlZi5uYXRpdmVFbGVtZW50LnZhbHVlID0gbnVsbDtcblx0fVxuXG5cdHB1YmxpYyBnZXRGaWxlTmFtZXMoKTogc3RyaW5nIHtcblx0XHRpZiAoQXJyYXkuaXNBcnJheSh0aGlzLmlubmVyVmFsdWUpKSB7XG5cdFx0XHRyZXR1cm4gdGhpcy5pbm5lclZhbHVlLm1hcChlID0+IGUubmFtZSkuam9pbignLCAnKTtcblx0XHR9IGVsc2UgaWYgKHRoaXMuaW5uZXJWYWx1ZSBpbnN0YW5jZW9mIEZpbGUpIHtcblx0XHRcdHJldHVybiB0aGlzLmlubmVyVmFsdWUubmFtZTtcblx0XHR9XG5cdFx0cmV0dXJuIG51bGw7XG5cdH1cblxuXHRwdWJsaWMgc2hvdWxkU2hvd0NsZWFyQnV0dG9uKCk6IGJvb2xlYW4ge1xuXHRcdGlmICh0aGlzLm9ubHlTaG93VXBsb2FkQnV0dG9uKSB7XG5cdFx0XHRyZXR1cm4gZmFsc2U7XG5cdFx0fVxuXHRcdGlmICh0aGlzLm11bHRpcGxlKSB7XG5cdFx0XHRpZiAoYXJyYXlJc1NldEFuZEZpbGxlZCh0aGlzLmlubmVyVmFsdWUpKSB7XG5cdFx0XHRcdHJldHVybiB0cnVlO1xuXHRcdFx0fVxuXHRcdFx0cmV0dXJuIGZhbHNlO1xuXHRcdH1cblx0XHRpZiAoaXNWYWx1ZVNldCh0aGlzLmlubmVyVmFsdWUpKSB7XG5cdFx0XHRyZXR1cm4gdHJ1ZTtcblx0XHR9XG5cdFx0cmV0dXJuIGZhbHNlO1xuXHR9XG5cblx0cHVibGljIHVwbG9hZEZpbGVDbGlja2VkKCk6IHZvaWQge1xuXHRcdHRoaXMubmF0aXZlSW5wdXRSZWYubmF0aXZlRWxlbWVudC5jbGljaygpO1xuXHR9XG59XG4iLCI8ZGl2IGNsYXNzPVwiZnVsbHlDdXN0b21cIiAqbmdJZj1cImZ1bGx5Q3VzdG9tXCI+XG5cdDxpbnB1dFxuXHRcdHR5cGU9XCJmaWxlXCJcblx0XHQjbmF0aXZlSW5wdXRSZWZcblx0XHQoY2hhbmdlKT1cIm9uQ2hhbmdlKCRldmVudC50YXJnZXQuZmlsZXMpXCJcblx0XHRbbXVsdGlwbGVdPVwibXVsdGlwbGVcIlxuXHRcdFtkaXNhYmxlZF09XCJkaXNhYmxlZFwiXG5cdC8+XG5cdDxkaXYgKGNsaWNrKT1cInVwbG9hZEZpbGVDbGlja2VkKClcIj5cblx0XHQ8bmctY29udGFpbmVyIFtuZ1RlbXBsYXRlT3V0bGV0XT1cImNvbnRlbnRUcGxcIj48L25nLWNvbnRhaW5lcj5cblx0PC9kaXY+XG48L2Rpdj5cblxuPGRpdiBjbGFzcz1cImNvbXBvbmVudENvbnRhaW5lclwiIFtuZ0NsYXNzXT1cIntmdWxsUGFyZW50U2l6ZTogdXNlRnVsbFBhcmVudFNpemUsIHNob3dFcnJvcnM6IGlzSW5FcnJvclN0YXRlKCl9XCJcblx0XHQgKm5nSWY9XCIhZnVsbHlDdXN0b21cIj5cblx0PGRpdiBjbGFzcz1cImJ1dHRvbkNvbnRhaW5lclwiPlxuXHRcdDxpbnB1dFxuXHRcdFx0dHlwZT1cImZpbGVcIlxuXHRcdFx0I25hdGl2ZUlucHV0UmVmXG5cdFx0XHQoY2hhbmdlKT1cIm9uQ2hhbmdlKCRldmVudC50YXJnZXQuZmlsZXMpXCJcblx0XHRcdFttdWx0aXBsZV09XCJtdWx0aXBsZVwiXG5cdFx0XHRbZGlzYWJsZWRdPVwiZGlzYWJsZWRcIlxuXHRcdD5cblx0XHQ8a2xwLWZvcm0tYnV0dG9uXG5cdFx0XHRjbGFzcz1cInVwbG9hZEJ1dHRvblwiXG5cdFx0XHRbaXNMb2FkaW5nXT1cImlzTG9hZGluZ1wiXG5cdFx0XHRbZGlzYWJsZWRdPVwiZGlzYWJsZWRcIlxuXHRcdFx0KGNsaWNrKT1cInVwbG9hZEZpbGVDbGlja2VkKClcIlxuXHRcdD5cblx0XHRcdDxkaXYgY2xhc3M9XCJpbm5lckJ1dHRvblwiPlxuXHRcdFx0XHQ8c3BhbiAqbmdJZj1cImJ1dHRvblRleHRcIj57eyBidXR0b25UZXh0IH19PC9zcGFuPlxuXHRcdFx0XHQ8ZGl2ICpuZ0lmPVwiIWJ1dHRvblRleHRcIj5cblx0XHRcdFx0XHQ8bmctY29udGFpbmVyIFtuZ1RlbXBsYXRlT3V0bGV0XT1cImNvbnRlbnRUcGxcIj48L25nLWNvbnRhaW5lcj5cblx0XHRcdFx0PC9kaXY+XG5cdFx0XHRcdDxkaXYgY2xhc3M9XCJ0YWlsXCI+XG5cdFx0XHRcdFx0PG5nLWNvbnRhaW5lciBbbmdUZW1wbGF0ZU91dGxldF09XCJnZXRUYWlsVHBsKClcIj48L25nLWNvbnRhaW5lcj5cblx0XHRcdFx0PC9kaXY+XG5cdFx0XHQ8L2Rpdj5cblx0XHQ8L2tscC1mb3JtLWJ1dHRvbj5cblx0PC9kaXY+XG5cdDxkaXYgY2xhc3M9XCJmaWxlTmFtZVwiICpuZ0lmPVwiIW9ubHlTaG93VXBsb2FkQnV0dG9uXCI+XG5cdFx0e3sgZ2V0RmlsZU5hbWVzKCkgfX1cblx0PC9kaXY+XG5cdDxrbHAtZm9ybS1idXR0b24gY2xhc3M9XCJjbGVhckJ1dHRvblwiIHZhcmlhbnQ9XCJ3aGl0ZVwiICpuZ0lmPVwic2hvdWxkU2hvd0NsZWFyQnV0dG9uKClcIiAoY2xpY2spPVwicmVzZXRUb051bGwoKVwiPlhcblx0PC9rbHAtZm9ybS1idXR0b24+XG48L2Rpdj5cblxuPG5nLXRlbXBsYXRlICNjb250ZW50VHBsPlxuXHQ8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG48L25nLXRlbXBsYXRlPlxuIl19
|
|
@@ -13,19 +13,22 @@ export class RadioComponent extends ValueAccessorBase {
|
|
|
13
13
|
super(...arguments);
|
|
14
14
|
this.orientation = Orientation.ROW;
|
|
15
15
|
this.variant = 'classic';
|
|
16
|
+
this.size = 'medium';
|
|
16
17
|
this.Orientation = Orientation;
|
|
17
18
|
}
|
|
18
19
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: RadioComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
19
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: RadioComponent, selector: "klp-form-radio", inputs: { options: "options", orientation: "orientation", variant: "variant" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: RadioComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\" [ngClass]=\"{'verticallyOriented': orientation === Orientation.COLUMN, 'horizontallyOriented': orientation === Orientation.ROW}\">\n\t<ng-container *ngFor=\"let option of options\">\n\t\t<button class=\"optionContainer\"\n\t\t\t[ngClass]=\"{classic: variant === 'classic', button: variant === 'button', isSelected: innerValue === option.id}\"\n\t\t\t(click)=\"setInnerValueAndNotify(option.id)\"\n\t\t>\n\t\t\t<div class=\"radioAndName\">\n\t\t\t\t<div class=\"selectedRadioBtnContainer\" *ngIf=\"variant === 'classic'\">\n\t\t\t\t\t<div class=\"selected\" *ngIf=\"innerValue === option.id\"></div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"nameAndDescription\">\n\t\t\t\t\t<div>{{option.name}}</div>\n\t\t\t\t\t<div class=\"description\" *ngIf=\"option.description\">{{option.description}}</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</button>\n\t</ng-container>\n</div>\n", styles: [":host{display:block}.componentContainer{position:relative;display:flex}.componentContainer.verticallyOriented{flex-direction:column}.componentContainer.verticallyOriented .optionContainer{margin-bottom:.3125rem}.componentContainer.verticallyOriented .optionContainer:last-child{margin-bottom:0}.componentContainer.horizontallyOriented{flex-direction:row}.componentContainer.horizontallyOriented .optionContainer:first-child{border-radius:6px 0 0 6px}.componentContainer.horizontallyOriented .optionContainer:last-child{border-radius:0 6px 6px 0}.optionContainer{margin-right:.3125rem;background:transparent;border:none;align-items:center}.optionContainer.classic{cursor:pointer}.optionContainer.classic .selectedRadioBtnContainer{flex:0 0 auto;position:relative;height:20px;width:20px;padding:4px;border-radius:50%;border:2px solid #e6ecf5;margin-right:.3125rem}.optionContainer.classic .selectedRadioBtnContainer .selected{height:100%;width:100%;display:block;border-radius:100%;background-color:#27bb5f}.optionContainer.classic .description{opacity:1;color:#888da8}.optionContainer.classic .nameAndDescription{color:#515365}.optionContainer.button{position:relative;cursor:pointer;padding:10px 14px;margin-right:0;transition:all .3s ease-in-out;color:#27bb5f;border:1px solid #27bb5f;background-color:#fff}.optionContainer.button.isSelected{background:#27bb5f;color:#fff}.radioAndName{display:flex;flex-direction:row;gap:.2rem}.nameAndDescription{text-align:left;line-height:1.1rem}.description{margin-top:.2rem;opacity:.6}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
20
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: RadioComponent, selector: "klp-form-radio", inputs: { options: "options", orientation: "orientation", variant: "variant", size: "size" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: RadioComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\" [ngClass]=\"{'verticallyOriented': orientation === Orientation.COLUMN, 'horizontallyOriented': orientation === Orientation.ROW, buttonGray: variant === 'buttonGray', sizeSmall: size === 'small'}\">\n\t<ng-container *ngFor=\"let option of options\">\n\t\t<button class=\"optionContainer\"\n\t\t\t[ngClass]=\"{classic: variant === 'classic', button: variant === 'button', buttonGray: variant === 'buttonGray', isSelected: innerValue === option.id}\"\n\t\t\t(click)=\"setInnerValueAndNotify(option.id)\"\n\t\t>\n\t\t\t<div class=\"radioAndName\">\n\t\t\t\t<div class=\"selectedRadioBtnContainer\" *ngIf=\"variant === 'classic'\">\n\t\t\t\t\t<div class=\"selected\" *ngIf=\"innerValue === option.id\"></div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"nameAndDescription\">\n\t\t\t\t\t<div>{{option.name}}</div>\n\t\t\t\t\t<div class=\"description\" *ngIf=\"option.description\">{{option.description}}</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</button>\n\t</ng-container>\n</div>\n", styles: [":host{display:block}.componentContainer{position:relative;display:flex}.componentContainer.verticallyOriented{flex-direction:column}.componentContainer.verticallyOriented .optionContainer{margin-bottom:.3125rem}.componentContainer.verticallyOriented .optionContainer:last-child{margin-bottom:0}.componentContainer.horizontallyOriented{flex-direction:row}.componentContainer.horizontallyOriented .optionContainer:first-child{border-radius:6px 0 0 6px}.componentContainer.horizontallyOriented .optionContainer:last-child{border-radius:0 6px 6px 0}.componentContainer.horizontallyOriented.buttonGray .optionContainer:first-child{border-radius:5px}.componentContainer.horizontallyOriented.buttonGray .optionContainer:last-child{border-radius:5px}.componentContainer.buttonGray{background:#eaecf0;border-radius:5px;display:inline-block}.componentContainer.sizeSmall .optionContainer{padding:.4rem .8rem}.optionContainer{margin-right:.3125rem;background:transparent;border:none;align-items:center}.optionContainer.classic{cursor:pointer}.optionContainer.classic .selectedRadioBtnContainer{flex:0 0 auto;position:relative;height:20px;width:20px;padding:4px;border-radius:50%;border:2px solid #e6ecf5;margin-right:.3125rem}.optionContainer.classic .selectedRadioBtnContainer .selected{height:100%;width:100%;display:block;border-radius:100%;background-color:#27bb5f}.optionContainer.classic .description{opacity:1;color:#888da8}.optionContainer.classic .nameAndDescription{color:#515365}.optionContainer.button{position:relative;cursor:pointer;padding:10px 14px;margin-right:0;transition:all .3s ease-in-out;color:#27bb5f;border:1px solid #27bb5f;background-color:#fff}.optionContainer.button.isSelected{background:#27bb5f;color:#fff}.optionContainer.buttonGray{position:relative;cursor:pointer;padding:10px 14px;margin:2px;color:#515365;background:#eaecf0;border-radius:5px}.optionContainer.buttonGray.isSelected{background:#fff;color:#101828}.radioAndName{display:flex;flex-direction:row;gap:.2rem}.nameAndDescription{text-align:left;line-height:1.1rem}.description{margin-top:.2rem;opacity:.6}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
20
21
|
}
|
|
21
22
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: RadioComponent, decorators: [{
|
|
22
23
|
type: Component,
|
|
23
|
-
args: [{ selector: 'klp-form-radio', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: RadioComponent, multi: true }], template: "<div class=\"componentContainer\" [ngClass]=\"{'verticallyOriented': orientation === Orientation.COLUMN, 'horizontallyOriented': orientation === Orientation.ROW}\">\n\t<ng-container *ngFor=\"let option of options\">\n\t\t<button class=\"optionContainer\"\n\t\t\t[ngClass]=\"{classic: variant === 'classic', button: variant === 'button', isSelected: innerValue === option.id}\"\n\t\t\t(click)=\"setInnerValueAndNotify(option.id)\"\n\t\t>\n\t\t\t<div class=\"radioAndName\">\n\t\t\t\t<div class=\"selectedRadioBtnContainer\" *ngIf=\"variant === 'classic'\">\n\t\t\t\t\t<div class=\"selected\" *ngIf=\"innerValue === option.id\"></div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"nameAndDescription\">\n\t\t\t\t\t<div>{{option.name}}</div>\n\t\t\t\t\t<div class=\"description\" *ngIf=\"option.description\">{{option.description}}</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</button>\n\t</ng-container>\n</div>\n", styles: [":host{display:block}.componentContainer{position:relative;display:flex}.componentContainer.verticallyOriented{flex-direction:column}.componentContainer.verticallyOriented .optionContainer{margin-bottom:.3125rem}.componentContainer.verticallyOriented .optionContainer:last-child{margin-bottom:0}.componentContainer.horizontallyOriented{flex-direction:row}.componentContainer.horizontallyOriented .optionContainer:first-child{border-radius:6px 0 0 6px}.componentContainer.horizontallyOriented .optionContainer:last-child{border-radius:0 6px 6px 0}.optionContainer{margin-right:.3125rem;background:transparent;border:none;align-items:center}.optionContainer.classic{cursor:pointer}.optionContainer.classic .selectedRadioBtnContainer{flex:0 0 auto;position:relative;height:20px;width:20px;padding:4px;border-radius:50%;border:2px solid #e6ecf5;margin-right:.3125rem}.optionContainer.classic .selectedRadioBtnContainer .selected{height:100%;width:100%;display:block;border-radius:100%;background-color:#27bb5f}.optionContainer.classic .description{opacity:1;color:#888da8}.optionContainer.classic .nameAndDescription{color:#515365}.optionContainer.button{position:relative;cursor:pointer;padding:10px 14px;margin-right:0;transition:all .3s ease-in-out;color:#27bb5f;border:1px solid #27bb5f;background-color:#fff}.optionContainer.button.isSelected{background:#27bb5f;color:#fff}.radioAndName{display:flex;flex-direction:row;gap:.2rem}.nameAndDescription{text-align:left;line-height:1.1rem}.description{margin-top:.2rem;opacity:.6}\n"] }]
|
|
24
|
+
args: [{ selector: 'klp-form-radio', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: RadioComponent, multi: true }], template: "<div class=\"componentContainer\" [ngClass]=\"{'verticallyOriented': orientation === Orientation.COLUMN, 'horizontallyOriented': orientation === Orientation.ROW, buttonGray: variant === 'buttonGray', sizeSmall: size === 'small'}\">\n\t<ng-container *ngFor=\"let option of options\">\n\t\t<button class=\"optionContainer\"\n\t\t\t[ngClass]=\"{classic: variant === 'classic', button: variant === 'button', buttonGray: variant === 'buttonGray', isSelected: innerValue === option.id}\"\n\t\t\t(click)=\"setInnerValueAndNotify(option.id)\"\n\t\t>\n\t\t\t<div class=\"radioAndName\">\n\t\t\t\t<div class=\"selectedRadioBtnContainer\" *ngIf=\"variant === 'classic'\">\n\t\t\t\t\t<div class=\"selected\" *ngIf=\"innerValue === option.id\"></div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"nameAndDescription\">\n\t\t\t\t\t<div>{{option.name}}</div>\n\t\t\t\t\t<div class=\"description\" *ngIf=\"option.description\">{{option.description}}</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</button>\n\t</ng-container>\n</div>\n", styles: [":host{display:block}.componentContainer{position:relative;display:flex}.componentContainer.verticallyOriented{flex-direction:column}.componentContainer.verticallyOriented .optionContainer{margin-bottom:.3125rem}.componentContainer.verticallyOriented .optionContainer:last-child{margin-bottom:0}.componentContainer.horizontallyOriented{flex-direction:row}.componentContainer.horizontallyOriented .optionContainer:first-child{border-radius:6px 0 0 6px}.componentContainer.horizontallyOriented .optionContainer:last-child{border-radius:0 6px 6px 0}.componentContainer.horizontallyOriented.buttonGray .optionContainer:first-child{border-radius:5px}.componentContainer.horizontallyOriented.buttonGray .optionContainer:last-child{border-radius:5px}.componentContainer.buttonGray{background:#eaecf0;border-radius:5px;display:inline-block}.componentContainer.sizeSmall .optionContainer{padding:.4rem .8rem}.optionContainer{margin-right:.3125rem;background:transparent;border:none;align-items:center}.optionContainer.classic{cursor:pointer}.optionContainer.classic .selectedRadioBtnContainer{flex:0 0 auto;position:relative;height:20px;width:20px;padding:4px;border-radius:50%;border:2px solid #e6ecf5;margin-right:.3125rem}.optionContainer.classic .selectedRadioBtnContainer .selected{height:100%;width:100%;display:block;border-radius:100%;background-color:#27bb5f}.optionContainer.classic .description{opacity:1;color:#888da8}.optionContainer.classic .nameAndDescription{color:#515365}.optionContainer.button{position:relative;cursor:pointer;padding:10px 14px;margin-right:0;transition:all .3s ease-in-out;color:#27bb5f;border:1px solid #27bb5f;background-color:#fff}.optionContainer.button.isSelected{background:#27bb5f;color:#fff}.optionContainer.buttonGray{position:relative;cursor:pointer;padding:10px 14px;margin:2px;color:#515365;background:#eaecf0;border-radius:5px}.optionContainer.buttonGray.isSelected{background:#fff;color:#101828}.radioAndName{display:flex;flex-direction:row;gap:.2rem}.nameAndDescription{text-align:left;line-height:1.1rem}.description{margin-top:.2rem;opacity:.6}\n"] }]
|
|
24
25
|
}], propDecorators: { options: [{
|
|
25
26
|
type: Input
|
|
26
27
|
}], orientation: [{
|
|
27
28
|
type: Input
|
|
28
29
|
}], variant: [{
|
|
29
30
|
type: Input
|
|
31
|
+
}], size: [{
|
|
32
|
+
type: Input
|
|
30
33
|
}] } });
|
|
31
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
34
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmFkaW8uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMva2xpcHBhL25neC1lbmhhbmN5LWZvcm1zL3NyYy9saWIvZWxlbWVudHMvcmFkaW8vcmFkaW8uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMva2xpcHBhL25neC1lbmhhbmN5LWZvcm1zL3NyYy9saWIvZWxlbWVudHMvcmFkaW8vcmFkaW8uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFDaEQsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDbkQsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sc0RBQXNELENBQUM7OztBQUV6RixNQUFNLENBQU4sSUFBWSxXQUdYO0FBSEQsV0FBWSxXQUFXO0lBQ3RCLGdDQUFpQixDQUFBO0lBQ2pCLDBCQUFXLENBQUE7QUFDWixDQUFDLEVBSFcsV0FBVyxLQUFYLFdBQVcsUUFHdEI7QUFlRCxNQUFNLE9BQU8sY0FBZSxTQUFRLGlCQUF5QjtJQU43RDs7UUFRVSxnQkFBVyxHQUFnQixXQUFXLENBQUMsR0FBRyxDQUFDO1FBQzNDLFlBQU8sR0FBd0MsU0FBUyxDQUFDO1FBQ3pELFNBQUksR0FBd0IsUUFBUSxDQUFDO1FBQ3ZDLGdCQUFXLEdBQUcsV0FBVyxDQUFDO0tBQ2pDOzhHQU5ZLGNBQWM7a0dBQWQsY0FBYyx1SUFGZixDQUFDLEVBQUUsT0FBTyxFQUFFLGlCQUFpQixFQUFFLFdBQVcsRUFBRSxjQUFjLEVBQUUsS0FBSyxFQUFFLElBQUksRUFBRSxDQUFDLGlEQ3BCdEYsKytCQWtCQTs7MkZESWEsY0FBYztrQkFOMUIsU0FBUzsrQkFDQyxnQkFBZ0IsYUFHZixDQUFDLEVBQUUsT0FBTyxFQUFFLGlCQUFpQixFQUFFLFdBQVcsZ0JBQWdCLEVBQUUsS0FBSyxFQUFFLElBQUksRUFBRSxDQUFDOzhCQUc1RSxPQUFPO3NCQUFmLEtBQUs7Z0JBQ0csV0FBVztzQkFBbkIsS0FBSztnQkFDRyxPQUFPO3NCQUFmLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBOR19WQUxVRV9BQ0NFU1NPUiB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcbmltcG9ydCB7IFZhbHVlQWNjZXNzb3JCYXNlIH0gZnJvbSAnLi4vdmFsdWUtYWNjZXNzb3ItYmFzZS92YWx1ZS1hY2Nlc3Nvci1iYXNlLmNvbXBvbmVudCc7XG5cbmV4cG9ydCBlbnVtIE9yaWVudGF0aW9uIHtcblx0Q09MVU1OID0gJ2NvbHVtbicsXG5cdFJPVyA9ICdyb3cnXG59XG5leHBvcnQgdHlwZSBSYWRpb09wdGlvbnMgPSBBcnJheTxSYWRpb09wdGlvbj47XG5leHBvcnQgdHlwZSBSYWRpb09wdGlvbiA9IHtcblx0aWQ6IGFueTtcblx0bmFtZTogc3RyaW5nO1xuXHRkZXNjcmlwdGlvbj86IHN0cmluZztcbn07XG5cblxuQENvbXBvbmVudCh7XG5cdHNlbGVjdG9yOiAna2xwLWZvcm0tcmFkaW8nLFxuXHR0ZW1wbGF0ZVVybDogJy4vcmFkaW8uY29tcG9uZW50Lmh0bWwnLFxuXHRzdHlsZVVybHM6IFsnLi9yYWRpby5jb21wb25lbnQuc2NzcyddLFxuXHRwcm92aWRlcnM6IFt7IHByb3ZpZGU6IE5HX1ZBTFVFX0FDQ0VTU09SLCB1c2VFeGlzdGluZzogUmFkaW9Db21wb25lbnQsIG11bHRpOiB0cnVlIH1dLFxufSlcbmV4cG9ydCBjbGFzcyBSYWRpb0NvbXBvbmVudCBleHRlbmRzIFZhbHVlQWNjZXNzb3JCYXNlPHN0cmluZz57XG5cdEBJbnB1dCgpIG9wdGlvbnM6IFJhZGlvT3B0aW9ucztcblx0QElucHV0KCkgb3JpZW50YXRpb246IE9yaWVudGF0aW9uID0gT3JpZW50YXRpb24uUk9XO1xuXHRASW5wdXQoKSB2YXJpYW50OiAnY2xhc3NpYycgfCAnYnV0dG9uJyB8ICdidXR0b25HcmF5JyA9ICdjbGFzc2ljJztcblx0QElucHV0KCkgc2l6ZTogJ3NtYWxsJyB8ICdtZWRpdW0nICA9ICdtZWRpdW0nO1xuXHRwdWJsaWMgT3JpZW50YXRpb24gPSBPcmllbnRhdGlvbjtcbn1cblxuIiwiPGRpdiBjbGFzcz1cImNvbXBvbmVudENvbnRhaW5lclwiIFtuZ0NsYXNzXT1cInsndmVydGljYWxseU9yaWVudGVkJzogb3JpZW50YXRpb24gPT09IE9yaWVudGF0aW9uLkNPTFVNTiwgJ2hvcml6b250YWxseU9yaWVudGVkJzogb3JpZW50YXRpb24gPT09IE9yaWVudGF0aW9uLlJPVywgYnV0dG9uR3JheTogdmFyaWFudCA9PT0gJ2J1dHRvbkdyYXknLCBzaXplU21hbGw6IHNpemUgPT09ICdzbWFsbCd9XCI+XG5cdDxuZy1jb250YWluZXIgKm5nRm9yPVwibGV0IG9wdGlvbiBvZiBvcHRpb25zXCI+XG5cdFx0PGJ1dHRvbiBjbGFzcz1cIm9wdGlvbkNvbnRhaW5lclwiXG5cdFx0XHRbbmdDbGFzc109XCJ7Y2xhc3NpYzogdmFyaWFudCA9PT0gJ2NsYXNzaWMnLCBidXR0b246IHZhcmlhbnQgPT09ICdidXR0b24nLCBidXR0b25HcmF5OiB2YXJpYW50ID09PSAnYnV0dG9uR3JheScsIGlzU2VsZWN0ZWQ6IGlubmVyVmFsdWUgPT09IG9wdGlvbi5pZH1cIlxuXHRcdFx0KGNsaWNrKT1cInNldElubmVyVmFsdWVBbmROb3RpZnkob3B0aW9uLmlkKVwiXG5cdFx0PlxuXHRcdFx0PGRpdiBjbGFzcz1cInJhZGlvQW5kTmFtZVwiPlxuXHRcdFx0XHQ8ZGl2IGNsYXNzPVwic2VsZWN0ZWRSYWRpb0J0bkNvbnRhaW5lclwiICpuZ0lmPVwidmFyaWFudCA9PT0gJ2NsYXNzaWMnXCI+XG5cdFx0XHRcdFx0PGRpdiBjbGFzcz1cInNlbGVjdGVkXCIgKm5nSWY9XCJpbm5lclZhbHVlID09PSBvcHRpb24uaWRcIj48L2Rpdj5cblx0XHRcdFx0PC9kaXY+XG5cdFx0XHRcdDxkaXYgY2xhc3M9XCJuYW1lQW5kRGVzY3JpcHRpb25cIj5cblx0XHRcdFx0XHQ8ZGl2Pnt7b3B0aW9uLm5hbWV9fTwvZGl2PlxuXHRcdFx0XHRcdDxkaXYgY2xhc3M9XCJkZXNjcmlwdGlvblwiICpuZ0lmPVwib3B0aW9uLmRlc2NyaXB0aW9uXCI+e3tvcHRpb24uZGVzY3JpcHRpb259fTwvZGl2PlxuXHRcdFx0XHQ8L2Rpdj5cblx0XHRcdDwvZGl2PlxuXHRcdDwvYnV0dG9uPlxuXHQ8L25nLWNvbnRhaW5lcj5cbjwvZGl2PlxuIl19
|
|
@@ -2553,6 +2553,7 @@ class FileInputComponent extends MultipleValueAccessorBase {
|
|
|
2553
2553
|
this.clearable = false;
|
|
2554
2554
|
this.onlyShowUploadButton = false;
|
|
2555
2555
|
this.useFullParentSize = false;
|
|
2556
|
+
this.fullyCustom = false;
|
|
2556
2557
|
}
|
|
2557
2558
|
onChange(files) {
|
|
2558
2559
|
const result = [];
|
|
@@ -2591,11 +2592,11 @@ class FileInputComponent extends MultipleValueAccessorBase {
|
|
|
2591
2592
|
this.nativeInputRef.nativeElement.click();
|
|
2592
2593
|
}
|
|
2593
2594
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FileInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
2594
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: FileInputComponent, selector: "klp-form-file-input", inputs: { isLoading: "isLoading", clearable: "clearable", onlyShowUploadButton: "onlyShowUploadButton", useFullParentSize: "useFullParentSize", buttonText: "buttonText" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: FileInputComponent, multi: true }], viewQueries: [{ propertyName: "nativeInputRef", first: true, predicate: ["nativeInputRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\" [ngClass]=\"{fullParentSize: useFullParentSize, showErrors: isInErrorState()}\">\n\t<div class=\"buttonContainer\">\n\t\t<input\n\t\t\ttype=\"file\"\n\t\t\t#nativeInputRef\n\t\t\t(change)=\"onChange($event.target.files)\"\n\t\t\t[multiple]=\"multiple\"\n\t\t\t[disabled]=\"disabled\"\n\t\t>\n\t\t<klp-form-button
|
|
2595
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: FileInputComponent, selector: "klp-form-file-input", inputs: { isLoading: "isLoading", clearable: "clearable", onlyShowUploadButton: "onlyShowUploadButton", useFullParentSize: "useFullParentSize", buttonText: "buttonText", fullyCustom: "fullyCustom" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: FileInputComponent, multi: true }], viewQueries: [{ propertyName: "nativeInputRef", first: true, predicate: ["nativeInputRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"fullyCustom\" *ngIf=\"fullyCustom\">\n\t<input\n\t\ttype=\"file\"\n\t\t#nativeInputRef\n\t\t(change)=\"onChange($event.target.files)\"\n\t\t[multiple]=\"multiple\"\n\t\t[disabled]=\"disabled\"\n\t/>\n\t<div (click)=\"uploadFileClicked()\">\n\t\t<ng-container [ngTemplateOutlet]=\"contentTpl\"></ng-container>\n\t</div>\n</div>\n\n<div class=\"componentContainer\" [ngClass]=\"{fullParentSize: useFullParentSize, showErrors: isInErrorState()}\"\n\t\t *ngIf=\"!fullyCustom\">\n\t<div class=\"buttonContainer\">\n\t\t<input\n\t\t\ttype=\"file\"\n\t\t\t#nativeInputRef\n\t\t\t(change)=\"onChange($event.target.files)\"\n\t\t\t[multiple]=\"multiple\"\n\t\t\t[disabled]=\"disabled\"\n\t\t>\n\t\t<klp-form-button\n\t\t\tclass=\"uploadButton\"\n\t\t\t[isLoading]=\"isLoading\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t(click)=\"uploadFileClicked()\"\n\t\t>\n\t\t\t<div class=\"innerButton\">\n\t\t\t\t<span *ngIf=\"buttonText\">{{ buttonText }}</span>\n\t\t\t\t<div *ngIf=\"!buttonText\">\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"contentTpl\"></ng-container>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"tail\">\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</klp-form-button>\n\t</div>\n\t<div class=\"fileName\" *ngIf=\"!onlyShowUploadButton\">\n\t\t{{ getFileNames() }}\n\t</div>\n\t<klp-form-button class=\"clearButton\" variant=\"white\" *ngIf=\"shouldShowClearButton()\" (click)=\"resetToNull()\">X\n\t</klp-form-button>\n</div>\n\n<ng-template #contentTpl>\n\t<ng-content></ng-content>\n</ng-template>\n", styles: [":host{display:block}:host input:disabled{cursor:not-allowed}.componentContainer{display:flex;align-items:center}.componentContainer.showErrors ::ng-deep button{border-color:#ff8000}.componentContainer.fullParentSize{height:100%;justify-content:center;position:relative}.componentContainer:not(.fullParentSize) .buttonContainer{position:relative}.componentContainer .buttonContainer{flex:0 0 auto}.innerButton{display:flex;align-items:center}.tail{margin-left:.4rem}input{position:absolute;cursor:pointer;opacity:0;inset:0}.fileName{flex:1 1 0px;margin-left:.625rem;color:#515365;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clearButton{flex:0 0 auto}.fullyCustom input{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "klp-form-button", inputs: ["variant", "size", "fullWidth", "hasBorder", "disabled", "isLoading", "type", "clickCallback"] }] }); }
|
|
2595
2596
|
}
|
|
2596
2597
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FileInputComponent, decorators: [{
|
|
2597
2598
|
type: Component,
|
|
2598
|
-
args: [{ selector: 'klp-form-file-input', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: FileInputComponent, multi: true }], template: "<div class=\"componentContainer\" [ngClass]=\"{fullParentSize: useFullParentSize, showErrors: isInErrorState()}\">\n\t<div class=\"buttonContainer\">\n\t\t<input\n\t\t\ttype=\"file\"\n\t\t\t#nativeInputRef\n\t\t\t(change)=\"onChange($event.target.files)\"\n\t\t\t[multiple]=\"multiple\"\n\t\t\t[disabled]=\"disabled\"\n\t\t>\n\t\t<klp-form-button
|
|
2599
|
+
args: [{ selector: 'klp-form-file-input', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: FileInputComponent, multi: true }], template: "<div class=\"fullyCustom\" *ngIf=\"fullyCustom\">\n\t<input\n\t\ttype=\"file\"\n\t\t#nativeInputRef\n\t\t(change)=\"onChange($event.target.files)\"\n\t\t[multiple]=\"multiple\"\n\t\t[disabled]=\"disabled\"\n\t/>\n\t<div (click)=\"uploadFileClicked()\">\n\t\t<ng-container [ngTemplateOutlet]=\"contentTpl\"></ng-container>\n\t</div>\n</div>\n\n<div class=\"componentContainer\" [ngClass]=\"{fullParentSize: useFullParentSize, showErrors: isInErrorState()}\"\n\t\t *ngIf=\"!fullyCustom\">\n\t<div class=\"buttonContainer\">\n\t\t<input\n\t\t\ttype=\"file\"\n\t\t\t#nativeInputRef\n\t\t\t(change)=\"onChange($event.target.files)\"\n\t\t\t[multiple]=\"multiple\"\n\t\t\t[disabled]=\"disabled\"\n\t\t>\n\t\t<klp-form-button\n\t\t\tclass=\"uploadButton\"\n\t\t\t[isLoading]=\"isLoading\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t(click)=\"uploadFileClicked()\"\n\t\t>\n\t\t\t<div class=\"innerButton\">\n\t\t\t\t<span *ngIf=\"buttonText\">{{ buttonText }}</span>\n\t\t\t\t<div *ngIf=\"!buttonText\">\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"contentTpl\"></ng-container>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"tail\">\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</klp-form-button>\n\t</div>\n\t<div class=\"fileName\" *ngIf=\"!onlyShowUploadButton\">\n\t\t{{ getFileNames() }}\n\t</div>\n\t<klp-form-button class=\"clearButton\" variant=\"white\" *ngIf=\"shouldShowClearButton()\" (click)=\"resetToNull()\">X\n\t</klp-form-button>\n</div>\n\n<ng-template #contentTpl>\n\t<ng-content></ng-content>\n</ng-template>\n", styles: [":host{display:block}:host input:disabled{cursor:not-allowed}.componentContainer{display:flex;align-items:center}.componentContainer.showErrors ::ng-deep button{border-color:#ff8000}.componentContainer.fullParentSize{height:100%;justify-content:center;position:relative}.componentContainer:not(.fullParentSize) .buttonContainer{position:relative}.componentContainer .buttonContainer{flex:0 0 auto}.innerButton{display:flex;align-items:center}.tail{margin-left:.4rem}input{position:absolute;cursor:pointer;opacity:0;inset:0}.fileName{flex:1 1 0px;margin-left:.625rem;color:#515365;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clearButton{flex:0 0 auto}.fullyCustom input{display:none}\n"] }]
|
|
2599
2600
|
}], propDecorators: { isLoading: [{
|
|
2600
2601
|
type: Input
|
|
2601
2602
|
}], clearable: [{
|
|
@@ -2606,6 +2607,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
|
2606
2607
|
type: Input
|
|
2607
2608
|
}], buttonText: [{
|
|
2608
2609
|
type: Input
|
|
2610
|
+
}], fullyCustom: [{
|
|
2611
|
+
type: Input
|
|
2609
2612
|
}], nativeInputRef: [{
|
|
2610
2613
|
type: ViewChild,
|
|
2611
2614
|
args: ['nativeInputRef']
|
|
@@ -2755,20 +2758,23 @@ class RadioComponent extends ValueAccessorBase {
|
|
|
2755
2758
|
super(...arguments);
|
|
2756
2759
|
this.orientation = Orientation.ROW;
|
|
2757
2760
|
this.variant = 'classic';
|
|
2761
|
+
this.size = 'medium';
|
|
2758
2762
|
this.Orientation = Orientation;
|
|
2759
2763
|
}
|
|
2760
2764
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: RadioComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
2761
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: RadioComponent, selector: "klp-form-radio", inputs: { options: "options", orientation: "orientation", variant: "variant" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: RadioComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\" [ngClass]=\"{'verticallyOriented': orientation === Orientation.COLUMN, 'horizontallyOriented': orientation === Orientation.ROW}\">\n\t<ng-container *ngFor=\"let option of options\">\n\t\t<button class=\"optionContainer\"\n\t\t\t[ngClass]=\"{classic: variant === 'classic', button: variant === 'button', isSelected: innerValue === option.id}\"\n\t\t\t(click)=\"setInnerValueAndNotify(option.id)\"\n\t\t>\n\t\t\t<div class=\"radioAndName\">\n\t\t\t\t<div class=\"selectedRadioBtnContainer\" *ngIf=\"variant === 'classic'\">\n\t\t\t\t\t<div class=\"selected\" *ngIf=\"innerValue === option.id\"></div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"nameAndDescription\">\n\t\t\t\t\t<div>{{option.name}}</div>\n\t\t\t\t\t<div class=\"description\" *ngIf=\"option.description\">{{option.description}}</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</button>\n\t</ng-container>\n</div>\n", styles: [":host{display:block}.componentContainer{position:relative;display:flex}.componentContainer.verticallyOriented{flex-direction:column}.componentContainer.verticallyOriented .optionContainer{margin-bottom:.3125rem}.componentContainer.verticallyOriented .optionContainer:last-child{margin-bottom:0}.componentContainer.horizontallyOriented{flex-direction:row}.componentContainer.horizontallyOriented .optionContainer:first-child{border-radius:6px 0 0 6px}.componentContainer.horizontallyOriented .optionContainer:last-child{border-radius:0 6px 6px 0}.optionContainer{margin-right:.3125rem;background:transparent;border:none;align-items:center}.optionContainer.classic{cursor:pointer}.optionContainer.classic .selectedRadioBtnContainer{flex:0 0 auto;position:relative;height:20px;width:20px;padding:4px;border-radius:50%;border:2px solid #e6ecf5;margin-right:.3125rem}.optionContainer.classic .selectedRadioBtnContainer .selected{height:100%;width:100%;display:block;border-radius:100%;background-color:#27bb5f}.optionContainer.classic .description{opacity:1;color:#888da8}.optionContainer.classic .nameAndDescription{color:#515365}.optionContainer.button{position:relative;cursor:pointer;padding:10px 14px;margin-right:0;transition:all .3s ease-in-out;color:#27bb5f;border:1px solid #27bb5f;background-color:#fff}.optionContainer.button.isSelected{background:#27bb5f;color:#fff}.radioAndName{display:flex;flex-direction:row;gap:.2rem}.nameAndDescription{text-align:left;line-height:1.1rem}.description{margin-top:.2rem;opacity:.6}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
2765
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: RadioComponent, selector: "klp-form-radio", inputs: { options: "options", orientation: "orientation", variant: "variant", size: "size" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: RadioComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\" [ngClass]=\"{'verticallyOriented': orientation === Orientation.COLUMN, 'horizontallyOriented': orientation === Orientation.ROW, buttonGray: variant === 'buttonGray', sizeSmall: size === 'small'}\">\n\t<ng-container *ngFor=\"let option of options\">\n\t\t<button class=\"optionContainer\"\n\t\t\t[ngClass]=\"{classic: variant === 'classic', button: variant === 'button', buttonGray: variant === 'buttonGray', isSelected: innerValue === option.id}\"\n\t\t\t(click)=\"setInnerValueAndNotify(option.id)\"\n\t\t>\n\t\t\t<div class=\"radioAndName\">\n\t\t\t\t<div class=\"selectedRadioBtnContainer\" *ngIf=\"variant === 'classic'\">\n\t\t\t\t\t<div class=\"selected\" *ngIf=\"innerValue === option.id\"></div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"nameAndDescription\">\n\t\t\t\t\t<div>{{option.name}}</div>\n\t\t\t\t\t<div class=\"description\" *ngIf=\"option.description\">{{option.description}}</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</button>\n\t</ng-container>\n</div>\n", styles: [":host{display:block}.componentContainer{position:relative;display:flex}.componentContainer.verticallyOriented{flex-direction:column}.componentContainer.verticallyOriented .optionContainer{margin-bottom:.3125rem}.componentContainer.verticallyOriented .optionContainer:last-child{margin-bottom:0}.componentContainer.horizontallyOriented{flex-direction:row}.componentContainer.horizontallyOriented .optionContainer:first-child{border-radius:6px 0 0 6px}.componentContainer.horizontallyOriented .optionContainer:last-child{border-radius:0 6px 6px 0}.componentContainer.horizontallyOriented.buttonGray .optionContainer:first-child{border-radius:5px}.componentContainer.horizontallyOriented.buttonGray .optionContainer:last-child{border-radius:5px}.componentContainer.buttonGray{background:#eaecf0;border-radius:5px;display:inline-block}.componentContainer.sizeSmall .optionContainer{padding:.4rem .8rem}.optionContainer{margin-right:.3125rem;background:transparent;border:none;align-items:center}.optionContainer.classic{cursor:pointer}.optionContainer.classic .selectedRadioBtnContainer{flex:0 0 auto;position:relative;height:20px;width:20px;padding:4px;border-radius:50%;border:2px solid #e6ecf5;margin-right:.3125rem}.optionContainer.classic .selectedRadioBtnContainer .selected{height:100%;width:100%;display:block;border-radius:100%;background-color:#27bb5f}.optionContainer.classic .description{opacity:1;color:#888da8}.optionContainer.classic .nameAndDescription{color:#515365}.optionContainer.button{position:relative;cursor:pointer;padding:10px 14px;margin-right:0;transition:all .3s ease-in-out;color:#27bb5f;border:1px solid #27bb5f;background-color:#fff}.optionContainer.button.isSelected{background:#27bb5f;color:#fff}.optionContainer.buttonGray{position:relative;cursor:pointer;padding:10px 14px;margin:2px;color:#515365;background:#eaecf0;border-radius:5px}.optionContainer.buttonGray.isSelected{background:#fff;color:#101828}.radioAndName{display:flex;flex-direction:row;gap:.2rem}.nameAndDescription{text-align:left;line-height:1.1rem}.description{margin-top:.2rem;opacity:.6}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
2762
2766
|
}
|
|
2763
2767
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: RadioComponent, decorators: [{
|
|
2764
2768
|
type: Component,
|
|
2765
|
-
args: [{ selector: 'klp-form-radio', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: RadioComponent, multi: true }], template: "<div class=\"componentContainer\" [ngClass]=\"{'verticallyOriented': orientation === Orientation.COLUMN, 'horizontallyOriented': orientation === Orientation.ROW}\">\n\t<ng-container *ngFor=\"let option of options\">\n\t\t<button class=\"optionContainer\"\n\t\t\t[ngClass]=\"{classic: variant === 'classic', button: variant === 'button', isSelected: innerValue === option.id}\"\n\t\t\t(click)=\"setInnerValueAndNotify(option.id)\"\n\t\t>\n\t\t\t<div class=\"radioAndName\">\n\t\t\t\t<div class=\"selectedRadioBtnContainer\" *ngIf=\"variant === 'classic'\">\n\t\t\t\t\t<div class=\"selected\" *ngIf=\"innerValue === option.id\"></div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"nameAndDescription\">\n\t\t\t\t\t<div>{{option.name}}</div>\n\t\t\t\t\t<div class=\"description\" *ngIf=\"option.description\">{{option.description}}</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</button>\n\t</ng-container>\n</div>\n", styles: [":host{display:block}.componentContainer{position:relative;display:flex}.componentContainer.verticallyOriented{flex-direction:column}.componentContainer.verticallyOriented .optionContainer{margin-bottom:.3125rem}.componentContainer.verticallyOriented .optionContainer:last-child{margin-bottom:0}.componentContainer.horizontallyOriented{flex-direction:row}.componentContainer.horizontallyOriented .optionContainer:first-child{border-radius:6px 0 0 6px}.componentContainer.horizontallyOriented .optionContainer:last-child{border-radius:0 6px 6px 0}.optionContainer{margin-right:.3125rem;background:transparent;border:none;align-items:center}.optionContainer.classic{cursor:pointer}.optionContainer.classic .selectedRadioBtnContainer{flex:0 0 auto;position:relative;height:20px;width:20px;padding:4px;border-radius:50%;border:2px solid #e6ecf5;margin-right:.3125rem}.optionContainer.classic .selectedRadioBtnContainer .selected{height:100%;width:100%;display:block;border-radius:100%;background-color:#27bb5f}.optionContainer.classic .description{opacity:1;color:#888da8}.optionContainer.classic .nameAndDescription{color:#515365}.optionContainer.button{position:relative;cursor:pointer;padding:10px 14px;margin-right:0;transition:all .3s ease-in-out;color:#27bb5f;border:1px solid #27bb5f;background-color:#fff}.optionContainer.button.isSelected{background:#27bb5f;color:#fff}.radioAndName{display:flex;flex-direction:row;gap:.2rem}.nameAndDescription{text-align:left;line-height:1.1rem}.description{margin-top:.2rem;opacity:.6}\n"] }]
|
|
2769
|
+
args: [{ selector: 'klp-form-radio', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: RadioComponent, multi: true }], template: "<div class=\"componentContainer\" [ngClass]=\"{'verticallyOriented': orientation === Orientation.COLUMN, 'horizontallyOriented': orientation === Orientation.ROW, buttonGray: variant === 'buttonGray', sizeSmall: size === 'small'}\">\n\t<ng-container *ngFor=\"let option of options\">\n\t\t<button class=\"optionContainer\"\n\t\t\t[ngClass]=\"{classic: variant === 'classic', button: variant === 'button', buttonGray: variant === 'buttonGray', isSelected: innerValue === option.id}\"\n\t\t\t(click)=\"setInnerValueAndNotify(option.id)\"\n\t\t>\n\t\t\t<div class=\"radioAndName\">\n\t\t\t\t<div class=\"selectedRadioBtnContainer\" *ngIf=\"variant === 'classic'\">\n\t\t\t\t\t<div class=\"selected\" *ngIf=\"innerValue === option.id\"></div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"nameAndDescription\">\n\t\t\t\t\t<div>{{option.name}}</div>\n\t\t\t\t\t<div class=\"description\" *ngIf=\"option.description\">{{option.description}}</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</button>\n\t</ng-container>\n</div>\n", styles: [":host{display:block}.componentContainer{position:relative;display:flex}.componentContainer.verticallyOriented{flex-direction:column}.componentContainer.verticallyOriented .optionContainer{margin-bottom:.3125rem}.componentContainer.verticallyOriented .optionContainer:last-child{margin-bottom:0}.componentContainer.horizontallyOriented{flex-direction:row}.componentContainer.horizontallyOriented .optionContainer:first-child{border-radius:6px 0 0 6px}.componentContainer.horizontallyOriented .optionContainer:last-child{border-radius:0 6px 6px 0}.componentContainer.horizontallyOriented.buttonGray .optionContainer:first-child{border-radius:5px}.componentContainer.horizontallyOriented.buttonGray .optionContainer:last-child{border-radius:5px}.componentContainer.buttonGray{background:#eaecf0;border-radius:5px;display:inline-block}.componentContainer.sizeSmall .optionContainer{padding:.4rem .8rem}.optionContainer{margin-right:.3125rem;background:transparent;border:none;align-items:center}.optionContainer.classic{cursor:pointer}.optionContainer.classic .selectedRadioBtnContainer{flex:0 0 auto;position:relative;height:20px;width:20px;padding:4px;border-radius:50%;border:2px solid #e6ecf5;margin-right:.3125rem}.optionContainer.classic .selectedRadioBtnContainer .selected{height:100%;width:100%;display:block;border-radius:100%;background-color:#27bb5f}.optionContainer.classic .description{opacity:1;color:#888da8}.optionContainer.classic .nameAndDescription{color:#515365}.optionContainer.button{position:relative;cursor:pointer;padding:10px 14px;margin-right:0;transition:all .3s ease-in-out;color:#27bb5f;border:1px solid #27bb5f;background-color:#fff}.optionContainer.button.isSelected{background:#27bb5f;color:#fff}.optionContainer.buttonGray{position:relative;cursor:pointer;padding:10px 14px;margin:2px;color:#515365;background:#eaecf0;border-radius:5px}.optionContainer.buttonGray.isSelected{background:#fff;color:#101828}.radioAndName{display:flex;flex-direction:row;gap:.2rem}.nameAndDescription{text-align:left;line-height:1.1rem}.description{margin-top:.2rem;opacity:.6}\n"] }]
|
|
2766
2770
|
}], propDecorators: { options: [{
|
|
2767
2771
|
type: Input
|
|
2768
2772
|
}], orientation: [{
|
|
2769
2773
|
type: Input
|
|
2770
2774
|
}], variant: [{
|
|
2771
2775
|
type: Input
|
|
2776
|
+
}], size: [{
|
|
2777
|
+
type: Input
|
|
2772
2778
|
}] } });
|
|
2773
2779
|
|
|
2774
2780
|
const triangleSize = '12px';
|