matcha-components 20.52.0 → 20.53.0
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.
|
@@ -9303,6 +9303,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
|
|
|
9303
9303
|
args: ['attr.theme']
|
|
9304
9304
|
}] } });
|
|
9305
9305
|
|
|
9306
|
+
// projects/matcha-components/src/lib/matcha-slider/slider/slider.component.ts
|
|
9306
9307
|
class MatchaSliderComponent {
|
|
9307
9308
|
set highValue(val) {
|
|
9308
9309
|
this._highValue = val;
|
|
@@ -9331,7 +9332,6 @@ class MatchaSliderComponent {
|
|
|
9331
9332
|
this.lastUpdateTime = 0;
|
|
9332
9333
|
this.animationFrameId = null;
|
|
9333
9334
|
this.isRangeInternal = false;
|
|
9334
|
-
// Default options - apenas as opções realmente utilizadas
|
|
9335
9335
|
this.defaultOptions = {
|
|
9336
9336
|
floor: 0,
|
|
9337
9337
|
ceil: 100,
|
|
@@ -9363,10 +9363,8 @@ class MatchaSliderComponent {
|
|
|
9363
9363
|
logScale: false,
|
|
9364
9364
|
translate: (value) => value.toString()
|
|
9365
9365
|
};
|
|
9366
|
-
// ControlValueAccessor implementation
|
|
9367
9366
|
this.onChange = (value) => { };
|
|
9368
9367
|
this.onTouched = () => { };
|
|
9369
|
-
// Bound methods to avoid arrow functions and memory leaks
|
|
9370
9368
|
this.boundOnMouseMove = this.onMouseMove.bind(this);
|
|
9371
9369
|
this.boundOnMouseUp = this.onMouseUp.bind(this);
|
|
9372
9370
|
}
|
|
@@ -9399,21 +9397,28 @@ class MatchaSliderComponent {
|
|
|
9399
9397
|
}
|
|
9400
9398
|
}
|
|
9401
9399
|
get isAtMaxValue() {
|
|
9400
|
+
const ceil = this.mergedOptions.ceil || 100;
|
|
9402
9401
|
if (this.isRange) {
|
|
9403
|
-
return this.highValue >=
|
|
9402
|
+
return this.highValue >= ceil;
|
|
9404
9403
|
}
|
|
9405
9404
|
else {
|
|
9406
|
-
return this.value >=
|
|
9405
|
+
return this.value >= ceil;
|
|
9406
|
+
}
|
|
9407
|
+
}
|
|
9408
|
+
get isAtMinValue() {
|
|
9409
|
+
const floor = this.mergedOptions.floor || 0;
|
|
9410
|
+
if (this.isRange) {
|
|
9411
|
+
return this.value <= floor || this.highValue <= floor;
|
|
9412
|
+
}
|
|
9413
|
+
else {
|
|
9414
|
+
return this.value <= floor;
|
|
9407
9415
|
}
|
|
9408
9416
|
}
|
|
9409
9417
|
get isDisabled() {
|
|
9410
|
-
// Para atributo disabled sem valor, o Angular passa string vazia
|
|
9411
9418
|
if (typeof this.disabled === 'string') {
|
|
9412
|
-
// String vazia ou qualquer string que não seja 'false' = disabled
|
|
9413
9419
|
const stringDisabled = this.disabled === '' || (this.disabled !== 'false');
|
|
9414
9420
|
return stringDisabled || Boolean(this.mergedOptions.disabled);
|
|
9415
9421
|
}
|
|
9416
|
-
// Para boolean
|
|
9417
9422
|
return Boolean(this.disabled) || Boolean(this.mergedOptions.disabled);
|
|
9418
9423
|
}
|
|
9419
9424
|
ngOnInit() {
|
|
@@ -9458,11 +9463,9 @@ class MatchaSliderComponent {
|
|
|
9458
9463
|
onTrackMouseDown(event) {
|
|
9459
9464
|
if (this.isDisabled)
|
|
9460
9465
|
return;
|
|
9461
|
-
// Usar elementRef em vez de ViewChild
|
|
9462
9466
|
const sliderElement = this.elementRef.nativeElement.querySelector('.matcha-slider');
|
|
9463
|
-
if (!sliderElement)
|
|
9467
|
+
if (!sliderElement)
|
|
9464
9468
|
return;
|
|
9465
|
-
}
|
|
9466
9469
|
const rect = sliderElement.getBoundingClientRect();
|
|
9467
9470
|
if (!rect)
|
|
9468
9471
|
return;
|
|
@@ -9487,11 +9490,9 @@ class MatchaSliderComponent {
|
|
|
9487
9490
|
onMouseMove(event) {
|
|
9488
9491
|
if (!this.isDragging || !this.draggingPointer)
|
|
9489
9492
|
return;
|
|
9490
|
-
// Throttle updates for smooth performance
|
|
9491
9493
|
const now = Date.now();
|
|
9492
|
-
if (now - this.lastUpdateTime < 16)
|
|
9494
|
+
if (now - this.lastUpdateTime < 16)
|
|
9493
9495
|
return;
|
|
9494
|
-
}
|
|
9495
9496
|
this.lastUpdateTime = now;
|
|
9496
9497
|
this.cancelAnimationFrame();
|
|
9497
9498
|
this.animationFrameId = requestAnimationFrame(() => {
|
|
@@ -9529,7 +9530,6 @@ class MatchaSliderComponent {
|
|
|
9529
9530
|
this.cancelAnimationFrame();
|
|
9530
9531
|
}
|
|
9531
9532
|
onPointerClick(event, isHighValue = false) {
|
|
9532
|
-
// Prevent click when dragging
|
|
9533
9533
|
if (this.isDragging) {
|
|
9534
9534
|
event.preventDefault();
|
|
9535
9535
|
event.stopPropagation();
|
|
@@ -9631,14 +9631,12 @@ class MatchaSliderComponent {
|
|
|
9631
9631
|
const minRange = this.mergedOptions.minRange || 0;
|
|
9632
9632
|
const maxRange = this.mergedOptions.maxRange || 0;
|
|
9633
9633
|
let clampedValue = Math.max(floor, Math.min(ceil, newValue));
|
|
9634
|
-
// Apply range constraints
|
|
9635
9634
|
if (maxRange > 0) {
|
|
9636
9635
|
clampedValue = Math.min(clampedValue, this.highValue - maxRange);
|
|
9637
9636
|
}
|
|
9638
9637
|
if (minRange > 0) {
|
|
9639
9638
|
clampedValue = Math.max(clampedValue, this.highValue - minRange);
|
|
9640
9639
|
}
|
|
9641
|
-
// Prevent switching pointers in range mode
|
|
9642
9640
|
if (this.mergedOptions.noSwitching) {
|
|
9643
9641
|
clampedValue = Math.min(clampedValue, this.highValue);
|
|
9644
9642
|
}
|
|
@@ -9656,14 +9654,12 @@ class MatchaSliderComponent {
|
|
|
9656
9654
|
const minRange = this.mergedOptions.minRange || 0;
|
|
9657
9655
|
const maxRange = this.mergedOptions.maxRange || 0;
|
|
9658
9656
|
let clampedValue = Math.max(floor, Math.min(ceil, newValue));
|
|
9659
|
-
// Apply range constraints
|
|
9660
9657
|
if (maxRange > 0) {
|
|
9661
9658
|
clampedValue = Math.min(clampedValue, this.value + maxRange);
|
|
9662
9659
|
}
|
|
9663
9660
|
if (minRange > 0) {
|
|
9664
9661
|
clampedValue = Math.max(clampedValue, this.value + minRange);
|
|
9665
9662
|
}
|
|
9666
|
-
// Prevent switching pointers in range mode
|
|
9667
9663
|
if (this.mergedOptions.noSwitching) {
|
|
9668
9664
|
clampedValue = Math.max(clampedValue, this.value);
|
|
9669
9665
|
}
|
|
@@ -9717,7 +9713,6 @@ class MatchaSliderComponent {
|
|
|
9717
9713
|
this.updateSingleValue(newValue);
|
|
9718
9714
|
}
|
|
9719
9715
|
}
|
|
9720
|
-
// ControlValueAccessor methods
|
|
9721
9716
|
writeValue(value) {
|
|
9722
9717
|
if (Array.isArray(value)) {
|
|
9723
9718
|
this.isRangeInternal = true;
|
|
@@ -9756,7 +9751,7 @@ class MatchaSliderComponent {
|
|
|
9756
9751
|
useExisting: forwardRef(() => MatchaSliderComponent),
|
|
9757
9752
|
multi: true
|
|
9758
9753
|
}
|
|
9759
|
-
], 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
|
|
9754
|
+
], viewQueries: [{ propertyName: "sliderElement", first: true, predicate: ["sliderElement"], descendants: true }], ngImport: i0, template: "<!-- projects/matcha-components/src/lib/matcha-slider/slider/slider.component.html -->\n\n<div class=\"matcha-slider\" [class.disabled]=\"isDisabled\" [class.range]=\"isRange\"\n [attr.data-color]=\"color\" #sliderElement>\n\n <div class=\"limit-labels\" *ngIf=\"!mergedOptions.hideLimitLabels\">\n <span class=\"floor-label\" [style.visibility]=\"isAtMinValue ? 'hidden' : 'visible'\">\n {{ formatValue(mergedOptions.floor || 0) }}\n </span>\n \n <span class=\"ceil-label\" [style.visibility]=\"isAtMaxValue ? 'hidden' : 'visible'\">\n {{ formatValue(mergedOptions.ceil || 100) }}\n </span>\n </div>\n \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</div>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
|
|
9760
9755
|
}
|
|
9761
9756
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaSliderComponent, decorators: [{
|
|
9762
9757
|
type: Component,
|
|
@@ -9766,7 +9761,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
|
|
|
9766
9761
|
useExisting: forwardRef(() => MatchaSliderComponent),
|
|
9767
9762
|
multi: true
|
|
9768
9763
|
}
|
|
9769
|
-
], template: "<div class=\"matcha-slider\" [class.disabled]=\"isDisabled\" [class.range]=\"isRange\"\n [attr.data-color]=\"color\" #sliderElement>\n\n
|
|
9764
|
+
], template: "<!-- projects/matcha-components/src/lib/matcha-slider/slider/slider.component.html -->\n\n<div class=\"matcha-slider\" [class.disabled]=\"isDisabled\" [class.range]=\"isRange\"\n [attr.data-color]=\"color\" #sliderElement>\n\n <div class=\"limit-labels\" *ngIf=\"!mergedOptions.hideLimitLabels\">\n <span class=\"floor-label\" [style.visibility]=\"isAtMinValue ? 'hidden' : 'visible'\">\n {{ formatValue(mergedOptions.floor || 0) }}\n </span>\n \n <span class=\"ceil-label\" [style.visibility]=\"isAtMaxValue ? 'hidden' : 'visible'\">\n {{ formatValue(mergedOptions.ceil || 100) }}\n </span>\n </div>\n \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</div>" }]
|
|
9770
9765
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { value: [{
|
|
9771
9766
|
type: Input
|
|
9772
9767
|
}], highValue: [{
|