npm - carbon-components-angular - Versions diffs - 5.11.0 → 5.12.0 - Mend

carbon-components-angular 5.11.0 → 5.12.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.

Files changed (60) hide show

package/docs/documentation.json CHANGED Viewed

@@ -54249,7 +54249,7 @@
         },
         {
             "name": "TableHeadCheckbox",
-            "id": "component-TableHeadCheckbox-933bc5d063b77116a0d2589440e80b5e0f48a2b81a7c0ef8f3aa609a86c29e6e47c5246add557b0ae5078db31a8d302740032093f3fe8f7f4b5da4579e147990",
+            "id": "component-TableHeadCheckbox-6a34df2c4c51b524b3cdaa4b3150f1056ed7cae9551830dd0f66ce1088b45d4ffc0b867bb3f72f254760bdcff46e60c169bf12dfd110a2d1f712b09fa9ffd79a",
             "file": "src/table/head/table-head-checkbox.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -54270,7 +54270,7 @@
                     "name": "ariaLabel",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 46,
+                    "line": 41,
                     "type": "string | Observable",
                     "decorators": []
                 },
@@ -54279,7 +54279,7 @@
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 37,
+                    "line": 32,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -54288,7 +54288,7 @@
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 39,
+                    "line": 34,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -54297,27 +54297,16 @@
                     "defaultValue": "`select-all-${TableHeadCheckbox.tableSelectAllCount++}`",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 43,
+                    "line": 38,
                     "type": "string",
                     "decorators": []
                 },
-                {
-                    "name": "size",
-                    "defaultValue": "\"md\"",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nSize of the table rows.\n",
-                    "description": "<p>Size of the table rows.</p>\n",
-                    "line": 35,
-                    "type": "TableRowSize",
-                    "decorators": []
-                },
                 {
                     "name": "skeleton",
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 41,
+                    "line": 36,
                     "type": "boolean",
                     "decorators": []
                 }
@@ -54328,7 +54317,7 @@
                     "defaultValue": "new EventEmitter<void>()",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 54,
+                    "line": 49,
                     "type": "EventEmitter"
                 }
             ],
@@ -54341,7 +54330,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 56,
+                    "line": 51,
                     "decorators": [
                         {
                             "name": "HostBinding",
@@ -54360,7 +54349,7 @@
                     "optional": false,
                     "returnType": "Observable<string>",
                     "typeParameters": [],
-                    "line": 62,
+                    "line": 57,
                     "deprecated": false,
                     "deprecationMessage": ""
                 }
@@ -54373,7 +54362,7 @@
                     "defaultValue": "true",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 56,
+                    "line": 51,
                     "type": "boolean",
                     "decorators": []
                 }
@@ -54384,7 +54373,7 @@
             "description": "",
             "rawdescription": "\n",
             "type": "component",
-            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tHostBinding,\n\tEventEmitter\n} from \"@angular/core\";\nimport { I18n, Overridable } from \"carbon-components-angular/i18n\";\nimport { Observable } from \"rxjs\";\nimport { TableRowSize } from \"../table.types\";\n\n@Component({\n\t// tslint:disable-next-line: component-selector\n\tselector: \"[cdsTableHeadCheckbox], [ibmTableHeadCheckbox]\",\n\ttemplate: `\n\t\t<cds-checkbox\n\t\t\t*ngIf=\"!skeleton\"\n\t\t\tinline=\"true\"\n\t\t\t[name]=\"name\"\n\t\t\t[checked]=\"checked\"\n\t\t\t[indeterminate]=\"indeterminate\"\n\t\t\t(checkedChange)=\"change.emit()\"\n\t\t\t[ariaLabel]=\"getAriaLabel() | async\">\n\t\t</cds-checkbox>\n\t`,\n\tstyles: [`\n        :host { width: 10px; }\n    `]\n})\nexport class TableHeadCheckbox {\n\tprivate static tableSelectAllCount = 0;\n\t/**\n\t * Size of the table rows.\n\t */\n\t@Input() size: TableRowSize = \"md\";\n\n\t@Input() checked = false;\n\n\t@Input() indeterminate = false;\n\n\t@Input() skeleton = false;\n\n\t@Input() name = `select-all-${TableHeadCheckbox.tableSelectAllCount++}`;\n\n\t@Input()\n\tset ariaLabel(value: string | Observable<string>) {\n\t\tthis._ariaLabel.override(value);\n\t}\n\n\tget ariaLabel() {\n\t\treturn this._ariaLabel.value;\n\t}\n\n\t@Output() change = new EventEmitter<void>();\n\n\t@HostBinding(\"class.cds--table-column-checkbox\") hostClass = true;\n\n\tprotected _ariaLabel = this.i18n.getOverridable(\"TABLE.CHECKBOX_HEADER\");\n\n\tconstructor(protected i18n: I18n) { }\n\n\tgetAriaLabel(): Observable<string> {\n\t\treturn this._ariaLabel.subject;\n\t}\n}\n",
+            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tHostBinding,\n\tEventEmitter\n} from \"@angular/core\";\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { Observable } from \"rxjs\";\n\n@Component({\n\t// tslint:disable-next-line: component-selector\n\tselector: \"[cdsTableHeadCheckbox], [ibmTableHeadCheckbox]\",\n\ttemplate: `\n\t\t<cds-checkbox\n\t\t\t*ngIf=\"!skeleton\"\n\t\t\tinline=\"true\"\n\t\t\t[name]=\"name\"\n\t\t\t[checked]=\"checked\"\n\t\t\t[indeterminate]=\"indeterminate\"\n\t\t\t(checkedChange)=\"change.emit()\"\n\t\t\t[ariaLabel]=\"getAriaLabel() | async\">\n\t\t</cds-checkbox>\n\t`,\n\tstyles: [`\n        :host { width: 10px; }\n    `]\n})\nexport class TableHeadCheckbox {\n\tprivate static tableSelectAllCount = 0;\n\n\t@Input() checked = false;\n\n\t@Input() indeterminate = false;\n\n\t@Input() skeleton = false;\n\n\t@Input() name = `select-all-${TableHeadCheckbox.tableSelectAllCount++}`;\n\n\t@Input()\n\tset ariaLabel(value: string | Observable<string>) {\n\t\tthis._ariaLabel.override(value);\n\t}\n\n\tget ariaLabel() {\n\t\treturn this._ariaLabel.value;\n\t}\n\n\t@Output() change = new EventEmitter<void>();\n\n\t@HostBinding(\"class.cds--table-column-checkbox\") hostClass = true;\n\n\tprotected _ariaLabel = this.i18n.getOverridable(\"TABLE.CHECKBOX_HEADER\");\n\n\tconstructor(protected i18n: I18n) { }\n\n\tgetAriaLabel(): Observable<string> {\n\t\treturn this._ariaLabel.subject;\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "\n        :host { width: 10px; }\n    \n",
@@ -54401,7 +54390,7 @@
                         "deprecationMessage": ""
                     }
                 ],
-                "line": 58,
+                "line": 53,
                 "jsdoctags": [
                     {
                         "name": "i18n",
@@ -54431,7 +54420,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 46,
+                        "line": 41,
                         "jsdoctags": [
                             {
                                 "name": "value",
@@ -54448,7 +54437,7 @@
                         "name": "ariaLabel",
                         "type": "",
                         "returnType": "",
-                        "line": 50
+                        "line": 45
                     }
                 }
             }
@@ -60229,7 +60218,7 @@
         },
         {
             "name": "Toggle",
-            "id": "component-Toggle-624d83b5e724c74780140818e2e4f5c116dabfbd4080c474f7b2d2f84d4042f6c88b1a13055596c452100ab9e4a5f6abe3a0e52d66806b684e27ea39563c4bd9",
+            "id": "component-Toggle-5093b3199e8f0156d3e63b420597005365cf11b8abff8fe5199bd530bff9309d617fd87e7510deccd2bc7c757c215478dc31f8916aac0a55fb756bcff586a02c",
             "file": "src/toggle/toggle.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -60243,7 +60232,7 @@
             "selector": "cds-toggle, ibm-toggle",
             "styleUrls": [],
             "styles": [],
-            "template": "<button\n\tclass=\"cds--toggle__button\"\n\t[disabled]=\"disabled\"\n\t[id]=\"id\"\n\trole=\"switch\"\n\ttype=\"button\"\n\t[attr.aria-checked]=\"checked\"\n\t(click)=\"onClick($event)\">\n</button>\n<label\n\tclass=\"cds--toggle__label\"\n\t[for]=\"id\">\n\t<span\n\t\tclass=\"cds--toggle__label-text\"\n\t\t[ngClass]=\"{\n\t\t\t'cds--visually-hidden': hideLabel\n\t\t}\">\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</span>\n\t<div\n\t\tclass=\"cds--toggle__appearance\"\n\t\t[ngClass]=\"{\n\t\t\t'cds--toggle__appearance--sm': size === 'sm'\n\t\t}\">\n\t\t<div\n\t\t\tclass=\"cds--toggle__switch\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--toggle__switch--checked': checked\n\t\t\t}\">\n\t\t\t<svg\n\t\t\t\t*ngIf=\"size === 'sm'\"\n\t\t\t\tclass='cds--toggle__check'\n\t\t\t\twidth=\"6px\"\n\t\t\t\theight=\"5px\"\n\t\t\t\tviewBox=\"0 0 6 5\">\n\t\t\t\t<path d=\"M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z\" />\n\t\t\t</svg>\n\t\t</div>\n\t\t<span class=\"cds--toggle__text\">\n\t\t\t{{(hideLabel ? label : (getCheckedText() | async))}}\n\t\t</span>\n\t</div>\n</label>\n\t",
+            "template": "<ng-container *ngIf=\"!skeleton; else skeletonTemplate;\">\n\t<button\n\t\tclass=\"cds--toggle__button\"\n\t\t[disabled]=\"disabled\"\n\t\t[id]=\"id\"\n\t\trole=\"switch\"\n\t\ttype=\"button\"\n\t\t[attr.aria-checked]=\"checked\"\n\t\t(click)=\"onClick($event)\">\n\t</button>\n\t<label\n\t\tclass=\"cds--toggle__label\"\n\t\t[for]=\"id\">\n\t\t<span\n\t\t\tclass=\"cds--toggle__label-text\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--visually-hidden': hideLabel\n\t\t\t}\">\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</span>\n\t\t<div\n\t\t\tclass=\"cds--toggle__appearance\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--toggle__appearance--sm': size === 'sm'\n\t\t\t}\">\n\t\t\t<div\n\t\t\t\tclass=\"cds--toggle__switch\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--toggle__switch--checked': checked\n\t\t\t\t}\">\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"size === 'sm'\"\n\t\t\t\t\tclass='cds--toggle__check'\n\t\t\t\t\twidth=\"6px\"\n\t\t\t\t\theight=\"5px\"\n\t\t\t\t\tviewBox=\"0 0 6 5\">\n\t\t\t\t\t<path d=\"M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z\" />\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t\t<span class=\"cds--toggle__text\">\n\t\t\t\t{{(hideLabel ? label : (getCheckedText() | async))}}\n\t\t\t</span>\n\t\t</div>\n\t</label>\n</ng-container>\n<ng-template #skeletonTemplate>\n\t<div class=\"cds--toggle__skeleton-circle\"></div>\n\t<div class=\"cds--toggle__skeleton-rectangle\"></div>\n</ng-template>\n\t",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
@@ -60255,7 +60244,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` to hide the toggle label & set toggle on/off text to label.\n",
                     "description": "<p>Set to <code>true</code> to hide the toggle label &amp; set toggle on/off text to label.</p>\n",
-                    "line": 126,
+                    "line": 132,
                     "type": "boolean",
                     "decorators": [],
                     "inheritance": {
@@ -60268,7 +60257,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nText that is set as the label of the toggle.\n",
                     "description": "<p>Text that is set as the label of the toggle.</p>\n",
-                    "line": 118,
+                    "line": 124,
                     "type": "string | TemplateRef<any>",
                     "decorators": []
                 },
@@ -60278,7 +60267,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nText that is set on the left side of the toggle.\n",
                     "description": "<p>Text that is set on the left side of the toggle.</p>\n",
-                    "line": 96,
+                    "line": 102,
                     "type": "string | Observable",
                     "decorators": []
                 },
@@ -60288,7 +60277,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nText that is set on the right side of the toggle.\n",
                     "description": "<p>Text that is set on the right side of the toggle.</p>\n",
-                    "line": 108,
+                    "line": 114,
                     "type": "string | Observable",
                     "decorators": []
                 },
@@ -60299,10 +60288,22 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSize of the toggle component.\n",
                     "description": "<p>Size of the toggle component.</p>\n",
-                    "line": 122,
+                    "line": 128,
                     "type": "\"sm\" | \"md\"",
                     "decorators": []
                 },
+                {
+                    "name": "skeleton",
+                    "defaultValue": "false",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 134,
+                    "type": "boolean",
+                    "decorators": [],
+                    "inheritance": {
+                        "file": "Checkbox"
+                    }
+                },
                 {
                     "name": "ariaLabel",
                     "defaultValue": "\"\"",
@@ -60406,20 +60407,6 @@
                         "file": "Checkbox"
                     }
                 },
-                {
-                    "name": "skeleton",
-                    "defaultValue": "false",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nSet to `true` for a loading checkbox.\n",
-                    "description": "<p>Set to <code>true</code> for a loading checkbox.</p>\n",
-                    "line": 81,
-                    "type": "boolean",
-                    "decorators": [],
-                    "inheritance": {
-                        "file": "Checkbox"
-                    }
-                },
                 {
                     "name": "value",
                     "deprecated": false,
@@ -60476,25 +60463,6 @@
                 }
             ],
             "propertiesClass": [
-                {
-                    "name": "formItem",
-                    "defaultValue": "true",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "",
-                    "optional": false,
-                    "description": "",
-                    "line": 133,
-                    "decorators": [
-                        {
-                            "name": "HostBinding",
-                            "stringifiedArguments": "'class.cds--form-item'"
-                        }
-                    ],
-                    "modifierKind": [
-                        167
-                    ]
-                },
                 {
                     "name": "id",
                     "defaultValue": "\"toggle-\" + Toggle.toggleCount",
@@ -60503,7 +60471,7 @@
                     "type": "",
                     "optional": false,
                     "description": "<p>The unique id allocated to the <code>Toggle</code>.</p>\n",
-                    "line": 138,
+                    "line": 148,
                     "rawdescription": "\n\nThe unique id allocated to the `Toggle`.\n"
                 },
                 {
@@ -60514,7 +60482,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 128,
+                    "line": 136,
                     "decorators": [
                         {
                             "name": "HostBinding",
@@ -60533,7 +60501,7 @@
                     "type": "number",
                     "optional": false,
                     "description": "<p>Variable used for creating unique ids for toggle components.</p>\n",
-                    "line": 90,
+                    "line": 96,
                     "rawdescription": "\n\nVariable used for creating unique ids for toggle components.\n",
                     "modifierKind": [
                         124
@@ -60656,7 +60624,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 179,
+                    "line": 189,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCreates instance of `ToggleChange` used to propagate the change event.\n",
@@ -60671,7 +60639,7 @@
                     "optional": false,
                     "returnType": "Observable<string>",
                     "typeParameters": [],
-                    "line": 169,
+                    "line": 179,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -60681,7 +60649,7 @@
                     "optional": false,
                     "returnType": "Observable<string>",
                     "typeParameters": [],
-                    "line": 161,
+                    "line": 171,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -60691,7 +60659,7 @@
                     "optional": false,
                     "returnType": "Observable<string>",
                     "typeParameters": [],
-                    "line": 165,
+                    "line": 175,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -60708,7 +60676,7 @@
                     "optional": false,
                     "returnType": "boolean",
                     "typeParameters": [],
-                    "line": 184,
+                    "line": 194,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "modifierKind": [
@@ -60739,7 +60707,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 157,
+                    "line": 167,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\n`ControlValueAccessor` method to programmatically disable the toggle input.\n\nex: `this.formGroup.get(\"myToggle\").disable();`\n\n",
@@ -60747,8 +60715,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 3467,
-                                "end": 3477,
+                                "pos": 3847,
+                                "end": 3857,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -60759,8 +60727,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 3461,
-                                "end": 3466,
+                                "pos": 3841,
+                                "end": 3846,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -61057,10 +61025,9 @@
             "hostBindings": [
                 {
                     "name": "class.cds--form-item",
-                    "defaultValue": "true",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 133,
+                    "line": 141,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -61069,7 +61036,7 @@
                     "defaultValue": "true",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 128,
+                    "line": 136,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -61077,7 +61044,7 @@
                     "name": "class.cds--toggle--disabled",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 129,
+                    "line": 137,
                     "type": "any",
                     "decorators": []
                 }
@@ -61100,7 +61067,7 @@
             "description": "<p><a href=\"../../?path=/story/components-toggle--basic\">See demo</a></p>\n<div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;cds-toggle [(ngModel)]=&quot;toggleState&quot;&gt;Toggle&lt;/cds-toggle&gt;</code></pre></div>",
             "rawdescription": "\n\n[See demo](../../?path=/story/components-toggle--basic)\n\n```html\n<cds-toggle [(ngModel)]=\"toggleState\">Toggle</cds-toggle>\n```\n",
             "type": "component",
-            "sourceCode": "import { Checkbox } from \"carbon-components-angular/checkbox\";\nimport {\n\tChangeDetectorRef,\n\tComponent,\n\tInput,\n\tHostBinding,\n\tTemplateRef\n} from \"@angular/core\";\nimport { NG_VALUE_ACCESSOR } from \"@angular/forms\";\n\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { Observable } from \"rxjs\";\n\n/**\n * Defines the set of states for a toggle component.\n */\nexport enum ToggleState {\n\tInit,\n\tChecked,\n\tUnchecked\n}\n\n/**\n * [See demo](../../?path=/story/components-toggle--basic)\n *\n * ```html\n * <cds-toggle [(ngModel)]=\"toggleState\">Toggle</cds-toggle>\n * ```\n */\n@Component({\n\tselector: \"cds-toggle, ibm-toggle\",\n\ttemplate: `\n\t\t<button\n\t\t\tclass=\"cds--toggle__button\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[id]=\"id\"\n\t\t\trole=\"switch\"\n\t\t\ttype=\"button\"\n\t\t\t[attr.aria-checked]=\"checked\"\n\t\t\t(click)=\"onClick($event)\">\n\t\t</button>\n\t\t<label\n\t\t\tclass=\"cds--toggle__label\"\n\t\t\t[for]=\"id\">\n\t\t\t<span\n\t\t\t\tclass=\"cds--toggle__label-text\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--visually-hidden': hideLabel\n\t\t\t\t}\">\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</span>\n\t\t\t<div\n\t\t\t\tclass=\"cds--toggle__appearance\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--toggle__appearance--sm': size === 'sm'\n\t\t\t\t}\">\n\t\t\t\t<div\n\t\t\t\t\tclass=\"cds--toggle__switch\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--toggle__switch--checked': checked\n\t\t\t\t\t}\">\n\t\t\t\t\t<svg\n\t\t\t\t\t\t*ngIf=\"size === 'sm'\"\n\t\t\t\t\t\tclass='cds--toggle__check'\n\t\t\t\t\t\twidth=\"6px\"\n\t\t\t\t\t\theight=\"5px\"\n\t\t\t\t\t\tviewBox=\"0 0 6 5\">\n\t\t\t\t\t\t<path d=\"M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z\" />\n\t\t\t\t\t</svg>\n\t\t\t\t</div>\n\t\t\t\t<span class=\"cds--toggle__text\">\n\t\t\t\t\t{{(hideLabel ? label : (getCheckedText() | async))}}\n\t\t\t\t</span>\n\t\t\t</div>\n\t\t</label>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: Toggle,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class Toggle extends Checkbox {\n\t/**\n\t * Variable used for creating unique ids for toggle components.\n\t */\n\tstatic toggleCount = 0;\n\n\t/**\n\t * Text that is set on the left side of the toggle.\n\t */\n\t@Input()\n\tset offText(value: string | Observable<string>) {\n\t\tthis._offValues.override(value);\n\t}\n\n\tget offText() {\n\t\treturn this._offValues.value;\n\t}\n\n\t/**\n\t * Text that is set on the right side of the toggle.\n\t */\n\t@Input()\n\tset onText(value: string | Observable<string>) {\n\t\tthis._onValues.override(value);\n\t}\n\n\tget onText() {\n\t\treturn this._onValues.value;\n\t}\n\t/**\n\t * Text that is set as the label of the toggle.\n\t */\n\t@Input() label: string | TemplateRef<any>;\n\t/**\n\t * Size of the toggle component.\n\t */\n\t@Input() size: \"sm\" | \"md\" = \"md\";\n\t/**\n\t * Set to `true` to hide the toggle label & set toggle on/off text to label.\n\t */\n\t@Input() hideLabel = false;\n\n\t@HostBinding(\"class.cds--toggle\") toggleClass = true;\n\t@HostBinding(\"class.cds--toggle--disabled\") get disabledClass () {\n\t\treturn this.disabled;\n\t}\n\n\t@HostBinding(\"class.cds--form-item\") formItem = true;\n\n\t/**\n\t * The unique id allocated to the `Toggle`.\n\t */\n\tid = \"toggle-\" + Toggle.toggleCount;\n\n\tprotected _offValues = this.i18n.getOverridable(\"TOGGLE.OFF\");\n\tprotected _onValues = this.i18n.getOverridable(\"TOGGLE.ON\");\n\t/**\n\t * Creates an instance of Toggle.\n\t */\n\tconstructor(protected changeDetectorRef: ChangeDetectorRef, protected i18n: I18n) {\n\t\tsuper(changeDetectorRef);\n\t\tToggle.toggleCount++;\n\t}\n\n\t/**\n\t * `ControlValueAccessor` method to programmatically disable the toggle input.\n\t *\n\t * ex: `this.formGroup.get(\"myToggle\").disable();`\n\t *\n\t * @param isDisabled `true` to disable the input\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\tgetOffText(): Observable<string> {\n\t\treturn this._offValues.subject;\n\t}\n\n\tgetOnText(): Observable<string> {\n\t\treturn this._onValues.subject;\n\t}\n\n\tgetCheckedText(): Observable<string> {\n\t\tif (this.checked) {\n\t\t\treturn this._onValues.subject;\n\t\t}\n\t\treturn this._offValues.subject;\n\t}\n\n\t/**\n\t * Creates instance of `ToggleChange` used to propagate the change event.\n\t */\n\temitChangeEvent() {\n\t\tthis.checkedChange.emit(this.checked);\n\t\tthis.propagateChange(this.checked);\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n}\n",
+            "sourceCode": "import { Checkbox } from \"carbon-components-angular/checkbox\";\nimport {\n\tChangeDetectorRef,\n\tComponent,\n\tInput,\n\tHostBinding,\n\tTemplateRef\n} from \"@angular/core\";\nimport { NG_VALUE_ACCESSOR } from \"@angular/forms\";\n\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { Observable } from \"rxjs\";\n\n/**\n * Defines the set of states for a toggle component.\n */\nexport enum ToggleState {\n\tInit,\n\tChecked,\n\tUnchecked\n}\n\n/**\n * [See demo](../../?path=/story/components-toggle--basic)\n *\n * ```html\n * <cds-toggle [(ngModel)]=\"toggleState\">Toggle</cds-toggle>\n * ```\n */\n@Component({\n\tselector: \"cds-toggle, ibm-toggle\",\n\ttemplate: `\n\t\t<ng-container *ngIf=\"!skeleton; else skeletonTemplate;\">\n\t\t\t<button\n\t\t\t\tclass=\"cds--toggle__button\"\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t[id]=\"id\"\n\t\t\t\trole=\"switch\"\n\t\t\t\ttype=\"button\"\n\t\t\t\t[attr.aria-checked]=\"checked\"\n\t\t\t\t(click)=\"onClick($event)\">\n\t\t\t</button>\n\t\t\t<label\n\t\t\t\tclass=\"cds--toggle__label\"\n\t\t\t\t[for]=\"id\">\n\t\t\t\t<span\n\t\t\t\t\tclass=\"cds--toggle__label-text\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--visually-hidden': hideLabel\n\t\t\t\t\t}\">\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</span>\n\t\t\t\t<div\n\t\t\t\t\tclass=\"cds--toggle__appearance\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--toggle__appearance--sm': size === 'sm'\n\t\t\t\t\t}\">\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass=\"cds--toggle__switch\"\n\t\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t\t'cds--toggle__switch--checked': checked\n\t\t\t\t\t\t}\">\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t*ngIf=\"size === 'sm'\"\n\t\t\t\t\t\t\tclass='cds--toggle__check'\n\t\t\t\t\t\t\twidth=\"6px\"\n\t\t\t\t\t\t\theight=\"5px\"\n\t\t\t\t\t\t\tviewBox=\"0 0 6 5\">\n\t\t\t\t\t\t\t<path d=\"M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z\" />\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</div>\n\t\t\t\t\t<span class=\"cds--toggle__text\">\n\t\t\t\t\t\t{{(hideLabel ? label : (getCheckedText() | async))}}\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t</label>\n\t\t</ng-container>\n\t\t<ng-template #skeletonTemplate>\n\t\t\t<div class=\"cds--toggle__skeleton-circle\"></div>\n\t\t\t<div class=\"cds--toggle__skeleton-rectangle\"></div>\n\t\t</ng-template>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: Toggle,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class Toggle extends Checkbox {\n\t/**\n\t * Variable used for creating unique ids for toggle components.\n\t */\n\tstatic toggleCount = 0;\n\n\t/**\n\t * Text that is set on the left side of the toggle.\n\t */\n\t@Input()\n\tset offText(value: string | Observable<string>) {\n\t\tthis._offValues.override(value);\n\t}\n\n\tget offText() {\n\t\treturn this._offValues.value;\n\t}\n\n\t/**\n\t * Text that is set on the right side of the toggle.\n\t */\n\t@Input()\n\tset onText(value: string | Observable<string>) {\n\t\tthis._onValues.override(value);\n\t}\n\n\tget onText() {\n\t\treturn this._onValues.value;\n\t}\n\t/**\n\t * Text that is set as the label of the toggle.\n\t */\n\t@Input() label: string | TemplateRef<any>;\n\t/**\n\t * Size of the toggle component.\n\t */\n\t@Input() size: \"sm\" | \"md\" = \"md\";\n\t/**\n\t * Set to `true` to hide the toggle label & set toggle on/off text to label.\n\t */\n\t@Input() hideLabel = false;\n\n\t@HostBinding(\"class.cds--toggle--skeleton\") @Input() skeleton = false;\n\n\t@HostBinding(\"class.cds--toggle\") toggleClass = true;\n\t@HostBinding(\"class.cds--toggle--disabled\") get disabledClass () {\n\t\treturn this.disabled;\n\t}\n\n\t@HostBinding(\"class.cds--form-item\") get formItem() {\n\t\treturn !this.skeleton;\n\t}\n\n\t/**\n\t * The unique id allocated to the `Toggle`.\n\t */\n\tid = \"toggle-\" + Toggle.toggleCount;\n\n\tprotected _offValues = this.i18n.getOverridable(\"TOGGLE.OFF\");\n\tprotected _onValues = this.i18n.getOverridable(\"TOGGLE.ON\");\n\t/**\n\t * Creates an instance of Toggle.\n\t */\n\tconstructor(protected changeDetectorRef: ChangeDetectorRef, protected i18n: I18n) {\n\t\tsuper(changeDetectorRef);\n\t\tToggle.toggleCount++;\n\t}\n\n\t/**\n\t * `ControlValueAccessor` method to programmatically disable the toggle input.\n\t *\n\t * ex: `this.formGroup.get(\"myToggle\").disable();`\n\t *\n\t * @param isDisabled `true` to disable the input\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\tgetOffText(): Observable<string> {\n\t\treturn this._offValues.subject;\n\t}\n\n\tgetOnText(): Observable<string> {\n\t\treturn this._onValues.subject;\n\t}\n\n\tgetCheckedText(): Observable<string> {\n\t\tif (this.checked) {\n\t\t\treturn this._onValues.subject;\n\t\t}\n\t\treturn this._offValues.subject;\n\t}\n\n\t/**\n\t * Creates instance of `ToggleChange` used to propagate the change event.\n\t */\n\temitChangeEvent() {\n\t\tthis.checkedChange.emit(this.checked);\n\t\tthis.propagateChange(this.checked);\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -61123,7 +61090,7 @@
                         "deprecationMessage": ""
                     }
                 ],
-                "line": 141,
+                "line": 151,
                 "rawdescription": "\n\nCreates an instance of Toggle.\n",
                 "jsdoctags": [
                     {
@@ -61164,7 +61131,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 96,
+                        "line": 102,
                         "rawdescription": "\n\nText that is set on the left side of the toggle.\n",
                         "description": "<p>Text that is set on the left side of the toggle.</p>\n",
                         "jsdoctags": [
@@ -61183,7 +61150,7 @@
                         "name": "offText",
                         "type": "",
                         "returnType": "",
-                        "line": 100
+                        "line": 106
                     }
                 },
                 "onText": {
@@ -61202,7 +61169,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 108,
+                        "line": 114,
                         "rawdescription": "\n\nText that is set on the right side of the toggle.\n",
                         "description": "<p>Text that is set on the right side of the toggle.</p>\n",
                         "jsdoctags": [
@@ -61221,7 +61188,7 @@
                         "name": "onText",
                         "type": "",
                         "returnType": "",
-                        "line": 112
+                        "line": 118
                     }
                 },
                 "disabledClass": {
@@ -61230,7 +61197,16 @@
                         "name": "disabledClass",
                         "type": "",
                         "returnType": "",
-                        "line": 129
+                        "line": 137
+                    }
+                },
+                "formItem": {
+                    "name": "formItem",
+                    "getSignature": {
+                        "name": "formItem",
+                        "type": "",
+                        "returnType": "",
+                        "line": 141
                     }
                 }
             }
@@ -69702,7 +69678,7 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "Story<Toggle>",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-toggle\n\t\t\t[label]=\"label\"\n\t\t\t[hideLabel]=\"hideLabel\"\n\t\t\t[onText]=\"onText\"\n\t\t\t[offText]=\"offText\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[checked]=\"checked\"\n\t\t\t(checkedChange)=\"onChange($event)\"\n\t\t\t[size]=\"size\">\n\t\t</cds-toggle>\n\t`\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-toggle\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[label]=\"label\"\n\t\t\t[hideLabel]=\"hideLabel\"\n\t\t\t[onText]=\"onText\"\n\t\t\t[offText]=\"offText\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[checked]=\"checked\"\n\t\t\t(checkedChange)=\"onChange($event)\"\n\t\t\t[size]=\"size\">\n\t\t</cds-toggle>\n\t`\n})"
             },
             {
                 "name": "Template",
@@ -74860,7 +74836,7 @@
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "Story<Toggle>",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-toggle\n\t\t\t[label]=\"label\"\n\t\t\t[hideLabel]=\"hideLabel\"\n\t\t\t[onText]=\"onText\"\n\t\t\t[offText]=\"offText\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[checked]=\"checked\"\n\t\t\t(checkedChange)=\"onChange($event)\"\n\t\t\t[size]=\"size\">\n\t\t</cds-toggle>\n\t`\n})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-toggle\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[label]=\"label\"\n\t\t\t[hideLabel]=\"hideLabel\"\n\t\t\t[onText]=\"onText\"\n\t\t\t[offText]=\"offText\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[checked]=\"checked\"\n\t\t\t(checkedChange)=\"onChange($event)\"\n\t\t\t[size]=\"size\">\n\t\t</cds-toggle>\n\t`\n})"
                 }
             ],
             "src/toggletip/toggletip.stories.ts": [
@@ -81422,8 +81398,8 @@
                 "type": "component",
                 "linktype": "component",
                 "name": "TableHeadCheckbox",
-                "coveragePercent": 8,
-                "coverageCount": "1/12",
+                "coveragePercent": 0,
+                "coverageCount": "0/11",
                 "status": "low"
             },
             {
@@ -82677,8 +82653,8 @@
                 "type": "component",
                 "linktype": "component",
                 "name": "Toggle",
-                "coveragePercent": 73,
-                "coverageCount": "36/49",
+                "coveragePercent": 72,
+                "coverageCount": "35/48",
                 "status": "good"
             },
             {

package/docs/storybook/{1895.69e2c275.iframe.bundle.js → 1895.f908bfb8.iframe.bundle.js} RENAMED Viewed

	@@ -1 +1 @@
1	- "use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular\|\|[]).push([[1895],{"./src/checkbox/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{XZ:()=>Checkbox,nD:()=>CheckboxModule});var CheckboxState,tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),fesm2020_forms=__webpack_require__("./node_modules/@angular/forms/fesm2020/forms.mjs");!function(CheckboxState){CheckboxState[CheckboxState.Init=0]="Init",CheckboxState[CheckboxState.Indeterminate=1]="Indeterminate",CheckboxState[CheckboxState.Checked=2]="Checked",CheckboxState[CheckboxState.Unchecked=3]="Unchecked"}(CheckboxState\|\|(CheckboxState={}));let Checkbox=class Checkbox{constructor(changeDetectorRef){this.changeDetectorRef=changeDetectorRef,this.disabled=!1,this.skeleton=!1,this.hideLabel=!1,this.id=`checkbox-${Checkbox.checkboxCount}`,this.ariaLabel="",this.click=new core.EventEmitter,this.checkedChange=new core.EventEmitter,this.indeterminateChange=new core.EventEmitter,this._checked=!1,this._indeterminate=!1,this.currentCheckboxState=CheckboxState.Init,this.onTouched=()=>{},this.propagateChange=_=>{},Checkbox.checkboxCount++}set indeterminate(indeterminate){indeterminate!==this._indeterminate&&(this._indeterminate=indeterminate,this._indeterminate?this.transitionCheckboxState(CheckboxState.Indeterminate):this.transitionCheckboxState(this.checked?CheckboxState.Checked:CheckboxState.Unchecked),this.inputCheckbox&&this.inputCheckbox.nativeElement&&(this.inputCheckbox.nativeElement.indeterminate=indeterminate),this.changeDetectorRef.markForCheck(),this.indeterminateChange.emit(this._indeterminate))}get indeterminate(){return this._indeterminate}set checked(checked){this.setChecked(checked,!1)}get checked(){return this._checked}toggle(){this.setChecked(!this.checked,!0)}writeValue(value){this.setChecked(!!value,!0)}registerOnChange(fn){this.propagateChange=fn}registerOnTouched(fn){this.onTouched=fn}setDisabledState(isDisabled){this.disabled=isDisabled,this.changeDetectorRef.markForCheck()}focusOut(){this.onTouched()}onChange(event){event.stopPropagation()}onClick(event){if(this.click.observers.length)return event.preventDefault(),void this.click.emit();this.disabled\|\|(this.toggle(),this.transitionCheckboxState(this._checked?CheckboxState.Checked:CheckboxState.Unchecked),this.emitChangeEvent())}transitionCheckboxState(newState){this.currentCheckboxState=newState}emitChangeEvent(){this.checkedChange.emit(this.checked),this.propagateChange(this.checked)}ngAfterViewInit(){this.indeterminate&&this.inputCheckbox&&this.inputCheckbox.nativeElement&&(this.inputCheckbox.nativeElement.indeterminate=!0)}setChecked(checked,resetIndeterminate){checked!==this._checked&&(this._checked=checked,resetIndeterminate&&this._indeterminate&&(this._indeterminate=!1,Promise.resolve().then((()=>{this.indeterminateChange.emit(this._indeterminate)}))),this.changeDetectorRef.markForCheck())}};Checkbox.checkboxCount=0,Checkbox.ctorParameters=()=>[{type:core.ChangeDetectorRef}],Checkbox.propDecorators={disabled:[{type:core.Input}],skeleton:[{type:core.Input}],hideLabel:[{type:core.Input}],name:[{type:core.Input}],id:[{type:core.Input}],required:[{type:core.Input}],value:[{type:core.Input}],ariaLabel:[{type:core.Input}],ariaLabelledby:[{type:core.Input}],indeterminate:[{type:core.Input}],checked:[{type:core.Input}],click:[{type:core.Output}],checkedChange:[{type:core.Output}],indeterminateChange:[{type:core.Output}],inputCheckbox:[{type:core.ViewChild,args:["inputCheckbox"]}],focusOut:[{type:core.HostListener,args:["focusout"]}]},Checkbox=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-checkbox, ibm-checkbox",template:'\n\t\t<div class="cds--form-item cds--checkbox-wrapper">\n\t\t\t<input\n\t\t\t\t#inputCheckbox\n\t\t\t\tclass="cds--checkbox"\n\t\t\t\ttype="checkbox"\n\t\t\t\t[id]="id + \'_input\'"\n\t\t\t\t[value]="value"\n\t\t\t\t[name]="name"\n\t\t\t\t[required]="required"\n\t\t\t\t[checked]="checked"\n\t\t\t\t[disabled]="disabled"\n\t\t\t\t[attr.aria-labelledby]="ariaLabelledby"\n\t\t\t\t(change)="onChange($event)"\n\t\t\t\t(click)="onClick($event)">\n\t\t\t<label\n\t\t\t\t[for]="id + \'_input\'"\n\t\t\t\t[attr.aria-label]="ariaLabel"\n\t\t\t\tclass="cds--checkbox-label"\n\t\t\t\t[ngClass]="{\n\t\t\t\t\t\'cds--skeleton\' : skeleton\n\t\t\t\t}">\n\t\t\t\t<span [ngClass]="{\'cds--visually-hidden\' : hideLabel}" class="cds--checkbox-label-text">\n\t\t\t\t\t<ng-content></ng-content>\n\t\t\t\t</span>\n\t\t\t</label>\n\t\t</div>\n\t',providers:[{provide:fesm2020_forms.JU,useExisting:Checkbox,multi:!0}],changeDetection:core.ChangeDetectionStrategy.OnPush})],Checkbox);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs");let CheckboxModule=class CheckboxModule{};CheckboxModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[Checkbox],exports:[Checkbox],imports:[common.CommonModule,fesm2020_forms.u5]})],CheckboxModule)},"./src/forms/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{hJ:()=>src_button.hJ,s:()=>NFormsModule});var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),fesm2020_forms=__webpack_require__("./node_modules/@angular/forms/fesm2020/forms.mjs"),common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs"),src_checkbox=__webpack_require__("./src/checkbox/index.ts"),toggle=__webpack_require__("./src/toggle/index.ts"),src_radio=__webpack_require__("./src/radio/index.ts"),input=__webpack_require__("./src/input/index.ts"),src_button=__webpack_require__("./src/button/index.ts");let NFormsModule=class NFormsModule{};NFormsModule=(0,tslib_es6.gn)([(0,core.NgModule)({exports:[src_checkbox.nD,toggle.vm,src_radio.dU,input.gP,src_button.hJ,input.gP],imports:[common.CommonModule,fesm2020_forms.u5,src_checkbox.nD,toggle.vm,src_radio.dU,input.gP,src_button.hJ]})],NFormsModule)},"./src/radio/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{Y8:()=>Radio,Ee:()=>RadioGroup,dU:()=>RadioModule});var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),fesm2020_forms=__webpack_require__("./node_modules/@angular/forms/fesm2020/forms.mjs");class RadioChange{constructor(source,value){this.source=source,this.value=value}}let Radio=class Radio{constructor(){this.checked=!1,this.name="",this.disabled=!1,this.labelPlacement="right",this.required=!1,this.skeleton=!1,this.id="radio-"+Radio.radioCount++,this.change=new core.EventEmitter,this.hostClass=!0,this.disabledFromGroup=!1,this._labelledby="",this.radioChangeHandler=event=>{}}set ariaLabelledby(value){this._labelledby=value}get ariaLabelledby(){return this._labelledby?this._labelledby:`label-${this.id}`}get labelLeft(){return"left"===this.labelPlacement}onChange(event){event.stopPropagation()}onClick(event){this.checked=event.target.checked;const radioEvent=new RadioChange(this,this.value);this.change.emit(radioEvent),this.radioChangeHandler(radioEvent)}registerRadioChangeHandler(fn){this.radioChangeHandler=fn}setDisabledFromGroup(disabled){this.disabledFromGroup=disabled}};Radio.radioCount=0,Radio.propDecorators={checked:[{type:core.Input}],name:[{type:core.Input}],disabled:[{type:core.Input}],labelPlacement:[{type:core.Input}],ariaLabelledby:[{type:core.Input}],ariaLabel:[{type:core.Input}],required:[{type:core.Input}],value:[{type:core.Input}],skeleton:[{type:core.Input}],id:[{type:core.Input}],change:[{type:core.Output}],hostClass:[{type:core.HostBinding,args:["class.cds--radio-button-wrapper"]}],labelLeft:[{type:core.HostBinding,args:["class.cds--radio-button-wrapper--label-left"]}]},Radio=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-radio, ibm-radio",template:'\n\t\t<input\n\t\t\tngIf="!skeleton"\n\t\t\tclass="cds--radio-button"\n\t\t\ttype="radio"\n\t\t\t[checked]="checked"\n\t\t\t[disabled]="disabled \|\| disabledFromGroup"\n\t\t\t[name]="name"\n\t\t\t[id]="id"\n\t\t\t[required]="required"\n\t\t\t[attr.value]="value"\n\t\t\t[attr.aria-labelledby]="ariaLabelledby"\n\t\t\t(change)="onChange($event)"\n\t\t\t(click)="onClick($event)">\n\t\t<div ngIf="skeleton" class="cds--radio-button cds--skeleton"></div>\n\t\t<label\n\t\t\tclass="cds--radio-button__label"\n\t\t\t[attr.aria-label]="ariaLabel"\n\t\t\t[ngClass]="{\n\t\t\t\t\'cds--skeleton\': skeleton\n\t\t\t}"\n\t\t\t[for]="id"\n\t\t\tid="label-{{id}}">\n\t\t\t<span class="cds--radio-button__appearance"></span>\n\t\t\t<ng-content></ng-content>\n\t\t</label>\n\t',providers:[{provide:fesm2020_forms.JU,useExisting:Radio,multi:!0}]})],Radio);let RadioGroup=class RadioGroup{constructor(){this.orientation="horizontal",this.labelPlacement="right",this.invalid=!1,this.warn=!1,this.change=new core.EventEmitter,this.radioButtonGroupClass=!0,this.isInitialized=!1,this._disabled=!1,this._skeleton=!1,this._value=null,this._selected=null,this._name="radio-group-"+RadioGroup.radioGroupCount++,this.onTouched=()=>{},this.propagateChange=_=>{}}set selected(selected){(this._selected&&this._selected.value)===(selected&&selected.value)\|\|(this._selected&&(this._selected.checked=!1),this._selected=selected,this.value=selected?selected.value:null,this.checkSelectedRadio())}get selected(){return this._selected}set value(newValue){this._value!==newValue&&(this._value=newValue,this.updateSelectedRadioFromValue(),this.checkSelectedRadio())}get value(){return this._value}set name(name){this._name=name,this.updateRadios()}get name(){return this._name}set disabled(disabled){this._disabled=disabled,this.updateRadios()}get disabled(){return this._disabled}get skeleton(){return this._skeleton}set skeleton(value){this._skeleton=value,this.updateChildren()}checkSelectedRadio(){this.selected&&!this._selected.checked&&(this.selected.checked=!0)}updateSelectedRadioFromValue(){let alreadySelected=null!=this._selected&&this._selected.value===this._value;this.radios&&!alreadySelected&&(this.selected&&this.value&&(this.selected.checked=!1),this._selected=null,this.radios.forEach((radio=>{(radio.checked\|\|radio.value===this._value)&&(this._selected=radio)})),this.selected&&!this.value&&(this._value=this.selected.value))}setDisabledState(isDisabled){this.disabled=isDisabled}emitChangeEvent(event){this.change.emit(event),this.propagateChange(event.value),this.onTouched()}updateRadios(){this.radios&&setTimeout((()=>{this.radios.forEach((radio=>{radio.name=this.name,radio.setDisabledFromGroup(this.disabled),"left"===this.labelPlacement&&(radio.labelPlacement="left")}))}))}writeValue(value){this.value=value,setTimeout((()=>{this.updateSelectedRadioFromValue(),this.checkSelectedRadio()}))}ngAfterContentInit(){this.radios.changes.subscribe((()=>{this.updateRadios(),this.updateRadioChangeHandler()})),this.updateChildren(),this.updateRadioChangeHandler()}ngAfterViewInit(){this.updateRadios()}registerOnChange(fn){this.propagateChange=fn}registerOnTouched(fn){this.onTouched=fn}focusOut(){this.onTouched()}isTemplate(value){return value instanceof core.TemplateRef}updateChildren(){this.radios&&this.radios.forEach((child=>child.skeleton=this.skeleton))}updateRadioChangeHandler(){this.radios.forEach((radio=>{radio.registerRadioChangeHandler((event=>{(this.selected&&this.selected.value)!==event.value&&(this.selected&&(this.selected.checked=!1),this._selected=event.source,this._value=event.value,this.emitChangeEvent(event))}))}))}};RadioGroup.radioGroupCount=0,RadioGroup.propDecorators={selected:[{type:core.Input}],value:[{type:core.Input}],name:[{type:core.Input}],disabled:[{type:core.Input}],skeleton:[{type:core.Input}],orientation:[{type:core.Input}],labelPlacement:[{type:core.Input}],legend:[{type:core.Input}],ariaLabel:[{type:core.Input}],ariaLabelledby:[{type:core.Input}],helperText:[{type:core.Input}],invalid:[{type:core.Input}],invalidText:[{type:core.Input}],warn:[{type:core.Input}],warnText:[{type:core.Input}],change:[{type:core.Output}],radios:[{type:core.ContentChildren,args:[(0,core.forwardRef)((()=>Radio))]}],radioButtonGroupClass:[{type:core.HostBinding,args:["class.cds--form-item"]}],focusOut:[{type:core.HostListener,args:["focusout"]}]},RadioGroup=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-radio-group, ibm-radio-group",template:'\n\t\t<fieldset\n\t\t\tclass="cds--radio-button-group"\n\t\t\t[attr.aria-label]="ariaLabel"\n\t\t\t[attr.aria-labelledby]="ariaLabelledby"\n\t\t\t[ngClass]="{\n\t\t\t\t\'cds--radio-button-group--vertical\': orientation === \'vertical\',\n\t\t\t\t\'cds--radio-button-group--label-left\': labelPlacement === \'left\',\n\t\t\t\t\'cds--radio-button-group--invalid\' : !warn && invalid,\n\t\t\t\t\'cds--radio-button-group--warning\': !invalid && warn\n\t\t\t}"\n\t\t\t[attr.data-invalid]="invalid ? true : null">\n\t\t\t<legend ngIf="legend" class="cds--label">\n\t\t\t\t<ng-template ngIf="isTemplate(legend); else legendLabel;" [ngTemplateOutlet]="legend"></ng-template>\n\t\t\t\t<ng-template #legendLabel>{{legend}}</ng-template>\n\t\t\t</legend>\n\t\t\t<ng-content></ng-content>\n\t\t</fieldset>\n\t\t<div class="cds--radio-button__validation-msg">\n\t\t\t<ng-container ngIf="!warn && invalid">\n\t\t\t\t<svg\n\t\t\t\t\tcdsIcon="warning--filled"\n\t\t\t\t\tsize="16"\n\t\t\t\t\tclass="cds--radio-button__invalid-icon">\n\t\t\t\t</svg>\n\t\t\t\t<div class="cds--form-requirement">\n\t\t\t\t\t<ng-container ngIf="!isTemplate(invalidText)">{{ invalidText }}</ng-container>\n\t\t\t\t\t<ng-template ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>\n\t\t\t\t</div>\n\t\t\t</ng-container>\n\t\t\t<ng-container ngIf="!invalid && warn">\n\t\t\t\t<svg\n\t\t\t\t\tcdsIcon="warning--alt--filled"\n\t\t\t\t\tclass="cds--radio-button__invalid-icon cds--radio-button__invalid-icon--warning"\n\t\t\t\t\tsize="16">\n\t\t\t\t</svg>\n\t\t\t\t<div class="cds--form-requirement">\n\t\t\t\t\t<ng-container ngIf="!isTemplate(warnText)">{{warnText}}</ng-container>\n\t\t\t\t\t<ng-template ngIf="isTemplate(warnText)" [ngTemplateOutlet]="warnText"></ng-template>\n\t\t\t\t</div>\n\t\t\t</ng-container>\n\t\t</div>\n\t\t<div\n\t\t\tngIf="helperText && !invalid && !warn"\n\t\t\tclass="cds--form__helper-text"\n\t\t\t[ngClass]="{\'cds--form__helper-text--disabled\': disabled}">\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',providers:[{provide:fesm2020_forms.JU,useExisting:RadioGroup,multi:!0}]})],RadioGroup);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs"),icon=__webpack_require__("./src/icon/index.ts");let RadioModule=class RadioModule{};RadioModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[Radio,RadioGroup],exports:[Radio,RadioGroup],imports:[common.CommonModule,fesm2020_forms.u5,icon.QX]})],RadioModule)},"./src/toggle/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{ZD:()=>Toggle,vm:()=>ToggleModule});var ToggleState,tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),src_checkbox=__webpack_require__("./src/checkbox/index.ts"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),fesm2020_forms=__webpack_require__("./node_modules/@angular/forms/fesm2020/forms.mjs"),i18n=__webpack_require__("./src/i18n/index.ts");!function(ToggleState){ToggleState[ToggleState.Init=0]="Init",ToggleState[ToggleState.Checked=1]="Checked",ToggleState[ToggleState.Unchecked=2]="Unchecked"}(ToggleState\|\|(ToggleState={}));let Toggle=class Toggle extends src_checkbox.XZ{constructor(changeDetectorRef,i18n){super(changeDetectorRef),this.changeDetectorRef=changeDetectorRef,this.i18n=i18n,this.size="md",this.hideLabel=!1,this.toggleClass=!0,this.formItem=!0,this.id="toggle-"+Toggle.toggleCount,this._offValues=this.i18n.getOverridable("TOGGLE.OFF"),this._onValues=this.i18n.getOverridable("TOGGLE.ON"),Toggle.toggleCount++}set offText(value){this._offValues.override(value)}get offText(){return this._offValues.value}set onText(value){this._onValues.override(value)}get onText(){return this._onValues.value}get disabledClass(){return this.disabled}setDisabledState(isDisabled){this.disabled=isDisabled}getOffText(){return this._offValues.subject}getOnText(){return this._onValues.subject}getCheckedText(){return this.checked?this._onValues.subject:this._offValues.subject}emitChangeEvent(){this.checkedChange.emit(this.checked),this.propagateChange(this.checked)}isTemplate(value){return value instanceof core.TemplateRef}};Toggle.toggleCount=0,Toggle.ctorParameters=()=>[{type:core.ChangeDetectorRef},{type:i18n.oc}],Toggle.propDecorators={offText:[{type:core.Input}],onText:[{type:core.Input}],label:[{type:core.Input}],size:[{type:core.Input}],hideLabel:[{type:core.Input}],toggleClass:[{type:core.HostBinding,args:["class.cds--toggle"]}],disabledClass:[{type:core.HostBinding,args:["class.cds--toggle--disabled"]}],formItem:[{type:core.HostBinding,args:["class.cds--form-item"]}]},Toggle=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-toggle, ibm-toggle",template:'\n\t\t<button\n\t\t\tclass="cds--toggle__button"\n\t\t\t[disabled]="disabled"\n\t\t\t[id]="id"\n\t\t\trole="switch"\n\t\t\ttype="button"\n\t\t\t[attr.aria-checked]="checked"\n\t\t\t(click)="onClick($event)">\n\t\t</button>\n\t\t<label\n\t\t\tclass="cds--toggle__label"\n\t\t\t[for]="id">\n\t\t\t<span\n\t\t\t\tclass="cds--toggle__label-text"\n\t\t\t\t[ngClass]="{\n\t\t\t\t\t\'cds--visually-hidden\': hideLabel\n\t\t\t\t}">\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</span>\n\t\t\t<div\n\t\t\t\tclass="cds--toggle__appearance"\n\t\t\t\t[ngClass]="{\n\t\t\t\t\t\'cds--toggle__appearance--sm\': size === \'sm\'\n\t\t\t\t}">\n\t\t\t\t<div\n\t\t\t\t\tclass="cds--toggle__switch"\n\t\t\t\t\t[ngClass]="{\n\t\t\t\t\t\t\'cds--toggle__switch--checked\': checked\n\t\t\t\t\t}">\n\t\t\t\t\t<svg\n\t\t\t\t\t\tngIf="size === \'sm\'"\n\t\t\t\t\t\tclass=\'cds--toggle__check\'\n\t\t\t\t\t\twidth="6px"\n\t\t\t\t\t\theight="5px"\n\t\t\t\t\t\tviewBox="0 0 6 5">\n\t\t\t\t\t\t<path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z" />\n\t\t\t\t\t</svg>\n\t\t\t\t</div>\n\t\t\t\t<span class="cds--toggle__text">\n\t\t\t\t\t{{(hideLabel ? label : (getCheckedText() \| async))}}\n\t\t\t\t</span>\n\t\t\t</div>\n\t\t</label>\n\t',providers:[{provide:fesm2020_forms.JU,useExisting:Toggle,multi:!0}]})],Toggle);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs");let ToggleModule=class ToggleModule{};ToggleModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[Toggle],exports:[Toggle],imports:[common.CommonModule,fesm2020_forms.u5,i18n.LU]})],ToggleModule)}}]);
1	+ "use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular\|\|[]).push([[1895],{"./src/checkbox/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{XZ:()=>Checkbox,nD:()=>CheckboxModule});var CheckboxState,tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),fesm2020_forms=__webpack_require__("./node_modules/@angular/forms/fesm2020/forms.mjs");!function(CheckboxState){CheckboxState[CheckboxState.Init=0]="Init",CheckboxState[CheckboxState.Indeterminate=1]="Indeterminate",CheckboxState[CheckboxState.Checked=2]="Checked",CheckboxState[CheckboxState.Unchecked=3]="Unchecked"}(CheckboxState\|\|(CheckboxState={}));let Checkbox=class Checkbox{constructor(changeDetectorRef){this.changeDetectorRef=changeDetectorRef,this.disabled=!1,this.skeleton=!1,this.hideLabel=!1,this.id=`checkbox-${Checkbox.checkboxCount}`,this.ariaLabel="",this.click=new core.EventEmitter,this.checkedChange=new core.EventEmitter,this.indeterminateChange=new core.EventEmitter,this._checked=!1,this._indeterminate=!1,this.currentCheckboxState=CheckboxState.Init,this.onTouched=()=>{},this.propagateChange=_=>{},Checkbox.checkboxCount++}set indeterminate(indeterminate){indeterminate!==this._indeterminate&&(this._indeterminate=indeterminate,this._indeterminate?this.transitionCheckboxState(CheckboxState.Indeterminate):this.transitionCheckboxState(this.checked?CheckboxState.Checked:CheckboxState.Unchecked),this.inputCheckbox&&this.inputCheckbox.nativeElement&&(this.inputCheckbox.nativeElement.indeterminate=indeterminate),this.changeDetectorRef.markForCheck(),this.indeterminateChange.emit(this._indeterminate))}get indeterminate(){return this._indeterminate}set checked(checked){this.setChecked(checked,!1)}get checked(){return this._checked}toggle(){this.setChecked(!this.checked,!0)}writeValue(value){this.setChecked(!!value,!0)}registerOnChange(fn){this.propagateChange=fn}registerOnTouched(fn){this.onTouched=fn}setDisabledState(isDisabled){this.disabled=isDisabled,this.changeDetectorRef.markForCheck()}focusOut(){this.onTouched()}onChange(event){event.stopPropagation()}onClick(event){if(this.click.observers.length)return event.preventDefault(),void this.click.emit();this.disabled\|\|(this.toggle(),this.transitionCheckboxState(this._checked?CheckboxState.Checked:CheckboxState.Unchecked),this.emitChangeEvent())}transitionCheckboxState(newState){this.currentCheckboxState=newState}emitChangeEvent(){this.checkedChange.emit(this.checked),this.propagateChange(this.checked)}ngAfterViewInit(){this.indeterminate&&this.inputCheckbox&&this.inputCheckbox.nativeElement&&(this.inputCheckbox.nativeElement.indeterminate=!0)}setChecked(checked,resetIndeterminate){checked!==this._checked&&(this._checked=checked,resetIndeterminate&&this._indeterminate&&(this._indeterminate=!1,Promise.resolve().then((()=>{this.indeterminateChange.emit(this._indeterminate)}))),this.changeDetectorRef.markForCheck())}};Checkbox.checkboxCount=0,Checkbox.ctorParameters=()=>[{type:core.ChangeDetectorRef}],Checkbox.propDecorators={disabled:[{type:core.Input}],skeleton:[{type:core.Input}],hideLabel:[{type:core.Input}],name:[{type:core.Input}],id:[{type:core.Input}],required:[{type:core.Input}],value:[{type:core.Input}],ariaLabel:[{type:core.Input}],ariaLabelledby:[{type:core.Input}],indeterminate:[{type:core.Input}],checked:[{type:core.Input}],click:[{type:core.Output}],checkedChange:[{type:core.Output}],indeterminateChange:[{type:core.Output}],inputCheckbox:[{type:core.ViewChild,args:["inputCheckbox"]}],focusOut:[{type:core.HostListener,args:["focusout"]}]},Checkbox=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-checkbox, ibm-checkbox",template:'\n\t\t<div class="cds--form-item cds--checkbox-wrapper">\n\t\t\t<input\n\t\t\t\t#inputCheckbox\n\t\t\t\tclass="cds--checkbox"\n\t\t\t\ttype="checkbox"\n\t\t\t\t[id]="id + \'_input\'"\n\t\t\t\t[value]="value"\n\t\t\t\t[name]="name"\n\t\t\t\t[required]="required"\n\t\t\t\t[checked]="checked"\n\t\t\t\t[disabled]="disabled"\n\t\t\t\t[attr.aria-labelledby]="ariaLabelledby"\n\t\t\t\t(change)="onChange($event)"\n\t\t\t\t(click)="onClick($event)">\n\t\t\t<label\n\t\t\t\t[for]="id + \'_input\'"\n\t\t\t\t[attr.aria-label]="ariaLabel"\n\t\t\t\tclass="cds--checkbox-label"\n\t\t\t\t[ngClass]="{\n\t\t\t\t\t\'cds--skeleton\' : skeleton\n\t\t\t\t}">\n\t\t\t\t<span [ngClass]="{\'cds--visually-hidden\' : hideLabel}" class="cds--checkbox-label-text">\n\t\t\t\t\t<ng-content></ng-content>\n\t\t\t\t</span>\n\t\t\t</label>\n\t\t</div>\n\t',providers:[{provide:fesm2020_forms.JU,useExisting:Checkbox,multi:!0}],changeDetection:core.ChangeDetectionStrategy.OnPush})],Checkbox);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs");let CheckboxModule=class CheckboxModule{};CheckboxModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[Checkbox],exports:[Checkbox],imports:[common.CommonModule,fesm2020_forms.u5]})],CheckboxModule)},"./src/forms/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{hJ:()=>src_button.hJ,s:()=>NFormsModule});var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),fesm2020_forms=__webpack_require__("./node_modules/@angular/forms/fesm2020/forms.mjs"),common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs"),src_checkbox=__webpack_require__("./src/checkbox/index.ts"),toggle=__webpack_require__("./src/toggle/index.ts"),src_radio=__webpack_require__("./src/radio/index.ts"),input=__webpack_require__("./src/input/index.ts"),src_button=__webpack_require__("./src/button/index.ts");let NFormsModule=class NFormsModule{};NFormsModule=(0,tslib_es6.gn)([(0,core.NgModule)({exports:[src_checkbox.nD,toggle.vm,src_radio.dU,input.gP,src_button.hJ,input.gP],imports:[common.CommonModule,fesm2020_forms.u5,src_checkbox.nD,toggle.vm,src_radio.dU,input.gP,src_button.hJ]})],NFormsModule)},"./src/radio/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{Y8:()=>Radio,Ee:()=>RadioGroup,dU:()=>RadioModule});var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),fesm2020_forms=__webpack_require__("./node_modules/@angular/forms/fesm2020/forms.mjs");class RadioChange{constructor(source,value){this.source=source,this.value=value}}let Radio=class Radio{constructor(){this.checked=!1,this.name="",this.disabled=!1,this.labelPlacement="right",this.required=!1,this.skeleton=!1,this.id="radio-"+Radio.radioCount++,this.change=new core.EventEmitter,this.hostClass=!0,this.disabledFromGroup=!1,this._labelledby="",this.radioChangeHandler=event=>{}}set ariaLabelledby(value){this._labelledby=value}get ariaLabelledby(){return this._labelledby?this._labelledby:`label-${this.id}`}get labelLeft(){return"left"===this.labelPlacement}onChange(event){event.stopPropagation()}onClick(event){this.checked=event.target.checked;const radioEvent=new RadioChange(this,this.value);this.change.emit(radioEvent),this.radioChangeHandler(radioEvent)}registerRadioChangeHandler(fn){this.radioChangeHandler=fn}setDisabledFromGroup(disabled){this.disabledFromGroup=disabled}};Radio.radioCount=0,Radio.propDecorators={checked:[{type:core.Input}],name:[{type:core.Input}],disabled:[{type:core.Input}],labelPlacement:[{type:core.Input}],ariaLabelledby:[{type:core.Input}],ariaLabel:[{type:core.Input}],required:[{type:core.Input}],value:[{type:core.Input}],skeleton:[{type:core.Input}],id:[{type:core.Input}],change:[{type:core.Output}],hostClass:[{type:core.HostBinding,args:["class.cds--radio-button-wrapper"]}],labelLeft:[{type:core.HostBinding,args:["class.cds--radio-button-wrapper--label-left"]}]},Radio=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-radio, ibm-radio",template:'\n\t\t<input\n\t\t\tngIf="!skeleton"\n\t\t\tclass="cds--radio-button"\n\t\t\ttype="radio"\n\t\t\t[checked]="checked"\n\t\t\t[disabled]="disabled \|\| disabledFromGroup"\n\t\t\t[name]="name"\n\t\t\t[id]="id"\n\t\t\t[required]="required"\n\t\t\t[attr.value]="value"\n\t\t\t[attr.aria-labelledby]="ariaLabelledby"\n\t\t\t(change)="onChange($event)"\n\t\t\t(click)="onClick($event)">\n\t\t<div ngIf="skeleton" class="cds--radio-button cds--skeleton"></div>\n\t\t<label\n\t\t\tclass="cds--radio-button__label"\n\t\t\t[attr.aria-label]="ariaLabel"\n\t\t\t[ngClass]="{\n\t\t\t\t\'cds--skeleton\': skeleton\n\t\t\t}"\n\t\t\t[for]="id"\n\t\t\tid="label-{{id}}">\n\t\t\t<span class="cds--radio-button__appearance"></span>\n\t\t\t<ng-content></ng-content>\n\t\t</label>\n\t',providers:[{provide:fesm2020_forms.JU,useExisting:Radio,multi:!0}]})],Radio);let RadioGroup=class RadioGroup{constructor(){this.orientation="horizontal",this.labelPlacement="right",this.invalid=!1,this.warn=!1,this.change=new core.EventEmitter,this.radioButtonGroupClass=!0,this.isInitialized=!1,this._disabled=!1,this._skeleton=!1,this._value=null,this._selected=null,this._name="radio-group-"+RadioGroup.radioGroupCount++,this.onTouched=()=>{},this.propagateChange=_=>{}}set selected(selected){(this._selected&&this._selected.value)===(selected&&selected.value)\|\|(this._selected&&(this._selected.checked=!1),this._selected=selected,this.value=selected?selected.value:null,this.checkSelectedRadio())}get selected(){return this._selected}set value(newValue){this._value!==newValue&&(this._value=newValue,this.updateSelectedRadioFromValue(),this.checkSelectedRadio())}get value(){return this._value}set name(name){this._name=name,this.updateRadios()}get name(){return this._name}set disabled(disabled){this._disabled=disabled,this.updateRadios()}get disabled(){return this._disabled}get skeleton(){return this._skeleton}set skeleton(value){this._skeleton=value,this.updateChildren()}checkSelectedRadio(){this.selected&&!this._selected.checked&&(this.selected.checked=!0)}updateSelectedRadioFromValue(){let alreadySelected=null!=this._selected&&this._selected.value===this._value;this.radios&&!alreadySelected&&(this.selected&&this.value&&(this.selected.checked=!1),this._selected=null,this.radios.forEach((radio=>{(radio.checked\|\|radio.value===this._value)&&(this._selected=radio)})),this.selected&&!this.value&&(this._value=this.selected.value))}setDisabledState(isDisabled){this.disabled=isDisabled}emitChangeEvent(event){this.change.emit(event),this.propagateChange(event.value),this.onTouched()}updateRadios(){this.radios&&setTimeout((()=>{this.radios.forEach((radio=>{radio.name=this.name,radio.setDisabledFromGroup(this.disabled),"left"===this.labelPlacement&&(radio.labelPlacement="left")}))}))}writeValue(value){this.value=value,setTimeout((()=>{this.updateSelectedRadioFromValue(),this.checkSelectedRadio()}))}ngAfterContentInit(){this.radios.changes.subscribe((()=>{this.updateRadios(),this.updateRadioChangeHandler()})),this.updateChildren(),this.updateRadioChangeHandler()}ngAfterViewInit(){this.updateRadios()}registerOnChange(fn){this.propagateChange=fn}registerOnTouched(fn){this.onTouched=fn}focusOut(){this.onTouched()}isTemplate(value){return value instanceof core.TemplateRef}updateChildren(){this.radios&&this.radios.forEach((child=>child.skeleton=this.skeleton))}updateRadioChangeHandler(){this.radios.forEach((radio=>{radio.registerRadioChangeHandler((event=>{(this.selected&&this.selected.value)!==event.value&&(this.selected&&(this.selected.checked=!1),this._selected=event.source,this._value=event.value,this.emitChangeEvent(event))}))}))}};RadioGroup.radioGroupCount=0,RadioGroup.propDecorators={selected:[{type:core.Input}],value:[{type:core.Input}],name:[{type:core.Input}],disabled:[{type:core.Input}],skeleton:[{type:core.Input}],orientation:[{type:core.Input}],labelPlacement:[{type:core.Input}],legend:[{type:core.Input}],ariaLabel:[{type:core.Input}],ariaLabelledby:[{type:core.Input}],helperText:[{type:core.Input}],invalid:[{type:core.Input}],invalidText:[{type:core.Input}],warn:[{type:core.Input}],warnText:[{type:core.Input}],change:[{type:core.Output}],radios:[{type:core.ContentChildren,args:[(0,core.forwardRef)((()=>Radio))]}],radioButtonGroupClass:[{type:core.HostBinding,args:["class.cds--form-item"]}],focusOut:[{type:core.HostListener,args:["focusout"]}]},RadioGroup=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-radio-group, ibm-radio-group",template:'\n\t\t<fieldset\n\t\t\tclass="cds--radio-button-group"\n\t\t\t[attr.aria-label]="ariaLabel"\n\t\t\t[attr.aria-labelledby]="ariaLabelledby"\n\t\t\t[ngClass]="{\n\t\t\t\t\'cds--radio-button-group--vertical\': orientation === \'vertical\',\n\t\t\t\t\'cds--radio-button-group--label-left\': labelPlacement === \'left\',\n\t\t\t\t\'cds--radio-button-group--invalid\' : !warn && invalid,\n\t\t\t\t\'cds--radio-button-group--warning\': !invalid && warn\n\t\t\t}"\n\t\t\t[attr.data-invalid]="invalid ? true : null">\n\t\t\t<legend ngIf="legend" class="cds--label">\n\t\t\t\t<ng-template ngIf="isTemplate(legend); else legendLabel;" [ngTemplateOutlet]="legend"></ng-template>\n\t\t\t\t<ng-template #legendLabel>{{legend}}</ng-template>\n\t\t\t</legend>\n\t\t\t<ng-content></ng-content>\n\t\t</fieldset>\n\t\t<div class="cds--radio-button__validation-msg">\n\t\t\t<ng-container ngIf="!warn && invalid">\n\t\t\t\t<svg\n\t\t\t\t\tcdsIcon="warning--filled"\n\t\t\t\t\tsize="16"\n\t\t\t\t\tclass="cds--radio-button__invalid-icon">\n\t\t\t\t</svg>\n\t\t\t\t<div class="cds--form-requirement">\n\t\t\t\t\t<ng-container ngIf="!isTemplate(invalidText)">{{ invalidText }}</ng-container>\n\t\t\t\t\t<ng-template ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>\n\t\t\t\t</div>\n\t\t\t</ng-container>\n\t\t\t<ng-container ngIf="!invalid && warn">\n\t\t\t\t<svg\n\t\t\t\t\tcdsIcon="warning--alt--filled"\n\t\t\t\t\tclass="cds--radio-button__invalid-icon cds--radio-button__invalid-icon--warning"\n\t\t\t\t\tsize="16">\n\t\t\t\t</svg>\n\t\t\t\t<div class="cds--form-requirement">\n\t\t\t\t\t<ng-container ngIf="!isTemplate(warnText)">{{warnText}}</ng-container>\n\t\t\t\t\t<ng-template ngIf="isTemplate(warnText)" [ngTemplateOutlet]="warnText"></ng-template>\n\t\t\t\t</div>\n\t\t\t</ng-container>\n\t\t</div>\n\t\t<div\n\t\t\tngIf="helperText && !invalid && !warn"\n\t\t\tclass="cds--form__helper-text"\n\t\t\t[ngClass]="{\'cds--form__helper-text--disabled\': disabled}">\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',providers:[{provide:fesm2020_forms.JU,useExisting:RadioGroup,multi:!0}]})],RadioGroup);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs"),icon=__webpack_require__("./src/icon/index.ts");let RadioModule=class RadioModule{};RadioModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[Radio,RadioGroup],exports:[Radio,RadioGroup],imports:[common.CommonModule,fesm2020_forms.u5,icon.QX]})],RadioModule)},"./src/toggle/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{ZD:()=>Toggle,vm:()=>ToggleModule});var ToggleState,tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),src_checkbox=__webpack_require__("./src/checkbox/index.ts"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),fesm2020_forms=__webpack_require__("./node_modules/@angular/forms/fesm2020/forms.mjs"),i18n=__webpack_require__("./src/i18n/index.ts");!function(ToggleState){ToggleState[ToggleState.Init=0]="Init",ToggleState[ToggleState.Checked=1]="Checked",ToggleState[ToggleState.Unchecked=2]="Unchecked"}(ToggleState\|\|(ToggleState={}));let Toggle=class Toggle extends src_checkbox.XZ{constructor(changeDetectorRef,i18n){super(changeDetectorRef),this.changeDetectorRef=changeDetectorRef,this.i18n=i18n,this.size="md",this.hideLabel=!1,this.skeleton=!1,this.toggleClass=!0,this.id="toggle-"+Toggle.toggleCount,this._offValues=this.i18n.getOverridable("TOGGLE.OFF"),this._onValues=this.i18n.getOverridable("TOGGLE.ON"),Toggle.toggleCount++}set offText(value){this._offValues.override(value)}get offText(){return this._offValues.value}set onText(value){this._onValues.override(value)}get onText(){return this._onValues.value}get disabledClass(){return this.disabled}get formItem(){return!this.skeleton}setDisabledState(isDisabled){this.disabled=isDisabled}getOffText(){return this._offValues.subject}getOnText(){return this._onValues.subject}getCheckedText(){return this.checked?this._onValues.subject:this._offValues.subject}emitChangeEvent(){this.checkedChange.emit(this.checked),this.propagateChange(this.checked)}isTemplate(value){return value instanceof core.TemplateRef}};Toggle.toggleCount=0,Toggle.ctorParameters=()=>[{type:core.ChangeDetectorRef},{type:i18n.oc}],Toggle.propDecorators={offText:[{type:core.Input}],onText:[{type:core.Input}],label:[{type:core.Input}],size:[{type:core.Input}],hideLabel:[{type:core.Input}],skeleton:[{type:core.HostBinding,args:["class.cds--toggle--skeleton"]},{type:core.Input}],toggleClass:[{type:core.HostBinding,args:["class.cds--toggle"]}],disabledClass:[{type:core.HostBinding,args:["class.cds--toggle--disabled"]}],formItem:[{type:core.HostBinding,args:["class.cds--form-item"]}]},Toggle=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-toggle, ibm-toggle",template:'\n\t\t<ng-container ngIf="!skeleton; else skeletonTemplate;">\n\t\t\t<button\n\t\t\t\tclass="cds--toggle__button"\n\t\t\t\t[disabled]="disabled"\n\t\t\t\t[id]="id"\n\t\t\t\trole="switch"\n\t\t\t\ttype="button"\n\t\t\t\t[attr.aria-checked]="checked"\n\t\t\t\t(click)="onClick($event)">\n\t\t\t</button>\n\t\t\t<label\n\t\t\t\tclass="cds--toggle__label"\n\t\t\t\t[for]="id">\n\t\t\t\t<span\n\t\t\t\t\tclass="cds--toggle__label-text"\n\t\t\t\t\t[ngClass]="{\n\t\t\t\t\t\t\'cds--visually-hidden\': hideLabel\n\t\t\t\t\t}">\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</span>\n\t\t\t\t<div\n\t\t\t\t\tclass="cds--toggle__appearance"\n\t\t\t\t\t[ngClass]="{\n\t\t\t\t\t\t\'cds--toggle__appearance--sm\': size === \'sm\'\n\t\t\t\t\t}">\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass="cds--toggle__switch"\n\t\t\t\t\t\t[ngClass]="{\n\t\t\t\t\t\t\t\'cds--toggle__switch--checked\': checked\n\t\t\t\t\t\t}">\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t*ngIf="size === \'sm\'"\n\t\t\t\t\t\t\tclass=\'cds--toggle__check\'\n\t\t\t\t\t\t\twidth="6px"\n\t\t\t\t\t\t\theight="5px"\n\t\t\t\t\t\t\tviewBox="0 0 6 5">\n\t\t\t\t\t\t\t<path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z" />\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</div>\n\t\t\t\t\t<span class="cds--toggle__text">\n\t\t\t\t\t\t{{(hideLabel ? label : (getCheckedText() \| async))}}\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t</label>\n\t\t</ng-container>\n\t\t<ng-template #skeletonTemplate>\n\t\t\t<div class="cds--toggle__skeleton-circle"></div>\n\t\t\t<div class="cds--toggle__skeleton-rectangle"></div>\n\t\t</ng-template>\n\t',providers:[{provide:fesm2020_forms.JU,useExisting:Toggle,multi:!0}]})],Toggle);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs");let ToggleModule=class ToggleModule{};ToggleModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[Toggle],exports:[Toggle],imports:[common.CommonModule,fesm2020_forms.u5,i18n.LU]})],ToggleModule)}}]);