@skyux/tabs 5.0.2 → 5.0.3
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 +26 -71
- package/package.json +1 -1
package/documentation.json
CHANGED
|
@@ -5298,79 +5298,34 @@
|
|
|
5298
5298
|
},
|
|
5299
5299
|
"codeExamples": [
|
|
5300
5300
|
{
|
|
5301
|
-
"fileName": "
|
|
5302
|
-
"filePath": "/projects/tabs/documentation/code-examples/sectioned-form/
|
|
5301
|
+
"fileName": "address-form-demo.component.html",
|
|
5302
|
+
"filePath": "/projects/tabs/documentation/code-examples/sectioned-form/modal/address-form-demo.component.html",
|
|
5303
5303
|
"rawContents": "<div>Address form</div>\n"
|
|
5304
5304
|
},
|
|
5305
5305
|
{
|
|
5306
|
-
"fileName": "
|
|
5307
|
-
"filePath": "/projects/tabs/documentation/code-examples/sectioned-form/
|
|
5308
|
-
"rawContents": "import {\n Component\n} from '@angular/core';\n\n@Component({\n selector: 'app-
|
|
5306
|
+
"fileName": "address-form-demo.component.ts",
|
|
5307
|
+
"filePath": "/projects/tabs/documentation/code-examples/sectioned-form/modal/address-form-demo.component.ts",
|
|
5308
|
+
"rawContents": "import {\n ChangeDetectionStrategy,\n Component\n} from '@angular/core';\n\n@Component({\n selector: 'app-address-form-demo',\n templateUrl: './address-form-demo.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class AddressFormDemoComponent { }\n"
|
|
5309
5309
|
},
|
|
5310
5310
|
{
|
|
5311
|
-
"fileName": "
|
|
5312
|
-
"filePath": "/projects/tabs/documentation/code-examples/sectioned-form/
|
|
5313
|
-
"rawContents": "<form
|
|
5311
|
+
"fileName": "information-form-demo.component.html",
|
|
5312
|
+
"filePath": "/projects/tabs/documentation/code-examples/sectioned-form/modal/information-form-demo.component.html",
|
|
5313
|
+
"rawContents": "<form novalidate [formGroup]=\"myForm\">\n <div style=\"display: flex\">\n <div class=\"sky-margin-inline-default\" style=\"flex: 1\">\n <sky-input-box>\n <label\n class=\"sky-control-label sky-control-label-required\"\n [for]=\"nameInput.id\"\n >\n Name\n </label>\n <input\n class=\"sky-form-control\"\n formControlName=\"name\"\n skyId\n type=\"text\"\n #nameInput\n />\n </sky-input-box>\n </div>\n <div style=\"flex: 1\">\n <sky-input-box>\n <label class=\"sky-control-label\" [for]=\"idInput.id\"> ID </label>\n <input\n class=\"sky-form-control\"\n formControlName=\"id\"\n type=\"text\"\n #idInput\n />\n </sky-input-box>\n <div *ngIf=\"myForm.get('id')?.invalid\" class=\"alert alert-danger\"></div>\n <div\n *ngIf=\"myForm.get('id')?.invalid\"\n class=\"alert alert-danger sky-error-label\"\n >\n Enter a valid value.\n </div>\n </div>\n </div>\n</form>\n"
|
|
5314
5314
|
},
|
|
5315
5315
|
{
|
|
5316
|
-
"fileName": "
|
|
5317
|
-
"filePath": "/projects/tabs/documentation/code-examples/sectioned-form/
|
|
5318
|
-
"rawContents": "import {\n Component,\n OnInit
|
|
5316
|
+
"fileName": "information-form-demo.component.ts",
|
|
5317
|
+
"filePath": "/projects/tabs/documentation/code-examples/sectioned-form/modal/information-form-demo.component.ts",
|
|
5318
|
+
"rawContents": "import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n OnInit,\n} from '@angular/core';\nimport { FormBuilder, FormGroup, Validators } from '@angular/forms';\nimport { SkySectionedFormService } from '@skyux/tabs';\n\n@Component({\n selector: 'app-information-form-demo',\n templateUrl: './information-form-demo.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class InformationFormDemoComponent implements OnInit {\n public id: string = '5324901';\n public myForm: FormGroup;\n public name: string = '';\n public nameRequired = false;\n\n constructor(\n private formBuilder: FormBuilder,\n private sectionedFormService: SkySectionedFormService,\n private changeDetector: ChangeDetectorRef\n ) {\n this.myForm = this.formBuilder.group({\n name: [this.name],\n nameRequired: [this.nameRequired],\n id: [this.id, Validators.pattern('^[0-9]+$')],\n });\n }\n\n public ngOnInit(): void {\n this.myForm.valueChanges.subscribe((changes) => {\n console.log(changes);\n this.id = changes.id;\n this.name = changes.name;\n this.nameRequired = changes.nameRequired;\n this.checkValidity();\n });\n this.changeDetector.markForCheck();\n }\n\n public checkValidity(): void {\n if (this.nameRequired) {\n this.myForm.get('name')?.setValidators([Validators.required]);\n this.sectionedFormService.requiredFieldChanged(true);\n } else {\n this.myForm.get('name')?.setValidators([]);\n this.sectionedFormService.requiredFieldChanged(false);\n }\n\n if (!this.myForm.get('name')?.value && this.nameRequired) {\n this.sectionedFormService.invalidFieldChanged(true);\n } else {\n this.sectionedFormService.invalidFieldChanged(false);\n }\n }\n}\n"
|
|
5319
5319
|
},
|
|
5320
5320
|
{
|
|
5321
|
-
"fileName": "
|
|
5322
|
-
"filePath": "/projects/tabs/documentation/code-examples/sectioned-form/
|
|
5321
|
+
"fileName": "phone-form-demo.component.html",
|
|
5322
|
+
"filePath": "/projects/tabs/documentation/code-examples/sectioned-form/modal/phone-form-demo.component.html",
|
|
5323
5323
|
"rawContents": "<div>Phone form</div>\n"
|
|
5324
5324
|
},
|
|
5325
5325
|
{
|
|
5326
|
-
"fileName": "
|
|
5327
|
-
"filePath": "/projects/tabs/documentation/code-examples/sectioned-form/
|
|
5328
|
-
"rawContents": "import {\n Component\n} from '@angular/core';\n\n@Component({\n selector: 'app-
|
|
5329
|
-
},
|
|
5330
|
-
{
|
|
5331
|
-
"fileName": "sectioned-form-demo.component.html",
|
|
5332
|
-
"filePath": "/projects/tabs/documentation/code-examples/sectioned-form/basic/sectioned-form-demo.component.html",
|
|
5333
|
-
"rawContents": "<sky-sectioned-form\n (indexChanged)=\"onIndexChanged($event)\"\n>\n <sky-sectioned-form-section\n heading=\"Basic information\"\n >\n <app-demo-information-form></app-demo-information-form>\n </sky-sectioned-form-section>\n <sky-sectioned-form-section\n active=\"true\"\n heading=\"Addresses\"\n itemCount=\"2\"\n >\n <app-demo-address-form></app-demo-address-form>\n </sky-sectioned-form-section>\n <sky-sectioned-form-section\n heading=\"Phone numbers\"\n itemCount=\"3\"\n >\n <app-demo-phone-form></app-demo-phone-form>\n </sky-sectioned-form-section>\n</sky-sectioned-form>\n\n<p>\n Active index: {{ activeIndexDisplay }}\n</p>\n"
|
|
5334
|
-
},
|
|
5335
|
-
{
|
|
5336
|
-
"fileName": "sectioned-form-demo.component.ts",
|
|
5337
|
-
"filePath": "/projects/tabs/documentation/code-examples/sectioned-form/basic/sectioned-form-demo.component.ts",
|
|
5338
|
-
"rawContents": "import {\n Component\n} from '@angular/core';\n\n@Component({\n selector: 'app-sectioned-form-demo',\n templateUrl: './sectioned-form-demo.component.html'\n})\nexport class SectionedFormDemoComponent {\n\n public activeIndexDisplay: number;\n\n public onIndexChanged(newIndex: number): void {\n this.activeIndexDisplay = newIndex;\n }\n\n}\n"
|
|
5339
|
-
},
|
|
5340
|
-
{
|
|
5341
|
-
"fileName": "sectioned-form-demo.module.ts",
|
|
5342
|
-
"filePath": "/projects/tabs/documentation/code-examples/sectioned-form/basic/sectioned-form-demo.module.ts",
|
|
5343
|
-
"rawContents": "import {\n NgModule\n} from '@angular/core';\n\nimport {\n CommonModule\n} from '@angular/common';\n\nimport {\n ReactiveFormsModule\n} from '@angular/forms';\n\nimport {\n SkyIdModule\n} from '@skyux/core';\n\nimport {\n SkyInputBoxModule\n} from '@skyux/forms';\n\nimport {\n SkySectionedFormModule\n} from '@skyux/tabs';\n\nimport {\n DemoAddressFormComponent\n} from './demo-address-form.component';\n\nimport {\n DemoInformationFormComponent\n} from './demo-information-form.component';\n\nimport {\n DemoPhoneFormComponent\n} from './demo-phone-form.component';\n\nimport {\n SectionedFormDemoComponent\n} from './sectioned-form-demo.component';\n\n@NgModule({\n imports: [\n CommonModule,\n ReactiveFormsModule,\n SkyIdModule,\n SkyInputBoxModule,\n SkySectionedFormModule\n ],\n declarations: [\n DemoAddressFormComponent,\n DemoInformationFormComponent,\n DemoPhoneFormComponent,\n SectionedFormDemoComponent\n ],\n exports: [\n SectionedFormDemoComponent\n ]\n})\n\nexport class SectionedFormDemoModule { }\n"
|
|
5344
|
-
},
|
|
5345
|
-
{
|
|
5346
|
-
"fileName": "demo-address-form.component.html",
|
|
5347
|
-
"filePath": "/projects/tabs/documentation/code-examples/sectioned-form/modal/demo-address-form.component.html",
|
|
5348
|
-
"rawContents": "<div>Address form</div>\n"
|
|
5349
|
-
},
|
|
5350
|
-
{
|
|
5351
|
-
"fileName": "demo-address-form.component.ts",
|
|
5352
|
-
"filePath": "/projects/tabs/documentation/code-examples/sectioned-form/modal/demo-address-form.component.ts",
|
|
5353
|
-
"rawContents": "import {\n Component\n} from '@angular/core';\n\n@Component({\n selector: 'app-demo-address-form',\n templateUrl: './demo-address-form.component.html'\n})\nexport class DemoAddressFormComponent { }\n"
|
|
5354
|
-
},
|
|
5355
|
-
{
|
|
5356
|
-
"fileName": "demo-information-form.component.html",
|
|
5357
|
-
"filePath": "/projects/tabs/documentation/code-examples/sectioned-form/modal/demo-information-form.component.html",
|
|
5358
|
-
"rawContents": "<form\n novalidate\n [formGroup]=\"myForm\"\n>\n <div\n style=\"display: flex;\"\n >\n <div\n class=\"sky-margin-inline-default\"\n style=\"flex: 1;\"\n >\n <sky-input-box>\n <label\n class=\"sky-control-label sky-control-label-required\"\n [for]=\"nameInput.id\"\n >\n Name\n </label>\n <input\n class=\"sky-form-control\"\n formControlName=\"name\"\n skyId\n type=\"text\"\n #nameInput\n />\n </sky-input-box>\n </div>\n <div\n style=\"flex: 1;\"\n >\n <sky-input-box>\n <label\n class=\"sky-control-label\"\n [for]=\"idInput.id\"\n >\n ID\n </label>\n <input\n class=\"sky-form-control\"\n formControlName=\"id\"\n type=\"text\"\n #idInput\n />\n </sky-input-box>\n <div *ngIf=\"myForm.get('id').invalid\"\n class=\"alert alert-danger\"\n >\n </div>\n <div *ngIf=\"myForm.get('id').invalid\"\n class=\"alert alert-danger sky-error-label\"\n >\n Enter a valid value.\n </div>\n </div>\n </div>\n</form>\n"
|
|
5359
|
-
},
|
|
5360
|
-
{
|
|
5361
|
-
"fileName": "demo-information-form.component.ts",
|
|
5362
|
-
"filePath": "/projects/tabs/documentation/code-examples/sectioned-form/modal/demo-information-form.component.ts",
|
|
5363
|
-
"rawContents": "import {\n Component,\n OnInit\n} from '@angular/core';\n\nimport {\n FormBuilder,\n FormGroup,\n Validators\n} from '@angular/forms';\n\nimport {\n SkySectionedFormService\n} from '@skyux/tabs';\n\n@Component({\n selector: 'app-demo-information-form',\n templateUrl: './demo-information-form.component.html'\n})\nexport class DemoInformationFormComponent implements OnInit {\n public id: string = '5324901';\n public myForm: FormGroup;\n public name: string = '';\n public nameRequired = false;\n\n constructor(\n private formBuilder: FormBuilder,\n private sectionedFormService: SkySectionedFormService\n ) {}\n\n public ngOnInit(): void {\n this.myForm = this.formBuilder.group({\n name: [this.name],\n nameRequired: [this.nameRequired],\n id: [this.id, Validators.pattern('^[0-9]+$')]\n });\n\n this.myForm.valueChanges.subscribe((changes) => {\n console.log(changes);\n this.id = changes.id;\n this.name = changes.name;\n this.nameRequired = changes.nameRequired;\n this.checkValidity();\n });\n }\n\n public checkValidity(): void {\n if (this.nameRequired) {\n this.myForm.get('name').setValidators([Validators.required]);\n this.sectionedFormService.requiredFieldChanged(true);\n } else {\n this.myForm.get('name').setValidators([]);\n this.sectionedFormService.requiredFieldChanged(false);\n }\n\n if (!this.myForm.get('name').value && this.nameRequired) {\n this.sectionedFormService.invalidFieldChanged(true);\n } else {\n this.sectionedFormService.invalidFieldChanged(false);\n }\n }\n}\n"
|
|
5364
|
-
},
|
|
5365
|
-
{
|
|
5366
|
-
"fileName": "demo-phone-form.component.html",
|
|
5367
|
-
"filePath": "/projects/tabs/documentation/code-examples/sectioned-form/modal/demo-phone-form.component.html",
|
|
5368
|
-
"rawContents": "<div>Phone form</div>\n"
|
|
5369
|
-
},
|
|
5370
|
-
{
|
|
5371
|
-
"fileName": "demo-phone-form.component.ts",
|
|
5372
|
-
"filePath": "/projects/tabs/documentation/code-examples/sectioned-form/modal/demo-phone-form.component.ts",
|
|
5373
|
-
"rawContents": "import {\n Component\n} from '@angular/core';\n\n@Component({\n selector: 'app-demo-phone-form',\n templateUrl: './demo-phone-form.component.html'\n})\nexport class DemoPhoneFormComponent { }\n"
|
|
5326
|
+
"fileName": "phone-form-demo.component.ts",
|
|
5327
|
+
"filePath": "/projects/tabs/documentation/code-examples/sectioned-form/modal/phone-form-demo.component.ts",
|
|
5328
|
+
"rawContents": "import {\n ChangeDetectionStrategy,\n Component\n} from '@angular/core';\n\n@Component({\n selector: 'app-phone-form-demo',\n templateUrl: './phone-form-demo.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class PhoneFormDemoComponent { }\n"
|
|
5374
5329
|
},
|
|
5375
5330
|
{
|
|
5376
5331
|
"fileName": "sectioned-form-demo.component.html",
|
|
@@ -5380,22 +5335,22 @@
|
|
|
5380
5335
|
{
|
|
5381
5336
|
"fileName": "sectioned-form-demo.component.ts",
|
|
5382
5337
|
"filePath": "/projects/tabs/documentation/code-examples/sectioned-form/modal/sectioned-form-demo.component.ts",
|
|
5383
|
-
"rawContents": "import {\n Component\n} from '@angular/core';\n\nimport {\n SkyModalCloseArgs,\n SkyModalService\n} from '@skyux/modals';\n\nimport {\n
|
|
5338
|
+
"rawContents": "import {\n ChangeDetectionStrategy,\n Component\n} from '@angular/core';\n\nimport {\n SkyModalCloseArgs,\n SkyModalService\n} from '@skyux/modals';\n\nimport {\n SectionedFormModalDemoComponent\n} from './sectioned-form-modal-demo.component';\n\n@Component({\n selector: 'app-sectioned-form-demo',\n templateUrl: './sectioned-form-demo.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class SectionedFormDemoComponent {\n\n constructor(\n private modal: SkyModalService\n ) {}\n\n public openModal(): void {\n let modalInstance = this.modal.open(SectionedFormModalDemoComponent);\n\n modalInstance.closed.subscribe((result: SkyModalCloseArgs) => {\n if (result.reason === 'cancel') {\n console.log(`Modal cancelled`);\n } else if (result.reason === 'save') {\n console.log(`Modal saved`);\n }\n });\n }\n}\n"
|
|
5384
5339
|
},
|
|
5385
5340
|
{
|
|
5386
|
-
"fileName": "sectioned-form-
|
|
5387
|
-
"filePath": "/projects/tabs/documentation/code-examples/sectioned-form/modal/sectioned-form-
|
|
5388
|
-
"rawContents": "import {\n NgModule\n} from '@angular/core';\n\nimport {\n CommonModule\n} from '@angular/common';\n\nimport {\n ReactiveFormsModule\n} from '@angular/forms';\n\nimport {\n SkyIdModule\n} from '@skyux/core';\n\nimport {\n SkyInputBoxModule\n} from '@skyux/forms';\n\nimport {\n SkyModalModule\n} from '@skyux/modals';\n\nimport {\n SkySectionedFormModule\n} from '@skyux/tabs';\n\nimport {\n
|
|
5341
|
+
"fileName": "sectioned-form-demo.module.ts",
|
|
5342
|
+
"filePath": "/projects/tabs/documentation/code-examples/sectioned-form/modal/sectioned-form-demo.module.ts",
|
|
5343
|
+
"rawContents": "import {\n NgModule\n} from '@angular/core';\n\nimport {\n CommonModule\n} from '@angular/common';\n\nimport {\n ReactiveFormsModule\n} from '@angular/forms';\n\nimport {\n SkyIdModule\n} from '@skyux/core';\n\nimport {\n SkyInputBoxModule\n} from '@skyux/forms';\n\nimport {\n SkyModalModule\n} from '@skyux/modals';\n\nimport {\n SkySectionedFormModule\n} from '@skyux/tabs';\n\nimport {\n AddressFormDemoComponent\n} from './address-form-demo.component';\n\nimport {\n InformationFormDemoComponent\n} from './information-form-demo.component';\n\nimport {\n PhoneFormDemoComponent\n} from './phone-form-demo.component';\n\nimport {\n SectionedFormModalDemoComponent\n} from './sectioned-form-modal-demo.component';\n\nimport {\n SectionedFormDemoComponent\n} from './sectioned-form-demo.component';\n\n@NgModule({\n declarations: [\n AddressFormDemoComponent,\n InformationFormDemoComponent,\n PhoneFormDemoComponent,\n SectionedFormModalDemoComponent,\n SectionedFormDemoComponent,\n ],\n entryComponents: [\n SectionedFormModalDemoComponent\n ],\n exports: [\n SectionedFormDemoComponent\n ],\n imports: [\n CommonModule,\n ReactiveFormsModule,\n SkyIdModule,\n SkyInputBoxModule,\n SkyModalModule,\n SkySectionedFormModule\n ],\n})\n\nexport class SectionedFormDemoModule { }\n"
|
|
5389
5344
|
},
|
|
5390
5345
|
{
|
|
5391
|
-
"fileName": "sectioned-modal-
|
|
5392
|
-
"filePath": "/projects/tabs/documentation/code-examples/sectioned-form/modal/sectioned-modal-
|
|
5393
|
-
"rawContents": "<sky-modal>\n <sky-modal-header>\n
|
|
5346
|
+
"fileName": "sectioned-form-modal-demo.component.html",
|
|
5347
|
+
"filePath": "/projects/tabs/documentation/code-examples/sectioned-form/modal/sectioned-form-modal-demo.component.html",
|
|
5348
|
+
"rawContents": "<sky-modal>\n <sky-modal-header>\n Sectioned form — Index: {{ activeIndexDisplay }}\n </sky-modal-header>\n <sky-modal-content>\n <sky-sectioned-form (indexChanged)=\"onIndexChanged($event)\">\n <sky-sectioned-form-section heading=\"Basic information\">\n <app-information-form-demo></app-information-form-demo>\n </sky-sectioned-form-section>\n <sky-sectioned-form-section\n heading=\"Addresses\"\n [itemCount]=\"2\"\n [active]=\"activeTab\"\n >\n <app-address-form-demo></app-address-form-demo>\n </sky-sectioned-form-section>\n <sky-sectioned-form-section heading=\"Phone numbers\" [itemCount]=\"3\">\n <app-phone-form-demo></app-phone-form-demo>\n </sky-sectioned-form-section>\n </sky-sectioned-form>\n </sky-modal-content>\n <sky-modal-footer>\n <button\n *ngIf=\"tabsHidden()\"\n class=\"sky-btn sky-btn-secondary\"\n type=\"button\"\n (click)=\"showTabs()\"\n >\n Show sections\n </button>\n <button\n class=\"sky-btn sky-btn-primary\"\n type=\"button\"\n (click)=\"modalInstance.save()\"\n >\n Save\n </button>\n <button\n class=\"sky-btn sky-btn-link\"\n type=\"button\"\n (click)=\"modalInstance.cancel()\"\n >\n Cancel\n </button>\n </sky-modal-footer>\n</sky-modal>\n"
|
|
5394
5349
|
},
|
|
5395
5350
|
{
|
|
5396
|
-
"fileName": "sectioned-modal-
|
|
5397
|
-
"filePath": "/projects/tabs/documentation/code-examples/sectioned-form/modal/sectioned-modal-
|
|
5398
|
-
"rawContents": "import {\n Component,\n ViewChild
|
|
5351
|
+
"fileName": "sectioned-form-modal-demo.component.ts",
|
|
5352
|
+
"filePath": "/projects/tabs/documentation/code-examples/sectioned-form/modal/sectioned-form-modal-demo.component.ts",
|
|
5353
|
+
"rawContents": "import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ViewChild,\n} from '@angular/core';\nimport { SkyModalInstance } from '@skyux/modals';\nimport { SkySectionedFormComponent } from '@skyux/tabs';\n\n@Component({\n selector: 'app-sectioned-form-modal-demo',\n templateUrl: './sectioned-form-modal-demo.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SectionedFormModalDemoComponent {\n public activeIndexDisplay: number | undefined;\n\n public activeTab = true;\n\n @ViewChild(SkySectionedFormComponent)\n public sectionedFormComponent: SkySectionedFormComponent | undefined;\n\n constructor(\n public modalInstance: SkyModalInstance,\n private changeDetector: ChangeDetectorRef\n ) {}\n\n public onIndexChanged(newIndex: number): void {\n this.activeIndexDisplay = newIndex;\n this.changeDetector.markForCheck();\n }\n\n public tabsHidden(): boolean {\n return !this.sectionedFormComponent?.tabsVisible();\n }\n\n public showTabs(): void {\n this.sectionedFormComponent!.showTabs();\n }\n}\n"
|
|
5399
5354
|
},
|
|
5400
5355
|
{
|
|
5401
5356
|
"fileName": "tabs-demo.component.html",
|