@skyux/flyout 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 +21 -21
- package/package.json +6 -6
package/documentation.json
CHANGED
|
@@ -1774,24 +1774,19 @@
|
|
|
1774
1774
|
},
|
|
1775
1775
|
"codeExamples": [
|
|
1776
1776
|
{
|
|
1777
|
-
"fileName": "flyout-demo
|
|
1778
|
-
"filePath": "/projects/flyout/documentation/code-examples/flyout/
|
|
1779
|
-
"rawContents": "import {
|
|
1780
|
-
},
|
|
1781
|
-
{
|
|
1782
|
-
"fileName": "flyout-demo.component.html",
|
|
1783
|
-
"filePath": "/projects/flyout/documentation/code-examples/flyout/basic/flyout-demo.component.html",
|
|
1784
|
-
"rawContents": "<p>\n <button\n class=\"sky-btn sky-btn-default\"\n type=\"button\"\n (click)=\"openSimpleFlyout()\"\n >\n Open flyout\n </button>\n</p>\n\n<p>\n <button\n class=\"sky-btn sky-btn-default\"\n type=\"button\"\n (click)=\"openFlyoutWithCustomWidth()\"\n >\n Open flyout with custom width\n </button>\n</p>\n\n<p>\n <button\n class=\"sky-btn sky-btn-default\"\n type=\"button\"\n (click)=\"closeAndRemoveFlyout()\"\n >\n Close flyout programmatically\n </button>\n</p>\n"
|
|
1777
|
+
"fileName": "flyout-demo.module.ts",
|
|
1778
|
+
"filePath": "/projects/flyout/documentation/code-examples/flyout/custom-headers/flyout-demo.module.ts",
|
|
1779
|
+
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyFlyoutModule } from '@skyux/flyout';\n\nimport { FlyoutDemoFlyoutComponent } from './flyout-demo-flyout.component';\nimport { FlyoutDemoComponent } from './flyout-demo.component';\n\n@NgModule({\n imports: [CommonModule, SkyFlyoutModule],\n declarations: [FlyoutDemoComponent, FlyoutDemoFlyoutComponent],\n exports: [FlyoutDemoComponent],\n})\nexport class FlyoutDemoModule {}\n"
|
|
1785
1780
|
},
|
|
1786
1781
|
{
|
|
1787
1782
|
"fileName": "flyout-demo.component.ts",
|
|
1788
|
-
"filePath": "/projects/flyout/documentation/code-examples/flyout/
|
|
1789
|
-
"rawContents": "import { Component } from '@angular/core';\nimport {\n SkyFlyoutConfig,\n SkyFlyoutInstance,\n SkyFlyoutService,\n} from '@skyux/flyout';\n\nimport { FlyoutDemoFlyoutComponent } from './flyout-demo-flyout.component';\n\n@Component({\n selector: 'app-flyout-demo',\n templateUrl: './flyout-demo.component.html',\n})\nexport class FlyoutDemoComponent {\n public flyout: SkyFlyoutInstance<FlyoutDemoFlyoutComponent> | undefined;\n\n #flyoutService: SkyFlyoutService;\n\n constructor(flyoutService: SkyFlyoutService) {\n this.#flyoutService = flyoutService;\n }\n\n public
|
|
1783
|
+
"filePath": "/projects/flyout/documentation/code-examples/flyout/custom-headers/flyout-demo.component.ts",
|
|
1784
|
+
"rawContents": "import { Component } from '@angular/core';\nimport {\n SkyFlyoutConfig,\n SkyFlyoutInstance,\n SkyFlyoutService,\n} from '@skyux/flyout';\n\nimport { FlyoutDemoFlyoutComponent } from './flyout-demo-flyout.component';\n\n@Component({\n selector: 'app-flyout-demo',\n templateUrl: './flyout-demo.component.html',\n})\nexport class FlyoutDemoComponent {\n public flyout: SkyFlyoutInstance<FlyoutDemoFlyoutComponent> | undefined;\n\n #flyoutService: SkyFlyoutService;\n\n constructor(flyoutService: SkyFlyoutService) {\n this.#flyoutService = flyoutService;\n }\n\n public openFlyoutWithIterators(): void {\n const flyoutConfig: SkyFlyoutConfig = {\n ariaLabelledBy: 'flyout-title',\n ariaRole: 'dialog',\n showIterator: true,\n };\n this.flyout = this.#flyoutService.open(\n FlyoutDemoFlyoutComponent,\n flyoutConfig\n );\n\n this.flyout.iteratorNextButtonClick.subscribe(() => {\n alert('Next iterator button clicked!');\n });\n\n this.flyout.iteratorPreviousButtonClick.subscribe(() => {\n alert('Previous iterator button clicked!');\n });\n\n this.flyout.closed.subscribe(() => {\n this.flyout = undefined;\n });\n }\n\n public openFlyoutWithRoutePermalink(): void {\n const flyoutConfig: SkyFlyoutConfig = {\n ariaLabelledBy: 'flyout-title',\n ariaRole: 'dialog',\n permalink: {\n label: 'Go to Components page',\n route: {\n commands: ['/components'],\n extras: {\n fragment: 'helloWorld',\n queryParams: {\n foo: 'bar',\n },\n },\n },\n },\n };\n this.flyout = this.#flyoutService.open(\n FlyoutDemoFlyoutComponent,\n flyoutConfig\n );\n\n this.flyout.closed.subscribe(() => {\n this.flyout = undefined;\n });\n }\n\n public openFlyoutWithUrlPermalink(): void {\n const flyoutConfig: SkyFlyoutConfig = {\n ariaLabelledBy: 'flyout-title',\n ariaRole: 'dialog',\n permalink: {\n label: `Visit blackbaud.com`,\n url: 'http://www.blackbaud.com',\n },\n };\n this.flyout = this.#flyoutService.open(\n FlyoutDemoFlyoutComponent,\n flyoutConfig\n );\n\n this.flyout.closed.subscribe(() => {\n this.flyout = undefined;\n });\n }\n}\n"
|
|
1790
1785
|
},
|
|
1791
1786
|
{
|
|
1792
|
-
"fileName": "flyout-demo.
|
|
1793
|
-
"filePath": "/projects/flyout/documentation/code-examples/flyout/
|
|
1794
|
-
"rawContents": "
|
|
1787
|
+
"fileName": "flyout-demo.component.html",
|
|
1788
|
+
"filePath": "/projects/flyout/documentation/code-examples/flyout/custom-headers/flyout-demo.component.html",
|
|
1789
|
+
"rawContents": "<p>\n <button\n class=\"sky-btn sky-btn-default\"\n type=\"button\"\n (click)=\"openFlyoutWithUrlPermalink()\"\n >\n Open flyout with a URL permalink\n </button>\n</p>\n\n<p>\n <button\n class=\"sky-btn sky-btn-default\"\n type=\"button\"\n (click)=\"openFlyoutWithRoutePermalink()\"\n >\n Open flyout with an Angular routing permalink\n </button>\n</p>\n\n<p>\n <button\n class=\"sky-btn sky-btn-default\"\n type=\"button\"\n (click)=\"openFlyoutWithIterators()\"\n >\n Open flyout with iterators\n </button>\n</p>\n"
|
|
1795
1790
|
},
|
|
1796
1791
|
{
|
|
1797
1792
|
"fileName": "flyout-demo-flyout.component.ts",
|
|
@@ -1799,19 +1794,24 @@
|
|
|
1799
1794
|
"rawContents": "import { Component } from '@angular/core';\n\n@Component({\n selector: 'app-flyout-demo-flyout',\n template: `\n <div class=\"sky-padding-even-xl\">\n <h2 id=\"flyout-title\">Sample flyout</h2>\n <p>\n Flyouts can display large quantities of supplementary information\n related to a task, including:\n </p>\n <ul>\n <li>lists</li>\n <li>records</li>\n <li>analytics</li>\n </ul>\n </div>\n `,\n})\nexport class FlyoutDemoFlyoutComponent {}\n"
|
|
1800
1795
|
},
|
|
1801
1796
|
{
|
|
1802
|
-
"fileName": "flyout-demo.
|
|
1803
|
-
"filePath": "/projects/flyout/documentation/code-examples/flyout/
|
|
1804
|
-
"rawContents": "
|
|
1797
|
+
"fileName": "flyout-demo.module.ts",
|
|
1798
|
+
"filePath": "/projects/flyout/documentation/code-examples/flyout/basic/flyout-demo.module.ts",
|
|
1799
|
+
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyFlyoutModule } from '@skyux/flyout';\n\nimport { FlyoutDemoFlyoutComponent } from './flyout-demo-flyout.component';\nimport { FlyoutDemoComponent } from './flyout-demo.component';\n\n@NgModule({\n imports: [CommonModule, SkyFlyoutModule],\n declarations: [FlyoutDemoComponent, FlyoutDemoFlyoutComponent],\n exports: [FlyoutDemoComponent],\n})\nexport class FlyoutDemoModule {}\n"
|
|
1805
1800
|
},
|
|
1806
1801
|
{
|
|
1807
1802
|
"fileName": "flyout-demo.component.ts",
|
|
1808
|
-
"filePath": "/projects/flyout/documentation/code-examples/flyout/
|
|
1809
|
-
"rawContents": "import { Component } from '@angular/core';\nimport {\n SkyFlyoutConfig,\n SkyFlyoutInstance,\n SkyFlyoutService,\n} from '@skyux/flyout';\n\nimport { FlyoutDemoFlyoutComponent } from './flyout-demo-flyout.component';\n\n@Component({\n selector: 'app-flyout-demo',\n templateUrl: './flyout-demo.component.html',\n})\nexport class FlyoutDemoComponent {\n public flyout: SkyFlyoutInstance<FlyoutDemoFlyoutComponent> | undefined;\n\n #flyoutService: SkyFlyoutService;\n\n constructor(flyoutService: SkyFlyoutService) {\n this.#flyoutService = flyoutService;\n }\n\n public
|
|
1803
|
+
"filePath": "/projects/flyout/documentation/code-examples/flyout/basic/flyout-demo.component.ts",
|
|
1804
|
+
"rawContents": "import { Component } from '@angular/core';\nimport {\n SkyFlyoutConfig,\n SkyFlyoutInstance,\n SkyFlyoutService,\n} from '@skyux/flyout';\n\nimport { FlyoutDemoFlyoutComponent } from './flyout-demo-flyout.component';\n\n@Component({\n selector: 'app-flyout-demo',\n templateUrl: './flyout-demo.component.html',\n})\nexport class FlyoutDemoComponent {\n public flyout: SkyFlyoutInstance<FlyoutDemoFlyoutComponent> | undefined;\n\n #flyoutService: SkyFlyoutService;\n\n constructor(flyoutService: SkyFlyoutService) {\n this.#flyoutService = flyoutService;\n }\n\n public closeAndRemoveFlyout(): void {\n if (this.flyout && this.flyout.isOpen) {\n this.#flyoutService.close();\n }\n this.flyout = undefined;\n }\n\n public openFlyoutWithCustomWidth(): void {\n const flyoutConfig: SkyFlyoutConfig = {\n ariaLabelledBy: 'flyout-title',\n ariaRole: 'dialog',\n defaultWidth: 350,\n maxWidth: 500,\n minWidth: 200,\n };\n this.flyout = this.#flyoutService.open(\n FlyoutDemoFlyoutComponent,\n flyoutConfig\n );\n\n this.flyout.closed.subscribe(() => {\n this.flyout = undefined;\n });\n }\n\n public openSimpleFlyout(): void {\n const flyoutConfig: SkyFlyoutConfig = {\n ariaLabelledBy: 'flyout-title',\n ariaRole: 'dialog',\n };\n this.flyout = this.#flyoutService.open(\n FlyoutDemoFlyoutComponent,\n flyoutConfig\n );\n\n this.flyout.closed.subscribe(() => {\n this.flyout = undefined;\n });\n }\n}\n"
|
|
1810
1805
|
},
|
|
1811
1806
|
{
|
|
1812
|
-
"fileName": "flyout-demo.
|
|
1813
|
-
"filePath": "/projects/flyout/documentation/code-examples/flyout/
|
|
1814
|
-
"rawContents": "
|
|
1807
|
+
"fileName": "flyout-demo.component.html",
|
|
1808
|
+
"filePath": "/projects/flyout/documentation/code-examples/flyout/basic/flyout-demo.component.html",
|
|
1809
|
+
"rawContents": "<p>\n <button\n class=\"sky-btn sky-btn-default\"\n type=\"button\"\n (click)=\"openSimpleFlyout()\"\n >\n Open flyout\n </button>\n</p>\n\n<p>\n <button\n class=\"sky-btn sky-btn-default\"\n type=\"button\"\n (click)=\"openFlyoutWithCustomWidth()\"\n >\n Open flyout with custom width\n </button>\n</p>\n\n<p>\n <button\n class=\"sky-btn sky-btn-default\"\n type=\"button\"\n (click)=\"closeAndRemoveFlyout()\"\n >\n Close flyout programmatically\n </button>\n</p>\n"
|
|
1810
|
+
},
|
|
1811
|
+
{
|
|
1812
|
+
"fileName": "flyout-demo-flyout.component.ts",
|
|
1813
|
+
"filePath": "/projects/flyout/documentation/code-examples/flyout/basic/flyout-demo-flyout.component.ts",
|
|
1814
|
+
"rawContents": "import { Component } from '@angular/core';\n\n@Component({\n selector: 'app-flyout-demo-flyout',\n template: `\n <div class=\"sky-padding-even-xl\">\n <h2 id=\"flyout-title\">Sample flyout</h2>\n <p>\n Flyouts can display large quantities of supplementary information\n related to a task, including:\n </p>\n <ul>\n <li>lists</li>\n <li>records</li>\n <li>analytics</li>\n </ul>\n </div>\n `,\n})\nexport class FlyoutDemoFlyoutComponent {}\n"
|
|
1815
1815
|
}
|
|
1816
1816
|
]
|
|
1817
1817
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@skyux/flyout",
|
|
3
|
-
"version": "9.0.0-alpha.
|
|
3
|
+
"version": "9.0.0-alpha.1",
|
|
4
4
|
"author": "Blackbaud, Inc.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"blackbaud",
|
|
@@ -36,11 +36,11 @@
|
|
|
36
36
|
"@angular/core": "^16.1.7",
|
|
37
37
|
"@angular/forms": "^16.1.7",
|
|
38
38
|
"@angular/router": "^16.1.7",
|
|
39
|
-
"@skyux/core": "9.0.0-alpha.
|
|
40
|
-
"@skyux/i18n": "9.0.0-alpha.
|
|
41
|
-
"@skyux/indicators": "9.0.0-alpha.
|
|
42
|
-
"@skyux/router": "9.0.0-alpha.
|
|
43
|
-
"@skyux/theme": "9.0.0-alpha.
|
|
39
|
+
"@skyux/core": "9.0.0-alpha.1",
|
|
40
|
+
"@skyux/i18n": "9.0.0-alpha.1",
|
|
41
|
+
"@skyux/indicators": "9.0.0-alpha.1",
|
|
42
|
+
"@skyux/router": "9.0.0-alpha.1",
|
|
43
|
+
"@skyux/theme": "9.0.0-alpha.1"
|
|
44
44
|
},
|
|
45
45
|
"dependencies": {
|
|
46
46
|
"tslib": "^2.5.0"
|