@crowdfarming/oliva-ds 1.13.0-rc.3 → 1.13.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Input, Component, EventEmitter, Output, input, computed, output, signal, effect, forwardRef, ViewChild, HostListener, ViewChildren } from '@angular/core';
|
|
2
|
+
import { Input, Component, EventEmitter, Output, input, computed, output, signal, effect, forwardRef, ViewChild, model, HostListener, ViewChildren } from '@angular/core';
|
|
3
3
|
import * as i1$1 from '@angular/common';
|
|
4
4
|
import { CommonModule, NgClass } from '@angular/common';
|
|
5
5
|
import * as i1 from '@angular/platform-browser';
|
|
@@ -3240,6 +3240,7 @@ class InputPaymentComponent {
|
|
|
3240
3240
|
required = false;
|
|
3241
3241
|
size = 'md';
|
|
3242
3242
|
fullWidth = false;
|
|
3243
|
+
icon = 'card';
|
|
3243
3244
|
emitCardNumber = new EventEmitter();
|
|
3244
3245
|
emitDateValue = new EventEmitter();
|
|
3245
3246
|
dateInput;
|
|
@@ -3338,13 +3339,13 @@ class InputPaymentComponent {
|
|
|
3338
3339
|
this.dateNumberDisplay = groups.join('/');
|
|
3339
3340
|
}
|
|
3340
3341
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputPaymentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3341
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: InputPaymentComponent, isStandalone: true, selector: "lib-input-payment", inputs: { label: "label", placeholder: "placeholder", helperText: "helperText", alertText: "alertText", successText: "successText", error: "error", success: "success", disabled: "disabled", readonly: "readonly", required: "required", size: "size", fullWidth: "fullWidth" }, outputs: { emitCardNumber: "emitCardNumber", emitDateValue: "emitDateValue" }, providers: [
|
|
3342
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: InputPaymentComponent, isStandalone: true, selector: "lib-input-payment", inputs: { label: "label", placeholder: "placeholder", helperText: "helperText", alertText: "alertText", successText: "successText", error: "error", success: "success", disabled: "disabled", readonly: "readonly", required: "required", size: "size", fullWidth: "fullWidth", icon: "icon" }, outputs: { emitCardNumber: "emitCardNumber", emitDateValue: "emitDateValue" }, providers: [
|
|
3342
3343
|
{
|
|
3343
3344
|
provide: NG_VALUE_ACCESSOR,
|
|
3344
3345
|
useExisting: forwardRef(() => InputPaymentComponent),
|
|
3345
3346
|
multi: true,
|
|
3346
3347
|
},
|
|
3347
|
-
], viewQueries: [{ propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true }], ngImport: i0, template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n type=\"text\"\n inputmode=\"numeric\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [class]=\"inputClass.join(' ')\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [required]=\"required\"\n [value]=\"cardNumberDisplay\"\n (input)=\"onCardInput($event)\"\n (blur)=\"onBlur()\"\n />\n <input\n #dateInput\n type=\"text\"\n inputmode=\"numeric\"\n placeholder=\"dd/mm\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n class=\"c-text-input__mini\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [required]=\"required\"\n [value]=\"dateNumberDisplay\"\n (input)=\"onDateInput($event)\"\n (blur)=\"onBlur()\"\n />\n <span class=\"c-text-input__icon\">\n <lib-icon
|
|
3348
|
+
], viewQueries: [{ propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true }], ngImport: i0, template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n type=\"text\"\n inputmode=\"numeric\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [class]=\"inputClass.join(' ')\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [required]=\"required\"\n [value]=\"cardNumberDisplay\"\n (input)=\"onCardInput($event)\"\n (blur)=\"onBlur()\"\n />\n <input\n #dateInput\n type=\"text\"\n inputmode=\"numeric\"\n placeholder=\"dd/mm\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n class=\"c-text-input__mini\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [required]=\"required\"\n [value]=\"dateNumberDisplay\"\n (input)=\"onDateInput($event)\"\n (blur)=\"onBlur()\"\n />\n <span class=\"c-text-input__icon\">\n <lib-icon [name]=\"disabled ? 'carddisabled' : icon\" size=\"md\"></lib-icon>\n </span>\n </div>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"password-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n </span>\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"danger\" [text]=\"alertText\"></lib-helper-text>\n </span>\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></lib-helper-text>\n </span>\n</div>\n", styles: [".c-text-input{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--space-component-gap-sm);max-width:300px}.c-text-input--full-width{max-width:100%}.c-text-input__input{width:100%;border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-md) var(--space-component-padding-sm) var(--space-component-padding-md) 2rem;align-items:center;gap:var(--space-component-gap-sm);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-text-input__input:focus-visible{border-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-text-input__input--sm,.c-text-input__input--md{padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) 2rem}.c-text-input__input.is-error{border-color:var(--color-textfield-border-error)}.c-text-input__input.is-success{border-color:var(--color-feedback-success-surface-border)}.c-text-input__input.is-disabled{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled);color:var(--color-textfield-content-disabled)}.c-text-input__input.is-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.c-text-input__alert{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-danger-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__success{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-success-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper{color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper.is-error{color:var(--color-textfield-helper-error)}.c-text-input__helper.is-success{color:var(--color-textfield-helper-success)}.c-text-input__helper.is-default{color:var(--color-textfield-helper-default)}.c-text-input__wrapper{display:flex;position:relative;width:100%}.c-text-input__wrapper:focus-within input:first-of-type{border:var(--size-textfield-border-width) solid var(--color-textfield-border-active);outline:none}.c-text-input__icon{position:absolute;top:50%;left:var(--space-component-padding-sm);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}.c-text-input__mini{position:absolute;right:7px;border:0;height:calc(100% - 4px);top:0;bottom:0;margin:auto;border-radius:8px;width:81px;text-align:right;font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-text-input__mini:focus-visible{outline:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "size", "disabled", "for", "innerHTML"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "name", "color"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass"] }] });
|
|
3348
3349
|
}
|
|
3349
3350
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputPaymentComponent, decorators: [{
|
|
3350
3351
|
type: Component,
|
|
@@ -3360,7 +3361,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
3360
3361
|
useExisting: forwardRef(() => InputPaymentComponent),
|
|
3361
3362
|
multi: true,
|
|
3362
3363
|
},
|
|
3363
|
-
], template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n type=\"text\"\n inputmode=\"numeric\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [class]=\"inputClass.join(' ')\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [required]=\"required\"\n [value]=\"cardNumberDisplay\"\n (input)=\"onCardInput($event)\"\n (blur)=\"onBlur()\"\n />\n <input\n #dateInput\n type=\"text\"\n inputmode=\"numeric\"\n placeholder=\"dd/mm\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n class=\"c-text-input__mini\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [required]=\"required\"\n [value]=\"dateNumberDisplay\"\n (input)=\"onDateInput($event)\"\n (blur)=\"onBlur()\"\n />\n <span class=\"c-text-input__icon\">\n <lib-icon
|
|
3364
|
+
], template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n type=\"text\"\n inputmode=\"numeric\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [class]=\"inputClass.join(' ')\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [required]=\"required\"\n [value]=\"cardNumberDisplay\"\n (input)=\"onCardInput($event)\"\n (blur)=\"onBlur()\"\n />\n <input\n #dateInput\n type=\"text\"\n inputmode=\"numeric\"\n placeholder=\"dd/mm\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n class=\"c-text-input__mini\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [required]=\"required\"\n [value]=\"dateNumberDisplay\"\n (input)=\"onDateInput($event)\"\n (blur)=\"onBlur()\"\n />\n <span class=\"c-text-input__icon\">\n <lib-icon [name]=\"disabled ? 'carddisabled' : icon\" size=\"md\"></lib-icon>\n </span>\n </div>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"password-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n </span>\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"danger\" [text]=\"alertText\"></lib-helper-text>\n </span>\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></lib-helper-text>\n </span>\n</div>\n", styles: [".c-text-input{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--space-component-gap-sm);max-width:300px}.c-text-input--full-width{max-width:100%}.c-text-input__input{width:100%;border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-md) var(--space-component-padding-sm) var(--space-component-padding-md) 2rem;align-items:center;gap:var(--space-component-gap-sm);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-text-input__input:focus-visible{border-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-text-input__input--sm,.c-text-input__input--md{padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) 2rem}.c-text-input__input.is-error{border-color:var(--color-textfield-border-error)}.c-text-input__input.is-success{border-color:var(--color-feedback-success-surface-border)}.c-text-input__input.is-disabled{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled);color:var(--color-textfield-content-disabled)}.c-text-input__input.is-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.c-text-input__alert{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-danger-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__success{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-success-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper{color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper.is-error{color:var(--color-textfield-helper-error)}.c-text-input__helper.is-success{color:var(--color-textfield-helper-success)}.c-text-input__helper.is-default{color:var(--color-textfield-helper-default)}.c-text-input__wrapper{display:flex;position:relative;width:100%}.c-text-input__wrapper:focus-within input:first-of-type{border:var(--size-textfield-border-width) solid var(--color-textfield-border-active);outline:none}.c-text-input__icon{position:absolute;top:50%;left:var(--space-component-padding-sm);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}.c-text-input__mini{position:absolute;right:7px;border:0;height:calc(100% - 4px);top:0;bottom:0;margin:auto;border-radius:8px;width:81px;text-align:right;font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-text-input__mini:focus-visible{outline:none}\n"] }]
|
|
3364
3365
|
}], propDecorators: { label: [{
|
|
3365
3366
|
type: Input
|
|
3366
3367
|
}], placeholder: [{
|
|
@@ -3385,6 +3386,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
3385
3386
|
type: Input
|
|
3386
3387
|
}], fullWidth: [{
|
|
3387
3388
|
type: Input
|
|
3389
|
+
}], icon: [{
|
|
3390
|
+
type: Input
|
|
3388
3391
|
}], emitCardNumber: [{
|
|
3389
3392
|
type: Output
|
|
3390
3393
|
}], emitDateValue: [{
|
|
@@ -3632,74 +3635,119 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
3632
3635
|
}] } });
|
|
3633
3636
|
|
|
3634
3637
|
class PaginationComponent {
|
|
3635
|
-
totalPages = 1;
|
|
3636
|
-
|
|
3637
|
-
|
|
3638
|
-
|
|
3639
|
-
|
|
3640
|
-
|
|
3641
|
-
|
|
3642
|
-
|
|
3643
|
-
|
|
3644
|
-
|
|
3645
|
-
|
|
3646
|
-
}
|
|
3647
|
-
buildPages() {
|
|
3648
|
-
const total = this.totalPages;
|
|
3649
|
-
const current = this.currentPage;
|
|
3650
|
-
const neighbors = this.size === 'sm' ? 1 : 3;
|
|
3638
|
+
totalPages = input(1);
|
|
3639
|
+
size = input('md');
|
|
3640
|
+
currentPage = model(1);
|
|
3641
|
+
prevClick = output();
|
|
3642
|
+
nextClick = output();
|
|
3643
|
+
// Computed signal for pages
|
|
3644
|
+
pages = computed(() => {
|
|
3645
|
+
const total = this.totalPages();
|
|
3646
|
+
const current = this.currentPage();
|
|
3647
|
+
const size = this.size();
|
|
3648
|
+
const neighbors = size === 'sm' ? 1 : 3;
|
|
3651
3649
|
const result = [];
|
|
3652
|
-
|
|
3653
|
-
|
|
3654
|
-
|
|
3655
|
-
|
|
3656
|
-
|
|
3657
|
-
|
|
3658
|
-
|
|
3659
|
-
|
|
3660
|
-
|
|
3661
|
-
|
|
3662
|
-
|
|
3650
|
+
if (size === 'sm') {
|
|
3651
|
+
// Small size logic
|
|
3652
|
+
if (total <= 5) {
|
|
3653
|
+
for (let i = 1; i <= total; i++) {
|
|
3654
|
+
result.push(i);
|
|
3655
|
+
}
|
|
3656
|
+
return result;
|
|
3657
|
+
}
|
|
3658
|
+
if (current <= 3) {
|
|
3659
|
+
// Show first 3 pages + ellipsis + last page
|
|
3660
|
+
for (let i = 1; i <= 3; i++) {
|
|
3661
|
+
result.push(i);
|
|
3662
|
+
}
|
|
3663
|
+
result.push('ellipsis');
|
|
3664
|
+
result.push(total);
|
|
3665
|
+
}
|
|
3666
|
+
else if (current >= total - 2) {
|
|
3667
|
+
// Show first page + ellipsis + last 3 pages
|
|
3668
|
+
result.push(1);
|
|
3669
|
+
result.push('ellipsis');
|
|
3670
|
+
for (let i = total - 2; i <= total; i++) {
|
|
3671
|
+
result.push(i);
|
|
3672
|
+
}
|
|
3673
|
+
}
|
|
3674
|
+
else {
|
|
3675
|
+
// Show first page + ellipsis + current + ellipsis + last page
|
|
3676
|
+
result.push(1);
|
|
3677
|
+
result.push('ellipsis');
|
|
3678
|
+
for (let i = current; i <= current; i++) {
|
|
3679
|
+
result.push(i);
|
|
3680
|
+
}
|
|
3681
|
+
result.push('ellipsis');
|
|
3682
|
+
result.push(total);
|
|
3683
|
+
}
|
|
3663
3684
|
}
|
|
3664
|
-
|
|
3665
|
-
|
|
3685
|
+
else {
|
|
3686
|
+
// Medium size logic (existing logic)
|
|
3687
|
+
if (total <= 5 + neighbors) {
|
|
3688
|
+
for (let i = 1; i <= total; i++) {
|
|
3689
|
+
result.push(i);
|
|
3690
|
+
}
|
|
3691
|
+
return result;
|
|
3692
|
+
}
|
|
3693
|
+
if (current <= 8) {
|
|
3694
|
+
// Show first 8 pages + ellipsis + last page
|
|
3695
|
+
for (let i = 1; i <= 8; i++) {
|
|
3696
|
+
result.push(i);
|
|
3697
|
+
}
|
|
3698
|
+
result.push('ellipsis');
|
|
3699
|
+
result.push(total);
|
|
3700
|
+
}
|
|
3701
|
+
else if (current >= total - 7) {
|
|
3702
|
+
// Show first page + ellipsis + last 8 pages
|
|
3703
|
+
result.push(1);
|
|
3704
|
+
result.push('ellipsis');
|
|
3705
|
+
for (let i = total - 7; i <= total; i++) {
|
|
3706
|
+
result.push(i);
|
|
3707
|
+
}
|
|
3708
|
+
}
|
|
3709
|
+
else {
|
|
3710
|
+
// Show first page + ellipsis + current ± neighbors + ellipsis + last page
|
|
3711
|
+
result.push(1);
|
|
3712
|
+
result.push('ellipsis');
|
|
3713
|
+
for (let i = current - neighbors; i <= current + neighbors; i++) {
|
|
3714
|
+
result.push(i);
|
|
3715
|
+
}
|
|
3716
|
+
result.push('ellipsis');
|
|
3717
|
+
result.push(total);
|
|
3718
|
+
}
|
|
3666
3719
|
}
|
|
3667
|
-
|
|
3668
|
-
}
|
|
3720
|
+
return result;
|
|
3721
|
+
});
|
|
3669
3722
|
select(page) {
|
|
3670
|
-
if (page === 'ellipsis' || page === this.currentPage) {
|
|
3723
|
+
if (page === 'ellipsis' || page === this.currentPage()) {
|
|
3671
3724
|
return;
|
|
3672
3725
|
}
|
|
3673
3726
|
const newPage = page;
|
|
3674
|
-
this.currentPage
|
|
3675
|
-
this.pageChange.emit(newPage);
|
|
3676
|
-
this.buildPages();
|
|
3727
|
+
this.currentPage.set(newPage);
|
|
3677
3728
|
}
|
|
3678
3729
|
prev() {
|
|
3679
|
-
|
|
3680
|
-
|
|
3730
|
+
const current = this.currentPage();
|
|
3731
|
+
if (current > 1) {
|
|
3732
|
+
this.currentPage.set(current - 1);
|
|
3733
|
+
this.prevClick.emit();
|
|
3681
3734
|
}
|
|
3682
3735
|
}
|
|
3683
3736
|
next() {
|
|
3684
|
-
|
|
3685
|
-
|
|
3737
|
+
const current = this.currentPage();
|
|
3738
|
+
const total = this.totalPages();
|
|
3739
|
+
if (current < total) {
|
|
3740
|
+
this.currentPage.set(current + 1);
|
|
3741
|
+
this.nextClick.emit();
|
|
3686
3742
|
}
|
|
3687
3743
|
}
|
|
3688
3744
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3689
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
3745
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: PaginationComponent, isStandalone: true, selector: "lib-pagination", inputs: { totalPages: { classPropertyName: "totalPages", publicName: "totalPages", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentPage: "currentPageChange", prevClick: "prevClick", nextClick: "nextClick" }, ngImport: i0, template: "<nav\n class=\"c-pagination\"\n [class.c-pagination--sm]=\"size() === 'sm'\"\n [class.c-pagination--md]=\"size() === 'md'\"\n role=\"navigation\"\n aria-label=\"Paginaci\u00F3n\"\n>\n <ul class=\"c-pagination__list\" role=\"list\">\n <!-- Prev page -->\n <li\n class=\"c-pagination__item\"\n [class.c-pagination__item--disabled]=\"currentPage() === 1\"\n >\n <button\n class=\"c-pagination__link c-pagination__prev\"\n (click)=\"prev()\"\n [disabled]=\"currentPage() === 1\"\n [attr.tabindex]=\"currentPage() === 1 ? -1 : 0\"\n aria-label=\"P\u00E1gina anterior\"\n >\n <lib-icon name=\"caretleft-regular\" size=\"lg\" color=\"action-neutral-content-default\" iconBefore />\n </button>\n </li>\n\n <!-- Page numbers -->\n <li\n *ngFor=\"let p of pages()\"\n class=\"c-pagination__item\"\n [class.c-pagination__item--active]=\"p === currentPage()\"\n >\n <button\n *ngIf=\"p !== 'ellipsis'; else dotTpl\"\n class=\"c-pagination__link\"\n (click)=\"select(p)\"\n [attr.tabindex]=\"p === currentPage() ? -1 : 0\"\n [attr.aria-current]=\"p === currentPage() ? 'page' : null\"\n >\n {{ p }}\n </button>\n\n <!-- Ellipsis -->\n <ng-template #dotTpl>\n <lib-icon name=\"dotsthree-regular\" size=\"lg\" color=\"action-neutral-content-default\" iconBefore />\n </ng-template>\n </li>\n\n <!-- Next page -->\n <li\n class=\"c-pagination__item\"\n [class.c-pagination__item--disabled]=\"currentPage() === totalPages()\"\n >\n <button\n class=\"c-pagination__link c-pagination__next\"\n (click)=\"next()\"\n [disabled]=\"currentPage() === totalPages()\"\n [attr.tabindex]=\"currentPage() === totalPages() ? -1 : 0\"\n aria-label=\"P\u00E1gina siguiente\"\n >\n <lib-icon name=\"caretright-regular\" size=\"lg\" color=\"action-neutral-content-default\" iconBefore />\n </button>\n </li>\n </ul>\n</nav>\n", styles: [".c-pagination__list{display:flex;list-style:none;padding:0;margin:0;display:inline-flex;justify-content:center;align-items:center}.c-pagination__item{display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer;width:2.5rem;height:2.5rem}.c-pagination__item:hover{background:var(--color-button-neutral-background-hover)}.c-pagination__item:active{background:var(--color-button-neutral-background-pressed)}.c-pagination__item--disabled{background:var(--color-button-neutral-background-disabled);cursor:not-allowed}.c-pagination__item--disabled:hover{background:var(--color-button-neutral-background-disabled)}.c-pagination__item--active .c-pagination__link{position:relative;color:var(--color-button-neutral-content-default, #070707);text-align:center;font-family:var(--typography-label-sm-strong-family, Satoshi);font-size:var(--typography-label-sm-strong-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-strong-weight, 700);line-height:var(--typography-label-sm-strong-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-strong-letter-spacing, 0rem);cursor:default}.c-pagination__item--active .c-pagination__link:before{content:\"\";position:absolute;width:1.125rem;height:.125rem;background:var(--color-action-primary-selected-background-default, #217870);bottom:0;left:0;right:0;margin:0 auto}.c-pagination__item--active:hover{background:none;cursor:default}.c-pagination__link{background:none;border:none;cursor:pointer;color:var(--color-button-neutral-content-default, #070707);text-align:center;font-family:var(--typography-label-sm-default-family, Satoshi);font-size:var(--typography-label-sm-default-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-default-weight, 400);line-height:var(--typography-label-sm-default-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-default-letter-spacing, 0rem);width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center}.c-pagination__link:hover:not(:disabled){color:var(--color-button-neutral-content-hover)}.c-pagination__link:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-pagination__link:disabled{cursor:not-allowed}.c-pagination__link:disabled ::ng-deep lib-icon svg path{fill:var(--color-button-neutral-content-disabled)}.c-pagination__ellipsis{display:inline-block;padding:0 .5rem}.c-pagination__prev,.c-pagination__next{font-weight:700}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "name", "color"] }] });
|
|
3690
3746
|
}
|
|
3691
3747
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: PaginationComponent, decorators: [{
|
|
3692
3748
|
type: Component,
|
|
3693
|
-
args: [{ selector: 'lib-pagination',
|
|
3694
|
-
}]
|
|
3695
|
-
type: Input
|
|
3696
|
-
}], currentPage: [{
|
|
3697
|
-
type: Input
|
|
3698
|
-
}], size: [{
|
|
3699
|
-
type: Input
|
|
3700
|
-
}], pageChange: [{
|
|
3701
|
-
type: Output
|
|
3702
|
-
}] } });
|
|
3749
|
+
args: [{ selector: 'lib-pagination', imports: [CommonModule, IconComponent], template: "<nav\n class=\"c-pagination\"\n [class.c-pagination--sm]=\"size() === 'sm'\"\n [class.c-pagination--md]=\"size() === 'md'\"\n role=\"navigation\"\n aria-label=\"Paginaci\u00F3n\"\n>\n <ul class=\"c-pagination__list\" role=\"list\">\n <!-- Prev page -->\n <li\n class=\"c-pagination__item\"\n [class.c-pagination__item--disabled]=\"currentPage() === 1\"\n >\n <button\n class=\"c-pagination__link c-pagination__prev\"\n (click)=\"prev()\"\n [disabled]=\"currentPage() === 1\"\n [attr.tabindex]=\"currentPage() === 1 ? -1 : 0\"\n aria-label=\"P\u00E1gina anterior\"\n >\n <lib-icon name=\"caretleft-regular\" size=\"lg\" color=\"action-neutral-content-default\" iconBefore />\n </button>\n </li>\n\n <!-- Page numbers -->\n <li\n *ngFor=\"let p of pages()\"\n class=\"c-pagination__item\"\n [class.c-pagination__item--active]=\"p === currentPage()\"\n >\n <button\n *ngIf=\"p !== 'ellipsis'; else dotTpl\"\n class=\"c-pagination__link\"\n (click)=\"select(p)\"\n [attr.tabindex]=\"p === currentPage() ? -1 : 0\"\n [attr.aria-current]=\"p === currentPage() ? 'page' : null\"\n >\n {{ p }}\n </button>\n\n <!-- Ellipsis -->\n <ng-template #dotTpl>\n <lib-icon name=\"dotsthree-regular\" size=\"lg\" color=\"action-neutral-content-default\" iconBefore />\n </ng-template>\n </li>\n\n <!-- Next page -->\n <li\n class=\"c-pagination__item\"\n [class.c-pagination__item--disabled]=\"currentPage() === totalPages()\"\n >\n <button\n class=\"c-pagination__link c-pagination__next\"\n (click)=\"next()\"\n [disabled]=\"currentPage() === totalPages()\"\n [attr.tabindex]=\"currentPage() === totalPages() ? -1 : 0\"\n aria-label=\"P\u00E1gina siguiente\"\n >\n <lib-icon name=\"caretright-regular\" size=\"lg\" color=\"action-neutral-content-default\" iconBefore />\n </button>\n </li>\n </ul>\n</nav>\n", styles: [".c-pagination__list{display:flex;list-style:none;padding:0;margin:0;display:inline-flex;justify-content:center;align-items:center}.c-pagination__item{display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer;width:2.5rem;height:2.5rem}.c-pagination__item:hover{background:var(--color-button-neutral-background-hover)}.c-pagination__item:active{background:var(--color-button-neutral-background-pressed)}.c-pagination__item--disabled{background:var(--color-button-neutral-background-disabled);cursor:not-allowed}.c-pagination__item--disabled:hover{background:var(--color-button-neutral-background-disabled)}.c-pagination__item--active .c-pagination__link{position:relative;color:var(--color-button-neutral-content-default, #070707);text-align:center;font-family:var(--typography-label-sm-strong-family, Satoshi);font-size:var(--typography-label-sm-strong-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-strong-weight, 700);line-height:var(--typography-label-sm-strong-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-strong-letter-spacing, 0rem);cursor:default}.c-pagination__item--active .c-pagination__link:before{content:\"\";position:absolute;width:1.125rem;height:.125rem;background:var(--color-action-primary-selected-background-default, #217870);bottom:0;left:0;right:0;margin:0 auto}.c-pagination__item--active:hover{background:none;cursor:default}.c-pagination__link{background:none;border:none;cursor:pointer;color:var(--color-button-neutral-content-default, #070707);text-align:center;font-family:var(--typography-label-sm-default-family, Satoshi);font-size:var(--typography-label-sm-default-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-default-weight, 400);line-height:var(--typography-label-sm-default-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-default-letter-spacing, 0rem);width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center}.c-pagination__link:hover:not(:disabled){color:var(--color-button-neutral-content-hover)}.c-pagination__link:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-pagination__link:disabled{cursor:not-allowed}.c-pagination__link:disabled ::ng-deep lib-icon svg path{fill:var(--color-button-neutral-content-disabled)}.c-pagination__ellipsis{display:inline-block;padding:0 .5rem}.c-pagination__prev,.c-pagination__next{font-weight:700}\n"] }]
|
|
3750
|
+
}] });
|
|
3703
3751
|
|
|
3704
3752
|
class PasswordInputComponent {
|
|
3705
3753
|
label = '';
|