()
| 1184 | } |
| 1185 | |
| 1186 | render() { |
| 1187 | const { |
| 1188 | disabled, |
| 1189 | el, |
| 1190 | isExpanded, |
| 1191 | expandedIcon, |
| 1192 | labelPlacement, |
| 1193 | justify, |
| 1194 | placeholder, |
| 1195 | fill, |
| 1196 | shape, |
| 1197 | name, |
| 1198 | value, |
| 1199 | hasFocus, |
| 1200 | } = this; |
| 1201 | const mode = getIonMode(this); |
| 1202 | const hasFloatingOrStackedLabel = labelPlacement === 'floating' || labelPlacement === 'stacked'; |
| 1203 | const justifyEnabled = !hasFloatingOrStackedLabel && justify !== undefined; |
| 1204 | const rtl = isRTL(el) ? 'rtl' : 'ltr'; |
| 1205 | const inItem = hostContext('ion-item', this.el); |
| 1206 | const shouldRenderHighlight = mode === 'md' && fill !== 'outline' && !inItem; |
| 1207 | |
| 1208 | const hasValue = this.hasValue(); |
| 1209 | const hasStartEndSlots = el.querySelector('[slot="start"], [slot="end"]') !== null; |
| 1210 | |
| 1211 | renderHiddenInput(true, el, name, parseValue(value), disabled); |
| 1212 | |
| 1213 | /** |
| 1214 | * If the label is stacked, it should always sit above the select. |
| 1215 | * For floating labels, the label should move above the select if |
| 1216 | * the select has a value, is open, or has anything in either |
| 1217 | * the start or end slot. |
| 1218 | * |
| 1219 | * If there is content in the start slot, the label would overlap |
| 1220 | * it if not forced to float. This is also applied to the end slot |
| 1221 | * because with the default or solid fills, the select is not |
| 1222 | * vertically centered in the container, but the label is. This |
| 1223 | * causes the slots and label to appear vertically offset from each |
| 1224 | * other when the label isn't floating above the input. This doesn't |
| 1225 | * apply to the outline fill, but this was not accounted for to keep |
| 1226 | * things consistent. |
| 1227 | * |
| 1228 | * TODO(FW-5592): Remove hasStartEndSlots condition |
| 1229 | */ |
| 1230 | const labelShouldFloat = |
| 1231 | labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots)); |
| 1232 | |
| 1233 | return ( |
| 1234 | <Host |
| 1235 | onClick={this.onClick} |
| 1236 | class={createColorClasses(this.color, { |
| 1237 | [mode]: true, |
| 1238 | 'in-item': inItem, |
| 1239 | 'in-item-color': hostContext('ion-item.ion-color', el), |
| 1240 | 'select-disabled': disabled, |
| 1241 | 'select-expanded': isExpanded, |
| 1242 | 'has-expanded-icon': expandedIcon !== undefined, |
| 1243 | 'has-value': hasValue, |
nothing calls this directly
no test coverage detected