@crowdfarming/oliva-ds 1.79.0 → 1.80.0-rc.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.
|
@@ -2575,11 +2575,11 @@ class AccordionComponent {
|
|
|
2575
2575
|
}
|
|
2576
2576
|
}
|
|
2577
2577
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2578
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: AccordionComponent, isStandalone: true, selector: "lib-accordion", inputs: { id: "id", expanded: "expanded", size: "size", title: "title", showText: "showText", text: "text", showSlot: "showSlot", swapTemplate: "swapTemplate", mode: "mode", customIcon: "customIcon", radioName: "radioName", radioChecked: "radioChecked", isLoading: "isLoading" }, outputs: { expandedChange: "expandedChange", toggled: "toggled", radioCheckedChange: "radioCheckedChange" }, ngImport: i0, template: "<div\n class=\"c-accordion\"\n [class.c-accordion--expanded]=\"expanded\"\n [class.c-accordion--sm]=\"size === 'sm'\"\n [class.c-accordion--md]=\"size === 'md'\"\n [class.c-accordion--choice]=\"mode === 'choice'\"\n [class.c-accordion--loading]=\"isLoading\"\n>\n <div\n class=\"c-accordion__header\"\n [attr.role]=\"mode === 'choice' ? 'none' : 'button'\"\n [id]=\"id + '-header'\"\n [tabindex]=\"isLoading ? -1 : 0\"\n [attr.aria-expanded]=\"mode === 'choice' ? null : expanded\"\n [attr.aria-controls]=\"mode === 'choice' ? null : id + '-content'\"\n [attr.aria-disabled]=\"isLoading ? 'true' : null\"\n (click)=\"toggle()\"\n (keydown.enter)=\"toggle()\"\n (keydown.space)=\"toggle()\"\n >\n @if (isLoading) {\n <div class=\"c-accordion__skeleton\">\n <span aria-hidden=\"true\"></span>\n </div>\n } @else {\n <h3 class=\"c-accordion__title\" [id]=\"id + '-title'\">{{ title }}</h3>\n }\n\n <!-- Default arrow icons for accordion mode -->\n <span\n class=\"c-accordion__arrow\"\n *ngIf=\"mode === 'accordion' && !expanded\"\n [class.open]=\"expanded\"\n >\n <lib-icon name=\"caretdown-regular\" size=\"lg\" iconBefore />\n </span>\n <span\n class=\"c-accordion__arrow\"\n *ngIf=\"mode === 'accordion' && expanded\"\n [class.open]=\"expanded\"\n >\n <lib-icon name=\"caretup-regular\" size=\"lg\" iconBefore />\n </span>\n\n <!-- Custom icon for choice mode -->\n <span\n class=\"c-accordion__custom-icon\"\n *ngIf=\"mode === 'choice' && customIcon\"\n >\n <lib-icon [name]=\"customIcon\" size=\"lg\" iconBefore />\n </span>\n\n <!-- Radio input for choice mode -->\n <input\n *ngIf=\"mode === 'choice'\"\n type=\"radio\"\n class=\"c-accordion__radio\"\n [class.c-accordion__radio--checked]=\"radioChecked\"\n [id]=\"id + '-radio'\"\n [attr.aria-labelledby]=\"id + '-title'\"\n [name]=\"radioName || ''\"\n [checked]=\"radioChecked\"\n tabindex=\"-1\"\n />\n </div>\n\n <div\n class=\"c-accordion__content\"\n [class.c-accordion__content--visible]=\"expanded\"\n [id]=\"id + '-content'\"\n [attr.role]=\"mode === 'choice' ? 'region' : 'region'\"\n [attr.aria-labelledby]=\"mode === 'choice' ? id + '-radio' : id + '-header'\"\n >\n <div class=\"c-accordion__content-inner\">\n <ng-container *ngIf=\"swapTemplate; else normalContent\">\n <ng-container *ngTemplateOutlet=\"swapTemplate\"></ng-container>\n </ng-container>\n <ng-template #normalContent>\n <div class=\"c-accordion__text\" *ngIf=\"showText\">\n {{ text }}\n </div>\n @if (showSlot) {\n <ng-content></ng-content>\n }\n </ng-template>\n </div>\n </div>\n</div>\n", styles: [".c-accordion{display:flex;flex-direction:column;align-items:stretch;overflow:hidden;border-bottom:var(--size-border-width-sm) solid var(--color-core-border-soft, #d6e0df)}.c-accordion--choice .c-accordion__header{padding:var(--space-component-padding-lg, 1rem)}.c-accordion--loading .c-accordion__header{cursor:not-allowed;pointer-events:none}.c-accordion--sm .c-accordion__header{padding:var(--space-component-padding-md, .75rem) var(--space-component-padding-sm, .5rem)}.c-accordion--sm .c-accordion__title{font-family:var(--typography-label-sm-strong-family, Satoshi);font-size:var(--typography-label-sm-strong-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-strong-weight, 700);line-height:var(--typography-label-sm-strong-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-strong-letter-spacing, 0rem)}.c-accordion--sm .c-accordion__text{font-size:var(--typography-body-sm-size, .875rem);font-style:normal;font-weight:var(--typography-body-sm-weight, 400);line-height:var(--typography-body-sm-line-height, 1.25rem);letter-spacing:var(--typography-body-sm-letter-spacing, 0rem)}.c-accordion--sm .c-accordion__content-inner{padding:0rem var(--space-component-padding-sm, .5rem) 0rem var(--space-component-padding-sm, .5rem)}.c-accordion__content--visible .c-accordion--sm .c-accordion__content-inner{padding:0rem var(--space-component-padding-sm, .5rem) var(--space-component-padding-md, .75rem) var(--space-component-padding-sm, .5rem)}.c-accordion__header{display:flex;justify-content:space-between;align-items:center;background:var(--color-
|
|
2578
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: AccordionComponent, isStandalone: true, selector: "lib-accordion", inputs: { id: "id", expanded: "expanded", size: "size", title: "title", showText: "showText", text: "text", showSlot: "showSlot", swapTemplate: "swapTemplate", mode: "mode", customIcon: "customIcon", radioName: "radioName", radioChecked: "radioChecked", isLoading: "isLoading" }, outputs: { expandedChange: "expandedChange", toggled: "toggled", radioCheckedChange: "radioCheckedChange" }, ngImport: i0, template: "<div\n class=\"c-accordion\"\n [class.c-accordion--expanded]=\"expanded\"\n [class.c-accordion--sm]=\"size === 'sm'\"\n [class.c-accordion--md]=\"size === 'md'\"\n [class.c-accordion--choice]=\"mode === 'choice'\"\n [class.c-accordion--loading]=\"isLoading\"\n>\n <div\n class=\"c-accordion__header\"\n [attr.role]=\"mode === 'choice' ? 'none' : 'button'\"\n [id]=\"id + '-header'\"\n [tabindex]=\"isLoading ? -1 : 0\"\n [attr.aria-expanded]=\"mode === 'choice' ? null : expanded\"\n [attr.aria-controls]=\"mode === 'choice' ? null : id + '-content'\"\n [attr.aria-disabled]=\"isLoading ? 'true' : null\"\n (click)=\"toggle()\"\n (keydown.enter)=\"toggle()\"\n (keydown.space)=\"toggle()\"\n >\n @if (isLoading) {\n <div class=\"c-accordion__skeleton\">\n <span aria-hidden=\"true\"></span>\n </div>\n } @else {\n <h3 class=\"c-accordion__title\" [id]=\"id + '-title'\">{{ title }}</h3>\n }\n\n <!-- Default arrow icons for accordion mode -->\n <span\n class=\"c-accordion__arrow\"\n *ngIf=\"mode === 'accordion' && !expanded\"\n [class.open]=\"expanded\"\n >\n <lib-icon name=\"caretdown-regular\" size=\"lg\" iconBefore />\n </span>\n <span\n class=\"c-accordion__arrow\"\n *ngIf=\"mode === 'accordion' && expanded\"\n [class.open]=\"expanded\"\n >\n <lib-icon name=\"caretup-regular\" size=\"lg\" iconBefore />\n </span>\n\n <!-- Custom icon for choice mode -->\n <span\n class=\"c-accordion__custom-icon\"\n *ngIf=\"mode === 'choice' && customIcon\"\n >\n <lib-icon [name]=\"customIcon\" size=\"lg\" iconBefore />\n </span>\n\n <!-- Radio input for choice mode -->\n <input\n *ngIf=\"mode === 'choice'\"\n type=\"radio\"\n class=\"c-accordion__radio\"\n [class.c-accordion__radio--checked]=\"radioChecked\"\n [id]=\"id + '-radio'\"\n [attr.aria-labelledby]=\"id + '-title'\"\n [name]=\"radioName || ''\"\n [checked]=\"radioChecked\"\n tabindex=\"-1\"\n />\n </div>\n\n <div\n class=\"c-accordion__content\"\n [class.c-accordion__content--visible]=\"expanded\"\n [id]=\"id + '-content'\"\n [attr.role]=\"mode === 'choice' ? 'region' : 'region'\"\n [attr.aria-labelledby]=\"mode === 'choice' ? id + '-radio' : id + '-header'\"\n >\n <div class=\"c-accordion__content-inner\">\n <ng-container *ngIf=\"swapTemplate; else normalContent\">\n <ng-container *ngTemplateOutlet=\"swapTemplate\"></ng-container>\n </ng-container>\n <ng-template #normalContent>\n <div class=\"c-accordion__text\" *ngIf=\"showText\">\n {{ text }}\n </div>\n @if (showSlot) {\n <ng-content></ng-content>\n }\n </ng-template>\n </div>\n </div>\n</div>\n", styles: [".c-accordion{display:flex;flex-direction:column;align-items:stretch;overflow:hidden;border-bottom:var(--size-border-width-sm) solid var(--color-core-border-soft, #d6e0df)}.c-accordion--choice .c-accordion__header{padding:var(--space-component-padding-lg, 1rem)}.c-accordion--loading .c-accordion__header{cursor:not-allowed;pointer-events:none}.c-accordion--sm .c-accordion__header{padding:var(--space-component-padding-md, .75rem) var(--space-component-padding-sm, .5rem)}.c-accordion--sm .c-accordion__title{font-family:var(--typography-label-sm-strong-family, Satoshi);font-size:var(--typography-label-sm-strong-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-strong-weight, 700);line-height:var(--typography-label-sm-strong-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-strong-letter-spacing, 0rem)}.c-accordion--sm .c-accordion__text{font-size:var(--typography-body-sm-size, .875rem);font-style:normal;font-weight:var(--typography-body-sm-weight, 400);line-height:var(--typography-body-sm-line-height, 1.25rem);letter-spacing:var(--typography-body-sm-letter-spacing, 0rem)}.c-accordion--sm .c-accordion__content-inner{padding:0rem var(--space-component-padding-sm, .5rem) 0rem var(--space-component-padding-sm, .5rem)}.c-accordion__content--visible .c-accordion--sm .c-accordion__content-inner{padding:0rem var(--space-component-padding-sm, .5rem) var(--space-component-padding-md, .75rem) var(--space-component-padding-sm, .5rem)}.c-accordion__header{display:flex;justify-content:space-between;align-items:center;background:var(--color-action-neutral-background-default);padding:var(--space-component-padding-xl, 1.5rem) var(--space-component-padding-lg, 1rem);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .2s;align-self:stretch;box-sizing:border-box;gap:var(--space-component-gap-md, .5rem)}.c-accordion__header:hover{background:var(--color-action-neutral-background-hover, rgba(0, 0, 0, .04))}.c-accordion__header:focus:not(:focus-visible){outline:none;box-shadow:none}.c-accordion__header:focus-visible{box-shadow:var(--focus-inset);outline:none}.c-accordion__header:active,.c-accordion--expanded .c-accordion__header{background:var(--color-action-neutral-background-pressed, rgba(0, 0, 0, .06))}.c-accordion__title{flex:1;color:var(--color-core-content-default, #070707);font-family:var(--typography-label-lg-default-family, Satoshi);font-size:var(--typography-label-lg-strong-size, 1.125rem);font-style:normal;font-weight:var(--typography-label-lg-strong-weight, 700);line-height:var(--typography-label-lg-strong-line-height, 1.75rem);letter-spacing:var(--typography-label-lg-strong-letter-spacing, 0rem)}.c-accordion__content{display:grid;grid-template-rows:0fr;align-self:stretch;transition:grid-template-rows .3s ease-out,opacity .25s ease-out;opacity:0}.c-accordion__content--visible{grid-template-rows:1fr;opacity:1}.c-accordion__content-inner{overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-component-gap-md, .5rem);padding:0rem var(--space-component-padding-lg, 1rem) 0rem var(--space-component-padding-lg, 1rem);transition:padding .3s ease-out}.c-accordion__content--visible .c-accordion__content-inner{padding:0rem var(--space-component-padding-lg, 1rem) var(--space-component-padding-lg, 1rem) var(--space-component-padding-lg, 1rem)}.c-accordion__text{color:var(--color-core-content-soft, #535858);font-family:var(--typography-body-md-family, Satoshi);font-size:var(--typography-body-md-size, 1rem);font-style:normal;font-weight:var(--typography-body-md-weight, 400);line-height:var(--typography-body-md-line-height, 1.5rem);letter-spacing:var(--typography-body-md-letter-spacing, 0rem)}.c-accordion__arrow{display:contents}.c-accordion__radio{margin:0 var(--space-component-gap-sm, .25rem) 0 0;cursor:pointer;appearance:none!important;-webkit-appearance:none!important;-moz-appearance:none!important;width:1rem;height:1rem;border:2px solid var(--color-core-border-soft, #d6e0df);border-radius:50%;background-color:var(--color-textfield-background-default, #f7f7f7);position:relative;transition:all .2s ease;flex-shrink:0}.c-accordion__radio:hover{border-color:var(--color-core-border-default, #070707)}.c-accordion__radio:focus{outline:none;box-shadow:none}.c-accordion__radio:checked,.c-accordion__radio[checked=true],.c-accordion__radio[checked],.c-accordion__radio.c-accordion__radio--checked{background-color:var(--color-action-primary-selected-background-default, #070707)!important;border-color:var(--color-action-primary-selected-background-default, #070707)!important}.c-accordion__radio:checked:after,.c-accordion__radio[checked=true]:after,.c-accordion__radio[checked]:after,.c-accordion__radio.c-accordion__radio--checked:after{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:6px;height:6px;background-color:var(--color-action-primary-selected-content-default, #ffffff)!important;border-radius:50%}.c-accordion__custom-icon{display:contents}.c-accordion__skeleton{display:flex;flex-grow:1;align-items:center;height:28px;max-width:88px}.c-accordion__skeleton span{display:block;width:100%;height:8px;background-color:var(--color-effect-skeleton-default);border-radius:var(--size-border-radius-sm, .25rem)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "disabled", "name", "color"] }] });
|
|
2579
2579
|
}
|
|
2580
2580
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: AccordionComponent, decorators: [{
|
|
2581
2581
|
type: Component,
|
|
2582
|
-
args: [{ selector: 'lib-accordion', standalone: true, imports: [CommonModule, IconComponent], template: "<div\n class=\"c-accordion\"\n [class.c-accordion--expanded]=\"expanded\"\n [class.c-accordion--sm]=\"size === 'sm'\"\n [class.c-accordion--md]=\"size === 'md'\"\n [class.c-accordion--choice]=\"mode === 'choice'\"\n [class.c-accordion--loading]=\"isLoading\"\n>\n <div\n class=\"c-accordion__header\"\n [attr.role]=\"mode === 'choice' ? 'none' : 'button'\"\n [id]=\"id + '-header'\"\n [tabindex]=\"isLoading ? -1 : 0\"\n [attr.aria-expanded]=\"mode === 'choice' ? null : expanded\"\n [attr.aria-controls]=\"mode === 'choice' ? null : id + '-content'\"\n [attr.aria-disabled]=\"isLoading ? 'true' : null\"\n (click)=\"toggle()\"\n (keydown.enter)=\"toggle()\"\n (keydown.space)=\"toggle()\"\n >\n @if (isLoading) {\n <div class=\"c-accordion__skeleton\">\n <span aria-hidden=\"true\"></span>\n </div>\n } @else {\n <h3 class=\"c-accordion__title\" [id]=\"id + '-title'\">{{ title }}</h3>\n }\n\n <!-- Default arrow icons for accordion mode -->\n <span\n class=\"c-accordion__arrow\"\n *ngIf=\"mode === 'accordion' && !expanded\"\n [class.open]=\"expanded\"\n >\n <lib-icon name=\"caretdown-regular\" size=\"lg\" iconBefore />\n </span>\n <span\n class=\"c-accordion__arrow\"\n *ngIf=\"mode === 'accordion' && expanded\"\n [class.open]=\"expanded\"\n >\n <lib-icon name=\"caretup-regular\" size=\"lg\" iconBefore />\n </span>\n\n <!-- Custom icon for choice mode -->\n <span\n class=\"c-accordion__custom-icon\"\n *ngIf=\"mode === 'choice' && customIcon\"\n >\n <lib-icon [name]=\"customIcon\" size=\"lg\" iconBefore />\n </span>\n\n <!-- Radio input for choice mode -->\n <input\n *ngIf=\"mode === 'choice'\"\n type=\"radio\"\n class=\"c-accordion__radio\"\n [class.c-accordion__radio--checked]=\"radioChecked\"\n [id]=\"id + '-radio'\"\n [attr.aria-labelledby]=\"id + '-title'\"\n [name]=\"radioName || ''\"\n [checked]=\"radioChecked\"\n tabindex=\"-1\"\n />\n </div>\n\n <div\n class=\"c-accordion__content\"\n [class.c-accordion__content--visible]=\"expanded\"\n [id]=\"id + '-content'\"\n [attr.role]=\"mode === 'choice' ? 'region' : 'region'\"\n [attr.aria-labelledby]=\"mode === 'choice' ? id + '-radio' : id + '-header'\"\n >\n <div class=\"c-accordion__content-inner\">\n <ng-container *ngIf=\"swapTemplate; else normalContent\">\n <ng-container *ngTemplateOutlet=\"swapTemplate\"></ng-container>\n </ng-container>\n <ng-template #normalContent>\n <div class=\"c-accordion__text\" *ngIf=\"showText\">\n {{ text }}\n </div>\n @if (showSlot) {\n <ng-content></ng-content>\n }\n </ng-template>\n </div>\n </div>\n</div>\n", styles: [".c-accordion{display:flex;flex-direction:column;align-items:stretch;overflow:hidden;border-bottom:var(--size-border-width-sm) solid var(--color-core-border-soft, #d6e0df)}.c-accordion--choice .c-accordion__header{padding:var(--space-component-padding-lg, 1rem)}.c-accordion--loading .c-accordion__header{cursor:not-allowed;pointer-events:none}.c-accordion--sm .c-accordion__header{padding:var(--space-component-padding-md, .75rem) var(--space-component-padding-sm, .5rem)}.c-accordion--sm .c-accordion__title{font-family:var(--typography-label-sm-strong-family, Satoshi);font-size:var(--typography-label-sm-strong-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-strong-weight, 700);line-height:var(--typography-label-sm-strong-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-strong-letter-spacing, 0rem)}.c-accordion--sm .c-accordion__text{font-size:var(--typography-body-sm-size, .875rem);font-style:normal;font-weight:var(--typography-body-sm-weight, 400);line-height:var(--typography-body-sm-line-height, 1.25rem);letter-spacing:var(--typography-body-sm-letter-spacing, 0rem)}.c-accordion--sm .c-accordion__content-inner{padding:0rem var(--space-component-padding-sm, .5rem) 0rem var(--space-component-padding-sm, .5rem)}.c-accordion__content--visible .c-accordion--sm .c-accordion__content-inner{padding:0rem var(--space-component-padding-sm, .5rem) var(--space-component-padding-md, .75rem) var(--space-component-padding-sm, .5rem)}.c-accordion__header{display:flex;justify-content:space-between;align-items:center;background:var(--color-
|
|
2582
|
+
args: [{ selector: 'lib-accordion', standalone: true, imports: [CommonModule, IconComponent], template: "<div\n class=\"c-accordion\"\n [class.c-accordion--expanded]=\"expanded\"\n [class.c-accordion--sm]=\"size === 'sm'\"\n [class.c-accordion--md]=\"size === 'md'\"\n [class.c-accordion--choice]=\"mode === 'choice'\"\n [class.c-accordion--loading]=\"isLoading\"\n>\n <div\n class=\"c-accordion__header\"\n [attr.role]=\"mode === 'choice' ? 'none' : 'button'\"\n [id]=\"id + '-header'\"\n [tabindex]=\"isLoading ? -1 : 0\"\n [attr.aria-expanded]=\"mode === 'choice' ? null : expanded\"\n [attr.aria-controls]=\"mode === 'choice' ? null : id + '-content'\"\n [attr.aria-disabled]=\"isLoading ? 'true' : null\"\n (click)=\"toggle()\"\n (keydown.enter)=\"toggle()\"\n (keydown.space)=\"toggle()\"\n >\n @if (isLoading) {\n <div class=\"c-accordion__skeleton\">\n <span aria-hidden=\"true\"></span>\n </div>\n } @else {\n <h3 class=\"c-accordion__title\" [id]=\"id + '-title'\">{{ title }}</h3>\n }\n\n <!-- Default arrow icons for accordion mode -->\n <span\n class=\"c-accordion__arrow\"\n *ngIf=\"mode === 'accordion' && !expanded\"\n [class.open]=\"expanded\"\n >\n <lib-icon name=\"caretdown-regular\" size=\"lg\" iconBefore />\n </span>\n <span\n class=\"c-accordion__arrow\"\n *ngIf=\"mode === 'accordion' && expanded\"\n [class.open]=\"expanded\"\n >\n <lib-icon name=\"caretup-regular\" size=\"lg\" iconBefore />\n </span>\n\n <!-- Custom icon for choice mode -->\n <span\n class=\"c-accordion__custom-icon\"\n *ngIf=\"mode === 'choice' && customIcon\"\n >\n <lib-icon [name]=\"customIcon\" size=\"lg\" iconBefore />\n </span>\n\n <!-- Radio input for choice mode -->\n <input\n *ngIf=\"mode === 'choice'\"\n type=\"radio\"\n class=\"c-accordion__radio\"\n [class.c-accordion__radio--checked]=\"radioChecked\"\n [id]=\"id + '-radio'\"\n [attr.aria-labelledby]=\"id + '-title'\"\n [name]=\"radioName || ''\"\n [checked]=\"radioChecked\"\n tabindex=\"-1\"\n />\n </div>\n\n <div\n class=\"c-accordion__content\"\n [class.c-accordion__content--visible]=\"expanded\"\n [id]=\"id + '-content'\"\n [attr.role]=\"mode === 'choice' ? 'region' : 'region'\"\n [attr.aria-labelledby]=\"mode === 'choice' ? id + '-radio' : id + '-header'\"\n >\n <div class=\"c-accordion__content-inner\">\n <ng-container *ngIf=\"swapTemplate; else normalContent\">\n <ng-container *ngTemplateOutlet=\"swapTemplate\"></ng-container>\n </ng-container>\n <ng-template #normalContent>\n <div class=\"c-accordion__text\" *ngIf=\"showText\">\n {{ text }}\n </div>\n @if (showSlot) {\n <ng-content></ng-content>\n }\n </ng-template>\n </div>\n </div>\n</div>\n", styles: [".c-accordion{display:flex;flex-direction:column;align-items:stretch;overflow:hidden;border-bottom:var(--size-border-width-sm) solid var(--color-core-border-soft, #d6e0df)}.c-accordion--choice .c-accordion__header{padding:var(--space-component-padding-lg, 1rem)}.c-accordion--loading .c-accordion__header{cursor:not-allowed;pointer-events:none}.c-accordion--sm .c-accordion__header{padding:var(--space-component-padding-md, .75rem) var(--space-component-padding-sm, .5rem)}.c-accordion--sm .c-accordion__title{font-family:var(--typography-label-sm-strong-family, Satoshi);font-size:var(--typography-label-sm-strong-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-strong-weight, 700);line-height:var(--typography-label-sm-strong-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-strong-letter-spacing, 0rem)}.c-accordion--sm .c-accordion__text{font-size:var(--typography-body-sm-size, .875rem);font-style:normal;font-weight:var(--typography-body-sm-weight, 400);line-height:var(--typography-body-sm-line-height, 1.25rem);letter-spacing:var(--typography-body-sm-letter-spacing, 0rem)}.c-accordion--sm .c-accordion__content-inner{padding:0rem var(--space-component-padding-sm, .5rem) 0rem var(--space-component-padding-sm, .5rem)}.c-accordion__content--visible .c-accordion--sm .c-accordion__content-inner{padding:0rem var(--space-component-padding-sm, .5rem) var(--space-component-padding-md, .75rem) var(--space-component-padding-sm, .5rem)}.c-accordion__header{display:flex;justify-content:space-between;align-items:center;background:var(--color-action-neutral-background-default);padding:var(--space-component-padding-xl, 1.5rem) var(--space-component-padding-lg, 1rem);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .2s;align-self:stretch;box-sizing:border-box;gap:var(--space-component-gap-md, .5rem)}.c-accordion__header:hover{background:var(--color-action-neutral-background-hover, rgba(0, 0, 0, .04))}.c-accordion__header:focus:not(:focus-visible){outline:none;box-shadow:none}.c-accordion__header:focus-visible{box-shadow:var(--focus-inset);outline:none}.c-accordion__header:active,.c-accordion--expanded .c-accordion__header{background:var(--color-action-neutral-background-pressed, rgba(0, 0, 0, .06))}.c-accordion__title{flex:1;color:var(--color-core-content-default, #070707);font-family:var(--typography-label-lg-default-family, Satoshi);font-size:var(--typography-label-lg-strong-size, 1.125rem);font-style:normal;font-weight:var(--typography-label-lg-strong-weight, 700);line-height:var(--typography-label-lg-strong-line-height, 1.75rem);letter-spacing:var(--typography-label-lg-strong-letter-spacing, 0rem)}.c-accordion__content{display:grid;grid-template-rows:0fr;align-self:stretch;transition:grid-template-rows .3s ease-out,opacity .25s ease-out;opacity:0}.c-accordion__content--visible{grid-template-rows:1fr;opacity:1}.c-accordion__content-inner{overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-component-gap-md, .5rem);padding:0rem var(--space-component-padding-lg, 1rem) 0rem var(--space-component-padding-lg, 1rem);transition:padding .3s ease-out}.c-accordion__content--visible .c-accordion__content-inner{padding:0rem var(--space-component-padding-lg, 1rem) var(--space-component-padding-lg, 1rem) var(--space-component-padding-lg, 1rem)}.c-accordion__text{color:var(--color-core-content-soft, #535858);font-family:var(--typography-body-md-family, Satoshi);font-size:var(--typography-body-md-size, 1rem);font-style:normal;font-weight:var(--typography-body-md-weight, 400);line-height:var(--typography-body-md-line-height, 1.5rem);letter-spacing:var(--typography-body-md-letter-spacing, 0rem)}.c-accordion__arrow{display:contents}.c-accordion__radio{margin:0 var(--space-component-gap-sm, .25rem) 0 0;cursor:pointer;appearance:none!important;-webkit-appearance:none!important;-moz-appearance:none!important;width:1rem;height:1rem;border:2px solid var(--color-core-border-soft, #d6e0df);border-radius:50%;background-color:var(--color-textfield-background-default, #f7f7f7);position:relative;transition:all .2s ease;flex-shrink:0}.c-accordion__radio:hover{border-color:var(--color-core-border-default, #070707)}.c-accordion__radio:focus{outline:none;box-shadow:none}.c-accordion__radio:checked,.c-accordion__radio[checked=true],.c-accordion__radio[checked],.c-accordion__radio.c-accordion__radio--checked{background-color:var(--color-action-primary-selected-background-default, #070707)!important;border-color:var(--color-action-primary-selected-background-default, #070707)!important}.c-accordion__radio:checked:after,.c-accordion__radio[checked=true]:after,.c-accordion__radio[checked]:after,.c-accordion__radio.c-accordion__radio--checked:after{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:6px;height:6px;background-color:var(--color-action-primary-selected-content-default, #ffffff)!important;border-radius:50%}.c-accordion__custom-icon{display:contents}.c-accordion__skeleton{display:flex;flex-grow:1;align-items:center;height:28px;max-width:88px}.c-accordion__skeleton span{display:block;width:100%;height:8px;background-color:var(--color-effect-skeleton-default);border-radius:var(--size-border-radius-sm, .25rem)}\n"] }]
|
|
2583
2583
|
}], propDecorators: { id: [{
|
|
2584
2584
|
type: Input
|
|
2585
2585
|
}], expanded: [{
|
|
@@ -6447,6 +6447,7 @@ class SegmentedControlComponent {
|
|
|
6447
6447
|
selectedValue;
|
|
6448
6448
|
selectionChange = new EventEmitter();
|
|
6449
6449
|
fill = true;
|
|
6450
|
+
size = 'md';
|
|
6450
6451
|
/** Cuando el usuario hace click en un segmento */
|
|
6451
6452
|
onSelect(option) {
|
|
6452
6453
|
if (this.selectedValue !== option.value) {
|
|
@@ -6478,11 +6479,11 @@ class SegmentedControlComponent {
|
|
|
6478
6479
|
}
|
|
6479
6480
|
}
|
|
6480
6481
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SegmentedControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6481
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: SegmentedControlComponent, isStandalone: true, selector: "lib-segmented-control", inputs: { options: "options", selectedValue: "selectedValue", fill: "fill" }, outputs: { selectionChange: "selectionChange" }, host: { listeners: { "keydown": "onKeydown($event)" } }, ngImport: i0, template: "<div\n role=\"radiogroup\"\n [ngClass]=\"{
|
|
6482
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: SegmentedControlComponent, isStandalone: true, selector: "lib-segmented-control", inputs: { options: "options", selectedValue: "selectedValue", fill: "fill", size: "size" }, outputs: { selectionChange: "selectionChange" }, host: { listeners: { "keydown": "onKeydown($event)" } }, ngImport: i0, template: "<div\n role=\"radiogroup\"\n [ngClass]=\"{\n 'c-segmented-control': true,\n 'c-segmented-control--fill': fill,\n 'c-segmented-control--sm': size === 'sm'\n }\"\n>\n <label\n *ngFor=\"let option of options; let i = index\"\n role=\"radio\"\n [attr.aria-checked]=\"isSelected(option)\"\n [attr.tabindex]=\"isSelected(option) ? 0 : -1\"\n class=\"c-segmented-control__item\"\n (click)=\"onSelect(option)\"\n (keydown.enter)=\"onSelect(option)\"\n (keydown.space)=\"onSelect(option)\"\n >\n <!-- Input real, oculto -->\n <input\n type=\"radio\"\n [value]=\"option.value\"\n [checked]=\"isSelected(option)\"\n aria-hidden=\"true\"\n tabindex=\"-1\"\n hidden\n />\n <lib-icon\n *ngIf=\"option.iconName\"\n [name]=\"option.iconName\"\n size=\"sm\"\n [color]=\"getIconColor(option)\"\n ></lib-icon>\n {{ option.label }}\n </label>\n</div>\n", styles: [".c-segmented-control{display:inline-flex;overflow:hidden}.c-segmented-control--fill{width:100%}.c-segmented-control--fill .c-segmented-control__item{flex:1 0 0}.c-segmented-control__item{box-sizing:border-box;position:relative;min-width:88px;min-height:40px;padding:var(--space-component-padding-sm, 8px);cursor:pointer;-webkit-user-select:none;user-select:none;border:var(--size-border-width-sm) solid var(--color-action-primary-border-default);text-align:center;font-family:var(--typography-label-sm-default-family),sans-serif;font-weight:var(--typography-label-sm-default-weight);font-size:var(--typography-label-sm-default-size);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing);color:var(--color-action-primary-content-default);display:flex;align-items:center;justify-content:center;gap:var(--space-component-gap-xs)}.c-segmented-control__item lib-icon{flex-shrink:0}.c-segmented-control__item:not(:last-child){border-right:none}.c-segmented-control__item:first-child{border-radius:var(--size-border-radius-lg) 0 0 var(--size-border-radius-lg)}.c-segmented-control__item:last-child{border-radius:0 var(--size-border-radius-lg) var(--size-border-radius-lg) 0}.c-segmented-control__item:hover:not([aria-checked=true]){background-color:var(--color-action-primary-background-hover);color:var(--color-action-primary-content-hover)}.c-segmented-control__item:active{background-color:var(--color-action-primary-background-pressed);color:var(--color-action-primary-content-pressed)}.c-segmented-control__item:selected{background-color:var(--color-action-primary-background-selected);color:var(--color-action-primary-selected-content-default)}.c-segmented-control__item:focus-visible{box-shadow:var(--focus-inset);outline:none}.c-segmented-control__item[aria-checked=true]{background:var(--color-action-primary-selected-background-default);font-family:var(--typography-label-sm-strong-family),sans-serif;font-weight:var(--typography-label-sm-strong-weight);font-size:var(--typography-label-sm-strong-size);line-height:var(--typography-label-sm-strong-line-height);letter-spacing:var(--typography-label-sm-strong-letter-spacing);color:var(--color-action-primary-selected-content-default)}.c-segmented-control__item[aria-checked=true]:focus-visible{box-shadow:var(--focus-inset);outline:none}.c-segmented-control__item[aria-checked=true]:active{background-color:var(--color-action-primary-background-pressed);color:var(--color-action-primary-content-pressed)}.c-segmented-control--sm .c-segmented-control__item{min-height:32px;padding:var(--space-component-padding-xs, 4px) var(--space-component-padding-sm, 8px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "disabled", "name", "color"] }] });
|
|
6482
6483
|
}
|
|
6483
6484
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SegmentedControlComponent, decorators: [{
|
|
6484
6485
|
type: Component,
|
|
6485
|
-
args: [{ selector: 'lib-segmented-control', imports: [CommonModule, IconComponent], template: "<div\n role=\"radiogroup\"\n [ngClass]=\"{
|
|
6486
|
+
args: [{ selector: 'lib-segmented-control', imports: [CommonModule, IconComponent], template: "<div\n role=\"radiogroup\"\n [ngClass]=\"{\n 'c-segmented-control': true,\n 'c-segmented-control--fill': fill,\n 'c-segmented-control--sm': size === 'sm'\n }\"\n>\n <label\n *ngFor=\"let option of options; let i = index\"\n role=\"radio\"\n [attr.aria-checked]=\"isSelected(option)\"\n [attr.tabindex]=\"isSelected(option) ? 0 : -1\"\n class=\"c-segmented-control__item\"\n (click)=\"onSelect(option)\"\n (keydown.enter)=\"onSelect(option)\"\n (keydown.space)=\"onSelect(option)\"\n >\n <!-- Input real, oculto -->\n <input\n type=\"radio\"\n [value]=\"option.value\"\n [checked]=\"isSelected(option)\"\n aria-hidden=\"true\"\n tabindex=\"-1\"\n hidden\n />\n <lib-icon\n *ngIf=\"option.iconName\"\n [name]=\"option.iconName\"\n size=\"sm\"\n [color]=\"getIconColor(option)\"\n ></lib-icon>\n {{ option.label }}\n </label>\n</div>\n", styles: [".c-segmented-control{display:inline-flex;overflow:hidden}.c-segmented-control--fill{width:100%}.c-segmented-control--fill .c-segmented-control__item{flex:1 0 0}.c-segmented-control__item{box-sizing:border-box;position:relative;min-width:88px;min-height:40px;padding:var(--space-component-padding-sm, 8px);cursor:pointer;-webkit-user-select:none;user-select:none;border:var(--size-border-width-sm) solid var(--color-action-primary-border-default);text-align:center;font-family:var(--typography-label-sm-default-family),sans-serif;font-weight:var(--typography-label-sm-default-weight);font-size:var(--typography-label-sm-default-size);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing);color:var(--color-action-primary-content-default);display:flex;align-items:center;justify-content:center;gap:var(--space-component-gap-xs)}.c-segmented-control__item lib-icon{flex-shrink:0}.c-segmented-control__item:not(:last-child){border-right:none}.c-segmented-control__item:first-child{border-radius:var(--size-border-radius-lg) 0 0 var(--size-border-radius-lg)}.c-segmented-control__item:last-child{border-radius:0 var(--size-border-radius-lg) var(--size-border-radius-lg) 0}.c-segmented-control__item:hover:not([aria-checked=true]){background-color:var(--color-action-primary-background-hover);color:var(--color-action-primary-content-hover)}.c-segmented-control__item:active{background-color:var(--color-action-primary-background-pressed);color:var(--color-action-primary-content-pressed)}.c-segmented-control__item:selected{background-color:var(--color-action-primary-background-selected);color:var(--color-action-primary-selected-content-default)}.c-segmented-control__item:focus-visible{box-shadow:var(--focus-inset);outline:none}.c-segmented-control__item[aria-checked=true]{background:var(--color-action-primary-selected-background-default);font-family:var(--typography-label-sm-strong-family),sans-serif;font-weight:var(--typography-label-sm-strong-weight);font-size:var(--typography-label-sm-strong-size);line-height:var(--typography-label-sm-strong-line-height);letter-spacing:var(--typography-label-sm-strong-letter-spacing);color:var(--color-action-primary-selected-content-default)}.c-segmented-control__item[aria-checked=true]:focus-visible{box-shadow:var(--focus-inset);outline:none}.c-segmented-control__item[aria-checked=true]:active{background-color:var(--color-action-primary-background-pressed);color:var(--color-action-primary-content-pressed)}.c-segmented-control--sm .c-segmented-control__item{min-height:32px;padding:var(--space-component-padding-xs, 4px) var(--space-component-padding-sm, 8px)}\n"] }]
|
|
6486
6487
|
}], propDecorators: { options: [{
|
|
6487
6488
|
type: Input
|
|
6488
6489
|
}], selectedValue: [{
|
|
@@ -6491,6 +6492,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
6491
6492
|
type: Output
|
|
6492
6493
|
}], fill: [{
|
|
6493
6494
|
type: Input
|
|
6495
|
+
}], size: [{
|
|
6496
|
+
type: Input
|
|
6494
6497
|
}], onKeydown: [{
|
|
6495
6498
|
type: HostListener,
|
|
6496
6499
|
args: ['keydown', ['$event']]
|