@skyux/tabs 5.6.2 → 6.0.0-beta.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.
- package/documentation.json +6 -6
- package/esm2020/index.mjs +23 -0
- package/esm2020/lib/modules/sectioned-form/sectioned-form-section.component.mjs +62 -0
- package/esm2020/lib/modules/sectioned-form/sectioned-form.component.mjs +109 -0
- package/esm2020/lib/modules/sectioned-form/sectioned-form.module.mjs +35 -0
- package/esm2020/lib/modules/sectioned-form/sectioned-form.service.mjs +35 -0
- package/esm2020/lib/modules/shared/sky-tabs-resources.module.mjs +52 -0
- package/esm2020/lib/modules/tabs/tab-button.component.mjs +70 -0
- package/esm2020/lib/modules/tabs/tab-index.mjs +2 -0
- package/esm2020/lib/modules/tabs/tab.component.mjs +131 -0
- package/esm2020/lib/modules/tabs/tabs.module.mjs +57 -0
- package/esm2020/lib/modules/tabs/tabset-active-tab-unregistered-args.mjs +2 -0
- package/esm2020/lib/modules/tabs/tabset-adapter.service.mjs +56 -0
- package/esm2020/lib/modules/tabs/tabset-buttons-display-mode.mjs +2 -0
- package/esm2020/lib/modules/tabs/tabset-nav-button.component.mjs +116 -0
- package/esm2020/lib/modules/tabs/tabset-permalink.service.mjs +126 -0
- package/esm2020/lib/modules/tabs/tabset-style.mjs +2 -0
- package/esm2020/lib/modules/tabs/tabset-tab-indexes-change.mjs +2 -0
- package/esm2020/lib/modules/tabs/tabset.component.mjs +396 -0
- package/esm2020/lib/modules/tabs/tabset.service.mjs +110 -0
- package/esm2020/lib/modules/vertical-tabset/vertical-tab-media-query.service.mjs +72 -0
- package/esm2020/lib/modules/vertical-tabset/vertical-tab.component.mjs +197 -0
- package/esm2020/lib/modules/vertical-tabset/vertical-tabset-adapter.service.mjs +48 -0
- package/esm2020/lib/modules/vertical-tabset/vertical-tabset-group.component.mjs +83 -0
- package/esm2020/lib/modules/vertical-tabset/vertical-tabset.component.mjs +150 -0
- package/esm2020/lib/modules/vertical-tabset/vertical-tabset.module.mjs +60 -0
- package/esm2020/lib/modules/vertical-tabset/vertical-tabset.service.mjs +168 -0
- package/esm2020/skyux-tabs.mjs +5 -0
- package/esm2020/testing/public-api.mjs +3 -0
- package/esm2020/testing/skyux-tabs-testing.mjs +5 -0
- package/esm2020/testing/tabs/tab-fixture-tab.mjs +2 -0
- package/esm2020/testing/tabs/tabset-fixture.mjs +130 -0
- package/fesm2015/{skyux-tabs-testing.js → skyux-tabs-testing.mjs} +1 -1
- package/fesm2015/skyux-tabs-testing.mjs.map +1 -0
- package/fesm2015/{skyux-tabs.js → skyux-tabs.mjs} +188 -237
- package/fesm2015/skyux-tabs.mjs.map +1 -0
- package/{esm2015/testing/tabs/tabset-fixture.js → fesm2020/skyux-tabs-testing.mjs} +39 -43
- package/fesm2020/skyux-tabs-testing.mjs.map +1 -0
- package/fesm2020/skyux-tabs.mjs +2005 -0
- package/fesm2020/skyux-tabs.mjs.map +1 -0
- package/lib/modules/shared/sky-tabs-resources.module.d.ts +1 -1
- package/package.json +40 -19
- package/testing/package.json +5 -5
- package/bundles/skyux-tabs-testing.umd.js +0 -498
- package/bundles/skyux-tabs.umd.js +0 -2258
- package/esm2015/index.js +0 -23
- package/esm2015/index.js.map +0 -1
- package/esm2015/lib/modules/sectioned-form/sectioned-form-section.component.js +0 -67
- package/esm2015/lib/modules/sectioned-form/sectioned-form-section.component.js.map +0 -1
- package/esm2015/lib/modules/sectioned-form/sectioned-form.component.js +0 -116
- package/esm2015/lib/modules/sectioned-form/sectioned-form.component.js.map +0 -1
- package/esm2015/lib/modules/sectioned-form/sectioned-form.module.js +0 -35
- package/esm2015/lib/modules/sectioned-form/sectioned-form.module.js.map +0 -1
- package/esm2015/lib/modules/sectioned-form/sectioned-form.service.js +0 -35
- package/esm2015/lib/modules/sectioned-form/sectioned-form.service.js.map +0 -1
- package/esm2015/lib/modules/shared/sky-tabs-resources.module.js +0 -52
- package/esm2015/lib/modules/shared/sky-tabs-resources.module.js.map +0 -1
- package/esm2015/lib/modules/tabs/tab-button.component.js +0 -76
- package/esm2015/lib/modules/tabs/tab-button.component.js.map +0 -1
- package/esm2015/lib/modules/tabs/tab-index.js +0 -2
- package/esm2015/lib/modules/tabs/tab-index.js.map +0 -1
- package/esm2015/lib/modules/tabs/tab.component.js +0 -135
- package/esm2015/lib/modules/tabs/tab.component.js.map +0 -1
- package/esm2015/lib/modules/tabs/tabs.module.js +0 -57
- package/esm2015/lib/modules/tabs/tabs.module.js.map +0 -1
- package/esm2015/lib/modules/tabs/tabset-active-tab-unregistered-args.js +0 -2
- package/esm2015/lib/modules/tabs/tabset-active-tab-unregistered-args.js.map +0 -1
- package/esm2015/lib/modules/tabs/tabset-adapter.service.js +0 -56
- package/esm2015/lib/modules/tabs/tabset-adapter.service.js.map +0 -1
- package/esm2015/lib/modules/tabs/tabset-buttons-display-mode.js +0 -2
- package/esm2015/lib/modules/tabs/tabset-buttons-display-mode.js.map +0 -1
- package/esm2015/lib/modules/tabs/tabset-nav-button.component.js +0 -119
- package/esm2015/lib/modules/tabs/tabset-nav-button.component.js.map +0 -1
- package/esm2015/lib/modules/tabs/tabset-permalink.service.js +0 -126
- package/esm2015/lib/modules/tabs/tabset-permalink.service.js.map +0 -1
- package/esm2015/lib/modules/tabs/tabset-style.js +0 -2
- package/esm2015/lib/modules/tabs/tabset-style.js.map +0 -1
- package/esm2015/lib/modules/tabs/tabset-tab-indexes-change.js +0 -2
- package/esm2015/lib/modules/tabs/tabset-tab-indexes-change.js.map +0 -1
- package/esm2015/lib/modules/tabs/tabset.component.js +0 -405
- package/esm2015/lib/modules/tabs/tabset.component.js.map +0 -1
- package/esm2015/lib/modules/tabs/tabset.service.js +0 -110
- package/esm2015/lib/modules/tabs/tabset.service.js.map +0 -1
- package/esm2015/lib/modules/vertical-tabset/vertical-tab-media-query.service.js +0 -72
- package/esm2015/lib/modules/vertical-tabset/vertical-tab-media-query.service.js.map +0 -1
- package/esm2015/lib/modules/vertical-tabset/vertical-tab.component.js +0 -203
- package/esm2015/lib/modules/vertical-tabset/vertical-tab.component.js.map +0 -1
- package/esm2015/lib/modules/vertical-tabset/vertical-tabset-adapter.service.js +0 -48
- package/esm2015/lib/modules/vertical-tabset/vertical-tabset-adapter.service.js.map +0 -1
- package/esm2015/lib/modules/vertical-tabset/vertical-tabset-group.component.js +0 -89
- package/esm2015/lib/modules/vertical-tabset/vertical-tabset-group.component.js.map +0 -1
- package/esm2015/lib/modules/vertical-tabset/vertical-tabset.component.js +0 -157
- package/esm2015/lib/modules/vertical-tabset/vertical-tabset.component.js.map +0 -1
- package/esm2015/lib/modules/vertical-tabset/vertical-tabset.module.js +0 -60
- package/esm2015/lib/modules/vertical-tabset/vertical-tabset.module.js.map +0 -1
- package/esm2015/lib/modules/vertical-tabset/vertical-tabset.service.js +0 -170
- package/esm2015/lib/modules/vertical-tabset/vertical-tabset.service.js.map +0 -1
- package/esm2015/skyux-tabs.js +0 -5
- package/esm2015/skyux-tabs.js.map +0 -1
- package/esm2015/testing/public-api.js +0 -3
- package/esm2015/testing/public-api.js.map +0 -1
- package/esm2015/testing/skyux-tabs-testing.js +0 -5
- package/esm2015/testing/skyux-tabs-testing.js.map +0 -1
- package/esm2015/testing/tabs/tab-fixture-tab.js +0 -2
- package/esm2015/testing/tabs/tab-fixture-tab.js.map +0 -1
- package/esm2015/testing/tabs/tabset-fixture.js.map +0 -1
- package/fesm2015/skyux-tabs-testing.js.map +0 -1
- package/fesm2015/skyux-tabs.js.map +0 -1
package/esm2015/index.js
DELETED
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
export * from './lib/modules/sectioned-form/sectioned-form.module';
|
|
2
|
-
export * from './lib/modules/sectioned-form/sectioned-form.service';
|
|
3
|
-
export * from './lib/modules/tabs/tab-index';
|
|
4
|
-
export * from './lib/modules/tabs/tabset-buttons-display-mode';
|
|
5
|
-
export * from './lib/modules/tabs/tabset-style';
|
|
6
|
-
export * from './lib/modules/tabs/tabset-tab-indexes-change';
|
|
7
|
-
export * from './lib/modules/tabs/tabs.module';
|
|
8
|
-
export * from './lib/modules/vertical-tabset/vertical-tabset.module';
|
|
9
|
-
// The following export is needed because our docs use it as a prescribed pattern.
|
|
10
|
-
// Ideally, this functionality would live in a standard `Input` or `Output`.
|
|
11
|
-
// https://developer.blackbaud.com/skyux/components/sectioned-form#code
|
|
12
|
-
// TODO: Try to remove in a major release.
|
|
13
|
-
export * from './lib/modules/sectioned-form/sectioned-form.component';
|
|
14
|
-
// Components and directives must be exported to support Angular's "partial" Ivy compiler.
|
|
15
|
-
// Obscure names are used to indicate types are not part of public API.
|
|
16
|
-
export { SkyTabComponent as λ1 } from './lib/modules/tabs/tab.component';
|
|
17
|
-
export { SkyTabsetComponent as λ2 } from './lib/modules/tabs/tabset.component';
|
|
18
|
-
export { SkyTabsetNavButtonComponent as λ3 } from './lib/modules/tabs/tabset-nav-button.component';
|
|
19
|
-
export { SkyVerticalTabComponent as λ4 } from './lib/modules/vertical-tabset/vertical-tab.component';
|
|
20
|
-
export { SkySectionedFormSectionComponent as λ5 } from './lib/modules/sectioned-form/sectioned-form-section.component';
|
|
21
|
-
export { SkyVerticalTabsetComponent as λ6 } from './lib/modules/vertical-tabset/vertical-tabset.component';
|
|
22
|
-
export { SkyVerticalTabsetGroupComponent as λ7 } from './lib/modules/vertical-tabset/vertical-tabset-group.component';
|
|
23
|
-
//# sourceMappingURL=index.js.map
|
package/esm2015/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../libs/components/tabs/src/index.ts"],"names":[],"mappings":"AAAA,cAAc,oDAAoD,CAAC;AACnE,cAAc,qDAAqD,CAAC;AAEpE,cAAc,8BAA8B,CAAC;AAC7C,cAAc,gDAAgD,CAAC;AAC/D,cAAc,iCAAiC,CAAC;AAChD,cAAc,8CAA8C,CAAC;AAC7D,cAAc,gCAAgC,CAAC;AAE/C,cAAc,sDAAsD,CAAC;AAErE,kFAAkF;AAClF,4EAA4E;AAC5E,uEAAuE;AACvE,0CAA0C;AAC1C,cAAc,uDAAuD,CAAC;AAEtE,0FAA0F;AAC1F,uEAAuE;AACvE,OAAO,EAAE,eAAe,IAAI,EAAE,EAAE,MAAM,kCAAkC,CAAC;AACzE,OAAO,EAAE,kBAAkB,IAAI,EAAE,EAAE,MAAM,qCAAqC,CAAC;AAC/E,OAAO,EAAE,2BAA2B,IAAI,EAAE,EAAE,MAAM,gDAAgD,CAAC;AACnG,OAAO,EAAE,uBAAuB,IAAI,EAAE,EAAE,MAAM,sDAAsD,CAAC;AACrG,OAAO,EAAE,gCAAgC,IAAI,EAAE,EAAE,MAAM,+DAA+D,CAAC;AACvH,OAAO,EAAE,0BAA0B,IAAI,EAAE,EAAE,MAAM,yDAAyD,CAAC;AAC3G,OAAO,EAAE,+BAA+B,IAAI,EAAE,EAAE,MAAM,+DAA+D,CAAC","sourcesContent":["export * from './lib/modules/sectioned-form/sectioned-form.module';\nexport * from './lib/modules/sectioned-form/sectioned-form.service';\n\nexport * from './lib/modules/tabs/tab-index';\nexport * from './lib/modules/tabs/tabset-buttons-display-mode';\nexport * from './lib/modules/tabs/tabset-style';\nexport * from './lib/modules/tabs/tabset-tab-indexes-change';\nexport * from './lib/modules/tabs/tabs.module';\n\nexport * from './lib/modules/vertical-tabset/vertical-tabset.module';\n\n// The following export is needed because our docs use it as a prescribed pattern.\n// Ideally, this functionality would live in a standard `Input` or `Output`.\n// https://developer.blackbaud.com/skyux/components/sectioned-form#code\n// TODO: Try to remove in a major release.\nexport * from './lib/modules/sectioned-form/sectioned-form.component';\n\n// Components and directives must be exported to support Angular's \"partial\" Ivy compiler.\n// Obscure names are used to indicate types are not part of public API.\nexport { SkyTabComponent as λ1 } from './lib/modules/tabs/tab.component';\nexport { SkyTabsetComponent as λ2 } from './lib/modules/tabs/tabset.component';\nexport { SkyTabsetNavButtonComponent as λ3 } from './lib/modules/tabs/tabset-nav-button.component';\nexport { SkyVerticalTabComponent as λ4 } from './lib/modules/vertical-tabset/vertical-tab.component';\nexport { SkySectionedFormSectionComponent as λ5 } from './lib/modules/sectioned-form/sectioned-form-section.component';\nexport { SkyVerticalTabsetComponent as λ6 } from './lib/modules/vertical-tabset/vertical-tabset.component';\nexport { SkyVerticalTabsetGroupComponent as λ7 } from './lib/modules/vertical-tabset/vertical-tabset-group.component';\n"]}
|
|
@@ -1,67 +0,0 @@
|
|
|
1
|
-
import { ChangeDetectorRef, Component, Input, ViewChild, } from '@angular/core';
|
|
2
|
-
import { Subject } from 'rxjs';
|
|
3
|
-
import { takeUntil } from 'rxjs/operators';
|
|
4
|
-
import { SkyVerticalTabsetService } from '../vertical-tabset/vertical-tabset.service';
|
|
5
|
-
import { SkyVerticalTabComponent } from './../vertical-tabset/vertical-tab.component';
|
|
6
|
-
import { SkySectionedFormService } from './sectioned-form.service';
|
|
7
|
-
import * as i0 from "@angular/core";
|
|
8
|
-
import * as i1 from "./sectioned-form.service";
|
|
9
|
-
import * as i2 from "../vertical-tabset/vertical-tabset.service";
|
|
10
|
-
import * as i3 from "../vertical-tabset/vertical-tab.component";
|
|
11
|
-
import * as i4 from "@angular/common";
|
|
12
|
-
let nextId = 0;
|
|
13
|
-
/**
|
|
14
|
-
* Creates an individual form to display as a section within the sectioned form.
|
|
15
|
-
*/
|
|
16
|
-
export class SkySectionedFormSectionComponent {
|
|
17
|
-
constructor(sectionedFormService, tabsetService, changeRef) {
|
|
18
|
-
this.sectionedFormService = sectionedFormService;
|
|
19
|
-
this.tabsetService = tabsetService;
|
|
20
|
-
this.changeRef = changeRef;
|
|
21
|
-
this.sectionTabId = `sky-sectioned-form-tab-${++nextId}`;
|
|
22
|
-
this.sectionContentId = `sky-sectioned-form-section-${++nextId}`;
|
|
23
|
-
/**
|
|
24
|
-
* Indicates whether the section is active when the form loads.
|
|
25
|
-
* @default false
|
|
26
|
-
*/
|
|
27
|
-
this.active = false;
|
|
28
|
-
this._ngUnsubscribe = new Subject();
|
|
29
|
-
}
|
|
30
|
-
ngOnInit() {
|
|
31
|
-
this.changeRef.detectChanges();
|
|
32
|
-
this.tabsetService.switchingMobile.subscribe((mobile) => {
|
|
33
|
-
this.changeRef.detectChanges();
|
|
34
|
-
});
|
|
35
|
-
this.sectionedFormService.requiredChange
|
|
36
|
-
.pipe(takeUntil(this._ngUnsubscribe))
|
|
37
|
-
.subscribe((required) => (this.fieldRequired = required));
|
|
38
|
-
this.sectionedFormService.invalidChange
|
|
39
|
-
.pipe(takeUntil(this._ngUnsubscribe))
|
|
40
|
-
.subscribe((invalid) => (this.fieldInvalid = invalid));
|
|
41
|
-
}
|
|
42
|
-
ngOnDestroy() {
|
|
43
|
-
this._ngUnsubscribe.next();
|
|
44
|
-
this._ngUnsubscribe.complete();
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
SkySectionedFormSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySectionedFormSectionComponent, deps: [{ token: i1.SkySectionedFormService }, { token: i2.SkyVerticalTabsetService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
48
|
-
SkySectionedFormSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkySectionedFormSectionComponent, selector: "sky-sectioned-form-section", inputs: { heading: "heading", itemCount: "itemCount", active: "active" }, providers: [SkySectionedFormService], viewQueries: [{ propertyName: "tab", first: true, predicate: SkyVerticalTabComponent, descendants: true }], ngImport: i0, template: "<sky-vertical-tab\n [active]=\"active\"\n [errorIndicator]=\"fieldInvalid\"\n [ngClass]=\"{\n 'sky-tab-field-required': fieldRequired\n }\"\n [showTabRightArrow]=\"true\"\n [tabHeaderCount]=\"itemCount\"\n [tabHeading]=\"heading\"\n [tabId]=\"sectionTabId\"\n>\n <ng-content></ng-content>\n</sky-vertical-tab>\n", styles: [":host .sky-tab-field-required ::ng-deep .sky-vertical-tab-heading:after{content:\"*\";color:#ef4044;padding-left:5px}\n"], components: [{ type: i3.SkyVerticalTabComponent, selector: "sky-vertical-tab", inputs: ["active", "ariaControls", "ariaRole", "disabled", "errorIndicator", "tabHeaderCount", "tabHeading", "showTabRightArrow", "tabId"] }], directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
49
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySectionedFormSectionComponent, decorators: [{
|
|
50
|
-
type: Component,
|
|
51
|
-
args: [{
|
|
52
|
-
selector: 'sky-sectioned-form-section',
|
|
53
|
-
templateUrl: './sectioned-form-section.component.html',
|
|
54
|
-
providers: [SkySectionedFormService],
|
|
55
|
-
styleUrls: ['./sectioned-form-section.component.scss'],
|
|
56
|
-
}]
|
|
57
|
-
}], ctorParameters: function () { return [{ type: i1.SkySectionedFormService }, { type: i2.SkyVerticalTabsetService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { heading: [{
|
|
58
|
-
type: Input
|
|
59
|
-
}], itemCount: [{
|
|
60
|
-
type: Input
|
|
61
|
-
}], active: [{
|
|
62
|
-
type: Input
|
|
63
|
-
}], tab: [{
|
|
64
|
-
type: ViewChild,
|
|
65
|
-
args: [SkyVerticalTabComponent]
|
|
66
|
-
}] } });
|
|
67
|
-
//# sourceMappingURL=sectioned-form-section.component.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"sectioned-form-section.component.js","sourceRoot":"","sources":["../../../../../../../../libs/components/tabs/src/lib/modules/sectioned-form/sectioned-form-section.component.ts","../../../../../../../../libs/components/tabs/src/lib/modules/sectioned-form/sectioned-form-section.component.html"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EACjB,SAAS,EACT,KAAK,EAGL,SAAS,GACV,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,OAAO,EAAE,MAAM,MAAM,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,OAAO,EAAE,wBAAwB,EAAE,MAAM,4CAA4C,CAAC;AAEtF,OAAO,EAAE,uBAAuB,EAAE,MAAM,6CAA6C,CAAC;AACtF,OAAO,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;;;;;;AAEnE,IAAI,MAAM,GAAG,CAAC,CAAC;AAEf;;GAEG;AAOH,MAAM,OAAO,gCAAgC;IAiC3C,YACU,oBAA6C,EAC7C,aAAuC,EACvC,SAA4B;QAF5B,yBAAoB,GAApB,oBAAoB,CAAyB;QAC7C,kBAAa,GAAb,aAAa,CAA0B;QACvC,cAAS,GAAT,SAAS,CAAmB;QAnC/B,iBAAY,GAAG,0BAA0B,EAAE,MAAM,EAAE,CAAC;QACpD,qBAAgB,GAAG,8BAA8B,EAAE,MAAM,EAAE,CAAC;QAgBnE;;;WAGG;QAEI,WAAM,GAAG,KAAK,CAAC;QAQd,mBAAc,GAAG,IAAI,OAAO,EAAE,CAAC;IAMpC,CAAC;IAEG,QAAQ;QACb,IAAI,CAAC,SAAS,CAAC,aAAa,EAAE,CAAC;QAE/B,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC,MAAe,EAAE,EAAE;YAC/D,IAAI,CAAC,SAAS,CAAC,aAAa,EAAE,CAAC;QACjC,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,oBAAoB,CAAC,cAAc;aACrC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;aACpC,SAAS,CAAC,CAAC,QAAiB,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC,CAAC,CAAC;QAErE,IAAI,CAAC,oBAAoB,CAAC,aAAa;aACpC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;aACpC,SAAS,CAAC,CAAC,OAAgB,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC,CAAC,CAAC;IACpE,CAAC;IAEM,WAAW;QAChB,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;QAC3B,IAAI,CAAC,cAAc,CAAC,QAAQ,EAAE,CAAC;IACjC,CAAC;;8HA1DU,gCAAgC;kHAAhC,gCAAgC,+HAHhC,CAAC,uBAAuB,CAAC,+DA+BzB,uBAAuB,gDCxDpC,qUAaA;4FDea,gCAAgC;kBAN5C,SAAS;mBAAC;oBACT,QAAQ,EAAE,4BAA4B;oBACtC,WAAW,EAAE,yCAAyC;oBACtD,SAAS,EAAE,CAAC,uBAAuB,CAAC;oBACpC,SAAS,EAAE,CAAC,yCAAyC,CAAC;iBACvD;qLAUQ,OAAO;sBADb,KAAK;gBAQC,SAAS;sBADf,KAAK;gBAQC,MAAM;sBADZ,KAAK;gBAOC,GAAG;sBADT,SAAS;uBAAC,uBAAuB","sourcesContent":["import {\n ChangeDetectorRef,\n Component,\n Input,\n OnDestroy,\n OnInit,\n ViewChild,\n} from '@angular/core';\n\nimport { Subject } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\n\nimport { SkyVerticalTabsetService } from '../vertical-tabset/vertical-tabset.service';\n\nimport { SkyVerticalTabComponent } from './../vertical-tabset/vertical-tab.component';\nimport { SkySectionedFormService } from './sectioned-form.service';\n\nlet nextId = 0;\n\n/**\n * Creates an individual form to display as a section within the sectioned form.\n */\n@Component({\n selector: 'sky-sectioned-form-section',\n templateUrl: './sectioned-form-section.component.html',\n providers: [SkySectionedFormService],\n styleUrls: ['./sectioned-form-section.component.scss'],\n})\nexport class SkySectionedFormSectionComponent implements OnInit, OnDestroy {\n public sectionTabId = `sky-sectioned-form-tab-${++nextId}`;\n public sectionContentId = `sky-sectioned-form-section-${++nextId}`;\n\n /**\n * Specifies the section header.\n * @required\n */\n @Input()\n public heading: string;\n\n /**\n * Indicates the number of items within the section and displays a\n * counter alongside the section header.\n */\n @Input()\n public itemCount: number;\n\n /**\n * Indicates whether the section is active when the form loads.\n * @default false\n */\n @Input()\n public active = false;\n\n public fieldRequired: boolean;\n public fieldInvalid: boolean;\n\n @ViewChild(SkyVerticalTabComponent)\n public tab: SkyVerticalTabComponent;\n\n private _ngUnsubscribe = new Subject();\n\n constructor(\n private sectionedFormService: SkySectionedFormService,\n private tabsetService: SkyVerticalTabsetService,\n private changeRef: ChangeDetectorRef\n ) {}\n\n public ngOnInit() {\n this.changeRef.detectChanges();\n\n this.tabsetService.switchingMobile.subscribe((mobile: boolean) => {\n this.changeRef.detectChanges();\n });\n\n this.sectionedFormService.requiredChange\n .pipe(takeUntil(this._ngUnsubscribe))\n .subscribe((required: boolean) => (this.fieldRequired = required));\n\n this.sectionedFormService.invalidChange\n .pipe(takeUntil(this._ngUnsubscribe))\n .subscribe((invalid: boolean) => (this.fieldInvalid = invalid));\n }\n\n public ngOnDestroy() {\n this._ngUnsubscribe.next();\n this._ngUnsubscribe.complete();\n }\n}\n","<sky-vertical-tab\n [active]=\"active\"\n [errorIndicator]=\"fieldInvalid\"\n [ngClass]=\"{\n 'sky-tab-field-required': fieldRequired\n }\"\n [showTabRightArrow]=\"true\"\n [tabHeaderCount]=\"itemCount\"\n [tabHeading]=\"heading\"\n [tabId]=\"sectionTabId\"\n>\n <ng-content></ng-content>\n</sky-vertical-tab>\n"]}
|
|
@@ -1,116 +0,0 @@
|
|
|
1
|
-
import { animate, style, transition, trigger } from '@angular/animations';
|
|
2
|
-
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, Output, ViewChild, } from '@angular/core';
|
|
3
|
-
import { Subject } from 'rxjs';
|
|
4
|
-
import { takeUntil } from 'rxjs/operators';
|
|
5
|
-
import { HIDDEN_STATE, SkyVerticalTabsetService, VISIBLE_STATE, } from './../vertical-tabset/vertical-tabset.service';
|
|
6
|
-
import * as i0 from "@angular/core";
|
|
7
|
-
import * as i1 from "./../vertical-tabset/vertical-tabset.service";
|
|
8
|
-
import * as i2 from "@angular/common";
|
|
9
|
-
/**
|
|
10
|
-
* Creates a container for the sectioned forms.
|
|
11
|
-
*/
|
|
12
|
-
export class SkySectionedFormComponent {
|
|
13
|
-
constructor(tabService, changeRef) {
|
|
14
|
-
this.tabService = tabService;
|
|
15
|
-
this.changeRef = changeRef;
|
|
16
|
-
/**
|
|
17
|
-
* Indicates whether the sectioned form loads section content during initialization so that it
|
|
18
|
-
* displays content without moving around elements in the content container.
|
|
19
|
-
* @default false
|
|
20
|
-
*/
|
|
21
|
-
this.maintainSectionContent = false;
|
|
22
|
-
/**
|
|
23
|
-
* Fires when the active tab changes and emits the index of the active
|
|
24
|
-
* section. The index is based on the section's position when the form loads.
|
|
25
|
-
*/
|
|
26
|
-
this.indexChanged = new EventEmitter();
|
|
27
|
-
this.isMobile = false;
|
|
28
|
-
this._ngUnsubscribe = new Subject();
|
|
29
|
-
}
|
|
30
|
-
get ariaRole() {
|
|
31
|
-
return this.isMobile ? undefined : 'tablist';
|
|
32
|
-
}
|
|
33
|
-
ngOnInit() {
|
|
34
|
-
this.tabService.maintainTabContent = this.maintainSectionContent;
|
|
35
|
-
this.tabService.indexChanged
|
|
36
|
-
.pipe(takeUntil(this._ngUnsubscribe))
|
|
37
|
-
.subscribe((index) => {
|
|
38
|
-
this.indexChanged.emit(index);
|
|
39
|
-
this.changeRef.markForCheck();
|
|
40
|
-
});
|
|
41
|
-
this.tabService.switchingMobile
|
|
42
|
-
.pipe(takeUntil(this._ngUnsubscribe))
|
|
43
|
-
.subscribe((mobile) => {
|
|
44
|
-
this.isMobile = mobile;
|
|
45
|
-
this.changeRef.markForCheck();
|
|
46
|
-
});
|
|
47
|
-
if (this.tabService.isMobile()) {
|
|
48
|
-
this.isMobile = true;
|
|
49
|
-
this.tabService.animationContentVisibleState = VISIBLE_STATE;
|
|
50
|
-
this.changeRef.markForCheck();
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
ngAfterViewChecked() {
|
|
54
|
-
this.tabService.content = this.content;
|
|
55
|
-
this.tabService.updateContent();
|
|
56
|
-
}
|
|
57
|
-
ngOnDestroy() {
|
|
58
|
-
this._ngUnsubscribe.next();
|
|
59
|
-
this._ngUnsubscribe.complete();
|
|
60
|
-
}
|
|
61
|
-
tabsVisible() {
|
|
62
|
-
this.changeRef.markForCheck();
|
|
63
|
-
return this.tabService.tabsVisible();
|
|
64
|
-
}
|
|
65
|
-
showTabs() {
|
|
66
|
-
this.tabService.showTabs();
|
|
67
|
-
this.changeRef.markForCheck();
|
|
68
|
-
}
|
|
69
|
-
}
|
|
70
|
-
SkySectionedFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySectionedFormComponent, deps: [{ token: i1.SkyVerticalTabsetService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
71
|
-
SkySectionedFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkySectionedFormComponent, selector: "sky-sectioned-form", inputs: { maintainSectionContent: "maintainSectionContent" }, outputs: { indexChanged: "indexChanged" }, providers: [SkyVerticalTabsetService], viewQueries: [{ propertyName: "content", first: true, predicate: ["skySectionSideContent"], descendants: true }], ngImport: i0, template: "<div\n aria-orientation=\"vertical\"\n class=\"sky-sectioned-form\"\n [attr.role]=\"ariaRole\"\n (window:resize)=\"tabService.updateContent()\"\n>\n <div\n *ngIf=\"maintainSectionContent || tabsVisible()\"\n class=\"sky-sectioned-form-tabs\"\n [ngClass]=\"{ 'sky-sectioned-form-tabs-hidden': !tabsVisible() }\"\n [@tabEnter]=\"tabService.animationTabsVisibleState\"\n >\n <ng-content></ng-content>\n </div>\n <div\n *ngIf=\"maintainSectionContent || tabService.contentVisible()\"\n class=\"sky-sectioned-form-content\"\n [ngClass]=\"{\n 'sky-sectioned-form-content-hidden': !tabService.contentVisible()\n }\"\n [@contentEnter]=\"tabService.animationContentVisibleState\"\n #skySectionSideContent\n ></div>\n</div>\n", styles: [":host .sky-sectioned-form{display:block;max-height:none}:host .sky-sectioned-form-content{flex-basis:auto;overflow-y:visible}:host .sky-sectioned-form-tabs{flex-basis:auto;overflow-y:visible;border-right:1px solid #e2e3e4}:host-context(.sky-responsive-container-xs) .sky-sectioned-form,:host-context(.sky-responsive-container-sm) .sky-sectioned-form,:host-context(.sky-responsive-container-md) .sky-sectioned-form,:host-context(.sky-responsive-container-lg) .sky-sectioned-form{display:block;max-height:none}:host-context(.sky-responsive-container-xs) .sky-sectioned-form-content,:host-context(.sky-responsive-container-sm) .sky-sectioned-form-content,:host-context(.sky-responsive-container-md) .sky-sectioned-form-content,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-content{flex-basis:auto;overflow-y:visible}:host-context(.sky-responsive-container-xs) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-sm) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-md) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-tabs{flex-basis:auto;overflow-y:visible;border-right:1px solid #e2e3e4}@media (min-width: 768px){:host .sky-sectioned-form{display:flex;max-height:100%}:host .sky-sectioned-form-content{flex-basis:70%;margin:15px;overflow-y:auto}:host .sky-sectioned-form-tabs{flex-basis:30%;overflow-y:auto}}:host-context(.sky-responsive-container-sm) .sky-sectioned-form,:host-context(.sky-responsive-container-md) .sky-sectioned-form,:host-context(.sky-responsive-container-lg) .sky-sectioned-form{display:flex;max-height:100%}:host-context(.sky-responsive-container-sm) .sky-sectioned-form-content,:host-context(.sky-responsive-container-md) .sky-sectioned-form-content,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-content{flex-basis:70%;margin:15px;overflow-y:auto}:host-context(.sky-responsive-container-sm) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-md) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-tabs{flex-basis:30%;overflow-y:auto}.sky-sectioned-form-tabs-hidden{display:none}.sky-sectioned-form-content-hidden{display:none}:host-context(.sky-theme-modern) .sky-sectioned-form-content{margin:15px}:host-context(.sky-theme-modern) .sky-sectioned-form-tabs{border-right:1px solid #d2d2d2}@media (min-width: 768px){:host-context(.sky-theme-modern) :host .sky-sectioned-form-content{margin:20px 30px}}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-sectioned-form-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-sectioned-form-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-sectioned-form-content{margin:20px 30px}.sky-theme-modern .sky-sectioned-form-content{margin:15px}.sky-theme-modern .sky-sectioned-form-tabs{border-right:1px solid #d2d2d2}@media (min-width: 768px){.sky-theme-modern :host .sky-sectioned-form-content{margin:20px 30px}}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-sectioned-form-content,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-sectioned-form-content,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-sectioned-form-content{margin:20px 30px}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
|
|
72
|
-
trigger('tabEnter', [
|
|
73
|
-
transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
|
|
74
|
-
style({ transform: 'translate(-100%)' }),
|
|
75
|
-
animate('150ms ease-in'),
|
|
76
|
-
]),
|
|
77
|
-
]),
|
|
78
|
-
trigger('contentEnter', [
|
|
79
|
-
transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
|
|
80
|
-
style({ transform: 'translate(100%)' }),
|
|
81
|
-
animate('150ms ease-in'),
|
|
82
|
-
]),
|
|
83
|
-
]),
|
|
84
|
-
], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
85
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySectionedFormComponent, decorators: [{
|
|
86
|
-
type: Component,
|
|
87
|
-
args: [{
|
|
88
|
-
selector: 'sky-sectioned-form',
|
|
89
|
-
templateUrl: './sectioned-form.component.html',
|
|
90
|
-
styleUrls: ['./sectioned-form.component.scss'],
|
|
91
|
-
providers: [SkyVerticalTabsetService],
|
|
92
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
93
|
-
animations: [
|
|
94
|
-
trigger('tabEnter', [
|
|
95
|
-
transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
|
|
96
|
-
style({ transform: 'translate(-100%)' }),
|
|
97
|
-
animate('150ms ease-in'),
|
|
98
|
-
]),
|
|
99
|
-
]),
|
|
100
|
-
trigger('contentEnter', [
|
|
101
|
-
transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
|
|
102
|
-
style({ transform: 'translate(100%)' }),
|
|
103
|
-
animate('150ms ease-in'),
|
|
104
|
-
]),
|
|
105
|
-
]),
|
|
106
|
-
],
|
|
107
|
-
}]
|
|
108
|
-
}], ctorParameters: function () { return [{ type: i1.SkyVerticalTabsetService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { maintainSectionContent: [{
|
|
109
|
-
type: Input
|
|
110
|
-
}], indexChanged: [{
|
|
111
|
-
type: Output
|
|
112
|
-
}], content: [{
|
|
113
|
-
type: ViewChild,
|
|
114
|
-
args: ['skySectionSideContent']
|
|
115
|
-
}] } });
|
|
116
|
-
//# sourceMappingURL=sectioned-form.component.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"sectioned-form.component.js","sourceRoot":"","sources":["../../../../../../../../libs/components/tabs/src/lib/modules/sectioned-form/sectioned-form.component.ts","../../../../../../../../libs/components/tabs/src/lib/modules/sectioned-form/sectioned-form.component.html"],"names":[],"mappings":"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","sourcesContent":["import { animate, style, transition, trigger } from '@angular/animations';\nimport {\n AfterViewChecked,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ElementRef,\n EventEmitter,\n Input,\n OnDestroy,\n OnInit,\n Output,\n ViewChild,\n} from '@angular/core';\n\nimport { Subject } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\n\nimport {\n HIDDEN_STATE,\n SkyVerticalTabsetService,\n VISIBLE_STATE,\n} from './../vertical-tabset/vertical-tabset.service';\n\n/**\n * Creates a container for the sectioned forms.\n */\n@Component({\n selector: 'sky-sectioned-form',\n templateUrl: './sectioned-form.component.html',\n styleUrls: ['./sectioned-form.component.scss'],\n providers: [SkyVerticalTabsetService],\n changeDetection: ChangeDetectionStrategy.OnPush,\n animations: [\n trigger('tabEnter', [\n transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [\n style({ transform: 'translate(-100%)' }),\n animate('150ms ease-in'),\n ]),\n ]),\n trigger('contentEnter', [\n transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [\n style({ transform: 'translate(100%)' }),\n animate('150ms ease-in'),\n ]),\n ]),\n ],\n})\nexport class SkySectionedFormComponent\n implements OnInit, OnDestroy, AfterViewChecked\n{\n /**\n * Indicates whether the sectioned form loads section content during initialization so that it\n * displays content without moving around elements in the content container.\n * @default false\n */\n @Input()\n public maintainSectionContent = false;\n\n /**\n * Fires when the active tab changes and emits the index of the active\n * section. The index is based on the section's position when the form loads.\n */\n @Output()\n public indexChanged: EventEmitter<number> = new EventEmitter();\n\n public get ariaRole(): string {\n return this.isMobile ? undefined : 'tablist';\n }\n\n @ViewChild('skySectionSideContent')\n public content: ElementRef;\n\n private isMobile = false;\n private _ngUnsubscribe = new Subject();\n\n constructor(\n public tabService: SkyVerticalTabsetService,\n private changeRef: ChangeDetectorRef\n ) {}\n\n public ngOnInit() {\n this.tabService.maintainTabContent = this.maintainSectionContent;\n\n this.tabService.indexChanged\n .pipe(takeUntil(this._ngUnsubscribe))\n .subscribe((index) => {\n this.indexChanged.emit(index);\n this.changeRef.markForCheck();\n });\n\n this.tabService.switchingMobile\n .pipe(takeUntil(this._ngUnsubscribe))\n .subscribe((mobile: boolean) => {\n this.isMobile = mobile;\n this.changeRef.markForCheck();\n });\n\n if (this.tabService.isMobile()) {\n this.isMobile = true;\n this.tabService.animationContentVisibleState = VISIBLE_STATE;\n this.changeRef.markForCheck();\n }\n }\n\n public ngAfterViewChecked() {\n this.tabService.content = this.content;\n this.tabService.updateContent();\n }\n\n public ngOnDestroy() {\n this._ngUnsubscribe.next();\n this._ngUnsubscribe.complete();\n }\n\n public tabsVisible() {\n this.changeRef.markForCheck();\n return this.tabService.tabsVisible();\n }\n\n public showTabs() {\n this.tabService.showTabs();\n this.changeRef.markForCheck();\n }\n}\n","<div\n aria-orientation=\"vertical\"\n class=\"sky-sectioned-form\"\n [attr.role]=\"ariaRole\"\n (window:resize)=\"tabService.updateContent()\"\n>\n <div\n *ngIf=\"maintainSectionContent || tabsVisible()\"\n class=\"sky-sectioned-form-tabs\"\n [ngClass]=\"{ 'sky-sectioned-form-tabs-hidden': !tabsVisible() }\"\n [@tabEnter]=\"tabService.animationTabsVisibleState\"\n >\n <ng-content></ng-content>\n </div>\n <div\n *ngIf=\"maintainSectionContent || tabService.contentVisible()\"\n class=\"sky-sectioned-form-content\"\n [ngClass]=\"{\n 'sky-sectioned-form-content-hidden': !tabService.contentVisible()\n }\"\n [@contentEnter]=\"tabService.animationContentVisibleState\"\n #skySectionSideContent\n ></div>\n</div>\n"]}
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
import { CommonModule } from '@angular/common';
|
|
2
|
-
import { NgModule } from '@angular/core';
|
|
3
|
-
import { SkyCheckboxModule } from '@skyux/forms';
|
|
4
|
-
import { SkyThemeModule } from '@skyux/theme';
|
|
5
|
-
import { SkyVerticalTabsetModule } from '../vertical-tabset/vertical-tabset.module';
|
|
6
|
-
import { SkySectionedFormSectionComponent } from './sectioned-form-section.component';
|
|
7
|
-
import { SkySectionedFormComponent } from './sectioned-form.component';
|
|
8
|
-
import * as i0 from "@angular/core";
|
|
9
|
-
export class SkySectionedFormModule {
|
|
10
|
-
}
|
|
11
|
-
SkySectionedFormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySectionedFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
12
|
-
SkySectionedFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySectionedFormModule, declarations: [SkySectionedFormComponent, SkySectionedFormSectionComponent], imports: [CommonModule,
|
|
13
|
-
SkyCheckboxModule,
|
|
14
|
-
SkyThemeModule,
|
|
15
|
-
SkyVerticalTabsetModule], exports: [SkySectionedFormComponent, SkySectionedFormSectionComponent] });
|
|
16
|
-
SkySectionedFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySectionedFormModule, imports: [[
|
|
17
|
-
CommonModule,
|
|
18
|
-
SkyCheckboxModule,
|
|
19
|
-
SkyThemeModule,
|
|
20
|
-
SkyVerticalTabsetModule,
|
|
21
|
-
]] });
|
|
22
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySectionedFormModule, decorators: [{
|
|
23
|
-
type: NgModule,
|
|
24
|
-
args: [{
|
|
25
|
-
declarations: [SkySectionedFormComponent, SkySectionedFormSectionComponent],
|
|
26
|
-
imports: [
|
|
27
|
-
CommonModule,
|
|
28
|
-
SkyCheckboxModule,
|
|
29
|
-
SkyThemeModule,
|
|
30
|
-
SkyVerticalTabsetModule,
|
|
31
|
-
],
|
|
32
|
-
exports: [SkySectionedFormComponent, SkySectionedFormSectionComponent],
|
|
33
|
-
}]
|
|
34
|
-
}] });
|
|
35
|
-
//# sourceMappingURL=sectioned-form.module.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"sectioned-form.module.js","sourceRoot":"","sources":["../../../../../../../../libs/components/tabs/src/lib/modules/sectioned-form/sectioned-form.module.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C,OAAO,EAAE,uBAAuB,EAAE,MAAM,2CAA2C,CAAC;AAEpF,OAAO,EAAE,gCAAgC,EAAE,MAAM,oCAAoC,CAAC;AACtF,OAAO,EAAE,yBAAyB,EAAE,MAAM,4BAA4B,CAAC;;AAYvE,MAAM,OAAO,sBAAsB;;oHAAtB,sBAAsB;qHAAtB,sBAAsB,iBATlB,yBAAyB,EAAE,gCAAgC,aAExE,YAAY;QACZ,iBAAiB;QACjB,cAAc;QACd,uBAAuB,aAEf,yBAAyB,EAAE,gCAAgC;qHAE1D,sBAAsB,YARxB;YACP,YAAY;YACZ,iBAAiB;YACjB,cAAc;YACd,uBAAuB;SACxB;4FAGU,sBAAsB;kBAVlC,QAAQ;mBAAC;oBACR,YAAY,EAAE,CAAC,yBAAyB,EAAE,gCAAgC,CAAC;oBAC3E,OAAO,EAAE;wBACP,YAAY;wBACZ,iBAAiB;wBACjB,cAAc;wBACd,uBAAuB;qBACxB;oBACD,OAAO,EAAE,CAAC,yBAAyB,EAAE,gCAAgC,CAAC;iBACvE","sourcesContent":["import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyCheckboxModule } from '@skyux/forms';\nimport { SkyThemeModule } from '@skyux/theme';\n\nimport { SkyVerticalTabsetModule } from '../vertical-tabset/vertical-tabset.module';\n\nimport { SkySectionedFormSectionComponent } from './sectioned-form-section.component';\nimport { SkySectionedFormComponent } from './sectioned-form.component';\n\n@NgModule({\n declarations: [SkySectionedFormComponent, SkySectionedFormSectionComponent],\n imports: [\n CommonModule,\n SkyCheckboxModule,\n SkyThemeModule,\n SkyVerticalTabsetModule,\n ],\n exports: [SkySectionedFormComponent, SkySectionedFormSectionComponent],\n})\nexport class SkySectionedFormModule {}\n"]}
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
import { Injectable } from '@angular/core';
|
|
2
|
-
import { BehaviorSubject } from 'rxjs';
|
|
3
|
-
import * as i0 from "@angular/core";
|
|
4
|
-
export class SkySectionedFormService {
|
|
5
|
-
constructor() {
|
|
6
|
-
/**
|
|
7
|
-
* @internal
|
|
8
|
-
*/
|
|
9
|
-
this.invalidChange = new BehaviorSubject(undefined);
|
|
10
|
-
/**
|
|
11
|
-
* @internal
|
|
12
|
-
*/
|
|
13
|
-
this.requiredChange = new BehaviorSubject(undefined);
|
|
14
|
-
}
|
|
15
|
-
/**
|
|
16
|
-
* Sets the current section's invalid state based on the `isInvalid` parameter.
|
|
17
|
-
* This method is used within a `sky-sectioned-form-section` element.
|
|
18
|
-
*/
|
|
19
|
-
invalidFieldChanged(isInvalid) {
|
|
20
|
-
this.invalidChange.next(isInvalid);
|
|
21
|
-
}
|
|
22
|
-
/**
|
|
23
|
-
* Sets the current section's required state based on the `isRequired` parameter.
|
|
24
|
-
* This method is used within a `sky-sectioned-form-section` element.
|
|
25
|
-
*/
|
|
26
|
-
requiredFieldChanged(isRequired) {
|
|
27
|
-
this.requiredChange.next(isRequired);
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
SkySectionedFormService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySectionedFormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
31
|
-
SkySectionedFormService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySectionedFormService });
|
|
32
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySectionedFormService, decorators: [{
|
|
33
|
-
type: Injectable
|
|
34
|
-
}] });
|
|
35
|
-
//# sourceMappingURL=sectioned-form.service.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"sectioned-form.service.js","sourceRoot":"","sources":["../../../../../../../../libs/components/tabs/src/lib/modules/sectioned-form/sectioned-form.service.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,OAAO,EAAE,eAAe,EAAE,MAAM,MAAM,CAAC;;AAGvC,MAAM,OAAO,uBAAuB;IADpC;QAEE;;WAEG;QACI,kBAAa,GAA6B,IAAI,eAAe,CAClE,SAAS,CACV,CAAC;QACF;;WAEG;QACI,mBAAc,GAA6B,IAAI,eAAe,CACnE,SAAS,CACV,CAAC;KAiBH;IAfC;;;OAGG;IACI,mBAAmB,CAAC,SAAkB;QAC3C,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IACrC,CAAC;IAED;;;OAGG;IACI,oBAAoB,CAAC,UAAmB;QAC7C,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IACvC,CAAC;;qHA5BU,uBAAuB;yHAAvB,uBAAuB;4FAAvB,uBAAuB;kBADnC,UAAU","sourcesContent":["import { Injectable } from '@angular/core';\n\nimport { BehaviorSubject } from 'rxjs';\n\n@Injectable()\nexport class SkySectionedFormService {\n /**\n * @internal\n */\n public invalidChange: BehaviorSubject<boolean> = new BehaviorSubject(\n undefined\n );\n /**\n * @internal\n */\n public requiredChange: BehaviorSubject<boolean> = new BehaviorSubject(\n undefined\n );\n\n /**\n * Sets the current section's invalid state based on the `isInvalid` parameter.\n * This method is used within a `sky-sectioned-form-section` element.\n */\n public invalidFieldChanged(isInvalid: boolean): void {\n this.invalidChange.next(isInvalid);\n }\n\n /**\n * Sets the current section's required state based on the `isRequired` parameter.\n * This method is used within a `sky-sectioned-form-section` element.\n */\n public requiredFieldChanged(isRequired: boolean): void {\n this.requiredChange.next(isRequired);\n }\n}\n"]}
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* NOTICE: DO NOT MODIFY THIS FILE!
|
|
3
|
-
* The contents of this file were automatically generated by
|
|
4
|
-
* the 'ng generate @skyux/i18n:lib-resources-module modules/shared/sky-tabs' schematic.
|
|
5
|
-
* To update this file, simply rerun the command.
|
|
6
|
-
*/
|
|
7
|
-
import { NgModule } from '@angular/core';
|
|
8
|
-
import { SKY_LIB_RESOURCES_PROVIDERS, SkyI18nModule, getLibStringForLocale, } from '@skyux/i18n';
|
|
9
|
-
import * as i0 from "@angular/core";
|
|
10
|
-
const RESOURCES = {
|
|
11
|
-
'EN-US': {
|
|
12
|
-
skyux_tab_add: { message: 'Add tab' },
|
|
13
|
-
skyux_tab_close: { message: 'Close {0} tab' },
|
|
14
|
-
skyux_tabs_navigator_next: { message: 'Next' },
|
|
15
|
-
skyux_tabs_navigator_previous: { message: 'Previous' },
|
|
16
|
-
skyux_tab_open: { message: 'Open tab' },
|
|
17
|
-
skyux_vertical_tabs_show_tabs_text: { message: 'Tab list' },
|
|
18
|
-
},
|
|
19
|
-
};
|
|
20
|
-
export class SkyTabsResourcesProvider {
|
|
21
|
-
getString(localeInfo, name) {
|
|
22
|
-
return getLibStringForLocale(RESOURCES, localeInfo.locale, name);
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
/**
|
|
26
|
-
* Import into any component library module that needs to use resource strings.
|
|
27
|
-
*/
|
|
28
|
-
export class SkyTabsResourcesModule {
|
|
29
|
-
}
|
|
30
|
-
SkyTabsResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTabsResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
31
|
-
SkyTabsResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTabsResourcesModule, exports: [SkyI18nModule] });
|
|
32
|
-
SkyTabsResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTabsResourcesModule, providers: [
|
|
33
|
-
{
|
|
34
|
-
provide: SKY_LIB_RESOURCES_PROVIDERS,
|
|
35
|
-
useClass: SkyTabsResourcesProvider,
|
|
36
|
-
multi: true,
|
|
37
|
-
},
|
|
38
|
-
], imports: [SkyI18nModule] });
|
|
39
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTabsResourcesModule, decorators: [{
|
|
40
|
-
type: NgModule,
|
|
41
|
-
args: [{
|
|
42
|
-
exports: [SkyI18nModule],
|
|
43
|
-
providers: [
|
|
44
|
-
{
|
|
45
|
-
provide: SKY_LIB_RESOURCES_PROVIDERS,
|
|
46
|
-
useClass: SkyTabsResourcesProvider,
|
|
47
|
-
multi: true,
|
|
48
|
-
},
|
|
49
|
-
],
|
|
50
|
-
}]
|
|
51
|
-
}] });
|
|
52
|
-
//# sourceMappingURL=sky-tabs-resources.module.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"sky-tabs-resources.module.js","sourceRoot":"","sources":["../../../../../../../../libs/components/tabs/src/lib/modules/shared/sky-tabs-resources.module.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EACL,2BAA2B,EAE3B,aAAa,EAGb,qBAAqB,GACtB,MAAM,aAAa,CAAC;;AAErB,MAAM,SAAS,GAA0C;IACvD,OAAO,EAAE;QACP,aAAa,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QACrC,eAAe,EAAE,EAAE,OAAO,EAAE,eAAe,EAAE;QAC7C,yBAAyB,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC9C,6BAA6B,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE;QACtD,cAAc,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE;QACvC,kCAAkC,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE;KAC5D;CACF,CAAC;AAEF,MAAM,OAAO,wBAAwB;IAC5B,SAAS,CAAC,UAA4B,EAAE,IAAY;QACzD,OAAO,qBAAqB,CAAC,SAAS,EAAE,UAAU,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IACnE,CAAC;CACF;AAED;;GAEG;AAWH,MAAM,OAAO,sBAAsB;;oHAAtB,sBAAsB;qHAAtB,sBAAsB,YATvB,aAAa;qHASZ,sBAAsB,aARtB;QACT;YACE,OAAO,EAAE,2BAA2B;YACpC,QAAQ,EAAE,wBAAwB;YAClC,KAAK,EAAE,IAAI;SACZ;KACF,YAPS,aAAa;4FASZ,sBAAsB;kBAVlC,QAAQ;mBAAC;oBACR,OAAO,EAAE,CAAC,aAAa,CAAC;oBACxB,SAAS,EAAE;wBACT;4BACE,OAAO,EAAE,2BAA2B;4BACpC,QAAQ,EAAE,wBAAwB;4BAClC,KAAK,EAAE,IAAI;yBACZ;qBACF;iBACF","sourcesContent":["/**\n * NOTICE: DO NOT MODIFY THIS FILE!\n * The contents of this file were automatically generated by\n * the 'ng generate @skyux/i18n:lib-resources-module modules/shared/sky-tabs' schematic.\n * To update this file, simply rerun the command.\n */\nimport { NgModule } from '@angular/core';\nimport {\n SKY_LIB_RESOURCES_PROVIDERS,\n SkyAppLocaleInfo,\n SkyI18nModule,\n SkyLibResources,\n SkyLibResourcesProvider,\n getLibStringForLocale,\n} from '@skyux/i18n';\n\nconst RESOURCES: { [locale: string]: SkyLibResources } = {\n 'EN-US': {\n skyux_tab_add: { message: 'Add tab' },\n skyux_tab_close: { message: 'Close {0} tab' },\n skyux_tabs_navigator_next: { message: 'Next' },\n skyux_tabs_navigator_previous: { message: 'Previous' },\n skyux_tab_open: { message: 'Open tab' },\n skyux_vertical_tabs_show_tabs_text: { message: 'Tab list' },\n },\n};\n\nexport class SkyTabsResourcesProvider implements SkyLibResourcesProvider {\n public getString(localeInfo: SkyAppLocaleInfo, name: string): string {\n return getLibStringForLocale(RESOURCES, localeInfo.locale, name);\n }\n}\n\n/**\n * Import into any component library module that needs to use resource strings.\n */\n@NgModule({\n exports: [SkyI18nModule],\n providers: [\n {\n provide: SKY_LIB_RESOURCES_PROVIDERS,\n useClass: SkyTabsResourcesProvider,\n multi: true,\n },\n ],\n})\nexport class SkyTabsResourcesModule {}\n"]}
|
|
@@ -1,76 +0,0 @@
|
|
|
1
|
-
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, ViewEncapsulation, } from '@angular/core';
|
|
2
|
-
import * as i0 from "@angular/core";
|
|
3
|
-
import * as i1 from "@skyux/indicators";
|
|
4
|
-
import * as i2 from "@angular/common";
|
|
5
|
-
import * as i3 from "@skyux/i18n";
|
|
6
|
-
/**
|
|
7
|
-
* @internal
|
|
8
|
-
*/
|
|
9
|
-
export class SkyTabButtonComponent {
|
|
10
|
-
constructor() {
|
|
11
|
-
this.buttonClick = new EventEmitter();
|
|
12
|
-
this.closeClick = new EventEmitter();
|
|
13
|
-
}
|
|
14
|
-
onButtonClick(event) {
|
|
15
|
-
if (!this.disabled) {
|
|
16
|
-
this.buttonClick.emit();
|
|
17
|
-
event.preventDefault();
|
|
18
|
-
}
|
|
19
|
-
}
|
|
20
|
-
onTabButtonKeyDown(event) {
|
|
21
|
-
/*istanbul ignore else */
|
|
22
|
-
if (event.key) {
|
|
23
|
-
switch (event.key.toUpperCase()) {
|
|
24
|
-
case ' ':
|
|
25
|
-
case 'ENTER':
|
|
26
|
-
this.onButtonClick(event);
|
|
27
|
-
break;
|
|
28
|
-
/* istanbul ignore next */
|
|
29
|
-
default:
|
|
30
|
-
break;
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
onCloseClick(event) {
|
|
35
|
-
this.closeClick.emit();
|
|
36
|
-
// Prevent the click event from bubbling up to the anchor tag;
|
|
37
|
-
// otherwise it will trigger a page refresh.
|
|
38
|
-
event.stopPropagation();
|
|
39
|
-
event.preventDefault();
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
SkyTabButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTabButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
43
|
-
SkyTabButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyTabButtonComponent, selector: "sky-tab-button", inputs: { active: "active", ariaControls: "ariaControls", buttonHref: "buttonHref", buttonId: "buttonId", buttonText: "buttonText", buttonTextCount: "buttonTextCount", closeable: "closeable", disabled: "disabled", tabStyle: "tabStyle" }, outputs: { buttonClick: "buttonClick", closeClick: "closeClick" }, ngImport: i0, template: "<div\n class=\"sky-btn-tab-wrapper\"\n [ngClass]=\"{\n 'sky-btn-tab-wrapper-selected': active,\n 'sky-btn-tab-wrapper-disabled': disabled\n }\"\n>\n <a\n class=\"sky-btn-tab\"\n role=\"tab\"\n [attr.aria-controls]=\"ariaControls\"\n [attr.aria-disabled]=\"disabled\"\n [attr.aria-selected]=\"active\"\n [attr.href]=\"buttonHref\"\n [id]=\"buttonId\"\n [ngClass]=\"{\n 'sky-btn-tab-wizard': tabStyle === 'wizard',\n 'sky-btn-tab-selected': active,\n 'sky-btn-tab-disabled': disabled,\n 'sky-tab-btn-closeable': closeable\n }\"\n [tabindex]=\"disabled ? '-1' : '0'\"\n (click)=\"onButtonClick($event)\"\n (keydown)=\"onTabButtonKeyDown($event)\"\n >\n <span class=\"sky-tab-heading\">\n {{ buttonText }}\n <span *ngIf=\"buttonTextCount !== undefined\" class=\"sky-tab-header-count\">\n {{ buttonTextCount }}\n </span>\n </span>\n </a>\n\n <button\n *ngIf=\"closeable\"\n class=\"sky-btn-tab-close\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_tab_close' | skyLibResources: buttonText\"\n [disabled]=\"disabled\"\n [ngClass]=\"{\n 'sky-btn-tab-close-disabled': disabled\n }\"\n (click)=\"onCloseClick($event)\"\n >\n <sky-icon icon=\"remove\"></sky-icon>\n </button>\n</div>\n", styles: [".sky-btn-tab-wrapper{display:inline-block;position:relative;margin-right:5px}.sky-btn-tab-wrapper .sky-btn-tab-close{position:absolute;top:10px;right:10px;color:#686c73}.sky-btn-tab-wrapper .sky-btn-tab-close:hover{color:#212327;transition:color .15s}.sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#fff}.sky-tab-btn-closeable{padding-right:43px}:host-context(.sky-theme-modern) .sky-btn-tab-wrapper{margin-right:10px}:host-context(.sky-theme-modern) .sky-btn-tab-wrapper .sky-btn-tab-close{top:12px;right:10px}:host-context(.sky-theme-modern) .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#686c73}:host-context(.sky-theme-modern) .sky-tab-btn-closeable{padding-right:44px}.sky-theme-modern .sky-btn-tab-wrapper{margin-right:10px}.sky-theme-modern .sky-btn-tab-wrapper .sky-btn-tab-close{top:12px;right:10px}.sky-theme-modern .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#686c73}.sky-theme-modern .sky-tab-btn-closeable{padding-right:44px}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-btn-tab-wrapper .sky-btn-tab-close{color:#eeeeef}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#eeeeef}.sky-theme-modern.sky-theme-mode-dark .sky-btn-tab-wrapper .sky-btn-tab-close{color:#eeeeef}.sky-theme-modern.sky-theme-mode-dark .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#eeeeef}\n"], components: [{ type: i1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "skyLibResources": i3.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
44
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTabButtonComponent, decorators: [{
|
|
45
|
-
type: Component,
|
|
46
|
-
args: [{
|
|
47
|
-
selector: 'sky-tab-button',
|
|
48
|
-
templateUrl: './tab-button.component.html',
|
|
49
|
-
styleUrls: ['./tab-button.component.scss'],
|
|
50
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
51
|
-
encapsulation: ViewEncapsulation.None,
|
|
52
|
-
}]
|
|
53
|
-
}], propDecorators: { active: [{
|
|
54
|
-
type: Input
|
|
55
|
-
}], ariaControls: [{
|
|
56
|
-
type: Input
|
|
57
|
-
}], buttonHref: [{
|
|
58
|
-
type: Input
|
|
59
|
-
}], buttonId: [{
|
|
60
|
-
type: Input
|
|
61
|
-
}], buttonText: [{
|
|
62
|
-
type: Input
|
|
63
|
-
}], buttonTextCount: [{
|
|
64
|
-
type: Input
|
|
65
|
-
}], closeable: [{
|
|
66
|
-
type: Input
|
|
67
|
-
}], disabled: [{
|
|
68
|
-
type: Input
|
|
69
|
-
}], tabStyle: [{
|
|
70
|
-
type: Input
|
|
71
|
-
}], buttonClick: [{
|
|
72
|
-
type: Output
|
|
73
|
-
}], closeClick: [{
|
|
74
|
-
type: Output
|
|
75
|
-
}] } });
|
|
76
|
-
//# sourceMappingURL=tab-button.component.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"tab-button.component.js","sourceRoot":"","sources":["../../../../../../../../libs/components/tabs/src/lib/modules/tabs/tab-button.component.ts","../../../../../../../../libs/components/tabs/src/lib/modules/tabs/tab-button.component.html"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,YAAY,EACZ,KAAK,EACL,MAAM,EACN,iBAAiB,GAClB,MAAM,eAAe,CAAC;;;;;AAIvB;;GAEG;AAQH,MAAM,OAAO,qBAAqB;IAPlC;QAoCS,gBAAW,GAAG,IAAI,YAAY,EAAQ,CAAC;QAGvC,eAAU,GAAG,IAAI,YAAY,EAAQ,CAAC;KAgC9C;IA9BQ,aAAa,CAAC,KAAU;QAC7B,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;YACxB,KAAK,CAAC,cAAc,EAAE,CAAC;SACxB;IACH,CAAC;IAEM,kBAAkB,CAAC,KAAoB;QAC5C,yBAAyB;QACzB,IAAI,KAAK,CAAC,GAAG,EAAE;YACb,QAAQ,KAAK,CAAC,GAAG,CAAC,WAAW,EAAE,EAAE;gBAC/B,KAAK,GAAG,CAAC;gBACT,KAAK,OAAO;oBACV,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;oBAC1B,MAAM;gBACR,0BAA0B;gBAC1B;oBACE,MAAM;aACT;SACF;IACH,CAAC;IAEM,YAAY,CAAC,KAAU;QAC5B,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;QAEvB,8DAA8D;QAC9D,4CAA4C;QAC5C,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,KAAK,CAAC,cAAc,EAAE,CAAC;IACzB,CAAC;;mHA/DU,qBAAqB;uGAArB,qBAAqB,uWCrBlC,6xCA+CA;4FD1Ba,qBAAqB;kBAPjC,SAAS;mBAAC;oBACT,QAAQ,EAAE,gBAAgB;oBAC1B,WAAW,EAAE,6BAA6B;oBAC1C,SAAS,EAAE,CAAC,6BAA6B,CAAC;oBAC1C,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,aAAa,EAAE,iBAAiB,CAAC,IAAI;iBACtC;8BAGQ,MAAM;sBADZ,KAAK;gBAIC,YAAY;sBADlB,KAAK;gBAIC,UAAU;sBADhB,KAAK;gBAIC,QAAQ;sBADd,KAAK;gBAIC,UAAU;sBADhB,KAAK;gBAIC,eAAe;sBADrB,KAAK;gBAIC,SAAS;sBADf,KAAK;gBAIC,QAAQ;sBADd,KAAK;gBAIC,QAAQ;sBADd,KAAK;gBAIC,WAAW;sBADjB,MAAM;gBAIA,UAAU;sBADhB,MAAM","sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n Input,\n Output,\n ViewEncapsulation,\n} from '@angular/core';\n\nimport { SkyTabsetStyle } from './tabset-style';\n\n/**\n * @internal\n */\n@Component({\n selector: 'sky-tab-button',\n templateUrl: './tab-button.component.html',\n styleUrls: ['./tab-button.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n})\nexport class SkyTabButtonComponent {\n @Input()\n public active: boolean;\n\n @Input()\n public ariaControls: string;\n\n @Input()\n public buttonHref: string;\n\n @Input()\n public buttonId: string;\n\n @Input()\n public buttonText: string;\n\n @Input()\n public buttonTextCount: string | undefined;\n\n @Input()\n public closeable: boolean;\n\n @Input()\n public disabled: boolean;\n\n @Input()\n public tabStyle: SkyTabsetStyle;\n\n @Output()\n public buttonClick = new EventEmitter<void>();\n\n @Output()\n public closeClick = new EventEmitter<void>();\n\n public onButtonClick(event: any): void {\n if (!this.disabled) {\n this.buttonClick.emit();\n event.preventDefault();\n }\n }\n\n public onTabButtonKeyDown(event: KeyboardEvent): void {\n /*istanbul ignore else */\n if (event.key) {\n switch (event.key.toUpperCase()) {\n case ' ':\n case 'ENTER':\n this.onButtonClick(event);\n break;\n /* istanbul ignore next */\n default:\n break;\n }\n }\n }\n\n public onCloseClick(event: any): void {\n this.closeClick.emit();\n\n // Prevent the click event from bubbling up to the anchor tag;\n // otherwise it will trigger a page refresh.\n event.stopPropagation();\n event.preventDefault();\n }\n}\n","<div\n class=\"sky-btn-tab-wrapper\"\n [ngClass]=\"{\n 'sky-btn-tab-wrapper-selected': active,\n 'sky-btn-tab-wrapper-disabled': disabled\n }\"\n>\n <a\n class=\"sky-btn-tab\"\n role=\"tab\"\n [attr.aria-controls]=\"ariaControls\"\n [attr.aria-disabled]=\"disabled\"\n [attr.aria-selected]=\"active\"\n [attr.href]=\"buttonHref\"\n [id]=\"buttonId\"\n [ngClass]=\"{\n 'sky-btn-tab-wizard': tabStyle === 'wizard',\n 'sky-btn-tab-selected': active,\n 'sky-btn-tab-disabled': disabled,\n 'sky-tab-btn-closeable': closeable\n }\"\n [tabindex]=\"disabled ? '-1' : '0'\"\n (click)=\"onButtonClick($event)\"\n (keydown)=\"onTabButtonKeyDown($event)\"\n >\n <span class=\"sky-tab-heading\">\n {{ buttonText }}\n <span *ngIf=\"buttonTextCount !== undefined\" class=\"sky-tab-header-count\">\n {{ buttonTextCount }}\n </span>\n </span>\n </a>\n\n <button\n *ngIf=\"closeable\"\n class=\"sky-btn-tab-close\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_tab_close' | skyLibResources: buttonText\"\n [disabled]=\"disabled\"\n [ngClass]=\"{\n 'sky-btn-tab-close-disabled': disabled\n }\"\n (click)=\"onCloseClick($event)\"\n >\n <sky-icon icon=\"remove\"></sky-icon>\n </button>\n</div>\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"tab-index.js","sourceRoot":"","sources":["../../../../../../../../libs/components/tabs/src/lib/modules/tabs/tab-index.ts"],"names":[],"mappings":"","sourcesContent":["export type SkyTabIndex = string | number;\n"]}
|