@lesterarte/sefin-ui 0.0.20 → 0.0.21
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,7 +1,8 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Input, ChangeDetectionStrategy, Component, EventEmitter, Output, forwardRef, ViewChild, HostListener } from '@angular/core';
|
|
2
|
+
import { Input, ChangeDetectionStrategy, Component, EventEmitter, Output, forwardRef, ViewChild, HostListener, signal, computed } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
|
+
import * as i1$1 from '@angular/platform-browser';
|
|
5
6
|
import { DomSanitizer } from '@angular/platform-browser';
|
|
6
7
|
import * as LucideIcons from 'lucide';
|
|
7
8
|
import * as i2 from '@angular/forms';
|
|
@@ -2976,6 +2977,174 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
2976
2977
|
type: Input
|
|
2977
2978
|
}] } });
|
|
2978
2979
|
|
|
2980
|
+
class TabComponent {
|
|
2981
|
+
/** Tab variant style. Options: 'default' | 'primary' | 'secondary' | 'underline' */
|
|
2982
|
+
variant = 'default';
|
|
2983
|
+
/** Tab size. Options: 'sm' | 'md' | 'lg' */
|
|
2984
|
+
size = 'md';
|
|
2985
|
+
/** Whether the tab is disabled */
|
|
2986
|
+
disabled = false;
|
|
2987
|
+
/** Whether the tab is active */
|
|
2988
|
+
active = false;
|
|
2989
|
+
/** Additional CSS classes */
|
|
2990
|
+
class = '';
|
|
2991
|
+
clicked = new EventEmitter();
|
|
2992
|
+
onClick(event) {
|
|
2993
|
+
if (!this.disabled) {
|
|
2994
|
+
this.clicked.emit(event);
|
|
2995
|
+
}
|
|
2996
|
+
}
|
|
2997
|
+
get tabClasses() {
|
|
2998
|
+
return [
|
|
2999
|
+
'sefin-tab',
|
|
3000
|
+
`sefin-tab--${this.variant}`,
|
|
3001
|
+
`sefin-tab--${this.size}`,
|
|
3002
|
+
this.disabled ? 'sefin-tab--disabled' : '',
|
|
3003
|
+
this.active ? 'sefin-tab--active' : '',
|
|
3004
|
+
this.class,
|
|
3005
|
+
]
|
|
3006
|
+
.filter(Boolean)
|
|
3007
|
+
.join(' ');
|
|
3008
|
+
}
|
|
3009
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3010
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: TabComponent, isStandalone: true, selector: "sefin-tab", inputs: { variant: "variant", size: "size", disabled: "disabled", active: "active", class: "class" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n type=\"button\"\n [class]=\"tabClasses\"\n (click)=\"onClick($event)\"\n [disabled]=\"disabled\"\n [attr.aria-selected]=\"active\"\n role=\"tab\"\n [attr.tabindex]=\"disabled ? '-1' : '0'\"\n>\n <span class=\"sefin-tab__content\">\n <ng-content></ng-content>\n </span>\n <span *ngIf=\"active && variant === 'underline'\" class=\"sefin-tab__indicator\"></span>\n</button>\n\n", styles: [".sefin-tab{display:inline-flex;align-items:center;justify-content:center;position:relative;gap:var(--sefin-spacing-xs, 4px);font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-medium);line-height:var(--sefin-line-height-normal);border:none;background:transparent;cursor:pointer;outline:none;white-space:nowrap;-webkit-user-select:none;user-select:none;transition:all .2s ease-in-out;text-align:center}.sefin-tab:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px;border-radius:var(--sefin-radius-sm)}.sefin-tab--sm{padding:var(--sefin-spacing-sm, 8px) var(--sefin-spacing-md, 16px);font-size:var(--sefin-font-size-sm, 14px);min-height:32px}.sefin-tab--md{padding:var(--sefin-spacing-md, 16px) var(--sefin-spacing-lg, 24px);font-size:var(--sefin-font-size-base, 16px);min-height:40px}.sefin-tab--lg{padding:var(--sefin-spacing-lg, 24px) var(--sefin-spacing-xl, 32px);font-size:var(--sefin-font-size-lg, 18px);min-height:48px}.sefin-tab--default{color:var(--sefin-color-text-secondary);border-bottom:2px solid transparent}.sefin-tab--default:hover:not(:disabled){color:var(--sefin-color-text);background-color:var(--sefin-color-surface-hover);border-radius:var(--sefin-radius-md) var(--sefin-radius-md) 0 0}.sefin-tab--default.sefin-tab--active{color:var(--sefin-color-primary);border-bottom-color:var(--sefin-color-primary);font-weight:var(--sefin-font-weight-semibold)}.sefin-tab--primary{color:var(--sefin-color-text-secondary);background-color:transparent;border-radius:var(--sefin-radius-md) var(--sefin-radius-md) 0 0}.sefin-tab--primary:hover:not(:disabled){color:var(--sefin-color-primary);background-color:var(--sefin-color-surface-hover)}.sefin-tab--primary.sefin-tab--active{color:var(--sefin-color-primary);background-color:var(--sefin-color-surface);font-weight:var(--sefin-font-weight-semibold);border-bottom:2px solid var(--sefin-color-primary)}.sefin-tab--secondary{color:var(--sefin-color-text-secondary);background-color:var(--sefin-color-surface-hover);border-radius:var(--sefin-radius-md)}.sefin-tab--secondary:hover:not(:disabled){color:var(--sefin-color-text);background-color:var(--sefin-color-border)}.sefin-tab--secondary.sefin-tab--active{color:#fff;background-color:var(--sefin-color-secondary);font-weight:var(--sefin-font-weight-semibold)}.sefin-tab--underline{color:var(--sefin-color-text-secondary);border-bottom:2px solid transparent}.sefin-tab--underline:hover:not(:disabled){color:var(--sefin-color-text)}.sefin-tab--underline.sefin-tab--active{color:var(--sefin-color-primary);font-weight:var(--sefin-font-weight-semibold)}.sefin-tab--disabled{opacity:.6;cursor:not-allowed;pointer-events:none}.sefin-tab__content{display:inline-flex;align-items:center;gap:var(--sefin-spacing-xs, 4px);position:relative;z-index:1}.sefin-tab__indicator{position:absolute;bottom:0;left:0;right:0;height:2px;background-color:var(--sefin-color-primary);border-radius:var(--sefin-radius-sm) var(--sefin-radius-sm) 0 0}.sefin-tab ::ng-deep svg,.sefin-tab ::ng-deep sefin-icon{flex-shrink:0}.sefin-tab--sm ::ng-deep svg{width:14px;height:14px}.sefin-tab--md ::ng-deep svg{width:16px;height:16px}.sefin-tab--lg ::ng-deep svg{width:18px;height:18px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3011
|
+
}
|
|
3012
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TabComponent, decorators: [{
|
|
3013
|
+
type: Component,
|
|
3014
|
+
args: [{ selector: 'sefin-tab', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n type=\"button\"\n [class]=\"tabClasses\"\n (click)=\"onClick($event)\"\n [disabled]=\"disabled\"\n [attr.aria-selected]=\"active\"\n role=\"tab\"\n [attr.tabindex]=\"disabled ? '-1' : '0'\"\n>\n <span class=\"sefin-tab__content\">\n <ng-content></ng-content>\n </span>\n <span *ngIf=\"active && variant === 'underline'\" class=\"sefin-tab__indicator\"></span>\n</button>\n\n", styles: [".sefin-tab{display:inline-flex;align-items:center;justify-content:center;position:relative;gap:var(--sefin-spacing-xs, 4px);font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-medium);line-height:var(--sefin-line-height-normal);border:none;background:transparent;cursor:pointer;outline:none;white-space:nowrap;-webkit-user-select:none;user-select:none;transition:all .2s ease-in-out;text-align:center}.sefin-tab:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px;border-radius:var(--sefin-radius-sm)}.sefin-tab--sm{padding:var(--sefin-spacing-sm, 8px) var(--sefin-spacing-md, 16px);font-size:var(--sefin-font-size-sm, 14px);min-height:32px}.sefin-tab--md{padding:var(--sefin-spacing-md, 16px) var(--sefin-spacing-lg, 24px);font-size:var(--sefin-font-size-base, 16px);min-height:40px}.sefin-tab--lg{padding:var(--sefin-spacing-lg, 24px) var(--sefin-spacing-xl, 32px);font-size:var(--sefin-font-size-lg, 18px);min-height:48px}.sefin-tab--default{color:var(--sefin-color-text-secondary);border-bottom:2px solid transparent}.sefin-tab--default:hover:not(:disabled){color:var(--sefin-color-text);background-color:var(--sefin-color-surface-hover);border-radius:var(--sefin-radius-md) var(--sefin-radius-md) 0 0}.sefin-tab--default.sefin-tab--active{color:var(--sefin-color-primary);border-bottom-color:var(--sefin-color-primary);font-weight:var(--sefin-font-weight-semibold)}.sefin-tab--primary{color:var(--sefin-color-text-secondary);background-color:transparent;border-radius:var(--sefin-radius-md) var(--sefin-radius-md) 0 0}.sefin-tab--primary:hover:not(:disabled){color:var(--sefin-color-primary);background-color:var(--sefin-color-surface-hover)}.sefin-tab--primary.sefin-tab--active{color:var(--sefin-color-primary);background-color:var(--sefin-color-surface);font-weight:var(--sefin-font-weight-semibold);border-bottom:2px solid var(--sefin-color-primary)}.sefin-tab--secondary{color:var(--sefin-color-text-secondary);background-color:var(--sefin-color-surface-hover);border-radius:var(--sefin-radius-md)}.sefin-tab--secondary:hover:not(:disabled){color:var(--sefin-color-text);background-color:var(--sefin-color-border)}.sefin-tab--secondary.sefin-tab--active{color:#fff;background-color:var(--sefin-color-secondary);font-weight:var(--sefin-font-weight-semibold)}.sefin-tab--underline{color:var(--sefin-color-text-secondary);border-bottom:2px solid transparent}.sefin-tab--underline:hover:not(:disabled){color:var(--sefin-color-text)}.sefin-tab--underline.sefin-tab--active{color:var(--sefin-color-primary);font-weight:var(--sefin-font-weight-semibold)}.sefin-tab--disabled{opacity:.6;cursor:not-allowed;pointer-events:none}.sefin-tab__content{display:inline-flex;align-items:center;gap:var(--sefin-spacing-xs, 4px);position:relative;z-index:1}.sefin-tab__indicator{position:absolute;bottom:0;left:0;right:0;height:2px;background-color:var(--sefin-color-primary);border-radius:var(--sefin-radius-sm) var(--sefin-radius-sm) 0 0}.sefin-tab ::ng-deep svg,.sefin-tab ::ng-deep sefin-icon{flex-shrink:0}.sefin-tab--sm ::ng-deep svg{width:14px;height:14px}.sefin-tab--md ::ng-deep svg{width:16px;height:16px}.sefin-tab--lg ::ng-deep svg{width:18px;height:18px}\n"] }]
|
|
3015
|
+
}], propDecorators: { variant: [{
|
|
3016
|
+
type: Input
|
|
3017
|
+
}], size: [{
|
|
3018
|
+
type: Input
|
|
3019
|
+
}], disabled: [{
|
|
3020
|
+
type: Input
|
|
3021
|
+
}], active: [{
|
|
3022
|
+
type: Input
|
|
3023
|
+
}], class: [{
|
|
3024
|
+
type: Input
|
|
3025
|
+
}], clicked: [{
|
|
3026
|
+
type: Output
|
|
3027
|
+
}] } });
|
|
3028
|
+
|
|
3029
|
+
class RateComponent {
|
|
3030
|
+
/** Current rating value (0 to max) */
|
|
3031
|
+
set value(value) {
|
|
3032
|
+
this._value.set(Math.max(0, Math.min(value, this.max)));
|
|
3033
|
+
}
|
|
3034
|
+
get value() {
|
|
3035
|
+
return this._value();
|
|
3036
|
+
}
|
|
3037
|
+
_value = signal(0, ...(ngDevMode ? [{ debugName: "_value" }] : []));
|
|
3038
|
+
/** Maximum rating value */
|
|
3039
|
+
max = 5;
|
|
3040
|
+
/** Whether the rating is disabled */
|
|
3041
|
+
disabled = false;
|
|
3042
|
+
/** Whether the rating is readonly */
|
|
3043
|
+
readonly = false;
|
|
3044
|
+
/** Whether to allow half stars */
|
|
3045
|
+
allowHalf = false;
|
|
3046
|
+
/** Icon type. Options: 'star' | 'heart' | 'thumb' */
|
|
3047
|
+
icon = 'star';
|
|
3048
|
+
/** Rate size. Options: 'sm' | 'md' | 'lg' */
|
|
3049
|
+
size = 'md';
|
|
3050
|
+
/** Whether to show text with rating */
|
|
3051
|
+
showText = false;
|
|
3052
|
+
/** Additional CSS classes */
|
|
3053
|
+
class = '';
|
|
3054
|
+
/** Event emitted when rating changes */
|
|
3055
|
+
valueChange = new EventEmitter();
|
|
3056
|
+
/** Event emitted when rating is hovered */
|
|
3057
|
+
hoverChange = new EventEmitter();
|
|
3058
|
+
/** Internal hover value */
|
|
3059
|
+
_hoverValue = signal(null, ...(ngDevMode ? [{ debugName: "_hoverValue" }] : []));
|
|
3060
|
+
items = computed(() => {
|
|
3061
|
+
return Array.from({ length: this.max }, (_, i) => i + 1);
|
|
3062
|
+
}, ...(ngDevMode ? [{ debugName: "items" }] : []));
|
|
3063
|
+
get rateClasses() {
|
|
3064
|
+
return [
|
|
3065
|
+
'sefin-rate',
|
|
3066
|
+
`sefin-rate--${this.size}`,
|
|
3067
|
+
`sefin-rate--${this.icon}`,
|
|
3068
|
+
this.disabled ? 'sefin-rate--disabled' : '',
|
|
3069
|
+
this.readonly ? 'sefin-rate--readonly' : '',
|
|
3070
|
+
this.class,
|
|
3071
|
+
]
|
|
3072
|
+
.filter(Boolean)
|
|
3073
|
+
.join(' ');
|
|
3074
|
+
}
|
|
3075
|
+
isInteractive() {
|
|
3076
|
+
return !this.disabled && !this.readonly;
|
|
3077
|
+
}
|
|
3078
|
+
getDisplayValue() {
|
|
3079
|
+
return this._hoverValue() ?? this.value;
|
|
3080
|
+
}
|
|
3081
|
+
getIconState(index) {
|
|
3082
|
+
const displayValue = this.getDisplayValue();
|
|
3083
|
+
if (displayValue >= index) {
|
|
3084
|
+
return 'full';
|
|
3085
|
+
}
|
|
3086
|
+
if (this.allowHalf && displayValue >= index - 0.5) {
|
|
3087
|
+
return 'half';
|
|
3088
|
+
}
|
|
3089
|
+
return 'empty';
|
|
3090
|
+
}
|
|
3091
|
+
onItemClick(index) {
|
|
3092
|
+
if (!this.isInteractive()) {
|
|
3093
|
+
return;
|
|
3094
|
+
}
|
|
3095
|
+
const newValue = index;
|
|
3096
|
+
if (newValue !== this.value) {
|
|
3097
|
+
this._value.set(newValue);
|
|
3098
|
+
this.valueChange.emit(newValue);
|
|
3099
|
+
}
|
|
3100
|
+
}
|
|
3101
|
+
onItemHover(index) {
|
|
3102
|
+
if (!this.isInteractive()) {
|
|
3103
|
+
return;
|
|
3104
|
+
}
|
|
3105
|
+
this._hoverValue.set(index);
|
|
3106
|
+
this.hoverChange.emit(index);
|
|
3107
|
+
}
|
|
3108
|
+
onHalfClick(index, isLeftHalf) {
|
|
3109
|
+
if (!this.isInteractive() || !this.allowHalf) {
|
|
3110
|
+
return;
|
|
3111
|
+
}
|
|
3112
|
+
const newValue = isLeftHalf ? index - 0.5 : index;
|
|
3113
|
+
if (newValue !== this.value) {
|
|
3114
|
+
this._value.set(newValue);
|
|
3115
|
+
this.valueChange.emit(newValue);
|
|
3116
|
+
}
|
|
3117
|
+
}
|
|
3118
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: RateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3119
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: RateComponent, isStandalone: true, selector: "sefin-rate", inputs: { value: "value", max: "max", disabled: "disabled", readonly: "readonly", allowHalf: "allowHalf", icon: "icon", size: "size", showText: "showText", class: "class" }, outputs: { valueChange: "valueChange", hoverChange: "hoverChange" }, ngImport: i0, template: "<div [class]=\"rateClasses\">\n <div class=\"sefin-rate__container\">\n <div\n *ngFor=\"let item of items(); let i = index\"\n class=\"sefin-rate__item\"\n (mouseenter)=\"onItemHover(item)\"\n (mouseleave)=\"onItemHover(null)\"\n [class.sefin-rate__item--interactive]=\"isInteractive()\"\n >\n <ng-container [ngSwitch]=\"icon\">\n <!-- Star icon -->\n <div *ngSwitchCase=\"'star'\" class=\"sefin-rate__icon-wrapper\">\n <ng-container *ngIf=\"allowHalf && isInteractive(); else fullStar\">\n <div class=\"sefin-rate__icon-half\" (click)=\"onHalfClick(item, true)\">\n <svg\n [class.sefin-rate__icon--full]=\"getIconState(item) === 'full'\"\n [class.sefin-rate__icon--half]=\"getIconState(item) === 'half'\"\n [class.sefin-rate__icon--empty]=\"getIconState(item) === 'empty'\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n <div class=\"sefin-rate__icon-half sefin-rate__icon-half--right\" (click)=\"onHalfClick(item, false)\">\n <svg\n [class.sefin-rate__icon--full]=\"getIconState(item) === 'full'\"\n [class.sefin-rate__icon--half]=\"getIconState(item) === 'half'\"\n [class.sefin-rate__icon--empty]=\"getIconState(item) === 'empty'\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n </ng-container>\n <ng-template #fullStar>\n <svg\n class=\"sefin-rate__icon\"\n [class.sefin-rate__icon--full]=\"getIconState(item) === 'full'\"\n [class.sefin-rate__icon--half]=\"getIconState(item) === 'half'\"\n [class.sefin-rate__icon--empty]=\"getIconState(item) === 'empty'\"\n (click)=\"onItemClick(item)\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </ng-template>\n </div>\n\n <!-- Heart icon -->\n <svg\n *ngSwitchCase=\"'heart'\"\n class=\"sefin-rate__icon\"\n [class.sefin-rate__icon--full]=\"getIconState(item) === 'full'\"\n [class.sefin-rate__icon--empty]=\"getIconState(item) === 'empty'\"\n (click)=\"onItemClick(item)\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M20.84 4.61C20.3292 4.099 19.7228 3.69364 19.0554 3.41708C18.3879 3.14052 17.6725 2.99817 16.95 2.99817C16.2275 2.99817 15.5121 3.14052 14.8446 3.41708C14.1772 3.69364 13.5708 4.099 13.06 4.61L12 5.67L10.94 4.61C9.9083 3.57831 8.50903 2.99871 7.05 2.99871C5.59096 2.99871 4.19169 3.57831 3.16 4.61C2.1283 5.64169 1.54871 7.04097 1.54871 8.5C1.54871 9.95903 2.1283 11.3583 3.16 12.39L4.22 13.45L12 21.23L19.78 13.45L20.84 12.39C21.351 11.8792 21.7564 11.2728 22.0329 10.6054C22.3095 9.93789 22.4518 9.22248 22.4518 8.5C22.4518 7.77752 22.3095 7.0621 22.0329 6.39464C21.7564 5.72718 21.351 5.12075 20.84 4.61Z\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n\n <!-- Thumb icon -->\n <svg\n *ngSwitchCase=\"'thumb'\"\n class=\"sefin-rate__icon\"\n [class.sefin-rate__icon--full]=\"getIconState(item) === 'full'\"\n [class.sefin-rate__icon--empty]=\"getIconState(item) === 'empty'\"\n (click)=\"onItemClick(item)\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M7 22V11M2 13V20C2 21.1046 2.89543 22 4 22H16.4262C17.907 22 19.1662 20.9197 19.3914 19.4562L20.4683 12.4562C20.7479 10.6388 19.3411 9 17.5032 9H14C13.4477 9 13 8.55228 13 8V4.46584C13 3.10399 11.896 2 10.5342 2C10.2093 2 9.91498 2.1913 9.78306 2.48812L7.26394 8.57899C7.09882 8.95673 6.74568 9.2 6.35471 9.2H4C2.89543 9.2 2 10.0954 2 11.2V13Z\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </ng-container>\n </div>\n </div>\n \n <span *ngIf=\"showText\" class=\"sefin-rate__text\">\n {{ value }} / {{ max }}\n </span>\n</div>\n\n", styles: [".sefin-rate{display:inline-flex;align-items:center;gap:var(--sefin-spacing-sm, 8px);font-family:var(--sefin-font-family-base)}.sefin-rate__container{display:inline-flex;align-items:center;gap:var(--sefin-spacing-xs, 4px)}.sefin-rate__item{display:inline-flex;align-items:center;justify-content:center;position:relative;line-height:0}.sefin-rate__item--interactive{cursor:pointer}.sefin-rate__icon-wrapper{display:flex;position:relative;width:100%;height:100%}.sefin-rate__icon-half{position:absolute;width:50%;height:100%;overflow:hidden;display:flex;align-items:center;justify-content:flex-start;cursor:pointer}.sefin-rate__icon-half--right{right:0;justify-content:flex-end}.sefin-rate__icon-half svg{width:200%;height:100%}.sefin-rate__icon-half--right svg{transform:translate(-50%)}.sefin-rate__icon{display:block;transition:all .2s ease-in-out;stroke:var(--sefin-color-border);fill:none}.sefin-rate__icon--full{stroke:var(--sefin-color-primary);fill:var(--sefin-color-primary)}.sefin-rate__icon--half{stroke:var(--sefin-color-primary)}.sefin-rate__icon--empty{stroke:var(--sefin-color-border);fill:none}.sefin-rate__item--interactive .sefin-rate__icon{cursor:pointer}.sefin-rate__item--interactive .sefin-rate__icon:hover{stroke:var(--sefin-color-primary);transform:scale(1.1)}.sefin-rate__text{font-size:var(--sefin-font-size-base);color:var(--sefin-color-text-secondary);font-weight:var(--sefin-font-weight-medium);line-height:var(--sefin-line-height-normal)}.sefin-rate--sm .sefin-rate__icon,.sefin-rate--sm .sefin-rate__icon-wrapper{width:16px;height:16px}.sefin-rate--sm .sefin-rate__text{font-size:var(--sefin-font-size-sm, 14px)}.sefin-rate--md .sefin-rate__icon,.sefin-rate--md .sefin-rate__icon-wrapper{width:20px;height:20px}.sefin-rate--md .sefin-rate__text{font-size:var(--sefin-font-size-base, 16px)}.sefin-rate--lg .sefin-rate__icon,.sefin-rate--lg .sefin-rate__icon-wrapper{width:24px;height:24px}.sefin-rate--lg .sefin-rate__text{font-size:var(--sefin-font-size-lg, 18px)}.sefin-rate--star .sefin-rate__icon--full{color:var(--sefin-color-warning);stroke:var(--sefin-color-warning);fill:var(--sefin-color-warning)}.sefin-rate--star .sefin-rate__icon--half,.sefin-rate--star .sefin-rate__item--interactive .sefin-rate__icon:hover{color:var(--sefin-color-warning);stroke:var(--sefin-color-warning)}.sefin-rate--heart .sefin-rate__icon--full{color:var(--sefin-color-error);stroke:var(--sefin-color-error);fill:var(--sefin-color-error)}.sefin-rate--heart .sefin-rate__icon--half,.sefin-rate--heart .sefin-rate__item--interactive .sefin-rate__icon:hover{color:var(--sefin-color-error);stroke:var(--sefin-color-error)}.sefin-rate--thumb .sefin-rate__icon--full{color:var(--sefin-color-success);stroke:var(--sefin-color-success);fill:var(--sefin-color-success)}.sefin-rate--thumb .sefin-rate__icon--half,.sefin-rate--thumb .sefin-rate__item--interactive .sefin-rate__icon:hover{color:var(--sefin-color-success);stroke:var(--sefin-color-success)}.sefin-rate--disabled .sefin-rate__item,.sefin-rate--readonly .sefin-rate__item{cursor:default;pointer-events:none}.sefin-rate--disabled .sefin-rate__icon,.sefin-rate--readonly .sefin-rate__icon{opacity:.6}.sefin-rate .sefin-rate__icon-half .sefin-rate__icon--half{fill:var(--sefin-color-primary)}.sefin-rate--star .sefin-rate__icon-half .sefin-rate__icon--half{fill:var(--sefin-color-warning)}.sefin-rate--heart .sefin-rate__icon-half .sefin-rate__icon--half{fill:var(--sefin-color-error)}.sefin-rate--thumb .sefin-rate__icon-half .sefin-rate__icon--half{fill:var(--sefin-color-success)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3120
|
+
}
|
|
3121
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: RateComponent, decorators: [{
|
|
3122
|
+
type: Component,
|
|
3123
|
+
args: [{ selector: 'sefin-rate', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"rateClasses\">\n <div class=\"sefin-rate__container\">\n <div\n *ngFor=\"let item of items(); let i = index\"\n class=\"sefin-rate__item\"\n (mouseenter)=\"onItemHover(item)\"\n (mouseleave)=\"onItemHover(null)\"\n [class.sefin-rate__item--interactive]=\"isInteractive()\"\n >\n <ng-container [ngSwitch]=\"icon\">\n <!-- Star icon -->\n <div *ngSwitchCase=\"'star'\" class=\"sefin-rate__icon-wrapper\">\n <ng-container *ngIf=\"allowHalf && isInteractive(); else fullStar\">\n <div class=\"sefin-rate__icon-half\" (click)=\"onHalfClick(item, true)\">\n <svg\n [class.sefin-rate__icon--full]=\"getIconState(item) === 'full'\"\n [class.sefin-rate__icon--half]=\"getIconState(item) === 'half'\"\n [class.sefin-rate__icon--empty]=\"getIconState(item) === 'empty'\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n <div class=\"sefin-rate__icon-half sefin-rate__icon-half--right\" (click)=\"onHalfClick(item, false)\">\n <svg\n [class.sefin-rate__icon--full]=\"getIconState(item) === 'full'\"\n [class.sefin-rate__icon--half]=\"getIconState(item) === 'half'\"\n [class.sefin-rate__icon--empty]=\"getIconState(item) === 'empty'\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n </ng-container>\n <ng-template #fullStar>\n <svg\n class=\"sefin-rate__icon\"\n [class.sefin-rate__icon--full]=\"getIconState(item) === 'full'\"\n [class.sefin-rate__icon--half]=\"getIconState(item) === 'half'\"\n [class.sefin-rate__icon--empty]=\"getIconState(item) === 'empty'\"\n (click)=\"onItemClick(item)\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </ng-template>\n </div>\n\n <!-- Heart icon -->\n <svg\n *ngSwitchCase=\"'heart'\"\n class=\"sefin-rate__icon\"\n [class.sefin-rate__icon--full]=\"getIconState(item) === 'full'\"\n [class.sefin-rate__icon--empty]=\"getIconState(item) === 'empty'\"\n (click)=\"onItemClick(item)\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M20.84 4.61C20.3292 4.099 19.7228 3.69364 19.0554 3.41708C18.3879 3.14052 17.6725 2.99817 16.95 2.99817C16.2275 2.99817 15.5121 3.14052 14.8446 3.41708C14.1772 3.69364 13.5708 4.099 13.06 4.61L12 5.67L10.94 4.61C9.9083 3.57831 8.50903 2.99871 7.05 2.99871C5.59096 2.99871 4.19169 3.57831 3.16 4.61C2.1283 5.64169 1.54871 7.04097 1.54871 8.5C1.54871 9.95903 2.1283 11.3583 3.16 12.39L4.22 13.45L12 21.23L19.78 13.45L20.84 12.39C21.351 11.8792 21.7564 11.2728 22.0329 10.6054C22.3095 9.93789 22.4518 9.22248 22.4518 8.5C22.4518 7.77752 22.3095 7.0621 22.0329 6.39464C21.7564 5.72718 21.351 5.12075 20.84 4.61Z\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n\n <!-- Thumb icon -->\n <svg\n *ngSwitchCase=\"'thumb'\"\n class=\"sefin-rate__icon\"\n [class.sefin-rate__icon--full]=\"getIconState(item) === 'full'\"\n [class.sefin-rate__icon--empty]=\"getIconState(item) === 'empty'\"\n (click)=\"onItemClick(item)\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M7 22V11M2 13V20C2 21.1046 2.89543 22 4 22H16.4262C17.907 22 19.1662 20.9197 19.3914 19.4562L20.4683 12.4562C20.7479 10.6388 19.3411 9 17.5032 9H14C13.4477 9 13 8.55228 13 8V4.46584C13 3.10399 11.896 2 10.5342 2C10.2093 2 9.91498 2.1913 9.78306 2.48812L7.26394 8.57899C7.09882 8.95673 6.74568 9.2 6.35471 9.2H4C2.89543 9.2 2 10.0954 2 11.2V13Z\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </ng-container>\n </div>\n </div>\n \n <span *ngIf=\"showText\" class=\"sefin-rate__text\">\n {{ value }} / {{ max }}\n </span>\n</div>\n\n", styles: [".sefin-rate{display:inline-flex;align-items:center;gap:var(--sefin-spacing-sm, 8px);font-family:var(--sefin-font-family-base)}.sefin-rate__container{display:inline-flex;align-items:center;gap:var(--sefin-spacing-xs, 4px)}.sefin-rate__item{display:inline-flex;align-items:center;justify-content:center;position:relative;line-height:0}.sefin-rate__item--interactive{cursor:pointer}.sefin-rate__icon-wrapper{display:flex;position:relative;width:100%;height:100%}.sefin-rate__icon-half{position:absolute;width:50%;height:100%;overflow:hidden;display:flex;align-items:center;justify-content:flex-start;cursor:pointer}.sefin-rate__icon-half--right{right:0;justify-content:flex-end}.sefin-rate__icon-half svg{width:200%;height:100%}.sefin-rate__icon-half--right svg{transform:translate(-50%)}.sefin-rate__icon{display:block;transition:all .2s ease-in-out;stroke:var(--sefin-color-border);fill:none}.sefin-rate__icon--full{stroke:var(--sefin-color-primary);fill:var(--sefin-color-primary)}.sefin-rate__icon--half{stroke:var(--sefin-color-primary)}.sefin-rate__icon--empty{stroke:var(--sefin-color-border);fill:none}.sefin-rate__item--interactive .sefin-rate__icon{cursor:pointer}.sefin-rate__item--interactive .sefin-rate__icon:hover{stroke:var(--sefin-color-primary);transform:scale(1.1)}.sefin-rate__text{font-size:var(--sefin-font-size-base);color:var(--sefin-color-text-secondary);font-weight:var(--sefin-font-weight-medium);line-height:var(--sefin-line-height-normal)}.sefin-rate--sm .sefin-rate__icon,.sefin-rate--sm .sefin-rate__icon-wrapper{width:16px;height:16px}.sefin-rate--sm .sefin-rate__text{font-size:var(--sefin-font-size-sm, 14px)}.sefin-rate--md .sefin-rate__icon,.sefin-rate--md .sefin-rate__icon-wrapper{width:20px;height:20px}.sefin-rate--md .sefin-rate__text{font-size:var(--sefin-font-size-base, 16px)}.sefin-rate--lg .sefin-rate__icon,.sefin-rate--lg .sefin-rate__icon-wrapper{width:24px;height:24px}.sefin-rate--lg .sefin-rate__text{font-size:var(--sefin-font-size-lg, 18px)}.sefin-rate--star .sefin-rate__icon--full{color:var(--sefin-color-warning);stroke:var(--sefin-color-warning);fill:var(--sefin-color-warning)}.sefin-rate--star .sefin-rate__icon--half,.sefin-rate--star .sefin-rate__item--interactive .sefin-rate__icon:hover{color:var(--sefin-color-warning);stroke:var(--sefin-color-warning)}.sefin-rate--heart .sefin-rate__icon--full{color:var(--sefin-color-error);stroke:var(--sefin-color-error);fill:var(--sefin-color-error)}.sefin-rate--heart .sefin-rate__icon--half,.sefin-rate--heart .sefin-rate__item--interactive .sefin-rate__icon:hover{color:var(--sefin-color-error);stroke:var(--sefin-color-error)}.sefin-rate--thumb .sefin-rate__icon--full{color:var(--sefin-color-success);stroke:var(--sefin-color-success);fill:var(--sefin-color-success)}.sefin-rate--thumb .sefin-rate__icon--half,.sefin-rate--thumb .sefin-rate__item--interactive .sefin-rate__icon:hover{color:var(--sefin-color-success);stroke:var(--sefin-color-success)}.sefin-rate--disabled .sefin-rate__item,.sefin-rate--readonly .sefin-rate__item{cursor:default;pointer-events:none}.sefin-rate--disabled .sefin-rate__icon,.sefin-rate--readonly .sefin-rate__icon{opacity:.6}.sefin-rate .sefin-rate__icon-half .sefin-rate__icon--half{fill:var(--sefin-color-primary)}.sefin-rate--star .sefin-rate__icon-half .sefin-rate__icon--half{fill:var(--sefin-color-warning)}.sefin-rate--heart .sefin-rate__icon-half .sefin-rate__icon--half{fill:var(--sefin-color-error)}.sefin-rate--thumb .sefin-rate__icon-half .sefin-rate__icon--half{fill:var(--sefin-color-success)}\n"] }]
|
|
3124
|
+
}], propDecorators: { value: [{
|
|
3125
|
+
type: Input
|
|
3126
|
+
}], max: [{
|
|
3127
|
+
type: Input
|
|
3128
|
+
}], disabled: [{
|
|
3129
|
+
type: Input
|
|
3130
|
+
}], readonly: [{
|
|
3131
|
+
type: Input
|
|
3132
|
+
}], allowHalf: [{
|
|
3133
|
+
type: Input
|
|
3134
|
+
}], icon: [{
|
|
3135
|
+
type: Input
|
|
3136
|
+
}], size: [{
|
|
3137
|
+
type: Input
|
|
3138
|
+
}], showText: [{
|
|
3139
|
+
type: Input
|
|
3140
|
+
}], class: [{
|
|
3141
|
+
type: Input
|
|
3142
|
+
}], valueChange: [{
|
|
3143
|
+
type: Output
|
|
3144
|
+
}], hoverChange: [{
|
|
3145
|
+
type: Output
|
|
3146
|
+
}] } });
|
|
3147
|
+
|
|
2979
3148
|
/**
|
|
2980
3149
|
* Atoms index
|
|
2981
3150
|
*/
|
|
@@ -3017,11 +3186,11 @@ class AccordionItemComponent {
|
|
|
3017
3186
|
.join(' ');
|
|
3018
3187
|
}
|
|
3019
3188
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3020
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: AccordionItemComponent, isStandalone: true, selector: "sefin-accordion-item", inputs: { title: "title", expanded: "expanded", disabled: "disabled", class: "class" }, outputs: { toggle: "toggle" }, ngImport: i0, template: "<div [class]=\"accordionClasses\">\n <button\n type=\"button\"\n [class]=\"headerClasses\"\n [disabled]=\"disabled\"\n (click)=\"onHeaderClick()\"\n [attr.aria-expanded]=\"expanded\"\n [attr.aria-disabled]=\"disabled\"\n >\n <span class=\"sefin-accordion-item__title\">{{ title }}</span>\n <sefin-icon\n name=\"chevron-down\"\n size=\"sm\"\n [class]=\"'sefin-accordion-item__icon'\"\n [ngClass]=\"{'sefin-accordion-item__icon--expanded': expanded}\"\n ></sefin-icon>\n </button>\n <div\n class=\"sefin-accordion-item__content\"\n [class.sefin-accordion-item__content--expanded]=\"expanded\"\n [attr.aria-hidden]=\"!expanded\"\n >\n <div class=\"sefin-accordion-item__content-inner\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n\n", styles: [".sefin-accordion-item{display:flex;flex-direction:column;width:100%;font-family:var(--sefin-font-family-base);border:1px solid var(--sefin-color-border, #
|
|
3189
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: AccordionItemComponent, isStandalone: true, selector: "sefin-accordion-item", inputs: { title: "title", expanded: "expanded", disabled: "disabled", class: "class" }, outputs: { toggle: "toggle" }, ngImport: i0, template: "<div [class]=\"accordionClasses\">\n <button\n type=\"button\"\n [class]=\"headerClasses\"\n [disabled]=\"disabled\"\n (click)=\"onHeaderClick()\"\n [attr.aria-expanded]=\"expanded\"\n [attr.aria-disabled]=\"disabled\"\n >\n <span class=\"sefin-accordion-item__title\">{{ title }}</span>\n <sefin-icon\n name=\"chevron-down\"\n size=\"sm\"\n [class]=\"'sefin-accordion-item__icon'\"\n [ngClass]=\"{'sefin-accordion-item__icon--expanded': expanded}\"\n ></sefin-icon>\n </button>\n <div\n class=\"sefin-accordion-item__content\"\n [class.sefin-accordion-item__content--expanded]=\"expanded\"\n [attr.aria-hidden]=\"!expanded\"\n >\n <div class=\"sefin-accordion-item__content-inner\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n\n", styles: [".sefin-accordion-item{display:flex;flex-direction:column;width:100%;font-family:var(--sefin-font-family-base);background-color:var(--sefin-color-surface, #ffffff);border:1px solid var(--sefin-color-border, #cecece);border-radius:var(--sefin-radius-md, 8px);box-shadow:var(--sefin-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, .05));overflow:hidden;transition:box-shadow .2s cubic-bezier(.4,0,.2,1) 0ms,border-color .2s cubic-bezier(.4,0,.2,1) 0ms}.sefin-accordion-item:hover:not(.sefin-accordion-item--disabled){border-color:var(--sefin-color-primary, #55C3D8);box-shadow:var(--sefin-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06))}.sefin-accordion-item--expanded{border-color:var(--sefin-color-primary, #55C3D8);box-shadow:var(--sefin-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06))}.sefin-accordion-item--disabled{opacity:.6;cursor:not-allowed;box-shadow:none}.sefin-accordion-item__header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--sefin-spacing-lg, 24px);background-color:var(--sefin-color-surface, #ffffff);border:none;cursor:pointer;outline:none;font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-base, 16px);font-weight:var(--sefin-font-weight-medium, 500);text-align:left;position:relative;transition:background-color .2s cubic-bezier(.4,0,.2,1) 0ms}.sefin-accordion-item__header:before{content:\"\";position:absolute;left:0;top:0;bottom:0;width:3px;background-color:transparent;transition:background-color .2s cubic-bezier(.4,0,.2,1) 0ms}.sefin-accordion-item__header:hover:not(:disabled){background-color:var(--sefin-color-surface-hover, #f5f5f5)}.sefin-accordion-item__header:focus-visible{outline:2px solid var(--sefin-color-border-focus, #55C3D8);outline-offset:-2px}.sefin-accordion-item__header:active:not(:disabled){background-color:var(--sefin-color-surface-hover, #f5f5f5)}.sefin-accordion-item__header--expanded{background-color:var(--sefin-color-surface-hover, #f5f5f5)}.sefin-accordion-item__header--expanded:before{background-color:var(--sefin-color-primary, #55C3D8)}.sefin-accordion-item__header--expanded:hover:not(:disabled){background-color:var(--sefin-color-surface-hover, #f5f5f5)}.sefin-accordion-item__header--disabled{cursor:not-allowed;opacity:.6}.sefin-accordion-item__title{flex:1;font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-base, 16px);font-weight:var(--sefin-font-weight-medium, 500);color:var(--sefin-color-text, #383838);line-height:var(--sefin-line-height-normal, 1.5);transition:color .2s cubic-bezier(.4,0,.2,1) 0ms}.sefin-accordion-item__header--disabled .sefin-accordion-item__title{color:var(--sefin-color-text-disabled, #9b9b9b)}.sefin-accordion-item__icon{flex-shrink:0;margin-left:var(--sefin-spacing-md, 16px);color:var(--sefin-color-text-secondary, #686868);transition:transform .3s cubic-bezier(.4,0,.2,1) 0ms,color .2s cubic-bezier(.4,0,.2,1) 0ms}.sefin-accordion-item__icon--expanded{transform:rotate(180deg);color:var(--sefin-color-primary, #55C3D8)}.sefin-accordion-item__header:hover:not(:disabled) .sefin-accordion-item__icon{color:var(--sefin-color-primary, #55C3D8)}.sefin-accordion-item__header--expanded .sefin-accordion-item__icon{color:var(--sefin-color-primary, #55C3D8)}.sefin-accordion-item__content{max-height:0;overflow:hidden;background-color:var(--sefin-color-surface, #ffffff);padding:0 var(--sefin-spacing-lg, 24px);transition:max-height .4s cubic-bezier(.4,0,.2,1) 0ms,opacity .35s cubic-bezier(.4,0,.2,1) 0ms,padding-bottom .4s cubic-bezier(.4,0,.2,1) 0ms;opacity:0;padding-bottom:0}.sefin-accordion-item__content--expanded{max-height:2000px;padding-bottom:var(--sefin-spacing-lg, 24px);opacity:1;transition:max-height .4s cubic-bezier(.4,0,.2,1) 0ms,opacity .3s cubic-bezier(.4,0,.2,1) .1s,padding-bottom .4s cubic-bezier(.4,0,.2,1) 0ms}.sefin-accordion-item__content-inner{padding-top:var(--sefin-spacing-md, 16px);font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-base, 16px);font-weight:var(--sefin-font-weight-normal, 400);color:var(--sefin-color-text-secondary, #686868);line-height:var(--sefin-line-height-relaxed, 1.75)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "sefin-icon", inputs: ["name", "size", "color", "rotate", "flipH", "flipV", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3021
3190
|
}
|
|
3022
3191
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AccordionItemComponent, decorators: [{
|
|
3023
3192
|
type: Component,
|
|
3024
|
-
args: [{ selector: 'sefin-accordion-item', standalone: true, imports: [CommonModule, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"accordionClasses\">\n <button\n type=\"button\"\n [class]=\"headerClasses\"\n [disabled]=\"disabled\"\n (click)=\"onHeaderClick()\"\n [attr.aria-expanded]=\"expanded\"\n [attr.aria-disabled]=\"disabled\"\n >\n <span class=\"sefin-accordion-item__title\">{{ title }}</span>\n <sefin-icon\n name=\"chevron-down\"\n size=\"sm\"\n [class]=\"'sefin-accordion-item__icon'\"\n [ngClass]=\"{'sefin-accordion-item__icon--expanded': expanded}\"\n ></sefin-icon>\n </button>\n <div\n class=\"sefin-accordion-item__content\"\n [class.sefin-accordion-item__content--expanded]=\"expanded\"\n [attr.aria-hidden]=\"!expanded\"\n >\n <div class=\"sefin-accordion-item__content-inner\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n\n", styles: [".sefin-accordion-item{display:flex;flex-direction:column;width:100%;font-family:var(--sefin-font-family-base);border:1px solid var(--sefin-color-border, #
|
|
3193
|
+
args: [{ selector: 'sefin-accordion-item', standalone: true, imports: [CommonModule, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"accordionClasses\">\n <button\n type=\"button\"\n [class]=\"headerClasses\"\n [disabled]=\"disabled\"\n (click)=\"onHeaderClick()\"\n [attr.aria-expanded]=\"expanded\"\n [attr.aria-disabled]=\"disabled\"\n >\n <span class=\"sefin-accordion-item__title\">{{ title }}</span>\n <sefin-icon\n name=\"chevron-down\"\n size=\"sm\"\n [class]=\"'sefin-accordion-item__icon'\"\n [ngClass]=\"{'sefin-accordion-item__icon--expanded': expanded}\"\n ></sefin-icon>\n </button>\n <div\n class=\"sefin-accordion-item__content\"\n [class.sefin-accordion-item__content--expanded]=\"expanded\"\n [attr.aria-hidden]=\"!expanded\"\n >\n <div class=\"sefin-accordion-item__content-inner\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n\n", styles: [".sefin-accordion-item{display:flex;flex-direction:column;width:100%;font-family:var(--sefin-font-family-base);background-color:var(--sefin-color-surface, #ffffff);border:1px solid var(--sefin-color-border, #cecece);border-radius:var(--sefin-radius-md, 8px);box-shadow:var(--sefin-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, .05));overflow:hidden;transition:box-shadow .2s cubic-bezier(.4,0,.2,1) 0ms,border-color .2s cubic-bezier(.4,0,.2,1) 0ms}.sefin-accordion-item:hover:not(.sefin-accordion-item--disabled){border-color:var(--sefin-color-primary, #55C3D8);box-shadow:var(--sefin-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06))}.sefin-accordion-item--expanded{border-color:var(--sefin-color-primary, #55C3D8);box-shadow:var(--sefin-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06))}.sefin-accordion-item--disabled{opacity:.6;cursor:not-allowed;box-shadow:none}.sefin-accordion-item__header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--sefin-spacing-lg, 24px);background-color:var(--sefin-color-surface, #ffffff);border:none;cursor:pointer;outline:none;font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-base, 16px);font-weight:var(--sefin-font-weight-medium, 500);text-align:left;position:relative;transition:background-color .2s cubic-bezier(.4,0,.2,1) 0ms}.sefin-accordion-item__header:before{content:\"\";position:absolute;left:0;top:0;bottom:0;width:3px;background-color:transparent;transition:background-color .2s cubic-bezier(.4,0,.2,1) 0ms}.sefin-accordion-item__header:hover:not(:disabled){background-color:var(--sefin-color-surface-hover, #f5f5f5)}.sefin-accordion-item__header:focus-visible{outline:2px solid var(--sefin-color-border-focus, #55C3D8);outline-offset:-2px}.sefin-accordion-item__header:active:not(:disabled){background-color:var(--sefin-color-surface-hover, #f5f5f5)}.sefin-accordion-item__header--expanded{background-color:var(--sefin-color-surface-hover, #f5f5f5)}.sefin-accordion-item__header--expanded:before{background-color:var(--sefin-color-primary, #55C3D8)}.sefin-accordion-item__header--expanded:hover:not(:disabled){background-color:var(--sefin-color-surface-hover, #f5f5f5)}.sefin-accordion-item__header--disabled{cursor:not-allowed;opacity:.6}.sefin-accordion-item__title{flex:1;font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-base, 16px);font-weight:var(--sefin-font-weight-medium, 500);color:var(--sefin-color-text, #383838);line-height:var(--sefin-line-height-normal, 1.5);transition:color .2s cubic-bezier(.4,0,.2,1) 0ms}.sefin-accordion-item__header--disabled .sefin-accordion-item__title{color:var(--sefin-color-text-disabled, #9b9b9b)}.sefin-accordion-item__icon{flex-shrink:0;margin-left:var(--sefin-spacing-md, 16px);color:var(--sefin-color-text-secondary, #686868);transition:transform .3s cubic-bezier(.4,0,.2,1) 0ms,color .2s cubic-bezier(.4,0,.2,1) 0ms}.sefin-accordion-item__icon--expanded{transform:rotate(180deg);color:var(--sefin-color-primary, #55C3D8)}.sefin-accordion-item__header:hover:not(:disabled) .sefin-accordion-item__icon{color:var(--sefin-color-primary, #55C3D8)}.sefin-accordion-item__header--expanded .sefin-accordion-item__icon{color:var(--sefin-color-primary, #55C3D8)}.sefin-accordion-item__content{max-height:0;overflow:hidden;background-color:var(--sefin-color-surface, #ffffff);padding:0 var(--sefin-spacing-lg, 24px);transition:max-height .4s cubic-bezier(.4,0,.2,1) 0ms,opacity .35s cubic-bezier(.4,0,.2,1) 0ms,padding-bottom .4s cubic-bezier(.4,0,.2,1) 0ms;opacity:0;padding-bottom:0}.sefin-accordion-item__content--expanded{max-height:2000px;padding-bottom:var(--sefin-spacing-lg, 24px);opacity:1;transition:max-height .4s cubic-bezier(.4,0,.2,1) 0ms,opacity .3s cubic-bezier(.4,0,.2,1) .1s,padding-bottom .4s cubic-bezier(.4,0,.2,1) 0ms}.sefin-accordion-item__content-inner{padding-top:var(--sefin-spacing-md, 16px);font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-base, 16px);font-weight:var(--sefin-font-weight-normal, 400);color:var(--sefin-color-text-secondary, #686868);line-height:var(--sefin-line-height-relaxed, 1.75)}\n"] }]
|
|
3025
3194
|
}], propDecorators: { title: [{
|
|
3026
3195
|
type: Input
|
|
3027
3196
|
}], expanded: [{
|
|
@@ -3311,6 +3480,215 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
3311
3480
|
args: ['document:click', ['$event']]
|
|
3312
3481
|
}] } });
|
|
3313
3482
|
|
|
3483
|
+
class BreadcrumbsComponent {
|
|
3484
|
+
sanitizer;
|
|
3485
|
+
/** Array of breadcrumb items */
|
|
3486
|
+
items = [];
|
|
3487
|
+
/** Separator style. Options: 'slash' | 'chevron' | 'arrow' */
|
|
3488
|
+
separator = 'slash';
|
|
3489
|
+
/** Breadcrumb size. Options: 'sm' | 'md' | 'lg' */
|
|
3490
|
+
size = 'md';
|
|
3491
|
+
/** Additional CSS classes */
|
|
3492
|
+
class = '';
|
|
3493
|
+
constructor(sanitizer) {
|
|
3494
|
+
this.sanitizer = sanitizer;
|
|
3495
|
+
}
|
|
3496
|
+
get breadcrumbsClasses() {
|
|
3497
|
+
return [
|
|
3498
|
+
'sefin-breadcrumbs',
|
|
3499
|
+
`sefin-breadcrumbs--${this.size}`,
|
|
3500
|
+
this.class,
|
|
3501
|
+
]
|
|
3502
|
+
.filter(Boolean)
|
|
3503
|
+
.join(' ');
|
|
3504
|
+
}
|
|
3505
|
+
isLastItem(index) {
|
|
3506
|
+
return index === this.items.length - 1;
|
|
3507
|
+
}
|
|
3508
|
+
getSeparatorIcon() {
|
|
3509
|
+
switch (this.separator) {
|
|
3510
|
+
case 'chevron':
|
|
3511
|
+
return '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>';
|
|
3512
|
+
case 'arrow':
|
|
3513
|
+
return '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 12H19M19 12L12 5M19 12L12 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>';
|
|
3514
|
+
case 'slash':
|
|
3515
|
+
default:
|
|
3516
|
+
return '/';
|
|
3517
|
+
}
|
|
3518
|
+
}
|
|
3519
|
+
sanitizeHtml(html) {
|
|
3520
|
+
if (!html)
|
|
3521
|
+
return '';
|
|
3522
|
+
// For simple text like '/', return as is
|
|
3523
|
+
if (html.length <= 2 && !html.includes('<')) {
|
|
3524
|
+
return html;
|
|
3525
|
+
}
|
|
3526
|
+
// Use sanitize for user-provided HTML (icons from items)
|
|
3527
|
+
// This sanitizes but allows safe SVG elements
|
|
3528
|
+
return this.sanitizer.sanitize(1, html) || '';
|
|
3529
|
+
}
|
|
3530
|
+
getSeparatorIconSafe() {
|
|
3531
|
+
// For separators generated internally, we can trust the HTML
|
|
3532
|
+
const icon = this.getSeparatorIcon();
|
|
3533
|
+
if (icon.length <= 2 && !icon.includes('<')) {
|
|
3534
|
+
return icon;
|
|
3535
|
+
}
|
|
3536
|
+
return this.sanitizer.bypassSecurityTrustHtml(icon);
|
|
3537
|
+
}
|
|
3538
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BreadcrumbsComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
|
|
3539
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: BreadcrumbsComponent, isStandalone: true, selector: "sefin-breadcrumbs", inputs: { items: "items", separator: "separator", size: "size", class: "class" }, ngImport: i0, template: "<nav [class]=\"breadcrumbsClasses\" aria-label=\"Breadcrumb\">\n <ol class=\"sefin-breadcrumbs__list\">\n <li\n *ngFor=\"let item of items; let i = index; let isLast = last\"\n class=\"sefin-breadcrumbs__item\"\n >\n <ng-container *ngIf=\"isLastItem(i); else linkTemplate\">\n <span class=\"sefin-breadcrumbs__current\" [attr.aria-current]=\"'page'\">\n <span *ngIf=\"item.icon\" class=\"sefin-breadcrumbs__icon\" [innerHTML]=\"sanitizeHtml(item.icon)\"></span>\n {{ item.label }}\n </span>\n </ng-container>\n <ng-template #linkTemplate>\n <sefin-link\n [href]=\"item.href || '#'\"\n variant=\"default\"\n [size]=\"size\"\n class=\"sefin-breadcrumbs__link\"\n >\n <span *ngIf=\"item.icon\" class=\"sefin-breadcrumbs__icon\" [innerHTML]=\"sanitizeHtml(item.icon)\"></span>\n {{ item.label }}\n </sefin-link>\n </ng-template>\n <span\n *ngIf=\"!isLast\"\n class=\"sefin-breadcrumbs__separator\"\n [attr.aria-hidden]=\"true\"\n [innerHTML]=\"getSeparatorIconSafe()\"\n ></span>\n </li>\n </ol>\n</nav>\n\n", styles: [".sefin-breadcrumbs{display:flex;align-items:center;font-family:var(--sefin-font-family-base)}.sefin-breadcrumbs__list{display:flex;flex-wrap:wrap;align-items:center;list-style:none;margin:0;padding:0;gap:var(--sefin-spacing-xs, 4px)}.sefin-breadcrumbs__item{display:inline-flex;align-items:center;gap:var(--sefin-spacing-xs, 4px)}.sefin-breadcrumbs__link{color:var(--sefin-color-text-secondary);text-decoration:none;transition:color .2s ease-in-out}.sefin-breadcrumbs__link:hover{color:var(--sefin-color-primary)}.sefin-breadcrumbs__link:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px;border-radius:var(--sefin-radius-sm)}.sefin-breadcrumbs__current{color:var(--sefin-color-text);font-weight:var(--sefin-font-weight-medium);display:inline-flex;align-items:center;gap:var(--sefin-spacing-xs, 4px)}.sefin-breadcrumbs__separator{display:inline-flex;align-items:center;justify-content:center;color:var(--sefin-color-text-disabled);margin:0 var(--sefin-spacing-xs, 4px);-webkit-user-select:none;user-select:none;flex-shrink:0}.sefin-breadcrumbs__separator svg{display:block;width:12px;height:12px}.sefin-breadcrumbs__icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.sefin-breadcrumbs__icon svg{display:block;width:14px;height:14px}.sefin-breadcrumbs--sm{font-size:var(--sefin-font-size-sm, 14px)}.sefin-breadcrumbs--sm .sefin-breadcrumbs__separator{margin:0 var(--sefin-spacing-xs, 4px)}.sefin-breadcrumbs--sm .sefin-breadcrumbs__separator svg{width:10px;height:10px}.sefin-breadcrumbs--sm .sefin-breadcrumbs__icon svg{width:12px;height:12px}.sefin-breadcrumbs--md{font-size:var(--sefin-font-size-base, 16px)}.sefin-breadcrumbs--md .sefin-breadcrumbs__separator{margin:0 var(--sefin-spacing-sm, 8px)}.sefin-breadcrumbs--md .sefin-breadcrumbs__separator svg{width:12px;height:12px}.sefin-breadcrumbs--md .sefin-breadcrumbs__icon svg{width:14px;height:14px}.sefin-breadcrumbs--lg{font-size:var(--sefin-font-size-lg, 18px)}.sefin-breadcrumbs--lg .sefin-breadcrumbs__separator{margin:0 var(--sefin-spacing-sm, 8px)}.sefin-breadcrumbs--lg .sefin-breadcrumbs__separator svg{width:14px;height:14px}.sefin-breadcrumbs--lg .sefin-breadcrumbs__icon svg{width:16px;height:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LinkComponent, selector: "sefin-link", inputs: ["variant", "size", "disabled", "href", "target", "rel", "class", "underline"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3540
|
+
}
|
|
3541
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BreadcrumbsComponent, decorators: [{
|
|
3542
|
+
type: Component,
|
|
3543
|
+
args: [{ selector: 'sefin-breadcrumbs', standalone: true, imports: [CommonModule, LinkComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav [class]=\"breadcrumbsClasses\" aria-label=\"Breadcrumb\">\n <ol class=\"sefin-breadcrumbs__list\">\n <li\n *ngFor=\"let item of items; let i = index; let isLast = last\"\n class=\"sefin-breadcrumbs__item\"\n >\n <ng-container *ngIf=\"isLastItem(i); else linkTemplate\">\n <span class=\"sefin-breadcrumbs__current\" [attr.aria-current]=\"'page'\">\n <span *ngIf=\"item.icon\" class=\"sefin-breadcrumbs__icon\" [innerHTML]=\"sanitizeHtml(item.icon)\"></span>\n {{ item.label }}\n </span>\n </ng-container>\n <ng-template #linkTemplate>\n <sefin-link\n [href]=\"item.href || '#'\"\n variant=\"default\"\n [size]=\"size\"\n class=\"sefin-breadcrumbs__link\"\n >\n <span *ngIf=\"item.icon\" class=\"sefin-breadcrumbs__icon\" [innerHTML]=\"sanitizeHtml(item.icon)\"></span>\n {{ item.label }}\n </sefin-link>\n </ng-template>\n <span\n *ngIf=\"!isLast\"\n class=\"sefin-breadcrumbs__separator\"\n [attr.aria-hidden]=\"true\"\n [innerHTML]=\"getSeparatorIconSafe()\"\n ></span>\n </li>\n </ol>\n</nav>\n\n", styles: [".sefin-breadcrumbs{display:flex;align-items:center;font-family:var(--sefin-font-family-base)}.sefin-breadcrumbs__list{display:flex;flex-wrap:wrap;align-items:center;list-style:none;margin:0;padding:0;gap:var(--sefin-spacing-xs, 4px)}.sefin-breadcrumbs__item{display:inline-flex;align-items:center;gap:var(--sefin-spacing-xs, 4px)}.sefin-breadcrumbs__link{color:var(--sefin-color-text-secondary);text-decoration:none;transition:color .2s ease-in-out}.sefin-breadcrumbs__link:hover{color:var(--sefin-color-primary)}.sefin-breadcrumbs__link:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px;border-radius:var(--sefin-radius-sm)}.sefin-breadcrumbs__current{color:var(--sefin-color-text);font-weight:var(--sefin-font-weight-medium);display:inline-flex;align-items:center;gap:var(--sefin-spacing-xs, 4px)}.sefin-breadcrumbs__separator{display:inline-flex;align-items:center;justify-content:center;color:var(--sefin-color-text-disabled);margin:0 var(--sefin-spacing-xs, 4px);-webkit-user-select:none;user-select:none;flex-shrink:0}.sefin-breadcrumbs__separator svg{display:block;width:12px;height:12px}.sefin-breadcrumbs__icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.sefin-breadcrumbs__icon svg{display:block;width:14px;height:14px}.sefin-breadcrumbs--sm{font-size:var(--sefin-font-size-sm, 14px)}.sefin-breadcrumbs--sm .sefin-breadcrumbs__separator{margin:0 var(--sefin-spacing-xs, 4px)}.sefin-breadcrumbs--sm .sefin-breadcrumbs__separator svg{width:10px;height:10px}.sefin-breadcrumbs--sm .sefin-breadcrumbs__icon svg{width:12px;height:12px}.sefin-breadcrumbs--md{font-size:var(--sefin-font-size-base, 16px)}.sefin-breadcrumbs--md .sefin-breadcrumbs__separator{margin:0 var(--sefin-spacing-sm, 8px)}.sefin-breadcrumbs--md .sefin-breadcrumbs__separator svg{width:12px;height:12px}.sefin-breadcrumbs--md .sefin-breadcrumbs__icon svg{width:14px;height:14px}.sefin-breadcrumbs--lg{font-size:var(--sefin-font-size-lg, 18px)}.sefin-breadcrumbs--lg .sefin-breadcrumbs__separator{margin:0 var(--sefin-spacing-sm, 8px)}.sefin-breadcrumbs--lg .sefin-breadcrumbs__separator svg{width:14px;height:14px}.sefin-breadcrumbs--lg .sefin-breadcrumbs__icon svg{width:16px;height:16px}\n"] }]
|
|
3544
|
+
}], ctorParameters: () => [{ type: i1$1.DomSanitizer }], propDecorators: { items: [{
|
|
3545
|
+
type: Input
|
|
3546
|
+
}], separator: [{
|
|
3547
|
+
type: Input
|
|
3548
|
+
}], size: [{
|
|
3549
|
+
type: Input
|
|
3550
|
+
}], class: [{
|
|
3551
|
+
type: Input
|
|
3552
|
+
}] } });
|
|
3553
|
+
|
|
3554
|
+
class ButtonGroupComponent {
|
|
3555
|
+
sanitizer;
|
|
3556
|
+
constructor(sanitizer) {
|
|
3557
|
+
this.sanitizer = sanitizer;
|
|
3558
|
+
}
|
|
3559
|
+
/** Array of button options */
|
|
3560
|
+
options = [];
|
|
3561
|
+
/** Selected value (for segmented variant) */
|
|
3562
|
+
value = null;
|
|
3563
|
+
/** Whether multiple selection is allowed (for default variant) */
|
|
3564
|
+
multiple = false;
|
|
3565
|
+
/** Selected values (for multiple selection) */
|
|
3566
|
+
selectedValues = [];
|
|
3567
|
+
/** Button variant style. Options: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' */
|
|
3568
|
+
variant = 'primary';
|
|
3569
|
+
/** Button size. Options: 'sm' | 'md' | 'lg' */
|
|
3570
|
+
size = 'md';
|
|
3571
|
+
/** Button group variant. Options: 'default' | 'segmented' */
|
|
3572
|
+
groupVariant = 'default';
|
|
3573
|
+
/** Whether the button group is disabled */
|
|
3574
|
+
disabled = false;
|
|
3575
|
+
/** Additional CSS classes */
|
|
3576
|
+
class = '';
|
|
3577
|
+
/** Event emitted when value changes (for segmented variant) */
|
|
3578
|
+
valueChange = new EventEmitter();
|
|
3579
|
+
/** Event emitted when selected values change (for multiple selection) */
|
|
3580
|
+
selectedValuesChange = new EventEmitter();
|
|
3581
|
+
/** Event emitted when a button is clicked */
|
|
3582
|
+
buttonClick = new EventEmitter();
|
|
3583
|
+
get buttonGroupClasses() {
|
|
3584
|
+
return [
|
|
3585
|
+
'sefin-button-group',
|
|
3586
|
+
`sefin-button-group--${this.groupVariant}`,
|
|
3587
|
+
`sefin-button-group--${this.size}`,
|
|
3588
|
+
this.disabled ? 'sefin-button-group--disabled' : '',
|
|
3589
|
+
this.class,
|
|
3590
|
+
]
|
|
3591
|
+
.filter(Boolean)
|
|
3592
|
+
.join(' ');
|
|
3593
|
+
}
|
|
3594
|
+
isSelected(option) {
|
|
3595
|
+
if (this.groupVariant === 'segmented') {
|
|
3596
|
+
return this.value === option.value;
|
|
3597
|
+
}
|
|
3598
|
+
return this.selectedValues.includes(option.value);
|
|
3599
|
+
}
|
|
3600
|
+
onButtonClick(option) {
|
|
3601
|
+
if (this.disabled || option.disabled) {
|
|
3602
|
+
return;
|
|
3603
|
+
}
|
|
3604
|
+
this.buttonClick.emit(option);
|
|
3605
|
+
if (this.groupVariant === 'segmented') {
|
|
3606
|
+
// Toggle selection for segmented
|
|
3607
|
+
const newValue = this.value === option.value ? null : option.value;
|
|
3608
|
+
this.value = newValue;
|
|
3609
|
+
this.valueChange.emit(newValue);
|
|
3610
|
+
}
|
|
3611
|
+
else {
|
|
3612
|
+
// Multiple selection logic
|
|
3613
|
+
const index = this.selectedValues.indexOf(option.value);
|
|
3614
|
+
if (this.multiple) {
|
|
3615
|
+
if (index >= 0) {
|
|
3616
|
+
// Deselect
|
|
3617
|
+
this.selectedValues = this.selectedValues.filter((v) => v !== option.value);
|
|
3618
|
+
}
|
|
3619
|
+
else {
|
|
3620
|
+
// Select
|
|
3621
|
+
this.selectedValues = [...this.selectedValues, option.value];
|
|
3622
|
+
}
|
|
3623
|
+
this.selectedValuesChange.emit([...this.selectedValues]);
|
|
3624
|
+
}
|
|
3625
|
+
else {
|
|
3626
|
+
// Single selection (even in default variant)
|
|
3627
|
+
if (index >= 0) {
|
|
3628
|
+
// Deselect if already selected
|
|
3629
|
+
this.selectedValues = [];
|
|
3630
|
+
}
|
|
3631
|
+
else {
|
|
3632
|
+
// Select only this one
|
|
3633
|
+
this.selectedValues = [option.value];
|
|
3634
|
+
}
|
|
3635
|
+
this.selectedValuesChange.emit([...this.selectedValues]);
|
|
3636
|
+
}
|
|
3637
|
+
}
|
|
3638
|
+
}
|
|
3639
|
+
getButtonVariant(option) {
|
|
3640
|
+
// For default variant, always use primary to create unified look
|
|
3641
|
+
if (this.groupVariant === 'default') {
|
|
3642
|
+
return 'primary';
|
|
3643
|
+
}
|
|
3644
|
+
// For segmented variant, use outline for non-selected
|
|
3645
|
+
if (this.isSelected(option)) {
|
|
3646
|
+
return this.variant;
|
|
3647
|
+
}
|
|
3648
|
+
return 'outline';
|
|
3649
|
+
}
|
|
3650
|
+
sanitizeHtml(html) {
|
|
3651
|
+
if (!html)
|
|
3652
|
+
return '';
|
|
3653
|
+
// For simple text, return as is
|
|
3654
|
+
if (html.length <= 2 && !html.includes('<')) {
|
|
3655
|
+
return html;
|
|
3656
|
+
}
|
|
3657
|
+
// Use sanitize for user-provided HTML (icons)
|
|
3658
|
+
return this.sanitizer.sanitize(1, html) || '';
|
|
3659
|
+
}
|
|
3660
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ButtonGroupComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
|
|
3661
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: ButtonGroupComponent, isStandalone: true, selector: "sefin-button-group", inputs: { options: "options", value: "value", multiple: "multiple", selectedValues: "selectedValues", variant: "variant", size: "size", groupVariant: "groupVariant", disabled: "disabled", class: "class" }, outputs: { valueChange: "valueChange", selectedValuesChange: "selectedValuesChange", buttonClick: "buttonClick" }, ngImport: i0, template: "<div [class]=\"buttonGroupClasses\" role=\"group\" [attr.aria-label]=\"'Button group'\">\n <sefin-button\n *ngFor=\"let option of options\"\n [variant]=\"getButtonVariant(option)\"\n [size]=\"size\"\n [disabled]=\"disabled || option.disabled\"\n [class.sefin-button-group__button]=\"true\"\n [class.sefin-button-group__button--selected]=\"isSelected(option)\"\n (clicked)=\"onButtonClick(option)\"\n >\n <span *ngIf=\"option.icon\" class=\"sefin-button-group__icon\" [innerHTML]=\"sanitizeHtml(option.icon)\"></span>\n {{ option.label }}\n </sefin-button>\n</div>\n\n", styles: [".sefin-button-group{display:inline-flex;align-items:stretch;gap:0;font-family:var(--sefin-font-family-base);position:relative;border-radius:var(--sefin-radius-md);overflow:hidden;box-shadow:var(--sefin-shadow-sm)}.sefin-button-group__button{position:relative;border-radius:0!important;margin:0;flex:1 1 0;min-width:0;width:0;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:none}.sefin-button-group__button:first-child,.sefin-button-group__button:last-child{border-radius:0!important}.sefin-button-group__button:hover:not(:disabled){z-index:1}.sefin-button-group__button:focus-visible{z-index:2;outline-offset:-2px}.sefin-button-group__icon{display:inline-flex;align-items:center;justify-content:center;margin-right:var(--sefin-spacing-xs, 4px);flex-shrink:0}.sefin-button-group__icon svg{display:block;width:16px;height:16px}.sefin-button-group--segmented{background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);padding:var(--sefin-spacing-xs, 4px);gap:var(--sefin-spacing-xs, 4px);overflow:visible}.sefin-button-group--segmented .sefin-button-group__button{border:1px solid var(--sefin-color-primary)!important;background-color:var(--sefin-color-surface)!important;color:var(--sefin-color-primary)!important;border-radius:var(--sefin-radius-sm)!important;margin:0}.sefin-button-group--segmented .sefin-button-group__button:first-child,.sefin-button-group--segmented .sefin-button-group__button:last-child{border-radius:var(--sefin-radius-sm)!important}.sefin-button-group--segmented .sefin-button-group__button:not(:first-child){margin-left:var(--sefin-spacing-xs, 4px)}.sefin-button-group--segmented .sefin-button-group__button.sefin-button-group__button--selected{background-color:var(--sefin-color-primary)!important;color:#fff!important;border-color:var(--sefin-color-primary)!important}.sefin-button-group--segmented .sefin-button-group__button:not(.sefin-button-group__button--selected){background-color:var(--sefin-color-surface)!important;color:var(--sefin-color-primary)!important}.sefin-button-group--segmented .sefin-button-group__button:hover:not(:disabled){background-color:var(--sefin-color-surface-hover)!important}.sefin-button-group--segmented .sefin-button-group__button:hover:not(:disabled).sefin-button-group__button--selected{background-color:var(--sefin-color-primary-dark)!important}.sefin-button-group--default{background-color:var(--sefin-color-primary);border:1px solid var(--sefin-color-primary);box-shadow:var(--sefin-shadow-sm);padding:0}.sefin-button-group--default .sefin-button-group__button{border:none!important;border-radius:0!important;background-color:transparent!important;color:#fff!important;margin:0;box-shadow:none!important}.sefin-button-group--default .sefin-button-group__button.sefin-button-group__button--selected,.sefin-button-group--default .sefin-button-group__button:not(.sefin-button-group__button--selected){background-color:transparent!important;color:#fff!important}.sefin-button-group--default .sefin-button-group__button:hover:not(:disabled){background-color:#ffffff1a!important}.sefin-button-group--default .sefin-button-group__button:not(:last-child):after{content:\"\";position:absolute;right:0;top:25%;bottom:25%;width:1px;background-color:#ffffff40;pointer-events:none}.sefin-button-group--sm .sefin-button-group__icon svg{width:14px;height:14px}.sefin-button-group--md .sefin-button-group__icon svg{width:16px;height:16px}.sefin-button-group--lg .sefin-button-group__icon svg{width:18px;height:18px}.sefin-button-group--disabled{opacity:.6;pointer-events:none}.sefin-button-group .sefin-button{flex:1 1 0!important;min-width:0!important;width:0!important;text-align:center!important;display:flex!important;align-items:center!important;justify-content:center!important}.sefin-button-group .sefin-button:hover:not(:disabled){transform:none!important}.sefin-button-group .sefin-button:active:not(:disabled){transform:none!important}.sefin-button-group .sefin-button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sefin-button-group--default .sefin-button{border-radius:0!important;border:none!important;box-shadow:none!important}.sefin-button-group--default .sefin-button.sefin-button--primary{background-color:transparent!important;border:none!important}.sefin-button-group--segmented .sefin-button{box-shadow:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "sefin-button", inputs: ["variant", "size", "disabled", "type", "class"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
|
|
3662
|
+
}
|
|
3663
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ButtonGroupComponent, decorators: [{
|
|
3664
|
+
type: Component,
|
|
3665
|
+
args: [{ selector: 'sefin-button-group', standalone: true, imports: [CommonModule, ButtonComponent], changeDetection: ChangeDetectionStrategy.Default, template: "<div [class]=\"buttonGroupClasses\" role=\"group\" [attr.aria-label]=\"'Button group'\">\n <sefin-button\n *ngFor=\"let option of options\"\n [variant]=\"getButtonVariant(option)\"\n [size]=\"size\"\n [disabled]=\"disabled || option.disabled\"\n [class.sefin-button-group__button]=\"true\"\n [class.sefin-button-group__button--selected]=\"isSelected(option)\"\n (clicked)=\"onButtonClick(option)\"\n >\n <span *ngIf=\"option.icon\" class=\"sefin-button-group__icon\" [innerHTML]=\"sanitizeHtml(option.icon)\"></span>\n {{ option.label }}\n </sefin-button>\n</div>\n\n", styles: [".sefin-button-group{display:inline-flex;align-items:stretch;gap:0;font-family:var(--sefin-font-family-base);position:relative;border-radius:var(--sefin-radius-md);overflow:hidden;box-shadow:var(--sefin-shadow-sm)}.sefin-button-group__button{position:relative;border-radius:0!important;margin:0;flex:1 1 0;min-width:0;width:0;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:none}.sefin-button-group__button:first-child,.sefin-button-group__button:last-child{border-radius:0!important}.sefin-button-group__button:hover:not(:disabled){z-index:1}.sefin-button-group__button:focus-visible{z-index:2;outline-offset:-2px}.sefin-button-group__icon{display:inline-flex;align-items:center;justify-content:center;margin-right:var(--sefin-spacing-xs, 4px);flex-shrink:0}.sefin-button-group__icon svg{display:block;width:16px;height:16px}.sefin-button-group--segmented{background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);padding:var(--sefin-spacing-xs, 4px);gap:var(--sefin-spacing-xs, 4px);overflow:visible}.sefin-button-group--segmented .sefin-button-group__button{border:1px solid var(--sefin-color-primary)!important;background-color:var(--sefin-color-surface)!important;color:var(--sefin-color-primary)!important;border-radius:var(--sefin-radius-sm)!important;margin:0}.sefin-button-group--segmented .sefin-button-group__button:first-child,.sefin-button-group--segmented .sefin-button-group__button:last-child{border-radius:var(--sefin-radius-sm)!important}.sefin-button-group--segmented .sefin-button-group__button:not(:first-child){margin-left:var(--sefin-spacing-xs, 4px)}.sefin-button-group--segmented .sefin-button-group__button.sefin-button-group__button--selected{background-color:var(--sefin-color-primary)!important;color:#fff!important;border-color:var(--sefin-color-primary)!important}.sefin-button-group--segmented .sefin-button-group__button:not(.sefin-button-group__button--selected){background-color:var(--sefin-color-surface)!important;color:var(--sefin-color-primary)!important}.sefin-button-group--segmented .sefin-button-group__button:hover:not(:disabled){background-color:var(--sefin-color-surface-hover)!important}.sefin-button-group--segmented .sefin-button-group__button:hover:not(:disabled).sefin-button-group__button--selected{background-color:var(--sefin-color-primary-dark)!important}.sefin-button-group--default{background-color:var(--sefin-color-primary);border:1px solid var(--sefin-color-primary);box-shadow:var(--sefin-shadow-sm);padding:0}.sefin-button-group--default .sefin-button-group__button{border:none!important;border-radius:0!important;background-color:transparent!important;color:#fff!important;margin:0;box-shadow:none!important}.sefin-button-group--default .sefin-button-group__button.sefin-button-group__button--selected,.sefin-button-group--default .sefin-button-group__button:not(.sefin-button-group__button--selected){background-color:transparent!important;color:#fff!important}.sefin-button-group--default .sefin-button-group__button:hover:not(:disabled){background-color:#ffffff1a!important}.sefin-button-group--default .sefin-button-group__button:not(:last-child):after{content:\"\";position:absolute;right:0;top:25%;bottom:25%;width:1px;background-color:#ffffff40;pointer-events:none}.sefin-button-group--sm .sefin-button-group__icon svg{width:14px;height:14px}.sefin-button-group--md .sefin-button-group__icon svg{width:16px;height:16px}.sefin-button-group--lg .sefin-button-group__icon svg{width:18px;height:18px}.sefin-button-group--disabled{opacity:.6;pointer-events:none}.sefin-button-group .sefin-button{flex:1 1 0!important;min-width:0!important;width:0!important;text-align:center!important;display:flex!important;align-items:center!important;justify-content:center!important}.sefin-button-group .sefin-button:hover:not(:disabled){transform:none!important}.sefin-button-group .sefin-button:active:not(:disabled){transform:none!important}.sefin-button-group .sefin-button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sefin-button-group--default .sefin-button{border-radius:0!important;border:none!important;box-shadow:none!important}.sefin-button-group--default .sefin-button.sefin-button--primary{background-color:transparent!important;border:none!important}.sefin-button-group--segmented .sefin-button{box-shadow:none!important}\n"] }]
|
|
3666
|
+
}], ctorParameters: () => [{ type: i1$1.DomSanitizer }], propDecorators: { options: [{
|
|
3667
|
+
type: Input
|
|
3668
|
+
}], value: [{
|
|
3669
|
+
type: Input
|
|
3670
|
+
}], multiple: [{
|
|
3671
|
+
type: Input
|
|
3672
|
+
}], selectedValues: [{
|
|
3673
|
+
type: Input
|
|
3674
|
+
}], variant: [{
|
|
3675
|
+
type: Input
|
|
3676
|
+
}], size: [{
|
|
3677
|
+
type: Input
|
|
3678
|
+
}], groupVariant: [{
|
|
3679
|
+
type: Input
|
|
3680
|
+
}], disabled: [{
|
|
3681
|
+
type: Input
|
|
3682
|
+
}], class: [{
|
|
3683
|
+
type: Input
|
|
3684
|
+
}], valueChange: [{
|
|
3685
|
+
type: Output
|
|
3686
|
+
}], selectedValuesChange: [{
|
|
3687
|
+
type: Output
|
|
3688
|
+
}], buttonClick: [{
|
|
3689
|
+
type: Output
|
|
3690
|
+
}] } });
|
|
3691
|
+
|
|
3314
3692
|
class CardComponent {
|
|
3315
3693
|
/** Card variant style. Options: 'default' | 'elevated' | 'outlined' */
|
|
3316
3694
|
variant = 'default';
|
|
@@ -3972,6 +4350,171 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
3972
4350
|
args: ['document:keydown', ['$event']]
|
|
3973
4351
|
}] } });
|
|
3974
4352
|
|
|
4353
|
+
class PaginationComponent {
|
|
4354
|
+
/** Current page (1-based) */
|
|
4355
|
+
set currentPage(value) {
|
|
4356
|
+
this._currentPage.set(Math.max(1, value));
|
|
4357
|
+
}
|
|
4358
|
+
get currentPage() {
|
|
4359
|
+
return this._currentPage();
|
|
4360
|
+
}
|
|
4361
|
+
_currentPage = signal(1, ...(ngDevMode ? [{ debugName: "_currentPage" }] : []));
|
|
4362
|
+
/** Total number of pages */
|
|
4363
|
+
set totalPages(value) {
|
|
4364
|
+
this._totalPages.set(Math.max(1, value));
|
|
4365
|
+
}
|
|
4366
|
+
get totalPages() {
|
|
4367
|
+
return this._totalPages();
|
|
4368
|
+
}
|
|
4369
|
+
_totalPages = signal(1, ...(ngDevMode ? [{ debugName: "_totalPages" }] : []));
|
|
4370
|
+
/** Total number of items (alternative to totalPages) */
|
|
4371
|
+
set totalItems(value) {
|
|
4372
|
+
if (value !== undefined) {
|
|
4373
|
+
this._totalItems.set(value);
|
|
4374
|
+
}
|
|
4375
|
+
}
|
|
4376
|
+
get totalItems() {
|
|
4377
|
+
return this._totalItems();
|
|
4378
|
+
}
|
|
4379
|
+
_totalItems = signal(undefined, ...(ngDevMode ? [{ debugName: "_totalItems" }] : []));
|
|
4380
|
+
/** Items per page (used when totalItems is provided) */
|
|
4381
|
+
itemsPerPage = 10;
|
|
4382
|
+
/** Number of page buttons to show on each side of current page */
|
|
4383
|
+
siblingCount = 1;
|
|
4384
|
+
/** Show first and last page buttons */
|
|
4385
|
+
showFirstLast = true;
|
|
4386
|
+
/** Show previous and next buttons */
|
|
4387
|
+
showPrevNext = true;
|
|
4388
|
+
/** Pagination size. Options: 'sm' | 'md' | 'lg' */
|
|
4389
|
+
size = 'md';
|
|
4390
|
+
/** Pagination variant. Options: 'default' | 'compact' */
|
|
4391
|
+
variant = 'default';
|
|
4392
|
+
/** Additional CSS classes */
|
|
4393
|
+
class = '';
|
|
4394
|
+
/** Event emitted when page changes */
|
|
4395
|
+
pageChange = new EventEmitter();
|
|
4396
|
+
/** Computed total pages (from totalItems or direct input) */
|
|
4397
|
+
computedTotalPages = computed(() => {
|
|
4398
|
+
const total = this._totalItems();
|
|
4399
|
+
if (total !== undefined) {
|
|
4400
|
+
return Math.max(1, Math.ceil(total / this.itemsPerPage));
|
|
4401
|
+
}
|
|
4402
|
+
return this._totalPages();
|
|
4403
|
+
}, ...(ngDevMode ? [{ debugName: "computedTotalPages" }] : []));
|
|
4404
|
+
/** Computed page numbers to display */
|
|
4405
|
+
pageNumbers = computed(() => {
|
|
4406
|
+
const current = this._currentPage();
|
|
4407
|
+
const total = this.computedTotalPages();
|
|
4408
|
+
const sibling = this.siblingCount;
|
|
4409
|
+
const pages = [];
|
|
4410
|
+
// Always show first page if not already included
|
|
4411
|
+
if (this.showFirstLast && current > sibling + 2) {
|
|
4412
|
+
pages.push(1);
|
|
4413
|
+
if (current > sibling + 3) {
|
|
4414
|
+
pages.push('ellipsis-start');
|
|
4415
|
+
}
|
|
4416
|
+
}
|
|
4417
|
+
// Calculate start and end of page range
|
|
4418
|
+
const start = Math.max(1, current - sibling);
|
|
4419
|
+
const end = Math.min(total, current + sibling);
|
|
4420
|
+
// Add page numbers in range
|
|
4421
|
+
for (let i = start; i <= end; i++) {
|
|
4422
|
+
pages.push(i);
|
|
4423
|
+
}
|
|
4424
|
+
// Always show last page if not already included
|
|
4425
|
+
if (this.showFirstLast && current < total - sibling - 1) {
|
|
4426
|
+
if (current < total - sibling - 2) {
|
|
4427
|
+
pages.push('ellipsis-end');
|
|
4428
|
+
}
|
|
4429
|
+
pages.push(total);
|
|
4430
|
+
}
|
|
4431
|
+
return pages;
|
|
4432
|
+
}, ...(ngDevMode ? [{ debugName: "pageNumbers" }] : []));
|
|
4433
|
+
get paginationClasses() {
|
|
4434
|
+
return [
|
|
4435
|
+
'sefin-pagination',
|
|
4436
|
+
`sefin-pagination--${this.size}`,
|
|
4437
|
+
`sefin-pagination--${this.variant}`,
|
|
4438
|
+
this.class,
|
|
4439
|
+
]
|
|
4440
|
+
.filter(Boolean)
|
|
4441
|
+
.join(' ');
|
|
4442
|
+
}
|
|
4443
|
+
isDisabled(direction) {
|
|
4444
|
+
if (direction === 'prev') {
|
|
4445
|
+
return this.currentPage <= 1;
|
|
4446
|
+
}
|
|
4447
|
+
return this.currentPage >= this.computedTotalPages();
|
|
4448
|
+
}
|
|
4449
|
+
goToPage(page) {
|
|
4450
|
+
if (typeof page === 'number') {
|
|
4451
|
+
const validPage = Math.max(1, Math.min(page, this.computedTotalPages()));
|
|
4452
|
+
if (validPage !== this.currentPage) {
|
|
4453
|
+
this._currentPage.set(validPage);
|
|
4454
|
+
this.pageChange.emit(validPage);
|
|
4455
|
+
}
|
|
4456
|
+
}
|
|
4457
|
+
}
|
|
4458
|
+
goToPrevious() {
|
|
4459
|
+
if (!this.isDisabled('prev')) {
|
|
4460
|
+
this.goToPage(this.currentPage - 1);
|
|
4461
|
+
}
|
|
4462
|
+
}
|
|
4463
|
+
goToNext() {
|
|
4464
|
+
if (!this.isDisabled('next')) {
|
|
4465
|
+
this.goToPage(this.currentPage + 1);
|
|
4466
|
+
}
|
|
4467
|
+
}
|
|
4468
|
+
goToFirst() {
|
|
4469
|
+
if (this.currentPage > 1) {
|
|
4470
|
+
this.goToPage(1);
|
|
4471
|
+
}
|
|
4472
|
+
}
|
|
4473
|
+
goToLast() {
|
|
4474
|
+
const lastPage = this.computedTotalPages();
|
|
4475
|
+
if (this.currentPage < lastPage) {
|
|
4476
|
+
this.goToPage(lastPage);
|
|
4477
|
+
}
|
|
4478
|
+
}
|
|
4479
|
+
isEllipsis(item) {
|
|
4480
|
+
return item === 'ellipsis-start' || item === 'ellipsis-end';
|
|
4481
|
+
}
|
|
4482
|
+
isCurrentPage(page) {
|
|
4483
|
+
return typeof page === 'number' && page === this.currentPage;
|
|
4484
|
+
}
|
|
4485
|
+
getAriaCurrent(page) {
|
|
4486
|
+
return this.isCurrentPage(page) ? 'page' : null;
|
|
4487
|
+
}
|
|
4488
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4489
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: PaginationComponent, isStandalone: true, selector: "sefin-pagination", inputs: { currentPage: "currentPage", totalPages: "totalPages", totalItems: "totalItems", itemsPerPage: "itemsPerPage", siblingCount: "siblingCount", showFirstLast: "showFirstLast", showPrevNext: "showPrevNext", size: "size", variant: "variant", class: "class" }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<nav [class]=\"paginationClasses\" aria-label=\"Pagination Navigation\">\n <ul class=\"sefin-pagination__list\">\n <!-- First button -->\n <li *ngIf=\"showFirstLast\" class=\"sefin-pagination__item\">\n <button\n type=\"button\"\n class=\"sefin-pagination__button sefin-pagination__button--nav\"\n [disabled]=\"currentPage <= 1\"\n (click)=\"goToFirst()\"\n aria-label=\"Go to first page\"\n [attr.aria-disabled]=\"currentPage <= 1\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M11 17L6 12L11 7M18 17L13 12L18 7\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n </li>\n\n <!-- Previous button -->\n <li *ngIf=\"showPrevNext\" class=\"sefin-pagination__item\">\n <button\n type=\"button\"\n class=\"sefin-pagination__button sefin-pagination__button--nav\"\n [disabled]=\"isDisabled('prev')\"\n (click)=\"goToPrevious()\"\n aria-label=\"Go to previous page\"\n [attr.aria-disabled]=\"isDisabled('prev')\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M15 18L9 12L15 6\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n </li>\n\n <!-- Page numbers -->\n <li\n *ngFor=\"let page of pageNumbers(); let i = index\"\n class=\"sefin-pagination__item\"\n >\n <ng-container *ngIf=\"isEllipsis(page); else pageButton\">\n <span class=\"sefin-pagination__ellipsis\" aria-hidden=\"true\">...</span>\n </ng-container>\n <ng-template #pageButton>\n <button\n type=\"button\"\n class=\"sefin-pagination__button sefin-pagination__button--page\"\n [class.sefin-pagination__button--active]=\"isCurrentPage(page)\"\n (click)=\"goToPage(page)\"\n [attr.aria-label]=\"'Go to page ' + page\"\n [attr.aria-current]=\"getAriaCurrent(page)\"\n >\n {{ page }}\n </button>\n </ng-template>\n </li>\n\n <!-- Next button -->\n <li *ngIf=\"showPrevNext\" class=\"sefin-pagination__item\">\n <button\n type=\"button\"\n class=\"sefin-pagination__button sefin-pagination__button--nav\"\n [disabled]=\"isDisabled('next')\"\n (click)=\"goToNext()\"\n aria-label=\"Go to next page\"\n [attr.aria-disabled]=\"isDisabled('next')\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M9 18L15 12L9 6\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n </li>\n\n <!-- Last button -->\n <li *ngIf=\"showFirstLast\" class=\"sefin-pagination__item\">\n <button\n type=\"button\"\n class=\"sefin-pagination__button sefin-pagination__button--nav\"\n [disabled]=\"currentPage >= computedTotalPages()\"\n (click)=\"goToLast()\"\n aria-label=\"Go to last page\"\n [attr.aria-disabled]=\"currentPage >= computedTotalPages()\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M13 17L18 12L13 7M6 17L11 12L6 7\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n </li>\n </ul>\n</nav>\n", styles: [".sefin-pagination{display:inline-flex;font-family:var(--sefin-font-family-base)}.sefin-pagination__list{display:flex;align-items:center;gap:var(--sefin-spacing-xs, 4px);list-style:none;margin:0;padding:0}.sefin-pagination__item{display:inline-flex;align-items:center}.sefin-pagination__button{display:inline-flex;align-items:center;justify-content:center;font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-medium);line-height:var(--sefin-line-height-normal);border:1px solid var(--sefin-color-border);background-color:var(--sefin-color-surface);color:var(--sefin-color-text);cursor:pointer;outline:none;transition:all .2s ease-in-out;border-radius:var(--sefin-radius-md);-webkit-user-select:none;user-select:none}.sefin-pagination__button:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-pagination__button:hover:not(:disabled):not(.sefin-pagination__button--active){background-color:var(--sefin-color-surface-hover);border-color:var(--sefin-color-primary);color:var(--sefin-color-primary)}.sefin-pagination__button:active:not(:disabled){transform:translateY(1px)}.sefin-pagination__button:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.sefin-pagination__button--page{min-width:40px;text-align:center}.sefin-pagination__button--active{background-color:var(--sefin-color-primary);border-color:var(--sefin-color-primary);color:#fff;font-weight:var(--sefin-font-weight-semibold)}.sefin-pagination__button--active:hover{background-color:var(--sefin-color-primary-dark);border-color:var(--sefin-color-primary-dark);color:#fff}.sefin-pagination__button--nav{padding:0}.sefin-pagination__button svg{display:block;width:16px;height:16px;flex-shrink:0}.sefin-pagination__ellipsis{display:inline-flex;align-items:center;justify-content:center;color:var(--sefin-color-text-secondary);padding:0 var(--sefin-spacing-sm, 8px);-webkit-user-select:none;user-select:none;min-width:40px}.sefin-pagination--sm .sefin-pagination__button{padding:var(--sefin-spacing-xs, 4px) var(--sefin-spacing-sm, 8px);font-size:var(--sefin-font-size-sm, 14px);min-height:32px}.sefin-pagination--sm .sefin-pagination__button--page{min-width:32px}.sefin-pagination--sm .sefin-pagination__button svg{width:14px;height:14px}.sefin-pagination--sm .sefin-pagination__ellipsis{font-size:var(--sefin-font-size-sm, 14px);min-width:32px}.sefin-pagination--md .sefin-pagination__button{padding:var(--sefin-spacing-sm, 8px) var(--sefin-spacing-md, 16px);font-size:var(--sefin-font-size-base, 16px);min-height:40px}.sefin-pagination--md .sefin-pagination__button--page{min-width:40px}.sefin-pagination--md .sefin-pagination__button svg{width:16px;height:16px}.sefin-pagination--md .sefin-pagination__ellipsis{font-size:var(--sefin-font-size-base, 16px);min-width:40px}.sefin-pagination--lg .sefin-pagination__button{padding:var(--sefin-spacing-md, 16px) var(--sefin-spacing-lg, 24px);font-size:var(--sefin-font-size-lg, 18px);min-height:48px}.sefin-pagination--lg .sefin-pagination__button--page{min-width:48px}.sefin-pagination--lg .sefin-pagination__button svg{width:18px;height:18px}.sefin-pagination--lg .sefin-pagination__ellipsis{font-size:var(--sefin-font-size-lg, 18px);min-width:48px}.sefin-pagination--compact .sefin-pagination__button--page{min-width:auto;padding-left:var(--sefin-spacing-sm, 8px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-pagination--compact .sefin-pagination__ellipsis{min-width:auto;padding:0 var(--sefin-spacing-xs, 4px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4490
|
+
}
|
|
4491
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PaginationComponent, decorators: [{
|
|
4492
|
+
type: Component,
|
|
4493
|
+
args: [{ selector: 'sefin-pagination', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav [class]=\"paginationClasses\" aria-label=\"Pagination Navigation\">\n <ul class=\"sefin-pagination__list\">\n <!-- First button -->\n <li *ngIf=\"showFirstLast\" class=\"sefin-pagination__item\">\n <button\n type=\"button\"\n class=\"sefin-pagination__button sefin-pagination__button--nav\"\n [disabled]=\"currentPage <= 1\"\n (click)=\"goToFirst()\"\n aria-label=\"Go to first page\"\n [attr.aria-disabled]=\"currentPage <= 1\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M11 17L6 12L11 7M18 17L13 12L18 7\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n </li>\n\n <!-- Previous button -->\n <li *ngIf=\"showPrevNext\" class=\"sefin-pagination__item\">\n <button\n type=\"button\"\n class=\"sefin-pagination__button sefin-pagination__button--nav\"\n [disabled]=\"isDisabled('prev')\"\n (click)=\"goToPrevious()\"\n aria-label=\"Go to previous page\"\n [attr.aria-disabled]=\"isDisabled('prev')\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M15 18L9 12L15 6\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n </li>\n\n <!-- Page numbers -->\n <li\n *ngFor=\"let page of pageNumbers(); let i = index\"\n class=\"sefin-pagination__item\"\n >\n <ng-container *ngIf=\"isEllipsis(page); else pageButton\">\n <span class=\"sefin-pagination__ellipsis\" aria-hidden=\"true\">...</span>\n </ng-container>\n <ng-template #pageButton>\n <button\n type=\"button\"\n class=\"sefin-pagination__button sefin-pagination__button--page\"\n [class.sefin-pagination__button--active]=\"isCurrentPage(page)\"\n (click)=\"goToPage(page)\"\n [attr.aria-label]=\"'Go to page ' + page\"\n [attr.aria-current]=\"getAriaCurrent(page)\"\n >\n {{ page }}\n </button>\n </ng-template>\n </li>\n\n <!-- Next button -->\n <li *ngIf=\"showPrevNext\" class=\"sefin-pagination__item\">\n <button\n type=\"button\"\n class=\"sefin-pagination__button sefin-pagination__button--nav\"\n [disabled]=\"isDisabled('next')\"\n (click)=\"goToNext()\"\n aria-label=\"Go to next page\"\n [attr.aria-disabled]=\"isDisabled('next')\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M9 18L15 12L9 6\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n </li>\n\n <!-- Last button -->\n <li *ngIf=\"showFirstLast\" class=\"sefin-pagination__item\">\n <button\n type=\"button\"\n class=\"sefin-pagination__button sefin-pagination__button--nav\"\n [disabled]=\"currentPage >= computedTotalPages()\"\n (click)=\"goToLast()\"\n aria-label=\"Go to last page\"\n [attr.aria-disabled]=\"currentPage >= computedTotalPages()\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M13 17L18 12L13 7M6 17L11 12L6 7\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n </li>\n </ul>\n</nav>\n", styles: [".sefin-pagination{display:inline-flex;font-family:var(--sefin-font-family-base)}.sefin-pagination__list{display:flex;align-items:center;gap:var(--sefin-spacing-xs, 4px);list-style:none;margin:0;padding:0}.sefin-pagination__item{display:inline-flex;align-items:center}.sefin-pagination__button{display:inline-flex;align-items:center;justify-content:center;font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-medium);line-height:var(--sefin-line-height-normal);border:1px solid var(--sefin-color-border);background-color:var(--sefin-color-surface);color:var(--sefin-color-text);cursor:pointer;outline:none;transition:all .2s ease-in-out;border-radius:var(--sefin-radius-md);-webkit-user-select:none;user-select:none}.sefin-pagination__button:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-pagination__button:hover:not(:disabled):not(.sefin-pagination__button--active){background-color:var(--sefin-color-surface-hover);border-color:var(--sefin-color-primary);color:var(--sefin-color-primary)}.sefin-pagination__button:active:not(:disabled){transform:translateY(1px)}.sefin-pagination__button:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.sefin-pagination__button--page{min-width:40px;text-align:center}.sefin-pagination__button--active{background-color:var(--sefin-color-primary);border-color:var(--sefin-color-primary);color:#fff;font-weight:var(--sefin-font-weight-semibold)}.sefin-pagination__button--active:hover{background-color:var(--sefin-color-primary-dark);border-color:var(--sefin-color-primary-dark);color:#fff}.sefin-pagination__button--nav{padding:0}.sefin-pagination__button svg{display:block;width:16px;height:16px;flex-shrink:0}.sefin-pagination__ellipsis{display:inline-flex;align-items:center;justify-content:center;color:var(--sefin-color-text-secondary);padding:0 var(--sefin-spacing-sm, 8px);-webkit-user-select:none;user-select:none;min-width:40px}.sefin-pagination--sm .sefin-pagination__button{padding:var(--sefin-spacing-xs, 4px) var(--sefin-spacing-sm, 8px);font-size:var(--sefin-font-size-sm, 14px);min-height:32px}.sefin-pagination--sm .sefin-pagination__button--page{min-width:32px}.sefin-pagination--sm .sefin-pagination__button svg{width:14px;height:14px}.sefin-pagination--sm .sefin-pagination__ellipsis{font-size:var(--sefin-font-size-sm, 14px);min-width:32px}.sefin-pagination--md .sefin-pagination__button{padding:var(--sefin-spacing-sm, 8px) var(--sefin-spacing-md, 16px);font-size:var(--sefin-font-size-base, 16px);min-height:40px}.sefin-pagination--md .sefin-pagination__button--page{min-width:40px}.sefin-pagination--md .sefin-pagination__button svg{width:16px;height:16px}.sefin-pagination--md .sefin-pagination__ellipsis{font-size:var(--sefin-font-size-base, 16px);min-width:40px}.sefin-pagination--lg .sefin-pagination__button{padding:var(--sefin-spacing-md, 16px) var(--sefin-spacing-lg, 24px);font-size:var(--sefin-font-size-lg, 18px);min-height:48px}.sefin-pagination--lg .sefin-pagination__button--page{min-width:48px}.sefin-pagination--lg .sefin-pagination__button svg{width:18px;height:18px}.sefin-pagination--lg .sefin-pagination__ellipsis{font-size:var(--sefin-font-size-lg, 18px);min-width:48px}.sefin-pagination--compact .sefin-pagination__button--page{min-width:auto;padding-left:var(--sefin-spacing-sm, 8px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-pagination--compact .sefin-pagination__ellipsis{min-width:auto;padding:0 var(--sefin-spacing-xs, 4px)}\n"] }]
|
|
4494
|
+
}], propDecorators: { currentPage: [{
|
|
4495
|
+
type: Input
|
|
4496
|
+
}], totalPages: [{
|
|
4497
|
+
type: Input
|
|
4498
|
+
}], totalItems: [{
|
|
4499
|
+
type: Input
|
|
4500
|
+
}], itemsPerPage: [{
|
|
4501
|
+
type: Input
|
|
4502
|
+
}], siblingCount: [{
|
|
4503
|
+
type: Input
|
|
4504
|
+
}], showFirstLast: [{
|
|
4505
|
+
type: Input
|
|
4506
|
+
}], showPrevNext: [{
|
|
4507
|
+
type: Input
|
|
4508
|
+
}], size: [{
|
|
4509
|
+
type: Input
|
|
4510
|
+
}], variant: [{
|
|
4511
|
+
type: Input
|
|
4512
|
+
}], class: [{
|
|
4513
|
+
type: Input
|
|
4514
|
+
}], pageChange: [{
|
|
4515
|
+
type: Output
|
|
4516
|
+
}] } });
|
|
4517
|
+
|
|
3975
4518
|
class TextareaComponent {
|
|
3976
4519
|
textareaRef;
|
|
3977
4520
|
/** Textarea variant style. Options: 'outlined' | 'filled' | 'standard' */
|
|
@@ -4361,5 +4904,5 @@ const STYLES_PATH = './styles/index.scss';
|
|
|
4361
4904
|
* Generated bundle index. Do not edit.
|
|
4362
4905
|
*/
|
|
4363
4906
|
|
|
4364
|
-
export { AccordionItemComponent, AlertComponent, AutocompleteComponent, AvatarComponent, BORDER_RADIUS_TOKENS, BRAND_THEME, BadgeComponent, ButtonComponent, COLOR_TOKENS, CardComponent, CheckboxComponent, ChipComponent, ContainerComponent, DARK_THEME, DESIGN_TOKENS, DatepickerComponent, DividerComponent, FabButtonComponent, IconButtonComponent, IconComponent, ImageComponent, LIGHT_THEME, LinkComponent, ProgressBarComponent, RadioComponent, SHADOW_TOKENS, SPACING_TOKENS, STYLES_PATH, SelectComponent, SpinnerComponent, StackComponent, SwitchComponent, TYPOGRAPHY_TOKENS, TagComponent, TextFieldComponent, TextareaComponent, ThemeLoader, ToastComponent, TooltipComponent, TypographyComponent };
|
|
4907
|
+
export { AccordionItemComponent, AlertComponent, AutocompleteComponent, AvatarComponent, BORDER_RADIUS_TOKENS, BRAND_THEME, BadgeComponent, BreadcrumbsComponent, ButtonComponent, ButtonGroupComponent, COLOR_TOKENS, CardComponent, CheckboxComponent, ChipComponent, ContainerComponent, DARK_THEME, DESIGN_TOKENS, DatepickerComponent, DividerComponent, FabButtonComponent, IconButtonComponent, IconComponent, ImageComponent, LIGHT_THEME, LinkComponent, PaginationComponent, ProgressBarComponent, RadioComponent, RateComponent, SHADOW_TOKENS, SPACING_TOKENS, STYLES_PATH, SelectComponent, SpinnerComponent, StackComponent, SwitchComponent, TYPOGRAPHY_TOKENS, TabComponent, TagComponent, TextFieldComponent, TextareaComponent, ThemeLoader, ToastComponent, TooltipComponent, TypographyComponent };
|
|
4365
4908
|
//# sourceMappingURL=lesterarte-sefin-ui.mjs.map
|