Selectable Option

Displays an option for selection.

HTML

<div class="t-content" style="width:780px; height: 150px;" ng-controller="selectableOptionExampleController">
    <inv-selectable-option
            id = "id"
            name = "displayName"
            starting-at-price = "startingPrice"
            image-url = "thumbnailUrl"
            on-select = "optionSelect"
            on-quick-view = "quickView"
            selected = "selected"
            on-unselect = "onOptionUnselect">
    </inv-selectable-option>
</div>

Selectable Option with List

Displays an option for selection with a list of items.

HTML

<div class="t-content" style="width:780px; height: 150px;" ng-controller="selectableOptionExampleController">
    <inv-selectable-option
        delimited-list = "list"
        id = "id"
        image-url = "thumbnailUrl"
        name = "displayName"
        on-quick-view = "quickView"
        on-select = "optionSelect"
        on-unselect = "onOptionUnselect"
        selected = "selected"
        starting-at-price = "startingPrice">
    </inv-selectable-option>
</div>

Selectable Option that is disabled with a message

Displays an option that is disabled with a lock icon that functions as a tooltip to display the disabled message.

HTML

<div class="t-content" style="width:780px; height: 150px;" ng-controller="selectableOptionExampleController">
    <inv-selectable-option
        disabled-message = "disabledMessage"
        id = "id"
        image-url = "thumbnailUrl"
        is-disabled = "true"
        name = "displayName"
        on-quick-view = "quickView"
        on-select = "optionSelect"
        on-unselect = "onOptionUnselect"
        selected = "selected"
        starting-at-price = "startingPrice">
    </inv-selectable-option>
</div>

Selectable Options with no image and selected

Displays a options for selection.

HTML

<div class="t-content" style="width:780px; height: 300px;" ng-controller="selectableOptionExampleController">
    <div ng-repeat="option in options">
        <inv-selectable-option
                id = "option.id"
                name = "option.displayName"
                starting-at-price = "option.startingPrice"
                image-url = "option.thumbnailUrl"
                on-select = "optionSelect"
                on-quick-view = "quickView"
                selected = "option.selected"
                on-unselect = "onOptionUnselect">
        </inv-selectable-option>
    </div>
</div>

Quick view and Non Selectable

You can display a quick view link, as well as a non-selectable variation for the action.

HTML

<div class="t-content"
    style="width:780px; height: 150px;"
    ng-controller="selectableOptionExampleController">
    <inv-selectable-option
        id="id"
        name="displayName"
        starting-at-label="startingPriceLabel"
        starting-at-price="startingPrice"
        image-url="thumbnailUrl"
        on-select="optionSelect"
        on-quick-view="quickView"
        selected="selected"
        on-unselect="onOptionUnselect"
        secondary-header="secondaryHeader"
        show-quick-view="true"
        single-selectable="false"
        use-id-header="true">
    </inv-selectable-option>
</div>

Flexible

Allows for text wrapping/line breaks on the title.

HTML

<div class="t-content" style="width: 400px; height: 100px; resize:horizontal; overflow: hidden;" ng-controller="selectableOptionExampleController">
    <inv-selectable-option
            id = "id"
            name = "displayName"
            starting-at-price = "startingPrice"
            image-url = "thumbnailUrl"
            on-select = "optionSelect"
            on-quick-view = "quickView"
            selected = "selected"
            on-unselect = "onOptionUnselect"
            flexible = "true">
    </inv-selectable-option>
</div>

With Qualifications

You can display the offer qualification as upgrade or downgrade. Compatible offers will appear with no icon

HTML

<div class="t-content" style="width:780px; height: 340px;" ng-controller="selectableOptionExampleController">
    <inv-selectable-option
        id="id"
        name="displayName"
        starting-at-price="startingPrice"
        image-url="thumbnailUrl"
        on-select="optionSelect"
        on-quick-view="quickView"
        selected="selected"
        on-unselect="onOptionUnselect"
        qualification="'upgrade'">
    </inv-selectable-option>
    <inv-selectable-option
        id="id"
        name="displayName"
        starting-at-price="startingPrice"
        image-url="thumbnailUrl"
        on-select="optionSelect"
        on-quick-view="quickView"
        selected="selected"
        on-unselect="onOptionUnselect"
        qualification="'downgrade'">
    </inv-selectable-option>
    <inv-selectable-option
        id="id"
        name="displayName"
        starting-at-price="startingPrice"
        image-url="thumbnailUrl"
        on-select="optionSelect"
        on-quick-view="quickView"
        selected="selected"
        on-unselect="onOptionUnselect"
        qualification="'compatible'">
    </inv-selectable-option>
</div>