{"version":3,"file":"649.cce3791953f3ac88.js","sources":["./src/app/components/single-select-search/single-select-search.component.html","./src/app/components/single-select-search/single-select-search.component.ts"],"sourceRoot":"webpack:///","sourcesContent":["<div class=\"form-group row single-select-search-input mb-{{ formMargin }}\">\n  <app-custom-form-label\n    *ngIf=\"label?.length > 0\"\n    [label]=\"label\"\n    [required]=\"required\"\n    [showInfoAsTooltip]=\"showInfoAsTooltip\"\n    [toolTip]=\"tooltipText\"\n    class=\"col-md-{{ labelSize }} col-xs-12 weight-600 {{\n      showInfoAsTooltip ? 'mt-2' : 'mt-0'\n    }} {{ +labelSize === 12 && +inputSize === 12 ? 'mb-1' : 'mb-0' }}\"\n  ></app-custom-form-label>\n\n  <div\n    class=\"col-md-{{ 12 - inputSize - labelSize }}\"\n    *ngIf=\"12 - inputSize - labelSize > 0\"\n  ></div>\n\n  <div\n    class=\"col-md-{{ inputSize }}\"\n    [nbTooltip]=\"disabledTooltip\"\n    [nbTooltipDisabled]=\"!disabledTooltip?.length\"\n  >\n    <div\n      [ngClass]=\"disabled ? 'disabled-input' : ''\"\n      class=\"d-flex justify-content-between cursor-pointer w-100 input-parent rounded select-popover-trigger custom-select-button\"\n      #singleSelectSearchDropdownPopover=\"nbPopover\"\n      [nbPopover]=\"optionsPopover\"\n      nbPopoverTrigger=\"click\"\n      nbPopoverAdjustment=\"vertical\"\n      nbPopoverPlacement=\"bottom\"\n      [nbSpinner]=\"loading\"\n      nbPopoverClass=\"single-select-options-popover\"\n      (nbPopoverShowStateChange)=\"showStateChange($event)\"\n    >\n      <span\n        class=\"placeholder-text ml-3 mr-2\"\n        *ngIf=\"!customFormControl?.value\"\n      >\n        {{ selectInputPlaceholder }}\n      </span>\n      <!-- <span class=\"selected-option-text ml-3 mr-2\" *ngIf=\"selectedOption\">\n        {{ selectedOption.label }}\n      </span> -->\n      <input\n        nbInput\n        class=\"select-input\"\n        [formControl]=\"customFormControl\"\n        readonly\n        *ngIf=\"customFormControl?.value\"\n      />\n\n      <div class=\"d-flex align-items-center justify-content-end mr-1\">\n        <nb-icon\n          *ngIf=\"customFormControl?.value && showClearOption\"\n          icon=\"close-outline\"\n          class=\"cursor-pointer mr-2\"\n          style=\"height: 80%\"\n          (click)=\"clearSelectedOption($event)\"\n        ></nb-icon>\n        <nb-icon\n          [icon]=\"\n            openOptionsPopover ? 'chevron-up-outline' : 'chevron-down-outline'\n          \"\n          class=\"cursor-pointer\"\n        ></nb-icon>\n      </div>\n    </div>\n  </div>\n</div>\n\n<ng-template #optionsPopover>\n  <div class=\"p-2\">\n    <input\n      class=\"w-100\"\n      style=\"max-width: 100% !important\"\n      id=\"{{ searchInputId }}\"\n      [formControl]=\"searchString\"\n      nbInput\n      type=\"search\"\n      fieldSize=\"small\"\n      (input)=\"getFilteredOptions()\"\n      placeholder=\"{{ searchInputPlaceholder }}\"\n      autocomplete=\"off\"\n    />\n  </div>\n  <div *ngIf=\"!categorySelection\" style=\"max-height: 30vh; overflow-y: auto\">\n    <ng-container *ngIf=\"filteredOptions?.length\">\n      <ng-container *ngFor=\"let option of filteredOptions\">\n        <div\n          class=\"px-3 py-2 d-flex justify-content-between align-items-center cursor-pointer option\"\n          [ngClass]=\"{ selected: customFormControl?.value === option?.value }\"\n          (click)=\"selectOption(option)\"\n        >\n          <label class=\"weight-600 cursor-pointer m-0\">{{\n            option?.label\n          }}</label>\n          <nb-icon\n            *ngIf=\"showSuffixIcon\"\n            [icon]=\"optionsIcon\"\n            pack=\"fci\"\n            (click)=\"optionIconClicked($event, option)\"\n          ></nb-icon>\n        </div>\n      </ng-container>\n      <div\n        class=\"d-flex align-items-center justify-content-center w-100 py-2 create-new-option\"\n        nbPopoverTrigger=\"hover\"\n        (click)=\"onCreateNewOption($event)\"\n        *ngIf=\"createNewOptionLabel?.length\"\n      >\n        <span class=\"weight-600\">{{ createNewOptionLabel }}</span>\n        <nb-icon icon=\"plus-circle-outline\" pack=\"fci\" class=\"ml-2\"></nb-icon>\n      </div>\n    </ng-container>\n    <div class=\"my-2 ml-3\" *ngIf=\"!filteredOptions?.length\">\n      No {{ label | lowercase }} present\n    </div>\n  </div>\n\n  <div *ngIf=\"categorySelection\">\n    <div\n      style=\"max-height: 30vh; overflow-y: auto\"\n      *ngIf=\"(filteredGroupedOptions | keyvalue)?.length; else noOptions\"\n    >\n      <nb-option-group\n        *ngFor=\"let option of filteredGroupedOptions | keyvalue\"\n        title=\"{{ option?.key }}\"\n        class=\"pl-3 py-2 weight-600\"\n      >\n        <nb-option\n          *ngFor=\"let optionValue of option.value\"\n          value=\"{{ optionValue?.label }}\"\n          class=\"d-flex align-item-center pl-3 py-2\"\n          style=\"cursor: pointer\"\n          (click)=\"selectGroupedOption(optionValue, option?.key)\"\n          >{{ optionValue?.label }}\n        </nb-option>\n      </nb-option-group>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #noOptions>\n  <nb-option\n    style=\"height: 10vh\"\n    class=\"d-flex align-items-center justify-content-center\"\n    >No resources found to show.\n  </nb-option>\n</ng-template>\n","import {\n  Component,\n  Input,\n  Output,\n  EventEmitter,\n  SimpleChanges,\n  OnChanges,\n  ViewChild,\n  TemplateRef,\n} from '@angular/core';\nimport { UntypedFormControl } from '@angular/forms';\nimport { NbDialogService, NbPopoverDirective } from '@nebular/theme';\n\ninterface ResourceOption {\n  label: string;\n  value: string;\n}\n\n@Component({\n  selector: 'app-single-select-search',\n  templateUrl: './single-select-search.component.html',\n  styleUrls: ['./single-select-search.component.scss'],\n})\nexport class SingleSelectSearchComponent implements OnChanges {\n  @Output() selectedChange = new EventEmitter<any>(); // Event emitter for selected option\n\n  @Output() optionIconEvent = new EventEmitter<any>(); // Event emitter for selected option\n  @Output() createNewOptionEvent = new EventEmitter<any>();\n\n  @Input() label: string = '';\n  @Input() required: boolean = false;\n  @Input() tooltipText: string = ''; //tooltip text for label\n  @Input() showInfoAsTooltip: boolean = true;\n  @Input() labelSize: number = 3;\n  @Input() inputSize: number = 5;\n  @Input() options: { label: string; value: string }[] = [];\n  @Input() groupedOptions: { [key: string]: string[] } = {};\n  @Input() noOptionsMessage: string = `No ${this.label} available`;\n  @Input() searchInputId: string = '';\n  @Input() selectInputPlaceholder: string = `Select ${this.label}`;\n  @Input() searchInputPlaceholder: string = `Search ${this.label}`;\n  @Input() showClearOption: boolean = false;\n  @Input() loading: boolean = false;\n  @Input() disabled: boolean = false;\n  @Input() disabledTooltip: string = ''; //tooltip on select input when input is disabled for any reason\n  @Input() customFormControl: UntypedFormControl;\n  @Input() formMargin: number = 4;\n  @Input() showSuffixIcon: boolean = false;\n  @Input() optionsIcon: string = '';\n  @Input() createNewOptionLabel: string = '';\n  @Input() categorySelection: boolean = false;\n\n  @ViewChild('singleSelectSearchDropdownPopover', { static: false })\n  singleSelectSearchDropdownPopover: NbPopoverDirective;\n\n  openOptionsPopover: boolean = false;\n  selectedOption: any | null = null;\n  searchString: UntypedFormControl = new UntypedFormControl('');\n  filteredOptions: { label: string; value: string }[] = [];\n  filteredGroupedOptions: { [key: string]: ResourceOption[] } = {};\n  allOptions: { [key: string]: ResourceOption[] } = {};\n\n  constructor() {}\n\n  ngOnChanges(changes: SimpleChanges) {\n    if (this.options) {\n      this.filteredOptions = [...this.options];\n    }\n    if (changes?.groupedOptions?.currentValue) {\n      this.initializeGroupedOptions();\n    }\n  }\n\n  initializeGroupedOptions() {\n    Object.entries(this.groupedOptions).forEach(([type, values]) => {\n      this.allOptions[type] = values?.map((value) => ({\n        label: value,\n        value: value,\n      }));\n    });\n    this.filteredGroupedOptions = { ...this.allOptions };\n  }\n\n  getFilteredOptions() {\n    const searchTerm = this.searchString?.value || '';\n    const searchLower = searchTerm?.toLowerCase();\n    if (!searchTerm) {\n      if (this.categorySelection) {\n        this.filteredGroupedOptions = { ...this.allOptions };\n      } else {\n        this.filteredOptions = [...this.options];\n      }\n      return;\n    }\n    if (this.categorySelection) {\n      this.filteredGroupedOptions = Object.entries(this.allOptions)?.reduce(\n        (acc, [category, resources]) => {\n          const filteredResources = resources?.filter((resource) =>\n            resource?.label?.toLowerCase()?.includes(searchLower),\n          );\n          if (filteredResources?.length > 0) {\n            acc[category] = filteredResources;\n          }\n          return acc;\n        },\n        {} as { [key: string]: ResourceOption[] },\n      );\n    } else {\n      this.filteredOptions = this.options?.filter((option) =>\n        option?.label?.toLowerCase()?.includes(searchLower),\n      );\n    }\n  }\n\n  selectOption(option: { label: string; value: string }) {\n    this.selectedOption = option;\n    this.customFormControl.setValue(option?.value);\n    this.emitSelectedEvent();\n    this.singleSelectSearchDropdownPopover.hide();\n  }\n\n  selectGroupedOption(option: { label: string; value: string }, type: string) {\n    this.selectedOption = { option, type };\n    this.customFormControl.setValue(option?.value);\n    this.emitSelectedEvent();\n    this.singleSelectSearchDropdownPopover.hide();\n  }\n\n  clearSelectedOption(event) {\n    event?.stopPropagation();\n    this.selectedOption = null;\n    this.customFormControl?.setValue(null);\n    this.emitSelectedEvent();\n  }\n\n  emitSelectedEvent() {\n    this.selectedChange.emit(this.selectedOption);\n  }\n\n  showStateChange(event) {\n    this.openOptionsPopover = event.isShown;\n    if (!event.isShown) {\n      this.searchString.setValue('');\n      this.getFilteredOptions();\n    } else {\n      this.openOptionsPopover = true;\n      let selectBoundingRect = document\n        .querySelector('.input-parent')\n        .getBoundingClientRect();\n      let popoverElem = document.querySelector('nb-popover');\n      let dropdownElement = popoverElem?.parentElement;\n      if (dropdownElement) {\n        dropdownElement.style.width = selectBoundingRect.width + 'px';\n        dropdownElement.style.left = selectBoundingRect.left + 'px';\n      }\n    }\n  }\n\n  optionIconClicked(event, option) {\n    event?.stopPropagation();\n    this.optionIconEvent.emit(option);\n  }\n\n  onCreateNewOption(event) {\n    this.createNewOptionEvent.emit();\n  }\n}\n"],"names":["i0","SingleSelectSearchComponent","constructor","this","EventEmitter","label","UntypedFormControl","ngOnChanges","changes","options","filteredOptions","groupedOptions","currentValue","initializeGroupedOptions","Object","entries","forEach","type","values","allOptions","map","value","filteredGroupedOptions","getFilteredOptions","searchTerm","searchString","searchLower","toLowerCase","categorySelection","reduce","acc","category","resources","filteredResources","filter","resource","includes","length","option","selectOption","selectedOption","customFormControl","setValue","emitSelectedEvent","singleSelectSearchDropdownPopover","hide","selectGroupedOption","clearSelectedOption","event","stopPropagation","selectedChange","emit","showStateChange","openOptionsPopover","isShown","selectBoundingRect","document","querySelector","getBoundingClientRect","dropdownElement","parentElement","style","width","left","optionIconClicked","optionIconEvent","onCreateNewOption","createNewOptionEvent","static","selectors","ctx"],"mappings":"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","debug_id":"2f67e78b-5a42-5935-aa60-711a88bdd508"}