@skyux/flyout 7.0.0-beta.12 → 7.0.0-beta.13

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.
Files changed (2) hide show
  1. package/documentation.json +0 -30
  2. package/package.json +6 -6
package/documentation.json CHANGED
@@ -1812,36 +1812,6 @@
1812
1812
  "fileName": "flyout-demo.module.ts",
1813
1813
  "filePath": "/projects/flyout/documentation/code-examples/flyout/custom-headers/flyout-demo.module.ts",
1814
1814
  "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"
1815
- },
1816
- {
1817
- "fileName": "flyout-demo-context.ts",
1818
- "filePath": "/projects/flyout/documentation/code-examples/flyout/grid/flyout-demo-context.ts",
1819
- "rawContents": "export class FlyoutDemoContext {\n public id: number;\n public name: string;\n public constituentCode: string;\n public latestGift: number;\n public status: string;\n}\n"
1820
- },
1821
- {
1822
- "fileName": "flyout-demo-flyout.component.html",
1823
- "filePath": "/projects/flyout/documentation/code-examples/flyout/grid/flyout-demo-flyout.component.html",
1824
- "rawContents": "<sky-page-summary>\n <sky-page-summary-image>\n <sky-avatar [name]=\"context.name\"> </sky-avatar>\n </sky-page-summary-image>\n <sky-page-summary-title id=\"flyout-title\">\n {{ context.name }}\n </sky-page-summary-title>\n <sky-page-summary-subtitle>\n {{ context.constituentCode }}\n </sky-page-summary-subtitle>\n <sky-page-summary-status>\n <sky-label\n labelType=\"{{ context.status === 'Past due' ? 'danger' : 'success' }}\"\n >\n {{ context.status }}\n </sky-label>\n </sky-page-summary-status>\n <sky-page-summary-content>\n <h2>Constituent Summary</h2>\n <p>\n Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quis quae\n mollitia rem obcaecati. Aspernatur vitae iusto cum corporis adipisci\n corrupti dolore odit a impedit enim. Porro ab exercitationem quidem?\n Maiores!\n </p>\n </sky-page-summary-content>\n <sky-page-summary-key-info>\n <sky-key-info>\n <sky-key-info-value>\n {{ context.latestGift }}\n </sky-key-info-value>\n <sky-key-info-label> Latest gift </sky-key-info-label>\n </sky-key-info>\n </sky-page-summary-key-info>\n</sky-page-summary>\n"
1825
- },
1826
- {
1827
- "fileName": "flyout-demo-flyout.component.ts",
1828
- "filePath": "/projects/flyout/documentation/code-examples/flyout/grid/flyout-demo-flyout.component.ts",
1829
- "rawContents": "import { Component } from '@angular/core';\n\nimport { FlyoutDemoContext } from './flyout-demo-context';\n\n@Component({\n selector: 'app-flyout-demo-flyout',\n templateUrl: `flyout-demo-flyout.component.html`,\n})\nexport class FlyoutDemoFlyoutComponent {\n constructor(public context: FlyoutDemoContext) {}\n}\n"
1830
- },
1831
- {
1832
- "fileName": "flyout-demo.component.html",
1833
- "filePath": "/projects/flyout/documentation/code-examples/flyout/grid/flyout-demo.component.html",
1834
- "rawContents": "<sky-list [data]=\"users\">\n <sky-list-view-grid [rowHighlightedId]=\"rowHighlightedId\">\n <sky-grid-column field=\"name\" heading=\"Name\" [template]=\"customTemplate\">\n </sky-grid-column>\n <sky-grid-column field=\"constituentCode\" heading=\"Constituent code\">\n </sky-grid-column>\n <sky-grid-column field=\"latestGift\" heading=\"Latest gift\">\n </sky-grid-column>\n <sky-grid-column field=\"status\" heading=\"Status\"> </sky-grid-column>\n </sky-list-view-grid>\n</sky-list>\n\n<ng-template let-row=\"row\" #customTemplate>\n <button\n class=\"sky-btn sky-btn-link-inline\"\n type=\"button\"\n (click)=\"onNameClick(row)\"\n >\n {{ row.name }}\n </button>\n</ng-template>\n"
1835
- },
1836
- {
1837
- "fileName": "flyout-demo.component.ts",
1838
- "filePath": "/projects/flyout/documentation/code-examples/flyout/grid/flyout-demo.component.ts",
1839
- "rawContents": "import { Component, ViewChild } from '@angular/core';\nimport {\n SkyFlyoutConfig,\n SkyFlyoutInstance,\n SkyFlyoutService,\n} from '@skyux/flyout';\nimport { ListItemModel } from '@skyux/list-builder-common';\nimport { SkyListViewGridComponent } from '@skyux/list-builder-view-grids';\n\nimport { Subject, of } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\n\nimport { FlyoutDemoContext } from './flyout-demo-context';\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<any>;\n\n public rowHighlightedId: string;\n\n public users = of([\n {\n id: '1',\n name: 'Troy Barnes',\n constituentCode: 'Alumnus',\n latestGift: 175,\n status: 'Paid',\n },\n {\n id: '2',\n name: 'Britta Perry',\n constituentCode: 'Friend',\n latestGift: 5,\n status: 'Past due',\n },\n {\n id: '3',\n name: 'Pierce Hawthorne',\n constituentCode: 'Board Member',\n latestGift: 1500,\n status: 'Paid',\n },\n {\n id: '4',\n name: 'Annie Edison',\n constituentCode: 'Alumnus',\n latestGift: 100,\n status: 'Paid',\n },\n {\n id: '5',\n name: 'Shirley Bennett',\n constituentCode: 'Board Member',\n latestGift: 250,\n status: 'Paid',\n },\n {\n id: '6',\n name: 'Jeff Winger',\n constituentCode: 'Friend',\n latestGift: 250,\n status: 'Paid',\n },\n {\n id: '7',\n name: 'Abed Nadir',\n constituentCode: 'Major Donor',\n latestGift: 100000,\n status: 'Paid',\n },\n ]);\n\n @ViewChild(SkyListViewGridComponent)\n public listViewGridComponent: SkyListViewGridComponent | undefined;\n\n #listState: ListItemModel[];\n\n #openFlyoutStream = new Subject<boolean>();\n\n #flyoutService: SkyFlyoutService;\n\n constructor(flyoutService: SkyFlyoutService) {\n this.#flyoutService = flyoutService;\n }\n\n public onNameClick(record: FlyoutDemoContext): void {\n this.#openRecord(record);\n }\n\n #openRecord(record: FlyoutDemoContext) {\n // Prevent highlight from being prematurely removed.\n this.#openFlyoutStream.next(true);\n\n const flyoutConfig: SkyFlyoutConfig = {\n providers: [\n {\n provide: FlyoutDemoContext,\n useValue: record,\n },\n ],\n ariaLabelledBy: 'flyout-title',\n ariaRole: 'dialog',\n permalink: {\n route: {\n commands: ['/users', record.id],\n extras: {\n queryParams: {\n envid: '123456789',\n },\n },\n },\n },\n showIterator: true,\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 this.#initIterators(record, this.flyout);\n }\n\n #initIterators(record: any, flyout: SkyFlyoutInstance<any>) {\n this.rowHighlightedId = record.id;\n\n // Remove highlights when flyout is closed.\n flyout.closed.pipe(takeUntil(this.#openFlyoutStream)).subscribe(() => {\n this.rowHighlightedId = undefined;\n });\n\n this.listViewGridComponent?.items\n .pipe(takeUntil(this.#openFlyoutStream))\n .subscribe((s: any) => {\n this.#listState = s;\n\n flyout.iteratorPreviousButtonDisabled = this.#isFirstElementInArray(\n this.rowHighlightedId,\n this.#listState\n );\n flyout.iteratorNextButtonDisabled = this.#isLastElementInArray(\n this.rowHighlightedId,\n this.#listState\n );\n });\n\n flyout.iteratorPreviousButtonClick\n .pipe(takeUntil(this.#openFlyoutStream))\n .subscribe(() => {\n const previous = this.#stepToItemInArray(\n this.#listState,\n this.rowHighlightedId,\n -1\n );\n this.#openRecord(previous.data);\n });\n\n flyout.iteratorNextButtonClick\n .pipe(takeUntil(this.#openFlyoutStream))\n .subscribe(() => {\n const next = this.#stepToItemInArray(\n this.#listState,\n this.rowHighlightedId,\n 1\n );\n this.#openRecord(next.data);\n });\n\n flyout.iteratorPreviousButtonDisabled = this.#isFirstElementInArray(\n this.rowHighlightedId,\n this.#listState\n );\n flyout.iteratorNextButtonDisabled = this.#isLastElementInArray(\n this.rowHighlightedId,\n this.#listState\n );\n }\n\n #stepToItemInArray(array: Array<any>, currentId: string, step: number) {\n for (let i = 0; i < array.length; i++) {\n if (array[i].id === currentId) {\n return array[i + step];\n }\n }\n }\n\n #isFirstElementInArray(id: any, array: any[]) {\n const element = array.find((x) => x.id === id);\n if (array[0] === element) {\n return true;\n }\n return false;\n }\n\n #isLastElementInArray(id: any, array: any[]) {\n const element = array.find((x) => x.id === id);\n if (array[array.length - 1] === element) {\n return true;\n }\n return false;\n }\n}\n"
1840
- },
1841
- {
1842
- "fileName": "flyout-demo.module.ts",
1843
- "filePath": "/projects/flyout/documentation/code-examples/flyout/grid/flyout-demo.module.ts",
1844
- "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyAvatarModule } from '@skyux/avatar';\nimport { SkyFlyoutModule } from '@skyux/flyout';\nimport { SkyKeyInfoModule, SkyLabelModule } from '@skyux/indicators';\nimport { SkyPageSummaryModule } from '@skyux/layout';\nimport { SkyListModule } from '@skyux/list-builder';\nimport { SkyListViewGridModule } from '@skyux/list-builder-view-grids';\n\nimport { FlyoutDemoFlyoutComponent } from './flyout-demo-flyout.component';\nimport { FlyoutDemoComponent } from './flyout-demo.component';\n\n@NgModule({\n imports: [\n CommonModule,\n SkyAvatarModule,\n SkyFlyoutModule,\n SkyListModule,\n SkyKeyInfoModule,\n SkyLabelModule,\n SkyListViewGridModule,\n SkyPageSummaryModule,\n ],\n declarations: [FlyoutDemoComponent, FlyoutDemoFlyoutComponent],\n exports: [FlyoutDemoComponent],\n})\nexport class FlyoutDemoModule {}\n"
1845
1815
  }
1846
1816
  ]
1847
1817
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skyux/flyout",
3
- "version": "7.0.0-beta.12",
3
+ "version": "7.0.0-beta.13",
4
4
  "author": "Blackbaud, Inc.",
5
5
  "keywords": [
6
6
  "blackbaud",
@@ -38,11 +38,11 @@
38
38
  "@angular/core": "^14.2.0",
39
39
  "@angular/forms": "^14.2.0",
40
40
  "@angular/router": "^14.2.0",
41
- "@skyux/core": "7.0.0-beta.12",
42
- "@skyux/i18n": "7.0.0-beta.12",
43
- "@skyux/indicators": "7.0.0-beta.12",
44
- "@skyux/router": "7.0.0-beta.12",
45
- "@skyux/theme": "7.0.0-beta.12"
41
+ "@skyux/core": "7.0.0-beta.13",
42
+ "@skyux/i18n": "7.0.0-beta.13",
43
+ "@skyux/indicators": "7.0.0-beta.13",
44
+ "@skyux/router": "7.0.0-beta.13",
45
+ "@skyux/theme": "7.0.0-beta.13"
46
46
  },
47
47
  "dependencies": {
48
48
  "tslib": "^2.3.1"