matcha-components 20.32.0 → 20.36.0

package/fesm2022/matcha-components.mjs

@@ -5868,8 +5868,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
             }] } });
 
 class MatchaSliderComponent {
-    constructor(cdr) {
+    constructor(cdr, elementRef) {
         this.cdr = cdr;
+        this.elementRef = elementRef;
         this.value = 0;
         this.highValue = 0;
         this.options = {};
@@ -5973,6 +5974,12 @@ class MatchaSliderComponent {
     ngOnInit() {
         this.initializeValues();
     }
+    ngAfterViewInit() {
+        // Garantir que o sliderElement está disponível
+        if (this.sliderElement) {
+            console.log('Slider element ready:', this.sliderElement.nativeElement);
+        }
+    }
     ngOnDestroy() {
         this.destroy$.next();
         this.destroy$.complete();
@@ -6012,7 +6019,13 @@ class MatchaSliderComponent {
     onTrackMouseDown(event) {
         if (this.isDisabled)
             return;
-        const rect = this.sliderElement?.nativeElement.getBoundingClientRect();
+        // Usar elementRef em vez de ViewChild
+        const sliderElement = this.elementRef.nativeElement.querySelector('.matcha-slider');
+        if (!sliderElement) {
+            console.error('Slider element not found');
+            return;
+        }
+        const rect = sliderElement.getBoundingClientRect();
         if (!rect)
             return;
         const newValue = this.calculateValueFromPosition(event.clientX, rect);
@@ -6158,6 +6171,7 @@ class MatchaSliderComponent {
             this.valueChange.emit(this.value);
             this.userChange.emit(this.value);
             this.onChange(this.value);
+            this.cdr.markForCheck();
         }
     }
     updateRangeValues(newValue) {
@@ -6195,6 +6209,7 @@ class MatchaSliderComponent {
             this.valueChange.emit(this.value);
             this.userChange.emit(this.value);
             this.onChange([this.value, this.highValue]);
+            this.cdr.markForCheck();
         }
     }
     updateHighValue(newValue) {
@@ -6219,6 +6234,7 @@ class MatchaSliderComponent {
             this.highValueChange.emit(this.highValue);
             this.userChange.emit(this.highValue);
             this.onChange([this.value, this.highValue]);
+            this.cdr.markForCheck();
         }
     }
     onKeyDown(event) {
@@ -6293,25 +6309,25 @@ class MatchaSliderComponent {
     formatValue(value) {
         return this.mergedOptions.format ? this.mergedOptions.format(value) : value.toString();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: MatchaSliderComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: MatchaSliderComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.2", type: MatchaSliderComponent, isStandalone: false, selector: "matcha-slider", inputs: { value: "value", highValue: "highValue", options: "options", color: "color", disabled: "disabled" }, outputs: { valueChange: "valueChange", highValueChange: "highValueChange", userChange: "userChange", userChangeEnd: "userChangeEnd" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MatchaSliderComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "sliderElement", first: true, predicate: ["sliderElement"], descendants: true }], ngImport: i0, template: "<div class=\"matcha-slider\" [class.disabled]=\"isDisabled\" [class.range]=\"isRange\"\n    [attr.data-color]=\"color\" #sliderElement>\n\n\n    <div class=\"limit-labels\" *ngIf=\"!mergedOptions.hideLimitLabels\">\n        <span class=\"floor-label\">{{ formatValue(mergedOptions.floor || 0) }}</span>\n        <span class=\"ceil-label\" [class.color-placeholder]=\"!isAtMaxValue\" *ngIf=\"!isAtMaxValue\">{{ formatValue(mergedOptions.ceil || 100) }}</span>\n    </div>\n    <div class=\"slider-track\" (mousedown)=\"onTrackMouseDown($event)\" (click)=\"onTrackClick($event)\">\n\n        <div class=\"selection-bar\" [style]=\"selectionBarStyle\" *ngIf=\"mergedOptions.showSelectionBar\">\n        </div>\n\n        <div class=\"pointer low-pointer\" [style]=\"getPointerStyle(false)\"\n            [attr.tabindex]=\"isDisabled ? -1 : 0\"\n            (mousedown)=\"onPointerMouseDown($event, false)\" (click)=\"onPointerClick($event, false)\"\n            (keydown)=\"onKeyDown($event)\" role=\"slider\" [attr.aria-valuemin]=\"mergedOptions.floor\"\n            [attr.aria-valuemax]=\"mergedOptions.ceil\" [attr.aria-valuenow]=\"value\"\n            [attr.aria-disabled]=\"isDisabled\">\n\n            <div class=\"pointer-label\" *ngIf=\"!mergedOptions.hidePointerLabels\">\n                {{ formatValue(value) }}\n            </div>\n        </div>\n\n        <div class=\"pointer high-pointer\" [style]=\"getPointerStyle(true)\"\n            [attr.tabindex]=\"isDisabled ? -1 : 0\" (mousedown)=\"onPointerMouseDown($event, true)\"\n            (click)=\"onPointerClick($event, true)\" (keydown)=\"onKeyDown($event)\" role=\"slider\"\n            [attr.aria-valuemin]=\"mergedOptions.floor\" [attr.aria-valuemax]=\"mergedOptions.ceil\"\n            [attr.aria-valuenow]=\"highValue\" [attr.aria-disabled]=\"isDisabled\" *ngIf=\"isRange\">\n\n            <div class=\"pointer-label\" *ngIf=\"!mergedOptions.hidePointerLabels\">\n                {{ formatValue(highValue) }}\n            </div>\n        </div>\n    </div>\n\n\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "sliderElement", first: true, predicate: ["sliderElement"], descendants: true }], ngImport: i0, template: "<div class=\"matcha-slider\" [class.disabled]=\"isDisabled\" [class.range]=\"isRange\"\n    [attr.data-color]=\"color\" #sliderElement>\n\n\n    <div class=\"limit-labels\" *ngIf=\"!mergedOptions.hideLimitLabels\">\n        <span class=\"floor-label\">{{ formatValue(mergedOptions.floor || 0) }}</span>\n        <span class=\"ceil-label\" [class.color-placeholder]=\"!isAtMaxValue\" *ngIf=\"!isAtMaxValue\">{{ formatValue(mergedOptions.ceil || 100) }}</span>\n    </div>\n    <div class=\"slider-track\" (mousedown)=\"onTrackMouseDown($event)\" (click)=\"onTrackClick($event)\">\n\n        <div class=\"selection-bar\" [style]=\"selectionBarStyle\" *ngIf=\"mergedOptions.showSelectionBar\">\n        </div>\n\n        <div class=\"pointer low-pointer\" [style]=\"getPointerStyle(false)\"\n            [attr.tabindex]=\"isDisabled ? -1 : 0\"\n            (mousedown)=\"onPointerMouseDown($event, false)\" (click)=\"onPointerClick($event, false)\"\n            (keydown)=\"onKeyDown($event)\" role=\"slider\" [attr.aria-valuemin]=\"mergedOptions.floor\"\n            [attr.aria-valuemax]=\"mergedOptions.ceil\" [attr.aria-valuenow]=\"value\"\n            [attr.aria-disabled]=\"isDisabled\">\n\n            <div class=\"pointer-label\" *ngIf=\"!mergedOptions.hidePointerLabels\">\n                {{ formatValue(value) }}\n            </div>\n        </div>\n\n        <div class=\"pointer high-pointer\" [style]=\"getPointerStyle(true)\"\n            [attr.tabindex]=\"isDisabled ? -1 : 0\" (mousedown)=\"onPointerMouseDown($event, true)\"\n            (click)=\"onPointerClick($event, true)\" (keydown)=\"onKeyDown($event)\" role=\"slider\"\n            [attr.aria-valuemin]=\"mergedOptions.floor\" [attr.aria-valuemax]=\"mergedOptions.ceil\"\n            [attr.aria-valuenow]=\"highValue\" [attr.aria-disabled]=\"isDisabled\" *ngIf=\"isRange\">\n\n            <div class=\"pointer-label\" *ngIf=\"!mergedOptions.hidePointerLabels\">\n                {{ formatValue(highValue) }}\n            </div>\n        </div>\n    </div>\n\n\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: MatchaSliderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'matcha-slider', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+            args: [{ selector: 'matcha-slider', standalone: false, changeDetection: ChangeDetectionStrategy.Default, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => MatchaSliderComponent),
                             multi: true
                         }
                     ], template: "<div class=\"matcha-slider\" [class.disabled]=\"isDisabled\" [class.range]=\"isRange\"\n    [attr.data-color]=\"color\" #sliderElement>\n\n\n    <div class=\"limit-labels\" *ngIf=\"!mergedOptions.hideLimitLabels\">\n        <span class=\"floor-label\">{{ formatValue(mergedOptions.floor || 0) }}</span>\n        <span class=\"ceil-label\" [class.color-placeholder]=\"!isAtMaxValue\" *ngIf=\"!isAtMaxValue\">{{ formatValue(mergedOptions.ceil || 100) }}</span>\n    </div>\n    <div class=\"slider-track\" (mousedown)=\"onTrackMouseDown($event)\" (click)=\"onTrackClick($event)\">\n\n        <div class=\"selection-bar\" [style]=\"selectionBarStyle\" *ngIf=\"mergedOptions.showSelectionBar\">\n        </div>\n\n        <div class=\"pointer low-pointer\" [style]=\"getPointerStyle(false)\"\n            [attr.tabindex]=\"isDisabled ? -1 : 0\"\n            (mousedown)=\"onPointerMouseDown($event, false)\" (click)=\"onPointerClick($event, false)\"\n            (keydown)=\"onKeyDown($event)\" role=\"slider\" [attr.aria-valuemin]=\"mergedOptions.floor\"\n            [attr.aria-valuemax]=\"mergedOptions.ceil\" [attr.aria-valuenow]=\"value\"\n            [attr.aria-disabled]=\"isDisabled\">\n\n            <div class=\"pointer-label\" *ngIf=\"!mergedOptions.hidePointerLabels\">\n                {{ formatValue(value) }}\n            </div>\n        </div>\n\n        <div class=\"pointer high-pointer\" [style]=\"getPointerStyle(true)\"\n            [attr.tabindex]=\"isDisabled ? -1 : 0\" (mousedown)=\"onPointerMouseDown($event, true)\"\n            (click)=\"onPointerClick($event, true)\" (keydown)=\"onKeyDown($event)\" role=\"slider\"\n            [attr.aria-valuemin]=\"mergedOptions.floor\" [attr.aria-valuemax]=\"mergedOptions.ceil\"\n            [attr.aria-valuenow]=\"highValue\" [attr.aria-disabled]=\"isDisabled\" *ngIf=\"isRange\">\n\n            <div class=\"pointer-label\" *ngIf=\"!mergedOptions.hidePointerLabels\">\n                {{ formatValue(highValue) }}\n            </div>\n        </div>\n    </div>\n\n\n</div>" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { value: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { value: [{
                 type: Input
             }], highValue: [{
                 type: Input