@uicapivara/cp-select/src/select/select.template.html

cp-select

<div class="cp-select-container">
    <input type="text"
           cp-model="$ctrl.inputValue"
           cp-focus="$ctrl.onFocusInput()"
           cp-blur="$ctrl.onBlurInput()"
           cp-keydown="$ctrl.onKeyDown($event)"
           cp-attr.reflect-value="$ctrl.inputValue"
           cp-class="{ 'focused' : $ctrl.hasFocus }"
           cp-keyup="$ctrl.onKeyUp($event)" />
    <label class="form-label cp-address-label"
           cp-show="$ctrl.$constants.placeholder"
           cp-class="{ 'active' : $ctrl.address.information }">
        [[ $ctrl.$constants.placeholder ]]
    </label>
    <div class="cp-select-btns"
         cp-click="$ctrl.clear()">
        <div class="close"
             cp-show="$ctrl.hasItemSelected() && !$ctrl.loading"></div>
        <div class="arrow-down"
             cp-hide="$ctrl.hasItemSelected() || $ctrl.loading"></div>
        <div class="cp-select-loading"
             cp-show="$ctrl.loading"></div>
    </div>
    <ul cp-style="$ctrl.positionList">
        <li cp-repeat="$value in $ctrl.data"
            cp-click="$ctrl.select($value)">
            <div class="cp-option-content">
                <cp-transclude></cp-transclude>
                <span cp-show="$ctrl.hasTransclude()"> [[ $ctrl.getText($value) ]] </span>
            </div>
            <div class="cp-favorite-content"
                 cp-show="$ctrl.$constants.favorite">
                <svg cp-click="$ctrl.favorite($event, $value)"
                     cp-show="!$ctrl.isFavorite($value)"
                     version="1.1"
                     xmlns="http://www.w3.org/2000/svg"
                     xmlns:xlink="http://www.w3.org/1999/xlink"
                     x="0px"
                     y="0px"
                     viewBox="0 0 487.222 487.222"
                     xml:space="preserve">
                    <g>
                        <path d="M486.554,186.811c-1.6-4.9-5.8-8.4-10.9-9.2l-152-21.6l-68.4-137.5c-2.3-4.6-7-7.5-12.1-7.5l0,0c-5.1,0-9.8,2.9-12.1,7.6
                       l-67.5,137.9l-152,22.6c-5.1,0.8-9.3,4.3-10.9,9.2s-0.2,10.3,3.5,13.8l110.3,106.9l-25.5,151.4c-0.9,5.1,1.2,10.2,5.4,13.2
                       c2.3,1.7,5.1,2.6,7.9,2.6c2.2,0,4.3-0.5,6.3-1.6l135.7-71.9l136.1,71.1c2,1,4.1,1.5,6.2,1.5l0,0c7.4,0,13.5-6.1,13.5-13.5
                       c0-1.1-0.1-2.1-0.4-3.1l-26.3-150.5l109.6-107.5C486.854,197.111,488.154,191.711,486.554,186.811z M349.554,293.911
                       c-3.2,3.1-4.6,7.6-3.8,12l22.9,131.3l-118.2-61.7c-3.9-2.1-8.6-2-12.6,0l-117.8,62.4l22.1-131.5c0.7-4.4-0.7-8.8-3.9-11.9
                       l-95.6-92.8l131.9-19.6c4.4-0.7,8.2-3.4,10.1-7.4l58.6-119.7l59.4,119.4c2,4,5.8,6.7,10.2,7.4l132,18.8L349.554,293.911z"
                        />
                    </g>
                </svg>
                <svg version="1.1"
                     cp-click="$ctrl.favorite($event, $value)"
                     cp-show="$ctrl.isFavorite($value)"
                     id="Layer_1"
                     xmlns="http://www.w3.org/2000/svg"
                     xmlns:xlink="http://www.w3.org/1999/xlink"
                     x="0px"
                     y="0px"
                     viewBox="0 0 426.667 426.667"
                     style="enable-background:new 0 0 426.667 426.667;"
                     xml:space="preserve">
                    <polygon style="fill:#FAC917;"
                             points="213.333,10.441 279.249,144.017 426.667,165.436 320,269.41 345.173,416.226 213.333,346.91
	81.485,416.226 106.667,269.41 0,165.436 147.409,144.017 " />
                </svg>
            </div>
        </li>
    </ul>
</div>