@skyux/code-examples 12.5.0 → 12.7.0
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.
|
@@ -11351,15 +11351,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
11351
11351
|
* @title Navbar with basic setup
|
|
11352
11352
|
*/
|
|
11353
11353
|
class NavbarExampleComponent {
|
|
11354
|
-
|
|
11354
|
+
onItemClick(buttonText) {
|
|
11355
11355
|
alert(buttonText + ' button clicked!');
|
|
11356
11356
|
}
|
|
11357
11357
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: NavbarExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11358
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: NavbarExampleComponent, isStandalone: true, selector: "app-navbar-example", ngImport: i0, template: "<sky-navbar>\n <sky-navbar-item>\n <a
|
|
11358
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: NavbarExampleComponent, isStandalone: true, selector: "app-navbar-example", ngImport: i0, template: "<sky-navbar data-sky-id=\"basic-navbar\">\n <sky-navbar-item data-sky-id=\"navbar-item-1\">\n <a\n routerLink=\"/\"\n routerLinkActive=\"sky-navbar-item-active\"\n (click)=\"onItemClick('Selected item')\"\n >\n Selected item\n </a>\n </sky-navbar-item>\n <sky-navbar-item data-sky-id=\"navbar-item-2\">\n <sky-dropdown>\n <sky-dropdown-button> Show dropdown </sky-dropdown-button>\n <sky-dropdown-menu>\n <sky-dropdown-item>\n <a routerLink=\"/\" (click)=\"onItemClick('Item 1')\"> Item 1 </a>\n </sky-dropdown-item>\n <sky-dropdown-item>\n <a routerLink=\"/\" (click)=\"onItemClick('Item 2')\"> Item 2 </a>\n </sky-dropdown-item>\n <sky-dropdown-item>\n <a routerLink=\"/\" (click)=\"onItemClick('Item 3')\"> Item 3 </a>\n </sky-dropdown-item>\n </sky-dropdown-menu>\n </sky-dropdown>\n </sky-navbar-item>\n</sky-navbar>\n", dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$c.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$c.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: SkyDropdownModule }, { kind: "component", type: i1$2.λ2, selector: "sky-dropdown-button" }, { kind: "component", type: i1$2.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { kind: "component", type: i1$2.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { kind: "component", type: i1$2.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { kind: "ngmodule", type: SkyNavbarModule }, { kind: "component", type: i3$6.λ1, selector: "sky-navbar" }, { kind: "component", type: i3$6.λ2, selector: "sky-navbar-item", inputs: ["active"] }] }); }
|
|
11359
11359
|
}
|
|
11360
11360
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: NavbarExampleComponent, decorators: [{
|
|
11361
11361
|
type: Component,
|
|
11362
|
-
args: [{ selector: 'app-navbar-example', imports: [RouterModule, SkyDropdownModule, SkyNavbarModule], template: "<sky-navbar>\n <sky-navbar-item>\n <a
|
|
11362
|
+
args: [{ selector: 'app-navbar-example', imports: [RouterModule, SkyDropdownModule, SkyNavbarModule], template: "<sky-navbar data-sky-id=\"basic-navbar\">\n <sky-navbar-item data-sky-id=\"navbar-item-1\">\n <a\n routerLink=\"/\"\n routerLinkActive=\"sky-navbar-item-active\"\n (click)=\"onItemClick('Selected item')\"\n >\n Selected item\n </a>\n </sky-navbar-item>\n <sky-navbar-item data-sky-id=\"navbar-item-2\">\n <sky-dropdown>\n <sky-dropdown-button> Show dropdown </sky-dropdown-button>\n <sky-dropdown-menu>\n <sky-dropdown-item>\n <a routerLink=\"/\" (click)=\"onItemClick('Item 1')\"> Item 1 </a>\n </sky-dropdown-item>\n <sky-dropdown-item>\n <a routerLink=\"/\" (click)=\"onItemClick('Item 2')\"> Item 2 </a>\n </sky-dropdown-item>\n <sky-dropdown-item>\n <a routerLink=\"/\" (click)=\"onItemClick('Item 3')\"> Item 3 </a>\n </sky-dropdown-item>\n </sky-dropdown-menu>\n </sky-dropdown>\n </sky-navbar-item>\n</sky-navbar>\n" }]
|
|
11363
11363
|
}] });
|
|
11364
11364
|
|
|
11365
11365
|
const MODAL_TITLE = new InjectionToken('MODAL_TITLE');
|
|
@@ -13599,7 +13599,7 @@ class ModalComponent {
|
|
|
13599
13599
|
this.isSaveDisabled = !this.formGroup?.get('termsAccepted')?.value;
|
|
13600
13600
|
}
|
|
13601
13601
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13602
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: ModalComponent, isStandalone: true, selector: "app-modal", ngImport: i0, template: "<form [formGroup]=\"formGroup\" (ngSubmit)=\"onSave()\">\n <sky-modal [headingText]=\"title\">\n <sky-modal-content>\n <sky-tabset\n #wizardDemo\n ariaLabel=\"Sign-up steps\"\n tabStyle=\"wizard\"\n [(active)]=\"activeIndex\"\n >\n <sky-tab tabHeading=\"1. Biographical Details\">\n <sky-fluid-grid gutterSize=\"small\" [disableMargin]=\"true\">\n <sky-row>\n <sky-column [screenSmall]=\"12\" [screenMedium]=\"4\">\n <sky-input-box labelText=\"First name\" [stacked]=\"true\">\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\" [stacked]=\"true\">\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\n tabHeading=\"2. Contact Information\"\n [disabled]=\"isStep2Disabled\"\n >\n <sky-fluid-grid gutterSize=\"small\" [disableMargin]=\"true\">\n <sky-row>\n <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n <sky-input-box labelText=\"Phone Number\" [stacked]=\"true\">\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]=\"isStep3Disabled\">\n <sky-fluid-grid gutterSize=\"small\" [disableMargin]=\"true\">\n <sky-row>\n <sky-column [screenSmall]=\"12\">\n <sky-checkbox\n formControlName=\"termsAccepted\"\n labelText=\"Accept terms and conditions\"\n required\n />\n </sky-column>\n <sky-column [screenSmall]=\"12\">\n <sky-checkbox\n formControlName=\"mailingList\"\n labelText=\"Sign up for our email newsletter\"\n />\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 buttonType=\"previous\" [tabset]=\"wizardDemo\" />\n <sky-tabset-nav-button buttonType=\"next\" [tabset]=\"wizardDemo\" />\n <sky-tabset-nav-button\n buttonType=\"finish\"\n [tabset]=\"wizardDemo\"\n [disabled]=\"isSaveDisabled\"\n />\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", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i2$2.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "icon", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "ngmodule", type: SkyFluidGridModule }, { kind: "component", type: i1$4.λ23, selector: "sky-row", inputs: ["reverseColumnOrder"] }, { kind: "component", type: i1$4.λ24, selector: "sky-column", inputs: ["screenXSmall", "screenSmall", "screenMedium", "screenLarge"] }, { kind: "component", type: i1$4.λ22, selector: "sky-fluid-grid", inputs: ["disableMargin", "gutterSize"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$2.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: i2$2.λ20, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: ["autocomplete"] }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i3.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout"] }, { kind: "component", type: i3.λ2, selector: "sky-modal-content" }, { kind: "component", type: i3.λ3, selector: "sky-modal-footer" }, { kind: "ngmodule", type: SkyPhoneFieldModule }, { kind: "component", type: i3$7.λ1, selector: "sky-phone-field", inputs: ["allowExtensions", "defaultCountry", "returnFormat", "supportedCountryISOs", "selectedCountry"], outputs: ["selectedCountryChange"] }, { kind: "directive", type: i3$7.λ2, selector: "[skyPhoneFieldInput]", inputs: ["disabled", "skyPhoneFieldNoValidate"] }, { kind: "ngmodule", type: SkyTabsModule }, { kind: "component", type: i1$1.λ1, selector: "sky-tab", inputs: ["active", "disabled", "permalinkValue", "tabHeaderCount", "tabHeading", "tabIndexValue", "layout"], outputs: ["close"] }, { kind: "component", type: i1$1.λ2, selector: "sky-tabset", inputs: ["active", "ariaLabel", "ariaLabelledBy", "permalinkId", "tabStyle"], outputs: ["activeChange", "newTab", "openTab", "tabIndexesChange"] }, { kind: "component", type: i1$1.λ3, selector: "sky-tabset-nav-button", inputs: ["tabset", "buttonType", "buttonText", "disabled"] }] }); }
|
|
13602
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: ModalComponent, isStandalone: true, selector: "app-modal", ngImport: i0, template: "<form [formGroup]=\"formGroup\" (ngSubmit)=\"onSave()\">\n <sky-modal [headingText]=\"title\">\n <sky-modal-content>\n <sky-tabset\n #wizardDemo\n ariaLabel=\"Sign-up steps\"\n data-sky-id=\"sign-up-wizard\"\n tabStyle=\"wizard\"\n [(active)]=\"activeIndex\"\n >\n <sky-tab tabHeading=\"1. Biographical Details\">\n <sky-fluid-grid gutterSize=\"small\" [disableMargin]=\"true\">\n <sky-row>\n <sky-column [screenSmall]=\"12\" [screenMedium]=\"4\">\n <sky-input-box labelText=\"First name\" [stacked]=\"true\">\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\" [stacked]=\"true\">\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\n tabHeading=\"2. Contact Information\"\n [disabled]=\"isStep2Disabled\"\n >\n <sky-fluid-grid gutterSize=\"small\" [disableMargin]=\"true\">\n <sky-row>\n <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n <sky-input-box labelText=\"Phone Number\" [stacked]=\"true\">\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]=\"isStep3Disabled\">\n <sky-fluid-grid gutterSize=\"small\" [disableMargin]=\"true\">\n <sky-row>\n <sky-column [screenSmall]=\"12\">\n <sky-checkbox\n formControlName=\"termsAccepted\"\n labelText=\"Accept terms and conditions\"\n required\n />\n </sky-column>\n <sky-column [screenSmall]=\"12\">\n <sky-checkbox\n formControlName=\"mailingList\"\n labelText=\"Sign up for our email newsletter\"\n />\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 buttonType=\"previous\" [tabset]=\"wizardDemo\" />\n <sky-tabset-nav-button buttonType=\"next\" [tabset]=\"wizardDemo\" />\n <sky-tabset-nav-button\n buttonType=\"finish\"\n [tabset]=\"wizardDemo\"\n [disabled]=\"isSaveDisabled\"\n />\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", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i2$2.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "icon", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "ngmodule", type: SkyFluidGridModule }, { kind: "component", type: i1$4.λ23, selector: "sky-row", inputs: ["reverseColumnOrder"] }, { kind: "component", type: i1$4.λ24, selector: "sky-column", inputs: ["screenXSmall", "screenSmall", "screenMedium", "screenLarge"] }, { kind: "component", type: i1$4.λ22, selector: "sky-fluid-grid", inputs: ["disableMargin", "gutterSize"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$2.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: i2$2.λ20, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: ["autocomplete"] }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i3.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout"] }, { kind: "component", type: i3.λ2, selector: "sky-modal-content" }, { kind: "component", type: i3.λ3, selector: "sky-modal-footer" }, { kind: "ngmodule", type: SkyPhoneFieldModule }, { kind: "component", type: i3$7.λ1, selector: "sky-phone-field", inputs: ["allowExtensions", "defaultCountry", "returnFormat", "supportedCountryISOs", "selectedCountry"], outputs: ["selectedCountryChange"] }, { kind: "directive", type: i3$7.λ2, selector: "[skyPhoneFieldInput]", inputs: ["disabled", "skyPhoneFieldNoValidate"] }, { kind: "ngmodule", type: SkyTabsModule }, { kind: "component", type: i1$1.λ1, selector: "sky-tab", inputs: ["active", "disabled", "permalinkValue", "tabHeaderCount", "tabHeading", "tabIndexValue", "layout"], outputs: ["close"] }, { kind: "component", type: i1$1.λ2, selector: "sky-tabset", inputs: ["active", "ariaLabel", "ariaLabelledBy", "permalinkId", "tabStyle"], outputs: ["activeChange", "newTab", "openTab", "tabIndexesChange"] }, { kind: "component", type: i1$1.λ3, selector: "sky-tabset-nav-button", inputs: ["tabset", "buttonType", "buttonText", "disabled"] }] }); }
|
|
13603
13603
|
}
|
|
13604
13604
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ModalComponent, decorators: [{
|
|
13605
13605
|
type: Component,
|
|
@@ -13611,7 +13611,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
13611
13611
|
SkyModalModule,
|
|
13612
13612
|
SkyPhoneFieldModule,
|
|
13613
13613
|
SkyTabsModule,
|
|
13614
|
-
], template: "<form [formGroup]=\"formGroup\" (ngSubmit)=\"onSave()\">\n <sky-modal [headingText]=\"title\">\n <sky-modal-content>\n <sky-tabset\n #wizardDemo\n ariaLabel=\"Sign-up steps\"\n tabStyle=\"wizard\"\n [(active)]=\"activeIndex\"\n >\n <sky-tab tabHeading=\"1. Biographical Details\">\n <sky-fluid-grid gutterSize=\"small\" [disableMargin]=\"true\">\n <sky-row>\n <sky-column [screenSmall]=\"12\" [screenMedium]=\"4\">\n <sky-input-box labelText=\"First name\" [stacked]=\"true\">\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\" [stacked]=\"true\">\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\n tabHeading=\"2. Contact Information\"\n [disabled]=\"isStep2Disabled\"\n >\n <sky-fluid-grid gutterSize=\"small\" [disableMargin]=\"true\">\n <sky-row>\n <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n <sky-input-box labelText=\"Phone Number\" [stacked]=\"true\">\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]=\"isStep3Disabled\">\n <sky-fluid-grid gutterSize=\"small\" [disableMargin]=\"true\">\n <sky-row>\n <sky-column [screenSmall]=\"12\">\n <sky-checkbox\n formControlName=\"termsAccepted\"\n labelText=\"Accept terms and conditions\"\n required\n />\n </sky-column>\n <sky-column [screenSmall]=\"12\">\n <sky-checkbox\n formControlName=\"mailingList\"\n labelText=\"Sign up for our email newsletter\"\n />\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 buttonType=\"previous\" [tabset]=\"wizardDemo\" />\n <sky-tabset-nav-button buttonType=\"next\" [tabset]=\"wizardDemo\" />\n <sky-tabset-nav-button\n buttonType=\"finish\"\n [tabset]=\"wizardDemo\"\n [disabled]=\"isSaveDisabled\"\n />\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" }]
|
|
13614
|
+
], template: "<form [formGroup]=\"formGroup\" (ngSubmit)=\"onSave()\">\n <sky-modal [headingText]=\"title\">\n <sky-modal-content>\n <sky-tabset\n #wizardDemo\n ariaLabel=\"Sign-up steps\"\n data-sky-id=\"sign-up-wizard\"\n tabStyle=\"wizard\"\n [(active)]=\"activeIndex\"\n >\n <sky-tab tabHeading=\"1. Biographical Details\">\n <sky-fluid-grid gutterSize=\"small\" [disableMargin]=\"true\">\n <sky-row>\n <sky-column [screenSmall]=\"12\" [screenMedium]=\"4\">\n <sky-input-box labelText=\"First name\" [stacked]=\"true\">\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\" [stacked]=\"true\">\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\n tabHeading=\"2. Contact Information\"\n [disabled]=\"isStep2Disabled\"\n >\n <sky-fluid-grid gutterSize=\"small\" [disableMargin]=\"true\">\n <sky-row>\n <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n <sky-input-box labelText=\"Phone Number\" [stacked]=\"true\">\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]=\"isStep3Disabled\">\n <sky-fluid-grid gutterSize=\"small\" [disableMargin]=\"true\">\n <sky-row>\n <sky-column [screenSmall]=\"12\">\n <sky-checkbox\n formControlName=\"termsAccepted\"\n labelText=\"Accept terms and conditions\"\n required\n />\n </sky-column>\n <sky-column [screenSmall]=\"12\">\n <sky-checkbox\n formControlName=\"mailingList\"\n labelText=\"Sign up for our email newsletter\"\n />\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 buttonType=\"previous\" [tabset]=\"wizardDemo\" />\n <sky-tabset-nav-button buttonType=\"next\" [tabset]=\"wizardDemo\" />\n <sky-tabset-nav-button\n buttonType=\"finish\"\n [tabset]=\"wizardDemo\"\n [disabled]=\"isSaveDisabled\"\n />\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" }]
|
|
13615
13615
|
}], ctorParameters: () => [] });
|
|
13616
13616
|
|
|
13617
13617
|
/**
|