@limetech/lime-elements/dist/esm/limel-switch.entry.js

Lime Elements

import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-DBTJNfo7.js';
import { c as createRandomString } from './random-string-JbKhhoXs.js';
import { m as makeEnterClickable, r as removeEnterClickable } from './make-enter-clickable-BgTwPGeH.js';

const switchCss = () => `@charset "UTF-8";:host(limel-switch){min-height:1.75rem;display:flex;flex-direction:column;align-items:flex-start}.switch{display:grid;grid-template-columns:auto 1fr;gap:0.5rem;align-items:center;width:100%;min-height:1.75rem}button{border:none;outline:none;cursor:pointer;transition:background-color calc(0.2s + 0.2s) ease;flex-shrink:0;display:inline-flex;align-items:center;padding:0;width:2.25rem;height:1.25rem;border-radius:1.25rem;background-color:rgb(var(--contrast-700))}:host([disabled]) button{opacity:0.4;cursor:not-allowed}button[aria-checked=true]{background-color:var(--lime-primary-color, var(--limel-theme-primary-color))}.handle{position:relative;display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border-radius:50%;transition:transform 0.2s cubic-bezier(0.46, 0.52, 0.27, 1.55), box-shadow 0.2s ease, background-color 0.2s ease;transform:translateX(0)}button[aria-checked=true] .handle{transform:translateX(1rem)}button:focus-visible .handle{background-color:rgb(var(--color-white), 0.6);box-shadow:var(--shadow-depth-8-focused), var(--shadow-brighten-edges-inside)}.handle:after{transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);content:"";position:absolute;inset:0.125rem;border-radius:50%;background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-normal), var(--button-shadow-normal)}button:hover:not(:disabled) .handle:after{box-shadow:var(--button-shadow-normal), var(--button-shadow-hovered)}svg{width:0.625rem;height:0.625rem;fill:var(--lime-elevated-surface-background-color)}label{font-size:var(--limel-theme-default-font-size);cursor:pointer;width:fit-content}:host([disabled]) label{cursor:not-allowed;opacity:0.4}:host(limel-switch:focus),:host(limel-switch:focus-visible),:host(limel-switch:focus-within){--limel-h-l-grid-template-rows-transition-speed:0.46s;--limel-h-l-grid-template-rows:1fr}:host(limel-switch){--limel-h-l-grid-template-rows-transition-speed:0.3s;--limel-h-l-grid-template-rows:0fr}:host(limel-switch:focus) limel-helper-line,:host(limel-switch:focus-visible) limel-helper-line,:host(limel-switch:focus-within) limel-helper-line,:host(limel-switch:hover) limel-helper-line{will-change:grid-template-rows}`;

const Switch = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.change = createEvent(this, "change");
        /**
         * Disables the switch when `true`,
         * and visually shows that the switch is editable but disabled.
         * This tells the users that if certain requirements are met,
         * the switch may become interactable.
         */
        this.disabled = false;
        /**
         * Disables the switch when `true`. This visualizes the switch slightly differently.
         * But shows no visual sign indicating that the switch is disabled
         * or can ever become interactable.
         */
        this.readonly = false;
        /**
         * The value of the switch
         */
        this.value = false;
        /**
         * The labels to use to clarify what kind of data is being visualized,
         * when the component is `readonly`.
         */
        this.readonlyLabels = [];
        this.helperTextId = createRandomString();
        this.fieldId = createRandomString();
        this.renderReadonly = () => {
            const icon = this.value
                ? {
                    name: 'ok',
                    color: 'var(--lime-primary-color, var(--limel-theme-primary-color))',
                }
                : 'minus';
            return (h("limel-dynamic-label", { value: this.value, "aria-describedby": this.ariaDescribedBy, defaultLabel: { text: this.label, icon: icon }, labels: this.readonlyLabels }));
        };
        this.renderInteractive = () => {
            return (h("div", { class: "switch" }, h("button", { id: this.fieldId, type: "button", role: "switch", "aria-checked": String(this.value), disabled: this.disabled, onClick: this.handleClick, "aria-describedby": this.ariaDescribedBy }, h("span", { class: "handle" })), h("label", { htmlFor: this.fieldId }, this.label)));
        };
        this.renderHelperLine = () => {
            if (!this.hasHelperText()) {
                return;
            }
            return (h("limel-helper-line", { helperTextId: this.helperTextId, helperText: this.helperText, invalid: this.invalid }));
        };
        this.hasHelperText = () => {
            return this.helperText !== null && this.helperText !== undefined;
        };
        this.handleClick = (event) => {
            event.stopPropagation();
            this.change.emit(!this.value);
        };
    }
    componentWillLoad() {
        makeEnterClickable(this.host);
    }
    disconnectedCallback() {
        removeEnterClickable(this.host);
    }
    render() {
        return (h(Host, { key: '4adc29ba50c4e06948efef7b922c0fb70bb58ecb' }, this.readonly
            ? this.renderReadonly()
            : this.renderInteractive(), this.renderHelperLine()));
    }
    get ariaDescribedBy() {
        return this.helperText ? this.helperTextId : undefined;
    }
    get host() { return getElement(this); }
};
Switch.style = switchCss();

export { Switch as limel_switch };