@lanaco/lnc-react-ui/dist/Toggle.cjs

React component library

"use strict";const s=require("react/jsx-runtime"),I=require("react"),o=require("./index-BPVoEhTF.cjs"),f=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),t=require("./utils-NZLCh-J5.cjs"),v=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),n={containerWidth:{small:"2.5rem",medium:"3rem",large:"3.5rem"},containerHeight:{small:"1.5rem",medium:"1.75rem",large:"2rem"},slider:{small:"1rem",medium:"1.25rem",large:"1.5rem"},icon:{small:"0.75rem",medium:"0.875rem",large:"1rem"},iconOff:{small:"0.625rem",medium:"0.6875rem",large:"0.75rem"}},V={checked:{left:{small:"1.25rem",medium:"1.5rem",large:"1.75rem"}}},l={on:{top:{small:"0.25rem",medium:"0.25rem",large:"0.25rem"},left:{small:"1.375rem",medium:"1.6875rem",large:"2rem"},right:{small:"0.5rem",medium:"0.5rem",large:"0.5rem"}},off:{top:{small:"0.375rem",medium:"0.4375rem",large:"0.5rem"},left:{small:"1.375rem",medium:"1.75rem",large:"2.125rem"},right:{small:"0.5rem",medium:"0.5rem",large:"0.5rem"}}},S=e=>e=="left"?"row-reverse":"row",j=f.newStyled.label`
  box-sizing: content-box !important;
  width: 100%;
  text-align: left;
  line-height: 1.5;
  display: flex;
  gap: 0.75rem;
  flex-direction: ${e=>S(e.labelPosition)};
  ${e=>e.spaceBetween==!0&&"justify-content: space-between;"}
  position: relative;
  cursor: ${e=>e.disabled||e.readOnly?"default":"pointer"};
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  align-items: center;
  flex-shrink: 0;

  min-height: ${e=>e.theme.sizes[e.size]};
  max-height: ${e=>e.theme.sizes[e.size]};

  & input:focus:enabled ~ span.toggle-slider {
    ${e=>!e.disabled&&t.getOutlineCss(e.theme)};
  }

  & input:hover:enabled ~ span.toggle-slider {
    background-color: ${e=>t.getColorRgbaValue(e.theme,"Toggle",null,"hover","background","backgroundOpacity")};
  }

  & input:checked:hover:enabled ~ span.toggle-slider {
    background-color: ${e=>t.getColorRgbaValue(e.theme,"Toggle",e.color,"hover","background")};
  }

  & input {
    position: absolute;
    cursor: pointer;
    opacity: 0;
    height: 100%;
    width: 100%;
    transition: all 0.2s ease;
  }

  & input:checked ~ span.toggle-slider {
    background-color: ${e=>e.disabled!==!0?t.getColorRgbaValue(e.theme,"Toggle",e.color,"enabled","background"):t.getColorRgbaValue(e.theme,"Toggle",e.color,"disabled","background","backgroundOpacity")};
    transition: all 0.2s ease;
    border-radius: 100px;
    flex-shrink: 0;
  }

  & input:checked ~ span.toggle-slider:after {
    opacity: 1;
    transition: all 0.2s ease-out;
    box-sizing: content-box;
    left: ${e=>V.checked.left[e.size]};
    position: absolute;
    border-radius: 100px;
    box-shadow: 1px 1px 0.25rem rgba(15, 23, 42, 0.16);
    background-color: ${e=>e.disabled===!0?t.getColorRgbaValue(e.theme,"ToggleSlider",e.color,"disabled","background","backgroundOpacity"):t.getColorRgbaValue(e.theme,"ToggleSlider",e.color,"enabled","background","backgroundOpacity")};
  }

  & span.toggle-slider {
    width: ${e=>n.containerWidth[e.size]};
    height: ${e=>n.containerHeight[e.size]};
    border-radius: 100px;
    font-size: ${e=>n.icon[e.size]};
    flex-shrink: 0;
  }

  & span.toggle-slider::after {
    left: 0.25rem;
    width: ${e=>n.slider[e.size]};
    height: ${e=>n.slider[e.size]};
    top: 0.25rem;
    border-radius: 100px;
    box-shadow: 1px 1px 0.25rem; rgba(15, 23, 42, 0.16);
    flex-shrink: 0;
  }

  & span.toggle-slider::before {
    content: "${e=>e.unicodeIcon?"\\"+e.unicodeIcon:""}";
    font-family: FontAwesome;
    font-weight: 900;
    width: ${e=>n.icon[e.size]};
    text-align: center;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;

    position: absolute;
    color: ${e=>t.getColorRgbaValue(e.theme,"ToggleIcon",e.color,"enabled","text")};
      flex-shrink: 0;
    border-radius: 100px;
    z-index: 2;

    font-size: ${e=>n.iconOff[e.size]};
    width: ${e=>n.iconOff[e.size]};

    top: ${e=>l.off.top[e.size]};
    right: ${e=>l.off.right[e.size]};
    left: ${e=>l.off.left[e.size]};
  }

  & input:checked ~ span.toggle-slider::before {
    content: "${e=>e.unicodeIcon?"\\"+e.unicodeIcon:""}";
    font-family: FontAwesome;
    font-weight: 900;
    width: ${e=>n.icon[e.size]};
    text-align: center;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    flex-shrink: 0;
    color: ${e=>t.getColorRgbaValue(e.theme,"ToggleIcon",e.color,"enabled","text")};

    font-size: ${e=>n.icon[e.size]};
    width: ${e=>n.icon[e.size]};

    top: ${e=>l.on.top[e.size]};
    right: ${e=>l.on.right[e.size]};
    left: ${e=>l.on.left[e.size]};
  }

  & span.toggle-slider {
    position: relative;
    width: ${e=>n.containerWidth[e.size]};
    height: ${e=>n.containerHeight[e.size]};
    background-color: ${e=>e.disabled!==!0?t.getColorRgbaValue(e.theme,"Toggle",null,"enabled","background","backgroundOpacity"):t.getColorRgbaValue(e.theme,"Toggle",null,"disabled","background","backgroundOpacity")};
    transition: all 0.2s ease;
    flex-shrink: 0;
  }

  & span.toggle-slider:after {
    content: "";
    position: absolute;
    opacity: 1;
    flex-shrink: 0;
    background-color: ${e=>e.disabled===!0?t.getColorRgbaValue(e.theme,"ToggleSlider",e.color,"disabled","background","backgroundOpacity"):t.getColorRgbaValue(e.theme,"ToggleSlider",e.color,"enabled","background","backgroundOpacity")};

    box-shadow: 1px 1px 0.25rem rgba(15, 23, 42, 0.16);
    transition: all 0.2s ease-out;
  }
`,q=f.newStyled.span`
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 3;

  ${e=>e.disabled?t.getComponentTypographyCss(e.theme,"Toggle",e.size,"disabled"):t.getComponentTypographyCss(e.theme,"Toggle",e.size,"enabled")};
`,p=e=>{const{disabled:g,readOnly:d,value:c,label:m,labelPosition:y="right",spaceBetween:x,unicodeIcon:k,onChange:u,change:F,onFocus:i,onBlur:a,className:T="",style:$={},size:z="medium",color:w="primary",...C}=e,P=v.useTheme(),[O,b]=I.useState(!1);let h={theme:P,size:z,color:w,disabled:g,readOnly:d,focused:O,labelPosition:y,spaceBetween:x};function R(r){g||d||(c===null?u(r,!1):u(r,!c))}return s.jsxs(j,{...h,className:T,style:$,unicodeIcon:k,tabIndex:-1,children:[s.jsx("input",{type:"checkbox",checked:c?"checked":"",disabled:g,readOnly:d,onChange:R,onFocus:r=>{b(!0),i&&(i==null||i(r))},onBlur:r=>{b(!1),a&&(a==null||a(r))},...C}),s.jsx("span",{tabIndex:-1,className:"toggle-slider"}),m&&s.jsx(q,{tabIndex:-1,title:m,...h,children:m})]})};p.propTypes={id:o.PropTypes.any,disabled:o.PropTypes.bool,readOnly:o.PropTypes.bool,label:o.PropTypes.oneOfType([o.PropTypes.element,o.PropTypes.string]),unicodeIcon:o.PropTypes.string,labelPosition:o.PropTypes.oneOf(["right","left"]),spaceBetween:o.PropTypes.bool,tabIndex:o.PropTypes.number,onChange:o.PropTypes.func,change:o.PropTypes.func,onFocus:o.PropTypes.func,onBlur:o.PropTypes.func,style:o.PropTypes.object,className:o.PropTypes.string,size:o.PropTypes.oneOf(["small","medium","large"]),color:o.PropTypes.oneOf(["primary","secondary","success","warning","danger","information","neutral","gray"])};module.exports=p;