@lesterarte/sefin-ui 0.0.20-dev.0 → 0.0.20-dev.2
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.
|
@@ -2976,6 +2976,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
2976
2976
|
type: Input
|
|
2977
2977
|
}] } });
|
|
2978
2978
|
|
|
2979
|
+
class TabComponent {
|
|
2980
|
+
/** Tab variant style. Options: 'default' | 'primary' | 'secondary' | 'underline' */
|
|
2981
|
+
variant = 'default';
|
|
2982
|
+
/** Tab size. Options: 'sm' | 'md' | 'lg' */
|
|
2983
|
+
size = 'md';
|
|
2984
|
+
/** Whether the tab is disabled */
|
|
2985
|
+
disabled = false;
|
|
2986
|
+
/** Whether the tab is active */
|
|
2987
|
+
active = false;
|
|
2988
|
+
/** Additional CSS classes */
|
|
2989
|
+
class = '';
|
|
2990
|
+
clicked = new EventEmitter();
|
|
2991
|
+
onClick(event) {
|
|
2992
|
+
if (!this.disabled) {
|
|
2993
|
+
this.clicked.emit(event);
|
|
2994
|
+
}
|
|
2995
|
+
}
|
|
2996
|
+
get tabClasses() {
|
|
2997
|
+
return [
|
|
2998
|
+
'sefin-tab',
|
|
2999
|
+
`sefin-tab--${this.variant}`,
|
|
3000
|
+
`sefin-tab--${this.size}`,
|
|
3001
|
+
this.disabled ? 'sefin-tab--disabled' : '',
|
|
3002
|
+
this.active ? 'sefin-tab--active' : '',
|
|
3003
|
+
this.class,
|
|
3004
|
+
]
|
|
3005
|
+
.filter(Boolean)
|
|
3006
|
+
.join(' ');
|
|
3007
|
+
}
|
|
3008
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3009
|
+
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 });
|
|
3010
|
+
}
|
|
3011
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TabComponent, decorators: [{
|
|
3012
|
+
type: Component,
|
|
3013
|
+
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"] }]
|
|
3014
|
+
}], propDecorators: { variant: [{
|
|
3015
|
+
type: Input
|
|
3016
|
+
}], size: [{
|
|
3017
|
+
type: Input
|
|
3018
|
+
}], disabled: [{
|
|
3019
|
+
type: Input
|
|
3020
|
+
}], active: [{
|
|
3021
|
+
type: Input
|
|
3022
|
+
}], class: [{
|
|
3023
|
+
type: Input
|
|
3024
|
+
}], clicked: [{
|
|
3025
|
+
type: Output
|
|
3026
|
+
}] } });
|
|
3027
|
+
|
|
2979
3028
|
/**
|
|
2980
3029
|
* Atoms index
|
|
2981
3030
|
*/
|
|
@@ -3017,11 +3066,11 @@ class AccordionItemComponent {
|
|
|
3017
3066
|
.join(' ');
|
|
3018
3067
|
}
|
|
3019
3068
|
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, #
|
|
3069
|
+
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
3070
|
}
|
|
3022
3071
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AccordionItemComponent, decorators: [{
|
|
3023
3072
|
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, #
|
|
3073
|
+
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
3074
|
}], propDecorators: { title: [{
|
|
3026
3075
|
type: Input
|
|
3027
3076
|
}], expanded: [{
|
|
@@ -4361,5 +4410,5 @@ const STYLES_PATH = './styles/index.scss';
|
|
|
4361
4410
|
* Generated bundle index. Do not edit.
|
|
4362
4411
|
*/
|
|
4363
4412
|
|
|
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 };
|
|
4413
|
+
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, TabComponent, TagComponent, TextFieldComponent, TextareaComponent, ThemeLoader, ToastComponent, TooltipComponent, TypographyComponent };
|
|
4365
4414
|
//# sourceMappingURL=lesterarte-sefin-ui.mjs.map
|