design-react-kit/dist/Autocomplete/Autocomplete.cjs.map

Componenti React per Bootstrap 5

{"version":3,"sources":["../../src/Autocomplete/Autocomplete.tsx"],"sourcesContent":["import React, { FC, useEffect } from 'react';\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore non ci sono i types\nimport BaseAutocomplete from 'accessible-autocomplete/react';\n// Reference to https://www.npmjs.com/package/accessible-autocomplete\n// Implementation example: https://github.com/alphagov/accessible-autocomplete/blob/main/examples/react/index.html\n\nexport interface AutocompleteAttributes {\n  /** Identificativo */\n  id: string;\n  /** Label */\n  label: string;\n  /** Valori all'interno della select */\n  source: (query: string, syncResults: () => void) => void;\n  /** Valori chiave - valore all'interno della select */\n  onConfirm?: (value: string) => void;\n  /** Placeholder (default: ``) */\n  placeholder?: string;\n  /** Valore di default (default: ``) */\n  defaultValue?: string;\n  /** Modalità display menu (default: `inline`) */\n  displayMenu?: string;\n  /** Utilizzare per mostrare il successo nella validazione del valore nel campo Input */\n  valid?: boolean;\n  /** Testo di validazione per l'elemento del moduleo form. */\n  validationText?: string;\n  /** Funzione ritornante stringa in caso di nessun risultato */\n  tNoResults?: () => string;\n  /** Funzione ritornante stringa di suggerimento */\n  tAssistiveHint?: () => string;\n  /** Funzione ritornante stringa se la query è troppo corta */\n  tStatusQueryTooShort?: () => string;\n  /** Funzione ritornante stringa se non ci sono risultati di ricerca */\n  tStatusNoResults?: () => string;\n  /** Funzione ritornante stringa che identifica l'opzione selezionata */\n  tStatusSelectedOption?: () => string;\n  /** Funzione ritornante stringa che identifica i risultati */\n  tStatusResults?: () => string;\n  /** Classi aggiuntive da usare per il componente Button */\n  className?: string;\n  testId?: string;\n}\n\nconst tAssistiveHintDefault = () =>\n  'Quando i risultati del completamento automatico sono disponibili, usa le frecce su e giù per rivedere e Invio per selezionare. Utenti di dispositivi touch, esplora tramite tocco o con gesti di scorrimento';\nconst tNoResultsDefault = () => 'Nessun risultato trovato';\nconst tStatusQueryTooShortDefault = (minQueryLength: number) =>\n  `Digita ${minQueryLength} o più caratteri per mostrare le opzioni di ricerca`;\nconst tStatusNoResultsDefault = () => 'Nessun risultato di ricerca';\nconst tStatusSelectedOptionDefault = (selectedOption: number, length: number, index: number) =>\n  `${selectedOption} ${index + 1} di ${length} è sottolineato`;\nconst tStatusResultsDefault = (length: number, contentSelectedOption: number) => {\n  const words = {\n    result: length === 1 ? 'risultato' : 'risultati',\n    is: length === 1 ? 'è' : 'sono',\n    available: length === 1 ? 'disponibile' : 'disponibili'\n  };\n\n  return `${length} ${words.result} ${words.is} ${words.available}. ${contentSelectedOption}`;\n};\n\nexport const Autocomplete: FC<AutocompleteAttributes> = ({\n  tAssistiveHint = tAssistiveHintDefault,\n  tNoResults = tNoResultsDefault,\n  tStatusQueryTooShort = tStatusQueryTooShortDefault,\n  tStatusNoResults = tStatusNoResultsDefault,\n  tStatusSelectedOption = tStatusSelectedOptionDefault,\n  tStatusResults = tStatusResultsDefault,\n  placeholder = '',\n  defaultValue = '',\n  displayMenu = 'inline',\n  source,\n  validationText,\n  onConfirm,\n  ...attributes\n}) => {\n  const { id, valid } = attributes;\n  const validityCheck = valid === true || valid === false;\n\n  useEffect(() => {\n    const inputElement: HTMLInputElement = document.getElementById(id) as HTMLInputElement;\n    const labelElement = inputElement?.parentElement?.parentElement?.getElementsByTagName('label')[0];\n\n    if (inputElement.value !== '') {\n      labelElement?.classList.add('active');\n    }\n\n    inputElement?.addEventListener('focus', () => {\n      labelElement?.classList.add('active');\n    });\n    inputElement?.addEventListener('blur', () => {\n      if (inputElement.value === '') {\n        labelElement?.classList.remove('active');\n      }\n      if (onConfirm) {\n        onConfirm(inputElement.value);\n      }\n    });\n  }, [id]);\n\n  return (\n    <>\n      <label htmlFor={attributes.id}>{attributes.label}</label>\n      <BaseAutocomplete\n        source={source}\n        placeholder={placeholder}\n        defaultValue={defaultValue}\n        displayMenu={displayMenu}\n        tAssistiveHint={tAssistiveHint}\n        tNoResults={tNoResults}\n        tStatusQueryTooShort={tStatusQueryTooShort}\n        tStatusNoResults={tStatusNoResults}\n        tStatusSelectedOption={tStatusSelectedOption}\n        tStatusResults={tStatusResults}\n        onConfirm={onConfirm}\n        inputClasses={`form-control ${validityCheck && (valid === false ? 'is-invalid' : 'just-validate-success-field')}`}\n        showNoOptionsFound={true}\n        hintClasses='app-hint'\n        autoselect={false}\n        showAllValues={false}\n        templates={undefined}\n        confirmOnBlur={false}\n        menuAttributes={null}\n        menuClasses={null}\n        {...attributes}\n      />\n      <div className='form-feedback just-validate-error-label form-text form-feedback just-validate-error-label'>\n        {!valid && validationText}\n      </div>\n    </>\n  );\n};\n"],"mappings":"0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,kBAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAAqC,sBAGrCA,EAA6B,8CAwCvBC,EAAwB,IAC5B,kNACIC,EAAoB,IAAM,2BAC1BC,EAA+BC,GACnC,UAAUA,CAAc,yDACpBC,EAA0B,IAAM,8BAChCC,EAA+B,CAACC,EAAwBC,EAAgBC,IAC5E,GAAGF,CAAc,IAAIE,EAAQ,CAAC,OAAOD,CAAM,qBACvCE,EAAwB,CAACF,EAAgBG,IAAkC,CAC/E,IAAMC,EAAQ,CACZ,OAAQJ,IAAW,EAAI,YAAc,YACrC,GAAIA,IAAW,EAAI,OAAM,OACzB,UAAWA,IAAW,EAAI,cAAgB,aAC5C,EAEA,MAAO,GAAGA,CAAM,IAAII,EAAM,MAAM,IAAIA,EAAM,EAAE,IAAIA,EAAM,SAAS,KAAKD,CAAqB,EAC3F,EAEab,EAA2C,CAAC,CACvD,eAAAe,EAAiBZ,EACjB,WAAAa,EAAaZ,EACb,qBAAAa,EAAuBZ,EACvB,iBAAAa,EAAmBX,EACnB,sBAAAY,EAAwBX,EACxB,eAAAY,EAAiBR,EACjB,YAAAS,EAAc,GACd,aAAAC,EAAe,GACf,YAAAC,EAAc,SACd,OAAAC,EACA,eAAAC,EACA,UAAAC,EACA,GAAGC,CACL,IAAM,CACJ,GAAM,CAAE,GAAAC,EAAI,MAAAC,CAAM,EAAIF,EAChBG,EAAgBD,IAAU,IAAQA,IAAU,GAElD,sBAAU,IAAM,CACd,IAAME,EAAiC,SAAS,eAAeH,CAAE,EAC3DI,EAAeD,GAAc,eAAe,eAAe,qBAAqB,OAAO,EAAE,CAAC,EAE5FA,EAAa,QAAU,IACzBC,GAAc,UAAU,IAAI,QAAQ,EAGtCD,GAAc,iBAAiB,QAAS,IAAM,CAC5CC,GAAc,UAAU,IAAI,QAAQ,CACtC,CAAC,EACDD,GAAc,iBAAiB,OAAQ,IAAM,CACvCA,EAAa,QAAU,IACzBC,GAAc,UAAU,OAAO,QAAQ,EAErCN,GACFA,EAAUK,EAAa,KAAK,CAEhC,CAAC,CACH,EAAG,CAACH,CAAE,CAAC,EAGL,EAAAK,QAAA,gBAAAA,QAAA,cACE,EAAAA,QAAA,cAAC,SAAM,QAASN,EAAW,IAAKA,EAAW,KAAM,EACjD,EAAAM,QAAA,cAAC,EAAAC,QAAA,CACC,OAAQV,EACR,YAAaH,EACb,aAAcC,EACd,YAAaC,EACb,eAAgBR,EAChB,WAAYC,EACZ,qBAAsBC,EACtB,iBAAkBC,EAClB,sBAAuBC,EACvB,eAAgBC,EAChB,UAAWM,EACX,aAAc,gBAAgBI,IAAkBD,IAAU,GAAQ,aAAe,8BAA8B,GAC/G,mBAAoB,GACpB,YAAY,WACZ,WAAY,GACZ,cAAe,GACf,UAAW,OACX,cAAe,GACf,eAAgB,KAChB,YAAa,KACZ,GAAGF,EACN,EACA,EAAAM,QAAA,cAAC,OAAI,UAAU,6FACZ,CAACJ,GAASJ,CACb,CACF,CAEJ","names":["Autocomplete_exports","__export","Autocomplete","__toCommonJS","import_react","tAssistiveHintDefault","tNoResultsDefault","tStatusQueryTooShortDefault","minQueryLength","tStatusNoResultsDefault","tStatusSelectedOptionDefault","selectedOption","length","index","tStatusResultsDefault","contentSelectedOption","words","tAssistiveHint","tNoResults","tStatusQueryTooShort","tStatusNoResults","tStatusSelectedOption","tStatusResults","placeholder","defaultValue","displayMenu","source","validationText","onConfirm","attributes","id","valid","validityCheck","inputElement","labelElement","React","BaseAutocomplete"]}