@sap-ux/ui-components/storybook/UIButton-story.49b13dae.iframe.bundle.js

SAP UI Components Library

(()=>{var H=Object.defineProperty,R=Object.defineProperties;var z=Object.getOwnPropertyDescriptors;var N=Object.getOwnPropertySymbols;var W=Object.prototype.hasOwnProperty,j=Object.prototype.propertyIsEnumerable;var D=(s,c,r)=>c in s?H(s,c,{enumerable:!0,configurable:!0,writable:!0,value:r}):s[c]=r,C=(s,c)=>{for(var r in c||(c={}))W.call(c,r)&&D(s,r,c[r]);if(N)for(var r of N(c))j.call(c,r)&&D(s,r,c[r]);return s},w=(s,c)=>R(s,z(c));(self.webpackChunk_sap_ux_ui_components=self.webpackChunk_sap_ux_ui_components||[]).push([[685],{"../../node_modules/.pnpm/css-loader@6.8.1_webpack@5.96.1/node_modules/css-loader/dist/runtime/api.js":s=>{"use strict";s.exports=function(c){var r=[];return r.toString=function(){return this.map(function(n){var o="",e=typeof n[5]!="undefined";return n[4]&&(o+="@supports (".concat(n[4],") {")),n[2]&&(o+="@media ".concat(n[2]," {")),e&&(o+="@layer".concat(n[5].length>0?" ".concat(n[5]):""," {")),o+=c(n),e&&(o+="}"),n[2]&&(o+="}"),n[4]&&(o+="}"),o}).join("")},r.i=function(n,o,e,t,u){typeof n=="string"&&(n=[[null,n,void 0]]);var I={};if(e)for(var a=0;a<this.length;a++){var v=this[a][0];v!=null&&(I[v]=!0)}for(var f=0;f<n.length;f++){var i=[].concat(n[f]);e&&I[i[0]]||(typeof u!="undefined"&&(typeof i[5]=="undefined"||(i[1]="@layer".concat(i[5].length>0?" ".concat(i[5]):""," {").concat(i[1],"}")),i[5]=u),o&&(i[2]&&(i[1]="@media ".concat(i[2]," {").concat(i[1],"}")),i[2]=o),t&&(i[4]?(i[1]="@supports (".concat(i[4],") {").concat(i[1],"}"),i[4]=t):i[4]="".concat(t)),r.push(i))}},r}},"../../node_modules/.pnpm/css-loader@6.8.1_webpack@5.96.1/node_modules/css-loader/dist/runtime/noSourceMaps.js":s=>{"use strict";s.exports=function(c){return c[1]}},"../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.96.1/node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js":s=>{"use strict";var c=[];function r(o){for(var e=-1,t=0;t<c.length;t++)if(c[t].identifier===o){e=t;break}return e}function d(o,e){for(var t={},u=[],I=0;I<o.length;I++){var a=o[I],v=e.base?a[0]+e.base:a[0],f=t[v]||0,i="".concat(v," ").concat(f);t[v]=f+1;var l=r(i),p={css:a[1],media:a[2],sourceMap:a[3],supports:a[4],layer:a[5]};if(l!==-1)c[l].references++,c[l].updater(p);else{var m=n(p,e);e.byIndex=I,c.splice(I,0,{identifier:i,updater:m,references:1})}u.push(i)}return u}function n(o,e){var t=e.domAPI(e);t.update(o);var u=function(a){if(a){if(a.css===o.css&&a.media===o.media&&a.sourceMap===o.sourceMap&&a.supports===o.supports&&a.layer===o.layer)return;t.update(o=a)}else t.remove()};return u}s.exports=function(o,e){e=e||{},o=o||[];var t=d(o,e);return function(I){I=I||[];for(var a=0;a<t.length;a++){var v=t[a],f=r(v);c[f].references--}for(var i=d(I,e),l=0;l<t.length;l++){var p=t[l],m=r(p);c[m].references===0&&(c[m].updater(),c.splice(m,1))}t=i}}},"../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.96.1/node_modules/style-loader/dist/runtime/insertBySelector.js":s=>{"use strict";var c={};function r(n){if(typeof c[n]=="undefined"){var o=document.querySelector(n);if(window.HTMLIFrameElement&&o instanceof window.HTMLIFrameElement)try{o=o.contentDocument.head}catch(e){o=null}c[n]=o}return c[n]}function d(n,o){var e=r(n);if(!e)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");e.appendChild(o)}s.exports=d},"../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.96.1/node_modules/style-loader/dist/runtime/insertStyleElement.js":s=>{"use strict";function c(r){var d=document.createElement("style");return r.setAttributes(d,r.attributes),r.insert(d,r.options),d}s.exports=c},"../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.96.1/node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js":(s,c,r)=>{"use strict";function d(n){var o=r.nc;o&&n.setAttribute("nonce",o)}s.exports=d},"../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.96.1/node_modules/style-loader/dist/runtime/styleDomAPI.js":s=>{"use strict";function c(n,o,e){var t="";e.supports&&(t+="@supports (".concat(e.supports,") {")),e.media&&(t+="@media ".concat(e.media," {"));var u=typeof e.layer!="undefined";u&&(t+="@layer".concat(e.layer.length>0?" ".concat(e.layer):""," {")),t+=e.css,u&&(t+="}"),e.media&&(t+="}"),e.supports&&(t+="}");var I=e.sourceMap;I&&typeof btoa!="undefined"&&(t+=`
/*# sourceMappingURL=data:application/json;base64,`.concat(btoa(unescape(encodeURIComponent(JSON.stringify(I))))," */")),o.styleTagTransform(t,n,o.options)}function r(n){if(n.parentNode===null)return!1;n.parentNode.removeChild(n)}function d(n){if(typeof document=="undefined")return{update:function(){},remove:function(){}};var o=n.insertStyleElement(n);return{update:function(t){c(o,n,t)},remove:function(){r(o)}}}s.exports=d},"../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.96.1/node_modules/style-loader/dist/runtime/styleTagTransform.js":s=>{"use strict";function c(r,d){if(d.styleSheet)d.styleSheet.cssText=r;else{for(;d.firstChild;)d.removeChild(d.firstChild);d.appendChild(document.createTextNode(r))}}s.exports=c},"./stories/UIButton.story.tsx":function(s,c,r){"use strict";var d=this&&this.__createBinding||(Object.create?function(l,p,m,h){h===void 0&&(h=m);var y=Object.getOwnPropertyDescriptor(p,m);(!y||("get"in y?!p.__esModule:y.writable||y.configurable))&&(y={enumerable:!0,get:function(){return p[m]}}),Object.defineProperty(l,h,y)}:function(l,p,m,h){h===void 0&&(h=m),l[h]=p[m]}),n=this&&this.__setModuleDefault||(Object.create?function(l,p){Object.defineProperty(l,"default",{enumerable:!0,value:p})}:function(l,p){l.default=p}),o=this&&this.__importStar||function(l){if(l&&l.__esModule)return l;var p={};if(l!=null)for(var m in l)m!=="default"&&Object.prototype.hasOwnProperty.call(l,m)&&d(p,l,m);return n(p,l),p};Object.defineProperty(c,"__esModule",{value:!0}),c.defaultUsage=void 0;const e=o(r("../../node_modules/.pnpm/react@16.14.0/node_modules/react/index.js")),t=r("../../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"),u=r("./src/components/UIButton/index.tsx"),I=r("./src/components/UIContextualMenu/index.tsx"),a=r("./src/components/Icons.tsx"),v=r("./src/components/UITreeDropdown/index.tsx");(0,a.initIcons)(),c.default={title:"Basic Inputs/Buttons"};const f={childrenGap:40},i=()=>{const[l,p]=(0,e.useState)(""),[m,h]=(0,e.useState)({btn1:!0,btn2:!0,btn3:!0}),y=U=>{p(U)},k=U=>{const _=w(C({},m),{[U]:!m[U]});h(_)},x=(U,_,g)=>{const B={key:U,text:_};return g&&(B.iconProps={iconName:a.UiIcons.GuidedDevelopment}),B},E=x("option1","option 1"),S=[x("option2","option 2"),x("option3","option 3")],b=S.map(U=>w(C({},U),{iconProps:{iconName:a.UiIcons.GuidedDevelopment}})),M=[b[0],w(C({},b[1]),{iconProps:void 0})],T=()=>[x("option1","option 1"),x("rename","Simulate rename"),{key:"",itemType:I.UIContextualMenuItemType.Divider},x("option3","option 3"),x("option4","option 4"),x("option5","option 5"),{key:"",itemType:I.UIContextualMenuItemType.Header,text:"Dummy header"},x("option6","option 6"),x("option7","option 7"),x("option8","option 8"),x("option10","option 10"),x("option11","option 11"),x("option12","option 12")],[P,A]=(0,e.useState)(T());return e.default.createElement(t.Stack,{tokens:f},e.default.createElement(t.Stack,{tokens:f},e.default.createElement(t.Text,{variant:"large",className:"textColor",block:!0},"Primary Button"),e.default.createElement(t.Stack,{horizontal:!0,tokens:f},e.default.createElement(u.UIDefaultButton,{primary:!0},"Primary button"),e.default.createElement(u.UIDefaultButton,{primary:!0,disabled:!0},"Primary disabled button"),e.default.createElement(u.UIDefaultButton,{primary:!0,iconProps:{iconName:a.UiIcons.Calendar}},"Primary button with icon"),e.default.createElement(u.UIDefaultButton,{primary:!0,checked:!0},"Primary checked button"))),e.default.createElement(t.Stack,{tokens:f},e.default.createElement(t.Text,{variant:"large",className:"textColor",block:!0},"Secondary Button"),e.default.createElement(t.Stack,{horizontal:!0,tokens:f},e.default.createElement(u.UIDefaultButton,null,"Secondary button"),e.default.createElement(u.UIDefaultButton,{disabled:!0},"Secondary disabled button"),e.default.createElement(u.UIDefaultButton,{iconProps:{iconName:a.UiIcons.Calendar}},"Secondary button with icon"),e.default.createElement(u.UIDefaultButton,{checked:!0},"Secondary checked button"))),e.default.createElement(t.Stack,{tokens:f},e.default.createElement(t.Text,{variant:"large",className:"textColor",block:!0},"Transparent Button"),e.default.createElement(t.Stack,{horizontal:!0,tokens:f},e.default.createElement(u.UIDefaultButton,{transparent:!0},"Transparent button"),e.default.createElement(u.UIDefaultButton,{transparent:!0,disabled:!0},"Transparent disabled button"),e.default.createElement(u.UIDefaultButton,{transparent:!0,iconProps:{iconName:a.UiIcons.Calendar}},"Transparent button with icon"),e.default.createElement(u.UIDefaultButton,{transparent:!0,checked:!0},"Transparent checked button"))),e.default.createElement(t.Stack,{tokens:f},e.default.createElement(t.Text,{variant:"large",className:"textColor",block:!0},"Split Button"),e.default.createElement(t.Stack,{horizontal:!0,tokens:f},e.default.createElement(u.UISplitButton,{id:"test",callback:y.bind(this),menuItems:S,button:E}),e.default.createElement(u.UISplitButton,{id:"test2",callback:y.bind(this),menuItems:b,button:E}),e.default.createElement(u.UISplitButton,{id:"test3",callback:U=>{if(U==="rename"){const _=T(),g=_.find(B=>B.key==="rename");g&&(g.text="Renamed"),A(_)}y(U)},menuItems:P,button:E}),e.default.createElement("span",null,"selection: ",l))),e.default.createElement(t.Stack,{tokens:f},e.default.createElement(t.Text,{variant:"large",className:"textColor",block:!0},"Icon Button"),e.default.createElement(t.Stack,{horizontal:!0,tokens:f},e.default.createElement(u.UIIconButton,{id:"undo-button-action",iconProps:{iconName:a.UiIcons.Undo},title:"Undo"}),e.default.createElement(u.UIIconButton,{id:"add-button-action",iconProps:{iconName:a.UiIcons.Add},title:"Undo"}),e.default.createElement(u.UIIconButton,{id:"wide-button-action",sizeType:u.UIIconButtonSizes.Wide,iconProps:{iconName:a.UiIcons.QuestionMarkWithChevron},title:"QuestionMarkWithChevron"}),e.default.createElement(u.UIIconButton,{id:"undo-disabled-button-action",iconProps:{iconName:a.UiIcons.Source},disabled:!0,title:"Undo"}))),e.default.createElement(t.Stack,{tokens:f},e.default.createElement(t.Text,{variant:"large",className:"textColor",block:!0},"Icon Button - Checked"),e.default.createElement(t.Stack,{horizontal:!0,tokens:f},e.default.createElement(u.UIIconButton,{id:"btn1",iconProps:{iconName:a.UiIcons.Undo},checked:m.btn1,onClick:k.bind(window,"btn1"),title:"Undo"}),e.default.createElement(u.UIIconButton,{id:"btn2",checked:m.btn2,iconProps:{iconName:a.UiIcons.LayoutLeft},onClick:k.bind(window,"btn2"),title:"LayoutLeft"}),e.default.createElement(u.UIIconButton,{id:"btn3",sizeType:u.UIIconButtonSizes.Wide,checked:m.btn3,iconProps:{iconName:a.UiIcons.QuestionMarkWithChevron},onClick:k.bind(window,"btn3"),title:"Wide"}))),e.default.createElement(t.Stack,{tokens:f},e.default.createElement(t.Text,{variant:"large",className:"textColor",block:!0},"Action Button"),e.default.createElement(t.Stack,{horizontal:!0,tokens:f},e.default.createElement(u.UIActionButton,{iconProps:{iconName:a.UiIcons.Calendar}},"Standard Action"),e.default.createElement(u.UIActionButton,{disabled:!0,iconProps:{iconName:a.UiIcons.Calendar}},"Standard Action - disabled"),e.default.createElement(u.UIActionButton,{iconProps:{iconName:a.UiIcons.Bulb}},"Icon with color"),e.default.createElement(u.UIActionButton,{disabled:!0,iconProps:{iconName:a.UiIcons.Bulb}},"Icon with color - disabled")),e.default.createElement(t.Stack,{horizontal:!0,tokens:f},e.default.createElement(u.UIActionButton,{iconProps:{iconName:a.UiIcons.Bulb},menuProps:{directionalHint:v.UIDirectionalHint.bottomRightEdge,directionalHintFixed:!1,items:b}},"Button with menu"),e.default.createElement(u.UIActionButton,{iconProps:{iconName:a.UiIcons.Bulb},menuProps:{directionalHint:v.UIDirectionalHint.bottomRightEdge,directionalHintFixed:!1,items:M}},"Button with mixture menu"))),e.default.createElement(t.Stack,{tokens:f},e.default.createElement(t.Text,{variant:"large",className:"textColor",block:!0},"Small Button"),e.default.createElement(t.Stack,{horizontal:!0,tokens:f},e.default.createElement(u.UISmallButton,{primary:!0},"Clear All"))),e.default.createElement(t.Stack,{tokens:f},e.default.createElement(t.Text,{variant:"large",className:"textColor",block:!0},"Dropdown Button"),e.default.createElement(t.Stack,{horizontal:!0,tokens:f},e.default.createElement(u.UIIconButton,{iconProps:{iconName:a.UiIcons.Add},menuProps:{directionalHint:v.UIDirectionalHint.bottomRightEdge,directionalHintFixed:!1,items:S}}),e.default.createElement(u.UIIconButton,{iconProps:{iconName:a.UiIcons.Add},menuProps:{directionalHint:v.UIDirectionalHint.bottomRightEdge,directionalHintFixed:!1,items:b}}),e.default.createElement(u.UIIconButton,{iconProps:{iconName:a.UiIcons.Add},menuProps:{directionalHint:v.UIDirectionalHint.bottomRightEdge,directionalHintFixed:!1,items:P}}))))};c.defaultUsage=i},"../../node_modules/.pnpm/uuid@3.4.0/node_modules/uuid/index.js":(s,c,r)=>{var d=r("../../node_modules/.pnpm/uuid@3.4.0/node_modules/uuid/v1.js"),n=r("../../node_modules/.pnpm/uuid@3.4.0/node_modules/uuid/v4.js"),o=n;o.v1=d,o.v4=n,s.exports=o},"../../node_modules/.pnpm/uuid@3.4.0/node_modules/uuid/lib/bytesToUuid.js":s=>{for(var c=[],r=0;r<256;++r)c[r]=(r+256).toString(16).substr(1);function d(n,o){var e=o||0,t=c;return[t[n[e++]],t[n[e++]],t[n[e++]],t[n[e++]],"-",t[n[e++]],t[n[e++]],"-",t[n[e++]],t[n[e++]],"-",t[n[e++]],t[n[e++]],"-",t[n[e++]],t[n[e++]],t[n[e++]],t[n[e++]],t[n[e++]],t[n[e++]]].join("")}s.exports=d},"../../node_modules/.pnpm/uuid@3.4.0/node_modules/uuid/lib/rng-browser.js":s=>{var c=typeof crypto!="undefined"&&crypto.getRandomValues&&crypto.getRandomValues.bind(crypto)||typeof msCrypto!="undefined"&&typeof window.msCrypto.getRandomValues=="function"&&msCrypto.getRandomValues.bind(msCrypto);if(c){var r=new Uint8Array(16);s.exports=function(){return c(r),r}}else{var d=new Array(16);s.exports=function(){for(var o=0,e;o<16;o++)o&3||(e=Math.random()*4294967296),d[o]=e>>>((o&3)<<3)&255;return d}}},"../../node_modules/.pnpm/uuid@3.4.0/node_modules/uuid/v1.js":(s,c,r)=>{var d=r("../../node_modules/.pnpm/uuid@3.4.0/node_modules/uuid/lib/rng-browser.js"),n=r("../../node_modules/.pnpm/uuid@3.4.0/node_modules/uuid/lib/bytesToUuid.js"),o,e,t=0,u=0;function I(a,v,f){var i=v&&f||0,l=v||[];a=a||{};var p=a.node||o,m=a.clockseq!==void 0?a.clockseq:e;if(p==null||m==null){var h=d();p==null&&(p=o=[h[0]|1,h[1],h[2],h[3],h[4],h[5]]),m==null&&(m=e=(h[6]<<8|h[7])&16383)}var y=a.msecs!==void 0?a.msecs:new Date().getTime(),k=a.nsecs!==void 0?a.nsecs:u+1,x=y-t+(k-u)/1e4;if(x<0&&a.clockseq===void 0&&(m=m+1&16383),(x<0||y>t)&&a.nsecs===void 0&&(k=0),k>=1e4)throw new Error("uuid.v1(): Can't create more than 10M uuids/sec");t=y,u=k,e=m,y+=122192928e5;var E=((y&268435455)*1e4+k)%4294967296;l[i++]=E>>>24&255,l[i++]=E>>>16&255,l[i++]=E>>>8&255,l[i++]=E&255;var S=y/4294967296*1e4&268435455;l[i++]=S>>>8&255,l[i++]=S&255,l[i++]=S>>>24&15|16,l[i++]=S>>>16&255,l[i++]=m>>>8|128,l[i++]=m&255;for(var b=0;b<6;++b)l[i+b]=p[b];return v||n(l)}s.exports=I},"../../node_modules/.pnpm/uuid@3.4.0/node_modules/uuid/v4.js":(s,c,r)=>{var d=r("../../node_modules/.pnpm/uuid@3.4.0/node_modules/uuid/lib/rng-browser.js"),n=r("../../node_modules/.pnpm/uuid@3.4.0/node_modules/uuid/lib/bytesToUuid.js");function o(e,t,u){var I=t&&u||0;typeof e=="string"&&(t=e==="binary"?new Array(16):null,e=null),e=e||{};var a=e.random||(e.rng||d)();if(a[6]=a[6]&15|64,a[8]=a[8]&63|128,t)for(var v=0;v<16;++v)t[I+v]=a[v];return t||n(a)}s.exports=o}}]);})();