@klippa/ngx-enhancy-forms 14.6.0 → 14.6.2
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 -3
- package/esm2020/lib/elements/select/select.component.mjs +10 -7
- package/fesm2015/klippa-ngx-enhancy-forms.mjs +12 -8
- package/fesm2015/klippa-ngx-enhancy-forms.mjs.map +1 -1
- package/fesm2020/klippa-ngx-enhancy-forms.mjs +11 -8
- package/fesm2020/klippa-ngx-enhancy-forms.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -859,14 +859,17 @@ class SelectComponent extends ValueAccessorBase {
|
|
|
859
859
|
if (dropdownPanel) {
|
|
860
860
|
dropdownPanel.style.width = `${Math.max(this.elRef.nativeElement.clientWidth, maxWidth + 40, dropdownPanel.getBoundingClientRect().width)}px`;
|
|
861
861
|
}
|
|
862
|
-
let
|
|
863
|
-
while (
|
|
864
|
-
|
|
862
|
+
let limitingParentContainer = this.elRef.nativeElement;
|
|
863
|
+
while (limitingParentContainer.parentElement && !this.isLimitingContainer(limitingParentContainer)) {
|
|
864
|
+
limitingParentContainer = limitingParentContainer.parentElement;
|
|
865
865
|
}
|
|
866
866
|
if (dropdownPanel) {
|
|
867
|
-
const
|
|
868
|
-
|
|
869
|
-
|
|
867
|
+
const spaceInParent = limitingParentContainer.clientWidth;
|
|
868
|
+
const spaceLeftOfElRef = this.elRef?.nativeElement.getBoundingClientRect().left - limitingParentContainer.getBoundingClientRect().left;
|
|
869
|
+
const spaceRightOfElRef = spaceInParent - spaceLeftOfElRef;
|
|
870
|
+
const shiftToLeft = dropdownPanel?.clientWidth - spaceRightOfElRef + 20;
|
|
871
|
+
if (shiftToLeft > 0) {
|
|
872
|
+
dropdownPanel.style.left = `-${shiftToLeft}px`;
|
|
870
873
|
}
|
|
871
874
|
}
|
|
872
875
|
});
|
|
@@ -1782,10 +1785,10 @@ class FileInputComponent extends MultipleValueAccessorBase {
|
|
|
1782
1785
|
}
|
|
1783
1786
|
}
|
|
1784
1787
|
FileInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: FileInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1785
|
-
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" }, 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}\">\n\t<div class=\"buttonContainer\">\n\t\t<
|
|
1788
|
+
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" }, 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}\">\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\" (click)=\"uploadFileClicked()\">\n\t\t\tUpload a file\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.fullParentSize{height:100%;justify-content:center;position:relative}.componentContainer:not(.fullParentSize) .buttonContainer{position:relative}.componentContainer .buttonContainer{flex:0 0 auto}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: "component", type: ButtonComponent, selector: "klp-form-button", inputs: ["variant", "size", "fullWidth", "hasBorder", "disabled", "isLoading", "type", "clickCallback"] }] });
|
|
1786
1789
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: FileInputComponent, decorators: [{
|
|
1787
1790
|
type: Component,
|
|
1788
|
-
args: [{ selector: 'klp-form-file-input', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: FileInputComponent, multi: true }], template: "<div class=\"componentContainer\" [ngClass]=\"{fullParentSize: useFullParentSize}\">\n\t<div class=\"buttonContainer\">\n\t\t<
|
|
1791
|
+
args: [{ selector: 'klp-form-file-input', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: FileInputComponent, multi: true }], template: "<div class=\"componentContainer\" [ngClass]=\"{fullParentSize: useFullParentSize}\">\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\" (click)=\"uploadFileClicked()\">\n\t\t\tUpload a file\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.fullParentSize{height:100%;justify-content:center;position:relative}.componentContainer:not(.fullParentSize) .buttonContainer{position:relative}.componentContainer .buttonContainer{flex:0 0 auto}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"] }]
|
|
1789
1792
|
}], propDecorators: { isLoading: [{
|
|
1790
1793
|
type: Input
|
|
1791
1794
|
}], clearable: [{
|