Select Button Or Stepper
A select button is shown if a max of 1 is passed in. A stepper is shown if the max passed in is greater than 1. If both the max and min are 1, and the button is selected, you cannot click on the button again to unselect. If the max passed in is 1, the min is 0, and the the button is selected, you can click the button (it should have an X next to it) again to unselect it. Explicitly setting the canUnselect property to something other than undefined overrides the default behavior. A negative min while the max 1 is not supported by this component and neither is a max of 0.
- HTML
<div class="t-content" ng-controller="selectButtonOrStepperExampleController as $ctrl"> <div class="c-fieldset"> <div class="c-fieldset-item u-mb+"> <label>Min:</label> <div class="c-fieldset-itemInput"> <input type="number" ng-model="$ctrl.min"> </div> </div> <div class="c-fieldset-item u-mb+"> <label>Max:</label> <div class="c-fieldset-itemInput"> <input type="number" ng-model="$ctrl.max"> </div> </div> <div class="c-fieldset-item u-mb+"> <label for="canUnselect">Can Unselect: </label> <select name="canUnselect" id="canUnselect" ng-model="$ctrl.canUnselect" ng-options="option.value as option.label for option in $ctrl.canUnselectOptions"> </select> </div> </div> <div class="u-pt++"> <inv-select-button-or-stepper min="$ctrl.min" max="$ctrl.max" can-unselect="$ctrl.canUnselect" has-error="false" value="$ctrl.value" is-selected="$ctrl.value > 0" on-select-button-change="$ctrl.onSelectButtonChange" on-stepper-change="$ctrl.onStepperChange"></inv-select-button-or-stepper> </div> </div>
- JavaScript
export default function SelectButtonOrStepperExampleController() { this.$onInit = () => { this.min = 1; this.max = 1; this.value = 0; this.canUnselect = undefined; this.canUnselectOptions = [{ label: 'True', value: true }, { label: 'False', value: false }, { label: 'Undefined', value: undefined }]; this.onSelectButtonChange = (value) => { this.value = value; }; this.onStepperChange = (value) => { this.value = value; }; }; }