@sap-ux/ui-components/storybook/UILoader-story.b145ceb4.iframe.bundle.js

SAP UI Components Library

(()=>{(self.webpackChunk_sap_ux_ui_components=self.webpackChunk_sap_ux_ui_components||[]).push([[660],{"../../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/styles/_shadows.scss":(f,n,s)=>{var d=s("../../node_modules/.pnpm/css-loader@6.8.1_webpack@5.96.1/node_modules/css-loader/dist/runtime/noSourceMaps.js"),l=s("../../node_modules/.pnpm/css-loader@6.8.1_webpack@5.96.1/node_modules/css-loader/dist/runtime/api.js"),a=l(d);a.push([f.id,":root{--ui-box-shadow-small: 0 4px 8px 0 var(--vscode-widget-shadow);--ui-box-shadow-medium: 0 6px 12px 0 var(--vscode-widget-shadow);--ui-box-shadow-large: 0 10px 20px 0 var(--vscode-widget-shadow)}.ui-box-shadow-small{box-shadow:var(--ui-box-shadow-small)}.ui-box-shadow-medium{box-shadow:var(--ui-box-shadow-medium)}.ui-box-shadow-large{box-shadow:var(--ui-box-shadow-large)}",""]),f.exports=a},"../../node_modules/.pnpm/css-loader@6.8.1_webpack@5.96.1/node_modules/css-loader/dist/runtime/api.js":f=>{"use strict";f.exports=function(n){var s=[];return s.toString=function(){return this.map(function(l){var a="",e=typeof l[5]!="undefined";return l[4]&&(a+="@supports (".concat(l[4],") {")),l[2]&&(a+="@media ".concat(l[2]," {")),e&&(a+="@layer".concat(l[5].length>0?" ".concat(l[5]):""," {")),a+=n(l),e&&(a+="}"),l[2]&&(a+="}"),l[4]&&(a+="}"),a}).join("")},s.i=function(l,a,e,t,_){typeof l=="string"&&(l=[[null,l,void 0]]);var i={};if(e)for(var r=0;r<this.length;r++){var m=this[r][0];m!=null&&(i[m]=!0)}for(var y=0;y<l.length;y++){var o=[].concat(l[y]);e&&i[o[0]]||(typeof _!="undefined"&&(typeof o[5]=="undefined"||(o[1]="@layer".concat(o[5].length>0?" ".concat(o[5]):""," {").concat(o[1],"}")),o[5]=_),a&&(o[2]&&(o[1]="@media ".concat(o[2]," {").concat(o[1],"}")),o[2]=a),t&&(o[4]?(o[1]="@supports (".concat(o[4],") {").concat(o[1],"}"),o[4]=t):o[4]="".concat(t)),s.push(o))}},s}},"../../node_modules/.pnpm/css-loader@6.8.1_webpack@5.96.1/node_modules/css-loader/dist/runtime/noSourceMaps.js":f=>{"use strict";f.exports=function(n){return n[1]}},"./src/styles/_shadows.scss":(f,n,s)=>{"use strict";s.r(n),s.d(n,{default:()=>v});var d=s("../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.96.1/node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"),l=s.n(d),a=s("../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.96.1/node_modules/style-loader/dist/runtime/styleDomAPI.js"),e=s.n(a),t=s("../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.96.1/node_modules/style-loader/dist/runtime/insertBySelector.js"),_=s.n(t),i=s("../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.96.1/node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js"),r=s.n(i),m=s("../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.96.1/node_modules/style-loader/dist/runtime/insertStyleElement.js"),y=s.n(m),o=s("../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.96.1/node_modules/style-loader/dist/runtime/styleTagTransform.js"),S=s.n(o),D=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/styles/_shadows.scss"),E=s.n(D),u={};for(const h in D)h!=="default"&&(u[h]=()=>D[h]);s.d(n,u);var c={};c.styleTagTransform=S(),c.setAttributes=r(),c.insert=_().bind(null,"head"),c.domAPI=e(),c.insertStyleElement=y();var p=l()(E(),c);const v=E()&&E().locals?E().locals:void 0},"../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.96.1/node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js":f=>{"use strict";var n=[];function s(a){for(var e=-1,t=0;t<n.length;t++)if(n[t].identifier===a){e=t;break}return e}function d(a,e){for(var t={},_=[],i=0;i<a.length;i++){var r=a[i],m=e.base?r[0]+e.base:r[0],y=t[m]||0,o="".concat(m," ").concat(y);t[m]=y+1;var S=s(o),D={css:r[1],media:r[2],sourceMap:r[3],supports:r[4],layer:r[5]};if(S!==-1)n[S].references++,n[S].updater(D);else{var E=l(D,e);e.byIndex=i,n.splice(i,0,{identifier:o,updater:E,references:1})}_.push(o)}return _}function l(a,e){var t=e.domAPI(e);t.update(a);var _=function(r){if(r){if(r.css===a.css&&r.media===a.media&&r.sourceMap===a.sourceMap&&r.supports===a.supports&&r.layer===a.layer)return;t.update(a=r)}else t.remove()};return _}f.exports=function(a,e){e=e||{},a=a||[];var t=d(a,e);return function(i){i=i||[];for(var r=0;r<t.length;r++){var m=t[r],y=s(m);n[y].references--}for(var o=d(i,e),S=0;S<t.length;S++){var D=t[S],E=s(D);n[E].references===0&&(n[E].updater(),n.splice(E,1))}t=o}}},"../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.96.1/node_modules/style-loader/dist/runtime/insertBySelector.js":f=>{"use strict";var n={};function s(l){if(typeof n[l]=="undefined"){var a=document.querySelector(l);if(window.HTMLIFrameElement&&a instanceof window.HTMLIFrameElement)try{a=a.contentDocument.head}catch(e){a=null}n[l]=a}return n[l]}function d(l,a){var e=s(l);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(a)}f.exports=d},"../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.96.1/node_modules/style-loader/dist/runtime/insertStyleElement.js":f=>{"use strict";function n(s){var d=document.createElement("style");return s.setAttributes(d,s.attributes),s.insert(d,s.options),d}f.exports=n},"../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.96.1/node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js":(f,n,s)=>{"use strict";function d(l){var a=s.nc;a&&l.setAttribute("nonce",a)}f.exports=d},"../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.96.1/node_modules/style-loader/dist/runtime/styleDomAPI.js":f=>{"use strict";function n(l,a,e){var t="";e.supports&&(t+="@supports (".concat(e.supports,") {")),e.media&&(t+="@media ".concat(e.media," {"));var _=typeof e.layer!="undefined";_&&(t+="@layer".concat(e.layer.length>0?" ".concat(e.layer):""," {")),t+=e.css,_&&(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))))," */")),a.styleTagTransform(t,l,a.options)}function s(l){if(l.parentNode===null)return!1;l.parentNode.removeChild(l)}function d(l){if(typeof document=="undefined")return{update:function(){},remove:function(){}};var a=l.insertStyleElement(l);return{update:function(t){n(a,l,t)},remove:function(){s(a)}}}f.exports=d},"../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.96.1/node_modules/style-loader/dist/runtime/styleTagTransform.js":f=>{"use strict";function n(s,d){if(d.styleSheet)d.styleSheet.cssText=s;else{for(;d.firstChild;)d.removeChild(d.firstChild);d.appendChild(document.createTextNode(s))}}f.exports=n},"./stories/UILoader.story.tsx":function(f,n,s){"use strict";var d=this&&this.__createBinding||(Object.create?function(u,c,p,v){v===void 0&&(v=p);var h=Object.getOwnPropertyDescriptor(c,p);(!h||("get"in h?!c.__esModule:h.writable||h.configurable))&&(h={enumerable:!0,get:function(){return c[p]}}),Object.defineProperty(u,v,h)}:function(u,c,p,v){v===void 0&&(v=p),u[v]=c[p]}),l=this&&this.__setModuleDefault||(Object.create?function(u,c){Object.defineProperty(u,"default",{enumerable:!0,value:c})}:function(u,c){u.default=c}),a=this&&this.__importStar||function(u){if(u&&u.__esModule)return u;var c={};if(u!=null)for(var p in u)p!=="default"&&Object.prototype.hasOwnProperty.call(u,p)&&d(c,u,p);return l(c,u),c};Object.defineProperty(n,"__esModule",{value:!0}),n.Dialogs=n.Delayed=n.Loaders=void 0;const e=a(s("../../node_modules/.pnpm/react@16.14.0/node_modules/react/index.js")),t=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/UILoader/index.tsx"),i=s("./src/components/UIButton/index.tsx"),r=s("./src/components/UIDialog/index.ts");n.default={title:"Progress/Loader"};const m={childrenGap:40},y=()=>e.default.createElement(t.Stack,{tokens:m},e.default.createElement(t.Stack,{tokens:m},e.default.createElement(t.Text,null,"Default Loader"),e.default.createElement(t.Stack,{horizontal:!0},e.default.createElement(_.UILoader,null))),e.default.createElement(t.Stack,{tokens:m},e.default.createElement(t.Text,null,"Large loader"),e.default.createElement(t.Stack,{horizontal:!0},e.default.createElement(_.UILoader,{size:t.SpinnerSize.large}))),e.default.createElement(t.Stack,{tokens:m},e.default.createElement(t.Text,null,"Medium loader"),e.default.createElement(t.Stack,{horizontal:!0},e.default.createElement(_.UILoader,{size:t.SpinnerSize.medium}))),e.default.createElement(t.Stack,{tokens:m},e.default.createElement(t.Text,null,"Small loader"),e.default.createElement(t.Stack,{horizontal:!0},e.default.createElement(_.UILoader,{size:t.SpinnerSize.small}))),e.default.createElement(t.Stack,{tokens:m},e.default.createElement(t.Text,null,"xSmall loader"),e.default.createElement(t.Stack,{horizontal:!0},e.default.createElement(_.UILoader,{size:t.SpinnerSize.xSmall}))),e.default.createElement(t.Stack,{tokens:m,style:{position:"relative"}},e.default.createElement(t.Text,null,"Loader - block DOM"),e.default.createElement(t.Stack,{horizontal:!0},e.default.createElement(_.UILoader,{blockDOM:!0}))),e.default.createElement(t.Stack,{tokens:m,style:{position:"relative",height:"75px"}},e.default.createElement(t.Text,null,"Loader - block DOM with text..."),e.default.createElement(t.Stack,{horizontal:!0},e.default.createElement(_.UILoader,{blockDOM:!0,label:"Loader label..."}))),e.default.createElement(t.Stack,{tokens:m},e.default.createElement(t.Text,null,"Small loader - css class"),e.default.createElement(t.Stack,{horizontal:!0},e.default.createElement(_.UILoader,{className:"uiLoaderXSmall"}))),e.default.createElement(t.Stack,{tokens:m},e.default.createElement(t.Text,null,"Large loader - css class"),e.default.createElement(t.Stack,{horizontal:!0},e.default.createElement(_.UILoader,{className:"uiLoaderXLarge"}))));n.Loaders=y;const o=()=>{const[u,c]=(0,e.useState)(!1);return e.default.createElement(e.default.Fragment,null,e.default.createElement("div",null,e.default.createElement("div",{style:{position:"relative",height:"100px",width:"300px",textAlign:"center"}},e.default.createElement(t.Text,null,"Loader - delayed"),u&&e.default.createElement(_.UILoader,{delayed:!0,blockDOM:!0,label:"Delayed loader"})),e.default.createElement("div",null,e.default.createElement(i.UIDefaultButton,{text:"Toggle Loader",onClick:()=>{c(!u)}}))))};n.Delayed=o;const S=`
    .popup--busy .ms-Dialog-content {
        position: static;
    }
`,D=u=>{const{delayed:c,text:p}=u,[v,h]=(0,e.useState)(!1),[T,I]=(0,e.useState)(!1),g=()=>{h(!v)},b=()=>{I(!0),setTimeout(()=>{I(!1),g()},500)};return e.default.createElement(e.default.Fragment,null,e.default.createElement(i.UIDefaultButton,{onClick:g,primary:!0},p),e.default.createElement(r.UIDialog,{isOpen:v,isBlocking:!0,title:"Header Title",acceptButtonText:"Accept",cancelButtonText:"Cancel",onAccept:g,onCancel:g,onDismiss:g,modalProps:{className:"popup--busy"},footer:e.default.createElement("div",null,e.default.createElement(i.UIDefaultButton,{onClick:b},"Accept"))},e.default.createElement("div",null,"Dummy"),T&&e.default.createElement(_.UILoader,{className:"uiLoaderXLarge",blockDOM:!0,delayed:c})))},E=()=>e.default.createElement(e.default.Fragment,null,e.default.createElement("style",null,S),e.default.createElement("div",null,e.default.createElement(D,{delayed:!1,text:"Open Dialog with loader"})),e.default.createElement("div",null,e.default.createElement(D,{delayed:!0,text:"Open Dialog with delayed loader"})));n.Dialogs=E}}]);})();