@skyux/modals 7.0.0-beta.18 → 7.0.0-beta.19
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 +20 -5
- package/package.json +5 -5
package/documentation.json
CHANGED
|
@@ -3721,30 +3721,45 @@
|
|
|
3721
3721
|
"filePath": "/projects/modals/documentation/code-examples/inline-help/modal-demo.module.ts",
|
|
3722
3722
|
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { SkyIdModule } from '@skyux/core';\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 SkyIdModule,\n SkyInputBoxModule,\n SkyModalModule,\n SkyHelpInlineModule,\n ],\n declarations: [ModalDemoComponent, ModalDemoModalComponent],\n exports: [ModalDemoComponent],\n})\nexport class ModalDemoModule {}\n"
|
|
3723
3723
|
},
|
|
3724
|
+
{
|
|
3725
|
+
"fileName": "modal-demo-context.ts",
|
|
3726
|
+
"filePath": "/projects/modals/documentation/code-examples/modal/modal-demo-context.ts",
|
|
3727
|
+
"rawContents": "import { ModalDemoData } from './modal-demo-data';\n\nexport class ModalDemoContext {\n constructor(public data: ModalDemoData) {}\n}\n"
|
|
3728
|
+
},
|
|
3729
|
+
{
|
|
3730
|
+
"fileName": "modal-demo-data.service.ts",
|
|
3731
|
+
"filePath": "/projects/modals/documentation/code-examples/modal/modal-demo-data.service.ts",
|
|
3732
|
+
"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"
|
|
3733
|
+
},
|
|
3734
|
+
{
|
|
3735
|
+
"fileName": "modal-demo-data.ts",
|
|
3736
|
+
"filePath": "/projects/modals/documentation/code-examples/modal/modal-demo-data.ts",
|
|
3737
|
+
"rawContents": "export interface ModalDemoData {\n value1?: string;\n}\n"
|
|
3738
|
+
},
|
|
3724
3739
|
{
|
|
3725
3740
|
"fileName": "modal-demo-modal.component.html",
|
|
3726
3741
|
"filePath": "/projects/modals/documentation/code-examples/modal/modal-demo-modal.component.html",
|
|
3727
|
-
"rawContents": "<sky-modal>\n
|
|
3742
|
+
"rawContents": "<form [formGroup]=\"demoForm\" (submit)=\"saveForm()\">\n <sky-modal>\n <sky-modal-header> Modal title </sky-modal-header>\n <sky-modal-content>\n <sky-input-box>\n <label class=\"sky-control-label\" [for]=\"myInput.id\">\n An input inside a modal\n </label>\n <input\n class=\"sky-form-control\"\n formControlName=\"value1\"\n type=\"text\"\n skyId\n #myInput=\"skyId\"\n />\n </sky-input-box>\n </sky-modal-content>\n <sky-modal-footer>\n <button\n class=\"sky-btn sky-btn-primary sky-margin-inline-sm\"\n type=\"submit\"\n >\n Save\n </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"
|
|
3728
3743
|
},
|
|
3729
3744
|
{
|
|
3730
3745
|
"fileName": "modal-demo-modal.component.ts",
|
|
3731
3746
|
"filePath": "/projects/modals/documentation/code-examples/modal/modal-demo-modal.component.ts",
|
|
3732
|
-
"rawContents": "import { Component } from '@angular/core';\nimport { SkyModalInstance } from '@skyux/modals';\n\n@Component({\n selector: 'app-modal-demo-modal',\n templateUrl: './modal-demo-modal.component.html',\n})\nexport class ModalDemoModalComponent {\n
|
|
3747
|
+
"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>;\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 this.demoForm = fb.group(context.data);\n }\n\n public saveForm(): void {\n // Use the data service to save the data.\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"
|
|
3733
3748
|
},
|
|
3734
3749
|
{
|
|
3735
3750
|
"fileName": "modal-demo.component.html",
|
|
3736
3751
|
"filePath": "/projects/modals/documentation/code-examples/modal/modal-demo.component.html",
|
|
3737
|
-
"rawContents": "<button\n class=\"sky-btn sky-btn-default\"\n type=\"button\"\n (click)=\"onOpenModalClick()\"\n>\n Open modal demo\n</button>\n"
|
|
3752
|
+
"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"
|
|
3738
3753
|
},
|
|
3739
3754
|
{
|
|
3740
3755
|
"fileName": "modal-demo.component.ts",
|
|
3741
3756
|
"filePath": "/projects/modals/documentation/code-examples/modal/modal-demo.component.ts",
|
|
3742
|
-
"rawContents": "import { Component } from '@angular/core';\nimport {
|
|
3757
|
+
"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 helpKey = 'help-demo.html';\n\n public modalSize = 'medium';\n\n public demoValue: string | 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 helpKey: this.helpKey,\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"
|
|
3743
3758
|
},
|
|
3744
3759
|
{
|
|
3745
3760
|
"fileName": "modal-demo.module.ts",
|
|
3746
3761
|
"filePath": "/projects/modals/documentation/code-examples/modal/modal-demo.module.ts",
|
|
3747
|
-
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { SkyIdModule } from '@skyux/core';\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 SkyIdModule,\n SkyInputBoxModule,\n SkyModalModule,\n ],\n declarations: [ModalDemoComponent, ModalDemoModalComponent],\n exports: [ModalDemoComponent],\n})\nexport class ModalDemoModule {}\n"
|
|
3762
|
+
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { SkyIdModule } from '@skyux/core';\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 SkyIdModule,\n SkyInputBoxModule,\n SkyModalModule,\n ],\n declarations: [ModalDemoComponent, ModalDemoModalComponent],\n exports: [ModalDemoComponent],\n})\nexport class ModalDemoModule {}\n"
|
|
3748
3763
|
}
|
|
3749
3764
|
]
|
|
3750
3765
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@skyux/modals",
|
|
3
|
-
"version": "7.0.0-beta.
|
|
3
|
+
"version": "7.0.0-beta.19",
|
|
4
4
|
"author": "Blackbaud, Inc.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"blackbaud",
|
|
@@ -44,10 +44,10 @@
|
|
|
44
44
|
"@angular/common": "^14.2.11",
|
|
45
45
|
"@angular/core": "^14.2.11",
|
|
46
46
|
"@angular/router": "^14.2.11",
|
|
47
|
-
"@skyux/core": "7.0.0-beta.
|
|
48
|
-
"@skyux/i18n": "7.0.0-beta.
|
|
49
|
-
"@skyux/indicators": "7.0.0-beta.
|
|
50
|
-
"@skyux/theme": "7.0.0-beta.
|
|
47
|
+
"@skyux/core": "7.0.0-beta.19",
|
|
48
|
+
"@skyux/i18n": "7.0.0-beta.19",
|
|
49
|
+
"@skyux/indicators": "7.0.0-beta.19",
|
|
50
|
+
"@skyux/theme": "7.0.0-beta.19"
|
|
51
51
|
},
|
|
52
52
|
"dependencies": {
|
|
53
53
|
"tslib": "^2.3.1"
|