@taiga-ui/kit/components/pagination/taiga-ui-kit-components-pagination.metadata.json

Taiga UI Angular main components kit

{"__symbolic":"module","version":4,"metadata":{"nonNegativeInteger":{"__symbolic":"function","parameters":["length"],"value":{"__symbolic":"binop","operator":"&&","left":{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"Number"},"member":"isInteger"},"arguments":[{"__symbolic":"reference","name":"length"}]},"right":{"__symbolic":"binop","operator":">=","left":{"__symbolic":"reference","name":"length"},"right":0}}},"TuiPaginationComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"AbstractTuiInteractive","line":59,"character":12},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":46,"character":1},"arguments":[{"selector":"tui-pagination","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":50,"character":21},"member":"OnPush"},"providers":[{"provide":{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"TUI_FOCUSABLE_ITEM_ACCESSOR","line":53,"character":21},"useExisting":{"__symbolic":"reference","name":"TuiPaginationComponent"}}],"template":"<div class=\"content\" (tuiActiveZoneChange)=\"onActiveZone($event)\">\n    <ng-container *ngIf=\"sizeM && (texts$ | async) as texts; else smallButtons\">\n        <button\n            tuiIconButton\n            type=\"button\"\n            tuiPreventDefault=\"mousedown\"\n            class=\"button\"\n            size=\"s\"\n            appearance=\"flat\"\n            icon=\"tuiIconChevronLeft\"\n            [title]=\"texts[0]\"\n            [disabled]=\"arrowIsDisabledLeft\"\n            [focusable]=\"false\"\n            (click)=\"onArrowClick('left')\"\n        ></button>\n        <ng-container *tuiRepeatTimes=\"let elementIndex of elementsLength\">\n            <ng-container\n                *tuiLet=\"getItemIndexByElementIndex(elementIndex) as index\"\n            >\n                <button\n                    *ngIf=\"index !== null; else dotsTemplate\"\n                    #element\n                    tuiButton\n                    type=\"button\"\n                    automation-id=\"tui-pagination__element\"\n                    class=\"button\"\n                    shape=\"square\"\n                    size=\"s\"\n                    [disabled]=\"disabled\"\n                    [focusable]=\"elementIsFocusable(index)\"\n                    [appearance]=\"getElementMode(index)\"\n                    (click)=\"onElementClick(index)\"\n                    (keydown.arrowLeft.prevent)=\"onElementKeyDownArrowLeft(element)\"\n                    (keydown.arrowRight.prevent)=\"onElementKeyDownArrowRight(element)\"\n                >\n                    <div\n                        polymorpheus-outlet\n                        [content]=\"content || index + 1\"\n                        [context]=\"getItemContext(index)\"\n                    ></div>\n                </button>\n            </ng-container>\n        </ng-container>\n        <button\n            tuiIconButton\n            type=\"button\"\n            tuiPreventDefault=\"mousedown\"\n            class=\"button\"\n            size=\"s\"\n            appearance=\"flat\"\n            icon=\"tuiIconChevronRight\"\n            [title]=\"texts[1]\"\n            [disabled]=\"arrowIsDisabledRight\"\n            [focusable]=\"false\"\n            (click)=\"onArrowClick('right')\"\n        ></button>\n    </ng-container>\n    <ng-template #smallButtons>\n        <button\n            *tuiRepeatTimes=\"let indexItem of length\"\n            #element\n            tuiButton\n            type=\"button\"\n            class=\"button button_small\"\n            shape=\"square\"\n            [class.button_active]=\"indexItem === index\"\n            [disabled]=\"disabled\"\n            [focusable]=\"elementIsFocusable(indexItem)\"\n            [appearance]=\"getSmallElementMode(indexItem, mode)\"\n            (click)=\"onElementClick(indexItem)\"\n            (keydown.arrowLeft.prevent)=\"onElementKeyDownArrowLeft(element)\"\n            (keydown.arrowRight.prevent)=\"onElementKeyDownArrowRight(element)\"\n        ></button>\n    </ng-template>\n    <ng-template #dotsTemplate>\n        <div automation-id=\"tui-pagination__element\" class=\"dots\"></div>\n    </ng-template>\n</div>\n","styles":[":host{font:var(--tui-font-text-s);color:var(--tui-text-01);display:block;text-align:center}.content{display:flex;justify-content:center}.button{margin:0 2px;flex-shrink:0}.button_active{background:currentColor}.button.button.button_small{width:8px;height:8px;margin:0}.button.button.button_small:not(:first-child){margin-left:8px}.dots{width:var(--tui-height-s);height:var(--tui-height-s);line-height:var(--tui-height-s);margin:0 2px;flex-shrink:0;color:var(--tui-text-03);text-align:center;cursor:default}.dots:before{content:'\\2026'}"]}]}],"members":{"length":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":61,"character":5}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"tuiDefaultProp","line":62,"character":5},"arguments":[{"__symbolic":"reference","name":"nonNegativeInteger"},"Must be non-negative integer"]}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":65,"character":5}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"tuiDefaultProp","line":66,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":69,"character":5}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"tuiDefaultProp","line":70,"character":5}}]}],"activePadding":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":76,"character":5}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"tuiDefaultProp","line":77,"character":5}}]}],"sidePadding":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":83,"character":5}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"tuiDefaultProp","line":84,"character":5}}]}],"content":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":90,"character":5}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"tuiDefaultProp","line":91,"character":5}}]}],"index":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":97,"character":5}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"tuiDefaultProp","line":98,"character":5},"arguments":[{"__symbolic":"reference","name":"nonNegativeInteger"},"Must be non-negative integer"]}]}],"indexChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":101,"character":5}}]}],"elements":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren","line":104,"character":5},"arguments":["element",{"read":{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"TUI_FOCUSABLE_ITEM_ACCESSOR","line":104,"character":36}}]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":108,"character":9},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":108,"character":16}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":109,"character":9}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":110,"character":9},"arguments":[{"__symbolic":"reference","module":"@taiga-ui/core","name":"TuiModeDirective","line":110,"character":16}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":112,"character":9},"arguments":[{"__symbolic":"reference","module":"@taiga-ui/kit/tokens","name":"TUI_PAGINATION_TEXTS","line":112,"character":16}]}]],"parameters":[{"__symbolic":"reference","name":"ElementRef","module":"@angular/core","arguments":[{"__symbolic":"error","message":"Could not resolve type","line":108,"character":68,"context":{"typeName":"HTMLElement"},"module":"./pagination.component"}]},{"__symbolic":"reference","module":"@taiga-ui/core","name":"TuiModeDirective","line":111,"character":40},{"__symbolic":"reference","name":"Observable","module":"rxjs","arguments":[{"__symbolic":"error","message":"Expression form not supported","line":112,"character":66,"module":"./pagination.component"}]}]}],"elementIsFocusable":[{"__symbolic":"method"}],"getItemContext":[{"__symbolic":"method"}],"getItemIndexByElementIndex":[{"__symbolic":"method"}],"getElementMode":[{"__symbolic":"method"}],"getSmallElementMode":[{"__symbolic":"method"}],"onElementClick":[{"__symbolic":"method"}],"onElementKeyDownArrowLeft":[{"__symbolic":"method"}],"onElementKeyDownArrowRight":[{"__symbolic":"method"}],"onArrowClick":[{"__symbolic":"method"}],"onActiveZone":[{"__symbolic":"method"}],"hasCollapsedItems":[{"__symbolic":"method"}],"tryChangeTo":[{"__symbolic":"method"}],"focusActive":[{"__symbolic":"method"}],"updateIndex":[{"__symbolic":"method"}]}},"TuiPaginationModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":12,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":14,"character":8},{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"TuiRepeatTimesModule","line":15,"character":8},{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"TuiLetModule","line":16,"character":8},{"__symbolic":"reference","module":"@tinkoff/ng-polymorpheus","name":"PolymorpheusModule","line":17,"character":8},{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"TuiPreventDefaultModule","line":18,"character":8},{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"TuiActiveZoneModule","line":19,"character":8},{"__symbolic":"reference","module":"@taiga-ui/core","name":"TuiButtonModule","line":20,"character":8}],"declarations":[{"__symbolic":"reference","name":"TuiPaginationComponent"}],"exports":[{"__symbolic":"reference","name":"TuiPaginationComponent"}]}]}],"members":{}}},"origins":{"nonNegativeInteger":"./pagination.component","TuiPaginationComponent":"./pagination.component","TuiPaginationModule":"./pagination.module"},"importAs":"@taiga-ui/kit/components/pagination"}