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

SAP UI Components Library

(()=>{var P=Object.defineProperty,j=Object.defineProperties;var U=Object.getOwnPropertyDescriptors;var h=Object.getOwnPropertySymbols;var M=Object.prototype.hasOwnProperty,S=Object.prototype.propertyIsEnumerable;var T=(d,e,s)=>e in d?P(d,e,{enumerable:!0,configurable:!0,writable:!0,value:s}):d[e]=s,g=(d,e)=>{for(var s in e||(e={}))M.call(e,s)&&T(d,s,e[s]);if(h)for(var s of h(e))S.call(e,s)&&T(d,s,e[s]);return d},E=(d,e)=>j(d,U(e));(self.webpackChunk_sap_ux_ui_components=self.webpackChunk_sap_ux_ui_components||[]).push([[218],{"../../node_modules/.pnpm/css-loader@6.8.1_webpack@5.96.1/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[11].use[1]!../../node_modules/.pnpm/sass-loader@13.3.2_sass@1.66.1_webpack@5.96.1/node_modules/sass-loader/dist/cjs.js!./src/components/UIIcon/UIIcon.scss":(d,e,s)=>{var a=s("../../node_modules/.pnpm/css-loader@6.8.1_webpack@5.96.1/node_modules/css-loader/dist/runtime/noSourceMaps.js"),r=s("../../node_modules/.pnpm/css-loader@6.8.1_webpack@5.96.1/node_modules/css-loader/dist/runtime/api.js"),o=r(a);o.push([d.id,".ts-icon{fill:var(--vscode-foreground)}",""]),d.exports=o},"../../node_modules/.pnpm/css-loader@6.8.1_webpack@5.96.1/node_modules/css-loader/dist/runtime/api.js":d=>{"use strict";d.exports=function(e){var s=[];return s.toString=function(){return this.map(function(r){var o="",t=typeof r[5]!="undefined";return r[4]&&(o+="@supports (".concat(r[4],") {")),r[2]&&(o+="@media ".concat(r[2]," {")),t&&(o+="@layer".concat(r[5].length>0?" ".concat(r[5]):""," {")),o+=e(r),t&&(o+="}"),r[2]&&(o+="}"),r[4]&&(o+="}"),o}).join("")},s.i=function(r,o,t,n,l){typeof r=="string"&&(r=[[null,r,void 0]]);var _={};if(t)for(var c=0;c<this.length;c++){var i=this[c][0];i!=null&&(_[i]=!0)}for(var m=0;m<r.length;m++){var u=[].concat(r[m]);t&&_[u[0]]||(typeof l!="undefined"&&(typeof u[5]=="undefined"||(u[1]="@layer".concat(u[5].length>0?" ".concat(u[5]):""," {").concat(u[1],"}")),u[5]=l),o&&(u[2]&&(u[1]="@media ".concat(u[2]," {").concat(u[1],"}")),u[2]=o),n&&(u[4]?(u[1]="@supports (".concat(u[4],") {").concat(u[1],"}"),u[4]=n):u[4]="".concat(n)),s.push(u))}},s}},"../../node_modules/.pnpm/css-loader@6.8.1_webpack@5.96.1/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,s)=>{"use strict";s.r(e),s.d(e,{default:()=>O});var a=s("../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.96.1/node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"),r=s.n(a),o=s("../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.96.1/node_modules/style-loader/dist/runtime/styleDomAPI.js"),t=s.n(o),n=s("../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.96.1/node_modules/style-loader/dist/runtime/insertBySelector.js"),l=s.n(n),_=s("../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.96.1/node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js"),c=s.n(_),i=s("../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.96.1/node_modules/style-loader/dist/runtime/insertStyleElement.js"),m=s.n(i),u=s("../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.96.1/node_modules/style-loader/dist/runtime/styleTagTransform.js"),f=s.n(u),p=s("../../node_modules/.pnpm/css-loader@6.8.1_webpack@5.96.1/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[11].use[1]!../../node_modules/.pnpm/sass-loader@13.3.2_sass@1.66.1_webpack@5.96.1/node_modules/sass-loader/dist/cjs.js!./src/components/UIIcon/UIIcon.scss"),y=s.n(p),v={};for(const I in p)I!=="default"&&(v[I]=()=>p[I]);s.d(e,v);var b={};b.styleTagTransform=f(),b.setAttributes=c(),b.insert=l().bind(null,"head"),b.domAPI=t(),b.insertStyleElement=m();var D=r()(y(),b);const O=y()&&y().locals?y().locals:void 0},"../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.96.1/node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js":d=>{"use strict";var e=[];function s(o){for(var t=-1,n=0;n<e.length;n++)if(e[n].identifier===o){t=n;break}return t}function a(o,t){for(var n={},l=[],_=0;_<o.length;_++){var c=o[_],i=t.base?c[0]+t.base:c[0],m=n[i]||0,u="".concat(i," ").concat(m);n[i]=m+1;var f=s(u),p={css:c[1],media:c[2],sourceMap:c[3],supports:c[4],layer:c[5]};if(f!==-1)e[f].references++,e[f].updater(p);else{var y=r(p,t);t.byIndex=_,e.splice(_,0,{identifier:u,updater:y,references:1})}l.push(u)}return l}function r(o,t){var n=t.domAPI(t);n.update(o);var l=function(c){if(c){if(c.css===o.css&&c.media===o.media&&c.sourceMap===o.sourceMap&&c.supports===o.supports&&c.layer===o.layer)return;n.update(o=c)}else n.remove()};return l}d.exports=function(o,t){t=t||{},o=o||[];var n=a(o,t);return function(_){_=_||[];for(var c=0;c<n.length;c++){var i=n[c],m=s(i);e[m].references--}for(var u=a(_,t),f=0;f<n.length;f++){var p=n[f],y=s(p);e[y].references===0&&(e[y].updater(),e.splice(y,1))}n=u}}},"../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.96.1/node_modules/style-loader/dist/runtime/insertBySelector.js":d=>{"use strict";var e={};function s(r){if(typeof e[r]=="undefined"){var o=document.querySelector(r);if(window.HTMLIFrameElement&&o instanceof window.HTMLIFrameElement)try{o=o.contentDocument.head}catch(t){o=null}e[r]=o}return e[r]}function a(r,o){var t=s(r);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(o)}d.exports=a},"../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.96.1/node_modules/style-loader/dist/runtime/insertStyleElement.js":d=>{"use strict";function e(s){var a=document.createElement("style");return s.setAttributes(a,s.attributes),s.insert(a,s.options),a}d.exports=e},"../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.96.1/node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js":(d,e,s)=>{"use strict";function a(r){var o=s.nc;o&&r.setAttribute("nonce",o)}d.exports=a},"../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.96.1/node_modules/style-loader/dist/runtime/styleDomAPI.js":d=>{"use strict";function e(r,o,t){var n="";t.supports&&(n+="@supports (".concat(t.supports,") {")),t.media&&(n+="@media ".concat(t.media," {"));var l=typeof t.layer!="undefined";l&&(n+="@layer".concat(t.layer.length>0?" ".concat(t.layer):""," {")),n+=t.css,l&&(n+="}"),t.media&&(n+="}"),t.supports&&(n+="}");var _=t.sourceMap;_&&typeof btoa!="undefined"&&(n+=`
/*# sourceMappingURL=data:application/json;base64,`.concat(btoa(unescape(encodeURIComponent(JSON.stringify(_))))," */")),o.styleTagTransform(n,r,o.options)}function s(r){if(r.parentNode===null)return!1;r.parentNode.removeChild(r)}function a(r){if(typeof document=="undefined")return{update:function(){},remove:function(){}};var o=r.insertStyleElement(r);return{update:function(n){e(o,r,n)},remove:function(){s(o)}}}d.exports=a},"../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.96.1/node_modules/style-loader/dist/runtime/styleTagTransform.js":d=>{"use strict";function e(s,a){if(a.styleSheet)a.styleSheet.cssText=s;else{for(;a.firstChild;)a.removeChild(a.firstChild);a.appendChild(document.createTextNode(s))}}d.exports=e},"./src/components/UIIcon/UIIcon.tsx":function(d,e,s){"use strict";var a=this&&this.__importDefault||function(n){return n&&n.__esModule?n:{default:n}};Object.defineProperty(e,"__esModule",{value:!0}),e.UIIcon=void 0;const r=a(s("../../node_modules/.pnpm/react@16.14.0/node_modules/react/index.js")),o=s("../../node_modules/.pnpm/@fluentui+react@8.120.5_@types+react-dom@16.9.24_@types+react@16.14.55_react-dom@16.14.0_react@16.14.0/node_modules/@fluentui/react/lib-commonjs/index.js");s("./src/components/UIIcon/UIIcon.scss");class t extends r.default.Component{constructor(l){super(l),this.setStyle=()=>({})}render(){const l=this.props.className?` ${this.props.className}`:"";return r.default.createElement(o.Icon,E(g({},this.props),{className:`ts-icon${l}`,styles:this.setStyle()}))}}e.UIIcon=t},"./src/components/UIIcon/index.tsx":function(d,e,s){"use strict";var a=this&&this.__createBinding||(Object.create?function(o,t,n,l){l===void 0&&(l=n);var _=Object.getOwnPropertyDescriptor(t,n);(!_||("get"in _?!t.__esModule:_.writable||_.configurable))&&(_={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(o,l,_)}:function(o,t,n,l){l===void 0&&(l=n),o[l]=t[n]}),r=this&&this.__exportStar||function(o,t){for(var n in o)n!=="default"&&!Object.prototype.hasOwnProperty.call(t,n)&&a(t,o,n)};Object.defineProperty(e,"__esModule",{value:!0}),r(s("./src/components/UIIcon/UIIcon.tsx"),e)},"./src/components/UILabel/UILabel.tsx":function(d,e,s){"use strict";var a=this&&this.__importDefault||function(l){return l&&l.__esModule?l:{default:l}};Object.defineProperty(e,"__esModule",{value:!0}),e.UILabel=e.labelGlobalStyle=void 0;const r=a(s("../../node_modules/.pnpm/react@16.14.0/node_modules/react/index.js")),o=s("../../node_modules/.pnpm/@fluentui+react@8.120.5_@types+react-dom@16.9.24_@types+react@16.14.55_react-dom@16.14.0_react@16.14.0/node_modules/@fluentui/react/lib-commonjs/index.js"),t=s("./src/components/types.ts");e.labelGlobalStyle={fontWeight:"bold",fontSize:"13px",color:"var(--vscode-input-foreground)",fontFamily:"var(--vscode-font-family)",padding:"4px 0"};class n extends r.default.Component{constructor(_){super(_)}render(){const _=c=>({root:[g({marginTop:25},e.labelGlobalStyle),c.disabled&&{opacity:"0.4"},c.required&&{selectors:{"::after":{content:t.REQUIRED_LABEL_INDICATOR,color:"var(--vscode-inputValidation-errorBorder)",paddingRight:12}}}]});return r.default.createElement(o.Label,E(g({},this.props),{styles:_}))}}e.UILabel=n},"./src/components/UILabel/index.tsx":function(d,e,s){"use strict";var a=this&&this.__createBinding||(Object.create?function(o,t,n,l){l===void 0&&(l=n);var _=Object.getOwnPropertyDescriptor(t,n);(!_||("get"in _?!t.__esModule:_.writable||_.configurable))&&(_={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(o,l,_)}:function(o,t,n,l){l===void 0&&(l=n),o[l]=t[n]}),r=this&&this.__exportStar||function(o,t){for(var n in o)n!=="default"&&!Object.prototype.hasOwnProperty.call(t,n)&&a(t,o,n)};Object.defineProperty(e,"__esModule",{value:!0}),r(s("./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/Dom.ts":(d,e)=>{"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.isHTMLElement=s,e.isHTMLInputElement=a;function s(r){return"title"in r}function a(r){return"value"in r&&"tagName"in r&&r.tagName==="INPUT"}},"./src/utilities/Focus.ts":(d,e,s)=>{"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.isElementTabbable=e.getPreviousElement=e.getNextElement=e.setUIFocusVisibility=e.getUILastFocusable=e.getUIFirstFocusable=void 0,e.focusToSibling=r;const a=s("../../node_modules/.pnpm/@fluentui+react@8.120.5_@types+react-dom@16.9.24_@types+react@16.14.55_react-dom@16.14.0_react@16.14.0/node_modules/@fluentui/react/lib-commonjs/index.js");Object.defineProperty(e,"getUIFirstFocusable",{enumerable:!0,get:function(){return a.getFirstFocusable}}),Object.defineProperty(e,"getUILastFocusable",{enumerable:!0,get:function(){return a.getLastFocusable}}),Object.defineProperty(e,"setUIFocusVisibility",{enumerable:!0,get:function(){return a.setFocusVisibility}}),Object.defineProperty(e,"getNextElement",{enumerable:!0,get:function(){return a.getNextElement}}),Object.defineProperty(e,"getPreviousElement",{enumerable:!0,get:function(){return a.getPreviousElement}}),Object.defineProperty(e,"isElementTabbable",{enumerable:!0,get:function(){return a.isElementTabbable}});function r(o,t){const n=(0,a.getDocument)();if(n){let l=null;if(t?l=(0,a.getNextElement)(n.body,o,!1,!1,!0,!0):l=(0,a.getPreviousElement)(n.body,o,!1,!1,!0,!0),l)return l.focus(),l}return null}},"./src/utilities/Id.ts":(d,e,s)=>{"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.getUIId=void 0;const a=s("../../node_modules/.pnpm/@fluentui+react@8.120.5_@types+react-dom@16.9.24_@types+react@16.14.55_react-dom@16.14.0_react@16.14.0/node_modules/@fluentui/react/lib-commonjs/index.js");Object.defineProperty(e,"getUIId",{enumerable:!0,get:function(){return a.getId}})},"./src/utilities/Keys.ts":(d,e,s)=>{"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.UIKeyCodes=void 0;const a=s("../../node_modules/.pnpm/@fluentui+react@8.120.5_@types+react-dom@16.9.24_@types+react@16.14.55_react-dom@16.14.0_react@16.14.0/node_modules/@fluentui/react/lib-commonjs/index.js");Object.defineProperty(e,"UIKeyCodes",{enumerable:!0,get:function(){return a.KeyCodes}})},"./src/utilities/index.ts":function(d,e,s){"use strict";var a=this&&this.__createBinding||(Object.create?function(o,t,n,l){l===void 0&&(l=n);var _=Object.getOwnPropertyDescriptor(t,n);(!_||("get"in _?!t.__esModule:_.writable||_.configurable))&&(_={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(o,l,_)}:function(o,t,n,l){l===void 0&&(l=n),o[l]=t[n]}),r=this&&this.__exportStar||function(o,t){for(var n in o)n!=="default"&&!Object.prototype.hasOwnProperty.call(t,n)&&a(t,o,n)};Object.defineProperty(e,"__esModule",{value:!0}),r(s("./src/utilities/Dom.ts"),e),r(s("./src/utilities/Focus.ts"),e),r(s("./src/utilities/Id.ts"),e),r(s("./src/utilities/Keys.ts"),e)},"./stories/UIToggleGroup.story.tsx":function(d,e,s){"use strict";var a=this&&this.__createBinding||(Object.create?function(i,m,u,f){f===void 0&&(f=u);var p=Object.getOwnPropertyDescriptor(m,u);(!p||("get"in p?!m.__esModule:p.writable||p.configurable))&&(p={enumerable:!0,get:function(){return m[u]}}),Object.defineProperty(i,f,p)}:function(i,m,u,f){f===void 0&&(f=u),i[f]=m[u]}),r=this&&this.__setModuleDefault||(Object.create?function(i,m){Object.defineProperty(i,"default",{enumerable:!0,value:m})}:function(i,m){i.default=m}),o=this&&this.__importStar||function(i){if(i&&i.__esModule)return i;var m={};if(i!=null)for(var u in i)u!=="default"&&Object.prototype.hasOwnProperty.call(i,u)&&a(m,i,u);return r(m,i),m};Object.defineProperty(e,"__esModule",{value:!0}),e.defaultUsage=void 0;const t=o(s("../../node_modules/.pnpm/react@16.14.0/node_modules/react/index.js")),n=s("../../node_modules/.pnpm/@fluentui+react@8.120.5_@types+react-dom@16.9.24_@types+react@16.14.55_react-dom@16.14.0_react@16.14.0/node_modules/@fluentui/react/lib-commonjs/index.js"),l=s("./src/components/UIToggleGroup/index.ts");e.default={title:"Basic Inputs/Toggle/Group"};const _={childrenGap:40},c=()=>{const[i,m]=(0,t.useState)(""),u=[{key:"high",text:"H",ariaLabel:"High",title:"High"},{key:"medium",text:"M",ariaLabel:"Medium",title:"Medium"},{key:"low",text:"L",ariaLabel:"Low",title:"Low"}],f=[{key:"high",text:"H"},{key:"medium",text:"M",disabled:!0},{key:"low",text:"L"},{key:"long_text",text:"Long Text"}],p=[{key:"chart",icon:"Chart"},{key:"star",icon:"Star"},{key:"settings",icon:"Settings"}],y=(v,b)=>{m(b?v:"")};return t.default.createElement(n.Stack,{tokens:_,style:{width:300}},t.default.createElement(n.Text,{variant:"large",className:"textColor"},"UIToggleGroup"),t.default.createElement(n.Stack,{tokens:{childrenGap:16}},t.default.createElement(n.Text,{variant:"medium",className:"textColor"},"UIToggleGroup, default usage"),t.default.createElement(l.UIToggleGroup,{options:u,label:"Test",ariaLabel:"test",onChange:y.bind(this)}),t.default.createElement("span",null,"selection: ",i)),t.default.createElement(n.Stack,{tokens:{childrenGap:16}},t.default.createElement(n.Text,{variant:"medium",className:"textColor"},"UIToggleGroup, required value"),t.default.createElement(l.UIToggleGroup,{options:u,label:"Test",required:!0})),t.default.createElement(n.Stack,{tokens:{childrenGap:16}},t.default.createElement(n.Text,{variant:"medium",className:"textColor"},"UIToggleGroup, with default selected value"),t.default.createElement(l.UIToggleGroup,{options:u,label:"Test",selectedKey:"medium"})),t.default.createElement(n.Stack,{tokens:{childrenGap:16}},t.default.createElement(n.Text,{variant:"medium",className:"textColor"},"UIToggleGroup, with a disabled option"),t.default.createElement(l.UIToggleGroup,{options:f,label:"Test"})),t.default.createElement(n.Stack,{tokens:{childrenGap:16}},t.default.createElement(n.Text,{variant:"medium",className:"textColor"},"UIToggleGroup, with icons option"),t.default.createElement(l.UIToggleGroup,{options:p,label:"Test"})))};e.defaultUsage=c}}]);})();