carbon-components-angular 5.40.4 → 5.40.5

package/docs/documentation.json

@@ -36495,7 +36495,7 @@
         },
         {
             "name": "Modal",
-            "id": "component-Modal-39d89f7b96682943cc5211bbad0f72e1cda6048d2ee16a985cea597be1fcc9c564060999eb6dc066cb59f6d762a7ce797fcd7be7ecc6fc822c33d480ab805327",
+            "id": "component-Modal-d663fa490124907b8f4786b306e4f13e35fa203fdb5b0803e85cc9992b3e894706f64d58c9e98c6ed81a94ed4b85633f2965afdcd6910d7ae15822ada350fe54",
             "file": "src/modal/modal.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -36505,7 +36505,7 @@
             "selector": "cds-modal, ibm-modal",
             "styleUrls": [],
             "styles": [],
-            "template": "<cds-overlay\n\t[theme]=\"theme\"\n\t[open]=\"open\"\n\t(overlaySelect)=\"overlaySelected.emit()\">\n\t<div\n\t\tclass=\"cds--modal-container\"\n\t\t[ngClass]=\"{\n\t\t\t'cds--modal-container--xs': size === 'xs',\n\t\t\t'cds--modal-container--sm': size === 'sm',\n\t\t\t'cds--modal-container--md': size === 'md',\n\t\t\t'cds--modal-container--lg': size === 'lg'\n\t\t}\"\n\t\trole=\"dialog\"\n\t\taria-modal=\"true\"\n\t\tstyle=\"z-index:1;\"\n\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t#modal>\n\t\t<ng-content></ng-content>\n\t\t<div\n\t\t\t*ngIf=\"hasScrollingContent !== null ? hasScrollingContent : shouldShowScrollbar\"\n\t\t\tclass=\"cds--modal-content--overflow-indicator\">\n\t\t</div>\n\t</div>\n</cds-overlay>\n\t",
+            "template": "<cds-overlay\n\t[theme]=\"theme\"\n\t[open]=\"open\"\n\t(overlaySelect)=\"overlaySelected.emit()\">\n\t<div\n\t\tclass=\"cds--modal-container\"\n\t\t[ngClass]=\"{\n\t\t\t'cds--modal-container--xs': size === 'xs',\n\t\t\t'cds--modal-container--sm': size === 'sm',\n\t\t\t'cds--modal-container--md': size === 'md',\n\t\t\t'cds--modal-container--lg': size === 'lg'\n\t\t}\"\n\t\trole=\"dialog\"\n\t\taria-modal=\"true\"\n\t\tstyle=\"z-index:1;\"\n\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t#modal>\n\t\t<ng-content></ng-content>\n\t</div>\n</cds-overlay>\n\t",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
@@ -36517,7 +36517,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nLabel for the modal.\n",
                     "description": "<p>Label for the modal.</p>\n",
-                    "line": 120,
+                    "line": 116,
                     "type": "string",
                     "decorators": []
                 },
@@ -36528,7 +36528,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSpecify whether the modal contains scrolling content. This property overrides the automatic\ndetection of the existence of scrolling content. Set this property to `true` to force\noverflow indicator to show up or to `false` to force overflow indicator to disappear.\nIt is set to `null` by default which indicates not to override automatic detection.\n",
                     "description": "<p>Specify whether the modal contains scrolling content. This property overrides the automatic\ndetection of the existence of scrolling content. Set this property to <code>true</code> to force\noverflow indicator to show up or to <code>false</code> to force overflow indicator to disappear.\nIt is set to <code>null</code> by default which indicates not to override automatic detection.</p>\n",
-                    "line": 138,
+                    "line": 134,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -36539,7 +36539,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nControls the visibility of the modal when used directly in a template\n",
                     "description": "<p>Controls the visibility of the modal when used directly in a template</p>\n",
-                    "line": 125,
+                    "line": 121,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -36550,7 +36550,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSize of the modal to display.\n",
                     "description": "<p>Size of the modal to display.</p>\n",
-                    "line": 111,
+                    "line": 107,
                     "type": "\"xs\" | \"sm\" | \"md\" | \"lg\"",
                     "decorators": []
                 },
@@ -36561,7 +36561,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nClassification of the modal.\n",
                     "description": "<p>Classification of the modal.</p>\n",
-                    "line": 115,
+                    "line": 111,
                     "type": "\"default\" | \"danger\"",
                     "decorators": []
                 },
@@ -36571,7 +36571,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nThe element that triggers the modal, which should receive focus when the modal closes\n",
                     "description": "<p>The element that triggers the modal, which should receive focus when the modal closes</p>\n",
-                    "line": 130,
+                    "line": 126,
                     "type": "HTMLElement",
                     "decorators": []
                 }
@@ -36584,7 +36584,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nTo emit the closing event of the modal window.\n",
                     "description": "<p>To emit the closing event of the modal window.</p>\n",
-                    "line": 147,
+                    "line": 143,
                     "type": "EventEmitter"
                 },
                 {
@@ -36594,7 +36594,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nEmits event when click occurs within `n-overlay` element. This is to track click events occurring outside bounds of the `Modal` object.\n",
                     "description": "<p>Emits event when click occurs within <code>n-overlay</code> element. This is to track click events occurring outside bounds of the <code>Modal</code> object.</p>\n",
-                    "line": 143,
+                    "line": 139,
                     "type": "EventEmitter"
                 }
             ],
@@ -36606,7 +36606,7 @@
                     "type": "ElementRef",
                     "optional": false,
                     "description": "<p>Maintains a reference to the view DOM element of the <code>Modal</code>.</p>\n",
-                    "line": 151,
+                    "line": 147,
                     "rawdescription": "\n\nMaintains a reference to the view DOM element of the `Modal`.\n",
                     "decorators": [
                         {
@@ -36625,7 +36625,7 @@
                     "type": "BaseModalService",
                     "optional": false,
                     "description": "",
-                    "line": 162,
+                    "line": 158,
                     "modifierKind": [
                         125
                     ]
@@ -36638,7 +36638,7 @@
                     "type": "string",
                     "optional": false,
                     "description": "<p>An element should have &#39;modal-primary-focus&#39; as an attribute to receive initial focus within the <code>Modal</code> component.</p>\n",
-                    "line": 156,
+                    "line": 152,
                     "rawdescription": "\n\nAn element should have 'modal-primary-focus' as an attribute to receive initial focus within the `Modal` component.\n"
                 }
             ],
@@ -36712,7 +36712,7 @@
             "description": "<p>Component to create modals for presenting content.</p>\n<p><a href=\"../../?path=/story/components-modal--basic\">See demo</a></p>\n<p>Using a modal in your application requires <code>cds-placeholder</code> which would generally be\nplaced near the end of your app component template (app.component.ts or app.component.html) as:</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;cds-placeholder&gt;&lt;/cds-placeholder&gt;</code></pre></div><p>A more complete example for <code>Modal</code> is given as follows:</p>\n<p>Example modal definition:</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-typescript\">&#64;Component({\nselector: &quot;app-sample-modal&quot;,\ntemplate: `\n&lt;cds-modal size=&quot;xl&quot; (overlaySelected)=&quot;closeModal()&quot;&gt;\n&lt;cds-modal-header (closeSelect)=&quot;closeModal()&quot;&gt;Header text&lt;/cds-modal-header&gt;\n&lt;section class=&quot;modal-body&quot;&gt;\n&lt;h1&gt;Sample modal works.&lt;/h1&gt;\n&lt;button class=&quot;btn--icon-link&quot; nPopover=&quot;Hello there&quot; title=&quot;Popover title&quot; placement=&quot;right&quot; appendInline=&quot;true&quot;&gt;\n&lt;svg cdsIcon=&quot;info&quot; size=&quot;sm&quot;&gt;&lt;/svg&gt;\n&lt;/button&gt;\n{{modalText}}\n&lt;/section&gt;\n&lt;cds-modal-footer&gt;&lt;button cdsButton=&quot;primary&quot; (click)=&quot;closeModal()&quot;&gt;Close&lt;/button&gt;&lt;/cds-modal-footer&gt;\n&lt;/cds-modal&gt;`,\nstyleUrls: [&quot;./sample-modal.component.scss&quot;]\n})\nexport class SampleModal extends BaseModal {\nmodalText: string;\nconstructor(protected injector: Injector) {\nsuper();\nthis.modalText = this.injector.get(&quot;modalText&quot;);\n}\n}</code></pre></div><p>Example of opening the modal:</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-typescript\">&#64;Component({\nselector: &quot;app-modal-demo&quot;,\ntemplate: `\n&lt;button cdsButton=&quot;primary&quot; (click)=&quot;openModal(&#39;drill&#39;)&quot;&gt;Drill-down modal&lt;/button&gt;\n&lt;cds-placeholder&gt;&lt;/cds-placeholder&gt;`\n})\nexport class ModalDemo {\nopenModal() {\nthis.modalService.create({component: SampleModal, inputs: {modalText: &quot;Hello universe.&quot;}});\n}\n}</code></pre></div>",
             "rawdescription": "\n\nComponent to create modals for presenting content.\n\n[See demo](../../?path=/story/components-modal--basic)\n\nUsing a modal in your application requires `cds-placeholder` which would generally be\nplaced near the end of your app component template (app.component.ts or app.component.html) as:\n\n```html\n<cds-placeholder></cds-placeholder>\n```\n\nA more complete example for `Modal` is given as follows:\n\nExample modal definition:\n\n```typescript\n@Component({\nselector: \"app-sample-modal\",\ntemplate: `\n<cds-modal size=\"xl\" (overlaySelected)=\"closeModal()\">\n<cds-modal-header (closeSelect)=\"closeModal()\">Header text</cds-modal-header>\n<section class=\"modal-body\">\n<h1>Sample modal works.</h1>\n<button class=\"btn--icon-link\" nPopover=\"Hello there\" title=\"Popover title\" placement=\"right\" appendInline=\"true\">\n<svg cdsIcon=\"info\" size=\"sm\"></svg>\n</button>\n{{modalText}}\n</section>\n<cds-modal-footer><button cdsButton=\"primary\" (click)=\"closeModal()\">Close</button></cds-modal-footer>\n</cds-modal>`,\nstyleUrls: [\"./sample-modal.component.scss\"]\n})\nexport class SampleModal extends BaseModal {\nmodalText: string;\nconstructor(protected injector: Injector) {\nsuper();\nthis.modalText = this.injector.get(\"modalText\");\n}\n}\n```\n\nExample of opening the modal:\n\n```typescript\n@Component({\nselector: \"app-modal-demo\",\ntemplate: `\n<button cdsButton=\"primary\" (click)=\"openModal('drill')\">Drill-down modal</button>\n<cds-placeholder></cds-placeholder>`\n})\nexport class ModalDemo {\nopenModal() {\nthis.modalService.create({component: SampleModal, inputs: {modalText: \"Hello universe.\"}});\n}\n}\n```\n",
             "type": "component",
-            "sourceCode": "import {\n\tAfterViewInit,\n\tComponent,\n\tEventEmitter,\n\tHostListener,\n\tInput,\n\tOutput,\n\tElementRef,\n\tViewChild,\n\tSimpleChanges,\n\tOnChanges,\n\tRenderer2,\n\tInject,\n\tOnDestroy\n} from \"@angular/core\";\nimport { DOCUMENT } from \"@angular/common\";\nimport { cycleTabs, getFocusElementList } from \"carbon-components-angular/common\";\nimport { BaseModalService } from \"./base-modal.service\";\n\n/**\n * Component to create modals for presenting content.\n *\n * [See demo](../../?path=/story/components-modal--basic)\n *\n * Using a modal in your application requires `cds-placeholder` which would generally be\n * placed near the end of your app component template (app.component.ts or app.component.html) as:\n *\n```html\n<cds-placeholder></cds-placeholder>\n```\n *\n * A more complete example for `Modal` is given as follows:\n *\n * Example modal definition:\n *\n```typescript\n@Component({\n\tselector: \"app-sample-modal\",\n\ttemplate: `\n\t\t\t\t<cds-modal size=\"xl\" (overlaySelected)=\"closeModal()\">\n\t\t\t\t\t<cds-modal-header (closeSelect)=\"closeModal()\">Header text</cds-modal-header>\n\t\t\t\t\t\t<section class=\"modal-body\">\n\t\t\t\t\t\t\t<h1>Sample modal works.</h1>\n\t\t\t\t\t\t\t<button class=\"btn--icon-link\" nPopover=\"Hello there\" title=\"Popover title\" placement=\"right\" appendInline=\"true\">\n\t\t\t\t\t\t\t\t<svg cdsIcon=\"info\" size=\"sm\"></svg>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t{{modalText}}\n\t\t\t\t\t\t</section>\n\t\t\t\t\t<cds-modal-footer><button cdsButton=\"primary\" (click)=\"closeModal()\">Close</button></cds-modal-footer>\n\t\t\t\t</cds-modal>`,\n\tstyleUrls: [\"./sample-modal.component.scss\"]\n})\nexport class SampleModal extends BaseModal {\n\tmodalText: string;\n\tconstructor(protected injector: Injector) {\n\t\tsuper();\n\t\tthis.modalText = this.injector.get(\"modalText\");\n\t}\n}\n```\n *\n * Example of opening the modal:\n *\n```typescript\n@Component({\n\tselector: \"app-modal-demo\",\n\ttemplate: `\n\t\t\t\t<button cdsButton=\"primary\" (click)=\"openModal('drill')\">Drill-down modal</button>\n\t\t\t\t<cds-placeholder></cds-placeholder>`\n})\nexport class ModalDemo {\n\topenModal() {\n\t\tthis.modalService.create({component: SampleModal, inputs: {modalText: \"Hello universe.\"}});\n\t}\n}\n```\n */\n@Component({\n\tselector: \"cds-modal, ibm-modal\",\n\ttemplate: `\n\t\t<cds-overlay\n\t\t\t[theme]=\"theme\"\n\t\t\t[open]=\"open\"\n\t\t\t(overlaySelect)=\"overlaySelected.emit()\">\n\t\t\t<div\n\t\t\t\tclass=\"cds--modal-container\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--modal-container--xs': size === 'xs',\n\t\t\t\t\t'cds--modal-container--sm': size === 'sm',\n\t\t\t\t\t'cds--modal-container--md': size === 'md',\n\t\t\t\t\t'cds--modal-container--lg': size === 'lg'\n\t\t\t\t}\"\n\t\t\t\trole=\"dialog\"\n\t\t\t\taria-modal=\"true\"\n\t\t\t\tstyle=\"z-index:1;\"\n\t\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t\t#modal>\n\t\t\t\t<ng-content></ng-content>\n\t\t\t\t<div\n\t\t\t\t\t*ngIf=\"hasScrollingContent !== null ? hasScrollingContent : shouldShowScrollbar\"\n\t\t\t\t\tclass=\"cds--modal-content--overflow-indicator\">\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</cds-overlay>\n\t`\n})\nexport class Modal implements AfterViewInit, OnChanges, OnDestroy {\n\t/**\n\t * Size of the modal to display.\n\t */\n\t@Input() size: \"xs\" | \"sm\"| \"md\" | \"lg\" = \"md\";\n\t/**\n\t * Classification of the modal.\n\t */\n\t@Input() theme: \"default\" | \"danger\" = \"default\";\n\n\t/**\n\t * Label for the modal.\n\t */\n\t@Input() ariaLabel = \"default\";\n\n\t/**\n\t * Controls the visibility of the modal when used directly in a template\n\t */\n\t@Input() open = false;\n\n\t/**\n\t * The element that triggers the modal, which should receive focus when the modal closes\n\t */\n\t@Input() trigger: HTMLElement;\n\n\t/**\n\t * Specify whether the modal contains scrolling content. This property overrides the automatic\n\t * detection of the existence of scrolling content. Set this property to `true` to force\n\t * overflow indicator to show up or to `false` to force overflow indicator to disappear.\n\t * It is set to `null` by default which indicates not to override automatic detection.\n\t */\n\t@Input() hasScrollingContent: boolean = null;\n\n\t/**\n\t * Emits event when click occurs within `n-overlay` element. This is to track click events occurring outside bounds of the `Modal` object.\n\t */\n\t@Output() overlaySelected = new EventEmitter();\n\t/**\n\t * To emit the closing event of the modal window.\n\t */\n\t@Output() close = new EventEmitter();\n\t/**\n\t * Maintains a reference to the view DOM element of the `Modal`.\n\t */\n\t@ViewChild(\"modal\", { static: true }) modal: ElementRef;\n\n\t/**\n\t * An element should have 'modal-primary-focus' as an attribute to receive initial focus within the `Modal` component.\n\t */\n\tselectorPrimaryFocus = \"[modal-primary-focus]\";\n\n\t/**\n\t * Creates an instance of `Modal`.\n\t */\n\tconstructor(\n\t\tpublic modalService: BaseModalService,\n\t\t@Inject(DOCUMENT) private document: Document,\n\t\tprivate renderer: Renderer2\n\t) { }\n\n\tngOnChanges({ open }: SimpleChanges) {\n\t\tif (open) {\n\t\t\tif (open.currentValue) {\n\t\t\t\t// `100` is just enough time to allow the modal\n\t\t\t\t// to become visible, so that we can set focus\n\t\t\t\tsetTimeout(() => this.focusInitialElement(), 100);\n\t\t\t\t// Prevent scrolling on open\n\t\t\t\tthis.renderer.addClass(this.document.body, \"cds--body--with-modal-open\");\n\t\t\t} else if (!open.currentValue) {\n\t\t\t\t// Enable scrolling on close\n\t\t\t\tthis.renderer.removeClass(this.document.body, \"cds--body--with-modal-open\");\n\t\t\t} else if (this.trigger) {\n\t\t\t\tthis.trigger.focus();\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Set document focus to be on the modal component after it is initialized.\n\t */\n\tngAfterViewInit() {\n\t\tthis.focusInitialElement();\n\t}\n\n\t/**\n\t * Handle keyboard events to close modal and tab through the content within the modal.\n\t */\n\t@HostListener(\"keydown\", [\"$event\"])\n\thandleKeyboardEvent(event: KeyboardEvent) {\n\t\tswitch (event.key) {\n\t\t\tcase \"Escape\": {\n\t\t\t\tevent.stopImmediatePropagation();  // prevents events being fired for multiple modals if more than 2 open\n\t\t\t\t// Manually close modal\n\t\t\t\tthis.open = false;\n\t\t\t\tthis.close.emit();\n\t\t\t\tthis.modalService.destroy();  // destroy top (latest) modal\n\t\t\t\tbreak;\n\t\t\t}\n\n\t\t\tcase \"Tab\": {\n\t\t\t\tcycleTabs(event, this.modal.nativeElement);\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * This detects whether or not the modal contains scrolling content.\n\t *\n\t * To force trigger a detection (ie. on window resize), change or reset the value of the modal content.\n\t *\n\t * Use the `hasScrollingContent` input to manually override the overflow indicator.\n\t */\n\tget shouldShowScrollbar() {\n\t\tconst modalContent = this.modal ? this.modal.nativeElement.querySelector(\".cds--modal-content\") : null;\n\t\tif (modalContent) {\n\t\t\t// get rounded value from height to match integer returned from scrollHeight\n\t\t\tconst modalContentHeight = Math.ceil(modalContent.getBoundingClientRect().height);\n\t\t\tconst modalContentScrollHeight = modalContent.scrollHeight;\n\t\t\treturn modalContentScrollHeight > modalContentHeight;\n\t\t} else {\n\t\t\treturn false;\n\t\t}\n\t}\n\n\t// Remove class preventing scrolling\n\tngOnDestroy() {\n\t\tthis.renderer.removeClass(this.document.body, \"cds--body--with-modal-open\");\n\t}\n\n\tprotected focusInitialElement() {\n\t\tconst primaryFocusElement = this.modal.nativeElement.querySelector(this.selectorPrimaryFocus);\n\t\tif (primaryFocusElement && primaryFocusElement.focus) {\n\t\t\tsetTimeout(() => primaryFocusElement.focus());\n\t\t} else if (getFocusElementList(this.modal.nativeElement).length > 0) {\n\t\t\tsetTimeout(() => getFocusElementList(this.modal.nativeElement)[0].focus());\n\t\t} else {\n\t\t\tsetTimeout(() => this.modal.nativeElement.focus());\n\t\t}\n\t}\n}\n",
+            "sourceCode": "import {\n\tAfterViewInit,\n\tComponent,\n\tEventEmitter,\n\tHostListener,\n\tInput,\n\tOutput,\n\tElementRef,\n\tViewChild,\n\tSimpleChanges,\n\tOnChanges,\n\tRenderer2,\n\tInject,\n\tOnDestroy\n} from \"@angular/core\";\nimport { DOCUMENT } from \"@angular/common\";\nimport { cycleTabs, getFocusElementList } from \"carbon-components-angular/common\";\nimport { BaseModalService } from \"./base-modal.service\";\n\n/**\n * Component to create modals for presenting content.\n *\n * [See demo](../../?path=/story/components-modal--basic)\n *\n * Using a modal in your application requires `cds-placeholder` which would generally be\n * placed near the end of your app component template (app.component.ts or app.component.html) as:\n *\n```html\n<cds-placeholder></cds-placeholder>\n```\n *\n * A more complete example for `Modal` is given as follows:\n *\n * Example modal definition:\n *\n```typescript\n@Component({\n\tselector: \"app-sample-modal\",\n\ttemplate: `\n\t\t\t\t<cds-modal size=\"xl\" (overlaySelected)=\"closeModal()\">\n\t\t\t\t\t<cds-modal-header (closeSelect)=\"closeModal()\">Header text</cds-modal-header>\n\t\t\t\t\t\t<section class=\"modal-body\">\n\t\t\t\t\t\t\t<h1>Sample modal works.</h1>\n\t\t\t\t\t\t\t<button class=\"btn--icon-link\" nPopover=\"Hello there\" title=\"Popover title\" placement=\"right\" appendInline=\"true\">\n\t\t\t\t\t\t\t\t<svg cdsIcon=\"info\" size=\"sm\"></svg>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t{{modalText}}\n\t\t\t\t\t\t</section>\n\t\t\t\t\t<cds-modal-footer><button cdsButton=\"primary\" (click)=\"closeModal()\">Close</button></cds-modal-footer>\n\t\t\t\t</cds-modal>`,\n\tstyleUrls: [\"./sample-modal.component.scss\"]\n})\nexport class SampleModal extends BaseModal {\n\tmodalText: string;\n\tconstructor(protected injector: Injector) {\n\t\tsuper();\n\t\tthis.modalText = this.injector.get(\"modalText\");\n\t}\n}\n```\n *\n * Example of opening the modal:\n *\n```typescript\n@Component({\n\tselector: \"app-modal-demo\",\n\ttemplate: `\n\t\t\t\t<button cdsButton=\"primary\" (click)=\"openModal('drill')\">Drill-down modal</button>\n\t\t\t\t<cds-placeholder></cds-placeholder>`\n})\nexport class ModalDemo {\n\topenModal() {\n\t\tthis.modalService.create({component: SampleModal, inputs: {modalText: \"Hello universe.\"}});\n\t}\n}\n```\n */\n@Component({\n\tselector: \"cds-modal, ibm-modal\",\n\ttemplate: `\n\t\t<cds-overlay\n\t\t\t[theme]=\"theme\"\n\t\t\t[open]=\"open\"\n\t\t\t(overlaySelect)=\"overlaySelected.emit()\">\n\t\t\t<div\n\t\t\t\tclass=\"cds--modal-container\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--modal-container--xs': size === 'xs',\n\t\t\t\t\t'cds--modal-container--sm': size === 'sm',\n\t\t\t\t\t'cds--modal-container--md': size === 'md',\n\t\t\t\t\t'cds--modal-container--lg': size === 'lg'\n\t\t\t\t}\"\n\t\t\t\trole=\"dialog\"\n\t\t\t\taria-modal=\"true\"\n\t\t\t\tstyle=\"z-index:1;\"\n\t\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t\t#modal>\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</div>\n\t\t</cds-overlay>\n\t`\n})\nexport class Modal implements AfterViewInit, OnChanges, OnDestroy {\n\t/**\n\t * Size of the modal to display.\n\t */\n\t@Input() size: \"xs\" | \"sm\"| \"md\" | \"lg\" = \"md\";\n\t/**\n\t * Classification of the modal.\n\t */\n\t@Input() theme: \"default\" | \"danger\" = \"default\";\n\n\t/**\n\t * Label for the modal.\n\t */\n\t@Input() ariaLabel = \"default\";\n\n\t/**\n\t * Controls the visibility of the modal when used directly in a template\n\t */\n\t@Input() open = false;\n\n\t/**\n\t * The element that triggers the modal, which should receive focus when the modal closes\n\t */\n\t@Input() trigger: HTMLElement;\n\n\t/**\n\t * Specify whether the modal contains scrolling content. This property overrides the automatic\n\t * detection of the existence of scrolling content. Set this property to `true` to force\n\t * overflow indicator to show up or to `false` to force overflow indicator to disappear.\n\t * It is set to `null` by default which indicates not to override automatic detection.\n\t */\n\t@Input() hasScrollingContent: boolean = null;\n\n\t/**\n\t * Emits event when click occurs within `n-overlay` element. This is to track click events occurring outside bounds of the `Modal` object.\n\t */\n\t@Output() overlaySelected = new EventEmitter();\n\t/**\n\t * To emit the closing event of the modal window.\n\t */\n\t@Output() close = new EventEmitter();\n\t/**\n\t * Maintains a reference to the view DOM element of the `Modal`.\n\t */\n\t@ViewChild(\"modal\", { static: true }) modal: ElementRef;\n\n\t/**\n\t * An element should have 'modal-primary-focus' as an attribute to receive initial focus within the `Modal` component.\n\t */\n\tselectorPrimaryFocus = \"[modal-primary-focus]\";\n\n\t/**\n\t * Creates an instance of `Modal`.\n\t */\n\tconstructor(\n\t\tpublic modalService: BaseModalService,\n\t\t@Inject(DOCUMENT) private document: Document,\n\t\tprivate renderer: Renderer2\n\t) { }\n\n\tngOnChanges({ open, hasScrollingContent }: SimpleChanges) {\n\t\tif (open) {\n\t\t\tif (open.currentValue) {\n\t\t\t\t// `100` is just enough time to allow the modal\n\t\t\t\t// to become visible, so that we can set focus\n\t\t\t\tsetTimeout(() => this.focusInitialElement(), 100);\n\t\t\t\t// Prevent scrolling on open\n\t\t\t\tthis.renderer.addClass(this.document.body, \"cds--body--with-modal-open\");\n\t\t\t} else if (!open.currentValue) {\n\t\t\t\t// Enable scrolling on close\n\t\t\t\tthis.renderer.removeClass(this.document.body, \"cds--body--with-modal-open\");\n\t\t\t} else if (this.trigger) {\n\t\t\t\tthis.trigger.focus();\n\t\t\t}\n\t\t}\n\t\tif (hasScrollingContent) {\n\t\t\tthis.updateScrollbar();\n\t\t}\n\t}\n\n\t/**\n\t * Set document focus to be on the modal component after it is initialized.\n\t */\n\tngAfterViewInit() {\n\t\tthis.focusInitialElement();\n\t\tthis.updateScrollbar();\n\t}\n\n\t/**\n\t * Handle keyboard events to close modal and tab through the content within the modal.\n\t */\n\t@HostListener(\"keydown\", [\"$event\"])\n\thandleKeyboardEvent(event: KeyboardEvent) {\n\t\tswitch (event.key) {\n\t\t\tcase \"Escape\": {\n\t\t\t\tevent.stopImmediatePropagation();  // prevents events being fired for multiple modals if more than 2 open\n\t\t\t\t// Manually close modal\n\t\t\t\tthis.open = false;\n\t\t\t\tthis.close.emit();\n\t\t\t\tthis.modalService.destroy();  // destroy top (latest) modal\n\t\t\t\tbreak;\n\t\t\t}\n\n\t\t\tcase \"Tab\": {\n\t\t\t\tcycleTabs(event, this.modal.nativeElement);\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * This detects whether or not the modal contains scrolling content.\n\t *\n\t * To force trigger a detection (ie. on window resize), change or reset the value of the modal content.\n\t *\n\t * Use the `hasScrollingContent` input to manually override the overflow indicator.\n\t */\n\tget shouldShowScrollbar() {\n\t\tconst modalContent = this.modal ? this.modal.nativeElement.querySelector(\".cds--modal-content\") : null;\n\t\tif (modalContent) {\n\t\t\t// get rounded value from height to match integer returned from scrollHeight\n\t\t\tconst modalContentHeight = Math.ceil(modalContent.getBoundingClientRect().height);\n\t\t\tconst modalContentScrollHeight = modalContent.scrollHeight;\n\t\t\treturn modalContentScrollHeight > modalContentHeight;\n\t\t} else {\n\t\t\treturn false;\n\t\t}\n\t}\n\n\t// Remove class preventing scrolling\n\tngOnDestroy() {\n\t\tthis.renderer.removeClass(this.document.body, \"cds--body--with-modal-open\");\n\t}\n\n\tprotected focusInitialElement() {\n\t\tconst primaryFocusElement = this.modal.nativeElement.querySelector(this.selectorPrimaryFocus);\n\t\tif (primaryFocusElement && primaryFocusElement.focus) {\n\t\t\tsetTimeout(() => primaryFocusElement.focus());\n\t\t} else if (getFocusElementList(this.modal.nativeElement).length > 0) {\n\t\t\tsetTimeout(() => getFocusElementList(this.modal.nativeElement)[0].focus());\n\t\t} else {\n\t\t\tsetTimeout(() => this.modal.nativeElement.focus());\n\t\t}\n\t}\n\n\tprivate updateScrollbar() {\n\t\tconst modalContent = this.modal ? this.modal.nativeElement.querySelector(\".cds--modal-content\") : null;\n\t\tconst showScrollbar = this.hasScrollingContent !== null ? this.hasScrollingContent : this.shouldShowScrollbar;\n\t\tif (modalContent) {\n\t\t\tif (showScrollbar) {\n\t\t\t\tthis.renderer.addClass(modalContent, \"cds--modal-scroll-content\");\n\t\t\t} else {\n\t\t\t\tthis.renderer.removeClass(modalContent, \"cds--modal-scroll-content\");\n\t\t\t}\n\t\t}\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -36741,7 +36741,7 @@
                         "deprecationMessage": ""
                     }
                 ],
-                "line": 156,
+                "line": 152,
                 "rawdescription": "\n\nCreates an instance of `Modal`.\n",
                 "jsdoctags": [
                     {

package/docs/storybook/{3931.0e7c514c.iframe.bundle.js → 3931.b0862ad7.iframe.bundle.js}

@@ -1 +1 @@
-"use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[3931],{"./node_modules/@carbon/utils-position/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{var _a,PLACEMENTS;__webpack_require__.d(__webpack_exports__,{FK:()=>position,ZP:()=>__WEBPACK_DEFAULT_EXPORT__}),function(PLACEMENTS){PLACEMENTS.LEFT="left",PLACEMENTS.RIGHT="right",PLACEMENTS.TOP="top",PLACEMENTS.BOTTOM="bottom"}(PLACEMENTS||(PLACEMENTS={}));var defaultPositions=((_a={})[PLACEMENTS.LEFT]=function(referenceOffset,target,referenceRect){return{top:referenceOffset.top-Math.round(target.offsetHeight/2)+Math.round(referenceRect.height/2),left:Math.round(referenceOffset.left-target.offsetWidth)}},_a[PLACEMENTS.RIGHT]=function(referenceOffset,target,referenceRect){return{top:referenceOffset.top-Math.round(target.offsetHeight/2)+Math.round(referenceRect.height/2),left:Math.round(referenceOffset.left+referenceRect.width)}},_a[PLACEMENTS.TOP]=function(referenceOffset,target,referenceRect){return{top:Math.round(referenceOffset.top-target.offsetHeight),left:referenceOffset.left-Math.round(target.offsetWidth/2)+Math.round(referenceRect.width/2)}},_a[PLACEMENTS.BOTTOM]=function(referenceOffset,target,referenceRect){return{top:Math.round(referenceOffset.top+referenceRect.height),left:referenceOffset.left-Math.round(target.offsetWidth/2)+Math.round(referenceRect.width/2)}},_a),windowRef="undefined"!=typeof window?window:{innerHeight:0,scrollY:0,innerWidth:0,scrollX:0},Position=function(){function Position(positions){void 0===positions&&(positions={}),this.positions=defaultPositions,this.positions=Object.assign({},defaultPositions,positions)}return Position.prototype.getRelativeOffset=function(target){for(var offsets={left:target.offsetLeft,top:target.offsetTop};target.offsetParent&&"static"===getComputedStyle(target.offsetParent).position;)offsets.left+=target.offsetLeft,offsets.top+=target.offsetTop,target=target.offsetParent;return offsets},Position.prototype.getAbsoluteOffset=function(target){for(var currentNode=target,margins={top:0,left:0};currentNode.offsetParent;){var computed=getComputedStyle(currentNode.offsetParent);"static"===computed.position&&computed.marginLeft&&computed.marginTop&&(parseInt(computed.marginTop,10)&&(margins.top+=parseInt(computed.marginTop,10)),parseInt(computed.marginLeft,10)&&(margins.left+=parseInt(computed.marginLeft,10))),currentNode=currentNode.offsetParent}var targetRect=target.getBoundingClientRect(),relativeRect=document.body.getBoundingClientRect();return{top:targetRect.top-relativeRect.top+margins.top,left:targetRect.left-relativeRect.left+margins.left}},Position.prototype.findRelative=function(reference,target,placement){var referenceOffset=this.getRelativeOffset(reference),referenceRect=reference.getBoundingClientRect();return this.calculatePosition(referenceOffset,referenceRect,target,placement)},Position.prototype.findAbsolute=function(reference,target,placement){var referenceOffset=this.getAbsoluteOffset(reference),referenceRect=reference.getBoundingClientRect();return this.calculatePosition(referenceOffset,referenceRect,target,placement)},Position.prototype.findPosition=function(reference,target,placement,offsetFunction){void 0===offsetFunction&&(offsetFunction=this.getAbsoluteOffset.bind(this));var referenceOffset=offsetFunction(reference),referenceRect=reference.getBoundingClientRect();return this.calculatePosition(referenceOffset,referenceRect,target,placement)},Position.prototype.findPositionAt=function(offset,target,placement){return this.calculatePosition(offset,{top:0,left:0,height:0,width:0},target,placement)},Position.prototype.getPlacementBox=function(target,position){var targetBottom=target.offsetHeight+position.top,targetRight=target.offsetWidth+position.left;return{top:position.top,bottom:targetBottom,left:position.left,right:targetRight}},Position.prototype.addOffset=function(position,top,left){return void 0===top&&(top=0),void 0===left&&(left=0),Object.assign({},position,{top:position.top+top,left:position.left+left})},Position.prototype.setElement=function(element,position){element.style.top=position.top+"px",element.style.left=position.left+"px"},Position.prototype.findBestPlacement=function(reference,target,placements,containerFunction,positionFunction){var _this=this;void 0===containerFunction&&(containerFunction=this.defaultContainerFunction.bind(this)),void 0===positionFunction&&(positionFunction=this.findPosition.bind(this));var weightedPlacements=placements.map((function(placement){var pos=positionFunction(reference,target,placement),box=_this.getPlacementBox(target,pos),hiddenHeight=0,hiddenWidth=0,container=containerFunction();box.top<container.top?hiddenHeight=container.top-box.top:box.bottom>container.height&&(hiddenHeight=box.bottom-container.height),box.left<container.left?hiddenWidth=container.left-box.left:box.right>container.width&&(hiddenWidth=box.right-container.width),hiddenHeight&&!hiddenWidth?hiddenWidth=1:hiddenWidth&&!hiddenHeight&&(hiddenHeight=1);var area=target.offsetHeight*target.offsetWidth;return{placement,weight:(area-hiddenHeight*hiddenWidth)/area}}));return weightedPlacements.sort((function(a,b){return b.weight-a.weight})),weightedPlacements[0].placement},Position.prototype.findBestPlacementAt=function(offset,target,placements,containerFunction){var _this=this;void 0===containerFunction&&(containerFunction=this.defaultContainerFunction.bind(this));return this.findBestPlacement(null,target,placements,containerFunction,(function(_,target,placement){return _this.findPositionAt(offset,target,placement)}))},Position.prototype.defaultContainerFunction=function(){return{top:0,left:0,height:windowRef.innerHeight,width:windowRef.innerWidth}},Position.prototype.calculatePosition=function(referenceOffset,referenceRect,target,placement){return this.positions[placement]?this.positions[placement](referenceOffset,target,referenceRect):(console.error("No function found for placement, defaulting to 0,0"),{left:0,top:0})},Position}(),position=new Position;const __WEBPACK_DEFAULT_EXPORT__=Position},"./src/modal/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{IX:()=>BaseModal,JF:()=>ModalButtonType,zk:()=>ModalModule,Z7:()=>ModalService});var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs");let BaseModal=class BaseModal{constructor(){this.close=new core.EventEmitter,this.open=!1}closeModal(){this.close.emit()}};BaseModal.propDecorators={close:[{type:core.Output}],open:[{type:core.Input}]},BaseModal=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsBaseModal], [ibmBaseModal]"})],BaseModal);let AlertModal=class AlertModal extends BaseModal{constructor(type="default",label,title,content,size,hasScrollingContent=null,buttons=[],onClose,showCloseButton=!0){super(),this.type=type,this.label=label,this.title=title,this.content=content,this.size=size,this.hasScrollingContent=hasScrollingContent,this.buttons=buttons,this.onClose=onClose,this.showCloseButton=showCloseButton;for(let i=0;i<this.buttons.length;i++){const button=this.buttons[i];button.id||(button.id=`alert-modal-button-${i}`),button.type||(button.type="secondary")}}ngAfterViewInit(){if(!this.modalContent)return!1;const element=this.modalContent.nativeElement;element.scrollHeight>element.clientHeight?element.tabIndex=0:element.tabIndex=-1}buttonClicked(buttonIndex){const button=this.buttons[buttonIndex];button.click&&button.click(),this.closeModal()}dismissModal(trigger){this.onClose&&!1===this.onClose(trigger)||this.closeModal()}};var AlertModalType,ModalButtonType;AlertModal.ctorParameters=()=>[{type:void 0,decorators:[{type:core.Optional},{type:core.Inject,args:["type"]}]},{type:String,decorators:[{type:core.Optional},{type:core.Inject,args:["label"]}]},{type:String,decorators:[{type:core.Optional},{type:core.Inject,args:["title"]}]},{type:String,decorators:[{type:core.Optional},{type:core.Inject,args:["content"]}]},{type:String,decorators:[{type:core.Optional},{type:core.Inject,args:["size"]}]},{type:Boolean,decorators:[{type:core.Optional},{type:core.Inject,args:["hasScrollingContent"]}]},{type:void 0,decorators:[{type:core.Optional},{type:core.Inject,args:["buttons"]}]},{type:Function,decorators:[{type:core.Optional},{type:core.Inject,args:["close"]}]},{type:void 0,decorators:[{type:core.Optional},{type:core.Inject,args:["showCloseButton"]}]}],AlertModal.propDecorators={modalContent:[{type:core.ViewChild,args:["modalContent",{static:!0}]}]},AlertModal=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-alert-modal, ibm-alert-modal",template:'\n\t\t<cds-modal\n\t\t\t[size]="size"\n\t\t\t[theme]="type"\n\t\t\t[ariaLabel]="title"\n\t\t\t[hasScrollingContent]="hasScrollingContent"\n\t\t\t[open]="open"\n\t\t\t(overlaySelected)="dismissModal(\'overlay\')">\n\t\t\t<cds-modal-header (closeSelect)="dismissModal(\'close\')" [showCloseButton]="showCloseButton">\n\t\t\t\t<p cdsModalHeaderLabel class="cds--type-delta">{{label}}</p>\n\t\t\t\t<p cdsModalHeaderHeading class="cds--type-beta">{{title}}</p>\n\t\t\t</cds-modal-header>\n\t\t\t<div cdsModalContent #modalContent>\n\t\t\t\t<p [innerHTML]="content"></p>\n\t\t\t</div>\n\t\t\t<cds-modal-footer *ngIf="buttons.length > 0">\n\t\t\t\t<ng-container *ngFor="let button of buttons; let i = index">\n\t\t\t\t\t<button\n\t\t\t\t\t\t[cdsButton]="button.type"\n\t\t\t\t\t\t(click)="buttonClicked(i)"\n\t\t\t\t\t\t[id]="button.id"\n\t\t\t\t\t\t[attr.modal-primary-focus]="(button.type.indexOf(\'primary\') !== -1 ? \'\' : null)">\n\t\t\t\t\t\t{{button.text}}\n\t\t\t\t\t</button>\n\t\t\t\t</ng-container>\n\t\t\t</cds-modal-footer>\n\t\t</cds-modal>\n\t'})],AlertModal),function(AlertModalType){AlertModalType.default="default",AlertModalType.danger="danger"}(AlertModalType||(AlertModalType={})),function(ModalButtonType){ModalButtonType.primary="primary",ModalButtonType.secondary="secondary",ModalButtonType.tertiary="tertiary",ModalButtonType.ghost="ghost",ModalButtonType.danger="danger",ModalButtonType.danger_primary="danger--primary"}(ModalButtonType||(ModalButtonType={}));let ModalFooter=class ModalFooter{};ModalFooter=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-modal-footer, ibm-modal-footer",template:'\n\t\t<footer class="cds--modal-footer">\n\t\t\t<ng-content></ng-content>\n\t\t</footer>\n\t'})],ModalFooter);var i18n=__webpack_require__("./src/i18n/index.ts");let ModalHeader=class ModalHeader{constructor(i18n){this.i18n=i18n,this.theme="default",this.closeLabel=this.i18n.get().MODAL.CLOSE,this.showCloseButton=!0,this.closeSelect=new core.EventEmitter,this.buttonNgClass={"cds--modal-close":!0},this.buttonAttributes={"aria-label":this.i18n.get().MODAL.CLOSE}}onClose(){this.closeSelect.emit()}};ModalHeader.ctorParameters=()=>[{type:i18n.oc}],ModalHeader.propDecorators={theme:[{type:core.Input}],closeLabel:[{type:core.Input}],showCloseButton:[{type:core.Input}],closeSelect:[{type:core.Output}]},ModalHeader=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-modal-header, ibm-modal-header",template:'\n\t\t<header class="cds--modal-header {{theme}}">\n\t\t\t<ng-content></ng-content>\n\t\t\t<div class="cds--modal-close-button">\n\t\t\t\t<cds-icon-button\n\t\t\t\t\t*ngIf="showCloseButton"\n\t\t\t\t\ttype="button"\n\t\t\t\t\t[buttonNgClass]="buttonNgClass"\n\t\t\t\t\t[buttonAttributes]="buttonAttributes"\n\t\t\t\t\talign="left"\n\t\t\t\t\t[description]="closeLabel"\n\t\t\t\t\t(click)="onClose()">\n\t\t\t\t\t<svg cdsIcon="close" size="20" class="cds--modal-close__icon"></svg>\n\t\t\t\t</cds-icon-button>\n\t\t\t</div>\n\t\t</header>\n\n\t'})],ModalHeader);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs"),tab_service=__webpack_require__("./src/common/tab.service.ts"),placeholder=__webpack_require__("./src/placeholder/index.ts"),tap=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/operators/tap.js"),delay=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/operators/delay.js");let BaseModalService=class BaseModalService{constructor(placeholderService){this.placeholderService=placeholderService}create(data){data=Object.assign({},{inputs:{}},data);const inputProviders=Object.keys(data.inputs).map((inputName=>({provide:inputName,useValue:data.inputs[inputName]}))),injector=core.Injector.create({providers:inputProviders}),component=this.placeholderService.createComponent(data.component,injector);let focusedElement=document.activeElement;return setTimeout((()=>{component.instance.open=!0})),component.previouslyFocusedElement=focusedElement,component.instance.close.pipe((0,tap.b)((()=>{component.instance.open=!1})),(0,delay.g)(240)).subscribe((()=>{this.placeholderService.destroyComponent(component),BaseModalService.modalList=BaseModalService.modalList.filter((c=>c!==component))})),component.onDestroy((()=>{focusedElement.focus()})),BaseModalService.modalList.push(component),component}destroy(index=-1){index>=BaseModalService.modalList.length||0===BaseModalService.modalList.length||(index<0&&(index=BaseModalService.modalList.length-1),setTimeout((()=>{BaseModalService.modalList[index]&&(this.placeholderService.destroyComponent(BaseModalService.modalList[index]),BaseModalService.modalList.splice(index,1))}),240))}};BaseModalService.modalList=[],BaseModalService.ctorParameters=()=>[{type:placeholder.Q_}],BaseModalService=(0,tslib_es6.gn)([(0,core.Injectable)()],BaseModalService);let Modal=class Modal{constructor(modalService,document,renderer){this.modalService=modalService,this.document=document,this.renderer=renderer,this.size="md",this.theme="default",this.ariaLabel="default",this.open=!1,this.hasScrollingContent=null,this.overlaySelected=new core.EventEmitter,this.close=new core.EventEmitter,this.selectorPrimaryFocus="[modal-primary-focus]"}ngOnChanges({open}){open&&(open.currentValue?(setTimeout((()=>this.focusInitialElement()),100),this.renderer.addClass(this.document.body,"cds--body--with-modal-open")):open.currentValue?this.trigger&&this.trigger.focus():this.renderer.removeClass(this.document.body,"cds--body--with-modal-open"))}ngAfterViewInit(){this.focusInitialElement()}handleKeyboardEvent(event){switch(event.key){case"Escape":event.stopImmediatePropagation(),this.open=!1,this.close.emit(),this.modalService.destroy();break;case"Tab":(0,tab_service.nW)(event,this.modal.nativeElement)}}get shouldShowScrollbar(){const modalContent=this.modal?this.modal.nativeElement.querySelector(".cds--modal-content"):null;if(modalContent){const modalContentHeight=Math.ceil(modalContent.getBoundingClientRect().height);return modalContent.scrollHeight>modalContentHeight}return!1}ngOnDestroy(){this.renderer.removeClass(this.document.body,"cds--body--with-modal-open")}focusInitialElement(){const primaryFocusElement=this.modal.nativeElement.querySelector(this.selectorPrimaryFocus);primaryFocusElement&&primaryFocusElement.focus?setTimeout((()=>primaryFocusElement.focus())):(0,tab_service.ZW)(this.modal.nativeElement).length>0?setTimeout((()=>(0,tab_service.ZW)(this.modal.nativeElement)[0].focus())):setTimeout((()=>this.modal.nativeElement.focus()))}};Modal.ctorParameters=()=>[{type:BaseModalService},{type:Document,decorators:[{type:core.Inject,args:[common.DOCUMENT]}]},{type:core.Renderer2}],Modal.propDecorators={size:[{type:core.Input}],theme:[{type:core.Input}],ariaLabel:[{type:core.Input}],open:[{type:core.Input}],trigger:[{type:core.Input}],hasScrollingContent:[{type:core.Input}],overlaySelected:[{type:core.Output}],close:[{type:core.Output}],modal:[{type:core.ViewChild,args:["modal",{static:!0}]}],handleKeyboardEvent:[{type:core.HostListener,args:["keydown",["$event"]]}]},Modal=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-modal, ibm-modal",template:'\n\t\t<cds-overlay\n\t\t\t[theme]="theme"\n\t\t\t[open]="open"\n\t\t\t(overlaySelect)="overlaySelected.emit()">\n\t\t\t<div\n\t\t\t\tclass="cds--modal-container"\n\t\t\t\t[ngClass]="{\n\t\t\t\t\t\'cds--modal-container--xs\': size === \'xs\',\n\t\t\t\t\t\'cds--modal-container--sm\': size === \'sm\',\n\t\t\t\t\t\'cds--modal-container--md\': size === \'md\',\n\t\t\t\t\t\'cds--modal-container--lg\': size === \'lg\'\n\t\t\t\t}"\n\t\t\t\trole="dialog"\n\t\t\t\taria-modal="true"\n\t\t\t\tstyle="z-index:1;"\n\t\t\t\t[attr.aria-label]="ariaLabel"\n\t\t\t\t#modal>\n\t\t\t\t<ng-content></ng-content>\n\t\t\t\t<div\n\t\t\t\t\t*ngIf="hasScrollingContent !== null ? hasScrollingContent : shouldShowScrollbar"\n\t\t\t\t\tclass="cds--modal-content--overflow-indicator">\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</cds-overlay>\n\t'})],Modal);let ModalService=class ModalService extends BaseModalService{constructor(placeholderService){super(placeholderService),this.placeholderService=placeholderService}show(data){return this.create({component:AlertModal,inputs:{type:data.type,label:data.label,title:data.title,content:data.content,hasScrollingContent:void 0!==data.hasScrollingContent?data.hasScrollingContent:null,size:data.size,buttons:data.buttons||[],close:data.close||(()=>{}),showCloseButton:data.showCloseButton}})}};ModalService.ctorParameters=()=>[{type:placeholder.Q_}],ModalService=(0,tslib_es6.gn)([(0,core.Injectable)()],ModalService);let Overlay=class Overlay{constructor(){this.theme="default",this.open=!1,this.overlaySelect=new core.EventEmitter}overlayClick(event){event.target===this.overlay.nativeElement&&(event.stopPropagation(),this.overlaySelect.emit(event))}};Overlay.propDecorators={theme:[{type:core.Input}],open:[{type:core.Input}],overlaySelect:[{type:core.Output}],overlay:[{type:core.ViewChild,args:["overlay",{static:!0}]}]},Overlay=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-overlay, ibm-overlay",template:"\n\t\t<section\n\t\t\tclass=\"cds--modal cds--modal-tall\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--modal--danger': theme === 'danger',\n\t\t\t\t'is-visible': open\n\t\t\t}\"\n\t\t\t(click)=\"overlayClick($event)\"\n\t\t\t#overlay>\n\t\t\t<ng-content></ng-content>\n\t\t</section>\n\t"})],Overlay);var src_forms=__webpack_require__("./src/forms/index.ts"),experimental=__webpack_require__("./src/experimental/index.ts");let ModalContent=class ModalContent{constructor(){this.modalContentClass=!0,this.hasForm=!1}};ModalContent.propDecorators={modalContentClass:[{type:core.HostBinding,args:["class.cds--modal-content"]}],hasForm:[{type:core.HostBinding,args:["class.cds--modal-content--with-form"]},{type:core.Input}]},ModalContent=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsModalContent], [ibmModalContent]"})],ModalContent);let ModalContentText=class ModalContentText{constructor(){this.modalContentTextClass=!0}};ModalContentText.propDecorators={modalContentTextClass:[{type:core.HostBinding,args:["class.cds--modal-content__text"]}]},ModalContentText=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsModalContentText], [ibmModalContentText]"})],ModalContentText);let ModalHeaderHeading=class ModalHeaderHeading{constructor(){this.modalHeaderHeadingClass=!0}};ModalHeaderHeading.propDecorators={modalHeaderHeadingClass:[{type:core.HostBinding,args:["class.cds--modal-header__heading"]}]},ModalHeaderHeading=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsModalHeaderHeading], [ibmModalHeaderHeading]"})],ModalHeaderHeading);let ModalHeaderLabel=class ModalHeaderLabel{constructor(){this.modalHeaderLabelClass=!0}};ModalHeaderLabel.propDecorators={modalHeaderLabelClass:[{type:core.HostBinding,args:["class.cds--modal-header__label"]}]},ModalHeaderLabel=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsModalHeaderLabel], [ibmModalHeaderLabel]"})],ModalHeaderLabel);var icon=__webpack_require__("./src/icon/index.ts");let ModalModule=class ModalModule{};ModalModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[AlertModal,Modal,ModalHeader,ModalFooter,Overlay,ModalContent,ModalContentText,ModalHeaderHeading,ModalHeaderLabel,BaseModal],exports:[AlertModal,Modal,ModalHeader,ModalFooter,ModalContent,ModalContentText,ModalHeaderHeading,ModalHeaderLabel,BaseModal],providers:[BaseModalService,ModalService],imports:[common.CommonModule,src_forms.hJ,i18n.LU,placeholder.Qq,experimental.OV,icon.QX]})],ModalModule)}}]);
+"use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[3931],{"./node_modules/@carbon/utils-position/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{var _a,PLACEMENTS;__webpack_require__.d(__webpack_exports__,{FK:()=>position,ZP:()=>__WEBPACK_DEFAULT_EXPORT__}),function(PLACEMENTS){PLACEMENTS.LEFT="left",PLACEMENTS.RIGHT="right",PLACEMENTS.TOP="top",PLACEMENTS.BOTTOM="bottom"}(PLACEMENTS||(PLACEMENTS={}));var defaultPositions=((_a={})[PLACEMENTS.LEFT]=function(referenceOffset,target,referenceRect){return{top:referenceOffset.top-Math.round(target.offsetHeight/2)+Math.round(referenceRect.height/2),left:Math.round(referenceOffset.left-target.offsetWidth)}},_a[PLACEMENTS.RIGHT]=function(referenceOffset,target,referenceRect){return{top:referenceOffset.top-Math.round(target.offsetHeight/2)+Math.round(referenceRect.height/2),left:Math.round(referenceOffset.left+referenceRect.width)}},_a[PLACEMENTS.TOP]=function(referenceOffset,target,referenceRect){return{top:Math.round(referenceOffset.top-target.offsetHeight),left:referenceOffset.left-Math.round(target.offsetWidth/2)+Math.round(referenceRect.width/2)}},_a[PLACEMENTS.BOTTOM]=function(referenceOffset,target,referenceRect){return{top:Math.round(referenceOffset.top+referenceRect.height),left:referenceOffset.left-Math.round(target.offsetWidth/2)+Math.round(referenceRect.width/2)}},_a),windowRef="undefined"!=typeof window?window:{innerHeight:0,scrollY:0,innerWidth:0,scrollX:0},Position=function(){function Position(positions){void 0===positions&&(positions={}),this.positions=defaultPositions,this.positions=Object.assign({},defaultPositions,positions)}return Position.prototype.getRelativeOffset=function(target){for(var offsets={left:target.offsetLeft,top:target.offsetTop};target.offsetParent&&"static"===getComputedStyle(target.offsetParent).position;)offsets.left+=target.offsetLeft,offsets.top+=target.offsetTop,target=target.offsetParent;return offsets},Position.prototype.getAbsoluteOffset=function(target){for(var currentNode=target,margins={top:0,left:0};currentNode.offsetParent;){var computed=getComputedStyle(currentNode.offsetParent);"static"===computed.position&&computed.marginLeft&&computed.marginTop&&(parseInt(computed.marginTop,10)&&(margins.top+=parseInt(computed.marginTop,10)),parseInt(computed.marginLeft,10)&&(margins.left+=parseInt(computed.marginLeft,10))),currentNode=currentNode.offsetParent}var targetRect=target.getBoundingClientRect(),relativeRect=document.body.getBoundingClientRect();return{top:targetRect.top-relativeRect.top+margins.top,left:targetRect.left-relativeRect.left+margins.left}},Position.prototype.findRelative=function(reference,target,placement){var referenceOffset=this.getRelativeOffset(reference),referenceRect=reference.getBoundingClientRect();return this.calculatePosition(referenceOffset,referenceRect,target,placement)},Position.prototype.findAbsolute=function(reference,target,placement){var referenceOffset=this.getAbsoluteOffset(reference),referenceRect=reference.getBoundingClientRect();return this.calculatePosition(referenceOffset,referenceRect,target,placement)},Position.prototype.findPosition=function(reference,target,placement,offsetFunction){void 0===offsetFunction&&(offsetFunction=this.getAbsoluteOffset.bind(this));var referenceOffset=offsetFunction(reference),referenceRect=reference.getBoundingClientRect();return this.calculatePosition(referenceOffset,referenceRect,target,placement)},Position.prototype.findPositionAt=function(offset,target,placement){return this.calculatePosition(offset,{top:0,left:0,height:0,width:0},target,placement)},Position.prototype.getPlacementBox=function(target,position){var targetBottom=target.offsetHeight+position.top,targetRight=target.offsetWidth+position.left;return{top:position.top,bottom:targetBottom,left:position.left,right:targetRight}},Position.prototype.addOffset=function(position,top,left){return void 0===top&&(top=0),void 0===left&&(left=0),Object.assign({},position,{top:position.top+top,left:position.left+left})},Position.prototype.setElement=function(element,position){element.style.top=position.top+"px",element.style.left=position.left+"px"},Position.prototype.findBestPlacement=function(reference,target,placements,containerFunction,positionFunction){var _this=this;void 0===containerFunction&&(containerFunction=this.defaultContainerFunction.bind(this)),void 0===positionFunction&&(positionFunction=this.findPosition.bind(this));var weightedPlacements=placements.map((function(placement){var pos=positionFunction(reference,target,placement),box=_this.getPlacementBox(target,pos),hiddenHeight=0,hiddenWidth=0,container=containerFunction();box.top<container.top?hiddenHeight=container.top-box.top:box.bottom>container.height&&(hiddenHeight=box.bottom-container.height),box.left<container.left?hiddenWidth=container.left-box.left:box.right>container.width&&(hiddenWidth=box.right-container.width),hiddenHeight&&!hiddenWidth?hiddenWidth=1:hiddenWidth&&!hiddenHeight&&(hiddenHeight=1);var area=target.offsetHeight*target.offsetWidth;return{placement,weight:(area-hiddenHeight*hiddenWidth)/area}}));return weightedPlacements.sort((function(a,b){return b.weight-a.weight})),weightedPlacements[0].placement},Position.prototype.findBestPlacementAt=function(offset,target,placements,containerFunction){var _this=this;void 0===containerFunction&&(containerFunction=this.defaultContainerFunction.bind(this));return this.findBestPlacement(null,target,placements,containerFunction,(function(_,target,placement){return _this.findPositionAt(offset,target,placement)}))},Position.prototype.defaultContainerFunction=function(){return{top:0,left:0,height:windowRef.innerHeight,width:windowRef.innerWidth}},Position.prototype.calculatePosition=function(referenceOffset,referenceRect,target,placement){return this.positions[placement]?this.positions[placement](referenceOffset,target,referenceRect):(console.error("No function found for placement, defaulting to 0,0"),{left:0,top:0})},Position}(),position=new Position;const __WEBPACK_DEFAULT_EXPORT__=Position},"./src/modal/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{IX:()=>BaseModal,JF:()=>ModalButtonType,zk:()=>ModalModule,Z7:()=>ModalService});var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs");let BaseModal=class BaseModal{constructor(){this.close=new core.EventEmitter,this.open=!1}closeModal(){this.close.emit()}};BaseModal.propDecorators={close:[{type:core.Output}],open:[{type:core.Input}]},BaseModal=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsBaseModal], [ibmBaseModal]"})],BaseModal);let AlertModal=class AlertModal extends BaseModal{constructor(type="default",label,title,content,size,hasScrollingContent=null,buttons=[],onClose,showCloseButton=!0){super(),this.type=type,this.label=label,this.title=title,this.content=content,this.size=size,this.hasScrollingContent=hasScrollingContent,this.buttons=buttons,this.onClose=onClose,this.showCloseButton=showCloseButton;for(let i=0;i<this.buttons.length;i++){const button=this.buttons[i];button.id||(button.id=`alert-modal-button-${i}`),button.type||(button.type="secondary")}}ngAfterViewInit(){if(!this.modalContent)return!1;const element=this.modalContent.nativeElement;element.scrollHeight>element.clientHeight?element.tabIndex=0:element.tabIndex=-1}buttonClicked(buttonIndex){const button=this.buttons[buttonIndex];button.click&&button.click(),this.closeModal()}dismissModal(trigger){this.onClose&&!1===this.onClose(trigger)||this.closeModal()}};var AlertModalType,ModalButtonType;AlertModal.ctorParameters=()=>[{type:void 0,decorators:[{type:core.Optional},{type:core.Inject,args:["type"]}]},{type:String,decorators:[{type:core.Optional},{type:core.Inject,args:["label"]}]},{type:String,decorators:[{type:core.Optional},{type:core.Inject,args:["title"]}]},{type:String,decorators:[{type:core.Optional},{type:core.Inject,args:["content"]}]},{type:String,decorators:[{type:core.Optional},{type:core.Inject,args:["size"]}]},{type:Boolean,decorators:[{type:core.Optional},{type:core.Inject,args:["hasScrollingContent"]}]},{type:void 0,decorators:[{type:core.Optional},{type:core.Inject,args:["buttons"]}]},{type:Function,decorators:[{type:core.Optional},{type:core.Inject,args:["close"]}]},{type:void 0,decorators:[{type:core.Optional},{type:core.Inject,args:["showCloseButton"]}]}],AlertModal.propDecorators={modalContent:[{type:core.ViewChild,args:["modalContent",{static:!0}]}]},AlertModal=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-alert-modal, ibm-alert-modal",template:'\n\t\t<cds-modal\n\t\t\t[size]="size"\n\t\t\t[theme]="type"\n\t\t\t[ariaLabel]="title"\n\t\t\t[hasScrollingContent]="hasScrollingContent"\n\t\t\t[open]="open"\n\t\t\t(overlaySelected)="dismissModal(\'overlay\')">\n\t\t\t<cds-modal-header (closeSelect)="dismissModal(\'close\')" [showCloseButton]="showCloseButton">\n\t\t\t\t<p cdsModalHeaderLabel class="cds--type-delta">{{label}}</p>\n\t\t\t\t<p cdsModalHeaderHeading class="cds--type-beta">{{title}}</p>\n\t\t\t</cds-modal-header>\n\t\t\t<div cdsModalContent #modalContent>\n\t\t\t\t<p [innerHTML]="content"></p>\n\t\t\t</div>\n\t\t\t<cds-modal-footer *ngIf="buttons.length > 0">\n\t\t\t\t<ng-container *ngFor="let button of buttons; let i = index">\n\t\t\t\t\t<button\n\t\t\t\t\t\t[cdsButton]="button.type"\n\t\t\t\t\t\t(click)="buttonClicked(i)"\n\t\t\t\t\t\t[id]="button.id"\n\t\t\t\t\t\t[attr.modal-primary-focus]="(button.type.indexOf(\'primary\') !== -1 ? \'\' : null)">\n\t\t\t\t\t\t{{button.text}}\n\t\t\t\t\t</button>\n\t\t\t\t</ng-container>\n\t\t\t</cds-modal-footer>\n\t\t</cds-modal>\n\t'})],AlertModal),function(AlertModalType){AlertModalType.default="default",AlertModalType.danger="danger"}(AlertModalType||(AlertModalType={})),function(ModalButtonType){ModalButtonType.primary="primary",ModalButtonType.secondary="secondary",ModalButtonType.tertiary="tertiary",ModalButtonType.ghost="ghost",ModalButtonType.danger="danger",ModalButtonType.danger_primary="danger--primary"}(ModalButtonType||(ModalButtonType={}));let ModalFooter=class ModalFooter{};ModalFooter=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-modal-footer, ibm-modal-footer",template:'\n\t\t<footer class="cds--modal-footer">\n\t\t\t<ng-content></ng-content>\n\t\t</footer>\n\t'})],ModalFooter);var i18n=__webpack_require__("./src/i18n/index.ts");let ModalHeader=class ModalHeader{constructor(i18n){this.i18n=i18n,this.theme="default",this.closeLabel=this.i18n.get().MODAL.CLOSE,this.showCloseButton=!0,this.closeSelect=new core.EventEmitter,this.buttonNgClass={"cds--modal-close":!0},this.buttonAttributes={"aria-label":this.i18n.get().MODAL.CLOSE}}onClose(){this.closeSelect.emit()}};ModalHeader.ctorParameters=()=>[{type:i18n.oc}],ModalHeader.propDecorators={theme:[{type:core.Input}],closeLabel:[{type:core.Input}],showCloseButton:[{type:core.Input}],closeSelect:[{type:core.Output}]},ModalHeader=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-modal-header, ibm-modal-header",template:'\n\t\t<header class="cds--modal-header {{theme}}">\n\t\t\t<ng-content></ng-content>\n\t\t\t<div class="cds--modal-close-button">\n\t\t\t\t<cds-icon-button\n\t\t\t\t\t*ngIf="showCloseButton"\n\t\t\t\t\ttype="button"\n\t\t\t\t\t[buttonNgClass]="buttonNgClass"\n\t\t\t\t\t[buttonAttributes]="buttonAttributes"\n\t\t\t\t\talign="left"\n\t\t\t\t\t[description]="closeLabel"\n\t\t\t\t\t(click)="onClose()">\n\t\t\t\t\t<svg cdsIcon="close" size="20" class="cds--modal-close__icon"></svg>\n\t\t\t\t</cds-icon-button>\n\t\t\t</div>\n\t\t</header>\n\n\t'})],ModalHeader);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs"),tab_service=__webpack_require__("./src/common/tab.service.ts"),placeholder=__webpack_require__("./src/placeholder/index.ts"),tap=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/operators/tap.js"),delay=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/operators/delay.js");let BaseModalService=class BaseModalService{constructor(placeholderService){this.placeholderService=placeholderService}create(data){data=Object.assign({},{inputs:{}},data);const inputProviders=Object.keys(data.inputs).map((inputName=>({provide:inputName,useValue:data.inputs[inputName]}))),injector=core.Injector.create({providers:inputProviders}),component=this.placeholderService.createComponent(data.component,injector);let focusedElement=document.activeElement;return setTimeout((()=>{component.instance.open=!0})),component.previouslyFocusedElement=focusedElement,component.instance.close.pipe((0,tap.b)((()=>{component.instance.open=!1})),(0,delay.g)(240)).subscribe((()=>{this.placeholderService.destroyComponent(component),BaseModalService.modalList=BaseModalService.modalList.filter((c=>c!==component))})),component.onDestroy((()=>{focusedElement.focus()})),BaseModalService.modalList.push(component),component}destroy(index=-1){index>=BaseModalService.modalList.length||0===BaseModalService.modalList.length||(index<0&&(index=BaseModalService.modalList.length-1),setTimeout((()=>{BaseModalService.modalList[index]&&(this.placeholderService.destroyComponent(BaseModalService.modalList[index]),BaseModalService.modalList.splice(index,1))}),240))}};BaseModalService.modalList=[],BaseModalService.ctorParameters=()=>[{type:placeholder.Q_}],BaseModalService=(0,tslib_es6.gn)([(0,core.Injectable)()],BaseModalService);let Modal=class Modal{constructor(modalService,document,renderer){this.modalService=modalService,this.document=document,this.renderer=renderer,this.size="md",this.theme="default",this.ariaLabel="default",this.open=!1,this.hasScrollingContent=null,this.overlaySelected=new core.EventEmitter,this.close=new core.EventEmitter,this.selectorPrimaryFocus="[modal-primary-focus]"}ngOnChanges({open,hasScrollingContent}){open&&(open.currentValue?(setTimeout((()=>this.focusInitialElement()),100),this.renderer.addClass(this.document.body,"cds--body--with-modal-open")):open.currentValue?this.trigger&&this.trigger.focus():this.renderer.removeClass(this.document.body,"cds--body--with-modal-open")),hasScrollingContent&&this.updateScrollbar()}ngAfterViewInit(){this.focusInitialElement(),this.updateScrollbar()}handleKeyboardEvent(event){switch(event.key){case"Escape":event.stopImmediatePropagation(),this.open=!1,this.close.emit(),this.modalService.destroy();break;case"Tab":(0,tab_service.nW)(event,this.modal.nativeElement)}}get shouldShowScrollbar(){const modalContent=this.modal?this.modal.nativeElement.querySelector(".cds--modal-content"):null;if(modalContent){const modalContentHeight=Math.ceil(modalContent.getBoundingClientRect().height);return modalContent.scrollHeight>modalContentHeight}return!1}ngOnDestroy(){this.renderer.removeClass(this.document.body,"cds--body--with-modal-open")}focusInitialElement(){const primaryFocusElement=this.modal.nativeElement.querySelector(this.selectorPrimaryFocus);primaryFocusElement&&primaryFocusElement.focus?setTimeout((()=>primaryFocusElement.focus())):(0,tab_service.ZW)(this.modal.nativeElement).length>0?setTimeout((()=>(0,tab_service.ZW)(this.modal.nativeElement)[0].focus())):setTimeout((()=>this.modal.nativeElement.focus()))}updateScrollbar(){const modalContent=this.modal?this.modal.nativeElement.querySelector(".cds--modal-content"):null,showScrollbar=null!==this.hasScrollingContent?this.hasScrollingContent:this.shouldShowScrollbar;modalContent&&(showScrollbar?this.renderer.addClass(modalContent,"cds--modal-scroll-content"):this.renderer.removeClass(modalContent,"cds--modal-scroll-content"))}};Modal.ctorParameters=()=>[{type:BaseModalService},{type:Document,decorators:[{type:core.Inject,args:[common.DOCUMENT]}]},{type:core.Renderer2}],Modal.propDecorators={size:[{type:core.Input}],theme:[{type:core.Input}],ariaLabel:[{type:core.Input}],open:[{type:core.Input}],trigger:[{type:core.Input}],hasScrollingContent:[{type:core.Input}],overlaySelected:[{type:core.Output}],close:[{type:core.Output}],modal:[{type:core.ViewChild,args:["modal",{static:!0}]}],handleKeyboardEvent:[{type:core.HostListener,args:["keydown",["$event"]]}]},Modal=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-modal, ibm-modal",template:'\n\t\t<cds-overlay\n\t\t\t[theme]="theme"\n\t\t\t[open]="open"\n\t\t\t(overlaySelect)="overlaySelected.emit()">\n\t\t\t<div\n\t\t\t\tclass="cds--modal-container"\n\t\t\t\t[ngClass]="{\n\t\t\t\t\t\'cds--modal-container--xs\': size === \'xs\',\n\t\t\t\t\t\'cds--modal-container--sm\': size === \'sm\',\n\t\t\t\t\t\'cds--modal-container--md\': size === \'md\',\n\t\t\t\t\t\'cds--modal-container--lg\': size === \'lg\'\n\t\t\t\t}"\n\t\t\t\trole="dialog"\n\t\t\t\taria-modal="true"\n\t\t\t\tstyle="z-index:1;"\n\t\t\t\t[attr.aria-label]="ariaLabel"\n\t\t\t\t#modal>\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</div>\n\t\t</cds-overlay>\n\t'})],Modal);let ModalService=class ModalService extends BaseModalService{constructor(placeholderService){super(placeholderService),this.placeholderService=placeholderService}show(data){return this.create({component:AlertModal,inputs:{type:data.type,label:data.label,title:data.title,content:data.content,hasScrollingContent:void 0!==data.hasScrollingContent?data.hasScrollingContent:null,size:data.size,buttons:data.buttons||[],close:data.close||(()=>{}),showCloseButton:data.showCloseButton}})}};ModalService.ctorParameters=()=>[{type:placeholder.Q_}],ModalService=(0,tslib_es6.gn)([(0,core.Injectable)()],ModalService);let Overlay=class Overlay{constructor(){this.theme="default",this.open=!1,this.overlaySelect=new core.EventEmitter}overlayClick(event){event.target===this.overlay.nativeElement&&(event.stopPropagation(),this.overlaySelect.emit(event))}};Overlay.propDecorators={theme:[{type:core.Input}],open:[{type:core.Input}],overlaySelect:[{type:core.Output}],overlay:[{type:core.ViewChild,args:["overlay",{static:!0}]}]},Overlay=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-overlay, ibm-overlay",template:"\n\t\t<section\n\t\t\tclass=\"cds--modal cds--modal-tall\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--modal--danger': theme === 'danger',\n\t\t\t\t'is-visible': open\n\t\t\t}\"\n\t\t\t(click)=\"overlayClick($event)\"\n\t\t\t#overlay>\n\t\t\t<ng-content></ng-content>\n\t\t</section>\n\t"})],Overlay);var src_forms=__webpack_require__("./src/forms/index.ts"),experimental=__webpack_require__("./src/experimental/index.ts");let ModalContent=class ModalContent{constructor(){this.modalContentClass=!0,this.hasForm=!1}};ModalContent.propDecorators={modalContentClass:[{type:core.HostBinding,args:["class.cds--modal-content"]}],hasForm:[{type:core.HostBinding,args:["class.cds--modal-content--with-form"]},{type:core.Input}]},ModalContent=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsModalContent], [ibmModalContent]"})],ModalContent);let ModalContentText=class ModalContentText{constructor(){this.modalContentTextClass=!0}};ModalContentText.propDecorators={modalContentTextClass:[{type:core.HostBinding,args:["class.cds--modal-content__text"]}]},ModalContentText=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsModalContentText], [ibmModalContentText]"})],ModalContentText);let ModalHeaderHeading=class ModalHeaderHeading{constructor(){this.modalHeaderHeadingClass=!0}};ModalHeaderHeading.propDecorators={modalHeaderHeadingClass:[{type:core.HostBinding,args:["class.cds--modal-header__heading"]}]},ModalHeaderHeading=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsModalHeaderHeading], [ibmModalHeaderHeading]"})],ModalHeaderHeading);let ModalHeaderLabel=class ModalHeaderLabel{constructor(){this.modalHeaderLabelClass=!0}};ModalHeaderLabel.propDecorators={modalHeaderLabelClass:[{type:core.HostBinding,args:["class.cds--modal-header__label"]}]},ModalHeaderLabel=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsModalHeaderLabel], [ibmModalHeaderLabel]"})],ModalHeaderLabel);var icon=__webpack_require__("./src/icon/index.ts");let ModalModule=class ModalModule{};ModalModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[AlertModal,Modal,ModalHeader,ModalFooter,Overlay,ModalContent,ModalContentText,ModalHeaderHeading,ModalHeaderLabel,BaseModal],exports:[AlertModal,Modal,ModalHeader,ModalFooter,ModalContent,ModalContentText,ModalHeaderHeading,ModalHeaderLabel,BaseModal],providers:[BaseModalService,ModalService],imports:[common.CommonModule,src_forms.hJ,i18n.LU,placeholder.Qq,experimental.OV,icon.QX]})],ModalModule)}}]);

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.28549df7.iframe.bundle.js';
+      import './runtime~main.f922d628.iframe.bundle.js';
       
       import './5478.5fc19af5.iframe.bundle.js';
       
-      import './main.d2da63e8.iframe.bundle.js';</script></body></html>
+      import './main.d8d08a11.iframe.bundle.js';</script></body></html>