@sap-ux/ui-components/storybook/UIDialog-story.4ab70d51.iframe.bundle.js

SAP UI Components Library

"use strict";(()=>{var O=Object.defineProperty,B=Object.defineProperties;var M=Object.getOwnPropertyDescriptors;var U=Object.getOwnPropertySymbols;var P=Object.prototype.hasOwnProperty,z=Object.prototype.propertyIsEnumerable;var C=(d,a,o)=>a in d?O(d,a,{enumerable:!0,configurable:!0,writable:!0,value:o}):d[a]=o,D=(d,a)=>{for(var o in a||(a={}))P.call(a,o)&&C(d,o,a[o]);if(U)for(var o of U(a))z.call(a,o)&&C(d,o,a[o]);return d},k=(d,a)=>B(d,M(a));(self.webpackChunk_sap_ux_ui_components=self.webpackChunk_sap_ux_ui_components||[]).push([[937],{"../../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){d.exports=function(a){var o=[];return o.toString=function(){return this.map(function(r){var t="",e=typeof r[5]!="undefined";return r[4]&&(t+="@supports (".concat(r[4],") {")),r[2]&&(t+="@media ".concat(r[2]," {")),e&&(t+="@layer".concat(r[5].length>0?" ".concat(r[5]):""," {")),t+=a(r),e&&(t+="}"),r[2]&&(t+="}"),r[4]&&(t+="}"),t}).join("")},o.i=function(r,t,e,n,g){typeof r=="string"&&(r=[[null,r,void 0]]);var p={};if(e)for(var l=0;l<this.length;l++){var _=this[l][0];_!=null&&(p[_]=!0)}for(var I=0;I<r.length;I++){var c=[].concat(r[I]);e&&p[c[0]]||(typeof g!="undefined"&&(typeof c[5]=="undefined"||(c[1]="@layer".concat(c[5].length>0?" ".concat(c[5]):""," {").concat(c[1],"}")),c[5]=g),t&&(c[2]&&(c[1]="@media ".concat(c[2]," {").concat(c[1],"}")),c[2]=t),n&&(c[4]?(c[1]="@supports (".concat(c[4],") {").concat(c[1],"}"),c[4]=n):c[4]="".concat(n)),o.push(c))}},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/noSourceMaps.js"(d){d.exports=function(a){return a[1]}},"../../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){var a=[];function o(t){for(var e=-1,n=0;n<a.length;n++)if(a[n].identifier===t){e=n;break}return e}function f(t,e){for(var n={},g=[],p=0;p<t.length;p++){var l=t[p],_=e.base?l[0]+e.base:l[0],I=n[_]||0,c="".concat(_," ").concat(I);n[_]=I+1;var h=o(c),b={css:l[1],media:l[2],sourceMap:l[3],supports:l[4],layer:l[5]};if(h!==-1)a[h].references++,a[h].updater(b);else{var x=r(b,e);e.byIndex=p,a.splice(p,0,{identifier:c,updater:x,references:1})}g.push(c)}return g}function r(t,e){var n=e.domAPI(e);n.update(t);var g=function(l){if(l){if(l.css===t.css&&l.media===t.media&&l.sourceMap===t.sourceMap&&l.supports===t.supports&&l.layer===t.layer)return;n.update(t=l)}else n.remove()};return g}d.exports=function(t,e){e=e||{},t=t||[];var n=f(t,e);return function(p){p=p||[];for(var l=0;l<n.length;l++){var _=n[l],I=o(_);a[I].references--}for(var c=f(p,e),h=0;h<n.length;h++){var b=n[h],x=o(b);a[x].references===0&&(a[x].updater(),a.splice(x,1))}n=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){var a={};function o(r){if(typeof a[r]=="undefined"){var t=document.querySelector(r);if(window.HTMLIFrameElement&&t instanceof window.HTMLIFrameElement)try{t=t.contentDocument.head}catch(e){t=null}a[r]=t}return a[r]}function f(r,t){var e=o(r);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(t)}d.exports=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"(d){function a(o){var f=document.createElement("style");return o.setAttributes(f,o.attributes),o.insert(f,o.options),f}d.exports=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"(d,a,o){function f(r){var t=o.nc;t&&r.setAttribute("nonce",t)}d.exports=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/styleDomAPI.js"(d){function a(r,t,e){var n="";e.supports&&(n+="@supports (".concat(e.supports,") {")),e.media&&(n+="@media ".concat(e.media," {"));var g=typeof e.layer!="undefined";g&&(n+="@layer".concat(e.layer.length>0?" ".concat(e.layer):""," {")),n+=e.css,g&&(n+="}"),e.media&&(n+="}"),e.supports&&(n+="}");var p=e.sourceMap;p&&typeof btoa!="undefined"&&(n+=`
/*# sourceMappingURL=data:application/json;base64,`.concat(btoa(unescape(encodeURIComponent(JSON.stringify(p))))," */")),t.styleTagTransform(n,r,t.options)}function o(r){if(r.parentNode===null)return!1;r.parentNode.removeChild(r)}function f(r){if(typeof document=="undefined")return{update:function(){},remove:function(){}};var t=r.insertStyleElement(r);return{update:function(n){a(t,r,n)},remove:function(){o(t)}}}d.exports=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/styleTagTransform.js"(d){function a(o,f){if(f.styleSheet)f.styleSheet.cssText=o;else{for(;f.firstChild;)f.removeChild(f.firstChild);f.appendChild(document.createTextNode(o))}}d.exports=a},"./stories/UIDialog.story.tsx"(d,a,o){var f=this&&this.__createBinding||(Object.create?(function(i,u,m,s){s===void 0&&(s=m);var y=Object.getOwnPropertyDescriptor(u,m);(!y||("get"in y?!u.__esModule:y.writable||y.configurable))&&(y={enumerable:!0,get:function(){return u[m]}}),Object.defineProperty(i,s,y)}):(function(i,u,m,s){s===void 0&&(s=m),i[s]=u[m]})),r=this&&this.__setModuleDefault||(Object.create?(function(i,u){Object.defineProperty(i,"default",{enumerable:!0,value:u})}):function(i,u){i.default=u}),t=this&&this.__importStar||(function(){var i=function(u){return i=Object.getOwnPropertyNames||function(m){var s=[];for(var y in m)Object.prototype.hasOwnProperty.call(m,y)&&(s[s.length]=y);return s},i(u)};return function(u){if(u&&u.__esModule)return u;var m={};if(u!=null)for(var s=i(u),y=0;y<s.length;y++)s[y]!=="default"&&f(m,u,s[y]);return r(m,u),m}})();Object.defineProperty(a,"__esModule",{value:!0}),a.Dialog=void 0;const e=t(o("../../node_modules/.pnpm/react@16.14.0/node_modules/react/index.js")),n=o("../../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"),g=o("./src/components/UIDialog/index.ts"),p=o("./src/components/UIButton/index.tsx"),l=o("./src/components/UIInput/index.tsx"),_=o("./src/components/UIDropdown/index.tsx"),I=o("./src/components/UIComboBox/index.tsx"),c=o("./src/components/UICheckbox/index.tsx");a.default={title:"Dialogs/Dialogs"};const h={childrenGap:40},b={main:{".ms-TextField-wrapper > .ms-Label":{margin:0}}};class x extends e.default.Component{constructor(){super(...arguments),this.state={isOpen:!1,text:"Some Text"},this.onChange=u=>{this.setState({text:u.target.value})},this.onToggle=()=>{this.setState({isOpen:!this.state.isOpen})},this.onAccept=()=>{alert(`You wrote: ${this.state.text}`),this.setState({isOpen:!1})}}render(){const{draggable:u}=this.props,m=[{key:"111",text:"Dummy option 111"},{key:"222",text:"Dummy option 222"}],s=this.props.draggable?{modalProps:{dragOptions:{moveMenuItemText:"Move",closeMenuItemText:"Close",menu:n.ContextualMenu,keepInBounds:!0}}}:void 0;return e.default.createElement(e.default.Fragment,null,e.default.createElement(p.UIDefaultButton,{onClick:this.onToggle,primary:!0},u?"Open Draggable Dialog":"Open Dialog"),e.default.createElement(g.UIDialog,k(D({isOpen:this.state.isOpen,isOpenAnimated:this.props.openAnimation,isBlocking:!0,title:"Header Title",acceptButtonText:"Accept",cancelButtonText:"Cancel"},s),{onAccept:this.onAccept,styles:b,onCancel:this.onToggle,onDismiss:this.onToggle}),e.default.createElement(l.UITextInput,{label:"Dialog Content",value:this.state.text,onChange:this.onChange}),e.default.createElement(_.UIDropdown,{label:"Dummy",options:m}),e.default.createElement(I.UIComboBox,{label:"Dummy",highlight:!0,options:m})))}}const E=i=>{const[u,m]=(0,e.useState)(!1),s=()=>{m(!u)},y=D({},b.main),{size:v}=i;v&&(y.height=v);let T="Open Large Dialog";return v&&(T+=` height=${v}`),e.default.createElement(e.default.Fragment,null,e.default.createElement(p.UIDefaultButton,{onClick:s,primary:!0},T),e.default.createElement(g.UIDialog,{isOpen:u,isOpenAnimated:i.openAnimation,isBlocking:!0,title:"Header Title",acceptButtonText:"Accept",cancelButtonText:"Cancel",styles:{main:y},onAccept:s,onCancel:s,onDismiss:s},e.default.createElement(_.UIDropdown,{label:"Dummy",options:[]}),e.default.createElement(l.UITextInput,{label:"Username"}),e.default.createElement(l.UITextInput,{label:"Email"}),e.default.createElement(l.UITextInput,{label:"Password",type:"password"}),e.default.createElement(l.UITextInput,{label:"Email"}),e.default.createElement(l.UITextInput,{label:"First name"}),e.default.createElement(l.UITextInput,{label:"Last name"}),e.default.createElement(l.UITextInput,{label:"Address"}),e.default.createElement(l.UITextInput,{label:"State"}),e.default.createElement(l.UITextInput,{label:"Country"}),e.default.createElement(l.UITextInput,{label:"Phone"}),e.default.createElement(l.UITextInput,{label:"Dummy 1"}),e.default.createElement(l.UITextInput,{label:"Dummy 2"}),e.default.createElement(l.UITextInput,{label:"Dummy 3"}),e.default.createElement(l.UITextInput,{label:"Dummy 4"}),e.default.createElement(l.UITextInput,{label:"Dummy 5"})))},A=i=>{const[u,m]=(0,e.useState)(!1),s=()=>{m(!u)};return e.default.createElement(e.default.Fragment,null,e.default.createElement(p.UIDefaultButton,{onClick:s,primary:!0},"Open Confirm Dialog"),e.default.createElement(g.UIDialog,{isOpen:u,isOpenAnimated:i.openAnimation,isBlocking:!0,onAccept:s,onCancel:s,onDismiss:s,acceptButtonText:"Yes",cancelButtonText:"No",title:"Delete Confirmation",dialogContentProps:{subText:"Are you sure you want to delete entry? This action cannot be undone."}}))},S=i=>{const[u,m]=(0,e.useState)(!1),s=()=>{m(!u)};return e.default.createElement(e.default.Fragment,null,e.default.createElement(p.UIDefaultButton,{onClick:s,primary:!0},"Open Dialog with multiple buttons"),e.default.createElement(g.UIDialog,{isOpen:u,isOpenAnimated:i.openAnimation,isBlocking:!0,onDismiss:s,title:"Delete Confirmation",dialogContentProps:{subText:"This entry includes subelements. Are you sure you want to delete the entry or only its subelements? This action cannot be undone."},footer:[e.default.createElement(p.UIDefaultButton,{key:"1",onClick:s,primary:!0,text:"Delete entry and subelements"}),e.default.createElement(p.UIDefaultButton,{key:"2",onClick:s,text:"Delete entry only"}),e.default.createElement(p.UIDefaultButton,{key:"3",onClick:s,text:"Cancel"})]}))},w=()=>{const[i,u]=(0,e.useState)(!0);return e.default.createElement(n.Stack,{tokens:h},e.default.createElement(n.Stack,{tokens:h},e.default.createElement(n.Text,{variant:"large",block:!0},"Dialogs"),e.default.createElement(n.Stack,{horizontal:!0,tokens:h},e.default.createElement(c.UICheckbox,{label:"Open animation enabled",checked:i,onChange:(m,s)=>{u(s)}})),e.default.createElement(n.Stack,{horizontal:!0,tokens:h},e.default.createElement(x,{draggable:!1,openAnimation:i})),e.default.createElement(n.Stack,{horizontal:!0,tokens:h},e.default.createElement(x,{draggable:!1,openAnimation:i})),e.default.createElement(n.Stack,{horizontal:!0,tokens:h},e.default.createElement(x,{draggable:!0,openAnimation:i})),e.default.createElement(n.Stack,{horizontal:!0,tokens:h},e.default.createElement(E,{openAnimation:i})),e.default.createElement(n.Stack,{horizontal:!0,tokens:h},e.default.createElement(E,{size:400,openAnimation:i})),e.default.createElement(n.Stack,{horizontal:!0,tokens:h},e.default.createElement(E,{openAnimation:i})),e.default.createElement(n.Stack,{horizontal:!0,tokens:h},e.default.createElement(A,{openAnimation:i})),e.default.createElement(n.Stack,{horizontal:!0,tokens:h},e.default.createElement(S,{openAnimation:i}))))};a.Dialog=w}}]);})();