@klippa/ngx-enhancy-forms 14.17.14 → 14.19.0

package/fesm2020/klippa-ngx-enhancy-forms.mjs

@@ -2145,7 +2145,6 @@ class FileInputComponent extends MultipleValueAccessorBase {
         this.clearable = false;
         this.onlyShowUploadButton = false;
         this.useFullParentSize = false;
-        this.buttonText = 'Upload a file';
     }
     onChange(files) {
         const result = [];
@@ -2185,10 +2184,10 @@ class FileInputComponent extends MultipleValueAccessorBase {
     }
 }
 FileInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: FileInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-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"] }] });
+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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: FileInputComponent, decorators: [{
             type: Component,
-            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"] }]
+            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"] }]
         }], propDecorators: { isLoading: [{
                 type: Input
             }], clearable: [{
@@ -2362,11 +2361,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
             }] } });
 
 const triangleSize = '12px';
+const colors = {
+    orange: { noAlpha: 'rgb(255, 128, 0)', withAlpha: 'rgba(255, 128, 0, 0.1254901961)' },
+    black: { noAlpha: 'rgb(40, 40, 40)', withAlpha: 'rgba(40, 40, 40, 0.1254901961)' },
+};
 class WithTooltipDirective {
     constructor(el) {
-        this.klpWithTooltip = true;
+        this.klpWithTooltip = 'orange';
         el.nativeElement.addEventListener('mouseenter', () => {
-            if (!this.klpWithTooltip) {
+            if (!stringIsSetAndFilled(this.klpWithTooltip)) {
                 return;
             }
             if (getComputedStyle(el.nativeElement).position === 'static') {
@@ -2374,7 +2377,7 @@ class WithTooltipDirective {
             }
             this.div = document.createElement('div');
             this.div.style.zIndex = '2';
-            this.div.style.color = '#ff8000';
+            this.div.style.color = `${colors[this.klpWithTooltip].noAlpha}`;
             this.div.style.position = 'fixed';
             this.div.style.left = `${el.nativeElement.getBoundingClientRect().x}px`;
             this.div.style.top = `${el.nativeElement.getBoundingClientRect().y}px`;
@@ -2382,8 +2385,8 @@ class WithTooltipDirective {
             this.div.style.maxWidth = '200px';
             this.div.style.whiteSpace = 'break-spaces';
             this.div.style.backgroundColor = 'white';
-            this.div.style.border = '1px solid rgba(255, 128, 0, 0.1254901961)';
-            this.div.style.boxShadow = `2px 3px 10px 0px rgba(255, 128, 0, 0.1254901961)`;
+            this.div.style.border = `1px solid ${colors[this.klpWithTooltip].withAlpha}`;
+            this.div.style.boxShadow = `2px 3px 10px 0px ${colors[this.klpWithTooltip].withAlpha}`;
             this.div.style.padding = '0.3rem 0.5rem';
             this.div.style.boxSizing = 'border-box';
             this.div.style.borderRadius = '3px';
@@ -2399,7 +2402,7 @@ class WithTooltipDirective {
             this.triangle.style.height = '0';
             this.triangle.style.borderLeft = `${triangleSize} solid transparent`;
             this.triangle.style.borderRight = `${triangleSize} solid transparent`;
-            this.triangle.style.borderTop = `${triangleSize} solid rgba(255, 128, 0, 0.1254901961)`;
+            this.triangle.style.borderTop = `${triangleSize} solid ${colors[this.klpWithTooltip].withAlpha}`;
             el.nativeElement.prepend(this.triangle);
             this.triangleWhite = document.createElement('div');
             this.triangleWhite.style.zIndex = '3';