carbon-components-angular 3.13.1 → 3.13.2
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/bundle/carbon-angular.umd.js +5 -5
- package/bundle/carbon-angular.umd.js.map +1 -1
- package/dialog/dialog.module.ngfactory.js.map +1 -1
- package/dialog/tooltip/tooltip.component.js +14 -1
- package/dialog/tooltip/tooltip.component.js.map +1 -1
- package/dialog/tooltip/tooltip.component.metadata.json +1 -1
- package/dialog/tooltip/tooltip.component.ngfactory.js +1 -1
- package/dialog/tooltip/tooltip.component.ngfactory.js.map +1 -1
- package/docs/documentation/components/TabHeaders.html +131 -23
- package/docs/documentation/components/Tabs.html +76 -12
- package/docs/documentation/components/Tooltip.html +22 -6
- package/docs/documentation/coverage.html +4 -4
- package/docs/documentation/js/search/search_index.js +2 -2
- package/docs/storybook/iframe.html +3 -3
- package/docs/storybook/{main.af986e1c1a23f0d31b49.bundle.js → main.a309b5fd3379fd894c7e.bundle.js} +45 -4
- package/docs/storybook/main.a309b5fd3379fd894c7e.bundle.js.map +1 -0
- package/docs/storybook/{runtime~main.af986e1c1a23f0d31b49.bundle.js → runtime~main.a309b5fd3379fd894c7e.bundle.js} +1 -1
- package/docs/storybook/{runtime~main.af986e1c1a23f0d31b49.bundle.js.map → runtime~main.a309b5fd3379fd894c7e.bundle.js.map} +1 -1
- package/docs/storybook/{vendors~main.af986e1c1a23f0d31b49.bundle.js → vendors~main.a309b5fd3379fd894c7e.bundle.js} +1 -1
- package/docs/storybook/{vendors~main.af986e1c1a23f0d31b49.bundle.js.map → vendors~main.a309b5fd3379fd894c7e.bundle.js.map} +1 -1
- package/package.json +1 -1
- package/tabs/tab-headers.component.d.ts +9 -0
- package/tabs/tab-headers.component.js +10 -2
- package/tabs/tab-headers.component.js.map +1 -1
- package/tabs/tab-headers.component.metadata.json +1 -1
- package/tabs/tab-headers.component.ngfactory.js +7 -4
- package/tabs/tab-headers.component.ngfactory.js.map +1 -1
- package/tabs/tab-headers.component.ngsummary.json +1 -1
- package/tabs/tabs.component.d.ts +8 -0
- package/tabs/tabs.component.js +3 -1
- package/tabs/tabs.component.js.map +1 -1
- package/tabs/tabs.component.metadata.json +1 -1
- package/tabs/tabs.component.ngfactory.js +10 -4
- package/tabs/tabs.component.ngfactory.js.map +1 -1
- package/tabs/tabs.component.ngsummary.json +1 -1
- package/tabs/tabs.module.ngfactory.js.map +1 -1
- package/docs/storybook/main.af986e1c1a23f0d31b49.bundle.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog.module.ngfactory.js","sourceRoot":"","sources":["../src/dialog/dialog.module.ngfactory.ts"],"names":[],"mappings":"","sourcesContent":["import * as i0 from '@angular/core';\nimport * as i1 from './dialog.module';\nimport * as i2 from '@angular/common';\nimport * as i3 from '../placeholder/placeholder.component';\nimport * as i4 from './dialog.component';\nimport * as i5 from './tooltip/tooltip.component';\nimport * as i6 from './tooltip/tooltip-definition.component';\nimport * as i7 from './tooltip/tooltip-icon.component';\nimport * as i8 from './overflow-menu/overflow-menu.component';\nimport * as i9 from './overflow-menu/overflow-menu-pane.component';\nimport * as i10 from './dialog.directive';\nimport * as i11 from './tooltip/tooltip.directive';\nimport * as i12 from './tooltip/ellipsis-tooltip.directive';\nimport * as i13 from './overflow-menu/overflow-menu.directive';\nimport * as i14 from './overflow-menu/overflow-menu-option.component';\nimport * as i15 from './dialog-placeholder.component';\nimport * as i16 from '../i18n/replace.pipe';\nimport * as i17 from '../i18n/i18n.module';\nimport * as i18 from '../placeholder/placeholder.module';\nimport * as i19 from '../experimental.module';\nexport const DialogModuleNgFactory:i0.NgModuleFactory<i1.DialogModule> = (null as any);\nvar _decl0_0:i2.NgClass = (<any>(null as any));\nvar _decl0_1:i2.NgComponentOutlet = (<any>(null as any));\nvar _decl0_2:i2.NgForOf<any> = (<any>(null as any));\nvar _decl0_3:i2.NgIf = (<any>(null as any));\nvar _decl0_4:i2.NgTemplateOutlet = (<any>(null as any));\nvar _decl0_5:i2.NgStyle = (<any>(null as any));\nvar _decl0_6:i2.NgSwitch = (<any>(null as any));\nvar _decl0_7:i2.NgSwitchCase = (<any>(null as any));\nvar _decl0_8:i2.NgSwitchDefault = (<any>(null as any));\nvar _decl0_9:i2.NgPlural = (<any>(null as any));\nvar _decl0_10:i2.NgPluralCase = (<any>(null as any));\nvar _decl0_11:i3.Placeholder = (<any>(null as any));\nvar _decl0_12:i4.Dialog = (<any>(null as any));\nvar _decl0_13:i5.Tooltip = (<any>(null as any));\nvar _decl0_14:i6.TooltipDefinition = (<any>(null as any));\nvar _decl0_15:i7.TooltipIcon = (<any>(null as any));\nvar _decl0_16:i8.OverflowMenu = (<any>(null as any));\nvar _decl0_17:i9.OverflowMenuPane = (<any>(null as any));\nvar _decl0_18:i10.DialogDirective = (<any>(null as any));\nvar _decl0_19:i11.TooltipDirective = (<any>(null as any));\nvar _decl0_20:i12.EllipsisTooltip = (<any>(null as any));\nvar _decl0_21:i13.OverflowMenuDirective = (<any>(null as any));\nvar _decl0_22:i14.OverflowMenuOption = (<any>(null as any));\nvar _decl0_23:i15.DialogPlaceholder = (<any>(null as any));\nvar _decl0_24:i2.AsyncPipe = (<any>(null as any));\nvar _decl0_25:i2.UpperCasePipe = (<any>(null as any));\nvar _decl0_26:i2.LowerCasePipe = (<any>(null as any));\nvar _decl0_27:i2.JsonPipe = (<any>(null as any));\nvar _decl0_28:i2.SlicePipe = (<any>(null as any));\nvar _decl0_29:i2.DecimalPipe = (<any>(null as any));\nvar _decl0_30:i2.PercentPipe = (<any>(null as any));\nvar _decl0_31:i2.TitleCasePipe = (<any>(null as any));\nvar _decl0_32:i2.CurrencyPipe = (<any>(null as any));\nvar _decl0_33:i2.DatePipe = (<any>(null as any));\nvar _decl0_34:i2.I18nPluralPipe = (<any>(null as any));\nvar _decl0_35:i2.I18nSelectPipe = (<any>(null as any));\nvar _decl0_36:i2.KeyValuePipe = (<any>(null as any));\nvar _decl0_37:i16.ReplacePipe = (<any>(null as any));\nvar _decl0_38:i2.CommonModule = (<any>(null as any));\nvar _decl0_39:i17.I18nModule = (<any>(null as any));\nvar _decl0_40:i18.PlaceholderModule = (<any>(null as any));\nvar _decl0_41:i19.ExperimentalModule = (<any>(null as any));\nvar _decl0_42:i0.TemplateRef<any> = (<any>(null as any));\nvar _decl0_43:i0.ElementRef<any> = (<any>(null as any));\nfunction _View_Dialog_Host_1_0():void {\n var _any:any = (null as any);\n}\nfunction _View_Dialog_1_0():void {\n var _any:any = (null as any);\n}\nfunction _View_Tooltip_Host_2_0():void {\n var _any:any = (null as any);\n}\nfunction _View_Tooltip_2_0():void {\n var _any:any = (null as any);\n const currVal_0:any = _decl0_13.dialogConfig.compID;\n currVal_0;\n const currVal_1:any = _decl0_13.role;\n currVal_1;\n const currVal_2:any = _decl0_13.
|
|
1
|
+
{"version":3,"file":"dialog.module.ngfactory.js","sourceRoot":"","sources":["../src/dialog/dialog.module.ngfactory.ts"],"names":[],"mappings":"","sourcesContent":["import * as i0 from '@angular/core';\nimport * as i1 from './dialog.module';\nimport * as i2 from '@angular/common';\nimport * as i3 from '../placeholder/placeholder.component';\nimport * as i4 from './dialog.component';\nimport * as i5 from './tooltip/tooltip.component';\nimport * as i6 from './tooltip/tooltip-definition.component';\nimport * as i7 from './tooltip/tooltip-icon.component';\nimport * as i8 from './overflow-menu/overflow-menu.component';\nimport * as i9 from './overflow-menu/overflow-menu-pane.component';\nimport * as i10 from './dialog.directive';\nimport * as i11 from './tooltip/tooltip.directive';\nimport * as i12 from './tooltip/ellipsis-tooltip.directive';\nimport * as i13 from './overflow-menu/overflow-menu.directive';\nimport * as i14 from './overflow-menu/overflow-menu-option.component';\nimport * as i15 from './dialog-placeholder.component';\nimport * as i16 from '../i18n/replace.pipe';\nimport * as i17 from '../i18n/i18n.module';\nimport * as i18 from '../placeholder/placeholder.module';\nimport * as i19 from '../experimental.module';\nexport const DialogModuleNgFactory:i0.NgModuleFactory<i1.DialogModule> = (null as any);\nvar _decl0_0:i2.NgClass = (<any>(null as any));\nvar _decl0_1:i2.NgComponentOutlet = (<any>(null as any));\nvar _decl0_2:i2.NgForOf<any> = (<any>(null as any));\nvar _decl0_3:i2.NgIf = (<any>(null as any));\nvar _decl0_4:i2.NgTemplateOutlet = (<any>(null as any));\nvar _decl0_5:i2.NgStyle = (<any>(null as any));\nvar _decl0_6:i2.NgSwitch = (<any>(null as any));\nvar _decl0_7:i2.NgSwitchCase = (<any>(null as any));\nvar _decl0_8:i2.NgSwitchDefault = (<any>(null as any));\nvar _decl0_9:i2.NgPlural = (<any>(null as any));\nvar _decl0_10:i2.NgPluralCase = (<any>(null as any));\nvar _decl0_11:i3.Placeholder = (<any>(null as any));\nvar _decl0_12:i4.Dialog = (<any>(null as any));\nvar _decl0_13:i5.Tooltip = (<any>(null as any));\nvar _decl0_14:i6.TooltipDefinition = (<any>(null as any));\nvar _decl0_15:i7.TooltipIcon = (<any>(null as any));\nvar _decl0_16:i8.OverflowMenu = (<any>(null as any));\nvar _decl0_17:i9.OverflowMenuPane = (<any>(null as any));\nvar _decl0_18:i10.DialogDirective = (<any>(null as any));\nvar _decl0_19:i11.TooltipDirective = (<any>(null as any));\nvar _decl0_20:i12.EllipsisTooltip = (<any>(null as any));\nvar _decl0_21:i13.OverflowMenuDirective = (<any>(null as any));\nvar _decl0_22:i14.OverflowMenuOption = (<any>(null as any));\nvar _decl0_23:i15.DialogPlaceholder = (<any>(null as any));\nvar _decl0_24:i2.AsyncPipe = (<any>(null as any));\nvar _decl0_25:i2.UpperCasePipe = (<any>(null as any));\nvar _decl0_26:i2.LowerCasePipe = (<any>(null as any));\nvar _decl0_27:i2.JsonPipe = (<any>(null as any));\nvar _decl0_28:i2.SlicePipe = (<any>(null as any));\nvar _decl0_29:i2.DecimalPipe = (<any>(null as any));\nvar _decl0_30:i2.PercentPipe = (<any>(null as any));\nvar _decl0_31:i2.TitleCasePipe = (<any>(null as any));\nvar _decl0_32:i2.CurrencyPipe = (<any>(null as any));\nvar _decl0_33:i2.DatePipe = (<any>(null as any));\nvar _decl0_34:i2.I18nPluralPipe = (<any>(null as any));\nvar _decl0_35:i2.I18nSelectPipe = (<any>(null as any));\nvar _decl0_36:i2.KeyValuePipe = (<any>(null as any));\nvar _decl0_37:i16.ReplacePipe = (<any>(null as any));\nvar _decl0_38:i2.CommonModule = (<any>(null as any));\nvar _decl0_39:i17.I18nModule = (<any>(null as any));\nvar _decl0_40:i18.PlaceholderModule = (<any>(null as any));\nvar _decl0_41:i19.ExperimentalModule = (<any>(null as any));\nvar _decl0_42:i0.TemplateRef<any> = (<any>(null as any));\nvar _decl0_43:i0.ElementRef<any> = (<any>(null as any));\nfunction _View_Dialog_Host_1_0():void {\n var _any:any = (null as any);\n}\nfunction _View_Dialog_1_0():void {\n var _any:any = (null as any);\n}\nfunction _View_Tooltip_Host_2_0():void {\n var _any:any = (null as any);\n}\nfunction _View_Tooltip_2_0():void {\n var _any:any = (null as any);\n const currVal_0:any = _decl0_13.dialogConfig.compID;\n currVal_0;\n const currVal_1:any = _decl0_13.role;\n currVal_1;\n const currVal_2:any = _decl0_13.placement;\n currVal_2;\n const currVal_3:any = _decl0_13.hasContentTemplate;\n currVal_3;\n const currVal_4:any = !_decl0_13.hasContentTemplate;\n currVal_4;\n}\nfunction _View_TooltipDefinition_Host_3_0():void {\n var _any:any = (null as any);\n}\nfunction _View_TooltipDefinition_3_0():void {\n var _any:any = (null as any);\n const currVal_0:any = _decl0_14.id;\n currVal_0;\n const currVal_1:any = (<any>{'bx--tooltip--definition__bottom':(_decl0_14.placement === 'bottom'),\n 'bx--tooltip--definition__top':(_decl0_14.placement === 'top')});\n currVal_1;\n const currVal_2:any = _decl0_14.id;\n currVal_2;\n const currVal_3:any = _decl0_14.content;\n currVal_3;\n const currVal_4:any = _decl0_14.content;\n currVal_4;\n}\nfunction _View_TooltipIcon_Host_4_0():void {\n var _any:any = (null as any);\n}\nfunction _View_TooltipIcon_4_0():void {\n var _any:any = (null as any);\n const currVal_0:any = 'bx--tooltip__trigger';\n currVal_0;\n const currVal_1:any = (<any>{'bx--tooltip--icon__bottom':(_decl0_15.placement === 'bottom'),\n 'bx--tooltip--icon__top':(_decl0_15.placement === 'top')});\n currVal_1;\n const currVal_2:any = _decl0_15.content;\n currVal_2;\n}\nfunction _View_OverflowMenu_Host_5_0():void {\n var _any:any = (null as any);\n}\nfunction _View_OverflowMenu_5_0():void {\n var _any:any = (null as any);\n const currVal_0:any = 'bx--overflow-menu';\n currVal_0;\n const currVal_1:any = (<any>{'bx--overflow-menu--open':_decl0_16.open});\n currVal_1;\n const currVal_2:any = 'bottom';\n currVal_2;\n const currVal_3:any = _any;\n currVal_3;\n const currVal_4:any = _decl0_16.flip;\n currVal_4;\n const currVal_5:any = _decl0_16.buttonLabel;\n currVal_5;\n const pd_6:any = ((<any>(_decl0_16.open = true)) !== false);\n const pd_7:any = ((<any>(_decl0_16.open = false)) !== false);\n}\nfunction _View_OverflowMenuPane_Host_6_0():void {\n var _any:any = (null as any);\n}\nfunction _View_OverflowMenuPane_6_0():void {\n var _any:any = (null as any);\n const currVal_0:any = 'bx--overflow-menu-options bx--overflow-menu-options--open';\n currVal_0;\n const currVal_1:any = (<any>{'bx--overflow-menu--flip':_decl0_17.dialogConfig.flip});\n currVal_1;\n const currVal_2:any = _decl0_17.dialogConfig.menuLabel;\n currVal_2;\n const currVal_3:any = _decl0_17.dialogConfig.menuLabel;\n currVal_3;\n const currVal_4:any = (<any>{overflowMenu:_decl0_17});\n currVal_4;\n const currVal_5:any = _decl0_17.dialogConfig.content;\n currVal_5;\n const pd_6:any = ((<any>_decl0_17.doClose()) !== false);\n}\nfunction _View_OverflowMenuOption_Host_7_0():void {\n var _any:any = (null as any);\n}\nfunction _View_OverflowMenuOption_7_0():void {\n var _any:any = (null as any);\n const currVal_0:any = !_decl0_22.href;\n currVal_0;\n const currVal_1:any = _decl0_22.href;\n currVal_1;\n}\nfunction _View_DialogPlaceholder_Host_8_0():void {\n var _any:any = (null as any);\n}\nfunction _View_DialogPlaceholder_8_0():void {\n var _any:any = (null as any);\n}\n"]}
|
|
@@ -31,6 +31,7 @@ var __extends = (this && this.__extends) || (function () {
|
|
|
31
31
|
import { Component, TemplateRef, HostBinding } from "@angular/core";
|
|
32
32
|
import { getFocusElementList } from "./../../common/tab.service";
|
|
33
33
|
import { Dialog } from "./../dialog.component";
|
|
34
|
+
import { position } from "@carbon/utils-position";
|
|
34
35
|
/**
|
|
35
36
|
* Extend the `Dialog` component to create a tooltip for exposing content.
|
|
36
37
|
*/
|
|
@@ -54,6 +55,18 @@ var Tooltip = /** @class */ (function (_super) {
|
|
|
54
55
|
* Check whether there is a template for the `Tooltip` content.
|
|
55
56
|
*/
|
|
56
57
|
Tooltip.prototype.onDialogInit = function () {
|
|
58
|
+
this.addGap["bottom"] = function (pos) {
|
|
59
|
+
return position.addOffset(pos, 3, 0);
|
|
60
|
+
};
|
|
61
|
+
this.addGap["top"] = function (pos) {
|
|
62
|
+
return position.addOffset(pos, -10, 0);
|
|
63
|
+
};
|
|
64
|
+
this.addGap["left"] = function (pos) {
|
|
65
|
+
return position.addOffset(pos, -3, -6);
|
|
66
|
+
};
|
|
67
|
+
this.addGap["right"] = function (pos) {
|
|
68
|
+
return position.addOffset(pos, -3, 6);
|
|
69
|
+
};
|
|
57
70
|
this.hasContentTemplate = this.dialogConfig.content instanceof TemplateRef;
|
|
58
71
|
};
|
|
59
72
|
Tooltip.prototype.afterDialogViewInit = function () {
|
|
@@ -66,7 +79,7 @@ var Tooltip = /** @class */ (function (_super) {
|
|
|
66
79
|
Tooltip.decorators = [
|
|
67
80
|
{ type: Component, args: [{
|
|
68
81
|
selector: "ibm-tooltip",
|
|
69
|
-
template: "\n\t\t<div\n\t\t\t#dialog\n\t\t\t[id]=\"dialogConfig.compID\"\n\t\t\t[attr.role]=\"role\"\n\t\t\tclass=\"bx--tooltip bx--tooltip--shown\">\n\t\t\t<span class=\"bx--tooltip__caret\" aria-hidden=\"true\"></span>\n\t\t\t<ng-template\n\t\t\t\t\t*ngIf=\"hasContentTemplate\"\n\t\t\t\t\t[ngTemplateOutlet]=\"dialogConfig.content\"\n\t\t\t\t\t[ngTemplateOutletContext]=\"{tooltip: this}\">\n\t\t\t</ng-template>\n\t\t\t<p\n\t\t\t\t*ngIf=\"!hasContentTemplate\">\n\t\t\t\t{{dialogConfig.content}}\n\t\t\t</p>\n\t\t</div>\n\t\t"
|
|
82
|
+
template: "\n\t\t<div\n\t\t\t#dialog\n\t\t\t[id]=\"dialogConfig.compID\"\n\t\t\t[attr.role]=\"role\"\n\t\t\t[attr.data-floating-menu-direction]=\"placement\"\n\t\t\tclass=\"bx--tooltip bx--tooltip--shown\">\n\t\t\t<span class=\"bx--tooltip__caret\" aria-hidden=\"true\"></span>\n\t\t\t<ng-template\n\t\t\t\t\t*ngIf=\"hasContentTemplate\"\n\t\t\t\t\t[ngTemplateOutlet]=\"dialogConfig.content\"\n\t\t\t\t\t[ngTemplateOutletContext]=\"{tooltip: this}\">\n\t\t\t</ng-template>\n\t\t\t<p\n\t\t\t\t*ngIf=\"!hasContentTemplate\">\n\t\t\t\t{{dialogConfig.content}}\n\t\t\t</p>\n\t\t</div>\n\t\t"
|
|
70
83
|
},] },
|
|
71
84
|
];
|
|
72
85
|
Tooltip.propDecorators = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip.component.js","sourceRoot":"","sources":["../../src/dialog/tooltip/tooltip.component.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,OAAO,EACN,SAAS,EACT,WAAW,EACX,WAAW,EAEX,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAEjE,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"tooltip.component.js","sourceRoot":"","sources":["../../src/dialog/tooltip/tooltip.component.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,OAAO,EACN,SAAS,EACT,WAAW,EACX,WAAW,EAEX,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAEjE,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAElD;;GAEG;AACH;IAsB6B,2BAAM;IAtBnC;QAAA,qEA4DC;QArC8B,WAAK,GAAG,cAAc,CAAC;QACrD;;WAEG;QACI,wBAAkB,GAAG,KAAK,CAAC;QAClC;;;WAGG;QACI,UAAI,GAAG,SAAS,CAAC;;IA4BzB,CAAC;IA3BA;;OAEG;IACH,8BAAY,GAAZ;QACC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,UAAA,GAAG;YAC1B,OAAO,QAAQ,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;QACtC,CAAC,CAAC;QACF,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,UAAA,GAAG;YACvB,OAAO,QAAQ,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;QACxC,CAAC,CAAC;QACF,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,GAAG,UAAA,GAAG;YACxB,OAAO,QAAQ,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;QACxC,CAAC,CAAC;QACF,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,UAAA,GAAG;YACzB,OAAO,QAAQ,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QACvC,CAAC,CAAC;QAEF,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,YAAY,WAAW,CAAC;IAC5E,CAAC;IAED,qCAAmB,GAAnB;QACC,IAAM,iBAAiB,GAAG,mBAAmB,CAAC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;QACzE,IAAI,iBAAiB,CAAC,MAAM,GAAG,CAAC,EAAE;YACjC,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC;YACrB,iBAAiB,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;SAC7B;IACF,CAAC;;gBA3DD,SAAS,SAAC;oBACV,QAAQ,EAAE,aAAa;oBACvB,QAAQ,EAAE,ikBAkBR;iBACF;;;wBAEC,WAAW,SAAC,eAAe;;IAqC7B,cAAC;CAAA,AA5DD,CAsB6B,MAAM,GAsClC;SAtCY,OAAO","sourcesContent":["import {\n\tComponent,\n\tTemplateRef,\n\tHostBinding,\n\tInput\n} from \"@angular/core\";\nimport { getFocusElementList } from \"./../../common/tab.service\";\n\nimport { Dialog } from \"./../dialog.component\";\nimport { position } from \"@carbon/utils-position\";\n\n/**\n * Extend the `Dialog` component to create a tooltip for exposing content.\n */\n@Component({\n\tselector: \"ibm-tooltip\",\n\ttemplate: `\n\t\t<div\n\t\t\t#dialog\n\t\t\t[id]=\"dialogConfig.compID\"\n\t\t\t[attr.role]=\"role\"\n\t\t\t[attr.data-floating-menu-direction]=\"placement\"\n\t\t\tclass=\"bx--tooltip bx--tooltip--shown\">\n\t\t\t<span class=\"bx--tooltip__caret\" aria-hidden=\"true\"></span>\n\t\t\t<ng-template\n\t\t\t\t\t*ngIf=\"hasContentTemplate\"\n\t\t\t\t\t[ngTemplateOutlet]=\"dialogConfig.content\"\n\t\t\t\t\t[ngTemplateOutletContext]=\"{tooltip: this}\">\n\t\t\t</ng-template>\n\t\t\t<p\n\t\t\t\t*ngIf=\"!hasContentTemplate\">\n\t\t\t\t{{dialogConfig.content}}\n\t\t\t</p>\n\t\t</div>\n\t\t`\n})\nexport class Tooltip extends Dialog {\n\t@HostBinding(\"style.display\") style = \"inline-block\";\n\t/**\n\t * Value is set to `true` if the `Tooltip` is to display a `TemplateRef` instead of a string.\n\t */\n\tpublic hasContentTemplate = false;\n\t/**\n\t * Sets the role of the tooltip. If there's no focusable content we leave it as a `tooltip`,\n\t * if there _is_ focusable content we switch to the interactive `dialog` role.\n\t */\n\tpublic role = \"tooltip\";\n\t/**\n\t * Check whether there is a template for the `Tooltip` content.\n\t */\n\tonDialogInit() {\n\t\tthis.addGap[\"bottom\"] = pos => {\n\t\t\treturn position.addOffset(pos, 3, 0);\n\t\t};\n\t\tthis.addGap[\"top\"] = pos => {\n\t\t\treturn position.addOffset(pos, -10, 0);\n\t\t};\n\t\tthis.addGap[\"left\"] = pos => {\n\t\t\treturn position.addOffset(pos, -3, -6);\n\t\t};\n\t\tthis.addGap[\"right\"] = pos => {\n\t\t\treturn position.addOffset(pos, -3, 6);\n\t\t};\n\n\t\tthis.hasContentTemplate = this.dialogConfig.content instanceof TemplateRef;\n\t}\n\n\tafterDialogViewInit() {\n\t\tconst focusableElements = getFocusElementList(this.dialog.nativeElement);\n\t\tif (focusableElements.length > 0) {\n\t\t\tthis.role = \"dialog\";\n\t\t\tfocusableElements[0].focus();\n\t\t}\n\t}\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
[{"__symbolic":"module","version":4,"metadata":{"Tooltip":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./../dialog.component","name":"Dialog","line":
|
|
1
|
+
[{"__symbolic":"module","version":4,"metadata":{"Tooltip":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./../dialog.component","name":"Dialog","line":36,"character":29},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":14,"character":1},"arguments":[{"selector":"ibm-tooltip","template":"\n\t\t<div\n\t\t\t#dialog\n\t\t\t[id]=\"dialogConfig.compID\"\n\t\t\t[attr.role]=\"role\"\n\t\t\t[attr.data-floating-menu-direction]=\"placement\"\n\t\t\tclass=\"bx--tooltip bx--tooltip--shown\">\n\t\t\t<span class=\"bx--tooltip__caret\" aria-hidden=\"true\"></span>\n\t\t\t<ng-template\n\t\t\t\t\t*ngIf=\"hasContentTemplate\"\n\t\t\t\t\t[ngTemplateOutlet]=\"dialogConfig.content\"\n\t\t\t\t\t[ngTemplateOutletContext]=\"{tooltip: this}\">\n\t\t\t</ng-template>\n\t\t\t<p\n\t\t\t\t*ngIf=\"!hasContentTemplate\">\n\t\t\t\t{{dialogConfig.content}}\n\t\t\t</p>\n\t\t</div>\n\t\t"}]}],"members":{"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":37,"character":2},"arguments":["style.display"]}]}],"onDialogInit":[{"__symbolic":"method"}],"afterDialogViewInit":[{"__symbolic":"method"}]}}}}]
|
|
@@ -33,7 +33,7 @@ export { RenderType_Tooltip as RenderType_Tooltip };
|
|
|
33
33
|
function View_Tooltip_2(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵand(0, null, null, 0))], null, null); }
|
|
34
34
|
function View_Tooltip_1(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵand(16777216, null, null, 2, null, View_Tooltip_2)), i0.ɵdid(1, 540672, null, 0, i1.NgTemplateOutlet, [i0.ViewContainerRef], { ngTemplateOutletContext: [0, "ngTemplateOutletContext"], ngTemplateOutlet: [1, "ngTemplateOutlet"] }, null), i0.ɵpod(2, { tooltip: 0 }), (_l()(), i0.ɵand(0, null, null, 0))], function (_ck, _v) { var _co = _v.component; var currVal_0 = _ck(_v, 2, 0, _co); var currVal_1 = _co.dialogConfig.content; _ck(_v, 1, 0, currVal_0, currVal_1); }, null); }
|
|
35
35
|
function View_Tooltip_3(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null, 1, "p", [], null, null, null, null, null)), (_l()(), i0.ɵted(1, null, [" ", " "]))], null, function (_ck, _v) { var _co = _v.component; var currVal_0 = _co.dialogConfig.content; _ck(_v, 1, 0, currVal_0); }); }
|
|
36
|
-
export function View_Tooltip_0(_l) { return i0.ɵvid(0, [i0.ɵqud(402653184, 1, { dialog: 0 }), (_l()(), i0.ɵeld(1, 0, [[1, 0], ["dialog", 1]], null, 5, "div", [["class", "bx--tooltip bx--tooltip--shown"]], [[8, "id", 0], [1, "role", 0]], null, null, null, null)), (_l()(), i0.ɵeld(2, 0, null, null, 0, "span", [["aria-hidden", "true"], ["class", "bx--tooltip__caret"]], null, null, null, null, null)), (_l()(), i0.ɵand(16777216, null, null, 1, null, View_Tooltip_1)), i0.ɵdid(4, 16384, null, 0, i1.NgIf, [i0.ViewContainerRef, i0.TemplateRef], { ngIf: [0, "ngIf"] }, null), (_l()(), i0.ɵand(16777216, null, null, 1, null, View_Tooltip_3)), i0.ɵdid(6, 16384, null, 0, i1.NgIf, [i0.ViewContainerRef, i0.TemplateRef], { ngIf: [0, "ngIf"] }, null)], function (_ck, _v) { var _co = _v.component; var
|
|
36
|
+
export function View_Tooltip_0(_l) { return i0.ɵvid(0, [i0.ɵqud(402653184, 1, { dialog: 0 }), (_l()(), i0.ɵeld(1, 0, [[1, 0], ["dialog", 1]], null, 5, "div", [["class", "bx--tooltip bx--tooltip--shown"]], [[8, "id", 0], [1, "role", 0], [1, "data-floating-menu-direction", 0]], null, null, null, null)), (_l()(), i0.ɵeld(2, 0, null, null, 0, "span", [["aria-hidden", "true"], ["class", "bx--tooltip__caret"]], null, null, null, null, null)), (_l()(), i0.ɵand(16777216, null, null, 1, null, View_Tooltip_1)), i0.ɵdid(4, 16384, null, 0, i1.NgIf, [i0.ViewContainerRef, i0.TemplateRef], { ngIf: [0, "ngIf"] }, null), (_l()(), i0.ɵand(16777216, null, null, 1, null, View_Tooltip_3)), i0.ɵdid(6, 16384, null, 0, i1.NgIf, [i0.ViewContainerRef, i0.TemplateRef], { ngIf: [0, "ngIf"] }, null)], function (_ck, _v) { var _co = _v.component; var currVal_3 = _co.hasContentTemplate; _ck(_v, 4, 0, currVal_3); var currVal_4 = !_co.hasContentTemplate; _ck(_v, 6, 0, currVal_4); }, function (_ck, _v) { var _co = _v.component; var currVal_0 = _co.dialogConfig.compID; var currVal_1 = _co.role; var currVal_2 = _co.placement; _ck(_v, 1, 0, currVal_0, currVal_1, currVal_2); }); }
|
|
37
37
|
export function View_Tooltip_Host_0(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null, 1, "ibm-tooltip", [], [[4, "display", null]], [[null, "keydown"], ["document", "click"]], function (_v, en, $event) { var ad = true; if (("keydown" === en)) {
|
|
38
38
|
var pd_0 = (i0.ɵnov(_v, 1).escapeClose($event) !== false);
|
|
39
39
|
ad = (pd_0 && ad);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip.component.ngfactory.js","sourceRoot":"","sources":["../../src/dialog/tooltip/tooltip.component.ngfactory.ts","../../src/dialog/tooltip/tooltip.component.ts.Tooltip.html"],"names":[],"mappings":";;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"tooltip.component.ngfactory.js","sourceRoot":"","sources":["../../src/dialog/tooltip/tooltip.component.ngfactory.ts","../../src/dialog/tooltip/tooltip.component.ts.Tooltip.html"],"names":[],"mappings":";;;;;;;;;;;;;kDCQG,qPAG8C,GAA5C,gJAA2C,GAD3C,mBAAyC,uBAF3C,YAG8C,EAA5C,SAA2C,EAD3C,SAAyC;kDAG3C,0EAC6B,KAAA,4JAE7B;+FAfD,4MAKwC,KACvC,qIAAoD,KACpD,uKAG8C,IAE9C,uKAC6B,iDAL3B,mBAA0B,qBAD5B,YAG8C,EAF5C,SAA0B,GAK3B,oBAA2B,qBAD5B,YAC6B,EAA5B,SAA2B,mDAX5B,mBAA0B,sBAC1B,mBAAkB,OAClB,mBAA+C,YAJhD,YAKwC,EAHvC,SAA0B,EAC1B,SAAkB,EAClB,SAA+C","sourcesContent":["import * as i0 from '@angular/core';\ni0.ComponentFactory;\n","\n\t\t<div\n\t\t\t#dialog\n\t\t\t[id]=\"dialogConfig.compID\"\n\t\t\t[attr.role]=\"role\"\n\t\t\t[attr.data-floating-menu-direction]=\"placement\"\n\t\t\tclass=\"bx--tooltip bx--tooltip--shown\">\n\t\t\t<span class=\"bx--tooltip__caret\" aria-hidden=\"true\"></span>\n\t\t\t<ng-template\n\t\t\t\t\t*ngIf=\"hasContentTemplate\"\n\t\t\t\t\t[ngTemplateOutlet]=\"dialogConfig.content\"\n\t\t\t\t\t[ngTemplateOutletContext]=\"{tooltip: this}\">\n\t\t\t</ng-template>\n\t\t\t<p\n\t\t\t\t*ngIf=\"!hasContentTemplate\">\n\t\t\t\t{{dialogConfig.content}}\n\t\t\t</p>\n\t\t</div>\n\t\t"]}
|
|
@@ -110,7 +110,9 @@ if content has overflow.</p>
|
|
|
110
110
|
[ngClass]="{
|
|
111
111
|
'bx--skeleton': skeleton
|
|
112
112
|
}"
|
|
113
|
-
role="navigation"
|
|
113
|
+
role="navigation"
|
|
114
|
+
[attr.aria-label]="ariaLabel"
|
|
115
|
+
[attr.aria-labelledby]="ariaLabelledby">
|
|
114
116
|
<div class="bx--tabs-trigger" tabindex="0" (click)="showTabList()">
|
|
115
117
|
<a href="javascript:void(0)" class="bx--tabs-trigger-text" tabindex="-1">
|
|
116
118
|
<ng-container *ngIf="!getSelectedTab().headingIsTemplate">
|
|
@@ -269,6 +271,12 @@ if content has overflow.</p>
|
|
|
269
271
|
<tr>
|
|
270
272
|
<td class="col-md-4">
|
|
271
273
|
<ul class="index-list">
|
|
274
|
+
<li>
|
|
275
|
+
<a href="#ariaLabel">ariaLabel</a>
|
|
276
|
+
</li>
|
|
277
|
+
<li>
|
|
278
|
+
<a href="#ariaLabelledby">ariaLabelledby</a>
|
|
279
|
+
</li>
|
|
272
280
|
<li>
|
|
273
281
|
<a href="#cacheActive">cacheActive</a>
|
|
274
282
|
</li>
|
|
@@ -301,6 +309,9 @@ if content has overflow.</p>
|
|
|
301
309
|
<tr>
|
|
302
310
|
<td class="col-md-4">
|
|
303
311
|
<ul class="index-list">
|
|
312
|
+
<li>
|
|
313
|
+
<a href="#focusout">focusout</a>
|
|
314
|
+
</li>
|
|
304
315
|
<li>
|
|
305
316
|
<a href="#keydown">keydown</a>
|
|
306
317
|
</li>
|
|
@@ -315,6 +326,52 @@ if content has overflow.</p>
|
|
|
315
326
|
|
|
316
327
|
<section>
|
|
317
328
|
<h3 id="inputs">Inputs</h3>
|
|
329
|
+
<table class="table table-sm table-bordered">
|
|
330
|
+
<tbody>
|
|
331
|
+
<tr>
|
|
332
|
+
<td class="col-md-2">
|
|
333
|
+
<a name="ariaLabel"></a>
|
|
334
|
+
<code>ariaLabel</code>
|
|
335
|
+
</td>
|
|
336
|
+
<td class="col-md-10">
|
|
337
|
+
<div><p>Sets the aria label on the nav element.</p>
|
|
338
|
+
</div>
|
|
339
|
+
<p>
|
|
340
|
+
<em>Type :</em> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
|
|
341
|
+
|
|
342
|
+
</p>
|
|
343
|
+
</td>
|
|
344
|
+
</tr>
|
|
345
|
+
<tr>
|
|
346
|
+
<td class="col-md-2" colspan="2">
|
|
347
|
+
<div class="io-line">Defined in <a href="" data-line="119" class="link-to-prism">src/tabs/tab-headers.component.ts:119</a></div>
|
|
348
|
+
</td>
|
|
349
|
+
</tr>
|
|
350
|
+
</tbody>
|
|
351
|
+
</table>
|
|
352
|
+
<table class="table table-sm table-bordered">
|
|
353
|
+
<tbody>
|
|
354
|
+
<tr>
|
|
355
|
+
<td class="col-md-2">
|
|
356
|
+
<a name="ariaLabelledby"></a>
|
|
357
|
+
<code>ariaLabelledby</code>
|
|
358
|
+
</td>
|
|
359
|
+
<td class="col-md-10">
|
|
360
|
+
<div><p>Sets the aria labelledby on the nav element.</p>
|
|
361
|
+
</div>
|
|
362
|
+
<p>
|
|
363
|
+
<em>Type :</em> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
|
|
364
|
+
|
|
365
|
+
</p>
|
|
366
|
+
</td>
|
|
367
|
+
</tr>
|
|
368
|
+
<tr>
|
|
369
|
+
<td class="col-md-2" colspan="2">
|
|
370
|
+
<div class="io-line">Defined in <a href="" data-line="123" class="link-to-prism">src/tabs/tab-headers.component.ts:123</a></div>
|
|
371
|
+
</td>
|
|
372
|
+
</tr>
|
|
373
|
+
</tbody>
|
|
374
|
+
</table>
|
|
318
375
|
<table class="table table-sm table-bordered">
|
|
319
376
|
<tbody>
|
|
320
377
|
<tr>
|
|
@@ -333,7 +390,7 @@ Duplicate from <code>n-tabs</code> to support standalone headers</p>
|
|
|
333
390
|
</tr>
|
|
334
391
|
<tr>
|
|
335
392
|
<td class="col-md-2" colspan="2">
|
|
336
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
393
|
+
<div class="io-line">Defined in <a href="" data-line="107" class="link-to-prism">src/tabs/tab-headers.component.ts:107</a></div>
|
|
337
394
|
</td>
|
|
338
395
|
</tr>
|
|
339
396
|
</tbody>
|
|
@@ -350,7 +407,7 @@ Duplicate from <code>n-tabs</code> to support standalone headers</p>
|
|
|
350
407
|
</tr>
|
|
351
408
|
<tr>
|
|
352
409
|
<td class="col-md-2" colspan="2">
|
|
353
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
410
|
+
<div class="io-line">Defined in <a href="" data-line="126" class="link-to-prism">src/tabs/tab-headers.component.ts:126</a></div>
|
|
354
411
|
</td>
|
|
355
412
|
</tr>
|
|
356
413
|
</tbody>
|
|
@@ -367,7 +424,7 @@ Duplicate from <code>n-tabs</code> to support standalone headers</p>
|
|
|
367
424
|
</tr>
|
|
368
425
|
<tr>
|
|
369
426
|
<td class="col-md-2" colspan="2">
|
|
370
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
427
|
+
<div class="io-line">Defined in <a href="" data-line="125" class="link-to-prism">src/tabs/tab-headers.component.ts:125</a></div>
|
|
371
428
|
</td>
|
|
372
429
|
</tr>
|
|
373
430
|
</tbody>
|
|
@@ -390,7 +447,7 @@ Duplicate from <code>n-tabs</code> to support standalone headers</p>
|
|
|
390
447
|
</tr>
|
|
391
448
|
<tr>
|
|
392
449
|
<td class="col-md-2" colspan="2">
|
|
393
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
450
|
+
<div class="io-line">Defined in <a href="" data-line="111" class="link-to-prism">src/tabs/tab-headers.component.ts:111</a></div>
|
|
394
451
|
</td>
|
|
395
452
|
</tr>
|
|
396
453
|
</tbody>
|
|
@@ -412,7 +469,7 @@ Duplicate from <code>n-tabs</code> to support standalone headers</p>
|
|
|
412
469
|
</tr>
|
|
413
470
|
<tr>
|
|
414
471
|
<td class="col-md-2" colspan="2">
|
|
415
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
472
|
+
<div class="io-line">Defined in <a href="" data-line="115" class="link-to-prism">src/tabs/tab-headers.component.ts:115</a></div>
|
|
416
473
|
</td>
|
|
417
474
|
</tr>
|
|
418
475
|
</tbody>
|
|
@@ -435,7 +492,7 @@ Duplicate from <code>n-tabs</code> to support standalone headers</p>
|
|
|
435
492
|
</tr>
|
|
436
493
|
<tr>
|
|
437
494
|
<td class="col-md-2" colspan="2">
|
|
438
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
495
|
+
<div class="io-line">Defined in <a href="" data-line="102" class="link-to-prism">src/tabs/tab-headers.component.ts:102</a></div>
|
|
439
496
|
</td>
|
|
440
497
|
</tr>
|
|
441
498
|
</tbody>
|
|
@@ -445,6 +502,40 @@ Duplicate from <code>n-tabs</code> to support standalone headers</p>
|
|
|
445
502
|
|
|
446
503
|
<section>
|
|
447
504
|
<h3>HostListeners</h3> <table class="table table-sm table-bordered">
|
|
505
|
+
<tbody>
|
|
506
|
+
<tr>
|
|
507
|
+
<td class="col-md-4">
|
|
508
|
+
<a name="focusout"></a>
|
|
509
|
+
<span class="name">
|
|
510
|
+
<b>
|
|
511
|
+
focusout
|
|
512
|
+
</b>
|
|
513
|
+
<a href="#focusout"><span class="icon ion-ios-link"></span></a>
|
|
514
|
+
</span>
|
|
515
|
+
</td>
|
|
516
|
+
</tr>
|
|
517
|
+
<tr>
|
|
518
|
+
<td class="col-md-4">
|
|
519
|
+
<i>Arguments : </i><code>'$event' </code>
|
|
520
|
+
</td>
|
|
521
|
+
</tr>
|
|
522
|
+
<tr>
|
|
523
|
+
<td class="col-md-4">
|
|
524
|
+
<code>focusout(event)</code>
|
|
525
|
+
</td>
|
|
526
|
+
</tr>
|
|
527
|
+
|
|
528
|
+
|
|
529
|
+
<tr>
|
|
530
|
+
<td class="col-md-4">
|
|
531
|
+
<div class="io-line">Defined in <a href="" data-line="219" class="link-to-prism">src/tabs/tab-headers.component.ts:219</a></div>
|
|
532
|
+
</td>
|
|
533
|
+
</tr>
|
|
534
|
+
|
|
535
|
+
|
|
536
|
+
</tbody>
|
|
537
|
+
</table>
|
|
538
|
+
<table class="table table-sm table-bordered">
|
|
448
539
|
<tbody>
|
|
449
540
|
<tr>
|
|
450
541
|
<td class="col-md-4">
|
|
@@ -471,7 +562,7 @@ Duplicate from <code>n-tabs</code> to support standalone headers</p>
|
|
|
471
562
|
|
|
472
563
|
<tr>
|
|
473
564
|
<td class="col-md-4">
|
|
474
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
565
|
+
<div class="io-line">Defined in <a href="" data-line="159" class="link-to-prism">src/tabs/tab-headers.component.ts:159</a></div>
|
|
475
566
|
</td>
|
|
476
567
|
</tr>
|
|
477
568
|
|
|
@@ -516,7 +607,7 @@ Duplicate from <code>n-tabs</code> to support standalone headers</p>
|
|
|
516
607
|
|
|
517
608
|
<tr>
|
|
518
609
|
<td class="col-md-4">
|
|
519
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
610
|
+
<div class="io-line">Defined in <a href="" data-line="248" class="link-to-prism">src/tabs/tab-headers.component.ts:248</a></div>
|
|
520
611
|
</td>
|
|
521
612
|
</tr>
|
|
522
613
|
|
|
@@ -554,7 +645,7 @@ Duplicate from <code>n-tabs</code> to support standalone headers</p>
|
|
|
554
645
|
|
|
555
646
|
<tr>
|
|
556
647
|
<td class="col-md-4">
|
|
557
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
648
|
+
<div class="io-line">Defined in <a href="" data-line="225" class="link-to-prism">src/tabs/tab-headers.component.ts:225</a></div>
|
|
558
649
|
</td>
|
|
559
650
|
</tr>
|
|
560
651
|
|
|
@@ -594,7 +685,7 @@ Duplicate from <code>n-tabs</code> to support standalone headers</p>
|
|
|
594
685
|
|
|
595
686
|
<tr>
|
|
596
687
|
<td class="col-md-4">
|
|
597
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
688
|
+
<div class="io-line">Defined in <a href="" data-line="242" class="link-to-prism">src/tabs/tab-headers.component.ts:242</a></div>
|
|
598
689
|
</td>
|
|
599
690
|
</tr>
|
|
600
691
|
|
|
@@ -679,7 +770,7 @@ Duplicate from <code>n-tabs</code> to support standalone headers</p>
|
|
|
679
770
|
|
|
680
771
|
<tr>
|
|
681
772
|
<td class="col-md-4">
|
|
682
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
773
|
+
<div class="io-line">Defined in <a href="" data-line="263" class="link-to-prism">src/tabs/tab-headers.component.ts:263</a></div>
|
|
683
774
|
</td>
|
|
684
775
|
</tr>
|
|
685
776
|
|
|
@@ -776,7 +867,7 @@ Duplicate from <code>n-tabs</code> to support standalone headers</p>
|
|
|
776
867
|
|
|
777
868
|
<tr>
|
|
778
869
|
<td class="col-md-4">
|
|
779
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
870
|
+
<div class="io-line">Defined in <a href="" data-line="279" class="link-to-prism">src/tabs/tab-headers.component.ts:279</a></div>
|
|
780
871
|
</td>
|
|
781
872
|
</tr>
|
|
782
873
|
|
|
@@ -818,7 +909,7 @@ Duplicate from <code>n-tabs</code> to support standalone headers</p>
|
|
|
818
909
|
|
|
819
910
|
<tr>
|
|
820
911
|
<td class="col-md-4">
|
|
821
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
912
|
+
<div class="io-line">Defined in <a href="" data-line="256" class="link-to-prism">src/tabs/tab-headers.component.ts:256</a></div>
|
|
822
913
|
</td>
|
|
823
914
|
</tr>
|
|
824
915
|
|
|
@@ -877,7 +968,7 @@ Duplicate from <code>n-tabs</code> to support standalone headers</p>
|
|
|
877
968
|
</tr>
|
|
878
969
|
<tr>
|
|
879
970
|
<td class="col-md-4">
|
|
880
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
971
|
+
<div class="io-line">Defined in <a href="" data-line="147" class="link-to-prism">src/tabs/tab-headers.component.ts:147</a></div>
|
|
881
972
|
</td>
|
|
882
973
|
</tr>
|
|
883
974
|
|
|
@@ -918,7 +1009,7 @@ Duplicate from <code>n-tabs</code> to support standalone headers</p>
|
|
|
918
1009
|
</tr>
|
|
919
1010
|
<tr>
|
|
920
1011
|
<td class="col-md-4">
|
|
921
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1012
|
+
<div class="io-line">Defined in <a href="" data-line="151" class="link-to-prism">src/tabs/tab-headers.component.ts:151</a></div>
|
|
922
1013
|
</td>
|
|
923
1014
|
</tr>
|
|
924
1015
|
|
|
@@ -964,7 +1055,7 @@ Duplicate from <code>n-tabs</code> to support standalone headers</p>
|
|
|
964
1055
|
</tr>
|
|
965
1056
|
<tr>
|
|
966
1057
|
<td class="col-md-4">
|
|
967
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1058
|
+
<div class="io-line">Defined in <a href="" data-line="143" class="link-to-prism">src/tabs/tab-headers.component.ts:143</a></div>
|
|
968
1059
|
</td>
|
|
969
1060
|
</tr>
|
|
970
1061
|
|
|
@@ -1007,7 +1098,7 @@ Duplicate from <code>n-tabs</code> to support standalone headers</p>
|
|
|
1007
1098
|
</tr>
|
|
1008
1099
|
<tr>
|
|
1009
1100
|
<td class="col-md-4">
|
|
1010
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1101
|
+
<div class="io-line">Defined in <a href="" data-line="131" class="link-to-prism">src/tabs/tab-headers.component.ts:131</a></div>
|
|
1011
1102
|
</td>
|
|
1012
1103
|
</tr>
|
|
1013
1104
|
|
|
@@ -1047,7 +1138,7 @@ Duplicate from <code>n-tabs</code> to support standalone headers</p>
|
|
|
1047
1138
|
</tr>
|
|
1048
1139
|
<tr>
|
|
1049
1140
|
<td class="col-md-4">
|
|
1050
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1141
|
+
<div class="io-line">Defined in <a href="" data-line="152" class="link-to-prism">src/tabs/tab-headers.component.ts:152</a></div>
|
|
1051
1142
|
</td>
|
|
1052
1143
|
</tr>
|
|
1053
1144
|
|
|
@@ -1090,7 +1181,7 @@ Duplicate from <code>n-tabs</code> to support standalone headers</p>
|
|
|
1090
1181
|
</tr>
|
|
1091
1182
|
<tr>
|
|
1092
1183
|
<td class="col-md-4">
|
|
1093
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1184
|
+
<div class="io-line">Defined in <a href="" data-line="135" class="link-to-prism">src/tabs/tab-headers.component.ts:135</a></div>
|
|
1094
1185
|
</td>
|
|
1095
1186
|
</tr>
|
|
1096
1187
|
|
|
@@ -1131,7 +1222,7 @@ Duplicate from <code>n-tabs</code> to support standalone headers</p>
|
|
|
1131
1222
|
</tr>
|
|
1132
1223
|
<tr>
|
|
1133
1224
|
<td class="col-md-4">
|
|
1134
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1225
|
+
<div class="io-line">Defined in <a href="" data-line="139" class="link-to-prism">src/tabs/tab-headers.component.ts:139</a></div>
|
|
1135
1226
|
</td>
|
|
1136
1227
|
</tr>
|
|
1137
1228
|
|
|
@@ -1180,7 +1271,9 @@ import { Tab } from "./tab.component";
|
|
|
1180
1271
|
[ngClass]="{
|
|
1181
1272
|
'bx--skeleton': skeleton
|
|
1182
1273
|
}"
|
|
1183
|
-
role="navigation"
|
|
1274
|
+
role="navigation"
|
|
1275
|
+
[attr.aria-label]="ariaLabel"
|
|
1276
|
+
[attr.aria-labelledby]="ariaLabelledby">
|
|
1184
1277
|
<div class="bx--tabs-trigger" tabindex="0" (click)="showTabList()">
|
|
1185
1278
|
<a href="javascript:void(0)" class="bx--tabs-trigger-text" tabindex="-1">
|
|
1186
1279
|
<ng-container *ngIf="!getSelectedTab().headingIsTemplate">
|
|
@@ -1263,6 +1356,14 @@ export class TabHeaders implements AfterContentInit {
|
|
|
1263
1356
|
* Set to `true` to put tabs in a loading state.
|
|
1264
1357
|
*/
|
|
1265
1358
|
@Input() skeleton = false;
|
|
1359
|
+
/**
|
|
1360
|
+
* Sets the aria label on the nav element.
|
|
1361
|
+
*/
|
|
1362
|
+
@Input() ariaLabel: string;
|
|
1363
|
+
/**
|
|
1364
|
+
* Sets the aria labelledby on the nav element.
|
|
1365
|
+
*/
|
|
1366
|
+
@Input() ariaLabelledby: string;
|
|
1266
1367
|
|
|
1267
1368
|
@Input() contentBefore;
|
|
1268
1369
|
@Input() contentAfter;
|
|
@@ -1357,6 +1458,13 @@ export class TabHeaders implements AfterContentInit {
|
|
|
1357
1458
|
}
|
|
1358
1459
|
}
|
|
1359
1460
|
|
|
1461
|
+
@HostListener("focusout", ["$event"])
|
|
1462
|
+
focusOut(event) {
|
|
1463
|
+
if (this.tabListVisible && event.relatedTarget === null) {
|
|
1464
|
+
this.tabListVisible = false;
|
|
1465
|
+
}
|
|
1466
|
+
}
|
|
1467
|
+
|
|
1360
1468
|
ngAfterContentInit() {
|
|
1361
1469
|
if (!this.tabInput) {
|
|
1362
1470
|
this.tabs = this.tabQuery;
|
|
@@ -1454,7 +1562,7 @@ export class TabHeaders implements AfterContentInit {
|
|
|
1454
1562
|
<script src="../js/libs/htmlparser.js"></script>
|
|
1455
1563
|
<script src="../js/libs/deep-iterator.js"></script>
|
|
1456
1564
|
<script>
|
|
1457
|
-
var COMPONENT_TEMPLATE = '<div><nav class="bx--tabs" [ngClass]="{ \'bx--skeleton\': skeleton }" role="navigation"> <div class="bx--tabs-trigger" tabindex="0" (click)="showTabList()"> <a href="javascript:void(0)" class="bx--tabs-trigger-text" tabindex="-1"> <ng-container *ngIf="!getSelectedTab().headingIsTemplate"> {{ getSelectedTab().heading }} </ng-container> <ng-template *ngIf="getSelectedTab().headingIsTemplate" [ngTemplateOutlet]="getSelectedTab().heading"> </ng-template> </a> <svg width="10" height="5" viewBox="0 0 10 5"> <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd"></path> </svg> </div> <ul #tabList [ngClass]="{ \'bx--tabs__nav--hidden\': !tabListVisible }" class="bx--tabs__nav" role="tablist"> <li role="presentation"> <ng-container *ngIf="contentBefore" [ngTemplateOutlet]="contentBefore"></ng-container> </li> <li *ngFor="let tab of tabs; let i = index;" [ngClass]="{ \'bx--tabs__nav-item--selected\': tab.active, \'bx--tabs__nav-item--disabled\': tab.disabled }" class="bx--tabs__nav-item" role="presentation" (click)="selectTab(tabref, tab, i)"> <a #tabItem [attr.aria-selected]="tab.active" [attr.tabindex]="(tab.active?0:-1)" [attr.aria-controls]="tab.id" (focus)="onTabFocus(tabref, i)" draggable="false" id="{{tab.id}}-header" class="bx--tabs__nav-link" href="javascript:void(0)" role="tab"> <ng-container *ngIf="!tab.headingIsTemplate"> {{ tab.heading }} </ng-container> <ng-template *ngIf="tab.headingIsTemplate" [ngTemplateOutlet]="tab.heading" [ngTemplateOutletContext]="{$implicit: tab.context}"> </ng-template> </a> </li> <li role="presentation"> <ng-container *ngIf="contentAfter" [ngTemplateOutlet]="contentAfter"></ng-container> </li> </ul></nav></div>'
|
|
1565
|
+
var COMPONENT_TEMPLATE = '<div><nav class="bx--tabs" [ngClass]="{ \'bx--skeleton\': skeleton }" role="navigation" [attr.aria-label]="ariaLabel" [attr.aria-labelledby]="ariaLabelledby"> <div class="bx--tabs-trigger" tabindex="0" (click)="showTabList()"> <a href="javascript:void(0)" class="bx--tabs-trigger-text" tabindex="-1"> <ng-container *ngIf="!getSelectedTab().headingIsTemplate"> {{ getSelectedTab().heading }} </ng-container> <ng-template *ngIf="getSelectedTab().headingIsTemplate" [ngTemplateOutlet]="getSelectedTab().heading"> </ng-template> </a> <svg width="10" height="5" viewBox="0 0 10 5"> <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd"></path> </svg> </div> <ul #tabList [ngClass]="{ \'bx--tabs__nav--hidden\': !tabListVisible }" class="bx--tabs__nav" role="tablist"> <li role="presentation"> <ng-container *ngIf="contentBefore" [ngTemplateOutlet]="contentBefore"></ng-container> </li> <li *ngFor="let tab of tabs; let i = index;" [ngClass]="{ \'bx--tabs__nav-item--selected\': tab.active, \'bx--tabs__nav-item--disabled\': tab.disabled }" class="bx--tabs__nav-item" role="presentation" (click)="selectTab(tabref, tab, i)"> <a #tabItem [attr.aria-selected]="tab.active" [attr.tabindex]="(tab.active?0:-1)" [attr.aria-controls]="tab.id" (focus)="onTabFocus(tabref, i)" draggable="false" id="{{tab.id}}-header" class="bx--tabs__nav-link" href="javascript:void(0)" role="tab"> <ng-container *ngIf="!tab.headingIsTemplate"> {{ tab.heading }} </ng-container> <ng-template *ngIf="tab.headingIsTemplate" [ngTemplateOutlet]="tab.heading" [ngTemplateOutletContext]="{$implicit: tab.context}"> </ng-template> </a> </li> <li role="presentation"> <ng-container *ngIf="contentAfter" [ngTemplateOutlet]="contentAfter"></ng-container> </li> </ul></nav></div>'
|
|
1458
1566
|
var COMPONENTS = [{'name': 'Accordion', 'selector': 'ibm-accordion'},{'name': 'AccordionItem', 'selector': 'ibm-accordion-item'},{'name': 'AlertModal', 'selector': 'ibm-alert-modal'},{'name': 'Breadcrumb', 'selector': 'ibm-breadcrumb'},{'name': 'BreadcrumbItemComponent', 'selector': 'ibm-breadcrumb-item'},{'name': 'Checkbox', 'selector': 'ibm-checkbox'},{'name': 'ClickableTile', 'selector': 'ibm-clickable-tile'},{'name': 'CodeSnippet', 'selector': 'ibm-code-snippet'},{'name': 'ComboBox', 'selector': 'ibm-combo-box'},{'name': 'ContentSwitcher', 'selector': 'ibm-content-switcher'},{'name': 'DatePicker', 'selector': 'ibm-date-picker'},{'name': 'DatePickerInput', 'selector': 'ibm-date-picker-input'},{'name': 'Dialog', 'selector': 'ibm-dialog'},{'name': 'DialogPlaceholder', 'selector': 'ibm-dialog-placeholder'},{'name': 'Documentation', 'selector': 'ibm-documentation'},{'name': 'Dropdown', 'selector': 'ibm-dropdown'},{'name': 'DropdownList', 'selector': 'ibm-dropdown-list'},{'name': 'ExpandableTile', 'selector': 'ibm-expandable-tile'},{'name': 'File', 'selector': 'ibm-file'},{'name': 'FileUploader', 'selector': 'ibm-file-uploader'},{'name': 'Hamburger', 'selector': 'ibm-hamburger'},{'name': 'Header', 'selector': 'ibm-header'},{'name': 'HeaderAction', 'selector': 'ibm-header-action'},{'name': 'HeaderGlobal', 'selector': 'ibm-header-global'},{'name': 'HeaderItem', 'selector': 'ibm-header-item'},{'name': 'HeaderMenu', 'selector': 'ibm-header-menu'},{'name': 'HeaderNavigation', 'selector': 'ibm-header-navigation'},{'name': 'InlineLoading', 'selector': 'ibm-inline-loading'},{'name': 'Label', 'selector': 'ibm-label'},{'name': 'ListColumn', 'selector': 'ibm-list-column'},{'name': 'ListHeader', 'selector': 'ibm-list-header'},{'name': 'ListRow', 'selector': 'ibm-list-row'},{'name': 'Loading', 'selector': 'ibm-loading'},{'name': 'Modal', 'selector': 'ibm-modal'},{'name': 'ModalFooter', 'selector': 'ibm-modal-footer'},{'name': 'ModalHeader', 'selector': 'ibm-modal-header'},{'name': 'ModalPlaceholder', 'selector': 'ibm-modal-placeholder'},{'name': 'Notification', 'selector': 'ibm-notification'},{'name': 'Number', 'selector': 'ibm-number'},{'name': 'OverflowMenu', 'selector': 'ibm-overflow-menu'},{'name': 'OverflowMenuOption', 'selector': 'ibm-overflow-menu-option'},{'name': 'OverflowMenuPane', 'selector': 'ibm-overflow-menu-pane'},{'name': 'Overlay', 'selector': 'ibm-overlay'},{'name': 'Pagination', 'selector': 'ibm-pagination'},{'name': 'Panel', 'selector': 'ibm-panel'},{'name': 'Placeholder', 'selector': 'ibm-placeholder'},{'name': 'ProductSwitcher', 'selector': 'ibm-product-switcher'},{'name': 'ProductSwitcherItem', 'selector': 'ibm-product-switcher-item'},{'name': 'ProductSwitcherList', 'selector': 'ibm-product-switcher-list'},{'name': 'ProductSwitcherListItem', 'selector': 'ibm-product-switcher-list-item'},{'name': 'ProgressIndicator', 'selector': 'ibm-progress-indicator'},{'name': 'Radio', 'selector': 'ibm-radio'},{'name': 'RadioGroup', 'selector': 'ibm-radio-group'},{'name': 'Sample', 'selector': 'ibm-sample'},{'name': 'SampleSub', 'selector': 'ibm-sample-sub'},{'name': 'Search', 'selector': 'ibm-search'},{'name': 'Select', 'selector': 'ibm-select'},{'name': 'SelectionTile', 'selector': 'ibm-selection-tile'},{'name': 'SideNav', 'selector': 'ibm-sidenav'},{'name': 'SideNavHeader', 'selector': 'ibm-sidenav-header'},{'name': 'SideNavItem', 'selector': 'ibm-sidenav-item'},{'name': 'SideNavMenu', 'selector': 'ibm-sidenav-menu'},{'name': 'Slider', 'selector': 'ibm-slider'},{'name': 'StructuredList', 'selector': 'ibm-structured-list'},{'name': 'Tab', 'selector': 'ibm-tab'},{'name': 'TabHeaders', 'selector': 'ibm-tab-headers'},{'name': 'Table', 'selector': 'ibm-table'},{'name': 'TableContainer', 'selector': 'ibm-table-container'},{'name': 'TableHeader', 'selector': 'ibm-table-header'},{'name': 'TableToolbar', 'selector': 'ibm-table-toolbar'},{'name': 'TableToolbarActions', 'selector': 'ibm-table-toolbar-actions'},{'name': 'TableToolbarContent', 'selector': 'ibm-table-toolbar-content'},{'name': 'TableToolbarSearch', 'selector': 'ibm-table-toolbar-search'},{'name': 'Tabs', 'selector': 'ibm-tabs'},{'name': 'Tag', 'selector': 'ibm-tag'},{'name': 'TagFilter', 'selector': 'ibm-tag-filter'},{'name': 'Tile', 'selector': 'ibm-tile'},{'name': 'TileGroup', 'selector': 'ibm-tile-group'},{'name': 'TimePicker', 'selector': 'ibm-timepicker'},{'name': 'TimePickerSelect', 'selector': 'ibm-timepicker-select'},{'name': 'Toast', 'selector': 'ibm-toast'},{'name': 'Toggle', 'selector': 'ibm-toggle'},{'name': 'Tooltip', 'selector': 'ibm-tooltip'},{'name': 'TooltipDefinition', 'selector': 'ibm-tooltip-definition'},{'name': 'TooltipIcon', 'selector': 'ibm-tooltip-icon'}];
|
|
1459
1567
|
var DIRECTIVES = [{'name': 'Button', 'selector': '[ibmButton]'},{'name': 'ColumnDirective', 'selector': '[ibmCol]'},{'name': 'ContentSwitcherOption', 'selector': '[ibmContentOption]'},{'name': 'DataGridFocus', 'selector': '[ibmDataGridFocus]'},{'name': 'DialogDirective', 'selector': '[ibmDialog]'},{'name': 'EllipsisTooltip', 'selector': '[ibmEllipsisTooltip]'},{'name': 'ExpandedRowHover', 'selector': '[ibmExpandedRowHover]'},{'name': 'GridDirective', 'selector': '[ibmGrid]'},{'name': 'Link', 'selector': '[ibmLink]'},{'name': 'List', 'selector': '[ibmList]'},{'name': 'ListItemDirective', 'selector': '[ibmListItem]'},{'name': 'OptGroup', 'selector': 'optgroup'},{'name': 'Option', 'selector': 'option'},{'name': 'OverflowMenuDirective', 'selector': '[ibmOverflowMenu]'},{'name': 'RowDirective', 'selector': '[ibmRow]'},{'name': 'ScrollableList', 'selector': '[ibmScrollableList]'},{'name': 'TableHeaderDescription', 'selector': '[ibmTableHeaderDescription]'},{'name': 'TableHeaderTitle', 'selector': '[ibmTableHeaderTitle]'},{'name': 'TextArea', 'selector': '[ibmTextArea]'},{'name': 'TextInput', 'selector': '[ibmText]'},{'name': 'TooltipDirective', 'selector': '[ibmTooltip]'}];
|
|
1460
1568
|
var ACTUAL_COMPONENT = {'name': 'TabHeaders'};
|