ddata-ui-input/fesm2020/ddata-ui-input.mjs.map

DData UI Input module, components, models & services

{"version":3,"file":"ddata-ui-input.mjs","sources":["../../../projects/ddata-ui-input/src/lib/models/dialog/content/dialog-content-item.ts","../../../projects/ddata-ui-input/src/lib/models/search/search-model-functions.ts","../../../projects/ddata-ui-input/src/lib/models/search/search.model.ts","../../../projects/ddata-ui-input/src/lib/models/search/result/search-result.model.ts","../../../projects/ddata-ui-input/src/lib/pipes/description/description.pipe.ts","../../../projects/ddata-ui-input/src/lib/services/input/helper/input-helper.service.ts","../../../projects/ddata-ui-input/src/lib/components/checkbox/checkbox.component.ts","../../../projects/ddata-ui-input/src/lib/components/checkbox/checkbox.component.html","../../../projects/ddata-ui-input/src/lib/components/color/color-input.component.ts","../../../projects/ddata-ui-input/src/lib/components/color/color-input.component.html","../../../projects/ddata-ui-input/src/lib/components/date/date-input.component.ts","../../../projects/ddata-ui-input/src/lib/components/date/date-input.component.html","../../../projects/ddata-ui-input/src/lib/components/input/input.component.ts","../../../projects/ddata-ui-input/src/lib/components/input/input.component.html","../../../projects/ddata-ui-input/src/lib/models/search/base-search.model.ts","../../../projects/ddata-ui-input/src/lib/models/search/result/base-search-result.model.ts","../../../projects/ddata-ui-input/src/lib/components/search/search.component.ts","../../../projects/ddata-ui-input/src/lib/components/search/search.component.html","../../../projects/ddata-ui-input/src/lib/components/select/simple-select/simple-select.component.ts","../../../projects/ddata-ui-input/src/lib/components/select/simple-select/simple-select.component.html","../../../projects/ddata-ui-input/src/lib/services/select/component-renderer.service.ts","../../../projects/ddata-ui-input/src/lib/components/select/multiple-select/dialog/multiple-select-dialog.component.ts","../../../projects/ddata-ui-input/src/lib/components/select/multiple-select/dialog/multiple-select-dialog.component.html","../../../projects/ddata-ui-input/src/lib/components/select/multiple-select/multiple-select.component.ts","../../../projects/ddata-ui-input/src/lib/components/select/multiple-select/multiple-select.component.html","../../../projects/ddata-ui-input/src/lib/components/select/select.component.ts","../../../projects/ddata-ui-input/src/lib/components/select/select.component.html","../../../projects/ddata-ui-input/src/lib/components/textarea/textarea.component.ts","../../../projects/ddata-ui-input/src/lib/components/textarea/textarea.component.html","../../../projects/ddata-ui-input/src/lib/components/time/time-input.component.ts","../../../projects/ddata-ui-input/src/lib/components/time/time-input.component.html","../../../projects/ddata-ui-input/src/lib/ddata-ui-input.module.ts","../../../projects/ddata-ui-input/src/public-api.ts","../../../projects/ddata-ui-input/src/ddata-ui-input.ts"],"sourcesContent":["import { Type } from '@angular/core';\n\nexport class DialogContentItem {\n  constructor(public component: Type<any>, public data: any) {}\n}\n\nexport class DialogContentWithOptions {\n  constructor(public component: Type<any>, public options: any) {}\n}\n","// tslint:disable: variable-name\nimport { faCog, IconDefinition } from '@fortawesome/free-solid-svg-icons';\nimport { BaseModel, ID } from 'ddata-core';\nimport { IconSetInterface } from '../icon-set/icon-set.interface';\n\nexport class SearchModelFunctions extends BaseModel {\n  id: ID;\n  name: string;\n  description: string;\n  type: string;\n  found_model_name: string;\n  icon: IconDefinition;\n  url: string;\n  icons: IconSetInterface = {\n    cog: faCog,\n  };\n\n  init(data?: any): any {\n    data = !!data ? data : {};\n\n    this.initAsNumberWithDefaults(['id'], data);\n\n    this.initAsStringWithDefaults(\n      ['name', 'description', 'type', 'found_model_name'],\n      data\n    );\n\n    this.icon = this.setIcon(this.type);\n\n    this.url = this.setUrl(this.type);\n\n    return this;\n  }\n\n  protected setUrl(type: string): string {\n    return type.replace(new RegExp(/_/, 'g'), '/');\n  }\n\n  protected setIcon(type: string): IconDefinition {\n    if (!type) {\n      return this.icons.cog;\n    }\n\n    return this.icons[type] ?? this.icons.cog;\n  }\n}\n","import { SearchModelFunctions } from './search-model-functions';\nimport { SearchInterface } from './search.interface';\n\nexport abstract class Search extends SearchModelFunctions implements SearchInterface {\n  // tslint:disable: variable-name\n  readonly api_endpoint = '/search';\n  readonly model_name = 'Search';\n  searchText: string;\n\n  init(data?: any): SearchInterface {\n    data = !!data ? data : {};\n\n    super.init(data);\n\n    this.initAsStringWithDefaults(['searchText'], data);\n\n    return this;\n  }\n\n  prepareToSave(): any {\n    return {\n      term: !!this.searchText ? this.searchText : '',\n    };\n  }\n\n}\n","\nimport { SearchModelFunctions } from '../search-model-functions';\nimport { SearchResultInterface } from './search-result.interface';\n\nexport abstract class SearchResult extends SearchModelFunctions implements SearchResultInterface {\n\n  init(data?: any): SearchResultInterface {\n    super.init(data);\n\n    return this;\n  }\n\n}\n","import { Pipe, PipeTransform } from '@angular/core';\n\n@Pipe({\n  name: 'description'\n})\nexport class DescriptionPipe implements PipeTransform {\n\n  transform(value: string): any {\n    value = !!value ? value : '';\n    let result = '';\n    const parts = value.split('|');\n\n    parts.forEach((part: string) => {\n      part = part.replace(new RegExp(/^tel:(.*?)$/), '<a href=\"tel:$1\" class=\"mr-3\">$1</a>');\n      part = part.replace(new RegExp(/^email:(.*?)$/), '<a href=\"mailto:$1\" class=\"mr-3\">$1</a>');\n      part = part.replace(new RegExp(/^url:(.*?)$/), '<a href=\"$1\" class=\"mr-3\" target=\"_blank\">$1</a>');\n      part = part.replace(new RegExp(/^description:(.*?)$/), '<span class=\"description\">$1</span>');\n\n      result += part + ' ';\n    });\n\n    return result;\n  }\n\n}\n","import { BaseModelInterface, DdataCoreModule, FieldsInterface, ValidatorService, ValidatorServiceInterface } from 'ddata-core';\nimport { InputHelperServiceInterface } from './input-helper-service.interface';\n\nexport class InputHelperService implements InputHelperServiceInterface {\n  validatorService: ValidatorServiceInterface = DdataCoreModule.InjectorInstance.get<ValidatorService>(ValidatorService);\n\n  constructor() { }\n\n  validateField(model: BaseModelInterface<any> & FieldsInterface<any>, field: string): boolean {\n    // handle missing validation rule\n    if (!model.validationRules[field]) {\n      console.error('Missing validation rule:' + field + ' from model: ' + model.constructor.name);\n\n      return false;\n    }\n\n    const isValid: boolean = this.validatorService.validate(model[field], model.validationRules[field]);\n\n    // if not valid & validation error is not set\n    if (!isValid && !model.validationErrors.includes(field)) {\n      model.validationErrors.push(field);\n\n      return false;\n    }\n\n    // it's valid & validation error set - need remove\n    if (model.validationErrors.includes(field)) {\n      model.validationErrors.splice( model.validationErrors.indexOf(field), 1);\n    }\n\n    return true;\n  }\n\n  getTitle(model: BaseModelInterface<any> & FieldsInterface<any>, field: string): string {\n    if (!model || !model.fields[field] || !model.fields[field].title) {\n      console.error(`The model not contains the '${field}' field's title. You need to set in your model the fields.${field}.title field.`);\n\n      return '';\n    }\n\n    return model.fields[field].title;\n  }\n\n  getLabel(model: BaseModelInterface<any> & FieldsInterface<any>, field: string): string {\n    if (!model || !model.fields[field] || !model.fields[field].label) {\n      console.error(`The model not contains the '${field}' field's label. You need to set in your model the fields.${field}.label field.`);\n\n      return '';\n    }\n\n    return model.fields[field].label;\n  }\n\n  getPlaceholder(model: BaseModelInterface<any> & FieldsInterface<any>, field: string): string {\n    if (!model || !model.fields[field] || !model.fields[field].placeholder) {\n      console.error(`The model not contains the '${field}' field's placeholder. You need to set in your model the fields.${field}.placeholder field.`);\n\n      return '';\n    }\n\n    return model.fields[field].title;\n  }\n\n  getPrepend(model: BaseModelInterface<any> & FieldsInterface<any>, field: string): string {\n    if (!model || !model.fields[field] || !model.fields[field].prepend) {\n      return '';\n    }\n\n    return model.fields[field].prepend;\n  }\n\n  getAppend(model: BaseModelInterface<any> & FieldsInterface<any>, field: string): string {\n    if (!model || !model.fields[field] || !model.fields[field].append) {\n      return '';\n    }\n\n    return model.fields[field].append;\n  }\n\n  isRequired(model: BaseModelInterface<any> & FieldsInterface<any>, field: string): boolean {\n    return model.validationRules[field].includes('required');\n  }\n\n  randChars(): string {\n    let result = '';\n    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';\n    const charactersLength = characters.length;\n\n    for (let i = 0; i < 50; i++ ) {\n       result += characters.charAt(Math.floor(Math.random() * charactersLength));\n    }\n\n    return result;\n  }\n}\n","import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';\nimport { IconDefinition } from '@fortawesome/fontawesome-svg-core';\nimport { faCheckSquare, faSquare } from '@fortawesome/free-solid-svg-icons';\nimport { BaseModel, BaseModelInterface, FieldsInterface } from 'ddata-core';\n\n@Component({\n  selector: 'dd-input-checkbox',\n  templateUrl: './checkbox.component.html',\n  styleUrls: ['./checkbox.component.css']\n})\nexport class DdataInputCheckboxComponent implements OnInit {\n  // tslint:disable: variable-name\n  _model: BaseModelInterface<any> & FieldsInterface<any> = new BaseModel();\n  _field = 'isValid';\n  _label = '';\n\n  @Input() disabled = false;\n  @Input() set model(value: BaseModelInterface<any> & FieldsInterface<any> | null) {\n    if (!value) {\n      value = new BaseModel();\n    }\n\n    this._model = value;\n\n    if (!!this._model.fields) {\n      if (!!this._model.fields[this._field]) {\n        this._label = this._model.fields[this._field].label ?? '';\n      }\n    }\n  }\n  get model(): BaseModelInterface<any> & FieldsInterface<any> {\n    return this._model;\n  }\n  @Input() set field(value: string) {\n    if (value === 'undefined') {\n      value = 'isValid';\n    }\n\n    this._field = value;\n  }\n  get field(): string {\n    return this._field;\n  }\n  @Input() showLabel = true;\n  @Input() showLabelAfter = true;\n  @Input() labelClass = 'col pl-2 col-form-label';\n  @Input() wrapperClass = 'd-flex';\n  @Input() iconOn: IconDefinition = faCheckSquare;\n  @Input() iconOff: IconDefinition = faSquare;\n\n  @Output() changed: EventEmitter<boolean> = new EventEmitter();\n\n  iterable = 0;\n\n  constructor() { }\n\n  ngOnInit(): void {\n    this.iterable = Math.floor(Math.random() * 100);\n  }\n\n  clicked(): void {\n    if (!this.disabled) {\n      this.model[this._field] = !this.model[this._field];\n      this.changed.emit( this.model[this._field] );\n    }\n  }\n\n  getIcon(): IconDefinition {\n    return !!this.model[this._field] ? this.iconOn : this.iconOff;\n  }\n}\n","<div [class]=\"wrapperClass\">\n\n  <label *ngIf=\"showLabel && !showLabelAfter\"\n    [class]=\"labelClass\"\n    [class.disabled]=\"disabled\"\n    [for]=\"_field + iterable\"\n    >\n    {{ _label }}:\n  </label>\n\n  <button type=\"button\" class=\"btn btn-light\"\n    (click)=\"clicked()\"\n    [disabled]=\"disabled\"\n    [id]=\"_field + iterable\"\n    [name]=\"_field + iterable\"\n    [title]=\"_label\"\n    >\n    <fa-icon [icon]=\"getIcon()\"></fa-icon>\n  </button>\n\n  <label *ngIf=\"showLabel && showLabelAfter\"\n    [class]=\"labelClass\"\n    [class.disabled]=\"disabled\"\n    [for]=\"_field + iterable\"\n    >\n    {{ _label }}\n  </label>\n\n</div>\n","import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';\nimport { BaseModel, BaseModelInterface, DdataCoreModule, FieldsInterface, ValidatorService } from 'ddata-core';\nimport { InputHelperService } from '../../services/input/helper/input-helper.service';\n\n@Component({\n  selector: 'dd-input-color',\n  templateUrl: './color-input.component.html',\n  styleUrls: ['./color-input.component.scss']\n})\nexport class DdataInputColorComponent implements OnInit {\n\n  // tslint:disable: variable-name\n  _field = '';\n  _title = '';\n  _label = '';\n  _placeholder = '';\n  _prepend = '';\n  _append = '';\n  _isRequired = false;\n  _model: BaseModelInterface<any> & FieldsInterface<any> = new BaseModel();\n\n  @Input() set model(value: BaseModelInterface<any> & FieldsInterface<any> | null) {\n    if (!value) {\n      value = new BaseModel();\n    }\n\n    this._model = value;\n\n    if (!!this._model && !!this._model.fields[this._field]) {\n      this._title = this.helperService.getTitle(this._model, this._field);\n      this._placeholder = this.helperService.getPlaceholder(this._model, this._field);\n      this._prepend = this.helperService.getPrepend(this._model, this._field);\n      this._append = this.helperService.getAppend(this._model, this._field);\n      this._label = this.helperService.getLabel(this._model, this._field);\n    }\n\n    if (!!this._model && !!this._model.validationRules[this._field]) {\n      this._isRequired = this.helperService.isRequired(this._model, this._field);\n    }\n  }\n  get model(): BaseModelInterface<any> & FieldsInterface<any> {\n    return this._model;\n  }\n  @Input() set field(value: string) {\n    if (value === 'undefined') {\n      value = 'isValid';\n    }\n\n    this._field = value;\n  }\n  @Input() set append(value: string) {\n    if (value === 'undefined') {\n      value = '';\n    }\n\n    this._append = value;\n  }\n  @Input() set prepend(value: string) {\n    if (value === 'undefined') {\n      value = '';\n    }\n\n    this._prepend = value;\n  }\n  @Input() set labelText(value: string) {\n    if (value === 'undefined') {\n      value = '';\n    }\n\n    this._label = value;\n  }\n  @Input() disabled = false;\n  @Input() type = 'text';\n  @Input() inputClass = 'form-control';\n  @Input() labelClass = 'col-12 col-md-3 px-0 col-form-label';\n  @Input() inputBlockClass = 'col-12 d-flex px-0';\n  @Input() inputBlockExtraClass = 'col-md-9';\n  @Input() showLabel = true;\n  @Input() autoFocus = false;\n  @Input() wrapperClass = 'd-flex flex-wrap';\n\n  @Output() changed: EventEmitter<BaseModelInterface<any> & FieldsInterface<any>> = new EventEmitter();\n\n  @ViewChild('inputBox') inputBox: ElementRef;\n\n  random: string = this.helperService.randChars();\n  toggle = false;\n  validatorService: ValidatorService = DdataCoreModule.InjectorInstance.get<ValidatorService>(ValidatorService);\n\n  constructor(\n    private helperService: InputHelperService,\n  ) { }\n\n  ngOnInit(): void {\n    if (this.autoFocus) {\n      this.inputBox.nativeElement.focus();\n    }\n  }\n\n  validateField(): void {\n    const isValid = this.helperService.validateField(this._model, this._field);\n\n    if (isValid) {\n      this.changed.emit(this._model);\n    }\n\n  }\n}\n","<div [class]=\"wrapperClass\">\n  <label [class]=\"labelClass\" [for]=\"_field + '_' + random\" *ngIf=\"showLabel\">\n    {{ _label }}:\n    <span *ngIf=\"_isRequired\"> *</span>\n  </label>\n\n  <div [class]=\"inputBlockClass\" [ngClass]=\"showLabel ? inputBlockExtraClass : ''\">\n    <div class=\"input-color-container\" [style.background]=\"model[_field]\" (click)=\"toggle=!toggle\"></div>\n\n    <div class=\"input-group-prepend\" *ngIf=\" _prepend != '' \">\n      <div class=\"input-group-text\">{{ _prepend }}</div>\n    </div>\n\n    <input\n      [class.invalid]=\"model.validationErrors.includes(_field)\"\n      [class]=\"inputClass\"\n      [(ngModel)]=\"model[_field]\"\n      [id]=\"_field + '_' + random\"\n      [attr.name]=\"_field + '_' + random\"\n      [placeholder]=\"_placeholder\"\n      [title]=\"_title\"\n      [disabled]=\"disabled\"\n      [type]=\"type\"\n      [(colorPicker)]=\"model[_field]\"\n      [(cpToggle)]=\"toggle\"\n      cpPosition=\"bottom\"\n      cpOutputFormat=\"hex\"\n      cpAlphaChannel=\"disabled\"\n      cpFallbackColor=\"#c0c0c0\"\n      (keyup)=\"validateField()\"\n      #inputBox>\n\n    <div class=\"input-group-append\" *ngIf=\"_append != ''\">\n      <div class=\"input-group-text\">{{ _append }}</div>\n    </div>\n  </div>\n\n</div>\n","import { ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';\nimport { faCalendar } from '@fortawesome/free-solid-svg-icons';\nimport { NgbDate, NgbInputDatepicker } from '@ng-bootstrap/ng-bootstrap';\nimport { BaseModel, BaseModelInterface, DdataCoreModule, FieldsInterface } from 'ddata-core';\nimport * as moment from 'moment';\nimport { InputHelperServiceInterface } from '../../services/input/helper/input-helper-service.interface';\nimport { InputHelperService } from '../../services/input/helper/input-helper.service';\n\n@Component({\n  selector: 'dd-input-date',\n  templateUrl: './date-input.component.html',\n  styleUrls: ['./date-input.component.scss']\n})\nexport class DdataInputDateComponent implements OnInit {\n  helperService: InputHelperServiceInterface = DdataCoreModule.InjectorInstance.get<InputHelperServiceInterface>(InputHelperService);\n\n  // tslint:disable: variable-name\n  _field = '';\n  _title = '';\n  _label = '';\n  _placeholder = '';\n  _prepend = '';\n  _append = '';\n  _isRequired = false;\n  _model: BaseModelInterface<any> & FieldsInterface<any> = new BaseModel();\n  _moment = moment;\n\n  @Input() set moment(value: any) {\n    if (!value) {\n      value = moment;\n    }\n\n    this._moment = value;\n  }\n  @Input() set model(value: BaseModelInterface<any> & FieldsInterface<any> | null) {\n    if (!value) {\n      value = new BaseModel();\n    }\n\n    this._model = value;\n\n    if (!!this._model && !!this._model.fields[this._field]) {\n      this._title = this.helperService.getTitle(this._model, this._field);\n      this._placeholder = this.helperService.getPlaceholder(this._model, this._field);\n      this._prepend = this.helperService.getPrepend(this._model, this._field);\n      this._append = this.helperService.getAppend(this._model, this._field);\n      this._label = this.helperService.getLabel(this._model, this._field);\n    }\n\n    if (!!this._model && !!this._model.validationRules[this._field]) {\n      this._isRequired = this.helperService.isRequired(this._model, this._field);\n    }\n  }\n  get model(): BaseModelInterface<any> & FieldsInterface<any> {\n    return this._model;\n  }\n  @Input() set field(value: string) {\n    if (value === 'undefined') {\n      value = 'isValid';\n    }\n\n    this._field = value;\n  }\n  @Input() set append(value: string) {\n    if (value === 'undefined') {\n      value = '';\n    }\n\n    this._append = value;\n  }\n  @Input() set prepend(value: string) {\n    if (value === 'undefined') {\n      value = '';\n    }\n\n    this._prepend = value;\n  }\n  @Input() set labelText(value: string) {\n    if (value === 'undefined') {\n      value = '';\n    }\n\n    this._label = value;\n  }\n  @Input() disabled = false;\n  @Input() inputClass = 'form-control';\n  @Input() labelClass = 'col-12 col-md-3 px-0 col-form-label';\n  @Input() inputBlockClass = 'col-12 d-flex px-0';\n  @Input() inputBlockExtraClass = 'col-md-9';\n  @Input() showLabel = true;\n  @Input() autoFocus = false;\n  @Input() isViewOnly = false;\n  @Input() viewOnlyClass = 'form-control border-0 bg-light';\n  @Input() buttonClass = 'input-group-prepend btn btn-light mb-0';\n  @Input() wrapperClass = 'd-flex flex-wrap';\n  @Input() format = 'YYYY-MM-DD';\n  @Input() separator = '-';\n  @Input() labelApply = 'OK';\n  @Input() labelCancel = 'Cancel';\n  @Input() position: 'left' | 'center' | 'right' = 'center';\n  @Input() direction: 'up' | 'down' = 'down';\n  @Input() showIcon = true;\n  @Input() autoApply = true;\n  @Input() singleDatePicker = true;\n\n  @Output() changed: EventEmitter<BaseModelInterface<any> & FieldsInterface<any>> = new EventEmitter();\n\n  @ViewChild('inputBox') inputBox: ElementRef;\n\n  icon = {\n    calendar: faCalendar,\n  };\n  random: string = this.helperService.randChars();\n  selectedValue = !!this.model[this._field] ? this.model[this._field] : '';\n\n  constructor(\n    private changeDetector: ChangeDetectorRef,\n  ) { }\n\n  ngOnInit(): void {\n    if (!!this.model[this._field]) {\n      this.selectedValue = this.model[this._field];\n    }\n\n    if (this.autoFocus) {\n      this.inputBox.nativeElement.focus();\n    }\n  }\n\n\n  change(value: NgbDate): void {\n    this.selectedValue = value.year + '-' + value.month.toString().padStart(2, '0') + '-' + value.day.toString().padStart(2, '0');\n\n    this.model[this._field] = this.selectedValue;\n\n    const isValid = this.helperService.validateField(this._model, this._field);\n\n    if (isValid) {\n      this.changed.emit(this._model);\n    }\n  }\n\n  typeChange(event: any): void {\n    this._model[this._field] = event.target.value;\n  }\n}\n","<div [class]=\"wrapperClass\">\n  <label [class]=\"labelClass\" [for]=\"_field + '_' + random\" *ngIf=\"showLabel\">\n    {{ _label }}:\n    <span *ngIf=\"_is_required\"> *</span>\n  </label>\n\n  <div [class]=\"inputBlockClass\" [ngClass]=\"showLabel ? inputBlockExtraClass : ''\">\n\n    <div class=\"input-group-prepend\" *ngIf=\" _prepend != '' \">\n      <div class=\"input-group-text\">{{ _prepend }}</div>\n    </div>\n\n    <ng-container *ngIf=\"!isViewOnly\">\n\n        <input\n          [class.invalid]=\"model.validationErrors.includes(_field)\"\n          [class]=\"inputClass\"\n          [disabled]=\"disabled\"\n          [id]=\"_field + '_' + random\"\n          [name]=\"_field + '_' + random\"\n          [placeholder]=\"_placeholder\"\n          [title]=\"_title\"\n          [value]=\"model[_field]\"\n          (dateSelect)=\"change($event)\"\n          type=\"text\"\n          ngbDatepicker\n          #d=\"ngbDatepicker\"\n          (click)=\"d.toggle()\"\n          (change)=\"typeChange($event)\">\n\n    </ng-container>\n\n    <ng-container *ngIf=\"isViewOnly\">\n      <div [class]=\"viewOnlyClass\">{{ model[_field] }}</div>\n    </ng-container>\n\n    <label [class]=\"buttonClass\" *ngIf=\"!disabled && showIcon\" [for]=\"_field + '_' + random\">\n      <fa-icon [icon]=\"icon.calendar\"></fa-icon>\n    </label>\n\n    <div class=\"input-group-append\" *ngIf=\"_append != ''\">\n      <div class=\"input-group-text\">{{ _append }}</div>\n    </div>\n  </div>\n\n</div>\n","import { EventEmitter } from '@angular/core';\n// tslint:disable: deprecation\nimport { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild, Output } from '@angular/core';\nimport { BaseModelInterface, FieldsInterface, BaseModel, DdataCoreModule } from 'ddata-core';\nimport { InputHelperServiceInterface } from '../../services/input/helper/input-helper-service.interface';\nimport { InputHelperService } from '../../services/input/helper/input-helper.service';\n\n@Component({\n  selector: 'dd-input',\n  templateUrl: './input.component.html',\n  styleUrls: ['./input.component.scss']\n})\nexport class DdataInputComponent implements OnInit, AfterViewInit {\n  helperService: InputHelperServiceInterface = DdataCoreModule.InjectorInstance.get<InputHelperServiceInterface>(InputHelperService);\n\n  // tslint:disable: variable-name\n  _field = '';\n  _title = '';\n  _label = '';\n  _placeholder = '';\n  _prepend = '';\n  _append = '';\n  _max = '';\n  _isRequired = false;\n  _model: BaseModelInterface<any> & FieldsInterface<any> = new BaseModel();\n\n  @Input() set model(value: BaseModelInterface<any> & FieldsInterface<any> | null) {\n    // prevent undefined\n    if (!value) {\n      console.error('The input-box component get undefined model');\n\n      return;\n    }\n    this._model = value;\n\n    if (!this._model.fields) {\n      console.error(`Your ${this._model.model_name}'s 'fields' field is`, this._model.fields);\n\n      return;\n    }\n\n    if (!this._model.fields[this._field]) {\n      console.error(`The ${this._model.model_name}'s ${this._field} field is `, this._model.fields[this._field]);\n\n      return;\n    }\n\n    if (!!this._model && !!this._model.fields[this._field]) {\n      this._title = this.helperService.getTitle(this._model, this._field);\n      this._placeholder = this.helperService.getPlaceholder(this._model, this._field);\n      this._prepend = this.helperService.getPrepend(this._model, this._field);\n      this._append = this.helperService.getAppend(this._model, this._field);\n      this._label = this.helperService.getLabel(this._model, this._field);\n    }\n\n    if (!!this._model && !!this._model.validationRules[this._field]) {\n      this._isRequired = this.helperService.isRequired(this._model, this._field);\n    }\n  }\n  get model(): BaseModelInterface<any> & FieldsInterface<any> {\n    return this._model;\n  }\n  @Input() set field(value: string) {\n    if (value === 'undefined') {\n      value = 'isValid';\n    }\n\n    this._field = value;\n  }\n  @Input() set append(value: string) {\n    if (value === 'undefined') {\n      value = '';\n    }\n\n    this._append = value;\n  }\n  @Input() set prepend(value: string) {\n    if (value === 'undefined') {\n      value = '';\n    }\n\n    this._prepend = value;\n  }\n  @Input() set labelText(value: string) {\n    if (value === 'undefined') {\n      value = '';\n    }\n\n    this._label = value;\n  }\n  @Input() disabled = false;\n  @Input() isViewOnly = false;\n  @Input() type = 'text';\n  @Input() inputClass = 'form-control';\n  @Input() labelClass = 'col-12 col-md-3 px-0 col-form-label';\n  @Input() inputBlockClass = 'col-12 d-flex px-0';\n  @Input() inputBlockExtraClass = 'col-md-9';\n  @Input() viewOnlyClass = 'form-control border-0 bg-light';\n  @Input() wrapperClass = 'd-flex flex-wrap';\n  @Input() showLabel = true;\n  @Input() autoFocus = false;\n  @Input() enableCharacterCounter = false;\n  @Input() enableWordCounter = false;\n  @Input() maxLength = 255;\n  @Input() maxWords = 7;\n  @Input() wordCounterWarningMessage = '';\n\n  @Output() changed: EventEmitter<any> = new EventEmitter();\n\n  @Output() readonly maxLengthReached: EventEmitter<boolean> = new EventEmitter();\n\n  @ViewChild('inputBox') inputBox: ElementRef;\n\n  random: string = this.helperService.randChars();\n\n  displayWordCounterWarning = false;\n\n  constructor() { }\n\n  ngOnInit(): void {\n  }\n\n  ngAfterViewInit(): void {\n    if (this.autoFocus) {\n      this.inputBox.nativeElement.focus();\n    }\n  }\n\n  validateField(): void {\n    const isValid = this.helperService.validateField(this._model, this._field);\n\n    if (isValid) {\n      this.changed.emit(this._model);\n    }\n  }\n\n  setWordCounterWarning(value: boolean): void {\n    this.displayWordCounterWarning = value;\n  }\n}\n","<div [class]=\"wrapperClass\">\n  <label [class]=\"labelClass\" [for]=\"_field + '_' + random\" *ngIf=\"showLabel\">\n    {{ _label }}:\n    <span *ngIf=\"_isRequired\"> *</span>\n  </label>\n  <div [class]=\"inputBlockClass\" [ngClass]=\"showLabel ? inputBlockExtraClass : ''\">\n    <div class=\"input-group-prepend\" *ngIf=\" _prepend != '' \">\n      <div class=\"input-group-text\">{{ _prepend }}</div>\n    </div>\n\n    <ng-container *ngIf=\"!isViewOnly\">\n      <input\n        [class.invalid]=\"model.validationErrors.includes(_field)\"\n        [class]=\"inputClass\"\n        [(ngModel)]=\"model[_field]\"\n        [id]=\"_field + '_' + random\"\n        [attr.name]=\"_field + '_' + random\"\n        [placeholder]=\"_placeholder\"\n        [title]=\"_title\"\n        [disabled]=\"disabled\"\n        [type]=\"type\"\n        [autocomplete]=\"random\"\n        (keyup)=\"validateField()\"\n        #inputBox>\n        <ng-container *ngIf=\"enableCharacterCounter\">\n          <character-counter [currentLength]=\"model[_field]?.length || 0\" [maxLength]=\"maxLength\"></character-counter>\n        </ng-container>\n        <ng-container *ngIf=\"enableWordCounter\">\n          <app-word-counter\n          [currentLength]=\"model[_field]\"\n          [maxLength]=\"maxWords\"\n          (maxLentghReached)=\"showWordCounterWarning = $event\"\n        ></app-word-counter>\n        </ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"isViewOnly\">\n      <div\n        [id]=\"_field + '_' + random\"\n        [class]=\"viewOnlyClass\"\n        [attr.name]=\"_field + '_' + random\"\n        [title]=\"_title\">\n          {{ model[_field] }}\n      </div>\n    </ng-container>\n    <div class=\"input-group-append\" *ngIf=\"_append != ''\">\n      <div class=\"input-group-text\">{{ _append }}</div>\n    </div>\n  </div>\n  <div *ngIf=\"displayWordCounterWarning && wordCounterWarningMessage !== ''\" class=\"d-flex pb-2\">\n    <div class=\"col-12 col-md-7 offset-md-3 bg-warning p-2 rounded\">\n      {{ wordCounterWarningMessage }}\n    </div>\n  </div>\n</div>\n","import { Search } from './search.model';\nimport { SearchInterface } from './search.interface';\n\nexport class BaseSearch extends Search implements SearchInterface {\n  // only for prevent undefined values\n}\n","import { SearchResult } from './search-result.model';\nimport { SearchResultInterface } from './search-result.interface';\n\nexport class BaseSearchResult extends SearchResult implements SearchResultInterface {\n  // only for prevent undefined values\n}\n","\nimport { Component, ElementRef, HostListener, Input, OnDestroy, ViewChild } from '@angular/core';\nimport { Router } from '@angular/router';\nimport { faSearch } from '@fortawesome/free-solid-svg-icons';\n// tslint:disable-next-line: max-line-length\nimport { DdataCoreModule, Paginate, PaginateInterface, ProxyFactoryService, ProxyServiceInterface, SpinnerService, SpinnerServiceInterface } from 'ddata-core';\nimport { BehaviorSubject, fromEvent, Observable } from 'rxjs';\nimport { debounceTime, distinctUntilChanged, finalize, map, switchMap, take, takeUntil, tap } from 'rxjs/operators';\nimport { IconSetInterface } from '../../models/icon-set/icon-set.interface';\nimport { BaseSearch } from '../../models/search/base-search.model';\nimport { BaseSearchResult } from '../../models/search/result/base-search-result.model';\nimport { SearchResultInterface } from '../../models/search/result/search-result.interface';\nimport { SearchInterface } from '../../models/search/search.interface';\n\n@Component({\n  selector: 'dd-search',\n  templateUrl: './search.component.html',\n  styleUrls: ['./search.component.scss']\n})\nexport class DdataInputSearchComponent implements OnDestroy {\n  @Input() model: SearchInterface = new BaseSearch().init();\n  @Input() pageNumber = 0;\n  @Input() service: ProxyServiceInterface<SearchInterface> = new ProxyFactoryService<SearchInterface>().get(BaseSearch);\n\n  icon: IconSetInterface = {\n    search: faSearch,\n  };\n  isActive: BehaviorSubject<boolean> = new BehaviorSubject(false);\n  models: SearchResultInterface[] = [];\n  paginate: PaginateInterface = new Paginate(BaseSearchResult);\n  spinner: SpinnerServiceInterface = DdataCoreModule.InjectorInstance.get<SpinnerServiceInterface>(SpinnerService);\n\n  @ViewChild('searchInput') searchInput: ElementRef;\n\n  @HostListener('document:click', ['$event']) clickout(event: any): void {\n    if (!this.elementRef.nativeElement.contains(event.target)) {\n      // click out of component\n      this.close();\n    }\n  }\n\n  constructor(\n    private elementRef: ElementRef,\n    private router: Router,\n  ) {}\n\n  ngOnDestroy(): void {\n    this.isActive.next(false);\n  }\n\n  close(): void {\n    this.models = [];\n    this.isActive.next(false);\n  }\n\n  search(): Observable<any> {\n    // don't run if search string is empty, but reset models & close previous connection\n    if (this.model.searchText === '') {\n      this.isActive.next(false);\n      this.models = [];\n\n      return;\n    }\n\n    // close previous connection\n    this.isActive.next(false);\n\n    return fromEvent(this.searchInput.nativeElement, 'keyup').pipe(\n      // run after 500 ms of last keyup\n      debounceTime(500),\n\n      // run only if value is changed\n      distinctUntilChanged(),\n\n      // run only if search input is still active and value is not empty string\n      takeUntil(this.isActive),\n\n      // switch on spinner\n      tap(() => this.spinner.on('search')),\n\n      // run search method\n      switchMap(() => this.service.search(this.model.prepareToSave(), this.pageNumber).pipe(\n        map((result: PaginateInterface) => {\n          this.setResult(result);\n\n          return result;\n        })\n      )),\n\n      // switch off spinner\n      finalize(() => this.spinner.off('search')),\n\n    );\n  }\n\n  changePage(turnToPage: number): void {\n    this.service.getPage(turnToPage).pipe(\n      // run only if search input is still active and value is not empty string\n      takeUntil(this.isActive),\n\n      // take only last result\n      take(1),\n\n      // switch on spinner\n      tap(() => this.spinner.on('global-search-change-page')),\n\n      // set result\n      map((result: PaginateInterface) => {\n        this.setResult(result);\n\n        return result;\n      }),\n\n      // switch off spinner\n      finalize(() => this.spinner.off('global-search-change-page')),\n\n    ).subscribe();\n  }\n\n  go(model: SearchInterface): void {\n    const url = model.url + '/edit/' + model.id;\n\n    this.close();\n    this.router.navigateByUrl(url);\n  }\n\n  private setResult(result: PaginateInterface): void {\n    this.paginate = result;\n    this.models = [];\n\n    result.data.forEach((item: SearchResultInterface) => {\n      const model = new BaseSearchResult().init(item);\n      this.models.push(model);\n    });\n  }\n}\n","<div class=\"col-12 px-0\">\n  <!-- kereső input -->\n  <div class=\"input-group\" id=\"dropdownMenuButton\">\n    <input #searchInput type=\"text\" autocomplete=\"off\" class=\"form-control border-0\" placeholder=\"Keresés...\"\n      name=\"search-string\" [(ngModel)]=\"model.searchText\">\n\n    <div class=\"input-group-append\">\n      <button type=\"submit\" class=\"btn btn-secondary border-0\" (click)=\"search()\">\n        <fa-icon [icon]=\"icon.search\" [fixedWidth]=\"true\"></fa-icon>\n      </button>\n    </div>\n\n  </div>\n\n  <!-- dropdown menü -->\n  <div class=\"search-dropdown col-12\" *ngIf=\"models.length > 0\" [ngStyle]=\"{'display': models.length > 0 ? 'block' : 'none' }\">\n    <div class=\"border-bottom text-left dropdown-item\" *ngFor=\"let model of models\" (click)=\"go(model)\">\n      <div class=\"row\">\n        <!-- icon -->\n        <div class=\"col-1 px-0 text-center text-muted\">\n          <fa-icon [icon]=\"model.icon\" [fixedWidth]=\"true\"></fa-icon>\n        </div>\n        <div class=\"col-10\">\n          <!-- name -->\n          <div class=\"row\">\n            <div class=\"col-12 font-bold\">\n              {{ model.name }}\n            </div>\n          </div>\n          <!-- description -->\n          <div class=\"row\">\n            <div class=\"col-12 small text-muted\" [innerHTML]=\"model.description | description\"></div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <app-paginate [paginate]=\"paginate\" (changePage)=\"changePage($event)\"></app-paginate>\n  </div>\n</div>\n","import { Component, EventEmitter, Input, Output } from '@angular/core';\nimport { BaseModelInterface, DdataCoreModule, FieldsInterface } from 'ddata-core';\nimport { InputHelperServiceInterface } from '../../../services/input/helper/input-helper-service.interface';\nimport { InputHelperService } from '../../../services/input/helper/input-helper.service';\n\n@Component({\n  selector: 'simple-select',\n  templateUrl: './simple-select.component.html',\n  styleUrls: ['./simple-select.component.scss']\n})\nexport class DdataSimpleSelectComponent {\n  private helperService: InputHelperServiceInterface =\n    DdataCoreModule.InjectorInstance.get<InputHelperServiceInterface>(InputHelperService);\n  private random: string = this.helperService.randChars();\n  private selectedModel: any;\n\n\n  // look & feel\n  @Input() wrapperClass = 'd-flex flex-wrap';\n  @Input() inputBlockClass = 'col-12 d-flex px-0';\n  @Input() inputBlockExtraClass = 'col-md-9';\n  @Input() unselectedText = 'Válassz';\n\n  // behavior\n  @Input() isRequire = false;\n  @Input() disabledAppearance = false;\n  @Input() disabled = false;\n  @Input() addEmptyOption = true;\n\n  // label\n  @Input() labelClass = 'col-12 col-md-3 px-0 col-form-label';\n  @Input() showLabel = true;\n  @Input() labelText = '';\n\n  // additional texts\n  @Input() prepend = '';\n  @Input() append = '';\n\n  // data\n  @Input() model: BaseModelInterface<any> & FieldsInterface<any>;\n  @Input() field = 'id';\n  @Input() items: any[] = [];\n  @Input() text = 'name';\n  @Input() valueField = 'id';\n\n  @Output() selected: EventEmitter<any> = new EventEmitter();\n  @Output() selectModel: EventEmitter<any> = new EventEmitter();\n\n  get id(): string {\n    return `${this.field}_${this.random}`;\n  }\n\n  selectItem(): void {\n    this.selectedModel = this.items.find(item => item[this.field] === this.model[this.field]);\n\n    this.selected.emit(this.model[this.field]);\n    this.selectModel.emit(this.selectedModel);\n  }\n}\n","<div [class]=\"wrapperClass\">\n  <!-- label -->\n  <label\n    [class]=\"labelClass\"\n    [for]=\"id\"\n    *ngIf=\"showLabel\"\n  >\n    {{ labelText }}:\n\n    <span *ngIf=\"isRequired\"> *</span>\n  </label>\n\n\n  <!-- select -->\n  <div\n    [class]=\"inputBlockClass\"\n    [ngClass]=\"showLabel ? inputBlockExtraClass : ''\"\n  >\n\n    <!-- prepend -->\n    <div class=\"input-group-prepend\" *ngIf=\"!!prepend\">\n      <div class=\"input-group-text\">{{ prepend }}</div>\n    </div>\n\n    <select class=\"form-select\"\n      [(ngModel)]=\"model[field]\"\n      [class.invalid]=\"model.validationErrors.includes(field)\"\n      [class.disable-appearance]=\"disabledAppearance\"\n      [disabled]=\"disabled\"\n      (change)=\"selectItem()\"\n    >\n\n      <option *ngIf=\"addEmptyOption\" data-default value=\"0\">\n        -- {{ unselectedText }} --\n      </option>\n\n      <ng-container *ngFor=\"let item of items\">\n        <option\n          [value]=\"item[valueField]\"\n          [selected]=\"item[valueField] === model[field]\"\n        >\n          {{ item[text] }}\n        </option>\n      </ng-container>\n\n    </select>\n\n    <!-- append -->\n    <div class=\"input-group-append\" *ngIf=\"!!append\">\n      <div class=\"input-group-text\">{{ append }}</div>\n    </div>\n  </div>\n</div>\n","import { ChangeDetectorRef } from '@angular/core';\nimport { BaseModelInterface } from 'ddata-core';\nimport { DialogContentItem } from '../../models/dialog/content/dialog-content-item';\nimport { DialogContentInterface, DialogContentWithOptionsInterface } from '../../models/dialog/content/dialog-content.interface';\n\nexport class ComponentRendererService {\n  method: 'create-edit' | 'list' = 'list';\n  settings: DialogContentWithOptionsInterface;\n  dialogHost: any;\n  componentRef: any;\n  instance: DialogContentInterface;\n\n  constructor(private readonly changeDetector: ChangeDetectorRef) {\n  }\n\n  setMethod(method: 'create-edit' | 'list' = 'list'): ComponentRendererService {\n    this.method = method;\n\n    return this;\n  }\n\n  setSettings(settings: DialogContentWithOptionsInterface): ComponentRendererService {\n    this.settings = settings;\n\n    return this;\n  }\n\n  setDialogHost(dialogHost: any): ComponentRendererService {\n    if (!dialogHost) {\n      console.error(`DialogHost can't be undefined. DialogHost is not set.`);\n\n      return this;\n    }\n\n    this.dialogHost = dialogHost;\n\n    return this;\n  }\n\n  setComponentRef(componentRef: any): ComponentRendererService {\n    this.componentRef = componentRef;\n\n    return this;\n  }\n\n  render(): DialogContentInterface {\n    if (!this.dialogHost) {\n      console.error('dialogHost is not set');\n      return;\n    }\n\n    const dialogContent: DialogContentItem = this.method === 'create-edit' ?\n      new DialogContentItem(this.settings?.createEditComponent, this.settings?.createEditOptions) :\n      new DialogContentItem(this.settings?.listComponent, this.settings?.listOptions);\n\n    this.changeDetector.detectChanges();\n\n    this.dialogHost.clear();\n\n    this.componentRef = this.dialogHost.createComponent(dialogContent.component);\n\n    if (!this.componentRef) {\n      console.error('componentRef is not set', this.componentRef);\n\n      return;\n    }\n\n    this.componentRef.instance.model = dialogContent.data.model;\n\n    this.instance = this.componentRef.instance as DialogContentInterface;\n\n    if (this.method === 'list') {\n      this.configureListComponent(dialogContent);\n    }\n\n    this.configureAnyComponent();\n\n    return this.instance;\n  }\n\n  getSelectedModels(): Array<BaseModelInterface<any>> {\n    if (!this.instance) {\n      return [];\n    }\n\n    return this.instance.selectedElements;\n  }\n\n  setSelectedModels(selectedModels: Array<BaseModelInterface<any>>): ComponentRendererService {\n    if (!this.instance) {\n      return this;\n    }\n\n    this.changeDetector.detectChanges();\n\n    this.instance.selectedElements = selectedModels ?? [];\n\n    return this;\n  }\n\n  resetSelectedModels(): ComponentRendererService {\n    if (!this.instance) {\n      return this;\n    }\n\n    this.instance.selectedElements = [];\n\n    return this;\n  }\n\n  private configureListComponent(dialogContent: DialogContentItem): void {\n    if (!this.settings || !this.settings.listComponent) {\n      return;\n    }\n\n    if (!dialogContent.data) {\n      return;\n    }\n\n    if (!this.instance) {\n      console.error('Component instance is not set.');\n\n      return;\n    }\n\n    this.instance.multipleSelectEnabled = dialogContent.data.multipleSelectEnabled;\n    this.instance.isSelectionList = dialogContent.data.isSelectionList;\n    this.instance.loadData = dialogContent.data.loadData;\n    this.instance.filter = dialogContent.data.filter ?? {};\n\n    // if there is preset models\n    if (!dialogContent.data.loadData && !!dialogContent.data.models) {\n      // set preset models\n      this.instance.models = dialogContent.data.models;\n\n      // send a notification to the list component to update their material table and other things\n      this.instance.datasArrived.next(Math.random());\n    }\n  }\n\n  private configureAnyComponent(): void {\n    this.instance.isModal = true;\n  }\n}\n","import {\n  ChangeDetectorRef, Component, EventEmitter, HostListener, Input, OnInit, Output, ViewChild, ViewContainerRef\n} from '@angular/core';\nimport { BaseModelInterface, FieldsInterface } from 'ddata-core';\nimport { ComponentRendererService } from '../../../../services/select/component-renderer.service';\nimport { Subscription } from 'rxjs';\nimport { map, tap } from 'rxjs/operators';\nimport { DialogContentWithOptionsInterface } from '../../../../models/dialog/content/dialog-content.interface';\nimport { SelectType } from '../../select.type';\n\n@Component({\n  selector: 'multiple-select-dialog',\n  templateUrl: './multiple-select-dialog.component.html',\n  styleUrls: ['./multiple-select-dialog.component.scss']\n})\nexport class DdataMultipleSelectDialogComponent implements OnInit {\n  private componentRendererService: ComponentRendererService;\n  private componentRef: any;\n  private subscription: Subscription = new Subscription();\n  private selectedModel: any;\n\n  @Input() settings: DialogContentWithOptionsInterface;\n  @Input() method: 'create-edit' | 'list' = 'list';\n  @Input() mode: SelectType = 'multiple';\n\n  // for example: an Address model\n  @Input() model: BaseModelInterface<any> & FieldsInterface<any>;\n\n  // for example: tag_id\n  @Input() field = 'id';\n\n  // for example: tag's name\n  @Input() text = 'name';\n\n  // for example: tag.id\n  @Input() valueField = 'id';\n\n  // for example: Array of Tag\n  @Input() items: any[] = [];\n  @Input() modalTitle = 'Dialog';\n\n  @Output() selectionFinished: EventEmitter<any> = new EventEmitter();\n  @Output() selected: EventEmitter<any> = new EventEmitter();\n  @Output() selectModel: EventEmitter<any> = new EventEmitter();\n\n  @ViewChild('dialogHost', { read: ViewContainerRef }) dialogHost: ViewContainerRef;\n\n  // close dialog on esc\n  @HostListener('document:keydown.escape', ['$event']) onKeydownHandler(event: KeyboardEvent): void {\n    this.selectionFinished.emit();\n  }\n\n  constructor(readonly changeDetector: ChangeDetectorRef) {\n    this.componentRendererService = new ComponentRendererService(changeDetector);\n  }\n\n  ngOnInit(): void {\n    // get selected items from model's field\n    this.getSelectedItems();\n  }\n\n  ngAfterViewInit(): void {\n    // render component in dialog\n    const instance = this.componentRendererService\n      .setMethod(this.method)\n      .setSettings(this.settings)\n      .setDialogHost(this.dialogHost)\n      .setComponentRef(this.componentRef)\n      .render();\n\n    if (!instance) {\n      console.error('Component for dialog is not defined');\n\n      return;\n    }\n\n    if (this.mode === 'single') {\n      const selectedModel = this.model[this.getObjectFieldName()];\n\n      if (!!selectedModel) {\n        this.componentRendererService.setSelectedModels([\n          selectedModel\n        ]);\n      }\n    }\n\n    if (this.mode === 'multiple') {\n      this.componentRendererService.setSelectedModels(\n        this.model[this.field]\n      );\n    }\n\n    // for edit component\n    this.subscription.add(instance.saveModel.subscribe((model: any) => this.setModel(model)));\n\n    this.subscription.add(\n      instance.select.pipe(\n        tap(() => {\n          if (this.mode === 'multiple') {\n            this.model[this.field] = [];\n            this.settings.listOptions.selectedElements = [];\n          }\n        }),\n\n        map((models: any[]) => {\n          if (models === null) {\n            return models;\n          }\n\n          this.emitEvents(models);\n\n          return models;\n        }),\n      ).subscribe()\n    );\n  }\n\n  private getSelectedItems(): void {\n    if (this.mode === 'single') {\n      this.selectedModel = this.model[this.field];\n    }\n  }\n\n  hideModal(): void {\n    // get dialog component instance\n    const selectedElements = this.componentRendererService.getSelectedModels();\n\n    // emit selected elements\n    this.emitEvents(selectedElements);\n\n    // reset selected elements\n    this.componentRendererService.resetSelectedModels();\n  }\n\n  private emitEvents(models: any[]): void {\n    models.forEach((model: any) => {\n      // this must be happen on multiple select and on signle select case too\n      this.selectModel.emit(model);\n    });\n\n    this.selectionFinished.emit(models);\n  }\n\n  private getObjectFieldName(): string {\n    return this.field.split('_id')[0];\n  }\n\n  private setModel(model: any): any {\n    // TODO test this on edit case\n  }\n}\n","<!-- overlay -->\n<div class=\"modal-overlay active\"></div>\n\n<!-- modal -->\n<div class=\"modal\" tabindex=\"-1\" role=\"dialog\">\n  <div class=\"modal-dialog modal-dialog-centered modal-lg modal-dialog-scrollable\" role=\"document\">\n    <div class=\"modal-content\">\n      <!-- header -->\n      <div class=\"modal-header\">\n        <div class=\"col-10\">\n          <h5 class=\"modal-title\">\n            {{ modalTitle }}\n          </h5>\n        </div>\n\n        <div class=\"col-2 text-end\">\n          <button type=\"button\" class=\"btn btn-light close\" (click)=\"hideModal()\" aria-label=\"Bezárás\">\n            <span aria-hidden=\"true\">&times;</span>\n          </button>\n        </div>\n      </div>\n\n      <!-- body -->\n      <div class=\"modal-body\">\n        <ng-template dynamicComponent #dialogHost></ng-template>\n      </div>\n\n    </div>\n  </div>\n</div>\n","import { ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';\nimport { BaseModelInterface, DdataCoreModule, FieldsInterface } from 'ddata-core';\nimport { DialogContentWithOptionsInterface } from '../../../models/dialog/content/dialog-content.interface';\nimport { InputHelperServiceInterface } from '../../../services/input/helper/input-helper-service.interface';\nimport { InputHelperService } from '../../../services/input/helper/input-helper.service';\nimport { SelectType } from '../select.type';\n\n@Component({\n  selector: 'multiple-select',\n  templateUrl: './multiple-select.component.html',\n  styleUrls: ['./multiple-select.component.scss']\n})\nexport class DdataMultipleSelectComponent implements OnInit {\n  private helperService: InputHelperServiceInterface =\n    DdataCoreModule.InjectorInstance.get<InputHelperServiceInterface>(InputHelperService);\n  private random: string = this.helperService.randChars();\n\n  // look & feel\n  @Input() wrapperClass = 'd-flex flex-wrap';\n  @Input() inputBlockClass = 'col-12 d-flex px-0';\n  @Input() inputBlockExtraClass = 'col-md-9';\n  @Input() unselectedText = 'Válassz';\n\n  // behavior\n  @Input() mode: SelectType = 'multiple';\n  @Input() isRequire = false;\n  @Input() disabledAppearance = false;\n  @Input() disabled = false;