carbon-components-angular
Version:
Next generation components
98 lines • 8.47 kB
JavaScript
import { Component, Input, Output, EventEmitter } from "@angular/core";
import * as i0 from "@angular/core";
import * as i1 from "carbon-components-angular/i18n";
import * as i2 from "@angular/common";
import * as i3 from "@angular/forms";
import * as i4 from "carbon-components-angular/icon";
import * as i5 from "./pagination-item.component";
/**
* Used to present a selection of pages when there is an overflow
* in the pagination list
*
* * ```html
* <cds-pagination-overflow [fromIndex]="5" [count]="30" (change)="handleChange(value)"></cds-pagination-overflow>
* ```
*/
export class PaginationOverflow {
constructor(i18n) {
this.i18n = i18n;
this.ariaLabel = this.i18n.get().PAGINATION.SELECT_ARIA;
/**
* Emits click event
*/
this.change = new EventEmitter();
}
get countAsArray() {
return [...Array(this.count)];
}
handleChange(event) {
this.change.emit(+event.target.value);
event.target.value = "";
}
}
PaginationOverflow.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PaginationOverflow, deps: [{ token: i1.I18n }], target: i0.ɵɵFactoryTarget.Component });
PaginationOverflow.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PaginationOverflow, selector: "cds-pagination-overflow, ibm-pagination-overflow", inputs: { fromIndex: "fromIndex", count: "count", ariaLabel: "ariaLabel" }, outputs: { change: "change" }, ngImport: i0, template: `
<li class="cds--pagination-nav__list-item" *ngIf="count > 1">
<div class="cds--pagination-nav__select">
<select
[]="ariaLabel"
class="cds--pagination-nav__page cds--pagination-nav__page--select"
(change)="handleChange($event)">
<option value="" hidden></option>
<option
*ngFor="let item of countAsArray; let i = index">
{{fromIndex + i + 1}}
</option>
</select>
<div class="cds--pagination-nav__select-icon-wrapper">
<svg
cdsIcon="overflow-menu--horizontal"
size="16"
style="display: inherit"
class="cds--pagination-nav__select-icon">
</svg>
</div>
</div>
</li>
<cds-pagination-nav-item *ngIf="count === 1" [page]="fromIndex + 1"></cds-pagination-nav-item>
`, isInline: true, dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i5.PaginationNavItem, selector: "cds-pagination-nav-item, ibm-pagination-nav-item", inputs: ["page", "isActive"], outputs: ["click"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PaginationOverflow, decorators: [{
type: Component,
args: [{
selector: "cds-pagination-overflow, ibm-pagination-overflow",
template: `
<li class="cds--pagination-nav__list-item" *ngIf="count > 1">
<div class="cds--pagination-nav__select">
<select
[]="ariaLabel"
class="cds--pagination-nav__page cds--pagination-nav__page--select"
(change)="handleChange($event)">
<option value="" hidden></option>
<option
*ngFor="let item of countAsArray; let i = index">
{{fromIndex + i + 1}}
</option>
</select>
<div class="cds--pagination-nav__select-icon-wrapper">
<svg
cdsIcon="overflow-menu--horizontal"
size="16"
style="display: inherit"
class="cds--pagination-nav__select-icon">
</svg>
</div>
</div>
</li>
<cds-pagination-nav-item *ngIf="count === 1" [page]="fromIndex + 1"></cds-pagination-nav-item>
`
}]
}], ctorParameters: function () { return [{ type: i1.I18n }]; }, propDecorators: { fromIndex: [{
type: Input
}], count: [{
type: Input
}], ariaLabel: [{
type: Input
}], change: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFnaW5hdGlvbi1vdmVyZmxvdy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvcGFnaW5hdGlvbi9wYWdpbmF0aW9uLW5hdi9wYWdpbmF0aW9uLW92ZXJmbG93LmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ04sU0FBUyxFQUNULEtBQUssRUFDTCxNQUFNLEVBQ04sWUFBWSxFQUNaLE1BQU0sZUFBZSxDQUFDOzs7Ozs7O0FBR3ZCOzs7Ozs7O0dBT0c7QUE2QkgsTUFBTSxPQUFPLGtCQUFrQjtJQW1COUIsWUFBc0IsSUFBVTtRQUFWLFNBQUksR0FBSixJQUFJLENBQU07UUFYdkIsY0FBUyxHQUFXLElBQUksQ0FBQyxJQUFJLENBQUMsR0FBRyxFQUFFLENBQUMsVUFBVSxDQUFDLFdBQVcsQ0FBQztRQUVwRTs7V0FFRztRQUNPLFdBQU0sR0FBRyxJQUFJLFlBQVksRUFBVSxDQUFDO0lBTVgsQ0FBQztJQUpwQyxJQUFJLFlBQVk7UUFDZixPQUFPLENBQUMsR0FBRyxLQUFLLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUM7SUFDL0IsQ0FBQztJQUlELFlBQVksQ0FBQyxLQUFLO1FBQ2pCLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLENBQUMsS0FBSyxDQUFDLE1BQU0sQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUN0QyxLQUFLLENBQUMsTUFBTSxDQUFDLEtBQUssR0FBRyxFQUFFLENBQUM7SUFDekIsQ0FBQzs7K0dBeEJXLGtCQUFrQjttR0FBbEIsa0JBQWtCLG1NQTFCcEI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztFQXdCVDsyRkFFVyxrQkFBa0I7a0JBNUI5QixTQUFTO21CQUFDO29CQUNWLFFBQVEsRUFBRSxrREFBa0Q7b0JBQzVELFFBQVEsRUFBRTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0VBd0JUO2lCQUNEOzJGQUtTLFNBQVM7c0JBQWpCLEtBQUs7Z0JBRUcsS0FBSztzQkFBYixLQUFLO2dCQUVHLFNBQVM7c0JBQWpCLEtBQUs7Z0JBS0ksTUFBTTtzQkFBZixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcblx0Q29tcG9uZW50LFxuXHRJbnB1dCxcblx0T3V0cHV0LFxuXHRFdmVudEVtaXR0ZXJcbn0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcbmltcG9ydCB7IEkxOG4gfSBmcm9tIFwiY2FyYm9uLWNvbXBvbmVudHMtYW5ndWxhci9pMThuXCI7XG5cbi8qKlxuICogVXNlZCB0byBwcmVzZW50IGEgc2VsZWN0aW9uIG9mIHBhZ2VzIHdoZW4gdGhlcmUgaXMgYW4gb3ZlcmZsb3dcbiAqIGluIHRoZSBwYWdpbmF0aW9uIGxpc3RcbiAqXG4gKiAqIGBgYGh0bWxcbiAqIDxjZHMtcGFnaW5hdGlvbi1vdmVyZmxvdyBbZnJvbUluZGV4XT1cIjVcIiBbY291bnRdPVwiMzBcIiAoY2hhbmdlKT1cImhhbmRsZUNoYW5nZSh2YWx1ZSlcIj48L2Nkcy1wYWdpbmF0aW9uLW92ZXJmbG93PlxuICogYGBgXG4gKi9cbkBDb21wb25lbnQoe1xuXHRzZWxlY3RvcjogXCJjZHMtcGFnaW5hdGlvbi1vdmVyZmxvdywgaWJtLXBhZ2luYXRpb24tb3ZlcmZsb3dcIixcblx0dGVtcGxhdGU6IGBcblx0XHQ8bGkgY2xhc3M9XCJjZHMtLXBhZ2luYXRpb24tbmF2X19saXN0LWl0ZW1cIiAqbmdJZj1cImNvdW50ID4gMVwiPlxuXHRcdFx0PGRpdiBjbGFzcz1cImNkcy0tcGFnaW5hdGlvbi1uYXZfX3NlbGVjdFwiPlxuXHRcdFx0PHNlbGVjdFxuXHRcdFx0XHRbYXR0ci5hcmlhLWxhYmVsXT1cImFyaWFMYWJlbFwiXG5cdFx0XHRcdGNsYXNzPVwiY2RzLS1wYWdpbmF0aW9uLW5hdl9fcGFnZSBjZHMtLXBhZ2luYXRpb24tbmF2X19wYWdlLS1zZWxlY3RcIlxuXHRcdFx0XHQoY2hhbmdlKT1cImhhbmRsZUNoYW5nZSgkZXZlbnQpXCI+XG5cdFx0XHRcdDxvcHRpb24gdmFsdWU9XCJcIiBoaWRkZW4+PC9vcHRpb24+XG5cdFx0XHRcdDxvcHRpb25cblx0XHRcdFx0Km5nRm9yPVwibGV0IGl0ZW0gb2YgY291bnRBc0FycmF5OyBsZXQgaSA9IGluZGV4XCI+XG5cdFx0XHRcdFx0e3tmcm9tSW5kZXggKyBpICsgMX19XG5cdFx0XHRcdDwvb3B0aW9uPlxuXHRcdFx0PC9zZWxlY3Q+XG5cdFx0XHQ8ZGl2IGNsYXNzPVwiY2RzLS1wYWdpbmF0aW9uLW5hdl9fc2VsZWN0LWljb24td3JhcHBlclwiPlxuXHRcdFx0XHQ8c3ZnXG5cdFx0XHRcdFx0Y2RzSWNvbj1cIm92ZXJmbG93LW1lbnUtLWhvcml6b250YWxcIlxuXHRcdFx0XHRcdHNpemU9XCIxNlwiXG5cdFx0XHRcdFx0c3R5bGU9XCJkaXNwbGF5OiBpbmhlcml0XCJcblx0XHRcdFx0XHRjbGFzcz1cImNkcy0tcGFnaW5hdGlvbi1uYXZfX3NlbGVjdC1pY29uXCI+XG5cdFx0XHRcdDwvc3ZnPlxuXHRcdFx0PC9kaXY+XG5cdFx0XHQ8L2Rpdj5cblx0XHQ8L2xpPlxuXHRcdDxjZHMtcGFnaW5hdGlvbi1uYXYtaXRlbSAqbmdJZj1cImNvdW50ID09PSAxXCIgW3BhZ2VdPVwiZnJvbUluZGV4ICsgMVwiPjwvY2RzLXBhZ2luYXRpb24tbmF2LWl0ZW0+XG5cdGBcbn0pXG5leHBvcnQgY2xhc3MgUGFnaW5hdGlvbk92ZXJmbG93IHtcblx0LyoqXG5cdCAqIFRoZSBwYWdlIGZvciB0aGlzIGNvbXBvbmVudCB0byBkaXBzbGF5XG5cdCAqL1xuXHRASW5wdXQoKSBmcm9tSW5kZXg6IG51bWJlcjtcblxuXHRASW5wdXQoKSBjb3VudDogbnVtYmVyO1xuXG5cdEBJbnB1dCgpIGFyaWFMYWJlbDogc3RyaW5nID0gdGhpcy5pMThuLmdldCgpLlBBR0lOQVRJT04uU0VMRUNUX0FSSUE7XG5cblx0LyoqXG5cdCAqIEVtaXRzIGNsaWNrIGV2ZW50XG5cdCAqL1xuXHRAT3V0cHV0KCkgY2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcjxudW1iZXI+KCk7XG5cblx0Z2V0IGNvdW50QXNBcnJheSgpIHtcblx0XHRyZXR1cm4gWy4uLkFycmF5KHRoaXMuY291bnQpXTtcblx0fVxuXG5cdGNvbnN0cnVjdG9yKHByb3RlY3RlZCBpMThuOiBJMThuKSB7fVxuXG5cdGhhbmRsZUNoYW5nZShldmVudCkge1xuXHRcdHRoaXMuY2hhbmdlLmVtaXQoK2V2ZW50LnRhcmdldC52YWx1ZSk7XG5cdFx0ZXZlbnQudGFyZ2V0LnZhbHVlID0gXCJcIjtcblx0fVxufVxuIl19