@apexara/ng-components 1.0.6-test.1 → 1.0.6-test.2

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.
Files changed (28) hide show
  1. package/fesm2022/apexara-ng-components-checkbox.mjs +19 -15
  2. package/fesm2022/apexara-ng-components-checkbox.mjs.map +1 -1
  3. package/fesm2022/apexara-ng-components-datepicker.mjs +65 -70
  4. package/fesm2022/apexara-ng-components-datepicker.mjs.map +1 -1
  5. package/fesm2022/apexara-ng-components-drawer.mjs +9 -11
  6. package/fesm2022/apexara-ng-components-drawer.mjs.map +1 -1
  7. package/fesm2022/apexara-ng-components-image.mjs +3 -5
  8. package/fesm2022/apexara-ng-components-image.mjs.map +1 -1
  9. package/fesm2022/apexara-ng-components-input.mjs +19 -19
  10. package/fesm2022/apexara-ng-components-input.mjs.map +1 -1
  11. package/fesm2022/apexara-ng-components-listbox.mjs +41 -33
  12. package/fesm2022/apexara-ng-components-listbox.mjs.map +1 -1
  13. package/fesm2022/apexara-ng-components-select.mjs +96 -79
  14. package/fesm2022/apexara-ng-components-select.mjs.map +1 -1
  15. package/fesm2022/apexara-ng-components-table.mjs +120 -99
  16. package/fesm2022/apexara-ng-components-table.mjs.map +1 -1
  17. package/fesm2022/apexara-ng-components-textarea.mjs +20 -17
  18. package/fesm2022/apexara-ng-components-textarea.mjs.map +1 -1
  19. package/package.json +1 -1
  20. package/types/apexara-ng-components-checkbox.d.ts +6 -8
  21. package/types/apexara-ng-components-datepicker.d.ts +4 -6
  22. package/types/apexara-ng-components-drawer.d.ts +3 -4
  23. package/types/apexara-ng-components-image.d.ts +2 -3
  24. package/types/apexara-ng-components-input.d.ts +6 -8
  25. package/types/apexara-ng-components-listbox.d.ts +7 -8
  26. package/types/apexara-ng-components-select.d.ts +12 -10
  27. package/types/apexara-ng-components-table.d.ts +19 -18
  28. package/types/apexara-ng-components-textarea.d.ts +6 -8
package/fesm2022/apexara-ng-components-checkbox.mjs CHANGED
@@ -1,21 +1,21 @@
1
1
  import * as i0 from '@angular/core';
2
- import { EventEmitter, HostListener, Output, Input, Component } from '@angular/core';
2
+ import { EventEmitter, signal, HostListener, Output, Input, Component } from '@angular/core';
3
3
  import { NgClass, NgTemplateOutlet } from '@angular/common';
4
4
  import * as i1 from '@angular/forms';
5
- import { FormsModule, ReactiveFormsModule } from '@angular/forms';
5
+ import { TouchedChangeEvent, FormsModule, ReactiveFormsModule } from '@angular/forms';
6
+ import { filter } from 'rxjs';
6
7
  import { TooltipPosition, ApexTooltipDirective } from '@apexara/ng-components/tooltip';
7
8
 
8
9
  class ApexCheckboxComponent {
9
- constructor(changeDetectorRef) {
10
- this.changeDetectorRef = changeDetectorRef;
10
+ constructor() {
11
11
  this.checked = false;
12
12
  this.disabled = false;
13
13
  this.tooltip = null;
14
14
  this.options = null;
15
15
  this.clickChange = new EventEmitter();
16
16
  this.tooltipPosition = TooltipPosition;
17
- this.controlInvalid = false;
18
- this.errorLabel = '';
17
+ this.controlInvalid = signal(false, ...(ngDevMode ? [{ debugName: "controlInvalid" }] : []));
18
+ this.errorLabel = signal('', ...(ngDevMode ? [{ debugName: "errorLabel" }] : []));
19
19
  this.control = null;
20
20
  }
21
21
  ngAfterViewInit() {
@@ -41,6 +41,11 @@ class ApexCheckboxComponent {
41
41
  this.controlSubscription = this.control.statusChanges.subscribe(() => {
42
42
  this.initChange();
43
43
  });
44
+ this.controlSubscription.add(this.control.events
45
+ .pipe(filter(event => event instanceof TouchedChangeEvent))
46
+ .subscribe(() => {
47
+ this.initChange();
48
+ }));
44
49
  }
45
50
  initChange() {
46
51
  if (!this.control) {
@@ -48,27 +53,26 @@ class ApexCheckboxComponent {
48
53
  }
49
54
  this.checkIfControlInvalid(this.control);
50
55
  this.getErrorLabel();
51
- this.changeDetectorRef.detectChanges();
52
56
  }
53
57
  checkIfControlInvalid(control) {
54
- this.controlInvalid = control.touched && control.invalid;
58
+ this.controlInvalid.set(control.touched && control.invalid);
55
59
  }
56
60
  getErrorLabel() {
57
- this.errorLabel = '';
61
+ this.errorLabel.set('');
58
62
  const options = this.options;
59
63
  const formGroup = options.formGroup;
60
64
  const formControlName = options.formControlName;
61
- if (formGroup && formControlName && options.errors && this.controlInvalid) {
65
+ if (formGroup && formControlName && options.errors && this.controlInvalid()) {
62
66
  for (const error in options.errors) {
63
67
  if (formGroup.controls[formControlName].hasError(error)) {
64
- this.errorLabel = options.errors[error];
68
+ this.errorLabel.set(options.errors[error]);
65
69
  return;
66
70
  }
67
71
  }
68
72
  }
69
73
  }
70
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexCheckboxComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
71
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ApexCheckboxComponent, isStandalone: true, selector: "apex-checkbox", inputs: { checked: "checked", disabled: "disabled", tooltip: "tooltip", options: "options" }, outputs: { clickChange: "clickChange" }, host: { listeners: { "focusout": "onFocusOut()" } }, ngImport: i0, template: "@if (options && options.formGroup && options.formControlName) {\n <label class=\"checkbox\" [ngClass]=\"{ checked: options.formGroup.controls[options.formControlName].value, disabled }\" [formGroup]=\"options.formGroup\">\n <input #input type=\"checkbox\" name=\"checkbox\" [formControlName]=\"options.formControlName\"/>\n\n <div class=\"checkbox-svg\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"8\" viewBox=\"0 0 11 8\" fill=\"none\">\n <path d=\"M1 4L4 7L10 1\" stroke=\"white\" stroke-width=\"2\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </label>\n\n @if (options && options.errors) {\n <div class=\"footer\" [ngClass]=\"{ 'error': controlInvalid }\">\n {{ errorLabel }}\n </div>\n }\n} @else {\n <label class=\"checkbox\" [ngClass]=\"{ checked, disabled }\">\n <input #input type=\"checkbox\" name=\"checkbox\" [(ngModel)]=\"checked\" [disabled]=\"disabled\" (change)=\"onChange()\"/>\n\n <div class=\"checkbox-svg\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"8\" viewBox=\"0 0 11 8\" fill=\"none\">\n <path d=\"M1 4L4 7L10 1\" stroke=\"white\" stroke-width=\"2\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n\n \n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </label>\n}\n\n<ng-template #content>\n <span>\n <ng-content></ng-content>\n </span>\n\n @if (tooltip) {\n <div class=\"tooltip-svg\">\n <svg [apexTooltip]=\"tooltip\" [tooltipPosition]=\"tooltipPosition.Above\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g stroke=\"#fff\">\n <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n </g>\n </svg>\n </div>\n }\n</ng-template>\n", styles: [":host{touch-action:manipulation}.checkbox{display:flex;align-items:center;position:relative;cursor:pointer}.checkbox.disabled{opacity:var(--apex-checkbox-disabled-opacity, .5);cursor:not-allowed;pointer-events:none}.checkbox span{color:var(--apex-checkbox-text-color, #0B1222);text-wrap:wrap;word-break:break-all;font-size:var(--apex-checkbox-font-size, 14px)}.checkbox span:not(:empty){margin:0 4px 0 8px}.checkbox input[type=checkbox]{width:20px;min-width:20px;height:20px;display:block}.checkbox input[type=checkbox]{appearance:none;-webkit-appearance:none;-moz-appearance:none;position:relative;cursor:pointer;outline:var(--apex-checkbox-outline-color, none);background-color:var(--apex-checkbox-background-color, #F7F8FB);border:1px solid var(--apex-checkbox-border-color, #E9E9E9);border-radius:4px;transition:box-shadow .3s,border .25s;box-shadow:inset 0 0 0 0 var(--apex-checkbox-border-color);margin:0}.checkbox.checked input[type=checkbox]{box-shadow:inset 0 0 0 10px var(--apex-checkbox-box-shadow-color, #F96138)}.checkbox-svg{width:20px;height:20px;position:absolute}.checkbox .checkbox-svg svg{position:absolute;top:50%;left:50%;transform:translateY(-50%) translate(-50%)}.checkbox .checkbox-svg svg path{fill:none;stroke:none;pointer-events:none;stroke:transparent;stroke-linecap:round;stroke-linejoin:round}.checkbox.checked .checkbox-svg svg path{stroke:var(--apex-checkbox-arrow-color, #FFFFFF)}.tooltip-svg{width:16px;height:16px}.tooltip-svg g{stroke:var(--apex-checkbox-tooltip-icon-stroke, #FFFFFF)}.footer{height:14px;font-size:12px;margin-top:2px}.footer.error{color:var(--apex-checkbox-error-color, #F96138)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ApexTooltipDirective, selector: "[apexTooltip]", inputs: ["apexTooltip", "tooltipPosition"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
74
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
75
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ApexCheckboxComponent, isStandalone: true, selector: "apex-checkbox", inputs: { checked: "checked", disabled: "disabled", tooltip: "tooltip", options: "options" }, outputs: { clickChange: "clickChange" }, host: { listeners: { "focusout": "onFocusOut()" } }, ngImport: i0, template: "@if (options && options.formGroup && options.formControlName) {\n <label class=\"checkbox\" [ngClass]=\"{ checked: options.formGroup.controls[options.formControlName].value, disabled }\" [formGroup]=\"options.formGroup\">\n <input #input type=\"checkbox\" name=\"checkbox\" [formControlName]=\"options.formControlName\"/>\n\n <div class=\"checkbox-svg\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"8\" viewBox=\"0 0 11 8\" fill=\"none\">\n <path d=\"M1 4L4 7L10 1\" stroke=\"white\" stroke-width=\"2\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </label>\n\n @if (options && options.errors) {\n <div class=\"footer\" [ngClass]=\"{ 'error': controlInvalid() }\">\n {{ errorLabel() }}\n </div>\n }\n} @else {\n <label class=\"checkbox\" [ngClass]=\"{ checked, disabled }\">\n <input #input type=\"checkbox\" name=\"checkbox\" [(ngModel)]=\"checked\" [disabled]=\"disabled\" (change)=\"onChange()\"/>\n\n <div class=\"checkbox-svg\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"8\" viewBox=\"0 0 11 8\" fill=\"none\">\n <path d=\"M1 4L4 7L10 1\" stroke=\"white\" stroke-width=\"2\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n\n \n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </label>\n}\n\n<ng-template #content>\n <span>\n <ng-content></ng-content>\n </span>\n\n @if (tooltip) {\n <div class=\"tooltip-svg\">\n <svg [apexTooltip]=\"tooltip\" [tooltipPosition]=\"tooltipPosition.Above\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g stroke=\"#fff\">\n <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n </g>\n </svg>\n </div>\n }\n</ng-template>\n", styles: [":host{touch-action:manipulation}.checkbox{display:flex;align-items:center;position:relative;cursor:pointer}.checkbox.disabled{opacity:var(--apex-checkbox-disabled-opacity, .5);cursor:not-allowed;pointer-events:none}.checkbox span{color:var(--apex-checkbox-text-color, #0B1222);text-wrap:wrap;word-break:break-all;font-size:var(--apex-checkbox-font-size, 14px)}.checkbox span:not(:empty){margin:0 4px 0 8px}.checkbox input[type=checkbox]{width:20px;min-width:20px;height:20px;display:block}.checkbox input[type=checkbox]{appearance:none;-webkit-appearance:none;-moz-appearance:none;position:relative;cursor:pointer;outline:var(--apex-checkbox-outline-color, none);background-color:var(--apex-checkbox-background-color, #F7F8FB);border:1px solid var(--apex-checkbox-border-color, #E9E9E9);border-radius:4px;transition:box-shadow .3s,border .25s;box-shadow:inset 0 0 0 0 var(--apex-checkbox-border-color);margin:0}.checkbox.checked input[type=checkbox]{box-shadow:inset 0 0 0 10px var(--apex-checkbox-box-shadow-color, #F96138)}.checkbox-svg{width:20px;height:20px;position:absolute}.checkbox .checkbox-svg svg{position:absolute;top:50%;left:50%;transform:translateY(-50%) translate(-50%)}.checkbox .checkbox-svg svg path{fill:none;stroke:none;pointer-events:none;stroke:transparent;stroke-linecap:round;stroke-linejoin:round}.checkbox.checked .checkbox-svg svg path{stroke:var(--apex-checkbox-arrow-color, #FFFFFF)}.tooltip-svg{width:16px;height:16px}.tooltip-svg g{stroke:var(--apex-checkbox-tooltip-icon-stroke, #FFFFFF)}.footer{height:14px;font-size:12px;margin-top:2px}.footer.error{color:var(--apex-checkbox-error-color, #F96138)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ApexTooltipDirective, selector: "[apexTooltip]", inputs: ["apexTooltip", "tooltipPosition"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
72
76
  }
73
77
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexCheckboxComponent, decorators: [{
74
78
  type: Component,
@@ -78,8 +82,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
78
82
  NgTemplateOutlet,
79
83
  ApexTooltipDirective,
80
84
  ReactiveFormsModule,
81
- ], template: "@if (options && options.formGroup && options.formControlName) {\n <label class=\"checkbox\" [ngClass]=\"{ checked: options.formGroup.controls[options.formControlName].value, disabled }\" [formGroup]=\"options.formGroup\">\n <input #input type=\"checkbox\" name=\"checkbox\" [formControlName]=\"options.formControlName\"/>\n\n <div class=\"checkbox-svg\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"8\" viewBox=\"0 0 11 8\" fill=\"none\">\n <path d=\"M1 4L4 7L10 1\" stroke=\"white\" stroke-width=\"2\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </label>\n\n @if (options && options.errors) {\n <div class=\"footer\" [ngClass]=\"{ 'error': controlInvalid }\">\n {{ errorLabel }}\n </div>\n }\n} @else {\n <label class=\"checkbox\" [ngClass]=\"{ checked, disabled }\">\n <input #input type=\"checkbox\" name=\"checkbox\" [(ngModel)]=\"checked\" [disabled]=\"disabled\" (change)=\"onChange()\"/>\n\n <div class=\"checkbox-svg\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"8\" viewBox=\"0 0 11 8\" fill=\"none\">\n <path d=\"M1 4L4 7L10 1\" stroke=\"white\" stroke-width=\"2\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n\n \n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </label>\n}\n\n<ng-template #content>\n <span>\n <ng-content></ng-content>\n </span>\n\n @if (tooltip) {\n <div class=\"tooltip-svg\">\n <svg [apexTooltip]=\"tooltip\" [tooltipPosition]=\"tooltipPosition.Above\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g stroke=\"#fff\">\n <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n </g>\n </svg>\n </div>\n }\n</ng-template>\n", styles: [":host{touch-action:manipulation}.checkbox{display:flex;align-items:center;position:relative;cursor:pointer}.checkbox.disabled{opacity:var(--apex-checkbox-disabled-opacity, .5);cursor:not-allowed;pointer-events:none}.checkbox span{color:var(--apex-checkbox-text-color, #0B1222);text-wrap:wrap;word-break:break-all;font-size:var(--apex-checkbox-font-size, 14px)}.checkbox span:not(:empty){margin:0 4px 0 8px}.checkbox input[type=checkbox]{width:20px;min-width:20px;height:20px;display:block}.checkbox input[type=checkbox]{appearance:none;-webkit-appearance:none;-moz-appearance:none;position:relative;cursor:pointer;outline:var(--apex-checkbox-outline-color, none);background-color:var(--apex-checkbox-background-color, #F7F8FB);border:1px solid var(--apex-checkbox-border-color, #E9E9E9);border-radius:4px;transition:box-shadow .3s,border .25s;box-shadow:inset 0 0 0 0 var(--apex-checkbox-border-color);margin:0}.checkbox.checked input[type=checkbox]{box-shadow:inset 0 0 0 10px var(--apex-checkbox-box-shadow-color, #F96138)}.checkbox-svg{width:20px;height:20px;position:absolute}.checkbox .checkbox-svg svg{position:absolute;top:50%;left:50%;transform:translateY(-50%) translate(-50%)}.checkbox .checkbox-svg svg path{fill:none;stroke:none;pointer-events:none;stroke:transparent;stroke-linecap:round;stroke-linejoin:round}.checkbox.checked .checkbox-svg svg path{stroke:var(--apex-checkbox-arrow-color, #FFFFFF)}.tooltip-svg{width:16px;height:16px}.tooltip-svg g{stroke:var(--apex-checkbox-tooltip-icon-stroke, #FFFFFF)}.footer{height:14px;font-size:12px;margin-top:2px}.footer.error{color:var(--apex-checkbox-error-color, #F96138)}\n"] }]
82
- }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { checked: [{
85
+ ], template: "@if (options && options.formGroup && options.formControlName) {\n <label class=\"checkbox\" [ngClass]=\"{ checked: options.formGroup.controls[options.formControlName].value, disabled }\" [formGroup]=\"options.formGroup\">\n <input #input type=\"checkbox\" name=\"checkbox\" [formControlName]=\"options.formControlName\"/>\n\n <div class=\"checkbox-svg\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"8\" viewBox=\"0 0 11 8\" fill=\"none\">\n <path d=\"M1 4L4 7L10 1\" stroke=\"white\" stroke-width=\"2\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </label>\n\n @if (options && options.errors) {\n <div class=\"footer\" [ngClass]=\"{ 'error': controlInvalid() }\">\n {{ errorLabel() }}\n </div>\n }\n} @else {\n <label class=\"checkbox\" [ngClass]=\"{ checked, disabled }\">\n <input #input type=\"checkbox\" name=\"checkbox\" [(ngModel)]=\"checked\" [disabled]=\"disabled\" (change)=\"onChange()\"/>\n\n <div class=\"checkbox-svg\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"8\" viewBox=\"0 0 11 8\" fill=\"none\">\n <path d=\"M1 4L4 7L10 1\" stroke=\"white\" stroke-width=\"2\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n\n \n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </label>\n}\n\n<ng-template #content>\n <span>\n <ng-content></ng-content>\n </span>\n\n @if (tooltip) {\n <div class=\"tooltip-svg\">\n <svg [apexTooltip]=\"tooltip\" [tooltipPosition]=\"tooltipPosition.Above\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g stroke=\"#fff\">\n <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n </g>\n </svg>\n </div>\n }\n</ng-template>\n", styles: [":host{touch-action:manipulation}.checkbox{display:flex;align-items:center;position:relative;cursor:pointer}.checkbox.disabled{opacity:var(--apex-checkbox-disabled-opacity, .5);cursor:not-allowed;pointer-events:none}.checkbox span{color:var(--apex-checkbox-text-color, #0B1222);text-wrap:wrap;word-break:break-all;font-size:var(--apex-checkbox-font-size, 14px)}.checkbox span:not(:empty){margin:0 4px 0 8px}.checkbox input[type=checkbox]{width:20px;min-width:20px;height:20px;display:block}.checkbox input[type=checkbox]{appearance:none;-webkit-appearance:none;-moz-appearance:none;position:relative;cursor:pointer;outline:var(--apex-checkbox-outline-color, none);background-color:var(--apex-checkbox-background-color, #F7F8FB);border:1px solid var(--apex-checkbox-border-color, #E9E9E9);border-radius:4px;transition:box-shadow .3s,border .25s;box-shadow:inset 0 0 0 0 var(--apex-checkbox-border-color);margin:0}.checkbox.checked input[type=checkbox]{box-shadow:inset 0 0 0 10px var(--apex-checkbox-box-shadow-color, #F96138)}.checkbox-svg{width:20px;height:20px;position:absolute}.checkbox .checkbox-svg svg{position:absolute;top:50%;left:50%;transform:translateY(-50%) translate(-50%)}.checkbox .checkbox-svg svg path{fill:none;stroke:none;pointer-events:none;stroke:transparent;stroke-linecap:round;stroke-linejoin:round}.checkbox.checked .checkbox-svg svg path{stroke:var(--apex-checkbox-arrow-color, #FFFFFF)}.tooltip-svg{width:16px;height:16px}.tooltip-svg g{stroke:var(--apex-checkbox-tooltip-icon-stroke, #FFFFFF)}.footer{height:14px;font-size:12px;margin-top:2px}.footer.error{color:var(--apex-checkbox-error-color, #F96138)}\n"] }]
86
+ }], propDecorators: { checked: [{
83
87
  type: Input
84
88
  }], disabled: [{
85
89
  type: Input
package/fesm2022/apexara-ng-components-checkbox.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"apexara-ng-components-checkbox.mjs","sources":["../../../../projects/apexara/ng-components/checkbox/src/checkbox.component.ts","../../../../projects/apexara/ng-components/checkbox/src/checkbox.component.html","../../../../projects/apexara/ng-components/checkbox/apexara-ng-components-checkbox.ts"],"sourcesContent":["import { Component, Input, Output, EventEmitter, ChangeDetectorRef, HostListener } from '@angular/core';\nimport { NgClass, NgTemplateOutlet } from '@angular/common';\nimport { AbstractControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';\n\nimport { Subscription } from 'rxjs';\n\nimport { ApexTooltipDirective, TooltipPosition } from '@apexara/ng-components/tooltip';\n\nexport interface ApexCheckboxOptions {\n formGroup?: FormGroup;\n formControlName?: string;\n errors?: ApexCheckboxErrors;\n}\n\nexport interface ApexCheckboxErrors {\n [x: string]: string;\n}\n\n@Component({\n selector: 'apex-checkbox',\n templateUrl: './checkbox.component.html',\n styleUrls: ['./checkbox.component.css'],\n imports: [\n NgClass,\n FormsModule,\n NgTemplateOutlet,\n ApexTooltipDirective,\n ReactiveFormsModule,\n ],\n})\n\nexport class ApexCheckboxComponent {\n\n constructor(private changeDetectorRef: ChangeDetectorRef) { }\n\n @Input() checked = false;\n @Input() disabled = false;\n @Input() tooltip: string | null = null;\n\n @Input() options: ApexCheckboxOptions | null = null;\n\n @Output() clickChange = new EventEmitter<boolean>();\n\n public tooltipPosition = TooltipPosition;\n public controlInvalid = false;\n public errorLabel = '';\n\n private controlSubscription!: Subscription;\n private control: AbstractControl | null = null;\n\n public ngAfterViewInit(): void {\n this.setControl();\n }\n\n public ngOnDestroy(): void {\n if (this.controlSubscription) {\n this.controlSubscription.unsubscribe();\n }\n }\n\n @HostListener('focusout')\n onFocusOut(): void {\n this.initChange();\n }\n\n public onChange(): void {\n this.clickChange.emit(this.checked);\n }\n\n private setControl(): void {\n if (!this.options || !this.options.formGroup || !this.options.formControlName || !this.options.formGroup.get(this.options.formControlName)) {\n return;\n }\n\n this.control = this.options.formGroup.controls[this.options.formControlName];\n\n this.disabled = this.control.disabled;\n\n this.controlSubscription = this.control.statusChanges.subscribe(() => {\n this.initChange();\n });\n }\n\n private initChange(): void {\n if (!this.control) {\n return;\n }\n\n this.checkIfControlInvalid(this.control);\n this.getErrorLabel();\n this.changeDetectorRef.detectChanges();\n }\n\n private checkIfControlInvalid(control: AbstractControl): void {\n this.controlInvalid = control.touched && control.invalid;\n }\n\n private getErrorLabel(): void {\n this.errorLabel = '';\n\n const options = this.options!;\n const formGroup = options.formGroup;\n const formControlName = options.formControlName;\n\n if (formGroup && formControlName && options.errors && this.controlInvalid) {\n for (const error in options.errors) {\n if (formGroup.controls[formControlName].hasError(error)) {\n this.errorLabel = options.errors[error];\n\n return;\n }\n }\n }\n }\n\n}\n","@if (options && options.formGroup && options.formControlName) {\n <label class=\"checkbox\" [ngClass]=\"{ checked: options.formGroup.controls[options.formControlName].value, disabled }\" [formGroup]=\"options.formGroup\">\n <input #input type=\"checkbox\" name=\"checkbox\" [formControlName]=\"options.formControlName\"/>\n\n <div class=\"checkbox-svg\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"8\" viewBox=\"0 0 11 8\" fill=\"none\">\n <path d=\"M1 4L4 7L10 1\" stroke=\"white\" stroke-width=\"2\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </label>\n\n @if (options && options.errors) {\n <div class=\"footer\" [ngClass]=\"{ 'error': controlInvalid }\">\n {{ errorLabel }}\n </div>\n }\n} @else {\n <label class=\"checkbox\" [ngClass]=\"{ checked, disabled }\">\n <input #input type=\"checkbox\" name=\"checkbox\" [(ngModel)]=\"checked\" [disabled]=\"disabled\" (change)=\"onChange()\"/>\n\n <div class=\"checkbox-svg\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"8\" viewBox=\"0 0 11 8\" fill=\"none\">\n <path d=\"M1 4L4 7L10 1\" stroke=\"white\" stroke-width=\"2\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n\n \n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </label>\n}\n\n<ng-template #content>\n <span>\n <ng-content></ng-content>\n </span>\n\n @if (tooltip) {\n <div class=\"tooltip-svg\">\n <svg [apexTooltip]=\"tooltip\" [tooltipPosition]=\"tooltipPosition.Above\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g stroke=\"#fff\">\n <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n </g>\n </svg>\n </div>\n }\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"apexara-ng-components-checkbox.mjs","sources":["../../../../projects/apexara/ng-components/checkbox/src/checkbox.component.ts","../../../../projects/apexara/ng-components/checkbox/src/checkbox.component.html","../../../../projects/apexara/ng-components/checkbox/apexara-ng-components-checkbox.ts"],"sourcesContent":["import { Component, Input, Output, EventEmitter, HostListener, signal } from '@angular/core';\nimport { NgClass, NgTemplateOutlet } from '@angular/common';\nimport { AbstractControl, FormGroup, FormsModule, ReactiveFormsModule, TouchedChangeEvent } from '@angular/forms';\n\nimport { Subscription, filter } from 'rxjs';\n\nimport { ApexTooltipDirective, TooltipPosition } from '@apexara/ng-components/tooltip';\n\nexport interface ApexCheckboxOptions {\n formGroup?: FormGroup;\n formControlName?: string;\n errors?: ApexCheckboxErrors;\n}\n\nexport interface ApexCheckboxErrors {\n [x: string]: string;\n}\n\n@Component({\n selector: 'apex-checkbox',\n templateUrl: './checkbox.component.html',\n styleUrls: ['./checkbox.component.css'],\n imports: [\n NgClass,\n FormsModule,\n NgTemplateOutlet,\n ApexTooltipDirective,\n ReactiveFormsModule,\n ],\n})\n\nexport class ApexCheckboxComponent {\n\n @Input() checked = false;\n @Input() disabled = false;\n @Input() tooltip: string | null = null;\n\n @Input() options: ApexCheckboxOptions | null = null;\n\n @Output() clickChange = new EventEmitter<boolean>();\n\n public tooltipPosition = TooltipPosition;\n public controlInvalid = signal(false);\n public errorLabel = signal('');\n\n private controlSubscription!: Subscription;\n private control: AbstractControl | null = null;\n\n public ngAfterViewInit(): void {\n this.setControl();\n }\n\n public ngOnDestroy(): void {\n if (this.controlSubscription) {\n this.controlSubscription.unsubscribe();\n }\n }\n\n @HostListener('focusout')\n onFocusOut(): void {\n this.initChange();\n }\n\n public onChange(): void {\n this.clickChange.emit(this.checked);\n }\n\n private setControl(): void {\n if (!this.options || !this.options.formGroup || !this.options.formControlName || !this.options.formGroup.get(this.options.formControlName)) {\n return;\n }\n\n this.control = this.options.formGroup.controls[this.options.formControlName];\n\n this.disabled = this.control.disabled;\n\n this.controlSubscription = this.control.statusChanges.subscribe(() => {\n this.initChange();\n });\n\n this.controlSubscription.add(\n this.control.events\n .pipe(filter(event => event instanceof TouchedChangeEvent))\n .subscribe(() => {\n this.initChange();\n })\n );\n }\n\n private initChange(): void {\n if (!this.control) {\n return;\n }\n\n this.checkIfControlInvalid(this.control);\n this.getErrorLabel();\n }\n\n private checkIfControlInvalid(control: AbstractControl): void {\n this.controlInvalid.set(control.touched && control.invalid);\n }\n\n private getErrorLabel(): void {\n this.errorLabel.set('');\n\n const options = this.options!;\n const formGroup = options.formGroup;\n const formControlName = options.formControlName;\n\n if (formGroup && formControlName && options.errors && this.controlInvalid()) {\n for (const error in options.errors) {\n if (formGroup.controls[formControlName].hasError(error)) {\n this.errorLabel.set(options.errors[error]);\n\n return;\n }\n }\n }\n }\n\n}\n","@if (options && options.formGroup && options.formControlName) {\n <label class=\"checkbox\" [ngClass]=\"{ checked: options.formGroup.controls[options.formControlName].value, disabled }\" [formGroup]=\"options.formGroup\">\n <input #input type=\"checkbox\" name=\"checkbox\" [formControlName]=\"options.formControlName\"/>\n\n <div class=\"checkbox-svg\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"8\" viewBox=\"0 0 11 8\" fill=\"none\">\n <path d=\"M1 4L4 7L10 1\" stroke=\"white\" stroke-width=\"2\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </label>\n\n @if (options && options.errors) {\n <div class=\"footer\" [ngClass]=\"{ 'error': controlInvalid() }\">\n {{ errorLabel() }}\n </div>\n }\n} @else {\n <label class=\"checkbox\" [ngClass]=\"{ checked, disabled }\">\n <input #input type=\"checkbox\" name=\"checkbox\" [(ngModel)]=\"checked\" [disabled]=\"disabled\" (change)=\"onChange()\"/>\n\n <div class=\"checkbox-svg\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"8\" viewBox=\"0 0 11 8\" fill=\"none\">\n <path d=\"M1 4L4 7L10 1\" stroke=\"white\" stroke-width=\"2\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n\n \n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </label>\n}\n\n<ng-template #content>\n <span>\n <ng-content></ng-content>\n </span>\n\n @if (tooltip) {\n <div class=\"tooltip-svg\">\n <svg [apexTooltip]=\"tooltip\" [tooltipPosition]=\"tooltipPosition.Above\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g stroke=\"#fff\">\n <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n </g>\n </svg>\n </div>\n }\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}