@klippa/ngx-enhancy-forms 5.1.0 → 5.3.0

package/bundles/klippa-ngx-enhancy-forms.umd.js

@@ -302,7 +302,7 @@
     FormElementComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'klp-form-element',
-                    template: "<ng-template #errorRef>\n\t<div *ngIf=\"getErrorToShow()\" class=\"errorContainer\">\n\t\t<div *ngIf=\"showDefaultError('min')\">{{substituteParameters(getErrorMessage(\"min\"), {min: attachedControl.errors.min.min})}}</div>\n\t\t<div *ngIf=\"showDefaultError('max')\">{{substituteParameters(getErrorMessage(\"max\"), {max: attachedControl.errors.max.max})}}</div>\n\t\t<div *ngIf=\"showDefaultError('required')\">{{getErrorMessage(\"required\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('email')\">{{getErrorMessage(\"email\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('minlength')\">{{substituteParameters(getErrorMessage(\"minLength\"), {minLength: attachedControl.errors.minlength.requiredLength})}}</div>\n\t\t<div *ngIf=\"showDefaultError('maxlength')\">{{substituteParameters(getErrorMessage(\"maxLength\"), {maxLength: attachedControl.errors.maxlength.requiredLength})}}</div>\n\t\t<div *ngIf=\"showDefaultError('pattern')\">{{getErrorMessage(\"pattern\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('MatchPassword')\">{{getErrorMessage(\"matchPassword\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('date')\">{{getErrorMessage(\"date\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('message')\">{{attachedControl.errors.message.value}}</div>\n\t\t<div [ngTemplateOutlet]=\"getCustomErrorHandler(getErrorToShow())?.templateRef\"></div>\n\t</div>\n</ng-template>\n<ng-container *ngIf=\"direction === 'horizontal'\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\n<div *ngIf=\"attachedControl\" class=\"componentContainer\" [ngClass]=\"{vertical: direction === 'vertical', reverseOrder: swapInputAndCaption}\" #internalComponentRef>\n\t<div class=\"caption\" *ngIf=\"caption || captionRef\" [ngClass]=\"{ hasErrors: getErrorToShow() && attachedControl.touched, percentageSpacing: captionSpacing === 'percentages', 'd30-70': spaceDistribution === '30-70' }\">\n\t\t<div *ngIf=\"captionRef\" class=\"captionRefContainer\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"captionRef\"></ng-container>\n\t\t\t<div *ngIf=\"isRequired()\">&nbsp;*</div>\n\t\t</div>\n\t\t<div *ngIf=\"!captionRef\">{{caption}}<span *ngIf=\"isRequired()\">&nbsp;*</span></div>\n\t</div>\n\t<ng-container *ngIf=\"direction === 'vertical'\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t<div class=\"inputContainer\" [ngClass]=\"{ percentageSpacing: captionSpacing === 'percentages', 'd30-70': spaceDistribution === '30-70' }\">\n\t\t<ng-content></ng-content>\n\t</div>\n</div>\n",
+                    template: "<ng-template #errorRef>\n\t<div *ngIf=\"getErrorToShow()\" class=\"errorContainer\">\n\t\t<div *ngIf=\"showDefaultError('min')\">{{substituteParameters(getErrorMessage(\"min\"), {min: attachedControl.errors.min.min})}}</div>\n\t\t<div *ngIf=\"showDefaultError('max')\">{{substituteParameters(getErrorMessage(\"max\"), {max: attachedControl.errors.max.max})}}</div>\n\t\t<div *ngIf=\"showDefaultError('required')\">{{getErrorMessage(\"required\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('email')\">{{getErrorMessage(\"email\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('minlength')\">{{substituteParameters(getErrorMessage(\"minLength\"), {minLength: attachedControl.errors.minlength.requiredLength})}}</div>\n\t\t<div *ngIf=\"showDefaultError('maxlength')\">{{substituteParameters(getErrorMessage(\"maxLength\"), {maxLength: attachedControl.errors.maxlength.requiredLength})}}</div>\n\t\t<div *ngIf=\"showDefaultError('pattern')\">{{getErrorMessage(\"pattern\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('MatchPassword')\">{{getErrorMessage(\"matchPassword\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('date')\">{{getErrorMessage(\"date\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('message')\">{{attachedControl.errors.message.value}}</div>\n\t\t<div [ngTemplateOutlet]=\"getCustomErrorHandler(getErrorToShow())?.templateRef\"></div>\n\t</div>\n</ng-template>\n<ng-container *ngIf=\"direction === 'horizontal'\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\n<div class=\"componentContainer\" [ngClass]=\"{vertical: direction === 'vertical', reverseOrder: swapInputAndCaption}\" #internalComponentRef>\n\t<div class=\"caption\" *ngIf=\"caption || captionRef\" [ngClass]=\"{ hasErrors: getErrorToShow() && attachedControl.touched, percentageSpacing: captionSpacing === 'percentages', 'd30-70': spaceDistribution === '30-70' }\">\n\t\t<div *ngIf=\"captionRef\" class=\"captionRefContainer\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"captionRef\"></ng-container>\n\t\t\t<div *ngIf=\"isRequired()\">&nbsp;*</div>\n\t\t</div>\n\t\t<div *ngIf=\"!captionRef\">{{caption}}<span *ngIf=\"isRequired()\">&nbsp;*</span></div>\n\t</div>\n\t<ng-container *ngIf=\"direction === 'vertical'\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t<div class=\"inputContainer\" [ngClass]=\"{ percentageSpacing: captionSpacing === 'percentages', 'd30-70': spaceDistribution === '30-70' }\">\n\t\t<ng-content></ng-content>\n\t</div>\n</div>\n",
                     styles: [":host{display:block}.componentContainer{align-items:center;display:flex}.componentContainer.reverseOrder{flex-direction:row-reverse;justify-content:flex-end}.componentContainer.vertical{display:block;margin-bottom:1rem}.componentContainer.vertical .inputContainer{margin-top:.3125rem}.componentContainer.vertical .errorContainer{margin-left:0}.captionRefContainer{display:flex}.caption{color:#515365;flex:0 0 auto;font-weight:700}.caption.percentageSpacing{flex:0 0 40%}.caption.percentageSpacing.d30-70{flex-basis:30%}.caption.hasErrors{color:#ff8000}.inputContainer{flex:1}.inputContainer.percentageSpacing{flex:0 0 60%}.inputContainer.percentageSpacing.d30-70{flex-basis:70%}.errorContainer{color:#ff8000;margin-left:40%}.errorContainer.d30-70{margin-left:30%}"]
                 },] }
     ];
@@ -904,10 +904,9 @@
             this.onSearch.emit(value);
         };
         SelectComponent.prototype.getDefaultTranslation = function (key) {
-            var _this = this;
             switch (key) {
                 case 'placeholder':
-                    return function () { var _a; return (_a = _this.placeholder) !== null && _a !== void 0 ? _a : 'Pick an option'; };
+                    return function () { return 'Pick an option'; };
                 case 'amountSelected':
                     return function (amount) { return amount + " selected"; };
             }
@@ -915,6 +914,9 @@
         SelectComponent.prototype.getTranslation = function (key, params) {
             if (params === void 0) { params = null; }
             var _a, _b, _c;
+            if (key === 'placeholder' && stringIsSetAndFilled(this.placeholder)) {
+                return this.placeholder;
+            }
             return (_c = (_b = (_a = this.translations) === null || _a === void 0 ? void 0 : _a[key]) === null || _b === void 0 ? void 0 : _b.call(_a, params)) !== null && _c !== void 0 ? _c : this.getDefaultTranslation(key)(params);
         };
         return SelectComponent;
@@ -1314,10 +1316,9 @@
             }
         };
         DatePickerComponent.prototype.getDefaultTranslation = function (key) {
-            var _this = this;
             switch (key) {
                 case 'placeholder':
-                    return function () { var _a; return (_a = _this.placeholder) !== null && _a !== void 0 ? _a : 'Select date'; };
+                    return function () { return 'Select date'; };
             }
         };
         DatePickerComponent.prototype.getTranslation = function (key, params) {
@@ -1326,6 +1327,9 @@
             if (key === 'placeholder' && this.multiple) {
                 return '';
             }
+            if (key === 'placeholder' && stringIsSetAndFilled(this.placeholder)) {
+                return this.placeholder;
+            }
             return (_c = (_b = (_a = this.translations) === null || _a === void 0 ? void 0 : _a[key]) === null || _b === void 0 ? void 0 : _b.call(_a, params)) !== null && _c !== void 0 ? _c : this.getDefaultTranslation(key)(params);
         };
         return DatePickerComponent;
@@ -1354,17 +1358,20 @@
 
     var KLP_DATE_FORMATS = new core.InjectionToken('klp.form.date.formats');
     var DATE_TIME_PICKER_TRANSLATIONS = new core.InjectionToken('klp.form.dateTime.translations');
+    var DATE_PICKER_LOCALE = new core.InjectionToken('klp.form.dateTime.locale');
     function matDateFormatsFactory(component, dateFormats) {
         var _a;
         return (_a = dateFormats === null || dateFormats === void 0 ? void 0 : dateFormats(component.format)) !== null && _a !== void 0 ? _a : core$1.MAT_NATIVE_DATE_FORMATS;
     }
     var DateTimePickerComponent = /** @class */ (function (_super) {
         __extends(DateTimePickerComponent, _super);
-        function DateTimePickerComponent(parent, controlContainer, translations, cdr) {
+        function DateTimePickerComponent(parent, controlContainer, translations, datePickerLocale, dateAdapter, cdr) {
             var _this = _super.call(this, parent, controlContainer) || this;
             _this.parent = parent;
             _this.controlContainer = controlContainer;
             _this.translations = translations;
+            _this.datePickerLocale = datePickerLocale;
+            _this.dateAdapter = dateAdapter;
             _this.cdr = cdr;
             _this.minDate = undefined;
             _this.maxDate = undefined;
@@ -1391,6 +1398,9 @@
                 }
                 return true;
             };
+            if (isValueSet(datePickerLocale)) {
+                dateAdapter.setLocale(datePickerLocale());
+            }
             return _this;
         }
         DateTimePickerComponent.prototype.ngOnInit = function () {
@@ -1603,10 +1613,9 @@
             }
         };
         DateTimePickerComponent.prototype.getDefaultTranslation = function (key) {
-            var _this = this;
             switch (key) {
                 case 'placeholder':
-                    return function () { var _a; return (_a = _this.placeholder) !== null && _a !== void 0 ? _a : 'Select date'; };
+                    return function () { return 'Select date'; };
                 case 'selectDays':
                     return function () { return 'Select day(s)'; };
                 case 'selectedDate':
@@ -1623,6 +1632,9 @@
             if (key === 'placeholder' && this.multiple) {
                 return '';
             }
+            if (key === 'placeholder' && stringIsSetAndFilled(this.placeholder)) {
+                return this.placeholder;
+            }
             return (_c = (_b = (_a = this.translations) === null || _a === void 0 ? void 0 : _a[key]) === null || _b === void 0 ? void 0 : _b.call(_a, params)) !== null && _c !== void 0 ? _c : this.getDefaultTranslation(key)(params);
         };
         return DateTimePickerComponent;
@@ -1637,7 +1649,7 @@
                             provide: core$1.MAT_DATE_FORMATS,
                             deps: [DateTimePickerComponent, [new core.Optional(), KLP_DATE_FORMATS]],
                             useFactory: matDateFormatsFactory,
-                        }
+                        },
                     ],
                     styles: [":host{display:block}:host ::ng-deep mat-form-field{display:block;height:100%}:host ::ng-deep mat-form-field.mat-focused .mat-form-field-label,:host ::ng-deep mat-form-field .mat-form-field-label{color:#adadad}:host ::ng-deep .mat-datepicker-toggle-active{color:#666}:host ::ng-deep .mat-form-field-wrapper{padding-bottom:0}:host ::ng-deep .mat-form-field-flex{flex-direction:row-reverse}:host ::ng-deep .mat-form-field-infix{border-top:none;width:auto}:host ::ng-deep .mat-form-field-suffix{margin-right:.625rem}:host ::ng-deep .mat-form-field-suffix:hover .mat-button-focus-overlay{opacity:.1}:host ::ng-deep .mat-form-field-underline{display:none}:host ::ng-deep .daysSelectedCaption{cursor:pointer}:host ::ng-deep .daysSelectedCaption.disabled{cursor:zoom-in}:host ::ng-deep .inputForMultipleDays{display:none}.componentContainer{border-radius:2px;color:#888da8;display:flex;position:relative}.componentContainer .placeholderForMultipleSelection{color:#adadad}.componentContainer.showErrors .clearButton.withoutSpacing,.componentContainer.showErrors .dateContainer,.componentContainer.showErrors .timeContainer{border-color:#ff8000}.componentContainer .clearButton{align-items:center;background:#fff;border:1px solid #e6ecf5;color:#7b7b7b;display:flex;flex:0 0 auto;font-size:18px;margin-left:1.25rem;padding:6px 14px}.componentContainer .clearButton.withoutSpacing{border-left:none;margin-left:0}.componentContainer .clearButton:disabled{background:#f9f9f9;border:1px solid #e6ecf5}.componentContainer .dateContainer{background:#fff;border:1px solid #e6ecf5;flex:1 1 auto;padding:6px}.componentContainer .dateContainer.noRightBorder{border-right:none}.componentContainer .dateContainer.disabled{background:#f9f9f9}.componentContainer .timeContainer{align-items:center;background:#fff;border:1px solid #e6ecf5;display:flex;flex:0 0 auto;margin-left:1.25rem;padding:6px .625rem}.componentContainer .timeContainer.disabled{background:#f9f9f9}.componentContainer .timeContainer input{border:none;color:#888da8;padding:0;text-align:center;width:20px}.componentContainer .timeContainer input::-moz-placeholder{color:#adadad}.componentContainer .timeContainer input:-ms-input-placeholder{color:#adadad}.componentContainer .timeContainer input::placeholder{color:#adadad}.componentContainer .timeContainer .divider{margin:0 .3125rem}"]
                 },] }
@@ -1646,6 +1658,8 @@
         { type: FormElementComponent, decorators: [{ type: core.Host }, { type: core.Optional }] },
         { type: forms.ControlContainer, decorators: [{ type: core.Host }, { type: core.Optional }] },
         { type: undefined, decorators: [{ type: core.Inject, args: [DATE_TIME_PICKER_TRANSLATIONS,] }, { type: core.Optional }] },
+        { type: undefined, decorators: [{ type: core.Inject, args: [DATE_PICKER_LOCALE,] }, { type: core.Optional }] },
+        { type: core$1.DateAdapter },
         { type: core.ChangeDetectorRef }
     ]; };
     DateTimePickerComponent.propDecorators = {
@@ -1748,6 +1762,7 @@
 
     exports.ButtonComponent = ButtonComponent;
     exports.CheckboxComponent = CheckboxComponent;
+    exports.DATE_PICKER_LOCALE = DATE_PICKER_LOCALE;
     exports.DATE_PICKER_TRANSLATIONS = DATE_PICKER_TRANSLATIONS;
     exports.DATE_TIME_PICKER_TRANSLATIONS = DATE_TIME_PICKER_TRANSLATIONS;
     exports.DEFAULT_ERROR_MESSAGES = DEFAULT_ERROR_MESSAGES;