v4web-components/dist/esm/lab-ds-switch.entry.js

Stencil Component Starter

import { r as registerInstance, c as createEvent, h } from './index-0b720089.js';

const labDsSwitchCss = ".v4-switch{display:inline-flex;border-radius:var(--lab-ds-semantic-selectable-border-radius-s);border-width:var(--lab-ds-semantic-selectable-border-width-s);border-color:var(--lab-ds-semantic-selectable-color-primary-focus);border-style:solid;padding:var(--lab-ds-semantic-selectable-space-padding-xxs)}.switch{position:relative;display:inline-block;width:3rem;height:1.5rem;border-radius:var(--lab-ds-semantic-selectable-border-radius-s);border-width:var(--lab-ds-semantic-selectable-border-width-s);border-color:var(--lab-ds-semantic-color-bg-default);border-style:solid}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;display:flex;justify-content:center;align-items:center;top:0;left:0;right:0;bottom:0;background-color:var(--lab-ds-semantic-color-bg-cloudy);-webkit-transition:0.4s;transition:0.4s}.slider:before{display:flex;justify-content:center;align-items:center;position:absolute;content:'';height:1.25rem;width:1.25rem;left:0.125rem;right:0.125rem;bottom:0.125rem;background-color:var(--lab-ds-semantic-color-bg-pure);-webkit-transition:0.4s;transition:0.4s}.material-symbols-outlined{font-family:Material Symbols Outlined;color:var(--lab-ds-semantic-selectable-color-primary-default);font-size:var(--lab-ds-semantic-size-icon-sm)}input:checked+.slider{background-color:var(--lab-ds-semantic-selectable-color-primary-default)}input:checked+.slider:before{-webkit-transform:translateX(1.625rem);-ms-transform:translateX(1.625rem);transform:translateX(1.625rem);content:'check';left:0rem}.slider.round{border-radius:var(--lab-ds-semantic-selectable-border-radius-s)}.slider.round:before{border-radius:var(--lab-ds-semantic-selectable-border-radius-s)}.small .switch{width:2rem;height:1rem}.small .slider:before{width:0.75rem;height:0.75rem;left:0.125rem;bottom:0.125rem}.small input:checked+.slider:before{left:-0.5rem}.small .material-symbols-outlined{font-size:var(--lab-ds-semantic-size-icon-s)}.v4-switch.disabled{border:none}.disabled .slider{background-color:var(--lab-ds-semantic-color-bg-disabled)}.disabled .slider:before{background-color:var(--lab-ds-semantic-color-bg-cloudy)}input:checked:disabled+.slider{background-color:var(--lab-ds-semantic-color-bg-disabled)}.disabled .material-symbols-outlined{color:var(--lab-ds-semantic-color-fg-disabled)}";

const LabDsSwitch = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.handleSwitch = createEvent(this, "handleSwitch", 7);
    this.size = 'medium';
    this.disabled = undefined;
    this.checked = false;
  }
  handleClick() {
    this.handleSwitch.emit(this.checked);
  }
  render() {
    return (h("div", { class: `${this.size} ${this.disabled ? 'disabled' : ''} v4-switch` }, h("label", { class: "switch" }, h("input", { disabled: this.disabled, checked: this.checked, onClick: () => this.handleClick(), type: "checkbox" }), h("span", { class: "slider round material-symbols-outlined" }))));
  }
};
LabDsSwitch.style = labDsSwitchCss;

export { LabDsSwitch as lab_ds_switch };

//# sourceMappingURL=lab-ds-switch.entry.js.map