2022-03-24 11:48:03 +00:00
|
|
|
import { html } from 'lit';
|
|
|
|
import { customElement } from 'lit/decorators.js';
|
2021-09-29 12:40:26 +00:00
|
|
|
import { classMap } from 'lit/directives/class-map.js';
|
|
|
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
|
|
import { live } from 'lit/directives/live.js';
|
2022-03-24 11:48:03 +00:00
|
|
|
import RadioBase from '~/internal/radio';
|
2021-07-10 00:45:44 +00:00
|
|
|
import styles from './radio.styles';
|
2020-07-15 21:30:37 +00:00
|
|
|
|
|
|
|
/**
|
2020-07-17 10:09:10 +00:00
|
|
|
* @since 2.0
|
2020-07-15 21:30:37 +00:00
|
|
|
* @status stable
|
|
|
|
*
|
2021-06-25 20:25:46 +00:00
|
|
|
* @slot - The radio's label.
|
2020-07-15 21:30:37 +00:00
|
|
|
*
|
2021-06-25 20:25:46 +00:00
|
|
|
* @event sl-blur - Emitted when the control loses focus.
|
|
|
|
* @event sl-change - Emitted when the control's checked state changes.
|
|
|
|
* @event sl-focus - Emitted when the control gains focus.
|
2021-06-24 22:24:54 +00:00
|
|
|
*
|
2022-03-09 20:54:18 +00:00
|
|
|
* @csspart base - The component's internal wrapper.
|
2021-06-25 20:25:46 +00:00
|
|
|
* @csspart control - The radio control.
|
|
|
|
* @csspart checked-icon - The container the wraps the checked icon.
|
|
|
|
* @csspart label - The radio label.
|
2020-07-15 21:30:37 +00:00
|
|
|
*/
|
2021-03-18 13:04:23 +00:00
|
|
|
@customElement('sl-radio')
|
2022-03-24 11:48:03 +00:00
|
|
|
export default class SlRadio extends RadioBase {
|
2021-07-10 00:45:44 +00:00
|
|
|
static styles = styles;
|
2021-03-06 17:01:39 +00:00
|
|
|
|
2020-07-15 21:30:37 +00:00
|
|
|
render() {
|
2021-02-26 14:09:13 +00:00
|
|
|
return html`
|
2020-07-15 21:30:37 +00:00
|
|
|
<label
|
|
|
|
part="base"
|
2021-02-26 14:09:13 +00:00
|
|
|
class=${classMap({
|
2020-07-15 21:30:37 +00:00
|
|
|
radio: true,
|
|
|
|
'radio--checked': this.checked,
|
|
|
|
'radio--disabled': this.disabled,
|
|
|
|
'radio--focused': this.hasFocus
|
2021-02-26 14:09:13 +00:00
|
|
|
})}
|
2020-07-15 21:30:37 +00:00
|
|
|
>
|
2021-08-27 12:54:00 +00:00
|
|
|
<input
|
|
|
|
class="radio__input"
|
|
|
|
type="radio"
|
|
|
|
name=${ifDefined(this.name)}
|
|
|
|
value=${ifDefined(this.value)}
|
|
|
|
.checked=${live(this.checked)}
|
|
|
|
.disabled=${this.disabled}
|
|
|
|
@click=${this.handleClick}
|
|
|
|
@blur=${this.handleBlur}
|
|
|
|
@focus=${this.handleFocus}
|
|
|
|
/>
|
2020-07-15 21:30:37 +00:00
|
|
|
<span part="control" class="radio__control">
|
|
|
|
<span part="checked-icon" class="radio__icon">
|
|
|
|
<svg viewBox="0 0 16 16">
|
|
|
|
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
|
|
|
<g fill="currentColor">
|
|
|
|
<circle cx="8" cy="8" r="3.42857143"></circle>
|
|
|
|
</g>
|
|
|
|
</g>
|
|
|
|
</svg>
|
|
|
|
</span>
|
|
|
|
</span>
|
|
|
|
|
2021-12-30 21:32:57 +00:00
|
|
|
<span part="label" class="radio__label">
|
2021-03-06 17:01:39 +00:00
|
|
|
<slot></slot>
|
2020-07-15 21:30:37 +00:00
|
|
|
</span>
|
|
|
|
</label>
|
2021-02-26 14:09:13 +00:00
|
|
|
`;
|
2020-07-15 21:30:37 +00:00
|
|
|
}
|
|
|
|
}
|
2021-03-12 14:07:38 +00:00
|
|
|
|
2021-03-12 14:09:08 +00:00
|
|
|
declare global {
|
|
|
|
interface HTMLElementTagNameMap {
|
|
|
|
'sl-radio': SlRadio;
|
|
|
|
}
|
|
|
|
}
|