@scania/tegel
Version:
Tegel Design System
64 lines (58 loc) • 6.96 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const index = require('./index-ca8040ad.js');
const generateUniqueId = require('./generateUniqueId-e3fc9863.js');
const toggleCss = ".tds-toggle.sc-tds-toggle .disabled.sc-tds-toggle{cursor:not-allowed}.tds-toggle.sc-tds-toggle .toggle-headline.sc-tds-toggle{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-toggle-headline);margin-bottom:12px}.tds-toggle.sc-tds-toggle .toggle-headline.disabled.sc-tds-toggle{color:var(--tds-toggle-headline-disabled)}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle{appearance:initial;margin:0;width:44px;height:24px;position:relative;display:inline-block;vertical-align:middle;cursor:pointer}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle::after,.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle::before{content:\"\";position:absolute;box-sizing:border-box;transition:all var(--tds-motion-duration-moderate-01) var(--tds-motion-easing-scania)}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle::before{width:44px;height:24px;border-radius:16px;background-color:var(--tds-toggle-off-slider);left:0;border:1px solid transparent}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle::after{width:16px;height:16px;background-color:var(--tds-toggle-switch);border-radius:50%;left:4px;top:4px}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle:focus-visible{outline:none;outline:2px solid var(--tds-toggle-border-outline);border-radius:16px;outline-offset:0}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle:focus-visible::before{background-color:var(--tds-toggle-off-slider-focus);border:1px solid var(--tds-toggle-off-border-focus)}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle:hover::before{background-color:var(--tds-toggle-off-slider-hover);border:1px solid var(--tds-toggle-off-border-focus)}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle:checked::before{background-color:var(--tds-toggle-on-slider)}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle:checked:focus-visible::before{background-color:var(--tds-toggle-on-slider-focus);border:1px solid var(--tds-toggle-off-border-focus)}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle:checked:hover::before{background-color:var(--tds-toggle-on-slider-hover);border:1px solid var(--tds-toggle-off-border-focus)}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle:checked::after{left:24px}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle:disabled{cursor:not-allowed}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle:disabled::before{background-color:var(--tds-toggle-slider-disabled);border:1px solid var(--tds-toggle-slider-disabled)}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle:disabled::after{background-color:var(--tds-toggle-switch-disabled)}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle:disabled:checked::before{background-color:var(--tds-toggle-on-slider-disabled);border:1px solid var(--tds-toggle-on-slider-disabled)}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle:disabled:checked::after{background-color:var(--tds-toggle-switch-disabled)}.tds-toggle.sc-tds-toggle input[type=checkbox].sm.sc-tds-toggle{width:28px;height:16px}.tds-toggle.sc-tds-toggle input[type=checkbox].sm.sc-tds-toggle::before{width:28px;height:16px}.tds-toggle.sc-tds-toggle input[type=checkbox].sm.sc-tds-toggle::after{width:8px;height:8px}.tds-toggle.sc-tds-toggle input[type=checkbox].sm.sc-tds-toggle:checked::before{background-color:var(--tds-toggle-on-slider)}.tds-toggle.sc-tds-toggle input[type=checkbox].sm.sc-tds-toggle:checked::after{left:16px}.tds-toggle.sc-tds-toggle input[type=checkbox].sm.sc-tds-toggle:disabled::before{background-color:var(--tds-toggle-slider-disabled);border:1px solid var(--tds-toggle-slider-disabled)}.tds-toggle.sc-tds-toggle input[type=checkbox].sm.sc-tds-toggle:disabled::after{background-color:var(--tds-toggle-switch-disabled)}.tds-toggle.sc-tds-toggle label.sc-tds-toggle{display:inline-block;vertical-align:middle;font:var(--tds-detail-01);letter-spacing:var(--tds-detail-01-ls);color:var(--tds-toggle-label-color);padding-left:8px;cursor:pointer}.tds-toggle.sc-tds-toggle label.disabled.sc-tds-toggle{color:var(--tds-toggle-label-color-disabled)}";
const TdsToggleStyle0 = toggleCss;
const TdsToggle = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.tdsToggle = index.createEvent(this, "tdsToggle", 6);
this.handleToggle = () => {
this.checked = !this.checked;
this.tdsToggle.emit({
toggleId: this.toggleId,
checked: this.checked,
});
};
this.checked = false;
this.required = false;
this.size = 'lg';
this.name = undefined;
this.headline = undefined;
this.disabled = false;
this.toggleId = generateUniqueId.generateUniqueId();
this.tdsAriaLabel = undefined;
}
/** Toggles the Toggle. */
async toggle() {
this.checked = !this.checked;
return {
toggleId: this.toggleId,
checked: this.checked,
};
}
/** Method to programmatically focus the toggle element */
async focusElement() {
if (this.inputElement) {
this.inputElement.focus();
}
}
componentWillLoad() {
this.labelSlot = this.host.querySelector("[slot='label']");
}
connectedCallback() {
if (!this.tdsAriaLabel) {
console.warn('Tegel Toggle component: tdsAriaLabel prop is missing');
}
}
render() {
return (index.h("div", { key: '212a541d06f0cc534855ac872cfb386dc1b2d4ff', class: "tds-toggle" }, this.headline && (index.h("div", { key: '076c51461d4898d2bfa3c86fadd94ac2ad63c7a8', class: {
'toggle-headline': true,
'disabled': this.disabled,
} }, this.headline)), index.h("input", { key: 'e0e849d7b05b77612fc949894cac8befa5b89370', ref: (inputEl) => (this.inputElement = inputEl), "aria-label": this.tdsAriaLabel, "aria-describedby": this.host.getAttribute('aria-describedby'), "aria-labelledby": this.host.getAttribute('aria-labelledby'), "aria-checked": this.checked, "aria-required": this.required, onChange: () => this.handleToggle(), class: `${this.size}`, checked: this.checked, disabled: this.disabled, required: this.required, type: "checkbox", name: this.name, id: this.toggleId, role: "switch" }), this.labelSlot && (index.h("label", { key: '4d1dcc70f896695657ca7ca68fd832ee4d13417a', class: { disabled: this.disabled }, htmlFor: this.toggleId }, index.h("slot", { key: '800ea4ee2760efee8cdfe1ac3aee4b3a6f95f199', name: "label" })))));
}
get host() { return index.getElement(this); }
};
TdsToggle.style = TdsToggleStyle0;
exports.tds_toggle = TdsToggle;