@skyux/popovers 8.7.2 → 9.0.0-alpha.1

package/documentation.json

@@ -6489,34 +6489,29 @@
   },
   "codeExamples": [
     {
-      "fileName": "dropdown-demo-item.ts",
-      "filePath": "/projects/popovers/documentation/code-examples/dropdown/basic/dropdown-demo-item.ts",
-      "rawContents": "export interface DropdownDemoItem {\n  name: string;\n  disabled: boolean;\n}\n"
-    },
-    {
-      "fileName": "dropdown-demo.component.html",
-      "filePath": "/projects/popovers/documentation/code-examples/dropdown/basic/dropdown-demo.component.html",
-      "rawContents": "<sky-dropdown data-sky-id=\"dropdown-demo\">\n  <sky-dropdown-button> Show dropdown </sky-dropdown-button>\n  <sky-dropdown-menu>\n    <sky-dropdown-item *ngFor=\"let item of items\">\n      <button\n        type=\"button\"\n        [attr.disabled]=\"item.disabled ? '' : null\"\n        (click)=\"actionClicked(item.name)\"\n      >\n        {{ item.name }}\n      </button>\n    </sky-dropdown-item>\n  </sky-dropdown-menu>\n</sky-dropdown>\n"
+      "fileName": "popover-demo.module.ts",
+      "filePath": "/projects/popovers/documentation/code-examples/popover/programmatic/popover-demo.module.ts",
+      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyHelpInlineModule } from '@skyux/indicators';\nimport { SkyPopoverModule } from '@skyux/popovers';\n\nimport { PopoverDemoComponent } from './popover-demo.component';\n\n@NgModule({\n  imports: [CommonModule, SkyHelpInlineModule, SkyPopoverModule],\n  declarations: [PopoverDemoComponent],\n  exports: [PopoverDemoComponent],\n})\nexport class PopoverDemoModule {}\n"
     },
     {
-      "fileName": "dropdown-demo.component.spec.ts",
-      "filePath": "/projects/popovers/documentation/code-examples/dropdown/basic/dropdown-demo.component.spec.ts",
-      "rawContents": "import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';\nimport { ComponentFixture, TestBed } from '@angular/core/testing';\nimport { expect } from '@skyux-sdk/testing';\nimport { SkyDropdownHarness } from '@skyux/popovers/testing';\n\nimport { DropdownDemoComponent } from './dropdown-demo.component';\nimport { DropdownDemoModule } from './dropdown-demo.module';\n\ndescribe('Basic dropdown', () => {\n  async function setupTest(): Promise<{\n    dropdownHarness: SkyDropdownHarness;\n    fixture: ComponentFixture<DropdownDemoComponent>;\n  }> {\n    const fixture = TestBed.createComponent(DropdownDemoComponent);\n    const loader = TestbedHarnessEnvironment.documentRootLoader(fixture);\n    const dropdownHarness = await loader.getHarness(\n      SkyDropdownHarness.with({\n        dataSkyId: 'dropdown-demo',\n      })\n    );\n\n    return { dropdownHarness, fixture };\n  }\n\n  beforeEach(() => {\n    TestBed.configureTestingModule({\n      imports: [DropdownDemoModule],\n    });\n  });\n\n  it('should display the correct dropdown', async () => {\n    const { dropdownHarness, fixture } = await setupTest();\n\n    fixture.detectChanges();\n\n    await expectAsync(dropdownHarness.getButtonStyle()).toBeResolvedTo(\n      'default'\n    );\n    await expectAsync(dropdownHarness.getButtonType()).toBeResolvedTo('select');\n    await expectAsync(dropdownHarness.isDisabled()).toBeResolvedTo(false);\n    await expectAsync(dropdownHarness.getAriaLabel()).toBeResolvedTo(\n      'Context menu'\n    );\n    await expectAsync(dropdownHarness.getTitle()).toBeResolvedTo(null);\n    await expectAsync(dropdownHarness.isOpen()).toBeResolvedTo(false);\n  });\n\n  it('should open the correct dropdown menu', async () => {\n    const { dropdownHarness, fixture } = await setupTest();\n\n    fixture.detectChanges();\n    await dropdownHarness.clickDropdownButton();\n    fixture.detectChanges();\n\n    const dropdownMenu = await dropdownHarness.getDropdownMenu();\n    const dropdownMenuItems = await dropdownMenu.getItems();\n\n    await expectAsync(dropdownHarness.isOpen()).toBeResolvedTo(true);\n    await expectAsync(dropdownMenu.getAriaRole()).toBeResolvedTo('menu');\n\n    await expectAsync(dropdownMenuItems?.[0].getText()).toBeResolvedTo(\n      'Option 1'\n    );\n  });\n\n  it('should click the correct dropdown menu item', async () => {\n    const { dropdownHarness, fixture } = await setupTest();\n\n    const clickSpy = spyOn(fixture.componentInstance, 'actionClicked');\n    fixture.detectChanges();\n    await dropdownHarness.clickDropdownButton();\n    fixture.detectChanges();\n\n    const dropdownMenu = await dropdownHarness.getDropdownMenu();\n    const dropdownMenuItem = await dropdownMenu.getItem({ text: 'Option 1' });\n\n    await dropdownMenuItem?.click();\n\n    expect(clickSpy).toHaveBeenCalledWith('Option 1');\n  });\n});\n"
+      "fileName": "popover-demo.component.ts",
+      "filePath": "/projects/popovers/documentation/code-examples/popover/programmatic/popover-demo.component.ts",
+      "rawContents": "import { Component } from '@angular/core';\nimport { SkyPopoverMessage, SkyPopoverMessageType } from '@skyux/popovers';\n\nimport { Subject } from 'rxjs';\n\n@Component({\n  selector: 'app-popover-demo',\n  templateUrl: './popover-demo.component.html',\n})\nexport class PopoverDemoComponent {\n  public popoverController = new Subject<SkyPopoverMessage>();\n\n  #popoverOpen = false;\n\n  public onPopoverStateChange(isOpen: boolean): void {\n    this.#popoverOpen = isOpen;\n  }\n\n  public openPopover(): void {\n    if (!this.#popoverOpen) {\n      this.#sendMessage(SkyPopoverMessageType.Open);\n    }\n  }\n\n  #sendMessage(type: SkyPopoverMessageType): void {\n    const message: SkyPopoverMessage = { type };\n    this.popoverController.next(message);\n  }\n}\n"
     },
     {
-      "fileName": "dropdown-demo.component.ts",
-      "filePath": "/projects/popovers/documentation/code-examples/dropdown/basic/dropdown-demo.component.ts",
-      "rawContents": "import { Component } from '@angular/core';\n\nimport { DropdownDemoItem } from './dropdown-demo-item';\n\n@Component({\n  selector: 'app-dropdown-demo',\n  templateUrl: './dropdown-demo.component.html',\n})\nexport class DropdownDemoComponent {\n  public items: DropdownDemoItem[] = [\n    { name: 'Option 1', disabled: false },\n    { name: 'Disabled option', disabled: true },\n    { name: 'Option 3', disabled: false },\n    { name: 'Option 4', disabled: false },\n    { name: 'Option 5', disabled: false },\n  ];\n\n  public actionClicked(action: string): void {\n    alert(`You selected ${action}.`);\n  }\n}\n"
+      "fileName": "popover-demo.component.html",
+      "filePath": "/projects/popovers/documentation/code-examples/popover/programmatic/popover-demo.component.html",
+      "rawContents": "<sky-help-inline\n  [skyPopover]=\"myPopover\"\n  [skyPopoverMessageStream]=\"popoverController\"\n></sky-help-inline>\n\n<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"openPopover()\"\n>\n  Open popover with message stream\n</button>\n\n<sky-popover\n  #myPopover\n  (popoverClosed)=\"onPopoverStateChange(false)\"\n  (popoverOpened)=\"onPopoverStateChange(true)\"\n>\n  This is a popover.\n</sky-popover>\n"
     },
     {
-      "fileName": "dropdown-demo.module.ts",
-      "filePath": "/projects/popovers/documentation/code-examples/dropdown/basic/dropdown-demo.module.ts",
-      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyDropdownModule } from '@skyux/popovers';\n\nimport { DropdownDemoComponent } from './dropdown-demo.component';\n\n@NgModule({\n  imports: [CommonModule, SkyDropdownModule],\n  exports: [DropdownDemoComponent],\n  declarations: [DropdownDemoComponent],\n})\nexport class DropdownDemoModule {}\n"
+      "fileName": "popover-demo.module.ts",
+      "filePath": "/projects/popovers/documentation/code-examples/popover/basic/popover-demo.module.ts",
+      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyPopoverModule } from '@skyux/popovers';\n\nimport { PopoverDemoComponent } from './popover-demo.component';\n\n@NgModule({\n  imports: [CommonModule, SkyPopoverModule],\n  declarations: [PopoverDemoComponent],\n  exports: [PopoverDemoComponent],\n})\nexport class PopoverDemoModule {}\n"
     },
     {
-      "fileName": "popover-demo.component.html",
-      "filePath": "/projects/popovers/documentation/code-examples/popover/basic/popover-demo.component.html",
-      "rawContents": "<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  [skyPopover]=\"myPopover\"\n  [skyPopoverAlignment]=\"popoverAlignment\"\n  [skyPopoverPlacement]=\"popoverPlacement\"\n  data-sky-id=\"popover-demo\"\n>\n  Open popover on click\n</button>\n\n<button\n  class=\"sky-btn sky-btn-link\"\n  type=\"button\"\n  [skyPopover]=\"myPopover\"\n  skyPopoverTrigger=\"mouseenter\"\n>\n  Open popover on hover\n</button>\n\n<sky-popover\n  [dismissOnBlur]=\"dismissOnBlur\"\n  [popoverTitle]=\"popoverTitle\"\n  #myPopover\n>\n  {{ popoverBody }}\n</sky-popover>\n"
+      "fileName": "popover-demo.component.ts",
+      "filePath": "/projects/popovers/documentation/code-examples/popover/basic/popover-demo.component.ts",
+      "rawContents": "import { Component } from '@angular/core';\nimport { SkyPopoverAlignment, SkyPopoverPlacement } from '@skyux/popovers';\n\n@Component({\n  selector: 'app-popover-demo',\n  templateUrl: './popover-demo.component.html',\n})\nexport class PopoverDemoComponent {\n  public dismissOnBlur: boolean | undefined;\n  public popoverAlignment: SkyPopoverAlignment | undefined;\n  public popoverBody = 'This is a popover.';\n  public popoverPlacement: SkyPopoverPlacement | undefined;\n  public popoverTitle: string | undefined = 'Did you know?';\n}\n"
     },
     {
       "fileName": "popover-demo.component.spec.ts",
@@ -6524,29 +6519,34 @@
       "rawContents": "import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';\nimport { ComponentFixture, TestBed } from '@angular/core/testing';\nimport { NoopAnimationsModule } from '@angular/platform-browser/animations';\nimport { SkyPopoverAlignment, SkyPopoverPlacement } from '@skyux/popovers';\nimport { SkyPopoverHarness } from '@skyux/popovers/testing';\n\nimport { PopoverDemoComponent } from './popover-demo.component';\nimport { PopoverDemoModule } from './popover-demo.module';\n\ndescribe('Basic popover', () => {\n  async function setupTest(options?: {\n    titleText?: string;\n    alignment?: SkyPopoverAlignment;\n    placement?: SkyPopoverPlacement;\n    dismissOnBlur?: boolean;\n  }): Promise<{\n    popoverHarness: SkyPopoverHarness;\n    fixture: ComponentFixture<PopoverDemoComponent>;\n  }> {\n    const fixture = TestBed.createComponent(PopoverDemoComponent);\n    const loader = TestbedHarnessEnvironment.documentRootLoader(fixture);\n\n    if (options) {\n      fixture.componentInstance.popoverAlignment = options.alignment;\n      fixture.componentInstance.popoverPlacement = options.placement;\n      fixture.componentInstance.popoverTitle = options.titleText;\n      fixture.componentInstance.dismissOnBlur = options.dismissOnBlur;\n    }\n\n    fixture.detectChanges();\n    await fixture.whenStable();\n\n    const popoverHarness = await loader.getHarness(\n      SkyPopoverHarness.with({\n        dataSkyId: 'popover-demo',\n      })\n    );\n\n    return { popoverHarness, fixture };\n  }\n\n  beforeEach(() => {\n    TestBed.configureTestingModule({\n      imports: [PopoverDemoModule, NoopAnimationsModule],\n    });\n  });\n\n  it('should open and close when the user interacts with the trigger', async () => {\n    const { popoverHarness } = await setupTest();\n\n    await expectAsync(popoverHarness.isOpen()).toBeResolvedTo(false);\n\n    await popoverHarness.clickPopoverButton();\n    await expectAsync(popoverHarness.isOpen()).toBeResolvedTo(true);\n\n    await popoverHarness.clickPopoverButton();\n    await expectAsync(popoverHarness.isOpen()).toBeResolvedTo(false);\n  });\n\n  it('should expose content properties when visible', async () => {\n    const { popoverHarness } = await setupTest({\n      titleText: 'Did you know?',\n      placement: 'right',\n    });\n\n    await popoverHarness.clickPopoverButton();\n    const contentHarness = await popoverHarness.getPopoverContent();\n\n    await expectAsync(contentHarness.getTitleText()).toBeResolvedTo(\n      'Did you know?'\n    );\n    await expectAsync(contentHarness.getBodyText()).toBeResolvedTo(\n      'This is a popover.'\n    );\n    await expectAsync(contentHarness.getAlignment()).toBeResolvedTo('center');\n    await expectAsync(contentHarness.getPlacement()).toBeResolvedTo('right');\n\n    await popoverHarness.clickPopoverButton();\n    // Attempting to call this method when the popover is closed will result in an error.\n    await expectAsync(popoverHarness.getPopoverContent()).toBeRejectedWithError(\n      'Unable to retrieve the popover content because the popover is not open.'\n    );\n  });\n});\n"
     },
     {
-      "fileName": "popover-demo.component.ts",
-      "filePath": "/projects/popovers/documentation/code-examples/popover/basic/popover-demo.component.ts",
-      "rawContents": "import { Component } from '@angular/core';\nimport { SkyPopoverAlignment, SkyPopoverPlacement } from '@skyux/popovers';\n\n@Component({\n  selector: 'app-popover-demo',\n  templateUrl: './popover-demo.component.html',\n})\nexport class PopoverDemoComponent {\n  public dismissOnBlur: boolean | undefined;\n  public popoverAlignment: SkyPopoverAlignment | undefined;\n  public popoverBody = 'This is a popover.';\n  public popoverPlacement: SkyPopoverPlacement | undefined;\n  public popoverTitle: string | undefined = 'Did you know?';\n}\n"
+      "fileName": "popover-demo.component.html",
+      "filePath": "/projects/popovers/documentation/code-examples/popover/basic/popover-demo.component.html",
+      "rawContents": "<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  [skyPopover]=\"myPopover\"\n  [skyPopoverAlignment]=\"popoverAlignment\"\n  [skyPopoverPlacement]=\"popoverPlacement\"\n  data-sky-id=\"popover-demo\"\n>\n  Open popover on click\n</button>\n\n<button\n  class=\"sky-btn sky-btn-link\"\n  type=\"button\"\n  [skyPopover]=\"myPopover\"\n  skyPopoverTrigger=\"mouseenter\"\n>\n  Open popover on hover\n</button>\n\n<sky-popover\n  [dismissOnBlur]=\"dismissOnBlur\"\n  [popoverTitle]=\"popoverTitle\"\n  #myPopover\n>\n  {{ popoverBody }}\n</sky-popover>\n"
     },
     {
-      "fileName": "popover-demo.module.ts",
-      "filePath": "/projects/popovers/documentation/code-examples/popover/basic/popover-demo.module.ts",
-      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyPopoverModule } from '@skyux/popovers';\n\nimport { PopoverDemoComponent } from './popover-demo.component';\n\n@NgModule({\n  imports: [CommonModule, SkyPopoverModule],\n  declarations: [PopoverDemoComponent],\n  exports: [PopoverDemoComponent],\n})\nexport class PopoverDemoModule {}\n"
+      "fileName": "dropdown-demo.module.ts",
+      "filePath": "/projects/popovers/documentation/code-examples/dropdown/basic/dropdown-demo.module.ts",
+      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyDropdownModule } from '@skyux/popovers';\n\nimport { DropdownDemoComponent } from './dropdown-demo.component';\n\n@NgModule({\n  imports: [CommonModule, SkyDropdownModule],\n  exports: [DropdownDemoComponent],\n  declarations: [DropdownDemoComponent],\n})\nexport class DropdownDemoModule {}\n"
     },
     {
-      "fileName": "popover-demo.component.html",
-      "filePath": "/projects/popovers/documentation/code-examples/popover/programmatic/popover-demo.component.html",
-      "rawContents": "<sky-help-inline\n  [skyPopover]=\"myPopover\"\n  [skyPopoverMessageStream]=\"popoverController\"\n></sky-help-inline>\n\n<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"openPopover()\"\n>\n  Open popover with message stream\n</button>\n\n<sky-popover\n  #myPopover\n  (popoverClosed)=\"onPopoverStateChange(false)\"\n  (popoverOpened)=\"onPopoverStateChange(true)\"\n>\n  This is a popover.\n</sky-popover>\n"
+      "fileName": "dropdown-demo.component.ts",
+      "filePath": "/projects/popovers/documentation/code-examples/dropdown/basic/dropdown-demo.component.ts",
+      "rawContents": "import { Component } from '@angular/core';\n\nimport { DropdownDemoItem } from './dropdown-demo-item';\n\n@Component({\n  selector: 'app-dropdown-demo',\n  templateUrl: './dropdown-demo.component.html',\n})\nexport class DropdownDemoComponent {\n  public items: DropdownDemoItem[] = [\n    { name: 'Option 1', disabled: false },\n    { name: 'Disabled option', disabled: true },\n    { name: 'Option 3', disabled: false },\n    { name: 'Option 4', disabled: false },\n    { name: 'Option 5', disabled: false },\n  ];\n\n  public actionClicked(action: string): void {\n    alert(`You selected ${action}.`);\n  }\n}\n"
     },
     {
-      "fileName": "popover-demo.component.ts",
-      "filePath": "/projects/popovers/documentation/code-examples/popover/programmatic/popover-demo.component.ts",
-      "rawContents": "import { Component } from '@angular/core';\nimport { SkyPopoverMessage, SkyPopoverMessageType } from '@skyux/popovers';\n\nimport { Subject } from 'rxjs';\n\n@Component({\n  selector: 'app-popover-demo',\n  templateUrl: './popover-demo.component.html',\n})\nexport class PopoverDemoComponent {\n  public popoverController = new Subject<SkyPopoverMessage>();\n\n  #popoverOpen = false;\n\n  public onPopoverStateChange(isOpen: boolean): void {\n    this.#popoverOpen = isOpen;\n  }\n\n  public openPopover(): void {\n    if (!this.#popoverOpen) {\n      this.#sendMessage(SkyPopoverMessageType.Open);\n    }\n  }\n\n  #sendMessage(type: SkyPopoverMessageType): void {\n    const message: SkyPopoverMessage = { type };\n    this.popoverController.next(message);\n  }\n}\n"
+      "fileName": "dropdown-demo.component.spec.ts",
+      "filePath": "/projects/popovers/documentation/code-examples/dropdown/basic/dropdown-demo.component.spec.ts",
+      "rawContents": "import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';\nimport { ComponentFixture, TestBed } from '@angular/core/testing';\nimport { expect } from '@skyux-sdk/testing';\nimport { SkyDropdownHarness } from '@skyux/popovers/testing';\n\nimport { DropdownDemoComponent } from './dropdown-demo.component';\nimport { DropdownDemoModule } from './dropdown-demo.module';\n\ndescribe('Basic dropdown', () => {\n  async function setupTest(): Promise<{\n    dropdownHarness: SkyDropdownHarness;\n    fixture: ComponentFixture<DropdownDemoComponent>;\n  }> {\n    const fixture = TestBed.createComponent(DropdownDemoComponent);\n    const loader = TestbedHarnessEnvironment.documentRootLoader(fixture);\n    const dropdownHarness = await loader.getHarness(\n      SkyDropdownHarness.with({\n        dataSkyId: 'dropdown-demo',\n      })\n    );\n\n    return { dropdownHarness, fixture };\n  }\n\n  beforeEach(() => {\n    TestBed.configureTestingModule({\n      imports: [DropdownDemoModule],\n    });\n  });\n\n  it('should display the correct dropdown', async () => {\n    const { dropdownHarness, fixture } = await setupTest();\n\n    fixture.detectChanges();\n\n    await expectAsync(dropdownHarness.getButtonStyle()).toBeResolvedTo(\n      'default'\n    );\n    await expectAsync(dropdownHarness.getButtonType()).toBeResolvedTo('select');\n    await expectAsync(dropdownHarness.isDisabled()).toBeResolvedTo(false);\n    await expectAsync(dropdownHarness.getAriaLabel()).toBeResolvedTo(\n      'Context menu'\n    );\n    await expectAsync(dropdownHarness.getTitle()).toBeResolvedTo(null);\n    await expectAsync(dropdownHarness.isOpen()).toBeResolvedTo(false);\n  });\n\n  it('should open the correct dropdown menu', async () => {\n    const { dropdownHarness, fixture } = await setupTest();\n\n    fixture.detectChanges();\n    await dropdownHarness.clickDropdownButton();\n    fixture.detectChanges();\n\n    const dropdownMenu = await dropdownHarness.getDropdownMenu();\n    const dropdownMenuItems = await dropdownMenu.getItems();\n\n    await expectAsync(dropdownHarness.isOpen()).toBeResolvedTo(true);\n    await expectAsync(dropdownMenu.getAriaRole()).toBeResolvedTo('menu');\n\n    await expectAsync(dropdownMenuItems?.[0].getText()).toBeResolvedTo(\n      'Option 1'\n    );\n  });\n\n  it('should click the correct dropdown menu item', async () => {\n    const { dropdownHarness, fixture } = await setupTest();\n\n    const clickSpy = spyOn(fixture.componentInstance, 'actionClicked');\n    fixture.detectChanges();\n    await dropdownHarness.clickDropdownButton();\n    fixture.detectChanges();\n\n    const dropdownMenu = await dropdownHarness.getDropdownMenu();\n    const dropdownMenuItem = await dropdownMenu.getItem({ text: 'Option 1' });\n\n    await dropdownMenuItem?.click();\n\n    expect(clickSpy).toHaveBeenCalledWith('Option 1');\n  });\n});\n"
     },
     {
-      "fileName": "popover-demo.module.ts",
-      "filePath": "/projects/popovers/documentation/code-examples/popover/programmatic/popover-demo.module.ts",
-      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyHelpInlineModule } from '@skyux/indicators';\nimport { SkyPopoverModule } from '@skyux/popovers';\n\nimport { PopoverDemoComponent } from './popover-demo.component';\n\n@NgModule({\n  imports: [CommonModule, SkyHelpInlineModule, SkyPopoverModule],\n  declarations: [PopoverDemoComponent],\n  exports: [PopoverDemoComponent],\n})\nexport class PopoverDemoModule {}\n"
+      "fileName": "dropdown-demo.component.html",
+      "filePath": "/projects/popovers/documentation/code-examples/dropdown/basic/dropdown-demo.component.html",
+      "rawContents": "<sky-dropdown data-sky-id=\"dropdown-demo\">\n  <sky-dropdown-button> Show dropdown </sky-dropdown-button>\n  <sky-dropdown-menu>\n    <sky-dropdown-item *ngFor=\"let item of items\">\n      <button\n        type=\"button\"\n        [attr.disabled]=\"item.disabled ? '' : null\"\n        (click)=\"actionClicked(item.name)\"\n      >\n        {{ item.name }}\n      </button>\n    </sky-dropdown-item>\n  </sky-dropdown-menu>\n</sky-dropdown>\n"
+    },
+    {
+      "fileName": "dropdown-demo-item.ts",
+      "filePath": "/projects/popovers/documentation/code-examples/dropdown/basic/dropdown-demo-item.ts",
+      "rawContents": "export interface DropdownDemoItem {\n  name: string;\n  disabled: boolean;\n}\n"
     }
   ]
 }

package/{esm2020 → esm2022}/lib/modules/dropdown/dropdown-button.component.mjs

@@ -4,11 +4,11 @@ import * as i0 from "@angular/core";
  * Specifies the button for the dropdown menu.
  */
 export class SkyDropdownButtonComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDropdownButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyDropdownButtonComponent, selector: "sky-dropdown-button", ngImport: i0, template: "<ng-content></ng-content>\n" }); }
 }
-SkyDropdownButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyDropdownButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkyDropdownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SkyDropdownButtonComponent, selector: "sky-dropdown-button", ngImport: i0, template: "<ng-content></ng-content>\n" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyDropdownButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDropdownButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-dropdown-button', template: "<ng-content></ng-content>\n" }]
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJvcGRvd24tYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvY29tcG9uZW50cy9wb3BvdmVycy9zcmMvbGliL21vZHVsZXMvZHJvcGRvd24vZHJvcGRvd24tYnV0dG9uLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvY29tcG9uZW50cy9wb3BvdmVycy9zcmMvbGliL21vZHVsZXMvZHJvcGRvd24vZHJvcGRvd24tYnV0dG9uLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7O0FBRTFDOztHQUVHO0FBS0gsTUFBTSxPQUFPLDBCQUEwQjs7dUhBQTFCLDBCQUEwQjsyR0FBMUIsMEJBQTBCLDJEQ1R2Qyw2QkFDQTsyRkRRYSwwQkFBMEI7a0JBSnRDLFNBQVM7K0JBQ0UscUJBQXFCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbi8qKlxuICogU3BlY2lmaWVzIHRoZSBidXR0b24gZm9yIHRoZSBkcm9wZG93biBtZW51LlxuICovXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdza3ktZHJvcGRvd24tYnV0dG9uJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2Ryb3Bkb3duLWJ1dHRvbi5jb21wb25lbnQuaHRtbCcsXG59KVxuZXhwb3J0IGNsYXNzIFNreURyb3Bkb3duQnV0dG9uQ29tcG9uZW50IHt9XG4iLCI8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJvcGRvd24tYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvY29tcG9uZW50cy9wb3BvdmVycy9zcmMvbGliL21vZHVsZXMvZHJvcGRvd24vZHJvcGRvd24tYnV0dG9uLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvY29tcG9uZW50cy9wb3BvdmVycy9zcmMvbGliL21vZHVsZXMvZHJvcGRvd24vZHJvcGRvd24tYnV0dG9uLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7O0FBRTFDOztHQUVHO0FBS0gsTUFBTSxPQUFPLDBCQUEwQjs4R0FBMUIsMEJBQTBCO2tHQUExQiwwQkFBMEIsMkRDVHZDLDZCQUNBOzsyRkRRYSwwQkFBMEI7a0JBSnRDLFNBQVM7K0JBQ0UscUJBQXFCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbi8qKlxuICogU3BlY2lmaWVzIHRoZSBidXR0b24gZm9yIHRoZSBkcm9wZG93biBtZW51LlxuICovXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdza3ktZHJvcGRvd24tYnV0dG9uJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2Ryb3Bkb3duLWJ1dHRvbi5jb21wb25lbnQuaHRtbCcsXG59KVxuZXhwb3J0IGNsYXNzIFNreURyb3Bkb3duQnV0dG9uQ29tcG9uZW50IHt9XG4iLCI8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG4iXX0=

package/esm2022/lib/modules/dropdown/dropdown-item.component.mjs

@@ -0,0 +1,68 @@
+import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation, } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+/**
+ * Specifies the items to display on the dropdown menu.
+ */
+export class SkyDropdownItemComponent {
+    /**
+     * The ARIA role for the dropdown menu item
+     * [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility)
+     * by indicating how the item functions and what it controls. For information about
+     * how an ARIA role indicates what an item represents on a web page, see the
+     * [WAI-ARIA roles model](https://www.w3.org/WAI/PF/aria/#roles).
+     * @default "menuitem"
+     */
+    set ariaRole(value) {
+        this.#_ariaRole = value ?? 'menuitem';
+    }
+    get ariaRole() {
+        return this.#_ariaRole;
+    }
+    #_ariaRole;
+    #changeDetector;
+    #renderer;
+    constructor(elementRef, changeDetector, renderer) {
+        this.elementRef = elementRef;
+        this.isActive = false;
+        this.#_ariaRole = 'menuitem';
+        this.#changeDetector = changeDetector;
+        this.#renderer = renderer;
+    }
+    ngAfterViewInit() {
+        // Make sure anchor elements are tab-able.
+        const buttonElement = this.#getButtonElement();
+        /* istanbul ignore else */
+        if (buttonElement) {
+            this.#renderer.setAttribute(buttonElement, 'tabIndex', '0');
+        }
+        this.#changeDetector.detectChanges();
+    }
+    focusElement(enableNativeFocus) {
+        this.isActive = true;
+        if (enableNativeFocus) {
+            this.#getButtonElement()?.focus();
+        }
+        this.#changeDetector.detectChanges();
+    }
+    isFocusable() {
+        const isFocusable = this.#getButtonElement()?.getAttribute('disabled') === null;
+        return isFocusable;
+    }
+    resetState() {
+        this.isActive = false;
+        this.#changeDetector.markForCheck();
+    }
+    #getButtonElement() {
+        return this.elementRef.nativeElement.querySelector('button,a');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDropdownItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyDropdownItemComponent, selector: "sky-dropdown-item", inputs: { ariaRole: "ariaRole" }, ngImport: i0, template: "<div\n  class=\"sky-dropdown-item\"\n  [attr.role]=\"ariaRole\"\n  [ngClass]=\"{\n    'sky-dropdown-item-active': isActive\n  }\"\n>\n  <ng-content> </ng-content>\n</div>\n", styles: [".sky-dropdown-item{background-color:transparent;border:none;display:block;margin:4px;min-width:160px;text-align:left}.sky-dropdown-item.sky-dropdown-item-active a,.sky-dropdown-item.sky-dropdown-item-active button,.sky-dropdown-item:hover a,.sky-dropdown-item:hover button{background-color:#eeeeef}.sky-dropdown-item button[disabled],.sky-dropdown-item a[disabled]{cursor:default}.sky-dropdown-item button[disabled]:hover,.sky-dropdown-item a[disabled]:hover{background-color:transparent}.sky-dropdown-item>a,.sky-dropdown-item>button{background-color:transparent;border:none;color:#212327;cursor:pointer;display:block;padding:3px 20px;text-align:left;width:100%}.sky-dropdown-item>a:hover,.sky-dropdown-item>button:hover{text-decoration:none}.sky-dropdown-item>a[disabled],.sky-dropdown-item>button[disabled]{color:#686c73}.sky-dropdown-item>a[disabled]:hover,.sky-dropdown-item>button[disabled]:hover{cursor:default}.sky-theme-modern .sky-dropdown-item{margin:0}.sky-theme-modern .sky-dropdown-item.sky-dropdown-item-active,.sky-theme-modern .sky-dropdown-item:hover{background-color:transparent}.sky-theme-modern .sky-dropdown-item>a,.sky-theme-modern .sky-dropdown-item>button{padding:10px 20px;border-radius:6px;transition:box-shadow .15s}.sky-theme-modern .sky-dropdown-item>a:hover,.sky-theme-modern .sky-dropdown-item>button:hover{outline:solid 1px #1870B8;outline-offset:-1px}.sky-theme-modern .sky-dropdown-item>a:focus-visible,.sky-theme-modern .sky-dropdown-item>a:active,.sky-theme-modern .sky-dropdown-item>button:focus-visible,.sky-theme-modern .sky-dropdown-item>button:active{outline:solid 2px #1870B8;outline-offset:-2px}.sky-theme-modern .sky-dropdown-item>a:focus-visible:not(:active),.sky-theme-modern .sky-dropdown-item>button:focus-visible:not(:active){box-shadow:0 1px 8px #0000004d}.sky-theme-modern.sky-theme-mode-dark .sky-dropdown-item>a,.sky-theme-modern.sky-theme-mode-dark .sky-dropdown-item>button{color:#fbfcfe}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDropdownItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-dropdown-item', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"sky-dropdown-item\"\n  [attr.role]=\"ariaRole\"\n  [ngClass]=\"{\n    'sky-dropdown-item-active': isActive\n  }\"\n>\n  <ng-content> </ng-content>\n</div>\n", styles: [".sky-dropdown-item{background-color:transparent;border:none;display:block;margin:4px;min-width:160px;text-align:left}.sky-dropdown-item.sky-dropdown-item-active a,.sky-dropdown-item.sky-dropdown-item-active button,.sky-dropdown-item:hover a,.sky-dropdown-item:hover button{background-color:#eeeeef}.sky-dropdown-item button[disabled],.sky-dropdown-item a[disabled]{cursor:default}.sky-dropdown-item button[disabled]:hover,.sky-dropdown-item a[disabled]:hover{background-color:transparent}.sky-dropdown-item>a,.sky-dropdown-item>button{background-color:transparent;border:none;color:#212327;cursor:pointer;display:block;padding:3px 20px;text-align:left;width:100%}.sky-dropdown-item>a:hover,.sky-dropdown-item>button:hover{text-decoration:none}.sky-dropdown-item>a[disabled],.sky-dropdown-item>button[disabled]{color:#686c73}.sky-dropdown-item>a[disabled]:hover,.sky-dropdown-item>button[disabled]:hover{cursor:default}.sky-theme-modern .sky-dropdown-item{margin:0}.sky-theme-modern .sky-dropdown-item.sky-dropdown-item-active,.sky-theme-modern .sky-dropdown-item:hover{background-color:transparent}.sky-theme-modern .sky-dropdown-item>a,.sky-theme-modern .sky-dropdown-item>button{padding:10px 20px;border-radius:6px;transition:box-shadow .15s}.sky-theme-modern .sky-dropdown-item>a:hover,.sky-theme-modern .sky-dropdown-item>button:hover{outline:solid 1px #1870B8;outline-offset:-1px}.sky-theme-modern .sky-dropdown-item>a:focus-visible,.sky-theme-modern .sky-dropdown-item>a:active,.sky-theme-modern .sky-dropdown-item>button:focus-visible,.sky-theme-modern .sky-dropdown-item>button:active{outline:solid 2px #1870B8;outline-offset:-2px}.sky-theme-modern .sky-dropdown-item>a:focus-visible:not(:active),.sky-theme-modern .sky-dropdown-item>button:focus-visible:not(:active){box-shadow:0 1px 8px #0000004d}.sky-theme-modern.sky-theme-mode-dark .sky-dropdown-item>a,.sky-theme-modern.sky-theme-mode-dark .sky-dropdown-item>button{color:#fbfcfe}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }]; }, propDecorators: { ariaRole: [{
+                type: Input
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJvcGRvd24taXRlbS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL2NvbXBvbmVudHMvcG9wb3ZlcnMvc3JjL2xpYi9tb2R1bGVzL2Ryb3Bkb3duL2Ryb3Bkb3duLWl0ZW0uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9jb21wb25lbnRzL3BvcG92ZXJzL3NyYy9saWIvbW9kdWxlcy9kcm9wZG93bi9kcm9wZG93bi1pdGVtLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFFTCx1QkFBdUIsRUFFdkIsU0FBUyxFQUVULEtBQUssRUFFTCxpQkFBaUIsR0FDbEIsTUFBTSxlQUFlLENBQUM7OztBQUV2Qjs7R0FFRztBQVFILE1BQU0sT0FBTyx3QkFBd0I7SUFDbkM7Ozs7Ozs7T0FPRztJQUNILElBQ1csUUFBUSxDQUFDLEtBQXlCO1FBQzNDLElBQUksQ0FBQyxVQUFVLEdBQUcsS0FBSyxJQUFJLFVBQVUsQ0FBQztJQUN4QyxDQUFDO0lBRUQsSUFBVyxRQUFRO1FBQ2pCLE9BQU8sSUFBSSxDQUFDLFVBQVUsQ0FBQztJQUN6QixDQUFDO0lBSUQsVUFBVSxDQUFjO0lBRXhCLGVBQWUsQ0FBb0I7SUFDbkMsU0FBUyxDQUFZO0lBRXJCLFlBQ1MsVUFBc0IsRUFDN0IsY0FBaUMsRUFDakMsUUFBbUI7UUFGWixlQUFVLEdBQVYsVUFBVSxDQUFZO1FBUnhCLGFBQVEsR0FBRyxLQUFLLENBQUM7UUFFeEIsZUFBVSxHQUFHLFVBQVUsQ0FBQztRQVV0QixJQUFJLENBQUMsZUFBZSxHQUFHLGNBQWMsQ0FBQztRQUN0QyxJQUFJLENBQUMsU0FBUyxHQUFHLFFBQVEsQ0FBQztJQUM1QixDQUFDO0lBRU0sZUFBZTtRQUNwQiwwQ0FBMEM7UUFDMUMsTUFBTSxhQUFhLEdBQUcsSUFBSSxDQUFDLGlCQUFpQixFQUFFLENBQUM7UUFDL0MsMEJBQTBCO1FBQzFCLElBQUksYUFBYSxFQUFFO1lBQ2pCLElBQUksQ0FBQyxTQUFTLENBQUMsWUFBWSxDQUFDLGFBQWEsRUFBRSxVQUFVLEVBQUUsR0FBRyxDQUFDLENBQUM7U0FDN0Q7UUFFRCxJQUFJLENBQUMsZUFBZSxDQUFDLGFBQWEsRUFBRSxDQUFDO0lBQ3ZDLENBQUM7SUFFTSxZQUFZLENBQUMsaUJBQTBCO1FBQzVDLElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDO1FBRXJCLElBQUksaUJBQWlCLEVBQUU7WUFDckIsSUFBSSxDQUFDLGlCQUFpQixFQUFFLEVBQUUsS0FBSyxFQUFFLENBQUM7U0FDbkM7UUFFRCxJQUFJLENBQUMsZUFBZSxDQUFDLGFBQWEsRUFBRSxDQUFDO0lBQ3ZDLENBQUM7SUFFTSxXQUFXO1FBQ2hCLE1BQU0sV0FBVyxHQUNmLElBQUksQ0FBQyxpQkFBaUIsRUFBRSxFQUFFLFlBQVksQ0FBQyxVQUFVLENBQUMsS0FBSyxJQUFJLENBQUM7UUFDOUQsT0FBTyxXQUFXLENBQUM7SUFDckIsQ0FBQztJQUVNLFVBQVU7UUFDZixJQUFJLENBQUMsUUFBUSxHQUFHLEtBQUssQ0FBQztRQUN0QixJQUFJLENBQUMsZUFBZSxDQUFDLFlBQVksRUFBRSxDQUFDO0lBQ3RDLENBQUM7SUFFRCxpQkFBaUI7UUFDZixPQUFPLElBQUksQ0FBQyxVQUFVLENBQUMsYUFBYSxDQUFDLGFBQWEsQ0FBQyxVQUFVLENBQUMsQ0FBQztJQUNqRSxDQUFDOzhHQXBFVSx3QkFBd0I7a0dBQXhCLHdCQUF3QiwyRkNyQnJDLDhLQVNBOzsyRkRZYSx3QkFBd0I7a0JBUHBDLFNBQVM7K0JBQ0UsbUJBQW1CLG1CQUdaLHVCQUF1QixDQUFDLE1BQU0saUJBQ2hDLGlCQUFpQixDQUFDLElBQUk7eUpBWTFCLFFBQVE7c0JBRGxCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBBZnRlclZpZXdJbml0LFxuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ2hhbmdlRGV0ZWN0b3JSZWYsXG4gIENvbXBvbmVudCxcbiAgRWxlbWVudFJlZixcbiAgSW5wdXQsXG4gIFJlbmRlcmVyMixcbiAgVmlld0VuY2Fwc3VsYXRpb24sXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG4vKipcbiAqIFNwZWNpZmllcyB0aGUgaXRlbXMgdG8gZGlzcGxheSBvbiB0aGUgZHJvcGRvd24gbWVudS5cbiAqL1xuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnc2t5LWRyb3Bkb3duLWl0ZW0nLFxuICB0ZW1wbGF0ZVVybDogJy4vZHJvcGRvd24taXRlbS5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2Ryb3Bkb3duLWl0ZW0uY29tcG9uZW50LnNjc3MnXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG59KVxuZXhwb3J0IGNsYXNzIFNreURyb3Bkb3duSXRlbUNvbXBvbmVudCBpbXBsZW1lbnRzIEFmdGVyVmlld0luaXQge1xuICAvKipcbiAgICogVGhlIEFSSUEgcm9sZSBmb3IgdGhlIGRyb3Bkb3duIG1lbnUgaXRlbVxuICAgKiBbdG8gc3VwcG9ydCBhY2Nlc3NpYmlsaXR5XShodHRwczovL2RldmVsb3Blci5ibGFja2JhdWQuY29tL3NreXV4L2xlYXJuL2FjY2Vzc2liaWxpdHkpXG4gICAqIGJ5IGluZGljYXRpbmcgaG93IHRoZSBpdGVtIGZ1bmN0aW9ucyBhbmQgd2hhdCBpdCBjb250cm9scy4gRm9yIGluZm9ybWF0aW9uIGFib3V0XG4gICAqIGhvdyBhbiBBUklBIHJvbGUgaW5kaWNhdGVzIHdoYXQgYW4gaXRlbSByZXByZXNlbnRzIG9uIGEgd2ViIHBhZ2UsIHNlZSB0aGVcbiAgICogW1dBSS1BUklBIHJvbGVzIG1vZGVsXShodHRwczovL3d3dy53My5vcmcvV0FJL1BGL2FyaWEvI3JvbGVzKS5cbiAgICogQGRlZmF1bHQgXCJtZW51aXRlbVwiXG4gICAqL1xuICBASW5wdXQoKVxuICBwdWJsaWMgc2V0IGFyaWFSb2xlKHZhbHVlOiBzdHJpbmcgfCB1bmRlZmluZWQpIHtcbiAgICB0aGlzLiNfYXJpYVJvbGUgPSB2YWx1ZSA/PyAnbWVudWl0ZW0nO1xuICB9XG5cbiAgcHVibGljIGdldCBhcmlhUm9sZSgpOiBzdHJpbmcge1xuICAgIHJldHVybiB0aGlzLiNfYXJpYVJvbGU7XG4gIH1cblxuICBwdWJsaWMgaXNBY3RpdmUgPSBmYWxzZTtcblxuICAjX2FyaWFSb2xlID0gJ21lbnVpdGVtJztcblxuICAjY2hhbmdlRGV0ZWN0b3I6IENoYW5nZURldGVjdG9yUmVmO1xuICAjcmVuZGVyZXI6IFJlbmRlcmVyMjtcblxuICBjb25zdHJ1Y3RvcihcbiAgICBwdWJsaWMgZWxlbWVudFJlZjogRWxlbWVudFJlZixcbiAgICBjaGFuZ2VEZXRlY3RvcjogQ2hhbmdlRGV0ZWN0b3JSZWYsXG4gICAgcmVuZGVyZXI6IFJlbmRlcmVyMlxuICApIHtcbiAgICB0aGlzLiNjaGFuZ2VEZXRlY3RvciA9IGNoYW5nZURldGVjdG9yO1xuICAgIHRoaXMuI3JlbmRlcmVyID0gcmVuZGVyZXI7XG4gIH1cblxuICBwdWJsaWMgbmdBZnRlclZpZXdJbml0KCk6IHZvaWQge1xuICAgIC8vIE1ha2Ugc3VyZSBhbmNob3IgZWxlbWVudHMgYXJlIHRhYi1hYmxlLlxuICAgIGNvbnN0IGJ1dHRvbkVsZW1lbnQgPSB0aGlzLiNnZXRCdXR0b25FbGVtZW50KCk7XG4gICAgLyogaXN0YW5idWwgaWdub3JlIGVsc2UgKi9cbiAgICBpZiAoYnV0dG9uRWxlbWVudCkge1xuICAgICAgdGhpcy4jcmVuZGVyZXIuc2V0QXR0cmlidXRlKGJ1dHRvbkVsZW1lbnQsICd0YWJJbmRleCcsICcwJyk7XG4gICAgfVxuXG4gICAgdGhpcy4jY2hhbmdlRGV0ZWN0b3IuZGV0ZWN0Q2hhbmdlcygpO1xuICB9XG5cbiAgcHVibGljIGZvY3VzRWxlbWVudChlbmFibGVOYXRpdmVGb2N1czogYm9vbGVhbik6IHZvaWQge1xuICAgIHRoaXMuaXNBY3RpdmUgPSB0cnVlO1xuXG4gICAgaWYgKGVuYWJsZU5hdGl2ZUZvY3VzKSB7XG4gICAgICB0aGlzLiNnZXRCdXR0b25FbGVtZW50KCk/LmZvY3VzKCk7XG4gICAgfVxuXG4gICAgdGhpcy4jY2hhbmdlRGV0ZWN0b3IuZGV0ZWN0Q2hhbmdlcygpO1xuICB9XG5cbiAgcHVibGljIGlzRm9jdXNhYmxlKCk6IGJvb2xlYW4ge1xuICAgIGNvbnN0IGlzRm9jdXNhYmxlID1cbiAgICAgIHRoaXMuI2dldEJ1dHRvbkVsZW1lbnQoKT8uZ2V0QXR0cmlidXRlKCdkaXNhYmxlZCcpID09PSBudWxsO1xuICAgIHJldHVybiBpc0ZvY3VzYWJsZTtcbiAgfVxuXG4gIHB1YmxpYyByZXNldFN0YXRlKCk6IHZvaWQge1xuICAgIHRoaXMuaXNBY3RpdmUgPSBmYWxzZTtcbiAgICB0aGlzLiNjaGFuZ2VEZXRlY3Rvci5tYXJrRm9yQ2hlY2soKTtcbiAgfVxuXG4gICNnZXRCdXR0b25FbGVtZW50KCk6IEhUTUxCdXR0b25FbGVtZW50IHwgbnVsbCB7XG4gICAgcmV0dXJuIHRoaXMuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50LnF1ZXJ5U2VsZWN0b3IoJ2J1dHRvbixhJyk7XG4gIH1cbn1cbiIsIjxkaXZcbiAgY2xhc3M9XCJza3ktZHJvcGRvd24taXRlbVwiXG4gIFthdHRyLnJvbGVdPVwiYXJpYVJvbGVcIlxuICBbbmdDbGFzc109XCJ7XG4gICAgJ3NreS1kcm9wZG93bi1pdGVtLWFjdGl2ZSc6IGlzQWN0aXZlXG4gIH1cIlxuPlxuICA8bmctY29udGVudD4gPC9uZy1jb250ZW50PlxuPC9kaXY+XG4iXX0=