carbon-components-angular 5.37.0 → 5.38.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/Slider.html +251 -94
- package/docs/documentation/coverage.html +1 -1
- 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 +41 -37
- package/docs/documentation/modules/DatePickerInputModule.html +41 -37
- package/docs/documentation/modules/DatePickerModule/dependencies.svg +38 -38
- package/docs/documentation/modules/DatePickerModule.html +38 -38
- 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/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/TableModule/dependencies.svg +216 -216
- package/docs/documentation/modules/TableModule.html +216 -216
- 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 +4 -4
- package/docs/documentation/modules/ThemeModule.html +4 -4
- package/docs/documentation/modules/TilesModule/dependencies.svg +94 -94
- package/docs/documentation/modules/TilesModule.html +94 -94
- package/docs/documentation/modules/TimePickerSelectModule/dependencies.svg +4 -4
- package/docs/documentation/modules/TimePickerSelectModule.html +4 -4
- package/docs/documentation/modules/ToggleModule/dependencies.svg +20 -20
- package/docs/documentation/modules/ToggleModule.html +20 -20
- package/docs/documentation/modules/ToggletipModule/dependencies.svg +4 -4
- package/docs/documentation/modules/ToggletipModule.html +4 -4
- 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 +185 -137
- package/docs/storybook/iframe.html +2 -2
- package/docs/storybook/{main.b583315a.iframe.bundle.js → main.c3732b9e.iframe.bundle.js} +1 -1
- package/docs/storybook/project.json +1 -1
- package/docs/storybook/{runtime~main.3bc73b8f.iframe.bundle.js → runtime~main.b5fc6cdc.iframe.bundle.js} +1 -1
- package/docs/storybook/{slider-slider-stories.0a70e102.iframe.bundle.js → slider-slider-stories.5884b16a.iframe.bundle.js} +1 -1
- package/esm2020/slider/slider.component.mjs +35 -10
- package/fesm2015/carbon-components-angular-slider.mjs +34 -9
- package/fesm2015/carbon-components-angular-slider.mjs.map +1 -1
- package/fesm2020/carbon-components-angular-slider.mjs +34 -9
- package/fesm2020/carbon-components-angular-slider.mjs.map +1 -1
- package/package.json +1 -1
- package/slider/slider.component.d.ts +5 -1
package/docs/documentation.json
CHANGED
|
@@ -49804,7 +49804,7 @@
|
|
|
49804
49804
|
},
|
|
49805
49805
|
{
|
|
49806
49806
|
"name": "Slider",
|
|
49807
|
-
"id": "component-Slider-
|
|
49807
|
+
"id": "component-Slider-d693d6239eb9329e774b057ed68047aa6b6a6f493428bb2c230e0bbc06c0fbba7bd493dd21826c42cdaa6de0433d5fb03669ee4de1eac9d7ec1cad7c50568660",
|
|
49808
49808
|
"file": "src/slider/slider.component.ts",
|
|
49809
49809
|
"encapsulation": [],
|
|
49810
49810
|
"entryComponents": [],
|
|
@@ -49818,7 +49818,7 @@
|
|
|
49818
49818
|
"selector": "cds-slider, ibm-slider",
|
|
49819
49819
|
"styleUrls": [],
|
|
49820
49820
|
"styles": [],
|
|
49821
|
-
"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
|
|
49821
|
+
"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\n\t\tclass=\"cds--slider-container\"\n\t\t[ngClass]=\"{ 'cds--slider-container--readonly': readonly }\">\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]=\"{\n\t\t\t\t'cds--slider--disabled': disabled,\n\t\t\t\t'cds--slider--readonly': readonly\n\t\t\t}\">\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",
|
|
49822
49822
|
"templateUrl": [],
|
|
49823
49823
|
"viewProviders": [],
|
|
49824
49824
|
"hostDirectives": [],
|
|
@@ -49830,7 +49830,7 @@
|
|
|
49830
49830
|
"deprecationMessage": "",
|
|
49831
49831
|
"rawdescription": "\nSet to `true` for a slider without arrow key interactions.",
|
|
49832
49832
|
"description": "<p>Set to <code>true</code> for a slider without arrow key interactions.</p>\n",
|
|
49833
|
-
"line":
|
|
49833
|
+
"line": 270,
|
|
49834
49834
|
"type": "boolean",
|
|
49835
49835
|
"decorators": []
|
|
49836
49836
|
},
|
|
@@ -49840,7 +49840,7 @@
|
|
|
49840
49840
|
"deprecationMessage": "",
|
|
49841
49841
|
"rawdescription": "\nDisables the range visually and functionally",
|
|
49842
49842
|
"description": "<p>Disables the range visually and functionally</p>\n",
|
|
49843
|
-
"line":
|
|
49843
|
+
"line": 272,
|
|
49844
49844
|
"type": "boolean",
|
|
49845
49845
|
"decorators": []
|
|
49846
49846
|
},
|
|
@@ -49851,7 +49851,7 @@
|
|
|
49851
49851
|
"deprecationMessage": "",
|
|
49852
49852
|
"rawdescription": "\nBase ID for the slider. The min and max labels get IDs `${this.id}-bottom-range` and `${this.id}-top-range` respectively",
|
|
49853
49853
|
"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",
|
|
49854
|
-
"line":
|
|
49854
|
+
"line": 262,
|
|
49855
49855
|
"type": "string",
|
|
49856
49856
|
"decorators": []
|
|
49857
49857
|
},
|
|
@@ -49861,7 +49861,7 @@
|
|
|
49861
49861
|
"deprecationMessage": "",
|
|
49862
49862
|
"rawdescription": "\nSets the text inside the `label` tag",
|
|
49863
49863
|
"description": "<p>Sets the text inside the <code>label</code> tag</p>\n",
|
|
49864
|
-
"line":
|
|
49864
|
+
"line": 268,
|
|
49865
49865
|
"type": "string | TemplateRef<any>",
|
|
49866
49866
|
"decorators": []
|
|
49867
49867
|
},
|
|
@@ -49871,7 +49871,7 @@
|
|
|
49871
49871
|
"deprecationMessage": "",
|
|
49872
49872
|
"rawdescription": "\nThe upper bound of our range",
|
|
49873
49873
|
"description": "<p>The upper bound of our range</p>\n",
|
|
49874
|
-
"line":
|
|
49874
|
+
"line": 180,
|
|
49875
49875
|
"type": "number",
|
|
49876
49876
|
"decorators": []
|
|
49877
49877
|
},
|
|
@@ -49881,10 +49881,20 @@
|
|
|
49881
49881
|
"deprecationMessage": "",
|
|
49882
49882
|
"rawdescription": "\nThe lower bound of our range",
|
|
49883
49883
|
"description": "<p>The lower bound of our range</p>\n",
|
|
49884
|
-
"line":
|
|
49884
|
+
"line": 170,
|
|
49885
49885
|
"type": "number",
|
|
49886
49886
|
"decorators": []
|
|
49887
49887
|
},
|
|
49888
|
+
{
|
|
49889
|
+
"name": "readonly",
|
|
49890
|
+
"deprecated": false,
|
|
49891
|
+
"deprecationMessage": "",
|
|
49892
|
+
"rawdescription": "\nSet to `true` for a readonly state.",
|
|
49893
|
+
"description": "<p>Set to <code>true</code> for a readonly state.</p>\n",
|
|
49894
|
+
"line": 285,
|
|
49895
|
+
"type": "boolean",
|
|
49896
|
+
"decorators": []
|
|
49897
|
+
},
|
|
49888
49898
|
{
|
|
49889
49899
|
"name": "shiftMultiplier",
|
|
49890
49900
|
"defaultValue": "4",
|
|
@@ -49892,7 +49902,7 @@
|
|
|
49892
49902
|
"deprecationMessage": "",
|
|
49893
49903
|
"rawdescription": "\nValue used to \"multiply\" the `step` when using arrow keys to select values",
|
|
49894
49904
|
"description": "<p>Value used to "multiply" the <code>step</code> when using arrow keys to select values</p>\n",
|
|
49895
|
-
"line":
|
|
49905
|
+
"line": 264,
|
|
49896
49906
|
"type": "number",
|
|
49897
49907
|
"decorators": []
|
|
49898
49908
|
},
|
|
@@ -49903,7 +49913,7 @@
|
|
|
49903
49913
|
"deprecationMessage": "",
|
|
49904
49914
|
"rawdescription": "\nSet to `true` for a loading slider",
|
|
49905
49915
|
"description": "<p>Set to <code>true</code> for a loading slider</p>\n",
|
|
49906
|
-
"line":
|
|
49916
|
+
"line": 266,
|
|
49907
49917
|
"type": "boolean",
|
|
49908
49918
|
"decorators": []
|
|
49909
49919
|
},
|
|
@@ -49914,7 +49924,7 @@
|
|
|
49914
49924
|
"deprecationMessage": "",
|
|
49915
49925
|
"rawdescription": "\nThe interval for our range",
|
|
49916
49926
|
"description": "<p>The interval for our range</p>\n",
|
|
49917
|
-
"line":
|
|
49927
|
+
"line": 191,
|
|
49918
49928
|
"type": "number",
|
|
49919
49929
|
"decorators": []
|
|
49920
49930
|
},
|
|
@@ -49924,7 +49934,7 @@
|
|
|
49924
49934
|
"deprecationMessage": "",
|
|
49925
49935
|
"rawdescription": "\nSet the initial value. Available for two way binding",
|
|
49926
49936
|
"description": "<p>Set the initial value. Available for two way binding</p>\n",
|
|
49927
|
-
"line":
|
|
49937
|
+
"line": 193,
|
|
49928
49938
|
"type": "any",
|
|
49929
49939
|
"decorators": []
|
|
49930
49940
|
}
|
|
@@ -49937,7 +49947,7 @@
|
|
|
49937
49947
|
"deprecationMessage": "",
|
|
49938
49948
|
"rawdescription": "\nEmits every time a new value is selected",
|
|
49939
49949
|
"description": "<p>Emits every time a new value is selected</p>\n",
|
|
49940
|
-
"line":
|
|
49950
|
+
"line": 297,
|
|
49941
49951
|
"type": "EventEmitter<number | []>"
|
|
49942
49952
|
}
|
|
49943
49953
|
],
|
|
@@ -49950,7 +49960,7 @@
|
|
|
49950
49960
|
"type": "",
|
|
49951
49961
|
"optional": false,
|
|
49952
49962
|
"description": "",
|
|
49953
|
-
"line":
|
|
49963
|
+
"line": 306,
|
|
49954
49964
|
"modifierKind": [
|
|
49955
49965
|
125
|
|
49956
49966
|
]
|
|
@@ -49962,7 +49972,7 @@
|
|
|
49962
49972
|
"type": "ElementRef",
|
|
49963
49973
|
"optional": false,
|
|
49964
49974
|
"description": "",
|
|
49965
|
-
"line":
|
|
49975
|
+
"line": 302,
|
|
49966
49976
|
"decorators": [
|
|
49967
49977
|
{
|
|
49968
49978
|
"name": "ViewChild",
|
|
@@ -49981,7 +49991,7 @@
|
|
|
49981
49991
|
"type": "number",
|
|
49982
49992
|
"optional": false,
|
|
49983
49993
|
"description": "",
|
|
49984
|
-
"line":
|
|
49994
|
+
"line": 308,
|
|
49985
49995
|
"modifierKind": [
|
|
49986
49996
|
125
|
|
49987
49997
|
]
|
|
@@ -49994,7 +50004,7 @@
|
|
|
49994
50004
|
"type": "",
|
|
49995
50005
|
"optional": false,
|
|
49996
50006
|
"description": "",
|
|
49997
|
-
"line":
|
|
50007
|
+
"line": 298,
|
|
49998
50008
|
"decorators": [
|
|
49999
50009
|
{
|
|
50000
50010
|
"name": "HostBinding",
|
|
@@ -50013,7 +50023,7 @@
|
|
|
50013
50023
|
"type": "",
|
|
50014
50024
|
"optional": false,
|
|
50015
50025
|
"description": "",
|
|
50016
|
-
"line":
|
|
50026
|
+
"line": 305,
|
|
50017
50027
|
"modifierKind": [
|
|
50018
50028
|
125
|
|
50019
50029
|
]
|
|
@@ -50026,7 +50036,7 @@
|
|
|
50026
50036
|
"type": "function",
|
|
50027
50037
|
"optional": false,
|
|
50028
50038
|
"description": "<p>Callback to notify the model when our input has been touched</p>\n",
|
|
50029
|
-
"line":
|
|
50039
|
+
"line": 369,
|
|
50030
50040
|
"rawdescription": "\nCallback to notify the model when our input has been touched"
|
|
50031
50041
|
},
|
|
50032
50042
|
{
|
|
@@ -50037,7 +50047,7 @@
|
|
|
50037
50047
|
"type": "",
|
|
50038
50048
|
"optional": false,
|
|
50039
50049
|
"description": "<p>Send changes back to the model</p>\n",
|
|
50040
|
-
"line":
|
|
50050
|
+
"line": 361,
|
|
50041
50051
|
"rawdescription": "\nSend changes back to the model"
|
|
50042
50052
|
},
|
|
50043
50053
|
{
|
|
@@ -50047,7 +50057,7 @@
|
|
|
50047
50057
|
"type": "ElementRef",
|
|
50048
50058
|
"optional": false,
|
|
50049
50059
|
"description": "",
|
|
50050
|
-
"line":
|
|
50060
|
+
"line": 303,
|
|
50051
50061
|
"decorators": [
|
|
50052
50062
|
{
|
|
50053
50063
|
"name": "ViewChild",
|
|
@@ -50065,7 +50075,7 @@
|
|
|
50065
50075
|
"type": "QueryList<ElementRef>",
|
|
50066
50076
|
"optional": false,
|
|
50067
50077
|
"description": "",
|
|
50068
|
-
"line":
|
|
50078
|
+
"line": 299,
|
|
50069
50079
|
"decorators": [
|
|
50070
50080
|
{
|
|
50071
50081
|
"name": "ViewChildren",
|
|
@@ -50084,7 +50094,7 @@
|
|
|
50084
50094
|
"type": "",
|
|
50085
50095
|
"optional": false,
|
|
50086
50096
|
"description": "",
|
|
50087
|
-
"line":
|
|
50097
|
+
"line": 307,
|
|
50088
50098
|
"modifierKind": [
|
|
50089
50099
|
125
|
|
50090
50100
|
]
|
|
@@ -50096,7 +50106,7 @@
|
|
|
50096
50106
|
"type": "ElementRef",
|
|
50097
50107
|
"optional": false,
|
|
50098
50108
|
"description": "",
|
|
50099
|
-
"line":
|
|
50109
|
+
"line": 301,
|
|
50100
50110
|
"decorators": [
|
|
50101
50111
|
{
|
|
50102
50112
|
"name": "ViewChild",
|
|
@@ -50122,7 +50132,7 @@
|
|
|
50122
50132
|
"optional": false,
|
|
50123
50133
|
"returnType": "any",
|
|
50124
50134
|
"typeParameters": [],
|
|
50125
|
-
"line":
|
|
50135
|
+
"line": 410,
|
|
50126
50136
|
"deprecated": false,
|
|
50127
50137
|
"deprecationMessage": "",
|
|
50128
50138
|
"rawdescription": "\nConverts a given \"real\" value to a px value we can update the view with",
|
|
@@ -50152,7 +50162,7 @@
|
|
|
50152
50162
|
"optional": false,
|
|
50153
50163
|
"returnType": "number",
|
|
50154
50164
|
"typeParameters": [],
|
|
50155
|
-
"line":
|
|
50165
|
+
"line": 399,
|
|
50156
50166
|
"deprecated": false,
|
|
50157
50167
|
"deprecationMessage": "",
|
|
50158
50168
|
"rawdescription": "\nConverts a given px value to a \"real\" value in our range",
|
|
@@ -50190,7 +50200,7 @@
|
|
|
50190
50200
|
"optional": false,
|
|
50191
50201
|
"returnType": "void",
|
|
50192
50202
|
"typeParameters": [],
|
|
50193
|
-
"line":
|
|
50203
|
+
"line": 443,
|
|
50194
50204
|
"deprecated": false,
|
|
50195
50205
|
"deprecationMessage": "",
|
|
50196
50206
|
"rawdescription": "\n\nDecrements the value by the step value, or the step value multiplied by the `multiplier` argument.\n\n",
|
|
@@ -50198,8 +50208,8 @@
|
|
|
50198
50208
|
"jsdoctags": [
|
|
50199
50209
|
{
|
|
50200
50210
|
"name": {
|
|
50201
|
-
"pos":
|
|
50202
|
-
"end":
|
|
50211
|
+
"pos": 12686,
|
|
50212
|
+
"end": 12696,
|
|
50203
50213
|
"flags": 16842752,
|
|
50204
50214
|
"modifierFlagsCache": 0,
|
|
50205
50215
|
"transformFlags": 0,
|
|
@@ -50211,8 +50221,8 @@
|
|
|
50211
50221
|
"deprecationMessage": "",
|
|
50212
50222
|
"defaultValue": "1",
|
|
50213
50223
|
"tagName": {
|
|
50214
|
-
"pos":
|
|
50215
|
-
"end":
|
|
50224
|
+
"pos": 12677,
|
|
50225
|
+
"end": 12685,
|
|
50216
50226
|
"flags": 16842752,
|
|
50217
50227
|
"modifierFlagsCache": 0,
|
|
50218
50228
|
"transformFlags": 0,
|
|
@@ -50246,7 +50256,7 @@
|
|
|
50246
50256
|
"optional": false,
|
|
50247
50257
|
"returnType": "number",
|
|
50248
50258
|
"typeParameters": [],
|
|
50249
|
-
"line":
|
|
50259
|
+
"line": 384,
|
|
50250
50260
|
"deprecated": false,
|
|
50251
50261
|
"deprecationMessage": "",
|
|
50252
50262
|
"rawdescription": "\n\nReturns the amount of \"completeness\" of a value as a fraction of the total track width\n",
|
|
@@ -50284,7 +50294,7 @@
|
|
|
50284
50294
|
"optional": false,
|
|
50285
50295
|
"returnType": "void",
|
|
50286
50296
|
"typeParameters": [],
|
|
50287
|
-
"line":
|
|
50297
|
+
"line": 433,
|
|
50288
50298
|
"deprecated": false,
|
|
50289
50299
|
"deprecationMessage": "",
|
|
50290
50300
|
"rawdescription": "\n\nIncrements the value by the step value, or the step value multiplied by the `multiplier` argument.\n\n",
|
|
@@ -50292,8 +50302,8 @@
|
|
|
50292
50302
|
"jsdoctags": [
|
|
50293
50303
|
{
|
|
50294
50304
|
"name": {
|
|
50295
|
-
"pos":
|
|
50296
|
-
"end":
|
|
50305
|
+
"pos": 12331,
|
|
50306
|
+
"end": 12341,
|
|
50297
50307
|
"flags": 16842752,
|
|
50298
50308
|
"modifierFlagsCache": 0,
|
|
50299
50309
|
"transformFlags": 0,
|
|
@@ -50305,8 +50315,8 @@
|
|
|
50305
50315
|
"deprecationMessage": "",
|
|
50306
50316
|
"defaultValue": "1",
|
|
50307
50317
|
"tagName": {
|
|
50308
|
-
"pos":
|
|
50309
|
-
"end":
|
|
50318
|
+
"pos": 12322,
|
|
50319
|
+
"end": 12330,
|
|
50310
50320
|
"flags": 16842752,
|
|
50311
50321
|
"modifierFlagsCache": 0,
|
|
50312
50322
|
"transformFlags": 0,
|
|
@@ -50333,7 +50343,7 @@
|
|
|
50333
50343
|
"optional": false,
|
|
50334
50344
|
"returnType": "boolean",
|
|
50335
50345
|
"typeParameters": [],
|
|
50336
|
-
"line":
|
|
50346
|
+
"line": 451,
|
|
50337
50347
|
"deprecated": false,
|
|
50338
50348
|
"deprecationMessage": "",
|
|
50339
50349
|
"rawdescription": "\n\nDetermines if the slider is in range mode.\n",
|
|
@@ -50352,7 +50362,7 @@
|
|
|
50352
50362
|
"optional": false,
|
|
50353
50363
|
"returnType": "boolean",
|
|
50354
50364
|
"typeParameters": [],
|
|
50355
|
-
"line":
|
|
50365
|
+
"line": 566,
|
|
50356
50366
|
"deprecated": false,
|
|
50357
50367
|
"deprecationMessage": "",
|
|
50358
50368
|
"modifierKind": [
|
|
@@ -50389,7 +50399,7 @@
|
|
|
50389
50399
|
"optional": false,
|
|
50390
50400
|
"returnType": "void",
|
|
50391
50401
|
"typeParameters": [],
|
|
50392
|
-
"line":
|
|
50402
|
+
"line": 466,
|
|
50393
50403
|
"deprecated": false,
|
|
50394
50404
|
"deprecationMessage": "",
|
|
50395
50405
|
"rawdescription": "\nChange handler for the optional input",
|
|
@@ -50428,7 +50438,7 @@
|
|
|
50428
50438
|
"optional": false,
|
|
50429
50439
|
"returnType": "void",
|
|
50430
50440
|
"typeParameters": [],
|
|
50431
|
-
"line":
|
|
50441
|
+
"line": 475,
|
|
50432
50442
|
"deprecated": false,
|
|
50433
50443
|
"deprecationMessage": "",
|
|
50434
50444
|
"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",
|
|
@@ -50457,7 +50467,7 @@
|
|
|
50457
50467
|
"optional": false,
|
|
50458
50468
|
"returnType": "void",
|
|
50459
50469
|
"typeParameters": [],
|
|
50460
|
-
"line":
|
|
50470
|
+
"line": 493,
|
|
50461
50471
|
"deprecated": false,
|
|
50462
50472
|
"deprecationMessage": "",
|
|
50463
50473
|
"rawdescription": "\nFocus handler for the optional input",
|
|
@@ -50493,7 +50503,7 @@
|
|
|
50493
50503
|
"optional": false,
|
|
50494
50504
|
"returnType": "void",
|
|
50495
50505
|
"typeParameters": [],
|
|
50496
|
-
"line":
|
|
50506
|
+
"line": 550,
|
|
50497
50507
|
"deprecated": false,
|
|
50498
50508
|
"deprecationMessage": "",
|
|
50499
50509
|
"rawdescription": "\n\nCalls `incrementValue` for ArrowRight and ArrowUp, `decrementValue` for ArrowLeft and ArrowDown.\n\n",
|
|
@@ -50540,7 +50550,7 @@
|
|
|
50540
50550
|
"optional": false,
|
|
50541
50551
|
"returnType": "void",
|
|
50542
50552
|
"typeParameters": [],
|
|
50543
|
-
"line":
|
|
50553
|
+
"line": 532,
|
|
50544
50554
|
"deprecated": false,
|
|
50545
50555
|
"deprecationMessage": "",
|
|
50546
50556
|
"rawdescription": "\n\nEnables the `onMouseMove` handler\n\n",
|
|
@@ -50580,7 +50590,7 @@
|
|
|
50580
50590
|
"optional": false,
|
|
50581
50591
|
"returnType": "void",
|
|
50582
50592
|
"typeParameters": [],
|
|
50583
|
-
"line":
|
|
50593
|
+
"line": 498,
|
|
50584
50594
|
"deprecated": false,
|
|
50585
50595
|
"deprecationMessage": "",
|
|
50586
50596
|
"rawdescription": "\nMouse move handler. Responsible for updating the value and visual selection based on mouse movement",
|
|
@@ -50603,7 +50613,7 @@
|
|
|
50603
50613
|
"optional": false,
|
|
50604
50614
|
"returnType": "void",
|
|
50605
50615
|
"typeParameters": [],
|
|
50606
|
-
"line":
|
|
50616
|
+
"line": 541,
|
|
50607
50617
|
"deprecated": false,
|
|
50608
50618
|
"deprecationMessage": "",
|
|
50609
50619
|
"rawdescription": "\nDisables the `onMouseMove` handler",
|
|
@@ -50622,7 +50632,7 @@
|
|
|
50622
50632
|
"optional": false,
|
|
50623
50633
|
"returnType": "void",
|
|
50624
50634
|
"typeParameters": [],
|
|
50625
|
-
"line":
|
|
50635
|
+
"line": 364,
|
|
50626
50636
|
"deprecated": false,
|
|
50627
50637
|
"deprecationMessage": "",
|
|
50628
50638
|
"rawdescription": "\nRegister a change propagation function for `ControlValueAccessor`",
|
|
@@ -50652,7 +50662,7 @@
|
|
|
50652
50662
|
"optional": false,
|
|
50653
50663
|
"returnType": "void",
|
|
50654
50664
|
"typeParameters": [],
|
|
50655
|
-
"line":
|
|
50665
|
+
"line": 372,
|
|
50656
50666
|
"deprecated": false,
|
|
50657
50667
|
"deprecationMessage": "",
|
|
50658
50668
|
"rawdescription": "\nRegister a callback to notify when our input has been touched",
|
|
@@ -50682,7 +50692,7 @@
|
|
|
50682
50692
|
"optional": false,
|
|
50683
50693
|
"returnType": "string",
|
|
50684
50694
|
"typeParameters": [],
|
|
50685
|
-
"line":
|
|
50695
|
+
"line": 394,
|
|
50686
50696
|
"deprecated": false,
|
|
50687
50697
|
"deprecationMessage": "",
|
|
50688
50698
|
"rawdescription": "\nHelper function to return the CSS transform `scaleX` function",
|
|
@@ -50718,7 +50728,7 @@
|
|
|
50718
50728
|
"optional": false,
|
|
50719
50729
|
"returnType": "number",
|
|
50720
50730
|
"typeParameters": [],
|
|
50721
|
-
"line":
|
|
50731
|
+
"line": 356,
|
|
50722
50732
|
"deprecated": false,
|
|
50723
50733
|
"deprecationMessage": "",
|
|
50724
50734
|
"jsdoctags": [
|
|
@@ -50748,7 +50758,7 @@
|
|
|
50748
50758
|
"optional": false,
|
|
50749
50759
|
"returnType": "void",
|
|
50750
50760
|
"typeParameters": [],
|
|
50751
|
-
"line":
|
|
50761
|
+
"line": 459,
|
|
50752
50762
|
"deprecated": false,
|
|
50753
50763
|
"deprecationMessage": "",
|
|
50754
50764
|
"rawdescription": "\n\nRange mode only.\nUpdates the track width to span from the low thumb to the high thumb\n",
|
|
@@ -50767,7 +50777,7 @@
|
|
|
50767
50777
|
"optional": false,
|
|
50768
50778
|
"returnType": "void",
|
|
50769
50779
|
"typeParameters": [],
|
|
50770
|
-
"line":
|
|
50780
|
+
"line": 377,
|
|
50771
50781
|
"deprecated": false,
|
|
50772
50782
|
"deprecationMessage": "",
|
|
50773
50783
|
"rawdescription": "\nReceives a value from the model",
|
|
@@ -50793,7 +50803,7 @@
|
|
|
50793
50803
|
"defaultValue": "true",
|
|
50794
50804
|
"deprecated": false,
|
|
50795
50805
|
"deprecationMessage": "",
|
|
50796
|
-
"line":
|
|
50806
|
+
"line": 298,
|
|
50797
50807
|
"type": "boolean",
|
|
50798
50808
|
"decorators": []
|
|
50799
50809
|
}
|
|
@@ -50804,7 +50814,7 @@
|
|
|
50804
50814
|
"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<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-typescript\">import { SliderModule } from 'carbon-components-angular';</code></pre></div><p>The simplest possible slider usage looks something like:</p>\n<b>Example :</b><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<b>Example :</b><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",
|
|
50805
50815
|
"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 { SliderModule } 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",
|
|
50806
50816
|
"type": "component",
|
|
50807
|
-
"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 { SliderModule } 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",
|
|
50817
|
+
"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 { SliderModule } 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\n\t\t\t\tclass=\"cds--slider-container\"\n\t\t\t\t[ngClass]=\"{ 'cds--slider-container--readonly': readonly }\">\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]=\"{\n\t\t\t\t\t\t'cds--slider--disabled': disabled,\n\t\t\t\t\t\t'cds--slider--readonly': readonly\n\t\t\t\t\t}\">\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/** Set to `true` for a readonly state. */\n\t@Input() set readonly(v: boolean) {\n\t\tthis._readonly = 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.readOnly = v);\n\t\t}\n\t}\n\tget readonly() {\n\t\treturn this._readonly;\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 _readonly = 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 || this.readonly) { 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.readonly || !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 || this.readonly) { 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 || this.readonly) {\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",
|
|
50808
50818
|
"assetsDirs": [],
|
|
50809
50819
|
"styleUrlsData": "",
|
|
50810
50820
|
"stylesData": "",
|
|
@@ -50833,7 +50843,7 @@
|
|
|
50833
50843
|
"deprecationMessage": ""
|
|
50834
50844
|
}
|
|
50835
50845
|
],
|
|
50836
|
-
"line":
|
|
50846
|
+
"line": 318,
|
|
50837
50847
|
"jsdoctags": [
|
|
50838
50848
|
{
|
|
50839
50849
|
"name": "elementRef",
|
|
@@ -50886,7 +50896,7 @@
|
|
|
50886
50896
|
}
|
|
50887
50897
|
],
|
|
50888
50898
|
"returnType": "void",
|
|
50889
|
-
"line":
|
|
50899
|
+
"line": 170,
|
|
50890
50900
|
"rawdescription": "\nThe lower bound of our range",
|
|
50891
50901
|
"description": "<p>The lower bound of our range</p>\n",
|
|
50892
50902
|
"jsdoctags": [
|
|
@@ -50905,7 +50915,7 @@
|
|
|
50905
50915
|
"name": "min",
|
|
50906
50916
|
"type": "",
|
|
50907
50917
|
"returnType": "",
|
|
50908
|
-
"line":
|
|
50918
|
+
"line": 176
|
|
50909
50919
|
}
|
|
50910
50920
|
},
|
|
50911
50921
|
"max": {
|
|
@@ -50924,7 +50934,7 @@
|
|
|
50924
50934
|
}
|
|
50925
50935
|
],
|
|
50926
50936
|
"returnType": "void",
|
|
50927
|
-
"line":
|
|
50937
|
+
"line": 180,
|
|
50928
50938
|
"rawdescription": "\nThe upper bound of our range",
|
|
50929
50939
|
"description": "<p>The upper bound of our range</p>\n",
|
|
50930
50940
|
"jsdoctags": [
|
|
@@ -50943,7 +50953,7 @@
|
|
|
50943
50953
|
"name": "max",
|
|
50944
50954
|
"type": "",
|
|
50945
50955
|
"returnType": "",
|
|
50946
|
-
"line":
|
|
50956
|
+
"line": 187
|
|
50947
50957
|
}
|
|
50948
50958
|
},
|
|
50949
50959
|
"value": {
|
|
@@ -50962,7 +50972,7 @@
|
|
|
50962
50972
|
}
|
|
50963
50973
|
],
|
|
50964
50974
|
"returnType": "void",
|
|
50965
|
-
"line":
|
|
50975
|
+
"line": 193,
|
|
50966
50976
|
"rawdescription": "\nSet the initial value. Available for two way binding",
|
|
50967
50977
|
"description": "<p>Set the initial value. Available for two way binding</p>\n",
|
|
50968
50978
|
"jsdoctags": [
|
|
@@ -50981,7 +50991,7 @@
|
|
|
50981
50991
|
"name": "value",
|
|
50982
50992
|
"type": "",
|
|
50983
50993
|
"returnType": "",
|
|
50984
|
-
"line":
|
|
50994
|
+
"line": 254
|
|
50985
50995
|
}
|
|
50986
50996
|
},
|
|
50987
50997
|
"disabled": {
|
|
@@ -51000,7 +51010,7 @@
|
|
|
51000
51010
|
}
|
|
51001
51011
|
],
|
|
51002
51012
|
"returnType": "void",
|
|
51003
|
-
"line":
|
|
51013
|
+
"line": 272,
|
|
51004
51014
|
"rawdescription": "\nDisables the range visually and functionally",
|
|
51005
51015
|
"description": "<p>Disables the range visually and functionally</p>\n",
|
|
51006
51016
|
"jsdoctags": [
|
|
@@ -51019,7 +51029,45 @@
|
|
|
51019
51029
|
"name": "disabled",
|
|
51020
51030
|
"type": "",
|
|
51021
51031
|
"returnType": "",
|
|
51022
|
-
"line":
|
|
51032
|
+
"line": 281
|
|
51033
|
+
}
|
|
51034
|
+
},
|
|
51035
|
+
"readonly": {
|
|
51036
|
+
"name": "readonly",
|
|
51037
|
+
"setSignature": {
|
|
51038
|
+
"name": "readonly",
|
|
51039
|
+
"type": "void",
|
|
51040
|
+
"deprecated": false,
|
|
51041
|
+
"deprecationMessage": "",
|
|
51042
|
+
"args": [
|
|
51043
|
+
{
|
|
51044
|
+
"name": "v",
|
|
51045
|
+
"type": "boolean",
|
|
51046
|
+
"deprecated": false,
|
|
51047
|
+
"deprecationMessage": ""
|
|
51048
|
+
}
|
|
51049
|
+
],
|
|
51050
|
+
"returnType": "void",
|
|
51051
|
+
"line": 285,
|
|
51052
|
+
"rawdescription": "\nSet to `true` for a readonly state.",
|
|
51053
|
+
"description": "<p>Set to <code>true</code> for a readonly state.</p>\n",
|
|
51054
|
+
"jsdoctags": [
|
|
51055
|
+
{
|
|
51056
|
+
"name": "v",
|
|
51057
|
+
"type": "boolean",
|
|
51058
|
+
"deprecated": false,
|
|
51059
|
+
"deprecationMessage": "",
|
|
51060
|
+
"tagName": {
|
|
51061
|
+
"text": "param"
|
|
51062
|
+
}
|
|
51063
|
+
}
|
|
51064
|
+
]
|
|
51065
|
+
},
|
|
51066
|
+
"getSignature": {
|
|
51067
|
+
"name": "readonly",
|
|
51068
|
+
"type": "",
|
|
51069
|
+
"returnType": "",
|
|
51070
|
+
"line": 293
|
|
51023
51071
|
}
|
|
51024
51072
|
}
|
|
51025
51073
|
}
|
|
@@ -71360,7 +71408,7 @@
|
|
|
71360
71408
|
"name": "Basic",
|
|
71361
71409
|
"ctype": "miscellaneous",
|
|
71362
71410
|
"subtype": "variable",
|
|
71363
|
-
"file": "src/
|
|
71411
|
+
"file": "src/button/button-set.stories.ts",
|
|
71364
71412
|
"deprecated": false,
|
|
71365
71413
|
"deprecationMessage": "",
|
|
71366
71414
|
"type": "",
|
|
@@ -71370,7 +71418,7 @@
|
|
|
71370
71418
|
"name": "Basic",
|
|
71371
71419
|
"ctype": "miscellaneous",
|
|
71372
71420
|
"subtype": "variable",
|
|
71373
|
-
"file": "src/button/button
|
|
71421
|
+
"file": "src/button/button.stories.ts",
|
|
71374
71422
|
"deprecated": false,
|
|
71375
71423
|
"deprecationMessage": "",
|
|
71376
71424
|
"type": "",
|
|
@@ -71380,7 +71428,7 @@
|
|
|
71380
71428
|
"name": "Basic",
|
|
71381
71429
|
"ctype": "miscellaneous",
|
|
71382
71430
|
"subtype": "variable",
|
|
71383
|
-
"file": "src/button/button.stories.ts",
|
|
71431
|
+
"file": "src/button/icon-button.stories.ts",
|
|
71384
71432
|
"deprecated": false,
|
|
71385
71433
|
"deprecationMessage": "",
|
|
71386
71434
|
"type": "",
|
|
@@ -71390,7 +71438,7 @@
|
|
|
71390
71438
|
"name": "Basic",
|
|
71391
71439
|
"ctype": "miscellaneous",
|
|
71392
71440
|
"subtype": "variable",
|
|
71393
|
-
"file": "src/
|
|
71441
|
+
"file": "src/breadcrumb/breadcrumb.stories.ts",
|
|
71394
71442
|
"deprecated": false,
|
|
71395
71443
|
"deprecationMessage": "",
|
|
71396
71444
|
"type": "",
|
|
@@ -73321,7 +73369,7 @@
|
|
|
73321
73369
|
"deprecated": false,
|
|
73322
73370
|
"deprecationMessage": "",
|
|
73323
73371
|
"type": "",
|
|
73324
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-slider\n\t\t\t[label]=\"label\"\n\t\t\t[min]=\"min\"\n\t\t\t[max]=\"max\"\n\t\t\t[step]=\"step\"\n\t\t\t[value]=\"value\"\n\t\t\t[shiftMultiplier]=\"shiftMultiplier\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\taria-Label=\"Label for slider value\"\n\t\t\t(valueChange)=\"valueChange($event)\">\n\t\t\t<span minLabel>{{minLabel}}</span>\n\t\t\t<span maxLabel>{{maxLabel}}</span>\n\t\t\t<input [ngClass]=\"{'cds--text-input--light': theme === 'light'}\"/>\n\t\t\t<input [ngClass]=\"{'cds--text-input--light': theme === 'light'}\"/>\n\t\t</cds-slider>\n\t`\n})"
|
|
73372
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-slider\n\t\t\t[label]=\"label\"\n\t\t\t[min]=\"min\"\n\t\t\t[max]=\"max\"\n\t\t\t[step]=\"step\"\n\t\t\t[value]=\"value\"\n\t\t\t[shiftMultiplier]=\"shiftMultiplier\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[readonly]=\"readonly\"\n\t\t\taria-Label=\"Label for slider value\"\n\t\t\t(valueChange)=\"valueChange($event)\">\n\t\t\t<span minLabel>{{minLabel}}</span>\n\t\t\t<span maxLabel>{{maxLabel}}</span>\n\t\t\t<input [ngClass]=\"{'cds--text-input--light': theme === 'light'}\"/>\n\t\t\t<input [ngClass]=\"{'cds--text-input--light': theme === 'light'}\"/>\n\t\t</cds-slider>\n\t`\n})"
|
|
73325
73373
|
},
|
|
73326
73374
|
{
|
|
73327
73375
|
"name": "ReactiveForms",
|
|
@@ -74072,41 +74120,41 @@
|
|
|
74072
74120
|
"name": "Template",
|
|
74073
74121
|
"ctype": "miscellaneous",
|
|
74074
74122
|
"subtype": "variable",
|
|
74075
|
-
"file": "src/
|
|
74123
|
+
"file": "src/button/button-set.stories.ts",
|
|
74076
74124
|
"deprecated": false,
|
|
74077
74125
|
"deprecationMessage": "",
|
|
74078
74126
|
"type": "",
|
|
74079
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-
|
|
74127
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-button-set>\n\t\t\t<button cdsButton=\"secondary\" [size]=\"size\" [isExpressive]=\"isExpressive\">Button</button>\n\t\t\t<button cdsButton [size]=\"size\" [isExpressive]=\"isExpressive\">Button</button>\n\t\t</cds-button-set>\n\t`\n})"
|
|
74080
74128
|
},
|
|
74081
74129
|
{
|
|
74082
74130
|
"name": "Template",
|
|
74083
74131
|
"ctype": "miscellaneous",
|
|
74084
74132
|
"subtype": "variable",
|
|
74085
|
-
"file": "src/button/button
|
|
74133
|
+
"file": "src/button/button.stories.ts",
|
|
74086
74134
|
"deprecated": false,
|
|
74087
74135
|
"deprecationMessage": "",
|
|
74088
74136
|
"type": "",
|
|
74089
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<
|
|
74137
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<button\n\t\t\t[cdsButton]=\"kind\"\n\t\t\t[size]=\"size\"\n\t\t\t[isExpressive]=\"isExpressive\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t(click)=\"onClick($event)\"\n\t\t\t(mouseenter)=\"onMouseEnter($event)\"\n\t\t\t(mouseleave)=\"onMouseLeave($event)\"\n\t\t\t(focus)=\"onFocus($event)\"\n\t\t\t(blur)=\"onBlur($event)\">\n\t\t\tButton\n\t\t</button>\n\t`\n})"
|
|
74090
74138
|
},
|
|
74091
74139
|
{
|
|
74092
74140
|
"name": "Template",
|
|
74093
74141
|
"ctype": "miscellaneous",
|
|
74094
74142
|
"subtype": "variable",
|
|
74095
|
-
"file": "src/button/button.stories.ts",
|
|
74143
|
+
"file": "src/button/icon-button.stories.ts",
|
|
74096
74144
|
"deprecated": false,
|
|
74097
74145
|
"deprecationMessage": "",
|
|
74098
74146
|
"type": "",
|
|
74099
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<button\n\t\t\t[
|
|
74147
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-icon-button\n\t\t\tbuttonId=\"icon-btn1\"\n\t\t\ttype=\"button\"\n\t\t\t[kind]=\"kind\"\n\t\t\t[size]=\"size\"\n\t\t\t[align]=\"align\"\n\t\t\t[buttonNgClass]=\"buttonNgClass\"\n\t\t\t[buttonAttributes]=\"buttonAttributes\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\tdescription=\"Icon Description\"\n\t\t\t(click)=\"onClick($event)\"\n\t\t\t(mouseenter)=\"onMouseEnter($event)\"\n\t\t\t(mouseleave)=\"onMouseLeave($event)\"\n\t\t\t(focus)=\"onFocus($event)\"\n\t\t\t(blur)=\"onBlur($event)\">\n\t\t\t<svg class=\"cds--btn__icon\" cdsIcon=\"copy\" size=\"16\"></svg>\n\t\t</cds-icon-button>\n\t`\n})"
|
|
74100
74148
|
},
|
|
74101
74149
|
{
|
|
74102
74150
|
"name": "Template",
|
|
74103
74151
|
"ctype": "miscellaneous",
|
|
74104
74152
|
"subtype": "variable",
|
|
74105
|
-
"file": "src/
|
|
74153
|
+
"file": "src/breadcrumb/breadcrumb.stories.ts",
|
|
74106
74154
|
"deprecated": false,
|
|
74107
74155
|
"deprecationMessage": "",
|
|
74108
74156
|
"type": "",
|
|
74109
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-
|
|
74157
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-breadcrumb [noTrailingSlash]=\"noTrailingSlash\">\n\t\t\t<cds-breadcrumb-item href=\"#1\">\n\t\t\t\tBreadcrumb 1\n\t\t\t</cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item href=\"#2\">\n\t\t\t\tBreadcrumb 2\n\t\t\t</cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item href=\"#3\">\n\t\t\t\tBreadcrumb 3\n\t\t\t</cds-breadcrumb-item>\n\t\t</cds-breadcrumb>\n\t`\n})"
|
|
74110
74158
|
},
|
|
74111
74159
|
{
|
|
74112
74160
|
"name": "Template",
|
|
@@ -74426,7 +74474,7 @@
|
|
|
74426
74474
|
"deprecated": false,
|
|
74427
74475
|
"deprecationMessage": "",
|
|
74428
74476
|
"type": "",
|
|
74429
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-slider\n\t\t\t[label]=\"label\"\n\t\t\t[min]=\"min\"\n\t\t\t[max]=\"max\"\n\t\t\t[step]=\"step\"\n\t\t\t[value]=\"value\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[shiftMultiplier]=\"shiftMultiplier\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\taria-Label=\"Label for slider value\"\n\t\t\t(valueChange)=\"valueChange($event)\">\n\t\t\t<span minLabel>{{minLabel}}</span>\n\t\t\t<span maxLabel>{{maxLabel}}</span>\n\t\t\t<input [ngClass]=\"{'cds--text-input--light': theme === 'light'}\"/>\n\t\t</cds-slider>\n\t`\n})"
|
|
74477
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-slider\n\t\t\t[label]=\"label\"\n\t\t\t[min]=\"min\"\n\t\t\t[max]=\"max\"\n\t\t\t[step]=\"step\"\n\t\t\t[value]=\"value\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[shiftMultiplier]=\"shiftMultiplier\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[readonly]=\"readonly\"\n\t\t\taria-Label=\"Label for slider value\"\n\t\t\t(valueChange)=\"valueChange($event)\">\n\t\t\t<span minLabel>{{minLabel}}</span>\n\t\t\t<span maxLabel>{{maxLabel}}</span>\n\t\t\t<input [ngClass]=\"{'cds--text-input--light': theme === 'light'}\"/>\n\t\t</cds-slider>\n\t`\n})"
|
|
74430
74478
|
},
|
|
74431
74479
|
{
|
|
74432
74480
|
"name": "Template",
|
|
@@ -77872,199 +77920,199 @@
|
|
|
77872
77920
|
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div style=\"width: 500px\">\n\t\t\t<cds-accordion>\n\t\t\t\t<cds-accordion-item [title]=\"title\" (selected)=\"selected($event)\">\n\t\t\t\t\tLorem ipsum dolor sit amet, \\\n\t\t\t\t\tconsectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore \\\n\t\t\t\t\tet dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation \\\n\t\t\t\t\tullamco laboris nisi ut aliquip ex ea commodo consequat.\n\t\t\t\t</cds-accordion-item>\n\t\t\t\t<cds-accordion-item [title]=\"titleWithContext\" [context]=\"{ index: 2 }\" (selected)=\"selected($event)\">\n\t\t\t\t\tLorem ipsum dolor sit amet, \\\n\t\t\t\t\tconsectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore \\\n\t\t\t\t\tet dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation \\\n\t\t\t\t\tullamco laboris nisi ut aliquip ex ea commodo consequat.\n\t\t\t\t</cds-accordion-item>\n\t\t\t</cds-accordion>\n\t\t</div>\n\t\t<ng-template #title>\n\t\t\t<p class=\"cds--accordion__title\">Section 1 title</p>\n\t\t</ng-template>\n\t\t<ng-template #titleWithContext let-index=\"index\">\n\t\t\t<p class=\"cds--accordion__title\">Section {{ index }} title</p>\n\t\t</ng-template>\n\t`\n})"
|
|
77873
77921
|
}
|
|
77874
77922
|
],
|
|
77875
|
-
"src/
|
|
77923
|
+
"src/button/button-set.stories.ts": [
|
|
77876
77924
|
{
|
|
77877
77925
|
"name": "Basic",
|
|
77878
77926
|
"ctype": "miscellaneous",
|
|
77879
77927
|
"subtype": "variable",
|
|
77880
|
-
"file": "src/
|
|
77928
|
+
"file": "src/button/button-set.stories.ts",
|
|
77881
77929
|
"deprecated": false,
|
|
77882
77930
|
"deprecationMessage": "",
|
|
77883
77931
|
"type": "",
|
|
77884
77932
|
"defaultValue": "Template.bind({})"
|
|
77885
77933
|
},
|
|
77886
77934
|
{
|
|
77887
|
-
"name": "
|
|
77935
|
+
"name": "Template",
|
|
77888
77936
|
"ctype": "miscellaneous",
|
|
77889
77937
|
"subtype": "variable",
|
|
77890
|
-
"file": "src/
|
|
77938
|
+
"file": "src/button/button-set.stories.ts",
|
|
77891
77939
|
"deprecated": false,
|
|
77892
77940
|
"deprecationMessage": "",
|
|
77893
|
-
"type": ""
|
|
77894
|
-
|
|
77941
|
+
"type": "",
|
|
77942
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-button-set>\n\t\t\t<button cdsButton=\"secondary\" [size]=\"size\" [isExpressive]=\"isExpressive\">Button</button>\n\t\t\t<button cdsButton [size]=\"size\" [isExpressive]=\"isExpressive\">Button</button>\n\t\t</cds-button-set>\n\t`\n})"
|
|
77943
|
+
}
|
|
77944
|
+
],
|
|
77945
|
+
"src/button/button.stories.ts": [
|
|
77895
77946
|
{
|
|
77896
|
-
"name": "
|
|
77947
|
+
"name": "Basic",
|
|
77897
77948
|
"ctype": "miscellaneous",
|
|
77898
77949
|
"subtype": "variable",
|
|
77899
|
-
"file": "src/
|
|
77950
|
+
"file": "src/button/button.stories.ts",
|
|
77900
77951
|
"deprecated": false,
|
|
77901
77952
|
"deprecationMessage": "",
|
|
77902
77953
|
"type": "",
|
|
77903
|
-
"defaultValue": "
|
|
77954
|
+
"defaultValue": "Template.bind({})"
|
|
77904
77955
|
},
|
|
77905
77956
|
{
|
|
77906
|
-
"name": "
|
|
77957
|
+
"name": "Template",
|
|
77907
77958
|
"ctype": "miscellaneous",
|
|
77908
77959
|
"subtype": "variable",
|
|
77909
|
-
"file": "src/
|
|
77960
|
+
"file": "src/button/button.stories.ts",
|
|
77910
77961
|
"deprecated": false,
|
|
77911
77962
|
"deprecationMessage": "",
|
|
77912
77963
|
"type": "",
|
|
77913
|
-
"defaultValue": "
|
|
77964
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<button\n\t\t\t[cdsButton]=\"kind\"\n\t\t\t[size]=\"size\"\n\t\t\t[isExpressive]=\"isExpressive\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t(click)=\"onClick($event)\"\n\t\t\t(mouseenter)=\"onMouseEnter($event)\"\n\t\t\t(mouseleave)=\"onMouseLeave($event)\"\n\t\t\t(focus)=\"onFocus($event)\"\n\t\t\t(blur)=\"onBlur($event)\">\n\t\t\tButton\n\t\t</button>\n\t`\n})"
|
|
77914
77965
|
},
|
|
77915
77966
|
{
|
|
77916
|
-
"name": "
|
|
77967
|
+
"name": "WithIcon",
|
|
77917
77968
|
"ctype": "miscellaneous",
|
|
77918
77969
|
"subtype": "variable",
|
|
77919
|
-
"file": "src/
|
|
77970
|
+
"file": "src/button/button.stories.ts",
|
|
77920
77971
|
"deprecated": false,
|
|
77921
77972
|
"deprecationMessage": "",
|
|
77922
77973
|
"type": "",
|
|
77923
|
-
"defaultValue": "(
|
|
77974
|
+
"defaultValue": "WithIconTemplate.bind({})"
|
|
77924
77975
|
},
|
|
77925
77976
|
{
|
|
77926
|
-
"name": "
|
|
77977
|
+
"name": "WithIconTemplate",
|
|
77927
77978
|
"ctype": "miscellaneous",
|
|
77928
77979
|
"subtype": "variable",
|
|
77929
|
-
"file": "src/
|
|
77980
|
+
"file": "src/button/button.stories.ts",
|
|
77930
77981
|
"deprecated": false,
|
|
77931
77982
|
"deprecationMessage": "",
|
|
77932
77983
|
"type": "",
|
|
77933
|
-
"defaultValue": "
|
|
77934
|
-
}
|
|
77984
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<button\n\t\t\t[cdsButton]=\"kind\"\n\t\t\t[size]=\"size\"\n\t\t\t[isExpressive]=\"isExpressive\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t(click)=\"onClick($event)\"\n\t\t\t(mouseenter)=\"onMouseEnter($event)\"\n\t\t\t(mouseleave)=\"onMouseleave($event)\"\n\t\t\t(focus)=\"onFocus($event)\"\n\t\t\t(blur)=\"onBlur($event)\">\n\t\t\tWith icon\n\t\t\t<svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n\t\t</button>\n\t`\n})"
|
|
77985
|
+
}
|
|
77986
|
+
],
|
|
77987
|
+
"src/breadcrumb/breadcrumb.stories.ts": [
|
|
77935
77988
|
{
|
|
77936
|
-
"name": "
|
|
77989
|
+
"name": "Basic",
|
|
77937
77990
|
"ctype": "miscellaneous",
|
|
77938
77991
|
"subtype": "variable",
|
|
77939
77992
|
"file": "src/breadcrumb/breadcrumb.stories.ts",
|
|
77940
77993
|
"deprecated": false,
|
|
77941
77994
|
"deprecationMessage": "",
|
|
77942
77995
|
"type": "",
|
|
77943
|
-
"defaultValue": "(
|
|
77996
|
+
"defaultValue": "Template.bind({})"
|
|
77944
77997
|
},
|
|
77945
77998
|
{
|
|
77946
|
-
"name": "
|
|
77999
|
+
"name": "breadcrumbItems",
|
|
77947
78000
|
"ctype": "miscellaneous",
|
|
77948
78001
|
"subtype": "variable",
|
|
77949
78002
|
"file": "src/breadcrumb/breadcrumb.stories.ts",
|
|
77950
78003
|
"deprecated": false,
|
|
77951
78004
|
"deprecationMessage": "",
|
|
77952
|
-
"type": ""
|
|
77953
|
-
"defaultValue": "ModelWTemplate.bind({})"
|
|
78005
|
+
"type": ""
|
|
77954
78006
|
},
|
|
77955
78007
|
{
|
|
77956
|
-
"name": "
|
|
78008
|
+
"name": "createBreadcrumbItems",
|
|
77957
78009
|
"ctype": "miscellaneous",
|
|
77958
78010
|
"subtype": "variable",
|
|
77959
78011
|
"file": "src/breadcrumb/breadcrumb.stories.ts",
|
|
77960
78012
|
"deprecated": false,
|
|
77961
78013
|
"deprecationMessage": "",
|
|
77962
78014
|
"type": "",
|
|
77963
|
-
"defaultValue": "(
|
|
78015
|
+
"defaultValue": "(count: number, content = \"Breadcrumb\"): Array<BreadcrumbItem> => {\n\tif (breadcrumbItems && count === breadcrumbItems.length) {\n\t\treturn breadcrumbItems;\n\t}\n\tbreadcrumbItems = Array(count).fill(0).map((x, i) => ({\n\t\tcontent: `${content} ${i + 1}`,\n\t\thref: \"#\" + (i + 1)\n\t}));\n\treturn breadcrumbItems;\n}"
|
|
77964
78016
|
},
|
|
77965
78017
|
{
|
|
77966
|
-
"name": "
|
|
78018
|
+
"name": "CurrentPage",
|
|
77967
78019
|
"ctype": "miscellaneous",
|
|
77968
78020
|
"subtype": "variable",
|
|
77969
78021
|
"file": "src/breadcrumb/breadcrumb.stories.ts",
|
|
77970
78022
|
"deprecated": false,
|
|
77971
78023
|
"deprecationMessage": "",
|
|
77972
78024
|
"type": "",
|
|
77973
|
-
"defaultValue": "
|
|
78025
|
+
"defaultValue": "CurrentPageTemplate.bind({})"
|
|
77974
78026
|
},
|
|
77975
78027
|
{
|
|
77976
|
-
"name": "
|
|
78028
|
+
"name": "CurrentPageTemplate",
|
|
77977
78029
|
"ctype": "miscellaneous",
|
|
77978
78030
|
"subtype": "variable",
|
|
77979
78031
|
"file": "src/breadcrumb/breadcrumb.stories.ts",
|
|
77980
78032
|
"deprecated": false,
|
|
77981
78033
|
"deprecationMessage": "",
|
|
77982
78034
|
"type": "",
|
|
77983
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-breadcrumb
|
|
78035
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-breadcrumb>\n\t\t\t<cds-breadcrumb-item href=\"#1\">\n\t\t\t\tBreadcrumb 1\n\t\t\t</cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item href=\"#2\">\n\t\t\t\tBreadcrumb 2\n\t\t\t</cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item current=\"true\" href=\"#3\">\n\t\t\t\tBreadcrumb 3\n\t\t\t</cds-breadcrumb-item>\n\t\t</cds-breadcrumb>\n\t`\n})"
|
|
77984
78036
|
},
|
|
77985
78037
|
{
|
|
77986
|
-
"name": "
|
|
78038
|
+
"name": "Model",
|
|
77987
78039
|
"ctype": "miscellaneous",
|
|
77988
78040
|
"subtype": "variable",
|
|
77989
78041
|
"file": "src/breadcrumb/breadcrumb.stories.ts",
|
|
77990
78042
|
"deprecated": false,
|
|
77991
78043
|
"deprecationMessage": "",
|
|
77992
78044
|
"type": "",
|
|
77993
|
-
"defaultValue": "(
|
|
78045
|
+
"defaultValue": "ModelTemplate.bind({})"
|
|
77994
78046
|
},
|
|
77995
78047
|
{
|
|
77996
|
-
"name": "
|
|
78048
|
+
"name": "ModelTemplate",
|
|
77997
78049
|
"ctype": "miscellaneous",
|
|
77998
78050
|
"subtype": "variable",
|
|
77999
78051
|
"file": "src/breadcrumb/breadcrumb.stories.ts",
|
|
78000
78052
|
"deprecated": false,
|
|
78001
78053
|
"deprecationMessage": "",
|
|
78002
78054
|
"type": "",
|
|
78003
|
-
"defaultValue": "(
|
|
78004
|
-
}
|
|
78005
|
-
],
|
|
78006
|
-
"src/button/button-set.stories.ts": [
|
|
78055
|
+
"defaultValue": "(args) => ({\n\tprops: {\n\t\t...args,\n\t\tcreateBreadcrumbItems\n\t},\n\ttemplate: `\n\t\t<cds-breadcrumb\n\t\t\t[noTrailingSlash]=\"noTrailingSlash\"\n\t\t\t[threshold]=\"threshold\"\n\t\t\t[items]=\"createBreadcrumbItems(itemCount, content)\">\n\t\t</cds-breadcrumb>\n\t`\n})"
|
|
78056
|
+
},
|
|
78007
78057
|
{
|
|
78008
|
-
"name": "
|
|
78058
|
+
"name": "ModelWithTemplate",
|
|
78009
78059
|
"ctype": "miscellaneous",
|
|
78010
78060
|
"subtype": "variable",
|
|
78011
|
-
"file": "src/
|
|
78061
|
+
"file": "src/breadcrumb/breadcrumb.stories.ts",
|
|
78012
78062
|
"deprecated": false,
|
|
78013
78063
|
"deprecationMessage": "",
|
|
78014
78064
|
"type": "",
|
|
78015
|
-
"defaultValue": "
|
|
78065
|
+
"defaultValue": "ModelWTemplate.bind({})"
|
|
78016
78066
|
},
|
|
78017
78067
|
{
|
|
78018
|
-
"name": "
|
|
78068
|
+
"name": "ModelWTemplate",
|
|
78019
78069
|
"ctype": "miscellaneous",
|
|
78020
78070
|
"subtype": "variable",
|
|
78021
|
-
"file": "src/
|
|
78071
|
+
"file": "src/breadcrumb/breadcrumb.stories.ts",
|
|
78022
78072
|
"deprecated": false,
|
|
78023
78073
|
"deprecationMessage": "",
|
|
78024
78074
|
"type": "",
|
|
78025
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<
|
|
78026
|
-
}
|
|
78027
|
-
],
|
|
78028
|
-
"src/button/button.stories.ts": [
|
|
78075
|
+
"defaultValue": "(args) => ({\n\tprops: {\n\t\t...args,\n\t\tcreateBreadcrumbItems,\n\t\twithTemplate\n\t},\n\ttemplate: `\n\t\t<ng-template #breadcrumbTemplate let-item>\n\t\t\t{{ templateContent }}{{ item.content }}\n\t\t</ng-template>\n\t\t<cds-breadcrumb\n\t\t\t[noTrailingSlash]=\"noTrailingSlash\"\n\t\t\t[threshold]=\"threshold\"\n\t\t\t[items]=\"withTemplate(breadcrumbTemplate, createBreadcrumbItems(itemCount, content))\">\n\t\t</cds-breadcrumb>\n\t`\n})"
|
|
78076
|
+
},
|
|
78029
78077
|
{
|
|
78030
|
-
"name": "
|
|
78078
|
+
"name": "Skeleton",
|
|
78031
78079
|
"ctype": "miscellaneous",
|
|
78032
78080
|
"subtype": "variable",
|
|
78033
|
-
"file": "src/
|
|
78081
|
+
"file": "src/breadcrumb/breadcrumb.stories.ts",
|
|
78034
78082
|
"deprecated": false,
|
|
78035
78083
|
"deprecationMessage": "",
|
|
78036
78084
|
"type": "",
|
|
78037
|
-
"defaultValue": "
|
|
78085
|
+
"defaultValue": "WithSkeleton.bind({})"
|
|
78038
78086
|
},
|
|
78039
78087
|
{
|
|
78040
78088
|
"name": "Template",
|
|
78041
78089
|
"ctype": "miscellaneous",
|
|
78042
78090
|
"subtype": "variable",
|
|
78043
|
-
"file": "src/
|
|
78091
|
+
"file": "src/breadcrumb/breadcrumb.stories.ts",
|
|
78044
78092
|
"deprecated": false,
|
|
78045
78093
|
"deprecationMessage": "",
|
|
78046
78094
|
"type": "",
|
|
78047
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<
|
|
78095
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-breadcrumb [noTrailingSlash]=\"noTrailingSlash\">\n\t\t\t<cds-breadcrumb-item href=\"#1\">\n\t\t\t\tBreadcrumb 1\n\t\t\t</cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item href=\"#2\">\n\t\t\t\tBreadcrumb 2\n\t\t\t</cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item href=\"#3\">\n\t\t\t\tBreadcrumb 3\n\t\t\t</cds-breadcrumb-item>\n\t\t</cds-breadcrumb>\n\t`\n})"
|
|
78048
78096
|
},
|
|
78049
78097
|
{
|
|
78050
|
-
"name": "
|
|
78098
|
+
"name": "WithSkeleton",
|
|
78051
78099
|
"ctype": "miscellaneous",
|
|
78052
78100
|
"subtype": "variable",
|
|
78053
|
-
"file": "src/
|
|
78101
|
+
"file": "src/breadcrumb/breadcrumb.stories.ts",
|
|
78054
78102
|
"deprecated": false,
|
|
78055
78103
|
"deprecationMessage": "",
|
|
78056
78104
|
"type": "",
|
|
78057
|
-
"defaultValue": "
|
|
78105
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-breadcrumb skeleton=\"true\" [noTrailingSlash]=\"noTrailingSlash\">\n\t\t\t<cds-breadcrumb-item></cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item></cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item></cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item></cds-breadcrumb-item>\n\t\t</cds-breadcrumb>\n\t`\n})"
|
|
78058
78106
|
},
|
|
78059
78107
|
{
|
|
78060
|
-
"name": "
|
|
78108
|
+
"name": "withTemplate",
|
|
78061
78109
|
"ctype": "miscellaneous",
|
|
78062
78110
|
"subtype": "variable",
|
|
78063
|
-
"file": "src/
|
|
78111
|
+
"file": "src/breadcrumb/breadcrumb.stories.ts",
|
|
78064
78112
|
"deprecated": false,
|
|
78065
78113
|
"deprecationMessage": "",
|
|
78066
78114
|
"type": "",
|
|
78067
|
-
"defaultValue": "(
|
|
78115
|
+
"defaultValue": "(templateRef, items) => items.map(item => Object.assign(item, { template: templateRef }))"
|
|
78068
78116
|
}
|
|
78069
78117
|
],
|
|
78070
78118
|
"src/checkbox/checkbox.stories.ts": [
|
|
@@ -79654,7 +79702,7 @@
|
|
|
79654
79702
|
"deprecated": false,
|
|
79655
79703
|
"deprecationMessage": "",
|
|
79656
79704
|
"type": "",
|
|
79657
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-slider\n\t\t\t[label]=\"label\"\n\t\t\t[min]=\"min\"\n\t\t\t[max]=\"max\"\n\t\t\t[step]=\"step\"\n\t\t\t[value]=\"value\"\n\t\t\t[shiftMultiplier]=\"shiftMultiplier\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\taria-Label=\"Label for slider value\"\n\t\t\t(valueChange)=\"valueChange($event)\">\n\t\t\t<span minLabel>{{minLabel}}</span>\n\t\t\t<span maxLabel>{{maxLabel}}</span>\n\t\t\t<input [ngClass]=\"{'cds--text-input--light': theme === 'light'}\"/>\n\t\t\t<input [ngClass]=\"{'cds--text-input--light': theme === 'light'}\"/>\n\t\t</cds-slider>\n\t`\n})"
|
|
79705
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-slider\n\t\t\t[label]=\"label\"\n\t\t\t[min]=\"min\"\n\t\t\t[max]=\"max\"\n\t\t\t[step]=\"step\"\n\t\t\t[value]=\"value\"\n\t\t\t[shiftMultiplier]=\"shiftMultiplier\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[readonly]=\"readonly\"\n\t\t\taria-Label=\"Label for slider value\"\n\t\t\t(valueChange)=\"valueChange($event)\">\n\t\t\t<span minLabel>{{minLabel}}</span>\n\t\t\t<span maxLabel>{{maxLabel}}</span>\n\t\t\t<input [ngClass]=\"{'cds--text-input--light': theme === 'light'}\"/>\n\t\t\t<input [ngClass]=\"{'cds--text-input--light': theme === 'light'}\"/>\n\t\t</cds-slider>\n\t`\n})"
|
|
79658
79706
|
},
|
|
79659
79707
|
{
|
|
79660
79708
|
"name": "Template",
|
|
@@ -79664,7 +79712,7 @@
|
|
|
79664
79712
|
"deprecated": false,
|
|
79665
79713
|
"deprecationMessage": "",
|
|
79666
79714
|
"type": "",
|
|
79667
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-slider\n\t\t\t[label]=\"label\"\n\t\t\t[min]=\"min\"\n\t\t\t[max]=\"max\"\n\t\t\t[step]=\"step\"\n\t\t\t[value]=\"value\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[shiftMultiplier]=\"shiftMultiplier\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\taria-Label=\"Label for slider value\"\n\t\t\t(valueChange)=\"valueChange($event)\">\n\t\t\t<span minLabel>{{minLabel}}</span>\n\t\t\t<span maxLabel>{{maxLabel}}</span>\n\t\t\t<input [ngClass]=\"{'cds--text-input--light': theme === 'light'}\"/>\n\t\t</cds-slider>\n\t`\n})"
|
|
79715
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-slider\n\t\t\t[label]=\"label\"\n\t\t\t[min]=\"min\"\n\t\t\t[max]=\"max\"\n\t\t\t[step]=\"step\"\n\t\t\t[value]=\"value\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[shiftMultiplier]=\"shiftMultiplier\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[readonly]=\"readonly\"\n\t\t\taria-Label=\"Label for slider value\"\n\t\t\t(valueChange)=\"valueChange($event)\">\n\t\t\t<span minLabel>{{minLabel}}</span>\n\t\t\t<span maxLabel>{{maxLabel}}</span>\n\t\t\t<input [ngClass]=\"{'cds--text-input--light': theme === 'light'}\"/>\n\t\t</cds-slider>\n\t`\n})"
|
|
79668
79716
|
}
|
|
79669
79717
|
],
|
|
79670
79718
|
"src/structured-list/structured-list.stories.ts": [
|
|
@@ -87144,7 +87192,7 @@
|
|
|
87144
87192
|
"linktype": "component",
|
|
87145
87193
|
"name": "Slider",
|
|
87146
87194
|
"coveragePercent": 71,
|
|
87147
|
-
"coverageCount": "
|
|
87195
|
+
"coverageCount": "33/46",
|
|
87148
87196
|
"status": "good"
|
|
87149
87197
|
},
|
|
87150
87198
|
{
|