<KoenigCard @env={{@env}} @class={{concat (kg-style "container-card") " kg-toggle-card-container"}} @headerOffset={{@headerOffset}} @toolbar={{this.toolbar}} @payload={{@payload}} @isSelected={{@isSelected}} @isEditing={{@isEditing}} @selectCard={{@selectCard}} @deselectCard={{@deselectCard}} @editCard={{@editCard}} @hasEditMode={{true}} @saveCard={{@saveCard}} @saveAsSnippet={{@saveAsSnippet}} @onLeaveEdit={{this.leaveEditMode}} @addParagraphAfterCard={{@addParagraphAfterCard}} @moveCursorToPrevSection={{@moveCursorToPrevSection}} @moveCursorToNextSection={{@moveCursorToNextSection}} @editor={{@editor}} {{did-insert this.registerElement}} as |card| > {{#if @isEditing}} {{!-- edit mode view --}} <div class="kg-toggle-card"> <div class="kg-toggle-card-header"> <KoenigBasicHtmlInput @html={{@payload.heading}} @placeholder="Toggle header" @class="kg-toggle-card-heading" @name="toggle-heading" @defaultTag="h4" @onChange={{action "setHeadingText"}} @onFocus={{action (mut this.isFocused) true}} @onBlur={{action (mut this.isFocused) false}} @didCreateEditor={{this.registerHeadingEditor}} /> <div class="kg-toggle-card-arrow-container"> <div class="kg-toggle-card-arrow"> {{svg-jar "koenig/kg-toggle-card-open-arrow"}} </div> </div> </div> <KoenigBasicHtmlTextarea @html={{@payload.content}} @placeholder="Collapsible content" @class="w-100 bn bg-transparent kg-toggle-card-content" @onChange={{action "setContentText"}} @onFocus={{action (mut this.isFocused) true}} @onBlur={{action (mut this.isFocused) false}} @didCreateEditor={{action "registerContentEditor"}} /> </div> {{else}} {{!-- rendered (non-edit) mode view --}} <div class="kg-toggle-card"> <div class="kg-toggle-card-header"> <div class="kg-toggle-card-heading"> <h4>{{{this.formattedHeading}}}</h4> </div> <div class="kg-toggle-card-arrow-container"> <div class="kg-toggle-card-arrow"> {{svg-jar "koenig/kg-toggle-card-open-arrow"}} </div> </div> </div> <div class="kg-toggle-card-content"> {{{this.formattedContent}}} </div> </div> {{/if}} </KoenigCard>