modal-and-popover-confirm-popup-confirm-popup-stories-mdx.dfb40673.iframe.bundle.js

(self.webpackChunk_freud_ds_web=self.webpackChunk_freud_ds_web||[]).push([[5406],{"./stories/modal-and-popover/confirm-popup/confirm-popup.stories.mdx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{_Default_:()=>_Default_,__namedExportsOrder:()=>confirm_popup_stories_namedExportsOrder,default:()=>confirm_popup_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"),public_api=__webpack_require__("./projects/web-components/src/public-api.ts"),header_component=__webpack_require__("./stories/header/header.component.tsx"),animations=__webpack_require__("./node_modules/@angular/platform-browser/fesm2022/animations.mjs"),core=__webpack_require__("./node_modules/@angular/core/fesm2022/core.mjs");const Default=(()=>({template:'\n    <div style="min-height: 300px;">\n      <freud-confirm-popup-example></freud-confirm-popup-example>\n    </div>\n  '})).bind({});(0,angular_dist.applicationConfig)({providers:[(0,core.importProvidersFrom)(animations.BrowserAnimationsModule)]});var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.mjs"),common=__webpack_require__("./node_modules/@angular/common/fesm2022/common.mjs"),example_componentngResource=__webpack_require__("./stories/modal-and-popover/confirm-popup/confirm-popup-example/example.component.scss?ngResource"),example_componentngResource_default=__webpack_require__.n(example_componentngResource),confirmation_service=__webpack_require__("./projects/web-components/src/services/confirmation.service.ts");let FreudConfirmPopupExampleComponent=class FreudConfirmPopupExampleComponent{constructor(confirmationService){this.confirmationService=confirmationService}confirm(event){this.confirmationService.confirm({target:event.target,icon:"freud-icon freud-icon-exclamation-triangle",message:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",acceptLabel:"Aceitar",rejectLabel:"Rejeitar"})}static#_=this.ctorParameters=()=>[{type:confirmation_service.N}]};FreudConfirmPopupExampleComponent=(0,tslib_es6.gn)([(0,core.Component)({selector:"freud-confirm-popup-example",template:'\n    <freud-confirm-popup></freud-confirm-popup>\n    <freud-button (click)="confirm($event)">Clique aqui!</freud-button>\n  ',styles:[example_componentngResource_default()]})],FreudConfirmPopupExampleComponent);let FreudConfirmPopupExampleModule=class FreudConfirmPopupExampleModule{};FreudConfirmPopupExampleModule=(0,tslib_es6.gn)([(0,core.NgModule)({imports:[common.CommonModule,public_api.Rw,public_api.v7],declarations:[FreudConfirmPopupExampleComponent],exports:[FreudConfirmPopupExampleComponent]})],FreudConfirmPopupExampleModule);var jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");function _createMdxContent(props){const _components=Object.assign({h2:"h2",pre:"pre",code:"code",p:"p",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:[public_api.Rw,FreudConfirmPopupExampleModule]})],parameters:{layout:"centered",viewMode:"docs",previewTabs:{canvas:{hidden:!0}},backgrounds:{default:"Default",values:[{name:"Default",value:"#FFFFFF"},{name:"BgColor",value:"#6732D1"}]}},title:"@freud-ds/web-components/Modal e Popover/ConfirmPopup",component:public_api.V4}),"\n",(0,jsx_runtime.jsx)(header_component.z,{title:"ConfirmPopup",description:"Exibe uma sobreposição de confirmação exibida relativamente ao seu destino."}),"\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 { FreudConfirmPopupModule } from '@freud-ds/web-components';\n"})}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"getting-started",children:"Getting Started"}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:"FreudConfirmPopup é definido usando a tag freud-confirm-popup e uma instância de FreudConfirmationService é necessária para exibi-lo chamando o método confirm."}),"\n",(0,jsx_runtime.jsx)(_components.pre,{children:(0,jsx_runtime.jsx)(_components.code,{className:"language-html",children:'<freud-confirm-popup></freud-confirm-popup>\n<freud-button (click)="confirm($event)">Clique aqui!</freud-button>\n'})}),"\n",(0,jsx_runtime.jsx)(_components.pre,{children:(0,jsx_runtime.jsx)(_components.code,{className:"language-ts",children:"import { FreudConfirmationService } from '@freud-ds/web-components';\n\nexport class ConfirmDialogDemo {\n  constructor(private confirmationService: FreudConfirmationService) {}\n\n  confirm(event) {\n    this.confirmationService.confirm({\n      target: event.target,\n      message: 'Mensagem.',\n      acceptLabel: 'Aceitar',\n      rejectLabel: 'Rejeitar',\n      accept: () => {\n        //Ação quando o usuário aceitar\n      },\n      reject: () => {\n        // Ação quando o usuário rejeitar\n      },\n    });\n  }\n}\n"})}),"\n",(0,jsx_runtime.jsxs)(_components.h2,{id:"exemplo",children:[(0,jsx_runtime.jsx)("a",{id:"exemplos"}),"Exemplo"]}),"\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})})]})}const _Default_=Default,componentMeta={title:"@freud-ds/web-components/Modal e Popover/ConfirmPopup",parameters:{layout:"centered",viewMode:"docs",previewTabs:{canvas:{hidden:!0}},backgrounds:{default:"Default",values:[{name:"Default",value:"#FFFFFF"},{name:"BgColor",value:"#6732D1"}]}},decorators:[(0,angular_dist.moduleMetadata)({imports:[public_api.Rw,FreudConfirmPopupExampleModule]})],component:public_api.V4,tags:["stories-mdx"],includeStories:["_Default_"]};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 confirm_popup_stories=componentMeta,confirm_popup_stories_namedExportsOrder=["_Default_"]},"./stories/modal-and-popover/confirm-popup/confirm-popup-example/example.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,"",""]),module.exports=___CSS_LOADER_EXPORT___.toString()}}]);