@skyux/modals 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 +56 -56
- package/package.json +5 -5
package/documentation.json
CHANGED
|
@@ -4665,54 +4665,54 @@
|
|
|
4665
4665
|
},
|
|
4666
4666
|
"codeExamples": [
|
|
4667
4667
|
{
|
|
4668
|
-
"fileName": "
|
|
4669
|
-
"filePath": "/projects/modals/documentation/code-examples/
|
|
4670
|
-
"rawContents": "
|
|
4668
|
+
"fileName": "modal-demo.module.ts",
|
|
4669
|
+
"filePath": "/projects/modals/documentation/code-examples/modal/modal-demo.module.ts",
|
|
4670
|
+
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { SkyInputBoxModule } from '@skyux/forms';\nimport { SkyModalModule } from '@skyux/modals';\n\nimport { ModalDemoModalComponent } from './modal-demo-modal.component';\nimport { ModalDemoComponent } from './modal-demo.component';\n\n@NgModule({\n imports: [\n CommonModule,\n FormsModule,\n ReactiveFormsModule,\n SkyInputBoxModule,\n SkyModalModule,\n ],\n declarations: [ModalDemoComponent, ModalDemoModalComponent],\n exports: [ModalDemoComponent],\n})\nexport class ModalDemoModule {}\n"
|
|
4671
4671
|
},
|
|
4672
4672
|
{
|
|
4673
|
-
"fileName": "
|
|
4674
|
-
"filePath": "/projects/modals/documentation/code-examples/
|
|
4675
|
-
"rawContents": "import {
|
|
4673
|
+
"fileName": "modal-demo.component.ts",
|
|
4674
|
+
"filePath": "/projects/modals/documentation/code-examples/modal/modal-demo.component.ts",
|
|
4675
|
+
"rawContents": "import { Component, OnDestroy } from '@angular/core';\nimport { SkyWaitService } from '@skyux/indicators';\nimport { SkyModalConfigurationInterface, SkyModalService } from '@skyux/modals';\n\nimport { Subject } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\n\nimport { ModalDemoContext } from './modal-demo-context';\nimport { ModalDemoData } from './modal-demo-data';\nimport { ModalDemoDataService } from './modal-demo-data.service';\nimport { ModalDemoModalComponent } from './modal-demo-modal.component';\n\n@Component({\n selector: 'app-modal-demo',\n templateUrl: './modal-demo.component.html',\n})\nexport class ModalDemoComponent implements OnDestroy {\n public modalSize = 'medium';\n\n public demoValue: string | null | undefined;\n\n #ngUnsubscribe = new Subject<void>();\n\n #modalSvc: SkyModalService;\n #waitSvc: SkyWaitService;\n #dataSvc: ModalDemoDataService;\n\n constructor(\n modalSvc: SkyModalService,\n waitSvc: SkyWaitService,\n dataSvc: ModalDemoDataService\n ) {\n this.#modalSvc = modalSvc;\n this.#waitSvc = waitSvc;\n this.#dataSvc = dataSvc;\n }\n\n public onOpenModalClick(): void {\n // Display a blocking wait while data is loaded from the data service.\n this.#waitSvc\n .blockingWrap(this.#dataSvc.load())\n .pipe(takeUntil(this.#ngUnsubscribe))\n .subscribe((data) => {\n const options: SkyModalConfigurationInterface = {\n providers: [\n {\n provide: ModalDemoContext,\n useValue: new ModalDemoContext(data),\n },\n ],\n size: this.modalSize,\n };\n\n // Show the modal after data is loaded.\n const instance = this.#modalSvc.open(ModalDemoModalComponent, options);\n\n instance.closed.subscribe((result) => {\n if (result.reason === 'save') {\n // Display the updated value.\n const data = result.data as ModalDemoData;\n this.demoValue = data.value1;\n }\n });\n });\n }\n\n public ngOnDestroy(): void {\n this.#ngUnsubscribe.next();\n this.#ngUnsubscribe.complete();\n }\n}\n"
|
|
4676
4676
|
},
|
|
4677
4677
|
{
|
|
4678
|
-
"fileName": "
|
|
4679
|
-
"filePath": "/projects/modals/documentation/code-examples/
|
|
4680
|
-
"rawContents": "import {
|
|
4678
|
+
"fileName": "modal-demo.component.spec.ts",
|
|
4679
|
+
"filePath": "/projects/modals/documentation/code-examples/modal/modal-demo.component.spec.ts",
|
|
4680
|
+
"rawContents": "import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';\nimport { ComponentFixture, TestBed } from '@angular/core/testing';\nimport { SkyWaitService } from '@skyux/indicators';\nimport { SkyModalService } from '@skyux/modals';\nimport { SkyModalHarness } from '@skyux/modals/testing';\n\nimport { Observable, of } from 'rxjs';\n\nimport { ModalDemoDataService } from './modal-demo-data.service';\nimport { ModalDemoComponent } from './modal-demo.component';\nimport { ModalDemoModule } from './modal-demo.module';\n\nclass mockWaitSvc {\n public blockingWrap(data: unknown): Observable<unknown> {\n return of(data);\n }\n}\n\ndescribe('Basic modal', () => {\n async function setupTest(): Promise<{\n modalHarness: SkyModalHarness;\n fixture: ComponentFixture<ModalDemoComponent>;\n }> {\n const fixture = TestBed.createComponent(ModalDemoComponent);\n fixture.componentInstance.onOpenModalClick();\n fixture.detectChanges();\n\n const loader = TestbedHarnessEnvironment.documentRootLoader(fixture);\n const modalHarness = await loader.getHarness(\n SkyModalHarness.with({\n dataSkyId: 'modal-demo',\n })\n );\n\n return { modalHarness, fixture };\n }\n\n beforeEach(() => {\n TestBed.configureTestingModule({\n imports: [ModalDemoModule],\n providers: [\n SkyModalService,\n { provide: SkyWaitService, useClass: mockWaitSvc },\n ModalDemoDataService,\n ],\n });\n });\n\n it('should open the correct modal', async () => {\n const { modalHarness, fixture } = await setupTest();\n\n fixture.detectChanges();\n\n await expectAsync(modalHarness.getAriaRole()).toBeResolvedTo('dialog');\n await expectAsync(modalHarness.getSize()).toBeResolvedTo('medium');\n await expectAsync(modalHarness.isFullPage()).toBeResolvedTo(false);\n });\n});\n"
|
|
4681
4681
|
},
|
|
4682
4682
|
{
|
|
4683
|
-
"fileName": "
|
|
4684
|
-
"filePath": "/projects/modals/documentation/code-examples/
|
|
4685
|
-
"rawContents": "
|
|
4683
|
+
"fileName": "modal-demo.component.html",
|
|
4684
|
+
"filePath": "/projects/modals/documentation/code-examples/modal/modal-demo.component.html",
|
|
4685
|
+
"rawContents": "<button\n class=\"sky-btn sky-btn-default\"\n type=\"button\"\n (click)=\"onOpenModalClick()\"\n>\n Open modal demo\n</button>\n<div *ngIf=\"demoValue\">The user entered {{ demoValue }}</div>\n"
|
|
4686
4686
|
},
|
|
4687
4687
|
{
|
|
4688
|
-
"fileName": "modal-demo-
|
|
4689
|
-
"filePath": "/projects/modals/documentation/code-examples/
|
|
4690
|
-
"rawContents": "import {
|
|
4688
|
+
"fileName": "modal-demo-modal.component.ts",
|
|
4689
|
+
"filePath": "/projects/modals/documentation/code-examples/modal/modal-demo-modal.component.ts",
|
|
4690
|
+
"rawContents": "import { Component, inject } from '@angular/core';\nimport { FormControl, FormGroup } from '@angular/forms';\nimport { SkyWaitService } from '@skyux/indicators';\nimport { SkyModalInstance } from '@skyux/modals';\n\nimport { ModalDemoContext } from './modal-demo-context';\nimport { ModalDemoDataService } from './modal-demo-data.service';\n\n@Component({\n selector: 'app-modal-demo-modal',\n templateUrl: './modal-demo-modal.component.html',\n})\nexport class ModalDemoModalComponent {\n protected demoForm: FormGroup<{\n value1: FormControl<string | null | undefined>;\n }>;\n\n #instance = inject(SkyModalInstance);\n #waitSvc = inject(SkyWaitService);\n #context = inject(ModalDemoContext);\n #dataSvc = inject(ModalDemoDataService);\n\n constructor() {\n this.demoForm = new FormGroup({\n value1: new FormControl(this.#context.data.value1),\n });\n }\n\n public saveForm(): void {\n // Use the data service to save the data.\n\n this.#waitSvc\n .blockingWrap(this.#dataSvc.save(this.demoForm.value))\n .subscribe((data) => {\n // Notify the modal instance that data was saved and return the saved data.\n this.#instance.save(data);\n });\n }\n\n public cancelForm(): void {\n this.#instance.cancel();\n }\n}\n"
|
|
4691
4691
|
},
|
|
4692
4692
|
{
|
|
4693
|
-
"fileName": "modal-demo-
|
|
4694
|
-
"filePath": "/projects/modals/documentation/code-examples/
|
|
4695
|
-
"rawContents": "
|
|
4693
|
+
"fileName": "modal-demo-modal.component.html",
|
|
4694
|
+
"filePath": "/projects/modals/documentation/code-examples/modal/modal-demo-modal.component.html",
|
|
4695
|
+
"rawContents": "<form [formGroup]=\"demoForm\" (submit)=\"saveForm()\">\n <sky-modal data-sky-id=\"modal-demo\" [isDirty]=\"demoForm.dirty\">\n <sky-modal-header> Modal title </sky-modal-header>\n <sky-modal-content>\n <sky-input-box labelText=\"An input inside a modal\">\n <input formControlName=\"value1\" type=\"text\" />\n </sky-input-box>\n </sky-modal-content>\n <sky-modal-footer>\n <button class=\"sky-btn sky-btn-primary\" type=\"submit\">Save</button>\n <button class=\"sky-btn sky-btn-link\" type=\"button\" (click)=\"cancelForm()\">\n Cancel\n </button>\n </sky-modal-footer>\n </sky-modal>\n</form>\n"
|
|
4696
4696
|
},
|
|
4697
4697
|
{
|
|
4698
4698
|
"fileName": "modal-demo-data.ts",
|
|
4699
|
-
"filePath": "/projects/modals/documentation/code-examples/
|
|
4699
|
+
"filePath": "/projects/modals/documentation/code-examples/modal/modal-demo-data.ts",
|
|
4700
4700
|
"rawContents": "export interface ModalDemoData {\n value1?: string | null;\n}\n"
|
|
4701
4701
|
},
|
|
4702
4702
|
{
|
|
4703
|
-
"fileName": "modal-demo-
|
|
4704
|
-
"filePath": "/projects/modals/documentation/code-examples/
|
|
4705
|
-
"rawContents": "
|
|
4703
|
+
"fileName": "modal-demo-data.service.ts",
|
|
4704
|
+
"filePath": "/projects/modals/documentation/code-examples/modal/modal-demo-data.service.ts",
|
|
4705
|
+
"rawContents": "import { Injectable } from '@angular/core';\n\nimport { Observable, of } from 'rxjs';\nimport { delay } from 'rxjs/operators';\n\nimport { ModalDemoData } from './modal-demo-data';\n\n@Injectable({\n providedIn: 'root',\n})\nexport class ModalDemoDataService {\n #data: ModalDemoData = {\n value1: 'Hello world',\n };\n\n public load(): Observable<ModalDemoData> {\n // Simulate a network request to get data.\n return of(this.#data).pipe(delay(1000));\n }\n\n public save(data: ModalDemoData): Observable<ModalDemoData> {\n this.#data = data;\n\n // Simulate a network request to save data.\n return of(this.#data).pipe(delay(1000));\n }\n}\n"
|
|
4706
4706
|
},
|
|
4707
4707
|
{
|
|
4708
|
-
"fileName": "modal-demo-
|
|
4709
|
-
"filePath": "/projects/modals/documentation/code-examples/
|
|
4710
|
-
"rawContents": "import {
|
|
4708
|
+
"fileName": "modal-demo-context.ts",
|
|
4709
|
+
"filePath": "/projects/modals/documentation/code-examples/modal/modal-demo-context.ts",
|
|
4710
|
+
"rawContents": "import { ModalDemoData } from './modal-demo-data';\n\nexport class ModalDemoContext {\n constructor(public data: ModalDemoData) {}\n}\n"
|
|
4711
4711
|
},
|
|
4712
4712
|
{
|
|
4713
|
-
"fileName": "modal-demo.
|
|
4714
|
-
"filePath": "/projects/modals/documentation/code-examples/inline-help/modal-demo.
|
|
4715
|
-
"rawContents": "
|
|
4713
|
+
"fileName": "modal-demo.module.ts",
|
|
4714
|
+
"filePath": "/projects/modals/documentation/code-examples/inline-help/modal-demo.module.ts",
|
|
4715
|
+
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { SkyInputBoxModule } from '@skyux/forms';\nimport { SkyHelpInlineModule } from '@skyux/indicators';\nimport { SkyModalModule } from '@skyux/modals';\n\nimport { ModalDemoModalComponent } from './modal-demo-modal.component';\nimport { ModalDemoComponent } from './modal-demo.component';\n\n@NgModule({\n imports: [\n CommonModule,\n FormsModule,\n ReactiveFormsModule,\n SkyInputBoxModule,\n SkyModalModule,\n SkyHelpInlineModule,\n ],\n declarations: [ModalDemoComponent, ModalDemoModalComponent],\n exports: [ModalDemoComponent],\n})\nexport class ModalDemoModule {}\n"
|
|
4716
4716
|
},
|
|
4717
4717
|
{
|
|
4718
4718
|
"fileName": "modal-demo.component.ts",
|
|
@@ -4720,54 +4720,54 @@
|
|
|
4720
4720
|
"rawContents": "import { Component, OnDestroy } from '@angular/core';\nimport { SkyWaitService } from '@skyux/indicators';\nimport { SkyModalConfigurationInterface, SkyModalService } from '@skyux/modals';\n\nimport { Subject } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\n\nimport { ModalDemoContext } from './modal-demo-context';\nimport { ModalDemoData } from './modal-demo-data';\nimport { ModalDemoDataService } from './modal-demo-data.service';\nimport { ModalDemoModalComponent } from './modal-demo-modal.component';\n\n@Component({\n selector: 'app-modal-demo',\n templateUrl: './modal-demo.component.html',\n})\nexport class ModalDemoComponent implements OnDestroy {\n public modalSize = 'medium';\n\n public demoValue: string | null | undefined;\n\n #ngUnsubscribe = new Subject<void>();\n\n #modalSvc: SkyModalService;\n #waitSvc: SkyWaitService;\n #dataSvc: ModalDemoDataService;\n\n constructor(\n modalSvc: SkyModalService,\n waitSvc: SkyWaitService,\n dataSvc: ModalDemoDataService\n ) {\n this.#modalSvc = modalSvc;\n this.#waitSvc = waitSvc;\n this.#dataSvc = dataSvc;\n }\n\n public onOpenModalClick(): void {\n // Display a blocking wait while data is loaded from the data service.\n this.#waitSvc\n .blockingWrap(this.#dataSvc.load())\n .pipe(takeUntil(this.#ngUnsubscribe))\n .subscribe((data) => {\n const options: SkyModalConfigurationInterface = {\n providers: [\n {\n provide: ModalDemoContext,\n useValue: new ModalDemoContext(data),\n },\n ],\n size: this.modalSize,\n };\n\n // Show the modal after data is loaded.\n const instance = this.#modalSvc.open(ModalDemoModalComponent, options);\n\n instance.closed.subscribe((result) => {\n if (result.reason === 'save') {\n // Display the updated value.\n const data = result.data as ModalDemoData;\n this.demoValue = data.value1;\n }\n });\n });\n }\n\n public ngOnDestroy(): void {\n this.#ngUnsubscribe.next();\n this.#ngUnsubscribe.complete();\n }\n}\n"
|
|
4721
4721
|
},
|
|
4722
4722
|
{
|
|
4723
|
-
"fileName": "modal-demo.
|
|
4724
|
-
"filePath": "/projects/modals/documentation/code-examples/inline-help/modal-demo.
|
|
4725
|
-
"rawContents": "
|
|
4723
|
+
"fileName": "modal-demo.component.html",
|
|
4724
|
+
"filePath": "/projects/modals/documentation/code-examples/inline-help/modal-demo.component.html",
|
|
4725
|
+
"rawContents": "<button\n class=\"sky-btn sky-btn-default\"\n type=\"button\"\n (click)=\"onOpenModalClick()\"\n>\n Open modal with inline help\n</button>\n"
|
|
4726
4726
|
},
|
|
4727
4727
|
{
|
|
4728
|
-
"fileName": "modal-demo-
|
|
4729
|
-
"filePath": "/projects/modals/documentation/code-examples/
|
|
4730
|
-
"rawContents": "import {
|
|
4728
|
+
"fileName": "modal-demo-modal.component.ts",
|
|
4729
|
+
"filePath": "/projects/modals/documentation/code-examples/inline-help/modal-demo-modal.component.ts",
|
|
4730
|
+
"rawContents": "import { Component } from '@angular/core';\nimport { FormBuilder, FormControl, FormGroup } from '@angular/forms';\nimport { SkyWaitService } from '@skyux/indicators';\nimport { SkyModalInstance } from '@skyux/modals';\n\nimport { ModalDemoContext } from './modal-demo-context';\nimport { ModalDemoDataService } from './modal-demo-data.service';\n\n@Component({\n selector: 'app-modal-demo-modal',\n templateUrl: './modal-demo-modal.component.html',\n})\nexport class ModalDemoModalComponent {\n public demoForm: FormGroup<{\n value1: FormControl<string | null | undefined>;\n }>;\n\n #dataSvc: ModalDemoDataService;\n #instance: SkyModalInstance;\n #waitSvc: SkyWaitService;\n\n constructor(\n instance: SkyModalInstance,\n waitSvc: SkyWaitService,\n dataSvc: ModalDemoDataService,\n context: ModalDemoContext,\n fb: FormBuilder\n ) {\n this.#instance = instance;\n this.#waitSvc = waitSvc;\n this.#dataSvc = dataSvc;\n\n const value1 = fb.control(context.data.value1);\n this.demoForm = fb.group({ value1 });\n }\n\n public onActionClick(): void {\n alert('Help inline button clicked!');\n }\n\n public saveForm(): void {\n // Use the data service to save the data.\n\n this.#waitSvc\n .blockingWrap(this.#dataSvc.save(this.demoForm.value))\n .subscribe((data) => {\n // Notify the modal instance that data was saved and return the saved data.\n this.#instance.save(data);\n });\n }\n\n public cancelForm(): void {\n this.#instance.cancel();\n }\n}\n"
|
|
4731
4731
|
},
|
|
4732
4732
|
{
|
|
4733
|
-
"fileName": "modal-demo-
|
|
4734
|
-
"filePath": "/projects/modals/documentation/code-examples/
|
|
4735
|
-
"rawContents": "
|
|
4733
|
+
"fileName": "modal-demo-modal.component.html",
|
|
4734
|
+
"filePath": "/projects/modals/documentation/code-examples/inline-help/modal-demo-modal.component.html",
|
|
4735
|
+
"rawContents": "<form [formGroup]=\"demoForm\" (submit)=\"saveForm()\">\n <sky-modal>\n <sky-modal-header>\n Modal title\n <sky-help-inline\n class=\"sky-control-help\"\n (actionClick)=\"onActionClick()\"\n ></sky-help-inline>\n </sky-modal-header>\n <sky-modal-content>\n <sky-input-box labelText=\"An input inside a modal\">\n <input formControlName=\"value1\" type=\"text\" />\n </sky-input-box>\n </sky-modal-content>\n <sky-modal-footer>\n <button class=\"sky-btn sky-btn-primary\" type=\"submit\">Save</button>\n <button class=\"sky-btn sky-btn-link\" type=\"button\" (click)=\"cancelForm()\">\n Cancel\n </button>\n </sky-modal-footer>\n </sky-modal>\n</form>\n"
|
|
4736
4736
|
},
|
|
4737
4737
|
{
|
|
4738
4738
|
"fileName": "modal-demo-data.ts",
|
|
4739
|
-
"filePath": "/projects/modals/documentation/code-examples/
|
|
4739
|
+
"filePath": "/projects/modals/documentation/code-examples/inline-help/modal-demo-data.ts",
|
|
4740
4740
|
"rawContents": "export interface ModalDemoData {\n value1?: string | null;\n}\n"
|
|
4741
4741
|
},
|
|
4742
4742
|
{
|
|
4743
|
-
"fileName": "modal-demo-
|
|
4744
|
-
"filePath": "/projects/modals/documentation/code-examples/
|
|
4745
|
-
"rawContents": "
|
|
4743
|
+
"fileName": "modal-demo-data.service.ts",
|
|
4744
|
+
"filePath": "/projects/modals/documentation/code-examples/inline-help/modal-demo-data.service.ts",
|
|
4745
|
+
"rawContents": "import { Injectable } from '@angular/core';\n\nimport { Observable, of } from 'rxjs';\nimport { delay } from 'rxjs/operators';\n\nimport { ModalDemoData } from './modal-demo-data';\n\n@Injectable({\n providedIn: 'root',\n})\nexport class ModalDemoDataService {\n #data: ModalDemoData = {\n value1: 'Hello world',\n };\n\n public load(): Observable<ModalDemoData> {\n // Simulate a network request to get data.\n return of(this.#data).pipe(delay(1000));\n }\n\n public save(data: ModalDemoData): Observable<ModalDemoData> {\n this.#data = data;\n\n // Simulate a network request to save data.\n return of(this.#data).pipe(delay(1000));\n }\n}\n"
|
|
4746
4746
|
},
|
|
4747
4747
|
{
|
|
4748
|
-
"fileName": "modal-demo-
|
|
4749
|
-
"filePath": "/projects/modals/documentation/code-examples/
|
|
4750
|
-
"rawContents": "import {
|
|
4748
|
+
"fileName": "modal-demo-context.ts",
|
|
4749
|
+
"filePath": "/projects/modals/documentation/code-examples/inline-help/modal-demo-context.ts",
|
|
4750
|
+
"rawContents": "import { ModalDemoData } from './modal-demo-data';\n\nexport class ModalDemoContext {\n constructor(public data: ModalDemoData) {}\n}\n"
|
|
4751
4751
|
},
|
|
4752
4752
|
{
|
|
4753
|
-
"fileName": "
|
|
4754
|
-
"filePath": "/projects/modals/documentation/code-examples/
|
|
4755
|
-
"rawContents": "
|
|
4753
|
+
"fileName": "confirm-demo.module.ts",
|
|
4754
|
+
"filePath": "/projects/modals/documentation/code-examples/confirm/confirm-demo.module.ts",
|
|
4755
|
+
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { SkyConfirmModule } from '@skyux/modals';\n\nimport { ConfirmDemoComponent } from './confirm-demo.component';\n\n@NgModule({\n imports: [CommonModule, FormsModule, SkyConfirmModule],\n declarations: [ConfirmDemoComponent],\n exports: [ConfirmDemoComponent],\n})\nexport class ConfirmDemoModule {}\n"
|
|
4756
4756
|
},
|
|
4757
4757
|
{
|
|
4758
|
-
"fileName": "
|
|
4759
|
-
"filePath": "/projects/modals/documentation/code-examples/
|
|
4760
|
-
"rawContents": "import {
|
|
4758
|
+
"fileName": "confirm-demo.component.ts",
|
|
4759
|
+
"filePath": "/projects/modals/documentation/code-examples/confirm/confirm-demo.component.ts",
|
|
4760
|
+
"rawContents": "import { Component } from '@angular/core';\nimport {\n SkyConfirmButtonConfig,\n SkyConfirmInstance,\n SkyConfirmService,\n SkyConfirmType,\n} from '@skyux/modals';\n\n@Component({\n selector: 'app-confirm-demo',\n templateUrl: './confirm-demo.component.html',\n})\nexport class ConfirmDemoComponent {\n public selectedAction: string | undefined;\n\n public selectedText: string | undefined;\n\n #confirmSvc: SkyConfirmService;\n\n constructor(confirmSvc: SkyConfirmService) {\n this.#confirmSvc = confirmSvc;\n }\n\n public openOKConfirm(): void {\n const dialog: SkyConfirmInstance = this.#confirmSvc.open({\n message:\n 'Cannot delete invoice because it has vendor, credit memo, or purchase order activity.',\n type: SkyConfirmType.OK,\n });\n\n dialog.closed.subscribe((result) => {\n this.selectedText = undefined;\n this.selectedAction = result.action;\n });\n }\n\n public openTwoActionConfirm(): void {\n const buttons: SkyConfirmButtonConfig[] = [\n { text: 'Finalize', action: 'save', styleType: 'primary' },\n { text: 'Cancel', action: 'cancel', styleType: 'link' },\n ];\n\n const dialog: SkyConfirmInstance = this.#confirmSvc.open({\n message: 'Finalize report cards?',\n body: 'Grades cannot be changed once the report cards are finalized.',\n type: SkyConfirmType.Custom,\n buttons,\n });\n\n dialog.closed.subscribe((result) => {\n this.selectedAction = result.action;\n\n for (const button of buttons) {\n if (button.action === result.action) {\n this.selectedText = button.text;\n break;\n }\n }\n });\n }\n\n public openThreeActionConfirm(): void {\n const buttons: SkyConfirmButtonConfig[] = [\n { text: 'Save', action: 'save', styleType: 'primary' },\n { text: 'Delete', action: 'delete' },\n { text: 'Keep working', action: 'cancel', styleType: 'link' },\n ];\n\n const dialog: SkyConfirmInstance = this.#confirmSvc.open({\n message: 'Save your changes before leaving?',\n type: SkyConfirmType.Custom,\n buttons,\n });\n\n dialog.closed.subscribe((result) => {\n this.selectedAction = result.action;\n\n for (const button of buttons) {\n if (button.action === result.action) {\n this.selectedText = button.text;\n break;\n }\n }\n });\n }\n\n public openDeleteConfirm(): void {\n const buttons: SkyConfirmButtonConfig[] = [\n { text: 'Delete', action: 'delete', styleType: 'danger' },\n { text: 'Cancel', action: 'cancel', styleType: 'link' },\n ];\n\n const dialog: SkyConfirmInstance = this.#confirmSvc.open({\n message: 'Delete this account?',\n body: 'Deleting this account may affect processes that are currently running.',\n type: SkyConfirmType.Custom,\n buttons,\n });\n\n dialog.closed.subscribe((result) => {\n this.selectedAction = result.action;\n\n for (const button of buttons) {\n if (button.action === result.action) {\n this.selectedText = button.text;\n break;\n }\n }\n });\n }\n}\n"
|
|
4761
4761
|
},
|
|
4762
4762
|
{
|
|
4763
|
-
"fileName": "
|
|
4764
|
-
"filePath": "/projects/modals/documentation/code-examples/
|
|
4765
|
-
"rawContents": "import {
|
|
4763
|
+
"fileName": "confirm-demo.component.spec.ts",
|
|
4764
|
+
"filePath": "/projects/modals/documentation/code-examples/confirm/confirm-demo.component.spec.ts",
|
|
4765
|
+
"rawContents": "import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';\nimport { ComponentFixture, TestBed } from '@angular/core/testing';\nimport { RouterTestingModule } from '@angular/router/testing';\nimport { SkyConfirmHarness } from '@skyux/modals/testing';\n\nimport { ConfirmDemoComponent } from './confirm-demo.component';\nimport { ConfirmDemoModule } from './confirm-demo.module';\n\ndescribe('Confirm demo', () => {\n async function setupTest(confirmBtnClass: string): Promise<{\n confirmHarness: SkyConfirmHarness;\n fixture: ComponentFixture<ConfirmDemoComponent>;\n }> {\n const fixture = TestBed.createComponent(ConfirmDemoComponent);\n const openBtn = fixture.nativeElement.querySelector(confirmBtnClass);\n\n openBtn.click();\n\n const rootLoader = TestbedHarnessEnvironment.documentRootLoader(fixture);\n\n const confirmHarness = await rootLoader.getHarness(SkyConfirmHarness);\n return { confirmHarness, fixture };\n }\n\n beforeEach(() => {\n TestBed.configureTestingModule({\n imports: [ConfirmDemoModule, RouterTestingModule],\n });\n });\n\n it('should show the correct text when OK is clicked on an OK confirm', async () => {\n const { confirmHarness, fixture } = await setupTest('.ok-confirm-btn');\n\n await confirmHarness.clickOkButton();\n\n const displayedTextEl: HTMLElement =\n fixture.nativeElement.querySelector('.displayed-text');\n\n expect(displayedTextEl.innerText).toEqual('You selected the \"ok\" action.');\n await expectAsync(confirmHarness.getMessageText()).toBeResolvedTo(\n 'Cannot delete invoice because it has vendor, credit memo, or purchase order activity.'\n );\n });\n\n it('should show the correct text when \"Finalize\" is clicked on a custom confirm', async () => {\n const { confirmHarness, fixture } = await setupTest(\n '.two-action-confirm-btn'\n );\n\n await confirmHarness.clickCustomButton({ text: 'Finalize' });\n\n const displayedTextEl: HTMLElement =\n fixture.nativeElement.querySelector('.displayed-text');\n\n expect(displayedTextEl.innerText).toEqual(\n 'You selected the \"Finalize\" button, which has an action of \"save.\"'\n );\n await expectAsync(confirmHarness.getMessageText()).toBeResolvedTo(\n 'Finalize report cards?'\n );\n await expectAsync(confirmHarness.getBodyText()).toBeResolvedTo(\n 'Grades cannot be changed once the report cards are finalized.'\n );\n });\n});\n"
|
|
4766
4766
|
},
|
|
4767
4767
|
{
|
|
4768
|
-
"fileName": "
|
|
4769
|
-
"filePath": "/projects/modals/documentation/code-examples/
|
|
4770
|
-
"rawContents": "
|
|
4768
|
+
"fileName": "confirm-demo.component.html",
|
|
4769
|
+
"filePath": "/projects/modals/documentation/code-examples/confirm/confirm-demo.component.html",
|
|
4770
|
+
"rawContents": "<button\n aria-haspopup=\"dialog\"\n class=\"sky-btn sky-btn-default sky-margin-inline-default ok-confirm-btn\"\n type=\"button\"\n (click)=\"openOKConfirm()\"\n>\n OK confirm\n</button>\n\n<button\n aria-haspopup=\"dialog\"\n class=\"sky-btn sky-btn-default sky-margin-inline-default two-action-confirm-btn\"\n type=\"button\"\n (click)=\"openTwoActionConfirm()\"\n>\n Confirm with two actions\n</button>\n\n<button\n aria-haspopup=\"dialog\"\n class=\"sky-btn sky-btn-default sky-margin-inline-default\"\n type=\"button\"\n (click)=\"openThreeActionConfirm()\"\n>\n Confirm with three actions\n</button>\n\n<button\n aria-haspopup=\"dialog\"\n class=\"sky-btn sky-btn-default sky-margin-inline-default\"\n type=\"button\"\n (click)=\"openDeleteConfirm()\"\n>\n Confirm with delete button\n</button>\n\n<p *ngIf=\"selectedAction && selectedText\" class=\"displayed-text\">\n You selected the \"{{ selectedText }}\" button, which has an action of \"{{\n selectedAction\n }}.\"\n</p>\n<p *ngIf=\"selectedAction && !selectedText\" class=\"displayed-text\">\n You selected the \"{{ selectedAction }}\" action.\n</p>\n"
|
|
4771
4771
|
}
|
|
4772
4772
|
]
|
|
4773
4773
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@skyux/modals",
|
|
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,10 +40,10 @@
|
|
|
40
40
|
"@angular/common": "^16.1.7",
|
|
41
41
|
"@angular/core": "^16.1.7",
|
|
42
42
|
"@angular/router": "^16.1.7",
|
|
43
|
-
"@skyux/core": "9.0.0-alpha.
|
|
44
|
-
"@skyux/i18n": "9.0.0-alpha.
|
|
45
|
-
"@skyux/indicators": "9.0.0-alpha.
|
|
46
|
-
"@skyux/theme": "9.0.0-alpha.
|
|
43
|
+
"@skyux/core": "9.0.0-alpha.1",
|
|
44
|
+
"@skyux/i18n": "9.0.0-alpha.1",
|
|
45
|
+
"@skyux/indicators": "9.0.0-alpha.1",
|
|
46
|
+
"@skyux/theme": "9.0.0-alpha.1"
|
|
47
47
|
},
|
|
48
48
|
"dependencies": {
|
|
49
49
|
"tslib": "^2.5.0"
|