Ghost/ghost/admin/lib/koenig-editor/addon/components/koenig-card-email-cta.hbs

<KoenigCard
    @icon={{"koenig/card-indicator-email"}}
    @class={{concat (kg-style "container-card") " kg-email-card kg-email-cta-card mih10 miw-100 relative"}}
    @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}}
        {{#if this.feature.cardSettingsPanel}}
        <div class="gh-email-cta-segment-indicator">
            <p>{{capitalize this.selectedSegment.name}}</p>
        </div>
        {{else}}
        <div class="kg-card-help">
            <p>
                <span>
                    Only visible to
                    <PowerSelect
                        @options={{this.segments}}
                        @selected={{this.selectedSegment}}
                        @onChange={{this.setSegment}}
                        @searchEnabled={{false}}
                        @triggerComponent="gh-power-select/trigger"
                        @triggerClass="ember-power-select-inline"
                        @dropdownClass="gh-member-segment-select-dropdown"
                        as |segment|
                    >
                        {{segment.name}}
                    </PowerSelect>
                    when delivered by email.
                    This card will not be published on your site.
                </span>
            </p>
        </div>
        {{/if}}

        {{#if @payload.showDividers}}<hr class="border-top {{unless this.feature.cardSettingsPanel "edit-mode"}}">{{/if}}

        <div class="{{if (eq @payload.alignment "center") "tc"}}">
            <KoenigTextReplacementHtmlInput
                @html={{@payload.html}}
                @placeholder="Email only text... (optional)"
                @autofocus={{true}}
                @class="miw-100 bn bg-transparent"
                @onChange={{this.updateHtml}}
                @onFocus={{fn (mut this.contentFocused) true}}
                @onBlur={{fn (mut this.contentFocused) false}}
                @didCreateEditor={{this.registerEditor}}
            />

            {{#if @payload.showButton}}
                <button type="button" class="gh-btn gh-btn-accent" disabled={{not @payload.buttonText}}>
                    {{#if @payload.buttonText}}
                        <span>{{@payload.buttonText}}</span>
                    {{else}}
                        <span>Add button text</span>
                    {{/if}}
                </button>
            {{/if}}
        </div>

        {{#if @payload.showDividers}}<hr class="border-bottom">{{/if}}

        {{#if this.feature.cardSettingsPanel}}
            <KoenigSettingsPanel>
                <div class="kg-settings-panel-control">
                    <div class="kg-settings-panel-control-label">Visibility</div>
                    <div class="kg-settings-panel-control-input">
                        <PowerSelect
                            @options={{this.segments}}
                            @selected={{this.selectedSegment}}
                            @onChange={{this.setSegment}}
                            @searchEnabled={{false}}
                            @triggerComponent="gh-power-select/trigger"
                            @dropdownClass="gh-member-segment-select-dropdown"
                            as |segment|
                        >
                            <span class="ttc">{{segment.name}}</span>
                        </PowerSelect>
                    </div>
                    <p class="kg-settings-panel-control-info">
                        Visible for this audience when delivered by email. This card is not published on your site.
                    </p>
                </div>

                <hr class="kg-settings-panel-divider">

                <div class="kg-settings-panel-control kg-settings-panel-control-horizontal">
                    <div class="kg-settings-panel-control-label">Content alignment</div>
                    <div class="kg-settings-panel-control-input">
                        <div class="gh-btn-group icons">
                            <button type="button" title="Left-align content" class="gh-btn gh-btn-icon {{if (eq @payload.alignment "left") "gh-btn-group-selected"}}" {{on "click" (fn this.setAlignment "left")}}><span>{{svg-jar "align-left"}}</span></button>
                            <button type="button" title="Center-align content" class="gh-btn gh-btn-icon {{if (eq @payload.alignment "center") "gh-btn-group-selected"}}" {{on "click" (fn this.setAlignment "center")}}><span>{{svg-jar "align-center"}}</span></button>
                        </div>
                    </div>
                </div>

                <div class="kg-settings-panel-control kg-settings-panel-control-horizontal">
                    <label class="kg-settings-panel-control-label" for="divider-toggle">Separators</label>
                    <div class="kg-settings-panel-control-input">
                        <div class="for-switch x-small">
                            <label class="switch">
                                <input type="checkbox" class="gh-input" id="divider-toggle" checked={{@payload.showDividers}} {{on "input" this.toggleDividers}}>
                                <span class="input-toggle-component mt1"></span>
                            </label>
                        </div>
                    </div>
                </div>

                <hr class="kg-settings-panel-divider">

                <div class="kg-settings-panel-control kg-settings-panel-control-horizontal">
                    <label class="kg-settings-panel-control-label" for="button-toggle">Button</label>
                    <div class="kg-settings-panel-control-input">
                        <div class="for-switch x-small">
                            <label class="switch">
                                <input type="checkbox" class="gh-input" id="button-toggle" checked={{@payload.showButton}} {{on "input" this.toggleButton}}>
                                <span class="input-toggle-component mt1"></span>
                            </label>
                        </div>
                    </div>
                </div>

                {{#if @payload.showButton}}
                    <div class="kg-settings-panel-control">
                        <label class="kg-settings-panel-control-label" for="button-text-input">Button title</label>
                        <div class="kg-settings-panel-control-input">
                            <input
                                type="text"
                                class="gh-input"
                                id="button-text-input"
                                name="button-text"
                                value={{@payload.buttonText}}
                                placeholder="Add button text"
                                {{on "input" this.setButtonText}}
                                {{on-key "Enter" (fn this.focusElement "#button-url-input")}}
                            >
                        </div>
                    </div>

                    <div class="kg-settings-panel-control">
                        <label class="kg-settings-panel-control-label" for="button-url-input">Button URL</label>
                        <div class="kg-settings-panel-control-input">
                            <GhInputWithSelect
                                @value={{@payload.buttonUrl}}
                                @options={{this.suggestedUrls}}
                                @valueField="url"
                                @searchField="url"
                                @placeholder="https://yoursite.com/#/portal/signup/"
                                @searchMessage={{null}}
                                @onInput={{this.setButtonUrl}}
                                @openOnFocus={{true}}
                                @closeWhenEmpty={{true}}
                                @triggerClass="email-cta-button-url-input"
                                @triggerId="button-url-input"
                                @renderInPlace={{false}} {{!-- avoid dropdown inheriting editor styles --}}
                                as |suggestion|
                            >
                                <span class="kg-settings-link-title" title="{{suggestion.name}}">{{suggestion.name}}</span>
                                <span class="kg-settings-link-url" title="{{suggestion.url}}">{{suggestion.url}}</span>
                            </GhInputWithSelect>
                        </div>
                    </div>
                {{/if}}
            </KoenigSettingsPanel>
        {{else}}
        <form class="email-cta-toolbar">
            <div class="borders">
                <button type="button" title="Add dividers" class="gh-btn gh-btn-white gh-btn-icon email-cta-toolbar-item {{if @payload.showDividers "fill-green-d1"}}" {{on "click" this.toggleDividers}}><span>{{svg-jar "dividers"}}</span></button>
            </div>

            <div class="gh-btn-group icons email-cta-align">
                <button type="button" title="Left-align content" class="gh-btn gh-btn-icon {{if (eq @payload.alignment "left") "gh-btn-group-selected"}}" {{on "click" (fn this.setAlignment "left")}}><span>{{svg-jar "align-left"}}</span></button>
                <button type="button" title="Center-align content" class="gh-btn gh-btn-icon {{if (eq @payload.alignment "center") "gh-btn-group-selected"}}" {{on "click" (fn this.setAlignment "center")}}><span>{{svg-jar "align-center"}}</span></button>
            </div>

            <button type="button" title="Add button" class="gh-btn gh-btn-white gh-btn-icon email-cta-toolbar-item {{if @payload.showButton "fill-green-d1"}}" {{on "click" this.toggleButton}}><span>{{svg-jar "button"}}</span></button>

            {{#if @payload.showButton}}
                <label for={{this.buttonTextInputId}} class="sr-only">CTA button text</label>
                <input
                    type="text"
                    class="gh-input email-cta-button-text-input"
                    id={{this.buttonTextInputId}}
                    name="button-text"
                    value={{@payload.buttonText}}
                    placeholder="Add button text"
                    {{on "input" this.setButtonText}}
                    {{on-key "Enter" (fn this.focusElement "#button-url-input")}}
                >

                <label for={{this.urlInputId}} class="sr-only">CTA URL</label>
                <GhInputWithSelect
                    @value={{@payload.buttonUrl}}
                    @options={{this.suggestedUrls}}
                    @valueField="url"
                    @searchField="url"
                    @placeholder="https://yoursite.com/#/portal/signup/"
                    @searchMessage={{null}}
                    @onInput={{this.setButtonUrl}}
                    @openOnFocus={{true}}
                    @closeWhenEmpty={{true}}
                    @triggerClass="email-cta-button-url-input"
                    @triggerId={{this.urlInputId}}
                    @renderInPlace={{false}} {{!-- avoid dropdown inheriting editor styles --}}
                    as |suggestion|
                >
                    <span class="kg-settings-link-title" title="{{suggestion.name}}">{{suggestion.name}}</span>
                    <span class="kg-settings-link-url" title="{{suggestion.url}}">{{suggestion.url}}</span>
                </GhInputWithSelect>
            {{/if}}
        </form>
        {{/if}}
    {{else}}
        <div class="gh-email-cta-segment-indicator">
            <p>{{capitalize this.selectedSegment.name}}</p>
        </div>

        {{#if @payload.showDividers}}<hr class="border-top">{{/if}}

        <div class="{{if (not @payload.showDividers) "pb2"}} {{if (eq @payload.alignment "center") "tc"}}">
            {{#if @payload.html}}
                <div class="relative">
                    <p>{{{this.formattedHtml}}}</p>
                    <div class="koenig-card-click-overlay"></div>
                </div>
            {{/if}}

            {{#if (and @payload.showButton @payload.buttonText @payload.buttonUrl)}}
                <a class="gh-btn gh-btn-accent" href="javascript:void(0)" data-tooltip={{@payload.buttonUrl}}><span>{{@payload.buttonText}}</span></a>
            {{/if}}
        </div>

        {{#if @payload.showDividers}}<hr class="border-bottom">{{/if}}

    {{/if}}
</KoenigCard>