Skip to content

Commit

Permalink
fix(material-experimental/mdc-slider): keep value indicator within bo…
Browse files Browse the repository at this point in the history 
…unds (#24167)

(cherry picked from commit d9a1b81)
  • Loading branch information
@andrewseguin @wagnermaciel
andrewseguin authored and wagnermaciel committed Jan 6, 2022
1 parent e653bf0 commit be21308
Show file tree
Hide file tree
Showing 4 changed files with 691 additions and 667 deletions.
96 changes: 48 additions & 48 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@
"@types/google.maps": "^3.45.6",
"@types/youtube": "^0.0.42",
"core-js-bundle": "^3.8.2",
"material-components-web": "14.0.0-canary.7d8ea4624.0",
"material-components-web": "14.0.0-canary.c047f7c19.0",
"rxjs": "^6.6.7",
"rxjs-tslint-rules": "^4.33.1",
"tslib": "^2.3.0",
Expand Down Expand Up @@ -92,53 +92,53 @@
"@bazel/terser": "4.4.5",
"@bazel/typescript": "4.4.5",
"@firebase/app-types": "^0.6.1",
"@material/animation": "14.0.0-canary.7d8ea4624.0",
"@material/auto-init": "14.0.0-canary.7d8ea4624.0",
"@material/banner": "14.0.0-canary.7d8ea4624.0",
"@material/base": "14.0.0-canary.7d8ea4624.0",
"@material/button": "14.0.0-canary.7d8ea4624.0",
"@material/card": "14.0.0-canary.7d8ea4624.0",
"@material/checkbox": "14.0.0-canary.7d8ea4624.0",
"@material/chips": "14.0.0-canary.7d8ea4624.0",
"@material/circular-progress": "14.0.0-canary.7d8ea4624.0",
"@material/data-table": "14.0.0-canary.7d8ea4624.0",
"@material/density": "14.0.0-canary.7d8ea4624.0",
"@material/dialog": "14.0.0-canary.7d8ea4624.0",
"@material/dom": "14.0.0-canary.7d8ea4624.0",
"@material/drawer": "14.0.0-canary.7d8ea4624.0",
"@material/elevation": "14.0.0-canary.7d8ea4624.0",
"@material/fab": "14.0.0-canary.7d8ea4624.0",
"@material/feature-targeting": "14.0.0-canary.7d8ea4624.0",
"@material/floating-label": "14.0.0-canary.7d8ea4624.0",
"@material/form-field": "14.0.0-canary.7d8ea4624.0",
"@material/icon-button": "14.0.0-canary.7d8ea4624.0",
"@material/image-list": "14.0.0-canary.7d8ea4624.0",
"@material/layout-grid": "14.0.0-canary.7d8ea4624.0",
"@material/line-ripple": "14.0.0-canary.7d8ea4624.0",
"@material/linear-progress": "14.0.0-canary.7d8ea4624.0",
"@material/list": "14.0.0-canary.7d8ea4624.0",
"@material/menu": "14.0.0-canary.7d8ea4624.0",
"@material/menu-surface": "14.0.0-canary.7d8ea4624.0",
"@material/notched-outline": "14.0.0-canary.7d8ea4624.0",
"@material/radio": "14.0.0-canary.7d8ea4624.0",
"@material/ripple": "14.0.0-canary.7d8ea4624.0",
"@material/rtl": "14.0.0-canary.7d8ea4624.0",
"@material/segmented-button": "14.0.0-canary.7d8ea4624.0",
"@material/select": "14.0.0-canary.7d8ea4624.0",
"@material/shape": "14.0.0-canary.7d8ea4624.0",
"@material/slider": "14.0.0-canary.7d8ea4624.0",
"@material/snackbar": "14.0.0-canary.7d8ea4624.0",
"@material/switch": "14.0.0-canary.7d8ea4624.0",
"@material/tab": "14.0.0-canary.7d8ea4624.0",
"@material/tab-bar": "14.0.0-canary.7d8ea4624.0",
"@material/tab-indicator": "14.0.0-canary.7d8ea4624.0",
"@material/tab-scroller": "14.0.0-canary.7d8ea4624.0",
"@material/textfield": "14.0.0-canary.7d8ea4624.0",
"@material/theme": "14.0.0-canary.7d8ea4624.0",
"@material/tooltip": "14.0.0-canary.7d8ea4624.0",
"@material/top-app-bar": "14.0.0-canary.7d8ea4624.0",
"@material/touch-target": "14.0.0-canary.7d8ea4624.0",
"@material/typography": "14.0.0-canary.7d8ea4624.0",
"@material/animation": "14.0.0-canary.c047f7c19.0",
"@material/auto-init": "14.0.0-canary.c047f7c19.0",
"@material/banner": "14.0.0-canary.c047f7c19.0",
"@material/base": "14.0.0-canary.c047f7c19.0",
"@material/button": "14.0.0-canary.c047f7c19.0",
"@material/card": "14.0.0-canary.c047f7c19.0",
"@material/checkbox": "14.0.0-canary.c047f7c19.0",
"@material/chips": "14.0.0-canary.c047f7c19.0",
"@material/circular-progress": "14.0.0-canary.c047f7c19.0",
"@material/data-table": "14.0.0-canary.c047f7c19.0",
"@material/density": "14.0.0-canary.c047f7c19.0",
"@material/dialog": "14.0.0-canary.c047f7c19.0",
"@material/dom": "14.0.0-canary.c047f7c19.0",
"@material/drawer": "14.0.0-canary.c047f7c19.0",
"@material/elevation": "14.0.0-canary.c047f7c19.0",
"@material/fab": "14.0.0-canary.c047f7c19.0",
"@material/feature-targeting": "14.0.0-canary.c047f7c19.0",
"@material/floating-label": "14.0.0-canary.c047f7c19.0",
"@material/form-field": "14.0.0-canary.c047f7c19.0",
"@material/icon-button": "14.0.0-canary.c047f7c19.0",
"@material/image-list": "14.0.0-canary.c047f7c19.0",
"@material/layout-grid": "14.0.0-canary.c047f7c19.0",
"@material/line-ripple": "14.0.0-canary.c047f7c19.0",
"@material/linear-progress": "14.0.0-canary.c047f7c19.0",
"@material/list": "14.0.0-canary.c047f7c19.0",
"@material/menu": "14.0.0-canary.c047f7c19.0",
"@material/menu-surface": "14.0.0-canary.c047f7c19.0",
"@material/notched-outline": "14.0.0-canary.c047f7c19.0",
"@material/radio": "14.0.0-canary.c047f7c19.0",
"@material/ripple": "14.0.0-canary.c047f7c19.0",
"@material/rtl": "14.0.0-canary.c047f7c19.0",
"@material/segmented-button": "14.0.0-canary.c047f7c19.0",
"@material/select": "14.0.0-canary.c047f7c19.0",
"@material/shape": "14.0.0-canary.c047f7c19.0",
"@material/slider": "14.0.0-canary.c047f7c19.0",
"@material/snackbar": "14.0.0-canary.c047f7c19.0",
"@material/switch": "14.0.0-canary.c047f7c19.0",
"@material/tab": "14.0.0-canary.c047f7c19.0",
"@material/tab-bar": "14.0.0-canary.c047f7c19.0",
"@material/tab-indicator": "14.0.0-canary.c047f7c19.0",
"@material/tab-scroller": "14.0.0-canary.c047f7c19.0",
"@material/textfield": "14.0.0-canary.c047f7c19.0",
"@material/theme": "14.0.0-canary.c047f7c19.0",
"@material/tooltip": "14.0.0-canary.c047f7c19.0",
"@material/top-app-bar": "14.0.0-canary.c047f7c19.0",
"@material/touch-target": "14.0.0-canary.c047f7c19.0",
"@material/typography": "14.0.0-canary.c047f7c19.0",
"@octokit/rest": "18.3.5",
"@rollup/plugin-commonjs": "^21.0.0",
"@rollup/plugin-node-resolve": "^13.0.5",
Expand Down
2 changes: 1 addition & 1 deletion src/material-experimental/mdc-slider/slider-thumb.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="mdc-slider__value-indicator-container" *ngIf="discrete">
<div class="mdc-slider__value-indicator-container" *ngIf="discrete" #valueIndicatorContainer>
<div class="mdc-slider__value-indicator">
<span class="mdc-slider__value-indicator-text">{{valueIndicatorText}}</span>
</div>
Expand Down
26 changes: 25 additions & 1 deletion src/material-experimental/mdc-slider/slider.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,9 +104,13 @@ export class MatSliderVisualThumb implements AfterViewInit, OnDestroy {
/** The MatRipple for this slider thumb. */
@ViewChild(MatRipple) private readonly _ripple: MatRipple;

/** The slider thumb knob */
/** The slider thumb knob. */
@ViewChild('knob') _knob: ElementRef<HTMLElement>;

/** The slider thumb value indicator container. */
@ViewChild('valueIndicatorContainer')
_valueIndicatorContainer: ElementRef<HTMLElement>;

/** The slider input corresponding to this slider thumb. */
private _sliderInput: MatSliderThumb;

Expand Down Expand Up @@ -261,6 +265,14 @@ export class MatSliderVisualThumb implements AfterViewInit, OnDestroy {
_getKnob(): HTMLElement {
return this._knob.nativeElement;
}

/**
* Gets the native HTML element of the slider thumb value indicator
* container.
*/
_getValueIndicatorContainer(): HTMLElement {
return this._valueIndicatorContainer.nativeElement;
}
}

/**
Expand Down Expand Up @@ -868,6 +880,14 @@ export class MatSlider
return this._getThumb(thumbPosition)._getKnob();
}

/**
* Gets the slider value indicator container HTML element of the given thumb
* position.
*/
_getValueIndicatorContainerElement(thumbPosition: Thumb): HTMLElement {
return this._getThumb(thumbPosition)._getValueIndicatorContainer();
}

/**
* Sets the value indicator text of the given thumb position using the given value.
*
Expand Down Expand Up @@ -1066,6 +1086,10 @@ class SliderAdapter implements MDCSliderAdapter {
getBoundingClientRect = (): ClientRect => {
return this._delegate._elementRef.nativeElement.getBoundingClientRect();
};
getValueIndicatorContainerWidth = (thumbPosition: Thumb): number => {
return this._delegate._getValueIndicatorContainerElement(thumbPosition).getBoundingClientRect()
.width;
};
isRTL = (): boolean => {
return this._delegate._isRTL();
};
Expand Down
Loading

0 comments on commit be21308

Please sign in to comment.