igniteui-webcomponents
Version:
Ignite UI for Web Components is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach.
78 lines • 3.15 kB
JavaScript
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var IgcSwitchComponent_1;
import { html } from 'lit';
import { ifDefined } from 'lit/directives/if-defined.js';
import { live } from 'lit/directives/live.js';
import { themes } from '../../theming/theming-decorator.js';
import { registerComponent } from '../common/definitions/register.js';
import { createCounter, partNameMap } from '../common/util.js';
import { IgcCheckboxBaseComponent } from './checkbox-base.js';
import { styles as shared } from './themes/shared/switch/switch.common.css.js';
import { all } from './themes/switch-themes.js';
import { styles } from './themes/switch.base.css.js';
let IgcSwitchComponent = IgcSwitchComponent_1 = class IgcSwitchComponent extends IgcCheckboxBaseComponent {
constructor() {
super(...arguments);
this.inputId = `switch-${IgcSwitchComponent_1.increment()}`;
this.labelId = `switch-label-${this.inputId}`;
}
static register() {
registerComponent(IgcSwitchComponent_1);
}
render() {
const labelledBy = this.getAttribute('aria-labelledby');
const checked = this.checked;
return html `
<label
part=${partNameMap({ base: true, checked })}
for=${this.inputId}
@pointerdown=${this._kbFocus.reset}
>
<input
id=${this.inputId}
type="checkbox"
name=${ifDefined(this.name)}
value=${ifDefined(this.value)}
.required=${this.required}
.disabled=${this.disabled}
.checked=${live(checked)}
aria-checked=${checked ? 'true' : 'false'}
aria-disabled=${this.disabled ? 'true' : 'false'}
aria-labelledby=${labelledBy ? labelledBy : this.labelId}
@click=${this.handleClick}
@blur=${this.handleBlur}
@focus=${this.handleFocus}
/>
<span
part=${partNameMap({
control: true,
checked,
focused: this._kbFocus.focused,
})}
>
<span part=${partNameMap({ thumb: true, checked })}></span>
</span>
<span
.hidden=${this.hideLabel}
part=${partNameMap({ label: true, checked })}
id=${this.labelId}
>
<slot></slot>
</span>
</label>
`;
}
};
IgcSwitchComponent.tagName = 'igc-switch';
IgcSwitchComponent.styles = [styles, shared];
IgcSwitchComponent.increment = createCounter();
IgcSwitchComponent = IgcSwitchComponent_1 = __decorate([
themes(all)
], IgcSwitchComponent);
export default IgcSwitchComponent;
//# sourceMappingURL=switch.js.map