| 5 | import declineIcon from "@ui5/webcomponents-icons/dist/decline.js"; |
| 6 | |
| 7 | export default function SwitchTemplate(this: Switch) { |
| 8 | return ( |
| 9 | <div |
| 10 | class={{ |
| 11 | "ui5-switch-root": true, |
| 12 | "ui5-switch--desktop": isDesktop(), |
| 13 | "ui5-switch--disabled": this.disabled, |
| 14 | "ui5-switch--checked": this.checked, |
| 15 | "ui5-switch--semantic": this.graphical, |
| 16 | "ui5-switch--no-label": !(this.graphical || this.textOn || this.textOff), |
| 17 | "ui5-switch--safari": isSafari(), |
| 18 | }} |
| 19 | role="switch" |
| 20 | aria-label={this.ariaLabelText} |
| 21 | aria-checked={this.checked} |
| 22 | aria-disabled={this.effectiveAriaDisabled} |
| 23 | aria-readonly={this.effectiveAriaReadonly} |
| 24 | aria-required={this.required} |
| 25 | aria-describedby={this.ariaDescribedBy} |
| 26 | onClick={this._onclick} |
| 27 | onKeyUp={this._onkeyup} |
| 28 | onKeyDown={this._onkeydown} |
| 29 | onFocusIn={this._onfocusin} |
| 30 | tabindex={this.effectiveTabIndex} |
| 31 | title={this.tooltip} |
| 32 | > |
| 33 | <div class="ui5-switch-inner"> |
| 34 | <div class="ui5-switch-track" part="slider"> |
| 35 | <div class="ui5-switch-slider"> |
| 36 | {this.graphical ? |
| 37 | <> |
| 38 | <span class="ui5-switch-text ui5-switch-text--on"> |
| 39 | <Icon name={acceptIcon} class="ui5-switch-icon-on"/> |
| 40 | </span> |
| 41 | <span class="ui5-switch-text ui5-switch-text--off"> |
| 42 | <Icon name={declineIcon} class="ui5-switch-icon-off"/> |
| 43 | </span> |
| 44 | </> |
| 45 | : |
| 46 | <> |
| 47 | {this.hasNoLabel ? |
| 48 | <> |
| 49 | <span class="ui5-switch-text ui5-switch-text--on ui5-switch-no-label-icon" part="text-on"> |
| 50 | <Icon name={this.sapNextIcon} class="ui5-switch-no-label-icon-on" /> |
| 51 | </span> |
| 52 | <span class="ui5-switch-text ui5-switch-text--off ui5-switch-no-label-icon" part="text-off"> |
| 53 | <Icon name={this.sapNextIcon} class="ui5-switch-no-label-icon-off" /> |
| 54 | </span> |
| 55 | </> |
| 56 | : |
| 57 | <> |
| 58 | <span class="ui5-switch-text ui5-switch-text--on" part="text-on" aria-hidden={this._textAriaHidden}>{this._textOn}</span> |
| 59 | <span class="ui5-switch-text ui5-switch-text--off" part="text-off" aria-hidden={this._textAriaHidden}>{this._textOff}</span> |
| 60 | </> |
| 61 | } |
| 62 | </> |
| 63 | } |
| 64 | |