From 0e6fcde4404aefafae4855315769f3d6cd9ef2d9 Mon Sep 17 00:00:00 2001 From: GomezIvann Date: Mon, 31 Jan 2022 12:09:18 +0100 Subject: [PATCH] [Minor] Added types to Slider & updated docs --- .../slider-properties.component.html | 55 ++- .../lib/dxc-slider/dxc-slider.component.ts | 367 ++++++++++-------- 2 files changed, 241 insertions(+), 181 deletions(-) diff --git a/projects/dxc-ngx-cdk-site/src/app/components/examples/slider/properties/slider-properties/slider-properties.component.html b/projects/dxc-ngx-cdk-site/src/app/components/examples/slider/properties/slider-properties/slider-properties.component.html index 767e76758..163577e82 100644 --- a/projects/dxc-ngx-cdk-site/src/app/components/examples/slider/properties/slider-properties/slider-properties.component.html +++ b/projects/dxc-ngx-cdk-site/src/app/components/examples/slider/properties/slider-properties/slider-properties.component.html @@ -25,10 +25,23 @@ 1 The step interval between values available for selection. + + label: string + + Text to be placed above the slider. + + + helperText: string + + Helper text to be placed above the slider. + value: number - 0 - The selected value. + + + The selected value. If undefined, the component will be uncontrolled and + the value will be managed internally by the component. + marks: boolean @@ -61,35 +74,32 @@ If true, the component will be disabled. - labelFormatCallback: (value: number) => string | number + labelFormatCallback: function - Function used to format minimum and maximum labels. - - - tabIndexValue: number - 0 - Value of the tabindex + + This function will be used to format the labels displayed next to the + slider. The value will be passed as parameter and the function must return + the formatted value. + - valueChange: EventEmitter + onChange: EventEmitter - This function will be called when the slider changes its value, as it's - being dragged. The new value will be passed as a parameter when this - function is executed. + This event will emit in case the slider changes its value, as it's being + dragged. The new value will be passed as a parameter. onDragEnd: EventEmitter - This function will be called when the slider changes its value, but only - when the thumb is released. The new value will be passed as a parameter - when this function is executed. + This event will emit in case the slider changes its value, but only when + the thumb is released. The new value will be passed as a parameter. - margin: any (string | object) + margin: string | object Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | @@ -99,10 +109,13 @@ - size: string | object + size: string 'fillParent' - - Size of the component ('medium' | 'large' | 'fillParent' | 'fitContent'). - + Size of the component. + + + tabIndexValue: number + 0 + Value of the tabindex diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-slider/dxc-slider.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-slider/dxc-slider.component.ts index 68ce8007d..40ff4f49d 100644 --- a/projects/dxc-ngx-cdk/src/lib/dxc-slider/dxc-slider.component.ts +++ b/projects/dxc-ngx-cdk/src/lib/dxc-slider/dxc-slider.component.ts @@ -20,19 +20,46 @@ import { import { BackgroundProviderService } from "../background-provider/service/background-provider.service"; import { spaces } from "../variables"; +type Size = "medium" | "large" | "fillParent"; +type Space = + | "xxsmall" + | "xsmall" + | "small" + | "medium" + | "large" + | "xlarge" + | "xxlarge"; +type Margin = { + top?: Space; + bottom?: Space; + left?: Space; + right?: Space; +}; + @Component({ selector: "dxc-slider", templateUrl: "./dxc-slider.component.html", - providers: [CssUtils] + providers: [CssUtils], }) export class DxcSliderComponent implements OnInit, OnChanges { @HostBinding("class") className; @HostBinding("class.disabled") isDisabled: boolean = false; - //Default values + /** + * The minimum value available for selection. + */ @Input() minValue: number = 0; + /** + * The maximum value available for selection. + */ @Input() maxValue: number = 100; + /** + * The step interval between values available for selection. + */ @Input() step: number = 1; + /** + * Whether the min/max value labels should be displayed next to the slider. + */ @Input() get showLimitsValues(): boolean { return this._showLimitsValues; @@ -41,7 +68,9 @@ export class DxcSliderComponent implements OnInit, OnChanges { this._showLimitsValues = coerceBooleanProperty(value); } private _showLimitsValues = false; - + /** + * Whether the input element for displaying/controlling the slider value should be displayed next to the slider. + */ @Input() get showInput(): boolean { return this._showInput; @@ -50,11 +79,25 @@ export class DxcSliderComponent implements OnInit, OnChanges { this._showInput = coerceBooleanProperty(value); } private _showInput = false; - + /** + * The selected value. If undefined, the component will be uncontrolled and the value will be managed internally by the component. + */ @Input() value: number; + /** + * Name attribute of the input element. + */ @Input() name: string; + /** + * Text to be placed above the slider. + */ @Input() label: string; + /** + * Helper text to be placed above the slider. + */ @Input() helperText: string; + /** + * If true, the component will be disabled. + */ @Input() get disabled(): boolean { return this._disabled; @@ -63,17 +106,23 @@ export class DxcSliderComponent implements OnInit, OnChanges { this._disabled = coerceBooleanProperty(value); } private _disabled; - @Input() - get required(): boolean { - return this._required; - } - set required(value: boolean) { - this._required = coerceBooleanProperty(value); - } - private _required; - @Input() margin: any; - @Input() size: string = 'fillParent'; + /** + * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'). + * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes. + */ + @Input() margin: Space | Margin; + /** + * Size of the component. + */ + @Input() size: Size = "fillParent"; + /** + * This function will be used to format the labels displayed next to the slider. + * The value will be passed as parameter and the function must return the formatted value. + */ @Input() labelFormatCallback: (value: number) => string | number; + /** + * Value of the tabindex attribute. + */ @Input() get tabIndexValue(): number { return this._tabIndexValue; @@ -81,10 +130,17 @@ export class DxcSliderComponent implements OnInit, OnChanges { set tabIndexValue(value: number) { this._tabIndexValue = coerceNumberProperty(value); } - private _tabIndexValue; - - @Output() onDragEnd: EventEmitter = new EventEmitter(); - @Output() onChange: EventEmitter = new EventEmitter(); + private _tabIndexValue = 0; + /** + * This event will emit in case the slider changes its value, as it's being dragged. + * The new value will be passed as a parameter. + */ + @Output() onChange: EventEmitter = new EventEmitter(); + /** + * This event will emit in case the slider changes its value, but only when the thumb is released. + * The new value will be passed as a parameter. + */ + @Output() onDragEnd: EventEmitter = new EventEmitter(); tickInterval: any; renderedValue: number; @@ -106,9 +162,8 @@ export class DxcSliderComponent implements OnInit, OnChanges { value: 0, name: null, disabled: false, - required: false, margin: null, - size: 'fillParent', + size: "fillParent", tabIndexValue: 0, }); @@ -120,7 +175,7 @@ export class DxcSliderComponent implements OnInit, OnChanges { }; constructor( - @Self() private utils: CssUtils, + @Self() private utils: CssUtils, @Optional() public bgProviderService?: BackgroundProviderService ) { this.bgProviderService.$changeColor.subscribe((value) => { @@ -163,8 +218,8 @@ export class DxcSliderComponent implements OnInit, OnChanges { this.maxValueClass = `${this.getMaxLabelContainerClass(inputs)}`; } /** - * Executed while slider value moves or when user press a key in input - * @param $event + * Executed while slider value moves or when user press a key in input + * @param $event */ public valueChanged($event: any): void { let newValue = ($event.target ? $event.target.value : $event.value) * 1; @@ -182,8 +237,7 @@ export class DxcSliderComponent implements OnInit, OnChanges { } /** - * controlled dxc-input behaviour - * + * Controlled dxc-input behaviour * @param $event */ public inputValueChanged($event: any): void { @@ -198,166 +252,161 @@ export class DxcSliderComponent implements OnInit, OnChanges { } /** - * Eexecuted once the user has ended dragging + * Executed once the user has ended dragging * @param $event */ public mouseUp($event): void { this.onDragEnd.emit(this.renderedValue); } - calculateWidth(sizes, inputs) { - if (inputs.size === "fillParent") { - return css` - width: calc(${sizes[inputs.size]} - ${this.getMargin(inputs.margin, "left")} - ${this.getMargin(inputs.margin, "right")}); - `; - } - return css` - width: ${sizes[inputs.size]}; - `; + calculateWidth(sizes, inputs) { + if (inputs.size === "fillParent") { + return css` + width: calc( + ${sizes[inputs.size]} - ${this.getMargin(inputs.margin, "left")} - ${this.getMargin(inputs.margin, "right")} + ); + `; } + return css` + width: ${sizes[inputs.size]}; + `; + } private getMargin(paddingOrMargin, side) { if (paddingOrMargin && typeof paddingOrMargin === "object") { - return paddingOrMargin[side] && spaces[paddingOrMargin[side]] || '0px'; + return (paddingOrMargin[side] && spaces[paddingOrMargin[side]]) || "0px"; } return (paddingOrMargin && spaces[paddingOrMargin]) || "0px"; - } getDynamicStyle(inputs) { return css` + .container { + display: flex; + flex-direction: column; + ${this.calculateWidth(this.sizes, inputs)} + ${this.utils.getMargins(inputs.margin)} + } - .container{ - display: flex; - flex-direction: column; - ${this.calculateWidth(this.sizes, inputs)} - ${this.utils.getMargins(inputs.margin)} - } - - .sliderLabel{ - color: var(--slider-labelFontColor); - font-family: var(--slider-labelFontFamily); - font-size: var(--slider-labelFontSize); - font-style: var(--slider-labelFontStyle); - font-weight: var(--slider-labelFontWeight); - line-height: var(--slider-labelLineHeight); - - } - - .sliderHelperText{ - color: var(--slider-helperTextFontColor); - font-family: var(--slider-helperTextFontFamily); - font-size: var(--slider-helperTextFontSize); - font-style: var(--slider-helperTextFontstyle); - font-weight: var(--slider-helperTextFontWeight); - line-height: var(--slider-helperTextLineHeight); - } - - - .sliderContainer{ - display: flex; - height: 48px; - align-items: center; - - .mat-slider-has-ticks .mat-slider-wrapper::after { - height: var(--slider-tickSize); - border-left-width: 2px; - top: var(--slider-tickVerticalPosition); + .sliderLabel { + color: var(--slider-labelFontColor); + font-family: var(--slider-labelFontFamily); + font-size: var(--slider-labelFontSize); + font-style: var(--slider-labelFontStyle); + font-weight: var(--slider-labelFontWeight); + line-height: var(--slider-labelLineHeight); } - &.disabled { - color: var(--slider-disabledFontColor) !important; - cursor: not-allowed; - input { - cursor: not-allowed; - } + .sliderHelperText { + color: var(--slider-helperTextFontColor); + font-family: var(--slider-helperTextFontFamily); + font-size: var(--slider-helperTextFontSize); + font-style: var(--slider-helperTextFontstyle); + font-weight: var(--slider-helperTextFontWeight); + line-height: var(--slider-helperTextLineHeight); } - mat-slider { - flex-grow: 1; - padding: 0px; - .mat-slider-track-fill { - height: 100%; - } - .mat-slider-ticks-container { + + .sliderContainer { + display: flex; + height: 48px; + align-items: center; + + .mat-slider-has-ticks .mat-slider-wrapper::after { height: var(--slider-tickSize); + border-left-width: 2px; top: var(--slider-tickVerticalPosition); } - .mat-slider-track-wrapper { - top: var(--slider-lineVerticalPosition); - } - .mat-slider-track-wrapper, - .mat-slider-track-background, - .mat-slider-wrapper { - height: var(--slider-lineThickness); - } - .mat-slider-focus-ring { - background-color: transparent; - } - .mat-slider-thumb { - transform: none !important; - width: var(--slider-thumbWidth); - height: var(--slider-thumbHeight); - bottom: var(--slider-thumbVerticalPosition); - &:hover{ - width: calc(var(--slider-thumbWidth) + 4px); - height: calc(var(--slider-thumbHeight) + 4px); - bottom: calc(var(--slider-thumbVerticalPosition) - 2px); - background-color: var(--slider-hoverThumbBackgroundColor); - border-color: var( - --slider-hoverThumbBackgroundColor - ) !important; + + &.disabled { + color: var(--slider-disabledFontColor) !important; + cursor: not-allowed; + input { + cursor: not-allowed; } } - &:not(.mat-slider-disabled) { - .mat-slider-ticks { + mat-slider { + flex-grow: 1; + padding: 0px; + .mat-slider-track-fill { + height: 100%; + } + .mat-slider-ticks-container { height: var(--slider-tickSize); + top: var(--slider-tickVerticalPosition); } - &.mat-slider-sliding { - .mat-slider-thumb { - cursor: grabbing; - } + .mat-slider-track-wrapper { + top: var(--slider-lineVerticalPosition); } - &:focus:not(.mat-slider-sliding) { - .mat-slider-thumb { - transform: none; - outline: -webkit-focus-ring-color auto 2px; - outline-offset: 3px; - } - .mat-slider-focus-ring { - width: 0px; - height: 0px; - } + .mat-slider-track-wrapper, + .mat-slider-track-background, + .mat-slider-wrapper { + height: var(--slider-lineThickness); } - &.mat-slider-has-ticks { - .mat-slider-ticks { - opacity: 1 !important; - } + .mat-slider-focus-ring { + background-color: transparent; } - } - &.mat-slider-disabled { - pointer-events: none; .mat-slider-thumb { transform: none !important; - bottom: var(--slider-disabledThumbVerticalPosition); + width: var(--slider-thumbWidth); + height: var(--slider-thumbHeight); + bottom: var(--slider-thumbVerticalPosition); + &:hover { + width: calc(var(--slider-thumbWidth) + 4px); + height: calc(var(--slider-thumbHeight) + 4px); + bottom: calc(var(--slider-thumbVerticalPosition) - 2px); + background-color: var(--slider-hoverThumbBackgroundColor); + border-color: var(--slider-hoverThumbBackgroundColor) !important; + } } - .mat-slider-ticks { - height: var(--slider-tickSize); + &:not(.mat-slider-disabled) { + .mat-slider-ticks { + height: var(--slider-tickSize); + } + &.mat-slider-sliding { + .mat-slider-thumb { + cursor: grabbing; + } + } + &:focus:not(.mat-slider-sliding) { + .mat-slider-thumb { + transform: none; + outline: -webkit-focus-ring-color auto 2px; + outline-offset: 3px; + } + .mat-slider-focus-ring { + width: 0px; + height: 0px; + } + } + &.mat-slider-has-ticks { + .mat-slider-ticks { + opacity: 1 !important; + } + } } - .mat-slider-ticks-container { - top: var(--slider-disabledTickVerticalPosition); + &.mat-slider-disabled { + pointer-events: none; + .mat-slider-thumb { + transform: none !important; + bottom: var(--slider-disabledThumbVerticalPosition); + } + .mat-slider-ticks { + height: var(--slider-tickSize); + } + .mat-slider-ticks-container { + top: var(--slider-disabledTickVerticalPosition); + } } - } - &.cdk-focused, &.mat-slider-sliding { - .mat-slider-thumb { - width: calc(var(--slider-thumbWidth) + 4px); - height: calc(var(--slider-thumbWidth) + 4px); - bottom: calc(var(--slider-thumbVerticalPosition) - 2px); + &.cdk-focused, + &.mat-slider-sliding { + .mat-slider-thumb { + width: calc(var(--slider-thumbWidth) + 4px); + height: calc(var(--slider-thumbWidth) + 4px); + bottom: calc(var(--slider-thumbVerticalPosition) - 2px); + } } } } - } - - dxc-text-input { margin-left: 2rem; @@ -397,11 +446,11 @@ export class DxcSliderComponent implements OnInit, OnChanges { .mat-slider-thumb { background-color: var(--slider-thumbBackgroundColorOnDark); border-color: var(--slider-thumbBackgroundColorOnDark) !important; - &:hover{ + &:hover { background-color: var(--slider-hoverThumbBackgroundColorOnDark); - border-color: var( - --slider-hoverThumbBackgroundColorOnDark - ) !important; + border-color: var( + --slider-hoverThumbBackgroundColorOnDark + ) !important; } } .mat-slider-ticks { @@ -450,7 +499,9 @@ export class DxcSliderComponent implements OnInit, OnChanges { } .mat-slider-track-fill { transform: translateX(2px) scale3d(0.5, 1, 1) !important; - background-color: var(--slider-disabledTrackLineColorOnDark) !important; + background-color: var( + --slider-disabledTrackLineColorOnDark + ) !important; } .mat-slider-ticks { background-image: repeating-linear-gradient( @@ -497,17 +548,13 @@ export class DxcSliderComponent implements OnInit, OnChanges { &.mat-slider-sliding { .mat-slider-thumb { background-color: var(--slider-activeThumbBackgroundColor); - border-color: var( - --slider-activeThumbBackgroundColor - ) !important; + border-color: var(--slider-activeThumbBackgroundColor) !important; } } &:focus:not(.mat-slider-sliding) { .mat-slider-thumb { background-color: var(--slider-focusThumbBackgroundColor); - border-color: var( - --slider-focusThumbBackgroundColor - ) !important; + border-color: var(--slider-focusThumbBackgroundColor) !important; outline-color: var(--slider-focusColor); } } @@ -532,8 +579,8 @@ export class DxcSliderComponent implements OnInit, OnChanges { background-image: repeating-linear-gradient( to right, var(--slider-disabledTickBackgroundColor), - var(--slider-disabledTickBackgroundColor) - var(--slider-tickSize) var(--slider-tickSize), + var(--slider-disabledTickBackgroundColor) var(--slider-tickSize) + var(--slider-tickSize), transparent 2px, #e2141400 );