@tetacom/ng-components 1.0.8 → 1.0.12

package/fesm2020/tetacom-ng-components.mjs

@@ -240,7 +240,14 @@ class IconSpriteDirective {
         this.bypassInterceptors = true;
     }
     ngOnInit() {
-        this._iconService.addSprite(this.tetaIconSprite, this.bypassInterceptors);
+        if (typeof this.tetaIconSprite === 'string') {
+            this._iconService.addSprite(this.tetaIconSprite, this.bypassInterceptors);
+        }
+        if (this.tetaIconSprite instanceof Array && this.tetaIconSprite?.length) {
+            this.tetaIconSprite.forEach((sprite) => {
+                this._iconService.addSprite(sprite, this.bypassInterceptors);
+            });
+        }
     }
 }
 IconSpriteDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: IconSpriteDirective, deps: [{ token: IconService }], target: i0.ɵɵFactoryTarget.Directive });
@@ -2620,9 +2627,7 @@ class OnlyNumberDirective {
         if (this.tetaOnlyNumber === false) {
             return;
         }
-        console.log(value);
         value = value.replace(',', '.').trim();
-        console.log(value);
         let regex = this._integerUnsigned;
         if (!this.allowDecimals && !this.allowSign) {
             regex = this._integerUnsigned;
@@ -2675,7 +2680,6 @@ class OnlyNumberDirective {
             value = '0.0';
         }
         const valid = new RegExp(regex).test(value.toString());
-        console.log(value, valid);
         this._control.control.setValue(valid ? value : this._previousValue ?? 0);
     }
 }
@@ -3534,6 +3538,7 @@ class TextFieldComponent {
         this.placeholder = '';
         this.disabled = false;
         this.onlyNumber = false;
+        this.tabindex = 0;
         this.textField = true;
         this.value = '';
     }
@@ -3545,6 +3550,9 @@ class TextFieldComponent {
             this.input.nativeElement.blur();
         }
     }
+    emitBlur() {
+        this.onTouched();
+    }
     registerOnChange(fn) {
         this.onChange = fn;
     }
@@ -3559,17 +3567,19 @@ class TextFieldComponent {
         this.value = input;
         this._cdr.detectChanges();
     }
-    onChange(input) { }
-    onTouched(input) { }
+    onChange(input) {
+    }
+    onTouched() {
+    }
 }
 TextFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: TextFieldComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: TextFieldComponent, selector: "teta-text-field", inputs: { placeholder: "placeholder", leftIconName: "leftIconName", disabled: "disabled", onlyNumber: "onlyNumber", invalid: "invalid" }, host: { listeners: { "click": "onFocus()" }, properties: { "class.text-field_disabled": "this.disabled", "class.text-field_invalid": "this.invalid", "class.text-field": "this.textField" } }, providers: [
+TextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: TextFieldComponent, selector: "teta-text-field", inputs: { placeholder: "placeholder", leftIconName: "leftIconName", disabled: "disabled", onlyNumber: "onlyNumber", invalid: "invalid" }, host: { listeners: { "click": "onFocus()" }, properties: { "class.text-field_disabled": "this.disabled", "class.text-field_invalid": "this.invalid", "attr.tabindex": "this.tabindex", "class.text-field": "this.textField" } }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => TextFieldComponent),
             multi: true,
         },
-    ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<teta-icon *ngIf=\"leftIconName\" [name]=\"leftIconName\"></teta-icon>\n<input\n  #input\n  [ngModel]=\"value\"\n  [tetaOnlyNumber]=\"onlyNumber\"\n  (ngModelChange)=\"value = $event; onChange($event);\"\n  [placeholder]=\"placeholder\"\n  [disabled]=\"disabled\"\n  (keydown)=\"keyPress($event)\"\n  autocomplete=\"off\"\n  type=\"text\"\n/>\n<teta-icon\n  *ngIf=\"value && !disabled\"\n  class=\"close-icon\"\n  [name]=\"'closeCircle'\"\n  (click)=\"value = ''; onChange('');\"\n></teta-icon>\n", styles: [""], components: [{ type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: OnlyNumberDirective, selector: "[tetaOnlyNumber]", inputs: ["tetaOnlyNumber", "allowDecimals", "allowSign", "decimalSeparator", "commaSeparator"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<teta-icon *ngIf=\"leftIconName\" [name]=\"leftIconName\"></teta-icon>\n<input\n  #input\n  [ngModel]=\"value\"\n  [tetaOnlyNumber]=\"onlyNumber\"\n  (ngModelChange)=\"value = $event; onChange($event);\"\n  [placeholder]=\"placeholder\"\n  [disabled]=\"disabled\"\n  (blur)=\"emitBlur()\"\n  (keydown)=\"keyPress($event)\"\n  autocomplete=\"off\"\n  type=\"text\"\n/>\n<teta-icon\n  *ngIf=\"value && !disabled\"\n  class=\"close-icon\"\n  [name]=\"'closeCircle'\"\n  (click)=\"value = ''; onChange('');\"\n></teta-icon>\n", styles: [""], components: [{ type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: OnlyNumberDirective, selector: "[tetaOnlyNumber]", inputs: ["tetaOnlyNumber", "allowDecimals", "allowSign", "decimalSeparator", "commaSeparator"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: TextFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'teta-text-field', providers: [
@@ -3578,7 +3588,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
                             useExisting: forwardRef(() => TextFieldComponent),
                             multi: true,
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<teta-icon *ngIf=\"leftIconName\" [name]=\"leftIconName\"></teta-icon>\n<input\n  #input\n  [ngModel]=\"value\"\n  [tetaOnlyNumber]=\"onlyNumber\"\n  (ngModelChange)=\"value = $event; onChange($event);\"\n  [placeholder]=\"placeholder\"\n  [disabled]=\"disabled\"\n  (keydown)=\"keyPress($event)\"\n  autocomplete=\"off\"\n  type=\"text\"\n/>\n<teta-icon\n  *ngIf=\"value && !disabled\"\n  class=\"close-icon\"\n  [name]=\"'closeCircle'\"\n  (click)=\"value = ''; onChange('');\"\n></teta-icon>\n", styles: [""] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<teta-icon *ngIf=\"leftIconName\" [name]=\"leftIconName\"></teta-icon>\n<input\n  #input\n  [ngModel]=\"value\"\n  [tetaOnlyNumber]=\"onlyNumber\"\n  (ngModelChange)=\"value = $event; onChange($event);\"\n  [placeholder]=\"placeholder\"\n  [disabled]=\"disabled\"\n  (blur)=\"emitBlur()\"\n  (keydown)=\"keyPress($event)\"\n  autocomplete=\"off\"\n  type=\"text\"\n/>\n<teta-icon\n  *ngIf=\"value && !disabled\"\n  class=\"close-icon\"\n  [name]=\"'closeCircle'\"\n  (click)=\"value = ''; onChange('');\"\n></teta-icon>\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { placeholder: [{
                 type: Input
             }], leftIconName: [{
@@ -3598,6 +3608,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
             }], input: [{
                 type: ViewChild,
                 args: ['input', { static: false }]
+            }], tabindex: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
             }], textField: [{
                 type: HostBinding,
                 args: ['class.text-field']
@@ -10085,6 +10098,7 @@ class SplineDrawer {
         const path = d3
             .line()
             .curve(d3.curveCatmullRom)
+            .defined((d) => d.x != null && d.y != null)
             .x((d) => scaleX(d.x))
             .y((d) => scaleY(d.y));
         context
@@ -10720,12 +10734,15 @@ class TetaChart {
                 className: annotation.className,
             };
         });
-        const makeAnnotations = d3annotation.annotation().annotations(annotations ?? []);
+        const makeAnnotations = d3annotation
+            .annotation()
+            .annotations(annotations ?? []);
         this._chart
             .append('g')
             .attr('class', 'annotations')
             .attr('clip-path', `url(#draw-window-${this.uniqId})`)
-            .call(makeAnnotations);
+            .call(makeAnnotations)
+            .lower();
     }
     drawPlotLines() {
         this._chart.selectAll('.plotlines').remove();
@@ -10921,7 +10938,12 @@ class TetaChart {
                 .attr('x', (d) => x(d.from))
                 .attr('y', 0)
                 .attr('width', (d) => Math.abs(x(d.to) - x(d.from)))
-                .attr('fill', (d) => d.color)
+                .attr('fill', (d) => {
+                if (d.image) {
+                    return `url(#${d.image})`;
+                }
+                return d.color;
+            })
                 .style('opacity', (d) => d.opacity ?? 1)
                 .attr('height', plotBandHeight > 0 ? plotBandHeight : 0)
                 .attr('transform', `translate(0, ${this._options.bounds.top})`);
@@ -11161,7 +11183,12 @@ class TetaChart {
                 .attr('x', 0)
                 .attr('y', (d) => y(d.from))
                 .attr('width', (d) => plotBandWidth)
-                .attr('fill', (d) => d.color)
+                .attr('fill', (d) => {
+                if (d.image) {
+                    return `url(#${d.image})`;
+                }
+                return d.color;
+            })
                 .style('opacity', (d) => d.opacity ?? 1)
                 .attr('height', (d) => Math.abs(y(d.to) - y(d.from)))
                 .attr('cursor', (d) => (d.draggable ? 'move' : 'default'));
@@ -11233,7 +11260,7 @@ class TetaChart {
     }
     drawChart() {
         const series = this._options.series?.filter((_) => _.visible);
-        this._chart.selectAll('.chart-container').remove();
+        this._chart.selectAll('.series').remove();
         if (!series || series.length < 1) {
             d3.select(this._container.nativeElement)
                 .select('canvas')
@@ -11353,7 +11380,7 @@ class TetaChart {
                     color: d.color,
                     name: d.name,
                 });
-                return `translate(${!isNaN(data?.x) ? foundX(data.x) : -10}, ${!isNaN(data?.y) ? foundY(data.y) : -10})`;
+                return `translate(${!isNaN(data?.x) && data?.x != null ? foundX(data.x) : -10}, ${!isNaN(data?.y) && data?.y != null ? foundY(data.y) : -10})`;
             }
             if (this._options.tooltip.tracking === 'y') {
                 const sorted = [...d.data].sort((a, b) => d3.ascending(a.y, b.y));
@@ -11366,7 +11393,7 @@ class TetaChart {
                     color: d.color,
                     name: d.name,
                 });
-                return `translate(${foundX(data.x)}, ${foundY(data.y)})`;
+                return `translate(${!isNaN(data?.x) && data?.x != null ? foundX(data.x) : -10}, ${!isNaN(data?.y) && data?.y != null ? foundY(data.y) : -10})`;
             }
         });
         if (this._options.tooltip?.format) {
@@ -12064,6 +12091,7 @@ class PlotBand {
         this.to = options?.to;
         this.label = options?.label;
         this.color = options?.color || '#59AE501A';
+        this.image = options?.image;
         this.showGrabbers =
             options?.showGrabbers != null ? options.showGrabbers : true;
         this.draggable = options?.draggable != null ? options?.draggable : false;