carbon-components-angular 5.11.1 → 5.12.1

package/docs/documentation.json

@@ -22836,7 +22836,7 @@
         },
         {
             "name": "ContentSwitcher",
-            "id": "component-ContentSwitcher-40d3e94ccea32faf24a7b7c344cd1ea6c3da8280c64e71a4db145d46d736ec3b95d45e6654cf3b099b0af22552fc0d79f8e247dd3164429e3e1ddffae031a0e5",
+            "id": "component-ContentSwitcher-ba98f7efc99de46edb3f99514f73e7886a59438855cdc143238ec6d310bbae9415a5e37707163e713ea9074609a835f2ee42a710e50639513c1865d343ff8196",
             "file": "src/content-switcher/content-switcher.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -22970,7 +22970,7 @@
             "description": "<p>The content switcher can be used for toggling between distinct options.\nSimilar to tabs, but without an associated content panel</p>\n<p><a href=\"../../?path=/story/components-content-switcher--basic\">See demo</a></p>\n<div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;cds-content-switcher (selected)=&quot;selected($event)&quot;&gt;\n        &lt;button cdsContentOption&gt;First section&lt;/button&gt;\n        &lt;button cdsContentOption&gt;Second section&lt;/button&gt;\n        &lt;button cdsContentOption&gt;Third section&lt;/button&gt;\n    &lt;/cds-content-switcher&gt;\n    ```</code></pre></div>",
             "rawdescription": "\n\nThe content switcher can be used for toggling between distinct options.\nSimilar to tabs, but without an associated content panel\n\n[See demo](../../?path=/story/components-content-switcher--basic)\n\n```html\n<cds-content-switcher (selected)=\"selected($event)\">\n\t\t<button cdsContentOption>First section</button>\n\t\t<button cdsContentOption>Second section</button>\n\t\t<button cdsContentOption>Third section</button>\n\t</cds-content-switcher>\n\t```\n",
             "type": "component",
-            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tContentChildren,\n\tQueryList,\n\tOutput,\n\tEventEmitter,\n\tAfterViewInit,\n\tHostListener,\n\tElementRef\n} from \"@angular/core\";\nimport { ContentSwitcherOption } from \"./content-switcher-option.directive\";\nimport { isFocusInLastItem, isFocusInFirstItem } from \"carbon-components-angular/common\";\n\n/**\n * The content switcher can be used for toggling between distinct options.\n * Similar to tabs, but without an associated content panel\n *\n * [See demo](../../?path=/story/components-content-switcher--basic)\n *\n * ```html\n * <cds-content-switcher (selected)=\"selected($event)\">\n *\t\t<button cdsContentOption>First section</button>\n *\t\t<button cdsContentOption>Second section</button>\n *\t\t<button cdsContentOption>Third section</button>\n *\t</cds-content-switcher>\n *\t```\n */\n@Component({\n\tselector: \"cds-content-switcher, ibm-content-switcher\",\n\ttemplate: `\n\t\t<div\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\tclass=\"cds--content-switcher\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--content-switcher--sm': size === 'sm',\n\t\t\t\t'cds--content-switcher--md': size === 'md',\n\t\t\t\t'cds--content-switcher--lg': size === 'lg'\n\t\t\t}\"\n\t\t\trole=\"tablist\">\n\t\t\t<ng-content></ng-content>\n\t\t</div>\n\t`\n})\nexport class ContentSwitcher implements AfterViewInit {\n\t@Input() ariaLabel = \"content switcher\";\n\n\t/**\n\t * Set content switcher size\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\n\t/**\n\t * Emits the activated `ContentSwitcherOption`\n\t */\n\t@Output() selected = new EventEmitter<ContentSwitcherOption>();\n\n\t@ContentChildren(ContentSwitcherOption) options: QueryList<ContentSwitcherOption>;\n\n\tconstructor(protected elementRef: ElementRef) {}\n\n\tngAfterViewInit() {\n\t\tconst firstActive = this.options.find(option => option.active);\n\t\t// delay setting active until the DOM has settled\n\t\tif (!firstActive) {\n\t\t\tsetTimeout(() => this.options.first.active = true);\n\t\t}\n\t\t// subscribe to each item, emit when one is selected, and reset the active states\n\t\tthis.options.forEach(option => {\n\t\t\toption.selected.subscribe((_: boolean) => {\n\t\t\t\tconst active = option;\n\t\t\t\tthis.options.forEach(option => {\n\t\t\t\t\tif (option !== active) {\n\t\t\t\t\t\toption.active = false;\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t\tthis.selected.emit(active);\n\t\t\t});\n\t\t});\n\t}\n\n\t@HostListener(\"keydown\", [\"$event\"])\n\thostkeys(event: KeyboardEvent) {\n\t\tconst buttonList = Array.from<any>(this.elementRef.nativeElement.querySelectorAll(\"[cdsContentOption]\"));\n\n\t\tswitch (event.key) {\n\t\t\tcase \"ArrowRight\":\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (!isFocusInLastItem(event, buttonList))  {\n\t\t\t\t\tconst index = buttonList.findIndex(item => item === event.target);\n\t\t\t\t\tbuttonList[index + 1].focus();\n\t\t\t\t} else {\n\t\t\t\t\tbuttonList[0].focus();\n\t\t\t\t}\n\t\t\t\tbreak;\n\n\t\t\tcase \"ArrowLeft\":\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (!isFocusInFirstItem(event, buttonList))  {\n\t\t\t\t\tconst index = buttonList.findIndex(item => item === event.target);\n\t\t\t\t\tbuttonList[index - 1].focus();\n\t\t\t\t} else {\n\t\t\t\t\tbuttonList[buttonList.length - 1].focus();\n\t\t\t\t}\n\t\t\t\tbreak;\n\n\t\t\tcase \"Home\":\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbuttonList[0].focus();\n\t\t\t\tbreak;\n\n\t\t\tcase \"End\":\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbuttonList[buttonList.length - 1].focus();\n\t\t\t\tbreak;\n\t\t}\n\t}\n}\n",
+            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tContentChildren,\n\tQueryList,\n\tOutput,\n\tEventEmitter,\n\tAfterViewInit,\n\tHostListener,\n\tElementRef\n} from \"@angular/core\";\nimport { ContentSwitcherOption } from \"./content-switcher-option.directive\";\nimport { isFocusInLastItem, isFocusInFirstItem } from \"carbon-components-angular/common\";\n\n/**\n * The content switcher can be used for toggling between distinct options.\n * Similar to tabs, but without an associated content panel\n *\n * [See demo](../../?path=/story/components-content-switcher--basic)\n *\n * ```html\n * <cds-content-switcher (selected)=\"selected($event)\">\n *\t\t<button cdsContentOption>First section</button>\n *\t\t<button cdsContentOption>Second section</button>\n *\t\t<button cdsContentOption>Third section</button>\n *\t</cds-content-switcher>\n *\t```\n */\n@Component({\n\tselector: \"cds-content-switcher, ibm-content-switcher\",\n\ttemplate: `\n\t\t<div\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\tclass=\"cds--content-switcher\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--content-switcher--sm': size === 'sm',\n\t\t\t\t'cds--content-switcher--md': size === 'md',\n\t\t\t\t'cds--content-switcher--lg': size === 'lg'\n\t\t\t}\"\n\t\t\trole=\"tablist\">\n\t\t\t<ng-content></ng-content>\n\t\t</div>\n\t`\n})\nexport class ContentSwitcher implements AfterViewInit {\n\t@Input() ariaLabel = \"content switcher\";\n\n\t/**\n\t * Set content switcher size\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\n\t/**\n\t * Emits the activated `ContentSwitcherOption`\n\t */\n\t@Output() selected = new EventEmitter<ContentSwitcherOption>();\n\n\t@ContentChildren(ContentSwitcherOption) options: QueryList<ContentSwitcherOption>;\n\n\tconstructor(protected elementRef: ElementRef) {}\n\n\tngAfterViewInit() {\n\t\tconst firstActive = this.options.find(option => option.active);\n\t\t// delay setting active until the DOM has settled\n\t\tif (!firstActive) {\n\t\t\tsetTimeout(() => this.options.first.active = true);\n\t\t}\n\t\t// subscribe to each item, emit when one is selected, and reset the active states\n\t\tthis.options.forEach(option => {\n\t\t\toption.selected.subscribe((_: boolean) => {\n\t\t\t\tconst active = option;\n\t\t\t\tthis.options.forEach(option => {\n\t\t\t\t\tif (option !== active) {\n\t\t\t\t\t\toption.active = false;\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t\tthis.selected.emit(active);\n\t\t\t});\n\t\t});\n\t}\n\n\t@HostListener(\"keydown\", [\"$event\"])\n\thostkeys(event: KeyboardEvent) {\n\t\tconst buttonList = Array.from<any>(this.elementRef.nativeElement.querySelectorAll(\"[cdsContentOption], [ibmContentOption]\"));\n\n\t\tswitch (event.key) {\n\t\t\tcase \"ArrowRight\":\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (!isFocusInLastItem(event, buttonList))  {\n\t\t\t\t\tconst index = buttonList.findIndex(item => item === event.target);\n\t\t\t\t\tbuttonList[index + 1].focus();\n\t\t\t\t} else {\n\t\t\t\t\tbuttonList[0].focus();\n\t\t\t\t}\n\t\t\t\tbreak;\n\n\t\t\tcase \"ArrowLeft\":\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (!isFocusInFirstItem(event, buttonList))  {\n\t\t\t\t\tconst index = buttonList.findIndex(item => item === event.target);\n\t\t\t\t\tbuttonList[index - 1].focus();\n\t\t\t\t} else {\n\t\t\t\t\tbuttonList[buttonList.length - 1].focus();\n\t\t\t\t}\n\t\t\t\tbreak;\n\n\t\t\tcase \"Home\":\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbuttonList[0].focus();\n\t\t\t\tbreak;\n\n\t\t\tcase \"End\":\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbuttonList[buttonList.length - 1].focus();\n\t\t\t\tbreak;\n\t\t}\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -60218,7 +60218,7 @@
         },
         {
             "name": "Toggle",
-            "id": "component-Toggle-624d83b5e724c74780140818e2e4f5c116dabfbd4080c474f7b2d2f84d4042f6c88b1a13055596c452100ab9e4a5f6abe3a0e52d66806b684e27ea39563c4bd9",
+            "id": "component-Toggle-5093b3199e8f0156d3e63b420597005365cf11b8abff8fe5199bd530bff9309d617fd87e7510deccd2bc7c757c215478dc31f8916aac0a55fb756bcff586a02c",
             "file": "src/toggle/toggle.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -60232,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": [],
@@ -60244,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": {
@@ -60257,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": []
                 },
@@ -60267,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": []
                 },
@@ -60277,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": []
                 },
@@ -60288,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": "\"\"",
@@ -60395,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,
@@ -60465,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",
@@ -60492,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"
                 },
                 {
@@ -60503,7 +60482,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 128,
+                    "line": 136,
                     "decorators": [
                         {
                             "name": "HostBinding",
@@ -60522,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
@@ -60645,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",
@@ -60660,7 +60639,7 @@
                     "optional": false,
                     "returnType": "Observable<string>",
                     "typeParameters": [],
-                    "line": 169,
+                    "line": 179,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -60670,7 +60649,7 @@
                     "optional": false,
                     "returnType": "Observable<string>",
                     "typeParameters": [],
-                    "line": 161,
+                    "line": 171,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -60680,7 +60659,7 @@
                     "optional": false,
                     "returnType": "Observable<string>",
                     "typeParameters": [],
-                    "line": 165,
+                    "line": 175,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -60697,7 +60676,7 @@
                     "optional": false,
                     "returnType": "boolean",
                     "typeParameters": [],
-                    "line": 184,
+                    "line": 194,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "modifierKind": [
@@ -60728,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",
@@ -60736,8 +60715,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 3467,
-                                "end": 3477,
+                                "pos": 3847,
+                                "end": 3857,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -60748,8 +60727,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 3461,
-                                "end": 3466,
+                                "pos": 3841,
+                                "end": 3846,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -61046,10 +61025,9 @@
             "hostBindings": [
                 {
                     "name": "class.cds--form-item",
-                    "defaultValue": "true",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 133,
+                    "line": 141,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -61058,7 +61036,7 @@
                     "defaultValue": "true",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 128,
+                    "line": 136,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -61066,7 +61044,7 @@
                     "name": "class.cds--toggle--disabled",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 129,
+                    "line": 137,
                     "type": "any",
                     "decorators": []
                 }
@@ -61089,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": "",
@@ -61112,7 +61090,7 @@
                         "deprecationMessage": ""
                     }
                 ],
-                "line": 141,
+                "line": 151,
                 "rawdescription": "\n\nCreates an instance of Toggle.\n",
                 "jsdoctags": [
                     {
@@ -61153,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": [
@@ -61172,7 +61150,7 @@
                         "name": "offText",
                         "type": "",
                         "returnType": "",
-                        "line": 100
+                        "line": 106
                     }
                 },
                 "onText": {
@@ -61191,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": [
@@ -61210,7 +61188,7 @@
                         "name": "onText",
                         "type": "",
                         "returnType": "",
-                        "line": 112
+                        "line": 118
                     }
                 },
                 "disabledClass": {
@@ -61219,7 +61197,16 @@
                         "name": "disabledClass",
                         "type": "",
                         "returnType": "",
-                        "line": 129
+                        "line": 137
+                    }
+                },
+                "formItem": {
+                    "name": "formItem",
+                    "getSignature": {
+                        "name": "formItem",
+                        "type": "",
+                        "returnType": "",
+                        "line": 141
                     }
                 }
             }
@@ -69691,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",
@@ -74849,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": [
@@ -82666,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}

@@ -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\t*ngIf="!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\t*ngIf="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\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',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)}}]);
+"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\t*ngIf="!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\t*ngIf="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)}}]);

package/docs/storybook/content-switcher-content-switcher-stories.d8a420bd.iframe.bundle.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[4391],{"./src/content-switcher/content-switcher.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Basic:()=>Basic,default:()=>content_switcher_stories});var dist=__webpack_require__("./node_modules/@storybook/angular/dist/index.mjs"),tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs");let ContentSwitcherOption=class ContentSwitcherOption{constructor(renderer,hostElement){this.renderer=renderer,this.hostElement=hostElement,this.name="option",this.selected=new core.EventEmitter,this.onClick=new core.EventEmitter,this.onFocus=new core.EventEmitter,this.switcherClass="cds--content-switcher-btn",this.selectedClass=!1,this.role="tab",this.ariaSelected=!1,this.tabindex="-1",this._active=!1}set active(value){this._active=value,this.selectedClass=value,this.ariaSelected=value,this.tabindex=value?"0":"-1"}get active(){return this._active}hostClick(event){this.onClick.emit(event),this.active||(this.active=!0,this.selected.emit(!0))}doFocus(event){this.onFocus.emit(event),this.active||(this.active=!0,this.selected.emit(!0))}ngOnInit(){const hostNativeElement=this.hostElement.nativeElement,spanWrapper=this.renderer.createElement("span");this.renderer.addClass(spanWrapper,"cds--content-switcher__label");const hostChildren=[];hostNativeElement.childNodes.forEach((node=>hostChildren.push(node))),hostChildren.forEach((node=>{this.renderer.removeChild(hostNativeElement,node),this.renderer.appendChild(spanWrapper,node)})),this.renderer.appendChild(hostNativeElement,spanWrapper)}};ContentSwitcherOption.ctorParameters=()=>[{type:core.Renderer2},{type:core.ElementRef}],ContentSwitcherOption.propDecorators={active:[{type:core.Input}],name:[{type:core.Input}],selected:[{type:core.Output}],onClick:[{type:core.Output}],onFocus:[{type:core.Output}],switcherClass:[{type:core.HostBinding,args:["class"]}],selectedClass:[{type:core.HostBinding,args:["class.cds--content-switcher--selected"]}],role:[{type:core.HostBinding,args:["attr.role"]}],ariaSelected:[{type:core.HostBinding,args:["attr.aria-selected"]}],tabindex:[{type:core.HostBinding,args:["attr.tabIndex"]}],hostClick:[{type:core.HostListener,args:["click",["$event"]]}],doFocus:[{type:core.HostListener,args:["focus",["$event"]]}]},ContentSwitcherOption=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsContentOption], [ibmContentOption]"})],ContentSwitcherOption);var tab_service=__webpack_require__("./src/common/tab.service.ts");let ContentSwitcher=class ContentSwitcher{constructor(elementRef){this.elementRef=elementRef,this.ariaLabel="content switcher",this.size="md",this.selected=new core.EventEmitter}ngAfterViewInit(){this.options.find((option=>option.active))||setTimeout((()=>this.options.first.active=!0)),this.options.forEach((option=>{option.selected.subscribe((_=>{const active=option;this.options.forEach((option=>{option!==active&&(option.active=!1)})),this.selected.emit(active)}))}))}hostkeys(event){const buttonList=Array.from(this.elementRef.nativeElement.querySelectorAll("[cdsContentOption], [ibmContentOption]"));switch(event.key){case"ArrowRight":if(event.preventDefault(),(0,tab_service.jv)(event,buttonList))buttonList[0].focus();else{const index=buttonList.findIndex((item=>item===event.target));buttonList[index+1].focus()}break;case"ArrowLeft":if(event.preventDefault(),(0,tab_service.w3)(event,buttonList))buttonList[buttonList.length-1].focus();else{const index=buttonList.findIndex((item=>item===event.target));buttonList[index-1].focus()}break;case"Home":event.preventDefault(),buttonList[0].focus();break;case"End":event.preventDefault(),buttonList[buttonList.length-1].focus()}}};ContentSwitcher.ctorParameters=()=>[{type:core.ElementRef}],ContentSwitcher.propDecorators={ariaLabel:[{type:core.Input}],size:[{type:core.Input}],selected:[{type:core.Output}],options:[{type:core.ContentChildren,args:[ContentSwitcherOption]}],hostkeys:[{type:core.HostListener,args:["keydown",["$event"]]}]},ContentSwitcher=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-content-switcher, ibm-content-switcher",template:"\n\t\t<div\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\tclass=\"cds--content-switcher\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--content-switcher--sm': size === 'sm',\n\t\t\t\t'cds--content-switcher--md': size === 'md',\n\t\t\t\t'cds--content-switcher--lg': size === 'lg'\n\t\t\t}\"\n\t\t\trole=\"tablist\">\n\t\t\t<ng-content></ng-content>\n\t\t</div>\n\t"})],ContentSwitcher);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs");let ContentSwitcherModule=class ContentSwitcherModule{};ContentSwitcherModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[ContentSwitcher,ContentSwitcherOption],exports:[ContentSwitcher,ContentSwitcherOption],imports:[common.CommonModule]})],ContentSwitcherModule);const content_switcher_stories={title:"Components/Content Switcher",decorators:[(0,dist.moduleMetadata)({imports:[ContentSwitcherModule]})],argTypes:{code:{control:!1}},component:ContentSwitcher,subcomponents:ContentSwitcherOption},Basic=(args=>({props:args,template:'\n\t\t<cds-content-switcher (selected)="selected($event)">\n\t\t\t<button cdsContentOption name="First">First section</button>\n\t\t\t<button cdsContentOption name="Second">Second section</button>\n\t\t\t<button cdsContentOption name="Third">Third section</button>\n\t\t</cds-content-switcher>\n\t'})).bind({})},"./src/common/tab.service.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{X9:()=>tabbableSelectorIgnoreTabIndex,ZW:()=>getFocusElementList,jv:()=>isFocusInLastItem,nW:()=>cycleTabs,o$:()=>tabbableSelector,w3:()=>isFocusInFirstItem});let tabbableSelector="a[href], area[href], input:not([disabled]):not([tabindex='-1']), button:not([disabled]):not([tabindex='-1']),select:not([disabled]):not([tabindex='-1']), textarea:not([disabled]):not([tabindex='-1']), iframe, object, embed, *[tabindex]:not([tabindex='-1']), *[contenteditable=true]",tabbableSelectorIgnoreTabIndex="a[href], area[href], input:not([disabled]), button:not([disabled]),select:not([disabled]), textarea:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable=true]";function getFocusElementList(element,selector=tabbableSelector){let elements=element.querySelectorAll(selector);return elements?Array.prototype.filter.call(elements,(el=>function isVisible(element){return!!(element.offsetWidth||element.offsetHeight||element.getClientRects().length)}(el))):elements}function isFocusInFirstItem(event,list){return list.length>0&&(event.target||event.srcElement)===list[0]}function isFocusInLastItem(event,list){return list.length>0&&(event.target||event.srcElement)===list[list.length-1]}function cycleTabs(event,element){if("Tab"===event.key){let list=getFocusElementList(element),focusChanged=!1;event.shiftKey?(isFocusInFirstItem(event,list)||function isElementFocused(event,element){return(event.target||event.srcElement)===element}(event,element))&&(focusChanged=function focusLastFocusableElement(list){return list.length>0&&(list[list.length-1].focus(),!0)}(list)):isFocusInLastItem(event,list)&&(focusChanged=function focusFirstFocusableElement(list){return list.length>0&&(list[0].focus(),!0)}(list)),focusChanged&&(event.preventDefault(),event.stopPropagation())}}},"./node_modules/@storybook/angular/dist/client/decorators.js":(__unused_webpack_module,exports,__webpack_require__)=>{Object.defineProperty(exports,"__esModule",{value:!0}),exports.componentWrapperDecorator=exports.applicationConfig=exports.moduleMetadata=void 0;const ComputesTemplateFromComponent_1=__webpack_require__("./node_modules/@storybook/angular/dist/client/angular-beta/ComputesTemplateFromComponent.js"),NgComponentAnalyzer_1=__webpack_require__("./node_modules/@storybook/angular/dist/client/angular-beta/utils/NgComponentAnalyzer.js");exports.moduleMetadata=metadata=>storyFn=>{const story=storyFn(),storyMetadata=story.moduleMetadata||{};return metadata=metadata||{},{...story,moduleMetadata:{declarations:[...metadata.declarations||[],...storyMetadata.declarations||[]],entryComponents:[...metadata.entryComponents||[],...storyMetadata.entryComponents||[]],imports:[...metadata.imports||[],...storyMetadata.imports||[]],schemas:[...metadata.schemas||[],...storyMetadata.schemas||[]],providers:[...metadata.providers||[],...storyMetadata.providers||[]]}}},exports.applicationConfig=function applicationConfig(config){return storyFn=>{const story=storyFn(),storyConfig=story.applicationConfig;return{...story,applicationConfig:storyConfig||config?{...config,...storyConfig,providers:[...config?.providers||[],...storyConfig?.providers||[]]}:void 0}}};exports.componentWrapperDecorator=(element,props)=>(storyFn,storyContext)=>{const story=storyFn(),currentProps="function"==typeof props?props(storyContext):props,template=(0,NgComponentAnalyzer_1.isComponent)(element)?(0,ComputesTemplateFromComponent_1.computesTemplateFromComponent)(element,currentProps??{},story.template):element(story.template);return{...story,template,...currentProps||story.props?{props:{...currentProps,...story.props}}:{}}}},"./node_modules/@storybook/angular/dist/client/index.js":function(__unused_webpack_module,exports,__webpack_require__){var __createBinding=this&&this.__createBinding||(Object.create?function(o,m,k,k2){void 0===k2&&(k2=k);var desc=Object.getOwnPropertyDescriptor(m,k);desc&&!("get"in desc?!m.__esModule:desc.writable||desc.configurable)||(desc={enumerable:!0,get:function(){return m[k]}}),Object.defineProperty(o,k2,desc)}:function(o,m,k,k2){void 0===k2&&(k2=k),o[k2]=m[k]}),__exportStar=this&&this.__exportStar||function(m,exports){for(var p in m)"default"===p||Object.prototype.hasOwnProperty.call(exports,p)||__createBinding(exports,m,p)};Object.defineProperty(exports,"__esModule",{value:!0}),exports.applicationConfig=exports.componentWrapperDecorator=exports.moduleMetadata=void 0,__webpack_require__("./node_modules/@storybook/angular/dist/client/globals.js"),__exportStar(__webpack_require__("./node_modules/@storybook/angular/dist/client/public-api.js"),exports),__exportStar(__webpack_require__("./node_modules/@storybook/angular/dist/client/public-types.js"),exports);var decorators_1=__webpack_require__("./node_modules/@storybook/angular/dist/client/decorators.js");Object.defineProperty(exports,"moduleMetadata",{enumerable:!0,get:function(){return decorators_1.moduleMetadata}}),Object.defineProperty(exports,"componentWrapperDecorator",{enumerable:!0,get:function(){return decorators_1.componentWrapperDecorator}}),Object.defineProperty(exports,"applicationConfig",{enumerable:!0,get:function(){return decorators_1.applicationConfig}})},"./node_modules/@storybook/angular/dist/client/public-api.js":function(__unused_webpack_module,exports,__webpack_require__){var __createBinding=this&&this.__createBinding||(Object.create?function(o,m,k,k2){void 0===k2&&(k2=k);var desc=Object.getOwnPropertyDescriptor(m,k);desc&&!("get"in desc?!m.__esModule:desc.writable||desc.configurable)||(desc={enumerable:!0,get:function(){return m[k]}}),Object.defineProperty(o,k2,desc)}:function(o,m,k,k2){void 0===k2&&(k2=k),o[k2]=m[k]}),__exportStar=this&&this.__exportStar||function(m,exports){for(var p in m)"default"===p||Object.prototype.hasOwnProperty.call(exports,p)||__createBinding(exports,m,p)},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.raw=exports.forceReRender=exports.configure=exports.storiesOf=void 0;const core_client_1=__webpack_require__("@storybook/core-client"),render_1=__webpack_require__("./node_modules/@storybook/angular/dist/client/render.js"),decorateStory_1=__importDefault(__webpack_require__("./node_modules/@storybook/angular/dist/client/decorateStory.js"));__exportStar(__webpack_require__("./node_modules/@storybook/angular/dist/client/public-types.js"),exports);const api=(0,core_client_1.start)(render_1.renderToCanvas,{decorateStory:decorateStory_1.default,render:render_1.render});exports.storiesOf=(kind,m)=>api.clientApi.storiesOf(kind,m).addParameters({renderer:"angular"});exports.configure=(...args)=>api.configure("angular",...args),exports.forceReRender=api.forceReRender,exports.raw=api.clientApi.raw},"./node_modules/@storybook/angular/dist/client/public-types.js":(__unused_webpack_module,exports)=>{Object.defineProperty(exports,"__esModule",{value:!0})},"./node_modules/@storybook/angular/dist/index.mjs":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{var _client_index__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/@storybook/angular/dist/client/index.js");__webpack_require__.o(_client_index__WEBPACK_IMPORTED_MODULE_0__,"componentWrapperDecorator")&&__webpack_require__.d(__webpack_exports__,{componentWrapperDecorator:function(){return _client_index__WEBPACK_IMPORTED_MODULE_0__.componentWrapperDecorator}}),__webpack_require__.o(_client_index__WEBPACK_IMPORTED_MODULE_0__,"moduleMetadata")&&__webpack_require__.d(__webpack_exports__,{moduleMetadata:function(){return _client_index__WEBPACK_IMPORTED_MODULE_0__.moduleMetadata}})}}]);

package/docs/storybook/iframe.html

@@ -348,8 +348,8 @@
             window['DOCS_OPTIONS'] = {"defaultName":"Docs","autodocs":true};</script><script type="module">import './sb-preview/runtime.js';
 
       
-      import './runtime~main.902da3f3.iframe.bundle.js';
+      import './runtime~main.73b5bfb0.iframe.bundle.js';
       
       import './795.c2864771.iframe.bundle.js';
       
-      import './main.3dbeb194.iframe.bundle.js';</script></body></html>
+      import './main.fe6c3f7d.iframe.bundle.js';</script></body></html>