@tedi-design-system/angular 9.0.0-rc.1 → 9.0.0-rc.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/community/index.d.ts +2 -0
- package/community/index.d.ts.map +1 -1
- package/fesm2022/tedi-design-system-angular-community.mjs +5 -1
- package/fesm2022/tedi-design-system-angular-community.mjs.map +1 -1
- package/fesm2022/tedi-design-system-angular-tedi.mjs +35 -16
- package/fesm2022/tedi-design-system-angular-tedi.mjs.map +1 -1
- package/package.json +1 -1
- package/tedi/index.d.ts +18 -2
- package/tedi/index.d.ts.map +1 -1
|
@@ -8892,9 +8892,9 @@ class SelectComponent {
|
|
|
8892
8892
|
size = input("default", ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
8893
8893
|
/**
|
|
8894
8894
|
* Whether to show a clear button when a value is selected.
|
|
8895
|
-
* @default
|
|
8895
|
+
* @default true
|
|
8896
8896
|
*/
|
|
8897
|
-
clearable = input(
|
|
8897
|
+
clearable = input(true, ...(ngDevMode ? [{ debugName: "clearable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
|
|
8898
8898
|
/**
|
|
8899
8899
|
* Show the clear button only while the filled select is hovered or focused.
|
|
8900
8900
|
* Requires `clearable`.
|
|
@@ -8937,6 +8937,10 @@ class SelectComponent {
|
|
|
8937
8937
|
* Selected value, for use without a form directive. An array in multi-select
|
|
8938
8938
|
* mode, the bare value otherwise. Unlike `[ngModel]` it applies on the first
|
|
8939
8939
|
* render rather than a frame later. Do not combine with a form directive.
|
|
8940
|
+
*
|
|
8941
|
+
* `null`, `undefined` and `''` all mean nothing is selected, so
|
|
8942
|
+
* `new FormControl('')` and `new FormControl(null)` both start the select empty,
|
|
8943
|
+
* showing its placeholder.
|
|
8940
8944
|
*/
|
|
8941
8945
|
value = input(undefined, ...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
8942
8946
|
/**
|
|
@@ -9289,7 +9293,7 @@ class SelectComponent {
|
|
|
9289
9293
|
const options = this.searchTerm().trim()
|
|
9290
9294
|
? this.filteredOptions()
|
|
9291
9295
|
: this.normalizedOptions();
|
|
9292
|
-
const enabledOptions =
|
|
9296
|
+
const enabledOptions = this.bulkSelectable(options);
|
|
9293
9297
|
if (enabledOptions.length === 0)
|
|
9294
9298
|
return false;
|
|
9295
9299
|
if (this.usesDefaultCompare()) {
|
|
@@ -9304,7 +9308,7 @@ class SelectComponent {
|
|
|
9304
9308
|
const options = this.searchTerm().trim()
|
|
9305
9309
|
? this.filteredOptions()
|
|
9306
9310
|
: this.normalizedOptions();
|
|
9307
|
-
const enabledOptions =
|
|
9311
|
+
const enabledOptions = this.bulkSelectable(options);
|
|
9308
9312
|
if (enabledOptions.length === 0)
|
|
9309
9313
|
return false;
|
|
9310
9314
|
let selectedCount;
|
|
@@ -9754,9 +9758,9 @@ class SelectComponent {
|
|
|
9754
9758
|
const compareWith = this.compareWith();
|
|
9755
9759
|
const selected = this.selectedValues();
|
|
9756
9760
|
const isSelected = selected.some((v) => compareWith(v, value));
|
|
9757
|
-
const newSelection = isSelected
|
|
9761
|
+
const newSelection = this.toSelection(isSelected
|
|
9758
9762
|
? selected.filter((v) => !compareWith(v, value))
|
|
9759
|
-
: [...selected, value];
|
|
9763
|
+
: [...selected, value], true);
|
|
9760
9764
|
this.selectedValues.set(newSelection);
|
|
9761
9765
|
this.onChange(newSelection);
|
|
9762
9766
|
this.selectionChange.emit(newSelection);
|
|
@@ -9766,8 +9770,9 @@ class SelectComponent {
|
|
|
9766
9770
|
this.searchInputRef()?.nativeElement.focus();
|
|
9767
9771
|
this.onTouched();
|
|
9768
9772
|
}
|
|
9773
|
+
/** Selects `value` in single-select mode, notifies the form and closes the dropdown. */
|
|
9769
9774
|
selectSingleValue(value) {
|
|
9770
|
-
this.selectedValues.set(
|
|
9775
|
+
this.selectedValues.set(this.toSelection(value, false));
|
|
9771
9776
|
this.onChange(value);
|
|
9772
9777
|
this.selectionChange.emit(value);
|
|
9773
9778
|
if (this.clearSearchOnSelect())
|
|
@@ -9853,6 +9858,10 @@ class SelectComponent {
|
|
|
9853
9858
|
this.scrollListener = undefined;
|
|
9854
9859
|
}
|
|
9855
9860
|
}
|
|
9861
|
+
/**
|
|
9862
|
+
* Handles a selection change from the listbox: the select-all and group rows, or
|
|
9863
|
+
* the new selection, which is emitted and written to the form.
|
|
9864
|
+
*/
|
|
9856
9865
|
handleValueChange(event) {
|
|
9857
9866
|
const values = event.value;
|
|
9858
9867
|
const selectAllIndex = values.findIndex((v) => v === SpecialOptionControls.SELECT_ALL);
|
|
@@ -9880,6 +9889,7 @@ class SelectComponent {
|
|
|
9880
9889
|
else {
|
|
9881
9890
|
newSelection = [...values];
|
|
9882
9891
|
}
|
|
9892
|
+
newSelection = this.toSelection(newSelection, true);
|
|
9883
9893
|
this.selectedValues.set(newSelection);
|
|
9884
9894
|
this.onChange(newSelection);
|
|
9885
9895
|
this.selectionChange.emit(newSelection);
|
|
@@ -9892,7 +9902,7 @@ class SelectComponent {
|
|
|
9892
9902
|
}
|
|
9893
9903
|
else {
|
|
9894
9904
|
const selected = values[0] ?? null;
|
|
9895
|
-
this.selectedValues.set(selected
|
|
9905
|
+
this.selectedValues.set(this.toSelection(selected, false));
|
|
9896
9906
|
this.onChange(selected);
|
|
9897
9907
|
this.selectionChange.emit(selected);
|
|
9898
9908
|
if (this.clearSearchOnSelect()) {
|
|
@@ -9986,7 +9996,7 @@ class SelectComponent {
|
|
|
9986
9996
|
const group = this.optionGroups().find((g) => g.label === groupLabel);
|
|
9987
9997
|
if (!group)
|
|
9988
9998
|
return false;
|
|
9989
|
-
const enabledGroupOptions = group.options
|
|
9999
|
+
const enabledGroupOptions = this.bulkSelectable(group.options);
|
|
9990
10000
|
if (enabledGroupOptions.length === 0)
|
|
9991
10001
|
return false;
|
|
9992
10002
|
const compareWith = this.compareWith();
|
|
@@ -9997,7 +10007,7 @@ class SelectComponent {
|
|
|
9997
10007
|
const group = this.optionGroups().find((g) => g.label === groupLabel);
|
|
9998
10008
|
if (!group)
|
|
9999
10009
|
return false;
|
|
10000
|
-
const enabledGroupOptions = group.options
|
|
10010
|
+
const enabledGroupOptions = this.bulkSelectable(group.options);
|
|
10001
10011
|
if (enabledGroupOptions.length === 0)
|
|
10002
10012
|
return false;
|
|
10003
10013
|
const compareWith = this.compareWith();
|
|
@@ -10066,7 +10076,7 @@ class SelectComponent {
|
|
|
10066
10076
|
const options = isSearching
|
|
10067
10077
|
? this.filteredOptions()
|
|
10068
10078
|
: this.normalizedOptions();
|
|
10069
|
-
const enabledOptions =
|
|
10079
|
+
const enabledOptions = this.bulkSelectable(options);
|
|
10070
10080
|
const deselecting = this.allOptionsSelected();
|
|
10071
10081
|
let newSelection;
|
|
10072
10082
|
if (this.usesDefaultCompare()) {
|
|
@@ -10110,7 +10120,7 @@ class SelectComponent {
|
|
|
10110
10120
|
const group = this.optionGroups().find((g) => g.label === groupLabel);
|
|
10111
10121
|
if (!group)
|
|
10112
10122
|
return;
|
|
10113
|
-
const enabledGroupOptions = group.options
|
|
10123
|
+
const enabledGroupOptions = this.bulkSelectable(group.options);
|
|
10114
10124
|
const groupValues = enabledGroupOptions.map((o) => o.value);
|
|
10115
10125
|
const isGroupSelected = this.isGroupSelected(groupLabel);
|
|
10116
10126
|
const compareWith = this.compareWith();
|
|
@@ -10132,11 +10142,20 @@ class SelectComponent {
|
|
|
10132
10142
|
}
|
|
10133
10143
|
onChange = () => { };
|
|
10134
10144
|
onTouched = () => { };
|
|
10145
|
+
/** Options that can take part in select-all and group selection: enabled, not `''`. */
|
|
10146
|
+
bulkSelectable(options) {
|
|
10147
|
+
return options.filter((o) => !o.disabled && o.value !== "");
|
|
10148
|
+
}
|
|
10149
|
+
/**
|
|
10150
|
+
* `null`, `undefined` and `''` all mean nothing is selected, since `''` is a common
|
|
10151
|
+
* form default for "no value" (`new FormControl('')`). Picking an option whose
|
|
10152
|
+
* value is `''` therefore leaves nothing selected too.
|
|
10153
|
+
*/
|
|
10135
10154
|
toSelection(value, allowMultiple) {
|
|
10136
10155
|
if (allowMultiple) {
|
|
10137
|
-
return Array.isArray(value) ? value : [];
|
|
10156
|
+
return Array.isArray(value) ? value.filter((v) => v !== "") : [];
|
|
10138
10157
|
}
|
|
10139
|
-
return value != null ? [value] : [];
|
|
10158
|
+
return value != null && value !== "" ? [value] : [];
|
|
10140
10159
|
}
|
|
10141
10160
|
writeValue(value) {
|
|
10142
10161
|
this.selectedValues.set(this.toSelection(value, this.allowMultiple()));
|
|
@@ -11230,14 +11249,14 @@ class PaginationComponent {
|
|
|
11230
11249
|
});
|
|
11231
11250
|
}
|
|
11232
11251
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11233
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: PaginationComponent, isStandalone: true, selector: "tedi-pagination", inputs: { pageCount: { classPropertyName: "pageCount", publicName: "pageCount", isSignal: true, isRequired: true, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, boundaryCount: { classPropertyName: "boundaryCount", publicName: "boundaryCount", isSignal: true, isRequired: false, transformFunction: null }, siblingCount: { classPropertyName: "siblingCount", publicName: "siblingCount", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, dividerPosition: { classPropertyName: "dividerPosition", publicName: "dividerPosition", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, hideResults: { classPropertyName: "hideResults", publicName: "hideResults", isSignal: true, isRequired: false, transformFunction: null }, hidePageSize: { classPropertyName: "hidePageSize", publicName: "hidePageSize", isSignal: true, isRequired: false, transformFunction: null }, hidePager: { classPropertyName: "hidePager", publicName: "hidePager", isSignal: true, isRequired: false, transformFunction: null }, hideArrows: { classPropertyName: "hideArrows", publicName: "hideArrows", isSignal: true, isRequired: false, transformFunction: null }, disableArrowsAtBoundary: { classPropertyName: "disableArrowsAtBoundary", publicName: "disableArrowsAtBoundary", isSignal: true, isRequired: false, transformFunction: null }, arrowVariant: { classPropertyName: "arrowVariant", publicName: "arrowVariant", isSignal: true, isRequired: false, transformFunction: null }, showArrowLabels: { classPropertyName: "showArrowLabels", publicName: "showArrowLabels", isSignal: true, isRequired: false, transformFunction: null }, previousIcon: { classPropertyName: "previousIcon", publicName: "previousIcon", isSignal: true, isRequired: false, transformFunction: null }, nextIcon: { classPropertyName: "nextIcon", publicName: "nextIcon", isSignal: true, isRequired: false, transformFunction: null }, showModalTitle: { classPropertyName: "showModalTitle", publicName: "showModalTitle", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "xxl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange", pageSize: "pageSizeChange" }, host: { attributes: { "data-name": "tedi-pagination" }, properties: { "class": "hostClasses()" } }, queries: [{ propertyName: "customResults", first: true, predicate: TediPaginationResultsDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<span\n class=\"tedi-pagination__status\"\n role=\"status\"\n aria-live=\"polite\"\n aria-atomic=\"true\"\n>\n {{ statusText() }}\n</span>\n\n<div class=\"tedi-pagination__slot-start\">\n @if (showResults()) {\n @if (customResults()) {\n <ng-content select=\"[tediPaginationResults]\" />\n } @else {\n <span class=\"tedi-pagination__results\">\n {{ mergedLabels().results(totalItems()!) }}\n </span>\n }\n }\n</div>\n\n<div class=\"tedi-pagination__slot-center\">\n @if (showPager()) {\n <nav\n class=\"tedi-pagination__nav\"\n [attr.aria-label]=\"mergedLabels().ariaLabel\"\n >\n @if (showPrevious()) {\n <button\n tedi-button\n type=\"button\"\n size=\"small\"\n [variant]=\"resolvedArrowVariant()\"\n class=\"tedi-pagination__nav-button tedi-pagination__nav-button--previous\"\n [attr.aria-label]=\"\n resolvedShowArrowLabels() ? null : mergedLabels().previous\n \"\n [disabled]=\"previousItem().disabled\"\n (click)=\"handlePageChange(previousItem().page)\"\n >\n <tedi-icon [name]=\"previousIcon()\" />\n @if (resolvedShowArrowLabels()) {\n <span>{{ mergedLabels().previous }}</span>\n }\n </button>\n }\n\n @if (!useCompactPicker()) {\n <ul class=\"tedi-pagination__list\">\n @for (item of pageItems(); track $index) {\n @if (item.type === \"ellipsis\") {\n <li\n class=\"tedi-pagination__item tedi-pagination__item--ellipsis\"\n aria-hidden=\"true\"\n >\n \u2026\n </li>\n } @else {\n <li class=\"tedi-pagination__item\">\n <button\n type=\"button\"\n class=\"tedi-pagination__page\"\n [class.tedi-pagination__page--selected]=\"item.selected\"\n [attr.aria-label]=\"\n item.selected\n ? mergedLabels().currentPageAriaLabel(item.page!)\n : mergedLabels().pageAriaLabel(item.page!)\n \"\n [attr.aria-current]=\"item.selected ? 'page' : null\"\n (click)=\"handlePageChange(item.page)\"\n >\n {{ item.page }}\n </button>\n </li>\n }\n }\n </ul>\n }\n @if (useCompactPicker()) {\n <button\n type=\"button\"\n class=\"tedi-pagination__mobile-trigger\"\n aria-haspopup=\"dialog\"\n [attr.aria-expanded]=\"isMobileModalOpen()\"\n [attr.aria-label]=\"mobileTriggerAriaLabel()\"\n (click)=\"openMobilePicker()\"\n >\n <span\n class=\"tedi-pagination__mobile-trigger-label\"\n aria-hidden=\"true\"\n >\n <strong>{{ currentPage() }}</strong>\n <span>/</span>\n <span>{{ pageCount() }}</span>\n </span>\n <tedi-icon name=\"arrow_drop_down\" />\n </button>\n }\n\n @if (showNext()) {\n <button\n tedi-button\n type=\"button\"\n size=\"small\"\n [variant]=\"resolvedArrowVariant()\"\n class=\"tedi-pagination__nav-button tedi-pagination__nav-button--next\"\n [attr.aria-label]=\"\n resolvedShowArrowLabels() ? null : mergedLabels().next\n \"\n [disabled]=\"nextItem().disabled\"\n (click)=\"handlePageChange(nextItem().page)\"\n >\n @if (resolvedShowArrowLabels()) {\n <span>{{ mergedLabels().next }}</span>\n }\n <tedi-icon [name]=\"nextIcon()\" />\n </button>\n }\n </nav>\n }\n</div>\n\n<div class=\"tedi-pagination__slot-end\">\n @if (showPageSizeSelect()) {\n <div class=\"tedi-pagination__page-size\">\n @if (useCompactPicker()) {\n <span class=\"tedi-pagination__page-size-label\">\n {{ mergedLabels().pageSize }}\n </span>\n <button\n type=\"button\"\n class=\"tedi-pagination__page-size-trigger\"\n aria-haspopup=\"dialog\"\n [attr.aria-expanded]=\"isPageSizeModalOpen()\"\n [attr.aria-label]=\"mobilePageSizeAriaLabel()\"\n (click)=\"openPageSizePicker()\"\n >\n <span aria-hidden=\"true\">{{ selectedPageSizeLabel() }}</span>\n <tedi-icon name=\"arrow_drop_down\" />\n </button>\n } @else {\n <span class=\"tedi-pagination__page-size-label\" [id]=\"pageSizeLabelId\">\n {{ mergedLabels().pageSize }}\n </span>\n <tedi-select\n class=\"tedi-pagination__page-size-select\"\n [inputId]=\"pageSizeInputId\"\n [ariaLabelledby]=\"pageSizeLabelId\"\n size=\"small\"\n [options]=\"pageSizeSelectOptions()\"\n bindLabel=\"label\"\n bindValue=\"value\"\n dropdownAlign=\"end\"\n [value]=\"pageSize()\"\n (selectionChange)=\"handlePageSizeChange($event)\"\n />\n }\n </div>\n }\n</div>\n", styles: [".tedi-pagination{display:flex;flex-flow:row wrap;gap:var(--layout-grid-gutters-16);align-items:center;justify-content:center;width:100%;padding:var(--pagination-padding-y) var(--pagination-padding-x)}@media(max-width:35.98rem){.tedi-pagination{flex-direction:column;gap:var(--layout-grid-gutters-08)}}.tedi-pagination--align-left .tedi-pagination__slot-start,.tedi-pagination--align-left .tedi-pagination__slot-end,.tedi-pagination--align-right .tedi-pagination__slot-start,.tedi-pagination--align-right .tedi-pagination__slot-end{flex:0 0 auto;justify-content:flex-start}.tedi-pagination--align-left{justify-content:flex-start}@media(max-width:35.98rem){.tedi-pagination--align-left{align-items:flex-start}}.tedi-pagination--align-right{justify-content:flex-end}@media(max-width:35.98rem){.tedi-pagination--align-right{align-items:flex-end}}.tedi-pagination--bg-white{background:var(--general-surface-primary)}.tedi-pagination--bg-transparent{background:transparent}.tedi-pagination--divider-top:not(.tedi-pagination--bg-transparent){border-top:var(--tedi-borders-01) solid var(--general-border-secondary)}.tedi-pagination--divider-bottom:not(.tedi-pagination--bg-transparent){border-bottom:var(--tedi-borders-01) solid var(--general-border-secondary)}.tedi-pagination--no-pager .tedi-pagination__slot-center,.tedi-pagination--align-left.tedi-pagination--no-results .tedi-pagination__slot-start,.tedi-pagination--align-left.tedi-pagination--no-page-size .tedi-pagination__slot-end,.tedi-pagination--align-right.tedi-pagination--no-results .tedi-pagination__slot-start,.tedi-pagination--align-right.tedi-pagination--no-page-size .tedi-pagination__slot-end{display:none}.tedi-pagination__status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border:0;clip-path:inset(50%)}.tedi-pagination__slot-start{display:inline-flex;flex:1 1 0;align-items:center;justify-content:flex-start}.tedi-pagination__slot-center{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center}@media(max-width:35.98rem){.tedi-pagination__slot-center{align-self:stretch}}.tedi-pagination__slot-end{display:flex;flex:1 1 0;align-items:center;justify-content:flex-end}.tedi-pagination__results{flex:0 0 auto;font-family:var(--family-default);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height);color:var(--general-text-secondary);white-space:nowrap}@media(max-width:47.98rem){.tedi-pagination__results{font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height)}}.tedi-pagination__nav{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;justify-content:center}@media(max-width:47.98rem){.tedi-pagination__nav{display:grid;grid-template-columns:var(--button-sm-icon-size) auto var(--button-sm-icon-size)}}@media(max-width:35.98rem){.tedi-pagination__nav{grid-template-columns:1fr auto 1fr;width:100%}}@media(max-width:47.98rem){.tedi-pagination--arrow-labels .tedi-pagination__nav{display:flex}}.tedi-pagination__list{display:flex;flex-wrap:nowrap;gap:var(--layout-grid-gutters-08);align-items:center;padding:0;margin:0;list-style:none}.tedi-pagination__item{display:inline-flex;align-items:center;justify-content:center}.tedi-pagination__item--ellipsis{width:var(--pagination-button-size);height:var(--pagination-button-size);font-family:var(--family-default);font-size:var(--body-small-regular-size);line-height:var(--body-small-regular-line-height);color:var(--general-text-secondary);-webkit-user-select:none;user-select:none}.tedi-pagination__page{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:var(--pagination-button-size);height:var(--pagination-button-size);padding:0 var(--layout-grid-gutters-04);font-family:var(--family-default);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height);color:var(--general-text-secondary);cursor:pointer;background:transparent;border:none;border-radius:var(--button-radius-default)}.tedi-pagination__page:before{position:absolute;inset:-4px;content:\"\"}.tedi-pagination__page:hover{color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-pagination__page:active{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-pagination__page:focus-visible{color:var(--button-main-neutral-text-focus);outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-pagination__page--selected{color:var(--general-text-white);cursor:default;background:var(--general-surface-brand-secondary)}.tedi-pagination__page--selected:hover,.tedi-pagination__page--selected:active,.tedi-pagination__page--selected:focus-visible{color:var(--general-text-white);background:var(--general-surface-brand-secondary)}@media(max-width:47.98rem){.tedi-pagination__nav-button--previous{grid-column:1;justify-self:end}}@media(max-width:47.98rem){.tedi-pagination__nav-button--next{grid-column:3;justify-self:start}}.tedi-pagination__mobile-trigger{display:inline-flex;gap:var(--form-field-inner-spacing);align-items:center;justify-self:center;min-height:var(--form-field-height-sm);padding:var(--form-field-padding-y-sm) var(--form-field-padding-x-md-default);color:var(--form-input-text-filled);cursor:pointer;background:var(--form-input-background-default);border:var(--tedi-borders-01) solid var(--form-input-border-default);border-radius:var(--form-field-radius)}@media(max-width:47.98rem){.tedi-pagination__mobile-trigger{grid-column:2}}.tedi-pagination__mobile-trigger:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-pagination__mobile-trigger-label{display:inline-flex;gap:var(--layout-grid-gutters-04);align-items:center;font-family:var(--family-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height)}.tedi-pagination__mobile-trigger-label strong{font-weight:var(--body-bold-weight);color:var(--general-text-brand)}.tedi-pagination__page-size{display:flex;gap:var(--form-field-inner-spacing);align-items:center;justify-content:flex-end;min-width:0}@media(max-width:35.98rem){.tedi-pagination__page-size{flex-direction:column;gap:var(--layout-grid-gutters-04);align-items:center;justify-content:center}}@media(max-width:35.98rem){.tedi-pagination--align-left .tedi-pagination__page-size{align-items:flex-start}}@media(max-width:35.98rem){.tedi-pagination--align-right .tedi-pagination__page-size{align-items:flex-end}}.tedi-pagination__page-size-label{font-family:var(--family-default);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height);color:var(--general-text-secondary);white-space:nowrap;cursor:default}@media(max-width:47.98rem){.tedi-pagination__page-size-label{font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height)}}.tedi-pagination__page-size-select.tedi-select{width:auto;min-width:96px}.tedi-pagination__page-size-trigger{display:inline-flex;gap:var(--form-field-inner-spacing);align-items:center;min-height:var(--form-field-height-sm);padding:var(--form-field-padding-y-sm) var(--form-field-padding-x-md-default);font-family:var(--family-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);color:var(--form-input-text-filled);cursor:pointer;background:var(--form-input-background-default);border:var(--tedi-borders-01) solid var(--form-input-border-default);border-radius:var(--form-field-radius)}.tedi-pagination__page-size-trigger:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: SelectComponent, selector: "tedi-select", inputs: ["inputId", "name", "label", "tooltip", "ariaLabelledby", "ariaLabel", "required", "placeholder", "state", "size", "clearable", "showClearOnInteraction", "dropdownWidthRef", "dropdownAlign", "feedbackText", "options", "bindLabel", "bindValue", "value", "allowMultiple", "groupBy", "showSelectAll", "selectableGroups", "isTagRemovable", "multiRow", "tagEllipsis", "ellipsis", "compareWith", "disabledKey", "noOptionsMessage", "maxDropdownHeight", "hideOnScroll", "dropdownType", "virtualScroll", "virtualItemSize", "searchable", "searchFn", "clearSearchOnSelect"], outputs: ["selectionChange", "searchChange", "opened", "closed", "cleared"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
11252
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: PaginationComponent, isStandalone: true, selector: "tedi-pagination", inputs: { pageCount: { classPropertyName: "pageCount", publicName: "pageCount", isSignal: true, isRequired: true, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, boundaryCount: { classPropertyName: "boundaryCount", publicName: "boundaryCount", isSignal: true, isRequired: false, transformFunction: null }, siblingCount: { classPropertyName: "siblingCount", publicName: "siblingCount", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, dividerPosition: { classPropertyName: "dividerPosition", publicName: "dividerPosition", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, hideResults: { classPropertyName: "hideResults", publicName: "hideResults", isSignal: true, isRequired: false, transformFunction: null }, hidePageSize: { classPropertyName: "hidePageSize", publicName: "hidePageSize", isSignal: true, isRequired: false, transformFunction: null }, hidePager: { classPropertyName: "hidePager", publicName: "hidePager", isSignal: true, isRequired: false, transformFunction: null }, hideArrows: { classPropertyName: "hideArrows", publicName: "hideArrows", isSignal: true, isRequired: false, transformFunction: null }, disableArrowsAtBoundary: { classPropertyName: "disableArrowsAtBoundary", publicName: "disableArrowsAtBoundary", isSignal: true, isRequired: false, transformFunction: null }, arrowVariant: { classPropertyName: "arrowVariant", publicName: "arrowVariant", isSignal: true, isRequired: false, transformFunction: null }, showArrowLabels: { classPropertyName: "showArrowLabels", publicName: "showArrowLabels", isSignal: true, isRequired: false, transformFunction: null }, previousIcon: { classPropertyName: "previousIcon", publicName: "previousIcon", isSignal: true, isRequired: false, transformFunction: null }, nextIcon: { classPropertyName: "nextIcon", publicName: "nextIcon", isSignal: true, isRequired: false, transformFunction: null }, showModalTitle: { classPropertyName: "showModalTitle", publicName: "showModalTitle", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "xxl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange", pageSize: "pageSizeChange" }, host: { attributes: { "data-name": "tedi-pagination" }, properties: { "class": "hostClasses()" } }, queries: [{ propertyName: "customResults", first: true, predicate: TediPaginationResultsDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<span\n class=\"tedi-pagination__status\"\n role=\"status\"\n aria-live=\"polite\"\n aria-atomic=\"true\"\n>\n {{ statusText() }}\n</span>\n\n<div class=\"tedi-pagination__slot-start\">\n @if (showResults()) {\n @if (customResults()) {\n <ng-content select=\"[tediPaginationResults]\" />\n } @else {\n <span class=\"tedi-pagination__results\">\n {{ mergedLabels().results(totalItems()!) }}\n </span>\n }\n }\n</div>\n\n<div class=\"tedi-pagination__slot-center\">\n @if (showPager()) {\n <nav\n class=\"tedi-pagination__nav\"\n [attr.aria-label]=\"mergedLabels().ariaLabel\"\n >\n @if (showPrevious()) {\n <button\n tedi-button\n type=\"button\"\n size=\"small\"\n [variant]=\"resolvedArrowVariant()\"\n class=\"tedi-pagination__nav-button tedi-pagination__nav-button--previous\"\n [attr.aria-label]=\"\n resolvedShowArrowLabels() ? null : mergedLabels().previous\n \"\n [disabled]=\"previousItem().disabled\"\n (click)=\"handlePageChange(previousItem().page)\"\n >\n <tedi-icon [name]=\"previousIcon()\" />\n @if (resolvedShowArrowLabels()) {\n <span>{{ mergedLabels().previous }}</span>\n }\n </button>\n }\n\n @if (!useCompactPicker()) {\n <ul class=\"tedi-pagination__list\">\n @for (item of pageItems(); track $index) {\n @if (item.type === \"ellipsis\") {\n <li\n class=\"tedi-pagination__item tedi-pagination__item--ellipsis\"\n aria-hidden=\"true\"\n >\n \u2026\n </li>\n } @else {\n <li class=\"tedi-pagination__item\">\n <button\n type=\"button\"\n class=\"tedi-pagination__page\"\n [class.tedi-pagination__page--selected]=\"item.selected\"\n [attr.aria-label]=\"\n item.selected\n ? mergedLabels().currentPageAriaLabel(item.page!)\n : mergedLabels().pageAriaLabel(item.page!)\n \"\n [attr.aria-current]=\"item.selected ? 'page' : null\"\n (click)=\"handlePageChange(item.page)\"\n >\n {{ item.page }}\n </button>\n </li>\n }\n }\n </ul>\n }\n @if (useCompactPicker()) {\n <button\n type=\"button\"\n class=\"tedi-pagination__mobile-trigger\"\n aria-haspopup=\"dialog\"\n [attr.aria-expanded]=\"isMobileModalOpen()\"\n [attr.aria-label]=\"mobileTriggerAriaLabel()\"\n (click)=\"openMobilePicker()\"\n >\n <span\n class=\"tedi-pagination__mobile-trigger-label\"\n aria-hidden=\"true\"\n >\n <strong>{{ currentPage() }}</strong>\n <span>/</span>\n <span>{{ pageCount() }}</span>\n </span>\n <tedi-icon name=\"arrow_drop_down\" />\n </button>\n }\n\n @if (showNext()) {\n <button\n tedi-button\n type=\"button\"\n size=\"small\"\n [variant]=\"resolvedArrowVariant()\"\n class=\"tedi-pagination__nav-button tedi-pagination__nav-button--next\"\n [attr.aria-label]=\"\n resolvedShowArrowLabels() ? null : mergedLabels().next\n \"\n [disabled]=\"nextItem().disabled\"\n (click)=\"handlePageChange(nextItem().page)\"\n >\n @if (resolvedShowArrowLabels()) {\n <span>{{ mergedLabels().next }}</span>\n }\n <tedi-icon [name]=\"nextIcon()\" />\n </button>\n }\n </nav>\n }\n</div>\n\n<div class=\"tedi-pagination__slot-end\">\n @if (showPageSizeSelect()) {\n <div class=\"tedi-pagination__page-size\">\n @if (useCompactPicker()) {\n <span class=\"tedi-pagination__page-size-label\">\n {{ mergedLabels().pageSize }}\n </span>\n <button\n type=\"button\"\n class=\"tedi-pagination__page-size-trigger\"\n aria-haspopup=\"dialog\"\n [attr.aria-expanded]=\"isPageSizeModalOpen()\"\n [attr.aria-label]=\"mobilePageSizeAriaLabel()\"\n (click)=\"openPageSizePicker()\"\n >\n <span aria-hidden=\"true\">{{ selectedPageSizeLabel() }}</span>\n <tedi-icon name=\"arrow_drop_down\" />\n </button>\n } @else {\n <span class=\"tedi-pagination__page-size-label\" [id]=\"pageSizeLabelId\">\n {{ mergedLabels().pageSize }}\n </span>\n <tedi-select\n class=\"tedi-pagination__page-size-select\"\n [inputId]=\"pageSizeInputId\"\n [ariaLabelledby]=\"pageSizeLabelId\"\n size=\"small\"\n [clearable]=\"false\"\n [options]=\"pageSizeSelectOptions()\"\n bindLabel=\"label\"\n bindValue=\"value\"\n dropdownAlign=\"end\"\n [value]=\"pageSize()\"\n (selectionChange)=\"handlePageSizeChange($event)\"\n />\n }\n </div>\n }\n</div>\n", styles: [".tedi-pagination{display:flex;flex-flow:row wrap;gap:var(--layout-grid-gutters-16);align-items:center;justify-content:center;width:100%;padding:var(--pagination-padding-y) var(--pagination-padding-x)}@media(max-width:35.98rem){.tedi-pagination{flex-direction:column;gap:var(--layout-grid-gutters-08)}}.tedi-pagination--align-left .tedi-pagination__slot-start,.tedi-pagination--align-left .tedi-pagination__slot-end,.tedi-pagination--align-right .tedi-pagination__slot-start,.tedi-pagination--align-right .tedi-pagination__slot-end{flex:0 0 auto;justify-content:flex-start}.tedi-pagination--align-left{justify-content:flex-start}@media(max-width:35.98rem){.tedi-pagination--align-left{align-items:flex-start}}.tedi-pagination--align-right{justify-content:flex-end}@media(max-width:35.98rem){.tedi-pagination--align-right{align-items:flex-end}}.tedi-pagination--bg-white{background:var(--general-surface-primary)}.tedi-pagination--bg-transparent{background:transparent}.tedi-pagination--divider-top:not(.tedi-pagination--bg-transparent){border-top:var(--tedi-borders-01) solid var(--general-border-secondary)}.tedi-pagination--divider-bottom:not(.tedi-pagination--bg-transparent){border-bottom:var(--tedi-borders-01) solid var(--general-border-secondary)}.tedi-pagination--no-pager .tedi-pagination__slot-center,.tedi-pagination--align-left.tedi-pagination--no-results .tedi-pagination__slot-start,.tedi-pagination--align-left.tedi-pagination--no-page-size .tedi-pagination__slot-end,.tedi-pagination--align-right.tedi-pagination--no-results .tedi-pagination__slot-start,.tedi-pagination--align-right.tedi-pagination--no-page-size .tedi-pagination__slot-end{display:none}.tedi-pagination__status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border:0;clip-path:inset(50%)}.tedi-pagination__slot-start{display:inline-flex;flex:1 1 0;align-items:center;justify-content:flex-start}.tedi-pagination__slot-center{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center}@media(max-width:35.98rem){.tedi-pagination__slot-center{align-self:stretch}}.tedi-pagination__slot-end{display:flex;flex:1 1 0;align-items:center;justify-content:flex-end}.tedi-pagination__results{flex:0 0 auto;font-family:var(--family-default);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height);color:var(--general-text-secondary);white-space:nowrap}@media(max-width:47.98rem){.tedi-pagination__results{font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height)}}.tedi-pagination__nav{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;justify-content:center}@media(max-width:47.98rem){.tedi-pagination__nav{display:grid;grid-template-columns:var(--button-sm-icon-size) auto var(--button-sm-icon-size)}}@media(max-width:35.98rem){.tedi-pagination__nav{grid-template-columns:1fr auto 1fr;width:100%}}@media(max-width:47.98rem){.tedi-pagination--arrow-labels .tedi-pagination__nav{display:flex}}.tedi-pagination__list{display:flex;flex-wrap:nowrap;gap:var(--layout-grid-gutters-08);align-items:center;padding:0;margin:0;list-style:none}.tedi-pagination__item{display:inline-flex;align-items:center;justify-content:center}.tedi-pagination__item--ellipsis{width:var(--pagination-button-size);height:var(--pagination-button-size);font-family:var(--family-default);font-size:var(--body-small-regular-size);line-height:var(--body-small-regular-line-height);color:var(--general-text-secondary);-webkit-user-select:none;user-select:none}.tedi-pagination__page{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:var(--pagination-button-size);height:var(--pagination-button-size);padding:0 var(--layout-grid-gutters-04);font-family:var(--family-default);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height);color:var(--general-text-secondary);cursor:pointer;background:transparent;border:none;border-radius:var(--button-radius-default)}.tedi-pagination__page:before{position:absolute;inset:-4px;content:\"\"}.tedi-pagination__page:hover{color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-pagination__page:active{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-pagination__page:focus-visible{color:var(--button-main-neutral-text-focus);outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-pagination__page--selected{color:var(--general-text-white);cursor:default;background:var(--general-surface-brand-secondary)}.tedi-pagination__page--selected:hover,.tedi-pagination__page--selected:active,.tedi-pagination__page--selected:focus-visible{color:var(--general-text-white);background:var(--general-surface-brand-secondary)}@media(max-width:47.98rem){.tedi-pagination__nav-button--previous{grid-column:1;justify-self:end}}@media(max-width:47.98rem){.tedi-pagination__nav-button--next{grid-column:3;justify-self:start}}.tedi-pagination__mobile-trigger{display:inline-flex;gap:var(--form-field-inner-spacing);align-items:center;justify-self:center;min-height:var(--form-field-height-sm);padding:var(--form-field-padding-y-sm) var(--form-field-padding-x-md-default);color:var(--form-input-text-filled);cursor:pointer;background:var(--form-input-background-default);border:var(--tedi-borders-01) solid var(--form-input-border-default);border-radius:var(--form-field-radius)}@media(max-width:47.98rem){.tedi-pagination__mobile-trigger{grid-column:2}}.tedi-pagination__mobile-trigger:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-pagination__mobile-trigger-label{display:inline-flex;gap:var(--layout-grid-gutters-04);align-items:center;font-family:var(--family-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height)}.tedi-pagination__mobile-trigger-label strong{font-weight:var(--body-bold-weight);color:var(--general-text-brand)}.tedi-pagination__page-size{display:flex;gap:var(--form-field-inner-spacing);align-items:center;justify-content:flex-end;min-width:0}@media(max-width:35.98rem){.tedi-pagination__page-size{flex-direction:column;gap:var(--layout-grid-gutters-04);align-items:center;justify-content:center}}@media(max-width:35.98rem){.tedi-pagination--align-left .tedi-pagination__page-size{align-items:flex-start}}@media(max-width:35.98rem){.tedi-pagination--align-right .tedi-pagination__page-size{align-items:flex-end}}.tedi-pagination__page-size-label{font-family:var(--family-default);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height);color:var(--general-text-secondary);white-space:nowrap;cursor:default}@media(max-width:47.98rem){.tedi-pagination__page-size-label{font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height)}}.tedi-pagination__page-size-select.tedi-select{width:auto;min-width:96px}.tedi-pagination__page-size-trigger{display:inline-flex;gap:var(--form-field-inner-spacing);align-items:center;min-height:var(--form-field-height-sm);padding:var(--form-field-padding-y-sm) var(--form-field-padding-x-md-default);font-family:var(--family-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);color:var(--form-input-text-filled);cursor:pointer;background:var(--form-input-background-default);border:var(--tedi-borders-01) solid var(--form-input-border-default);border-radius:var(--form-field-radius)}.tedi-pagination__page-size-trigger:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: SelectComponent, selector: "tedi-select", inputs: ["inputId", "name", "label", "tooltip", "ariaLabelledby", "ariaLabel", "required", "placeholder", "state", "size", "clearable", "showClearOnInteraction", "dropdownWidthRef", "dropdownAlign", "feedbackText", "options", "bindLabel", "bindValue", "value", "allowMultiple", "groupBy", "showSelectAll", "selectableGroups", "isTagRemovable", "multiRow", "tagEllipsis", "ellipsis", "compareWith", "disabledKey", "noOptionsMessage", "maxDropdownHeight", "hideOnScroll", "dropdownType", "virtualScroll", "virtualItemSize", "searchable", "searchFn", "clearSearchOnSelect"], outputs: ["selectionChange", "searchChange", "opened", "closed", "cleared"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
11234
11253
|
}
|
|
11235
11254
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: PaginationComponent, decorators: [{
|
|
11236
11255
|
type: Component,
|
|
11237
11256
|
args: [{ selector: "tedi-pagination", standalone: true, imports: [ButtonComponent, IconComponent, SelectComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
11238
11257
|
"[class]": "hostClasses()",
|
|
11239
11258
|
"data-name": "tedi-pagination",
|
|
11240
|
-
}, template: "<span\n class=\"tedi-pagination__status\"\n role=\"status\"\n aria-live=\"polite\"\n aria-atomic=\"true\"\n>\n {{ statusText() }}\n</span>\n\n<div class=\"tedi-pagination__slot-start\">\n @if (showResults()) {\n @if (customResults()) {\n <ng-content select=\"[tediPaginationResults]\" />\n } @else {\n <span class=\"tedi-pagination__results\">\n {{ mergedLabels().results(totalItems()!) }}\n </span>\n }\n }\n</div>\n\n<div class=\"tedi-pagination__slot-center\">\n @if (showPager()) {\n <nav\n class=\"tedi-pagination__nav\"\n [attr.aria-label]=\"mergedLabels().ariaLabel\"\n >\n @if (showPrevious()) {\n <button\n tedi-button\n type=\"button\"\n size=\"small\"\n [variant]=\"resolvedArrowVariant()\"\n class=\"tedi-pagination__nav-button tedi-pagination__nav-button--previous\"\n [attr.aria-label]=\"\n resolvedShowArrowLabels() ? null : mergedLabels().previous\n \"\n [disabled]=\"previousItem().disabled\"\n (click)=\"handlePageChange(previousItem().page)\"\n >\n <tedi-icon [name]=\"previousIcon()\" />\n @if (resolvedShowArrowLabels()) {\n <span>{{ mergedLabels().previous }}</span>\n }\n </button>\n }\n\n @if (!useCompactPicker()) {\n <ul class=\"tedi-pagination__list\">\n @for (item of pageItems(); track $index) {\n @if (item.type === \"ellipsis\") {\n <li\n class=\"tedi-pagination__item tedi-pagination__item--ellipsis\"\n aria-hidden=\"true\"\n >\n \u2026\n </li>\n } @else {\n <li class=\"tedi-pagination__item\">\n <button\n type=\"button\"\n class=\"tedi-pagination__page\"\n [class.tedi-pagination__page--selected]=\"item.selected\"\n [attr.aria-label]=\"\n item.selected\n ? mergedLabels().currentPageAriaLabel(item.page!)\n : mergedLabels().pageAriaLabel(item.page!)\n \"\n [attr.aria-current]=\"item.selected ? 'page' : null\"\n (click)=\"handlePageChange(item.page)\"\n >\n {{ item.page }}\n </button>\n </li>\n }\n }\n </ul>\n }\n @if (useCompactPicker()) {\n <button\n type=\"button\"\n class=\"tedi-pagination__mobile-trigger\"\n aria-haspopup=\"dialog\"\n [attr.aria-expanded]=\"isMobileModalOpen()\"\n [attr.aria-label]=\"mobileTriggerAriaLabel()\"\n (click)=\"openMobilePicker()\"\n >\n <span\n class=\"tedi-pagination__mobile-trigger-label\"\n aria-hidden=\"true\"\n >\n <strong>{{ currentPage() }}</strong>\n <span>/</span>\n <span>{{ pageCount() }}</span>\n </span>\n <tedi-icon name=\"arrow_drop_down\" />\n </button>\n }\n\n @if (showNext()) {\n <button\n tedi-button\n type=\"button\"\n size=\"small\"\n [variant]=\"resolvedArrowVariant()\"\n class=\"tedi-pagination__nav-button tedi-pagination__nav-button--next\"\n [attr.aria-label]=\"\n resolvedShowArrowLabels() ? null : mergedLabels().next\n \"\n [disabled]=\"nextItem().disabled\"\n (click)=\"handlePageChange(nextItem().page)\"\n >\n @if (resolvedShowArrowLabels()) {\n <span>{{ mergedLabels().next }}</span>\n }\n <tedi-icon [name]=\"nextIcon()\" />\n </button>\n }\n </nav>\n }\n</div>\n\n<div class=\"tedi-pagination__slot-end\">\n @if (showPageSizeSelect()) {\n <div class=\"tedi-pagination__page-size\">\n @if (useCompactPicker()) {\n <span class=\"tedi-pagination__page-size-label\">\n {{ mergedLabels().pageSize }}\n </span>\n <button\n type=\"button\"\n class=\"tedi-pagination__page-size-trigger\"\n aria-haspopup=\"dialog\"\n [attr.aria-expanded]=\"isPageSizeModalOpen()\"\n [attr.aria-label]=\"mobilePageSizeAriaLabel()\"\n (click)=\"openPageSizePicker()\"\n >\n <span aria-hidden=\"true\">{{ selectedPageSizeLabel() }}</span>\n <tedi-icon name=\"arrow_drop_down\" />\n </button>\n } @else {\n <span class=\"tedi-pagination__page-size-label\" [id]=\"pageSizeLabelId\">\n {{ mergedLabels().pageSize }}\n </span>\n <tedi-select\n class=\"tedi-pagination__page-size-select\"\n [inputId]=\"pageSizeInputId\"\n [ariaLabelledby]=\"pageSizeLabelId\"\n size=\"small\"\n [options]=\"pageSizeSelectOptions()\"\n bindLabel=\"label\"\n bindValue=\"value\"\n dropdownAlign=\"end\"\n [value]=\"pageSize()\"\n (selectionChange)=\"handlePageSizeChange($event)\"\n />\n }\n </div>\n }\n</div>\n", styles: [".tedi-pagination{display:flex;flex-flow:row wrap;gap:var(--layout-grid-gutters-16);align-items:center;justify-content:center;width:100%;padding:var(--pagination-padding-y) var(--pagination-padding-x)}@media(max-width:35.98rem){.tedi-pagination{flex-direction:column;gap:var(--layout-grid-gutters-08)}}.tedi-pagination--align-left .tedi-pagination__slot-start,.tedi-pagination--align-left .tedi-pagination__slot-end,.tedi-pagination--align-right .tedi-pagination__slot-start,.tedi-pagination--align-right .tedi-pagination__slot-end{flex:0 0 auto;justify-content:flex-start}.tedi-pagination--align-left{justify-content:flex-start}@media(max-width:35.98rem){.tedi-pagination--align-left{align-items:flex-start}}.tedi-pagination--align-right{justify-content:flex-end}@media(max-width:35.98rem){.tedi-pagination--align-right{align-items:flex-end}}.tedi-pagination--bg-white{background:var(--general-surface-primary)}.tedi-pagination--bg-transparent{background:transparent}.tedi-pagination--divider-top:not(.tedi-pagination--bg-transparent){border-top:var(--tedi-borders-01) solid var(--general-border-secondary)}.tedi-pagination--divider-bottom:not(.tedi-pagination--bg-transparent){border-bottom:var(--tedi-borders-01) solid var(--general-border-secondary)}.tedi-pagination--no-pager .tedi-pagination__slot-center,.tedi-pagination--align-left.tedi-pagination--no-results .tedi-pagination__slot-start,.tedi-pagination--align-left.tedi-pagination--no-page-size .tedi-pagination__slot-end,.tedi-pagination--align-right.tedi-pagination--no-results .tedi-pagination__slot-start,.tedi-pagination--align-right.tedi-pagination--no-page-size .tedi-pagination__slot-end{display:none}.tedi-pagination__status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border:0;clip-path:inset(50%)}.tedi-pagination__slot-start{display:inline-flex;flex:1 1 0;align-items:center;justify-content:flex-start}.tedi-pagination__slot-center{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center}@media(max-width:35.98rem){.tedi-pagination__slot-center{align-self:stretch}}.tedi-pagination__slot-end{display:flex;flex:1 1 0;align-items:center;justify-content:flex-end}.tedi-pagination__results{flex:0 0 auto;font-family:var(--family-default);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height);color:var(--general-text-secondary);white-space:nowrap}@media(max-width:47.98rem){.tedi-pagination__results{font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height)}}.tedi-pagination__nav{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;justify-content:center}@media(max-width:47.98rem){.tedi-pagination__nav{display:grid;grid-template-columns:var(--button-sm-icon-size) auto var(--button-sm-icon-size)}}@media(max-width:35.98rem){.tedi-pagination__nav{grid-template-columns:1fr auto 1fr;width:100%}}@media(max-width:47.98rem){.tedi-pagination--arrow-labels .tedi-pagination__nav{display:flex}}.tedi-pagination__list{display:flex;flex-wrap:nowrap;gap:var(--layout-grid-gutters-08);align-items:center;padding:0;margin:0;list-style:none}.tedi-pagination__item{display:inline-flex;align-items:center;justify-content:center}.tedi-pagination__item--ellipsis{width:var(--pagination-button-size);height:var(--pagination-button-size);font-family:var(--family-default);font-size:var(--body-small-regular-size);line-height:var(--body-small-regular-line-height);color:var(--general-text-secondary);-webkit-user-select:none;user-select:none}.tedi-pagination__page{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:var(--pagination-button-size);height:var(--pagination-button-size);padding:0 var(--layout-grid-gutters-04);font-family:var(--family-default);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height);color:var(--general-text-secondary);cursor:pointer;background:transparent;border:none;border-radius:var(--button-radius-default)}.tedi-pagination__page:before{position:absolute;inset:-4px;content:\"\"}.tedi-pagination__page:hover{color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-pagination__page:active{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-pagination__page:focus-visible{color:var(--button-main-neutral-text-focus);outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-pagination__page--selected{color:var(--general-text-white);cursor:default;background:var(--general-surface-brand-secondary)}.tedi-pagination__page--selected:hover,.tedi-pagination__page--selected:active,.tedi-pagination__page--selected:focus-visible{color:var(--general-text-white);background:var(--general-surface-brand-secondary)}@media(max-width:47.98rem){.tedi-pagination__nav-button--previous{grid-column:1;justify-self:end}}@media(max-width:47.98rem){.tedi-pagination__nav-button--next{grid-column:3;justify-self:start}}.tedi-pagination__mobile-trigger{display:inline-flex;gap:var(--form-field-inner-spacing);align-items:center;justify-self:center;min-height:var(--form-field-height-sm);padding:var(--form-field-padding-y-sm) var(--form-field-padding-x-md-default);color:var(--form-input-text-filled);cursor:pointer;background:var(--form-input-background-default);border:var(--tedi-borders-01) solid var(--form-input-border-default);border-radius:var(--form-field-radius)}@media(max-width:47.98rem){.tedi-pagination__mobile-trigger{grid-column:2}}.tedi-pagination__mobile-trigger:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-pagination__mobile-trigger-label{display:inline-flex;gap:var(--layout-grid-gutters-04);align-items:center;font-family:var(--family-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height)}.tedi-pagination__mobile-trigger-label strong{font-weight:var(--body-bold-weight);color:var(--general-text-brand)}.tedi-pagination__page-size{display:flex;gap:var(--form-field-inner-spacing);align-items:center;justify-content:flex-end;min-width:0}@media(max-width:35.98rem){.tedi-pagination__page-size{flex-direction:column;gap:var(--layout-grid-gutters-04);align-items:center;justify-content:center}}@media(max-width:35.98rem){.tedi-pagination--align-left .tedi-pagination__page-size{align-items:flex-start}}@media(max-width:35.98rem){.tedi-pagination--align-right .tedi-pagination__page-size{align-items:flex-end}}.tedi-pagination__page-size-label{font-family:var(--family-default);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height);color:var(--general-text-secondary);white-space:nowrap;cursor:default}@media(max-width:47.98rem){.tedi-pagination__page-size-label{font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height)}}.tedi-pagination__page-size-select.tedi-select{width:auto;min-width:96px}.tedi-pagination__page-size-trigger{display:inline-flex;gap:var(--form-field-inner-spacing);align-items:center;min-height:var(--form-field-height-sm);padding:var(--form-field-padding-y-sm) var(--form-field-padding-x-md-default);font-family:var(--family-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);color:var(--form-input-text-filled);cursor:pointer;background:var(--form-input-background-default);border:var(--tedi-borders-01) solid var(--form-input-border-default);border-radius:var(--form-field-radius)}.tedi-pagination__page-size-trigger:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}\n"] }]
|
|
11259
|
+
}, template: "<span\n class=\"tedi-pagination__status\"\n role=\"status\"\n aria-live=\"polite\"\n aria-atomic=\"true\"\n>\n {{ statusText() }}\n</span>\n\n<div class=\"tedi-pagination__slot-start\">\n @if (showResults()) {\n @if (customResults()) {\n <ng-content select=\"[tediPaginationResults]\" />\n } @else {\n <span class=\"tedi-pagination__results\">\n {{ mergedLabels().results(totalItems()!) }}\n </span>\n }\n }\n</div>\n\n<div class=\"tedi-pagination__slot-center\">\n @if (showPager()) {\n <nav\n class=\"tedi-pagination__nav\"\n [attr.aria-label]=\"mergedLabels().ariaLabel\"\n >\n @if (showPrevious()) {\n <button\n tedi-button\n type=\"button\"\n size=\"small\"\n [variant]=\"resolvedArrowVariant()\"\n class=\"tedi-pagination__nav-button tedi-pagination__nav-button--previous\"\n [attr.aria-label]=\"\n resolvedShowArrowLabels() ? null : mergedLabels().previous\n \"\n [disabled]=\"previousItem().disabled\"\n (click)=\"handlePageChange(previousItem().page)\"\n >\n <tedi-icon [name]=\"previousIcon()\" />\n @if (resolvedShowArrowLabels()) {\n <span>{{ mergedLabels().previous }}</span>\n }\n </button>\n }\n\n @if (!useCompactPicker()) {\n <ul class=\"tedi-pagination__list\">\n @for (item of pageItems(); track $index) {\n @if (item.type === \"ellipsis\") {\n <li\n class=\"tedi-pagination__item tedi-pagination__item--ellipsis\"\n aria-hidden=\"true\"\n >\n \u2026\n </li>\n } @else {\n <li class=\"tedi-pagination__item\">\n <button\n type=\"button\"\n class=\"tedi-pagination__page\"\n [class.tedi-pagination__page--selected]=\"item.selected\"\n [attr.aria-label]=\"\n item.selected\n ? mergedLabels().currentPageAriaLabel(item.page!)\n : mergedLabels().pageAriaLabel(item.page!)\n \"\n [attr.aria-current]=\"item.selected ? 'page' : null\"\n (click)=\"handlePageChange(item.page)\"\n >\n {{ item.page }}\n </button>\n </li>\n }\n }\n </ul>\n }\n @if (useCompactPicker()) {\n <button\n type=\"button\"\n class=\"tedi-pagination__mobile-trigger\"\n aria-haspopup=\"dialog\"\n [attr.aria-expanded]=\"isMobileModalOpen()\"\n [attr.aria-label]=\"mobileTriggerAriaLabel()\"\n (click)=\"openMobilePicker()\"\n >\n <span\n class=\"tedi-pagination__mobile-trigger-label\"\n aria-hidden=\"true\"\n >\n <strong>{{ currentPage() }}</strong>\n <span>/</span>\n <span>{{ pageCount() }}</span>\n </span>\n <tedi-icon name=\"arrow_drop_down\" />\n </button>\n }\n\n @if (showNext()) {\n <button\n tedi-button\n type=\"button\"\n size=\"small\"\n [variant]=\"resolvedArrowVariant()\"\n class=\"tedi-pagination__nav-button tedi-pagination__nav-button--next\"\n [attr.aria-label]=\"\n resolvedShowArrowLabels() ? null : mergedLabels().next\n \"\n [disabled]=\"nextItem().disabled\"\n (click)=\"handlePageChange(nextItem().page)\"\n >\n @if (resolvedShowArrowLabels()) {\n <span>{{ mergedLabels().next }}</span>\n }\n <tedi-icon [name]=\"nextIcon()\" />\n </button>\n }\n </nav>\n }\n</div>\n\n<div class=\"tedi-pagination__slot-end\">\n @if (showPageSizeSelect()) {\n <div class=\"tedi-pagination__page-size\">\n @if (useCompactPicker()) {\n <span class=\"tedi-pagination__page-size-label\">\n {{ mergedLabels().pageSize }}\n </span>\n <button\n type=\"button\"\n class=\"tedi-pagination__page-size-trigger\"\n aria-haspopup=\"dialog\"\n [attr.aria-expanded]=\"isPageSizeModalOpen()\"\n [attr.aria-label]=\"mobilePageSizeAriaLabel()\"\n (click)=\"openPageSizePicker()\"\n >\n <span aria-hidden=\"true\">{{ selectedPageSizeLabel() }}</span>\n <tedi-icon name=\"arrow_drop_down\" />\n </button>\n } @else {\n <span class=\"tedi-pagination__page-size-label\" [id]=\"pageSizeLabelId\">\n {{ mergedLabels().pageSize }}\n </span>\n <tedi-select\n class=\"tedi-pagination__page-size-select\"\n [inputId]=\"pageSizeInputId\"\n [ariaLabelledby]=\"pageSizeLabelId\"\n size=\"small\"\n [clearable]=\"false\"\n [options]=\"pageSizeSelectOptions()\"\n bindLabel=\"label\"\n bindValue=\"value\"\n dropdownAlign=\"end\"\n [value]=\"pageSize()\"\n (selectionChange)=\"handlePageSizeChange($event)\"\n />\n }\n </div>\n }\n</div>\n", styles: [".tedi-pagination{display:flex;flex-flow:row wrap;gap:var(--layout-grid-gutters-16);align-items:center;justify-content:center;width:100%;padding:var(--pagination-padding-y) var(--pagination-padding-x)}@media(max-width:35.98rem){.tedi-pagination{flex-direction:column;gap:var(--layout-grid-gutters-08)}}.tedi-pagination--align-left .tedi-pagination__slot-start,.tedi-pagination--align-left .tedi-pagination__slot-end,.tedi-pagination--align-right .tedi-pagination__slot-start,.tedi-pagination--align-right .tedi-pagination__slot-end{flex:0 0 auto;justify-content:flex-start}.tedi-pagination--align-left{justify-content:flex-start}@media(max-width:35.98rem){.tedi-pagination--align-left{align-items:flex-start}}.tedi-pagination--align-right{justify-content:flex-end}@media(max-width:35.98rem){.tedi-pagination--align-right{align-items:flex-end}}.tedi-pagination--bg-white{background:var(--general-surface-primary)}.tedi-pagination--bg-transparent{background:transparent}.tedi-pagination--divider-top:not(.tedi-pagination--bg-transparent){border-top:var(--tedi-borders-01) solid var(--general-border-secondary)}.tedi-pagination--divider-bottom:not(.tedi-pagination--bg-transparent){border-bottom:var(--tedi-borders-01) solid var(--general-border-secondary)}.tedi-pagination--no-pager .tedi-pagination__slot-center,.tedi-pagination--align-left.tedi-pagination--no-results .tedi-pagination__slot-start,.tedi-pagination--align-left.tedi-pagination--no-page-size .tedi-pagination__slot-end,.tedi-pagination--align-right.tedi-pagination--no-results .tedi-pagination__slot-start,.tedi-pagination--align-right.tedi-pagination--no-page-size .tedi-pagination__slot-end{display:none}.tedi-pagination__status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border:0;clip-path:inset(50%)}.tedi-pagination__slot-start{display:inline-flex;flex:1 1 0;align-items:center;justify-content:flex-start}.tedi-pagination__slot-center{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center}@media(max-width:35.98rem){.tedi-pagination__slot-center{align-self:stretch}}.tedi-pagination__slot-end{display:flex;flex:1 1 0;align-items:center;justify-content:flex-end}.tedi-pagination__results{flex:0 0 auto;font-family:var(--family-default);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height);color:var(--general-text-secondary);white-space:nowrap}@media(max-width:47.98rem){.tedi-pagination__results{font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height)}}.tedi-pagination__nav{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;justify-content:center}@media(max-width:47.98rem){.tedi-pagination__nav{display:grid;grid-template-columns:var(--button-sm-icon-size) auto var(--button-sm-icon-size)}}@media(max-width:35.98rem){.tedi-pagination__nav{grid-template-columns:1fr auto 1fr;width:100%}}@media(max-width:47.98rem){.tedi-pagination--arrow-labels .tedi-pagination__nav{display:flex}}.tedi-pagination__list{display:flex;flex-wrap:nowrap;gap:var(--layout-grid-gutters-08);align-items:center;padding:0;margin:0;list-style:none}.tedi-pagination__item{display:inline-flex;align-items:center;justify-content:center}.tedi-pagination__item--ellipsis{width:var(--pagination-button-size);height:var(--pagination-button-size);font-family:var(--family-default);font-size:var(--body-small-regular-size);line-height:var(--body-small-regular-line-height);color:var(--general-text-secondary);-webkit-user-select:none;user-select:none}.tedi-pagination__page{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:var(--pagination-button-size);height:var(--pagination-button-size);padding:0 var(--layout-grid-gutters-04);font-family:var(--family-default);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height);color:var(--general-text-secondary);cursor:pointer;background:transparent;border:none;border-radius:var(--button-radius-default)}.tedi-pagination__page:before{position:absolute;inset:-4px;content:\"\"}.tedi-pagination__page:hover{color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-pagination__page:active{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-pagination__page:focus-visible{color:var(--button-main-neutral-text-focus);outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-pagination__page--selected{color:var(--general-text-white);cursor:default;background:var(--general-surface-brand-secondary)}.tedi-pagination__page--selected:hover,.tedi-pagination__page--selected:active,.tedi-pagination__page--selected:focus-visible{color:var(--general-text-white);background:var(--general-surface-brand-secondary)}@media(max-width:47.98rem){.tedi-pagination__nav-button--previous{grid-column:1;justify-self:end}}@media(max-width:47.98rem){.tedi-pagination__nav-button--next{grid-column:3;justify-self:start}}.tedi-pagination__mobile-trigger{display:inline-flex;gap:var(--form-field-inner-spacing);align-items:center;justify-self:center;min-height:var(--form-field-height-sm);padding:var(--form-field-padding-y-sm) var(--form-field-padding-x-md-default);color:var(--form-input-text-filled);cursor:pointer;background:var(--form-input-background-default);border:var(--tedi-borders-01) solid var(--form-input-border-default);border-radius:var(--form-field-radius)}@media(max-width:47.98rem){.tedi-pagination__mobile-trigger{grid-column:2}}.tedi-pagination__mobile-trigger:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-pagination__mobile-trigger-label{display:inline-flex;gap:var(--layout-grid-gutters-04);align-items:center;font-family:var(--family-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height)}.tedi-pagination__mobile-trigger-label strong{font-weight:var(--body-bold-weight);color:var(--general-text-brand)}.tedi-pagination__page-size{display:flex;gap:var(--form-field-inner-spacing);align-items:center;justify-content:flex-end;min-width:0}@media(max-width:35.98rem){.tedi-pagination__page-size{flex-direction:column;gap:var(--layout-grid-gutters-04);align-items:center;justify-content:center}}@media(max-width:35.98rem){.tedi-pagination--align-left .tedi-pagination__page-size{align-items:flex-start}}@media(max-width:35.98rem){.tedi-pagination--align-right .tedi-pagination__page-size{align-items:flex-end}}.tedi-pagination__page-size-label{font-family:var(--family-default);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height);color:var(--general-text-secondary);white-space:nowrap;cursor:default}@media(max-width:47.98rem){.tedi-pagination__page-size-label{font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height)}}.tedi-pagination__page-size-select.tedi-select{width:auto;min-width:96px}.tedi-pagination__page-size-trigger{display:inline-flex;gap:var(--form-field-inner-spacing);align-items:center;min-height:var(--form-field-height-sm);padding:var(--form-field-padding-y-sm) var(--form-field-padding-x-md-default);font-family:var(--family-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);color:var(--form-input-text-filled);cursor:pointer;background:var(--form-input-background-default);border:var(--tedi-borders-01) solid var(--form-input-border-default);border-radius:var(--form-field-radius)}.tedi-pagination__page-size-trigger:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}\n"] }]
|
|
11241
11260
|
}], ctorParameters: () => [], propDecorators: { pageCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageCount", required: true }] }], page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }], totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], boundaryCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "boundaryCount", required: false }] }], siblingCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "siblingCount", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }], dividerPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "dividerPosition", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], hideResults: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideResults", required: false }] }], hidePageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidePageSize", required: false }] }], hidePager: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidePager", required: false }] }], hideArrows: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideArrows", required: false }] }], disableArrowsAtBoundary: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableArrowsAtBoundary", required: false }] }], arrowVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrowVariant", required: false }] }], showArrowLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showArrowLabels", required: false }] }], previousIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousIcon", required: false }] }], nextIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextIcon", required: false }] }], showModalTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showModalTitle", required: false }] }], xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "xl", required: false }] }], xxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "xxl", required: false }] }], customResults: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TediPaginationResultsDirective), { isSignal: true }] }] } });
|
|
11242
11261
|
|
|
11243
11262
|
class TediTableHeaderButtonComponent {
|