kopia lustrzana https://github.com/shoelace-style/shoelace
75 wiersze
2.1 KiB
TypeScript
75 wiersze
2.1 KiB
TypeScript
import { html } from 'lit';
|
|
import { customElement } from 'lit/decorators.js';
|
|
import { classMap } from 'lit/directives/class-map.js';
|
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
import { live } from 'lit/directives/live.js';
|
|
import RadioBase from '~/internal/radio';
|
|
import styles from './radio.styles';
|
|
|
|
/**
|
|
* @since 2.0
|
|
* @status stable
|
|
*
|
|
* @slot - The radio's label.
|
|
*
|
|
* @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.
|
|
*
|
|
* @csspart base - The component's internal wrapper.
|
|
* @csspart control - The radio control.
|
|
* @csspart checked-icon - The container the wraps the checked icon.
|
|
* @csspart label - The radio label.
|
|
*/
|
|
@customElement('sl-radio')
|
|
export default class SlRadio extends RadioBase {
|
|
static styles = styles;
|
|
|
|
render() {
|
|
return html`
|
|
<label
|
|
part="base"
|
|
class=${classMap({
|
|
radio: true,
|
|
'radio--checked': this.checked,
|
|
'radio--disabled': this.disabled,
|
|
'radio--focused': this.hasFocus
|
|
})}
|
|
>
|
|
<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}
|
|
/>
|
|
<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>
|
|
|
|
<span part="label" class="radio__label">
|
|
<slot></slot>
|
|
</span>
|
|
</label>
|
|
`;
|
|
}
|
|
}
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
'sl-radio': SlRadio;
|
|
}
|
|
}
|