carbon-components-angular 5.20.2 → 5.21.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.
- package/docs/documentation/components/Hamburger.html +92 -20
- package/docs/documentation/components/Slider.html +157 -135
- package/docs/documentation/coverage.html +3 -3
- package/docs/documentation/js/search/search_index.js +2 -2
- package/docs/documentation/modules/ComboBoxModule/dependencies.svg +4 -4
- package/docs/documentation/modules/ComboBoxModule.html +4 -4
- package/docs/documentation/modules/ContentSwitcherModule/dependencies.svg +4 -4
- package/docs/documentation/modules/ContentSwitcherModule.html +4 -4
- package/docs/documentation/modules/DatePickerInputModule/dependencies.svg +7 -7
- package/docs/documentation/modules/DatePickerInputModule.html +7 -7
- package/docs/documentation/modules/DatePickerModule/dependencies.svg +57 -53
- package/docs/documentation/modules/DatePickerModule.html +57 -53
- package/docs/documentation/modules/DialogModule/dependencies.svg +34 -34
- package/docs/documentation/modules/DialogModule.html +34 -34
- package/docs/documentation/modules/GridModule/dependencies.svg +60 -60
- package/docs/documentation/modules/GridModule.html +60 -60
- package/docs/documentation/modules/LoadingModule/dependencies.svg +4 -4
- package/docs/documentation/modules/LoadingModule.html +4 -4
- package/docs/documentation/modules/NFormsModule/dependencies.svg +4 -4
- package/docs/documentation/modules/NFormsModule.html +4 -4
- package/docs/documentation/modules/NumberModule/dependencies.svg +4 -4
- package/docs/documentation/modules/NumberModule.html +4 -4
- package/docs/documentation/modules/ProgressIndicatorModule/dependencies.svg +4 -4
- package/docs/documentation/modules/ProgressIndicatorModule.html +4 -4
- package/docs/documentation/modules/RadioModule/dependencies.svg +4 -4
- package/docs/documentation/modules/RadioModule.html +4 -4
- package/docs/documentation/modules/SearchModule/dependencies.svg +4 -4
- package/docs/documentation/modules/SearchModule.html +4 -4
- package/docs/documentation/modules/SelectModule/dependencies.svg +58 -58
- package/docs/documentation/modules/SelectModule.html +58 -58
- package/docs/documentation/modules/SliderModule/dependencies.svg +4 -4
- package/docs/documentation/modules/SliderModule.html +4 -4
- package/docs/documentation/modules/StructuredListModule/dependencies.svg +66 -66
- package/docs/documentation/modules/StructuredListModule.html +66 -66
- package/docs/documentation/modules/TabsModule/dependencies.svg +69 -69
- package/docs/documentation/modules/TabsModule.html +69 -69
- package/docs/documentation/modules/TagModule/dependencies.svg +4 -4
- package/docs/documentation/modules/TagModule.html +4 -4
- package/docs/documentation/modules/ThemeModule/dependencies.svg +13 -13
- package/docs/documentation/modules/ThemeModule.html +13 -13
- package/docs/documentation/modules/TilesModule/dependencies.svg +86 -86
- package/docs/documentation/modules/TilesModule.html +86 -86
- package/docs/documentation/modules/TimePickerModule/dependencies.svg +17 -17
- package/docs/documentation/modules/TimePickerModule.html +17 -17
- package/docs/documentation/modules/TimePickerSelectModule/dependencies.svg +42 -38
- package/docs/documentation/modules/TimePickerSelectModule.html +42 -38
- package/docs/documentation/modules/ToggleModule/dependencies.svg +4 -4
- package/docs/documentation/modules/ToggleModule.html +4 -4
- 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 +4 -4
- package/docs/documentation/modules/TreeviewModule.html +4 -4
- package/docs/documentation.json +97 -75
- package/docs/storybook/3348.35ca85d6.iframe.bundle.js +1 -0
- package/docs/storybook/iframe.html +2 -2
- package/docs/storybook/{main.053e39e2.iframe.bundle.js → main.11f564c6.iframe.bundle.js} +1 -1
- package/docs/storybook/project.json +1 -1
- package/docs/storybook/{runtime~main.4d2d3399.iframe.bundle.js → runtime~main.386e82b8.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/esm2020/ui-shell/header/hamburger.component.mjs +19 -15
- package/fesm2015/carbon-components-angular-slider.mjs +70 -48
- package/fesm2015/carbon-components-angular-slider.mjs.map +1 -1
- package/fesm2015/carbon-components-angular-ui-shell.mjs +18 -14
- package/fesm2015/carbon-components-angular-ui-shell.mjs.map +1 -1
- package/fesm2020/carbon-components-angular-slider.mjs +70 -48
- package/fesm2020/carbon-components-angular-slider.mjs.map +1 -1
- package/fesm2020/carbon-components-angular-ui-shell.mjs +18 -14
- package/fesm2020/carbon-components-angular-ui-shell.mjs.map +1 -1
- package/package.json +1 -1
- package/slider/slider.component.d.ts +4 -1
- package/ui-shell/header/hamburger.component.d.ts +9 -1
- package/docs/storybook/3348.65c12f97.iframe.bundle.js +0 -1
package/docs/documentation.json
CHANGED
|
@@ -31643,7 +31643,7 @@
|
|
|
31643
31643
|
},
|
|
31644
31644
|
{
|
|
31645
31645
|
"name": "Hamburger",
|
|
31646
|
-
"id": "component-Hamburger-
|
|
31646
|
+
"id": "component-Hamburger-ee42e761f8e5ddaa77ba0ce22087ef43711640c0f5c17eb6e91d38d90844446256c784045c38a10b865260759eb8e19a21c2c41b2325ff77d606fe6b6350b9b1",
|
|
31647
31647
|
"file": "src/ui-shell/header/hamburger.component.ts",
|
|
31648
31648
|
"encapsulation": [],
|
|
31649
31649
|
"entryComponents": [],
|
|
@@ -31653,7 +31653,7 @@
|
|
|
31653
31653
|
"selector": "cds-hamburger, ibm-hamburger",
|
|
31654
31654
|
"styleUrls": [],
|
|
31655
31655
|
"styles": [],
|
|
31656
|
-
"template": "<button\n\ttype=\"button\"\n\t(click)=\"doClick()\"\n\t[ngClass]=\"{'cds--header__action--active': active}\"\n\tclass=\"cds--header__menu-trigger cds--header__action cds--header__menu-toggle\"\n\t[attr.aria-label]=\"active
|
|
31656
|
+
"template": "<button\n\ttype=\"button\"\n\t(click)=\"doClick()\"\n\t[ngClass]=\"{'cds--header__action--active': active}\"\n\tclass=\"cds--header__menu-trigger cds--header__action cds--header__menu-toggle\"\n\t[attr.aria-label]=\"active ? activeTitle : inactiveTitle\"\n\t[attr.title]=\"active ? activeTitle : inactiveTitle\">\n\t<svg *ngIf=\"!active\" cdsIcon=\"menu\" size=\"20\"></svg>\n\t<svg *ngIf=\"active\" cdsIcon=\"close\" size=\"20\"></svg>\n</button>\n\t",
|
|
31657
31657
|
"templateUrl": [],
|
|
31658
31658
|
"viewProviders": [],
|
|
31659
31659
|
"hostDirectives": [],
|
|
@@ -31665,9 +31665,31 @@
|
|
|
31665
31665
|
"deprecationMessage": "",
|
|
31666
31666
|
"rawdescription": "\n\nControls the active/selected state for the `Hamburger` menu.\n",
|
|
31667
31667
|
"description": "<p>Controls the active/selected state for the <code>Hamburger</code> menu.</p>\n",
|
|
31668
|
-
"line":
|
|
31668
|
+
"line": 31,
|
|
31669
31669
|
"type": "boolean",
|
|
31670
31670
|
"decorators": []
|
|
31671
|
+
},
|
|
31672
|
+
{
|
|
31673
|
+
"name": "activeTitle",
|
|
31674
|
+
"defaultValue": "this.i18n.get().UI_SHELL.HEADER.CLOSE_MENU",
|
|
31675
|
+
"deprecated": false,
|
|
31676
|
+
"deprecationMessage": "",
|
|
31677
|
+
"rawdescription": "\n\nSet the title text when the hamburger is active\n",
|
|
31678
|
+
"description": "<p>Set the title text when the hamburger is active</p>\n",
|
|
31679
|
+
"line": 36,
|
|
31680
|
+
"type": "any",
|
|
31681
|
+
"decorators": []
|
|
31682
|
+
},
|
|
31683
|
+
{
|
|
31684
|
+
"name": "inactiveTitle",
|
|
31685
|
+
"defaultValue": "this.i18n.get().UI_SHELL.HEADER.OPEN_MENU",
|
|
31686
|
+
"deprecated": false,
|
|
31687
|
+
"deprecationMessage": "",
|
|
31688
|
+
"rawdescription": "\n\nSet the title text when the hamburger is inactive\n",
|
|
31689
|
+
"description": "<p>Set the title text when the hamburger is inactive</p>\n",
|
|
31690
|
+
"line": 41,
|
|
31691
|
+
"type": "any",
|
|
31692
|
+
"decorators": []
|
|
31671
31693
|
}
|
|
31672
31694
|
],
|
|
31673
31695
|
"outputsClass": [
|
|
@@ -31678,7 +31700,7 @@
|
|
|
31678
31700
|
"deprecationMessage": "",
|
|
31679
31701
|
"rawdescription": "\n\n`EventEmitter` to notify parent components of menu click events.\n",
|
|
31680
31702
|
"description": "<p><code>EventEmitter</code> to notify parent components of menu click events.</p>\n",
|
|
31681
|
-
"line":
|
|
31703
|
+
"line": 46,
|
|
31682
31704
|
"type": "EventEmitter<Object>"
|
|
31683
31705
|
}
|
|
31684
31706
|
],
|
|
@@ -31690,7 +31712,7 @@
|
|
|
31690
31712
|
"type": "I18n",
|
|
31691
31713
|
"optional": false,
|
|
31692
31714
|
"description": "",
|
|
31693
|
-
"line":
|
|
31715
|
+
"line": 48,
|
|
31694
31716
|
"modifierKind": [
|
|
31695
31717
|
123
|
|
31696
31718
|
]
|
|
@@ -31703,7 +31725,7 @@
|
|
|
31703
31725
|
"optional": false,
|
|
31704
31726
|
"returnType": "void",
|
|
31705
31727
|
"typeParameters": [],
|
|
31706
|
-
"line":
|
|
31728
|
+
"line": 53,
|
|
31707
31729
|
"deprecated": false,
|
|
31708
31730
|
"deprecationMessage": "",
|
|
31709
31731
|
"rawdescription": "\n\nEmit the Hamburger click event upwards.\n",
|
|
@@ -31722,7 +31744,7 @@
|
|
|
31722
31744
|
"description": "<p>A toggle for the side navigation</p>\n",
|
|
31723
31745
|
"rawdescription": "\n\nA toggle for the side navigation\n",
|
|
31724
31746
|
"type": "component",
|
|
31725
|
-
"sourceCode": "import {\n\tComponent,\n\tOutput,\n\tEventEmitter,\n\tInput\n} from \"@angular/core\";\nimport { I18n } from \"carbon-components-angular/i18n\";\n\n/**\n * A toggle for the side navigation\n */\n@Component({\n\tselector: \"cds-hamburger, ibm-hamburger\",\n\ttemplate: `\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\t(click)=\"doClick()\"\n\t\t\t[ngClass]=\"{'cds--header__action--active': active}\"\n\t\t\tclass=\"cds--header__menu-trigger cds--header__action cds--header__menu-toggle\"\n\t\t\t[attr.aria-label]=\"active
|
|
31747
|
+
"sourceCode": "import {\n\tComponent,\n\tOutput,\n\tEventEmitter,\n\tInput\n} from \"@angular/core\";\nimport { I18n } from \"carbon-components-angular/i18n\";\n\n/**\n * A toggle for the side navigation\n */\n@Component({\n\tselector: \"cds-hamburger, ibm-hamburger\",\n\ttemplate: `\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\t(click)=\"doClick()\"\n\t\t\t[ngClass]=\"{'cds--header__action--active': active}\"\n\t\t\tclass=\"cds--header__menu-trigger cds--header__action cds--header__menu-toggle\"\n\t\t\t[attr.aria-label]=\"active ? activeTitle : inactiveTitle\"\n\t\t\t[attr.title]=\"active ? activeTitle : inactiveTitle\">\n\t\t\t<svg *ngIf=\"!active\" cdsIcon=\"menu\" size=\"20\"></svg>\n\t\t\t<svg *ngIf=\"active\" cdsIcon=\"close\" size=\"20\"></svg>\n\t\t</button>\n\t`\n})\nexport class Hamburger {\n\t/**\n\t * Controls the active/selected state for the `Hamburger` menu.\n\t */\n\t@Input() active = false;\n\n\t/**\n\t * Set the title text when the hamburger is active\n\t */\n\t@Input() activeTitle = this.i18n.get().UI_SHELL.HEADER.CLOSE_MENU;\n\n\t/**\n\t * Set the title text when the hamburger is inactive\n\t */\n\t@Input() inactiveTitle = this.i18n.get().UI_SHELL.HEADER.OPEN_MENU;\n\n\t/**\n\t * `EventEmitter` to notify parent components of menu click events.\n\t */\n\t@Output() selected: EventEmitter<Object> = new EventEmitter<Object>();\n\n\tconstructor(public i18n: I18n) {}\n\n\t/**\n\t * Emit the Hamburger click event upwards.\n\t */\n\tpublic doClick() {\n\t\tthis.selected.emit(this.active);\n\t}\n}\n",
|
|
31726
31748
|
"assetsDirs": [],
|
|
31727
31749
|
"styleUrlsData": "",
|
|
31728
31750
|
"stylesData": "",
|
|
@@ -31739,7 +31761,7 @@
|
|
|
31739
31761
|
"deprecationMessage": ""
|
|
31740
31762
|
}
|
|
31741
31763
|
],
|
|
31742
|
-
"line":
|
|
31764
|
+
"line": 46,
|
|
31743
31765
|
"jsdoctags": [
|
|
31744
31766
|
{
|
|
31745
31767
|
"name": "i18n",
|
|
@@ -48085,7 +48107,7 @@
|
|
|
48085
48107
|
},
|
|
48086
48108
|
{
|
|
48087
48109
|
"name": "Slider",
|
|
48088
|
-
"id": "component-Slider-
|
|
48110
|
+
"id": "component-Slider-dca469a8e54737811fa57b45f91389013897ba46fc691d12fe2a39b943d18681e35e894c948a39ab247a06ae54f3a37da00bb679681dea950c99cef2340686dc",
|
|
48089
48111
|
"file": "src/slider/slider.component.ts",
|
|
48090
48112
|
"encapsulation": [],
|
|
48091
48113
|
"entryComponents": [],
|
|
@@ -48099,7 +48121,7 @@
|
|
|
48099
48121
|
"selector": "cds-slider, ibm-slider",
|
|
48100
48122
|
"styleUrls": [],
|
|
48101
48123
|
"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
|
|
48124
|
+
"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
48125
|
"templateUrl": [],
|
|
48104
48126
|
"viewProviders": [],
|
|
48105
48127
|
"hostDirectives": [],
|
|
@@ -48111,7 +48133,7 @@
|
|
|
48111
48133
|
"deprecationMessage": "",
|
|
48112
48134
|
"rawdescription": "\nSet to `true` for a slider without arrow key interactions.",
|
|
48113
48135
|
"description": "<p>Set to <code>true</code> for a slider without arrow key interactions.</p>\n",
|
|
48114
|
-
"line":
|
|
48136
|
+
"line": 265,
|
|
48115
48137
|
"type": "boolean",
|
|
48116
48138
|
"decorators": []
|
|
48117
48139
|
},
|
|
@@ -48121,7 +48143,7 @@
|
|
|
48121
48143
|
"deprecationMessage": "",
|
|
48122
48144
|
"rawdescription": "\nDisables the range visually and functionally",
|
|
48123
48145
|
"description": "<p>Disables the range visually and functionally</p>\n",
|
|
48124
|
-
"line":
|
|
48146
|
+
"line": 267,
|
|
48125
48147
|
"type": "boolean",
|
|
48126
48148
|
"decorators": []
|
|
48127
48149
|
},
|
|
@@ -48132,7 +48154,7 @@
|
|
|
48132
48154
|
"deprecationMessage": "",
|
|
48133
48155
|
"rawdescription": "\nBase ID for the slider. The min and max labels get IDs `${this.id}-bottom-range` and `${this.id}-top-range` respectively",
|
|
48134
48156
|
"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":
|
|
48157
|
+
"line": 257,
|
|
48136
48158
|
"type": "string",
|
|
48137
48159
|
"decorators": []
|
|
48138
48160
|
},
|
|
@@ -48142,7 +48164,7 @@
|
|
|
48142
48164
|
"deprecationMessage": "",
|
|
48143
48165
|
"rawdescription": "\nSets the text inside the `label` tag",
|
|
48144
48166
|
"description": "<p>Sets the text inside the <code>label</code> tag</p>\n",
|
|
48145
|
-
"line":
|
|
48167
|
+
"line": 263,
|
|
48146
48168
|
"type": "string | TemplateRef<any>",
|
|
48147
48169
|
"decorators": []
|
|
48148
48170
|
},
|
|
@@ -48152,7 +48174,7 @@
|
|
|
48152
48174
|
"deprecationMessage": "",
|
|
48153
48175
|
"rawdescription": "\nThe upper bound of our range",
|
|
48154
48176
|
"description": "<p>The upper bound of our range</p>\n",
|
|
48155
|
-
"line":
|
|
48177
|
+
"line": 175,
|
|
48156
48178
|
"type": "number",
|
|
48157
48179
|
"decorators": []
|
|
48158
48180
|
},
|
|
@@ -48162,7 +48184,7 @@
|
|
|
48162
48184
|
"deprecationMessage": "",
|
|
48163
48185
|
"rawdescription": "\nThe lower bound of our range",
|
|
48164
48186
|
"description": "<p>The lower bound of our range</p>\n",
|
|
48165
|
-
"line":
|
|
48187
|
+
"line": 165,
|
|
48166
48188
|
"type": "number",
|
|
48167
48189
|
"decorators": []
|
|
48168
48190
|
},
|
|
@@ -48173,7 +48195,7 @@
|
|
|
48173
48195
|
"deprecationMessage": "",
|
|
48174
48196
|
"rawdescription": "\nValue used to \"multiply\" the `step` when using arrow keys to select values",
|
|
48175
48197
|
"description": "<p>Value used to "multiply" the <code>step</code> when using arrow keys to select values</p>\n",
|
|
48176
|
-
"line":
|
|
48198
|
+
"line": 259,
|
|
48177
48199
|
"type": "number",
|
|
48178
48200
|
"decorators": []
|
|
48179
48201
|
},
|
|
@@ -48184,7 +48206,7 @@
|
|
|
48184
48206
|
"deprecationMessage": "",
|
|
48185
48207
|
"rawdescription": "\nSet to `true` for a loading slider",
|
|
48186
48208
|
"description": "<p>Set to <code>true</code> for a loading slider</p>\n",
|
|
48187
|
-
"line":
|
|
48209
|
+
"line": 261,
|
|
48188
48210
|
"type": "boolean",
|
|
48189
48211
|
"decorators": []
|
|
48190
48212
|
},
|
|
@@ -48195,7 +48217,7 @@
|
|
|
48195
48217
|
"deprecationMessage": "",
|
|
48196
48218
|
"rawdescription": "\nThe interval for our range",
|
|
48197
48219
|
"description": "<p>The interval for our range</p>\n",
|
|
48198
|
-
"line":
|
|
48220
|
+
"line": 186,
|
|
48199
48221
|
"type": "number",
|
|
48200
48222
|
"decorators": []
|
|
48201
48223
|
},
|
|
@@ -48205,7 +48227,7 @@
|
|
|
48205
48227
|
"deprecationMessage": "",
|
|
48206
48228
|
"rawdescription": "\nSet the initial value. Available for two way binding",
|
|
48207
48229
|
"description": "<p>Set the initial value. Available for two way binding</p>\n",
|
|
48208
|
-
"line":
|
|
48230
|
+
"line": 188,
|
|
48209
48231
|
"type": "any",
|
|
48210
48232
|
"decorators": []
|
|
48211
48233
|
}
|
|
@@ -48218,7 +48240,7 @@
|
|
|
48218
48240
|
"deprecationMessage": "",
|
|
48219
48241
|
"rawdescription": "\nEmits every time a new value is selected",
|
|
48220
48242
|
"description": "<p>Emits every time a new value is selected</p>\n",
|
|
48221
|
-
"line":
|
|
48243
|
+
"line": 280,
|
|
48222
48244
|
"type": "EventEmitter<number | []>"
|
|
48223
48245
|
}
|
|
48224
48246
|
],
|
|
@@ -48231,7 +48253,7 @@
|
|
|
48231
48253
|
"type": "",
|
|
48232
48254
|
"optional": false,
|
|
48233
48255
|
"description": "",
|
|
48234
|
-
"line":
|
|
48256
|
+
"line": 289,
|
|
48235
48257
|
"modifierKind": [
|
|
48236
48258
|
123
|
|
48237
48259
|
]
|
|
@@ -48243,7 +48265,7 @@
|
|
|
48243
48265
|
"type": "ElementRef",
|
|
48244
48266
|
"optional": false,
|
|
48245
48267
|
"description": "",
|
|
48246
|
-
"line":
|
|
48268
|
+
"line": 285,
|
|
48247
48269
|
"decorators": [
|
|
48248
48270
|
{
|
|
48249
48271
|
"name": "ViewChild",
|
|
@@ -48262,7 +48284,7 @@
|
|
|
48262
48284
|
"type": "number",
|
|
48263
48285
|
"optional": false,
|
|
48264
48286
|
"description": "",
|
|
48265
|
-
"line":
|
|
48287
|
+
"line": 291,
|
|
48266
48288
|
"modifierKind": [
|
|
48267
48289
|
123
|
|
48268
48290
|
]
|
|
@@ -48275,7 +48297,7 @@
|
|
|
48275
48297
|
"type": "",
|
|
48276
48298
|
"optional": false,
|
|
48277
48299
|
"description": "",
|
|
48278
|
-
"line":
|
|
48300
|
+
"line": 281,
|
|
48279
48301
|
"decorators": [
|
|
48280
48302
|
{
|
|
48281
48303
|
"name": "HostBinding",
|
|
@@ -48294,7 +48316,7 @@
|
|
|
48294
48316
|
"type": "",
|
|
48295
48317
|
"optional": false,
|
|
48296
48318
|
"description": "",
|
|
48297
|
-
"line":
|
|
48319
|
+
"line": 288,
|
|
48298
48320
|
"modifierKind": [
|
|
48299
48321
|
123
|
|
48300
48322
|
]
|
|
@@ -48307,7 +48329,7 @@
|
|
|
48307
48329
|
"type": "function",
|
|
48308
48330
|
"optional": false,
|
|
48309
48331
|
"description": "<p>Callback to notify the model when our input has been touched</p>\n",
|
|
48310
|
-
"line":
|
|
48332
|
+
"line": 351,
|
|
48311
48333
|
"rawdescription": "\nCallback to notify the model when our input has been touched"
|
|
48312
48334
|
},
|
|
48313
48335
|
{
|
|
@@ -48318,7 +48340,7 @@
|
|
|
48318
48340
|
"type": "",
|
|
48319
48341
|
"optional": false,
|
|
48320
48342
|
"description": "<p>Send changes back to the model</p>\n",
|
|
48321
|
-
"line":
|
|
48343
|
+
"line": 343,
|
|
48322
48344
|
"rawdescription": "\nSend changes back to the model"
|
|
48323
48345
|
},
|
|
48324
48346
|
{
|
|
@@ -48328,7 +48350,7 @@
|
|
|
48328
48350
|
"type": "ElementRef",
|
|
48329
48351
|
"optional": false,
|
|
48330
48352
|
"description": "",
|
|
48331
|
-
"line":
|
|
48353
|
+
"line": 286,
|
|
48332
48354
|
"decorators": [
|
|
48333
48355
|
{
|
|
48334
48356
|
"name": "ViewChild",
|
|
@@ -48346,7 +48368,7 @@
|
|
|
48346
48368
|
"type": "QueryList<ElementRef>",
|
|
48347
48369
|
"optional": false,
|
|
48348
48370
|
"description": "",
|
|
48349
|
-
"line":
|
|
48371
|
+
"line": 282,
|
|
48350
48372
|
"decorators": [
|
|
48351
48373
|
{
|
|
48352
48374
|
"name": "ViewChildren",
|
|
@@ -48365,7 +48387,7 @@
|
|
|
48365
48387
|
"type": "",
|
|
48366
48388
|
"optional": false,
|
|
48367
48389
|
"description": "",
|
|
48368
|
-
"line":
|
|
48390
|
+
"line": 290,
|
|
48369
48391
|
"modifierKind": [
|
|
48370
48392
|
123
|
|
48371
48393
|
]
|
|
@@ -48377,7 +48399,7 @@
|
|
|
48377
48399
|
"type": "ElementRef",
|
|
48378
48400
|
"optional": false,
|
|
48379
48401
|
"description": "",
|
|
48380
|
-
"line":
|
|
48402
|
+
"line": 284,
|
|
48381
48403
|
"decorators": [
|
|
48382
48404
|
{
|
|
48383
48405
|
"name": "ViewChild",
|
|
@@ -48403,7 +48425,7 @@
|
|
|
48403
48425
|
"optional": false,
|
|
48404
48426
|
"returnType": "any",
|
|
48405
48427
|
"typeParameters": [],
|
|
48406
|
-
"line":
|
|
48428
|
+
"line": 392,
|
|
48407
48429
|
"deprecated": false,
|
|
48408
48430
|
"deprecationMessage": "",
|
|
48409
48431
|
"rawdescription": "\nConverts a given \"real\" value to a px value we can update the view with",
|
|
@@ -48433,7 +48455,7 @@
|
|
|
48433
48455
|
"optional": false,
|
|
48434
48456
|
"returnType": "number",
|
|
48435
48457
|
"typeParameters": [],
|
|
48436
|
-
"line":
|
|
48458
|
+
"line": 381,
|
|
48437
48459
|
"deprecated": false,
|
|
48438
48460
|
"deprecationMessage": "",
|
|
48439
48461
|
"rawdescription": "\nConverts a given px value to a \"real\" value in our range",
|
|
@@ -48471,7 +48493,7 @@
|
|
|
48471
48493
|
"optional": false,
|
|
48472
48494
|
"returnType": "void",
|
|
48473
48495
|
"typeParameters": [],
|
|
48474
|
-
"line":
|
|
48496
|
+
"line": 425,
|
|
48475
48497
|
"deprecated": false,
|
|
48476
48498
|
"deprecationMessage": "",
|
|
48477
48499
|
"rawdescription": "\n\nDecrements the value by the step value, or the step value multiplied by the `multiplier` argument.\n\n",
|
|
@@ -48479,8 +48501,8 @@
|
|
|
48479
48501
|
"jsdoctags": [
|
|
48480
48502
|
{
|
|
48481
48503
|
"name": {
|
|
48482
|
-
"pos":
|
|
48483
|
-
"end":
|
|
48504
|
+
"pos": 12171,
|
|
48505
|
+
"end": 12181,
|
|
48484
48506
|
"flags": 8421376,
|
|
48485
48507
|
"modifierFlagsCache": 0,
|
|
48486
48508
|
"transformFlags": 0,
|
|
@@ -48492,8 +48514,8 @@
|
|
|
48492
48514
|
"deprecationMessage": "",
|
|
48493
48515
|
"defaultValue": "1",
|
|
48494
48516
|
"tagName": {
|
|
48495
|
-
"pos":
|
|
48496
|
-
"end":
|
|
48517
|
+
"pos": 12162,
|
|
48518
|
+
"end": 12170,
|
|
48497
48519
|
"flags": 8421376,
|
|
48498
48520
|
"modifierFlagsCache": 0,
|
|
48499
48521
|
"transformFlags": 0,
|
|
@@ -48527,7 +48549,7 @@
|
|
|
48527
48549
|
"optional": false,
|
|
48528
48550
|
"returnType": "number",
|
|
48529
48551
|
"typeParameters": [],
|
|
48530
|
-
"line":
|
|
48552
|
+
"line": 366,
|
|
48531
48553
|
"deprecated": false,
|
|
48532
48554
|
"deprecationMessage": "",
|
|
48533
48555
|
"rawdescription": "\n\nReturns the amount of \"completeness\" of a value as a fraction of the total track width\n",
|
|
@@ -48565,7 +48587,7 @@
|
|
|
48565
48587
|
"optional": false,
|
|
48566
48588
|
"returnType": "void",
|
|
48567
48589
|
"typeParameters": [],
|
|
48568
|
-
"line":
|
|
48590
|
+
"line": 415,
|
|
48569
48591
|
"deprecated": false,
|
|
48570
48592
|
"deprecationMessage": "",
|
|
48571
48593
|
"rawdescription": "\n\nIncrements the value by the step value, or the step value multiplied by the `multiplier` argument.\n\n",
|
|
@@ -48573,8 +48595,8 @@
|
|
|
48573
48595
|
"jsdoctags": [
|
|
48574
48596
|
{
|
|
48575
48597
|
"name": {
|
|
48576
|
-
"pos":
|
|
48577
|
-
"end":
|
|
48598
|
+
"pos": 11816,
|
|
48599
|
+
"end": 11826,
|
|
48578
48600
|
"flags": 8421376,
|
|
48579
48601
|
"modifierFlagsCache": 0,
|
|
48580
48602
|
"transformFlags": 0,
|
|
@@ -48586,8 +48608,8 @@
|
|
|
48586
48608
|
"deprecationMessage": "",
|
|
48587
48609
|
"defaultValue": "1",
|
|
48588
48610
|
"tagName": {
|
|
48589
|
-
"pos":
|
|
48590
|
-
"end":
|
|
48611
|
+
"pos": 11807,
|
|
48612
|
+
"end": 11815,
|
|
48591
48613
|
"flags": 8421376,
|
|
48592
48614
|
"modifierFlagsCache": 0,
|
|
48593
48615
|
"transformFlags": 0,
|
|
@@ -48614,7 +48636,7 @@
|
|
|
48614
48636
|
"optional": false,
|
|
48615
48637
|
"returnType": "boolean",
|
|
48616
48638
|
"typeParameters": [],
|
|
48617
|
-
"line":
|
|
48639
|
+
"line": 433,
|
|
48618
48640
|
"deprecated": false,
|
|
48619
48641
|
"deprecationMessage": "",
|
|
48620
48642
|
"rawdescription": "\n\nDetermines if the slider is in range mode.\n",
|
|
@@ -48633,7 +48655,7 @@
|
|
|
48633
48655
|
"optional": false,
|
|
48634
48656
|
"returnType": "boolean",
|
|
48635
48657
|
"typeParameters": [],
|
|
48636
|
-
"line":
|
|
48658
|
+
"line": 548,
|
|
48637
48659
|
"deprecated": false,
|
|
48638
48660
|
"deprecationMessage": "",
|
|
48639
48661
|
"modifierKind": [
|
|
@@ -48670,7 +48692,7 @@
|
|
|
48670
48692
|
"optional": false,
|
|
48671
48693
|
"returnType": "void",
|
|
48672
48694
|
"typeParameters": [],
|
|
48673
|
-
"line":
|
|
48695
|
+
"line": 448,
|
|
48674
48696
|
"deprecated": false,
|
|
48675
48697
|
"deprecationMessage": "",
|
|
48676
48698
|
"rawdescription": "\nChange handler for the optional input",
|
|
@@ -48709,11 +48731,11 @@
|
|
|
48709
48731
|
"optional": false,
|
|
48710
48732
|
"returnType": "void",
|
|
48711
48733
|
"typeParameters": [],
|
|
48712
|
-
"line":
|
|
48734
|
+
"line": 457,
|
|
48713
48735
|
"deprecated": false,
|
|
48714
48736
|
"deprecationMessage": "",
|
|
48715
|
-
"rawdescription": "\nHandles clicks on the
|
|
48716
|
-
"description": "<p>Handles clicks on the
|
|
48737
|
+
"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",
|
|
48738
|
+
"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
48739
|
"jsdoctags": [
|
|
48718
48740
|
{
|
|
48719
48741
|
"name": "event",
|
|
@@ -48738,7 +48760,7 @@
|
|
|
48738
48760
|
"optional": false,
|
|
48739
48761
|
"returnType": "void",
|
|
48740
48762
|
"typeParameters": [],
|
|
48741
|
-
"line":
|
|
48763
|
+
"line": 475,
|
|
48742
48764
|
"deprecated": false,
|
|
48743
48765
|
"deprecationMessage": "",
|
|
48744
48766
|
"rawdescription": "\nFocus handler for the optional input",
|
|
@@ -48774,7 +48796,7 @@
|
|
|
48774
48796
|
"optional": false,
|
|
48775
48797
|
"returnType": "void",
|
|
48776
48798
|
"typeParameters": [],
|
|
48777
|
-
"line":
|
|
48799
|
+
"line": 532,
|
|
48778
48800
|
"deprecated": false,
|
|
48779
48801
|
"deprecationMessage": "",
|
|
48780
48802
|
"rawdescription": "\n\nCalls `incrementValue` for ArrowRight and ArrowUp, `decrementValue` for ArrowLeft and ArrowDown.\n\n",
|
|
@@ -48821,7 +48843,7 @@
|
|
|
48821
48843
|
"optional": false,
|
|
48822
48844
|
"returnType": "void",
|
|
48823
48845
|
"typeParameters": [],
|
|
48824
|
-
"line":
|
|
48846
|
+
"line": 514,
|
|
48825
48847
|
"deprecated": false,
|
|
48826
48848
|
"deprecationMessage": "",
|
|
48827
48849
|
"rawdescription": "\n\nEnables the `onMouseMove` handler\n\n",
|
|
@@ -48861,7 +48883,7 @@
|
|
|
48861
48883
|
"optional": false,
|
|
48862
48884
|
"returnType": "void",
|
|
48863
48885
|
"typeParameters": [],
|
|
48864
|
-
"line":
|
|
48886
|
+
"line": 480,
|
|
48865
48887
|
"deprecated": false,
|
|
48866
48888
|
"deprecationMessage": "",
|
|
48867
48889
|
"rawdescription": "\nMouse move handler. Responsible for updating the value and visual selection based on mouse movement",
|
|
@@ -48884,7 +48906,7 @@
|
|
|
48884
48906
|
"optional": false,
|
|
48885
48907
|
"returnType": "void",
|
|
48886
48908
|
"typeParameters": [],
|
|
48887
|
-
"line":
|
|
48909
|
+
"line": 523,
|
|
48888
48910
|
"deprecated": false,
|
|
48889
48911
|
"deprecationMessage": "",
|
|
48890
48912
|
"rawdescription": "\nDisables the `onMouseMove` handler",
|
|
@@ -48903,7 +48925,7 @@
|
|
|
48903
48925
|
"optional": false,
|
|
48904
48926
|
"returnType": "void",
|
|
48905
48927
|
"typeParameters": [],
|
|
48906
|
-
"line":
|
|
48928
|
+
"line": 346,
|
|
48907
48929
|
"deprecated": false,
|
|
48908
48930
|
"deprecationMessage": "",
|
|
48909
48931
|
"rawdescription": "\nRegister a change propagation function for `ControlValueAccessor`",
|
|
@@ -48933,7 +48955,7 @@
|
|
|
48933
48955
|
"optional": false,
|
|
48934
48956
|
"returnType": "void",
|
|
48935
48957
|
"typeParameters": [],
|
|
48936
|
-
"line":
|
|
48958
|
+
"line": 354,
|
|
48937
48959
|
"deprecated": false,
|
|
48938
48960
|
"deprecationMessage": "",
|
|
48939
48961
|
"rawdescription": "\nRegister a callback to notify when our input has been touched",
|
|
@@ -48963,7 +48985,7 @@
|
|
|
48963
48985
|
"optional": false,
|
|
48964
48986
|
"returnType": "string",
|
|
48965
48987
|
"typeParameters": [],
|
|
48966
|
-
"line":
|
|
48988
|
+
"line": 376,
|
|
48967
48989
|
"deprecated": false,
|
|
48968
48990
|
"deprecationMessage": "",
|
|
48969
48991
|
"rawdescription": "\nHelper function to return the CSS transform `scaleX` function",
|
|
@@ -48999,7 +49021,7 @@
|
|
|
48999
49021
|
"optional": false,
|
|
49000
49022
|
"returnType": "number",
|
|
49001
49023
|
"typeParameters": [],
|
|
49002
|
-
"line":
|
|
49024
|
+
"line": 338,
|
|
49003
49025
|
"deprecated": false,
|
|
49004
49026
|
"deprecationMessage": "",
|
|
49005
49027
|
"jsdoctags": [
|
|
@@ -49029,7 +49051,7 @@
|
|
|
49029
49051
|
"optional": false,
|
|
49030
49052
|
"returnType": "void",
|
|
49031
49053
|
"typeParameters": [],
|
|
49032
|
-
"line":
|
|
49054
|
+
"line": 441,
|
|
49033
49055
|
"deprecated": false,
|
|
49034
49056
|
"deprecationMessage": "",
|
|
49035
49057
|
"rawdescription": "\n\nRange mode only.\nUpdates the track width to span from the low thumb to the high thumb\n",
|
|
@@ -49048,7 +49070,7 @@
|
|
|
49048
49070
|
"optional": false,
|
|
49049
49071
|
"returnType": "void",
|
|
49050
49072
|
"typeParameters": [],
|
|
49051
|
-
"line":
|
|
49073
|
+
"line": 359,
|
|
49052
49074
|
"deprecated": false,
|
|
49053
49075
|
"deprecationMessage": "",
|
|
49054
49076
|
"rawdescription": "\nReceives a value from the model",
|
|
@@ -49074,7 +49096,7 @@
|
|
|
49074
49096
|
"defaultValue": "true",
|
|
49075
49097
|
"deprecated": false,
|
|
49076
49098
|
"deprecationMessage": "",
|
|
49077
|
-
"line":
|
|
49099
|
+
"line": 281,
|
|
49078
49100
|
"type": "boolean",
|
|
49079
49101
|
"decorators": []
|
|
49080
49102
|
}
|
|
@@ -49085,7 +49107,7 @@
|
|
|
49085
49107
|
"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
49108
|
"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
49109
|
"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",
|
|
49110
|
+
"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
49111
|
"assetsDirs": [],
|
|
49090
49112
|
"styleUrlsData": "",
|
|
49091
49113
|
"stylesData": "",
|
|
@@ -49114,7 +49136,7 @@
|
|
|
49114
49136
|
"deprecationMessage": ""
|
|
49115
49137
|
}
|
|
49116
49138
|
],
|
|
49117
|
-
"line":
|
|
49139
|
+
"line": 300,
|
|
49118
49140
|
"jsdoctags": [
|
|
49119
49141
|
{
|
|
49120
49142
|
"name": "elementRef",
|
|
@@ -49166,7 +49188,7 @@
|
|
|
49166
49188
|
}
|
|
49167
49189
|
],
|
|
49168
49190
|
"returnType": "void",
|
|
49169
|
-
"line":
|
|
49191
|
+
"line": 165,
|
|
49170
49192
|
"rawdescription": "\nThe lower bound of our range",
|
|
49171
49193
|
"description": "<p>The lower bound of our range</p>\n",
|
|
49172
49194
|
"jsdoctags": [
|
|
@@ -49185,7 +49207,7 @@
|
|
|
49185
49207
|
"name": "min",
|
|
49186
49208
|
"type": "",
|
|
49187
49209
|
"returnType": "",
|
|
49188
|
-
"line":
|
|
49210
|
+
"line": 171
|
|
49189
49211
|
}
|
|
49190
49212
|
},
|
|
49191
49213
|
"max": {
|
|
@@ -49204,7 +49226,7 @@
|
|
|
49204
49226
|
}
|
|
49205
49227
|
],
|
|
49206
49228
|
"returnType": "void",
|
|
49207
|
-
"line":
|
|
49229
|
+
"line": 175,
|
|
49208
49230
|
"rawdescription": "\nThe upper bound of our range",
|
|
49209
49231
|
"description": "<p>The upper bound of our range</p>\n",
|
|
49210
49232
|
"jsdoctags": [
|
|
@@ -49223,7 +49245,7 @@
|
|
|
49223
49245
|
"name": "max",
|
|
49224
49246
|
"type": "",
|
|
49225
49247
|
"returnType": "",
|
|
49226
|
-
"line":
|
|
49248
|
+
"line": 182
|
|
49227
49249
|
}
|
|
49228
49250
|
},
|
|
49229
49251
|
"value": {
|
|
@@ -49242,7 +49264,7 @@
|
|
|
49242
49264
|
}
|
|
49243
49265
|
],
|
|
49244
49266
|
"returnType": "void",
|
|
49245
|
-
"line":
|
|
49267
|
+
"line": 188,
|
|
49246
49268
|
"rawdescription": "\nSet the initial value. Available for two way binding",
|
|
49247
49269
|
"description": "<p>Set the initial value. Available for two way binding</p>\n",
|
|
49248
49270
|
"jsdoctags": [
|
|
@@ -49261,7 +49283,7 @@
|
|
|
49261
49283
|
"name": "value",
|
|
49262
49284
|
"type": "",
|
|
49263
49285
|
"returnType": "",
|
|
49264
|
-
"line":
|
|
49286
|
+
"line": 249
|
|
49265
49287
|
}
|
|
49266
49288
|
},
|
|
49267
49289
|
"disabled": {
|
|
@@ -49280,7 +49302,7 @@
|
|
|
49280
49302
|
}
|
|
49281
49303
|
],
|
|
49282
49304
|
"returnType": "void",
|
|
49283
|
-
"line":
|
|
49305
|
+
"line": 267,
|
|
49284
49306
|
"rawdescription": "\nDisables the range visually and functionally",
|
|
49285
49307
|
"description": "<p>Disables the range visually and functionally</p>\n",
|
|
49286
49308
|
"jsdoctags": [
|
|
@@ -49299,7 +49321,7 @@
|
|
|
49299
49321
|
"name": "disabled",
|
|
49300
49322
|
"type": "",
|
|
49301
49323
|
"returnType": "",
|
|
49302
|
-
"line":
|
|
49324
|
+
"line": 276
|
|
49303
49325
|
}
|
|
49304
49326
|
}
|
|
49305
49327
|
}
|
|
@@ -85998,8 +86020,8 @@
|
|
|
85998
86020
|
"type": "component",
|
|
85999
86021
|
"linktype": "component",
|
|
86000
86022
|
"name": "Hamburger",
|
|
86001
|
-
"coveragePercent":
|
|
86002
|
-
"coverageCount": "
|
|
86023
|
+
"coveragePercent": 75,
|
|
86024
|
+
"coverageCount": "6/8",
|
|
86003
86025
|
"status": "good"
|
|
86004
86026
|
},
|
|
86005
86027
|
{
|