@skyux/progress-indicator 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 +62 -62
- package/package.json +5 -5
package/documentation.json
CHANGED
|
@@ -3301,59 +3301,59 @@
|
|
|
3301
3301
|
},
|
|
3302
3302
|
"codeExamples": [
|
|
3303
3303
|
{
|
|
3304
|
-
"fileName": "
|
|
3305
|
-
"filePath": "/projects/progress-indicator/documentation/code-examples/
|
|
3306
|
-
"rawContents": "
|
|
3304
|
+
"fileName": "wizard-demo.module.ts",
|
|
3305
|
+
"filePath": "/projects/progress-indicator/documentation/code-examples/wizard/basic/wizard-demo.module.ts",
|
|
3306
|
+
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { SkyCheckboxModule } from '@skyux/forms';\nimport { SkyModalModule } from '@skyux/modals';\nimport { SkyProgressIndicatorModule } from '@skyux/progress-indicator';\n\nimport { WizardDemoModalComponent } from './wizard-demo-modal.component';\nimport { WizardDemoComponent } from './wizard-demo.component';\n\n@NgModule({\n imports: [\n CommonModule,\n ReactiveFormsModule,\n SkyCheckboxModule,\n SkyModalModule,\n SkyProgressIndicatorModule,\n ],\n exports: [WizardDemoComponent],\n declarations: [WizardDemoComponent, WizardDemoModalComponent],\n})\nexport class SkyProgressIndicatorPassiveDemoModule {}\n"
|
|
3307
3307
|
},
|
|
3308
3308
|
{
|
|
3309
|
-
"fileName": "
|
|
3310
|
-
"filePath": "/projects/progress-indicator/documentation/code-examples/
|
|
3311
|
-
"rawContents": "import { Component } from '@angular/core';\n\n@Component({\n selector: 'app-
|
|
3309
|
+
"fileName": "wizard-demo.component.ts",
|
|
3310
|
+
"filePath": "/projects/progress-indicator/documentation/code-examples/wizard/basic/wizard-demo.component.ts",
|
|
3311
|
+
"rawContents": "import { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { SkyModalService } from '@skyux/modals';\n\nimport { WizardDemoModalComponent } from './wizard-demo-modal.component';\n\n@Component({\n selector: 'app-wizard-demo',\n templateUrl: './wizard-demo.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class WizardDemoComponent {\n constructor(private modal: SkyModalService) {}\n\n public openWizard(): void {\n this.modal.open(WizardDemoModalComponent);\n }\n}\n"
|
|
3312
3312
|
},
|
|
3313
3313
|
{
|
|
3314
|
-
"fileName": "
|
|
3315
|
-
"filePath": "/projects/progress-indicator/documentation/code-examples/
|
|
3316
|
-
"rawContents": "
|
|
3314
|
+
"fileName": "wizard-demo.component.html",
|
|
3315
|
+
"filePath": "/projects/progress-indicator/documentation/code-examples/wizard/basic/wizard-demo.component.html",
|
|
3316
|
+
"rawContents": "<button type=\"button\" class=\"sky-btn sky-btn-default\" (click)=\"openWizard()\">\n Open wizard\n</button>\n"
|
|
3317
3317
|
},
|
|
3318
3318
|
{
|
|
3319
|
-
"fileName": "
|
|
3320
|
-
"filePath": "/projects/progress-indicator/documentation/code-examples/
|
|
3321
|
-
"rawContents": "
|
|
3319
|
+
"fileName": "wizard-demo-modal.component.ts",
|
|
3320
|
+
"filePath": "/projects/progress-indicator/documentation/code-examples/wizard/basic/wizard-demo-modal.component.ts",
|
|
3321
|
+
"rawContents": "import { Component } from '@angular/core';\nimport { FormBuilder, FormGroup } from '@angular/forms';\nimport { SkyModalInstance } from '@skyux/modals';\nimport {\n SkyProgressIndicatorActionClickArgs,\n SkyProgressIndicatorChange,\n SkyProgressIndicatorDisplayMode,\n} from '@skyux/progress-indicator';\n\n@Component({\n selector: 'app-wizard-demo-modal',\n templateUrl: './wizard-demo-modal.component.html',\n})\nexport class WizardDemoModalComponent {\n public activeIndex: number | undefined = 0;\n\n public displayMode = SkyProgressIndicatorDisplayMode.Horizontal;\n\n public myForm: FormGroup;\n\n public title = 'Wizard example';\n\n public get requirementsMet(): boolean {\n switch (this.activeIndex) {\n case 0:\n return !!this.myForm.get('requiredValue1')?.value;\n case 1:\n return !!this.myForm.get('requiredValue2')?.value;\n default:\n return false;\n }\n }\n\n constructor(formBuilder: FormBuilder, public instance: SkyModalInstance) {\n this.myForm = formBuilder.group({\n requiredValue1: undefined,\n requiredValue2: undefined,\n });\n }\n\n public onCancelClick(): void {\n this.instance.cancel();\n }\n\n public onSaveClick(args: SkyProgressIndicatorActionClickArgs): void {\n args.progressHandler.advance();\n this.instance.save();\n }\n\n public updateIndex(changes: SkyProgressIndicatorChange): void {\n this.activeIndex = changes.activeIndex;\n }\n}\n"
|
|
3322
3322
|
},
|
|
3323
3323
|
{
|
|
3324
|
-
"fileName": "
|
|
3325
|
-
"filePath": "/projects/progress-indicator/documentation/code-examples/
|
|
3326
|
-
"rawContents": "
|
|
3324
|
+
"fileName": "wizard-demo-modal.component.html",
|
|
3325
|
+
"filePath": "/projects/progress-indicator/documentation/code-examples/wizard/basic/wizard-demo-modal.component.html",
|
|
3326
|
+
"rawContents": "<sky-modal>\n <sky-modal-header>\n {{ title }}\n </sky-modal-header>\n <sky-modal-content>\n <form [formGroup]=\"myForm\">\n <sky-progress-indicator\n [displayMode]=\"displayMode\"\n (progressChanges)=\"updateIndex($event)\"\n #wizardDemo\n >\n <sky-progress-indicator-item title=\"First step\">\n <div>\n <label class=\"sky-control-label sky-control-label-required\">\n Enter text to continue\n </label>\n <input\n class=\"sky-form-control\"\n type=\"text\"\n formControlName=\"requiredValue1\"\n />\n </div>\n </sky-progress-indicator-item>\n\n <sky-progress-indicator-item title=\"Second step\">\n <div>\n <sky-checkbox formControlName=\"requiredValue2\">\n <sky-checkbox-label> Select to continue </sky-checkbox-label>\n </sky-checkbox>\n </div>\n </sky-progress-indicator-item>\n\n <sky-progress-indicator-item title=\"Third step\">\n <div>Additional content or tasks go here.</div>\n </sky-progress-indicator-item>\n </sky-progress-indicator>\n </form>\n </sky-modal-content>\n <sky-modal-footer>\n <sky-progress-indicator-nav-button\n buttonType=\"previous\"\n [progressIndicator]=\"wizardDemo\"\n >\n </sky-progress-indicator-nav-button>\n <sky-progress-indicator-nav-button\n buttonType=\"next\"\n [disabled]=\"!requirementsMet\"\n [progressIndicator]=\"wizardDemo\"\n >\n </sky-progress-indicator-nav-button>\n <sky-progress-indicator-nav-button\n buttonType=\"finish\"\n buttonText=\"Finish\"\n [progressIndicator]=\"wizardDemo\"\n (actionClick)=\"onSaveClick($event)\"\n >\n </sky-progress-indicator-nav-button>\n <button\n class=\"sky-btn sky-btn-link\"\n type=\"button\"\n (click)=\"onCancelClick()\"\n >\n Cancel\n </button>\n </sky-modal-footer>\n</sky-modal>\n"
|
|
3327
3327
|
},
|
|
3328
3328
|
{
|
|
3329
|
-
"fileName": "progress-indicator-
|
|
3330
|
-
"filePath": "/projects/progress-indicator/documentation/code-examples/
|
|
3331
|
-
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyHelpInlineModule } from '@skyux/indicators';\nimport { SkyProgressIndicatorModule } from '@skyux/progress-indicator';\n\nimport {
|
|
3329
|
+
"fileName": "progress-indicator-waterfall-demo.module.ts",
|
|
3330
|
+
"filePath": "/projects/progress-indicator/documentation/code-examples/waterfall-indicator/inline-help/progress-indicator-waterfall-demo.module.ts",
|
|
3331
|
+
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyHelpInlineModule } from '@skyux/indicators';\nimport { SkyModalModule } from '@skyux/modals';\nimport { SkyProgressIndicatorModule } from '@skyux/progress-indicator';\n\nimport { SkyProgressIndicatorWaterfallDemoFormComponent } from './progress-indicator-waterfall-demo-form.component';\nimport { WaterfallIndicatorDocsComponent } from './progress-indicator-waterfall-demo.component';\n\n@NgModule({\n imports: [\n CommonModule,\n SkyProgressIndicatorModule,\n SkyModalModule,\n SkyHelpInlineModule,\n ],\n exports: [WaterfallIndicatorDocsComponent],\n declarations: [\n WaterfallIndicatorDocsComponent,\n SkyProgressIndicatorWaterfallDemoFormComponent,\n ],\n})\nexport class SkyProgressIndicatorPassiveDemoModule {}\n"
|
|
3332
3332
|
},
|
|
3333
3333
|
{
|
|
3334
|
-
"fileName": "progress-indicator-waterfall-demo
|
|
3335
|
-
"filePath": "/projects/progress-indicator/documentation/code-examples/waterfall-indicator/
|
|
3336
|
-
"rawContents": "
|
|
3334
|
+
"fileName": "progress-indicator-waterfall-demo.component.ts",
|
|
3335
|
+
"filePath": "/projects/progress-indicator/documentation/code-examples/waterfall-indicator/inline-help/progress-indicator-waterfall-demo.component.ts",
|
|
3336
|
+
"rawContents": "import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n} from '@angular/core';\nimport { SkyModalCloseArgs, SkyModalService } from '@skyux/modals';\nimport {\n SkyProgressIndicatorChange,\n SkyProgressIndicatorMessage,\n SkyProgressIndicatorMessageType,\n} from '@skyux/progress-indicator';\n\nimport { Subject } from 'rxjs';\nimport { take } from 'rxjs/operators';\n\nimport { SkyProgressIndicatorWaterfallDemoContext } from './progress-indicator-waterfall-demo-context';\nimport { SkyProgressIndicatorWaterfallDemoFormComponent } from './progress-indicator-waterfall-demo-form.component';\n\n@Component({\n selector: 'app-waterfall-indicator-docs',\n templateUrl: './progress-indicator-waterfall-demo.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class WaterfallIndicatorDocsComponent {\n public activeIndex: number | undefined = 0;\n\n public progressMessageStream = new Subject<\n SkyProgressIndicatorMessage | SkyProgressIndicatorMessageType\n >();\n\n constructor(\n private changeDetector: ChangeDetectorRef,\n private modal: SkyModalService\n ) {}\n\n public configureConnection(isProgress: boolean): void {\n this.openModalForm(\n {\n title: 'Configure connection',\n buttonText: 'Submit connection settings',\n },\n isProgress\n );\n }\n\n public setServer(isProgress: boolean): void {\n this.openModalForm(\n {\n title: 'Select remote server',\n buttonText: 'Submit server choice',\n },\n isProgress\n );\n }\n\n public testConnection(isProgress: boolean): void {\n this.openModalForm(\n {\n title: 'Connection confirmed.',\n buttonText: 'OK',\n },\n isProgress\n );\n }\n\n public alertMessage(message: string): void {\n alert(message);\n }\n\n public updateIndex(changes: SkyProgressIndicatorChange): void {\n this.activeIndex = changes.activeIndex;\n this.changeDetector.detectChanges();\n }\n\n public resetClicked(): void {\n this.progressMessageStream.next(SkyProgressIndicatorMessageType.Reset);\n }\n\n private progress(): void {\n this.progressMessageStream.next(SkyProgressIndicatorMessageType.Progress);\n }\n\n private openModalForm(\n context: SkyProgressIndicatorWaterfallDemoContext,\n isProgress: boolean\n ): void {\n const modalForm = this.modal.open(\n SkyProgressIndicatorWaterfallDemoFormComponent,\n [\n {\n provide: SkyProgressIndicatorWaterfallDemoContext,\n useValue: context,\n },\n ]\n );\n\n modalForm.closed.pipe(take(1)).subscribe((args: SkyModalCloseArgs) => {\n if (args.reason === 'save' && isProgress) {\n this.progress();\n }\n });\n }\n\n public onActionClick(): void {\n alert('Help inline button clicked!');\n }\n}\n"
|
|
3337
3337
|
},
|
|
3338
3338
|
{
|
|
3339
|
-
"fileName": "progress-indicator-waterfall-demo
|
|
3340
|
-
"filePath": "/projects/progress-indicator/documentation/code-examples/waterfall-indicator/
|
|
3341
|
-
"rawContents": "<sky-
|
|
3339
|
+
"fileName": "progress-indicator-waterfall-demo.component.html",
|
|
3340
|
+
"filePath": "/projects/progress-indicator/documentation/code-examples/waterfall-indicator/inline-help/progress-indicator-waterfall-demo.component.html",
|
|
3341
|
+
"rawContents": "<sky-progress-indicator\n id=\"progress-indicator-waterfall\"\n [messageStream]=\"progressMessageStream\"\n [startingIndex]=\"2\"\n (progressChanges)=\"updateIndex($event)\"\n #progressIndicator\n>\n <sky-progress-indicator-title>\n Set up my connection\n </sky-progress-indicator-title>\n\n <sky-progress-indicator-item title=\"Configure connection\">\n <sky-help-inline\n class=\"sky-control-help\"\n (actionClick)=\"onActionClick()\"\n ></sky-help-inline>\n <div>\n <button\n *ngIf=\"activeIndex === 0\"\n class=\"sky-btn sky-btn-primary\"\n type=\"button\"\n (click)=\"configureConnection(true)\"\n >\n Set up connection\n </button>\n <button\n *ngIf=\"activeIndex && activeIndex > 0\"\n class=\"sky-btn sky-btn-link\"\n type=\"button\"\n (click)=\"configureConnection(false)\"\n >\n Edit connection\n </button>\n </div>\n </sky-progress-indicator-item>\n\n <sky-progress-indicator-item title=\"Select remote server\">\n <sky-help-inline\n class=\"sky-control-help\"\n (actionClick)=\"onActionClick()\"\n ></sky-help-inline>\n <div *ngIf=\"activeIndex && activeIndex >= 1\">\n <button\n *ngIf=\"activeIndex === 1\"\n class=\"sky-btn sky-btn-primary\"\n type=\"button\"\n (click)=\"setServer(true)\"\n >\n Select server\n </button>\n <button\n *ngIf=\"activeIndex > 1\"\n class=\"sky-btn sky-btn-link\"\n type=\"button\"\n (click)=\"setServer(false)\"\n >\n Change server\n </button>\n </div>\n </sky-progress-indicator-item>\n\n <sky-progress-indicator-item title=\"Test connection\">\n <sky-help-inline\n class=\"sky-control-help\"\n (actionClick)=\"onActionClick()\"\n ></sky-help-inline>\n <div *ngIf=\"activeIndex && activeIndex >= 2\">\n <button\n *ngIf=\"activeIndex === 2\"\n class=\"sky-btn sky-btn-primary\"\n type=\"button\"\n (click)=\"testConnection(true)\"\n >\n Test connection\n </button>\n <button\n *ngIf=\"activeIndex > 2\"\n class=\"sky-btn sky-btn-link\"\n type=\"button\"\n (click)=\"testConnection(false)\"\n >\n Retest connection\n </button>\n </div>\n </sky-progress-indicator-item>\n\n <sky-progress-indicator-item title=\"Turn on connection\">\n <sky-help-inline\n class=\"sky-control-help\"\n (actionClick)=\"onActionClick()\"\n ></sky-help-inline>\n <div *ngIf=\"activeIndex && activeIndex >= 3\">\n <button\n *ngIf=\"activeIndex === 3\"\n class=\"sky-btn sky-btn-primary\"\n type=\"button\"\n (click)=\"alertMessage('Form completed')\"\n >\n Turn on\n </button>\n </div>\n </sky-progress-indicator-item>\n\n <sky-progress-indicator-reset-button [progressIndicator]=\"progressIndicator\">\n Erase all settings\n </sky-progress-indicator-reset-button>\n</sky-progress-indicator>\n"
|
|
3342
3342
|
},
|
|
3343
3343
|
{
|
|
3344
3344
|
"fileName": "progress-indicator-waterfall-demo-form.component.ts",
|
|
3345
|
-
"filePath": "/projects/progress-indicator/documentation/code-examples/waterfall-indicator/
|
|
3345
|
+
"filePath": "/projects/progress-indicator/documentation/code-examples/waterfall-indicator/inline-help/progress-indicator-waterfall-demo-form.component.ts",
|
|
3346
3346
|
"rawContents": "import { Component } from '@angular/core';\nimport { SkyModalInstance } from '@skyux/modals';\n\nimport { SkyProgressIndicatorWaterfallDemoContext } from './progress-indicator-waterfall-demo-context';\n\n@Component({\n selector: 'app-progress-indicator-waterfall-horizontal-demo',\n templateUrl: './progress-indicator-waterfall-demo-form.component.html',\n})\nexport class SkyProgressIndicatorWaterfallDemoFormComponent {\n constructor(\n public instance: SkyModalInstance,\n public context: SkyProgressIndicatorWaterfallDemoContext\n ) {}\n\n public submit(): void {\n this.instance.close(undefined, 'save');\n }\n}\n"
|
|
3347
3347
|
},
|
|
3348
3348
|
{
|
|
3349
|
-
"fileName": "progress-indicator-waterfall-demo.component.html",
|
|
3350
|
-
"filePath": "/projects/progress-indicator/documentation/code-examples/waterfall-indicator/
|
|
3351
|
-
"rawContents": "<sky-
|
|
3349
|
+
"fileName": "progress-indicator-waterfall-demo-form.component.html",
|
|
3350
|
+
"filePath": "/projects/progress-indicator/documentation/code-examples/waterfall-indicator/inline-help/progress-indicator-waterfall-demo-form.component.html",
|
|
3351
|
+
"rawContents": "<sky-modal>\n <sky-modal-header>\n {{ context.title }}\n </sky-modal-header>\n <sky-modal-content>\n <br />\n <br />\n </sky-modal-content>\n <sky-modal-footer>\n <button\n class=\"sky-btn sky-btn-primary\"\n style=\"margin: 0 auto; vertical-align: middle\"\n type=\"button\"\n (click)=\"submit()\"\n >\n {{ context.buttonText }}\n </button>\n </sky-modal-footer>\n</sky-modal>\n"
|
|
3352
3352
|
},
|
|
3353
3353
|
{
|
|
3354
|
-
"fileName": "progress-indicator-waterfall-demo.
|
|
3355
|
-
"filePath": "/projects/progress-indicator/documentation/code-examples/waterfall-indicator/
|
|
3356
|
-
"rawContents": "
|
|
3354
|
+
"fileName": "progress-indicator-waterfall-demo-context.ts",
|
|
3355
|
+
"filePath": "/projects/progress-indicator/documentation/code-examples/waterfall-indicator/inline-help/progress-indicator-waterfall-demo-context.ts",
|
|
3356
|
+
"rawContents": "export class SkyProgressIndicatorWaterfallDemoContext {\n public title = '';\n public buttonText = '';\n}\n"
|
|
3357
3357
|
},
|
|
3358
3358
|
{
|
|
3359
3359
|
"fileName": "progress-indicator-waterfall-demo.module.ts",
|
|
@@ -3361,59 +3361,59 @@
|
|
|
3361
3361
|
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyHelpInlineModule } from '@skyux/indicators';\nimport { SkyModalModule } from '@skyux/modals';\nimport { SkyProgressIndicatorModule } from '@skyux/progress-indicator';\n\nimport { SkyProgressIndicatorWaterfallDemoFormComponent } from './progress-indicator-waterfall-demo-form.component';\nimport { WaterfallIndicatorDocsComponent } from './progress-indicator-waterfall-demo.component';\n\n@NgModule({\n imports: [\n CommonModule,\n SkyProgressIndicatorModule,\n SkyModalModule,\n SkyHelpInlineModule,\n ],\n exports: [WaterfallIndicatorDocsComponent],\n declarations: [\n WaterfallIndicatorDocsComponent,\n SkyProgressIndicatorWaterfallDemoFormComponent,\n ],\n})\nexport class SkyProgressIndicatorPassiveDemoModule {}\n"
|
|
3362
3362
|
},
|
|
3363
3363
|
{
|
|
3364
|
-
"fileName": "progress-indicator-waterfall-demo
|
|
3365
|
-
"filePath": "/projects/progress-indicator/documentation/code-examples/waterfall-indicator/
|
|
3366
|
-
"rawContents": "
|
|
3364
|
+
"fileName": "progress-indicator-waterfall-demo.component.ts",
|
|
3365
|
+
"filePath": "/projects/progress-indicator/documentation/code-examples/waterfall-indicator/basic/progress-indicator-waterfall-demo.component.ts",
|
|
3366
|
+
"rawContents": "import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n} from '@angular/core';\nimport { SkyModalCloseArgs, SkyModalService } from '@skyux/modals';\nimport {\n SkyProgressIndicatorChange,\n SkyProgressIndicatorMessage,\n SkyProgressIndicatorMessageType,\n} from '@skyux/progress-indicator';\n\nimport { Subject } from 'rxjs';\nimport { take } from 'rxjs/operators';\n\nimport { SkyProgressIndicatorWaterfallDemoContext } from './progress-indicator-waterfall-demo-context';\nimport { SkyProgressIndicatorWaterfallDemoFormComponent } from './progress-indicator-waterfall-demo-form.component';\n\n@Component({\n selector: 'app-waterfall-indicator-docs',\n templateUrl: './progress-indicator-waterfall-demo.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class WaterfallIndicatorDocsComponent {\n public activeIndex: number | undefined = 0;\n\n public progressMessageStream = new Subject<\n SkyProgressIndicatorMessage | SkyProgressIndicatorMessageType\n >();\n\n constructor(\n private changeDetector: ChangeDetectorRef,\n private modal: SkyModalService\n ) {}\n\n public configureConnection(isProgress: boolean): void {\n this.openModalForm(\n {\n title: 'Configure connection',\n buttonText: 'Submit connection settings',\n },\n isProgress\n );\n }\n\n public setServer(isProgress: boolean): void {\n this.openModalForm(\n {\n title: 'Select remote server',\n buttonText: 'Submit server choice',\n },\n isProgress\n );\n }\n\n public testConnection(isProgress: boolean): void {\n this.openModalForm(\n {\n title: 'Connection confirmed.',\n buttonText: 'OK',\n },\n isProgress\n );\n }\n\n public alertMessage(message: string): void {\n alert(message);\n }\n\n public updateIndex(changes: SkyProgressIndicatorChange): void {\n this.activeIndex = changes.activeIndex;\n this.changeDetector.detectChanges();\n }\n\n public resetClicked(): void {\n this.progressMessageStream.next(SkyProgressIndicatorMessageType.Reset);\n }\n\n private progress(): void {\n this.progressMessageStream.next(SkyProgressIndicatorMessageType.Progress);\n }\n\n private openModalForm(\n context: SkyProgressIndicatorWaterfallDemoContext,\n isProgress: boolean\n ): void {\n const modalForm = this.modal.open(\n SkyProgressIndicatorWaterfallDemoFormComponent,\n [\n {\n provide: SkyProgressIndicatorWaterfallDemoContext,\n useValue: context,\n },\n ]\n );\n\n modalForm.closed.pipe(take(1)).subscribe((args: SkyModalCloseArgs) => {\n if (args.reason === 'save' && isProgress) {\n this.progress();\n }\n });\n }\n}\n"
|
|
3367
3367
|
},
|
|
3368
3368
|
{
|
|
3369
|
-
"fileName": "progress-indicator-waterfall-demo
|
|
3370
|
-
"filePath": "/projects/progress-indicator/documentation/code-examples/waterfall-indicator/
|
|
3371
|
-
"rawContents": "<sky-
|
|
3369
|
+
"fileName": "progress-indicator-waterfall-demo.component.html",
|
|
3370
|
+
"filePath": "/projects/progress-indicator/documentation/code-examples/waterfall-indicator/basic/progress-indicator-waterfall-demo.component.html",
|
|
3371
|
+
"rawContents": "<sky-progress-indicator\n id=\"progress-indicator-waterfall\"\n [messageStream]=\"progressMessageStream\"\n [startingIndex]=\"2\"\n (progressChanges)=\"updateIndex($event)\"\n #progressIndicator\n>\n <sky-progress-indicator-title>\n Set up my connection\n </sky-progress-indicator-title>\n\n <sky-progress-indicator-item title=\"Configure connection\">\n <div>\n <button\n *ngIf=\"activeIndex === 0\"\n class=\"sky-btn sky-btn-primary\"\n type=\"button\"\n (click)=\"configureConnection(true)\"\n >\n Set up connection\n </button>\n <button\n *ngIf=\"activeIndex && activeIndex > 0\"\n class=\"sky-btn sky-btn-link\"\n type=\"button\"\n (click)=\"configureConnection(false)\"\n >\n Edit connection\n </button>\n </div>\n </sky-progress-indicator-item>\n\n <sky-progress-indicator-item title=\"Select remote server\">\n <div *ngIf=\"activeIndex && activeIndex >= 1\">\n <button\n *ngIf=\"activeIndex === 1\"\n class=\"sky-btn sky-btn-primary\"\n type=\"button\"\n (click)=\"setServer(true)\"\n >\n Select server\n </button>\n <button\n *ngIf=\"activeIndex > 1\"\n class=\"sky-btn sky-btn-link\"\n type=\"button\"\n (click)=\"setServer(false)\"\n >\n Change server\n </button>\n </div>\n </sky-progress-indicator-item>\n\n <sky-progress-indicator-item title=\"Test connection\">\n <div *ngIf=\"activeIndex && activeIndex >= 2\">\n <button\n *ngIf=\"activeIndex === 2\"\n class=\"sky-btn sky-btn-primary\"\n type=\"button\"\n (click)=\"testConnection(true)\"\n >\n Test connection\n </button>\n <button\n *ngIf=\"activeIndex > 2\"\n class=\"sky-btn sky-btn-link\"\n type=\"button\"\n (click)=\"testConnection(false)\"\n >\n Retest connection\n </button>\n </div>\n </sky-progress-indicator-item>\n\n <sky-progress-indicator-item title=\"Turn on connection\">\n <div *ngIf=\"activeIndex && activeIndex >= 3\">\n <button\n *ngIf=\"activeIndex === 3\"\n class=\"sky-btn sky-btn-primary\"\n type=\"button\"\n (click)=\"alertMessage('Form completed')\"\n >\n Turn on\n </button>\n </div>\n </sky-progress-indicator-item>\n\n <sky-progress-indicator-reset-button [progressIndicator]=\"progressIndicator\">\n Erase all settings\n </sky-progress-indicator-reset-button>\n</sky-progress-indicator>\n"
|
|
3372
3372
|
},
|
|
3373
3373
|
{
|
|
3374
3374
|
"fileName": "progress-indicator-waterfall-demo-form.component.ts",
|
|
3375
|
-
"filePath": "/projects/progress-indicator/documentation/code-examples/waterfall-indicator/
|
|
3375
|
+
"filePath": "/projects/progress-indicator/documentation/code-examples/waterfall-indicator/basic/progress-indicator-waterfall-demo-form.component.ts",
|
|
3376
3376
|
"rawContents": "import { Component } from '@angular/core';\nimport { SkyModalInstance } from '@skyux/modals';\n\nimport { SkyProgressIndicatorWaterfallDemoContext } from './progress-indicator-waterfall-demo-context';\n\n@Component({\n selector: 'app-progress-indicator-waterfall-horizontal-demo',\n templateUrl: './progress-indicator-waterfall-demo-form.component.html',\n})\nexport class SkyProgressIndicatorWaterfallDemoFormComponent {\n constructor(\n public instance: SkyModalInstance,\n public context: SkyProgressIndicatorWaterfallDemoContext\n ) {}\n\n public submit(): void {\n this.instance.close(undefined, 'save');\n }\n}\n"
|
|
3377
3377
|
},
|
|
3378
3378
|
{
|
|
3379
|
-
"fileName": "progress-indicator-waterfall-demo.component.html",
|
|
3380
|
-
"filePath": "/projects/progress-indicator/documentation/code-examples/waterfall-indicator/
|
|
3381
|
-
"rawContents": "<sky-
|
|
3379
|
+
"fileName": "progress-indicator-waterfall-demo-form.component.html",
|
|
3380
|
+
"filePath": "/projects/progress-indicator/documentation/code-examples/waterfall-indicator/basic/progress-indicator-waterfall-demo-form.component.html",
|
|
3381
|
+
"rawContents": "<sky-modal>\n <sky-modal-header>\n {{ context.title }}\n </sky-modal-header>\n <sky-modal-content>\n <br />\n <br />\n </sky-modal-content>\n <sky-modal-footer>\n <button\n class=\"sky-btn sky-btn-primary\"\n style=\"margin: 0 auto; vertical-align: middle\"\n type=\"button\"\n (click)=\"submit()\"\n >\n {{ context.buttonText }}\n </button>\n </sky-modal-footer>\n</sky-modal>\n"
|
|
3382
3382
|
},
|
|
3383
3383
|
{
|
|
3384
|
-
"fileName": "progress-indicator-waterfall-demo.
|
|
3385
|
-
"filePath": "/projects/progress-indicator/documentation/code-examples/waterfall-indicator/
|
|
3386
|
-
"rawContents": "
|
|
3384
|
+
"fileName": "progress-indicator-waterfall-demo-context.ts",
|
|
3385
|
+
"filePath": "/projects/progress-indicator/documentation/code-examples/waterfall-indicator/basic/progress-indicator-waterfall-demo-context.ts",
|
|
3386
|
+
"rawContents": "export class SkyProgressIndicatorWaterfallDemoContext {\n public title = '';\n public buttonText = '';\n}\n"
|
|
3387
3387
|
},
|
|
3388
3388
|
{
|
|
3389
|
-
"fileName": "progress-indicator-
|
|
3390
|
-
"filePath": "/projects/progress-indicator/documentation/code-examples/
|
|
3391
|
-
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyHelpInlineModule } from '@skyux/indicators';\nimport {
|
|
3389
|
+
"fileName": "progress-indicator-passive-demo.module.ts",
|
|
3390
|
+
"filePath": "/projects/progress-indicator/documentation/code-examples/passive-indicator/inline-help/progress-indicator-passive-demo.module.ts",
|
|
3391
|
+
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyHelpInlineModule } from '@skyux/indicators';\nimport { SkyProgressIndicatorModule } from '@skyux/progress-indicator';\n\nimport { SkyProgressIndicatorPassiveDemoComponent } from './progress-indicator-passive-demo.component';\n\n@NgModule({\n imports: [CommonModule, SkyProgressIndicatorModule, SkyHelpInlineModule],\n exports: [SkyProgressIndicatorPassiveDemoComponent],\n declarations: [SkyProgressIndicatorPassiveDemoComponent],\n})\nexport class SkyProgressIndicatorPassiveDemoModule {}\n"
|
|
3392
3392
|
},
|
|
3393
3393
|
{
|
|
3394
|
-
"fileName": "
|
|
3395
|
-
"filePath": "/projects/progress-indicator/documentation/code-examples/
|
|
3396
|
-
"rawContents": "
|
|
3394
|
+
"fileName": "progress-indicator-passive-demo.component.ts",
|
|
3395
|
+
"filePath": "/projects/progress-indicator/documentation/code-examples/passive-indicator/inline-help/progress-indicator-passive-demo.component.ts",
|
|
3396
|
+
"rawContents": "import { Component } from '@angular/core';\n\n@Component({\n selector: 'app-progress-indicator-passive-demo',\n templateUrl: './progress-indicator-passive-demo.component.html',\n})\nexport class SkyProgressIndicatorPassiveDemoComponent {\n public onActionClick(): void {\n alert('Help inline button clicked!');\n }\n}\n"
|
|
3397
3397
|
},
|
|
3398
3398
|
{
|
|
3399
|
-
"fileName": "
|
|
3400
|
-
"filePath": "/projects/progress-indicator/documentation/code-examples/
|
|
3401
|
-
"rawContents": "
|
|
3399
|
+
"fileName": "progress-indicator-passive-demo.component.html",
|
|
3400
|
+
"filePath": "/projects/progress-indicator/documentation/code-examples/passive-indicator/inline-help/progress-indicator-passive-demo.component.html",
|
|
3401
|
+
"rawContents": "<sky-progress-indicator [isPassive]=\"true\" [startingIndex]=\"1\">\n <sky-progress-indicator-item title=\"Finished step\"\n >Optional details about this step\n <sky-help-inline\n class=\"sky-control-help\"\n (actionClick)=\"onActionClick()\"\n ></sky-help-inline>\n </sky-progress-indicator-item>\n <sky-progress-indicator-item title=\"Current step\">\n <sky-help-inline\n class=\"sky-control-help\"\n (actionClick)=\"onActionClick()\"\n ></sky-help-inline>\n </sky-progress-indicator-item>\n <sky-progress-indicator-item title=\"HIDDEN TITLE\">\n <sky-help-inline\n class=\"sky-control-help\"\n (actionClick)=\"onActionClick()\"\n ></sky-help-inline>\n </sky-progress-indicator-item>\n</sky-progress-indicator>\n"
|
|
3402
3402
|
},
|
|
3403
3403
|
{
|
|
3404
|
-
"fileName": "
|
|
3405
|
-
"filePath": "/projects/progress-indicator/documentation/code-examples/
|
|
3406
|
-
"rawContents": "
|
|
3404
|
+
"fileName": "progress-indicator-passive-demo.module.ts",
|
|
3405
|
+
"filePath": "/projects/progress-indicator/documentation/code-examples/passive-indicator/basic/progress-indicator-passive-demo.module.ts",
|
|
3406
|
+
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyProgressIndicatorModule } from '@skyux/progress-indicator';\n\nimport { SkyProgressIndicatorPassiveDemoComponent } from './progress-indicator-passive-demo.component';\n\n@NgModule({\n imports: [CommonModule, SkyProgressIndicatorModule],\n exports: [SkyProgressIndicatorPassiveDemoComponent],\n declarations: [SkyProgressIndicatorPassiveDemoComponent],\n})\nexport class SkyProgressIndicatorPassiveDemoModule {}\n"
|
|
3407
3407
|
},
|
|
3408
3408
|
{
|
|
3409
|
-
"fileName": "
|
|
3410
|
-
"filePath": "/projects/progress-indicator/documentation/code-examples/
|
|
3411
|
-
"rawContents": "import {
|
|
3409
|
+
"fileName": "progress-indicator-passive-demo.component.ts",
|
|
3410
|
+
"filePath": "/projects/progress-indicator/documentation/code-examples/passive-indicator/basic/progress-indicator-passive-demo.component.ts",
|
|
3411
|
+
"rawContents": "import { Component } from '@angular/core';\n\n@Component({\n selector: 'app-progress-indicator-passive-demo',\n templateUrl: './progress-indicator-passive-demo.component.html',\n})\nexport class SkyProgressIndicatorPassiveDemoComponent {}\n"
|
|
3412
3412
|
},
|
|
3413
3413
|
{
|
|
3414
|
-
"fileName": "
|
|
3415
|
-
"filePath": "/projects/progress-indicator/documentation/code-examples/
|
|
3416
|
-
"rawContents": "
|
|
3414
|
+
"fileName": "progress-indicator-passive-demo.component.html",
|
|
3415
|
+
"filePath": "/projects/progress-indicator/documentation/code-examples/passive-indicator/basic/progress-indicator-passive-demo.component.html",
|
|
3416
|
+
"rawContents": "<sky-progress-indicator [isPassive]=\"true\" [startingIndex]=\"1\">\n <sky-progress-indicator-item title=\"Finished step\"\n >Optional details about this step\n </sky-progress-indicator-item>\n <sky-progress-indicator-item title=\"Current step\">\n </sky-progress-indicator-item>\n <sky-progress-indicator-item title=\"HIDDEN TITLE\">\n </sky-progress-indicator-item>\n</sky-progress-indicator>\n"
|
|
3417
3417
|
}
|
|
3418
3418
|
]
|
|
3419
3419
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@skyux/progress-indicator",
|
|
3
|
-
"version": "9.0.0-alpha.
|
|
3
|
+
"version": "9.0.0-alpha.1",
|
|
4
4
|
"author": "Blackbaud, Inc.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"blackbaud",
|
|
@@ -32,10 +32,10 @@
|
|
|
32
32
|
"peerDependencies": {
|
|
33
33
|
"@angular/common": "^16.1.7",
|
|
34
34
|
"@angular/core": "^16.1.7",
|
|
35
|
-
"@skyux/core": "9.0.0-alpha.
|
|
36
|
-
"@skyux/i18n": "9.0.0-alpha.
|
|
37
|
-
"@skyux/indicators": "9.0.0-alpha.
|
|
38
|
-
"@skyux/theme": "9.0.0-alpha.
|
|
35
|
+
"@skyux/core": "9.0.0-alpha.1",
|
|
36
|
+
"@skyux/i18n": "9.0.0-alpha.1",
|
|
37
|
+
"@skyux/indicators": "9.0.0-alpha.1",
|
|
38
|
+
"@skyux/theme": "9.0.0-alpha.1"
|
|
39
39
|
},
|
|
40
40
|
"dependencies": {
|
|
41
41
|
"tslib": "^2.5.0"
|