@kirbydesign/designsystem 11.11.3-dev-e7cb27f → 12.0.0-dev-67d5287

package/fesm2022/kirbydesign-designsystem-accordion.mjs

@@ -1,138 +1,249 @@
-import * as i0 from '@angular/core';
-import { EventEmitter, ContentChildren, Output, Input, HostBinding, ChangeDetectionStrategy, Component, Directive, NgModule } from '@angular/core';
-import { startWith } from 'rxjs';
-import { trigger, state, style, transition, animate } from '@angular/animations';
-import { ListComponent } from '@kirbydesign/designsystem/list';
-import { IconComponent, IconModule } from '@kirbydesign/designsystem/icon';
-
-// Counter for generating unique element ids
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ContentChildren, Directive, EventEmitter, HostBinding, Input, NgModule, Output } from "@angular/core";
+import { startWith } from "rxjs";
+import { animate, state, style, transition, trigger } from "@angular/animations";
+import { ListComponent } from "@kirbydesign/designsystem/list";
+import { IconComponent, IconModule } from "@kirbydesign/designsystem/icon";
 let uniqueId = 0;
-class AccordionItemComponent {
-    constructor() {
-        this.hasList = false;
-        this.isExpanded = false;
-        this.isDisabled = false;
-        this.hasPadding = true;
-        this.toggle = new EventEmitter();
-        // IDs used for a11y labelling
-        this._titleId = `kirby-accordion-item-title-${++uniqueId}`;
-        this._contentId = `kirby-accordion-item-content-${uniqueId}`;
-    }
-    ngAfterContentInit() {
-        if (this.listChildren.length > 0) {
-            this.hasPadding = false;
-            this.hasList = true;
-            this.listChildren.forEach((child) => {
-                child.shape = 'none';
-            });
-        }
-    }
-    ngOnChanges() {
-        if (this.isDisabled) {
-            this.isExpanded = false;
-        }
-    }
-    getTitle() {
-        if (this.isDisabled && !!this.disabledTitle) {
-            return this.disabledTitle;
-        }
-        else {
-            return this.title;
-        }
-    }
-    _onToggleExpanded(event) {
-        event.preventDefault();
-        if (this.isDisabled)
-            return;
-        this.isExpanded = !this.isExpanded && !this.isDisabled;
-        this.toggle.emit(this.isExpanded);
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: AccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.23", type: AccordionItemComponent, isStandalone: true, selector: "kirby-accordion-item", inputs: { title: "title", isExpanded: "isExpanded", isDisabled: "isDisabled", disabledTitle: "disabledTitle", hasPadding: "hasPadding", headingLevel: "headingLevel" }, outputs: { toggle: "toggle" }, host: { properties: { "class.has-list": "this.hasList" } }, queries: [{ propertyName: "listChildren", predicate: ListComponent }], usesOnChanges: true, ngImport: i0, template: "<div class=\"content-layer\">\n  <div [attr.aria-level]=\"headingLevel\" [attr.role]=\"headingLevel ? 'heading' : null\">\n    <button\n      type=\"button\"\n      class=\"header\"\n      [attr.aria-expanded]=\"isExpanded\"\n      [attr.aria-controls]=\"_contentId\"\n      [id]=\"_titleId\"\n      [disabled]=\"isDisabled\"\n      (click)=\"_onToggleExpanded($event)\"\n    >\n      <span class=\"state-layer\" aria-hidden=\"true\"></span>\n      <div class=\"title\" [class.bold]=\"isExpanded\">{{ getTitle() }}</div>\n      <kirby-icon name=\"arrow-down\"></kirby-icon>\n    </button>\n  </div>\n  <div\n    class=\"content\"\n    role=\"region\"\n    [attr.aria-labelledby]=\"_titleId\"\n    [id]=\"_contentId\"\n    [@isExpanded]=\"!!isExpanded\"\n  >\n    <div class=\"content-body\" [class.padding]=\"hasPadding\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative}:host .content-layer{position:relative;z-index:var(--content-layer-z-index, var(--kirby-z-index-default))}:host .state-layer{position:absolute;inset:-0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:calc(var(--kirby-z-index-default) + 1)}:host .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:0;border-radius:inherit;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}:host{display:block;border-top:1px solid var(--kirby-medium);border-bottom:1px solid var(--kirby-medium);box-sizing:border-box}:host(.has-list){--kirby-item-background: transparent}:host(:first-of-type){--kirby-accordion-border-top-radius: var(--kirby-content-border-top-radius, 0)}:host(:last-of-type){--kirby-accordion-border-bottom-radius: var(--kirby-content-border-bottom-radius, 0)}:host(:last-of-type):has([aria-expanded=true]){--kirby-accordion-border-bottom-radius: 0}.header{border-radius:var(--kirby-accordion-border-top-radius, 0) var(--kirby-accordion-border-top-radius, 0) var(--kirby-accordion-border-bottom-radius, 0) var(--kirby-accordion-border-bottom-radius, 0)}.header:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset);outline:0}@media(hover:hover){.header:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}.header:active,.header.interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}.header{display:flex;align-items:center;gap:var(--kirby-spacing-xxs);padding:var(--kirby-spacing-s);-webkit-user-select:none;user-select:none;width:100%;border:none;outline:none;background:none;box-shadow:none;font-family:var(--kirby-font-family);text-align:start}.title{flex-grow:2;display:flex;font-size:var(--kirby-font-size-n)}.kirby-icon{transition:transform var(--kirby-transition-duration-quick)}.content{overflow:hidden;cursor:default}.content-body.padding{padding:0 var(--kirby-spacing-s) var(--kirby-spacing-s)}button[disabled]{pointer-events:none}button[disabled] .kirby-icon{color:var(--kirby-semi-dark)}button[disabled] .title{color:var(--kirby-text-color-semi-dark)}button{color:var(--kirby-text-color-black)}button[aria-expanded=true] .title{font-weight:var(--kirby-font-weight-bold)}button[aria-expanded=true] .kirby-icon{transform:rotate(180deg)}:host-context(kirby-accordion):not(:first-child){border-top:none}:host-context(kirby-card){border-color:var(--kirby-background-color)}:host-context(kirby-card):first-child{border-top:none}:host-context(kirby-card):last-child{border-bottom:none}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }], animations: [
-            trigger('isExpanded', [
-                state('true', style({ height: '*', visibility: 'visible' })),
-                state('false', style({ height: '0px', visibility: 'hidden' })),
-                transition('true <=> false', animate('0.2s')),
-            ]),
-        ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: AccordionItemComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'kirby-accordion-item', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
-                        trigger('isExpanded', [
-                            state('true', style({ height: '*', visibility: 'visible' })),
-                            state('false', style({ height: '0px', visibility: 'hidden' })),
-                            transition('true <=> false', animate('0.2s')),
-                        ]),
-                    ], imports: [IconComponent], template: "<div class=\"content-layer\">\n  <div [attr.aria-level]=\"headingLevel\" [attr.role]=\"headingLevel ? 'heading' : null\">\n    <button\n      type=\"button\"\n      class=\"header\"\n      [attr.aria-expanded]=\"isExpanded\"\n      [attr.aria-controls]=\"_contentId\"\n      [id]=\"_titleId\"\n      [disabled]=\"isDisabled\"\n      (click)=\"_onToggleExpanded($event)\"\n    >\n      <span class=\"state-layer\" aria-hidden=\"true\"></span>\n      <div class=\"title\" [class.bold]=\"isExpanded\">{{ getTitle() }}</div>\n      <kirby-icon name=\"arrow-down\"></kirby-icon>\n    </button>\n  </div>\n  <div\n    class=\"content\"\n    role=\"region\"\n    [attr.aria-labelledby]=\"_titleId\"\n    [id]=\"_contentId\"\n    [@isExpanded]=\"!!isExpanded\"\n  >\n    <div class=\"content-body\" [class.padding]=\"hasPadding\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative}:host .content-layer{position:relative;z-index:var(--content-layer-z-index, var(--kirby-z-index-default))}:host .state-layer{position:absolute;inset:-0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:calc(var(--kirby-z-index-default) + 1)}:host .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:0;border-radius:inherit;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}:host{display:block;border-top:1px solid var(--kirby-medium);border-bottom:1px solid var(--kirby-medium);box-sizing:border-box}:host(.has-list){--kirby-item-background: transparent}:host(:first-of-type){--kirby-accordion-border-top-radius: var(--kirby-content-border-top-radius, 0)}:host(:last-of-type){--kirby-accordion-border-bottom-radius: var(--kirby-content-border-bottom-radius, 0)}:host(:last-of-type):has([aria-expanded=true]){--kirby-accordion-border-bottom-radius: 0}.header{border-radius:var(--kirby-accordion-border-top-radius, 0) var(--kirby-accordion-border-top-radius, 0) var(--kirby-accordion-border-bottom-radius, 0) var(--kirby-accordion-border-bottom-radius, 0)}.header:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset);outline:0}@media(hover:hover){.header:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}.header:active,.header.interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}.header{display:flex;align-items:center;gap:var(--kirby-spacing-xxs);padding:var(--kirby-spacing-s);-webkit-user-select:none;user-select:none;width:100%;border:none;outline:none;background:none;box-shadow:none;font-family:var(--kirby-font-family);text-align:start}.title{flex-grow:2;display:flex;font-size:var(--kirby-font-size-n)}.kirby-icon{transition:transform var(--kirby-transition-duration-quick)}.content{overflow:hidden;cursor:default}.content-body.padding{padding:0 var(--kirby-spacing-s) var(--kirby-spacing-s)}button[disabled]{pointer-events:none}button[disabled] .kirby-icon{color:var(--kirby-semi-dark)}button[disabled] .title{color:var(--kirby-text-color-semi-dark)}button{color:var(--kirby-text-color-black)}button[aria-expanded=true] .title{font-weight:var(--kirby-font-weight-bold)}button[aria-expanded=true] .kirby-icon{transform:rotate(180deg)}:host-context(kirby-accordion):not(:first-child){border-top:none}:host-context(kirby-card){border-color:var(--kirby-background-color)}:host-context(kirby-card):first-child{border-top:none}:host-context(kirby-card):last-child{border-bottom:none}\n"] }]
-        }], propDecorators: { hasList: [{
-                type: HostBinding,
-                args: ['class.has-list']
-            }], title: [{
-                type: Input
-            }], isExpanded: [{
-                type: Input
-            }], isDisabled: [{
-                type: Input
-            }], disabledTitle: [{
-                type: Input
-            }], hasPadding: [{
-                type: Input
-            }], headingLevel: [{
-                type: Input
-            }], toggle: [{
-                type: Output
-            }], listChildren: [{
-                type: ContentChildren,
-                args: [ListComponent]
-            }] } });
-
-class AccordionDirective {
-    ngAfterContentInit() {
-        this.accordionItems.changes.pipe(startWith(0)).subscribe(() => {
-            this.setHeadingLevels();
-        });
-    }
-    setHeadingLevels() {
-        if (this.accordionItems.length > 0 && this.headingLevel) {
-            this.accordionItems.forEach((child) => {
-                child.headingLevel = this.headingLevel;
-            });
-        }
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: AccordionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.23", type: AccordionDirective, isStandalone: true, selector: "[kirbyAccordion], kirby-accordion", inputs: { headingLevel: "headingLevel" }, queries: [{ propertyName: "accordionItems", predicate: AccordionItemComponent }], exportAs: ["kirby-accordion"], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: AccordionDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kirbyAccordion], kirby-accordion',
-                    exportAs: 'kirby-accordion',
-                }]
-        }], propDecorators: { headingLevel: [{
-                type: Input
-            }], accordionItems: [{
-                type: ContentChildren,
-                args: [AccordionItemComponent]
-            }] } });
-
+var AccordionItemComponent = class AccordionItemComponent {
+	constructor() {
+		this.hasList = false;
+		this.isExpanded = false;
+		this.isDisabled = false;
+		this.hasPadding = true;
+		this.toggle = new EventEmitter();
+		this._titleId = `kirby-accordion-item-title-${++uniqueId}`;
+		this._contentId = `kirby-accordion-item-content-${uniqueId}`;
+	}
+	ngAfterContentInit() {
+		if (this.listChildren.length > 0) {
+			this.hasPadding = false;
+			this.hasList = true;
+			this.listChildren.forEach((child) => {
+				child.shape = "none";
+			});
+		}
+	}
+	ngOnChanges() {
+		if (this.isDisabled) this.isExpanded = false;
+	}
+	getTitle() {
+		if (this.isDisabled && !!this.disabledTitle) return this.disabledTitle;
+		else return this.title;
+	}
+	_onToggleExpanded(event) {
+		event.preventDefault();
+		if (this.isDisabled) return;
+		this.isExpanded = !this.isExpanded && !this.isDisabled;
+		this.toggle.emit(this.isExpanded);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: AccordionItemComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "14.0.0",
+			version: "22.2.2",
+			type: AccordionItemComponent,
+			isStandalone: true,
+			selector: "kirby-accordion-item",
+			inputs: {
+				title: "title",
+				isExpanded: "isExpanded",
+				isDisabled: "isDisabled",
+				disabledTitle: "disabledTitle",
+				hasPadding: "hasPadding",
+				headingLevel: "headingLevel"
+			},
+			outputs: { toggle: "toggle" },
+			host: { properties: { "class.has-list": "this.hasList" } },
+			queries: [{
+				propertyName: "listChildren",
+				predicate: ListComponent
+			}],
+			usesOnChanges: true,
+			ngImport: i0,
+			template: "<div [attr.aria-level]=\"headingLevel\" [attr.role]=\"headingLevel ? 'heading' : null\">\n  <button\n    type=\"button\"\n    class=\"header\"\n    [attr.aria-expanded]=\"isExpanded\"\n    [attr.aria-controls]=\"_contentId\"\n    [id]=\"_titleId\"\n    [disabled]=\"isDisabled\"\n    (click)=\"_onToggleExpanded($event)\"\n  >\n    <div class=\"title\" [class.bold]=\"isExpanded\">{{ getTitle() }}</div>\n    <kirby-icon name=\"arrow-down\"></kirby-icon>\n  </button>\n</div>\n<div\n  class=\"content\"\n  role=\"region\"\n  [attr.aria-labelledby]=\"_titleId\"\n  [id]=\"_contentId\"\n  [@isExpanded]=\"!!isExpanded\"\n>\n  <div class=\"content-body\" [class.padding]=\"hasPadding\">\n    <ng-content></ng-content>\n  </div>\n</div>\n",
+			styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:block;border-top:1px solid var(--kirby-color-border-base-quiet);border-bottom:1px solid var(--kirby-color-border-base-quiet);box-sizing:border-box}:host(.has-list){--kirby-item-background: transparent}:host(:first-of-type){--kirby-accordion-border-top-radius: var(--kirby-content-border-top-radius, 0)}:host(:last-of-type){--kirby-accordion-border-bottom-radius: var(--kirby-content-border-bottom-radius, 0)}:host(:last-of-type):has([aria-expanded=true]){--kirby-accordion-border-bottom-radius: 0}@media(hover:hover){:host:has(.header:hover){background-color:var(--kirby-color-fill-base-hover);color:var(--kirby-color-content-base-hover);border-color:var(--kirby-color-border-base-quiet-hover)}}:host:has(.header:active){background-color:var(--kirby-color-fill-base-active);color:var(--kirby-color-content-base-active);border-color:var(--kirby-color-border-base-quiet-active)}.header{border-radius:var(--kirby-accordion-border-top-radius, 0) var(--kirby-accordion-border-top-radius, 0) var(--kirby-accordion-border-bottom-radius, 0) var(--kirby-accordion-border-bottom-radius, 0)}.header:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset);outline:0}.header{display:flex;align-items:center;gap:var(--kirby-spacing-xxs);padding:var(--kirby-spacing-s);-webkit-user-select:none;user-select:none;width:100%;border:none;outline:none;background:none;box-shadow:none;font-family:var(--kirby-font-family);text-align:start;cursor:pointer}.title{flex-grow:2;display:flex;font-size:var(--kirby-font-size-n)}.kirby-icon{transition:transform var(--kirby-transition-duration-quick)}.content{overflow:hidden;cursor:default}.content-body.padding{padding:0 var(--kirby-spacing-s) var(--kirby-spacing-s)}button[disabled]{pointer-events:none;opacity:.4}button{color:var(--kirby-color-content-base)}button[aria-expanded=true] .title{font-weight:var(--kirby-font-weight-bold)}button[aria-expanded=true] .kirby-icon{transform:rotate(180deg)}:host-context(kirby-accordion):not(:first-child){border-top:none}:host-context(kirby-card):first-child{border-top:none}:host-context(kirby-card):last-child{border-bottom:none}\n"],
+			dependencies: [{
+				kind: "component",
+				type: IconComponent,
+				selector: "kirby-icon",
+				inputs: ["size", "name"]
+			}],
+			animations: [trigger("isExpanded", [
+				state("true", style({
+					height: "*",
+					visibility: "visible"
+				})),
+				state("false", style({
+					height: "0px",
+					visibility: "hidden"
+				})),
+				transition("true <=> false", animate("0.2s"))
+			])],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: AccordionItemComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "kirby-accordion-item",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			animations: [trigger("isExpanded", [
+				state("true", style({
+					height: "*",
+					visibility: "visible"
+				})),
+				state("false", style({
+					height: "0px",
+					visibility: "hidden"
+				})),
+				transition("true <=> false", animate("0.2s"))
+			])],
+			imports: [IconComponent],
+			template: "<div [attr.aria-level]=\"headingLevel\" [attr.role]=\"headingLevel ? 'heading' : null\">\n  <button\n    type=\"button\"\n    class=\"header\"\n    [attr.aria-expanded]=\"isExpanded\"\n    [attr.aria-controls]=\"_contentId\"\n    [id]=\"_titleId\"\n    [disabled]=\"isDisabled\"\n    (click)=\"_onToggleExpanded($event)\"\n  >\n    <div class=\"title\" [class.bold]=\"isExpanded\">{{ getTitle() }}</div>\n    <kirby-icon name=\"arrow-down\"></kirby-icon>\n  </button>\n</div>\n<div\n  class=\"content\"\n  role=\"region\"\n  [attr.aria-labelledby]=\"_titleId\"\n  [id]=\"_contentId\"\n  [@isExpanded]=\"!!isExpanded\"\n>\n  <div class=\"content-body\" [class.padding]=\"hasPadding\">\n    <ng-content></ng-content>\n  </div>\n</div>\n",
+			styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:block;border-top:1px solid var(--kirby-color-border-base-quiet);border-bottom:1px solid var(--kirby-color-border-base-quiet);box-sizing:border-box}:host(.has-list){--kirby-item-background: transparent}:host(:first-of-type){--kirby-accordion-border-top-radius: var(--kirby-content-border-top-radius, 0)}:host(:last-of-type){--kirby-accordion-border-bottom-radius: var(--kirby-content-border-bottom-radius, 0)}:host(:last-of-type):has([aria-expanded=true]){--kirby-accordion-border-bottom-radius: 0}@media(hover:hover){:host:has(.header:hover){background-color:var(--kirby-color-fill-base-hover);color:var(--kirby-color-content-base-hover);border-color:var(--kirby-color-border-base-quiet-hover)}}:host:has(.header:active){background-color:var(--kirby-color-fill-base-active);color:var(--kirby-color-content-base-active);border-color:var(--kirby-color-border-base-quiet-active)}.header{border-radius:var(--kirby-accordion-border-top-radius, 0) var(--kirby-accordion-border-top-radius, 0) var(--kirby-accordion-border-bottom-radius, 0) var(--kirby-accordion-border-bottom-radius, 0)}.header:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset);outline:0}.header{display:flex;align-items:center;gap:var(--kirby-spacing-xxs);padding:var(--kirby-spacing-s);-webkit-user-select:none;user-select:none;width:100%;border:none;outline:none;background:none;box-shadow:none;font-family:var(--kirby-font-family);text-align:start;cursor:pointer}.title{flex-grow:2;display:flex;font-size:var(--kirby-font-size-n)}.kirby-icon{transition:transform var(--kirby-transition-duration-quick)}.content{overflow:hidden;cursor:default}.content-body.padding{padding:0 var(--kirby-spacing-s) var(--kirby-spacing-s)}button[disabled]{pointer-events:none;opacity:.4}button{color:var(--kirby-color-content-base)}button[aria-expanded=true] .title{font-weight:var(--kirby-font-weight-bold)}button[aria-expanded=true] .kirby-icon{transform:rotate(180deg)}:host-context(kirby-accordion):not(:first-child){border-top:none}:host-context(kirby-card):first-child{border-top:none}:host-context(kirby-card):last-child{border-bottom:none}\n"]
+		}]
+	}],
+	propDecorators: {
+		hasList: [{
+			type: HostBinding,
+			args: ["class.has-list"]
+		}],
+		title: [{ type: Input }],
+		isExpanded: [{ type: Input }],
+		isDisabled: [{ type: Input }],
+		disabledTitle: [{ type: Input }],
+		hasPadding: [{ type: Input }],
+		headingLevel: [{ type: Input }],
+		toggle: [{ type: Output }],
+		listChildren: [{
+			type: ContentChildren,
+			args: [ListComponent]
+		}]
+	}
+});
+var AccordionDirective = class AccordionDirective {
+	ngAfterContentInit() {
+		this.accordionItems.changes.pipe(startWith(0)).subscribe(() => {
+			this.setHeadingLevels();
+		});
+	}
+	setHeadingLevels() {
+		if (this.accordionItems.length > 0 && this.headingLevel) this.accordionItems.forEach((child) => {
+			child.headingLevel = this.headingLevel;
+		});
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: AccordionDirective,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "14.0.0",
+			version: "22.2.2",
+			type: AccordionDirective,
+			isStandalone: true,
+			selector: "[kirbyAccordion], kirby-accordion",
+			inputs: { headingLevel: "headingLevel" },
+			queries: [{
+				propertyName: "accordionItems",
+				predicate: AccordionItemComponent
+			}],
+			exportAs: ["kirby-accordion"],
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: AccordionDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[kirbyAccordion], kirby-accordion",
+			exportAs: "kirby-accordion"
+		}]
+	}],
+	propDecorators: {
+		headingLevel: [{ type: Input }],
+		accordionItems: [{
+			type: ContentChildren,
+			args: [AccordionItemComponent]
+		}]
+	}
+});
 const imports = [AccordionDirective, AccordionItemComponent];
-class AccordionModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: AccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.23", ngImport: i0, type: AccordionModule, imports: [IconModule, AccordionDirective, AccordionItemComponent], exports: [AccordionDirective, AccordionItemComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: AccordionModule, imports: [IconModule, AccordionItemComponent] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: AccordionModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [IconModule, ...imports],
-                    exports: [...imports],
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+var AccordionModule = class AccordionModule {
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: AccordionModule,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.NgModule
+		});
+	}
+	static {
+		this.ɵmod = i0.ɵɵngDeclareNgModule({
+			minVersion: "14.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: AccordionModule,
+			imports: [
+				IconModule,
+				AccordionDirective,
+				AccordionItemComponent
+			],
+			exports: [AccordionDirective, AccordionItemComponent]
+		});
+	}
+	static {
+		this.ɵinj = i0.ɵɵngDeclareInjector({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: AccordionModule,
+			imports: [IconModule, AccordionItemComponent]
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: AccordionModule,
+	decorators: [{
+		type: NgModule,
+		args: [{
+			imports: [IconModule, ...imports],
+			exports: [...imports]
+		}]
+	}]
+});
 export { AccordionDirective, AccordionItemComponent, AccordionModule };
-//# sourceMappingURL=kirbydesign-designsystem-accordion.mjs.map
+
+//# sourceMappingURL=kirbydesign-designsystem-accordion.mjs.map

package/fesm2022/kirbydesign-designsystem-accordion.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"kirbydesign-designsystem-accordion.mjs","sources":["../../accordion/src/accordion-item.component.ts","../../accordion/src/accordion-item.component.html","../../accordion/src/accordion.directive.ts","../../accordion/src/accordion.module.ts","../../accordion/src/kirbydesign-designsystem-accordion.ts"],"sourcesContent":["import { animate, state, style, transition, trigger } from '@angular/animations';\nimport {\n  AfterContentInit,\n  ChangeDetectionStrategy,\n  Component,\n  ContentChildren,\n  EventEmitter,\n  HostBinding,\n  Input,\n  OnChanges,\n  Output,\n  QueryList,\n} from '@angular/core';\nimport { ListComponent } from '@kirbydesign/designsystem/list';\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\n\n// Counter for generating unique element ids\nlet uniqueId = 0;\n\n@Component({\n  selector: 'kirby-accordion-item',\n  templateUrl: './accordion-item.component.html',\n  styleUrls: ['./accordion-item.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  animations: [\n    trigger('isExpanded', [\n      state('true', style({ height: '*', visibility: 'visible' })),\n      state('false', style({ height: '0px', visibility: 'hidden' })),\n      transition('true <=> false', animate('0.2s')),\n    ]),\n  ],\n  imports: [IconComponent],\n})\nexport class AccordionItemComponent implements OnChanges, AfterContentInit {\n  @HostBinding('class.has-list') hasList: boolean = false;\n  @Input() title: string;\n  @Input() isExpanded: boolean = false;\n  @Input() isDisabled: boolean = false;\n  @Input() disabledTitle: string;\n  @Input() hasPadding: boolean = true;\n  @Input() headingLevel: 1 | 2 | 3 | 4 | 5 | 6;\n  @Output() toggle: EventEmitter<boolean> = new EventEmitter<boolean>();\n\n  @ContentChildren(ListComponent) listChildren: QueryList<ListComponent>;\n\n  ngAfterContentInit(): void {\n    if (this.listChildren.length > 0) {\n      this.hasPadding = false;\n      this.hasList = true;\n      this.listChildren.forEach((child) => {\n        child.shape = 'none';\n      });\n    }\n  }\n\n  ngOnChanges(): void {\n    if (this.isDisabled) {\n      this.isExpanded = false;\n    }\n  }\n\n  getTitle() {\n    if (this.isDisabled && !!this.disabledTitle) {\n      return this.disabledTitle;\n    } else {\n      return this.title;\n    }\n  }\n\n  _onToggleExpanded(event: UIEvent) {\n    event.preventDefault();\n    if (this.isDisabled) return;\n\n    this.isExpanded = !this.isExpanded && !this.isDisabled;\n    this.toggle.emit(this.isExpanded);\n  }\n\n  // IDs used for a11y labelling\n  _titleId = `kirby-accordion-item-title-${++uniqueId}`;\n  _contentId = `kirby-accordion-item-content-${uniqueId}`;\n}\n","<div class=\"content-layer\">\n  <div [attr.aria-level]=\"headingLevel\" [attr.role]=\"headingLevel ? 'heading' : null\">\n    <button\n      type=\"button\"\n      class=\"header\"\n      [attr.aria-expanded]=\"isExpanded\"\n      [attr.aria-controls]=\"_contentId\"\n      [id]=\"_titleId\"\n      [disabled]=\"isDisabled\"\n      (click)=\"_onToggleExpanded($event)\"\n    >\n      <span class=\"state-layer\" aria-hidden=\"true\"></span>\n      <div class=\"title\" [class.bold]=\"isExpanded\">{{ getTitle() }}</div>\n      <kirby-icon name=\"arrow-down\"></kirby-icon>\n    </button>\n  </div>\n  <div\n    class=\"content\"\n    role=\"region\"\n    [attr.aria-labelledby]=\"_titleId\"\n    [id]=\"_contentId\"\n    [@isExpanded]=\"!!isExpanded\"\n  >\n    <div class=\"content-body\" [class.padding]=\"hasPadding\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n","import { AfterContentInit, ContentChildren, Directive, Input, QueryList } from '@angular/core';\n\nimport { startWith } from 'rxjs';\nimport { AccordionItemComponent } from './accordion-item.component';\n\n@Directive({\n  selector: '[kirbyAccordion], kirby-accordion',\n  exportAs: 'kirby-accordion',\n})\nexport class AccordionDirective implements AfterContentInit {\n  @Input() headingLevel: 1 | 2 | 3 | 4 | 5 | 6;\n  @ContentChildren(AccordionItemComponent) accordionItems: QueryList<AccordionItemComponent>;\n\n  ngAfterContentInit(): void {\n    this.accordionItems.changes.pipe(startWith(0)).subscribe(() => {\n      this.setHeadingLevels();\n    });\n  }\n\n  private setHeadingLevels(): void {\n    if (this.accordionItems.length > 0 && this.headingLevel) {\n      this.accordionItems.forEach((child) => {\n        child.headingLevel = this.headingLevel;\n      });\n    }\n  }\n}\n","import { NgModule } from '@angular/core';\nimport { IconModule } from '@kirbydesign/designsystem/icon';\n\nimport { AccordionItemComponent } from './accordion-item.component';\nimport { AccordionDirective } from './accordion.directive';\n\nconst imports = [AccordionDirective, AccordionItemComponent];\n\n@NgModule({\n  imports: [IconModule, ...imports],\n  exports: [...imports],\n})\nexport class AccordionModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"kirbydesign-designsystem-accordion.mjs","names":[],"sources":["../../accordion/src/accordion-item.component.ts","../../accordion/src/accordion-item.component.html","../../accordion/src/accordion.directive.ts","../../accordion/src/accordion.module.ts"],"sourcesContent":["import { animate, state, style, transition, trigger } from '@angular/animations';\nimport {\n  AfterContentInit,\n  ChangeDetectionStrategy,\n  Component,\n  ContentChildren,\n  EventEmitter,\n  HostBinding,\n  Input,\n  OnChanges,\n  Output,\n  QueryList,\n} from '@angular/core';\nimport { ListComponent } from '@kirbydesign/designsystem/list';\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\n\n// Counter for generating unique element ids\nlet uniqueId = 0;\n\n@Component({\n  selector: 'kirby-accordion-item',\n  templateUrl: './accordion-item.component.html',\n  styleUrls: ['./accordion-item.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  animations: [\n    trigger('isExpanded', [\n      state('true', style({ height: '*', visibility: 'visible' })),\n      state('false', style({ height: '0px', visibility: 'hidden' })),\n      transition('true <=> false', animate('0.2s')),\n    ]),\n  ],\n  imports: [IconComponent],\n})\nexport class AccordionItemComponent implements OnChanges, AfterContentInit {\n  @HostBinding('class.has-list') hasList: boolean = false;\n  @Input() title: string;\n  @Input() isExpanded: boolean = false;\n  @Input() isDisabled: boolean = false;\n  @Input() disabledTitle: string;\n  @Input() hasPadding: boolean = true;\n  @Input() headingLevel: 1 | 2 | 3 | 4 | 5 | 6;\n  @Output() toggle: EventEmitter<boolean> = new EventEmitter<boolean>();\n\n  @ContentChildren(ListComponent) listChildren: QueryList<ListComponent>;\n\n  ngAfterContentInit(): void {\n    if (this.listChildren.length > 0) {\n      this.hasPadding = false;\n      this.hasList = true;\n      this.listChildren.forEach((child) => {\n        child.shape = 'none';\n      });\n    }\n  }\n\n  ngOnChanges(): void {\n    if (this.isDisabled) {\n      this.isExpanded = false;\n    }\n  }\n\n  getTitle() {\n    if (this.isDisabled && !!this.disabledTitle) {\n      return this.disabledTitle;\n    } else {\n      return this.title;\n    }\n  }\n\n  _onToggleExpanded(event: UIEvent) {\n    event.preventDefault();\n    if (this.isDisabled) return;\n\n    this.isExpanded = !this.isExpanded && !this.isDisabled;\n    this.toggle.emit(this.isExpanded);\n  }\n\n  // IDs used for a11y labelling\n  _titleId = `kirby-accordion-item-title-${++uniqueId}`;\n  _contentId = `kirby-accordion-item-content-${uniqueId}`;\n}\n","<div [attr.aria-level]=\"headingLevel\" [attr.role]=\"headingLevel ? 'heading' : null\">\n  <button\n    type=\"button\"\n    class=\"header\"\n    [attr.aria-expanded]=\"isExpanded\"\n    [attr.aria-controls]=\"_contentId\"\n    [id]=\"_titleId\"\n    [disabled]=\"isDisabled\"\n    (click)=\"_onToggleExpanded($event)\"\n  >\n    <div class=\"title\" [class.bold]=\"isExpanded\">{{ getTitle() }}</div>\n    <kirby-icon name=\"arrow-down\"></kirby-icon>\n  </button>\n</div>\n<div\n  class=\"content\"\n  role=\"region\"\n  [attr.aria-labelledby]=\"_titleId\"\n  [id]=\"_contentId\"\n  [@isExpanded]=\"!!isExpanded\"\n>\n  <div class=\"content-body\" [class.padding]=\"hasPadding\">\n    <ng-content></ng-content>\n  </div>\n</div>\n","import { AfterContentInit, ContentChildren, Directive, Input, QueryList } from '@angular/core';\n\nimport { startWith } from 'rxjs';\nimport { AccordionItemComponent } from './accordion-item.component';\n\n@Directive({\n  selector: '[kirbyAccordion], kirby-accordion',\n  exportAs: 'kirby-accordion',\n})\nexport class AccordionDirective implements AfterContentInit {\n  @Input() headingLevel: 1 | 2 | 3 | 4 | 5 | 6;\n  @ContentChildren(AccordionItemComponent) accordionItems: QueryList<AccordionItemComponent>;\n\n  ngAfterContentInit(): void {\n    this.accordionItems.changes.pipe(startWith(0)).subscribe(() => {\n      this.setHeadingLevels();\n    });\n  }\n\n  private setHeadingLevels(): void {\n    if (this.accordionItems.length > 0 && this.headingLevel) {\n      this.accordionItems.forEach((child) => {\n        child.headingLevel = this.headingLevel;\n      });\n    }\n  }\n}\n","import { NgModule } from '@angular/core';\nimport { IconModule } from '@kirbydesign/designsystem/icon';\n\nimport { AccordionItemComponent } from './accordion-item.component';\nimport { AccordionDirective } from './accordion.directive';\n\nconst imports = [AccordionDirective, AccordionItemComponent];\n\n@NgModule({\n  imports: [IconModule, ...imports],\n  exports: [...imports],\n})\nexport class AccordionModule {}\n"],"mappings":";;;;;;AAiBA,IAAI,WAAW;AAgBf,IAAa,yBAAb,MAAa,uBAAsB;CAdnC,cAAA;EAeiC,KAAA,UAAmB;EAEzC,KAAA,aAAsB;EACtB,KAAA,aAAsB;EAEtB,KAAA,aAAsB;EAErB,KAAA,SAAgC,IAAI,aAAY;EAqC1D,KAAA,WAAW,8BAA8B,EAAE;EAC3C,KAAA,aAAa,gCAAgC;CAC9C;CAnCC,qBAAkB;EAChB,IAAI,KAAK,aAAa,SAAS,GAAG;GAChC,KAAK,aAAa;GAClB,KAAK,UAAU;GACf,KAAK,aAAa,SAAS,UAAS;IAClC,MAAM,QAAQ;GAChB,CAAC;EACH;CACF;CAEA,cAAW;EACT,IAAI,KAAK,YACP,KAAK,aAAa;CAEtB;CAEA,WAAQ;EACN,IAAI,KAAK,cAAc,CAAC,CAAC,KAAK,eAC5B,OAAO,KAAK;OAEZ,OAAO,KAAK;CAEhB;CAEA,kBAAkB,OAAc;EAC9B,MAAM,eAAc;EACpB,IAAI,KAAK,YAAY;EAErB,KAAK,aAAa,CAAC,KAAK,cAAc,CAAC,KAAK;EAC5C,KAAK,OAAO,KAAK,KAAK,UAAU;CAClC;CA1CW;EAAA,KAAA,OAAA,GAAA,mBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,UAAA;GAAA,MAAA;GAAsB,MAAA,CAAA;GAAA,QAAA,GAAA,gBAAA;EAAA,CAAA;CAAA;CAAtB;EAAA,KAAA,OAAA,GAAA,qBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,MAAA;GAAsB,cAAA;GAAA,UAAA;GAAA,QAAA;IAAA,OAAA;IAAA,YAAA;IAAA,YAAA;IAAA,eAAA;IAAA,YAAA;IAAA,cAAA;GAAA;GAAA,SAAA,EAAA,QAAA,SAAA;GAAA,MAAA,EAAA,YAAA,EAAA,kBAAA,eAAA,EAAA;GAAA,SAAA,CAAA;IAAA,cAAA;IAAA,WAUhB;GAAa,CAAA;GAAA,eAAA;GAAA,UAAA;GAAA,UC3ChC;GAyBA,QAAA,CAAA,kuEAAA;GAAA,cAAA,CAAA;IAAA,MAAA;IAAA,MDMY;IAAa,UAAA;IAAA,QAAA,CAAA,QAAA,MAAA;GAAA,CAAA;GAAA,YAPX,CACV,QAAQ,cAAc;IACpB,MAAM,QAAQ,MAAM;KAAE,QAAQ;KAAK,YAAY;IAAS,CAAE,CAAC;IAC3D,MAAM,SAAS,MAAM;KAAE,QAAQ;KAAO,YAAY;IAAQ,CAAE,CAAC;IAC7D,WAAW,kBAAkB,QAAQ,MAAM,CAAC;GAC7C,CAAA,CACF;GAAA,iBAAA,GAAA,wBAAA;EAAA,CAAA;CAAA;;AAGU,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAsB,YAAA,CAAA;EAdlC,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAsB,iBAGf,wBAAwB;GAAM,YACnC,CACV,QAAQ,cAAc;IACpB,MAAM,QAAQ,MAAM;KAAE,QAAQ;KAAK,YAAY;IAAS,CAAE,CAAC;IAC3D,MAAM,SAAS,MAAM;KAAE,QAAQ;KAAO,YAAY;IAAQ,CAAE,CAAC;IAC7D,WAAW,kBAAkB,QAAQ,MAAM,CAAC;GAC7C,CAAA,CACF;GAAA,SACQ,CAAC,aAAa;GAAC,UAAA;GAAA,QAAA,CAAA,kuEAAA;EAAA,CAAA;;;;GAGvB,MAAA;GAAY,MAAA,CAAA,gBAAgB;;EAC5B,OAAA,CAAA,EAAA,MAAA,MAAA,CAAA;EACA,YAAA,CAAA,EAAA,MAAA,MAAA,CAAA;EACA,YAAA,CAAA,EAAA,MAAA,MAAA,CAAA;EACA,eAAA,CAAA,EAAA,MAAA,MAAA,CAAA;EACA,YAAA,CAAA,EAAA,MAAA,MAAA,CAAA;EACA,cAAA,CAAA,EAAA,MAAA,MAAA,CAAA;EACA,QAAA,CAAA,EAAA,MAAA,OAAA,CAAA;;GAEA,MAAA;GAAgB,MAAA,CAAA,aAAa;;;;AElChC,IAAa,qBAAb,MAAa,mBAAkB;CAI7B,qBAAkB;EAChB,KAAK,eAAe,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,CAAC,gBAAe;GAC5D,KAAK,iBAAgB;EACvB,CAAC;CACH;CAEQ,mBAAgB;EACtB,IAAI,KAAK,eAAe,SAAS,KAAK,KAAK,cACzC,KAAK,eAAe,SAAS,UAAS;GACpC,MAAM,eAAe,KAAK;EAC5B,CAAC;CAEL;CAhBW;EAAA,KAAA,OAAA,GAAA,mBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,UAAA;GAAA,MAAA;GAAkB,MAAA,CAAA;GAAA,QAAA,GAAA,gBAAA;EAAA,CAAA;CAAA;CAAlB;EAAA,KAAA,OAAA,GAAA,qBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,MAAA;GAAkB,cAAA;GAAA,UAAA;GAAA,QAAA,EAAA,cAAA,eAAA;GAAA,SAAA,CAAA;IAAA,cAAA;IAAA,WAEZ;GAAsB,CAAA;GAAA,UAAA,CAAA,iBAAA;GAAA,UAAA;EAAA,CAAA;CAAA;;AAF5B,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAkB,YAAA,CAAA;EAJ9B,MAAA;EAAU,MAAA,CAAA;GACT,UAAU;GACV,UAAU;EACX,CAAA;;;EAEE,cAAA,CAAA,EAAA,MAAA,MAAA,CAAA;;GACA,MAAA;GAAgB,MAAA,CAAA,sBAAsB;;;;ACLzC,MAAM,UAAU,CAAC,oBAAoB,sBAAsB;AAM3D,IAAa,kBAAb,MAAa,gBAAe;CAAf;EAAA,KAAA,OAAA,GAAA,mBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,UAAA;GAAA,MAAA;GAAe,MAAA,CAAA;GAAA,QAAA,GAAA,gBAAA;EAAA,CAAA;CAAA;CAAf;EAAA,KAAA,OAAA,GAAA,oBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,UAAA;GAAA,MAAA;GAAe,SAAA;IAHhB;IAHK;IAAoB;GAAsB;GAAA,SAAA,CAA1C,oBAAoB,sBAAsB;EAAA,CAAA;CAAA;CAM9C;EAAA,KAAA,OAAA,GAAA,oBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,UAAA;GAAA,MAAA;GAAe,SAAA,CAHhB,YAHyB,sBAAsB;EAAA,CAAA;CAAA;;AAM9C,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAe,YAAA,CAAA;EAJ3B,MAAA;EAAS,MAAA,CAAA;GACR,SAAS,CAAC,YAAY,GAAG,OAAO;GAChC,SAAS,CAAC,GAAG,OAAO;EACrB,CAAA"}