@paperbits/core/picture/ko/pictureEditor.html

Paperbits core components.

<details open>
    <summary>
        Main
    </summary>
    <div class="dropzone">
        <label for="pictureSource" class="form-label">
            Source
            <button class="btn btn-info" role="tooltip" aria-label="Picture source" aria-hidden="true" role="tooltip"
                data-bind="tooltip: 'Source of the picture. To change, click on preview area below and select a picture from media libaray.'"></button>
        </label>
        <a id="pictureSource" href="#" role="button" class="dropzone-showbox" aria-label="Picture source"
            data-bind="balloon: { position: 'right', component: { name: 'media-selector', params: { mimeType: 'image/', onSelect: $component.onMediaSelected } } }, focus: true">
            <div class="fit" aria-hidden="true" data-bind="background: background"></div>
        </a>
        <div class="dropzone-footer">
            <div class="fit text-center text-overflow" data-bind="text: mediaFileName"></div>
        </div>
    </div>

    <div class="form-group">
        <label for="caption" class="form-label">
            Caption
            <button class="btn btn-info" role="tooltip" aria-hidden="true" role="tooltip"
                data-bind="tooltip: 'An alternate text for an image'"></button>
        </label>
        <input type="text" id="caption" class="form-control" data-bind="textInput: caption" maxlength="256" />
    </div>

    <div class="form-group">
        <label for="hyperlink" class="form-label">
            Link to
            <button class="btn btn-info" role="tooltip" aria-hidden="true" role="tooltip"
                data-bind="tooltip: 'A link to be navigated on click.'"></button>
        </label>
        <input-hyperlink params="{ id: 'hyperlink', hyperlink: $component.hyperlink, onChange: $component.onHyperlinkChange }"></input-hyperlink>
    </div>
</details>

<details open>
    <summary>
        Styling
    </summary>
    <div class="form-group">
        <label for="appearanceStyle" class="form-label">
            Appearance
            <button class="btn btn-info" role="tooltip"
                data-bind="tooltip: 'Predefined appearance from style guide.'"></button>
        </label>
        <dropdown id="appearanceStyle"
            params="{ options: appearanceStyles, value: appearanceStyle, optionsText: 'displayName', optionsValue: 'key', heading: 'Appearance' }">
        </dropdown>
    </div>
</details>

<details open>
    <summary>
        Size
    </summary>
    <size-editor params="{ features: 'height,width', sizeConfig: sizeConfig, onUpdate: onSizeChange }">
    </size-editor>
</details>

<details open>
    <summary>
        Box
    </summary>
    <box params="{ features: 'margin', box: boxConfig, onUpdate: onBoxUpdate }"></box>
</details>