@skyux/lists 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 +120 -120
- package/package.json +10 -10
package/documentation.json
CHANGED
|
@@ -6719,104 +6719,104 @@
|
|
|
6719
6719
|
},
|
|
6720
6720
|
"codeExamples": [
|
|
6721
6721
|
{
|
|
6722
|
-
"fileName": "
|
|
6723
|
-
"filePath": "/projects/lists/documentation/code-examples/
|
|
6724
|
-
"rawContents": "
|
|
6722
|
+
"fileName": "sort-option.ts",
|
|
6723
|
+
"filePath": "/projects/lists/documentation/code-examples/sort/basic/sort-option.ts",
|
|
6724
|
+
"rawContents": "import { RepeaterDemoItem } from './repeater-demo-item';\n\nexport interface SortOption {\n id: number;\n label: string;\n name: keyof RepeaterDemoItem;\n descending: boolean;\n}\n"
|
|
6725
6725
|
},
|
|
6726
6726
|
{
|
|
6727
|
-
"fileName": "
|
|
6728
|
-
"filePath": "/projects/lists/documentation/code-examples/
|
|
6729
|
-
"rawContents": "import {
|
|
6727
|
+
"fileName": "sort-demo.module.ts",
|
|
6728
|
+
"filePath": "/projects/lists/documentation/code-examples/sort/basic/sort-demo.module.ts",
|
|
6729
|
+
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyToolbarModule } from '@skyux/layout';\nimport { SkyRepeaterModule, SkySortModule } from '@skyux/lists';\n\nimport { SortDemoComponent } from './sort-demo.component';\n\n@NgModule({\n imports: [CommonModule, SkyRepeaterModule, SkySortModule, SkyToolbarModule],\n declarations: [SortDemoComponent],\n exports: [SortDemoComponent],\n})\nexport class SortDemoModule {}\n"
|
|
6730
6730
|
},
|
|
6731
6731
|
{
|
|
6732
|
-
"fileName": "
|
|
6733
|
-
"filePath": "/projects/lists/documentation/code-examples/
|
|
6734
|
-
"rawContents": "import {
|
|
6732
|
+
"fileName": "sort-demo.component.ts",
|
|
6733
|
+
"filePath": "/projects/lists/documentation/code-examples/sort/basic/sort-demo.component.ts",
|
|
6734
|
+
"rawContents": "import { Component, OnInit } from '@angular/core';\n\nimport { RepeaterDemoItem } from './repeater-demo-item';\nimport { SortOption } from './sort-option';\n\n@Component({\n selector: 'app-sort-demo',\n templateUrl: './sort-demo.component.html',\n})\nexport class SortDemoComponent implements OnInit {\n public initialState = 3;\n\n public sortedItems: RepeaterDemoItem[] = [\n {\n title: 'Call Robert Hernandez',\n note: 'Robert recently gave a very generous gift. We should call to thank him.',\n assignee: 'Debby Fowler',\n date: new Date('12/22/2015'),\n },\n {\n title: 'Send invitation to ball',\n note: \"The Spring Ball is coming up soon. Let's get those invitations out!\",\n assignee: 'Debby Fowler',\n date: new Date('1/1/2016'),\n },\n {\n title: 'Clean up desk',\n note: 'File and organize papers.',\n assignee: 'Tim Howard',\n date: new Date('2/2/2016'),\n },\n {\n title: 'Investigate leads',\n note: 'Check out leads for important charity event funding.',\n assignee: 'Larry Williams',\n date: new Date('4/5/2016'),\n },\n {\n title: 'Send thank you note',\n note: 'Send a thank you note to Timothy for his donation.',\n assignee: 'Catherine Hooper',\n date: new Date('11/11/2015'),\n },\n ];\n\n public sortOptions: SortOption[] = [\n {\n id: 1,\n label: 'Assigned to (A - Z)',\n name: 'assignee',\n descending: false,\n },\n {\n id: 2,\n label: 'Assigned to (Z - A)',\n name: 'assignee',\n descending: true,\n },\n {\n id: 3,\n label: 'Date created (newest first)',\n name: 'date',\n descending: true,\n },\n {\n id: 4,\n label: 'Date created (oldest first)',\n name: 'date',\n descending: false,\n },\n {\n id: 5,\n label: 'Note title (A - Z)',\n name: 'title',\n descending: false,\n },\n {\n id: 6,\n label: 'Note title (Z - A)',\n name: 'title',\n descending: true,\n },\n ];\n\n public ngOnInit(): void {\n this.sortItems(this.sortOptions[2]);\n }\n\n public sortItems(option: SortOption): void {\n this.sortedItems = this.sortedItems.sort(function (\n a: RepeaterDemoItem,\n b: RepeaterDemoItem\n ) {\n const descending = option.descending ? -1 : 1;\n const sortProperty: keyof typeof a = option.name;\n\n if (a[sortProperty] > b[sortProperty]) {\n return descending;\n } else if (a[sortProperty] < b[sortProperty]) {\n return -1 * descending;\n } else {\n return 0;\n }\n });\n }\n}\n"
|
|
6735
6735
|
},
|
|
6736
6736
|
{
|
|
6737
|
-
"fileName": "
|
|
6738
|
-
"filePath": "/projects/lists/documentation/code-examples/
|
|
6739
|
-
"rawContents": "
|
|
6737
|
+
"fileName": "sort-demo.component.html",
|
|
6738
|
+
"filePath": "/projects/lists/documentation/code-examples/sort/basic/sort-demo.component.html",
|
|
6739
|
+
"rawContents": "<sky-toolbar>\n <sky-toolbar-item>\n <sky-sort [showButtonText]=\"true\">\n <sky-sort-item\n *ngFor=\"let item of sortOptions\"\n [active]=\"initialState === item.id\"\n (itemSelect)=\"sortItems(item)\"\n >\n {{ item.label }}\n </sky-sort-item>\n </sky-sort>\n </sky-toolbar-item>\n</sky-toolbar>\n<sky-repeater expandMode=\"none\">\n <sky-repeater-item *ngFor=\"let item of sortedItems\">\n <sky-repeater-item-title>\n {{ item.title }}\n </sky-repeater-item-title>\n <sky-repeater-item-content>\n <div style=\"display: flex; justify-content: space-between\">\n <div>Assigned to {{ item.assignee }}</div>\n <div>Created {{ item.date | date }}</div>\n </div>\n <div>\n {{ item.note }}\n </div>\n </sky-repeater-item-content>\n </sky-repeater-item>\n</sky-repeater>\n"
|
|
6740
6740
|
},
|
|
6741
6741
|
{
|
|
6742
|
-
"fileName": "
|
|
6743
|
-
"filePath": "/projects/lists/documentation/code-examples/
|
|
6744
|
-
"rawContents": "export interface
|
|
6742
|
+
"fileName": "repeater-demo-item.ts",
|
|
6743
|
+
"filePath": "/projects/lists/documentation/code-examples/sort/basic/repeater-demo-item.ts",
|
|
6744
|
+
"rawContents": "export interface RepeaterDemoItem {\n title: string;\n note: string;\n assignee: string;\n date: Date;\n}\n"
|
|
6745
6745
|
},
|
|
6746
6746
|
{
|
|
6747
|
-
"fileName": "
|
|
6748
|
-
"filePath": "/projects/lists/documentation/code-examples/
|
|
6749
|
-
"rawContents": "import {
|
|
6747
|
+
"fileName": "repeater-demo.module.ts",
|
|
6748
|
+
"filePath": "/projects/lists/documentation/code-examples/repeater/inline-form/repeater-demo.module.ts",
|
|
6749
|
+
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { SkyInputBoxModule } from '@skyux/forms';\nimport { SkyIconModule } from '@skyux/indicators';\nimport { SkyInlineFormModule } from '@skyux/inline-form';\nimport { SkyRepeaterModule } from '@skyux/lists';\nimport { SkyThemeModule } from '@skyux/theme';\n\nimport { RepeaterDemoComponent } from './repeater-demo.component';\n\n@NgModule({\n imports: [\n CommonModule,\n ReactiveFormsModule,\n SkyIconModule,\n SkyInlineFormModule,\n SkyInputBoxModule,\n SkyRepeaterModule,\n SkyThemeModule,\n ],\n exports: [RepeaterDemoComponent],\n declarations: [RepeaterDemoComponent],\n})\nexport class RepeaterDemoModule {}\n"
|
|
6750
6750
|
},
|
|
6751
6751
|
{
|
|
6752
|
-
"fileName": "
|
|
6753
|
-
"filePath": "/projects/lists/documentation/code-examples/
|
|
6754
|
-
"rawContents": "
|
|
6752
|
+
"fileName": "repeater-demo.component.ts",
|
|
6753
|
+
"filePath": "/projects/lists/documentation/code-examples/repeater/inline-form/repeater-demo.component.ts",
|
|
6754
|
+
"rawContents": "import { Component } from '@angular/core';\nimport { FormBuilder, FormControl, FormGroup } from '@angular/forms';\nimport {\n SkyInlineFormButtonLayout,\n SkyInlineFormCloseArgs,\n SkyInlineFormConfig,\n} from '@skyux/inline-form';\n\nimport { RepeaterDemoItem } from './repeater-demo-item';\n\n@Component({\n selector: 'app-repeater-demo',\n templateUrl: './repeater-demo.component.html',\n styleUrls: ['./repeater-demo.component.scss'],\n})\nexport class RepeaterDemoComponent {\n public activeInlineFormId: string | undefined;\n\n public inlineFormConfig: SkyInlineFormConfig = {\n buttonLayout: SkyInlineFormButtonLayout.SaveCancel,\n };\n\n public items: RepeaterDemoItem[] = [\n {\n id: '1',\n title: '2019 Spring Gala',\n note: 'Gala for friends and family',\n },\n {\n id: '2',\n title: '2019 Special Winter Event',\n note: 'A special event',\n },\n {\n id: '3',\n title: '2019 Donor Appreciation Event',\n note: 'Event for all donors and families',\n },\n {\n id: '4',\n title: '2020 Spring Gala',\n note: 'Gala for friends and family',\n },\n ];\n\n public myForm: FormGroup;\n\n constructor(formBuilder: FormBuilder) {\n this.myForm = formBuilder.group({\n id: new FormControl(),\n title: new FormControl(),\n note: new FormControl(),\n });\n }\n\n public showInlineForm(item: RepeaterDemoItem): void {\n this.activeInlineFormId = item.id;\n this.myForm.patchValue({\n note: item.note,\n title: item.title,\n });\n }\n\n public onInlineFormClose(args: SkyInlineFormCloseArgs): void {\n if (args.reason === 'save') {\n const found = this.items.find(\n (item) => item.id === this.activeInlineFormId\n );\n if (found) {\n found.note = this.myForm.get('note')?.value;\n found.title = this.myForm.get('title')?.value;\n }\n }\n\n this.myForm.patchValue({\n note: undefined,\n title: undefined,\n });\n\n // Close the active form.\n this.activeInlineFormId = undefined;\n }\n}\n"
|
|
6755
6755
|
},
|
|
6756
6756
|
{
|
|
6757
|
-
"fileName": "
|
|
6758
|
-
"filePath": "/projects/lists/documentation/code-examples/
|
|
6759
|
-
"rawContents": "
|
|
6757
|
+
"fileName": "repeater-demo.component.scss",
|
|
6758
|
+
"filePath": "/projects/lists/documentation/code-examples/repeater/inline-form/repeater-demo.component.scss",
|
|
6759
|
+
"rawContents": ".demo-repeater-flex {\n display: flex;\n align-items: center;\n}\n"
|
|
6760
6760
|
},
|
|
6761
6761
|
{
|
|
6762
|
-
"fileName": "
|
|
6763
|
-
"filePath": "/projects/lists/documentation/code-examples/
|
|
6764
|
-
"rawContents": "<sky-
|
|
6762
|
+
"fileName": "repeater-demo.component.html",
|
|
6763
|
+
"filePath": "/projects/lists/documentation/code-examples/repeater/inline-form/repeater-demo.component.html",
|
|
6764
|
+
"rawContents": "<sky-repeater>\n <sky-repeater-item\n *ngFor=\"let item of items\"\n [inlineFormConfig]=\"inlineFormConfig\"\n [inlineFormTemplate]=\"inlineFormTemplate\"\n [showInlineForm]=\"activeInlineFormId === item.id\"\n (inlineFormClose)=\"onInlineFormClose($event)\"\n >\n <sky-repeater-item-title>\n <div class=\"sky-font-emphasized\">\n {{ item.title }}\n </div>\n </sky-repeater-item-title>\n <sky-repeater-item-context-menu>\n <button\n aria-label=\"Edit\"\n class=\"sky-btn sky-btn-icon-borderless\"\n type=\"button\"\n (click)=\"showInlineForm(item)\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"pencil\"></sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"edit\"\n iconType=\"skyux\"\n ></sky-icon>\n </button>\n </sky-repeater-item-context-menu>\n\n <sky-repeater-item-content>\n {{ item.note }}\n </sky-repeater-item-content>\n </sky-repeater-item>\n</sky-repeater>\n\n<ng-template #inlineFormTemplate>\n <form novalidate [formGroup]=\"myForm\">\n <sky-input-box labelText=\"Title\" stacked=\"true\">\n <input formControlName=\"title\" type=\"text\" />\n </sky-input-box>\n <sky-input-box labelText=\"Note\">\n <input formControlName=\"note\" type=\"text\" />\n </sky-input-box>\n </form>\n</ng-template>\n"
|
|
6765
6765
|
},
|
|
6766
6766
|
{
|
|
6767
|
-
"fileName": "
|
|
6768
|
-
"filePath": "/projects/lists/documentation/code-examples/
|
|
6769
|
-
"rawContents": "
|
|
6767
|
+
"fileName": "repeater-demo-item.ts",
|
|
6768
|
+
"filePath": "/projects/lists/documentation/code-examples/repeater/inline-form/repeater-demo-item.ts",
|
|
6769
|
+
"rawContents": "export interface RepeaterDemoItem {\n id: string;\n title: string | undefined;\n note: string | undefined;\n}\n"
|
|
6770
6770
|
},
|
|
6771
6771
|
{
|
|
6772
|
-
"fileName": "
|
|
6773
|
-
"filePath": "/projects/lists/documentation/code-examples/
|
|
6774
|
-
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport {
|
|
6772
|
+
"fileName": "repeater-demo.module.ts",
|
|
6773
|
+
"filePath": "/projects/lists/documentation/code-examples/repeater/basic/repeater-demo.module.ts",
|
|
6774
|
+
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyRepeaterModule } from '@skyux/lists';\nimport { SkyDropdownModule } from '@skyux/popovers';\n\nimport { RepeaterDemoComponent } from './repeater-demo.component';\n\n@NgModule({\n imports: [CommonModule, SkyDropdownModule, SkyRepeaterModule],\n declarations: [RepeaterDemoComponent],\n exports: [RepeaterDemoComponent],\n})\nexport class RepeaterDemoModule {}\n"
|
|
6775
6775
|
},
|
|
6776
6776
|
{
|
|
6777
|
-
"fileName": "
|
|
6778
|
-
"filePath": "/projects/lists/documentation/code-examples/
|
|
6779
|
-
"rawContents": "
|
|
6777
|
+
"fileName": "repeater-demo.component.ts",
|
|
6778
|
+
"filePath": "/projects/lists/documentation/code-examples/repeater/basic/repeater-demo.component.ts",
|
|
6779
|
+
"rawContents": "import { Component } from '@angular/core';\n\n@Component({\n selector: 'app-repeater-demo',\n templateUrl: './repeater-demo.component.html',\n styleUrls: ['./repeater-demo.component.scss'],\n})\nexport class RepeaterDemoComponent {\n public items: any[] = [\n {\n title: 'Call Robert Hernandez',\n note: 'Robert recently gave a very generous gift. We should call him to thank him.',\n status: 'Completed',\n },\n {\n title: 'Send invitation to Spring Ball',\n note: \"The Spring Ball is coming up soon. Let's get those invitations out!\",\n status: 'Past due',\n },\n {\n title: 'Assign prospects',\n note: 'There are 14 new prospects who are not assigned to fundraisers.',\n status: 'Due tomorrow',\n },\n {\n title: 'Process gift receipts',\n note: 'There are 28 recent gifts that are not receipted.',\n status: 'Due next week',\n },\n ];\n\n public onActionClicked(buttonText: string): void {\n alert(buttonText + ' was clicked!');\n }\n}\n"
|
|
6780
6780
|
},
|
|
6781
6781
|
{
|
|
6782
|
-
"fileName": "
|
|
6783
|
-
"filePath": "/projects/lists/documentation/code-examples/
|
|
6784
|
-
"rawContents": "
|
|
6782
|
+
"fileName": "repeater-demo.component.spec.ts",
|
|
6783
|
+
"filePath": "/projects/lists/documentation/code-examples/repeater/basic/repeater-demo.component.spec.ts",
|
|
6784
|
+
"rawContents": "import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';\nimport { ComponentFixture, TestBed } from '@angular/core/testing';\nimport { NoopAnimationsModule } from '@angular/platform-browser/animations';\nimport {\n SkyRepeaterHarness,\n SkyRepeaterItemHarness,\n} from '@skyux/lists/testing';\n\nimport { RepeaterDemoComponent } from './repeater-demo.component';\nimport { RepeaterDemoModule } from './repeater-demo.module';\n\ndescribe('Repeater basic demo', () => {\n async function setupTest(): Promise<{\n repeaterHarness: SkyRepeaterHarness | null;\n repeaterItems: SkyRepeaterItemHarness[] | null;\n fixture: ComponentFixture<RepeaterDemoComponent>;\n }> {\n const fixture = TestBed.createComponent(RepeaterDemoComponent);\n const loader = TestbedHarnessEnvironment.loader(fixture);\n\n const repeaterHarness = await loader.getHarness(\n SkyRepeaterHarness.with({ dataSkyId: 'repeater-demo' })\n );\n\n const repeaterItems = await repeaterHarness.getRepeaterItems();\n\n return { repeaterHarness, repeaterItems, fixture };\n }\n\n beforeEach(() => {\n TestBed.configureTestingModule({\n imports: [RepeaterDemoModule, NoopAnimationsModule],\n });\n });\n\n it('should display the repeater item contents', async () => {\n const { repeaterItems } = await setupTest();\n\n const expectedContent = [\n {\n title: 'Call Robert Hernandez Completed',\n body: 'Robert recently gave a very generous gift. We should call him to thank him.',\n },\n {\n title: 'Send invitation to Spring Ball Past due',\n body: \"The Spring Ball is coming up soon. Let's get those invitations out!\",\n },\n {\n title: 'Assign prospects Due tomorrow',\n body: 'There are 14 new prospects who are not assigned to fundraisers.',\n },\n {\n title: 'Process gift receipts Due next week',\n body: 'There are 28 recent gifts that are not receipted.',\n },\n ];\n\n expect(repeaterItems?.length).toBe(expectedContent.length);\n\n if (repeaterItems) {\n for (let i = 0; i < repeaterItems.length; i++) {\n await expectAsync(repeaterItems[i].getTitleText()).toBeResolvedTo(\n expectedContent[i].title\n );\n await expectAsync(repeaterItems[i].getContentText()).toBeResolvedTo(\n expectedContent[i].body\n );\n }\n }\n });\n});\n"
|
|
6785
6785
|
},
|
|
6786
6786
|
{
|
|
6787
|
-
"fileName": "
|
|
6788
|
-
"filePath": "/projects/lists/documentation/code-examples/
|
|
6789
|
-
"rawContents": "
|
|
6787
|
+
"fileName": "repeater-demo.component.scss",
|
|
6788
|
+
"filePath": "/projects/lists/documentation/code-examples/repeater/basic/repeater-demo.component.scss",
|
|
6789
|
+
"rawContents": ".demo-repeater-flex {\n display: flex;\n flex-wrap: wrap;\n\n .demo-repeater-item-title {\n flex-grow: 1;\n }\n}\n"
|
|
6790
6790
|
},
|
|
6791
6791
|
{
|
|
6792
|
-
"fileName": "
|
|
6793
|
-
"filePath": "/projects/lists/documentation/code-examples/
|
|
6794
|
-
"rawContents": "<
|
|
6792
|
+
"fileName": "repeater-demo.component.html",
|
|
6793
|
+
"filePath": "/projects/lists/documentation/code-examples/repeater/basic/repeater-demo.component.html",
|
|
6794
|
+
"rawContents": "<sky-repeater data-sky-id=\"repeater-demo\">\n <sky-repeater-item *ngFor=\"let item of items\">\n <sky-repeater-item-title class=\"demo-repeater-flex\">\n <div class=\"demo-repeater-item-title sky-font-emphasized\">\n {{ item.title }}\n </div>\n <div>\n {{ item.status }}\n </div>\n </sky-repeater-item-title>\n <sky-repeater-item-context-menu>\n <sky-dropdown buttonType=\"context-menu\">\n <sky-dropdown-menu>\n <sky-dropdown-item>\n <button type=\"button\" (click)=\"onActionClicked('Action 1')\">\n Action 1\n </button>\n </sky-dropdown-item>\n <sky-dropdown-item>\n <button type=\"button\" (click)=\"onActionClicked('Action 2')\">\n Action 2\n </button>\n </sky-dropdown-item>\n </sky-dropdown-menu>\n </sky-dropdown>\n </sky-repeater-item-context-menu>\n <sky-repeater-item-content>\n {{ item.note }}\n </sky-repeater-item-content>\n </sky-repeater-item>\n</sky-repeater>\n"
|
|
6795
6795
|
},
|
|
6796
6796
|
{
|
|
6797
|
-
"fileName": "
|
|
6798
|
-
"filePath": "/projects/lists/documentation/code-examples/
|
|
6799
|
-
"rawContents": "import {
|
|
6797
|
+
"fileName": "repeater-demo.module.ts",
|
|
6798
|
+
"filePath": "/projects/lists/documentation/code-examples/repeater/add-remove/repeater-demo.module.ts",
|
|
6799
|
+
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyRepeaterModule } from '@skyux/lists';\nimport { SkyDropdownModule } from '@skyux/popovers';\n\nimport { RepeaterDemoComponent } from './repeater-demo.component';\n\n@NgModule({\n imports: [CommonModule, SkyDropdownModule, SkyRepeaterModule],\n declarations: [RepeaterDemoComponent],\n exports: [RepeaterDemoComponent],\n})\nexport class RepeaterDemoModule {}\n"
|
|
6800
6800
|
},
|
|
6801
6801
|
{
|
|
6802
|
-
"fileName": "
|
|
6803
|
-
"filePath": "/projects/lists/documentation/code-examples/
|
|
6804
|
-
"rawContents": "import {
|
|
6802
|
+
"fileName": "repeater-demo.component.ts",
|
|
6803
|
+
"filePath": "/projects/lists/documentation/code-examples/repeater/add-remove/repeater-demo.component.ts",
|
|
6804
|
+
"rawContents": "import { Component } from '@angular/core';\n\nimport { RepeaterDemoItem } from './repeater-demo-item';\n\nlet nextId = 0;\n\n@Component({\n selector: 'app-repeater-demo',\n templateUrl: './repeater-demo.component.html',\n styleUrls: ['./repeater-demo.component.scss'],\n})\nexport class RepeaterDemoComponent {\n public items: RepeaterDemoItem[] = [\n {\n title: 'Call Robert Hernandez',\n note: 'Robert recently gave a very generous gift. We should call him to thank him.',\n status: 'Completed',\n isSelected: false,\n },\n {\n title: 'Send invitation to Spring Ball',\n note: \"The Spring Ball is coming up soon. Let's get those invitations out!\",\n status: 'Past due',\n isSelected: false,\n },\n {\n title: 'Assign prospects',\n note: 'There are 14 new prospects who are not assigned to fundraisers.',\n status: 'Due tomorrow',\n isSelected: false,\n },\n {\n title: 'Process gift receipts',\n note: 'There are 28 recent gifts that are not receipted.',\n status: 'Due next week',\n isSelected: false,\n },\n ];\n\n public addItem(): void {\n this.items.push({\n title: 'New reminder ' + ++nextId,\n note: 'This is a new reminder',\n status: 'Active',\n isSelected: false,\n });\n }\n\n public changeItems(tags: RepeaterDemoItem[]): void {\n console.log('Tags in order ', tags);\n }\n\n public onActionClicked(buttonText: string): void {\n alert(buttonText + ' was clicked!');\n }\n\n public removeItems(): void {\n this.items = this.items.filter((item) => !item.isSelected);\n }\n}\n"
|
|
6805
6805
|
},
|
|
6806
6806
|
{
|
|
6807
|
-
"fileName": "
|
|
6808
|
-
"filePath": "/projects/lists/documentation/code-examples/
|
|
6809
|
-
"rawContents": "
|
|
6807
|
+
"fileName": "repeater-demo.component.spec.ts",
|
|
6808
|
+
"filePath": "/projects/lists/documentation/code-examples/repeater/add-remove/repeater-demo.component.spec.ts",
|
|
6809
|
+
"rawContents": "import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';\nimport { ComponentFixture, TestBed } from '@angular/core/testing';\nimport { NoopAnimationsModule } from '@angular/platform-browser/animations';\nimport {\n SkyRepeaterHarness,\n SkyRepeaterItemHarness,\n} from '@skyux/lists/testing';\n\nimport { RepeaterDemoComponent } from './repeater-demo.component';\nimport { RepeaterDemoModule } from './repeater-demo.module';\n\ndescribe('Repeater add remove demo', () => {\n async function setupTest(): Promise<{\n repeaterHarness: SkyRepeaterHarness | null;\n repeaterItems: SkyRepeaterItemHarness[] | null;\n fixture: ComponentFixture<RepeaterDemoComponent>;\n }> {\n const fixture = TestBed.createComponent(RepeaterDemoComponent);\n const loader = TestbedHarnessEnvironment.loader(fixture);\n\n const repeaterHarness = await loader.getHarness(\n SkyRepeaterHarness.with({ dataSkyId: 'repeater-demo' })\n );\n\n const repeaterItems = await repeaterHarness.getRepeaterItems();\n\n return { repeaterHarness, repeaterItems, fixture };\n }\n\n beforeEach(() => {\n TestBed.configureTestingModule({\n imports: [RepeaterDemoModule, NoopAnimationsModule],\n });\n });\n\n it('should allow items to be expanded and collapsed', async () => {\n const { repeaterItems } = await setupTest();\n let first = true;\n\n for (const item of repeaterItems!) {\n await expectAsync(item.isCollapsible()).toBeResolvedTo(true);\n // in single expand mode, the first item is expanded by default\n await expectAsync(item.isExpanded()).toBeResolvedTo(first ? true : false);\n first = false;\n await item.collapse();\n await expectAsync(item.isExpanded()).toBeResolvedTo(false);\n await item.expand();\n await expectAsync(item.isExpanded()).toBeResolvedTo(true);\n }\n });\n\n it('should allow items to be reordered', async () => {\n const { repeaterHarness } = await setupTest();\n\n const expectedContent = [\n {\n title: 'Call Robert Hernandez Completed',\n body: 'Robert recently gave a very generous gift. We should call him to thank him.',\n },\n {\n title: 'Send invitation to Spring Ball Past due',\n body: \"The Spring Ball is coming up soon. Let's get those invitations out!\",\n },\n {\n title: 'Assign prospects Due tomorrow',\n body: 'There are 14 new prospects who are not assigned to fundraisers.',\n },\n {\n title: 'Process gift receipts Due next week',\n body: 'There are 28 recent gifts that are not receipted.',\n },\n ];\n\n let repeaterItems = await repeaterHarness?.getRepeaterItems();\n expect(repeaterItems).toBeDefined();\n expect(repeaterItems?.length).toBe(expectedContent.length);\n\n if (repeaterItems) {\n for (const item of repeaterItems) {\n await expectAsync(item.isReorderable()).toBeResolvedTo(true);\n }\n\n await expectAsync(repeaterItems?.[1].getTitleText()).toBeResolvedTo(\n expectedContent[1].title\n );\n await repeaterItems?.[1].sendToTop();\n\n repeaterItems = await repeaterHarness?.getRepeaterItems();\n await expectAsync(repeaterItems?.[1].getTitleText()).toBeResolvedTo(\n expectedContent[0].title\n );\n }\n });\n\n it('should allow items to be added and removed', async () => {\n const { repeaterHarness, fixture } = await setupTest();\n\n let repeaterItems = await repeaterHarness?.getRepeaterItems();\n expect(repeaterItems).toBeDefined();\n expect(repeaterItems?.length).toBe(4);\n\n if (repeaterItems) {\n for (const item of repeaterItems) {\n await expectAsync(item.isSelectable()).toBeResolvedTo(true);\n }\n\n const addButton = fixture.nativeElement.querySelector(\n '[data-sky-id=\"add-button\"]'\n );\n const removeButton = fixture.nativeElement.querySelector(\n '[data-sky-id=\"remove-button\"]'\n );\n\n addButton.click();\n fixture.detectChanges();\n\n repeaterItems = await repeaterHarness?.getRepeaterItems();\n expect(repeaterItems).toBeDefined();\n expect(repeaterItems?.length).toBe(5);\n\n await expectAsync(repeaterItems?.[0].isSelected()).toBeResolvedTo(false);\n await repeaterItems?.[0].select();\n await expectAsync(repeaterItems?.[0].isSelected()).toBeResolvedTo(true);\n await expectAsync(repeaterItems?.[1].isSelected()).toBeResolvedTo(false);\n await repeaterItems?.[1].select();\n await expectAsync(repeaterItems?.[1].isSelected()).toBeResolvedTo(true);\n\n removeButton.click();\n fixture.detectChanges();\n\n repeaterItems = await repeaterHarness?.getRepeaterItems();\n expect(repeaterItems).toBeDefined();\n expect(repeaterItems?.length).toBe(3);\n }\n });\n});\n"
|
|
6810
6810
|
},
|
|
6811
6811
|
{
|
|
6812
|
-
"fileName": "
|
|
6813
|
-
"filePath": "/projects/lists/documentation/code-examples/
|
|
6814
|
-
"rawContents": "
|
|
6812
|
+
"fileName": "repeater-demo.component.scss",
|
|
6813
|
+
"filePath": "/projects/lists/documentation/code-examples/repeater/add-remove/repeater-demo.component.scss",
|
|
6814
|
+
"rawContents": ".demo-repeater-flex {\n display: flex;\n flex-wrap: wrap;\n\n .demo-repeater-item-title {\n flex-grow: 1;\n }\n}\n"
|
|
6815
6815
|
},
|
|
6816
6816
|
{
|
|
6817
|
-
"fileName": "
|
|
6818
|
-
"filePath": "/projects/lists/documentation/code-examples/
|
|
6819
|
-
"rawContents": "
|
|
6817
|
+
"fileName": "repeater-demo.component.html",
|
|
6818
|
+
"filePath": "/projects/lists/documentation/code-examples/repeater/add-remove/repeater-demo.component.html",
|
|
6819
|
+
"rawContents": "<div class=\"sky-margin-stacked-lg\">\n <sky-repeater\n [reorderable]=\"true\"\n (orderChange)=\"changeItems($event)\"\n [expandMode]=\"'single'\"\n data-sky-id=\"repeater-demo\"\n >\n <sky-repeater-item\n *ngFor=\"let item of items\"\n [tag]=\"item.note\"\n [selectable]=\"true\"\n [(isSelected)]=\"item.isSelected\"\n >\n <sky-repeater-item-title class=\"demo-repeater-flex\">\n <div class=\"demo-repeater-item-title sky-font-emphasized\">\n {{ item.title }}\n </div>\n <div>\n {{ item.status }}\n </div>\n </sky-repeater-item-title>\n <sky-repeater-item-context-menu>\n <sky-dropdown buttonType=\"context-menu\">\n <sky-dropdown-menu>\n <sky-dropdown-item>\n <button type=\"button\" (click)=\"onActionClicked('Action 1')\">\n Action 1\n </button>\n </sky-dropdown-item>\n <sky-dropdown-item>\n <button type=\"button\" (click)=\"onActionClicked('Action 2')\">\n Action 2\n </button>\n </sky-dropdown-item>\n </sky-dropdown-menu>\n </sky-dropdown>\n </sky-repeater-item-context-menu>\n <sky-repeater-item-content>\n {{ item.note }}\n </sky-repeater-item-content>\n </sky-repeater-item>\n </sky-repeater>\n</div>\n\n<button\n data-sky-id=\"add-button\"\n class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n (click)=\"addItem()\"\n>\n Add item\n</button>\n\n<button\n data-sky-id=\"remove-button\"\n class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n (click)=\"removeItems()\"\n>\n Remove selected items\n</button>\n"
|
|
6820
6820
|
},
|
|
6821
6821
|
{
|
|
6822
6822
|
"fileName": "repeater-demo-item.ts",
|
|
@@ -6824,104 +6824,104 @@
|
|
|
6824
6824
|
"rawContents": "export interface RepeaterDemoItem {\n title: string;\n note: string;\n status: string;\n isSelected: boolean;\n}\n"
|
|
6825
6825
|
},
|
|
6826
6826
|
{
|
|
6827
|
-
"fileName": "
|
|
6828
|
-
"filePath": "/projects/lists/documentation/code-examples/
|
|
6829
|
-
"rawContents": "
|
|
6827
|
+
"fileName": "paging-demo.module.ts",
|
|
6828
|
+
"filePath": "/projects/lists/documentation/code-examples/paging/basic/paging-demo.module.ts",
|
|
6829
|
+
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyPagingModule } from '@skyux/lists';\n\nimport { PagingDemoComponent } from './paging-demo.component';\n\n@NgModule({\n imports: [CommonModule, SkyPagingModule],\n declarations: [PagingDemoComponent],\n exports: [PagingDemoComponent],\n})\nexport class PagingDemoModule {}\n"
|
|
6830
6830
|
},
|
|
6831
6831
|
{
|
|
6832
|
-
"fileName": "
|
|
6833
|
-
"filePath": "/projects/lists/documentation/code-examples/
|
|
6834
|
-
"rawContents": "
|
|
6832
|
+
"fileName": "paging-demo.component.ts",
|
|
6833
|
+
"filePath": "/projects/lists/documentation/code-examples/paging/basic/paging-demo.component.ts",
|
|
6834
|
+
"rawContents": "import { Component } from '@angular/core';\n\n@Component({\n selector: 'app-paging-demo',\n templateUrl: './paging-demo.component.html',\n})\nexport class PagingDemoComponent {\n public currentPage = 1;\n}\n"
|
|
6835
6835
|
},
|
|
6836
6836
|
{
|
|
6837
|
-
"fileName": "
|
|
6838
|
-
"filePath": "/projects/lists/documentation/code-examples/
|
|
6839
|
-
"rawContents": "
|
|
6837
|
+
"fileName": "paging-demo.component.html",
|
|
6838
|
+
"filePath": "/projects/lists/documentation/code-examples/paging/basic/paging-demo.component.html",
|
|
6839
|
+
"rawContents": "<sky-paging\n [itemCount]=\"8\"\n [maxPages]=\"3\"\n [pageSize]=\"2\"\n [(currentPage)]=\"currentPage\"\n>\n</sky-paging>\n<p>The current page is {{ currentPage }}.</p>\n"
|
|
6840
6840
|
},
|
|
6841
6841
|
{
|
|
6842
|
-
"fileName": "
|
|
6843
|
-
"filePath": "/projects/lists/documentation/code-examples/
|
|
6844
|
-
"rawContents": "import {
|
|
6842
|
+
"fileName": "infinite-scroll-demo.module.ts",
|
|
6843
|
+
"filePath": "/projects/lists/documentation/code-examples/infinite-scroll/repeater/infinite-scroll-demo.module.ts",
|
|
6844
|
+
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyBackToTopModule } from '@skyux/layout';\nimport { SkyInfiniteScrollModule, SkyRepeaterModule } from '@skyux/lists';\n\nimport { InfiniteScrollDemoComponent } from './infinite-scroll-demo.component';\n\n@NgModule({\n imports: [\n CommonModule,\n SkyBackToTopModule,\n SkyInfiniteScrollModule,\n SkyRepeaterModule,\n ],\n declarations: [InfiniteScrollDemoComponent],\n exports: [InfiniteScrollDemoComponent],\n})\nexport class InfiniteScrollDemoModule {}\n"
|
|
6845
6845
|
},
|
|
6846
6846
|
{
|
|
6847
|
-
"fileName": "
|
|
6848
|
-
"filePath": "/projects/lists/documentation/code-examples/
|
|
6849
|
-
"rawContents": "import {
|
|
6847
|
+
"fileName": "infinite-scroll-demo.component.ts",
|
|
6848
|
+
"filePath": "/projects/lists/documentation/code-examples/infinite-scroll/repeater/infinite-scroll-demo.component.ts",
|
|
6849
|
+
"rawContents": "import { Component, OnInit } from '@angular/core';\n\nimport { InfiniteScrollDemoItem } from './infinite-scroll-demo-item';\n\nlet nextId = 0;\n\n@Component({\n selector: 'app-infinite-scroll-demo',\n templateUrl: './infinite-scroll-demo.component.html',\n})\nexport class InfiniteScrollDemoComponent implements OnInit {\n public items: InfiniteScrollDemoItem[] = [];\n\n public itemsHaveMore = true;\n\n public ngOnInit(): void {\n this.addData();\n }\n\n public onScrollEnd(): void {\n if (this.itemsHaveMore) {\n this.addData();\n }\n }\n\n private addData(): void {\n this.mockRemote().then(\n (result: { data: InfiniteScrollDemoItem[]; hasMore: boolean }) => {\n this.items = this.items.concat(result.data);\n this.itemsHaveMore = result.hasMore;\n }\n );\n }\n\n private mockRemote(): Promise<{\n data: InfiniteScrollDemoItem[];\n hasMore: boolean;\n }> {\n const data: InfiniteScrollDemoItem[] = [];\n\n for (let i = 0; i < 8; i++) {\n data.push({\n name: `Item #${++nextId}`,\n });\n }\n\n // Simulate async request.\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve({\n data,\n hasMore: nextId < 50,\n });\n }, 1000);\n });\n }\n}\n"
|
|
6850
6850
|
},
|
|
6851
6851
|
{
|
|
6852
|
-
"fileName": "
|
|
6853
|
-
"filePath": "/projects/lists/documentation/code-examples/repeater/
|
|
6854
|
-
"rawContents": "<
|
|
6852
|
+
"fileName": "infinite-scroll-demo.component.html",
|
|
6853
|
+
"filePath": "/projects/lists/documentation/code-examples/infinite-scroll/repeater/infinite-scroll-demo.component.html",
|
|
6854
|
+
"rawContents": "<div style=\"overflow-y: auto; max-height: 500px; position: relative\">\n <sky-repeater>\n <sky-repeater-item *ngFor=\"let item of items\">\n <sky-repeater-item-title>\n {{ item.name }}\n </sky-repeater-item-title>\n </sky-repeater-item>\n </sky-repeater>\n <sky-infinite-scroll [enabled]=\"itemsHaveMore\" (scrollEnd)=\"onScrollEnd()\">\n </sky-infinite-scroll>\n</div>\n<br />\n<br />\n"
|
|
6855
6855
|
},
|
|
6856
6856
|
{
|
|
6857
|
-
"fileName": "
|
|
6858
|
-
"filePath": "/projects/lists/documentation/code-examples/repeater/
|
|
6859
|
-
"rawContents": "
|
|
6857
|
+
"fileName": "infinite-scroll-demo-item.ts",
|
|
6858
|
+
"filePath": "/projects/lists/documentation/code-examples/infinite-scroll/repeater/infinite-scroll-demo-item.ts",
|
|
6859
|
+
"rawContents": "export interface InfiniteScrollDemoItem {\n name: string;\n}\n"
|
|
6860
6860
|
},
|
|
6861
6861
|
{
|
|
6862
|
-
"fileName": "
|
|
6863
|
-
"filePath": "/projects/lists/documentation/code-examples/
|
|
6864
|
-
"rawContents": "
|
|
6862
|
+
"fileName": "fruit.ts",
|
|
6863
|
+
"filePath": "/projects/lists/documentation/code-examples/filter/modal/fruit.ts",
|
|
6864
|
+
"rawContents": "export interface Fruit {\n name: string;\n type: string;\n color: string;\n}\n"
|
|
6865
6865
|
},
|
|
6866
6866
|
{
|
|
6867
|
-
"fileName": "
|
|
6868
|
-
"filePath": "/projects/lists/documentation/code-examples/
|
|
6869
|
-
"rawContents": "
|
|
6867
|
+
"fileName": "filter.ts",
|
|
6868
|
+
"filePath": "/projects/lists/documentation/code-examples/filter/modal/filter.ts",
|
|
6869
|
+
"rawContents": "export interface Filter {\n name: string;\n value: string | boolean;\n label: string;\n}\n"
|
|
6870
6870
|
},
|
|
6871
6871
|
{
|
|
6872
|
-
"fileName": "
|
|
6873
|
-
"filePath": "/projects/lists/documentation/code-examples/
|
|
6874
|
-
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyRepeaterModule } from '@skyux/lists';\nimport {
|
|
6872
|
+
"fileName": "filter-demo.module.ts",
|
|
6873
|
+
"filePath": "/projects/lists/documentation/code-examples/filter/modal/filter-demo.module.ts",
|
|
6874
|
+
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { SkyCheckboxModule, SkyInputBoxModule } from '@skyux/forms';\nimport { SkyToolbarModule } from '@skyux/layout';\nimport { SkyFilterModule, SkyRepeaterModule } from '@skyux/lists';\nimport { SkyModalModule } from '@skyux/modals';\n\nimport { FilterDemoModalComponent } from './filter-demo-modal.component';\nimport { FilterDemoComponent } from './filter-demo.component';\n\n@NgModule({\n imports: [\n CommonModule,\n FormsModule,\n SkyCheckboxModule,\n SkyInputBoxModule,\n SkyFilterModule,\n SkyModalModule,\n SkyRepeaterModule,\n SkyToolbarModule,\n ],\n declarations: [FilterDemoComponent, FilterDemoModalComponent],\n exports: [FilterDemoComponent],\n})\nexport class FilterDemoModule {}\n"
|
|
6875
6875
|
},
|
|
6876
6876
|
{
|
|
6877
|
-
"fileName": "
|
|
6878
|
-
"filePath": "/projects/lists/documentation/code-examples/
|
|
6879
|
-
"rawContents": "
|
|
6877
|
+
"fileName": "filter-demo.component.ts",
|
|
6878
|
+
"filePath": "/projects/lists/documentation/code-examples/filter/modal/filter-demo.component.ts",
|
|
6879
|
+
"rawContents": "import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n} from '@angular/core';\nimport { SkyModalCloseArgs, SkyModalService } from '@skyux/modals';\n\nimport { Filter } from './filter';\nimport { FilterDemoModalContext } from './filter-demo-modal-context';\nimport { FilterDemoModalComponent } from './filter-demo-modal.component';\nimport { Fruit } from './fruit';\n\n@Component({\n selector: 'app-filter-demo',\n templateUrl: './filter-demo.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class FilterDemoComponent {\n public appliedFilters: Filter[] = [];\n\n public filteredItems: Fruit[];\n\n public items: Fruit[] = [\n {\n name: 'Orange',\n type: 'citrus',\n color: 'orange',\n },\n {\n name: 'Mango',\n type: 'other',\n color: 'orange',\n },\n {\n name: 'Lime',\n type: 'citrus',\n color: 'green',\n },\n {\n name: 'Strawberry',\n type: 'berry',\n color: 'red',\n },\n {\n name: 'Blueberry',\n type: 'berry',\n color: 'blue',\n },\n ];\n\n public showInlineFilters = false;\n\n constructor(\n private modal: SkyModalService,\n private changeRef: ChangeDetectorRef\n ) {\n this.filteredItems = this.items.slice();\n }\n\n public onDismiss(index: number): void {\n this.appliedFilters.splice(index, 1);\n this.filteredItems = this.filterItems(this.items, this.appliedFilters);\n }\n\n public onInlineFilterButtonClicked(): void {\n this.showInlineFilters = !this.showInlineFilters;\n }\n\n public onModalFilterButtonClick(): void {\n const modalInstance = this.modal.open(FilterDemoModalComponent, [\n {\n provide: FilterDemoModalContext,\n useValue: {\n appliedFilters: this.appliedFilters,\n },\n },\n ]);\n\n modalInstance.closed.subscribe((result: SkyModalCloseArgs) => {\n if (result.reason === 'save') {\n this.appliedFilters = result.data.slice();\n this.filteredItems = this.filterItems(this.items, this.appliedFilters);\n this.changeRef.markForCheck();\n }\n });\n }\n\n private fruitTypeFilterFailed(filter: Filter, item: Fruit): boolean {\n return (\n filter.name === 'fruitType' &&\n filter.value !== 'any' &&\n filter.value !== item.type\n );\n }\n\n private itemIsShown(filters: Filter[], item: Fruit): boolean {\n let passesFilter = true,\n j: number;\n\n for (j = 0; j < filters.length; j++) {\n if (this.orangeFilterFailed(filters[j], item)) {\n passesFilter = false;\n } else if (this.fruitTypeFilterFailed(filters[j], item)) {\n passesFilter = false;\n }\n }\n\n return passesFilter;\n }\n\n private filterItems(items: Fruit[], filters: Filter[]): Fruit[] {\n let i: number, passesFilter: boolean;\n const result: Fruit[] = [];\n\n for (i = 0; i < items.length; i++) {\n passesFilter = this.itemIsShown(filters, items[i]);\n if (passesFilter) {\n result.push(items[i]);\n }\n }\n\n return result;\n }\n\n private orangeFilterFailed(filter: Filter, item: Fruit): boolean {\n return (\n filter.name === 'hideOrange' && !!filter.value && item.color === 'orange'\n );\n }\n}\n"
|
|
6880
6880
|
},
|
|
6881
6881
|
{
|
|
6882
|
-
"fileName": "
|
|
6883
|
-
"filePath": "/projects/lists/documentation/code-examples/
|
|
6884
|
-
"rawContents": "<sky-
|
|
6882
|
+
"fileName": "filter-demo.component.html",
|
|
6883
|
+
"filePath": "/projects/lists/documentation/code-examples/filter/modal/filter-demo.component.html",
|
|
6884
|
+
"rawContents": "<sky-toolbar>\n <sky-toolbar-section>\n <sky-toolbar-item>\n <sky-filter-button\n [showButtonText]=\"true\"\n (filterButtonClick)=\"onModalFilterButtonClick()\"\n >\n </sky-filter-button>\n </sky-toolbar-item>\n </sky-toolbar-section>\n <sky-toolbar-section *ngIf=\"appliedFilters && appliedFilters.length > 0\">\n <sky-filter-summary>\n <sky-filter-summary-item\n *ngFor=\"let item of appliedFilters; let i = index\"\n (dismiss)=\"onDismiss(i)\"\n >\n {{ item.label }}\n </sky-filter-summary-item>\n </sky-filter-summary>\n </sky-toolbar-section>\n</sky-toolbar>\n<sky-repeater expandMode=\"none\">\n <sky-repeater-item *ngFor=\"let item of filteredItems\">\n <sky-repeater-item-title>\n {{ item.name }}\n </sky-repeater-item-title>\n </sky-repeater-item>\n</sky-repeater>\n"
|
|
6885
6885
|
},
|
|
6886
6886
|
{
|
|
6887
|
-
"fileName": "
|
|
6888
|
-
"filePath": "/projects/lists/documentation/code-examples/
|
|
6889
|
-
"rawContents": "
|
|
6887
|
+
"fileName": "filter-demo-modal.component.ts",
|
|
6888
|
+
"filePath": "/projects/lists/documentation/code-examples/filter/modal/filter-demo-modal.component.ts",
|
|
6889
|
+
"rawContents": "import { Component } from '@angular/core';\nimport { SkyModalInstance } from '@skyux/modals';\n\nimport { Filter } from './filter';\nimport { FilterDemoModalContext } from './filter-demo-modal-context';\n\n@Component({\n selector: 'app-filter-demo-modal',\n templateUrl: './filter-demo-modal.component.html',\n})\nexport class FilterDemoModalComponent {\n public hideOrange = false;\n\n public fruitType = 'any';\n\n constructor(\n public context: FilterDemoModalContext,\n public instance: SkyModalInstance\n ) {\n if (\n this.context &&\n this.context.appliedFilters &&\n this.context.appliedFilters.length > 0\n ) {\n this.setFormFilters(this.context.appliedFilters);\n } else {\n this.clearAllFilters();\n }\n }\n\n public applyFilters(): void {\n const result = this.getAppliedFiltersArray();\n this.instance.save(result);\n }\n\n public cancel(): void {\n this.instance.cancel();\n }\n\n public clearAllFilters(): void {\n this.hideOrange = false;\n this.fruitType = 'any';\n }\n\n private getAppliedFiltersArray(): Filter[] {\n const appliedFilters: Filter[] = [];\n if (this.fruitType !== 'any') {\n appliedFilters.push({\n name: 'fruitType',\n value: this.fruitType,\n label: this.fruitType,\n });\n }\n\n if (this.hideOrange) {\n appliedFilters.push({\n name: 'hideOrange',\n value: true,\n label: 'hide orange fruits',\n });\n }\n\n return appliedFilters;\n }\n\n private setFormFilters(appliedFilters: Filter[]): void {\n for (let i = 0; i < appliedFilters.length; i++) {\n if (appliedFilters[i].name === 'fruitType') {\n this.fruitType = `${appliedFilters[i].value}`;\n }\n\n if (appliedFilters[i].name === 'hideOrange') {\n this.hideOrange = !!appliedFilters[i].value;\n }\n }\n }\n}\n"
|
|
6890
6890
|
},
|
|
6891
6891
|
{
|
|
6892
|
-
"fileName": "
|
|
6893
|
-
"filePath": "/projects/lists/documentation/code-examples/
|
|
6894
|
-
"rawContents": "
|
|
6892
|
+
"fileName": "filter-demo-modal.component.html",
|
|
6893
|
+
"filePath": "/projects/lists/documentation/code-examples/filter/modal/filter-demo-modal.component.html",
|
|
6894
|
+
"rawContents": "<sky-modal>\n <sky-modal-header> Filter food preferences </sky-modal-header>\n <sky-modal-content>\n <sky-input-box labelText=\"Fruit type\" stacked=\"true\">\n <select [(ngModel)]=\"fruitType\">\n <option value=\"any\">Any fruit</option>\n <option value=\"citrus\">Citrus</option>\n <option value=\"berry\">Berry</option>\n </select>\n </sky-input-box>\n <sky-checkbox [(ngModel)]=\"hideOrange\">\n <sky-checkbox-label>Hide orange fruits</sky-checkbox-label>\n </sky-checkbox>\n </sky-modal-content>\n <sky-modal-footer>\n <button\n class=\"sky-btn sky-btn-primary\"\n type=\"button\"\n (click)=\"applyFilters()\"\n >\n Apply\n </button>\n <button\n class=\"sky-btn sky-btn-link\"\n type=\"button\"\n (click)=\"clearAllFilters()\"\n >\n Clear\n </button>\n <button class=\"sky-btn sky-btn-link\" type=\"button\" (click)=\"cancel()\">\n Cancel\n </button>\n </sky-modal-footer>\n</sky-modal>\n"
|
|
6895
6895
|
},
|
|
6896
6896
|
{
|
|
6897
|
-
"fileName": "
|
|
6898
|
-
"filePath": "/projects/lists/documentation/code-examples/
|
|
6899
|
-
"rawContents": "import {
|
|
6897
|
+
"fileName": "filter-demo-modal-context.ts",
|
|
6898
|
+
"filePath": "/projects/lists/documentation/code-examples/filter/modal/filter-demo-modal-context.ts",
|
|
6899
|
+
"rawContents": "import { Filter } from './filter';\n\nexport class FilterDemoModalContext {\n public appliedFilters: Filter[] = [];\n}\n"
|
|
6900
6900
|
},
|
|
6901
6901
|
{
|
|
6902
|
-
"fileName": "
|
|
6903
|
-
"filePath": "/projects/lists/documentation/code-examples/
|
|
6904
|
-
"rawContents": "export interface
|
|
6902
|
+
"fileName": "fruit.ts",
|
|
6903
|
+
"filePath": "/projects/lists/documentation/code-examples/filter/inline/fruit.ts",
|
|
6904
|
+
"rawContents": "export interface Fruit {\n name: string;\n type: string;\n color: string;\n}\n"
|
|
6905
6905
|
},
|
|
6906
6906
|
{
|
|
6907
|
-
"fileName": "
|
|
6908
|
-
"filePath": "/projects/lists/documentation/code-examples/
|
|
6909
|
-
"rawContents": "
|
|
6907
|
+
"fileName": "filter.ts",
|
|
6908
|
+
"filePath": "/projects/lists/documentation/code-examples/filter/inline/filter.ts",
|
|
6909
|
+
"rawContents": "export interface Filter {\n name: string;\n value: string | boolean;\n}\n"
|
|
6910
6910
|
},
|
|
6911
6911
|
{
|
|
6912
|
-
"fileName": "
|
|
6913
|
-
"filePath": "/projects/lists/documentation/code-examples/
|
|
6914
|
-
"rawContents": "import {
|
|
6912
|
+
"fileName": "filter-demo.module.ts",
|
|
6913
|
+
"filePath": "/projects/lists/documentation/code-examples/filter/inline/filter-demo.module.ts",
|
|
6914
|
+
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { SkyCheckboxModule, SkyInputBoxModule } from '@skyux/forms';\nimport { SkyToolbarModule } from '@skyux/layout';\nimport { SkyFilterModule, SkyRepeaterModule } from '@skyux/lists';\n\nimport { FilterDemoComponent } from './filter-demo.component';\n\n@NgModule({\n imports: [\n CommonModule,\n FormsModule,\n SkyCheckboxModule,\n SkyInputBoxModule,\n SkyFilterModule,\n SkyRepeaterModule,\n SkyToolbarModule,\n ],\n declarations: [FilterDemoComponent],\n exports: [FilterDemoComponent],\n})\nexport class FilterDemoModule {}\n"
|
|
6915
6915
|
},
|
|
6916
6916
|
{
|
|
6917
|
-
"fileName": "
|
|
6918
|
-
"filePath": "/projects/lists/documentation/code-examples/
|
|
6919
|
-
"rawContents": "import {
|
|
6917
|
+
"fileName": "filter-demo.component.ts",
|
|
6918
|
+
"filePath": "/projects/lists/documentation/code-examples/filter/inline/filter-demo.component.ts",
|
|
6919
|
+
"rawContents": "import { Component } from '@angular/core';\n\nimport { Filter } from './filter';\nimport { Fruit } from './fruit';\n\n@Component({\n selector: 'app-filter-demo',\n templateUrl: './filter-demo.component.html',\n})\nexport class FilterDemoComponent {\n public appliedFilters: Filter[] = [];\n\n public filteredItems: Fruit[];\n\n public filtersActive = false;\n\n public fruitType = 'any';\n\n public hideOrange = false;\n\n public items: Fruit[] = [\n {\n name: 'Orange',\n type: 'citrus',\n color: 'orange',\n },\n {\n name: 'Mango',\n type: 'other',\n color: 'orange',\n },\n {\n name: 'Lime',\n type: 'citrus',\n color: 'green',\n },\n {\n name: 'Strawberry',\n type: 'berry',\n color: 'red',\n },\n {\n name: 'Blueberry',\n type: 'berry',\n color: 'blue',\n },\n ];\n\n public showInlineFilters = false;\n\n constructor() {\n this.filteredItems = this.items.slice();\n }\n\n public filterButtonClicked(): void {\n this.showInlineFilters = !this.showInlineFilters;\n }\n\n public fruitTypeChange(newValue: string): void {\n this.fruitType = newValue;\n this.setFilterActiveState();\n }\n\n public hideOrangeChange(newValue: boolean): void {\n this.hideOrange = newValue;\n this.setFilterActiveState();\n }\n\n private setFilterActiveState(): void {\n this.appliedFilters = [];\n if (this.fruitType !== 'any') {\n this.appliedFilters.push({\n name: 'fruitType',\n value: this.fruitType,\n });\n }\n if (this.hideOrange) {\n this.appliedFilters.push({\n name: 'hideOrange',\n value: true,\n });\n }\n this.filtersActive = this.appliedFilters.length > 0;\n\n this.filteredItems = this.filterItems(this.items, this.appliedFilters);\n }\n\n private orangeFilterFailed(filter: Filter, item: Fruit): boolean {\n return (\n filter.name === 'hideOrange' && !!filter.value && item.color === 'orange'\n );\n }\n\n private fruitTypeFilterFailed(filter: Filter, item: Fruit): boolean {\n return (\n filter.name === 'fruitType' &&\n filter.value !== 'any' &&\n filter.value !== item.type\n );\n }\n\n private itemIsShown(filters: Filter[], item: Fruit): boolean {\n let passesFilter = true,\n j: number;\n\n for (j = 0; j < filters.length; j++) {\n if (this.orangeFilterFailed(filters[j], item)) {\n passesFilter = false;\n } else if (this.fruitTypeFilterFailed(filters[j], item)) {\n passesFilter = false;\n }\n }\n\n return passesFilter;\n }\n\n private filterItems(items: Fruit[], filters: Filter[]): Fruit[] {\n let i: number, passesFilter: boolean;\n const result: Fruit[] = [];\n\n for (i = 0; i < items.length; i++) {\n passesFilter = this.itemIsShown(filters, items[i]);\n if (passesFilter) {\n result.push(items[i]);\n }\n }\n\n return result;\n }\n}\n"
|
|
6920
6920
|
},
|
|
6921
6921
|
{
|
|
6922
|
-
"fileName": "
|
|
6923
|
-
"filePath": "/projects/lists/documentation/code-examples/
|
|
6924
|
-
"rawContents": "
|
|
6922
|
+
"fileName": "filter-demo.component.html",
|
|
6923
|
+
"filePath": "/projects/lists/documentation/code-examples/filter/inline/filter-demo.component.html",
|
|
6924
|
+
"rawContents": "<sky-toolbar>\n <sky-toolbar-section>\n <sky-toolbar-item>\n <sky-filter-button\n [active]=\"filtersActive\"\n [ariaControls]=\"inlineFilters.id\"\n [ariaExpanded]=\"showInlineFilters\"\n [showButtonText]=\"true\"\n (filterButtonClick)=\"filterButtonClicked()\"\n >\n </sky-filter-button>\n </sky-toolbar-item>\n </sky-toolbar-section>\n</sky-toolbar>\n\n<div skyId [hidden]=\"!showInlineFilters\" #inlineFilters>\n <sky-filter-inline>\n <sky-filter-inline-item>\n <sky-input-box labelText=\"Fruit type\">\n <select [ngModel]=\"fruitType\" (ngModelChange)=\"fruitTypeChange($event)\">\n <option value=\"any\">Any fruit</option>\n <option value=\"citrus\">Citrus</option>\n <option value=\"berry\">Berry</option>\n </select>\n </sky-input-box>\n </sky-filter-inline-item>\n <sky-filter-inline-item>\n <sky-checkbox\n [ngModel]=\"hideOrange\"\n (ngModelChange)=\"hideOrangeChange($event)\"\n >\n <sky-checkbox-label>Hide orange fruits</sky-checkbox-label>\n </sky-checkbox>\n </sky-filter-inline-item>\n </sky-filter-inline>\n</div>\n\n<sky-repeater expandMode=\"none\">\n <sky-repeater-item *ngFor=\"let item of filteredItems\">\n <sky-repeater-item-title>\n {{ item.name }}\n </sky-repeater-item-title>\n </sky-repeater-item>\n</sky-repeater>\n"
|
|
6925
6925
|
}
|
|
6926
6926
|
]
|
|
6927
6927
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@skyux/lists",
|
|
3
|
-
"version": "9.0.0-alpha.
|
|
3
|
+
"version": "9.0.0-alpha.1",
|
|
4
4
|
"author": "Blackbaud, Inc.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"blackbaud",
|
|
@@ -40,15 +40,15 @@
|
|
|
40
40
|
"@angular/common": "^16.1.7",
|
|
41
41
|
"@angular/core": "^16.1.7",
|
|
42
42
|
"@angular/platform-browser": "^16.1.7",
|
|
43
|
-
"@skyux-sdk/testing": "9.0.0-alpha.
|
|
44
|
-
"@skyux/animations": "9.0.0-alpha.
|
|
45
|
-
"@skyux/core": "9.0.0-alpha.
|
|
46
|
-
"@skyux/forms": "9.0.0-alpha.
|
|
47
|
-
"@skyux/i18n": "9.0.0-alpha.
|
|
48
|
-
"@skyux/indicators": "9.0.0-alpha.
|
|
49
|
-
"@skyux/inline-form": "9.0.0-alpha.
|
|
50
|
-
"@skyux/popovers": "9.0.0-alpha.
|
|
51
|
-
"@skyux/theme": "9.0.0-alpha.
|
|
43
|
+
"@skyux-sdk/testing": "9.0.0-alpha.1",
|
|
44
|
+
"@skyux/animations": "9.0.0-alpha.1",
|
|
45
|
+
"@skyux/core": "9.0.0-alpha.1",
|
|
46
|
+
"@skyux/forms": "9.0.0-alpha.1",
|
|
47
|
+
"@skyux/i18n": "9.0.0-alpha.1",
|
|
48
|
+
"@skyux/indicators": "9.0.0-alpha.1",
|
|
49
|
+
"@skyux/inline-form": "9.0.0-alpha.1",
|
|
50
|
+
"@skyux/popovers": "9.0.0-alpha.1",
|
|
51
|
+
"@skyux/theme": "9.0.0-alpha.1"
|
|
52
52
|
},
|
|
53
53
|
"dependencies": {
|
|
54
54
|
"@types/dragula": "2.1.36",
|