@sap-ux/ui-components/storybook/UIToggleGroup-story.e8f56c20.iframe.bundle.js

SAP UI Components Library

(()=>{var O=Object.defineProperty,T=Object.defineProperties;var j=Object.getOwnPropertyDescriptors;var w=Object.getOwnPropertySymbols;var U=Object.prototype.hasOwnProperty,M=Object.prototype.propertyIsEnumerable;var E=(d,e,_)=>e in d?O(d,e,{enumerable:!0,configurable:!0,writable:!0,value:_}):d[e]=_,h=(d,e)=>{for(var _ in e||(e={}))U.call(e,_)&&E(d,_,e[_]);if(w)for(var _ of w(e))M.call(e,_)&&E(d,_,e[_]);return d},v=(d,e)=>T(d,j(e));(self.webpackChunk_sap_ux_ui_components=self.webpackChunk_sap_ux_ui_components||[]).push([[218],{"../../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"(d,e,_){var l=_("../../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"),o=_("../../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"),n=o(l);n.push([d.id,".ts-icon{fill:var(--vscode-foreground)}",""]),d.exports=n},"../../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"(d){"use strict";d.exports=function(e){var _=[];return _.toString=function(){return this.map(function(o){var n="",t=typeof o[5]!="undefined";return o[4]&&(n+="@supports (".concat(o[4],") {")),o[2]&&(n+="@media ".concat(o[2]," {")),t&&(n+="@layer".concat(o[5].length>0?" ".concat(o[5]):""," {")),n+=e(o),t&&(n+="}"),o[2]&&(n+="}"),o[4]&&(n+="}"),n}).join("")},_.i=function(o,n,t,s,r){typeof o=="string"&&(o=[[null,o,void 0]]);var a={};if(t)for(var i=0;i<this.length;i++){var f=this[i][0];f!=null&&(a[f]=!0)}for(var u=0;u<o.length;u++){var c=[].concat(o[u]);t&&a[c[0]]||(typeof r!="undefined"&&(typeof c[5]=="undefined"||(c[1]="@layer".concat(c[5].length>0?" ".concat(c[5]):""," {").concat(c[1],"}")),c[5]=r),n&&(c[2]&&(c[1]="@media ".concat(c[2]," {").concat(c[1],"}")),c[2]=n),s&&(c[4]?(c[1]="@supports (".concat(c[4],") {").concat(c[1],"}"),c[4]=s):c[4]="".concat(s)),_.push(c))}},_}},"../../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"(d){"use strict";d.exports=function(e){return e[1]}},"./src/components/UIIcon/UIIcon.scss"(d,e,_){"use strict";_.r(e),_.d(e,{default:()=>P});var 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/injectStylesIntoStyleTag.js"),o=_.n(l),n=_("../../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=_.n(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/insertBySelector.js"),r=_.n(s),a=_("../../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=_.n(a),f=_("../../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"),u=_.n(f),c=_("../../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"),p=_.n(c),m=_("../../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"),b=_.n(m),I={};for(const g in m)g!=="default"&&(I[g]=()=>m[g]);_.d(e,I);var y={};y.styleTagTransform=p(),y.setAttributes=i(),y.insert=r().bind(null,"head"),y.domAPI=t(),y.insertStyleElement=u();var S=o()(b(),y);const P=b()&&b().locals?b().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"(d){"use strict";var e=[];function _(n){for(var t=-1,s=0;s<e.length;s++)if(e[s].identifier===n){t=s;break}return t}function l(n,t){for(var s={},r=[],a=0;a<n.length;a++){var i=n[a],f=t.base?i[0]+t.base:i[0],u=s[f]||0,c="".concat(f," ").concat(u);s[f]=u+1;var p=_(c),m={css:i[1],media:i[2],sourceMap:i[3],supports:i[4],layer:i[5]};if(p!==-1)e[p].references++,e[p].updater(m);else{var b=o(m,t);t.byIndex=a,e.splice(a,0,{identifier:c,updater:b,references:1})}r.push(c)}return r}function o(n,t){var s=t.domAPI(t);s.update(n);var r=function(i){if(i){if(i.css===n.css&&i.media===n.media&&i.sourceMap===n.sourceMap&&i.supports===n.supports&&i.layer===n.layer)return;s.update(n=i)}else s.remove()};return r}d.exports=function(n,t){t=t||{},n=n||[];var s=l(n,t);return function(a){a=a||[];for(var i=0;i<s.length;i++){var f=s[i],u=_(f);e[u].references--}for(var c=l(a,t),p=0;p<s.length;p++){var m=s[p],b=_(m);e[b].references===0&&(e[b].updater(),e.splice(b,1))}s=c}}},"../../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"(d){"use strict";var e={};function _(o){if(typeof e[o]=="undefined"){var n=document.querySelector(o);if(window.HTMLIFrameElement&&n instanceof window.HTMLIFrameElement)try{n=n.contentDocument.head}catch(t){n=null}e[o]=n}return e[o]}function l(o,n){var t=_(o);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(n)}d.exports=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/insertStyleElement.js"(d){"use strict";function e(_){var l=document.createElement("style");return _.setAttributes(l,_.attributes),_.insert(l,_.options),l}d.exports=e},"../../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"(d,e,_){"use strict";function l(o){var n=_.nc;n&&o.setAttribute("nonce",n)}d.exports=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/styleDomAPI.js"(d){"use strict";function e(o,n,t){var s="";t.supports&&(s+="@supports (".concat(t.supports,") {")),t.media&&(s+="@media ".concat(t.media," {"));var r=typeof t.layer!="undefined";r&&(s+="@layer".concat(t.layer.length>0?" ".concat(t.layer):""," {")),s+=t.css,r&&(s+="}"),t.media&&(s+="}"),t.supports&&(s+="}");var a=t.sourceMap;a&&typeof btoa!="undefined"&&(s+=`
/*# sourceMappingURL=data:application/json;base64,`.concat(btoa(unescape(encodeURIComponent(JSON.stringify(a))))," */")),n.styleTagTransform(s,o,n.options)}function _(o){if(o.parentNode===null)return!1;o.parentNode.removeChild(o)}function l(o){if(typeof document=="undefined")return{update:function(){},remove:function(){}};var n=o.insertStyleElement(o);return{update:function(s){e(n,o,s)},remove:function(){_(n)}}}d.exports=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/styleTagTransform.js"(d){"use strict";function e(_,l){if(l.styleSheet)l.styleSheet.cssText=_;else{for(;l.firstChild;)l.removeChild(l.firstChild);l.appendChild(document.createTextNode(_))}}d.exports=e},"./src/components/UIIcon/UIIcon.tsx"(d,e,_){"use strict";var l=this&&this.__importDefault||function(s){return s&&s.__esModule?s:{default:s}};Object.defineProperty(e,"__esModule",{value:!0}),e.UIIcon=void 0;const o=l(_("../../node_modules/.pnpm/react@16.14.0/node_modules/react/index.js")),n=_("../../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");_("./src/components/UIIcon/UIIcon.scss");class t extends o.default.Component{constructor(r){super(r),this.setStyle=()=>({})}render(){const r=this.props.className?` ${this.props.className}`:"";return o.default.createElement(n.Icon,v(h({},this.props),{className:`ts-icon${r}`,styles:this.setStyle()}))}}e.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"(d,e,_){"use strict";var l=this&&this.__createBinding||(Object.create?(function(n,t,s,r){r===void 0&&(r=s);var a=Object.getOwnPropertyDescriptor(t,s);(!a||("get"in a?!t.__esModule:a.writable||a.configurable))&&(a={enumerable:!0,get:function(){return t[s]}}),Object.defineProperty(n,r,a)}):(function(n,t,s,r){r===void 0&&(r=s),n[r]=t[s]})),o=this&&this.__exportStar||function(n,t){for(var s in n)s!=="default"&&!Object.prototype.hasOwnProperty.call(t,s)&&l(t,n,s)};Object.defineProperty(e,"__esModule",{value:!0}),o(_("./src/components/UIIcon/UIIcon.tsx"),e)},"./src/components/UILabel/UILabel.tsx"(d,e,_){"use strict";var l=this&&this.__importDefault||function(r){return r&&r.__esModule?r:{default:r}};Object.defineProperty(e,"__esModule",{value:!0}),e.UILabel=e.labelGlobalStyle=void 0;const o=l(_("../../node_modules/.pnpm/react@16.14.0/node_modules/react/index.js")),n=_("../../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=_("./src/components/types.ts");e.labelGlobalStyle={fontWeight:"bold",fontSize:"13px",color:"var(--vscode-input-foreground)",padding:"4px 0"};class s extends o.default.Component{constructor(a){super(a)}render(){const a=i=>({root:[h({marginTop:25},e.labelGlobalStyle),i.disabled&&{opacity:"0.4"},i.required&&{selectors:{"::after":{content:t.REQUIRED_LABEL_INDICATOR,color:"var(--vscode-inputValidation-errorBorder)",paddingRight:12}}}]});return o.default.createElement(n.Label,v(h({},this.props),{styles:a}))}}e.UILabel=s,s.__docgenInfo={description:`UILabel component
based on https://developer.microsoft.com/en-us/fluentui#/controls/web/label

@exports
@class UILabel
@extends {React.Component<ILabelProps, {}>}`,methods:[],displayName:"UILabel"}},"./src/components/UILabel/index.tsx"(d,e,_){"use strict";var l=this&&this.__createBinding||(Object.create?(function(n,t,s,r){r===void 0&&(r=s);var a=Object.getOwnPropertyDescriptor(t,s);(!a||("get"in a?!t.__esModule:a.writable||a.configurable))&&(a={enumerable:!0,get:function(){return t[s]}}),Object.defineProperty(n,r,a)}):(function(n,t,s,r){r===void 0&&(r=s),n[r]=t[s]})),o=this&&this.__exportStar||function(n,t){for(var s in n)s!=="default"&&!Object.prototype.hasOwnProperty.call(t,s)&&l(t,n,s)};Object.defineProperty(e,"__esModule",{value:!0}),o(_("./src/components/UILabel/UILabel.tsx"),e)},"./src/components/types.ts"(d,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.REQUIRED_LABEL_INDICATOR=void 0,e.REQUIRED_LABEL_INDICATOR="' *' / ''"},"./src/utilities/Debounce.ts"(d,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.debounce=_;function _(l,o){let n;return(...t)=>{clearTimeout(n),n=window.setTimeout(()=>{l(...t)},o)}}},"./src/utilities/Dom.ts"(d,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.isHTMLElement=_,e.isHTMLInputElement=l;function _(o){return"title"in o}function l(o){return"value"in o&&"tagName"in o&&o.tagName==="INPUT"}},"./src/utilities/Focus.ts"(d,e,_){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.isElementTabbable=e.getPreviousElement=e.getNextElement=e.setUIFocusVisibility=e.getUILastFocusable=e.getUIFirstFocusable=void 0,e.focusToSibling=o;const l=_("../../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");Object.defineProperty(e,"getUIFirstFocusable",{enumerable:!0,get:function(){return l.getFirstFocusable}}),Object.defineProperty(e,"getUILastFocusable",{enumerable:!0,get:function(){return l.getLastFocusable}}),Object.defineProperty(e,"setUIFocusVisibility",{enumerable:!0,get:function(){return l.setFocusVisibility}}),Object.defineProperty(e,"getNextElement",{enumerable:!0,get:function(){return l.getNextElement}}),Object.defineProperty(e,"getPreviousElement",{enumerable:!0,get:function(){return l.getPreviousElement}}),Object.defineProperty(e,"isElementTabbable",{enumerable:!0,get:function(){return l.isElementTabbable}});function o(n,t){const s=(0,l.getDocument)();if(s){let r=null;if(t?r=(0,l.getNextElement)(s.body,n,!1,!1,!0,!0):r=(0,l.getPreviousElement)(s.body,n,!1,!1,!0,!0),r)return r.focus(),r}return null}},"./src/utilities/Id.ts"(d,e,_){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.getUIId=void 0;const l=_("../../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");Object.defineProperty(e,"getUIId",{enumerable:!0,get:function(){return l.getId}})},"./src/utilities/Keys.ts"(d,e,_){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.UIKeyCodes=void 0;const l=_("../../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");Object.defineProperty(e,"UIKeyCodes",{enumerable:!0,get:function(){return l.KeyCodes}})},"./src/utilities/index.ts"(d,e,_){"use strict";var l=this&&this.__createBinding||(Object.create?(function(n,t,s,r){r===void 0&&(r=s);var a=Object.getOwnPropertyDescriptor(t,s);(!a||("get"in a?!t.__esModule:a.writable||a.configurable))&&(a={enumerable:!0,get:function(){return t[s]}}),Object.defineProperty(n,r,a)}):(function(n,t,s,r){r===void 0&&(r=s),n[r]=t[s]})),o=this&&this.__exportStar||function(n,t){for(var s in n)s!=="default"&&!Object.prototype.hasOwnProperty.call(t,s)&&l(t,n,s)};Object.defineProperty(e,"__esModule",{value:!0}),o(_("./src/utilities/Debounce.ts"),e),o(_("./src/utilities/Dom.ts"),e),o(_("./src/utilities/Focus.ts"),e),o(_("./src/utilities/Id.ts"),e),o(_("./src/utilities/Keys.ts"),e)},"./stories/UIToggleGroup.story.tsx"(d,e,_){"use strict";var l=this&&this.__createBinding||(Object.create?(function(f,u,c,p){p===void 0&&(p=c);var m=Object.getOwnPropertyDescriptor(u,c);(!m||("get"in m?!u.__esModule:m.writable||m.configurable))&&(m={enumerable:!0,get:function(){return u[c]}}),Object.defineProperty(f,p,m)}):(function(f,u,c,p){p===void 0&&(p=c),f[p]=u[c]})),o=this&&this.__setModuleDefault||(Object.create?(function(f,u){Object.defineProperty(f,"default",{enumerable:!0,value:u})}):function(f,u){f.default=u}),n=this&&this.__importStar||(function(){var f=function(u){return f=Object.getOwnPropertyNames||function(c){var p=[];for(var m in c)Object.prototype.hasOwnProperty.call(c,m)&&(p[p.length]=m);return p},f(u)};return function(u){if(u&&u.__esModule)return u;var c={};if(u!=null)for(var p=f(u),m=0;m<p.length;m++)p[m]!=="default"&&l(c,u,p[m]);return o(c,u),c}})();Object.defineProperty(e,"__esModule",{value:!0}),e.defaultUsage=void 0;const t=n(_("../../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"),r=_("./src/components/UIToggleGroup/index.ts");e.default={title:"Basic Inputs/Toggle/Group"};const a={childrenGap:40},i=()=>{const[f,u]=(0,t.useState)(""),c=[{key:"high",text:"H",ariaLabel:"High",title:"High"},{key:"medium",text:"M",ariaLabel:"Medium",title:"Medium"},{key:"low",text:"L",ariaLabel:"Low",title:"Low"}],p=[{key:"high",text:"H"},{key:"medium",text:"M",disabled:!0},{key:"low",text:"L"},{key:"long_text",text:"Long Text"}],m=[{key:"chart",icon:"Chart"},{key:"star",icon:"Star"},{key:"settings",icon:"Settings"}],b=(I,y)=>{u(y?I:"")};return t.default.createElement(s.Stack,{tokens:a,style:{width:300}},t.default.createElement(s.Text,{variant:"large",className:"textColor"},"UIToggleGroup"),t.default.createElement(s.Stack,{tokens:{childrenGap:16}},t.default.createElement(s.Text,{variant:"medium",className:"textColor"},"UIToggleGroup, default usage"),t.default.createElement(r.UIToggleGroup,{options:c,label:"Test",ariaLabel:"test",onChange:b.bind(this)}),t.default.createElement("span",null,"selection: ",f)),t.default.createElement(s.Stack,{tokens:{childrenGap:16}},t.default.createElement(s.Text,{variant:"medium",className:"textColor"},"UIToggleGroup, required value"),t.default.createElement(r.UIToggleGroup,{options:c,label:"Test",required:!0})),t.default.createElement(s.Stack,{tokens:{childrenGap:16}},t.default.createElement(s.Text,{variant:"medium",className:"textColor"},"UIToggleGroup, with default selected value"),t.default.createElement(r.UIToggleGroup,{options:c,label:"Test",selectedKey:"medium"})),t.default.createElement(s.Stack,{tokens:{childrenGap:16}},t.default.createElement(s.Text,{variant:"medium",className:"textColor"},"UIToggleGroup, with a disabled option"),t.default.createElement(r.UIToggleGroup,{options:p,label:"Test"})),t.default.createElement(s.Stack,{tokens:{childrenGap:16}},t.default.createElement(s.Text,{variant:"medium",className:"textColor"},"UIToggleGroup, with icons option"),t.default.createElement(r.UIToggleGroup,{options:m,label:"Test"})))};e.defaultUsage=i}}]);})();