@skyux/tabs 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 +100 -100
- package/package.json +9 -9
package/documentation.json
CHANGED
|
@@ -7029,184 +7029,184 @@
|
|
|
7029
7029
|
},
|
|
7030
7030
|
"codeExamples": [
|
|
7031
7031
|
{
|
|
7032
|
-
"fileName": "
|
|
7033
|
-
"filePath": "/projects/tabs/documentation/code-examples/
|
|
7034
|
-
"rawContents": "
|
|
7032
|
+
"fileName": "wizard-demo.module.ts",
|
|
7033
|
+
"filePath": "/projects/tabs/documentation/code-examples/wizard/basic/wizard-demo.module.ts",
|
|
7034
|
+
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { SkyIdModule } from '@skyux/core';\nimport { SkyCheckboxModule, SkyInputBoxModule } from '@skyux/forms';\nimport { SkyStatusIndicatorModule } from '@skyux/indicators';\nimport { SkyFluidGridModule } from '@skyux/layout';\nimport { SkyModalModule } from '@skyux/modals';\nimport { SkyPhoneFieldModule } from '@skyux/phone-field';\nimport { SkyTabsModule } from '@skyux/tabs';\nimport { SkyThemeModule } from '@skyux/theme';\n\nimport { WizardDemoModalComponent } from './wizard-demo-modal.component';\nimport { WizardDemoComponent } from './wizard-demo.component';\n\n@NgModule({\n declarations: [WizardDemoComponent, WizardDemoModalComponent],\n imports: [\n CommonModule,\n ReactiveFormsModule,\n SkyCheckboxModule,\n SkyFluidGridModule,\n SkyIdModule,\n SkyInputBoxModule,\n SkyModalModule,\n SkyPhoneFieldModule,\n SkyStatusIndicatorModule,\n SkyTabsModule,\n SkyThemeModule,\n ],\n exports: [WizardDemoComponent],\n})\nexport class WizardDemoModule {}\n"
|
|
7035
7035
|
},
|
|
7036
7036
|
{
|
|
7037
|
-
"fileName": "
|
|
7038
|
-
"filePath": "/projects/tabs/documentation/code-examples/
|
|
7039
|
-
"rawContents": "import {
|
|
7037
|
+
"fileName": "wizard-demo.component.ts",
|
|
7038
|
+
"filePath": "/projects/tabs/documentation/code-examples/wizard/basic/wizard-demo.component.ts",
|
|
7039
|
+
"rawContents": "import { 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})\nexport class WizardDemoComponent {\n #modalService: SkyModalService;\n\n constructor(modalService: SkyModalService) {\n this.#modalService = modalService;\n }\n\n public modalSize = 'large';\n\n public openWizard(): void {\n this.#modalService.open(WizardDemoModalComponent, { size: this.modalSize });\n }\n}\n"
|
|
7040
7040
|
},
|
|
7041
7041
|
{
|
|
7042
|
-
"fileName": "
|
|
7043
|
-
"filePath": "/projects/tabs/documentation/code-examples/
|
|
7044
|
-
"rawContents": "<
|
|
7042
|
+
"fileName": "wizard-demo.component.html",
|
|
7043
|
+
"filePath": "/projects/tabs/documentation/code-examples/wizard/basic/wizard-demo.component.html",
|
|
7044
|
+
"rawContents": "<button type=\"button\" class=\"sky-btn sky-btn-default\" (click)=\"openWizard()\">\n Open Wizard\n</button>\n"
|
|
7045
7045
|
},
|
|
7046
7046
|
{
|
|
7047
|
-
"fileName": "
|
|
7048
|
-
"filePath": "/projects/tabs/documentation/code-examples/
|
|
7049
|
-
"rawContents": "import {
|
|
7047
|
+
"fileName": "wizard-demo-modal.component.ts",
|
|
7048
|
+
"filePath": "/projects/tabs/documentation/code-examples/wizard/basic/wizard-demo-modal.component.ts",
|
|
7049
|
+
"rawContents": "import { Component, OnInit } from '@angular/core';\nimport {\n UntypedFormBuilder,\n UntypedFormControl,\n UntypedFormGroup,\n Validators,\n} from '@angular/forms';\nimport { SkyModalInstance } from '@skyux/modals';\nimport { SkyTabIndex } from '@skyux/tabs';\n\n@Component({\n selector: 'app-wizard-demo-modal',\n templateUrl: './wizard-demo-modal.component.html',\n})\nexport class WizardDemoModalComponent implements OnInit {\n constructor(\n public instance: SkyModalInstance,\n formBuilder: UntypedFormBuilder\n ) {\n this.firstName = new UntypedFormControl('', Validators.required);\n this.middleName = new UntypedFormControl();\n this.lastName = new UntypedFormControl('', Validators.required);\n this.phoneNumber = new UntypedFormControl('', Validators.required);\n this.email = new UntypedFormControl('', Validators.required);\n this.termsAccepted = new UntypedFormControl(false);\n this.mailingList = new UntypedFormControl(false);\n\n this.newMemberForm = formBuilder.group({\n firstName: this.firstName,\n middleName: this.middleName,\n lastName: this.lastName,\n phoneNumber: this.phoneNumber,\n email: this.email,\n termsAccepted: this.termsAccepted,\n mailingList: this.mailingList,\n });\n }\n\n public newMemberForm: UntypedFormGroup;\n public title = 'New Member Sign-up';\n public activeIndex: SkyTabIndex = 0;\n public step2Disabled = true;\n public step3Disabled = true;\n public saveDisabled = true;\n\n public firstName: UntypedFormControl | undefined;\n public middleName: UntypedFormControl | undefined;\n public lastName: UntypedFormControl | undefined;\n public phoneNumber: UntypedFormControl | undefined;\n public email: UntypedFormControl | undefined;\n public termsAccepted: UntypedFormControl | undefined;\n public mailingList: UntypedFormControl | undefined;\n\n public ngOnInit(): void {\n this.newMemberForm.valueChanges.subscribe(() => {\n this.checkRequirementsMet();\n });\n }\n\n public checkRequirementsMet(): void {\n this.step2Disabled = !(\n this.newMemberForm?.get('firstName')?.value &&\n this.newMemberForm?.get('lastName')?.value\n );\n this.step3Disabled = !(\n this.newMemberForm?.get('phoneNumber')?.value &&\n this.newMemberForm?.get('phoneNumber')?.valid &&\n this.newMemberForm?.get('email')?.value\n );\n this.saveDisabled = !this.newMemberForm?.get('termsAccepted')?.value;\n }\n\n public onCancelClick(): void {\n this.instance.cancel();\n }\n\n public onSave(): void {\n this.instance.save();\n }\n}\n"
|
|
7050
7050
|
},
|
|
7051
7051
|
{
|
|
7052
|
-
"fileName": "
|
|
7053
|
-
"filePath": "/projects/tabs/documentation/code-examples/
|
|
7054
|
-
"rawContents": "<
|
|
7052
|
+
"fileName": "wizard-demo-modal.component.html",
|
|
7053
|
+
"filePath": "/projects/tabs/documentation/code-examples/wizard/basic/wizard-demo-modal.component.html",
|
|
7054
|
+
"rawContents": "<form [formGroup]=\"newMemberForm\" (ngSubmit)=\"onSave()\">\n <sky-modal>\n <sky-modal-header>\n {{ title }}\n </sky-modal-header>\n <sky-modal-content>\n <sky-tabset\n ariaLabel=\"Sign-up steps\"\n [(active)]=\"activeIndex\"\n tabStyle=\"wizard\"\n #wizardDemo\n >\n <sky-tab tabHeading=\"1. Biographical Details\">\n <sky-fluid-grid [disableMargin]=\"true\" gutterSize=\"small\">\n <sky-row>\n <sky-column [screenSmall]=\"12\" [screenMedium]=\"4\">\n <sky-input-box labelText=\"First name\">\n <input type=\"text\" formControlName=\"firstName\" />\n </sky-input-box>\n </sky-column>\n <sky-column [screenSmall]=\"12\" [screenMedium]=\"4\">\n <sky-input-box labelText=\"Middle name\">\n <input type=\"text\" formControlName=\"middleName\" />\n </sky-input-box>\n </sky-column>\n <sky-column [screenSmall]=\"12\" [screenMedium]=\"4\">\n <sky-input-box labelText=\"Last name\">\n <input type=\"text\" formControlName=\"lastName\" />\n </sky-input-box>\n </sky-column>\n </sky-row>\n </sky-fluid-grid>\n </sky-tab>\n <sky-tab tabHeading=\"2. Contact Information\" [disabled]=\"step2Disabled\">\n <sky-fluid-grid [disableMargin]=\"true\" gutterSize=\"small\">\n <sky-row>\n <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n <sky-input-box labelText=\"Phone Number\">\n <sky-phone-field defaultCountry=\"us\">\n <input formControlName=\"phoneNumber\" skyPhoneFieldInput />\n </sky-phone-field>\n </sky-input-box>\n </sky-column>\n <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n <sky-input-box labelText=\"Email\">\n <input type=\"email\" formControlName=\"email\" />\n </sky-input-box>\n </sky-column>\n </sky-row>\n </sky-fluid-grid>\n </sky-tab>\n <sky-tab tabHeading=\"3. More Information\" [disabled]=\"step3Disabled\">\n <sky-fluid-grid [disableMargin]=\"true\" gutterSize=\"small\">\n <sky-row>\n <sky-column [screenSmall]=\"12\">\n <sky-checkbox formControlName=\"termsAccepted\" [required]=\"true\">\n <sky-checkbox-label>\n Accept terms and conditions\n </sky-checkbox-label>\n </sky-checkbox>\n </sky-column>\n <sky-column [screenSmall]=\"12\">\n <sky-checkbox formControlName=\"mailingList\">\n <sky-checkbox-label>\n Sign up for our email newsletter\n </sky-checkbox-label>\n </sky-checkbox>\n </sky-column>\n </sky-row>\n </sky-fluid-grid>\n </sky-tab>\n </sky-tabset>\n </sky-modal-content>\n <sky-modal-footer>\n <sky-tabset-nav-button\n buttonType=\"previous\"\n [tabset]=\"wizardDemo\"\n ></sky-tabset-nav-button>\n <sky-tabset-nav-button\n buttonType=\"next\"\n [tabset]=\"wizardDemo\"\n ></sky-tabset-nav-button>\n <sky-tabset-nav-button\n buttonType=\"finish\"\n [tabset]=\"wizardDemo\"\n [disabled]=\"saveDisabled\"\n ></sky-tabset-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</form>\n"
|
|
7055
7055
|
},
|
|
7056
7056
|
{
|
|
7057
|
-
"fileName": "
|
|
7058
|
-
"filePath": "/projects/tabs/documentation/code-examples/
|
|
7059
|
-
"rawContents": "import {
|
|
7057
|
+
"fileName": "vertical-tabs-demo.module.ts",
|
|
7058
|
+
"filePath": "/projects/tabs/documentation/code-examples/vertical-tabs/grouped/vertical-tabs-demo.module.ts",
|
|
7059
|
+
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyVerticalTabsetModule } from '@skyux/tabs';\n\nimport { SkyVerticalTabsDemoComponent } from './vertical-tabs-demo.component';\n\n@NgModule({\n imports: [CommonModule, SkyVerticalTabsetModule],\n declarations: [SkyVerticalTabsDemoComponent],\n exports: [SkyVerticalTabsDemoComponent],\n})\nexport class SkyVerticalTabDemoModule {}\n"
|
|
7060
7060
|
},
|
|
7061
7061
|
{
|
|
7062
|
-
"fileName": "
|
|
7063
|
-
"filePath": "/projects/tabs/documentation/code-examples/
|
|
7064
|
-
"rawContents": "
|
|
7062
|
+
"fileName": "vertical-tabs-demo.component.ts",
|
|
7063
|
+
"filePath": "/projects/tabs/documentation/code-examples/vertical-tabs/grouped/vertical-tabs-demo.component.ts",
|
|
7064
|
+
"rawContents": "import { Component } from '@angular/core';\n\nimport { VerticalTabsDemoGroup } from './vertical-tabs-demo-group';\n\n@Component({\n selector: 'app-vertical-tab-demo',\n templateUrl: './vertical-tabs-demo.component.html',\n})\nexport class SkyVerticalTabsDemoComponent {\n public groups: VerticalTabsDemoGroup[];\n\n constructor() {\n this.groups = [\n {\n heading: 'Group 1',\n isOpen: false,\n isDisabled: false,\n subTabs: [\n { tabHeading: 'Group 1 — Tab 1', content: 'Group 1 — Tab 1 Content' },\n {\n tabHeading: 'Group 1 — Tab 2',\n content: 'Group 1 — Tab 2 Content',\n tabHeaderCount: 7,\n },\n ],\n },\n {\n heading: 'Group 2',\n isOpen: true,\n isDisabled: false,\n subTabs: [\n {\n tabHeading: 'Group 2 — Tab 1',\n content: 'Group 2 — Tab 1 Content',\n active: true,\n },\n {\n tabHeading: 'Group 2 — Tab 2 — Disabled',\n content: 'Group 2 — Tab 2 Content',\n disabled: true,\n },\n ],\n },\n {\n heading: 'Disabled',\n isOpen: false,\n isDisabled: true,\n subTabs: [],\n },\n ];\n }\n}\n"
|
|
7065
7065
|
},
|
|
7066
7066
|
{
|
|
7067
|
-
"fileName": "
|
|
7068
|
-
"filePath": "/projects/tabs/documentation/code-examples/
|
|
7069
|
-
"rawContents": "
|
|
7067
|
+
"fileName": "vertical-tabs-demo.component.html",
|
|
7068
|
+
"filePath": "/projects/tabs/documentation/code-examples/vertical-tabs/grouped/vertical-tabs-demo.component.html",
|
|
7069
|
+
"rawContents": "<sky-vertical-tabset showTabsText=\"Tab list\">\n <sky-vertical-tabset-group\n *ngFor=\"let group of groups\"\n [groupHeading]=\"group.heading\"\n [open]=\"group.isOpen\"\n [disabled]=\"group.isDisabled\"\n >\n <sky-vertical-tab\n *ngFor=\"let tab of group.subTabs\"\n [active]=\"tab.active\"\n [tabHeading]=\"tab.tabHeading\"\n [tabHeaderCount]=\"tab.tabHeaderCount\"\n [disabled]=\"tab.disabled\"\n >\n {{ tab.content }}\n </sky-vertical-tab>\n </sky-vertical-tabset-group>\n</sky-vertical-tabset>\n"
|
|
7070
7070
|
},
|
|
7071
7071
|
{
|
|
7072
|
-
"fileName": "
|
|
7073
|
-
"filePath": "/projects/tabs/documentation/code-examples/
|
|
7074
|
-
"rawContents": "
|
|
7072
|
+
"fileName": "vertical-tabs-demo-sub-tab.ts",
|
|
7073
|
+
"filePath": "/projects/tabs/documentation/code-examples/vertical-tabs/grouped/vertical-tabs-demo-sub-tab.ts",
|
|
7074
|
+
"rawContents": "export interface VerticalTabsDemoSubTab {\n tabHeading: string;\n content: string;\n tabHeaderCount?: number;\n active?: boolean;\n disabled?: boolean;\n}\n"
|
|
7075
7075
|
},
|
|
7076
7076
|
{
|
|
7077
|
-
"fileName": "
|
|
7078
|
-
"filePath": "/projects/tabs/documentation/code-examples/
|
|
7079
|
-
"rawContents": "
|
|
7077
|
+
"fileName": "vertical-tabs-demo-group.ts",
|
|
7078
|
+
"filePath": "/projects/tabs/documentation/code-examples/vertical-tabs/grouped/vertical-tabs-demo-group.ts",
|
|
7079
|
+
"rawContents": "import { VerticalTabsDemoSubTab } from './vertical-tabs-demo-sub-tab';\n\nexport interface VerticalTabsDemoGroup {\n heading: string;\n isOpen: boolean;\n isDisabled: boolean;\n subTabs: VerticalTabsDemoSubTab[];\n}\n"
|
|
7080
7080
|
},
|
|
7081
7081
|
{
|
|
7082
|
-
"fileName": "
|
|
7083
|
-
"filePath": "/projects/tabs/documentation/code-examples/
|
|
7084
|
-
"rawContents": "import {
|
|
7082
|
+
"fileName": "vertical-tabs-demo.module.ts",
|
|
7083
|
+
"filePath": "/projects/tabs/documentation/code-examples/vertical-tabs/basic/vertical-tabs-demo.module.ts",
|
|
7084
|
+
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyVerticalTabsetModule } from '@skyux/tabs';\n\nimport { VerticalTabDemoComponent } from './vertical-tabs-demo.component';\n\n@NgModule({\n imports: [CommonModule, SkyVerticalTabsetModule],\n declarations: [VerticalTabDemoComponent],\n exports: [VerticalTabDemoComponent],\n})\nexport class SkyVerticalTabDemoModule {}\n"
|
|
7085
7085
|
},
|
|
7086
7086
|
{
|
|
7087
|
-
"fileName": "tabs-demo.component.
|
|
7088
|
-
"filePath": "/projects/tabs/documentation/code-examples/tabs/
|
|
7089
|
-
"rawContents": "
|
|
7087
|
+
"fileName": "vertical-tabs-demo.component.ts",
|
|
7088
|
+
"filePath": "/projects/tabs/documentation/code-examples/vertical-tabs/basic/vertical-tabs-demo.component.ts",
|
|
7089
|
+
"rawContents": "import { Component } from '@angular/core';\n\n@Component({\n selector: 'app-vertical-tab-demo',\n templateUrl: './vertical-tabs-demo.component.html',\n})\nexport class VerticalTabDemoComponent {}\n"
|
|
7090
7090
|
},
|
|
7091
7091
|
{
|
|
7092
|
-
"fileName": "tabs-demo.component.
|
|
7093
|
-
"filePath": "/projects/tabs/documentation/code-examples/tabs/
|
|
7094
|
-
"rawContents": "
|
|
7092
|
+
"fileName": "vertical-tabs-demo.component.html",
|
|
7093
|
+
"filePath": "/projects/tabs/documentation/code-examples/vertical-tabs/basic/vertical-tabs-demo.component.html",
|
|
7094
|
+
"rawContents": "<sky-vertical-tabset>\n <sky-vertical-tab tabHeading=\"Tab 1\"> Tab 1 content </sky-vertical-tab>\n <sky-vertical-tab tabHeading=\"Tab 2\" [active]=\"true\">\n Tab 2 content\n </sky-vertical-tab>\n <sky-vertical-tab tabHeading=\"Tab 3\"> Tab 3 content </sky-vertical-tab>\n</sky-vertical-tabset>\n"
|
|
7095
7095
|
},
|
|
7096
7096
|
{
|
|
7097
7097
|
"fileName": "tabs-demo.module.ts",
|
|
7098
|
-
"filePath": "/projects/tabs/documentation/code-examples/tabs/
|
|
7098
|
+
"filePath": "/projects/tabs/documentation/code-examples/tabs/static-add-close/tabs-demo.module.ts",
|
|
7099
7099
|
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyTabsModule } from '@skyux/tabs';\n\nimport { TabsDemoComponent } from './tabs-demo.component';\n\n@NgModule({\n imports: [CommonModule, SkyTabsModule],\n declarations: [TabsDemoComponent],\n exports: [TabsDemoComponent],\n})\nexport class TabsDemoModule {}\n"
|
|
7100
7100
|
},
|
|
7101
|
-
{
|
|
7102
|
-
"fileName": "tabs-demo.component.html",
|
|
7103
|
-
"filePath": "/projects/tabs/documentation/code-examples/tabs/dynamic/tabs-demo.component.html",
|
|
7104
|
-
"rawContents": "<sky-tabset ariaLabel=\"Tab demonstration\">\n <sky-tab *ngFor=\"let tab of tabArray\" [tabHeading]=\"tab.tabHeading\">\n {{ tab.tabContent }}\n </sky-tab>\n</sky-tabset>\n"
|
|
7105
|
-
},
|
|
7106
7101
|
{
|
|
7107
7102
|
"fileName": "tabs-demo.component.ts",
|
|
7108
|
-
"filePath": "/projects/tabs/documentation/code-examples/tabs/
|
|
7109
|
-
"rawContents": "import { Component } from '@angular/core';\n\n@Component({\n selector: 'app-tabs-demo',\n templateUrl: './tabs-demo.component.html',\n})\nexport class TabsDemoComponent {\n public
|
|
7110
|
-
},
|
|
7111
|
-
{
|
|
7112
|
-
"fileName": "tabs-demo.module.ts",
|
|
7113
|
-
"filePath": "/projects/tabs/documentation/code-examples/tabs/dynamic/tabs-demo.module.ts",
|
|
7114
|
-
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyTabsModule } from '@skyux/tabs';\n\nimport { TabsDemoComponent } from './tabs-demo.component';\n\n@NgModule({\n imports: [CommonModule, SkyTabsModule],\n declarations: [TabsDemoComponent],\n exports: [TabsDemoComponent],\n})\nexport class TabsDemoModule {}\n"
|
|
7103
|
+
"filePath": "/projects/tabs/documentation/code-examples/tabs/static-add-close/tabs-demo.component.ts",
|
|
7104
|
+
"rawContents": "import { Component } from '@angular/core';\n\n@Component({\n selector: 'app-tabs-demo',\n templateUrl: './tabs-demo.component.html',\n})\nexport class TabsDemoComponent {\n public showTab3 = true;\n\n public onNewTabClick(): void {\n alert('Add tab clicked!');\n }\n}\n"
|
|
7115
7105
|
},
|
|
7116
7106
|
{
|
|
7117
7107
|
"fileName": "tabs-demo.component.html",
|
|
7118
7108
|
"filePath": "/projects/tabs/documentation/code-examples/tabs/static-add-close/tabs-demo.component.html",
|
|
7119
7109
|
"rawContents": "<sky-tabset ariaLabel=\"Tab demonstration\" (newTab)=\"onNewTabClick()\">\n <sky-tab [tabHeading]=\"'Tab 1'\"> Content for Tab 1 </sky-tab>\n <sky-tab [tabHeading]=\"'Tab 2'\"> Content for Tab 2 </sky-tab>\n <sky-tab *ngIf=\"showTab3\" [tabHeading]=\"'Tab 3'\" (close)=\"showTab3 = false\">\n Content for Tab 3\n </sky-tab>\n</sky-tabset>\n"
|
|
7120
7110
|
},
|
|
7121
|
-
{
|
|
7122
|
-
"fileName": "tabs-demo.component.ts",
|
|
7123
|
-
"filePath": "/projects/tabs/documentation/code-examples/tabs/static-add-close/tabs-demo.component.ts",
|
|
7124
|
-
"rawContents": "import { Component } from '@angular/core';\n\n@Component({\n selector: 'app-tabs-demo',\n templateUrl: './tabs-demo.component.html',\n})\nexport class TabsDemoComponent {\n public showTab3 = true;\n\n public onNewTabClick(): void {\n alert('Add tab clicked!');\n }\n}\n"
|
|
7125
|
-
},
|
|
7126
7111
|
{
|
|
7127
7112
|
"fileName": "tabs-demo.module.ts",
|
|
7128
|
-
"filePath": "/projects/tabs/documentation/code-examples/tabs/static
|
|
7113
|
+
"filePath": "/projects/tabs/documentation/code-examples/tabs/static/tabs-demo.module.ts",
|
|
7129
7114
|
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyTabsModule } from '@skyux/tabs';\n\nimport { TabsDemoComponent } from './tabs-demo.component';\n\n@NgModule({\n imports: [CommonModule, SkyTabsModule],\n declarations: [TabsDemoComponent],\n exports: [TabsDemoComponent],\n})\nexport class TabsDemoModule {}\n"
|
|
7130
7115
|
},
|
|
7116
|
+
{
|
|
7117
|
+
"fileName": "tabs-demo.component.ts",
|
|
7118
|
+
"filePath": "/projects/tabs/documentation/code-examples/tabs/static/tabs-demo.component.ts",
|
|
7119
|
+
"rawContents": "import { Component } from '@angular/core';\n\n@Component({\n selector: 'app-tabs-demo',\n templateUrl: './tabs-demo.component.html',\n})\nexport class TabsDemoComponent {}\n"
|
|
7120
|
+
},
|
|
7131
7121
|
{
|
|
7132
7122
|
"fileName": "tabs-demo.component.html",
|
|
7133
7123
|
"filePath": "/projects/tabs/documentation/code-examples/tabs/static/tabs-demo.component.html",
|
|
7134
7124
|
"rawContents": "<sky-tabset ariaLabel=\"Tab demonstration\">\n <sky-tab [tabHeading]=\"'Tab 1'\"> Content for Tab 1 </sky-tab>\n <sky-tab [tabHeading]=\"'Tab 2'\"> Content for Tab 2 </sky-tab>\n <sky-tab [tabHeading]=\"'Tab 3'\"> Content for Tab 3 </sky-tab>\n</sky-tabset>\n"
|
|
7135
7125
|
},
|
|
7126
|
+
{
|
|
7127
|
+
"fileName": "tabs-demo.module.ts",
|
|
7128
|
+
"filePath": "/projects/tabs/documentation/code-examples/tabs/dynamic-add-close/tabs-demo.module.ts",
|
|
7129
|
+
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyTabsModule } from '@skyux/tabs';\n\nimport { TabsDemoComponent } from './tabs-demo.component';\n\n@NgModule({\n imports: [CommonModule, SkyTabsModule],\n declarations: [TabsDemoComponent],\n exports: [TabsDemoComponent],\n})\nexport class TabsDemoModule {}\n"
|
|
7130
|
+
},
|
|
7136
7131
|
{
|
|
7137
7132
|
"fileName": "tabs-demo.component.ts",
|
|
7138
|
-
"filePath": "/projects/tabs/documentation/code-examples/tabs/
|
|
7139
|
-
"rawContents": "import { Component } from '@angular/core';\n\n@Component({\n selector: 'app-tabs-demo',\n templateUrl: './tabs-demo.component.html',\n})\nexport class TabsDemoComponent {}\n"
|
|
7133
|
+
"filePath": "/projects/tabs/documentation/code-examples/tabs/dynamic-add-close/tabs-demo.component.ts",
|
|
7134
|
+
"rawContents": "import { Component } from '@angular/core';\n\n@Component({\n selector: 'app-tabs-demo',\n templateUrl: './tabs-demo.component.html',\n})\nexport class TabsDemoComponent {\n public tabArray = [\n {\n tabHeading: 'Tab 1',\n tabContent: 'Content for Tab 1',\n },\n {\n tabHeading: 'Tab 2',\n tabContent: 'Content for Tab 2',\n },\n {\n tabHeading: 'Tab 3',\n tabContent: 'Content for Tab 3',\n },\n ];\n\n #tabCounter = 3;\n\n public onNewTabClick(): void {\n this.#tabCounter++;\n\n this.tabArray.push({\n tabHeading: 'Tab ' + this.#tabCounter,\n tabContent: 'Content for Tab' + this.#tabCounter,\n });\n }\n\n public onCloseClick(arrayIndex: number): void {\n this.tabArray.splice(arrayIndex, 1);\n }\n}\n"
|
|
7135
|
+
},
|
|
7136
|
+
{
|
|
7137
|
+
"fileName": "tabs-demo.component.html",
|
|
7138
|
+
"filePath": "/projects/tabs/documentation/code-examples/tabs/dynamic-add-close/tabs-demo.component.html",
|
|
7139
|
+
"rawContents": "<sky-tabset ariaLabel=\"Tab demonstration\" (newTab)=\"onNewTabClick()\">\n <sky-tab\n *ngFor=\"let tab of tabArray; let i = index\"\n [tabHeading]=\"tab.tabHeading\"\n (close)=\"onCloseClick(i)\"\n >\n {{ tab.tabContent }}\n </sky-tab>\n</sky-tabset>\n"
|
|
7140
7140
|
},
|
|
7141
7141
|
{
|
|
7142
7142
|
"fileName": "tabs-demo.module.ts",
|
|
7143
|
-
"filePath": "/projects/tabs/documentation/code-examples/tabs/
|
|
7143
|
+
"filePath": "/projects/tabs/documentation/code-examples/tabs/dynamic/tabs-demo.module.ts",
|
|
7144
7144
|
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyTabsModule } from '@skyux/tabs';\n\nimport { TabsDemoComponent } from './tabs-demo.component';\n\n@NgModule({\n imports: [CommonModule, SkyTabsModule],\n declarations: [TabsDemoComponent],\n exports: [TabsDemoComponent],\n})\nexport class TabsDemoModule {}\n"
|
|
7145
7145
|
},
|
|
7146
7146
|
{
|
|
7147
|
-
"fileName": "
|
|
7148
|
-
"filePath": "/projects/tabs/documentation/code-examples/
|
|
7149
|
-
"rawContents": "
|
|
7147
|
+
"fileName": "tabs-demo.component.ts",
|
|
7148
|
+
"filePath": "/projects/tabs/documentation/code-examples/tabs/dynamic/tabs-demo.component.ts",
|
|
7149
|
+
"rawContents": "import { Component } from '@angular/core';\n\n@Component({\n selector: 'app-tabs-demo',\n templateUrl: './tabs-demo.component.html',\n})\nexport class TabsDemoComponent {\n public tabArray = [\n {\n tabHeading: 'Tab 1',\n tabContent: 'A list containing 25012 items',\n },\n {\n tabHeading: 'Tab 2',\n tabContent: 'A list containing 280 items',\n },\n {\n tabHeading: 'Tab 3',\n tabContent: \"This tab doesn't have a list of items\",\n },\n ];\n}\n"
|
|
7150
7150
|
},
|
|
7151
7151
|
{
|
|
7152
|
-
"fileName": "
|
|
7153
|
-
"filePath": "/projects/tabs/documentation/code-examples/
|
|
7154
|
-
"rawContents": "
|
|
7152
|
+
"fileName": "tabs-demo.component.html",
|
|
7153
|
+
"filePath": "/projects/tabs/documentation/code-examples/tabs/dynamic/tabs-demo.component.html",
|
|
7154
|
+
"rawContents": "<sky-tabset ariaLabel=\"Tab demonstration\">\n <sky-tab *ngFor=\"let tab of tabArray\" [tabHeading]=\"tab.tabHeading\">\n {{ tab.tabContent }}\n </sky-tab>\n</sky-tabset>\n"
|
|
7155
7155
|
},
|
|
7156
7156
|
{
|
|
7157
|
-
"fileName": "
|
|
7158
|
-
"filePath": "/projects/tabs/documentation/code-examples/
|
|
7159
|
-
"rawContents": "import {
|
|
7157
|
+
"fileName": "sectioned-form-modal-demo.component.ts",
|
|
7158
|
+
"filePath": "/projects/tabs/documentation/code-examples/sectioned-form/modal/sectioned-form-modal-demo.component.ts",
|
|
7159
|
+
"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 #changeDetector: ChangeDetectorRef;\n\n constructor(\n public modalInstance: SkyModalInstance,\n changeDetector: ChangeDetectorRef\n ) {\n this.#changeDetector = changeDetector;\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"
|
|
7160
7160
|
},
|
|
7161
7161
|
{
|
|
7162
|
-
"fileName": "
|
|
7163
|
-
"filePath": "/projects/tabs/documentation/code-examples/
|
|
7164
|
-
"rawContents": "
|
|
7162
|
+
"fileName": "sectioned-form-modal-demo.component.html",
|
|
7163
|
+
"filePath": "/projects/tabs/documentation/code-examples/sectioned-form/modal/sectioned-form-modal-demo.component.html",
|
|
7164
|
+
"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"
|
|
7165
7165
|
},
|
|
7166
7166
|
{
|
|
7167
|
-
"fileName": "
|
|
7168
|
-
"filePath": "/projects/tabs/documentation/code-examples/
|
|
7169
|
-
"rawContents": "
|
|
7167
|
+
"fileName": "sectioned-form-demo.module.ts",
|
|
7168
|
+
"filePath": "/projects/tabs/documentation/code-examples/sectioned-form/modal/sectioned-form-demo.module.ts",
|
|
7169
|
+
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { SkyInputBoxModule } from '@skyux/forms';\nimport { SkyStatusIndicatorModule } from '@skyux/indicators';\nimport { SkyModalModule } from '@skyux/modals';\nimport { SkySectionedFormModule } from '@skyux/tabs';\n\nimport { AddressFormDemoComponent } from './address-form-demo.component';\nimport { InformationFormDemoComponent } from './information-form-demo.component';\nimport { PhoneFormDemoComponent } from './phone-form-demo.component';\nimport { SectionedFormDemoComponent } from './sectioned-form-demo.component';\nimport { SectionedFormModalDemoComponent } from './sectioned-form-modal-demo.component';\n\n@NgModule({\n declarations: [\n AddressFormDemoComponent,\n InformationFormDemoComponent,\n PhoneFormDemoComponent,\n SectionedFormModalDemoComponent,\n SectionedFormDemoComponent,\n ],\n exports: [SectionedFormDemoComponent],\n imports: [\n CommonModule,\n ReactiveFormsModule,\n SkyInputBoxModule,\n SkyModalModule,\n SkySectionedFormModule,\n SkyStatusIndicatorModule,\n ],\n})\nexport class SectionedFormDemoModule {}\n"
|
|
7170
7170
|
},
|
|
7171
7171
|
{
|
|
7172
|
-
"fileName": "
|
|
7173
|
-
"filePath": "/projects/tabs/documentation/code-examples/
|
|
7174
|
-
"rawContents": "
|
|
7172
|
+
"fileName": "sectioned-form-demo.component.ts",
|
|
7173
|
+
"filePath": "/projects/tabs/documentation/code-examples/sectioned-form/modal/sectioned-form-demo.component.ts",
|
|
7174
|
+
"rawContents": "import { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { SkyModalCloseArgs, SkyModalService } from '@skyux/modals';\n\nimport { SectionedFormModalDemoComponent } 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 #modal: SkyModalService;\n\n constructor(modal: SkyModalService) {\n this.#modal = modal;\n }\n\n public openModal(): void {\n const modalInstance = this.#modal.open(SectionedFormModalDemoComponent, {\n size: 'large',\n });\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"
|
|
7175
7175
|
},
|
|
7176
7176
|
{
|
|
7177
|
-
"fileName": "
|
|
7178
|
-
"filePath": "/projects/tabs/documentation/code-examples/
|
|
7179
|
-
"rawContents": "
|
|
7177
|
+
"fileName": "sectioned-form-demo.component.html",
|
|
7178
|
+
"filePath": "/projects/tabs/documentation/code-examples/sectioned-form/modal/sectioned-form-demo.component.html",
|
|
7179
|
+
"rawContents": "<button class=\"sky-btn sky-btn-default\" type=\"button\" (click)=\"openModal()\">\n Open sectioned form\n</button>\n"
|
|
7180
7180
|
},
|
|
7181
7181
|
{
|
|
7182
|
-
"fileName": "
|
|
7183
|
-
"filePath": "/projects/tabs/documentation/code-examples/
|
|
7184
|
-
"rawContents": "import {
|
|
7182
|
+
"fileName": "phone-form-demo.component.ts",
|
|
7183
|
+
"filePath": "/projects/tabs/documentation/code-examples/sectioned-form/modal/phone-form-demo.component.ts",
|
|
7184
|
+
"rawContents": "import { ChangeDetectionStrategy, Component } 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"
|
|
7185
7185
|
},
|
|
7186
7186
|
{
|
|
7187
|
-
"fileName": "
|
|
7188
|
-
"filePath": "/projects/tabs/documentation/code-examples/
|
|
7189
|
-
"rawContents": "<
|
|
7187
|
+
"fileName": "phone-form-demo.component.html",
|
|
7188
|
+
"filePath": "/projects/tabs/documentation/code-examples/sectioned-form/modal/phone-form-demo.component.html",
|
|
7189
|
+
"rawContents": "<div>Phone form</div>\n"
|
|
7190
7190
|
},
|
|
7191
7191
|
{
|
|
7192
|
-
"fileName": "
|
|
7193
|
-
"filePath": "/projects/tabs/documentation/code-examples/
|
|
7194
|
-
"rawContents": "import {
|
|
7192
|
+
"fileName": "information-form-demo.component.ts",
|
|
7193
|
+
"filePath": "/projects/tabs/documentation/code-examples/sectioned-form/modal/information-form-demo.component.ts",
|
|
7194
|
+
"rawContents": "import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n OnInit,\n} from '@angular/core';\nimport {\n UntypedFormBuilder,\n UntypedFormGroup,\n Validators,\n} 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 = '5324901';\n public myForm: UntypedFormGroup;\n public name = '';\n public nameRequired = false;\n\n #sectionedFormService: SkySectionedFormService;\n #changeDetector: ChangeDetectorRef;\n\n constructor(\n formBuilder: UntypedFormBuilder,\n sectionedFormService: SkySectionedFormService,\n changeDetector: ChangeDetectorRef\n ) {\n this.#sectionedFormService = sectionedFormService;\n this.#changeDetector = changeDetector;\n\n this.myForm = 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"
|
|
7195
7195
|
},
|
|
7196
7196
|
{
|
|
7197
|
-
"fileName": "
|
|
7198
|
-
"filePath": "/projects/tabs/documentation/code-examples/
|
|
7199
|
-
"rawContents": "<
|
|
7197
|
+
"fileName": "information-form-demo.component.html",
|
|
7198
|
+
"filePath": "/projects/tabs/documentation/code-examples/sectioned-form/modal/information-form-demo.component.html",
|
|
7199
|
+
"rawContents": "<form novalidate [formGroup]=\"myForm\">\n <div style=\"display: flex\">\n <div class=\"sky-margin-inline-lg\" style=\"flex: 1\">\n <sky-input-box labelText=\"Name\">\n <input formControlName=\"name\" type=\"text\" />\n </sky-input-box>\n </div>\n <div style=\"flex: 1\">\n <sky-input-box labelText=\"ID\">\n <input formControlName=\"id\" type=\"text\" />\n <span class=\"sky-error-indicator\">\n <sky-status-indicator\n *ngIf=\"myForm.get('id')?.invalid\"\n indicatorType=\"danger\"\n descriptionType=\"error\"\n >\n Enter a valid value.\n </sky-status-indicator>\n </span>\n </sky-input-box>\n </div>\n </div>\n</form>\n"
|
|
7200
7200
|
},
|
|
7201
7201
|
{
|
|
7202
|
-
"fileName": "
|
|
7203
|
-
"filePath": "/projects/tabs/documentation/code-examples/
|
|
7204
|
-
"rawContents": "import { Component } from '@angular/core';\
|
|
7202
|
+
"fileName": "address-form-demo.component.ts",
|
|
7203
|
+
"filePath": "/projects/tabs/documentation/code-examples/sectioned-form/modal/address-form-demo.component.ts",
|
|
7204
|
+
"rawContents": "import { ChangeDetectionStrategy, Component } 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"
|
|
7205
7205
|
},
|
|
7206
7206
|
{
|
|
7207
|
-
"fileName": "
|
|
7208
|
-
"filePath": "/projects/tabs/documentation/code-examples/
|
|
7209
|
-
"rawContents": "
|
|
7207
|
+
"fileName": "address-form-demo.component.html",
|
|
7208
|
+
"filePath": "/projects/tabs/documentation/code-examples/sectioned-form/modal/address-form-demo.component.html",
|
|
7209
|
+
"rawContents": "<div>Address form</div>\n"
|
|
7210
7210
|
}
|
|
7211
7211
|
]
|
|
7212
7212
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@skyux/tabs",
|
|
3
|
-
"version": "9.0.0-alpha.
|
|
3
|
+
"version": "9.0.0-alpha.1",
|
|
4
4
|
"author": "Blackbaud, Inc.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"blackbaud",
|
|
@@ -41,14 +41,14 @@
|
|
|
41
41
|
"@angular/core": "^16.1.7",
|
|
42
42
|
"@angular/platform-browser": "^16.1.7",
|
|
43
43
|
"@angular/router": "^16.1.7",
|
|
44
|
-
"@skyux-sdk/testing": "9.0.0-alpha.
|
|
45
|
-
"@skyux/animations": "9.0.0-alpha.
|
|
46
|
-
"@skyux/core": "9.0.0-alpha.
|
|
47
|
-
"@skyux/forms": "9.0.0-alpha.
|
|
48
|
-
"@skyux/i18n": "9.0.0-alpha.
|
|
49
|
-
"@skyux/indicators": "9.0.0-alpha.
|
|
50
|
-
"@skyux/popovers": "9.0.0-alpha.
|
|
51
|
-
"@skyux/theme": "9.0.0-alpha.
|
|
44
|
+
"@skyux-sdk/testing": "9.0.0-alpha.1",
|
|
45
|
+
"@skyux/animations": "9.0.0-alpha.1",
|
|
46
|
+
"@skyux/core": "9.0.0-alpha.1",
|
|
47
|
+
"@skyux/forms": "9.0.0-alpha.1",
|
|
48
|
+
"@skyux/i18n": "9.0.0-alpha.1",
|
|
49
|
+
"@skyux/indicators": "9.0.0-alpha.1",
|
|
50
|
+
"@skyux/popovers": "9.0.0-alpha.1",
|
|
51
|
+
"@skyux/theme": "9.0.0-alpha.1"
|
|
52
52
|
},
|
|
53
53
|
"dependencies": {
|
|
54
54
|
"tslib": "^2.5.0"
|