@skyux/tabs 5.0.4 → 5.1.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/bundles/skyux-tabs.umd.js +147 -181
- package/documentation.json +476 -425
- package/esm2015/modules/sectioned-form/sectioned-form-section.component.js +9 -13
- package/esm2015/modules/sectioned-form/sectioned-form.component.js +3 -3
- package/esm2015/modules/sectioned-form/sectioned-form.module.js +4 -4
- package/esm2015/modules/sectioned-form/sectioned-form.service.js +3 -3
- package/esm2015/modules/shared/sky-tabs-resources.module.js +4 -4
- package/esm2015/modules/tabs/tab-button.component.js +17 -6
- package/esm2015/modules/tabs/tab.component.js +3 -3
- package/esm2015/modules/tabs/tabs.module.js +4 -4
- package/esm2015/modules/tabs/tabset-adapter.service.js +3 -3
- package/esm2015/modules/tabs/tabset-nav-button.component.js +3 -3
- package/esm2015/modules/tabs/tabset-permalink.service.js +3 -3
- package/esm2015/modules/tabs/tabset.component.js +5 -5
- package/esm2015/modules/tabs/tabset.service.js +3 -3
- package/esm2015/modules/vertical-tabset/vertical-tab-media-query.service.js +3 -3
- package/esm2015/modules/vertical-tabset/vertical-tab.component.js +29 -20
- package/esm2015/modules/vertical-tabset/vertical-tabset-adapter.service.js +3 -3
- package/esm2015/modules/vertical-tabset/vertical-tabset-group.component.js +8 -54
- package/esm2015/modules/vertical-tabset/vertical-tabset.component.js +11 -5
- package/esm2015/modules/vertical-tabset/vertical-tabset.module.js +13 -9
- package/esm2015/modules/vertical-tabset/vertical-tabset.service.js +3 -3
- package/fesm2015/skyux-tabs.js +128 -149
- package/fesm2015/skyux-tabs.js.map +1 -1
- package/modules/sectioned-form/sectioned-form-section.component.d.ts +0 -3
- package/modules/tabs/tab-button.component.d.ts +2 -2
- package/modules/tabs/tabset.component.d.ts +1 -1
- package/modules/vertical-tabset/vertical-tab.component.d.ts +8 -13
- package/modules/vertical-tabset/vertical-tabset-group.component.d.ts +2 -2
- package/modules/vertical-tabset/vertical-tabset.component.d.ts +17 -2
- package/modules/vertical-tabset/vertical-tabset.module.d.ts +4 -3
- package/package.json +9 -9
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
(function (global, factory) {
|
|
2
|
-
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/animations'), require('rxjs'), require('rxjs/operators'), require('@skyux/core'), require('@skyux/indicators'), require('@skyux/theme'), require('@skyux/i18n'), require('@skyux/forms'), require('@angular/router'), require('@skyux/popovers')) :
|
|
3
|
-
typeof define === 'function' && define.amd ? define('@skyux/tabs', ['exports', '@angular/core', '@angular/common', '@angular/animations', 'rxjs', 'rxjs/operators', '@skyux/core', '@skyux/indicators', '@skyux/theme', '@skyux/i18n', '@skyux/forms', '@angular/router', '@skyux/popovers'], factory) :
|
|
4
|
-
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.skyux = global.skyux || {}, global.skyux.tabs = {}), global.ng.core, global.ng.common, global.ng.animations, global.rxjs, global.rxjs.operators, global.i1, global.i4, global.
|
|
5
|
-
})(this, (function (exports, i0, i2, animations, rxjs, operators, i1, i4,
|
|
2
|
+
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/animations'), require('rxjs'), require('rxjs/operators'), require('@skyux/core'), require('@skyux/indicators'), require('@skyux/theme'), require('@skyux/i18n'), require('@skyux/animations'), require('@skyux/forms'), require('@angular/router'), require('@skyux/popovers')) :
|
|
3
|
+
typeof define === 'function' && define.amd ? define('@skyux/tabs', ['exports', '@angular/core', '@angular/common', '@angular/animations', 'rxjs', 'rxjs/operators', '@skyux/core', '@skyux/indicators', '@skyux/theme', '@skyux/i18n', '@skyux/animations', '@skyux/forms', '@angular/router', '@skyux/popovers'], factory) :
|
|
4
|
+
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.skyux = global.skyux || {}, global.skyux.tabs = {}), global.ng.core, global.ng.common, global.ng.animations, global.rxjs, global.rxjs.operators, global.i1, global.i4, global.i8, global.i3, global.animations$1, global.forms, global.ng.router, global.i4$1));
|
|
5
|
+
})(this, (function (exports, i0, i2, animations, rxjs, operators, i1, i4, i8, i3, animations$1, forms, i1$1, i4$1) { 'use strict';
|
|
6
6
|
|
|
7
7
|
function _interopNamespace(e) {
|
|
8
8
|
if (e && e.__esModule) return e;
|
|
@@ -26,10 +26,10 @@
|
|
|
26
26
|
var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
|
|
27
27
|
var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
|
|
28
28
|
var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
|
|
29
|
-
var
|
|
29
|
+
var i8__namespace = /*#__PURE__*/_interopNamespace(i8);
|
|
30
30
|
var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
|
|
31
31
|
var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$1);
|
|
32
|
-
var i4__namespace$
|
|
32
|
+
var i4__namespace$1 = /*#__PURE__*/_interopNamespace(i4$1);
|
|
33
33
|
|
|
34
34
|
var VISIBLE_STATE = 'shown';
|
|
35
35
|
var HIDDEN_STATE = 'void';
|
|
@@ -199,9 +199,9 @@
|
|
|
199
199
|
};
|
|
200
200
|
return SkyVerticalTabsetService;
|
|
201
201
|
}());
|
|
202
|
-
SkyVerticalTabsetService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
203
|
-
SkyVerticalTabsetService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.
|
|
204
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
202
|
+
SkyVerticalTabsetService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyVerticalTabsetService, deps: [{ token: i1__namespace.SkyMediaQueryService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
|
|
203
|
+
SkyVerticalTabsetService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyVerticalTabsetService });
|
|
204
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyVerticalTabsetService, decorators: [{
|
|
205
205
|
type: i0.Injectable
|
|
206
206
|
}], ctorParameters: function () { return [{ type: i1__namespace.SkyMediaQueryService }]; } });
|
|
207
207
|
|
|
@@ -272,8 +272,8 @@
|
|
|
272
272
|
};
|
|
273
273
|
return SkySectionedFormComponent;
|
|
274
274
|
}());
|
|
275
|
-
SkySectionedFormComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
276
|
-
SkySectionedFormComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
275
|
+
SkySectionedFormComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySectionedFormComponent, deps: [{ token: SkyVerticalTabsetService }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
276
|
+
SkySectionedFormComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
|
|
277
277
|
animations.trigger('tabEnter', [
|
|
278
278
|
animations.transition(HIDDEN_STATE + " => " + VISIBLE_STATE, [
|
|
279
279
|
animations.style({ transform: 'translate(-100%)' }),
|
|
@@ -287,7 +287,7 @@
|
|
|
287
287
|
]),
|
|
288
288
|
]),
|
|
289
289
|
], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
|
|
290
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
290
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySectionedFormComponent, decorators: [{
|
|
291
291
|
type: i0.Component,
|
|
292
292
|
args: [{
|
|
293
293
|
selector: 'sky-sectioned-form',
|
|
@@ -386,9 +386,9 @@
|
|
|
386
386
|
};
|
|
387
387
|
return SkyVerticalTabMediaQueryService;
|
|
388
388
|
}());
|
|
389
|
-
SkyVerticalTabMediaQueryService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
390
|
-
SkyVerticalTabMediaQueryService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.
|
|
391
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
389
|
+
SkyVerticalTabMediaQueryService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyVerticalTabMediaQueryService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
|
|
390
|
+
SkyVerticalTabMediaQueryService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyVerticalTabMediaQueryService });
|
|
391
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyVerticalTabMediaQueryService, decorators: [{
|
|
392
392
|
type: i0.Injectable
|
|
393
393
|
}], ctorParameters: function () { return []; } });
|
|
394
394
|
|
|
@@ -432,12 +432,13 @@
|
|
|
432
432
|
};
|
|
433
433
|
return SkyVerticalTabsetAdapterService;
|
|
434
434
|
}());
|
|
435
|
-
SkyVerticalTabsetAdapterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
436
|
-
SkyVerticalTabsetAdapterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.
|
|
437
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
435
|
+
SkyVerticalTabsetAdapterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyVerticalTabsetAdapterService, deps: [{ token: i0__namespace.RendererFactory2 }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
|
|
436
|
+
SkyVerticalTabsetAdapterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyVerticalTabsetAdapterService });
|
|
437
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyVerticalTabsetAdapterService, decorators: [{
|
|
438
438
|
type: i0.Injectable
|
|
439
439
|
}], ctorParameters: function () { return [{ type: i0__namespace.RendererFactory2 }]; } });
|
|
440
440
|
|
|
441
|
+
var nextId$2 = 0;
|
|
441
442
|
var SkyVerticalTabComponent = /** @class */ (function () {
|
|
442
443
|
function SkyVerticalTabComponent(adapterService, changeRef, tabsetService, verticalTabMediaQueryService) {
|
|
443
444
|
this.adapterService = adapterService;
|
|
@@ -457,27 +458,17 @@
|
|
|
457
458
|
* @internal This is used for sectioned forms and is not currently a supported design for pure vertical tabs.
|
|
458
459
|
*/
|
|
459
460
|
this.errorIndicator = false;
|
|
461
|
+
/**
|
|
462
|
+
* Specifies an ID for the tab.
|
|
463
|
+
* @deprecated Now that the vertical tabs provide aria labels automatically, this input is no longer necessary.
|
|
464
|
+
*/
|
|
465
|
+
this.tabId = "sky-vertical-tab-" + ++nextId$2;
|
|
460
466
|
this.isMobile = false;
|
|
461
467
|
this._contentRendered = false;
|
|
462
468
|
this._mobileSubscription = new rxjs.Subject();
|
|
463
469
|
this._ngUnsubscribe = new rxjs.Subject();
|
|
464
470
|
this._showTabRightArrow = false;
|
|
465
471
|
}
|
|
466
|
-
Object.defineProperty(SkyVerticalTabComponent.prototype, "ariaControls", {
|
|
467
|
-
/**
|
|
468
|
-
* Specifies the HTML element ID (without the leading `#`) of the element that contains
|
|
469
|
-
* the content that the vertical tab displays, which corresponds to the `tabId`. This property
|
|
470
|
-
* [supports accessibility rules for disclosures](https://www.w3.org/TR/wai-aria-practices-1.1/#disclosure).
|
|
471
|
-
*/
|
|
472
|
-
get: function () {
|
|
473
|
-
return this.isMobile ? undefined : this._ariaControls;
|
|
474
|
-
},
|
|
475
|
-
set: function (value) {
|
|
476
|
-
this._ariaControls = value;
|
|
477
|
-
},
|
|
478
|
-
enumerable: false,
|
|
479
|
-
configurable: true
|
|
480
|
-
});
|
|
481
472
|
Object.defineProperty(SkyVerticalTabComponent.prototype, "ariaRole", {
|
|
482
473
|
/**
|
|
483
474
|
* Specifies an ARIA role for the vertical tab
|
|
@@ -486,6 +477,8 @@
|
|
|
486
477
|
* an ARIA role indicates what an item represents on a web page, see the
|
|
487
478
|
* [WAI-ARIA roles model](https://www.w3.org/WAI/PF/aria/roles).
|
|
488
479
|
* @default "tab"
|
|
480
|
+
* @deprecated Any other value than `tab` could lead to a poor user experience for users with assistive technology.
|
|
481
|
+
* In the next major version, this property will be automatically set to `tab`.
|
|
489
482
|
*/
|
|
490
483
|
get: function () {
|
|
491
484
|
if (this.isMobile) {
|
|
@@ -571,6 +564,21 @@
|
|
|
571
564
|
this.changeRef.markForCheck();
|
|
572
565
|
}
|
|
573
566
|
};
|
|
567
|
+
SkyVerticalTabComponent.prototype.onTabButtonKeyUp = function (event) {
|
|
568
|
+
/*istanbul ignore else */
|
|
569
|
+
if (event.key) {
|
|
570
|
+
switch (event.key.toUpperCase()) {
|
|
571
|
+
case ' ':
|
|
572
|
+
case 'ENTER':
|
|
573
|
+
this.activateTab();
|
|
574
|
+
event.stopPropagation();
|
|
575
|
+
break;
|
|
576
|
+
/* istanbul ignore next */
|
|
577
|
+
default:
|
|
578
|
+
break;
|
|
579
|
+
}
|
|
580
|
+
}
|
|
581
|
+
};
|
|
574
582
|
SkyVerticalTabComponent.prototype.onWindowResize = function () {
|
|
575
583
|
this.updateBreakpointAndResponsiveClass(this.adapterService.getWidth(this.tabContent));
|
|
576
584
|
};
|
|
@@ -585,19 +593,19 @@
|
|
|
585
593
|
};
|
|
586
594
|
return SkyVerticalTabComponent;
|
|
587
595
|
}());
|
|
588
|
-
SkyVerticalTabComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
589
|
-
SkyVerticalTabComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
596
|
+
SkyVerticalTabComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyVerticalTabComponent, deps: [{ token: SkyVerticalTabsetAdapterService }, { token: i0__namespace.ChangeDetectorRef }, { token: SkyVerticalTabsetService }, { token: SkyVerticalTabMediaQueryService }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
597
|
+
SkyVerticalTabComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyVerticalTabComponent, selector: "sky-vertical-tab", inputs: { active: "active", ariaControls: "ariaControls", ariaRole: "ariaRole", disabled: "disabled", errorIndicator: "errorIndicator", tabHeaderCount: "tabHeaderCount", tabHeading: "tabHeading", showTabRightArrow: "showTabRightArrow", tabId: "tabId" }, host: { listeners: { "window:resize": "onWindowResize()" } }, providers: [
|
|
590
598
|
SkyVerticalTabMediaQueryService,
|
|
591
599
|
{
|
|
592
600
|
provide: i1.SkyMediaQueryService,
|
|
593
601
|
useExisting: SkyVerticalTabMediaQueryService,
|
|
594
602
|
},
|
|
595
|
-
], viewQueries: [{ propertyName: "tabContent", first: true, predicate: ["tabContentWrapper"], descendants: true }], ngImport: i0__namespace, template: "<a\n class=\"sky-vertical-tab\"\n [attr.aria-controls]=\"
|
|
596
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
603
|
+
], viewQueries: [{ propertyName: "tabContent", first: true, predicate: ["tabContentWrapper"], descendants: true }], ngImport: i0__namespace, template: "<a\n class=\"sky-vertical-tab\"\n [attr.aria-controls]=\"isMobile ? null : ariaControls || tabContentPane.id\"\n [attr.aria-selected]=\"active\"\n [attr.id]=\"tabId\"\n [attr.role]=\"ariaRole\"\n [ngClass]=\"{\n 'sky-vertical-tab-active': active,\n 'sky-vertical-tab-disabled': disabled,\n 'sky-font-deemphasized': disabled,\n 'sky-deemphasized': disabled\n }\"\n [tabIndex]=\"tabIndex()\"\n (click)=\"activateTab()\"\n (keyup)=\"onTabButtonKeyUp($event)\"\n>\n <div class=\"sky-vertical-tab-display\">\n <div class=\"sky-vertical-tab-heading\">\n <span class=\"sky-vertical-tab-heading-value\">{{ tabHeading }}</span>\n <span\n class=\"sky-vertical-tab-count\"\n *ngIf=\"tabHeaderCount || tabHeaderCount === 0\"\n >\n ({{ tabHeaderCount }})\n </span>\n </div>\n <sky-status-indicator\n *ngIf=\"errorIndicator\"\n class=\"sky-vertical-tab-heading-error\"\n descriptionType=\"error\"\n indicatorType=\"danger\"\n ></sky-status-indicator>\n <sky-icon\n *ngIf=\"showTabRightArrow\"\n class=\"sky-vertical-tab-right-arrow\"\n icon=\"chevron-right\"\n >\n </sky-icon>\n </div>\n</a>\n\n<div #tabContentWrapper>\n <div\n class=\"sky-vertical-tab-content-pane\"\n role=\"tabpanel\"\n tabindex=\"0\"\n skyId\n [attr.aria-labelledby]=\"tabId\"\n [ngClass]=\"{ 'sky-vertical-tab-hidden': !active }\"\n #tabContentPane\n >\n <ng-content></ng-content>\n\n <div></div>\n </div>\n</div>\n", styles: [".sky-vertical-tab{cursor:pointer;padding:7px 0 7px 10px;margin:5px 0 5px 10px;display:flex;text-decoration:none}.sky-vertical-tab:not(.sky-deemphasized){color:#212327}.sky-vertical-tab:hover{background-color:#eeeeef}.sky-vertical-tab:focus-visible{outline:thin dotted;outline:-webkit-focus-ring-color auto 5px}.sky-vertical-tab:hover .sky-vertical-tab-right-arrow{color:#979ba2}.sky-vertical-tab-active{background-color:#eeeeef;color:#212327;padding-left:6px;border-left:4px solid #00b4f1}.sky-vertical-tab-hidden{display:none}.sky-vertical-tab-display{display:flex;flex-grow:1}.sky-vertical-tab-heading-error{padding-left:5px}.sky-vertical-tab-count{margin-left:5px}.sky-vertical-tab-disabled{cursor:not-allowed;pointer-events:none}.sky-vertical-tab-right-arrow{padding:3px 10px 0 0;color:#cdcfd2}:host-context(.sky-theme-modern) .sky-vertical-tab{color:#686c73;cursor:pointer;padding:10px 0 10px 10px;margin:10px 0 20px 10px}:host-context(.sky-theme-modern) .sky-vertical-tab:not(.sky-vertical-tab-active):not(:active):hover{color:#212327;background-color:transparent;padding-left:9px;border-left:1px solid #00b4f1}:host-context(.sky-theme-modern) .sky-vertical-tab:not(:active):focus-visible{outline:solid 2px #1870B8;outline-offset:-2px;box-shadow:0 1px 8px #0000004d}:host-context(.sky-theme-modern) .sky-vertical-tab:focus:active:hover{outline:none;background:none}:host-context(.sky-theme-modern) .sky-vertical-tab:active{border-left:3px solid #00b4f1;color:#212327;padding-left:7px}:host-context(.sky-theme-modern) .sky-vertical-tab .sky-vertical-tab-heading-error{padding-left:10px;position:relative;top:-2px}:host-context(.sky-theme-modern) .sky-vertical-tab-active{background:none;color:#212327;padding-left:7px;border-left:3px solid #1870B8}.sky-theme-modern .sky-vertical-tab{color:#686c73;cursor:pointer;padding:10px 0 10px 10px;margin:10px 0 20px 10px}.sky-theme-modern .sky-vertical-tab:not(.sky-vertical-tab-active):not(:active):hover{color:#212327;background-color:transparent;padding-left:9px;border-left:1px solid #00b4f1}.sky-theme-modern .sky-vertical-tab:not(:active):focus-visible{outline:solid 2px #1870B8;outline-offset:-2px;box-shadow:0 1px 8px #0000004d}.sky-theme-modern .sky-vertical-tab:focus:active:hover{outline:none;background:none}.sky-theme-modern .sky-vertical-tab:active{border-left:3px solid #00b4f1;color:#212327;padding-left:7px}.sky-theme-modern .sky-vertical-tab .sky-vertical-tab-heading-error{padding-left:10px;position:relative;top:-2px}.sky-theme-modern .sky-vertical-tab-active{background:none;color:#212327;padding-left:7px;border-left:3px solid #1870B8}\n"], components: [{ type: i4__namespace.λ10, selector: "sky-status-indicator", inputs: ["indicatorType", "descriptionType", "customDescription"] }, { type: i4__namespace.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.λ2, selector: "[skyId]", exportAs: ["skyId"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
|
|
604
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyVerticalTabComponent, decorators: [{
|
|
597
605
|
type: i0.Component,
|
|
598
606
|
args: [{
|
|
599
607
|
selector: 'sky-vertical-tab',
|
|
600
|
-
template: "<a\n class=\"sky-vertical-tab\"\n [attr.aria-controls]=\"
|
|
608
|
+
template: "<a\n class=\"sky-vertical-tab\"\n [attr.aria-controls]=\"isMobile ? null : ariaControls || tabContentPane.id\"\n [attr.aria-selected]=\"active\"\n [attr.id]=\"tabId\"\n [attr.role]=\"ariaRole\"\n [ngClass]=\"{\n 'sky-vertical-tab-active': active,\n 'sky-vertical-tab-disabled': disabled,\n 'sky-font-deemphasized': disabled,\n 'sky-deemphasized': disabled\n }\"\n [tabIndex]=\"tabIndex()\"\n (click)=\"activateTab()\"\n (keyup)=\"onTabButtonKeyUp($event)\"\n>\n <div class=\"sky-vertical-tab-display\">\n <div class=\"sky-vertical-tab-heading\">\n <span class=\"sky-vertical-tab-heading-value\">{{ tabHeading }}</span>\n <span\n class=\"sky-vertical-tab-count\"\n *ngIf=\"tabHeaderCount || tabHeaderCount === 0\"\n >\n ({{ tabHeaderCount }})\n </span>\n </div>\n <sky-status-indicator\n *ngIf=\"errorIndicator\"\n class=\"sky-vertical-tab-heading-error\"\n descriptionType=\"error\"\n indicatorType=\"danger\"\n ></sky-status-indicator>\n <sky-icon\n *ngIf=\"showTabRightArrow\"\n class=\"sky-vertical-tab-right-arrow\"\n icon=\"chevron-right\"\n >\n </sky-icon>\n </div>\n</a>\n\n<div #tabContentWrapper>\n <div\n class=\"sky-vertical-tab-content-pane\"\n role=\"tabpanel\"\n tabindex=\"0\"\n skyId\n [attr.aria-labelledby]=\"tabId\"\n [ngClass]=\"{ 'sky-vertical-tab-hidden': !active }\"\n #tabContentPane\n >\n <ng-content></ng-content>\n\n <div></div>\n </div>\n</div>\n",
|
|
601
609
|
styles: [".sky-vertical-tab{cursor:pointer;padding:7px 0 7px 10px;margin:5px 0 5px 10px;display:flex;text-decoration:none}.sky-vertical-tab:not(.sky-deemphasized){color:#212327}.sky-vertical-tab:hover{background-color:#eeeeef}.sky-vertical-tab:focus-visible{outline:thin dotted;outline:-webkit-focus-ring-color auto 5px}.sky-vertical-tab:hover .sky-vertical-tab-right-arrow{color:#979ba2}.sky-vertical-tab-active{background-color:#eeeeef;color:#212327;padding-left:6px;border-left:4px solid #00b4f1}.sky-vertical-tab-hidden{display:none}.sky-vertical-tab-display{display:flex;flex-grow:1}.sky-vertical-tab-heading-error{padding-left:5px}.sky-vertical-tab-count{margin-left:5px}.sky-vertical-tab-disabled{cursor:not-allowed;pointer-events:none}.sky-vertical-tab-right-arrow{padding:3px 10px 0 0;color:#cdcfd2}:host-context(.sky-theme-modern) .sky-vertical-tab{color:#686c73;cursor:pointer;padding:10px 0 10px 10px;margin:10px 0 20px 10px}:host-context(.sky-theme-modern) .sky-vertical-tab:not(.sky-vertical-tab-active):not(:active):hover{color:#212327;background-color:transparent;padding-left:9px;border-left:1px solid #00b4f1}:host-context(.sky-theme-modern) .sky-vertical-tab:not(:active):focus-visible{outline:solid 2px #1870B8;outline-offset:-2px;box-shadow:0 1px 8px #0000004d}:host-context(.sky-theme-modern) .sky-vertical-tab:focus:active:hover{outline:none;background:none}:host-context(.sky-theme-modern) .sky-vertical-tab:active{border-left:3px solid #00b4f1;color:#212327;padding-left:7px}:host-context(.sky-theme-modern) .sky-vertical-tab .sky-vertical-tab-heading-error{padding-left:10px;position:relative;top:-2px}:host-context(.sky-theme-modern) .sky-vertical-tab-active{background:none;color:#212327;padding-left:7px;border-left:3px solid #1870B8}.sky-theme-modern .sky-vertical-tab{color:#686c73;cursor:pointer;padding:10px 0 10px 10px;margin:10px 0 20px 10px}.sky-theme-modern .sky-vertical-tab:not(.sky-vertical-tab-active):not(:active):hover{color:#212327;background-color:transparent;padding-left:9px;border-left:1px solid #00b4f1}.sky-theme-modern .sky-vertical-tab:not(:active):focus-visible{outline:solid 2px #1870B8;outline-offset:-2px;box-shadow:0 1px 8px #0000004d}.sky-theme-modern .sky-vertical-tab:focus:active:hover{outline:none;background:none}.sky-theme-modern .sky-vertical-tab:active{border-left:3px solid #00b4f1;color:#212327;padding-left:7px}.sky-theme-modern .sky-vertical-tab .sky-vertical-tab-heading-error{padding-left:10px;position:relative;top:-2px}.sky-theme-modern .sky-vertical-tab-active{background:none;color:#212327;padding-left:7px;border-left:3px solid #1870B8}\n"],
|
|
602
610
|
providers: [
|
|
603
611
|
SkyVerticalTabMediaQueryService,
|
|
@@ -612,10 +620,6 @@
|
|
|
612
620
|
type: i0.Input
|
|
613
621
|
}], ariaControls: [{
|
|
614
622
|
type: i0.Input
|
|
615
|
-
}], ariaInvalid: [{
|
|
616
|
-
type: i0.Input
|
|
617
|
-
}], ariaRequired: [{
|
|
618
|
-
type: i0.Input
|
|
619
623
|
}], ariaRole: [{
|
|
620
624
|
type: i0.Input
|
|
621
625
|
}], disabled: [{
|
|
@@ -665,9 +669,9 @@
|
|
|
665
669
|
};
|
|
666
670
|
return SkySectionedFormService;
|
|
667
671
|
}());
|
|
668
|
-
SkySectionedFormService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
669
|
-
SkySectionedFormService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.
|
|
670
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
672
|
+
SkySectionedFormService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySectionedFormService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
|
|
673
|
+
SkySectionedFormService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySectionedFormService });
|
|
674
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySectionedFormService, decorators: [{
|
|
671
675
|
type: i0.Injectable
|
|
672
676
|
}] });
|
|
673
677
|
|
|
@@ -682,29 +686,17 @@
|
|
|
682
686
|
this.changeRef = changeRef;
|
|
683
687
|
this.sectionTabId = "sky-sectioned-form-tab-" + ++nextId$1;
|
|
684
688
|
this.sectionContentId = "sky-sectioned-form-section-" + ++nextId$1;
|
|
685
|
-
|
|
689
|
+
/**
|
|
690
|
+
* Indicates whether the section is active when the form loads.
|
|
691
|
+
* @default false
|
|
692
|
+
*/
|
|
693
|
+
this.active = false;
|
|
686
694
|
this._ngUnsubscribe = new rxjs.Subject();
|
|
687
695
|
}
|
|
688
|
-
Object.defineProperty(SkySectionedFormSectionComponent.prototype, "ariaRole", {
|
|
689
|
-
get: function () {
|
|
690
|
-
return this.isMobile ? undefined : 'tabpanel';
|
|
691
|
-
},
|
|
692
|
-
enumerable: false,
|
|
693
|
-
configurable: true
|
|
694
|
-
});
|
|
695
|
-
Object.defineProperty(SkySectionedFormSectionComponent.prototype, "ariaLabelledby", {
|
|
696
|
-
get: function () {
|
|
697
|
-
return this.isMobile ? undefined : this.sectionTabId;
|
|
698
|
-
},
|
|
699
|
-
enumerable: false,
|
|
700
|
-
configurable: true
|
|
701
|
-
});
|
|
702
696
|
SkySectionedFormSectionComponent.prototype.ngOnInit = function () {
|
|
703
697
|
var _this = this;
|
|
704
|
-
this.isMobile = this.tabsetService.isMobile();
|
|
705
698
|
this.changeRef.detectChanges();
|
|
706
699
|
this.tabsetService.switchingMobile.subscribe(function (mobile) {
|
|
707
|
-
_this.isMobile = mobile;
|
|
708
700
|
_this.changeRef.detectChanges();
|
|
709
701
|
});
|
|
710
702
|
this.sectionedFormService.requiredChange
|
|
@@ -720,13 +712,13 @@
|
|
|
720
712
|
};
|
|
721
713
|
return SkySectionedFormSectionComponent;
|
|
722
714
|
}());
|
|
723
|
-
SkySectionedFormSectionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
724
|
-
SkySectionedFormSectionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
725
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
715
|
+
SkySectionedFormSectionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySectionedFormSectionComponent, deps: [{ token: SkySectionedFormService }, { token: SkyVerticalTabsetService }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
716
|
+
SkySectionedFormSectionComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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: SkyVerticalTabComponent, selector: "sky-vertical-tab", inputs: ["active", "ariaControls", "ariaRole", "disabled", "errorIndicator", "tabHeaderCount", "tabHeading", "showTabRightArrow", "tabId"] }], directives: [{ type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
717
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySectionedFormSectionComponent, decorators: [{
|
|
726
718
|
type: i0.Component,
|
|
727
719
|
args: [{
|
|
728
720
|
selector: 'sky-sectioned-form-section',
|
|
729
|
-
template: "<sky-vertical-tab\n [active]=\"active\"\n [
|
|
721
|
+
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",
|
|
730
722
|
providers: [SkySectionedFormService],
|
|
731
723
|
styles: [":host .sky-tab-field-required ::ng-deep .sky-vertical-tab-heading:after{content:\"*\";color:#ef4044;padding-left:5px}\n"],
|
|
732
724
|
}]
|
|
@@ -773,16 +765,16 @@
|
|
|
773
765
|
}
|
|
774
766
|
return SkyTabsResourcesModule;
|
|
775
767
|
}());
|
|
776
|
-
SkyTabsResourcesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
777
|
-
SkyTabsResourcesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.
|
|
778
|
-
SkyTabsResourcesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.
|
|
768
|
+
SkyTabsResourcesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTabsResourcesModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
|
|
769
|
+
SkyTabsResourcesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTabsResourcesModule, exports: [i3.SkyI18nModule] });
|
|
770
|
+
SkyTabsResourcesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTabsResourcesModule, providers: [
|
|
779
771
|
{
|
|
780
772
|
provide: i3.SKY_LIB_RESOURCES_PROVIDERS,
|
|
781
773
|
useClass: SkyTabsResourcesProvider,
|
|
782
774
|
multi: true,
|
|
783
775
|
},
|
|
784
776
|
], imports: [i3.SkyI18nModule] });
|
|
785
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
777
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTabsResourcesModule, decorators: [{
|
|
786
778
|
type: i0.NgModule,
|
|
787
779
|
args: [{
|
|
788
780
|
exports: [i3.SkyI18nModule],
|
|
@@ -805,7 +797,7 @@
|
|
|
805
797
|
/**
|
|
806
798
|
* Indicates whether the vertical tabset loads tab content during initialization so that it
|
|
807
799
|
* displays content without moving around elements in the content container.
|
|
808
|
-
* @default
|
|
800
|
+
* @default false
|
|
809
801
|
*/
|
|
810
802
|
this.maintainTabContent = false;
|
|
811
803
|
/**
|
|
@@ -824,6 +816,8 @@
|
|
|
824
816
|
* an ARIA role indicates what an item represents on a web page, see the
|
|
825
817
|
* [WAI-ARIA roles model](https://www.w3.org/WAI/PF/aria/roles).
|
|
826
818
|
* @default "tablist"
|
|
819
|
+
* @deprecated Any other value than `tablist` could lead to a poor user experience for users with assistive technology.
|
|
820
|
+
* In the next major version, this property will be automatically set to `tablist`.
|
|
827
821
|
*/
|
|
828
822
|
get: function () {
|
|
829
823
|
if (this.isMobile) {
|
|
@@ -883,8 +877,8 @@
|
|
|
883
877
|
};
|
|
884
878
|
return SkyVerticalTabsetComponent;
|
|
885
879
|
}());
|
|
886
|
-
SkyVerticalTabsetComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
887
|
-
SkyVerticalTabsetComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
880
|
+
SkyVerticalTabsetComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyVerticalTabsetComponent, deps: [{ token: SkyVerticalTabsetAdapterService }, { token: SkyVerticalTabsetService }, { token: i3__namespace.SkyLibResourcesService }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
881
|
+
SkyVerticalTabsetComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyVerticalTabsetComponent, selector: "sky-vertical-tabset", inputs: { showTabsText: "showTabsText", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", ariaRole: "ariaRole", maintainTabContent: "maintainTabContent" }, outputs: { activeChange: "activeChange" }, providers: [SkyVerticalTabsetService], viewQueries: [{ propertyName: "tabGroups", first: true, predicate: ["groupContainerWrapper"], descendants: true }, { propertyName: "content", first: true, predicate: ["skySideContent"], descendants: true }, { propertyName: "contentWrapper", first: true, predicate: ["contentContainerWrapper"], descendants: true }], ngImport: i0__namespace, template: "<div class=\"sky-vertical-tabset\" (window:resize)=\"tabService.updateContent()\">\n <div\n *ngIf=\"maintainTabContent || tabService.tabsVisible()\"\n aria-orientation=\"vertical\"\n class=\"sky-vertical-tabset-group-container\"\n [ngClass]=\"{ 'sky-vertical-tabset-hidden': !tabService.tabsVisible() }\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.role]=\"ariaRole\"\n [@tabGroupEnter]=\"tabService.animationTabsVisibleState\"\n #groupContainerWrapper\n >\n <ng-content></ng-content>\n </div>\n <div\n *ngIf=\"maintainTabContent || tabService.contentVisible()\"\n class=\"sky-vertical-tabset-content\"\n [ngClass]=\"{\n 'sky-vertical-tabset-content-hidden': !tabService.contentVisible()\n }\"\n [@contentEnter]=\"tabService.animationContentVisibleState\"\n #contentContainerWrapper\n >\n <div #skySideContent></div>\n <button\n *ngIf=\"!tabService.tabsVisible()\"\n (click)=\"tabService.showTabs()\"\n class=\"sky-btn sky-btn-primary sky-vertical-tabset-show-tabs-btn\"\n >\n <sky-icon icon=\"chevron-left\"></sky-icon>\n {{ showTabsText }}\n </button>\n </div>\n</div>\n", styles: [":host .sky-vertical-tabset{display:block;height:auto}:host .sky-vertical-tabset-group-container{border-right:none}:host-context(.sky-responsive-container-xs) .sky-vertical-tabset,:host-context(.sky-responsive-container-sm) .sky-vertical-tabset,:host-context(.sky-responsive-container-md) .sky-vertical-tabset,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset{display:block;height:auto}:host-context(.sky-responsive-container-xs) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:none}@media (min-width: 768px){:host .sky-vertical-tabset{display:flex;height:100%}:host .sky-vertical-tabset-group-container{border-right:1px solid #cdcfd2}}:host-context(.sky-responsive-container-sm) .sky-vertical-tabset,:host-context(.sky-responsive-container-md) .sky-vertical-tabset,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset{display:flex;height:100%}:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #cdcfd2}.sky-vertical-tabset-hidden{display:none}.sky-vertical-tabset-content{margin:10px 0 0 10px;flex-basis:75%;overflow-y:auto}.sky-vertical-tabset-content-hidden{display:none}.sky-vertical-tabset-show-tabs-btn{margin-top:10px}.sky-vertical-tabset-group-container{flex-basis:25%;overflow-y:auto}:host-context(sky-modal-content >) .sky-vertical-tabset{margin:-15px}:host-context(.sky-theme-modern) .sky-vertical-tabset-content{margin:15px}@media (min-width: 768px){:host-context(.sky-theme-modern) :host .sky-vertical-tabset-content{margin:20px 30px}:host-context(.sky-theme-modern) :host .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-vertical-tabset-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-content{margin:20px 30px}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}.sky-theme-modern .sky-vertical-tabset-content{margin:15px}@media (min-width: 768px){.sky-theme-modern :host .sky-vertical-tabset-content{margin:20px 30px}.sky-theme-modern :host .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-content,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-vertical-tabset-content,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-content{margin:20px 30px}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}\n"], components: [{ type: i4__namespace.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
|
|
888
882
|
animations.trigger('tabGroupEnter', [
|
|
889
883
|
animations.transition(HIDDEN_STATE + " => " + VISIBLE_STATE, [
|
|
890
884
|
animations.style({ transform: 'translate(-100%)' }),
|
|
@@ -898,11 +892,11 @@
|
|
|
898
892
|
]),
|
|
899
893
|
]),
|
|
900
894
|
], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
|
|
901
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
895
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyVerticalTabsetComponent, decorators: [{
|
|
902
896
|
type: i0.Component,
|
|
903
897
|
args: [{
|
|
904
898
|
selector: 'sky-vertical-tabset',
|
|
905
|
-
template: "<div class=\"sky-vertical-tabset\" (window:resize)=\"tabService.updateContent()\">\n <div\n *ngIf=\"maintainTabContent || tabService.tabsVisible()\"\n
|
|
899
|
+
template: "<div class=\"sky-vertical-tabset\" (window:resize)=\"tabService.updateContent()\">\n <div\n *ngIf=\"maintainTabContent || tabService.tabsVisible()\"\n aria-orientation=\"vertical\"\n class=\"sky-vertical-tabset-group-container\"\n [ngClass]=\"{ 'sky-vertical-tabset-hidden': !tabService.tabsVisible() }\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.role]=\"ariaRole\"\n [@tabGroupEnter]=\"tabService.animationTabsVisibleState\"\n #groupContainerWrapper\n >\n <ng-content></ng-content>\n </div>\n <div\n *ngIf=\"maintainTabContent || tabService.contentVisible()\"\n class=\"sky-vertical-tabset-content\"\n [ngClass]=\"{\n 'sky-vertical-tabset-content-hidden': !tabService.contentVisible()\n }\"\n [@contentEnter]=\"tabService.animationContentVisibleState\"\n #contentContainerWrapper\n >\n <div #skySideContent></div>\n <button\n *ngIf=\"!tabService.tabsVisible()\"\n (click)=\"tabService.showTabs()\"\n class=\"sky-btn sky-btn-primary sky-vertical-tabset-show-tabs-btn\"\n >\n <sky-icon icon=\"chevron-left\"></sky-icon>\n {{ showTabsText }}\n </button>\n </div>\n</div>\n",
|
|
906
900
|
styles: [":host .sky-vertical-tabset{display:block;height:auto}:host .sky-vertical-tabset-group-container{border-right:none}:host-context(.sky-responsive-container-xs) .sky-vertical-tabset,:host-context(.sky-responsive-container-sm) .sky-vertical-tabset,:host-context(.sky-responsive-container-md) .sky-vertical-tabset,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset{display:block;height:auto}:host-context(.sky-responsive-container-xs) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:none}@media (min-width: 768px){:host .sky-vertical-tabset{display:flex;height:100%}:host .sky-vertical-tabset-group-container{border-right:1px solid #cdcfd2}}:host-context(.sky-responsive-container-sm) .sky-vertical-tabset,:host-context(.sky-responsive-container-md) .sky-vertical-tabset,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset{display:flex;height:100%}:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #cdcfd2}.sky-vertical-tabset-hidden{display:none}.sky-vertical-tabset-content{margin:10px 0 0 10px;flex-basis:75%;overflow-y:auto}.sky-vertical-tabset-content-hidden{display:none}.sky-vertical-tabset-show-tabs-btn{margin-top:10px}.sky-vertical-tabset-group-container{flex-basis:25%;overflow-y:auto}:host-context(sky-modal-content >) .sky-vertical-tabset{margin:-15px}:host-context(.sky-theme-modern) .sky-vertical-tabset-content{margin:15px}@media (min-width: 768px){:host-context(.sky-theme-modern) :host .sky-vertical-tabset-content{margin:20px 30px}:host-context(.sky-theme-modern) :host .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-vertical-tabset-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-content{margin:20px 30px}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}.sky-theme-modern .sky-vertical-tabset-content{margin:15px}@media (min-width: 768px){.sky-theme-modern :host .sky-vertical-tabset-content{margin:20px 30px}.sky-theme-modern :host .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-content,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-vertical-tabset-content,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-content{margin:20px 30px}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}\n"],
|
|
907
901
|
providers: [SkyVerticalTabsetService],
|
|
908
902
|
changeDetection: i0.ChangeDetectionStrategy.OnPush,
|
|
@@ -923,6 +917,10 @@
|
|
|
923
917
|
}]
|
|
924
918
|
}], ctorParameters: function () { return [{ type: SkyVerticalTabsetAdapterService }, { type: SkyVerticalTabsetService }, { type: i3__namespace.SkyLibResourcesService }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { showTabsText: [{
|
|
925
919
|
type: i0.Input
|
|
920
|
+
}], ariaLabel: [{
|
|
921
|
+
type: i0.Input
|
|
922
|
+
}], ariaLabelledBy: [{
|
|
923
|
+
type: i0.Input
|
|
926
924
|
}], ariaRole: [{
|
|
927
925
|
type: i0.Input
|
|
928
926
|
}], maintainTabContent: [{
|
|
@@ -968,7 +966,7 @@
|
|
|
968
966
|
},
|
|
969
967
|
/**
|
|
970
968
|
* Indicates whether the collapsible group is expanded.
|
|
971
|
-
* @default
|
|
969
|
+
* @default false
|
|
972
970
|
*/
|
|
973
971
|
set: function (value) {
|
|
974
972
|
this._open = value;
|
|
@@ -1002,62 +1000,16 @@
|
|
|
1002
1000
|
};
|
|
1003
1001
|
return SkyVerticalTabsetGroupComponent;
|
|
1004
1002
|
}());
|
|
1005
|
-
SkyVerticalTabsetGroupComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1006
|
-
SkyVerticalTabsetGroupComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
1007
|
-
|
|
1008
|
-
animations.transition(':enter', [
|
|
1009
|
-
animations.style({
|
|
1010
|
-
height: '0',
|
|
1011
|
-
visibility: 'hidden',
|
|
1012
|
-
}),
|
|
1013
|
-
animations.animate('150ms ease-in', animations.style({
|
|
1014
|
-
height: '*',
|
|
1015
|
-
visibility: 'visible',
|
|
1016
|
-
})),
|
|
1017
|
-
]),
|
|
1018
|
-
animations.transition(':leave', [
|
|
1019
|
-
animations.style({
|
|
1020
|
-
height: '*',
|
|
1021
|
-
visibility: 'visible',
|
|
1022
|
-
}),
|
|
1023
|
-
animations.animate('150ms ease-in', animations.style({
|
|
1024
|
-
height: '0',
|
|
1025
|
-
visibility: 'hidden',
|
|
1026
|
-
})),
|
|
1027
|
-
]),
|
|
1028
|
-
]),
|
|
1029
|
-
], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
|
|
1030
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyVerticalTabsetGroupComponent, decorators: [{
|
|
1003
|
+
SkyVerticalTabsetGroupComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyVerticalTabsetGroupComponent, deps: [{ token: SkyVerticalTabsetService }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
1004
|
+
SkyVerticalTabsetGroupComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyVerticalTabsetGroupComponent, selector: "sky-vertical-tabset-group", inputs: { disabled: "disabled", groupHeading: "groupHeading", open: "open" }, queries: [{ propertyName: "tabs", predicate: SkyVerticalTabComponent }], ngImport: i0__namespace, template: "<div class=\"sky-vertical-tabset-group\">\n <!-- [ngClass] includes font classes for both modern and default styles -->\n <div\n class=\"sky-vertical-tabset-group-header\"\n [ngClass]=\"{\n 'sky-vertical-tabset-group-header-sub-open sky-font-emphasized sky-emphasized':\n subMenuOpen(),\n 'sky-font-deemphasized': disabled,\n 'sky-deemphasized': disabled,\n 'sky-vertical-tabset-disabled': disabled\n }\"\n [tabIndex]=\"-1\"\n >\n <button\n class=\"sky-padding-even-default\"\n type=\"button\"\n skyId\n [attr.aria-controls]=\"groupContent.id\"\n [attr.aria-expanded]=\"open\"\n (click)=\"toggleMenuOpen()\"\n #groupHeadingButton\n >\n {{ groupHeading }}\n <sky-expansion-indicator\n class=\"sky-vertical-tabset-group-expansion-indicator\"\n [direction]=\"open ? 'up' : 'down'\"\n >\n </sky-expansion-indicator>\n </button>\n </div>\n <div\n class=\"sky-vertical-tabset-group-content\"\n role=\"region\"\n skyId\n [attr.labelledby]=\"groupHeadingButton.id\"\n [@skyAnimationSlide]=\"open ? 'down' : 'up'\"\n #groupContent\n >\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".sky-vertical-tabset-group{border-bottom:1px solid #e2e3e4;margin:5px 0 5px 5px}.sky-vertical-tabset-group-header button{cursor:pointer;display:flex;justify-content:space-between;border:none;width:100%;text-align:left;background:none}.sky-vertical-tabset-group-content{overflow:hidden;border-top:1px solid #e2e3e4}:host ::ng-deep .sky-vertical-tabset-group-expansion-indicator>button{font-size:14px!important}.sky-vertical-tabset-disabled{cursor:not-allowed;pointer-events:none}:host-context(.sky-theme-modern) .sky-vertical-tabset-group{border:none;margin:10px 0}:host-context(.sky-theme-modern) .sky-vertical-tabset-group-content{border:none;padding-left:25px}:host-context(.sky-theme-modern) .sky-vertical-tabset-group-header{position:relative}:host-context(.sky-theme-modern) .sky-vertical-tabset-group-expansion-indicator{position:absolute;top:6px;right:5px}.sky-theme-modern .sky-vertical-tabset-group{border:none;margin:10px 0}.sky-theme-modern .sky-vertical-tabset-group-content{border:none;padding-left:25px}.sky-theme-modern .sky-vertical-tabset-group-header{position:relative}.sky-theme-modern .sky-vertical-tabset-group-expansion-indicator{position:absolute;top:6px;right:5px}\n"], components: [{ type: i4__namespace.λ15, selector: "sky-expansion-indicator", inputs: ["direction"] }], directives: [{ type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace.λ2, selector: "[skyId]", exportAs: ["skyId"] }], animations: [animations$1.skyAnimationSlide], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
|
|
1005
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyVerticalTabsetGroupComponent, decorators: [{
|
|
1031
1006
|
type: i0.Component,
|
|
1032
1007
|
args: [{
|
|
1033
1008
|
selector: 'sky-vertical-tabset-group',
|
|
1034
|
-
template: "<div class=\"sky-vertical-tabset-group\">\n <!-- [ngClass] includes font classes for both modern and default styles -->\n <div\n class=\"sky-vertical-tabset-group-header
|
|
1035
|
-
styles: [".sky-vertical-tabset-group{border-bottom:1px solid #e2e3e4;margin:5px 0 5px 5px}.sky-vertical-tabset-group-header{cursor:pointer;display:flex;justify-content:space-between
|
|
1009
|
+
template: "<div class=\"sky-vertical-tabset-group\">\n <!-- [ngClass] includes font classes for both modern and default styles -->\n <div\n class=\"sky-vertical-tabset-group-header\"\n [ngClass]=\"{\n 'sky-vertical-tabset-group-header-sub-open sky-font-emphasized sky-emphasized':\n subMenuOpen(),\n 'sky-font-deemphasized': disabled,\n 'sky-deemphasized': disabled,\n 'sky-vertical-tabset-disabled': disabled\n }\"\n [tabIndex]=\"-1\"\n >\n <button\n class=\"sky-padding-even-default\"\n type=\"button\"\n skyId\n [attr.aria-controls]=\"groupContent.id\"\n [attr.aria-expanded]=\"open\"\n (click)=\"toggleMenuOpen()\"\n #groupHeadingButton\n >\n {{ groupHeading }}\n <sky-expansion-indicator\n class=\"sky-vertical-tabset-group-expansion-indicator\"\n [direction]=\"open ? 'up' : 'down'\"\n >\n </sky-expansion-indicator>\n </button>\n </div>\n <div\n class=\"sky-vertical-tabset-group-content\"\n role=\"region\"\n skyId\n [attr.labelledby]=\"groupHeadingButton.id\"\n [@skyAnimationSlide]=\"open ? 'down' : 'up'\"\n #groupContent\n >\n <ng-content></ng-content>\n </div>\n</div>\n",
|
|
1010
|
+
styles: [".sky-vertical-tabset-group{border-bottom:1px solid #e2e3e4;margin:5px 0 5px 5px}.sky-vertical-tabset-group-header button{cursor:pointer;display:flex;justify-content:space-between;border:none;width:100%;text-align:left;background:none}.sky-vertical-tabset-group-content{overflow:hidden;border-top:1px solid #e2e3e4}:host ::ng-deep .sky-vertical-tabset-group-expansion-indicator>button{font-size:14px!important}.sky-vertical-tabset-disabled{cursor:not-allowed;pointer-events:none}:host-context(.sky-theme-modern) .sky-vertical-tabset-group{border:none;margin:10px 0}:host-context(.sky-theme-modern) .sky-vertical-tabset-group-content{border:none;padding-left:25px}:host-context(.sky-theme-modern) .sky-vertical-tabset-group-header{position:relative}:host-context(.sky-theme-modern) .sky-vertical-tabset-group-expansion-indicator{position:absolute;top:6px;right:5px}.sky-theme-modern .sky-vertical-tabset-group{border:none;margin:10px 0}.sky-theme-modern .sky-vertical-tabset-group-content{border:none;padding-left:25px}.sky-theme-modern .sky-vertical-tabset-group-header{position:relative}.sky-theme-modern .sky-vertical-tabset-group-expansion-indicator{position:absolute;top:6px;right:5px}\n"],
|
|
1036
1011
|
changeDetection: i0.ChangeDetectionStrategy.OnPush,
|
|
1037
|
-
animations: [
|
|
1038
|
-
animations.trigger('tabSlide', [
|
|
1039
|
-
animations.transition(':enter', [
|
|
1040
|
-
animations.style({
|
|
1041
|
-
height: '0',
|
|
1042
|
-
visibility: 'hidden',
|
|
1043
|
-
}),
|
|
1044
|
-
animations.animate('150ms ease-in', animations.style({
|
|
1045
|
-
height: '*',
|
|
1046
|
-
visibility: 'visible',
|
|
1047
|
-
})),
|
|
1048
|
-
]),
|
|
1049
|
-
animations.transition(':leave', [
|
|
1050
|
-
animations.style({
|
|
1051
|
-
height: '*',
|
|
1052
|
-
visibility: 'visible',
|
|
1053
|
-
}),
|
|
1054
|
-
animations.animate('150ms ease-in', animations.style({
|
|
1055
|
-
height: '0',
|
|
1056
|
-
visibility: 'hidden',
|
|
1057
|
-
})),
|
|
1058
|
-
]),
|
|
1059
|
-
]),
|
|
1060
|
-
],
|
|
1012
|
+
animations: [animations$1.skyAnimationSlide],
|
|
1061
1013
|
}]
|
|
1062
1014
|
}], ctorParameters: function () { return [{ type: SkyVerticalTabsetService }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { disabled: [{
|
|
1063
1015
|
type: i0.Input
|
|
@@ -1075,26 +1027,28 @@
|
|
|
1075
1027
|
}
|
|
1076
1028
|
return SkyVerticalTabsetModule;
|
|
1077
1029
|
}());
|
|
1078
|
-
SkyVerticalTabsetModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1079
|
-
SkyVerticalTabsetModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.
|
|
1030
|
+
SkyVerticalTabsetModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyVerticalTabsetModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
|
|
1031
|
+
SkyVerticalTabsetModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyVerticalTabsetModule, declarations: [SkyVerticalTabsetComponent,
|
|
1080
1032
|
SkyVerticalTabsetGroupComponent,
|
|
1081
1033
|
SkyVerticalTabComponent], imports: [i2.CommonModule,
|
|
1082
|
-
i4.SkyChevronModule,
|
|
1083
1034
|
i4.SkyIconModule,
|
|
1035
|
+
i1.SkyIdModule,
|
|
1036
|
+
i4.SkyExpansionIndicatorModule,
|
|
1084
1037
|
i4.SkyStatusIndicatorModule,
|
|
1085
1038
|
SkyTabsResourcesModule,
|
|
1086
|
-
|
|
1039
|
+
i8.SkyThemeModule], exports: [SkyVerticalTabsetComponent,
|
|
1087
1040
|
SkyVerticalTabsetGroupComponent,
|
|
1088
1041
|
SkyVerticalTabComponent] });
|
|
1089
|
-
SkyVerticalTabsetModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.
|
|
1042
|
+
SkyVerticalTabsetModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyVerticalTabsetModule, providers: [SkyVerticalTabsetAdapterService], imports: [[
|
|
1090
1043
|
i2.CommonModule,
|
|
1091
|
-
i4.SkyChevronModule,
|
|
1092
1044
|
i4.SkyIconModule,
|
|
1045
|
+
i1.SkyIdModule,
|
|
1046
|
+
i4.SkyExpansionIndicatorModule,
|
|
1093
1047
|
i4.SkyStatusIndicatorModule,
|
|
1094
1048
|
SkyTabsResourcesModule,
|
|
1095
|
-
|
|
1049
|
+
i8.SkyThemeModule,
|
|
1096
1050
|
]] });
|
|
1097
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1051
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyVerticalTabsetModule, decorators: [{
|
|
1098
1052
|
type: i0.NgModule,
|
|
1099
1053
|
args: [{
|
|
1100
1054
|
declarations: [
|
|
@@ -1104,11 +1058,12 @@
|
|
|
1104
1058
|
],
|
|
1105
1059
|
imports: [
|
|
1106
1060
|
i2.CommonModule,
|
|
1107
|
-
i4.SkyChevronModule,
|
|
1108
1061
|
i4.SkyIconModule,
|
|
1062
|
+
i1.SkyIdModule,
|
|
1063
|
+
i4.SkyExpansionIndicatorModule,
|
|
1109
1064
|
i4.SkyStatusIndicatorModule,
|
|
1110
1065
|
SkyTabsResourcesModule,
|
|
1111
|
-
|
|
1066
|
+
i8.SkyThemeModule,
|
|
1112
1067
|
],
|
|
1113
1068
|
providers: [SkyVerticalTabsetAdapterService],
|
|
1114
1069
|
exports: [
|
|
@@ -1124,25 +1079,25 @@
|
|
|
1124
1079
|
}
|
|
1125
1080
|
return SkySectionedFormModule;
|
|
1126
1081
|
}());
|
|
1127
|
-
SkySectionedFormModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1128
|
-
SkySectionedFormModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.
|
|
1082
|
+
SkySectionedFormModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySectionedFormModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
|
|
1083
|
+
SkySectionedFormModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySectionedFormModule, declarations: [SkySectionedFormComponent, SkySectionedFormSectionComponent], imports: [i2.CommonModule,
|
|
1129
1084
|
forms.SkyCheckboxModule,
|
|
1130
|
-
|
|
1085
|
+
i8.SkyThemeModule,
|
|
1131
1086
|
SkyVerticalTabsetModule], exports: [SkySectionedFormComponent, SkySectionedFormSectionComponent] });
|
|
1132
|
-
SkySectionedFormModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.
|
|
1087
|
+
SkySectionedFormModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySectionedFormModule, imports: [[
|
|
1133
1088
|
i2.CommonModule,
|
|
1134
1089
|
forms.SkyCheckboxModule,
|
|
1135
|
-
|
|
1090
|
+
i8.SkyThemeModule,
|
|
1136
1091
|
SkyVerticalTabsetModule,
|
|
1137
1092
|
]] });
|
|
1138
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1093
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySectionedFormModule, decorators: [{
|
|
1139
1094
|
type: i0.NgModule,
|
|
1140
1095
|
args: [{
|
|
1141
1096
|
declarations: [SkySectionedFormComponent, SkySectionedFormSectionComponent],
|
|
1142
1097
|
imports: [
|
|
1143
1098
|
i2.CommonModule,
|
|
1144
1099
|
forms.SkyCheckboxModule,
|
|
1145
|
-
|
|
1100
|
+
i8.SkyThemeModule,
|
|
1146
1101
|
SkyVerticalTabsetModule,
|
|
1147
1102
|
],
|
|
1148
1103
|
exports: [SkySectionedFormComponent, SkySectionedFormSectionComponent],
|
|
@@ -1163,8 +1118,19 @@
|
|
|
1163
1118
|
event.preventDefault();
|
|
1164
1119
|
}
|
|
1165
1120
|
};
|
|
1166
|
-
SkyTabButtonComponent.prototype.
|
|
1167
|
-
|
|
1121
|
+
SkyTabButtonComponent.prototype.onTabButtonKeyDown = function (event) {
|
|
1122
|
+
/*istanbul ignore else */
|
|
1123
|
+
if (event.key) {
|
|
1124
|
+
switch (event.key.toUpperCase()) {
|
|
1125
|
+
case ' ':
|
|
1126
|
+
case 'ENTER':
|
|
1127
|
+
this.onButtonClick(event);
|
|
1128
|
+
break;
|
|
1129
|
+
/* istanbul ignore next */
|
|
1130
|
+
default:
|
|
1131
|
+
break;
|
|
1132
|
+
}
|
|
1133
|
+
}
|
|
1168
1134
|
};
|
|
1169
1135
|
SkyTabButtonComponent.prototype.onCloseClick = function (event) {
|
|
1170
1136
|
this.closeClick.emit();
|
|
@@ -1175,13 +1141,13 @@
|
|
|
1175
1141
|
};
|
|
1176
1142
|
return SkyTabButtonComponent;
|
|
1177
1143
|
}());
|
|
1178
|
-
SkyTabButtonComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1179
|
-
SkyTabButtonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
1180
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1144
|
+
SkyTabButtonComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTabButtonComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
1145
|
+
SkyTabButtonComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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: i4__namespace.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "skyLibResources": i3__namespace.SkyLibResourcesPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
|
|
1146
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTabButtonComponent, decorators: [{
|
|
1181
1147
|
type: i0.Component,
|
|
1182
1148
|
args: [{
|
|
1183
1149
|
selector: 'sky-tab-button',
|
|
1184
|
-
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
|
|
1150
|
+
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",
|
|
1185
1151
|
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"],
|
|
1186
1152
|
changeDetection: i0.ChangeDetectionStrategy.OnPush,
|
|
1187
1153
|
encapsulation: i0.ViewEncapsulation.None,
|
|
@@ -1329,9 +1295,9 @@
|
|
|
1329
1295
|
};
|
|
1330
1296
|
return SkyTabsetPermalinkService;
|
|
1331
1297
|
}());
|
|
1332
|
-
SkyTabsetPermalinkService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1333
|
-
SkyTabsetPermalinkService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.
|
|
1334
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1298
|
+
SkyTabsetPermalinkService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTabsetPermalinkService, deps: [{ token: i1__namespace$1.ActivatedRoute }, { token: i2__namespace.Location }, { token: i1__namespace$1.Router }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
|
|
1299
|
+
SkyTabsetPermalinkService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTabsetPermalinkService });
|
|
1300
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTabsetPermalinkService, decorators: [{
|
|
1335
1301
|
type: i0.Injectable
|
|
1336
1302
|
}], ctorParameters: function () { return [{ type: i1__namespace$1.ActivatedRoute }, { type: i2__namespace.Location }, { type: i1__namespace$1.Router }]; } });
|
|
1337
1303
|
|
|
@@ -1449,9 +1415,9 @@
|
|
|
1449
1415
|
};
|
|
1450
1416
|
return SkyTabsetService;
|
|
1451
1417
|
}());
|
|
1452
|
-
SkyTabsetService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1453
|
-
SkyTabsetService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.
|
|
1454
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1418
|
+
SkyTabsetService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTabsetService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
|
|
1419
|
+
SkyTabsetService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTabsetService });
|
|
1420
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTabsetService, decorators: [{
|
|
1455
1421
|
type: i0.Injectable
|
|
1456
1422
|
}] });
|
|
1457
1423
|
|
|
@@ -1587,9 +1553,9 @@
|
|
|
1587
1553
|
};
|
|
1588
1554
|
return SkyTabComponent;
|
|
1589
1555
|
}());
|
|
1590
|
-
SkyTabComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1591
|
-
SkyTabComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
1592
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1556
|
+
SkyTabComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTabComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: SkyTabsetPermalinkService }, { token: SkyTabsetService }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
1557
|
+
SkyTabComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyTabComponent, selector: "sky-tab", inputs: { active: "active", disabled: "disabled", permalinkValue: "permalinkValue", tabHeaderCount: "tabHeaderCount", tabHeading: "tabHeading", tabIndex: "tabIndex" }, outputs: { close: "close" }, usesOnChanges: true, ngImport: i0__namespace, template: "<div\n class=\"sky-tab\"\n role=\"tabpanel\"\n [attr.aria-labelledby]=\"tabButtonId\"\n [hidden]=\"!showContent\"\n [id]=\"tabPanelId\"\n>\n <ng-content></ng-content>\n</div>\n", changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
|
|
1558
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTabComponent, decorators: [{
|
|
1593
1559
|
type: i0.Component,
|
|
1594
1560
|
args: [{
|
|
1595
1561
|
selector: 'sky-tab',
|
|
@@ -1731,9 +1697,9 @@
|
|
|
1731
1697
|
};
|
|
1732
1698
|
return SkyTabsetNavButtonComponent;
|
|
1733
1699
|
}());
|
|
1734
|
-
SkyTabsetNavButtonComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1735
|
-
SkyTabsetNavButtonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
1736
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1700
|
+
SkyTabsetNavButtonComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTabsetNavButtonComponent, deps: [{ token: i3__namespace.SkyLibResourcesService }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
1701
|
+
SkyTabsetNavButtonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyTabsetNavButtonComponent, selector: "sky-tabset-nav-button", inputs: { tabset: "tabset", buttonType: "buttonType", buttonText: "buttonText" }, ngImport: i0__namespace, template: "<button\n class=\"sky-btn sky-btn-default\"\n type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"buttonClick()\"\n>\n {{ buttonText }}\n</button>\n" });
|
|
1702
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTabsetNavButtonComponent, decorators: [{
|
|
1737
1703
|
type: i0.Component,
|
|
1738
1704
|
args: [{
|
|
1739
1705
|
selector: 'sky-tabset-nav-button',
|
|
@@ -1799,9 +1765,9 @@
|
|
|
1799
1765
|
};
|
|
1800
1766
|
return SkyTabsetAdapterService;
|
|
1801
1767
|
}());
|
|
1802
|
-
SkyTabsetAdapterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1803
|
-
SkyTabsetAdapterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.
|
|
1804
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1768
|
+
SkyTabsetAdapterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTabsetAdapterService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
|
|
1769
|
+
SkyTabsetAdapterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTabsetAdapterService });
|
|
1770
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTabsetAdapterService, decorators: [{
|
|
1805
1771
|
type: i0.Injectable
|
|
1806
1772
|
}] });
|
|
1807
1773
|
|
|
@@ -1899,7 +1865,7 @@
|
|
|
1899
1865
|
* @deprecated The property was designed to create wizards by setting tabStyle="wizard" on tabsets in modals,
|
|
1900
1866
|
* but this wizard implementation was replaced by the
|
|
1901
1867
|
* [progress indicator component](https://developer.blackbaud.com/skyux/components/progress-indicator).
|
|
1902
|
-
* @default
|
|
1868
|
+
* @default "tabs"
|
|
1903
1869
|
*/
|
|
1904
1870
|
set: function (value) {
|
|
1905
1871
|
/*istanbul ignore else*/
|
|
@@ -2179,13 +2145,13 @@
|
|
|
2179
2145
|
};
|
|
2180
2146
|
return SkyTabsetComponent;
|
|
2181
2147
|
}());
|
|
2182
|
-
SkyTabsetComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
2183
|
-
SkyTabsetComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
2148
|
+
SkyTabsetComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTabsetComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.ElementRef }, { token: SkyTabsetAdapterService }, { token: SkyTabsetPermalinkService }, { token: SkyTabsetService }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
2149
|
+
SkyTabsetComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyTabsetComponent, selector: "sky-tabset", inputs: { active: "active", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", permalinkId: "permalinkId", tabStyle: "tabStyle" }, outputs: { activeChange: "activeChange", newTab: "newTab", openTab: "openTab", tabIndexesChange: "tabIndexesChange" }, providers: [
|
|
2184
2150
|
SkyTabsetAdapterService,
|
|
2185
2151
|
SkyTabsetPermalinkService,
|
|
2186
2152
|
SkyTabsetService,
|
|
2187
|
-
], queries: [{ propertyName: "tabs", predicate: SkyTabComponent }], ngImport: i0__namespace, template: "<div\n class=\"sky-tabset\"\n role=\"tablist\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [ngClass]=\"\n 'sky-tabset-mode-' + tabDisplayMode + ' sky-tabset-style-' + tabStyle\n \"\n (window:resize)=\"onWindowResize()\"\n>\n <span class=\"sky-tabset-dropdown\">\n <sky-dropdown *ngIf=\"tabDisplayMode === 'dropdown'\" buttonType=\"tab\">\n <sky-dropdown-button>\n {{ dropdownTriggerButtonText }}\n </sky-dropdown-button>\n <sky-dropdown-menu>\n <sky-dropdown-item\n *ngFor=\"let tabButton of tabButtons\"\n class=\"sky-tab-dropdown-menu-item\"\n >\n <div\n class=\"sky-tab-dropdown-item\"\n [ngClass]=\"{\n 'sky-tab-dropdown-item-selected': tabButton.active\n }\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n tabButtonTemplate;\n context: {\n $implicit: tabButton\n }\n \"\n ></ng-container>\n </div>\n </sky-dropdown-item>\n </sky-dropdown-menu>\n </sky-dropdown>\n </span>\n <span class=\"sky-tabset-tabs\">\n <ng-container *ngFor=\"let tabButton of tabButtons\">\n <ng-container\n *ngTemplateOutlet=\"\n tabButtonTemplate;\n context: {\n $implicit: tabButton\n }\n \"\n ></ng-container>\n </ng-container>\n </span>\n <span class=\"sky-tabset-btns\">\n <button\n *ngIf=\"newTab.observers.length > 0\"\n class=\"sky-btn sky-btn-icon sky-tabset-btn-new sky-margin-inline-compact\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_tab_add' | skyLibResources\"\n [skyThemeClass]=\"{\n 'sky-margin-inline-sm': 'modern'\n }\"\n (click)=\"onNewTabClick()\"\n >\n <sky-icon icon=\"plus-circle\" size=\"lg\"> </sky-icon>\n </button>\n <button\n *ngIf=\"openTab.observers.length > 0\"\n class=\"sky-btn sky-btn-icon sky-tabset-btn-open sky-margin-inline-compact\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_tab_open' | skyLibResources\"\n [skyThemeClass]=\"{\n 'sky-margin-inline-sm': 'modern'\n }\"\n (click)=\"onOpenTabClick()\"\n >\n <sky-icon icon=\"folder-open-o\" size=\"lg\"> </sky-icon>\n </button>\n </span>\n</div>\n<ng-content></ng-content>\n\n<ng-template let-tabButton #tabButtonTemplate>\n <sky-tab-button\n [active]=\"tabButton.active\"\n [ariaControls]=\"tabButton.ariaControls\"\n [buttonHref]=\"tabButton.buttonHref\"\n [buttonId]=\"tabButton.buttonId\"\n [buttonText]=\"tabButton.buttonText\"\n [buttonTextCount]=\"tabButton.buttonTextCount\"\n [closeable]=\"tabButton.closeable\"\n [disabled]=\"tabButton.disabled\"\n [tabStyle]=\"tabStyle\"\n (buttonClick)=\"onTabButtonClick(tabButton)\"\n (closeClick)=\"onTabCloseClick(tabButton)\"\n ></sky-tab-button>\n</ng-template>\n", styles: [".sky-tabset{align-items:center;border-bottom:2px solid #0974a1;display:flex;list-style-type:none;margin:0;overflow:hidden;padding:0 0 0 15px;white-space:nowrap}.sky-tabset.sky-tabset-style-wizard{border-bottom:none;padding-bottom:10px;padding-left:0}.sky-tabset-btns{order:1;padding-left:10px}.sky-tabset-dropdown{order:0;max-width:100%}.sky-tabset-mode-dropdown{line-height:0}.sky-tabset-mode-dropdown .sky-tabset-tabs{visibility:hidden;order:2}.sky-tab-dropdown-menu-item sky-tab-button{display:flex;min-width:300px}.sky-tab-dropdown-menu-item .sky-dropdown-item{margin:0}.sky-tab-dropdown-menu-item .sky-btn-tab-wrapper{width:100%;margin-right:0}.sky-tab-dropdown-menu-item .sky-btn-tab{margin:0;border-radius:0;width:100%;display:flex}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-tab-heading{flex:1 1 auto}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-btn-tab-close{flex:0 1 auto}.sky-tabset-tabs{order:0;white-space:nowrap}.sky-tabset-btn-new,.sky-tabset-btn-open{color:#0974a1}.sky-theme-modern .sky-tabset{border-bottom:1px solid #d2d2d2;overflow:visible}.sky-theme-modern .sky-tab-dropdown-menu-item .sky-btn-tab-wrapper{margin-right:0}\n"], components: [{ type: i4__namespace$
|
|
2188
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
2153
|
+
], queries: [{ propertyName: "tabs", predicate: SkyTabComponent }], ngImport: i0__namespace, template: "<div\n class=\"sky-tabset\"\n role=\"tablist\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [ngClass]=\"\n 'sky-tabset-mode-' + tabDisplayMode + ' sky-tabset-style-' + tabStyle\n \"\n (window:resize)=\"onWindowResize()\"\n>\n <span class=\"sky-tabset-dropdown\">\n <sky-dropdown *ngIf=\"tabDisplayMode === 'dropdown'\" buttonType=\"tab\">\n <sky-dropdown-button>\n {{ dropdownTriggerButtonText }}\n </sky-dropdown-button>\n <sky-dropdown-menu>\n <sky-dropdown-item\n *ngFor=\"let tabButton of tabButtons\"\n class=\"sky-tab-dropdown-menu-item\"\n >\n <div\n class=\"sky-tab-dropdown-item\"\n [ngClass]=\"{\n 'sky-tab-dropdown-item-selected': tabButton.active\n }\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n tabButtonTemplate;\n context: {\n $implicit: tabButton\n }\n \"\n ></ng-container>\n </div>\n </sky-dropdown-item>\n </sky-dropdown-menu>\n </sky-dropdown>\n </span>\n <span class=\"sky-tabset-tabs\">\n <ng-container *ngFor=\"let tabButton of tabButtons\">\n <ng-container\n *ngTemplateOutlet=\"\n tabButtonTemplate;\n context: {\n $implicit: tabButton\n }\n \"\n ></ng-container>\n </ng-container>\n </span>\n <span class=\"sky-tabset-btns\">\n <button\n *ngIf=\"newTab.observers.length > 0\"\n class=\"sky-btn sky-btn-icon sky-tabset-btn-new sky-margin-inline-compact\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_tab_add' | skyLibResources\"\n [skyThemeClass]=\"{\n 'sky-margin-inline-sm': 'modern'\n }\"\n (click)=\"onNewTabClick()\"\n >\n <sky-icon icon=\"plus-circle\" size=\"lg\"> </sky-icon>\n </button>\n <button\n *ngIf=\"openTab.observers.length > 0\"\n class=\"sky-btn sky-btn-icon sky-tabset-btn-open sky-margin-inline-compact\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_tab_open' | skyLibResources\"\n [skyThemeClass]=\"{\n 'sky-margin-inline-sm': 'modern'\n }\"\n (click)=\"onOpenTabClick()\"\n >\n <sky-icon icon=\"folder-open-o\" size=\"lg\"> </sky-icon>\n </button>\n </span>\n</div>\n<ng-content></ng-content>\n\n<ng-template let-tabButton #tabButtonTemplate>\n <sky-tab-button\n [active]=\"tabButton.active\"\n [ariaControls]=\"tabButton.ariaControls\"\n [buttonHref]=\"tabButton.buttonHref\"\n [buttonId]=\"tabButton.buttonId\"\n [buttonText]=\"tabButton.buttonText\"\n [buttonTextCount]=\"tabButton.buttonTextCount\"\n [closeable]=\"tabButton.closeable\"\n [disabled]=\"tabButton.disabled\"\n [tabStyle]=\"tabStyle\"\n (buttonClick)=\"onTabButtonClick(tabButton)\"\n (closeClick)=\"onTabCloseClick(tabButton)\"\n ></sky-tab-button>\n</ng-template>\n", styles: [".sky-tabset{align-items:center;border-bottom:2px solid #0974a1;display:flex;list-style-type:none;margin:0;overflow:hidden;padding:0 0 0 15px;white-space:nowrap}.sky-tabset.sky-tabset-style-wizard{border-bottom:none;padding-bottom:10px;padding-left:0}.sky-tabset-btns{order:1;padding-left:10px}.sky-tabset-dropdown{order:0;max-width:100%}.sky-tabset-mode-dropdown{line-height:0}.sky-tabset-mode-dropdown .sky-tabset-tabs{visibility:hidden;order:2}.sky-tab-dropdown-menu-item sky-tab-button{display:flex;min-width:300px}.sky-tab-dropdown-menu-item .sky-dropdown-item{margin:0}.sky-tab-dropdown-menu-item .sky-btn-tab-wrapper{width:100%;margin-right:0}.sky-tab-dropdown-menu-item .sky-btn-tab{margin:0;border-radius:0;width:100%;display:flex}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-tab-heading{flex:1 1 auto}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-btn-tab-close{flex:0 1 auto}.sky-tabset-tabs{order:0;white-space:nowrap}.sky-tabset-btn-new,.sky-tabset-btn-open{color:#0974a1}.sky-theme-modern .sky-tabset{border-bottom:1px solid #d2d2d2;overflow:visible}.sky-theme-modern .sky-tab-dropdown-menu-item .sky-btn-tab-wrapper{margin-right:0}\n"], components: [{ type: i4__namespace$1.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "dismissOnBlur", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { type: i4__namespace$1.λ2, selector: "sky-dropdown-button" }, { type: i4__namespace$1.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { type: i4__namespace$1.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { type: i4__namespace.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { type: SkyTabButtonComponent, selector: "sky-tab-button", inputs: ["active", "ariaControls", "buttonHref", "buttonId", "buttonText", "buttonTextCount", "closeable", "disabled", "tabStyle"], outputs: ["buttonClick", "closeClick"] }], directives: [{ type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i8__namespace.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }], pipes: { "skyLibResources": i3__namespace.SkyLibResourcesPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
|
|
2154
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTabsetComponent, decorators: [{
|
|
2189
2155
|
type: i0.Component,
|
|
2190
2156
|
args: [{
|
|
2191
2157
|
selector: 'sky-tabset',
|
|
@@ -2227,27 +2193,27 @@
|
|
|
2227
2193
|
}
|
|
2228
2194
|
return SkyTabsModule;
|
|
2229
2195
|
}());
|
|
2230
|
-
SkyTabsModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
2231
|
-
SkyTabsModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.
|
|
2196
|
+
SkyTabsModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTabsModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
|
|
2197
|
+
SkyTabsModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTabsModule, declarations: [SkyTabButtonComponent,
|
|
2232
2198
|
SkyTabComponent,
|
|
2233
2199
|
SkyTabsetComponent,
|
|
2234
2200
|
SkyTabsetNavButtonComponent], imports: [i2.CommonModule,
|
|
2235
2201
|
i1$1.RouterModule,
|
|
2236
|
-
i4$
|
|
2202
|
+
i4$1.SkyDropdownModule,
|
|
2237
2203
|
i3.SkyI18nModule,
|
|
2238
2204
|
i4.SkyIconModule,
|
|
2239
2205
|
SkyTabsResourcesModule,
|
|
2240
|
-
|
|
2241
|
-
SkyTabsModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.
|
|
2206
|
+
i8.SkyThemeModule], exports: [SkyTabComponent, SkyTabsetComponent, SkyTabsetNavButtonComponent] });
|
|
2207
|
+
SkyTabsModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTabsModule, imports: [[
|
|
2242
2208
|
i2.CommonModule,
|
|
2243
2209
|
i1$1.RouterModule,
|
|
2244
|
-
i4$
|
|
2210
|
+
i4$1.SkyDropdownModule,
|
|
2245
2211
|
i3.SkyI18nModule,
|
|
2246
2212
|
i4.SkyIconModule,
|
|
2247
2213
|
SkyTabsResourcesModule,
|
|
2248
|
-
|
|
2214
|
+
i8.SkyThemeModule,
|
|
2249
2215
|
]] });
|
|
2250
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
2216
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTabsModule, decorators: [{
|
|
2251
2217
|
type: i0.NgModule,
|
|
2252
2218
|
args: [{
|
|
2253
2219
|
declarations: [
|
|
@@ -2259,11 +2225,11 @@
|
|
|
2259
2225
|
imports: [
|
|
2260
2226
|
i2.CommonModule,
|
|
2261
2227
|
i1$1.RouterModule,
|
|
2262
|
-
i4$
|
|
2228
|
+
i4$1.SkyDropdownModule,
|
|
2263
2229
|
i3.SkyI18nModule,
|
|
2264
2230
|
i4.SkyIconModule,
|
|
2265
2231
|
SkyTabsResourcesModule,
|
|
2266
|
-
|
|
2232
|
+
i8.SkyThemeModule,
|
|
2267
2233
|
],
|
|
2268
2234
|
exports: [SkyTabComponent, SkyTabsetComponent, SkyTabsetNavButtonComponent],
|
|
2269
2235
|
}]
|