@agorapulse/ui-components 15.1.2 → 15.1.3

package/esm2020/radio/radio.component.mjs

@@ -0,0 +1,199 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, inject, Injector, Input, NgZone, Output, ViewChild, ViewEncapsulation, } from '@angular/core';
+import { CommonModule, NgIf } from '@angular/common';
+import { SymbolComponent } from '@agorapulse/ui-symbol';
+import { NgControl } from '@angular/forms';
+import { RADIO_VALUE_ACCESSOR, RadioControlRegistry } from './radio-control.registry';
+import { fromEvent, Subject, takeUntil } from 'rxjs';
+import * as i0 from "@angular/core";
+export class RadioComponent {
+    set disabled(disabled) {
+        this._disabled = disabled;
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        this.injector = inject(Injector);
+        this.changeDetectorRef = inject(ChangeDetectorRef);
+        this.radioControlRegistry = inject(RadioControlRegistry);
+        this.ngZone = inject(NgZone);
+        this.ariaLabel = '';
+        this.ariaLabelledby = null;
+        this.labelPosition = 'right';
+        // eslint-disable-next-line @angular-eslint/no-output-on-prefix
+        this.onClick = new EventEmitter();
+        // eslint-disable-next-line @angular-eslint/no-output-on-prefix
+        this.onFocus = new EventEmitter();
+        // eslint-disable-next-line @angular-eslint/no-output-on-prefix
+        this.onBlur = new EventEmitter();
+        this._disabled = false;
+        this.hasLabel = false;
+        this.focused = false;
+        this.radioIndex = 0;
+        this.destroy$ = new Subject();
+        this.onModelChange = () => {
+            // ignore
+        };
+        this.onModelTouched = () => {
+            // ignore
+        };
+        this.hostDataTest = elementRef.nativeElement.getAttribute('data-test');
+        this.ngZone.runOutsideAngular(() => {
+            fromEvent(window, 'keydown')
+                .pipe(takeUntil(this.destroy$))
+                .subscribe((event) => {
+                // Handle keydown event
+                switch (event.key) {
+                    case 'ArrowDown':
+                    case 'ArrowRight':
+                        this.ngZone.run(() => {
+                            if (this.focused) {
+                                event.stopImmediatePropagation();
+                                this.radioControlRegistry.blurAllGroup(this);
+                                this.radioControlRegistry.focusNext(this);
+                            }
+                        });
+                        break;
+                    case 'ArrowUp':
+                    case 'ArrowLeft':
+                        this.ngZone.run(() => {
+                            event.preventDefault();
+                            if (this.focused) {
+                                event.stopImmediatePropagation();
+                                this.radioControlRegistry.blurAllGroup(this);
+                                this.radioControlRegistry.focusPrevious(this);
+                            }
+                        });
+                        break;
+                    default:
+                        return;
+                }
+            });
+        });
+    }
+    ngOnChanges() {
+        if (this.labelElement) {
+            this.hasLabel = !!this.labelElement.nativeElement.textContent.trim();
+        }
+    }
+    ngOnInit() {
+        this.control = this.injector.get(NgControl);
+        this.checkName();
+        this.radioControlRegistry.add(this.control, this);
+        this.radioIndex = this.radioControlRegistry.getIndex(this);
+        this.inputId = `${this.radioId}-${this.radioIndex}`;
+    }
+    ngAfterContentInit() {
+        if (this.labelElement) {
+            this.hasLabel = !!this.labelElement.nativeElement.textContent.trim();
+        }
+    }
+    ngOnDestroy() {
+        this.radioControlRegistry.remove(this);
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    handleClick(event, radioButton) {
+        event.preventDefault();
+        if (this.disabled) {
+            return;
+        }
+        this.select(event);
+        radioButton.focus();
+    }
+    select(event) {
+        if (!this.disabled) {
+            this.inputElement.nativeElement.checked = true;
+            this.checked = true;
+            this.onModelChange(this.value);
+            this.radioControlRegistry.select(this);
+            this.onClick.emit({ originalEvent: event, value: this.value });
+        }
+    }
+    writeValue(value) {
+        this.checked = value == this.value;
+        if (this.inputElement?.nativeElement) {
+            this.inputElement.nativeElement.checked = this.checked;
+        }
+        this.changeDetectorRef.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.onModelChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onModelTouched = fn;
+    }
+    onInputFocus(event) {
+        this.radioControlRegistry.setNegativeTabIndexToAllExcept(this);
+        this.inputElement.nativeElement.checked = true;
+        this.checked = true;
+        this.onModelChange(this.value);
+        this.focused = true;
+        this.onFocus.emit(event);
+    }
+    onInputBlur(event) {
+        this.focused = false;
+        this.onModelTouched();
+        this.onBlur.emit(event);
+    }
+    onChange(event) {
+        this.select(event);
+    }
+    checkName() {
+        if (this.name && this.formControlName && this.name !== this.formControlName) {
+            this.throwNameError();
+        }
+        if (!this.name && this.formControlName) {
+            this.name = this.formControlName;
+        }
+    }
+    throwNameError() {
+        throw new Error(`
+          If you define both a name and a formControlName attribute on your radio button, their values
+          must match. Ex: <p-radioButton formControlName="food" name="food"></p-radioButton>
+        `);
+    }
+}
+RadioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: RadioComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+RadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.2", type: RadioComponent, isStandalone: true, selector: "ap-radio[value][radioId]", inputs: { ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], ariaDescribedby: ["aria-describedby", "ariaDescribedby"], disabled: "disabled", labelPosition: "labelPosition", radioId: "radioId", formControlName: "formControlName", value: "value", required: "required", name: "name" }, outputs: { onClick: "onClick", onFocus: "onFocus", onBlur: "onBlur" }, providers: [RADIO_VALUE_ACCESSOR], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true, static: true }, { propertyName: "labelElement", first: true, predicate: ["label"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"radio-button-container\" [class.label-left]=\"labelPosition === 'left'\">\n    <input\n        #input\n        type=\"radio\"\n        tabindex=\"0\"\n        [attr.id]=\"inputId\"\n        [attr.name]=\"name + '-radio-' + radioIndex\"\n        [attr.value]=\"value\"\n        [attr.aria-checked]=\"checked\"\n        [attr.aria-label]=\"ariaLabel || null\"\n        [attr.aria-labelledby]=\"ariaLabelledby\"\n        [attr.aria-describedby]=\"ariaDescribedby\"\n        [attr.data-test]=\"hostDataTest ?? name\"\n        [checked]=\"checked\"\n        [class.disabled]=\"disabled\"\n        (change)=\"onChange($event)\"\n        (blur)=\"onInputBlur($event)\"\n        (focus)=\"onInputFocus($event)\" />\n    <div class=\"radio-button\" [class.disabled]=\"disabled\" (click)=\"handleClick($event, input)\"></div>\n    <label [for]=\"inputId\" (click)=\"select($event)\">\n        <ng-content></ng-content>\n    </label>\n</div>\n", styles: ["ap-radio .radio-button-container{display:flex;gap:var(--ref-spacing-xxs)}ap-radio .radio-button-container.label-left{flex-direction:row-reverse}ap-radio .radio-button-container input[type=radio]{transform:scale(0);position:absolute}ap-radio .radio-button-container input[type=radio]:checked~.radio-button{border-color:var(--ref-color-electric-blue-100);box-shadow:inset 0 0 0 3px var(--ref-color-white)}ap-radio .radio-button-container input[type=radio]:checked~.radio-button.disabled{background:var(--ref-color-grey-40);box-shadow:inset 0 0 0 3px var(--ref-color-grey-10)}ap-radio .radio-button-container input[type=radio]:checked:focus~.radio-button{border-color:var(--ref-color-electric-blue-100)}ap-radio .radio-button-container input[type=radio].disabled~.radio-button{pointer-events:none;cursor:default;box-shadow:inset 0 0 0 16px var(--ref-color-grey-10);border-color:var(--ref-color-grey-20)}ap-radio .radio-button-container input[type=radio].disabled~label{pointer-events:none;cursor:default;color:var(--ref-color-grey-60)}ap-radio .radio-button-container input[type=radio]:focus~.radio-button{outline:3px solid var(--ref-color-electric-blue-100);border-color:var(--ref-color-grey-80);outline-offset:1px}ap-radio .radio-button-container .radio-button{width:16px;height:16px;border-radius:100%;border:1px solid var(--ref-color-grey-60);background:var(--ref-color-electric-blue-100);box-shadow:inset 0 0 0 16px var(--ref-color-white);transition:box-shadow var(--comp-radio-transition-duration)}ap-radio .radio-button-container .radio-button:hover:not(.disabled){cursor:pointer;border-color:var(--ref-color-grey-80)}ap-radio .radio-button-container label{display:flex;align-items:center;font-family:var(--sys-text-style-body-font-family);font-size:var(--sys-text-style-body-size);font-weight:var(--sys-text-style-body-weight);line-height:var(--sys-text-style-body-line-height);color:var(--ref-color-grey-100)}ap-radio .radio-button-container label:empty{display:none}ap-radio .radio-button-container label.disabled{color:var(--ref-color-grey-60)}ap-radio .radio-button-container label:hover:not(.disabled){cursor:pointer}ap-radio.ng-invalid.ng-dirty .radio-button{border-color:var(--ref-color-red-100)}ap-radio.ng-invalid.ng-dirty .radio-button:hover{border-color:var(--ref-color-red-60)}ap-radio.ng-invalid.ng-dirty input[type=radio]:focus~.radio-button{border-color:var(--ref-color-red-60)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: RadioComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-radio[value][radioId]', standalone: true, imports: [NgIf, SymbolComponent, CommonModule], providers: [RADIO_VALUE_ACCESSOR], encapsulation: ViewEncapsulation.None, template: "<div class=\"radio-button-container\" [class.label-left]=\"labelPosition === 'left'\">\n    <input\n        #input\n        type=\"radio\"\n        tabindex=\"0\"\n        [attr.id]=\"inputId\"\n        [attr.name]=\"name + '-radio-' + radioIndex\"\n        [attr.value]=\"value\"\n        [attr.aria-checked]=\"checked\"\n        [attr.aria-label]=\"ariaLabel || null\"\n        [attr.aria-labelledby]=\"ariaLabelledby\"\n        [attr.aria-describedby]=\"ariaDescribedby\"\n        [attr.data-test]=\"hostDataTest ?? name\"\n        [checked]=\"checked\"\n        [class.disabled]=\"disabled\"\n        (change)=\"onChange($event)\"\n        (blur)=\"onInputBlur($event)\"\n        (focus)=\"onInputFocus($event)\" />\n    <div class=\"radio-button\" [class.disabled]=\"disabled\" (click)=\"handleClick($event, input)\"></div>\n    <label [for]=\"inputId\" (click)=\"select($event)\">\n        <ng-content></ng-content>\n    </label>\n</div>\n", styles: ["ap-radio .radio-button-container{display:flex;gap:var(--ref-spacing-xxs)}ap-radio .radio-button-container.label-left{flex-direction:row-reverse}ap-radio .radio-button-container input[type=radio]{transform:scale(0);position:absolute}ap-radio .radio-button-container input[type=radio]:checked~.radio-button{border-color:var(--ref-color-electric-blue-100);box-shadow:inset 0 0 0 3px var(--ref-color-white)}ap-radio .radio-button-container input[type=radio]:checked~.radio-button.disabled{background:var(--ref-color-grey-40);box-shadow:inset 0 0 0 3px var(--ref-color-grey-10)}ap-radio .radio-button-container input[type=radio]:checked:focus~.radio-button{border-color:var(--ref-color-electric-blue-100)}ap-radio .radio-button-container input[type=radio].disabled~.radio-button{pointer-events:none;cursor:default;box-shadow:inset 0 0 0 16px var(--ref-color-grey-10);border-color:var(--ref-color-grey-20)}ap-radio .radio-button-container input[type=radio].disabled~label{pointer-events:none;cursor:default;color:var(--ref-color-grey-60)}ap-radio .radio-button-container input[type=radio]:focus~.radio-button{outline:3px solid var(--ref-color-electric-blue-100);border-color:var(--ref-color-grey-80);outline-offset:1px}ap-radio .radio-button-container .radio-button{width:16px;height:16px;border-radius:100%;border:1px solid var(--ref-color-grey-60);background:var(--ref-color-electric-blue-100);box-shadow:inset 0 0 0 16px var(--ref-color-white);transition:box-shadow var(--comp-radio-transition-duration)}ap-radio .radio-button-container .radio-button:hover:not(.disabled){cursor:pointer;border-color:var(--ref-color-grey-80)}ap-radio .radio-button-container label{display:flex;align-items:center;font-family:var(--sys-text-style-body-font-family);font-size:var(--sys-text-style-body-size);font-weight:var(--sys-text-style-body-weight);line-height:var(--sys-text-style-body-line-height);color:var(--ref-color-grey-100)}ap-radio .radio-button-container label:empty{display:none}ap-radio .radio-button-container label.disabled{color:var(--ref-color-grey-60)}ap-radio .radio-button-container label:hover:not(.disabled){cursor:pointer}ap-radio.ng-invalid.ng-dirty .radio-button{border-color:var(--ref-color-red-100)}ap-radio.ng-invalid.ng-dirty .radio-button:hover{border-color:var(--ref-color-red-60)}ap-radio.ng-invalid.ng-dirty input[type=radio]:focus~.radio-button{border-color:var(--ref-color-red-60)}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { inputElement: [{
+                type: ViewChild,
+                args: ['input', { static: true }]
+            }], labelElement: [{
+                type: ViewChild,
+                args: ['label', { static: true }]
+            }], ariaLabel: [{
+                type: Input,
+                args: ['aria-label']
+            }], ariaLabelledby: [{
+                type: Input,
+                args: ['aria-labelledby']
+            }], ariaDescribedby: [{
+                type: Input,
+                args: ['aria-describedby']
+            }], disabled: [{
+                type: Input
+            }], labelPosition: [{
+                type: Input
+            }], radioId: [{
+                type: Input
+            }], formControlName: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], onClick: [{
+                type: Output
+            }], onFocus: [{
+                type: Output
+            }], onBlur: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmFkaW8uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vbGlicy91aS1jb21wb25lbnRzL3JhZGlvL3NyYy9yYWRpby5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9saWJzL3VpLWNvbXBvbmVudHMvcmFkaW8vc3JjL3JhZGlvLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFFSCx1QkFBdUIsRUFDdkIsaUJBQWlCLEVBQ2pCLFNBQVMsRUFFVCxZQUFZLEVBQ1osTUFBTSxFQUNOLFFBQVEsRUFDUixLQUFLLEVBQ0wsTUFBTSxFQUlOLE1BQU0sRUFDTixTQUFTLEVBQ1QsaUJBQWlCLEdBQ3BCLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBQyxZQUFZLEVBQUUsSUFBSSxFQUFDLE1BQU0saUJBQWlCLENBQUM7QUFDbkQsT0FBTyxFQUFDLGVBQWUsRUFBQyxNQUFNLHVCQUF1QixDQUFDO0FBQ3RELE9BQU8sRUFBdUIsU0FBUyxFQUFDLE1BQU0sZ0JBQWdCLENBQUM7QUFDL0QsT0FBTyxFQUFDLG9CQUFvQixFQUFFLG9CQUFvQixFQUFDLE1BQU0sMEJBQTBCLENBQUM7QUFDcEYsT0FBTyxFQUFDLFNBQVMsRUFBRSxPQUFPLEVBQUUsU0FBUyxFQUFDLE1BQU0sTUFBTSxDQUFDOztBQVluRCxNQUFNLE9BQU8sY0FBYztJQVd2QixJQUFhLFFBQVEsQ0FBQyxRQUFpQjtRQUNuQyxJQUFJLENBQUMsU0FBUyxHQUFHLFFBQVEsQ0FBQztJQUM5QixDQUFDO0lBRUQsSUFBSSxRQUFRO1FBQ1IsT0FBTyxJQUFJLENBQUMsU0FBUyxDQUFDO0lBQzFCLENBQUM7SUFzQ0QsWUFBb0IsVUFBc0I7UUFBdEIsZUFBVSxHQUFWLFVBQVUsQ0FBWTtRQXREMUIsYUFBUSxHQUFhLE1BQU0sQ0FBQyxRQUFRLENBQUMsQ0FBQztRQUNyQyxzQkFBaUIsR0FBc0IsTUFBTSxDQUFDLGlCQUFpQixD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LElBQUksRUFBQztnQkFDYixTQUFTO3NCQUE3QixLQUFLO3VCQUFDLFlBQVk7Z0JBQ08sY0FBYztzQkFBdkMsS0FBSzt1QkFBQyxpQkFBaUI7Z0JBQ0csZUFBZTtzQkFBekMsS0FBSzt1QkFBQyxrQkFBa0I7Z0JBQ1osUUFBUTtzQkFBcEIsS0FBSztnQkFPRyxhQUFhO3NCQUFyQixLQUFLO2dCQUNHLE9BQU87c0JBQWYsS0FBSztnQkFDRyxlQUFlO3NCQUF2QixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLElBQUk7c0JBQVosS0FBSztnQkFHSSxPQUFPO3NCQUFoQixNQUFNO2dCQU1HLE9BQU87c0JBQWhCLE1BQU07Z0JBR0csTUFBTTtzQkFBZixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgICBBZnRlckNvbnRlbnRJbml0LFxuICAgIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICAgIENoYW5nZURldGVjdG9yUmVmLFxuICAgIENvbXBvbmVudCxcbiAgICBFbGVtZW50UmVmLFxuICAgIEV2ZW50RW1pdHRlcixcbiAgICBpbmplY3QsXG4gICAgSW5qZWN0b3IsXG4gICAgSW5wdXQsXG4gICAgTmdab25lLFxuICAgIE9uQ2hhbmdlcyxcbiAgICBPbkRlc3Ryb3ksXG4gICAgT25Jbml0LFxuICAgIE91dHB1dCxcbiAgICBWaWV3Q2hpbGQsXG4gICAgVmlld0VuY2Fwc3VsYXRpb24sXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtDb21tb25Nb2R1bGUsIE5nSWZ9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQge1N5bWJvbENvbXBvbmVudH0gZnJvbSAnQGFnb3JhcHVsc2UvdWktc3ltYm9sJztcbmltcG9ydCB7Q29udHJvbFZhbHVlQWNjZXNzb3IsIE5nQ29udHJvbH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHtSQURJT19WQUxVRV9BQ0NFU1NPUiwgUmFkaW9Db250cm9sUmVnaXN0cnl9IGZyb20gJy4vcmFkaW8tY29udHJvbC5yZWdpc3RyeSc7XG5pbXBvcnQge2Zyb21FdmVudCwgU3ViamVjdCwgdGFrZVVudGlsfSBmcm9tICdyeGpzJztcblxuQENvbXBvbmVudCh7XG4gICAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gICAgc2VsZWN0b3I6ICdhcC1yYWRpb1t2YWx1ZV1bcmFkaW9JZF0nLFxuICAgIHN0eWxlVXJsczogWycuL3JhZGlvLmNvbXBvbmVudC5zY3NzJ10sXG4gICAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgICBpbXBvcnRzOiBbTmdJZiwgU3ltYm9sQ29tcG9uZW50LCBDb21tb25Nb2R1bGVdLFxuICAgIHByb3ZpZGVyczogW1JBRElPX1ZBTFVFX0FDQ0VTU09SXSxcbiAgICB0ZW1wbGF0ZVVybDogJy4vcmFkaW8uY29tcG9uZW50Lmh0bWwnLFxuICAgIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG59KVxuZXhwb3J0IGNsYXNzIFJhZGlvQ29tcG9uZW50IGltcGxlbWVudHMgQ29udHJvbFZhbHVlQWNjZXNzb3IsIEFmdGVyQ29udGVudEluaXQsIE9uQ2hhbmdlcywgT25Jbml0LCBPbkRlc3Ryb3kge1xuICAgIHB1YmxpYyByZWFkb25seSBpbmplY3RvcjogSW5qZWN0b3IgPSBpbmplY3QoSW5qZWN0b3IpO1xuICAgIHByaXZhdGUgcmVhZG9ubHkgY2hhbmdlRGV0ZWN0b3JSZWY6IENoYW5nZURldGVjdG9yUmVmID0gaW5qZWN0KENoYW5nZURldGVjdG9yUmVmKTtcbiAgICBwcml2YXRlIHJlYWRvbmx5IHJhZGlvQ29udHJvbFJlZ2lzdHJ5OiBSYWRpb0NvbnRyb2xSZWdpc3RyeSA9IGluamVjdChSYWRpb0NvbnRyb2xSZWdpc3RyeSk7XG4gICAgcHJpdmF0ZSByZWFkb25seSBuZ1pvbmU6IE5nWm9uZSA9IGluamVjdChOZ1pvbmUpO1xuXG4gICAgQFZpZXdDaGlsZCgnaW5wdXQnLCB7c3RhdGljOiB0cnVlfSkgaW5wdXRFbGVtZW50OiBFbGVtZW50UmVmPEhUTUxJbnB1dEVsZW1lbnQ+O1xuICAgIEBWaWV3Q2hpbGQoJ2xhYmVsJywge3N0YXRpYzogdHJ1ZX0pIGxhYmVsRWxlbWVudDogRWxlbWVudFJlZjxIVE1MSW5wdXRFbGVtZW50PjtcbiAgICBASW5wdXQoJ2FyaWEtbGFiZWwnKSBhcmlhTGFiZWw6IHN0cmluZyA9ICcnO1xuICAgIEBJbnB1dCgnYXJpYS1sYWJlbGxlZGJ5JykgYXJpYUxhYmVsbGVkYnk6IHN0cmluZyB8IG51bGwgPSBudWxsO1xuICAgIEBJbnB1dCgnYXJpYS1kZXNjcmliZWRieScpIGFyaWFEZXNjcmliZWRieTogc3RyaW5nO1xuICAgIEBJbnB1dCgpIHNldCBkaXNhYmxlZChkaXNhYmxlZDogYm9vbGVhbikge1xuICAgICAgICB0aGlzLl9kaXNhYmxlZCA9IGRpc2FibGVkO1xuICAgIH1cblxuICAgIGdldCBkaXNhYmxlZCgpOiBib29sZWFuIHtcbiAgICAgICAgcmV0dXJuIHRoaXMuX2Rpc2FibGVkO1xuICAgIH1cbiAgICBASW5wdXQoKSBsYWJlbFBvc2l0aW9uOiAnbGVmdCcgfCAncmlnaHQnID0gJ3JpZ2h0JztcbiAgICBASW5wdXQoKSByYWRpb0lkOiBzdHJpbmc7XG4gICAgQElucHV0KCkgZm9ybUNvbnRyb2xOYW1lOiBzdHJpbmc7XG4gICAgQElucHV0KCkgdmFsdWU6IHVua25vd247XG4gICAgQElucHV0KCkgcmVxdWlyZWQ6IGJvb2xlYW47XG4gICAgQElucHV0KCkgbmFtZTogc3RyaW5nO1xuXG4gICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEBhbmd1bGFyLWVzbGludC9uby1vdXRwdXQtb24tcHJlZml4XG4gICAgQE91dHB1dCgpIG9uQ2xpY2s6IEV2ZW50RW1pdHRlcjx7XG4gICAgICAgIG9yaWdpbmFsRXZlbnQ6IEV2ZW50O1xuICAgICAgICB2YWx1ZTogdW5rbm93bjtcbiAgICB9PiA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcblxuICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBAYW5ndWxhci1lc2xpbnQvbm8tb3V0cHV0LW9uLXByZWZpeFxuICAgIEBPdXRwdXQoKSBvbkZvY3VzOiBFdmVudEVtaXR0ZXI8Rm9jdXNFdmVudD4gPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG5cbiAgICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgQGFuZ3VsYXItZXNsaW50L25vLW91dHB1dC1vbi1wcmVmaXhcbiAgICBAT3V0cHV0KCkgb25CbHVyOiBFdmVudEVtaXR0ZXI8Rm9jdXNFdmVudD4gPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG5cbiAgICBpbnB1dElkOiBzdHJpbmc7XG4gICAgX2Rpc2FibGVkOiBib29sZWFuID0gZmFsc2U7XG4gICAgaGFzTGFiZWw6IGJvb2xlYW4gPSBmYWxzZTtcbiAgICBob3N0RGF0YVRlc3Q6IHN0cmluZztcbiAgICBjb250cm9sOiBOZ0NvbnRyb2w7XG4gICAgY2hlY2tlZDogYm9vbGVhbjtcbiAgICBmb2N1c2VkOiBib29sZWFuID0gZmFsc2U7XG4gICAgcmFkaW9JbmRleDogbnVtYmVyID0gMDtcbiAgICBwcml2YXRlIHJlYWRvbmx5IGRlc3Ryb3kkOiBTdWJqZWN0PHZvaWQ+ID0gbmV3IFN1YmplY3Q8dm9pZD4oKTtcblxuICAgIHB1YmxpYyBvbk1vZGVsQ2hhbmdlOiAodmFsdWU6IHVua25vd24pID0+IHZvaWQgPSAoKSA9PiB7XG4gICAgICAgIC8vIGlnbm9yZVxuICAgIH07XG5cbiAgICBwdWJsaWMgb25Nb2RlbFRvdWNoZWQ6ICgpID0+IHZvaWQgPSAoKSA9PiB7XG4gICAgICAgIC8vIGlnbm9yZVxuICAgIH07XG5cbiAgICBjb25zdHJ1Y3Rvcihwcml2YXRlIGVsZW1lbnRSZWY6IEVsZW1lbnRSZWYpIHtcbiAgICAgICAgdGhpcy5ob3N0RGF0YVRlc3QgPSBlbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQuZ2V0QXR0cmlidXRlKCdkYXRhLXRlc3QnKTtcblxuICAgICAgICB0aGlzLm5nWm9uZS5ydW5PdXRzaWRlQW5ndWxhcigoKSA9PiB7XG4gICAgICAgICAgICBmcm9tRXZlbnQod2luZG93LCAna2V5ZG93bicpXG4gICAgICAgICAgICAgICAgLnBpcGUodGFrZVVudGlsKHRoaXMuZGVzdHJveSQpKVxuICAgICAgICAgICAgICAgIC5zdWJzY3JpYmUoKGV2ZW50OiBLZXlib2FyZEV2ZW50KSA9PiB7XG4gICAgICAgICAgICAgICAgICAgIC8vIEhhbmRsZSBrZXlkb3duIGV2ZW50XG4gICAgICAgICAgICAgICAgICAgIHN3aXRjaCAoZXZlbnQua2V5KSB7XG4gICAgICAgICAgICAgICAgICAgICAgICBjYXNlICdBcnJvd0Rvd24nOlxuICAgICAgICAgICAgICAgICAgICAgICAgY2FzZSAnQXJyb3dSaWdodCc6XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgdGhpcy5uZ1pvbmUucnVuKCgpID0+IHtcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgaWYgKHRoaXMuZm9jdXNlZCkge1xuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgZXZlbnQuc3RvcEltbWVkaWF0ZVByb3BhZ2F0aW9uKCk7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB0aGlzLnJhZGlvQ29udHJvbFJlZ2lzdHJ5LmJsdXJBbGxHcm91cCh0aGlzKTtcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHRoaXMucmFkaW9Db250cm9sUmVnaXN0cnkuZm9jdXNOZXh0KHRoaXMpO1xuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgfSk7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgYnJlYWs7XG4gICAgICAgICAgICAgICAgICAgICAgICBjYXNlICdBcnJvd1VwJzpcbiAgICAgICAgICAgICAgICAgICAgICAgIGNhc2UgJ0Fycm93TGVmdCc6XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgdGhpcy5uZ1pvbmUucnVuKCgpID0+IHtcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgZXZlbnQucHJldmVudERlZmF1bHQoKTtcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgaWYgKHRoaXMuZm9jdXNlZCkge1xuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgZXZlbnQuc3RvcEltbWVkaWF0ZVByb3BhZ2F0aW9uKCk7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB0aGlzLnJhZGlvQ29udHJvbFJlZ2lzdHJ5LmJsdXJBbGxHcm91cCh0aGlzKTtcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHRoaXMucmFkaW9Db250cm9sUmVnaXN0cnkuZm9jdXNQcmV2aW91cyh0aGlzKTtcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIH0pO1xuICAgICAgICAgICAgICAgICAgICAgICAgICAgIGJyZWFrO1xuICAgICAgICAgICAgICAgICAgICAgICAgZGVmYXVsdDpcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICByZXR1cm47XG4gICAgICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgICB9KTtcbiAgICAgICAgfSk7XG4gICAgfVxuXG4gICAgbmdPbkNoYW5nZXMoKTogdm9pZCB7XG4gICAgICAgIGlmICh0aGlzLmxhYmVsRWxlbWVudCkge1xuICAgICAgICAgICAgdGhpcy5oYXNMYWJlbCA9ICEhdGhpcy5sYWJlbEVsZW1lbnQubmF0aXZlRWxlbWVudC50ZXh0Q29udGVudC50cmltKCk7XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICBuZ09uSW5pdCgpIHtcbiAgICAgICAgdGhpcy5jb250cm9sID0gdGhpcy5pbmplY3Rvci5nZXQoTmdDb250cm9sKTtcbiAgICAgICAgdGhpcy5jaGVja05hbWUoKTtcbiAgICAgICAgdGhpcy5yYWRpb0NvbnRyb2xSZWdpc3RyeS5hZGQodGhpcy5jb250cm9sLCB0aGlzKTtcbiAgICAgICAgdGhpcy5yYWRpb0luZGV4ID0gdGhpcy5yYWRpb0NvbnRyb2xSZWdpc3RyeS5nZXRJbmRleCh0aGlzKTtcbiAgICAgICAgdGhpcy5pbnB1dElkID0gYCR7dGhpcy5yYWRpb0lkfS0ke3RoaXMucmFkaW9JbmRleH1gO1xuICAgIH1cblxuICAgIG5nQWZ0ZXJDb250ZW50SW5pdCgpOiB2b2lkIHtcbiAgICAgICAgaWYgKHRoaXMubGFiZWxFbGVtZW50KSB7XG4gICAgICAgICAgICB0aGlzLmhhc0xhYmVsID0gISF0aGlzLmxhYmVsRWxlbWVudC5uYXRpdmVFbGVtZW50LnRleHRDb250ZW50LnRyaW0oKTtcbiAgICAgICAgfVxuICAgIH1cblxuICAgIG5nT25EZXN0cm95KCkge1xuICAgICAgICB0aGlzLnJhZGlvQ29udHJvbFJlZ2lzdHJ5LnJlbW92ZSh0aGlzKTtcbiAgICAgICAgdGhpcy5kZXN0cm95JC5uZXh0KCk7XG4gICAgICAgIHRoaXMuZGVzdHJveSQuY29tcGxldGUoKTtcbiAgICB9XG5cbiAgICBoYW5kbGVDbGljayhldmVudDogTW91c2VFdmVudCwgcmFkaW9CdXR0b246IEhUTUxJbnB1dEVsZW1lbnQpIHtcbiAgICAgICAgZXZlbnQucHJldmVudERlZmF1bHQoKTtcblxuICAgICAgICBpZiAodGhpcy5kaXNhYmxlZCkge1xuICAgICAgICAgICAgcmV0dXJuO1xuICAgICAgICB9XG4gICAgICAgIHRoaXMuc2VsZWN0KGV2ZW50KTtcbiAgICAgICAgcmFkaW9CdXR0b24uZm9jdXMoKTtcbiAgICB9XG5cbiAgICBzZWxlY3QoZXZlbnQ6IEV2ZW50KSB7XG4gICAgICAgIGlmICghdGhpcy5kaXNhYmxlZCkge1xuICAgICAgICAgICAgdGhpcy5pbnB1dEVsZW1lbnQubmF0aXZlRWxlbWVudC5jaGVja2VkID0gdHJ1ZTtcbiAgICAgICAgICAgIHRoaXMuY2hlY2tlZCA9IHRydWU7XG4gICAgICAgICAgICB0aGlzLm9uTW9kZWxDaGFuZ2UodGhpcy52YWx1ZSk7XG4gICAgICAgICAgICB0aGlzLnJhZGlvQ29udHJvbFJlZ2lzdHJ5LnNlbGVjdCh0aGlzKTtcbiAgICAgICAgICAgIHRoaXMub25DbGljay5lbWl0KHtvcmlnaW5hbEV2ZW50OiBldmVudCwgdmFsdWU6IHRoaXMudmFsdWV9KTtcbiAgICAgICAgfVxuICAgIH1cblxuICAgIHdyaXRlVmFsdWUodmFsdWU6IHVua25vd24pOiB2b2lkIHtcbiAgICAgICAgdGhpcy5jaGVja2VkID0gdmFsdWUgPT0gdGhpcy52YWx1ZTtcblxuICAgICAgICBpZiAodGhpcy5pbnB1dEVsZW1lbnQ/Lm5hdGl2ZUVsZW1lbnQpIHtcbiAgICAgICAgICAgIHRoaXMuaW5wdXRFbGVtZW50Lm5hdGl2ZUVsZW1lbnQuY2hlY2tlZCA9IHRoaXMuY2hlY2tlZDtcbiAgICAgICAgfVxuXG4gICAgICAgIHRoaXMuY2hhbmdlRGV0ZWN0b3JSZWYubWFya0ZvckNoZWNrKCk7XG4gICAgfVxuXG4gICAgcmVnaXN0ZXJPbkNoYW5nZShmbjogKCkgPT4gdm9pZCk6IHZvaWQge1xuICAgICAgICB0aGlzLm9uTW9kZWxDaGFuZ2UgPSBmbjtcbiAgICB9XG5cbiAgICByZWdpc3Rlck9uVG91Y2hlZChmbjogKCkgPT4gdm9pZCk6IHZvaWQge1xuICAgICAgICB0aGlzLm9uTW9kZWxUb3VjaGVkID0gZm47XG4gICAgfVxuXG4gICAgb25JbnB1dEZvY3VzKGV2ZW50OiBGb2N1c0V2ZW50KSB7XG4gICAgICAgIHRoaXMucmFkaW9Db250cm9sUmVnaXN0cnkuc2V0TmVnYXRpdmVUYWJJbmRleFRvQWxsRXhjZXB0KHRoaXMpO1xuICAgICAgICB0aGlzLmlucHV0RWxlbWVudC5uYXRpdmVFbGVtZW50LmNoZWNrZWQgPSB0cnVlO1xuICAgICAgICB0aGlzLmNoZWNrZWQgPSB0cnVlO1xuICAgICAgICB0aGlzLm9uTW9kZWxDaGFuZ2UodGhpcy52YWx1ZSk7XG4gICAgICAgIHRoaXMuZm9jdXNlZCA9IHRydWU7XG4gICAgICAgIHRoaXMub25Gb2N1cy5lbWl0KGV2ZW50KTtcbiAgICB9XG5cbiAgICBvbklucHV0Qmx1cihldmVudDogRm9jdXNFdmVudCkge1xuICAgICAgICB0aGlzLmZvY3VzZWQgPSBmYWxzZTtcbiAgICAgICAgdGhpcy5vbk1vZGVsVG91Y2hlZCgpO1xuICAgICAgICB0aGlzLm9uQmx1ci5lbWl0KGV2ZW50KTtcbiAgICB9XG5cbiAgICBvbkNoYW5nZShldmVudDogRXZlbnQpIHtcbiAgICAgICAgdGhpcy5zZWxlY3QoZXZlbnQpO1xuICAgIH1cblxuICAgIHByaXZhdGUgY2hlY2tOYW1lKCkge1xuICAgICAgICBpZiAodGhpcy5uYW1lICYmIHRoaXMuZm9ybUNvbnRyb2xOYW1lICYmIHRoaXMubmFtZSAhPT0gdGhpcy5mb3JtQ29udHJvbE5hbWUpIHtcbiAgICAgICAgICAgIHRoaXMudGhyb3dOYW1lRXJyb3IoKTtcbiAgICAgICAgfVxuICAgICAgICBpZiAoIXRoaXMubmFtZSAmJiB0aGlzLmZvcm1Db250cm9sTmFtZSkge1xuICAgICAgICAgICAgdGhpcy5uYW1lID0gdGhpcy5mb3JtQ29udHJvbE5hbWU7XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICBwcml2YXRlIHRocm93TmFtZUVycm9yKCkge1xuICAgICAgICB0aHJvdyBuZXcgRXJyb3IoYFxuICAgICAgICAgIElmIHlvdSBkZWZpbmUgYm90aCBhIG5hbWUgYW5kIGEgZm9ybUNvbnRyb2xOYW1lIGF0dHJpYnV0ZSBvbiB5b3VyIHJhZGlvIGJ1dHRvbiwgdGhlaXIgdmFsdWVzXG4gICAgICAgICAgbXVzdCBtYXRjaC4gRXg6IDxwLXJhZGlvQnV0dG9uIGZvcm1Db250cm9sTmFtZT1cImZvb2RcIiBuYW1lPVwiZm9vZFwiPjwvcC1yYWRpb0J1dHRvbj5cbiAgICAgICAgYCk7XG4gICAgfVxufVxuIiwiPGRpdiBjbGFzcz1cInJhZGlvLWJ1dHRvbi1jb250YWluZXJcIiBbY2xhc3MubGFiZWwtbGVmdF09XCJsYWJlbFBvc2l0aW9uID09PSAnbGVmdCdcIj5cbiAgICA8aW5wdXRcbiAgICAgICAgI2lucHV0XG4gICAgICAgIHR5cGU9XCJyYWRpb1wiXG4gICAgICAgIHRhYmluZGV4PVwiMFwiXG4gICAgICAgIFthdHRyLmlkXT1cImlucHV0SWRcIlxuICAgICAgICBbYXR0ci5uYW1lXT1cIm5hbWUgKyAnLXJhZGlvLScgKyByYWRpb0luZGV4XCJcbiAgICAgICAgW2F0dHIudmFsdWVdPVwidmFsdWVcIlxuICAgICAgICBbYXR0ci5hcmlhLWNoZWNrZWRdPVwiY2hlY2tlZFwiXG4gICAgICAgIFthdHRyLmFyaWEtbGFiZWxdPVwiYXJpYUxhYmVsIHx8IG51bGxcIlxuICAgICAgICBbYXR0ci5hcmlhLWxhYmVsbGVkYnldPVwiYXJpYUxhYmVsbGVkYnlcIlxuICAgICAgICBbYXR0ci5hcmlhLWRlc2NyaWJlZGJ5XT1cImFyaWFEZXNjcmliZWRieVwiXG4gICAgICAgIFthdHRyLmRhdGEtdGVzdF09XCJob3N0RGF0YVRlc3QgPz8gbmFtZVwiXG4gICAgICAgIFtjaGVja2VkXT1cImNoZWNrZWRcIlxuICAgICAgICBbY2xhc3MuZGlzYWJsZWRdPVwiZGlzYWJsZWRcIlxuICAgICAgICAoY2hhbmdlKT1cIm9uQ2hhbmdlKCRldmVudClcIlxuICAgICAgICAoYmx1cik9XCJvbklucHV0Qmx1cigkZXZlbnQpXCJcbiAgICAgICAgKGZvY3VzKT1cIm9uSW5wdXRGb2N1cygkZXZlbnQpXCIgLz5cbiAgICA8ZGl2IGNsYXNzPVwicmFkaW8tYnV0dG9uXCIgW2NsYXNzLmRpc2FibGVkXT1cImRpc2FibGVkXCIgKGNsaWNrKT1cImhhbmRsZUNsaWNrKCRldmVudCwgaW5wdXQpXCI+PC9kaXY+XG4gICAgPGxhYmVsIFtmb3JdPVwiaW5wdXRJZFwiIChjbGljayk9XCJzZWxlY3QoJGV2ZW50KVwiPlxuICAgICAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG4gICAgPC9sYWJlbD5cbjwvZGl2PlxuIl19

package/fesm2015/agorapulse-ui-components-paginator.mjs

@@ -1,10 +1,13 @@
+import { ButtonComponent } from '@agorapulse/ui-components/button';
+import { IconButtonComponent } from '@agorapulse/ui-components/icon-button';
 import * as i1 from '@agorapulse/ui-symbol';
-import { apArrowLeft1, apArrowRight1, AgorapulseUiSymbolModule } from '@agorapulse/ui-symbol';
+import { apChevronLeft, apChevronRight, AgorapulseUiSymbolModule } from '@agorapulse/ui-symbol';
 import { NgIf, NgForOf } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, ChangeDetectionStrategy, ViewChild, Input, Output, HostListener } from '@angular/core';
-import { IconButtonComponent } from '@agorapulse/ui-components/icon-button';
-import { ButtonComponent } from '@agorapulse/ui-components/button';
+import { EventEmitter, Component, ChangeDetectionStrategy, ViewChild, Input, Output, HostListener, ViewEncapsulation } from '@angular/core';
+import * as i2 from '@angular/forms';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { Subject, BehaviorSubject, combineLatest, distinctUntilChanged, takeUntil } from 'rxjs';
 
 class PaginatorButtonComponent {
     constructor() {
@@ -33,10 +36,10 @@ class PaginatorButtonComponent {
     }
 }
 PaginatorButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: PaginatorButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PaginatorButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.2", type: PaginatorButtonComponent, isStandalone: true, selector: "ap-paginator-button", inputs: { ariaLabel: "ariaLabel", disabled: "disabled", pageIndex: "pageIndex", selectedPageIndex: "selectedPageIndex" }, outputs: { selectPage: "selectPage" }, host: { listeners: { "window:keyup.space": "onSpaceKeyUp($event)" } }, viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true }], ngImport: i0, template: "<button #button\n        class=\"square-button\"\n        role=\"button\"\n        type=\"button\"\n        [id]=\"'paginator-button-' + pageIndex\"\n        [class.active]=\"selectedPageIndex === pageIndex\"\n        [attr.aria-label]=\"ariaLabel || null\"\n        (click)=\"onClickHandle(pageIndex)\"\n        (blur)=\"onBlurHandle()\"\n        (focus)=\"onFocusHandle()\">\n    <span>\n        {{pageIndex + 1}}\n    </span>\n</button>\n", styles: ["[color=facebook]{color:#1877f2}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#1877f2}[border=facebook]{border:1px solid #1877f2}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #A566A5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #C7AB82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #F2713C}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #FFD006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94C5AA}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2A9D8F}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78ACD8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525A9E}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6A2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729E}.square-button{width:36px;height:36px;max-width:36px;max-height:36px;min-width:36px;min-height:36px;border-radius:var(--ref-border-radius-sm);background:transparent;display:flex;align-items:center;justify-content:center;border:none;box-sizing:border-box}.square-button.active{background-color:var(--ref-color-electric-blue-100)}.square-button.active span{color:var(--ref-color-white)}.square-button:hover{cursor:pointer}.square-button:hover:not(.active){background-color:var(--ref-color-electric-blue-10)}.square-button:active{background-color:var(--ref-color-electric-blue-20)}@media (hover: hover){.square-button:focus:not(.disabled):not(:active){outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px}}.square-button span{color:var(--ref-color-electric-blue-100);font-family:var(--ref-font-family);font-weight:var(--ref-font-weight-regular);font-size:var(--ref-font-size-sm);line-height:var(--ref-line-height-sm)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PaginatorButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.2", type: PaginatorButtonComponent, isStandalone: true, selector: "ap-paginator-button", inputs: { ariaLabel: "ariaLabel", disabled: "disabled", pageIndex: "pageIndex", selectedPageIndex: "selectedPageIndex" }, outputs: { selectPage: "selectPage" }, host: { listeners: { "window:keyup.space": "onSpaceKeyUp($event)" } }, viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true }], ngImport: i0, template: "<button #button\n        class=\"square-button\"\n        role=\"button\"\n        type=\"button\"\n        [id]=\"'paginator-button-' + pageIndex\"\n        [class.active]=\"selectedPageIndex === pageIndex\"\n        [attr.aria-label]=\"ariaLabel || null\"\n        (click)=\"onClickHandle(pageIndex)\"\n        (blur)=\"onBlurHandle()\"\n        (focus)=\"onFocusHandle()\">\n    <span>\n        {{pageIndex + 1}}\n    </span>\n</button>\n", styles: ["[color=facebook]{color:#1877f2}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#1877f2}[border=facebook]{border:1px solid #1877f2}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #A566A5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #C7AB82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #F2713C}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #FFD006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94C5AA}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2A9D8F}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78ACD8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525A9E}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6A2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729E}.square-button{width:36px;height:36px;max-width:36px;max-height:36px;min-width:36px;min-height:36px;border-radius:var(--ref-border-radius-sm);background:transparent;display:flex;align-items:center;justify-content:center;border:none;box-sizing:border-box}.square-button:hover{cursor:pointer}.square-button:hover:not(.active){background-color:var(--ref-color-electric-blue-10)}@media (hover: hover){.square-button:focus:not(.disabled):not(:active){outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px}}.square-button:active{background-color:var(--ref-color-electric-blue-20)!important}.square-button.active{background-color:var(--ref-color-electric-blue-100)}.square-button.active span{color:var(--ref-color-white)}.square-button span{color:var(--ref-color-electric-blue-100);font-family:var(--ref-font-family);font-weight:var(--ref-font-weight-regular);font-size:var(--ref-font-size-sm);line-height:var(--ref-line-height-sm)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: PaginatorButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ap-paginator-button', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<button #button\n        class=\"square-button\"\n        role=\"button\"\n        type=\"button\"\n        [id]=\"'paginator-button-' + pageIndex\"\n        [class.active]=\"selectedPageIndex === pageIndex\"\n        [attr.aria-label]=\"ariaLabel || null\"\n        (click)=\"onClickHandle(pageIndex)\"\n        (blur)=\"onBlurHandle()\"\n        (focus)=\"onFocusHandle()\">\n    <span>\n        {{pageIndex + 1}}\n    </span>\n</button>\n", styles: ["[color=facebook]{color:#1877f2}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#1877f2}[border=facebook]{border:1px solid #1877f2}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #A566A5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #C7AB82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #F2713C}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #FFD006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94C5AA}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2A9D8F}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78ACD8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525A9E}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6A2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729E}.square-button{width:36px;height:36px;max-width:36px;max-height:36px;min-width:36px;min-height:36px;border-radius:var(--ref-border-radius-sm);background:transparent;display:flex;align-items:center;justify-content:center;border:none;box-sizing:border-box}.square-button.active{background-color:var(--ref-color-electric-blue-100)}.square-button.active span{color:var(--ref-color-white)}.square-button:hover{cursor:pointer}.square-button:hover:not(.active){background-color:var(--ref-color-electric-blue-10)}.square-button:active{background-color:var(--ref-color-electric-blue-20)}@media (hover: hover){.square-button:focus:not(.disabled):not(:active){outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px}}.square-button span{color:var(--ref-color-electric-blue-100);font-family:var(--ref-font-family);font-weight:var(--ref-font-weight-regular);font-size:var(--ref-font-size-sm);line-height:var(--ref-line-height-sm)}\n"] }]
+            args: [{ selector: 'ap-paginator-button', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<button #button\n        class=\"square-button\"\n        role=\"button\"\n        type=\"button\"\n        [id]=\"'paginator-button-' + pageIndex\"\n        [class.active]=\"selectedPageIndex === pageIndex\"\n        [attr.aria-label]=\"ariaLabel || null\"\n        (click)=\"onClickHandle(pageIndex)\"\n        (blur)=\"onBlurHandle()\"\n        (focus)=\"onFocusHandle()\">\n    <span>\n        {{pageIndex + 1}}\n    </span>\n</button>\n", styles: ["[color=facebook]{color:#1877f2}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#1877f2}[border=facebook]{border:1px solid #1877f2}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #A566A5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #C7AB82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #F2713C}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #FFD006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94C5AA}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2A9D8F}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78ACD8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525A9E}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6A2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729E}.square-button{width:36px;height:36px;max-width:36px;max-height:36px;min-width:36px;min-height:36px;border-radius:var(--ref-border-radius-sm);background:transparent;display:flex;align-items:center;justify-content:center;border:none;box-sizing:border-box}.square-button:hover{cursor:pointer}.square-button:hover:not(.active){background-color:var(--ref-color-electric-blue-10)}@media (hover: hover){.square-button:focus:not(.disabled):not(:active){outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px}}.square-button:active{background-color:var(--ref-color-electric-blue-20)!important}.square-button.active{background-color:var(--ref-color-electric-blue-100)}.square-button.active span{color:var(--ref-color-white)}.square-button span{color:var(--ref-color-electric-blue-100);font-family:var(--ref-font-family);font-weight:var(--ref-font-weight-regular);font-size:var(--ref-font-size-sm);line-height:var(--ref-line-height-sm)}\n"] }]
         }], propDecorators: { button: [{
                 type: ViewChild,
                 args: ['button']
@@ -56,56 +59,116 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.2", ngImpor
             }] } });
 
 class PaginatorComponent {
+    set currentPageIndex(value) {
+        this._currentPageIndex.next(value !== null && value !== void 0 ? value : this.DEFAULT_CURRENT_PAGE_INDEX);
+    }
+    get currentPageIndex() {
+        return this._currentPageIndex.getValue();
+    }
+    set itemCount(value) {
+        this._itemCount.next(value !== null && value !== void 0 ? value : this.DEFAULT_ITEM_COUNT);
+    }
+    get itemCount() {
+        return this._itemCount.getValue();
+    }
+    set itemCountPerPage(value) {
+        this._itemCountPerPage.next(value !== null && value !== void 0 ? value : this.DEFAULT_ITEM_COUNT_PER_PAGE);
+    }
+    get itemCountPerPage() {
+        return this._itemCountPerPage.getValue();
+    }
+    set middleSize(value) {
+        // make sure middle size is an odd number
+        if (value && value % 2 === 0) {
+            value++;
+        }
+        this._middleSize = value !== null && value !== void 0 ? value : this.DEFAULT_MIDDLE_SIZE;
+    }
+    get middleSize() {
+        return this._middleSize;
+    }
     constructor(symbolRegistry) {
         this.symbolRegistry = symbolRegistry;
-        this.itemCount = 0;
-        this.itemCountPerPage = 10;
-        this.edgeSize = 5;
-        this.middleSize = 3;
-        this.currentPageIndex = 0;
+        this.DEFAULT_MIDDLE_SIZE = 3;
+        this.DEFAULT_ITEM_COUNT = 0;
+        this.DEFAULT_ITEM_COUNT_PER_PAGE = 10;
+        this.DEFAULT_CURRENT_PAGE_INDEX = 0;
+        this.DEFAULT_EDGE_SIZE = 5;
+        this.displayGoTo = false;
+        this.edgeSize = this.DEFAULT_EDGE_SIZE;
+        this.goToLabel = 'Go to';
         this.currentPageIndexChange = new EventEmitter();
+        this.pageInput = '';
         this.pageCount = 0;
         this.firstPageDisplayed = true;
         this.lastPageDisplayed = true;
-        this.symbolRegistry.registerSymbols([
-            apArrowLeft1,
-            apArrowRight1
-        ]);
-    }
-    ngOnChanges(changes) {
-        // make sure middle size is an odd number
-        if (changes.middleSize && this.middleSize % 2 === 0) {
-            this.middleSize++;
-        }
-        if ((this.itemCountPerPage && (changes.itemCount || changes.itemCountPerPage)) || changes.currentPageIndex) {
-            this.pageCount = Math.ceil(this.itemCount / this.itemCountPerPage);
+        this.destroy$ = new Subject();
+        this._itemCount = new BehaviorSubject(this.DEFAULT_ITEM_COUNT);
+        this._itemCountPerPage = new BehaviorSubject(this.DEFAULT_ITEM_COUNT_PER_PAGE);
+        this._currentPageIndex = new BehaviorSubject(this.DEFAULT_CURRENT_PAGE_INDEX);
+        this.symbolRegistry.registerSymbols([apChevronLeft, apChevronRight]);
+        combineLatest([this._itemCount, this._itemCountPerPage, this._currentPageIndex])
+            .pipe(distinctUntilChanged(([previousItemCount, previousItemCountPerPage, previousCurrentPageIndex], [itemCount, itemCountPerPage, currentPageIndex]) => {
+            return (previousItemCount === itemCount &&
+                previousItemCountPerPage === itemCountPerPage &&
+                previousCurrentPageIndex === currentPageIndex);
+        }), takeUntil(this.destroy$))
+            .subscribe(([itemCount, itemCountPerPage, currentPageIndex]) => {
+            this.pageCount = Math.ceil(itemCount / itemCountPerPage);
             // make sure page index is between min and max page index
-            this.currentPageIndex = Math.max(0, Math.min(this.pageCount - 1, this.currentPageIndex));
+            this._currentPageIndex.next(Math.max(0, Math.min(this.pageCount - 1, currentPageIndex)));
             this.firstPageDisplayed = this.currentPageIndex === 0;
             this.lastPageDisplayed = this.currentPageIndex === this.pageCount - 1;
+        });
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    onEnterKeydownPressed() {
+        if (this.pageInput && !isNaN(+this.pageInput) && +this.pageInput > 0 && +this.pageInput <= this.pageCount) {
+            this.onSelectPage(+this.pageInput - 1);
         }
+        this.pageInput = '';
     }
     onSelectPage(pageIndex) {
+        this._currentPageIndex.next(pageIndex);
         this.currentPageIndexChange.emit(pageIndex);
     }
 }
 PaginatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: PaginatorComponent, deps: [{ token: i1.SymbolRegistry }], target: i0.ɵɵFactoryTarget.Component });
-PaginatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.2", type: PaginatorComponent, isStandalone: true, selector: "ap-paginator", inputs: { itemCount: "itemCount", itemCountPerPage: "itemCountPerPage", edgeSize: "edgeSize", middleSize: "middleSize", currentPageIndex: "currentPageIndex" }, outputs: { currentPageIndexChange: "currentPageIndexChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"item-index-overview\">\n    {{(currentPageIndex * itemCountPerPage) + 1}}\n    -{{lastPageDisplayed ? itemCount : (currentPageIndex + 1) * itemCountPerPage}}\n    of {{itemCount}}\n</div>\n\n<div class=\"pages\">\n    <ap-icon-button\n        ariaLabel=\"Select Previous Page button\"\n        name=\"select-previous-page-button\"\n        color=\"blue\"\n        [disabled]=\"firstPageDisplayed\"\n        (onClick)=\"onSelectPage(currentPageIndex - 1)\"\n        type=\"flat\"\n    >\n        <ap-symbol symbolId=\"arrow-left-1\"></ap-symbol>\n    </ap-icon-button>\n    <ng-container *ngIf=\"pageCount > edgeSize + 1; else allPagesDisplayed\">\n        <ng-container *ngIf=\"currentPageIndex >= edgeSize - 1; else oneOfFirstPagesDisplayed\">\n            <ng-container *ngIf=\"currentPageIndex <= pageCount - edgeSize; else oneOfLastPagesDisplayed\">\n                <ap-paginator-button [pageIndex]=\"0\"\n                                     [selectedPageIndex]=\"currentPageIndex\"\n                                     (selectPage)=\"onSelectPage($event)\">\n                </ap-paginator-button>\n                <span class=\"ellipsis\">...</span>\n                <ng-container *ngFor=\"let dummy of [].constructor(middleSize); let i = index\">\n                    <ap-paginator-button [pageIndex]=\"currentPageIndex + i - (middleSize - 1) / 2\"\n                                         [selectedPageIndex]=\"currentPageIndex\"\n                                         (selectPage)=\"onSelectPage($event)\">\n                    </ap-paginator-button>\n                </ng-container>\n                <span class=\"ellipsis\">...</span>\n                <ap-paginator-button [pageIndex]=\"pageCount - 1\"\n                                     [selectedPageIndex]=\"currentPageIndex\"\n                                     (selectPage)=\"onSelectPage($event)\">\n                </ap-paginator-button>\n            </ng-container>\n        </ng-container>\n        <ng-template #oneOfFirstPagesDisplayed>\n            <ng-container *ngFor=\"let dummy of [].constructor(edgeSize); let i = index\">\n                <ap-paginator-button [pageIndex]=\"i\"\n                                     [selectedPageIndex]=\"currentPageIndex\"\n                                     (selectPage)=\"onSelectPage($event)\">\n                </ap-paginator-button>\n            </ng-container>\n            <span class=\"ellipsis\">...</span>\n            <ap-paginator-button [pageIndex]=\"pageCount - 1\"\n                                 [selectedPageIndex]=\"currentPageIndex\"\n                                 (selectPage)=\"onSelectPage($event)\">\n            </ap-paginator-button>\n        </ng-template>\n        <ng-template #oneOfLastPagesDisplayed>\n            <ap-paginator-button [pageIndex]=\"0\"\n                                 [selectedPageIndex]=\"currentPageIndex\"\n                                 (selectPage)=\"onSelectPage($event)\">\n            </ap-paginator-button>\n            <span class=\"ellipsis\">...</span>\n            <ng-container *ngFor=\"let dummy of [].constructor(edgeSize); let i = index\">\n                <ap-paginator-button [pageIndex]=\"pageCount - edgeSize + i\"\n                                     [selectedPageIndex]=\"currentPageIndex\"\n                                     (selectPage)=\"onSelectPage($event)\">\n                </ap-paginator-button>\n            </ng-container>\n        </ng-template>\n    </ng-container>\n    <ng-template #allPagesDisplayed>\n        <ng-container *ngFor=\"let dummy of [].constructor(pageCount); let i = index\">\n            <ap-paginator-button [pageIndex]=\"i\"\n                                 [selectedPageIndex]=\"currentPageIndex\"\n                                 (selectPage)=\"onSelectPage($event)\">\n            </ap-paginator-button>\n        </ng-container>\n    </ng-template>\n    <ap-icon-button\n        ariaLabel=\"Select Next Page button\"\n        name=\"select-next-page-button\"\n        color=\"blue\"\n        [disabled]=\"lastPageDisplayed\"\n        (onClick)=\"onSelectPage(currentPageIndex + 1)\"\n        type=\"flat\"\n    >\n        <ap-symbol symbolId=\"arrow-right-1\"></ap-symbol>\n    </ap-icon-button>\n</div>\n", styles: ["[color=facebook]{color:#1877f2}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#1877f2}[border=facebook]{border:1px solid #1877f2}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #A566A5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #C7AB82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #F2713C}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #FFD006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94C5AA}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2A9D8F}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78ACD8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525A9E}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6A2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729E}.item-index-overview{position:absolute;line-height:36px}.pages{display:flex;justify-content:center;color:#178dfe;gap:var(--ref-spacing-xxxs)}.pages ap-paginator-button,.pages button.mat-flat-button{vertical-align:middle}.pages button.mat-flat-button:not(.mat-accent):not([disabled]){color:#178dfe}.pages button.mat-flat-button:not(.mat-accent):not([disabled]):hover{background-color:#e8f4ff}.pages .ellipsis{display:inline-block;width:36px;line-height:36px;text-align:center;vertical-align:bottom}\n"], dependencies: [{ kind: "ngmodule", type: AgorapulseUiSymbolModule }, { kind: "component", type: i1.SymbolComponent, selector: "ap-symbol[symbolId]", inputs: ["color", "symbolId", "size", "state"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PaginatorButtonComponent, selector: "ap-paginator-button", inputs: ["ariaLabel", "disabled", "pageIndex", "selectedPageIndex"], outputs: ["selectPage"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: IconButtonComponent, selector: "ap-icon-button", inputs: ["ariaLabel", "name", "color", "disabled", "menuTrigger", "locked", "loading", "type"], outputs: ["onClick", "onFocus", "onBlur", "menuOpened", "menuClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PaginatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.2", type: PaginatorComponent, isStandalone: true, selector: "ap-paginator", inputs: { currentPageIndex: "currentPageIndex", displayGoTo: "displayGoTo", edgeSize: "edgeSize", goToLabel: "goToLabel", itemCount: "itemCount", itemCountPerPage: "itemCountPerPage", middleSize: "middleSize" }, outputs: { currentPageIndexChange: "currentPageIndexChange" }, host: { listeners: { "keydown.enter": "onEnterKeydownPressed()" } }, ngImport: i0, template: "<div class=\"item-index-overview\">\n    {{ currentPageIndex * itemCountPerPage + 1 }}\n    - {{ lastPageDisplayed ? itemCount : (currentPageIndex + 1) * itemCountPerPage }} of {{ itemCount }}\n</div>\n\n<div class=\"pages\">\n    <button\n        class=\"navigation-button\"\n        ariaLabel=\"Select Previous Page button\"\n        [disabled]=\"firstPageDisplayed\"\n        (click)=\"onSelectPage(currentPageIndex - 1)\">\n        <ap-symbol symbolId=\"chevron-left\"></ap-symbol>\n    </button>\n    <ng-container *ngIf=\"pageCount > edgeSize + 1; else allPagesDisplayed\">\n        <ng-container *ngIf=\"currentPageIndex >= edgeSize - 1; else oneOfFirstPagesDisplayed\">\n            <ng-container *ngIf=\"currentPageIndex <= pageCount - edgeSize; else oneOfLastPagesDisplayed\">\n                <ap-paginator-button\n                    [pageIndex]=\"0\"\n                    [selectedPageIndex]=\"currentPageIndex\"\n                    (selectPage)=\"onSelectPage($event)\">\n                </ap-paginator-button>\n                <span class=\"ellipsis\">...</span>\n                <ng-container *ngFor=\"let dummy of [].constructor(middleSize); let i = index\">\n                    <ap-paginator-button\n                        [pageIndex]=\"currentPageIndex + i - (middleSize - 1) / 2\"\n                        [selectedPageIndex]=\"currentPageIndex\"\n                        (selectPage)=\"onSelectPage($event)\">\n                    </ap-paginator-button>\n                </ng-container>\n                <span class=\"ellipsis\">...</span>\n                <ap-paginator-button\n                    [pageIndex]=\"pageCount - 1\"\n                    [selectedPageIndex]=\"currentPageIndex\"\n                    (selectPage)=\"onSelectPage($event)\">\n                </ap-paginator-button>\n            </ng-container>\n        </ng-container>\n        <ng-template #oneOfFirstPagesDisplayed>\n            <ng-container *ngFor=\"let dummy of [].constructor(edgeSize); let i = index\">\n                <ap-paginator-button\n                    [pageIndex]=\"i\"\n                    [selectedPageIndex]=\"currentPageIndex\"\n                    (selectPage)=\"onSelectPage($event)\">\n                </ap-paginator-button>\n            </ng-container>\n            <span class=\"ellipsis\">...</span>\n            <ap-paginator-button\n                [pageIndex]=\"pageCount - 1\"\n                [selectedPageIndex]=\"currentPageIndex\"\n                (selectPage)=\"onSelectPage($event)\">\n            </ap-paginator-button>\n        </ng-template>\n        <ng-template #oneOfLastPagesDisplayed>\n            <ap-paginator-button\n                [pageIndex]=\"0\"\n                [selectedPageIndex]=\"currentPageIndex\"\n                (selectPage)=\"onSelectPage($event)\">\n            </ap-paginator-button>\n            <span class=\"ellipsis\">...</span>\n            <ng-container *ngFor=\"let dummy of [].constructor(edgeSize); let i = index\">\n                <ap-paginator-button\n                    [pageIndex]=\"pageCount - edgeSize + i\"\n                    [selectedPageIndex]=\"currentPageIndex\"\n                    (selectPage)=\"onSelectPage($event)\">\n                </ap-paginator-button>\n            </ng-container>\n        </ng-template>\n    </ng-container>\n    <ng-template #allPagesDisplayed>\n        <ng-container *ngFor=\"let dummy of [].constructor(pageCount); let i = index\">\n            <ap-paginator-button\n                [pageIndex]=\"i\"\n                [selectedPageIndex]=\"currentPageIndex\"\n                (selectPage)=\"onSelectPage($event)\">\n            </ap-paginator-button>\n        </ng-container>\n    </ng-template>\n    <button\n        class=\"navigation-button\"\n        ariaLabel=\"Select Next Page button\"\n        [disabled]=\"lastPageDisplayed\"\n        (click)=\"onSelectPage(currentPageIndex + 1)\">\n        <ap-symbol symbolId=\"chevron-right\"></ap-symbol>\n    </button>\n</div>\n<div *ngIf=\"displayGoTo\" class=\"go-to\">\n    <span>{{ goToLabel }}</span>\n    <input type=\"number\" [(ngModel)]=\"pageInput\" />\n</div>\n", styles: ["ap-paginator{display:flex;align-items:center;gap:var(--ref-spacing-lg);--paginator-button-height: 36px}ap-paginator .item-index-overview{font-weight:var(--ref-font-weight-regular);font-size:var(--ref-font-size-sm);line-height:var(--ref-line-height-sm);color:var(--ref-color-grey-60);white-space:nowrap}ap-paginator .navigation-button{display:grid;place-content:center;height:var(--paginator-button-height);width:var(--paginator-button-height);min-height:var(--paginator-button-height);min-width:var(--paginator-button-height);max-height:var(--paginator-button-height);max-width:var(--paginator-button-height);border-radius:var(--ref-border-radius-sm);background:transparent;border:none}ap-paginator .navigation-button ap-symbol{color:var(--ref-color-electric-blue-100)}ap-paginator .navigation-button:disabled{pointer-events:none}ap-paginator .navigation-button:disabled ap-symbol{color:var(--ref-color-grey-40)}ap-paginator .navigation-button:not(:disabled){cursor:pointer}ap-paginator .navigation-button:hover:not(:disabled){background:var(--ref-color-electric-blue-10)}ap-paginator .navigation-button:active{background:var(--ref-color-electric-blue-20)}@media (hover: hover){ap-paginator .navigation-button:focus:not(.disabled):not(:active){outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-paginator .pages{display:flex;justify-self:center;color:var(--ref-color-electric-blue-100);gap:var(--ref-spacing-xxxs)}ap-paginator .pages ap-paginator-button,ap-paginator .pages button.mat-flat-button{vertical-align:middle}ap-paginator .pages button.mat-flat-button:not(.mat-accent):not([disabled]){color:var(--ref-color-electric-blue-100)}ap-paginator .pages button.mat-flat-button:not(.mat-accent):not([disabled]):hover{background-color:var(--ref-color-electric-blue-10)}ap-paginator .pages .ellipsis{display:inline-block;width:var(--paginator-button-height);line-height:var(--paginator-button-height);text-align:center;vertical-align:bottom}ap-paginator .go-to{display:flex;align-items:center;gap:var(--ref-spacing-xs)}ap-paginator .go-to span{font-weight:var(--ref-font-weight-standard);font-size:var(--ref-font-size-sm);line-height:var(--ref-line-height-sm);color:var(--ref-color-grey-60)}ap-paginator .go-to input{box-sizing:border-box;background:var(--ref-color-white);width:48px;height:var(--paginator-button-height);border-radius:var(--ref-border-radius-sm);border:1px solid var(--ref-color-grey-20);padding:var(--ref-spacing-xs) var(--ref-spacing-sm)}\n"], dependencies: [{ kind: "ngmodule", type: AgorapulseUiSymbolModule }, { kind: "component", type: i1.SymbolComponent, selector: "ap-symbol[symbolId]", inputs: ["color", "symbolId", "size", "state"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PaginatorButtonComponent, selector: "ap-paginator-button", inputs: ["ariaLabel", "disabled", "pageIndex", "selectedPageIndex"], outputs: ["selectPage"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: PaginatorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ap-paginator', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AgorapulseUiSymbolModule, ButtonComponent, NgIf, PaginatorButtonComponent, NgForOf, IconButtonComponent], standalone: true, template: "<div class=\"item-index-overview\">\n    {{(currentPageIndex * itemCountPerPage) + 1}}\n    -{{lastPageDisplayed ? itemCount : (currentPageIndex + 1) * itemCountPerPage}}\n    of {{itemCount}}\n</div>\n\n<div class=\"pages\">\n    <ap-icon-button\n        ariaLabel=\"Select Previous Page button\"\n        name=\"select-previous-page-button\"\n        color=\"blue\"\n        [disabled]=\"firstPageDisplayed\"\n        (onClick)=\"onSelectPage(currentPageIndex - 1)\"\n        type=\"flat\"\n    >\n        <ap-symbol symbolId=\"arrow-left-1\"></ap-symbol>\n    </ap-icon-button>\n    <ng-container *ngIf=\"pageCount > edgeSize + 1; else allPagesDisplayed\">\n        <ng-container *ngIf=\"currentPageIndex >= edgeSize - 1; else oneOfFirstPagesDisplayed\">\n            <ng-container *ngIf=\"currentPageIndex <= pageCount - edgeSize; else oneOfLastPagesDisplayed\">\n                <ap-paginator-button [pageIndex]=\"0\"\n                                     [selectedPageIndex]=\"currentPageIndex\"\n                                     (selectPage)=\"onSelectPage($event)\">\n                </ap-paginator-button>\n                <span class=\"ellipsis\">...</span>\n                <ng-container *ngFor=\"let dummy of [].constructor(middleSize); let i = index\">\n                    <ap-paginator-button [pageIndex]=\"currentPageIndex + i - (middleSize - 1) / 2\"\n                                         [selectedPageIndex]=\"currentPageIndex\"\n                                         (selectPage)=\"onSelectPage($event)\">\n                    </ap-paginator-button>\n                </ng-container>\n                <span class=\"ellipsis\">...</span>\n                <ap-paginator-button [pageIndex]=\"pageCount - 1\"\n                                     [selectedPageIndex]=\"currentPageIndex\"\n                                     (selectPage)=\"onSelectPage($event)\">\n                </ap-paginator-button>\n            </ng-container>\n        </ng-container>\n        <ng-template #oneOfFirstPagesDisplayed>\n            <ng-container *ngFor=\"let dummy of [].constructor(edgeSize); let i = index\">\n                <ap-paginator-button [pageIndex]=\"i\"\n                                     [selectedPageIndex]=\"currentPageIndex\"\n                                     (selectPage)=\"onSelectPage($event)\">\n                </ap-paginator-button>\n            </ng-container>\n            <span class=\"ellipsis\">...</span>\n            <ap-paginator-button [pageIndex]=\"pageCount - 1\"\n                                 [selectedPageIndex]=\"currentPageIndex\"\n                                 (selectPage)=\"onSelectPage($event)\">\n            </ap-paginator-button>\n        </ng-template>\n        <ng-template #oneOfLastPagesDisplayed>\n            <ap-paginator-button [pageIndex]=\"0\"\n                                 [selectedPageIndex]=\"currentPageIndex\"\n                                 (selectPage)=\"onSelectPage($event)\">\n            </ap-paginator-button>\n            <span class=\"ellipsis\">...</span>\n            <ng-container *ngFor=\"let dummy of [].constructor(edgeSize); let i = index\">\n                <ap-paginator-button [pageIndex]=\"pageCount - edgeSize + i\"\n                                     [selectedPageIndex]=\"currentPageIndex\"\n                                     (selectPage)=\"onSelectPage($event)\">\n                </ap-paginator-button>\n            </ng-container>\n        </ng-template>\n    </ng-container>\n    <ng-template #allPagesDisplayed>\n        <ng-container *ngFor=\"let dummy of [].constructor(pageCount); let i = index\">\n            <ap-paginator-button [pageIndex]=\"i\"\n                                 [selectedPageIndex]=\"currentPageIndex\"\n                                 (selectPage)=\"onSelectPage($event)\">\n            </ap-paginator-button>\n        </ng-container>\n    </ng-template>\n    <ap-icon-button\n        ariaLabel=\"Select Next Page button\"\n        name=\"select-next-page-button\"\n        color=\"blue\"\n        [disabled]=\"lastPageDisplayed\"\n        (onClick)=\"onSelectPage(currentPageIndex + 1)\"\n        type=\"flat\"\n    >\n        <ap-symbol symbolId=\"arrow-right-1\"></ap-symbol>\n    </ap-icon-button>\n</div>\n", styles: ["[color=facebook]{color:#1877f2}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#1877f2}[border=facebook]{border:1px solid #1877f2}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #A566A5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #C7AB82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #F2713C}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #FFD006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94C5AA}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2A9D8F}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78ACD8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525A9E}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6A2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729E}.item-index-overview{position:absolute;line-height:36px}.pages{display:flex;justify-content:center;color:#178dfe;gap:var(--ref-spacing-xxxs)}.pages ap-paginator-button,.pages button.mat-flat-button{vertical-align:middle}.pages button.mat-flat-button:not(.mat-accent):not([disabled]){color:#178dfe}.pages button.mat-flat-button:not(.mat-accent):not([disabled]):hover{background-color:#e8f4ff}.pages .ellipsis{display:inline-block;width:36px;line-height:36px;text-align:center;vertical-align:bottom}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.SymbolRegistry }]; }, propDecorators: { itemCount: [{
+            args: [{ selector: 'ap-paginator', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        AgorapulseUiSymbolModule,
+                        ButtonComponent,
+                        NgIf,
+                        PaginatorButtonComponent,
+                        NgForOf,
+                        IconButtonComponent,
+                        ReactiveFormsModule,
+                        FormsModule,
+                    ], standalone: true, encapsulation: ViewEncapsulation.None, template: "<div class=\"item-index-overview\">\n    {{ currentPageIndex * itemCountPerPage + 1 }}\n    - {{ lastPageDisplayed ? itemCount : (currentPageIndex + 1) * itemCountPerPage }} of {{ itemCount }}\n</div>\n\n<div class=\"pages\">\n    <button\n        class=\"navigation-button\"\n        ariaLabel=\"Select Previous Page button\"\n        [disabled]=\"firstPageDisplayed\"\n        (click)=\"onSelectPage(currentPageIndex - 1)\">\n        <ap-symbol symbolId=\"chevron-left\"></ap-symbol>\n    </button>\n    <ng-container *ngIf=\"pageCount > edgeSize + 1; else allPagesDisplayed\">\n        <ng-container *ngIf=\"currentPageIndex >= edgeSize - 1; else oneOfFirstPagesDisplayed\">\n            <ng-container *ngIf=\"currentPageIndex <= pageCount - edgeSize; else oneOfLastPagesDisplayed\">\n                <ap-paginator-button\n                    [pageIndex]=\"0\"\n                    [selectedPageIndex]=\"currentPageIndex\"\n                    (selectPage)=\"onSelectPage($event)\">\n                </ap-paginator-button>\n                <span class=\"ellipsis\">...</span>\n                <ng-container *ngFor=\"let dummy of [].constructor(middleSize); let i = index\">\n                    <ap-paginator-button\n                        [pageIndex]=\"currentPageIndex + i - (middleSize - 1) / 2\"\n                        [selectedPageIndex]=\"currentPageIndex\"\n                        (selectPage)=\"onSelectPage($event)\">\n                    </ap-paginator-button>\n                </ng-container>\n                <span class=\"ellipsis\">...</span>\n                <ap-paginator-button\n                    [pageIndex]=\"pageCount - 1\"\n                    [selectedPageIndex]=\"currentPageIndex\"\n                    (selectPage)=\"onSelectPage($event)\">\n                </ap-paginator-button>\n            </ng-container>\n        </ng-container>\n        <ng-template #oneOfFirstPagesDisplayed>\n            <ng-container *ngFor=\"let dummy of [].constructor(edgeSize); let i = index\">\n                <ap-paginator-button\n                    [pageIndex]=\"i\"\n                    [selectedPageIndex]=\"currentPageIndex\"\n                    (selectPage)=\"onSelectPage($event)\">\n                </ap-paginator-button>\n            </ng-container>\n            <span class=\"ellipsis\">...</span>\n            <ap-paginator-button\n                [pageIndex]=\"pageCount - 1\"\n                [selectedPageIndex]=\"currentPageIndex\"\n                (selectPage)=\"onSelectPage($event)\">\n            </ap-paginator-button>\n        </ng-template>\n        <ng-template #oneOfLastPagesDisplayed>\n            <ap-paginator-button\n                [pageIndex]=\"0\"\n                [selectedPageIndex]=\"currentPageIndex\"\n                (selectPage)=\"onSelectPage($event)\">\n            </ap-paginator-button>\n            <span class=\"ellipsis\">...</span>\n            <ng-container *ngFor=\"let dummy of [].constructor(edgeSize); let i = index\">\n                <ap-paginator-button\n                    [pageIndex]=\"pageCount - edgeSize + i\"\n                    [selectedPageIndex]=\"currentPageIndex\"\n                    (selectPage)=\"onSelectPage($event)\">\n                </ap-paginator-button>\n            </ng-container>\n        </ng-template>\n    </ng-container>\n    <ng-template #allPagesDisplayed>\n        <ng-container *ngFor=\"let dummy of [].constructor(pageCount); let i = index\">\n            <ap-paginator-button\n                [pageIndex]=\"i\"\n                [selectedPageIndex]=\"currentPageIndex\"\n                (selectPage)=\"onSelectPage($event)\">\n            </ap-paginator-button>\n        </ng-container>\n    </ng-template>\n    <button\n        class=\"navigation-button\"\n        ariaLabel=\"Select Next Page button\"\n        [disabled]=\"lastPageDisplayed\"\n        (click)=\"onSelectPage(currentPageIndex + 1)\">\n        <ap-symbol symbolId=\"chevron-right\"></ap-symbol>\n    </button>\n</div>\n<div *ngIf=\"displayGoTo\" class=\"go-to\">\n    <span>{{ goToLabel }}</span>\n    <input type=\"number\" [(ngModel)]=\"pageInput\" />\n</div>\n", styles: ["ap-paginator{display:flex;align-items:center;gap:var(--ref-spacing-lg);--paginator-button-height: 36px}ap-paginator .item-index-overview{font-weight:var(--ref-font-weight-regular);font-size:var(--ref-font-size-sm);line-height:var(--ref-line-height-sm);color:var(--ref-color-grey-60);white-space:nowrap}ap-paginator .navigation-button{display:grid;place-content:center;height:var(--paginator-button-height);width:var(--paginator-button-height);min-height:var(--paginator-button-height);min-width:var(--paginator-button-height);max-height:var(--paginator-button-height);max-width:var(--paginator-button-height);border-radius:var(--ref-border-radius-sm);background:transparent;border:none}ap-paginator .navigation-button ap-symbol{color:var(--ref-color-electric-blue-100)}ap-paginator .navigation-button:disabled{pointer-events:none}ap-paginator .navigation-button:disabled ap-symbol{color:var(--ref-color-grey-40)}ap-paginator .navigation-button:not(:disabled){cursor:pointer}ap-paginator .navigation-button:hover:not(:disabled){background:var(--ref-color-electric-blue-10)}ap-paginator .navigation-button:active{background:var(--ref-color-electric-blue-20)}@media (hover: hover){ap-paginator .navigation-button:focus:not(.disabled):not(:active){outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-paginator .pages{display:flex;justify-self:center;color:var(--ref-color-electric-blue-100);gap:var(--ref-spacing-xxxs)}ap-paginator .pages ap-paginator-button,ap-paginator .pages button.mat-flat-button{vertical-align:middle}ap-paginator .pages button.mat-flat-button:not(.mat-accent):not([disabled]){color:var(--ref-color-electric-blue-100)}ap-paginator .pages button.mat-flat-button:not(.mat-accent):not([disabled]):hover{background-color:var(--ref-color-electric-blue-10)}ap-paginator .pages .ellipsis{display:inline-block;width:var(--paginator-button-height);line-height:var(--paginator-button-height);text-align:center;vertical-align:bottom}ap-paginator .go-to{display:flex;align-items:center;gap:var(--ref-spacing-xs)}ap-paginator .go-to span{font-weight:var(--ref-font-weight-standard);font-size:var(--ref-font-size-sm);line-height:var(--ref-line-height-sm);color:var(--ref-color-grey-60)}ap-paginator .go-to input{box-sizing:border-box;background:var(--ref-color-white);width:48px;height:var(--paginator-button-height);border-radius:var(--ref-border-radius-sm);border:1px solid var(--ref-color-grey-20);padding:var(--ref-spacing-xs) var(--ref-spacing-sm)}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.SymbolRegistry }]; }, propDecorators: { currentPageIndex: [{
                 type: Input
-            }], itemCountPerPage: [{
+            }], displayGoTo: [{
                 type: Input
             }], edgeSize: [{
                 type: Input
-            }], middleSize: [{
+            }], goToLabel: [{
+                type: Input
+            }], itemCount: [{
+                type: Input
+            }], itemCountPerPage: [{
                 type: Input
-            }], currentPageIndex: [{
+            }], middleSize: [{
                 type: Input
             }], currentPageIndexChange: [{
                 type: Output
+            }], onEnterKeydownPressed: [{
+                type: HostListener,
+                args: ['keydown.enter']
             }] } });
 
 /**