@paperbits/core/popup/ko/popupEditor.html

Paperbits core components.

<details open>
    <summary>
        Background
        <button class="btn btn-info" role="tooltip" data-bind="tooltip: 'Manage background'"></button>
    </summary>
    <background params="{ background: containerBackground, onUpdate: onContainerBackgroundChange }">
    </background>
</details>

<alignment-editor params="{ container: containerConfig, onUpdate: onContainerContainerChange, overflowControls: true  }">
</alignment-editor>

<details open>
    <summary>
        Container size
    </summary>
    <size-editor
        params="{ features: 'width,height,minMaxWidth,minMaxHeight', allowUnits: 'px,%', sizeConfig: containerSizeStyles, onUpdate: onContainerSizeUpdate }">
    </size-editor>
</details>

<details open>
    <summary>
        Shadow
    </summary>
    <shadow params="{ shadow: containerShadow, onUpdate: onShadowUpdate }">
    </shadow>
</details>

<details open>
    <summary>
        Position
    </summary>
    <div class="form-group">
        <label class="form-label">
            <input name="position" type="radio" value="center" data-bind="checked: position" />Center
        </label>
        <label class="form-label">
            <input name="position" type="radio" value="top" data-bind="checked: position" />Top
        </label>
        <label class="form-label">
            <input name="position" type="radio" value="left" data-bind="checked: position" />Left
        </label>
        <label class="form-label">
            <input name="position" type="radio" value="right" data-bind="checked: position" />Right
        </label>
        <label class="form-label">
            <input name="position" type="radio" value="bottom" data-bind="checked: position" />Bottom
        </label>
        <label class="form-label">
            <input name="position" type="radio" value="attached" data-bind="checked: position" />By trigger
            (bottom)
        </label>
    </div>
</details>

<details open>
    <summary>
        Offset
    </summary>
    <div class="form-group">
        <label for="label" class="form-label">
            Offset X
        </label>
        <input id="offseX" type="number" class="form-control" placeholder="0" data-bind="textInput: offsetX" />
    </div>
    <div class="form-group">
        <label for="label" class="form-label">
            Offset Y
        </label>
        <input id="offseY" type="number" class="form-control" placeholder="0" data-bind="textInput: offsetY" />
    </div>
</details>

<details open>
    <summary>
        Box
    </summary>
    <box params="{ features: 'padding,border', box: containerBox, onUpdate: onBoxUpdate }"></box>
</details>

<details open>
    <summary>
        Backdrop
    </summary>
    <label for="backdrop" class="form-label">
        <input type="checkbox" id="backdrop" data-bind="checked: backdrop" /> Show backdrop
    </label>
</details>

<!-- ko if: backdrop -->
<details open>
    <summary>
        Backdrop background
        <button class="btn btn-info" role="tooltip" data-bind="tooltip: 'Manage backdrop background'"></button>
    </summary>
    <background params="{ background: backdropBackground, onUpdate: onBackdropBackgroundChange }"></background>
</details>
<!-- /ko -->