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