<div class="t-content">
    <div class="c-generalForm">
        <div style="display: flex; align-items: stretch; height: 12em;" class="c-fieldset"
             ng-controller="SimpleChoiceExampleController as controller">
            <div class="c-fieldset-item c-fieldset-item--brief">
                <inv-choice
                    name="simpleChoice"
                    value="controller.value"
                    on-value-changed="controller.onValueChanged(value)">
                    <inv-choice-option value="controller.Period.EVERY_15_MINUTES"></inv-choice-option>
                    <inv-choice-option value="controller.Period.EVERY_30_MINUTES"></inv-choice-option>
                    <inv-choice-option value="controller.Period.HOURLY"></inv-choice-option>
                    <inv-choice-option value="controller.Period.DAILY"></inv-choice-option>
                    <inv-choice-option value="controller.Period.WEEKLY"></inv-choice-option>
                </inv-choice>
            </div>
        </div>
    </div>
</div>

<div style="padding: 8px">
    <div><b>show-relative-frequency</b> (string) Show the relative frequency time text. <br> Valid values are:
        <ul><li>true (show relative text)</li>
            <li>time (show relative text, and time)</li>
            <li>timeAndTimeZone (show relative text, time, and time zone)</li></ul></div>
    <div><b>relative-to-date</b> (date) Works with show-relative-frequency to set what date to base the relative text off.</div>
</div>
<br>

<div class="t-content" inv-focus-group>
    <form class="c-generalForm"
          ng-controller="CustomPeriodChoiceExampleController as controller"
          autocomplete="off"
          unsaved-changes-prompt
          novalidate>
        <form-error-messages
            field-locale-key-mapping="controller.formFieldLocaleKeyMapping"
            field-constraint-parameters="::controller.formFieldConstraintParameters"
            extra-error-messages="controller.formErrors">
        </form-error-messages>
        <div class="c-fieldset">
            <div class="c-fieldset-item">
                <inv-date-time-selector
                    date="controller.date"
                    hide-relational-time="true"
                    on-date-changed="controller.onChangeDate">
                </inv-date-time-selector>
            </div>
            <div class="c-fieldset-item"
                 form-field-error-state="frequency"
                 form-field-locale-key="controller.LocaleKeys.FREQUENCY">
                <inv-choice
                    value="controller.value"
                    on-value-changed="controller.onValueChanged(value)">
                    <inv-choice-option value="controller.Period.EVERY_15_MINUTES"></inv-choice-option>
                    <inv-choice-option value="controller.Period.EVERY_30_MINUTES"></inv-choice-option>
                    <inv-choice-option value="controller.Period.HOURLY"></inv-choice-option>
                    <inv-choice-option value="controller.Period.DAILY"></inv-choice-option>
                    <inv-choice-option value="controller.Period.WEEKLY"></inv-choice-option>
                    <inv-choice-option value="controller.Period.MONTHLY"></inv-choice-option>
                    <inv-custom-period-option value="controller.customValue"
                                              active="controller.customActive"
                                              custom-choices="controller.customChoices"
                                              show-relative-frequency="timeAndTimeZone"
                                              relative-to-date="controller.date">
                    </inv-custom-period-option>
                </inv-choice>
                <form-field-error-messages name="frequency"></form-field-error-messages>
            </div>
        </div>
    </form>
</div>