forms-auto-complete-auto-complete-stories-mdx.a77394db.iframe.bundle.js

(self.webpackChunk_freud_ds_web=self.webpackChunk_freud_ds_web||[]).push([[3575],{"./stories/forms/auto-complete/auto-complete.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_,_Disabled_:()=>_Disabled_,_Dropdown_:()=>_Dropdown_,_Invalid_:()=>_Invalid_,_Multiple_:()=>_Multiple_,__namedExportsOrder:()=>auto_complete_stories_namedExportsOrder,default:()=>auto_complete_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 Template=args=>({props:{...args},template:'\n    <div style="height: 150px">\n        <freud-auto-complete-example\n          [disabled]="disabled"\n          [dropdown]="dropdown"\n          [multiple]="multiple"\n          [invalid]="invalid"\n          [bgColor]="bgColor">\n        </freud-auto-complete-example>\n    </div>\n'}),Default=Template.bind({}),BGColor=Template.bind({});BGColor.args={bgColor:!0};const Disabled=Template.bind({});Disabled.args={disabled:!0};const Invalid=Template.bind({});Invalid.args={invalid:!0};const Multiple=Template.bind({});Multiple.args={multiple:!0};const Dropdown=(args=>({props:{...args},template:'\n    <div style="height: 250px">\n        <freud-auto-complete-example\n          [disabled]="disabled"\n          [dropdown]="dropdown"\n          [multiple]="multiple"\n          [invalid]="invalid"\n          [bgColor]="bgColor">\n        </freud-auto-complete-example>\n    </div>\n'})).bind({});Dropdown.args={dropdown:!0};(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/forms/auto-complete/auto-complete-example/example.component.scss?ngResource"),example_componentngResource_default=__webpack_require__.n(example_componentngResource);let FreudAutoCompleteExampleComponent=class FreudAutoCompleteExampleComponent{constructor(){this.allItems=["Adamantina","Abc","New York","Rome","London","Islanbul","São Paulo","Rio de Janeiro"],this.items=["Adamantina","Abc","New York","Rome","London","Islanbul","São Paulo","Rio de Janeiro"],this.selectedItem="",this.bgColor=!1,this.disabled=!1,this.dropdown=!1,this.multiple=!1,this.invalid=!1}filterItems(event){const filtered=[],query=event.query;for(let i=0;i<this.allItems.length;i++){const item=this.allItems[i];0==item.toLowerCase().indexOf(query.toLowerCase())&&filtered.push(item)}this.items=filtered}static#_=this.ctorParameters=()=>[];static#_2=this.propDecorators={bgColor:[{type:core.Input}],disabled:[{type:core.Input}],dropdown:[{type:core.Input}],multiple:[{type:core.Input}],invalid:[{type:core.Input}]}};FreudAutoCompleteExampleComponent=(0,tslib_es6.gn)([(0,core.Component)({selector:"freud-auto-complete-example",template:'\n    <freud-auto-complete\n      [(ngModel)]="selectedItem"\n      [suggestions]="items"\n      [label]="\'Label\'"\n      [disabled]="disabled"\n      [invalid]="invalid"\n      [bgColor]="bgColor"\n      [multiple]="multiple"\n      [dropdown]="dropdown"\n      [placeholder]="\'Placeholder\'"\n      (completeMethod)="filterItems($event)"\n    >\n    </freud-auto-complete>\n  ',styles:[example_componentngResource_default()]})],FreudAutoCompleteExampleComponent);var fesm2022_forms=__webpack_require__("./node_modules/@angular/forms/fesm2022/forms.mjs");let FreudAutocompleteExampleModule=class FreudAutocompleteExampleModule{};FreudAutocompleteExampleModule=(0,tslib_es6.gn)([(0,core.NgModule)({imports:[common.CommonModule,public_api.md,fesm2022_forms.UX,fesm2022_forms.u5],declarations:[FreudAutoCompleteExampleComponent],exports:[FreudAutoCompleteExampleComponent]})],FreudAutocompleteExampleModule);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.md,FreudAutocompleteExampleModule]})],parameters:{layout:"centered",backgrounds:{default:"Default",values:[{name:"Default",value:"#FFFFFF"},{name:"BgColor",value:"#6732D1"}]}},title:"@freud-ds/web-components/Forms/AutoComplete",component:public_api.wz}),"\n",(0,jsx_runtime.jsx)(header_component.z,{title:"Autocomplete",description:"AutoComplete é um componente de input que fornece sugestões em tempo real ao ser digitado."}),"\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 { FreudAutoCompleteModule } 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:"FreudAutoComplete usa ngModel para ligação bidirecional, requer uma lista de sugestões e um completeMethod para consultar os resultados.\nO completeMethod obtém o texto da consulta como propriedade event.query e deve atualizar as sugestões com os resultados da pesquisa."}),"\n",(0,jsx_runtime.jsx)(_components.pre,{children:(0,jsx_runtime.jsx)(_components.code,{className:"language-html",children:'<freud-auto-complete\n  [(ngModel)]="text"\n  [suggestions]="results"\n  (completeMethod)="search($event)"\n></freud-auto-complete>\n'})}),"\n",(0,jsx_runtime.jsx)(_components.pre,{children:(0,jsx_runtime.jsx)(_components.code,{className:"language-ts",children:"export class AutoCompleteDemo {\n  text: string;\n\n  results: string[] = [\n    'New York',\n    'Rome',\n    'London',\n    'Islanbul',\n    'São Paulo',\n    'Rio de Janeiro',\n  ];\n\n  search(event) {\n    this.mylookupservice.getResults(event.query).then((data) => {\n      this.results = data;\n    });\n  }\n}\n"})}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"change-detection-of-suggestions",children:"Change Detection of Suggestions"}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:"O preenchimento automático usa a verificação baseada em setter para perceber se as sugestões foram alteradas para atualizar a interface do usuário.\nPara que isso funcione, suas alterações, como adicionar ou remover um registro, sempre devem criar uma nova referência de array em vez de\nmanipular uma array existente, pois o Angular não aciona setters se a referência não mudar."}),"\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:"invalid",children:"Invalid"}),"\n",(0,jsx_runtime.jsx)(dist.Xz,{children:(0,jsx_runtime.jsx)(dist.oG,{story:Invalid})}),"\n",(0,jsx_runtime.jsx)(_components.h3,{id:"disabled",children:"Disabled"}),"\n",(0,jsx_runtime.jsx)(dist.Xz,{children:(0,jsx_runtime.jsx)(dist.oG,{story:Disabled})}),"\n",(0,jsx_runtime.jsx)(_components.h3,{id:"dropdown",children:"Dropdown"}),"\n",(0,jsx_runtime.jsx)(dist.Xz,{children:(0,jsx_runtime.jsx)(dist.oG,{story:Dropdown})}),"\n",(0,jsx_runtime.jsx)(_components.h3,{id:"multiple",children:"Multiple"}),"\n",(0,jsx_runtime.jsx)(dist.Xz,{children:(0,jsx_runtime.jsx)(dist.oG,{story:Multiple})}),"\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.jsxs)(_components.h2,{id:"api",children:[(0,jsx_runtime.jsx)("a",{id:"api"}),"API"]}),"\n",(0,jsx_runtime.jsx)(_components.h3,{id:"dropdown-1",children:"Dropdown"}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["Ativar a propriedade ",(0,jsx_runtime.jsx)(_components.code,{children:"dropdown"}),' exibe um botão ao lado do campo de entrada onde o comportamento do clique do botão é\ndefinido usando a propriedade dropdownMode que considera "blank" ou "current" como valores possíveis.\n"blank" é o modo padrão para enviar uma consulta com uma string vazia, enquanto a configuração "atual" envia uma consulta\ncom o valor atual da entrada.']}),"\n",(0,jsx_runtime.jsx)(_components.h3,{id:"force-selection",children:"Force Selection"}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["A propriedade ",(0,jsx_runtime.jsx)(_components.code,{children:"forceSelection"})," valida a entrada manual para verificar se ela também existe na lista de sugestões, caso contrário,\no valor de entrada é limpo para garantir que o valor passado para o modelo seja sempre uma das sugestões."]}),"\n",(0,jsx_runtime.jsx)(_components.h3,{id:"multiple-selection",children:"Multiple Selection"}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["O modo múltiplo é ativado usando a propriedade ",(0,jsx_runtime.jsx)(_components.code,{children:"multiple"})," para selecionar mais de um valor do preenchimento automático.\nNesse caso, a referência de valor deve ser uma matriz."]}),"\n",(0,jsx_runtime.jsx)(dist.Ed,{of:public_api.wz})]})}const _Default_=Default,_Invalid_=Invalid,_Disabled_=Disabled,_Dropdown_=Dropdown,_Multiple_=Multiple,_BGColor_=BGColor,componentMeta={title:"@freud-ds/web-components/Forms/AutoComplete",parameters:{layout:"centered",backgrounds:{default:"Default",values:[{name:"Default",value:"#FFFFFF"},{name:"BgColor",value:"#6732D1"}]}},decorators:[(0,angular_dist.moduleMetadata)({imports:[public_api.md,FreudAutocompleteExampleModule]})],component:public_api.wz,tags:["stories-mdx"],includeStories:["_Default_","_Invalid_","_Disabled_","_Dropdown_","_Multiple_","_BGColor_"]};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 auto_complete_stories=componentMeta,auto_complete_stories_namedExportsOrder=["_Default_","_Invalid_","_Disabled_","_Dropdown_","_Multiple_","_BGColor_"]},"./stories/forms/auto-complete/auto-complete-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()}}]);