@klippa/ngx-enhancy-forms 20.0.13 → 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
|
}] } });
|