@limetech/lime-elements
Version:
1 lines • 4.02 kB
JavaScript
import{r as e,c as i,h as t,H as s,a as r}from"./p-DBTJNfo7.js";import{c as l}from"./p-JbKhhoXs.js";import{m as o,r as a}from"./p-BgTwPGeH.js";const h=class{constructor(s){e(this,s),this.change=i(this,"change"),this.disabled=!1,this.readonly=!1,this.value=!1,this.readonlyLabels=[],this.helperTextId=l(),this.fieldId=l(),this.renderReadonly=()=>t("limel-dynamic-label",{value:this.value,"aria-describedby":this.ariaDescribedBy,defaultLabel:{text:this.label,icon:this.value?{name:"ok",color:"var(--lime-primary-color, var(--limel-theme-primary-color))"}:"minus"},labels:this.readonlyLabels}),this.renderInteractive=()=>t("div",{class:"switch"},t("button",{id:this.fieldId,type:"button",role:"switch","aria-checked":String(this.value),disabled:this.disabled,onClick:this.handleClick,"aria-describedby":this.ariaDescribedBy},t("span",{class:"handle"})),t("label",{htmlFor:this.fieldId},this.label)),this.renderHelperLine=()=>{if(this.hasHelperText())return t("limel-helper-line",{helperTextId:this.helperTextId,helperText:this.helperText,invalid:this.invalid})},this.hasHelperText=()=>null!=this.helperText,this.handleClick=e=>{e.stopPropagation(),this.change.emit(!this.value)}}componentWillLoad(){o(this.host)}disconnectedCallback(){a(this.host)}render(){return t(s,{key:"4adc29ba50c4e06948efef7b922c0fb70bb58ecb"},this.readonly?this.renderReadonly():this.renderInteractive(),this.renderHelperLine())}get ariaDescribedBy(){return this.helperText?this.helperTextId:void 0}get host(){return r(this)}};h.style='@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}';export{h as limel_switch}