npm - carbon-components-angular - Versions diffs - 5.14.5 → 5.14.7 - Mend

carbon-components-angular 5.14.5 → 5.14.7

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.

Files changed (61) hide show

package/docs/documentation.json CHANGED Viewed

@@ -1293,12 +1293,12 @@
         },
         {
             "name": "PaginationTranslations",
-            "id": "interface-PaginationTranslations-aba8db2c7d2e16da513a54143fd003228c02176d38f56cbbd52a340eacb547d3fdbe0ed42cdf88f4ca7d2999e9d5e6066b09176ca161695a212d7cd1d881d21e",
+            "id": "interface-PaginationTranslations-2740c2ca9a0ad984c5ba1ed0ddbf9cd614d0b50d0930a5716b728c2a340994b2d53b6fa9139325ea7a4539c9031d72d4bbc926ff0cb98bbddcfde242385e7d8e",
             "file": "src/pagination/pagination.component.ts",
             "deprecated": false,
             "deprecationMessage": "",
             "type": "interface",
-            "sourceCode": "import { PaginationModel } from \"./pagination-model.class\";\nimport {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter\n} from \"@angular/core\";\n\nimport { I18n, Overridable } from \"carbon-components-angular/i18n\";\nimport { ExperimentalService } from \"carbon-components-angular/experimental\";\nimport { merge } from \"carbon-components-angular/utils\";\n\nexport interface PaginationTranslations {\n\tITEMS_PER_PAGE: string;\n\tOPEN_LIST_OF_OPTIONS: string;\n\tBACKWARD: string;\n\tFORWARD: string;\n\tTOTAL_ITEMS_UNKNOWN: string;\n\tTOTAL_ITEMS: string;\n\tTOTAL_ITEM: string;\n\tOF_LAST_PAGES: string;\n\tOF_LAST_PAGE: string;\n}\n\n/**\n * Use pagination when you have multiple pages of data to handle.\n *\n * [See demo](../../?path=/story/components-pagination--basic)\n *\n * ```html\n *\t<cds-pagination [model]=\"model\" (selectPage)=\"selectPage($event)\"></cds-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@Component({\n\tselector: \"cds-pagination, ibm-pagination\",\n\ttemplate: `\n\t<div\n\t\tclass=\"cds--pagination\"\n\t\t[ngClass]=\"{\n\t\t\t'cds--skeleton': skeleton\n\t\t}\">\n\t\t<!-- left skeleton div -->\n\t\t<div *ngIf=\"skeleton\" class=\"cds--pagination__left\">\n\t\t\t<p class=\"cds--skeleton__text\" style=\"width: 70px\"></p>\n\t\t\t<p class=\"cds--skeleton__text\" style=\"width: 35px\"></p>\n\t\t\t<p class=\"cds--skeleton__text\" style=\"width: 105px\"></p>\n\t\t</div>\n\n\t\t<div *ngIf=\"!skeleton\" class=\"cds--pagination__left\">\n\t\t\t<ng-container *ngIf=\"showPageInput\">\n\t\t\t\t<label class=\"cds--pagination__text\" [for]=\"itemsPerPageSelectId\">\n\t\t\t\t\t{{itemsPerPageText.subject | async}}\n\t\t\t\t</label>\n\t\t\t\t<div\n\t\t\t\t\tclass=\"cds--select cds--select--inline cds--select__item-count\"\n\t\t\t\t\t[class.cds--select--disabled]=\"pageInputDisabled\">\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\t[disabled]=\"pageInputDisabled\"\n\t\t\t\t\t\tclass=\"cds--select-input\">\n\t\t\t\t\t\t<option\n\t\t\t\t\t\t\tclass=\"cds--select-option\"\n\t\t\t\t\t\t\t*ngFor=\"let option of itemsPerPageOptions\"\n\t\t\t\t\t\t\t[value]=\"option\">\n\t\t\t\t\t\t\t\t{{ option }}\n\t\t\t\t\t\t</option>\n\t\t\t\t\t</select>\n\t\t\t\t\t<svg\n\t\t\t\t\t\tcdsIcon=\"chevron--down\"\n\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\tstyle=\"display: inherit\"\n\t\t\t\t\t\tclass=\"cds--select__arrow\"\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t[attr.ariaLabel]=\"optionsListText.subject | async\">\n\t\t\t\t\t</svg>\n\t\t\t\t</div>\n\t\t\t</ng-container>\n\t\t\t<span *ngIf=\"!pagesUnknown && totalDataLength <= 1\" class=\"cds--pagination__text\" [ngStyle]=\"{'margin-left': showPageInput ? null : 0}\">\n\t\t\t\t{{totalItemText.subject | i18nReplace:{start: startItemIndex, end: endItemIndex, total: totalDataLength } | async}}\n\t\t\t</span>\n\t\t\t<span *ngIf=\"!pagesUnknown && totalDataLength > 1\" class=\"cds--pagination__text\" [ngStyle]=\"{'margin-left': showPageInput ? null : 0}\">\n\t\t\t\t{{totalItemsText.subject | i18nReplace:{start: startItemIndex, end: endItemIndex, total: totalDataLength } | async}}\n\t\t\t</span>\n\t\t\t<span *ngIf=\"pagesUnknown\" class=\"cds--pagination__text\" [ngStyle]=\"{'margin-left': showPageInput ? null : 0}\">\n\t\t\t\t{{totalItemsUnknownText.subject | i18nReplace:{start: startItemIndex, end: endItemIndex } | async}}\n\t\t\t</span>\n\t\t</div>\n\n\t\t<!-- right skeleton div -->\n\t\t<div *ngIf=\"skeleton\" class=\"cds--pagination__right\">\n\t\t\t<p class=\"cds--skeleton__text\" style=\"width: 70px\"></p>\n\t\t</div>\n\n\t\t<div *ngIf=\"!skeleton\" class=\"cds--pagination__right\">\n\t\t\t<span *ngIf=\"pagesUnknown\" class=\"cds--pagination__text cds--pagination__page-text\">\n\t\t\t\t<ng-container *ngIf=\"!showPageInput\">{{currentPage}}</ng-container>\n\t\t\t\t{{pageText.subject | async}}\n\t\t\t</span>\n\t\t\t<ng-container *ngIf=\"showPageInput\">\n\t\t\t\t<div\n\t\t\t\t\tclass=\"cds--select cds--select--inline cds--select__page-number\"\n\t\t\t\t\t[class.cds--select--disabled]=\"pageInputDisabled\">\n\t\t\t\t\t<label [for]=\"currentPageSelectId\" class=\"cds--label cds--visually-hidden\">{{pageText.subject | async}}</label>\n\t\t\t\t\t<input\n\t\t\t\t\t\t*ngIf=\"pageOptions.length > pageSelectThreshold\"\n\t\t\t\t\t\tstyle=\"padding-right: 1rem; margin-right: 1rem;\"\n\t\t\t\t\t\t[id]=\"currentPageSelectId\"\n\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\tmin=\"1\"\n\t\t\t\t\t\t[max]=\"pageOptions.length\"\n\t\t\t\t\t\tclass=\"cds--select-input\"\n\t\t\t\t\t\t[(ngModel)]=\"currentPage\">\n\t\t\t\t\t<select\n\t\t\t\t\t\t*ngIf=\"pageOptions.length <= pageSelectThreshold\"\n\t\t\t\t\t\t[id]=\"currentPageSelectId\"\n\t\t\t\t\t\tclass=\"cds--select-input\"\n\t\t\t\t\t\t[disabled]=\"pageInputDisabled\"\n\t\t\t\t\t\t[(ngModel)]=\"currentPage\">\n\t\t\t\t\t\t<option *ngFor=\"let page of pageOptions; let i = index;\" class=\"cds--select-option\" [value]=\"i + 1\">{{i + 1}}</option>\n\t\t\t\t\t</select>\n\t\t\t\t\t<svg\n\t\t\t\t\t\t*ngIf=\"pageOptions.length <= 1000\"\n\t\t\t\t\t\tcdsIcon=\"chevron--down\"\n\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\tstyle=\"display: inherit;\"\n\t\t\t\t\t\tclass=\"cds--select__arrow\"\n\t\t\t\t\t\t[attr.ariaLabel]=\"optionsListText.subject | async\">\n\t\t\t\t\t</svg>\n\t\t\t\t</div>\n\t\t\t</ng-container>\n\n\t\t\t<span *ngIf=\"!pagesUnknown && lastPage <= 1\" class=\"cds--pagination__text\">\n\t\t\t\t<ng-container *ngIf=\"!showPageInput\">{{currentPage}}</ng-container>\n\t\t\t\t{{ofLastPageText.subject | i18nReplace: {last: lastPage} | async}}\n\t\t\t</span>\n\t\t\t<span *ngIf=\"!pagesUnknown && lastPage > 1\" class=\"cds--pagination__text\">\n\t\t\t\t<ng-container *ngIf=\"!showPageInput\">{{currentPage}}</ng-container>\n\t\t\t\t{{ofLastPagesText.subject | i18nReplace: {last: lastPage} | async}}\n\t\t\t</span>\n\t\t\t<div class=\"cds--pagination__control-buttons\">\n\t\t\t\t<button\n\t\t\t\t\tcdsButton=\"ghost\"\n\t\t\t\t\ticonOnly=\"true\"\n\t\t\t\t\tclass=\"cds--pagination__button cds--pagination__button--backward\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--pagination__button--no-index': currentPage <= 1 || disabled\n\t\t\t\t\t}\"\n\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t[attr.aria-label]=\"backwardText.subject | async\"\n\t\t\t\t\t(click)=\"selectPage.emit(previousPage)\"\n\t\t\t\t\t[disabled]=\"(currentPage <= 1 || disabled ? true : null)\">\n\t\t\t\t\t<svg cdsIcon=\"caret--left\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t\t</button>\n\n\t\t\t\t<button\n\t\t\t\t\tcdsButton=\"ghost\"\n\t\t\t\t\ticonOnly=\"true\"\n\t\t\t\t\tclass=\"\n\t\t\t\t\t\tcds--pagination__button\n\t\t\t\t\t\tcds--pagination__button--forward\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--pagination__button--no-index': currentPage >= lastPage || disabled\n\t\t\t\t\t}\"\n\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t[attr.aria-label]=\"forwardText.subject | async\"\n\t\t\t\t\t(click)=\"selectPage.emit(nextPage)\"\n\t\t\t\t\t[disabled]=\"(currentPage >= lastPage || disabled ? true : null)\">\n\t\t\t\t\t<svg cdsIcon=\"caret--right\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t\t</button>\n\t\t\t</div>\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@Input() model: PaginationModel;\n\t/**\n \t * Set to `true` to disable the backward/forward buttons.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` to disable the select box that changes the page.\n\t */\n\t@Input() pageInputDisabled = false;\n\t/**\n\t * Controls wether or not to show the page selects\n\t */\n\t@Input() showPageInput = true;\n\t/**\n\t * Set to `true` if the total number of items is unknown.\n\t */\n\t@Input() pagesUnknown = false;\n\t@Input() pageSelectThreshold = 1000;\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_UNKNOWN\": \"{{start}}-{{end}} items\",\n\t *\t\t\"TOTAL_ITEMS\": \"{{start}}-{{end}} of {{total}} items\",\n\t *\t\t\"TOTAL_ITEM\": \"{{start}}-{{end}} of {{total}} item\",\n\t *\t\t\"OF_LAST_PAGES\": \"of {{last}} pages\",\n\t *\t\t\"OF_LAST_PAGE\": \"of {{last}} page\"\n\t * }\n\t * ```\n\t */\n\t@Input()\n\tset translations (value: PaginationTranslations) {\n\t\tconst valueWithDefaults = merge(this.i18n.getMultiple(\"PAGINATION\"), value);\n\t\tthis.itemsPerPageText.override(valueWithDefaults.ITEMS_PER_PAGE);\n\t\tthis.optionsListText.override(valueWithDefaults.OPEN_LIST_OF_OPTIONS);\n\t\tthis.backwardText.override(valueWithDefaults.BACKWARD);\n\t\tthis.forwardText.override(valueWithDefaults.FORWARD);\n\t\tthis.totalItemsText.override(valueWithDefaults.TOTAL_ITEMS);\n\t\tthis.totalItemText.override(valueWithDefaults.TOTAL_ITEM);\n\t\tthis.totalItemsUnknownText.override(valueWithDefaults.TOTAL_ITEMS_UNKNOWN);\n\t\tthis.pageText.override(valueWithDefaults.PAGE);\n\t\tthis.ofLastPagesText.override(valueWithDefaults.OF_LAST_PAGES);\n\t\tthis.ofLastPageText.override(valueWithDefaults.OF_LAST_PAGE);\n\t}\n\n\t/**\n\t * Options for items per page select\n\t *\n\t * A default array of options will be defined: [10, 20, 30, 40, 50]\n\t */\n\t@Input() itemsPerPageOptions: number[] = [10, 20, 30, 40, 50];\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\n\tget totalDataLength() {\n\t\treturn this.model.totalDataLength;\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.totalDataLength / this.itemsPerPage);\n\t\treturn last > 0 ? last : 1;\n\t}\n\n\tget startItemIndex() {\n\t\treturn this.endItemIndex > 0 ? (this.currentPage - 1) * this.itemsPerPage + 1 : 0;\n\t}\n\n\tget endItemIndex() {\n\t\tconst projectedEndItemIndex = this.currentPage * this.itemsPerPage;\n\n\t\treturn projectedEndItemIndex < this.totalDataLength ? projectedEndItemIndex : this.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 pageOptions() {\n\t\tif (this.totalDataLength && this._pageOptions.length !== this.totalDataLength) {\n\t\t\tthis._pageOptions = Array(Math.ceil(this.totalDataLength / this.itemsPerPage));\n\t\t}\n\t\treturn this._pageOptions;\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.getOverridable(\"PAGINATION.ITEMS_PER_PAGE\");\n\toptionsListText = this.i18n.getOverridable(\"PAGINATION.OPEN_LIST_OF_OPTIONS\");\n\tbackwardText = this.i18n.getOverridable(\"PAGINATION.BACKWARD\");\n\tforwardText = this.i18n.getOverridable(\"PAGINATION.FORWARD\");\n\ttotalItemsText = this.i18n.getOverridable(\"PAGINATION.TOTAL_ITEMS\");\n\ttotalItemText = this.i18n.getOverridable(\"PAGINATION.TOTAL_ITEM\");\n\ttotalItemsUnknownText = this.i18n.getOverridable(\"PAGINATION.TOTAL_ITEMS_UNKNOWN\");\n\tpageText = this.i18n.getOverridable(\"PAGINATION.PAGE\");\n\tofLastPagesText = this.i18n.getOverridable(\"PAGINATION.OF_LAST_PAGES\");\n\tofLastPageText = this.i18n.getOverridable(\"PAGINATION.OF_LAST_PAGE\");\n\n\tprotected _pageOptions = [];\n\n\tconstructor(protected i18n: I18n, protected experimental: ExperimentalService) {\n\t\tPagination.paginationCounter++;\n\t}\n}\n",
+            "sourceCode": "import { PaginationModel } from \"./pagination-model.class\";\nimport {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter\n} from \"@angular/core\";\n\nimport { I18n, Overridable } from \"carbon-components-angular/i18n\";\nimport { ExperimentalService } from \"carbon-components-angular/experimental\";\nimport { merge } from \"carbon-components-angular/utils\";\n\nexport interface PaginationTranslations {\n\tITEMS_PER_PAGE: string;\n\tOPEN_LIST_OF_OPTIONS: string;\n\tBACKWARD: string;\n\tFORWARD: string;\n\tTOTAL_ITEMS_UNKNOWN: string;\n\tTOTAL_ITEMS: string;\n\tTOTAL_ITEM: string;\n\tOF_LAST_PAGES: string;\n\tOF_LAST_PAGE: string;\n}\n\n/**\n * Use pagination when you have multiple pages of data to handle.\n *\n * [See demo](../../?path=/story/components-pagination--basic)\n *\n * ```html\n *\t<cds-pagination [model]=\"model\" (selectPage)=\"selectPage($event)\"></cds-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@Component({\n\tselector: \"cds-pagination, ibm-pagination\",\n\ttemplate: `\n\t<div\n\t\tclass=\"cds--pagination\"\n\t\t[ngClass]=\"{\n\t\t\t'cds--skeleton': skeleton\n\t\t}\">\n\t\t<!-- left skeleton div -->\n\t\t<div *ngIf=\"skeleton\" class=\"cds--pagination__left\">\n\t\t\t<p class=\"cds--skeleton__text\" style=\"width: 70px\"></p>\n\t\t\t<p class=\"cds--skeleton__text\" style=\"width: 35px\"></p>\n\t\t\t<p class=\"cds--skeleton__text\" style=\"width: 105px\"></p>\n\t\t</div>\n\n\t\t<div *ngIf=\"!skeleton\" class=\"cds--pagination__left\">\n\t\t\t<ng-container *ngIf=\"showPageInput\">\n\t\t\t\t<label class=\"cds--pagination__text\" [for]=\"itemsPerPageSelectId\">\n\t\t\t\t\t{{itemsPerPageText.subject | async}}\n\t\t\t\t</label>\n\t\t\t\t<div\n\t\t\t\t\tclass=\"cds--select cds--select--inline cds--select__item-count\"\n\t\t\t\t\t[class.cds--select--disabled]=\"pageInputDisabled\">\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\t[disabled]=\"pageInputDisabled\"\n\t\t\t\t\t\tclass=\"cds--select-input\">\n\t\t\t\t\t\t<option\n\t\t\t\t\t\t\tclass=\"cds--select-option\"\n\t\t\t\t\t\t\t*ngFor=\"let option of itemsPerPageOptions\"\n\t\t\t\t\t\t\t[value]=\"option\">\n\t\t\t\t\t\t\t\t{{ option }}\n\t\t\t\t\t\t</option>\n\t\t\t\t\t</select>\n\t\t\t\t\t<svg\n\t\t\t\t\t\tcdsIcon=\"chevron--down\"\n\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\tstyle=\"display: inherit\"\n\t\t\t\t\t\tclass=\"cds--select__arrow\"\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t[attr.ariaLabel]=\"optionsListText.subject | async\">\n\t\t\t\t\t</svg>\n\t\t\t\t</div>\n\t\t\t</ng-container>\n\t\t\t<span *ngIf=\"!pagesUnknown && totalDataLength <= 1\" class=\"cds--pagination__text cds--pagination__items-count\" [ngStyle]=\"{'margin-left': showPageInput ? null : 0}\">\n\t\t\t\t{{totalItemText.subject | i18nReplace:{start: startItemIndex, end: endItemIndex, total: totalDataLength } | async}}\n\t\t\t</span>\n\t\t\t<span *ngIf=\"!pagesUnknown && totalDataLength > 1\" class=\"cds--pagination__text cds--pagination__items-count\" [ngStyle]=\"{'margin-left': showPageInput ? null : 0}\">\n\t\t\t\t{{totalItemsText.subject | i18nReplace:{start: startItemIndex, end: endItemIndex, total: totalDataLength } | async}}\n\t\t\t</span>\n\t\t\t<span *ngIf=\"pagesUnknown\" class=\"cds--pagination__text cds--pagination__items-count\" [ngStyle]=\"{'margin-left': showPageInput ? null : 0}\">\n\t\t\t\t{{totalItemsUnknownText.subject | i18nReplace:{start: startItemIndex, end: endItemIndex } | async}}\n\t\t\t</span>\n\t\t</div>\n\n\t\t<!-- right skeleton div -->\n\t\t<div *ngIf=\"skeleton\" class=\"cds--pagination__right\">\n\t\t\t<p class=\"cds--skeleton__text\" style=\"width: 70px\"></p>\n\t\t</div>\n\n\t\t<div *ngIf=\"!skeleton\" class=\"cds--pagination__right\">\n\t\t\t<span *ngIf=\"pagesUnknown\" class=\"cds--pagination__text cds--pagination__page-text\">\n\t\t\t\t<ng-container *ngIf=\"!showPageInput\">{{currentPage}}</ng-container>\n\t\t\t\t{{pageText.subject | async}}\n\t\t\t</span>\n\t\t\t<ng-container *ngIf=\"showPageInput\">\n\t\t\t\t<div\n\t\t\t\t\tclass=\"cds--select cds--select--inline cds--select__page-number\"\n\t\t\t\t\t[class.cds--select--disabled]=\"pageInputDisabled\">\n\t\t\t\t\t<label [for]=\"currentPageSelectId\" class=\"cds--label cds--visually-hidden\">{{pageText.subject | async}}</label>\n\t\t\t\t\t<input\n\t\t\t\t\t\t*ngIf=\"pageOptions.length > pageSelectThreshold\"\n\t\t\t\t\t\tstyle=\"padding-right: 1rem; margin-right: 1rem;\"\n\t\t\t\t\t\t[id]=\"currentPageSelectId\"\n\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\tmin=\"1\"\n\t\t\t\t\t\t[max]=\"pageOptions.length\"\n\t\t\t\t\t\tclass=\"cds--select-input\"\n\t\t\t\t\t\t[(ngModel)]=\"currentPage\">\n\t\t\t\t\t<select\n\t\t\t\t\t\t*ngIf=\"pageOptions.length <= pageSelectThreshold\"\n\t\t\t\t\t\t[id]=\"currentPageSelectId\"\n\t\t\t\t\t\tclass=\"cds--select-input\"\n\t\t\t\t\t\t[disabled]=\"pageInputDisabled\"\n\t\t\t\t\t\t[(ngModel)]=\"currentPage\">\n\t\t\t\t\t\t<option *ngFor=\"let page of pageOptions; let i = index;\" class=\"cds--select-option\" [value]=\"i + 1\">{{i + 1}}</option>\n\t\t\t\t\t</select>\n\t\t\t\t\t<svg\n\t\t\t\t\t\t*ngIf=\"pageOptions.length <= 1000\"\n\t\t\t\t\t\tcdsIcon=\"chevron--down\"\n\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\tstyle=\"display: inherit;\"\n\t\t\t\t\t\tclass=\"cds--select__arrow\"\n\t\t\t\t\t\t[attr.ariaLabel]=\"optionsListText.subject | async\">\n\t\t\t\t\t</svg>\n\t\t\t\t</div>\n\t\t\t</ng-container>\n\n\t\t\t<span *ngIf=\"!pagesUnknown && lastPage <= 1\" class=\"cds--pagination__text\">\n\t\t\t\t<ng-container *ngIf=\"!showPageInput\">{{currentPage}}</ng-container>\n\t\t\t\t{{ofLastPageText.subject | i18nReplace: {last: lastPage} | async}}\n\t\t\t</span>\n\t\t\t<span *ngIf=\"!pagesUnknown && lastPage > 1\" class=\"cds--pagination__text\">\n\t\t\t\t<ng-container *ngIf=\"!showPageInput\">{{currentPage}}</ng-container>\n\t\t\t\t{{ofLastPagesText.subject | i18nReplace: {last: lastPage} | async}}\n\t\t\t</span>\n\t\t\t<div class=\"cds--pagination__control-buttons\">\n\t\t\t\t<button\n\t\t\t\t\tcdsButton=\"ghost\"\n\t\t\t\t\ticonOnly=\"true\"\n\t\t\t\t\tclass=\"cds--pagination__button cds--pagination__button--backward\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--pagination__button--no-index': currentPage <= 1 || disabled\n\t\t\t\t\t}\"\n\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t[attr.aria-label]=\"backwardText.subject | async\"\n\t\t\t\t\t(click)=\"selectPage.emit(previousPage)\"\n\t\t\t\t\t[disabled]=\"(currentPage <= 1 || disabled ? true : null)\">\n\t\t\t\t\t<svg cdsIcon=\"caret--left\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t\t</button>\n\n\t\t\t\t<button\n\t\t\t\t\tcdsButton=\"ghost\"\n\t\t\t\t\ticonOnly=\"true\"\n\t\t\t\t\tclass=\"\n\t\t\t\t\t\tcds--pagination__button\n\t\t\t\t\t\tcds--pagination__button--forward\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--pagination__button--no-index': currentPage >= lastPage || disabled\n\t\t\t\t\t}\"\n\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t[attr.aria-label]=\"forwardText.subject | async\"\n\t\t\t\t\t(click)=\"selectPage.emit(nextPage)\"\n\t\t\t\t\t[disabled]=\"(currentPage >= lastPage || disabled ? true : null)\">\n\t\t\t\t\t<svg cdsIcon=\"caret--right\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t\t</button>\n\t\t\t</div>\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@Input() model: PaginationModel;\n\t/**\n \t * Set to `true` to disable the backward/forward buttons.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` to disable the select box that changes the page.\n\t */\n\t@Input() pageInputDisabled = false;\n\t/**\n\t * Controls wether or not to show the page selects\n\t */\n\t@Input() showPageInput = true;\n\t/**\n\t * Set to `true` if the total number of items is unknown.\n\t */\n\t@Input() pagesUnknown = false;\n\t@Input() pageSelectThreshold = 1000;\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_UNKNOWN\": \"{{start}}-{{end}} items\",\n\t *\t\t\"TOTAL_ITEMS\": \"{{start}}-{{end}} of {{total}} items\",\n\t *\t\t\"TOTAL_ITEM\": \"{{start}}-{{end}} of {{total}} item\",\n\t *\t\t\"OF_LAST_PAGES\": \"of {{last}} pages\",\n\t *\t\t\"OF_LAST_PAGE\": \"of {{last}} page\"\n\t * }\n\t * ```\n\t */\n\t@Input()\n\tset translations (value: PaginationTranslations) {\n\t\tconst valueWithDefaults = merge(this.i18n.getMultiple(\"PAGINATION\"), value);\n\t\tthis.itemsPerPageText.override(valueWithDefaults.ITEMS_PER_PAGE);\n\t\tthis.optionsListText.override(valueWithDefaults.OPEN_LIST_OF_OPTIONS);\n\t\tthis.backwardText.override(valueWithDefaults.BACKWARD);\n\t\tthis.forwardText.override(valueWithDefaults.FORWARD);\n\t\tthis.totalItemsText.override(valueWithDefaults.TOTAL_ITEMS);\n\t\tthis.totalItemText.override(valueWithDefaults.TOTAL_ITEM);\n\t\tthis.totalItemsUnknownText.override(valueWithDefaults.TOTAL_ITEMS_UNKNOWN);\n\t\tthis.pageText.override(valueWithDefaults.PAGE);\n\t\tthis.ofLastPagesText.override(valueWithDefaults.OF_LAST_PAGES);\n\t\tthis.ofLastPageText.override(valueWithDefaults.OF_LAST_PAGE);\n\t}\n\n\t/**\n\t * Options for items per page select\n\t *\n\t * A default array of options will be defined: [10, 20, 30, 40, 50]\n\t */\n\t@Input() itemsPerPageOptions: number[] = [10, 20, 30, 40, 50];\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\n\tget totalDataLength() {\n\t\treturn this.model.totalDataLength;\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.totalDataLength / this.itemsPerPage);\n\t\treturn last > 0 ? last : 1;\n\t}\n\n\tget startItemIndex() {\n\t\treturn this.endItemIndex > 0 ? (this.currentPage - 1) * this.itemsPerPage + 1 : 0;\n\t}\n\n\tget endItemIndex() {\n\t\tconst projectedEndItemIndex = this.currentPage * this.itemsPerPage;\n\n\t\treturn projectedEndItemIndex < this.totalDataLength ? projectedEndItemIndex : this.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 pageOptions() {\n\t\tif (this.totalDataLength && this._pageOptions.length !== this.totalDataLength) {\n\t\t\tthis._pageOptions = Array(Math.ceil(this.totalDataLength / this.itemsPerPage));\n\t\t}\n\t\treturn this._pageOptions;\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.getOverridable(\"PAGINATION.ITEMS_PER_PAGE\");\n\toptionsListText = this.i18n.getOverridable(\"PAGINATION.OPEN_LIST_OF_OPTIONS\");\n\tbackwardText = this.i18n.getOverridable(\"PAGINATION.BACKWARD\");\n\tforwardText = this.i18n.getOverridable(\"PAGINATION.FORWARD\");\n\ttotalItemsText = this.i18n.getOverridable(\"PAGINATION.TOTAL_ITEMS\");\n\ttotalItemText = this.i18n.getOverridable(\"PAGINATION.TOTAL_ITEM\");\n\ttotalItemsUnknownText = this.i18n.getOverridable(\"PAGINATION.TOTAL_ITEMS_UNKNOWN\");\n\tpageText = this.i18n.getOverridable(\"PAGINATION.PAGE\");\n\tofLastPagesText = this.i18n.getOverridable(\"PAGINATION.OF_LAST_PAGES\");\n\tofLastPageText = this.i18n.getOverridable(\"PAGINATION.OF_LAST_PAGE\");\n\n\tprotected _pageOptions = [];\n\n\tconstructor(protected i18n: I18n, protected experimental: ExperimentalService) {\n\t\tPagination.paginationCounter++;\n\t}\n}\n",
             "properties": [
                 {
                     "name": "BACKWARD",
@@ -29662,7 +29662,7 @@
         },
         {
             "name": "FileUploader",
-            "id": "component-FileUploader-19bb5892e53b5b245c1042c78ba3e0281b1eda0f23a73637f0e690da171cf77bd5ff9742e303e1a381c0d392ac43927cb74697ca49ece7bd7d052bd907740d25",
+            "id": "component-FileUploader-c42e41aebece5a9dc08bb7f9735c415d091ad55d29c1d5bc252f029f3c302efa90e539c04a223a19f8af53e2d9a544579d1f935df8aa5b314a6f02d5349fa0a6",
             "file": "src/file-uploader/file-uploader.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -29933,7 +29933,7 @@
                     "optional": false,
                     "returnType": "boolean",
                     "typeParameters": [],
-                    "line": 280,
+                    "line": 286,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "modifierKind": [
@@ -29974,7 +29974,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 237,
+                    "line": 240,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -30030,7 +30030,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 243,
+                    "line": 246,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -30068,7 +30068,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 293,
+                    "line": 299,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets a method in order to propagate changes back to the form.\n",
@@ -30098,7 +30098,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 287,
+                    "line": 293,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nRegisters the injected function to control the touch use of the `FileUploader`.\n",
@@ -30128,7 +30128,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 267,
+                    "line": 273,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -30156,7 +30156,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 304,
+                    "line": 310,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\n`ControlValueAccessor` method to programmatically disable the checkbox.\n\nex: `this.formGroup.get(\"myFileUploader\").disable();`\n\n",
@@ -30164,8 +30164,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 7652,
-                                "end": 7662,
+                                "pos": 7728,
+                                "end": 7738,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -30176,8 +30176,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 7646,
-                                "end": 7651,
+                                "pos": 7722,
+                                "end": 7727,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -30228,7 +30228,7 @@
             "description": "<p><a href=\"../../?path=/story/components-file-uploader--basic\">See demo</a></p>\n",
             "rawdescription": "\n\n[See demo](../../?path=/story/components-file-uploader--basic)\n",
             "type": "component",
-            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tViewChild,\n\tEventEmitter,\n\tTemplateRef\n} from \"@angular/core\";\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from \"@angular/forms\";\n\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { FileItem } from \"./file-item.interface\";\n\nconst noop = () => { };\n\n/**\n * [See demo](../../?path=/story/components-file-uploader--basic)\n */\n@Component({\n\tselector: \"cds-file-uploader, ibm-file-uploader\",\n\ttemplate: `\n\t\t<ng-container *ngIf=\"!skeleton; else skeletonTemplate\">\n\t\t\t<label [for]=\"fileUploaderId\" class=\"cds--file--label\">{{title}}</label>\n\t\t\t<p class=\"cds--label-description\">{{description}}</p>\n\t\t\t<div class=\"cds--file\">\n\t\t\t\t<label\n\t\t\t\t\t*ngIf=\"drop\"\n\t\t\t\t\tclass=\"cds--file-browse-btn\"\n\t\t\t\t\t(keyup.enter)=\"fileInput.click()\"\n\t\t\t\t\t(keyup.space)=\"fileInput.click()\"\n\t\t\t\t\t[ngClass]=\"{'cds--file-browse-btn--disabled': disabled}\"\n\t\t\t\t\ttabindex=\"0\">\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass=\"cds--file__drop-container\"\n\t\t\t\t\t\t[ngClass]=\"{'cds--file__drop-container--drag-over': dragOver}\"\n\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\t(click)=\"fileInput.click()\"\n\t\t\t\t\t\t[attr.for]=\"fileUploaderId\"\n\t\t\t\t\t\t(dragover)=\"onDragOver($event)\"\n\t\t\t\t\t\t(dragleave)=\"onDragLeave($event)\"\n\t\t\t\t\t\t(drop)=\"onDrop($event)\">\n\t\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(dropText)\">{{dropText}}</ng-container>\n\t\t\t\t\t\t<ng-template *ngIf=\"isTemplate(dropText)\" [ngTemplateOutlet]=\"dropText\"></ng-template>\n\t\t\t\t\t</div>\n\t\t\t\t</label>\n\t\t\t\t<button\n\t\t\t\t\t*ngIf=\"!drop\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t[cdsButton]=\"buttonType\"\n\t\t\t\t\t(click)=\"fileInput.click()\"\n\t\t\t\t\t[attr.for]=\"fileUploaderId\"\n\t\t\t\t\t[size]=\"size\"\n\t\t\t\t\t[disabled]=\"disabled\">\n\t\t\t\t\t{{buttonText}}\n\t\t\t\t</button>\n\t\t\t\t<input\n\t\t\t\t\t#fileInput\n\t\t\t\t\ttype=\"file\"\n\t\t\t\t\tclass=\"cds--file-input\"\n\t\t\t\t\t[accept]=\"accept\"\n\t\t\t\t\t[id]=\"fileUploaderId\"\n\t\t\t\t\t[multiple]=\"multiple\"\n\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\t(change)=\"onFilesAdded()\"\n\t\t\t\t\t[disabled]=\"disabled\"/>\n\t\t\t\t<div class=\"cds--file-container\">\n\t\t\t\t\t<ng-container *ngFor=\"let fileItem of files\">\n\t\t\t\t\t\t<cds-file\n\t\t\t\t\t\t\t[fileItem]=\"fileItem\"\n\t\t\t\t\t\t\t(remove)=\"removeFile(fileItem)\"\n\t\t\t\t\t\t\t[size]=\"fileItemSize\">\n\t\t\t\t\t\t</cds-file>\n\t\t\t\t\t</ng-container>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</ng-container>\n\n\t\t<ng-template #skeletonTemplate>\n\t\t\t<div class=\"cds--skeleton__text\" style=\"width: 100px\"></div>\n\t\t\t<div class=\"cds--skeleton__text\" style=\"width: 225px\"></div>\n\t\t\t<button cdsButton skeleton=\"true\"></button>\n\t\t</ng-template>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: FileUploader,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class FileUploader implements ControlValueAccessor {\n\t/**\n\t * Counter used to create unique ids for file-uploader components\n\t */\n\tstatic fileUploaderCount = 0;\n\t/**\n\t * Accessible text for the button that opens the upload window.\n\t *\n\t * Defaults to the `FILE_UPLOADER.OPEN` value from the i18n service\n\t */\n\t@Input() buttonText = this.i18n.get().FILE_UPLOADER.OPEN;\n\t/**\n\t * Type set for button\n\t */\n\t@Input() buttonType: \"primary\" | \"secondary\" | \"tertiary\" | \"ghost\" | \"danger\" = \"primary\";\n\t/**\n\t * Text set to the title\n\t */\n\t@Input() title: string;\n\t/**\n\t * Text set to the description\n\t */\n\t@Input() description: string;\n\t/**\n\t * Specify the types of files that the input should be able to receive\n\t */\n\t@Input() accept = [];\n\t/**\n\t * Set to `false` to tell the component to only accept a single file on upload.\n\t *\n\t * Defaults to `true`. Accepts multiple files.\n\t */\n\t@Input() multiple = true;\n\t/**\n\t * Set to `true` for a loading file uploader.\n\t */\n\t@Input() skeleton = false;\n\t/**\n\t * Sets the size of the button.\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\";\n\t/**\n\t * Sets the size of the file items\n\t */\n\t@Input() fileItemSize: \"sm\" | \"md\" | \"lg\" = \"lg\";\n\t/**\n\t * Set to `true` to enable drag and drop.\n\t */\n\t@Input() drop = false;\n\t/**\n\t * Sets the text shown in drag and drop box.\n\t */\n\t@Input() dropText: string | TemplateRef<any>;\n\t/**\n\t * Provides a unique id for the underlying `<input>` node\n\t */\n\t@Input() fileUploaderId = `file-uploader-${FileUploader.fileUploaderCount}`;\n\t/**\n\t * Maintains a reference to the view DOM element of the underlying <input> node\n\t */\n\t@ViewChild(\"fileInput\") fileInput;\n\t/**\n\t * The list of files that have been submitted to be uploaded\n\t */\n\t@Input() files = new Set<FileItem>();\n\t/**\n\t * Set to `true` to disable upload button\n\t */\n\t@Input() disabled = false;\n\n\t@Output() filesChange = new EventEmitter<any>();\n\n\t/**\n\t * Controls the state of the drag and drop file container\n\t */\n\tpublic dragOver = false;\n\n\tprotected onTouchedCallback: () => void = noop;\n\tprotected onChangeCallback: (_: Set<FileItem>) => void = noop;\n\n\tconstructor(protected i18n: I18n) {\n\t\tFileUploader.fileUploaderCount++;\n\t}\n\n\t/**\n\t * Specifies the property to be used as the return value to `ngModel` and reactive forms.\n\t * Updates `this.files`.\n\t */\n\tget value(): Set<FileItem> {\n\t\treturn this.files;\n\t}\n\tset value(v: Set<FileItem>) {\n\t\tif (v !== this.files) {\n\t\t\tthis.files = v;\n\t\t\tthis.onChangeCallback(v);\n\t\t}\n\t}\n\n\tonBlur() {\n\t\tthis.onTouchedCallback();\n\t}\n\n\tget fileList() {\n\t\treturn Array.from(this.fileInput.nativeElement.files);\n\t}\n\n\t/**\n\t * Propagates the injected `value`.\n\t */\n\twriteValue(value: Set<FileItem>) {\n\t\tif (value !== this.value) {\n\t\t\tthis.files = value;\n\t\t}\n\t}\n\n\tcreateFileItem(file): FileItem {\n\t\treturn {\n\t\t\tuploaded: false,\n\t\t\tstate: \"edit\",\n\t\t\tinvalid: false,\n\t\t\tinvalidText: \"\",\n\t\t\tfile: file\n\t\t};\n\t}\n\n\tonFilesAdded() {\n\t\tconst newFiles = new Set<FileItem>(this.files);\n\t\tif (!this.multiple) {\n\t\t\tnewFiles.clear();\n\t\t}\n\t\tfor (let file of this.fileList) {\n\t\t\tconst fileItem = this.createFileItem(file);\n\t\t\tnewFiles.add(fileItem);\n\t\t}\n\n\t\tthis.value = newFiles;\n\t\tthis.filesChange.emit(newFiles);\n\t}\n\n\tonDragOver(event) {\n\t\tevent.stopPropagation();\n\t\tevent.preventDefault();\n\t\tthis.dragOver = true;\n\t}\n\n\tonDragLeave(event) {\n\t\tevent.stopPropagation();\n\t\tevent.preventDefault();\n\t\tthis.dragOver = false;\n\t}\n\n\tonDrop(event) {\n\t\tevent.stopPropagation();\n\t\tevent.preventDefault();\n\n\t\tconst transferredFiles: Array<File> = Array.from(event.dataTransfer.files);\n\t\tconst newFiles = new Set<FileItem>(this.files);\n\n\t\ttransferredFiles.filter(({ name, type }) => {\n\t\t\t// Get the file extension and add a \".\" to the beginning.\n\t\t\tconst fileExtension = name.split(\".\").pop().replace(/^/, \".\");\n\t\t\t// Check if the accept array contains the mime type or extension of the file.\n\t\t\treturn this.accept.includes(type) || this.accept.includes(fileExtension) || !this.accept.length;\n\t\t}).forEach(file => {\n\t\t\tif (!newFiles.size || this.multiple) {\n\t\t\t\tconst fileItem = this.createFileItem(file);\n\t\t\t\tnewFiles.add(fileItem);\n\t\t\t}\n\t\t});\n\n\t\tthis.value = newFiles;\n\t\tthis.filesChange.emit(newFiles);\n\t\tthis.dragOver = false;\n\t}\n\n\tremoveFile(fileItem) {\n\t\t// Deleting an item from this.files removes the <ibm-file> component,\n\t\t// which triggers its ngOnDestroy(), which fires the (remove) event again.\n\t\t// So, (remove) may double-fire and we need to handle it here.\n\t\tif (this.files && this.files.has(fileItem)) {\n\t\t\tconst newFiles = new Set<FileItem>(this.files);\n\t\t\tnewFiles.delete(fileItem);\n\t\t\tthis.filesChange.emit(newFiles);\n\t\t\tthis.value = newFiles;\n\t\t}\n\t\tthis.fileInput.nativeElement.value = \"\";\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\t/**\n\t * Registers the injected function to control the touch use of the `FileUploader`.\n\t */\n\tregisterOnTouched(fn: any) {\n\t\tthis.onTouchedCallback = fn;\n\t}\n\t/**\n\t * Sets a method in order to propagate changes back to the form.\n\t */\n\tregisterOnChange(fn: any) {\n\t\tthis.onChangeCallback = fn;\n\t}\n\n\t/**\n\t * `ControlValueAccessor` method to programmatically disable the checkbox.\n\t *\n\t * ex: `this.formGroup.get(\"myFileUploader\").disable();`\n\t *\n\t * @param isDisabled `true` to disable the file uploader\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n}\n",
+            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tViewChild,\n\tEventEmitter,\n\tTemplateRef\n} from \"@angular/core\";\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from \"@angular/forms\";\n\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { FileItem } from \"./file-item.interface\";\n\nconst noop = () => { };\n\n/**\n * [See demo](../../?path=/story/components-file-uploader--basic)\n */\n@Component({\n\tselector: \"cds-file-uploader, ibm-file-uploader\",\n\ttemplate: `\n\t\t<ng-container *ngIf=\"!skeleton; else skeletonTemplate\">\n\t\t\t<label [for]=\"fileUploaderId\" class=\"cds--file--label\">{{title}}</label>\n\t\t\t<p class=\"cds--label-description\">{{description}}</p>\n\t\t\t<div class=\"cds--file\">\n\t\t\t\t<label\n\t\t\t\t\t*ngIf=\"drop\"\n\t\t\t\t\tclass=\"cds--file-browse-btn\"\n\t\t\t\t\t(keyup.enter)=\"fileInput.click()\"\n\t\t\t\t\t(keyup.space)=\"fileInput.click()\"\n\t\t\t\t\t[ngClass]=\"{'cds--file-browse-btn--disabled': disabled}\"\n\t\t\t\t\ttabindex=\"0\">\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass=\"cds--file__drop-container\"\n\t\t\t\t\t\t[ngClass]=\"{'cds--file__drop-container--drag-over': dragOver}\"\n\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\t(click)=\"fileInput.click()\"\n\t\t\t\t\t\t[attr.for]=\"fileUploaderId\"\n\t\t\t\t\t\t(dragover)=\"onDragOver($event)\"\n\t\t\t\t\t\t(dragleave)=\"onDragLeave($event)\"\n\t\t\t\t\t\t(drop)=\"onDrop($event)\">\n\t\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(dropText)\">{{dropText}}</ng-container>\n\t\t\t\t\t\t<ng-template *ngIf=\"isTemplate(dropText)\" [ngTemplateOutlet]=\"dropText\"></ng-template>\n\t\t\t\t\t</div>\n\t\t\t\t</label>\n\t\t\t\t<button\n\t\t\t\t\t*ngIf=\"!drop\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t[cdsButton]=\"buttonType\"\n\t\t\t\t\t(click)=\"fileInput.click()\"\n\t\t\t\t\t[attr.for]=\"fileUploaderId\"\n\t\t\t\t\t[size]=\"size\"\n\t\t\t\t\t[disabled]=\"disabled\">\n\t\t\t\t\t{{buttonText}}\n\t\t\t\t</button>\n\t\t\t\t<input\n\t\t\t\t\t#fileInput\n\t\t\t\t\ttype=\"file\"\n\t\t\t\t\tclass=\"cds--file-input\"\n\t\t\t\t\t[accept]=\"accept\"\n\t\t\t\t\t[id]=\"fileUploaderId\"\n\t\t\t\t\t[multiple]=\"multiple\"\n\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\t(change)=\"onFilesAdded()\"\n\t\t\t\t\t[disabled]=\"disabled\"/>\n\t\t\t\t<div class=\"cds--file-container\">\n\t\t\t\t\t<ng-container *ngFor=\"let fileItem of files\">\n\t\t\t\t\t\t<cds-file\n\t\t\t\t\t\t\t[fileItem]=\"fileItem\"\n\t\t\t\t\t\t\t(remove)=\"removeFile(fileItem)\"\n\t\t\t\t\t\t\t[size]=\"fileItemSize\">\n\t\t\t\t\t\t</cds-file>\n\t\t\t\t\t</ng-container>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</ng-container>\n\n\t\t<ng-template #skeletonTemplate>\n\t\t\t<div class=\"cds--skeleton__text\" style=\"width: 100px\"></div>\n\t\t\t<div class=\"cds--skeleton__text\" style=\"width: 225px\"></div>\n\t\t\t<button cdsButton skeleton=\"true\"></button>\n\t\t</ng-template>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: FileUploader,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class FileUploader implements ControlValueAccessor {\n\t/**\n\t * Counter used to create unique ids for file-uploader components\n\t */\n\tstatic fileUploaderCount = 0;\n\t/**\n\t * Accessible text for the button that opens the upload window.\n\t *\n\t * Defaults to the `FILE_UPLOADER.OPEN` value from the i18n service\n\t */\n\t@Input() buttonText = this.i18n.get().FILE_UPLOADER.OPEN;\n\t/**\n\t * Type set for button\n\t */\n\t@Input() buttonType: \"primary\" | \"secondary\" | \"tertiary\" | \"ghost\" | \"danger\" = \"primary\";\n\t/**\n\t * Text set to the title\n\t */\n\t@Input() title: string;\n\t/**\n\t * Text set to the description\n\t */\n\t@Input() description: string;\n\t/**\n\t * Specify the types of files that the input should be able to receive\n\t */\n\t@Input() accept = [];\n\t/**\n\t * Set to `false` to tell the component to only accept a single file on upload.\n\t *\n\t * Defaults to `true`. Accepts multiple files.\n\t */\n\t@Input() multiple = true;\n\t/**\n\t * Set to `true` for a loading file uploader.\n\t */\n\t@Input() skeleton = false;\n\t/**\n\t * Sets the size of the button.\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\";\n\t/**\n\t * Sets the size of the file items\n\t */\n\t@Input() fileItemSize: \"sm\" | \"md\" | \"lg\" = \"lg\";\n\t/**\n\t * Set to `true` to enable drag and drop.\n\t */\n\t@Input() drop = false;\n\t/**\n\t * Sets the text shown in drag and drop box.\n\t */\n\t@Input() dropText: string | TemplateRef<any>;\n\t/**\n\t * Provides a unique id for the underlying `<input>` node\n\t */\n\t@Input() fileUploaderId = `file-uploader-${FileUploader.fileUploaderCount}`;\n\t/**\n\t * Maintains a reference to the view DOM element of the underlying <input> node\n\t */\n\t@ViewChild(\"fileInput\") fileInput;\n\t/**\n\t * The list of files that have been submitted to be uploaded\n\t */\n\t@Input() files = new Set<FileItem>();\n\t/**\n\t * Set to `true` to disable upload button\n\t */\n\t@Input() disabled = false;\n\n\t@Output() filesChange = new EventEmitter<any>();\n\n\t/**\n\t * Controls the state of the drag and drop file container\n\t */\n\tpublic dragOver = false;\n\n\tprotected onTouchedCallback: () => void = noop;\n\tprotected onChangeCallback: (_: Set<FileItem>) => void = noop;\n\n\tconstructor(protected i18n: I18n) {\n\t\tFileUploader.fileUploaderCount++;\n\t}\n\n\t/**\n\t * Specifies the property to be used as the return value to `ngModel` and reactive forms.\n\t * Updates `this.files`.\n\t */\n\tget value(): Set<FileItem> {\n\t\treturn this.files;\n\t}\n\tset value(v: Set<FileItem>) {\n\t\tif (v !== this.files) {\n\t\t\tthis.files = v;\n\t\t\tthis.onChangeCallback(v);\n\t\t}\n\t}\n\n\tonBlur() {\n\t\tthis.onTouchedCallback();\n\t}\n\n\tget fileList() {\n\t\treturn Array.from(this.fileInput.nativeElement.files);\n\t}\n\n\t/**\n\t * Propagates the injected `value`.\n\t */\n\twriteValue(value: Set<FileItem>) {\n\t\tif (value !== this.value) {\n\t\t\tthis.files = value;\n\t\t}\n\t}\n\n\tcreateFileItem(file): FileItem {\n\t\treturn {\n\t\t\tuploaded: false,\n\t\t\tstate: \"edit\",\n\t\t\tinvalid: false,\n\t\t\tinvalidText: \"\",\n\t\t\tfile: file\n\t\t};\n\t}\n\n\tonFilesAdded() {\n\t\tconst newFiles = new Set<FileItem>(this.files);\n\t\tif (!this.multiple) {\n\t\t\tnewFiles.clear();\n\t\t}\n\t\tfor (let file of this.fileList) {\n\t\t\tconst fileItem = this.createFileItem(file);\n\t\t\tnewFiles.add(fileItem);\n\t\t}\n\n\t\tthis.value = newFiles;\n\t\tthis.filesChange.emit(newFiles);\n\t}\n\n\tonDragOver(event) {\n\t\tevent.stopPropagation();\n\t\tevent.preventDefault();\n\t\tif (this.disabled) {\n\t\t\treturn;\n\t\t}\n\t\tthis.dragOver = true;\n\t}\n\n\tonDragLeave(event) {\n\t\tevent.stopPropagation();\n\t\tevent.preventDefault();\n\t\tthis.dragOver = false;\n\t}\n\n\tonDrop(event) {\n\t\tevent.stopPropagation();\n\t\tevent.preventDefault();\n\t\tif (this.disabled) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst transferredFiles: Array<File> = Array.from(event.dataTransfer.files);\n\t\tconst newFiles = new Set<FileItem>(this.files);\n\n\t\ttransferredFiles.filter(({ name, type }) => {\n\t\t\t// Get the file extension and add a \".\" to the beginning.\n\t\t\tconst fileExtension = name.split(\".\").pop().replace(/^/, \".\");\n\t\t\t// Check if the accept array contains the mime type or extension of the file.\n\t\t\treturn this.accept.includes(type) || this.accept.includes(fileExtension) || !this.accept.length;\n\t\t}).forEach(file => {\n\t\t\tif (!newFiles.size || this.multiple) {\n\t\t\t\tconst fileItem = this.createFileItem(file);\n\t\t\t\tnewFiles.add(fileItem);\n\t\t\t}\n\t\t});\n\n\t\tthis.value = newFiles;\n\t\tthis.filesChange.emit(newFiles);\n\t\tthis.dragOver = false;\n\t}\n\n\tremoveFile(fileItem) {\n\t\t// Deleting an item from this.files removes the <ibm-file> component,\n\t\t// which triggers its ngOnDestroy(), which fires the (remove) event again.\n\t\t// So, (remove) may double-fire and we need to handle it here.\n\t\tif (this.files && this.files.has(fileItem)) {\n\t\t\tconst newFiles = new Set<FileItem>(this.files);\n\t\t\tnewFiles.delete(fileItem);\n\t\t\tthis.filesChange.emit(newFiles);\n\t\t\tthis.value = newFiles;\n\t\t}\n\t\tthis.fileInput.nativeElement.value = \"\";\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\t/**\n\t * Registers the injected function to control the touch use of the `FileUploader`.\n\t */\n\tregisterOnTouched(fn: any) {\n\t\tthis.onTouchedCallback = fn;\n\t}\n\t/**\n\t * Sets a method in order to propagate changes back to the form.\n\t */\n\tregisterOnChange(fn: any) {\n\t\tthis.onChangeCallback = fn;\n\t}\n\n\t/**\n\t * `ControlValueAccessor` method to programmatically disable the checkbox.\n\t *\n\t * ex: `this.formGroup.get(\"myFileUploader\").disable();`\n\t *\n\t * @param isDisabled `true` to disable the file uploader\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -38981,7 +38981,7 @@
         },
         {
             "name": "Pagination",
-            "id": "component-Pagination-aba8db2c7d2e16da513a54143fd003228c02176d38f56cbbd52a340eacb547d3fdbe0ed42cdf88f4ca7d2999e9d5e6066b09176ca161695a212d7cd1d881d21e",
+            "id": "component-Pagination-2740c2ca9a0ad984c5ba1ed0ddbf9cd614d0b50d0930a5716b728c2a340994b2d53b6fa9139325ea7a4539c9031d72d4bbc926ff0cb98bbddcfde242385e7d8e",
             "file": "src/pagination/pagination.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -38991,7 +38991,7 @@
             "selector": "cds-pagination, ibm-pagination",
             "styleUrls": [],
             "styles": [],
-            "template": "<div\n\tclass=\"cds--pagination\"\n\t[ngClass]=\"{\n\t\t'cds--skeleton': skeleton\n\t}\">\n\t<!-- left skeleton div -->\n\t<div *ngIf=\"skeleton\" class=\"cds--pagination__left\">\n\t\t<p class=\"cds--skeleton__text\" style=\"width: 70px\"></p>\n\t\t<p class=\"cds--skeleton__text\" style=\"width: 35px\"></p>\n\t\t<p class=\"cds--skeleton__text\" style=\"width: 105px\"></p>\n\t</div>\n\n\t<div *ngIf=\"!skeleton\" class=\"cds--pagination__left\">\n\t\t<ng-container *ngIf=\"showPageInput\">\n\t\t\t<label class=\"cds--pagination__text\" [for]=\"itemsPerPageSelectId\">\n\t\t\t\t{{itemsPerPageText.subject | async}}\n\t\t\t</label>\n\t\t\t<div\n\t\t\t\tclass=\"cds--select cds--select--inline cds--select__item-count\"\n\t\t\t\t[class.cds--select--disabled]=\"pageInputDisabled\">\n\t\t\t\t<select\n\t\t\t\t\t[id]=\"itemsPerPageSelectId\"\n\t\t\t\t\t[(ngModel)]=\"itemsPerPage\"\n\t\t\t\t\t[disabled]=\"pageInputDisabled\"\n\t\t\t\t\tclass=\"cds--select-input\">\n\t\t\t\t\t<option\n\t\t\t\t\t\tclass=\"cds--select-option\"\n\t\t\t\t\t\t*ngFor=\"let option of itemsPerPageOptions\"\n\t\t\t\t\t\t[value]=\"option\">\n\t\t\t\t\t\t\t{{ option }}\n\t\t\t\t\t</option>\n\t\t\t\t</select>\n\t\t\t\t<svg\n\t\t\t\t\tcdsIcon=\"chevron--down\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tstyle=\"display: inherit\"\n\t\t\t\t\tclass=\"cds--select__arrow\"\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t[attr.ariaLabel]=\"optionsListText.subject | async\">\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t</ng-container>\n\t\t<span *ngIf=\"!pagesUnknown && totalDataLength <= 1\" class=\"cds--pagination__text\" [ngStyle]=\"{'margin-left': showPageInput ? null : 0}\">\n\t\t\t{{totalItemText.subject | i18nReplace:{start: startItemIndex, end: endItemIndex, total: totalDataLength } | async}}\n\t\t</span>\n\t\t<span *ngIf=\"!pagesUnknown && totalDataLength > 1\" class=\"cds--pagination__text\" [ngStyle]=\"{'margin-left': showPageInput ? null : 0}\">\n\t\t\t{{totalItemsText.subject | i18nReplace:{start: startItemIndex, end: endItemIndex, total: totalDataLength } | async}}\n\t\t</span>\n\t\t<span *ngIf=\"pagesUnknown\" class=\"cds--pagination__text\" [ngStyle]=\"{'margin-left': showPageInput ? null : 0}\">\n\t\t\t{{totalItemsUnknownText.subject | i18nReplace:{start: startItemIndex, end: endItemIndex } | async}}\n\t\t</span>\n\t</div>\n\n\t<!-- right skeleton div -->\n\t<div *ngIf=\"skeleton\" class=\"cds--pagination__right\">\n\t\t<p class=\"cds--skeleton__text\" style=\"width: 70px\"></p>\n\t</div>\n\n\t<div *ngIf=\"!skeleton\" class=\"cds--pagination__right\">\n\t\t<span *ngIf=\"pagesUnknown\" class=\"cds--pagination__text cds--pagination__page-text\">\n\t\t\t<ng-container *ngIf=\"!showPageInput\">{{currentPage}}</ng-container>\n\t\t\t{{pageText.subject | async}}\n\t\t</span>\n\t\t<ng-container *ngIf=\"showPageInput\">\n\t\t\t<div\n\t\t\t\tclass=\"cds--select cds--select--inline cds--select__page-number\"\n\t\t\t\t[class.cds--select--disabled]=\"pageInputDisabled\">\n\t\t\t\t<label [for]=\"currentPageSelectId\" class=\"cds--label cds--visually-hidden\">{{pageText.subject | async}}</label>\n\t\t\t\t<input\n\t\t\t\t\t*ngIf=\"pageOptions.length > pageSelectThreshold\"\n\t\t\t\t\tstyle=\"padding-right: 1rem; margin-right: 1rem;\"\n\t\t\t\t\t[id]=\"currentPageSelectId\"\n\t\t\t\t\ttype=\"number\"\n\t\t\t\t\tmin=\"1\"\n\t\t\t\t\t[max]=\"pageOptions.length\"\n\t\t\t\t\tclass=\"cds--select-input\"\n\t\t\t\t\t[(ngModel)]=\"currentPage\">\n\t\t\t\t<select\n\t\t\t\t\t*ngIf=\"pageOptions.length <= pageSelectThreshold\"\n\t\t\t\t\t[id]=\"currentPageSelectId\"\n\t\t\t\t\tclass=\"cds--select-input\"\n\t\t\t\t\t[disabled]=\"pageInputDisabled\"\n\t\t\t\t\t[(ngModel)]=\"currentPage\">\n\t\t\t\t\t<option *ngFor=\"let page of pageOptions; let i = index;\" class=\"cds--select-option\" [value]=\"i + 1\">{{i + 1}}</option>\n\t\t\t\t</select>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"pageOptions.length <= 1000\"\n\t\t\t\t\tcdsIcon=\"chevron--down\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tstyle=\"display: inherit;\"\n\t\t\t\t\tclass=\"cds--select__arrow\"\n\t\t\t\t\t[attr.ariaLabel]=\"optionsListText.subject | async\">\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t</ng-container>\n\n\t\t<span *ngIf=\"!pagesUnknown && lastPage <= 1\" class=\"cds--pagination__text\">\n\t\t\t<ng-container *ngIf=\"!showPageInput\">{{currentPage}}</ng-container>\n\t\t\t{{ofLastPageText.subject | i18nReplace: {last: lastPage} | async}}\n\t\t</span>\n\t\t<span *ngIf=\"!pagesUnknown && lastPage > 1\" class=\"cds--pagination__text\">\n\t\t\t<ng-container *ngIf=\"!showPageInput\">{{currentPage}}</ng-container>\n\t\t\t{{ofLastPagesText.subject | i18nReplace: {last: lastPage} | async}}\n\t\t</span>\n\t\t<div class=\"cds--pagination__control-buttons\">\n\t\t\t<button\n\t\t\t\tcdsButton=\"ghost\"\n\t\t\t\ticonOnly=\"true\"\n\t\t\t\tclass=\"cds--pagination__button cds--pagination__button--backward\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--pagination__button--no-index': currentPage <= 1 || disabled\n\t\t\t\t}\"\n\t\t\t\ttabindex=\"0\"\n\t\t\t\t[attr.aria-label]=\"backwardText.subject | async\"\n\t\t\t\t(click)=\"selectPage.emit(previousPage)\"\n\t\t\t\t[disabled]=\"(currentPage <= 1 || disabled ? true : null)\">\n\t\t\t\t<svg cdsIcon=\"caret--left\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t</button>\n\n\t\t\t<button\n\t\t\t\tcdsButton=\"ghost\"\n\t\t\t\ticonOnly=\"true\"\n\t\t\t\tclass=\"\n\t\t\t\t\tcds--pagination__button\n\t\t\t\t\tcds--pagination__button--forward\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--pagination__button--no-index': currentPage >= lastPage || disabled\n\t\t\t\t}\"\n\t\t\t\ttabindex=\"0\"\n\t\t\t\t[attr.aria-label]=\"forwardText.subject | async\"\n\t\t\t\t(click)=\"selectPage.emit(nextPage)\"\n\t\t\t\t[disabled]=\"(currentPage >= lastPage || disabled ? true : null)\">\n\t\t\t\t<svg cdsIcon=\"caret--right\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t</button>\n\t\t</div>\n\t</div>\n</div>\n",
+            "template": "<div\n\tclass=\"cds--pagination\"\n\t[ngClass]=\"{\n\t\t'cds--skeleton': skeleton\n\t}\">\n\t<!-- left skeleton div -->\n\t<div *ngIf=\"skeleton\" class=\"cds--pagination__left\">\n\t\t<p class=\"cds--skeleton__text\" style=\"width: 70px\"></p>\n\t\t<p class=\"cds--skeleton__text\" style=\"width: 35px\"></p>\n\t\t<p class=\"cds--skeleton__text\" style=\"width: 105px\"></p>\n\t</div>\n\n\t<div *ngIf=\"!skeleton\" class=\"cds--pagination__left\">\n\t\t<ng-container *ngIf=\"showPageInput\">\n\t\t\t<label class=\"cds--pagination__text\" [for]=\"itemsPerPageSelectId\">\n\t\t\t\t{{itemsPerPageText.subject | async}}\n\t\t\t</label>\n\t\t\t<div\n\t\t\t\tclass=\"cds--select cds--select--inline cds--select__item-count\"\n\t\t\t\t[class.cds--select--disabled]=\"pageInputDisabled\">\n\t\t\t\t<select\n\t\t\t\t\t[id]=\"itemsPerPageSelectId\"\n\t\t\t\t\t[(ngModel)]=\"itemsPerPage\"\n\t\t\t\t\t[disabled]=\"pageInputDisabled\"\n\t\t\t\t\tclass=\"cds--select-input\">\n\t\t\t\t\t<option\n\t\t\t\t\t\tclass=\"cds--select-option\"\n\t\t\t\t\t\t*ngFor=\"let option of itemsPerPageOptions\"\n\t\t\t\t\t\t[value]=\"option\">\n\t\t\t\t\t\t\t{{ option }}\n\t\t\t\t\t</option>\n\t\t\t\t</select>\n\t\t\t\t<svg\n\t\t\t\t\tcdsIcon=\"chevron--down\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tstyle=\"display: inherit\"\n\t\t\t\t\tclass=\"cds--select__arrow\"\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t[attr.ariaLabel]=\"optionsListText.subject | async\">\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t</ng-container>\n\t\t<span *ngIf=\"!pagesUnknown && totalDataLength <= 1\" class=\"cds--pagination__text cds--pagination__items-count\" [ngStyle]=\"{'margin-left': showPageInput ? null : 0}\">\n\t\t\t{{totalItemText.subject | i18nReplace:{start: startItemIndex, end: endItemIndex, total: totalDataLength } | async}}\n\t\t</span>\n\t\t<span *ngIf=\"!pagesUnknown && totalDataLength > 1\" class=\"cds--pagination__text cds--pagination__items-count\" [ngStyle]=\"{'margin-left': showPageInput ? null : 0}\">\n\t\t\t{{totalItemsText.subject | i18nReplace:{start: startItemIndex, end: endItemIndex, total: totalDataLength } | async}}\n\t\t</span>\n\t\t<span *ngIf=\"pagesUnknown\" class=\"cds--pagination__text cds--pagination__items-count\" [ngStyle]=\"{'margin-left': showPageInput ? null : 0}\">\n\t\t\t{{totalItemsUnknownText.subject | i18nReplace:{start: startItemIndex, end: endItemIndex } | async}}\n\t\t</span>\n\t</div>\n\n\t<!-- right skeleton div -->\n\t<div *ngIf=\"skeleton\" class=\"cds--pagination__right\">\n\t\t<p class=\"cds--skeleton__text\" style=\"width: 70px\"></p>\n\t</div>\n\n\t<div *ngIf=\"!skeleton\" class=\"cds--pagination__right\">\n\t\t<span *ngIf=\"pagesUnknown\" class=\"cds--pagination__text cds--pagination__page-text\">\n\t\t\t<ng-container *ngIf=\"!showPageInput\">{{currentPage}}</ng-container>\n\t\t\t{{pageText.subject | async}}\n\t\t</span>\n\t\t<ng-container *ngIf=\"showPageInput\">\n\t\t\t<div\n\t\t\t\tclass=\"cds--select cds--select--inline cds--select__page-number\"\n\t\t\t\t[class.cds--select--disabled]=\"pageInputDisabled\">\n\t\t\t\t<label [for]=\"currentPageSelectId\" class=\"cds--label cds--visually-hidden\">{{pageText.subject | async}}</label>\n\t\t\t\t<input\n\t\t\t\t\t*ngIf=\"pageOptions.length > pageSelectThreshold\"\n\t\t\t\t\tstyle=\"padding-right: 1rem; margin-right: 1rem;\"\n\t\t\t\t\t[id]=\"currentPageSelectId\"\n\t\t\t\t\ttype=\"number\"\n\t\t\t\t\tmin=\"1\"\n\t\t\t\t\t[max]=\"pageOptions.length\"\n\t\t\t\t\tclass=\"cds--select-input\"\n\t\t\t\t\t[(ngModel)]=\"currentPage\">\n\t\t\t\t<select\n\t\t\t\t\t*ngIf=\"pageOptions.length <= pageSelectThreshold\"\n\t\t\t\t\t[id]=\"currentPageSelectId\"\n\t\t\t\t\tclass=\"cds--select-input\"\n\t\t\t\t\t[disabled]=\"pageInputDisabled\"\n\t\t\t\t\t[(ngModel)]=\"currentPage\">\n\t\t\t\t\t<option *ngFor=\"let page of pageOptions; let i = index;\" class=\"cds--select-option\" [value]=\"i + 1\">{{i + 1}}</option>\n\t\t\t\t</select>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"pageOptions.length <= 1000\"\n\t\t\t\t\tcdsIcon=\"chevron--down\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tstyle=\"display: inherit;\"\n\t\t\t\t\tclass=\"cds--select__arrow\"\n\t\t\t\t\t[attr.ariaLabel]=\"optionsListText.subject | async\">\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t</ng-container>\n\n\t\t<span *ngIf=\"!pagesUnknown && lastPage <= 1\" class=\"cds--pagination__text\">\n\t\t\t<ng-container *ngIf=\"!showPageInput\">{{currentPage}}</ng-container>\n\t\t\t{{ofLastPageText.subject | i18nReplace: {last: lastPage} | async}}\n\t\t</span>\n\t\t<span *ngIf=\"!pagesUnknown && lastPage > 1\" class=\"cds--pagination__text\">\n\t\t\t<ng-container *ngIf=\"!showPageInput\">{{currentPage}}</ng-container>\n\t\t\t{{ofLastPagesText.subject | i18nReplace: {last: lastPage} | async}}\n\t\t</span>\n\t\t<div class=\"cds--pagination__control-buttons\">\n\t\t\t<button\n\t\t\t\tcdsButton=\"ghost\"\n\t\t\t\ticonOnly=\"true\"\n\t\t\t\tclass=\"cds--pagination__button cds--pagination__button--backward\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--pagination__button--no-index': currentPage <= 1 || disabled\n\t\t\t\t}\"\n\t\t\t\ttabindex=\"0\"\n\t\t\t\t[attr.aria-label]=\"backwardText.subject | async\"\n\t\t\t\t(click)=\"selectPage.emit(previousPage)\"\n\t\t\t\t[disabled]=\"(currentPage <= 1 || disabled ? true : null)\">\n\t\t\t\t<svg cdsIcon=\"caret--left\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t</button>\n\n\t\t\t<button\n\t\t\t\tcdsButton=\"ghost\"\n\t\t\t\ticonOnly=\"true\"\n\t\t\t\tclass=\"\n\t\t\t\t\tcds--pagination__button\n\t\t\t\t\tcds--pagination__button--forward\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--pagination__button--no-index': currentPage >= lastPage || disabled\n\t\t\t\t}\"\n\t\t\t\ttabindex=\"0\"\n\t\t\t\t[attr.aria-label]=\"forwardText.subject | async\"\n\t\t\t\t(click)=\"selectPage.emit(nextPage)\"\n\t\t\t\t[disabled]=\"(currentPage >= lastPage || disabled ? true : null)\">\n\t\t\t\t<svg cdsIcon=\"caret--right\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t</button>\n\t\t</div>\n\t</div>\n</div>\n",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
@@ -39249,7 +39249,7 @@
             "description": "<p>Use pagination when you have multiple pages of data to handle.</p>\n<p><a href=\"../../?path=/story/components-pagination--basic\">See demo</a></p>\n<div><pre class=\"line-numbers\"><code class=\"language-html\">    &lt;cds-pagination [model]=&quot;model&quot; (selectPage)=&quot;selectPage($event)&quot;&gt;&lt;/cds-pagination&gt;</code></pre></div><p>In your <code>selectPage()</code> method set the <code>model.currentPage</code> to selected page, <em>after</em>\nyou load the page.</p>\n<div><pre class=\"line-numbers\"><code class=\"language-typescript\">selectPage(page) {\n    // ... your code to load the page goes here\n\n    this.model.currentPage = page;\n\n    // ... anything you want to do after page selection changes goes here\n}</code></pre></div>",
             "rawdescription": "\n\nUse pagination when you have multiple pages of data to handle.\n\n[See demo](../../?path=/story/components-pagination--basic)\n\n```html\n\t<cds-pagination [model]=\"model\" (selectPage)=\"selectPage($event)\"></cds-pagination>\n```\n\nIn your `selectPage()` method set the `model.currentPage` to selected page, _after_\nyou load the page.\n\n```typescript\nselectPage(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",
             "type": "component",
-            "sourceCode": "import { PaginationModel } from \"./pagination-model.class\";\nimport {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter\n} from \"@angular/core\";\n\nimport { I18n, Overridable } from \"carbon-components-angular/i18n\";\nimport { ExperimentalService } from \"carbon-components-angular/experimental\";\nimport { merge } from \"carbon-components-angular/utils\";\n\nexport interface PaginationTranslations {\n\tITEMS_PER_PAGE: string;\n\tOPEN_LIST_OF_OPTIONS: string;\n\tBACKWARD: string;\n\tFORWARD: string;\n\tTOTAL_ITEMS_UNKNOWN: string;\n\tTOTAL_ITEMS: string;\n\tTOTAL_ITEM: string;\n\tOF_LAST_PAGES: string;\n\tOF_LAST_PAGE: string;\n}\n\n/**\n * Use pagination when you have multiple pages of data to handle.\n *\n * [See demo](../../?path=/story/components-pagination--basic)\n *\n * ```html\n *\t<cds-pagination [model]=\"model\" (selectPage)=\"selectPage($event)\"></cds-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@Component({\n\tselector: \"cds-pagination, ibm-pagination\",\n\ttemplate: `\n\t<div\n\t\tclass=\"cds--pagination\"\n\t\t[ngClass]=\"{\n\t\t\t'cds--skeleton': skeleton\n\t\t}\">\n\t\t<!-- left skeleton div -->\n\t\t<div *ngIf=\"skeleton\" class=\"cds--pagination__left\">\n\t\t\t<p class=\"cds--skeleton__text\" style=\"width: 70px\"></p>\n\t\t\t<p class=\"cds--skeleton__text\" style=\"width: 35px\"></p>\n\t\t\t<p class=\"cds--skeleton__text\" style=\"width: 105px\"></p>\n\t\t</div>\n\n\t\t<div *ngIf=\"!skeleton\" class=\"cds--pagination__left\">\n\t\t\t<ng-container *ngIf=\"showPageInput\">\n\t\t\t\t<label class=\"cds--pagination__text\" [for]=\"itemsPerPageSelectId\">\n\t\t\t\t\t{{itemsPerPageText.subject | async}}\n\t\t\t\t</label>\n\t\t\t\t<div\n\t\t\t\t\tclass=\"cds--select cds--select--inline cds--select__item-count\"\n\t\t\t\t\t[class.cds--select--disabled]=\"pageInputDisabled\">\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\t[disabled]=\"pageInputDisabled\"\n\t\t\t\t\t\tclass=\"cds--select-input\">\n\t\t\t\t\t\t<option\n\t\t\t\t\t\t\tclass=\"cds--select-option\"\n\t\t\t\t\t\t\t*ngFor=\"let option of itemsPerPageOptions\"\n\t\t\t\t\t\t\t[value]=\"option\">\n\t\t\t\t\t\t\t\t{{ option }}\n\t\t\t\t\t\t</option>\n\t\t\t\t\t</select>\n\t\t\t\t\t<svg\n\t\t\t\t\t\tcdsIcon=\"chevron--down\"\n\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\tstyle=\"display: inherit\"\n\t\t\t\t\t\tclass=\"cds--select__arrow\"\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t[attr.ariaLabel]=\"optionsListText.subject | async\">\n\t\t\t\t\t</svg>\n\t\t\t\t</div>\n\t\t\t</ng-container>\n\t\t\t<span *ngIf=\"!pagesUnknown && totalDataLength <= 1\" class=\"cds--pagination__text\" [ngStyle]=\"{'margin-left': showPageInput ? null : 0}\">\n\t\t\t\t{{totalItemText.subject | i18nReplace:{start: startItemIndex, end: endItemIndex, total: totalDataLength } | async}}\n\t\t\t</span>\n\t\t\t<span *ngIf=\"!pagesUnknown && totalDataLength > 1\" class=\"cds--pagination__text\" [ngStyle]=\"{'margin-left': showPageInput ? null : 0}\">\n\t\t\t\t{{totalItemsText.subject | i18nReplace:{start: startItemIndex, end: endItemIndex, total: totalDataLength } | async}}\n\t\t\t</span>\n\t\t\t<span *ngIf=\"pagesUnknown\" class=\"cds--pagination__text\" [ngStyle]=\"{'margin-left': showPageInput ? null : 0}\">\n\t\t\t\t{{totalItemsUnknownText.subject | i18nReplace:{start: startItemIndex, end: endItemIndex } | async}}\n\t\t\t</span>\n\t\t</div>\n\n\t\t<!-- right skeleton div -->\n\t\t<div *ngIf=\"skeleton\" class=\"cds--pagination__right\">\n\t\t\t<p class=\"cds--skeleton__text\" style=\"width: 70px\"></p>\n\t\t</div>\n\n\t\t<div *ngIf=\"!skeleton\" class=\"cds--pagination__right\">\n\t\t\t<span *ngIf=\"pagesUnknown\" class=\"cds--pagination__text cds--pagination__page-text\">\n\t\t\t\t<ng-container *ngIf=\"!showPageInput\">{{currentPage}}</ng-container>\n\t\t\t\t{{pageText.subject | async}}\n\t\t\t</span>\n\t\t\t<ng-container *ngIf=\"showPageInput\">\n\t\t\t\t<div\n\t\t\t\t\tclass=\"cds--select cds--select--inline cds--select__page-number\"\n\t\t\t\t\t[class.cds--select--disabled]=\"pageInputDisabled\">\n\t\t\t\t\t<label [for]=\"currentPageSelectId\" class=\"cds--label cds--visually-hidden\">{{pageText.subject | async}}</label>\n\t\t\t\t\t<input\n\t\t\t\t\t\t*ngIf=\"pageOptions.length > pageSelectThreshold\"\n\t\t\t\t\t\tstyle=\"padding-right: 1rem; margin-right: 1rem;\"\n\t\t\t\t\t\t[id]=\"currentPageSelectId\"\n\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\tmin=\"1\"\n\t\t\t\t\t\t[max]=\"pageOptions.length\"\n\t\t\t\t\t\tclass=\"cds--select-input\"\n\t\t\t\t\t\t[(ngModel)]=\"currentPage\">\n\t\t\t\t\t<select\n\t\t\t\t\t\t*ngIf=\"pageOptions.length <= pageSelectThreshold\"\n\t\t\t\t\t\t[id]=\"currentPageSelectId\"\n\t\t\t\t\t\tclass=\"cds--select-input\"\n\t\t\t\t\t\t[disabled]=\"pageInputDisabled\"\n\t\t\t\t\t\t[(ngModel)]=\"currentPage\">\n\t\t\t\t\t\t<option *ngFor=\"let page of pageOptions; let i = index;\" class=\"cds--select-option\" [value]=\"i + 1\">{{i + 1}}</option>\n\t\t\t\t\t</select>\n\t\t\t\t\t<svg\n\t\t\t\t\t\t*ngIf=\"pageOptions.length <= 1000\"\n\t\t\t\t\t\tcdsIcon=\"chevron--down\"\n\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\tstyle=\"display: inherit;\"\n\t\t\t\t\t\tclass=\"cds--select__arrow\"\n\t\t\t\t\t\t[attr.ariaLabel]=\"optionsListText.subject | async\">\n\t\t\t\t\t</svg>\n\t\t\t\t</div>\n\t\t\t</ng-container>\n\n\t\t\t<span *ngIf=\"!pagesUnknown && lastPage <= 1\" class=\"cds--pagination__text\">\n\t\t\t\t<ng-container *ngIf=\"!showPageInput\">{{currentPage}}</ng-container>\n\t\t\t\t{{ofLastPageText.subject | i18nReplace: {last: lastPage} | async}}\n\t\t\t</span>\n\t\t\t<span *ngIf=\"!pagesUnknown && lastPage > 1\" class=\"cds--pagination__text\">\n\t\t\t\t<ng-container *ngIf=\"!showPageInput\">{{currentPage}}</ng-container>\n\t\t\t\t{{ofLastPagesText.subject | i18nReplace: {last: lastPage} | async}}\n\t\t\t</span>\n\t\t\t<div class=\"cds--pagination__control-buttons\">\n\t\t\t\t<button\n\t\t\t\t\tcdsButton=\"ghost\"\n\t\t\t\t\ticonOnly=\"true\"\n\t\t\t\t\tclass=\"cds--pagination__button cds--pagination__button--backward\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--pagination__button--no-index': currentPage <= 1 || disabled\n\t\t\t\t\t}\"\n\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t[attr.aria-label]=\"backwardText.subject | async\"\n\t\t\t\t\t(click)=\"selectPage.emit(previousPage)\"\n\t\t\t\t\t[disabled]=\"(currentPage <= 1 || disabled ? true : null)\">\n\t\t\t\t\t<svg cdsIcon=\"caret--left\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t\t</button>\n\n\t\t\t\t<button\n\t\t\t\t\tcdsButton=\"ghost\"\n\t\t\t\t\ticonOnly=\"true\"\n\t\t\t\t\tclass=\"\n\t\t\t\t\t\tcds--pagination__button\n\t\t\t\t\t\tcds--pagination__button--forward\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--pagination__button--no-index': currentPage >= lastPage || disabled\n\t\t\t\t\t}\"\n\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t[attr.aria-label]=\"forwardText.subject | async\"\n\t\t\t\t\t(click)=\"selectPage.emit(nextPage)\"\n\t\t\t\t\t[disabled]=\"(currentPage >= lastPage || disabled ? true : null)\">\n\t\t\t\t\t<svg cdsIcon=\"caret--right\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t\t</button>\n\t\t\t</div>\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@Input() model: PaginationModel;\n\t/**\n \t * Set to `true` to disable the backward/forward buttons.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` to disable the select box that changes the page.\n\t */\n\t@Input() pageInputDisabled = false;\n\t/**\n\t * Controls wether or not to show the page selects\n\t */\n\t@Input() showPageInput = true;\n\t/**\n\t * Set to `true` if the total number of items is unknown.\n\t */\n\t@Input() pagesUnknown = false;\n\t@Input() pageSelectThreshold = 1000;\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_UNKNOWN\": \"{{start}}-{{end}} items\",\n\t *\t\t\"TOTAL_ITEMS\": \"{{start}}-{{end}} of {{total}} items\",\n\t *\t\t\"TOTAL_ITEM\": \"{{start}}-{{end}} of {{total}} item\",\n\t *\t\t\"OF_LAST_PAGES\": \"of {{last}} pages\",\n\t *\t\t\"OF_LAST_PAGE\": \"of {{last}} page\"\n\t * }\n\t * ```\n\t */\n\t@Input()\n\tset translations (value: PaginationTranslations) {\n\t\tconst valueWithDefaults = merge(this.i18n.getMultiple(\"PAGINATION\"), value);\n\t\tthis.itemsPerPageText.override(valueWithDefaults.ITEMS_PER_PAGE);\n\t\tthis.optionsListText.override(valueWithDefaults.OPEN_LIST_OF_OPTIONS);\n\t\tthis.backwardText.override(valueWithDefaults.BACKWARD);\n\t\tthis.forwardText.override(valueWithDefaults.FORWARD);\n\t\tthis.totalItemsText.override(valueWithDefaults.TOTAL_ITEMS);\n\t\tthis.totalItemText.override(valueWithDefaults.TOTAL_ITEM);\n\t\tthis.totalItemsUnknownText.override(valueWithDefaults.TOTAL_ITEMS_UNKNOWN);\n\t\tthis.pageText.override(valueWithDefaults.PAGE);\n\t\tthis.ofLastPagesText.override(valueWithDefaults.OF_LAST_PAGES);\n\t\tthis.ofLastPageText.override(valueWithDefaults.OF_LAST_PAGE);\n\t}\n\n\t/**\n\t * Options for items per page select\n\t *\n\t * A default array of options will be defined: [10, 20, 30, 40, 50]\n\t */\n\t@Input() itemsPerPageOptions: number[] = [10, 20, 30, 40, 50];\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\n\tget totalDataLength() {\n\t\treturn this.model.totalDataLength;\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.totalDataLength / this.itemsPerPage);\n\t\treturn last > 0 ? last : 1;\n\t}\n\n\tget startItemIndex() {\n\t\treturn this.endItemIndex > 0 ? (this.currentPage - 1) * this.itemsPerPage + 1 : 0;\n\t}\n\n\tget endItemIndex() {\n\t\tconst projectedEndItemIndex = this.currentPage * this.itemsPerPage;\n\n\t\treturn projectedEndItemIndex < this.totalDataLength ? projectedEndItemIndex : this.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 pageOptions() {\n\t\tif (this.totalDataLength && this._pageOptions.length !== this.totalDataLength) {\n\t\t\tthis._pageOptions = Array(Math.ceil(this.totalDataLength / this.itemsPerPage));\n\t\t}\n\t\treturn this._pageOptions;\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.getOverridable(\"PAGINATION.ITEMS_PER_PAGE\");\n\toptionsListText = this.i18n.getOverridable(\"PAGINATION.OPEN_LIST_OF_OPTIONS\");\n\tbackwardText = this.i18n.getOverridable(\"PAGINATION.BACKWARD\");\n\tforwardText = this.i18n.getOverridable(\"PAGINATION.FORWARD\");\n\ttotalItemsText = this.i18n.getOverridable(\"PAGINATION.TOTAL_ITEMS\");\n\ttotalItemText = this.i18n.getOverridable(\"PAGINATION.TOTAL_ITEM\");\n\ttotalItemsUnknownText = this.i18n.getOverridable(\"PAGINATION.TOTAL_ITEMS_UNKNOWN\");\n\tpageText = this.i18n.getOverridable(\"PAGINATION.PAGE\");\n\tofLastPagesText = this.i18n.getOverridable(\"PAGINATION.OF_LAST_PAGES\");\n\tofLastPageText = this.i18n.getOverridable(\"PAGINATION.OF_LAST_PAGE\");\n\n\tprotected _pageOptions = [];\n\n\tconstructor(protected i18n: I18n, protected experimental: ExperimentalService) {\n\t\tPagination.paginationCounter++;\n\t}\n}\n",
+            "sourceCode": "import { PaginationModel } from \"./pagination-model.class\";\nimport {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter\n} from \"@angular/core\";\n\nimport { I18n, Overridable } from \"carbon-components-angular/i18n\";\nimport { ExperimentalService } from \"carbon-components-angular/experimental\";\nimport { merge } from \"carbon-components-angular/utils\";\n\nexport interface PaginationTranslations {\n\tITEMS_PER_PAGE: string;\n\tOPEN_LIST_OF_OPTIONS: string;\n\tBACKWARD: string;\n\tFORWARD: string;\n\tTOTAL_ITEMS_UNKNOWN: string;\n\tTOTAL_ITEMS: string;\n\tTOTAL_ITEM: string;\n\tOF_LAST_PAGES: string;\n\tOF_LAST_PAGE: string;\n}\n\n/**\n * Use pagination when you have multiple pages of data to handle.\n *\n * [See demo](../../?path=/story/components-pagination--basic)\n *\n * ```html\n *\t<cds-pagination [model]=\"model\" (selectPage)=\"selectPage($event)\"></cds-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@Component({\n\tselector: \"cds-pagination, ibm-pagination\",\n\ttemplate: `\n\t<div\n\t\tclass=\"cds--pagination\"\n\t\t[ngClass]=\"{\n\t\t\t'cds--skeleton': skeleton\n\t\t}\">\n\t\t<!-- left skeleton div -->\n\t\t<div *ngIf=\"skeleton\" class=\"cds--pagination__left\">\n\t\t\t<p class=\"cds--skeleton__text\" style=\"width: 70px\"></p>\n\t\t\t<p class=\"cds--skeleton__text\" style=\"width: 35px\"></p>\n\t\t\t<p class=\"cds--skeleton__text\" style=\"width: 105px\"></p>\n\t\t</div>\n\n\t\t<div *ngIf=\"!skeleton\" class=\"cds--pagination__left\">\n\t\t\t<ng-container *ngIf=\"showPageInput\">\n\t\t\t\t<label class=\"cds--pagination__text\" [for]=\"itemsPerPageSelectId\">\n\t\t\t\t\t{{itemsPerPageText.subject | async}}\n\t\t\t\t</label>\n\t\t\t\t<div\n\t\t\t\t\tclass=\"cds--select cds--select--inline cds--select__item-count\"\n\t\t\t\t\t[class.cds--select--disabled]=\"pageInputDisabled\">\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\t[disabled]=\"pageInputDisabled\"\n\t\t\t\t\t\tclass=\"cds--select-input\">\n\t\t\t\t\t\t<option\n\t\t\t\t\t\t\tclass=\"cds--select-option\"\n\t\t\t\t\t\t\t*ngFor=\"let option of itemsPerPageOptions\"\n\t\t\t\t\t\t\t[value]=\"option\">\n\t\t\t\t\t\t\t\t{{ option }}\n\t\t\t\t\t\t</option>\n\t\t\t\t\t</select>\n\t\t\t\t\t<svg\n\t\t\t\t\t\tcdsIcon=\"chevron--down\"\n\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\tstyle=\"display: inherit\"\n\t\t\t\t\t\tclass=\"cds--select__arrow\"\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t[attr.ariaLabel]=\"optionsListText.subject | async\">\n\t\t\t\t\t</svg>\n\t\t\t\t</div>\n\t\t\t</ng-container>\n\t\t\t<span *ngIf=\"!pagesUnknown && totalDataLength <= 1\" class=\"cds--pagination__text cds--pagination__items-count\" [ngStyle]=\"{'margin-left': showPageInput ? null : 0}\">\n\t\t\t\t{{totalItemText.subject | i18nReplace:{start: startItemIndex, end: endItemIndex, total: totalDataLength } | async}}\n\t\t\t</span>\n\t\t\t<span *ngIf=\"!pagesUnknown && totalDataLength > 1\" class=\"cds--pagination__text cds--pagination__items-count\" [ngStyle]=\"{'margin-left': showPageInput ? null : 0}\">\n\t\t\t\t{{totalItemsText.subject | i18nReplace:{start: startItemIndex, end: endItemIndex, total: totalDataLength } | async}}\n\t\t\t</span>\n\t\t\t<span *ngIf=\"pagesUnknown\" class=\"cds--pagination__text cds--pagination__items-count\" [ngStyle]=\"{'margin-left': showPageInput ? null : 0}\">\n\t\t\t\t{{totalItemsUnknownText.subject | i18nReplace:{start: startItemIndex, end: endItemIndex } | async}}\n\t\t\t</span>\n\t\t</div>\n\n\t\t<!-- right skeleton div -->\n\t\t<div *ngIf=\"skeleton\" class=\"cds--pagination__right\">\n\t\t\t<p class=\"cds--skeleton__text\" style=\"width: 70px\"></p>\n\t\t</div>\n\n\t\t<div *ngIf=\"!skeleton\" class=\"cds--pagination__right\">\n\t\t\t<span *ngIf=\"pagesUnknown\" class=\"cds--pagination__text cds--pagination__page-text\">\n\t\t\t\t<ng-container *ngIf=\"!showPageInput\">{{currentPage}}</ng-container>\n\t\t\t\t{{pageText.subject | async}}\n\t\t\t</span>\n\t\t\t<ng-container *ngIf=\"showPageInput\">\n\t\t\t\t<div\n\t\t\t\t\tclass=\"cds--select cds--select--inline cds--select__page-number\"\n\t\t\t\t\t[class.cds--select--disabled]=\"pageInputDisabled\">\n\t\t\t\t\t<label [for]=\"currentPageSelectId\" class=\"cds--label cds--visually-hidden\">{{pageText.subject | async}}</label>\n\t\t\t\t\t<input\n\t\t\t\t\t\t*ngIf=\"pageOptions.length > pageSelectThreshold\"\n\t\t\t\t\t\tstyle=\"padding-right: 1rem; margin-right: 1rem;\"\n\t\t\t\t\t\t[id]=\"currentPageSelectId\"\n\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\tmin=\"1\"\n\t\t\t\t\t\t[max]=\"pageOptions.length\"\n\t\t\t\t\t\tclass=\"cds--select-input\"\n\t\t\t\t\t\t[(ngModel)]=\"currentPage\">\n\t\t\t\t\t<select\n\t\t\t\t\t\t*ngIf=\"pageOptions.length <= pageSelectThreshold\"\n\t\t\t\t\t\t[id]=\"currentPageSelectId\"\n\t\t\t\t\t\tclass=\"cds--select-input\"\n\t\t\t\t\t\t[disabled]=\"pageInputDisabled\"\n\t\t\t\t\t\t[(ngModel)]=\"currentPage\">\n\t\t\t\t\t\t<option *ngFor=\"let page of pageOptions; let i = index;\" class=\"cds--select-option\" [value]=\"i + 1\">{{i + 1}}</option>\n\t\t\t\t\t</select>\n\t\t\t\t\t<svg\n\t\t\t\t\t\t*ngIf=\"pageOptions.length <= 1000\"\n\t\t\t\t\t\tcdsIcon=\"chevron--down\"\n\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\tstyle=\"display: inherit;\"\n\t\t\t\t\t\tclass=\"cds--select__arrow\"\n\t\t\t\t\t\t[attr.ariaLabel]=\"optionsListText.subject | async\">\n\t\t\t\t\t</svg>\n\t\t\t\t</div>\n\t\t\t</ng-container>\n\n\t\t\t<span *ngIf=\"!pagesUnknown && lastPage <= 1\" class=\"cds--pagination__text\">\n\t\t\t\t<ng-container *ngIf=\"!showPageInput\">{{currentPage}}</ng-container>\n\t\t\t\t{{ofLastPageText.subject | i18nReplace: {last: lastPage} | async}}\n\t\t\t</span>\n\t\t\t<span *ngIf=\"!pagesUnknown && lastPage > 1\" class=\"cds--pagination__text\">\n\t\t\t\t<ng-container *ngIf=\"!showPageInput\">{{currentPage}}</ng-container>\n\t\t\t\t{{ofLastPagesText.subject | i18nReplace: {last: lastPage} | async}}\n\t\t\t</span>\n\t\t\t<div class=\"cds--pagination__control-buttons\">\n\t\t\t\t<button\n\t\t\t\t\tcdsButton=\"ghost\"\n\t\t\t\t\ticonOnly=\"true\"\n\t\t\t\t\tclass=\"cds--pagination__button cds--pagination__button--backward\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--pagination__button--no-index': currentPage <= 1 || disabled\n\t\t\t\t\t}\"\n\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t[attr.aria-label]=\"backwardText.subject | async\"\n\t\t\t\t\t(click)=\"selectPage.emit(previousPage)\"\n\t\t\t\t\t[disabled]=\"(currentPage <= 1 || disabled ? true : null)\">\n\t\t\t\t\t<svg cdsIcon=\"caret--left\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t\t</button>\n\n\t\t\t\t<button\n\t\t\t\t\tcdsButton=\"ghost\"\n\t\t\t\t\ticonOnly=\"true\"\n\t\t\t\t\tclass=\"\n\t\t\t\t\t\tcds--pagination__button\n\t\t\t\t\t\tcds--pagination__button--forward\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--pagination__button--no-index': currentPage >= lastPage || disabled\n\t\t\t\t\t}\"\n\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t[attr.aria-label]=\"forwardText.subject | async\"\n\t\t\t\t\t(click)=\"selectPage.emit(nextPage)\"\n\t\t\t\t\t[disabled]=\"(currentPage >= lastPage || disabled ? true : null)\">\n\t\t\t\t\t<svg cdsIcon=\"caret--right\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t\t</button>\n\t\t\t</div>\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@Input() model: PaginationModel;\n\t/**\n \t * Set to `true` to disable the backward/forward buttons.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` to disable the select box that changes the page.\n\t */\n\t@Input() pageInputDisabled = false;\n\t/**\n\t * Controls wether or not to show the page selects\n\t */\n\t@Input() showPageInput = true;\n\t/**\n\t * Set to `true` if the total number of items is unknown.\n\t */\n\t@Input() pagesUnknown = false;\n\t@Input() pageSelectThreshold = 1000;\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_UNKNOWN\": \"{{start}}-{{end}} items\",\n\t *\t\t\"TOTAL_ITEMS\": \"{{start}}-{{end}} of {{total}} items\",\n\t *\t\t\"TOTAL_ITEM\": \"{{start}}-{{end}} of {{total}} item\",\n\t *\t\t\"OF_LAST_PAGES\": \"of {{last}} pages\",\n\t *\t\t\"OF_LAST_PAGE\": \"of {{last}} page\"\n\t * }\n\t * ```\n\t */\n\t@Input()\n\tset translations (value: PaginationTranslations) {\n\t\tconst valueWithDefaults = merge(this.i18n.getMultiple(\"PAGINATION\"), value);\n\t\tthis.itemsPerPageText.override(valueWithDefaults.ITEMS_PER_PAGE);\n\t\tthis.optionsListText.override(valueWithDefaults.OPEN_LIST_OF_OPTIONS);\n\t\tthis.backwardText.override(valueWithDefaults.BACKWARD);\n\t\tthis.forwardText.override(valueWithDefaults.FORWARD);\n\t\tthis.totalItemsText.override(valueWithDefaults.TOTAL_ITEMS);\n\t\tthis.totalItemText.override(valueWithDefaults.TOTAL_ITEM);\n\t\tthis.totalItemsUnknownText.override(valueWithDefaults.TOTAL_ITEMS_UNKNOWN);\n\t\tthis.pageText.override(valueWithDefaults.PAGE);\n\t\tthis.ofLastPagesText.override(valueWithDefaults.OF_LAST_PAGES);\n\t\tthis.ofLastPageText.override(valueWithDefaults.OF_LAST_PAGE);\n\t}\n\n\t/**\n\t * Options for items per page select\n\t *\n\t * A default array of options will be defined: [10, 20, 30, 40, 50]\n\t */\n\t@Input() itemsPerPageOptions: number[] = [10, 20, 30, 40, 50];\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\n\tget totalDataLength() {\n\t\treturn this.model.totalDataLength;\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.totalDataLength / this.itemsPerPage);\n\t\treturn last > 0 ? last : 1;\n\t}\n\n\tget startItemIndex() {\n\t\treturn this.endItemIndex > 0 ? (this.currentPage - 1) * this.itemsPerPage + 1 : 0;\n\t}\n\n\tget endItemIndex() {\n\t\tconst projectedEndItemIndex = this.currentPage * this.itemsPerPage;\n\n\t\treturn projectedEndItemIndex < this.totalDataLength ? projectedEndItemIndex : this.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 pageOptions() {\n\t\tif (this.totalDataLength && this._pageOptions.length !== this.totalDataLength) {\n\t\t\tthis._pageOptions = Array(Math.ceil(this.totalDataLength / this.itemsPerPage));\n\t\t}\n\t\treturn this._pageOptions;\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.getOverridable(\"PAGINATION.ITEMS_PER_PAGE\");\n\toptionsListText = this.i18n.getOverridable(\"PAGINATION.OPEN_LIST_OF_OPTIONS\");\n\tbackwardText = this.i18n.getOverridable(\"PAGINATION.BACKWARD\");\n\tforwardText = this.i18n.getOverridable(\"PAGINATION.FORWARD\");\n\ttotalItemsText = this.i18n.getOverridable(\"PAGINATION.TOTAL_ITEMS\");\n\ttotalItemText = this.i18n.getOverridable(\"PAGINATION.TOTAL_ITEM\");\n\ttotalItemsUnknownText = this.i18n.getOverridable(\"PAGINATION.TOTAL_ITEMS_UNKNOWN\");\n\tpageText = this.i18n.getOverridable(\"PAGINATION.PAGE\");\n\tofLastPagesText = this.i18n.getOverridable(\"PAGINATION.OF_LAST_PAGES\");\n\tofLastPageText = this.i18n.getOverridable(\"PAGINATION.OF_LAST_PAGE\");\n\n\tprotected _pageOptions = [];\n\n\tconstructor(protected i18n: I18n, protected experimental: ExperimentalService) {\n\t\tPagination.paginationCounter++;\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",

package/docs/storybook/8341.a544f9e9.iframe.bundle.js ADDED Viewed

@@ -0,0 +1 @@

+ "use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[8341],{"./node_modules/@carbon/utils-position/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{var _a,PLACEMENTS;__webpack_require__.d(__webpack_exports__,{FK:()=>position,ZP:()=>__WEBPACK_DEFAULT_EXPORT__}),function(PLACEMENTS){PLACEMENTS.LEFT="left",PLACEMENTS.RIGHT="right",PLACEMENTS.TOP="top",PLACEMENTS.BOTTOM="bottom"}(PLACEMENTS||(PLACEMENTS={}));var defaultPositions=((_a={})[PLACEMENTS.LEFT]=function(referenceOffset,target,referenceRect){return{top:referenceOffset.top-Math.round(target.offsetHeight/2)+Math.round(referenceRect.height/2),left:Math.round(referenceOffset.left-target.offsetWidth)}},_a[PLACEMENTS.RIGHT]=function(referenceOffset,target,referenceRect){return{top:referenceOffset.top-Math.round(target.offsetHeight/2)+Math.round(referenceRect.height/2),left:Math.round(referenceOffset.left+referenceRect.width)}},_a[PLACEMENTS.TOP]=function(referenceOffset,target,referenceRect){return{top:Math.round(referenceOffset.top-target.offsetHeight),left:referenceOffset.left-Math.round(target.offsetWidth/2)+Math.round(referenceRect.width/2)}},_a[PLACEMENTS.BOTTOM]=function(referenceOffset,target,referenceRect){return{top:Math.round(referenceOffset.top+referenceRect.height),left:referenceOffset.left-Math.round(target.offsetWidth/2)+Math.round(referenceRect.width/2)}},_a),windowRef="undefined"!=typeof window?window:{innerHeight:0,scrollY:0,innerWidth:0,scrollX:0},Position=function(){function Position(positions){void 0===positions&&(positions={}),this.positions=defaultPositions,this.positions=Object.assign({},defaultPositions,positions)}return Position.prototype.getRelativeOffset=function(target){for(var offsets={left:target.offsetLeft,top:target.offsetTop};target.offsetParent&&"static"===getComputedStyle(target.offsetParent).position;)offsets.left+=target.offsetLeft,offsets.top+=target.offsetTop,target=target.offsetParent;return offsets},Position.prototype.getAbsoluteOffset=function(target){for(var currentNode=target,margins={top:0,left:0};currentNode.offsetParent;){var computed=getComputedStyle(currentNode.offsetParent);"static"===computed.position&&computed.marginLeft&&computed.marginTop&&(parseInt(computed.marginTop,10)&&(margins.top+=parseInt(computed.marginTop,10)),parseInt(computed.marginLeft,10)&&(margins.left+=parseInt(computed.marginLeft,10))),currentNode=currentNode.offsetParent}var targetRect=target.getBoundingClientRect(),relativeRect=document.body.getBoundingClientRect();return{top:targetRect.top-relativeRect.top+margins.top,left:targetRect.left-relativeRect.left+margins.left}},Position.prototype.findRelative=function(reference,target,placement){var referenceOffset=this.getRelativeOffset(reference),referenceRect=reference.getBoundingClientRect();return this.calculatePosition(referenceOffset,referenceRect,target,placement)},Position.prototype.findAbsolute=function(reference,target,placement){var referenceOffset=this.getAbsoluteOffset(reference),referenceRect=reference.getBoundingClientRect();return this.calculatePosition(referenceOffset,referenceRect,target,placement)},Position.prototype.findPosition=function(reference,target,placement,offsetFunction){void 0===offsetFunction&&(offsetFunction=this.getAbsoluteOffset.bind(this));var referenceOffset=offsetFunction(reference),referenceRect=reference.getBoundingClientRect();return this.calculatePosition(referenceOffset,referenceRect,target,placement)},Position.prototype.findPositionAt=function(offset,target,placement){return this.calculatePosition(offset,{top:0,left:0,height:0,width:0},target,placement)},Position.prototype.getPlacementBox=function(target,position){var targetBottom=target.offsetHeight+position.top,targetRight=target.offsetWidth+position.left;return{top:position.top,bottom:targetBottom,left:position.left,right:targetRight}},Position.prototype.addOffset=function(position,top,left){return void 0===top&&(top=0),void 0===left&&(left=0),Object.assign({},position,{top:position.top+top,left:position.left+left})},Position.prototype.setElement=function(element,position){element.style.top=position.top+"px",element.style.left=position.left+"px"},Position.prototype.findBestPlacement=function(reference,target,placements,containerFunction,positionFunction){var _this=this;void 0===containerFunction&&(containerFunction=this.defaultContainerFunction.bind(this)),void 0===positionFunction&&(positionFunction=this.findPosition.bind(this));var weightedPlacements=placements.map((function(placement){var pos=positionFunction(reference,target,placement),box=_this.getPlacementBox(target,pos),hiddenHeight=0,hiddenWidth=0,container=containerFunction();box.top<container.top?hiddenHeight=container.top-box.top:box.bottom>container.height&&(hiddenHeight=box.bottom-container.height),box.left<container.left?hiddenWidth=container.left-box.left:box.right>container.width&&(hiddenWidth=box.right-container.width),hiddenHeight&&!hiddenWidth?hiddenWidth=1:hiddenWidth&&!hiddenHeight&&(hiddenHeight=1);var area=target.offsetHeight*target.offsetWidth;return{placement,weight:(area-hiddenHeight*hiddenWidth)/area}}));return weightedPlacements.sort((function(a,b){return b.weight-a.weight})),weightedPlacements[0].placement},Position.prototype.findBestPlacementAt=function(offset,target,placements,containerFunction){var _this=this;void 0===containerFunction&&(containerFunction=this.defaultContainerFunction.bind(this));return this.findBestPlacement(null,target,placements,containerFunction,(function(_,target,placement){return _this.findPositionAt(offset,target,placement)}))},Position.prototype.defaultContainerFunction=function(){return{top:0,left:0,height:windowRef.innerHeight,width:windowRef.innerWidth}},Position.prototype.calculatePosition=function(referenceOffset,referenceRect,target,placement){return this.positions[placement]?this.positions[placement](referenceOffset,target,referenceRect):(console.error("No function found for placement, defaulting to 0,0"),{left:0,top:0})},Position}(),position=new Position;const __WEBPACK_DEFAULT_EXPORT__=Position},"./src/pagination/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{tl:()=>Pagination,wi:()=>PaginationModel,u3:()=>PaginationModule,zI:()=>PaginationNav});class PaginationModel{constructor(){this.currentPage=1,this.pageLength=10,this.totalDataLength=0}}var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),i18n=__webpack_require__("./src/i18n/index.ts"),experimental=__webpack_require__("./src/experimental/index.ts"),utils=__webpack_require__("./src/utils/index.ts");let Pagination=class Pagination{constructor(i18n,experimental){this.i18n=i18n,this.experimental=experimental,this.skeleton=!1,this.disabled=!1,this.pageInputDisabled=!1,this.showPageInput=!0,this.pagesUnknown=!1,this.pageSelectThreshold=1e3,this.itemsPerPageOptions=[10,20,30,40,50],this.selectPage=new core.EventEmitter,this.itemsPerPageSelectId=`pagination-select-items-per-page-${Pagination.paginationCounter}`,this.currentPageSelectId=`pagination-select-current-page-${Pagination.paginationCounter}`,this.itemsPerPageText=this.i18n.getOverridable("PAGINATION.ITEMS_PER_PAGE"),this.optionsListText=this.i18n.getOverridable("PAGINATION.OPEN_LIST_OF_OPTIONS"),this.backwardText=this.i18n.getOverridable("PAGINATION.BACKWARD"),this.forwardText=this.i18n.getOverridable("PAGINATION.FORWARD"),this.totalItemsText=this.i18n.getOverridable("PAGINATION.TOTAL_ITEMS"),this.totalItemText=this.i18n.getOverridable("PAGINATION.TOTAL_ITEM"),this.totalItemsUnknownText=this.i18n.getOverridable("PAGINATION.TOTAL_ITEMS_UNKNOWN"),this.pageText=this.i18n.getOverridable("PAGINATION.PAGE"),this.ofLastPagesText=this.i18n.getOverridable("PAGINATION.OF_LAST_PAGES"),this.ofLastPageText=this.i18n.getOverridable("PAGINATION.OF_LAST_PAGE"),this._pageOptions=[],Pagination.paginationCounter++}set translations(value){const valueWithDefaults=(0,utils.TS)(this.i18n.getMultiple("PAGINATION"),value);this.itemsPerPageText.override(valueWithDefaults.ITEMS_PER_PAGE),this.optionsListText.override(valueWithDefaults.OPEN_LIST_OF_OPTIONS),this.backwardText.override(valueWithDefaults.BACKWARD),this.forwardText.override(valueWithDefaults.FORWARD),this.totalItemsText.override(valueWithDefaults.TOTAL_ITEMS),this.totalItemText.override(valueWithDefaults.TOTAL_ITEM),this.totalItemsUnknownText.override(valueWithDefaults.TOTAL_ITEMS_UNKNOWN),this.pageText.override(valueWithDefaults.PAGE),this.ofLastPagesText.override(valueWithDefaults.OF_LAST_PAGES),this.ofLastPageText.override(valueWithDefaults.OF_LAST_PAGE)}get itemsPerPage(){return this.model.pageLength}set itemsPerPage(value){this.model.pageLength=Number(value),this.currentPage=1}get currentPage(){return this.model.currentPage}set currentPage(value){value=Number(value),this.selectPage.emit(value)}get totalDataLength(){return this.model.totalDataLength}get lastPage(){const last=Math.ceil(this.totalDataLength/this.itemsPerPage);return last>0?last:1}get startItemIndex(){return this.endItemIndex>0?(this.currentPage-1)*this.itemsPerPage+1:0}get endItemIndex(){const projectedEndItemIndex=this.currentPage*this.itemsPerPage;return projectedEndItemIndex<this.totalDataLength?projectedEndItemIndex:this.totalDataLength}get previousPage(){return this.currentPage<=1?1:this.currentPage-1}get nextPage(){const lastPage=this.lastPage;return this.currentPage>=lastPage?lastPage:this.currentPage+1}get pageOptions(){return this.totalDataLength&&this._pageOptions.length!==this.totalDataLength&&(this._pageOptions=Array(Math.ceil(this.totalDataLength/this.itemsPerPage))),this._pageOptions}};Pagination.paginationCounter=0,Pagination.ctorParameters=()=>[{type:i18n.oc},{type:experimental.tM}],Pagination.propDecorators={skeleton:[{type:core.Input}],model:[{type:core.Input}],disabled:[{type:core.Input}],pageInputDisabled:[{type:core.Input}],showPageInput:[{type:core.Input}],pagesUnknown:[{type:core.Input}],pageSelectThreshold:[{type:core.Input}],translations:[{type:core.Input}],itemsPerPageOptions:[{type:core.Input}],selectPage:[{type:core.Output}]},Pagination=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-pagination, ibm-pagination",template:'\n\t<div\n\t\tclass="cds--pagination"\n\t\t[ngClass]="{\n\t\t\t\'cds--skeleton\': skeleton\n\t\t}">\n\t\t\x3c!-- left skeleton div --\x3e\n\t\t<div *ngIf="skeleton" class="cds--pagination__left">\n\t\t\t<p class="cds--skeleton__text" style="width: 70px"></p>\n\t\t\t<p class="cds--skeleton__text" style="width: 35px"></p>\n\t\t\t<p class="cds--skeleton__text" style="width: 105px"></p>\n\t\t</div>\n\n\t\t<div *ngIf="!skeleton" class="cds--pagination__left">\n\t\t\t<ng-container *ngIf="showPageInput">\n\t\t\t\t<label class="cds--pagination__text" [for]="itemsPerPageSelectId">\n\t\t\t\t\t{{itemsPerPageText.subject | async}}\n\t\t\t\t</label>\n\t\t\t\t<div\n\t\t\t\t\tclass="cds--select cds--select--inline cds--select__item-count"\n\t\t\t\t\t[class.cds--select--disabled]="pageInputDisabled">\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\t[disabled]="pageInputDisabled"\n\t\t\t\t\t\tclass="cds--select-input">\n\t\t\t\t\t\t<option\n\t\t\t\t\t\t\tclass="cds--select-option"\n\t\t\t\t\t\t\t*ngFor="let option of itemsPerPageOptions"\n\t\t\t\t\t\t\t[value]="option">\n\t\t\t\t\t\t\t\t{{ option }}\n\t\t\t\t\t\t</option>\n\t\t\t\t\t</select>\n\t\t\t\t\t<svg\n\t\t\t\t\t\tcdsIcon="chevron--down"\n\t\t\t\t\t\tsize="16"\n\t\t\t\t\t\tstyle="display: inherit"\n\t\t\t\t\t\tclass="cds--select__arrow"\n\t\t\t\t\t\taria-hidden="true"\n\t\t\t\t\t\t[attr.ariaLabel]="optionsListText.subject | async">\n\t\t\t\t\t</svg>\n\t\t\t\t</div>\n\t\t\t</ng-container>\n\t\t\t<span *ngIf="!pagesUnknown && totalDataLength <= 1" class="cds--pagination__text cds--pagination__items-count" [ngStyle]="{\'margin-left\': showPageInput ? null : 0}">\n\t\t\t\t{{totalItemText.subject | i18nReplace:{start: startItemIndex, end: endItemIndex, total: totalDataLength } | async}}\n\t\t\t</span>\n\t\t\t<span *ngIf="!pagesUnknown && totalDataLength > 1" class="cds--pagination__text cds--pagination__items-count" [ngStyle]="{\'margin-left\': showPageInput ? null : 0}">\n\t\t\t\t{{totalItemsText.subject | i18nReplace:{start: startItemIndex, end: endItemIndex, total: totalDataLength } | async}}\n\t\t\t</span>\n\t\t\t<span *ngIf="pagesUnknown" class="cds--pagination__text cds--pagination__items-count" [ngStyle]="{\'margin-left\': showPageInput ? null : 0}">\n\t\t\t\t{{totalItemsUnknownText.subject | i18nReplace:{start: startItemIndex, end: endItemIndex } | async}}\n\t\t\t</span>\n\t\t</div>\n\n\t\t\x3c!-- right skeleton div --\x3e\n\t\t<div *ngIf="skeleton" class="cds--pagination__right">\n\t\t\t<p class="cds--skeleton__text" style="width: 70px"></p>\n\t\t</div>\n\n\t\t<div *ngIf="!skeleton" class="cds--pagination__right">\n\t\t\t<span *ngIf="pagesUnknown" class="cds--pagination__text cds--pagination__page-text">\n\t\t\t\t<ng-container *ngIf="!showPageInput">{{currentPage}}</ng-container>\n\t\t\t\t{{pageText.subject | async}}\n\t\t\t</span>\n\t\t\t<ng-container *ngIf="showPageInput">\n\t\t\t\t<div\n\t\t\t\t\tclass="cds--select cds--select--inline cds--select__page-number"\n\t\t\t\t\t[class.cds--select--disabled]="pageInputDisabled">\n\t\t\t\t\t<label [for]="currentPageSelectId" class="cds--label cds--visually-hidden">{{pageText.subject | async}}</label>\n\t\t\t\t\t<input\n\t\t\t\t\t\t*ngIf="pageOptions.length > pageSelectThreshold"\n\t\t\t\t\t\tstyle="padding-right: 1rem; margin-right: 1rem;"\n\t\t\t\t\t\t[id]="currentPageSelectId"\n\t\t\t\t\t\ttype="number"\n\t\t\t\t\t\tmin="1"\n\t\t\t\t\t\t[max]="pageOptions.length"\n\t\t\t\t\t\tclass="cds--select-input"\n\t\t\t\t\t\t[(ngModel)]="currentPage">\n\t\t\t\t\t<select\n\t\t\t\t\t\t*ngIf="pageOptions.length <= pageSelectThreshold"\n\t\t\t\t\t\t[id]="currentPageSelectId"\n\t\t\t\t\t\tclass="cds--select-input"\n\t\t\t\t\t\t[disabled]="pageInputDisabled"\n\t\t\t\t\t\t[(ngModel)]="currentPage">\n\t\t\t\t\t\t<option *ngFor="let page of pageOptions; let i = index;" class="cds--select-option" [value]="i + 1">{{i + 1}}</option>\n\t\t\t\t\t</select>\n\t\t\t\t\t<svg\n\t\t\t\t\t\t*ngIf="pageOptions.length <= 1000"\n\t\t\t\t\t\tcdsIcon="chevron--down"\n\t\t\t\t\t\tsize="16"\n\t\t\t\t\t\tstyle="display: inherit;"\n\t\t\t\t\t\tclass="cds--select__arrow"\n\t\t\t\t\t\t[attr.ariaLabel]="optionsListText.subject | async">\n\t\t\t\t\t</svg>\n\t\t\t\t</div>\n\t\t\t</ng-container>\n\n\t\t\t<span *ngIf="!pagesUnknown && lastPage <= 1" class="cds--pagination__text">\n\t\t\t\t<ng-container *ngIf="!showPageInput">{{currentPage}}</ng-container>\n\t\t\t\t{{ofLastPageText.subject | i18nReplace: {last: lastPage} | async}}\n\t\t\t</span>\n\t\t\t<span *ngIf="!pagesUnknown && lastPage > 1" class="cds--pagination__text">\n\t\t\t\t<ng-container *ngIf="!showPageInput">{{currentPage}}</ng-container>\n\t\t\t\t{{ofLastPagesText.subject | i18nReplace: {last: lastPage} | async}}\n\t\t\t</span>\n\t\t\t<div class="cds--pagination__control-buttons">\n\t\t\t\t<button\n\t\t\t\t\tcdsButton="ghost"\n\t\t\t\t\ticonOnly="true"\n\t\t\t\t\tclass="cds--pagination__button cds--pagination__button--backward"\n\t\t\t\t\t[ngClass]="{\n\t\t\t\t\t\t\'cds--pagination__button--no-index\': currentPage <= 1 || disabled\n\t\t\t\t\t}"\n\t\t\t\t\ttabindex="0"\n\t\t\t\t\t[attr.aria-label]="backwardText.subject | async"\n\t\t\t\t\t(click)="selectPage.emit(previousPage)"\n\t\t\t\t\t[disabled]="(currentPage <= 1 || disabled ? true : null)">\n\t\t\t\t\t<svg cdsIcon="caret--left" size="16" class="cds--btn__icon"></svg>\n\t\t\t\t</button>\n\n\t\t\t\t<button\n\t\t\t\t\tcdsButton="ghost"\n\t\t\t\t\ticonOnly="true"\n\t\t\t\t\tclass="\n\t\t\t\t\t\tcds--pagination__button\n\t\t\t\t\t\tcds--pagination__button--forward"\n\t\t\t\t\t[ngClass]="{\n\t\t\t\t\t\t\'cds--pagination__button--no-index\': currentPage >= lastPage || disabled\n\t\t\t\t\t}"\n\t\t\t\t\ttabindex="0"\n\t\t\t\t\t[attr.aria-label]="forwardText.subject | async"\n\t\t\t\t\t(click)="selectPage.emit(nextPage)"\n\t\t\t\t\t[disabled]="(currentPage >= lastPage || disabled ? true : null)">\n\t\t\t\t\t<svg cdsIcon="caret--right" size="16" class="cds--btn__icon"></svg>\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t'})],Pagination);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs"),fesm2020_forms=__webpack_require__("./node_modules/@angular/forms/fesm2020/forms.mjs");let PaginationNav=class PaginationNav{constructor(i18n,experimental){this.i18n=i18n,this.experimental=experimental,this.disabled=!1,this.numOfItemsToShow=4,this.selectPage=new core.EventEmitter,this.nextItemText=this.i18n.getOverridable("PAGINATION.NEXT"),this.previousItemText=this.i18n.getOverridable("PAGINATION.PREVIOUS"),PaginationNav.paginationCounter++}set translations(value){const valueWithDefaults=(0,utils.TS)(this.i18n.getMultiple("PAGINATION"),value);this.nextItemText.override(valueWithDefaults.NEXT),this.previousItemText.override(valueWithDefaults.PREVIOUS)}get totalNumbersArray(){return function range(stop,start=0,step=1){return Array(Math.ceil((stop-start)/step)).fill(0).map(((x,i)=>i*step+start))}(this.totalDataLength+1,1)}get currentPage(){return this.model.currentPage}set currentPage(value){value=Number(value),this.selectPage.emit(value)}get totalDataLength(){return this.model.totalDataLength}get startOffset(){return this.numOfItemsToShow<=4&&this.currentPage>1?0:1}get frontCuts(){return this.getCuts().front}get backCuts(){return this.getCuts().back}get leftArrowDisabled(){return this.disabled||1===this.currentPage}get rightArrowDisabled(){return this.disabled||this.currentPage===this.totalDataLength}handleOverflowSelection(page){"number"==typeof page&&(this.currentPage=page)}jumpToNext(){this.currentPage=this.currentPage<this.totalDataLength?this.currentPage+1:this.totalDataLength}jumpToPrevious(){this.currentPage=this.currentPage>1?this.currentPage-1:1}getPages(){if(this.totalDataLength<=1)return null;const cuts=this.getCuts();return this.totalNumbersArray.slice(this.startOffset+cuts.front,-1*(1+cuts.back))}getCuts(splitPoint=null){const page=this.currentPage-1,totalItems=this.totalDataLength,itemsThatFit=this.numOfItemsToShow;if(itemsThatFit>=totalItems)return{front:0,back:0};const split=splitPoint||Math.ceil(itemsThatFit/2)-1;let frontHidden=page+1-split,backHidden=totalItems-page-(itemsThatFit-split)+1;return frontHidden<=1&&(backHidden-=frontHidden<=0?Math.abs(frontHidden)+1:0,frontHidden=0),backHidden<=1&&(frontHidden-=backHidden<=0?Math.abs(backHidden)+1:0,backHidden=0),{front:frontHidden,back:backHidden}}};PaginationNav.paginationCounter=0,PaginationNav.ctorParameters=()=>[{type:i18n.oc},{type:experimental.tM}],PaginationNav.propDecorators={model:[{type:core.Input}],disabled:[{type:core.Input}],numOfItemsToShow:[{type:core.Input}],translations:[{type:core.Input}],selectPage:[{type:core.Output}]},PaginationNav=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-pagination-nav, ibm-pagination-navm",template:'\n\t<div>\n\t\t<div class="cds--pagination-nav">\n\t\t\t<ul class="cds--pagination-nav__list">\n\t\t\t\t<li class="cds--pagination-nav__list-item">\n\t\t\t\t\t<cds-icon-button\n\t\t\t\t\t\tkind="ghost"\n\t\t\t\t\t\tsize="md"\n\t\t\t\t\t\t(click)="jumpToPrevious()"\n\t\t\t\t\t\t[disabled]="leftArrowDisabled"\n\t\t\t\t\t\t[description]="previousItemText.subject | async">\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\tcdsIcon="caret--left"\n\t\t\t\t\t\t\tsize="16"\n\t\t\t\t\t\t\tclass="cds--btn__icon">\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</cds-icon-button>\n\t\t\t\t</li>\n\t\t\t\t<cds-pagination-nav-item\n\t\t\t\t\t*ngIf="this.numOfItemsToShow >= 5 || (this.numOfItemsToShow <= 4 && currentPage <= 1)"\n\t\t\t\t\tpage="1"\n\t\t\t\t\t(click)="currentPage = 1"\n\t\t\t\t\t[isActive]="currentPage == 1">\n\t\t\t\t</cds-pagination-nav-item>\n\t\t\t\t<cds-pagination-overflow\n\t\t\t\t\t*ngIf="frontCuts"\n\t\t\t\t\t[count]="frontCuts"\n\t\t\t\t\t[fromIndex]="startOffset"\n\t\t\t\t\t(change)="handleOverflowSelection($event)">\n\t\t\t\t</cds-pagination-overflow>\n\t\t\t\t<cds-pagination-nav-item\n\t\t\t\t\t*ngFor="let page of getPages();"\n\t\t\t\t\t[page]="page"\n\t\t\t\t\t(click)="currentPage = page"\n\t\t\t\t\t[isActive]="currentPage == page">\n\t\t\t\t</cds-pagination-nav-item>\n\t\t\t\t<cds-pagination-overflow\n\t\t\t\t\t*ngIf="backCuts"\n\t\t\t\t\t[count]="backCuts"\n\t\t\t\t\t[fromIndex]="totalNumbersArray.length - backCuts - 1"\n\t\t\t\t\t(change)="handleOverflowSelection($event)">\n\t\t\t\t</cds-pagination-overflow>\n\t\t\t\t<cds-pagination-nav-item\n\t\t\t\t\t*ngIf="totalDataLength > 1"\n\t\t\t\t\t[page]="totalNumbersArray.length"\n\t\t\t\t\t(click)="currentPage = totalNumbersArray.length"\n\t\t\t\t\t[isActive]="currentPage == totalNumbersArray.length">\n\t\t\t\t</cds-pagination-nav-item>\n\t\t\t\t<li class="cds--pagination-nav__list-item">\n\t\t\t\t\t<cds-icon-button\n\t\t\t\t\t\tkind="ghost"\n\t\t\t\t\t\t(click)="jumpToNext()"\n\t\t\t\t\t\t[disabled]="rightArrowDisabled"\n\t\t\t\t\t\t[description]="nextItemText.subject | async">\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\tcdsIcon="caret--right"\n\t\t\t\t\t\t\tsize="16"\n\t\t\t\t\t\t\tclass="cds--btn__icon">\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</cds-icon-button>\n\t\t\t\t</li>\n\t\t\t</ul>\n\t\t</div>\n\t</div>\n\t'})],PaginationNav);let PaginationNavItem=class PaginationNavItem{constructor(){this.page=0,this.isActive=!1,this.click=new core.EventEmitter}};PaginationNavItem.ctorParameters=()=>[],PaginationNavItem.propDecorators={page:[{type:core.Input}],isActive:[{type:core.Input}],click:[{type:core.Output}]},PaginationNavItem=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-pagination-nav-item, ibm-pagination-nav-item",template:'\n\t\t<li class="cds--pagination-nav__list-item">\n\t\t\t<button\n\t\t\t\ttype="button"\n\t\t\t\tclass="cds--pagination-nav__page"\n\t\t\t\t[ngClass]="{ \'cds--pagination-nav__page--active\': isActive }"\n\t\t\t\t(click)="click.emit(page)">\n\t\t\t\t<span class="cds--pagination-nav__accessibility-label">\n\t\t\t\t\t{{page}}\n\t\t\t\t</span>\n\t\t\t\t{{page}}\n\t\t\t</button>\n\t\t</li>\n\t'})],PaginationNavItem);let PaginationOverflow=class PaginationOverflow{constructor(i18n){this.i18n=i18n,this.ariaLabel=this.i18n.get().PAGINATION.SELECT_ARIA,this.change=new core.EventEmitter}get countAsArray(){return[...Array(this.count)]}handleChange(event){this.change.emit(+event.target.value),event.target.value=""}};PaginationOverflow.ctorParameters=()=>[{type:i18n.oc}],PaginationOverflow.propDecorators={fromIndex:[{type:core.Input}],count:[{type:core.Input}],ariaLabel:[{type:core.Input}],change:[{type:core.Output}]},PaginationOverflow=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-pagination-overflow, ibm-pagination-overflow",template:'\n\t\t<li class="cds--pagination-nav__list-item" *ngIf="count > 1">\n\t\t\t<div class="cds--pagination-nav__select">\n\t\t\t<select\n\t\t\t\t[attr.aria-label]="ariaLabel"\n\t\t\t\tclass="cds--pagination-nav__page cds--pagination-nav__page--select"\n\t\t\t\t(change)="handleChange($event)">\n\t\t\t\t<option value="" hidden></option>\n\t\t\t\t<option\n\t\t\t\t*ngFor="let item of countAsArray; let i = index">\n\t\t\t\t\t{{fromIndex + i + 1}}\n\t\t\t\t</option>\n\t\t\t</select>\n\t\t\t<div class="cds--pagination-nav__select-icon-wrapper">\n\t\t\t\t<svg\n\t\t\t\t\tcdsIcon="overflow-menu--horizontal"\n\t\t\t\t\tsize="16"\n\t\t\t\t\tstyle="display: inherit"\n\t\t\t\t\tclass="cds--pagination-nav__select-icon">\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t\t</div>\n\t\t</li>\n\t\t<cds-pagination-nav-item *ngIf="count === 1" [page]="fromIndex + 1"></cds-pagination-nav-item>\n\t'})],PaginationOverflow);var icon=__webpack_require__("./src/icon/index.ts"),src_forms=__webpack_require__("./src/forms/index.ts");let PaginationModule=class PaginationModule{};PaginationModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[Pagination,PaginationNav,PaginationNavItem,PaginationOverflow],exports:[Pagination,PaginationNav,PaginationNavItem,PaginationOverflow],imports:[common.CommonModule,fesm2020_forms.u5,i18n.LU,experimental.OV,icon.QX,src_forms.hJ]})],PaginationModule)}}]);

package/docs/storybook/file-uploader-file-uploader-stories.ac7b5f6b.iframe.bundle.js ADDED Viewed

@@ -0,0 +1 @@

+ "use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[6310],{"./src/file-uploader/file-uploader.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Basic:()=>Basic,DragAndDrop:()=>DragAndDrop,NgModel:()=>NgModel,ReactiveForms:()=>ReactiveForms,Skeleton:()=>Skeleton,default:()=>file_uploader_stories});var fesm2020_forms=__webpack_require__("./node_modules/@angular/forms/fesm2020/forms.mjs"),dist=__webpack_require__("./node_modules/@storybook/angular/dist/index.mjs"),tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),i18n=__webpack_require__("./src/i18n/index.ts");const noop=()=>{};let FileUploader=class FileUploader{constructor(i18n){this.i18n=i18n,this.buttonText=this.i18n.get().FILE_UPLOADER.OPEN,this.buttonType="primary",this.accept=[],this.multiple=!0,this.skeleton=!1,this.fileItemSize="lg",this.drop=!1,this.fileUploaderId=`file-uploader-${FileUploader.fileUploaderCount}`,this.files=new Set,this.disabled=!1,this.filesChange=new core.EventEmitter,this.dragOver=!1,this.onTouchedCallback=noop,this.onChangeCallback=noop,FileUploader.fileUploaderCount++}get value(){return this.files}set value(v){v!==this.files&&(this.files=v,this.onChangeCallback(v))}onBlur(){this.onTouchedCallback()}get fileList(){return Array.from(this.fileInput.nativeElement.files)}writeValue(value){value!==this.value&&(this.files=value)}createFileItem(file){return{uploaded:!1,state:"edit",invalid:!1,invalidText:"",file}}onFilesAdded(){const newFiles=new Set(this.files);this.multiple||newFiles.clear();for(let file of this.fileList){const fileItem=this.createFileItem(file);newFiles.add(fileItem)}this.value=newFiles,this.filesChange.emit(newFiles)}onDragOver(event){event.stopPropagation(),event.preventDefault(),this.disabled||(this.dragOver=!0)}onDragLeave(event){event.stopPropagation(),event.preventDefault(),this.dragOver=!1}onDrop(event){if(event.stopPropagation(),event.preventDefault(),this.disabled)return;const transferredFiles=Array.from(event.dataTransfer.files),newFiles=new Set(this.files);transferredFiles.filter((({name,type})=>{const fileExtension=name.split(".").pop().replace(/^/,".");return this.accept.includes(type)||this.accept.includes(fileExtension)||!this.accept.length})).forEach((file=>{if(!newFiles.size||this.multiple){const fileItem=this.createFileItem(file);newFiles.add(fileItem)}})),this.value=newFiles,this.filesChange.emit(newFiles),this.dragOver=!1}removeFile(fileItem){if(this.files&&this.files.has(fileItem)){const newFiles=new Set(this.files);newFiles.delete(fileItem),this.filesChange.emit(newFiles),this.value=newFiles}this.fileInput.nativeElement.value=""}isTemplate(value){return value instanceof core.TemplateRef}registerOnTouched(fn){this.onTouchedCallback=fn}registerOnChange(fn){this.onChangeCallback=fn}setDisabledState(isDisabled){this.disabled=isDisabled}};FileUploader.fileUploaderCount=0,FileUploader.ctorParameters=()=>[{type:i18n.oc}],FileUploader.propDecorators={buttonText:[{type:core.Input}],buttonType:[{type:core.Input}],title:[{type:core.Input}],description:[{type:core.Input}],accept:[{type:core.Input}],multiple:[{type:core.Input}],skeleton:[{type:core.Input}],size:[{type:core.Input}],fileItemSize:[{type:core.Input}],drop:[{type:core.Input}],dropText:[{type:core.Input}],fileUploaderId:[{type:core.Input}],fileInput:[{type:core.ViewChild,args:["fileInput"]}],files:[{type:core.Input}],disabled:[{type:core.Input}],filesChange:[{type:core.Output}]},FileUploader=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-file-uploader, ibm-file-uploader",template:'\n\t\t<ng-container *ngIf="!skeleton; else skeletonTemplate">\n\t\t\t<label [for]="fileUploaderId" class="cds--file--label">{{title}}</label>\n\t\t\t<p class="cds--label-description">{{description}}</p>\n\t\t\t<div class="cds--file">\n\t\t\t\t<label\n\t\t\t\t\t*ngIf="drop"\n\t\t\t\t\tclass="cds--file-browse-btn"\n\t\t\t\t\t(keyup.enter)="fileInput.click()"\n\t\t\t\t\t(keyup.space)="fileInput.click()"\n\t\t\t\t\t[ngClass]="{\'cds--file-browse-btn--disabled\': disabled}"\n\t\t\t\t\ttabindex="0">\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass="cds--file__drop-container"\n\t\t\t\t\t\t[ngClass]="{\'cds--file__drop-container--drag-over\': dragOver}"\n\t\t\t\t\t\trole="button"\n\t\t\t\t\t\t(click)="fileInput.click()"\n\t\t\t\t\t\t[attr.for]="fileUploaderId"\n\t\t\t\t\t\t(dragover)="onDragOver($event)"\n\t\t\t\t\t\t(dragleave)="onDragLeave($event)"\n\t\t\t\t\t\t(drop)="onDrop($event)">\n\t\t\t\t\t\t<ng-container *ngIf="!isTemplate(dropText)">{{dropText}}</ng-container>\n\t\t\t\t\t\t<ng-template *ngIf="isTemplate(dropText)" [ngTemplateOutlet]="dropText"></ng-template>\n\t\t\t\t\t</div>\n\t\t\t\t</label>\n\t\t\t\t<button\n\t\t\t\t\t*ngIf="!drop"\n\t\t\t\t\ttype="button"\n\t\t\t\t\t[cdsButton]="buttonType"\n\t\t\t\t\t(click)="fileInput.click()"\n\t\t\t\t\t[attr.for]="fileUploaderId"\n\t\t\t\t\t[size]="size"\n\t\t\t\t\t[disabled]="disabled">\n\t\t\t\t\t{{buttonText}}\n\t\t\t\t</button>\n\t\t\t\t<input\n\t\t\t\t\t#fileInput\n\t\t\t\t\ttype="file"\n\t\t\t\t\tclass="cds--file-input"\n\t\t\t\t\t[accept]="accept"\n\t\t\t\t\t[id]="fileUploaderId"\n\t\t\t\t\t[multiple]="multiple"\n\t\t\t\t\ttabindex="-1"\n\t\t\t\t\t(change)="onFilesAdded()"\n\t\t\t\t\t[disabled]="disabled"/>\n\t\t\t\t<div class="cds--file-container">\n\t\t\t\t\t<ng-container *ngFor="let fileItem of files">\n\t\t\t\t\t\t<cds-file\n\t\t\t\t\t\t\t[fileItem]="fileItem"\n\t\t\t\t\t\t\t(remove)="removeFile(fileItem)"\n\t\t\t\t\t\t\t[size]="fileItemSize">\n\t\t\t\t\t\t</cds-file>\n\t\t\t\t\t</ng-container>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</ng-container>\n\n\t\t<ng-template #skeletonTemplate>\n\t\t\t<div class="cds--skeleton__text" style="width: 100px"></div>\n\t\t\t<div class="cds--skeleton__text" style="width: 225px"></div>\n\t\t\t<button cdsButton skeleton="true"></button>\n\t\t</ng-template>\n\t',providers:[{provide:fesm2020_forms.JU,useExisting:FileUploader,multi:!0}]})],FileUploader);let FileComponent=class FileComponent{constructor(i18n){this.i18n=i18n,this.translations=this.i18n.get().FILE_UPLOADER,this.size="lg",this.remove=new core.EventEmitter,this.selectedFile=!0}get isInvalidText(){return this.fileItem.invalidText}get fileSizeSmall(){return"sm"===this.size}get fileSizeMedium(){return"md"===this.size}get fileSizeLarge(){return"lg"===this.size}ngOnDestroy(){this.remove.emit()}};FileComponent.ctorParameters=()=>[{type:i18n.oc}],FileComponent.propDecorators={translations:[{type:core.Input}],fileItem:[{type:core.Input}],size:[{type:core.Input}],remove:[{type:core.Output}],selectedFile:[{type:core.HostBinding,args:["class.cds--file__selected-file"]}],isInvalidText:[{type:core.HostBinding,args:["class.cds--file__selected-file--invalid"]}],fileSizeSmall:[{type:core.HostBinding,args:["class.cds--file__selected-file--sm"]}],fileSizeMedium:[{type:core.HostBinding,args:["class.cds--file__selected-file--md"]}],fileSizeLarge:[{type:core.HostBinding,args:["class.cds--file__selected-file--lg"]}]},FileComponent=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-file, ibm-file",template:'\n\t\t<p class="cds--file-filename" [title]="fileItem.file.name">{{fileItem.file.name}}</p>\n\t\t<span\n\t\t\t*ngIf="fileItem.state === \'edit\'"\n\t\t\tclass="cds--file__state-container">\n\t\t\t<svg\n\t\t\t\t*ngIf="isInvalidText"\n\t\t\t\tcdsIcon="warning--filled"\n\t\t\t\tclass="cds--file--invalid"\n\t\t\t\tsize="16">\n\t\t\t</svg>\n\t\t\t<button\n\t\t\t\ttype="button"\n\t\t\t\tclass="cds--file-close"\n\t\t\t\t[attr.aria-label]="translations.REMOVE_BUTTON"\n\t\t\t\ttabindex="0"\n\t\t\t\t(click)="remove.emit()"\n\t\t\t\t(keyup.enter)="remove.emit()"\n\t\t\t\t(keyup.space)="remove.emit()">\n\t\t\t\t<svg cdsIcon="close" size="16"></svg>\n\t\t\t</button>\n\t\t</span>\n\t\t<span *ngIf="fileItem.state === \'upload\'">\n\t\t\t<div class="cds--inline-loading__animation">\n\t\t\t\t<cds-loading size="sm"></cds-loading>\n\t\t\t</div>\n\t\t</span>\n\t\t<span *ngIf="fileItem.state === \'complete\'" class="cds--file__state-container">\n\t\t\t<svg\n\t\t\t\tcdsIcon="checkmark--filled"\n\t\t\t\tsize="16"\n\t\t\t\tclass="cds--file-complete"\n\t\t\t\t[ariaLabel]="translations.CHECKMARK">\n\t\t\t</svg>\n\t\t</span>\n\t\t<div class="cds--form-requirement" *ngIf="fileItem.invalid">\n\t\t\t<div class="cds--form-requirement__title">{{fileItem.invalidTitle}}</div>\n\t\t\t<p class="cds--form-requirement__supplement">{{fileItem.invalidText}}</p>\n\t\t</div>\n\t'})],FileComponent);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs"),src_button=__webpack_require__("./src/button/index.ts"),loading=__webpack_require__("./src/loading/index.ts"),icon=__webpack_require__("./src/icon/index.ts");let FileUploaderModule=class FileUploaderModule{};FileUploaderModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[FileUploader,FileComponent],exports:[FileUploader,FileComponent],imports:[common.CommonModule,src_button.hJ,loading.I,icon.QX]})],FileUploaderModule);var notification=__webpack_require__("./src/notification/index.ts"),file_type=__webpack_require__("./node_modules/file-type/index.js");let DragAndDropStory=class DragAndDropStory{constructor(){this.files=new Set,this.accept=[".jpg",".png"],this.dropText="Drag and drop files here of upload",this.disabled=!1,this.fileItemSize="lg",this.maxSize=5e5}onDropped(event){const transferredFiles=Array.from(event),readFileAndCheckType=fileObj=>new Promise(((resolve,reject)=>{let fileExtension,mime,reader=new FileReader;reader.readAsArrayBuffer(fileObj.file),reader.onload=()=>{if(reader.result){const type=file_type(reader.result);type?(fileExtension=type.ext.replace(/^/,"."),mime=type.mime):(fileExtension=fileObj.file.name.split(".").pop().replace(/^/,"."),mime=fileObj.file.type)}resolve({file:fileObj,accept:this.accept.includes(fileExtension)||this.accept.includes(mime)||!this.accept.length})},reader.onerror=error=>{reject(error)}})),promises=transferredFiles.map((file=>readFileAndCheckType(file)));Promise.all(promises).then((filePromiseArray=>filePromiseArray.filter((filePromise=>filePromise.accept)).map((acceptedFile=>acceptedFile.file)))).then((acceptedFiles=>this.files=new Set(acceptedFiles))).catch((error=>console.log(error)))}onUpload(){this.files.forEach((fileItem=>{fileItem.uploaded||(fileItem.file.size<this.maxSize&&(fileItem.state="upload",setTimeout((()=>{fileItem.state="complete",fileItem.uploaded=!0,console.log(fileItem)}),1500)),fileItem.file.size>this.maxSize&&(fileItem.state="upload",setTimeout((()=>{fileItem.state="edit",fileItem.invalid=!0,fileItem.invalidText="File size exceeds limit"}),1500)))}))}};DragAndDropStory.propDecorators={files:[{type:core.Input}],title:[{type:core.Input}],description:[{type:core.Input}],accept:[{type:core.Input}],multiple:[{type:core.Input}],dropText:[{type:core.Input}],disabled:[{type:core.Input}],fileItemSize:[{type:core.Input}]},DragAndDropStory=(0,tslib_es6.gn)([(0,core.Component)({selector:"app-drop-file-uploader",template:'\n\t\t<cds-file-uploader\n\t\t\t[title]="title"\n\t\t\t[description]="description"\n\t\t\t[buttonText]="buttonText"\n\t\t\t[buttonType]="buttonType"\n\t\t\t[accept]="accept"\n\t\t\t[multiple]="multiple"\n\t\t\t[skeleton]="skeleton"\n\t\t\t[(files)]="files"\n\t\t\t[size]="size"\n\t\t\t[fileItemSize]="fileItemSize"\n\t\t\tdrop="true"\n\t\t\t[dropText]="dropText"\n\t\t\t(filesChange)="onDropped($event)"\n\t\t\t[disabled]="disabled">\n\t\t</cds-file-uploader>\n\t\t<button\n\t\t\tcdsButton\n\t\t\t*ngIf="files && files.size > 0"\n\t\t\t(click)="onUpload()"\n\t\t\tstyle="margin-top:20px">\n\t\t\tUpload\n\t\t</button>\n\t'})],DragAndDropStory);let NgModelFileUploaderStory=class NgModelFileUploaderStory{constructor(){this.buttonType="primary",this.size="md",this.disabled=!1,this.fileItemSize="lg",this.model=new Set,this.maxSize=5e5}removeFiles(){this.model=new Set}onUpload(){this.model.forEach((fileItem=>{fileItem.uploaded||(fileItem.file.size<this.maxSize&&(fileItem.state="upload",setTimeout((()=>{fileItem.state="complete",fileItem.uploaded=!0,console.log(fileItem)}),1500)),fileItem.file.size>this.maxSize&&(fileItem.state="upload",setTimeout((()=>{fileItem.state="edit",fileItem.invalid=!0,fileItem.invalidTitle="File size exceeds limit",fileItem.invalidText="500kb max file size. Select a new file and try again."}),1500)))}))}};NgModelFileUploaderStory.propDecorators={title:[{type:core.Input}],description:[{type:core.Input}],buttonText:[{type:core.Input}],buttonType:[{type:core.Input}],accept:[{type:core.Input}],multiple:[{type:core.Input}],size:[{type:core.Input}],disabled:[{type:core.Input}],fileItemSize:[{type:core.Input}]},NgModelFileUploaderStory=(0,tslib_es6.gn)([(0,core.Component)({selector:"app-ngmodel-file-uploader",template:'\n\t\t<cds-file-uploader\n\t\t\t[title]="title"\n\t\t\t[description]="description"\n\t\t\t[buttonText]="buttonText"\n\t\t\t[buttonType]="buttonType"\n\t\t\t[accept]="accept"\n\t\t\t[multiple]="multiple"\n\t\t\t[size]="size"\n\t\t\t[fileItemSize]="fileItemSize"\n\t\t\t[(ngModel)]="model"\n\t\t\t[disabled]="disabled">\n\t\t</cds-file-uploader>\n\t\t<button\n\t\t\tcdsButton\n\t\t\t*ngIf="model && model.size > 0"\n\t\t\t(click)="onUpload()"\n\t\t\tstyle="margin-top:20px">\n\t\t\tUpload\n\t\t</button>\n\t\t<button cdsButton (click)="removeFiles()">Remove all</button>\n\t'})],NgModelFileUploaderStory);let ReactiveFormsStory=class ReactiveFormsStory{constructor(formBuilder){this.formBuilder=formBuilder,this.buttonType="primary",this.accept=[".jpg",".png"],this.skeleton=!1,this.size="md",this.disabled=!1,this.fileItemSize="lg",this.maxSize=5e5}ngOnInit(){this.formGroup=this.formBuilder.group({files:new fesm2020_forms.NI(new Set,[fesm2020_forms.kI.required])}),this.disabledFormGroup=this.formBuilder.group({files:new fesm2020_forms.NI(new Set,[fesm2020_forms.kI.required])}),this.disabledFormGroup.disable()}onUpload(){this.formGroup.get("files").value.forEach((fileItem=>{fileItem.uploaded||(fileItem.file.size<this.maxSize&&(fileItem.state="upload",setTimeout((()=>{fileItem.state="complete",fileItem.uploaded=!0}),1500)),fileItem.file.size>this.maxSize&&(fileItem.state="upload",setTimeout((()=>{fileItem.state="edit",fileItem.invalid=!0,fileItem.invalidTitle="File size exceeds limit",fileItem.invalidText="500kb max file size. Select a new file and try again."}),1500)))}))}};ReactiveFormsStory.ctorParameters=()=>[{type:fesm2020_forms.qu}],ReactiveFormsStory.propDecorators={title:[{type:core.Input}],description:[{type:core.Input}],buttonText:[{type:core.Input}],buttonType:[{type:core.Input}],accept:[{type:core.Input}],multiple:[{type:core.Input}],skeleton:[{type:core.Input}],size:[{type:core.Input}],disabled:[{type:core.Input}],fileItemSize:[{type:core.Input}]},ReactiveFormsStory=(0,tslib_es6.gn)([(0,core.Component)({selector:"app-reactive-forms",template:'\n\t\t<form [formGroup]="formGroup" (ngSubmit)="onUpload()">\n\t\t\t<cds-file-uploader\n\t\t\t\t[title]="title"\n\t\t\t\t[description]="description"\n\t\t\t\t[buttonText]="buttonText"\n\t\t\t\t[buttonType]="buttonType"\n\t\t\t\t[accept]="accept"\n\t\t\t\t[multiple]="multiple"\n\t\t\t\t[skeleton]="skeleton"\n\t\t\t\t[size]="size"\n\t\t\t\t[fileItemSize]="fileItemSize"\n\t\t\t\t[disabled]="disabled"\n\t\t\t\tformControlName="files">\n\t\t\t</cds-file-uploader>\n\t\t\t<button\n\t\t\t\tcdsButton\n\t\t\t\t*ngIf="formGroup.get(\'files\').value && formGroup.get(\'files\').value.size > 0"\n\t\t\t\ttype="submit"\n\t\t\t\tstyle="margin-top: 20px">\n\t\t\t\tUpload\n\t\t\t</button>\n\t\t</form>\n\t\t<form [formGroup]="disabledFormGroup" (ngSubmit)="onUpload()">\n\t\t\t<cds-file-uploader\n\t\t\t\t[title]="title"\n\t\t\t\t[description]="description"\n\t\t\t\t[buttonText]="buttonText"\n\t\t\t\t[buttonType]="buttonType"\n\t\t\t\t[accept]="accept"\n\t\t\t\t[multiple]="multiple"\n\t\t\t\t[skeleton]="skeleton"\n\t\t\t\t[size]="size"\n\t\t\t\tformControlName="files">\n\t\t\t</cds-file-uploader>\n\t\t\t<div [id]="notificationId" style="width: 300px; margin-top: 20px"></div>\n\t\t\t<button cdsButton *ngIf="disabledFormGroup.get(\'files\').value && disabledFormGroup.get(\'files\').value.size > 0" type="submit">\n\t\t\t\tUpload\n\t\t\t</button>\n\t\t</form>\n\t'})],ReactiveFormsStory);let FileUploaderStory=class FileUploaderStory{constructor(){this.files=new Set,this.buttonType="primary",this.accept=[".jpg",".png"],this.skeleton=!1,this.size="md",this.disabled=!1,this.fileItemSize="lg",this.maxSize=5e5}onUpload(){this.files.forEach((fileItem=>{fileItem.uploaded||(fileItem.file.size<this.maxSize&&(fileItem.state="upload",setTimeout((()=>{fileItem.state="complete",fileItem.uploaded=!0,console.log(fileItem)}),1500)),fileItem.file.size>this.maxSize&&(fileItem.state="upload",setTimeout((()=>{fileItem.state="edit",fileItem.invalid=!0,fileItem.invalidTitle="File size exceeds limit",fileItem.invalidText="500kb max file size. Select a new file and try again."}),1500)))}))}};FileUploaderStory.propDecorators={files:[{type:core.Input}],title:[{type:core.Input}],description:[{type:core.Input}],buttonText:[{type:core.Input}],buttonType:[{type:core.Input}],accept:[{type:core.Input}],multiple:[{type:core.Input}],skeleton:[{type:core.Input}],size:[{type:core.Input}],disabled:[{type:core.Input}],fileItemSize:[{type:core.Input}]},FileUploaderStory=(0,tslib_es6.gn)([(0,core.Component)({selector:"app-file-uploader",template:'\n\t\t<cds-file-uploader\n\t\t\t[title]="title"\n\t\t\t[description]="description"\n\t\t\t[buttonText]="buttonText"\n\t\t\t[buttonType]="buttonType"\n\t\t\t[accept]="accept"\n\t\t\t[multiple]="multiple"\n\t\t\t[skeleton]="skeleton"\n\t\t\t[(files)]="files"\n\t\t\t[size]="size"\n\t\t\t[fileItemSize]="fileItemSize"\n\t\t\t[disabled]="disabled">\n\t\t</cds-file-uploader>\n\t\t<button cdsButton *ngIf="files && files.size > 0" (click)="onUpload()" style="margin-top:20px">\n\t\t\tUpload\n\t\t</button>\n\t'})],FileUploaderStory);const file_uploader_stories={title:"Components/File Uploader",decorators:[(0,dist.moduleMetadata)({declarations:[FileUploaderStory,NgModelFileUploaderStory,DragAndDropStory,ReactiveFormsStory],imports:[FileUploaderModule,fesm2020_forms.u5,fesm2020_forms.UX,notification.PQ,src_button.hJ]})],args:{title:"Account photo",description:"only .jpg and .png files. 500kb max file size.",buttonText:"Add files",disabled:!1,multiple:!0},argTypes:{size:{options:["sm","md","lg"],defaultValue:"md",control:"radio"},buttonType:{options:["primary","secondary","tertiary","ghost","danger"],defaultValue:"primary",control:"select"},fileItemSize:{options:["sm","md","lg"],defaultValue:"lg",control:"radio"}},component:FileUploader},Basic=(args=>({props:args,template:'\n\t\t\x3c!--\n\t\tapp-* components are for demo purposes only.\n\t\tYou can create your own implementation by using the component source found at:\n\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/file-uploader/stories/uploader.component.ts\n\t\t--\x3e\n\t\t<app-file-uploader\n\t\t\t[title]="title"\n\t\t\t[description]="description"\n\t\t\t[buttonText]="buttonText"\n\t\t\t[buttonType]="buttonType"\n\t\t\t[accept]="accept"\n\t\t\t[multiple]="multiple"\n\t\t\t[size]="size"\n\t\t\t[fileItemSize]="fileItemSize"\n\t\t\t[disabled]="disabled">\n\t\t</app-file-uploader>\n\t'})).bind({}),DragAndDrop=(args=>({props:args,template:'\n\t\t\x3c!--\n\t\tapp-* components are for demo purposes only.\n\t\tYou can create your own implementation by using the component source found at:\n\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/file-uploader/stories/drag-drop.component.ts\n\t\t--\x3e\n\t\t<app-drop-file-uploader\n\t\t\t[title]="title"\n\t\t\t[description]="description"\n\t\t\t[accept]="accept"\n\t\t\t[multiple]="multiple"\n\t\t\t[dropText]="dropText"\n\t\t\tdrop="true"\n\t\t\t[fileItemSize]="fileItemSize"\n\t\t\t[disabled]="disabled">\n\t\t</app-drop-file-uploader>\n\t'})).bind({});DragAndDrop.args={dropText:"Drag and drop files here or upload",accept:[".png","image/jpeg"]},DragAndDrop.argTypes={size:{control:!1},buttonType:{control:!1}};const NgModel=(args=>({props:args,template:'\n\t\t\x3c!--\n\t\tapp-* components are for demo purposes only.\n\t\tYou can create your own implementation by using the component source found at:\n\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/file-uploader/stories/uploader-form.component.ts\n\t\t--\x3e\n\t\t<app-ngmodel-file-uploader\n\t\t\t[title]="title"\n\t\t\t[description]="description"\n\t\t\t[buttonText]="buttonText"\n\t\t\t[buttonType]="buttonType"\n\t\t\t[accept]="accept"\n\t\t\t[multiple]="multiple"\n\t\t\t[size]="size"\n\t\t\t[fileItemSize]="fileItemSize"\n\t\t\t[disabled]="disabled">\n\t\t</app-ngmodel-file-uploader>\n\t'})).bind({});NgModel.storyName="Using NgModel",NgModel.args={accept:[".png",".jpeg"]};const ReactiveForms=(args=>({props:args,template:'\n\t\t\x3c!--\n\t\tapp-* components are for demo purposes only.\n\t\tYou can create your own implementation by using the component source found at:\n\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/file-uploader/stories/uploader-reactive-form.component.ts\n\t\t--\x3e\n\t\t<app-reactive-forms\n\t\t\t[title]="title"\n\t\t\t[description]="description"\n\t\t\t[buttonText]="buttonText"\n\t\t\t[buttonType]="buttonType"\n\t\t\t[accept]="accept"\n\t\t\t[multiple]="multiple"\n\t\t\t[size]="size"\n\t\t\t[fileItemSize]="fileItemSize"\n\t\t\t[disabled]="disabled">\n\t\t</app-reactive-forms>\n\t'})).bind({});NgModel.args={accept:[".png",".jpeg"]};const Skeleton=(args=>({props:args,template:'\n\t\t\x3c!--\n\t\tapp-* components are for demo purposes only.\n\t\tYou can create your own implementation by using the component source found at:\n\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/file-uploader/stories/uploader.component.ts\n\t\t--\x3e\n\t\t<app-file-uploader skeleton="true"></app-file-uploader>\n\t'})).bind({})},"./src/loading/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{g:()=>Loading,I:()=>LoadingModule});var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),i18n=__webpack_require__("./src/i18n/index.ts");let Loading=class Loading{constructor(i18n){this.i18n=i18n,this.title=this.i18n.get().LOADING.TITLE,this.isActive=!0,this.size="normal",this.overlay=!1}};Loading.ctorParameters=()=>[{type:i18n.oc}],Loading.propDecorators={title:[{type:core.Input}],isActive:[{type:core.Input}],size:[{type:core.Input}],overlay:[{type:core.Input},{type:core.HostBinding,args:["class.cds--loading-overlay"]}]},Loading=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-loading, ibm-loading",template:'\n\t\t<div\n\t\t\t[ngClass]="{\n\t\t\t\t\'cds--loading--small\': size === \'sm\',\n\t\t\t\t\'cds--loading--stop\': !isActive && !overlay,\n\t\t\t\t\'cds--loading-overlay--stop\': !isActive && overlay\n\t\t\t}"\n\t\t\tclass="cds--loading">\n\t\t\t<svg class="cds--loading__svg" viewBox="0 0 100 100">\n\t\t\t\t<title>{{title}}</title>\n\t\t\t\t<circle class="cds--loading__stroke" cx="50%" cy="50%" r="44" />\n\t\t\t</svg>\n\t\t</div>\n\t'})],Loading);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs");let LoadingModule=class LoadingModule{};LoadingModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[Loading],exports:[Loading],imports:[common.CommonModule,i18n.LU]})],LoadingModule)}}]);

package/docs/storybook/iframe.html CHANGED Viewed

@@ -348,8 +348,8 @@
             window['DOCS_OPTIONS'] = {"defaultName":"Docs","autodocs":true};</script><script type="module">import './sb-preview/runtime.js';
-      import './runtime~main.9df93975.iframe.bundle.js';
+      import './runtime~main.86d3bd20.iframe.bundle.js';
       import './795.c2864771.iframe.bundle.js';
-      import './main.1648f03e.iframe.bundle.js';</script></body></html>
+      import './main.1a927f43.iframe.bundle.js';</script></body></html>