@crowdfarming/oliva-ds 1.25.0 → 1.26.0-rc.1
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.
|
@@ -2278,24 +2278,43 @@ class AccordionComponent {
|
|
|
2278
2278
|
text = '';
|
|
2279
2279
|
showSlot = false;
|
|
2280
2280
|
swapTemplate;
|
|
2281
|
+
mode = 'accordion';
|
|
2282
|
+
customIcon;
|
|
2283
|
+
radioName;
|
|
2284
|
+
radioChecked = false;
|
|
2281
2285
|
expandedChange = new EventEmitter();
|
|
2282
2286
|
toggled = new EventEmitter();
|
|
2287
|
+
radioChange = new EventEmitter();
|
|
2283
2288
|
ngOnInit() {
|
|
2284
2289
|
if (!this.id) {
|
|
2285
2290
|
this.id = 'accordion-' + Math.random().toString(36).substr(2, 9);
|
|
2286
2291
|
}
|
|
2292
|
+
if (this.mode === 'choice' && !this.radioName) {
|
|
2293
|
+
this.radioName = 'accordion-choice-' + this.id;
|
|
2294
|
+
}
|
|
2287
2295
|
}
|
|
2288
2296
|
toggle() {
|
|
2289
|
-
this.
|
|
2290
|
-
|
|
2291
|
-
|
|
2297
|
+
if (this.mode === 'choice') {
|
|
2298
|
+
if (!this.expanded) {
|
|
2299
|
+
this.expanded = true;
|
|
2300
|
+
this.radioChecked = true;
|
|
2301
|
+
this.expandedChange.emit(this.expanded);
|
|
2302
|
+
this.toggled.emit(this.expanded);
|
|
2303
|
+
this.radioChange.emit(this.radioChecked);
|
|
2304
|
+
}
|
|
2305
|
+
}
|
|
2306
|
+
else {
|
|
2307
|
+
this.expanded = !this.expanded;
|
|
2308
|
+
this.expandedChange.emit(this.expanded);
|
|
2309
|
+
this.toggled.emit(this.expanded);
|
|
2310
|
+
}
|
|
2292
2311
|
}
|
|
2293
2312
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2294
|
-
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" }, outputs: { expandedChange: "expandedChange", toggled: "toggled" }, 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>\n <div\n class=\"c-accordion__header\"\n role=\"button\"\n [id]=\"id + '-header'\"\n tabindex=\"0\"\n [attr.aria-expanded]=\"expanded\"\n [attr.aria-controls]=\"id + '-content'\"\n (click)=\"toggle()\"\n (keydown.enter)=\"toggle()\"\n (keydown.space)=\"toggle()\"\n >\n <span class=\"c-accordion__title\">{{ title }}</span>\n <span class=\"c-accordion__arrow\" *ngIf=\"!expanded\" [class.open]=\"expanded\">\n <lib-icon name=\"caretdown-regular\" size=\"lg\" iconBefore />\n </span>\n <span class=\"c-accordion__arrow\" *ngIf=\"expanded\" [class.open]=\"expanded\">\n <lib-icon name=\"caretup-regular\" size=\"lg\" iconBefore />\n </span>\n </div>\n\n <div\n class=\"c-accordion__content\"\n *ngIf=\"expanded\"\n [id]=\"id + '-content'\"\n role=\"region\"\n [attr.aria-labelledby]=\"id + '-header'\"\n >\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", 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--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{display:flex;padding:0rem var(--space-component-padding-sm, .5rem) var(--space-component-padding-md, .75rem) var(--space-component-padding-sm, .5rem);flex-direction:column;align-items:flex-start;gap:var(--space-component-gap-md, .5rem);align-self:stretch}.c-accordion__header{display:flex;justify-content:space-between;align-items:center;background:var(--color-textfield-background-default, #f7f7f7);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-visible{box-shadow:var(--focus-inset);outline:none}.c-accordion__header:active{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:flex;padding:0rem var(--space-component-padding-lg, 1rem) var(--space-component-padding-lg, 1rem) var(--space-component-padding-lg, 1rem);flex-direction:column;align-items:flex-start;gap:var(--space-component-gap-md, .5rem);align-self:stretch}.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}\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", "name", "color"] }] });
|
|
2313
|
+
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" }, outputs: { expandedChange: "expandedChange", toggled: "toggled", radioChange: "radioChange" }, 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>\n <div\n class=\"c-accordion__header\"\n [attr.role]=\"mode === 'choice' ? 'none' : 'button'\"\n [id]=\"id + '-header'\"\n [tabindex]=\"0\"\n [attr.aria-expanded]=\"mode === 'choice' ? null : expanded\"\n [attr.aria-controls]=\"mode === 'choice' ? null : id + '-content'\"\n (click)=\"toggle()\"\n (keydown.enter)=\"toggle()\"\n (keydown.space)=\"toggle()\"\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 [name]=\"radioName || ''\"\n [checked]=\"radioChecked\"\n tabindex=\"-1\"\n (click)=\"radioChange.emit(true)\"\n />\n\n <span class=\"c-accordion__title\">{{ title }}</span>\n\n <!-- Default arrow icons for accordion mode -->\n <span class=\"c-accordion__arrow\" *ngIf=\"mode === 'accordion' && !expanded\" [class.open]=\"expanded\">\n <lib-icon name=\"caretdown-regular\" size=\"lg\" iconBefore />\n </span>\n <span class=\"c-accordion__arrow\" *ngIf=\"mode === 'accordion' && expanded\" [class.open]=\"expanded\">\n <lib-icon name=\"caretup-regular\" size=\"lg\" iconBefore />\n </span>\n\n <!-- Custom icon for choice mode -->\n <span class=\"c-accordion__custom-icon\" *ngIf=\"mode === 'choice' && customIcon\">\n <lib-icon [name]=\"customIcon\" size=\"lg\" iconBefore />\n </span>\n </div>\n\n <div\n class=\"c-accordion__content\"\n *ngIf=\"expanded\"\n [id]=\"id + '-content'\"\n [attr.role]=\"mode === 'choice' ? 'region' : 'region'\"\n [attr.aria-labelledby]=\"mode === 'choice' ? id + '-radio' : id + '-header'\"\n >\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", 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--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{display:flex;padding:0rem var(--space-component-padding-sm, .5rem) var(--space-component-padding-md, .75rem) var(--space-component-padding-sm, .5rem);flex-direction:column;align-items:flex-start;gap:var(--space-component-gap-md, .5rem);align-self:stretch}.c-accordion__header{display:flex;justify-content:space-between;align-items:center;background:var(--color-textfield-background-default, #f7f7f7);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{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:flex;padding:0rem var(--space-component-padding-lg, 1rem) var(--space-component-padding-lg, 1rem) var(--space-component-padding-lg, 1rem);flex-direction:column;align-items:flex-start;gap:var(--space-component-gap-md, .5rem);align-self:stretch}.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}\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", "name", "color"] }] });
|
|
2295
2314
|
}
|
|
2296
2315
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: AccordionComponent, decorators: [{
|
|
2297
2316
|
type: Component,
|
|
2298
|
-
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>\n <div\n class=\"c-accordion__header\"\n role=\"button\"\n [id]=\"id + '-header'\"\n tabindex=\"0\"\n [attr.aria-expanded]=\"expanded\"\n [attr.aria-controls]=\"id + '-content'\"\n (click)=\"toggle()\"\n (keydown.enter)=\"toggle()\"\n (keydown.space)=\"toggle()\"\n >\n <span class=\"c-accordion__title\">{{ title }}</span>\n <span class=\"c-accordion__arrow\" *ngIf=\"!expanded\" [class.open]=\"expanded\">\n <lib-icon name=\"caretdown-regular\" size=\"lg\" iconBefore />\n </span>\n <span class=\"c-accordion__arrow\" *ngIf=\"expanded\" [class.open]=\"expanded\">\n <lib-icon name=\"caretup-regular\" size=\"lg\" iconBefore />\n </span>\n </div>\n\n <div\n class=\"c-accordion__content\"\n *ngIf=\"expanded\"\n [id]=\"id + '-content'\"\n role=\"region\"\n [attr.aria-labelledby]=\"id + '-header'\"\n >\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", 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--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{display:flex;padding:0rem var(--space-component-padding-sm, .5rem) var(--space-component-padding-md, .75rem) var(--space-component-padding-sm, .5rem);flex-direction:column;align-items:flex-start;gap:var(--space-component-gap-md, .5rem);align-self:stretch}.c-accordion__header{display:flex;justify-content:space-between;align-items:center;background:var(--color-textfield-background-default, #f7f7f7);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-visible{box-shadow:var(--focus-inset);outline:none}.c-accordion__header:active{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:flex;padding:0rem var(--space-component-padding-lg, 1rem) var(--space-component-padding-lg, 1rem) var(--space-component-padding-lg, 1rem);flex-direction:column;align-items:flex-start;gap:var(--space-component-gap-md, .5rem);align-self:stretch}.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}\n"] }]
|
|
2317
|
+
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>\n <div\n class=\"c-accordion__header\"\n [attr.role]=\"mode === 'choice' ? 'none' : 'button'\"\n [id]=\"id + '-header'\"\n [tabindex]=\"0\"\n [attr.aria-expanded]=\"mode === 'choice' ? null : expanded\"\n [attr.aria-controls]=\"mode === 'choice' ? null : id + '-content'\"\n (click)=\"toggle()\"\n (keydown.enter)=\"toggle()\"\n (keydown.space)=\"toggle()\"\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 [name]=\"radioName || ''\"\n [checked]=\"radioChecked\"\n tabindex=\"-1\"\n (click)=\"radioChange.emit(true)\"\n />\n\n <span class=\"c-accordion__title\">{{ title }}</span>\n\n <!-- Default arrow icons for accordion mode -->\n <span class=\"c-accordion__arrow\" *ngIf=\"mode === 'accordion' && !expanded\" [class.open]=\"expanded\">\n <lib-icon name=\"caretdown-regular\" size=\"lg\" iconBefore />\n </span>\n <span class=\"c-accordion__arrow\" *ngIf=\"mode === 'accordion' && expanded\" [class.open]=\"expanded\">\n <lib-icon name=\"caretup-regular\" size=\"lg\" iconBefore />\n </span>\n\n <!-- Custom icon for choice mode -->\n <span class=\"c-accordion__custom-icon\" *ngIf=\"mode === 'choice' && customIcon\">\n <lib-icon [name]=\"customIcon\" size=\"lg\" iconBefore />\n </span>\n </div>\n\n <div\n class=\"c-accordion__content\"\n *ngIf=\"expanded\"\n [id]=\"id + '-content'\"\n [attr.role]=\"mode === 'choice' ? 'region' : 'region'\"\n [attr.aria-labelledby]=\"mode === 'choice' ? id + '-radio' : id + '-header'\"\n >\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", 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--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{display:flex;padding:0rem var(--space-component-padding-sm, .5rem) var(--space-component-padding-md, .75rem) var(--space-component-padding-sm, .5rem);flex-direction:column;align-items:flex-start;gap:var(--space-component-gap-md, .5rem);align-self:stretch}.c-accordion__header{display:flex;justify-content:space-between;align-items:center;background:var(--color-textfield-background-default, #f7f7f7);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{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:flex;padding:0rem var(--space-component-padding-lg, 1rem) var(--space-component-padding-lg, 1rem) var(--space-component-padding-lg, 1rem);flex-direction:column;align-items:flex-start;gap:var(--space-component-gap-md, .5rem);align-self:stretch}.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}\n"] }]
|
|
2299
2318
|
}], propDecorators: { id: [{
|
|
2300
2319
|
type: Input
|
|
2301
2320
|
}], expanded: [{
|
|
@@ -2312,10 +2331,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
2312
2331
|
type: Input
|
|
2313
2332
|
}], swapTemplate: [{
|
|
2314
2333
|
type: Input
|
|
2334
|
+
}], mode: [{
|
|
2335
|
+
type: Input
|
|
2336
|
+
}], customIcon: [{
|
|
2337
|
+
type: Input
|
|
2338
|
+
}], radioName: [{
|
|
2339
|
+
type: Input
|
|
2340
|
+
}], radioChecked: [{
|
|
2341
|
+
type: Input
|
|
2315
2342
|
}], expandedChange: [{
|
|
2316
2343
|
type: Output
|
|
2317
2344
|
}], toggled: [{
|
|
2318
2345
|
type: Output
|
|
2346
|
+
}], radioChange: [{
|
|
2347
|
+
type: Output
|
|
2319
2348
|
}] } });
|
|
2320
2349
|
|
|
2321
2350
|
class SpinnerComponent {
|