carbon-components-angular 5.36.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/Select.html +252 -45
- package/docs/documentation/components/Slider.html +251 -94
- package/docs/documentation/components/TimePickerSelect.html +218 -24
- package/docs/documentation/coverage.html +8 -8
- 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 +391 -200
- package/docs/storybook/{9672.c7063b22.iframe.bundle.js → 9672.48c27c98.iframe.bundle.js} +1 -1
- package/docs/storybook/iframe.html +2 -2
- package/docs/storybook/{main.e57ae153.iframe.bundle.js → main.c3732b9e.iframe.bundle.js} +1 -1
- package/docs/storybook/project.json +1 -1
- package/docs/storybook/{runtime~main.58219115.iframe.bundle.js → runtime~main.b5fc6cdc.iframe.bundle.js} +1 -1
- package/docs/storybook/select-select-stories.c1077d92.iframe.bundle.js +1 -0
- package/docs/storybook/{slider-slider-stories.0a70e102.iframe.bundle.js → slider-slider-stories.5884b16a.iframe.bundle.js} +1 -1
- package/esm2020/select/select.component.mjs +38 -6
- package/esm2020/slider/slider.component.mjs +35 -10
- package/fesm2015/carbon-components-angular-select.mjs +37 -5
- package/fesm2015/carbon-components-angular-select.mjs.map +1 -1
- package/fesm2015/carbon-components-angular-slider.mjs +34 -9
- package/fesm2015/carbon-components-angular-slider.mjs.map +1 -1
- package/fesm2020/carbon-components-angular-select.mjs +37 -5
- package/fesm2020/carbon-components-angular-select.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/select/select.component.d.ts +7 -1
- package/slider/slider.component.d.ts +5 -1
- package/docs/storybook/select-select-stories.f28348e5.iframe.bundle.js +0 -1
package/docs/documentation.json
CHANGED
|
@@ -47921,7 +47921,7 @@
|
|
|
47921
47921
|
},
|
|
47922
47922
|
{
|
|
47923
47923
|
"name": "Select",
|
|
47924
|
-
"id": "component-Select-
|
|
47924
|
+
"id": "component-Select-b56838c9a6ad3fa2101ba902a6132ed17f96dd38751fe11a6df0919b1a2fdc3c81b4c3ae5523df12ae3b7ba8a8bd0f4167d2454dac365196a6400973427bee2d",
|
|
47925
47925
|
"file": "src/select/select.component.ts",
|
|
47926
47926
|
"encapsulation": [],
|
|
47927
47927
|
"entryComponents": [],
|
|
@@ -47935,7 +47935,7 @@
|
|
|
47935
47935
|
"selector": "cds-select, ibm-select",
|
|
47936
47936
|
"styleUrls": [],
|
|
47937
47937
|
"styles": [],
|
|
47938
|
-
"template": "<div class=\"cds--form-item\">\n\t<ng-template [ngIf]=\"skeleton\">\n\t\t<div *ngIf=\"label\" class=\"cds--label cds--skeleton\"></div>\n\t\t<div class=\"cds--select cds--skeleton\"></div>\n\t</ng-template>\n\t<div\n\t\t*ngIf=\"!skeleton\"\n\t\tclass=\"cds--select\"\n\t\t[ngClass]=\"{\n\t\t\t'cds--select--inline': display === 'inline',\n\t\t\t'cds--select--light': theme === 'light',\n\t\t\t'cds--select--invalid': invalid,\n\t\t\t'cds--select--warning': warn,\n\t\t\t'cds--select--disabled': disabled\n\t\t}\">\n\t\t<label\n\t\t\t*ngIf=\"label\"\n\t\t\t[for]=\"id\"\n\t\t\tclass=\"cds--label\"\n\t\t\t[ngClass]=\"{'cds--label--disabled': disabled}\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t</label>\n\t\t<div *ngIf=\"display === 'inline'; else noInline\" class=\"cds--select-input--inline__wrapper\">\n\t\t\t<ng-container *ngTemplateOutlet=\"noInline\"></ng-container>\n\t\t</div>\n\t\t<div\n\t\t\t*ngIf=\"helperText\"\n\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--form__helper-text--disabled': disabled\n\t\t\t}\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t</div>\n\t</div>\n</div>\n\n<!-- select element: dynamically projected based on 'display' variant -->\n<ng-template #noInline>\n\t<div class=\"cds--select-input__wrapper\" [attr.data-invalid]=\"(invalid ? true : null)\">\n\t\t<select\n\t\t\t#select\n\t\t\t[attr.id]=\"id\"\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t(change)=\"onChange($event)\"\n\t\t\t[attr.aria-invalid]=\"invalid ? 'true' : null\"\n\t\t\tclass=\"cds--select-input\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--select-input--sm': size === 'sm',\n\t\t\t\t'cds--select-input--md': size === 'md',\n\t\t\t\t'cds--select-input--lg': size === 'lg'\n\t\t\t}\">\n\t\t\t<ng-content></ng-content>\n\t\t</select>\n\t\t<svg\n\t\t\tfocusable=\"false\"\n\t\t\tpreserveAspectRatio=\"xMidYMid meet\"\n\t\t\tstyle=\"will-change: transform;\"\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\tclass=\"cds--select__arrow\"\n\t\t\twidth=\"16\"\n\t\t\theight=\"16\"\n\t\t\tviewBox=\"0 0 16 16\"\n\t\t\taria-hidden=\"true\">\n\t\t\t<path d=\"M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z\"></path>\n\t\t</svg>\n\t\t<svg\n\t\t\t*ngIf=\"invalid\"\n\t\t\tcdsIcon=\"warning--filled\"\n\t\t\tsize=\"16\"\n\t\t\tclass=\"cds--select__invalid-icon\">\n\t\t</svg>\n\t\t<svg\n\t\t\t*ngIf=\"!invalid && warn\"\n\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\tsize=\"16\"\n\t\t\tclass=\"cds--select__invalid-icon cds--select__invalid-icon--warning\">\n\t\t</svg>\n\t</div>\n\t<div\n\t\t*ngIf=\"invalid && invalidText\" role=\"alert\" class=\"cds--form-requirement\" aria-live=\"polite\">\n\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t</div>\n\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t</div>\n</ng-template>\n\t",
|
|
47938
|
+
"template": "<div class=\"cds--form-item\">\n\t<ng-template [ngIf]=\"skeleton\">\n\t\t<div *ngIf=\"label\" class=\"cds--label cds--skeleton\"></div>\n\t\t<div class=\"cds--select cds--skeleton\"></div>\n\t</ng-template>\n\t<div\n\t\t*ngIf=\"!skeleton\"\n\t\tclass=\"cds--select\"\n\t\t[ngClass]=\"{\n\t\t\t'cds--select--inline': display === 'inline',\n\t\t\t'cds--select--light': theme === 'light',\n\t\t\t'cds--select--invalid': invalid,\n\t\t\t'cds--select--warning': warn,\n\t\t\t'cds--select--disabled': disabled,\n\t\t\t'cds--select--readonly': readonly\n\t\t}\">\n\t\t<label\n\t\t\t*ngIf=\"label\"\n\t\t\t[for]=\"id\"\n\t\t\tclass=\"cds--label\"\n\t\t\t[ngClass]=\"{'cds--label--disabled': disabled}\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t</label>\n\t\t<div *ngIf=\"display === 'inline'; else noInline\" class=\"cds--select-input--inline__wrapper\">\n\t\t\t<ng-container *ngTemplateOutlet=\"noInline\"></ng-container>\n\t\t</div>\n\t\t<div\n\t\t\t*ngIf=\"helperText\"\n\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--form__helper-text--disabled': disabled\n\t\t\t}\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t</div>\n\t</div>\n</div>\n\n<!-- select element: dynamically projected based on 'display' variant -->\n<ng-template #noInline>\n\t<div class=\"cds--select-input__wrapper\" [attr.data-invalid]=\"(invalid ? true : null)\">\n\t\t<select\n\t\t\t#select\n\t\t\t[attr.id]=\"id\"\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t(change)=\"onChange($event)\"\n\t\t\t[attr.aria-invalid]=\"invalid ? 'true' : null\"\n\t\t\t[attr.aria-readonly]=\"readonly ? 'true' : null\"\n\t\t\tclass=\"cds--select-input\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--select-input--sm': size === 'sm',\n\t\t\t\t'cds--select-input--md': size === 'md',\n\t\t\t\t'cds--select-input--lg': size === 'lg'\n\t\t\t}\"\n\t\t\t(mousedown)=\"onMouseDown($event)\"\n\t\t\t(keydown)=\"onKeyDown($event)\">\n\t\t\t<ng-content></ng-content>\n\t\t</select>\n\t\t<svg\n\t\t\tfocusable=\"false\"\n\t\t\tpreserveAspectRatio=\"xMidYMid meet\"\n\t\t\tstyle=\"will-change: transform;\"\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\tclass=\"cds--select__arrow\"\n\t\t\twidth=\"16\"\n\t\t\theight=\"16\"\n\t\t\tviewBox=\"0 0 16 16\"\n\t\t\taria-hidden=\"true\">\n\t\t\t<path d=\"M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z\"></path>\n\t\t</svg>\n\t\t<svg\n\t\t\t*ngIf=\"invalid\"\n\t\t\tcdsIcon=\"warning--filled\"\n\t\t\tsize=\"16\"\n\t\t\tclass=\"cds--select__invalid-icon\">\n\t\t</svg>\n\t\t<svg\n\t\t\t*ngIf=\"!invalid && warn\"\n\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\tsize=\"16\"\n\t\t\tclass=\"cds--select__invalid-icon cds--select__invalid-icon--warning\">\n\t\t</svg>\n\t</div>\n\t<div\n\t\t*ngIf=\"invalid && invalidText\" role=\"alert\" class=\"cds--form-requirement\" aria-live=\"polite\">\n\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t</div>\n\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t</div>\n</ng-template>\n\t",
|
|
47939
47939
|
"templateUrl": [],
|
|
47940
47940
|
"viewProviders": [],
|
|
47941
47941
|
"hostDirectives": [],
|
|
@@ -47944,7 +47944,7 @@
|
|
|
47944
47944
|
"name": "ariaLabel",
|
|
47945
47945
|
"deprecated": false,
|
|
47946
47946
|
"deprecationMessage": "",
|
|
47947
|
-
"line":
|
|
47947
|
+
"line": 199,
|
|
47948
47948
|
"type": "string",
|
|
47949
47949
|
"decorators": []
|
|
47950
47950
|
},
|
|
@@ -47955,7 +47955,7 @@
|
|
|
47955
47955
|
"deprecationMessage": "",
|
|
47956
47956
|
"rawdescription": "\n\nSet to true to disable component.\n",
|
|
47957
47957
|
"description": "<p>Set to true to disable component.</p>\n",
|
|
47958
|
-
"line":
|
|
47958
|
+
"line": 180,
|
|
47959
47959
|
"type": "boolean",
|
|
47960
47960
|
"decorators": []
|
|
47961
47961
|
},
|
|
@@ -47966,7 +47966,7 @@
|
|
|
47966
47966
|
"deprecationMessage": "",
|
|
47967
47967
|
"rawdescription": "\n\n`inline` or `default` select displays\n",
|
|
47968
47968
|
"description": "<p><code>inline</code> or <code>default</code> select displays</p>\n",
|
|
47969
|
-
"line":
|
|
47969
|
+
"line": 148,
|
|
47970
47970
|
"type": "\"inline\" | \"default\"",
|
|
47971
47971
|
"decorators": []
|
|
47972
47972
|
},
|
|
@@ -47976,7 +47976,7 @@
|
|
|
47976
47976
|
"deprecationMessage": "",
|
|
47977
47977
|
"rawdescription": "\n\nOptional helper text that appears under the label.\n",
|
|
47978
47978
|
"description": "<p>Optional helper text that appears under the label.</p>\n",
|
|
47979
|
-
"line":
|
|
47979
|
+
"line": 156,
|
|
47980
47980
|
"type": "string | TemplateRef<any>",
|
|
47981
47981
|
"decorators": []
|
|
47982
47982
|
},
|
|
@@ -47987,7 +47987,7 @@
|
|
|
47987
47987
|
"deprecationMessage": "",
|
|
47988
47988
|
"rawdescription": "\n\nSets the unique ID. Defaults to `select-${total count of selects instantiated}`\n",
|
|
47989
47989
|
"description": "<p>Sets the unique ID. Defaults to <code>select-${total count of selects instantiated}</code></p>\n",
|
|
47990
|
-
"line":
|
|
47990
|
+
"line": 172,
|
|
47991
47991
|
"type": "string",
|
|
47992
47992
|
"decorators": []
|
|
47993
47993
|
},
|
|
@@ -47998,7 +47998,7 @@
|
|
|
47998
47998
|
"deprecationMessage": "",
|
|
47999
47999
|
"rawdescription": "\n\nSet to `true` for an invalid select component.\n",
|
|
48000
48000
|
"description": "<p>Set to <code>true</code> for an invalid select component.</p>\n",
|
|
48001
|
-
"line":
|
|
48001
|
+
"line": 188,
|
|
48002
48002
|
"type": "boolean",
|
|
48003
48003
|
"decorators": []
|
|
48004
48004
|
},
|
|
@@ -48008,7 +48008,7 @@
|
|
|
48008
48008
|
"deprecationMessage": "",
|
|
48009
48009
|
"rawdescription": "\n\nSets the invalid text.\n",
|
|
48010
48010
|
"description": "<p>Sets the invalid text.</p>\n",
|
|
48011
|
-
"line":
|
|
48011
|
+
"line": 160,
|
|
48012
48012
|
"type": "string | TemplateRef<any>",
|
|
48013
48013
|
"decorators": []
|
|
48014
48014
|
},
|
|
@@ -48018,10 +48018,21 @@
|
|
|
48018
48018
|
"deprecationMessage": "",
|
|
48019
48019
|
"rawdescription": "\n\nLabel for the select. Appears above the input.\n",
|
|
48020
48020
|
"description": "<p>Label for the select. Appears above the input.</p>\n",
|
|
48021
|
-
"line":
|
|
48021
|
+
"line": 152,
|
|
48022
48022
|
"type": "string | TemplateRef<any>",
|
|
48023
48023
|
"decorators": []
|
|
48024
48024
|
},
|
|
48025
|
+
{
|
|
48026
|
+
"name": "readonly",
|
|
48027
|
+
"defaultValue": "false",
|
|
48028
|
+
"deprecated": false,
|
|
48029
|
+
"deprecationMessage": "",
|
|
48030
|
+
"rawdescription": "\n\nSet to `true` for readonly state.\n",
|
|
48031
|
+
"description": "<p>Set to <code>true</code> for readonly state.</p>\n",
|
|
48032
|
+
"line": 192,
|
|
48033
|
+
"type": "boolean",
|
|
48034
|
+
"decorators": []
|
|
48035
|
+
},
|
|
48025
48036
|
{
|
|
48026
48037
|
"name": "size",
|
|
48027
48038
|
"defaultValue": "\"md\"",
|
|
@@ -48029,7 +48040,7 @@
|
|
|
48029
48040
|
"deprecationMessage": "",
|
|
48030
48041
|
"rawdescription": "\n\nNumber input field render size\n",
|
|
48031
48042
|
"description": "<p>Number input field render size</p>\n",
|
|
48032
|
-
"line":
|
|
48043
|
+
"line": 176,
|
|
48033
48044
|
"type": "\"sm\" | \"md\" | \"lg\"",
|
|
48034
48045
|
"decorators": []
|
|
48035
48046
|
},
|
|
@@ -48040,7 +48051,7 @@
|
|
|
48040
48051
|
"deprecationMessage": "",
|
|
48041
48052
|
"rawdescription": "\n\nSet to true for a loading select.\n",
|
|
48042
48053
|
"description": "<p>Set to true for a loading select.</p>\n",
|
|
48043
|
-
"line":
|
|
48054
|
+
"line": 184,
|
|
48044
48055
|
"type": "boolean",
|
|
48045
48056
|
"decorators": []
|
|
48046
48057
|
},
|
|
@@ -48051,15 +48062,15 @@
|
|
|
48051
48062
|
"deprecationMessage": "since v5 - Use `cdsLayer` directive instead\n`light` or `dark` select theme",
|
|
48052
48063
|
"jsdoctags": [
|
|
48053
48064
|
{
|
|
48054
|
-
"pos":
|
|
48055
|
-
"end":
|
|
48065
|
+
"pos": 5564,
|
|
48066
|
+
"end": 5657,
|
|
48056
48067
|
"flags": 16842752,
|
|
48057
48068
|
"modifierFlagsCache": 0,
|
|
48058
48069
|
"transformFlags": 0,
|
|
48059
48070
|
"kind": 338,
|
|
48060
48071
|
"tagName": {
|
|
48061
|
-
"pos":
|
|
48062
|
-
"end":
|
|
48072
|
+
"pos": 5565,
|
|
48073
|
+
"end": 5575,
|
|
48063
48074
|
"flags": 16842752,
|
|
48064
48075
|
"modifierFlagsCache": 0,
|
|
48065
48076
|
"transformFlags": 0,
|
|
@@ -48069,7 +48080,7 @@
|
|
|
48069
48080
|
"comment": "<p>since v5 - Use <code>cdsLayer</code> directive instead\n<code>light</code> or <code>dark</code> select theme</p>\n"
|
|
48070
48081
|
}
|
|
48071
48082
|
],
|
|
48072
|
-
"line":
|
|
48083
|
+
"line": 198,
|
|
48073
48084
|
"type": "\"light\" | \"dark\"",
|
|
48074
48085
|
"decorators": []
|
|
48075
48086
|
},
|
|
@@ -48077,7 +48088,7 @@
|
|
|
48077
48088
|
"name": "value",
|
|
48078
48089
|
"deprecated": false,
|
|
48079
48090
|
"deprecationMessage": "",
|
|
48080
|
-
"line":
|
|
48091
|
+
"line": 205,
|
|
48081
48092
|
"type": "any",
|
|
48082
48093
|
"decorators": []
|
|
48083
48094
|
},
|
|
@@ -48088,7 +48099,7 @@
|
|
|
48088
48099
|
"deprecationMessage": "",
|
|
48089
48100
|
"rawdescription": "\n\nSet to `true` to show a warning (contents set by warningText)\n",
|
|
48090
48101
|
"description": "<p>Set to <code>true</code> to show a warning (contents set by warningText)</p>\n",
|
|
48091
|
-
"line":
|
|
48102
|
+
"line": 164,
|
|
48092
48103
|
"type": "boolean",
|
|
48093
48104
|
"decorators": []
|
|
48094
48105
|
},
|
|
@@ -48098,7 +48109,7 @@
|
|
|
48098
48109
|
"deprecationMessage": "",
|
|
48099
48110
|
"rawdescription": "\n\nSets the warning text\n",
|
|
48100
48111
|
"description": "<p>Sets the warning text</p>\n",
|
|
48101
|
-
"line":
|
|
48112
|
+
"line": 168,
|
|
48102
48113
|
"type": "string | TemplateRef<any>",
|
|
48103
48114
|
"decorators": []
|
|
48104
48115
|
}
|
|
@@ -48109,7 +48120,7 @@
|
|
|
48109
48120
|
"defaultValue": "new EventEmitter()",
|
|
48110
48121
|
"deprecated": false,
|
|
48111
48122
|
"deprecationMessage": "",
|
|
48112
|
-
"line":
|
|
48123
|
+
"line": 201,
|
|
48113
48124
|
"type": "EventEmitter"
|
|
48114
48125
|
}
|
|
48115
48126
|
],
|
|
@@ -48121,7 +48132,7 @@
|
|
|
48121
48132
|
"type": "ElementRef",
|
|
48122
48133
|
"optional": false,
|
|
48123
48134
|
"description": "",
|
|
48124
|
-
"line":
|
|
48135
|
+
"line": 203,
|
|
48125
48136
|
"decorators": [
|
|
48126
48137
|
{
|
|
48127
48138
|
"name": "ViewChild",
|
|
@@ -48140,7 +48151,7 @@
|
|
|
48140
48151
|
"type": "number",
|
|
48141
48152
|
"optional": false,
|
|
48142
48153
|
"description": "<p>Tracks the total number of selects instantiated. Used to generate unique IDs</p>\n",
|
|
48143
|
-
"line":
|
|
48154
|
+
"line": 143,
|
|
48144
48155
|
"rawdescription": "\n\nTracks the total number of selects instantiated. Used to generate unique IDs\n",
|
|
48145
48156
|
"modifierKind": [
|
|
48146
48157
|
126
|
|
@@ -48154,7 +48165,7 @@
|
|
|
48154
48165
|
"optional": false,
|
|
48155
48166
|
"returnType": "void",
|
|
48156
48167
|
"typeParameters": [],
|
|
48157
|
-
"line":
|
|
48168
|
+
"line": 271,
|
|
48158
48169
|
"deprecated": false,
|
|
48159
48170
|
"deprecationMessage": "",
|
|
48160
48171
|
"rawdescription": "\n\nListens for the host blurring, and notifies the model\n",
|
|
@@ -48182,7 +48193,7 @@
|
|
|
48182
48193
|
"optional": false,
|
|
48183
48194
|
"returnType": "boolean",
|
|
48184
48195
|
"typeParameters": [],
|
|
48185
|
-
"line":
|
|
48196
|
+
"line": 275,
|
|
48186
48197
|
"deprecated": false,
|
|
48187
48198
|
"deprecationMessage": "",
|
|
48188
48199
|
"modifierKind": [
|
|
@@ -48213,7 +48224,7 @@
|
|
|
48213
48224
|
"optional": false,
|
|
48214
48225
|
"returnType": "void",
|
|
48215
48226
|
"typeParameters": [],
|
|
48216
|
-
"line":
|
|
48227
|
+
"line": 261,
|
|
48217
48228
|
"deprecated": false,
|
|
48218
48229
|
"deprecationMessage": "",
|
|
48219
48230
|
"rawdescription": "\n\nHandles the change event from the `select`.\nSends events to the change handler and emits a `selected` event.\n",
|
|
@@ -48230,6 +48241,62 @@
|
|
|
48230
48241
|
}
|
|
48231
48242
|
]
|
|
48232
48243
|
},
|
|
48244
|
+
{
|
|
48245
|
+
"name": "onKeyDown",
|
|
48246
|
+
"args": [
|
|
48247
|
+
{
|
|
48248
|
+
"name": "event",
|
|
48249
|
+
"type": "KeyboardEvent",
|
|
48250
|
+
"deprecated": false,
|
|
48251
|
+
"deprecationMessage": ""
|
|
48252
|
+
}
|
|
48253
|
+
],
|
|
48254
|
+
"optional": false,
|
|
48255
|
+
"returnType": "void",
|
|
48256
|
+
"typeParameters": [],
|
|
48257
|
+
"line": 295,
|
|
48258
|
+
"deprecated": false,
|
|
48259
|
+
"deprecationMessage": "",
|
|
48260
|
+
"jsdoctags": [
|
|
48261
|
+
{
|
|
48262
|
+
"name": "event",
|
|
48263
|
+
"type": "KeyboardEvent",
|
|
48264
|
+
"deprecated": false,
|
|
48265
|
+
"deprecationMessage": "",
|
|
48266
|
+
"tagName": {
|
|
48267
|
+
"text": "param"
|
|
48268
|
+
}
|
|
48269
|
+
}
|
|
48270
|
+
]
|
|
48271
|
+
},
|
|
48272
|
+
{
|
|
48273
|
+
"name": "onMouseDown",
|
|
48274
|
+
"args": [
|
|
48275
|
+
{
|
|
48276
|
+
"name": "event",
|
|
48277
|
+
"type": "MouseEvent",
|
|
48278
|
+
"deprecated": false,
|
|
48279
|
+
"deprecationMessage": ""
|
|
48280
|
+
}
|
|
48281
|
+
],
|
|
48282
|
+
"optional": false,
|
|
48283
|
+
"returnType": "void",
|
|
48284
|
+
"typeParameters": [],
|
|
48285
|
+
"line": 285,
|
|
48286
|
+
"deprecated": false,
|
|
48287
|
+
"deprecationMessage": "",
|
|
48288
|
+
"jsdoctags": [
|
|
48289
|
+
{
|
|
48290
|
+
"name": "event",
|
|
48291
|
+
"type": "MouseEvent",
|
|
48292
|
+
"deprecated": false,
|
|
48293
|
+
"deprecationMessage": "",
|
|
48294
|
+
"tagName": {
|
|
48295
|
+
"text": "param"
|
|
48296
|
+
}
|
|
48297
|
+
}
|
|
48298
|
+
]
|
|
48299
|
+
},
|
|
48233
48300
|
{
|
|
48234
48301
|
"name": "registerOnChange",
|
|
48235
48302
|
"args": [
|
|
@@ -48243,7 +48310,7 @@
|
|
|
48243
48310
|
"optional": false,
|
|
48244
48311
|
"returnType": "void",
|
|
48245
48312
|
"typeParameters": [],
|
|
48246
|
-
"line":
|
|
48313
|
+
"line": 239,
|
|
48247
48314
|
"deprecated": false,
|
|
48248
48315
|
"deprecationMessage": "",
|
|
48249
48316
|
"rawdescription": "\n\nRegisters a listener that notifies the model when the control updates\n",
|
|
@@ -48273,7 +48340,7 @@
|
|
|
48273
48340
|
"optional": false,
|
|
48274
48341
|
"returnType": "void",
|
|
48275
48342
|
"typeParameters": [],
|
|
48276
|
-
"line":
|
|
48343
|
+
"line": 246,
|
|
48277
48344
|
"deprecated": false,
|
|
48278
48345
|
"deprecationMessage": "",
|
|
48279
48346
|
"rawdescription": "\n\nRegisters a listener that notifies the model when the control is blurred\n",
|
|
@@ -48303,7 +48370,7 @@
|
|
|
48303
48370
|
"optional": false,
|
|
48304
48371
|
"returnType": "void",
|
|
48305
48372
|
"typeParameters": [],
|
|
48306
|
-
"line":
|
|
48373
|
+
"line": 253,
|
|
48307
48374
|
"deprecated": false,
|
|
48308
48375
|
"deprecationMessage": "",
|
|
48309
48376
|
"rawdescription": "\n\nSets the disabled state through the model\n",
|
|
@@ -48333,7 +48400,7 @@
|
|
|
48333
48400
|
"optional": false,
|
|
48334
48401
|
"returnType": "void",
|
|
48335
48402
|
"typeParameters": [],
|
|
48336
|
-
"line":
|
|
48403
|
+
"line": 232,
|
|
48337
48404
|
"deprecated": false,
|
|
48338
48405
|
"deprecationMessage": "",
|
|
48339
48406
|
"rawdescription": "\n\nReceives a value from the model.\n",
|
|
@@ -48363,7 +48430,7 @@
|
|
|
48363
48430
|
"deprecationMessage": "",
|
|
48364
48431
|
"rawdescription": "\n\nListens for the host blurring, and notifies the model\n",
|
|
48365
48432
|
"description": "<p>Listens for the host blurring, and notifies the model</p>\n",
|
|
48366
|
-
"line":
|
|
48433
|
+
"line": 271
|
|
48367
48434
|
}
|
|
48368
48435
|
],
|
|
48369
48436
|
"standalone": false,
|
|
@@ -48371,7 +48438,7 @@
|
|
|
48371
48438
|
"description": "<p><code>cds-select</code> provides a styled <code>select</code> component. Get started with importing the module:</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-typescript\">import { SelectModule } from 'carbon-components-angular';</code></pre></div><b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\"><cds-select [(ngModel)]="model">\n <option value="default" disabled selected hidden>Choose an option</option>\n <option value="option1">Option 1</option>\n <option value="option2">Option 2</option>\n <option value="option3">Option 3</option>\n</cds-select>\n ```\n\n[See demo](../../?path=/story/components-select--basic)</code></pre></div>",
|
|
48372
48439
|
"rawdescription": "\n\n`cds-select` provides a styled `select` component. Get started with importing the module:\n\n```typescript\nimport { SelectModule } from 'carbon-components-angular';\n```\n\n```html\n<cds-select [(ngModel)]=\"model\">\n\t<option value=\"default\" disabled selected hidden>Choose an option</option>\n\t<option value=\"option1\">Option 1</option>\n\t<option value=\"option2\">Option 2</option>\n\t<option value=\"option3\">Option 3</option>\n</cds-select>\n\t```\n\n[See demo](../../?path=/story/components-select--basic)\n",
|
|
48373
48440
|
"type": "component",
|
|
48374
|
-
"sourceCode": "import {\n\tAfterViewInit,\n\tComponent,\n\tElementRef,\n\tInput,\n\tOutput,\n\tHostListener,\n\tEventEmitter,\n\tTemplateRef,\n\tViewChild\n} from \"@angular/core\";\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from \"@angular/forms\";\n\n/**\n * `cds-select` provides a styled `select` component. Get started with importing the module:\n *\n * ```typescript\n * import { SelectModule } from 'carbon-components-angular';\n * ```\n *\n * ```html\n * <cds-select [(ngModel)]=\"model\">\n * \t<option value=\"default\" disabled selected hidden>Choose an option</option>\n * \t<option value=\"option1\">Option 1</option>\n *\t<option value=\"option2\">Option 2</option>\n * \t<option value=\"option3\">Option 3</option>\n * </cds-select>\n *\t```\n *\n * [See demo](../../?path=/story/components-select--basic)\n */\n@Component({\n\tselector: \"cds-select, ibm-select\",\n\ttemplate: `\n\t\t<div class=\"cds--form-item\">\n\t\t\t<ng-template [ngIf]=\"skeleton\">\n\t\t\t\t<div *ngIf=\"label\" class=\"cds--label cds--skeleton\"></div>\n\t\t\t\t<div class=\"cds--select cds--skeleton\"></div>\n\t\t\t</ng-template>\n\t\t\t<div\n\t\t\t\t*ngIf=\"!skeleton\"\n\t\t\t\tclass=\"cds--select\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--select--inline': display === 'inline',\n\t\t\t\t\t'cds--select--light': theme === 'light',\n\t\t\t\t\t'cds--select--invalid': invalid,\n\t\t\t\t\t'cds--select--warning': warn,\n\t\t\t\t\t'cds--select--disabled': disabled\n\t\t\t\t}\">\n\t\t\t\t<label\n\t\t\t\t\t*ngIf=\"label\"\n\t\t\t\t\t[for]=\"id\"\n\t\t\t\t\tclass=\"cds--label\"\n\t\t\t\t\t[ngClass]=\"{'cds--label--disabled': disabled}\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t\t\t</label>\n\t\t\t\t<div *ngIf=\"display === 'inline'; else noInline\" class=\"cds--select-input--inline__wrapper\">\n\t\t\t\t\t<ng-container *ngTemplateOutlet=\"noInline\"></ng-container>\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\t*ngIf=\"helperText\"\n\t\t\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--form__helper-text--disabled': disabled\n\t\t\t\t\t}\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\n\t\t<!-- select element: dynamically projected based on 'display' variant -->\n\t\t<ng-template #noInline>\n\t\t\t<div class=\"cds--select-input__wrapper\" [attr.data-invalid]=\"(invalid ? true : null)\">\n\t\t\t\t<select\n\t\t\t\t\t#select\n\t\t\t\t\t[attr.id]=\"id\"\n\t\t\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t(change)=\"onChange($event)\"\n\t\t\t\t\t[attr.aria-invalid]=\"invalid ? 'true' : null\"\n\t\t\t\t\tclass=\"cds--select-input\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--select-input--sm': size === 'sm',\n\t\t\t\t\t\t'cds--select-input--md': size === 'md',\n\t\t\t\t\t\t'cds--select-input--lg': size === 'lg'\n\t\t\t\t\t}\">\n\t\t\t\t\t<ng-content></ng-content>\n\t\t\t\t</select>\n\t\t\t\t<svg\n\t\t\t\t\tfocusable=\"false\"\n\t\t\t\t\tpreserveAspectRatio=\"xMidYMid meet\"\n\t\t\t\t\tstyle=\"will-change: transform;\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\tclass=\"cds--select__arrow\"\n\t\t\t\t\twidth=\"16\"\n\t\t\t\t\theight=\"16\"\n\t\t\t\t\tviewBox=\"0 0 16 16\"\n\t\t\t\t\taria-hidden=\"true\">\n\t\t\t\t\t<path d=\"M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z\"></path>\n\t\t\t\t</svg>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"invalid\"\n\t\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--select__invalid-icon\">\n\t\t\t\t</svg>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"!invalid && warn\"\n\t\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--select__invalid-icon cds--select__invalid-icon--warning\">\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\t*ngIf=\"invalid && invalidText\" role=\"alert\" class=\"cds--form-requirement\" aria-live=\"polite\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\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: Select,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class Select implements ControlValueAccessor, AfterViewInit {\n\t/**\n\t * Tracks the total number of selects instantiated. Used to generate unique IDs\n\t */\n\tstatic selectCount = 0;\n\n\t/**\n\t * `inline` or `default` select displays\n\t */\n\t@Input() display: \"inline\" | \"default\" = \"default\";\n\t/**\n\t * Label for the select. Appears above the input.\n\t */\n\t@Input() label: string | TemplateRef<any>;\n\t/**\n\t * Optional helper text that appears under the label.\n\t */\n\t@Input() helperText: string | TemplateRef<any>;\n\t/**\n\t * Sets the invalid text.\n\t */\n\t@Input() invalidText: string | TemplateRef<any>;\n\t/**\n\t * Set to `true` to show a warning (contents set by warningText)\n\t */\n\t@Input() warn = false;\n\t/**\n\t * Sets the warning text\n\t */\n\t@Input() warnText: string | TemplateRef<any>;\n\t/**\n\t * Sets the unique ID. Defaults to `select-${total count of selects instantiated}`\n\t */\n\t@Input() id = `select-${Select.selectCount++}`;\n\t/**\n\t * Number input field render size\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\t/**\n\t * Set to true to disable component.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to true for a loading select.\n\t */\n\t@Input() skeleton = false;\n\t/**\n\t * Set to `true` for an invalid select component.\n\t */\n\t@Input() invalid = false;\n\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * `light` or `dark` select theme\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\t@Input() ariaLabel: string;\n\n\t@Output() valueChange = new EventEmitter();\n\n\t@ViewChild(\"select\") select: ElementRef;\n\n\t@Input() set value(v) {\n\t\tthis._value = v;\n\t\tif (this.select) {\n\t\t\tthis.select.nativeElement.value = this._value;\n\t\t}\n\t}\n\n\tget value() {\n\t\treturn this._value;\n\t}\n\n\tprotected _value;\n\n\tngAfterViewInit() {\n\t\tif (\n\t\t\tthis.value !== undefined &&\n\t\t\tthis.value !== null &&\n\t\t\tthis.select &&\n\t\t\tthis.select.nativeElement.value !== this.value\n\t\t) {\n\t\t\tthis.select.nativeElement.value = this.value;\n\t\t}\n\t}\n\n\t/**\n\t * Receives a value from the model.\n\t */\n\twriteValue(obj: any) {\n\t\tthis.value = obj;\n\t}\n\n\t/**\n\t * Registers a listener that notifies the model when the control updates\n\t */\n\tregisterOnChange(fn: any) {\n\t\tthis.onChangeHandler = fn;\n\t}\n\n\t/**\n\t * Registers a listener that notifies the model when the control is blurred\n\t */\n\tregisterOnTouched(fn: any) {\n\t\tthis.onTouchedHandler = fn;\n\t}\n\n\t/**\n\t * Sets the disabled state through the model\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\t/**\n\t * Handles the change event from the `select`.\n\t * Sends events to the change handler and emits a `selected` event.\n\t */\n\tonChange(event) {\n\t\tthis.value = event.target.value;\n\t\tthis.onChangeHandler(event.target.value);\n\t\tthis.valueChange.emit(event.target.value);\n\t}\n\n\t/**\n\t * Listens for the host blurring, and notifies the model\n\t */\n\t@HostListener(\"focusout\")\n\tfocusOut() {\n\t\tthis.onTouchedHandler();\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\t/**\n\t * placeholder declarations. Replaced by the functions provided to `registerOnChange` and `registerOnTouched`\n\t */\n\tprotected onChangeHandler = (_: any) => { };\n\tprotected onTouchedHandler = () => { };\n}\n",
|
|
48441
|
+
"sourceCode": "import {\n\tAfterViewInit,\n\tComponent,\n\tElementRef,\n\tInput,\n\tOutput,\n\tHostListener,\n\tEventEmitter,\n\tTemplateRef,\n\tViewChild\n} from \"@angular/core\";\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from \"@angular/forms\";\n\n/**\n * `cds-select` provides a styled `select` component. Get started with importing the module:\n *\n * ```typescript\n * import { SelectModule } from 'carbon-components-angular';\n * ```\n *\n * ```html\n * <cds-select [(ngModel)]=\"model\">\n * \t<option value=\"default\" disabled selected hidden>Choose an option</option>\n * \t<option value=\"option1\">Option 1</option>\n *\t<option value=\"option2\">Option 2</option>\n * \t<option value=\"option3\">Option 3</option>\n * </cds-select>\n *\t```\n *\n * [See demo](../../?path=/story/components-select--basic)\n */\n@Component({\n\tselector: \"cds-select, ibm-select\",\n\ttemplate: `\n\t\t<div class=\"cds--form-item\">\n\t\t\t<ng-template [ngIf]=\"skeleton\">\n\t\t\t\t<div *ngIf=\"label\" class=\"cds--label cds--skeleton\"></div>\n\t\t\t\t<div class=\"cds--select cds--skeleton\"></div>\n\t\t\t</ng-template>\n\t\t\t<div\n\t\t\t\t*ngIf=\"!skeleton\"\n\t\t\t\tclass=\"cds--select\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--select--inline': display === 'inline',\n\t\t\t\t\t'cds--select--light': theme === 'light',\n\t\t\t\t\t'cds--select--invalid': invalid,\n\t\t\t\t\t'cds--select--warning': warn,\n\t\t\t\t\t'cds--select--disabled': disabled,\n\t\t\t\t\t'cds--select--readonly': readonly\n\t\t\t\t}\">\n\t\t\t\t<label\n\t\t\t\t\t*ngIf=\"label\"\n\t\t\t\t\t[for]=\"id\"\n\t\t\t\t\tclass=\"cds--label\"\n\t\t\t\t\t[ngClass]=\"{'cds--label--disabled': disabled}\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t\t\t</label>\n\t\t\t\t<div *ngIf=\"display === 'inline'; else noInline\" class=\"cds--select-input--inline__wrapper\">\n\t\t\t\t\t<ng-container *ngTemplateOutlet=\"noInline\"></ng-container>\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\t*ngIf=\"helperText\"\n\t\t\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--form__helper-text--disabled': disabled\n\t\t\t\t\t}\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\n\t\t<!-- select element: dynamically projected based on 'display' variant -->\n\t\t<ng-template #noInline>\n\t\t\t<div class=\"cds--select-input__wrapper\" [attr.data-invalid]=\"(invalid ? true : null)\">\n\t\t\t\t<select\n\t\t\t\t\t#select\n\t\t\t\t\t[attr.id]=\"id\"\n\t\t\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t(change)=\"onChange($event)\"\n\t\t\t\t\t[attr.aria-invalid]=\"invalid ? 'true' : null\"\n\t\t\t\t\t[attr.aria-readonly]=\"readonly ? 'true' : null\"\n\t\t\t\t\tclass=\"cds--select-input\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--select-input--sm': size === 'sm',\n\t\t\t\t\t\t'cds--select-input--md': size === 'md',\n\t\t\t\t\t\t'cds--select-input--lg': size === 'lg'\n\t\t\t\t\t}\"\n\t\t\t\t\t(mousedown)=\"onMouseDown($event)\"\n\t\t\t\t\t(keydown)=\"onKeyDown($event)\">\n\t\t\t\t\t<ng-content></ng-content>\n\t\t\t\t</select>\n\t\t\t\t<svg\n\t\t\t\t\tfocusable=\"false\"\n\t\t\t\t\tpreserveAspectRatio=\"xMidYMid meet\"\n\t\t\t\t\tstyle=\"will-change: transform;\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\tclass=\"cds--select__arrow\"\n\t\t\t\t\twidth=\"16\"\n\t\t\t\t\theight=\"16\"\n\t\t\t\t\tviewBox=\"0 0 16 16\"\n\t\t\t\t\taria-hidden=\"true\">\n\t\t\t\t\t<path d=\"M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z\"></path>\n\t\t\t\t</svg>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"invalid\"\n\t\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--select__invalid-icon\">\n\t\t\t\t</svg>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"!invalid && warn\"\n\t\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--select__invalid-icon cds--select__invalid-icon--warning\">\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\t*ngIf=\"invalid && invalidText\" role=\"alert\" class=\"cds--form-requirement\" aria-live=\"polite\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\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: Select,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class Select implements ControlValueAccessor, AfterViewInit {\n\t/**\n\t * Tracks the total number of selects instantiated. Used to generate unique IDs\n\t */\n\tstatic selectCount = 0;\n\n\t/**\n\t * `inline` or `default` select displays\n\t */\n\t@Input() display: \"inline\" | \"default\" = \"default\";\n\t/**\n\t * Label for the select. Appears above the input.\n\t */\n\t@Input() label: string | TemplateRef<any>;\n\t/**\n\t * Optional helper text that appears under the label.\n\t */\n\t@Input() helperText: string | TemplateRef<any>;\n\t/**\n\t * Sets the invalid text.\n\t */\n\t@Input() invalidText: string | TemplateRef<any>;\n\t/**\n\t * Set to `true` to show a warning (contents set by warningText)\n\t */\n\t@Input() warn = false;\n\t/**\n\t * Sets the warning text\n\t */\n\t@Input() warnText: string | TemplateRef<any>;\n\t/**\n\t * Sets the unique ID. Defaults to `select-${total count of selects instantiated}`\n\t */\n\t@Input() id = `select-${Select.selectCount++}`;\n\t/**\n\t * Number input field render size\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\t/**\n\t * Set to true to disable component.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to true for a loading select.\n\t */\n\t@Input() skeleton = false;\n\t/**\n\t * Set to `true` for an invalid select component.\n\t */\n\t@Input() invalid = false;\n\t/**\n\t * Set to `true` for readonly state.\n\t */\n\t@Input() readonly = false;\n\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * `light` or `dark` select theme\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\t@Input() ariaLabel: string;\n\n\t@Output() valueChange = new EventEmitter();\n\n\t@ViewChild(\"select\") select: ElementRef;\n\n\t@Input() set value(v) {\n\t\tthis._value = v;\n\t\tif (this.select) {\n\t\t\tthis.select.nativeElement.value = this._value;\n\t\t}\n\t}\n\n\tget value() {\n\t\treturn this._value;\n\t}\n\n\tprotected _value;\n\n\tngAfterViewInit() {\n\t\tif (\n\t\t\tthis.value !== undefined &&\n\t\t\tthis.value !== null &&\n\t\t\tthis.select &&\n\t\t\tthis.select.nativeElement.value !== this.value\n\t\t) {\n\t\t\tthis.select.nativeElement.value = this.value;\n\t\t}\n\t}\n\n\t/**\n\t * Receives a value from the model.\n\t */\n\twriteValue(obj: any) {\n\t\tthis.value = obj;\n\t}\n\n\t/**\n\t * Registers a listener that notifies the model when the control updates\n\t */\n\tregisterOnChange(fn: any) {\n\t\tthis.onChangeHandler = fn;\n\t}\n\n\t/**\n\t * Registers a listener that notifies the model when the control is blurred\n\t */\n\tregisterOnTouched(fn: any) {\n\t\tthis.onTouchedHandler = fn;\n\t}\n\n\t/**\n\t * Sets the disabled state through the model\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\t/**\n\t * Handles the change event from the `select`.\n\t * Sends events to the change handler and emits a `selected` event.\n\t */\n\tonChange(event) {\n\t\tthis.value = event.target.value;\n\t\tthis.onChangeHandler(event.target.value);\n\t\tthis.valueChange.emit(event.target.value);\n\t}\n\n\t/**\n\t * Listens for the host blurring, and notifies the model\n\t */\n\t@HostListener(\"focusout\")\n\tfocusOut() {\n\t\tthis.onTouchedHandler();\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\t/**\n\t * placeholder declarations. Replaced by the functions provided to `registerOnChange` and `registerOnTouched`\n\t */\n\tprotected onChangeHandler = (_: any) => { };\n\tprotected onTouchedHandler = () => { };\n\n\tonMouseDown(event: MouseEvent) {\n\t\t/**\n\t\t * This prevents the select from opening with mouse\n\t\t */\n\t\tif (this.readonly) {\n\t\t\tevent.preventDefault();\n\t\t\t(<HTMLElement>event.target).focus();\n\t\t}\n\t}\n\n\tonKeyDown(event: KeyboardEvent) {\n\t\tconst selectAccessKeys = [\"ArrowDown\", \"ArrowUp\", \"ArrowLeft\", \"ArrowRight\", \" \"];\n\t\t/**\n\t\t * This prevents the select from opening for the above keys\n\t\t */\n\t\tif (this.readonly && selectAccessKeys.includes(event.key)) {\n\t\t\tevent.preventDefault();\n\t\t}\n\t}\n}\n",
|
|
48375
48442
|
"assetsDirs": [],
|
|
48376
48443
|
"styleUrlsData": "",
|
|
48377
48444
|
"stylesData": "",
|
|
@@ -48397,7 +48464,7 @@
|
|
|
48397
48464
|
}
|
|
48398
48465
|
],
|
|
48399
48466
|
"returnType": "void",
|
|
48400
|
-
"line":
|
|
48467
|
+
"line": 205,
|
|
48401
48468
|
"jsdoctags": [
|
|
48402
48469
|
{
|
|
48403
48470
|
"name": "v",
|
|
@@ -48414,7 +48481,7 @@
|
|
|
48414
48481
|
"name": "value",
|
|
48415
48482
|
"type": "",
|
|
48416
48483
|
"returnType": "",
|
|
48417
|
-
"line":
|
|
48484
|
+
"line": 212
|
|
48418
48485
|
}
|
|
48419
48486
|
}
|
|
48420
48487
|
}
|
|
@@ -49737,7 +49804,7 @@
|
|
|
49737
49804
|
},
|
|
49738
49805
|
{
|
|
49739
49806
|
"name": "Slider",
|
|
49740
|
-
"id": "component-Slider-
|
|
49807
|
+
"id": "component-Slider-d693d6239eb9329e774b057ed68047aa6b6a6f493428bb2c230e0bbc06c0fbba7bd493dd21826c42cdaa6de0433d5fb03669ee4de1eac9d7ec1cad7c50568660",
|
|
49741
49808
|
"file": "src/slider/slider.component.ts",
|
|
49742
49809
|
"encapsulation": [],
|
|
49743
49810
|
"entryComponents": [],
|
|
@@ -49751,7 +49818,7 @@
|
|
|
49751
49818
|
"selector": "cds-slider, ibm-slider",
|
|
49752
49819
|
"styleUrls": [],
|
|
49753
49820
|
"styles": [],
|
|
49754
|
-
"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",
|
|
49755
49822
|
"templateUrl": [],
|
|
49756
49823
|
"viewProviders": [],
|
|
49757
49824
|
"hostDirectives": [],
|
|
@@ -49763,7 +49830,7 @@
|
|
|
49763
49830
|
"deprecationMessage": "",
|
|
49764
49831
|
"rawdescription": "\nSet to `true` for a slider without arrow key interactions.",
|
|
49765
49832
|
"description": "<p>Set to <code>true</code> for a slider without arrow key interactions.</p>\n",
|
|
49766
|
-
"line":
|
|
49833
|
+
"line": 270,
|
|
49767
49834
|
"type": "boolean",
|
|
49768
49835
|
"decorators": []
|
|
49769
49836
|
},
|
|
@@ -49773,7 +49840,7 @@
|
|
|
49773
49840
|
"deprecationMessage": "",
|
|
49774
49841
|
"rawdescription": "\nDisables the range visually and functionally",
|
|
49775
49842
|
"description": "<p>Disables the range visually and functionally</p>\n",
|
|
49776
|
-
"line":
|
|
49843
|
+
"line": 272,
|
|
49777
49844
|
"type": "boolean",
|
|
49778
49845
|
"decorators": []
|
|
49779
49846
|
},
|
|
@@ -49784,7 +49851,7 @@
|
|
|
49784
49851
|
"deprecationMessage": "",
|
|
49785
49852
|
"rawdescription": "\nBase ID for the slider. The min and max labels get IDs `${this.id}-bottom-range` and `${this.id}-top-range` respectively",
|
|
49786
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",
|
|
49787
|
-
"line":
|
|
49854
|
+
"line": 262,
|
|
49788
49855
|
"type": "string",
|
|
49789
49856
|
"decorators": []
|
|
49790
49857
|
},
|
|
@@ -49794,7 +49861,7 @@
|
|
|
49794
49861
|
"deprecationMessage": "",
|
|
49795
49862
|
"rawdescription": "\nSets the text inside the `label` tag",
|
|
49796
49863
|
"description": "<p>Sets the text inside the <code>label</code> tag</p>\n",
|
|
49797
|
-
"line":
|
|
49864
|
+
"line": 268,
|
|
49798
49865
|
"type": "string | TemplateRef<any>",
|
|
49799
49866
|
"decorators": []
|
|
49800
49867
|
},
|
|
@@ -49804,7 +49871,7 @@
|
|
|
49804
49871
|
"deprecationMessage": "",
|
|
49805
49872
|
"rawdescription": "\nThe upper bound of our range",
|
|
49806
49873
|
"description": "<p>The upper bound of our range</p>\n",
|
|
49807
|
-
"line":
|
|
49874
|
+
"line": 180,
|
|
49808
49875
|
"type": "number",
|
|
49809
49876
|
"decorators": []
|
|
49810
49877
|
},
|
|
@@ -49814,10 +49881,20 @@
|
|
|
49814
49881
|
"deprecationMessage": "",
|
|
49815
49882
|
"rawdescription": "\nThe lower bound of our range",
|
|
49816
49883
|
"description": "<p>The lower bound of our range</p>\n",
|
|
49817
|
-
"line":
|
|
49884
|
+
"line": 170,
|
|
49818
49885
|
"type": "number",
|
|
49819
49886
|
"decorators": []
|
|
49820
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
|
+
},
|
|
49821
49898
|
{
|
|
49822
49899
|
"name": "shiftMultiplier",
|
|
49823
49900
|
"defaultValue": "4",
|
|
@@ -49825,7 +49902,7 @@
|
|
|
49825
49902
|
"deprecationMessage": "",
|
|
49826
49903
|
"rawdescription": "\nValue used to \"multiply\" the `step` when using arrow keys to select values",
|
|
49827
49904
|
"description": "<p>Value used to "multiply" the <code>step</code> when using arrow keys to select values</p>\n",
|
|
49828
|
-
"line":
|
|
49905
|
+
"line": 264,
|
|
49829
49906
|
"type": "number",
|
|
49830
49907
|
"decorators": []
|
|
49831
49908
|
},
|
|
@@ -49836,7 +49913,7 @@
|
|
|
49836
49913
|
"deprecationMessage": "",
|
|
49837
49914
|
"rawdescription": "\nSet to `true` for a loading slider",
|
|
49838
49915
|
"description": "<p>Set to <code>true</code> for a loading slider</p>\n",
|
|
49839
|
-
"line":
|
|
49916
|
+
"line": 266,
|
|
49840
49917
|
"type": "boolean",
|
|
49841
49918
|
"decorators": []
|
|
49842
49919
|
},
|
|
@@ -49847,7 +49924,7 @@
|
|
|
49847
49924
|
"deprecationMessage": "",
|
|
49848
49925
|
"rawdescription": "\nThe interval for our range",
|
|
49849
49926
|
"description": "<p>The interval for our range</p>\n",
|
|
49850
|
-
"line":
|
|
49927
|
+
"line": 191,
|
|
49851
49928
|
"type": "number",
|
|
49852
49929
|
"decorators": []
|
|
49853
49930
|
},
|
|
@@ -49857,7 +49934,7 @@
|
|
|
49857
49934
|
"deprecationMessage": "",
|
|
49858
49935
|
"rawdescription": "\nSet the initial value. Available for two way binding",
|
|
49859
49936
|
"description": "<p>Set the initial value. Available for two way binding</p>\n",
|
|
49860
|
-
"line":
|
|
49937
|
+
"line": 193,
|
|
49861
49938
|
"type": "any",
|
|
49862
49939
|
"decorators": []
|
|
49863
49940
|
}
|
|
@@ -49870,7 +49947,7 @@
|
|
|
49870
49947
|
"deprecationMessage": "",
|
|
49871
49948
|
"rawdescription": "\nEmits every time a new value is selected",
|
|
49872
49949
|
"description": "<p>Emits every time a new value is selected</p>\n",
|
|
49873
|
-
"line":
|
|
49950
|
+
"line": 297,
|
|
49874
49951
|
"type": "EventEmitter<number | []>"
|
|
49875
49952
|
}
|
|
49876
49953
|
],
|
|
@@ -49883,7 +49960,7 @@
|
|
|
49883
49960
|
"type": "",
|
|
49884
49961
|
"optional": false,
|
|
49885
49962
|
"description": "",
|
|
49886
|
-
"line":
|
|
49963
|
+
"line": 306,
|
|
49887
49964
|
"modifierKind": [
|
|
49888
49965
|
125
|
|
49889
49966
|
]
|
|
@@ -49895,7 +49972,7 @@
|
|
|
49895
49972
|
"type": "ElementRef",
|
|
49896
49973
|
"optional": false,
|
|
49897
49974
|
"description": "",
|
|
49898
|
-
"line":
|
|
49975
|
+
"line": 302,
|
|
49899
49976
|
"decorators": [
|
|
49900
49977
|
{
|
|
49901
49978
|
"name": "ViewChild",
|
|
@@ -49914,7 +49991,7 @@
|
|
|
49914
49991
|
"type": "number",
|
|
49915
49992
|
"optional": false,
|
|
49916
49993
|
"description": "",
|
|
49917
|
-
"line":
|
|
49994
|
+
"line": 308,
|
|
49918
49995
|
"modifierKind": [
|
|
49919
49996
|
125
|
|
49920
49997
|
]
|
|
@@ -49927,7 +50004,7 @@
|
|
|
49927
50004
|
"type": "",
|
|
49928
50005
|
"optional": false,
|
|
49929
50006
|
"description": "",
|
|
49930
|
-
"line":
|
|
50007
|
+
"line": 298,
|
|
49931
50008
|
"decorators": [
|
|
49932
50009
|
{
|
|
49933
50010
|
"name": "HostBinding",
|
|
@@ -49946,7 +50023,7 @@
|
|
|
49946
50023
|
"type": "",
|
|
49947
50024
|
"optional": false,
|
|
49948
50025
|
"description": "",
|
|
49949
|
-
"line":
|
|
50026
|
+
"line": 305,
|
|
49950
50027
|
"modifierKind": [
|
|
49951
50028
|
125
|
|
49952
50029
|
]
|
|
@@ -49959,7 +50036,7 @@
|
|
|
49959
50036
|
"type": "function",
|
|
49960
50037
|
"optional": false,
|
|
49961
50038
|
"description": "<p>Callback to notify the model when our input has been touched</p>\n",
|
|
49962
|
-
"line":
|
|
50039
|
+
"line": 369,
|
|
49963
50040
|
"rawdescription": "\nCallback to notify the model when our input has been touched"
|
|
49964
50041
|
},
|
|
49965
50042
|
{
|
|
@@ -49970,7 +50047,7 @@
|
|
|
49970
50047
|
"type": "",
|
|
49971
50048
|
"optional": false,
|
|
49972
50049
|
"description": "<p>Send changes back to the model</p>\n",
|
|
49973
|
-
"line":
|
|
50050
|
+
"line": 361,
|
|
49974
50051
|
"rawdescription": "\nSend changes back to the model"
|
|
49975
50052
|
},
|
|
49976
50053
|
{
|
|
@@ -49980,7 +50057,7 @@
|
|
|
49980
50057
|
"type": "ElementRef",
|
|
49981
50058
|
"optional": false,
|
|
49982
50059
|
"description": "",
|
|
49983
|
-
"line":
|
|
50060
|
+
"line": 303,
|
|
49984
50061
|
"decorators": [
|
|
49985
50062
|
{
|
|
49986
50063
|
"name": "ViewChild",
|
|
@@ -49998,7 +50075,7 @@
|
|
|
49998
50075
|
"type": "QueryList<ElementRef>",
|
|
49999
50076
|
"optional": false,
|
|
50000
50077
|
"description": "",
|
|
50001
|
-
"line":
|
|
50078
|
+
"line": 299,
|
|
50002
50079
|
"decorators": [
|
|
50003
50080
|
{
|
|
50004
50081
|
"name": "ViewChildren",
|
|
@@ -50017,7 +50094,7 @@
|
|
|
50017
50094
|
"type": "",
|
|
50018
50095
|
"optional": false,
|
|
50019
50096
|
"description": "",
|
|
50020
|
-
"line":
|
|
50097
|
+
"line": 307,
|
|
50021
50098
|
"modifierKind": [
|
|
50022
50099
|
125
|
|
50023
50100
|
]
|
|
@@ -50029,7 +50106,7 @@
|
|
|
50029
50106
|
"type": "ElementRef",
|
|
50030
50107
|
"optional": false,
|
|
50031
50108
|
"description": "",
|
|
50032
|
-
"line":
|
|
50109
|
+
"line": 301,
|
|
50033
50110
|
"decorators": [
|
|
50034
50111
|
{
|
|
50035
50112
|
"name": "ViewChild",
|
|
@@ -50055,7 +50132,7 @@
|
|
|
50055
50132
|
"optional": false,
|
|
50056
50133
|
"returnType": "any",
|
|
50057
50134
|
"typeParameters": [],
|
|
50058
|
-
"line":
|
|
50135
|
+
"line": 410,
|
|
50059
50136
|
"deprecated": false,
|
|
50060
50137
|
"deprecationMessage": "",
|
|
50061
50138
|
"rawdescription": "\nConverts a given \"real\" value to a px value we can update the view with",
|
|
@@ -50085,7 +50162,7 @@
|
|
|
50085
50162
|
"optional": false,
|
|
50086
50163
|
"returnType": "number",
|
|
50087
50164
|
"typeParameters": [],
|
|
50088
|
-
"line":
|
|
50165
|
+
"line": 399,
|
|
50089
50166
|
"deprecated": false,
|
|
50090
50167
|
"deprecationMessage": "",
|
|
50091
50168
|
"rawdescription": "\nConverts a given px value to a \"real\" value in our range",
|
|
@@ -50123,7 +50200,7 @@
|
|
|
50123
50200
|
"optional": false,
|
|
50124
50201
|
"returnType": "void",
|
|
50125
50202
|
"typeParameters": [],
|
|
50126
|
-
"line":
|
|
50203
|
+
"line": 443,
|
|
50127
50204
|
"deprecated": false,
|
|
50128
50205
|
"deprecationMessage": "",
|
|
50129
50206
|
"rawdescription": "\n\nDecrements the value by the step value, or the step value multiplied by the `multiplier` argument.\n\n",
|
|
@@ -50131,8 +50208,8 @@
|
|
|
50131
50208
|
"jsdoctags": [
|
|
50132
50209
|
{
|
|
50133
50210
|
"name": {
|
|
50134
|
-
"pos":
|
|
50135
|
-
"end":
|
|
50211
|
+
"pos": 12686,
|
|
50212
|
+
"end": 12696,
|
|
50136
50213
|
"flags": 16842752,
|
|
50137
50214
|
"modifierFlagsCache": 0,
|
|
50138
50215
|
"transformFlags": 0,
|
|
@@ -50144,8 +50221,8 @@
|
|
|
50144
50221
|
"deprecationMessage": "",
|
|
50145
50222
|
"defaultValue": "1",
|
|
50146
50223
|
"tagName": {
|
|
50147
|
-
"pos":
|
|
50148
|
-
"end":
|
|
50224
|
+
"pos": 12677,
|
|
50225
|
+
"end": 12685,
|
|
50149
50226
|
"flags": 16842752,
|
|
50150
50227
|
"modifierFlagsCache": 0,
|
|
50151
50228
|
"transformFlags": 0,
|
|
@@ -50179,7 +50256,7 @@
|
|
|
50179
50256
|
"optional": false,
|
|
50180
50257
|
"returnType": "number",
|
|
50181
50258
|
"typeParameters": [],
|
|
50182
|
-
"line":
|
|
50259
|
+
"line": 384,
|
|
50183
50260
|
"deprecated": false,
|
|
50184
50261
|
"deprecationMessage": "",
|
|
50185
50262
|
"rawdescription": "\n\nReturns the amount of \"completeness\" of a value as a fraction of the total track width\n",
|
|
@@ -50217,7 +50294,7 @@
|
|
|
50217
50294
|
"optional": false,
|
|
50218
50295
|
"returnType": "void",
|
|
50219
50296
|
"typeParameters": [],
|
|
50220
|
-
"line":
|
|
50297
|
+
"line": 433,
|
|
50221
50298
|
"deprecated": false,
|
|
50222
50299
|
"deprecationMessage": "",
|
|
50223
50300
|
"rawdescription": "\n\nIncrements the value by the step value, or the step value multiplied by the `multiplier` argument.\n\n",
|
|
@@ -50225,8 +50302,8 @@
|
|
|
50225
50302
|
"jsdoctags": [
|
|
50226
50303
|
{
|
|
50227
50304
|
"name": {
|
|
50228
|
-
"pos":
|
|
50229
|
-
"end":
|
|
50305
|
+
"pos": 12331,
|
|
50306
|
+
"end": 12341,
|
|
50230
50307
|
"flags": 16842752,
|
|
50231
50308
|
"modifierFlagsCache": 0,
|
|
50232
50309
|
"transformFlags": 0,
|
|
@@ -50238,8 +50315,8 @@
|
|
|
50238
50315
|
"deprecationMessage": "",
|
|
50239
50316
|
"defaultValue": "1",
|
|
50240
50317
|
"tagName": {
|
|
50241
|
-
"pos":
|
|
50242
|
-
"end":
|
|
50318
|
+
"pos": 12322,
|
|
50319
|
+
"end": 12330,
|
|
50243
50320
|
"flags": 16842752,
|
|
50244
50321
|
"modifierFlagsCache": 0,
|
|
50245
50322
|
"transformFlags": 0,
|
|
@@ -50266,7 +50343,7 @@
|
|
|
50266
50343
|
"optional": false,
|
|
50267
50344
|
"returnType": "boolean",
|
|
50268
50345
|
"typeParameters": [],
|
|
50269
|
-
"line":
|
|
50346
|
+
"line": 451,
|
|
50270
50347
|
"deprecated": false,
|
|
50271
50348
|
"deprecationMessage": "",
|
|
50272
50349
|
"rawdescription": "\n\nDetermines if the slider is in range mode.\n",
|
|
@@ -50285,7 +50362,7 @@
|
|
|
50285
50362
|
"optional": false,
|
|
50286
50363
|
"returnType": "boolean",
|
|
50287
50364
|
"typeParameters": [],
|
|
50288
|
-
"line":
|
|
50365
|
+
"line": 566,
|
|
50289
50366
|
"deprecated": false,
|
|
50290
50367
|
"deprecationMessage": "",
|
|
50291
50368
|
"modifierKind": [
|
|
@@ -50322,7 +50399,7 @@
|
|
|
50322
50399
|
"optional": false,
|
|
50323
50400
|
"returnType": "void",
|
|
50324
50401
|
"typeParameters": [],
|
|
50325
|
-
"line":
|
|
50402
|
+
"line": 466,
|
|
50326
50403
|
"deprecated": false,
|
|
50327
50404
|
"deprecationMessage": "",
|
|
50328
50405
|
"rawdescription": "\nChange handler for the optional input",
|
|
@@ -50361,7 +50438,7 @@
|
|
|
50361
50438
|
"optional": false,
|
|
50362
50439
|
"returnType": "void",
|
|
50363
50440
|
"typeParameters": [],
|
|
50364
|
-
"line":
|
|
50441
|
+
"line": 475,
|
|
50365
50442
|
"deprecated": false,
|
|
50366
50443
|
"deprecationMessage": "",
|
|
50367
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",
|
|
@@ -50390,7 +50467,7 @@
|
|
|
50390
50467
|
"optional": false,
|
|
50391
50468
|
"returnType": "void",
|
|
50392
50469
|
"typeParameters": [],
|
|
50393
|
-
"line":
|
|
50470
|
+
"line": 493,
|
|
50394
50471
|
"deprecated": false,
|
|
50395
50472
|
"deprecationMessage": "",
|
|
50396
50473
|
"rawdescription": "\nFocus handler for the optional input",
|
|
@@ -50426,7 +50503,7 @@
|
|
|
50426
50503
|
"optional": false,
|
|
50427
50504
|
"returnType": "void",
|
|
50428
50505
|
"typeParameters": [],
|
|
50429
|
-
"line":
|
|
50506
|
+
"line": 550,
|
|
50430
50507
|
"deprecated": false,
|
|
50431
50508
|
"deprecationMessage": "",
|
|
50432
50509
|
"rawdescription": "\n\nCalls `incrementValue` for ArrowRight and ArrowUp, `decrementValue` for ArrowLeft and ArrowDown.\n\n",
|
|
@@ -50473,7 +50550,7 @@
|
|
|
50473
50550
|
"optional": false,
|
|
50474
50551
|
"returnType": "void",
|
|
50475
50552
|
"typeParameters": [],
|
|
50476
|
-
"line":
|
|
50553
|
+
"line": 532,
|
|
50477
50554
|
"deprecated": false,
|
|
50478
50555
|
"deprecationMessage": "",
|
|
50479
50556
|
"rawdescription": "\n\nEnables the `onMouseMove` handler\n\n",
|
|
@@ -50513,7 +50590,7 @@
|
|
|
50513
50590
|
"optional": false,
|
|
50514
50591
|
"returnType": "void",
|
|
50515
50592
|
"typeParameters": [],
|
|
50516
|
-
"line":
|
|
50593
|
+
"line": 498,
|
|
50517
50594
|
"deprecated": false,
|
|
50518
50595
|
"deprecationMessage": "",
|
|
50519
50596
|
"rawdescription": "\nMouse move handler. Responsible for updating the value and visual selection based on mouse movement",
|
|
@@ -50536,7 +50613,7 @@
|
|
|
50536
50613
|
"optional": false,
|
|
50537
50614
|
"returnType": "void",
|
|
50538
50615
|
"typeParameters": [],
|
|
50539
|
-
"line":
|
|
50616
|
+
"line": 541,
|
|
50540
50617
|
"deprecated": false,
|
|
50541
50618
|
"deprecationMessage": "",
|
|
50542
50619
|
"rawdescription": "\nDisables the `onMouseMove` handler",
|
|
@@ -50555,7 +50632,7 @@
|
|
|
50555
50632
|
"optional": false,
|
|
50556
50633
|
"returnType": "void",
|
|
50557
50634
|
"typeParameters": [],
|
|
50558
|
-
"line":
|
|
50635
|
+
"line": 364,
|
|
50559
50636
|
"deprecated": false,
|
|
50560
50637
|
"deprecationMessage": "",
|
|
50561
50638
|
"rawdescription": "\nRegister a change propagation function for `ControlValueAccessor`",
|
|
@@ -50585,7 +50662,7 @@
|
|
|
50585
50662
|
"optional": false,
|
|
50586
50663
|
"returnType": "void",
|
|
50587
50664
|
"typeParameters": [],
|
|
50588
|
-
"line":
|
|
50665
|
+
"line": 372,
|
|
50589
50666
|
"deprecated": false,
|
|
50590
50667
|
"deprecationMessage": "",
|
|
50591
50668
|
"rawdescription": "\nRegister a callback to notify when our input has been touched",
|
|
@@ -50615,7 +50692,7 @@
|
|
|
50615
50692
|
"optional": false,
|
|
50616
50693
|
"returnType": "string",
|
|
50617
50694
|
"typeParameters": [],
|
|
50618
|
-
"line":
|
|
50695
|
+
"line": 394,
|
|
50619
50696
|
"deprecated": false,
|
|
50620
50697
|
"deprecationMessage": "",
|
|
50621
50698
|
"rawdescription": "\nHelper function to return the CSS transform `scaleX` function",
|
|
@@ -50651,7 +50728,7 @@
|
|
|
50651
50728
|
"optional": false,
|
|
50652
50729
|
"returnType": "number",
|
|
50653
50730
|
"typeParameters": [],
|
|
50654
|
-
"line":
|
|
50731
|
+
"line": 356,
|
|
50655
50732
|
"deprecated": false,
|
|
50656
50733
|
"deprecationMessage": "",
|
|
50657
50734
|
"jsdoctags": [
|
|
@@ -50681,7 +50758,7 @@
|
|
|
50681
50758
|
"optional": false,
|
|
50682
50759
|
"returnType": "void",
|
|
50683
50760
|
"typeParameters": [],
|
|
50684
|
-
"line":
|
|
50761
|
+
"line": 459,
|
|
50685
50762
|
"deprecated": false,
|
|
50686
50763
|
"deprecationMessage": "",
|
|
50687
50764
|
"rawdescription": "\n\nRange mode only.\nUpdates the track width to span from the low thumb to the high thumb\n",
|
|
@@ -50700,7 +50777,7 @@
|
|
|
50700
50777
|
"optional": false,
|
|
50701
50778
|
"returnType": "void",
|
|
50702
50779
|
"typeParameters": [],
|
|
50703
|
-
"line":
|
|
50780
|
+
"line": 377,
|
|
50704
50781
|
"deprecated": false,
|
|
50705
50782
|
"deprecationMessage": "",
|
|
50706
50783
|
"rawdescription": "\nReceives a value from the model",
|
|
@@ -50726,7 +50803,7 @@
|
|
|
50726
50803
|
"defaultValue": "true",
|
|
50727
50804
|
"deprecated": false,
|
|
50728
50805
|
"deprecationMessage": "",
|
|
50729
|
-
"line":
|
|
50806
|
+
"line": 298,
|
|
50730
50807
|
"type": "boolean",
|
|
50731
50808
|
"decorators": []
|
|
50732
50809
|
}
|
|
@@ -50737,7 +50814,7 @@
|
|
|
50737
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",
|
|
50738
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",
|
|
50739
50816
|
"type": "component",
|
|
50740
|
-
"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",
|
|
50741
50818
|
"assetsDirs": [],
|
|
50742
50819
|
"styleUrlsData": "",
|
|
50743
50820
|
"stylesData": "",
|
|
@@ -50766,7 +50843,7 @@
|
|
|
50766
50843
|
"deprecationMessage": ""
|
|
50767
50844
|
}
|
|
50768
50845
|
],
|
|
50769
|
-
"line":
|
|
50846
|
+
"line": 318,
|
|
50770
50847
|
"jsdoctags": [
|
|
50771
50848
|
{
|
|
50772
50849
|
"name": "elementRef",
|
|
@@ -50819,7 +50896,7 @@
|
|
|
50819
50896
|
}
|
|
50820
50897
|
],
|
|
50821
50898
|
"returnType": "void",
|
|
50822
|
-
"line":
|
|
50899
|
+
"line": 170,
|
|
50823
50900
|
"rawdescription": "\nThe lower bound of our range",
|
|
50824
50901
|
"description": "<p>The lower bound of our range</p>\n",
|
|
50825
50902
|
"jsdoctags": [
|
|
@@ -50838,7 +50915,7 @@
|
|
|
50838
50915
|
"name": "min",
|
|
50839
50916
|
"type": "",
|
|
50840
50917
|
"returnType": "",
|
|
50841
|
-
"line":
|
|
50918
|
+
"line": 176
|
|
50842
50919
|
}
|
|
50843
50920
|
},
|
|
50844
50921
|
"max": {
|
|
@@ -50857,7 +50934,7 @@
|
|
|
50857
50934
|
}
|
|
50858
50935
|
],
|
|
50859
50936
|
"returnType": "void",
|
|
50860
|
-
"line":
|
|
50937
|
+
"line": 180,
|
|
50861
50938
|
"rawdescription": "\nThe upper bound of our range",
|
|
50862
50939
|
"description": "<p>The upper bound of our range</p>\n",
|
|
50863
50940
|
"jsdoctags": [
|
|
@@ -50876,7 +50953,7 @@
|
|
|
50876
50953
|
"name": "max",
|
|
50877
50954
|
"type": "",
|
|
50878
50955
|
"returnType": "",
|
|
50879
|
-
"line":
|
|
50956
|
+
"line": 187
|
|
50880
50957
|
}
|
|
50881
50958
|
},
|
|
50882
50959
|
"value": {
|
|
@@ -50895,7 +50972,7 @@
|
|
|
50895
50972
|
}
|
|
50896
50973
|
],
|
|
50897
50974
|
"returnType": "void",
|
|
50898
|
-
"line":
|
|
50975
|
+
"line": 193,
|
|
50899
50976
|
"rawdescription": "\nSet the initial value. Available for two way binding",
|
|
50900
50977
|
"description": "<p>Set the initial value. Available for two way binding</p>\n",
|
|
50901
50978
|
"jsdoctags": [
|
|
@@ -50914,7 +50991,7 @@
|
|
|
50914
50991
|
"name": "value",
|
|
50915
50992
|
"type": "",
|
|
50916
50993
|
"returnType": "",
|
|
50917
|
-
"line":
|
|
50994
|
+
"line": 254
|
|
50918
50995
|
}
|
|
50919
50996
|
},
|
|
50920
50997
|
"disabled": {
|
|
@@ -50933,7 +51010,7 @@
|
|
|
50933
51010
|
}
|
|
50934
51011
|
],
|
|
50935
51012
|
"returnType": "void",
|
|
50936
|
-
"line":
|
|
51013
|
+
"line": 272,
|
|
50937
51014
|
"rawdescription": "\nDisables the range visually and functionally",
|
|
50938
51015
|
"description": "<p>Disables the range visually and functionally</p>\n",
|
|
50939
51016
|
"jsdoctags": [
|
|
@@ -50952,7 +51029,45 @@
|
|
|
50952
51029
|
"name": "disabled",
|
|
50953
51030
|
"type": "",
|
|
50954
51031
|
"returnType": "",
|
|
50955
|
-
"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
|
|
50956
51071
|
}
|
|
50957
51072
|
}
|
|
50958
51073
|
}
|
|
@@ -62106,7 +62221,7 @@
|
|
|
62106
62221
|
"deprecationMessage": "",
|
|
62107
62222
|
"rawdescription": "\n\nSet to true to disable component.\n",
|
|
62108
62223
|
"description": "<p>Set to true to disable component.</p>\n",
|
|
62109
|
-
"line":
|
|
62224
|
+
"line": 180,
|
|
62110
62225
|
"type": "boolean",
|
|
62111
62226
|
"decorators": [],
|
|
62112
62227
|
"inheritance": {
|
|
@@ -62120,7 +62235,7 @@
|
|
|
62120
62235
|
"deprecationMessage": "",
|
|
62121
62236
|
"rawdescription": "\n\n`inline` or `default` select displays\n",
|
|
62122
62237
|
"description": "<p><code>inline</code> or <code>default</code> select displays</p>\n",
|
|
62123
|
-
"line":
|
|
62238
|
+
"line": 148,
|
|
62124
62239
|
"type": "\"inline\" | \"default\"",
|
|
62125
62240
|
"decorators": [],
|
|
62126
62241
|
"inheritance": {
|
|
@@ -62133,7 +62248,7 @@
|
|
|
62133
62248
|
"deprecationMessage": "",
|
|
62134
62249
|
"rawdescription": "\n\nOptional helper text that appears under the label.\n",
|
|
62135
62250
|
"description": "<p>Optional helper text that appears under the label.</p>\n",
|
|
62136
|
-
"line":
|
|
62251
|
+
"line": 156,
|
|
62137
62252
|
"type": "string | TemplateRef<any>",
|
|
62138
62253
|
"decorators": [],
|
|
62139
62254
|
"inheritance": {
|
|
@@ -62147,7 +62262,7 @@
|
|
|
62147
62262
|
"deprecationMessage": "",
|
|
62148
62263
|
"rawdescription": "\n\nSet to `true` for an invalid select component.\n",
|
|
62149
62264
|
"description": "<p>Set to <code>true</code> for an invalid select component.</p>\n",
|
|
62150
|
-
"line":
|
|
62265
|
+
"line": 188,
|
|
62151
62266
|
"type": "boolean",
|
|
62152
62267
|
"decorators": [],
|
|
62153
62268
|
"inheritance": {
|
|
@@ -62160,13 +62275,27 @@
|
|
|
62160
62275
|
"deprecationMessage": "",
|
|
62161
62276
|
"rawdescription": "\n\nSets the invalid text.\n",
|
|
62162
62277
|
"description": "<p>Sets the invalid text.</p>\n",
|
|
62163
|
-
"line":
|
|
62278
|
+
"line": 160,
|
|
62164
62279
|
"type": "string | TemplateRef<any>",
|
|
62165
62280
|
"decorators": [],
|
|
62166
62281
|
"inheritance": {
|
|
62167
62282
|
"file": "Select"
|
|
62168
62283
|
}
|
|
62169
62284
|
},
|
|
62285
|
+
{
|
|
62286
|
+
"name": "readonly",
|
|
62287
|
+
"defaultValue": "false",
|
|
62288
|
+
"deprecated": false,
|
|
62289
|
+
"deprecationMessage": "",
|
|
62290
|
+
"rawdescription": "\n\nSet to `true` for readonly state.\n",
|
|
62291
|
+
"description": "<p>Set to <code>true</code> for readonly state.</p>\n",
|
|
62292
|
+
"line": 192,
|
|
62293
|
+
"type": "boolean",
|
|
62294
|
+
"decorators": [],
|
|
62295
|
+
"inheritance": {
|
|
62296
|
+
"file": "Select"
|
|
62297
|
+
}
|
|
62298
|
+
},
|
|
62170
62299
|
{
|
|
62171
62300
|
"name": "size",
|
|
62172
62301
|
"defaultValue": "\"md\"",
|
|
@@ -62174,7 +62303,7 @@
|
|
|
62174
62303
|
"deprecationMessage": "",
|
|
62175
62304
|
"rawdescription": "\n\nNumber input field render size\n",
|
|
62176
62305
|
"description": "<p>Number input field render size</p>\n",
|
|
62177
|
-
"line":
|
|
62306
|
+
"line": 176,
|
|
62178
62307
|
"type": "\"sm\" | \"md\" | \"lg\"",
|
|
62179
62308
|
"decorators": [],
|
|
62180
62309
|
"inheritance": {
|
|
@@ -62185,7 +62314,7 @@
|
|
|
62185
62314
|
"name": "value",
|
|
62186
62315
|
"deprecated": false,
|
|
62187
62316
|
"deprecationMessage": "",
|
|
62188
|
-
"line":
|
|
62317
|
+
"line": 205,
|
|
62189
62318
|
"type": "any",
|
|
62190
62319
|
"decorators": [],
|
|
62191
62320
|
"inheritance": {
|
|
@@ -62199,7 +62328,7 @@
|
|
|
62199
62328
|
"deprecationMessage": "",
|
|
62200
62329
|
"rawdescription": "\n\nSet to `true` to show a warning (contents set by warningText)\n",
|
|
62201
62330
|
"description": "<p>Set to <code>true</code> to show a warning (contents set by warningText)</p>\n",
|
|
62202
|
-
"line":
|
|
62331
|
+
"line": 164,
|
|
62203
62332
|
"type": "boolean",
|
|
62204
62333
|
"decorators": [],
|
|
62205
62334
|
"inheritance": {
|
|
@@ -62212,7 +62341,7 @@
|
|
|
62212
62341
|
"deprecationMessage": "",
|
|
62213
62342
|
"rawdescription": "\n\nSets the warning text\n",
|
|
62214
62343
|
"description": "<p>Sets the warning text</p>\n",
|
|
62215
|
-
"line":
|
|
62344
|
+
"line": 168,
|
|
62216
62345
|
"type": "string | TemplateRef<any>",
|
|
62217
62346
|
"decorators": [],
|
|
62218
62347
|
"inheritance": {
|
|
@@ -62226,7 +62355,7 @@
|
|
|
62226
62355
|
"defaultValue": "new EventEmitter()",
|
|
62227
62356
|
"deprecated": false,
|
|
62228
62357
|
"deprecationMessage": "",
|
|
62229
|
-
"line":
|
|
62358
|
+
"line": 201,
|
|
62230
62359
|
"type": "EventEmitter",
|
|
62231
62360
|
"inheritance": {
|
|
62232
62361
|
"file": "Select"
|
|
@@ -62298,7 +62427,7 @@
|
|
|
62298
62427
|
"type": "ElementRef",
|
|
62299
62428
|
"optional": false,
|
|
62300
62429
|
"description": "",
|
|
62301
|
-
"line":
|
|
62430
|
+
"line": 203,
|
|
62302
62431
|
"decorators": [
|
|
62303
62432
|
{
|
|
62304
62433
|
"name": "ViewChild",
|
|
@@ -62320,7 +62449,7 @@
|
|
|
62320
62449
|
"type": "number",
|
|
62321
62450
|
"optional": false,
|
|
62322
62451
|
"description": "<p>Tracks the total number of selects instantiated. Used to generate unique IDs</p>\n",
|
|
62323
|
-
"line":
|
|
62452
|
+
"line": 143,
|
|
62324
62453
|
"rawdescription": "\n\nTracks the total number of selects instantiated. Used to generate unique IDs\n",
|
|
62325
62454
|
"modifierKind": [
|
|
62326
62455
|
126
|
|
@@ -62337,7 +62466,7 @@
|
|
|
62337
62466
|
"optional": false,
|
|
62338
62467
|
"returnType": "void",
|
|
62339
62468
|
"typeParameters": [],
|
|
62340
|
-
"line":
|
|
62469
|
+
"line": 271,
|
|
62341
62470
|
"deprecated": false,
|
|
62342
62471
|
"deprecationMessage": "",
|
|
62343
62472
|
"rawdescription": "\n\nListens for the host blurring, and notifies the model\n",
|
|
@@ -62368,7 +62497,7 @@
|
|
|
62368
62497
|
"optional": false,
|
|
62369
62498
|
"returnType": "boolean",
|
|
62370
62499
|
"typeParameters": [],
|
|
62371
|
-
"line":
|
|
62500
|
+
"line": 275,
|
|
62372
62501
|
"deprecated": false,
|
|
62373
62502
|
"deprecationMessage": "",
|
|
62374
62503
|
"modifierKind": [
|
|
@@ -62402,7 +62531,7 @@
|
|
|
62402
62531
|
"optional": false,
|
|
62403
62532
|
"returnType": "void",
|
|
62404
62533
|
"typeParameters": [],
|
|
62405
|
-
"line":
|
|
62534
|
+
"line": 261,
|
|
62406
62535
|
"deprecated": false,
|
|
62407
62536
|
"deprecationMessage": "",
|
|
62408
62537
|
"rawdescription": "\n\nHandles the change event from the `select`.\nSends events to the change handler and emits a `selected` event.\n",
|
|
@@ -62422,6 +62551,68 @@
|
|
|
62422
62551
|
"file": "Select"
|
|
62423
62552
|
}
|
|
62424
62553
|
},
|
|
62554
|
+
{
|
|
62555
|
+
"name": "onKeyDown",
|
|
62556
|
+
"args": [
|
|
62557
|
+
{
|
|
62558
|
+
"name": "event",
|
|
62559
|
+
"type": "KeyboardEvent",
|
|
62560
|
+
"deprecated": false,
|
|
62561
|
+
"deprecationMessage": ""
|
|
62562
|
+
}
|
|
62563
|
+
],
|
|
62564
|
+
"optional": false,
|
|
62565
|
+
"returnType": "void",
|
|
62566
|
+
"typeParameters": [],
|
|
62567
|
+
"line": 295,
|
|
62568
|
+
"deprecated": false,
|
|
62569
|
+
"deprecationMessage": "",
|
|
62570
|
+
"jsdoctags": [
|
|
62571
|
+
{
|
|
62572
|
+
"name": "event",
|
|
62573
|
+
"type": "KeyboardEvent",
|
|
62574
|
+
"deprecated": false,
|
|
62575
|
+
"deprecationMessage": "",
|
|
62576
|
+
"tagName": {
|
|
62577
|
+
"text": "param"
|
|
62578
|
+
}
|
|
62579
|
+
}
|
|
62580
|
+
],
|
|
62581
|
+
"inheritance": {
|
|
62582
|
+
"file": "Select"
|
|
62583
|
+
}
|
|
62584
|
+
},
|
|
62585
|
+
{
|
|
62586
|
+
"name": "onMouseDown",
|
|
62587
|
+
"args": [
|
|
62588
|
+
{
|
|
62589
|
+
"name": "event",
|
|
62590
|
+
"type": "MouseEvent",
|
|
62591
|
+
"deprecated": false,
|
|
62592
|
+
"deprecationMessage": ""
|
|
62593
|
+
}
|
|
62594
|
+
],
|
|
62595
|
+
"optional": false,
|
|
62596
|
+
"returnType": "void",
|
|
62597
|
+
"typeParameters": [],
|
|
62598
|
+
"line": 285,
|
|
62599
|
+
"deprecated": false,
|
|
62600
|
+
"deprecationMessage": "",
|
|
62601
|
+
"jsdoctags": [
|
|
62602
|
+
{
|
|
62603
|
+
"name": "event",
|
|
62604
|
+
"type": "MouseEvent",
|
|
62605
|
+
"deprecated": false,
|
|
62606
|
+
"deprecationMessage": "",
|
|
62607
|
+
"tagName": {
|
|
62608
|
+
"text": "param"
|
|
62609
|
+
}
|
|
62610
|
+
}
|
|
62611
|
+
],
|
|
62612
|
+
"inheritance": {
|
|
62613
|
+
"file": "Select"
|
|
62614
|
+
}
|
|
62615
|
+
},
|
|
62425
62616
|
{
|
|
62426
62617
|
"name": "registerOnChange",
|
|
62427
62618
|
"args": [
|
|
@@ -62435,7 +62626,7 @@
|
|
|
62435
62626
|
"optional": false,
|
|
62436
62627
|
"returnType": "void",
|
|
62437
62628
|
"typeParameters": [],
|
|
62438
|
-
"line":
|
|
62629
|
+
"line": 239,
|
|
62439
62630
|
"deprecated": false,
|
|
62440
62631
|
"deprecationMessage": "",
|
|
62441
62632
|
"rawdescription": "\n\nRegisters a listener that notifies the model when the control updates\n",
|
|
@@ -62468,7 +62659,7 @@
|
|
|
62468
62659
|
"optional": false,
|
|
62469
62660
|
"returnType": "void",
|
|
62470
62661
|
"typeParameters": [],
|
|
62471
|
-
"line":
|
|
62662
|
+
"line": 246,
|
|
62472
62663
|
"deprecated": false,
|
|
62473
62664
|
"deprecationMessage": "",
|
|
62474
62665
|
"rawdescription": "\n\nRegisters a listener that notifies the model when the control is blurred\n",
|
|
@@ -62501,7 +62692,7 @@
|
|
|
62501
62692
|
"optional": false,
|
|
62502
62693
|
"returnType": "void",
|
|
62503
62694
|
"typeParameters": [],
|
|
62504
|
-
"line":
|
|
62695
|
+
"line": 253,
|
|
62505
62696
|
"deprecated": false,
|
|
62506
62697
|
"deprecationMessage": "",
|
|
62507
62698
|
"rawdescription": "\n\nSets the disabled state through the model\n",
|
|
@@ -62534,7 +62725,7 @@
|
|
|
62534
62725
|
"optional": false,
|
|
62535
62726
|
"returnType": "void",
|
|
62536
62727
|
"typeParameters": [],
|
|
62537
|
-
"line":
|
|
62728
|
+
"line": 232,
|
|
62538
62729
|
"deprecated": false,
|
|
62539
62730
|
"deprecationMessage": "",
|
|
62540
62731
|
"rawdescription": "\n\nReceives a value from the model.\n",
|
|
@@ -62603,7 +62794,7 @@
|
|
|
62603
62794
|
"deprecationMessage": "",
|
|
62604
62795
|
"rawdescription": "\n\nListens for the host blurring, and notifies the model\n",
|
|
62605
62796
|
"description": "<p>Listens for the host blurring, and notifies the model</p>\n",
|
|
62606
|
-
"line":
|
|
62797
|
+
"line": 271,
|
|
62607
62798
|
"inheritance": {
|
|
62608
62799
|
"file": "Select"
|
|
62609
62800
|
}
|
|
@@ -71217,7 +71408,7 @@
|
|
|
71217
71408
|
"name": "Basic",
|
|
71218
71409
|
"ctype": "miscellaneous",
|
|
71219
71410
|
"subtype": "variable",
|
|
71220
|
-
"file": "src/
|
|
71411
|
+
"file": "src/button/button-set.stories.ts",
|
|
71221
71412
|
"deprecated": false,
|
|
71222
71413
|
"deprecationMessage": "",
|
|
71223
71414
|
"type": "",
|
|
@@ -71227,7 +71418,7 @@
|
|
|
71227
71418
|
"name": "Basic",
|
|
71228
71419
|
"ctype": "miscellaneous",
|
|
71229
71420
|
"subtype": "variable",
|
|
71230
|
-
"file": "src/button/button
|
|
71421
|
+
"file": "src/button/button.stories.ts",
|
|
71231
71422
|
"deprecated": false,
|
|
71232
71423
|
"deprecationMessage": "",
|
|
71233
71424
|
"type": "",
|
|
@@ -71237,7 +71428,7 @@
|
|
|
71237
71428
|
"name": "Basic",
|
|
71238
71429
|
"ctype": "miscellaneous",
|
|
71239
71430
|
"subtype": "variable",
|
|
71240
|
-
"file": "src/button/button.stories.ts",
|
|
71431
|
+
"file": "src/button/icon-button.stories.ts",
|
|
71241
71432
|
"deprecated": false,
|
|
71242
71433
|
"deprecationMessage": "",
|
|
71243
71434
|
"type": "",
|
|
@@ -71247,7 +71438,7 @@
|
|
|
71247
71438
|
"name": "Basic",
|
|
71248
71439
|
"ctype": "miscellaneous",
|
|
71249
71440
|
"subtype": "variable",
|
|
71250
|
-
"file": "src/
|
|
71441
|
+
"file": "src/breadcrumb/breadcrumb.stories.ts",
|
|
71251
71442
|
"deprecated": false,
|
|
71252
71443
|
"deprecationMessage": "",
|
|
71253
71444
|
"type": "",
|
|
@@ -72968,7 +73159,7 @@
|
|
|
72968
73159
|
"deprecated": false,
|
|
72969
73160
|
"deprecationMessage": "",
|
|
72970
73161
|
"type": "",
|
|
72971
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-select\n\t\t\t[(ngModel)]=\"model\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[size]=\"size\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[warnText]=\"warnText\"\n\t\t\t[label]=\"label\"\n\t\t\t[helperText]=\"helperText\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[(ngModel)]=\"model\"\n\t\t\t[display]=\"display\"\n\t\t\tariaLabel='ngModel select'>\n\t\t\t<option value=\"default\" disabled selected hidden>Choose an option</option>\n\t\t\t<option value=\"option1\">Option 1</option>\n\t\t\t<option value=\"option2\">Option 2</option>\n\t\t\t<option value=\"option3\">Option 3</option>\n\t\t</cds-select>\n\t`\n})"
|
|
73162
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-select\n\t\t\t[(ngModel)]=\"model\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[readonly]=\"readonly\"\n\t\t\t[size]=\"size\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[warnText]=\"warnText\"\n\t\t\t[label]=\"label\"\n\t\t\t[helperText]=\"helperText\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[(ngModel)]=\"model\"\n\t\t\t[display]=\"display\"\n\t\t\tariaLabel='ngModel select'>\n\t\t\t<option value=\"default\" disabled selected hidden>Choose an option</option>\n\t\t\t<option value=\"option1\">Option 1</option>\n\t\t\t<option value=\"option2\">Option 2</option>\n\t\t\t<option value=\"option3\">Option 3</option>\n\t\t</cds-select>\n\t`\n})"
|
|
72972
73163
|
},
|
|
72973
73164
|
{
|
|
72974
73165
|
"name": "NgTemplate",
|
|
@@ -73178,7 +73369,7 @@
|
|
|
73178
73369
|
"deprecated": false,
|
|
73179
73370
|
"deprecationMessage": "",
|
|
73180
73371
|
"type": "",
|
|
73181
|
-
"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})"
|
|
73182
73373
|
},
|
|
73183
73374
|
{
|
|
73184
73375
|
"name": "ReactiveForms",
|
|
@@ -73929,41 +74120,41 @@
|
|
|
73929
74120
|
"name": "Template",
|
|
73930
74121
|
"ctype": "miscellaneous",
|
|
73931
74122
|
"subtype": "variable",
|
|
73932
|
-
"file": "src/
|
|
74123
|
+
"file": "src/button/button-set.stories.ts",
|
|
73933
74124
|
"deprecated": false,
|
|
73934
74125
|
"deprecationMessage": "",
|
|
73935
74126
|
"type": "",
|
|
73936
|
-
"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})"
|
|
73937
74128
|
},
|
|
73938
74129
|
{
|
|
73939
74130
|
"name": "Template",
|
|
73940
74131
|
"ctype": "miscellaneous",
|
|
73941
74132
|
"subtype": "variable",
|
|
73942
|
-
"file": "src/button/button
|
|
74133
|
+
"file": "src/button/button.stories.ts",
|
|
73943
74134
|
"deprecated": false,
|
|
73944
74135
|
"deprecationMessage": "",
|
|
73945
74136
|
"type": "",
|
|
73946
|
-
"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})"
|
|
73947
74138
|
},
|
|
73948
74139
|
{
|
|
73949
74140
|
"name": "Template",
|
|
73950
74141
|
"ctype": "miscellaneous",
|
|
73951
74142
|
"subtype": "variable",
|
|
73952
|
-
"file": "src/button/button.stories.ts",
|
|
74143
|
+
"file": "src/button/icon-button.stories.ts",
|
|
73953
74144
|
"deprecated": false,
|
|
73954
74145
|
"deprecationMessage": "",
|
|
73955
74146
|
"type": "",
|
|
73956
|
-
"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})"
|
|
73957
74148
|
},
|
|
73958
74149
|
{
|
|
73959
74150
|
"name": "Template",
|
|
73960
74151
|
"ctype": "miscellaneous",
|
|
73961
74152
|
"subtype": "variable",
|
|
73962
|
-
"file": "src/
|
|
74153
|
+
"file": "src/breadcrumb/breadcrumb.stories.ts",
|
|
73963
74154
|
"deprecated": false,
|
|
73964
74155
|
"deprecationMessage": "",
|
|
73965
74156
|
"type": "",
|
|
73966
|
-
"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})"
|
|
73967
74158
|
},
|
|
73968
74159
|
{
|
|
73969
74160
|
"name": "Template",
|
|
@@ -74263,7 +74454,7 @@
|
|
|
74263
74454
|
"deprecated": false,
|
|
74264
74455
|
"deprecationMessage": "",
|
|
74265
74456
|
"type": "",
|
|
74266
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-select\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[size]=\"size\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[warnText]=\"warnText\"\n\t\t\t[label]=\"label\"\n\t\t\t[helperText]=\"helperText\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[(ngModel)]=\"model\"\n\t\t\t[display]=\"display\">\n\t\t\t<option value=\"default\" disabled selected hidden>Choose an option</option>\n\t\t\t<option value=\"solong\">A much longer option that is worth having around to check how text flows</option>\n\t\t\t<optgroup label=\"Category 1\">\n\t\t\t\t<option value=\"option1\">Option 1</option>\n\t\t\t\t<option value=\"option2\">Option 2</option>\n\t\t\t</optgroup>\n\t\t\t<optgroup label=\"Category 2\">\n\t\t\t\t<option value=\"option1\">Option 1</option>\n\t\t\t\t<option value=\"option2\">Option 2</option>\n\t\t\t</optgroup>\n\t\t</cds-select>\n\t`\n})"
|
|
74457
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-select\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[readonly]=\"readonly\"\n\t\t\t[size]=\"size\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[warnText]=\"warnText\"\n\t\t\t[label]=\"label\"\n\t\t\t[helperText]=\"helperText\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[(ngModel)]=\"model\"\n\t\t\t[display]=\"display\">\n\t\t\t<option value=\"default\" disabled selected hidden>Choose an option</option>\n\t\t\t<option value=\"solong\">A much longer option that is worth having around to check how text flows</option>\n\t\t\t<optgroup label=\"Category 1\">\n\t\t\t\t<option value=\"option1\">Option 1</option>\n\t\t\t\t<option value=\"option2\">Option 2</option>\n\t\t\t</optgroup>\n\t\t\t<optgroup label=\"Category 2\">\n\t\t\t\t<option value=\"option1\">Option 1</option>\n\t\t\t\t<option value=\"option2\">Option 2</option>\n\t\t\t</optgroup>\n\t\t</cds-select>\n\t`\n})"
|
|
74267
74458
|
},
|
|
74268
74459
|
{
|
|
74269
74460
|
"name": "Template",
|
|
@@ -74283,7 +74474,7 @@
|
|
|
74283
74474
|
"deprecated": false,
|
|
74284
74475
|
"deprecationMessage": "",
|
|
74285
74476
|
"type": "",
|
|
74286
|
-
"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})"
|
|
74287
74478
|
},
|
|
74288
74479
|
{
|
|
74289
74480
|
"name": "Template",
|
|
@@ -77729,199 +77920,199 @@
|
|
|
77729
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})"
|
|
77730
77921
|
}
|
|
77731
77922
|
],
|
|
77732
|
-
"src/
|
|
77923
|
+
"src/button/button-set.stories.ts": [
|
|
77733
77924
|
{
|
|
77734
77925
|
"name": "Basic",
|
|
77735
77926
|
"ctype": "miscellaneous",
|
|
77736
77927
|
"subtype": "variable",
|
|
77737
|
-
"file": "src/
|
|
77928
|
+
"file": "src/button/button-set.stories.ts",
|
|
77738
77929
|
"deprecated": false,
|
|
77739
77930
|
"deprecationMessage": "",
|
|
77740
77931
|
"type": "",
|
|
77741
77932
|
"defaultValue": "Template.bind({})"
|
|
77742
77933
|
},
|
|
77743
77934
|
{
|
|
77744
|
-
"name": "
|
|
77935
|
+
"name": "Template",
|
|
77745
77936
|
"ctype": "miscellaneous",
|
|
77746
77937
|
"subtype": "variable",
|
|
77747
|
-
"file": "src/
|
|
77938
|
+
"file": "src/button/button-set.stories.ts",
|
|
77748
77939
|
"deprecated": false,
|
|
77749
77940
|
"deprecationMessage": "",
|
|
77750
|
-
"type": ""
|
|
77751
|
-
|
|
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": [
|
|
77752
77946
|
{
|
|
77753
|
-
"name": "
|
|
77947
|
+
"name": "Basic",
|
|
77754
77948
|
"ctype": "miscellaneous",
|
|
77755
77949
|
"subtype": "variable",
|
|
77756
|
-
"file": "src/
|
|
77950
|
+
"file": "src/button/button.stories.ts",
|
|
77757
77951
|
"deprecated": false,
|
|
77758
77952
|
"deprecationMessage": "",
|
|
77759
77953
|
"type": "",
|
|
77760
|
-
"defaultValue": "
|
|
77954
|
+
"defaultValue": "Template.bind({})"
|
|
77761
77955
|
},
|
|
77762
77956
|
{
|
|
77763
|
-
"name": "
|
|
77957
|
+
"name": "Template",
|
|
77764
77958
|
"ctype": "miscellaneous",
|
|
77765
77959
|
"subtype": "variable",
|
|
77766
|
-
"file": "src/
|
|
77960
|
+
"file": "src/button/button.stories.ts",
|
|
77767
77961
|
"deprecated": false,
|
|
77768
77962
|
"deprecationMessage": "",
|
|
77769
77963
|
"type": "",
|
|
77770
|
-
"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})"
|
|
77771
77965
|
},
|
|
77772
77966
|
{
|
|
77773
|
-
"name": "
|
|
77967
|
+
"name": "WithIcon",
|
|
77774
77968
|
"ctype": "miscellaneous",
|
|
77775
77969
|
"subtype": "variable",
|
|
77776
|
-
"file": "src/
|
|
77970
|
+
"file": "src/button/button.stories.ts",
|
|
77777
77971
|
"deprecated": false,
|
|
77778
77972
|
"deprecationMessage": "",
|
|
77779
77973
|
"type": "",
|
|
77780
|
-
"defaultValue": "(
|
|
77974
|
+
"defaultValue": "WithIconTemplate.bind({})"
|
|
77781
77975
|
},
|
|
77782
77976
|
{
|
|
77783
|
-
"name": "
|
|
77977
|
+
"name": "WithIconTemplate",
|
|
77784
77978
|
"ctype": "miscellaneous",
|
|
77785
77979
|
"subtype": "variable",
|
|
77786
|
-
"file": "src/
|
|
77980
|
+
"file": "src/button/button.stories.ts",
|
|
77787
77981
|
"deprecated": false,
|
|
77788
77982
|
"deprecationMessage": "",
|
|
77789
77983
|
"type": "",
|
|
77790
|
-
"defaultValue": "
|
|
77791
|
-
}
|
|
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": [
|
|
77792
77988
|
{
|
|
77793
|
-
"name": "
|
|
77989
|
+
"name": "Basic",
|
|
77794
77990
|
"ctype": "miscellaneous",
|
|
77795
77991
|
"subtype": "variable",
|
|
77796
77992
|
"file": "src/breadcrumb/breadcrumb.stories.ts",
|
|
77797
77993
|
"deprecated": false,
|
|
77798
77994
|
"deprecationMessage": "",
|
|
77799
77995
|
"type": "",
|
|
77800
|
-
"defaultValue": "(
|
|
77996
|
+
"defaultValue": "Template.bind({})"
|
|
77801
77997
|
},
|
|
77802
77998
|
{
|
|
77803
|
-
"name": "
|
|
77999
|
+
"name": "breadcrumbItems",
|
|
77804
78000
|
"ctype": "miscellaneous",
|
|
77805
78001
|
"subtype": "variable",
|
|
77806
78002
|
"file": "src/breadcrumb/breadcrumb.stories.ts",
|
|
77807
78003
|
"deprecated": false,
|
|
77808
78004
|
"deprecationMessage": "",
|
|
77809
|
-
"type": ""
|
|
77810
|
-
"defaultValue": "ModelWTemplate.bind({})"
|
|
78005
|
+
"type": ""
|
|
77811
78006
|
},
|
|
77812
78007
|
{
|
|
77813
|
-
"name": "
|
|
78008
|
+
"name": "createBreadcrumbItems",
|
|
77814
78009
|
"ctype": "miscellaneous",
|
|
77815
78010
|
"subtype": "variable",
|
|
77816
78011
|
"file": "src/breadcrumb/breadcrumb.stories.ts",
|
|
77817
78012
|
"deprecated": false,
|
|
77818
78013
|
"deprecationMessage": "",
|
|
77819
78014
|
"type": "",
|
|
77820
|
-
"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}"
|
|
77821
78016
|
},
|
|
77822
78017
|
{
|
|
77823
|
-
"name": "
|
|
78018
|
+
"name": "CurrentPage",
|
|
77824
78019
|
"ctype": "miscellaneous",
|
|
77825
78020
|
"subtype": "variable",
|
|
77826
78021
|
"file": "src/breadcrumb/breadcrumb.stories.ts",
|
|
77827
78022
|
"deprecated": false,
|
|
77828
78023
|
"deprecationMessage": "",
|
|
77829
78024
|
"type": "",
|
|
77830
|
-
"defaultValue": "
|
|
78025
|
+
"defaultValue": "CurrentPageTemplate.bind({})"
|
|
77831
78026
|
},
|
|
77832
78027
|
{
|
|
77833
|
-
"name": "
|
|
78028
|
+
"name": "CurrentPageTemplate",
|
|
77834
78029
|
"ctype": "miscellaneous",
|
|
77835
78030
|
"subtype": "variable",
|
|
77836
78031
|
"file": "src/breadcrumb/breadcrumb.stories.ts",
|
|
77837
78032
|
"deprecated": false,
|
|
77838
78033
|
"deprecationMessage": "",
|
|
77839
78034
|
"type": "",
|
|
77840
|
-
"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})"
|
|
77841
78036
|
},
|
|
77842
78037
|
{
|
|
77843
|
-
"name": "
|
|
78038
|
+
"name": "Model",
|
|
77844
78039
|
"ctype": "miscellaneous",
|
|
77845
78040
|
"subtype": "variable",
|
|
77846
78041
|
"file": "src/breadcrumb/breadcrumb.stories.ts",
|
|
77847
78042
|
"deprecated": false,
|
|
77848
78043
|
"deprecationMessage": "",
|
|
77849
78044
|
"type": "",
|
|
77850
|
-
"defaultValue": "(
|
|
78045
|
+
"defaultValue": "ModelTemplate.bind({})"
|
|
77851
78046
|
},
|
|
77852
78047
|
{
|
|
77853
|
-
"name": "
|
|
78048
|
+
"name": "ModelTemplate",
|
|
77854
78049
|
"ctype": "miscellaneous",
|
|
77855
78050
|
"subtype": "variable",
|
|
77856
78051
|
"file": "src/breadcrumb/breadcrumb.stories.ts",
|
|
77857
78052
|
"deprecated": false,
|
|
77858
78053
|
"deprecationMessage": "",
|
|
77859
78054
|
"type": "",
|
|
77860
|
-
"defaultValue": "(
|
|
77861
|
-
}
|
|
77862
|
-
],
|
|
77863
|
-
"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
|
+
},
|
|
77864
78057
|
{
|
|
77865
|
-
"name": "
|
|
78058
|
+
"name": "ModelWithTemplate",
|
|
77866
78059
|
"ctype": "miscellaneous",
|
|
77867
78060
|
"subtype": "variable",
|
|
77868
|
-
"file": "src/
|
|
78061
|
+
"file": "src/breadcrumb/breadcrumb.stories.ts",
|
|
77869
78062
|
"deprecated": false,
|
|
77870
78063
|
"deprecationMessage": "",
|
|
77871
78064
|
"type": "",
|
|
77872
|
-
"defaultValue": "
|
|
78065
|
+
"defaultValue": "ModelWTemplate.bind({})"
|
|
77873
78066
|
},
|
|
77874
78067
|
{
|
|
77875
|
-
"name": "
|
|
78068
|
+
"name": "ModelWTemplate",
|
|
77876
78069
|
"ctype": "miscellaneous",
|
|
77877
78070
|
"subtype": "variable",
|
|
77878
|
-
"file": "src/
|
|
78071
|
+
"file": "src/breadcrumb/breadcrumb.stories.ts",
|
|
77879
78072
|
"deprecated": false,
|
|
77880
78073
|
"deprecationMessage": "",
|
|
77881
78074
|
"type": "",
|
|
77882
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<
|
|
77883
|
-
}
|
|
77884
|
-
],
|
|
77885
|
-
"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
|
+
},
|
|
77886
78077
|
{
|
|
77887
|
-
"name": "
|
|
78078
|
+
"name": "Skeleton",
|
|
77888
78079
|
"ctype": "miscellaneous",
|
|
77889
78080
|
"subtype": "variable",
|
|
77890
|
-
"file": "src/
|
|
78081
|
+
"file": "src/breadcrumb/breadcrumb.stories.ts",
|
|
77891
78082
|
"deprecated": false,
|
|
77892
78083
|
"deprecationMessage": "",
|
|
77893
78084
|
"type": "",
|
|
77894
|
-
"defaultValue": "
|
|
78085
|
+
"defaultValue": "WithSkeleton.bind({})"
|
|
77895
78086
|
},
|
|
77896
78087
|
{
|
|
77897
78088
|
"name": "Template",
|
|
77898
78089
|
"ctype": "miscellaneous",
|
|
77899
78090
|
"subtype": "variable",
|
|
77900
|
-
"file": "src/
|
|
78091
|
+
"file": "src/breadcrumb/breadcrumb.stories.ts",
|
|
77901
78092
|
"deprecated": false,
|
|
77902
78093
|
"deprecationMessage": "",
|
|
77903
78094
|
"type": "",
|
|
77904
|
-
"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})"
|
|
77905
78096
|
},
|
|
77906
78097
|
{
|
|
77907
|
-
"name": "
|
|
78098
|
+
"name": "WithSkeleton",
|
|
77908
78099
|
"ctype": "miscellaneous",
|
|
77909
78100
|
"subtype": "variable",
|
|
77910
|
-
"file": "src/
|
|
78101
|
+
"file": "src/breadcrumb/breadcrumb.stories.ts",
|
|
77911
78102
|
"deprecated": false,
|
|
77912
78103
|
"deprecationMessage": "",
|
|
77913
78104
|
"type": "",
|
|
77914
|
-
"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})"
|
|
77915
78106
|
},
|
|
77916
78107
|
{
|
|
77917
|
-
"name": "
|
|
78108
|
+
"name": "withTemplate",
|
|
77918
78109
|
"ctype": "miscellaneous",
|
|
77919
78110
|
"subtype": "variable",
|
|
77920
|
-
"file": "src/
|
|
78111
|
+
"file": "src/breadcrumb/breadcrumb.stories.ts",
|
|
77921
78112
|
"deprecated": false,
|
|
77922
78113
|
"deprecationMessage": "",
|
|
77923
78114
|
"type": "",
|
|
77924
|
-
"defaultValue": "(
|
|
78115
|
+
"defaultValue": "(templateRef, items) => items.map(item => Object.assign(item, { template: templateRef }))"
|
|
77925
78116
|
}
|
|
77926
78117
|
],
|
|
77927
78118
|
"src/checkbox/checkbox.stories.ts": [
|
|
@@ -79387,7 +79578,7 @@
|
|
|
79387
79578
|
"deprecated": false,
|
|
79388
79579
|
"deprecationMessage": "",
|
|
79389
79580
|
"type": "",
|
|
79390
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-select\n\t\t\t[(ngModel)]=\"model\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[size]=\"size\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[warnText]=\"warnText\"\n\t\t\t[label]=\"label\"\n\t\t\t[helperText]=\"helperText\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[(ngModel)]=\"model\"\n\t\t\t[display]=\"display\"\n\t\t\tariaLabel='ngModel select'>\n\t\t\t<option value=\"default\" disabled selected hidden>Choose an option</option>\n\t\t\t<option value=\"option1\">Option 1</option>\n\t\t\t<option value=\"option2\">Option 2</option>\n\t\t\t<option value=\"option3\">Option 3</option>\n\t\t</cds-select>\n\t`\n})"
|
|
79581
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-select\n\t\t\t[(ngModel)]=\"model\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[readonly]=\"readonly\"\n\t\t\t[size]=\"size\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[warnText]=\"warnText\"\n\t\t\t[label]=\"label\"\n\t\t\t[helperText]=\"helperText\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[(ngModel)]=\"model\"\n\t\t\t[display]=\"display\"\n\t\t\tariaLabel='ngModel select'>\n\t\t\t<option value=\"default\" disabled selected hidden>Choose an option</option>\n\t\t\t<option value=\"option1\">Option 1</option>\n\t\t\t<option value=\"option2\">Option 2</option>\n\t\t\t<option value=\"option3\">Option 3</option>\n\t\t</cds-select>\n\t`\n})"
|
|
79391
79582
|
},
|
|
79392
79583
|
{
|
|
79393
79584
|
"name": "OptionsSelected",
|
|
@@ -79437,7 +79628,7 @@
|
|
|
79437
79628
|
"deprecated": false,
|
|
79438
79629
|
"deprecationMessage": "",
|
|
79439
79630
|
"type": "",
|
|
79440
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-select\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[size]=\"size\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[warnText]=\"warnText\"\n\t\t\t[label]=\"label\"\n\t\t\t[helperText]=\"helperText\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[(ngModel)]=\"model\"\n\t\t\t[display]=\"display\">\n\t\t\t<option value=\"default\" disabled selected hidden>Choose an option</option>\n\t\t\t<option value=\"solong\">A much longer option that is worth having around to check how text flows</option>\n\t\t\t<optgroup label=\"Category 1\">\n\t\t\t\t<option value=\"option1\">Option 1</option>\n\t\t\t\t<option value=\"option2\">Option 2</option>\n\t\t\t</optgroup>\n\t\t\t<optgroup label=\"Category 2\">\n\t\t\t\t<option value=\"option1\">Option 1</option>\n\t\t\t\t<option value=\"option2\">Option 2</option>\n\t\t\t</optgroup>\n\t\t</cds-select>\n\t`\n})"
|
|
79631
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-select\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[readonly]=\"readonly\"\n\t\t\t[size]=\"size\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[warnText]=\"warnText\"\n\t\t\t[label]=\"label\"\n\t\t\t[helperText]=\"helperText\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[(ngModel)]=\"model\"\n\t\t\t[display]=\"display\">\n\t\t\t<option value=\"default\" disabled selected hidden>Choose an option</option>\n\t\t\t<option value=\"solong\">A much longer option that is worth having around to check how text flows</option>\n\t\t\t<optgroup label=\"Category 1\">\n\t\t\t\t<option value=\"option1\">Option 1</option>\n\t\t\t\t<option value=\"option2\">Option 2</option>\n\t\t\t</optgroup>\n\t\t\t<optgroup label=\"Category 2\">\n\t\t\t\t<option value=\"option1\">Option 1</option>\n\t\t\t\t<option value=\"option2\">Option 2</option>\n\t\t\t</optgroup>\n\t\t</cds-select>\n\t`\n})"
|
|
79441
79632
|
},
|
|
79442
79633
|
{
|
|
79443
79634
|
"name": "ValueProperty",
|
|
@@ -79511,7 +79702,7 @@
|
|
|
79511
79702
|
"deprecated": false,
|
|
79512
79703
|
"deprecationMessage": "",
|
|
79513
79704
|
"type": "",
|
|
79514
|
-
"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})"
|
|
79515
79706
|
},
|
|
79516
79707
|
{
|
|
79517
79708
|
"name": "Template",
|
|
@@ -79521,7 +79712,7 @@
|
|
|
79521
79712
|
"deprecated": false,
|
|
79522
79713
|
"deprecationMessage": "",
|
|
79523
79714
|
"type": "",
|
|
79524
|
-
"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})"
|
|
79525
79716
|
}
|
|
79526
79717
|
],
|
|
79527
79718
|
"src/structured-list/structured-list.stories.ts": [
|
|
@@ -86844,9 +87035,9 @@
|
|
|
86844
87035
|
"type": "component",
|
|
86845
87036
|
"linktype": "component",
|
|
86846
87037
|
"name": "Select",
|
|
86847
|
-
"coveragePercent":
|
|
86848
|
-
"coverageCount": "
|
|
86849
|
-
"status": "
|
|
87038
|
+
"coveragePercent": 72,
|
|
87039
|
+
"coverageCount": "21/29",
|
|
87040
|
+
"status": "good"
|
|
86850
87041
|
},
|
|
86851
87042
|
{
|
|
86852
87043
|
"filePath": "src/select/select.stories.ts",
|
|
@@ -87001,7 +87192,7 @@
|
|
|
87001
87192
|
"linktype": "component",
|
|
87002
87193
|
"name": "Slider",
|
|
87003
87194
|
"coveragePercent": 71,
|
|
87004
|
-
"coverageCount": "
|
|
87195
|
+
"coverageCount": "33/46",
|
|
87005
87196
|
"status": "good"
|
|
87006
87197
|
},
|
|
87007
87198
|
{
|
|
@@ -88450,8 +88641,8 @@
|
|
|
88450
88641
|
"type": "component",
|
|
88451
88642
|
"linktype": "component",
|
|
88452
88643
|
"name": "TimePickerSelect",
|
|
88453
|
-
"coveragePercent":
|
|
88454
|
-
"coverageCount": "
|
|
88644
|
+
"coveragePercent": 52,
|
|
88645
|
+
"coverageCount": "19/36",
|
|
88455
88646
|
"status": "good"
|
|
88456
88647
|
},
|
|
88457
88648
|
{
|