ng-tailwind 4.3.32 → 4.3.34

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.
@@ -72,10 +72,13 @@ export declare class NgtSelectComponent extends NgtBaseNgModel implements OnChan
72
72
  autoSelectUniqueOption: boolean;
73
73
  groupValue: (groupKey: string, cildren: any[]) => Object;
74
74
  trackBy: (item: any) => any;
75
+ sortSelectedItemsFn: (a: any, b: any) => any;
75
76
  /** Validation */
76
77
  isRequired: boolean;
77
78
  onLoadRemoteResource: EventEmitter<any>;
79
+ onSelectedItemRemove: EventEmitter<void>;
78
80
  onClear: EventEmitter<void>;
81
+ onClose: EventEmitter<void>;
79
82
  nativeName: string;
80
83
  ngtStyle: NgtStylizableService;
81
84
  ngSelectItems: any;
@@ -113,6 +116,7 @@ export declare class NgtSelectComponent extends NgtBaseNgModel implements OnChan
113
116
  getSelectClass(): string;
114
117
  private initNgSelectItems;
115
118
  private initComponentValidation;
119
+ private sortSelectedItems;
116
120
  private getElementTitle;
117
121
  private hasChangesBetweenModels;
118
122
  private updateValidations;
@@ -129,7 +133,7 @@ export declare class NgtSelectComponent extends NgtBaseNgModel implements OnChan
129
133
  private bindSubscriptions;
130
134
  private destroySubscriptions;
131
135
  static ɵfac: i0.ɵɵFactoryDeclaration<NgtSelectComponent, [{ optional: true; self: true; }, null, { optional: true; host: true; }, { optional: true; skipSelf: true; }, { optional: true; skipSelf: true; }, null, null, { optional: true; }]>;
132
- static ɵcmp: i0.ɵɵComponentDeclaration<NgtSelectComponent, "ngt-select", never, { "label": "label"; "labelIcon": "labelIcon"; "labelIconColor": "labelIconColor"; "helpTitle": "helpTitle"; "helpText": "helpText"; "helpTextColor": "helpTextColor"; "shining": "shining"; "loading": "loading"; "loadingText": "loadingText"; "notFoundText": "notFoundText"; "dropdownPosition": "dropdownPosition"; "typeToSearchText": "typeToSearchText"; "clearAllTooltip": "clearAllTooltip"; "placeholder": "placeholder"; "createText": "createText"; "labelForId": "labelForId"; "dropdownPanelMinHeight": "dropdownPanelMinHeight"; "helperReverseYPosition": "helperReverseYPosition"; "helperAutoXReverse": "helperAutoXReverse"; "name": "name"; "autoLoad": "autoLoad"; "allowCreate": "allowCreate"; "allowOriginalItemsUnselect": "allowOriginalItemsUnselect"; "isDisabled": "isDisabled"; "isReadonly": "isReadonly"; "remoteResource": "remoteResource"; "hideSelected": "hideSelected"; "bindLabel": "bindLabel"; "bindValue": "bindValue"; "items": "items"; "inputAttrs": "inputAttrs"; "closeOnSelect": "closeOnSelect"; "clearable": "clearable"; "groupBy": "groupBy"; "maxSelectedItems": "maxSelectedItems"; "multiple": "multiple"; "searchable": "searchable"; "clearSearchOnAdd": "clearSearchOnAdd"; "virtualScroll": "virtualScroll"; "tabIndex": "tabIndex"; "typeahead": "typeahead"; "guessCompareWith": "guessCompareWith"; "autoSelectUniqueOption": "autoSelectUniqueOption"; "groupValue": "groupValue"; "trackBy": "trackBy"; "isRequired": "isRequired"; "compareWith": "compareWith"; }, { "onLoadRemoteResource": "onLoadRemoteResource"; "onClear": "onClear"; }, ["ngtOptionTemplate", "ngtOptionSelectedTemplate", "ngtSelectHeaderTemplate"], never, false, never>;
136
+ static ɵcmp: i0.ɵɵComponentDeclaration<NgtSelectComponent, "ngt-select", never, { "label": "label"; "labelIcon": "labelIcon"; "labelIconColor": "labelIconColor"; "helpTitle": "helpTitle"; "helpText": "helpText"; "helpTextColor": "helpTextColor"; "shining": "shining"; "loading": "loading"; "loadingText": "loadingText"; "notFoundText": "notFoundText"; "dropdownPosition": "dropdownPosition"; "typeToSearchText": "typeToSearchText"; "clearAllTooltip": "clearAllTooltip"; "placeholder": "placeholder"; "createText": "createText"; "labelForId": "labelForId"; "dropdownPanelMinHeight": "dropdownPanelMinHeight"; "helperReverseYPosition": "helperReverseYPosition"; "helperAutoXReverse": "helperAutoXReverse"; "name": "name"; "autoLoad": "autoLoad"; "allowCreate": "allowCreate"; "allowOriginalItemsUnselect": "allowOriginalItemsUnselect"; "isDisabled": "isDisabled"; "isReadonly": "isReadonly"; "remoteResource": "remoteResource"; "hideSelected": "hideSelected"; "bindLabel": "bindLabel"; "bindValue": "bindValue"; "items": "items"; "inputAttrs": "inputAttrs"; "closeOnSelect": "closeOnSelect"; "clearable": "clearable"; "groupBy": "groupBy"; "maxSelectedItems": "maxSelectedItems"; "multiple": "multiple"; "searchable": "searchable"; "clearSearchOnAdd": "clearSearchOnAdd"; "virtualScroll": "virtualScroll"; "tabIndex": "tabIndex"; "typeahead": "typeahead"; "guessCompareWith": "guessCompareWith"; "autoSelectUniqueOption": "autoSelectUniqueOption"; "groupValue": "groupValue"; "trackBy": "trackBy"; "sortSelectedItemsFn": "sortSelectedItemsFn"; "isRequired": "isRequired"; "compareWith": "compareWith"; }, { "onLoadRemoteResource": "onLoadRemoteResource"; "onSelectedItemRemove": "onSelectedItemRemove"; "onClear": "onClear"; "onClose": "onClose"; }, ["ngtOptionTemplate", "ngtOptionSelectedTemplate", "ngtSelectHeaderTemplate"], never, false, never>;
133
137
  }
134
138
  export declare enum NgtSelectDropdownPanelHeight {
135
139
  AUTO = "auto",
@@ -146,7 +146,7 @@ export class NgtPaginationComponent {
146
146
  }
147
147
  }
148
148
  NgtPaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtPaginationComponent, deps: [{ token: i0.Injector }, { token: i1.NgtTranslateService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
149
- NgtPaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtPaginationComponent, selector: "ngt-pagination", inputs: { pagesInterval: "pagesInterval" }, outputs: { onPageChange: "onPageChange", onPerPageChange: "onPerPageChange" }, ngImport: i0, template: "<div class=\"{{ displayPagination ? 'flex' : 'hidden' }} items-center w-full h-full relative\">\n <ul class=\"flex justify-start\">\n <!-- FIRST -->\n <li (click)='goToFirstPage()' class=\"mr-2\">\n <ngt-action [ngtStyle]='ngtPaginationFirstLastButtonStyle'>\n <svg class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n aria-hidden=\"true\" focusable=\"false\"\n style=\"-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);\"\n preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 24 24\">\n <path\n d=\"M18.41 7.41L17 6l-6 6l6 6l1.41-1.41L13.83 12l4.58-4.59m-6 0L11 6l-6 6l6 6l1.41-1.41L7.83 12l4.58-4.59z\" />\n </svg>\n </ngt-action>\n </li>\n\n <!-- PREVIOUS -->\n <li (click)='goToPreviousPage()' class=\"mr-2\">\n <ngt-action [ngtStyle]='ngtPaginationNextPreviousButtonStyle'>\n <svg class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\"\n style=\"-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);\"\n preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 24 24\">\n <path d=\"M15.41 16.58L10.83 12l4.58-4.59L14 6l-6 6l6 6l1.41-1.42z\" />\n </svg>\n </ngt-action>\n </li>\n\n <!-- PREVIOUS SECTION -->\n <li *ngIf=\"displayPreviousSectionButton\" (click)='goToPreviousSection()' class=\"mr-2\">\n <ngt-action [ngtStyle]='ngtPaginationNextPreviousSectionButtonStyle'>\n <svg class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n <path\n d=\"M4 12a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm6 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm6 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4z\" />\n </svg>\n </ngt-action>\n </li>\n\n <ng-container *ngFor='let page of pages'>\n <ng-container *ngIf='page == pagination.page'>\n <li class=\"mr-2\">\n <ngt-action [ngtStyle]='ngtPaginationActivePageButtonStyle'>\n {{ page }}\n </ngt-action>\n </li>\n </ng-container>\n\n <ng-container *ngIf='page !== pagination.page'>\n <li (click)='goToPage(page)' class=\"mr-2\">\n <ngt-action [ngtStyle]='ngtPaginationPageButtonStyle'>\n {{ page }}\n </ngt-action>\n </li>\n </ng-container>\n\n </ng-container>\n\n <!-- NEXT SECTION -->\n <li *ngIf=\"displayNextSectionButton\" (click)='goToNextSection()' class=\"mr-2\">\n <ngt-action [ngtStyle]='ngtPaginationNextPreviousSectionButtonStyle'>\n <svg class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n <path\n d=\"M4 12a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm6 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm6 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4z\" />\n </svg>\n </ngt-action>\n </li>\n\n <!-- NEXT -->\n <li (click)='goToNextPage()' class=\"mr-2\">\n <ngt-action [ngtStyle]='ngtPaginationNextPreviousButtonStyle'>\n <svg class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\"\n style=\"-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);\"\n preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 24 24\">\n <path d=\"M8.59 16.58L13.17 12L8.59 7.41L10 6l6 6l-6 6l-1.41-1.42z\" />\n </svg>\n </ngt-action>\n </li>\n\n <!-- LAST -->\n <li (click)='goToLastPage()' class=\"mr-2\">\n <ngt-action [ngtStyle]='ngtPaginationFirstLastButtonStyle'>\n <svg class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n aria-hidden=\"true\" focusable=\"false\"\n style=\"-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);\"\n preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 24 24\">\n <path\n d=\"M5.59 7.41L7 6l6 6l-6 6l-1.41-1.41L10.17 12L5.59 7.41m6 0L13 6l6 6l-6 6l-1.41-1.41L16.17 12l-4.58-4.59z\" />\n </svg>\n </ngt-action>\n </li>\n </ul>\n\n <!-- REGISTERS PER PAGE -->\n <div class=\"flex items-center w-auto absolute right-0\">\n <ngt-select class='block w-20 left-0' [searchable]='false' [clearable]='false' dropdownPosition='top'\n [items]='registersPerPageOptions' name='registersPerPageSelect' [(ngModel)]=\"currentRegistersPerPage\"\n h='h-auto' (ngModelChange)='onRegistersPerPageChange($event)' ngt-stylizable>\n <ng-template let-item=\"item\" let-index=\"index\" ngt-select-option>\n {{ item ? item : '' }}\n </ng-template>\n </ngt-select>\n\n <P class=\"ml-2\">\n {{ ngtTranslateService.ngtPagination(pagination.from, pagination.to, pagination.total) }}\n </P>\n </div>\n</div>", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.NgtStylizableDirective, selector: "[ngt-stylizable]", inputs: ["color", "color.text", "color.bg", "color.border", "h", "w", "p", "px", "py", "pt", "pr", "pb", "pl", "m", "mx", "my", "mt", "mr", "mb", "ml", "border", "shadow", "rounded", "font", "text", "breakWords", "overflow", "position", "justifyContent", "cursor", "fontCase"] }, { kind: "component", type: i5.NgtActionComponent, selector: "ngt-action", inputs: ["href", "icon", "ngtStyle", "isDisabled"] }, { kind: "component", type: i6.NgtSelectComponent, selector: "ngt-select", inputs: ["label", "labelIcon", "labelIconColor", "helpTitle", "helpText", "helpTextColor", "shining", "loading", "loadingText", "notFoundText", "dropdownPosition", "typeToSearchText", "clearAllTooltip", "placeholder", "createText", "labelForId", "dropdownPanelMinHeight", "helperReverseYPosition", "helperAutoXReverse", "name", "autoLoad", "allowCreate", "allowOriginalItemsUnselect", "isDisabled", "isReadonly", "remoteResource", "hideSelected", "bindLabel", "bindValue", "items", "inputAttrs", "closeOnSelect", "clearable", "groupBy", "maxSelectedItems", "multiple", "searchable", "clearSearchOnAdd", "virtualScroll", "tabIndex", "typeahead", "guessCompareWith", "autoSelectUniqueOption", "groupValue", "trackBy", "isRequired", "compareWith"], outputs: ["onLoadRemoteResource", "onClear"] }, { kind: "directive", type: i7.NgtSelectOptionTmp, selector: "[ngt-select-option]" }] });
149
+ NgtPaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtPaginationComponent, selector: "ngt-pagination", inputs: { pagesInterval: "pagesInterval" }, outputs: { onPageChange: "onPageChange", onPerPageChange: "onPerPageChange" }, ngImport: i0, template: "<div class=\"{{ displayPagination ? 'flex' : 'hidden' }} items-center w-full h-full relative\">\n <ul class=\"flex justify-start\">\n <!-- FIRST -->\n <li (click)='goToFirstPage()' class=\"mr-2\">\n <ngt-action [ngtStyle]='ngtPaginationFirstLastButtonStyle'>\n <svg class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n aria-hidden=\"true\" focusable=\"false\"\n style=\"-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);\"\n preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 24 24\">\n <path\n d=\"M18.41 7.41L17 6l-6 6l6 6l1.41-1.41L13.83 12l4.58-4.59m-6 0L11 6l-6 6l6 6l1.41-1.41L7.83 12l4.58-4.59z\" />\n </svg>\n </ngt-action>\n </li>\n\n <!-- PREVIOUS -->\n <li (click)='goToPreviousPage()' class=\"mr-2\">\n <ngt-action [ngtStyle]='ngtPaginationNextPreviousButtonStyle'>\n <svg class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\"\n style=\"-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);\"\n preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 24 24\">\n <path d=\"M15.41 16.58L10.83 12l4.58-4.59L14 6l-6 6l6 6l1.41-1.42z\" />\n </svg>\n </ngt-action>\n </li>\n\n <!-- PREVIOUS SECTION -->\n <li *ngIf=\"displayPreviousSectionButton\" (click)='goToPreviousSection()' class=\"mr-2\">\n <ngt-action [ngtStyle]='ngtPaginationNextPreviousSectionButtonStyle'>\n <svg class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n <path\n d=\"M4 12a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm6 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm6 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4z\" />\n </svg>\n </ngt-action>\n </li>\n\n <ng-container *ngFor='let page of pages'>\n <ng-container *ngIf='page == pagination.page'>\n <li class=\"mr-2\">\n <ngt-action [ngtStyle]='ngtPaginationActivePageButtonStyle'>\n {{ page }}\n </ngt-action>\n </li>\n </ng-container>\n\n <ng-container *ngIf='page !== pagination.page'>\n <li (click)='goToPage(page)' class=\"mr-2\">\n <ngt-action [ngtStyle]='ngtPaginationPageButtonStyle'>\n {{ page }}\n </ngt-action>\n </li>\n </ng-container>\n\n </ng-container>\n\n <!-- NEXT SECTION -->\n <li *ngIf=\"displayNextSectionButton\" (click)='goToNextSection()' class=\"mr-2\">\n <ngt-action [ngtStyle]='ngtPaginationNextPreviousSectionButtonStyle'>\n <svg class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n <path\n d=\"M4 12a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm6 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm6 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4z\" />\n </svg>\n </ngt-action>\n </li>\n\n <!-- NEXT -->\n <li (click)='goToNextPage()' class=\"mr-2\">\n <ngt-action [ngtStyle]='ngtPaginationNextPreviousButtonStyle'>\n <svg class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\"\n style=\"-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);\"\n preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 24 24\">\n <path d=\"M8.59 16.58L13.17 12L8.59 7.41L10 6l6 6l-6 6l-1.41-1.42z\" />\n </svg>\n </ngt-action>\n </li>\n\n <!-- LAST -->\n <li (click)='goToLastPage()' class=\"mr-2\">\n <ngt-action [ngtStyle]='ngtPaginationFirstLastButtonStyle'>\n <svg class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n aria-hidden=\"true\" focusable=\"false\"\n style=\"-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);\"\n preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 24 24\">\n <path\n d=\"M5.59 7.41L7 6l6 6l-6 6l-1.41-1.41L10.17 12L5.59 7.41m6 0L13 6l6 6l-6 6l-1.41-1.41L16.17 12l-4.58-4.59z\" />\n </svg>\n </ngt-action>\n </li>\n </ul>\n\n <!-- REGISTERS PER PAGE -->\n <div class=\"flex items-center w-auto absolute right-0\">\n <ngt-select class='block w-20 left-0' [searchable]='false' [clearable]='false' dropdownPosition='top'\n [items]='registersPerPageOptions' name='registersPerPageSelect' [(ngModel)]=\"currentRegistersPerPage\"\n h='h-auto' (ngModelChange)='onRegistersPerPageChange($event)' ngt-stylizable>\n <ng-template let-item=\"item\" let-index=\"index\" ngt-select-option>\n {{ item ? item : '' }}\n </ng-template>\n </ngt-select>\n\n <P class=\"ml-2\">\n {{ ngtTranslateService.ngtPagination(pagination.from, pagination.to, pagination.total) }}\n </P>\n </div>\n</div>", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.NgtStylizableDirective, selector: "[ngt-stylizable]", inputs: ["color", "color.text", "color.bg", "color.border", "h", "w", "p", "px", "py", "pt", "pr", "pb", "pl", "m", "mx", "my", "mt", "mr", "mb", "ml", "border", "shadow", "rounded", "font", "text", "breakWords", "overflow", "position", "justifyContent", "cursor", "fontCase"] }, { kind: "component", type: i5.NgtActionComponent, selector: "ngt-action", inputs: ["href", "icon", "ngtStyle", "isDisabled"] }, { kind: "component", type: i6.NgtSelectComponent, selector: "ngt-select", inputs: ["label", "labelIcon", "labelIconColor", "helpTitle", "helpText", "helpTextColor", "shining", "loading", "loadingText", "notFoundText", "dropdownPosition", "typeToSearchText", "clearAllTooltip", "placeholder", "createText", "labelForId", "dropdownPanelMinHeight", "helperReverseYPosition", "helperAutoXReverse", "name", "autoLoad", "allowCreate", "allowOriginalItemsUnselect", "isDisabled", "isReadonly", "remoteResource", "hideSelected", "bindLabel", "bindValue", "items", "inputAttrs", "closeOnSelect", "clearable", "groupBy", "maxSelectedItems", "multiple", "searchable", "clearSearchOnAdd", "virtualScroll", "tabIndex", "typeahead", "guessCompareWith", "autoSelectUniqueOption", "groupValue", "trackBy", "sortSelectedItemsFn", "isRequired", "compareWith"], outputs: ["onLoadRemoteResource", "onSelectedItemRemove", "onClear", "onClose"] }, { kind: "directive", type: i7.NgtSelectOptionTmp, selector: "[ngt-select-option]" }] });
150
150
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtPaginationComponent, decorators: [{
151
151
  type: Component,
152
152
  args: [{ selector: 'ngt-pagination', template: "<div class=\"{{ displayPagination ? 'flex' : 'hidden' }} items-center w-full h-full relative\">\n <ul class=\"flex justify-start\">\n <!-- FIRST -->\n <li (click)='goToFirstPage()' class=\"mr-2\">\n <ngt-action [ngtStyle]='ngtPaginationFirstLastButtonStyle'>\n <svg class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n aria-hidden=\"true\" focusable=\"false\"\n style=\"-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);\"\n preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 24 24\">\n <path\n d=\"M18.41 7.41L17 6l-6 6l6 6l1.41-1.41L13.83 12l4.58-4.59m-6 0L11 6l-6 6l6 6l1.41-1.41L7.83 12l4.58-4.59z\" />\n </svg>\n </ngt-action>\n </li>\n\n <!-- PREVIOUS -->\n <li (click)='goToPreviousPage()' class=\"mr-2\">\n <ngt-action [ngtStyle]='ngtPaginationNextPreviousButtonStyle'>\n <svg class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\"\n style=\"-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);\"\n preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 24 24\">\n <path d=\"M15.41 16.58L10.83 12l4.58-4.59L14 6l-6 6l6 6l1.41-1.42z\" />\n </svg>\n </ngt-action>\n </li>\n\n <!-- PREVIOUS SECTION -->\n <li *ngIf=\"displayPreviousSectionButton\" (click)='goToPreviousSection()' class=\"mr-2\">\n <ngt-action [ngtStyle]='ngtPaginationNextPreviousSectionButtonStyle'>\n <svg class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n <path\n d=\"M4 12a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm6 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm6 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4z\" />\n </svg>\n </ngt-action>\n </li>\n\n <ng-container *ngFor='let page of pages'>\n <ng-container *ngIf='page == pagination.page'>\n <li class=\"mr-2\">\n <ngt-action [ngtStyle]='ngtPaginationActivePageButtonStyle'>\n {{ page }}\n </ngt-action>\n </li>\n </ng-container>\n\n <ng-container *ngIf='page !== pagination.page'>\n <li (click)='goToPage(page)' class=\"mr-2\">\n <ngt-action [ngtStyle]='ngtPaginationPageButtonStyle'>\n {{ page }}\n </ngt-action>\n </li>\n </ng-container>\n\n </ng-container>\n\n <!-- NEXT SECTION -->\n <li *ngIf=\"displayNextSectionButton\" (click)='goToNextSection()' class=\"mr-2\">\n <ngt-action [ngtStyle]='ngtPaginationNextPreviousSectionButtonStyle'>\n <svg class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n <path\n d=\"M4 12a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm6 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm6 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4z\" />\n </svg>\n </ngt-action>\n </li>\n\n <!-- NEXT -->\n <li (click)='goToNextPage()' class=\"mr-2\">\n <ngt-action [ngtStyle]='ngtPaginationNextPreviousButtonStyle'>\n <svg class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\"\n style=\"-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);\"\n preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 24 24\">\n <path d=\"M8.59 16.58L13.17 12L8.59 7.41L10 6l6 6l-6 6l-1.41-1.42z\" />\n </svg>\n </ngt-action>\n </li>\n\n <!-- LAST -->\n <li (click)='goToLastPage()' class=\"mr-2\">\n <ngt-action [ngtStyle]='ngtPaginationFirstLastButtonStyle'>\n <svg class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n aria-hidden=\"true\" focusable=\"false\"\n style=\"-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);\"\n preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 24 24\">\n <path\n d=\"M5.59 7.41L7 6l6 6l-6 6l-1.41-1.41L10.17 12L5.59 7.41m6 0L13 6l6 6l-6 6l-1.41-1.41L16.17 12l-4.58-4.59z\" />\n </svg>\n </ngt-action>\n </li>\n </ul>\n\n <!-- REGISTERS PER PAGE -->\n <div class=\"flex items-center w-auto absolute right-0\">\n <ngt-select class='block w-20 left-0' [searchable]='false' [clearable]='false' dropdownPosition='top'\n [items]='registersPerPageOptions' name='registersPerPageSelect' [(ngModel)]=\"currentRegistersPerPage\"\n h='h-auto' (ngModelChange)='onRegistersPerPageChange($event)' ngt-stylizable>\n <ng-template let-item=\"item\" let-index=\"index\" ngt-select-option>\n {{ item ? item : '' }}\n </ng-template>\n </ngt-select>\n\n <P class=\"ml-2\">\n {{ ngtTranslateService.ngtPagination(pagination.from, pagination.to, pagination.total) }}\n </P>\n </div>\n</div>" }]