carbon-components-angular 3.0.2 → 3.2.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/bundle/carbon-angular.umd.js +2 -2
- package/bundle/carbon-angular.umd.js.map +1 -1
- package/content-switcher/content-switcher-option.directive.js +1 -1
- package/content-switcher/content-switcher-option.directive.js.map +1 -1
- package/docs/documentation/classes/NumberChange.html +2 -0
- package/docs/documentation/classes/ToggleChange.html +7 -2
- package/docs/documentation/components/Number.html +30 -26
- package/docs/documentation/components/Pagination.html +32 -44
- package/docs/documentation/components/TabHeaders.html +74 -25
- package/docs/documentation/components/Tabs.html +28 -12
- package/docs/documentation/components/TagFilter.html +52 -3
- package/docs/documentation/components/Toggle.html +52 -19
- package/docs/documentation/coverage.html +9 -9
- package/docs/documentation/directives/ContentSwitcherOption.html +1 -1
- package/docs/documentation/js/search/search_index.js +2 -2
- package/docs/storybook/iframe.html +3 -3
- package/docs/storybook/{main.30b13c55e055554fdaac.bundle.js → main.cc3329d0f31a1601a8eb.bundle.js} +48 -17
- package/docs/storybook/main.cc3329d0f31a1601a8eb.bundle.js.map +1 -0
- package/docs/storybook/{runtime~main.30b13c55e055554fdaac.bundle.js → runtime~main.cc3329d0f31a1601a8eb.bundle.js} +1 -1
- package/docs/storybook/{runtime~main.30b13c55e055554fdaac.bundle.js.map → runtime~main.cc3329d0f31a1601a8eb.bundle.js.map} +1 -1
- package/docs/storybook/{vendors~main.30b13c55e055554fdaac.bundle.js → vendors~main.cc3329d0f31a1601a8eb.bundle.js} +1 -1
- package/docs/storybook/{vendors~main.30b13c55e055554fdaac.bundle.js.map → vendors~main.cc3329d0f31a1601a8eb.bundle.js.map} +1 -1
- package/number-input/number.component.js +1 -1
- package/number-input/number.component.js.map +1 -1
- package/number-input/number.component.metadata.json +1 -1
- package/number-input/number.component.ngfactory.js +2 -2
- package/number-input/number.component.ngfactory.js.map +1 -1
- package/package.json +1 -1
- package/pagination/pagination.component.js +1 -1
- package/pagination/pagination.component.js.map +1 -1
- package/pagination/pagination.component.metadata.json +1 -1
- package/pagination/pagination.component.ngfactory.js +5 -5
- package/pagination/pagination.component.ngfactory.js.map +1 -1
- package/tabs/tab-headers.component.d.ts +2 -0
- package/tabs/tab-headers.component.js +3 -1
- 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 +10 -8
- package/tabs/tab-headers.component.ngfactory.js.map +1 -1
- package/tabs/tab-headers.component.ngsummary.json +1 -1
- package/tabs/tabs.component.js +1 -1
- package/tabs/tabs.component.js.map +1 -1
- package/tabs/tabs.component.metadata.json +1 -1
- package/tabs/tabs.component.ngfactory.js +6 -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/tag/tag-filter.component.d.ts +5 -0
- package/tag/tag-filter.component.js +9 -3
- package/tag/tag-filter.component.js.map +1 -1
- package/tag/tag-filter.component.metadata.json +1 -1
- package/tag/tag-filter.component.ngfactory.js +5 -2
- package/tag/tag-filter.component.ngfactory.js.map +1 -1
- package/tag/tag-filter.component.ngsummary.json +1 -1
- package/tag/tag.module.ngfactory.js.map +1 -1
- package/toggle/toggle.component.d.ts +5 -0
- package/toggle/toggle.component.js +2 -1
- package/toggle/toggle.component.js.map +1 -1
- package/toggle/toggle.component.metadata.json +1 -1
- package/toggle/toggle.component.ngfactory.js +5 -4
- package/toggle/toggle.component.ngfactory.js.map +1 -1
- package/toggle/toggle.component.ngsummary.json +1 -1
- package/toggle/toggle.module.ngfactory.js.map +1 -1
- package/docs/storybook/main.30b13c55e055554fdaac.bundle.js.map +0 -1
|
@@ -145,7 +145,7 @@ var Number = /** @class */ (function () {
|
|
|
145
145
|
Number.decorators = [
|
|
146
146
|
{ type: Component, args: [{
|
|
147
147
|
selector: "ibm-number",
|
|
148
|
-
template: "\n\t\t<label *ngIf=\"skeleton && label\" class=\"bx--label bx--skeleton\"></label>\n\t\t<label *ngIf=\"!skeleton && label\" [for]=\"id\" class=\"bx--label\">{{label}}</label>\n\t\t<div *ngIf=\"helperText\" class=\"bx--form__helper-text\">{{helperText}}</div>\n\t\t<div\n\t\t\tdata-numberinput\n\t\t\t[attr.data-invalid]=\"(invalid ? '' : null)\"\n\t\t\tclass=\"bx--number\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'bx--number--light': theme === 'light',\n\t\t\t\t'bx--number--nolabel': !label,\n\t\t\t\t'bx--number--helpertext': helperText,\n\t\t\t\t'bx--skeleton' : skeleton\n\t\t\t}\">\n\t\t\t<input\n\t\t\t\ttype=\"number\"\n\t\t\t\t[id]=\"id\"\n\t\t\t\t[value]=\"value\"\n\t\t\t\t[min]=\"min\"\n\t\t\t\t[max]=\"max\"\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t[required]=\"required\"\n\t\t\t\t(input)=\"onNumberInputChange($event)\"/>\n\t\t\t<div *ngIf=\"!skeleton\" class=\"bx--number__controls\">\n\t\t\t\t<button\n\t\t\t\t\tclass=\"bx--number__control-btn up-icon\"\n\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\taria-atomic=\"true\"\n\t\t\t\t\t(click)=\"onIncrement()\">\n\t\t\t\t\t<ibm-icon-caret-up16></ibm-icon-caret-up16>\n\t\t\t\t</button>\n\t\t\t\t<button\n\t\t\t\t\tclass=\"bx--number__control-btn down-icon\"\n\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\taria-atomic=\"true\"\n\t\t\t\t\t(click)=\"onDecrement()\">\n\t\t\t\t\t<ibm-icon-caret-down16></ibm-icon-caret-down16>\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"invalid\" class=\"bx--form-requirement\">\n\t\t\t\t{{invalidText}}\n\t\t\t</div>\n\t\t</div>\n\t",
|
|
148
|
+
template: "\n\t\t<label *ngIf=\"skeleton && label\" class=\"bx--label bx--skeleton\"></label>\n\t\t<label *ngIf=\"!skeleton && label\" [for]=\"id\" class=\"bx--label\">{{label}}</label>\n\t\t<div *ngIf=\"helperText\" class=\"bx--form__helper-text\">{{helperText}}</div>\n\t\t<div\n\t\t\tdata-numberinput\n\t\t\t[attr.data-invalid]=\"(invalid ? '' : null)\"\n\t\t\tclass=\"bx--number\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'bx--number--light': theme === 'light',\n\t\t\t\t'bx--number--nolabel': !label,\n\t\t\t\t'bx--number--helpertext': helperText,\n\t\t\t\t'bx--skeleton' : skeleton\n\t\t\t}\">\n\t\t\t<input\n\t\t\t\ttype=\"number\"\n\t\t\t\t[id]=\"id\"\n\t\t\t\t[value]=\"value\"\n\t\t\t\t[min]=\"min\"\n\t\t\t\t[max]=\"max\"\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t[required]=\"required\"\n\t\t\t\t(input)=\"onNumberInputChange($event)\"/>\n\t\t\t<div *ngIf=\"!skeleton\" class=\"bx--number__controls\">\n\t\t\t\t<button\n\t\t\t\t\tclass=\"bx--number__control-btn up-icon\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\taria-atomic=\"true\"\n\t\t\t\t\t(click)=\"onIncrement()\">\n\t\t\t\t\t<ibm-icon-caret-up16></ibm-icon-caret-up16>\n\t\t\t\t</button>\n\t\t\t\t<button\n\t\t\t\t\tclass=\"bx--number__control-btn down-icon\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\taria-atomic=\"true\"\n\t\t\t\t\t(click)=\"onDecrement()\">\n\t\t\t\t\t<ibm-icon-caret-down16></ibm-icon-caret-down16>\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"invalid\" class=\"bx--form-requirement\">\n\t\t\t\t{{invalidText}}\n\t\t\t</div>\n\t\t</div>\n\t",
|
|
149
149
|
providers: [
|
|
150
150
|
{
|
|
151
151
|
provide: NG_VALUE_ACCESSOR,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"number.component.js","sourceRoot":"","sources":["../src/number-input/number.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACpF,OAAO,EAAE,iBAAiB,EAAwB,MAAM,gBAAgB,CAAC;AACzE,OAAO,EAAE,iBAAiB,EAAE,MAAM,MAAM,CAAC;AAEzC;;;;GAIG;AACH;IAAA;IAaA,CAAC;IAAD,mBAAC;AAAD,CAAC,AAbD,IAaC;;AAED;;;;GAIG;AACH;
|
|
1
|
+
{"version":3,"file":"number.component.js","sourceRoot":"","sources":["../src/number-input/number.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, Input, HostBinding, EventEmitter, Output } from \"@angular/core\";\nimport { NG_VALUE_ACCESSOR, ControlValueAccessor } from \"@angular/forms\";\nimport { isNullOrUndefined } from \"util\";\n\n/**\n * Used to emit changes performed on number input components.\n * @export\n * @class NumberChange\n */\nexport class NumberChange {\n\t/**\n\t * Contains the `Number` that has been changed.\n\t * @type {Number}\n\t * @memberof NumberChange\n\t */\n\tsource: Number;\n\t/**\n\t * The value of the `Number` field encompassed in the `NumberChange` class.\n\t * @type {number}\n\t * @memberof NumberChange\n\t */\n\tvalue: number;\n}\n\n/**\n * @export\n * @class Number\n * @implements {ControlValueAccessor}\n */\n@Component({\n\tselector: \"ibm-number\",\n\ttemplate: `\n\t\t<label *ngIf=\"skeleton && label\" class=\"bx--label bx--skeleton\"></label>\n\t\t<label *ngIf=\"!skeleton && label\" [for]=\"id\" class=\"bx--label\">{{label}}</label>\n\t\t<div *ngIf=\"helperText\" class=\"bx--form__helper-text\">{{helperText}}</div>\n\t\t<div\n\t\t\tdata-numberinput\n\t\t\t[attr.data-invalid]=\"(invalid ? '' : null)\"\n\t\t\tclass=\"bx--number\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'bx--number--light': theme === 'light',\n\t\t\t\t'bx--number--nolabel': !label,\n\t\t\t\t'bx--number--helpertext': helperText,\n\t\t\t\t'bx--skeleton' : skeleton\n\t\t\t}\">\n\t\t\t<input\n\t\t\t\ttype=\"number\"\n\t\t\t\t[id]=\"id\"\n\t\t\t\t[value]=\"value\"\n\t\t\t\t[min]=\"min\"\n\t\t\t\t[max]=\"max\"\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t[required]=\"required\"\n\t\t\t\t(input)=\"onNumberInputChange($event)\"/>\n\t\t\t<div *ngIf=\"!skeleton\" class=\"bx--number__controls\">\n\t\t\t\t<button\n\t\t\t\t\tclass=\"bx--number__control-btn up-icon\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\taria-atomic=\"true\"\n\t\t\t\t\t(click)=\"onIncrement()\">\n\t\t\t\t\t<ibm-icon-caret-up16></ibm-icon-caret-up16>\n\t\t\t\t</button>\n\t\t\t\t<button\n\t\t\t\t\tclass=\"bx--number__control-btn down-icon\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\taria-atomic=\"true\"\n\t\t\t\t\t(click)=\"onDecrement()\">\n\t\t\t\t\t<ibm-icon-caret-down16></ibm-icon-caret-down16>\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"invalid\" class=\"bx--form-requirement\">\n\t\t\t\t{{invalidText}}\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: Number,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class Number implements ControlValueAccessor {\n\t/**\n\t * Variable used for creating unique ids for number input components.\n\t */\n\tstatic numberCount = 0;\n\n\t@HostBinding(\"class.bx--form-item\") containerClass = true;\n\n\t/**\n\t * `light` or `dark` number input theme.\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\t/**\n\t * Set to `true` for a disabled number input.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` for a loading number component.\n\t */\n\t@Input() skeleton = false;\n\t/**\n\t * Set to `true` for an invalid number component.\n\t */\n\t@Input() invalid = false;\n\t/**\n\t * The unique id for the number component.\n\t */\n\t@Input() id = `number-${Number.numberCount}`;\n\t/**\n\t * Reflects the required attribute of the `input` element.\n\t */\n\t@Input() required: boolean;\n\t/**\n\t * Sets the value attribute on the `input` element.\n\t */\n\t@Input() value = 0;\n\t/**\n\t * Sets the min attribute on the `input` element.\n\t */\n\t@Input() min;\n\t/**\n\t * Sets the max attribute on the `input` element.\n\t */\n\t@Input() max;\n\t/**\n\t * Sets the text inside the `label` tag.\n\t */\n\t@Input() label;\n\t/**\n\t * Sets the optional helper text.\n\t */\n\t@Input() helperText;\n\t/**\n\t * Sets the invalid text.\n\t */\n\t@Input() invalidText;\n\t/**\n\t * Emits event notifying other classes when a change in state occurs in the input.\n\t */\n\t@Output() change = new EventEmitter<NumberChange>();\n\n\t/**\n\t * Creates an instance of `Number`.\n\t * @memberof Number\n\t */\n\tconstructor() {\n\t\tNumber.numberCount++;\n\t}\n\n\t/**\n\t * This is the initial value set to the component\n\t * @param value The input value.\n\t */\n\tpublic writeValue(value: any) {\n\t\tthis.value = value;\n\t}\n\n\t/**\n\t * Sets a method in order to propagate changes back to the form.\n\t * @param {any} fn\n\t * @memberof Number\n\t */\n\tpublic registerOnChange(fn: any) {\n\t\tthis.propagateChange = fn;\n\t}\n\n\t/**\n\t * Registers a callback to be triggered when the control has been touched.\n\t * @param fn Callback to be triggered when the number input is touched.\n\t */\n\tpublic registerOnTouched(fn: any) {\n\t\tthis.onTouched = fn;\n\t}\n\n\t/**\n\t * Called when number input is blurred. Needed to properly implement `ControlValueAccessor`.\n\t * @memberof Number\n\t */\n\tonTouched: () => any = () => {};\n\n\t/**\n\t * Method set in `registerOnChange` to propagate changes back to the form.\n\t * @memberof Number\n\t */\n\tpropagateChange = (_: any) => {};\n\n\t/**\n\t * Adds 1 to the current `value`.\n\t */\n\tonIncrement(): void {\n\t\tif (isNullOrUndefined(this.max) || this.value < this.max) {\n\t\t\tthis.value++;\n\t\t\tthis.emitChangeEvent();\n\t\t}\n\t}\n\n\t/**\n\t * Subtracts 1 to the current `value`.\n\t */\n\tonDecrement(): void {\n\t\tif (isNullOrUndefined(this.min) || this.value > this.min) {\n\t\t\tthis.value--;\n\t\t\tthis.emitChangeEvent();\n\t\t}\n\t}\n\n\t/**\n\t * Creates a class of `NumberChange` to emit the change in the `Number`.\n\t */\n\temitChangeEvent(): void {\n\t\tlet event = new NumberChange();\n\t\tevent.source = this;\n\t\tevent.value = this.value;\n\t\tthis.change.emit(event);\n\t\tthis.propagateChange(this.value);\n\t}\n\n\tonNumberInputChange(event) {\n\t\tthis.value = event.target.value;\n\t\tthis.emitChangeEvent();\n\t}\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
[{"__symbolic":"module","version":4,"metadata":{"NumberChange":{"__symbolic":"class"},"Number":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":29,"character":1},"arguments":[{"selector":"ibm-number","template":"\n\t\t<label *ngIf=\"skeleton && label\" class=\"bx--label bx--skeleton\"></label>\n\t\t<label *ngIf=\"!skeleton && label\" [for]=\"id\" class=\"bx--label\">{{label}}</label>\n\t\t<div *ngIf=\"helperText\" class=\"bx--form__helper-text\">{{helperText}}</div>\n\t\t<div\n\t\t\tdata-numberinput\n\t\t\t[attr.data-invalid]=\"(invalid ? '' : null)\"\n\t\t\tclass=\"bx--number\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'bx--number--light': theme === 'light',\n\t\t\t\t'bx--number--nolabel': !label,\n\t\t\t\t'bx--number--helpertext': helperText,\n\t\t\t\t'bx--skeleton' : skeleton\n\t\t\t}\">\n\t\t\t<input\n\t\t\t\ttype=\"number\"\n\t\t\t\t[id]=\"id\"\n\t\t\t\t[value]=\"value\"\n\t\t\t\t[min]=\"min\"\n\t\t\t\t[max]=\"max\"\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t[required]=\"required\"\n\t\t\t\t(input)=\"onNumberInputChange($event)\"/>\n\t\t\t<div *ngIf=\"!skeleton\" class=\"bx--number__controls\">\n\t\t\t\t<button\n\t\t\t\t\tclass=\"bx--number__control-btn up-icon\"\n\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\taria-atomic=\"true\"\n\t\t\t\t\t(click)=\"onIncrement()\">\n\t\t\t\t\t<ibm-icon-caret-up16></ibm-icon-caret-up16>\n\t\t\t\t</button>\n\t\t\t\t<button\n\t\t\t\t\tclass=\"bx--number__control-btn down-icon\"\n\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\taria-atomic=\"true\"\n\t\t\t\t\t(click)=\"onDecrement()\">\n\t\t\t\t\t<ibm-icon-caret-down16></ibm-icon-caret-down16>\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"invalid\" class=\"bx--form-requirement\">\n\t\t\t\t{{invalidText}}\n\t\t\t</div>\n\t\t</div>\n\t","providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":
|
|
1
|
+
[{"__symbolic":"module","version":4,"metadata":{"NumberChange":{"__symbolic":"class"},"Number":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":29,"character":1},"arguments":[{"selector":"ibm-number","template":"\n\t\t<label *ngIf=\"skeleton && label\" class=\"bx--label bx--skeleton\"></label>\n\t\t<label *ngIf=\"!skeleton && label\" [for]=\"id\" class=\"bx--label\">{{label}}</label>\n\t\t<div *ngIf=\"helperText\" class=\"bx--form__helper-text\">{{helperText}}</div>\n\t\t<div\n\t\t\tdata-numberinput\n\t\t\t[attr.data-invalid]=\"(invalid ? '' : null)\"\n\t\t\tclass=\"bx--number\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'bx--number--light': theme === 'light',\n\t\t\t\t'bx--number--nolabel': !label,\n\t\t\t\t'bx--number--helpertext': helperText,\n\t\t\t\t'bx--skeleton' : skeleton\n\t\t\t}\">\n\t\t\t<input\n\t\t\t\ttype=\"number\"\n\t\t\t\t[id]=\"id\"\n\t\t\t\t[value]=\"value\"\n\t\t\t\t[min]=\"min\"\n\t\t\t\t[max]=\"max\"\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t[required]=\"required\"\n\t\t\t\t(input)=\"onNumberInputChange($event)\"/>\n\t\t\t<div *ngIf=\"!skeleton\" class=\"bx--number__controls\">\n\t\t\t\t<button\n\t\t\t\t\tclass=\"bx--number__control-btn up-icon\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\taria-atomic=\"true\"\n\t\t\t\t\t(click)=\"onIncrement()\">\n\t\t\t\t\t<ibm-icon-caret-up16></ibm-icon-caret-up16>\n\t\t\t\t</button>\n\t\t\t\t<button\n\t\t\t\t\tclass=\"bx--number__control-btn down-icon\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\taria-atomic=\"true\"\n\t\t\t\t\t(click)=\"onDecrement()\">\n\t\t\t\t\t<ibm-icon-caret-down16></ibm-icon-caret-down16>\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"invalid\" class=\"bx--form-requirement\">\n\t\t\t\t{{invalidText}}\n\t\t\t</div>\n\t\t</div>\n\t","providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":79,"character":12},"useExisting":{"__symbolic":"reference","name":"Number"},"multi":true}]}]}],"members":{"containerClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":91,"character":2},"arguments":["class.bx--form-item"]}]}],"theme":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":96,"character":2}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":100,"character":2}}]}],"skeleton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":104,"character":2}}]}],"invalid":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":108,"character":2}}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":112,"character":2}}]}],"required":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":116,"character":2}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":120,"character":2}}]}],"min":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":124,"character":2}}]}],"max":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":128,"character":2}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":132,"character":2}}]}],"helperText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":136,"character":2}}]}],"invalidText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":140,"character":2}}]}],"change":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":144,"character":2}}]}],"__ctor__":[{"__symbolic":"constructor"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"onIncrement":[{"__symbolic":"method"}],"onDecrement":[{"__symbolic":"method"}],"emitChangeEvent":[{"__symbolic":"method"}],"onNumberInputChange":[{"__symbolic":"method"}]},"statics":{"numberCount":0}}}}]
|
|
@@ -38,10 +38,10 @@ export { RenderType_Number as RenderType_Number };
|
|
|
38
38
|
function View_Number_1(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null, 0, "label", [["class", "bx--label bx--skeleton"]], null, null, null, null, null))], null, null); }
|
|
39
39
|
function View_Number_2(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null, 1, "label", [["class", "bx--label"]], [[8, "htmlFor", 0]], null, null, null, null)), (_l()(), i0.ɵted(1, null, ["", ""]))], null, function (_ck, _v) { var _co = _v.component; var currVal_0 = _co.id; _ck(_v, 0, 0, currVal_0); var currVal_1 = _co.label; _ck(_v, 1, 0, currVal_1); }); }
|
|
40
40
|
function View_Number_3(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null, 1, "div", [["class", "bx--form__helper-text"]], null, null, null, null, null)), (_l()(), i0.ɵted(1, null, ["", ""]))], null, function (_ck, _v) { var _co = _v.component; var currVal_0 = _co.helperText; _ck(_v, 1, 0, currVal_0); }); }
|
|
41
|
-
function View_Number_4(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null, 6, "div", [["class", "bx--number__controls"]], null, null, null, null, null)), (_l()(), i0.ɵeld(1, 0, null, null, 2, "button", [["aria-atomic", "true"], ["aria-live", "polite"], ["class", "bx--number__control-btn up-icon"]], null, [[null, "click"]], function (_v, en, $event) { var ad = true; var _co = _v.component; if (("click" === en)) {
|
|
41
|
+
function View_Number_4(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null, 6, "div", [["class", "bx--number__controls"]], null, null, null, null, null)), (_l()(), i0.ɵeld(1, 0, null, null, 2, "button", [["aria-atomic", "true"], ["aria-live", "polite"], ["class", "bx--number__control-btn up-icon"], ["type", "button"]], null, [[null, "click"]], function (_v, en, $event) { var ad = true; var _co = _v.component; if (("click" === en)) {
|
|
42
42
|
var pd_0 = (_co.onIncrement() !== false);
|
|
43
43
|
ad = (pd_0 && ad);
|
|
44
|
-
} return ad; }, null, null)), (_l()(), i0.ɵeld(2, 0, null, null, 1, "ibm-icon-caret-up16", [], null, null, null, i1.View_CaretUp16_0, i1.RenderType_CaretUp16)), i0.ɵdid(3, 4243456, null, 0, i2.CaretUp16, [i0.ElementRef], null, null), (_l()(), i0.ɵeld(4, 0, null, null, 2, "button", [["aria-atomic", "true"], ["aria-live", "polite"], ["class", "bx--number__control-btn down-icon"]], null, [[null, "click"]], function (_v, en, $event) { var ad = true; var _co = _v.component; if (("click" === en)) {
|
|
44
|
+
} return ad; }, null, null)), (_l()(), i0.ɵeld(2, 0, null, null, 1, "ibm-icon-caret-up16", [], null, null, null, i1.View_CaretUp16_0, i1.RenderType_CaretUp16)), i0.ɵdid(3, 4243456, null, 0, i2.CaretUp16, [i0.ElementRef], null, null), (_l()(), i0.ɵeld(4, 0, null, null, 2, "button", [["aria-atomic", "true"], ["aria-live", "polite"], ["class", "bx--number__control-btn down-icon"], ["type", "button"]], null, [[null, "click"]], function (_v, en, $event) { var ad = true; var _co = _v.component; if (("click" === en)) {
|
|
45
45
|
var pd_0 = (_co.onDecrement() !== false);
|
|
46
46
|
ad = (pd_0 && ad);
|
|
47
47
|
} return ad; }, null, null)), (_l()(), i0.ɵeld(5, 0, null, null, 1, "ibm-icon-caret-down16", [], null, null, null, i3.View_CaretDown16_0, i3.RenderType_CaretDown16)), i0.ɵdid(6, 4243456, null, 0, i4.CaretDown16, [i0.ElementRef], null, null)], null, null); }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"number.component.ngfactory.js","sourceRoot":"","sources":["../src/number-input/number.component.ngfactory.ts","../src/number-input/number.component.ts.Number.html"],"names":[],"mappings":";;;;;;;;;;;;;;;;;iDCCE,iHAAgE;iDAChE,mHAA+D,KAAA,gCAAS,yDAAtC,mBAAU,KAA5C,YAA+D,EAA7B,SAAU,GAAmB,kDAAS;iDACxE,8GAAsD,KAAA,gJAAc;iDAoBnE,6GAAoD,KACnD,
|
|
1
|
+
{"version":3,"file":"number.component.ngfactory.js","sourceRoot":"","sources":["../src/number-input/number.component.ngfactory.ts","../src/number-input/number.component.ts.Number.html"],"names":[],"mappings":";;;;;;;;;;;;;;;;;iDCCE,iHAAgE;iDAChE,mHAA+D,KAAA,gCAAS,yDAAtC,mBAAU,KAA5C,YAA+D,EAA7B,SAAU,GAAmB,kDAAS;iDACxE,8GAAsD,KAAA,gJAAc;iDAoBnE,6GAAoD,KACnD,qPAKyB,YAAxB;;wBAAuB;MALxB,wBAKyB,KACxB,wMAAqB,IAEtB,uPAKyB,YAAxB;;wBAAuB;MALxB,wBAKyB,KACxB,gNAAuB;iDAGzB,6GAAkD,KAAA,mJAElD;wDA1CD,sKAAgE,IAChE,sKAA+D,IAC/D,sKAAsD,IACtD,0TASI,GALH,6GAKE,MACF,qPAQwC,YAAvC;;wBAAqC;MARtC,wBAQwC,KACxC,uKAAoD,IAkBpD,uKAAkD,iDAxC5C,oCAAyB,SAAhC,YAAgE,EAAzD,SAAyB,GACzB,qCAA0B,SAAjC,YAA+D,EAAxD,SAA0B,GAC5B,mBAAkB,aAAvB,YAAsD,EAAjD,SAAkB,GAItB,4BAAkB,EAClB,sFAKE,YATH,YASI,EANH,SAAkB,EAClB,SAKE,GAUG,qBAAiB,WAAtB,aAAoD,EAA/C,UAAiB,GAkBjB,oBAAe,UAApB,aAAkD,EAA7C,UAAe,mDAnCpB,wCAA2C,GAF5C,YASI,EAPH,SAA2C,GAU1C,mBAAS,KACT,mBAAe,QACf,mBAAW,MACX,mBAAW,MACX,oBAAqB,WACrB,oBAAqB,WAPtB,YAQwC,EANvC,SAAS,EACT,SAAe,EACf,SAAW,EACX,SAAW,EACX,UAAqB,EACrB,UAAqB","sourcesContent":["import * as i0 from '@angular/core';\ni0.ComponentFactory;\n","\n\t\t<label *ngIf=\"skeleton && label\" class=\"bx--label bx--skeleton\"></label>\n\t\t<label *ngIf=\"!skeleton && label\" [for]=\"id\" class=\"bx--label\">{{label}}</label>\n\t\t<div *ngIf=\"helperText\" class=\"bx--form__helper-text\">{{helperText}}</div>\n\t\t<div\n\t\t\tdata-numberinput\n\t\t\t[attr.data-invalid]=\"(invalid ? '' : null)\"\n\t\t\tclass=\"bx--number\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'bx--number--light': theme === 'light',\n\t\t\t\t'bx--number--nolabel': !label,\n\t\t\t\t'bx--number--helpertext': helperText,\n\t\t\t\t'bx--skeleton' : skeleton\n\t\t\t}\">\n\t\t\t<input\n\t\t\t\ttype=\"number\"\n\t\t\t\t[id]=\"id\"\n\t\t\t\t[value]=\"value\"\n\t\t\t\t[min]=\"min\"\n\t\t\t\t[max]=\"max\"\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t[required]=\"required\"\n\t\t\t\t(input)=\"onNumberInputChange($event)\"/>\n\t\t\t<div *ngIf=\"!skeleton\" class=\"bx--number__controls\">\n\t\t\t\t<button\n\t\t\t\t\tclass=\"bx--number__control-btn up-icon\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\taria-atomic=\"true\"\n\t\t\t\t\t(click)=\"onIncrement()\">\n\t\t\t\t\t<ibm-icon-caret-up16></ibm-icon-caret-up16>\n\t\t\t\t</button>\n\t\t\t\t<button\n\t\t\t\t\tclass=\"bx--number__control-btn down-icon\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\taria-atomic=\"true\"\n\t\t\t\t\t(click)=\"onDecrement()\">\n\t\t\t\t\t<ibm-icon-caret-down16></ibm-icon-caret-down16>\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"invalid\" class=\"bx--form-requirement\">\n\t\t\t\t{{invalidText}}\n\t\t\t</div>\n\t\t</div>\n\t"]}
|
package/package.json
CHANGED
|
@@ -206,7 +206,7 @@ var Pagination = /** @class */ (function () {
|
|
|
206
206
|
Pagination.decorators = [
|
|
207
207
|
{ type: Component, args: [{
|
|
208
208
|
selector: "ibm-pagination",
|
|
209
|
-
template: "\n\t<div\n\t\tclass=\"bx--pagination\"\n\t\t[ngClass]=\"{\n\t\t\t'bx--skeleton': skeleton\n\t\t}\">\n\t\t<!-- left skeleton div -->\n\t\t<div *ngIf=\"skeleton\" class=\"bx--pagination__left\">\n\t\t\t<p class=\"bx--skeleton__text\" style=\"width: 70px\"></p>\n\t\t\t<p class=\"bx--skeleton__text\" style=\"width: 35px\"></p>\n\t\t\t<p class=\"bx--skeleton__text\" style=\"width: 105px\"></p>\n\t\t</div>\n\n\t\t<div *ngIf=\"!skeleton\" class=\"bx--pagination__left\">\n\t\t\t<label class=\"bx--pagination__text\" [for]=\"itemsPerPageSelectId\">\n\t\t\t\t{{itemsPerPageText | async}}\n\t\t\t</label>\n\t\t\t<div class=\"bx--form-item\">\n\t\t\t\t<div class=\"bx--select bx--select--inline\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'bx--select__item-count': isExperimental\n\t\t\t\t\t}\">\n\t\t\t\t\t<
|
|
209
|
+
template: "\n\t<div\n\t\tclass=\"bx--pagination\"\n\t\t[ngClass]=\"{\n\t\t\t'bx--skeleton': skeleton\n\t\t}\">\n\t\t<!-- left skeleton div -->\n\t\t<div *ngIf=\"skeleton\" class=\"bx--pagination__left\">\n\t\t\t<p class=\"bx--skeleton__text\" style=\"width: 70px\"></p>\n\t\t\t<p class=\"bx--skeleton__text\" style=\"width: 35px\"></p>\n\t\t\t<p class=\"bx--skeleton__text\" style=\"width: 105px\"></p>\n\t\t</div>\n\n\t\t<div *ngIf=\"!skeleton\" class=\"bx--pagination__left\">\n\t\t\t<label class=\"bx--pagination__text\" [for]=\"itemsPerPageSelectId\">\n\t\t\t\t{{itemsPerPageText | async}}\n\t\t\t</label>\n\t\t\t<div class=\"bx--form-item\">\n\t\t\t\t<div class=\"bx--select bx--select--inline\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'bx--select__item-count': isExperimental\n\t\t\t\t\t}\">\n\t\t\t\t\t<select\n\t\t\t\t\t\t[id]=\"itemsPerPageSelectId\"\n\t\t\t\t\t\t[(ngModel)]=\"itemsPerPage\"\n\t\t\t\t\t\tclass=\"bx--select-input\">\n\t\t\t\t\t\t<option class=\"bx--select-option\" value=\"10\">10</option>\n\t\t\t\t\t\t<option class=\"bx--select-option\" value=\"20\">20</option>\n\t\t\t\t\t\t<option class=\"bx--select-option\" value=\"30\">30</option>\n\t\t\t\t\t\t<option class=\"bx--select-option\" value=\"40\">40</option>\n\t\t\t\t\t\t<option class=\"bx--select-option\" value=\"50\">50</option>\n\t\t\t\t\t</select>\n\t\t\t\t\t<ibm-icon-chevron-down16\n\t\t\t\t\t\tstyle=\"display: inherit;\"\n\t\t\t\t\t\tinnerClass=\"bx--select__arrow\"\n\t\t\t\t\t\t[ariaLabel]=\"optionsListText | async\">\n\t\t\t\t\t</ibm-icon-chevron-down16>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<span class=\"bx--pagination__text\">\n\t\t\t\t<span *ngIf=\"!isExperimental\">| </span>\n\t\t\t\t{{totalItemsText | i18nReplace:{start: startItemIndex, end: endItemIndex, total: model.totalDataLength } | async}}\n\t\t\t</span>\n\t\t</div>\n\n\t\t<!-- right skeleton div -->\n\t\t<div *ngIf=\"skeleton\" class=\"bx--pagination__right bx--pagination--inline\">\n\t\t\t<p class=\"bx--skeleton__text\" style=\"width: 70px\"></p>\n\t\t</div>\n\n\t\t<div *ngIf=\"!skeleton\" class=\"bx--pagination__right\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'bx--pagination--inline': !isExperimental\n\t\t\t}\">\n\n\t\t\t<div class=\"bx--form-item\">\n\t\t\t\t<div class=\"bx--select bx--select--inline\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'bx--select__page-number' : isExperimental\n\t\t\t\t}\">\n\t\t\t\t\t<label [for]=\"currentPageSelectId\" class=\"bx--label bx--visually-hidden\">{{itemsPerPageText | async}}</label>\n\t\t\t\t\t<select [id]=\"currentPageSelectId\" class=\"bx--select-input\" [(ngModel)]=\"currentPage\">\n\t\t\t\t\t\t<option *ngFor=\"let i of range(lastPage + 1, 1)\" class=\"bx--select-option\" [value]=\"i\">{{i}}</option>\n\t\t\t\t\t</select>\n\t\t\t\t\t<ibm-icon-chevron-down16\n\t\t\t\t\t\tstyle=\"display: inherit;\"\n\t\t\t\t\t\tinnerClass=\"bx--select__arrow\"\n\t\t\t\t\t\t[ariaLabel]=\"optionsListText | async\">\n\t\t\t\t\t</ibm-icon-chevron-down16>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<span class=\"bx--pagination__text\">\n\t\t\t\t{{ofLastPagesText | i18nReplace: {last: lastPage} | async}}\n\t\t\t</span>\n\t\t\t<button\n\t\t\t\tclass=\"bx--pagination__button bx--pagination__button--backward\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'bx--pagination__button--no-index': currentPage <= 1\n\t\t\t\t}\"\n\t\t\t\ttabindex=\"0\"\n\t\t\t\t[attr.aria-label]=\"backwardText | async\"\n\t\t\t\t(click)=\"selectPage.emit(previousPage)\"\n\t\t\t\t[disabled]=\"(currentPage <= 1 ? true : null)\">\n\t\t\t\t<ibm-icon-caret-left16></ibm-icon-caret-left16>\n\t\t\t</button>\n\n\t\t\t<button\n\t\t\t\tclass=\"bx--pagination__button bx--pagination__button--forward\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'bx--pagination__button--no-index': currentPage >= lastPage\n\t\t\t\t}\"\n\t\t\t\ttabindex=\"0\"\n\t\t\t\t[attr.aria-label]=\"forwardText | async\"\n\t\t\t\t(click)=\"selectPage.emit(nextPage)\"\n\t\t\t\t[disabled]=\"(currentPage >= lastPage ? true : null)\">\n\t\t\t\t<ibm-icon-caret-right16></ibm-icon-caret-right16>\n\t\t\t</button>\n\t\t</div>\n\t</div>\n\t"
|
|
210
210
|
},] },
|
|
211
211
|
];
|
|
212
212
|
/** @nocollapse */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pagination.component.js","sourceRoot":"","sources":["../src/pagination/pagination.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { PaginationModel } from \"./pagination.module\";\nimport {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter\n} from \"@angular/core\";\n\nimport { range } from \"../common/utils\";\nimport { I18n } from \"./../i18n/i18n.module\";\nimport { BehaviorSubject } from \"rxjs\";\nimport { ExperimentalService } from \"./../experimental.module\";\n\n/**\n * Use pagination when you have multiple pages of data to handle.\n *\n * ```html\n * <ibm-pagination [model]=\"model\" (selectPage)=\"selectPage($event)\"></ibm-pagination>\n * ```\n *\n * In your `selectPage()` method set the `model.currentPage` to selected page, _after_\n * you load the page.\n *\n * ```typescript\n * selectPage(page) {\n * \t// ... your code to load the page goes here\n *\n * \tthis.model.currentPage = page;\n *\n * \t// ... anything you want to do after page selection changes goes here\n * }\n * ```\n *\n * @export\n * @class Pagination\n */\n@Component({\n\tselector: \"ibm-pagination\",\n\ttemplate: `\n\t<div\n\t\tclass=\"bx--pagination\"\n\t\t[ngClass]=\"{\n\t\t\t'bx--skeleton': skeleton\n\t\t}\">\n\t\t<!-- left skeleton div -->\n\t\t<div *ngIf=\"skeleton\" class=\"bx--pagination__left\">\n\t\t\t<p class=\"bx--skeleton__text\" style=\"width: 70px\"></p>\n\t\t\t<p class=\"bx--skeleton__text\" style=\"width: 35px\"></p>\n\t\t\t<p class=\"bx--skeleton__text\" style=\"width: 105px\"></p>\n\t\t</div>\n\n\t\t<div *ngIf=\"!skeleton\" class=\"bx--pagination__left\">\n\t\t\t<label class=\"bx--pagination__text\" [for]=\"itemsPerPageSelectId\">\n\t\t\t\t{{itemsPerPageText | async}}\n\t\t\t</label>\n\t\t\t<div class=\"bx--form-item\">\n\t\t\t\t<div class=\"bx--select bx--select--inline\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'bx--select__item-count': isExperimental\n\t\t\t\t\t}\">\n\t\t\t\t\t<label\n\t\t\t\t\t\t[for]=\"itemsPerPageSelectId\"\n\t\t\t\t\t\tclass=\"bx--label bx--visually-hidden\">\n\t\t\t\t\t\t{{itemsPerPageText | async}}\n\t\t\t\t\t</label>\n\t\t\t\t\t<select\n\t\t\t\t\t\t[id]=\"itemsPerPageSelectId\"\n\t\t\t\t\t\t[(ngModel)]=\"itemsPerPage\"\n\t\t\t\t\t\tclass=\"bx--select-input\"\n\t\t\t\t\t\taria-describedby=\"false\">\n\t\t\t\t\t\t<option class=\"bx--select-option\" value=\"10\">10</option>\n\t\t\t\t\t\t<option class=\"bx--select-option\" value=\"20\">20</option>\n\t\t\t\t\t\t<option class=\"bx--select-option\" value=\"30\">30</option>\n\t\t\t\t\t\t<option class=\"bx--select-option\" value=\"40\">40</option>\n\t\t\t\t\t\t<option class=\"bx--select-option\" value=\"50\">50</option>\n\t\t\t\t\t</select>\n\t\t\t\t\t<ibm-icon-chevron-down16\n\t\t\t\t\t\tstyle=\"display: inherit;\"\n\t\t\t\t\t\tinnerClass=\"bx--select__arrow\"\n\t\t\t\t\t\t[ariaLabel]=\"optionsListText | async\">\n\t\t\t\t\t</ibm-icon-chevron-down16>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<span class=\"bx--pagination__text\">\n\t\t\t\t<span *ngIf=\"!isExperimental\">| </span>\n\t\t\t\t{{totalItemsText | i18nReplace:{start: startItemIndex, end: endItemIndex, total: model.totalDataLength } | async}}\n\t\t\t</span>\n\t\t</div>\n\n\t\t<!-- right skeleton div -->\n\t\t<div *ngIf=\"skeleton\" class=\"bx--pagination__right bx--pagination--inline\">\n\t\t\t<p class=\"bx--skeleton__text\" style=\"width: 70px\"></p>\n\t\t</div>\n\n\t\t<div *ngIf=\"!skeleton\" class=\"bx--pagination__right\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'bx--pagination--inline': !isExperimental\n\t\t\t}\">\n\n\t\t\t<div class=\"bx--form-item\">\n\t\t\t\t<div class=\"bx--select bx--select--inline\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'bx--select__page-number' : isExperimental\n\t\t\t\t}\">\n\t\t\t\t\t<label [for]=\"currentPageSelectId\" class=\"bx--label bx--visually-hidden\">{{itemsPerPageText | async}}</label>\n\t\t\t\t\t<select [id]=\"currentPageSelectId\" class=\"bx--select-input\" aria-describedby=\"false\" [(ngModel)]=\"currentPage\">\n\t\t\t\t\t\t<option *ngFor=\"let i of range(lastPage + 1, 1)\" class=\"bx--select-option\" [value]=\"i\">{{i}}</option>\n\t\t\t\t\t</select>\n\t\t\t\t\t<ibm-icon-chevron-down16\n\t\t\t\t\t\tstyle=\"display: inherit;\"\n\t\t\t\t\t\tinnerClass=\"bx--select__arrow\"\n\t\t\t\t\t\t[ariaLabel]=\"optionsListText | async\">\n\t\t\t\t\t</ibm-icon-chevron-down16>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<span class=\"bx--pagination__text\">\n\t\t\t\t{{ofLastPagesText | i18nReplace: {last: lastPage} | async}}\n\t\t\t</span>\n\t\t\t<button\n\t\t\t\tclass=\"bx--pagination__button bx--pagination__button--backward\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'bx--pagination__button--no-index': currentPage <= 1\n\t\t\t\t}\"\n\t\t\t\ttabindex=\"0\"\n\t\t\t\t[attr.aria-label]=\"backwardText | async\"\n\t\t\t\t(click)=\"selectPage.emit(previousPage)\"\n\t\t\t\t[disabled]=\"(currentPage <= 1 ? true : null)\">\n\t\t\t\t<ibm-icon-caret-left16></ibm-icon-caret-left16>\n\t\t\t</button>\n\n\t\t\t<button\n\t\t\t\tclass=\"bx--pagination__button bx--pagination__button--forward\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'bx--pagination__button--no-index': currentPage >= lastPage\n\t\t\t\t}\"\n\t\t\t\ttabindex=\"0\"\n\t\t\t\t[attr.aria-label]=\"forwardText | async\"\n\t\t\t\t(click)=\"selectPage.emit(nextPage)\"\n\t\t\t\t[disabled]=\"(currentPage >= lastPage ? true : null)\">\n\t\t\t\t<ibm-icon-caret-right16></ibm-icon-caret-right16>\n\t\t\t</button>\n\t\t</div>\n\t</div>\n\t`\n})\nexport class Pagination {\n\tstatic paginationCounter = 0;\n\n\t/**\n\t * Set to `true` for a loading pagination component.\n\t */\n\t@Input() skeleton = false;\n\t/**\n\t * `PaginationModel` with the information about pages you're controlling.\n\t *\n\t * @type {Model}\n\t */\n\t@Input() model: PaginationModel;\n\n\t/**\n\t * Expects an object that contains some or all of:\n\t * ```\n\t * {\n\t *\t\t\"ITEMS_PER_PAGE\": \"Items per page:\",\n\t *\t\t\"OPEN_LIST_OF_OPTIONS\": \"Open list of options\",\n\t *\t\t\"BACKWARD\": \"Backward\",\n\t *\t\t\"FORWARD\": \"Forward\",\n\t *\t\t\"TOTAL_ITEMS\": \"{{start}}-{{end}} of {{total}} items\",\n\t *\t\t\"TOTAL_PAGES\": \"{{current}} of {{last}} pages\",\n\t *\t\t\"OF_LAST_PAGES\": \"of {{last}} pages\"\n\t * }\n\t * ```\n\t */\n\t@Input()\n\tset translations (value) {\n\t\tif (value.ITEMS_PER_PAGE) {\n\t\t\tthis.itemsPerPageText = new BehaviorSubject(value.ITEMS_PER_PAGE);\n\t\t}\n\t\tif (value.OPEN_LIST_OF_OPTIONS) {\n\t\t\tthis.optionsListText = new BehaviorSubject(value.OPEN_LIST_OF_OPTIONS);\n\t\t}\n\t\tif (value.BACKWARD) {\n\t\t\tthis.backwardText = new BehaviorSubject(value.BACKWARD);\n\t\t}\n\t\tif (value.FORWARD) {\n\t\t\tthis.forwardText = new BehaviorSubject(value.FORWARD);\n\t\t}\n\t\tif (value.TOTAL_ITEMS) {\n\t\t\tthis.totalItemsText = new BehaviorSubject(value.TOTAL_ITEMS);\n\t\t}\n\t\tif (value.TOTAL_PAGES) {\n\t\t\tthis.totalPagesText = new BehaviorSubject(value.TOTAL_PAGES);\n\t\t}\n\t\tif (value.OF_LAST_PAGES) {\n\t\t\tthis.ofLastPagesText = new BehaviorSubject(value.OF_LAST_PAGES);\n\t\t}\n\t}\n\n\t/**\n\t * Emits the new page number.\n\t *\n\t * You should tie into this and update `model.currentPage` once the fresh\n\t * data is finally loaded.\n\t */\n\t@Output() selectPage = new EventEmitter<number>();\n\n\tget itemsPerPage() {\n\t\treturn this.model.pageLength;\n\t}\n\tset itemsPerPage(value) {\n\t\tthis.model.pageLength = Number(value);\n\t\tthis.currentPage = 1; // reset page\n\t}\n\n\tget currentPage() {\n\t\treturn this.model.currentPage;\n\t}\n\tset currentPage(value) {\n\t\tvalue = Number(value);\n\t\t// emits the value to allow the user to update current page\n\t\t// in the model once the page is loaded\n\t\tthis.selectPage.emit(value);\n\t}\n\t/**\n\t * The last page number to display in the pagination view.\n\t */\n\tget lastPage(): number {\n\t\tconst last = Math.ceil(this.model.totalDataLength / this.model.pageLength);\n\t\treturn last > 0 ? last : 1;\n\t}\n\n\tget startItemIndex() {\n\t\treturn this.endItemIndex > 0 ? (this.currentPage - 1) * this.model.pageLength + 1 : 0;\n\t}\n\n\tget endItemIndex() {\n\t\tconst projectedEndItemIndex = this.currentPage * this.model.pageLength;\n\n\t\treturn projectedEndItemIndex < this.model.totalDataLength ? projectedEndItemIndex : this.model.totalDataLength;\n\t}\n\n\t/**\n\t * The previous page number to navigate to, from the current page.\n\t */\n\tget previousPage(): number {\n\t\treturn this.currentPage <= 1 ? 1 : this.currentPage - 1;\n\t}\n\n\t/**\n\t * The next page number to navigate to, from the current page.\n\t */\n\tget nextPage(): number {\n\t\tconst lastPage = this.lastPage;\n\t\treturn this.currentPage >= lastPage ? lastPage : this.currentPage + 1;\n\t}\n\n\tget isExperimental() {\n\t\treturn this.experimental.isExperimental;\n\t}\n\n\titemsPerPageSelectId = `pagination-select-items-per-page-${Pagination.paginationCounter}`;\n\tcurrentPageSelectId = `pagination-select-current-page-${Pagination.paginationCounter}`;\n\n\titemsPerPageText = this.i18n.get(\"PAGINATION.ITEMS_PER_PAGE\");\n\toptionsListText = this.i18n.get(\"PAGINATION.OPEN_LIST_OF_OPTIONS\");\n\tbackwardText = this.i18n.get(\"PAGINATION.BACKWARD\");\n\tforwardText = this.i18n.get(\"PAGINATION.FORWARD\");\n\ttotalItemsText = this.i18n.get(\"PAGINATION.TOTAL_ITEMS\");\n\ttotalPagesText = this.i18n.get(\"PAGINATION.TOTAL_PAGES\");\n\tofLastPagesText = this.i18n.get(\"PAGINATION.OF_LAST_PAGES\");\n\n\tconstructor(protected i18n: I18n, protected experimental: ExperimentalService) {\n\t\tPagination.paginationCounter++;\n\t}\n\n\t/**\n\t * Generates a list of numbers. (Python function)\n\t * Used to display the correct pagination controls.\n\t * @returns {array}\n\t */\n\trange(stop: number, start = 0, step = 1) {\n\t\treturn range(stop, start, step);\n\t}\n}\n"]}
|
|
1
|
+
{"version":3,"file":"pagination.component.js","sourceRoot":"","sources":["../src/pagination/pagination.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { PaginationModel } from \"./pagination.module\";\nimport {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter\n} from \"@angular/core\";\n\nimport { range } from \"../common/utils\";\nimport { I18n } from \"./../i18n/i18n.module\";\nimport { BehaviorSubject } from \"rxjs\";\nimport { ExperimentalService } from \"./../experimental.module\";\n\n/**\n * Use pagination when you have multiple pages of data to handle.\n *\n * ```html\n * <ibm-pagination [model]=\"model\" (selectPage)=\"selectPage($event)\"></ibm-pagination>\n * ```\n *\n * In your `selectPage()` method set the `model.currentPage` to selected page, _after_\n * you load the page.\n *\n * ```typescript\n * selectPage(page) {\n * \t// ... your code to load the page goes here\n *\n * \tthis.model.currentPage = page;\n *\n * \t// ... anything you want to do after page selection changes goes here\n * }\n * ```\n *\n * @export\n * @class Pagination\n */\n@Component({\n\tselector: \"ibm-pagination\",\n\ttemplate: `\n\t<div\n\t\tclass=\"bx--pagination\"\n\t\t[ngClass]=\"{\n\t\t\t'bx--skeleton': skeleton\n\t\t}\">\n\t\t<!-- left skeleton div -->\n\t\t<div *ngIf=\"skeleton\" class=\"bx--pagination__left\">\n\t\t\t<p class=\"bx--skeleton__text\" style=\"width: 70px\"></p>\n\t\t\t<p class=\"bx--skeleton__text\" style=\"width: 35px\"></p>\n\t\t\t<p class=\"bx--skeleton__text\" style=\"width: 105px\"></p>\n\t\t</div>\n\n\t\t<div *ngIf=\"!skeleton\" class=\"bx--pagination__left\">\n\t\t\t<label class=\"bx--pagination__text\" [for]=\"itemsPerPageSelectId\">\n\t\t\t\t{{itemsPerPageText | async}}\n\t\t\t</label>\n\t\t\t<div class=\"bx--form-item\">\n\t\t\t\t<div class=\"bx--select bx--select--inline\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'bx--select__item-count': isExperimental\n\t\t\t\t\t}\">\n\t\t\t\t\t<select\n\t\t\t\t\t\t[id]=\"itemsPerPageSelectId\"\n\t\t\t\t\t\t[(ngModel)]=\"itemsPerPage\"\n\t\t\t\t\t\tclass=\"bx--select-input\">\n\t\t\t\t\t\t<option class=\"bx--select-option\" value=\"10\">10</option>\n\t\t\t\t\t\t<option class=\"bx--select-option\" value=\"20\">20</option>\n\t\t\t\t\t\t<option class=\"bx--select-option\" value=\"30\">30</option>\n\t\t\t\t\t\t<option class=\"bx--select-option\" value=\"40\">40</option>\n\t\t\t\t\t\t<option class=\"bx--select-option\" value=\"50\">50</option>\n\t\t\t\t\t</select>\n\t\t\t\t\t<ibm-icon-chevron-down16\n\t\t\t\t\t\tstyle=\"display: inherit;\"\n\t\t\t\t\t\tinnerClass=\"bx--select__arrow\"\n\t\t\t\t\t\t[ariaLabel]=\"optionsListText | async\">\n\t\t\t\t\t</ibm-icon-chevron-down16>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<span class=\"bx--pagination__text\">\n\t\t\t\t<span *ngIf=\"!isExperimental\">| </span>\n\t\t\t\t{{totalItemsText | i18nReplace:{start: startItemIndex, end: endItemIndex, total: model.totalDataLength } | async}}\n\t\t\t</span>\n\t\t</div>\n\n\t\t<!-- right skeleton div -->\n\t\t<div *ngIf=\"skeleton\" class=\"bx--pagination__right bx--pagination--inline\">\n\t\t\t<p class=\"bx--skeleton__text\" style=\"width: 70px\"></p>\n\t\t</div>\n\n\t\t<div *ngIf=\"!skeleton\" class=\"bx--pagination__right\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'bx--pagination--inline': !isExperimental\n\t\t\t}\">\n\n\t\t\t<div class=\"bx--form-item\">\n\t\t\t\t<div class=\"bx--select bx--select--inline\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'bx--select__page-number' : isExperimental\n\t\t\t\t}\">\n\t\t\t\t\t<label [for]=\"currentPageSelectId\" class=\"bx--label bx--visually-hidden\">{{itemsPerPageText | async}}</label>\n\t\t\t\t\t<select [id]=\"currentPageSelectId\" class=\"bx--select-input\" [(ngModel)]=\"currentPage\">\n\t\t\t\t\t\t<option *ngFor=\"let i of range(lastPage + 1, 1)\" class=\"bx--select-option\" [value]=\"i\">{{i}}</option>\n\t\t\t\t\t</select>\n\t\t\t\t\t<ibm-icon-chevron-down16\n\t\t\t\t\t\tstyle=\"display: inherit;\"\n\t\t\t\t\t\tinnerClass=\"bx--select__arrow\"\n\t\t\t\t\t\t[ariaLabel]=\"optionsListText | async\">\n\t\t\t\t\t</ibm-icon-chevron-down16>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<span class=\"bx--pagination__text\">\n\t\t\t\t{{ofLastPagesText | i18nReplace: {last: lastPage} | async}}\n\t\t\t</span>\n\t\t\t<button\n\t\t\t\tclass=\"bx--pagination__button bx--pagination__button--backward\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'bx--pagination__button--no-index': currentPage <= 1\n\t\t\t\t}\"\n\t\t\t\ttabindex=\"0\"\n\t\t\t\t[attr.aria-label]=\"backwardText | async\"\n\t\t\t\t(click)=\"selectPage.emit(previousPage)\"\n\t\t\t\t[disabled]=\"(currentPage <= 1 ? true : null)\">\n\t\t\t\t<ibm-icon-caret-left16></ibm-icon-caret-left16>\n\t\t\t</button>\n\n\t\t\t<button\n\t\t\t\tclass=\"bx--pagination__button bx--pagination__button--forward\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'bx--pagination__button--no-index': currentPage >= lastPage\n\t\t\t\t}\"\n\t\t\t\ttabindex=\"0\"\n\t\t\t\t[attr.aria-label]=\"forwardText | async\"\n\t\t\t\t(click)=\"selectPage.emit(nextPage)\"\n\t\t\t\t[disabled]=\"(currentPage >= lastPage ? true : null)\">\n\t\t\t\t<ibm-icon-caret-right16></ibm-icon-caret-right16>\n\t\t\t</button>\n\t\t</div>\n\t</div>\n\t`\n})\nexport class Pagination {\n\tstatic paginationCounter = 0;\n\n\t/**\n\t * Set to `true` for a loading pagination component.\n\t */\n\t@Input() skeleton = false;\n\t/**\n\t * `PaginationModel` with the information about pages you're controlling.\n\t *\n\t * @type {Model}\n\t */\n\t@Input() model: PaginationModel;\n\n\t/**\n\t * Expects an object that contains some or all of:\n\t * ```\n\t * {\n\t *\t\t\"ITEMS_PER_PAGE\": \"Items per page:\",\n\t *\t\t\"OPEN_LIST_OF_OPTIONS\": \"Open list of options\",\n\t *\t\t\"BACKWARD\": \"Backward\",\n\t *\t\t\"FORWARD\": \"Forward\",\n\t *\t\t\"TOTAL_ITEMS\": \"{{start}}-{{end}} of {{total}} items\",\n\t *\t\t\"TOTAL_PAGES\": \"{{current}} of {{last}} pages\",\n\t *\t\t\"OF_LAST_PAGES\": \"of {{last}} pages\"\n\t * }\n\t * ```\n\t */\n\t@Input()\n\tset translations (value) {\n\t\tif (value.ITEMS_PER_PAGE) {\n\t\t\tthis.itemsPerPageText = new BehaviorSubject(value.ITEMS_PER_PAGE);\n\t\t}\n\t\tif (value.OPEN_LIST_OF_OPTIONS) {\n\t\t\tthis.optionsListText = new BehaviorSubject(value.OPEN_LIST_OF_OPTIONS);\n\t\t}\n\t\tif (value.BACKWARD) {\n\t\t\tthis.backwardText = new BehaviorSubject(value.BACKWARD);\n\t\t}\n\t\tif (value.FORWARD) {\n\t\t\tthis.forwardText = new BehaviorSubject(value.FORWARD);\n\t\t}\n\t\tif (value.TOTAL_ITEMS) {\n\t\t\tthis.totalItemsText = new BehaviorSubject(value.TOTAL_ITEMS);\n\t\t}\n\t\tif (value.TOTAL_PAGES) {\n\t\t\tthis.totalPagesText = new BehaviorSubject(value.TOTAL_PAGES);\n\t\t}\n\t\tif (value.OF_LAST_PAGES) {\n\t\t\tthis.ofLastPagesText = new BehaviorSubject(value.OF_LAST_PAGES);\n\t\t}\n\t}\n\n\t/**\n\t * Emits the new page number.\n\t *\n\t * You should tie into this and update `model.currentPage` once the fresh\n\t * data is finally loaded.\n\t */\n\t@Output() selectPage = new EventEmitter<number>();\n\n\tget itemsPerPage() {\n\t\treturn this.model.pageLength;\n\t}\n\tset itemsPerPage(value) {\n\t\tthis.model.pageLength = Number(value);\n\t\tthis.currentPage = 1; // reset page\n\t}\n\n\tget currentPage() {\n\t\treturn this.model.currentPage;\n\t}\n\tset currentPage(value) {\n\t\tvalue = Number(value);\n\t\t// emits the value to allow the user to update current page\n\t\t// in the model once the page is loaded\n\t\tthis.selectPage.emit(value);\n\t}\n\t/**\n\t * The last page number to display in the pagination view.\n\t */\n\tget lastPage(): number {\n\t\tconst last = Math.ceil(this.model.totalDataLength / this.model.pageLength);\n\t\treturn last > 0 ? last : 1;\n\t}\n\n\tget startItemIndex() {\n\t\treturn this.endItemIndex > 0 ? (this.currentPage - 1) * this.model.pageLength + 1 : 0;\n\t}\n\n\tget endItemIndex() {\n\t\tconst projectedEndItemIndex = this.currentPage * this.model.pageLength;\n\n\t\treturn projectedEndItemIndex < this.model.totalDataLength ? projectedEndItemIndex : this.model.totalDataLength;\n\t}\n\n\t/**\n\t * The previous page number to navigate to, from the current page.\n\t */\n\tget previousPage(): number {\n\t\treturn this.currentPage <= 1 ? 1 : this.currentPage - 1;\n\t}\n\n\t/**\n\t * The next page number to navigate to, from the current page.\n\t */\n\tget nextPage(): number {\n\t\tconst lastPage = this.lastPage;\n\t\treturn this.currentPage >= lastPage ? lastPage : this.currentPage + 1;\n\t}\n\n\tget isExperimental() {\n\t\treturn this.experimental.isExperimental;\n\t}\n\n\titemsPerPageSelectId = `pagination-select-items-per-page-${Pagination.paginationCounter}`;\n\tcurrentPageSelectId = `pagination-select-current-page-${Pagination.paginationCounter}`;\n\n\titemsPerPageText = this.i18n.get(\"PAGINATION.ITEMS_PER_PAGE\");\n\toptionsListText = this.i18n.get(\"PAGINATION.OPEN_LIST_OF_OPTIONS\");\n\tbackwardText = this.i18n.get(\"PAGINATION.BACKWARD\");\n\tforwardText = this.i18n.get(\"PAGINATION.FORWARD\");\n\ttotalItemsText = this.i18n.get(\"PAGINATION.TOTAL_ITEMS\");\n\ttotalPagesText = this.i18n.get(\"PAGINATION.TOTAL_PAGES\");\n\tofLastPagesText = this.i18n.get(\"PAGINATION.OF_LAST_PAGES\");\n\n\tconstructor(protected i18n: I18n, protected experimental: ExperimentalService) {\n\t\tPagination.paginationCounter++;\n\t}\n\n\t/**\n\t * Generates a list of numbers. (Python function)\n\t * Used to display the correct pagination controls.\n\t * @returns {array}\n\t */\n\trange(stop: number, start = 0, step = 1) {\n\t\treturn range(stop, start, step);\n\t}\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
[{"__symbolic":"module","version":4,"metadata":{"Pagination":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":36,"character":1},"arguments":[{"selector":"ibm-pagination","template":"\n\t<div\n\t\tclass=\"bx--pagination\"\n\t\t[ngClass]=\"{\n\t\t\t'bx--skeleton': skeleton\n\t\t}\">\n\t\t<!-- left skeleton div -->\n\t\t<div *ngIf=\"skeleton\" class=\"bx--pagination__left\">\n\t\t\t<p class=\"bx--skeleton__text\" style=\"width: 70px\"></p>\n\t\t\t<p class=\"bx--skeleton__text\" style=\"width: 35px\"></p>\n\t\t\t<p class=\"bx--skeleton__text\" style=\"width: 105px\"></p>\n\t\t</div>\n\n\t\t<div *ngIf=\"!skeleton\" class=\"bx--pagination__left\">\n\t\t\t<label class=\"bx--pagination__text\" [for]=\"itemsPerPageSelectId\">\n\t\t\t\t{{itemsPerPageText | async}}\n\t\t\t</label>\n\t\t\t<div class=\"bx--form-item\">\n\t\t\t\t<div class=\"bx--select bx--select--inline\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'bx--select__item-count': isExperimental\n\t\t\t\t\t}\">\n\t\t\t\t\t<
|
|
1
|
+
[{"__symbolic":"module","version":4,"metadata":{"Pagination":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":36,"character":1},"arguments":[{"selector":"ibm-pagination","template":"\n\t<div\n\t\tclass=\"bx--pagination\"\n\t\t[ngClass]=\"{\n\t\t\t'bx--skeleton': skeleton\n\t\t}\">\n\t\t<!-- left skeleton div -->\n\t\t<div *ngIf=\"skeleton\" class=\"bx--pagination__left\">\n\t\t\t<p class=\"bx--skeleton__text\" style=\"width: 70px\"></p>\n\t\t\t<p class=\"bx--skeleton__text\" style=\"width: 35px\"></p>\n\t\t\t<p class=\"bx--skeleton__text\" style=\"width: 105px\"></p>\n\t\t</div>\n\n\t\t<div *ngIf=\"!skeleton\" class=\"bx--pagination__left\">\n\t\t\t<label class=\"bx--pagination__text\" [for]=\"itemsPerPageSelectId\">\n\t\t\t\t{{itemsPerPageText | async}}\n\t\t\t</label>\n\t\t\t<div class=\"bx--form-item\">\n\t\t\t\t<div class=\"bx--select bx--select--inline\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'bx--select__item-count': isExperimental\n\t\t\t\t\t}\">\n\t\t\t\t\t<select\n\t\t\t\t\t\t[id]=\"itemsPerPageSelectId\"\n\t\t\t\t\t\t[(ngModel)]=\"itemsPerPage\"\n\t\t\t\t\t\tclass=\"bx--select-input\">\n\t\t\t\t\t\t<option class=\"bx--select-option\" value=\"10\">10</option>\n\t\t\t\t\t\t<option class=\"bx--select-option\" value=\"20\">20</option>\n\t\t\t\t\t\t<option class=\"bx--select-option\" value=\"30\">30</option>\n\t\t\t\t\t\t<option class=\"bx--select-option\" value=\"40\">40</option>\n\t\t\t\t\t\t<option class=\"bx--select-option\" value=\"50\">50</option>\n\t\t\t\t\t</select>\n\t\t\t\t\t<ibm-icon-chevron-down16\n\t\t\t\t\t\tstyle=\"display: inherit;\"\n\t\t\t\t\t\tinnerClass=\"bx--select__arrow\"\n\t\t\t\t\t\t[ariaLabel]=\"optionsListText | async\">\n\t\t\t\t\t</ibm-icon-chevron-down16>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<span class=\"bx--pagination__text\">\n\t\t\t\t<span *ngIf=\"!isExperimental\">| </span>\n\t\t\t\t{{totalItemsText | i18nReplace:{start: startItemIndex, end: endItemIndex, total: model.totalDataLength } | async}}\n\t\t\t</span>\n\t\t</div>\n\n\t\t<!-- right skeleton div -->\n\t\t<div *ngIf=\"skeleton\" class=\"bx--pagination__right bx--pagination--inline\">\n\t\t\t<p class=\"bx--skeleton__text\" style=\"width: 70px\"></p>\n\t\t</div>\n\n\t\t<div *ngIf=\"!skeleton\" class=\"bx--pagination__right\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'bx--pagination--inline': !isExperimental\n\t\t\t}\">\n\n\t\t\t<div class=\"bx--form-item\">\n\t\t\t\t<div class=\"bx--select bx--select--inline\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'bx--select__page-number' : isExperimental\n\t\t\t\t}\">\n\t\t\t\t\t<label [for]=\"currentPageSelectId\" class=\"bx--label bx--visually-hidden\">{{itemsPerPageText | async}}</label>\n\t\t\t\t\t<select [id]=\"currentPageSelectId\" class=\"bx--select-input\" [(ngModel)]=\"currentPage\">\n\t\t\t\t\t\t<option *ngFor=\"let i of range(lastPage + 1, 1)\" class=\"bx--select-option\" [value]=\"i\">{{i}}</option>\n\t\t\t\t\t</select>\n\t\t\t\t\t<ibm-icon-chevron-down16\n\t\t\t\t\t\tstyle=\"display: inherit;\"\n\t\t\t\t\t\tinnerClass=\"bx--select__arrow\"\n\t\t\t\t\t\t[ariaLabel]=\"optionsListText | async\">\n\t\t\t\t\t</ibm-icon-chevron-down16>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<span class=\"bx--pagination__text\">\n\t\t\t\t{{ofLastPagesText | i18nReplace: {last: lastPage} | async}}\n\t\t\t</span>\n\t\t\t<button\n\t\t\t\tclass=\"bx--pagination__button bx--pagination__button--backward\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'bx--pagination__button--no-index': currentPage <= 1\n\t\t\t\t}\"\n\t\t\t\ttabindex=\"0\"\n\t\t\t\t[attr.aria-label]=\"backwardText | async\"\n\t\t\t\t(click)=\"selectPage.emit(previousPage)\"\n\t\t\t\t[disabled]=\"(currentPage <= 1 ? true : null)\">\n\t\t\t\t<ibm-icon-caret-left16></ibm-icon-caret-left16>\n\t\t\t</button>\n\n\t\t\t<button\n\t\t\t\tclass=\"bx--pagination__button bx--pagination__button--forward\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'bx--pagination__button--no-index': currentPage >= lastPage\n\t\t\t\t}\"\n\t\t\t\ttabindex=\"0\"\n\t\t\t\t[attr.aria-label]=\"forwardText | async\"\n\t\t\t\t(click)=\"selectPage.emit(nextPage)\"\n\t\t\t\t[disabled]=\"(currentPage >= lastPage ? true : null)\">\n\t\t\t\t<ibm-icon-caret-right16></ibm-icon-caret-right16>\n\t\t\t</button>\n\t\t</div>\n\t</div>\n\t"}]}],"members":{"skeleton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":147,"character":2}}]}],"model":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":153,"character":2}}]}],"translations":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":169,"character":2}}]}],"selectPage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":200,"character":2}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./../i18n/i18n.module","name":"I18n","line":267,"character":29},{"__symbolic":"reference","module":"./../experimental.module","name":"ExperimentalService","line":267,"character":59}]}],"range":[{"__symbolic":"method"}]},"statics":{"paginationCounter":0}}}}]
|
|
@@ -42,19 +42,19 @@ var RenderType_Pagination = i0.ɵcrt({ encapsulation: 2, styles: styles_Paginati
|
|
|
42
42
|
export { RenderType_Pagination as RenderType_Pagination };
|
|
43
43
|
function View_Pagination_1(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null, 3, "div", [["class", "bx--pagination__left"]], null, null, null, null, null)), (_l()(), i0.ɵeld(1, 0, null, null, 0, "p", [["class", "bx--skeleton__text"], ["style", "width: 70px"]], null, null, null, null, null)), (_l()(), i0.ɵeld(2, 0, null, null, 0, "p", [["class", "bx--skeleton__text"], ["style", "width: 35px"]], null, null, null, null, null)), (_l()(), i0.ɵeld(3, 0, null, null, 0, "p", [["class", "bx--skeleton__text"], ["style", "width: 105px"]], null, null, null, null, null))], null, null); }
|
|
44
44
|
function View_Pagination_3(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null, 1, "span", [], null, null, null, null, null)), (_l()(), i0.ɵted(-1, null, ["|\u00A0"]))], null, null); }
|
|
45
|
-
function View_Pagination_2(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null,
|
|
46
|
-
var pd_0 = (i0.ɵnov(_v,
|
|
45
|
+
function View_Pagination_2(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null, 43, "div", [["class", "bx--pagination__left"]], null, null, null, null, null)), (_l()(), i0.ɵeld(1, 0, null, null, 2, "label", [["class", "bx--pagination__text"]], [[8, "htmlFor", 0]], null, null, null, null)), (_l()(), i0.ɵted(2, null, [" ", " "])), i0.ɵpid(131072, i1.AsyncPipe, [i0.ChangeDetectorRef]), (_l()(), i0.ɵeld(4, 0, null, null, 32, "div", [["class", "bx--form-item"]], null, null, null, null, null)), (_l()(), i0.ɵeld(5, 0, null, null, 31, "div", [["class", "bx--select bx--select--inline"]], null, null, null, null, null)), i0.ɵdid(6, 278528, null, 0, i1.NgClass, [i0.IterableDiffers, i0.KeyValueDiffers, i0.ElementRef, i0.Renderer2], { klass: [0, "klass"], ngClass: [1, "ngClass"] }, null), i0.ɵpod(7, { "bx--select__item-count": 0 }), (_l()(), i0.ɵeld(8, 0, null, null, 25, "select", [["class", "bx--select-input"]], [[8, "id", 0], [2, "ng-untouched", null], [2, "ng-touched", null], [2, "ng-pristine", null], [2, "ng-dirty", null], [2, "ng-valid", null], [2, "ng-invalid", null], [2, "ng-pending", null]], [[null, "ngModelChange"], [null, "change"], [null, "blur"]], function (_v, en, $event) { var ad = true; var _co = _v.component; if (("change" === en)) {
|
|
46
|
+
var pd_0 = (i0.ɵnov(_v, 9).onChange($event.target.value) !== false);
|
|
47
47
|
ad = (pd_0 && ad);
|
|
48
48
|
} if (("blur" === en)) {
|
|
49
|
-
var pd_1 = (i0.ɵnov(_v,
|
|
49
|
+
var pd_1 = (i0.ɵnov(_v, 9).onTouched() !== false);
|
|
50
50
|
ad = (pd_1 && ad);
|
|
51
51
|
} if (("ngModelChange" === en)) {
|
|
52
52
|
var pd_2 = ((_co.itemsPerPage = $event) !== false);
|
|
53
53
|
ad = (pd_2 && ad);
|
|
54
|
-
} return ad; }, null, null)), i0.ɵdid(
|
|
54
|
+
} return ad; }, null, null)), i0.ɵdid(9, 16384, null, 0, i2.SelectControlValueAccessor, [i0.Renderer2, i0.ElementRef], null, null), i0.ɵprd(1024, null, i2.NG_VALUE_ACCESSOR, function (p0_0) { return [p0_0]; }, [i2.SelectControlValueAccessor]), i0.ɵdid(11, 671744, null, 0, i2.NgModel, [[8, null], [8, null], [8, null], [6, i2.NG_VALUE_ACCESSOR]], { model: [0, "model"] }, { update: "ngModelChange" }), i0.ɵprd(2048, null, i2.NgControl, null, [i2.NgModel]), i0.ɵdid(13, 16384, null, 0, i2.NgControlStatus, [[4, i2.NgControl]], null, null), (_l()(), i0.ɵeld(14, 0, null, null, 3, "option", [["class", "bx--select-option"], ["value", "10"]], null, null, null, null, null)), i0.ɵdid(15, 147456, null, 0, i2.NgSelectOption, [i0.ElementRef, i0.Renderer2, [2, i2.SelectControlValueAccessor]], { value: [0, "value"] }, null), i0.ɵdid(16, 147456, null, 0, i2.ɵangular_packages_forms_forms_r, [i0.ElementRef, i0.Renderer2, [8, null]], { value: [0, "value"] }, null), (_l()(), i0.ɵted(-1, null, ["10"])), (_l()(), i0.ɵeld(18, 0, null, null, 3, "option", [["class", "bx--select-option"], ["value", "20"]], null, null, null, null, null)), i0.ɵdid(19, 147456, null, 0, i2.NgSelectOption, [i0.ElementRef, i0.Renderer2, [2, i2.SelectControlValueAccessor]], { value: [0, "value"] }, null), i0.ɵdid(20, 147456, null, 0, i2.ɵangular_packages_forms_forms_r, [i0.ElementRef, i0.Renderer2, [8, null]], { value: [0, "value"] }, null), (_l()(), i0.ɵted(-1, null, ["20"])), (_l()(), i0.ɵeld(22, 0, null, null, 3, "option", [["class", "bx--select-option"], ["value", "30"]], null, null, null, null, null)), i0.ɵdid(23, 147456, null, 0, i2.NgSelectOption, [i0.ElementRef, i0.Renderer2, [2, i2.SelectControlValueAccessor]], { value: [0, "value"] }, null), i0.ɵdid(24, 147456, null, 0, i2.ɵangular_packages_forms_forms_r, [i0.ElementRef, i0.Renderer2, [8, null]], { value: [0, "value"] }, null), (_l()(), i0.ɵted(-1, null, ["30"])), (_l()(), i0.ɵeld(26, 0, null, null, 3, "option", [["class", "bx--select-option"], ["value", "40"]], null, null, null, null, null)), i0.ɵdid(27, 147456, null, 0, i2.NgSelectOption, [i0.ElementRef, i0.Renderer2, [2, i2.SelectControlValueAccessor]], { value: [0, "value"] }, null), i0.ɵdid(28, 147456, null, 0, i2.ɵangular_packages_forms_forms_r, [i0.ElementRef, i0.Renderer2, [8, null]], { value: [0, "value"] }, null), (_l()(), i0.ɵted(-1, null, ["40"])), (_l()(), i0.ɵeld(30, 0, null, null, 3, "option", [["class", "bx--select-option"], ["value", "50"]], null, null, null, null, null)), i0.ɵdid(31, 147456, null, 0, i2.NgSelectOption, [i0.ElementRef, i0.Renderer2, [2, i2.SelectControlValueAccessor]], { value: [0, "value"] }, null), i0.ɵdid(32, 147456, null, 0, i2.ɵangular_packages_forms_forms_r, [i0.ElementRef, i0.Renderer2, [8, null]], { value: [0, "value"] }, null), (_l()(), i0.ɵted(-1, null, ["50"])), (_l()(), i0.ɵeld(34, 0, null, null, 2, "ibm-icon-chevron-down16", [["innerClass", "bx--select__arrow"], ["style", "display: inherit;"]], null, null, null, i3.View_ChevronDown16_0, i3.RenderType_ChevronDown16)), i0.ɵdid(35, 4243456, null, 0, i4.ChevronDown16, [i0.ElementRef], { ariaLabel: [0, "ariaLabel"], innerClass: [1, "innerClass"] }, null), i0.ɵpid(131072, i1.AsyncPipe, [i0.ChangeDetectorRef]), (_l()(), i0.ɵeld(37, 0, null, null, 6, "span", [["class", "bx--pagination__text"]], null, null, null, null, null)), (_l()(), i0.ɵand(16777216, null, null, 1, null, View_Pagination_3)), i0.ɵdid(39, 16384, null, 0, i1.NgIf, [i0.ViewContainerRef, i0.TemplateRef], { ngIf: [0, "ngIf"] }, null), (_l()(), i0.ɵted(40, null, [" ", " "])), i0.ɵpod(41, { start: 0, end: 1, total: 2 }), i0.ɵppd(42, 2), i0.ɵpid(131072, i1.AsyncPipe, [i0.ChangeDetectorRef])], function (_ck, _v) { var _co = _v.component; var currVal_2 = "bx--select bx--select--inline"; var currVal_3 = _ck(_v, 7, 0, _co.isExperimental); _ck(_v, 6, 0, currVal_2, currVal_3); var currVal_12 = _co.itemsPerPage; _ck(_v, 11, 0, currVal_12); var currVal_13 = "10"; _ck(_v, 15, 0, currVal_13); var currVal_14 = "10"; _ck(_v, 16, 0, currVal_14); var currVal_15 = "20"; _ck(_v, 19, 0, currVal_15); var currVal_16 = "20"; _ck(_v, 20, 0, currVal_16); var currVal_17 = "30"; _ck(_v, 23, 0, currVal_17); var currVal_18 = "30"; _ck(_v, 24, 0, currVal_18); var currVal_19 = "40"; _ck(_v, 27, 0, currVal_19); var currVal_20 = "40"; _ck(_v, 28, 0, currVal_20); var currVal_21 = "50"; _ck(_v, 31, 0, currVal_21); var currVal_22 = "50"; _ck(_v, 32, 0, currVal_22); var currVal_23 = i0.ɵunv(_v, 35, 0, i0.ɵnov(_v, 36).transform(_co.optionsListText)); var currVal_24 = "bx--select__arrow"; _ck(_v, 35, 0, currVal_23, currVal_24); var currVal_25 = !_co.isExperimental; _ck(_v, 39, 0, currVal_25); }, function (_ck, _v) { var _co = _v.component; var currVal_0 = _co.itemsPerPageSelectId; _ck(_v, 1, 0, currVal_0); var currVal_1 = i0.ɵunv(_v, 2, 0, i0.ɵnov(_v, 3).transform(_co.itemsPerPageText)); _ck(_v, 2, 0, currVal_1); var currVal_4 = _co.itemsPerPageSelectId; var currVal_5 = i0.ɵnov(_v, 13).ngClassUntouched; var currVal_6 = i0.ɵnov(_v, 13).ngClassTouched; var currVal_7 = i0.ɵnov(_v, 13).ngClassPristine; var currVal_8 = i0.ɵnov(_v, 13).ngClassDirty; var currVal_9 = i0.ɵnov(_v, 13).ngClassValid; var currVal_10 = i0.ɵnov(_v, 13).ngClassInvalid; var currVal_11 = i0.ɵnov(_v, 13).ngClassPending; _ck(_v, 8, 0, currVal_4, currVal_5, currVal_6, currVal_7, currVal_8, currVal_9, currVal_10, currVal_11); var currVal_26 = i0.ɵunv(_v, 40, 0, i0.ɵnov(_v, 43).transform(i0.ɵunv(_v, 40, 0, _ck(_v, 42, 0, i0.ɵnov(_v.parent, 0), _co.totalItemsText, _ck(_v, 41, 0, _co.startItemIndex, _co.endItemIndex, _co.model.totalDataLength))))); _ck(_v, 40, 0, currVal_26); }); }
|
|
55
55
|
function View_Pagination_4(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null, 1, "div", [["class", "bx--pagination__right bx--pagination--inline"]], null, null, null, null, null)), (_l()(), i0.ɵeld(1, 0, null, null, 0, "p", [["class", "bx--skeleton__text"], ["style", "width: 70px"]], null, null, null, null, null))], null, null); }
|
|
56
56
|
function View_Pagination_6(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null, 3, "option", [["class", "bx--select-option"]], null, null, null, null, null)), i0.ɵdid(1, 147456, null, 0, i2.NgSelectOption, [i0.ElementRef, i0.Renderer2, [2, i2.SelectControlValueAccessor]], { value: [0, "value"] }, null), i0.ɵdid(2, 147456, null, 0, i2.ɵangular_packages_forms_forms_r, [i0.ElementRef, i0.Renderer2, [8, null]], { value: [0, "value"] }, null), (_l()(), i0.ɵted(3, null, ["", ""]))], function (_ck, _v) { var currVal_0 = _v.context.$implicit; _ck(_v, 1, 0, currVal_0); var currVal_1 = _v.context.$implicit; _ck(_v, 2, 0, currVal_1); }, function (_ck, _v) { var currVal_2 = _v.context.$implicit; _ck(_v, 3, 0, currVal_2); }); }
|
|
57
|
-
function View_Pagination_5(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null, 37, "div", [["class", "bx--pagination__right"]], null, null, null, null, null)), i0.ɵdid(1, 278528, null, 0, i1.NgClass, [i0.IterableDiffers, i0.KeyValueDiffers, i0.ElementRef, i0.Renderer2], { klass: [0, "klass"], ngClass: [1, "ngClass"] }, null), i0.ɵpod(2, { "bx--pagination--inline": 0 }), (_l()(), i0.ɵeld(3, 0, null, null, 17, "div", [["class", "bx--form-item"]], null, null, null, null, null)), (_l()(), i0.ɵeld(4, 0, null, null, 16, "div", [["class", "bx--select bx--select--inline"]], null, null, null, null, null)), i0.ɵdid(5, 278528, null, 0, i1.NgClass, [i0.IterableDiffers, i0.KeyValueDiffers, i0.ElementRef, i0.Renderer2], { klass: [0, "klass"], ngClass: [1, "ngClass"] }, null), i0.ɵpod(6, { "bx--select__page-number": 0 }), (_l()(), i0.ɵeld(7, 0, null, null, 2, "label", [["class", "bx--label bx--visually-hidden"]], [[8, "htmlFor", 0]], null, null, null, null)), (_l()(), i0.ɵted(8, null, ["", ""])), i0.ɵpid(131072, i1.AsyncPipe, [i0.ChangeDetectorRef]), (_l()(), i0.ɵeld(10, 0, null, null, 7, "select", [["
|
|
57
|
+
function View_Pagination_5(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null, 37, "div", [["class", "bx--pagination__right"]], null, null, null, null, null)), i0.ɵdid(1, 278528, null, 0, i1.NgClass, [i0.IterableDiffers, i0.KeyValueDiffers, i0.ElementRef, i0.Renderer2], { klass: [0, "klass"], ngClass: [1, "ngClass"] }, null), i0.ɵpod(2, { "bx--pagination--inline": 0 }), (_l()(), i0.ɵeld(3, 0, null, null, 17, "div", [["class", "bx--form-item"]], null, null, null, null, null)), (_l()(), i0.ɵeld(4, 0, null, null, 16, "div", [["class", "bx--select bx--select--inline"]], null, null, null, null, null)), i0.ɵdid(5, 278528, null, 0, i1.NgClass, [i0.IterableDiffers, i0.KeyValueDiffers, i0.ElementRef, i0.Renderer2], { klass: [0, "klass"], ngClass: [1, "ngClass"] }, null), i0.ɵpod(6, { "bx--select__page-number": 0 }), (_l()(), i0.ɵeld(7, 0, null, null, 2, "label", [["class", "bx--label bx--visually-hidden"]], [[8, "htmlFor", 0]], null, null, null, null)), (_l()(), i0.ɵted(8, null, ["", ""])), i0.ɵpid(131072, i1.AsyncPipe, [i0.ChangeDetectorRef]), (_l()(), i0.ɵeld(10, 0, null, null, 7, "select", [["class", "bx--select-input"]], [[8, "id", 0], [2, "ng-untouched", null], [2, "ng-touched", null], [2, "ng-pristine", null], [2, "ng-dirty", null], [2, "ng-valid", null], [2, "ng-invalid", null], [2, "ng-pending", null]], [[null, "ngModelChange"], [null, "change"], [null, "blur"]], function (_v, en, $event) { var ad = true; var _co = _v.component; if (("change" === en)) {
|
|
58
58
|
var pd_0 = (i0.ɵnov(_v, 11).onChange($event.target.value) !== false);
|
|
59
59
|
ad = (pd_0 && ad);
|
|
60
60
|
} if (("blur" === en)) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pagination.component.ngfactory.js","sourceRoot":"","sources":["../src/pagination/pagination.component.ngfactory.ts","../src/pagination/pagination.component.ts.Pagination.html"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;qDCOE,6GAAmD,KAClD,mIAAkD,KAClD,mIAAkD,KAClD,oIAAmD;
|
|
1
|
+
{"version":3,"file":"pagination.component.ngfactory.js","sourceRoot":"","sources":["../src/pagination/pagination.component.ngfactory.ts","../src/pagination/pagination.component.ts.Pagination.html"],"names":[],"mappings":"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","sourcesContent":["import * as i0 from '@angular/core';\ni0.ComponentFactory;\n","\n\t<div\n\t\tclass=\"bx--pagination\"\n\t\t[ngClass]=\"{\n\t\t\t'bx--skeleton': skeleton\n\t\t}\">\n\t\t<!-- left skeleton div -->\n\t\t<div *ngIf=\"skeleton\" class=\"bx--pagination__left\">\n\t\t\t<p class=\"bx--skeleton__text\" style=\"width: 70px\"></p>\n\t\t\t<p class=\"bx--skeleton__text\" style=\"width: 35px\"></p>\n\t\t\t<p class=\"bx--skeleton__text\" style=\"width: 105px\"></p>\n\t\t</div>\n\n\t\t<div *ngIf=\"!skeleton\" class=\"bx--pagination__left\">\n\t\t\t<label class=\"bx--pagination__text\" [for]=\"itemsPerPageSelectId\">\n\t\t\t\t{{itemsPerPageText | async}}\n\t\t\t</label>\n\t\t\t<div class=\"bx--form-item\">\n\t\t\t\t<div class=\"bx--select bx--select--inline\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'bx--select__item-count': isExperimental\n\t\t\t\t\t}\">\n\t\t\t\t\t<select\n\t\t\t\t\t\t[id]=\"itemsPerPageSelectId\"\n\t\t\t\t\t\t[(ngModel)]=\"itemsPerPage\"\n\t\t\t\t\t\tclass=\"bx--select-input\">\n\t\t\t\t\t\t<option class=\"bx--select-option\" value=\"10\">10</option>\n\t\t\t\t\t\t<option class=\"bx--select-option\" value=\"20\">20</option>\n\t\t\t\t\t\t<option class=\"bx--select-option\" value=\"30\">30</option>\n\t\t\t\t\t\t<option class=\"bx--select-option\" value=\"40\">40</option>\n\t\t\t\t\t\t<option class=\"bx--select-option\" value=\"50\">50</option>\n\t\t\t\t\t</select>\n\t\t\t\t\t<ibm-icon-chevron-down16\n\t\t\t\t\t\tstyle=\"display: inherit;\"\n\t\t\t\t\t\tinnerClass=\"bx--select__arrow\"\n\t\t\t\t\t\t[ariaLabel]=\"optionsListText | async\">\n\t\t\t\t\t</ibm-icon-chevron-down16>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<span class=\"bx--pagination__text\">\n\t\t\t\t<span *ngIf=\"!isExperimental\">| </span>\n\t\t\t\t{{totalItemsText | i18nReplace:{start: startItemIndex, end: endItemIndex, total: model.totalDataLength } | async}}\n\t\t\t</span>\n\t\t</div>\n\n\t\t<!-- right skeleton div -->\n\t\t<div *ngIf=\"skeleton\" class=\"bx--pagination__right bx--pagination--inline\">\n\t\t\t<p class=\"bx--skeleton__text\" style=\"width: 70px\"></p>\n\t\t</div>\n\n\t\t<div *ngIf=\"!skeleton\" class=\"bx--pagination__right\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'bx--pagination--inline': !isExperimental\n\t\t\t}\">\n\n\t\t\t<div class=\"bx--form-item\">\n\t\t\t\t<div class=\"bx--select bx--select--inline\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'bx--select__page-number' : isExperimental\n\t\t\t\t}\">\n\t\t\t\t\t<label [for]=\"currentPageSelectId\" class=\"bx--label bx--visually-hidden\">{{itemsPerPageText | async}}</label>\n\t\t\t\t\t<select [id]=\"currentPageSelectId\" class=\"bx--select-input\" [(ngModel)]=\"currentPage\">\n\t\t\t\t\t\t<option *ngFor=\"let i of range(lastPage + 1, 1)\" class=\"bx--select-option\" [value]=\"i\">{{i}}</option>\n\t\t\t\t\t</select>\n\t\t\t\t\t<ibm-icon-chevron-down16\n\t\t\t\t\t\tstyle=\"display: inherit;\"\n\t\t\t\t\t\tinnerClass=\"bx--select__arrow\"\n\t\t\t\t\t\t[ariaLabel]=\"optionsListText | async\">\n\t\t\t\t\t</ibm-icon-chevron-down16>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<span class=\"bx--pagination__text\">\n\t\t\t\t{{ofLastPagesText | i18nReplace: {last: lastPage} | async}}\n\t\t\t</span>\n\t\t\t<button\n\t\t\t\tclass=\"bx--pagination__button bx--pagination__button--backward\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'bx--pagination__button--no-index': currentPage <= 1\n\t\t\t\t}\"\n\t\t\t\ttabindex=\"0\"\n\t\t\t\t[attr.aria-label]=\"backwardText | async\"\n\t\t\t\t(click)=\"selectPage.emit(previousPage)\"\n\t\t\t\t[disabled]=\"(currentPage <= 1 ? true : null)\">\n\t\t\t\t<ibm-icon-caret-left16></ibm-icon-caret-left16>\n\t\t\t</button>\n\n\t\t\t<button\n\t\t\t\tclass=\"bx--pagination__button bx--pagination__button--forward\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'bx--pagination__button--no-index': currentPage >= lastPage\n\t\t\t\t}\"\n\t\t\t\ttabindex=\"0\"\n\t\t\t\t[attr.aria-label]=\"forwardText | async\"\n\t\t\t\t(click)=\"selectPage.emit(nextPage)\"\n\t\t\t\t[disabled]=\"(currentPage >= lastPage ? true : null)\">\n\t\t\t\t<ibm-icon-caret-right16></ibm-icon-caret-right16>\n\t\t\t</button>\n\t\t</div>\n\t</div>\n\t"]}
|
|
@@ -45,6 +45,8 @@ export declare class TabHeaders implements AfterContentInit {
|
|
|
45
45
|
* Set to `true` to put tabs in a loading state.
|
|
46
46
|
*/
|
|
47
47
|
skeleton: boolean;
|
|
48
|
+
contentBefore: any;
|
|
49
|
+
contentAfter: any;
|
|
48
50
|
/**
|
|
49
51
|
* Gets the Unordered List element that holds the `Tab` headings from the view DOM.
|
|
50
52
|
*/
|
|
@@ -168,7 +168,7 @@ var TabHeaders = /** @class */ (function () {
|
|
|
168
168
|
TabHeaders.decorators = [
|
|
169
169
|
{ type: Component, args: [{
|
|
170
170
|
selector: "ibm-tab-headers",
|
|
171
|
-
template: "\n\t\t<nav\n\t\t\tclass=\"bx--tabs\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'bx--skeleton': skeleton\n\t\t\t}\"\n\t\t\trole=\"navigation\">\n\t\t\t<div class=\"bx--tabs-trigger\" tabindex=\"0\" (click)=\"showTabList()\">\n\t\t\t\t<a href=\"javascript:void(0)\" class=\"bx--tabs-trigger-text\" tabindex=\"-1\">\n\t\t\t\t\t<ng-container *ngIf=\"!getSelectedTab().headingIsTemplate\">\n\t\t\t\t\t\t{{ getSelectedTab().heading }}\n\t\t\t\t\t</ng-container>\n\t\t\t\t\t<ng-template\n\t\t\t\t\t\t*ngIf=\"getSelectedTab().headingIsTemplate\"\n\t\t\t\t\t\t[ngTemplateOutlet]=\"getSelectedTab().heading\">\n\t\t\t\t\t</ng-template>\n\t\t\t\t</a>\n\t\t\t\t<svg width=\"10\" height=\"5\" viewBox=\"0 0 10 5\">\n\t\t\t\t\t<path d=\"M0 0l5 4.998L10 0z\" fill-rule=\"evenodd\"></path>\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t\t<ul\n\t\t\t\t#tabList\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'bx--tabs__nav--hidden': !tabListVisible\n\t\t\t\t}\"\n\t\t\t\tclass=\"bx--tabs__nav\"\n\t\t\t\trole=\"tablist\">\n\t\t\t\t<li\n\t\t\t\t\t*ngFor=\"let tab of tabs; let i = index;\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'bx--tabs__nav-item--selected': tab.active\n\t\t\t\t\t}\"\n\t\t\t\t\tclass=\"bx--tabs__nav-item\"\n\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\t(click)=\"selectTab(tabref, tab, i)\">\n\t\t\t\t\t<a\n\t\t\t\t\t\t#tabItem\n\t\t\t\t\t\t[attr.aria-selected]=\"tab.active\"\n\t\t\t\t\t\t[attr.tabindex]=\"(tab.active?0:-1)\"\n\t\t\t\t\t\t[attr.aria-controls]=\"tab.id\"\n\t\t\t\t\t\t(focus)=\"onTabFocus(tabref, i)\"\n\t\t\t\t\t\tdraggable=\"false\"\n\t\t\t\t\t\tid=\"{{tab.id}}-header\"\n\t\t\t\t\t\tclass=\"bx--tabs__nav-link\"\n\t\t\t\t\t\thref=\"javascript:void(0)\"\n\t\t\t\t\t\trole=\"tab\">\n\t\t\t\t\t\t<ng-container *ngIf=\"!tab.headingIsTemplate\">\n\t\t\t\t\t\t\t{{ tab.heading }}\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t\t<ng-template\n\t\t\t\t\t\t\t*ngIf=\"tab.headingIsTemplate\"\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"tab.heading\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{$implicit: tab.context}\">\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</a>\n\t\t\t\t</li>\n\t\t\t
|
|
171
|
+
template: "\n\t\t<nav\n\t\t\tclass=\"bx--tabs\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'bx--skeleton': skeleton\n\t\t\t}\"\n\t\t\trole=\"navigation\">\n\t\t\t<div class=\"bx--tabs-trigger\" tabindex=\"0\" (click)=\"showTabList()\">\n\t\t\t\t<a href=\"javascript:void(0)\" class=\"bx--tabs-trigger-text\" tabindex=\"-1\">\n\t\t\t\t\t<ng-container *ngIf=\"!getSelectedTab().headingIsTemplate\">\n\t\t\t\t\t\t{{ getSelectedTab().heading }}\n\t\t\t\t\t</ng-container>\n\t\t\t\t\t<ng-template\n\t\t\t\t\t\t*ngIf=\"getSelectedTab().headingIsTemplate\"\n\t\t\t\t\t\t[ngTemplateOutlet]=\"getSelectedTab().heading\">\n\t\t\t\t\t</ng-template>\n\t\t\t\t</a>\n\t\t\t\t<svg width=\"10\" height=\"5\" viewBox=\"0 0 10 5\">\n\t\t\t\t\t<path d=\"M0 0l5 4.998L10 0z\" fill-rule=\"evenodd\"></path>\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t\t<ul\n\t\t\t\t#tabList\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'bx--tabs__nav--hidden': !tabListVisible\n\t\t\t\t}\"\n\t\t\t\tclass=\"bx--tabs__nav\"\n\t\t\t\trole=\"tablist\">\n\t\t\t\t<li role=\"presentation\">\n\t\t\t\t\t<ng-container *ngIf=\"contentBefore\" [ngTemplateOutlet]=\"contentBefore\"></ng-container>\n\t\t\t\t</li>\n\t\t\t\t<li\n\t\t\t\t\t*ngFor=\"let tab of tabs; let i = index;\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'bx--tabs__nav-item--selected': tab.active\n\t\t\t\t\t}\"\n\t\t\t\t\tclass=\"bx--tabs__nav-item\"\n\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\t(click)=\"selectTab(tabref, tab, i)\">\n\t\t\t\t\t<a\n\t\t\t\t\t\t#tabItem\n\t\t\t\t\t\t[attr.aria-selected]=\"tab.active\"\n\t\t\t\t\t\t[attr.tabindex]=\"(tab.active?0:-1)\"\n\t\t\t\t\t\t[attr.aria-controls]=\"tab.id\"\n\t\t\t\t\t\t(focus)=\"onTabFocus(tabref, i)\"\n\t\t\t\t\t\tdraggable=\"false\"\n\t\t\t\t\t\tid=\"{{tab.id}}-header\"\n\t\t\t\t\t\tclass=\"bx--tabs__nav-link\"\n\t\t\t\t\t\thref=\"javascript:void(0)\"\n\t\t\t\t\t\trole=\"tab\">\n\t\t\t\t\t\t<ng-container *ngIf=\"!tab.headingIsTemplate\">\n\t\t\t\t\t\t\t{{ tab.heading }}\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t\t<ng-template\n\t\t\t\t\t\t\t*ngIf=\"tab.headingIsTemplate\"\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"tab.heading\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{$implicit: tab.context}\">\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</a>\n\t\t\t\t</li>\n\t\t\t\t<li role=\"presentation\">\n\t\t\t\t\t<ng-container *ngIf=\"contentAfter\" [ngTemplateOutlet]=\"contentAfter\"></ng-container>\n\t\t\t\t</li>\n\t\t\t</ul>\n\t\t</nav>\n\t "
|
|
172
172
|
},] },
|
|
173
173
|
];
|
|
174
174
|
TabHeaders.propDecorators = {
|
|
@@ -176,6 +176,8 @@ var TabHeaders = /** @class */ (function () {
|
|
|
176
176
|
cacheActive: [{ type: Input }],
|
|
177
177
|
followFocus: [{ type: Input }],
|
|
178
178
|
skeleton: [{ type: Input }],
|
|
179
|
+
contentBefore: [{ type: Input }],
|
|
180
|
+
contentAfter: [{ type: Input }],
|
|
179
181
|
headerContainer: [{ type: ViewChild, args: ["tabList",] }],
|
|
180
182
|
tabQuery: [{ type: ContentChildren, args: [Tab,] }],
|
|
181
183
|
allTabHeaders: [{ type: ViewChildren, args: ["tabItem",] }],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tab-headers.component.js","sourceRoot":"","sources":["../src/tabs/tab-headers.component.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n\tComponent,\n\tQueryList,\n\tInput,\n\tHostListener,\n\tViewChild,\n\tContentChildren,\n\tAfterContentInit,\n\tViewChildren,\n\tElementRef\n} from \"@angular/core\";\n\nimport { Tab } from \"./tab.component\";\n\n\n/**\n * The `TabHeaders` component contains the `Tab` items and controls scroll functionality\n * if content has overflow.\n * @export\n * @class TabHeaders\n * @implements {AfterViewInit}\n */\n@Component({\n\tselector: \"ibm-tab-headers\",\n\ttemplate: `\n\t\t<nav\n\t\t\tclass=\"bx--tabs\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'bx--skeleton': skeleton\n\t\t\t}\"\n\t\t\trole=\"navigation\">\n\t\t\t<div class=\"bx--tabs-trigger\" tabindex=\"0\" (click)=\"showTabList()\">\n\t\t\t\t<a href=\"javascript:void(0)\" class=\"bx--tabs-trigger-text\" tabindex=\"-1\">\n\t\t\t\t\t<ng-container *ngIf=\"!getSelectedTab().headingIsTemplate\">\n\t\t\t\t\t\t{{ getSelectedTab().heading }}\n\t\t\t\t\t</ng-container>\n\t\t\t\t\t<ng-template\n\t\t\t\t\t\t*ngIf=\"getSelectedTab().headingIsTemplate\"\n\t\t\t\t\t\t[ngTemplateOutlet]=\"getSelectedTab().heading\">\n\t\t\t\t\t</ng-template>\n\t\t\t\t</a>\n\t\t\t\t<svg width=\"10\" height=\"5\" viewBox=\"0 0 10 5\">\n\t\t\t\t\t<path d=\"M0 0l5 4.998L10 0z\" fill-rule=\"evenodd\"></path>\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t\t<ul\n\t\t\t\t#tabList\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'bx--tabs__nav--hidden': !tabListVisible\n\t\t\t\t}\"\n\t\t\t\tclass=\"bx--tabs__nav\"\n\t\t\t\trole=\"tablist\">\n\t\t\t\t<li\n\t\t\t\t\t*ngFor=\"let tab of tabs; let i = index;\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'bx--tabs__nav-item--selected': tab.active\n\t\t\t\t\t}\"\n\t\t\t\t\tclass=\"bx--tabs__nav-item\"\n\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\t(click)=\"selectTab(tabref, tab, i)\">\n\t\t\t\t\t<a\n\t\t\t\t\t\t#tabItem\n\t\t\t\t\t\t[attr.aria-selected]=\"tab.active\"\n\t\t\t\t\t\t[attr.tabindex]=\"(tab.active?0:-1)\"\n\t\t\t\t\t\t[attr.aria-controls]=\"tab.id\"\n\t\t\t\t\t\t(focus)=\"onTabFocus(tabref, i)\"\n\t\t\t\t\t\tdraggable=\"false\"\n\t\t\t\t\t\tid=\"{{tab.id}}-header\"\n\t\t\t\t\t\tclass=\"bx--tabs__nav-link\"\n\t\t\t\t\t\thref=\"javascript:void(0)\"\n\t\t\t\t\t\trole=\"tab\">\n\t\t\t\t\t\t<ng-container *ngIf=\"!tab.headingIsTemplate\">\n\t\t\t\t\t\t\t{{ tab.heading }}\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t\t<ng-template\n\t\t\t\t\t\t\t*ngIf=\"tab.headingIsTemplate\"\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"tab.heading\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{$implicit: tab.context}\">\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</a>\n\t\t\t\t</li>\n\t\t\t</ul>\n\t\t</nav>\n\t\t<div>\n\t\t\t<ng-content select=\"ibm-tab\"></ng-content>\n\t\t</div>\n\t `\n})\n\nexport class TabHeaders implements AfterContentInit {\n\t/**\n\t * List of `Tab` components.\n\t */\n\t// disable the next line because we need to rename the input\n\t// tslint:disable-next-line\n\t@Input(\"tabs\") tabInput: QueryList<Tab>;\n\t/**\n\t * Set to 'true' to have `Tab` items cached and not reloaded on tab switching.\n\t * Duplicate from `n-tabs` to support standalone headers\n\t */\n\t@Input() cacheActive = false;\n\t/**\n\t * Set to 'true' to have tabs automatically activated and have their content displayed when they receive focus.\n\t */\n\t@Input() followFocus: boolean;\n\t/**\n\t * Set to `true` to put tabs in a loading state.\n\t */\n\t@Input() skeleton = false;\n\n\t/**\n\t * Gets the Unordered List element that holds the `Tab` headings from the view DOM.\n\t */\n\t@ViewChild(\"tabList\") headerContainer;\n\t/**\n\t * ContentChild of all the n-tabs\n\t */\n\t@ContentChildren(Tab) tabQuery: QueryList<Tab>;\n\t/**\n\t * set to tabQuery if tabInput is empty\n\t */\n\tpublic tabs: QueryList<Tab>;\n\t/**\n\t * The index of the first visible tab.\n\t */\n\tpublic firstVisibleTab = 0;\n\t/**\n\t * The DOM element containing the `Tab` headings displayed.\n\t */\n\t@ViewChildren(\"tabItem\") allTabHeaders: QueryList<ElementRef>;\n\t/**\n\t * Controls the manual focusing done by tabbing through headings.\n\t */\n\tpublic currentSelectedTab: number;\n\tpublic tabListVisible = false;\n\n\t// keyboard accessibility\n\t/**\n\t * Controls the keydown events used for tabbing through the headings.\n\t */\n\t@HostListener(\"keydown\", [\"$event\"])\n\tkeyboardInput(event) {\n\t\tlet tabsArray = Array.from<any>(this.tabs);\n\n\t\t// \"Right\" is an ie11 specific value\n\t\tif (event.key === \"Right\" || event.key === \"ArrowRight\") {\n\t\t\tif (this.currentSelectedTab < this.allTabHeaders.length - 1) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (this.followFocus) {\n\t\t\t\t\tthis.selectTab(event.target, tabsArray[this.currentSelectedTab + 1], this.currentSelectedTab);\n\t\t\t\t}\n\t\t\t\tthis.allTabHeaders.toArray()[this.currentSelectedTab + 1].nativeElement.focus();\n\t\t\t} else {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (this.followFocus) {\n\t\t\t\t\tthis.selectTab(event.target, tabsArray[0], 0);\n\t\t\t\t}\n\t\t\t\tthis.allTabHeaders.first.nativeElement.focus();\n\t\t\t}\n\t\t}\n\n\t\t// \"Left\" is an ie11 specific value\n\t\tif (event.key === \"Left\" || event.key === \"ArrowLeft\") {\n\t\t\tif (this.currentSelectedTab > 0) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (this.followFocus) {\n\t\t\t\t\tthis.selectTab(event.target, tabsArray[this.currentSelectedTab - 1], this.currentSelectedTab);\n\t\t\t\t}\n\t\t\t\tthis.allTabHeaders.toArray()[this.currentSelectedTab - 1].nativeElement.focus();\n\t\t\t} else {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (this.followFocus) {\n\t\t\t\t\tthis.selectTab(event.target, tabsArray[this.allTabHeaders.length - 1], this.allTabHeaders.length);\n\t\t\t\t}\n\t\t\t\tthis.allTabHeaders.toArray()[this.allTabHeaders.length - 1].nativeElement.focus();\n\t\t\t}\n\t\t}\n\n\t\tif (event.key === \"Home\") {\n\t\t\tevent.preventDefault();\n\t\t\tif (this.followFocus) {\n\t\t\t\tthis.selectTab(event.target, tabsArray[0], 0);\n\t\t\t}\n\t\t\tthis.allTabHeaders.toArray()[0].nativeElement.focus();\n\t\t}\n\n\t\tif (event.key === \"End\") {\n\t\t\tevent.preventDefault();\n\t\t\tif (this.followFocus) {\n\t\t\t\tthis.selectTab(event.target, tabsArray[this.allTabHeaders.length - 1], this.allTabHeaders.length);\n\t\t\t}\n\t\t\tthis.allTabHeaders.toArray()[this.allTabHeaders.length - 1].nativeElement.focus();\n\t\t}\n\n\t\t// `\"Spacebar\"` is IE11 specific value\n\t\tif ((event.key === \" \" || event.key === \"Spacebar\") && !this.followFocus) {\n\t\t\tthis.selectTab(event.target, tabsArray[this.currentSelectedTab], this.currentSelectedTab);\n\t\t}\n\t}\n\n\tngAfterContentInit() {\n\t\tif (!this.tabInput) {\n\t\t\tthis.tabs = this.tabQuery;\n\t\t} else {\n\t\t\tthis.tabs = this.tabInput;\n\t\t}\n\n\t\tthis.tabs.forEach(tab => tab.cacheActive = this.cacheActive);\n\t\tthis.tabs.changes.subscribe(() => {\n\t\t\tthis.setFirstTab();\n\t\t});\n\t\tthis.setFirstTab();\n\t}\n\n\t/**\n\t * Controls manually focusing tabs.\n\t */\n\tpublic onTabFocus(ref: HTMLElement, index: number) {\n\t\tthis.currentSelectedTab = index;\n\t\t// reset scroll left because we're already handling it\n\t\tthis.headerContainer.nativeElement.parentElement.scrollLeft = 0;\n\t}\n\n\tpublic getSelectedTab(): any {\n\t\tconst selected = this.tabs.find(tab => tab.active);\n\t\tif (selected) {\n\t\t\treturn selected;\n\t\t}\n\t\treturn {headingIsTemplate: false, heading: \"\"};\n\t}\n\n\tpublic showTabList() {\n\t\tthis.tabListVisible = true;\n\t}\n\n\t/**\n\t * Selects `Tab` 'tab' and moves it into view on the view DOM if it is not already.\n\t */\n\tpublic selectTab(ref: HTMLElement, tab: Tab, tabIndex: number) {\n\t\tif (tab.disabled) {\n\t\t\treturn;\n\t\t}\n\n\t\t// hide the tablist on mobile\n\t\tthis.tabListVisible = false;\n\t\tthis.currentSelectedTab = tabIndex;\n\t\tthis.tabs.forEach(_tab => _tab.active = false);\n\t\ttab.active = true;\n\t\ttab.doSelect();\n\t}\n\n\t/**\n\t * Determines which `Tab` is initially selected.\n\t */\n\tprotected setFirstTab() {\n\t\tsetTimeout(() => {\n\t\t\tlet firstTab = this.tabs.find(tab => tab.active);\n\t\t\tif (!firstTab && this.tabs.first) {\n\t\t\t\tfirstTab = this.tabs.first;\n\t\t\t\tfirstTab.active = true;\n\t\t\t}\n\t\t\tif (firstTab) {\n\t\t\t\tfirstTab.doSelect();\n\t\t\t}\n\t\t});\n\t}\n}\n"]}
|
|
1
|
+
{"version":3,"file":"tab-headers.component.js","sourceRoot":"","sources":["../src/tabs/tab-headers.component.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,SAAS,EACT,SAAS,EACT,KAAK,EACL,YAAY,EACZ,SAAS,EACT,eAAe,EAEf,YAAY,EAEZ,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,GAAG,EAAE,MAAM,iBAAiB,CAAC;AAGtC;;;;;;GAMG;AACH;IAAA;QA6EC;;;WAGG;QACM,gBAAW,GAAG,KAAK,CAAC;QAK7B;;WAEG;QACM,aAAQ,GAAG,KAAK,CAAC;QAiB1B;;WAEG;QACI,oBAAe,GAAG,CAAC,CAAC;QASpB,mBAAc,GAAG,KAAK,CAAC;IAoI/B,CAAC;IAlIA,yBAAyB;IACzB;;OAEG;IAEH,kCAAa,GADb,UACc,KAAK;QAClB,IAAI,SAAS,GAAG,KAAK,CAAC,IAAI,CAAM,IAAI,CAAC,IAAI,CAAC,CAAC;QAE3C,oCAAoC;QACpC,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,YAAY,EAAE;YACxD,IAAI,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,EAAE;gBAC5D,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,IAAI,CAAC,WAAW,EAAE;oBACrB,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,EAAE,SAAS,CAAC,IAAI,CAAC,kBAAkB,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;iBAC9F;gBACD,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,kBAAkB,GAAG,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC;aAChF;iBAAM;gBACN,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,IAAI,CAAC,WAAW,EAAE;oBACrB,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;iBAC9C;gBACD,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC;aAC/C;SACD;QAED,mCAAmC;QACnC,IAAI,KAAK,CAAC,GAAG,KAAK,MAAM,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,EAAE;YACtD,IAAI,IAAI,CAAC,kBAAkB,GAAG,CAAC,EAAE;gBAChC,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,IAAI,CAAC,WAAW,EAAE;oBACrB,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,EAAE,SAAS,CAAC,IAAI,CAAC,kBAAkB,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;iBAC9F;gBACD,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,kBAAkB,GAAG,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC;aAChF;iBAAM;gBACN,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,IAAI,CAAC,WAAW,EAAE;oBACrB,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,EAAE,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;iBAClG;gBACD,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC;aAClF;SACD;QAED,IAAI,KAAK,CAAC,GAAG,KAAK,MAAM,EAAE;YACzB,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,IAAI,CAAC,WAAW,EAAE;gBACrB,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;aAC9C;YACD,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC;SACtD;QAED,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE;YACxB,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,IAAI,CAAC,WAAW,EAAE;gBACrB,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,EAAE,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;aAClG;YACD,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC;SAClF;QAED,sCAAsC;QACtC,IAAI,CAAC,KAAK,CAAC,GAAG,KAAK,GAAG,IAAI,KAAK,CAAC,GAAG,KAAK,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YACzE,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,EAAE,SAAS,CAAC,IAAI,CAAC,kBAAkB,CAAC,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;SAC1F;IACF,CAAC;IAED,uCAAkB,GAAlB;QAAA,iBAYC;QAXA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YACnB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,QAAQ,CAAC;SAC1B;aAAM;YACN,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,QAAQ,CAAC;SAC1B;QAED,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,UAAA,GAAG,IAAI,OAAA,GAAG,CAAC,WAAW,GAAG,KAAI,CAAC,WAAW,EAAlC,CAAkC,CAAC,CAAC;QAC7D,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC;YAC3B,KAAI,CAAC,WAAW,EAAE,CAAC;QACpB,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,WAAW,EAAE,CAAC;IACpB,CAAC;IAED;;OAEG;IACI,+BAAU,GAAjB,UAAkB,GAAgB,EAAE,KAAa;QAChD,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC;QAChC,sDAAsD;QACtD,IAAI,CAAC,eAAe,CAAC,aAAa,CAAC,aAAa,CAAC,UAAU,GAAG,CAAC,CAAC;IACjE,CAAC;IAEM,mCAAc,GAArB;QACC,IAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,UAAA,GAAG,IAAI,OAAA,GAAG,CAAC,MAAM,EAAV,CAAU,CAAC,CAAC;QACnD,IAAI,QAAQ,EAAE;YACb,OAAO,QAAQ,CAAC;SAChB;QACD,OAAO,EAAC,iBAAiB,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAC,CAAC;IAChD,CAAC;IAEM,gCAAW,GAAlB;QACC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;IAC5B,CAAC;IAED;;OAEG;IACI,8BAAS,GAAhB,UAAiB,GAAgB,EAAE,GAAQ,EAAE,QAAgB;QAC5D,IAAI,GAAG,CAAC,QAAQ,EAAE;YACjB,OAAO;SACP;QAED,6BAA6B;QAC7B,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;QAC5B,IAAI,CAAC,kBAAkB,GAAG,QAAQ,CAAC;QACnC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,UAAA,IAAI,IAAI,OAAA,IAAI,CAAC,MAAM,GAAG,KAAK,EAAnB,CAAmB,CAAC,CAAC;QAC/C,GAAG,CAAC,MAAM,GAAG,IAAI,CAAC;QAClB,GAAG,CAAC,QAAQ,EAAE,CAAC;IAChB,CAAC;IAED;;OAEG;IACO,gCAAW,GAArB;QAAA,iBAWC;QAVA,UAAU,CAAC;YACV,IAAI,QAAQ,GAAG,KAAI,CAAC,IAAI,CAAC,IAAI,CAAC,UAAA,GAAG,IAAI,OAAA,GAAG,CAAC,MAAM,EAAV,CAAU,CAAC,CAAC;YACjD,IAAI,CAAC,QAAQ,IAAI,KAAI,CAAC,IAAI,CAAC,KAAK,EAAE;gBACjC,QAAQ,GAAG,KAAI,CAAC,IAAI,CAAC,KAAK,CAAC;gBAC3B,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC;aACvB;YACD,IAAI,QAAQ,EAAE;gBACb,QAAQ,CAAC,QAAQ,EAAE,CAAC;aACpB;QACF,CAAC,CAAC,CAAC;IACJ,CAAC;;gBAzPD,SAAS,SAAC;oBACV,QAAQ,EAAE,iBAAiB;oBAC3B,QAAQ,EAAE,u0EAiER;iBACF;;;2BAQC,KAAK,SAAC,MAAM;8BAKZ,KAAK;8BAIL,KAAK;2BAIL,KAAK;gCAEL,KAAK;+BACL,KAAK;kCAKL,SAAS,SAAC,SAAS;2BAInB,eAAe,SAAC,GAAG;gCAYnB,YAAY,SAAC,SAAS;gCAWtB,YAAY,SAAC,SAAS,EAAE,CAAC,QAAQ,CAAC;;IA8HpC,iBAAC;CAAA,AA1PD,IA0PC;SApLY,UAAU","sourcesContent":["import {\n\tComponent,\n\tQueryList,\n\tInput,\n\tHostListener,\n\tViewChild,\n\tContentChildren,\n\tAfterContentInit,\n\tViewChildren,\n\tElementRef\n} from \"@angular/core\";\n\nimport { Tab } from \"./tab.component\";\n\n\n/**\n * The `TabHeaders` component contains the `Tab` items and controls scroll functionality\n * if content has overflow.\n * @export\n * @class TabHeaders\n * @implements {AfterViewInit}\n */\n@Component({\n\tselector: \"ibm-tab-headers\",\n\ttemplate: `\n\t\t<nav\n\t\t\tclass=\"bx--tabs\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'bx--skeleton': skeleton\n\t\t\t}\"\n\t\t\trole=\"navigation\">\n\t\t\t<div class=\"bx--tabs-trigger\" tabindex=\"0\" (click)=\"showTabList()\">\n\t\t\t\t<a href=\"javascript:void(0)\" class=\"bx--tabs-trigger-text\" tabindex=\"-1\">\n\t\t\t\t\t<ng-container *ngIf=\"!getSelectedTab().headingIsTemplate\">\n\t\t\t\t\t\t{{ getSelectedTab().heading }}\n\t\t\t\t\t</ng-container>\n\t\t\t\t\t<ng-template\n\t\t\t\t\t\t*ngIf=\"getSelectedTab().headingIsTemplate\"\n\t\t\t\t\t\t[ngTemplateOutlet]=\"getSelectedTab().heading\">\n\t\t\t\t\t</ng-template>\n\t\t\t\t</a>\n\t\t\t\t<svg width=\"10\" height=\"5\" viewBox=\"0 0 10 5\">\n\t\t\t\t\t<path d=\"M0 0l5 4.998L10 0z\" fill-rule=\"evenodd\"></path>\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t\t<ul\n\t\t\t\t#tabList\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'bx--tabs__nav--hidden': !tabListVisible\n\t\t\t\t}\"\n\t\t\t\tclass=\"bx--tabs__nav\"\n\t\t\t\trole=\"tablist\">\n\t\t\t\t<li role=\"presentation\">\n\t\t\t\t\t<ng-container *ngIf=\"contentBefore\" [ngTemplateOutlet]=\"contentBefore\"></ng-container>\n\t\t\t\t</li>\n\t\t\t\t<li\n\t\t\t\t\t*ngFor=\"let tab of tabs; let i = index;\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'bx--tabs__nav-item--selected': tab.active\n\t\t\t\t\t}\"\n\t\t\t\t\tclass=\"bx--tabs__nav-item\"\n\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\t(click)=\"selectTab(tabref, tab, i)\">\n\t\t\t\t\t<a\n\t\t\t\t\t\t#tabItem\n\t\t\t\t\t\t[attr.aria-selected]=\"tab.active\"\n\t\t\t\t\t\t[attr.tabindex]=\"(tab.active?0:-1)\"\n\t\t\t\t\t\t[attr.aria-controls]=\"tab.id\"\n\t\t\t\t\t\t(focus)=\"onTabFocus(tabref, i)\"\n\t\t\t\t\t\tdraggable=\"false\"\n\t\t\t\t\t\tid=\"{{tab.id}}-header\"\n\t\t\t\t\t\tclass=\"bx--tabs__nav-link\"\n\t\t\t\t\t\thref=\"javascript:void(0)\"\n\t\t\t\t\t\trole=\"tab\">\n\t\t\t\t\t\t<ng-container *ngIf=\"!tab.headingIsTemplate\">\n\t\t\t\t\t\t\t{{ tab.heading }}\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t\t<ng-template\n\t\t\t\t\t\t\t*ngIf=\"tab.headingIsTemplate\"\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"tab.heading\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{$implicit: tab.context}\">\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</a>\n\t\t\t\t</li>\n\t\t\t\t<li role=\"presentation\">\n\t\t\t\t\t<ng-container *ngIf=\"contentAfter\" [ngTemplateOutlet]=\"contentAfter\"></ng-container>\n\t\t\t\t</li>\n\t\t\t</ul>\n\t\t</nav>\n\t `\n})\n\nexport class TabHeaders implements AfterContentInit {\n\t/**\n\t * List of `Tab` components.\n\t */\n\t// disable the next line because we need to rename the input\n\t// tslint:disable-next-line\n\t@Input(\"tabs\") tabInput: QueryList<Tab>;\n\t/**\n\t * Set to 'true' to have `Tab` items cached and not reloaded on tab switching.\n\t * Duplicate from `n-tabs` to support standalone headers\n\t */\n\t@Input() cacheActive = false;\n\t/**\n\t * Set to 'true' to have tabs automatically activated and have their content displayed when they receive focus.\n\t */\n\t@Input() followFocus: boolean;\n\t/**\n\t * Set to `true` to put tabs in a loading state.\n\t */\n\t@Input() skeleton = false;\n\n\t@Input() contentBefore;\n\t@Input() contentAfter;\n\n\t/**\n\t * Gets the Unordered List element that holds the `Tab` headings from the view DOM.\n\t */\n\t@ViewChild(\"tabList\") headerContainer;\n\t/**\n\t * ContentChild of all the n-tabs\n\t */\n\t@ContentChildren(Tab) tabQuery: QueryList<Tab>;\n\t/**\n\t * set to tabQuery if tabInput is empty\n\t */\n\tpublic tabs: QueryList<Tab>;\n\t/**\n\t * The index of the first visible tab.\n\t */\n\tpublic firstVisibleTab = 0;\n\t/**\n\t * The DOM element containing the `Tab` headings displayed.\n\t */\n\t@ViewChildren(\"tabItem\") allTabHeaders: QueryList<ElementRef>;\n\t/**\n\t * Controls the manual focusing done by tabbing through headings.\n\t */\n\tpublic currentSelectedTab: number;\n\tpublic tabListVisible = false;\n\n\t// keyboard accessibility\n\t/**\n\t * Controls the keydown events used for tabbing through the headings.\n\t */\n\t@HostListener(\"keydown\", [\"$event\"])\n\tkeyboardInput(event) {\n\t\tlet tabsArray = Array.from<any>(this.tabs);\n\n\t\t// \"Right\" is an ie11 specific value\n\t\tif (event.key === \"Right\" || event.key === \"ArrowRight\") {\n\t\t\tif (this.currentSelectedTab < this.allTabHeaders.length - 1) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (this.followFocus) {\n\t\t\t\t\tthis.selectTab(event.target, tabsArray[this.currentSelectedTab + 1], this.currentSelectedTab);\n\t\t\t\t}\n\t\t\t\tthis.allTabHeaders.toArray()[this.currentSelectedTab + 1].nativeElement.focus();\n\t\t\t} else {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (this.followFocus) {\n\t\t\t\t\tthis.selectTab(event.target, tabsArray[0], 0);\n\t\t\t\t}\n\t\t\t\tthis.allTabHeaders.first.nativeElement.focus();\n\t\t\t}\n\t\t}\n\n\t\t// \"Left\" is an ie11 specific value\n\t\tif (event.key === \"Left\" || event.key === \"ArrowLeft\") {\n\t\t\tif (this.currentSelectedTab > 0) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (this.followFocus) {\n\t\t\t\t\tthis.selectTab(event.target, tabsArray[this.currentSelectedTab - 1], this.currentSelectedTab);\n\t\t\t\t}\n\t\t\t\tthis.allTabHeaders.toArray()[this.currentSelectedTab - 1].nativeElement.focus();\n\t\t\t} else {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (this.followFocus) {\n\t\t\t\t\tthis.selectTab(event.target, tabsArray[this.allTabHeaders.length - 1], this.allTabHeaders.length);\n\t\t\t\t}\n\t\t\t\tthis.allTabHeaders.toArray()[this.allTabHeaders.length - 1].nativeElement.focus();\n\t\t\t}\n\t\t}\n\n\t\tif (event.key === \"Home\") {\n\t\t\tevent.preventDefault();\n\t\t\tif (this.followFocus) {\n\t\t\t\tthis.selectTab(event.target, tabsArray[0], 0);\n\t\t\t}\n\t\t\tthis.allTabHeaders.toArray()[0].nativeElement.focus();\n\t\t}\n\n\t\tif (event.key === \"End\") {\n\t\t\tevent.preventDefault();\n\t\t\tif (this.followFocus) {\n\t\t\t\tthis.selectTab(event.target, tabsArray[this.allTabHeaders.length - 1], this.allTabHeaders.length);\n\t\t\t}\n\t\t\tthis.allTabHeaders.toArray()[this.allTabHeaders.length - 1].nativeElement.focus();\n\t\t}\n\n\t\t// `\"Spacebar\"` is IE11 specific value\n\t\tif ((event.key === \" \" || event.key === \"Spacebar\") && !this.followFocus) {\n\t\t\tthis.selectTab(event.target, tabsArray[this.currentSelectedTab], this.currentSelectedTab);\n\t\t}\n\t}\n\n\tngAfterContentInit() {\n\t\tif (!this.tabInput) {\n\t\t\tthis.tabs = this.tabQuery;\n\t\t} else {\n\t\t\tthis.tabs = this.tabInput;\n\t\t}\n\n\t\tthis.tabs.forEach(tab => tab.cacheActive = this.cacheActive);\n\t\tthis.tabs.changes.subscribe(() => {\n\t\t\tthis.setFirstTab();\n\t\t});\n\t\tthis.setFirstTab();\n\t}\n\n\t/**\n\t * Controls manually focusing tabs.\n\t */\n\tpublic onTabFocus(ref: HTMLElement, index: number) {\n\t\tthis.currentSelectedTab = index;\n\t\t// reset scroll left because we're already handling it\n\t\tthis.headerContainer.nativeElement.parentElement.scrollLeft = 0;\n\t}\n\n\tpublic getSelectedTab(): any {\n\t\tconst selected = this.tabs.find(tab => tab.active);\n\t\tif (selected) {\n\t\t\treturn selected;\n\t\t}\n\t\treturn {headingIsTemplate: false, heading: \"\"};\n\t}\n\n\tpublic showTabList() {\n\t\tthis.tabListVisible = true;\n\t}\n\n\t/**\n\t * Selects `Tab` 'tab' and moves it into view on the view DOM if it is not already.\n\t */\n\tpublic selectTab(ref: HTMLElement, tab: Tab, tabIndex: number) {\n\t\tif (tab.disabled) {\n\t\t\treturn;\n\t\t}\n\n\t\t// hide the tablist on mobile\n\t\tthis.tabListVisible = false;\n\t\tthis.currentSelectedTab = tabIndex;\n\t\tthis.tabs.forEach(_tab => _tab.active = false);\n\t\ttab.active = true;\n\t\ttab.doSelect();\n\t}\n\n\t/**\n\t * Determines which `Tab` is initially selected.\n\t */\n\tprotected setFirstTab() {\n\t\tsetTimeout(() => {\n\t\t\tlet firstTab = this.tabs.find(tab => tab.active);\n\t\t\tif (!firstTab && this.tabs.first) {\n\t\t\t\tfirstTab = this.tabs.first;\n\t\t\t\tfirstTab.active = true;\n\t\t\t}\n\t\t\tif (firstTab) {\n\t\t\t\tfirstTab.doSelect();\n\t\t\t}\n\t\t});\n\t}\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
[{"__symbolic":"module","version":4,"metadata":{"TabHeaders":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":22,"character":1},"arguments":[{"selector":"ibm-tab-headers","template":"\n\t\t<nav\n\t\t\tclass=\"bx--tabs\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'bx--skeleton': skeleton\n\t\t\t}\"\n\t\t\trole=\"navigation\">\n\t\t\t<div class=\"bx--tabs-trigger\" tabindex=\"0\" (click)=\"showTabList()\">\n\t\t\t\t<a href=\"javascript:void(0)\" class=\"bx--tabs-trigger-text\" tabindex=\"-1\">\n\t\t\t\t\t<ng-container *ngIf=\"!getSelectedTab().headingIsTemplate\">\n\t\t\t\t\t\t{{ getSelectedTab().heading }}\n\t\t\t\t\t</ng-container>\n\t\t\t\t\t<ng-template\n\t\t\t\t\t\t*ngIf=\"getSelectedTab().headingIsTemplate\"\n\t\t\t\t\t\t[ngTemplateOutlet]=\"getSelectedTab().heading\">\n\t\t\t\t\t</ng-template>\n\t\t\t\t</a>\n\t\t\t\t<svg width=\"10\" height=\"5\" viewBox=\"0 0 10 5\">\n\t\t\t\t\t<path d=\"M0 0l5 4.998L10 0z\" fill-rule=\"evenodd\"></path>\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t\t<ul\n\t\t\t\t#tabList\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'bx--tabs__nav--hidden': !tabListVisible\n\t\t\t\t}\"\n\t\t\t\tclass=\"bx--tabs__nav\"\n\t\t\t\trole=\"tablist\">\n\t\t\t\t<li\n\t\t\t\t\t*ngFor=\"let tab of tabs; let i = index;\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'bx--tabs__nav-item--selected': tab.active\n\t\t\t\t\t}\"\n\t\t\t\t\tclass=\"bx--tabs__nav-item\"\n\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\t(click)=\"selectTab(tabref, tab, i)\">\n\t\t\t\t\t<a\n\t\t\t\t\t\t#tabItem\n\t\t\t\t\t\t[attr.aria-selected]=\"tab.active\"\n\t\t\t\t\t\t[attr.tabindex]=\"(tab.active?0:-1)\"\n\t\t\t\t\t\t[attr.aria-controls]=\"tab.id\"\n\t\t\t\t\t\t(focus)=\"onTabFocus(tabref, i)\"\n\t\t\t\t\t\tdraggable=\"false\"\n\t\t\t\t\t\tid=\"{{tab.id}}-header\"\n\t\t\t\t\t\tclass=\"bx--tabs__nav-link\"\n\t\t\t\t\t\thref=\"javascript:void(0)\"\n\t\t\t\t\t\trole=\"tab\">\n\t\t\t\t\t\t<ng-container *ngIf=\"!tab.headingIsTemplate\">\n\t\t\t\t\t\t\t{{ tab.heading }}\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t\t<ng-template\n\t\t\t\t\t\t\t*ngIf=\"tab.headingIsTemplate\"\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"tab.heading\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{$implicit: tab.context}\">\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</a>\n\t\t\t\t</li>\n\t\t\t
|
|
1
|
+
[{"__symbolic":"module","version":4,"metadata":{"TabHeaders":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":22,"character":1},"arguments":[{"selector":"ibm-tab-headers","template":"\n\t\t<nav\n\t\t\tclass=\"bx--tabs\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'bx--skeleton': skeleton\n\t\t\t}\"\n\t\t\trole=\"navigation\">\n\t\t\t<div class=\"bx--tabs-trigger\" tabindex=\"0\" (click)=\"showTabList()\">\n\t\t\t\t<a href=\"javascript:void(0)\" class=\"bx--tabs-trigger-text\" tabindex=\"-1\">\n\t\t\t\t\t<ng-container *ngIf=\"!getSelectedTab().headingIsTemplate\">\n\t\t\t\t\t\t{{ getSelectedTab().heading }}\n\t\t\t\t\t</ng-container>\n\t\t\t\t\t<ng-template\n\t\t\t\t\t\t*ngIf=\"getSelectedTab().headingIsTemplate\"\n\t\t\t\t\t\t[ngTemplateOutlet]=\"getSelectedTab().heading\">\n\t\t\t\t\t</ng-template>\n\t\t\t\t</a>\n\t\t\t\t<svg width=\"10\" height=\"5\" viewBox=\"0 0 10 5\">\n\t\t\t\t\t<path d=\"M0 0l5 4.998L10 0z\" fill-rule=\"evenodd\"></path>\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t\t<ul\n\t\t\t\t#tabList\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'bx--tabs__nav--hidden': !tabListVisible\n\t\t\t\t}\"\n\t\t\t\tclass=\"bx--tabs__nav\"\n\t\t\t\trole=\"tablist\">\n\t\t\t\t<li role=\"presentation\">\n\t\t\t\t\t<ng-container *ngIf=\"contentBefore\" [ngTemplateOutlet]=\"contentBefore\"></ng-container>\n\t\t\t\t</li>\n\t\t\t\t<li\n\t\t\t\t\t*ngFor=\"let tab of tabs; let i = index;\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'bx--tabs__nav-item--selected': tab.active\n\t\t\t\t\t}\"\n\t\t\t\t\tclass=\"bx--tabs__nav-item\"\n\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\t(click)=\"selectTab(tabref, tab, i)\">\n\t\t\t\t\t<a\n\t\t\t\t\t\t#tabItem\n\t\t\t\t\t\t[attr.aria-selected]=\"tab.active\"\n\t\t\t\t\t\t[attr.tabindex]=\"(tab.active?0:-1)\"\n\t\t\t\t\t\t[attr.aria-controls]=\"tab.id\"\n\t\t\t\t\t\t(focus)=\"onTabFocus(tabref, i)\"\n\t\t\t\t\t\tdraggable=\"false\"\n\t\t\t\t\t\tid=\"{{tab.id}}-header\"\n\t\t\t\t\t\tclass=\"bx--tabs__nav-link\"\n\t\t\t\t\t\thref=\"javascript:void(0)\"\n\t\t\t\t\t\trole=\"tab\">\n\t\t\t\t\t\t<ng-container *ngIf=\"!tab.headingIsTemplate\">\n\t\t\t\t\t\t\t{{ tab.heading }}\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t\t<ng-template\n\t\t\t\t\t\t\t*ngIf=\"tab.headingIsTemplate\"\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"tab.heading\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{$implicit: tab.context}\">\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</a>\n\t\t\t\t</li>\n\t\t\t\t<li role=\"presentation\">\n\t\t\t\t\t<ng-container *ngIf=\"contentAfter\" [ngTemplateOutlet]=\"contentAfter\"></ng-container>\n\t\t\t\t</li>\n\t\t\t</ul>\n\t\t</nav>\n\t "}]}],"members":{"tabInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":98,"character":2},"arguments":["tabs"]}]}],"cacheActive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":103,"character":2}}]}],"followFocus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":107,"character":2}}]}],"skeleton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":111,"character":2}}]}],"contentBefore":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":113,"character":2}}]}],"contentAfter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":114,"character":2}}]}],"headerContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":119,"character":2},"arguments":["tabList"]}]}],"tabQuery":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":123,"character":2},"arguments":[{"__symbolic":"reference","module":"./tab.component","name":"Tab","line":123,"character":18}]}]}],"allTabHeaders":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren","line":135,"character":2},"arguments":["tabItem"]}]}],"keyboardInput":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":146,"character":2},"arguments":["keydown",["$event"]]}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"onTabFocus":[{"__symbolic":"method"}],"getSelectedTab":[{"__symbolic":"method"}],"showTabList":[{"__symbolic":"method"}],"selectTab":[{"__symbolic":"method"}],"setFirstTab":[{"__symbolic":"method"}]}}}}]
|