@klippa/ngx-enhancy-forms 20.0.12 → 20.0.14
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.
|
@@ -1229,13 +1229,15 @@ class CheckboxComponent extends ValueAccessorBase {
|
|
|
1229
1229
|
this.renderUndefinedAsIndeterminate = false;
|
|
1230
1230
|
}
|
|
1231
1231
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: CheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1232
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: CheckboxComponent, isStandalone: false, selector: "klp-form-checkbox", inputs: { caption: "caption", renderUndefinedAsIndeterminate: "renderUndefinedAsIndeterminate" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: CheckboxComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\">\n
|
|
1232
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: CheckboxComponent, isStandalone: false, selector: "klp-form-checkbox", inputs: { caption: "caption", description: "description", renderUndefinedAsIndeterminate: "renderUndefinedAsIndeterminate" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: CheckboxComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\">\n\t<label>\n\t\t<div class=\"checkboxContainer\">\n\t\t\t<div class=\"checkBoxVisualContainer\">\n\t\t\t\t<input type=\"checkbox\" class=\"checkboxNative\"\n\t\t\t\t\t\t\t [(ngModel)]=\"innerValue\"\n\t\t\t\t\t\t\t (change)=\"setInnerValueAndNotify(innerValue); touch()\"\n\t\t\t\t\t\t\t [disabled]=\"disabled\"\n\t\t\t\t\t\t\t #nativeInputRef\n\t\t\t\t/>\n\t\t\t\t<div class=\"checkboxVisual\"\n\t\t\t\t\t\t [ngClass]=\"{filledWithColor: innerValue === true || (renderUndefinedAsIndeterminate && innerValue === undefined)}\">\n\t\t\t\t\t@if (innerValue === true) {\n\t\t\t\t\t\t<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"9\" viewBox=\"0 0 12 9\" fill=\"none\">\n\t\t\t\t\t\t\t<path d=\"M10.3333 1L3.91667 7.41667L1 4.5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n\t\t\t\t\t\t\t\t\t\tstroke-linejoin=\"round\"/>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t}\n\t\t\t\t\t@if (renderUndefinedAsIndeterminate && innerValue === undefined) {\n\t\t\t\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"2\" viewBox=\"0 0 11 2\" fill=\"none\">\n\t\t\t\t\t\t\t<path d=\"M1 1H9.16667\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n\t\t\t\t\t\t\t\t\t\tstroke-linejoin=\"round\"/>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t@if (caption) {\n\t\t\t<div class=\"caption\">{{ caption }}</div>\n\t\t}\n\t</label>\n\t@if (description) {\n\t\t<div class=\"description\">{{ description }}</div>\n\t}\n</div>\n", styles: [":host{display:block}.componentContainer{display:grid;grid-template-columns:auto 1fr;align-items:start;margin-bottom:0}label{display:contents;align-items:center;justify-content:center;margin-bottom:0}.checkboxContainer{position:relative;grid-column:1;align-self:center}.checkBoxVisualContainer{padding:2px;margin-right:10px;border-radius:4px}.checkBoxVisualContainer:focus-within{outline:2px solid #00AC42}.caption{cursor:pointer;font-weight:400;color:#101828;grid-column:2}.description{font-weight:400;color:#667085;grid-column:2}.checkboxNative{position:absolute;opacity:0;top:0;left:0;width:20px;height:20px;cursor:pointer}.checkboxVisual{pointer-events:none;padding:.125rem;color:#fff;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border:1px solid #D0D5DD;border-radius:4px;font-size:15px;font-weight:400;line-height:19px;vertical-align:bottom;text-align:center;background-color:#fff;cursor:pointer}.checkboxVisual.filledWithColor{background-color:#00ac42;border-color:#00ac42}.checkboxNative:hover+.checkboxVisual{border-color:#98a2b3}.checkboxNative:hover+.checkboxVisual.filledWithColor{border-color:#00ac42}.checkboxNative:hover[disabled]+.checkboxVisual{border-color:#eaecf0}.checkboxNative:hover[disabled]+.checkboxVisual.filledWithColor{border-color:#f2f4f7}.checkboxNative[disabled]{cursor:not-allowed}.checkboxNative[disabled]+.checkboxVisual{background-color:#f2f4f7;border-color:#eaecf0}.checkboxNative[disabled]+.checkboxVisual svg{color:#101828}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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"] }] }); }
|
|
1233
1233
|
}
|
|
1234
1234
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
1235
1235
|
type: Component,
|
|
1236
|
-
args: [{ selector: 'klp-form-checkbox', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: CheckboxComponent, multi: true }], standalone: false, template: "<div class=\"componentContainer\">\n
|
|
1236
|
+
args: [{ selector: 'klp-form-checkbox', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: CheckboxComponent, multi: true }], standalone: false, template: "<div class=\"componentContainer\">\n\t<label>\n\t\t<div class=\"checkboxContainer\">\n\t\t\t<div class=\"checkBoxVisualContainer\">\n\t\t\t\t<input type=\"checkbox\" class=\"checkboxNative\"\n\t\t\t\t\t\t\t [(ngModel)]=\"innerValue\"\n\t\t\t\t\t\t\t (change)=\"setInnerValueAndNotify(innerValue); touch()\"\n\t\t\t\t\t\t\t [disabled]=\"disabled\"\n\t\t\t\t\t\t\t #nativeInputRef\n\t\t\t\t/>\n\t\t\t\t<div class=\"checkboxVisual\"\n\t\t\t\t\t\t [ngClass]=\"{filledWithColor: innerValue === true || (renderUndefinedAsIndeterminate && innerValue === undefined)}\">\n\t\t\t\t\t@if (innerValue === true) {\n\t\t\t\t\t\t<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"9\" viewBox=\"0 0 12 9\" fill=\"none\">\n\t\t\t\t\t\t\t<path d=\"M10.3333 1L3.91667 7.41667L1 4.5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n\t\t\t\t\t\t\t\t\t\tstroke-linejoin=\"round\"/>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t}\n\t\t\t\t\t@if (renderUndefinedAsIndeterminate && innerValue === undefined) {\n\t\t\t\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"2\" viewBox=\"0 0 11 2\" fill=\"none\">\n\t\t\t\t\t\t\t<path d=\"M1 1H9.16667\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n\t\t\t\t\t\t\t\t\t\tstroke-linejoin=\"round\"/>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t@if (caption) {\n\t\t\t<div class=\"caption\">{{ caption }}</div>\n\t\t}\n\t</label>\n\t@if (description) {\n\t\t<div class=\"description\">{{ description }}</div>\n\t}\n</div>\n", styles: [":host{display:block}.componentContainer{display:grid;grid-template-columns:auto 1fr;align-items:start;margin-bottom:0}label{display:contents;align-items:center;justify-content:center;margin-bottom:0}.checkboxContainer{position:relative;grid-column:1;align-self:center}.checkBoxVisualContainer{padding:2px;margin-right:10px;border-radius:4px}.checkBoxVisualContainer:focus-within{outline:2px solid #00AC42}.caption{cursor:pointer;font-weight:400;color:#101828;grid-column:2}.description{font-weight:400;color:#667085;grid-column:2}.checkboxNative{position:absolute;opacity:0;top:0;left:0;width:20px;height:20px;cursor:pointer}.checkboxVisual{pointer-events:none;padding:.125rem;color:#fff;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border:1px solid #D0D5DD;border-radius:4px;font-size:15px;font-weight:400;line-height:19px;vertical-align:bottom;text-align:center;background-color:#fff;cursor:pointer}.checkboxVisual.filledWithColor{background-color:#00ac42;border-color:#00ac42}.checkboxNative:hover+.checkboxVisual{border-color:#98a2b3}.checkboxNative:hover+.checkboxVisual.filledWithColor{border-color:#00ac42}.checkboxNative:hover[disabled]+.checkboxVisual{border-color:#eaecf0}.checkboxNative:hover[disabled]+.checkboxVisual.filledWithColor{border-color:#f2f4f7}.checkboxNative[disabled]{cursor:not-allowed}.checkboxNative[disabled]+.checkboxVisual{background-color:#f2f4f7;border-color:#eaecf0}.checkboxNative[disabled]+.checkboxVisual svg{color:#101828}\n"] }]
|
|
1237
1237
|
}], propDecorators: { caption: [{
|
|
1238
1238
|
type: Input
|
|
1239
|
+
}], description: [{
|
|
1240
|
+
type: Input
|
|
1239
1241
|
}], renderUndefinedAsIndeterminate: [{
|
|
1240
1242
|
type: Input
|
|
1241
1243
|
}] } });
|
|
@@ -3019,7 +3021,6 @@ class WithTooltipDirective {
|
|
|
3019
3021
|
this.triangleWhite.style.top = `${top + el.nativeElement.getBoundingClientRect().height}px`;
|
|
3020
3022
|
this.triangleWhite.style.left = `${left}px`;
|
|
3021
3023
|
this.triangleWhite.style.transform = `translate(calc(-100% + ${el.nativeElement.getBoundingClientRect().width}px), calc(0% - 0.15rem + 2px)) rotate(180deg)`;
|
|
3022
|
-
// this.triangleWhite.style.transform = `translate(${el.nativeElement.getBoundingClientRect().width}px) translateY(${el.nativeElement.getBoundingClientRect().height}px) translate(-100%, -2px) rotate(180deg)`;
|
|
3023
3024
|
}
|
|
3024
3025
|
this.triangleWhite.style.width = '0';
|
|
3025
3026
|
this.triangleWhite.style.height = '0';
|
|
@@ -3039,34 +3040,32 @@ class WithTooltipDirective {
|
|
|
3039
3040
|
this.hookDiv.prepend(this.triangleWhite);
|
|
3040
3041
|
});
|
|
3041
3042
|
el.nativeElement.addEventListener('mouseleave', () => {
|
|
3042
|
-
|
|
3043
|
-
this.cleanUpTemplate();
|
|
3044
|
-
}
|
|
3045
|
-
try {
|
|
3046
|
-
el.nativeElement.removeChild(this.div);
|
|
3047
|
-
}
|
|
3048
|
-
catch (ex) { }
|
|
3049
|
-
try {
|
|
3050
|
-
el.nativeElement.removeChild(this.triangle);
|
|
3051
|
-
}
|
|
3052
|
-
catch (ex) { }
|
|
3053
|
-
try {
|
|
3054
|
-
el.nativeElement.removeChild(this.triangleWhite);
|
|
3055
|
-
}
|
|
3056
|
-
catch (ex) { }
|
|
3057
|
-
try {
|
|
3058
|
-
document.body.removeChild(this.hookDiv);
|
|
3059
|
-
}
|
|
3060
|
-
catch (ex) { }
|
|
3043
|
+
this.cleanUpTooltipFromDom();
|
|
3061
3044
|
});
|
|
3062
3045
|
});
|
|
3063
3046
|
}
|
|
3047
|
+
cleanUpTooltipFromDom() {
|
|
3048
|
+
if (this.tooltipTemplate) {
|
|
3049
|
+
this.cleanUpTemplate();
|
|
3050
|
+
}
|
|
3051
|
+
try {
|
|
3052
|
+
document.body.removeChild(this.hookDiv);
|
|
3053
|
+
}
|
|
3054
|
+
catch (ex) {
|
|
3055
|
+
}
|
|
3056
|
+
}
|
|
3057
|
+
ngOnDestroy() {
|
|
3058
|
+
this.cleanUpTooltipFromDom();
|
|
3059
|
+
}
|
|
3064
3060
|
hookUpTemplate() {
|
|
3065
3061
|
this.viewRefForTemplate = this.tooltipTemplate.createEmbeddedView(null);
|
|
3066
3062
|
this.appRef.attachView(this.viewRefForTemplate);
|
|
3067
3063
|
this.templateInstance = this.viewRefForTemplate.rootNodes[0];
|
|
3068
3064
|
}
|
|
3069
3065
|
cleanUpTemplate() {
|
|
3066
|
+
if (!isValueSet(this.viewRefForTemplate)) {
|
|
3067
|
+
return;
|
|
3068
|
+
}
|
|
3070
3069
|
this.appRef.detachView(this.viewRefForTemplate);
|
|
3071
3070
|
this.viewRefForTemplate.destroy();
|
|
3072
3071
|
}
|