@sap-ux/ui-components/storybook/UIToggle-story.9f5958c3.iframe.bundle.js

SAP UI Components Library

(()=>{var P=Object.defineProperty,O=Object.defineProperties;var U=Object.getOwnPropertyDescriptors;var S=Object.getOwnPropertySymbols;var j=Object.prototype.hasOwnProperty,A=Object.prototype.propertyIsEnumerable;var C=(i,o,s)=>o in i?P(i,o,{enumerable:!0,configurable:!0,writable:!0,value:s}):i[o]=s,y=(i,o)=>{for(var s in o||(o={}))j.call(o,s)&&C(i,s,o[s]);if(S)for(var s of S(o))A.call(o,s)&&C(i,s,o[s]);return i},I=(i,o)=>O(i,U(o));(self.webpackChunk_sap_ux_ui_components=self.webpackChunk_sap_ux_ui_components||[]).push([[673],{"../../node_modules/.pnpm/css-loader@7.1.4_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[12].use[1]!../../node_modules/.pnpm/sass-loader@16.0.7_sass-embedded@1.97.3_sass@1.101.0_webpack@5.105.0_@swc+core@1.15.18__732f0ac8c0547d446bff736b53e6fec4/node_modules/sass-loader/dist/cjs.js!./src/components/UIIcon/UIIcon.scss"(i,o,s){var d=s("../../node_modules/.pnpm/css-loader@7.1.4_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/css-loader/dist/runtime/noSourceMaps.js"),e=s("../../node_modules/.pnpm/css-loader@7.1.4_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/css-loader/dist/runtime/api.js"),_=e(d);_.push([i.id,".ts-icon{fill:var(--vscode-foreground)}",""]),i.exports=_},"../../node_modules/.pnpm/css-loader@7.1.4_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[12].use[1]!../../node_modules/.pnpm/sass-loader@16.0.7_sass-embedded@1.97.3_sass@1.101.0_webpack@5.105.0_@swc+core@1.15.18__732f0ac8c0547d446bff736b53e6fec4/node_modules/sass-loader/dist/cjs.js!./src/helper/ValidationMessage/MessageWrapper.scss"(i,o,s){var d=s("../../node_modules/.pnpm/css-loader@7.1.4_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/css-loader/dist/runtime/noSourceMaps.js"),e=s("../../node_modules/.pnpm/css-loader@7.1.4_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/css-loader/dist/runtime/api.js"),_=e(d);_.push([i.id,".ts-message-wrapper .ts-message-body{display:flex;font-size:11px}.ts-message-wrapper .ts-message-body>span{padding-top:1px}.ts-message-wrapper .ts-message-body>i{margin:1px 2px 0 0}.ts-message-wrapper--error .ts-message-body{color:var(--vscode-errorForeground)}.ts-message-wrapper--warning .ts-message-body{color:var(--vscode-editorMarkerNavigationWarning-background)}.ts-message-wrapper--info .ts-message-body{color:var(--vscode-inputValidation-infoBorder)}.ts-message-wrapper--info .ts-icon svg path{fill:var(--vscode-inputValidation-infoBorder)}.ts-message-wrapper--horizontal{display:flex}.ts-message-wrapper--horizontal .ts-message-body{align-self:flex-end;margin:0 0 7px 5px}",""]),i.exports=_},"../../node_modules/.pnpm/css-loader@7.1.4_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/css-loader/dist/runtime/api.js"(i){"use strict";i.exports=function(o){var s=[];return s.toString=function(){return this.map(function(e){var _="",t=typeof e[5]!="undefined";return e[4]&&(_+="@supports (".concat(e[4],") {")),e[2]&&(_+="@media ".concat(e[2]," {")),t&&(_+="@layer".concat(e[5].length>0?" ".concat(e[5]):""," {")),_+=o(e),t&&(_+="}"),e[2]&&(_+="}"),e[4]&&(_+="}"),_}).join("")},s.i=function(e,_,t,r,a){typeof e=="string"&&(e=[[null,e,void 0]]);var n={};if(t)for(var c=0;c<this.length;c++){var m=this[c][0];m!=null&&(n[m]=!0)}for(var b=0;b<e.length;b++){var l=[].concat(e[b]);t&&n[l[0]]||(typeof a!="undefined"&&(typeof l[5]=="undefined"||(l[1]="@layer".concat(l[5].length>0?" ".concat(l[5]):""," {").concat(l[1],"}")),l[5]=a),_&&(l[2]&&(l[1]="@media ".concat(l[2]," {").concat(l[1],"}")),l[2]=_),r&&(l[4]?(l[1]="@supports (".concat(l[4],") {").concat(l[1],"}"),l[4]=r):l[4]="".concat(r)),s.push(l))}},s}},"../../node_modules/.pnpm/css-loader@7.1.4_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/css-loader/dist/runtime/noSourceMaps.js"(i){"use strict";i.exports=function(o){return o[1]}},"./src/components/UIIcon/UIIcon.scss"(i,o,s){"use strict";s.r(o),s.d(o,{default:()=>p});var d=s("../../node_modules/.pnpm/style-loader@4.0.0_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"),e=s.n(d),_=s("../../node_modules/.pnpm/style-loader@4.0.0_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/style-loader/dist/runtime/styleDomAPI.js"),t=s.n(_),r=s("../../node_modules/.pnpm/style-loader@4.0.0_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/style-loader/dist/runtime/insertBySelector.js"),a=s.n(r),n=s("../../node_modules/.pnpm/style-loader@4.0.0_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js"),c=s.n(n),m=s("../../node_modules/.pnpm/style-loader@4.0.0_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/style-loader/dist/runtime/insertStyleElement.js"),b=s.n(m),l=s("../../node_modules/.pnpm/style-loader@4.0.0_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/style-loader/dist/runtime/styleTagTransform.js"),u=s.n(l),v=s("../../node_modules/.pnpm/css-loader@7.1.4_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[12].use[1]!../../node_modules/.pnpm/sass-loader@16.0.7_sass-embedded@1.97.3_sass@1.101.0_webpack@5.105.0_@swc+core@1.15.18__732f0ac8c0547d446bff736b53e6fec4/node_modules/sass-loader/dist/cjs.js!./src/components/UIIcon/UIIcon.scss"),g=s.n(v),h={};for(const w in v)w!=="default"&&(h[w]=()=>v[w]);s.d(o,h);var f={};f.styleTagTransform=u(),f.setAttributes=c(),f.insert=a().bind(null,"head"),f.domAPI=t(),f.insertStyleElement=b();var E=e()(g(),f);const p=g()&&g().locals?g().locals:void 0},"./src/helper/ValidationMessage/MessageWrapper.scss"(i,o,s){"use strict";s.r(o),s.d(o,{default:()=>p});var d=s("../../node_modules/.pnpm/style-loader@4.0.0_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"),e=s.n(d),_=s("../../node_modules/.pnpm/style-loader@4.0.0_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/style-loader/dist/runtime/styleDomAPI.js"),t=s.n(_),r=s("../../node_modules/.pnpm/style-loader@4.0.0_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/style-loader/dist/runtime/insertBySelector.js"),a=s.n(r),n=s("../../node_modules/.pnpm/style-loader@4.0.0_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js"),c=s.n(n),m=s("../../node_modules/.pnpm/style-loader@4.0.0_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/style-loader/dist/runtime/insertStyleElement.js"),b=s.n(m),l=s("../../node_modules/.pnpm/style-loader@4.0.0_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/style-loader/dist/runtime/styleTagTransform.js"),u=s.n(l),v=s("../../node_modules/.pnpm/css-loader@7.1.4_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[12].use[1]!../../node_modules/.pnpm/sass-loader@16.0.7_sass-embedded@1.97.3_sass@1.101.0_webpack@5.105.0_@swc+core@1.15.18__732f0ac8c0547d446bff736b53e6fec4/node_modules/sass-loader/dist/cjs.js!./src/helper/ValidationMessage/MessageWrapper.scss"),g=s.n(v),h={};for(const w in v)w!=="default"&&(h[w]=()=>v[w]);s.d(o,h);var f={};f.styleTagTransform=u(),f.setAttributes=c(),f.insert=a().bind(null,"head"),f.domAPI=t(),f.insertStyleElement=b();var E=e()(g(),f);const p=g()&&g().locals?g().locals:void 0},"../../node_modules/.pnpm/style-loader@4.0.0_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"(i){"use strict";var o=[];function s(_){for(var t=-1,r=0;r<o.length;r++)if(o[r].identifier===_){t=r;break}return t}function d(_,t){for(var r={},a=[],n=0;n<_.length;n++){var c=_[n],m=t.base?c[0]+t.base:c[0],b=r[m]||0,l="".concat(m," ").concat(b);r[m]=b+1;var u=s(l),v={css:c[1],media:c[2],sourceMap:c[3],supports:c[4],layer:c[5]};if(u!==-1)o[u].references++,o[u].updater(v);else{var g=e(v,t);t.byIndex=n,o.splice(n,0,{identifier:l,updater:g,references:1})}a.push(l)}return a}function e(_,t){var r=t.domAPI(t);r.update(_);var a=function(c){if(c){if(c.css===_.css&&c.media===_.media&&c.sourceMap===_.sourceMap&&c.supports===_.supports&&c.layer===_.layer)return;r.update(_=c)}else r.remove()};return a}i.exports=function(_,t){t=t||{},_=_||[];var r=d(_,t);return function(n){n=n||[];for(var c=0;c<r.length;c++){var m=r[c],b=s(m);o[b].references--}for(var l=d(n,t),u=0;u<r.length;u++){var v=r[u],g=s(v);o[g].references===0&&(o[g].updater(),o.splice(g,1))}r=l}}},"../../node_modules/.pnpm/style-loader@4.0.0_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/style-loader/dist/runtime/insertBySelector.js"(i){"use strict";var o={};function s(e){if(typeof o[e]=="undefined"){var _=document.querySelector(e);if(window.HTMLIFrameElement&&_ instanceof window.HTMLIFrameElement)try{_=_.contentDocument.head}catch(t){_=null}o[e]=_}return o[e]}function d(e,_){var t=s(e);if(!t)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");t.appendChild(_)}i.exports=d},"../../node_modules/.pnpm/style-loader@4.0.0_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/style-loader/dist/runtime/insertStyleElement.js"(i){"use strict";function o(s){var d=document.createElement("style");return s.setAttributes(d,s.attributes),s.insert(d,s.options),d}i.exports=o},"../../node_modules/.pnpm/style-loader@4.0.0_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js"(i,o,s){"use strict";function d(e){var _=s.nc;_&&e.setAttribute("nonce",_)}i.exports=d},"../../node_modules/.pnpm/style-loader@4.0.0_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/style-loader/dist/runtime/styleDomAPI.js"(i){"use strict";function o(e,_,t){var r="";t.supports&&(r+="@supports (".concat(t.supports,") {")),t.media&&(r+="@media ".concat(t.media," {"));var a=typeof t.layer!="undefined";a&&(r+="@layer".concat(t.layer.length>0?" ".concat(t.layer):""," {")),r+=t.css,a&&(r+="}"),t.media&&(r+="}"),t.supports&&(r+="}");var n=t.sourceMap;n&&typeof btoa!="undefined"&&(r+=`
/*# sourceMappingURL=data:application/json;base64,`.concat(btoa(unescape(encodeURIComponent(JSON.stringify(n))))," */")),_.styleTagTransform(r,e,_.options)}function s(e){if(e.parentNode===null)return!1;e.parentNode.removeChild(e)}function d(e){if(typeof document=="undefined")return{update:function(){},remove:function(){}};var _=e.insertStyleElement(e);return{update:function(r){o(_,e,r)},remove:function(){s(_)}}}i.exports=d},"../../node_modules/.pnpm/style-loader@4.0.0_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/style-loader/dist/runtime/styleTagTransform.js"(i){"use strict";function o(s,d){if(d.styleSheet)d.styleSheet.cssText=s;else{for(;d.firstChild;)d.removeChild(d.firstChild);d.appendChild(document.createTextNode(s))}}i.exports=o},"./src/components/UIIcon/UIIcon.tsx"(i,o,s){"use strict";var d=this&&this.__importDefault||function(r){return r&&r.__esModule?r:{default:r}};Object.defineProperty(o,"__esModule",{value:!0}),o.UIIcon=void 0;const e=d(s("../../node_modules/.pnpm/react@16.14.0/node_modules/react/index.js")),_=s("../../node_modules/.pnpm/@fluentui+react@8.125.6_@types+react-dom@16.9.25_@types+react@16.14.69__@types+react@16_03684c25d5c3502754322356d0aa96d9/node_modules/@fluentui/react/lib-commonjs/index.js");s("./src/components/UIIcon/UIIcon.scss");class t extends e.default.Component{constructor(a){super(a),this.setStyle=()=>({})}render(){const a=this.props.className?` ${this.props.className}`:"";return e.default.createElement(_.Icon,I(y({},this.props),{className:`ts-icon${a}`,styles:this.setStyle()}))}}o.UIIcon=t,t.__docgenInfo={description:`UIIcon component
based on https://developer.microsoft.com/en-us/fluentui#/controls/web/button

@exports
@class UIIcon
@extends {React.Component<IIconProps, {}>}`,methods:[{name:"setStyle",docblock:null,modifiers:[],params:[],returns:{type:{name:"IIconStyles"}}}],displayName:"UIIcon"}},"./src/components/UIIcon/index.tsx"(i,o,s){"use strict";var d=this&&this.__createBinding||(Object.create?(function(_,t,r,a){a===void 0&&(a=r);var n=Object.getOwnPropertyDescriptor(t,r);(!n||("get"in n?!t.__esModule:n.writable||n.configurable))&&(n={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(_,a,n)}):(function(_,t,r,a){a===void 0&&(a=r),_[a]=t[r]})),e=this&&this.__exportStar||function(_,t){for(var r in _)r!=="default"&&!Object.prototype.hasOwnProperty.call(t,r)&&d(t,_,r)};Object.defineProperty(o,"__esModule",{value:!0}),e(s("./src/components/UIIcon/UIIcon.tsx"),o)},"./src/components/UIToggle/UIToggle.tsx"(i,o,s){"use strict";var d=this&&this.__importDefault||function(g){return g&&g.__esModule?g:{default:g}};Object.defineProperty(o,"__esModule",{value:!0}),o.UIToggle=o.UIToggleSize=void 0;const e=d(s("../../node_modules/.pnpm/react@16.14.0/node_modules/react/index.js")),_=d(s("../../node_modules/.pnpm/react-dom@16.14.0_react@16.14.0/node_modules/react-dom/index.js")),t=s("../../node_modules/.pnpm/@fluentui+react@8.125.6_@types+react-dom@16.9.25_@types+react@16.14.69__@types+react@16_03684c25d5c3502754322356d0aa96d9/node_modules/@fluentui/react/lib-commonjs/index.js"),r=s("./src/helper/ValidationMessage/index.tsx"),a=s("./src/components/UIIcon/index.tsx"),n=s("./src/components/Icons.tsx");var c;(function(g){g.Standard="Standard",g.Small="Small"})(c||(o.UIToggleSize=c={}));const m={width:30,height:18,padding:"0 1px",margin:"0",label:{fontSize:13,padding:"0px 0px 1px 0px"},circle:{width:14,height:14,borderWidth:1}},b={display:"flex"},l=.4,u={pill:{unchecked:{background:"var(--vscode-editorWidget-background)",borderColor:"var(--vscode-editorWidget-border)",hover:{background:"var(--vscode-editorWidget-background)",borderColor:"var(--vscode-editorWidget-border)"}},checked:{background:"var(--vscode-editorWidget-background)",borderColor:"var(--vscode-contrastActiveBorder, var(--vscode-editorWidget-border))",hover:{background:"var(--vscode-editorWidget-background)",borderColor:"var(--vscode-contrastActiveBorder, var(--vscode-editorWidget-border))"}},focus:{outline:"1px solid var(--vscode-focusBorder) !important"}},thumb:{unchecked:{background:"var(--vscode-button-secondaryBackground)",borderColor:"var(--vscode-button-secondaryBorder, var(--vscode-button-border, transparent))",hover:{borderColor:"var(--vscode-button-secondaryBorder, var(--vscode-button-border, transparent))",background:"var(--vscode-contrastBorder, var(--vscode-button-secondaryHoverBackground))"}},checked:{background:"var(--vscode-button-background)",borderColor:"var(--vscode-contrastActiveBorder, var(--vscode-button-border, transparent))",hover:{borderColor:"var(--vscode-contrastActiveBorder, var(--vscode-button-border, transparent))",background:"var(--vscode-contrastActiveBorder, var(--vscode-button-hoverBackground))"}}}};class v extends e.default.Component{constructor(h){super(h),this.toggleRootRef=e.default.createRef(),this.handleChange=this.handleChange.bind(this),this.replaceThumbWithIcon=this.replaceThumbWithIcon.bind(this)}componentDidMount(){var h;this.replaceThumbWithIcon((h=this.props.checked)!=null?h:this.props.defaultChecked)}shouldComponentUpdate(h){return h.checked!==this.props.checked&&this.replaceThumbWithIcon(h.checked),!0}handleChange(h,f){var E,p;this.replaceThumbWithIcon(f),(p=(E=this.props).onChange)==null||p.call(E,h,f)}replaceThumbWithIcon(h=!1){var f;if(this.toggleRootRef.current){const E=(f=this.toggleRootRef.current)==null?void 0:f.querySelector(".ms-Toggle-thumb");E&&_.default.render(e.default.createElement(a.UIIcon,{iconName:h?n.UiIcons.SwitchOn:n.UiIcons.SwitchOff,style:b}),E)}}getMarginBottom(h){const{inlineLabel:f}=this.props;if(h)return f?0:4}render(){const{inlineLabelLeft:h,labelFlexGrow:f,inlineLabel:E}=this.props,p=m,w=(0,r.getMessageInfo)(this.props),k=M=>({root:I(y({},f&&{flexGrow:1,justifyContent:"space-between"}),{margin:p==null?void 0:p.margin,marginBottom:this.getMarginBottom(w.message)}),label:I(y(y({color:"var(--vscode-foreground)",fontWeight:"normal",fontSize:p==null?void 0:p.label.fontSize,padding:p==null?void 0:p.label.padding},E&&{marginLeft:10}),h&&{order:0,marginLeft:0,marginRight:10}),{opacity:this.props.disabled?l:"inherit"}),pill:I(y({height:p==null?void 0:p.height,width:p==null?void 0:p.width,padding:p==null?void 0:p.padding,borderRadius:"var(--vscode-cornerRadius-circle, 9999px)",background:u.pill.checked.background,borderColor:u.pill.checked.borderColor,borderStyle:"solid",":hover .ms-Toggle-thumb":{background:u.thumb.checked.hover.background,borderColor:u.thumb.checked.hover.borderColor},":hover":{background:u.pill.checked.hover.background,borderColor:u.pill.checked.hover.borderColor},":disabled":{background:u.pill.checked.background,borderColor:u.pill.checked.borderColor,opacity:l}},!M.checked&&{background:u.pill.unchecked.background,borderColor:u.pill.unchecked.borderColor,borderStyle:"solid",":hover .ms-Toggle-thumb":{background:u.thumb.unchecked.hover.background,borderColor:u.thumb.unchecked.hover.borderColor},":hover":{background:u.pill.unchecked.hover.background,borderColor:u.pill.unchecked.hover.borderColor},":disabled":{background:u.pill.unchecked.background,borderColor:u.pill.unchecked.borderColor,opacity:l}}),{selectors:{":focus::after":{border:"none !important",outline:u.pill.focus.outline}}}),thumb:I(y({height:p==null?void 0:p.circle.height,width:p==null?void 0:p.circle.width,borderWidth:p==null?void 0:p.circle.borderWidth,backgroundPosition:"center",borderColor:u.thumb.checked.borderColor,backgroundColor:u.thumb.checked.background,":hover":{background:u.thumb.checked.hover.background,borderColor:u.thumb.checked.hover.borderColor}},!M.checked&&{borderColor:u.thumb.unchecked.borderColor,backgroundColor:u.thumb.unchecked.background}),{svg:{width:"100%",height:"100%",path:{fill:M.checked?"var(--vscode-button-foreground)":"var(--vscode-button-secondaryForeground)"}}})}),T=e.default.createElement(t.Toggle,I(y({},this.props),{styles:k,ref:this.toggleRootRef,onChange:this.handleChange}));return w.message?e.default.createElement(r.MessageWrapper,{message:w},T):T}}o.UIToggle=v,v.__docgenInfo={description:`UIToggle component.
based on https://developer.microsoft.com/en-us/fluentui#/controls/web/toggle

@exports
@class UIToggle
@extends {React.Component<IToggleProps, {}>}`,methods:[{name:"handleChange",docblock:`Handles the change event triggered by the user interaction.

@param {React.MouseEvent<HTMLElement>} event - The mouse event object associated with the interaction.
@param {boolean} [checked] - An optional parameter indicating the current state of the interaction.
@returns {void} This method does not return a value.`,modifiers:[],params:[{name:"event",description:"The mouse event object associated with the interaction.",type:{name:"ReactMouseEvent",raw:"React.MouseEvent<HTMLElement>",elements:[{name:"HTMLElement"}],alias:"React.MouseEvent"},optional:!1},{name:"checked",optional:!0,type:{name:"boolean"}}],returns:null,description:"Handles the change event triggered by the user interaction."},{name:"replaceThumbWithIcon",docblock:"Replaces the thumb element of a toggle switch with an icon based on the toggle's state.\n\n@param {boolean} [checked] Optional. Represents the state of the toggle switch. If not provided, it checks `defaultChecked` prop or defaults to `false`.\n@returns {void} Does not return a value.",modifiers:[],params:[{name:"checked",optional:!0}],returns:{type:{name:"void"}},description:"Replaces the thumb element of a toggle switch with an icon based on the toggle's state."},{name:"getMarginBottom",docblock:`Method returns size of margin bottom for root container depending on current props state.

@param {string} [message] Validation message.
@returns {number | undefined} Value for margin bottom.`,modifiers:[],params:[{name:"message",optional:!0,type:{name:"string"}}],returns:{type:{name:"union",raw:"number | undefined",elements:[{name:"number"},{name:"undefined"}]}},description:"Method returns size of margin bottom for root container depending on current props state."}],displayName:"UIToggle",props:{warningMessage:{required:!1,tsType:{name:"string"},description:""},infoMessage:{required:!1,tsType:{name:"string"},description:""},errorMessage:{required:!1,tsType:{name:"string"},description:""},inlineLabelLeft:{required:!1,tsType:{name:"boolean"},description:""},labelFlexGrow:{required:!1,tsType:{name:"boolean"},description:""},size:{required:!1,tsType:{name:"UIToggleSize"},description:""}},composes:["IToggleProps"]}},"./src/components/UIToggle/index.tsx"(i,o,s){"use strict";var d=this&&this.__createBinding||(Object.create?(function(_,t,r,a){a===void 0&&(a=r);var n=Object.getOwnPropertyDescriptor(t,r);(!n||("get"in n?!t.__esModule:n.writable||n.configurable))&&(n={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(_,a,n)}):(function(_,t,r,a){a===void 0&&(a=r),_[a]=t[r]})),e=this&&this.__exportStar||function(_,t){for(var r in _)r!=="default"&&!Object.prototype.hasOwnProperty.call(t,r)&&d(t,_,r)};Object.defineProperty(o,"__esModule",{value:!0}),e(s("./src/components/UIToggle/UIToggle.tsx"),o)},"./src/helper/ValidationMessage/MessageWrapper.tsx"(i,o,s){"use strict";var d=this&&this.__importDefault||function(n){return n&&n.__esModule?n:{default:n}};Object.defineProperty(o,"__esModule",{value:!0}),o.MESSAGE_ICONS_MAP=void 0,o.MessageWrapper=a;const e=d(s("../../node_modules/.pnpm/react@16.14.0/node_modules/react/index.js")),_=s("./src/helper/ValidationMessage/utils.ts"),t=s("./src/components/Icons.tsx"),r=s("./src/components/UIIcon/index.tsx");s("./src/helper/ValidationMessage/MessageWrapper.scss"),o.MESSAGE_ICONS_MAP=new Map([[void 0,t.UiIcons.Error],[_.ErrorMessageType.Error,t.UiIcons.Error],[_.ErrorMessageType.Warning,t.UiIcons.Warning],[_.ErrorMessageType.Info,t.UiIcons.Info]]);function a(n){const{children:c,message:m}=n,b=m.message?_.MESSAGE_TYPES_CLASSNAME_MAP.get(m.type):void 0,l=o.MESSAGE_ICONS_MAP.get(m.type);return e.default.createElement("div",{className:`ts-message-wrapper ts-message-wrapper--${b}`},e.default.createElement("div",{className:"ts-message-target"},c),e.default.createElement("div",{className:"ts-message-body"},e.default.createElement(r.UIIcon,{iconName:l}),e.default.createElement("span",null,m.message)))}a.__docgenInfo={description:`Method return MessageWrapper react element.

@param props
@returns {React.ReactElement}`,methods:[],displayName:"MessageWrapper"}},"./src/helper/ValidationMessage/index.tsx"(i,o,s){"use strict";var d=this&&this.__createBinding||(Object.create?(function(_,t,r,a){a===void 0&&(a=r);var n=Object.getOwnPropertyDescriptor(t,r);(!n||("get"in n?!t.__esModule:n.writable||n.configurable))&&(n={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(_,a,n)}):(function(_,t,r,a){a===void 0&&(a=r),_[a]=t[r]})),e=this&&this.__exportStar||function(_,t){for(var r in _)r!=="default"&&!Object.prototype.hasOwnProperty.call(t,r)&&d(t,_,r)};Object.defineProperty(o,"__esModule",{value:!0}),e(s("./src/helper/ValidationMessage/MessageWrapper.tsx"),o),e(s("./src/helper/ValidationMessage/utils.ts"),o)},"./src/helper/ValidationMessage/utils.ts"(i,o){"use strict";Object.defineProperty(o,"__esModule",{value:!0}),o.getMessageInfo=o.MESSAGE_TYPES_CLASSNAME_MAP=o.ErrorMessageType=void 0;var s;(function(n){n.Error="Error",n.Warning="Warning",n.Info="Info"})(s||(o.ErrorMessageType=s={}));const d=(n,c)=>{const m=`1px solid ${c}`;return{backgroundColor:n,borderLeft:m,borderRight:m,borderTop:m,borderBottom:m,borderColor:c}},e={error:I(y({color:"var(--vscode-input-foreground)"},d("var(--vscode-inputValidation-errorBackground)","var(--vscode-inputValidation-errorBorder)")),{paddingTop:4,paddingBottom:5,paddingLeft:8,margin:"-1px 0 0",borderRadius:0,animation:"none"}),warning:{},info:{}};e.warning=y(y({},e.error),d("var(--vscode-inputValidation-warningBackground)","var(--vscode-inputValidation-warningBorder)")),e.info=y(y({},e.error),d("var(--vscode-inputValidation-infoBackground)","var(--vscode-inputValidation-infoBorder)")),o.MESSAGE_TYPES_CLASSNAME_MAP=new Map([[void 0,"error"],[s.Error,"error"],[s.Warning,"warning"],[s.Info,"info"]]);const _=n=>{let c;switch(n){case s.Warning:{c=e.warning;break}case s.Info:{c=e.info;break}default:{c=e.error;break}}return c},t=n=>{if(n){if(n.errorMessage)return s.Error;if(n.warningMessage)return s.Warning;if(n.infoMessage)return s.Info}return s.Error},r=n=>{const c=["errorMessage","warningMessage","infoMessage"];for(const m of c)if(n!=null&&n[m])return n[m]},a=n=>{const c=t(n);return{type:c,style:_(c),message:r(n)}};o.getMessageInfo=a},"./stories/UIToggle.story.tsx"(i,o,s){"use strict";var d=this&&this.__importDefault||function(l){return l&&l.__esModule?l:{default:l}};Object.defineProperty(o,"__esModule",{value:!0}),o.withMessages=o.smallSize=o.withLabel=o.asDisabled=o.defaultUsage=void 0;const e=d(s("../../node_modules/.pnpm/react@16.14.0/node_modules/react/index.js")),_=s("../../node_modules/.pnpm/@fluentui+react@8.125.6_@types+react-dom@16.9.25_@types+react@16.14.69__@types+react@16_03684c25d5c3502754322356d0aa96d9/node_modules/@fluentui/react/lib-commonjs/index.js"),t=s("./src/components/UIToggle/index.tsx");o.default={title:"Basic Inputs/Toggle/Buttons"};const r={childrenGap:40},a=()=>e.default.createElement(_.Stack,{tokens:r,style:{width:300}},e.default.createElement(_.Text,{variant:"large",className:"textColor"},"UIToggle"),e.default.createElement(_.Stack,{tokens:{childrenGap:16}},e.default.createElement(_.Text,{variant:"medium",className:"textColor"},"default"),e.default.createElement(t.UIToggle,null)),e.default.createElement(_.Stack,{tokens:{childrenGap:16}},e.default.createElement(_.Text,{variant:"medium",className:"textColor"},"set to checked"),e.default.createElement(t.UIToggle,{defaultChecked:!0})));o.defaultUsage=a;const n=()=>e.default.createElement(_.Stack,{tokens:r,style:{width:300}},e.default.createElement(_.Text,{variant:"large",className:"textColor"},"UIToggle disabled"),e.default.createElement(_.Stack,{tokens:{childrenGap:16}},e.default.createElement(_.Text,{variant:"medium",className:"textColor"},"default"),e.default.createElement(t.UIToggle,{disabled:!0})),e.default.createElement(_.Stack,{tokens:{childrenGap:16}},e.default.createElement(_.Text,{variant:"medium",className:"textColor"},"disabled as checked"),e.default.createElement(t.UIToggle,{disabled:!0,defaultChecked:!0})));o.asDisabled=n;const c=()=>e.default.createElement(_.Stack,{tokens:r,style:{width:300}},e.default.createElement(_.Text,{variant:"large",className:"textColor"},"UIToggle with label"),e.default.createElement(_.Stack,{tokens:{childrenGap:16}},e.default.createElement(_.Text,{variant:"medium",className:"textColor"},"with inline label"),e.default.createElement(t.UIToggle,{defaultChecked:!0,inlineLabel:!0,label:"Wizard mode"})),e.default.createElement(_.Stack,{tokens:{childrenGap:16}},e.default.createElement(_.Text,{variant:"medium",className:"textColor"},"with inline label on the left"),e.default.createElement(t.UIToggle,{defaultChecked:!0,inlineLabel:!0,label:"Wizard mode",inlineLabelLeft:!0})),e.default.createElement(_.Stack,{tokens:{childrenGap:16}},e.default.createElement(_.Text,{variant:"medium",className:"textColor"},"with Grow label width"),e.default.createElement(t.UIToggle,{defaultChecked:!0,inlineLabel:!0,label:"Wizard mode",inlineLabelLeft:!0,labelFlexGrow:!0})));o.withLabel=c;const m=()=>e.default.createElement(_.Stack,{tokens:r,style:{width:300}},e.default.createElement(_.Text,{variant:"large",className:"textColor"},"UIToggle with label"),e.default.createElement(_.Stack,{tokens:{childrenGap:16}},e.default.createElement(_.Text,{variant:"medium"},"small size"),e.default.createElement(t.UIToggle,{label:"Small toggle",inlineLabel:!0,inlineLabelLeft:!0,size:t.UIToggleSize.Small})));o.smallSize=m;const b=()=>{const l="Dummy message";return e.default.createElement(e.default.Fragment,null,e.default.createElement("div",{style:{width:"300px"}},e.default.createElement(t.UIToggle,{label:"Error",errorMessage:l}),e.default.createElement(t.UIToggle,{label:"Warning",warningMessage:l}),e.default.createElement(t.UIToggle,{label:"Info",infoMessage:l})),e.default.createElement("div",{style:{marginTop:"30px",width:"300px"}},e.default.createElement(t.UIToggle,{label:"Error",inlineLabel:!0,errorMessage:l}),e.default.createElement(t.UIToggle,{label:"Warning",inlineLabel:!0,warningMessage:l,labelFlexGrow:!0}),e.default.createElement(t.UIToggle,{label:"Info",inlineLabel:!0,infoMessage:l})),e.default.createElement("div",{style:{marginTop:"30px",width:"300px"}},e.default.createElement(t.UIToggle,{label:"Error",inlineLabel:!0,inlineLabelLeft:!0,errorMessage:l}),e.default.createElement(t.UIToggle,{label:"Warning",inlineLabel:!0,inlineLabelLeft:!0,warningMessage:l}),e.default.createElement(t.UIToggle,{label:"Info",inlineLabel:!0,inlineLabelLeft:!0,labelFlexGrow:!0,infoMessage:l})))};o.withMessages=b}}]);})();