@skyux/popovers 9.0.0-alpha.0 → 9.0.0-alpha.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/documentation.json +35 -35
- package/package.json +6 -6
package/documentation.json
CHANGED
|
@@ -6489,34 +6489,29 @@
|
|
|
6489
6489
|
},
|
|
6490
6490
|
"codeExamples": [
|
|
6491
6491
|
{
|
|
6492
|
-
"fileName": "
|
|
6493
|
-
"filePath": "/projects/popovers/documentation/code-examples/
|
|
6494
|
-
"rawContents": "
|
|
6495
|
-
},
|
|
6496
|
-
{
|
|
6497
|
-
"fileName": "dropdown-demo.component.html",
|
|
6498
|
-
"filePath": "/projects/popovers/documentation/code-examples/dropdown/basic/dropdown-demo.component.html",
|
|
6499
|
-
"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"
|
|
6492
|
+
"fileName": "popover-demo.module.ts",
|
|
6493
|
+
"filePath": "/projects/popovers/documentation/code-examples/popover/programmatic/popover-demo.module.ts",
|
|
6494
|
+
"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"
|
|
6500
6495
|
},
|
|
6501
6496
|
{
|
|
6502
|
-
"fileName": "
|
|
6503
|
-
"filePath": "/projects/popovers/documentation/code-examples/
|
|
6504
|
-
"rawContents": "import {
|
|
6497
|
+
"fileName": "popover-demo.component.ts",
|
|
6498
|
+
"filePath": "/projects/popovers/documentation/code-examples/popover/programmatic/popover-demo.component.ts",
|
|
6499
|
+
"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"
|
|
6505
6500
|
},
|
|
6506
6501
|
{
|
|
6507
|
-
"fileName": "
|
|
6508
|
-
"filePath": "/projects/popovers/documentation/code-examples/
|
|
6509
|
-
"rawContents": "
|
|
6502
|
+
"fileName": "popover-demo.component.html",
|
|
6503
|
+
"filePath": "/projects/popovers/documentation/code-examples/popover/programmatic/popover-demo.component.html",
|
|
6504
|
+
"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"
|
|
6510
6505
|
},
|
|
6511
6506
|
{
|
|
6512
|
-
"fileName": "
|
|
6513
|
-
"filePath": "/projects/popovers/documentation/code-examples/
|
|
6514
|
-
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport {
|
|
6507
|
+
"fileName": "popover-demo.module.ts",
|
|
6508
|
+
"filePath": "/projects/popovers/documentation/code-examples/popover/basic/popover-demo.module.ts",
|
|
6509
|
+
"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"
|
|
6515
6510
|
},
|
|
6516
6511
|
{
|
|
6517
|
-
"fileName": "popover-demo.component.
|
|
6518
|
-
"filePath": "/projects/popovers/documentation/code-examples/popover/basic/popover-demo.component.
|
|
6519
|
-
"rawContents": "
|
|
6512
|
+
"fileName": "popover-demo.component.ts",
|
|
6513
|
+
"filePath": "/projects/popovers/documentation/code-examples/popover/basic/popover-demo.component.ts",
|
|
6514
|
+
"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"
|
|
6520
6515
|
},
|
|
6521
6516
|
{
|
|
6522
6517
|
"fileName": "popover-demo.component.spec.ts",
|
|
@@ -6524,29 +6519,34 @@
|
|
|
6524
6519
|
"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"
|
|
6525
6520
|
},
|
|
6526
6521
|
{
|
|
6527
|
-
"fileName": "popover-demo.component.
|
|
6528
|
-
"filePath": "/projects/popovers/documentation/code-examples/popover/basic/popover-demo.component.
|
|
6529
|
-
"rawContents": "
|
|
6522
|
+
"fileName": "popover-demo.component.html",
|
|
6523
|
+
"filePath": "/projects/popovers/documentation/code-examples/popover/basic/popover-demo.component.html",
|
|
6524
|
+
"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"
|
|
6530
6525
|
},
|
|
6531
6526
|
{
|
|
6532
|
-
"fileName": "
|
|
6533
|
-
"filePath": "/projects/popovers/documentation/code-examples/
|
|
6534
|
-
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport {
|
|
6527
|
+
"fileName": "dropdown-demo.module.ts",
|
|
6528
|
+
"filePath": "/projects/popovers/documentation/code-examples/dropdown/basic/dropdown-demo.module.ts",
|
|
6529
|
+
"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"
|
|
6535
6530
|
},
|
|
6536
6531
|
{
|
|
6537
|
-
"fileName": "
|
|
6538
|
-
"filePath": "/projects/popovers/documentation/code-examples/
|
|
6539
|
-
"rawContents": "
|
|
6532
|
+
"fileName": "dropdown-demo.component.ts",
|
|
6533
|
+
"filePath": "/projects/popovers/documentation/code-examples/dropdown/basic/dropdown-demo.component.ts",
|
|
6534
|
+
"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"
|
|
6540
6535
|
},
|
|
6541
6536
|
{
|
|
6542
|
-
"fileName": "
|
|
6543
|
-
"filePath": "/projects/popovers/documentation/code-examples/
|
|
6544
|
-
"rawContents": "import {
|
|
6537
|
+
"fileName": "dropdown-demo.component.spec.ts",
|
|
6538
|
+
"filePath": "/projects/popovers/documentation/code-examples/dropdown/basic/dropdown-demo.component.spec.ts",
|
|
6539
|
+
"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"
|
|
6545
6540
|
},
|
|
6546
6541
|
{
|
|
6547
|
-
"fileName": "
|
|
6548
|
-
"filePath": "/projects/popovers/documentation/code-examples/
|
|
6549
|
-
"rawContents": "
|
|
6542
|
+
"fileName": "dropdown-demo.component.html",
|
|
6543
|
+
"filePath": "/projects/popovers/documentation/code-examples/dropdown/basic/dropdown-demo.component.html",
|
|
6544
|
+
"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"
|
|
6545
|
+
},
|
|
6546
|
+
{
|
|
6547
|
+
"fileName": "dropdown-demo-item.ts",
|
|
6548
|
+
"filePath": "/projects/popovers/documentation/code-examples/dropdown/basic/dropdown-demo-item.ts",
|
|
6549
|
+
"rawContents": "export interface DropdownDemoItem {\n name: string;\n disabled: boolean;\n}\n"
|
|
6550
6550
|
}
|
|
6551
6551
|
]
|
|
6552
6552
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@skyux/popovers",
|
|
3
|
-
"version": "9.0.0-alpha.
|
|
3
|
+
"version": "9.0.0-alpha.1",
|
|
4
4
|
"author": "Blackbaud, Inc.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"blackbaud",
|
|
@@ -41,11 +41,11 @@
|
|
|
41
41
|
"@angular/common": "^16.1.7",
|
|
42
42
|
"@angular/core": "^16.1.7",
|
|
43
43
|
"@angular/platform-browser": "^16.1.7",
|
|
44
|
-
"@skyux-sdk/testing": "9.0.0-alpha.
|
|
45
|
-
"@skyux/core": "9.0.0-alpha.
|
|
46
|
-
"@skyux/i18n": "9.0.0-alpha.
|
|
47
|
-
"@skyux/indicators": "9.0.0-alpha.
|
|
48
|
-
"@skyux/theme": "9.0.0-alpha.
|
|
44
|
+
"@skyux-sdk/testing": "9.0.0-alpha.1",
|
|
45
|
+
"@skyux/core": "9.0.0-alpha.1",
|
|
46
|
+
"@skyux/i18n": "9.0.0-alpha.1",
|
|
47
|
+
"@skyux/indicators": "9.0.0-alpha.1",
|
|
48
|
+
"@skyux/theme": "9.0.0-alpha.1"
|
|
49
49
|
},
|
|
50
50
|
"dependencies": {
|
|
51
51
|
"tslib": "^2.5.0"
|