@klippa/ngx-enhancy-forms 14.22.1 → 14.22.3
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/text-input/text-input.component.mjs +15 -3
- package/esm2020/lib/withTooltip.component.mjs +6 -4
- package/fesm2015/klippa-ngx-enhancy-forms.mjs +19 -5
- package/fesm2015/klippa-ngx-enhancy-forms.mjs.map +1 -1
- package/fesm2020/klippa-ngx-enhancy-forms.mjs +19 -5
- package/fesm2020/klippa-ngx-enhancy-forms.mjs.map +1 -1
- package/lib/elements/text-input/text-input.component.d.ts +6 -2
- package/lib/withTooltip.component.d.ts +3 -2
- package/package.json +1 -1
|
@@ -1500,18 +1500,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
|
|
|
1500
1500
|
class TextInputComponent extends ValueAccessorBase {
|
|
1501
1501
|
constructor() {
|
|
1502
1502
|
super(...arguments);
|
|
1503
|
+
this.isPeakingPassword = false;
|
|
1503
1504
|
this.type = 'text';
|
|
1504
1505
|
this.clearable = false;
|
|
1505
1506
|
this.hasBorderLeft = true;
|
|
1506
1507
|
this.hasBorderRight = true;
|
|
1507
1508
|
this.onBlur = new EventEmitter();
|
|
1508
1509
|
}
|
|
1510
|
+
togglePeakPassword() {
|
|
1511
|
+
this.isPeakingPassword = !this.isPeakingPassword;
|
|
1512
|
+
}
|
|
1513
|
+
getType() {
|
|
1514
|
+
if (this.type === 'text') {
|
|
1515
|
+
return 'text';
|
|
1516
|
+
}
|
|
1517
|
+
return this.isPeakingPassword ? 'text' : 'password';
|
|
1518
|
+
}
|
|
1509
1519
|
}
|
|
1510
1520
|
TextInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: TextInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1511
|
-
TextInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: TextInputComponent, selector: "klp-form-text-input", inputs: { placeholder: "placeholder", type: "type", clearable: "clearable", icon: "icon", hasBorderLeft: "hasBorderLeft", hasBorderRight: "hasBorderRight" }, outputs: { onBlur: "onBlur" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: TextInputComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\">\n\t<ng-container *ngIf=\"icon?.length > 0\">\n\t\t<i class=\"ti-search\" *ngIf=\"icon === 'search'\"></i>\n\t</ng-container>\n\t<input\n\t\t[type]=\"
|
|
1521
|
+
TextInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: TextInputComponent, selector: "klp-form-text-input", inputs: { placeholder: "placeholder", type: "type", clearable: "clearable", icon: "icon", hasBorderLeft: "hasBorderLeft", hasBorderRight: "hasBorderRight", passwordPeakIcon: "passwordPeakIcon" }, outputs: { onBlur: "onBlur" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: TextInputComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\">\n\t<ng-container *ngIf=\"icon?.length > 0\">\n\t\t<i class=\"ti-search\" *ngIf=\"icon === 'search'\"></i>\n\t</ng-container>\n\t<input\n\t\t[type]=\"getType()\"\n\t\t[(ngModel)]=\"innerValue\"\n\t\t[ngClass]=\"{showErrors: isInErrorState(), hasIcon: icon?.length > 0, hasClearButton: clearable, noBorderLeft: !hasBorderLeft, noBorderRight: !hasBorderRight}\"\n\t\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t\t[placeholder]=\"placeholder ? placeholder : ''\"\n\t\t(blur)=\"touch(); onBlur.emit()\"\n\t\t[disabled]='disabled'\n\t\t#nativeInputRef\n\t/>\n\t<div class=\"tail\">\n\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t\t<div class=\"clearIcon\" *ngIf=\"clearable && innerValue?.length > 0\" (click)=\"resetToNull()\">\u00D7</div>\n\t\t<button class=\"peakBtn\" (click)=\"togglePeakPassword()\" *ngIf=\"passwordPeakIcon && type === 'password'\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"passwordPeakIcon\"></ng-container>\n\t\t</button>\n\t</div>\n</div>\n", styles: [":host{display:block}:host input:disabled{cursor:not-allowed}.componentContainer{position:relative}i{position:absolute;left:.625rem;top:14px}input{outline:none;display:block;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#888da8;transition:all .2s ease-in;-webkit-transition:all .2s ease-in;-moz-transition:all .2s ease-in;-o-transition:all .2s ease-in;-ms-transition:all .2s ease-in}input::-webkit-input-placeholder{color:#adadad}input:-moz-placeholder{color:#adadad}input::-moz-placeholder{color:#adadad}input:-ms-input-placeholder{color:#adadad}input:focus{outline:0 none;box-shadow:none;border-color:#3ed778}input.input-sm{height:30px}input.input-lg{height:50px}input.error{border-color:#dc3545;background-color:#f6cdd1}input.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}input.hasIcon{padding-left:1.875rem}input.hasClearButton{padding-right:1.875rem}input.noBorderLeft{border-left:none}input.noBorderRight{border-right:none}.tail{position:absolute;right:.625rem;display:flex;align-items:center;top:0;bottom:0;gap:.625rem}.tail .clearIcon{transform:translateY(-2px);font-size:18px;cursor:pointer}.peakBtn{border:none;background:transparent;height:100%;padding:0}.showErrors{border-color:#ff8000}\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: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
1512
1522
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: TextInputComponent, decorators: [{
|
|
1513
1523
|
type: Component,
|
|
1514
|
-
args: [{ selector: 'klp-form-text-input', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: TextInputComponent, multi: true }], template: "<div class=\"componentContainer\">\n\t<ng-container *ngIf=\"icon?.length > 0\">\n\t\t<i class=\"ti-search\" *ngIf=\"icon === 'search'\"></i>\n\t</ng-container>\n\t<input\n\t\t[type]=\"
|
|
1524
|
+
args: [{ selector: 'klp-form-text-input', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: TextInputComponent, multi: true }], template: "<div class=\"componentContainer\">\n\t<ng-container *ngIf=\"icon?.length > 0\">\n\t\t<i class=\"ti-search\" *ngIf=\"icon === 'search'\"></i>\n\t</ng-container>\n\t<input\n\t\t[type]=\"getType()\"\n\t\t[(ngModel)]=\"innerValue\"\n\t\t[ngClass]=\"{showErrors: isInErrorState(), hasIcon: icon?.length > 0, hasClearButton: clearable, noBorderLeft: !hasBorderLeft, noBorderRight: !hasBorderRight}\"\n\t\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t\t[placeholder]=\"placeholder ? placeholder : ''\"\n\t\t(blur)=\"touch(); onBlur.emit()\"\n\t\t[disabled]='disabled'\n\t\t#nativeInputRef\n\t/>\n\t<div class=\"tail\">\n\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t\t<div class=\"clearIcon\" *ngIf=\"clearable && innerValue?.length > 0\" (click)=\"resetToNull()\">\u00D7</div>\n\t\t<button class=\"peakBtn\" (click)=\"togglePeakPassword()\" *ngIf=\"passwordPeakIcon && type === 'password'\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"passwordPeakIcon\"></ng-container>\n\t\t</button>\n\t</div>\n</div>\n", styles: [":host{display:block}:host input:disabled{cursor:not-allowed}.componentContainer{position:relative}i{position:absolute;left:.625rem;top:14px}input{outline:none;display:block;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#888da8;transition:all .2s ease-in;-webkit-transition:all .2s ease-in;-moz-transition:all .2s ease-in;-o-transition:all .2s ease-in;-ms-transition:all .2s ease-in}input::-webkit-input-placeholder{color:#adadad}input:-moz-placeholder{color:#adadad}input::-moz-placeholder{color:#adadad}input:-ms-input-placeholder{color:#adadad}input:focus{outline:0 none;box-shadow:none;border-color:#3ed778}input.input-sm{height:30px}input.input-lg{height:50px}input.error{border-color:#dc3545;background-color:#f6cdd1}input.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}input.hasIcon{padding-left:1.875rem}input.hasClearButton{padding-right:1.875rem}input.noBorderLeft{border-left:none}input.noBorderRight{border-right:none}.tail{position:absolute;right:.625rem;display:flex;align-items:center;top:0;bottom:0;gap:.625rem}.tail .clearIcon{transform:translateY(-2px);font-size:18px;cursor:pointer}.peakBtn{border:none;background:transparent;height:100%;padding:0}.showErrors{border-color:#ff8000}\n"] }]
|
|
1515
1525
|
}], propDecorators: { placeholder: [{
|
|
1516
1526
|
type: Input
|
|
1517
1527
|
}], type: [{
|
|
@@ -1524,6 +1534,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
|
|
|
1524
1534
|
type: Input
|
|
1525
1535
|
}], hasBorderRight: [{
|
|
1526
1536
|
type: Input
|
|
1537
|
+
}], passwordPeakIcon: [{
|
|
1538
|
+
type: Input
|
|
1527
1539
|
}], onBlur: [{
|
|
1528
1540
|
type: Output
|
|
1529
1541
|
}] } });
|
|
@@ -2425,8 +2437,9 @@ const colors = {
|
|
|
2425
2437
|
black: { noAlpha: 'rgb(40, 40, 40)', withAlpha: 'rgba(40, 40, 40, 0.1254901961)' },
|
|
2426
2438
|
};
|
|
2427
2439
|
class WithTooltipDirective {
|
|
2428
|
-
constructor(el) {
|
|
2440
|
+
constructor(el, appRef) {
|
|
2429
2441
|
this.el = el;
|
|
2442
|
+
this.appRef = appRef;
|
|
2430
2443
|
this.klpWithTooltip = 'orange';
|
|
2431
2444
|
el.nativeElement.addEventListener('mouseenter', () => {
|
|
2432
2445
|
let textToDisplay;
|
|
@@ -2537,18 +2550,19 @@ class WithTooltipDirective {
|
|
|
2537
2550
|
ngOnChanges(simpleChanges) {
|
|
2538
2551
|
if (simpleChanges.tooltipTemplate?.currentValue) {
|
|
2539
2552
|
const viewRef = this.tooltipTemplate.createEmbeddedView(null);
|
|
2553
|
+
this.appRef.attachView(viewRef);
|
|
2540
2554
|
this.templateInstance = viewRef.rootNodes[0];
|
|
2541
2555
|
}
|
|
2542
2556
|
}
|
|
2543
2557
|
}
|
|
2544
|
-
WithTooltipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WithTooltipDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
2558
|
+
WithTooltipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WithTooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
2545
2559
|
WithTooltipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.8", type: WithTooltipDirective, selector: "[klpWithTooltip]", inputs: { klpWithTooltip: "klpWithTooltip", tooltipText: "tooltipText", tooltipTemplate: "tooltipTemplate" }, usesOnChanges: true, ngImport: i0 });
|
|
2546
2560
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WithTooltipDirective, decorators: [{
|
|
2547
2561
|
type: Directive,
|
|
2548
2562
|
args: [{
|
|
2549
2563
|
selector: '[klpWithTooltip]'
|
|
2550
2564
|
}]
|
|
2551
|
-
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { klpWithTooltip: [{
|
|
2565
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ApplicationRef }]; }, propDecorators: { klpWithTooltip: [{
|
|
2552
2566
|
type: Input
|
|
2553
2567
|
}], tooltipText: [{
|
|
2554
2568
|
type: Input
|