@klippa/ngx-enhancy-forms 14.17.13 → 14.18.0
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/esm2020/lib/elements/file-input/file-input.component.mjs +3 -4
- package/esm2020/lib/elements/radio/radio.component.mjs +2 -2
- package/fesm2015/klippa-ngx-enhancy-forms.mjs +4 -5
- package/fesm2015/klippa-ngx-enhancy-forms.mjs.map +1 -1
- package/fesm2020/klippa-ngx-enhancy-forms.mjs +4 -5
- package/fesm2020/klippa-ngx-enhancy-forms.mjs.map +1 -1
- package/lib/elements/file-input/file-input.component.d.ts +1 -1
- package/package.json +1 -1
|
@@ -13,7 +13,6 @@ export class FileInputComponent extends MultipleValueAccessorBase {
|
|
|
13
13
|
this.clearable = false;
|
|
14
14
|
this.onlyShowUploadButton = false;
|
|
15
15
|
this.useFullParentSize = false;
|
|
16
|
-
this.buttonText = 'Upload a file';
|
|
17
16
|
}
|
|
18
17
|
onChange(files) {
|
|
19
18
|
const result = [];
|
|
@@ -53,10 +52,10 @@ export class FileInputComponent extends MultipleValueAccessorBase {
|
|
|
53
52
|
}
|
|
54
53
|
}
|
|
55
54
|
FileInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: FileInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
56
|
-
FileInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", 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 class=\"uploadButton\" [isLoading]=\"isLoading\" [disabled]=\"disabled\" (click)=\"uploadFileClicked()\">\n\t\t\t<div class=\"innerButton\">\n\t\t\t\t{{buttonText}}\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</klp-form-button>\n</div>\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}\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
|
+
FileInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", 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 class=\"uploadButton\" [isLoading]=\"isLoading\" [disabled]=\"disabled\" (click)=\"uploadFileClicked()\">\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\"><ng-content></ng-content></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</klp-form-button>\n</div>\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}\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"] }] });
|
|
57
56
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: FileInputComponent, decorators: [{
|
|
58
57
|
type: Component,
|
|
59
|
-
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 class=\"uploadButton\" [isLoading]=\"isLoading\" [disabled]=\"disabled\" (click)=\"uploadFileClicked()\">\n\t\t\t<div class=\"innerButton\">\n\t\t\t\t{{buttonText}}\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</klp-form-button>\n</div>\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}\n"] }]
|
|
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 class=\"uploadButton\" [isLoading]=\"isLoading\" [disabled]=\"disabled\" (click)=\"uploadFileClicked()\">\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\"><ng-content></ng-content></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</klp-form-button>\n</div>\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}\n"] }]
|
|
60
59
|
}], propDecorators: { isLoading: [{
|
|
61
60
|
type: Input
|
|
62
61
|
}], clearable: [{
|
|
@@ -71,4 +70,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
|
|
|
71
70
|
type: ViewChild,
|
|
72
71
|
args: ['nativeInputRef']
|
|
73
72
|
}] } });
|
|
74
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
73
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmlsZS1pbnB1dC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9rbGlwcGEvbmd4LWVuaGFuY3ktZm9ybXMvc3JjL2xpYi9lbGVtZW50cy9maWxlLWlucHV0L2ZpbGUtaW5wdXQuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMva2xpcHBhL25neC1lbmhhbmN5LWZvcm1zL3NyYy9saWIvZWxlbWVudHMvZmlsZS1pbnB1dC9maWxlLWlucHV0LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxTQUFTLEVBQWMsS0FBSyxFQUFFLFNBQVMsRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUN0RSxPQUFPLEVBQUMsaUJBQWlCLEVBQUMsTUFBTSxnQkFBZ0IsQ0FBQztBQUNqRCxPQUFPLEVBQUMseUJBQXlCLEVBQUMsTUFBTSwrREFBK0QsQ0FBQztBQUN4RyxPQUFPLEVBQUMsVUFBVSxFQUFDLE1BQU0sbUJBQW1CLENBQUM7QUFDN0MsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sbUJBQW1CLENBQUM7Ozs7QUFReEQsTUFBTSxPQUFPLGtCQUFtQixTQUFRLHlCQUErQjtJQU52RTs7UUFPVSxjQUFTLEdBQUcsS0FBSyxDQUFDO1FBQ2xCLGNBQVMsR0FBRyxLQUFLLENBQUM7UUFDbEIseUJBQW9CLEdBQUcsS0FBSyxDQUFDO1FBQzdCLHNCQUFpQixHQUFHLEtBQUssQ0FBQztLQTBDbkM7SUF0Q08sUUFBUSxDQUFDLEtBQWU7UUFDOUIsTUFBTSxNQUFNLEdBQUcsRUFBRSxDQUFDO1FBQ2xCLEtBQUssSUFBSSxDQUFDLEdBQUcsQ0FBQyxFQUFFLENBQUMsR0FBRyxLQUFLLENBQUMsTUFBTSxFQUFFLENBQUMsRUFBRSxFQUFFO1lBQ3RDLE1BQU0sQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDO1NBQzNCO1FBQ0QsSUFBSSxDQUFDLHNCQUFzQixDQUFDLE1BQU0sQ0FBQyxDQUFDO1FBQ3BDLGlEQUFpRDtRQUNqRCxJQUFJLENBQUMsY0FBYyxDQUFDLGFBQWEsQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDO0lBQ2hELENBQUM7SUFFTSxZQUFZO1FBQ2xCLElBQUksS0FBSyxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLEVBQUU7WUFDbkMsT0FBTyxJQUFJLENBQUMsVUFBVSxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7U0FDbkQ7YUFBTSxJQUFJLElBQUksQ0FBQyxVQUFVLFlBQVksSUFBSSxFQUFFO1lBQzNDLE9BQU8sSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUM7U0FDNUI7UUFDRCxPQUFPLElBQUksQ0FBQztJQUNiLENBQUM7SUFFTSxxQkFBcUI7UUFDM0IsSUFBSSxJQUFJLENBQUMsb0JBQW9CLEVBQUU7WUFDOUIsT0FBTyxLQUFLLENBQUM7U0FDYjtRQUNELElBQUksSUFBSSxDQUFDLFFBQVEsRUFBRTtZQUNsQixJQUFJLG1CQUFtQixDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsRUFBRTtnQkFDekMsT0FBTyxJQUFJLENBQUM7YUFDWjtZQUNELE9BQU8sS0FBSyxDQUFDO1NBQ2I7UUFDRCxJQUFJLFVBQVUsQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLEVBQUU7WUFDaEMsT0FBTyxJQUFJLENBQUM7U0FDWjtRQUNELE9BQU8sS0FBSyxDQUFDO0lBQ2QsQ0FBQztJQUVNLGlCQUFpQjtRQUN2QixJQUFJLENBQUMsY0FBYyxDQUFDLGFBQWEsQ0FBQyxLQUFLLEVBQUUsQ0FBQztJQUMzQyxDQUFDOzsrR0E3Q1csa0JBQWtCO21HQUFsQixrQkFBa0IsME5BRm5CLENBQUMsRUFBQyxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsV0FBVyxFQUFFLGtCQUFrQixFQUFFLEtBQUssRUFBRSxJQUFJLEVBQUMsQ0FBQyxtS0NWeEYsc2dDQXdCQTsyRkRaYSxrQkFBa0I7a0JBTjlCLFNBQVM7K0JBQ0MscUJBQXFCLGFBR3BCLENBQUMsRUFBQyxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsV0FBVyxvQkFBb0IsRUFBRSxLQUFLLEVBQUUsSUFBSSxFQUFDLENBQUM7OEJBRzlFLFNBQVM7c0JBQWpCLEtBQUs7Z0JBQ0csU0FBUztzQkFBakIsS0FBSztnQkFDRyxvQkFBb0I7c0JBQTVCLEtBQUs7Z0JBQ0csaUJBQWlCO3NCQUF6QixLQUFLO2dCQUNHLFVBQVU7c0JBQWxCLEtBQUs7Z0JBQ3VCLGNBQWM7c0JBQTFDLFNBQVM7dUJBQUMsZ0JBQWdCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtDb21wb25lbnQsIEVsZW1lbnRSZWYsIElucHV0LCBWaWV3Q2hpbGR9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtOR19WQUxVRV9BQ0NFU1NPUn0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHtNdWx0aXBsZVZhbHVlQWNjZXNzb3JCYXNlfSBmcm9tICcuLi92YWx1ZS1hY2Nlc3Nvci1iYXNlL211bHRpcGxlLXZhbHVlLWFjY2Vzc29yLWJhc2UuY29tcG9uZW50JztcbmltcG9ydCB7aXNWYWx1ZVNldH0gZnJvbSAnLi4vLi4vdXRpbC92YWx1ZXMnO1xuaW1wb3J0IHsgYXJyYXlJc1NldEFuZEZpbGxlZCB9IGZyb20gJy4uLy4uL3V0aWwvYXJyYXlzJztcblxuQENvbXBvbmVudCh7XG5cdHNlbGVjdG9yOiAna2xwLWZvcm0tZmlsZS1pbnB1dCcsXG5cdHRlbXBsYXRlVXJsOiAnLi9maWxlLWlucHV0LmNvbXBvbmVudC5odG1sJyxcblx0c3R5bGVVcmxzOiBbJy4vZmlsZS1pbnB1dC5jb21wb25lbnQuc2NzcyddLFxuXHRwcm92aWRlcnM6IFt7cHJvdmlkZTogTkdfVkFMVUVfQUNDRVNTT1IsIHVzZUV4aXN0aW5nOiBGaWxlSW5wdXRDb21wb25lbnQsIG11bHRpOiB0cnVlfV0sXG59KVxuZXhwb3J0IGNsYXNzIEZpbGVJbnB1dENvbXBvbmVudCBleHRlbmRzIE11bHRpcGxlVmFsdWVBY2Nlc3NvckJhc2U8RmlsZT4ge1xuXHRASW5wdXQoKSBpc0xvYWRpbmcgPSBmYWxzZTtcblx0QElucHV0KCkgY2xlYXJhYmxlID0gZmFsc2U7XG5cdEBJbnB1dCgpIG9ubHlTaG93VXBsb2FkQnV0dG9uID0gZmFsc2U7XG5cdEBJbnB1dCgpIHVzZUZ1bGxQYXJlbnRTaXplID0gZmFsc2U7XG5cdEBJbnB1dCgpIGJ1dHRvblRleHQ6IHN0cmluZztcblx0QFZpZXdDaGlsZCgnbmF0aXZlSW5wdXRSZWYnKSBuYXRpdmVJbnB1dFJlZjogRWxlbWVudFJlZjxIVE1MSW5wdXRFbGVtZW50PjtcblxuXHRwdWJsaWMgb25DaGFuZ2UoZmlsZXM6IEZpbGVMaXN0KTogdm9pZCB7XG5cdFx0Y29uc3QgcmVzdWx0ID0gW107XG5cdFx0Zm9yIChsZXQgaSA9IDA7IGkgPCBmaWxlcy5sZW5ndGg7IGkrKykge1xuXHRcdFx0cmVzdWx0LnB1c2goZmlsZXMuaXRlbShpKSk7XG5cdFx0fVxuXHRcdHRoaXMuc2V0SW5uZXJWYWx1ZUFuZE5vdGlmeShyZXN1bHQpO1xuXHRcdC8vIHRvIG1ha2Ugc3VyZSB3ZSBjYW4gc2VsZWN0IHRoZSBzYW1lIGZpbGUgYWdhaW5cblx0XHR0aGlzLm5hdGl2ZUlucHV0UmVmLm5hdGl2ZUVsZW1lbnQudmFsdWUgPSBudWxsO1xuXHR9XG5cblx0cHVibGljIGdldEZpbGVOYW1lcygpOiBzdHJpbmcge1xuXHRcdGlmIChBcnJheS5pc0FycmF5KHRoaXMuaW5uZXJWYWx1ZSkpIHtcblx0XHRcdHJldHVybiB0aGlzLmlubmVyVmFsdWUubWFwKGUgPT4gZS5uYW1lKS5qb2luKCcsICcpO1xuXHRcdH0gZWxzZSBpZiAodGhpcy5pbm5lclZhbHVlIGluc3RhbmNlb2YgRmlsZSkge1xuXHRcdFx0cmV0dXJuIHRoaXMuaW5uZXJWYWx1ZS5uYW1lO1xuXHRcdH1cblx0XHRyZXR1cm4gbnVsbDtcblx0fVxuXG5cdHB1YmxpYyBzaG91bGRTaG93Q2xlYXJCdXR0b24oKTogYm9vbGVhbiB7XG5cdFx0aWYgKHRoaXMub25seVNob3dVcGxvYWRCdXR0b24pIHtcblx0XHRcdHJldHVybiBmYWxzZTtcblx0XHR9XG5cdFx0aWYgKHRoaXMubXVsdGlwbGUpIHtcblx0XHRcdGlmIChhcnJheUlzU2V0QW5kRmlsbGVkKHRoaXMuaW5uZXJWYWx1ZSkpIHtcblx0XHRcdFx0cmV0dXJuIHRydWU7XG5cdFx0XHR9XG5cdFx0XHRyZXR1cm4gZmFsc2U7XG5cdFx0fVxuXHRcdGlmIChpc1ZhbHVlU2V0KHRoaXMuaW5uZXJWYWx1ZSkpIHtcblx0XHRcdHJldHVybiB0cnVlO1xuXHRcdH1cblx0XHRyZXR1cm4gZmFsc2U7XG5cdH1cblxuXHRwdWJsaWMgdXBsb2FkRmlsZUNsaWNrZWQoKTogdm9pZCB7XG5cdFx0dGhpcy5uYXRpdmVJbnB1dFJlZi5uYXRpdmVFbGVtZW50LmNsaWNrKCk7XG5cdH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJjb21wb25lbnRDb250YWluZXJcIiBbbmdDbGFzc109XCJ7ZnVsbFBhcmVudFNpemU6IHVzZUZ1bGxQYXJlbnRTaXplLCBzaG93RXJyb3JzOiBpc0luRXJyb3JTdGF0ZSgpfVwiPlxuXHQ8ZGl2IGNsYXNzPVwiYnV0dG9uQ29udGFpbmVyXCI+XG5cdFx0PGlucHV0XG5cdFx0XHR0eXBlPVwiZmlsZVwiXG5cdFx0XHQjbmF0aXZlSW5wdXRSZWZcblx0XHRcdChjaGFuZ2UpPVwib25DaGFuZ2UoJGV2ZW50LnRhcmdldC5maWxlcylcIlxuXHRcdFx0W211bHRpcGxlXT1cIm11bHRpcGxlXCJcblx0XHRcdFtkaXNhYmxlZF09XCJkaXNhYmxlZFwiXG5cdFx0PlxuXHRcdDxrbHAtZm9ybS1idXR0b24gY2xhc3M9XCJ1cGxvYWRCdXR0b25cIiBbaXNMb2FkaW5nXT1cImlzTG9hZGluZ1wiIFtkaXNhYmxlZF09XCJkaXNhYmxlZFwiIChjbGljayk9XCJ1cGxvYWRGaWxlQ2xpY2tlZCgpXCI+XG5cdFx0XHQ8ZGl2IGNsYXNzPVwiaW5uZXJCdXR0b25cIj5cblx0XHRcdFx0PHNwYW4gKm5nSWY9XCJidXR0b25UZXh0XCI+e3tidXR0b25UZXh0fX08L3NwYW4+XG5cdFx0XHRcdDxkaXYgKm5nSWY9XCIhYnV0dG9uVGV4dFwiPjxuZy1jb250ZW50PjwvbmctY29udGVudD48L2Rpdj5cblx0XHRcdFx0PGRpdiBjbGFzcz1cInRhaWxcIj5cblx0XHRcdFx0XHQ8bmctY29udGFpbmVyIFtuZ1RlbXBsYXRlT3V0bGV0XT1cImdldFRhaWxUcGwoKVwiPjwvbmctY29udGFpbmVyPlxuXHRcdFx0XHQ8L2Rpdj5cblx0XHRcdDwvZGl2PlxuXHRcdDwva2xwLWZvcm0tYnV0dG9uPlxuXHQ8L2Rpdj5cblx0PGRpdiBjbGFzcz1cImZpbGVOYW1lXCIgKm5nSWY9XCIhb25seVNob3dVcGxvYWRCdXR0b25cIj5cblx0XHR7e2dldEZpbGVOYW1lcygpfX1cblx0PC9kaXY+XG5cdDxrbHAtZm9ybS1idXR0b24gY2xhc3M9XCJjbGVhckJ1dHRvblwiIHZhcmlhbnQ9XCJ3aGl0ZVwiICpuZ0lmPVwic2hvdWxkU2hvd0NsZWFyQnV0dG9uKClcIiAoY2xpY2spPVwicmVzZXRUb051bGwoKVwiPlg8L2tscC1mb3JtLWJ1dHRvbj5cbjwvZGl2PlxuIl19
|
|
@@ -17,10 +17,10 @@ export class RadioComponent extends ValueAccessorBase {
|
|
|
17
17
|
}
|
|
18
18
|
}
|
|
19
19
|
RadioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: RadioComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
20
|
-
RadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", 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{
|
|
20
|
+
RadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", 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"] }] });
|
|
21
21
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: RadioComponent, decorators: [{
|
|
22
22
|
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{
|
|
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
24
|
}], propDecorators: { options: [{
|
|
25
25
|
type: Input
|
|
26
26
|
}], orientation: [{
|
|
@@ -2205,7 +2205,6 @@ class FileInputComponent extends MultipleValueAccessorBase {
|
|
|
2205
2205
|
this.clearable = false;
|
|
2206
2206
|
this.onlyShowUploadButton = false;
|
|
2207
2207
|
this.useFullParentSize = false;
|
|
2208
|
-
this.buttonText = 'Upload a file';
|
|
2209
2208
|
}
|
|
2210
2209
|
onChange(files) {
|
|
2211
2210
|
const result = [];
|
|
@@ -2245,10 +2244,10 @@ class FileInputComponent extends MultipleValueAccessorBase {
|
|
|
2245
2244
|
}
|
|
2246
2245
|
}
|
|
2247
2246
|
FileInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: FileInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2248
|
-
FileInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", 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 class=\"uploadButton\" [isLoading]=\"isLoading\" [disabled]=\"disabled\" (click)=\"uploadFileClicked()\">\n\t\t\t<div class=\"innerButton\">\n\t\t\t\t{{buttonText}}\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</klp-form-button>\n</div>\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}\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"] }] });
|
|
2247
|
+
FileInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", 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 class=\"uploadButton\" [isLoading]=\"isLoading\" [disabled]=\"disabled\" (click)=\"uploadFileClicked()\">\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\"><ng-content></ng-content></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</klp-form-button>\n</div>\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}\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"] }] });
|
|
2249
2248
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: FileInputComponent, decorators: [{
|
|
2250
2249
|
type: Component,
|
|
2251
|
-
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 class=\"uploadButton\" [isLoading]=\"isLoading\" [disabled]=\"disabled\" (click)=\"uploadFileClicked()\">\n\t\t\t<div class=\"innerButton\">\n\t\t\t\t{{buttonText}}\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</klp-form-button>\n</div>\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}\n"] }]
|
|
2250
|
+
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 class=\"uploadButton\" [isLoading]=\"isLoading\" [disabled]=\"disabled\" (click)=\"uploadFileClicked()\">\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\"><ng-content></ng-content></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</klp-form-button>\n</div>\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}\n"] }]
|
|
2252
2251
|
}], propDecorators: { isLoading: [{
|
|
2253
2252
|
type: Input
|
|
2254
2253
|
}], clearable: [{
|
|
@@ -2409,10 +2408,10 @@ class RadioComponent extends ValueAccessorBase {
|
|
|
2409
2408
|
}
|
|
2410
2409
|
}
|
|
2411
2410
|
RadioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: RadioComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2412
|
-
RadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", 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{
|
|
2411
|
+
RadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", 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"] }] });
|
|
2413
2412
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: RadioComponent, decorators: [{
|
|
2414
2413
|
type: Component,
|
|
2415
|
-
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{
|
|
2414
|
+
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"] }]
|
|
2416
2415
|
}], propDecorators: { options: [{
|
|
2417
2416
|
type: Input
|
|
2418
2417
|
}], orientation: [{
|