carbon-components-angular 5.20.2 → 5.20.3
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.
- package/docs/documentation/components/Slider.html +157 -135
- package/docs/documentation/js/search/search_index.js +2 -2
- package/docs/documentation/modules/TimePickerModule/dependencies.svg +4 -4
- package/docs/documentation/modules/TimePickerModule.html +4 -4
- package/docs/documentation/modules/TimePickerSelectModule/dependencies.svg +44 -40
- package/docs/documentation/modules/TimePickerSelectModule.html +44 -40
- package/docs/documentation/modules/ToggleModule/dependencies.svg +41 -37
- package/docs/documentation/modules/ToggleModule.html +41 -37
- package/docs/documentation/modules/ToggletipModule/dependencies.svg +37 -37
- package/docs/documentation/modules/ToggletipModule.html +37 -37
- package/docs/documentation/modules/TooltipModule/dependencies.svg +28 -28
- package/docs/documentation/modules/TooltipModule.html +28 -28
- package/docs/documentation/modules/TreeviewModule/dependencies.svg +38 -38
- package/docs/documentation/modules/TreeviewModule.html +38 -38
- package/docs/documentation.json +65 -65
- package/docs/storybook/iframe.html +2 -2
- package/docs/storybook/{main.053e39e2.iframe.bundle.js → main.939e2f87.iframe.bundle.js} +1 -1
- package/docs/storybook/project.json +1 -1
- package/docs/storybook/{runtime~main.4d2d3399.iframe.bundle.js → runtime~main.a91352e8.iframe.bundle.js} +1 -1
- package/docs/storybook/{slider-slider-stories.476668e9.iframe.bundle.js → slider-slider-stories.f608c3ca.iframe.bundle.js} +1 -1
- package/esm2020/slider/slider.component.mjs +71 -49
- package/fesm2015/carbon-components-angular-slider.mjs +70 -48
- package/fesm2015/carbon-components-angular-slider.mjs.map +1 -1
- package/fesm2020/carbon-components-angular-slider.mjs +70 -48
- package/fesm2020/carbon-components-angular-slider.mjs.map +1 -1
- package/package.json +1 -1
- package/slider/slider.component.d.ts +4 -1
package/docs/documentation.json
CHANGED
|
@@ -48085,7 +48085,7 @@
|
|
|
48085
48085
|
},
|
|
48086
48086
|
{
|
|
48087
48087
|
"name": "Slider",
|
|
48088
|
-
"id": "component-Slider-
|
|
48088
|
+
"id": "component-Slider-dca469a8e54737811fa57b45f91389013897ba46fc691d12fe2a39b943d18681e35e894c948a39ab247a06ae54f3a37da00bb679681dea950c99cef2340686dc",
|
|
48089
48089
|
"file": "src/slider/slider.component.ts",
|
|
48090
48090
|
"encapsulation": [],
|
|
48091
48091
|
"entryComponents": [],
|
|
@@ -48099,7 +48099,7 @@
|
|
|
48099
48099
|
"selector": "cds-slider, ibm-slider",
|
|
48100
48100
|
"styleUrls": [],
|
|
48101
48101
|
"styles": [],
|
|
48102
|
-
"template": "<ng-container *ngIf=\"!skeleton; else skeletonTemplate\">\n\t<label\n\t\t*ngIf=\"label\"\n\t\t[for]=\"id\"\n\t\t[id]=\"labelId\"\n\t\tclass=\"cds--label\"\n\t\t[ngClass]=\"{'cds--label--disabled': disabled}\">\n\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t</label>\n\t<div class=\"cds--slider-container\">\n\t\t<label [id]=\"bottomRangeId\" class=\"cds--slider__range-label\">\n\t\t\t<ng-content select=\"[minLabel]\"></ng-content>\n\t\t</label>\n\t\t<div\n\t\t\tclass=\"cds--slider\"\n\t\t\t[ngClass]=\"{'cds--slider--disabled': disabled}\">\n\t\t\t<ng-container *ngIf=\"!isRange()\">\n\t\t\t\t<div\n\t\t\t\t\t#thumbs\n\t\t\t\t\trole=\"slider\"\n\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t[attr.aria-labelledby]=\"labelId\"\n\t\t\t\t\tclass=\"cds--slider__thumb\"\n\t\t\t\t\t
|
|
48102
|
+
"template": "<ng-container *ngIf=\"!skeleton; else skeletonTemplate\">\n\t<label\n\t\t*ngIf=\"label\"\n\t\t[for]=\"id\"\n\t\t[id]=\"labelId\"\n\t\tclass=\"cds--label\"\n\t\t[ngClass]=\"{'cds--label--disabled': disabled}\">\n\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t</label>\n\t<div class=\"cds--slider-container\">\n\t\t<label [id]=\"bottomRangeId\" class=\"cds--slider__range-label\">\n\t\t\t<ng-content select=\"[minLabel]\"></ng-content>\n\t\t</label>\n\t\t<div\n\t\t\tclass=\"cds--slider\"\n\t\t\t(click)=\"onClick($event)\"\n\t\t\t[ngClass]=\"{'cds--slider--disabled': disabled}\">\n\t\t\t<ng-container *ngIf=\"!isRange()\">\n\t\t\t\t<div class=\"cds--slider__thumb-wrapper\"\n\t\t\t\t\t[ngStyle]=\"{insetInlineStart: getFractionComplete(value) * 100 + '%'}\">\n\t\t\t\t\t<div\n\t\t\t\t\t\t#thumbs\n\t\t\t\t\t\trole=\"slider\"\n\t\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t\t[attr.aria-labelledby]=\"labelId\"\n\t\t\t\t\t\tclass=\"cds--slider__thumb\"\n\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t(mousedown)=\"onMouseDown($event)\"\n\t\t\t\t\t\t(keydown)=\"onKeyDown($event)\">\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</ng-container>\n\t\t\t<ng-container *ngIf=\"isRange()\">\n\t\t\t\t<div class=\"cds--slider__thumb-wrapper\"\n\t\t\t\t [ngStyle]=\"{insetInlineStart: getFractionComplete(thumb) * 100 + '%'}\"\n\t\t\t\t *ngFor=\"let thumb of value; let i = index; trackBy: trackThumbsBy\">\n\t\t\t\t\t<div\n\t\t\t\t\t\t#thumbs\n\t\t\t\t\t\trole=\"slider\"\n\t\t\t\t\t\t[id]=\"id + (i > 0 ? '-' + i : '')\"\n\t\t\t\t\t\t[attr.aria-labelledby]=\"labelId\"\n\t\t\t\t\t\tclass=\"cds--slider__thumb\"\n\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t(mousedown)=\"onMouseDown($event, i)\"\n\t\t\t\t\t\t(keydown)=\"onKeyDown($event, i)\">\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</ng-container>\n\t\t\t<div\n\t\t\t\t#track\n\t\t\t\tclass=\"cds--slider__track\">\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\t#filledTrack\n\t\t\t\tclass=\"cds--slider__filled-track\">\n\t\t\t</div>\n\t\t\t<input\n\t\t\t\t#range\n\t\t\t\taria-label=\"slider\"\n\t\t\t\tclass=\"cds--slider__input\"\n\t\t\t\ttype=\"range\"\n\t\t\t\t[step]=\"step\"\n\t\t\t\t[min]=\"min\"\n\t\t\t\t[max]=\"max\"\n\t\t\t\t[value]=\"value.toString()\">\n\t\t</div>\n\t\t<label [id]=\"topRangeId\" class=\"cds--slider__range-label\">\n\t\t\t<ng-content select=\"[maxLabel]\"></ng-content>\n\t\t</label>\n\t\t<ng-content select=\"input\"></ng-content>\n\t</div>\n</ng-container>\n\n<ng-template #skeletonTemplate>\n\t<label *ngIf=\"label\" class=\"cds--label cds--skeleton\"></label>\n\t<div class=\"cds--slider-container cds--skeleton\">\n\t\t<span class=\"cds--slider__range-label\"></span>\n\t\t<div class=\"cds--slider\">\n\t\t\t<div class=\"cds--slider__thumb\"></div>\n\t\t\t<div class=\"cds--slider__track\"></div>\n\t\t\t<div class=\"cds--slider__filled-track\"></div>\n\t\t</div>\n\t\t<span class=\"cds--slider__range-label\"></span>\n\t</div>\n</ng-template>\n\t",
|
|
48103
48103
|
"templateUrl": [],
|
|
48104
48104
|
"viewProviders": [],
|
|
48105
48105
|
"hostDirectives": [],
|
|
@@ -48111,7 +48111,7 @@
|
|
|
48111
48111
|
"deprecationMessage": "",
|
|
48112
48112
|
"rawdescription": "\nSet to `true` for a slider without arrow key interactions.",
|
|
48113
48113
|
"description": "<p>Set to <code>true</code> for a slider without arrow key interactions.</p>\n",
|
|
48114
|
-
"line":
|
|
48114
|
+
"line": 265,
|
|
48115
48115
|
"type": "boolean",
|
|
48116
48116
|
"decorators": []
|
|
48117
48117
|
},
|
|
@@ -48121,7 +48121,7 @@
|
|
|
48121
48121
|
"deprecationMessage": "",
|
|
48122
48122
|
"rawdescription": "\nDisables the range visually and functionally",
|
|
48123
48123
|
"description": "<p>Disables the range visually and functionally</p>\n",
|
|
48124
|
-
"line":
|
|
48124
|
+
"line": 267,
|
|
48125
48125
|
"type": "boolean",
|
|
48126
48126
|
"decorators": []
|
|
48127
48127
|
},
|
|
@@ -48132,7 +48132,7 @@
|
|
|
48132
48132
|
"deprecationMessage": "",
|
|
48133
48133
|
"rawdescription": "\nBase ID for the slider. The min and max labels get IDs `${this.id}-bottom-range` and `${this.id}-top-range` respectively",
|
|
48134
48134
|
"description": "<p>Base ID for the slider. The min and max labels get IDs <code>${this.id}-bottom-range</code> and <code>${this.id}-top-range</code> respectively</p>\n",
|
|
48135
|
-
"line":
|
|
48135
|
+
"line": 257,
|
|
48136
48136
|
"type": "string",
|
|
48137
48137
|
"decorators": []
|
|
48138
48138
|
},
|
|
@@ -48142,7 +48142,7 @@
|
|
|
48142
48142
|
"deprecationMessage": "",
|
|
48143
48143
|
"rawdescription": "\nSets the text inside the `label` tag",
|
|
48144
48144
|
"description": "<p>Sets the text inside the <code>label</code> tag</p>\n",
|
|
48145
|
-
"line":
|
|
48145
|
+
"line": 263,
|
|
48146
48146
|
"type": "string | TemplateRef<any>",
|
|
48147
48147
|
"decorators": []
|
|
48148
48148
|
},
|
|
@@ -48152,7 +48152,7 @@
|
|
|
48152
48152
|
"deprecationMessage": "",
|
|
48153
48153
|
"rawdescription": "\nThe upper bound of our range",
|
|
48154
48154
|
"description": "<p>The upper bound of our range</p>\n",
|
|
48155
|
-
"line":
|
|
48155
|
+
"line": 175,
|
|
48156
48156
|
"type": "number",
|
|
48157
48157
|
"decorators": []
|
|
48158
48158
|
},
|
|
@@ -48162,7 +48162,7 @@
|
|
|
48162
48162
|
"deprecationMessage": "",
|
|
48163
48163
|
"rawdescription": "\nThe lower bound of our range",
|
|
48164
48164
|
"description": "<p>The lower bound of our range</p>\n",
|
|
48165
|
-
"line":
|
|
48165
|
+
"line": 165,
|
|
48166
48166
|
"type": "number",
|
|
48167
48167
|
"decorators": []
|
|
48168
48168
|
},
|
|
@@ -48173,7 +48173,7 @@
|
|
|
48173
48173
|
"deprecationMessage": "",
|
|
48174
48174
|
"rawdescription": "\nValue used to \"multiply\" the `step` when using arrow keys to select values",
|
|
48175
48175
|
"description": "<p>Value used to "multiply" the <code>step</code> when using arrow keys to select values</p>\n",
|
|
48176
|
-
"line":
|
|
48176
|
+
"line": 259,
|
|
48177
48177
|
"type": "number",
|
|
48178
48178
|
"decorators": []
|
|
48179
48179
|
},
|
|
@@ -48184,7 +48184,7 @@
|
|
|
48184
48184
|
"deprecationMessage": "",
|
|
48185
48185
|
"rawdescription": "\nSet to `true` for a loading slider",
|
|
48186
48186
|
"description": "<p>Set to <code>true</code> for a loading slider</p>\n",
|
|
48187
|
-
"line":
|
|
48187
|
+
"line": 261,
|
|
48188
48188
|
"type": "boolean",
|
|
48189
48189
|
"decorators": []
|
|
48190
48190
|
},
|
|
@@ -48195,7 +48195,7 @@
|
|
|
48195
48195
|
"deprecationMessage": "",
|
|
48196
48196
|
"rawdescription": "\nThe interval for our range",
|
|
48197
48197
|
"description": "<p>The interval for our range</p>\n",
|
|
48198
|
-
"line":
|
|
48198
|
+
"line": 186,
|
|
48199
48199
|
"type": "number",
|
|
48200
48200
|
"decorators": []
|
|
48201
48201
|
},
|
|
@@ -48205,7 +48205,7 @@
|
|
|
48205
48205
|
"deprecationMessage": "",
|
|
48206
48206
|
"rawdescription": "\nSet the initial value. Available for two way binding",
|
|
48207
48207
|
"description": "<p>Set the initial value. Available for two way binding</p>\n",
|
|
48208
|
-
"line":
|
|
48208
|
+
"line": 188,
|
|
48209
48209
|
"type": "any",
|
|
48210
48210
|
"decorators": []
|
|
48211
48211
|
}
|
|
@@ -48218,7 +48218,7 @@
|
|
|
48218
48218
|
"deprecationMessage": "",
|
|
48219
48219
|
"rawdescription": "\nEmits every time a new value is selected",
|
|
48220
48220
|
"description": "<p>Emits every time a new value is selected</p>\n",
|
|
48221
|
-
"line":
|
|
48221
|
+
"line": 280,
|
|
48222
48222
|
"type": "EventEmitter<number | []>"
|
|
48223
48223
|
}
|
|
48224
48224
|
],
|
|
@@ -48231,7 +48231,7 @@
|
|
|
48231
48231
|
"type": "",
|
|
48232
48232
|
"optional": false,
|
|
48233
48233
|
"description": "",
|
|
48234
|
-
"line":
|
|
48234
|
+
"line": 289,
|
|
48235
48235
|
"modifierKind": [
|
|
48236
48236
|
123
|
|
48237
48237
|
]
|
|
@@ -48243,7 +48243,7 @@
|
|
|
48243
48243
|
"type": "ElementRef",
|
|
48244
48244
|
"optional": false,
|
|
48245
48245
|
"description": "",
|
|
48246
|
-
"line":
|
|
48246
|
+
"line": 285,
|
|
48247
48247
|
"decorators": [
|
|
48248
48248
|
{
|
|
48249
48249
|
"name": "ViewChild",
|
|
@@ -48262,7 +48262,7 @@
|
|
|
48262
48262
|
"type": "number",
|
|
48263
48263
|
"optional": false,
|
|
48264
48264
|
"description": "",
|
|
48265
|
-
"line":
|
|
48265
|
+
"line": 291,
|
|
48266
48266
|
"modifierKind": [
|
|
48267
48267
|
123
|
|
48268
48268
|
]
|
|
@@ -48275,7 +48275,7 @@
|
|
|
48275
48275
|
"type": "",
|
|
48276
48276
|
"optional": false,
|
|
48277
48277
|
"description": "",
|
|
48278
|
-
"line":
|
|
48278
|
+
"line": 281,
|
|
48279
48279
|
"decorators": [
|
|
48280
48280
|
{
|
|
48281
48281
|
"name": "HostBinding",
|
|
@@ -48294,7 +48294,7 @@
|
|
|
48294
48294
|
"type": "",
|
|
48295
48295
|
"optional": false,
|
|
48296
48296
|
"description": "",
|
|
48297
|
-
"line":
|
|
48297
|
+
"line": 288,
|
|
48298
48298
|
"modifierKind": [
|
|
48299
48299
|
123
|
|
48300
48300
|
]
|
|
@@ -48307,7 +48307,7 @@
|
|
|
48307
48307
|
"type": "function",
|
|
48308
48308
|
"optional": false,
|
|
48309
48309
|
"description": "<p>Callback to notify the model when our input has been touched</p>\n",
|
|
48310
|
-
"line":
|
|
48310
|
+
"line": 351,
|
|
48311
48311
|
"rawdescription": "\nCallback to notify the model when our input has been touched"
|
|
48312
48312
|
},
|
|
48313
48313
|
{
|
|
@@ -48318,7 +48318,7 @@
|
|
|
48318
48318
|
"type": "",
|
|
48319
48319
|
"optional": false,
|
|
48320
48320
|
"description": "<p>Send changes back to the model</p>\n",
|
|
48321
|
-
"line":
|
|
48321
|
+
"line": 343,
|
|
48322
48322
|
"rawdescription": "\nSend changes back to the model"
|
|
48323
48323
|
},
|
|
48324
48324
|
{
|
|
@@ -48328,7 +48328,7 @@
|
|
|
48328
48328
|
"type": "ElementRef",
|
|
48329
48329
|
"optional": false,
|
|
48330
48330
|
"description": "",
|
|
48331
|
-
"line":
|
|
48331
|
+
"line": 286,
|
|
48332
48332
|
"decorators": [
|
|
48333
48333
|
{
|
|
48334
48334
|
"name": "ViewChild",
|
|
@@ -48346,7 +48346,7 @@
|
|
|
48346
48346
|
"type": "QueryList<ElementRef>",
|
|
48347
48347
|
"optional": false,
|
|
48348
48348
|
"description": "",
|
|
48349
|
-
"line":
|
|
48349
|
+
"line": 282,
|
|
48350
48350
|
"decorators": [
|
|
48351
48351
|
{
|
|
48352
48352
|
"name": "ViewChildren",
|
|
@@ -48365,7 +48365,7 @@
|
|
|
48365
48365
|
"type": "",
|
|
48366
48366
|
"optional": false,
|
|
48367
48367
|
"description": "",
|
|
48368
|
-
"line":
|
|
48368
|
+
"line": 290,
|
|
48369
48369
|
"modifierKind": [
|
|
48370
48370
|
123
|
|
48371
48371
|
]
|
|
@@ -48377,7 +48377,7 @@
|
|
|
48377
48377
|
"type": "ElementRef",
|
|
48378
48378
|
"optional": false,
|
|
48379
48379
|
"description": "",
|
|
48380
|
-
"line":
|
|
48380
|
+
"line": 284,
|
|
48381
48381
|
"decorators": [
|
|
48382
48382
|
{
|
|
48383
48383
|
"name": "ViewChild",
|
|
@@ -48403,7 +48403,7 @@
|
|
|
48403
48403
|
"optional": false,
|
|
48404
48404
|
"returnType": "any",
|
|
48405
48405
|
"typeParameters": [],
|
|
48406
|
-
"line":
|
|
48406
|
+
"line": 392,
|
|
48407
48407
|
"deprecated": false,
|
|
48408
48408
|
"deprecationMessage": "",
|
|
48409
48409
|
"rawdescription": "\nConverts a given \"real\" value to a px value we can update the view with",
|
|
@@ -48433,7 +48433,7 @@
|
|
|
48433
48433
|
"optional": false,
|
|
48434
48434
|
"returnType": "number",
|
|
48435
48435
|
"typeParameters": [],
|
|
48436
|
-
"line":
|
|
48436
|
+
"line": 381,
|
|
48437
48437
|
"deprecated": false,
|
|
48438
48438
|
"deprecationMessage": "",
|
|
48439
48439
|
"rawdescription": "\nConverts a given px value to a \"real\" value in our range",
|
|
@@ -48471,7 +48471,7 @@
|
|
|
48471
48471
|
"optional": false,
|
|
48472
48472
|
"returnType": "void",
|
|
48473
48473
|
"typeParameters": [],
|
|
48474
|
-
"line":
|
|
48474
|
+
"line": 425,
|
|
48475
48475
|
"deprecated": false,
|
|
48476
48476
|
"deprecationMessage": "",
|
|
48477
48477
|
"rawdescription": "\n\nDecrements the value by the step value, or the step value multiplied by the `multiplier` argument.\n\n",
|
|
@@ -48479,8 +48479,8 @@
|
|
|
48479
48479
|
"jsdoctags": [
|
|
48480
48480
|
{
|
|
48481
48481
|
"name": {
|
|
48482
|
-
"pos":
|
|
48483
|
-
"end":
|
|
48482
|
+
"pos": 12171,
|
|
48483
|
+
"end": 12181,
|
|
48484
48484
|
"flags": 8421376,
|
|
48485
48485
|
"modifierFlagsCache": 0,
|
|
48486
48486
|
"transformFlags": 0,
|
|
@@ -48492,8 +48492,8 @@
|
|
|
48492
48492
|
"deprecationMessage": "",
|
|
48493
48493
|
"defaultValue": "1",
|
|
48494
48494
|
"tagName": {
|
|
48495
|
-
"pos":
|
|
48496
|
-
"end":
|
|
48495
|
+
"pos": 12162,
|
|
48496
|
+
"end": 12170,
|
|
48497
48497
|
"flags": 8421376,
|
|
48498
48498
|
"modifierFlagsCache": 0,
|
|
48499
48499
|
"transformFlags": 0,
|
|
@@ -48527,7 +48527,7 @@
|
|
|
48527
48527
|
"optional": false,
|
|
48528
48528
|
"returnType": "number",
|
|
48529
48529
|
"typeParameters": [],
|
|
48530
|
-
"line":
|
|
48530
|
+
"line": 366,
|
|
48531
48531
|
"deprecated": false,
|
|
48532
48532
|
"deprecationMessage": "",
|
|
48533
48533
|
"rawdescription": "\n\nReturns the amount of \"completeness\" of a value as a fraction of the total track width\n",
|
|
@@ -48565,7 +48565,7 @@
|
|
|
48565
48565
|
"optional": false,
|
|
48566
48566
|
"returnType": "void",
|
|
48567
48567
|
"typeParameters": [],
|
|
48568
|
-
"line":
|
|
48568
|
+
"line": 415,
|
|
48569
48569
|
"deprecated": false,
|
|
48570
48570
|
"deprecationMessage": "",
|
|
48571
48571
|
"rawdescription": "\n\nIncrements the value by the step value, or the step value multiplied by the `multiplier` argument.\n\n",
|
|
@@ -48573,8 +48573,8 @@
|
|
|
48573
48573
|
"jsdoctags": [
|
|
48574
48574
|
{
|
|
48575
48575
|
"name": {
|
|
48576
|
-
"pos":
|
|
48577
|
-
"end":
|
|
48576
|
+
"pos": 11816,
|
|
48577
|
+
"end": 11826,
|
|
48578
48578
|
"flags": 8421376,
|
|
48579
48579
|
"modifierFlagsCache": 0,
|
|
48580
48580
|
"transformFlags": 0,
|
|
@@ -48586,8 +48586,8 @@
|
|
|
48586
48586
|
"deprecationMessage": "",
|
|
48587
48587
|
"defaultValue": "1",
|
|
48588
48588
|
"tagName": {
|
|
48589
|
-
"pos":
|
|
48590
|
-
"end":
|
|
48589
|
+
"pos": 11807,
|
|
48590
|
+
"end": 11815,
|
|
48591
48591
|
"flags": 8421376,
|
|
48592
48592
|
"modifierFlagsCache": 0,
|
|
48593
48593
|
"transformFlags": 0,
|
|
@@ -48614,7 +48614,7 @@
|
|
|
48614
48614
|
"optional": false,
|
|
48615
48615
|
"returnType": "boolean",
|
|
48616
48616
|
"typeParameters": [],
|
|
48617
|
-
"line":
|
|
48617
|
+
"line": 433,
|
|
48618
48618
|
"deprecated": false,
|
|
48619
48619
|
"deprecationMessage": "",
|
|
48620
48620
|
"rawdescription": "\n\nDetermines if the slider is in range mode.\n",
|
|
@@ -48633,7 +48633,7 @@
|
|
|
48633
48633
|
"optional": false,
|
|
48634
48634
|
"returnType": "boolean",
|
|
48635
48635
|
"typeParameters": [],
|
|
48636
|
-
"line":
|
|
48636
|
+
"line": 548,
|
|
48637
48637
|
"deprecated": false,
|
|
48638
48638
|
"deprecationMessage": "",
|
|
48639
48639
|
"modifierKind": [
|
|
@@ -48670,7 +48670,7 @@
|
|
|
48670
48670
|
"optional": false,
|
|
48671
48671
|
"returnType": "void",
|
|
48672
48672
|
"typeParameters": [],
|
|
48673
|
-
"line":
|
|
48673
|
+
"line": 448,
|
|
48674
48674
|
"deprecated": false,
|
|
48675
48675
|
"deprecationMessage": "",
|
|
48676
48676
|
"rawdescription": "\nChange handler for the optional input",
|
|
@@ -48709,11 +48709,11 @@
|
|
|
48709
48709
|
"optional": false,
|
|
48710
48710
|
"returnType": "void",
|
|
48711
48711
|
"typeParameters": [],
|
|
48712
|
-
"line":
|
|
48712
|
+
"line": 457,
|
|
48713
48713
|
"deprecated": false,
|
|
48714
48714
|
"deprecationMessage": "",
|
|
48715
|
-
"rawdescription": "\nHandles clicks on the
|
|
48716
|
-
"description": "<p>Handles clicks on the
|
|
48715
|
+
"rawdescription": "\n\nHandles clicks on the slider, and setting the value to it's \"real\" equivalent.\nWill assign the value to the closest thumb if in range mode.\n",
|
|
48716
|
+
"description": "<p>Handles clicks on the slider, and setting the value to it's "real" equivalent.\nWill assign the value to the closest thumb if in range mode.</p>\n",
|
|
48717
48717
|
"jsdoctags": [
|
|
48718
48718
|
{
|
|
48719
48719
|
"name": "event",
|
|
@@ -48738,7 +48738,7 @@
|
|
|
48738
48738
|
"optional": false,
|
|
48739
48739
|
"returnType": "void",
|
|
48740
48740
|
"typeParameters": [],
|
|
48741
|
-
"line":
|
|
48741
|
+
"line": 475,
|
|
48742
48742
|
"deprecated": false,
|
|
48743
48743
|
"deprecationMessage": "",
|
|
48744
48744
|
"rawdescription": "\nFocus handler for the optional input",
|
|
@@ -48774,7 +48774,7 @@
|
|
|
48774
48774
|
"optional": false,
|
|
48775
48775
|
"returnType": "void",
|
|
48776
48776
|
"typeParameters": [],
|
|
48777
|
-
"line":
|
|
48777
|
+
"line": 532,
|
|
48778
48778
|
"deprecated": false,
|
|
48779
48779
|
"deprecationMessage": "",
|
|
48780
48780
|
"rawdescription": "\n\nCalls `incrementValue` for ArrowRight and ArrowUp, `decrementValue` for ArrowLeft and ArrowDown.\n\n",
|
|
@@ -48821,7 +48821,7 @@
|
|
|
48821
48821
|
"optional": false,
|
|
48822
48822
|
"returnType": "void",
|
|
48823
48823
|
"typeParameters": [],
|
|
48824
|
-
"line":
|
|
48824
|
+
"line": 514,
|
|
48825
48825
|
"deprecated": false,
|
|
48826
48826
|
"deprecationMessage": "",
|
|
48827
48827
|
"rawdescription": "\n\nEnables the `onMouseMove` handler\n\n",
|
|
@@ -48861,7 +48861,7 @@
|
|
|
48861
48861
|
"optional": false,
|
|
48862
48862
|
"returnType": "void",
|
|
48863
48863
|
"typeParameters": [],
|
|
48864
|
-
"line":
|
|
48864
|
+
"line": 480,
|
|
48865
48865
|
"deprecated": false,
|
|
48866
48866
|
"deprecationMessage": "",
|
|
48867
48867
|
"rawdescription": "\nMouse move handler. Responsible for updating the value and visual selection based on mouse movement",
|
|
@@ -48884,7 +48884,7 @@
|
|
|
48884
48884
|
"optional": false,
|
|
48885
48885
|
"returnType": "void",
|
|
48886
48886
|
"typeParameters": [],
|
|
48887
|
-
"line":
|
|
48887
|
+
"line": 523,
|
|
48888
48888
|
"deprecated": false,
|
|
48889
48889
|
"deprecationMessage": "",
|
|
48890
48890
|
"rawdescription": "\nDisables the `onMouseMove` handler",
|
|
@@ -48903,7 +48903,7 @@
|
|
|
48903
48903
|
"optional": false,
|
|
48904
48904
|
"returnType": "void",
|
|
48905
48905
|
"typeParameters": [],
|
|
48906
|
-
"line":
|
|
48906
|
+
"line": 346,
|
|
48907
48907
|
"deprecated": false,
|
|
48908
48908
|
"deprecationMessage": "",
|
|
48909
48909
|
"rawdescription": "\nRegister a change propagation function for `ControlValueAccessor`",
|
|
@@ -48933,7 +48933,7 @@
|
|
|
48933
48933
|
"optional": false,
|
|
48934
48934
|
"returnType": "void",
|
|
48935
48935
|
"typeParameters": [],
|
|
48936
|
-
"line":
|
|
48936
|
+
"line": 354,
|
|
48937
48937
|
"deprecated": false,
|
|
48938
48938
|
"deprecationMessage": "",
|
|
48939
48939
|
"rawdescription": "\nRegister a callback to notify when our input has been touched",
|
|
@@ -48963,7 +48963,7 @@
|
|
|
48963
48963
|
"optional": false,
|
|
48964
48964
|
"returnType": "string",
|
|
48965
48965
|
"typeParameters": [],
|
|
48966
|
-
"line":
|
|
48966
|
+
"line": 376,
|
|
48967
48967
|
"deprecated": false,
|
|
48968
48968
|
"deprecationMessage": "",
|
|
48969
48969
|
"rawdescription": "\nHelper function to return the CSS transform `scaleX` function",
|
|
@@ -48999,7 +48999,7 @@
|
|
|
48999
48999
|
"optional": false,
|
|
49000
49000
|
"returnType": "number",
|
|
49001
49001
|
"typeParameters": [],
|
|
49002
|
-
"line":
|
|
49002
|
+
"line": 338,
|
|
49003
49003
|
"deprecated": false,
|
|
49004
49004
|
"deprecationMessage": "",
|
|
49005
49005
|
"jsdoctags": [
|
|
@@ -49029,7 +49029,7 @@
|
|
|
49029
49029
|
"optional": false,
|
|
49030
49030
|
"returnType": "void",
|
|
49031
49031
|
"typeParameters": [],
|
|
49032
|
-
"line":
|
|
49032
|
+
"line": 441,
|
|
49033
49033
|
"deprecated": false,
|
|
49034
49034
|
"deprecationMessage": "",
|
|
49035
49035
|
"rawdescription": "\n\nRange mode only.\nUpdates the track width to span from the low thumb to the high thumb\n",
|
|
@@ -49048,7 +49048,7 @@
|
|
|
49048
49048
|
"optional": false,
|
|
49049
49049
|
"returnType": "void",
|
|
49050
49050
|
"typeParameters": [],
|
|
49051
|
-
"line":
|
|
49051
|
+
"line": 359,
|
|
49052
49052
|
"deprecated": false,
|
|
49053
49053
|
"deprecationMessage": "",
|
|
49054
49054
|
"rawdescription": "\nReceives a value from the model",
|
|
@@ -49074,7 +49074,7 @@
|
|
|
49074
49074
|
"defaultValue": "true",
|
|
49075
49075
|
"deprecated": false,
|
|
49076
49076
|
"deprecationMessage": "",
|
|
49077
|
-
"line":
|
|
49077
|
+
"line": 281,
|
|
49078
49078
|
"type": "boolean",
|
|
49079
49079
|
"decorators": []
|
|
49080
49080
|
}
|
|
@@ -49085,7 +49085,7 @@
|
|
|
49085
49085
|
"description": "<p>Used to select from ranges of values. <a href=\"https://www.carbondesignsystem.com/components/slider/usage\">See here</a> for usage information.</p>\n<p>Get started with importing the module:</p>\n<div><pre class=\"line-numbers\"><code class=\"language-typescript\">import { SkeletonModule } from 'carbon-components-angular';</code></pre></div><p>The simplest possible slider usage looks something like:</p>\n<div><pre class=\"line-numbers\"><code class=\"language-html\"> <cds-slider></cds-slider></code></pre></div><p>That will render a slider without labels or alternative value input. Labels can be provided by\nelements with <code>[minLabel]</code> and <code>[maxLabel]</code> attributes, and an <code>input</code> (may use the <code>ibmInput</code> directive) can be supplied\nfor use as an alternative value field.</p>\n<p>ex:</p>\n<div><pre class=\"line-numbers\"><code class=\"language-html\"><!-- Full example -->\n<cds-slider>\n <span minLabel>0GB</span>\n <span maxLabel>100GB</span>\n <input/>\n</cds-slider>\n\n<!-- with just an input -->\n<cds-slider>\n <input/>\n</cds-slider>\n\n<!-- with just one label -->\n<cds-slider>\n <span maxLabel>Maximum</span>\n</cds-slider></code></pre></div><p>Slider supports <code>NgModel</code> by default, as well as two way binding to the <code>value</code> input.</p>\n<p><a href=\"../../?path=/story/components-slider--advanced\">See demo</a></p>\n",
|
|
49086
49086
|
"rawdescription": "\n\nUsed to select from ranges of values. [See here](https://www.carbondesignsystem.com/components/slider/usage) for usage information.\n\nGet started with importing the module:\n\n```typescript\nimport { SkeletonModule } from 'carbon-components-angular';\n```\n\nThe simplest possible slider usage looks something like:\n\n```html\n\t<cds-slider></cds-slider>\n```\n\nThat will render a slider without labels or alternative value input. Labels can be provided by\nelements with `[minLabel]` and `[maxLabel]` attributes, and an `input` (may use the `ibmInput` directive) can be supplied\nfor use as an alternative value field.\n\nex:\n\n```html\n<!-- Full example -->\n<cds-slider>\n\t\t<span minLabel>0GB</span>\n\t\t<span maxLabel>100GB</span>\n\t\t<input/>\n</cds-slider>\n\n<!-- with just an input -->\n<cds-slider>\n\t\t<input/>\n</cds-slider>\n\n<!-- with just one label -->\n<cds-slider>\n\t\t<span maxLabel>Maximum</span>\n</cds-slider>\n```\n\nSlider supports `NgModel` by default, as well as two way binding to the `value` input.\n\n[See demo](../../?path=/story/components-slider--advanced)\n",
|
|
49087
49087
|
"type": "component",
|
|
49088
|
-
"sourceCode": "import {\n\tComponent,\n\tHostBinding,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tAfterViewInit,\n\tViewChild,\n\tElementRef,\n\tTemplateRef,\n\tViewChildren,\n\tQueryList,\n\tChangeDetectorRef\n} from \"@angular/core\";\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from \"@angular/forms\";\nimport { EventService } from \"carbon-components-angular/utils\";\n\n/**\n * Used to select from ranges of values. [See here](https://www.carbondesignsystem.com/components/slider/usage) for usage information.\n *\n * Get started with importing the module:\n *\n * ```typescript\n * import { SkeletonModule } from 'carbon-components-angular';\n * ```\n *\n * The simplest possible slider usage looks something like:\n *\n * ```html\n *\t<cds-slider></cds-slider>\n * ```\n *\n * That will render a slider without labels or alternative value input. Labels can be provided by\n * elements with `[minLabel]` and `[maxLabel]` attributes, and an `input` (may use the `ibmInput` directive) can be supplied\n * for use as an alternative value field.\n *\n * ex:\n *\n * ```html\n * <!-- Full example -->\n * <cds-slider>\n *\t\t<span minLabel>0GB</span>\n *\t\t<span maxLabel>100GB</span>\n *\t\t<input/>\n * </cds-slider>\n *\n * <!-- with just an input -->\n * <cds-slider>\n *\t\t<input/>\n * </cds-slider>\n *\n * <!-- with just one label -->\n * <cds-slider>\n *\t\t<span maxLabel>Maximum</span>\n * </cds-slider>\n * ```\n *\n * Slider supports `NgModel` by default, as well as two way binding to the `value` input.\n *\n * [See demo](../../?path=/story/components-slider--advanced)\n */\n@Component({\n\tselector: \"cds-slider, ibm-slider\",\n\ttemplate: `\n\t\t<ng-container *ngIf=\"!skeleton; else skeletonTemplate\">\n\t\t\t<label\n\t\t\t\t*ngIf=\"label\"\n\t\t\t\t[for]=\"id\"\n\t\t\t\t[id]=\"labelId\"\n\t\t\t\tclass=\"cds--label\"\n\t\t\t\t[ngClass]=\"{'cds--label--disabled': disabled}\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t\t</label>\n\t\t\t<div class=\"cds--slider-container\">\n\t\t\t\t<label [id]=\"bottomRangeId\" class=\"cds--slider__range-label\">\n\t\t\t\t\t<ng-content select=\"[minLabel]\"></ng-content>\n\t\t\t\t</label>\n\t\t\t\t<div\n\t\t\t\t\tclass=\"cds--slider\"\n\t\t\t\t\t[ngClass]=\"{'cds--slider--disabled': disabled}\">\n\t\t\t\t\t<ng-container *ngIf=\"!isRange()\">\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t#thumbs\n\t\t\t\t\t\t\trole=\"slider\"\n\t\t\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t\t\t[attr.aria-labelledby]=\"labelId\"\n\t\t\t\t\t\t\tclass=\"cds--slider__thumb\"\n\t\t\t\t\t\t\t[ngStyle]=\"{left: getFractionComplete(value) * 100 + '%'}\"\n\t\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t\t(mousedown)=\"onMouseDown($event)\"\n\t\t\t\t\t\t\t(keydown)=\"onKeyDown($event)\">\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</ng-container>\n\t\t\t\t\t<ng-container *ngIf=\"isRange()\">\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t#thumbs\n\t\t\t\t\t\t\t*ngFor=\"let thumb of value; let i = index; trackBy: trackThumbsBy\"\n\t\t\t\t\t\t\trole=\"slider\"\n\t\t\t\t\t\t\t[id]=\"id + (i > 0 ? '-' + i : '')\"\n\t\t\t\t\t\t\t[attr.aria-labelledby]=\"labelId\"\n\t\t\t\t\t\t\tclass=\"cds--slider__thumb\"\n\t\t\t\t\t\t\t[ngStyle]=\"{left: getFractionComplete(thumb) * 100 + '%'}\"\n\t\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t\t(mousedown)=\"onMouseDown($event, i)\"\n\t\t\t\t\t\t\t(keydown)=\"onKeyDown($event, i)\">\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</ng-container>\n\t\t\t\t\t<div\n\t\t\t\t\t\t#track\n\t\t\t\t\t\tclass=\"cds--slider__track\"\n\t\t\t\t\t\t(click)=\"onClick($event)\">\n\t\t\t\t\t</div>\n\t\t\t\t\t<div\n\t\t\t\t\t\t#filledTrack\n\t\t\t\t\t\tclass=\"cds--slider__filled-track\">\n\t\t\t\t\t</div>\n\t\t\t\t\t<input\n\t\t\t\t\t\t#range\n\t\t\t\t\t\taria-label=\"slider\"\n\t\t\t\t\t\tclass=\"cds--slider__input\"\n\t\t\t\t\t\ttype=\"range\"\n\t\t\t\t\t\t[step]=\"step\"\n\t\t\t\t\t\t[min]=\"min\"\n\t\t\t\t\t\t[max]=\"max\"\n\t\t\t\t\t\t[value]=\"value.toString()\">\n\t\t\t\t</div>\n\t\t\t\t<label [id]=\"topRangeId\" class=\"cds--slider__range-label\">\n\t\t\t\t\t<ng-content select=\"[maxLabel]\"></ng-content>\n\t\t\t\t</label>\n\t\t\t\t<ng-content select=\"input\"></ng-content>\n\t\t\t</div>\n\t\t</ng-container>\n\n\t\t<ng-template #skeletonTemplate>\n\t\t\t<label *ngIf=\"label\" class=\"cds--label cds--skeleton\"></label>\n\t\t\t<div class=\"cds--slider-container cds--skeleton\">\n\t\t\t\t<span class=\"cds--slider__range-label\"></span>\n\t\t\t\t<div class=\"cds--slider\">\n\t\t\t\t\t<div class=\"cds--slider__thumb\"></div>\n\t\t\t\t\t<div class=\"cds--slider__track\"></div>\n\t\t\t\t\t<div class=\"cds--slider__filled-track\"></div>\n\t\t\t\t</div>\n\t\t\t\t<span class=\"cds--slider__range-label\"></span>\n\t\t\t</div>\n\t\t</ng-template>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: Slider,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class Slider implements AfterViewInit, ControlValueAccessor {\n\t/** Used to generate unique IDs */\n\tprivate static count = 0;\n\n\t/** The lower bound of our range */\n\t@Input() set min(v) {\n\t\tif (!v) { return; }\n\t\tthis._min = v;\n\t\t// force the component to update\n\t\tthis.value = this.value;\n\t}\n\tget min() {\n\t\treturn this._min;\n\t}\n\t/** The upper bound of our range */\n\t@Input() set max(v) {\n\t\tif (!v) { return; }\n\t\tthis._max = v;\n\t\t// force the component to update\n\t\tthis.value = this.value;\n\t}\n\n\tget max() {\n\t\treturn this._max;\n\t}\n\t/** The interval for our range */\n\t@Input() step = 1;\n\t/** Set the initial value. Available for two way binding */\n\t@Input() set value(v) {\n\t\tif (!v) {\n\t\t\tv = [this.min];\n\t\t}\n\n\t\tif (typeof v === \"number\" || typeof v === \"string\") {\n\t\t\tv = [Number(v)];\n\t\t}\n\n\t\tif (v[0] < this.min) {\n\t\t\tv[0] = this.min;\n\t\t}\n\n\t\tif (v[0] > this.max) {\n\t\t\tv[0] = this.max;\n\t\t}\n\n\t\tif (this.isRange()) {\n\t\t\tif (this._previousValue[0] !== v[0]) { // left moved\n\t\t\t\tif (v[0] > v[1] - this.step) {\n\t\t\t\t\t// stop the left handle if surpassing the right one\n\t\t\t\t\tv[0] = v[1] - this.step;\n\t\t\t\t} else if (v[0] > this.max) {\n\t\t\t\t\tv[0] = this.max;\n\t\t\t\t} else if (v[0] < this.min) {\n\t\t\t\t\tv[0] = this.min;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (this._previousValue[1] !== v[1]) { // right moved\n\t\t\t\tif (v[1] > this.max) {\n\t\t\t\t\tv[1] = this.max;\n\t\t\t\t} else if (v[1] < this._value[0] + this.step) {\n\t\t\t\t\t// stop the right handle if surpassing the left one\n\t\t\t\t\tv[1] = this._value[0] + this.step;\n\t\t\t\t} else if (v[1] < this.min) {\n\t\t\t\t\tv[1] = this.min;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tthis._previousValue = [...this._value]; // store a copy, enable detection which handle moved\n\t\tthis._value = [...v]; // triggers change detection when ngModel value is an array (for range)\n\n\t\tif (this.isRange() && this.filledTrack) {\n\t\t\tthis.updateTrackRangeWidth();\n\t\t} else if (this.filledTrack) {\n\t\t\tthis.filledTrack.nativeElement.style.transform = `translate(0%, -50%) ${this.scaleX(this.getFractionComplete(v[0]))}`;\n\t\t}\n\n\t\tif (this.inputs && this.inputs.length) {\n\t\t\tthis.inputs.forEach((input, index) => {\n\t\t\t\tinput.value = this._value[index].toString();\n\t\t\t});\n\t\t}\n\n\t\tconst valueToEmit = this.isRange() ? v : v[0];\n\t\tthis.propagateChange(valueToEmit);\n\t\tthis.valueChange.emit(valueToEmit);\n\t}\n\n\tget value() {\n\t\tif (this.isRange()) {\n\t\t\treturn this._value;\n\t\t}\n\t\treturn this._value[0];\n\t}\n\n\t/** Base ID for the slider. The min and max labels get IDs `${this.id}-bottom-range` and `${this.id}-top-range` respectively */\n\t@Input() id = `slider-${Slider.count++}`;\n\t/** Value used to \"multiply\" the `step` when using arrow keys to select values */\n\t@Input() shiftMultiplier = 4;\n\t/** Set to `true` for a loading slider */\n\t@Input() skeleton = false;\n\t/** Sets the text inside the `label` tag */\n\t@Input() label: string | TemplateRef<any>;\n\t/** Set to `true` for a slider without arrow key interactions. */\n\t@Input() disableArrowKeys = false;\n\t/** Disables the range visually and functionally */\n\t@Input() set disabled(v) {\n\t\tthis._disabled = v;\n\t\t// for some reason `this.input` never exists here, so we have to query for it here too\n\t\tconst inputs = this.getInputs();\n\t\tif (inputs && inputs.length > 0) {\n\t\t\tinputs.forEach(input => input.disabled = v);\n\t\t}\n\t}\n\n\tget disabled() {\n\t\treturn this._disabled;\n\t}\n\t/** Emits every time a new value is selected */\n\t@Output() valueChange: EventEmitter<number | number[]> = new EventEmitter();\n\t@HostBinding(\"class.cds--form-item\") hostClass = true;\n\t@ViewChildren(\"thumbs\") thumbs: QueryList<ElementRef>;\n\n\t@ViewChild(\"track\") track: ElementRef;\n\t@ViewChild(\"filledTrack\") filledTrack: ElementRef;\n\t@ViewChild(\"range\") range: ElementRef;\n\n\tpublic labelId = `${this.id}-label`;\n\tpublic bottomRangeId = `${this.id}-bottom-range`;\n\tpublic topRangeId = `${this.id}-top-range`;\n\tpublic fractionComplete = 0;\n\n\tprotected isMouseDown = false;\n\tprotected inputs: HTMLInputElement[];\n\tprotected _min = 0;\n\tprotected _max = 100;\n\tprotected _value = [this.min];\n\tprotected _previousValue = [this.min];\n\tprotected _disabled = false;\n\tprotected _focusedThumbIndex = 0;\n\n\tconstructor(\n\t\tprotected elementRef: ElementRef,\n\t\tprotected eventService: EventService,\n\t\tprivate changeDetection: ChangeDetectorRef\n\t) {}\n\n\tngAfterViewInit() {\n\t\t// bind mousemove and mouseup to the document so we don't have issues tracking the mouse\n\t\tthis.eventService.onDocument(\"mousemove\", this.onMouseMove.bind(this));\n\t\tthis.eventService.onDocument(\"mouseup\", this.onMouseUp.bind(this));\n\n\t\t// apply any values we got from before the view initialized\n\t\tthis.changeDetection.detectChanges();\n\n\t\t// TODO: ontouchstart/ontouchmove/ontouchend\n\n\t\t// set up the optional input\n\t\tthis.inputs = this.getInputs();\n\t\tif (this.inputs && this.inputs.length > 0) {\n\t\t\tthis.inputs.forEach((input, index) => {\n\t\t\t\tinput.type = \"number\";\n\t\t\t\tinput.classList.add(\"cds--slider-text-input\");\n\t\t\t\tinput.classList.add(\"cds--text-input\");\n\t\t\t\tinput.setAttribute(\"aria-labelledby\", `${this.bottomRangeId} ${this.topRangeId}`);\n\n\t\t\t\tinput.value = index < this._value.length ? this._value[index].toString() : this.max.toString();\n\t\t\t\t// bind events on our optional input\n\t\t\t\tthis.eventService.on(input, \"change\", event => this.onChange(event, index));\n\n\t\t\t\tif (index === 0) {\n\t\t\t\t\tthis.eventService.on(input, \"focus\", this.onFocus.bind(this));\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\t}\n\n\ttrackThumbsBy(index: number, item: any) {\n\t\treturn index;\n\t}\n\n\t/** Send changes back to the model */\n\tpropagateChange = (_: any) => { };\n\n\t/** Register a change propagation function for `ControlValueAccessor` */\n\tregisterOnChange(fn: any) {\n\t\tthis.propagateChange = fn;\n\t}\n\n\t/** Callback to notify the model when our input has been touched */\n\tonTouched: () => any = () => { };\n\n\t/** Register a callback to notify when our input has been touched */\n\tregisterOnTouched(fn: any) {\n\t\tthis.onTouched = fn;\n\t}\n\n\t/** Receives a value from the model */\n\twriteValue(v: any) {\n\t\tthis.value = v;\n\t}\n\n\t/**\n\t * Returns the amount of \"completeness\" of a value as a fraction of the total track width\n\t */\n\tgetFractionComplete(value: number) {\n\t\tif (!this.track) {\n\t\t\treturn 0;\n\t\t}\n\n\t\tconst trackWidth = this.track.nativeElement.getBoundingClientRect().width;\n\t\treturn this.convertToPx(value) / trackWidth;\n\t}\n\n\t/** Helper function to return the CSS transform `scaleX` function */\n\tscaleX(complete) {\n\t\treturn `scaleX(${complete})`;\n\t}\n\n\t/** Converts a given px value to a \"real\" value in our range */\n\tconvertToValue(pxAmount) {\n\t\t// basic concept borrowed from carbon-components\n\t\t// https://github.com/carbon-design-system/carbon/blob/43bf3abdc2f8bdaa38aa84e0f733adde1e1e8894/src/components/slider/slider.js#L147-L151\n\t\tconst range = this.max - this.min;\n\t\tconst trackWidth = this.track.nativeElement.getBoundingClientRect().width;\n\t\tconst unrounded = pxAmount / trackWidth;\n\t\tconst rounded = Math.round((range * unrounded) / this.step) * this.step;\n\t\treturn rounded + this.min;\n\t}\n\n\t/** Converts a given \"real\" value to a px value we can update the view with */\n\tconvertToPx(value) {\n\t\tif (!this.track) {\n\t\t\treturn 0;\n\t\t}\n\n\t\tconst trackWidth = this.track.nativeElement.getBoundingClientRect().width;\n\t\tif (value >= this.max) {\n\t\t\treturn trackWidth;\n\t\t}\n\n\t\tif (value <= this.min) {\n\t\t\treturn 0;\n\t\t}\n\n\t\t// account for value shifting by subtracting min from value and max\n\t\treturn Math.round(trackWidth * ((value - this.min) / (this.max - this.min)));\n\t}\n\n\t/**\n\t * Increments the value by the step value, or the step value multiplied by the `multiplier` argument.\n\t *\n\t * @argument multiplier Defaults to `1`, multiplied with the step value.\n\t */\n\tincrementValue(multiplier = 1, index = 0) {\n\t\tthis._value[index] = this._value[index] + (this.step * multiplier);\n\t\tthis.value = this.value; // run the setter\n\t}\n\n\t/**\n\t * Decrements the value by the step value, or the step value multiplied by the `multiplier` argument.\n\t *\n\t * @argument multiplier Defaults to `1`, multiplied with the step value.\n\t */\n\tdecrementValue(multiplier = 1, index = 0) {\n\t\tthis._value[index] = this._value[index] - (this.step * multiplier);\n\t\tthis.value = this.value; // run the setter\n\t}\n\n\t/**\n\t * Determines if the slider is in range mode.\n\t */\n\tisRange(): boolean {\n\t\treturn this._value.length > 1;\n\t}\n\n\t/**\n\t * Range mode only.\n\t * Updates the track width to span from the low thumb to the high thumb\n\t */\n\tupdateTrackRangeWidth() {\n\t\tconst fraction = this.getFractionComplete(this._value[0]);\n\t\tconst fraction2 = this.getFractionComplete(this._value[1]);\n\t\tthis.filledTrack.nativeElement.style.transform = `translate(${fraction * 100}%, -50%) ${this.scaleX(fraction2 - fraction)}`;\n\t}\n\n\t/** Change handler for the optional input */\n\tonChange(event, index) {\n\t\tthis._value[index] = Number(event.target.value);\n\t\tthis.value = this.value;\n\t}\n\n\t/** Handles clicks on the range track, and setting the value to it's \"real\" equivalent */\n\tonClick(event) {\n\t\tif (this.disabled) { return; }\n\t\tconst trackLeft = this.track.nativeElement.getBoundingClientRect().left;\n\t\tthis._value[0] = this.convertToValue(event.clientX - trackLeft);\n\t\tthis.value = this.value;\n\t}\n\n\t/** Focus handler for the optional input */\n\tonFocus({target}) {\n\t\ttarget.select();\n\t}\n\n\t/** Mouse move handler. Responsible for updating the value and visual selection based on mouse movement */\n\tonMouseMove(event) {\n\t\tif (this.disabled || !this.isMouseDown) { return; }\n\t\tconst track = this.track.nativeElement.getBoundingClientRect();\n\n\t\tlet value;\n\n\t\tif (\n\t\t\tevent.clientX - track.left <= track.width\n\t\t\t&& event.clientX - track.left >= 0\n\t\t) {\n\t\t\tvalue = this.convertToValue(event.clientX - track.left);\n\t\t}\n\n\t\t// if the mouse is beyond the max, set the value to `max`\n\t\tif (event.clientX - track.left > track.width) {\n\t\t\tvalue = this.max;\n\t\t}\n\n\t\t// if the mouse is below the min, set the value to `min`\n\t\tif (event.clientX - track.left < 0) {\n\t\t\tvalue = this.min;\n\t\t}\n\n\t\tif (value !== undefined) {\n\t\t\tthis._value[this._focusedThumbIndex] = value;\n\t\t\tthis.value = this.value;\n\t\t}\n\t}\n\n\t/**\n\t * Enables the `onMouseMove` handler\n\t *\n\t * @param {boolean} thumb If true then `thumb` is clicked down, otherwise `thumb2` is clicked down.\n\t */\n\tonMouseDown(event, index = 0) {\n\t\tevent.preventDefault();\n\t\tif (this.disabled) { return; }\n\t\tthis._focusedThumbIndex = index;\n\t\tthis.thumbs.toArray()[index].nativeElement.focus();\n\t\tthis.isMouseDown = true;\n\t}\n\n\t/** Disables the `onMouseMove` handler */\n\tonMouseUp() {\n\t\tthis.isMouseDown = false;\n\t}\n\n\t/**\n\t * Calls `incrementValue` for ArrowRight and ArrowUp, `decrementValue` for ArrowLeft and ArrowDown.\n\t *\n\t * @param {boolean} thumb If true then `thumb` is pressed down, otherwise `thumb2` is pressed down.\n\t */\n\tonKeyDown(event: KeyboardEvent, index = 0) {\n\t\tif (this.disableArrowKeys) {\n\t\t\treturn;\n\t\t}\n\t\tconst multiplier = event.shiftKey ? this.shiftMultiplier : 1;\n\t\tif (event.key === \"ArrowLeft\" || event.key === \"ArrowDown\") {\n\t\t\tthis.decrementValue(multiplier, index);\n\t\t\tthis.thumbs.toArray()[index].nativeElement.focus();\n\t\t\tevent.preventDefault();\n\t\t} else if (event.key === \"ArrowRight\" || event.key === \"ArrowUp\") {\n\t\t\tthis.incrementValue(multiplier, index);\n\t\t\tthis.thumbs.toArray()[index].nativeElement.focus();\n\t\t\tevent.preventDefault();\n\t\t}\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\t/** Get optional input fields */\n\tprotected getInputs(): HTMLInputElement[] {\n\t\treturn this.elementRef.nativeElement.querySelectorAll(\"input:not([type=range])\");\n\t}\n}\n",
|
|
49088
|
+
"sourceCode": "import {\n\tComponent,\n\tHostBinding,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tAfterViewInit,\n\tViewChild,\n\tElementRef,\n\tTemplateRef,\n\tViewChildren,\n\tQueryList,\n\tChangeDetectorRef\n} from \"@angular/core\";\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from \"@angular/forms\";\nimport { EventService } from \"carbon-components-angular/utils\";\n\n/**\n * Used to select from ranges of values. [See here](https://www.carbondesignsystem.com/components/slider/usage) for usage information.\n *\n * Get started with importing the module:\n *\n * ```typescript\n * import { SkeletonModule } from 'carbon-components-angular';\n * ```\n *\n * The simplest possible slider usage looks something like:\n *\n * ```html\n *\t<cds-slider></cds-slider>\n * ```\n *\n * That will render a slider without labels or alternative value input. Labels can be provided by\n * elements with `[minLabel]` and `[maxLabel]` attributes, and an `input` (may use the `ibmInput` directive) can be supplied\n * for use as an alternative value field.\n *\n * ex:\n *\n * ```html\n * <!-- Full example -->\n * <cds-slider>\n *\t\t<span minLabel>0GB</span>\n *\t\t<span maxLabel>100GB</span>\n *\t\t<input/>\n * </cds-slider>\n *\n * <!-- with just an input -->\n * <cds-slider>\n *\t\t<input/>\n * </cds-slider>\n *\n * <!-- with just one label -->\n * <cds-slider>\n *\t\t<span maxLabel>Maximum</span>\n * </cds-slider>\n * ```\n *\n * Slider supports `NgModel` by default, as well as two way binding to the `value` input.\n *\n * [See demo](../../?path=/story/components-slider--advanced)\n */\n@Component({\n\tselector: \"cds-slider, ibm-slider\",\n\ttemplate: `\n\t\t<ng-container *ngIf=\"!skeleton; else skeletonTemplate\">\n\t\t\t<label\n\t\t\t\t*ngIf=\"label\"\n\t\t\t\t[for]=\"id\"\n\t\t\t\t[id]=\"labelId\"\n\t\t\t\tclass=\"cds--label\"\n\t\t\t\t[ngClass]=\"{'cds--label--disabled': disabled}\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t\t</label>\n\t\t\t<div class=\"cds--slider-container\">\n\t\t\t\t<label [id]=\"bottomRangeId\" class=\"cds--slider__range-label\">\n\t\t\t\t\t<ng-content select=\"[minLabel]\"></ng-content>\n\t\t\t\t</label>\n\t\t\t\t<div\n\t\t\t\t\tclass=\"cds--slider\"\n\t\t\t\t\t(click)=\"onClick($event)\"\n\t\t\t\t\t[ngClass]=\"{'cds--slider--disabled': disabled}\">\n\t\t\t\t\t<ng-container *ngIf=\"!isRange()\">\n\t\t\t\t\t\t<div class=\"cds--slider__thumb-wrapper\"\n\t\t\t\t\t\t\t[ngStyle]=\"{insetInlineStart: getFractionComplete(value) * 100 + '%'}\">\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t#thumbs\n\t\t\t\t\t\t\t\trole=\"slider\"\n\t\t\t\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t\t\t\t[attr.aria-labelledby]=\"labelId\"\n\t\t\t\t\t\t\t\tclass=\"cds--slider__thumb\"\n\t\t\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t\t\t(mousedown)=\"onMouseDown($event)\"\n\t\t\t\t\t\t\t\t(keydown)=\"onKeyDown($event)\">\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</ng-container>\n\t\t\t\t\t<ng-container *ngIf=\"isRange()\">\n\t\t\t\t\t\t<div class=\"cds--slider__thumb-wrapper\"\n\t\t\t\t\t\t [ngStyle]=\"{insetInlineStart: getFractionComplete(thumb) * 100 + '%'}\"\n\t\t\t\t\t\t *ngFor=\"let thumb of value; let i = index; trackBy: trackThumbsBy\">\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t#thumbs\n\t\t\t\t\t\t\t\trole=\"slider\"\n\t\t\t\t\t\t\t\t[id]=\"id + (i > 0 ? '-' + i : '')\"\n\t\t\t\t\t\t\t\t[attr.aria-labelledby]=\"labelId\"\n\t\t\t\t\t\t\t\tclass=\"cds--slider__thumb\"\n\t\t\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t\t\t(mousedown)=\"onMouseDown($event, i)\"\n\t\t\t\t\t\t\t\t(keydown)=\"onKeyDown($event, i)\">\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</ng-container>\n\t\t\t\t\t<div\n\t\t\t\t\t\t#track\n\t\t\t\t\t\tclass=\"cds--slider__track\">\n\t\t\t\t\t</div>\n\t\t\t\t\t<div\n\t\t\t\t\t\t#filledTrack\n\t\t\t\t\t\tclass=\"cds--slider__filled-track\">\n\t\t\t\t\t</div>\n\t\t\t\t\t<input\n\t\t\t\t\t\t#range\n\t\t\t\t\t\taria-label=\"slider\"\n\t\t\t\t\t\tclass=\"cds--slider__input\"\n\t\t\t\t\t\ttype=\"range\"\n\t\t\t\t\t\t[step]=\"step\"\n\t\t\t\t\t\t[min]=\"min\"\n\t\t\t\t\t\t[max]=\"max\"\n\t\t\t\t\t\t[value]=\"value.toString()\">\n\t\t\t\t</div>\n\t\t\t\t<label [id]=\"topRangeId\" class=\"cds--slider__range-label\">\n\t\t\t\t\t<ng-content select=\"[maxLabel]\"></ng-content>\n\t\t\t\t</label>\n\t\t\t\t<ng-content select=\"input\"></ng-content>\n\t\t\t</div>\n\t\t</ng-container>\n\n\t\t<ng-template #skeletonTemplate>\n\t\t\t<label *ngIf=\"label\" class=\"cds--label cds--skeleton\"></label>\n\t\t\t<div class=\"cds--slider-container cds--skeleton\">\n\t\t\t\t<span class=\"cds--slider__range-label\"></span>\n\t\t\t\t<div class=\"cds--slider\">\n\t\t\t\t\t<div class=\"cds--slider__thumb\"></div>\n\t\t\t\t\t<div class=\"cds--slider__track\"></div>\n\t\t\t\t\t<div class=\"cds--slider__filled-track\"></div>\n\t\t\t\t</div>\n\t\t\t\t<span class=\"cds--slider__range-label\"></span>\n\t\t\t</div>\n\t\t</ng-template>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: Slider,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class Slider implements AfterViewInit, ControlValueAccessor {\n\t/** Used to generate unique IDs */\n\tprivate static count = 0;\n\n\t/** The lower bound of our range */\n\t@Input() set min(v) {\n\t\tif (!v) { return; }\n\t\tthis._min = v;\n\t\t// force the component to update\n\t\tthis.value = this.value;\n\t}\n\tget min() {\n\t\treturn this._min;\n\t}\n\t/** The upper bound of our range */\n\t@Input() set max(v) {\n\t\tif (!v) { return; }\n\t\tthis._max = v;\n\t\t// force the component to update\n\t\tthis.value = this.value;\n\t}\n\n\tget max() {\n\t\treturn this._max;\n\t}\n\t/** The interval for our range */\n\t@Input() step = 1;\n\t/** Set the initial value. Available for two way binding */\n\t@Input() set value(v) {\n\t\tif (!v) {\n\t\t\tv = [this.min];\n\t\t}\n\n\t\tif (typeof v === \"number\" || typeof v === \"string\") {\n\t\t\tv = [Number(v)];\n\t\t}\n\n\t\tif (v[0] < this.min) {\n\t\t\tv[0] = this.min;\n\t\t}\n\n\t\tif (v[0] > this.max) {\n\t\t\tv[0] = this.max;\n\t\t}\n\n\t\tif (this.isRange()) {\n\t\t\tif (this._previousValue[0] !== v[0]) { // left moved\n\t\t\t\tif (v[0] > v[1] - this.step) {\n\t\t\t\t\t// stop the left handle if surpassing the right one\n\t\t\t\t\tv[0] = v[1] - this.step;\n\t\t\t\t} else if (v[0] > this.max) {\n\t\t\t\t\tv[0] = this.max;\n\t\t\t\t} else if (v[0] < this.min) {\n\t\t\t\t\tv[0] = this.min;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (this._previousValue[1] !== v[1]) { // right moved\n\t\t\t\tif (v[1] > this.max) {\n\t\t\t\t\tv[1] = this.max;\n\t\t\t\t} else if (v[1] < this._value[0] + this.step) {\n\t\t\t\t\t// stop the right handle if surpassing the left one\n\t\t\t\t\tv[1] = this._value[0] + this.step;\n\t\t\t\t} else if (v[1] < this.min) {\n\t\t\t\t\tv[1] = this.min;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tthis._previousValue = [...this._value]; // store a copy, enable detection which handle moved\n\t\tthis._value = [...v]; // triggers change detection when ngModel value is an array (for range)\n\n\t\tif (this.isRange() && this.filledTrack) {\n\t\t\tthis.updateTrackRangeWidth();\n\t\t} else if (this.filledTrack) {\n\t\t\tthis.filledTrack.nativeElement.style.transform = `translate(0%, -50%) ${this.scaleX(this.getFractionComplete(v[0]))}`;\n\t\t}\n\n\t\tif (this.inputs && this.inputs.length) {\n\t\t\tthis.inputs.forEach((input, index) => {\n\t\t\t\tinput.value = this._value[index].toString();\n\t\t\t});\n\t\t}\n\n\t\tconst valueToEmit = this.isRange() ? v : v[0];\n\t\tthis.propagateChange(valueToEmit);\n\t\tthis.valueChange.emit(valueToEmit);\n\t}\n\n\tget value() {\n\t\tif (this.isRange()) {\n\t\t\treturn this._value;\n\t\t}\n\t\treturn this._value[0];\n\t}\n\n\t/** Base ID for the slider. The min and max labels get IDs `${this.id}-bottom-range` and `${this.id}-top-range` respectively */\n\t@Input() id = `slider-${Slider.count++}`;\n\t/** Value used to \"multiply\" the `step` when using arrow keys to select values */\n\t@Input() shiftMultiplier = 4;\n\t/** Set to `true` for a loading slider */\n\t@Input() skeleton = false;\n\t/** Sets the text inside the `label` tag */\n\t@Input() label: string | TemplateRef<any>;\n\t/** Set to `true` for a slider without arrow key interactions. */\n\t@Input() disableArrowKeys = false;\n\t/** Disables the range visually and functionally */\n\t@Input() set disabled(v) {\n\t\tthis._disabled = v;\n\t\t// for some reason `this.input` never exists here, so we have to query for it here too\n\t\tconst inputs = this.getInputs();\n\t\tif (inputs && inputs.length > 0) {\n\t\t\tinputs.forEach(input => input.disabled = v);\n\t\t}\n\t}\n\n\tget disabled() {\n\t\treturn this._disabled;\n\t}\n\t/** Emits every time a new value is selected */\n\t@Output() valueChange: EventEmitter<number | number[]> = new EventEmitter();\n\t@HostBinding(\"class.cds--form-item\") hostClass = true;\n\t@ViewChildren(\"thumbs\") thumbs: QueryList<ElementRef>;\n\n\t@ViewChild(\"track\") track: ElementRef;\n\t@ViewChild(\"filledTrack\") filledTrack: ElementRef;\n\t@ViewChild(\"range\") range: ElementRef;\n\n\tpublic labelId = `${this.id}-label`;\n\tpublic bottomRangeId = `${this.id}-bottom-range`;\n\tpublic topRangeId = `${this.id}-top-range`;\n\tpublic fractionComplete = 0;\n\n\tprotected isMouseDown = false;\n\tprotected inputs: HTMLInputElement[];\n\tprotected _min = 0;\n\tprotected _max = 100;\n\tprotected _value = [this.min];\n\tprotected _previousValue = [this.min];\n\tprotected _disabled = false;\n\tprotected _focusedThumbIndex = 0;\n\n\tconstructor(\n\t\tprotected elementRef: ElementRef,\n\t\tprotected eventService: EventService,\n\t\tprivate changeDetection: ChangeDetectorRef\n\t) {}\n\n\tngAfterViewInit() {\n\t\t// bind mousemove and mouseup to the document so we don't have issues tracking the mouse\n\t\tthis.eventService.onDocument(\"mousemove\", this.onMouseMove.bind(this));\n\t\tthis.eventService.onDocument(\"mouseup\", this.onMouseUp.bind(this));\n\n\t\t// apply any values we got from before the view initialized\n\t\tthis.changeDetection.detectChanges();\n\n\t\t// TODO: ontouchstart/ontouchmove/ontouchend\n\n\t\t// set up the optional input\n\t\tthis.inputs = this.getInputs();\n\t\tif (this.inputs && this.inputs.length > 0) {\n\t\t\tthis.inputs.forEach((input, index) => {\n\t\t\t\tinput.type = \"number\";\n\t\t\t\tinput.classList.add(\"cds--slider-text-input\");\n\t\t\t\tinput.classList.add(\"cds--text-input\");\n\t\t\t\tinput.setAttribute(\"aria-labelledby\", `${this.bottomRangeId} ${this.topRangeId}`);\n\n\t\t\t\tinput.value = index < this._value.length ? this._value[index].toString() : this.max.toString();\n\t\t\t\t// bind events on our optional input\n\t\t\t\tthis.eventService.on(input, \"change\", event => this.onChange(event, index));\n\n\t\t\t\tif (index === 0) {\n\t\t\t\t\tthis.eventService.on(input, \"focus\", this.onFocus.bind(this));\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\t}\n\n\ttrackThumbsBy(index: number, item: any) {\n\t\treturn index;\n\t}\n\n\t/** Send changes back to the model */\n\tpropagateChange = (_: any) => { };\n\n\t/** Register a change propagation function for `ControlValueAccessor` */\n\tregisterOnChange(fn: any) {\n\t\tthis.propagateChange = fn;\n\t}\n\n\t/** Callback to notify the model when our input has been touched */\n\tonTouched: () => any = () => { };\n\n\t/** Register a callback to notify when our input has been touched */\n\tregisterOnTouched(fn: any) {\n\t\tthis.onTouched = fn;\n\t}\n\n\t/** Receives a value from the model */\n\twriteValue(v: any) {\n\t\tthis.value = v;\n\t}\n\n\t/**\n\t * Returns the amount of \"completeness\" of a value as a fraction of the total track width\n\t */\n\tgetFractionComplete(value: number) {\n\t\tif (!this.track) {\n\t\t\treturn 0;\n\t\t}\n\n\t\tconst trackWidth = this.track.nativeElement.getBoundingClientRect().width;\n\t\treturn this.convertToPx(value) / trackWidth;\n\t}\n\n\t/** Helper function to return the CSS transform `scaleX` function */\n\tscaleX(complete) {\n\t\treturn `scaleX(${complete})`;\n\t}\n\n\t/** Converts a given px value to a \"real\" value in our range */\n\tconvertToValue(pxAmount) {\n\t\t// basic concept borrowed from carbon-components\n\t\t// https://github.com/carbon-design-system/carbon/blob/43bf3abdc2f8bdaa38aa84e0f733adde1e1e8894/src/components/slider/slider.js#L147-L151\n\t\tconst range = this.max - this.min;\n\t\tconst trackWidth = this.track.nativeElement.getBoundingClientRect().width;\n\t\tconst unrounded = pxAmount / trackWidth;\n\t\tconst rounded = Math.round((range * unrounded) / this.step) * this.step;\n\t\treturn rounded + this.min;\n\t}\n\n\t/** Converts a given \"real\" value to a px value we can update the view with */\n\tconvertToPx(value) {\n\t\tif (!this.track) {\n\t\t\treturn 0;\n\t\t}\n\n\t\tconst trackWidth = this.track.nativeElement.getBoundingClientRect().width;\n\t\tif (value >= this.max) {\n\t\t\treturn trackWidth;\n\t\t}\n\n\t\tif (value <= this.min) {\n\t\t\treturn 0;\n\t\t}\n\n\t\t// account for value shifting by subtracting min from value and max\n\t\treturn Math.round(trackWidth * ((value - this.min) / (this.max - this.min)));\n\t}\n\n\t/**\n\t * Increments the value by the step value, or the step value multiplied by the `multiplier` argument.\n\t *\n\t * @argument multiplier Defaults to `1`, multiplied with the step value.\n\t */\n\tincrementValue(multiplier = 1, index = 0) {\n\t\tthis._value[index] = this._value[index] + (this.step * multiplier);\n\t\tthis.value = this.value; // run the setter\n\t}\n\n\t/**\n\t * Decrements the value by the step value, or the step value multiplied by the `multiplier` argument.\n\t *\n\t * @argument multiplier Defaults to `1`, multiplied with the step value.\n\t */\n\tdecrementValue(multiplier = 1, index = 0) {\n\t\tthis._value[index] = this._value[index] - (this.step * multiplier);\n\t\tthis.value = this.value; // run the setter\n\t}\n\n\t/**\n\t * Determines if the slider is in range mode.\n\t */\n\tisRange(): boolean {\n\t\treturn this._value.length > 1;\n\t}\n\n\t/**\n\t * Range mode only.\n\t * Updates the track width to span from the low thumb to the high thumb\n\t */\n\tupdateTrackRangeWidth() {\n\t\tconst fraction = this.getFractionComplete(this._value[0]);\n\t\tconst fraction2 = this.getFractionComplete(this._value[1]);\n\t\tthis.filledTrack.nativeElement.style.transform = `translate(${fraction * 100}%, -50%) ${this.scaleX(fraction2 - fraction)}`;\n\t}\n\n\t/** Change handler for the optional input */\n\tonChange(event, index) {\n\t\tthis._value[index] = Number(event.target.value);\n\t\tthis.value = this.value;\n\t}\n\n\t/**\n\t * Handles clicks on the slider, and setting the value to it's \"real\" equivalent.\n\t * Will assign the value to the closest thumb if in range mode.\n\t * */\n\tonClick(event) {\n\t\tif (this.disabled) { return; }\n\t\tconst trackLeft = this.track.nativeElement.getBoundingClientRect().left;\n\t\tconst trackValue = this.convertToValue(event.clientX - trackLeft);\n\t\tif (this.isRange()) {\n\t\t\tif (Math.abs(this._value[0] - trackValue) < Math.abs(this._value[1] - trackValue)) {\n\t\t\t\tthis._value[0] = trackValue;\n\t\t\t} else {\n\t\t\t\tthis._value[1] = trackValue;\n\t\t\t}\n\t\t} else {\n\t\t\tthis._value[0] = trackValue;\n\t\t}\n\n\t\tthis.value = this.value;\n\t}\n\n\t/** Focus handler for the optional input */\n\tonFocus({target}) {\n\t\ttarget.select();\n\t}\n\n\t/** Mouse move handler. Responsible for updating the value and visual selection based on mouse movement */\n\tonMouseMove(event) {\n\t\tif (this.disabled || !this.isMouseDown) { return; }\n\t\tconst track = this.track.nativeElement.getBoundingClientRect();\n\n\t\tlet value;\n\n\t\tif (\n\t\t\tevent.clientX - track.left <= track.width\n\t\t\t&& event.clientX - track.left >= 0\n\t\t) {\n\t\t\tvalue = this.convertToValue(event.clientX - track.left);\n\t\t}\n\n\t\t// if the mouse is beyond the max, set the value to `max`\n\t\tif (event.clientX - track.left > track.width) {\n\t\t\tvalue = this.max;\n\t\t}\n\n\t\t// if the mouse is below the min, set the value to `min`\n\t\tif (event.clientX - track.left < 0) {\n\t\t\tvalue = this.min;\n\t\t}\n\n\t\tif (value !== undefined) {\n\t\t\tthis._value[this._focusedThumbIndex] = value;\n\t\t\tthis.value = this.value;\n\t\t}\n\t}\n\n\t/**\n\t * Enables the `onMouseMove` handler\n\t *\n\t * @param {boolean} thumb If true then `thumb` is clicked down, otherwise `thumb2` is clicked down.\n\t */\n\tonMouseDown(event, index = 0) {\n\t\tevent.preventDefault();\n\t\tif (this.disabled) { return; }\n\t\tthis._focusedThumbIndex = index;\n\t\tthis.thumbs.toArray()[index].nativeElement.focus();\n\t\tthis.isMouseDown = true;\n\t}\n\n\t/** Disables the `onMouseMove` handler */\n\tonMouseUp() {\n\t\tthis.isMouseDown = false;\n\t}\n\n\t/**\n\t * Calls `incrementValue` for ArrowRight and ArrowUp, `decrementValue` for ArrowLeft and ArrowDown.\n\t *\n\t * @param {boolean} thumb If true then `thumb` is pressed down, otherwise `thumb2` is pressed down.\n\t */\n\tonKeyDown(event: KeyboardEvent, index = 0) {\n\t\tif (this.disableArrowKeys) {\n\t\t\treturn;\n\t\t}\n\t\tconst multiplier = event.shiftKey ? this.shiftMultiplier : 1;\n\t\tif (event.key === \"ArrowLeft\" || event.key === \"ArrowDown\") {\n\t\t\tthis.decrementValue(multiplier, index);\n\t\t\tthis.thumbs.toArray()[index].nativeElement.focus();\n\t\t\tevent.preventDefault();\n\t\t} else if (event.key === \"ArrowRight\" || event.key === \"ArrowUp\") {\n\t\t\tthis.incrementValue(multiplier, index);\n\t\t\tthis.thumbs.toArray()[index].nativeElement.focus();\n\t\t\tevent.preventDefault();\n\t\t}\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\t/** Get optional input fields */\n\tprotected getInputs(): HTMLInputElement[] {\n\t\treturn this.elementRef.nativeElement.querySelectorAll(\"input:not([type=range])\");\n\t}\n}\n",
|
|
49089
49089
|
"assetsDirs": [],
|
|
49090
49090
|
"styleUrlsData": "",
|
|
49091
49091
|
"stylesData": "",
|
|
@@ -49114,7 +49114,7 @@
|
|
|
49114
49114
|
"deprecationMessage": ""
|
|
49115
49115
|
}
|
|
49116
49116
|
],
|
|
49117
|
-
"line":
|
|
49117
|
+
"line": 300,
|
|
49118
49118
|
"jsdoctags": [
|
|
49119
49119
|
{
|
|
49120
49120
|
"name": "elementRef",
|
|
@@ -49166,7 +49166,7 @@
|
|
|
49166
49166
|
}
|
|
49167
49167
|
],
|
|
49168
49168
|
"returnType": "void",
|
|
49169
|
-
"line":
|
|
49169
|
+
"line": 165,
|
|
49170
49170
|
"rawdescription": "\nThe lower bound of our range",
|
|
49171
49171
|
"description": "<p>The lower bound of our range</p>\n",
|
|
49172
49172
|
"jsdoctags": [
|
|
@@ -49185,7 +49185,7 @@
|
|
|
49185
49185
|
"name": "min",
|
|
49186
49186
|
"type": "",
|
|
49187
49187
|
"returnType": "",
|
|
49188
|
-
"line":
|
|
49188
|
+
"line": 171
|
|
49189
49189
|
}
|
|
49190
49190
|
},
|
|
49191
49191
|
"max": {
|
|
@@ -49204,7 +49204,7 @@
|
|
|
49204
49204
|
}
|
|
49205
49205
|
],
|
|
49206
49206
|
"returnType": "void",
|
|
49207
|
-
"line":
|
|
49207
|
+
"line": 175,
|
|
49208
49208
|
"rawdescription": "\nThe upper bound of our range",
|
|
49209
49209
|
"description": "<p>The upper bound of our range</p>\n",
|
|
49210
49210
|
"jsdoctags": [
|
|
@@ -49223,7 +49223,7 @@
|
|
|
49223
49223
|
"name": "max",
|
|
49224
49224
|
"type": "",
|
|
49225
49225
|
"returnType": "",
|
|
49226
|
-
"line":
|
|
49226
|
+
"line": 182
|
|
49227
49227
|
}
|
|
49228
49228
|
},
|
|
49229
49229
|
"value": {
|
|
@@ -49242,7 +49242,7 @@
|
|
|
49242
49242
|
}
|
|
49243
49243
|
],
|
|
49244
49244
|
"returnType": "void",
|
|
49245
|
-
"line":
|
|
49245
|
+
"line": 188,
|
|
49246
49246
|
"rawdescription": "\nSet the initial value. Available for two way binding",
|
|
49247
49247
|
"description": "<p>Set the initial value. Available for two way binding</p>\n",
|
|
49248
49248
|
"jsdoctags": [
|
|
@@ -49261,7 +49261,7 @@
|
|
|
49261
49261
|
"name": "value",
|
|
49262
49262
|
"type": "",
|
|
49263
49263
|
"returnType": "",
|
|
49264
|
-
"line":
|
|
49264
|
+
"line": 249
|
|
49265
49265
|
}
|
|
49266
49266
|
},
|
|
49267
49267
|
"disabled": {
|
|
@@ -49280,7 +49280,7 @@
|
|
|
49280
49280
|
}
|
|
49281
49281
|
],
|
|
49282
49282
|
"returnType": "void",
|
|
49283
|
-
"line":
|
|
49283
|
+
"line": 267,
|
|
49284
49284
|
"rawdescription": "\nDisables the range visually and functionally",
|
|
49285
49285
|
"description": "<p>Disables the range visually and functionally</p>\n",
|
|
49286
49286
|
"jsdoctags": [
|
|
@@ -49299,7 +49299,7 @@
|
|
|
49299
49299
|
"name": "disabled",
|
|
49300
49300
|
"type": "",
|
|
49301
49301
|
"returnType": "",
|
|
49302
|
-
"line":
|
|
49302
|
+
"line": 276
|
|
49303
49303
|
}
|
|
49304
49304
|
}
|
|
49305
49305
|
}
|