feedback-loader-loader-stories-mdx.a9e16ba8.iframe.bundle.js

(self.webpackChunk_freud_ds_web=self.webpackChunk_freud_ds_web||[]).push([[717],{"./projects/web-components/src/components/feedback/loader/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{a:()=>FreudLoaderComponent,S:()=>FreudLoaderModule});var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.mjs"),loader_componentngResource=__webpack_require__("./projects/web-components/src/components/feedback/loader/loader.component.scss?ngResource"),loader_componentngResource_default=__webpack_require__.n(loader_componentngResource),core=__webpack_require__("./node_modules/@angular/core/fesm2022/core.mjs");let FreudLoaderComponent=class FreudLoaderComponent{constructor(){this.size="sm",this.bgColor=!1}static#_=this.propDecorators={size:[{type:core.Input}],bgColor:[{type:core.Input}]}};FreudLoaderComponent=(0,tslib_es6.gn)([(0,core.Component)({selector:"freud-loader",changeDetection:core.ChangeDetectionStrategy.OnPush,encapsulation:core.ViewEncapsulation.None,template:'\n    <div class="spinner">\n      <div></div>\n    </div>\n  ',host:{class:"freud-loader","[class.freud-loader-size-small]":"size === 'sm'","[class.freud-loader-size-large]":"size === 'lg'","[class.freud-loader-bgcolor]":"bgColor"},styles:[loader_componentngResource_default()]})],FreudLoaderComponent);var common=__webpack_require__("./node_modules/@angular/common/fesm2022/common.mjs");let FreudLoaderModule=class FreudLoaderModule{};FreudLoaderModule=(0,tslib_es6.gn)([(0,core.NgModule)({imports:[common.CommonModule],declarations:[FreudLoaderComponent],exports:[FreudLoaderComponent]})],FreudLoaderModule)},"./stories/header/header.component.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{z:()=>FreudHeaderComponent});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js");const FreudHeaderComponent=({title,description})=>react__WEBPACK_IMPORTED_MODULE_0__.createElement("div",{className:"freud-docs-header"},react__WEBPACK_IMPORTED_MODULE_0__.createElement("div",{className:"header"},react__WEBPACK_IMPORTED_MODULE_0__.createElement("div",{className:"container"},react__WEBPACK_IMPORTED_MODULE_0__.createElement("h2",{className:"title"},title),react__WEBPACK_IMPORTED_MODULE_0__.createElement("p",{className:"description"},description))))},"./stories/feedback/loader/loader.stories.mdx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{_BGColor_:()=>_BGColor_,_Default_:()=>_Default_,_Size_:()=>_Size_,__namedExportsOrder:()=>loader_stories_namedExportsOrder,default:()=>loader_stories});__webpack_require__("./node_modules/react/index.js");var lib=__webpack_require__("./node_modules/@storybook/addon-docs/node_modules/@mdx-js/react/lib/index.js"),dist=__webpack_require__("./node_modules/@storybook/addon-docs/dist/index.mjs"),angular_dist=__webpack_require__("./node_modules/@storybook/angular/dist/index.mjs"),loader=__webpack_require__("./projects/web-components/src/components/feedback/loader/index.ts"),header_component=__webpack_require__("./stories/header/header.component.tsx");const Default=(args=>({props:{...args},template:'\n    <freud-loader\n      [size]="size"\n      [bgColor]="bgColor">\n    </freud-loader>\n  '})).bind({});Default.args={};const BGColor=(args=>({props:{...args},template:'\n    <freud-loader style="margin-right: 20px;"\n      [bgColor]="true">\n    </freud-loader>\n  '})).bind({}),Size=(args=>({props:{...args},template:'\n    <div style="display: inline-flex;align-items: center;">\n      <freud-loader style="margin-right: 20px;"\n        [size]="\'sm\'">\n      </freud-loader>\n\n      <freud-loader\n        [size]="\'lg\'">\n      </freud-loader>\n    </div>\n  '})).bind({});var jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");function _createMdxContent(props){const _components=Object.assign({h2:"h2",pre:"pre",code:"code",h3:"h3"},(0,lib.ah)(),props.components);return(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)(dist.h_,{decorators:[(0,angular_dist.moduleMetadata)({imports:[loader.S]})],parameters:{layout:"centered",backgrounds:{default:"Default",values:[{name:"Default",value:"#FFFFFF"},{name:"BgColor",value:"#6732D1"}]}},title:"@freud-ds/web-components/Feedback/Loader",component:loader.a}),"\n",(0,jsx_runtime.jsx)(header_component.z,{title:"Loader",description:"Loader é um componente para indicar ao usuário que o sistema esá carregando."}),"\n",(0,jsx_runtime.jsxs)(_components.h2,{id:"import",children:[(0,jsx_runtime.jsx)("a",{id:"importing"}),"Import"]}),"\n",(0,jsx_runtime.jsx)(_components.pre,{children:(0,jsx_runtime.jsx)(_components.code,{className:"language-ts",children:"import { FreudLoaderModule, StepMenu } from '@freud-ds/web-components';\n"})}),"\n",(0,jsx_runtime.jsxs)(_components.h2,{id:"exemplos",children:[(0,jsx_runtime.jsx)("a",{id:"exemplos"}),"Exemplos"]}),"\n",(0,jsx_runtime.jsx)("br",{}),"\n",(0,jsx_runtime.jsx)(_components.h3,{id:"default",children:"Default"}),"\n",(0,jsx_runtime.jsx)(dist.Xz,{children:(0,jsx_runtime.jsx)(dist.oG,{story:Default})}),"\n",(0,jsx_runtime.jsx)(_components.h3,{id:"bg-color",children:"BG Color"}),"\n",(0,jsx_runtime.jsx)(dist.Xz,{style:{backgroundColor:"#241249"},children:(0,jsx_runtime.jsx)(dist.oG,{story:BGColor})}),"\n",(0,jsx_runtime.jsx)(_components.h3,{id:"size-default-large",children:"Size (Default, Large)"}),"\n",(0,jsx_runtime.jsx)(dist.Xz,{children:(0,jsx_runtime.jsx)(dist.oG,{story:Size})}),"\n",(0,jsx_runtime.jsxs)(_components.h2,{id:"api",children:[(0,jsx_runtime.jsx)("a",{id:"api"}),"API"]}),"\n",(0,jsx_runtime.jsx)(dist.Ed,{of:loader.a})]})}const _Default_=Default,_BGColor_=BGColor,_Size_=Size,componentMeta={title:"@freud-ds/web-components/Feedback/Loader",parameters:{layout:"centered",backgrounds:{default:"Default",values:[{name:"Default",value:"#FFFFFF"},{name:"BgColor",value:"#6732D1"}]}},decorators:[(0,angular_dist.moduleMetadata)({imports:[loader.S]})],component:loader.a,tags:["stories-mdx"],includeStories:["_Default_","_BGColor_","_Size_"]};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs={...componentMeta.parameters.docs||{},page:function MDXContent(props={}){const{wrapper:MDXLayout}=Object.assign({},(0,lib.ah)(),props.components);return MDXLayout?(0,jsx_runtime.jsx)(MDXLayout,{...props,children:(0,jsx_runtime.jsx)(_createMdxContent,{...props})}):_createMdxContent(props)}};const loader_stories=componentMeta,loader_stories_namedExportsOrder=["_Default_","_BGColor_","_Size_"]},"./projects/web-components/src/components/feedback/loader/loader.component.scss?ngResource":(module,__unused_webpack_exports,__webpack_require__)=>{var ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___=__webpack_require__("./node_modules/css-loader/dist/runtime/noSourceMaps.js"),___CSS_LOADER_EXPORT___=__webpack_require__("./node_modules/css-loader/dist/runtime/api.js")(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);___CSS_LOADER_EXPORT___.push([module.id,'@keyframes spin {\n  to {\n    transform: rotate(1turn);\n  }\n}\n.freud-loader {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.freud-loader .spinner {\n  position: relative;\n  display: inline-block;\n  width: 5em;\n  height: 5em;\n  font-size: 8px;\n  text-indent: 999em;\n  overflow: hidden;\n  animation: spin 0.8s infinite steps(8);\n}\n\n.freud-loader-size-small .spinner {\n  font-size: 4px;\n}\n.freud-loader-size-large .spinner {\n  font-size: 8px;\n}\n\n.spinner:before,\n.spinner:after,\n.spinner > div:before,\n.spinner > div:after {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 2.35em; /* (largura - largura da barra)/2  */\n  width: 0.3em;\n  height: 1.2em;\n  border-radius: 0.2em;\n  background: #6732D1;\n  box-shadow: 0 3.8em #EEE6FC; /* altura - altura da barra */\n  transform-origin: 50% 2.5em; /* altura / 2 */\n}\n\n.freud-loader.freud-loader-bgcolor .spinner:before,\n.freud-loader.freud-loader-bgcolor .spinner:after,\n.freud-loader.freud-loader-bgcolor .spinner > div:before,\n.freud-loader.freud-loader-bgcolor .spinner > div:after {\n  background: #FFFFFF; /* altura - altura da barra */\n  box-shadow: 0 3.8em #B89FEA; /* altura / 2 */\n}\n\n.spinner:after {\n  transform: rotate(-45deg);\n}\n\n.spinner > div:before {\n  transform: rotate(-90deg);\n}\n\n.spinner > div:after {\n  transform: rotate(-135deg);\n}',""]),module.exports=___CSS_LOADER_EXPORT___.toString()}}]);