2021-11-09 18:06:01 +03:00
|
|
|
<KoenigCard
|
2021-11-18 21:55:39 +03:00
|
|
|
@env={{@env}}
|
2021-12-02 22:22:46 +03:00
|
|
|
@class={{concat (kg-style "container-card") " kg-toggle-card-container"}}
|
2021-11-09 18:06:01 +03:00
|
|
|
@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 --}}
|
|
|
|
|
2021-12-02 22:22:46 +03:00
|
|
|
<div class="kg-toggle-card">
|
2021-11-10 21:43:58 +03:00
|
|
|
<KoenigBasicHtmlInput
|
2021-11-10 11:13:53 +03:00
|
|
|
@html={{@payload.heading}}
|
2021-12-03 12:43:20 +03:00
|
|
|
@placeholder="Toggle header"
|
2021-12-02 22:22:46 +03:00
|
|
|
@class="w-100 fw4 bn bg-transparent kg-toggle-card-heading"
|
2021-11-10 21:43:58 +03:00
|
|
|
@name="toggle-heading"
|
2021-11-11 14:18:51 +03:00
|
|
|
@defaultTag="h4"
|
2021-11-10 11:13:53 +03:00
|
|
|
@onChange={{action "setHeadingText"}}
|
|
|
|
@onFocus={{action (mut this.isFocused) true}}
|
|
|
|
@onBlur={{action (mut this.isFocused) false}}
|
2021-12-02 23:08:52 +03:00
|
|
|
@didCreateEditor={{this.registerHeadingEditor}}
|
2021-11-10 11:13:53 +03:00
|
|
|
/>
|
2021-11-11 19:35:29 +03:00
|
|
|
<KoenigBasicHtmlTextarea
|
2021-11-10 11:13:53 +03:00
|
|
|
@html={{@payload.content}}
|
2021-12-03 12:43:20 +03:00
|
|
|
@placeholder="Collapsible content"
|
2021-12-02 22:22:46 +03:00
|
|
|
@class="w-100 bn bg-transparent kg-toggle-card-content"
|
2021-11-10 11:13:53 +03:00
|
|
|
@onChange={{action "setContentText"}}
|
|
|
|
@onFocus={{action (mut this.isFocused) true}}
|
|
|
|
@onBlur={{action (mut this.isFocused) false}}
|
2021-12-02 23:08:52 +03:00
|
|
|
@didCreateEditor={{action "registerContentEditor"}}
|
2021-11-10 11:13:53 +03:00
|
|
|
/>
|
2021-11-09 18:06:01 +03:00
|
|
|
</div>
|
|
|
|
{{else}}
|
|
|
|
|
|
|
|
{{!-- rendered (non-edit) mode view --}}
|
|
|
|
|
2021-12-02 22:22:46 +03:00
|
|
|
<div class="kg-toggle-card">
|
|
|
|
<div class="kg-toggle-card-header">
|
|
|
|
<div class="kg-toggle-card-heading">
|
2021-11-12 14:01:28 +03:00
|
|
|
<h4>{{{this.formattedHeading}}}</h4>
|
|
|
|
</div>
|
2021-12-02 22:22:46 +03:00
|
|
|
<div class="kg-toggle-card-arrow-container">
|
|
|
|
<div class="kg-toggle-card-arrow">
|
2021-11-16 23:14:06 +03:00
|
|
|
{{svg-jar "koenig/kg-toggle-card-open-arrow"}}
|
|
|
|
</div>
|
|
|
|
</div>
|
2021-11-12 14:01:28 +03:00
|
|
|
</div>
|
2021-12-02 22:22:46 +03:00
|
|
|
<div class="kg-toggle-card-content">
|
2021-11-12 14:01:28 +03:00
|
|
|
{{{this.formattedContent}}}
|
2021-11-11 17:05:49 +03:00
|
|
|
</div>
|
2021-11-12 14:01:28 +03:00
|
|
|
|
2021-11-09 18:06:01 +03:00
|
|
|
</div>
|
|
|
|
|
|
|
|
{{/if}}
|
|
|
|
</KoenigCard>
|